di usage in website

apps/website/components/leagues/QuickPenaltyModal.tsx

@@ -3,7 +3,7 @@
 import React, { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Button from '@/components/ui/Button';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { usePenaltyMutation } from '@/hooks/league/usePenaltyMutation';
 import { AlertTriangle, Clock, Flag, Zap } from 'lucide-react';
 
 interface DriverOption {
@@ -41,16 +41,14 @@ export default function QuickPenaltyModal({ raceId, drivers, onClose, preSelecte
   const [infractionType, setInfractionType] = useState<string>('');
   const [severity, setSeverity] = useState<string>('');
   const [notes, setNotes] = useState<string>('');
-  const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const router = useRouter();
-  const { penaltyService } = useServices();
+  const penaltyMutation = usePenaltyMutation();
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!selectedRaceId || !selectedDriver || !infractionType || !severity) return;
 
-    setLoading(true);
     setError(null);
 
     try {
@@ -64,15 +62,14 @@ export default function QuickPenaltyModal({ raceId, drivers, onClose, preSelecte
       if (notes.trim()) {
         command.notes = notes.trim();
       }
-      await penaltyService.applyPenalty(command);
+      
+      await penaltyMutation.mutateAsync(command);
 
       // Refresh the page to show updated results
       router.refresh();
       onClose();
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to apply penalty');
-    } finally {
-      setLoading(false);
     }
   };
 
@@ -206,7 +203,7 @@ export default function QuickPenaltyModal({ raceId, drivers, onClose, preSelecte
                 variant="secondary"
                 onClick={onClose}
                 className="flex-1"
-                disabled={loading}
+                disabled={penaltyMutation.isPending}
               >
                 Cancel
               </Button>
@@ -214,9 +211,9 @@ export default function QuickPenaltyModal({ raceId, drivers, onClose, preSelecte
                 type="submit"
                 variant="primary"
                 className="flex-1"
-                disabled={loading || !selectedRaceId || !selectedDriver || !infractionType || !severity}
+                disabled={penaltyMutation.isPending || !selectedRaceId || !selectedDriver || !infractionType || !severity}
               >
-                {loading ? 'Applying...' : 'Apply Penalty'}
+                {penaltyMutation.isPending ? 'Applying...' : 'Apply Penalty'}
               </Button>
             </div>
           </form>