Refactored store

frontend_reactjs/src/layouts/DashboardLayout.tsx

@@ -1,6 +1,6 @@
 // Layout for dashboard with responsive drawer
 
-import { Navigate, Outlet } from "react-router-dom"
+import { Link, NavLink, Navigate, Outlet, useLocation, useNavigate } from "react-router-dom"
 import * as React from 'react';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
@@ -17,7 +17,8 @@ import MenuIcon from '@mui/icons-material/Menu';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import { Api, ExitToApp, Home, People, Settings, Shield } from "@mui/icons-material";
-import { UserData, useAuthStore } from "../store/auth";
+import { getUserData, useAuthStore } from "../store/auth";
+import { UserData } from "../interfaces/auth";
 
 const drawerWidth = 240;
 
@@ -25,6 +26,10 @@ export default function DashboardLayout() {
     const authStore = useAuthStore();
     const [userData, setUserData] = React.useState<UserData>();
 
+    const location = useLocation()
+
+    const navigate = useNavigate()
+
     //const { window } = props;
     const [mobileOpen, setMobileOpen] = React.useState(false);
     const [isClosing, setIsClosing] = React.useState(false);
@@ -95,7 +100,12 @@ export default function DashboardLayout() {
             <List>
                 {pages.map((item, index) => (
                     <ListItem key={index} disablePadding>
-                        <ListItemButton href={item.path}>
+                        <ListItemButton
+                            onClick={() => {
+                                navigate(item.path)
+                            }}
+                            selected={location.pathname === item.path}
+                        >
                             <ListItemIcon>
                                 {item.icon}
                             </ListItemIcon>
@@ -110,7 +120,12 @@ export default function DashboardLayout() {
             <List>
                 {misc.map((item, index) => (
                     <ListItem key={index} disablePadding>
-                        <ListItemButton href={item.path}>
+                        <ListItemButton
+                            onClick={() => {
+                                navigate(item.path)
+                            }}
+                            selected={location.pathname === item.path}
+                        >
                             <ListItemIcon>
                                 {item.icon}
                             </ListItemIcon>
@@ -124,13 +139,20 @@ export default function DashboardLayout() {
 
     React.useEffect(() => {
         if (authStore) {
-            const stored = authStore.getUserData()
+            const stored = getUserData()
             if (stored) {
                 setUserData(stored)
             }
         }
     }, [authStore])
 
+    const getPageTitle = () => {
+        const currentPath = location.pathname;
+        const allPages = [...pages, ...misc];
+        const currentPage = allPages.find(page => page.path === currentPath);
+        return currentPage ? currentPage.label : "Dashboard";
+    };
+
     return (
         <Box sx={{
             display: 'flex',
@@ -156,7 +178,7 @@ export default function DashboardLayout() {
                         <MenuIcon />
                     </IconButton>
                     <Typography variant="h6" noWrap component="div">
-                        Dashboard
+                        {getPageTitle()}
                     </Typography>
                 </Toolbar>
             </AppBar>

frontend_reactjs/src/layouts/MainLayout.tsx

@@ -4,8 +4,6 @@ import { Outlet } from "react-router-dom";
 
 export default function MainLayout() {
     return (
-        <>
-            <Outlet/>
-        </>
+        <Outlet />
     )
 }