387 lines
14 KiB
TypeScript
387 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Protest } from "@gridpilot/racing/domain/entities/Protest";
|
|
import { PenaltyType } from "@gridpilot/racing/domain/entities/Penalty";
|
|
import Modal from "../ui/Modal";
|
|
import Button from "../ui/Button";
|
|
import Card from "../ui/Card";
|
|
import {
|
|
AlertCircle,
|
|
Video,
|
|
Clock,
|
|
Grid3x3,
|
|
TrendingDown,
|
|
CheckCircle,
|
|
XCircle,
|
|
FileText,
|
|
AlertTriangle,
|
|
ShieldAlert,
|
|
Ban,
|
|
DollarSign,
|
|
FileWarning,
|
|
} from "lucide-react";
|
|
|
|
interface ReviewProtestModalProps {
|
|
protest: Protest | null;
|
|
onClose: () => void;
|
|
onAccept: (
|
|
protestId: string,
|
|
penaltyType: PenaltyType,
|
|
penaltyValue: number,
|
|
stewardNotes: string
|
|
) => Promise<void>;
|
|
onReject: (protestId: string, stewardNotes: string) => Promise<void>;
|
|
}
|
|
|
|
export function ReviewProtestModal({
|
|
protest,
|
|
onClose,
|
|
onAccept,
|
|
onReject,
|
|
}: ReviewProtestModalProps) {
|
|
const [decision, setDecision] = useState<"accept" | "reject" | null>(null);
|
|
const [penaltyType, setPenaltyType] = useState<PenaltyType>("time_penalty");
|
|
const [penaltyValue, setPenaltyValue] = useState<number>(5);
|
|
const [stewardNotes, setStewardNotes] = useState("");
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [showConfirmation, setShowConfirmation] = useState(false);
|
|
|
|
if (!protest) return null;
|
|
|
|
const handleSubmit = async () => {
|
|
if (!decision || !stewardNotes.trim()) return;
|
|
|
|
setSubmitting(true);
|
|
try {
|
|
if (decision === "accept") {
|
|
await onAccept(protest.id, penaltyType, penaltyValue, stewardNotes);
|
|
} else {
|
|
await onReject(protest.id, stewardNotes);
|
|
}
|
|
onClose();
|
|
} catch (err) {
|
|
alert(err instanceof Error ? err.message : "Failed to submit decision");
|
|
} finally {
|
|
setSubmitting(false);
|
|
setShowConfirmation(false);
|
|
}
|
|
};
|
|
|
|
const getPenaltyIcon = (type: PenaltyType) => {
|
|
switch (type) {
|
|
case "time_penalty":
|
|
return Clock;
|
|
case "grid_penalty":
|
|
return Grid3x3;
|
|
case "points_deduction":
|
|
return TrendingDown;
|
|
case "disqualification":
|
|
return XCircle;
|
|
case "warning":
|
|
return AlertTriangle;
|
|
case "license_points":
|
|
return ShieldAlert;
|
|
case "probation":
|
|
return FileWarning;
|
|
case "fine":
|
|
return DollarSign;
|
|
case "race_ban":
|
|
return Ban;
|
|
default:
|
|
return AlertCircle;
|
|
}
|
|
};
|
|
|
|
const getPenaltyLabel = (type: PenaltyType) => {
|
|
switch (type) {
|
|
case "time_penalty":
|
|
return "seconds";
|
|
case "grid_penalty":
|
|
return "grid positions";
|
|
case "points_deduction":
|
|
return "points";
|
|
case "license_points":
|
|
return "points";
|
|
case "fine":
|
|
return "points";
|
|
case "race_ban":
|
|
return "races";
|
|
default:
|
|
return "";
|
|
}
|
|
};
|
|
|
|
const getPenaltyColor = (type: PenaltyType) => {
|
|
switch (type) {
|
|
case "time_penalty":
|
|
return "text-blue-400 bg-blue-500/10 border-blue-500/30";
|
|
case "grid_penalty":
|
|
return "text-purple-400 bg-purple-500/10 border-purple-500/30";
|
|
case "points_deduction":
|
|
return "text-red-400 bg-red-500/10 border-red-500/30";
|
|
case "disqualification":
|
|
return "text-red-500 bg-red-500/10 border-red-500/30";
|
|
case "warning":
|
|
return "text-yellow-400 bg-yellow-500/10 border-yellow-500/30";
|
|
case "license_points":
|
|
return "text-orange-400 bg-orange-500/10 border-orange-500/30";
|
|
case "probation":
|
|
return "text-amber-400 bg-amber-500/10 border-amber-500/30";
|
|
case "fine":
|
|
return "text-green-400 bg-green-500/10 border-green-500/30";
|
|
case "race_ban":
|
|
return "text-red-600 bg-red-600/10 border-red-600/30";
|
|
default:
|
|
return "text-warning-amber bg-warning-amber/10 border-warning-amber/30";
|
|
}
|
|
};
|
|
|
|
if (showConfirmation) {
|
|
return (
|
|
<Modal title="Confirm Decision" isOpen={true} onOpenChange={() => setShowConfirmation(false)}>
|
|
<div className="p-6 space-y-6">
|
|
<div className="text-center space-y-4">
|
|
{decision === "accept" ? (
|
|
<div className="flex justify-center">
|
|
<div className="h-16 w-16 rounded-full bg-orange-500/20 flex items-center justify-center">
|
|
<AlertCircle className="h-8 w-8 text-orange-400" />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex justify-center">
|
|
<div className="h-16 w-16 rounded-full bg-gray-500/20 flex items-center justify-center">
|
|
<XCircle className="h-8 w-8 text-gray-400" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<h3 className="text-xl font-bold text-white">Confirm Decision</h3>
|
|
<p className="text-gray-400 mt-2">
|
|
{decision === "accept"
|
|
? `Issue ${penaltyValue} ${getPenaltyLabel(penaltyType)} penalty?`
|
|
: "Reject this protest?"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Card className="p-4 bg-gray-800/50">
|
|
<p className="text-sm text-gray-300">{stewardNotes}</p>
|
|
</Card>
|
|
|
|
<div className="flex gap-3">
|
|
<Button
|
|
variant="secondary"
|
|
className="flex-1"
|
|
onClick={() => setShowConfirmation(false)}
|
|
disabled={submitting}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
variant="primary"
|
|
className="flex-1"
|
|
onClick={handleSubmit}
|
|
disabled={submitting}
|
|
>
|
|
{submitting ? "Submitting..." : "Confirm Decision"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Modal title="Review Protest" isOpen={true} onOpenChange={onClose}>
|
|
<div className="p-6 space-y-6">
|
|
<div className="flex items-start gap-4">
|
|
<div className="h-12 w-12 rounded-full bg-orange-500/20 flex items-center justify-center flex-shrink-0">
|
|
<AlertCircle className="h-6 w-6 text-orange-400" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h2 className="text-2xl font-bold text-white">Review Protest</h2>
|
|
<p className="text-gray-400 mt-1">
|
|
Protest #{protest.id.substring(0, 8)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<Card className="p-4 bg-gray-800/50">
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-gray-400">Filed Date</span>
|
|
<span className="text-white font-medium">
|
|
{new Date(protest.filedAt).toLocaleString()}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-gray-400">Incident Lap</span>
|
|
<span className="text-white font-medium">
|
|
Lap {protest.incident.lap}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-gray-400">Status</span>
|
|
<span className="px-2 py-1 rounded text-xs font-medium bg-orange-500/20 text-orange-400">
|
|
{protest.status}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<div>
|
|
<label className="text-sm font-medium text-gray-400 mb-2 block">
|
|
Description
|
|
</label>
|
|
<Card className="p-4 bg-gray-800/50">
|
|
<p className="text-gray-300">{protest.incident.description}</p>
|
|
</Card>
|
|
</div>
|
|
|
|
{protest.comment && (
|
|
<div>
|
|
<label className="text-sm font-medium text-gray-400 mb-2 block">
|
|
Additional Comment
|
|
</label>
|
|
<Card className="p-4 bg-gray-800/50">
|
|
<p className="text-gray-300">{protest.comment}</p>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{protest.proofVideoUrl && (
|
|
<div>
|
|
<label className="text-sm font-medium text-gray-400 mb-2 block">
|
|
Evidence
|
|
</label>
|
|
<Card className="p-4 bg-gray-800/50">
|
|
<a
|
|
href={protest.proofVideoUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-2 text-orange-400 hover:text-orange-300 transition-colors"
|
|
>
|
|
<Video className="h-4 w-4" />
|
|
<span className="text-sm">View video evidence</span>
|
|
</a>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="border-t border-gray-800 pt-6 space-y-4">
|
|
<h3 className="text-lg font-semibold text-white">Stewarding Decision</h3>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<Button
|
|
variant={decision === "accept" ? "primary" : "secondary"}
|
|
className="flex items-center justify-center gap-2"
|
|
onClick={() => setDecision("accept")}
|
|
>
|
|
<CheckCircle className="h-4 w-4" />
|
|
Accept Protest
|
|
</Button>
|
|
<Button
|
|
variant={decision === "reject" ? "primary" : "secondary"}
|
|
className="flex items-center justify-center gap-2"
|
|
onClick={() => setDecision("reject")}
|
|
>
|
|
<XCircle className="h-4 w-4" />
|
|
Reject Protest
|
|
</Button>
|
|
</div>
|
|
|
|
{decision === "accept" && (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="text-sm font-medium text-gray-400 mb-2 block">
|
|
Penalty Type
|
|
</label>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
{[
|
|
{ type: "time_penalty" as PenaltyType, label: "Time Penalty" },
|
|
{ type: "grid_penalty" as PenaltyType, label: "Grid Penalty" },
|
|
{ type: "points_deduction" as PenaltyType, label: "Points Deduction" },
|
|
{ type: "disqualification" as PenaltyType, label: "Disqualification" },
|
|
{ type: "warning" as PenaltyType, label: "Warning" },
|
|
{ type: "license_points" as PenaltyType, label: "License Points" },
|
|
{ type: "probation" as PenaltyType, label: "Probation" },
|
|
{ type: "fine" as PenaltyType, label: "Fine" },
|
|
{ type: "race_ban" as PenaltyType, label: "Race Ban" },
|
|
].map(({ type, label }) => {
|
|
const Icon = getPenaltyIcon(type);
|
|
const colorClass = getPenaltyColor(type);
|
|
const isSelected = penaltyType === type;
|
|
return (
|
|
<button
|
|
key={type}
|
|
onClick={() => setPenaltyType(type)}
|
|
className={`p-3 rounded-lg border transition-all ${
|
|
isSelected
|
|
? `${colorClass} border-2`
|
|
: "border-charcoal-outline hover:border-gray-600 bg-iron-gray/50"
|
|
}`}
|
|
>
|
|
<Icon className={`h-5 w-5 mx-auto mb-1 ${isSelected ? '' : 'text-gray-400'}`} />
|
|
<p className={`text-xs font-medium ${isSelected ? '' : 'text-gray-400'}`}>{label}</p>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{['time_penalty', 'grid_penalty', 'points_deduction', 'license_points', 'fine', 'race_ban'].includes(penaltyType) && (
|
|
<div>
|
|
<label className="text-sm font-medium text-gray-400 mb-2 block">
|
|
Penalty Value ({getPenaltyLabel(penaltyType)})
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={penaltyValue}
|
|
onChange={(e) => setPenaltyValue(Number(e.target.value))}
|
|
min="1"
|
|
className="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:border-orange-500"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<label className="text-sm font-medium text-gray-400 mb-2 block">
|
|
Steward Notes *
|
|
</label>
|
|
<textarea
|
|
value={stewardNotes}
|
|
onChange={(e) => setStewardNotes(e.target.value)}
|
|
placeholder="Explain your decision and reasoning..."
|
|
rows={4}
|
|
className="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-orange-500 resize-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-3 pt-4 border-t border-gray-800">
|
|
<Button
|
|
variant="secondary"
|
|
className="flex-1"
|
|
onClick={onClose}
|
|
disabled={submitting}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
variant="primary"
|
|
className="flex-1"
|
|
onClick={() => setShowConfirmation(true)}
|
|
disabled={!decision || !stewardNotes.trim() || submitting}
|
|
>
|
|
Submit Decision
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
} |