Fix jwt-token

client/src/components/AlertModals.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import api from '../services/api';
 import { format } from 'date-fns';
+import { formatFrequency } from '../utils/formatFrequency';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 
 // Edit Alert Rule Modal
@@ -403,7 +404,7 @@ export const DetectionDetailsModal = ({ detection, onClose }) => {
                 </div>
                 <div className="flex justify-between">
                   <span className="text-gray-500">Frequency:</span>
-                  <span>{detection.frequency ? `${detection.frequency} MHz` : 'N/A'}</span>
+                  <span>{formatFrequency(detection.frequency)}</span>
                 </div>
                 <div className="flex justify-between">
                   <span className="text-gray-500">Drone Type:</span>

client/src/components/MovementAlertsPanel.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { format } from 'date-fns';
+import { formatFrequency } from '../utils/formatFrequency';
 import { useSocket } from '../contexts/SocketContext';
 import { useTranslation } from '../utils/tempTranslations';
 import {
@@ -184,7 +185,7 @@ const MovementAlertsPanel = () => {
                       
                       <div>
                         <span className="font-medium text-gray-700">Frequency:</span>
-                        <div className="text-gray-900">{alert.detection.freq}MHz</div>
+                        <div className="text-gray-900">{formatFrequency(alert.detection.freq)}</div>
                       </div>
                       
                       <div>

client/src/pages/Dashboard.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useSocket } from '../contexts/SocketContext';
 import MovementAlertsPanel from '../components/MovementAlertsPanel';
 import api from '../services/api';
+import { formatFrequency } from '../utils/formatFrequency';
 import { t } from '../utils/tempTranslations'; // Temporary translation system
 import {
   ServerIcon,
@@ -319,7 +320,7 @@ const Dashboard = () => {
                     <p className="text-xs text-gray-500">
                       {detection.device.name || `Device ${detection.device_id}`} • 
                       RSSI: {detection.rssi}dBm • 
-                      Freq: {detection.freq}MHz
+                      Freq: {formatFrequency(detection.freq)}
                     </p>
                     <p className="text-xs text-gray-500">
                       {format(new Date(detection.server_timestamp), 'HH:mm:ss')}

client/src/pages/Debug.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import api from '../services/api';
 import { format } from 'date-fns';
+import { formatFrequency } from '../utils/formatFrequency';
 import { 
   BugAntIcon, 
   ExclamationTriangleIcon,
@@ -320,7 +321,7 @@ const Debug = () => {
                       </td>
                       <td className="px-6 py-4 whitespace-nowrap">
                         <div className="text-sm text-gray-900">{detection.rssi} dBm</div>
-                        <div className="text-sm text-gray-500">{detection.freq} MHz</div>
+                        <div className="text-sm text-gray-500">{formatFrequency(detection.freq)}</div>
                       </td>
                       <td className="px-6 py-4 whitespace-nowrap">
                         {detection.threat_level ? (

client/src/pages/Detections.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import api from '../services/api';
 import { format } from 'date-fns';
+import { formatFrequency } from '../utils/formatFrequency';
 import { t } from '../utils/tempTranslations'; // Temporary translation system
 import { 
   MagnifyingGlassIcon,
@@ -214,7 +215,7 @@ const Detections = () => {
                       </td>
                       <td>
                         <span className="text-sm text-gray-900">
-                          {detection.freq} MHz
+                          {formatFrequency(detection.freq)}
                         </span>
                       </td>
                       <td>

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 { formatFrequency } from '../utils/formatFrequency';
 import { t } from '../utils/tempTranslations';
 import { 
   ServerIcon, 
@@ -742,7 +743,7 @@ const DevicePopup = ({ device, status, detections }) => (
         </div>
         {detections.slice(0, 3).map((detection, index) => (
           <div key={index} className="text-xs text-gray-600">
-            Drone {detection.drone_id} • {detection.freq}MHz • {detection.rssi}dBm
+            Drone {detection.drone_id} • {formatFrequency(detection.freq)} • {detection.rssi}dBm
           </div>
         ))}
       </div>
@@ -833,7 +834,7 @@ const DroneDetectionPopup = ({ detection, age, droneTypes, droneDetectionHistory
             </div>
             <div>
               <span className="font-medium text-gray-700">{t('map.frequency')}:</span>
-              <div className="text-gray-900">{detection.freq}MHz</div>
+              <div className="text-gray-900">{formatFrequency(detection.freq)}</div>
             </div>
           </div>
         </div>

client/src/utils/formatFrequency.js

@@ -0,0 +1,48 @@
+/**
+ * Format frequency value with appropriate units (MHz or GHz)
+ * @param {number} frequency - Frequency value in MHz
+ * @returns {string} Formatted frequency string with appropriate units
+ */
+export const formatFrequency = (frequency) => {
+  if (!frequency && frequency !== 0) {
+    return 'N/A';
+  }
+  
+  const freq = parseFloat(frequency);
+  
+  // Convert to GHz if frequency is 1000 MHz or higher
+  if (freq >= 1000) {
+    const ghz = freq / 1000;
+    // Show one decimal place for GHz if needed
+    return ghz % 1 === 0 ? `${ghz} GHz` : `${ghz.toFixed(1)} GHz`;
+  }
+  
+  // Show MHz for frequencies below 1000 MHz
+  return freq % 1 === 0 ? `${freq} MHz` : `${freq.toFixed(1)} MHz`;
+};
+
+/**
+ * Get frequency display info (value and unit separately)
+ * @param {number} frequency - Frequency value in MHz
+ * @returns {object} Object with value and unit properties
+ */
+export const getFrequencyInfo = (frequency) => {
+  if (!frequency && frequency !== 0) {
+    return { value: 'N/A', unit: '' };
+  }
+  
+  const freq = parseFloat(frequency);
+  
+  if (freq >= 1000) {
+    const ghz = freq / 1000;
+    return {
+      value: ghz % 1 === 0 ? ghz : ghz.toFixed(1),
+      unit: 'GHz'
+    };
+  }
+  
+  return {
+    value: freq % 1 === 0 ? freq : freq.toFixed(1),
+    unit: 'MHz'
+  };
+};