di usage in website

apps/website/components/teams/TeamRoster.tsx

@@ -1,18 +1,17 @@
 'use client';
 
-import { useState, useEffect } from 'react';
 import Card from '@/components/ui/Card';
 import DriverIdentity from '@/components/drivers/DriverIdentity';
-import { useServices } from '@/lib/services/ServiceProvider';
-import type { TeamMemberViewModel } from '@/lib/view-models/TeamMemberViewModel';
+import { useTeamRoster } from '@/hooks/team';
+import { useState } from 'react';
+import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 
 type TeamRole = 'owner' | 'admin' | 'member';
-
-type TeamMembershipSummary = Pick<TeamMemberViewModel, 'driverId' | 'role' | 'joinedAt'>;
+type TeamMemberRole = 'owner' | 'manager' | 'member';
 
 interface TeamRosterProps {
   teamId: string;
-  memberships: TeamMembershipSummary[];
+  memberships: any[];
   isAdmin: boolean;
   onRemoveMember?: (driverId: string) => void;
   onChangeRole?: (driverId: string, newRole: TeamRole) => void;
@@ -25,38 +24,10 @@ export default function TeamRoster({
   onRemoveMember,
   onChangeRole,
 }: TeamRosterProps) {
-  const { teamService, driverService } = useServices();
-  const [teamMembers, setTeamMembers] = useState<any[]>([]);
-  const [loading, setLoading] = useState(true);
   const [sortBy, setSortBy] = useState<'role' | 'rating' | 'name'>('rating');
 
-  useEffect(() => {
-    const load = async () => {
-      setLoading(true);
-      try {
-        // 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, teamService, driverService]);
+  // Use hook for data fetching
+  const { data: teamMembers = [], isLoading: loading } = useTeamRoster(memberships);
 
   const getRoleBadgeColor = (role: TeamRole) => {
     switch (role) {
@@ -69,15 +40,17 @@ export default function TeamRoster({
     }
   };
 
-  const getRoleLabel = (role: TeamRole) => {
-    return role.charAt(0).toUpperCase() + role.slice(1);
+  const getRoleLabel = (role: TeamRole | TeamMemberRole) => {
+    // Convert manager to admin for display
+    const displayRole = role === 'manager' ? 'admin' : role;
+    return displayRole.charAt(0).toUpperCase() + displayRole.slice(1);
   };
 
-  function getRoleOrder(role: TeamRole): number {
+  function getRoleOrder(role: TeamMemberRole): number {
     switch (role) {
       case 'owner':
         return 0;
-      case 'admin':
+      case 'manager':
         return 1;
       case 'member':
         return 2;
@@ -145,6 +118,8 @@ export default function TeamRoster({
         {sortedMembers.map((member) => {
           const { driver, role, joinedAt, rating, overallRank } = member;
 
+          // Convert manager to admin for display purposes
+          const displayRole: TeamRole = role === 'manager' ? 'admin' : (role as TeamRole);
           const canManageMembership = isAdmin && role !== 'owner';
 
           return (
@@ -153,7 +128,7 @@ export default function TeamRoster({
               className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline hover:border-charcoal-outline/60 transition-colors"
             >
               <DriverIdentity
-                driver={driver}
+                driver={driver as DriverViewModel}
                 href={`/drivers/${driver.id}?from=team&teamId=${teamId}`}
                 contextLabel={getRoleLabel(role)}
                 meta={
@@ -185,7 +160,7 @@ export default function TeamRoster({
                 <div className="flex items-center gap-2">
                   <select
                     className="px-3 py-2 bg-iron-gray border-0 rounded text-white ring-1 ring-inset ring-charcoal-outline focus:ring-2 focus:ring-primary-blue transition-all duration-150 text-sm"
-                    value={role}
+                    value={displayRole}
                     onChange={(e) =>
                       onChangeRole?.(driver.id, e.target.value as TeamRole)
                     }
@@ -212,4 +187,4 @@ export default function TeamRoster({
       )}
     </Card>
   );
-}
+}