115 lines
4.6 KiB
TypeScript
115 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import { ProtestViewModel } from "../../lib/view-models/ProtestViewModel";
|
|
import { RaceViewModel } from "../../lib/view-models/RaceViewModel";
|
|
import { DriverViewModel } from "../../lib/view-models/DriverViewModel";
|
|
import Card from "../ui/Card";
|
|
import Button from "../ui/Button";
|
|
import Link from "next/link";
|
|
import { AlertCircle, Video, ChevronRight, Flag, Clock, AlertTriangle } from "lucide-react";
|
|
|
|
interface PendingProtestsListProps {
|
|
protests: ProtestViewModel[];
|
|
races: Record<string, RaceViewModel>;
|
|
drivers: Record<string, DriverViewModel>;
|
|
leagueId: string;
|
|
onReviewProtest: (protest: ProtestViewModel) => void;
|
|
onProtestReviewed: () => void;
|
|
}
|
|
|
|
export function PendingProtestsList({
|
|
protests,
|
|
races,
|
|
drivers,
|
|
leagueId,
|
|
onReviewProtest,
|
|
onProtestReviewed,
|
|
}: PendingProtestsListProps) {
|
|
|
|
if (protests.length === 0) {
|
|
return (
|
|
<Card className="p-12 text-center">
|
|
<div className="flex flex-col items-center gap-4">
|
|
<div className="w-16 h-16 rounded-full bg-performance-green/10 flex items-center justify-center">
|
|
<Flag className="h-8 w-8 text-performance-green" />
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{protests.map((protest) => {
|
|
const daysSinceFiled = Math.floor((Date.now() - new Date(protest.filedAt || protest.submittedAt).getTime()) / (1000 * 60 * 60 * 24));
|
|
const isUrgent = daysSinceFiled > 2;
|
|
|
|
return (
|
|
<Card
|
|
key={protest.id}
|
|
className={`p-6 hover:border-warning-amber/40 transition-all ${isUrgent ? 'border-l-4 border-l-red-500' : ''}`}
|
|
>
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex-1 space-y-3">
|
|
<div className="flex items-center gap-3 flex-wrap">
|
|
<div className="h-10 w-10 rounded-full bg-warning-amber/20 flex items-center justify-center flex-shrink-0">
|
|
<AlertCircle className="h-5 w-5 text-warning-amber" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="font-semibold text-white">
|
|
Protest #{protest.id.substring(0, 8)}
|
|
</h3>
|
|
<p className="text-sm text-gray-400">
|
|
Filed {new Date(protest.filedAt || protest.submittedAt).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="px-2 py-1 text-xs font-medium bg-warning-amber/20 text-warning-amber rounded-full flex items-center gap-1">
|
|
<Clock className="h-3 w-3" />
|
|
Pending
|
|
</span>
|
|
{isUrgent && (
|
|
<span className="px-2 py-1 text-xs font-medium bg-red-500/20 text-red-400 rounded-full flex items-center gap-1">
|
|
<AlertTriangle className="h-3 w-3" />
|
|
{daysSinceFiled}d old
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<Flag className="h-4 w-4 text-gray-400" />
|
|
<span className="text-gray-400">Lap {protest.incident?.lap || 'N/A'}</span>
|
|
</div>
|
|
<p className="text-gray-300 line-clamp-2 leading-relaxed">
|
|
{protest.incident?.description || protest.description}
|
|
</p>
|
|
{protest.proofVideoUrl && (
|
|
<div className="inline-flex items-center gap-2 px-3 py-1.5 text-sm bg-primary-blue/10 text-primary-blue rounded-lg border border-primary-blue/20">
|
|
<Video className="h-4 w-4" />
|
|
<span>Video evidence attached</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<Link href={`/leagues/${leagueId}/stewarding/protests/${protest.id}`}>
|
|
<Button
|
|
variant="secondary"
|
|
className="flex-shrink-0"
|
|
>
|
|
<ChevronRight className="h-5 w-5" />
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
} |