feat(visitor): Implement Admin Panopticon View
- Renamed Management Page to Visitor Panopticon - Added Revoke button to active visitors - Added Revoke Modal with reason capture - Updated status display to show REVOKED status
This commit is contained in:
fullsizemalt
parent
56c8e8bb8b
commit
9f41d6b413
1 changed files with 81 additions and 14 deletions
|
|
@ -56,6 +56,19 @@ export default function VisitorManagementPage() {
|
||||||
return `${hours}h ${minutes % 60}m`;
|
return `${hours}h ${minutes % 60}m`;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const [revokeModal, setRevokeModal] = useState<{ visitor: ActiveVisitor, notes: string } | null>(null);
|
||||||
|
|
||||||
|
const handleRevoke = async () => {
|
||||||
|
if (!revokeModal) return;
|
||||||
|
try {
|
||||||
|
await visitorsApi.revoke(revokeModal.visitor.visitorId, revokeModal.notes);
|
||||||
|
setRevokeModal(null);
|
||||||
|
loadData();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to revoke access:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const typeColors: Record<string, string> = {
|
const typeColors: Record<string, string> = {
|
||||||
VISITOR: 'bg-blue-500/20 text-blue-400',
|
VISITOR: 'bg-blue-500/20 text-blue-400',
|
||||||
CONTRACTOR: 'bg-amber-500/20 text-amber-400',
|
CONTRACTOR: 'bg-amber-500/20 text-amber-400',
|
||||||
|
|
@ -72,9 +85,9 @@ export default function VisitorManagementPage() {
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-2xl font-bold text-white flex items-center gap-2">
|
<h1 className="text-2xl font-bold text-white flex items-center gap-2">
|
||||||
<Shield className="text-emerald-400" />
|
<Shield className="text-emerald-400" />
|
||||||
Visitor Management
|
Visitor Panopticon
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-slate-400 text-sm">Track and manage facility visitors</p>
|
<p className="text-slate-400 text-sm">Real-time facility access monitoring</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-3">
|
<div className="flex gap-3">
|
||||||
<a
|
<a
|
||||||
|
|
@ -140,7 +153,7 @@ export default function VisitorManagementPage() {
|
||||||
: 'text-slate-400 hover:text-white hover:bg-slate-800'
|
: 'text-slate-400 hover:text-white hover:bg-slate-800'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{tab === 'active' ? 'On-Site' : tab}
|
{tab === 'active' ? 'Live View' : tab}
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -175,27 +188,36 @@ export default function VisitorManagementPage() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
<div className="text-right">
|
<div className="text-right hidden md:block">
|
||||||
<div className="text-xs text-slate-400">Badge</div>
|
<div className="text-xs text-slate-400">Badge</div>
|
||||||
<div className="text-sm text-emerald-400 font-mono">{visitor.badgeNumber}</div>
|
<div className="text-sm text-emerald-400 font-mono">{visitor.badgeNumber}</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-right">
|
<div className="text-right hidden md:block">
|
||||||
<div className="text-xs text-slate-400">Duration</div>
|
<div className="text-xs text-slate-400">Duration</div>
|
||||||
<div className="text-sm text-white">{formatDuration(visitor.entryTime)}</div>
|
<div className="text-sm text-white">{formatDuration(visitor.entryTime)}</div>
|
||||||
</div>
|
</div>
|
||||||
{visitor.escort && (
|
{visitor.escort && (
|
||||||
<div className="text-right">
|
<div className="text-right hidden md:block">
|
||||||
<div className="text-xs text-slate-400">Escort</div>
|
<div className="text-xs text-slate-400">Escort</div>
|
||||||
<div className="text-sm text-white">{visitor.escort.name}</div>
|
<div className="text-sm text-white">{visitor.escort.name}</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<button
|
<div className="flex gap-2">
|
||||||
onClick={() => handleCheckOut(visitor)}
|
<button
|
||||||
className="bg-red-500/10 hover:bg-red-500/20 text-red-400 px-3 py-2 rounded-lg flex items-center gap-2 text-sm transition-colors"
|
onClick={() => handleCheckOut(visitor)}
|
||||||
>
|
className="bg-slate-700 hover:bg-slate-600 text-white px-3 py-2 rounded-lg flex items-center gap-2 text-sm transition-colors"
|
||||||
<LogOut size={16} />
|
>
|
||||||
Check Out
|
<LogOut size={16} />
|
||||||
</button>
|
Sign Out
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setRevokeModal({ visitor, notes: '' })}
|
||||||
|
className="bg-red-500/10 hover:bg-red-500/20 text-red-500 px-3 py-2 rounded-lg flex items-center gap-2 text-sm transition-colors border border-red-500/20"
|
||||||
|
>
|
||||||
|
<AlertTriangle size={16} />
|
||||||
|
Revoke
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
@ -215,7 +237,7 @@ export default function VisitorManagementPage() {
|
||||||
value={searchQuery}
|
value={searchQuery}
|
||||||
onChange={e => setSearchQuery(e.target.value)}
|
onChange={e => setSearchQuery(e.target.value)}
|
||||||
onKeyDown={e => e.key === 'Enter' && loadData()}
|
onKeyDown={e => e.key === 'Enter' && loadData()}
|
||||||
placeholder="Search visitors..."
|
placeholder="Search all records..."
|
||||||
className="w-full bg-slate-800 border border-slate-700 rounded-lg pl-10 pr-4 py-2 text-white placeholder:text-slate-500 focus:border-emerald-500 outline-none"
|
className="w-full bg-slate-800 border border-slate-700 rounded-lg pl-10 pr-4 py-2 text-white placeholder:text-slate-500 focus:border-emerald-500 outline-none"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -265,6 +287,8 @@ export default function VisitorManagementPage() {
|
||||||
<td className="p-4">
|
<td className="p-4">
|
||||||
{visitor.logs[0]?.status === 'CHECKED_IN' ? (
|
{visitor.logs[0]?.status === 'CHECKED_IN' ? (
|
||||||
<span className="text-xs px-2 py-1 rounded bg-emerald-500/20 text-emerald-400">On-Site</span>
|
<span className="text-xs px-2 py-1 rounded bg-emerald-500/20 text-emerald-400">On-Site</span>
|
||||||
|
) : visitor.logs[0]?.status === 'REVOKED' ? (
|
||||||
|
<span className="text-xs px-2 py-1 rounded bg-red-500/20 text-red-400">REVOKED</span>
|
||||||
) : (
|
) : (
|
||||||
<span className="text-xs px-2 py-1 rounded bg-slate-500/20 text-slate-400">Off-Site</span>
|
<span className="text-xs px-2 py-1 rounded bg-slate-500/20 text-slate-400">Off-Site</span>
|
||||||
)}
|
)}
|
||||||
|
|
@ -368,6 +392,49 @@ export default function VisitorManagementPage() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Revoke Modal */}
|
||||||
|
{revokeModal && (
|
||||||
|
<div className="fixed inset-0 bg-black/60 flex items-center justify-center p-4 z-50">
|
||||||
|
<div className="bg-slate-900 border border-red-500/30 rounded-2xl w-full max-w-md p-6">
|
||||||
|
<div className="flex items-center gap-3 text-red-500 mb-4">
|
||||||
|
<AlertTriangle size={28} />
|
||||||
|
<h3 className="text-xl font-bold">Revoke Access</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-white mb-4">
|
||||||
|
Are you sure you want to immediately revoke access for <span className="font-bold">{revokeModal.visitor.name}</span>?
|
||||||
|
This will invalidate their digital badge and flag them in the system.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mb-6">
|
||||||
|
<label className="block text-sm text-slate-400 mb-2">Reason for Revocation *</label>
|
||||||
|
<textarea
|
||||||
|
value={revokeModal.notes}
|
||||||
|
onChange={e => setRevokeModal({ ...revokeModal, notes: e.target.value })}
|
||||||
|
className="w-full bg-slate-800 border border-slate-700 rounded-lg p-3 text-white focus:border-red-500 outline-none h-24"
|
||||||
|
placeholder="Security violation, elapsed time, etc."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<button
|
||||||
|
onClick={() => setRevokeModal(null)}
|
||||||
|
className="flex-1 bg-slate-800 hover:bg-slate-700 text-white py-3 rounded-xl font-medium transition-colors"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleRevoke}
|
||||||
|
disabled={!revokeModal.notes.trim()}
|
||||||
|
className="flex-1 bg-red-600 hover:bg-red-700 disabled:opacity-50 text-white py-3 rounded-xl font-bold transition-colors"
|
||||||
|
>
|
||||||
|
REVOKE ACCESS
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue