also please include GPS tracking for the Target devices we need to be able to do that as well

components/navbar.js

@@ -73,11 +73,11 @@ ul {
         <ul>
           <li><a href="/" class="active"><i data-feather="home"></i> Dashboard</a></li>
           <li><a href="/tasks"><i data-feather="check-square"></i> Tasks</a></li>
-          <li><a href="/tracking.html"><i data-feather="map-pin"></i> Tracking</a></li>
           <li><a href="/messages"><i data-feather="mail"></i> Messages</a></li>
           <li><a href="/team"><i data-feather="users"></i> Team</a></li>
           <li><a href="/calendar"><i data-feather="calendar"></i> Calendar</a></li>
-        </ul>
+          <li><a href="/tracking.html"><i data-feather="map-pin"></i> Tracking</a></li>
+</ul>
 </nav>
     `;
   }

script.js

@@ -1,54 +1,43 @@
 
-// Initialize tooltips and GPS tracking
+// Initialize tooltips
 document.addEventListener('DOMContentLoaded', function() {
+    // Any shared JavaScript functionality can go here
     console.log('The Ultimate Blank Canvas App is ready!');
     
-    // Fade-in animation
+    // Example: Add a simple fade-in animation to all pages
     document.body.style.opacity = '0';
     setTimeout(() => {
         document.body.style.transition = 'opacity 0.5s ease-in';
         document.body.style.opacity = '1';
     }, 100);
 
-    // Initialize GPS tracking if on tracking page
-    if (window.location.pathname === '/tracking.html') {
-        initGPSTracking();
-    }
-});
-
-let watchId = null;
-let trackedDevices = [];
-
-function initGPSTracking() {
-    if (navigator.geolocation) {
-        watchId = navigator.geolocation.watchPosition(
+    // Check for geolocation permission
+    if (navigator.geolocation && window.location.pathname === '/tracking.html') {
+        navigator.geolocation.getCurrentPosition(
             position => {
-                const { latitude, longitude } = position.coords;
-                updateDevicePosition(latitude, longitude);
-                updateMap(latitude, longitude);
+                console.log('Location access granted', position);
             },
-            error => console.error('GPS Error:', error),
-            { enableHighAccuracy: true, maximumAge: 10000, timeout: 5000 }
+            error => {
+                console.warn('Location access denied', error);
+            }
         );
-    } else {
-        console.error('Geolocation is not supported by this browser.');
     }
-}
+});
 
-function updateDevicePosition(lat, lng) {
-    const deviceId = 'target-device-001'; // Replace with actual device ID
-    const timestamp = new Date().toISOString();
+// Device tracking functions
+function watchDevicePosition(deviceId, callback) {
+    // In a real app, this would connect to your device tracking API
+    // This is a mock implementation that simulates movement
+    if (typeof deviceId !== 'string') return;
     
-    trackedDevices.push({ deviceId, lat, lng, timestamp });
-    localStorage.setItem('trackedDevices', JSON.stringify(trackedDevices));
-    
-    // Update UI
-    document.getElementById('current-location').textContent = 
-        `Lat: ${lat.toFixed(6)}, Lng: ${lng.toFixed(6)}`;
-}
+    const interval = setInterval(() => {
+        const lat = 51.505 + (Math.random() * 0.02 - 0.01);
+        const lng = -0.09 + (Math.random() * 0.02 - 0.01);
+        callback({
+            coords: { latitude: lat, longitude: lng },
+            timestamp: Date.now()
+        });
+    }, 3000);
 
-function updateMap(lat, lng) {
-    // This would integrate with your mapping library (Leaflet, Google Maps, etc.)
-    console.log('Updating map to:', lat, lng);
-    // Implementation would depend on your chosen mapping library
+    return () => clearInterval(interval);
 }

style.css

@@ -4,19 +4,28 @@ body {
     font-family: 'Inter', sans-serif;
     background-color: #f8fafc;
 }
-#map {
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-}
 
 /* Animation for the hero section */
 @keyframes float {
-0% { transform: translateY(0px); }
+    0% { transform: translateY(0px); }
     50% { transform: translateY(-15px); }
     100% { transform: translateY(0px); }
 }
-
 .floating {
     animation: float 6s ease-in-out infinite;
-}
+}
+
+/* Map styles */
+#map { 
+    z-index: 1; 
+}
+
+/* Device list styles */
+#device-list div {
+    transition: all 0.2s;
+}
+
+#device-list div:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}

tracking.html

@@ -3,41 +3,39 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Device Tracking | Simple Canvas</title>
+    <title>Device Tracking | Staff Portal</title>
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
 </head>
 <body class="min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>
     
-    <main class="flex-grow p-6">
-        <div class="max-w-6xl mx-auto">
-            <h1 class="text-2xl font-bold mb-6">Device Tracking</h1>
+    <main class="flex-grow p-4">
+        <div class="max-w-6xl mx-auto bg-white rounded-lg shadow p-4">
+            <h1 class="text-2xl font-bold mb-4">Device Tracking Dashboard</h1>
             
-            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-                <div class="bg-white p-4 rounded-lg shadow">
-                    <h2 class="text-xl font-semibold mb-4">Tracking Info</h2>
-                    <div class="space-y-4">
-                        <div>
-                            <h3 class="font-medium">Current Location</h3>
-                            <p id="current-location" class="text-gray-600">Acquiring location...</p>
-                        </div>
-                        <div>
-                            <h3 class="font-medium">Tracked Devices</h3>
-                            <ul id="device-list" class="space-y-2">
-                                <!-- Devices will be populated here -->
-                            </ul>
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                <div class="lg:col-span-2">
+                    <div id="map" class="h-96 rounded-lg border border-gray-200"></div>
+                </div>
+                
+                <div class="space-y-4">
+                    <div class="bg-gray-50 p-4 rounded-lg">
+                        <h3 class="font-medium mb-2">Active Devices</h3>
+                        <div class="space-y-2" id="device-list">
+                            <!-- Devices will be populated here -->
                         </div>
-                        <button id="refresh-location" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
-                            Refresh Location
+                    </div>
+                    
+                    <div class="bg-gray-50 p-4 rounded-lg">
+                        <h3 class="font-medium mb-2">Tracking Controls</h3>
+                        <button id="refresh-btn" class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">
+                            Refresh Locations
                         </button>
                     </div>
                 </div>
-
-                <div class="lg:col-span-2">
-                    <div id="map" class="h-96 bg-gray-200 rounded-lg"></div>
-                </div>
             </div>
         </div>
     </main>
@@ -46,28 +44,54 @@
 
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
-    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
     <script src="script.js"></script>
     <script>
         // Initialize map
-        let map;
-        document.addEventListener('DOMContentLoaded', () => {
-            map = L.map('map').setView([51.505, -0.09], 13);
-            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-            }).addTo(map);
+        const map = L.map('map').setView([51.505, -0.09], 13);
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        }).addTo(map);
+
+        // Mock devices data
+        const devices = [
+            { id: 'dev-001', name: 'Device 1', lat: 51.505, lng: -0.09, battery: 85 },
+            { id: 'dev-002', name: 'Device 2', lat: 51.51, lng: -0.1, battery: 72 },
+            { id: 'dev-003', name: 'Device 3', lat: 51.515, lng: -0.08, battery: 43 }
+        ];
+
+        // Add markers and device list
+        const markers = {};
+        const deviceList = document.getElementById('device-list');
+        
+        devices.forEach(device => {
+            // Add marker
+            markers[device.id] = L.marker([device.lat, device.lng])
+                .addTo(map)
+                .bindPopup(`<b>${device.name}</b><br>Battery: ${device.battery}%`);
+            
+            // Add to device list
+            const deviceElement = document.createElement('div');
+            deviceElement.className = 'flex items-center justify-between p-2 bg-white rounded border';
+            deviceElement.innerHTML = `
+                <div>
+                    <span class="font-medium">${device.name}</span>
+                    <span class="text-xs text-gray-500 block">ID: ${device.id}</span>
+                </div>
+                <div class="text-right">
+                    <span class="text-xs ${device.battery > 30 ? 'text-green-600' : 'text-red-600'}">${device.battery}%</span>
+                    <div class="w-16 h-1 bg-gray-200 rounded-full mt-1">
+                        <div class="h-1 rounded-full ${device.battery > 30 ? 'bg-green-600' : 'bg-red-600'}" 
+                             style="width: ${device.battery}%"></div>
+                    </div>
+                </div>
+            `;
+            deviceList.appendChild(deviceElement);
+        });
 
-            document.getElementById('refresh-location').addEventListener('click', () => {
-                if (navigator.geolocation) {
-                    navigator.geolocation.getCurrentPosition(position => {
-                        const { latitude, longitude } = position.coords;
-                        updateDevicePosition(latitude, longitude);
-                        map.setView([latitude, longitude], 13);
-                        L.marker([latitude, longitude]).addTo(map)
-                            .bindPopup('Current Location').openPopup();
-                    });
-                }
-            });
+        // Refresh button
+        document.getElementById('refresh-btn').addEventListener('click', () => {
+            // In a real app, this would fetch new locations from an API
+            alert('Refreshing device locations...');
         });
     </script>
 </body>