import { ShieldCheck, Users } from 'lucide-react';
import { Suspense, lazy } from 'react';
import { Head, Link } from '@inertiajs/react';
import { AdminStatsGrid, type StatCard } from '@/Components/admin/AdminStatsGrid';
import { ChartErrorBoundary } from '@/Components/admin/ChartErrorBoundary';
import PageHeader from '@/Components/layout/PageHeader';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { EmptyState } from '@/Components/ui/empty-state';
import { Skeleton } from '@/Components/ui/skeleton';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/Components/ui/table';
import AdminLayout from '@/Layouts/AdminLayout';
import { formatRelativeTime } from '@/lib/format';
import type { AdminTwoFactorDashboardProps } from '@/types/admin';
// Chart loading fallback
const ChartLoader = () => (
);
// Lazy load adoption bar chart
const LazyAdoptionChart = lazy(async () => {
const { BarChart, Bar, CartesianGrid, Cell, ChartContainer, ChartTooltip, XAxis, YAxis } =
await import('@/Components/ui/chart');
return {
default: ({ data }: { data: { label: string; count: number }[] }) => (
{data.map((entry, index) => (
|
))}
),
};
});
export default function TwoFactorDashboard({ stats, users_with_2fa }: AdminTwoFactorDashboardProps) {
const chartData = [
{ label: 'Enabled', count: stats.two_factor_enabled },
{ label: 'Disabled', count: stats.without_two_factor },
];
return (
{/* Stats */}
`${n}%`,
description: 'Users with 2FA enabled',
},
{
title: 'Without 2FA',
value: stats.without_two_factor,
valueClassName: 'text-muted-foreground',
description: 'Users without protection',
},
] satisfies StatCard[]
}
/>
{/* Adoption Chart */}
2FA Adoption
Users with vs without two-factor authentication
}>
{/* Users with 2FA */}
Recently Enabled
Users who most recently enabled two-factor authentication
{users_with_2fa.length === 0 ? (
) : (
User
Enabled
{users_with_2fa.map((u) => (
{u.user_name}
{u.user_email}
{formatRelativeTime(u.enabled_at)}
))}
)}