Merge branch 'main' into caro/badges-stats

2025-10-16 11:51:12 -05:00
parent 7fa3b06673 470b4ef99c
commit a04a78fbf8
56 changed files with 2759 additions and 292 deletions
--- a/src/features/activities/components/activities-table.tsx
+++ b/src/features/activities/components/activities-table.tsx
@@ -92,8 +92,6 @@ const ActivityListItem = memo(({ activity, onClick }: ActivityListItemProps) =>
  );
 });

-ActivityListItem.displayName = "ActivityListItem";
-
 interface ActivityDetailsSheetProps {
  activity: Activity | null;
  isOpen: boolean;
@@ -205,8 +203,6 @@ const ActivityDetailsSheet = memo(({ activity, isOpen, onClose }: ActivityDetail
  );
 });

-ActivityDetailsSheet.displayName = "ActivityDetailsSheet";
-
 const ActivitiesResults = ({ searchParams, page, setPage, onActivityClick }: any) => {
  const { data: result } = useActivities(searchParams);
  return (
--- a/src/features/core/components/providers.tsx
+++ b/src/features/core/components/providers.tsx
@@ -1,6 +1,9 @@
 import { AuthProvider } from "@/contexts/auth-context"
 import { SpotifyProvider } from "@/contexts/spotify-context"
 import MantineProvider from "@/lib/mantine/mantine-provider"
+//import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+//import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+//import { TanStackDevtools } from '@tanstack/react-devtools'
 import { Toaster } from "sonner"

 const Providers = ({ children }: { children: React.ReactNode }) => {
@@ -8,6 +11,22 @@ const Providers = ({ children }: { children: React.ReactNode }) => {
    <AuthProvider>
      <SpotifyProvider>
        <MantineProvider>
+          {/*<TanStackDevtools
+            eventBusConfig={{
+              debug: false,
+              connectToServerBus: true,
+            }}
+            plugins={[
+              {
+                name: 'TanStack Query',
+                render: <ReactQueryDevtoolsPanel />,
+              },
+              {
+                name: 'TanStack Router',
+                render: <TanStackRouterDevtoolsPanel />,
+              }
+            ]}
+          />*/}
          <Toaster position='top-center' />
          {children}
        </MantineProvider>
--- a/src/features/core/components/pullable.tsx
+++ b/src/features/core/components/pullable.tsx
@@ -32,7 +32,10 @@ const Pullable: React.FC<PullableProps> = ({ children, scrollPosition, onScrollP
    if (refresh.length > 0) {
      // TODO: Remove this after testing - or does the delay help ux?
      await new Promise(resolve => setTimeout(resolve, 1000));
-      await queryClient.refetchQueries({ queryKey: refresh, exact: true});
+      refresh.forEach(async (queryKey) => {
+        const keyArray = Array.isArray(queryKey) ? queryKey : [queryKey];
+        await queryClient.refetchQueries({ queryKey: keyArray, exact: true });
+      });
    }
    setIsRefreshing(false);
  }, [refresh]);
--- a/src/features/matches/components/match-card.tsx
+++ b/src/features/matches/components/match-card.tsx
@@ -1,20 +1,26 @@
-import { Text, Group, Stack, Paper, Indicator, Box, Tooltip } from "@mantine/core";
-import { CrownIcon } from "@phosphor-icons/react";
+import { Text, Group, Stack, Paper, Indicator, Box, Tooltip, ActionIcon } from "@mantine/core";
+import { CrownIcon, FootballHelmetIcon } from "@phosphor-icons/react";
 import { useNavigate } from "@tanstack/react-router";
 import { Match } from "../types";
 import Avatar from "@/components/avatar";
 import EmojiBar from "@/features/reactions/components/emoji-bar";
 import { Suspense } from "react";
+import { useSheet } from "@/hooks/use-sheet";
+import Sheet from "@/components/sheet/sheet";
+import TeamHeadToHeadSheet from "./team-head-to-head-sheet";

 interface MatchCardProps {
  match: Match;
+  hideH2H?: boolean;
 }

-const MatchCard = ({ match }: MatchCardProps) => {
+const MatchCard = ({ match, hideH2H = false }: MatchCardProps) => {
  const navigate = useNavigate();
+  const h2hSheet = useSheet();
  const isHomeWin = match.home_cups > match.away_cups;
  const isAwayWin = match.away_cups > match.home_cups;
  const isStarted = match.status === "started";
+  const hasPrivate = match.home?.private || match.away?.private;

  const handleHomeTeamClick = (e: React.MouseEvent) => {
    e.stopPropagation();
@@ -30,15 +36,13 @@ const MatchCard = ({ match }: MatchCardProps) => {
    }
  };

+  const handleH2HClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    h2hSheet.open();
+  };
+
  return (
-    <Indicator
-      disabled={!isStarted}
-      size={12}
-      color="red"
-      processing
-      position="top-end"
-      offset={24}
-    >
+    <>
      <Box style={{ position: "relative" }}>
        <Paper
          px="md"
@@ -48,15 +52,62 @@ const MatchCard = ({ match }: MatchCardProps) => {
          style={{ position: "relative", zIndex: 2 }}
        >
          <Stack gap="sm">
-            <Group gap="xs">
-              <Text size="xs" fw={600} lineClamp={1} c="dimmed">
-                {match.tournament.name}
-              </Text>
-              <Text c="dimmed">-</Text>
-              <Text size="xs" c="dimmed">
-                Round {match.round + 1}
-                {match.is_losers_bracket && " (Losers)"}
-              </Text>
+            <Group gap="xs" justify="space-between">
+              <Group gap="xs" style={{ flex: 1 }}>
+                {isStarted && (
+                  <Indicator
+                    size={8}
+                    color="red"
+                    processing
+                    position="middle-start"
+                    offset={0}
+                  />
+                )}
+                <Text size="xs" fw={600} lineClamp={1} c="dimmed">
+                  {match.tournament.name}
+                </Text>
+                {!match.tournament.regional && (
+                  <>
+                    <Text c="dimmed">-</Text>
+                    <Text size="xs" c="dimmed">
+                      Round {match.round + 1}
+                      {match.is_losers_bracket && " (Losers)"}
+                    </Text>
+                  </>
+                )}
+              </Group>
+              {match.home && match.away && !hideH2H && !hasPrivate && (
+                <Tooltip label="Head to Head" withArrow position="left">
+                  <ActionIcon
+                    variant="subtle"
+                    size="sm"
+                    onClick={handleH2HClick}
+                    aria-label="View head-to-head"
+                    w={40}
+                  >
+                    <Group style={{ position: 'relative', width: 27.5, height: 16 }}>
+                      <FootballHelmetIcon
+                        size={14}
+                        style={{
+                          position: 'absolute',
+                          left: 0,
+                          top: 0,
+                          transform: 'rotate(25deg)',
+                        }}
+                      />
+                      <FootballHelmetIcon
+                        size={14}
+                        style={{
+                          position: 'absolute',
+                          right: 0,
+                          top: 0,
+                          transform: 'scaleX(-1) rotate(25deg)',
+                        }}
+                      />
+                    </Group>
+                  </ActionIcon>
+                </Tooltip>
+              )}
            </Group>

            <Group justify="space-between" align="center">
@@ -205,7 +256,16 @@ const MatchCard = ({ match }: MatchCardProps) => {
          </Suspense>
        </Paper>
      </Box>
-    </Indicator>
+
+      {match.home && match.away && !hideH2H && h2hSheet.isOpen && (
+        <Sheet
+          title="Head to Head"
+          {...h2hSheet.props}
+        >
+          <TeamHeadToHeadSheet team1={match.home} team2={match.away} isOpen={h2hSheet.props.opened} />
+        </Sheet>
+      )}
+    </>
  );
 };

--- a/src/features/matches/components/match-list.tsx
+++ b/src/features/matches/components/match-list.tsx
@@ -1,12 +1,13 @@
-import { Stack } from "@mantine/core";
+import { Stack, Text } from "@mantine/core";
 import { Match } from "../types";
 import MatchCard from "./match-card";

 interface MatchListProps {
  matches: Match[];
+  hideH2H?: boolean;
 }

-const MatchList = ({ matches }: MatchListProps) => {
+const MatchList = ({ matches, hideH2H = false }: MatchListProps) => {
  const filteredMatches = matches?.filter(match =>
    match.home && match.away && !match.bye && match.status != "tbd"
  ).sort((a, b) => a.start_time < b.start_time ? 1 : -1) || [];
@@ -15,13 +16,20 @@ const MatchList = ({ matches }: MatchListProps) => {
    return undefined;
  }

+  const isRegional = filteredMatches[0]?.tournament?.regional;
+
  return (
    <Stack p="md" gap="sm">
+      {isRegional && (
+        <Text size="xs" c="dimmed" ta="center" px="md">
+          Matches for regionals are unordered
+        </Text>
+      )}
      {filteredMatches.map((match, index) => (
        <div
          key={`match-${match.id}-${index}`}
        >
-          <MatchCard match={match} />
+          <MatchCard match={match} hideH2H={hideH2H} />
        </div>
      ))}
    </Stack>
--- a/src/features/matches/components/team-head-to-head-sheet.tsx
+++ b/src/features/matches/components/team-head-to-head-sheet.tsx
@@ -0,0 +1,217 @@
+import { Stack, Text, Group, Box, Divider, Paper } from "@mantine/core";
+import { TeamInfo } from "@/features/teams/types";
+import { useTeamHeadToHead } from "../queries";
+import { useMemo, useEffect, useState, Suspense } from "react";
+import { CrownIcon } from "@phosphor-icons/react";
+import MatchList from "./match-list";
+import TeamHeadToHeadSkeleton from "./team-head-to-head-skeleton";
+
+interface TeamHeadToHeadSheetProps {
+  team1: TeamInfo;
+  team2: TeamInfo;
+  isOpen?: boolean;
+}
+
+const TeamHeadToHeadContent = ({ team1, team2, isOpen = true }: TeamHeadToHeadSheetProps) => {
+  const [shouldFetch, setShouldFetch] = useState(false);
+
+  useEffect(() => {
+    if (isOpen && !shouldFetch) {
+      setShouldFetch(true);
+    }
+  }, [isOpen, shouldFetch]);
+
+  const { data: matches, isLoading } = useTeamHeadToHead(team1.id, team2.id, shouldFetch);
+
+  const stats = useMemo(() => {
+    if (!matches || matches.length === 0) {
+      return {
+        team1Wins: 0,
+        team2Wins: 0,
+        team1CupsFor: 0,
+        team2CupsFor: 0,
+        team1CupsAgainst: 0,
+        team2CupsAgainst: 0,
+        team1AvgMargin: 0,
+        team2AvgMargin: 0,
+      };
+    }
+
+    let team1Wins = 0;
+    let team2Wins = 0;
+    let team1CupsFor = 0;
+    let team2CupsFor = 0;
+    let team1CupsAgainst = 0;
+    let team2CupsAgainst = 0;
+    let team1TotalWinMargin = 0;
+    let team2TotalWinMargin = 0;
+
+    matches.forEach((match) => {
+      const isTeam1Home = match.home?.id === team1.id;
+      const team1Cups = isTeam1Home ? match.home_cups : match.away_cups;
+      const team2Cups = isTeam1Home ? match.away_cups : match.home_cups;
+
+      if (team1Cups > team2Cups) {
+        team1Wins++;
+        team1TotalWinMargin += (team1Cups - team2Cups);
+      } else if (team2Cups > team1Cups) {
+        team2Wins++;
+        team2TotalWinMargin += (team2Cups - team1Cups);
+      }
+
+      team1CupsFor += team1Cups;
+      team2CupsFor += team2Cups;
+      team1CupsAgainst += team2Cups;
+      team2CupsAgainst += team1Cups;
+    });
+
+    const team1AvgMargin = team1Wins > 0
+      ? team1TotalWinMargin / team1Wins
+      : 0;
+    const team2AvgMargin = team2Wins > 0
+      ? team2TotalWinMargin / team2Wins
+      : 0;
+
+    return {
+      team1Wins,
+      team2Wins,
+      team1CupsFor,
+      team2CupsFor,
+      team1CupsAgainst,
+      team2CupsAgainst,
+      team1AvgMargin,
+      team2AvgMargin,
+    };
+  }, [matches, team1.id]);
+
+  if (isLoading) {
+    return (
+      <Stack p="md" gap="md">
+        <Text size="sm" c="dimmed" ta="center">Loading...</Text>
+      </Stack>
+    );
+  }
+
+  if (!matches || matches.length === 0) {
+    return (
+      <Stack p="md" gap="md">
+        <Text size="sm" c="dimmed" ta="center">
+          These teams have not faced each other yet.
+        </Text>
+      </Stack>
+    );
+  }
+
+  const totalMatches = stats.team1Wins + stats.team2Wins;
+  const leader = stats.team1Wins > stats.team2Wins ? team1 : stats.team2Wins > stats.team1Wins ? team2 : null;
+
+  return (
+    <Stack gap="md">
+      <Paper p="md" withBorder radius="md">
+        <Stack gap="sm">
+          <Group justify="center" gap="xs">
+            <Text size="lg" fw={700}>{team1.name}</Text>
+            <Text size="sm" c="dimmed">vs</Text>
+            <Text size="lg" fw={700}>{team2.name}</Text>
+          </Group>
+
+          <Group justify="center" gap="lg">
+            <Stack gap={0} align="center">
+              <Text size="xl" fw={700}>{stats.team1Wins}</Text>
+              <Text size="xs" c="dimmed">{team1.name}</Text>
+            </Stack>
+            <Text size="md" c="dimmed">-</Text>
+            <Stack gap={0} align="center">
+              <Text size="xl" fw={700}>{stats.team2Wins}</Text>
+              <Text size="xs" c="dimmed">{team2.name}</Text>
+            </Stack>
+          </Group>
+
+          {leader && (
+            <Group justify="center" gap="xs">
+              <CrownIcon size={16} weight="fill" color="gold" />
+              <Text size="xs" c="dimmed">
+                {leader.name} leads the series
+              </Text>
+            </Group>
+          )}
+
+          {!leader && totalMatches > 0 && (
+            <Text size="xs" c="dimmed" ta="center">
+              Series is tied
+            </Text>
+          )}
+        </Stack>
+      </Paper>
+
+      <Stack gap={0}>
+        <Text size="sm" fw={600} px="md" mb="xs">Stats Comparison</Text>
+
+        <Paper withBorder>
+          <Stack gap={0}>
+            <Group justify="space-between" px="md" py="sm">
+              <Group gap="xs">
+                <Text size="sm" fw={600}>{stats.team1CupsFor}</Text>
+                <Text size="xs" c="dimmed">cups</Text>
+              </Group>
+              <Text size="xs" fw={500}>Total Cups</Text>
+              <Group gap="xs">
+                <Text size="xs" c="dimmed">cups</Text>
+                <Text size="sm" fw={600}>{stats.team2CupsFor}</Text>
+              </Group>
+            </Group>
+            <Divider />
+
+            <Group justify="space-between" px="md" py="sm">
+              <Group gap="xs">
+                <Text size="sm" fw={600}>
+                  {totalMatches > 0 ? (stats.team1CupsFor / totalMatches).toFixed(1) : '0.0'}
+                </Text>
+                <Text size="xs" c="dimmed">avg</Text>
+              </Group>
+              <Text size="xs" fw={500}>Avg Cups/Match</Text>
+              <Group gap="xs">
+                <Text size="xs" c="dimmed">avg</Text>
+                <Text size="sm" fw={600}>
+                  {totalMatches > 0 ? (stats.team2CupsFor / totalMatches).toFixed(1) : '0.0'}
+                </Text>
+              </Group>
+            </Group>
+            <Divider />
+
+            <Group justify="space-between" px="md" py="sm">
+              <Group gap="xs">
+                <Text size="sm" fw={600}>
+                  {!isNaN(stats.team1AvgMargin) ? stats.team1AvgMargin.toFixed(1) : '0.0'}
+                </Text>
+                <Text size="xs" c="dimmed">margin</Text>
+              </Group>
+              <Text size="xs" fw={500}>Avg Win Margin</Text>
+              <Group gap="xs">
+                <Text size="xs" c="dimmed">margin</Text>
+                <Text size="sm" fw={600}>
+                  {!isNaN(stats.team2AvgMargin) ? stats.team2AvgMargin.toFixed(1) : '0.0'}
+                </Text>
+              </Group>
+            </Group>
+          </Stack>
+        </Paper>
+      </Stack>
+
+      <Stack gap="xs">
+        <Text size="sm" fw={600} px="md">Match History ({totalMatches} match{totalMatches !== 1 ? 'es' : ''})</Text>
+        <MatchList matches={matches} hideH2H />
+      </Stack>
+    </Stack>
+  );
+};
+
+const TeamHeadToHeadSheet = (props: TeamHeadToHeadSheetProps) => {
+  return (
+    <Suspense fallback={<TeamHeadToHeadSkeleton />}>
+      <TeamHeadToHeadContent {...props} />
+    </Suspense>
+  );
+};
+
+export default TeamHeadToHeadSheet;
--- a/src/features/matches/components/team-head-to-head-skeleton.tsx
+++ b/src/features/matches/components/team-head-to-head-skeleton.tsx
@@ -0,0 +1,72 @@
+import { Stack, Skeleton, Group, Paper, Divider } from "@mantine/core";
+
+const TeamHeadToHeadSkeleton = () => {
+  return (
+    <Stack gap="md">
+      <Paper p="md" withBorder radius="md">
+        <Stack gap="sm">
+          <Group justify="center" gap="xs">
+            <Skeleton height={28} width={140} />
+            <Skeleton height={20} width={20} />
+            <Skeleton height={28} width={140} />
+          </Group>
+
+          <Group justify="center" gap="lg">
+            <Stack gap={0} align="center">
+              <Skeleton height={32} width={40} />
+              <Skeleton height={16} width={100} mt={4} />
+            </Stack>
+            <Skeleton height={24} width={10} />
+            <Stack gap={0} align="center">
+              <Skeleton height={32} width={40} />
+              <Skeleton height={16} width={100} mt={4} />
+            </Stack>
+          </Group>
+
+          <Group justify="center">
+            <Skeleton height={16} width={150} />
+          </Group>
+        </Stack>
+      </Paper>
+
+      <Stack gap={0}>
+        <Skeleton height={18} width={130} ml="md" mb="xs" />
+
+        <Paper withBorder>
+          <Stack gap={0}>
+            <Group justify="space-between" px="md" py="sm">
+              <Skeleton height={20} width={60} />
+              <Skeleton height={16} width={80} />
+              <Skeleton height={20} width={60} />
+            </Group>
+            <Divider />
+
+            <Group justify="space-between" px="md" py="sm">
+              <Skeleton height={20} width={60} />
+              <Skeleton height={16} width={100} />
+              <Skeleton height={20} width={60} />
+            </Group>
+            <Divider />
+
+            <Group justify="space-between" px="md" py="sm">
+              <Skeleton height={20} width={60} />
+              <Skeleton height={16} width={110} />
+              <Skeleton height={20} width={60} />
+            </Group>
+          </Stack>
+        </Paper>
+      </Stack>
+
+      <Stack gap="xs">
+        <Skeleton height={18} width={150} ml="md" />
+        <Stack gap="sm" p="md">
+          <Skeleton height={100} />
+          <Skeleton height={100} />
+          <Skeleton height={100} />
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default TeamHeadToHeadSkeleton;
--- a/src/features/matches/queries.ts
+++ b/src/features/matches/queries.ts
@@ -0,0 +1,30 @@
+import { useServerSuspenseQuery } from "@/lib/tanstack-query/hooks";
+import { getMatchesBetweenTeams, getMatchesBetweenPlayers } from "./server";
+
+export const matchKeys = {
+  headToHeadTeams: (team1Id: string, team2Id: string) => ['matches', 'headToHead', 'teams', team1Id, team2Id] as const,
+  headToHeadPlayers: (player1Id: string, player2Id: string) => ['matches', 'headToHead', 'players', player1Id, player2Id] as const,
+};
+
+export const matchQueries = {
+  headToHeadTeams: (team1Id: string, team2Id: string) => ({
+    queryKey: matchKeys.headToHeadTeams(team1Id, team2Id),
+    queryFn: () => getMatchesBetweenTeams({ data: { team1Id, team2Id } }),
+  }),
+  headToHeadPlayers: (player1Id: string, player2Id: string) => ({
+    queryKey: matchKeys.headToHeadPlayers(player1Id, player2Id),
+    queryFn: () => getMatchesBetweenPlayers({ data: { player1Id, player2Id } }),
+  }),
+};
+
+export const useTeamHeadToHead = (team1Id: string, team2Id: string, enabled = true) =>
+  useServerSuspenseQuery({
+    ...matchQueries.headToHeadTeams(team1Id, team2Id),
+    enabled,
+  });
+
+export const usePlayerHeadToHead = (player1Id: string, player2Id: string, enabled = true) =>
+  useServerSuspenseQuery({
+    ...matchQueries.headToHeadPlayers(player1Id, player2Id),
+    enabled,
+  });
--- a/src/features/matches/server.ts
+++ b/src/features/matches/server.ts
@@ -347,3 +347,35 @@ export const getMatchReactions = createServerFn()
      return reactions as Reaction[]
    })
  );
+
+const matchesBetweenPlayersSchema = z.object({
+  player1Id: z.string(),
+  player2Id: z.string(),
+});
+
+export const getMatchesBetweenPlayers = createServerFn()
+  .inputValidator(matchesBetweenPlayersSchema)
+  .middleware([superTokensFunctionMiddleware])
+  .handler(async ({ data: { player1Id, player2Id } }) =>
+    toServerResult(async () => {
+      logger.info("Getting matches between players", { player1Id, player2Id });
+      const matches = await pbAdmin.getMatchesBetweenPlayers(player1Id, player2Id);
+      return matches;
+    })
+  );
+
+const matchesBetweenTeamsSchema = z.object({
+  team1Id: z.string(),
+  team2Id: z.string(),
+});
+
+export const getMatchesBetweenTeams = createServerFn()
+  .inputValidator(matchesBetweenTeamsSchema)
+  .middleware([superTokensFunctionMiddleware])
+  .handler(async ({ data: { team1Id, team2Id } }) =>
+    toServerResult(async () => {
+      logger.info("Getting matches between teams", { team1Id, team2Id });
+      const matches = await pbAdmin.getMatchesBetweenTeams(team1Id, team2Id);
+      return matches;
+    })
+  );
--- a/src/features/players/components/league-head-to-head.tsx
+++ b/src/features/players/components/league-head-to-head.tsx
@@ -0,0 +1,276 @@
+import { Stack, Text, TextInput, Box, Paper, Group, Divider, Center, ActionIcon, Badge } from "@mantine/core";
+import { useState, useMemo } from "react";
+import { MagnifyingGlassIcon, XIcon, ArrowRightIcon } from "@phosphor-icons/react";
+import { useAllPlayerStats } from "../queries";
+import { useSheet } from "@/hooks/use-sheet";
+import Sheet from "@/components/sheet/sheet";
+import PlayerHeadToHeadSheet from "./player-head-to-head-sheet";
+import Avatar from "@/components/avatar";
+
+const LeagueHeadToHead = () => {
+  const [player1Id, setPlayer1Id] = useState<string | null>(null);
+  const [player2Id, setPlayer2Id] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+  const { data: allPlayerStats } = useAllPlayerStats();
+  const h2hSheet = useSheet();
+
+  const player1Name = useMemo(() => {
+    if (!player1Id || !allPlayerStats) return "";
+    return allPlayerStats.find((p) => p.player_id === player1Id)?.player_name || "";
+  }, [player1Id, allPlayerStats]);
+
+  const player2Name = useMemo(() => {
+    if (!player2Id || !allPlayerStats) return "";
+    return allPlayerStats.find((p) => p.player_id === player2Id)?.player_name || "";
+  }, [player2Id, allPlayerStats]);
+
+  const filteredPlayers = useMemo(() => {
+    if (!allPlayerStats) return [];
+
+    return allPlayerStats
+      .filter((stat) => {
+        if (player1Id && stat.player_id === player1Id) return false;
+        if (player2Id && stat.player_id === player2Id) return false;
+        return true;
+      })
+      .filter((stat) =>
+        stat.player_name.toLowerCase().includes(search.toLowerCase())
+      )
+      .sort((a, b) => b.matches - a.matches);
+  }, [allPlayerStats, player1Id, player2Id, search]);
+
+  const handlePlayerClick = (playerId: string) => {
+    if (!player1Id) {
+      setPlayer1Id(playerId);
+    } else if (!player2Id) {
+      setPlayer2Id(playerId);
+      h2hSheet.open();
+    }
+  };
+
+  const handleClearPlayer1 = () => {
+    setPlayer1Id(null);
+    if (player2Id) {
+      setPlayer1Id(player2Id);
+      setPlayer2Id(null);
+    }
+  };
+
+  const handleClearPlayer2 = () => {
+    setPlayer2Id(null);
+  };
+
+  const activeStep = !player1Id ? 1 : !player2Id ? 2 : 0;
+
+  return (
+    <>
+      <Stack gap="md">
+        <Paper px="md" pt="md" pb="sm" withBorder shadow="sm">
+          <Stack gap="xs">
+            <Group gap="xs" wrap="nowrap">
+              <Paper
+                p="sm"
+                withBorder
+                style={{
+                  flex: 1,
+                  minHeight: 70,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  position: "relative",
+                  borderWidth: 2,
+                  borderColor: activeStep === 1 ? "var(--mantine-primary-color-filled)" : undefined,
+                  backgroundColor: player1Id && activeStep !== 1 ? "var(--mantine-color-default-hover)" : undefined,
+                  cursor: player1Id && activeStep === 0 ? "pointer" : undefined,
+                  transition: "all 150ms ease",
+                }}
+                onClick={player1Id && activeStep === 0 ? handleClearPlayer1 : undefined}
+              >
+                {player1Id ? (
+                  <>
+                    <Stack gap={4} align="center" style={{ flex: 1 }}>
+                      <Avatar name={player1Name} size={36} />
+                      <Text size="xs" fw={600} ta="center" lineClamp={1}>
+                        {player1Name}
+                      </Text>
+                    </Stack>
+                    <ActionIcon
+                      variant="light"
+                      color="gray"
+                      size="xs"
+                      radius="xl"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleClearPlayer1();
+                      }}
+                      style={{ position: "absolute", top: 4, right: 4 }}
+                    >
+                      <XIcon size={10} />
+                    </ActionIcon>
+                  </>
+                ) : (
+                  <Stack gap={4} align="center">
+                    <Avatar size={36} />
+                    <Text size="xs" c="dimmed" fw={500}>
+                      Player 1
+                    </Text>
+                  </Stack>
+                )}
+              </Paper>
+
+              <Center>
+                <Text size="xl" fw={700} c="dimmed">
+                  VS
+                </Text>
+              </Center>
+
+              <Paper
+                p="sm"
+                withBorder
+                style={{
+                  flex: 1,
+                  minHeight: 70,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  position: "relative",
+                  borderWidth: 2,
+                  borderColor: activeStep === 2 ? "var(--mantine-primary-color-filled)" : undefined,
+                  backgroundColor: player2Id && activeStep !== 2 ? "var(--mantine-color-default-hover)" : undefined,
+                  cursor: player2Id && activeStep === 0 ? "pointer" : undefined,
+                  transition: "all 150ms ease",
+                }}
+                onClick={player2Id && activeStep === 0 ? handleClearPlayer2 : undefined}
+              >
+                {player2Id ? (
+                  <>
+                    <Stack gap={4} align="center" style={{ flex: 1 }}>
+                      <Avatar name={player2Name} size={36} />
+                      <Text size="xs" fw={600} ta="center" lineClamp={1}>
+                        {player2Name}
+                      </Text>
+                    </Stack>
+                    <ActionIcon
+                      variant="light"
+                      color="gray"
+                      size="xs"
+                      radius="xl"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleClearPlayer2();
+                      }}
+                      style={{ position: "absolute", top: 4, right: 4 }}
+                    >
+                      <XIcon size={10} />
+                    </ActionIcon>
+                  </>
+                ) : (
+                  <Stack gap={4} align="center">
+                    <Avatar size={36} />
+                    <Text size="xs" c="dimmed" fw={500}>
+                      Player 2
+                    </Text>
+                  </Stack>
+                )}
+              </Paper>
+            </Group>
+
+            {activeStep > 0 ? (
+              <Badge
+                variant="light"
+                size="sm"
+                radius="sm"
+                fullWidth
+                styles={{ label: { textTransform: "none" } }}
+              >
+                {activeStep === 1 && "Select first player"}
+                {activeStep === 2 && "Select second player"}
+              </Badge>
+            ) : (
+              <Group justify="center">
+                <Text
+                  size="xs"
+                  c="dimmed"
+                  style={{ cursor: "pointer" }}
+                  onClick={() => {
+                    setPlayer1Id(null);
+                    setPlayer2Id(null);
+                  }}
+                  td="underline"
+                >
+                  Clear both players
+                </Text>
+              </Group>
+            )}
+          </Stack>
+        </Paper>
+
+        <TextInput
+          placeholder="Search players"
+          value={search}
+          onChange={(e) => setSearch(e.currentTarget.value)}
+          leftSection={<MagnifyingGlassIcon size={16} />}
+          size="md"
+          px="md"
+        />
+
+        <Box px="md" pb="md">
+          <Paper withBorder>
+            {filteredPlayers.length === 0 && (
+              <Text size="sm" c="dimmed" ta="center" py="xl">
+                {search ? `No players found matching "${search}"` : "No players available"}
+              </Text>
+            )}
+
+            {filteredPlayers.map((player, index) => (
+              <Box key={player.player_id}>
+                <Group
+                  p="md"
+                  gap="sm"
+                  wrap="nowrap"
+                  style={{
+                    cursor: "pointer",
+                    transition: "background-color 150ms ease",
+                  }}
+                  onClick={() => handlePlayerClick(player.player_id)}
+                  styles={{
+                    root: {
+                      "&:hover": {
+                        backgroundColor: "var(--mantine-color-default-hover)",
+                      },
+                    },
+                  }}
+                >
+                  <Avatar name={player.player_name} size={44} />
+                  <Box style={{ flex: 1, minWidth: 0 }}>
+                    <Text size="sm" fw={600} truncate>
+                      {player.player_name}
+                    </Text>
+                  </Box>
+                  <ActionIcon variant="subtle" color="gray" size="lg" radius="xl">
+                    <ArrowRightIcon size={18} />
+                  </ActionIcon>
+                </Group>
+                {index < filteredPlayers.length - 1 && <Divider />}
+              </Box>
+            ))}
+          </Paper>
+        </Box>
+      </Stack>
+
+      {player1Id && player2Id && (
+        <Sheet title="Head to Head" {...h2hSheet.props}>
+          <PlayerHeadToHeadSheet
+            player1Id={player1Id}
+            player1Name={player1Name}
+            player2Id={player2Id}
+            player2Name={player2Name}
+            isOpen={h2hSheet.props.opened}
+          />
+        </Sheet>
+      )}
+    </>
+  );
+};
+
+export default LeagueHeadToHead;
--- a/src/features/players/components/player-head-to-head-sheet.tsx
+++ b/src/features/players/components/player-head-to-head-sheet.tsx
@@ -0,0 +1,279 @@
+import { Stack, Text, Group, Box, Divider, Paper } from "@mantine/core";
+import { usePlayerHeadToHead } from "@/features/matches/queries";
+import { useMemo, useEffect, useState, Suspense } from "react";
+import { CrownIcon } from "@phosphor-icons/react";
+import MatchList from "@/features/matches/components/match-list";
+import PlayerHeadToHeadSkeleton from "./player-head-to-head-skeleton";
+
+interface PlayerHeadToHeadSheetProps {
+  player1Id: string;
+  player1Name: string;
+  player2Id: string;
+  player2Name: string;
+  isOpen?: boolean;
+}
+
+const PlayerHeadToHeadContent = ({
+  player1Id,
+  player1Name,
+  player2Id,
+  player2Name,
+  isOpen = true,
+}: PlayerHeadToHeadSheetProps) => {
+  const [shouldFetch, setShouldFetch] = useState(false);
+
+  useEffect(() => {
+    if (isOpen && !shouldFetch) {
+      setShouldFetch(true);
+    }
+  }, [isOpen, shouldFetch]);
+
+  const { data: matches, isLoading } = usePlayerHeadToHead(player1Id, player2Id, shouldFetch);
+
+  const stats = useMemo(() => {
+    if (!matches || matches.length === 0) {
+      return {
+        player1Wins: 0,
+        player2Wins: 0,
+        player1CupsFor: 0,
+        player2CupsFor: 0,
+        player1CupsAgainst: 0,
+        player2CupsAgainst: 0,
+        player1AvgMargin: 0,
+        player2AvgMargin: 0,
+      };
+    }
+
+    let player1Wins = 0;
+    let player2Wins = 0;
+    let player1CupsFor = 0;
+    let player2CupsFor = 0;
+    let player1CupsAgainst = 0;
+    let player2CupsAgainst = 0;
+    let player1TotalWinMargin = 0;
+    let player2TotalWinMargin = 0;
+
+    matches.forEach((match) => {
+      const isPlayer1Home = match.home?.players?.some((p) => p.id === player1Id);
+      const player1Cups = isPlayer1Home ? match.home_cups : match.away_cups;
+      const player2Cups = isPlayer1Home ? match.away_cups : match.home_cups;
+
+      if (player1Cups > player2Cups) {
+        player1Wins++;
+        player1TotalWinMargin += (player1Cups - player2Cups);
+      } else if (player2Cups > player1Cups) {
+        player2Wins++;
+        player2TotalWinMargin += (player2Cups - player1Cups);
+      }
+
+      player1CupsFor += player1Cups;
+      player2CupsFor += player2Cups;
+      player1CupsAgainst += player2Cups;
+      player2CupsAgainst += player1Cups;
+    });
+
+    const player1AvgMargin =
+      player1Wins > 0 ? player1TotalWinMargin / player1Wins : 0;
+    const player2AvgMargin =
+      player2Wins > 0 ? player2TotalWinMargin / player2Wins : 0;
+
+    return {
+      player1Wins,
+      player2Wins,
+      player1CupsFor,
+      player2CupsFor,
+      player1CupsAgainst,
+      player2CupsAgainst,
+      player1AvgMargin,
+      player2AvgMargin,
+    };
+  }, [matches, player1Id]);
+
+  if (isLoading) {
+    return (
+      <Stack p="md" gap="md">
+        <Text size="sm" c="dimmed" ta="center">
+          Loading...
+        </Text>
+      </Stack>
+    );
+  }
+
+  if (!matches || matches.length === 0) {
+    return (
+      <Stack p="md" gap="md">
+        <Text size="sm" c="dimmed" ta="center">
+          These players have not faced each other yet.
+        </Text>
+      </Stack>
+    );
+  }
+
+  const totalMatches = stats.player1Wins + stats.player2Wins;
+  const leader =
+    stats.player1Wins > stats.player2Wins
+      ? player1Name
+      : stats.player2Wins > stats.player1Wins
+      ? player2Name
+      : null;
+
+  return (
+    <Stack gap="md">
+      <Paper p="md" withBorder radius="md">
+        <Stack gap="sm">
+          <Group justify="center" gap="xs">
+            <Text size="lg" fw={700}>
+              {player1Name}
+            </Text>
+            <Text size="sm" c="dimmed">
+              vs
+            </Text>
+            <Text size="lg" fw={700}>
+              {player2Name}
+            </Text>
+          </Group>
+
+          <Group justify="center" gap="lg">
+            <Stack gap={0} align="center">
+              <Text size="xl" fw={700}>
+                {stats.player1Wins}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {player1Name}
+              </Text>
+            </Stack>
+            <Text size="md" c="dimmed">
+              -
+            </Text>
+            <Stack gap={0} align="center">
+              <Text size="xl" fw={700}>
+                {stats.player2Wins}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {player2Name}
+              </Text>
+            </Stack>
+          </Group>
+
+          {leader && (
+            <Group justify="center" gap="xs">
+              <CrownIcon size={16} weight="fill" color="gold" />
+              <Text size="xs" c="dimmed">
+                {leader} leads the series
+              </Text>
+            </Group>
+          )}
+
+          {!leader && totalMatches > 0 && (
+            <Text size="xs" c="dimmed" ta="center">
+              Series is tied
+            </Text>
+          )}
+        </Stack>
+      </Paper>
+
+      <Stack gap={0}>
+        <Text size="sm" fw={600} px="md" mb="xs">
+          Stats Comparison
+        </Text>
+
+        <Paper withBorder>
+          <Stack gap={0}>
+            <Group justify="space-between" px="md" py="sm">
+              <Group gap="xs">
+                <Text size="sm" fw={600}>
+                  {stats.player1CupsFor}
+                </Text>
+                <Text size="xs" c="dimmed">
+                  cups
+                </Text>
+              </Group>
+              <Text size="xs" fw={500}>
+                Total Cups
+              </Text>
+              <Group gap="xs">
+                <Text size="xs" c="dimmed">
+                  cups
+                </Text>
+                <Text size="sm" fw={600}>
+                  {stats.player2CupsFor}
+                </Text>
+              </Group>
+            </Group>
+            <Divider />
+
+            <Group justify="space-between" px="md" py="sm">
+              <Group gap="xs">
+                <Text size="sm" fw={600}>
+                  {totalMatches > 0
+                    ? (stats.player1CupsFor / totalMatches).toFixed(1)
+                    : "0.0"}
+                </Text>
+                <Text size="xs" c="dimmed">
+                  avg
+                </Text>
+              </Group>
+              <Text size="xs" fw={500}>
+                Avg Cups/Match
+              </Text>
+              <Group gap="xs">
+                <Text size="xs" c="dimmed">
+                  avg
+                </Text>
+                <Text size="sm" fw={600}>
+                  {totalMatches > 0
+                    ? (stats.player2CupsFor / totalMatches).toFixed(1)
+                    : "0.0"}
+                </Text>
+              </Group>
+            </Group>
+            <Divider />
+
+            <Group justify="space-between" px="md" py="sm">
+              <Group gap="xs">
+                <Text size="sm" fw={600}>
+                  {!isNaN(stats.player1AvgMargin)
+                    ? stats.player1AvgMargin.toFixed(1)
+                    : "0.0"}
+                </Text>
+                <Text size="xs" c="dimmed">
+                  margin
+                </Text>
+              </Group>
+              <Text size="xs" fw={500}>
+                Avg Win Margin
+              </Text>
+              <Group gap="xs">
+                <Text size="xs" c="dimmed">
+                  margin
+                </Text>
+                <Text size="sm" fw={600}>
+                  {!isNaN(stats.player2AvgMargin)
+                    ? stats.player2AvgMargin.toFixed(1)
+                    : "0.0"}
+                </Text>
+              </Group>
+            </Group>
+          </Stack>
+        </Paper>
+      </Stack>
+
+      <Stack gap="xs">
+        <Text size="sm" fw={600} px="md">
+          Match History ({totalMatches})
+        </Text>
+        <MatchList matches={matches} hideH2H />
+      </Stack>
+    </Stack>
+  );
+};
+
+const PlayerHeadToHeadSheet = (props: PlayerHeadToHeadSheetProps) => {
+  return (
+    <Suspense fallback={<PlayerHeadToHeadSkeleton />}>
+      <PlayerHeadToHeadContent {...props} />
+    </Suspense>
+  );
+};
+
+export default PlayerHeadToHeadSheet;
--- a/src/features/players/components/player-head-to-head-skeleton.tsx
+++ b/src/features/players/components/player-head-to-head-skeleton.tsx
@@ -0,0 +1,72 @@
+import { Stack, Skeleton, Group, Paper, Divider } from "@mantine/core";
+
+const PlayerHeadToHeadSkeleton = () => {
+  return (
+    <Stack gap="md">
+      <Paper p="md" withBorder radius="md">
+        <Stack gap="sm">
+          <Group justify="center" gap="xs">
+            <Skeleton height={28} width={120} />
+            <Skeleton height={20} width={20} />
+            <Skeleton height={28} width={120} />
+          </Group>
+
+          <Group justify="center" gap="lg">
+            <Stack gap={0} align="center">
+              <Skeleton height={32} width={40} />
+              <Skeleton height={16} width={80} mt={4} />
+            </Stack>
+            <Skeleton height={24} width={10} />
+            <Stack gap={0} align="center">
+              <Skeleton height={32} width={40} />
+              <Skeleton height={16} width={80} mt={4} />
+            </Stack>
+          </Group>
+
+          <Group justify="center">
+            <Skeleton height={16} width={150} />
+          </Group>
+        </Stack>
+      </Paper>
+
+      <Stack gap={0}>
+        <Skeleton height={18} width={130} ml="md" mb="xs" />
+
+        <Paper withBorder>
+          <Stack gap={0}>
+            <Group justify="space-between" px="md" py="sm">
+              <Skeleton height={20} width={60} />
+              <Skeleton height={16} width={80} />
+              <Skeleton height={20} width={60} />
+            </Group>
+            <Divider />
+
+            <Group justify="space-between" px="md" py="sm">
+              <Skeleton height={20} width={60} />
+              <Skeleton height={16} width={100} />
+              <Skeleton height={20} width={60} />
+            </Group>
+            <Divider />
+
+            <Group justify="space-between" px="md" py="sm">
+              <Skeleton height={20} width={60} />
+              <Skeleton height={16} width={110} />
+              <Skeleton height={20} width={60} />
+            </Group>
+          </Stack>
+        </Paper>
+      </Stack>
+
+      <Stack gap="xs">
+        <Skeleton height={18} width={130} ml="md" />
+        <Stack gap="sm" p="md">
+          <Skeleton height={100} />
+          <Skeleton height={100} />
+          <Skeleton height={100} />
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default PlayerHeadToHeadSkeleton;
--- a/src/features/players/components/player-stats-table-skeleton.tsx
+++ b/src/features/players/components/player-stats-table-skeleton.tsx
@@ -5,68 +5,86 @@ import {
  Container,
  Divider,
  Skeleton,
+  ScrollArea,
 } from "@mantine/core";

 const PlayerListItemSkeleton = () => {
  return (
    <Box p="md">
-      <Group justify="space-between" align="center" w="100%">
-        <Group gap="sm" align="center">
-          <Skeleton height={45} circle />
-          <Stack gap={2}>
-            <Group gap='xs'>
-              <Skeleton height={16} width={120} />
-              <Skeleton height={12} width={60} />
-              <Skeleton height={12} width={80} />
-            </Group>
-            <Group gap="md" ta="center">
-              <Stack gap={0}>
+      <Group gap="sm" align="center" w="100%" wrap="nowrap" style={{ overflow: 'hidden' }}>
+        <Skeleton height={40} width={40} circle style={{ flexShrink: 0 }} />
+        <Stack gap={2} style={{ flexGrow: 1, overflow: 'hidden', minWidth: 0 }}>
+          <Group gap='xs'>
+            <Skeleton height={16} width={120} />
+            <Skeleton height={12} width={30} />
+            <Skeleton height={12} width={30} />
+          </Group>
+
+          <ScrollArea type="never">
+            <Group gap='xs' wrap="nowrap">
+              <Stack gap={0} style={{ flexShrink: 0 }}>
                <Skeleton height={10} width={25} />
                <Skeleton height={10} width={30} />
              </Stack>
-              <Stack gap={0}>
+              <Stack gap={0} style={{ flexShrink: 0 }}>
                <Skeleton height={10} width={10} />
                <Skeleton height={10} width={15} />
              </Stack>
-              <Stack gap={0}>
+              <Stack gap={0} style={{ flexShrink: 0 }}>
                <Skeleton height={10} width={10} />
                <Skeleton height={10} width={15} />
              </Stack>
-              <Stack gap={0}>
+              <Stack gap={0} style={{ flexShrink: 0 }}>
                <Skeleton height={10} width={20} />
                <Skeleton height={10} width={25} />
              </Stack>
-              <Stack gap={0}>
+              <Stack gap={0} style={{ flexShrink: 0 }}>
                <Skeleton height={10} width={25} />
                <Skeleton height={10} width={20} />
              </Stack>
-              <Stack gap={0}>
+              <Stack gap={0} style={{ flexShrink: 0 }}>
+                <Skeleton height={10} width={25} />
+                <Skeleton height={10} width={20} />
+              </Stack>
+              <Stack gap={0} style={{ flexShrink: 0 }}>
+                <Skeleton height={10} width={30} />
+                <Skeleton height={10} width={25} />
+              </Stack>
+              <Stack gap={0} style={{ flexShrink: 0 }}>
+                <Skeleton height={10} width={30} />
+                <Skeleton height={10} width={25} />
+              </Stack>
+              <Stack gap={0} style={{ flexShrink: 0 }}>
                <Skeleton height={10} width={15} />
                <Skeleton height={10} width={25} />
              </Stack>
-              <Stack gap={0}>
+              <Stack gap={0} style={{ flexShrink: 0 }}>
                <Skeleton height={10} width={15} />
                <Skeleton height={10} width={25} />
              </Stack>
            </Group>
-          </Stack>
-        </Group>
+          </ScrollArea>
+        </Stack>
      </Group>
    </Box>
  );
 };

-const PlayerStatsTableSkeleton = () => {
+interface PlayerStatsTableSkeletonProps {
+  hideFilters?: boolean;
+}
+
+const PlayerStatsTableSkeleton = ({ hideFilters = false }: PlayerStatsTableSkeletonProps) => {
  return (
    <Container size="100%" px={0}>
      <Stack gap="xs">
-        <Box px="md" pb="xs">
+        <Skeleton mx="md" height={12} width={100} />
+        <Box px="md" pb={4}>
          <Skeleton height={40} />
        </Box>

-        <Group px="md" justify="space-between" align="center">
-          <Skeleton height={12} width={100} />
-          <Group gap="xs">
+        <Group justify="space-between" align="center" w='100%'>
+          <Group ml="auto" gap="xs">
            <Skeleton height={12} width={200} />
          </Group>
        </Group>
--- a/src/features/players/components/player-stats-table.tsx
+++ b/src/features/players/components/player-stats-table.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback, memo } from "react";
+import { useState, useMemo, useCallback, memo, useRef, useEffect } from "react";
 import {
  Text,
  TextInput,
@@ -12,6 +12,7 @@ import {
  UnstyledButton,
  Popover,
  ActionIcon,
+  ScrollArea,
 } from "@mantine/core";
 import {
  MagnifyingGlassIcon,
@@ -37,9 +38,41 @@ interface PlayerListItemProps {
  stat: PlayerStats;
  onPlayerClick: (playerId: string) => void;
  mmr: number;
+  onRegisterViewport: (viewport: HTMLDivElement) => void;
+  onUnregisterViewport: (viewport: HTMLDivElement) => void;
 }

-const PlayerListItem = memo(({ stat, onPlayerClick, mmr }: PlayerListItemProps) => {
+interface StatCellProps {
+  label: string;
+  value: string | number;
+}
+
+const StatCell = memo(({ label, value }: StatCellProps) => (
+  <Stack justify="center" gap={0} style={{ textAlign: 'center', flexShrink: 0 }}>
+    <Text size="xs" c="dimmed" fw={700}>
+      {label}
+    </Text>
+    <Text size="xs" c="dimmed">
+      {value}
+    </Text>
+  </Stack>
+));
+
+const PlayerListItem = memo(({ stat, onPlayerClick, mmr, onRegisterViewport, onUnregisterViewport }: PlayerListItemProps) => {
+  const viewportRef = useRef<HTMLDivElement>(null);
+
+  const avg_cups_against = useMemo(() => stat.total_cups_against / stat.matches || 0, [stat.total_cups_against, stat.matches]);
+
+  useEffect(() => {
+    if (viewportRef.current) {
+      onRegisterViewport(viewportRef.current);
+      return () => {
+        if (viewportRef.current) {
+          onUnregisterViewport(viewportRef.current);
+        }
+      };
+    }
+  }, [onRegisterViewport, onUnregisterViewport]);

  return (
    <>
@@ -59,92 +92,62 @@ const PlayerListItem = memo(({ stat, onPlayerClick, mmr }: PlayerListItemProps)
          },
        }}
      >
-        <Group justify="space-between" align="center" w="100%">
-          <Group gap="sm" align="center">
-            <Avatar name={stat.player_name} size={40} />
-            <Stack gap={2}>
-              <Group gap='xs'>
-                <Text size="sm" fw={600}>
-                  {stat.player_name}
-                </Text>
-                <Text size="xs" c="dimmed" ta="right">
-                  {stat.matches} matches
-                </Text>
-                <Text size="xs" c="dimmed" ta="right">
-                  {stat.tournaments} tournaments
-                </Text>
+        <Group p={0} gap="sm" align="center" w="100%" wrap="nowrap" style={{ overflow: 'hidden' }}>
+          <Avatar name={stat.player_name} size={40} style={{ flexShrink: 0 }} />
+          <Stack gap={2} style={{ flexGrow: 1, overflow: 'hidden', minWidth: 0 }}>
+            <Group gap='xs'>
+              <Text size="sm" fw={600}>
+                {stat.player_name}
+              </Text>
+              <Text size="xs" c="dimmed" ta="right">
+                {stat.matches}
+                <Text span fw={800}>M</Text>
+              </Text>
+              <Text size="xs" c="dimmed" ta="right">
+                {stat.tournaments}
+                <Text span fw={800}>T</Text>
+              </Text>
+            </Group>
+
+            <ScrollArea
+              viewportRef={viewportRef}
+              type="never"
+              styles={{
+                viewport: {
+                  WebkitOverflowScrolling: 'touch',
+                  scrollBehavior: 'auto',
+                  willChange: 'scroll-position',
+                  transform: 'translateZ(0)',
+                  backfaceVisibility: 'hidden',
+                },
+              }}
+            >
+              <Group gap='xs' wrap="nowrap">
+                <StatCell label="MMR" value={mmr.toFixed(1)} />
+                <StatCell label="W" value={stat.wins} />
+                <StatCell label="L" value={stat.losses} />
+                <StatCell label="W%" value={`${stat.win_percentage.toFixed(1)}%`} />
+                <StatCell label="AWM" value={stat.margin_of_victory?.toFixed(1) || 0} />
+                <StatCell label="ALM" value={stat.margin_of_loss?.toFixed(1) || 0} />
+                <StatCell label="AC" value={stat.avg_cups_per_match.toFixed(1)} />
+                <StatCell label="ACA" value={avg_cups_against?.toFixed(1) || 0} />
+                <StatCell label="CF" value={stat.total_cups_made} />
+                <StatCell label="CA" value={stat.total_cups_against} />
              </Group>
-              <Group gap="md" ta="center">
-                <Stack gap={0}>
-                  <Text size="xs" c="dimmed" fw={700}>
-                    MMR
-                  </Text>
-                  <Text size="xs" c="dimmed">
-                    {mmr.toFixed(1)}
-                  </Text>
-                </Stack>
-                <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.win_percentage.toFixed(1)}%
-                  </Text>
-                </Stack>
-                <Stack gap={0}>
-                  <Text size="xs" c="dimmed" fw={700}>
-                    AVG
-                  </Text>
-                  <Text size="xs" c="dimmed">
-                    {stat.avg_cups_per_match.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>
-          
+            </ScrollArea>
+          </Stack>
        </Group>
      </UnstyledButton>
    </>
  );
 });

-PlayerListItem.displayName = 'PlayerListItem';
+interface PlayerStatsTableProps {
+  viewType?: 'all' | 'mainline' | 'regional';
+}

-const PlayerStatsTable = () => {
-  const { data: playerStats } = useAllPlayerStats();
+const PlayerStatsTable = ({ viewType = 'all' }: PlayerStatsTableProps) => {
+  const { data: playerStats } = useAllPlayerStats(viewType);
  const navigate = useNavigate();
  const [search, setSearch] = useState("");
  const [sortConfig, setSortConfig] = useState<SortConfig>({
@@ -152,6 +155,64 @@ const PlayerStatsTable = () => {
    direction: "desc",
  });

+  const viewportsRef = useRef<Set<HTMLDivElement>>(new Set());
+  const scrollHandlersRef = useRef<Map<HTMLDivElement, (e: Event) => void>>(new Map());
+  const scrollLeaderRef = useRef<HTMLDivElement | null>(null);
+  const scrollTimeoutRef = useRef<number | null>(null);
+
+  const handleRegisterViewport = useCallback((viewport: HTMLDivElement) => {
+    viewportsRef.current.add(viewport);
+
+    const handleScrollStart = () => {
+      scrollLeaderRef.current = viewport;
+    };
+
+    const handleScroll = (e: Event) => {
+      const target = e.target as HTMLDivElement;
+
+      if (!scrollLeaderRef.current) {
+        scrollLeaderRef.current = target;
+      }
+
+      if (scrollLeaderRef.current !== target) {
+        return;
+      }
+
+      const scrollLeft = target.scrollLeft;
+
+      viewportsRef.current.forEach((vp) => {
+        if (vp !== target && Math.abs(vp.scrollLeft - scrollLeft) > 0.5) {
+          vp.scrollLeft = scrollLeft;
+        }
+      });
+
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+      scrollTimeoutRef.current = window.setTimeout(() => {
+        scrollLeaderRef.current = null;
+      }, 150);
+    };
+
+    viewport.addEventListener('touchstart', handleScrollStart, { passive: true });
+    viewport.addEventListener('mousedown', handleScrollStart, { passive: true });
+    viewport.addEventListener('scroll', handleScroll, { passive: true });
+
+    scrollHandlersRef.current.set(viewport, handleScroll);
+  }, []);
+
+  const handleUnregisterViewport = useCallback((viewport: HTMLDivElement) => {
+    viewportsRef.current.delete(viewport);
+
+    const handler = scrollHandlersRef.current.get(viewport);
+    if (handler) {
+      viewport.removeEventListener('scroll', handler);
+      viewport.removeEventListener('touchstart', handler);
+      viewport.removeEventListener('mousedown', handler);
+      scrollHandlersRef.current.delete(viewport);
+    }
+  }, []);
+
  const calculateMMR = (stat: PlayerStats): number => {
    if (stat.matches === 0) return 0;

@@ -235,22 +296,23 @@ const PlayerStatsTable = () => {

  if (playerStats.length === 0) {
    return (
-      <Container px={0} size="md">
-        <Stack align="center" gap="md" py="xl">
-          <ThemeIcon size="xl" variant="light" radius="md">
-            <ChartBarIcon size={32} />
-          </ThemeIcon>
-          <Title order={3} c="dimmed">
-            No Stats Available
-          </Title>
-        </Stack>
-      </Container>
+      <Stack align="center" gap="md" py="xl">
+        <ThemeIcon size="xl" variant="light" radius="md">
+          <ChartBarIcon size={32} />
+        </ThemeIcon>
+        <Title order={3} c="dimmed">
+          No Stats Available
+        </Title>
+      </Stack>
    );
  }

  return (
    <Container size="100%" px={0}>
      <Stack gap="xs">
+        <Text px="md" size="10px" lh={0} c="dimmed">
+          Showing {filteredAndSortedStats.length} of {playerStats.length} players
+        </Text>
        <TextInput
          placeholder="Search players"
          value={search}
@@ -261,11 +323,9 @@ const PlayerStatsTable = () => {
        />

        <Group px="md" justify="space-between" align="center">
-          <Text size="10px" lh={0} c="dimmed">
-            {filteredAndSortedStats.length} of {playerStats.length} players
-          </Text>
-          <Group gap="xs">
-            <Text size="xs" c="dimmed">Sort:</Text>
+          <Group gap="xs" w="100%">
+            <div></div>
+            <Text ml='auto' size="xs" c="dimmed">Sort:</Text>
            <UnstyledButton
              onClick={() => handleSort("mmr")}
              style={{ display: "flex", alignItems: "center", gap: 4 }}
@@ -303,6 +363,48 @@ const PlayerStatsTable = () => {
              </Popover.Target>
              <Popover.Dropdown>
                <Box maw={280}>
+                  <Text size="sm" fw={500} mb="xs">
+                    Stat Abbreviations:
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>M:</strong> Matches
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>T:</strong> Tournaments
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>MMR:</strong> Matchmaking Rating
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>W:</strong> Wins
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>L:</strong> Losses
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>W%:</strong> Win Percentage
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>AWM:</strong> Average Win Margin
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>ALM:</strong> Average Loss Margin
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>AC:</strong> Average Cups Per Match
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>ACA:</strong> Average Cups Against
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>CF:</strong> Cups For
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>CA:</strong> Cups Against
+                  </Text>
+
+                  <Divider my="sm" />
+
                  <Text size="sm" fw={500} mb="xs">
                    MMR Calculation:
                  </Text>
@@ -337,6 +439,8 @@ const PlayerStatsTable = () => {
                stat={stat}
                onPlayerClick={handlePlayerClick}
                mmr={stat.mmr}
+                onRegisterViewport={handleRegisterViewport}
+                onUnregisterViewport={handleUnregisterViewport}
              />
              {index < filteredAndSortedStats.length - 1 && <Divider />}
            </Box>
--- a/src/features/players/components/players-activity-table.tsx
+++ b/src/features/players/components/players-activity-table.tsx
@@ -0,0 +1,118 @@
+import { memo } from "react";
+import {
+  Text,
+  Stack,
+  Group,
+  Box,
+  Container,
+  Divider,
+  UnstyledButton,
+} from "@mantine/core";
+import { Player } from "../types";
+import { usePlayersActivity } from "../queries";
+
+interface PlayerActivityItemProps {
+  player: Player;
+}
+
+const PlayerActivityItem = memo(({ player }: PlayerActivityItemProps) => {
+  const playerName = player.first_name && player.last_name
+    ? `${player.first_name} ${player.last_name}`
+    : player.first_name || player.last_name || "Unknown Player";
+
+  const formatDate = (dateStr?: string) => {
+    if (!dateStr) return "Never";
+    const date = new Date(dateStr);
+    return date.toLocaleString();
+  };
+
+  const getTimeSince = (dateStr?: string) => {
+    if (!dateStr) return "Never active";
+    const date = new Date(dateStr);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMins / 60);
+    const diffDays = Math.floor(diffHours / 24);
+
+    if (diffMins < 1) return "Just now";
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays < 30) return `${diffDays}d ago`;
+    return formatDate(dateStr);
+  };
+
+  const isActive = player.last_activity &&
+    (new Date().getTime() - new Date(player.last_activity).getTime()) < 5 * 60 * 1000;
+
+  return (
+    <Box
+      w="100%"
+      p="md"
+      style={{
+        borderRadius: 0,
+      }}
+    >
+      <Group justify="space-between" align="flex-start" w="100%">
+        <Stack gap={4} flex={1}>
+          <Group gap="xs">
+            <Text size="sm" fw={600}>
+              {playerName}
+            </Text>
+            {isActive && (
+              <Box
+                w={8}
+                h={8}
+                style={{
+                  borderRadius: "50%",
+                  backgroundColor: "var(--mantine-color-green-6)",
+                }}
+              />
+            )}
+          </Group>
+          <Group gap="md">
+            <Text size="xs" c="dimmed">
+              {getTimeSince(player.last_activity)}
+            </Text>
+            {player.last_activity && (
+              <Text size="xs" c="dimmed">
+                {formatDate(player.last_activity)}
+              </Text>
+            )}
+          </Group>
+        </Stack>
+      </Group>
+    </Box>
+  );
+});
+
+export const PlayersActivityTable = () => {
+  const { data: players } = usePlayersActivity();
+
+  return (
+    <Container size="100%" px={0}>
+      <Stack gap="xs">
+        <Group px="md" justify="space-between" align="center">
+          <Text size="10px" lh={0} c="dimmed">
+            {players.length} players
+          </Text>
+        </Group>
+
+        <Stack gap={0}>
+          {players.map((player: Player, index: number) => (
+            <Box key={player.id}>
+              <PlayerActivityItem player={player} />
+              {index < players.length - 1 && <Divider />}
+            </Box>
+          ))}
+        </Stack>
+
+        {players.length === 0 && (
+          <Text ta="center" c="dimmed" py="xl">
+            No player activity found
+          </Text>
+        )}
+      </Stack>
+    </Container>
+  );
+};
--- a/src/features/players/components/profile/header.tsx
+++ b/src/features/players/components/profile/header.tsx
@@ -1,23 +1,29 @@
 import Sheet from "@/components/sheet/sheet";
 import { useAuth } from "@/contexts/auth-context";
-import { Flex, Title, ActionIcon } from "@mantine/core";
-import { PencilIcon } from "@phosphor-icons/react";
+import { Flex, Title, ActionIcon, Stack, Button, Box } from "@mantine/core";
+import { PencilIcon, FootballHelmetIcon } from "@phosphor-icons/react";
 import { useMemo } from "react";
 import NameUpdateForm from "./name-form";
 import Avatar from "@/components/avatar";
 import { useSheet } from "@/hooks/use-sheet";
 import { Player } from "../../types";
+import PlayerHeadToHeadSheet from "../player-head-to-head-sheet";

 interface HeaderProps {
  player: Player;
 }

 const Header = ({ player }: HeaderProps) => {
-  const sheet = useSheet();
+  const nameSheet = useSheet();
+  const h2hSheet = useSheet();
  const { user: authUser } = useAuth();

  const owner = useMemo(() => authUser?.id === player.id, [authUser?.id, player.id]);
  const name = useMemo(() => `${player.first_name} ${player.last_name}`, [player.first_name, player.last_name]);
+  const authUserName = useMemo(() => {
+    if (!authUser) return "";
+    return `${authUser.first_name} ${authUser.last_name}`;
+  }, [authUser]);

  const fontSize = useMemo(() => {
    const baseSize = 28;
@@ -33,19 +39,62 @@ const Header = ({ player }: HeaderProps) => {

  return (
    <>
-      <Flex h="15dvh" px='xl' w='100%' align='self-end' gap='md'>
-        <Avatar name={name} size={100} />
-        <Flex align='center' justify='center' gap={4} pb={20} w='100%'>
-          <Title ta='center' style={{ fontSize, lineHeight: 1.2 }}>{name}</Title>
-          <ActionIcon display={owner ? 'block' : 'none'} radius='xl' variant='subtle' onClick={sheet.open}>
-            <PencilIcon size={20} />
-          </ActionIcon>
+      <Stack gap="sm" align="center" pt="md">
+        <Flex h="15dvh" px='xl' w='100%' align='self-end' gap='md'>
+          <Avatar name={name} size={100} />
+          <Flex align='center' justify='center' gap={4} pb={20} w='100%'>
+            <Title ta='center' style={{ fontSize, lineHeight: 1.2 }}>{name}</Title>
+            <ActionIcon display={owner ? 'block' : 'none'} radius='xl' variant='subtle' onClick={nameSheet.open}>
+              <PencilIcon size={20} />
+            </ActionIcon>
+            <ActionIcon
+              variant="subtle"
+              size="sm"
+              radius="xl"
+              onClick={h2hSheet.open}
+              w={40}
+              display={!owner ? 'block' : 'none'}
+            >
+              <Box style={{ position: 'relative', width: 27.5, height: 16 }}>
+                <FootballHelmetIcon
+                  size={14}
+                  style={{
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                    transform: 'rotate(25deg)'
+                  }}
+                />
+                <FootballHelmetIcon
+                  size={14}
+                  style={{
+                    position: 'absolute',
+                    right: 0,
+                    top: 0,
+                    transform: 'scaleX(-1) rotate(25deg)'
+                  }}
+                />
+              </Box>
+            </ActionIcon>
+          </Flex>
        </Flex>
-      </Flex>
+      </Stack>

-      <Sheet title='Update Name' {...sheet.props}>
-        <NameUpdateForm player={player} toggle={sheet.toggle} />
+      <Sheet title='Update Name' {...nameSheet.props}>
+        <NameUpdateForm player={player} toggle={nameSheet.toggle} />
      </Sheet>
+
+      {!owner && authUser && (
+        <Sheet title="Head to Head" {...h2hSheet.props}>
+          <PlayerHeadToHeadSheet
+            player1Id={authUser.id}
+            player1Name={authUserName}
+            player2Id={player.id}
+            player2Name={name}
+            isOpen={h2hSheet.props.opened}
+          />
+        </Sheet>
+      )}
    </>
  )
 };
--- a/src/features/players/components/profile/index.tsx
+++ b/src/features/players/components/profile/index.tsx
@@ -1,10 +1,10 @@
-import { Box, Stack, Text, Divider } from "@mantine/core";
-import { Suspense } from "react";
+import { Box, Stack, Text, Divider, Group, Button } from "@mantine/core";
+import { Suspense, useState, useDeferredValue } from "react";
 import Header from "./header";
 import SwipeableTabs from "@/components/swipeable-tabs";
 import { usePlayer, usePlayerMatches, usePlayerStats } from "../../queries";
 import TeamList from "@/features/teams/components/team-list";
-import StatsOverview from "@/components/stats-overview";
+import StatsOverview, { StatsSkeleton } from "@/components/stats-overview";
 import MatchList from "@/features/matches/components/match-list";
 import BadgeShowcase from "@/features/badges/components/badge-showcase";
 import BadgeShowcaseSkeleton from "@/features/badges/components/badge-showcase-skeleton";
@@ -13,10 +13,38 @@ interface ProfileProps {
  id: string;
 }

+const StatsWithFilter = ({ id }: { id: string }) => {
+  const [viewType, setViewType] = useState<'all' | 'mainline' | 'regional'>('all');
+  const deferredViewType = useDeferredValue(viewType);
+  const isStale = viewType !== deferredViewType;
+
+  return (
+    <Stack>
+      <Group gap="xs" px="md" justify="space-between" align="center">
+        <Text size="md" fw={700}>Statistics</Text>
+        <Group gap="xs">
+          <Button variant={viewType === 'all' ? 'filled' : 'light'} size="compact-xs" onClick={() => setViewType('all')}>All</Button>
+          <Button variant={viewType === 'mainline' ? 'filled' : 'light'} size="compact-xs" onClick={() => setViewType('mainline')}>Mainline</Button>
+          <Button variant={viewType === 'regional' ? 'filled' : 'light'} size="compact-xs" onClick={() => setViewType('regional')}>Regional</Button>
+        </Group>
+      </Group>
+      <Box style={{ opacity: isStale ? 0.6 : 1, transition: 'opacity 150ms' }}>
+        <Suspense key={deferredViewType} fallback={<StatsSkeleton />}>
+          <StatsContent id={id} viewType={deferredViewType} />
+        </Suspense>
+      </Box>
+    </Stack>
+  );
+};
+
+const StatsContent = ({ id, viewType }: { id: string; viewType: 'all' | 'mainline' | 'regional' }) => {
+  const { data: stats, isLoading: statsLoading } = usePlayerStats(id, viewType);
+  return <StatsOverview statsData={stats} isLoading={statsLoading} />;
+};
+
 const Profile = ({ id }: ProfileProps) => {
  const { data: player } = usePlayer(id);
  const { data: matches } = usePlayerMatches(id);
-  const { data: stats, isLoading: statsLoading } = usePlayerStats(id);

  const tabs = [
    {
@@ -29,10 +57,7 @@ const Profile = ({ id }: ProfileProps) => {
          </Suspense>
        </Stack>
        <Divider my="md" />
-        <Stack>
-          <Text px="md" size="md" fw={700}>Statistics</Text>
-          <StatsOverview statsData={stats} isLoading={statsLoading} />
-        </Stack>
+        <StatsWithFilter id={id} />
      </>,
    },
    {
--- a/src/features/players/index.ts
+++ b/src/features/players/index.ts
@@ -1,3 +1,5 @@
 import { Logger } from "@/lib/logger";

-export const logger = new Logger('Players');
+export const logger = new Logger('Players');
+export * from "./queries";
+export { PlayersActivityTable } from "./components/players-activity-table";
--- a/src/features/players/queries.ts
+++ b/src/features/players/queries.ts
@@ -1,5 +1,5 @@
 import { useServerSuspenseQuery } from "@/lib/tanstack-query/hooks";
-import { listPlayers, getPlayer, getUnassociatedPlayers, fetchMe, getPlayerStats, getAllPlayerStats, getPlayerMatches, getUnenrolledPlayers } from "./server";
+import { listPlayers, getPlayer, getUnassociatedPlayers, fetchMe, getPlayerStats, getAllPlayerStats, getPlayerMatches, getUnenrolledPlayers, getPlayersActivity } from "./server";

 export const playerKeys = {
  auth: ['auth'],
@@ -7,9 +7,10 @@ export const playerKeys = {
  details: (id: string) => ['players', 'details', id],
  unassociated: ['players','unassociated'],
  unenrolled: (tournamentId: string) => ['players', 'unenrolled', tournamentId],
-  stats: (id: string) => ['players', 'stats', id],
-  allStats: ['players', 'stats', 'all'],
+  stats: (id: string, viewType?: 'all' | 'mainline' | 'regional') => ['players', 'stats', id, viewType ?? 'all'],
+  allStats: (viewType?: 'all' | 'mainline' | 'regional') => ['players', 'stats', 'all', viewType ?? 'all'],
  matches: (id: string) => ['players', 'matches', id],
+  activity: ['players', 'activity'],
 };

 export const playerQueries = {
@@ -33,18 +34,22 @@ export const playerQueries = {
    queryKey: playerKeys.unenrolled(tournamentId),
    queryFn: async () => await getUnenrolledPlayers({ data: tournamentId })
  }),
-  stats: (id: string) => ({
-    queryKey: playerKeys.stats(id),
-    queryFn: async () => await getPlayerStats({ data: id })
+  stats: (id: string, viewType?: 'all' | 'mainline' | 'regional') => ({
+    queryKey: playerKeys.stats(id, viewType),
+    queryFn: async () => await getPlayerStats({ data: { playerId: id, viewType } })
  }),
-  allStats: () => ({
-    queryKey: playerKeys.allStats,
-    queryFn: async () => await getAllPlayerStats()
+  allStats: (viewType?: 'all' | 'mainline' | 'regional') => ({
+    queryKey: playerKeys.allStats(viewType),
+    queryFn: async () => await getAllPlayerStats({ data: viewType })
  }),
  matches: (id: string) => ({
    queryKey: playerKeys.matches(id),
    queryFn: async () => await getPlayerMatches({ data: id })
  }),
+  activity: () => ({
+    queryKey: playerKeys.activity,
+    queryFn: async () => await getPlayersActivity()
+  }),
 };

 export const useMe = () => {
@@ -79,14 +84,17 @@ export const usePlayers = () =>
 export const useUnassociatedPlayers = () => 
  useServerSuspenseQuery(playerQueries.unassociated());

-export const usePlayerStats = (id: string) =>
-  useServerSuspenseQuery(playerQueries.stats(id));
+export const usePlayerStats = (id: string, viewType?: 'all' | 'mainline' | 'regional') =>
+  useServerSuspenseQuery(playerQueries.stats(id, viewType));

-export const useAllPlayerStats = () =>
-  useServerSuspenseQuery(playerQueries.allStats());
+export const useAllPlayerStats = (viewType?: 'all' | 'mainline' | 'regional') =>
+  useServerSuspenseQuery(playerQueries.allStats(viewType));

 export const usePlayerMatches = (id: string) =>
  useServerSuspenseQuery(playerQueries.matches(id));

 export const useUnenrolledPlayers = (tournamentId: string) =>
-  useServerSuspenseQuery(playerQueries.unenrolled(tournamentId));
+  useServerSuspenseQuery(playerQueries.unenrolled(tournamentId));
+
+export const usePlayersActivity = () =>
+  useServerSuspenseQuery(playerQueries.activity());
--- a/src/features/players/server.ts
+++ b/src/features/players/server.ts
@@ -136,16 +136,20 @@ export const getUnassociatedPlayers = createServerFn()
  );

 export const getPlayerStats = createServerFn()
-  .inputValidator(z.string())
+  .inputValidator(z.object({
+    playerId: z.string(),
+    viewType: z.enum(['all', 'mainline', 'regional']).optional()
+  }))
  .middleware([superTokensFunctionMiddleware])
  .handler(async ({ data }) =>
-    toServerResult<PlayerStats>(async () => await pbAdmin.getPlayerStats(data))
+    toServerResult<PlayerStats>(async () => await pbAdmin.getPlayerStats(data.playerId, data.viewType))
  );

 export const getAllPlayerStats = createServerFn()
+  .inputValidator(z.enum(['all', 'mainline', 'regional']).optional())
  .middleware([superTokensFunctionMiddleware])
-  .handler(async () =>
-    toServerResult<PlayerStats[]>(async () => await pbAdmin.getAllPlayerStats())
+  .handler(async ({ data }) =>
+    toServerResult<PlayerStats[]>(async () => await pbAdmin.getAllPlayerStats(data))
  );

 export const getPlayerMatches = createServerFn()
@@ -161,3 +165,9 @@ export const getUnenrolledPlayers = createServerFn()
  .handler(async ({ data: tournamentId }) =>
    toServerResult(async () => await pbAdmin.getUnenrolledPlayers(tournamentId))
  );
+
+export const getPlayersActivity = createServerFn()
+  .middleware([superTokensFunctionMiddleware])
+  .handler(async () =>
+    toServerResult<Player[]>(async () => await pbAdmin.getPlayersActivity())
+  );
--- a/src/features/players/types.ts
+++ b/src/features/players/types.ts
@@ -14,6 +14,7 @@ export interface Player {
  last_name?: string;
  created?: string;
  updated?: string;
+  last_activity?: string;
  teams?: TeamInfo[];
 }

@@ -23,7 +24,9 @@ export const playerInputSchema = z.object({
  last_name: z.string().min(2).max(20).regex(/^[a-zA-Z0-9\s]+$/, "Last name must be 2-20 characters long and contain only letters and spaces"),
 });

-export const playerUpdateSchema = playerInputSchema.partial();
+export const playerUpdateSchema = playerInputSchema.extend({
+  last_activity: z.string().optional(),
+}).partial();

 export type PlayerInput = z.infer<typeof playerInputSchema>;
 export type PlayerUpdateInput = z.infer<typeof playerUpdateSchema>;
--- a/src/features/teams/components/team-list.tsx
+++ b/src/features/teams/components/team-list.tsx
@@ -22,12 +22,21 @@ const TeamListItem = React.memo(({ team }: TeamListItemProps) => {
    [team.players]
  );

+  const teamNameSize = useMemo(() => {
+    const nameLength = team.name.length;
+    if (nameLength > 20) return 'xs';
+    if (nameLength > 15) return 'sm';
+    return 'md';
+  }, [team.name]);
+
  return (
-    <Group justify="space-between" w="100%">
-      <Text fw={500}>{`${team.name}`}</Text>
-      <Stack ml="auto" gap={0}>
-        {playerNames.map((name) => (
-          <Text size="xs" c="dimmed" ta="right">
+    <Group justify="space-between" w="100%" wrap="nowrap">
+      <Text fw={500} size={teamNameSize} style={{ flexShrink: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+        {`${team.name}`}
+      </Text>
+      <Stack ml="auto" gap={0} style={{ flexShrink: 0 }}>
+        {playerNames.map((name, idx) => (
+          <Text key={idx} size="xs" c="dimmed" ta="right">
            {name}
          </Text>
        ))}
@@ -46,10 +55,10 @@ const TeamList = ({ teams, loading = false, onTeamClick }: TeamListProps) => {
  const navigate = useNavigate();

  const handleClick = useCallback(
-    (teamId: string) => {
+    (teamId: string, priv: boolean) => {
      if (onTeamClick) {
        onTeamClick(teamId);
-      } else {
+      } else if (!priv) {
        navigate({ to: `/teams/${teamId}` });
      }
    },
@@ -91,7 +100,7 @@ const TeamList = ({ teams, loading = false, onTeamClick }: TeamListProps) => {
              />
            }
            style={{ cursor: "pointer" }}
-            onClick={() => handleClick(team.id)}
+            onClick={() => handleClick(team.id, team.private)}
            styles={{
              itemWrapper: { width: "100%" },
              itemLabel: { width: "100%" },
--- a/src/features/teams/types.ts
+++ b/src/features/teams/types.ts
@@ -19,6 +19,7 @@ export interface Team {
  updated: string;
  players: PlayerInfo[];
  tournaments: TournamentInfo[];
+  private: boolean;
 }

 export interface TeamInfo {
@@ -28,6 +29,7 @@ export interface TeamInfo {
  accent_color: string;
  logo?: string;
  players: PlayerInfo[];
+  private: boolean;
 }

 export const teamInputSchema = z
--- a/src/features/tournaments/components/tournament-card.tsx
+++ b/src/features/tournaments/components/tournament-card.tsx
@@ -58,7 +58,7 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
              <Title mb={-6} order={3} lineClamp={2}>
                {tournament.name}
              </Title>
-              {(tournament.first_place || tournament.second_place || tournament.third_place) && (
+              {((tournament.first_place || tournament.second_place || tournament.third_place) && !tournament.regional) && (
                <Stack gap={6} >
                  {tournament.first_place && (
                    <Badge
--- a/src/features/tournaments/components/tournament-stats.tsx
+++ b/src/features/tournaments/components/tournament-stats.tsx
@@ -9,9 +9,10 @@ import {
  Center,
  ThemeIcon,
  Divider,
+  Alert,
 } from "@mantine/core";
 import { Tournament } from "@/features/tournaments/types";
-import { CrownIcon, MedalIcon, TreeStructureIcon } from "@phosphor-icons/react";
+import { CrownIcon, TreeStructureIcon, InfoIcon } from "@phosphor-icons/react";
 import Avatar from "@/components/avatar";
 import ListLink from "@/components/list-link";
 import { Podium } from "./podium";
@@ -156,7 +157,12 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
  return (
    <Container size="100%" px={0}>
      <Stack gap="md">
-        <Podium tournament={tournament} />
+        {tournament.regional && (
+          <Alert px="md" variant="light" title="Regional Tournament" icon={<InfoIcon size={16} />}>
+            Regional tournaments are a work in progress. Some features might not work as expected.
+          </Alert>
+        )}
+        {!tournament.regional && <Podium tournament={tournament} />}
        <ListLink
          label={`View Bracket`}
          to={`/tournaments/${tournament.id}/bracket`}
--- a/src/features/tournaments/components/upcoming-tournament/enroll-team/team-selection-view.tsx
+++ b/src/features/tournaments/components/upcoming-tournament/enroll-team/team-selection-view.tsx
@@ -79,6 +79,4 @@ const TeamSelectionView: React.FC<TeamSelectionViewProps> = React.memo(({
  );
 });

-TeamSelectionView.displayName = 'TeamSelectionView';
-
 export default TeamSelectionView;
--- a/src/features/tournaments/types.ts
+++ b/src/features/tournaments/types.ts
@@ -29,6 +29,7 @@ export interface TournamentInfo {
  first_place?: TeamInfo;
  second_place?: TeamInfo;
  third_place?: TeamInfo;
+  regional?: boolean;
 }

 export interface Tournament {
@@ -50,6 +51,7 @@ export interface Tournament {
  second_place?: TeamInfo;
  third_place?: TeamInfo;
  team_stats?: TournamentTeamStats[];
+  regional?: boolean;
 }

 export const tournamentInputSchema = z.object({