initial commit

apps/Frontend/src/components/ui/deleteDialog.tsx

@@ -0,0 +1,52 @@
+export const DeleteConfirmationDialog = ({
+  isOpen,
+  onConfirm,
+  onCancel,
+  entityName,
+}: {
+  isOpen: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+  entityName?: string;
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-[9999] pointer-events-auto">
+      <div
+        className="bg-white p-6 rounded-md shadow-md w-[90%] max-w-md pointer-events-auto"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h2 className="text-xl font-semibold mb-4">Confirm Deletion</h2>
+
+        <p>
+          Are you sure you want to delete <strong>{entityName}</strong>?
+        </p>
+
+        <div className="mt-6 flex justify-end space-x-4">
+          <button
+            type="button"
+            className="bg-gray-200 px-4 py-2 rounded hover:bg-gray-300"
+            onClick={(e) => {
+              e.stopPropagation();
+              onCancel();
+            }}
+          >
+            Cancel
+          </button>
+
+          <button
+            type="button"
+            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700"
+            onClick={(e) => {
+              e.stopPropagation();
+              onConfirm();
+            }}
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};