website refactor

apps/website/templates/AdminDashboardTemplate.tsx

@@ -1,4 +1,12 @@
-import Card from '@/components/ui/Card';
+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,
@@ -6,7 +14,6 @@ import {
   Clock,
   RefreshCw
 } from 'lucide-react';
-import { AdminDashboardViewData } from '@/lib/view-data/AdminDashboardViewData';
 
 /**
  * AdminDashboardTemplate
@@ -22,106 +29,114 @@ export function AdminDashboardTemplate(props: {
   const { adminDashboardViewData: viewData, onRefresh, isLoading } = props;
   
   return (
-    <div className="container mx-auto p-6 space-y-6">
+    <Layout padding="p-6" gap="gap-6" className="container mx-auto">
       {/* Header */}
-      <div className="flex items-center justify-between">
+      <Layout flex flexCol={false} items="center" justify="between">
         <div>
-          <h1 className="text-2xl font-bold text-white">Admin Dashboard</h1>
-          <p className="text-gray-400 mt-1">System overview and statistics</p>
+          <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 
+        <Button 
           onClick={onRefresh} 
           disabled={isLoading}
-          className="px-4 py-2 bg-iron-gray border border-charcoal-outline rounded-lg text-white hover:bg-iron-gray/80 transition-colors flex items-center gap-2 disabled:opacity-50"
+          variant="secondary"
+          className="flex items-center gap-2"
         >
           <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
           Refresh
-        </button>
-      </div>
+        </Button>
+      </Layout>
 
       {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-        <Card className="bg-gradient-to-br from-blue-900/20 to-blue-700/10">
-          <div className="flex items-center justify-between">
-            <div>
-              <div className="text-sm text-gray-400 mb-1">Total Users</div>
-              <div className="text-3xl font-bold text-white">{viewData.stats.totalUsers}</div>
-            </div>
-            <Users className="w-8 h-8 text-blue-400" />
-          </div>
-        </Card>
-
-        <Card className="bg-gradient-to-br from-purple-900/20 to-purple-700/10">
-          <div className="flex items-center justify-between">
-            <div>
-              <div className="text-sm text-gray-400 mb-1">Admins</div>
-              <div className="text-3xl font-bold text-white">{viewData.stats.systemAdmins}</div>
-            </div>
-            <Shield className="w-8 h-8 text-purple-400" />
-          </div>
-        </Card>
-
-        <Card className="bg-gradient-to-br from-green-900/20 to-green-700/10">
-          <div className="flex items-center justify-between">
-            <div>
-              <div className="text-sm text-gray-400 mb-1">Active Users</div>
-              <div className="text-3xl font-bold text-white">{viewData.stats.activeUsers}</div>
-            </div>
-            <Activity className="w-8 h-8 text-green-400" />
-          </div>
-        </Card>
-
-        <Card className="bg-gradient-to-br from-orange-900/20 to-orange-700/10">
-          <div className="flex items-center justify-between">
-            <div>
-              <div className="text-sm text-gray-400 mb-1">Recent Logins</div>
-              <div className="text-3xl font-bold text-white">{viewData.stats.recentLogins}</div>
-            </div>
-            <Clock className="w-8 h-8 text-orange-400" />
-          </div>
-        </Card>
-      </div>
+      <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>
-        <h3 className="text-lg font-semibold text-white mb-4">System Status</h3>
-        <div className="space-y-4">
-          <div className="flex items-center justify-between">
-            <span className="text-sm text-gray-400">System Health</span>
-            <span className="px-2 py-1 text-xs rounded-full bg-performance-green/20 text-performance-green">
+        <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
-            </span>
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-sm text-gray-400">Suspended Users</span>
-            <span className="text-white font-medium">{viewData.stats.suspendedUsers}</span>
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-sm text-gray-400">Deleted Users</span>
-            <span className="text-white font-medium">{viewData.stats.deletedUsers}</span>
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-sm text-gray-400">New Users Today</span>
-            <span className="text-white font-medium">{viewData.stats.newUsersToday}</span>
-          </div>
-        </div>
+            </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>
-        <h3 className="text-lg font-semibold text-white mb-4">Quick Actions</h3>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-          <a href="/admin/users" className="px-4 py-3 bg-primary-blue/20 border border-primary-blue/30 text-primary-blue rounded-lg hover:bg-primary-blue/30 transition-colors text-sm font-medium text-center">
+        <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
-          </a>
-          <a href="/admin" className="px-4 py-3 bg-purple-500/20 border border-purple-500/30 text-purple-300 rounded-lg hover:bg-purple-500/30 transition-colors text-sm font-medium text-center">
+          </QuickActionLink>
+          <QuickActionLink href="/admin" variant="purple">
             Manage Admins
-          </a>
-          <a href="/admin" className="px-4 py-3 bg-orange-500/20 border border-orange-500/30 text-orange-300 rounded-lg hover:bg-orange-500/30 transition-colors text-sm font-medium text-center">
+          </QuickActionLink>
+          <QuickActionLink href="/admin" variant="orange">
             View Audit Log
-          </a>
-        </div>
+          </QuickActionLink>
+        </Layout>
       </Card>
-    </div>
+    </Layout>
   );
 }