From 2a901656738eec65961b07729097c56a6b1e5ccf Mon Sep 17 00:00:00 2001
From: Alexander Borg <borg@servernet.se>
Date: Sat, 13 Sep 2025 22:08:22 +0200
Subject: [PATCH] Fix jwt-token

---
 client/src/pages/Settings.jsx | 77 +++++++++++++++++------------------
 1 file changed, 38 insertions(+), 39 deletions(-)

diff --git a/client/src/pages/Settings.jsx b/client/src/pages/Settings.jsx
index bdd92b9..0d408db 100644
--- a/client/src/pages/Settings.jsx
+++ b/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(() => {
-    if (!user?.role) return [];
-    return allTabs.filter(tab => hasPermission(user.role, tab.permission));
-  }, [allTabs, user?.role]);
+  const availableTabs = user?.role 
+    ? ALL_TABS.filter(tab => hasPermission(user.role, tab.permission))
+    : [];
 
   // Set initial tab to first available tab
   useEffect(() => {