feat: Focus automatique sur champ Net avant PAS dans modal ajout paie

components/staff/CreatePayslipModal.tsx

@@ -1,7 +1,7 @@
 // components/staff/CreatePayslipModal.tsx
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { X, FileText, Search, Loader, AlertCircle } from "lucide-react";
 import { toast } from "sonner";
 
@@ -94,6 +94,9 @@ export default function CreatePayslipModal({
   const [netAfterWithholding, setNetAfterWithholding] = useState("");
   const [employerCost, setEmployerCost] = useState("");
 
+  // Ref pour le champ Net avant PAS
+  const netAmountInputRef = useRef<HTMLInputElement>(null);
+
   // Load preselected contract
   useEffect(() => {
     if (!isOpen || !preselectedContractId) return;
@@ -237,6 +240,17 @@ export default function CreatePayslipModal({
     return () => document.removeEventListener('keydown', handleKeyDown);
   }, [isOpen, onClose]);
 
+  // Focus automatique sur le champ Net avant PAS quand un contrat est sélectionné
+  useEffect(() => {
+    if (isOpen && selectedContract && !hasExistingPayslip && netAmountInputRef.current) {
+      // Petit délai pour s'assurer que le formulaire est bien rendu
+      const timer = setTimeout(() => {
+        netAmountInputRef.current?.focus();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen, selectedContract, hasExistingPayslip]);
+
   const handleSelectContract = (contract: Contract) => {
     setSelectedContract(contract);
     setSearchQuery("");
@@ -631,6 +645,7 @@ export default function CreatePayslipModal({
                         Net avant PAS
                       </label>
                       <input
+                        ref={netAmountInputRef}
                         type="number"
                         step="0.01"
                         value={netAmount}