@algorithm-shift/design-system 1.2.73 → 1.2.75

package/dist/index.js

@@ -51,6 +51,7 @@ __export(src_exports, {
   Image: () => Image_default,
   Modal: () => Modal,
   MultiCheckbox: () => MultiCheckbox_default,
+  MultiSelect: () => MultiSelect_default,
   Navbar: () => Navbar,
   NumberInput: () => NumberInput_default,
   Pagination: () => Pagination_default,
@@ -28363,21 +28364,334 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
 };
 var TextInputGroup_default = TextInputGroup;
 
-// src/components/ui/data-table.tsx
+// src/components/Inputs/Multiselect/MultiSelect.tsx
 var React7 = __toESM(require("react"));
+
+// src/components/ui/command.tsx
+var import_cmdk = require("cmdk");
+
+// src/components/ui/dialog.tsx
+var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
+var import_jsx_runtime46 = require("react/jsx-runtime");
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[60] bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[70] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(X, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/command.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+function Command2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    import_cmdk.Command,
+    {
+      "data-slot": "command",
+      className: cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    "div",
+    {
+      "data-slot": "command-input-wrapper",
+      className: "flex h-9 items-center gap-2 border-b px-3",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Search, { className: "size-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          import_cmdk.Command.Input,
+          {
+            "data-slot": "command-input",
+            className: cn(
+              "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+              className
+            ),
+            ...props
+          }
+        )
+      ]
+    }
+  );
+}
+function CommandList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    import_cmdk.Command.List,
+    {
+      "data-slot": "command-list",
+      className: cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandEmpty({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    import_cmdk.Command.Empty,
+    {
+      "data-slot": "command-empty",
+      className: "py-6 text-center text-sm",
+      ...props
+    }
+  );
+}
+function CommandGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    import_cmdk.Command.Group,
+    {
+      "data-slot": "command-group",
+      className: cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    import_cmdk.Command.Item,
+    {
+      "data-slot": "command-item",
+      className: cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/Inputs/Multiselect/MultiSelect.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var MultiSelect = ({
+  value = [],
+  onChange,
+  data = [],
+  placeholder = "Select...",
+  disabled,
+  searchable = true,
+  className = "",
+  ...props
+}) => {
+  const [open, setOpen] = React7.useState(false);
+  React7.useEffect(() => {
+    if (value) {
+      onChange(value);
+    }
+  }, []);
+  const toggleOption = (val) => {
+    onChange(
+      value?.includes(val) ? value.filter((v) => v !== val) : [...value || [], val]
+    );
+  };
+  const selectedLabels = React7.useMemo(
+    () => data.filter((opt) => value.includes(opt.value)).map((opt) => opt.label),
+    [data, value]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+      Button,
+      {
+        variant: "outline",
+        role: "combobox",
+        className: `w-full justify-between ${className} ${props.errorMessage ? "border-red-500" : ""}`,
+        disabled,
+        type: "button",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "truncate", children: selectedLabels.length > 0 ? selectedLabels.join(", ") : placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      PopoverContent,
+      {
+        align: "start",
+        className: "w-[var(--radix-popover-trigger-width)] p-0",
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onInteractOutside: (e) => {
+          if (e.target.closest(".keep-open")) e.preventDefault();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Command2, { shouldFilter: searchable, children: [
+          searchable && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CommandInput, { placeholder: "Search..." }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(CommandList, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CommandEmpty, { children: "No options found." }),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CommandGroup, { children: data.map((opt) => {
+              const isSelected = value.includes(opt.value);
+              return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                "div",
+                {
+                  className: "keep-open",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                    CommandItem,
+                    {
+                      onMouseDown: (e) => {
+                        e.preventDefault();
+                        toggleOption(opt.value);
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Checkbox, { checked: isSelected }),
+                        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { children: opt.label })
+                      ] })
+                    },
+                    opt.value
+                  )
+                },
+                opt.value
+              );
+            }) })
+          ] })
+        ] })
+      }
+    ),
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+  ] });
+};
+var MultiSelect_default = MultiSelect;
+
+// src/components/ui/data-table.tsx
+var React8 = __toESM(require("react"));
 var import_free_solid_svg_icons2 = require("@fortawesome/free-solid-svg-icons");
 var import_react_fontawesome3 = require("@fortawesome/react-fontawesome");
 var import_react_table = require("@tanstack/react-table");
 
 // src/components/ui/table.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function Table3({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "div",
     {
       "data-slot": "table-container",
       className: "relative w-full overflow-x-auto rounded-md border border-gray-200 bg-white",
-      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         "table",
         {
           "data-slot": "table",
@@ -28389,7 +28703,7 @@ function Table3({ className, ...props }) {
   );
 }
 function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "thead",
     {
       "data-slot": "table-header",
@@ -28402,7 +28716,7 @@ function TableHeader({ className, ...props }) {
   );
 }
 function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "tbody",
     {
       "data-slot": "table-body",
@@ -28415,7 +28729,7 @@ function TableBody({ className, ...props }) {
   );
 }
 function TableRow({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "tr",
     {
       "data-slot": "table-row",
@@ -28428,7 +28742,7 @@ function TableRow({ className, ...props }) {
   );
 }
 function TableHead({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "th",
     {
       "data-slot": "table-head",
@@ -28441,7 +28755,7 @@ function TableHead({ className, ...props }) {
   );
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "td",
     {
       "data-slot": "table-cell",
@@ -28455,7 +28769,7 @@ function TableCell({ className, ...props }) {
 }
 
 // src/components/ui/data-table.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function DataTable({
   columns,
   data,
@@ -28472,10 +28786,10 @@ function DataTable({
   globalSearch,
   onCellClick
 }) {
-  const [columnFilters, setColumnFilters] = React7.useState([]);
-  const [columnVisibility, setColumnVisibility] = React7.useState({});
-  const [manualSort, setManualSort] = React7.useState(null);
-  const [searchTerm, setSearchTerm] = React7.useState("");
+  const [columnFilters, setColumnFilters] = React8.useState([]);
+  const [columnVisibility, setColumnVisibility] = React8.useState({});
+  const [manualSort, setManualSort] = React8.useState(null);
+  const [searchTerm, setSearchTerm] = React8.useState("");
   const table = (0, import_react_table.useReactTable)({
     data,
     columns,
@@ -28523,11 +28837,11 @@ function DataTable({
     }
     return [];
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "overflow-hidden rounded-md w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: `flex ${globalSearch ? "justify-between" : "justify-end"} p-2 bg-gray-50`, children: [
-      globalSearch && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-2 w-full max-w-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "relative w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "overflow-hidden rounded-md w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: `flex ${globalSearch ? "justify-between" : "justify-end"} p-2 bg-gray-50`, children: [
+      globalSearch && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-2 w-full max-w-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "relative w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             "input",
             {
               type: "text",
@@ -28542,9 +28856,9 @@ function DataTable({
               className: "border border-gray-300 rounded-md text-sm px-3 py-2 pl-8 w-full focus:outline-none focus:ring-1 focus:ring-[#12715B]"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Search, { className: "absolute left-2 top-2.5 text-gray-400", size: 16 })
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Search, { className: "absolute left-2 top-2.5 text-gray-400", size: 16 })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           Button,
           {
             size: "sm",
@@ -28554,8 +28868,8 @@ function DataTable({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Popover, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Popover, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           Button,
           {
             variant: "outline",
@@ -28564,10 +28878,10 @@ function DataTable({
             children: "Manage Columns"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(PopoverContent, { align: "end", className: "w-48 p-3 space-y-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "text-sm font-medium mb-2", children: "Show / Hide Columns" }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "flex items-center gap-2 text-sm font-semibold border-b pb-2 mb-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(PopoverContent, { align: "end", className: "w-48 p-3 space-y-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "text-sm font-medium mb-2", children: "Show / Hide Columns" }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("label", { className: "flex items-center gap-2 text-sm font-semibold border-b pb-2 mb-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
               "input",
               {
                 type: "checkbox",
@@ -28586,8 +28900,8 @@ function DataTable({
             ),
             "Toggle All"
           ] }),
-          table.getAllLeafColumns().map((column) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "flex items-center gap-2 text-sm", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          table.getAllLeafColumns().map((column) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("label", { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
               "input",
               {
                 type: "checkbox",
@@ -28600,13 +28914,13 @@ function DataTable({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Table3, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: hg.headers.map((header) => {
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Table3, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TableRow, { children: hg.headers.map((header) => {
         const canSort = header.column.getCanSort();
         const canFilter = header.column.getCanFilter();
         const sortDir = manualSort?.key === header.column.id ? manualSort.dir : null;
-        return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableHead, { className: "relative select-none", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TableHead, { className: "relative select-none", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
             "span",
             {
               className: `flex items-center gap-1 ${canSort ? "cursor-pointer" : ""}`,
@@ -28618,32 +28932,32 @@ function DataTable({
               },
               children: [
                 (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()),
-                canSort && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
-                  sortDir === "asc" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowUp, { size: 14, className: "text-gray-500" }),
-                  sortDir === "desc" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowDown, { size: 14, className: "text-gray-500" }),
-                  !sortDir && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowUpDown, { size: 14, className: "text-gray-400" })
+                canSort && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+                  sortDir === "asc" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ArrowUp, { size: 14, className: "text-gray-500" }),
+                  sortDir === "desc" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ArrowDown, { size: 14, className: "text-gray-500" }),
+                  !sortDir && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ArrowUpDown, { size: 14, className: "text-gray-400" })
                 ] })
               ]
             }
           ),
-          canFilter && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Popover, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          canFilter && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Popover, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
               "span",
               {
                 role: "presentation",
                 className: "pl-5 cursor-pointer",
                 onClick: (e) => e.stopPropagation(),
-                children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons2.faEllipsisH, className: "w-5 h-5 text-gray-500" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons2.faEllipsisH, className: "w-5 h-5 text-gray-500" })
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
               PopoverContent,
               {
                 align: "center",
                 sideOffset: 14,
                 className: "w-50 p-3 z-[200] border-gray-300",
                 avoidCollisions: true,
-                children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
                   "form",
                   {
                     onSubmit: (e) => {
@@ -28656,8 +28970,8 @@ function DataTable({
                     },
                     className: "space-y-2",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("label", { htmlFor: "filter", className: "text-xs text-gray-500 font-normal", children: "Filter by value:" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("label", { htmlFor: "filter", className: "text-xs text-gray-500 font-normal", children: "Filter by value:" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                         "input",
                         {
                           name: "filter",
@@ -28667,7 +28981,7 @@ function DataTable({
                           autoComplete: "off"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "justify-end flex", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "justify-end flex", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                         Button,
                         {
                           type: "submit",
@@ -28683,10 +28997,10 @@ function DataTable({
           ] })
         ] }) }, header.id);
       }) }, hg.id)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableBody, { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "Loading..." }) }) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: row.getVisibleCells().map((cell) => {
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TableBody, { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "Loading..." }) }) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TableRow, { children: row.getVisibleCells().map((cell) => {
         const meta = cell.column.columnDef.meta || {};
         const isClickable = meta?.isClickable;
-        return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           TableCell,
           {
             className: `${meta?.cellClass ?? ""} ${isClickable ? "cursor-pointer hover:bg-gray-100 underline" : ""}`,
@@ -28700,17 +29014,17 @@ function DataTable({
           },
           cell.id
         );
-      }) }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) }) })
+      }) }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) }) })
     ] }),
-    pagination && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center justify-between py-3 px-2 text-sm w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { children: [
+    pagination && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center justify-between py-3 px-2 text-sm w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { children: [
         "Page ",
         table.getState().pagination.pageIndex + 1,
         " of ",
         table.getPageCount()
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "button",
           {
             onClick: () => table.previousPage(),
@@ -28723,7 +29037,7 @@ function DataTable({
           table.getState().pagination.pageIndex + 1,
           table.getPageCount(),
           5
-        ).map((pageNum, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        ).map((pageNum, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "button",
           {
             disabled: pageNum === "...",
@@ -28733,7 +29047,7 @@ function DataTable({
           },
           index
         )),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "button",
           {
             onClick: () => table.nextPage(),
@@ -28748,7 +29062,7 @@ function DataTable({
 }
 
 // src/components/DataDisplay/Table/Table.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var Table4 = ({
   columns,
   data,
@@ -28771,7 +29085,7 @@ var Table4 = ({
   const rawColumns = Array.isArray(columns) ? columns : [];
   const rawData = Array.isArray(data) ? data : [];
   const isControlled = typeof page === "number";
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: `${className || ""} space-y-3`, style, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: `${className || ""} space-y-3`, style, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     DataTable,
     {
       ...props,
@@ -28790,16 +29104,19 @@ var Table4 = ({
       onSortChange: (col, dir) => onSortChange?.({ sort_by: col, sort_order: dir }),
       onFilterChange: (filters) => onFilterChange?.({ columnKey: filters.columnKey, columnTerm: filters.columnTerm }),
       onGlobalSearch: (term) => onGlobalSearch?.({ searchTerm: term }),
-      globalSearch
+      globalSearch,
+      onCellClick: (cell) => {
+        props.onCellClick?.({ id: cell.id, column: cell });
+      }
     }
   ) });
 };
 var Table_default = Table4;
 
 // src/components/ui/pagination.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function Pagination({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "nav",
     {
       role: "navigation",
@@ -28814,7 +29131,7 @@ function PaginationContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "ul",
     {
       "data-slot": "pagination-content",
@@ -28824,7 +29141,7 @@ function PaginationContent({
   );
 }
 function PaginationItem({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("li", { "data-slot": "pagination-item", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("li", { "data-slot": "pagination-item", ...props });
 }
 function PaginationLink({
   className,
@@ -28832,7 +29149,7 @@ function PaginationLink({
   size = "icon",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "a",
     {
       "aria-current": isActive ? "page" : void 0,
@@ -28853,7 +29170,7 @@ function PaginationPrevious({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
     PaginationLink,
     {
       "aria-label": "Go to previous page",
@@ -28861,8 +29178,8 @@ function PaginationPrevious({
       className: cn("gap-1 px-2.5 sm:pl-2.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ChevronLeft, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "hidden sm:block", children: "Previous" })
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ChevronLeft, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "hidden sm:block", children: "Previous" })
       ]
     }
   );
@@ -28871,7 +29188,7 @@ function PaginationNext({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
     PaginationLink,
     {
       "aria-label": "Go to next page",
@@ -28879,8 +29196,8 @@ function PaginationNext({
       className: cn("gap-1 px-2.5 sm:pr-2.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "hidden sm:block", children: "Next" }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ChevronRight, {})
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "hidden sm:block", children: "Next" }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ChevronRight, {})
       ]
     }
   );
@@ -28889,7 +29206,7 @@ function PaginationEllipsis({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
     "span",
     {
       "aria-hidden": true,
@@ -28897,15 +29214,15 @@ function PaginationEllipsis({
       className: cn("flex size-9 items-center justify-center", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Ellipsis, { className: "size-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "sr-only", children: "More pages" })
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Ellipsis, { className: "size-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "sr-only", children: "More pages" })
       ]
     }
   );
 }
 
 // src/components/DataDisplay/Pagination/Pagination.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var CustomPagination = ({
   totalPages,
   currentPage,
@@ -28951,10 +29268,10 @@ var CustomPagination = ({
     }
   };
   const pageNumbers = getPageNumbers();
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-row gap-1 w-full items-center justify-between", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "text-sm text-muted-foreground whitespace-nowrap", children: "Items per page:" }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-row gap-1 w-full items-center justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "text-sm text-muted-foreground whitespace-nowrap", children: "Items per page:" }),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
         Select,
         {
           defaultValue: String(perPage),
@@ -28962,26 +29279,26 @@ var CustomPagination = ({
             onPageChange({ page: 1, itemsPerPage: Number(value) });
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SelectTrigger, { className: "w-[100px]", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SelectValue, { placeholder: "Select" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(SelectContent, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SelectItem, { value: "5", children: "5" }),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SelectItem, { value: "10", children: "10" }),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SelectItem, { value: "20", children: "20" }),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SelectItem, { value: "50", children: "50" })
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SelectTrigger, { className: "w-[100px]", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SelectValue, { placeholder: "Select" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(SelectContent, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SelectItem, { value: "5", children: "5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SelectItem, { value: "10", children: "10" }),
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SelectItem, { value: "20", children: "20" }),
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SelectItem, { value: "50", children: "50" })
             ] })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Pagination, { className: "justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(PaginationContent, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Pagination, { className: "justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(PaginationContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         PaginationPrevious,
         {
           onClick: () => handlePageChange(currentPage - 1),
           className: currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"
         }
       ) }),
-      pageNumbers.map((pageNumber, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PaginationItem, { children: pageNumber === "..." ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PaginationEllipsis, {}) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      pageNumbers.map((pageNumber, index) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PaginationItem, { children: pageNumber === "..." ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PaginationEllipsis, {}) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         PaginationLink,
         {
           onClick: () => handlePageChange(pageNumber),
@@ -28990,7 +29307,7 @@ var CustomPagination = ({
           children: pageNumber
         }
       ) }, index)),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         PaginationNext,
         {
           onClick: () => handlePageChange(currentPage + 1),
@@ -29005,124 +29322,8 @@ var Pagination_default = CustomPagination;
 // src/components/Navigation/Tabs/Tabs.tsx
 var import_link5 = __toESM(require("next/link"));
 var import_navigation3 = require("next/navigation");
-
-// src/components/ui/dialog.tsx
-var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
-var import_jsx_runtime51 = require("react/jsx-runtime");
-function Dialog({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
-}
-function DialogPortal({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
-}
-function DialogOverlay({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-    DialogPrimitive.Overlay,
-    {
-      "data-slot": "dialog-overlay",
-      className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[60] bg-black/50",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DialogOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
-      DialogPrimitive.Content,
-      {
-        "data-slot": "dialog-content",
-        className: cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[70] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
-            DialogPrimitive.Close,
-            {
-              "data-slot": "dialog-close",
-              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(X, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "sr-only", children: "Close" })
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-    "div",
-    {
-      "data-slot": "dialog-header",
-      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
-      ...props
-    }
-  );
-}
-function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-    "div",
-    {
-      "data-slot": "dialog-footer",
-      className: cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogTitle({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-    DialogPrimitive.Title,
-    {
-      "data-slot": "dialog-title",
-      className: cn("text-lg leading-none font-semibold", className),
-      ...props
-    }
-  );
-}
-function DialogDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-    DialogPrimitive.Description,
-    {
-      "data-slot": "dialog-description",
-      className: cn("text-muted-foreground text-sm", className),
-      ...props
-    }
-  );
-}
-
-// src/components/Navigation/Tabs/Tabs.tsx
 var import_react26 = require("react");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder = true }) => {
   const rawTabs = Array.isArray(tabs) ? tabs : [];
   const baseClasses = "text-[12px] text-foreground p-2 text-center rounded-md transition-colors";
@@ -29154,23 +29355,23 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
   const renderDesktopTab = (tab, index) => {
     const finalClasses = [baseClasses, isActive(tab.url) ? activeClasses : hoverClasses, tab.className || ""].join(" ");
     if (Array.isArray(tab.children) && tab.children.length > 0 && tab.isDropDown) {
-      return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(DropdownMenu, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(DropdownMenuTrigger, { className: `${finalClasses} inline-flex items-center gap-1`, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(DropdownMenu, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(DropdownMenuTrigger, { className: `${finalClasses} inline-flex items-center gap-1`, children: [
           tab.header,
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ChevronDown, { className: "h-4 w-4 opacity-80" })
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ChevronDown, { className: "h-4 w-4 opacity-80" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           DropdownMenuContent,
           {
             align: "start",
             sideOffset: 6,
             className: "z-50 min-w-[160px] rounded-md border border-gray-200 bg-white p-1 shadow-lg",
-            children: tab.children.map((item) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            children: tab.children.map((item) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
               DropdownMenuItem,
               {
                 asChild: true,
                 className: "cursor-pointer rounded-sm px-3 py-2 text-[12px] text-gray-800 hover:bg-gray-100 focus:bg-gray-100",
-                children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_link5.default, { href: item.url || "#", onClick: (e) => handleBuilderExit(e, item.url || "#"), children: item.header })
+                children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_link5.default, { href: item.url || "#", onClick: (e) => handleBuilderExit(e, item.url || "#"), children: item.header })
               },
               item.id
             ))
@@ -29178,7 +29379,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
         )
       ] }, index);
     }
-    return tab.url ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    return tab.url ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       import_link5.default,
       {
         href: tab.url,
@@ -29188,14 +29389,14 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
         children: tab.header
       },
       index
-    ) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: finalClasses, style: tab.style, role: "button", tabIndex: 0, children: tab.header }, index);
+    ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: finalClasses, style: tab.style, role: "button", tabIndex: 0, children: tab.header }, index);
   };
-  const renderMobileMenu = () => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(DropdownMenu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(DropdownMenuTrigger, { className: "flex items-center gap-2 px-3 py-2 rounded-md bg-white/10 text-white text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Menu, { className: "h-4 w-4" }),
+  const renderMobileMenu = () => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(DropdownMenuTrigger, { className: "flex items-center gap-2 px-3 py-2 rounded-md bg-white/10 text-white text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Menu, { className: "h-4 w-4" }),
       "Menu"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       DropdownMenuContent,
       {
         align: "start",
@@ -29204,25 +29405,25 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
         children: rawTabs.map((tab, i) => {
           const hasChildren = Array.isArray(tab.children) && tab.children.length > 0 && tab.isDropDown;
           if (hasChildren) {
-            return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(DropdownMenuSub, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DropdownMenuSubTrigger, { className: "flex items-center justify-between cursor-pointer rounded-sm px-3 py-2 text-[13px] text-foreground hover:text-foreground", children: tab.header }),
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DropdownMenuSubContent, { className: "bg-white border shadow-lg rounded-md p-1", children: tab.children.map((item) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(DropdownMenuSub, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(DropdownMenuSubTrigger, { className: "flex items-center justify-between cursor-pointer rounded-sm px-3 py-2 text-[13px] text-foreground hover:text-foreground", children: tab.header }),
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(DropdownMenuSubContent, { className: "bg-white border shadow-lg rounded-md p-1", children: tab.children.map((item) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                 DropdownMenuItem,
                 {
                   asChild: true,
                   className: "cursor-pointer rounded-sm px-3 py-2 text-[12px] text-gray-800 hover:bg-gray-100",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_link5.default, { href: item.url || "#", onClick: (e) => handleBuilderExit(e, item.url || "#"), children: item.header })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_link5.default, { href: item.url || "#", onClick: (e) => handleBuilderExit(e, item.url || "#"), children: item.header })
                 },
                 item.id
               )) })
             ] }, i);
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             DropdownMenuItem,
             {
               asChild: true,
               className: "cursor-pointer rounded-sm px-3 py-2 text-[13px] text-gray-800 hover:bg-gray-100",
-              children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_link5.default, { href: tab.url || "#", onClick: (e) => handleBuilderExit(e, tab.url || "#"), children: tab.header })
+              children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_link5.default, { href: tab.url || "#", onClick: (e) => handleBuilderExit(e, tab.url || "#"), children: tab.header })
             },
             i
           );
@@ -29232,19 +29433,19 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
   ] });
   const forceMobile = canvasMode ? canvasMode === "mobile" || canvasMode === "tablet" : void 0;
   const forceDesktop = canvasMode ? canvasMode === "desktop" : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className, style, children: [
-      forceDesktop !== void 0 ? forceDesktop && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "hidden md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "hidden md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }),
-      forceMobile !== void 0 ? forceMobile && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { children: renderMobileMenu() }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex md:hidden", children: renderMobileMenu() })
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className, style, children: [
+      forceDesktop !== void 0 ? forceDesktop && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "hidden md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "hidden md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }),
+      forceMobile !== void 0 ? forceMobile && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { children: renderMobileMenu() }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "flex md:hidden", children: renderMobileMenu() })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Dialog, { open: showExitDialog, onOpenChange: setShowExitDialog, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(DialogContent, { className: "bg-[#fff]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(DialogHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DialogTitle, { children: "Exit Builder?" }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DialogDescription, { children: "You are about to leave the builder. Any unsaved changes may be lost." })
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Dialog, { open: showExitDialog, onOpenChange: setShowExitDialog, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(DialogContent, { className: "bg-[#fff]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(DialogHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(DialogTitle, { children: "Exit Builder?" }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(DialogDescription, { children: "You are about to leave the builder. Any unsaved changes may be lost." })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(DialogFooter, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Button, { className: "cursor-pointer bg-[#12715b] text-[#fff]", variant: "outline", onClick: () => setShowExitDialog(false), children: "Cancel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Button, { className: "cursor-pointer border-[#12715b] border", onClick: confirmExit, children: "Yes, Exit" })
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(DialogFooter, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Button, { className: "cursor-pointer bg-[#12715b] text-[#fff]", variant: "outline", onClick: () => setShowExitDialog(false), children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Button, { className: "cursor-pointer border-[#12715b] border", onClick: confirmExit, children: "Yes, Exit" })
       ] })
     ] }) })
   ] });
@@ -29253,12 +29454,12 @@ var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
 var import_react27 = __toESM(require("react"));
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStageChange }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center justify-between bg-red p-2 rounded-lg border border-gray-200 w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react27.default.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center justify-between bg-red p-2 rounded-lg border border-gray-200 w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react27.default.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         "button",
         {
           className: `min-w-[120px] px-4 py-2 rounded-full text-sm font-medium transition-colors duration-200 whitespace-nowrap ${stage.isActive ? "bg-[#034486] text-white shadow-md" : "bg-white text-gray-700 hover:bg-gray-100 border border-gray-200"}`,
@@ -29270,9 +29471,9 @@ var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStag
           children: stage.header
         }
       ),
-      index < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex-shrink-0 w-3 h-px bg-gray-300" })
+      index < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex-shrink-0 w-3 h-px bg-gray-300" })
     ] }, stage.id)) }),
-    isShowBtn && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    isShowBtn && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       "button",
       {
         className: "bg-[#034486] text-white px-6 py-2 rounded-lg text-sm font-medium transition-colors duration-200 shadow-sm",
@@ -29290,26 +29491,26 @@ var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStag
 var Stages_default = StagesComponent;
 
 // src/components/Navigation/Spacer/Spacer.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var Spacer = ({ className, style }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: `${className}`, style });
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: `${className}`, style });
 };
 var Spacer_default = Spacer;
 
 // src/components/Navigation/Profile/Profile.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 
 // src/components/Navigation/Notification/Notification.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 
 // src/components/Navigation/Logo/Logo.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 
 // src/components/ui/avatar.tsx
-var React9 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
-var import_jsx_runtime58 = require("react/jsx-runtime");
-var Avatar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var Avatar = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
   AvatarPrimitive.Root,
   {
     ref,
@@ -29321,7 +29522,7 @@ var Avatar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+var AvatarImage = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
   AvatarPrimitive.Image,
   {
     ref,
@@ -29330,7 +29531,7 @@ var AvatarImage = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+var AvatarFallback = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -29349,7 +29550,7 @@ var import_image3 = __toESM(require("next/image"));
 var import_navigation4 = require("next/navigation");
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 var import_react28 = require("react");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function Navbar({
   style,
   badgeType,
@@ -29393,23 +29594,23 @@ function Navbar({
     }
     return list || [];
   }, [source, navList]);
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       "nav",
       {
         className: "w-full border-b border-b-white dark:border-b-gray-800 dark:bg-gray-800 bg-white shadow-sm",
         style,
-        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "mx-auto flex max-w-[90%] items-center justify-between px-4 py-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "mx-auto flex max-w-[90%] items-center justify-between px-4 py-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             import_link6.default,
             {
               href: "/",
               onClick: (e) => handleBuilderExit(e, "/"),
               className: "flex items-center space-x-2",
-              children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_image3.default, { src: imageUrl, alt: altText, width: 200, height: 200 }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "font-semibold text-blue-700", children: "Logo" })
+              children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_image3.default, { src: imageUrl, alt: altText, width: 200, height: 200 }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "font-semibold text-blue-700", children: "Logo" })
             }
           ),
-          !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex items-center space-x-6 sm:hidden md:flex", children: formatedMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex items-center space-x-6 sm:hidden md:flex", children: formatedMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             import_link6.default,
             {
               href: item.url || "#",
@@ -29419,39 +29620,39 @@ function Navbar({
             },
             item.id
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center space-x-3", children: [
-            !isMobileView ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex-1 px-6", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dark:text-white text-gray-400" }),
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Input, { placeholder: "Search", className: "pl-9 text-gray-400" })
-            ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { variant: "ghost", size: "icon", className: "border border-gray-400", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Search, { className: "h-5 w-5 text-gray-400" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "relative bg-[#E9E9E9] dark:bg-gray-700 rounded-md", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Bell, { className: "h-5 w-5 text-[#1C1B1F] dark:text-gray-400" }) }),
-              badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] text-white leading-8", children: badgeCount }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "absolute -top-1 -right-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500" })
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex items-center space-x-3", children: [
+            !isMobileView ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex-1 px-6", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dark:text-white text-gray-400" }),
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Input, { placeholder: "Search", className: "pl-9 text-gray-400" })
+            ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Button, { variant: "ghost", size: "icon", className: "border border-gray-400", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Search, { className: "h-5 w-5 text-gray-400" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "relative bg-[#E9E9E9] dark:bg-gray-700 rounded-md", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Bell, { className: "h-5 w-5 text-[#1C1B1F] dark:text-gray-400" }) }),
+              badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] text-white leading-8", children: badgeCount }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "absolute -top-1 -right-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DropdownMenu, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center space-x-2", children: [
-                !isMobileView && showName && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h4", { className: "text-[#000000] dark:text-gray-300 text-[13px] font-[500] mb-0", children: userName }),
-                !isMobileView ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Avatar, { className: "cursor-pointer h-8 w-8 text-gray-900", children: profileType === "avatar" ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(DropdownMenu, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex items-center space-x-2", children: [
+                !isMobileView && showName && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("h4", { className: "text-[#000000] dark:text-gray-300 text-[13px] font-[500] mb-0", children: userName }),
+                !isMobileView ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Avatar, { className: "cursor-pointer h-8 w-8 text-gray-900", children: profileType === "avatar" ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                     AvatarImage,
                     {
                       src: "/images/appbuilder/toolset/profile.svg",
                       alt: "Profile"
                     }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "w-8 h-8 bg-[#12715b] rounded-full text-[#fff] text-center text-[11px] flex items-center justify-center", children: userName && getInitials(userName) }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "w-8 h-8 bg-[#12715b] rounded-full text-[#fff] text-center text-[11px] flex items-center justify-center", children: userName && getInitials(userName) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                     Button,
                     {
                       variant: "ghost",
                       size: "icon",
                       className: "text-gray-900 md:hidden dark:invert",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Menu, { className: "h-6 w-6" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Menu, { className: "h-6 w-6" })
                     }
                   )
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { variant: "ghost", size: "icon", className: "text-gray-900 dark:invert", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Menu, { className: "h-6 w-6" }) })
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Button, { variant: "ghost", size: "icon", className: "text-gray-900 dark:invert", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Menu, { className: "h-6 w-6" }) })
               ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-gray-800", children: [
-                profileMenu && profileMenu.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_jsx_runtime59.Fragment, { children: profileMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-gray-800", children: [
+                profileMenu && profileMenu.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_jsx_runtime61.Fragment, { children: profileMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                   import_link6.default,
                   {
                     href: item.url || "#",
@@ -29459,9 +29660,9 @@ function Navbar({
                     children: item.header
                   }
                 ) }, item.id)) }),
-                /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "md:hidden", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_dropdown_menu.DropdownMenuSeparator, {}),
-                  formatedMenu && formatedMenu.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_jsx_runtime59.Fragment, { children: formatedMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "md:hidden", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_dropdown_menu.DropdownMenuSeparator, {}),
+                  formatedMenu && formatedMenu.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_jsx_runtime61.Fragment, { children: formatedMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                     import_link6.default,
                     {
                       href: item.url || "#",
@@ -29476,14 +29677,14 @@ function Navbar({
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Dialog, { open: showExitDialog, onOpenChange: setShowExitDialog, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DialogContent, { className: "bg-[#fff]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DialogHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DialogTitle, { children: "Exit Builder?" }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DialogDescription, { children: "You are about to leave the builder. Any unsaved changes may be lost." })
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Dialog, { open: showExitDialog, onOpenChange: setShowExitDialog, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(DialogContent, { className: "bg-[#fff]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(DialogHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DialogTitle, { children: "Exit Builder?" }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DialogDescription, { children: "You are about to leave the builder. Any unsaved changes may be lost." })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DialogFooter, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { className: "cursor-pointer bg-[#12715b] text-[#fff]", variant: "outline", onClick: () => setShowExitDialog(false), children: "Cancel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { className: "cursor-pointer border-[#12715b] border", onClick: confirmExit, children: "Yes, Exit" })
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(DialogFooter, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Button, { className: "cursor-pointer bg-[#12715b] text-[#fff]", variant: "outline", onClick: () => setShowExitDialog(false), children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Button, { className: "cursor-pointer border-[#12715b] border", onClick: confirmExit, children: "Yes, Exit" })
       ] })
     ] }) })
   ] });
@@ -29492,35 +29693,35 @@ function Navbar({
 // src/components/Chart/BarChart.tsx
 var import_react29 = __toESM(require("react"));
 var import_recharts = require("recharts");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var ChartComponent = ({ className, style, loading, ...props }) => {
   const data = Array.isArray(props.data) ? props.data : [];
   const chartType = props.chartType || "bar";
   const legendsPosition = props.legendsPosition === "middle" || props.legendsPosition === "bottom" ? props.legendsPosition : "top";
   if (loading || data.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       "div",
       {
         className: `flex items-center justify-center w-full h-[300px] md:h-[400px] bg-gray-50 animate-pulse rounded-lg ${className}`,
         style,
-        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
+        children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: `${className} h-[400px]`, style, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_recharts.BarChart, { data, title: "Leads", desc: "content", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts.XAxis, { dataKey: "name" }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts.YAxis, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts.Tooltip, { formatter: (value) => `${value}k` }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts.Legend, { verticalAlign: legendsPosition, align: "center" }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: `${className} h-[400px]`, style, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_recharts.BarChart, { data, title: "Leads", desc: "content", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_recharts.XAxis, { dataKey: "name" }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_recharts.YAxis, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_recharts.Tooltip, { formatter: (value) => `${value}k` }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_recharts.Legend, { verticalAlign: legendsPosition, align: "center" }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       import_recharts.Bar,
       {
         dataKey: "value",
         fill: "#00695C",
         radius: [6, 6, 0, 0],
         isAnimationActive: false,
-        children: data.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        children: data.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
           "rect",
           {
             fill: entry.color || "#00695C"
@@ -29529,16 +29730,16 @@ var ChartComponent = ({ className, style, loading, ...props }) => {
         ))
       }
     )
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_recharts.AreaChart, { data, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("stop", { offset: "95%", stopColor: "#00695C", stopOpacity: 0 })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_recharts.AreaChart, { data, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("stop", { offset: "95%", stopColor: "#00695C", stopOpacity: 0 })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts.XAxis, { dataKey: "name" }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts.YAxis, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts.Tooltip, { formatter: (value) => `${value}k` }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_recharts.XAxis, { dataKey: "name" }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_recharts.YAxis, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_recharts.Tooltip, { formatter: (value) => `${value}k` }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       import_recharts.Area,
       {
         type: "monotone",
@@ -29556,7 +29757,7 @@ var BarChart_default = import_react29.default.memo(ChartComponent);
 // src/components/Chart/PieChart.tsx
 var import_react30 = __toESM(require("react"));
 var import_recharts2 = require("recharts");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var getRandomColor = () => {
   const palette = [
     "#2563eb",
@@ -29589,19 +29790,19 @@ var DonutChart = ({ className, style, loading, ...props }) => {
   }, []);
   const renderLegends = (0, import_react30.useMemo)(() => {
     if (!showLegends) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_jsx_runtime61.Fragment, { children: data.map((d) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_jsx_runtime63.Fragment, { children: data.map((d) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
       "div",
       {
         className: "flex items-center space-x-2 rounded-md border border-gray-200 px-3 py-2 w-[48%] md:w-auto",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
             "span",
             {
               className: "inline-block w-[16px] h-[16px] rounded",
               style: { backgroundColor: d.color }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-[#000000] text-[12px] md:text-[13px] font-[500]", children: d.name })
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "text-[#000000] text-[12px] md:text-[13px] font-[500]", children: d.name })
         ]
       },
       d.name
@@ -29609,24 +29810,24 @@ var DonutChart = ({ className, style, loading, ...props }) => {
   }, [data, showLegends]);
   if (!mounted) return null;
   if (loading || data.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       "div",
       {
         className: `flex items-center justify-center w-full h-[300px] md:h-[400px] bg-gray-50 animate-pulse rounded-lg ${className}`,
         style,
-        children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
+        children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
     "div",
     {
       className: `relative flex flex-col items-center ${className}`,
       style,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "relative w-full md:w-[70%] h-[300px] md:h-[400px] flex items-center justify-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_recharts2.ResponsiveContainer, { width: "99%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_recharts2.PieChart, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "relative w-full md:w-[70%] h-[300px] md:h-[400px] flex items-center justify-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_recharts2.ResponsiveContainer, { width: "99%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_recharts2.PieChart, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
               import_recharts2.Pie,
               {
                 data,
@@ -29638,8 +29839,8 @@ var DonutChart = ({ className, style, loading, ...props }) => {
                 labelLine: false,
                 isAnimationActive: false,
                 children: [
-                  data.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_recharts2.Cell, { fill: entry.color }, `cell-${index}`)),
-                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+                  data.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_recharts2.Cell, { fill: entry.color }, `cell-${index}`)),
+                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
                     import_recharts2.LabelList,
                     {
                       dataKey: "value",
@@ -29652,14 +29853,14 @@ var DonutChart = ({ className, style, loading, ...props }) => {
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
               import_recharts2.Tooltip,
               {
                 formatter: (value, name) => [`${value}k`, name]
               }
             )
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
             "div",
             {
               className: `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 ${forceMobile ? "text-2xl" : "text-4xl"} font-bold text-[#000]`,
@@ -29670,7 +29871,7 @@ var DonutChart = ({ className, style, loading, ...props }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex flex-wrap justify-center gap-2 mt-6 w-full md:w-auto", children: renderLegends })
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "flex flex-wrap justify-center gap-2 mt-6 w-full md:w-auto", children: renderLegends })
       ]
     }
   );
@@ -29678,10 +29879,10 @@ var DonutChart = ({ className, style, loading, ...props }) => {
 var PieChart_default = import_react30.default.memo(DonutChart);
 
 // src/components/Blocks/EmailComposer.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc, setShowBcc, cc, setCc, bcc, setBcc, subject, setSubject, body, setBody }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "border rounded-md shadow bg-[#fff] p-4 mx-auto z-[50] relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "border rounded-md shadow bg-[#fff] p-4 mx-auto z-[50] relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       "input",
       {
         type: "email",
@@ -29690,8 +29891,8 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         required: true
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         "input",
         {
           type: "email",
@@ -29702,7 +29903,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
           required: true
         }
       ),
-      !showCc && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      !showCc && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         "button",
         {
           onClick: () => setShowCc?.(true),
@@ -29710,7 +29911,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
           children: "Cc"
         }
       ),
-      !showBcc && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      !showBcc && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         "button",
         {
           onClick: () => setShowBcc?.(true),
@@ -29719,7 +29920,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         }
       )
     ] }) }),
-    showCc && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    showCc && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       "input",
       {
         type: "text",
@@ -29729,7 +29930,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         className: "w-full flex-1 border-2 rounded-md h-[40px] px-3 focus:outline-none border-[#E9E9E9] text-[#383838]"
       }
     ) }),
-    showBcc && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    showBcc && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       "input",
       {
         type: "text",
@@ -29739,7 +29940,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         className: "w-full flex-1 border-2 rounded-md h-[40px] px-3 focus:outline-none border-[#E9E9E9] text-[#383838]"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       "input",
       {
         type: "text",
@@ -29749,11 +29950,11 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         className: "w-full flex-1 border-2 rounded-md h-[40px] px-3 focus:outline-none border-[#E9E9E9] text-[#383838]"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(MyEditor, { value: body, onChange: setBody }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { className: "px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100", children: "Discard" }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { className: "px-4 py-2 rounded-md border text-[#12715B] border-[#12715B]", children: "Reset" }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { className: "px-4 py-2 rounded-md bg-[#12715B] text-white", children: "Send" })
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(MyEditor, { value: body, onChange: setBody }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("button", { className: "px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100", children: "Discard" }),
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("button", { className: "px-4 py-2 rounded-md border text-[#12715B] border-[#12715B]", children: "Reset" }),
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("button", { className: "px-4 py-2 rounded-md bg-[#12715B] text-white", children: "Send" })
     ] })
   ] }) });
 }
@@ -29798,10 +29999,10 @@ function showSonnerToast({
 // src/components/ui/sonner.tsx
 var import_next_themes = require("next-themes");
 var import_sonner2 = require("sonner");
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var Toaster = ({ ...props }) => {
   const { theme = "system" } = (0, import_next_themes.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     import_sonner2.Toaster,
     {
       theme,
@@ -29837,6 +30038,7 @@ var Toaster = ({ ...props }) => {
   Image,
   Modal,
   MultiCheckbox,
+  MultiSelect,
   Navbar,
   NumberInput,
   Pagination,