142 lines
4.4 KiB
TypeScript
142 lines
4.4 KiB
TypeScript
import { AdminDashboardViewData } from '@/lib/view-data/AdminDashboardViewData';
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
import { Layout } from '@/ui/Layout';
|
|
import { Card } from '@/ui/Card';
|
|
import { Text } from '@/ui/Text';
|
|
import { Button } from '@/ui/Button';
|
|
import { StatCard } from '@/ui/StatCard';
|
|
import { QuickActionLink } from '@/ui/QuickActionLink';
|
|
import { StatusBadge } from '@/ui/StatusBadge';
|
|
import {
|
|
Users,
|
|
Shield,
|
|
Activity,
|
|
Clock,
|
|
RefreshCw
|
|
} from 'lucide-react';
|
|
|
|
/**
|
|
* AdminDashboardTemplate
|
|
*
|
|
* Pure template for admin dashboard.
|
|
* Accepts ViewData only, no business logic.
|
|
*/
|
|
export function AdminDashboardTemplate(props: {
|
|
adminDashboardViewData: AdminDashboardViewData;
|
|
onRefresh: () => void;
|
|
isLoading: boolean;
|
|
}) {
|
|
const { adminDashboardViewData: viewData, onRefresh, isLoading } = props;
|
|
|
|
return (
|
|
<Layout padding="p-6" gap="gap-6" className="container mx-auto">
|
|
{/* Header */}
|
|
<Layout flex flexCol={false} items="center" justify="between">
|
|
<div>
|
|
<Text size="2xl" weight="bold" color="text-white">
|
|
Admin Dashboard
|
|
</Text>
|
|
<Text size="sm" color="text-gray-400" className="mt-1">
|
|
System overview and statistics
|
|
</Text>
|
|
</div>
|
|
<Button
|
|
onClick={onRefresh}
|
|
disabled={isLoading}
|
|
variant="secondary"
|
|
className="flex items-center gap-2"
|
|
>
|
|
<RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
|
|
Refresh
|
|
</Button>
|
|
</Layout>
|
|
|
|
{/* Stats Cards */}
|
|
<Layout grid gridCols={4} gap="gap-4">
|
|
<StatCard
|
|
label="Total Users"
|
|
value={viewData.stats.totalUsers}
|
|
icon={<Users className="w-8 h-8" />}
|
|
variant="blue"
|
|
/>
|
|
<StatCard
|
|
label="Admins"
|
|
value={viewData.stats.systemAdmins}
|
|
icon={<Shield className="w-8 h-8" />}
|
|
variant="purple"
|
|
/>
|
|
<StatCard
|
|
label="Active Users"
|
|
value={viewData.stats.activeUsers}
|
|
icon={<Activity className="w-8 h-8" />}
|
|
variant="green"
|
|
/>
|
|
<StatCard
|
|
label="Recent Logins"
|
|
value={viewData.stats.recentLogins}
|
|
icon={<Clock className="w-8 h-8" />}
|
|
variant="orange"
|
|
/>
|
|
</Layout>
|
|
|
|
{/* System Status */}
|
|
<Card>
|
|
<Text size="lg" weight="semibold" color="text-white" className="mb-4">
|
|
System Status
|
|
</Text>
|
|
<Layout flex flexCol gap="gap-4">
|
|
<Layout flex flexCol={false} items="center" justify="between">
|
|
<Text size="sm" color="text-gray-400">
|
|
System Health
|
|
</Text>
|
|
<StatusBadge variant="success">
|
|
Healthy
|
|
</StatusBadge>
|
|
</Layout>
|
|
<Layout flex flexCol={false} items="center" justify="between">
|
|
<Text size="sm" color="text-gray-400">
|
|
Suspended Users
|
|
</Text>
|
|
<Text size="base" weight="medium" color="text-white">
|
|
{viewData.stats.suspendedUsers}
|
|
</Text>
|
|
</Layout>
|
|
<Layout flex flexCol={false} items="center" justify="between">
|
|
<Text size="sm" color="text-gray-400">
|
|
Deleted Users
|
|
</Text>
|
|
<Text size="base" weight="medium" color="text-white">
|
|
{viewData.stats.deletedUsers}
|
|
</Text>
|
|
</Layout>
|
|
<Layout flex flexCol={false} items="center" justify="between">
|
|
<Text size="sm" color="text-gray-400">
|
|
New Users Today
|
|
</Text>
|
|
<Text size="base" weight="medium" color="text-white">
|
|
{viewData.stats.newUsersToday}
|
|
</Text>
|
|
</Layout>
|
|
</Layout>
|
|
</Card>
|
|
|
|
{/* Quick Actions */}
|
|
<Card>
|
|
<Text size="lg" weight="semibold" color="text-white" className="mb-4">
|
|
Quick Actions
|
|
</Text>
|
|
<Layout grid gridCols={3} gap="gap-3">
|
|
<QuickActionLink href={routes.admin.users} variant="blue">
|
|
View All Users
|
|
</QuickActionLink>
|
|
<QuickActionLink href="/admin" variant="purple">
|
|
Manage Admins
|
|
</QuickActionLink>
|
|
<QuickActionLink href="/admin" variant="orange">
|
|
View Audit Log
|
|
</QuickActionLink>
|
|
</Layout>
|
|
</Card>
|
|
</Layout>
|
|
);
|
|
} |