import { useForm } from '@inertiajs/react'; import { ArrowLeft, ArrowRight, Check } from 'lucide-react'; import { Children, cloneElement, isValidElement, useMemo, useState, } from 'react'; import type { KeyboardEvent, ReactNode } from 'react'; import type { ContractTypeOption, DepartmentOption, JobPositionOption, ManagerOption, SiteOption, UserOption, } from './employee-form'; import EmployeeController from '@/actions/App/Http/Controllers/Admin/EmployeeController'; import InputError from '@/components/input-error'; import { SearchableSelect } from '@/components/searchable-select'; import { Button } from '@/components/ui/button'; import { Checkbox } from '@/components/ui/checkbox'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Textarea } from '@/components/ui/textarea'; import { cn } from '@/lib/utils'; const STEPS = [ { id: 'identity', title: 'Identité' }, { id: 'role', title: 'Poste' }, { id: 'contract', title: 'Contrat' }, { id: 'access', title: 'Accès' }, ] as const; const STEP_COPY = [ { title: 'Qui est cette personne ?', description: 'État civil, pièce d’identité, adresse et situation personnelle.', }, { title: 'Quel est son rôle ?', description: 'Poste, organisation et conditions de travail.', }, { title: 'Quel contrat ouvre le dossier ?', description: 'Le premier contrat sera le contrat courant.', }, { title: 'Finaliser', description: 'Lier un compte, un manager, puis créer.', }, ] as const; type StepIndex = 0 | 1 | 2 | 3; type StepField = | 'civility' | 'first_name' | 'last_name' | 'birth_name' | 'email' | 'personal_email' | 'phone' | 'work_phone' | 'birth_date' | 'birth_place' | 'nationality' | 'cnps_number' | 'cmu_number' | 'id_document_type' | 'id_document_number' | 'id_document_issued_on' | 'id_document_expires_on' | 'residence_permit_number' | 'residence_permit_expires_on' | 'work_permit_number' | 'work_permit_expires_on' | 'address' | 'postal_code' | 'city' | 'quartier' | 'commune' | 'country' | 'marital_status' | 'dependent_children_count' | 'emergency_contact_name' | 'emergency_contact_relationship' | 'emergency_contact_phone' | 'job_title' | 'job_position_id' | 'professional_category' | 'classification' | 'work_time' | 'weekly_hours' | 'department_id' | 'site_id' | 'hire_date' | 'seniority_date' | 'probation_end_date' | 'contract_type' | 'contract_start' | 'contract_end' | 'user_id' | 'manager_id' | 'is_active'; const STEP_FIELDS: StepField[][] = [ [ 'civility', 'first_name', 'last_name', 'birth_name', 'email', 'personal_email', 'phone', 'work_phone', 'birth_date', 'birth_place', 'nationality', 'cnps_number', 'cmu_number', 'id_document_type', 'id_document_number', 'id_document_issued_on', 'id_document_expires_on', 'residence_permit_number', 'residence_permit_expires_on', 'work_permit_number', 'work_permit_expires_on', 'address', 'postal_code', 'city', 'quartier', 'commune', 'country', 'marital_status', 'dependent_children_count', 'emergency_contact_name', 'emergency_contact_relationship', 'emergency_contact_phone', ], [ 'job_title', 'job_position_id', 'department_id', 'site_id', 'professional_category', 'classification', 'work_time', 'weekly_hours', 'hire_date', 'seniority_date', 'probation_end_date', ], ['contract_type', 'contract_start', 'contract_end'], ['user_id', 'manager_id', 'is_active'], ]; type Props = { contractTypes: ContractTypeOption[]; civilities: ContractTypeOption[]; maritalStatuses: ContractTypeOption[]; workTimes: ContractTypeOption[]; professionalCategories: ContractTypeOption[]; idDocumentTypes: ContractTypeOption[]; users: UserOption[]; managers: ManagerOption[]; departments: DepartmentOption[]; sites: SiteOption[]; jobPositions: JobPositionOption[]; }; function Field({ children, className, }: { children: ReactNode; className?: string; }) { const items = Children.toArray(children); const invalid = items.some( (child) => isValidElement<{ message?: string }>(child) && child.type === InputError && Boolean(child.props.message), ); return (
{items.map((child, index) => { if (!isValidElement(child)) { return child; } if (child.type === Input || child.type === Textarea) { return cloneElement(child, { key: child.key ?? index, 'aria-invalid': invalid || undefined, } as never); } if (child.type === SearchableSelect) { return cloneElement(child, { key: child.key ?? index, invalid, } as never); } return child; })}
); } function digitsOnlyPhone(value: string): string { return value.replace(/[^\d+\s().-]/g, ''); } function CreateSection({ title, children, }: { title: string; children: ReactNode; }) { return (

{title}

{children}
); } function SectionRule() { return
; } export function EmployeeCreateForm({ contractTypes, civilities, maritalStatuses, workTimes, professionalCategories, idDocumentTypes, users, managers, departments, sites, jobPositions, }: Props) { const [step, setStep] = useState(0); const [stepErrors, setStepErrors] = useState< Partial> >({}); const form = useForm({ civility: 'none', first_name: '', last_name: '', birth_name: '', email: '', personal_email: '', phone: '', work_phone: '', birth_date: '', birth_place: '', nationality: '', cnps_number: '', cmu_number: '', id_document_type: 'none', id_document_number: '', id_document_issued_on: '', id_document_expires_on: '', residence_permit_number: '', residence_permit_expires_on: '', work_permit_number: '', work_permit_expires_on: '', address: '', postal_code: '', city: '', quartier: '', commune: '', country: '', marital_status: 'none', dependent_children_count: '', emergency_contact_name: '', emergency_contact_relationship: '', emergency_contact_phone: '', job_title: '', job_position_id: 'none', professional_category: 'none', classification: '', work_time: 'none', weekly_hours: '', department_id: 'none', site_id: 'none', hire_date: '', seniority_date: '', probation_end_date: '', contract_type: contractTypes[0]?.value ?? 'cdi', contract_start: '', contract_end: '', user_id: 'none', manager_id: 'none', is_active: true, }); const contractLabel = useMemo( () => contractTypes.find((type) => type.value === form.data.contract_type) ?.label ?? form.data.contract_type, [contractTypes, form.data.contract_type], ); const userOptions = useMemo( () => users.map((user) => ({ value: String(user.id), label: user.name, })), [users], ); const managerOptions = useMemo( () => managers.map((manager) => ({ value: String(manager.user_id), label: `${manager.full_name} (${manager.code})`, })), [managers], ); const departmentOptions = useMemo( () => departments.map((department) => ({ value: String(department.id), label: department.name, })), [departments], ); const siteOptions = useMemo( () => sites.map((site) => ({ value: String(site.id), label: site.name, })), [sites], ); const jobPositionOptions = useMemo( () => jobPositions.map((position) => ({ value: String(position.id), label: position.name, })), [jobPositions], ); const selectedUser = users.find( (user) => String(user.id) === form.data.user_id, ); const selectedManager = managers.find( (manager) => String(manager.user_id) === form.data.manager_id, ); const selectedDepartment = departments.find( (department) => String(department.id) === form.data.department_id, ); function clearFieldError(field: StepField) { setStepErrors((current) => { if (!current[field]) { return current; } const next = { ...current }; delete next[field]; return next; }); } function validateStep(current: StepIndex): boolean { const errors: Partial> = {}; if (current === 0) { if (!form.data.first_name.trim()) { errors.first_name = 'Le prénom est obligatoire.'; } if (!form.data.last_name.trim()) { errors.last_name = 'Le nom est obligatoire.'; } if ( form.data.email.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.data.email.trim()) ) { errors.email = 'Adresse email invalide.'; } } if (current === 2) { if (!form.data.contract_type) { errors.contract_type = 'Le type de contrat est obligatoire.'; } if ( form.data.contract_start && form.data.contract_end && form.data.contract_end < form.data.contract_start ) { errors.contract_end = 'La date de fin doit être postérieure ou égale au début.'; } } setStepErrors(errors); return Object.keys(errors).length === 0; } function goNext() { if (!validateStep(step)) { return; } setStep( (current) => Math.min(current + 1, STEPS.length - 1) as StepIndex, ); } function goBack() { setStepErrors({}); setStep((current) => Math.max(current - 1, 0) as StepIndex); } function stepHasServerError(index: number): boolean { return STEP_FIELDS[index].some((field) => Boolean(form.errors[field])); } function createEmployee() { const identityOk = validateStep(0); if (!identityOk) { setStep(0); return; } const contractOk = validateStep(2); if (!contractOk) { setStep(2); return; } form.transform((data) => ({ civility: data.civility === 'none' ? null : data.civility, first_name: data.first_name, last_name: data.last_name, birth_name: data.birth_name || null, email: data.email || null, personal_email: data.personal_email || null, phone: data.phone || null, work_phone: data.work_phone || null, birth_date: data.birth_date || null, birth_place: data.birth_place || null, nationality: data.nationality || null, cnps_number: data.cnps_number || null, cmu_number: data.cmu_number || null, id_document_type: data.id_document_type === 'none' ? null : data.id_document_type, id_document_number: data.id_document_number || null, id_document_issued_on: data.id_document_issued_on || null, id_document_expires_on: data.id_document_expires_on || null, residence_permit_number: data.residence_permit_number || null, residence_permit_expires_on: data.residence_permit_expires_on || null, work_permit_number: data.work_permit_number || null, work_permit_expires_on: data.work_permit_expires_on || null, address: data.address || null, postal_code: data.postal_code || null, city: data.city || null, quartier: data.quartier || null, commune: data.commune || null, country: data.country || null, marital_status: data.marital_status === 'none' ? null : data.marital_status, dependent_children_count: data.dependent_children_count === '' ? null : Number(data.dependent_children_count), emergency_contact_name: data.emergency_contact_name || null, emergency_contact_relationship: data.emergency_contact_relationship || null, emergency_contact_phone: data.emergency_contact_phone || null, job_title: data.job_title || null, job_position_id: data.job_position_id === 'none' ? null : Number(data.job_position_id), professional_category: data.professional_category === 'none' ? null : data.professional_category, classification: data.classification || null, work_time: data.work_time === 'none' ? null : data.work_time, weekly_hours: data.weekly_hours === '' ? null : Number(data.weekly_hours), department_id: data.department_id === 'none' ? null : Number(data.department_id), site_id: data.site_id === 'none' ? null : Number(data.site_id), hire_date: data.hire_date || null, seniority_date: data.seniority_date || null, probation_end_date: data.probation_end_date || null, contract_type: data.contract_type, contract_start: data.contract_start || null, contract_end: data.contract_end || null, user_id: data.user_id === 'none' ? null : Number(data.user_id), manager_id: data.manager_id === 'none' ? null : Number(data.manager_id), is_active: data.is_active, })); form.post(EmployeeController.store.url(), { onError: (errors) => { const firstErrorStep = STEP_FIELDS.findIndex((fields) => fields.some((field) => Boolean(errors[field])), ); if (firstErrorStep >= 0) { setStep(firstErrorStep as StepIndex); } }, }); } function handleFormKeyDown(event: KeyboardEvent) { if (event.key !== 'Enter') { return; } const target = event.target as HTMLElement; if (target.tagName === 'TEXTAREA' || target.isContentEditable) { return; } // Empêche la soumission implicite (ex. Entrée dans un champ date). event.preventDefault(); if (step < STEPS.length - 1) { goNext(); } } return (
event.preventDefault()} onKeyDown={handleFormKeyDown} className="space-y-10" > {' '}

