Fix jwt-token

client/src/pages/Alerts.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import api from '../services/api';
 import { format } from 'date-fns';
+import { t } from '../utils/tempTranslations';
 import { 
   PlusIcon,
   BellIcon,
@@ -106,6 +107,7 @@ const Alerts = () => {
     return (
       <div className="flex items-center justify-center h-64">
         <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary-600"></div>
+        <span className="ml-4 text-gray-600">{t('alerts.loading')}</span>
       </div>
     );
   }
@@ -115,10 +117,10 @@ const Alerts = () => {
       <div className="flex items-center justify-between">
         <div>
           <h3 className="text-lg leading-6 font-medium text-gray-900">
-            Alert Management
+            {t('alerts.title')}
           </h3>
           <p className="mt-1 text-sm text-gray-500">
-            Configure and monitor alert rules for drone detections
+            {t('alerts.description')}
           </p>
         </div>
         <button
@@ -126,7 +128,7 @@ const Alerts = () => {
           className="btn btn-primary flex items-center space-x-2"
         >
           <PlusIcon className="h-4 w-4" />
-          <span>Create Alert Rule</span>
+          <span>{t('alerts.createAlert')}</span>
         </button>
       </div>
 

client/src/pages/Devices.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import api from '../services/api';
 import { format } from 'date-fns';
+import { t } from '../utils/tempTranslations';
 import { 
   PlusIcon,
   PencilIcon,
@@ -145,6 +146,7 @@ const Devices = () => {
     return (
       <div className="flex items-center justify-center h-64">
         <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary-600"></div>
+        <span className="ml-4 text-gray-600">{t('devices.loading')}</span>
       </div>
     );
   }
@@ -154,10 +156,10 @@ const Devices = () => {
       <div className="flex items-center justify-between">
         <div>
           <h3 className="text-lg leading-6 font-medium text-gray-900">
-            Devices
+            {t('devices.title')}
           </h3>
           <p className="mt-1 text-sm text-gray-500">
-            Manage your drone detection devices
+            {t('devices.description')}
             {pendingCount > 0 && (
               <span className="ml-2 px-2 py-1 text-xs font-medium bg-yellow-200 text-yellow-800 rounded-full">
                 {pendingCount} pending approval
@@ -170,7 +172,7 @@ const Devices = () => {
           className="btn btn-primary flex items-center space-x-2"
         >
           <PlusIcon className="h-4 w-4" />
-          <span>Add Device</span>
+          <span>{t('devices.addDevice')}</span>
         </button>
       </div>
 

client/src/pages/Login.jsx

@@ -4,6 +4,7 @@ import { useAuth } from '../contexts/AuthContext';
 import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
 import toast from 'react-hot-toast';
 import api from '../services/api';
+import { t } from '../utils/tempTranslations';
 
 const Login = () => {
   const [credentials, setCredentials] = useState({
@@ -42,7 +43,7 @@ const Login = () => {
       <div className="min-h-screen flex items-center justify-center bg-gray-50">
         <div className="text-center">
           <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto"></div>
-          <p className="mt-4 text-gray-600">Loading...</p>
+          <p className="mt-4 text-gray-600">{t('common.loading')}</p>
         </div>
       </div>
     );
@@ -100,7 +101,7 @@ const Login = () => {
             {tenantConfig?.tenant_name || 'Drone Detection System'}
           </h2>
           <p className="mt-2 text-center text-sm text-gray-600">
-            Sign in to your account
+            {t('auth.signIn')}
           </p>
           {tenantConfig?.auth_provider && (
             <p className="mt-1 text-center text-xs text-gray-500">
@@ -115,7 +116,7 @@ const Login = () => {
             <div className="rounded-md shadow-sm -space-y-px">
               <div>
                 <label htmlFor="username" className="sr-only">
-                  Username or Email
+                  {t('auth.username')}
                 </label>
                 <input
                   id="username"
@@ -123,7 +124,7 @@ const Login = () => {
                   type="text"
                   required
                   className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm"
-                  placeholder="Username or Email"
+                  placeholder={t('auth.username')}
                   value={credentials.username}
                   onChange={handleChange}
                   disabled={loading}
@@ -131,7 +132,7 @@ const Login = () => {
               </div>
               <div className="relative">
                 <label htmlFor="password" className="sr-only">
-                  Password
+                  {t('auth.password')}
                 </label>
                 <input
                   id="password"
@@ -139,7 +140,7 @@ const Login = () => {
                   type={showPassword ? 'text' : 'password'}
                   required
                   className="appearance-none rounded-none relative block w-full px-3 py-2 pr-10 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm"
-                  placeholder="Password"
+                  placeholder={t('auth.password')}
                   value={credentials.password}
                   onChange={handleChange}
                   disabled={loading}
@@ -167,7 +168,7 @@ const Login = () => {
                 {loading ? (
                   <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                 ) : (
-                  'Sign in'
+                  t('auth.signIn')
                 )}
               </button>
             </div>

client/src/pages/MapView.jsx

@@ -6,6 +6,7 @@ import L from 'leaflet'; // For divIcon and other Leaflet utilities
 import { useSocket } from '../contexts/SocketContext';
 import api from '../services/api';
 import { format } from 'date-fns';
+import { t } from '../utils/tempTranslations';
 import { 
   ServerIcon, 
   ExclamationTriangleIcon,
@@ -324,10 +325,10 @@ const MapView = () => {
       <div className="flex items-center justify-between">
         <div>
           <h3 className="text-lg leading-6 font-medium text-gray-900">
-            Device Map
+            {t('map.title')}
           </h3>
           <p className="mt-1 text-sm text-gray-500">
-            Real-time view of all devices and drone detections
+            {t('map.description')}
           </p>
         </div>
         

client/src/pages/Settings.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useAuth } from '../contexts/AuthContext';
 import api from '../services/api';
 import toast from 'react-hot-toast';
+import { t } from '../utils/tempTranslations';
 import { 
   CogIcon, 
   ShieldCheckIcon, 
@@ -90,6 +91,7 @@ const Settings = () => {
     return (
       <div className="min-h-screen flex items-center justify-center">
         <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
+        <span className="ml-4 text-gray-600">{t('settings.loading')}</span>
       </div>
     );
   }
@@ -115,7 +117,7 @@ const Settings = () => {
           <div className="border-b border-gray-200">
             <div className="sm:flex sm:items-baseline">
               <h3 className="text-lg leading-6 font-medium text-gray-900">
-                Tenant Settings
+                {t('settings.title')}
               </h3>
               <div className="mt-4 sm:mt-0 sm:ml-10">
                 <nav className="-mb-px flex space-x-8">