website refactor
This commit is contained in:
@@ -1,12 +1,20 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
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 { 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,
|
||||
@@ -21,122 +29,123 @@ import {
|
||||
* Pure template for admin dashboard.
|
||||
* Accepts ViewData only, no business logic.
|
||||
*/
|
||||
export function AdminDashboardTemplate(props: {
|
||||
adminDashboardViewData: AdminDashboardViewData;
|
||||
export function AdminDashboardTemplate({
|
||||
viewData,
|
||||
onRefresh,
|
||||
isLoading
|
||||
}: {
|
||||
viewData: 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>
|
||||
<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} className={isLoading ? 'animate-spin' : ''} />}
|
||||
>
|
||||
Refresh
|
||||
</Button>
|
||||
</Stack>
|
||||
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
<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>
|
||||
{/* 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>
|
||||
<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>
|
||||
{/* 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user