Correccion de dashboar usuarios y admins
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user