skeletons, tournament stats, polish, bug fixes

src/features/tournaments/components/manage-tournament.tsx

@@ -57,12 +57,12 @@ const ManageTournament = ({ tournamentId }: ManageTournamentProps) => {
           onClick={openEditRules}
         />
         <ListButton
-          label="Edit Enrolled Teams"
+          label="Edit Enrollments"
           Icon={UsersThreeIcon}
           onClick={openEditTeams}
         />
         <ListLink
-          label="Manage Teams"
+          label="Manage Team Songs/Logos"
           Icon={UsersIcon}
           to={`/admin/tournaments/${tournamentId}/teams`}
         />

src/features/tournaments/components/profile/header-skeleton.tsx

@@ -0,0 +1,14 @@
+import { Flex, Skeleton } from "@mantine/core";
+
+const HeaderSkeleton = () => {
+  return (
+    <Flex h="20dvh" px='xl' w='100%' align='flex-end' gap='md'>
+      <Skeleton opacity={0} height={150} width={150} />
+      <Flex align='center' justify='center' gap={4} w='100%'>
+        <Skeleton height={36} width={200} />
+      </Flex>
+    </Flex>
+  );
+};
+
+export default HeaderSkeleton;

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

@@ -10,7 +10,7 @@ const Header = ({ tournament }: HeaderProps) => {
 
   return (
     <>
-      <Flex px='xl' w='100%' align='self-end' gap='md'>
+      <Flex h="20dvh" px='xl' w='100%' align='self-end' gap='md'>
         <Avatar name={tournament.name} radius={0} withBorder={false} size={125} src={`/api/files/tournaments/${tournament.id}/${tournament.logo}`} />
         <Flex align='center' justify='center' gap={4} pb={20} w='100%'>
           <Title ta='center' order={2}>{tournament.name}</Title>

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

@@ -1,9 +1,11 @@
-import { Box, Text } from "@mantine/core";
+import { useMemo } from "react";
+import { Box } from "@mantine/core";
 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";
+import { TournamentStats } from "../tournament-stats";
 
 interface ProfileProps {
   id: string;
@@ -13,22 +15,22 @@ const Profile = ({ id }: ProfileProps) => {
   const { data: tournament } = useTournament(id);
   if (!tournament) return null;
 
-  const tabs = [
+  const tabs = useMemo(() => [
     {
       label: "Overview",
-      content: <Text p="md">Stats/Badges will go here, bracket link</Text>
+      content: <TournamentStats tournament={tournament} />
     },
     {
       label: "Matches",
       content: <MatchList matches={tournament.matches?.sort((a, b) => b.order - a.order) || []} />
     },
     {
-      label: "Teams", 
+      label: "Teams",
       content: <>
         <TeamList teams={tournament.teams || []} />
       </>
     }
-  ];
+  ], [tournament]);
 
   return <>
     <Header tournament={tournament} />

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

@@ -0,0 +1,37 @@
+import { Box, Flex, Loader } from "@mantine/core";
+import SwipeableTabs from "@/components/swipeable-tabs";
+import HeaderSkeleton from "./header-skeleton";
+
+const SkeletonLoader = () => (
+    <Flex h="30vh" w="100%" align="center" justify="center">
+        <Loader />
+    </Flex>
+)
+
+const ProfileSkeleton = () => {
+  const tabs = [
+    {
+      label: "Overview",
+      content: <SkeletonLoader />,
+    },
+    {
+      label: "Matches",
+      content: <SkeletonLoader />,
+    },
+    {
+      label: "Teams",
+      content: <SkeletonLoader />,
+    },
+  ];
+
+  return (
+    <>
+      <HeaderSkeleton />
+      <Box mt="lg">
+        <SwipeableTabs tabs={tabs} />
+      </Box>
+    </>
+  );
+};
+
+export default ProfileSkeleton;

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

@@ -35,7 +35,7 @@ const StartedTournament: React.FC<{ tournament: Tournament }> = ({
           >
             {startedMatches.map((match, index) => (
               <Carousel.Slide key={match.id}>
-                <Box pl={index === 0 ? "xl" : undefined } pr={index === startedMatches.length - 1 ? "xl" : undefined}>
+                <Box pl={index === 0 ? "md" : undefined } pr={index === startedMatches.length - 1 ? "md" : undefined}>
                   <MatchCard match={match} />
                 </Box>
               </Carousel.Slide>

src/features/tournaments/components/tournament-card-list.tsx

@@ -0,0 +1,37 @@
+import { useAuth } from "@/contexts/auth-context";
+import { useTournaments } from "../queries";
+import { useSheet } from "@/hooks/use-sheet";
+import { Button, Stack } from "@mantine/core";
+import { PlusIcon } from "@phosphor-icons/react";
+import Sheet from "@/components/sheet/sheet";
+import TournamentForm from "./tournament-form";
+import { TournamentCard } from "./tournament-card";
+
+const TournamentCardList = () => {
+  const { data: tournaments } = useTournaments();
+  const { roles } = useAuth();
+  const sheet = useSheet();
+  return (
+    <Stack>
+      {roles?.includes("Admin") ? (
+        <>
+          <Button
+            leftSection={<PlusIcon />}
+            variant="subtle"
+            onClick={sheet.open}
+          >
+            Create Tournament
+          </Button>
+          <Sheet {...sheet.props} title="Create Tournament">
+            <TournamentForm close={sheet.close} />
+          </Sheet>
+        </>
+      ) : null}
+      {tournaments?.map((tournament: any) => (
+        <TournamentCard key={tournament.id} tournament={tournament} />
+      ))}
+    </Stack>
+  );
+};
+
+export default TournamentCardList;

src/features/tournaments/components/tournament-card.tsx

@@ -57,7 +57,7 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
         <Group justify="space-between" align="center">
           <Group gap="md" align="center">
             <Avatar
-              size={120}
+              size={90}
               radius="sm"
               name={tournament.name}
               src={

src/features/tournaments/components/tournament-stats.tsx

@@ -0,0 +1,285 @@
+import { useMemo, memo } from "react";
+import {
+  Stack,
+  Text,
+  Group,
+  UnstyledButton,
+  Container,
+  Box,
+  Center,
+  ThemeIcon,
+  Divider,
+} from "@mantine/core";
+import { Tournament } from "@/features/tournaments/types";
+import { CrownIcon, MedalIcon, TreeStructureIcon } from "@phosphor-icons/react";
+import Avatar from "@/components/avatar";
+import ListLink from "@/components/list-link";
+
+interface TournamentStatsProps {
+  tournament: Tournament;
+}
+
+export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
+
+  const matches = tournament.matches || [];
+  const nonByeMatches = useMemo(() =>
+    matches.filter((match) => !(match.status === 'tbd' && match.bye === true)),
+    [matches]
+  );
+  const isComplete = useMemo(() =>
+    nonByeMatches.length > 0 && nonByeMatches.every((match) => match.status === 'ended'),
+    [nonByeMatches]
+  );
+
+  const sortedTeamStats = useMemo(() => {
+    return [...(tournament.team_stats || [])].sort((a, b) => {
+      if (b.wins !== a.wins) {
+        return b.wins - a.wins;
+      }
+      return b.total_cups_made - a.total_cups_made;
+    });
+  }, [tournament.team_stats]);
+
+  const renderPodium = () => {
+    if (!isComplete || !tournament.first_place) {
+      return (
+        <Box p="md">
+          <Center>
+            <Text c="dimmed" size="sm">
+              Podium will appear here when the tournament is over
+            </Text>
+          </Center>
+        </Box>
+      );
+    }
+
+    return (
+      <Stack gap="xs" px="md">
+        {tournament.first_place && (
+          <Group
+            gap="md"
+            p="md"
+            style={{
+              backgroundColor: 'var(--mantine-color-yellow-light)',
+              borderRadius: 'var(--mantine-radius-md)',
+              border: '3px solid var(--mantine-color-yellow-outline)',
+              boxShadow: 'var(--mantine-shadow-md)',
+            }}
+          >
+            <ThemeIcon size="xl" color="yellow" variant="light" radius="xl">
+              <CrownIcon size={24} />
+            </ThemeIcon>
+            <Stack gap={4} style={{ flex: 1 }}>
+              <Text size="md" fw={600}>
+                {tournament.first_place.name}
+              </Text>
+              <Group gap="xs">
+                {tournament.first_place.players?.map((player) => (
+                  <Text key={player.id} size="sm" c="dimmed">
+                    {player.first_name} {player.last_name}
+                  </Text>
+                ))}
+              </Group>
+            </Stack>
+          </Group>
+        )}
+
+        {tournament.second_place && (
+          <Group
+            gap="md"
+            p="xs"
+            style={{
+              backgroundColor: 'var(--mantine-color-default)',
+              borderRadius: 'var(--mantine-radius-md)',
+              border: '2px solid var(--mantine-color-default-border)',
+              boxShadow: 'var(--mantine-shadow-sm)',
+            }}
+          >
+            <ThemeIcon size="lg" color="gray" variant="light" radius="xl">
+              <MedalIcon size={20} />
+            </ThemeIcon>
+            <Stack gap={4} style={{ flex: 1 }}>
+              <Text size="sm" fw={600}>
+                {tournament.second_place.name}
+              </Text>
+              <Group gap="xs">
+                {tournament.second_place.players?.map((player) => (
+                  <Text key={player.id} size="xs" c="dimmed">
+                    {player.first_name} {player.last_name}
+                  </Text>
+                ))}
+              </Group>
+            </Stack>
+          </Group>
+        )}
+
+        {tournament.third_place && (
+          <Group
+            gap="md"
+            p="xs"
+            style={{
+              backgroundColor: 'var(--mantine-color-orange-light)',
+              borderRadius: 'var(--mantine-radius-md)',
+              border: '2px solid var(--mantine-color-orange-outline)',
+              boxShadow: 'var(--mantine-shadow-sm)',
+            }}
+          >
+            <ThemeIcon size="lg" color="orange" variant="light" radius="xl">
+              <MedalIcon size={18} />
+            </ThemeIcon>
+            <Stack gap={4} style={{ flex: 1 }}>
+              <Text size="sm" fw={600}>
+                {tournament.third_place.name}
+              </Text>
+              <Group gap="xs">
+                {tournament.third_place.players?.map((player) => (
+                  <Text key={player.id} size="xs" c="dimmed">
+                    {player.first_name} {player.last_name}
+                  </Text>
+                ))}
+              </Group>
+            </Stack>
+          </Group>
+        )}
+      </Stack>
+    );
+  };
+
+  const teamStatsWithCalculations = useMemo(() => {
+    return sortedTeamStats.map((stat, index) => ({
+      ...stat,
+      index,
+      winPercentage: stat.matches > 0 ? (stat.wins / stat.matches) * 100 : 0,
+      avgCupsPerMatch: stat.matches > 0 ? stat.total_cups_made / stat.matches : 0,
+    }));
+  }, [sortedTeamStats]);
+
+  const renderTeamStatsTable = () => {
+    if (!teamStatsWithCalculations.length) {
+      return (
+        <Box p="md">
+          <Center>
+            <Text c="dimmed" size="sm">
+              No stats available yet
+            </Text>
+          </Center>
+        </Box>
+      );
+    }
+
+    return (
+      <Stack gap={0}>
+        <Text px="md" size="lg" fw={600}>Results</Text>
+        {teamStatsWithCalculations.map((stat) => {
+          return (
+            <Box key={stat.id}>
+              <UnstyledButton
+                w="100%"
+                p="md"
+                style={{
+                  borderRadius: 0,
+                  transition: "background-color 0.15s ease",
+                }}
+                styles={{
+                  root: {
+                    '&:hover': {
+                      backgroundColor: 'var(--mantine-color-gray-0)',
+                    },
+                  },
+                }}
+              >
+                <Group justify="space-between" align="center" w="100%">
+                  <Group gap="sm" align="center">
+                    <Avatar name={stat.team_name} size={40} radius="sm" />
+                    <Stack gap={2}>
+                      <Group gap='xs'>
+                        <Text size="xs" c="dimmed">
+                          #{stat.index + 1}
+                        </Text>
+                        <Text size="sm" fw={600}>
+                          {stat.team_name}
+                        </Text>
+                        {stat.index === 0 && isComplete && (
+                          <ThemeIcon size="xs" color="yellow" variant="light" radius="xl">
+                            <CrownIcon size={12} />
+                          </ThemeIcon>
+                        )}
+                      </Group>
+                      <Group gap="md" ta="center">
+                        <Stack gap={0}>
+                          <Text size="xs" c="dimmed" fw={700}>
+                            W
+                          </Text>
+                          <Text size="xs" c="dimmed">
+                            {stat.wins}
+                          </Text>
+                        </Stack>
+                        <Stack gap={0}>
+                          <Text size="xs" c="dimmed" fw={700}>
+                            L
+                          </Text>
+                          <Text size="xs" c="dimmed">
+                            {stat.losses}
+                          </Text>
+                        </Stack>
+                        <Stack gap={0}>
+                          <Text size="xs" c="dimmed" fw={700}>
+                            W%
+                          </Text>
+                          <Text size="xs" c="dimmed">
+                            {stat.winPercentage.toFixed(1)}%
+                          </Text>
+                        </Stack>
+                        <Stack gap={0}>
+                          <Text size="xs" c="dimmed" fw={700}>
+                            AVG
+                          </Text>
+                          <Text size="xs" c="dimmed">
+                            {stat.avgCupsPerMatch.toFixed(1)}
+                          </Text>
+                        </Stack>
+                        <Stack gap={0}>
+                          <Text size="xs" c="dimmed" fw={700}>
+                            CF
+                          </Text>
+                          <Text size="xs" c="dimmed">
+                            {stat.total_cups_made}
+                          </Text>
+                        </Stack>
+                        <Stack gap={0}>
+                          <Text size="xs" c="dimmed" fw={700}>
+                            CA
+                          </Text>
+                          <Text size="xs" c="dimmed">
+                            {stat.total_cups_against}
+                          </Text>
+                        </Stack>
+                      </Group>
+                    </Stack>
+                  </Group>
+                </Group>
+              </UnstyledButton>
+              {stat.index < teamStatsWithCalculations.length - 1 && <Divider />}
+            </Box>
+          );
+        })}
+      </Stack>
+    );
+  };
+
+  return (
+    <Container size="100%" px={0}>
+      <Stack gap="md">
+        {renderPodium()}
+        <ListLink
+          label={`View Bracket`}
+          to={`/tournaments/${tournament.id}/bracket`}
+          Icon={TreeStructureIcon}
+        />
+        {renderTeamStatsTable()}
+      </Stack>
+    </Container>
+  );
+});
+
+TournamentStats.displayName = 'TournamentStats';

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

@@ -11,10 +11,30 @@ const EnrolledFreeAgent: React.FC<{ tournamentId: string }> = ({
 
   const copyToClipboard = async (phone: string) => {
     try {
-      await navigator.clipboard.writeText(phone);
-      toast.success("Phone number copied!");
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(phone);
+        toast.success("Phone number copied!");
+        return;
+      }
+
+      const textArea = document.createElement("textarea");
+      textArea.value = phone;
+      textArea.style.display = "hidden";
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+
+      const successful = document.execCommand('copy');
+      document.body.removeChild(textArea);
+
+      if (successful) {
+        toast.success("Phone number copied!");
+      } else {
+        throw new Error("Copy command failed");
+      }
     } catch (err) {
-      toast.success("Failed to copy");
+      console.error("Failed to copy:", err);
+      toast.error("Failed to copy");
     }
   };
 

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

@@ -31,7 +31,7 @@ const Header = ({ tournament }: { tournament: Tournament }) => {
       >
         <TrophyIcon size={32} />
       </Avatar>
-      <Flex gap="xs" direction="row" wrap="wrap" justify="space-around">
+      <Flex gap="xs" direction="column" justify="space-around">
         {tournament.location && (
           <Group gap="xs">
             <ThemeIcon size="sm" variant="light" radius="sm">

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

@@ -51,8 +51,8 @@ const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
     <Stack gap="lg">
       <Header tournament={tournament} />
 
-      <Stack px="md">
-        {tournament.desc && <Text size="sm">{tournament.desc}</Text>}
+      <Stack px="xs">
+        {tournament.desc && <Text px="md" size="sm">{tournament.desc}</Text>}
 
         <Card withBorder radius="lg" p="lg">
           <Stack gap="xs">

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

@@ -4,37 +4,32 @@ const UpcomingTournamentSkeleton = () => {
   return (
     <Stack gap="lg">
       <Flex px="md" justify="center" w="100%">
-        <Skeleton height={240} width={240} radius="md" />
-        <Stack justify="space-between" align="flex-start">
-          <Box style={{ flex: 1 }}>
-            <Skeleton height={32}  mb="xs" />
-            <Skeleton height={16} />
-          </Box>
-        </Stack>
+        <Skeleton height={200} width={240} radius="md" />
       </Flex>
+        <Stack align="center" gap={2}>
+          <Skeleton height={16} w="30%" mb="md" />
+          <Skeleton height={16}  w="30%" />
+        </Stack>
 
       <Stack px="md">
-        <Skeleton height={14} width="80%" />
-
         <Card withBorder radius="lg" p="lg">
+          <Skeleton height={14} width="80%" mb={16} />
           <Group mb="sm" gap="xs" align="center">
-            <Skeleton height={16} width={16} />
-            <Skeleton height={14} width="20%" />
+            <Skeleton height={32} width={16} />
+            <Skeleton height={32} width="20%" />
             <Box ml="auto">
-              <Skeleton height={20} width={80} radius="sm" />
+              <Skeleton height={32} width={80} radius="sm" />
+            </Box>
+          </Group>
+          <Group mb="sm" gap="xs" align="center">
+            <Skeleton height={32} width={16} />
+            <Skeleton height={32} width="20%" />
+            <Box ml="auto">
+              <Skeleton height={32} width={80} radius="sm" />
             </Box>
           </Group>
         </Card>
       </Stack>
-
-      <Box>
-        <Divider />
-        <Stack gap={0}>
-          <Skeleton height={48} width="100%" />
-          <Skeleton height={48} width="100%" />
-          <Skeleton height={48} width="100%" />
-        </Stack>
-      </Box>
     </Stack>
   );
 };