Fix jwt-token

client/src/pages/Devices.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import api from '../services/api';
 import { format } from 'date-fns';
 import { 
@@ -12,6 +13,7 @@ import {
 } from '@heroicons/react/24/outline';
 
 const Devices = () => {
+  const navigate = useNavigate();
   const [devices, setDevices] = useState([]);
   const [loading, setLoading] = useState(true);
   const [showAddModal, setShowAddModal] = useState(false);
@@ -82,9 +84,18 @@ const Devices = () => {
 
   const handleViewOnMap = (device) => {
     if (device.geo_lat && device.geo_lon) {
-      // Open Google Maps with the device location
-      const url = `https://www.google.com/maps?q=${device.geo_lat},${device.geo_lon}&z=15`;
-      window.open(url, '_blank');
+      // Navigate to map with device information
+      navigate('/map', { 
+        state: { 
+          focusDevice: {
+            id: device.id,
+            name: device.name || `Device ${device.id}`,
+            lat: device.geo_lat,
+            lon: device.geo_lon,
+            status: device.stats?.status || 'unknown'
+          }
+        }
+      });
     } else {
       alert('Device location coordinates are not available');
     }

client/src/pages/MapView.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 import { MapContainer, TileLayer, Marker, Popup, Circle, useMap } from 'react-leaflet';
 import { Icon } from 'leaflet';
 import L from 'leaflet'; // For divIcon and other Leaflet utilities
@@ -109,6 +110,7 @@ const createDroneIcon = (rssi, droneType) => {
 const MapView = () => {
   console.log('MapView: Component render started');
   
+  const location = useLocation();
   const [devices, setDevices] = useState([]);
   const [selectedDevice, setSelectedDevice] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -172,6 +174,28 @@ const MapView = () => {
     return () => clearInterval(cleanup);
   }, []);
 
+  // Handle device focusing when navigated from Devices page
+  useEffect(() => {
+    const focusDevice = location.state?.focusDevice;
+    if (focusDevice && focusDevice.lat && focusDevice.lon) {
+      console.log('MapView: Focusing on device:', focusDevice);
+      
+      // Set map center and zoom to the device location
+      setMapCenter([focusDevice.lat, focusDevice.lon]);
+      setMapZoom(16); // Close zoom for individual device
+      setShouldFitBounds(false); // Don't fit all devices, focus on this one
+      
+      // Find and select the device if it exists in the devices list
+      // This will happen after devices are loaded
+      if (devices.length > 0) {
+        const device = devices.find(d => d.id === focusDevice.id);
+        if (device) {
+          setSelectedDevice(device);
+        }
+      }
+    }
+  }, [location.state, devices]);
+
   const fetchDevices = async () => {
     try {
       // Debug: Check if token exists before making request