website refactor

2026-01-15 19:55:46 +01:00
parent 5ef149b782
commit ce7be39155
154 changed files with 436 additions and 356 deletions
--- a/apps/website/components/leagues/PendingProtestsList.tsx
+++ b/apps/website/components/leagues/PendingProtestsList.tsx
@@ -0,0 +1,78 @@
+
+
+import { DriverViewModel } from "@/lib/view-models/DriverViewModel";
+import { ProtestViewModel } from "@/lib/view-models/ProtestViewModel";
+import { RaceViewModel } from "@/lib/view-models/RaceViewModel";
+import { Box } from "@/ui/Box";
+import { Card } from "@/ui/Card";
+import { ProtestListItem } from "./ProtestListItem";
+import { Stack } from "@/ui/Stack";
+import { Text } from "@/ui/Text";
+import { Flag } 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,
+  drivers,
+  leagueId,
+  onReviewProtest,
+}: PendingProtestsListProps) {
+
+  if (protests.length === 0) {
+    return (
+      <Card>
+        <Box p={12} textAlign="center">
+          <Stack align="center" gap={4}>
+            <Box w="16" h="16" rounded="full" bg="bg-performance-green/10" display="flex" alignItems="center" justifyContent="center">
+              <Flag className="h-8 w-8 text-performance-green" />
+            </Box>
+            <Box>
+              <Text weight="semibold" size="lg" color="text-white" block mb={2}>All Clear! 🏁</Text>
+              <Text size="sm" color="text-gray-400">No pending protests to review</Text>
+            </Box>
+          </Stack>
+        </Box>
+      </Card>
+    );
+  }
+
+  return (
+    <Stack gap={4}>
+      {protests.map((protest) => {
+        const filedAt = protest.filedAt || protest.submittedAt;
+        const daysSinceFiled = Math.floor((Date.now() - new Date(filedAt).getTime()) / (1000 * 60 * 60 * 24));
+        const isUrgent = daysSinceFiled > 2;
+        
+        const protester = drivers[protest.protestingDriverId];
+        const accused = drivers[protest.accusedDriverId];
+        
+        return (
+          <ProtestListItem
+            key={protest.id}
+            protesterName={protester?.name || 'Unknown'}
+            protesterHref={`/drivers/${protest.protestingDriverId}`}
+            accusedName={accused?.name || 'Unknown'}
+            accusedHref={`/drivers/${protest.accusedDriverId}`}
+            status={protest.status}
+            isUrgent={isUrgent}
+            daysOld={daysSinceFiled}
+            lap={protest.incident?.lap ?? 0}
+            filedAtLabel={new Date(filedAt).toLocaleDateString()}
+            description={protest.incident?.description || protest.description}
+            proofVideoUrl={protest.proofVideoUrl || undefined}
+            isAdmin={true}
+            onReview={() => onReviewProtest(protest)}
+          />
+        );
+      })}
+    </Stack>
+  );
+}