add 5 Ultimas Horas

frontend/src/App.jsx

@@ -39,6 +39,7 @@ function App() {
   // Load initial data
   useEffect(() => {
     fetchPlates();
+    fetchRecentDetections();
 
     // Socket listeners
     socket.on('new_detection', (data) => {
@@ -51,6 +52,23 @@ function App() {
     };
   }, []);
 
+  const fetchRecentDetections = async () => {
+    try {
+      const res = await axios.get(`${API_URL}/api/recent`);
+      // Map backend AccessLog format to frontend detection format if needed
+      // AccessLog: { id, plateNumber, accessStatus, timestamp }
+      // Detection: { plate, status, timestamp }
+      const formatted = res.data.map(log => ({
+        plate: log.plateNumber,
+        status: log.accessStatus,
+        timestamp: log.timestamp
+      }));
+      setDetections(formatted);
+    } catch (err) {
+      console.error("Error fetching recent detections:", err);
+    }
+  };
+
   const fetchPlates = async () => {
     try {
       const res = await axios.get(`${API_URL}/api/plates`);
@@ -181,8 +199,8 @@ function App() {
                 <button
                   onClick={() => setViewMode('live')}
                   className={`px-4 py-1 rounded-md text-sm font-medium transition-all ${viewMode === 'live'
-                      ? 'bg-blue-600 text-white shadow-lg'
-                      : 'text-slate-400 hover:text-slate-200'
+                    ? 'bg-blue-600 text-white shadow-lg'
+                    : 'text-slate-400 hover:text-slate-200'
                     }`}
                 >
                   Live
@@ -190,8 +208,8 @@ function App() {
                 <button
                   onClick={() => setViewMode('history')}
                   className={`px-4 py-1 rounded-md text-sm font-medium transition-all ${viewMode === 'history'
-                      ? 'bg-purple-600 text-white shadow-lg'
-                      : 'text-slate-400 hover:text-slate-200'
+                    ? 'bg-purple-600 text-white shadow-lg'
+                    : 'text-slate-400 hover:text-slate-200'
                     }`}
                 >
                   History