raven/ControlPatente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Correccion de dashboar usuarios y admins

Browse Source
This commit is contained in:
raven
2025-12-28 19:27:51 -03:00
parent ad52d300ad
commit b91de06e29
3 changed files with 128 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
backend/src/index.js
View File

@@ -31,11 +31,11 @@ app.use('/api/auth', authRoutes);
// Plates CRUD
app.get('/api/plates', authenticateToken, async (req, res) => {
try {
// Users see their own plates? Or all?
// 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.
// Filter based on role
const where = req.user.role === 'ADMIN' ? {} : { addedById: req.user.id };
const plates = await prisma.plate.findMany({
where,
include: { addedBy: { select: { username: true } } }
});
res.json(plates);

124
frontend/src/pages/AdminDashboard.jsx
View File

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

34
frontend/src/pages/UserDashboard.jsx
View File

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