Intento de Creador
This commit is contained in:
@@ -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",
|
||||
|
||||
@@ -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;
|
||||
|
||||
202
frontend/src/pages/AdminDashboard.jsx
Normal file
202
frontend/src/pages/AdminDashboard.jsx
Normal file
@@ -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;
|
||||
70
frontend/src/pages/Login.jsx
Normal file
70
frontend/src/pages/Login.jsx
Normal file
@@ -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;
|
||||
160
frontend/src/pages/UserDashboard.jsx
Normal file
160
frontend/src/pages/UserDashboard.jsx
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user