ArchAIve-Project · JunHammy · Jul 10, 2025 · Jul 4, 2025 · Jul 4, 2025 · Jul 4, 2025
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>ArchAIve</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/Layout.jsx b/src/Layout.jsx
@@ -2,6 +2,7 @@ import React, { useEffect } from 'react'
 import { useDispatch } from 'react-redux'
 import { Outlet, useNavigate } from 'react-router';
 import Navbar from './components/Navbar';
+import { Toaster } from './components/ui/toaster';
 
 function Layout() {
     const dispatch = useDispatch();
@@ -12,10 +13,13 @@ function Layout() {
     }, [])
 
     return (
-        <div className='defaultLayout'>
-            <Navbar />
-            <Outlet />
-        </div>
+        <>
+            <div className='defaultLayout'>
+                <Navbar />
+                <Outlet />
+            </div>
+            <Toaster />
+        </>
     )
 }
 

diff --git a/src/assets/favicon.svg b/src/assets/favicon.svg
diff --git a/src/assets/hp1.png b/src/assets/hp1.png
diff --git a/src/assets/hp2.png b/src/assets/hp2.png
diff --git a/src/assets/hp3.png b/src/assets/hp3.png
diff --git a/src/assets/hp4.png b/src/assets/hp4.png
diff --git a/src/assets/hp5.png b/src/assets/hp5.png
diff --git a/src/assets/hp6.png b/src/assets/hp6.png
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/assets/sccciBuildingOpening1964.png b/src/assets/sccciBuildingOpening1964.png
diff --git a/src/components/toastWizard.js b/src/components/toastWizard.js
@@ -0,0 +1,105 @@
+import { toaster } from "./ui/toaster";
+
+/**
+ * `ToastWizard` is a utility class for creating and managing toasts in the application.
+ * It provides methods to create standard toasts and promise-based toasts with various configurations.
+ * 
+ * Usage:
+ * ```javascript
+ * import ToastWizard from './path/to/ToastWizard';
+ * 
+ * const callback = () => console.log('Action clicked!');
+ * 
+ * ToastWizard.standard(
+ *     "success",
+ *     "Operation Successful",
+ *     "Your operation was completed successfully.",
+ *     5000, // duration (optional)
+ *     true, // closable (optional)
+ *     callback, // action (optional)
+ *     "Undo" // actionLabel. provide if action is being provided. (optional)
+ * )
+ * 
+ * 
+ * // Promise-based usage
+ * const myPromise = new Promise((resolve, reject) => {
+ *     // Simulate an async operation
+ *     setTimeout(() => {
+ *        resolve("Data loaded successfully");
+ *     }, 2000);
+ * });
+ * 
+ * ToastWizard.promiseBased(
+ *     myPromise,
+ *     "Operation Successful", // successTitle
+ *     "Data loaded successfully", // successDescription
+ *     "Error", // errorTitle
+ *     "Failed to load data", // errorDescription
+ *     "Loading", // loadingTitle
+ *     "Please wait while we load your data", // loadingDescription
+ *     callback, // action (optional)
+ *     "Cancel" // actionLabel. provide if action is being provided. (optional)
+ * )
+ * ```
+ * 
+ * `ToastWizard` uses the default `toaster` initialisation from Chakra UI. (See `src/components/ui/toaster.js` for more details)
+ */
+class ToastWizard {
+    // constructor(toaster) {
+    //     self.toaster = toaster;
+    // }
+
+    static standard(type, title, description=null, duration=3000, closable=false, action=null, actionLabel=null) {
+        var creationObject = {
+            type: type,
+            title: title,
+            duration: duration,
+            closable: closable
+        }
+
+        if (description) {
+            creationObject.description = description;
+        }
+
+        if (action && actionLabel) {
+            creationObject.action = {
+                label: actionLabel,
+                onClick: action
+            }
+        }
+
+        const id = toaster.create(creationObject)
+        return id;
+    }
+
+    static promiseBased(promise, successTitle, successDescription, errorTitle, errorDescription, loadingTitle, loadingDescription, action=null, actionLabel=null) {
+        return toaster.promise(promise, {
+            success: {
+                title: successTitle,
+                description: successDescription,
+                action: action ? {
+                    label: actionLabel,
+                    onClick: action
+                } : null
+            },
+            error: {
+                title: errorTitle,
+                description: errorDescription,
+                action: action ? {
+                    label: actionLabel,
+                    onClick: action
+                } : null
+            },
+            loading: {
+                title: loadingTitle,
+                description: loadingDescription,
+                action: action ? {
+                    label: actionLabel,
+                    onClick: action
+                } : null
+            }
+        })
+    }
+}
+
+export default ToastWizard;
diff --git a/src/components/ui/toaster.jsx b/src/components/ui/toaster.jsx
@@ -14,12 +14,22 @@ export const toaster = createToaster({
   pauseOnPageIdle: true,
 })
 
