add 5 Ultimas Horas

backend/src/index.js

@@ -76,6 +76,26 @@ app.get('/api/history', async (req, res) => {
   }
 });
 
+// Recent Scans Endpoint (Last 5 Hours)
+app.get('/api/recent', async (req, res) => {
+  try {
+    const fiveHoursAgo = new Date(Date.now() - 5 * 60 * 60 * 1000);
+    const logs = await prisma.accessLog.findMany({
+      where: {
+        timestamp: {
+          gte: fiveHoursAgo
+        }
+      },
+      orderBy: {
+        timestamp: 'desc'
+      }
+    });
+    res.json(logs);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
 // Detection Endpoint (from Python)
 app.post('/api/detect', async (req, res) => {
   const { plate_number } = req.body;

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'
+                    ? 'bg-blue-600 text-white shadow-lg'
-                      : 'text-slate-400 hover:text-slate-200'
+                    : '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'
+                    ? 'bg-purple-600 text-white shadow-lg'
-                      : 'text-slate-400 hover:text-slate-200'
+                    : 'text-slate-400 hover:text-slate-200'
                     }`}
                 >
                   History