regionals

src/app/routes/_authed/admin/tournaments/run.$id.tsx

@@ -7,7 +7,7 @@ import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
 import SeedTournament from "@/features/tournaments/components/seed-tournament";
 import SetupGroupStage from "@/features/tournaments/components/setup-group-stage";
 import GroupStageView from "@/features/tournaments/components/group-stage-view";
-import { Container } from "@mantine/core";
+import { Container, Stack, Divider, Title } from "@mantine/core";
 import { useMemo } from "react";
 import { BracketData } from "@/features/bracket/types";
 import { Match } from "@/features/matches/types";
@@ -45,10 +45,20 @@ function RouteComponent() {
   const { roles } = useAuth();
   const isAdmin = roles?.includes('Admin') || false;
 
-  const isGroupStage = useMemo(() => {
+  const hasGroupStage = useMemo(() => {
     return tournament.matches?.some((match) => match.round === -1) || false;
   }, [tournament.matches]);
 
+  const hasKnockout = useMemo(() => {
+    return tournament.matches?.some((match) => match.round !== -1) || false;
+  }, [tournament.matches]);
+
+  const knockoutBracketPopulated = useMemo(() => {
+    return tournament.matches?.some((match) =>
+      match.round === 0 && match.lid >= 0 && (match.home || match.away)
+    ) || false;
+  }, [tournament.matches]);
+
   const bracket: BracketData = useMemo(() => {
     if (!tournament.matches || tournament.matches.length === 0) {
       return { winners: [], losers: [] };
@@ -88,14 +98,31 @@ function RouteComponent() {
     <Container size="md" px={0}>
       { isAdmin && !tournament.regional && <SpotifyControlsBar />}
       {tournament.matches?.length ? (
-        isGroupStage ? (
+        hasGroupStage && hasKnockout ? (
+          <Stack gap="xl">
+            <GroupStageView
+              groups={tournament.groups || []}
+              matches={tournament.matches}
+              showControls
+              tournamentId={tournament.id}
+              hasKnockoutBracket={knockoutBracketPopulated}
+            />
+            <Divider />
+            <div>
+              <Title order={3} ta="center" mb="md">Knockout Bracket</Title>
+              <BracketView bracket={bracket} showControls groupConfig={tournament.group_config} />
+            </div>
+          </Stack>
+        ) : hasGroupStage ? (
           <GroupStageView
             groups={tournament.groups || []}
             matches={tournament.matches}
             showControls
+            tournamentId={tournament.id}
+            hasKnockoutBracket={knockoutBracketPopulated}
           />
         ) : (
-          <BracketView bracket={bracket} showControls />
+          <BracketView bracket={bracket} showControls groupConfig={tournament.group_config} />
         )
       ) : (
         tournament.regional === true ? (

src/app/routes/_authed/tournaments/$id.bracket.tsx

@@ -74,7 +74,7 @@ function RouteComponent() {
 
   return (
     <Container size="md" px={0}>
-      <BracketView bracket={bracket} />
+      <BracketView bracket={bracket} groupConfig={tournament.group_config} />
     </Container>
   );
 }