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

Add Spanish/English languaje

Browse Source
This commit is contained in:
raven
2026-01-04 21:50:22 -03:00
parent f9f841e4f1
commit 7df80ebcff
6 changed files with 313 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/App.jsx
View File

@@ -3,6 +3,7 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Login from './pages/Login'; import Login from './pages/Login';
import AdminDashboard from './pages/AdminDashboard'; import AdminDashboard from './pages/AdminDashboard';
import UserDashboard from './pages/UserDashboard'; import UserDashboard from './pages/UserDashboard';
import './i18n'; // Initialize translations
function App() { function App() {
const [token, setToken] = useState(localStorage.getItem('token')); const [token, setToken] = useState(localStorage.getItem('token'));

24
frontend/src/components/LanguageSelector.jsx Normal file
View File

@@ -0,0 +1,24 @@
import { useTranslation } from 'react-i18next';
import { Globe } from 'lucide-react';
function LanguageSelector() {
const { i18n } = useTranslation();
const toggleLanguage = () => {
const newLang = i18n.language === 'es' ? 'en' : 'es';
i18n.changeLanguage(newLang);
};
return (
<button
onClick={toggleLanguage}
className="flex items-center gap-2 px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-md text-sm text-slate-200 transition-colors"
title="Switch Language / Cambiar Idioma"
>
<Globe size={16} />
<span className="font-bold uppercase">{i18n.language}</span>
</button>
);
}
export default LanguageSelector;

143
frontend/src/i18n.js Normal file
View File

@@ -0,0 +1,143 @@
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
// Translations
const resources = {
en: {
translation: {
// General
"title": "VigIA Control",
"logout": "Logout",
"login_title": "Login",
"login_subtitle": "Sign in to access the control panel",
"username": "Username",
"password": "Password",
"sign_in": "Sign In",
"welcome": "Welcome",
// Admin Dashboard
"monitor_area": "Monitor Area",
"plate_approvals": "Plate Approvals",
"user_management": "User Management",
"visitor_approvals": "Visitor Approvals",
"pending_approvals": "Pending Approvals",
"approve": "Approve",
"deny": "Deny",
"all_plates": "All Registered Plates",
"create_user": "Create New User",
"user_list": "User List",
"delete": "Delete",
// User Dashboard
"my_plates_title": "My Registered Plates",
"register_plate": "Register New Plate",
"plate_number": "Plate Number (e.g. AA-BB-11)",
"owner_desc": "Owner / Description",
"submit_plate": "Register Plate",
"my_visitors_title": "My Visitors",
"register_visitor": "Register Visitor",
"visitor_rut": "RUT (12345678-9)",
"full_name": "Full Name",
"submit_visitor": "Register Visitor",
"access_days": "Access Duration",
"1_day": "1 Day Access",
"2_days": "2 Days Access",
"1_week": "1 Week Access",
// Status
"active": "ACTIVE",
"pending": "PENDING",
"denied": "DENIED",
"approved": "APPROVED",
// Messages
"confirm_delete_plate": "Are you sure you want to delete this plate?",
"confirm_delete_visitor": "Are you sure you want to delete this visitor?",
// Visitor Check
"visitor_check": "Visitor Check",
"check_status": "Check Status",
"enter_rut": "Enter RUT",
"visitor_found": "Visitor Found",
"visitor_not_found": "Visitor Not Found",
"access_granted_until": "Access granted until",
"registered_by": "Registered by",
"no_record": "No record found for this RUT."
}
},
es: {
translation: {
// General
"title": "Control VigIA",
"logout": "Cerrar sesión",
"login_title": "Iniciar Sesión",
"login_subtitle": "Ingresa para acceder al panel de control",
"username": "Nombre de usuario",
"password": "Contraseña",
"sign_in": "Ingresar",
"welcome": "Bienvenido",
// Admin Dashboard
"monitor_area": "Monitor",
"plate_approvals": "Aprobación Patentes",
"user_management": "Gestión Usuarios",
"visitor_approvals": "Aprobación Visitas",
"pending_approvals": "Aprobaciones Pendientes",
"approve": "Aprobar",
"deny": "Rechazar",
"all_plates": "Todas las Patentes",
"create_user": "Crear Usuario",
"user_list": "Lista de Usuarios",
"delete": "Eliminar",
// User Dashboard
"my_plates_title": "Mis Patentes Registradas",
"register_plate": "Registrar Nueva Patente",
"plate_number": "Patente (ej. AA-BB-11)",
"owner_desc": "Propietario / Descripción",
"submit_plate": "Registrar Patente",
"my_visitors_title": "Mis Visitas",
"register_visitor": "Registrar Visita",
"visitor_rut": "RUT (12345678-9)",
"full_name": "Nombre Completo",
"submit_visitor": "Registrar Visita",
"access_days": "Duración Acceso",
"1_day": "Acceso 1 Día",
"2_days": "Acceso 2 Días",
"1_week": "Acceso 1 Semana",
// Status
"active": "ACTIVO",
"pending": "PENDIENTE",
"denied": "DENEGADO",
"approved": "APROBADO",
// Messages
"confirm_delete_plate": "¿Estás seguro de que quieres eliminar esta patente?",
"confirm_delete_visitor": "¿Estás seguro de que quieres eliminar esta visita?",
// Visitor Check
"visitor_check": "Consultar Visita",
"check_status": "Verificar Estado",
"enter_rut": "Ingresar RUT",
"visitor_found": "Visita Encontrada",
"visitor_not_found": "Visita No Encontrada",
"access_granted_until": "Acceso permitido hasta",
"registered_by": "Registrado por",
"no_record": "No se encontró registro para este RUT."
}
}
};
i18n
.use(initReactI18next)
.init({
resources,
lng: "es", // Default language
fallbackLng: "en",
interpolation: {
escapeValue: false
}
});
export default i18n;

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

@@ -1,12 +1,15 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
import io from 'socket.io-client'; import io from 'socket.io-client';
import { Users, CheckCircle, XCircle, Shield, Trash2, Camera, Clock, Calendar, AlertCircle } from 'lucide-react'; import { Users, CheckCircle, XCircle, Shield, Trash2, Camera, AlertCircle } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import LanguageSelector from '../components/LanguageSelector';
const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000'; const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';
const socket = io(API_URL); const socket = io(API_URL);
function AdminDashboard({ token }) { function AdminDashboard({ token }) {
const { t } = useTranslation();
const [users, setUsers] = useState([]); const [users, setUsers] = useState([]);
const [plates, setPlates] = useState([]); const [plates, setPlates] = useState([]);
const [newUser, setNewUser] = useState({ username: '', password: '', role: 'USER' }); const [newUser, setNewUser] = useState({ username: '', password: '', role: 'USER' });
@@ -162,30 +165,33 @@ function AdminDashboard({ token }) {
<header className="flex items-center justify-between"> <header className="flex items-center justify-between">
<h1 className="text-3xl font-bold flex items-center gap-3"> <h1 className="text-3xl font-bold flex items-center gap-3">
<Shield className="text-purple-500" /> <Shield className="text-purple-500" />
Admin Portal {t('title')}
</h1> </h1>
<div className="flex bg-slate-800 rounded-lg p-1"> <div className="flex items-center gap-4">
<button <div className="flex bg-slate-800 rounded-lg p-1">
onClick={() => setActiveTab('monitor')} <button
className={`px-4 py-2 rounded-md transition-all ${activeTab === 'monitor' ? 'bg-purple-600' : 'hover:text-purple-400'}`} onClick={() => setActiveTab('monitor')}
> className={`px-4 py-2 rounded-md transition-all ${activeTab === 'monitor' ? 'bg-purple-600' : 'hover:text-purple-400'}`}
Monitor Area >
</button> {t('monitor_area')}
<button </button>
onClick={() => setActiveTab('plates')} <button
className={`px-4 py-2 rounded-md transition-all ${activeTab === 'plates' ? 'bg-purple-600' : 'hover:text-purple-400'}`} onClick={() => setActiveTab('plates')}
> className={`px-4 py-2 rounded-md transition-all ${activeTab === 'plates' ? 'bg-purple-600' : 'hover:text-purple-400'}`}
Plate Approvals >
</button> {t('plate_approvals')}
<button </button>
onClick={() => setActiveTab('users')} <button
className={`px-4 py-2 rounded-md transition-all ${activeTab === 'users' ? 'bg-purple-600' : 'hover:text-purple-400'}`} onClick={() => setActiveTab('users')}
> className={`px-4 py-2 rounded-md transition-all ${activeTab === 'users' ? 'bg-purple-600' : 'hover:text-purple-400'}`}
User Management >
</button> {t('user_management')}
<button onClick={() => setActiveTab('visitors')} className={`px-4 py-2 rounded-md transition-all ${activeTab === 'visitors' ? 'bg-purple-600' : 'hover:text-purple-400'}`}> </button>
Visitor Approvals <button onClick={() => setActiveTab('visitors')} className={`px-4 py-2 rounded-md transition-all ${activeTab === 'visitors' ? 'bg-purple-600' : 'hover:text-purple-400'}`}>
</button> {t('visitor_approvals')}
</button>
</div>
<LanguageSelector />
</div> </div>
</header> </header>
@@ -193,7 +199,7 @@ function AdminDashboard({ token }) {
<div className="space-y-6"> <div className="space-y-6">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<h2 className="text-xl font-bold flex items-center gap-2"> <h2 className="text-xl font-bold flex items-center gap-2">
<Camera /> Live Monitor <Camera /> {t('monitor_area')}
</h2> </h2>
<div className="flex bg-slate-800 rounded p-1"> <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('live')} className={`px-3 py-1 rounded ${viewMode === 'live' ? 'bg-blue-600' : ''}`}>Live</button>
@@ -204,17 +210,17 @@ function AdminDashboard({ token }) {
{/* Visitor Lookup Banner */} {/* Visitor Lookup Banner */}
<div className="bg-slate-800 rounded-xl p-6 border border-slate-700"> <div className="bg-slate-800 rounded-xl p-6 border border-slate-700">
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2 text-slate-300"> <h3 className="text-lg font-semibold mb-4 flex items-center gap-2 text-slate-300">
<Shield size={20} /> Visitor Check <Shield size={20} /> {t('visitor_check')}
</h3> </h3>
<form onSubmit={handleSearchRut} className="flex gap-4"> <form onSubmit={handleSearchRut} className="flex gap-4">
<input <input
className="flex-1 bg-slate-900 border border-slate-600 rounded-lg px-4 py-3 font-mono text-lg tracking-wider uppercase focus:ring-2 focus:ring-blue-500 outline-none transition-all" className="flex-1 bg-slate-900 border border-slate-600 rounded-lg px-4 py-3 font-mono text-lg tracking-wider uppercase focus:ring-2 focus:ring-blue-500 outline-none transition-all"
placeholder="Enter RUT (e.g. 12345678-9)" placeholder={t('enter_rut')}
value={searchRut} value={searchRut}
onChange={e => setSearchRut(e.target.value)} onChange={e => setSearchRut(e.target.value)}
/> />
<button className="bg-blue-600 hover:bg-blue-500 text-white px-8 rounded-lg font-bold transition-all shadow-lg shadow-blue-900/50"> <button className="bg-blue-600 hover:bg-blue-500 text-white px-8 rounded-lg font-bold transition-all shadow-lg shadow-blue-900/50">
Check Status {t('check_status')}
</button> </button>
</form> </form>
@@ -233,12 +239,12 @@ function AdminDashboard({ token }) {
<CheckCircle size={32} /> <CheckCircle size={32} />
</div> </div>
<div> <div>
<h4 className="text-xl font-bold text-white mb-1">Access Authorized</h4> <h4 className="text-xl font-bold text-white mb-1">{t('visitor_found')}</h4>
<div className="space-y-1 text-slate-300"> <div className="space-y-1 text-slate-300">
<p className="flex items-center gap-2"><Users size={16} className="text-blue-400" /> Visitor: <span className="font-semibold text-white">{searchResult.data.name}</span></p> <p className="flex items-center gap-2"><Users size={16} className="text-blue-400" /> Visitor: <span className="font-semibold text-white">{searchResult.data.name}</span></p>
<p className="flex items-center gap-2"><Shield size={16} className="text-purple-400" /> Status: <span className="font-bold text-green-400">{searchResult.data.status}</span></p> <p className="flex items-center gap-2"><Shield size={16} className="text-purple-400" /> Status: <span className="font-bold text-green-400">{searchResult.data.status}</span></p>
<p className="text-sm text-slate-500 mt-2 border-t border-slate-700/50 pt-2"> <p className="text-sm text-slate-500 mt-2 border-t border-slate-700/50 pt-2">
Authorized by: <span className="text-slate-300 font-mono">@{searchResult.data.addedBy?.username || 'Unknown'}</span> {t('registered_by')}: <span className="text-slate-300 font-mono">@{searchResult.data.addedBy?.username || 'Unknown'}</span>
</p> </p>
</div> </div>
</div> </div>
@@ -249,8 +255,8 @@ function AdminDashboard({ token }) {
<AlertCircle size={32} /> <AlertCircle size={32} />
</div> </div>
<div> <div>
<h4 className="text-xl font-bold text-white mb-1">No Record Found</h4> <h4 className="text-xl font-bold text-white mb-1">{t('visitor_not_found')}</h4>
<p className="text-slate-300">This RUT is not listed in the visitor registry.</p> <p className="text-slate-300">{t('no_record')}</p>
</div> </div>
</div> </div>
)} )}
@@ -312,7 +318,7 @@ function AdminDashboard({ token }) {
{activeTab === 'plates' && ( {activeTab === 'plates' && (
<div className="bg-slate-800 rounded-2xl p-6 border border-slate-700"> <div className="bg-slate-800 rounded-2xl p-6 border border-slate-700">
<h2 className="text-xl font-semibold mb-6">Pending Approvals</h2> <h2 className="text-xl font-semibold mb-6">{t('pending_approvals')}</h2>
<div className="space-y-4"> <div className="space-y-4">
{plates.filter(p => p.status === 'PENDING').length === 0 && ( {plates.filter(p => p.status === 'PENDING').length === 0 && (
<p className="text-slate-500">No pending plates.</p> <p className="text-slate-500">No pending plates.</p>
@@ -328,20 +334,20 @@ function AdminDashboard({ token }) {
onClick={() => handleApprovePlate(plate.id, 'ALLOWED')} 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" 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 <CheckCircle size={16} /> {t('approve')}
</button> </button>
<button <button
onClick={() => handleApprovePlate(plate.id, 'DENIED')} 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" 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 <XCircle size={16} /> {t('deny')}
</button> </button>
</div> </div>
</div> </div>
))} ))}
</div> </div>
<h2 className="text-xl font-semibold mt-10 mb-6">All Plates</h2> <h2 className="text-xl font-semibold mt-10 mb-6">{t('all_plates')}</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{plates.filter(p => p.status !== 'PENDING').map(plate => ( {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 key={plate.id} className="p-4 bg-slate-900 rounded-xl border border-slate-700 opacity-75 hover:opacity-100 transition-opacity">
@@ -352,7 +358,7 @@ function AdminDashboard({ token }) {
<div className="text-xs text-slate-600 mt-1">Added by: {plate.addedBy?.username || 'System'}</div> <div className="text-xs text-slate-600 mt-1">Added by: {plate.addedBy?.username || 'System'}</div>
</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'}`}> <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} {t(plate.status.toLowerCase()) || plate.status}
</span> </span>
</div> </div>
</div> </div>
@@ -364,18 +370,18 @@ function AdminDashboard({ token }) {
{activeTab === 'users' && ( {activeTab === 'users' && (
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <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"> <div className="bg-slate-800 rounded-2xl p-6 border border-slate-700">
<h3 className="text-xl font-bold mb-4">Create User</h3> <h3 className="text-xl font-bold mb-4">{t('create_user')}</h3>
<form onSubmit={handleCreateUser} className="space-y-4"> <form onSubmit={handleCreateUser} className="space-y-4">
<input <input
className="w-full 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="Username" placeholder={t('username')}
value={newUser.username} value={newUser.username}
onChange={e => setNewUser({ ...newUser, username: e.target.value })} onChange={e => setNewUser({ ...newUser, username: e.target.value })}
/> />
<input <input
className="w-full 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"
type="password" type="password"
placeholder="Password" placeholder={t('password')}
value={newUser.password} value={newUser.password}
onChange={e => setNewUser({ ...newUser, password: e.target.value })} onChange={e => setNewUser({ ...newUser, password: e.target.value })}
/> />
@@ -387,12 +393,12 @@ function AdminDashboard({ token }) {
<option value="USER">User</option> <option value="USER">User</option>
<option value="ADMIN">Admin</option> <option value="ADMIN">Admin</option>
</select> </select>
<button className="w-full py-3 bg-purple-600 hover:bg-purple-500 rounded-lg font-bold">Create User</button> <button className="w-full py-3 bg-purple-600 hover:bg-purple-500 rounded-lg font-bold">{t('create_user')}</button>
</form> </form>
</div> </div>
<div className="md:col-span-2 bg-slate-800 rounded-2xl p-6 border border-slate-700"> <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> <h3 className="text-xl font-bold mb-4">{t('user_list')}</h3>
<div className="space-y-3"> <div className="space-y-3">
{users.map(u => ( {users.map(u => (
<div key={u.id} className="flex items-center justify-between p-4 bg-slate-900 rounded-xl"> <div key={u.id} className="flex items-center justify-between p-4 bg-slate-900 rounded-xl">
@@ -419,7 +425,7 @@ function AdminDashboard({ token }) {
{activeTab === 'visitors' && ( {activeTab === 'visitors' && (
<div className="bg-slate-800 rounded-2xl p-6 border border-slate-700"> <div className="bg-slate-800 rounded-2xl p-6 border border-slate-700">
<h2 className="text-xl font-bold mb-6">Visitor Approvals</h2> <h2 className="text-xl font-bold mb-6">{t('visitor_approvals')}</h2>
{Object.values(activePeople.filter(p => p.status === 'PENDING').reduce((acc, p) => { {Object.values(activePeople.filter(p => p.status === 'PENDING').reduce((acc, p) => {
const uId = p.addedById || 0; const uId = p.addedById || 0;
@@ -454,3 +460,5 @@ function AdminDashboard({ token }) {
} }
export default AdminDashboard; export default AdminDashboard;
export default AdminDashboard;

106
frontend/src/pages/Login.jsx
View File

@@ -1,65 +1,81 @@
import { useState } from 'react'; import { useState } from 'react';
import axios from 'axios'; import axios from 'axios';
import { useNavigate } from 'react-router-dom'; import { Lock, User } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import LanguageSelector from '../components/LanguageSelector';
const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000'; const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';
function Login({ setToken, setUserRole }) { function Login({ setToken, setUserRole, setUsername }) {
const [username, setUsername] = useState(''); const { t } = useTranslation();
const [password, setPassword] = useState(''); const [formData, setFormData] = useState({ username: '', password: '' });
const navigate = useNavigate(); const [error, setError] = useState('');
const handleLogin = async (e) => { const handleSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
try { try {
const res = await axios.post(`${API_URL}/api/auth/login`, { username, password }); const res = await axios.post(`${API_URL}/api/auth/login`, formData);
const { token, role, username: user } = res.data; localStorage.setItem('token', res.data.token);
localStorage.setItem('role', res.data.role);
localStorage.setItem('username', res.data.username);
localStorage.setItem('token', token); setToken(res.data.token);
localStorage.setItem('role', role); setUserRole(res.data.role);
localStorage.setItem('username', user); setUsername(res.data.username);
setToken(token);
setUserRole(role);
if (role === 'ADMIN') {
navigate('/admin');
} else {
navigate('/user');
}
} catch (err) { } catch (err) {
alert('Login failed: ' + (err.response?.data?.error || err.message)); setError(err.response?.data?.error || 'Login failed');
} }
}; };
return ( return (
<div className="min-h-screen bg-slate-900 flex items-center justify-center p-4"> <div className="min-h-screen flex items-center justify-center bg-slate-950 relative">
<div className="bg-slate-800 p-8 rounded-2xl w-full max-w-md border border-slate-700 shadow-2xl"> <div className="absolute top-4 right-4">
<h2 className="text-3xl font-bold text-white mb-6 text-center">Control Patente AI</h2> <LanguageSelector />
<form onSubmit={handleLogin} className="space-y-6"> </div>
<div> <div className="bg-slate-900 p-8 rounded-2xl shadow-2xl w-96 border border-slate-800">
<label className="block text-slate-400 mb-2">Username</label> <div className="text-center mb-8">
<input <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
type="text" {t('title')}
value={username} </h1>
onChange={(e) => setUsername(e.target.value)} <p className="text-slate-400 mt-2">{t('login_subtitle')}</p>
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>
/>
{error && (
<div className="bg-red-500/10 border border-red-500 text-red-500 p-3 rounded mb-4 text-center">
{error}
</div> </div>
)}
<form onSubmit={handleSubmit} className="space-y-6">
<div> <div>
<label className="block text-slate-400 mb-2">Password</label> <label className="block text-sm font-medium text-slate-400 mb-1">{t('username')}</label>
<input <div className="relative">
type="password" <User className="absolute left-3 top-3 text-slate-500" size={20} />
value={password} <input
onChange={(e) => setPassword(e.target.value)} className="w-full bg-slate-950 border border-slate-700 rounded-lg py-2.5 pl-10 text-white focus:ring-2 focus:ring-blue-500 outline-none"
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" placeholder="admin"
/> value={formData.username}
onChange={e => setFormData({ ...formData, username: e.target.value })}
/>
</div>
</div> </div>
<button
type="submit" <div>
className="w-full py-3 bg-blue-600 hover:bg-blue-500 rounded-lg font-bold text-white transition-colors" <label className="block text-sm font-medium text-slate-400 mb-1">{t('password')}</label>
> <div className="relative">
Login <Lock className="absolute left-3 top-3 text-slate-500" size={20} />
<input
type="password"
className="w-full bg-slate-950 border border-slate-700 rounded-lg py-2.5 pl-10 text-white focus:ring-2 focus:ring-blue-500 outline-none"
placeholder="••••••"
value={formData.password}
onChange={e => setFormData({ ...formData, password: e.target.value })}
/>
</div>
</div>
<button className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 py-3 rounded-lg font-bold shadow-lg shadow-blue-500/20 transition-all">
{t('sign_in')}
</button> </button>
</form> </form>
</div> </div>

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

@@ -2,11 +2,14 @@ import { useState, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
import { Car, Clock, CheckCircle, AlertCircle, Users, Trash2, PlusCircle, UserPlus, AlertTriangle } from 'lucide-react'; import { Car, Clock, CheckCircle, AlertCircle, Users, Trash2, PlusCircle, UserPlus, AlertTriangle } from 'lucide-react';
import io from 'socket.io-client'; import io from 'socket.io-client';
import { useTranslation } from 'react-i18next';
import LanguageSelector from '../components/LanguageSelector';
const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000'; const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';
const socket = io(API_URL); const socket = io(API_URL);
function UserDashboard({ token, username }) { function UserDashboard({ token, username }) {
const { t } = useTranslation();
const [plates, setPlates] = useState([]); const [plates, setPlates] = useState([]);
const [newPlate, setNewPlate] = useState({ number: '', owner: '' }); const [newPlate, setNewPlate] = useState({ number: '', owner: '' });
const [detections, setDetections] = useState([]); const [detections, setDetections] = useState([]);
@@ -91,7 +94,7 @@ function UserDashboard({ token, username }) {
}; };
const handleDeletePlate = async (id) => { const handleDeletePlate = async (id) => {
if (!confirm('Are you sure you want to delete this plate?')) return; if (!confirm(t('confirm_delete_plate'))) return;
try { try {
await axios.delete(`${API_URL}/api/plates/${id}`, { await axios.delete(`${API_URL}/api/plates/${id}`, {
headers: { Authorization: `Bearer ${token}` } headers: { Authorization: `Bearer ${token}` }
@@ -103,7 +106,7 @@ function UserDashboard({ token, username }) {
}; };
const handleDeletePerson = async (id) => { const handleDeletePerson = async (id) => {
if (!confirm('Are you sure you want to delete this visitor?')) return; if (!confirm(t('confirm_delete_visitor'))) return;
try { try {
await axios.delete(`${API_URL}/api/people/${id}`, { await axios.delete(`${API_URL}/api/people/${id}`, {
headers: { Authorization: `Bearer ${token}` } headers: { Authorization: `Bearer ${token}` }
@@ -118,48 +121,51 @@ function UserDashboard({ token, username }) {
<div className="min-h-screen bg-slate-900 text-slate-100 p-8"> <div className="min-h-screen bg-slate-900 text-slate-100 p-8">
<div className="max-w-6xl mx-auto space-y-8"> <div className="max-w-6xl mx-auto space-y-8">
<header> <header className="flex justify-between items-center">
<h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-cyan-300 bg-clip-text text-transparent mb-2"> <div>
Welcome, {username} <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-cyan-300 bg-clip-text text-transparent mb-2">
</h1> {t('welcome')}, {username}
<p className="text-slate-400">Manage your vehicles and visitors.</p> </h1>
<p className="text-slate-400">Manage your vehicles and visitors.</p>
</div>
<LanguageSelector />
</header> </header>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Plate Registration Form (Existing) */} {/* Plate Registration Form (Existing) */}
<div className="bg-slate-800 rounded-2xl p-6 border border-slate-700"> <div className="bg-slate-800 rounded-2xl p-6 border border-slate-700">
<h2 className="text-xl font-bold mb-4 flex items-center gap-2"> <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
<PlusCircle className="text-blue-500" /> Register New Plate <PlusCircle className="text-blue-500" /> {t('register_plate')}
</h2> </h2>
<form onSubmit={handleRegister} className="space-y-4"> <form onSubmit={handleRegister} className="space-y-4">
<input <input
className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 font-mono text-lg" className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 font-mono text-lg"
placeholder="Plate Number (e.g. AA-BB-11)" placeholder={t('plate_number')}
value={newPlate.number} value={newPlate.number}
onChange={e => setNewPlate({ ...newPlate, number: e.target.value.toUpperCase() })} onChange={e => setNewPlate({ ...newPlate, number: e.target.value.toUpperCase() })}
required required
/> />
<input <input
className="w-full 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 / Description" placeholder={t('owner_desc')}
value={newPlate.owner} value={newPlate.owner}
onChange={e => setNewPlate({ ...newPlate, owner: e.target.value })} onChange={e => setNewPlate({ ...newPlate, owner: e.target.value })}
required required
/> />
<button className="w-full py-3 bg-blue-600 hover:bg-blue-500 rounded-lg font-bold">Register Plate</button> <button className="w-full py-3 bg-blue-600 hover:bg-blue-500 rounded-lg font-bold">{t('submit_plate')}</button>
</form> </form>
</div> </div>
{/* Visitor Registration Form (Existing) */} {/* Visitor Registration Form (Existing) */}
<div className="bg-slate-800 rounded-2xl p-6 border border-slate-700"> <div className="bg-slate-800 rounded-2xl p-6 border border-slate-700">
<h2 className="text-xl font-bold mb-4 flex items-center gap-2"> <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
<UserPlus className="text-purple-500" /> Register Visitor <UserPlus className="text-purple-500" /> {t('register_visitor')}
</h2> </h2>
<form onSubmit={handleAddPerson} className="space-y-4"> <form onSubmit={handleAddPerson} className="space-y-4">
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<input <input
className="bg-slate-900 border border-slate-700 rounded-lg p-3" className="bg-slate-900 border border-slate-700 rounded-lg p-3"
placeholder="RUT (12345678-9)" placeholder={t('visitor_rut')}
value={newPerson.rut} value={newPerson.rut}
onChange={e => setNewPerson({ ...newPerson, rut: e.target.value })} onChange={e => setNewPerson({ ...newPerson, rut: e.target.value })}
required required
@@ -170,26 +176,26 @@ function UserDashboard({ token, username }) {
onChange={e => setNewPerson({ ...newPerson, durationDays: parseInt(e.target.value) })} onChange={e => setNewPerson({ ...newPerson, durationDays: parseInt(e.target.value) })}
required required
> >
<option value="1">1 Day Access</option> <option value="1">{t('1_day')}</option>
<option value="2">2 Days Access</option> <option value="2">{t('2_days')}</option>
<option value="7">1 Week Access</option> <option value="7">{t('1_week')}</option>
</select> </select>
</div> </div>
<input <input
className="w-full 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="Full Name" placeholder={t('full_name')}
value={newPerson.name} value={newPerson.name}
onChange={e => setNewPerson({ ...newPerson, name: e.target.value })} onChange={e => setNewPerson({ ...newPerson, name: e.target.value })}
required required
/> />
<button className="w-full py-3 bg-purple-600 hover:bg-purple-500 rounded-lg font-bold">Register Visitor</button> <button className="w-full py-3 bg-purple-600 hover:bg-purple-500 rounded-lg font-bold">{t('submit_visitor')}</button>
</form> </form>
</div> </div>
</div> </div>
{/* My Plates List */} {/* My Plates List */}
<div> <div>
<h2 className="text-2xl font-bold mb-4">My Registered Plates</h2> <h2 className="text-2xl font-bold mb-4">{t('my_plates_title')}</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <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.length === 0 && <p className="text-slate-500 col-span-3">No plates registered.</p>}
{plates.map(plate => ( {plates.map(plate => (
@@ -201,23 +207,23 @@ function UserDashboard({ token, username }) {
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
{plate.status === 'ALLOWED' && ( {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"> <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 <CheckCircle size={14} /> {t('active')}
</span> </span>
)} )}
{plate.status === 'PENDING' && ( {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"> <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 <Clock size={14} /> {t('pending')}
</span> </span>
)} )}
{plate.status === 'DENIED' && ( {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"> <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 <AlertTriangle size={14} /> {t('denied')}
</span> </span>
)} )}
<button <button
onClick={() => handleDeletePlate(plate.id)} onClick={() => handleDeletePlate(plate.id)}
className="text-slate-600 hover:text-red-500 transition-colors p-1" className="text-slate-600 hover:text-red-500 transition-colors p-1"
title="Delete Plate" title={t('delete')}
> >
<Trash2 size={18} /> <Trash2 size={18} />
</button> </button>
@@ -229,7 +235,7 @@ function UserDashboard({ token, username }) {
{/* My Visitors List */} {/* My Visitors List */}
<div> <div>
<h2 className="text-2xl font-bold mb-4">My Visitors</h2> <h2 className="text-2xl font-bold mb-4">{t('my_visitors_title')}</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{people.length === 0 && <p className="text-slate-500 col-span-3">No visitors registered.</p>} {people.length === 0 && <p className="text-slate-500 col-span-3">No visitors registered.</p>}
{people.map(p => ( {people.map(p => (
@@ -241,14 +247,14 @@ function UserDashboard({ token, username }) {
</div> </div>
<div className="flex items-center gap-3"> <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' : <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 === 'DENIED' ? 'bg-red-900 text-red-300' : 'bg-yellow-900 text-yellow-300'
}`}> }`}>
{p.status} {p.status === 'APPROVED' ? t('approved') : p.status === 'DENIED' ? t('denied') : t('pending')}
</span> </span>
<button <button
onClick={() => handleDeletePerson(p.id)} onClick={() => handleDeletePerson(p.id)}
className="text-slate-600 hover:text-red-500 transition-colors p-1" className="text-slate-600 hover:text-red-500 transition-colors p-1"
title="Delete Visitor" title={t('delete')}
> >
<Trash2 size={18} /> <Trash2 size={18} />
</button> </button>