wip

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

@@ -8,6 +8,7 @@ import Card from '@/components/ui/Card';
 import Heading from '@/components/ui/Heading';
 import Breadcrumbs from '@/components/layout/Breadcrumbs';
 import FileProtestModal from '@/components/races/FileProtestModal';
+import EndRaceModal from '@/components/leagues/EndRaceModal';
 import SponsorInsightsCard, { useSponsorMode, MetricBuilders, SlotTemplates } from '@/components/sponsors/SponsorInsightsCard';
 import { getGetRaceDetailUseCase, getRegisterForRaceUseCase, getWithdrawFromRaceUseCase, getCancelRaceUseCase, getCompleteRaceUseCase } from '@/lib/di-container';
 import { useEffectiveDriverId } from '@/lib/currentDriver';
@@ -50,6 +51,7 @@ export default function RaceDetailPage() {
   const [ratingChange, setRatingChange] = useState<number | null>(null);
   const [animatedRatingChange, setAnimatedRatingChange] = useState(0);
   const [showProtestModal, setShowProtestModal] = useState(false);
+  const [showEndRaceModal, setShowEndRaceModal] = useState(false);
   const [membership, setMembership] = useState<any>(null);
 
   const currentDriverId = useEffectiveDriverId();
@@ -928,22 +930,7 @@ export default function RaceDetailPage() {
                   <Button
                     variant="primary"
                     className="w-full flex items-center justify-center gap-2"
-                    onClick={async () => {
-                      const confirmed = window.confirm(
-                        'Are you sure you want to end this race and process results?\n\nThis will mark the race as completed and calculate final standings.'
-                      );
-
-                      if (!confirmed) return;
-
-                      try {
-                        const completeRace = getCompleteRaceUseCase();
-                        await completeRace.execute({ raceId: race.id });
-                        // Reload race data to reflect the completed race
-                        await loadRaceData();
-                      } catch (err) {
-                        alert(err instanceof Error ? err.message : 'Failed to complete race');
-                      }
-                    }}
+                    onClick={() => setShowEndRaceModal(true)}
                   >
                     <CheckCircle2 className="w-4 h-4" />
                     End Race & Process Results
@@ -989,6 +976,25 @@ export default function RaceDetailPage() {
         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 {
+              const completeRace = getCompleteRaceUseCase();
+              await completeRace.execute({ raceId: race.id });
+              await loadRaceData();
+              setShowEndRaceModal(false);
+            } catch (err) {
+              alert(err instanceof Error ? err.message : 'Failed to complete race');
+            }
+          }}
+          onCancel={() => setShowEndRaceModal(false)}
+        />
+      )}
     </div>
   );
 }