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() { - setIsOpen(e.open)} /> + setSidebarOpen(e.open)} /> } diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx index f464d4b..8ef87a5 100644 --- a/src/components/Sidebar.jsx +++ b/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 Title + + ArchAIve Logo nav('/')} cursor={'pointer'} /> + -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. -

+ + {username && <> + + + + } + + + + {username && ( + + )} + + {superuser === true && ( + + )} + + {!username && ( + + )} +
- - + + {username && ( + Signed in: {username} + )} + © 2025 ArchAIve Team + 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 */} }> } /> + } /> 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 ( + + Admin Console + + + + User Management + + Get an overview of all users, manage their information, and monitor activity. + + + + + + + + + + Data Management + + Analyse and manage batches, collections, artefacts and other data that goes into the platform. + + + + + + + + + + Platform Controls + + Manage platform settings, user permissions, and system configurations. + + + + + + + + + ) +} + +export default AdminConsole \ No newline at end of file diff --git a/src/pages/Profile.jsx b/src/pages/Profile.jsx index 248e551..2329c60 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, 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(() => {