wip

apps/website/app/races/[id]/page.tsx

@@ -884,6 +884,14 @@ export default function RaceDetailPage() {
                         File Protest
                       </Button>
                     )}
+                    <Button
+                      variant="secondary"
+                      className="w-full flex items-center justify-center gap-2"
+                      onClick={() => router.push(`/races/${race.id}/stewarding`)}
+                    >
+                      <Scale className="w-4 h-4" />
+                      Stewarding
+                    </Button>
                   </>
                 )}
 
@@ -913,38 +921,6 @@ export default function RaceDetailPage() {
                 </div>
               </div>
             </Card>
-
-            {/* Quick Links */}
-            <Card>
-              <h3 className="text-sm font-semibold text-white mb-3">Quick Links</h3>
-              <div className="space-y-2">
-                <Link
-                  href="/races"
-                  className="flex items-center gap-3 p-2 rounded-lg hover:bg-deep-graphite transition-colors"
-                >
-                  <Flag className="w-4 h-4 text-gray-400" />
-                  <span className="text-sm text-gray-300">All Races</span>
-                </Link>
-                {league && (
-                  <Link
-                    href={`/leagues/${league.id}`}
-                    className="flex items-center gap-3 p-2 rounded-lg hover:bg-deep-graphite transition-colors"
-                  >
-                    <Trophy className="w-4 h-4 text-gray-400" />
-                    <span className="text-sm text-gray-300">{league.name}</span>
-                  </Link>
-                )}
-                {league && (
-                  <Link
-                    href={`/leagues/${league.id}/standings`}
-                    className="flex items-center gap-3 p-2 rounded-lg hover:bg-deep-graphite transition-colors"
-                  >
-                    <Users className="w-4 h-4 text-gray-400" />
-                    <span className="text-sm text-gray-300">League Standings</span>
-                  </Link>
-                )}
-              </div>
-            </Card>
           </div>
         </div>
       </div>

apps/website/app/races/[id]/stewarding/page.tsx

@@ -0,0 +1,525 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Link from 'next/link';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Breadcrumbs from '@/components/layout/Breadcrumbs';
+import {
+  getRaceRepository,
+  getLeagueRepository,
+  getProtestRepository,
+  getDriverRepository,
+  getPenaltyRepository,
+  getLeagueMembershipRepository,
+  getReviewProtestUseCase,
+  getApplyPenaltyUseCase,
+} from '@/lib/di-container';
+import { useEffectiveDriverId } from '@/lib/currentDriver';
+import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
+import type { Race } from '@gridpilot/racing/domain/entities/Race';
+import type { League } from '@gridpilot/racing/domain/entities/League';
+import type { Protest } from '@gridpilot/racing/domain/entities/Protest';
+import type { Penalty, PenaltyType } from '@gridpilot/racing/domain/entities/Penalty';
+import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
+import { EntityMappers } from '@gridpilot/racing/application/mappers/EntityMappers';
+import {
+  AlertTriangle,
+  Clock,
+  CheckCircle,
+  Flag,
+  Calendar,
+  MapPin,
+  AlertCircle,
+  Video,
+  Gavel,
+  ArrowLeft,
+  Scale,
+  ChevronRight,
+  Users,
+  Trophy,
+} from 'lucide-react';
+
+export default function RaceStewardingPage() {
+  const params = useParams();
+  const router = useRouter();
+  const raceId = params.id as string;
+  const currentDriverId = useEffectiveDriverId();
+
+  const [race, setRace] = useState<Race | null>(null);
+  const [league, setLeague] = useState<League | null>(null);
+  const [protests, setProtests] = useState<Protest[]>([]);
+  const [penalties, setPenalties] = useState<Penalty[]>([]);
+  const [driversById, setDriversById] = useState<Record<string, DriverDTO>>({});
+  const [loading, setLoading] = useState(true);
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [activeTab, setActiveTab] = useState<'pending' | 'resolved' | 'penalties'>('pending');
+
+  useEffect(() => {
+    async function loadData() {
+      setLoading(true);
+      try {
+        const raceRepo = getRaceRepository();
+        const leagueRepo = getLeagueRepository();
+        const protestRepo = getProtestRepository();
+        const penaltyRepo = getPenaltyRepository();
+        const driverRepo = getDriverRepository();
+        const membershipRepo = getLeagueMembershipRepository();
+
+        // Get race
+        const raceData = await raceRepo.findById(raceId);
+        if (!raceData) {
+          setLoading(false);
+          return;
+        }
+        setRace(raceData);
+
+        // Get league
+        const leagueData = await leagueRepo.findById(raceData.leagueId);
+        setLeague(leagueData);
+
+        // Check admin status
+        if (leagueData) {
+          const membership = await membershipRepo.getMembership(leagueData.id, currentDriverId);
+          setIsAdmin(membership ? isLeagueAdminOrHigherRole(membership.role) : false);
+        }
+
+        // Get protests for this race
+        const raceProtests = await protestRepo.findByRaceId(raceId);
+        setProtests(raceProtests);
+
+        // Get penalties for this race
+        const racePenalties = await penaltyRepo.findByRaceId(raceId);
+        setPenalties(racePenalties);
+
+        // Collect driver IDs
+        const driverIds = new Set<string>();
+        raceProtests.forEach((p) => {
+          driverIds.add(p.protestingDriverId);
+          driverIds.add(p.accusedDriverId);
+        });
+        racePenalties.forEach((p) => {
+          driverIds.add(p.driverId);
+        });
+
+        // Load driver info
+        const driverEntities = await Promise.all(
+          Array.from(driverIds).map((id) => driverRepo.findById(id))
+        );
+        const byId: Record<string, DriverDTO> = {};
+        driverEntities.forEach((driver) => {
+          if (driver) {
+            const dto = EntityMappers.toDriverDTO(driver);
+            if (dto) {
+              byId[dto.id] = dto;
+            }
+          }
+        });
+        setDriversById(byId);
+      } catch (err) {
+        console.error('Failed to load data:', err);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    loadData();
+  }, [raceId, currentDriverId]);
+
+  const pendingProtests = protests.filter(
+    (p) => p.status === 'pending' || p.status === 'under_review'
+  );
+  const resolvedProtests = protests.filter(
+    (p) => p.status === 'upheld' || p.status === 'dismissed' || p.status === 'withdrawn'
+  );
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case 'pending':
+      case 'under_review':
+        return (
+          <span className="px-2 py-0.5 text-xs font-medium bg-warning-amber/20 text-warning-amber rounded-full">
+            Pending
+          </span>
+        );
+      case 'upheld':
+        return (
+          <span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full">
+            Upheld
+          </span>
+        );
+      case 'dismissed':
+        return (
+          <span className="px-2 py-0.5 text-xs font-medium bg-gray-500/20 text-gray-400 rounded-full">
+            Dismissed
+          </span>
+        );
+      case 'withdrawn':
+        return (
+          <span className="px-2 py-0.5 text-xs font-medium bg-blue-500/20 text-blue-400 rounded-full">
+            Withdrawn
+          </span>
+        );
+      default:
+        return null;
+    }
+  };
+
+  const formatDate = (date: Date) => {
+    return new Date(date).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-4xl mx-auto">
+          <div className="animate-pulse space-y-6">
+            <div className="h-6 bg-iron-gray rounded w-1/4" />
+            <div className="h-48 bg-iron-gray rounded-xl" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!race) {
+    return (
+      <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-4xl mx-auto">
+          <Card className="text-center py-12">
+            <div className="flex flex-col items-center gap-4">
+              <div className="p-4 bg-warning-amber/10 rounded-full">
+                <AlertTriangle className="w-8 h-8 text-warning-amber" />
+              </div>
+              <div>
+                <p className="text-white font-medium mb-1">Race not found</p>
+                <p className="text-sm text-gray-500">
+                  The race you're looking for doesn't exist.
+                </p>
+              </div>
+              <Button variant="secondary" onClick={() => router.push('/races')}>
+                Back to Races
+              </Button>
+            </div>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+
+  const breadcrumbItems = [
+    { label: 'Races', href: '/races' },
+    { label: race.track, href: `/races/${race.id}` },
+    { label: 'Stewarding' },
+  ];
+
+  return (
+    <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-4xl mx-auto space-y-6">
+        {/* Navigation */}
+        <div className="flex items-center justify-between">
+          <Breadcrumbs items={breadcrumbItems} className="text-sm text-gray-400" />
+          <Button
+            variant="secondary"
+            onClick={() => router.push(`/races/${race.id}`)}
+            className="flex items-center gap-2 text-sm"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Back to Race
+          </Button>
+        </div>
+
+        {/* Header */}
+        <Card className="bg-gradient-to-r from-iron-gray/50 to-iron-gray/30">
+          <div className="flex items-center gap-4 mb-4">
+            <div className="w-12 h-12 rounded-xl bg-primary-blue/20 flex items-center justify-center">
+              <Scale className="w-6 h-6 text-primary-blue" />
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold text-white">Stewarding</h1>
+              <p className="text-sm text-gray-400">
+                {race.track} • {formatDate(race.scheduledAt)}
+              </p>
+            </div>
+          </div>
+
+          {/* Stats */}
+          <div className="grid grid-cols-3 gap-4">
+            <div className="rounded-lg bg-deep-graphite/50 border border-charcoal-outline p-4">
+              <div className="flex items-center gap-2 text-warning-amber mb-1">
+                <Clock className="w-4 h-4" />
+                <span className="text-xs font-medium uppercase">Pending</span>
+              </div>
+              <div className="text-2xl font-bold text-white">{pendingProtests.length}</div>
+            </div>
+            <div className="rounded-lg bg-deep-graphite/50 border border-charcoal-outline p-4">
+              <div className="flex items-center gap-2 text-performance-green mb-1">
+                <CheckCircle className="w-4 h-4" />
+                <span className="text-xs font-medium uppercase">Resolved</span>
+              </div>
+              <div className="text-2xl font-bold text-white">{resolvedProtests.length}</div>
+            </div>
+            <div className="rounded-lg bg-deep-graphite/50 border border-charcoal-outline p-4">
+              <div className="flex items-center gap-2 text-red-400 mb-1">
+                <Gavel className="w-4 h-4" />
+                <span className="text-xs font-medium uppercase">Penalties</span>
+              </div>
+              <div className="text-2xl font-bold text-white">{penalties.length}</div>
+            </div>
+          </div>
+        </Card>
+
+        {/* Tab Navigation */}
+        <div className="border-b border-charcoal-outline">
+          <div className="flex gap-4">
+            <button
+              onClick={() => setActiveTab('pending')}
+              className={`pb-3 px-1 font-medium transition-colors ${
+                activeTab === 'pending'
+                  ? 'text-primary-blue border-b-2 border-primary-blue'
+                  : 'text-gray-400 hover:text-white'
+              }`}
+            >
+              Pending
+              {pendingProtests.length > 0 && (
+                <span className="ml-2 px-2 py-0.5 text-xs bg-warning-amber/20 text-warning-amber rounded-full">
+                  {pendingProtests.length}
+                </span>
+              )}
+            </button>
+            <button
+              onClick={() => setActiveTab('resolved')}
+              className={`pb-3 px-1 font-medium transition-colors ${
+                activeTab === 'resolved'
+                  ? 'text-primary-blue border-b-2 border-primary-blue'
+                  : 'text-gray-400 hover:text-white'
+              }`}
+            >
+              Resolved
+            </button>
+            <button
+              onClick={() => setActiveTab('penalties')}
+              className={`pb-3 px-1 font-medium transition-colors ${
+                activeTab === 'penalties'
+                  ? 'text-primary-blue border-b-2 border-primary-blue'
+                  : 'text-gray-400 hover:text-white'
+              }`}
+            >
+              Penalties
+            </button>
+          </div>
+        </div>
+
+        {/* Content */}
+        {activeTab === 'pending' && (
+          <div className="space-y-4">
+            {pendingProtests.length === 0 ? (
+              <Card className="text-center py-12">
+                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-performance-green/10 flex items-center justify-center">
+                  <Flag className="w-8 h-8 text-performance-green" />
+                </div>
+                <p className="font-semibold text-lg text-white mb-2">All Clear!</p>
+                <p className="text-sm text-gray-400">No pending protests to review</p>
+              </Card>
+            ) : (
+              pendingProtests.map((protest) => {
+                const protester = driversById[protest.protestingDriverId];
+                const accused = driversById[protest.accusedDriverId];
+                const daysSinceFiled = Math.floor(
+                  (Date.now() - new Date(protest.filedAt).getTime()) / (1000 * 60 * 60 * 24)
+                );
+                const isUrgent = daysSinceFiled > 2;
+
+                return (
+                  <Card
+                    key={protest.id}
+                    className={`${isUrgent ? 'border-l-4 border-l-red-500' : ''}`}
+                  >
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-2">
+                          <AlertCircle className="w-4 h-4 text-warning-amber flex-shrink-0" />
+                          <Link
+                            href={`/drivers/${protest.protestingDriverId}`}
+                            className="font-medium text-white hover:text-primary-blue transition-colors"
+                          >
+                            {protester?.name || 'Unknown'}
+                          </Link>
+                          <span className="text-gray-400">vs</span>
+                          <Link
+                            href={`/drivers/${protest.accusedDriverId}`}
+                            className="font-medium text-white hover:text-primary-blue transition-colors"
+                          >
+                            {accused?.name || 'Unknown'}
+                          </Link>
+                          {getStatusBadge(protest.status)}
+                          {isUrgent && (
+                            <span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full flex items-center gap-1">
+                              <AlertTriangle className="w-3 h-3" />
+                              {daysSinceFiled}d old
+                            </span>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-4 text-sm text-gray-400 mb-2">
+                          <span>Lap {protest.incident.lap}</span>
+                          <span>•</span>
+                          <span>Filed {formatDate(protest.filedAt)}</span>
+                          {protest.proofVideoUrl && (
+                            <>
+                              <span>•</span>
+                              <a
+                                href={protest.proofVideoUrl}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="flex items-center gap-1 text-primary-blue hover:underline"
+                              >
+                                <Video className="w-3 h-3" />
+                                Video Evidence
+                              </a>
+                            </>
+                          )}
+                        </div>
+                        <p className="text-sm text-gray-300">{protest.incident.description}</p>
+                      </div>
+                      {isAdmin && league && (
+                        <Link
+                          href={`/leagues/${league.id}/stewarding/protests/${protest.id}`}
+                        >
+                          <Button variant="primary">Review</Button>
+                        </Link>
+                      )}
+                    </div>
+                  </Card>
+                );
+              })
+            )}
+          </div>
+        )}
+
+        {activeTab === 'resolved' && (
+          <div className="space-y-4">
+            {resolvedProtests.length === 0 ? (
+              <Card className="text-center py-12">
+                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-500/10 flex items-center justify-center">
+                  <CheckCircle className="w-8 h-8 text-gray-500" />
+                </div>
+                <p className="font-semibold text-lg text-white mb-2">No Resolved Protests</p>
+                <p className="text-sm text-gray-400">
+                  Resolved protests will appear here
+                </p>
+              </Card>
+            ) : (
+              resolvedProtests.map((protest) => {
+                const protester = driversById[protest.protestingDriverId];
+                const accused = driversById[protest.accusedDriverId];
+
+                return (
+                  <Card key={protest.id}>
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-2">
+                          <AlertCircle className="w-4 h-4 text-gray-400 flex-shrink-0" />
+                          <Link
+                            href={`/drivers/${protest.protestingDriverId}`}
+                            className="font-medium text-white hover:text-primary-blue transition-colors"
+                          >
+                            {protester?.name || 'Unknown'}
+                          </Link>
+                          <span className="text-gray-400">vs</span>
+                          <Link
+                            href={`/drivers/${protest.accusedDriverId}`}
+                            className="font-medium text-white hover:text-primary-blue transition-colors"
+                          >
+                            {accused?.name || 'Unknown'}
+                          </Link>
+                          {getStatusBadge(protest.status)}
+                        </div>
+                        <div className="flex items-center gap-4 text-sm text-gray-400 mb-2">
+                          <span>Lap {protest.incident.lap}</span>
+                          <span>•</span>
+                          <span>Filed {formatDate(protest.filedAt)}</span>
+                        </div>
+                        <p className="text-sm text-gray-300 mb-2">
+                          {protest.incident.description}
+                        </p>
+                        {protest.decisionNotes && (
+                          <div className="mt-2 p-3 rounded bg-iron-gray/50 border border-charcoal-outline/50">
+                            <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">
+                              Steward Decision
+                            </p>
+                            <p className="text-sm text-gray-300">{protest.decisionNotes}</p>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </Card>
+                );
+              })
+            )}
+          </div>
+        )}
+
+        {activeTab === 'penalties' && (
+          <div className="space-y-4">
+            {penalties.length === 0 ? (
+              <Card className="text-center py-12">
+                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-500/10 flex items-center justify-center">
+                  <Gavel className="w-8 h-8 text-gray-500" />
+                </div>
+                <p className="font-semibold text-lg text-white mb-2">No Penalties</p>
+                <p className="text-sm text-gray-400">
+                  Penalties issued for this race will appear here
+                </p>
+              </Card>
+            ) : (
+              penalties.map((penalty) => {
+                const driver = driversById[penalty.driverId];
+                return (
+                  <Card key={penalty.id}>
+                    <div className="flex items-center gap-4">
+                      <div className="w-12 h-12 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0">
+                        <Gavel className="w-6 h-6 text-red-400" />
+                      </div>
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2 mb-1">
+                          <Link
+                            href={`/drivers/${penalty.driverId}`}
+                            className="font-medium text-white hover:text-primary-blue transition-colors"
+                          >
+                            {driver?.name || 'Unknown'}
+                          </Link>
+                          <span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full">
+                            {penalty.type.replace('_', ' ')}
+                          </span>
+                        </div>
+                        <p className="text-sm text-gray-400">{penalty.reason}</p>
+                        {penalty.notes && (
+                          <p className="text-sm text-gray-500 mt-1 italic">{penalty.notes}</p>
+                        )}
+                      </div>
+                      <div className="text-right">
+                        <span className="text-2xl font-bold text-red-400">
+                          {penalty.type === 'time_penalty' && `+${penalty.value}s`}
+                          {penalty.type === 'grid_penalty' && `+${penalty.value} grid`}
+                          {penalty.type === 'points_deduction' && `-${penalty.value} pts`}
+                          {penalty.type === 'disqualification' && 'DSQ'}
+                          {penalty.type === 'warning' && 'Warning'}
+                          {penalty.type === 'license_points' && `${penalty.value} LP`}
+                        </span>
+                      </div>
+                    </div>
+                  </Card>
+                );
+              })
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}