stats reorg, upcoming refinement

src/features/teams/components/team-profile/index.tsx

@@ -2,7 +2,8 @@ import { Box, Text } from "@mantine/core";
 import Header from "./header";
 import SwipeableTabs from "@/components/swipeable-tabs";
 import TournamentList from "@/features/tournaments/components/tournament-list";
-import { useTeam } from "../../queries";
+import StatsOverview from "@/shared/components/stats-overview";
+import { useTeam, useTeamStats } from "../../queries";
 
 interface ProfileProps {
   id: string;
@@ -10,12 +11,13 @@ interface ProfileProps {
 
 const TeamProfile = ({ id }: ProfileProps) => {
   const { data: team } = useTeam(id);
+  const { data: stats, isLoading: statsLoading, error: statsError } = useTeamStats(id);
   if (!team) return <Text p="md">Team not found</Text>;
 
   const tabs = [
     {
       label: "Overview",
-      content: <Text p="md">Stats/Badges will go here</Text>,
+      content: <StatsOverview statsData={statsError ? null : stats || null} isLoading={statsLoading} />,
     },
     {
       label: "Matches",

src/features/teams/queries.ts

@@ -1,8 +1,9 @@
-import { useServerSuspenseQuery } from "@/lib/tanstack-query/hooks";  
-import { getTeam } from "./server";
+import { useServerSuspenseQuery, useServerQuery } from "@/lib/tanstack-query/hooks";
+import { getTeam, getTeamStats } from "./server";
 
 export const teamKeys = {
   details: (id: string) => ['teams', 'details', id] as const,
+  stats: (id: string) => ['teams', 'stats', id] as const,
 };
 
 export const teamQueries = {
@@ -10,7 +11,18 @@ export const teamQueries = {
     queryKey: teamKeys.details(id),
     queryFn: () => getTeam({ data: id }),
   }),
+  stats: (id: string) => ({
+    queryKey: teamKeys.stats(id),
+    queryFn: () => getTeamStats({ data: id }),
+  }),
 };
 
 export const useTeam = (id: string) =>
   useServerSuspenseQuery(teamQueries.details(id));
+
+export const useTeamStats = (id: string) =>
+  useServerQuery({
+    ...teamQueries.stats(id),
+    retry: 1,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+  });

src/features/teams/server.ts

@@ -50,7 +50,7 @@ export const updateTeam = createServerFn()
     updates: teamUpdateSchema
   }))
   .middleware([superTokensFunctionMiddleware])
-  .handler(async ({ data: { id, updates }, context }) => 
+  .handler(async ({ data: { id, updates }, context }) =>
     toServerResult(async () => {
       const userId = context.userAuthId;
       const isAdmin = context.roles.includes("Admin");
@@ -71,3 +71,10 @@ export const updateTeam = createServerFn()
       return pbAdmin.updateTeam(id, updates);
     })
   );
+
+export const getTeamStats = createServerFn()
+  .validator(z.string())
+  .middleware([superTokensFunctionMiddleware])
+  .handler(async ({ data: teamId }) =>
+    toServerResult(() => pbAdmin.getTeamStats(teamId))
+  );

src/features/teams/types.ts

@@ -96,3 +96,16 @@ export const teamUpdateSchema = z
 
 export type TeamInput = z.infer<typeof teamInputSchema>;
 export type TeamUpdateInput = z.infer<typeof teamUpdateSchema>;
+
+export interface TeamStats {
+  id: string;
+  team_id: string;
+  team_name: string;
+  matches: number;
+  wins: number;
+  losses: number;
+  total_cups_made: number;
+  total_cups_against: number;
+  margin_of_victory: number;
+  margin_of_loss: number;
+}