website refactor

apps/website/app/admin/page.tsx

@@ -1,5 +1,6 @@
 import { AdminDashboardPageQuery } from '@/lib/page-queries/AdminDashboardPageQuery';
 import { AdminDashboardTemplate } from '@/templates/AdminDashboardTemplate';
+import { ErrorBanner } from '@/components/ui/ErrorBanner';
 
 export default async function AdminPage() {
   const result = await AdminDashboardPageQuery.execute();
@@ -8,25 +9,25 @@ export default async function AdminPage() {
     const error = result.getError();
     if (error === 'notFound') {
       return (
-        <div className="container mx-auto p-6">
-          <div className="bg-racing-red/10 border border-racing-red text-racing-red px-4 py-3 rounded-lg">
-            Access denied - You must be logged in as an Owner or Admin
-          </div>
-        </div>
+        <ErrorBanner
+          title="Access Denied"
+          message="You must be logged in as an Owner or Admin"
+          variant="error"
+        />
       );
     }
     return (
-      <div className="container mx-auto p-6">
-        <div className="bg-racing-red/10 border border-racing-red text-racing-red px-4 py-3 rounded-lg">
-          Failed to load dashboard: {error}
-        </div>
-      </div>
+      <ErrorBanner
+        title="Load Failed"
+        message={`Failed to load dashboard: ${error}`}
+        variant="error"
+      />
     );
   }
   
-  const viewData = result.unwrap();
+  const output = result.unwrap();
   
   // For now, use empty callbacks. In a real app, these would be Server Actions
   // that trigger revalidation or navigation
-  return <AdminDashboardTemplate adminDashboardViewData={viewData} onRefresh={() => {}} isLoading={false} />;
+  return <AdminDashboardTemplate adminDashboardViewData={output} onRefresh={() => {}} isLoading={false} />;
 }