+const toastColors = {
+  success: 'primaryColour',
+  error: 'sccciColour',
+  info: 'blue.500',
+  warning: 'orange.500',
+  loading: 'gray.500',
+  default: 'gray.700',
+};
+
+
 export const Toaster = () => {
   return (
     <Portal>
       <ChakraToaster toaster={toaster} insetInline={{ mdDown: '4' }}>
         {(toast) => (
-          <Toast.Root width={{ md: 'sm' }}>
+          <Toast.Root width={{ md: 'sm' }} bg={toastColors[toast.type] || toastColors.default} borderRadius={'20px'}>
             {toast.type === 'loading' ? (
               <Spinner size='sm' color='blue.solid' />
             ) : (

diff --git a/src/main.jsx b/src/main.jsx
@@ -5,6 +5,7 @@ import { ChakraProvider, defaultSystem, Text } from "@chakra-ui/react"
 import { Provider } from 'react-redux'
 import { configureStore } from '@reduxjs/toolkit'
 import universalReducer from './slices/UniversalState.js'
+import authReducer from './slices/AuthState.js'
 import { BrowserRouter, Route, Routes } from 'react-router'
 import Catalogue from './pages/Catalogue.jsx'
 // import Test from './pages/test.jsx'
@@ -13,10 +14,12 @@ import GalleryLayout from './GalleryLayout.jsx';
 import MainTheme from './themes/MainTheme.js'
 import Health from './pages/Health.jsx'
 import Homepage from './pages/Homepage.jsx'
+import Login from './pages/Login.jsx';
 
 const store = configureStore({
     reducer: {
-        universal: universalReducer
+        universal: universalReducer,
+        auth: authReducer
     }
 })
 
@@ -29,6 +32,10 @@ createRoot(document.getElementById('root')).render(
                         <Route index element={<Homepage />} />
                         <Route path='health' element={<Health />} />
 
+                        <Route path="auth">
+                            <Route path="login" element={<Login />} />
+                        </Route>
+
                         {/* <Route path='/test' element={<Test />} /> */}
                     </Route>
 

diff --git a/src/networking.js b/src/networking.js
@@ -5,17 +5,25 @@ class JSONResponse {
         this.status = status || 400;
         this.type = data.type || null;
         this.message = data.message || null;
-        this.data = structuredClone(data || {});
+        this.raw = structuredClone(data || {});
     }
 
-    isError() {
+    isErrorStatus() {
         if (this.status === undefined || this.status === null) {
             console.warn("JSONResponse isError: Status is undefined or null, defaulting to error positive.");
             return true;
         }
         return !String(this.status).startsWith("2");
     }
 
+    errorType() {
+        return this.type === "ERROR";
+    }
+
+    userErrorType() {
+        return this.type === "UERROR";
+    }
+
     fullMessage() {
         if (this.type && this.message) {
             return `${this.type}: ${this.message}`;

diff --git a/src/pages/Homepage.jsx b/src/pages/Homepage.jsx
@@ -1,8 +1,54 @@
-import { Flex, Text } from '@chakra-ui/react'
+import { Box, Button, Flex, Image, Spacer, Text, VStack } from '@chakra-ui/react'
+import hp1 from '../assets/hp1.png';
+import hp2 from '../assets/hp2.png';
+import hp3 from '../assets/hp3.png';
+import hp4 from '../assets/hp4.png';
+import hp5 from '../assets/hp5.png';
+import hp6 from '../assets/hp6.png';
 
 function Homepage() {
+    const imgResponsiveSizing = { base: "150px", md: "250px" }
+    const imgColumnMinWidth = { base: "350px", md: "450px" }
+    const imgOffset = "-100px"
+
     return <Flex flexDir={'column'} justifyContent={'center'}>
-        <Text fontSize={'4xl'} fontWeight={'bold'} textAlign={'center'} mt={10} mb={5}>Connect <br />with your<br /> roots</Text>
+
+        <Flex flexDir={'row'} justifyContent={'center'} alignItems={'center'} w={'100%'} mt={"10px"}>
+            <Spacer />
+
+            {/* First images column */}
+            <Flex flexDir={'column'}>
+                <VStack spacing={{ base: "10px", md: "15px", lg: "20px" }} alignItems={'center'} minW={imgColumnMinWidth}>
+                    <Image src={hp1} height={imgResponsiveSizing} mr={imgOffset} />
+                    <Image src={hp2} height={imgResponsiveSizing} ml={imgOffset} />
+                    <Image src={hp3} height={imgResponsiveSizing} mr={imgOffset} />
+                </VStack>
+            </Flex>
+
+            <Spacer />
+
+            {/* Title, subtitle, and CTA button column */}
+            <Flex flexDir={'column'}>
+                <VStack spacing={{ base: "10px", md: "15px", lg: "20px" }} alignItems={'center'}>
+                    <Text fontSize={'5xl'} fontWeight={'bold'} textAlign={'center'} mt={10} mb={5}>Connect <br />with your<br /> roots</Text>
+                    <Text fontSize={'xl'} textAlign={'center'}>The intelligent artefact digitisation platform.</Text>
+                    <Button variant={'ArchPrimary'} size={'lg'} mt={'10px'}>Get Started</Button>
+                </VStack>
+            </Flex>
+
+            <Spacer />
+
+            {/* Second images column */}
+            <Flex flexDir={'column'}>
+                <VStack spacing={{ base: "10px", md: "15px", lg: "20px" }} alignItems={'center'} minW={imgColumnMinWidth}>
+                    <Image src={hp4} height={imgResponsiveSizing} ml={imgOffset} />
+                    <Image src={hp5} height={imgResponsiveSizing} mr={imgOffset} />
+                    <Image src={hp6} height={imgResponsiveSizing} ml={imgOffset} />
+                </VStack>
+            </Flex>
+
+            <Spacer />
+        </Flex>
     </Flex>
 }