123 lines
4.4 KiB
TypeScript
123 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import { X, AlertTriangle } from "lucide-react";
|
|
|
|
interface CancelContractModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onConfirm: () => void;
|
|
isCancelling: boolean;
|
|
contractInfo: {
|
|
contract_number?: string;
|
|
employee_name?: string;
|
|
};
|
|
}
|
|
|
|
export default function CancelContractModal({
|
|
isOpen,
|
|
onClose,
|
|
onConfirm,
|
|
isCancelling,
|
|
contractInfo,
|
|
}: CancelContractModalProps) {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
|
<div className="bg-white rounded-xl shadow-xl max-w-md w-full">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between p-6 border-b">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
|
|
<AlertTriangle className="h-5 w-5 text-red-600" />
|
|
</div>
|
|
<h2 className="text-xl font-bold text-slate-900">
|
|
Annuler le contrat
|
|
</h2>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
disabled={isCancelling}
|
|
className="p-2 hover:bg-slate-100 rounded-lg transition-colors disabled:opacity-50"
|
|
>
|
|
<X className="h-5 w-5 text-slate-400" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-6 space-y-4">
|
|
{/* Avertissement principal */}
|
|
<div className="p-4 bg-amber-50 border border-amber-200 rounded-lg">
|
|
<div className="text-sm text-amber-900">
|
|
<div className="font-semibold mb-2">Action d'annulation</div>
|
|
<div>
|
|
Cette action va marquer le contrat comme annulé. Les données seront
|
|
conservées mais le contrat ne sera plus traité.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Informations du contrat */}
|
|
<div className="p-4 bg-slate-50 border border-slate-200 rounded-lg">
|
|
<div className="text-sm font-medium text-slate-900 mb-2">
|
|
Contrat concerné
|
|
</div>
|
|
<div className="space-y-1 text-sm text-slate-700">
|
|
{contractInfo.contract_number && (
|
|
<div>
|
|
<span className="font-medium">N° : </span>
|
|
{contractInfo.contract_number}
|
|
</div>
|
|
)}
|
|
{contractInfo.employee_name && (
|
|
<div>
|
|
<span className="font-medium">Salarié : </span>
|
|
{contractInfo.employee_name}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Modifications appliquées */}
|
|
<div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
|
<div className="text-sm text-blue-900">
|
|
<div className="font-semibold mb-2">Modifications appliquées :</div>
|
|
<ul className="list-disc list-inside space-y-1 text-xs">
|
|
<li>État de la demande : <strong>Annulée</strong></li>
|
|
<li>État de la paie : <strong>Non concernée</strong></li>
|
|
<li>DPAE : <strong>Non concernée</strong></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Note importante */}
|
|
<div className="flex gap-2 p-3 bg-slate-100 border border-slate-300 rounded-lg">
|
|
<AlertTriangle className="h-5 w-5 text-slate-600 flex-shrink-0 mt-0.5" />
|
|
<div className="text-sm text-slate-700">
|
|
Le contrat restera visible dans l'historique mais ne sera plus comptabilisé
|
|
dans les statistiques actives.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="flex items-center justify-end gap-3 p-6 border-t bg-slate-50">
|
|
<button
|
|
onClick={onClose}
|
|
disabled={isCancelling}
|
|
className="px-4 py-2 text-slate-700 hover:bg-slate-200 rounded-lg transition-colors font-medium disabled:opacity-50"
|
|
>
|
|
Fermer
|
|
</button>
|
|
<button
|
|
onClick={onConfirm}
|
|
disabled={isCancelling}
|
|
className="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{isCancelling ? "Annulation..." : "Confirmer l'annulation"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|