website cleanup

apps/website/components/teams/TeamRoster.tsx

@@ -3,10 +3,7 @@
 import { useState, useEffect } from 'react';
 import Card from '@/components/ui/Card';
 import DriverIdentity from '@/components/drivers/DriverIdentity';
-import {
-  getTeamRosterViewModel,
-  type TeamRosterViewModel,
-} from '@/lib/presenters/TeamRosterPresenter';
+import { useServices } from '@/lib/services/ServiceProvider';
 import type { TeamRole } from '@core/racing/domain/types/TeamMembership';
 
 interface TeamMembershipSummary {
@@ -30,7 +27,8 @@ export default function TeamRoster({
   onRemoveMember,
   onChangeRole,
 }: TeamRosterProps) {
-  const [viewModel, setViewModel] = useState<TeamRosterViewModel | null>(null);
+  const { teamService, driverService } = useServices();
+  const [teamMembers, setTeamMembers] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
   const [sortBy, setSortBy] = useState<'role' | 'rating' | 'name'>('rating');
 
@@ -38,22 +36,29 @@ export default function TeamRoster({
     const load = async () => {
       setLoading(true);
       try {
-        const fullMemberships = memberships.map((m) => ({
-          teamId,
-          driverId: m.driverId,
-          role: m.role,
-          joinedAt: m.joinedAt,
-          status: 'active' as const,
-        }));
-        const vm = await getTeamRosterViewModel(fullMemberships);
-        setViewModel(vm);
+        // Get driver details for each membership
+        const membersWithDetails = await Promise.all(
+          memberships.map(async (m) => {
+            const driver = await driverService.findById(m.driverId);
+            return {
+              driver: driver || { id: m.driverId, name: 'Unknown Driver', country: 'Unknown', position: 'N/A', races: '0', impressions: '0', team: 'None' },
+              role: m.role,
+              joinedAt: m.joinedAt,
+              rating: null, // DriverDTO doesn't include rating
+              overallRank: null, // DriverDTO doesn't include overallRank
+            };
+          })
+        );
+        setTeamMembers(membersWithDetails);
+      } catch (error) {
+        console.error('Failed to load team roster:', error);
       } finally {
         setLoading(false);
       }
     };
 
     void load();
-  }, [memberships]);
+  }, [memberships, teamService, driverService]);
 
   const getRoleBadgeColor = (role: TeamRole) => {
     switch (role) {
@@ -83,27 +88,27 @@ export default function TeamRoster({
     }
   }
 
-  const sortedMembers = viewModel
-    ? [...viewModel.members].sort((a, b) => {
-        switch (sortBy) {
-          case 'rating': {
-            const ratingA = a.rating ?? 0;
-            const ratingB = b.rating ?? 0;
-            return ratingB - ratingA;
-          }
-          case 'role': {
-            return getRoleOrder(a.role) - getRoleOrder(b.role);
-          }
-          case 'name': {
-            return a.driver.name.localeCompare(b.driver.name);
-          }
-          default:
-            return 0;
-        }
-      })
-    : [];
+  const sortedMembers = [...teamMembers].sort((a, b) => {
+    switch (sortBy) {
+      case 'rating': {
+        const ratingA = a.rating ?? 0;
+        const ratingB = b.rating ?? 0;
+        return ratingB - ratingA;
+      }
+      case 'role': {
+        return getRoleOrder(a.role) - getRoleOrder(b.role);
+      }
+      case 'name': {
+        return a.driver.name.localeCompare(b.driver.name);
+      }
+      default:
+        return 0;
+    }
+  });
 
-  const teamAverageRating = viewModel?.averageRating ?? 0;
+  const teamAverageRating = teamMembers.length > 0
+    ? teamMembers.reduce((sum, m) => sum + (m.rating || 0), 0) / teamMembers.length
+    : 0;
 
   if (loading) {
     return (