fix tabs on stats table

src/app/routes/_authed/stats.tsx

@@ -4,9 +4,8 @@ import PlayerStatsTable from "@/features/players/components/player-stats-table";
 import { Suspense } from "react";
 import PlayerStatsTableSkeleton from "@/features/players/components/player-stats-table-skeleton";
 import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
-import SwipeableTabs from "@/components/swipeable-tabs";
 import LeagueHeadToHead from "@/features/players/components/league-head-to-head";
-import { Box } from "@mantine/core";
+import { Tabs } from "@mantine/core";
 
 export const Route = createFileRoute("/_authed/stats")({
   component: Stats,
@@ -25,22 +24,22 @@ export const Route = createFileRoute("/_authed/stats")({
 });
 
 function Stats() {
-  const tabs = [
+  return (
-    {
+    <Tabs defaultValue="stats">
-      label: "Stats",
+      <Tabs.List grow>
-      content: (
+        <Tabs.Tab value="stats">Stats</Tabs.Tab>
+        <Tabs.Tab value="h2h">Head to Head</Tabs.Tab>
+      </Tabs.List>
+
+      <Tabs.Panel value="stats">
         <Suspense fallback={<PlayerStatsTableSkeleton />}>
           <PlayerStatsTable />
         </Suspense>
-      ),
+      </Tabs.Panel>
-    },
-    {
-      label: "Head to Head",
-      content: <LeagueHeadToHead />,
-    },
-  ];
 
-  return <Box mt={-20}>
+      <Tabs.Panel value="h2h">
-    <SwipeableTabs mb={0} tabs={tabs} />
+        <LeagueHeadToHead />
-  </Box>;
+      </Tabs.Panel>
+    </Tabs>
+  );
 }

src/components/stats-overview.tsx

@@ -101,7 +101,7 @@ const StatsOverview = ({ statsData, isLoading = false }: StatsOverviewProps) =>
     { label: "Losses", value: overallStats.losses, Icon: XIcon },
     { label: "Cups Made", value: overallStats.total_cups_made, Icon: FireIcon },
     { label: "Cups Against", value: overallStats.total_cups_against, Icon: ShieldIcon },
-    { label: "Avg Cups Per Game", value: avgCupsPerMatch >= 0 ? avgCupsPerMatch : null, Icon: ChartLineUpIcon },
+    { label: "Avg Cups Per Match", value: avgCupsPerMatch >= 0 ? avgCupsPerMatch : null, Icon: ChartLineUpIcon },
     { label: "Avg Cups Against", value: avgCupsAgainstPerMatch >= 0 ? avgCupsAgainstPerMatch : null, Icon: ShieldCheckIcon },
     { label: "Avg Win Margin", value: avgMarginOfVictory >= 0 ? avgMarginOfVictory : null, Icon: ArrowUpIcon },
     { label: "Avg Loss Margin", value: avgMarginOfLoss >= 0 ? avgMarginOfLoss : null, Icon: ArrowDownIcon },
@@ -133,7 +133,7 @@ export const StatsSkeleton = () => {
     { label: "Losses", Icon: XIcon },
     { label: "Cups Made", Icon: FireIcon },
     { label: "Cups Against", Icon: ShieldIcon },
-    { label: "Avg Cups Per Game", Icon: ChartLineUpIcon },
+    { label: "Avg Cups Per Match", Icon: ChartLineUpIcon },
     { label: "Avg Cups Against", Icon: ShieldCheckIcon },
     { label: "Avg Win Margin", Icon: ArrowUpIcon },
     { label: "Avg Loss Margin", Icon: ArrowDownIcon },

src/features/players/components/player-head-to-head-sheet.tsx

@@ -108,7 +108,7 @@ const PlayerHeadToHeadSheet = ({
     );
   }
 
-  const totalGames = stats.player1Wins + stats.player2Wins;
+  const totalMatches = stats.player1Wins + stats.player2Wins;
   const leader =
     stats.player1Wins > stats.player2Wins
       ? player1Name
@@ -163,7 +163,7 @@ const PlayerHeadToHeadSheet = ({
             </Group>
           )}
 
-          {!leader && totalGames > 0 && (
+          {!leader && totalMatches > 0 && (
             <Text size="xs" c="dimmed" ta="center">
               Series is tied
             </Text>
@@ -204,8 +204,8 @@ const PlayerHeadToHeadSheet = ({
             <Group justify="space-between" px="md" py="sm">
               <Group gap="xs">
                 <Text size="sm" fw={600}>
-                  {totalGames > 0
+                  {totalMatches > 0
-                    ? (stats.player1CupsFor / totalGames).toFixed(1)
+                    ? (stats.player1CupsFor / totalMatches).toFixed(1)
                     : "0.0"}
                 </Text>
                 <Text size="xs" c="dimmed">
@@ -213,15 +213,15 @@ const PlayerHeadToHeadSheet = ({
                 </Text>
               </Group>
               <Text size="xs" fw={500}>
-                Avg Cups/Game
+                Avg Cups/Match
               </Text>
               <Group gap="xs">
                 <Text size="xs" c="dimmed">
                   avg
                 </Text>
                 <Text size="sm" fw={600}>
-                  {totalGames > 0
+                  {totalMatches > 0
-                    ? (stats.player2CupsFor / totalGames).toFixed(1)
+                    ? (stats.player2CupsFor / totalMatches).toFixed(1)
                     : "0.0"}
                 </Text>
               </Group>
@@ -259,7 +259,7 @@ const PlayerHeadToHeadSheet = ({
 
       <Stack gap="xs">
         <Text size="sm" fw={600} px="md">
-          Match History ({totalGames} games)
+          Match History ({totalMatches})
         </Text>
         <MatchList matches={matches} hideH2H />
       </Stack>

src/features/players/components/player-stats-table.tsx

@@ -6,6 +6,7 @@ import {
   Group,
   Box,
   ThemeIcon,
+  Container,
   Title,
   Divider,
   UnstyledButton,
@@ -291,7 +292,7 @@ const PlayerStatsTable = () => {
 
   if (playerStats.length === 0) {
     return (
-      <Box px={0} w="100%" maw="100%">
+      <Container px={0} size="md">
         <Stack align="center" gap="md" py="xl">
           <ThemeIcon size="xl" variant="light" radius="md">
             <ChartBarIcon size={32} />
@@ -300,12 +301,12 @@ const PlayerStatsTable = () => {
             No Stats Available
           </Title>
         </Stack>
-      </Box>
+      </Container>
     );
   }
 
   return (
-    <Box px={0} mt="md" w="100%" maw="100%">
+    <Container size="100%" px={0} mt="md">
       <Stack gap="xs">
         <Text px="md" size="10px" lh={0} c="dimmed">
           Showing {filteredAndSortedStats.length} of {playerStats.length} players
@@ -450,7 +451,7 @@ const PlayerStatsTable = () => {
           </Text>
         )}
       </Stack>
-    </Box>
+    </Container>
   );
 };