wip

apps/website/components/teams/TeamRoster.tsx

@@ -7,8 +7,7 @@ import {
   getTeamRosterViewModel,
   type TeamRosterViewModel,
 } from '@/lib/presenters/TeamRosterPresenter';
-
-type TeamRole = 'owner' | 'manager' | 'driver';
+import type { TeamRole } from '@gridpilot/racing/domain/types/TeamMembership';
 
 interface TeamMembershipSummary {
   driverId: string;
@@ -39,7 +38,14 @@ export default function TeamRoster({
     const load = async () => {
       setLoading(true);
       try {
-        const vm = await getTeamRosterViewModel(memberships);
+        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);
       } finally {
         setLoading(false);
@@ -64,6 +70,19 @@ export default function TeamRoster({
     return role.charAt(0).toUpperCase() + role.slice(1);
   };
 
+  function getRoleOrder(role: TeamRole): number {
+    switch (role) {
+      case 'owner':
+        return 0;
+      case 'manager':
+        return 1;
+      case 'driver':
+        return 2;
+      default:
+        return 3;
+    }
+  }
+
   const sortedMembers = viewModel
     ? [...viewModel.members].sort((a, b) => {
         switch (sortBy) {
@@ -73,8 +92,7 @@ export default function TeamRoster({
             return ratingB - ratingA;
           }
           case 'role': {
-            const roleOrder: Record<TeamRole, number> = { owner: 0, manager: 1, driver: 2 };
-            return roleOrder[a.role] - roleOrder[b.role];
+            return getRoleOrder(a.role) - getRoleOrder(b.role);
           }
           case 'name': {
             return a.driver.name.localeCompare(b.driver.name);
@@ -110,7 +128,7 @@ export default function TeamRoster({
           <label className="text-sm text-gray-400">Sort by:</label>
           <select
             value={sortBy}
-            onChange={(e) => setSortBy(e.target.value as any)}
+            onChange={(e) => setSortBy(e.target.value as typeof sortBy)}
             className="px-3 py-1 bg-deep-graphite border border-charcoal-outline rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue"
           >
             <option value="rating">Rating</option>