work on team enrollment

src/features/tournaments/components/profile/index.tsx

@@ -3,6 +3,7 @@ import Header from "./header";
 import TeamList from "@/features/teams/components/team-list";
 import SwipeableTabs from "@/components/swipeable-tabs";
 import { useTournament } from "../../queries";
+import MatchList from "@/features/matches/components/match-list";
 
 interface ProfileProps {
   id: string;
@@ -19,15 +20,12 @@ const Profile = ({ id }: ProfileProps) => {
     },
     {
       label: "Matches",
-      content: <Text p="md">Matches feed will go here</Text>
+      content: <MatchList matches={tournament.matches?.sort((a, b) => b.order - a.order) || []} />
     },
     {
       label: "Teams", 
       content: <>
         <TeamList teams={tournament.teams || []} />
-        <TeamList teams={tournament.teams || []} />
-        <TeamList teams={tournament.teams || []} />
-        <TeamList teams={tournament.teams || []} />
       </>
     }
   ];

src/features/tournaments/components/upcoming-tournament/enroll-free-agent.tsx

@@ -9,7 +9,7 @@ const EnrollFreeAgent = () => {
   const { user } = useAuth();
   return (
     <>
-      <Button variant="outline" size="sm" onClick={open}>
+      <Button variant="subtle" size="sm" onClick={open}>
         Enroll As Free Agent
       </Button>
 

src/features/tournaments/components/upcoming-tournament/enroll-team/index.tsx

@@ -4,14 +4,19 @@ import { useAuth } from "@/contexts/auth-context";
 import { useSheet } from "@/hooks/use-sheet";
 import { useMemo, useState, useCallback } from "react";
 import TeamSelectionView from "./team-selection-view";
+import TeamForm from "@/features/teams/components/team-form";
 
-const EnrollTeam = () => {
+interface EnrollTeamProps {
+  tournamentId: string;
+}
+
+const EnrollTeam = ({ tournamentId }: EnrollTeamProps) => {
   const { open, isOpen, toggle } = useSheet();
   const { user } = useAuth();
   
   const hasTeams = useMemo(() => !!user?.teams?.length, [user?.teams]);
   const [selectedTeamId, setSelectedTeamId] = useState<string>();
-  const [showTeamForm, setShowTeamForm] = useState<boolean>(!hasTeams);
+  const [showTeamForm, setShowTeamForm] = useState<boolean>(!!hasTeams);
 
   const teamOptions = useMemo(() => 
     user?.teams?.map(team => ({
@@ -21,28 +26,21 @@ const EnrollTeam = () => {
     [user?.teams]
   );
 
-  const handleBack = useCallback(() => {
-    setShowTeamForm(false);
-    setSelectedTeamId(undefined);
-  }, []);
-
   const handleSelect = useCallback((teamId: string | undefined) => {
     setSelectedTeamId(teamId);
     setShowTeamForm(true);
-  }, [])
+  }, []);
+
 
   return (
     <>
-      <Button variant="outline" size="sm" onClick={open}>
+      <Button size="sm" onClick={open}>
         Enroll Your Team
       </Button>
 
-      <Sheet title={showTeamForm ? "Team Details" : "Enroll Team"} opened={isOpen} onChange={toggle}>
+      <Sheet title={showTeamForm ? "Team Details" : "Enroll Team"} opened={!isOpen} onChange={toggle}>
         {showTeamForm ? (
-          <>
-            <p>Team Form {selectedTeamId === undefined ? "new team" : selectedTeamId}</p>
-            <Button variant="subtle" color="red" onClick={handleBack}>Back</Button>
-          </>
+          <TeamForm close={console.log} tournamentId={tournamentId} />
         ) : (
           <>
             <TeamSelectionView

src/features/tournaments/components/upcoming-tournament/header.tsx

@@ -1,72 +1,81 @@
 import { Group, Stack, ThemeIcon, Text } from "@mantine/core";
 import { Tournament } from "../../types";
 import Avatar from "@/components/avatar";
-import { CalendarIcon, MapPinIcon, TrophyIcon, UsersIcon } from "@phosphor-icons/react";
+import {
+  CalendarIcon,
+  MapPinIcon,
+  TrophyIcon,
+  UsersIcon,
+} from "@phosphor-icons/react";
 import { useMemo } from "react";
 
-const Header = ({ tournament }: { tournament: Tournament}) => {
-  const tournamentStart = useMemo(() => new Date(tournament.start_time), [tournament.start_time]);
-  const teamCount = useMemo(() => tournament.teams?.length || 0, [tournament.teams]);
+const Header = ({ tournament }: { tournament: Tournament }) => {
+  const tournamentStart = useMemo(
+    () => new Date(tournament.start_time),
+    [tournament.start_time]
+  );
+  const teamCount = useMemo(
+    () => tournament.teams?.length || 0,
+    [tournament.teams]
+  );
 
-    return (
-        <Group justify="space-around" align="flex-start" w='100%'>
-        <Group align="center" gap="lg">
-          <Avatar
-            name={tournament.name}
-            src={
-              tournament.logo
-                ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
-                : undefined
-            }
-            radius="md"
-            size={200}
-            px='md'
-            withBorder={false}
-          >
-            <TrophyIcon size={32} />
-          </Avatar>
-          <Stack gap="xs">
-            {tournament.location && (
-              <Group gap="xs">
-                <ThemeIcon size="sm" variant="light" radius="sm">
-                  <MapPinIcon size={14} />
-                </ThemeIcon>
-                <Text size="sm" c="dimmed">
-                  {tournament.location}
-                </Text>
-              </Group>
-            )}
+  return (
+    <Stack align="center" gap="lg">
+      <Avatar
+        name={tournament.name}
+        src={
+          tournament.logo
+            ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
+            : undefined
+        }
+        radius="md"
+        size={200}
+        px="xs"
+        withBorder={false}
+      >
+        <TrophyIcon size={32} />
+      </Avatar>
+      <Stack gap="xs">
+        {tournament.location && (
+          <Group gap="xs">
+            <ThemeIcon size="sm" variant="light" radius="sm">
+              <MapPinIcon size={14} />
+            </ThemeIcon>
+            <Text size="sm" c="dimmed">
+              {tournament.location}
+            </Text>
+          </Group>
+        )}
 
-            <Group gap="xs">
-              <ThemeIcon size="sm" variant="light" radius="sm">
-                <CalendarIcon size={14} />
-              </ThemeIcon>
-              <Text size="sm" c="dimmed">
-                {tournamentStart.toLocaleDateString(undefined, {
-                  weekday: "short",
-                  month: "short",
-                  day: "numeric",
-                })}{" "}
-                at{" "}
-                {tournamentStart.toLocaleTimeString([], {
-                  hour: "2-digit",
-                  minute: "2-digit",
-                })}
-              </Text>
-            </Group>
-
-            <Group gap="xs">
-              <ThemeIcon size="sm" variant="light" radius="sm">
-                <UsersIcon size={14} />
-              </ThemeIcon>
-              <Text size="sm" c="dimmed">
-                {teamCount} teams enrolled
-              </Text>
-            </Group>
-          </Stack>
+        <Group gap="xs">
+          <ThemeIcon size="sm" variant="light" radius="sm">
+            <CalendarIcon size={14} />
+          </ThemeIcon>
+          <Text size="sm" c="dimmed">
+            {tournamentStart.toLocaleDateString(undefined, {
+              weekday: "short",
+              month: "short",
+              day: "numeric",
+            })}{" "}
+            at{" "}
+            {tournamentStart.toLocaleTimeString([], {
+              hour: "2-digit",
+              minute: "2-digit",
+            })}
+          </Text>
         </Group>
-      </Group>
-    )
-}
 
-export default Header;
+        <Group gap="xs">
+          <ThemeIcon size="sm" variant="light" radius="sm">
+            <UsersIcon size={14} />
+          </ThemeIcon>
+          <Text size="sm" c="dimmed">
+            {teamCount} teams enrolled
+          </Text>
+        </Group>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default Header;

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

@@ -1,30 +1,23 @@
-import { useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 import { Tournament } from "../../types";
 import { useAuth } from "@/contexts/auth-context";
 import {
   Box,
-  Button,
   Card,
   Divider,
   Group,
   Stack,
-  Title,
   Text,
-  ThemeIcon,
 } from "@mantine/core";
-import Avatar from "@/components/avatar";
 import Countdown from "@/components/countdown";
 import ListLink from "@/components/list-link";
 import ListButton from "@/components/list-button";
 import {
-  TrophyIcon,
-  CalendarIcon,
-  MapPinIcon,
   UsersIcon,
   ListIcon,
 } from "@phosphor-icons/react";
-import EnrollTeam from "../enroll-team";
-import EnrollFreeAgent from "../enroll-free-agent";
+import EnrollTeam from "./enroll-team";
+import EnrollFreeAgent from "./enroll-free-agent";
 import TeamListButton from "./team-list-button";
 import Header from "./header";
 
@@ -56,8 +49,8 @@ const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
       {tournament.desc && <Text size="sm">{tournament.desc}</Text>}
 
       <Card withBorder radius="md" p="lg">
-        <Stack gap="md">
-          <Group gap="xs" align="center">
+        <Stack gap="xs">
+          <Group mb='sm' gap="xs" align="center">
             <UsersIcon size={16} />
             <Text size="sm" fw={500}>
               Enrollment
@@ -73,10 +66,14 @@ const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
             )}
           </Group>
 
+          {!isEnrollmentOpen && !isUserEnrolled && (
+            <Text fw={600} c="dimmed" size="sm">Enrollment has been closed for this tournament.</Text>
+          )}
+
           {!isUserEnrolled && isEnrollmentOpen && (
             <>
-              <EnrollTeam />
-              <Divider label="or" />
+              <EnrollTeam tournamentId={tournament.id} />
+              <Divider my={0} label="or" />
               <EnrollFreeAgent />
             </>
           )}