Sidebar and Admin Console Page

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)} />
     </>
 }
 

src/components/Sidebar.jsx

@@ -1,25 +1,82 @@
-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';
+import { TbLogin2 } from 'react-icons/tb';
 
 function Sidebar({ isOpen, onOpenChange }) {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const { username, superuser } = 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'}>
+                                {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'}>
+                                    <MdOutlinePublic /> Public Gallery
+                                </Button>
+
+                                {username && (
+                                    <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('/admin')} 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>
-                            <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" />

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>
 

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

src/pages/Profile.jsx

@@ -17,6 +17,8 @@ function Profile() {
     const navigate = useNavigate();
     const dispatch = useDispatch();
 
+    const { username, accountID } = useSelector(state => state.auth);
+
     // Loading states
     const [loggingOut, setLoggingOut] = useState(false);
     const [infoLoading, setInfoLoading] = useState(true);
@@ -87,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()) {
@@ -127,7 +129,9 @@ function Profile() {
     }
 
     useEffect(() => {
-        getAccountInfo();
+        if (username) {
+            getAccountInfo();
+        }
     }, [])
 
     // useEffect(() => {