wip

apps/website/app/dashboard/page.tsx

@@ -6,6 +6,7 @@ import {
   getFeedRepository,
   getRaceRepository,
   getResultRepository,
+  getDriverRepository,
 } from '@/lib/di-container';
 
 export const dynamic = 'force-dynamic';
@@ -21,7 +22,8 @@ export default async function DashboardPage() {
   const feedRepository = getFeedRepository();
   const raceRepository = getRaceRepository();
   const resultRepository = getResultRepository();
-
+  const driverRepository = getDriverRepository();
+ 
   const [feedItems, upcomingRaces, allResults] = await Promise.all([
     feedRepository.getFeedForDriver(session.user.primaryDriverId ?? ''),
     raceRepository.findAll(),
@@ -35,21 +37,27 @@ export default async function DashboardPage() {
 
   const completedRaces = upcomingRaces.filter((race) => race.status === 'completed');
 
-  const latestResults = completedRaces.slice(0, 4).map((race) => {
-    const raceResults = allResults.filter((result) => result.raceId === race.id);
-    const winner = raceResults.sort((a, b) => a.position - b.position)[0];
-
-    return {
-      raceId: race.id,
-      leagueId: race.leagueId,
-      track: race.track,
-      car: race.car,
-      scheduledAt: race.scheduledAt,
-      winnerDriverId: winner?.driverId ?? '',
-      winnerName: 'Race Winner',
-      positionChange: winner ? winner.getPositionChange() : 0,
-    };
-  });
+  const latestResults = await Promise.all(
+    completedRaces.slice(0, 4).map(async (race) => {
+      const raceResults = allResults.filter((result) => result.raceId === race.id);
+      const winner = raceResults.slice().sort((a, b) => a.position - b.position)[0];
+      const winnerDriverId = winner?.driverId ?? '';
+      const winnerDriver = winnerDriverId
+        ? await driverRepository.findById(winnerDriverId)
+        : null;
+ 
+      return {
+        raceId: race.id,
+        leagueId: race.leagueId,
+        track: race.track,
+        car: race.car,
+        scheduledAt: race.scheduledAt,
+        winnerDriverId,
+        winnerName: winnerDriver?.name ?? 'Race Winner',
+        positionChange: winner ? winner.getPositionChange() : 0,
+      };
+    }),
+  );
 
   return (
     <main className="min-h-screen bg-deep-graphite">

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import Link from 'next/link';
 import { useRouter, useParams } from 'next/navigation';
 import { getDriverRepository } from '@/lib/di-container';
 import DriverProfile from '@/components/drivers/DriverProfile';
@@ -10,7 +11,11 @@ import Breadcrumbs from '@/components/layout/Breadcrumbs';
 import { EntityMappers } from '@gridpilot/racing/application/mappers/EntityMappers';
 import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
 
-export default function DriverDetailPage() {
+export default function DriverDetailPage({
+  searchParams,
+}: {
+  searchParams?: { [key: string]: string | string[] | undefined };
+}) {
   const router = useRouter();
   const params = useParams();
   const driverId = params.id as string;
@@ -19,6 +24,15 @@ export default function DriverDetailPage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
+  const from =
+    typeof searchParams?.from === 'string' ? searchParams.from : undefined;
+  const leagueId =
+    typeof searchParams?.leagueId === 'string'
+      ? searchParams.leagueId
+      : undefined;
+  const backLink =
+    from === 'league' && leagueId ? `/leagues/${leagueId}` : null;
+
   useEffect(() => {
     loadDriver();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -84,6 +98,17 @@ export default function DriverDetailPage() {
   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">
+        {backLink && (
+          <div className="mb-4">
+            <Link
+              href={backLink}
+              className="inline-flex items-center text-xs font-medium text-gray-300 hover:text-white"
+            >
+              ← Back to league
+            </Link>
+          </div>
+        )}
+
         {/* Breadcrumb */}
         <Breadcrumbs
           items={[

apps/website/app/drivers/page.tsx

@@ -2,15 +2,17 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
+import Image from 'next/image';
 import DriverCard from '@/components/drivers/DriverCard';
 import RankBadge from '@/components/drivers/RankBadge';
 import Input from '@/components/ui/Input';
 import Card from '@/components/ui/Card';
+import { getDriverAvatarUrl } from '@/lib/racingLegacyFacade';
 
 // Mock data (fictional demo drivers only)
 const MOCK_DRIVERS = [
   {
-    id: '1',
+    id: 'driver-1',
     name: 'Alex Vermeer',
     rating: 3245,
     skillLevel: 'pro' as const,
@@ -22,7 +24,7 @@ const MOCK_DRIVERS = [
     rank: 1,
   },
   {
-    id: '2',
+    id: 'driver-2',
     name: 'Liam Hartmann',
     rating: 3198,
     skillLevel: 'pro' as const,
@@ -34,7 +36,7 @@ const MOCK_DRIVERS = [
     rank: 2,
   },
   {
-    id: '3',
+    id: 'driver-3',
     name: 'Michael Schmidt',
     rating: 2912,
     skillLevel: 'advanced' as const,
@@ -46,7 +48,7 @@ const MOCK_DRIVERS = [
     rank: 3,
   },
   {
-    id: '4',
+    id: 'driver-4',
     name: 'Emma Thompson',
     rating: 2789,
     skillLevel: 'advanced' as const,
@@ -58,7 +60,7 @@ const MOCK_DRIVERS = [
     rank: 5,
   },
   {
-    id: '5',
+    id: 'driver-5',
     name: 'Sarah Chen',
     rating: 2456,
     skillLevel: 'advanced' as const,
@@ -70,7 +72,7 @@ const MOCK_DRIVERS = [
     rank: 8,
   },
   {
-    id: '6',
+    id: 'driver-6',
     name: 'Isabella Rossi',
     rating: 2145,
     skillLevel: 'intermediate' as const,
@@ -82,7 +84,7 @@ const MOCK_DRIVERS = [
     rank: 12,
   },
   {
-    id: '7',
+    id: 'driver-7',
     name: 'Carlos Rodriguez',
     rating: 1876,
     skillLevel: 'intermediate' as const,
@@ -94,7 +96,7 @@ const MOCK_DRIVERS = [
     rank: 18,
   },
   {
-    id: '8',
+    id: 'driver-8',
     name: 'Yuki Tanaka',
     rating: 1234,
     skillLevel: 'beginner' as const,
@@ -258,9 +260,15 @@ export default function DriversPage() {
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-4 flex-1">
                 <RankBadge rank={driver.rank} size="lg" />
-                
-                <div className="w-16 h-16 rounded-full bg-primary-blue/20 flex items-center justify-center text-2xl font-bold text-white">
-                  {driver.name.charAt(0)}
+
+                <div className="w-16 h-16 rounded-full bg-primary-blue/20 overflow-hidden flex items-center justify-center">
+                  <Image
+                    src={getDriverAvatarUrl(driver.id)}
+                    alt={driver.name}
+                    width={64}
+                    height={64}
+                    className="w-full h-full object-cover"
+                  />
                 </div>
 
                 <div className="flex-1">

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import Breadcrumbs from '@/components/layout/Breadcrumbs';
+import LeagueHeader from '@/components/leagues/LeagueHeader';
+import { getLeagueRepository, getDriverRepository } from '@/lib/di-container';
+
+export default async function LeagueLayout(props: {
+  children: React.ReactNode;
+  params: Promise<{ id: string }>;
+}) {
+  const { children, params } = props;
+  const resolvedParams = await params;
+  const leagueRepo = getLeagueRepository();
+  const driverRepo = getDriverRepository();
+  const league = await leagueRepo.findById(resolvedParams.id);
+
+  if (!league) {
+    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">League not found</div>
+        </div>
+      </div>
+    );
+  }
+
+  const owner = await driverRepo.findById(league.ownerId);
+  const ownerName = owner ? owner.name : `${league.ownerId.slice(0, 8)}...`;
+
+  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">
+        <Breadcrumbs
+          items={[
+            { label: 'Home', href: '/' },
+            { label: 'Leagues', href: '/leagues' },
+            { label: league.name },
+          ]}
+        />
+
+        <LeagueHeader
+          leagueId={league.id}
+          leagueName={league.name}
+          description={league.description}
+          ownerId={league.ownerId}
+          ownerName={ownerName}
+        />
+
+        <div>{children}</div>
+      </div>
+    </div>
+  );
+}

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

@@ -4,17 +4,13 @@ import { useState, useEffect } from 'react';
 import { useRouter, useParams } from 'next/navigation';
 import Button from '@/components/ui/Button';
 import Card from '@/components/ui/Card';
-import FeatureLimitationTooltip from '@/components/alpha/FeatureLimitationTooltip';
 import JoinLeagueButton from '@/components/leagues/JoinLeagueButton';
-import MembershipStatus from '@/components/leagues/MembershipStatus';
 import LeagueMembers from '@/components/leagues/LeagueMembers';
 import LeagueSchedule from '@/components/leagues/LeagueSchedule';
 import LeagueAdmin from '@/components/leagues/LeagueAdmin';
 import StandingsTable from '@/components/leagues/StandingsTable';
-import Breadcrumbs from '@/components/layout/Breadcrumbs';
 import { League } from '@gridpilot/racing/domain/entities/League';
 import { Standing } from '@gridpilot/racing/domain/entities/Standing';
-import { Race } from '@gridpilot/racing/domain/entities/Race';
 import { Driver } from '@gridpilot/racing/domain/entities/Driver';
 import { getLeagueRepository, getRaceRepository, getDriverRepository, getStandingRepository } from '@/lib/di-container';
 import { getMembership, isOwnerOrAdmin, getCurrentDriverId } from '@/lib/racingLegacyFacade';
@@ -80,31 +76,23 @@ export default function LeagueDetailPage() {
 
   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 league...</div>
-        </div>
-      </div>
+      <div className="text-center text-gray-400">Loading league...</div>
     );
   }
 
   if (error || !league) {
     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 || 'League not found'}
-            </div>
-            <Button
-              variant="secondary"
-              onClick={() => router.push('/leagues')}
-            >
-              Back to Leagues
-            </Button>
-          </Card>
+      <Card className="text-center py-12">
+        <div className="text-warning-amber mb-4">
+          {error || 'League not found'}
         </div>
-      </div>
+        <Button
+          variant="secondary"
+          onClick={() => router.push('/leagues')}
+        >
+          Back to Leagues
+        </Button>
+      </Card>
     );
   }
 
@@ -114,221 +102,194 @@ export default function LeagueDetailPage() {
   };
 
   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">
-        {/* Breadcrumb */}
-        <Breadcrumbs
-          items={[
-            { label: 'Home', href: '/' },
-            { label: 'Leagues', href: '/leagues' },
-            { label: league.name }
-          ]}
-        />
-
-        {/* League Header */}
-        <div className="mb-8">
-          <div className="flex items-center justify-between mb-4">
-            <div className="flex items-center gap-3">
-              <h1 className="text-3xl font-bold text-white">{league.name}</h1>
-              <MembershipStatus leagueId={leagueId} />
+    <>
+      {/* Action Card */}
+      {!membership && (
+        <Card className="mb-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="text-lg font-semibold text-white mb-2">Join This League</h3>
+              <p className="text-gray-400 text-sm">Become a member to participate in races and track your progress</p>
+            </div>
+            <div className="w-48">
+              <JoinLeagueButton
+                leagueId={leagueId}
+                onMembershipChange={handleMembershipChange}
+              />
             </div>
-            <FeatureLimitationTooltip message="Multi-league memberships coming in production">
-              <span className="px-2 py-1 text-xs font-medium bg-primary-blue/10 text-primary-blue rounded border border-primary-blue/30">
-                Alpha: Single League
-              </span>
-            </FeatureLimitationTooltip>
           </div>
-          <p className="text-gray-400">{league.description}</p>
-        </div>
+        </Card>
+      )}
 
-        {/* Action Card */}
-        {!membership && (
-          <Card className="mb-6">
-            <div className="flex items-center justify-between">
+      {/* Overview section switcher (in-page, not primary tabs) */}
+      <div className="mb-6">
+        <div className="inline-flex flex-wrap gap-2 rounded-full bg-iron-gray/60 px-2 py-1">
+          <button
+            onClick={() => setActiveTab('overview')}
+            className={`px-3 py-1 text-xs font-medium rounded-full transition-colors ${
+              activeTab === 'overview'
+                ? 'bg-primary-blue text-white'
+                : 'text-gray-300 hover:text-white hover:bg-charcoal-outline/80'
+            }`}
+          >
+            Overview
+          </button>
+          <button
+            onClick={() => setActiveTab('schedule')}
+            className={`px-3 py-1 text-xs font-medium rounded-full transition-colors ${
+              activeTab === 'schedule'
+                ? 'bg-primary-blue text-white'
+                : 'text-gray-300 hover:text-white hover:bg-charcoal-outline/80'
+            }`}
+          >
+            Schedule
+          </button>
+          <button
+            onClick={() => setActiveTab('standings')}
+            className={`px-3 py-1 text-xs font-medium rounded-full transition-colors ${
+              activeTab === 'standings'
+                ? 'bg-primary-blue text-white'
+                : 'text-gray-300 hover:text-white hover:bg-charcoal-outline/80'
+            }`}
+          >
+            Standings
+          </button>
+          <button
+            onClick={() => setActiveTab('members')}
+            className={`px-3 py-1 text-xs font-medium rounded-full transition-colors ${
+              activeTab === 'members'
+                ? 'bg-primary-blue text-white'
+                : 'text-gray-300 hover:text-white hover:bg-charcoal-outline/80'
+            }`}
+          >
+            Members
+          </button>
+          {isAdmin && (
+            <button
+              onClick={() => setActiveTab('admin')}
+              className={`px-3 py-1 text-xs font-medium rounded-full transition-colors ${
+                activeTab === 'admin'
+                  ? 'bg-primary-blue text-white'
+                  : 'text-gray-300 hover:text-white hover:bg-charcoal-outline/80'
+              }`}
+            >
+              Admin
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Tab Content */}
+      {activeTab === 'overview' && (
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* League Info */}
+          <Card className="lg:col-span-2">
+            <h2 className="text-xl font-semibold text-white mb-4">League Information</h2>
+            
+            <div className="space-y-4">
               <div>
-                <h3 className="text-lg font-semibold text-white mb-2">Join This League</h3>
-                <p className="text-gray-400 text-sm">Become a member to participate in races and track your progress</p>
+                <label className="text-sm text-gray-500">Owner</label>
+                <p className="text-white">{owner ? owner.name : `ID: ${league.ownerId.slice(0, 8)}...`}</p>
               </div>
-              <div className="w-48">
-                <JoinLeagueButton
-                  leagueId={leagueId}
-                  onMembershipChange={handleMembershipChange}
-                />
+
+              <div>
+                <label className="text-sm text-gray-500">Created</label>
+                <p className="text-white">
+                  {new Date(league.createdAt).toLocaleDateString('en-US', {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric'
+                  })}
+                </p>
               </div>
-            </div>
-          </Card>
-        )}
 
-        {/* Tabs Navigation */}
-        <div className="mb-6 border-b border-charcoal-outline">
-          <div className="flex gap-4 overflow-x-auto">
-            <button
-              onClick={() => setActiveTab('overview')}
-              className={`pb-3 px-1 font-medium whitespace-nowrap transition-colors ${
-                activeTab === 'overview'
-                  ? 'text-primary-blue border-b-2 border-primary-blue'
-                  : 'text-gray-400 hover:text-white'
-              }`}
-            >
-              Overview
-            </button>
-            <button
-              onClick={() => setActiveTab('schedule')}
-              className={`pb-3 px-1 font-medium whitespace-nowrap transition-colors ${
-                activeTab === 'schedule'
-                  ? 'text-primary-blue border-b-2 border-primary-blue'
-                  : 'text-gray-400 hover:text-white'
-              }`}
-            >
-              Schedule
-            </button>
-            <button
-              onClick={() => setActiveTab('standings')}
-              className={`pb-3 px-1 font-medium whitespace-nowrap transition-colors ${
-                activeTab === 'standings'
-                  ? 'text-primary-blue border-b-2 border-primary-blue'
-                  : 'text-gray-400 hover:text-white'
-              }`}
-            >
-              Standings
-            </button>
-            <button
-              onClick={() => setActiveTab('members')}
-              className={`pb-3 px-1 font-medium whitespace-nowrap transition-colors ${
-                activeTab === 'members'
-                  ? 'text-primary-blue border-b-2 border-primary-blue'
-                  : 'text-gray-400 hover:text-white'
-              }`}
-            >
-              Members
-            </button>
-            {isAdmin && (
-              <button
-                onClick={() => setActiveTab('admin')}
-                className={`pb-3 px-1 font-medium whitespace-nowrap transition-colors ${
-                  activeTab === 'admin'
-                    ? 'text-primary-blue border-b-2 border-primary-blue'
-                    : 'text-gray-400 hover:text-white'
-                }`}
-              >
-                Admin
-              </button>
-            )}
-          </div>
-        </div>
+              <div className="pt-4 border-t border-charcoal-outline">
+                <h3 className="text-white font-medium mb-3">League Settings</h3>
+                
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="text-sm text-gray-500">Points System</label>
+                    <p className="text-white">{league.settings.pointsSystem.toUpperCase()}</p>
+                  </div>
 
-        {/* Tab Content */}
-        {activeTab === 'overview' && (
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            {/* League Info */}
-            <Card className="lg:col-span-2">
-              <h2 className="text-xl font-semibold text-white mb-4">League Information</h2>
-              
-              <div className="space-y-4">
-                <div>
-                  <label className="text-sm text-gray-500">Owner</label>
-                  <p className="text-white">{owner ? owner.name : `ID: ${league.ownerId.slice(0, 8)}...`}</p>
-                </div>
+                  <div>
+                    <label className="text-sm text-gray-500">Session Duration</label>
+                    <p className="text-white">{league.settings.sessionDuration} minutes</p>
+                  </div>
 
-                <div>
-                  <label className="text-sm text-gray-500">Created</label>
-                  <p className="text-white">
-                    {new Date(league.createdAt).toLocaleDateString('en-US', {
-                      year: 'numeric',
-                      month: 'long',
-                      day: 'numeric'
-                    })}
-                  </p>
-                </div>
-
-                <div className="pt-4 border-t border-charcoal-outline">
-                  <h3 className="text-white font-medium mb-3">League Settings</h3>
-                  
-                  <div className="grid grid-cols-2 gap-4">
-                    <div>
-                      <label className="text-sm text-gray-500">Points System</label>
-                      <p className="text-white">{league.settings.pointsSystem.toUpperCase()}</p>
-                    </div>
-
-                    <div>
-                      <label className="text-sm text-gray-500">Session Duration</label>
-                      <p className="text-white">{league.settings.sessionDuration} minutes</p>
-                    </div>
-
-                    <div>
-                      <label className="text-sm text-gray-500">Qualifying Format</label>
-                      <p className="text-white capitalize">{league.settings.qualifyingFormat}</p>
-                    </div>
+                  <div>
+                    <label className="text-sm text-gray-500">Qualifying Format</label>
+                    <p className="text-white capitalize">{league.settings.qualifyingFormat}</p>
                   </div>
                 </div>
               </div>
-            </Card>
+            </div>
+          </Card>
 
-            {/* Quick Actions */}
-            <Card>
-              <h2 className="text-xl font-semibold text-white mb-4">Quick Actions</h2>
-              
-              <div className="space-y-3">
-                {membership ? (
-                  <>
-                    <Button
-                      variant="primary"
-                      className="w-full"
-                      onClick={() => setActiveTab('schedule')}
-                    >
-                      View Schedule
-                    </Button>
-                    <Button
-                      variant="secondary"
-                      className="w-full"
-                      onClick={() => setActiveTab('standings')}
-                    >
-                      View Standings
-                    </Button>
-                    <JoinLeagueButton
-                      leagueId={leagueId}
-                      onMembershipChange={handleMembershipChange}
-                    />
-                  </>
-                ) : (
+          {/* Quick Actions */}
+          <Card>
+            <h2 className="text-xl font-semibold text-white mb-4">Quick Actions</h2>
+            
+            <div className="space-y-3">
+              {membership ? (
+                <>
+                  <Button
+                    variant="primary"
+                    className="w-full"
+                    onClick={() => setActiveTab('schedule')}
+                  >
+                    View Schedule
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    className="w-full"
+                    onClick={() => setActiveTab('standings')}
+                  >
+                    View Standings
+                  </Button>
                   <JoinLeagueButton
                     leagueId={leagueId}
                     onMembershipChange={handleMembershipChange}
                   />
-                )}
-              </div>
-            </Card>
-          </div>
-        )}
-
-        {activeTab === 'schedule' && (
-          <Card>
-            <LeagueSchedule leagueId={leagueId} key={refreshKey} />
+                </>
+              ) : (
+                <JoinLeagueButton
+                  leagueId={leagueId}
+                  onMembershipChange={handleMembershipChange}
+                />
+              )}
+            </div>
           </Card>
-        )}
+        </div>
+      )}
 
-        {activeTab === 'standings' && (
-          <Card>
-            <h2 className="text-xl font-semibold text-white mb-4">Standings</h2>
-            <StandingsTable standings={standings} drivers={drivers} />
-          </Card>
-        )}
+      {activeTab === 'schedule' && (
+        <Card>
+          <LeagueSchedule leagueId={leagueId} key={refreshKey} />
+        </Card>
+      )}
 
-        {activeTab === 'members' && (
-          <Card>
-            <h2 className="text-xl font-semibold text-white mb-4">League Members</h2>
-            <LeagueMembers leagueId={leagueId} key={refreshKey} />
-          </Card>
-        )}
+      {activeTab === 'standings' && (
+        <Card>
+          <h2 className="text-xl font-semibold text-white mb-4">Standings</h2>
+          <StandingsTable standings={standings} drivers={drivers} leagueId={leagueId} />
+        </Card>
+      )}
 
-        {activeTab === 'admin' && isAdmin && (
-          <LeagueAdmin
-            league={league}
-            onLeagueUpdate={handleMembershipChange}
-            key={refreshKey}
-          />
-        )}
-      </div>
-    </div>
+      {activeTab === 'members' && (
+        <Card>
+          <h2 className="text-xl font-semibold text-white mb-4">League Members</h2>
+          <LeagueMembers leagueId={leagueId} key={refreshKey} />
+        </Card>
+      )}
+
+      {activeTab === 'admin' && isAdmin && (
+        <LeagueAdmin
+          league={league}
+          onLeagueUpdate={handleMembershipChange}
+          key={refreshKey}
+        />
+      )}
+    </>
   );
 }

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

@@ -0,0 +1,402 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import Button from '@/components/ui/Button';
+import Card from '@/components/ui/Card';
+import FeatureLimitationTooltip from '@/components/alpha/FeatureLimitationTooltip';
+import type { Race } from '@gridpilot/racing/domain/entities/Race';
+import type { League } from '@gridpilot/racing/domain/entities/League';
+import type { Driver } from '@gridpilot/racing/domain/entities/Driver';
+import { getRaceRepository, getLeagueRepository, getDriverRepository } from '@/lib/di-container';
+import {
+  getMembership,
+  getCurrentDriverId,
+  isRegistered,
+  registerForRace,
+  withdrawFromRace,
+  getRegisteredDrivers,
+} from '@/lib/racingLegacyFacade';
+import CompanionStatus from '@/components/alpha/CompanionStatus';
+import CompanionInstructions from '@/components/alpha/CompanionInstructions';
+
+export default function LeagueRaceDetailPage() {
+  const router = useRouter();
+  const params = useParams();
+  const leagueId = params.id as string;
+  const raceId = params.raceId as string;
+
+  const [race, setRace] = useState<Race | null>(null);
+  const [league, setLeague] = useState<League | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [cancelling, setCancelling] = useState(false);
+  const [registering, setRegistering] = useState(false);
+  const [entryList, setEntryList] = useState<Driver[]>([]);
+  const [isUserRegistered, setIsUserRegistered] = useState(false);
+  const [canRegister, setCanRegister] = useState(false);
+
+  const currentDriverId = getCurrentDriverId();
+
+  const loadRaceData = async () => {
+    try {
+      const raceRepo = getRaceRepository();
+      const leagueRepo = getLeagueRepository();
+
+      const raceData = await raceRepo.findById(raceId);
+
+      if (!raceData) {
+        setError('Race not found');
+        setLoading(false);
+        return;
+      }
+
+      setRace(raceData);
+
+      const leagueData = await leagueRepo.findById(raceData.leagueId);
+      setLeague(leagueData);
+
+      await loadEntryList(raceData.id, raceData.leagueId);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load race');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const loadEntryList = async (raceIdValue: string, leagueIdValue: string) => {
+    try {
+      const driverRepo = getDriverRepository();
+      const registeredDriverIds = getRegisteredDrivers(raceIdValue);
+      const drivers = await Promise.all(
+        registeredDriverIds.map((id: string) => driverRepo.findById(id))
+      );
+      setEntryList(
+        drivers.filter((d: Driver | null): d is Driver => d !== null)
+      );
+
+      const userIsRegistered = isRegistered(raceIdValue, currentDriverId);
+      setIsUserRegistered(userIsRegistered);
+
+      const membership = getMembership(leagueIdValue, currentDriverId);
+      const isUpcoming = race?.status === 'scheduled';
+      setCanRegister(!!membership && membership.status === 'active' && !!isUpcoming);
+    } catch (err) {
+      console.error('Failed to load entry list:', err);
+    }
+  };
+
+  useEffect(() => {
+    loadRaceData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [raceId]);
+
+  const handleCancelRace = async () => {
+    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;
+
+    setCancelling(true);
+    try {
+      const raceRepo = getRaceRepository();
+      const cancelledRace = race.cancel();
+      await raceRepo.update(cancelledRace);
+      setRace(cancelledRace);
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to cancel race');
+    } finally {
+      setCancelling(false);
+    }
+  };
+
+  const handleRegister = async () => {
+    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;
+
+    setRegistering(true);
+    try {
+      registerForRace(race.id, currentDriverId, league.id);
+      await loadEntryList(race.id, league.id);
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to register for race');
+    } finally {
+      setRegistering(false);
+    }
+  };
+
+  const handleWithdraw = async () => {
+    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;
+
+    setRegistering(true);
+    try {
+      withdrawFromRace(race.id, currentDriverId);
+      await loadEntryList(race.id, league.id);
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to withdraw from race');
+    } finally {
+      setRegistering(false);
+    }
+  };
+
+  const formatDate = (date: Date) => {
+    return new Date(date).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  };
+
+  const formatTime = (date: Date) => {
+    return new Date(date).toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      timeZoneName: 'short',
+    });
+  };
+
+  const formatDateTime = (date: Date) => {
+    return new Date(date).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      timeZoneName: 'short',
+    });
+  };
+
+  const statusColors = {
+    scheduled: 'bg-primary-blue/20 text-primary-blue border-primary-blue/30',
+    completed: 'bg-green-500/20 text-green-400 border-green-500/30',
+    cancelled: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
+  } as const;
+
+  if (loading) {
+    return (
+      <div className="text-center text-gray-400">Loading race details...</div>
+    );
+  }
+
+  if (error || !race) {
+    return (
+      <Card className="text-center py-12">
+        <div className="text-warning-amber mb-4">
+          {error || 'Race not found'}
+        </div>
+        <Button
+          variant="secondary"
+          onClick={() => router.push(`/leagues/${leagueId}`)}
+        >
+          Back to League
+        </Button>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <div className="mb-6">
+        <button
+          onClick={() => router.push(`/leagues/${leagueId}`)}
+          className="text-gray-400 hover:text-primary-blue transition-colors text-sm flex items-center gap-2"
+        >
+          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          Back to League
+        </button>
+      </div>
+
+      <FeatureLimitationTooltip message="Companion automation available in production">
+        <div className="mb-6">
+          <CompanionStatus />
+        </div>
+      </FeatureLimitationTooltip>
+
+      <div className="mb-8">
+        <div className="flex items-start justify-between mb-4">
+          <div>
+            <h1 className="text-3xl font-bold text-white mb-2">{race.track}</h1>
+            {league && (
+              <p className="text-gray-400">{league.name}</p>
+            )}
+          </div>
+          <span
+            className={`px-3 py-1 text-sm font-medium rounded border ${
+              statusColors[race.status as keyof typeof statusColors]
+            }`}
+          >
+            {race.status.charAt(0).toUpperCase() + race.status.slice(1)}
+          </span>
+        </div>
+      </div>
+
+      {race.status === 'scheduled' && (
+        <div className="mb-6">
+          <CompanionInstructions race={race} leagueName={league?.name} />
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <Card className="lg:col-span-2">
+          <h2 className="text-xl font-semibold text-white mb-6">Race Details</h2>
+
+          <div className="space-y-6">
+            <div>
+              <label className="text-sm text-gray-500 block mb-1">Scheduled Date & Time</label>
+              <p className="text-white text-lg font-medium">
+                {formatDateTime(race.scheduledAt)}
+              </p>
+              <div className="flex gap-4 mt-2 text-sm">
+                <span className="text-gray-400">{formatDate(race.scheduledAt)}</span>
+                <span className="text-gray-400">{formatTime(race.scheduledAt)}</span>
+              </div>
+            </div>
+
+            <div className="pt-4 border-t border-charcoal-outline">
+              <label className="text-sm text-gray-500 block mb-1">Track</label>
+              <p className="text-white">{race.track}</p>
+            </div>
+
+            <div>
+              <label className="text-sm text-gray-500 block mb-1">Car</label>
+              <p className="text-white">{race.car}</p>
+            </div>
+
+            <div>
+              <label className="text-sm text-gray-500 block mb-1">Session Type</label>
+              <p className="text-white capitalize">{race.sessionType}</p>
+            </div>
+          </div>
+        </Card>
+
+        <Card>
+          <h2 className="text-xl font-semibold text-white mb-4">Actions</h2>
+
+          <div className="space-y-3">
+            {race.status === 'scheduled' && canRegister && !isUserRegistered && (
+              <Button
+                variant="primary"
+                className="w-full"
+                onClick={handleRegister}
+                disabled={registering}
+              >
+                {registering ? 'Registering...' : 'Register for Race'}
+              </Button>
+            )}
+
+            {race.status === 'scheduled' && isUserRegistered && (
+              <div className="space-y-2">
+                <div className="px-3 py-2 bg-green-500/10 border border-green-500/30 rounded text-green-400 text-sm text-center">
+                  ✓ Registered
+                </div>
+                <Button
+                  variant="secondary"
+                  className="w-full"
+                  onClick={handleWithdraw}
+                  disabled={registering}
+                >
+                  {registering ? 'Withdrawing...' : 'Withdraw'}
+                </Button>
+              </div>
+            )}
+
+            {race.status === 'completed' && (
+              <Button
+                variant="primary"
+                className="w-full"
+                onClick={() => router.push(`/races/${race.id}/results`)}
+              >
+                View Results
+              </Button>
+            )}
+
+            {race.status === 'scheduled' && (
+              <Button
+                variant="secondary"
+                className="w-full"
+                onClick={handleCancelRace}
+                disabled={cancelling}
+              >
+                {cancelling ? 'Cancelling...' : 'Cancel Race'}
+              </Button>
+            )}
+
+            <Button
+              variant="secondary"
+              className="w-full"
+              onClick={() => router.push(`/leagues/${leagueId}`)}
+            >
+              Back to League
+            </Button>
+          </div>
+        </Card>
+      </div>
+
+      {race.status === 'scheduled' && (
+        <Card className="mt-6">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-xl font-semibold text-white">Entry List</h2>
+            <span className="text-sm text-gray-400">
+              {entryList.length} {entryList.length === 1 ? 'driver' : 'drivers'} registered
+            </span>
+          </div>
+
+          {entryList.length === 0 ? (
+            <div className="text-center py-8 text-gray-400">
+              <p className="mb-2">No drivers registered yet</p>
+              <p className="text-sm text-gray-500">Be the first to register!</p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {entryList.map((driver, index) => (
+                <div
+                  key={driver.id}
+                  className="flex items-center gap-4 p-3 bg-iron-gray/50 rounded-lg border border-charcoal-outline hover:border-primary-blue/50 transition-colors cursor-pointer"
+                  onClick={() =>
+                    router.push(
+                      `/drivers/${driver.id}?from=league&leagueId=${leagueId}`,
+                    )
+                  }
+                >
+                  <div className="w-8 text-center text-gray-400 font-mono text-sm">
+                    #{index + 1}
+                  </div>
+                  <div className="w-10 h-10 bg-charcoal-outline rounded-full flex items-center justify-center flex-shrink-0">
+                    <span className="text-lg font-bold text-gray-500">
+                      {driver.name.charAt(0)}
+                    </span>
+                  </div>
+                  <div className="flex-1">
+                    <p className="text-white font-medium">{driver.name}</p>
+                    <p className="text-sm text-gray-400">{driver.country}</p>
+                  </div>
+                  {driver.id === currentDriverId && (
+                    <span className="px-2 py-1 text-xs font-medium bg-primary-blue/20 text-primary-blue rounded">
+                      You
+                    </span>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </Card>
+      )}
+    </div>
+  );
+}

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

@@ -1,25 +1,15 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { useRouter, useParams } from 'next/navigation';
-import Button from '@/components/ui/Button';
 import Card from '@/components/ui/Card';
 import StandingsTable from '@/components/leagues/StandingsTable';
-import { League } from '@gridpilot/racing/domain/entities/League';
-import { Standing } from '@gridpilot/racing/domain/entities/Standing';
-import { Driver } from '@gridpilot/racing/domain/entities/Driver';
-import {
-  getLeagueRepository,
-  getStandingRepository,
-  getDriverRepository
-} from '@/lib/di-container';
+import type { Standing } from '@gridpilot/racing/domain/entities/Standing';
+import type { Driver } from '@gridpilot/racing/domain/entities/Driver';
+import { getStandingRepository, getDriverRepository } from '@/lib/di-container';
 
-export default function LeagueStandingsPage() {
-  const router = useRouter();
-  const params = useParams();
-  const leagueId = params.id as string;
+export default function LeagueStandingsPage({ params }: { params: { id: string } }) {
+  const leagueId = params.id;
 
-  const [league, setLeague] = useState<League | null>(null);
   const [standings, setStandings] = useState<Standing[]>([]);
   const [drivers, setDrivers] = useState<Driver[]>([]);
   const [loading, setLoading] = useState(true);
@@ -27,27 +17,15 @@ export default function LeagueStandingsPage() {
 
   const loadData = async () => {
     try {
-      const leagueRepo = getLeagueRepository();
       const standingRepo = getStandingRepository();
       const driverRepo = getDriverRepository();
 
-      const leagueData = await leagueRepo.findById(leagueId);
-      
-      if (!leagueData) {
-        setError('League not found');
-        setLoading(false);
-        return;
-      }
+      const allStandings = await standingRepo.findAll();
+      const leagueStandings = allStandings.filter((s) => s.leagueId === leagueId);
+      setStandings(leagueStandings);
 
-      setLeague(leagueData);
-
-      // Load standings
-      const standingsData = await standingRepo.findByLeagueId(leagueId);
-      setStandings(standingsData);
-
-      // Load drivers
-      const driversData = await driverRepo.findAll();
-      setDrivers(driversData);
+      const allDrivers = await driverRepo.findAll();
+      setDrivers(allDrivers);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to load standings');
     } finally {
@@ -62,73 +40,24 @@ export default function LeagueStandingsPage() {
 
   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 standings...</div>
-        </div>
+      <div className="text-center text-gray-400">
+        Loading standings...
       </div>
     );
   }
 
-  if (error || !league) {
+  if (error) {
     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 || 'League not found'}
-            </div>
-            <Button
-              variant="secondary"
-              onClick={() => router.push('/leagues')}
-            >
-              Back to Leagues
-            </Button>
-          </Card>
-        </div>
+      <div className="text-center text-warning-amber">
+        {error}
       </div>
     );
   }
 
   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">
-        {/* Breadcrumb */}
-        <div className="mb-6">
-          <button
-            onClick={() => router.push(`/leagues/${leagueId}`)}
-            className="text-gray-400 hover:text-primary-blue transition-colors text-sm flex items-center gap-2"
-          >
-            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-            </svg>
-            Back to League Details
-          </button>
-        </div>
-
-        {/* Page Header */}
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold text-white mb-2">Championship Standings</h1>
-          <p className="text-gray-400">{league.name}</p>
-        </div>
-
-        {/* Standings Content */}
-        <Card>
-          {standings.length > 0 ? (
-            <>
-              <h2 className="text-xl font-semibold text-white mb-6">Current Standings</h2>
-              <StandingsTable standings={standings} drivers={drivers} />
-            </>
-          ) : (
-            <div className="text-center py-12">
-              <div className="text-gray-400 mb-2">No standings available yet</div>
-              <p className="text-sm text-gray-500">
-                Standings will appear after race results are imported
-              </p>
-            </div>
-          )}
-        </Card>
-      </div>
-    </div>
+    <Card>
+      <h2 className="text-xl font-semibold text-white mb-4">Standings</h2>
+      <StandingsTable standings={standings} drivers={drivers} leagueId={leagueId} />
+    </Card>
   );
 }