Fix jwt-token

client/src/pages/Dashboard.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useSocket } from '../contexts/SocketContext';
+import MovementAlertsPanel from '../components/MovementAlertsPanel';
 import api from '../services/api';
 import {
   ServerIcon,
@@ -30,7 +31,8 @@ const Dashboard = () => {
   const [deviceActivity, setDeviceActivity] = useState([]);
   const [recentActivity, setRecentActivity] = useState([]);
   const [loading, setLoading] = useState(true);
-  const { recentDetections, deviceStatus, connected } = useSocket();
+  const [showMovementAlerts, setShowMovementAlerts] = useState(true);
+  const { recentDetections, deviceStatus, connected, movementAlerts } = useSocket();
 
   useEffect(() => {
     fetchDashboardData();
@@ -318,6 +320,70 @@ const Dashboard = () => {
           </div>
         </div>
       </div>
+
+      {/* Movement Alerts Panel */}
+      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
+        <div className="xl:col-span-2">
+          <MovementAlertsPanel />
+        </div>
+        
+        {/* Movement Summary Stats */}
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 className="text-lg font-medium text-gray-900 mb-4">
+            Movement Tracking
+          </h3>
+          
+          <div className="space-y-4">
+            <div className="flex items-center justify-between p-3 bg-red-50 rounded-lg">
+              <div>
+                <div className="font-medium text-red-900">Critical Alerts</div>
+                <div className="text-sm text-red-700">Very close approaches</div>
+              </div>
+              <div className="text-2xl font-bold text-red-600">
+                {movementAlerts.filter(a => a.analysis.alertLevel >= 3).length}
+              </div>
+            </div>
+            
+            <div className="flex items-center justify-between p-3 bg-orange-50 rounded-lg">
+              <div>
+                <div className="font-medium text-orange-900">High Priority</div>
+                <div className="text-sm text-orange-700">Approaching drones</div>
+              </div>
+              <div className="text-2xl font-bold text-orange-600">
+                {movementAlerts.filter(a => a.analysis.alertLevel === 2).length}
+              </div>
+            </div>
+            
+            <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
+              <div>
+                <div className="font-medium text-blue-900">Medium Priority</div>
+                <div className="text-sm text-blue-700">Movement changes</div>
+              </div>
+              <div className="text-2xl font-bold text-blue-600">
+                {movementAlerts.filter(a => a.analysis.alertLevel === 1).length}
+              </div>
+            </div>
+            
+            <div className="pt-4 border-t border-gray-200">
+              <div className="text-sm text-gray-600">
+                <div className="flex justify-between">
+                  <span>Total Tracked:</span>
+                  <span className="font-medium">{movementAlerts.length} events</span>
+                </div>
+                <div className="flex justify-between mt-1">
+                  <span>Last Alert:</span>
+                  <span className="font-medium">
+                    {movementAlerts.length > 0 
+                      ? format(new Date(movementAlerts[0].timestamp), 'HH:mm:ss')
+                      : 'None'
+                    }
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };