Initial commit

client/src/components/modals/ConfirmDeleteModal.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { AlertTriangle } from "lucide-react";
+
+interface ConfirmDeleteModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  description: string;
+  itemName?: string;
+  isLoading?: boolean;
+}
+
+export default function ConfirmDeleteModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  itemName,
+  isLoading = false,
+}: ConfirmDeleteModalProps) {
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md" aria-describedby="delete-modal-description">
+        <DialogHeader>
+          <DialogTitle className="flex items-center space-x-2">
+            <AlertTriangle className="w-5 h-5 text-red-500" />
+            <span>{title}</span>
+          </DialogTitle>
+        </DialogHeader>
+        
+        <div className="py-4">
+          <p id="delete-modal-description" className="text-sm text-gray-600">
+            {description}
+          </p>
+          {itemName && (
+            <div className="mt-3 p-3 bg-red-50 rounded-lg border border-red-200">
+              <p className="text-sm font-medium text-red-800">
+                Élément à supprimer : <span className="font-bold">{itemName}</span>
+              </p>
+            </div>
+          )}
+          <div className="mt-4 p-3 bg-amber-50 rounded-lg border border-amber-200">
+            <p className="text-xs text-amber-700 font-medium">
+              ⚠️ Cette action est définitive et ne peut pas être annulée.
+            </p>
+          </div>
+        </div>
+
+        <DialogFooter className="flex justify-end space-x-2">
+          <Button
+            variant="outline"
+            onClick={onClose}
+            disabled={isLoading}
+          >
+            Annuler
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={onConfirm}
+            disabled={isLoading}
+            className="bg-red-600 hover:bg-red-700"
+          >
+            {isLoading ? "Suppression..." : "Supprimer définitivement"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}