fix e2e

apps/website/app/races/RacesInteractive.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { RacesTemplate, TimeFilter, RaceStatusFilter } from '@/templates/RacesTemplate';
+import { useRacesPageData, useRegisterForRace, useWithdrawFromRace, useCancelRace } from '@/hooks/useRaceService';
+import { LeagueMembershipUtility } from '@/lib/utilities/LeagueMembershipUtility';
+import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
+
+export function RacesInteractive() {
+  const router = useRouter();
+  const currentDriverId = useEffectiveDriverId();
+  
+  // Fetch data
+  const { data: pageData, isLoading } = useRacesPageData();
+  
+  // Mutations
+  const registerMutation = useRegisterForRace();
+  const withdrawMutation = useWithdrawFromRace();
+  const cancelMutation = useCancelRace();
+  
+  // Filter state
+  const [statusFilter, setStatusFilter] = useState<RaceStatusFilter>('all');
+  const [leagueFilter, setLeagueFilter] = useState<string>('all');
+  const [timeFilter, setTimeFilter] = useState<TimeFilter>('upcoming');
+  const [showFilterModal, setShowFilterModal] = useState(false);
+
+  // Transform data for template
+  const races = pageData?.races.map(race => ({
+    id: race.id,
+    track: race.track,
+    car: race.car,
+    scheduledAt: race.scheduledAt,
+    status: race.status as 'scheduled' | 'running' | 'completed' | 'cancelled',
+    sessionType: 'race', // Not in RaceListItemViewModel, using default
+    leagueId: race.leagueId,
+    leagueName: race.leagueName,
+    strengthOfField: race.strengthOfField ?? undefined,
+    isUpcoming: race.isUpcoming,
+    isLive: race.isLive,
+    isPast: race.isPast,
+  })) ?? [];
+
+  const scheduledRaces = pageData?.scheduledRaces.map(race => ({
+    id: race.id,
+    track: race.track,
+    car: race.car,
+    scheduledAt: race.scheduledAt,
+    status: race.status as 'scheduled' | 'running' | 'completed' | 'cancelled',
+    sessionType: 'race',
+    leagueId: race.leagueId,
+    leagueName: race.leagueName,
+    strengthOfField: race.strengthOfField ?? undefined,
+    isUpcoming: race.isUpcoming,
+    isLive: race.isLive,
+    isPast: race.isPast,
+  })) ?? [];
+
+  const runningRaces = pageData?.runningRaces.map(race => ({
+    id: race.id,
+    track: race.track,
+    car: race.car,
+    scheduledAt: race.scheduledAt,
+    status: race.status as 'scheduled' | 'running' | 'completed' | 'cancelled',
+    sessionType: 'race',
+    leagueId: race.leagueId,
+    leagueName: race.leagueName,
+    strengthOfField: race.strengthOfField ?? undefined,
+    isUpcoming: race.isUpcoming,
+    isLive: race.isLive,
+    isPast: race.isPast,
+  })) ?? [];
+
+  const completedRaces = pageData?.completedRaces.map(race => ({
+    id: race.id,
+    track: race.track,
+    car: race.car,
+    scheduledAt: race.scheduledAt,
+    status: race.status as 'scheduled' | 'running' | 'completed' | 'cancelled',
+    sessionType: 'race',
+    leagueId: race.leagueId,
+    leagueName: race.leagueName,
+    strengthOfField: race.strengthOfField ?? undefined,
+    isUpcoming: race.isUpcoming,
+    isLive: race.isLive,
+    isPast: race.isPast,
+  })) ?? [];
+
+  // Actions
+  const handleRaceClick = (raceId: string) => {
+    router.push(`/races/${raceId}`);
+  };
+
+  const handleLeagueClick = (leagueId: string) => {
+    router.push(`/leagues/${leagueId}`);
+  };
+
+  const handleRegister = async (raceId: string, leagueId: string) => {
+    if (!currentDriverId) {
+      router.push('/auth/login');
+      return;
+    }
+
+    const confirmed = window.confirm(
+      `Register for this race?\n\nYou'll be added to the entry list.`,
+    );
+
+    if (!confirmed) return;
+
+    try {
+      await registerMutation.mutateAsync({ raceId, leagueId, driverId: currentDriverId });
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to register for race');
+    }
+  };
+
+  const handleWithdraw = async (raceId: string) => {
+    if (!currentDriverId) return;
+
+    const confirmed = window.confirm(
+      'Withdraw from this race?\n\nYou can register again later if you change your mind.',
+    );
+
+    if (!confirmed) return;
+
+    try {
+      await withdrawMutation.mutateAsync({ raceId, driverId: currentDriverId });
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to withdraw from race');
+    }
+  };
+
+  const handleCancel = async (raceId: string) => {
+    const confirmed = window.confirm(
+      'Are you sure you want to cancel this race? This action cannot be undone.',
+    );
+
+    if (!confirmed) return;
+
+    try {
+      await cancelMutation.mutateAsync(raceId);
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to cancel race');
+    }
+  };
+
+  // User memberships for admin check
+  // For now, we'll handle permissions in the template using LeagueMembershipUtility
+  // This would need actual membership data to work properly
+  const userMemberships: Array<{ leagueId: string; role: string }> = [];
+
+  return (
+    <RacesTemplate
+      races={races}
+      totalCount={pageData?.totalCount ?? 0}
+      scheduledRaces={scheduledRaces}
+      runningRaces={runningRaces}
+      completedRaces={completedRaces}
+      isLoading={isLoading}
+      statusFilter={statusFilter}
+      setStatusFilter={setStatusFilter}
+      leagueFilter={leagueFilter}
+      setLeagueFilter={setLeagueFilter}
+      timeFilter={timeFilter}
+      setTimeFilter={setTimeFilter}
+      onRaceClick={handleRaceClick}
+      onLeagueClick={handleLeagueClick}
+      onRegister={handleRegister}
+      onWithdraw={handleWithdraw}
+      onCancel={handleCancel}
+      showFilterModal={showFilterModal}
+      setShowFilterModal={setShowFilterModal}
+      currentDriverId={currentDriverId}
+      userMemberships={userMemberships}
+    />
+  );
+}

apps/website/app/races/RacesStatic.tsx

@@ -0,0 +1,76 @@
+import { RacesTemplate } from '@/templates/RacesTemplate';
+import { useServices } from '@/lib/services/ServiceProvider';
+import type { RaceListItemViewModel } from '@/lib/view-models/RaceListItemViewModel';
+
+// This is a server component that fetches data and passes it to the template
+export async function RacesStatic() {
+  const { raceService } = useServices();
+  
+  // Fetch race data server-side
+  const pageData = await raceService.getRacesPageData();
+  
+  // Extract races from the response
+  const races = pageData.races.map(race => ({
+    id: race.id,
+    track: race.track,
+    car: race.car,
+    scheduledAt: race.scheduledAt,
+    status: race.status as 'scheduled' | 'running' | 'completed' | 'cancelled',
+    sessionType: 'race', // Default since RaceListItemViewModel doesn't have sessionType
+    leagueId: race.leagueId,
+    leagueName: race.leagueName,
+    strengthOfField: race.strengthOfField,
+    isUpcoming: race.isUpcoming,
+    isLive: race.isLive,
+    isPast: race.isPast,
+  }));
+
+  // Transform the categorized races as well
+  const transformRaces = (raceList: RaceListItemViewModel[]) =>
+    raceList.map(race => ({
+      id: race.id,
+      track: race.track,
+      car: race.car,
+      scheduledAt: race.scheduledAt,
+      status: race.status as 'scheduled' | 'running' | 'completed' | 'cancelled',
+      sessionType: 'race',
+      leagueId: race.leagueId,
+      leagueName: race.leagueName,
+      strengthOfField: race.strengthOfField,
+      isUpcoming: race.isUpcoming,
+      isLive: race.isLive,
+      isPast: race.isPast,
+    }));
+
+  // For the static wrapper, we'll use client-side data fetching
+  // This component will be used as a server component that renders the client template
+  return (
+    <RacesTemplate
+      races={races}
+      totalCount={pageData.totalCount}
+      scheduledRaces={transformRaces(pageData.scheduledRaces)}
+      runningRaces={transformRaces(pageData.runningRaces)}
+      completedRaces={transformRaces(pageData.completedRaces)}
+      isLoading={false}
+      // Filter state - will be managed by Interactive component
+      statusFilter="all"
+      setStatusFilter={() => {}}
+      leagueFilter="all"
+      setLeagueFilter={() => {}}
+      timeFilter="upcoming"
+      setTimeFilter={() => {}}
+      // Actions
+      onRaceClick={() => {}}
+      onLeagueClick={() => {}}
+      onRegister={() => {}}
+      onWithdraw={() => {}}
+      onCancel={() => {}}
+      // UI State
+      showFilterModal={false}
+      setShowFilterModal={() => {}}
+      // User state
+      currentDriverId={undefined}
+      userMemberships={undefined}
+    />
+  );
+}

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

@@ -0,0 +1,217 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { RaceDetailTemplate } from '@/templates/RaceDetailTemplate';
+import { 
+  useRaceDetail, 
+  useRegisterForRace, 
+  useWithdrawFromRace, 
+  useCancelRace, 
+  useCompleteRace, 
+  useReopenRace 
+} from '@/hooks/useRaceService';
+import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
+import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
+import { LeagueMembershipUtility } from '@/lib/utilities/LeagueMembershipUtility';
+
+export function RaceDetailInteractive() {
+  const router = useRouter();
+  const params = useParams();
+  const raceId = params.id as string;
+  const currentDriverId = useEffectiveDriverId();
+
+  // Fetch data
+  const { data: viewModel, isLoading, error } = useRaceDetail(raceId, currentDriverId);
+  const { data: membership } = useLeagueMembership(viewModel?.league?.id || '', currentDriverId);
+
+  // UI State
+  const [showProtestModal, setShowProtestModal] = useState(false);
+  const [showEndRaceModal, setShowEndRaceModal] = useState(false);
+
+  // Mutations
+  const registerMutation = useRegisterForRace();
+  const withdrawMutation = useWithdrawFromRace();
+  const cancelMutation = useCancelRace();
+  const completeMutation = useCompleteRace();
+  const reopenMutation = useReopenRace();
+
+  // Determine if user is owner/admin
+  const isOwnerOrAdmin = membership 
+    ? LeagueMembershipUtility.isOwnerOrAdmin(viewModel?.league?.id || '', currentDriverId)
+    : false;
+
+  // Actions
+  const handleBack = () => {
+    router.back();
+  };
+
+  const handleRegister = async () => {
+    const race = viewModel?.race;
+    const league = viewModel?.league;
+    if (!race || !league) return;
+
+    const confirmed = window.confirm(
+      `Register for ${race.track}?\n\nYou'll be added to the entry list for this race.`,
+    );
+
+    if (!confirmed) return;
+
+    try {
+      await registerMutation.mutateAsync({ raceId: race.id, leagueId: league.id, driverId: currentDriverId });
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to register for race');
+    }
+  };
+
+  const handleWithdraw = async () => {
+    const race = viewModel?.race;
+    const league = viewModel?.league;
+    if (!race || !league) return;
+
+    const confirmed = window.confirm(
+      'Withdraw from this race?\n\nYou can register again later if you change your mind.',
+    );
+
+    if (!confirmed) return;
+
+    try {
+      await withdrawMutation.mutateAsync({ raceId: race.id, driverId: currentDriverId });
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to withdraw from race');
+    }
+  };
+
+  const handleCancel = async () => {
+    const race = viewModel?.race;
+    if (!race || race.status !== 'scheduled') return;
+
+    const confirmed = window.confirm(
+      'Are you sure you want to cancel this race? This action cannot be undone.',
+    );
+
+    if (!confirmed) return;
+
+    try {
+      await cancelMutation.mutateAsync(race.id);
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to cancel race');
+    }
+  };
+
+  const handleReopen = async () => {
+    const race = viewModel?.race;
+    if (!race || !viewModel?.canReopenRace) return;
+
+    const confirmed = window.confirm(
+      'Re-open this race? This will allow re-registration and re-running. Results will be archived.',
+    );
+
+    if (!confirmed) return;
+
+    try {
+      await reopenMutation.mutateAsync(race.id);
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to re-open race');
+    }
+  };
+
+  const handleEndRace = async () => {
+    const race = viewModel?.race;
+    if (!race) return;
+
+    setShowEndRaceModal(true);
+  };
+
+  const handleFileProtest = () => {
+    setShowProtestModal(true);
+  };
+
+  const handleResultsClick = () => {
+    router.push(`/races/${raceId}/results`);
+  };
+
+  const handleStewardingClick = () => {
+    router.push(`/races/${raceId}/stewarding`);
+  };
+
+  const handleLeagueClick = (leagueId: string) => {
+    router.push(`/leagues/${leagueId}`);
+  };
+
+  const handleDriverClick = (driverId: string) => {
+    router.push(`/drivers/${driverId}`);
+  };
+
+  // Transform data for template - handle null values
+  const templateViewModel = viewModel && viewModel.race ? {
+    race: {
+      id: viewModel.race.id,
+      track: viewModel.race.track,
+      car: viewModel.race.car,
+      scheduledAt: viewModel.race.scheduledAt,
+      status: viewModel.race.status as 'scheduled' | 'running' | 'completed' | 'cancelled',
+      sessionType: viewModel.race.sessionType,
+    },
+    league: viewModel.league ? {
+      id: viewModel.league.id,
+      name: viewModel.league.name,
+      description: viewModel.league.description || undefined,
+      settings: viewModel.league.settings as { maxDrivers: number; qualifyingFormat: string },
+    } : undefined,
+    entryList: viewModel.entryList.map(entry => ({
+      id: entry.id,
+      name: entry.name,
+      avatarUrl: entry.avatarUrl,
+      country: entry.country,
+      rating: entry.rating,
+      isCurrentUser: entry.isCurrentUser,
+    })),
+    registration: {
+      isUserRegistered: viewModel.registration.isUserRegistered,
+      canRegister: viewModel.registration.canRegister,
+    },
+    userResult: viewModel.userResult ? {
+      position: viewModel.userResult.position,
+      startPosition: viewModel.userResult.startPosition,
+      positionChange: viewModel.userResult.positionChange,
+      incidents: viewModel.userResult.incidents,
+      isClean: viewModel.userResult.isClean,
+      isPodium: viewModel.userResult.isPodium,
+      ratingChange: viewModel.userResult.ratingChange,
+    } : undefined,
+    canReopenRace: viewModel.canReopenRace,
+  } : undefined;
+
+  return (
+    <RaceDetailTemplate
+      viewModel={templateViewModel}
+      isLoading={isLoading}
+      error={error}
+      onBack={handleBack}
+      onRegister={handleRegister}
+      onWithdraw={handleWithdraw}
+      onCancel={handleCancel}
+      onReopen={handleReopen}
+      onEndRace={handleEndRace}
+      onFileProtest={handleFileProtest}
+      onResultsClick={handleResultsClick}
+      onStewardingClick={handleStewardingClick}
+      onLeagueClick={handleLeagueClick}
+      onDriverClick={handleDriverClick}
+      currentDriverId={currentDriverId}
+      isOwnerOrAdmin={isOwnerOrAdmin}
+      showProtestModal={showProtestModal}
+      setShowProtestModal={setShowProtestModal}
+      showEndRaceModal={showEndRaceModal}
+      setShowEndRaceModal={setShowEndRaceModal}
+      mutationLoading={{
+        register: registerMutation.isPending,
+        withdraw: withdrawMutation.isPending,
+        cancel: cancelMutation.isPending,
+        reopen: reopenMutation.isPending,
+        complete: completeMutation.isPending,
+      }}
+    />
+  );
+}

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

