stats reorg, upcoming refinement

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

@@ -0,0 +1,72 @@
+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 { 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]);
+
+    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>
+            )}
+
+            <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>
+      </Group>
+    )
+}
+
+export default Header;

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

@@ -0,0 +1,102 @@
+import { useEffect, useMemo, useState } 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 TeamListButton from "./team-list-button";
+import Header from "./header";
+
+const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
+  tournament,
+}) => {
+  const { user, roles } = useAuth();
+
+  const isAdmin = useMemo(() => roles.includes("Admin"), [roles]);
+  const userTeam = useMemo(
+    () =>
+      tournament.teams?.find((team) =>
+        team.players?.some((player) => player.id === user?.id)
+      ),
+    [tournament.teams, user?.id]
+  );
+  const isUserEnrolled = !!userTeam;
+
+  const enrollmentDeadline = tournament.enroll_time
+    ? new Date(tournament.enroll_time)
+    : new Date(tournament.start_time);
+  const isEnrollmentOpen = enrollmentDeadline > new Date();
+
+  return (
+    <Stack gap="lg">
+      
+      <Header tournament={tournament} />
+
+      {tournament.desc && <Text size="sm">{tournament.desc}</Text>}
+
+      <Card withBorder radius="md" p="lg">
+        <Stack gap="md">
+          <Group gap="xs" align="center">
+            <UsersIcon size={16} />
+            <Text size="sm" fw={500}>
+              Enrollment
+            </Text>
+            {isEnrollmentOpen && (
+              <Box ml="auto">
+                <Countdown
+                  date={enrollmentDeadline}
+                  label="Time left"
+                  color="yellow"
+                />
+              </Box>
+            )}
+          </Group>
+
+          {!isUserEnrolled && isEnrollmentOpen && (
+            <>
+              <EnrollTeam />
+              <Divider label="or" />
+              <EnrollFreeAgent />
+            </>
+          )}
+        </Stack>
+      </Card>
+
+      <Box>
+        <Divider />
+        {isAdmin && (
+          <ListLink
+            label={`Manage ${tournament.name}`}
+            to={`/admin/tournaments/${tournament.id}`}
+            Icon={UsersIcon}
+          />
+        )}
+        <ListButton label="View Rules" Icon={ListIcon} onClick={() => {}} />
+        <TeamListButton teams={tournament.teams || []} />
+      </Box>
+    </Stack>
+  );
+};
+
+export default UpcomingTournament;

src/features/tournaments/components/upcoming-tournament/team-list-button.tsx

@@ -0,0 +1,31 @@
+import ListButton from "@/components/list-button"
+import Sheet from "@/components/sheet/sheet"
+import TeamList from "@/features/teams/components/team-list"
+import { TeamInfo } from "@/features/teams/types"
+import { useSheet } from "@/hooks/use-sheet"
+import { UsersIcon } from "@phosphor-icons/react"
+import { useMemo } from "react"
+
+interface TeamListButtonProps {
+  teams: TeamInfo[]
+}
+
+const TeamListButton: React.FC<TeamListButtonProps> = ({ teams }) => {
+  const count = useMemo(() => teams.length, [teams]);
+  const { open, isOpen, toggle } = useSheet();
+  return (
+    <>
+      <ListButton
+        label={`View Teams (${count})`}
+        Icon={UsersIcon}
+        onClick={open}
+      />
+
+      <Sheet title="Enrolled Teams" opened={isOpen} onChange={toggle}>
+        <TeamList teams={teams} />
+      </Sheet>
+    </>
+  )
+}
+
+export default TeamListButton;