import { Clock, Link2, Users } from 'lucide-react'; import { Suspense, lazy } from 'react'; import { Head, Link } from '@inertiajs/react'; import { AdminStatsGrid, type StatCard } from '@/Components/admin/AdminStatsGrid'; import PageHeader from '@/Components/layout/PageHeader'; import { Badge } from '@/Components/ui/badge'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card'; import { EmptyState } from '@/Components/ui/empty-state'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/Components/ui/table'; import AdminLayout from '@/Layouts/AdminLayout'; import { formatProviderName, formatRelativeTime } from '@/lib/format'; import type { AdminSocialAuthDashboardProps } from '@/types/admin'; // Chart loading fallback const ChartLoader = () => (
); // Lazy load provider pie chart const LazyProviderChart = lazy(async () => { const { PieChart, Pie, Cell, ChartContainer, ChartTooltip, Legend, CHART_COLORS } = await import('@/Components/ui/chart'); return { default: ({ data }: { data: { provider: string; count: number }[] }) => ( `${name}: ${value}`} > {data.map((_entry, index) => ( ))} ), }; }); export default function SocialAuthDashboard({ stats, linked_accounts }: AdminSocialAuthDashboardProps) { const providerData = Object.entries(stats.by_provider).map(([provider, count]) => ({ provider: formatProviderName(provider), count, })); return (
{/* Stats */} {/* Provider Distribution */} Accounts by Provider Distribution of linked OAuth accounts {providerData.length === 0 ? ( ) : ( }> )} {/* Linked Accounts */} Recent Linked Accounts Users who most recently linked an OAuth account {linked_accounts.length === 0 ? ( ) : (
User Provider Linked {linked_accounts.map((account, i) => ( {account.user_name}
{account.user_email}
 {formatProviderName(account.provider)} {formatRelativeTime(account.created_at)} ))}
)}
); }