groups init

src/features/tournaments/components/started-tournament/index.tsx

@@ -4,7 +4,7 @@ import { useAuth } from "@/contexts/auth-context";
 import { Box, Divider, Stack, Text, Card, Center } from "@mantine/core";
 import { Carousel } from "@mantine/carousel";
 import ListLink from "@/components/list-link";
-import { TreeStructureIcon, UsersIcon, ClockIcon, TrophyIcon } from "@phosphor-icons/react";
+import { TreeStructureIcon, UsersIcon, ClockIcon, ListDashes } from "@phosphor-icons/react";
 import TeamListButton from "../upcoming-tournament/team-list-button";
 import RulesListButton from "../upcoming-tournament/rules-list-button";
 import MatchCard from "@/features/matches/components/match-card";
@@ -37,6 +37,10 @@ const StartedTournament: React.FC<{ tournament: Tournament }> = ({
     return finalsMatch?.status === 'ended';
   }, [tournament.matches]);
 
+  const hasGroupStage = useMemo(() => {
+    return tournament.matches?.some((match) => match.round === -1) || false;
+  }, [tournament.matches]);
+
   return (
     <Stack gap="lg">
       <Header tournament={tournament} />
@@ -83,6 +87,13 @@ const StartedTournament: React.FC<{ tournament: Tournament }> = ({
             Icon={UsersIcon}
           />
         )}
+        {hasGroupStage && (
+          <ListLink
+            label={`View Groups`}
+            to={`/tournaments/${tournament.id}/groups`}
+            Icon={ListDashes}
+          />
+        )}
         <ListLink
           label={`View Bracket`}
           to={`/tournaments/${tournament.id}/bracket`}