wip

2025-12-08 23:52:36 +01:00
parent 2d0860d66c
commit 35f988f885
46 changed files with 4624 additions and 1041 deletions
--- a/apps/website/app/races/[id]/results/page.tsx
+++ b/apps/website/app/races/[id]/results/page.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { useRouter, useParams } from 'next/navigation';
 import Button from '@/components/ui/Button';
 import Card from '@/components/ui/Card';
+import Breadcrumbs from '@/components/layout/Breadcrumbs';
 import ResultsTable from '@/components/races/ResultsTable';
 import ImportResultsForm from '@/components/races/ImportResultsForm';
 import { Race } from '@gridpilot/racing/domain/entities/Race';
@@ -15,8 +16,10 @@ import {
  getLeagueRepository,
  getResultRepository,
  getStandingRepository,
-  getDriverRepository
+  getDriverRepository,
+  getGetRaceWithSOFQuery,
 } from '@/lib/di-container';
+import { ArrowLeft, Zap, Trophy, Users, Clock, Calendar } from 'lucide-react';

 export default function RaceResultsPage() {
  const router = useRouter();
@@ -27,6 +30,7 @@ export default function RaceResultsPage() {
  const [league, setLeague] = useState<League | null>(null);
  const [results, setResults] = useState<Result[]>([]);
  const [drivers, setDrivers] = useState<Driver[]>([]);
+  const [raceSOF, setRaceSOF] = useState<number | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [importing, setImporting] = useState(false);
@@ -38,6 +42,7 @@ export default function RaceResultsPage() {
      const leagueRepo = getLeagueRepository();
      const resultRepo = getResultRepository();
      const driverRepo = getDriverRepository();
+      const raceWithSOFQuery = getGetRaceWithSOFQuery();

      const raceData = await raceRepo.findById(raceId);
      
@@ -49,6 +54,12 @@ export default function RaceResultsPage() {

      setRace(raceData);

+      // Load race with SOF from application query
+      const raceWithSOF = await raceWithSOFQuery.execute({ raceId });
+      if (raceWithSOF) {
+        setRaceSOF(raceWithSOF.strengthOfField);
+      }
+
      // Load league data
      const leagueData = await leagueRepo.findById(raceData.leagueId);
      setLeague(leagueData);
@@ -166,45 +177,85 @@ export default function RaceResultsPage() {

  const hasResults = results.length > 0;

+  const breadcrumbItems = [
+    { label: 'Races', href: '/races' },
+    ...(league ? [{ label: league.name, href: `/leagues/${league.id}` }] : []),
+    ...(race ? [{ label: race.track, href: `/races/${raceId}` }] : []),
+    { label: 'Results' },
+  ];
+
  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(`/races/${raceId}`)}
-            className="text-gray-400 hover:text-primary-blue transition-colors text-sm flex items-center gap-2"
+    <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">
+        {/* 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"
          >
-            <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 Race Details
-          </button>
+            <ArrowLeft className="w-4 h-4" />
+            Back
+          </Button>
        </div>

-        {/* Page Header */}
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold text-white mb-2">Race Results</h1>
-          {race && (
-            <div>
-              <p className="text-gray-400">{race.track}</p>
-              {league && (
-                <p className="text-sm text-gray-500">{league.name}</p>
+        {/* Hero Header */}
+        <div className="relative overflow-hidden rounded-2xl bg-gray-500/10 border border-gray-500/30 p-6 sm:p-8">
+          <div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full blur-3xl" />
+          
+          <div className="relative z-10">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-performance-green/10 border border-performance-green/30">
+                <Trophy className="w-4 h-4 text-performance-green" />
+                <span className="text-sm font-semibold text-performance-green">Final Results</span>
+              </div>
+              {raceSOF && (
+                <span className="flex items-center gap-1.5 text-warning-amber text-sm">
+                  <Zap className="w-4 h-4" />
+                  SOF {raceSOF}
+                </span>
              )}
            </div>
-          )}
+            
+            <h1 className="text-2xl sm:text-3xl font-bold text-white mb-2">
+              {race?.track ?? 'Race'} Results
+            </h1>
+            
+            <div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-gray-400">
+              {race && (
+                <>
+                  <span className="flex items-center gap-2">
+                    <Calendar className="w-4 h-4" />
+                    {new Date(race.scheduledAt).toLocaleDateString('en-US', {
+                      weekday: 'short',
+                      month: 'short',
+                      day: 'numeric',
+                    })}
+                  </span>
+                  <span className="flex items-center gap-2">
+                    <Users className="w-4 h-4" />
+                    {results.length} drivers classified
+                  </span>
+                </>
+              )}
+              {league && (
+                <span className="text-primary-blue">{league.name}</span>
+              )}
+            </div>
+          </div>
        </div>

        {/* Success Message */}
        {importSuccess && (
-          <div className="mb-6 p-4 bg-performance-green/10 border border-performance-green/30 rounded text-performance-green">
+          <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>
        )}

        {/* Error Message */}
        {error && (
-          <div className="mb-6 p-4 bg-warning-amber/10 border border-warning-amber/30 rounded text-warning-amber">
+          <div className="p-4 bg-warning-amber/10 border border-warning-amber/30 rounded-lg text-warning-amber">
            <strong>Error:</strong> {error}
          </div>
        )}
@@ -212,15 +263,12 @@ export default function RaceResultsPage() {
        {/* Content */}
        <Card>
          {hasResults ? (
-            <>
-              <h2 className="text-xl font-semibold text-white mb-6">Results</h2>
-              <ResultsTable 
-                results={results}
-                drivers={drivers}
-                pointsSystem={getPointsSystem()}
-                fastestLapTime={getFastestLapTime()}
-              />
-            </>
+            <ResultsTable
+              results={results}
+              drivers={drivers}
+              pointsSystem={getPointsSystem()}
+              fastestLapTime={getFastestLapTime()}
+            />
          ) : (
            <>
              <h2 className="text-xl font-semibold text-white mb-6">Import Results</h2>