152 lines
4.5 KiB
TypeScript
152 lines
4.5 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { AdminDashboardViewData } from '@/lib/view-data/AdminDashboardViewData';
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
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 { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Container } from '@/ui/Container';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Heading } from '@/ui/Heading';
|
|
import {
|
|
Users,
|
|
Shield,
|
|
Activity,
|
|
Clock,
|
|
RefreshCw
|
|
} from 'lucide-react';
|
|
|
|
/**
|
|
* AdminDashboardTemplate
|
|
*
|
|
* Pure template for admin dashboard.
|
|
* Accepts ViewData only, no business logic.
|
|
*/
|
|
export function AdminDashboardTemplate({
|
|
viewData,
|
|
onRefresh,
|
|
isLoading
|
|
}: {
|
|
viewData: AdminDashboardViewData;
|
|
onRefresh: () => void;
|
|
isLoading: boolean;
|
|
}) {
|
|
return (
|
|
<Container size="lg" py={6}>
|
|
<Stack gap={6}>
|
|
{/* Header */}
|
|
<Stack direction="row" align="center" justify="between">
|
|
<Box>
|
|
<Heading level={1}>Admin Dashboard</Heading>
|
|
<Text size="sm" color="text-gray-400" block mt={1}>
|
|
System overview and statistics
|
|
</Text>
|
|
</Box>
|
|
<Button
|
|
onClick={onRefresh}
|
|
disabled={isLoading}
|
|
variant="secondary"
|
|
icon={<Icon icon={RefreshCw} size={4} animate={isLoading ? 'spin' : 'none'} />}
|
|
>
|
|
Refresh
|
|
</Button>
|
|
</Stack>
|
|
|
|
{/* Stats Cards */}
|
|
<Grid cols={4} gap={4}>
|
|
<StatCard
|
|
label="Total Users"
|
|
value={viewData.stats.totalUsers}
|
|
icon={Users}
|
|
variant="blue"
|
|
/>
|
|
<StatCard
|
|
label="Admins"
|
|
value={viewData.stats.systemAdmins}
|
|
icon={Shield}
|
|
variant="purple"
|
|
/>
|
|
<StatCard
|
|
label="Active Users"
|
|
value={viewData.stats.activeUsers}
|
|
icon={Activity}
|
|
variant="green"
|
|
/>
|
|
<StatCard
|
|
label="Recent Logins"
|
|
value={viewData.stats.recentLogins}
|
|
icon={Clock}
|
|
variant="orange"
|
|
/>
|
|
</Grid>
|
|
|
|
{/* System Status */}
|
|
<Card>
|
|
<Stack gap={4}>
|
|
<Heading level={3}>System Status</Heading>
|
|
<Stack gap={4}>
|
|
<Stack direction="row" align="center" justify="between">
|
|
<Text size="sm" color="text-gray-400">
|
|
System Health
|
|
</Text>
|
|
<StatusBadge variant="success">
|
|
Healthy
|
|
</StatusBadge>
|
|
</Stack>
|
|
<Stack direction="row" align="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>
|
|
</Stack>
|
|
<Stack direction="row" align="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>
|
|
</Stack>
|
|
<Stack direction="row" align="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>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
</Card>
|
|
|
|
{/* Quick Actions */}
|
|
<Card>
|
|
<Stack gap={4}>
|
|
<Heading level={3}>Quick Actions</Heading>
|
|
<Grid cols={3} 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>
|
|
</Grid>
|
|
</Stack>
|
|
</Card>
|
|
</Stack>
|
|
</Container>
|
|
);
|
|
}
|