Fix jwt-token

client/src/pages/Settings.jsx

@@ -53,10 +53,45 @@ const ALL_TABS = [
 
 const Settings = () => {
   const { user } = useAuth();
+  const { t } = useTranslation();
   const [tenantConfig, setTenantConfig] = useState(null);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   
+  // Define tabs with translations inside component
+  const ALL_TABS = [
+    { 
+      id: 'general', 
+      name: t('settings.general'), 
+      icon: CogIcon,
+      permission: 'tenant.view'
+    },
+    { 
+      id: 'branding', 
+      name: t('settings.branding'), 
+      icon: PaintBrushIcon,
+      permission: 'branding.view'
+    },
+    { 
+      id: 'security', 
+      name: t('settings.security'), 
+      icon: ShieldCheckIcon,
+      permission: 'security.view'
+    },
+    { 
+      id: 'authentication', 
+      name: t('settings.authentication'), 
+      icon: KeyIcon,
+      permission: 'auth.view'
+    },
+    { 
+      id: 'users', 
+      name: t('settings.users'), 
+      icon: UserGroupIcon,
+      permission: 'users.view'
+    }
+  ];
+  
   // Calculate available tabs
   const availableTabs = user?.role 
     ? ALL_TABS.filter(tab => hasPermission(user.role, tab.permission))
@@ -101,9 +136,9 @@ const Settings = () => {
       <div className="min-h-screen flex items-center justify-center">
         <div className="text-center">
           <ShieldCheckIcon className="mx-auto h-12 w-12 text-gray-400" />
-          <h3 className="mt-2 text-sm font-medium text-gray-900">Access Denied</h3>
+          <h3 className="mt-2 text-sm font-medium text-gray-900">{t('settings.accessDenied')}</h3>
           <p className="mt-1 text-sm text-gray-500">
-            You don't have permission to access tenant settings.
+            {t('settings.accessDeniedMessage')}
           </p>
         </div>
       </div>
@@ -167,27 +202,30 @@ const Settings = () => {
 };
 
 // General Settings Component
-const GeneralSettings = ({ tenantConfig }) => (
-  <div className="bg-white shadow rounded-lg">
-    <div className="px-4 py-5 sm:p-6">
-      <h3 className="text-lg leading-6 font-medium text-gray-900">General Information</h3>
-      <div className="mt-5 space-y-4">
-        <div>
-          <label className="block text-sm font-medium text-gray-700">Tenant Name</label>
-          <p className="mt-1 text-sm text-gray-900">{tenantConfig?.name}</p>
-        </div>
-        <div>
-          <label className="block text-sm font-medium text-gray-700">Tenant ID</label>
-          <p className="mt-1 text-sm text-gray-500 font-mono">{tenantConfig?.slug}</p>
-        </div>
-        <div>
-          <label className="block text-sm font-medium text-gray-700">Authentication Provider</label>
-          <p className="mt-1 text-sm text-gray-900 uppercase">{tenantConfig?.auth_provider}</p>
+const GeneralSettings = ({ tenantConfig }) => {
+  const { t } = useTranslation();
+  return (
+    <div className="bg-white shadow rounded-lg">
+      <div className="px-4 py-5 sm:p-6">
+        <h3 className="text-lg leading-6 font-medium text-gray-900">{t('settings.generalInformation')}</h3>
+        <div className="mt-5 space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700">{t('settings.tenantName')}</label>
+            <p className="mt-1 text-sm text-gray-900">{tenantConfig?.name}</p>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700">{t('settings.tenantId')}</label>
+            <p className="mt-1 text-sm text-gray-500 font-mono">{tenantConfig?.slug}</p>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700">{t('settings.authenticationProvider')}</label>
+            <p className="mt-1 text-sm text-gray-900 uppercase">{tenantConfig?.auth_provider}</p>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-);
+  );
+};
 
 // Branding Settings Component
 const BrandingSettings = ({ tenantConfig, onRefresh }) => {
@@ -214,10 +252,10 @@ const BrandingSettings = ({ tenantConfig, onRefresh }) => {
     setSaving(true);
     try {
       await api.put('/tenant/branding', branding);
-      toast.success('Branding updated successfully');
+      toast.success(t('settings.brandingUpdated'));
       if (onRefresh) onRefresh();
     } catch (error) {
-      toast.error('Failed to update branding');
+      toast.error(t('settings.brandingUpdateFailed'));
     } finally {
       setSaving(false);
     }
@@ -279,7 +317,7 @@ const BrandingSettings = ({ tenantConfig, onRefresh }) => {
         <h3 className="text-lg leading-6 font-medium text-gray-900">Branding & Appearance</h3>
         <div className="mt-5 space-y-6">
           <div>
-            <label className="block text-sm font-medium text-gray-700">Company Name</label>
+            <label className="block text-sm font-medium text-gray-700">{t('settings.companyName')}</label>
             <input
               type="text"
               value={branding.company_name}
@@ -345,7 +383,7 @@ const BrandingSettings = ({ tenantConfig, onRefresh }) => {
             
             {/* Manual URL input as fallback */}
             <div className="mt-4">
-              <label className="block text-sm font-medium text-gray-700">Or enter logo URL manually</label>
+              <label className="block text-sm font-medium text-gray-700">{t('settings.logoUrl')}</label>
               <input
                 type="url"
                 value={branding.logo_url}
@@ -359,7 +397,7 @@ const BrandingSettings = ({ tenantConfig, onRefresh }) => {
 
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <label className="block text-sm font-medium text-gray-700">Primary Color</label>
+              <label className="block text-sm font-medium text-gray-700">{t('settings.primaryColor')}</label>
               <div className="mt-1 flex">
                 <input
                   type="color"
@@ -379,7 +417,7 @@ const BrandingSettings = ({ tenantConfig, onRefresh }) => {
             </div>
             
             <div>
-              <label className="block text-sm font-medium text-gray-700">Secondary Color</label>
+              <label className="block text-sm font-medium text-gray-700">{t('settings.secondaryColor')}</label>
               <div className="mt-1 flex">
                 <input
                   type="color"
@@ -406,7 +444,7 @@ const BrandingSettings = ({ tenantConfig, onRefresh }) => {
                 disabled={saving}
                 className="bg-primary-600 text-white px-4 py-2 rounded-md hover:bg-primary-700 disabled:opacity-50"
               >
-                {saving ? 'Saving...' : 'Save Branding'}
+                {saving ? t('settings.saving') : t('settings.saveBranding')}
               </button>
             ) : (
               <div className="text-sm text-gray-500 py-2">
@@ -491,11 +529,11 @@ const SecuritySettings = ({ tenantConfig, onRefresh }) => {
     try {
       console.log('🔒 Sending security settings:', securitySettings);
       await api.put('/tenant/security', securitySettings);
-      toast.success('Security settings updated successfully');
+      toast.success(t('settings.securityUpdated'));
       if (onRefresh) onRefresh();
     } catch (error) {
       console.error('Failed to update security settings:', error);
-      toast.error('Failed to update security settings');
+      toast.error(t('settings.securityUpdateFailed'));
     } finally {
       setSaving(false);
     }
@@ -516,7 +554,7 @@ const SecuritySettings = ({ tenantConfig, onRefresh }) => {
             disabled={saving || !canEdit}
             className="bg-primary-600 text-white px-4 py-2 rounded-md hover:bg-primary-700 disabled:opacity-50"
           >
-            {saving ? 'Saving...' : 'Save Changes'}
+            {saving ? t('settings.saving') : t('settings.saveChanges')}
           </button>
         </div>