wip

apps/website/components/leagues/PendingProtestsList.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { Protest } from "@gridpilot/racing/domain/entities/Protest";
+import { Race } from "@gridpilot/racing/domain/entities/Race";
+import { DriverDTO } from "@gridpilot/racing/application/dto/DriverDTO";
+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: Protest[];
+  races: Record<string, Race>;
+  drivers: Record<string, DriverDTO>;
+  leagueId: string;
+  onReviewProtest: (protest: Protest) => 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).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).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}</span>
+                  </div>
+                  <p className="text-gray-300 line-clamp-2 leading-relaxed">
+                    {protest.incident.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>
+  );
+}