feat: add totalRounds prop to DraftSummaryView and pass from DraftRoom (#60)

app/components/draft/DraftSummaryView.tsx

@@ -6,6 +6,7 @@ interface DraftSummaryViewProps {
   ownerMap?: Record<string, string>;
   picks: DraftPick[];
   sports: Array<{ id: string; name: string }>;
+  totalRounds: number;
 }
 
 export const DraftSummaryView = memo(function DraftSummaryView({
@@ -13,24 +14,42 @@ export const DraftSummaryView = memo(function DraftSummaryView({
   ownerMap = {},
   picks,
   sports,
+  totalRounds,
 }: DraftSummaryViewProps) {
   const picksByTeamAndSport = useMemo(
     () => groupPicksByTeamAndSport(picks),
     [picks]
   );
 
-  const totalPicksBySport = useMemo(() => {
+  const sportStats = useMemo(() => {
-    const map = new Map<string, number>();
+    const map = new Map<string, { total: number; teams: number }>();
-    sports.forEach((sport) => {
+    sports.forEach((sport) => map.set(sport.id, { total: 0, teams: 0 }));
-      let count = 0;
+    picksByTeamAndSport.forEach((teamMap) => {
-      picksByTeamAndSport.forEach((teamMap) => {
+      teamMap.forEach((teamSportPicks, sportId) => {
-        count += teamMap.get(sport.id)?.length ?? 0;
+        const stat = map.get(sportId);
+        if (stat && teamSportPicks.length > 0) {
+          stat.total += teamSportPicks.length;
+          stat.teams++;
+        }
       });
-      map.set(sport.id, count);
     });
     return map;
   }, [picksByTeamAndSport, sports]);
 
+  const flexPicksAvailable = Math.max(0, totalRounds - sports.length);
+
+  const flexPicksUsedByTeam = useMemo(() => {
+    const map = new Map<string, number>();
+    picksByTeamAndSport.forEach((teamMap, teamId) => {
+      let used = 0;
+      teamMap.forEach((teamSportPicks) => {
+        if (teamSportPicks.length > 1) used += teamSportPicks.length - 1;
+      });
+      map.set(teamId, used);
+    });
+    return map;
+  }, [picksByTeamAndSport]);
+
   if (sports.length === 0) {
     return (
       <div className="flex items-center justify-center h-full p-8 text-muted-foreground">
@@ -59,6 +78,8 @@ export const DraftSummaryView = memo(function DraftSummaryView({
             {draftSlots.map((slot, index) => {
               const displayName = ownerMap[slot.team.id] || slot.team.name;
               const isLast = index === draftSlots.length - 1;
+              const used = flexPicksUsedByTeam.get(slot.team.id) ?? 0;
+              const flexesExhausted = flexPicksAvailable > 0 && used >= flexPicksAvailable;
               return (
                 <th
                   key={slot.id}
@@ -66,6 +87,11 @@ export const DraftSummaryView = memo(function DraftSummaryView({
                   className={`border-b border-border p-2 text-center font-semibold bg-muted/50 min-w-[60px] ${!isLast ? "border-r" : ""}`}
                 >
                   <span className="text-sm">{displayName}</span>
+                  {flexPicksAvailable > 0 && (
+                    <div className={`text-xs mt-0.5 ${flexesExhausted ? "text-destructive font-medium" : "font-normal text-muted-foreground"}`}>
+                      {used} of {flexPicksAvailable} flexes
+                    </div>
+                  )}
                 </th>
               );
             })}
@@ -74,7 +100,7 @@ export const DraftSummaryView = memo(function DraftSummaryView({
         <tbody>
           {sports.map((sport, sportIndex) => {
             const isLastRow = sportIndex === sports.length - 1;
-            const sportTotal = totalPicksBySport.get(sport.id) ?? 0;
+            const { total: sportTotal, teams: sportTeamCount } = sportStats.get(sport.id) ?? { total: 0, teams: 0 };
             return (
               <tr key={sport.id}>
                 <th
@@ -86,7 +112,14 @@ export const DraftSummaryView = memo(function DraftSummaryView({
                 <td
                   className={`border-r border-border p-2 text-center text-sm font-semibold bg-muted/30 ${!isLastRow ? "border-b" : ""}`}
                 >
-                  {sportTotal > 0 ? sportTotal : null}
+                  {sportTotal > 0 ? (
+                    <>
+                      <div>{sportTotal}</div>
+                      <div className="text-xs font-normal text-muted-foreground mt-0.5">
+                        {sportTeamCount} team{sportTeamCount !== 1 ? "s" : ""}
+                      </div>
+                    </>
+                  ) : null}
                 </td>
                 {draftSlots.map((slot, slotIndex) => {
                   const count =

app/routes/leagues/$leagueId.draft.$seasonId.tsx

@@ -1463,6 +1463,7 @@ export default function DraftRoom() {
     picks,
     sports: seasonSportsData,
     ownerMap,
+    totalRounds: season.draftRounds,
   };
 
   const rosterViewProps = {