website refactor

.dockerignore

@@ -78,4 +78,5 @@ userData
 # Development files
 .prettierrc
 .eslintrc*
+! .eslintrc.json
 tsconfig.tsbuildinfo

README.docker.md

@@ -100,6 +100,9 @@ The new unified e2e test environment runs **everything in Docker** - website, AP
 # Run complete e2e test suite
 npm run test:e2e:website
 
+# Run specific test file (fast, no rebuild)
+npm run test:e2e:run -- tests/e2e/website/website-pages.e2e.test.ts
+
 # Or step-by-step:
 npm run docker:e2e:up      # Start all services (fast, uses cache)
 npm run docker:e2e:build   # Force rebuild website image

apps/api/src/domain/league/LeagueService.ts

@@ -777,7 +777,14 @@ export class LeagueService {
       throw new Error(fullConfigResult.unwrapErr().code);
     }
 
-    await this.getLeagueOwnerSummaryUseCase.execute({ leagueId });
+    // Present the full config result
+    this.leagueConfigPresenter.present(fullConfigResult.unwrap());
+
+    const ownerSummaryResult = await this.getLeagueOwnerSummaryUseCase.execute({ leagueId });
+    if (ownerSummaryResult.isErr()) {
+      throw new Error(ownerSummaryResult.unwrapErr().code);
+    }
+    this.getLeagueOwnerSummaryPresenter.present(ownerSummaryResult.unwrap());
     const ownerSummary = this.getLeagueOwnerSummaryPresenter.getViewModel()!;
 
     const configForm = this.leagueConfigPresenter.getViewModel();

apps/api/src/domain/race/RaceProviders.ts

