website refactor

apps/website/app/admin/page.tsx

@@ -1,5 +1,5 @@
 import { AdminDashboardPageQuery } from '@/lib/page-queries/AdminDashboardPageQuery';
-import { AdminDashboardTemplate } from '@/templates/AdminDashboardTemplate';
+import { AdminDashboardWrapper } from '@/components/admin/AdminDashboardWrapper';
 import { ErrorBanner } from '@/components/ui/ErrorBanner';
 
 export default async function AdminPage() {
@@ -27,7 +27,6 @@ export default async function AdminPage() {
   
   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={output} onRefresh={() => {}} isLoading={false} />;
+  // Pass to client wrapper for UI interactions
+  return <AdminDashboardWrapper initialViewData={output} />;
 }

apps/website/app/admin/users/AdminUsersWrapper.tsx

@@ -1,122 +0,0 @@
-'use client';
-
-import { useState, useCallback } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { AdminUsersTemplate } from '@/templates/AdminUsersTemplate';
-import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
-import { updateUserStatus, deleteUser } from '../actions';
-import { routes } from '@/lib/routing/RouteConfig';
-
-interface AdminUsersWrapperProps {
-  initialViewData: AdminUsersViewData;
-}
-
-export function AdminUsersWrapper({ initialViewData }: AdminUsersWrapperProps) {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  
-  // UI state (not business logic)
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [deletingUser, setDeletingUser] = useState<string | null>(null);
-  
-  // Current filter values from URL
-  const search = searchParams.get('search') || '';
-  const roleFilter = searchParams.get('role') || '';
-  const statusFilter = searchParams.get('status') || '';
-
-  // Callbacks that update URL (triggers RSC re-render)
-  const handleSearch = useCallback((newSearch: string) => {
-    const params = new URLSearchParams(searchParams);
-    if (newSearch) params.set('search', newSearch);
-    else params.delete('search');
-    params.delete('page'); // Reset to page 1
-    router.push(`${routes.admin.users}?${params.toString()}`);
-  }, [router, searchParams]);
-
-  const handleFilterRole = useCallback((role: string) => {
-    const params = new URLSearchParams(searchParams);
-    if (role) params.set('role', role);
-    else params.delete('role');
-    params.delete('page');
-    router.push(`${routes.admin.users}?${params.toString()}`);
-  }, [router, searchParams]);
-
-  const handleFilterStatus = useCallback((status: string) => {
-    const params = new URLSearchParams(searchParams);
-    if (status) params.set('status', status);
-    else params.delete('status');
-    params.delete('page');
-    router.push(`${routes.admin.users}?${params.toString()}`);
-  }, [router, searchParams]);
-
-  const handleClearFilters = useCallback(() => {
-    router.push(routes.admin.users);
-  }, [router]);
-
-  const handleRefresh = useCallback(() => {
-    router.refresh();
-  }, [router]);
-
-  // Mutation callbacks (call Server Actions)
-  const handleUpdateStatus = useCallback(async (userId: string, newStatus: string) => {
-    try {
-      setLoading(true);
-      const result = await updateUserStatus(userId, newStatus);
-      
-      if (result.isErr()) {
-        setError(result.getError());
-        return;
-      }
-      
-      // Revalidate data
-      router.refresh();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to update status');
-    } finally {
-      setLoading(false);
-    }
-  }, [router]);
-
-  const handleDeleteUser = useCallback(async (userId: string) => {
-    if (!confirm('Are you sure you want to delete this user? This action cannot be undone.')) {
-      return;
-    }
-
-    try {
-      setDeletingUser(userId);
-      const result = await deleteUser(userId);
-      
-      if (result.isErr()) {
-        setError(result.getError());
-        return;
-      }
-      
-      // Revalidate data
-      router.refresh();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to delete user');
-    } finally {
-      setDeletingUser(null);
-    }
-  }, [router]);
-
-  return (
-    <AdminUsersTemplate
-      adminUsersViewData={initialViewData}
-      onRefresh={handleRefresh}
-      onSearch={handleSearch}
-      onFilterRole={handleFilterRole}
-      onFilterStatus={handleFilterStatus}
-      onClearFilters={handleClearFilters}
-      onUpdateStatus={handleUpdateStatus}
-      onDeleteUser={handleDeleteUser}
-      search={search}
-      roleFilter={roleFilter}
-      statusFilter={statusFilter}
-      loading={loading}
-      error={error}
-      deletingUser={deletingUser}
-    />
-  );
-}

apps/website/app/admin/users/page.tsx

@@ -1,28 +1,10 @@
 import { AdminUsersPageQuery } from '@/lib/page-queries/AdminUsersPageQuery';
-import { AdminUsersWrapper } from './AdminUsersWrapper';
+import { AdminUsersWrapper } from '@/components/admin/AdminUsersWrapper';
 import { ErrorBanner } from '@/components/ui/ErrorBanner';
 
-interface AdminUsersPageProps {
-  searchParams?: {
-    search?: string;
-    role?: string;
-    status?: string;
-    page?: string;
-  };
-}
-
-export default async function AdminUsersPage({ searchParams }: AdminUsersPageProps) {
-  // Parse query parameters
-  const query = {
-    search: searchParams?.search,
-    role: searchParams?.role,
-    status: searchParams?.status,
-    page: searchParams?.page ? parseInt(searchParams.page, 10) : 1,
-    limit: 50,
-  };
-
+export default async function AdminUsersPage() {
   // Execute PageQuery using static method
-  const result = await AdminUsersPageQuery.execute(query);
+  const result = await AdminUsersPageQuery.execute();
 
   // Handle errors
   if (result.isErr()) {

apps/website/app/auth/forgot-password/ForgotPasswordClient.tsx

@@ -1,6 +1,6 @@
 /**
  * Forgot Password Client Component
- * 
+ *
  * Handles client-side forgot password flow.
  */
 
@@ -12,6 +12,7 @@ import { ForgotPasswordTemplate } from '@/templates/auth/ForgotPasswordTemplate'
 import { ForgotPasswordMutation } from '@/lib/mutations/auth/ForgotPasswordMutation';
 import { ForgotPasswordViewModelBuilder } from '@/lib/builders/view-models/ForgotPasswordViewModelBuilder';
 import { ForgotPasswordViewModel } from '@/lib/view-models/auth/ForgotPasswordViewModel';
+import { ForgotPasswordFormValidation } from '@/lib/utilities/authValidation';
 
 interface ForgotPasswordClientProps {
   viewData: ForgotPasswordViewData;
@@ -19,24 +20,67 @@ interface ForgotPasswordClientProps {
 
 export function ForgotPasswordClient({ viewData }: ForgotPasswordClientProps) {
   // Build ViewModel from ViewData
-  const [viewModel, setViewModel] = useState<ForgotPasswordViewModel>(() => 
+  const [viewModel, setViewModel] = useState<ForgotPasswordViewModel>(() =>
     ForgotPasswordViewModelBuilder.build(viewData)
   );
 
-  const [formData, setFormData] = useState({ email: '' });
+  // Handle form field changes
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+
+    setViewModel(prev => {
+      const newFormState = {
+        ...prev.formState,
+        fields: {
+          ...prev.formState.fields,
+          [name]: {
+            ...prev.formState.fields[name as keyof typeof prev.formState.fields],
+            value,
+            touched: true,
+            error: undefined,
+          },
+        },
+      };
+      return prev.withFormState(newFormState);
+    });
+  };
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
+    const formData = {
+      email: viewModel.formState.fields.email.value as string,
+    };
+
+    // Validate form
+    const validationErrors = ForgotPasswordFormValidation.validateForm(formData);
+    if (validationErrors.length > 0) {
+      setViewModel(prev => {
+        const newFormState = {
+          ...prev.formState,
+          isValid: false,
+          submitCount: prev.formState.submitCount + 1,
+          fields: {
+            ...prev.formState.fields,
+            email: {
+              ...prev.formState.fields.email,
+              error: validationErrors.find(e => e.field === 'email')?.message,
+              touched: true,
+            },
+          },
+        };
+        return prev.withFormState(newFormState);
+      });
+      return;
+    }
+
     // Update submitting state
     setViewModel(prev => prev.withMutationState(true, null));
 
     try {
       // Execute forgot password mutation
       const mutation = new ForgotPasswordMutation();
-      const result = await mutation.execute({
-        email: formData.email,
-      });
+      const result = await mutation.execute(formData);
 
       if (result.isErr()) {
         const error = result.getError();
@@ -68,7 +112,7 @@ export function ForgotPasswordClient({ viewData }: ForgotPasswordClientProps) {
     <ForgotPasswordTemplate
       viewData={templateViewData}
       formActions={{
-        setFormData,
+        handleChange,
         handleSubmit,
         setShowSuccess: (show) => {
           if (!show) {

apps/website/app/auth/reset-password/ResetPasswordClient.tsx

@@ -1,6 +1,6 @@
 /**
  * Reset Password Client Component
- * 
+ *
  * Handles client-side reset password flow.
  */
 
@@ -13,6 +13,7 @@ import { ResetPasswordTemplate } from '@/templates/auth/ResetPasswordTemplate';
 import { ResetPasswordMutation } from '@/lib/mutations/auth/ResetPasswordMutation';
 import { ResetPasswordViewModelBuilder } from '@/lib/builders/view-models/ResetPasswordViewModelBuilder';
 import { ResetPasswordViewModel } from '@/lib/view-models/auth/ResetPasswordViewModel';
+import { ResetPasswordFormValidation } from '@/lib/utilities/authValidation';
 import { routes } from '@/lib/routing/RouteConfig';
 
 interface ResetPasswordClientProps {
@@ -22,23 +23,63 @@ interface ResetPasswordClientProps {
 export function ResetPasswordClient({ viewData }: ResetPasswordClientProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
-  
+
   // Build ViewModel from ViewData
-  const [viewModel, setViewModel] = useState<ResetPasswordViewModel>(() => 
+  const [viewModel, setViewModel] = useState<ResetPasswordViewModel>(() =>
     ResetPasswordViewModelBuilder.build(viewData)
   );
 
-  const [formData, setFormData] = useState({ 
-    newPassword: '', 
-    confirmPassword: '' 
-  });
+  // Handle form field changes
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+
+    setViewModel(prev => {
+      const newFormState = {
+        ...prev.formState,
+        fields: {
+          ...prev.formState.fields,
+          [name]: {
+            ...prev.formState.fields[name as keyof typeof prev.formState.fields],
+            value,
+            touched: true,
+            error: undefined,
+          },
+        },
+      };
+      return prev.withFormState(newFormState);
+    });
+  };
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    // Validate passwords match
-    if (formData.newPassword !== formData.confirmPassword) {
-      setViewModel(prev => prev.withMutationState(false, 'Passwords do not match'));
+    const formData = {
+      newPassword: viewModel.formState.fields.newPassword.value as string,
+      confirmPassword: viewModel.formState.fields.confirmPassword.value as string,
+    };
+
+    // Validate form
+    const validationErrors = ResetPasswordFormValidation.validateForm(formData);
+    if (validationErrors.length > 0) {
+      setViewModel(prev => {
+        const newFormState = {
+          ...prev.formState,
+          isValid: false,
+          submitCount: prev.formState.submitCount + 1,
+          fields: {
+            ...prev.formState.fields,
+            ...validationErrors.reduce((acc, error) => ({
+              ...acc,
+              [error.field]: {
+                ...prev.formState.fields[error.field],
+                error: error.message,
+                touched: true,
+              },
+            }), {}),
+          },
+        };
+        return prev.withFormState(newFormState);
+      });
       return;
     }
 
@@ -68,7 +109,7 @@ export function ResetPasswordClient({ viewData }: ResetPasswordClientProps) {
       // Success
       const data = result.unwrap();
       setViewModel(prev => prev.withSuccess(data.message));
-      
+
       // Redirect to login after a delay
       setTimeout(() => {
         router.push(routes.auth.login);
@@ -116,7 +157,7 @@ export function ResetPasswordClient({ viewData }: ResetPasswordClientProps) {
       submitError={templateViewData.submitError}
       // Add the additional props
       formActions={{
-        setFormData,
+        handleChange,
         handleSubmit,
         setShowSuccess: (show) => {
           if (!show) {

apps/website/app/auth/signup/SignupClient.tsx

@@ -1,6 +1,6 @@
 /**
  * Signup Client Component
- * 
+ *
  * Handles client-side signup flow.
  */
 
@@ -14,6 +14,7 @@ import { SignupTemplate } from '@/templates/auth/SignupTemplate';
 import { SignupMutation } from '@/lib/mutations/auth/SignupMutation';
 import { SignupViewModelBuilder } from '@/lib/builders/view-models/SignupViewModelBuilder';
 import { SignupViewModel } from '@/lib/view-models/auth/SignupViewModel';
+import { SignupFormValidation } from '@/lib/utilities/authValidation';
 
 interface SignupClientProps {
   viewData: SignupViewData;
@@ -23,26 +24,66 @@ export function SignupClient({ viewData }: SignupClientProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { refreshSession } = useAuth();
-  
+
   // Build ViewModel from ViewData
-  const [viewModel, setViewModel] = useState<SignupViewModel>(() => 
+  const [viewModel, setViewModel] = useState<SignupViewModel>(() =>
     SignupViewModelBuilder.build(viewData)
   );
 
-  const [formData, setFormData] = useState({ 
-    firstName: '', 
-    lastName: '', 
-    email: '', 
-    password: '', 
-    confirmPassword: '' 
-  });
+  // Handle form field changes
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+
+    setViewModel(prev => {
+      const newFormState = {
+        ...prev.formState,
+        fields: {
+          ...prev.formState.fields,
+          [name]: {
+            ...prev.formState.fields[name as keyof typeof prev.formState.fields],
+            value,
+            touched: true,
+            error: undefined,
+          },
+        },
+      };
+      return prev.withFormState(newFormState);
+    });
+  };
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    // Validate passwords match
-    if (formData.password !== formData.confirmPassword) {
-      setViewModel(prev => prev.withMutationState(false, 'Passwords do not match'));
+    const formData = {
+      firstName: viewModel.formState.fields.firstName.value as string,
+      lastName: viewModel.formState.fields.lastName.value as string,
+      email: viewModel.formState.fields.email.value as string,
+      password: viewModel.formState.fields.password.value as string,
+      confirmPassword: viewModel.formState.fields.confirmPassword.value as string,
+    };
+
+    // Validate form
+    const validationErrors = SignupFormValidation.validateForm(formData);
+    if (validationErrors.length > 0) {
+      setViewModel(prev => {
+        const newFormState = {
+          ...prev.formState,
+          isValid: false,
+          submitCount: prev.formState.submitCount + 1,
+          fields: {
+            ...prev.formState.fields,
+            ...validationErrors.reduce((acc, error) => ({
+              ...acc,
+              [error.field]: {
+                ...prev.formState.fields[error.field],
+                error: error.message,
+                touched: true,
+              },
+            }), {}),
+          },
+        };
+        return prev.withFormState(newFormState);
+      });
       return;
     }
 
@@ -50,15 +91,15 @@ export function SignupClient({ viewData }: SignupClientProps) {
     setViewModel(prev => prev.withMutationState(true, null));
 
     try {
-      // Transform to DTO format
-      const displayName = `${formData.firstName} ${formData.lastName}`.trim();
-      
+      // Generate display name
+      const displayName = SignupFormValidation.generateDisplayName(formData.firstName, formData.lastName);
+
       // Execute signup mutation
       const mutation = new SignupMutation();
       const result = await mutation.execute({
         email: formData.email,
         password: formData.password,
-        displayName: displayName || formData.firstName || formData.lastName,
+        displayName,
       });
 
       if (result.isErr()) {
@@ -69,7 +110,7 @@ export function SignupClient({ viewData }: SignupClientProps) {
 
       // Success - refresh session and redirect
       await refreshSession();
-      
+
       const returnTo = searchParams.get('returnTo') ?? '/onboarding';
       router.push(returnTo);
     } catch (error) {
@@ -105,7 +146,7 @@ export function SignupClient({ viewData }: SignupClientProps) {
     <SignupTemplate
       viewData={templateViewData}
       formActions={{
-        setFormData,
+        handleChange,
         handleSubmit,
         setShowPassword: togglePassword,
         setShowConfirmPassword: toggleConfirmPassword,

apps/website/app/drivers/[id]/page.tsx

@@ -4,43 +4,25 @@ import { DriverProfilePageQuery } from '@/lib/page-queries/page-queries/DriverPr
 import { DriverProfilePageClient } from '@/components/drivers/DriverProfilePageClient';
 
 export default async function DriverProfilePage({ params }: { params: { id: string } }) {
-  // Execute the page query
   const result = await DriverProfilePageQuery.execute(params.id);
 
-  // Handle different result statuses
-  switch (result.status) {
-    case 'notFound':
+  if (result.isErr()) {
+    const error = result.getError();
+    if (error === 'NotFound') {
       redirect(routes.error.notFound);
-    case 'redirect':
-      redirect(result.to);
-    case 'error':
-      // Pass error to client component
-      return (
-        <DriverProfilePageClient
-          pageDto={null}
-          error={result.errorId}
-        />
-      );
-    case 'ok':
-      const viewModel = result.dto;
-      const hasData = !!viewModel.currentDriver;
-      
-      if (!hasData) {
-        return (
-          <DriverProfilePageClient
-            pageDto={null}
-            empty={{
-              title: 'Driver not found',
-              description: 'The driver profile may not exist or you may not have access',
-            }}
-          />
-        );
-      }
-
-      return (
-        <DriverProfilePageClient
-          pageDto={viewModel}
-        />
-      );
+    }
+    return (
+      <DriverProfilePageClient
+        pageDto={null}
+        error={error}
+      />
+    );
   }
+
+  const viewData = result.unwrap();
+  return (
+    <DriverProfilePageClient
+      pageDto={viewData}
+    />
+  );
 }

apps/website/app/drivers/page.tsx

@@ -4,43 +4,25 @@ import { DriversPageQuery } from '@/lib/page-queries/page-queries/DriversPageQue
 import { DriversPageClient } from '@/components/drivers/DriversPageClient';
 
 export default async function Page() {
-  // Execute the page query
   const result = await DriversPageQuery.execute();
 
-  // Handle different result statuses
-  switch (result.status) {
-    case 'notFound':
+  if (result.isErr()) {
+    const error = result.getError();
+    if (error === 'NotFound') {
       redirect(routes.error.notFound);
-    case 'redirect':
-      redirect(result.to);
-    case 'error':
-      // Pass error to client component
-      return (
-        <DriversPageClient
-          pageDto={null}
-          error={result.errorId}
-        />
-      );
-    case 'ok':
-      const viewModel = result.dto;
-      const hasData = (viewModel.drivers?.length ?? 0) > 0;
-      
-      if (!hasData) {
-        return (
-          <DriversPageClient
-            pageDto={null}
-            empty={{
-              title: 'No drivers found',
-              description: 'There are no drivers in the system yet.',
-            }}
-          />
-        );
-      }
-
-      return (
-        <DriversPageClient
-          pageDto={viewModel}
-        />
-      );
+    }
+    return (
+      <DriversPageClient
+        pageDto={null}
+        error={error}
+      />
+    );
   }
+
+  const viewData = result.unwrap();
+  return (
+    <DriversPageClient
+      pageDto={viewData}
+    />
+  );
 }

apps/website/app/leaderboards/LeaderboardsPageWrapper.tsx

@@ -1,61 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { LeaderboardsTemplate } from '@/templates/LeaderboardsTemplate';
-import type { LeaderboardsViewData } from '@/lib/view-data/LeaderboardsViewData';
-import { routes } from '@/lib/routing/RouteConfig';
-
-export function LeaderboardsPageWrapper({ data }: { data: LeaderboardsViewData | null }) {
-  const router = useRouter();
-  
-  if (!data || (!data.drivers && !data.teams)) {
-    return null;
-  }
-
-  const handleDriverClick = (driverId: string) => {
-    router.push(routes.driver.detail(driverId));
-  };
-
-  const handleTeamClick = (teamId: string) => {
-    router.push(routes.team.detail(teamId));
-  };
-
-  const handleNavigateToDrivers = () => {
-    router.push(routes.leaderboards.drivers);
-  };
-
-  const handleNavigateToTeams = () => {
-    router.push(routes.team.leaderboard);
-  };
-
-  // Transform ViewData to template props (simple field mapping only)
-  const templateData = {
-    drivers: data.drivers.map(d => ({
-      id: d.id,
-      name: d.name,
-      rating: d.rating,
-      skillLevel: d.skillLevel,
-      nationality: d.nationality,
-      wins: d.wins,
-      rank: d.rank,
-      avatarUrl: d.avatarUrl,
-      position: d.position,
-    })),
-    teams: data.teams.map(t => ({
-      id: t.id,
-      name: t.name,
-      tag: t.tag,
-      memberCount: t.memberCount,
-      category: t.category,
-      totalWins: t.totalWins,
-      logoUrl: t.logoUrl,
-      position: t.position,
-    })),
-    onDriverClick: handleDriverClick,
-    onTeamClick: handleTeamClick,
-    onNavigateToDrivers: handleNavigateToDrivers,
-    onNavigateToTeams: handleNavigateToTeams,
-  };
-
-  return <LeaderboardsTemplate {...templateData} />;
-}

apps/website/app/leaderboards/page.tsx

@@ -1,14 +1,14 @@
 import { notFound, redirect } from 'next/navigation';
 import { LeaderboardsPageQuery } from '@/lib/page-queries/page-queries/LeaderboardsPageQuery';
-import { LeaderboardsPageWrapper } from './LeaderboardsPageWrapper';
+import { LeaderboardsTemplate } from '@/templates/LeaderboardsTemplate';
 import { routes } from '@/lib/routing/RouteConfig';
 
 export default async function LeaderboardsPage() {
   const result = await LeaderboardsPageQuery.execute();
-    
+
   if (result.isErr()) {
     const error = result.getError();
-    
+
     // Handle different error types
     if (error === 'notFound') {
       notFound();
@@ -20,8 +20,8 @@ export default async function LeaderboardsPage() {
       notFound();
     }
   }
-  
+
   // Success
   const viewData = result.unwrap();
-  return <LeaderboardsPageWrapper data={viewData} />;
+  return <LeaderboardsTemplate viewData={viewData} />;
 }

apps/website/app/leagues/[id]/layout.tsx

@@ -1,6 +1,7 @@
 import { notFound } from 'next/navigation';
 import { LeagueDetailPageQuery } from '@/lib/page-queries/page-queries/LeagueDetailPageQuery';
 import { LeagueDetailTemplate } from '@/templates/LeagueDetailTemplate';
+import { Text } from '@/ui/Text';
 
 export default async function LeagueLayout({
   children,
@@ -27,7 +28,7 @@ export default async function LeagueLayout({
         leagueDescription="Failed to load league"
         tabs={[]}
       >
-        <div className="text-center text-gray-400">Failed to load league</div>
+        <Text align="center" className="text-gray-400">Failed to load league</Text>
       </LeagueDetailTemplate>
     );
   }

apps/website/app/leagues/[id]/page.tsx

@@ -2,6 +2,7 @@ import { notFound } from 'next/navigation';
 import { LeagueDetailTemplate } from '@/templates/LeagueDetailTemplate';
 import { LeagueDetailPageQuery } from '@/lib/page-queries/page-queries/LeagueDetailPageQuery';
 import { LeagueDetailViewDataBuilder } from '@/lib/builders/view-data/LeagueDetailViewDataBuilder';
+import { ErrorBanner } from '@/components/ui/ErrorBanner';
 
 interface Props {
   params: { id: string };
@@ -26,11 +27,11 @@ export default async function Page({ params }: Props) {
       default:
         // Return error state
         return (
-          <div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
-            <div className="max-w-6xl mx-auto">
-              <div className="text-center text-gray-400">Failed to load league details</div>
-            </div>
-          </div>
+          <ErrorBanner
+            title="Load Failed"
+            message="Failed to load league details"
+            variant="error"
+          />
         );
     }
   }

apps/website/app/leagues/page.tsx

@@ -1,5 +1,5 @@
 import { notFound } from 'next/navigation';
-import { LeaguesTemplate } from '@/templates/LeaguesTemplate';
+import { LeaguesClient } from '@/components/leagues/LeaguesClient';
 import { LeaguesPageQuery } from '@/lib/page-queries/page-queries/LeaguesPageQuery';
 
 export default async function Page() {
@@ -20,11 +20,11 @@ export default async function Page() {
       case 'UNKNOWN_ERROR':
       default:
         // Return error state - use LeaguesTemplate with empty data
-        return <LeaguesTemplate data={{ leagues: [] }} />;
+        return <LeaguesClient viewData={{ leagues: [] }} />;
     }
   }
   
   const viewData = result.unwrap();
-  
-  return <LeaguesTemplate data={viewData} />;
+
+  return <LeaguesClient viewData={viewData} />;
 }

apps/website/app/media/avatar/[driverId]/route.ts

@@ -18,8 +18,8 @@ export async function GET(
   }
   
   const viewData = result.unwrap();
-  
-  return new NextResponse(viewData.buffer, {
+
+  return new NextResponse(Buffer.from(viewData.buffer, 'base64'), {
     headers: {
       'Content-Type': viewData.contentType,
       'Cache-Control': 'public, max-age=3600',

apps/website/app/media/categories/[categoryId]/icon/route.ts

@@ -18,8 +18,8 @@ export async function GET(
   }
   
   const viewData = result.unwrap();
-  
-  return new NextResponse(viewData.buffer, {
+
+  return new NextResponse(Buffer.from(viewData.buffer, 'base64'), {
     headers: {
       'Content-Type': viewData.contentType,
       'Cache-Control': 'public, max-age=3600',

apps/website/app/media/leagues/[leagueId]/cover/route.ts

@@ -18,8 +18,8 @@ export async function GET(
   }
   
   const viewData = result.unwrap();
-  
-  return new NextResponse(viewData.buffer, {
+
+  return new NextResponse(Buffer.from(viewData.buffer, 'base64'), {
     headers: {
       'Content-Type': viewData.contentType,
       'Cache-Control': 'public, max-age=3600',

apps/website/app/media/leagues/[leagueId]/logo/route.ts

@@ -18,8 +18,8 @@ export async function GET(
   }
   
   const viewData = result.unwrap();
-  
-  return new NextResponse(viewData.buffer, {
+
+  return new NextResponse(Buffer.from(viewData.buffer, 'base64'), {
     headers: {
       'Content-Type': viewData.contentType,
       'Cache-Control': 'public, max-age=3600',

apps/website/app/media/sponsors/[sponsorId]/logo/route.ts

@@ -18,8 +18,8 @@ export async function GET(
   }
   
   const viewData = result.unwrap();
-  
-  return new NextResponse(viewData.buffer, {
+
+  return new NextResponse(Buffer.from(viewData.buffer, 'base64'), {
     headers: {
       'Content-Type': viewData.contentType,
       'Cache-Control': 'public, max-age=3600',

apps/website/app/media/teams/[teamId]/logo/route.ts

@@ -18,8 +18,8 @@ export async function GET(
   }
   
   const viewData = result.unwrap();
-  
-  return new NextResponse(viewData.buffer, {
+
+  return new NextResponse(Buffer.from(viewData.buffer, 'base64'), {
     headers: {
       'Content-Type': viewData.contentType,
       'Cache-Control': 'public, max-age=3600',

apps/website/app/media/tracks/[trackId]/image/route.ts

@@ -18,8 +18,8 @@ export async function GET(
   }
   
   const viewData = result.unwrap();
-  
-  return new NextResponse(viewData.buffer, {
+
+  return new NextResponse(Buffer.from(viewData.buffer, 'base64'), {
     headers: {
       'Content-Type': viewData.contentType,
       'Cache-Control': 'public, max-age=3600',

apps/website/app/onboarding/OnboardingWizardClient.tsx

@@ -1,72 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { OnboardingWizard } from '@/components/onboarding/OnboardingWizard';
-import { routes } from '@/lib/routing/RouteConfig';
-import { completeOnboardingAction } from './completeOnboardingAction';
-import { generateAvatarsAction } from './generateAvatarsAction';
-import { useAuth } from '@/lib/auth/AuthContext';
-
-export function OnboardingWizardClient() {
-  const router = useRouter();
-  const { session } = useAuth();
-
-  const handleCompleteOnboarding = async (input: {
-    firstName: string;
-    lastName: string;
-    displayName: string;
-    country: string;
-    timezone?: string;
-  }) => {
-    try {
-      const result = await completeOnboardingAction(input);
-      
-      if (result.isErr()) {
-        return { success: false, error: result.getError() };
-      }
-      
-      router.push(routes.protected.dashboard);
-      router.refresh();
-      return { success: true };
-    } catch (error) {
-      return { success: false, error: 'Failed to complete onboarding' };
-    }
-  };
-
-  const handleGenerateAvatars = async (params: {
-    facePhotoData: string;
-    suitColor: string;
-  }) => {
-    if (!session?.user?.userId) {
-      return { success: false, error: 'Not authenticated' };
-    }
-
-    try {
-      const result = await generateAvatarsAction({
-        userId: session.user.userId,
-        facePhotoData: params.facePhotoData,
-        suitColor: params.suitColor,
-      });
-
-      if (result.isErr()) {
-        return { success: false, error: result.getError() };
-      }
-
-      const data = result.unwrap();
-      return { success: true, data };
-    } catch (error) {
-      return { success: false, error: 'Failed to generate avatars' };
-    }
-  };
-
-  return (
-    <OnboardingWizard
-      onCompleted={() => {
-        router.push(routes.protected.dashboard);
-        router.refresh();
-      }}
-      onCompleteOnboarding={handleCompleteOnboarding}
-      onGenerateAvatars={handleGenerateAvatars}
-    />
-  );
-}

apps/website/app/onboarding/page.tsx

@@ -1,5 +1,5 @@
 import { redirect } from 'next/navigation';
-import { OnboardingWizardClient } from './OnboardingWizardClient';
+import { OnboardingWizardClient } from '@/components/onboarding/OnboardingWizardClient';
 import { OnboardingPageQuery } from '@/lib/page-queries/page-queries/OnboardingPageQuery';
 import { SearchParamBuilder } from '@/lib/routing/search-params/SearchParamBuilder';
 import { routes } from '@/lib/routing/RouteConfig';

apps/website/app/sponsor/dashboard/page.tsx

@@ -1,450 +1,15 @@
-'use client';
+import { notFound } from 'next/navigation';
+import { SponsorDashboardPageQuery } from '@/lib/page-queries/SponsorDashboardPageQuery';
+import { SponsorDashboardTemplate } from '@/templates/SponsorDashboardTemplate';
 
-export const dynamic = 'force-dynamic';
+export default async function SponsorDashboardPage() {
+  const pageQuery = new SponsorDashboardPageQuery();
+  const result = await pageQuery.execute('demo-sponsor-1');
 
-import { motion, useReducedMotion, AnimatePresence } from 'framer-motion';
-import Card from '@/components/ui/Card';
-import Button from '@/components/ui/Button';
-import StatusBadge from '@/components/ui/StatusBadge';
-import InfoBanner from '@/components/ui/InfoBanner';
-import MetricCard from '@/components/sponsors/MetricCard';
-import SponsorshipCategoryCard from '@/components/sponsors/SponsorshipCategoryCard';
-import ActivityItem from '@/components/sponsors/ActivityItem';
-import RenewalAlert from '@/components/sponsors/RenewalAlert';
-import {
-  BarChart3,
-  Eye,
-  Users,
-  Trophy,
-  TrendingUp,
-  Calendar,
-  DollarSign,
-  Target,
-  ArrowUpRight,
-  ArrowDownRight,
-  ExternalLink,
-  Loader2,
-  Car,
-  Flag,
-  Megaphone,
-  ChevronRight,
-  Plus,
-  Bell,
-  Settings,
-  CreditCard,
-  FileText,
-  RefreshCw
-} from 'lucide-react';
-import Link from 'next/link';
-import { useSponsorDashboard } from '@/lib/hooks/sponsor/useSponsorDashboard';
-
-export default function SponsorDashboardPage() {
-  const shouldReduceMotion = useReducedMotion();
-  
-  // Use the hook instead of manual query construction
-  const { data: dashboardData, isLoading, error, retry } = useSponsorDashboard('demo-sponsor-1');
-
-  if (isLoading) {
-    return (
-      <div className="max-w-7xl mx-auto py-8 px-4 flex items-center justify-center min-h-[600px]">
-        <div className="text-center">
-          <Loader2 className="w-8 h-8 animate-spin text-primary-blue mx-auto mb-4" />
-          <p className="text-gray-400">Loading dashboard...</p>
-        </div>
-      </div>
-    );
+  if (result.isErr()) {
+    notFound();
   }
 
-  if (error || !dashboardData) {
-    return (
-      <div className="max-w-7xl mx-auto py-8 px-4 flex items-center justify-center min-h-[600px]">
-        <div className="text-center">
-          <p className="text-gray-400">{error?.getUserMessage() || 'Failed to load dashboard data'}</p>
-          {error && (
-            <Button variant="secondary" onClick={retry} className="mt-4">
-              Retry
-            </Button>
-          )}
-        </div>
-      </div>
-    );
-  }
-
-  const categoryData = dashboardData.categoryData;
-
-  return (
-    <div className="max-w-7xl mx-auto py-8 px-4">
-      {/* Header */}
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
-        <div>
-          <h2 className="text-2xl font-bold text-white">Sponsor Dashboard</h2>
-          <p className="text-gray-400">Welcome back, {dashboardData.sponsorName}</p>
-        </div>
-        <div className="flex items-center gap-3">
-          {/* Time Range Selector */}
-          <div className="flex items-center bg-iron-gray/50 rounded-lg p-1">
-            {(['7d', '30d', '90d', 'all'] as const).map((range) => (
-              <button
-                key={range}
-                onClick={() => {}}
-                className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
-                  false
-                    ? 'bg-primary-blue text-white'
-                    : 'text-gray-400 hover:text-white'
-                }`}
-              >
-                {range === 'all' ? 'All' : range}
-              </button>
-            ))}
-          </div>
-          
-          {/* Quick Actions */}
-          <Button variant="secondary" className="hidden sm:flex">
-            <RefreshCw className="w-4 h-4" />
-          </Button>
-          <Link href="/sponsor/settings">
-            <Button variant="secondary" className="hidden sm:flex">
-              <Settings className="w-4 h-4" />
-            </Button>
-          </Link>
-        </div>
-      </div>
-
-      {/* Key Metrics */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-        <MetricCard
-          title="Total Impressions"
-          value={dashboardData.totalImpressions}
-          change={dashboardData.metrics.impressionsChange}
-          icon={Eye}
-          delay={0}
-        />
-        <MetricCard
-          title="Unique Viewers"
-          value={dashboardData.metrics.uniqueViewers}
-          change={dashboardData.metrics.viewersChange}
-          icon={Users}
-          delay={0.1}
-        />
-        <MetricCard
-          title="Engagement Rate"
-          value={dashboardData.metrics.exposure}
-          change={dashboardData.metrics.exposureChange}
-          icon={TrendingUp}
-          suffix="%"
-          delay={0.2}
-        />
-        <MetricCard
-          title="Total Investment"
-          value={dashboardData.totalInvestment}
-          icon={DollarSign}
-          prefix="$"
-          delay={0.3}
-        />
-      </div>
-
-      {/* Sponsorship Categories */}
-      <div className="mb-8">
-        <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-semibold text-white">Your Sponsorships</h3>
-          <Link href="/sponsor/campaigns">
-            <Button variant="secondary" className="text-sm">
-              View All
-              <ChevronRight className="w-4 h-4 ml-1" />
-            </Button>
-          </Link>
-        </div>
-        
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
-          <SponsorshipCategoryCard
-            icon={Trophy}
-            title="Leagues"
-            count={categoryData.leagues.count}
-            impressions={categoryData.leagues.impressions}
-            color="text-primary-blue"
-            href="/sponsor/campaigns?type=leagues"
-          />
-          <SponsorshipCategoryCard
-            icon={Users}
-            title="Teams"
-            count={categoryData.teams.count}
-            impressions={categoryData.teams.impressions}
-            color="text-purple-400"
-            href="/sponsor/campaigns?type=teams"
-          />
-          <SponsorshipCategoryCard
-            icon={Car}
-            title="Drivers"
-            count={categoryData.drivers.count}
-            impressions={categoryData.drivers.impressions}
-            color="text-performance-green"
-            href="/sponsor/campaigns?type=drivers"
-          />
-          <SponsorshipCategoryCard
-            icon={Flag}
-            title="Races"
-            count={categoryData.races.count}
-            impressions={categoryData.races.impressions}
-            color="text-warning-amber"
-            href="/sponsor/campaigns?type=races"
-          />
-          <SponsorshipCategoryCard
-            icon={Megaphone}
-            title="Platform Ads"
-            count={categoryData.platform.count}
-            impressions={categoryData.platform.impressions}
-            color="text-racing-red"
-            href="/sponsor/campaigns?type=platform"
-          />
-        </div>
-      </div>
-
-      {/* Main Content Grid */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Left Column - Sponsored Entities */}
-        <div className="lg:col-span-2 space-y-6">
-          {/* Top Performing Sponsorships */}
-          <Card>
-            <div className="flex items-center justify-between p-4 border-b border-charcoal-outline">
-              <h3 className="text-lg font-semibold text-white">Top Performing</h3>
-              <Link href="/leagues">
-                <Button variant="secondary" className="text-sm">
-                  <Plus className="w-4 h-4 mr-1" />
-                  Find More
-                </Button>
-              </Link>
-            </div>
-            <div className="divide-y divide-charcoal-outline/50">
-              {/* Leagues */}
-              {dashboardData.sponsorships.leagues.map((league: any) => (
-                <div key={league.id} className="flex items-center justify-between p-4 hover:bg-iron-gray/30 transition-colors">
-                  <div className="flex items-center gap-4">
-                    <div className={`px-2 py-1 rounded text-xs font-medium ${
-                      league.tier === 'main'
-                        ? 'bg-primary-blue/20 text-primary-blue border border-primary-blue/30'
-                        : 'bg-purple-500/20 text-purple-400 border border-purple-500/30'
-                    }`}>
-                      {league.tier === 'main' ? 'Main' : 'Secondary'}
-                    </div>
-                    <div>
-                      <div className="flex items-center gap-2">
-                        <Trophy className="w-4 h-4 text-gray-500" />
-                        <span className="font-medium text-white">{league.entityName}</span>
-                      </div>
-                      <div className="text-sm text-gray-500">{league.details}</div>
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-4">
-                    <div className="text-right">
-                      <div className="font-semibold text-white">{league.formattedImpressions}</div>
-                      <div className="text-xs text-gray-500">impressions</div>
-                    </div>
-                    <Link href={`/sponsor/leagues/${league.entityId}`}>
-                      <Button variant="secondary" className="text-xs">
-                        <ExternalLink className="w-3 h-3" />
-                      </Button>
-                    </Link>
-                  </div>
-                </div>
-              ))}
-
-              {/* Teams */}
-              {dashboardData.sponsorships.teams.map((team: any) => (
-                <div key={team.id} className="flex items-center justify-between p-4 hover:bg-iron-gray/30 transition-colors">
-                  <div className="flex items-center gap-4">
-                    <div className="px-2 py-1 rounded text-xs font-medium bg-purple-500/20 text-purple-400 border border-purple-500/30">
-                      Team
-                    </div>
-                    <div>
-                      <div className="flex items-center gap-2">
-                        <Users className="w-4 h-4 text-gray-500" />
-                        <span className="font-medium text-white">{team.entityName}</span>
-                      </div>
-                      <div className="text-sm text-gray-500">{team.details}</div>
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-4">
-                    <div className="text-right">
-                      <div className="font-semibold text-white">{team.formattedImpressions}</div>
-                      <div className="text-xs text-gray-500">impressions</div>
-                    </div>
-                    <Button variant="secondary" className="text-xs">
-                      <ExternalLink className="w-3 h-3" />
-                    </Button>
-                  </div>
-                </div>
-              ))}
-
-              {/* Drivers */}
-              {dashboardData.sponsorships.drivers.slice(0, 2).map((driver: any) => (
-                <div key={driver.id} className="flex items-center justify-between p-4 hover:bg-iron-gray/30 transition-colors">
-                  <div className="flex items-center gap-4">
-                    <div className="px-2 py-1 rounded text-xs font-medium bg-performance-green/20 text-performance-green border border-performance-green/30">
-                      Driver
-                    </div>
-                    <div>
-                      <div className="flex items-center gap-2">
-                        <Car className="w-4 h-4 text-gray-500" />
-                        <span className="font-medium text-white">{driver.entityName}</span>
-                      </div>
-                      <div className="text-sm text-gray-500">{driver.details}</div>
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-4">
-                    <div className="text-right">
-                      <div className="font-semibold text-white">{driver.formattedImpressions}</div>
-                      <div className="text-xs text-gray-500">impressions</div>
-                    </div>
-                    <Button variant="secondary" className="text-xs">
-                      <ExternalLink className="w-3 h-3" />
-                    </Button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </Card>
-
-          {/* Upcoming Events */}
-          <Card>
-            <div className="p-4 border-b border-charcoal-outline">
-              <h3 className="text-lg font-semibold text-white flex items-center gap-2">
-                <Calendar className="w-5 h-5 text-warning-amber" />
-                Upcoming Sponsored Events
-              </h3>
-            </div>
-            <div className="p-4">
-              {dashboardData.sponsorships.races.length > 0 ? (
-                <div className="space-y-3">
-                  {dashboardData.sponsorships.races.map((race: any) => (
-                    <div key={race.id} className="flex items-center justify-between p-3 rounded-lg bg-iron-gray/30">
-                      <div className="flex items-center gap-3">
-                        <div className="w-10 h-10 rounded-lg bg-warning-amber/10 flex items-center justify-center">
-                          <Flag className="w-5 h-5 text-warning-amber" />
-                        </div>
-                        <div>
-                          <p className="font-medium text-white">{race.entityName}</p>
-                          <p className="text-sm text-gray-500">{race.details}</p>
-                        </div>
-                      </div>
-                      <div className="text-right">
-                        <span className="px-2 py-1 rounded text-xs font-medium bg-warning-amber/20 text-warning-amber">
-                          {race.status}
-                        </span>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <div className="text-center py-8 text-gray-500">
-                  <Calendar className="w-8 h-8 mx-auto mb-2 opacity-50" />
-                  <p>No upcoming sponsored events</p>
-                </div>
-              )}
-            </div>
-          </Card>
-        </div>
-
-        {/* Right Column - Activity & Quick Actions */}
-        <div className="space-y-6">
-          {/* Quick Actions */}
-          <Card className="p-4">
-            <h3 className="text-lg font-semibold text-white mb-4">Quick Actions</h3>
-            <div className="space-y-2">
-              <Link href="/leagues" className="block">
-                <Button variant="secondary" className="w-full justify-start">
-                  <Target className="w-4 h-4 mr-2" />
-                  Find Leagues to Sponsor
-                </Button>
-              </Link>
-              <Link href="/teams" className="block">
-                <Button variant="secondary" className="w-full justify-start">
-                  <Users className="w-4 h-4 mr-2" />
-                  Browse Teams
-                </Button>
-              </Link>
-              <Link href="/drivers" className="block">
-                <Button variant="secondary" className="w-full justify-start">
-                  <Car className="w-4 h-4 mr-2" />
-                  Discover Drivers
-                </Button>
-              </Link>
-              <Link href="/sponsor/billing" className="block">
-                <Button variant="secondary" className="w-full justify-start">
-                  <CreditCard className="w-4 h-4 mr-2" />
-                  Manage Billing
-                </Button>
-              </Link>
-              <Link href="/sponsor/campaigns" className="block">
-                <Button variant="secondary" className="w-full justify-start">
-                  <BarChart3 className="w-4 h-4 mr-2" />
-                  View Analytics
-                </Button>
-              </Link>
-            </div>
-          </Card>
-
-          {/* Renewal Alerts */}
-          {dashboardData.upcomingRenewals.length > 0 && (
-            <Card className="p-4">
-              <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
-                <Bell className="w-5 h-5 text-warning-amber" />
-                Upcoming Renewals
-              </h3>
-              <div className="space-y-3">
-                {dashboardData.upcomingRenewals.map((renewal: any) => (
-                  <RenewalAlert key={renewal.id} renewal={renewal} />
-                ))}
-              </div>
-            </Card>
-          )}
-
-          {/* Recent Activity */}
-          <Card className="p-4">
-            <h3 className="text-lg font-semibold text-white mb-4">Recent Activity</h3>
-            <div>
-              {dashboardData.recentActivity.map((activity: any) => (
-                <ActivityItem key={activity.id} activity={activity} />
-              ))}
-            </div>
-          </Card>
-
-          {/* Investment Summary */}
-          <Card className="p-4">
-            <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
-              <FileText className="w-5 h-5 text-primary-blue" />
-              Investment Summary
-            </h3>
-            <div className="space-y-3">
-              <div className="flex items-center justify-between">
-                <span className="text-gray-400">Active Sponsorships</span>
-                <span className="font-medium text-white">{dashboardData.activeSponsorships}</span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-gray-400">Total Investment</span>
-                <span className="font-medium text-white">{dashboardData.formattedTotalInvestment}</span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-gray-400">Cost per 1K Views</span>
-                <span className="font-medium text-performance-green">
-                  {dashboardData.costPerThousandViews}
-                </span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-gray-400">Next Invoice</span>
-                <span className="font-medium text-white">Jan 1, 2026</span>
-              </div>
-              <div className="pt-3 border-t border-charcoal-outline">
-                <Link href="/sponsor/billing">
-                  <Button variant="secondary" className="w-full text-sm">
-                    <CreditCard className="w-4 h-4 mr-2" />
-                    View Billing Details
-                  </Button>
-                </Link>
-              </div>
-            </div>
-          </Card>
-        </div>
-      </div>
-    </div>
-  );
+  const viewData = result.unwrap();
+  return <SponsorDashboardTemplate viewData={viewData} />;
 }