From d5b32fb4a28638ae4acfc1c716439d996a37907b Mon Sep 17 00:00:00 2001
From: raven <pblorocko@gmail.com>
Date: Fri, 26 Dec 2025 14:16:25 -0300
Subject: [PATCH] Add Historico

---
 backend/src/index.js |  45 +++++++++--
 frontend/src/App.jsx | 185 ++++++++++++++++++++++++++++++++-----------
 2 files changed, 176 insertions(+), 54 deletions(-)

diff --git a/backend/src/index.js b/backend/src/index.js
index 576bf56..546b5da 100644
--- a/backend/src/index.js
+++ b/backend/src/index.js
@@ -13,7 +13,7 @@ app.use(express.json());
 const server = http.createServer(app);
 const io = new Server(server, {
   cors: {
-    origin: "*", 
+    origin: "*",
     methods: ["GET", "POST"]
   }
 });
@@ -45,11 +45,42 @@ app.post('/api/plates', async (req, res) => {
   }
 });
 
+// History Endpoint
+app.get('/api/history', async (req, res) => {
+  const { date } = req.query; // Format: YYYY-MM-DD
+  if (!date) {
+    return res.status(400).json({ error: 'Date is required' });
+  }
+
+  const startDate = new Date(date);
+  startDate.setHours(0, 0, 0, 0);
+
+  const endDate = new Date(date);
+  endDate.setHours(23, 59, 59, 999);
+
+  try {
+    const logs = await prisma.accessLog.findMany({
+      where: {
+        timestamp: {
+          gte: startDate,
+          lte: endDate
+        }
+      },
+      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;
   console.log(`Detected: ${plate_number}`);
-  
+
   try {
     // Check if plate exists
     let plate = await prisma.plate.findUnique({
@@ -57,15 +88,15 @@ app.post('/api/detect', async (req, res) => {
     });
 
     let accessStatus = 'DENIED';
-    
+
     if (plate && plate.status === 'ALLOWED') {
       accessStatus = 'GRANTED';
-    } 
+    }
 
     if (!plate) {
-       // Optional: Auto-create unknown plates?
-       // For now, treat as UNKNOWN (Denied)
-       accessStatus = 'UNKNOWN';
+      // Optional: Auto-create unknown plates?
+      // For now, treat as UNKNOWN (Denied)
+      accessStatus = 'UNKNOWN';
     }
 
     // Log the access attempt
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index abdcc52..6d27f0d 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import io from 'socket.io-client'
 import axios from 'axios'
-import { Car, AlertCircle, CheckCircle, XCircle, Clock } from 'lucide-react'
+import { Car, AlertCircle, CheckCircle, XCircle, Clock, Calendar } from 'lucide-react'
 
 // Env var logic for Vite
 const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';
@@ -14,6 +14,12 @@ function App() {
   const [showModal, setShowModal] = useState(false);
   const [newPlate, setNewPlate] = useState({ number: '', owner: '' });
 
+  // History State
+  const [viewMode, setViewMode] = useState('live'); // 'live' | 'history'
+  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
+  const [historyLogs, setHistoryLogs] = useState([]);
+  const [loadingHistory, setLoadingHistory] = useState(false);
+
   const handleRegister = async (e) => {
     e.preventDefault();
     try {
@@ -56,6 +62,26 @@ function App() {
     }
   };
 
+  const fetchHistory = async (date) => {
+    setLoadingHistory(true);
+    try {
+      const res = await axios.get(`${API_URL}/api/history?date=${date}`);
+      setHistoryLogs(res.data);
+    } catch (err) {
+      console.error("Error fetching history:", err);
+      // alert("Failed to fetch history");
+    } finally {
+      setLoadingHistory(false);
+    }
+  };
+
+  // Fetch history when date changes or when switching to history view
+  useEffect(() => {
+    if (viewMode === 'history') {
+      fetchHistory(selectedDate);
+    }
+  }, [viewMode, selectedDate]);
+
   const StatusBadge = ({ status }) => {
     const colors = {
       GRANTED: 'bg-green-500/20 text-green-400 border-green-500/50',
@@ -142,58 +168,123 @@ function App() {
 
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
 
-          {/* Live Detections Feed */}
+          {/* Main Feed Section (Live / History) */}
           <div className="lg:col-span-2 space-y-6">
-            <h2 className="text-xl font-semibold flex items-center space-x-2">
-              <Clock className="text-blue-400" />
-              <span>Live Detections</span>
+            <h2 className="text-xl font-semibold flex items-center justify-between">
+              <div className="flex items-center space-x-2">
+                {viewMode === 'live' ? <Clock className="text-blue-400" /> : <Calendar className="text-purple-400" />}
+                <span>{viewMode === 'live' ? 'Live Detections' : 'History Log'}</span>
+              </div>
+
+              {/* Toggle Switch */}
+              <div className="flex bg-slate-800 rounded-lg p-1 border border-slate-700">
+                <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'
+                    }`}
+                >
+                  Live
+                </button>
+                <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'
+                    }`}
+                >
+                  History
+                </button>
+              </div>
             </h2>
 
             <div className="bg-slate-800/50 rounded-2xl p-6 border border-slate-700/50 backdrop-blur-sm min-h-[400px]">
 
-              {/* Video Feed */}
-              <div className="mb-6 rounded-xl overflow-hidden bg-black aspect-video relative border border-slate-700 shadow-lg">
-                <img
-                  src="http://192.168.196.100:5001/video_feed"
-                  alt="Live Camera Feed"
-                  className="w-full h-full object-cover"
-                  onError={(e) => {
-                    e.target.style.display = 'none';
-                    e.target.nextSibling.style.display = 'flex';
-                  }}
-                />
-                <div className="absolute inset-0 flex items-center justify-center text-slate-500 hidden bg-slate-900">
-                  <p>Camera Offline or Connecting...</p>
-                </div>
-                <div className="absolute top-4 right-4 animate-pulse">
-                  <div className="px-2 py-1 bg-red-600 rounded text-xs font-bold text-white uppercase tracking-wider">
-                    LIVE
-                  </div>
-                </div>
-              </div>
-
-              {/* Detections List */}
-              <h3 className="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-4">Recent Scans</h3>
-
-              {detections.length === 0 ? (
-                <div className="flex flex-col items-center justify-center text-slate-500 space-y-4 text-center py-8">
-                  <p>No detections yet...</p>
-                </div>
-              ) : (
-                <div className="space-y-4">
-                  {detections.map((d, i) => (
-                    <div key={i} className="flex items-center justify-between p-4 bg-slate-800 border border-slate-700 rounded-xl hover:bg-slate-750 transition-colors">
-                      <div className="flex items-center space-x-4">
-                        <div className="p-2 bg-slate-700 rounded-lg font-mono text-xl tracking-wider font-bold">
-                          {d.plate}
-                        </div>
-                        <div className="text-sm text-slate-400">
-                          {new Date(d.timestamp).toLocaleTimeString()}
-                        </div>
-                      </div>
-                      <StatusBadge status={d.status} />
+              {viewMode === 'live' ? (
+                <>
+                  {/* Video Feed */}
+                  <div className="mb-6 rounded-xl overflow-hidden bg-black aspect-video relative border border-slate-700 shadow-lg">
+                    <img
+                      src="http://192.168.196.100:5001/video_feed"
+                      alt="Live Camera Feed"
+                      className="w-full h-full object-cover"
+                      onError={(e) => {
+                        e.target.style.display = 'none';
+                        e.target.nextSibling.style.display = 'flex';
+                      }}
+                    />
+                    <div className="absolute inset-0 flex items-center justify-center text-slate-500 hidden bg-slate-900">
+                      <p>Camera Offline or Connecting...</p>
                     </div>
-                  ))}
+                    <div className="absolute top-4 right-4 animate-pulse">
+                      <div className="px-2 py-1 bg-red-600 rounded text-xs font-bold text-white uppercase tracking-wider">
+                        LIVE
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Detections List */}
+                  <h3 className="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-4">Recent Scans</h3>
+
+                  {detections.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center text-slate-500 space-y-4 text-center py-8">
+                      <p>No detections yet...</p>
+                    </div>
+                  ) : (
+                    <div className="space-y-4">
+                      {detections.map((d, i) => (
+                        <div key={i} className="flex items-center justify-between p-4 bg-slate-800 border border-slate-700 rounded-xl hover:bg-slate-750 transition-colors">
+                          <div className="flex items-center space-x-4">
+                            <div className="p-2 bg-slate-700 rounded-lg font-mono text-xl tracking-wider font-bold">
+                              {d.plate}
+                            </div>
+                            <div className="text-sm text-slate-400">
+                              {new Date(d.timestamp).toLocaleTimeString()}
+                            </div>
+                          </div>
+                          <StatusBadge status={d.status} />
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </>
+              ) : (
+                /* History View */
+                <div className="space-y-6">
+                  <div className="flex items-center space-x-4 bg-slate-800 p-4 rounded-xl border border-slate-700">
+                    <label className="text-slate-400 text-sm font-medium">Select Date:</label>
+                    <input
+                      type="date"
+                      value={selectedDate}
+                      onChange={(e) => setSelectedDate(e.target.value)}
+                      className="bg-slate-900 border border-slate-600 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 outline-none"
+                    />
+                  </div>
+
+                  <div className="space-y-4">
+                    {loadingHistory ? (
+                      <p className="text-center text-slate-500 py-8">Loading history...</p>
+                    ) : historyLogs.length === 0 ? (
+                      <div className="text-center text-slate-500 py-8">
+                        No records found for {selectedDate}
+                      </div>
+                    ) : (
+                      historyLogs.map((log) => (
+                        <div key={log.id} className="flex items-center justify-between p-4 bg-slate-800 border border-slate-700 rounded-xl">
+                          <div className="flex items-center space-x-4">
+                            <div className="p-2 bg-slate-700 rounded-lg font-mono text-xl tracking-wider font-bold">
+                              {log.plateNumber}
+                            </div>
+                            <div className="text-sm text-slate-400">
+                              {new Date(log.timestamp).toLocaleTimeString()}
+                            </div>
+                          </div>
+                          <StatusBadge status={log.accessStatus} />
+                        </div>
+                      ))
+                    )}
+                  </div>
                 </div>
               )}
             </div>