refactor page to use services

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

@@ -22,19 +22,18 @@ import {
 import Button from '@/components/ui/Button';
 import Input from '@/components/ui/Input';
 import Heading from '@/components/ui/Heading';
-import { TeamsLeaderboardPresenter } from '@/lib/presenters/TeamsLeaderboardPresenter';
-import type {
-  TeamLeaderboardItemViewModel,
-  SkillLevel,
-} from '@core/racing/application/presenters/ITeamsLeaderboardPresenter';
+import { useServices } from '@/lib/services/ServiceProvider';
+import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
 
 // ============================================================================
 // TYPES
 // ============================================================================
 
+type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
+
 type SortBy = 'rating' | 'wins' | 'winRate' | 'races';
 
-type TeamDisplayData = TeamLeaderboardItemViewModel;
+type TeamDisplayData = TeamSummaryViewModel;
 
 const getSafeRating = (team: TeamDisplayData): number => {
   const value = typeof team.rating === 'number' ? team.rating : 0;
@@ -266,15 +265,9 @@ export default function TeamLeaderboardPage() {
   useEffect(() => {
     const loadTeams = async () => {
       try {
-        const useCase = getGetTeamsLeaderboardUseCase();
-        const presenter = new TeamsLeaderboardPresenter();
-
-        await useCase.execute(undefined as void, presenter);
-
-        const viewModel = presenter.getViewModel();
-        if (viewModel) {
-          setTeams(viewModel.teams);
-        }
+        const { teamService } = useServices();
+        const teams = await teamService.getAllTeams();
+        setTeams(teams);
       } catch (error) {
         console.error('Failed to load teams:', error);
       } finally {