add snapshots & counter

frontend/src/pages/AdminDashboard.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import axios from 'axios';
 import io from 'socket.io-client';
-import { Users, CheckCircle, XCircle, Shield, Trash2, Camera, AlertCircle } from 'lucide-react';
+import { Users, CheckCircle, XCircle, Shield, Trash2, Camera, AlertCircle, Database } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import LanguageSelector from '../components/LanguageSelector';
 
@@ -26,8 +26,15 @@ function AdminDashboard({ token }) {
     const [searchRut, setSearchRut] = useState('');
     const [searchResult, setSearchResult] = useState(null); // null | { found: true, data: ... } | { found: false }
 
+    // Dataset State
+    const [datasetCount, setDatasetCount] = useState(0);
+
     useEffect(() => {
         fetchData();
+        fetchDatasetCount();
+
+        // Actualizar contador de dataset cada 10 segundos
+        const datasetInterval = setInterval(fetchDatasetCount, 10000);
 
         // Live detection listener
         socket.on('new_detection', (data) => {
@@ -48,6 +55,7 @@ function AdminDashboard({ token }) {
             socket.off('plate_status_updated');
             socket.off('plate_deleted');
             socket.off('person_deleted');
+            clearInterval(datasetInterval);
         };
     }, [token]);
 
@@ -88,6 +96,15 @@ function AdminDashboard({ token }) {
         }
     };
 
+    const fetchDatasetCount = async () => {
+        try {
+            const res = await axios.get('/dataset/count');
+            setDatasetCount(res.data.plates_captured || 0);
+        } catch (err) {
+            console.log('Dataset count not available');
+        }
+    };
+
     const handleSearchRut = (e) => {
         e.preventDefault();
         const normalizedRut = searchRut.replace(/\./g, '').toUpperCase();
@@ -201,9 +218,17 @@ function AdminDashboard({ token }) {
                             <h2 className="text-xl font-bold flex items-center gap-2">
                                 <Camera /> {t('monitor_area')}
                             </h2>
-                            <div className="flex bg-slate-800 rounded p-1">
-                                <button onClick={() => setViewMode('live')} className={`px-3 py-1 rounded ${viewMode === 'live' ? 'bg-blue-600' : ''}`}>Live</button>
-                                <button onClick={() => setViewMode('history')} className={`px-3 py-1 rounded ${viewMode === 'history' ? 'bg-blue-600' : ''}`}>History</button>
+                            <div className="flex items-center gap-4">
+                                {/* Dataset Counter */}
+                                <div className="flex items-center gap-2 bg-gradient-to-r from-emerald-900/50 to-teal-900/50 px-4 py-2 rounded-lg border border-emerald-700/50">
+                                    <Database size={18} className="text-emerald-400" />
+                                    <span className="text-emerald-300 font-mono font-bold">{datasetCount}</span>
+                                    <span className="text-emerald-400/70 text-sm">capturas</span>
+                                </div>
+                                <div className="flex bg-slate-800 rounded p-1">
+                                    <button onClick={() => setViewMode('live')} className={`px-3 py-1 rounded ${viewMode === 'live' ? 'bg-blue-600' : ''}`}>Live</button>
+                                    <button onClick={() => setViewMode('history')} className={`px-3 py-1 rounded ${viewMode === 'history' ? 'bg-blue-600' : ''}`}>History</button>
+                                </div>
                             </div>
                         </div>
 

frontend/vite.config.js

@@ -18,6 +18,10 @@ export default defineConfig({
       '/video_feed': {
         target: 'http://alpr-service:5001',
         changeOrigin: true
+      },
+      '/dataset': {
+        target: 'http://alpr-service:5001',
+        changeOrigin: true
       }
     }
   }