435 lines
16 KiB
TypeScript
435 lines
16 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import Breadcrumbs from '@/components/layout/Breadcrumbs';
|
|
import RaceStewardingStats from '@/components/races/RaceStewardingStats';
|
|
import Button from '@/components/ui/Button';
|
|
import Card from '@/components/ui/Card';
|
|
import { StewardingTabs } from '@/components/races/StewardingTabs';
|
|
import {
|
|
AlertCircle,
|
|
AlertTriangle,
|
|
ArrowLeft,
|
|
CheckCircle,
|
|
Clock,
|
|
Flag,
|
|
Gavel,
|
|
Scale,
|
|
Video
|
|
} from 'lucide-react';
|
|
import Link from 'next/link';
|
|
|
|
export type StewardingTab = 'pending' | 'resolved' | 'penalties';
|
|
|
|
export interface Protest {
|
|
id: string;
|
|
status: string;
|
|
protestingDriverId: string;
|
|
accusedDriverId: string;
|
|
filedAt: string;
|
|
incident: {
|
|
lap: number;
|
|
description: string;
|
|
};
|
|
proofVideoUrl?: string;
|
|
decisionNotes?: string;
|
|
}
|
|
|
|
export interface Penalty {
|
|
id: string;
|
|
driverId: string;
|
|
type: string;
|
|
value: number;
|
|
reason: string;
|
|
notes?: string;
|
|
}
|
|
|
|
export interface Driver {
|
|
id: string;
|
|
name: string;
|
|
}
|
|
|
|
export interface RaceStewardingData {
|
|
race?: {
|
|
id: string;
|
|
track: string;
|
|
scheduledAt: string;
|
|
} | null;
|
|
league?: {
|
|
id: string;
|
|
} | null;
|
|
pendingProtests: Protest[];
|
|
resolvedProtests: Protest[];
|
|
penalties: Penalty[];
|
|
driverMap: Record<string, Driver>;
|
|
pendingCount: number;
|
|
resolvedCount: number;
|
|
penaltiesCount: number;
|
|
}
|
|
|
|
export interface RaceStewardingTemplateProps {
|
|
stewardingData?: RaceStewardingData;
|
|
isLoading: boolean;
|
|
error?: Error | null;
|
|
// Actions
|
|
onBack: () => void;
|
|
onReviewProtest: (protestId: string) => void;
|
|
// User state
|
|
isAdmin: boolean;
|
|
// UI State
|
|
activeTab: StewardingTab;
|
|
setActiveTab: (tab: StewardingTab) => void;
|
|
}
|
|
|
|
export function RaceStewardingTemplate({
|
|
stewardingData,
|
|
isLoading,
|
|
error,
|
|
onBack,
|
|
onReviewProtest,
|
|
isAdmin,
|
|
activeTab,
|
|
setActiveTab,
|
|
}: RaceStewardingTemplateProps) {
|
|
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',
|
|
});
|
|
};
|
|
|
|
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;
|
|
}
|
|
};
|
|
|
|
if (isLoading) {
|
|
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 (!stewardingData?.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={onBack}>
|
|
Back to Races
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const breadcrumbItems = [
|
|
{ label: 'Races', href: '/races' },
|
|
{ label: stewardingData.race.track, href: `/races/${stewardingData.race.id}` },
|
|
{ label: 'Stewarding' },
|
|
];
|
|
|
|
const pendingProtests = stewardingData.pendingProtests ?? [];
|
|
const resolvedProtests = stewardingData.resolvedProtests ?? [];
|
|
|
|
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={() => onBack()}
|
|
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">
|
|
{stewardingData.race.track} • {stewardingData.race.scheduledAt ? formatDate(stewardingData.race.scheduledAt) : ''}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<RaceStewardingStats
|
|
pendingCount={stewardingData.pendingCount ?? 0}
|
|
resolvedCount={stewardingData.resolvedCount ?? 0}
|
|
penaltiesCount={stewardingData.penaltiesCount ?? 0}
|
|
/>
|
|
</Card>
|
|
|
|
{/* Tab Navigation */}
|
|
<StewardingTabs
|
|
activeTab={activeTab}
|
|
onTabChange={setActiveTab}
|
|
pendingCount={pendingProtests.length}
|
|
/>
|
|
|
|
{/* 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 = stewardingData.driverMap[protest.protestingDriverId];
|
|
const accused = stewardingData.driverMap[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 && stewardingData?.league && (
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => onReviewProtest(protest.id)}
|
|
>
|
|
Review
|
|
</Button>
|
|
)}
|
|
</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 = stewardingData.driverMap[protest.protestingDriverId];
|
|
const accused = stewardingData.driverMap[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">
|
|
{stewardingData?.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>
|
|
) : (
|
|
stewardingData?.penalties.map((penalty) => {
|
|
const driver = stewardingData.driverMap[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>
|
|
);
|
|
} |