Fix jwt-token

client/src/components/Layout.jsx

@@ -3,6 +3,7 @@ import { Outlet, Link, useLocation } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
 import { useSocket } from '../contexts/SocketContext';
 import DebugToggle from './DebugToggle';
+import { canAccessSettings, hasPermission } from '../utils/rbac';
 import {
   HomeIcon,
   MapIcon,
@@ -27,25 +28,31 @@ const baseNavigation = [
   { name: 'Alerts', href: '/alerts', icon: BellIcon },
 ];
 
-const adminNavigation = [
-  { name: 'Settings', href: '/settings', icon: CogIcon },
-  { name: 'Debug', href: '/debug', icon: BugAntIcon },
-];
-
 const Layout = () => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const { user, logout } = useAuth();
   const { connected, recentDetections } = useSocket();
   const location = useLocation();
 
-  // Build navigation based on user role - ensure it's always an array
+  // Build navigation based on user permissions
   const navigation = React.useMemo(() => {
     if (!user) {
       return baseNavigation; // Return base navigation if user not loaded yet
     }
-    return user.role === 'admin' 
-      ? [...baseNavigation, ...adminNavigation]
-      : baseNavigation;
+    
+    const nav = [...baseNavigation];
+    
+    // Add Settings if user has any settings permissions
+    if (canAccessSettings(user.role)) {
+      nav.push({ name: 'Settings', href: '/settings', icon: CogIcon });
+    }
+    
+    // Add Debug if user has debug permissions
+    if (hasPermission(user.role, 'debug.access')) {
+      nav.push({ name: 'Debug', href: '/debug', icon: BugAntIcon });
+    }
+    
+    return nav;
   }, [user?.role]);
 
   return (