247 lines
11 KiB
TypeScript
247 lines
11 KiB
TypeScript
import { useState } from "react";
|
|
import {
|
|
Shield,
|
|
Users,
|
|
AlertTriangle,
|
|
ShieldCheck,
|
|
BarChart3,
|
|
ChevronDown,
|
|
} from "lucide-react";
|
|
import Button from "@/components/common/button";
|
|
import StatCard from "@/components/common/dashStatCard";
|
|
import InfoBanner from '@/components/common/infoBanner';
|
|
import Table from '@/components/common/dataTable';
|
|
import { auditLogHeaders, auditLogRows, trustedDeviceHeaders, trustedDeviceRows } from "@/constants/adminTableData";
|
|
|
|
|
|
export default function SecurityPortal() {
|
|
const [enforceMfa, setEnforceMfa] = useState(true);
|
|
const [keepMeSignedIn, setKeepMeSignedIn] = useState(true);
|
|
const [reAuthenticate, setReAuthenticate] = useState(false);
|
|
|
|
return (
|
|
<div className="my-15 text-slate-100 font-sans ">
|
|
{/* --- HEADER SECTION --- */}
|
|
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
|
|
<div>
|
|
<div className="flex items-center gap-2 text-[12px] font-bold tracking-widest uppercase font-mono">
|
|
<span className="text-gray-400">PLATFORM</span>
|
|
<span className="text-gray-600">•</span>
|
|
<span className="text-gray-400">SECURITY</span>
|
|
</div>
|
|
<h1 className="text-2xl font-bold text-white tracking-tight mt-1">
|
|
Security & sessions
|
|
</h1>
|
|
<p className="text-sm font-medium text-slate-400 mt-1 max-w-2xl leading-relaxed">
|
|
Platform-wide sign-in policy, trusted devices and the immutable authentication audit trail. Sign-ins, MFA, resets and policy changes are logged automatically.
|
|
</p>
|
|
</div>
|
|
|
|
{/* --- HEADER BUTTONS --- */}
|
|
<div className="flex items-center gap-3 self-start md:mt-2">
|
|
<Button className="bg-slate-900/80 hover:bg-slate-800 text-slate-200 border border-slate-700/60 text-xs px-4 py-2.5 rounded-lg flex items-center gap-2 font-semibold transition-colors">
|
|
<BarChart3 className="w-4 h-4 text-slate-300" />
|
|
<span>Export log</span>
|
|
</Button>
|
|
|
|
<Button className="bg-emerald-400 hover:bg-emerald-300 text-slate-950 font-semibold text-xs px-4 py-2.5 rounded-lg flex items-center gap-2 transition-colors shadow-lg shadow-emerald-500/10">
|
|
<span>Publish policy</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* --- STAT CARDS --- */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
|
<StatCard
|
|
variant="icon"
|
|
title="MFA coverage"
|
|
value="83%"
|
|
icon={Shield}
|
|
badgeText="of platform users"
|
|
badgeClassName="text-amber-400 lowercase font-mono"
|
|
iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
|
|
/>
|
|
|
|
<StatCard
|
|
variant="icon"
|
|
title="Active sessions"
|
|
value="12"
|
|
icon={Users}
|
|
badgeText="right now"
|
|
badgeClassName="text-slate-400 lowercase font-mono"
|
|
iconContainerClassName="bg-slate-800/50 border-slate-700/40 text-sky-400"
|
|
/>
|
|
|
|
<StatCard
|
|
variant="icon"
|
|
title="Failed sign-ins"
|
|
value="3"
|
|
icon={AlertTriangle}
|
|
badgeText="last 24 h"
|
|
badgeClassName="text-rose-400 lowercase font-mono"
|
|
iconContainerClassName="bg-rose-950/40 border-rose-800/30 text-rose-400"
|
|
/>
|
|
|
|
<StatCard
|
|
variant="icon"
|
|
title="Trusted devices"
|
|
value="3"
|
|
icon={ShieldCheck}
|
|
badgeText="MFA skipped"
|
|
badgeClassName="text-slate-400 lowercase font-mono"
|
|
iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
|
|
/>
|
|
</div>
|
|
|
|
{/* --- TOP GRID SECTION: AUDIT LOG + SIGN-IN POLICY --- */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 mb-6">
|
|
|
|
{/* --- LEFT: AUDIT LOG TABLE CONTAINER --- */}
|
|
<div className="lg:col-span-8 bg-slate-900/60 border border-slate-800/80 rounded-xl p-5 flex flex-col justify-between space-y-4">
|
|
<div>
|
|
<div className="mb-4">
|
|
<h2 className="text-base font-semibold text-white tracking-tight">
|
|
Authentication audit trail
|
|
</h2>
|
|
<div className="flex items-center gap-2 text-[11px] font-mono text-slate-400 mt-0.5">
|
|
<span>immutable</span>
|
|
<span>•</span>
|
|
<span>90-day retention</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* AUDIT LOG TABLE */}
|
|
<Table headers={auditLogHeaders} rows={auditLogRows} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* --- RIGHT: SIGN-IN POLICY PANEL --- */}
|
|
<div className="lg:col-span-4 bg-slate-900/60 border border-slate-800/80 rounded-xl p-5 space-y-6">
|
|
<h2 className="text-base font-semibold text-white tracking-tight">
|
|
Sign-in policy
|
|
</h2>
|
|
|
|
<div className="space-y-6 text-sm">
|
|
{/* Toggle 1: Enforce MFA */}
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div>
|
|
<p className="font-semibold text-slate-100">Enforce MFA for all users</p>
|
|
<p className="text-xs text-slate-400 leading-snug mt-0.5">
|
|
6-digit code required on every untrusted device
|
|
</p>
|
|
</div>
|
|
<Button
|
|
onClick={() => setEnforceMfa(!enforceMfa)}
|
|
className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${enforceMfa ? 'bg-teal-400' : 'bg-slate-800'}`}
|
|
>
|
|
<span className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-slate-950 shadow ring-0 transition duration-200 ease-in-out ${enforceMfa ? 'translate-x-5' : 'translate-x-0'}`} />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Select 1: Idle Session Timeout */}
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div>
|
|
<p className="font-semibold text-slate-100">Idle session timeout</p>
|
|
<p className="text-xs text-slate-400 leading-snug mt-0.5">
|
|
Auto sign-out after inactivity
|
|
</p>
|
|
</div>
|
|
<div className="relative shrink-0">
|
|
<select className="appearance-none bg-slate-950/80 border border-slate-800 rounded-lg pl-3 pr-8 py-1.5 text-xs text-slate-200 font-medium focus:outline-none focus:border-slate-700 cursor-pointer">
|
|
<option value="30">30 minutes</option>
|
|
<option value="15">15 minutes</option>
|
|
<option value="60">1 hour</option>
|
|
</select>
|
|
<ChevronDown className="absolute right-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400 pointer-events-none" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Toggle 2: Keep me signed in */}
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div>
|
|
<p className="font-semibold text-slate-100">“Keep me signed in” by default</p>
|
|
<p className="text-xs text-slate-400 leading-snug mt-0.5">
|
|
Pre-checks the persistent-session option at sign-in
|
|
</p>
|
|
</div>
|
|
<Button
|
|
onClick={() => setKeepMeSignedIn(!keepMeSignedIn)}
|
|
className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${keepMeSignedIn ? 'bg-teal-400' : 'bg-slate-800'}`}
|
|
>
|
|
<span className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-slate-950 shadow ring-0 transition duration-200 ease-in-out ${keepMeSignedIn ? 'translate-x-5' : 'translate-x-0'}`} />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Toggle 3: Re-authenticate */}
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div>
|
|
<p className="font-semibold text-slate-100">Re-authenticate for sensitive actions</p>
|
|
<p className="text-xs text-slate-400 leading-snug mt-0.5">
|
|
Password prompt before user, role or policy changes
|
|
</p>
|
|
</div>
|
|
<Button
|
|
onClick={() => setReAuthenticate(!reAuthenticate)}
|
|
className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${reAuthenticate ? 'bg-teal-400' : 'bg-slate-800'}`}
|
|
>
|
|
<span className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-slate-950 shadow ring-0 transition duration-200 ease-in-out ${reAuthenticate ? 'translate-x-5' : 'translate-x-0'}`} />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Select 2: Trusted device window */}
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div>
|
|
<p className="font-semibold text-slate-100">Trusted device window</p>
|
|
<p className="text-xs text-slate-400 leading-snug mt-0.5">
|
|
Days MFA is skipped on a trusted device
|
|
</p>
|
|
</div>
|
|
<div className="relative shrink-0">
|
|
<select className="appearance-none bg-slate-950/80 border border-slate-800 rounded-lg pl-3 pr-8 py-1.5 text-xs text-slate-200 font-medium focus:outline-none focus:border-slate-700 cursor-pointer">
|
|
<option value="30">30</option>
|
|
<option value="60">60</option>
|
|
<option value="90">90</option>
|
|
</select>
|
|
<ChevronDown className="absolute right-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400 pointer-events-none" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* --- BOTTOM SECTION: TRUSTED DEVICES TABLE CONTAINER --- */}
|
|
<div className="bg-slate-900/60 border border-slate-800/80 rounded-xl p-5 mb-6 space-y-4">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h2 className="text-base font-semibold text-white tracking-tight">
|
|
Trusted devices
|
|
</h2>
|
|
<p className="text-[11px] font-mono text-slate-400 mt-0.5">
|
|
MFA skipped until expiry
|
|
</p>
|
|
</div>
|
|
<Button className="rounded-md border border-slate-700/80 bg-slate-800/50 px-3.5 py-1.5 text-xs font-semibold text-slate-200 hover:bg-slate-800 transition-colors">
|
|
Revoke all
|
|
</Button>
|
|
</div>
|
|
|
|
{/* TRUSTED DEVICES TABLE */}
|
|
<Table headers={trustedDeviceHeaders} rows={trustedDeviceRows} />
|
|
|
|
<p className="text-xs text-slate-400 pt-1">
|
|
Revoking forces MFA on the next sign-in from that device. Password changes revoke all devices automatically.
|
|
</p>
|
|
</div>
|
|
|
|
{/* --- INFO BANNER --- */}
|
|
<div className="mt-6">
|
|
<InfoBanner
|
|
boldText='Every event is logged:'
|
|
normalText='the audit trail above updates live — try signing out and back in, requesting a password reset, or trusting a device on the login screen.'
|
|
/>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
);
|
|
} |