website refactor

apps/website/components/leagues/AdminQuickViewWidgets.tsx

@@ -28,7 +28,7 @@ export function AdminQuickViewWidgets({
   }
 
   return (
-    <Stack gap={4}>
+    <Stack gap={4} data-testid="admin-widgets">
       {/* Wallet Preview */}
       <Surface
         variant="precision"

apps/website/components/leagues/EnhancedLeagueSchedulePanel.tsx

@@ -129,7 +129,7 @@ export function EnhancedLeagueSchedulePanel({
         const isExpanded = expandedMonths.has(monthKey);
 
         return (
-          <Surface key={monthKey} variant="precision" overflow="hidden">
+          <Surface key={monthKey} variant="precision" overflow="hidden" data-testid="schedule-month-group">
             {/* Month Header */}
             <Box
               display="flex"
@@ -163,6 +163,7 @@ export function EnhancedLeagueSchedulePanel({
                       key={race.id}
                       variant="precision"
                       p={4}
+                      data-testid="race-item"
                     >
                       <Box display="flex" alignItems="center" justifyContent="space-between" gap={4}>
                         {/* Race Info */}
@@ -208,6 +209,7 @@ export function EnhancedLeagueSchedulePanel({
                                   size="sm"
                                   onClick={() => onRegister(race.id)}
                                   icon={<Icon icon={CheckCircle} size={3} />}
+                                  data-testid="register-button"
                                 >
                                   Register
                                 </Button>

apps/website/components/leagues/LeagueStandingsTable.tsx

@@ -30,21 +30,22 @@ interface StandingEntry {
 
 interface LeagueStandingsTableProps {
   standings: StandingEntry[];
+  'data-testid'?: string;
 }
 
-export function LeagueStandingsTable({ standings }: LeagueStandingsTableProps) {
+export function LeagueStandingsTable({ standings, 'data-testid': dataTestId }: LeagueStandingsTableProps) {
   const router = useRouter();
 
   if (!standings || standings.length === 0) {
     return (
-      <Box p={12} textAlign="center" border borderColor="zinc-800" bg="zinc-900/30">
+      <Box p={12} textAlign="center" border borderColor="zinc-800" bg="zinc-900/30" data-testid={dataTestId}>
         <Text color="text-zinc-500" italic>No standings data available for this season.</Text>
       </Box>
     );
   }
 
   return (
-    <LeaderboardTableShell>
+    <LeaderboardTableShell data-testid={dataTestId}>
       <LeaderboardList>
         {standings.map((entry) => (
           <RankingRow
@@ -60,6 +61,8 @@ export function LeagueStandingsTable({ standings }: LeagueStandingsTableProps) {
             rating={0}
             wins={entry.wins}
             onClick={entry.driverId ? () => router.push(routes.driver.detail(entry.driverId!)) : undefined}
+            data-testid="standings-row"
+            droppedRaceIds={entry.droppedRaceIds}
           />
         ))}
       </LeaderboardList>

apps/website/components/leagues/NextRaceCountdownWidget.tsx

@@ -74,6 +74,7 @@ export function NextRaceCountdownWidget({
         position: 'relative',
         overflow: 'hidden',
       }}
+      data-testid="next-race-countdown"
     >
       <Stack
         position="absolute"

apps/website/components/leagues/RaceDetailModal.tsx

@@ -85,7 +85,7 @@ export function RaceDetailModal({
         mx={4}
         onClick={(e) => e.stopPropagation()}
       >
-        <Surface variant="precision" overflow="hidden">
+        <Surface variant="precision" overflow="hidden" data-testid="race-detail-modal">
           {/* Header */}
           <Box
             display="flex"
@@ -121,19 +121,19 @@ export function RaceDetailModal({
                   Race Details
                 </Text>
                 <Stack gap={3}>
-                  <Group gap={2} align="center">
+                  <Group gap={2} align="center" data-testid="race-track">
                     <Icon icon={MapPin} size={4} intent="primary" />
                     <Text size="md" variant="high" weight="bold">
                       {race.track || 'TBA'}
                     </Text>
                   </Group>
-                  <Group gap={2} align="center">
+                  <Group gap={2} align="center" data-testid="race-car">
                     <Icon icon={Car} size={4} intent="primary" />
                     <Text size="md" variant="high">
                       {race.car || 'TBA'}
                     </Text>
                   </Group>
-                  <Group gap={2} align="center">
+                  <Group gap={2} align="center" data-testid="race-date">
                     <Icon icon={Calendar} size={4} intent="primary" />
                     <Text size="md" variant="high">
                       {formatTime(race.scheduledAt)}

apps/website/components/leagues/RosterTable.tsx

@@ -21,6 +21,7 @@ export function RosterTable({ members, isAdmin, onRemoveMember }: RosterTablePro
       members={members} 
       isAdmin={isAdmin} 
       onRemoveMember={onRemoveMember} 
+      data-testid="roster-table"
     />
   );
 }

apps/website/components/leagues/SeasonProgressWidget.tsx

@@ -23,6 +23,7 @@ export function SeasonProgressWidget({
       variant="precision"
       rounded="xl"
       padding={6}
+      data-testid="season-progress-bar"
     >
       <Stack gap={4}>
         {/* Header */}