website refactor

apps/website/components/admin/AdminDashboardWrapper.tsx

@@ -24,7 +24,7 @@ export function AdminDashboardWrapper({ initialViewData }: AdminDashboardWrapper
 
   return (
     <AdminDashboardTemplate
-      adminDashboardViewData={initialViewData}
+      viewData={initialViewData}
       onRefresh={handleRefresh}
       isLoading={loading}
     />

apps/website/components/admin/AdminUsersWrapper.tsx

@@ -103,7 +103,7 @@ export function AdminUsersWrapper({ initialViewData }: AdminUsersWrapperProps) {
 
   return (
     <AdminUsersTemplate
-      adminUsersViewData={initialViewData}
+      viewData={initialViewData}
       onRefresh={handleRefresh}
       onSearch={handleSearch}
       onFilterRole={handleFilterRole}

apps/website/components/admin/UserFilters.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import React from 'react';
+import { Filter, Search } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Button } from '@/ui/Button';
+import { Grid } from '@/ui/Grid';
+import { Icon } from '@/ui/Icon';
+import { Input } from '@/ui/Input';
+import { Select } from '@/ui/Select';
+
+interface UserFiltersProps {
+  search: string;
+  roleFilter: string;
+  statusFilter: string;
+  onSearch: (search: string) => void;
+  onFilterRole: (role: string) => void;
+  onFilterStatus: (status: string) => void;
+  onClearFilters: () => void;
+}
+
+export function UserFilters({
+  search,
+  roleFilter,
+  statusFilter,
+  onSearch,
+  onFilterRole,
+  onFilterStatus,
+  onClearFilters,
+}: UserFiltersProps) {
+  return (
+    <Card>
+      <Stack gap={4}>
+        <Stack direction="row" align="center" justify="between">
+          <Stack direction="row" align="center" gap={2}>
+            <Icon icon={Filter} size={4} color="#9ca3af" />
+            <Text weight="medium" color="text-white">Filters</Text>
+          </Stack>
+          {(search || roleFilter || statusFilter) && (
+            <Button
+              onClick={onClearFilters}
+              variant="ghost"
+              size="sm"
+            >
+              Clear all
+            </Button>
+          )}
+        </Stack>
+        
+        <Grid cols={3} gap={4}>
+          <Box position="relative">
+            <Box style={{ position: 'absolute', left: '0.75rem', top: '50%', transform: 'translateY(-50%)', zIndex: 10 }}>
+              <Icon icon={Search} size={4} color="#9ca3af" />
+            </Box>
+            <Input
+              type="text"
+              placeholder="Search by email or name..."
+              value={search}
+              onChange={(e) => onSearch(e.target.value)}
+              style={{ paddingLeft: '2.25rem' }}
+            />
+          </Box>
+
+          <Select
+            value={roleFilter}
+            onChange={(e) => onFilterRole(e.target.value)}
+            options={[
+              { value: '', label: 'All Roles' },
+              { value: 'owner', label: 'Owner' },
+              { value: 'admin', label: 'Admin' },
+              { value: 'user', label: 'User' },
+            ]}
+          />
+
+          <Select
+            value={statusFilter}
+            onChange={(e) => onFilterStatus(e.target.value)}
+            options={[
+              { value: '', label: 'All Status' },
+              { value: 'active', label: 'Active' },
+              { value: 'suspended', label: 'Suspended' },
+              { value: 'deleted', label: 'Deleted' },
+            ]}
+          />
+        </Grid>
+      </Stack>
+    </Card>
+  );
+}

apps/website/components/admin/UserStatsSummary.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import React from 'react';
+import { Users, Shield } from 'lucide-react';
+import { Grid } from '@/ui/Grid';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
+
+interface UserStatsSummaryProps {
+  total: number;
+  activeCount: number;
+  adminCount: number;
+}
+
+export function UserStatsSummary({ total, activeCount, adminCount }: UserStatsSummaryProps) {
+  return (
+    <Grid cols={3} gap={4}>
+      <Surface variant="muted" rounded="xl" border padding={4} style={{ background: 'linear-gradient(to bottom right, rgba(30, 58, 138, 0.2), rgba(29, 78, 216, 0.1))', borderColor: 'rgba(59, 130, 246, 0.2)' }}>
+        <Stack direction="row" align="center" justify="between">
+          <Box>
+            <Text size="sm" color="text-gray-400" block mb={1}>Total Users</Text>
+            <Text size="2xl" weight="bold" color="text-white">{total}</Text>
+          </Box>
+          <Icon icon={Users} size={6} color="#60a5fa" />
+        </Stack>
+      </Surface>
+      <Surface variant="muted" rounded="xl" border padding={4} style={{ background: 'linear-gradient(to bottom right, rgba(20, 83, 45, 0.2), rgba(21, 128, 61, 0.1))', borderColor: 'rgba(16, 185, 129, 0.2)' }}>
+        <Stack direction="row" align="center" justify="between">
+          <Box>
+            <Text size="sm" color="text-gray-400" block mb={1}>Active</Text>
+            <Text size="2xl" weight="bold" color="text-white">{activeCount}</Text>
+          </Box>
+          <Text color="text-performance-green" weight="bold">✓</Text>
+        </Stack>
+      </Surface>
+      <Surface variant="muted" rounded="xl" border padding={4} style={{ background: 'linear-gradient(to bottom right, rgba(88, 28, 135, 0.2), rgba(126, 34, 206, 0.1))', borderColor: 'rgba(168, 85, 247, 0.2)' }}>
+        <Stack direction="row" align="center" justify="between">
+          <Box>
+            <Text size="sm" color="text-gray-400" block mb={1}>Admins</Text>
+            <Text size="2xl" weight="bold" color="text-white">{adminCount}</Text>
+          </Box>
+          <Icon icon={Shield} size={6} color="#a855f7" />
+        </Stack>
+      </Surface>
+    </Grid>
+  );
+}