wip

apps/website/components/leagues/JoinLeagueButton.tsx

@@ -2,14 +2,9 @@
 
 import { useState } from 'react';
 import Button from '../ui/Button';
-import {
-  getMembership,
-  joinLeague,
-  leaveLeague,
-  requestToJoin,
-  getCurrentDriverId,
-  type MembershipStatus,
-} from '@/lib/racingLegacyFacade';
+import { getMembership, type MembershipStatus } from '@/lib/leagueMembership';
+import { useEffectiveDriverId } from '@/lib/currentDriver';
+import { getJoinLeagueUseCase, getLeagueMembershipRepository } from '@/lib/di-container';
 
 interface JoinLeagueButtonProps {
   leagueId: string;
@@ -22,9 +17,9 @@ export default function JoinLeagueButton({
   isInviteOnly = false,
   onMembershipChange,
 }: JoinLeagueButtonProps) {
-  const currentDriverId = getCurrentDriverId();
+  const currentDriverId = useEffectiveDriverId();
   const membership = getMembership(leagueId, currentDriverId);
-  
+
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
@@ -34,11 +29,27 @@ export default function JoinLeagueButton({
     setLoading(true);
     setError(null);
     try {
+      const membershipRepo = getLeagueMembershipRepository();
+
       if (isInviteOnly) {
-        requestToJoin(leagueId, currentDriverId);
+        // For alpha, treat "request to join" as creating a pending membership
+        const pending = await membershipRepo.getMembership(leagueId, currentDriverId);
+        if (pending) {
+          throw new Error('Already a member or have a pending request');
+        }
+
+        await membershipRepo.saveMembership({
+          leagueId,
+          driverId: currentDriverId,
+          role: 'member',
+          status: 'pending',
+          joinedAt: new Date(),
+        });
       } else {
-        joinLeague(leagueId, currentDriverId);
+        const useCase = getJoinLeagueUseCase();
+        await useCase.execute({ leagueId, driverId: currentDriverId });
       }
+
       onMembershipChange?.();
       setShowConfirmDialog(false);
     } catch (err) {
@@ -52,7 +63,16 @@ export default function JoinLeagueButton({
     setLoading(true);
     setError(null);
     try {
-      leaveLeague(leagueId, currentDriverId);
+      const membershipRepo = getLeagueMembershipRepository();
+      const existing = await membershipRepo.getMembership(leagueId, currentDriverId);
+      if (!existing) {
+        throw new Error('Not a member of this league');
+      }
+      if (existing.role === 'owner') {
+        throw new Error('League owner cannot leave the league');
+      }
+      await membershipRepo.removeMembership(leagueId, currentDriverId);
+
       onMembershipChange?.();
       setShowConfirmDialog(false);
     } catch (err) {

apps/website/components/leagues/LeagueAdmin.tsx

@@ -1,23 +1,33 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
-import { useRouter } from 'next/navigation';
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useRouter, useSearchParams, usePathname } from 'next/navigation';
 import Button from '../ui/Button';
 import Card from '../ui/Card';
 import LeagueMembers from './LeagueMembers';
+import ScheduleRaceForm from './ScheduleRaceForm';
 import { League } from '@gridpilot/racing/domain/entities/League';
 import {
-  getJoinRequests,
-  approveJoinRequest,
-  rejectJoinRequest,
-  removeMember,
-  updateMemberRole,
-  getCurrentDriverId,
-  type JoinRequest,
-  type MembershipRole,
-} from '@/lib/racingLegacyFacade';
-import { getDriverRepository } from '@/lib/di-container';
-import { Driver } from '@gridpilot/racing/domain/entities/Driver';
+  getLeagueMembershipRepository,
+  getDriverStats,
+  getAllDriverRankings,
+  getDriverRepository,
+} from '@/lib/di-container';
+import { useEffectiveDriverId } from '@/lib/currentDriver';
+import type { MembershipRole } from '@/lib/leagueMembership';
+import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
+import { EntityMappers } from '@gridpilot/racing/application/mappers/EntityMappers';
+import DriverSummaryPill from '@/components/profile/DriverSummaryPill';
+import DriverIdentity from '@/components/drivers/DriverIdentity';
+import Modal from '@/components/ui/Modal';
+
+interface JoinRequest {
+  id: string;
+  leagueId: string;
+  driverId: string;
+  requestedAt: Date;
+  message?: string;
+}
 
 interface LeagueAdminProps {
   league: League;
@@ -26,24 +36,38 @@ interface LeagueAdminProps {
 
 export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps) {
   const router = useRouter();
-  const currentDriverId = getCurrentDriverId();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const currentDriverId = useEffectiveDriverId();
   const [joinRequests, setJoinRequests] = useState<JoinRequest[]>([]);
-  const [requestDrivers, setRequestDrivers] = useState<Driver[]>([]);
+  const [requestDriversById, setRequestDriversById] = useState<Record<string, DriverDTO>>({});
+  const [ownerDriver, setOwnerDriver] = useState<DriverDTO | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [activeTab, setActiveTab] = useState<'members' | 'requests' | 'races' | 'settings'>('members');
+  const [activeTab, setActiveTab] = useState<'members' | 'requests' | 'races' | 'settings' | 'disputes'>('members');
+  const [rejectReason, setRejectReason] = useState('');
 
   const loadJoinRequests = useCallback(async () => {
     setLoading(true);
     try {
-      const requests = getJoinRequests(league.id);
+      const membershipRepo = getLeagueMembershipRepository();
+      const requests = await membershipRepo.getJoinRequests(league.id);
       setJoinRequests(requests);
 
       const driverRepo = getDriverRepository();
-      const drivers = await Promise.all(
-        requests.map(r => driverRepo.findById(r.driverId))
+      const uniqueDriverIds = Array.from(new Set(requests.map((r) => r.driverId)));
+      const driverEntities = await Promise.all(
+        uniqueDriverIds.map((id) => driverRepo.findById(id)),
       );
-      setRequestDrivers(drivers.filter((d): d is Driver => d !== null));
+      const driverDtos = driverEntities
+        .map((driver) => (driver ? EntityMappers.toDriverDTO(driver) : null))
+        .filter((dto): dto is DriverDTO => dto !== null);
+
+      const byId: Record<string, DriverDTO> = {};
+      for (const dto of driverDtos) {
+        byId[dto.id] = dto;
+      }
+      setRequestDriversById(byId);
     } catch (err) {
       console.error('Failed to load join requests:', err);
     } finally {
@@ -55,52 +79,189 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
     loadJoinRequests();
   }, [loadJoinRequests]);
 
-  const handleApproveRequest = (requestId: string) => {
+  useEffect(() => {
+    async function loadOwner() {
+      try {
+        const driverRepo = getDriverRepository();
+        const entity = await driverRepo.findById(league.ownerId);
+        setOwnerDriver(EntityMappers.toDriverDTO(entity));
+      } catch (err) {
+        console.error('Failed to load league owner:', err);
+      }
+    }
+
+    loadOwner();
+  }, [league.ownerId]);
+
+  const handleApproveRequest = async (requestId: string) => {
     try {
-      approveJoinRequest(requestId);
-      loadJoinRequests();
+      const membershipRepo = getLeagueMembershipRepository();
+      const requests = await membershipRepo.getJoinRequests(league.id);
+      const request = requests.find((r) => r.id === requestId);
+      if (!request) {
+        throw new Error('Join request not found');
+      }
+
+      await membershipRepo.saveMembership({
+        leagueId: request.leagueId,
+        driverId: request.driverId,
+        role: 'member',
+        status: 'active',
+        joinedAt: new Date(),
+      });
+      await membershipRepo.removeJoinRequest(requestId);
+
+      await loadJoinRequests();
       onLeagueUpdate?.();
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to approve request');
     }
   };
 
-  const handleRejectRequest = (requestId: string) => {
+  const handleRejectRequest = async (requestId: string, trimmedReason: string) => {
     try {
-      rejectJoinRequest(requestId);
-      loadJoinRequests();
+      const membershipRepo = getLeagueMembershipRepository();
+      // Alpha-only: we do not persist the reason yet, but we at least log it.
+      console.log('Join request rejected with reason:', {
+        requestId,
+        reason: trimmedReason,
+      });
+      await membershipRepo.removeJoinRequest(requestId);
+      await loadJoinRequests();
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to reject request');
     }
   };
 
-  const handleRemoveMember = (driverId: string) => {
+  const handleRemoveMember = async (driverId: string) => {
     if (!confirm('Are you sure you want to remove this member?')) {
       return;
     }
 
     try {
-      removeMember(league.id, driverId, currentDriverId);
+      const membershipRepo = getLeagueMembershipRepository();
+      const performer = await membershipRepo.getMembership(league.id, currentDriverId);
+      if (!performer || (performer.role !== 'owner' && performer.role !== 'admin')) {
+        throw new Error('Only owners or admins can remove members');
+      }
+
+      const membership = await membershipRepo.getMembership(league.id, driverId);
+      if (!membership) {
+        throw new Error('Member not found');
+      }
+      if (membership.role === 'owner') {
+        throw new Error('Cannot remove the league owner');
+      }
+
+      await membershipRepo.removeMembership(league.id, driverId);
       onLeagueUpdate?.();
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to remove member');
     }
   };
 
-  const handleUpdateRole = (driverId: string, newRole: MembershipRole) => {
+  const handleUpdateRole = async (driverId: string, newRole: MembershipRole) => {
     try {
-      updateMemberRole(league.id, driverId, newRole, currentDriverId);
+      const membershipRepo = getLeagueMembershipRepository();
+      const performer = await membershipRepo.getMembership(league.id, currentDriverId);
+      if (!performer || performer.role !== 'owner') {
+        throw new Error('Only the league owner can update roles');
+      }
+
+      const membership = await membershipRepo.getMembership(league.id, 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,
+      });
+
       onLeagueUpdate?.();
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to update role');
     }
   };
 
-  const getDriverName = (driverId: string): string => {
-    const driver = requestDrivers.find(d => d.id === driverId);
-    return driver?.name || 'Unknown Driver';
+
+  const modal = searchParams?.get('modal');
+  const modalRequestId = searchParams?.get('requestId');
+
+  const activeRejectRequest =
+    modal === 'reject-request'
+      ? joinRequests.find((r) => r.id === modalRequestId) ?? null
+      : null;
+
+  useEffect(() => {
+    if (!activeRejectRequest) {
+      setRejectReason('');
+    }
+  }, [activeRejectRequest?.id]);
+
+  const isRejectModalOpen = modal === 'reject-request' && !!activeRejectRequest;
+
+  const openRejectModal = (requestId: string) => {
+    const params = new URLSearchParams(searchParams?.toString());
+    params.set('modal', 'reject-request');
+    params.set('requestId', requestId);
+    const query = params.toString();
+    const url = query ? `${pathname}?${query}` : pathname;
+    router.push(url, { scroll: false });
   };
 
+  const closeModal = () => {
+    const params = new URLSearchParams(searchParams?.toString());
+    params.delete('modal');
+    params.delete('requestId');
+    const query = params.toString();
+    const url = query ? `${pathname}?${query}` : pathname;
+    router.push(url, { scroll: false });
+  };
+
+  const ownerSummary = useMemo(() => {
+    if (!ownerDriver) {
+      return null;
+    }
+
+    const stats = getDriverStats(ownerDriver.id);
+    const allRankings = getAllDriverRankings();
+
+    let rating: number | null = stats?.rating ?? null;
+    let rank: number | null = null;
+
+    if (stats) {
+      if (typeof stats.overallRank === 'number' && stats.overallRank > 0) {
+        rank = stats.overallRank;
+      } else {
+        const indexInGlobal = allRankings.findIndex(
+          (stat) => stat.driverId === stats.driverId,
+        );
+        if (indexInGlobal !== -1) {
+          rank = indexInGlobal + 1;
+        }
+      }
+
+      if (rating === null) {
+        const globalEntry = allRankings.find(
+          (stat) => stat.driverId === stats.driverId,
+        );
+        if (globalEntry) {
+          rating = globalEntry.rating;
+        }
+      }
+    }
+
+    return {
+      driver: ownerDriver,
+      rating,
+      rank,
+    };
+  }, [ownerDriver]);
+
   return (
     <div>
       {error && (
@@ -153,6 +314,16 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
           >
             Create Race
           </button>
+          <button
+            onClick={() => setActiveTab('disputes')}
+            className={`pb-3 px-1 font-medium transition-colors ${
+              activeTab === 'disputes'
+                ? 'text-primary-blue border-b-2 border-primary-blue'
+                : 'text-gray-400 hover:text-white'
+            }`}
+          >
+            Disputes
+          </button>
           <button
             onClick={() => setActiveTab('settings')}
             className={`pb-3 px-1 font-medium transition-colors ${
@@ -191,48 +362,60 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
             </div>
           ) : (
             <div className="space-y-4">
-              {joinRequests.map((request) => (
-                <div
-                  key={request.id}
-                  className="p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
-                >
-                  <div className="flex items-center justify-between">
-                    <div className="flex-1">
-                      <h3 className="text-white font-medium">
-                        {getDriverName(request.driverId)}
-                      </h3>
-                      <p className="text-sm text-gray-400 mt-1">
-                        Requested {new Date(request.requestedAt).toLocaleDateString('en-US', {
-                          month: 'short',
-                          day: 'numeric',
-                          year: 'numeric',
-                        })}
-                      </p>
-                      {request.message && (
-                        <p className="text-sm text-gray-400 mt-2 italic">
-                          &ldquo;{request.message}&rdquo;
-                        </p>
-                      )}
-                    </div>
-                    <div className="flex gap-2">
-                      <Button
-                        variant="primary"
-                        onClick={() => handleApproveRequest(request.id)}
-                        className="px-4"
-                      >
-                        Approve
-                      </Button>
-                      <Button
-                        variant="secondary"
-                        onClick={() => handleRejectRequest(request.id)}
-                        className="px-4"
-                      >
-                        Reject
-                      </Button>
+              {joinRequests.map((request) => {
+                const driver = requestDriversById[request.driverId];
+                const requestedOn = new Date(request.requestedAt).toLocaleDateString('en-US', {
+                  month: 'short',
+                  day: 'numeric',
+                  year: 'numeric',
+                });
+                const metaPieces = [
+                  `Requested ${requestedOn}`,
+                  request.message ? `Message: "${request.message}"` : null,
+                ].filter(Boolean);
+                const meta = metaPieces.join(' • ');
+
+                return (
+                  <div
+                    key={request.id}
+                    className="p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
+                  >
+                    <div className="flex items-center justify-between gap-4">
+                      <div className="flex-1 min-w-0">
+                        {driver ? (
+                          <DriverIdentity
+                            driver={driver}
+                            href={`/drivers/${request.driverId}?from=league-join-requests&leagueId=${league.id}`}
+                            meta={meta}
+                            size="sm"
+                          />
+                        ) : (
+                          <div>
+                            <h3 className="text-white font-medium">Unknown Driver</h3>
+                            <p className="text-sm text-gray-400 mt-1">Unable to load driver details</p>
+                          </div>
+                        )}
+                      </div>
+                      <div className="flex gap-2 shrink-0">
+                        <Button
+                          variant="primary"
+                          onClick={() => handleApproveRequest(request.id)}
+                          className="px-4"
+                        >
+                          Approve
+                        </Button>
+                        <Button
+                          variant="secondary"
+                          onClick={() => openRejectModal(request.id)}
+                          className="px-4"
+                        >
+                          Reject
+                        </Button>
+                      </div>
                     </div>
                   </div>
-                </div>
-              ))}
+                );
+              })}
             </div>
           )}
         </Card>
@@ -240,16 +423,40 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
 
       {activeTab === 'races' && (
         <Card>
-          <h2 className="text-xl font-semibold text-white mb-4">Create New Race</h2>
-          <p className="text-gray-400 mb-4">
-            Schedule a new race for this league
+          <h2 className="text-xl font-semibold text-white mb-4">Schedule Race</h2>
+          <p className="text-gray-400 mb-6">
+            Create a new race for this league; this is an alpha-only in-memory scheduler.
           </p>
-          <Button
-            variant="primary"
-            onClick={() => router.push(`/races?leagueId=${league.id}`)}
-          >
-            Go to Race Scheduler
-          </Button>
+          <ScheduleRaceForm
+            preSelectedLeagueId={league.id}
+            onSuccess={(race) => {
+              router.push(`/leagues/${league.id}/races/${race.id}`);
+            }}
+          />
+        </Card>
+      )}
+
+      {activeTab === 'disputes' && (
+        <Card>
+          <h2 className="text-xl font-semibold text-white mb-4">Disputes (Alpha)</h2>
+          <div className="space-y-4">
+            <p className="text-sm text-gray-400">
+              Demo-only view of potential protest and dispute workflow for this league.
+            </p>
+            <div className="rounded-lg border border-charcoal-outline bg-deep-graphite/70 p-4">
+              <h3 className="text-sm font-semibold text-white mb-1">Sample Protest</h3>
+              <p className="text-xs text-gray-400 mb-2">
+                Driver contact in Turn 3, Lap 12. Protest submitted by a driver against another
+                competitor for avoidable contact.
+              </p>
+              <p className="text-xs text-gray-500">
+                In the full product, this area would show protests, steward reviews, penalties, and appeals.
+              </p>
+            </div>
+            <p className="text-xs text-gray-500">
+              For the alpha, this tab is static and read-only and does not affect any race or league state.
+            </p>
+          </div>
         </Card>
       )}
 
@@ -257,50 +464,165 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
         <Card>
           <h2 className="text-xl font-semibold text-white mb-4">League Settings</h2>
           
-          <div className="space-y-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-300 mb-2">
-                League Name
-              </label>
-              <p className="text-white">{league.name}</p>
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium text-gray-300 mb-2">
-                Description
-              </label>
-              <p className="text-white">{league.description}</p>
-            </div>
-
-            <div className="pt-4 border-t border-charcoal-outline">
-              <h3 className="text-white font-medium mb-3">Racing Settings</h3>
-              
-              <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-6">
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+              <div className="lg:col-span-2 space-y-4">
                 <div>
-                  <label className="text-sm text-gray-500">Points System</label>
-                  <p className="text-white">{league.settings.pointsSystem.toUpperCase()}</p>
+                  <label className="block text-sm font-medium text-gray-300 mb-2">
+                    League Name
+                  </label>
+                  <p className="text-white">{league.name}</p>
                 </div>
 
                 <div>
-                  <label className="text-sm text-gray-500">Session Duration</label>
-                  <p className="text-white">{league.settings.sessionDuration} minutes</p>
+                  <label className="block text-sm font-medium text-gray-300 mb-2">
+                    Description
+                  </label>
+                  <p className="text-white">{league.description}</p>
                 </div>
 
-                <div>
-                  <label className="text-sm text-gray-500">Qualifying Format</label>
-                  <p className="text-white capitalize">{league.settings.qualifyingFormat}</p>
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-2 border-t border-charcoal-outline">
+                  <div>
+                    <label className="text-sm text-gray-500">Season / Series</label>
+                    <p className="text-white">Alpha Demo Season</p>
+                  </div>
+                  <div>
+                    <label className="text-sm text-gray-500">Points System</label>
+                    <p className="text-white">{league.settings.pointsSystem.toUpperCase()}</p>
+                  </div>
+                  <div>
+                    <label className="text-sm text-gray-500">Qualifying Format</label>
+                    <p className="text-white capitalize">{league.settings.qualifyingFormat}</p>
+                  </div>
                 </div>
+
+                {league.socialLinks && (
+                  <div className="pt-4 border-t border-charcoal-outline space-y-2">
+                    <h3 className="text-sm font-medium text-gray-300">Social Links</h3>
+                    <div className="space-y-1 text-sm">
+                      {league.socialLinks.discordUrl && (
+                        <div className="flex items-center justify-between gap-3">
+                          <span className="text-gray-400">Discord</span>
+                          <a
+                            href={league.socialLinks.discordUrl}
+                            target="_blank"
+                            rel="noreferrer"
+                            className="text-primary-blue hover:underline break-all"
+                          >
+                            {league.socialLinks.discordUrl}
+                          </a>
+                        </div>
+                      )}
+                      {league.socialLinks.youtubeUrl && (
+                        <div className="flex items-center justify-between gap-3">
+                          <span className="text-gray-400">YouTube</span>
+                          <a
+                            href={league.socialLinks.youtubeUrl}
+                            target="_blank"
+                            rel="noreferrer"
+                            className="text-red-400 hover:underline break-all"
+                          >
+                            {league.socialLinks.youtubeUrl}
+                          </a>
+                        </div>
+                      )}
+                      {league.socialLinks.websiteUrl && (
+                        <div className="flex items-center justify-between gap-3">
+                          <span className="text-gray-400">Website</span>
+                          <a
+                            href={league.socialLinks.websiteUrl}
+                            target="_blank"
+                            rel="noreferrer"
+                            className="text-gray-100 hover:underline break-all"
+                          >
+                            {league.socialLinks.websiteUrl}
+                          </a>
+                        </div>
+                      )}
+                      {!league.socialLinks.discordUrl &&
+                        !league.socialLinks.youtubeUrl &&
+                        !league.socialLinks.websiteUrl && (
+                          <p className="text-gray-500">
+                            No social links configured for this league in the alpha demo.
+                          </p>
+                        )}
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <div className="space-y-3">
+                <h3 className="text-sm font-medium text-gray-300">League Owner</h3>
+                {ownerSummary ? (
+                  <DriverSummaryPill
+                    driver={ownerSummary.driver}
+                    rating={ownerSummary.rating}
+                    rank={ownerSummary.rank}
+                  />
+                ) : (
+                  <p className="text-sm text-gray-500">Loading owner details...</p>
+                )}
               </div>
             </div>
 
             <div className="pt-4 border-t border-charcoal-outline">
               <p className="text-sm text-gray-400">
-                League settings editing will be available in a future update
+                League settings editing is alpha-only and changes are not persisted yet.
               </p>
             </div>
           </div>
         </Card>
       )}
+
+      <Modal
+        title="Reject join request"
+        description={
+          activeRejectRequest
+            ? `Provide a reason for rejecting ${requestDriversById[activeRejectRequest.driverId]?.name ?? 'this driver'}.`
+            : 'Provide a reason for rejecting this join request.'
+        }
+        primaryActionLabel="Reject"
+        secondaryActionLabel="Cancel"
+        onPrimaryAction={async () => {
+          const trimmed = rejectReason.trim();
+          if (!trimmed) {
+            setError('A rejection reason is required to reject a join request.');
+            return;
+          }
+          if (!activeRejectRequest) {
+            return;
+          }
+          await handleRejectRequest(activeRejectRequest.id, trimmed);
+          closeModal();
+        }}
+        onSecondaryAction={() => {
+          setRejectReason('');
+        }}
+        onOpenChange={(open) => {
+          if (!open) {
+            closeModal();
+          }
+        }}
+        isOpen={isRejectModalOpen}
+      >
+        <div className="space-y-3">
+          <p className="text-sm text-gray-300">
+            This will remove the join request and the driver will not be added to the league.
+          </p>
+          <div>
+            <label className="block text-sm font-medium text-gray-200 mb-1">
+              Rejection reason
+            </label>
+            <textarea
+              value={rejectReason}
+              onChange={(e) => setRejectReason(e.target.value)}
+              rows={4}
+              className="w-full rounded-lg border border-charcoal-outline bg-iron-gray/80 px-3 py-2 text-sm text-white placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-blue"
+              placeholder="Let the driver know why this request was rejected..."
+            />
+          </div>
+        </div>
+      </Modal>
     </div>
   );
 }

apps/website/components/leagues/LeagueCard.tsx

@@ -1,16 +1,22 @@
 'use client';
 
 import Link from 'next/link';
-import { League } from '@gridpilot/racing/domain/entities/League';
+import Image from 'next/image';
+import type { LeagueDTO } from '@gridpilot/racing/application/dto/LeagueDTO';
 import Card from '../ui/Card';
 import { getLeagueCoverClasses } from '@/lib/leagueCovers';
+import { getImageService } from '@/lib/di-container';
 
 interface LeagueCardProps {
-  league: League;
+  league: LeagueDTO;
   onClick?: () => void;
 }
 
 export default function LeagueCard({ league, onClick }: LeagueCardProps) {
+  const imageService = getImageService();
+  const coverUrl = imageService.getLeagueCover(league.id);
+  const logoUrl = imageService.getLeagueLogo(league.id);
+
   return (
     <div
       className="cursor-pointer hover:scale-[1.03] transition-transform duration-150"
@@ -18,7 +24,28 @@ export default function LeagueCard({ league, onClick }: LeagueCardProps) {
     >
       <Card>
         <div className="space-y-3">
-          <div className={getLeagueCoverClasses(league.id)} aria-hidden="true" />
+          <div className={getLeagueCoverClasses(league.id)} aria-hidden="true">
+            <div className="relative w-full h-full">
+              <Image
+                src={coverUrl}
+                alt={`${league.name} cover`}
+                fill
+                className="object-cover opacity-80"
+                sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
+              />
+              <div className="absolute left-4 bottom-4 flex items-center">
+                <div className="w-10 h-10 rounded-full overflow-hidden border border-charcoal-outline/80 bg-deep-graphite/80 shadow-[0_0_10px_rgba(0,0,0,0.6)]">
+                  <Image
+                    src={logoUrl}
+                    alt={`${league.name} logo`}
+                    width={40}
+                    height={40}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
 
           <div className="flex items-start justify-between">
             <h3 className="text-xl font-semibold text-white">{league.name}</h3>
@@ -32,14 +59,27 @@ export default function LeagueCard({ league, onClick }: LeagueCardProps) {
           </p>
           
           <div className="flex items-center justify-between pt-2 border-t border-charcoal-outline">
-            <div className="text-xs text-gray-500">
-              Owner:{' '}
-              <Link
-                href={`/drivers/${league.ownerId}?from=league&leagueId=${league.id}`}
-                className="text-primary-blue hover:underline"
-              >
-                {league.ownerId.slice(0, 8)}...
-              </Link>
+            <div className="flex flex-col text-xs text-gray-500">
+              <span>
+                Owner:{' '}
+                <Link
+                  href={`/drivers/${league.ownerId}?from=league&leagueId=${league.id}`}
+                  className="text-primary-blue hover:underline"
+                >
+                  {league.ownerId.slice(0, 8)}...
+                </Link>
+              </span>
+              <span className="mt-1 text-gray-400">
+                Slots:{' '}
+                <span className="text-white font-medium">
+                  {typeof league.usedSlots === 'number' ? league.usedSlots : '—'}
+                </span>
+                {' / '}
+                <span className="text-gray-300">
+                  {league.settings.maxDrivers ?? '—'}
+                </span>{' '}
+                used
+              </span>
             </div>
             <div className="text-xs text-primary-blue font-medium">
               {league.settings.pointsSystem.toUpperCase()}

apps/website/components/leagues/LeagueHeader.tsx

@@ -1,11 +1,20 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 import MembershipStatus from '@/components/leagues/MembershipStatus';
 import FeatureLimitationTooltip from '@/components/alpha/FeatureLimitationTooltip';
 import { getLeagueCoverClasses } from '@/lib/leagueCovers';
+import {
+  getDriverRepository,
+  getDriverStats,
+  getAllDriverRankings,
+  getImageService,
+} from '@/lib/di-container';
+import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
+import { EntityMappers } from '@gridpilot/racing/application/mappers/EntityMappers';
+import DriverSummaryPill from '@/components/profile/DriverSummaryPill';
 
 interface LeagueHeaderProps {
   leagueId: string;
@@ -22,7 +31,72 @@ export default function LeagueHeader({
   ownerId,
   ownerName,
 }: LeagueHeaderProps) {
-  const coverUrl = `https://picsum.photos/seed/${leagueId}/1200/280?blur=2`;
+  const imageService = getImageService();
+  const coverUrl = imageService.getLeagueCover(leagueId);
+  const logoUrl = imageService.getLeagueLogo(leagueId);
+
+  const [ownerDriver, setOwnerDriver] = useState<DriverDTO | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    async function loadOwner() {
+      try {
+        const driverRepo = getDriverRepository();
+        const entity = await driverRepo.findById(ownerId);
+        if (!entity || !isMounted) return;
+        setOwnerDriver(EntityMappers.toDriverDTO(entity));
+      } catch (err) {
+        console.error('Failed to load league owner for header:', err);
+      }
+    }
+
+    loadOwner();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [ownerId]);
+
+  const ownerSummary = useMemo(() => {
+    if (!ownerDriver) {
+      return null;
+    }
+
+    const stats = getDriverStats(ownerDriver.id);
+    const allRankings = getAllDriverRankings();
+
+    let rating: number | null = stats?.rating ?? null;
+    let rank: number | null = null;
+
+    if (stats) {
+      if (typeof stats.overallRank === 'number' && stats.overallRank > 0) {
+        rank = stats.overallRank;
+      } else {
+        const indexInGlobal = allRankings.findIndex(
+          (stat) => stat.driverId === stats.driverId,
+        );
+        if (indexInGlobal !== -1) {
+          rank = indexInGlobal + 1;
+        }
+      }
+
+      if (rating === null) {
+        const globalEntry = allRankings.find(
+          (stat) => stat.driverId === stats.driverId,
+        );
+        if (globalEntry) {
+          rating = globalEntry.rating;
+        }
+      }
+    }
+
+    return {
+      driver: ownerDriver,
+      rating,
+      rank,
+    };
+  }, [ownerDriver]);
 
   return (
     <div className="mb-8">
@@ -36,6 +110,17 @@ export default function LeagueHeader({
               className="object-cover opacity-80"
               sizes="100vw"
             />
+            <div className="absolute left-6 bottom-4 flex items-center">
+              <div className="h-16 w-16 rounded-full overflow-hidden border-2 border-charcoal-outline bg-deep-graphite/95 shadow-[0_0_18px_rgba(0,0,0,0.7)]">
+                <Image
+                  src={logoUrl}
+                  alt={`${leagueName} logo`}
+                  width={64}
+                  height={64}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -56,14 +141,27 @@ export default function LeagueHeader({
         <p className="text-gray-400 mb-2">{description}</p>
       )}
 
-      <div className="text-sm text-gray-400 mb-6">
-        <span className="mr-2">Owner:</span>
-        <Link
-          href={`/drivers/${ownerId}?from=league&leagueId=${leagueId}`}
-          className="text-primary-blue hover:underline"
-        >
-          {ownerName}
-        </Link>
+      <div className="mb-6 flex flex-col gap-2">
+        <span className="text-sm text-gray-400">Owner</span>
+        {ownerSummary ? (
+          <div className="inline-flex items-center gap-3">
+            <DriverSummaryPill
+              driver={ownerSummary.driver}
+              rating={ownerSummary.rating}
+              rank={ownerSummary.rank}
+              href={`/drivers/${ownerSummary.driver.id}?from=league&leagueId=${leagueId}`}
+            />
+          </div>
+        ) : (
+          <div className="text-sm text-gray-500">
+            <Link
+              href={`/drivers/${ownerId}?from=league&leagueId=${leagueId}`}
+              className="text-primary-blue hover:underline"
+            >
+              {ownerName}
+            </Link>
+          </div>
+        )}
       </div>
     </div>
   );

apps/website/components/leagues/LeagueMembers.tsx

@@ -1,15 +1,16 @@
 'use client';
 
 import { useState, useEffect, useCallback } from 'react';
-import Link from 'next/link';
-import { Driver } from '@gridpilot/racing/domain/entities/Driver';
+import DriverIdentity from '@/components/drivers/DriverIdentity';
+import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
+import { EntityMappers } from '@gridpilot/racing/application/mappers/EntityMappers';
 import { getDriverRepository, getDriverStats } from '@/lib/di-container';
 import {
   getLeagueMembers,
-  getCurrentDriverId,
   type LeagueMembership,
   type MembershipRole,
-} from '@/lib/racingLegacyFacade';
+} from '@/lib/leagueMembership';
+import { useEffectiveDriverId } from '@/lib/currentDriver';
 
 interface LeagueMembersProps {
   leagueId: string;
@@ -18,17 +19,17 @@ interface LeagueMembersProps {
   showActions?: boolean;
 }
 
-export default function LeagueMembers({ 
-  leagueId, 
-  onRemoveMember, 
+export default function LeagueMembers({
+  leagueId,
+  onRemoveMember,
   onUpdateRole,
-  showActions = false 
+  showActions = false
 }: LeagueMembersProps) {
   const [members, setMembers] = useState<LeagueMembership[]>([]);
-  const [drivers, setDrivers] = useState<Driver[]>([]);
+  const [driversById, setDriversById] = useState<Record<string, DriverDTO>>({});
   const [loading, setLoading] = useState(true);
   const [sortBy, setSortBy] = useState<'role' | 'name' | 'date' | 'rating' | 'points' | 'wins'>('rating');
-  const currentDriverId = getCurrentDriverId();
+  const currentDriverId = useEffectiveDriverId();
 
   const loadMembers = useCallback(async () => {
     setLoading(true);
@@ -37,10 +38,18 @@ export default function LeagueMembers({
       setMembers(membershipData);
 
       const driverRepo = getDriverRepository();
-      const driverData = await Promise.all(
-        membershipData.map(m => driverRepo.findById(m.driverId))
+      const driverEntities = await Promise.all(
+        membershipData.map((m) => driverRepo.findById(m.driverId))
       );
-      setDrivers(driverData.filter((d): d is Driver => d !== null));
+      const driverDtos = driverEntities
+        .map((driver) => (driver ? EntityMappers.toDriverDTO(driver) : null))
+        .filter((dto): dto is DriverDTO => dto !== null);
+
+      const byId: Record<string, DriverDTO> = {};
+      for (const dto of driverDtos) {
+        byId[dto.id] = dto;
+      }
+      setDriversById(byId);
     } catch (error) {
       console.error('Failed to load members:', error);
     } finally {
@@ -53,7 +62,7 @@ export default function LeagueMembers({
   }, [loadMembers]);
 
   const getDriverName = (driverId: string): string => {
-    const driver = drivers.find(d => d.id === driverId);
+    const driver = driversById[driverId];
     return driver?.name || 'Unknown Driver';
   };
 
@@ -160,6 +169,13 @@ export default function LeagueMembers({
               const cannotModify = member.role === 'owner';
               const driverStats = getDriverStats(member.driverId);
               const isTopPerformer = index < 3 && sortBy === 'rating';
+              const driver = driversById[member.driverId];
+              const roleLabel =
+                member.role.charAt(0).toUpperCase() + member.role.slice(1);
+              const ratingAndWinsMeta =
+                driverStats && typeof driverStats.rating === 'number'
+                  ? `Rating ${driverStats.rating} • ${driverStats.wins ?? 0} wins`
+                  : null;
 
               return (
                 <tr
@@ -168,12 +184,17 @@ export default function LeagueMembers({
                 >
                   <td className="py-3 px-4">
                     <div className="flex items-center gap-2">
-                      <Link
-                        href={`/drivers/${member.driverId}?from=league&leagueId=${leagueId}`}
-                        className="text-white font-medium hover:text-primary-blue transition-colors"
-                      >
-                        {getDriverName(member.driverId)}
-                      </Link>
+                      {driver ? (
+                        <DriverIdentity
+                          driver={driver}
+                          href={`/drivers/${member.driverId}?from=league-members&leagueId=${leagueId}`}
+                          contextLabel={roleLabel}
+                          meta={ratingAndWinsMeta}
+                          size="md"
+                        />
+                      ) : (
+                        <span className="text-white">Unknown Driver</span>
+                      )}
                       {isCurrentUser && (
                         <span className="text-xs text-gray-500">(You)</span>
                       )}

apps/website/components/leagues/LeagueSchedule.tsx

@@ -3,13 +3,13 @@
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { Race } from '@gridpilot/racing/domain/entities/Race';
-import { getRaceRepository } from '@/lib/di-container';
 import {
-  getCurrentDriverId,
-  isRegistered,
-  registerForRace,
-  withdrawFromRace,
-} from '@/lib/racingLegacyFacade';
+  getRaceRepository,
+  getIsDriverRegisteredForRaceQuery,
+  getRegisterForRaceUseCase,
+  getWithdrawFromRaceUseCase,
+} from '@/lib/di-container';
+import { useEffectiveDriverId } from '@/lib/currentDriver';
 
 interface LeagueScheduleProps {
   leagueId: string;
@@ -23,7 +23,7 @@ export default function LeagueSchedule({ leagueId }: LeagueScheduleProps) {
   const [registrationStates, setRegistrationStates] = useState<Record<string, boolean>>({});
   const [processingRace, setProcessingRace] = useState<string | null>(null);
 
-  const currentDriverId = getCurrentDriverId();
+  const currentDriverId = useEffectiveDriverId();
 
   useEffect(() => {
     loadRaces();
@@ -35,15 +35,24 @@ export default function LeagueSchedule({ leagueId }: LeagueScheduleProps) {
       const raceRepo = getRaceRepository();
       const allRaces = await raceRepo.findAll();
       const leagueRaces = allRaces
-        .filter(race => race.leagueId === leagueId)
-        .sort((a, b) => new Date(a.scheduledAt).getTime() - new Date(b.scheduledAt).getTime());
+        .filter((race) => race.leagueId === leagueId)
+        .sort(
+          (a, b) =>
+            new Date(a.scheduledAt).getTime() - new Date(b.scheduledAt).getTime(),
+        );
       setRaces(leagueRaces);
 
-      // Load registration states
+      const isRegisteredQuery = getIsDriverRegisteredForRaceQuery();
       const states: Record<string, boolean> = {};
-      leagueRaces.forEach(race => {
-        states[race.id] = isRegistered(race.id, currentDriverId);
-      });
+      await Promise.all(
+        leagueRaces.map(async (race) => {
+          const registered = await isRegisteredQuery.execute({
+            raceId: race.id,
+            driverId: currentDriverId,
+          });
+          states[race.id] = registered;
+        }),
+      );
       setRegistrationStates(states);
     } catch (error) {
       console.error('Failed to load races:', error);
@@ -63,8 +72,13 @@ export default function LeagueSchedule({ leagueId }: LeagueScheduleProps) {
 
     setProcessingRace(race.id);
     try {
-      registerForRace(race.id, currentDriverId, leagueId);
-      setRegistrationStates(prev => ({ ...prev, [race.id]: true }));
+      const useCase = getRegisterForRaceUseCase();
+      await useCase.execute({
+        raceId: race.id,
+        leagueId,
+        driverId: currentDriverId,
+      });
+      setRegistrationStates((prev) => ({ ...prev, [race.id]: true }));
     } catch (err) {
       alert(err instanceof Error ? err.message : 'Failed to register');
     } finally {
@@ -83,8 +97,12 @@ export default function LeagueSchedule({ leagueId }: LeagueScheduleProps) {
 
     setProcessingRace(race.id);
     try {
-      withdrawFromRace(race.id, currentDriverId);
-      setRegistrationStates(prev => ({ ...prev, [race.id]: false }));
+      const useCase = getWithdrawFromRaceUseCase();
+      await useCase.execute({
+        raceId: race.id,
+        driverId: currentDriverId,
+      });
+      setRegistrationStates((prev) => ({ ...prev, [race.id]: false }));
     } catch (err) {
       alert(err instanceof Error ? err.message : 'Failed to withdraw');
     } finally {

apps/website/components/leagues/MembershipStatus.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { getMembership, getCurrentDriverId, type MembershipRole } from '@/lib/racingLegacyFacade';
+import { getMembership, type MembershipRole } from '@/lib/leagueMembership';
+import { useEffectiveDriverId } from '@/lib/currentDriver';
 
 interface MembershipStatusProps {
   leagueId: string;
@@ -8,7 +9,7 @@ interface MembershipStatusProps {
 }
 
 export default function MembershipStatus({ leagueId, className = '' }: MembershipStatusProps) {
-  const currentDriverId = getCurrentDriverId();
+  const currentDriverId = useEffectiveDriverId();
   const membership = getMembership(leagueId, currentDriverId);
 
   if (!membership) {

apps/website/components/leagues/StandingsTable.tsx

@@ -1,19 +1,18 @@
 'use client';
 
-import Link from 'next/link';
-import { Standing } from '@gridpilot/racing/domain/entities/Standing';
-import { Driver } from '@gridpilot/racing/domain/entities/Driver';
+import DriverIdentity from '@/components/drivers/DriverIdentity';
+import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
+import type { LeagueDriverSeasonStatsDTO } from '@gridpilot/racing/application/dto/LeagueDriverSeasonStatsDTO';
 
 interface StandingsTableProps {
-  standings: Standing[];
-  drivers: Driver[];
+  standings: LeagueDriverSeasonStatsDTO[];
+  drivers: DriverDTO[];
   leagueId: string;
 }
 
 export default function StandingsTable({ standings, drivers, leagueId }: StandingsTableProps) {
-  const getDriverName = (driverId: string): string => {
-    const driver = drivers.find((d) => d.id === driverId);
-    return driver?.name || 'Unknown Driver';
+  const getDriver = (driverId: string): DriverDTO | undefined => {
+    return drivers.find((d) => d.id === driverId);
   };
 
   if (standings.length === 0) {
@@ -26,50 +25,121 @@ export default function StandingsTable({ standings, drivers, leagueId }: Standin
 
   return (
     <div className="overflow-x-auto">
-      <table className="w-full">
+      <table className="w-full text-sm">
         <thead>
           <tr className="border-b border-charcoal-outline">
-            <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Pos</th>
-            <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Driver</th>
-            <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Points</th>
-            <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Wins</th>
-            <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Races</th>
+            <th className="text-left py-3 px-4 font-semibold text-gray-400">Pos</th>
+            <th className="text-left py-3 px-4 font-semibold text-gray-400">Driver</th>
+            <th className="text-left py-3 px-4 font-semibold text-gray-400">Team</th>
+            <th className="text-left py-3 px-4 font-semibold text-gray-400">Total Pts</th>
+            <th className="text-left py-3 px-4 font-semibold text-gray-400">Pts / Race</th>
+            <th className="text-left py-3 px-4 font-semibold text-gray-400">Started</th>
+            <th className="text-left py-3 px-4 font-semibold text-gray-400">Finished</th>
+            <th className="text-left py-3 px-4 font-semibold text-gray-400">DNF</th>
+            <th className="text-left py-3 px-4 font-semibold text-gray-400">No‑Shows</th>
+            <th className="text-left py-3 px-4 font-semibold text-gray-400">Penalty</th>
+            <th className="text-left py-3 px-4 font-semibold text-gray-400">Bonus</th>
+            <th className="text-left py-3 px-4 font-semibold text-gray-400">Avg Finish</th>
+            <th className="text-left py-3 px-4 font-semibold text-gray-400">Rating Δ</th>
           </tr>
         </thead>
         <tbody>
-          {standings.map((standing) => {
-            const isLeader = standing.position === 1;
+          {standings.map((row) => {
+            const isLeader = row.position === 1;
+            const driver = getDriver(row.driverId);
+
+            const totalPointsLine =
+              row.penaltyPoints > 0
+                ? `Total Points: ${row.totalPoints} (-${row.penaltyPoints} penalty)`
+                : `Total Points: ${row.totalPoints}`;
+
+            const ratingDelta =
+              row.ratingChange === null || row.ratingChange === 0
+                ? '—'
+                : row.ratingChange > 0
+                ? `+${row.ratingChange}`
+                : `${row.ratingChange}`;
 
             return (
               <tr
-                key={`${standing.leagueId}-${standing.driverId}`}
+                key={`${row.leagueId}-${row.driverId}`}
                 className="border-b border-charcoal-outline/50 hover:bg-iron-gray/20 transition-colors"
               >
                 <td className="py-3 px-4">
                   <span className={`font-semibold ${isLeader ? 'text-yellow-500' : 'text-white'}`}>
-                    {standing.position}
+                    {row.position}
                   </span>
                 </td>
                 <td className="py-3 px-4">
-                  <Link
-                    href={`/drivers/${standing.driverId}?from=league&leagueId=${leagueId}`}
-                    className={
-                      isLeader
-                        ? 'text-white font-semibold hover:text-primary-blue transition-colors'
-                        : 'text-white hover:text-primary-blue transition-colors'
-                    }
-                  >
-                    {getDriverName(standing.driverId)}
-                  </Link>
+                  {driver ? (
+                    <DriverIdentity
+                      driver={driver}
+                      href={`/drivers/${row.driverId}?from=league-standings&leagueId=${leagueId}`}
+                      contextLabel={`P${row.position}`}
+                      size="sm"
+                      meta={totalPointsLine}
+                    />
+                  ) : (
+                    <span className="text-white">Unknown Driver</span>
+                  )}
                 </td>
                 <td className="py-3 px-4">
-                  <span className="text-white font-medium">{standing.points}</span>
+                  <span className="text-gray-300">
+                    {row.teamName ?? '—'}
+                  </span>
                 </td>
                 <td className="py-3 px-4">
-                  <span className="text-white">{standing.wins}</span>
+                  <div className="flex flex-col">
+                    <span className="text-white font-medium">{row.totalPoints}</span>
+                    {row.penaltyPoints > 0 || row.bonusPoints !== 0 ? (
+                      <span className="text-xs text-gray-400">
+                        base {row.basePoints}
+                        {row.penaltyPoints > 0 && (
+                          <span className="text-red-400"> −{row.penaltyPoints}</span>
+                        )}
+                        {row.bonusPoints !== 0 && (
+                          <span className="text-green-400"> +{row.bonusPoints}</span>
+                        )}
+                      </span>
+                    ) : null}
+                  </div>
                 </td>
                 <td className="py-3 px-4">
-                  <span className="text-white">{standing.racesCompleted}</span>
+                  <span className="text-white">
+                    {row.pointsPerRace.toFixed(2)}
+                  </span>
+                </td>
+                <td className="py-3 px-4">
+                  <span className="text-white">{row.racesStarted}</span>
+                </td>
+                <td className="py-3 px-4">
+                  <span className="text-white">{row.racesFinished}</span>
+                </td>
+                <td className="py-3 px-4">
+                  <span className="text-white">{row.dnfs}</span>
+                </td>
+                <td className="py-3 px-4">
+                  <span className="text-white">{row.noShows}</span>
+                </td>
+                <td className="py-3 px-4">
+                  <span className={row.penaltyPoints > 0 ? 'text-red-400' : 'text-gray-300'}>
+                    {row.penaltyPoints > 0 ? `-${row.penaltyPoints}` : '—'}
+                  </span>
+                </td>
+                <td className="py-3 px-4">
+                  <span className={row.bonusPoints !== 0 ? 'text-green-400' : 'text-gray-300'}>
+                    {row.bonusPoints !== 0 ? `+${row.bonusPoints}` : '—'}
+                  </span>
+                </td>
+                <td className="py-3 px-4">
+                  <span className="text-white">
+                    {row.avgFinish !== null ? row.avgFinish.toFixed(2) : '—'}
+                  </span>
+                </td>
+                <td className="py-3 px-4">
+                  <span className={row.ratingChange && row.ratingChange > 0 ? 'text-green-400' : row.ratingChange && row.ratingChange < 0 ? 'text-red-400' : 'text-gray-300'}>
+                    {ratingDelta}
+                  </span>
                 </td>
               </tr>
             );