503 lines
20 KiB
TypeScript
503 lines
20 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useParams, useRouter } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import {
|
|
AlertTriangle,
|
|
Clock,
|
|
CheckCircle,
|
|
Flag,
|
|
Calendar,
|
|
MapPin,
|
|
AlertCircle,
|
|
Video,
|
|
Gavel,
|
|
ArrowLeft,
|
|
Scale,
|
|
ChevronRight,
|
|
Users,
|
|
Trophy,
|
|
} from 'lucide-react';
|
|
import Card from '@/components/ui/Card';
|
|
import Button from '@/components/ui/Button';
|
|
import Breadcrumbs from '@/components/layout/Breadcrumbs';
|
|
import {
|
|
getGetRaceProtestsUseCase,
|
|
getGetRacePenaltiesUseCase,
|
|
getRaceRepository,
|
|
getLeagueRepository,
|
|
getLeagueMembershipRepository,
|
|
} from '@/lib/di-container';
|
|
import { useEffectiveDriverId } from '@/lib/currentDriver';
|
|
import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
|
|
import { RaceProtestsPresenter } from '@/lib/presenters/RaceProtestsPresenter';
|
|
import { RacePenaltiesPresenter } from '@/lib/presenters/RacePenaltiesPresenter';
|
|
import type { RaceProtestViewModel } from '@gridpilot/racing/application/presenters/IRaceProtestsPresenter';
|
|
import type { RacePenaltyViewModel } from '@gridpilot/racing/application/presenters/IRacePenaltiesPresenter';
|
|
import type { League } from '@gridpilot/racing/domain/entities/League';
|
|
import type { Race } from '@gridpilot/racing/domain/entities/Race';
|
|
|
|
export default function RaceStewardingPage() {
|
|
const params = useParams();
|
|
const router = useRouter();
|
|
const raceId = params.id as string;
|
|
const currentDriverId = useEffectiveDriverId();
|
|
|
|
const driversById: Record<string, { name?: string }> = {};
|
|
|
|
const [race, setRace] = useState<Race | null>(null);
|
|
const [league, setLeague] = useState<League | null>(null);
|
|
const [protests, setProtests] = useState<RaceProtestViewModel[]>([]);
|
|
const [penalties, setPenalties] = useState<RacePenaltyViewModel[]>([]);
|
|
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 membershipRepo = getLeagueMembershipRepository();
|
|
const protestsUseCase = getGetRaceProtestsUseCase();
|
|
const penaltiesUseCase = getGetRacePenaltiesUseCase();
|
|
|
|
const raceData = await raceRepo.findById(raceId);
|
|
if (!raceData) {
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
setRace(raceData);
|
|
|
|
const leagueData = await leagueRepo.findById(raceData.leagueId);
|
|
setLeague(leagueData);
|
|
|
|
if (leagueData) {
|
|
const membership = await membershipRepo.getMembership(
|
|
leagueData.id,
|
|
currentDriverId,
|
|
);
|
|
setIsAdmin(membership ? isLeagueAdminOrHigherRole(membership.role) : false);
|
|
}
|
|
|
|
const protestsPresenter = new RaceProtestsPresenter();
|
|
await protestsUseCase.execute({ raceId }, protestsPresenter);
|
|
const protestsViewModel = protestsPresenter.getViewModel();
|
|
setProtests(protestsViewModel?.protests ?? []);
|
|
|
|
const penaltiesPresenter = new RacePenaltiesPresenter();
|
|
await penaltiesUseCase.execute({ raceId }, penaltiesPresenter);
|
|
const penaltiesViewModel = penaltiesPresenter.getViewModel();
|
|
setPenalties(penaltiesViewModel?.penalties ?? []);
|
|
} 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 | string) => {
|
|
const d = typeof date === 'string' ? new Date(date) : date;
|
|
return d.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>
|
|
);
|
|
} |