wip

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

@@ -1,6 +1,7 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
+import { useParams } from 'next/navigation';
 import Card from '@/components/ui/Card';
 import StandingsTable from '@/components/leagues/StandingsTable';
 import {
@@ -8,20 +9,32 @@ import {
   type DriverDTO,
   type LeagueDriverSeasonStatsDTO,
 } from '@gridpilot/racing';
-import { getGetLeagueDriverSeasonStatsQuery, getDriverRepository } from '@/lib/di-container';
+import {
+  getGetLeagueDriverSeasonStatsQuery,
+  getDriverRepository,
+  getLeagueMembershipRepository
+} from '@/lib/di-container';
+import { useEffectiveDriverId } from '@/lib/currentDriver';
+import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
+import type { MembershipRole, LeagueMembership } from '@/lib/leagueMembership';
 
-export default function LeagueStandingsPage({ params }: any) {
-  const leagueId = params.id;
+export default function LeagueStandingsPage() {
+  const params = useParams();
+  const leagueId = params.id as string;
+  const currentDriverId = useEffectiveDriverId();
 
   const [standings, setStandings] = useState<LeagueDriverSeasonStatsDTO[]>([]);
   const [drivers, setDrivers] = useState<DriverDTO[]>([]);
+  const [memberships, setMemberships] = useState<LeagueMembership[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [isAdmin, setIsAdmin] = useState(false);
 
-  const loadData = async () => {
+  const loadData = useCallback(async () => {
     try {
       const getLeagueDriverSeasonStatsQuery = getGetLeagueDriverSeasonStatsQuery();
       const driverRepo = getDriverRepository();
+      const membershipRepo = getLeagueMembershipRepository();
 
       const leagueStandings = await getLeagueDriverSeasonStatsQuery.execute({ leagueId });
       setStandings(leagueStandings);
@@ -31,17 +44,86 @@ export default function LeagueStandingsPage({ params }: any) {
         .map((driver) => EntityMappers.toDriverDTO(driver))
         .filter((dto): dto is DriverDTO => dto !== null);
       setDrivers(driverDtos);
+
+      // Load league memberships from repository (consistent with other data)
+      const allMemberships = await membershipRepo.getLeagueMembers(leagueId);
+      // Convert to the format expected by StandingsTable
+      const membershipData: LeagueMembership[] = allMemberships.map(m => ({
+        leagueId: m.leagueId,
+        driverId: m.driverId,
+        role: m.role,
+        status: m.status,
+        joinedAt: m.joinedAt instanceof Date ? m.joinedAt.toISOString() : String(m.joinedAt),
+      }));
+      setMemberships(membershipData);
+
+      // Check if current user is admin
+      const membership = await membershipRepo.getMembership(leagueId, currentDriverId);
+      setIsAdmin(membership ? isLeagueAdminOrHigherRole(membership.role) : false);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to load standings');
     } finally {
       setLoading(false);
     }
-  };
+  }, [leagueId, currentDriverId]);
 
   useEffect(() => {
     loadData();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [leagueId]);
+  }, [loadData]);
+
+  const handleRemoveMember = async (driverId: string) => {
+    if (!confirm('Are you sure you want to remove this member?')) {
+      return;
+    }
+
+    try {
+      const membershipRepo = getLeagueMembershipRepository();
+      const performer = await membershipRepo.getMembership(leagueId, currentDriverId);
+      if (!performer || (performer.role !== 'owner' && performer.role !== 'admin')) {
+        throw new Error('Only owners or admins can remove members');
+      }
+
+      const membership = await membershipRepo.getMembership(leagueId, driverId);
+      if (!membership) {
+        throw new Error('Member not found');
+      }
+      if (membership.role === 'owner') {
+        throw new Error('Cannot remove the league owner');
+      }
+
+      await membershipRepo.removeMembership(leagueId, driverId);
+      await loadData();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to remove member');
+    }
+  };
+
+  const handleUpdateRole = async (driverId: string, newRole: MembershipRole) => {
+    try {
+      const membershipRepo = getLeagueMembershipRepository();
+      const performer = await membershipRepo.getMembership(leagueId, currentDriverId);
+      if (!performer || performer.role !== 'owner') {
+        throw new Error('Only the league owner can update roles');
+      }
+
+      const membership = await membershipRepo.getMembership(leagueId, driverId);
+      if (!membership) {
+        throw new Error('Member not found');
+      }
+      if (membership.role === 'owner') {
+        throw new Error('Cannot change the owner role');
+      }
+
+      await membershipRepo.saveMembership({
+        ...membership,
+        role: newRole,
+      });
+
+      await loadData();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update role');
+    }
+  };
 
   if (loading) {
     return (
@@ -59,10 +141,68 @@ export default function LeagueStandingsPage({ params }: any) {
     );
   }
 
+  const leader = standings[0];
+  const totalRaces = Math.max(...standings.map(s => s.racesStarted), 0);
+
   return (
-    <Card>
-      <h2 className="text-xl font-semibold text-white mb-4">Standings</h2>
-      <StandingsTable standings={standings} drivers={drivers} leagueId={leagueId} />
-    </Card>
+    <div className="space-y-6">
+      {/* Championship Stats */}
+      {standings.length > 0 && (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <Card>
+            <div className="flex items-center gap-3">
+              <div className="w-12 h-12 rounded-full bg-yellow-500/10 flex items-center justify-center">
+                <span className="text-2xl">🏆</span>
+              </div>
+              <div>
+                <p className="text-xs text-gray-400 mb-1">Championship Leader</p>
+                <p className="font-bold text-white">{drivers.find(d => d.id === leader?.driverId)?.name || 'N/A'}</p>
+                <p className="text-sm text-yellow-400 font-medium">{leader?.totalPoints || 0} points</p>
+              </div>
+            </div>
+          </Card>
+
+          <Card>
+            <div className="flex items-center gap-3">
+              <div className="w-12 h-12 rounded-full bg-primary-blue/10 flex items-center justify-center">
+                <span className="text-2xl">🏁</span>
+              </div>
+              <div>
+                <p className="text-xs text-gray-400 mb-1">Races Completed</p>
+                <p className="text-2xl font-bold text-white">{totalRaces}</p>
+                <p className="text-sm text-gray-400">Season in progress</p>
+              </div>
+            </div>
+          </Card>
+
+          <Card>
+            <div className="flex items-center gap-3">
+              <div className="w-12 h-12 rounded-full bg-performance-green/10 flex items-center justify-center">
+                <span className="text-2xl">👥</span>
+              </div>
+              <div>
+                <p className="text-xs text-gray-400 mb-1">Active Drivers</p>
+                <p className="text-2xl font-bold text-white">{standings.length}</p>
+                <p className="text-sm text-gray-400">Competing for points</p>
+              </div>
+            </div>
+          </Card>
+        </div>
+      )}
+
+      <Card>
+        <h2 className="text-xl font-semibold text-white mb-4">Championship Standings</h2>
+        <StandingsTable
+          standings={standings}
+          drivers={drivers}
+          leagueId={leagueId}
+          memberships={memberships}
+          currentDriverId={currentDriverId}
+          isAdmin={isAdmin}
+          onRemoveMember={handleRemoveMember}
+          onUpdateRole={handleUpdateRole}
+        />
+      </Card>
+    </div>
   );
 }