Fix jwt-token

client/src/components/MovementAlertsPanel.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { format } from 'date-fns';
 import { useSocket } from '../contexts/SocketContext';
+import { useTranslation } from '../utils/tempTranslations';
 import {
   ExclamationTriangleIcon,
   InformationCircleIcon,
@@ -13,6 +14,7 @@ import {
 } from '@heroicons/react/24/outline';
 
 const MovementAlertsPanel = () => {
+  const { t } = useTranslation();
   const { movementAlerts, clearMovementAlerts } = useSocket();
   const [expandedAlert, setExpandedAlert] = useState(null);
   const [filter, setFilter] = useState('all'); // all, critical, high, medium
@@ -55,12 +57,12 @@ const MovementAlertsPanel = () => {
   });
 
   const droneTypes = {
-    1: "DJI Mavic",
-    2: "Racing Drone", 
-    3: "DJI Phantom",
-    4: "Fixed Wing",
-    5: "Surveillance",
-    0: "Unknown"
+    1: t('movementAlerts.droneTypes.djiMavic'),
+    2: t('movementAlerts.droneTypes.racingDrone'), 
+    3: t('movementAlerts.droneTypes.djiPhantom'),
+    4: t('movementAlerts.droneTypes.fixedWing'),
+    5: t('movementAlerts.droneTypes.surveillance'),
+    0: t('movementAlerts.droneTypes.unknown')
   };
 
   return (
@@ -68,7 +70,7 @@ const MovementAlertsPanel = () => {
       <div className="px-6 py-4 border-b border-gray-200">
         <div className="flex items-center justify-between">
           <div className="flex items-center space-x-2">
-            <h3 className="text-lg font-medium text-gray-900">Movement Alerts</h3>
+            <h3 className="text-lg font-medium text-gray-900">{t('movementAlerts.title')}</h3>
             {movementAlerts.length > 0 && (
               <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                 {movementAlerts.length}
@@ -82,10 +84,10 @@ const MovementAlertsPanel = () => {
               onChange={(e) => setFilter(e.target.value)}
               className="text-sm border border-gray-300 rounded px-2 py-1"
             >
-              <option value="all">All Alerts</option>
-              <option value="critical">Critical</option>
-              <option value="high">High Priority</option>
-              <option value="medium">Medium Priority</option>
+              <option value="all">{t('movementAlerts.allAlerts')}</option>
+              <option value="critical">{t('movementAlerts.critical')}</option>
+              <option value="high">{t('movementAlerts.highPriority')}</option>
+              <option value="medium">{t('movementAlerts.mediumPriority')}</option>
             </select>
             
             {movementAlerts.length > 0 && (
@@ -93,7 +95,7 @@ const MovementAlertsPanel = () => {
                 onClick={clearMovementAlerts}
                 className="text-sm text-gray-600 hover:text-gray-800"
               >
-                Clear All
+                {t('movementAlerts.clearAll')}
               </button>
             )}
           </div>