Merge branch 'main' into caro/badges-stats

src/app/router.tsx

@@ -13,7 +13,7 @@ export function getRouter() {
         gcTime: 5 * 60 * 1000, // 5 minutes
         refetchOnWindowFocus: false,
         refetchOnReconnect: "always",
-        retry: 3,
+        retry: 1,
       },
     },
   });

src/app/routes/_authed/admin/activities.tsx

@@ -1,12 +1,16 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
 import { ActivitiesTable, activityQueries } from "@/features/activities";
+import { PlayersActivityTable, playerQueries } from "@/features/players";
+import { Tabs } from "@mantine/core";
+import { useState } from "react";
 
 export const Route = createFileRoute("/_authed/admin/activities")({
   component: Stats,
   beforeLoad: ({ context }) => {
     const queryClient = context.queryClient;
     prefetchServerQuery(queryClient, activityQueries.search());
+    prefetchServerQuery(queryClient, playerQueries.activity());
   },
   loader: () => ({
     withPadding: false,
@@ -15,10 +19,27 @@ export const Route = createFileRoute("/_authed/admin/activities")({
       title: "Activities",
       withBackButton: true,
     },
-        refresh: [activityQueries.search().queryKey],
+    refresh: [activityQueries.search().queryKey, playerQueries.activity().queryKey],
   }),
 });
 
 function Stats() {
-  return <ActivitiesTable />;
+  const [activeTab, setActiveTab] = useState<string | null>("server-functions");
+
+  return (
+    <Tabs value={activeTab} onChange={setActiveTab}>
+      <Tabs.List mb='md'>
+        <Tabs.Tab value="server-functions">Server Functions</Tabs.Tab>
+        <Tabs.Tab value="player-activity">Player Activity</Tabs.Tab>
+      </Tabs.List>
+
+      <Tabs.Panel value="server-functions">
+        <ActivitiesTable />
+      </Tabs.Panel>
+
+      <Tabs.Panel value="player-activity">
+        <PlayersActivityTable />
+      </Tabs.Panel>
+    </Tabs>
+  );
 }

src/app/routes/_authed/stats.tsx

@@ -1,15 +1,19 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { playerQueries } from "@/features/players/queries";
 import PlayerStatsTable from "@/features/players/components/player-stats-table";
-import { Suspense } from "react";
+import { Suspense, useState, useDeferredValue } from "react";
 import PlayerStatsTableSkeleton from "@/features/players/components/player-stats-table-skeleton";
 import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
+import LeagueHeadToHead from "@/features/players/components/league-head-to-head";
+import { Box, Loader, Tabs, Button, Group, Container, Stack } from "@mantine/core";
 
 export const Route = createFileRoute("/_authed/stats")({
   component: Stats,
   beforeLoad: ({ context }) => {
     const queryClient = context.queryClient;
-    prefetchServerQuery(queryClient, playerQueries.allStats());
+    prefetchServerQuery(queryClient, playerQueries.allStats('all'));
+    prefetchServerQuery(queryClient, playerQueries.allStats('mainline'));
+    prefetchServerQuery(queryClient, playerQueries.allStats('regional'));
   },
   loader: () => ({
     withPadding: false,
@@ -17,12 +21,62 @@ export const Route = createFileRoute("/_authed/stats")({
     header: {
       title: "Player Stats"
     },
-        refresh: [playerQueries.allStats().queryKey],
+    refresh: [playerQueries.allStats().queryKey],
   }),
 });
 
 function Stats() {
-  return <Suspense fallback={<PlayerStatsTableSkeleton />}>
-    <PlayerStatsTable />
-  </Suspense>;
+  const [viewType, setViewType] = useState<'all' | 'mainline' | 'regional'>('all');
+  const deferredViewType = useDeferredValue(viewType);
+  const isStale = viewType !== deferredViewType;
+
+  return (
+    <Tabs defaultValue="stats">
+      <Tabs.List grow>
+        <Tabs.Tab value="stats">Stats</Tabs.Tab>
+        <Tabs.Tab value="h2h">Head to Head</Tabs.Tab>
+      </Tabs.List>
+
+      <Tabs.Panel value="stats">
+        <Container size="100%" px={0} mt="md">
+          <Stack gap="xs">
+            <Group gap="xs" px="md" justify="center">
+              <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>
+            <Box style={{ opacity: isStale ? 0.6 : 1, transition: 'opacity 150ms' }}>
+              <Suspense key={deferredViewType} fallback={<PlayerStatsTableSkeleton hideFilters />}>
+                <PlayerStatsTable viewType={deferredViewType} />
+              </Suspense>
+            </Box>
+          </Stack>
+        </Container>
+      </Tabs.Panel>
+
+      <Tabs.Panel value="h2h">
+        <Suspense fallback={<Box w='100vw' py='xl'><Loader ml='45vw' /></Box>}>
+          <LeagueHeadToHead />
+        </Suspense>
+      </Tabs.Panel>
+    </Tabs>
+  );
 }