Add from user rm aproved/denied plates/rut

backend/src/index.js

@@ -94,16 +94,49 @@ app.put('/api/plates/:id/approve', authenticateToken, isAdmin, async (req, res)
 });
 
 // Admin: Delete Plate (Optional but good to have)
-app.delete('/api/plates/:id', authenticateToken, isAdmin, async (req, res) => {
+// Delete Plate (Admin or Owner)
+app.delete('/api/plates/:id', authenticateToken, async (req, res) => {
   const { id } = req.params;
   try {
+    const plate = await prisma.plate.findUnique({ where: { id: parseInt(id) } });
+    if (!plate) return res.status(404).json({ error: 'Plate not found' });
+
+    // Check permissions
+    if (req.user.role !== 'ADMIN' && plate.addedById !== req.user.id) {
+      return res.status(403).json({ error: 'Unauthorized' });
+    }
+
     await prisma.plate.delete({ where: { id: parseInt(id) } });
+
+    io.emit('plate_deleted', { id: parseInt(id) });
+
     res.json({ message: 'Plate deleted' });
   } catch (err) {
     res.status(500).json({ error: err.message });
   }
 });
 
+// Delete Person (Admin or Owner)
+app.delete('/api/people/:id', authenticateToken, async (req, res) => {
+  const { id } = req.params;
+  try {
+    const person = await prisma.person.findUnique({ where: { id: parseInt(id) } });
+    if (!person) return res.status(404).json({ error: 'Person not found' });
+
+    if (req.user.role !== 'ADMIN' && person.addedById !== req.user.id) {
+      return res.status(403).json({ error: 'Unauthorized' });
+    }
+
+    await prisma.person.delete({ where: { id: parseInt(id) } });
+
+    io.emit('person_deleted', { id: parseInt(id) });
+
+    res.json({ message: 'Person 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

frontend/src/pages/AdminDashboard.jsx

@@ -34,11 +34,17 @@ function AdminDashboard({ token }) {
         // Real-time updates for approvals
         socket.on('new_plate_registered', () => fetchData());
         socket.on('new_person_registered', () => fetchData());
+        socket.on('plate_status_updated', () => fetchData()); // Reused for consistency
+        socket.on('plate_deleted', () => fetchData());
+        socket.on('person_deleted', () => fetchData());
 
         return () => {
             socket.off('new_detection');
             socket.off('new_plate_registered');
             socket.off('new_person_registered');
+            socket.off('plate_status_updated');
+            socket.off('plate_deleted');
+            socket.off('person_deleted');
         };
     }, [token]);
 

frontend/src/pages/UserDashboard.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import axios from 'axios';
-import { Car, Clock, CheckCircle, AlertCircle, Users } from 'lucide-react';
+import { Car, Clock, CheckCircle, AlertCircle, Users, Trash2, PlusCircle, UserPlus, AlertTriangle } from 'lucide-react';
 import io from 'socket.io-client';
 
 const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';
@@ -76,7 +76,7 @@ function UserDashboard({ token, username }) {
         }
     };
 
-    const handleRegisterPerson = async (e) => {
+    const handleAddPerson = async (e) => {
         e.preventDefault();
         try {
             await axios.post(`${API_URL}/api/people`, newPerson, {
@@ -90,9 +90,33 @@ function UserDashboard({ token, username }) {
         }
     };
 
+    const handleDeletePlate = async (id) => {
+        if (!confirm('Are you sure you want to delete this plate?')) return;
+        try {
+            await axios.delete(`${API_URL}/api/plates/${id}`, {
+                headers: { Authorization: `Bearer ${token}` }
+            });
+            fetchPlates();
+        } catch (err) {
+            alert(err.response?.data?.error || err.message);
+        }
+    };
+
+    const handleDeletePerson = async (id) => {
+        if (!confirm('Are you sure you want to delete this visitor?')) return;
+        try {
+            await axios.delete(`${API_URL}/api/people/${id}`, {
+                headers: { Authorization: `Bearer ${token}` }
+            });
+            fetchPeople();
+        } catch (err) {
+            alert(err.response?.data?.error || err.message);
+        }
+    };
+
     return (
         <div className="min-h-screen bg-slate-900 text-slate-100 p-8">
-            <div className="max-w-6xl mx-auto space-y-12">
+            <div className="max-w-6xl mx-auto 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">
@@ -101,81 +125,137 @@ function UserDashboard({ token, username }) {
                     <p className="text-slate-400">Manage your vehicles and visitors.</p>
                 </header>
 
-                {/* Plates Section */}
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                    {/* Plate Registration Form (Existing) */}
                     <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">
+                        <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
-                        <Car className="text-blue-400" /> My Registered Plates
+                            <PlusCircle className="text-blue-500" /> Register New Plate
                         </h2>
-
+                        <form onSubmit={handleRegister} className="space-y-4">
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
-                        {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>
-                                    <div className="font-mono text-xl font-bold tracking-wider">{plate.number}</div>
-                                    <div className="text-sm text-slate-400">{plate.owner}</div>
-                                </div>
-                                <span className={`text-xs px-2 py-1 rounded font-bold ${plate.status === 'ALLOWED' ? 'bg-green-900 text-green-300' : plate.status === 'PENDING' ? 'bg-yellow-900 text-yellow-300' : 'bg-red-900 text-red-300'}`}>
-                                    {plate.status}
-                                </span>
-                            </div>
-                        ))}
-                    </div>
-
-                    <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"
+                                className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 font-mono text-lg"
-                            placeholder="Plate Number (e.g. ABCD12)"
+                                placeholder="Plate Number (e.g. AA-BB-11)"
                                 value={newPlate.number}
-                            onChange={e => setNewPlate({ ...newPlate, number: e.target.value })}
+                                onChange={e => setNewPlate({ ...newPlate, number: e.target.value.toUpperCase() })}
                                 required
                             />
                             <input
-                            className="flex-1 bg-slate-900 border border-slate-700 rounded-lg p-3"
+                                className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3"
-                            placeholder="Owner Name"
+                                placeholder="Owner / Description"
                                 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">
+                            <button className="w-full py-3 bg-blue-600 hover:bg-blue-500 rounded-lg font-bold">Register Plate</button>
-                            Submit
-                        </button>
                         </form>
                     </div>
 
-                {/* Visitors Section */}
+                    {/* Visitor Registration Form (Existing) */}
                     <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">
+                        <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
-                        <Users className="text-purple-400" /> My Visitors
+                            <UserPlus className="text-purple-500" /> Register Visitor
                         </h2>
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
+                        <form onSubmit={handleAddPerson} className="space-y-4">
-                        {people.length === 0 && <p className="text-slate-500 col-span-3">No visitors registered.</p>}
+                            <div className="grid grid-cols-2 gap-4">
-                        {people.map(p => (
+                                <input
-                            <div key={p.id} className="p-4 bg-slate-900 rounded-xl border border-slate-700">
+                                    className="bg-slate-900 border border-slate-700 rounded-lg p-3"
-                                <div className="flex justify-between">
+                                    placeholder="RUT (12345678-9)"
-                                    <div className="font-bold">{p.name}</div>
+                                    value={newPerson.rut}
-                                    <span className={`text-xs px-2 py-1 rounded font-bold ${p.status === 'APPROVED' ? 'bg-green-900 text-green-300' : p.status === 'PENDING' ? 'bg-yellow-900 text-yellow-300' : 'bg-red-900 text-red-300'}`}>
+                                    onChange={e => setNewPerson({ ...newPerson, rut: e.target.value })}
-                                        {p.status}
+                                    required
-                                    </span>
+                                />
+                                <select
+                                    className="bg-slate-900 border border-slate-700 rounded-lg p-3"
+                                    value={newPerson.durationDays}
+                                    onChange={e => setNewPerson({ ...newPerson, durationDays: parseInt(e.target.value) })}
+                                    required
+                                >
+                                    <option value="1">1 Day Access</option>
+                                    <option value="2">2 Days Access</option>
+                                    <option value="7">1 Week Access</option>
+                                </select>
                             </div>
-                                <div className="text-sm text-slate-400 font-mono mt-1">{p.rut}</div>
+                            <input
-                                <div className="text-xs text-slate-500 mt-2">
+                                className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3"
-                                    Until: {new Date(p.endDate).toLocaleDateString()}
+                                placeholder="Full Name"
+                                value={newPerson.name}
+                                onChange={e => setNewPerson({ ...newPerson, name: e.target.value })}
+                                required
+                            />
+                            <button className="w-full py-3 bg-purple-600 hover:bg-purple-500 rounded-lg font-bold">Register Visitor</button>
+                        </form>
+                    </div>
+                </div>
+
+                {/* My Plates List */}
+                <div>
+                    <h2 className="text-2xl font-bold mb-4">My Registered Plates</h2>
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                        {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 group">
+                                <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 className="flex items-center gap-3">
+                                    {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">
+                                            <AlertTriangle size={14} /> DENIED
+                                        </span>
+                                    )}
+                                    <button
+                                        onClick={() => handleDeletePlate(plate.id)}
+                                        className="text-slate-600 hover:text-red-500 transition-colors p-1"
+                                        title="Delete Plate"
+                                    >
+                                        <Trash2 size={18} />
+                                    </button>
                                 </div>
                             </div>
                         ))}
                     </div>
+                </div>
 
-                    <form onSubmit={handleRegisterPerson} className="flex gap-4 flex-wrap">
+                {/* My Visitors List */}
-                        <input className="flex-1 min-w-[200px] bg-slate-900 border border-slate-700 rounded p-3" placeholder="Full Name" value={newPerson.name} onChange={e => setNewPerson({ ...newPerson, name: e.target.value })} required />
+                <div>
-                        <input className="flex-1 min-w-[150px] bg-slate-900 border border-slate-700 rounded p-3" placeholder="RUT (12345678-9)" value={newPerson.rut} onChange={e => setNewPerson({ ...newPerson, rut: e.target.value })} required />
+                    <h2 className="text-2xl font-bold mb-4">My Visitors</h2>
-                        <select className="bg-slate-900 border border-slate-700 rounded p-3" value={newPerson.durationDays} onChange={e => setNewPerson({ ...newPerson, durationDays: parseInt(e.target.value) })} required>
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                            <option value="1">1 Day</option>
+                        {people.length === 0 && <p className="text-slate-500 col-span-3">No visitors registered.</p>}
-                            <option value="2">2 Days</option>
+                        {people.map(p => (
-                            <option value="7">1 Week</option>
+                            <div key={p.id} className="flex items-center justify-between p-4 bg-slate-900 rounded-xl border border-slate-700">
-                        </select>
+                                <div>
-                        <button className="bg-purple-600 hover:bg-purple-500 px-6 rounded-lg font-bold transition-colors">Add Visitor</button>
+                                    <div className="font-bold">{p.name}</div>
-                    </form>
+                                    <div className="text-sm text-slate-400 font-mono">{p.rut}</div>
+                                    <div className="text-xs text-slate-500 mt-1">Until: {new Date(p.endDate).toLocaleDateString()}</div>
+                                </div>
+                                <div className="flex items-center gap-3">
+                                    <span className={`px-2 py-1 rounded text-xs font-bold ${p.status === 'APPROVED' ? 'bg-green-900 text-green-300' :
+                                            p.status === 'DENIED' ? 'bg-red-900 text-red-300' : 'bg-yellow-900 text-yellow-300'
+                                        }`}>
+                                        {p.status}
+                                    </span>
+                                    <button
+                                        onClick={() => handleDeletePerson(p.id)}
+                                        className="text-slate-600 hover:text-red-500 transition-colors p-1"
+                                        title="Delete Visitor"
+                                    >
+                                        <Trash2 size={18} />
+                                    </button>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
                 </div>
 
             </div>