feat: add draft order status and teams filled count to league overview

app/routes/leagues/$leagueId.settings.tsx

@@ -710,7 +710,7 @@ export default function LeagueSettings({ loaderData, actionData }: Route.Compone
 
       <div className="space-y-6">
         {/* Draft Order Management */}
-        <Card>
+        <Card id="draft-order">
           <CardHeader>
             <CardTitle>Draft Order</CardTitle>
             <CardDescription>

app/routes/leagues/$leagueId.tsx

@@ -116,9 +116,15 @@ export async function loader(args: Route.LoaderArgs) {
   // Count available teams
   const availableTeamCount = teams.filter((t) => !t.ownerId).length;
 
+  // Count teams with owners
+  const teamsWithOwners = teams.filter((t) => t.ownerId !== null).length;
+
   // Count sports in season
   const sportsCount = seasonWithSports?.seasonSports?.length || 0;
 
+  // Check if draft order is set
+  const isDraftOrderSet = draftSlots.length > 0;
+
   return {
     league,
     season,
@@ -131,6 +137,8 @@ export async function loader(args: Route.LoaderArgs) {
     availableTeamCount,
     draftSlots,
     sportsCount,
+    teamsWithOwners,
+    isDraftOrderSet,
   };
 }
 
@@ -147,6 +155,8 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
     availableTeamCount,
     draftSlots,
     sportsCount,
+    teamsWithOwners,
+    isDraftOrderSet,
   } = loaderData;
   const [searchParams, setSearchParams] = useSearchParams();
   const [copied, setCopied] = useState(false);
@@ -374,6 +384,31 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
                       {season.status.replace("_", " ")}
                     </p>
                   </div>
+                  <div>
+                    <p className="text-sm text-muted-foreground">
+                      Teams Filled
+                    </p>
+                    <p className="font-medium">
+                      {teamsWithOwners} of {teams.length}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-muted-foreground">
+                      Draft Order Set
+                    </p>
+                    <div className="flex items-center gap-2">
+                      <p className="font-medium">
+                        {isDraftOrderSet ? "Yes" : "No"}
+                      </p>
+                      {!isDraftOrderSet && isUserCommissioner && (
+                        <Button size="sm" variant="outline" asChild>
+                          <Link to={`/leagues/${league.id}/settings#draft-order`}>
+                            Set Order
+                          </Link>
+                        </Button>
+                      )}
+                    </div>
+                  </div>
                   <div>
                     <p className="text-sm text-muted-foreground">
                       Draft Rounds