react-query

apps/website/app/onboarding/page.tsx

@@ -1,59 +1,25 @@
 'use client';
 
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
 import { Loader2 } from 'lucide-react';
+import { useRouter } from 'next/navigation';
 
 import OnboardingWizard from '@/components/onboarding/OnboardingWizard';
+import { useCurrentDriver } from '@/hooks/useDriverService';
 import { useAuth } from '@/lib/auth/AuthContext';
-import { useServices } from '@/lib/services/ServiceProvider';
  
 export default function OnboardingPage() {
   const router = useRouter();
   const { session } = useAuth();
-  const { driverService } = useServices();
-  const [checking, setChecking] = useState(true);
+  const { data: driver, isLoading } = useCurrentDriver();
 
-  useEffect(() => {
-    // If user is not authenticated, redirect to login
-    if (!session) {
-      router.replace('/auth/login?returnTo=/onboarding');
-      return;
-    }
+  // If user is not authenticated, redirect to login
+  if (!session) {
+    router.replace('/auth/login?returnTo=/onboarding');
+    return null;
+  }
 
-    let cancelled = false;
-
-    const checkOnboarding = async () => {
-      try {
-        const driver = await driverService.getCurrentDriver();
-
-        if (cancelled) return;
-
-        // If driver profile exists, onboarding is complete – go to dashboard
-        if (driver) {
-          router.replace('/dashboard');
-          return;
-        }
-
-        // Otherwise allow onboarding wizard to render
-        setChecking(false);
-      } catch {
-        // On error, allow onboarding to proceed so user isn't blocked
-        if (!cancelled) {
-          setChecking(false);
-        }
-      }
-    };
-
-    checkOnboarding();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [session, driverService, router]);
-
-  // Show loading while checking auth/onboarding status
-  if (checking) {
+  // Show loading while checking driver data
+  if (isLoading) {
     return (
       <main className="min-h-screen bg-deep-graphite flex items-center justify-center">
         <Loader2 className="w-8 h-8 text-primary-blue animate-spin" />
@@ -61,6 +27,12 @@ export default function OnboardingPage() {
     );
   }
 
+  // If driver profile exists, onboarding is complete – go to dashboard
+  if (driver) {
+    router.replace('/dashboard');
+    return null;
+  }
+
   return (
     <main className="min-h-screen bg-deep-graphite">
       <OnboardingWizard />

apps/website/app/races/[id]/page.tsx

@@ -8,7 +8,8 @@ import Button from '@/components/ui/Button';
 import Card from '@/components/ui/Card';
 import Heading from '@/components/ui/Heading';
 import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useRaceDetail, useRegisterForRace, useWithdrawFromRace, useCancelRace, useCompleteRace, useReopenRace } from '@/hooks/useRaceService';
+import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
 import { LeagueMembershipUtility } from '@/lib/utilities/LeagueMembershipUtility';
 import type { RaceDetailViewModel } from '@/lib/view-models/RaceDetailViewModel';
 import {
@@ -37,54 +38,29 @@ export default function RaceDetailPage() {
   const router = useRouter();
   const params = useParams();
   const raceId = params.id as string;
-  const { raceService, leagueMembershipService } = useServices();
+  const currentDriverId = useEffectiveDriverId();
+  const isSponsorMode = useSponsorMode();
+
+  const { data: viewModel, isLoading: loading, error } = useRaceDetail(raceId, currentDriverId);
+  const { data: membership } = useLeagueMembership(viewModel?.league?.id || '', currentDriverId);
 
-  const [viewModel, setViewModel] = useState<RaceDetailViewModel | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [cancelling, setCancelling] = useState(false);
-  const [registering, setRegistering] = useState(false);
-  const [reopening, setReopening] = useState(false);
   const [ratingChange, setRatingChange] = useState<number | null>(null);
   const [animatedRatingChange, setAnimatedRatingChange] = useState(0);
   const [showProtestModal, setShowProtestModal] = useState(false);
   const [showEndRaceModal, setShowEndRaceModal] = useState(false);
-  const [membership, setMembership] = useState<any>(null);
 
-  const currentDriverId = useEffectiveDriverId();
-  const isSponsorMode = useSponsorMode();
-
-  const loadRaceData = async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const vm = await raceService.getRaceDetail(raceId, currentDriverId);
-      setViewModel(vm);
-
-      // Fetch league membership for admin controls
-      if (vm.league) {
-        await leagueMembershipService.fetchLeagueMemberships(vm.league.id);
-        const leagueMembership = leagueMembershipService.getMembership(vm.league.id, currentDriverId);
-        setMembership(leagueMembership);
-      }
-
-      const userResultRatingChange = vm.userResult?.ratingChange ?? null;
-      setRatingChange(userResultRatingChange);
-      if (userResultRatingChange === null) {
-        setAnimatedRatingChange(0);
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load race');
-      setViewModel(null);
-    } finally {
-      setLoading(false);
-    }
-  };
+  const registerMutation = useRegisterForRace();
+  const withdrawMutation = useWithdrawFromRace();
+  const cancelMutation = useCancelRace();
+  const completeMutation = useCompleteRace();
+  const reopenMutation = useReopenRace();
 
+  // Set rating change when viewModel changes
   useEffect(() => {
-    loadRaceData();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [raceId]);
+    if (viewModel?.userResult?.ratingChange !== undefined) {
+      setRatingChange(viewModel.userResult.ratingChange);
+    }
+  }, [viewModel?.userResult?.ratingChange]);
 
   // Animate rating change when it changes
   useEffect(() => {

apps/website/app/races/[id]/results/page.tsx

@@ -7,7 +7,8 @@ import ResultsTable from '@/components/races/ResultsTable';
 import Button from '@/components/ui/Button';
 import Card from '@/components/ui/Card';
 import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useRaceResultsDetail, useRaceWithSOF } from '@/hooks/useRaceService';
+import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
 import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
 import type { RaceResultsDetailViewModel } from '@/lib/view-models';
 import { ArrowLeft, Calendar, Trophy, Users, Zap } from 'lucide-react';
@@ -19,54 +20,18 @@ export default function RaceResultsPage() {
   const params = useParams();
   const raceId = params.id as string;
   const currentDriverId = useEffectiveDriverId();
-  const { raceResultsService, leagueMembershipService } = useServices();
 
-  const [raceData, setRaceData] = useState<RaceResultsDetailViewModel | null>(null);
-  const [raceSOF, setRaceSOF] = useState<number | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const { data: raceData, isLoading: loading, error } = useRaceResultsDetail(raceId, currentDriverId);
+  const { data: sofData } = useRaceWithSOF(raceId);
+  const { data: membership } = useLeagueMembership(raceData?.league?.id || '', currentDriverId);
+
   const [importing, setImporting] = useState(false);
   const [importSuccess, setImportSuccess] = useState(false);
-  const [isAdmin, setIsAdmin] = useState(false);
   const [showQuickPenaltyModal, setShowQuickPenaltyModal] = useState(false);
   const [preSelectedDriver, setPreSelectedDriver] = useState<{ id: string; name: string } | undefined>(undefined);
 
-  const loadData = async () => {
-    try {
-      const raceData = await raceResultsService.getResultsDetail(raceId, currentDriverId);
-      setRaceData(raceData);
-      setError(null);
-
-      try {
-        const sofData = await raceResultsService.getWithSOF(raceId);
-        setRaceSOF(sofData.strengthOfField);
-      } catch (sofErr) {
-        console.error('Failed to load SOF:', sofErr);
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load race data');
-      setRaceData(null);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    loadData();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [raceId]);
-
-  useEffect(() => {
-    const leagueId = raceData?.league?.id;
-    if (leagueId && currentDriverId) {
-      const checkAdmin = async () => {
-        await leagueMembershipService.fetchLeagueMemberships(leagueId);
-        const membership = leagueMembershipService.getMembership(leagueId, currentDriverId);
-        setIsAdmin(membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false);
-      };
-      checkAdmin();
-    }
-  }, [raceData?.league?.id, currentDriverId, leagueMembershipService]);
+  const raceSOF = sofData?.strengthOfField || null;
+  const isAdmin = membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;
 
   const handleImportSuccess = async (importedResults: any[]) => {
     setImporting(true);

apps/website/app/races/[id]/stewarding/page.tsx

@@ -4,8 +4,8 @@ import Breadcrumbs from '@/components/layout/Breadcrumbs';
 import Button from '@/components/ui/Button';
 import Card from '@/components/ui/Card';
 import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import { useServices } from '@/lib/services/ServiceProvider';
-import { RaceStewardingViewModel } from '@/lib/view-models/RaceStewardingViewModel';
+import { useRaceStewardingData } from '@/hooks/useRaceStewardingService';
+import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
 import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
 import {
   AlertCircle,
@@ -20,42 +20,20 @@ import {
 } from 'lucide-react';
 import Link from 'next/link';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 export default function RaceStewardingPage() {
   const params = useParams();
   const router = useRouter();
-  const { raceStewardingService, leagueMembershipService } = useServices();
   const raceId = params.id as string;
   const currentDriverId = useEffectiveDriverId();
 
-  const [stewardingData, setStewardingData] = useState<RaceStewardingViewModel | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [isAdmin, setIsAdmin] = useState(false);
+  const { data: stewardingData, isLoading: loading } = useRaceStewardingData(raceId, currentDriverId);
+  const { data: membership } = useLeagueMembership(stewardingData?.league?.id || '', currentDriverId);
+
   const [activeTab, setActiveTab] = useState<'pending' | 'resolved' | 'penalties'>('pending');
 
-  useEffect(() => {
-    async function loadData() {
-      setLoading(true);
-      try {
-        const data = await raceStewardingService.getRaceStewardingData(raceId, currentDriverId);
-        setStewardingData(data);
-
-        if (data.league?.id) {
-          const membership = await leagueMembershipService.getMembership(data.league.id, currentDriverId);
-          setIsAdmin(membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false);
-        } else {
-          setIsAdmin(false);
-        }
-      } catch (err) {
-        console.error('Failed to load data:', err);
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    loadData();
-  }, [raceId, currentDriverId, raceStewardingService, leagueMembershipService]);
+  const isAdmin = membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;
 
   const pendingProtests = stewardingData?.pendingProtests ?? [];
   const resolvedProtests = stewardingData?.resolvedProtests ?? [];
@@ -153,7 +131,7 @@ export default function RaceStewardingPage() {
           <Breadcrumbs items={breadcrumbItems} className="text-sm text-gray-400" />
           <Button
             variant="secondary"
-            onClick={() => router.push(`/races/${race.id}`)}
+            onClick={() => router.push(`/races/${raceId}`)}
             className="flex items-center gap-2 text-sm"
           >
             <ArrowLeft className="w-4 h-4" />
@@ -393,7 +371,7 @@ export default function RaceStewardingPage() {
 
         {activeTab === 'penalties' && (
           <div className="space-y-4">
-            {penalties.length === 0 ? (
+            {stewardingData?.penalties.length === 0 ? (
               <Card className="text-center py-12">
                 <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-500/10 flex items-center justify-center">
                   <Gavel className="w-8 h-8 text-gray-500" />

apps/website/app/races/all/page.tsx

@@ -1,14 +1,13 @@
 'use client';
 
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import Link from 'next/link';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import Heading from '@/components/ui/Heading';
 import Breadcrumbs from '@/components/layout/Breadcrumbs';
-import { useServices } from '@/lib/services/ServiceProvider';
-import { RacesPageViewModel } from '@/lib/view-models/RacesPageViewModel';
+import { useAllRacesPageData } from '@/hooks/useRaceService';
 import {
   Calendar,
   Clock,
@@ -34,10 +33,7 @@ type StatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
 export default function AllRacesPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const { raceService } = useServices();
-
-  const [pageData, setPageData] = useState<RacesPageViewModel | null>(null);
-  const [loading, setLoading] = useState(true);
+  const { data: pageData, isLoading: loading } = useAllRacesPageData();
 
   // Pagination
   const [currentPage, setCurrentPage] = useState(1);
@@ -48,21 +44,6 @@ export default function AllRacesPage() {
   const [searchQuery, setSearchQuery] = useState('');
   const [showFilters, setShowFilters] = useState(false);
 
-  const loadRaces = async () => {
-    try {
-      const viewModel = await raceService.getAllRacesPageData();
-      setPageData(viewModel);
-    } catch (err) {
-      console.error('Failed to load races:', err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    void loadRaces();
-  }, []);
-
   const races = pageData?.races ?? [];
 
   const filteredRaces = useMemo(() => {

apps/website/app/races/page.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import Heading from '@/components/ui/Heading';
-import { useServices } from '@/lib/services/ServiceProvider';
-import { RacesPageViewModel } from '@/lib/view-models/RacesPageViewModel';
+import { useRacesPageData } from '@/hooks/useRaceService';
 import {
   Calendar,
   Clock,
@@ -31,31 +30,13 @@ type RaceStatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'a
 
 export default function RacesPage() {
   const router = useRouter();
-  const { raceService } = useServices();
-
-  const [pageData, setPageData] = useState<RacesPageViewModel | null>(null);
-  const [loading, setLoading] = useState(true);
+  const { data: pageData, isLoading: loading } = useRacesPageData();
 
   // Filters
   const [statusFilter, setStatusFilter] = useState<RaceStatusFilter | 'all'>('all');
   const [leagueFilter, setLeagueFilter] = useState<string>('all');
   const [timeFilter, setTimeFilter] = useState<TimeFilter>('upcoming');
 
-  const loadRaces = async () => {
-    try {
-      const data = await raceService.getRacesPageData();
-      setPageData(data);
-    } catch (err) {
-      console.error('Failed to load races:', err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    loadRaces();
-  }, []);
-
   // Filter races
   const filteredRaces = useMemo(() => {
     if (!pageData) return [];

apps/website/app/teams/leaderboard/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import {
   Users,
@@ -22,7 +22,7 @@ import {
 import Button from '@/components/ui/Button';
 import Input from '@/components/ui/Input';
 import Heading from '@/components/ui/Heading';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useAllTeams } from '@/hooks/useTeamService';
 import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
 
 // ============================================================================
@@ -256,28 +256,11 @@ function TopThreePodium({ teams, onTeamClick }: TopThreePodiumProps) {
 
 export default function TeamLeaderboardPage() {
   const router = useRouter();
-  const [teams, setTeams] = useState<TeamDisplayData[]>([]);
-  const [loading, setLoading] = useState(true);
+  const { data: teams = [], isLoading: loading } = useAllTeams();
   const [searchQuery, setSearchQuery] = useState('');
   const [sortBy, setSortBy] = useState<SortBy>('rating');
   const [filterLevel, setFilterLevel] = useState<SkillLevel | 'all'>('all');
 
-  useEffect(() => {
-    const loadTeams = async () => {
-      try {
-        const { teamService } = useServices();
-        const teams = await teamService.getAllTeams();
-        setTeams(teams);
-      } catch (error) {
-        console.error('Failed to load teams:', error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    void loadTeams();
-  }, []);
-
 
   const handleTeamClick = (teamId: string) => {
     if (teamId.startsWith('demo-team-')) {
@@ -300,8 +283,7 @@ export default function TeamLeaderboardPage() {
       if (filterLevel !== 'all' && team.performanceLevel !== filterLevel) {
         return false;
       }
-      // Must have rating for leaderboard
-      return team.rating !== null;
+      return true;
     })
     .sort((a, b) => {
       switch (sortBy) {

apps/website/app/teams/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
 import {
   Users,
@@ -28,14 +28,14 @@ import Card from '@/components/ui/Card';
 import Input from '@/components/ui/Input';
 import Heading from '@/components/ui/Heading';
 import CreateTeamForm from '@/components/teams/CreateTeamForm';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useAllTeams } from '@/hooks/useTeamService';
 import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
 
 // ============================================================================
 // TYPES
 // ============================================================================
 
-type TeamDisplayData = TeamLeaderboardItemViewModel;
+type TeamDisplayData = TeamSummaryViewModel;
 
 // ============================================================================
 // SKILL LEVEL CONFIG
@@ -430,58 +430,36 @@ function TeamLeaderboardPreview({ topTeams, onTeamClick }: TeamLeaderboardPrevie
 
 export default function TeamsPage() {
   const router = useRouter();
-  const [realTeams, setRealTeams] = useState<TeamDisplayData[]>([]);
-  const [groupsBySkillLevel, setGroupsBySkillLevel] = useState<Record<SkillLevel, TeamDisplayData[]>>({
-    beginner: [],
-    intermediate: [],
-    advanced: [],
-    pro: [],
-  });
-  const [topTeams, setTopTeams] = useState<TeamDisplayData[]>([]);
-  const [loading, setLoading] = useState(true);
+  const { data: teams = [], isLoading: loading } = useAllTeams();
   const [searchQuery, setSearchQuery] = useState('');
   const [showCreateForm, setShowCreateForm] = useState(false);
 
-  useEffect(() => {
-    loadTeams();
-  }, []);
+  // Derive groups by skill level from the loaded teams
+  const groupsBySkillLevel = useMemo(() => {
+    const byLevel: Record<string, typeof teams> = {
+      beginner: [],
+      intermediate: [],
+      advanced: [],
+      pro: [],
+    };
+    teams.forEach((team) => {
+      const level = team.performanceLevel || 'intermediate';
+      if (byLevel[level]) {
+        byLevel[level].push(team);
+      }
+    });
+    return byLevel;
+  }, [teams]);
 
-  const loadTeams = async () => {
-    try {
-      const { teamService } = useServices();
-      const teams = await teamService.getAllTeams();
-      setRealTeams(teams);
-
-      // Derive groups by skill level from the loaded teams
-      const byLevel: Record<SkillLevel, TeamDisplayData[]> = {
-        beginner: [],
-        intermediate: [],
-        advanced: [],
-        pro: [],
-      };
-      teams.forEach((team) => {
-        const level = (team.performanceLevel as SkillLevel) || 'intermediate';
-        if (byLevel[level]) {
-          byLevel[level].push(team as TeamDisplayData);
-        }
-      });
-      setGroupsBySkillLevel(byLevel);
-
-      // Select top teams by rating for the preview section
-      const sortedByRating = [...teams].sort((a, b) => {
-        const aRating = typeof a.rating === 'number' && Number.isFinite(a.rating) ? a.rating : 0;
-        const bRating = typeof b.rating === 'number' && Number.isFinite(b.rating) ? b.rating : 0;
-        return bRating - aRating;
-      });
-      setTopTeams(sortedByRating.slice(0, 5));
-    } catch (error) {
-      console.error('Failed to load teams:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const teams = realTeams;
+  // Select top teams by rating for the preview section
+  const topTeams = useMemo(() => {
+    const sortedByRating = [...teams].sort((a, b) => {
+      const aRating = typeof a.rating === 'number' && Number.isFinite(a.rating) ? a.rating : 0;
+      const bRating = typeof b.rating === 'number' && Number.isFinite(b.rating) ? b.rating : 0;
+      return bRating - aRating;
+    });
+    return sortedByRating.slice(0, 5);
+  }, [teams]);
 
   const handleTeamClick = (teamId: string) => {
     if (teamId.startsWith('demo-team-')) {
@@ -492,7 +470,6 @@ export default function TeamsPage() {
 
   const handleCreateSuccess = (teamId: string) => {
     setShowCreateForm(false);
-    void loadTeams();
     router.push(`/teams/${teamId}`);
   };
 
@@ -509,21 +486,23 @@ export default function TeamsPage() {
   });
 
   // Group teams by skill level
-  const teamsByLevel: Record<SkillLevel, TeamDisplayData[]> = SKILL_LEVELS.reduce(
-    (acc, level) => {
-      const fromGroup = groupsBySkillLevel[level.id] ?? [];
-      acc[level.id] = filteredTeams.filter((team) =>
-        fromGroup.some((groupTeam) => groupTeam.id === team.id),
-      );
-      return acc;
-    },
-    {
-      beginner: [],
-      intermediate: [],
-      advanced: [],
-      pro: [],
-    } as Record<SkillLevel, TeamDisplayData[]>,
-  );
+  const teamsByLevel = useMemo(() => {
+    return SKILL_LEVELS.reduce(
+      (acc, level) => {
+        const fromGroup = groupsBySkillLevel[level.id] ?? [];
+        acc[level.id] = filteredTeams.filter((team) =>
+          fromGroup.some((groupTeam) => groupTeam.id === team.id),
+        );
+        return acc;
+      },
+      {
+        beginner: [],
+        intermediate: [],
+        advanced: [],
+        pro: [],
+      } as Record<string, typeof teams>,
+    );
+  }, [groupsBySkillLevel, filteredTeams]);
 
   const recruitingCount = teams.filter((t) => t.isRecruiting).length;
 

apps/website/hooks/useLeagueMembershipService.ts

@@ -0,0 +1,27 @@
+import { useQuery } from '@tanstack/react-query';
+import { useServices } from '@/lib/services/ServiceProvider';
+import type { LeagueMembership } from '@core/racing/domain/entities/LeagueMembership';
+
+export function useLeagueMemberships(leagueId: string) {
+  const { leagueMembershipService } = useServices();
+
+  return useQuery({
+    queryKey: ['leagueMemberships', leagueId],
+    queryFn: () => leagueMembershipService.fetchLeagueMemberships(leagueId),
+    enabled: !!leagueId,
+  });
+}
+
+export function useLeagueMembership(leagueId: string, driverId: string) {
+  const { leagueMembershipService } = useServices();
+
+  return useQuery({
+    queryKey: ['leagueMembership', leagueId, driverId],
+    queryFn: async () => {
+      // First fetch memberships if not cached
+      await leagueMembershipService.fetchLeagueMemberships(leagueId);
+      return leagueMembershipService.getMembership(leagueId, driverId);
+    },
+    enabled: !!leagueId && !!driverId,
+  });
+}

apps/website/hooks/useRaceService.ts

@@ -0,0 +1,154 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useServices } from '@/lib/services/ServiceProvider';
+
+export function useRacesPageData() {
+  const { raceService } = useServices();
+
+  return useQuery({
+    queryKey: ['racesPageData'],
+    queryFn: () => raceService.getRacesPageData(),
+  });
+}
+
+export function useAllRacesPageData() {
+  const { raceService } = useServices();
+
+  return useQuery({
+    queryKey: ['allRacesPageData'],
+    queryFn: () => raceService.getAllRacesPageData(),
+  });
+}
+
+export function useRaceDetail(raceId: string, driverId: string) {
+  const { raceService } = useServices();
+
+  return useQuery({
+    queryKey: ['raceDetail', raceId, driverId],
+    queryFn: () => raceService.getRaceDetail(raceId, driverId),
+    enabled: !!raceId && !!driverId,
+  });
+}
+
+export function useRaceDetailMutation() {
+  const { raceService } = useServices();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ raceId, driverId }: { raceId: string; driverId: string }) =>
+      raceService.getRaceDetail(raceId, driverId),
+    onSuccess: (data, variables) => {
+      queryClient.setQueryData(['raceDetail', variables.raceId, variables.driverId], data);
+    },
+  });
+}
+
+export function useRaceStewardingData(raceId: string, driverId: string) {
+  const { raceService } = useServices();
+
+  return useQuery({
+    queryKey: ['raceStewardingData', raceId, driverId],
+    queryFn: () => raceService.getRaceStewardingData(raceId, driverId),
+    enabled: !!raceId && !!driverId,
+  });
+}
+
+export function useRaceResultsDetail(raceId: string, driverId: string) {
+  const { raceResultsService } = useServices();
+
+  return useQuery({
+    queryKey: ['raceResultsDetail', raceId, driverId],
+    queryFn: () => raceResultsService.getResultsDetail(raceId, driverId),
+    enabled: !!raceId && !!driverId,
+  });
+}
+
+export function useRaceWithSOF(raceId: string) {
+  const { raceResultsService } = useServices();
+
+  return useQuery({
+    queryKey: ['raceWithSOF', raceId],
+    queryFn: () => raceResultsService.getWithSOF(raceId),
+    enabled: !!raceId,
+  });
+}
+
+export function useRacesTotal() {
+  const { raceService } = useServices();
+
+  return useQuery({
+    queryKey: ['racesTotal'],
+    queryFn: () => raceService.getRacesTotal(),
+  });
+}
+
+export function useRegisterForRace() {
+  const { raceService } = useServices();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ raceId, leagueId, driverId }: {
+      raceId: string;
+      leagueId: string;
+      driverId: string;
+    }) => raceService.registerForRace(raceId, leagueId, driverId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['racesPageData'] });
+      queryClient.invalidateQueries({ queryKey: ['allRacesPageData'] });
+    },
+  });
+}
+
+export function useWithdrawFromRace() {
+  const { raceService } = useServices();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ raceId, driverId }: {
+      raceId: string;
+      driverId: string;
+    }) => raceService.withdrawFromRace(raceId, driverId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['racesPageData'] });
+      queryClient.invalidateQueries({ queryKey: ['allRacesPageData'] });
+    },
+  });
+}
+
+export function useCancelRace() {
+  const { raceService } = useServices();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (raceId: string) => raceService.cancelRace(raceId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['racesPageData'] });
+      queryClient.invalidateQueries({ queryKey: ['allRacesPageData'] });
+    },
+  });
+}
+
+export function useCompleteRace() {
+  const { raceService } = useServices();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (raceId: string) => raceService.completeRace(raceId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['racesPageData'] });
+      queryClient.invalidateQueries({ queryKey: ['allRacesPageData'] });
+    },
+  });
+}
+
+export function useReopenRace() {
+  const { raceService } = useServices();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (raceId: string) => raceService.reopenRace(raceId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['racesPageData'] });
+      queryClient.invalidateQueries({ queryKey: ['allRacesPageData'] });
+    },
+  });
+}

apps/website/hooks/useRaceStewardingService.ts

@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+import { useServices } from '@/lib/services/ServiceProvider';
+
+export function useRaceStewardingData(raceId: string, driverId: string) {
+  const { raceStewardingService } = useServices();
+
+  return useQuery({
+    queryKey: ['raceStewardingData', raceId, driverId],
+    queryFn: () => raceStewardingService.getRaceStewardingData(raceId, driverId),
+    enabled: !!raceId && !!driverId,
+  });
+}

apps/website/hooks/useTeamService.ts

@@ -0,0 +1,11 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useServices } from '@/lib/services/ServiceProvider';
+
+export function useAllTeams() {
+  const { teamService } = useServices();
+
+  return useQuery({
+    queryKey: ['allTeams'],
+    queryFn: () => teamService.getAllTeams(),
+  });
+}

core/analytics/application/use-cases/GetAnalyticsMetricsUseCase.ts

@@ -1,5 +1,7 @@
 import type { Logger } from '@core/shared/application';
 import type { IPageViewRepository } from '../../domain/repositories/IPageViewRepository';
+import { Result } from '@core/shared/application/Result';
+import type { ApplicationErrorCode } from '@core/shared/errors/ApplicationErrorCode';
 
 export interface GetAnalyticsMetricsInput {
   startDate?: Date;
@@ -13,13 +15,17 @@ export interface GetAnalyticsMetricsOutput {
   bounceRate: number;
 }
 
+export type GetAnalyticsMetricsErrorCode = 'REPOSITORY_ERROR';
+
 export class GetAnalyticsMetricsUseCase {
   constructor(
     private readonly pageViewRepository: IPageViewRepository,
     private readonly logger: Logger,
   ) {}
 
-  async execute(input: GetAnalyticsMetricsInput = {}): Promise<GetAnalyticsMetricsOutput> {
+  async execute(input: GetAnalyticsMetricsInput = {}): Promise<
+    Result<GetAnalyticsMetricsOutput, ApplicationErrorCode<GetAnalyticsMetricsErrorCode, { message: string }>>
+  > {
     try {
       const startDate = input.startDate ?? new Date(Date.now() - 30 * 24 * 60 * 60 * 1000); // 30 days ago
       const endDate = input.endDate ?? new Date();
@@ -39,15 +45,19 @@ export class GetAnalyticsMetricsUseCase {
         uniqueVisitors,
       });
 
-      return {
+      return Result.ok({
         pageViews,
         uniqueVisitors,
         averageSessionDuration,
         bounceRate,
-      };
+      });
     } catch (error) {
+      const err = error as Error;
       this.logger.error('Failed to get analytics metrics', { error, input });
-      throw error;
+      return Result.err({
+        code: 'REPOSITORY_ERROR',
+        details: { message: err.message ?? 'Failed to get analytics metrics' },
+      });
     }
   }
 }