website refactor

apps/website/app/leagues/[id]/roster/page.tsx

@@ -3,6 +3,9 @@ import { notFound } from 'next/navigation';
 import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
+import { RosterTable } from '@/components/leagues/RosterTable';
+
+import { DateDisplay } from '@/lib/display-objects/DateDisplay';
 
 interface Props {
   params: Promise<{ id: string }>;
@@ -17,7 +20,13 @@ export default async function LeagueRosterPage({ params }: Props) {
   }
 
   const data = result.unwrap();
-  const members = data.memberships.members || [];
+  const members = (data.memberships.members || []).map(m => ({
+    driverId: m.driverId,
+    driverName: m.driver.name,
+    role: m.role,
+    joinedAt: m.joinedAt,
+    joinedAtLabel: DateDisplay.formatShort(m.joinedAt)
+  }));
 
   return (
     <Stack gap={8}>
@@ -26,42 +35,7 @@ export default async function LeagueRosterPage({ params }: Props) {
         <Text size="sm" color="text-zinc-500">All drivers currently registered in this league.</Text>
       </Box>
 
-      <Box border borderColor="zinc-800" bg="zinc-900/30" overflow="hidden">
-        <table className="w-full text-left border-collapse">
-          <thead>
-            <tr className="border-b border-zinc-800 bg-zinc-900/50">
-              <th className="px-6 py-4 text-xs font-bold uppercase tracking-widest text-zinc-500">Driver</th>
-              <th className="px-6 py-4 text-xs font-bold uppercase tracking-widest text-zinc-500">Role</th>
-              <th className="px-6 py-4 text-xs font-bold uppercase tracking-widest text-zinc-500">Joined</th>
-            </tr>
-          </thead>
-          <tbody>
-            {members.map((member) => (
-              <tr key={member.driverId} className="border-b border-zinc-800/50 hover:bg-zinc-800/30 transition-colors">
-                <td className="px-6 py-4">
-                  <Box display="flex" alignItems="center" gap={3}>
-                    <Box w="8" h="8" bg="zinc-800" rounded="full" />
-                    <Text weight="bold" color="text-white">{member.driver.name}</Text>
-                  </Box>
-                </td>
-                <td className="px-6 py-4">
-                  <Text size="xs" color="text-zinc-400" uppercase weight="bold">{member.role}</Text>
-                </td>
-                <td className="px-6 py-4">
-                  <Text size="sm" color="text-zinc-500">{new Date(member.joinedAt).toLocaleDateString()}</Text>
-                </td>
-              </tr>
-            ))}
-            {members.length === 0 && (
-              <tr>
-                <td colSpan={3} className="px-6 py-12 text-center">
-                  <Text color="text-zinc-600" italic>No members found in this league.</Text>
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-      </Box>
+      <RosterTable members={members} />
     </Stack>
   );
-}
+}

apps/website/app/leagues/[id]/standings/page.tsx

@@ -30,14 +30,10 @@ export default async function Page({ params }: Props) {
         currentDriverId: null,
         isAdmin: false,
       }}
-      onRemoveMember={() => {}}
-      onUpdateRole={() => {}}
     />;
   }
 
   return <LeagueStandingsTemplate
     viewData={result.unwrap()}
-    onRemoveMember={() => {}}
-    onUpdateRole={() => {}}
   />;
-}
+}