website refactor

apps/website/templates/AdminDashboardTemplate.tsx

@@ -6,7 +6,6 @@ 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';
@@ -14,20 +13,24 @@ 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 { AdminHeaderPanel } from '@/components/admin/AdminHeaderPanel';
+import { AdminStatsPanel } from '@/components/admin/AdminStatsPanel';
+import { AdminSectionHeader } from '@/components/admin/AdminSectionHeader';
+import { AdminDangerZonePanel } from '@/components/admin/AdminDangerZonePanel';
 import {
   Users,
   Shield,
   Activity,
   Clock,
-  RefreshCw
+  RefreshCw,
+  ArrowRight
 } from 'lucide-react';
 
 /**
  * AdminDashboardTemplate
  * 
  * Pure template for admin dashboard.
- * Accepts ViewData only, no business logic.
+ * Redesigned for "Precision Racing Minimal" theme.
  */
 export function AdminDashboardTemplate({
   viewData,
@@ -38,113 +41,130 @@ export function AdminDashboardTemplate({
   onRefresh: () => void;
   isLoading: boolean;
 }) {
+  const stats = [
+    {
+      label: 'Total Users',
+      value: viewData.stats.totalUsers,
+      icon: Users,
+      variant: 'blue' as const
+    },
+    {
+      label: 'System Admins',
+      value: viewData.stats.systemAdmins,
+      icon: Shield,
+      variant: 'purple' as const
+    },
+    {
+      label: 'Active Users',
+      value: viewData.stats.activeUsers,
+      icon: Activity,
+      variant: 'green' as const
+    },
+    {
+      label: 'Recent Logins',
+      value: viewData.stats.recentLogins,
+      icon: Clock,
+      variant: 'orange' as const
+    }
+  ];
+
   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>
+    <Container size="lg" py={8}>
+      <Stack gap={8}>
+        <AdminHeaderPanel
+          title="Admin Dashboard"
+          description="System-wide telemetry and operations control"
+          isLoading={isLoading}
+          actions={
+            <Button
+              onClick={onRefresh}
+              disabled={isLoading}
+              variant="secondary"
+              size="sm"
+              icon={<Icon icon={RefreshCw} size={3} animate={isLoading ? 'spin' : 'none'} />}
+            >
+              Refresh Telemetry
+            </Button>
+          }
+        />
 
-        {/* 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>
+        <AdminStatsPanel stats={stats} />
 
-        {/* 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>
+        <Grid cols={1} mdCols={2} gap={6}>
+          {/* System Health & Status */}
+          <Card p={6}>
+            <Stack gap={6}>
+              <AdminSectionHeader 
+                title="System Status" 
+                actions={
+                  <StatusBadge variant="success" icon={Activity}>
+                    Operational
+                  </StatusBadge>
+                }
+              />
+              
+              <Stack gap={4}>
+                <Box borderTop borderColor="border-gray" opacity={0.3} />
+                <Box pt={0}>
+                  <Stack direction="row" align="center" justify="between" py={2}>
+                    <Text size="sm" color="text-gray-400">Suspended Users</Text>
+                    <Text weight="bold" color="text-warning-amber">{viewData.stats.suspendedUsers}</Text>
+                  </Stack>
+                </Box>
+                <Box borderTop borderColor="border-gray" opacity={0.3} />
+                <Box>
+                  <Stack direction="row" align="center" justify="between" py={2}>
+                    <Text size="sm" color="text-gray-400">Deleted Users</Text>
+                    <Text weight="bold" color="text-error-red">{viewData.stats.deletedUsers}</Text>
+                  </Stack>
+                </Box>
+                <Box borderTop borderColor="border-gray" opacity={0.3} />
+                <Box>
+                  <Stack direction="row" align="center" justify="between" py={2}>
+                    <Text size="sm" color="text-gray-400">New Registrations (24h)</Text>
+                    <Text weight="bold" color="text-primary-blue">{viewData.stats.newUsersToday}</Text>
+                  </Stack>
+                </Box>
               </Stack>
             </Stack>
-          </Stack>
-        </Card>
+          </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>
+          {/* Quick Operations */}
+          <Card p={6}>
+            <Stack gap={6}>
+              <AdminSectionHeader title="Quick Operations" />
+              <Grid cols={1} gap={3}>
+                <QuickActionLink href={routes.admin.users} variant="blue">
+                  <Stack direction="row" align="center" justify="between" fullWidth>
+                    <Text size="sm" weight="bold">User Management</Text>
+                    <Icon icon={ArrowRight} size={4} />
+                  </Stack>
+                </QuickActionLink>
+                <QuickActionLink href="/admin" variant="purple">
+                  <Stack direction="row" align="center" justify="between" fullWidth>
+                    <Text size="sm" weight="bold">Security & Roles</Text>
+                    <Icon icon={ArrowRight} size={4} />
+                  </Stack>
+                </QuickActionLink>
+                <QuickActionLink href="/admin" variant="orange">
+                  <Stack direction="row" align="center" justify="between" fullWidth>
+                    <Text size="sm" weight="bold">System Audit Logs</Text>
+                    <Icon icon={ArrowRight} size={4} />
+                  </Stack>
+                </QuickActionLink>
+              </Grid>
+            </Stack>
+          </Card>
+        </Grid>
+
+        <AdminDangerZonePanel
+          title="System Maintenance"
+          description="Perform destructive system-wide operations. Use with extreme caution."
+        >
+          <Button variant="danger" size="sm">
+            Enter Maintenance Mode
+          </Button>
+        </AdminDangerZonePanel>
       </Stack>
     </Container>
   );