diff --git a/components/staff/CreatePayslipModal.tsx b/components/staff/CreatePayslipModal.tsx index a7dfa2a..21db9a5 100644 --- a/components/staff/CreatePayslipModal.tsx +++ b/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(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