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>
   );
 }

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

@@ -8,11 +8,15 @@ 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 QuickPenaltyModal from '@/components/leagues/QuickPenaltyModal';
 import {
   getGetRaceWithSOFUseCase,
   getGetRaceResultsDetailUseCase,
   getImportRaceResultsUseCase,
+  getLeagueMembershipRepository,
 } from '@/lib/di-container';
+import { useEffectiveDriverId } from '@/lib/currentDriver';
+import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
 import { RaceWithSOFPresenter } from '@/lib/presenters/RaceWithSOFPresenter';
 import { RaceResultsDetailPresenter } from '@/lib/presenters/RaceResultsDetailPresenter';
 import type {
@@ -65,12 +69,12 @@ export default function RaceResultsPage() {
   const router = useRouter();
   const params = useParams();
   const raceId = params.id as string;
+  const currentDriverId = useEffectiveDriverId();
 
   const [race, setRace] = useState<RaceResultsHeaderViewModel | null>(null);
   const [league, setLeague] = useState<RaceResultsLeagueViewModel | null>(null);
   const [results, setResults] = useState<RaceResultRowDTO[]>([]);
   const [drivers, setDrivers] = useState<DriverRowDTO[]>([]);
-  const [currentDriverId, setCurrentDriverId] = useState<string | undefined>(undefined);
   const [raceSOF, setRaceSOF] = useState<number | null>(null);
   const [penalties, setPenalties] = useState<PenaltyData[]>([]);
   const [pointsSystem, setPointsSystem] = useState<Record<number, number> | undefined>(undefined);
@@ -79,6 +83,9 @@ export default function RaceResultsPage() {
   const [error, setError] = useState<string | null>(null);
   const [importing, setImporting] = useState(false);
   const [importSuccess, setImportSuccess] = useState(false);
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [showQuickPenaltyModal, setShowQuickPenaltyModal] = useState(false);
+  const [preSelectedDriver, setPreSelectedDriver] = useState<DriverRowDTO | undefined>(undefined);
 
   const loadData = async () => {
     try {
@@ -103,7 +110,6 @@ export default function RaceResultsPage() {
         setPenalties([]);
         setPointsSystem({});
         setFastestLapTime(undefined);
-        setCurrentDriverId(undefined);
       } else {
         setError(null);
         setRace(viewModel.race);
@@ -117,7 +123,6 @@ export default function RaceResultsPage() {
         );
         setPointsSystem(viewModel.pointsSystem);
         setFastestLapTime(viewModel.fastestLapTime);
-        setCurrentDriverId(viewModel.currentDriverId);
         const mappedPenalties: PenaltyData[] = viewModel.penalties.map((p) => {
           const base: PenaltyData = {
             driverId: p.driverId,
@@ -154,6 +159,17 @@ export default function RaceResultsPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [raceId]);
 
+  useEffect(() => {
+    if (league?.id && currentDriverId) {
+      const checkAdmin = async () => {
+        const membershipRepo = getLeagueMembershipRepository();
+        const membership = await membershipRepo.getMembership(league.id, currentDriverId);
+        setIsAdmin(membership ? isLeagueAdminOrHigherRole(membership.role) : false);
+      };
+      checkAdmin();
+    }
+  }, [league?.id, currentDriverId]);
+
   const handleImportSuccess = async (importedResults: ImportResultRowDTO[]) => {
     setImporting(true);
     setError(null);
@@ -178,6 +194,16 @@ export default function RaceResultsPage() {
     setError(errorMessage);
   };
 
+  const handlePenaltyClick = (driver: DriverRowDTO) => {
+    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">
@@ -203,6 +229,19 @@ export default function RaceResultsPage() {
               Back to Races
             </Button>
           </Card>
+  
+          {showQuickPenaltyModal && (
+            <QuickPenaltyModal
+              {...({
+                raceId,
+                drivers: drivers as any,
+                onClose: handleCloseQuickPenaltyModal,
+                preSelectedDriver: preSelectedDriver as any,
+                adminId: currentDriverId,
+                races: undefined,
+              } as any)}
+            />
+          )}
         </div>
       </div>
     );
@@ -298,6 +337,8 @@ export default function RaceResultsPage() {
               fastestLapTime={fastestLapTime ?? 0}
               penalties={penalties}
               currentDriverId={currentDriverId ?? ''}
+              isAdmin={isAdmin}
+              onPenaltyClick={handlePenaltyClick}
             />
           ) : (
             <>