wip

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

@@ -6,6 +6,7 @@ import Button from '@/components/ui/Button';
 import Card from '@/components/ui/Card';
 import JoinLeagueButton from '@/components/leagues/JoinLeagueButton';
 import LeagueActivityFeed from '@/components/leagues/LeagueActivityFeed';
+import EndRaceModal from '@/components/leagues/EndRaceModal';
 import DriverIdentity from '@/components/drivers/DriverIdentity';
 import DriverSummaryPill from '@/components/profile/DriverSummaryPill';
 import SponsorInsightsCard, {
@@ -68,6 +69,7 @@ export default function LeagueDetailPage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [refreshKey, setRefreshKey] = useState(0);
+  const [endRaceModalRaceId, setEndRaceModalRaceId] = useState<string | null>(null);
 
   const currentDriverId = useEffectiveDriverId();
   const membership = getMembership(leagueId, currentDriverId);
@@ -347,22 +349,7 @@ export default function LeagueDetailPage() {
                     {membership?.role === 'admin' && (
                       <Button
                         variant="secondary"
-                        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 league data to reflect the completed race
-                            await loadLeagueData();
-                          } catch (err) {
-                            alert(err instanceof Error ? err.message : 'Failed to complete race');
-                          }
-                        }}
+                        onClick={() => setEndRaceModalRaceId(race.id)}
                         className="border-performance-green/50 text-performance-green hover:bg-performance-green/10"
                       >
                         End Race & Process Results
@@ -684,6 +671,28 @@ export default function LeagueDetailPage() {
           )}
         </div>
       </div>
+
+      {/* End Race Modal */}
+      {endRaceModalRaceId && (() => {
+        const race = runningRaces.find(r => r.id === endRaceModalRaceId);
+        return race ? (
+          <EndRaceModal
+            raceId={race.id}
+            raceName={race.track}
+            onConfirm={async () => {
+              try {
+                const completeRace = getCompleteRaceUseCase();
+                await completeRace.execute({ raceId: race.id });
+                await loadLeagueData();
+                setEndRaceModalRaceId(null);
+              } catch (err) {
+                alert(err instanceof Error ? err.message : 'Failed to complete race');
+              }
+            }}
+            onCancel={() => setEndRaceModalRaceId(null)}
+          />
+        ) : null;
+      })()}
     </>
   );
 }