wip

apps/website/components/races/InlinePenaltyButton.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import React from 'react';
+import { AlertTriangle } from 'lucide-react';
+import Button from '../ui/Button';
+
+interface DriverDTO {
+  id: string;
+  name: string;
+}
+
+interface InlinePenaltyButtonProps {
+  driver: DriverDTO;
+  onPenaltyClick?: (driver: DriverDTO) => void;
+  isAdmin: boolean;
+}
+
+export default function InlinePenaltyButton({
+  driver,
+  onPenaltyClick,
+  isAdmin,
+}: InlinePenaltyButtonProps) {
+  if (!isAdmin) return null;
+
+  const handleButtonClick = () => {
+    if (onPenaltyClick) {
+      onPenaltyClick(driver);
+    }
+  };
+
+  return (
+    <Button
+      variant="danger"
+      className="p-1.5 min-h-[32px] w-8 h-8 rounded-full flex items-center justify-center"
+      onClick={handleButtonClick}
+      title={`Issue penalty to ${driver.name}`}
+    >
+      <AlertTriangle className="w-4 h-4 flex-shrink-0" />
+    </Button>
+  );
+}

apps/website/components/races/ResultsTable.tsx

@@ -2,6 +2,7 @@
 
 import Link from 'next/link';
 import { AlertTriangle, ExternalLink } from 'lucide-react';
+import InlinePenaltyButton from './InlinePenaltyButton';
 
 type PenaltyTypeDTO =
   | 'time_penalty'
@@ -41,6 +42,8 @@ interface ResultsTableProps {
   fastestLapTime?: number | undefined;
   penalties?: PenaltyData[];
   currentDriverId?: string | undefined;
+  isAdmin?: boolean;
+  onPenaltyClick?: (driver: DriverDTO) => void;
 }
 
 export default function ResultsTable({
@@ -50,6 +53,8 @@ export default function ResultsTable({
   fastestLapTime,
   penalties = [],
   currentDriverId,
+  isAdmin = false,
+  onPenaltyClick,
 }: ResultsTableProps) {
   const getDriver = (driverId: string): DriverDTO | undefined => {
     return drivers.find((d) => d.id === driverId);
@@ -118,6 +123,7 @@ export default function ResultsTable({
             <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Points</th>
             <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">+/-</th>
             <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Penalties</th>
+            {isAdmin && <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Actions</th>}
           </tr>
         </thead>
         <tbody>
@@ -246,6 +252,17 @@ export default function ResultsTable({
                     <span className="text-gray-500">—</span>
                   )}
                 </td>
+                {isAdmin && (
+                  <td className="py-3 px-4">
+                    {driver && onPenaltyClick && (
+                      <InlinePenaltyButton
+                        driver={driver}
+                        onPenaltyClick={onPenaltyClick}
+                        isAdmin={isAdmin}
+                      />
+                    )}
+                  </td>
+                )}
               </tr>
             );
           })}