Tab Constant is added

This commit is contained in:
2026-07-29 14:39:55 +05:30
parent 7ce1f2705e
commit f9c3e7968b
28 changed files with 1299 additions and 1093 deletions

View File

@@ -5,183 +5,14 @@ import {
AlertTriangle,
ShieldCheck,
BarChart3,
Sparkles,
ChevronDown
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 { StatusBadge } from "@/components/common/statusBadge";
import { auditLogHeaders, auditLogRows, trustedDeviceHeaders, trustedDeviceRows } from "@/constants/tabledata";
export const trustedDeviceHeaders = [
"USER",
"DEVICE",
"IP",
"LAST SEEN",
"EXPIRES",
"STATUS",
"ACTIONS",
];
export const trustedDeviceRows = [
[
<span className="font-semibold text-white">Dhananjay T.</span>,
"Chrome 126 · Windows 11",
<span className="font-mono">103.212.14.8</span>,
<span className="font-mono">Today, 08:12</span>,
<span className="font-mono">Jul 30, 2026</span>,
<StatusBadge
text="TRUSTED"
color="bg-emerald-500/15 text-emerald-400"
/>,
<Button className="rounded-md border border-slate-700/80 bg-slate-800/40 px-3 py-1 text-xs text-slate-300 hover:bg-slate-800 transition-colors">
Revoke
</Button>,
],
[
<span className="font-semibold text-white">Kavya Raghunathan</span>,
"Safari 18 · macOS",
<span className="font-mono">49.37.201.55</span>,
<span className="font-mono">Yesterday, 17:40</span>,
<span className="font-mono">Jul 21, 2026</span>,
<StatusBadge
text="TRUSTED"
color="bg-emerald-500/15 text-emerald-400"
/>,
<Button className="rounded-md border border-slate-700/80 bg-slate-800/40 px-3 py-1 text-xs text-slate-300 hover:bg-slate-800 transition-colors">
Revoke
</Button>,
],
[
<span className="font-semibold text-white">Rahul Iyer</span>,
"KAFM Mobile · Android 15",
<span className="font-mono">152.58.33.104</span>,
<span className="font-mono">Today, 06:58</span>,
<span className="font-mono">Jul 12, 2026</span>,
<StatusBadge
text="TRUSTED"
color="bg-emerald-500/15 text-emerald-400"
/>,
<Button className="rounded-md border border-slate-700/80 bg-slate-800/40 px-3 py-1 text-xs text-slate-300 hover:bg-slate-800 transition-colors">
Revoke
</Button>,
],
[
<span className="font-semibold text-white">Meera Pillai</span>,
"Edge 126 · Windows 10",
<span className="font-mono">103.212.14.31</span>,
<span className="font-mono">Jun 18, 2026</span>,
<span className="font-mono text-slate-400">Expired</span>,
<StatusBadge
text="REVOKED"
color="bg-slate-700/50 text-slate-400"
/>,
<span className="text-slate-500 text-center"></span>,
],
];
export const auditLogHeaders = [
"WHEN",
"USER",
"EVENT",
"IP",
"RESULT",
];
export const auditLogRows = [
[
<span className="font-mono text-slate-300">Today 08:12</span>,
<span className="font-mono text-slate-300">dhananjay@kafm.io</span>,
<span className="text-slate-200">Sign-in · password + MFA</span>,
<span className="font-mono text-slate-300">103.212.14.8</span>,
<StatusBadge
text="OK"
color="bg-emerald-500/15 text-emerald-400"
/>,
],
[
<span className="font-mono text-slate-300">Today 07:56</span>,
<span className="font-mono text-slate-300">kavya@kafm.io</span>,
<span className="text-slate-200">
Role changed · Technician M&E Supervisor
</span>,
<span className="font-mono text-slate-300">49.37.201.55</span>,
<StatusBadge
text="OK"
color="bg-emerald-500/15 text-emerald-400"
/>,
],
[
<span className="font-mono text-slate-300">Today 07:31</span>,
<span className="font-mono text-slate-300">unknown@ext.net</span>,
<span className="text-slate-200">
Sign-in · wrong password (3rd attempt)
</span>,
<span className="font-mono text-slate-300">91.240.118.7</span>,
<StatusBadge
text="FAILED"
color="bg-rose-500/15 text-rose-400"
/>,
],
[
<span className="font-mono text-slate-300">Today 06:58</span>,
<span className="font-mono text-slate-300">rahul@kafm.io</span>,
<span className="text-slate-200">
Device trusted · KAFM Mobile (30 days)
</span>,
<span className="font-mono text-slate-300">152.58.33.104</span>,
<StatusBadge
text="OK"
color="bg-emerald-500/15 text-emerald-400"
/>,
],
[
<span className="font-mono text-slate-300">Yesterday 17:40</span>,
<span className="font-mono text-slate-300">kavya@kafm.io</span>,
<span className="text-slate-200">
Password reset · self-service link
</span>,
<span className="font-mono text-slate-300">49.37.201.55</span>,
<StatusBadge
text="OK"
color="bg-emerald-500/15 text-emerald-400"
/>,
],
[
<span className="font-mono text-slate-300">Yesterday 14:05</span>,
<span className="font-mono text-slate-300">meera@kafm.io</span>,
<span className="text-slate-200">
MFA reset by admin · device revoked
</span>,
<span className="font-mono text-slate-300">103.212.14.31</span>,
<StatusBadge
text="PENDING"
color="bg-amber-500/15 text-amber-400"
/>,
],
[
<span className="font-mono text-slate-300">Jun 30 09:12</span>,
<span className="font-mono text-slate-300">admin@kafm.io</span>,
<span className="text-slate-200">
Sign-in policy updated · idle timeout 30 min
</span>,
<span className="font-mono text-slate-300">103.212.14.8</span>,
<StatusBadge
text="OK"
color="bg-emerald-500/15 text-emerald-400"
/>,
],
];
export default function SecurityPortal() {
const [enforceMfa, setEnforceMfa] = useState(true);
@@ -193,12 +24,12 @@ export default function SecurityPortal() {
{/* --- 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-[10px] font-bold tracking-widest uppercase font-mono">
<span className="text-teal-400">PLATFORM</span>
<span className="text-slate-500"></span>
<span className="text-slate-500">SECURITY</span>
<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-3xl font-bold text-white tracking-tight mt-1">
<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">
@@ -299,12 +130,12 @@ export default function SecurityPortal() {
6-digit code required on every untrusted device
</p>
</div>
<button
<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>
</Button>
</div>
{/* Select 1: Idle Session Timeout */}
@@ -333,12 +164,12 @@ export default function SecurityPortal() {
Pre-checks the persistent-session option at sign-in
</p>
</div>
<button
<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>
</Button>
</div>
{/* Toggle 3: Re-authenticate */}
@@ -349,12 +180,12 @@ export default function SecurityPortal() {
Password prompt before user, role or policy changes
</p>
</div>
<button
<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>
</Button>
</div>
{/* Select 2: Trusted device window */}