Intento de Creador

backend/package.json

@@ -13,10 +13,12 @@
     "express": "^4.18.2",
     "pg": "^8.11.0",
     "socket.io": "^4.6.1",
-    "@prisma/client": "^5.0.0"
+    "@prisma/client": "^5.0.0",
+    "bcryptjs": "^2.4.3",
+    "jsonwebtoken": "^9.0.2"
   },
   "devDependencies": {
     "nodemon": "^2.0.22",
     "prisma": "^5.0.0"
   }
-}
+}

backend/prisma/schema.prisma

@@ -8,12 +8,22 @@ datasource db {
   url      = env("DATABASE_URL")
 }
 
+model User {
+  id       Int      @id @default(autoincrement())
+  username String   @unique
+  password String
+  role     String   @default("USER") // ADMIN, USER
+  plates   Plate[]
+}
+
 model Plate {
   id        Int      @id @default(autoincrement())
   number    String   @unique
   owner     String?
-  status    String   @default("ALLOWED") // ALLOWED, DENIED
+  status    String   @default("PENDING") // PENDING, ALLOWED, DENIED
   createdAt DateTime @default(now())
+  addedBy   User?    @relation(fields: [addedById], references: [id])
+  addedById Int?
 }
 
 model AccessLog {

backend/src/index.js

@@ -23,21 +23,41 @@ app.get('/', (req, res) => {
   res.send('ALPR Backend Running');
 });
 
+const authRoutes = require('./routes/auth');
+const { authenticateToken, isAdmin } = require('./middleware/auth');
+
+app.use('/api/auth', authRoutes);
+
 // Plates CRUD
-app.get('/api/plates', async (req, res) => {
+app.get('/api/plates', authenticateToken, async (req, res) => {
   try {
-    const plates = await prisma.plate.findMany();
+    // Users see their own plates? Or all? 
+    // Requirement: "usuarios al agregar nuevas patentes, deberan ser permitidas por el administrador"
+    // Let's users see all but maybe status distinguishes them.
+    // For now, let's return all.
+    const plates = await prisma.plate.findMany({
+      include: { addedBy: { select: { username: true } } }
+    });
     res.json(plates);
   } catch (err) {
     res.status(500).json({ error: err.message });
   }
 });
 
-app.post('/api/plates', async (req, res) => {
-  const { number, owner, status } = req.body;
+app.post('/api/plates', authenticateToken, async (req, res) => {
+  const { number, owner } = req.body;
+  const isAdm = req.user.role === 'ADMIN';
+  // Admin -> ALLOWED, User -> PENDING
+  const status = isAdm ? 'ALLOWED' : 'PENDING';
+
   try {
     const plate = await prisma.plate.create({
-      data: { number, owner, status: status || 'ALLOWED' }
+      data: {
+        number,
+        owner,
+        status,
+        addedById: req.user.id
+      }
     });
     res.json(plate);
   } catch (err) {
@@ -45,6 +65,37 @@ app.post('/api/plates', async (req, res) => {
   }
 });
 
+// Admin: Approve/Reject Plate
+app.put('/api/plates/:id/approve', authenticateToken, isAdmin, async (req, res) => {
+  const { id } = req.params;
+  const { status } = req.body; // ALLOWED or DENIED
+
+  if (!['ALLOWED', 'DENIED'].includes(status)) {
+    return res.status(400).json({ error: 'Invalid status' });
+  }
+
+  try {
+    const plate = await prisma.plate.update({
+      where: { id: parseInt(id) },
+      data: { status }
+    });
+    res.json(plate);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// Admin: Delete Plate (Optional but good to have)
+app.delete('/api/plates/:id', authenticateToken, isAdmin, async (req, res) => {
+  const { id } = req.params;
+  try {
+    await prisma.plate.delete({ where: { id: parseInt(id) } });
+    res.json({ message: 'Plate deleted' });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
 // History Endpoint
 app.get('/api/history', async (req, res) => {
   const { date } = req.query; // Format: YYYY-MM-DD
@@ -159,7 +210,28 @@ app.post('/api/detect', async (req, res) => {
   }
 });
 
+const bcrypt = require('bcryptjs');
+
 const PORT = process.env.PORT || 3000;
-server.listen(PORT, () => {
+server.listen(PORT, async () => {
   console.log(`Server running on port ${PORT}`);
+
+  // Seed Admin User if none exists
+  try {
+    const userCount = await prisma.user.count();
+    if (userCount === 0) {
+      console.log('No users found. Creating default admin user...');
+      const hashedPassword = await bcrypt.hash('admin123', 10);
+      await prisma.user.create({
+        data: {
+          username: 'admin',
+          password: hashedPassword,
+          role: 'ADMIN'
+        }
+      });
+      console.log('Default admin created: admin / admin123');
+    }
+  } catch (err) {
+    console.error('Error seeding admin user:', err);
+  }
 });

backend/src/middleware/auth.js

@@ -0,0 +1,26 @@
+const jwt = require('jsonwebtoken');
+
+const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key-change-this';
+
+const authenticateToken = (req, res, next) => {
+    const authHeader = req.headers['authorization'];
+    const token = authHeader && authHeader.split(' ')[1];
+
+    if (!token) return res.sendStatus(401);
+
+    jwt.verify(token, JWT_SECRET, (err, user) => {
+        if (err) return res.sendStatus(403);
+        req.user = user;
+        next();
+    });
+};
+
+const isAdmin = (req, res, next) => {
+    if (req.user && req.user.role === 'ADMIN') {
+        next();
+    } else {
+        res.status(403).json({ error: 'Admin access required' });
+    }
+};
+
+module.exports = { authenticateToken, isAdmin, JWT_SECRET };

backend/src/routes/auth.js

@@ -0,0 +1,77 @@
+const express = require('express');
+const router = express.Router();
+const jwt = require('jsonwebtoken');
+const bcrypt = require('bcryptjs');
+const { PrismaClient } = require('@prisma/client');
+const { JWT_SECRET, authenticateToken, isAdmin } = require('../middleware/auth');
+
+const prisma = new PrismaClient();
+
+// Register (Protected - Admin only or Open? Plan said Admin creates users)
+// Let's allow open registration but default to USER role, or only Admin can create.
+// Requirement: "administrador sea capaz de crear y borrar usuarios".
+// So we will make register protected by isAdmin or just login.
+// For initial setup we might need a seed or allow open registration for the first user.
+// Let's implement a public login and a protected register for now.
+
+router.post('/login', async (req, res) => {
+    const { username, password } = req.body;
+
+    try {
+        const user = await prisma.user.findUnique({ where: { username } });
+        if (!user) return res.status(400).json({ error: 'User not found' });
+
+        const validPassword = await bcrypt.compare(password, user.password);
+        if (!validPassword) return res.status(400).json({ error: 'Invalid password' });
+
+        const token = jwt.sign({ id: user.id, username: user.username, role: user.role }, JWT_SECRET, { expiresIn: '1h' });
+        res.json({ token, role: user.role, username: user.username });
+    } catch (err) {
+        res.status(500).json({ error: err.message });
+    }
+});
+
+// Admin: Create User
+router.post('/register', authenticateToken, isAdmin, async (req, res) => {
+    const { username, password, role } = req.body;
+
+    try {
+        const hashedPassword = await bcrypt.hash(password, 10);
+        const user = await prisma.user.create({
+            data: {
+                username,
+                password: hashedPassword,
+                role: role || 'USER'
+            }
+        });
+        res.json({ message: 'User created', userId: user.id });
+    } catch (err) {
+        res.status(500).json({ error: err.message });
+    }
+});
+
+// Admin: Delete User
+router.delete('/:id', authenticateToken, isAdmin, async (req, res) => {
+    const { id } = req.params;
+    try {
+        await prisma.user.delete({ where: { id: parseInt(id) } });
+        res.json({ message: 'User deleted' });
+    } catch (err) {
+        res.status(500).json({ error: err.message });
+    }
+});
+
+// Admin: List Users
+router.get('/', authenticateToken, isAdmin, async (req, res) => {
+    try {
+        const users = await prisma.user.findMany({
+            select: { id: true, username: true, role: true } // Don't return passwords
+        });
+        res.json(users);
+    } catch (err) {
+        res.status(500).json({ error: err.message });
+    }
+});
+
+
+module.exports = router;

frontend/package.json

@@ -14,7 +14,9 @@
     "lucide-react": "^0.260.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "socket.io-client": "^4.7.1"
+    "socket.io-client": "^4.7.1",
+    "react-router-dom": "^6.14.2",
+    "jwt-decode": "^3.1.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

frontend/src/App.jsx

@@ -1,355 +1,86 @@
-import { useState, useEffect } from 'react'
-import io from 'socket.io-client'
-import axios from 'axios'
-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';
-const socket = io(API_URL);
+import { useState, useEffect } from 'react';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import Login from './pages/Login';
+import AdminDashboard from './pages/AdminDashboard';
+import UserDashboard from './pages/UserDashboard';
 
 function App() {
-  const [plates, setPlates] = useState([]);
-  const [detections, setDetections] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [showModal, setShowModal] = useState(false);
-  const [newPlate, setNewPlate] = useState({ number: '', owner: '' });
+  const [token, setToken] = useState(localStorage.getItem('token'));
+  const [userRole, setUserRole] = useState(localStorage.getItem('role'));
+  const [username, setUsername] = useState(localStorage.getItem('username'));
 
-  // 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 {
-      if (!newPlate.number) return;
-      await axios.post(`${API_URL}/api/plates`, {
-        number: newPlate.number.toUpperCase(),
-        owner: newPlate.owner
-      });
-      setNewPlate({ number: '', owner: '' });
-      setShowModal(false);
-      fetchPlates();
-    } catch (err) {
-      alert('Error adding plate: ' + err.message);
-    }
+  const setAuth = (newToken, newRole, newUser) => {
+    setToken(newToken);
+    setUserRole(newRole);
+    setUsername(newUser);
   };
 
-  // Load initial data
-  useEffect(() => {
-    fetchPlates();
-    fetchRecentDetections();
-
-    // Socket listeners
-    socket.on('new_detection', (data) => {
-      console.log('New detection:', data);
-      setDetections(prev => [data, ...prev].slice(0, 10)); // Keep last 10
-    });
-
-    return () => {
-      socket.off('new_detection');
-    };
-  }, []);
-
-  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 handleLogout = () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('role');
+    localStorage.removeItem('username');
+    setToken(null);
+    setUserRole(null);
+    setUsername(null);
   };
 
-  const fetchPlates = async () => {
-    try {
-      const res = await axios.get(`${API_URL}/api/plates`);
-      setPlates(res.data);
-      setLoading(false);
-    } catch (err) {
-      console.error(err);
-      setLoading(false);
+  // Protected Route Component
+  const ProtectedRoute = ({ children, allowedRoles }) => {
+    if (!token) {
+      return <Navigate to="/login" replace />;
     }
-  };
-
-  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);
+    if (allowedRoles && !allowedRoles.includes(userRole)) {
+      return <Navigate to={userRole === 'ADMIN' ? '/admin' : '/user'} replace />;
     }
-  };
-
-  // 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',
-      DENIED: 'bg-red-500/20 text-red-400 border-red-500/50',
-      UNKNOWN: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/50',
-      ALLOWED: 'bg-green-500/20 text-green-400 border-green-500/50',
-    };
-
-    return (
-      <span className={`px-3 py-1 rounded-full text-xs font-medium border ${colors[status] || colors.UNKNOWN}`}>
-        {status}
-      </span>
-    );
+    return children;
   };
 
   return (
-    <div className="min-h-screen bg-slate-900 text-slate-100 p-8">
-      {/* Modal */}
-      {showModal && (
-        <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 backdrop-blur-sm">
-          <div className="bg-slate-800 p-6 rounded-2xl w-full max-w-md border border-slate-700 shadow-2xl transform transition-all scale-100">
-            <h3 className="text-xl font-bold mb-4">Register New Plate</h3>
-            <form onSubmit={handleRegister} className="space-y-4">
-              <div>
-                <label className="block text-sm text-slate-400 mb-1">Plate Number</label>
-                <input
-                  autoFocus
-                  type="text"
-                  value={newPlate.number}
-                  onChange={e => setNewPlate({ ...newPlate, number: e.target.value.toUpperCase() })}
-                  className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 focus:ring-2 focus:ring-blue-500 outline-none font-mono uppercase"
-                  placeholder="ABCD12"
-                />
+    <BrowserRouter>
+      <Routes>
+        <Route
+          path="/login"
+          element={
+            !token ? (
+              <Login
+                setToken={(t) => setToken(t)}
+                setUserRole={(r) => setUserRole(r)}
+                setUsername={(u) => setUsername(u)} // Adding this prop to Login might be needed
+              />
+            ) : (
+              <Navigate to={userRole === 'ADMIN' ? '/admin' : '/user'} replace />
+            )
+          }
+        />
+
+        <Route
+          path="/admin"
+          element={
+            <ProtectedRoute allowedRoles={['ADMIN']}>
+              <div className="relative">
+                <button onClick={handleLogout} className="absolute top-4 right-4 text-slate-400 hover:text-white z-50">Logout</button>
+                <AdminDashboard token={token} />
               </div>
-              <div>
-                <label className="block text-sm text-slate-400 mb-1">Owner Name</label>
-                <input
-                  type="text"
-                  value={newPlate.owner}
-                  onChange={e => setNewPlate({ ...newPlate, owner: e.target.value })}
-                  className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 focus:ring-2 focus:ring-blue-500 outline-none"
-                  placeholder="John Doe"
-                />
+            </ProtectedRoute>
+          }
+        />
+
+        <Route
+          path="/user"
+          element={
+            <ProtectedRoute allowedRoles={['USER', 'ADMIN']}> {/* Admin can view user db too usually, but separate for now */}
+              <div className="relative">
+                <button onClick={handleLogout} className="absolute top-4 right-4 text-slate-400 hover:text-white z-50">Logout</button>
+                <UserDashboard token={token} username={username} />
               </div>
-              <div className="flex space-x-3 mt-6">
-                <button
-                  type="button"
-                  onClick={() => setShowModal(false)}
-                  className="flex-1 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg font-medium transition-colors"
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  className="flex-1 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg font-medium transition-colors"
-                >
-                  Register
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      )}
-      <div className="max-w-7xl mx-auto space-y-8">
+            </ProtectedRoute>
+          }
+        />
 
-        {/* Header */}
-        <header className="flex items-center justify-between">
-          <div className="flex items-center space-x-3">
-            <div className="p-3 bg-blue-600 rounded-lg">
-              <Car size={32} />
-            </div>
-            <div>
-              <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-cyan-300 bg-clip-text text-transparent">
-                Control Patente AI
-              </h1>
-              <p className="text-slate-400">Real-time ALPR Monitoring System</p>
-            </div>
-          </div>
-          <div className="flex items-center space-x-2 text-sm text-slate-400">
-            <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
-            <span>System Online</span>
-          </div>
-        </header>
-
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-
-          {/* Main Feed Section (Live / History) */}
-          <div className="lg:col-span-2 space-y-6">
-            <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]">
-
-              {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>
-          </div>
-
-          {/* Database / Stats */}
-          <div className="space-y-6">
-            <h2 className="text-xl font-semibold flex items-center space-x-2">
-              <CheckCircle className="text-green-400" />
-              <span>Registered Plates</span>
-            </h2>
-
-            <div className="bg-slate-800/50 rounded-2xl p-6 border border-slate-700/50 backdrop-blur-sm max-h-[600px] overflow-y-auto">
-              {loading ? (
-                <p className="text-center text-slate-500">Loading database...</p>
-              ) : (
-                <div className="space-y-3">
-                  {plates.map((p) => (
-                    <div key={p.id} className="flex items-center justify-between p-3 bg-slate-800/80 rounded-lg border border-slate-700/50">
-                      <div>
-                        <div className="font-mono font-bold text-slate-200">{p.number}</div>
-                        <div className="text-xs text-slate-400">{p.owner || 'Unknown Owner'}</div>
-                      </div>
-                      <span className="text-xs font-medium text-green-400 bg-green-500/10 px-2 py-1 rounded">
-                        {p.status}
-                      </span>
-                    </div>
-                  ))}
-                  {plates.length === 0 && (
-                    <p className="text-center text-slate-500 text-sm">No plates registered.</p>
-                  )}
-                </div>
-              )}
-
-              <button
-                className="w-full mt-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg font-medium transition-colors text-sm"
-                onClick={() => setShowModal(true)}
-              >
-                + Register New Plate
-              </button>
-            </div>
-          </div>
-        </div>
-
-      </div>
-    </div>
-  )
+        <Route path="/" element={<Navigate to="/login" replace />} />
+      </Routes>
+    </BrowserRouter>
+  );
 }
 
-export default App
+export default App;

frontend/src/pages/AdminDashboard.jsx

@@ -0,0 +1,202 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Users, CheckCircle, XCircle, Shield, Trash2 } from 'lucide-react';
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';
+
+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'
+
+    useEffect(() => {
+        fetchData();
+    }, [token]);
+
+    const fetchData = async () => {
+        try {
+            const authHeader = { headers: { Authorization: `Bearer ${token}` } };
+            const [usersRes, platesRes] = await Promise.all([
+                axios.get(`${API_URL}/api/auth`, authHeader).catch(err => ({ data: [] })),
+                axios.get(`${API_URL}/api/plates`, authHeader)
+            ]);
+            setUsers(usersRes.data);
+            setPlates(platesRes.data);
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
+    const handleCreateUser = async (e) => {
+        e.preventDefault();
+        try {
+            await axios.post(`${API_URL}/api/auth/register`, newUser, {
+                headers: { Authorization: `Bearer ${token}` }
+            });
+            setNewUser({ username: '', password: '', role: 'USER' });
+            fetchData();
+            alert('User created');
+        } catch (err) {
+            alert('Error: ' + err.message);
+        }
+    };
+
+    const handleDeleteUser = async (id) => {
+        if (!confirm('Area you sure?')) return;
+        try {
+            await axios.delete(`${API_URL}/api/auth/${id}`, {
+                headers: { Authorization: `Bearer ${token}` }
+            });
+            fetchData();
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
+    const handleApprovePlate = async (id, status) => {
+        try {
+            await axios.put(`${API_URL}/api/plates/${id}/approve`, { status }, {
+                headers: { Authorization: `Bearer ${token}` }
+            });
+            fetchData();
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
+    return (
+        <div className="min-h-screen bg-slate-900 text-slate-100 p-8">
+            <div className="max-w-7xl mx-auto space-y-8">
+                <header className="flex items-center justify-between">
+                    <h1 className="text-3xl font-bold flex items-center gap-3">
+                        <Shield className="text-purple-500" />
+                        Admin Portal
+                    </h1>
+                    <div className="flex bg-slate-800 rounded-lg p-1">
+                        <button
+                            onClick={() => setActiveTab('plates')}
+                            className={`px-4 py-2 rounded-md transition-all ${activeTab === 'plates' ? 'bg-purple-600' : 'hover:text-purple-400'}`}
+                        >
+                            Plate Approvals
+                        </button>
+                        <button
+                            onClick={() => setActiveTab('users')}
+                            className={`px-4 py-2 rounded-md transition-all ${activeTab === 'users' ? 'bg-purple-600' : 'hover:text-purple-400'}`}
+                        >
+                            User Management
+                        </button>
+                    </div>
+                </header>
+
+                {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>
+                        <div className="space-y-4">
+                            {plates.filter(p => p.status === 'PENDING').length === 0 && (
+                                <p className="text-slate-500">No pending plates.</p>
+                            )}
+                            {plates.filter(p => p.status === 'PENDING').map(plate => (
+                                <div key={plate.id} className="flex items-center justify-between p-4 bg-slate-900 rounded-xl border border-slate-700">
+                                    <div>
+                                        <div className="font-mono text-xl font-bold">{plate.number}</div>
+                                        <div className="text-sm text-slate-400">Owner: {plate.owner} | Added by: {plate.addedBy?.username || 'Unknown'}</div>
+                                    </div>
+                                    <div className="flex gap-2">
+                                        <button
+                                            onClick={() => handleApprovePlate(plate.id, 'ALLOWED')}
+                                            className="px-4 py-2 bg-green-600 hover:bg-green-500 rounded-lg text-sm font-bold flex items-center gap-2"
+                                        >
+                                            <CheckCircle size={16} /> Approve
+                                        </button>
+                                        <button
+                                            onClick={() => handleApprovePlate(plate.id, 'DENIED')}
+                                            className="px-4 py-2 bg-red-600 hover:bg-red-500 rounded-lg text-sm font-bold flex items-center gap-2"
+                                        >
+                                            <XCircle size={16} /> Deny
+                                        </button>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+
+                        <h2 className="text-xl font-semibold mt-10 mb-6">All Plates</h2>
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                            {plates.filter(p => p.status !== 'PENDING').map(plate => (
+                                <div key={plate.id} className="p-4 bg-slate-900 rounded-xl border border-slate-700 opacity-75 hover:opacity-100 transition-opacity">
+                                    <div className="flex justify-between items-start">
+                                        <div>
+                                            <div className="font-mono text-lg font-bold">{plate.number}</div>
+                                            <div className="text-xs text-slate-500">{plate.owner}</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}
+                                        </span>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+
+                {activeTab === 'users' && (
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                        <div className="bg-slate-800 rounded-2xl p-6 border border-slate-700">
+                            <h3 className="text-xl font-bold mb-4">Create User</h3>
+                            <form onSubmit={handleCreateUser} className="space-y-4">
+                                <input
+                                    className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3"
+                                    placeholder="Username"
+                                    value={newUser.username}
+                                    onChange={e => setNewUser({ ...newUser, username: e.target.value })}
+                                />
+                                <input
+                                    className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3"
+                                    type="password"
+                                    placeholder="Password"
+                                    value={newUser.password}
+                                    onChange={e => setNewUser({ ...newUser, password: e.target.value })}
+                                />
+                                <select
+                                    className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3"
+                                    value={newUser.role}
+                                    onChange={e => setNewUser({ ...newUser, role: e.target.value })}
+                                >
+                                    <option value="USER">User</option>
+                                    <option value="ADMIN">Admin</option>
+                                </select>
+                                <button className="w-full py-3 bg-purple-600 hover:bg-purple-500 rounded-lg font-bold">Create User</button>
+                            </form>
+                        </div>
+
+                        <div className="md:col-span-2 bg-slate-800 rounded-2xl p-6 border border-slate-700">
+                            <h3 className="text-xl font-bold mb-4">Existing Users</h3>
+                            <div className="space-y-3">
+                                {users.map(u => (
+                                    <div key={u.id} className="flex items-center justify-between p-4 bg-slate-900 rounded-xl">
+                                        <div className="flex items-center gap-4">
+                                            <div className="w-10 h-10 bg-slate-700 rounded-full flex items-center justify-center font-bold">
+                                                {u.username[0].toUpperCase()}
+                                            </div>
+                                            <div>
+                                                <div className="font-bold">{u.username}</div>
+                                                <div className="text-xs text-slate-500">{u.role}</div>
+                                            </div>
+                                        </div>
+                                        {u.username !== 'admin' && (
+                                            <button onClick={() => handleDeleteUser(u.id)} className="text-red-400 hover:text-red-300">
+                                                <Trash2 size={20} />
+                                            </button>
+                                        )}
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default AdminDashboard;

frontend/src/pages/Login.jsx

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';
+
+function Login({ setToken, setUserRole }) {
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const navigate = useNavigate();
+
+    const handleLogin = async (e) => {
+        e.preventDefault();
+        try {
+            const res = await axios.post(`${API_URL}/api/auth/login`, { username, password });
+            const { token, role, username: user } = res.data;
+
+            localStorage.setItem('token', token);
+            localStorage.setItem('role', role);
+            localStorage.setItem('username', user);
+
+            setToken(token);
+            setUserRole(role);
+
+            if (role === 'ADMIN') {
+                navigate('/admin');
+            } else {
+                navigate('/user');
+            }
+        } catch (err) {
+            alert('Login failed: ' + (err.response?.data?.error || err.message));
+        }
+    };
+
+    return (
+        <div className="min-h-screen bg-slate-900 flex items-center justify-center p-4">
+            <div className="bg-slate-800 p-8 rounded-2xl w-full max-w-md border border-slate-700 shadow-2xl">
+                <h2 className="text-3xl font-bold text-white mb-6 text-center">Control Patente AI</h2>
+                <form onSubmit={handleLogin} className="space-y-6">
+                    <div>
+                        <label className="block text-slate-400 mb-2">Username</label>
+                        <input
+                            type="text"
+                            value={username}
+                            onChange={(e) => setUsername(e.target.value)}
+                            className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white focus:ring-2 focus:ring-blue-500 outline-none"
+                        />
+                    </div>
+                    <div>
+                        <label className="block text-slate-400 mb-2">Password</label>
+                        <input
+                            type="password"
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white focus:ring-2 focus:ring-blue-500 outline-none"
+                        />
+                    </div>
+                    <button
+                        type="submit"
+                        className="w-full py-3 bg-blue-600 hover:bg-blue-500 rounded-lg font-bold text-white transition-colors"
+                    >
+                        Login
+                    </button>
+                </form>
+            </div>
+        </div>
+    );
+}
+
+export default Login;

frontend/src/pages/UserDashboard.jsx

@@ -0,0 +1,160 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Car, Clock, CheckCircle, AlertCircle } from 'lucide-react';
+import io from 'socket.io-client';
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';
+const socket = io(API_URL);
+
+function UserDashboard({ token, username }) {
+    const [plates, setPlates] = useState([]);
+    const [newPlate, setNewPlate] = useState({ number: '', owner: '' });
+    const [detections, setDetections] = useState([]);
+
+    useEffect(() => {
+        fetchPlates();
+
+        // Listen for live detections (optional, maybe user wants to see their plates detected?)
+        // For now, let's show all global detections but emphasize this is a "Portal"
+        socket.on('new_detection', (data) => {
+            setDetections(prev => [data, ...prev].slice(0, 5));
+        });
+
+        return () => socket.off('new_detection');
+    }, [token]);
+
+    const fetchPlates = async () => {
+        try {
+            const res = await axios.get(`${API_URL}/api/plates`, {
+                headers: { Authorization: `Bearer ${token}` }
+            });
+            // Filter plates added by this user (if backend doesn't filter, we filter here)
+            // Note: Backend currently returns ALL plates. We can filter on client for now.
+            const myPlates = res.data.filter(p => p.addedBy?.username === username);
+            setPlates(myPlates);
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
+    const handleRegister = async (e) => {
+        e.preventDefault();
+        try {
+            await axios.post(`${API_URL}/api/plates`, {
+                number: newPlate.number.toUpperCase(),
+                owner: newPlate.owner
+            }, {
+                headers: { Authorization: `Bearer ${token}` }
+            });
+            setNewPlate({ number: '', owner: '' });
+            fetchPlates();
+            alert('Plate registered! Waiting for admin approval.');
+        } catch (err) {
+            alert('Error: ' + err.message);
+        }
+    };
+
+    return (
+        <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 */}
+                <div className="lg:col-span-2 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}
+                        </h1>
+                        <p className="text-slate-400">Manage your vehicles and access.</p>
+                    </header>
+
+                    <div className="bg-slate-800 rounded-2xl p-6 border border-slate-700">
+                        <h2 className="text-xl font-semibold mb-6 flex items-center gap-2">
+                            <Car className="text-blue-400" /> My Registered Plates
+                        </h2>
+
+                        <div className="space-y-4">
+                            {plates.length === 0 && <p className="text-slate-500">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>
+                                        <div className="font-mono text-xl font-bold tracking-wider">{plate.number}</div>
+                                        <div className="text-sm text-slate-400">{plate.owner}</div>
+                                    </div>
+                                    <div>
+                                        {plate.status === 'ALLOWED' && (
+                                            <span className="flex items-center gap-1 text-green-400 bg-green-900/30 px-3 py-1 rounded-full text-xs font-bold">
+                                                <CheckCircle size={14} /> ACTIVE
+                                            </span>
+                                        )}
+                                        {plate.status === 'PENDING' && (
+                                            <span className="flex items-center gap-1 text-yellow-400 bg-yellow-900/30 px-3 py-1 rounded-full text-xs font-bold">
+                                                <Clock size={14} /> PENDING
+                                            </span>
+                                        )}
+                                        {plate.status === 'DENIED' && (
+                                            <span className="flex items-center gap-1 text-red-400 bg-red-900/30 px-3 py-1 rounded-full text-xs font-bold">
+                                                <AlertCircle size={14} /> DENIED
+                                            </span>
+                                        )}
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className="bg-slate-800 rounded-2xl p-6 border border-slate-700">
+                        <h2 className="text-xl font-semibold mb-4">Request New Access</h2>
+                        <form onSubmit={handleRegister} className="flex gap-4">
+                            <input
+                                className="flex-1 bg-slate-900 border border-slate-700 rounded-lg p-3 font-mono uppercase"
+                                placeholder="Plate Number (e.g. ABCD12)"
+                                value={newPlate.number}
+                                onChange={e => setNewPlate({ ...newPlate, number: e.target.value })}
+                                required
+                            />
+                            <input
+                                className="flex-1 bg-slate-900 border border-slate-700 rounded-lg p-3"
+                                placeholder="Owner Name"
+                                value={newPlate.owner}
+                                onChange={e => setNewPlate({ ...newPlate, owner: e.target.value })}
+                                required
+                            />
+                            <button className="bg-blue-600 hover:bg-blue-500 px-6 rounded-lg font-bold transition-colors">
+                                Submit
+                            </button>
+                        </form>
+                    </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>
+    );
+}
+
+export default UserDashboard;