From 2dc2a1e737f832f2315d89be673f5a32e0d43740 Mon Sep 17 00:00:00 2001
From: Prakhar Trivedi <Prakhar896@users.noreply.github.com>
Date: Fri, 1 Aug 2025 17:19:07 +0800
Subject: [PATCH 1/4] working on designing sidebar

---
 src/components/Navbar.jsx  |  6 ++--
 src/components/Sidebar.jsx | 62 ++++++++++++++++++++++++++++++++------
 2 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 54c63c5..1062f4c 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -8,7 +8,7 @@ import { useSelector } from 'react-redux'
 
 function Navbar() {
     const navigate = useNavigate();
-    const [isOpen, setIsOpen] = useState(false);
+    const [sidebarOpen, setSidebarOpen] = useState(false);
     const { username, accountID } = useSelector(state => state.auth);
 
     const handleLogoClick = () => {
@@ -20,7 +20,7 @@ function Navbar() {
     }
 
     const toggleSidebar = () => {
-        setIsOpen(!isOpen);
+        setSidebarOpen(!sidebarOpen);
     }
 
     return <>
@@ -34,7 +34,7 @@ function Navbar() {
                 <Avatar.Image src={accountID && `${import.meta.env.VITE_BACKEND_URL}/cdn/pfp/${accountID}`} />
             </Avatar.Root>
         </Flex>
-        <Sidebar isOpen={isOpen} onOpenChange={(e) => setIsOpen(e.open)} />
+        <Sidebar isOpen={sidebarOpen} onOpenChange={(e) => setSidebarOpen(e.open)} />
     </>
 }
 
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index f464d4b..b8bb4b6 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1,25 +1,69 @@
-import { Button, CloseButton, Drawer, Portal, Text } from '@chakra-ui/react'
+import { Box, Button, CloseButton, Drawer, Image, Portal, Span, Text, VStack } from '@chakra-ui/react'
 import React, { useState } from 'react'
+import { useSelector } from 'react-redux'
+import logoVisual from '../assets/logoVisual.svg';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { CiGrid32 } from 'react-icons/ci';
+import { GrCatalogOption } from 'react-icons/gr';
+import { MdAdminPanelSettings, MdOutlinePublic } from 'react-icons/md';
+import { FaPeopleGroup } from 'react-icons/fa6';
+import { CgProfile } from 'react-icons/cg';
 
 function Sidebar({ isOpen, onOpenChange }) {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const { username } = useSelector(state => state.auth);
+
+    const nav = (path) => {
+        navigate(path);
+        onOpenChange({ open: false });
+    }
+
+    const isActive = (path) => {
+        return location.pathname.startsWith(path);
+    }
+    
     return (
-        <Drawer.Root open={isOpen} onOpenChange={onOpenChange} placement={'start'} size={'sm'}>
+        <Drawer.Root open={isOpen} onOpenChange={onOpenChange} placement={'start'} size={'xs'}>
             <Portal>
                 <Drawer.Backdrop />
                 <Drawer.Positioner padding={{ base: undefined, md: "4" }}>
                     <Drawer.Content rounded="md">
                         <Drawer.Header>
-                            <Drawer.Title>Drawer Title</Drawer.Title>
+                            <Box display={'flex'} justifyContent={'center'} alignItems={'center'} w={'100%'} h={'100%'}>
+                                <Image src={logoVisual} alt='ArchAIve Logo' height={'150px'} borderRadius={'20px'} onClick={() => nav('/')} cursor={'pointer'} />
+                            </Box>
                         </Drawer.Header>
                         <Drawer.Body>
-                            <p>
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-                                eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                            </p>
+                            <VStack display={'flex'} flexDir={'column'} alignItems={'flex-start'} justifyContent={'flex-start'} gap={6} p={'10px'}>
+                                <Button variant={isActive('/catalogue') ? 'solid': 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/catalogue')} fontSize={'md'}>
+                                    <GrCatalogOption /> Catalogue Browser
+                                </Button>
+
+                                <Button variant={isActive('/publicGallery') ? 'solid': 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/publicGallery')} fontSize={'md'}>
+                                    <MdOutlinePublic /> Public Gallery
+                                </Button>
+
+                                <Button variant={isActive('/figures') ? 'solid': 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/')} fontSize={'md'}>
+                                    <FaPeopleGroup /> Key Figures
+                                </Button>
+
+                                <Button variant={isActive('/profile') ? 'solid': 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/profile')} fontSize={'md'}>
+                                    <CgProfile /> My Profile
+                                </Button>
+
+                                <Button variant={isActive('/admin') ? 'solid': 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/')} fontSize={'md'}>
+                                    <MdAdminPanelSettings /> Admin Console
+                                </Button>
+                            </VStack>
                         </Drawer.Body>
                         <Drawer.Footer>
-                            <Button variant="outline">Cancel</Button>
-                            <Button>Save</Button>
+                            <Box w={'100%'} h={'100%'} display={'flex'} flexDir={'column'} alignItems={'center'} justifyContent={'center'}>
+                                {username && (
+                                    <Text fontSize={'md'} mb={'10px'}>Signed in: <Span fontWeight={'bold'}>{username}</Span></Text>
+                                )}
+                                <Text fontSize={'sm'} mb={'10px'}>© 2025 ArchAIve Team</Text>
+                            </Box>
                         </Drawer.Footer>
                         <Drawer.CloseTrigger asChild>
                             <CloseButton size="sm" />

From 7d061c2149ddc19b09bf8145d39780e9c1d78423 Mon Sep 17 00:00:00 2001
From: Prakhar Trivedi <Prakhar896@users.noreply.github.com>
Date: Fri, 1 Aug 2025 17:27:49 +0800
Subject: [PATCH 2/4] sidebar functionality completed

---
 src/components/Sidebar.jsx | 43 +++++++++++++++++++++++++-------------
 src/pages/Profile.jsx      |  6 +++++-
 2 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index b8bb4b6..acca6a4 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -8,11 +8,12 @@ import { GrCatalogOption } from 'react-icons/gr';
 import { MdAdminPanelSettings, MdOutlinePublic } from 'react-icons/md';
 import { FaPeopleGroup } from 'react-icons/fa6';
 import { CgProfile } from 'react-icons/cg';
+import { TbLogin2 } from 'react-icons/tb';
 
 function Sidebar({ isOpen, onOpenChange }) {
     const navigate = useNavigate();
     const location = useLocation();
-    const { username } = useSelector(state => state.auth);
+    const { username, superuser } = useSelector(state => state.auth);
 
     const nav = (path) => {
         navigate(path);
@@ -22,7 +23,7 @@ function Sidebar({ isOpen, onOpenChange }) {
     const isActive = (path) => {
         return location.pathname.startsWith(path);
     }
-    
+
     return (
         <Drawer.Root open={isOpen} onOpenChange={onOpenChange} placement={'start'} size={'xs'}>
             <Portal>
@@ -36,25 +37,37 @@ function Sidebar({ isOpen, onOpenChange }) {
                         </Drawer.Header>
                         <Drawer.Body>
                             <VStack display={'flex'} flexDir={'column'} alignItems={'flex-start'} justifyContent={'flex-start'} gap={6} p={'10px'}>
-                                <Button variant={isActive('/catalogue') ? 'solid': 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/catalogue')} fontSize={'md'}>
-                                    <GrCatalogOption /> Catalogue Browser
-                                </Button>
+                                {username && <>
+                                    <Button variant={isActive('/catalogue') ? 'solid' : 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/catalogue')} fontSize={'md'}>
+                                        <GrCatalogOption /> Catalogue Browser
+                                    </Button>
+
+                                    <Button variant={isActive('/figures') ? 'solid' : 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/')} fontSize={'md'}>
+                                        <FaPeopleGroup /> Key Figures
+                                    </Button>
+                                </>}
 
-                                <Button variant={isActive('/publicGallery') ? 'solid': 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/publicGallery')} fontSize={'md'}>
+                                <Button variant={isActive('/publicGallery') ? 'solid' : 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/publicGallery')} fontSize={'md'}>
                                     <MdOutlinePublic /> Public Gallery
                                 </Button>
 
-                                <Button variant={isActive('/figures') ? 'solid': 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/')} fontSize={'md'}>
-                                    <FaPeopleGroup /> Key Figures
-                                </Button>
+                                {username && (
+                                    <Button variant={isActive('/profile') ? 'solid' : 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/profile')} fontSize={'md'}>
+                                        <CgProfile /> My Profile
+                                    </Button>
+                                )}
 
-                                <Button variant={isActive('/profile') ? 'solid': 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/profile')} fontSize={'md'}>
-                                    <CgProfile /> My Profile
-                                </Button>
+                                {superuser === true && (
+                                    <Button variant={isActive('/admin') ? 'solid' : 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/')} fontSize={'md'}>
+                                        <MdAdminPanelSettings /> Admin Console
+                                    </Button>
+                                )}
 
-                                <Button variant={isActive('/admin') ? 'solid': 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/')} fontSize={'md'}>
-                                    <MdAdminPanelSettings /> Admin Console
-                                </Button>
+                                {!username && (
+                                    <Button variant={'solid'} color={'white'} bgColor={'primaryColour'} w={'100%'} onClick={() => nav('/auth/login')}>
+                                        <TbLogin2 /> Sign in
+                                    </Button>
+                                )}
                             </VStack>
                         </Drawer.Body>
                         <Drawer.Footer>
diff --git a/src/pages/Profile.jsx b/src/pages/Profile.jsx
index 248e551..a90b6a0 100644
--- a/src/pages/Profile.jsx
+++ b/src/pages/Profile.jsx
@@ -17,6 +17,8 @@ function Profile() {
     const navigate = useNavigate();
     const dispatch = useDispatch();
 
+    const { username } = useSelector(state => state.auth);
+
     // Loading states
     const [loggingOut, setLoggingOut] = useState(false);
     const [infoLoading, setInfoLoading] = useState(true);
@@ -127,7 +129,9 @@ function Profile() {
     }
 
     useEffect(() => {
-        getAccountInfo();
+        if (username) {
+            getAccountInfo();
+        }
     }, [])
 
     // useEffect(() => {

From 8bedd2f1eab6ae64ae3dc0f8ded8d9327966e91a Mon Sep 17 00:00:00 2001
From: Prakhar Trivedi <Prakhar896@users.noreply.github.com>
Date: Fri, 1 Aug 2025 17:54:59 +0800
Subject: [PATCH 3/4] created AdminConsole page

---
 src/components/Sidebar.jsx |  2 +-
 src/main.jsx               |  2 ++
 src/pages/AdminConsole.jsx | 49 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/AdminConsole.jsx

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index acca6a4..8ef87a5 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -58,7 +58,7 @@ function Sidebar({ isOpen, onOpenChange }) {
                                 )}
 
                                 {superuser === true && (
-                                    <Button variant={isActive('/admin') ? 'solid' : 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/')} fontSize={'md'}>
+                                    <Button variant={isActive('/admin') ? 'solid' : 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/admin')} fontSize={'md'}>
                                         <MdAdminPanelSettings /> Admin Console
                                     </Button>
                                 )}
diff --git a/src/main.jsx b/src/main.jsx
index 13a35cb..66e63da 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -21,6 +21,7 @@ import AnimateIn from './AnimateIn.jsx';
 import PublicGallery from './pages/PublicGallery.jsx';
 import PublicProfile from './pages/PublicProfile.jsx';
 import Profile from './pages/Profile.jsx';
+import AdminConsole from './pages/AdminConsole.jsx';
 
 const store = configureStore({
     reducer: {
@@ -50,6 +51,7 @@ createRoot(document.getElementById('root')).render(
                             {/* Protected Pages */}
                             <Route element={<ProtectedLayout />}>
                                 <Route path='profile' element={<Profile />} />
+                                <Route path='admin' element={<AdminConsole />} />
                             </Route>
                         </Route>
 
diff --git a/src/pages/AdminConsole.jsx b/src/pages/AdminConsole.jsx
new file mode 100644
index 0000000..5ae7505
--- /dev/null
+++ b/src/pages/AdminConsole.jsx
@@ -0,0 +1,49 @@
+import { Box, Button, Card, Text } from '@chakra-ui/react'
+import React from 'react'
+
+function AdminConsole() {
+    return (
+        <Box p={'20px'}>
+            <Text fontSize={'2xl'} fontWeight={'bold'}>Admin Console</Text>
+            <Box display={'flex'} flexDir={'row'} justifyContent={'space-around'} alignItems={'center'} h={'100%'} w={'100%'} mt={'20px'}>
+                <Card.Root width="320px" variant={'elevated'} size={'lg'}>
+                    <Card.Body gap="2">
+                        <Card.Title mb="2">User Management</Card.Title>
+                        <Card.Description fontSize={'md'}>
+                            Get an overview of all users, manage their information, and monitor activity.
+                        </Card.Description>
+                    </Card.Body>
+                    <Card.Footer justifyContent="flex-end">
+                        <Button variant={'ArchPrimary'} size={'md'}>Manage Users</Button>
+                    </Card.Footer>
+                </Card.Root>
+
+                <Card.Root width="320px" variant={'elevated'} size={'lg'}>
+                    <Card.Body gap="2">
+                        <Card.Title mb="2">Data Management</Card.Title>
+                        <Card.Description fontSize={'md'}>
+                            Analyse and manage batches, collections, artefacts and other data that goes into the platform.
+                        </Card.Description>
+                    </Card.Body>
+                    <Card.Footer justifyContent="flex-end">
+                        <Button variant={'ArchPrimary'} size={'md'}>Manage Data</Button>
+                    </Card.Footer>
+                </Card.Root>
+
+                <Card.Root width="320px" variant={'elevated'} size={'lg'}>
+                    <Card.Body gap="2">
+                        <Card.Title mb="2">Platform Controls</Card.Title>
+                        <Card.Description fontSize={'md'}>
+                            Manage platform settings, user permissions, and system configurations.
+                        </Card.Description>
+                    </Card.Body>
+                    <Card.Footer justifyContent="flex-end">
+                        <Button variant={'ArchPrimary'} size={'md'}>Manage Platform</Button>
+                    </Card.Footer>
+                </Card.Root>
+            </Box>
+        </Box>
+    )
+}
+
+export default AdminConsole
\ No newline at end of file

From 480b32273b9e4665946bca63cf75b554c002e4ca Mon Sep 17 00:00:00 2001
From: Prakhar Trivedi <Prakhar896@users.noreply.github.com>
Date: Fri, 1 Aug 2025 18:01:59 +0800
Subject: [PATCH 4/4] updated profile info link to cdn link

---
 src/pages/Profile.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Profile.jsx b/src/pages/Profile.jsx
index a90b6a0..2329c60 100644
--- a/src/pages/Profile.jsx
+++ b/src/pages/Profile.jsx
@@ -17,7 +17,7 @@ function Profile() {
     const navigate = useNavigate();
     const dispatch = useDispatch();
 
-    const { username } = useSelector(state => state.auth);
+    const { username, accountID } = useSelector(state => state.auth);
 
     // Loading states
     const [loggingOut, setLoggingOut] = useState(false);
@@ -89,7 +89,7 @@ function Profile() {
     const getAccountInfo = async () => {
         setInfoLoading(true);
         try {
-            const response = await server.get('/profile/info?includeLogs=true')
+            const response = await server.get(`/cdn/profileInfo/${accountID}?includeLogs=true`);
 
             if (response.data instanceof JSONResponse) {
                 if (response.data.isErrorStatus()) {