Fix jwt-token

client/src/pages/Settings.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { useAuth } from '../contexts/AuthContext';
 import api from '../services/api';
 import toast from 'react-hot-toast';
@@ -54,6 +54,7 @@ const Settings = () => {
   const [tenantConfig, setTenantConfig] = useState(null);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
+  const [initialTabSet, setInitialTabSet] = useState(false);
 
   // Check if user can access settings based on RBAC permissions
   const canAccess = canAccessSettings(user?.role);
@@ -97,17 +98,20 @@ const Settings = () => {
     );
   }
 
-  // Filter tabs based on user permissions
-  const availableTabs = user?.role 
-    ? ALL_TABS.filter(tab => hasPermission(user.role, tab.permission))
-    : [];
+  // Filter tabs based on user permissions - memoized to prevent infinite useEffect
+  const availableTabs = useMemo(() => {
+    return user?.role 
+      ? ALL_TABS.filter(tab => hasPermission(user.role, tab.permission))
+      : [];
+  }, [user?.role]);
 
-  // Set initial tab to first available tab
+  // Set initial tab to first available tab (only once)
   useEffect(() => {
-    if (availableTabs.length > 0 && !availableTabs.find(tab => tab.id === activeTab)) {
+    if (!initialTabSet && availableTabs.length > 0 && !availableTabs.find(tab => tab.id === activeTab)) {
       setActiveTab(availableTabs[0].id);
+      setInitialTabSet(true);
     }
-  }, [availableTabs, activeTab]);
+  }, [availableTabs, activeTab, initialTabSet]);
 
   return (
     <div className="min-h-screen bg-gray-50">