@@ -113,7 +113,7 @@ export const RaceProviders: Provider[] = [
   {
     provide: RACE_DETAIL_PRESENTER_TOKEN,
     useFactory: (driverRatingProvider: DriverRatingProvider, imageService: InMemoryImageServiceAdapter) => 
-      new RaceDetailPresenter(driverRatingProvider, imageService, { raceId: '', driverId: '' }),
+      new RaceDetailPresenter(driverRatingProvider, imageService),
     inject: [DRIVER_RATING_PROVIDER_TOKEN, IMAGE_SERVICE_TOKEN],
   },
   {

apps/api/src/domain/race/RaceService.ts

@@ -166,7 +166,7 @@ export class RaceService {
     }
     
     const value = result.unwrap();
-    this.raceDetailPresenter.present(value);
+    this.raceDetailPresenter.present(value, params);
     return this.raceDetailPresenter;
   }
 

apps/api/src/domain/race/presenters/RaceDetailPresenter.ts

@@ -13,19 +13,20 @@ export type GetRaceDetailResponseModel = RaceDetailDTO;
 
 export class RaceDetailPresenter {
   private result: GetRaceDetailResult | null = null;
+  private params: GetRaceDetailParamsDTO | null = null;
 
   constructor(
     private readonly driverRatingProvider: DriverRatingProvider,
     private readonly imageService: ImageServicePort,
-    private readonly params: GetRaceDetailParamsDTO,
   ) {}
 
-  present(result: GetRaceDetailResult): void {
+  present(result: GetRaceDetailResult, params: GetRaceDetailParamsDTO): void {
     this.result = result;
+    this.params = params;
   }
 
   async getResponseModel(): Promise<GetRaceDetailResponseModel | null> {
-    if (!this.result) {
+    if (!this.result || !this.params) {
       return null;
     }
 

apps/website/Dockerfile.e2e

@@ -42,7 +42,7 @@ COPY core ./core
 COPY adapters ./adapters
 COPY apps/website ./apps/website
 COPY scripts ./scripts
-COPY *.json *.js *.ts *.md ./
+COPY tsconfig.json tsconfig.base.json .eslintrc.json ./
 
 # Set environment variables for build
 ENV NODE_ENV=${NODE_ENV}

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

@@ -13,7 +13,7 @@ import { AuthError } from '@/ui/AuthError';
 export default async function ForgotPasswordPage({
   searchParams,
 }: {
-  searchParams: Promise<URLSearchParams>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
   // Execute PageQuery
   const params = await searchParams;

apps/website/app/auth/login/page.tsx

@@ -13,7 +13,7 @@ import { AuthError } from '@/ui/AuthError';
 export default async function LoginPage({
   searchParams,
 }: {
-  searchParams: Promise<URLSearchParams>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
   // Execute PageQuery
   const params = await searchParams;

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

@@ -13,7 +13,7 @@ import { AuthError } from '@/ui/AuthError';
 export default async function ResetPasswordPage({
   searchParams,
 }: {
-  searchParams: Promise<URLSearchParams>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
   // Execute PageQuery
   const params = await searchParams;

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

@@ -13,7 +13,7 @@ import { AuthError } from '@/ui/AuthError';
 export default async function SignupPage({
   searchParams,
 }: {
-  searchParams: Promise<URLSearchParams>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
   // Execute PageQuery
   const params = await searchParams;

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

@@ -3,8 +3,9 @@ import { routes } from '@/lib/routing/RouteConfig';
 import { DriverProfilePageQuery } from '@/lib/page-queries/DriverProfilePageQuery';
 import { DriverProfilePageClient } from './DriverProfilePageClient';
 
-export default async function DriverProfilePage({ params }: { params: { id: string } }) {
+export default async function DriverProfilePage({ params }: { params: Promise<{ id: string }> }) {
-  const result = await DriverProfilePageQuery.execute(params.id);
+  const { id } = await params;
+  const result = await DriverProfilePageQuery.execute(id);
 
   if (result.isErr()) {
     const error = result.getError();

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

@@ -9,9 +9,9 @@ export default async function LeagueLayout({
   params,
 }: {
   children: React.ReactNode;
-  params: { id: string };
+  params: Promise<{ id: string }>;
 }) {
-  const leagueId = params.id;
+  const { id: leagueId } = await params;
   
   // Execute PageQuery to get league data
   const result = await LeagueDetailPageQuery.execute(leagueId);

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

@@ -5,12 +5,13 @@ import { LeagueDetailViewDataBuilder } from '@/lib/builders/view-data/LeagueDeta
 import { ErrorBanner } from '@/ui/ErrorBanner';
 
 interface Props {
-  params: { id: string };
+  params: Promise<{ id: string }>;
 }
 
 export default async function Page({ params }: Props) {
+  const { id } = await params;
   // Execute the PageQuery
-  const result = await LeagueDetailPageQuery.execute(params.id);
+  const result = await LeagueDetailPageQuery.execute(id);
   
   // Handle different result types
   if (result.isErr()) {

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

@@ -3,11 +3,11 @@ import { RulebookTemplate } from '@/templates/RulebookTemplate';
 import { notFound } from 'next/navigation';
 
 interface Props {
-  params: { id: string };
+  params: Promise<{ id: string }>;
 }
 
 export default async function Page({ params }: Props) {
-  const leagueId = params.id;
+  const { id: leagueId } = await params;
 
   if (!leagueId) {
     notFound();

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

@@ -3,11 +3,11 @@ import { LeagueScheduleTemplate } from '@/templates/LeagueScheduleTemplate';
 import { notFound } from 'next/navigation';
 
 interface Props {
-  params: { id: string };
+  params: Promise<{ id: string }>;
 }
 
 export default async function LeagueSchedulePage({ params }: Props) {
-  const leagueId = params.id;
+  const { id: leagueId } = await params;
 
   if (!leagueId) {
     notFound();

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

@@ -3,11 +3,11 @@ import { LeagueSettingsTemplate } from '@/templates/LeagueSettingsTemplate';
 import { notFound } from 'next/navigation';
 
 interface Props {
-  params: { id: string };
+  params: Promise<{ id: string }>;
 }
 
 export default async function LeagueSettingsPage({ params }: Props) {
-  const leagueId = params.id;
+  const { id: leagueId } = await params;
 
   if (!leagueId) {
     notFound();

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

@@ -3,11 +3,11 @@ import { LeagueSponsorshipsTemplate } from '@/templates/LeagueSponsorshipsTempla
 import { notFound } from 'next/navigation';
 
 interface Props {
-  params: { id: string };
+  params: Promise<{ id: string }>;
 }
 
 export default async function LeagueSponsorshipsPage({ params }: Props) {
-  const leagueId = params.id;
+  const { id: leagueId } = await params;
 
   if (!leagueId) {
     notFound();

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

@@ -3,11 +3,11 @@ import { LeagueStandingsTemplate } from '@/templates/LeagueStandingsTemplate';
 import { notFound } from 'next/navigation';
 
 interface Props {
-  params: { id: string };
+  params: Promise<{ id: string }>;
 }
 
 export default async function Page({ params }: Props) {
-  const leagueId = params.id;
+  const { id: leagueId } = await params;
 
   if (!leagueId) {
     notFound();

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

@@ -3,11 +3,11 @@ import { StewardingPageClient } from './StewardingPageClient';
 import { notFound } from 'next/navigation';
 
 interface Props {
-  params: { id: string };
+  params: Promise<{ id: string }>;
 }
 
 export default async function LeagueStewardingPage({ params }: Props) {
-  const leagueId = params.id;
+  const { id: leagueId } = await params;
 
   if (!leagueId) {
     notFound();

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

@@ -3,9 +3,9 @@ import { GetAvatarPageQuery } from '@/lib/page-queries/media/GetAvatarPageQuery'
 
 export async function GET(
   request: NextRequest,
-  { params }: { params: { driverId: string } }
+  { params }: { params: Promise<{ driverId: string }> }
 ) {
-  const { driverId } = params;
+  const { driverId } = await params;
   
   const result = await GetAvatarPageQuery.execute({ driverId });
   

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

@@ -3,9 +3,9 @@ import { GetCategoryIconPageQuery } from '@/lib/page-queries/media/GetCategoryIc
 
 export async function GET(
   request: NextRequest,
-  { params }: { params: { categoryId: string } }
+  { params }: { params: Promise<{ categoryId: string }> }
 ) {
-  const { categoryId } = params;
+  const { categoryId } = await params;
   
   const result = await GetCategoryIconPageQuery.execute({ categoryId });
   

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

@@ -3,9 +3,9 @@ import { GetLeagueCoverPageQuery } from '@/lib/page-queries/media/GetLeagueCover
 
 export async function GET(
   request: NextRequest,
-  { params }: { params: { leagueId: string } }
+  { params }: { params: Promise<{ leagueId: string }> }
 ) {
-  const { leagueId } = params;
+  const { leagueId } = await params;
   
   const result = await GetLeagueCoverPageQuery.execute({ leagueId });
   

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

@@ -3,9 +3,9 @@ import { GetLeagueLogoPageQuery } from '@/lib/page-queries/media/GetLeagueLogoPa
 
 export async function GET(
   request: NextRequest,
-  { params }: { params: { leagueId: string } }
+  { params }: { params: Promise<{ leagueId: string }> }
 ) {
-  const { leagueId } = params;
+  const { leagueId } = await params;
   
   const result = await GetLeagueLogoPageQuery.execute({ leagueId });
   

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

@@ -3,9 +3,9 @@ import { GetSponsorLogoPageQuery } from '@/lib/page-queries/media/GetSponsorLogo
 
 export async function GET(
   request: NextRequest,
-  { params }: { params: { sponsorId: string } }
+  { params }: { params: Promise<{ sponsorId: string }> }
 ) {
-  const { sponsorId } = params;
+  const { sponsorId } = await params;
   
   const result = await GetSponsorLogoPageQuery.execute({ sponsorId });
   

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

@@ -3,9 +3,9 @@ import { GetTeamLogoPageQuery } from '@/lib/page-queries/media/GetTeamLogoPageQu
 
 export async function GET(
   request: NextRequest,
-  { params }: { params: { teamId: string } }
+  { params }: { params: Promise<{ teamId: string }> }
 ) {
-  const { teamId } = params;
+  const { teamId } = await params;
   
   const result = await GetTeamLogoPageQuery.execute({ teamId });
   

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

@@ -3,9 +3,9 @@ import { GetTrackImagePageQuery } from '@/lib/page-queries/media/GetTrackImagePa
 
 export async function GET(
   request: NextRequest,
-  { params }: { params: { trackId: string } }
+  { params }: { params: Promise<{ trackId: string }> }
 ) {
-  const { trackId } = params;
+  const { trackId } = await params;
   
   const result = await GetTrackImagePageQuery.execute({ trackId });
   

apps/website/app/races/[id]/RaceDetailPageClient.tsx

@@ -1,83 +1,79 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useCallback } from 'react';
-import { RaceDetailTemplate, type RaceDetailViewData } from '@/templates/RaceDetailTemplate';
+import { RaceDetailTemplate, RaceDetailViewData } from '@/templates/RaceDetailTemplate';
+import { useRouter } from 'next/navigation';
 
-interface RaceDetailPageClientProps {
+interface Props {
-  viewData: RaceDetailViewData;
+  data: RaceDetailViewData;
-  onBack: () => void;
-  onRegister: () => void;
-  onWithdraw: () => void;
-  onCancel: () => void;
-  onReopen: () => void;
-  onEndRace: () => void;
-  onFileProtest: () => void;
-  onResultsClick: () => void;
-  onStewardingClick: () => void;
-  onLeagueClick: (id: string) => void;
-  onDriverClick: (id: string) => void;
-  isOwnerOrAdmin: boolean;
 }
 
-export function RaceDetailPageClient({
+export default function RaceDetailPageClient({ data: viewData }: Props) {
-  viewData,
+  const router = useRouter();
-  onBack,
+  const [animatedRatingChange] = useState(0);
-  onRegister,
-  onWithdraw,
-  onCancel,
-  onReopen,
-  onEndRace,
-  onFileProtest,
-  onResultsClick,
-  onStewardingClick,
-  onLeagueClick,
-  onDriverClick,
-  isOwnerOrAdmin
-}: RaceDetailPageClientProps) {
-  const [animatedRatingChange, setAnimatedRatingChange] = useState(0);
 
-  const ratingChange = viewData.userResult?.ratingChange ?? null;
+  const handleBack = useCallback(() => {
+    router.back();
+  }, [router]);
 
-  useEffect(() => {
+  const handleRegister = useCallback(() => {
-    if (ratingChange !== null) {
+    console.log('Register');
-      let start = 0;
+  }, []);
-      const end = ratingChange;
-      const duration = 1000;
-      const startTime = performance.now();
 
-      const animate = (currentTime: number) => {
+  const handleWithdraw = useCallback(() => {
-        const elapsed = currentTime - startTime;
+    console.log('Withdraw');
-        const progress = Math.min(elapsed / duration, 1);
+  }, []);
-        const eased = 1 - Math.pow(1 - progress, 3);
-        const current = Math.round(start + (end - start) * eased);
-        setAnimatedRatingChange(current);
 
-        if (progress < 1) {
+  const handleCancel = useCallback(() => {
-          requestAnimationFrame(animate);
+    console.log('Cancel');
-        }
+  }, []);
-      };
 
-      requestAnimationFrame(animate);
+  const handleReopen = useCallback(() => {
-    }
+    console.log('Reopen');
-  }, [ratingChange]);
+  }, []);
+
+  const handleEndRace = useCallback(() => {
+    console.log('End Race');
+  }, []);
+
+  const handleFileProtest = useCallback(() => {
+    console.log('File Protest');
+  }, []);
+
+  const handleResultsClick = useCallback(() => {
+    router.push(`/races/${viewData.race.id}/results`);
+  }, [router, viewData.race.id]);
+
+  const handleStewardingClick = useCallback(() => {
+    router.push(`/races/${viewData.race.id}/stewarding`);
+  }, [router, viewData.race.id]);
+
+  const handleLeagueClick = useCallback((leagueId: string) => {
+    router.push(`/leagues/${leagueId}`);
+  }, [router]);
+
+  const handleDriverClick = useCallback((driverId: string) => {
+    router.push(`/drivers/${driverId}`);
+  }, [router]);
 
   return (
     <RaceDetailTemplate
       viewData={viewData}
       isLoading={false}
-      onBack={onBack}
+      error={null}
-      onRegister={onRegister}
+      onBack={handleBack}
-      onWithdraw={onWithdraw}
+      onRegister={handleRegister}
-      onCancel={onCancel}
+      onWithdraw={handleWithdraw}
-      onReopen={onReopen}
+      onCancel={handleCancel}
-      onEndRace={onEndRace}
+      onReopen={handleReopen}
-      onFileProtest={onFileProtest}
+      onEndRace={handleEndRace}
-      onResultsClick={onResultsClick}
+      onFileProtest={handleFileProtest}
-      onStewardingClick={onStewardingClick}
+      onResultsClick={handleResultsClick}
-      onLeagueClick={onLeagueClick}
+      onStewardingClick={handleStewardingClick}
-      onDriverClick={onDriverClick}
+      onLeagueClick={handleLeagueClick}
-      isOwnerOrAdmin={isOwnerOrAdmin}
+      onDriverClick={handleDriverClick}
       animatedRatingChange={animatedRatingChange}
+      mutationLoading={{}}
     />
   );
 }

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

@@ -1,16 +1,16 @@
 import { notFound } from 'next/navigation';
 import { PageWrapper } from '@/components/shared/state/PageWrapper';
-import { RaceDetailTemplate } from '@/templates/RaceDetailTemplate';
 import { RaceDetailPageQuery } from '@/lib/page-queries/races/RaceDetailPageQuery';
+import RaceDetailPageClient from './RaceDetailPageClient';
 
 interface RaceDetailPageProps {
-  params: {
+  params: Promise<{
     id: string;
-  };
+  }>;
 }
 
 export default async function RaceDetailPage({ params }: RaceDetailPageProps) {
-  const raceId = params.id;
+  const { id: raceId } = await params;
   
   if (!raceId) {
     notFound();
@@ -22,96 +22,25 @@ export default async function RaceDetailPage({ params }: RaceDetailPageProps) {
   if (result.isErr()) {
     const error = result.getError();
     
-    switch (error) {
+    if (error === 'notFound') {
-      case 'notFound':
       notFound();
-      case 'redirect':
+    }
-        notFound();
+    // For other errors, let PageWrapper handle it
-      default:
-        // Pass error to template via PageWrapper
     return (
       <PageWrapper
-            data={null}
+        data={undefined}
-            Template={() => (
+        Template={RaceDetailPageClient as any}
-              <RaceDetailTemplate
+        error={new Error('Failed to load race details')}
-                viewData={undefined}
-                isLoading={false}
-                error={new globalThis.Error('Failed to load race details')}
-                onBack={() => {}}
-                onRegister={() => {}}
-                onWithdraw={() => {}}
-                onCancel={() => {}}
-                onReopen={() => {}}
-                onEndRace={() => {}}
-                onFileProtest={() => {}}
-                onResultsClick={() => {}}
-                onStewardingClick={() => {}}
-                onLeagueClick={() => {}}
-                onDriverClick={() => {}}
-                isOwnerOrAdmin={false}
-                animatedRatingChange={0}
-                mutationLoading={{
-                  register: false,
-                  withdraw: false,
-                  cancel: false,
-                  reopen: false,
-                  complete: false,
-                }}
-              />
-            )}
-            loading={{ variant: 'skeleton', message: 'Loading race details...' }}
-            errorConfig={{ variant: 'full-screen' }}
-            empty={{
-              icon: require('lucide-react').Flag,
-              title: 'Race not found',
-              description: 'The race may have been cancelled or deleted',
-              action: { label: 'Back to Races', onClick: () => {} }
-            }}
       />
     );
   }
-  }
   
   const viewData = result.unwrap();
   
   return (
     <PageWrapper
       data={viewData}
-      Template={() => (
+      Template={RaceDetailPageClient}
-        <RaceDetailTemplate
-          viewData={viewData}
-          isLoading={false}
-          error={null}
-          onBack={() => {}}
-          onRegister={() => {}}
-          onWithdraw={() => {}}
-          onCancel={() => {}}
-          onReopen={() => {}}
-          onEndRace={() => {}}
-          onFileProtest={() => {}}
-          onResultsClick={() => {}}
-          onStewardingClick={() => {}}
-          onLeagueClick={() => {}}
-          onDriverClick={() => {}}
-          isOwnerOrAdmin={false}
-          animatedRatingChange={0}
-          mutationLoading={{
-            register: false,
-            withdraw: false,
-            cancel: false,
-            reopen: false,
-            complete: false,
-          }}
-        />
-      )}
-      loading={{ variant: 'skeleton', message: 'Loading race details...' }}
-      errorConfig={{ variant: 'full-screen' }}
-      empty={{
-        icon: require('lucide-react').Flag,
-        title: 'Race not found',
-        description: 'The race may have been cancelled or deleted',
-        action: { label: 'Back to Races', onClick: () => {} }
-      }}
     />
   );
 }

apps/website/app/races/[id]/results/RaceResultsPageClient.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import React, { useState, useCallback } from 'react';
+import { RaceResultsTemplate } from '@/templates/RaceResultsTemplate';
+import { RaceResultsViewData } from '@/lib/view-data/races/RaceResultsViewData';
+import { useRouter } from 'next/navigation';
+
+interface Props {
+  data: RaceResultsViewData;
+}
+
+export default function RaceResultsPageClient({ data: viewData }: Props) {
+  const router = useRouter();
+  const [importing, setImporting] = useState(false);
+  const [importSuccess, setImportSuccess] = useState(false);
+  const [importError, setImportError] = useState<string | null>(null);
+  const [showImportForm, setShowImportForm] = useState(false);
+
+  const handleBack = useCallback(() => {
+    router.back();
+  }, [router]);
+
+  const handleImportResults = useCallback(async () => {
+    setImporting(true);
+    setImportError(null);
+    try {
+      // Mock import
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      setImportSuccess(true);
+    } catch (err) {
+      setImportError('Failed to import results');
+    } finally {
+      setImporting(false);
+    }
+  }, []);
+
+  const handlePenaltyClick = useCallback(() => {
+    console.log('Penalty click');
+  }, []);
+
+  return (
+    <RaceResultsTemplate
+      viewData={viewData}
+      isAdmin={false}
+      isLoading={false}
+      error={null}
+      onBack={handleBack}
+      onImportResults={handleImportResults}
+      onPenaltyClick={handlePenaltyClick}
+      importing={importing}
+      importSuccess={importSuccess}
+      importError={importError}
+      showImportForm={showImportForm}
+      setShowImportForm={setShowImportForm}
+    />
+  );
+}

apps/website/app/races/[id]/results/page.tsx

@@ -1,17 +1,16 @@
 import { notFound } from 'next/navigation';
 import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
-import { RaceResultsTemplate } from '@/templates/RaceResultsTemplate';
 import { RaceResultsPageQuery } from '@/lib/page-queries/races/RaceResultsPageQuery';
-import { Trophy } from 'lucide-react';
+import RaceResultsPageClient from './RaceResultsPageClient';
 
 interface RaceResultsPageProps {
-  params: {
+  params: Promise<{
     id: string;
-  };
+  }>;
 }
 
 export default async function RaceResultsPage({ params }: RaceResultsPageProps) {
-  const raceId = params.id;
+  const { id: raceId } = await params;
   
   if (!raceId) {
     notFound();
@@ -23,90 +22,27 @@ export default async function RaceResultsPage({ params }: RaceResultsPageProps)
   if (result.isErr()) {
     const error = result.getError();
     
-    switch (error) {
+    if (error === 'notFound') {
-      case 'notFound':
       notFound();
-      case 'redirect':
+    }
-        notFound();
+    // For other errors, let StatefulPageWrapper handle it
-      default:
-        // Pass error to template via StatefulPageWrapper
     return (
       <StatefulPageWrapper
-            data={null}
+        data={undefined}
-            isLoading={false}
+        Template={RaceResultsPageClient as any}
-            error={new globalThis.Error('Failed to load race results')}
+        error={new Error('Failed to load race results')}
         retry={() => Promise.resolve()}
-            Template={() => (
-              <RaceResultsTemplate
-                viewData={{
-                  raceTrack: '',
-                  raceScheduledAt: '',
-                  totalDrivers: 0,
-                  leagueName: '',
-                  raceSOF: null,
-                  results: [],
-                  penalties: [],
-                  pointsSystem: {},
-                  fastestLapTime: 0,
-                }}
-                isAdmin={false}
-                isLoading={false}
-                error={null}
-                onBack={() => {}}
-                onImportResults={() => Promise.resolve()}
-                onPenaltyClick={() => {}}
-                importing={false}
-                importSuccess={false}
-                importError={null}
-                showImportForm={false}
-                setShowImportForm={() => {}}
-              />
-            )}
-            loading={{ variant: 'skeleton', message: 'Loading race results...' }}
-            errorConfig={{ variant: 'full-screen' }}
-            empty={{
-              icon: Trophy,
-              title: 'No results available',
-              description: 'Race results will appear here once the race is completed',
-              action: { label: 'Back to Race', onClick: () => {} }
-            }}
       />
     );
   }
-  }
   
   const viewData = result.unwrap();
 
   return (
     <StatefulPageWrapper
       data={viewData}
-      isLoading={false}
+      Template={RaceResultsPageClient}
-      error={null}
       retry={() => Promise.resolve()}
-      Template={() => (
-        <RaceResultsTemplate
-          viewData={viewData}
-          isAdmin={false}
-          isLoading={false}
-          error={null}
-          onBack={() => {}}
-          onImportResults={() => Promise.resolve()}
-          onPenaltyClick={() => {}}
-          importing={false}
-          importSuccess={false}
-          importError={null}
-          showImportForm={false}
-          setShowImportForm={() => {}}
-        />
-      )}
-      loading={{ variant: 'skeleton', message: 'Loading race results...' }}
-      errorConfig={{ variant: 'full-screen' }}
-      empty={{
-        icon: Trophy,
-        title: 'No results available',
-        description: 'Race results will appear here once the race is completed',
-        action: { label: 'Back to Race', onClick: () => {} }
-      }}
     />
   );
 }

apps/website/app/races/[id]/stewarding/page.tsx

@@ -6,16 +6,16 @@ import { RaceStewardingTemplate, type StewardingTab } from '@/templates/RaceStew
 import { RaceStewardingPageQuery } from '@/lib/page-queries/races/RaceStewardingPageQuery';
 import { type RaceStewardingViewData } from '@/lib/view-data/races/RaceStewardingViewData';
 import { Gavel } from 'lucide-react';
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, use } from 'react';
 
 interface RaceStewardingPageProps {
-  params: {
+  params: Promise<{
     id: string;
-  };
+  }>;
 }
 
 export default function RaceStewardingPage({ params }: RaceStewardingPageProps) {
-  const raceId = params.id;
+  const { id: raceId } = use(params);
   const [activeTab, setActiveTab] = useState<StewardingTab>('pending');
   
   if (!raceId) {

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

@@ -6,7 +6,8 @@ import { EnhancedErrorReporter } from '@/lib/infrastructure/EnhancedErrorReporte
 import { ConsoleLogger } from '@/lib/infrastructure/logging/ConsoleLogger';
 import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
 
-export default async function Page({ params }: { params: { id: string } }) {
+export default async function Page({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
   // Manual wiring: create dependencies
   const baseUrl = getWebsiteApiBaseUrl();
   const logger = new ConsoleLogger();
@@ -20,7 +21,7 @@ export default async function Page({ params }: { params: { id: string } }) {
   const apiClient = new SponsorsApiClient(baseUrl, errorReporter, logger);
 
   // Fetch data
-  const data = await apiClient.getLeagueDetail(params.id);
+  const data = await apiClient.getLeagueDetail(id);
   
   if (!data) notFound();
   

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

@@ -2,8 +2,9 @@ import { notFound } from 'next/navigation';
 import { TeamDetailPageQuery } from '@/lib/page-queries/TeamDetailPageQuery';
 import { TeamDetailPageClient } from './TeamDetailPageClient';
 
-export default async function Page({ params }: { params: { id: string } }) {
+export default async function Page({ params }: { params: Promise<{ id: string }> }) {
-  const result = await TeamDetailPageQuery.execute(params.id);
+  const { id } = await params;
+  const result = await TeamDetailPageQuery.execute(id);
 
   if (result.isErr()) {
     const error = result.getError();

apps/website/lib/page-queries/auth/ForgotPasswordPageQuery.ts

@@ -5,8 +5,8 @@ import { ForgotPasswordViewData } from '@/lib/builders/view-data/types/ForgotPas
 import { AuthPageService } from '@/lib/services/auth/AuthPageService';
 import { SearchParamParser } from '@/lib/routing/search-params/SearchParamParser';
 
-export class ForgotPasswordPageQuery implements PageQuery<ForgotPasswordViewData, URLSearchParams> {
+export class ForgotPasswordPageQuery implements PageQuery<ForgotPasswordViewData, URLSearchParams | Record<string, string | string[] | undefined>> {
-  async execute(searchParams: URLSearchParams): Promise<Result<ForgotPasswordViewData, string>> {
+  async execute(searchParams: URLSearchParams | Record<string, string | string[] | undefined>): Promise<Result<ForgotPasswordViewData, string>> {
     // Parse and validate search parameters
     const parsedResult = SearchParamParser.parseAuth(searchParams);
     if (parsedResult.isErr()) {
@@ -33,7 +33,7 @@ export class ForgotPasswordPageQuery implements PageQuery<ForgotPasswordViewData
   }
 
   // Static factory method for convenience
-  static async execute(searchParams: URLSearchParams): Promise<Result<ForgotPasswordViewData, string>> {
+  static async execute(searchParams: URLSearchParams | Record<string, string | string[] | undefined>): Promise<Result<ForgotPasswordViewData, string>> {
     const query = new ForgotPasswordPageQuery();
     return query.execute(searchParams);
   }

apps/website/lib/page-queries/auth/LoginPageQuery.ts

@@ -5,8 +5,8 @@ import { LoginViewData } from '@/lib/builders/view-data/types/LoginViewData';
 import { AuthPageService } from '@/lib/services/auth/AuthPageService';
 import { SearchParamParser } from '@/lib/routing/search-params/SearchParamParser';
 
-export class LoginPageQuery implements PageQuery<LoginViewData, URLSearchParams> {
+export class LoginPageQuery implements PageQuery<LoginViewData, URLSearchParams | Record<string, string | string[] | undefined>> {
-  async execute(searchParams: URLSearchParams): Promise<Result<LoginViewData, string>> {
+  async execute(searchParams: URLSearchParams | Record<string, string | string[] | undefined>): Promise<Result<LoginViewData, string>> {
     // Parse and validate search parameters
     const parsedResult = SearchParamParser.parseAuth(searchParams);
     if (parsedResult.isErr()) {
@@ -33,7 +33,7 @@ export class LoginPageQuery implements PageQuery<LoginViewData, URLSearchParams>
   }
 
   // Static factory method for convenience
-  static async execute(searchParams: URLSearchParams): Promise<Result<LoginViewData, string>> {
+  static async execute(searchParams: URLSearchParams | Record<string, string | string[] | undefined>): Promise<Result<LoginViewData, string>> {
     const query = new LoginPageQuery();
     return query.execute(searchParams);
   }

apps/website/lib/page-queries/auth/ResetPasswordPageQuery.ts

@@ -5,8 +5,8 @@ import { ResetPasswordViewData } from '@/lib/builders/view-data/types/ResetPassw
 import { AuthPageService } from '@/lib/services/auth/AuthPageService';
 import { SearchParamParser } from '@/lib/routing/search-params/SearchParamParser';
 
-export class ResetPasswordPageQuery implements PageQuery<ResetPasswordViewData, URLSearchParams> {
+export class ResetPasswordPageQuery implements PageQuery<ResetPasswordViewData, URLSearchParams | Record<string, string | string[] | undefined>> {
-  async execute(searchParams: URLSearchParams): Promise<Result<ResetPasswordViewData, string>> {
+  async execute(searchParams: URLSearchParams | Record<string, string | string[] | undefined>): Promise<Result<ResetPasswordViewData, string>> {
     // Parse and validate search parameters
     const parsedResult = SearchParamParser.parseAuth(searchParams);
     if (parsedResult.isErr()) {
@@ -33,7 +33,7 @@ export class ResetPasswordPageQuery implements PageQuery<ResetPasswordViewData,
   }
 
   // Static factory method for convenience
-  static async execute(searchParams: URLSearchParams): Promise<Result<ResetPasswordViewData, string>> {
+  static async execute(searchParams: URLSearchParams | Record<string, string | string[] | undefined>): Promise<Result<ResetPasswordViewData, string>> {
     const query = new ResetPasswordPageQuery();
     return query.execute(searchParams);
   }

apps/website/lib/page-queries/auth/SignupPageQuery.ts

@@ -5,8 +5,8 @@ import { PageQuery } from '@/lib/contracts/page-queries/PageQuery';
 import { AuthPageService } from '@/lib/services/auth/AuthPageService';
 import { SearchParamParser } from '@/lib/routing/search-params/SearchParamParser';
 
-export class SignupPageQuery implements PageQuery<SignupViewData, URLSearchParams> {
+export class SignupPageQuery implements PageQuery<SignupViewData, URLSearchParams | Record<string, string | string[] | undefined>> {
-  async execute(searchParams: URLSearchParams): Promise<Result<SignupViewData, string>> {
+  async execute(searchParams: URLSearchParams | Record<string, string | string[] | undefined>): Promise<Result<SignupViewData, string>> {
     // Parse and validate search parameters
     const parsedResult = SearchParamParser.parseAuth(searchParams);
     if (parsedResult.isErr()) {
@@ -33,7 +33,7 @@ export class SignupPageQuery implements PageQuery<SignupViewData, URLSearchParam
   }
 
   // Static factory method for convenience
-  static async execute(searchParams: URLSearchParams): Promise<Result<SignupViewData, string>> {
+  static async execute(searchParams: URLSearchParams | Record<string, string | string[] | undefined>): Promise<Result<SignupViewData, string>> {
     const query = new SignupPageQuery();
     return query.execute(searchParams);
   }

apps/website/lib/routing/search-params/SearchParamParser.ts

@@ -42,11 +42,22 @@ export interface ParsedWizardParams {
 }
 
 export class SearchParamParser {
+  private static getParam(params: URLSearchParams | Record<string, string | string[] | undefined>, key: string): string | null {
+    if (params instanceof URLSearchParams) {
+      return params.get(key);
+    }
+    const value = params[key];
+    if (Array.isArray(value)) {
+      return value[0] ?? null;
+    }
+    return value ?? null;
+  }
+
   // Parse auth parameters
-  static parseAuth(params: URLSearchParams): Result<ParsedAuthParams, string> {
+  static parseAuth(params: URLSearchParams | Record<string, string | string[] | undefined>): Result<ParsedAuthParams, string> {
     const errors: string[] = [];
     
-    const returnTo = params.get('returnTo');
+    const returnTo = this.getParam(params, 'returnTo');
     if (returnTo !== null) {
       const validation = SearchParamValidators.validateReturnTo(returnTo);
       if (!validation.isValid) {
@@ -54,7 +65,7 @@ export class SearchParamParser {
       }
     }
 
-    const token = params.get('token');
+    const token = this.getParam(params, 'token');
     if (token !== null) {
       const validation = SearchParamValidators.validateToken(token);
       if (!validation.isValid) {
@@ -62,7 +73,7 @@ export class SearchParamParser {
       }
     }
 
-    const email = params.get('email');
+    const email = this.getParam(params, 'email');
     if (email !== null) {
       const validation = SearchParamValidators.validateEmail(email);
       if (!validation.isValid) {
@@ -75,19 +86,19 @@ export class SearchParamParser {
     }
 
     return Result.ok({
-      returnTo: params.get('returnTo'),
+      returnTo: this.getParam(params, 'returnTo'),
-      token: params.get('token'),
+      token: this.getParam(params, 'token'),
-      email: params.get('email'),
+      email: this.getParam(params, 'email'),
-      error: params.get('error'),
+      error: this.getParam(params, 'error'),
-      message: params.get('message'),
+      message: this.getParam(params, 'message'),
     });
   }
 
   // Parse sponsor parameters
-  static parseSponsor(params: URLSearchParams): Result<ParsedSponsorParams, string> {
+  static parseSponsor(params: URLSearchParams | Record<string, string | string[] | undefined>): Result<ParsedSponsorParams, string> {
     const errors: string[] = [];
     
-    const type = params.get('type');
+    const type = this.getParam(params, 'type');
     if (type !== null) {
       const validation = SearchParamValidators.validateCampaignType(type);
       if (!validation.isValid) {
@@ -100,17 +111,17 @@ export class SearchParamParser {
     }
 
     return Result.ok({
-      type: params.get('type'),
+      type: this.getParam(params, 'type'),
-      campaignId: params.get('campaignId'),
+      campaignId: this.getParam(params, 'campaignId'),
     });
   }
 
   // Parse pagination parameters
-  static parsePagination(params: URLSearchParams): Result<ParsedPaginationParams, string> {
+  static parsePagination(params: URLSearchParams | Record<string, string | string[] | undefined>): Result<ParsedPaginationParams, string> {
     const result: ParsedPaginationParams = {};
     const errors: string[] = [];
 
-    const page = params.get('page');
+    const page = this.getParam(params, 'page');
     if (page !== null) {
       const validation = SearchParamValidators.validatePage(page);
       if (!validation.isValid) {
@@ -120,7 +131,7 @@ export class SearchParamParser {
       }
     }
 
-    const limit = params.get('limit');
+    const limit = this.getParam(params, 'limit');
     if (limit !== null) {
       const validation = SearchParamValidators.validateLimit(limit);
       if (!validation.isValid) {
@@ -130,7 +141,7 @@ export class SearchParamParser {
       }
     }
 
-    const offset = params.get('offset');
+    const offset = this.getParam(params, 'offset');
     if (offset !== null) {
       const num = parseInt(offset);
       if (!isNaN(num)) {
@@ -146,10 +157,10 @@ export class SearchParamParser {
   }
 
   // Parse sorting parameters
-  static parseSorting(params: URLSearchParams): Result<ParsedSortingParams, string> {
+  static parseSorting(params: URLSearchParams | Record<string, string | string[] | undefined>): Result<ParsedSortingParams, string> {
     const errors: string[] = [];
     
-    const order = params.get('order');
+    const order = this.getParam(params, 'order');
     if (order !== null) {
       const validation = SearchParamValidators.validateOrder(order);
       if (!validation.isValid) {
@@ -162,29 +173,29 @@ export class SearchParamParser {
     }
 
     return Result.ok({
-      sortBy: params.get('sortBy'),
+      sortBy: this.getParam(params, 'sortBy'),
-      order: (params.get('order') as 'asc' | 'desc') || undefined,
+      order: (this.getParam(params, 'order') as 'asc' | 'desc') || undefined,
     });
   }
 
   // Parse filter parameters
-  static parseFilters(params: URLSearchParams): Result<ParsedFilterParams, string> {
+  static parseFilters(params: URLSearchParams | Record<string, string | string[] | undefined>): Result<ParsedFilterParams, string> {
     return Result.ok({
-      status: params.get('status'),
+      status: this.getParam(params, 'status'),
-      role: params.get('role'),
+      role: this.getParam(params, 'role'),
-      tier: params.get('tier'),
+      tier: this.getParam(params, 'tier'),
     });
   }
 
   // Parse wizard parameters
-  static parseWizard(params: URLSearchParams): Result<ParsedWizardParams, string> {
+  static parseWizard(params: URLSearchParams | Record<string, string | string[] | undefined>): Result<ParsedWizardParams, string> {
     return Result.ok({
-      step: params.get('step'),
+      step: this.getParam(params, 'step'),
     });
   }
 
   // Parse all parameters at once
-  static parseAll(params: URLSearchParams): Result<
+  static parseAll(params: URLSearchParams | Record<string, string | string[] | undefined>): Result<
     {
       auth: ParsedAuthParams;
       sponsor: ParsedSponsorParams;

package.json

@@ -116,6 +116,7 @@
     "test:companion-hosted": "vitest run --config vitest.e2e.config.ts tests/e2e/companion/companion-ui-full-workflow.e2e.test.ts",
     "test:contract:compatibility": "tsx scripts/contract-compatibility.ts",
     "test:contracts": "tsx scripts/run-contract-tests.ts",
+    "test:e2e:run": "sh -lc \"npm run docker:e2e:up && echo '[e2e] Running Playwright tests...'; docker-compose -f docker-compose.e2e.yml run --rm playwright npx playwright test\"",
     "test:e2e:website": "sh -lc \"set -e; trap 'npm run docker:e2e:down' EXIT; npm run docker:e2e:up && echo '[e2e] Waiting for services...'; sleep 10 && echo '[e2e] Running Playwright tests...'; docker-compose -f docker-compose.e2e.yml run --rm playwright\"",
     "test:api:smoke": "sh -lc \"echo '🚀 Running API smoke tests...'; npx playwright test tests/e2e/api/api-smoke.test.ts --reporter=json,html\"",
     "test:api:smoke:docker": "sh -lc \"echo '🚀 Running API smoke tests in Docker...'; docker-compose -f docker-compose.e2e.yml run --rm playwright npx playwright test tests/e2e/api/api-smoke.test.ts --reporter=json,html\"",