Correccion de dashboar usuarios y admins

backend/src/index.js

@@ -31,11 +31,11 @@ app.use('/api/auth', authRoutes);
 // Plates CRUD
 app.get('/api/plates', authenticateToken, async (req, res) => {
   try {
-    // Users see their own plates? Or all? 
+    // Filter based on role
-    // Requirement: "usuarios al agregar nuevas patentes, deberan ser permitidas por el administrador"
+    const where = req.user.role === 'ADMIN' ? {} : { addedById: req.user.id };
-    // Let's users see all but maybe status distinguishes them.
+
-    // For now, let's return all.
     const plates = await prisma.plate.findMany({
+      where,
       include: { addedBy: { select: { username: true } } }
     });
     res.json(plates);

frontend/src/pages/AdminDashboard.jsx

@@ -1,28 +1,64 @@
 import { useState, useEffect } from 'react';
 import axios from 'axios';
-import { Users, CheckCircle, XCircle, Shield, Trash2 } from 'lucide-react';
+import io from 'socket.io-client';
+import { Users, CheckCircle, XCircle, Shield, Trash2, Camera, Clock, Calendar } from 'lucide-react';
 
 const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';
+const socket = io(API_URL);
 
 function AdminDashboard({ token }) {
     const [users, setUsers] = useState([]);
     const [plates, setPlates] = useState([]);
     const [newUser, setNewUser] = useState({ username: '', password: '', role: 'USER' });
-    const [activeTab, setActiveTab] = useState('plates'); // 'plates' | 'users'
+    const [activeTab, setActiveTab] = useState('monitor'); // 'monitor' | 'plates' | 'users'
+
+    // Monitor State
+    const [detections, setDetections] = useState([]);
+    const [historyLogs, setHistoryLogs] = useState([]);
+    const [viewMode, setViewMode] = useState('live'); // 'live' | 'history'
+    const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
 
     useEffect(() => {
         fetchData();
+
+        // Live detection listener
+        socket.on('new_detection', (data) => {
+            setDetections(prev => [data, ...prev].slice(0, 10));
+        });
+
+        return () => socket.off('new_detection');
     }, [token]);
 
+    useEffect(() => {
+        if (viewMode === 'history' && activeTab === 'monitor') {
+            fetchHistory(selectedDate);
+        }
+    }, [viewMode, selectedDate, activeTab]);
+
     const fetchData = async () => {
         try {
             const authHeader = { headers: { Authorization: `Bearer ${token}` } };
-            const [usersRes, platesRes] = await Promise.all([
+            const [usersRes, platesRes, recentRes] = await Promise.all([
                 axios.get(`${API_URL}/api/auth`, authHeader).catch(err => ({ data: [] })),
-                axios.get(`${API_URL}/api/plates`, authHeader)
+                axios.get(`${API_URL}/api/plates`, authHeader),
+                axios.get(`${API_URL}/api/recent`, authHeader)
             ]);
             setUsers(usersRes.data);
             setPlates(platesRes.data);
+            setDetections(recentRes.data.map(log => ({
+                plate: log.plateNumber,
+                status: log.accessStatus,
+                timestamp: log.timestamp
+            })));
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
+    const fetchHistory = async (date) => {
+        try {
+            const res = await axios.get(`${API_URL}/api/history?date=${date}`);
+            setHistoryLogs(res.data);
         } catch (err) {
             console.error(err);
         }
@@ -65,6 +101,15 @@ function AdminDashboard({ token }) {
         }
     };
 
+    const StatusBadge = ({ status }) => (
+        <span className={`px-2 py-1 rounded text-xs font-bold ${status === 'GRANTED' ? 'bg-green-600 text-white' :
+                status === 'DENIED' ? 'bg-red-600 text-white' :
+                    'bg-yellow-600 text-white'
+            }`}>
+            {status}
+        </span>
+    );
+
     return (
         <div className="min-h-screen bg-slate-900 text-slate-100 p-8">
             <div className="max-w-7xl mx-auto space-y-8">
@@ -74,6 +119,12 @@ function AdminDashboard({ token }) {
                         Admin Portal
                     </h1>
                     <div className="flex bg-slate-800 rounded-lg p-1">
+                        <button
+                            onClick={() => setActiveTab('monitor')}
+                            className={`px-4 py-2 rounded-md transition-all ${activeTab === 'monitor' ? 'bg-purple-600' : 'hover:text-purple-400'}`}
+                        >
+                            Monitor Area
+                        </button>
                         <button
                             onClick={() => setActiveTab('plates')}
                             className={`px-4 py-2 rounded-md transition-all ${activeTab === 'plates' ? 'bg-purple-600' : 'hover:text-purple-400'}`}
@@ -89,6 +140,70 @@ function AdminDashboard({ token }) {
                     </div>
                 </header>
 
+                {activeTab === 'monitor' && (
+                    <div className="space-y-6">
+                        <div className="flex justify-between items-center">
+                            <h2 className="text-xl font-bold flex items-center gap-2">
+                                <Camera /> Live Monitor
+                            </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>
+                        </div>
+
+                        {viewMode === 'live' ? (
+                            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                                <div className="bg-black rounded-xl overflow-hidden aspect-video border border-slate-700 relative">
+                                    <img
+                                        src="http://192.168.196.100:5001/video_feed"
+                                        className="w-full h-full object-cover"
+                                        onError={(e) => e.target.style.display = 'none'}
+                                    />
+                                    <div className="absolute top-4 left-4 bg-red-600 px-2 py-1 rounded text-xs font-bold animate-pulse">LIVE</div>
+                                </div>
+                                <div className="bg-slate-800 rounded-xl p-4 border border-slate-700 h-[400px] overflow-y-auto">
+                                    <h3 className="font-bold mb-4 text-slate-400">Recent Detections</h3>
+                                    <div className="space-y-2">
+                                        {detections.map((d, i) => (
+                                            <div key={i} className="flex justify-between items-center p-3 bg-slate-900 rounded border border-slate-700">
+                                                <span className="font-mono text-lg font-bold">{d.plate}</span>
+                                                <div className="flex items-center gap-2">
+                                                    <span className="text-xs text-slate-500">{new Date(d.timestamp).toLocaleTimeString()}</span>
+                                                    <StatusBadge status={d.status} />
+                                                </div>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+                            </div>
+                        ) : (
+                            <div className="bg-slate-800 rounded-xl p-6 border border-slate-700">
+                                <div className="flex gap-4 mb-6">
+                                    <input
+                                        type="date"
+                                        value={selectedDate}
+                                        onChange={(e) => setSelectedDate(e.target.value)}
+                                        className="bg-slate-900 border border-slate-600 rounded px-4 py-2"
+                                    />
+                                </div>
+                                <div className="space-y-2">
+                                    {historyLogs.map(log => (
+                                        <div key={log.id} className="flex justify-between items-center p-3 bg-slate-900 rounded border border-slate-700">
+                                            <div className="flex items-center gap-4">
+                                                <span className="font-mono text-lg font-bold">{log.plateNumber}</span>
+                                                <span className="text-slate-500">{new Date(log.timestamp).toLocaleString()}</span>
+                                            </div>
+                                            <StatusBadge status={log.accessStatus} />
+                                        </div>
+                                    ))}
+                                    {historyLogs.length === 0 && <p className="text-slate-500 text-center py-8">No logs found for this date.</p>}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                )}
+
                 {activeTab === 'plates' && (
                     <div className="bg-slate-800 rounded-2xl p-6 border border-slate-700">
                         <h2 className="text-xl font-semibold mb-6">Pending Approvals</h2>
@@ -128,6 +243,7 @@ function AdminDashboard({ token }) {
                                         <div>
                                             <div className="font-mono text-lg font-bold">{plate.number}</div>
                                             <div className="text-xs text-slate-500">{plate.owner}</div>
+                                            <div className="text-xs text-slate-600 mt-1">Added by: {plate.addedBy?.username || 'System'}</div>
                                         </div>
                                         <span className={`text-xs px-2 py-1 rounded ${plate.status === 'ALLOWED' ? 'bg-green-900 text-green-300' : 'bg-red-900 text-red-300'}`}>
                                             {plate.status}

frontend/src/pages/UserDashboard.jsx

@@ -58,8 +58,8 @@ function UserDashboard({ token, username }) {
         <div className="min-h-screen bg-slate-900 text-slate-100 p-8">
             <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">
 
-                {/* Left: Register & My Plates */}
+                {/* Register & My Plates (Full Width) */}
-                <div className="lg:col-span-2 space-y-8">
+                <div className="col-span-1 lg:col-span-3 space-y-8">
                     <header>
                         <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-cyan-300 bg-clip-text text-transparent mb-2">
                             Welcome, {username}
@@ -72,8 +72,8 @@ function UserDashboard({ token, username }) {
                             <Car className="text-blue-400" /> My Registered Plates
                         </h2>
 
-                        <div className="space-y-4">
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                            {plates.length === 0 && <p className="text-slate-500">No plates registered.</p>}
+                            {plates.length === 0 && <p className="text-slate-500 col-span-3">No plates registered.</p>}
                             {plates.map(plate => (
                                 <div key={plate.id} className="flex items-center justify-between p-4 bg-slate-900 rounded-xl border border-slate-700">
                                     <div>
@@ -126,32 +126,6 @@ function UserDashboard({ token, username }) {
                     </div>
                 </div>
 
-                {/* Right: Live Feed Preview */}
-                <div className="space-y-6">
-                    <div className="bg-slate-800 rounded-2xl p-4 border border-slate-700">
-                        <h3 className="font-bold text-slate-400 mb-4 text-xs uppercase tracking-wider">Live Gate Feed</h3>
-                        <div className="aspect-video bg-black rounded-lg overflow-hidden relative">
-                            <img
-                                src="http://192.168.196.100:5001/video_feed"
-                                className="w-full h-full object-cover"
-                                onError={(e) => e.target.style.display = 'none'}
-                            />
-                        </div>
-                    </div>
-
-                    <div className="bg-slate-800 rounded-2xl p-4 border border-slate-700">
-                        <h3 className="font-bold text-slate-400 mb-4 text-xs uppercase tracking-wider">Recent Activity</h3>
-                        <div className="space-y-3">
-                            {detections.map((d, i) => (
-                                <div key={i} className="flex items-center justify-between text-sm">
-                                    <span className="font-mono font-bold text-slate-300">{d.plate}</span>
-                                    <span className={`text-xs ${d.status === 'GRANTED' ? 'text-green-400' : 'text-red-400'}`}>{d.status}</span>
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-                </div>
-
             </div>
         </div>
     );