@@ -4,7 +4,7 @@ import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-import RaceDetailPage from './page';
+import { RaceDetailInteractive } from './RaceDetailInteractive';
 import type { RaceDetailsViewModel } from '@/lib/view-models/RaceDetailsViewModel';
 
 // Mocks for Next.js navigation
@@ -59,6 +59,9 @@ vi.mock('@/lib/services/ServiceProvider', () => ({
   }),
 }));
 
+// We'll use the actual hooks but they will use the mocked services
+// The hooks are already mocked above via the service mocks
+
 // Mock league membership utility to control admin vs non-admin behavior
 const mockIsOwnerOrAdmin = vi.fn();
 
@@ -112,56 +115,60 @@ const createViewModel = (status: string): RaceDetailsViewModel => {
 
 describe('RaceDetailPage - Re-open Race behavior', () => {
   beforeEach(() => {
+    // Reset all mocks
     mockGetRaceDetails.mockReset();
     mockReopenRace.mockReset();
     mockFetchLeagueMemberships.mockReset();
     mockGetMembership.mockReset();
     mockIsOwnerOrAdmin.mockReset();
 
+    // Set up default mock implementations for services
     mockFetchLeagueMemberships.mockResolvedValue(undefined);
-    mockGetMembership.mockReturnValue(null);
+    mockGetMembership.mockReturnValue({ role: 'owner' }); // Return owner role by default
   });
 
   it('shows Re-open Race button for admin when race is completed and calls reopen + reload on confirm', async () => {
     mockIsOwnerOrAdmin.mockReturnValue(true);
     const viewModel = createViewModel('completed');
 
-    // First call: initial load, second call: after re-open
+    // Mock the service to return the right data
     mockGetRaceDetails.mockResolvedValue(viewModel);
+    mockReopenRace.mockResolvedValue(undefined);
 
     const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true);
 
-    renderWithQueryClient(<RaceDetailPage />);
+    renderWithQueryClient(<RaceDetailInteractive />);
 
-    const reopenButtons = await screen.findAllByText('Re-open Race');
-    const reopenButton = reopenButtons[0]!;
+    // Wait for the component to load and render
+    await waitFor(() => {
+      const tracks = screen.getAllByText('Test Track');
+      expect(tracks.length).toBeGreaterThan(0);
+    });
+
+    // Check if the reopen button is present
+    const reopenButton = screen.getByText('Re-open Race');
     expect(reopenButton).toBeInTheDocument();
 
-    mockReopenRace.mockResolvedValue(undefined);
-
     fireEvent.click(reopenButton);
 
     await waitFor(() => {
       expect(mockReopenRace).toHaveBeenCalledWith('race-123');
     });
 
-    // loadRaceData should be called again after reopening
-    await waitFor(() => {
-      expect(mockGetRaceDetails).toHaveBeenCalled();
-    });
-
     confirmSpy.mockRestore();
   });
 
   it('does not render Re-open Race button for non-admin viewer', async () => {
     mockIsOwnerOrAdmin.mockReturnValue(false);
     const viewModel = createViewModel('completed');
+
     mockGetRaceDetails.mockResolvedValue(viewModel);
 
-    renderWithQueryClient(<RaceDetailPage />);
+    renderWithQueryClient(<RaceDetailInteractive />);
 
     await waitFor(() => {
-      expect(mockGetRaceDetails).toHaveBeenCalled();
+      const tracks = screen.getAllByText('Test Track');
+      expect(tracks.length).toBeGreaterThan(0);
     });
 
     expect(screen.queryByText('Re-open Race')).toBeNull();
@@ -170,12 +177,14 @@ describe('RaceDetailPage - Re-open Race behavior', () => {
   it('does not render Re-open Race button when race is not completed or cancelled even for admin', async () => {
     mockIsOwnerOrAdmin.mockReturnValue(true);
     const viewModel = createViewModel('scheduled');
+
     mockGetRaceDetails.mockResolvedValue(viewModel);
 
-    renderWithQueryClient(<RaceDetailPage />);
+    renderWithQueryClient(<RaceDetailInteractive />);
 
     await waitFor(() => {
-      expect(mockGetRaceDetails).toHaveBeenCalled();
+      const tracks = screen.getAllByText('Test Track');
+      expect(tracks.length).toBeGreaterThan(0);
     });
 
     expect(screen.queryByText('Re-open Race')).toBeNull();

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

@@ -1,969 +1,3 @@
-'use client';
+import { RaceDetailInteractive } from './RaceDetailInteractive';
 
-import Breadcrumbs from '@/components/layout/Breadcrumbs';
-import EndRaceModal from '@/components/leagues/EndRaceModal';
-import FileProtestModal from '@/components/races/FileProtestModal';
-import SponsorInsightsCard, { MetricBuilders, SlotTemplates, useSponsorMode } from '@/components/sponsors/SponsorInsightsCard';
-import Button from '@/components/ui/Button';
-import Card from '@/components/ui/Card';
-import Heading from '@/components/ui/Heading';
-import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import { useRaceDetail, useRegisterForRace, useWithdrawFromRace, useCancelRace, useCompleteRace, useReopenRace } from '@/hooks/useRaceService';
-import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
-import { LeagueMembershipUtility } from '@/lib/utilities/LeagueMembershipUtility';
-import { RaceDetailEntryViewModel } from '@/lib/view-models/RaceDetailEntryViewModel';
-import { RaceDetailUserResultViewModel } from '@/lib/view-models/RaceDetailUserResultViewModel';
-import {
-  AlertTriangle,
-  ArrowLeft,
-  ArrowRight,
-  Calendar,
-  Car,
-  CheckCircle2,
-  Clock,
-  Flag,
-  PlayCircle,
-  Scale,
-  Trophy,
-  UserMinus,
-  UserPlus,
-  Users,
-  XCircle,
-  Zap,
-} from 'lucide-react';
-import Link from 'next/link';
-import { useParams, useRouter } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
-
-export default function RaceDetailPage() {
-  const router = useRouter();
-  const params = useParams();
-  const raceId = params.id as string;
-  const currentDriverId = useEffectiveDriverId();
-  const isSponsorMode = useSponsorMode();
-
-  const { data: viewModel, isLoading: loading, error } = useRaceDetail(raceId, currentDriverId);
-  const { data: membership } = useLeagueMembership(viewModel?.league?.id || '', currentDriverId);
-
-  const [ratingChange, setRatingChange] = useState<number | null>(null);
-  const [animatedRatingChange, setAnimatedRatingChange] = useState(0);
-  const [showProtestModal, setShowProtestModal] = useState(false);
-  const [showEndRaceModal, setShowEndRaceModal] = useState(false);
-
-  const registerMutation = useRegisterForRace();
-  const withdrawMutation = useWithdrawFromRace();
-  const cancelMutation = useCancelRace();
-  const completeMutation = useCompleteRace();
-  const reopenMutation = useReopenRace();
-
-  // Set rating change when viewModel changes
-  useEffect(() => {
-    if (viewModel?.userResult?.ratingChange !== undefined) {
-      setRatingChange(viewModel.userResult.ratingChange);
-    }
-  }, [viewModel?.userResult?.ratingChange]);
-
-  // Animate rating change when it changes
-  useEffect(() => {
-    if (ratingChange !== null) {
-      let start = 0;
-      const end = ratingChange;
-      const duration = 1000;
-      const startTime = performance.now();
-
-      const animate = (currentTime: number) => {
-        const elapsed = currentTime - startTime;
-        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) {
-          requestAnimationFrame(animate);
-        }
-      };
-
-      requestAnimationFrame(animate);
-    }
-  }, [ratingChange]);
-
-  const handleCancelRace = async () => {
-    const race = viewModel?.race;
-    if (!race || race.status !== 'scheduled') return;
-
-    const confirmed = window.confirm(
-      'Are you sure you want to cancel this race? This action cannot be undone.',
-    );
-
-    if (!confirmed) return;
-
-    try {
-      await cancelMutation.mutateAsync(race.id);
-    } catch (err) {
-      alert(err instanceof Error ? err.message : 'Failed to cancel race');
-    }
-  };
-
-  const handleRegister = async () => {
-    const race = viewModel?.race;
-    const league = viewModel?.league;
-    if (!race || !league) return;
-
-    const confirmed = window.confirm(
-      `Register for ${race.track}?\n\nYou'll be added to the entry list for this race.`,
-    );
-
-    if (!confirmed) return;
-
-    try {
-      await registerMutation.mutateAsync({ raceId: race.id, leagueId: league.id, driverId: currentDriverId });
-    } catch (err) {
-      alert(err instanceof Error ? err.message : 'Failed to register for race');
-    }
-  };
-
-  const handleWithdraw = async () => {
-    const race = viewModel?.race;
-    const league = viewModel?.league;
-    if (!race || !league) return;
-
-    const confirmed = window.confirm(
-      'Withdraw from this race?\n\nYou can register again later if you change your mind.',
-    );
-
-    if (!confirmed) return;
-
-    try {
-      await withdrawMutation.mutateAsync({ raceId: race.id, driverId: currentDriverId });
-    } catch (err) {
-      alert(err instanceof Error ? err.message : 'Failed to withdraw from race');
-    }
-  };
-
-  const handleReopenRace = async () => {
-    const race = viewModel?.race;
-    if (!race || !viewModel?.canReopenRace) return;
-
-    const confirmed = window.confirm(
-      'Re-open this race? This will allow re-registration and re-running. Results will be archived.',
-    );
-
-    if (!confirmed) return;
-
-    try {
-      await reopenMutation.mutateAsync(race.id);
-    } catch (err) {
-      alert(err instanceof Error ? err.message : 'Failed to re-open race');
-    }
-  };
-
-  const formatDate = (date: Date) => {
-    return new Date(date).toLocaleDateString('en-US', {
-      weekday: 'long',
-      month: 'long',
-      day: 'numeric',
-      year: 'numeric',
-    });
-  };
-
-  const formatTime = (date: Date) => {
-    return new Date(date).toLocaleTimeString('en-US', {
-      hour: '2-digit',
-      minute: '2-digit',
-      timeZoneName: 'short',
-    });
-  };
-
-  const getTimeUntil = (date: Date) => {
-    const now = new Date();
-    const target = new Date(date);
-    const diffMs = target.getTime() - now.getTime();
-
-    if (diffMs < 0) return null;
-
-    const days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
-    const hours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-    const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
-
-    if (days > 0) return `${days}d ${hours}h`;
-    if (hours > 0) return `${hours}h ${minutes}m`;
-    return `${minutes}m`;
-  };
-
-  const statusConfig = {
-    scheduled: {
-      icon: Clock,
-      color: 'text-primary-blue',
-      bg: 'bg-primary-blue/10',
-      border: 'border-primary-blue/30',
-      label: 'Scheduled',
-      description: 'This race is scheduled and waiting to start',
-    },
-    running: {
-      icon: PlayCircle,
-      color: 'text-performance-green',
-      bg: 'bg-performance-green/10',
-      border: 'border-performance-green/30',
-      label: 'LIVE NOW',
-      description: 'This race is currently in progress',
-    },
-    completed: {
-      icon: CheckCircle2,
-      color: 'text-gray-400',
-      bg: 'bg-gray-500/10',
-      border: 'border-gray-500/30',
-      label: 'Completed',
-      description: 'This race has finished',
-    },
-    cancelled: {
-      icon: XCircle,
-      color: 'text-warning-amber',
-      bg: 'bg-warning-amber/10',
-      border: 'border-warning-amber/30',
-      label: 'Cancelled',
-      description: 'This race has been cancelled',
-    },
-  } as const;
-
-  if (loading) {
-    return (
-      <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-4xl mx-auto">
-          <div className="animate-pulse space-y-6">
-            <div className="h-6 bg-iron-gray rounded w-1/4" />
-            <div className="h-48 bg-iron-gray rounded-xl" />
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-              <div className="lg:col-span-2 h-64 bg-iron-gray rounded-xl" />
-              <div className="h-64 bg-iron-gray rounded-xl" />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (error || !viewModel || !viewModel.race) {
-    return (
-      <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-4xl mx-auto">
-          <Breadcrumbs items={[{ label: 'Races', href: '/races' }, { label: 'Error' }]} />
-
-          <Card className="text-center py-12 mt-6">
-            <div className="flex flex-col items-center gap-4">
-              <div className="p-4 bg-warning-amber/10 rounded-full">
-                <AlertTriangle className="w-8 h-8 text-warning-amber" />
-              </div>
-              <div>
-                <p className="text-white font-medium mb-1">{error instanceof Error ? error.message : error || 'Race not found'}</p>
-                <p className="text-sm text-gray-500">
-                  The race you're looking for doesn't exist or has been removed.
-                </p>
-              </div>
-              <Button
-                variant="secondary"
-                onClick={() => router.push('/races')}
-                className="mt-4"
-              >
-                Back to Races
-              </Button>
-            </div>
-          </Card>
-        </div>
-      </div>
-    );
-  }
-
-  const race = viewModel.race;
-  const league = viewModel.league;
-  const entryList: RaceDetailEntryViewModel[] = viewModel.entryList;
-  const registration = viewModel.registration;
-  const userResult: RaceDetailUserResultViewModel | null = viewModel.userResult;
-  const raceSOF = null; // TODO: Add strength of field to race details response
-
-  const config = statusConfig[race.status as keyof typeof statusConfig];
-  const StatusIcon = config.icon;
-  const timeUntil = race.status === 'scheduled' ? getTimeUntil(new Date(race.scheduledAt)) : null;
-
-  const breadcrumbItems = [
-    { label: 'Races', href: '/races' },
-    ...(league ? [{ label: league.name, href: `/leagues/${league.id}` }] : []),
-    { label: race.track },
-  ];
-
-  const getCountryFlag = (countryCode: string): string => {
-    const codePoints = countryCode
-      .toUpperCase()
-      .split('')
-      .map(char => 127397 + char.charCodeAt(0));
-    return String.fromCodePoint(...codePoints);
-  };
-
-  const sponsorInsights = {
-    tier: 'gold' as const,
-    trustScore: 92,
-    discordMembers: league ? 1847 : undefined,
-    monthlyActivity: 156,
-  };
-
-  const raceMetrics = [
-    MetricBuilders.views(entryList.length * 12),
-    MetricBuilders.engagement(78),
-    { label: 'SOF', value: raceSOF != null ? String(raceSOF) : '—', icon: Zap, color: 'text-warning-amber' as const },
-    MetricBuilders.reach(entryList.length * 45),
-  ];
-
-  return (
-    <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
-      <div className="max-w-7xl mx-auto space-y-6">
-        {/* Navigation Row: Breadcrumbs left, Back button right */}
-        <div className="flex items-center justify-between">
-          <Breadcrumbs items={breadcrumbItems} className="text-sm text-gray-400" />
-          <Button
-            variant="secondary"
-            onClick={() => router.back()}
-            className="flex items-center gap-2 text-sm"
-          >
-            <ArrowLeft className="w-4 h-4" />
-            Back
-          </Button>
-        </div>
-
-        {/* Sponsor Insights Card - Consistent placement at top */}
-        {isSponsorMode && race && league && (
-          <SponsorInsightsCard
-            entityType="race"
-            entityId={raceId}
-            entityName={race.track}
-            tier="premium"
-            metrics={raceMetrics}
-            slots={SlotTemplates.race(true, 500)}
-            trustScore={sponsorInsights.trustScore}
-            monthlyActivity={sponsorInsights.monthlyActivity}
-          />
-        )}
-
-        {/* User Result - Premium Achievement Card */}
-        {userResult && (
-          <div
-            className={`
-            relative overflow-hidden rounded-2xl p-1
-            ${
-              userResult.position === 1
-                ? 'bg-gradient-to-r from-yellow-500 via-yellow-400 to-yellow-600'
-                : userResult.isPodium
-                ? 'bg-gradient-to-r from-gray-400 via-gray-300 to-gray-500'
-                : 'bg-gradient-to-r from-primary-blue via-primary-blue/80 to-primary-blue'
-            }
-          `}
-          >
-            <div className="relative bg-deep-graphite rounded-xl p-6 sm:p-8">
-              {/* Decorative elements */}
-              <div className="absolute top-0 left-0 w-32 h-32 bg-gradient-to-br from-white/10 to-transparent rounded-full blur-2xl" />
-              <div className="absolute bottom-0 right-0 w-48 h-48 bg-gradient-to-tl from-white/5 to-transparent rounded-full blur-3xl" />
-
-              {/* Victory confetti effect for P1 */}
-              {userResult.position === 1 && (
-                <div className="absolute inset-0 overflow-hidden pointer-events-none">
-                  <div className="absolute top-4 left-[10%] w-2 h-2 bg-yellow-400 rounded-full animate-pulse" />
-                  <div className="absolute top-8 left-[25%] w-1.5 h-1.5 bg-yellow-300 rounded-full animate-pulse delay-100" />
-                  <div className="absolute top-6 right-[20%] w-2 h-2 bg-yellow-500 rounded-full animate-pulse delay-200" />
-                  <div className="absolute top-10 right-[35%] w-1 h-1 bg-yellow-400 rounded-full animate-pulse delay-300" />
-                </div>
-              )}
-
-              <div className="relative z-10">
-                {/* Main content grid */}
-                <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
-                  {/* Left: Position and achievement */}
-                  <div className="flex items-center gap-5">
-                    {/* Giant position badge */}
-                    <div
-                      className={`
-                      relative flex items-center justify-center w-24 h-24 sm:w-28 sm:h-28 rounded-3xl font-black text-4xl sm:text-5xl
-                      ${
-                        userResult.position === 1
-                          ? 'bg-gradient-to-br from-yellow-400 to-yellow-600 text-deep-graphite shadow-2xl shadow-yellow-500/30'
-                          : userResult.position === 2
-                          ? 'bg-gradient-to-br from-gray-300 to-gray-500 text-deep-graphite shadow-xl shadow-gray-400/20'
-                          : userResult.position === 3
-                          ? 'bg-gradient-to-br from-amber-600 to-amber-800 text-white shadow-xl shadow-amber-600/20'
-                          : 'bg-gradient-to-br from-primary-blue to-primary-blue/70 text-white shadow-xl shadow-primary-blue/20'
-                      }
-                    `}
-                    >
-                      {userResult.position === 1 && (
-                        <Trophy className="absolute -top-3 -right-2 w-8 h-8 text-yellow-300 drop-shadow-lg" />
-                      )}
-                      <span>P{userResult.position}</span>
-                    </div>
-
-                    {/* Achievement text */}
-                    <div>
-                      <p
-                        className={`
-                          text-2xl sm:text-3xl font-bold mb-1
-                          ${
-                            userResult.position === 1
-                              ? 'text-yellow-400'
-                              : userResult.isPodium
-                              ? 'text-gray-300'
-                              : 'text-white'
-                          }
-                        `}
-                      >
-                        {userResult.position === 1
-                          ? '🏆 VICTORY!'
-                          : userResult.position === 2
-                          ? '🥈 Second Place'
-                          : userResult.position === 3
-                          ? '🥉 Podium Finish'
-                          : userResult.position <= 5
-                          ? '⭐ Top 5 Finish'
-                          : userResult.position <= 10
-                          ? 'Points Finish'
-                          : `P${userResult.position} Finish`}
-                      </p>
-                      <div className="flex items-center gap-3 text-sm text-gray-400">
-                        <span>Started P{userResult.startPosition}</span>
-                        <span className="w-1 h-1 rounded-full bg-gray-600" />
-                        <span className={userResult.isClean ? 'text-performance-green' : ''}>
-                          {userResult.incidents}x incidents
-                          {userResult.isClean && ' ✨'}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Right: Stats cards */}
-                  <div className="flex flex-wrap gap-3">
-                    {/* Position change */}
-                    {userResult.positionChange !== 0 && (
-                      <div
-                        className={`
-                        flex flex-col items-center px-5 py-3 rounded-2xl min-w-[100px]
-                        ${
-                          userResult.positionChange > 0
-                            ? 'bg-gradient-to-br from-performance-green/30 to-performance-green/10 border border-performance-green/40'
-                            : 'bg-gradient-to-br from-red-500/30 to-red-500/10 border border-red-500/40'
-                        }
-                      `}
-                      >
-                        <div
-                          className={`
-                          flex items-center gap-1 font-black text-2xl
-                          ${
-                            userResult.positionChange > 0
-                              ? 'text-performance-green'
-                              : 'text-red-400'
-                          }
-                        `}
-                        >
-                          {userResult.positionChange > 0 ? (
-                            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                              <path
-                                fillRule="evenodd"
-                                d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z"
-                                clipRule="evenodd"
-                              />
-                            </svg>
-                          ) : (
-                            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                              <path
-                                fillRule="evenodd"
-                                d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z"
-                                clipRule="evenodd"
-                              />
-                            </svg>
-                          )}
-                          {Math.abs(userResult.positionChange)}
-                        </div>
-                        <div className="text-xs text-gray-400 mt-0.5">
-                          {userResult.positionChange > 0 ? 'Gained' : 'Lost'}
-                        </div>
-                      </div>
-                    )}
-
-                    {/* Rating change */}
-                    {ratingChange !== null && (
-                      <div
-                        className={`
-                        flex flex-col items-center px-5 py-3 rounded-2xl min-w-[100px]
-                        ${
-                          ratingChange > 0
-                            ? 'bg-gradient-to-br from-warning-amber/30 to-warning-amber/10 border border-warning-amber/40'
-                            : 'bg-gradient-to-br from-red-500/30 to-red-500/10 border border-red-500/40'
-                        }
-                      `}
-                      >
-                        <div
-                          className={`
-                          font-mono font-black text-2xl
-                          ${ratingChange > 0 ? 'text-warning-amber' : 'text-red-400'}
-                        `}
-                        >
-                          {animatedRatingChange > 0 ? '+' : ''}
-                          {animatedRatingChange}
-                        </div>
-                        <div className="text-xs text-gray-400 mt-0.5">Rating</div>
-                      </div>
-                    )}
-
-                    {/* Clean race bonus */}
-                    {userResult.isClean && (
-                      <div className="flex flex-col items-center px-5 py-3 rounded-2xl min-w-[100px] bg-gradient-to-br from-performance-green/30 to-performance-green/10 border border-performance-green/40">
-                        <div className="text-2xl">✨</div>
-                        <div className="text-xs text-performance-green mt-0.5 font-medium">
-                          Clean Race
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Hero Header */}
-        <div className={`relative overflow-hidden rounded-2xl ${config.bg} border ${config.border} p-6 sm:p-8`}>
-          {/* Live indicator */}
-          {race.status === 'running' && (
-            <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-performance-green via-performance-green/50 to-performance-green animate-pulse" />
-          )}
-
-          <div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full blur-3xl" />
-
-          <div className="relative z-10">
-            {/* Status Badge */}
-            <div className="flex items-center gap-3 mb-4">
-              <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full ${config.bg} border ${config.border}`}>
-                {race.status === 'running' && (
-                  <span className="w-2 h-2 bg-performance-green rounded-full animate-pulse" />
-                )}
-                <StatusIcon className={`w-4 h-4 ${config.color}`} />
-                <span className={`text-sm font-semibold ${config.color}`}>{config.label}</span>
-              </div>
-              {timeUntil && (
-                <span className="text-sm text-gray-400">
-                  Starts in <span className="text-white font-medium">{timeUntil}</span>
-                </span>
-              )}
-            </div>
-
-            {/* Title */}
-            <Heading level={1} className="text-2xl sm:text-3xl font-bold text-white mb-2">
-              {race.track}
-            </Heading>
-
-            {/* Meta */}
-            <div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-gray-400">
-              <span className="flex items-center gap-2">
-                <Calendar className="w-4 h-4" />
-                {formatDate(new Date(race.scheduledAt))}
-              </span>
-              <span className="flex items-center gap-2">
-                <Clock className="w-4 h-4" />
-                {formatTime(new Date(race.scheduledAt))}
-              </span>
-              <span className="flex items-center gap-2">
-                <Car className="w-4 h-4" />
-                {race.car}
-              </span>
-            </div>
-          </div>
-          {/* Prominent SOF Badge - Electric Design */}
-          {raceSOF != null && (
-            <div className="absolute top-6 right-6 sm:top-8 sm:right-8">
-              <div className="relative group">
-                {/* Glow effect */}
-                <div className="absolute inset-0 bg-warning-amber/40 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-300" />
-
-                <div className="relative flex items-center gap-4 px-6 py-4 rounded-2xl bg-gradient-to-br from-warning-amber/30 via-warning-amber/20 to-orange-500/20 border border-warning-amber/50 shadow-2xl backdrop-blur-sm">
-                  {/* Electric bolt with animation */}
-                  <div className="relative">
-                    <Zap className="w-8 h-8 text-warning-amber drop-shadow-lg" />
-                    <Zap className="absolute inset-0 w-8 h-8 text-warning-amber animate-pulse opacity-50" />
-                  </div>
-
-                  <div>
-                    <div className="text-[10px] text-warning-amber/90 uppercase tracking-widest font-bold mb-0.5">
-                      Strength of Field
-                    </div>
-                    <div className="flex items-baseline gap-1">
-                      <span className="text-3xl font-black text-warning-amber font-mono tracking-tight drop-shadow-lg">
-                        {raceSOF}
-                      </span>
-                      <span className="text-sm text-warning-amber/70 font-medium">SOF</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* Main Content */}
-          <div className="lg:col-span-2 space-y-6">
-            {/* Race Details */}
-            <Card>
-              <h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
-                <Flag className="w-5 h-5 text-primary-blue" />
-                Race Details
-              </h2>
-
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                <div className="p-4 bg-deep-graphite rounded-lg">
-                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Track</p>
-                  <p className="text-white font-medium">{race.track}</p>
-                </div>
-                <div className="p-4 bg-deep-graphite rounded-lg">
-                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Car</p>
-                  <p className="text-white font-medium">{race.car}</p>
-                </div>
-                <div className="p-4 bg-deep-graphite rounded-lg">
-                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Session Type</p>
-                  <p className="text-white font-medium capitalize">{race.sessionType}</p>
-                </div>
-                <div className="p-4 bg-deep-graphite rounded-lg">
-                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Status</p>
-                  <p className={`font-medium ${config.color}`}>{config.label}</p>
-                </div>
-                <div className="p-4 bg-deep-graphite rounded-lg">
-                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Strength of Field</p>
-                  <p className="text-warning-amber font-medium flex items-center gap-1.5">
-                    <Zap className="w-4 h-4" />
-                    {raceSOF ?? '—'}
-                  </p>
-                </div>
-                {/* TODO: Add registered count and max participants to race details response */}
-                {/* {race.registeredCount !== undefined && (
-                  <div className="p-4 bg-deep-graphite rounded-lg">
-                    <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Registered</p>
-                    <p className="text-white font-medium">
-                      {race.registeredCount}
-                      {race.maxParticipants && ` / ${race.maxParticipants}`}
-                    </p>
-                  </div>
-                )} */}
-              </div>
-            </Card>
-
-            {/* Entry List */}
-            <Card>
-              <div className="flex items-center justify-between mb-4">
-                <h2 className="text-lg font-semibold text-white flex items-center gap-2">
-                  <Users className="w-5 h-5 text-primary-blue" />
-                  Entry List
-                </h2>
-                <span className="text-sm text-gray-400">
-                  {entryList.length} driver{entryList.length !== 1 ? 's' : ''}
-                </span>
-              </div>
-
-              {entryList.length === 0 ? (
-                <div className="text-center py-8">
-                  <div className="p-4 bg-iron-gray rounded-full inline-block mb-3">
-                    <Users className="w-6 h-6 text-gray-500" />
-                  </div>
-                  <p className="text-gray-400">No drivers registered yet</p>
-                  <p className="text-sm text-gray-500">Be the first to sign up!</p>
-                </div>
-              ) : (
-                <div className="space-y-1">
-                  {entryList.map((driver, index) => {
-                    const isCurrentUser = driver.isCurrentUser;
-                    const countryFlag = getCountryFlag(driver.country);
-
-                    return (
-                      <div
-                        key={driver.id}
-                        onClick={() => router.push(`/drivers/${driver.id}`)}
-                        className={`
-                          flex items-center gap-3 p-3 rounded-xl cursor-pointer transition-all duration-200
-                          ${
-                            isCurrentUser
-                              ? 'bg-gradient-to-r from-primary-blue/20 via-primary-blue/10 to-transparent border border-primary-blue/40 shadow-lg shadow-primary-blue/10'
-                              : 'bg-deep-graphite hover:bg-charcoal-outline/50 border border-transparent'
-                          }
-                        `}
-                      >
-                        {/* Position number */}
-                        <div
-                          className={`
-                            flex items-center justify-center w-8 h-8 rounded-lg font-bold text-sm
-                            ${
-                              race.status === 'completed' && index === 0
-                                ? 'bg-yellow-500/20 text-yellow-400'
-                                : race.status === 'completed' && index === 1
-                                ? 'bg-gray-400/20 text-gray-300'
-                                : race.status === 'completed' && index === 2
-                                ? 'bg-amber-600/20 text-amber-500'
-                                : 'bg-iron-gray text-gray-500'
-                            }
-                          `}
-                        >
-                          {index + 1}
-                        </div>
-
-                        {/* Avatar with nation flag */}
-                        <div className="relative flex-shrink-0">
-                          <img
-                            src={driver.avatarUrl}
-                            alt={driver.name}
-                            className={`
-                              w-10 h-10 rounded-full object-cover
-                              ${isCurrentUser ? 'ring-2 ring-primary-blue/50' : ''}
-                            `}
-                          />
-                          {/* Nation flag */}
-                          <div className="absolute -bottom-0.5 -right-0.5 w-5 h-5 rounded-full bg-deep-graphite border-2 border-deep-graphite flex items-center justify-center text-xs shadow-sm">
-                            {countryFlag}
-                          </div>
-                        </div>
-
-                        {/* Driver info */}
-                        <div className="flex-1 min-w-0">
-                          <div className="flex items-center gap-2">
-                            <p
-                              className={`text-sm font-semibold truncate ${
-                                isCurrentUser ? 'text-primary-blue' : 'text-white'
-                              }`}
-                            >
-                              {driver.name}
-                            </p>
-                            {isCurrentUser && (
-                              <span className="px-2 py-0.5 text-[10px] font-bold bg-primary-blue text-white rounded-full uppercase tracking-wide">
-                                You
-                              </span>
-                            )}
-                          </div>
-                          <p className="text-xs text-gray-500">{driver.country}</p>
-                        </div>
-
-                        {/* Rating badge */}
-                        {driver.rating != null && (
-                          <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-warning-amber/10 border border-warning-amber/20">
-                            <Zap className="w-3 h-3 text-warning-amber" />
-                            <span className="text-xs font-bold text-warning-amber font-mono">
-                              {driver.rating}
-                            </span>
-                          </div>
-                        )}
-                      </div>
-                    );
-                  })}
-                </div>
-              )}
-            </Card>
-          </div>
-
-          {/* Sidebar */}
-          <div className="space-y-6">
-            {/* League Card - Premium Design */}
-            {league && (
-              <Card className="overflow-hidden">
-                <div className="flex items-center gap-4 mb-4">
-                  <div className="w-14 h-14 rounded-xl overflow-hidden bg-iron-gray flex-shrink-0">
-                    <img
-                      src={`league-logo-${league.id}`}
-                      alt={league.name}
-                      className="w-full h-full object-cover"
-                    />
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-xs text-gray-500 uppercase tracking-wide mb-0.5">League</p>
-                    <h3 className="text-white font-semibold truncate">{league.name}</h3>
-                  </div>
-                </div>
-
-                {league.description && (
-                  <p className="text-sm text-gray-400 mb-4 line-clamp-2">{league.description}</p>
-                )}
-
-                <div className="grid grid-cols-2 gap-3 mb-4">
-                  <div className="p-3 rounded-lg bg-deep-graphite">
-                    <p className="text-xs text-gray-500 mb-1">Max Drivers</p>
-                    <p className="text-white font-medium">{(league.settings as any).maxDrivers ?? 32}</p>
-                  </div>
-                  <div className="p-3 rounded-lg bg-deep-graphite">
-                    <p className="text-xs text-gray-500 mb-1">Format</p>
-                    <p className="text-white font-medium capitalize">
-                      {(league.settings as any).qualifyingFormat ?? 'Open'}
-                    </p>
-                  </div>
-                </div>
-
-                <Link
-                  href={`/leagues/${league.id}`}
-                  className="flex items-center justify-center gap-2 w-full py-2.5 rounded-lg bg-primary-blue/10 border border-primary-blue/30 text-primary-blue text-sm font-medium hover:bg-primary-blue/20 transition-colors"
-                >
-                  View League
-                  <ArrowRight className="w-4 h-4" />
-                </Link>
-              </Card>
-            )}
-
-            {/* Quick Actions Card */}
-            <Card>
-              <h2 className="text-lg font-semibold text-white mb-4">Actions</h2>
-
-              <div className="space-y-3">
-                {/* Registration Actions */}
-                {race.status === 'scheduled' && registration.canRegister && !registration.isUserRegistered && (
-                  <Button
-                    variant="primary"
-                    className="w-full flex items-center justify-center gap-2"
-                    onClick={handleRegister}
-                    disabled={registerMutation.isPending}
-                  >
-                    <UserPlus className="w-4 h-4" />
-                    {registerMutation.isPending ? 'Registering...' : 'Register for Race'}
-                  </Button>
-                )}
-
-                {race.status === 'scheduled' && registration.isUserRegistered && (
-                  <>
-                    <div className="flex items-center gap-2 px-4 py-3 bg-performance-green/10 border border-performance-green/30 rounded-lg text-performance-green">
-                      <CheckCircle2 className="w-5 h-5" />
-                      <span className="font-medium">You're Registered</span>
-                    </div>
-                    <Button
-                      variant="secondary"
-                      className="w-full flex items-center justify-center gap-2"
-                      onClick={handleWithdraw}
-                      disabled={withdrawMutation.isPending}
-                    >
-                      <UserMinus className="w-4 h-4" />
-                      {withdrawMutation.isPending ? 'Withdrawing...' : 'Withdraw'}
-                    </Button>
-                  </>
-                )}
-
-                {viewModel.canReopenRace &&
-                  LeagueMembershipUtility.isOwnerOrAdmin(viewModel.league?.id || '', currentDriverId) && (
-                  <Button
-                    variant="secondary"
-                    className="w-full flex items-center justify-center gap-2"
-                    onClick={handleReopenRace}
-                    disabled={reopenMutation.isPending}
-                  >
-                    <PlayCircle className="w-4 h-4" />
-                    {reopenMutation.isPending ? 'Re-opening...' : 'Re-open Race'}
-                  </Button>
-                )}
-
-                {race.status === 'completed' && (
-                  <>
-                    <Button
-                      variant="primary"
-                      className="w-full flex items-center justify-center gap-2"
-                      onClick={() => router.push(`/races/${race.id}/results`)}
-                    >
-                      <Trophy className="w-4 h-4" />
-                      View Results
-                    </Button>
-                    {userResult && (
-                      <Button
-                        variant="secondary"
-                        className="w-full flex items-center justify-center gap-2"
-                        onClick={() => setShowProtestModal(true)}
-                      >
-                        <Scale className="w-4 h-4" />
-                        File Protest
-                      </Button>
-                    )}
-                    <Button
-                      variant="secondary"
-                      className="w-full flex items-center justify-center gap-2"
-                      onClick={() => router.push(`/races/${race.id}/stewarding`)}
-                    >
-                      <Scale className="w-4 h-4" />
-                      Stewarding
-                    </Button>
-                  </>
-                )}
-
-                {viewModel.canReopenRace &&
-                  LeagueMembershipUtility.isOwnerOrAdmin(viewModel.league?.id || '', currentDriverId) && (
-                  <Button
-                    variant="secondary"
-                    className="w-full flex items-center justify-center gap-2"
-                    onClick={handleReopenRace}
-                    disabled={reopenMutation.isPending}
-                  >
-                    <PlayCircle className="w-4 h-4" />
-                    {reopenMutation.isPending ? 'Re-opening...' : 'Re-open Race'}
-                  </Button>
-                )}
-
-                {race.status === 'running' && LeagueMembershipUtility.isOwnerOrAdmin(viewModel.league?.id || '', currentDriverId) && (
-                  <Button
-                    variant="primary"
-                    className="w-full flex items-center justify-center gap-2"
-                    onClick={() => setShowEndRaceModal(true)}
-                  >
-                    <CheckCircle2 className="w-4 h-4" />
-                    End Race & Process Results
-                  </Button>
-                )}
-
-                {race.status === 'scheduled' && (
-                  <Button
-                    variant="secondary"
-                    className="w-full flex items-center justify-center gap-2"
-                    onClick={handleCancelRace}
-                    disabled={cancelMutation.isPending}
-                  >
-                    <XCircle className="w-4 h-4" />
-                    {cancelMutation.isPending ? 'Cancelling...' : 'Cancel Race'}
-                  </Button>
-                )}
-              </div>
-            </Card>
-
-            {/* Status Info */}
-            <Card className={`${config.bg} border ${config.border}`}>
-              <div className="flex items-start gap-3">
-                <div className={`p-2 rounded-lg ${config.bg}`}>
-                  <StatusIcon className={`w-5 h-5 ${config.color}`} />
-                </div>
-                <div>
-                  <p className={`font-medium ${config.color}`}>{config.label}</p>
-                  <p className="text-sm text-gray-400 mt-1">{config.description}</p>
-                </div>
-              </div>
-            </Card>
-          </div>
-        </div>
-      </div>
-
-      {/* Protest Filing Modal */}
-      <FileProtestModal
-        isOpen={showProtestModal}
-        onClose={() => setShowProtestModal(false)}
-        raceId={race.id}
-        leagueId={league ? league.id : ''}
-        protestingDriverId={currentDriverId}
-        participants={entryList.map(d => ({ id: d.id, name: d.name }))}
-      />
-
-      {/* End Race Modal */}
-      {showEndRaceModal && (
-        <EndRaceModal
-          raceId={race.id}
-          raceName={race.track}
-          onConfirm={async () => {
-            try {
-              await completeMutation.mutateAsync(race.id);
-              setShowEndRaceModal(false);
-            } catch (err) {
-              alert(err instanceof Error ? err.message : 'Failed to complete race');
-            }
-          }}
-          onCancel={() => setShowEndRaceModal(false)}
-        />
-      )}
-    </div>
-  );
-}
+export default RaceDetailInteractive;

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

@@ -0,0 +1,110 @@
+'use client';
+
+import { useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { RaceResultsTemplate } from '@/templates/RaceResultsTemplate';
+import { useRaceResultsDetail, useRaceWithSOF } from '@/hooks/useRaceService';
+import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
+import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
+import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
+
+export function RaceResultsInteractive() {
+  const router = useRouter();
+  const params = useParams();
+  const raceId = params.id as string;
+  const currentDriverId = useEffectiveDriverId();
+
+  // Fetch data
+  const { data: raceData, isLoading, error } = useRaceResultsDetail(raceId, currentDriverId);
+  const { data: sofData } = useRaceWithSOF(raceId);
+  const { data: membership } = useLeagueMembership(raceData?.league?.id || '', currentDriverId);
+
+  // UI State
+  const [importing, setImporting] = useState(false);
+  const [importSuccess, setImportSuccess] = useState(false);
+  const [importError, setImportError] = useState<string | null>(null);
+  const [showImportForm, setShowImportForm] = useState(false);
+
+  const raceSOF = sofData?.strengthOfField || null;
+  const isAdmin = membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;
+
+  // Transform data for template
+  const results = raceData?.results.map(result => ({
+    position: result.position,
+    driverId: result.driverId,
+    driverName: result.driverName,
+    driverAvatar: result.avatarUrl,
+    country: 'US', // Default since view model doesn't have country
+    car: 'Unknown', // Default since view model doesn't have car
+    laps: 0, // Default since view model doesn't have laps
+    time: '0:00.00', // Default since view model doesn't have time
+    fastestLap: result.fastestLap.toString(), // Convert number to string
+    points: 0, // Default since view model doesn't have points
+    incidents: result.incidents,
+    isCurrentUser: result.driverId === currentDriverId,
+  })) ?? [];
+
+  const penalties = raceData?.penalties.map(penalty => ({
+    driverId: penalty.driverId,
+    driverName: raceData.results.find(r => r.driverId === penalty.driverId)?.driverName || 'Unknown',
+    type: penalty.type as 'time_penalty' | 'grid_penalty' | 'points_deduction' | 'disqualification' | 'warning' | 'license_points',
+    value: penalty.value || 0,
+    reason: 'Penalty applied', // Default since view model doesn't have reason
+    notes: undefined, // Default since view model doesn't have notes
+  })) ?? [];
+
+  // Actions
+  const handleBack = () => {
+    router.back();
+  };
+
+  const handleImportResults = async (importedResults: any[]) => {
+    setImporting(true);
+    setImportError(null);
+
+    try {
+      // TODO: Implement race results service
+      // await raceResultsService.importRaceResults(raceId, {
+      //   resultsFileContent: JSON.stringify(importedResults),
+      // });
+
+      setImportSuccess(true);
+      // await loadData();
+    } catch (err) {
+      setImportError(err instanceof Error ? err.message : 'Failed to import results');
+    } finally {
+      setImporting(false);
+    }
+  };
+
+  const handlePenaltyClick = (driver: { id: string; name: string }) => {
+    // This would open a penalty modal in a real implementation
+    console.log('Penalty click for:', driver);
+  };
+
+  return (
+    <RaceResultsTemplate
+      raceTrack={raceData?.race?.track}
+      raceScheduledAt={raceData?.race?.scheduledAt}
+      totalDrivers={raceData?.stats.totalDrivers}
+      leagueName={raceData?.league?.name}
+      raceSOF={raceSOF}
+      results={results}
+      penalties={penalties}
+      pointsSystem={raceData?.pointsSystem ?? {}}
+      fastestLapTime={raceData?.fastestLapTime ?? 0}
+      currentDriverId={currentDriverId}
+      isAdmin={isAdmin}
+      isLoading={isLoading}
+      error={error}
+      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,180 +1,3 @@
-'use client';
+import { RaceResultsInteractive } from './RaceResultsInteractive';
 
-import Breadcrumbs from '@/components/layout/Breadcrumbs';
-import QuickPenaltyModal from '@/components/leagues/QuickPenaltyModal';
-import ImportResultsForm from '@/components/races/ImportResultsForm';
-import RaceResultsHeader from '@/components/races/RaceResultsHeader';
-import ResultsTable from '@/components/races/ResultsTable';
-import Button from '@/components/ui/Button';
-import Card from '@/components/ui/Card';
-import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import { useRaceResultsDetail, useRaceWithSOF } from '@/hooks/useRaceService';
-import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
-import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
-import type { RaceResultsDetailViewModel } from '@/lib/view-models/RaceResultsDetailViewModel';
-import { ArrowLeft, Calendar, Trophy, Users, Zap } from 'lucide-react';
-import { useParams, useRouter } from 'next/navigation';
-import { useState } from 'react';
-
-export default function RaceResultsPage() {
-  const router = useRouter();
-  const params = useParams();
-  const raceId = params.id as string;
-  const currentDriverId = useEffectiveDriverId();
-
-  const { data: raceData, isLoading: loading, error } = useRaceResultsDetail(raceId, currentDriverId);
-  const { data: sofData } = useRaceWithSOF(raceId);
-  const { data: membership } = useLeagueMembership(raceData?.league?.id || '', currentDriverId);
-
-  const [importing, setImporting] = useState(false);
-  const [importSuccess, setImportSuccess] = useState(false);
-  const [showQuickPenaltyModal, setShowQuickPenaltyModal] = useState(false);
-  const [preSelectedDriver, setPreSelectedDriver] = useState<{ id: string; name: string } | undefined>(undefined);
-  const [importError, setImportError] = useState<string | null>(null);
-
-  const raceSOF = sofData?.strengthOfField || null;
-  const isAdmin = membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;
-
-  const handleImportSuccess = async (importedResults: any[]) => {
-    setImporting(true);
-    setImportError(null);
-
-    try {
-      // TODO: Implement race results service
-      // await raceResultsService.importRaceResults(raceId, {
-      //   resultsFileContent: JSON.stringify(importedResults), // Assuming the API expects JSON string
-      // });
-
-      setImportSuccess(true);
-      // await loadData();
-    } catch (err) {
-      setImportError(err instanceof Error ? err.message : 'Failed to import results');
-    } finally {
-      setImporting(false);
-    }
-  };
-
-  const handleImportError = (errorMessage: string) => {
-    setImportError(errorMessage);
-  };
-
-  const handlePenaltyClick = (driver: { id: string; name: string }) => {
-    setPreSelectedDriver(driver);
-    setShowQuickPenaltyModal(true);
-  };
-
-  const handleCloseQuickPenaltyModal = () => {
-    setShowQuickPenaltyModal(false);
-    setPreSelectedDriver(undefined);
-  };
-
-  if (loading) {
-    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">Loading results...</div>
-        </div>
-      </div>
-    );
-  }
-
-  if (error && !raceData) {
-    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">
-          <Card className="text-center py-12">
-            <div className="text-warning-amber mb-4">
-              {error?.message || 'Race not found'}
-            </div>
-            <Button
-              variant="secondary"
-              onClick={() => router.push('/races')}
-            >
-              Back to Races
-            </Button>
-          </Card>
-        </div>
-      </div>
-    );
-  }
-
-  const hasResults = raceData?.results.length ?? 0 > 0;
-
-  const breadcrumbItems = [
-    { label: 'Races', href: '/races' },
-    ...(raceData?.league ? [{ label: raceData.league.name, href: `/leagues/${raceData.league.id}` }] : []),
-    ...(raceData?.race ? [{ label: raceData.race.track, href: `/races/${raceData.race.id}` }] : []),
-    { label: 'Results' },
-  ];
-
-  return (
-    <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
-      <div className="max-w-6xl mx-auto space-y-6">
-        <div className="flex items-center justify-between">
-          <Breadcrumbs items={breadcrumbItems} className="text-sm text-gray-400" />
-          <Button
-            variant="secondary"
-            onClick={() => router.back()}
-            className="flex items-center gap-2 text-sm"
-          >
-            <ArrowLeft className="w-4 h-4" />
-            Back
-          </Button>
-        </div>
-
-        <RaceResultsHeader
-          raceTrack={raceData?.race?.track}
-          raceScheduledAt={raceData?.race?.scheduledAt}
-          totalDrivers={raceData?.stats.totalDrivers}
-          leagueName={raceData?.league?.name}
-          raceSOF={raceSOF}
-        />
-
-        {importSuccess && (
-          <div className="p-4 bg-performance-green/10 border border-performance-green/30 rounded-lg text-performance-green">
-            <strong>Success!</strong> Results imported and standings updated.
-          </div>
-        )}
-
-        {importError && (
-          <div className="p-4 bg-warning-amber/10 border border-warning-amber/30 rounded-lg text-warning-amber">
-            <strong>Error:</strong> {importError}
-          </div>
-        )}
-
-        <Card>
-          {hasResults && raceData ? (
-            <ResultsTable
-              results={raceData.resultsByPosition}
-              drivers={raceData.drivers}
-              pointsSystem={raceData.pointsSystem ?? {}}
-              fastestLapTime={raceData.fastestLapTime ?? 0}
-              penalties={raceData.penalties}
-              currentDriverId={raceData.currentDriverId ?? ''}
-              isAdmin={isAdmin}
-              onPenaltyClick={handlePenaltyClick}
-            />
-          ) : (
-            <>
-              <h2 className="text-xl font-semibold text-white mb-6">Import Results</h2>
-              <p className="text-gray-400 text-sm mb-6">
-                No results imported. Upload CSV to test the standings system.
-              </p>
-              {importing ? (
-                <div className="text-center py-8 text-gray-400">
-                  Importing results and updating standings...
-                </div>
-              ) : (
-                <ImportResultsForm
-                  raceId={raceId}
-                  onSuccess={handleImportSuccess}
-                  onError={handleImportError}
-                />
-              )}
-            </>
-          )}
-        </Card>
-      </div>
-    </div>
-  );
-}
+export default RaceResultsInteractive;

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

@@ -0,0 +1,61 @@
+'use client';
+
+import { useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { RaceStewardingTemplate, StewardingTab } from '@/templates/RaceStewardingTemplate';
+import { useRaceStewardingData } from '@/hooks/useRaceStewardingService';
+import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
+import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
+import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
+
+export function RaceStewardingInteractive() {
+  const router = useRouter();
+  const params = useParams();
+  const raceId = params.id as string;
+  const currentDriverId = useEffectiveDriverId();
+
+  // Fetch data
+  const { data: stewardingData, isLoading, error } = useRaceStewardingData(raceId, currentDriverId);
+  const { data: membership } = useLeagueMembership(stewardingData?.league?.id || '', currentDriverId);
+
+  // UI State
+  const [activeTab, setActiveTab] = useState<StewardingTab>('pending');
+
+  const isAdmin = membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;
+
+  // Actions
+  const handleBack = () => {
+    router.push(`/races/${raceId}`);
+  };
+
+  const handleReviewProtest = (protestId: string) => {
+    // Navigate to protest review page
+    router.push(`/leagues/${stewardingData?.league?.id}/stewarding/protests/${protestId}`);
+  };
+
+  // Transform data for template
+  const templateData = stewardingData ? {
+    race: stewardingData.race,
+    league: stewardingData.league,
+    pendingProtests: stewardingData.pendingProtests,
+    resolvedProtests: stewardingData.resolvedProtests,
+    penalties: stewardingData.penalties,
+    driverMap: stewardingData.driverMap,
+    pendingCount: stewardingData.pendingCount,
+    resolvedCount: stewardingData.resolvedCount,
+    penaltiesCount: stewardingData.penaltiesCount,
+  } : undefined;
+
+  return (
+    <RaceStewardingTemplate
+      stewardingData={templateData}
+      isLoading={isLoading}
+      error={error}
+      onBack={handleBack}
+      onReviewProtest={handleReviewProtest}
+      isAdmin={isAdmin}
+      activeTab={activeTab}
+      setActiveTab={setActiveTab}
+    />
+  );
+}

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

@@ -1,413 +1,3 @@
-'use client';
+import { RaceStewardingInteractive } from './RaceStewardingInteractive';
 
-import Breadcrumbs from '@/components/layout/Breadcrumbs';
-import RaceStewardingStats from '@/components/races/RaceStewardingStats';
-import Button from '@/components/ui/Button';
-import Card from '@/components/ui/Card';
-import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import { useRaceStewardingData } from '@/hooks/useRaceStewardingService';
-import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
-import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
-import {
-  AlertCircle,
-  AlertTriangle,
-  ArrowLeft,
-  CheckCircle,
-  Clock,
-  Flag,
-  Gavel,
-  Scale,
-  Video
-} from 'lucide-react';
-import Link from 'next/link';
-import { useParams, useRouter } from 'next/navigation';
-import { useState } from 'react';
-
-export default function RaceStewardingPage() {
-  const params = useParams();
-  const router = useRouter();
-  const raceId = params.id as string;
-  const currentDriverId = useEffectiveDriverId();
-
-  const { data: stewardingData, isLoading: loading } = useRaceStewardingData(raceId, currentDriverId);
-  const { data: membership } = useLeagueMembership(stewardingData?.league?.id || '', currentDriverId);
-
-  const [activeTab, setActiveTab] = useState<'pending' | 'resolved' | 'penalties'>('pending');
-
-  const isAdmin = membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;
-
-  const pendingProtests = stewardingData?.pendingProtests ?? [];
-  const resolvedProtests = stewardingData?.resolvedProtests ?? [];
-
-  const getStatusBadge = (status: string) => {
-    switch (status) {
-      case 'pending':
-      case 'under_review':
-        return (
-          <span className="px-2 py-0.5 text-xs font-medium bg-warning-amber/20 text-warning-amber rounded-full">
-            Pending
-          </span>
-        );
-      case 'upheld':
-        return (
-          <span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full">
-            Upheld
-          </span>
-        );
-      case 'dismissed':
-        return (
-          <span className="px-2 py-0.5 text-xs font-medium bg-gray-500/20 text-gray-400 rounded-full">
-            Dismissed
-          </span>
-        );
-      case 'withdrawn':
-        return (
-          <span className="px-2 py-0.5 text-xs font-medium bg-blue-500/20 text-blue-400 rounded-full">
-            Withdrawn
-          </span>
-        );
-      default:
-        return null;
-    }
-  };
-
-  const formatDate = (date: Date | string) => {
-    const d = typeof date === 'string' ? new Date(date) : date;
-    return d.toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
-    });
-  };
-
-  if (loading) {
-    return (
-      <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-4xl mx-auto">
-          <div className="animate-pulse space-y-6">
-            <div className="h-6 bg-iron-gray rounded w-1/4" />
-            <div className="h-48 bg-iron-gray rounded-xl" />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (!stewardingData?.race) {
-    return (
-      <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-4xl mx-auto">
-          <Card className="text-center py-12">
-            <div className="flex flex-col items-center gap-4">
-              <div className="p-4 bg-warning-amber/10 rounded-full">
-                <AlertTriangle className="w-8 h-8 text-warning-amber" />
-              </div>
-              <div>
-                <p className="text-white font-medium mb-1">Race not found</p>
-                <p className="text-sm text-gray-500">
-                  The race you're looking for doesn't exist.
-                </p>
-              </div>
-              <Button variant="secondary" onClick={() => router.push('/races')}>
-                Back to Races
-              </Button>
-            </div>
-          </Card>
-        </div>
-      </div>
-    );
-  }
-
-  const breadcrumbItems = [
-    { label: 'Races', href: '/races' },
-    { label: stewardingData?.race?.track || 'Race', href: `/races/${raceId}` },
-    { label: 'Stewarding' },
-  ];
-
-  return (
-    <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
-      <div className="max-w-4xl mx-auto space-y-6">
-        {/* Navigation */}
-        <div className="flex items-center justify-between">
-          <Breadcrumbs items={breadcrumbItems} className="text-sm text-gray-400" />
-          <Button
-            variant="secondary"
-            onClick={() => router.push(`/races/${raceId}`)}
-            className="flex items-center gap-2 text-sm"
-          >
-            <ArrowLeft className="w-4 h-4" />
-            Back to Race
-          </Button>
-        </div>
-
-        {/* Header */}
-        <Card className="bg-gradient-to-r from-iron-gray/50 to-iron-gray/30">
-          <div className="flex items-center gap-4 mb-4">
-            <div className="w-12 h-12 rounded-xl bg-primary-blue/20 flex items-center justify-center">
-              <Scale className="w-6 h-6 text-primary-blue" />
-            </div>
-            <div>
-              <h1 className="text-2xl font-bold text-white">Stewarding</h1>
-                 <p className="text-sm text-gray-400">
-                   {stewardingData?.race?.track} • {stewardingData?.race?.scheduledAt ? formatDate(stewardingData.race.scheduledAt) : ''}
-                 </p>
-            </div>
-          </div>
-
-          {/* Stats */}
-          <RaceStewardingStats
-            pendingCount={stewardingData?.pendingCount ?? 0}
-            resolvedCount={stewardingData?.resolvedCount ?? 0}
-            penaltiesCount={stewardingData?.penaltiesCount ?? 0}
-          />
-        </Card>
-
-        {/* Tab Navigation */}
-        <div className="border-b border-charcoal-outline">
-          <div className="flex gap-4">
-            <button
-              onClick={() => setActiveTab('pending')}
-              className={`pb-3 px-1 font-medium transition-colors ${
-                activeTab === 'pending'
-                  ? 'text-primary-blue border-b-2 border-primary-blue'
-                  : 'text-gray-400 hover:text-white'
-              }`}
-            >
-              Pending
-              {pendingProtests.length > 0 && (
-                <span className="ml-2 px-2 py-0.5 text-xs bg-warning-amber/20 text-warning-amber rounded-full">
-                  {pendingProtests.length}
-                </span>
-              )}
-            </button>
-            <button
-              onClick={() => setActiveTab('resolved')}
-              className={`pb-3 px-1 font-medium transition-colors ${
-                activeTab === 'resolved'
-                  ? 'text-primary-blue border-b-2 border-primary-blue'
-                  : 'text-gray-400 hover:text-white'
-              }`}
-            >
-              Resolved
-            </button>
-            <button
-              onClick={() => setActiveTab('penalties')}
-              className={`pb-3 px-1 font-medium transition-colors ${
-                activeTab === 'penalties'
-                  ? 'text-primary-blue border-b-2 border-primary-blue'
-                  : 'text-gray-400 hover:text-white'
-              }`}
-            >
-              Penalties
-            </button>
-          </div>
-        </div>
-
-        {/* Content */}
-        {activeTab === 'pending' && (
-          <div className="space-y-4">
-            {pendingProtests.length === 0 ? (
-              <Card className="text-center py-12">
-                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-performance-green/10 flex items-center justify-center">
-                  <Flag className="w-8 h-8 text-performance-green" />
-                </div>
-                <p className="font-semibold text-lg text-white mb-2">All Clear!</p>
-                <p className="text-sm text-gray-400">No pending protests to review</p>
-              </Card>
-            ) : (
-              pendingProtests.map((protest) => {
-                const protester = stewardingData?.driverMap[protest.protestingDriverId];
-                const accused = stewardingData?.driverMap[protest.accusedDriverId];
-                const daysSinceFiled = Math.floor(
-                  (Date.now() - new Date(protest.filedAt).getTime()) / (1000 * 60 * 60 * 24)
-                );
-                const isUrgent = daysSinceFiled > 2;
-
-                return (
-                  <Card
-                    key={protest.id}
-                    className={`${isUrgent ? 'border-l-4 border-l-red-500' : ''}`}
-                  >
-                    <div className="flex items-start justify-between gap-4">
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2 mb-2">
-                          <AlertCircle className="w-4 h-4 text-warning-amber flex-shrink-0" />
-                          <Link
-                            href={`/drivers/${protest.protestingDriverId}`}
-                            className="font-medium text-white hover:text-primary-blue transition-colors"
-                          >
-                            {protester?.name || 'Unknown'}
-                          </Link>
-                          <span className="text-gray-400">vs</span>
-                          <Link
-                            href={`/drivers/${protest.accusedDriverId}`}
-                            className="font-medium text-white hover:text-primary-blue transition-colors"
-                          >
-                            {accused?.name || 'Unknown'}
-                          </Link>
-                          {getStatusBadge(protest.status)}
-                          {isUrgent && (
-                            <span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full flex items-center gap-1">
-                              <AlertTriangle className="w-3 h-3" />
-                              {daysSinceFiled}d old
-                            </span>
-                          )}
-                        </div>
-                        <div className="flex items-center gap-4 text-sm text-gray-400 mb-2">
-                          <span>Lap {protest.incident.lap}</span>
-                          <span>•</span>
-                          <span>Filed {formatDate(protest.filedAt)}</span>
-                          {protest.proofVideoUrl && (
-                            <>
-                              <span>•</span>
-                              <a
-                                href={protest.proofVideoUrl}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="flex items-center gap-1 text-primary-blue hover:underline"
-                              >
-                                <Video className="w-3 h-3" />
-                                Video Evidence
-                              </a>
-                            </>
-                          )}
-                        </div>
-                        <p className="text-sm text-gray-300">{protest.incident.description}</p>
-                      </div>
-                      {isAdmin && stewardingData?.league && (
-                        <Link
-                          href={`/leagues/${stewardingData.league.id}/stewarding/protests/${protest.id}`}
-                        >
-                          <Button variant="primary">Review</Button>
-                        </Link>
-                      )}
-                    </div>
-                  </Card>
-                );
-              })
-            )}
-          </div>
-        )}
-
-        {activeTab === 'resolved' && (
-          <div className="space-y-4">
-            {resolvedProtests.length === 0 ? (
-              <Card className="text-center py-12">
-                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-500/10 flex items-center justify-center">
-                  <CheckCircle className="w-8 h-8 text-gray-500" />
-                </div>
-                <p className="font-semibold text-lg text-white mb-2">No Resolved Protests</p>
-                <p className="text-sm text-gray-400">
-                  Resolved protests will appear here
-                </p>
-              </Card>
-            ) : (
-              resolvedProtests.map((protest) => {
-                const protester = stewardingData?.driverMap[protest.protestingDriverId];
-                const accused = stewardingData?.driverMap[protest.accusedDriverId];
-
-                return (
-                  <Card key={protest.id}>
-                    <div className="flex items-start justify-between gap-4">
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2 mb-2">
-                          <AlertCircle className="w-4 h-4 text-gray-400 flex-shrink-0" />
-                          <Link
-                            href={`/drivers/${protest.protestingDriverId}`}
-                            className="font-medium text-white hover:text-primary-blue transition-colors"
-                          >
-                            {protester?.name || 'Unknown'}
-                          </Link>
-                          <span className="text-gray-400">vs</span>
-                          <Link
-                            href={`/drivers/${protest.accusedDriverId}`}
-                            className="font-medium text-white hover:text-primary-blue transition-colors"
-                          >
-                            {accused?.name || 'Unknown'}
-                          </Link>
-                          {getStatusBadge(protest.status)}
-                        </div>
-                        <div className="flex items-center gap-4 text-sm text-gray-400 mb-2">
-                          <span>Lap {protest.incident.lap}</span>
-                          <span>•</span>
-                          <span>Filed {formatDate(protest.filedAt)}</span>
-                        </div>
-                        <p className="text-sm text-gray-300 mb-2">
-                          {protest.incident.description}
-                        </p>
-                        {protest.decisionNotes && (
-                          <div className="mt-2 p-3 rounded bg-iron-gray/50 border border-charcoal-outline/50">
-                            <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">
-                              Steward Decision
-                            </p>
-                            <p className="text-sm text-gray-300">{protest.decisionNotes}</p>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </Card>
-                );
-              })
-            )}
-          </div>
-        )}
-
-        {activeTab === 'penalties' && (
-          <div className="space-y-4">
-            {stewardingData?.penalties.length === 0 ? (
-              <Card className="text-center py-12">
-                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-500/10 flex items-center justify-center">
-                  <Gavel className="w-8 h-8 text-gray-500" />
-                </div>
-                <p className="font-semibold text-lg text-white mb-2">No Penalties</p>
-                <p className="text-sm text-gray-400">
-                  Penalties issued for this race will appear here
-                </p>
-              </Card>
-            ) : (
-              stewardingData?.penalties.map((penalty) => {
-                const driver = stewardingData?.driverMap[penalty.driverId];
-                return (
-                  <Card key={penalty.id}>
-                    <div className="flex items-center gap-4">
-                      <div className="w-12 h-12 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0">
-                        <Gavel className="w-6 h-6 text-red-400" />
-                      </div>
-                      <div className="flex-1">
-                        <div className="flex items-center gap-2 mb-1">
-                          <Link
-                            href={`/drivers/${penalty.driverId}`}
-                            className="font-medium text-white hover:text-primary-blue transition-colors"
-                          >
-                            {driver?.name || 'Unknown'}
-                          </Link>
-                          <span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full">
-                            {penalty.type.replace('_', ' ')}
-                          </span>
-                        </div>
-                        <p className="text-sm text-gray-400">{penalty.reason}</p>
-                        {penalty.notes && (
-                          <p className="text-sm text-gray-500 mt-1 italic">{penalty.notes}</p>
-                        )}
-                      </div>
-                      <div className="text-right">
-                        <span className="text-2xl font-bold text-red-400">
-                          {penalty.type === 'time_penalty' && `+${penalty.value}s`}
-                          {penalty.type === 'grid_penalty' && `+${penalty.value} grid`}
-                          {penalty.type === 'points_deduction' && `-${penalty.value} pts`}
-                          {penalty.type === 'disqualification' && 'DSQ'}
-                          {penalty.type === 'warning' && 'Warning'}
-                          {penalty.type === 'license_points' && `${penalty.value} LP`}
-                        </span>
-                      </div>
-                    </div>
-                  </Card>
-                );
-              })
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
+export default RaceStewardingInteractive;

apps/website/app/races/all/RacesAllInteractive.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { RacesAllTemplate, StatusFilter } from '@/templates/RacesAllTemplate';
+import { useAllRacesPageData } from '@/hooks/useRaceService';
+
+const ITEMS_PER_PAGE = 10;
+
+export function RacesAllInteractive() {
+  const router = useRouter();
+  
+  // Fetch data
+  const { data: pageData, isLoading } = useAllRacesPageData();
+  
+  // Pagination
+  const [currentPage, setCurrentPage] = useState(1);
+  
+  // Filters
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
+  const [leagueFilter, setLeagueFilter] = useState<string>('all');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showFilters, setShowFilters] = useState(false);
+  const [showFilterModal, setShowFilterModal] = useState(false);
+
+  // Transform data for template
+  const races = pageData?.races.map(race => ({
+    id: race.id,
+    track: race.track,
+    car: race.car,
+    scheduledAt: race.scheduledAt,
+    status: race.status as 'scheduled' | 'running' | 'completed' | 'cancelled',
+    sessionType: 'race',
+    leagueId: race.leagueId,
+    leagueName: race.leagueName,
+    strengthOfField: race.strengthOfField ?? undefined,
+  })) ?? [];
+
+  // Calculate total pages
+  const filteredRaces = races.filter(race => {
+    if (statusFilter !== 'all' && race.status !== statusFilter) {
+      return false;
+    }
+
+    if (leagueFilter !== 'all' && race.leagueId !== leagueFilter) {
+      return false;
+    }
+
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      const matchesTrack = race.track.toLowerCase().includes(query);
+      const matchesCar = race.car.toLowerCase().includes(query);
+      const matchesLeague = race.leagueName?.toLowerCase().includes(query);
+      if (!matchesTrack && !matchesCar && !matchesLeague) {
+        return false;
+      }
+    }
+
+    return true;
+  });
+
+  const totalPages = Math.ceil(filteredRaces.length / ITEMS_PER_PAGE);
+
+  // Actions
+  const handleRaceClick = (raceId: string) => {
+    router.push(`/races/${raceId}`);
+  };
+
+  const handleLeagueClick = (leagueId: string) => {
+    router.push(`/leagues/${leagueId}`);
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  return (
+    <RacesAllTemplate
+      races={races}
+      isLoading={isLoading}
+      currentPage={currentPage}
+      totalPages={totalPages}
+      itemsPerPage={ITEMS_PER_PAGE}
+      onPageChange={handlePageChange}
+      statusFilter={statusFilter}
+      setStatusFilter={setStatusFilter}
+      leagueFilter={leagueFilter}
+      setLeagueFilter={setLeagueFilter}
+      searchQuery={searchQuery}
+      setSearchQuery={setSearchQuery}
+      showFilters={showFilters}
+      setShowFilters={setShowFilters}
+      showFilterModal={showFilterModal}
+      setShowFilterModal={setShowFilterModal}
+      onRaceClick={handleRaceClick}
+      onLeagueClick={handleLeagueClick}
+    />
+  );
+}

apps/website/app/races/all/page.tsx

@@ -1,409 +1,3 @@
-'use client';
+import { RacesAllInteractive } from './RacesAllInteractive';
 
-import { useState, useMemo, useEffect } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
-import Link from 'next/link';
-import Card from '@/components/ui/Card';
-import Button from '@/components/ui/Button';
-import Heading from '@/components/ui/Heading';
-import Breadcrumbs from '@/components/layout/Breadcrumbs';
-import { useAllRacesPageData } from '@/hooks/useRaceService';
-import {
-  Calendar,
-  Clock,
-  Flag,
-  ChevronRight,
-  ChevronLeft,
-  Filter,
-  Car,
-  Trophy,
-  Zap,
-  PlayCircle,
-  CheckCircle2,
-  XCircle,
-  ArrowRight,
-  Search,
-  SlidersHorizontal,
-} from 'lucide-react';
-
-const ITEMS_PER_PAGE = 10;
-
-type StatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
-
-export default function AllRacesPage() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const { data: pageData, isLoading: loading } = useAllRacesPageData();
-
-  // Pagination
-  const [currentPage, setCurrentPage] = useState(1);
-
-  // Filters
-  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
-  const [leagueFilter, setLeagueFilter] = useState<string>('all');
-  const [searchQuery, setSearchQuery] = useState('');
-  const [showFilters, setShowFilters] = useState(false);
-
-  const races = pageData?.races ?? [];
-
-  const filteredRaces = useMemo(() => {
-    return races.filter(race => {
-      if (statusFilter !== 'all' && race.status !== statusFilter) {
-        return false;
-      }
-
-      if (leagueFilter !== 'all' && race.leagueId !== leagueFilter) {
-        return false;
-      }
-
-      if (searchQuery) {
-        const query = searchQuery.toLowerCase();
-        const matchesTrack = race.track.toLowerCase().includes(query);
-        const matchesCar = race.car.toLowerCase().includes(query);
-        const matchesLeague = race.leagueName.toLowerCase().includes(query);
-        if (!matchesTrack && !matchesCar && !matchesLeague) {
-          return false;
-        }
-      }
-
-      return true;
-    });
-  }, [races, statusFilter, leagueFilter, searchQuery]);
-
-  // Paginate
-  const totalPages = Math.ceil(filteredRaces.length / ITEMS_PER_PAGE);
-  const paginatedRaces = useMemo(() => {
-    const start = (currentPage - 1) * ITEMS_PER_PAGE;
-    return filteredRaces.slice(start, start + ITEMS_PER_PAGE);
-  }, [filteredRaces, currentPage]);
-
-  // Reset page when filters change
-  useEffect(() => {
-    setCurrentPage(1);
-  }, [statusFilter, leagueFilter, searchQuery]);
-
-  const formatDate = (date: Date | string) => {
-    const d = typeof date === 'string' ? new Date(date) : date;
-    return d.toLocaleDateString('en-US', {
-      weekday: 'short',
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
-    });
-  };
-
-  const formatTime = (date: Date | string) => {
-    const d = typeof date === 'string' ? new Date(date) : date;
-    return d.toLocaleTimeString('en-US', {
-      hour: '2-digit',
-      minute: '2-digit',
-    });
-  };
-
-  const statusConfig = {
-    scheduled: {
-      icon: Clock,
-      color: 'text-primary-blue',
-      bg: 'bg-primary-blue/10',
-      border: 'border-primary-blue/30',
-      label: 'Scheduled',
-    },
-    running: {
-      icon: PlayCircle,
-      color: 'text-performance-green',
-      bg: 'bg-performance-green/10',
-      border: 'border-performance-green/30',
-      label: 'LIVE',
-    },
-    completed: {
-      icon: CheckCircle2,
-      color: 'text-gray-400',
-      bg: 'bg-gray-500/10',
-      border: 'border-gray-500/30',
-      label: 'Completed',
-    },
-    cancelled: {
-      icon: XCircle,
-      color: 'text-warning-amber',
-      bg: 'bg-warning-amber/10',
-      border: 'border-warning-amber/30',
-      label: 'Cancelled',
-    },
-  };
-
-  const breadcrumbItems = [
-    { label: 'Races', href: '/races' },
-    { label: 'All Races' },
-  ];
-
-  if (loading) {
-    return (
-      <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-5xl mx-auto">
-          <div className="animate-pulse space-y-6">
-            <div className="h-6 bg-iron-gray rounded w-1/4" />
-            <div className="h-10 bg-iron-gray rounded w-1/3" />
-            <div className="space-y-4">
-              {[1, 2, 3, 4, 5].map(i => (
-                <div key={i} className="h-24 bg-iron-gray rounded-lg" />
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
-      <div className="max-w-5xl mx-auto space-y-6">
-        {/* Breadcrumbs */}
-        <Breadcrumbs items={breadcrumbItems} />
-
-        {/* Header */}
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-          <div>
-            <Heading level={1} className="text-2xl font-bold text-white flex items-center gap-3">
-              <Flag className="w-6 h-6 text-primary-blue" />
-              All Races
-            </Heading>
-            <p className="text-gray-400 text-sm mt-1">
-              {filteredRaces.length} race{filteredRaces.length !== 1 ? 's' : ''} found
-            </p>
-          </div>
-          
-          <Button
-            variant="secondary"
-            onClick={() => setShowFilters(!showFilters)}
-            className="flex items-center gap-2"
-          >
-            <SlidersHorizontal className="w-4 h-4" />
-            Filters
-          </Button>
-        </div>
-
-        {/* Search & Filters */}
-        <Card className={`!p-4 ${showFilters ? '' : 'hidden sm:block'}`}>
-          <div className="space-y-4">
-            {/* Search */}
-            <div className="relative">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
-              <input
-                type="text"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                placeholder="Search by track, car, or league..."
-                className="w-full pl-10 pr-4 py-2.5 bg-deep-graphite border border-charcoal-outline rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-blue"
-              />
-            </div>
-
-            {/* Filter Row */}
-            <div className="flex flex-wrap gap-4">
-              {/* Status Filter */}
-              <select
-                value={statusFilter}
-                onChange={(e) => setStatusFilter(e.target.value as StatusFilter)}
-                className="px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue"
-              >
-                <option value="all">All Statuses</option>
-                <option value="scheduled">Scheduled</option>
-                <option value="running">Live</option>
-                <option value="completed">Completed</option>
-                <option value="cancelled">Cancelled</option>
-              </select>
-
-              {/* League Filter */}
-              <select
-                value={leagueFilter}
-                onChange={(e) => setLeagueFilter(e.target.value)}
-                className="px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue"
-              >
-                <option value="all">All Leagues</option>
-                {pageData && [...new Set(pageData.races.map(r => r.leagueId))].map(leagueId => {
-                  const race = pageData.races.find(r => r.leagueId === leagueId);
-                  return race ? (
-                    <option key={leagueId} value={leagueId}>
-                      {race.leagueName}
-                    </option>
-                  ) : null;
-                })}
-              </select>
-
-              {/* Clear Filters */}
-              {(statusFilter !== 'all' || leagueFilter !== 'all' || searchQuery) && (
-                <button
-                  onClick={() => {
-                    setStatusFilter('all');
-                    setLeagueFilter('all');
-                    setSearchQuery('');
-                  }}
-                  className="px-4 py-2 text-sm text-primary-blue hover:underline"
-                >
-                  Clear filters
-                </button>
-              )}
-            </div>
-          </div>
-        </Card>
-
-        {/* Race List */}
-        {paginatedRaces.length === 0 ? (
-          <Card className="text-center py-12">
-            <div className="flex flex-col items-center gap-4">
-              <div className="p-4 bg-iron-gray rounded-full">
-                <Calendar className="w-8 h-8 text-gray-500" />
-              </div>
-              <div>
-                <p className="text-white font-medium mb-1">No races found</p>
-                <p className="text-sm text-gray-500">
-                  {races.length === 0 
-                    ? 'No races have been scheduled yet'
-                    : 'Try adjusting your search or filters'}
-                </p>
-              </div>
-            </div>
-          </Card>
-        ) : (
-          <div className="space-y-3">
-            {paginatedRaces.map(race => {
-               const config = statusConfig[race.status as keyof typeof statusConfig];
-               const StatusIcon = config.icon;
-
-              return (
-                <div
-                  key={race.id}
-                  onClick={() => router.push(`/races/${race.id}`)}
-                  className={`group relative overflow-hidden rounded-xl bg-iron-gray border ${config.border} p-4 cursor-pointer transition-all duration-200 hover:scale-[1.01] hover:border-primary-blue`}
-                >
-                  {/* Live indicator */}
-                  {race.status === 'running' && (
-                    <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-performance-green via-performance-green/50 to-performance-green animate-pulse" />
-                  )}
-
-                  <div className="flex items-center gap-4">
-                    {/* Date Column */}
-                    <div className="hidden sm:flex flex-col items-center min-w-[80px] text-center">
-                      <p className="text-xs text-gray-500 uppercase">
-                        {new Date(race.scheduledAt).toLocaleDateString('en-US', { month: 'short' })}
-                      </p>
-                      <p className="text-2xl font-bold text-white">
-                        {new Date(race.scheduledAt).getDate()}
-                      </p>
-                      <p className="text-xs text-gray-500">
-                        {formatTime(race.scheduledAt)}
-                      </p>
-                    </div>
-
-                    {/* Divider */}
-                    <div className="hidden sm:block w-px h-16 bg-charcoal-outline" />
-
-                    {/* Main Content */}
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-start justify-between gap-4">
-                        <div className="min-w-0">
-                          <h3 className="font-semibold text-white truncate group-hover:text-primary-blue transition-colors">
-                            {race.track}
-                          </h3>
-                          <div className="flex flex-wrap items-center gap-x-4 gap-y-1 mt-1">
-                            <span className="flex items-center gap-1.5 text-sm text-gray-400">
-                              <Car className="w-3.5 h-3.5" />
-                              {race.car}
-                            </span>
-                            {race.strengthOfField && (
-                              <span className="flex items-center gap-1.5 text-sm text-warning-amber">
-                                <Zap className="w-3.5 h-3.5" />
-                                SOF {race.strengthOfField}
-                              </span>
-                            )}
-                            <span className="sm:hidden text-sm text-gray-500">
-                              {formatDate(race.scheduledAt)}
-                            </span>
-                          </div>
-                          <Link
-                            href={`/leagues/${race.leagueId}`}
-                            onClick={(e) => e.stopPropagation()}
-                            className="inline-flex items-center gap-1.5 mt-2 text-sm text-primary-blue hover:underline"
-                          >
-                            <Trophy className="w-3.5 h-3.5" />
-                            {race.leagueName}
-                          </Link>
-                        </div>
-
-                        {/* Status Badge */}
-                        <div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${config.bg} ${config.border} border flex-shrink-0`}>
-                          <StatusIcon className={`w-3.5 h-3.5 ${config.color}`} />
-                          <span className={`text-xs font-medium ${config.color}`}>
-                            {config.label}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Arrow */}
-                    <ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-primary-blue transition-colors flex-shrink-0" />
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        )}
-
-        {/* Pagination */}
-        {totalPages > 1 && (
-          <div className="flex items-center justify-between pt-4">
-            <p className="text-sm text-gray-500">
-              Showing {((currentPage - 1) * ITEMS_PER_PAGE) + 1}–{Math.min(currentPage * ITEMS_PER_PAGE, filteredRaces.length)} of {filteredRaces.length}
-            </p>
-            
-            <div className="flex items-center gap-2">
-              <button
-                onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
-                disabled={currentPage === 1}
-                className="p-2 rounded-lg border border-charcoal-outline text-gray-400 hover:text-white hover:border-primary-blue disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-              >
-                <ChevronLeft className="w-5 h-5" />
-              </button>
-              
-              <div className="flex items-center gap-1">
-                {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
-                  let pageNum: number;
-                  if (totalPages <= 5) {
-                    pageNum = i + 1;
-                  } else if (currentPage <= 3) {
-                    pageNum = i + 1;
-                  } else if (currentPage >= totalPages - 2) {
-                    pageNum = totalPages - 4 + i;
-                  } else {
-                    pageNum = currentPage - 2 + i;
-                  }
-
-                  return (
-                    <button
-                      key={pageNum}
-                      onClick={() => setCurrentPage(pageNum)}
-                      className={`w-10 h-10 rounded-lg text-sm font-medium transition-colors ${
-                        currentPage === pageNum
-                          ? 'bg-primary-blue text-white'
-                          : 'text-gray-400 hover:text-white hover:bg-iron-gray'
-                      }`}
-                    >
-                      {pageNum}
-                    </button>
-                  );
-                })}
-              </div>
-
-              <button
-                onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
-                disabled={currentPage === totalPages}
-                className="p-2 rounded-lg border border-charcoal-outline text-gray-400 hover:text-white hover:border-primary-blue disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-              >
-                <ChevronRight className="w-5 h-5" />
-              </button>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
+export default RacesAllInteractive;

apps/website/app/races/page.tsx

@@ -1,569 +1,3 @@
-'use client';
+import { RacesInteractive } from './RacesInteractive';
 
-import { useState, useMemo } from 'react';
-import { useRouter } from 'next/navigation';
-import Link from 'next/link';
-import Card from '@/components/ui/Card';
-import Button from '@/components/ui/Button';
-import Heading from '@/components/ui/Heading';
-import { useRacesPageData } from '@/hooks/useRaceService';
-import {
-  Calendar,
-  Clock,
-  Flag,
-  ChevronRight,
-  Filter,
-  MapPin,
-  Car,
-  Trophy,
-  Users,
-  Zap,
-  PlayCircle,
-  CheckCircle2,
-  XCircle,
-  CalendarDays,
-  ArrowRight,
-} from 'lucide-react';
-
-type TimeFilter = 'all' | 'upcoming' | 'live' | 'past';
-type RaceStatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
-
-export default function RacesPage() {
-  const router = useRouter();
-  const { data: pageData, isLoading: loading } = useRacesPageData();
-
-  // Filters
-  const [statusFilter, setStatusFilter] = useState<RaceStatusFilter | 'all'>('all');
-  const [leagueFilter, setLeagueFilter] = useState<string>('all');
-  const [timeFilter, setTimeFilter] = useState<TimeFilter>('upcoming');
-
-  // Filter races
-  const filteredRaces = useMemo(() => {
-    if (!pageData) return [];
-
-    return pageData.races.filter((race) => {
-      // Status filter
-      if (statusFilter !== 'all' && race.status !== statusFilter) {
-        return false;
-      }
-
-      // League filter
-      if (leagueFilter !== 'all' && race.leagueId !== leagueFilter) {
-        return false;
-      }
-
-      // Time filter
-      if (timeFilter === 'upcoming' && !race.isUpcoming) {
-        return false;
-      }
-      if (timeFilter === 'live' && !race.isLive) {
-        return false;
-      }
-      if (timeFilter === 'past' && !race.isPast) {
-        return false;
-      }
-
-      return true;
-    });
-  }, [pageData, statusFilter, leagueFilter, timeFilter]);
-
-  // Group races by date for calendar view
-  const racesByDate = useMemo(() => {
-    const grouped = new Map<string, typeof filteredRaces[0][]>();
-    filteredRaces.forEach((race) => {
-      const dateKey = race.scheduledAt.split('T')[0]!;
-      if (!grouped.has(dateKey)) {
-        grouped.set(dateKey, []);
-      }
-      grouped.get(dateKey)!.push(race);
-    });
-    return grouped;
-  }, [filteredRaces]);
-
-  const upcomingRaces = filteredRaces.filter(r => r.isUpcoming).slice(0, 5);
-  const liveRaces = filteredRaces.filter(r => r.isLive);
-  const recentResults = filteredRaces.filter(r => r.isPast).slice(0, 5);
-  const stats = {
-    total: pageData?.totalCount ?? 0,
-    scheduled: pageData?.scheduledRaces.length ?? 0,
-    running: pageData?.runningRaces.length ?? 0,
-    completed: pageData?.completedRaces.length ?? 0,
-  };
-
-  const formatDate = (date: Date | string) => {
-    const d = typeof date === 'string' ? new Date(date) : date;
-    return d.toLocaleDateString('en-US', {
-      weekday: 'short',
-      month: 'short',
-      day: 'numeric',
-    });
-  };
-
-  const formatTime = (date: Date | string) => {
-    const d = typeof date === 'string' ? new Date(date) : date;
-    return d.toLocaleTimeString('en-US', {
-      hour: '2-digit',
-      minute: '2-digit',
-    });
-  };
-
-  const formatFullDate = (date: Date | string) => {
-    const d = typeof date === 'string' ? new Date(date) : date;
-    return d.toLocaleDateString('en-US', {
-      weekday: 'long',
-      month: 'long',
-      day: 'numeric',
-      year: 'numeric',
-    });
-  };
-
-  const getRelativeTime = (date?: Date | string) => {
-    if (!date) return '';
-    const now = new Date();
-    const targetDate = typeof date === 'string' ? new Date(date) : date;
-    const diffMs = targetDate.getTime() - now.getTime();
-    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
-    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
-
-    if (diffMs < 0) return 'Past';
-    if (diffHours < 1) return 'Starting soon';
-    if (diffHours < 24) return `In ${diffHours}h`;
-    if (diffDays === 1) return 'Tomorrow';
-    if (diffDays < 7) return `In ${diffDays} days`;
-    return formatDate(targetDate);
-  };
-
-  const statusConfig = {
-    scheduled: {
-      icon: Clock,
-      color: 'text-primary-blue',
-      bg: 'bg-primary-blue/10',
-      border: 'border-primary-blue/30',
-      label: 'Scheduled',
-    },
-    running: {
-      icon: PlayCircle,
-      color: 'text-performance-green',
-      bg: 'bg-performance-green/10',
-      border: 'border-performance-green/30',
-      label: 'LIVE',
-    },
-    completed: {
-      icon: CheckCircle2,
-      color: 'text-gray-400',
-      bg: 'bg-gray-500/10',
-      border: 'border-gray-500/30',
-      label: 'Completed',
-    },
-    cancelled: {
-      icon: XCircle,
-      color: 'text-warning-amber',
-      bg: 'bg-warning-amber/10',
-      border: 'border-warning-amber/30',
-      label: 'Cancelled',
-    },
-  };
-
-  if (loading) {
-    return (
-      <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-7xl mx-auto">
-          <div className="animate-pulse space-y-6">
-            <div className="h-10 bg-iron-gray rounded w-1/4" />
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-              {[1, 2, 3, 4].map(i => (
-                <div key={i} className="h-24 bg-iron-gray rounded-lg" />
-              ))}
-            </div>
-            <div className="h-64 bg-iron-gray rounded-lg" />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
-      <div className="max-w-7xl mx-auto space-y-8">
-        {/* Hero Header */}
-        <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-iron-gray via-iron-gray to-charcoal-outline border border-charcoal-outline p-8">
-          <div className="absolute top-0 right-0 w-64 h-64 bg-primary-blue/5 rounded-full blur-3xl" />
-          <div className="absolute bottom-0 left-0 w-48 h-48 bg-performance-green/5 rounded-full blur-3xl" />
-          
-          <div className="relative z-10">
-            <div className="flex items-center gap-3 mb-2">
-              <div className="p-2 bg-primary-blue/10 rounded-lg">
-                <Flag className="w-6 h-6 text-primary-blue" />
-              </div>
-              <Heading level={1} className="text-3xl font-bold text-white">
-                Race Calendar
-              </Heading>
-            </div>
-            <p className="text-gray-400 max-w-2xl">
-              Track upcoming races, view live events, and explore results across all your leagues.
-            </p>
-          </div>
-
-          {/* Quick Stats */}
-          <div className="relative z-10 grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
-            <div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
-              <div className="flex items-center gap-2 text-gray-400 text-sm mb-1">
-                <CalendarDays className="w-4 h-4" />
-                <span>Total</span>
-              </div>
-              <p className="text-2xl font-bold text-white">{stats.total}</p>
-            </div>
-            <div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
-              <div className="flex items-center gap-2 text-primary-blue text-sm mb-1">
-                <Clock className="w-4 h-4" />
-                <span>Scheduled</span>
-              </div>
-              <p className="text-2xl font-bold text-white">{stats.scheduled}</p>
-            </div>
-            <div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
-              <div className="flex items-center gap-2 text-performance-green text-sm mb-1">
-                <Zap className="w-4 h-4" />
-                <span>Live Now</span>
-              </div>
-              <p className="text-2xl font-bold text-white">{stats.running}</p>
-            </div>
-            <div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
-              <div className="flex items-center gap-2 text-gray-400 text-sm mb-1">
-                <Trophy className="w-4 h-4" />
-                <span>Completed</span>
-              </div>
-              <p className="text-2xl font-bold text-white">{stats.completed}</p>
-            </div>
-          </div>
-        </div>
-
-        {/* Live Races Banner */}
-        {liveRaces.length > 0 && (
-          <div className="relative overflow-hidden rounded-xl bg-gradient-to-r from-performance-green/20 via-performance-green/10 to-transparent border border-performance-green/30 p-6">
-            <div className="absolute top-0 right-0 w-32 h-32 bg-performance-green/20 rounded-full blur-2xl animate-pulse" />
-            
-            <div className="relative z-10">
-              <div className="flex items-center gap-2 mb-4">
-                <div className="flex items-center gap-2 px-3 py-1 bg-performance-green/20 rounded-full">
-                  <span className="w-2 h-2 bg-performance-green rounded-full animate-pulse" />
-                  <span className="text-performance-green font-semibold text-sm">LIVE NOW</span>
-                </div>
-              </div>
-              
-              <div className="space-y-3">
-                {liveRaces.map((race) => (
-                  <div
-                    key={race.id}
-                    onClick={() => router.push(`/races/${race.id}`)}
-                    className="flex items-center justify-between p-4 bg-deep-graphite/80 rounded-lg border border-performance-green/20 cursor-pointer hover:border-performance-green/40 transition-all"
-                  >
-                    <div className="flex items-center gap-4">
-                      <div className="p-2 bg-performance-green/20 rounded-lg">
-                        <PlayCircle className="w-5 h-5 text-performance-green" />
-                      </div>
-                      <div>
-                        <h3 className="font-semibold text-white">{race.track}</h3>
-                        <p className="text-sm text-gray-400">{race.leagueName}</p>
-                      </div>
-                    </div>
-                    <ChevronRight className="w-5 h-5 text-gray-400" />
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        )}
-
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* Main Content - Race List */}
-          <div className="lg:col-span-2 space-y-6">
-            {/* Filters */}
-            <Card className="!p-4">
-              <div className="flex flex-wrap gap-4">
-                {/* Time Filter Tabs */}
-                <div className="flex items-center gap-1 p-1 bg-deep-graphite rounded-lg">
-                  {(['upcoming', 'live', 'past', 'all'] as TimeFilter[]).map(filter => (
-                    <button
-                      key={filter}
-                      onClick={() => setTimeFilter(filter)}
-                      className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
-                        timeFilter === filter
-                          ? 'bg-primary-blue text-white'
-                          : 'text-gray-400 hover:text-white'
-                      }`}
-                    >
-                      {filter === 'live' && <span className="inline-block w-2 h-2 bg-performance-green rounded-full mr-2 animate-pulse" />}
-                      {filter.charAt(0).toUpperCase() + filter.slice(1)}
-                    </button>
-                  ))}
-                </div>
-
-                {/* League Filter */}
-                <select
-                  value={leagueFilter}
-                  onChange={(e) => setLeagueFilter(e.target.value)}
-                  className="px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue"
-                >
-                  <option value="all">All Leagues</option>
-                  {pageData && [...new Set(pageData.races.map(r => r.leagueId))].map(leagueId => {
-                    const item = pageData.races.find(r => r.leagueId === leagueId);
-                    return item ? (
-                      <option key={leagueId} value={leagueId}>
-                        {item.leagueName}
-                      </option>
-                    ) : null;
-                  })}
-                </select>
-              </div>
-            </Card>
-
-            {/* Race List by Date */}
-            {filteredRaces.length === 0 ? (
-              <Card className="text-center py-12">
-                <div className="flex flex-col items-center gap-4">
-                  <div className="p-4 bg-iron-gray rounded-full">
-                    <Calendar className="w-8 h-8 text-gray-500" />
-                  </div>
-                  <div>
-                    <p className="text-white font-medium mb-1">No races found</p>
-                    <p className="text-sm text-gray-500">
-                      {pageData?.totalCount === 0
-                        ? 'No races have been scheduled yet'
-                        : 'Try adjusting your filters'}
-                    </p>
-                  </div>
-                </div>
-              </Card>
-            ) : (
-             <div className="space-y-4">
-               {Array.from(racesByDate.entries()).map(([dateKey, dayRaces]) => (
-                 <div key={dateKey} className="space-y-3">
-                   {/* Date Header */}
-                   <div className="flex items-center gap-3 px-2">
-                     <div className="p-2 bg-primary-blue/10 rounded-lg">
-                       <Calendar className="w-4 h-4 text-primary-blue" />
-                     </div>
-                     <span className="text-sm font-semibold text-white">
-                       {formatFullDate(new Date(dateKey))}
-                     </span>
-                     <span className="text-xs text-gray-500">
-                       {dayRaces.length} race{dayRaces.length !== 1 ? 's' : ''}
-                     </span>
-                   </div>
-
-                   {/* Races for this date */}
-                   <div className="space-y-2">
-                     {dayRaces.map((race) => {
-                       const config = statusConfig[race.status as keyof typeof statusConfig];
-                       const StatusIcon = config.icon;
-
-                       return (
-                         <div
-                           key={race.id}
-                           onClick={() => router.push(`/races/${race.id}`)}
-                           className={`group relative overflow-hidden rounded-xl bg-iron-gray border ${config.border} p-4 cursor-pointer transition-all duration-200 hover:scale-[1.01] hover:border-primary-blue`}
-                         >
-                           {/* Live indicator */}
-                           {race.status === 'running' && (
-                             <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-performance-green via-performance-green/50 to-performance-green animate-pulse" />
-                           )}
-
-                           <div className="flex items-start gap-4">
-                             {/* Time Column */}
-                             <div className="flex-shrink-0 text-center min-w-[60px]">
-                               <p className="text-lg font-bold text-white">
-                                 {formatTime(race.scheduledAt)}
-                               </p>
-                               <p className={`text-xs ${config.color}`}>
-                                 {race.status === 'running'
-                                   ? 'LIVE'
-                                   : getRelativeTime(race.scheduledAt)}
-                               </p>
-                             </div>
-
-                             {/* Divider */}
-                             <div className={`w-px self-stretch ${config.bg}`} />
-
-                             {/* Main Content */}
-                             <div className="flex-1 min-w-0">
-                               <div className="flex items-start justify-between gap-4">
-                                 <div className="min-w-0">
-                                   <h3 className="font-semibold text-white truncate group-hover:text-primary-blue transition-colors">
-                                     {race.track}
-                                   </h3>
-                                   <div className="flex items-center gap-3 mt-1">
-                                     <span className="flex items-center gap-1 text-sm text-gray-400">
-                                       <Car className="w-3.5 h-3.5" />
-                                       {race.car}
-                                     </span>
-                                     {race.strengthOfField && (
-                                       <span className="flex items-center gap-1 text-sm text-gray-400">
-                                         <Zap className="w-3.5 h-3.5 text-warning-amber" />
-                                         SOF {race.strengthOfField}
-                                       </span>
-                                     )}
-                                   </div>
-                                 </div>
-
-                                 {/* Status Badge */}
-                                 <div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${config.bg} ${config.border} border`}>
-                                   <StatusIcon className={`w-3.5 h-3.5 ${config.color}`} />
-                                   <span className={`text-xs font-medium ${config.color}`}>
-                                     {config.label}
-                                   </span>
-                                 </div>
-                               </div>
-
-                               {/* League Link */}
-                               <div className="mt-3 pt-3 border-t border-charcoal-outline/50">
-                                 <Link
-                                   href={`/leagues/${race.leagueId ?? ''}`}
-                                   onClick={(e) => e.stopPropagation()}
-                                   className="inline-flex items-center gap-2 text-sm text-primary-blue hover:underline"
-                                 >
-                                   <Trophy className="w-3.5 h-3.5" />
-                                   {race.leagueName}
-                                   <ArrowRight className="w-3 h-3" />
-                                 </Link>
-                               </div>
-                             </div>
-
-                             {/* Arrow */}
-                             <ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-primary-blue transition-colors flex-shrink-0" />
-                           </div>
-                         </div>
-                       );
-                     })}
-                   </div>
-                 </div>
-               ))}
-             </div>
-           )}
-
-            {/* View All Link */}
-            {filteredRaces.length > 0 && (
-              <div className="text-center">
-                <Link
-                  href="/races/all"
-                  className="inline-flex items-center gap-2 px-6 py-3 bg-iron-gray border border-charcoal-outline rounded-lg text-white hover:border-primary-blue transition-colors"
-                >
-                  View All Races
-                  <ArrowRight className="w-4 h-4" />
-                </Link>
-              </div>
-            )}
-          </div>
-
-          {/* Sidebar */}
-          <div className="space-y-6">
-            {/* Upcoming This Week */}
-            <Card>
-              <div className="flex items-center justify-between mb-4">
-                <h3 className="font-semibold text-white flex items-center gap-2">
-                  <Clock className="w-4 h-4 text-primary-blue" />
-                  Next Up
-                </h3>
-                <span className="text-xs text-gray-500">This week</span>
-              </div>
-
-              {upcomingRaces.length === 0 ? (
-                <p className="text-sm text-gray-500 text-center py-4">
-                  No races scheduled this week
-                </p>
-              ) : (
-                <div className="space-y-3">
-                  {upcomingRaces.map((race) => {
-                    if (!race.scheduledAt) {
-                      return null;
-                    }
-                    const scheduledAtDate = new Date(race.scheduledAt);
-                    return (
-                      <div
-                        key={race.id}
-                        onClick={() => router.push(`/races/${race.id}`)}
-                        className="flex items-center gap-3 p-2 rounded-lg hover:bg-deep-graphite cursor-pointer transition-colors"
-                      >
-                        <div className="flex-shrink-0 w-10 h-10 bg-primary-blue/10 rounded-lg flex items-center justify-center">
-                          <span className="text-sm font-bold text-primary-blue">
-                            {scheduledAtDate.getDate()}
-                          </span>
-                        </div>
-                        <div className="min-w-0 flex-1">
-                          <p className="text-sm font-medium text-white truncate">{race.track}</p>
-                          <p className="text-xs text-gray-500">{formatTime(scheduledAtDate)}</p>
-                        </div>
-                        <ChevronRight className="w-4 h-4 text-gray-500" />
-                      </div>
-                    );
-                  })}
-                </div>
-              )}
-            </Card>
-
-            {/* Recent Results */}
-            <Card>
-              <div className="flex items-center justify-between mb-4">
-                <h3 className="font-semibold text-white flex items-center gap-2">
-                  <Trophy className="w-4 h-4 text-warning-amber" />
-                  Recent Results
-                </h3>
-              </div>
-
-              {recentResults.length === 0 ? (
-                <p className="text-sm text-gray-500 text-center py-4">
-                  No completed races yet
-                </p>
-              ) : (
-                <div className="space-y-3">
-                  {recentResults.map((race) => (
-                    <div
-                      key={race.id}
-                      onClick={() => router.push(`/races/${race.id}/results`)}
-                      className="flex items-center gap-3 p-2 rounded-lg hover:bg-deep-graphite cursor-pointer transition-colors"
-                    >
-                      <div className="flex-shrink-0 w-10 h-10 bg-gray-500/10 rounded-lg flex items-center justify-center">
-                        <CheckCircle2 className="w-5 h-5 text-gray-400" />
-                      </div>
-                      <div className="min-w-0 flex-1">
-                        <p className="text-sm font-medium text-white truncate">{race.track}</p>
-                        <p className="text-xs text-gray-500">{formatDate(new Date(race.scheduledAt))}</p>
-                      </div>
-                      <ChevronRight className="w-4 h-4 text-gray-500" />
-                    </div>
-                  ))}
-                </div>
-              )}
-            </Card>
-
-            {/* Quick Actions */}
-            <Card>
-              <h3 className="font-semibold text-white mb-4">Quick Actions</h3>
-              <div className="space-y-2">
-                <Link
-                  href="/leagues"
-                  className="flex items-center gap-3 p-3 rounded-lg bg-deep-graphite hover:bg-charcoal-outline/50 transition-colors"
-                >
-                  <div className="p-2 bg-primary-blue/10 rounded-lg">
-                    <Users className="w-4 h-4 text-primary-blue" />
-                  </div>
-                  <span className="text-sm text-white">Browse Leagues</span>
-                  <ChevronRight className="w-4 h-4 text-gray-500 ml-auto" />
-                </Link>
-                <Link
-                  href="/leaderboards"
-                  className="flex items-center gap-3 p-3 rounded-lg bg-deep-graphite hover:bg-charcoal-outline/50 transition-colors"
-                >
-                  <div className="p-2 bg-warning-amber/10 rounded-lg">
-                    <Trophy className="w-4 h-4 text-warning-amber" />
-                  </div>
-                  <span className="text-sm text-white">View Leaderboards</span>
-                  <ChevronRight className="w-4 h-4 text-gray-500 ml-auto" />
-                </Link>
-              </div>
-            </Card>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
+export default RacesInteractive;