Étape {step + 1} sur {STEPS.length}

{STEP_COPY[step].title}

{STEP_COPY[step].description}

{step === 0 && (
{ form.setData('civility', value); clearFieldError('civility'); }} placeholder="Choisir…" noneLabel="Non renseignée" /> { form.setData( 'last_name', e.target.value, ); clearFieldError('last_name'); }} autoFocus autoComplete="family-name" /> { form.setData( 'first_name', e.target.value, ); clearFieldError('first_name'); }} autoComplete="given-name" /> { form.setData( 'birth_name', e.target.value, ); clearFieldError('birth_name'); }} /> { form.setData( 'birth_date', e.target.value, ); clearFieldError('birth_date'); }} /> { form.setData( 'birth_place', e.target.value, ); clearFieldError('birth_place'); }} /> { form.setData( 'nationality', e.target.value, ); clearFieldError('nationality'); }} /> { form.setData( 'cnps_number', e.target.value, ); clearFieldError('cnps_number'); }} /> { form.setData( 'cmu_number', e.target.value, ); clearFieldError('cmu_number'); }} /> { form.setData('marital_status', value); clearFieldError('marital_status'); }} placeholder="Choisir…" noneLabel="Non renseignée" /> { form.setData( 'dependent_children_count', e.target.value, ); clearFieldError( 'dependent_children_count', ); }} /> { form.setData('id_document_type', value); clearFieldError('id_document_type'); }} placeholder="Choisir…" noneLabel="Non renseigné" /> { form.setData( 'id_document_number', e.target.value, ); clearFieldError('id_document_number'); }} /> { form.setData( 'id_document_issued_on', e.target.value, ); clearFieldError( 'id_document_issued_on', ); }} /> { form.setData( 'id_document_expires_on', e.target.value, ); clearFieldError( 'id_document_expires_on', ); }} /> { form.setData( 'residence_permit_number', e.target.value, ); clearFieldError( 'residence_permit_number', ); }} /> { form.setData( 'residence_permit_expires_on', e.target.value, ); clearFieldError( 'residence_permit_expires_on', ); }} /> { form.setData( 'work_permit_number', e.target.value, ); clearFieldError('work_permit_number'); }} /> { form.setData( 'work_permit_expires_on', e.target.value, ); clearFieldError( 'work_permit_expires_on', ); }} /> { form.setData('email', e.target.value); clearFieldError('email'); }} autoComplete="email" placeholder="prenom.nom@entreprise.com" /> { form.setData( 'personal_email', e.target.value, ); clearFieldError('personal_email'); }} /> { form.setData( 'phone', digitsOnlyPhone(e.target.value), ); clearFieldError('phone'); }} autoComplete="tel" /> { form.setData( 'work_phone', digitsOnlyPhone(e.target.value), ); clearFieldError('work_phone'); }} />