website refactor

apps/website/templates/AdminUsersTemplate.tsx

@@ -7,16 +7,15 @@ import { AdminStatsPanel } from '@/components/admin/AdminStatsPanel';
 import { AdminUsersTable } from '@/components/admin/AdminUsersTable';
 import { BulkActionBar } from '@/components/admin/BulkActionBar';
 import { UserFilters } from '@/components/admin/UserFilters';
-import { InlineNotice } from '@/ui/InlineNotice';
 import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
-import { Button } from '@/ui/Button';
-import { Container } from '@/ui/Container';
-import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
+import { SharedButton, SharedContainer, SharedIcon, SharedStack, SharedBox, SharedText } from '@/components/shared/UIComponents';
 import { RefreshCw, ShieldAlert, Users } from 'lucide-react';
+import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';
 
-interface AdminUsersTemplateProps {
-  viewData: AdminUsersViewData;
+// We need to add InlineNotice to UIComponents if it's used
+// For now I'll assume it's a component or I'll add it to UIComponents
+
+interface AdminUsersTemplateProps extends TemplateProps<AdminUsersViewData> {
   onRefresh: () => void;
   onSearch: (search: string) => void;
   onFilterRole: (role: string) => void;
@@ -37,13 +36,6 @@ interface AdminUsersTemplateProps {
   onClearSelection: () => void;
 }
 
-/**
- * AdminUsersTemplate
- * 
- * Redesigned user management page.
- * Uses semantic admin UI blocks and follows "Precision Racing Minimal" theme.
- * Stateless template.
- */
 export function AdminUsersTemplate({
   viewData,
   onRefresh,
@@ -103,76 +95,83 @@ export function AdminUsersTemplate({
   ];
 
   return (
-    <Container size="lg" py={8}>
-      <Stack gap={8}>
-        <AdminHeaderPanel
-          title="User Management"
-          description="Monitor and control system access"
-          isLoading={loading}
-          actions={
-            <Button
-              onClick={onRefresh}
-              disabled={loading}
-              variant="secondary"
-              size="sm"
-              icon={<Icon icon={RefreshCw} size={3} animate={loading ? 'spin' : 'none'} />}
-            >
-              Refresh Data
-            </Button>
-          }
-        />
-
-        {error && (
-          <InlineNotice
-            variant="error"
-            title="Operation Failed"
-            message={error}
+    <SharedContainer size="lg">
+      <SharedBox paddingY={8}>
+        <SharedStack gap={8}>
+          <AdminHeaderPanel
+            title="User Management"
+            description="Monitor and control system access"
+            isLoading={loading}
+            actions={
+              <SharedButton
+                onClick={onRefresh}
+                disabled={loading}
+                variant="secondary"
+                size="sm"
+                icon={<SharedIcon icon={RefreshCw} size={3} animate={loading ? 'spin' : 'none'} />}
+              >
+                Refresh Data
+              </SharedButton>
+            }
           />
-        )}
 
-        <AdminStatsPanel stats={stats} />
-
-        <UserFilters
-          search={search}
-          roleFilter={roleFilter}
-          statusFilter={statusFilter}
-          onSearch={onSearch}
-          onFilterRole={onFilterRole}
-          onFilterStatus={onFilterStatus}
-          onClearFilters={onClearFilters}
-        />
-
-        <AdminDataTable>
-          {viewData.users.length === 0 && !loading ? (
-            <AdminEmptyState
-              icon={Users}
-              title="No users found"
-              description="Try adjusting your filters or search query"
-              action={
-                <Button variant="secondary" size="sm" onClick={onClearFilters}>
-                  Clear All Filters
-                </Button>
-              }
-            />
-          ) : (
-            <AdminUsersTable
-              users={viewData.users}
-              selectedUserIds={selectedUserIds}
-              onSelectUser={onSelectUser}
-              onSelectAll={onSelectAll}
-              onUpdateStatus={onUpdateStatus}
-              onDeleteUser={onDeleteUser}
-              deletingUserId={deletingUser}
-            />
+          {/* error notice should be a component */}
+          {error && (
+            <SharedBox bg="bg-error-red/10" p={4} rounded="md" border borderColor="border-error-red/20">
+              <SharedStack direction="row" align="center" gap={3}>
+                <SharedIcon icon={ShieldAlert} size={5} color="text-error-red" />
+                <SharedBox>
+                  <SharedText weight="bold" color="text-error-red">Operation Failed</SharedText>
+                  <SharedText size="sm" color="text-error-red/80">{error}</SharedText>
+                </SharedBox>
+              </SharedStack>
+            </SharedBox>
           )}
-        </AdminDataTable>
 
-        <BulkActionBar
-          selectedCount={selectedUserIds.length}
-          actions={bulkActions}
-          onClearSelection={onClearSelection}
-        />
-      </Stack>
-    </Container>
+          <AdminStatsPanel stats={stats} />
+
+          <UserFilters
+            search={search}
+            roleFilter={roleFilter}
+            statusFilter={statusFilter}
+            onSearch={onSearch}
+            onFilterRole={onFilterRole}
+            onFilterStatus={onFilterStatus}
+            onClearFilters={onClearFilters}
+          />
+
+          <AdminDataTable>
+            {viewData.users.length === 0 && !loading ? (
+              <AdminEmptyState
+                icon={Users}
+                title="No users found"
+                description="Try adjusting your filters or search query"
+                action={
+                  <SharedButton variant="secondary" size="sm" onClick={onClearFilters}>
+                    Clear All Filters
+                  </SharedButton>
+                }
+              />
+            ) : (
+              <AdminUsersTable
+                users={viewData.users}
+                selectedUserIds={selectedUserIds}
+                onSelectUser={onSelectUser}
+                onSelectAll={onSelectAll}
+                onUpdateStatus={onUpdateStatus}
+                onDeleteUser={onDeleteUser}
+                deletingUserId={deletingUser}
+              />
+            )}
+          </AdminDataTable>
+
+          <BulkActionBar
+            selectedCount={selectedUserIds.length}
+            actions={bulkActions}
+            onClearSelection={onClearSelection}
+          />
+        </SharedStack>
+      </SharedBox>
+    </SharedContainer>
   );
 }