Fix jwt-token

client/src/pages/MapView.jsx

@@ -233,8 +233,14 @@ 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
+        );
+        
+        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);
@@ -250,7 +256,7 @@ const MapView = () => {
             [maxLat + latPadding, maxLon + lonPadding]  // Northeast
           ];
           
-        console.log('MapView: Setting initial bounds and center for devices');
+          console.log('MapView: Setting initial bounds and center for devices with coordinates');
           setMapBounds(bounds);
           setShouldFitBounds(true);
           
@@ -265,6 +271,7 @@ const MapView = () => {
             setShouldFitBounds(false);
           }, 2000);
         }
+      }
       
       // Always mark initial load as complete after first fetch
       if (isInitialLoad) {
@@ -999,7 +1006,10 @@ const DroneDetectionPopup = ({ detection, age, droneTypes, droneDetectionHistory
   );
 };
 
-const DeviceListItem = ({ device, status, detections, onClick }) => (
+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}
@@ -1016,12 +1026,26 @@ const DeviceListItem = ({ device, status, detections, onClick }) => (
               {device.name || `Device ${device.id}`}
             </div>
             <div className="text-sm text-gray-500">
-            {device.location_description || `${device.geo_lat}, ${device.geo_lon}`}
+              {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 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" />
@@ -1039,6 +1063,7 @@ const DeviceListItem = ({ device, status, detections, onClick }) => (
         </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'
       };
     }));