view data fixes

apps/website/client-wrapper/TeamLeaderboardPageWrapper.tsx

@@ -2,19 +2,16 @@
 
 import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';
 import { ViewData } from '@/lib/contracts/view-data/ViewData';
-import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+import { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
 import { TeamLeaderboardTemplate } from '@/templates/TeamLeaderboardTemplate';
 import { useRouter } from 'next/navigation';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
+import type { TeamListItemDTO } from '@/lib/types/generated/TeamListItemDTO';
 
 type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
 type SortBy = 'rating' | 'wins' | 'winRate' | 'races';
 
-interface TeamLeaderboardViewData extends ViewData extends ViewData {
-  teams: TeamSummaryViewModel[];
-}
-
-export function TeamLeaderboardPageWrapper({ viewData }: ClientWrapperProps<TeamLeaderboardViewData>) {
+export function TeamLeaderboardPageWrapper({ viewData }: ClientWrapperProps<{ teams: TeamListItemDTO[] }>) {
   const router = useRouter();
   
   // Client-side UI state only (no business logic)
@@ -22,7 +19,13 @@ export function TeamLeaderboardPageWrapper({ viewData }: ClientWrapperProps<Team
   const [filterLevel, setFilterLevel] = useState<SkillLevel | 'all'>('all');
   const [sortBy, setSortBy] = useState<SortBy>('rating');
 
-  if (!viewData.teams || viewData.teams.length === 0) {
+  // Instantiate ViewModels on the client to wrap plain DTOs with logic
+  const teamViewModels = useMemo(() =>
+    (viewData.teams || []).map(dto => new TeamSummaryViewModel(dto)),
+    [viewData.teams]
+  );
+
+  if (teamViewModels.length === 0) {
     return null;
   }
 
@@ -34,8 +37,8 @@ export function TeamLeaderboardPageWrapper({ viewData }: ClientWrapperProps<Team
     router.push('/teams');
   };
 
-  // Apply filtering and sorting
-  const filteredAndSortedTeams = viewData.teams
+  // Apply filtering and sorting using ViewModel logic
+  const filteredAndSortedTeams = teamViewModels
     .filter((team) => {
       const matchesSearch = team.name.toLowerCase().includes(searchQuery.toLowerCase());
       const matchesLevel = filterLevel === 'all' || team.performanceLevel === filterLevel;
@@ -54,7 +57,7 @@ export function TeamLeaderboardPageWrapper({ viewData }: ClientWrapperProps<Team
     });
 
   const templateViewData = {
-    teams: viewData.teams,
+    teams: teamViewModels,
     searchQuery,
     filterLevel,
     sortBy,