Fix jwt-token

client/src/pages/Settings.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useAuth } from '../contexts/AuthContext';
 import api from '../services/api';
 import toast from 'react-hot-toast';
@@ -14,6 +14,40 @@ import {
 } from '@heroicons/react/24/outline';
 import { hasPermission, canAccessSettings } from '../utils/rbac';
 
+// Define tabs outside component to ensure stability
+const ALL_TABS = [
+  { 
+    id: 'general', 
+    name: 'General', 
+    icon: CogIcon,
+    permission: 'tenant.view'
+  },
+  { 
+    id: 'branding', 
+    name: 'Branding', 
+    icon: PaintBrushIcon,
+    permission: 'branding.view'
+  },
+  { 
+    id: 'security', 
+    name: 'Security', 
+    icon: ShieldCheckIcon,
+    permission: 'security.view'
+  },
+  { 
+    id: 'authentication', 
+    name: 'Authentication', 
+    icon: KeyIcon,
+    permission: 'auth.view'
+  },
+  { 
+    id: 'users', 
+    name: 'Users', 
+    icon: UserGroupIcon,
+    permission: 'users.view'
+  },
+];
+
 const Settings = () => {
   const { user } = useAuth();
   const [activeTab, setActiveTab] = useState('general');
@@ -63,45 +97,10 @@ const Settings = () => {
     );
   }
 
-  // Define all tabs
-  const allTabs = useMemo(() => [
-    { 
-      id: 'general', 
-      name: 'General', 
-      icon: CogIcon,
-      permission: 'tenant.view'
-    },
-    { 
-      id: 'branding', 
-      name: 'Branding', 
-      icon: PaintBrushIcon,
-      permission: 'branding.view'
-    },
-    { 
-      id: 'security', 
-      name: 'Security', 
-      icon: ShieldCheckIcon,
-      permission: 'security.view'
-    },
-    { 
-      id: 'authentication', 
-      name: 'Authentication', 
-      icon: KeyIcon,
-      permission: 'auth.view'
-    },
-    { 
-      id: 'users', 
-      name: 'Users', 
-      icon: UserGroupIcon,
-      permission: 'users.view'
-    },
-  ], []);
-
   // Filter tabs based on user permissions
-  const availableTabs = useMemo(() => {
+  const availableTabs = user?.role 
-    if (!user?.role) return [];
+    ? ALL_TABS.filter(tab => hasPermission(user.role, tab.permission))
-    return allTabs.filter(tab => hasPermission(user.role, tab.permission));
+    : [];
-  }, [allTabs, user?.role]);
 
   // Set initial tab to first available tab
   useEffect(() => {