Add RUT registration & Validation, bulk aprove
This commit is contained in:
@@ -10,7 +10,7 @@ function AdminDashboard({ token }) {
|
||||
const [users, setUsers] = useState([]);
|
||||
const [plates, setPlates] = useState([]);
|
||||
const [newUser, setNewUser] = useState({ username: '', password: '', role: 'USER' });
|
||||
const [activeTab, setActiveTab] = useState('monitor'); // 'monitor' | 'plates' | 'users'
|
||||
const [activeTab, setActiveTab] = useState('monitor'); // 'monitor' | 'plates' | 'users' | 'visitors'
|
||||
|
||||
// Monitor State
|
||||
const [detections, setDetections] = useState([]);
|
||||
@@ -18,6 +18,9 @@ function AdminDashboard({ token }) {
|
||||
const [viewMode, setViewMode] = useState('live'); // 'live' | 'history'
|
||||
const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
|
||||
|
||||
// Visitor State
|
||||
const [activePeople, setActivePeople] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
|
||||
@@ -38,10 +41,11 @@ function AdminDashboard({ token }) {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const authHeader = { headers: { Authorization: `Bearer ${token}` } };
|
||||
const [usersRes, platesRes, recentRes] = await Promise.all([
|
||||
const [usersRes, platesRes, recentRes, peopleRes] = 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/recent`, authHeader)
|
||||
axios.get(`${API_URL}/api/recent`, authHeader),
|
||||
axios.get(`${API_URL}/api/people`, authHeader)
|
||||
]);
|
||||
setUsers(usersRes.data);
|
||||
setPlates(platesRes.data);
|
||||
@@ -50,6 +54,7 @@ function AdminDashboard({ token }) {
|
||||
status: log.accessStatus,
|
||||
timestamp: log.timestamp
|
||||
})));
|
||||
setActivePeople(peopleRes.data);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
@@ -101,10 +106,23 @@ function AdminDashboard({ token }) {
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkApprove = async (userId) => {
|
||||
if (!confirm('Approve ALL pending visitors for this user?')) return;
|
||||
try {
|
||||
await axios.post(`${API_URL}/api/people/bulk-approve`, { userId }, {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
});
|
||||
fetchData();
|
||||
alert('All visitors approved');
|
||||
} catch (err) {
|
||||
alert(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
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 === 'DENIED' ? 'bg-red-600 text-white' :
|
||||
'bg-yellow-600 text-white'
|
||||
}`}>
|
||||
{status}
|
||||
</span>
|
||||
@@ -137,6 +155,9 @@ function AdminDashboard({ token }) {
|
||||
>
|
||||
User Management
|
||||
</button>
|
||||
<button onClick={() => setActiveTab('visitors')} className={`px-4 py-2 rounded-md transition-all ${activeTab === 'visitors' ? 'bg-purple-600' : 'hover:text-purple-400'}`}>
|
||||
Visitor Approvals
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -10,9 +10,12 @@ function UserDashboard({ token, username }) {
|
||||
const [plates, setPlates] = useState([]);
|
||||
const [newPlate, setNewPlate] = useState({ number: '', owner: '' });
|
||||
const [detections, setDetections] = useState([]);
|
||||
const [people, setPeople] = useState([]);
|
||||
const [newPerson, setNewPerson] = useState({ name: '', rut: '', durationDays: 1 });
|
||||
|
||||
useEffect(() => {
|
||||
fetchPlates();
|
||||
fetchPeople();
|
||||
|
||||
// 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"
|
||||
@@ -37,6 +40,17 @@ function UserDashboard({ token, username }) {
|
||||
}
|
||||
};
|
||||
|
||||
const fetchPeople = async () => {
|
||||
try {
|
||||
const res = await axios.get(`${API_URL}/api/people`, {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
});
|
||||
setPeople(res.data);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRegister = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
@@ -54,76 +68,106 @@ function UserDashboard({ token, username }) {
|
||||
}
|
||||
};
|
||||
|
||||
const handleRegisterPerson = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await axios.post(`${API_URL}/api/people`, newPerson, {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
});
|
||||
setNewPerson({ name: '', rut: '', durationDays: 1 });
|
||||
fetchPeople();
|
||||
alert('Person registered! Waiting for admin approval.');
|
||||
} catch (err) {
|
||||
alert('Error: ' + (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 grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<div className="max-w-6xl mx-auto space-y-12">
|
||||
|
||||
{/* 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}
|
||||
</h1>
|
||||
<p className="text-slate-400">Manage your vehicles and access.</p>
|
||||
</header>
|
||||
<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 visitors.</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>
|
||||
{/* Plates Section */}
|
||||
<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="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>
|
||||
<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 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>
|
||||
))}
|
||||
</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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
{/* Visitors Section */}
|
||||
<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">
|
||||
<Users className="text-purple-400" /> My Visitors
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
|
||||
{people.length === 0 && <p className="text-slate-500 col-span-3">No visitors registered.</p>}
|
||||
{people.map(p => (
|
||||
<div key={p.id} className="p-4 bg-slate-900 rounded-xl border border-slate-700">
|
||||
<div className="flex justify-between">
|
||||
<div className="font-bold">{p.name}</div>
|
||||
<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'}`}>
|
||||
{p.status}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm text-slate-400 font-mono mt-1">{p.rut}</div>
|
||||
<div className="text-xs text-slate-500 mt-2">
|
||||
Until: {new Date(p.endDate).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleRegisterPerson} className="flex gap-4 flex-wrap">
|
||||
<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 />
|
||||
<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 />
|
||||
<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>
|
||||
<option value="1">1 Day</option>
|
||||
<option value="2">2 Days</option>
|
||||
<option value="7">1 Week</option>
|
||||
</select>
|
||||
<button className="bg-purple-600 hover:bg-purple-500 px-6 rounded-lg font-bold transition-colors">Add Visitor</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user