Fix jwt-token

client/src/pages/MapView.jsx

@@ -233,37 +233,44 @@ const MapView = () => {
       
       // Set initial bounds and center ONLY on first load
       if (deviceData.length > 0 && isInitialLoad) {
-        const lats = deviceData.map(device => device.geo_lat);
-        const lons = deviceData.map(device => device.geo_lon);
+        // Filter devices that have coordinates
+        const devicesWithCoords = deviceData.filter(device => 
+          device.geo_lat !== null && device.geo_lon !== null
+        );
         
-        const minLat = Math.min(...lats);
-        const maxLat = Math.max(...lats);
-        const minLon = Math.min(...lons);
-        const maxLon = Math.max(...lons);
-        
-        // Add padding around the bounds (15% on each side for better visibility)
-        const latPadding = (maxLat - minLat) * 0.15;
-        const lonPadding = (maxLon - minLon) * 0.15;
-        
-        const bounds = [
-          [minLat - latPadding, minLon - lonPadding], // Southwest
-          [maxLat + latPadding, maxLon + lonPadding]  // Northeast
-        ];
-        
-        console.log('MapView: Setting initial bounds and center for devices');
-        setMapBounds(bounds);
-        setShouldFitBounds(true);
-        
-        // Calculate center
-        const centerLat = (minLat + maxLat) / 2;
-        const centerLon = (minLon + maxLon) / 2;
-        setMapCenter([centerLat, centerLon]);
-        
-        // Disable automatic fitting after initial setup (with longer delay)
-        setTimeout(() => {
-          console.log('MapView: Disabling automatic bounds fitting - manual navigation now preserved');
-          setShouldFitBounds(false);
-        }, 2000);
+        if (devicesWithCoords.length > 0) {
+          const lats = devicesWithCoords.map(device => device.geo_lat);
+          const lons = devicesWithCoords.map(device => device.geo_lon);
+          
+          const minLat = Math.min(...lats);
+          const maxLat = Math.max(...lats);
+          const minLon = Math.min(...lons);
+          const maxLon = Math.max(...lons);
+          
+          // Add padding around the bounds (15% on each side for better visibility)
+          const latPadding = (maxLat - minLat) * 0.15;
+          const lonPadding = (maxLon - minLon) * 0.15;
+          
+          const bounds = [
+            [minLat - latPadding, minLon - lonPadding], // Southwest
+            [maxLat + latPadding, maxLon + lonPadding]  // Northeast
+          ];
+          
+          console.log('MapView: Setting initial bounds and center for devices with coordinates');
+          setMapBounds(bounds);
+          setShouldFitBounds(true);
+          
+          // Calculate center
+          const centerLat = (minLat + maxLat) / 2;
+          const centerLon = (minLon + maxLon) / 2;
+          setMapCenter([centerLat, centerLon]);
+          
+          // Disable automatic fitting after initial setup (with longer delay)
+          setTimeout(() => {
+            console.log('MapView: Disabling automatic bounds fitting - manual navigation now preserved');
+            setShouldFitBounds(false);
+          }, 2000);
+        }
       }
       
       // Always mark initial load as complete after first fetch
@@ -999,46 +1006,64 @@ const DroneDetectionPopup = ({ detection, age, droneTypes, droneDetectionHistory
   );
 };
 
-const DeviceListItem = ({ device, status, detections, onClick }) => (
-  <div 
-    className="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors"
-    onClick={onClick}
-  >
-    <div className="flex items-center justify-between">
-      <div className="flex items-center space-x-3">
-        <div className={`w-3 h-3 rounded-full ${
-          status === 'online' 
-            ? detections.length > 0 ? 'bg-red-400 animate-pulse' : 'bg-green-400'
-            : 'bg-gray-400'
-        }`} />
-        <div>
-          <div className="text-sm font-medium text-gray-900">
-            {device.name || `Device ${device.id}`}
-          </div>
-          <div className="text-sm text-gray-500">
-            {device.location_description || `${device.geo_lat}, ${device.geo_lon}`}
+const DeviceListItem = ({ device, status, detections, onClick }) => {
+  const hasCoordinates = device.geo_lat !== null && device.geo_lon !== null;
+  
+  return (
+    <div 
+      className="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors"
+      onClick={onClick}
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-3">
+          <div className={`w-3 h-3 rounded-full ${
+            status === 'online' 
+              ? detections.length > 0 ? 'bg-red-400 animate-pulse' : 'bg-green-400'
+              : 'bg-gray-400'
+          }`} />
+          <div>
+            <div className="text-sm font-medium text-gray-900">
+              {device.name || `Device ${device.id}`}
+            </div>
+            <div className="text-sm text-gray-500">
+              {hasCoordinates 
+                ? (device.location_description || `${device.geo_lat}, ${device.geo_lon}`)
+                : (
+                  <span className="text-amber-600 font-medium">
+                    ⚠️ Coordinates missing - please add location
+                  </span>
+                )
+              }
+            </div>
           </div>
         </div>
-      </div>
-      
-      <div className="flex items-center space-x-4">
-        {detections.length > 0 && (
-          <div className="flex items-center space-x-1 text-red-600">
-            <ExclamationTriangleIcon className="h-4 w-4" />
-            <span className="text-sm font-medium">{detections.length}</span>
-          </div>
-        )}
         
-        <span className={`px-2 py-1 rounded-full text-xs font-medium ${
-          status === 'online'
-            ? 'bg-green-100 text-green-800'
-            : 'bg-red-100 text-red-800'
-        }`}>
-          {status}
-        </span>
+        <div className="flex items-center space-x-4">
+          {!hasCoordinates && (
+            <div className="flex items-center space-x-1 text-amber-600">
+              <ExclamationTriangleIcon className="h-4 w-4" />
+              <span className="text-xs font-medium">Incomplete</span>
+            </div>
+          )}
+          
+          {detections.length > 0 && (
+            <div className="flex items-center space-x-1 text-red-600">
+              <ExclamationTriangleIcon className="h-4 w-4" />
+              <span className="text-sm font-medium">{detections.length}</span>
+            </div>
+          )}
+          
+          <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+            status === 'online'
+              ? 'bg-green-100 text-green-800'
+              : 'bg-red-100 text-red-800'
+          }`}>
+            {status}
+          </span>
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default MapView;

server/routes/device.js

@@ -137,11 +137,10 @@ router.get('/', authenticateToken, async (req, res) => {
 // GET /api/devices/map - Get devices with location data for map display
 router.get('/map', authenticateToken, async (req, res) => {
   try {
+    // Get all active devices, including those without coordinates
     const devices = await Device.findAll({
       where: {
-        is_active: true,
-        geo_lat: { [Op.ne]: null },
-        geo_lon: { [Op.ne]: null }
+        is_active: true
       },
       attributes: [
         'id', 
@@ -153,7 +152,7 @@ router.get('/map', authenticateToken, async (req, res) => {
       ]
     });
 
-    // Get recent detections for each device
+    // Get recent detections for each device and mark coordinate status
     const devicesWithDetections = await Promise.all(devices.map(async (device) => {
       const recentDetections = await DroneDetection.count({
         where: {
@@ -170,12 +169,15 @@ router.get('/map', authenticateToken, async (req, res) => {
         : null;
       
       const isOnline = timeSinceLastHeartbeat && timeSinceLastHeartbeat < 600; // 10 minutes
+      const hasCoordinates = device.geo_lat !== null && device.geo_lon !== null;
 
       return {
         ...device.toJSON(),
         has_recent_detections: recentDetections > 0,
         detection_count_10m: recentDetections,
-        status: isOnline ? 'online' : 'offline'
+        status: isOnline ? 'online' : 'offline',
+        has_coordinates: hasCoordinates,
+        coordinate_status: hasCoordinates ? 'complete' : 'incomplete'
       };
     }));