114 lines
4.4 KiB
TypeScript
114 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import { CheckCircle, AlertTriangle, X } from "lucide-react";
|
|
|
|
interface SaveConfirmationModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
missingItems: string[];
|
|
}
|
|
|
|
export function SaveConfirmationModal({
|
|
isOpen,
|
|
onClose,
|
|
missingItems
|
|
}: SaveConfirmationModalProps) {
|
|
if (!isOpen) return null;
|
|
|
|
const isComplete = missingItems.length === 0;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
|
|
<div className="bg-white rounded-2xl shadow-2xl max-w-lg w-full overflow-hidden">
|
|
{/* Header */}
|
|
<div className={`p-6 ${isComplete ? 'bg-green-50' : 'bg-blue-50'}`}>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center gap-3">
|
|
{isComplete ? (
|
|
<div className="flex-shrink-0 w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
|
|
<CheckCircle className="h-6 w-6 text-green-600" />
|
|
</div>
|
|
) : (
|
|
<div className="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<AlertTriangle className="h-6 w-6 text-blue-600" />
|
|
</div>
|
|
)}
|
|
<div>
|
|
<h2 className="text-xl font-semibold text-gray-900">
|
|
{isComplete ? 'Dossier complet !' : 'Modifications enregistrées'}
|
|
</h2>
|
|
<p className="text-sm text-gray-600 mt-1">
|
|
{isComplete
|
|
? 'Tous les éléments requis ont été fournis'
|
|
: 'Vos données ont été sauvegardées avec succès'
|
|
}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="ml-4 p-2 hover:bg-gray-200 rounded-lg transition-colors flex-shrink-0"
|
|
aria-label="Fermer"
|
|
>
|
|
<X className="h-5 w-5 text-gray-500" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-6">
|
|
{isComplete ? (
|
|
<div className="space-y-4">
|
|
<p className="text-gray-700">
|
|
Merci d'avoir complété votre dossier ! Toutes les informations nécessaires ont été transmises.
|
|
</p>
|
|
<p className="text-gray-700">
|
|
Vous pouvez revenir sur cette page à tout moment via le lien qui vous a été envoyé pour consulter ou modifier vos informations.
|
|
</p>
|
|
<div className="bg-green-50 border border-green-200 rounded-lg p-4">
|
|
<p className="text-sm text-green-800">
|
|
<strong>✓ Dossier complet</strong> - Nous avons toutes les informations nécessaires pour traiter votre embauche.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
<p className="text-gray-700">
|
|
Vous pouvez revenir sur cette page à tout moment via le lien qui vous a été envoyé pour compléter les informations manquantes.
|
|
</p>
|
|
|
|
<div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
|
|
<h3 className="font-semibold text-amber-900 mb-2 flex items-center gap-2">
|
|
<AlertTriangle className="h-4 w-4" />
|
|
Éléments manquants
|
|
</h3>
|
|
<ul className="space-y-1.5">
|
|
{missingItems.map((item, index) => (
|
|
<li key={index} className="text-sm text-amber-800 flex items-start gap-2">
|
|
<span className="text-amber-600 mt-0.5">•</span>
|
|
<span>{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<p className="text-sm text-gray-600">
|
|
Ces informations sont nécessaires pour finaliser votre dossier d'embauche.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="px-6 py-4 bg-gray-50 border-t flex justify-end">
|
|
<button
|
|
onClick={onClose}
|
|
className="px-6 py-2.5 bg-teal-600 hover:bg-teal-700 text-white rounded-lg font-medium transition-colors"
|
|
>
|
|
J'ai compris
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|