RBAC, Permissions, and Export/Import

2025-12-16 20:04:00 +07:00
parent 02e38e1050
commit 9ed778db1c
30 changed files with 4579 additions and 487 deletions
--- a/src/components/ConfirmationDialog.js
+++ b/src/components/ConfirmationDialog.js
@@ -0,0 +1,111 @@
+import React from 'react';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from './ui/alert-dialog';
+import { AlertTriangle, Info, CheckCircle } from 'lucide-react';
+
+/**
+ * Reusable confirmation dialog component following the design system
+ *
+ * @param {boolean} open - Controls dialog visibility
+ * @param {function} onOpenChange - Callback when dialog open state changes
+ * @param {function} onConfirm - Callback when user confirms
+ * @param {string} title - Dialog title
+ * @param {string} description - Dialog description/message
+ * @param {string} confirmText - Confirm button text (default: "Confirm")
+ * @param {string} cancelText - Cancel button text (default: "Cancel")
+ * @param {string} variant - Visual variant: 'warning', 'danger', 'info', 'success' (default: 'warning')
+ * @param {boolean} loading - Show loading state on confirm button
+ */
+const ConfirmationDialog = ({
+  open,
+  onOpenChange,
+  onConfirm,
+  title,
+  description,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  variant = 'warning',
+  loading = false,
+}) => {
+  const variants = {
+    warning: {
+      icon: AlertTriangle,
+      iconColor: 'text-[#ff9e77]',
+      confirmButtonClass: 'bg-[#ff9e77] text-white hover:bg-[#e88d66] rounded-full px-6',
+    },
+    danger: {
+      icon: AlertTriangle,
+      iconColor: 'text-red-600',
+      confirmButtonClass: 'bg-red-600 text-white hover:bg-red-700 rounded-full px-6',
+    },
+    info: {
+      icon: Info,
+      iconColor: 'text-[#664fa3]',
+      confirmButtonClass: 'bg-[#664fa3] text-white hover:bg-[#553d8a] rounded-full px-6',
+    },
+    success: {
+      icon: CheckCircle,
+      iconColor: 'text-[#81B29A]',
+      confirmButtonClass: 'bg-[#81B29A] text-white hover:bg-[#6fa188] rounded-full px-6',
+    },
+  };
+
+  const config = variants[variant] || variants.warning;
+  const Icon = config.icon;
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent className="bg-white rounded-2xl border border-[#ddd8eb] p-0 overflow-hidden max-w-md">
+        <AlertDialogHeader className="p-6 pb-4">
+          <div className="flex items-start gap-4">
+            <div className={`p-3 rounded-full bg-[#F8F7FB] ${config.iconColor}`}>
+              <Icon className="h-6 w-6" />
+            </div>
+            <div className="flex-1">
+              <AlertDialogTitle
+                className="text-xl font-semibold text-[#422268] mb-2"
+                style={{ fontFamily: "'Inter', sans-serif" }}
+              >
+                {title}
+              </AlertDialogTitle>
+              <AlertDialogDescription
+                className="text-[#664fa3] text-sm leading-relaxed"
+                style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+              >
+                {description}
+              </AlertDialogDescription>
+            </div>
+          </div>
+        </AlertDialogHeader>
+        <AlertDialogFooter className="p-6 pt-4 bg-[#F8F7FB] flex-row gap-3 justify-end">
+          <AlertDialogCancel
+            className="border-2 border-[#ddd8eb] text-[#664fa3] hover:bg-white rounded-full px-6"
+            disabled={loading}
+          >
+            {cancelText}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={(e) => {
+              e.preventDefault();
+              onConfirm();
+            }}
+            className={config.confirmButtonClass}
+            disabled={loading}
+          >
+            {loading ? 'Processing...' : confirmText}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+export default ConfirmationDialog;