@algorithm-shift/design-system 1.2.954 → 1.2.956

package/dist/index.mjs

@@ -27649,7 +27649,7 @@ function SelectScrollDownButton({
 }
 
 // src/components/Inputs/Dropdown/LazyDropdown.tsx
-import { useState as useState5, useRef as useRef3, useEffect as useEffect14 } from "react";
+import { useState as useState5, useRef as useRef3, useEffect as useEffect14, useMemo as useMemo3 } from "react";
 
 // src/hooks/useLazyDropdown.ts
 import { useState as useState4, useEffect as useEffect13, useRef as useRef2, useCallback as useCallback2 } from "react";
@@ -27664,6 +27664,14 @@ function useLazyDropdown(config) {
   const allDataRef = useRef2([]);
   const configRef = useRef2(config);
   const PAGE_SIZE = config.pageSize || 10;
+  const uniqueOptions = (items) => {
+    const seen = /* @__PURE__ */ new Set();
+    return items.filter((item) => {
+      if (seen.has(item.value)) return false;
+      seen.add(item.value);
+      return true;
+    });
+  };
   useEffect13(() => {
     configRef.current = config;
   }, [config]);
@@ -27716,7 +27724,10 @@ function useLazyDropdown(config) {
         pageOptions = transformToOptions(filtered.slice(start, end));
         setHasMore(end < filtered.length);
       }
-      setOptions((prev) => pageNum === 1 ? pageOptions : [...prev, ...pageOptions]);
+      setOptions((prev) => {
+        const merged = pageNum === 1 ? pageOptions : [...prev, ...pageOptions];
+        return uniqueOptions(merged);
+      });
       setPage(pageNum);
     } catch (err) {
       console.error("\u274C useLazyDropdown loadPage error:", err);
@@ -27736,7 +27747,7 @@ function useLazyDropdown(config) {
       });
       if (res.data?.success && Array.isArray(res.data.data) && res.data.data.length > 0) {
         const fetched = transformToOptions(res.data.data);
-        setOptions((prev) => [...fetched, ...prev]);
+        setOptions((prev) => uniqueOptions([...fetched, ...prev]));
       }
     } catch (err) {
       console.warn("\u26A0\uFE0F Failed to fetch default value for dropdown:", err);
@@ -27831,7 +27842,7 @@ function LazySelectDropdown({
     value,
     axiosInstance
   });
-  const selectedOption = lazyOptions.find((opt) => opt.value === value);
+  const selectedOption = useMemo3(() => lazyOptions.find((opt) => opt.value === value), [lazyOptions, value]);
   useEffect14(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
@@ -27866,7 +27877,16 @@ function LazySelectDropdown({
   };
   const handleFocus = () => {
     if (!disabled) setIsOpen(true);
-    loadPage(1, "");
+    if (lazyOptions.length === 0)
+      loadPage(1, "");
+  };
+  const handleRemoveSelection = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onChange?.("", id || "");
+    setSearchTerm("");
+    reset();
+    search("");
   };
   return /* @__PURE__ */ jsxs18("div", { ref: dropdownRef, className: "relative w-full", children: [
     /* @__PURE__ */ jsx36(
@@ -27876,7 +27896,7 @@ function LazySelectDropdown({
         id,
         name: id,
         className: cn(
-          "w-full px-3 py-2 border border-[#BDBDBD] rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+          "w-full px-3 py-2 border border-[#BDBDBD] rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 pr-7",
           disabled ? "bg-gray-100 cursor-not-allowed" : "bg-white cursor-pointer",
           className,
           errorMessage ? "border-red-500" : ""
@@ -27889,6 +27909,16 @@ function LazySelectDropdown({
         disabled
       }
     ),
+    selectedOption && !disabled && !readOnly && /* @__PURE__ */ jsx36(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Clear selection",
+        onClick: handleRemoveSelection,
+        className: "absolute right-2 top-1/2 -translate-y-1/2 h-5 w-5 flex items-center justify-center rounded hover:bg-gray-200 text-gray-500 focus:outline-none",
+        children: /* @__PURE__ */ jsx36(SquareX, { className: "h-5 w-5 pointer-events-none" })
+      }
+    ),
     errorMessage && /* @__PURE__ */ jsx36("p", { className: "mt-1 text-xs text-red-500", children: errorMessage }),
     isOpen && !disabled && /* @__PURE__ */ jsx36(Portal_default, { children: /* @__PURE__ */ jsx36(
       "div",
@@ -28611,330 +28641,217 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
 var TextInputGroup_default = TextInputGroup;
 
 // src/components/Inputs/Multiselect/MultiSelect.tsx
-import * as React8 from "react";
-
-// src/components/ui/command.tsx
-import { Command as CommandPrimitive } from "cmdk";
-
-// src/components/ui/dialog.tsx
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
-function Dialog({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx48(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
-}
-function DialogPortal({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx48(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
-}
-function DialogOverlay({
+import { useState as useState6, useRef as useRef5, useEffect as useEffect24, useMemo as useMemo4 } from "react";
+import { Fragment as Fragment19, jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
+function LazyMultiSelectDropdown({
+  options = [],
+  value = [],
+  onChange,
+  placeholder,
   className,
-  ...props
+  id,
+  disabled,
+  readOnly,
+  source,
+  apiUrl,
+  pageSize,
+  dataKey = "id",
+  dataLabel = "name",
+  errorMessage,
+  axiosInstance,
+  outputFormat = "array"
 }) {
-  return /* @__PURE__ */ jsx48(
-    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
+  const [isOpen, setIsOpen] = useState6(false);
+  const [searchTerm, setSearchTerm] = useState6("");
+  const dropdownRef = useRef5(null);
+  const observerTarget = useRef5(null);
+  const {
+    options: lazyOptions,
+    loading,
+    hasMore,
+    loadMore,
+    search,
+    reset,
+    loadPage
+  } = useLazyDropdown({
+    enabled: true,
+    dataSource: source || "",
+    apiUrl,
+    pageSize: pageSize || 10,
+    dataKey,
+    dataLabel,
+    initialData: options || [],
+    value,
+    axiosInstance
+  });
+  const ensureUnique = (arr) => {
+    return Array.from(new Set(arr));
+  };
+  const convertOutput = (values) => {
+    const unique = ensureUnique(values);
+    switch (outputFormat) {
+      case "comma":
+        return unique.join(",");
+      case "semicolon":
+        return unique.join(";");
+      default:
+        return unique;
     }
-  );
-}
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs27(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ jsx48(DialogOverlay, {}),
+  };
+  const normalizeInput = (value2) => {
+    let arr = [];
+    if (Array.isArray(value2)) {
+      arr = value2;
+    } else if (typeof value2 === "string") {
+      if (!value2.trim()) return [];
+      if (value2.includes(";")) arr = value2.split(";").map((v) => v.trim());
+      else if (value2.includes(",")) arr = value2.split(",").map((v) => v.trim());
+      else arr = [value2.trim()];
+    }
+    return ensureUnique(arr);
+  };
+  const normalizedValue = normalizeInput(value);
+  const selectedOptions = useMemo4(() => {
+    return lazyOptions.filter((opt) => normalizedValue.includes(opt.value));
+  }, [lazyOptions, normalizedValue]);
+  useEffect24(() => {
+    const handleClick = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, []);
+  useEffect24(() => {
+    if (!isOpen || !hasMore || loading) return;
+    const obs = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) loadMore();
+      },
+      { threshold: 0.1 }
+    );
+    if (observerTarget.current) obs.observe(observerTarget.current);
+    return () => obs.disconnect();
+  }, [isOpen, hasMore, loading, loadMore]);
+  const handleSearch = (e) => {
+    const term = e.target.value;
+    setSearchTerm(term);
+    search(term);
+  };
+  const toggleSelect = (val) => {
+    let updated;
+    if (normalizedValue.includes(val)) {
+      updated = normalizedValue.filter((v) => v !== val);
+    } else {
+      updated = ensureUnique([...normalizedValue, val]);
+    }
+    onChange(convertOutput(updated), id);
+  };
+  const removeTag = (val) => {
+    const updated = normalizedValue.filter((v) => v !== val);
+    onChange(convertOutput(updated), id);
+  };
+  const handleFocus = () => {
+    if (!disabled) setIsOpen(true);
+    if (lazyOptions.length === 0) loadPage(1, "");
+  };
+  return /* @__PURE__ */ jsxs27("div", { ref: dropdownRef, className: "relative w-full", children: [
     /* @__PURE__ */ jsxs27(
-      DialogPrimitive.Content,
+      "div",
       {
-        "data-slot": "dialog-content",
+        onClick: handleFocus,
         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",
+          "min-h-10 w-full flex items-center flex-wrap gap-1 px-2 py-1 border border-[#BDBDBD] rounded-md bg-white cursor-pointer",
+          disabled && "bg-gray-100 cursor-not-allowed",
+          errorMessage && "border-red-500",
           className
         ),
-        ...props,
         children: [
-          children,
-          showCloseButton && /* @__PURE__ */ jsxs27(
-            DialogPrimitive.Close,
+          selectedOptions.map((opt) => /* @__PURE__ */ jsxs27(
+            "span",
             {
-              "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",
+              className: "bg-blue-100 text-blue-700 px-2 py-1 rounded-md text-xs flex items-center gap-1",
               children: [
-                /* @__PURE__ */ jsx48(X, {}),
-                /* @__PURE__ */ jsx48("span", { className: "sr-only", children: "Close" })
+                opt.label,
+                !disabled && !readOnly && /* @__PURE__ */ jsx48(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      removeTag(opt.value);
+                    },
+                    className: "hover:text-red-600",
+                    children: /* @__PURE__ */ jsx48(X, { size: 12 })
+                  }
+                )
               ]
+            },
+            opt.value
+          )),
+          /* @__PURE__ */ jsx48(
+            "input",
+            {
+              type: "text",
+              placeholder: selectedOptions.length ? "" : placeholder,
+              className: "flex-1 min-w-[60px] p-1 outline-none",
+              value: isOpen ? searchTerm : "",
+              onChange: handleSearch,
+              readOnly,
+              disabled
             }
           )
         ]
       }
-    )
-  ] });
-}
-function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx48(
-    "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__ */ jsx48(
-    "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__ */ jsx48(
-    DialogPrimitive.Title,
-    {
-      "data-slot": "dialog-title",
-      className: cn("text-lg leading-none font-semibold", className),
-      ...props
-    }
-  );
-}
-function DialogDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx48(
-    DialogPrimitive.Description,
-    {
-      "data-slot": "dialog-description",
-      className: cn("text-muted-foreground text-sm", className),
-      ...props
-    }
-  );
-}
-
-// src/components/ui/command.tsx
-import { jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
-function Command2({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx49(
-    CommandPrimitive,
-    {
-      "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__ */ jsxs28(
-    "div",
-    {
-      "data-slot": "command-input-wrapper",
-      className: "flex h-9 items-center gap-2 border-b px-3",
-      children: [
-        /* @__PURE__ */ jsx49(Search, { className: "size-4 shrink-0 opacity-50" }),
-        /* @__PURE__ */ jsx49(
-          CommandPrimitive.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__ */ jsx49(
-    CommandPrimitive.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__ */ jsx49(
-    CommandPrimitive.Empty,
-    {
-      "data-slot": "command-empty",
-      className: "py-6 text-center text-sm",
-      ...props
-    }
-  );
-}
-function CommandGroup({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx49(
-    CommandPrimitive.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__ */ jsx49(
-    CommandPrimitive.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
-import { jsx as jsx50, jsxs as jsxs29 } from "react/jsx-runtime";
-var MultiSelect = ({
-  value = [],
-  onChange,
-  data = [],
-  placeholder = "Select...",
-  disabled,
-  searchable = true,
-  className = "",
-  dataKey = "value",
-  dataLabel = "label",
-  ...props
-}) => {
-  const [open, setOpen] = React8.useState(false);
-  React8.useEffect(() => {
-    if (value) {
-      onChange(value, props?.name || "");
-    }
-  }, []);
-  const toggleOption = (val) => {
-    onChange(
-      value?.includes(val) ? value.filter((v) => v !== val) : [...value || [], val],
-      props?.name || ""
-    );
-  };
-  const selectedLabels = React8.useMemo(
-    () => {
-      if (!data || !value) return [];
-      return data?.filter((opt) => value?.includes(opt.value)).map((opt) => opt.label);
-    },
-    [data, value]
-  );
-  const options = data && data?.map((item) => ({
-    value: item[dataKey],
-    label: item[dataLabel]
-  }));
-  return /* @__PURE__ */ jsxs29(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx50(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs29(
-      Button,
-      {
-        variant: "outline",
-        role: "combobox",
-        className: `w-full justify-between ${className} ${props.errorMessage ? "border-red-500" : ""}`,
-        disabled,
-        type: "button",
-        children: [
-          /* @__PURE__ */ jsx50("span", { className: "truncate", children: selectedLabels.length > 0 ? selectedLabels.join(", ") : placeholder }),
-          /* @__PURE__ */ jsx50(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx50(
-      PopoverContent,
+    ),
+    errorMessage && /* @__PURE__ */ jsx48("p", { className: "mt-1 text-xs text-red-500", children: errorMessage }),
+    isOpen && !disabled && /* @__PURE__ */ jsx48(Portal_default, { children: /* @__PURE__ */ jsx48(
+      "div",
       {
-        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();
+        onMouseDown: (e) => e.stopPropagation(),
+        className: "absolute z-[999] mt-1 bg-white border rounded-lg shadow-lg max-h-60 overflow-y-auto",
+        style: {
+          zIndex: 900,
+          width: dropdownRef.current?.offsetWidth,
+          top: dropdownRef.current ? dropdownRef.current.getBoundingClientRect().bottom + window.scrollY : 0,
+          left: dropdownRef.current ? dropdownRef.current.getBoundingClientRect().left + window.scrollX : 0
         },
-        children: /* @__PURE__ */ jsxs29(Command2, { shouldFilter: searchable, children: [
-          searchable && /* @__PURE__ */ jsx50(CommandInput, { placeholder: "Search..." }),
-          /* @__PURE__ */ jsxs29(CommandList, { children: [
-            /* @__PURE__ */ jsx50(CommandEmpty, { children: "No options found." }),
-            /* @__PURE__ */ jsx50(CommandGroup, { children: options.map((opt) => {
-              const isSelected = (value ?? [])?.includes(opt.value);
-              return /* @__PURE__ */ jsx50(
-                "div",
-                {
-                  className: "keep-open",
-                  children: /* @__PURE__ */ jsx50(
-                    CommandItem,
-                    {
-                      onMouseDown: (e) => {
-                        e.preventDefault();
-                        toggleOption(opt.value);
-                      },
-                      children: /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2", children: [
-                        /* @__PURE__ */ jsx50(Checkbox, { checked: isSelected }),
-                        /* @__PURE__ */ jsx50("span", { children: opt.label })
-                      ] })
-                    },
-                    opt.value
-                  )
-                },
-                opt.value
-              );
-            }) })
-          ] })
-        ] })
+        children: loading && lazyOptions.length === 0 ? /* @__PURE__ */ jsx48("div", { className: "px-3 py-4 text-center text-gray-500", children: "Loading..." }) : lazyOptions.length > 0 ? /* @__PURE__ */ jsxs27(Fragment19, { children: [
+          lazyOptions.map((option) => {
+            const isSelected = normalizedValue.includes(option.value);
+            return /* @__PURE__ */ jsxs27(
+              "div",
+              {
+                onClick: () => toggleSelect(option.value),
+                className: cn(
+                  "px-3 py-2 text-sm cursor-pointer hover:bg-blue-50 flex justify-between",
+                  isSelected && "bg-blue-100"
+                ),
+                children: [
+                  option.label,
+                  isSelected && /* @__PURE__ */ jsx48(SquareX, { size: 16 })
+                ]
+              },
+              option.value
+            );
+          }),
+          hasMore && /* @__PURE__ */ jsx48(
+            "div",
+            {
+              ref: observerTarget,
+              className: "px-3 py-3 text-center text-gray-400 text-sm",
+              children: loading ? "Loading\u2026" : "Scroll for more\u2026"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx48("div", { className: "px-3 py-4 text-center text-gray-500", children: "No results" })
       }
-    ),
-    props.errorMessage && /* @__PURE__ */ jsx50("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    ) })
   ] });
-};
-var MultiSelect_default = MultiSelect;
+}
 
 // src/components/ui/data-table.tsx
-import * as React10 from "react";
+import * as React9 from "react";
 import { faEllipsisH } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as FontAwesomeIcon3 } from "@fortawesome/react-fontawesome";
 import {
@@ -28946,14 +28863,14 @@ import {
 } from "@tanstack/react-table";
 
 // src/components/ui/table.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 function Table3({ className, ...props }) {
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx49(
     "div",
     {
       "data-slot": "table-container",
       className: "relative w-full overflow-x-auto rounded-md border border-gray-200 bg-white",
-      children: /* @__PURE__ */ jsx51(
+      children: /* @__PURE__ */ jsx49(
         "table",
         {
           "data-slot": "table",
@@ -28965,7 +28882,7 @@ function Table3({ className, ...props }) {
   );
 }
 function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx49(
     "thead",
     {
       "data-slot": "table-header",
@@ -28978,7 +28895,7 @@ function TableHeader({ className, ...props }) {
   );
 }
 function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx49(
     "tbody",
     {
       "data-slot": "table-body",
@@ -28991,7 +28908,7 @@ function TableBody({ className, ...props }) {
   );
 }
 function TableRow({ className, ...props }) {
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx49(
     "tr",
     {
       "data-slot": "table-row",
@@ -29004,7 +28921,7 @@ function TableRow({ className, ...props }) {
   );
 }
 function TableHead({ className, ...props }) {
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx49(
     "th",
     {
       "data-slot": "table-head",
@@ -29017,7 +28934,7 @@ function TableHead({ className, ...props }) {
   );
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx49(
     "td",
     {
       "data-slot": "table-cell",
@@ -29034,7 +28951,7 @@ function TableCell({ className, ...props }) {
 import { createColumnHelper } from "@tanstack/react-table";
 
 // src/lib/table/cellRendererFactory.tsx
-import React9 from "react";
+import React8 from "react";
 import Image2 from "next/image";
 
 // src/lib/dayjs-setup.ts
@@ -29083,7 +29000,7 @@ var valueFormatter = (value, format2, customFormatters = {}) => {
 };
 
 // src/lib/table/cellRendererFactory.tsx
-import { Fragment as Fragment19, jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx50, jsxs as jsxs28 } from "react/jsx-runtime";
 var getContrastColor = (bg) => {
   let c = bg.trim().toUpperCase();
   if (/^#([a-fA-F0-9]{3})$/.test(c)) {
@@ -29117,9 +29034,9 @@ var getContrastColor = (bg) => {
 };
 var sanitizeValue = (val) => {
   if (val == null) return null;
-  if (React9.isValidElement(val)) return val;
+  if (React8.isValidElement(val)) return val;
   if (typeof val === "string" || typeof val === "number") return val;
-  if (Array.isArray(val)) return val.map((v, i) => /* @__PURE__ */ jsx52(React9.Fragment, { children: sanitizeValue(v) }, i));
+  if (Array.isArray(val)) return val.map((v, i) => /* @__PURE__ */ jsx50(React8.Fragment, { children: sanitizeValue(v) }, i));
   if (typeof val === "object") {
     if ("name" in val && typeof val.name === "string") return val.name;
     if ("label" in val && typeof val.label === "string") return val.label;
@@ -29136,13 +29053,13 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
   switch (renderer) {
     /* -------------------- BASIC -------------------- */
     case "text":
-      return /* @__PURE__ */ jsx52("span", { children: row?.[rendererProps?.rowField] || formattedValue });
+      return /* @__PURE__ */ jsx50("span", { children: row?.[rendererProps?.rowField] || formattedValue });
     case "number":
-      return /* @__PURE__ */ jsx52("span", { className: "tabular-nums text-right", children: valueFormatter(row?.[rendererProps?.rowField] || value, "number:2") });
+      return /* @__PURE__ */ jsx50("span", { className: "tabular-nums text-right", children: valueFormatter(row?.[rendererProps?.rowField] || value, "number:2") });
     case "date":
-      return /* @__PURE__ */ jsx52("span", { children: valueFormatter(row?.[rendererProps?.rowField] || value, format2) });
+      return /* @__PURE__ */ jsx50("span", { children: valueFormatter(row?.[rendererProps?.rowField] || value, format2) });
     case "link":
-      return /* @__PURE__ */ jsx52(
+      return /* @__PURE__ */ jsx50(
         "a",
         {
           href: `${rendererProps?.prefix || ""}${row?.[rendererProps?.rowField] || formattedValue}`,
@@ -29154,7 +29071,7 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
       );
     /* -------------------- VISUAL -------------------- */
     case "image":
-      return /* @__PURE__ */ jsx52("div", { className: "relative", children: /* @__PURE__ */ jsx52(
+      return /* @__PURE__ */ jsx50("div", { className: "relative", children: /* @__PURE__ */ jsx50(
         Image2,
         {
           src: row?.[rendererProps?.rowField] || formattedValue || rendererProps?.fallback || "/placeholder.png",
@@ -29171,7 +29088,7 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
     case "icon":
       const maybeIcon = lucide_react_exports[rendererProps?.icon];
       const IconComponent = typeof maybeIcon === "function" ? maybeIcon : Star;
-      return /* @__PURE__ */ jsx52(
+      return /* @__PURE__ */ jsx50(
         IconComponent,
         {
           size: rendererProps?.size || 16,
@@ -29183,7 +29100,7 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
       const color = rendererProps?.colorMap?.[formattedValue] || rendererProps?.color || "gray";
       if (!formattedValue) return null;
       const textColor = getContrastColor(color);
-      return /* @__PURE__ */ jsx52(
+      return /* @__PURE__ */ jsx50(
         "span",
         {
           className: `inline-block px-2 py-1 text-xs rounded-full bg-${color}-100 text-${textColor}-700 ${rendererProps?.className || ""}`,
@@ -29198,13 +29115,13 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
       const IconComponent2 = typeof maybeIcon2 === "function" ? maybeIcon2 : Star;
       if (!formattedValue) return null;
       const textColor = getContrastColor(color);
-      return /* @__PURE__ */ jsxs30(
+      return /* @__PURE__ */ jsxs28(
         "span",
         {
           className: `inline-flex items-center gap-1 px-2 py-1 text-xs rounded-full bg-[${color}]-100 text-[${textColor}]-700`,
           style: { backgroundColor: color, color: textColor },
           children: [
-            rendererProps?.icon && /* @__PURE__ */ jsx52(Fragment19, { children: IconComponent2 ? /* @__PURE__ */ jsx52(IconComponent2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx52(Box, { className: "h-4 w-4" }) }),
+            rendererProps?.icon && /* @__PURE__ */ jsx50(Fragment20, { children: IconComponent2 ? /* @__PURE__ */ jsx50(IconComponent2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx50(Box, { className: "h-4 w-4" }) }),
             formattedValue
           ]
         }
@@ -29212,7 +29129,7 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
     }
     /* -------------------- INTERACTIVE -------------------- */
     case "button":
-      return /* @__PURE__ */ jsx52(
+      return /* @__PURE__ */ jsx50(
         "button",
         {
           onClick: () => rendererProps?.onClick?.(row, formattedValue),
@@ -29221,8 +29138,8 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
         }
       );
     case "switch":
-      return /* @__PURE__ */ jsxs30("label", { className: "inline-flex items-center cursor-pointer", children: [
-        /* @__PURE__ */ jsx52(
+      return /* @__PURE__ */ jsxs28("label", { className: "inline-flex items-center cursor-pointer", children: [
+        /* @__PURE__ */ jsx50(
           "input",
           {
             type: "checkbox",
@@ -29231,10 +29148,10 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
             className: "sr-only peer"
           }
         ),
-        /* @__PURE__ */ jsx52("div", { className: "relative w-9 h-5 bg-gray-300 peer-checked:bg-blue-600 rounded-full transition-all", children: /* @__PURE__ */ jsx52("div", { className: "absolute top-[2px] left-[2px] w-4 h-4 bg-white rounded-full peer-checked:translate-x-4 transition-all" }) })
+        /* @__PURE__ */ jsx50("div", { className: "relative w-9 h-5 bg-gray-300 peer-checked:bg-blue-600 rounded-full transition-all", children: /* @__PURE__ */ jsx50("div", { className: "absolute top-[2px] left-[2px] w-4 h-4 bg-white rounded-full peer-checked:translate-x-4 transition-all" }) })
       ] });
     case "progress":
-      return /* @__PURE__ */ jsx52("div", { className: "w-full bg-gray-100 rounded-full h-2", children: /* @__PURE__ */ jsx52(
+      return /* @__PURE__ */ jsx50("div", { className: "w-full bg-gray-100 rounded-full h-2", children: /* @__PURE__ */ jsx50(
         "div",
         {
           className: "bg-blue-600 h-2 rounded-full transition-all",
@@ -29243,7 +29160,7 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
       ) });
     case "rating": {
       const stars = Math.round(Number(row?.[rendererProps?.rowField] || formattedValue) || 0);
-      return /* @__PURE__ */ jsx52("div", { className: "flex items-center", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx52(
+      return /* @__PURE__ */ jsx50("div", { className: "flex items-center", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx50(
         Star,
         {
           size: 16,
@@ -29257,7 +29174,7 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
     case "custom": {
       const CustomRenderer = customRenderers[rendererProps?.customRendererId] || customRenderers[rendererProps?.rendererId];
       if (CustomRenderer)
-        return /* @__PURE__ */ jsx52(
+        return /* @__PURE__ */ jsx50(
           CustomRenderer,
           {
             value: formattedValue,
@@ -29265,11 +29182,11 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
             ...rendererProps
           }
         );
-      return /* @__PURE__ */ jsx52("span", { children: "Missing custom renderer" });
+      return /* @__PURE__ */ jsx50("span", { children: "Missing custom renderer" });
     }
     /* -------------------- DEFAULT -------------------- */
     default:
-      return /* @__PURE__ */ jsx52("span", { children: formattedValue });
+      return /* @__PURE__ */ jsx50("span", { children: formattedValue });
   }
 };
 
@@ -29293,6 +29210,8 @@ var useDynamicColumns = (config, customRenderers = {}, customFormatters = {}) =>
       return sanitizeValue(row[accessorKey]);
     };
     return columnHelper.accessor(accessorFn, {
+      ...col,
+      size: col.size > 0 ? col.size : 180,
       id: col.id ?? accessorKey,
       header: col.header,
       cell: (info) => {
@@ -29316,7 +29235,7 @@ var useDynamicColumns = (config, customRenderers = {}, customFormatters = {}) =>
 };
 
 // src/components/ui/data-table.tsx
-import { Fragment as Fragment20, jsx as jsx53, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
 function DataTable({
   columns,
   data,
@@ -29335,10 +29254,10 @@ function DataTable({
   onDeleteRow,
   rowActions
 }) {
-  const [columnFilters, setColumnFilters] = React10.useState([]);
-  const [columnVisibility, setColumnVisibility] = React10.useState({});
-  const [manualSort, setManualSort] = React10.useState(null);
-  const [searchTerm, setSearchTerm] = React10.useState("");
+  const [columnFilters, setColumnFilters] = React9.useState([]);
+  const [columnVisibility, setColumnVisibility] = React9.useState({});
+  const [manualSort, setManualSort] = React9.useState(null);
+  const [searchTerm, setSearchTerm] = React9.useState("");
   const tableData = Array.isArray(data) ? data : [];
   const dynamicCols = useDynamicColumns({ columns });
   const table = useReactTable({
@@ -29389,11 +29308,11 @@ function DataTable({
     return [];
   };
   const pageCount = table.getPageCount() === 0 ? 1 : table.getPageCount();
-  return /* @__PURE__ */ jsxs31("div", { className: "overflow-hidden rounded-md w-full", children: [
-    /* @__PURE__ */ jsxs31("div", { className: `flex ${globalSearch ? "justify-between" : "justify-end"} p-2 bg-gray-50`, children: [
-      globalSearch && /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2 w-full max-w-sm", children: [
-        /* @__PURE__ */ jsxs31("div", { className: "relative w-full", children: [
-          /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsxs29("div", { className: "overflow-hidden rounded-md w-full", children: [
+    /* @__PURE__ */ jsxs29("div", { className: `flex ${globalSearch ? "justify-between" : "justify-end"} p-2 bg-gray-50`, children: [
+      globalSearch && /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2 w-full max-w-sm", children: [
+        /* @__PURE__ */ jsxs29("div", { className: "relative w-full", children: [
+          /* @__PURE__ */ jsx51(
             "input",
             {
               type: "text",
@@ -29408,9 +29327,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__ */ jsx53(Search, { className: "absolute left-2 top-2.5 text-gray-400", size: 16 })
+          /* @__PURE__ */ jsx51(Search, { className: "absolute left-2 top-2.5 text-gray-400", size: 16 })
         ] }),
-        /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsx51(
           Button,
           {
             size: "sm",
@@ -29420,8 +29339,8 @@ function DataTable({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs31(Popover, { children: [
-        /* @__PURE__ */ jsx53(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx53(
+      /* @__PURE__ */ jsxs29(Popover, { children: [
+        /* @__PURE__ */ jsx51(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx51(
           Button,
           {
             variant: "outline",
@@ -29430,10 +29349,10 @@ function DataTable({
             children: "Manage Columns"
           }
         ) }),
-        /* @__PURE__ */ jsxs31(PopoverContent, { align: "end", className: "w-48 p-3 space-y-2", children: [
-          /* @__PURE__ */ jsx53("div", { className: "text-sm font-medium mb-2", children: "Show / Hide Columns" }),
-          /* @__PURE__ */ jsxs31("label", { className: "flex items-center gap-2 text-sm font-semibold border-b pb-2 mb-2", children: [
-            /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsxs29(PopoverContent, { align: "end", className: "w-48 p-3 space-y-2", children: [
+          /* @__PURE__ */ jsx51("div", { className: "text-sm font-medium mb-2", children: "Show / Hide Columns" }),
+          /* @__PURE__ */ jsxs29("label", { className: "flex items-center gap-2 text-sm font-semibold border-b pb-2 mb-2", children: [
+            /* @__PURE__ */ jsx51(
               "input",
               {
                 type: "checkbox",
@@ -29452,8 +29371,8 @@ function DataTable({
             ),
             "Toggle All"
           ] }),
-          table.getAllLeafColumns().map((column) => /* @__PURE__ */ jsxs31("label", { className: "flex items-center gap-2 text-sm", children: [
-            /* @__PURE__ */ jsx53(
+          table.getAllLeafColumns().map((column) => /* @__PURE__ */ jsxs29("label", { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ jsx51(
               "input",
               {
                 type: "checkbox",
@@ -29466,12 +29385,12 @@ function DataTable({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs31(Table3, { className: "table-fixed", children: [
-      /* @__PURE__ */ jsx53(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx53(TableRow, { children: hg.headers.map((header, index) => {
+    /* @__PURE__ */ jsxs29(Table3, { className: "table-fixed", children: [
+      /* @__PURE__ */ jsx51(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx51(TableRow, { children: hg.headers.map((header, index) => {
         const canSort = header.column.getCanSort();
         const canFilter = header.column.getCanFilter();
         const sortDir = manualSort?.key === header.column.id ? manualSort.dir : null;
-        return /* @__PURE__ */ jsx53(
+        return /* @__PURE__ */ jsx51(
           TableHead,
           {
             className: "relative select-none",
@@ -29480,8 +29399,8 @@ function DataTable({
               minWidth: header.column.columnDef.minSize,
               maxWidth: header.column.columnDef.maxSize
             },
-            children: /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsxs31(
+            children: /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs29(
                 "span",
                 {
                   className: `flex items-center gap-1 ${canSort ? "cursor-pointer" : ""}`,
@@ -29493,32 +29412,32 @@ function DataTable({
                   },
                   children: [
                     flexRender(header.column.columnDef.header, header.getContext()),
-                    canSort && /* @__PURE__ */ jsxs31(Fragment20, { children: [
-                      sortDir === "asc" && /* @__PURE__ */ jsx53(ArrowUp, { size: 14, className: "text-gray-500" }),
-                      sortDir === "desc" && /* @__PURE__ */ jsx53(ArrowDown, { size: 14, className: "text-gray-500" }),
-                      !sortDir && /* @__PURE__ */ jsx53(ArrowUpDown, { size: 14, className: "text-gray-400" })
+                    canSort && /* @__PURE__ */ jsxs29(Fragment21, { children: [
+                      sortDir === "asc" && /* @__PURE__ */ jsx51(ArrowUp, { size: 14, className: "text-gray-500" }),
+                      sortDir === "desc" && /* @__PURE__ */ jsx51(ArrowDown, { size: 14, className: "text-gray-500" }),
+                      !sortDir && /* @__PURE__ */ jsx51(ArrowUpDown, { size: 14, className: "text-gray-400" })
                     ] })
                   ]
                 }
               ),
-              canFilter && /* @__PURE__ */ jsxs31(Popover, { children: [
-                /* @__PURE__ */ jsx53(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx53(
+              canFilter && /* @__PURE__ */ jsxs29(Popover, { children: [
+                /* @__PURE__ */ jsx51(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx51(
                   "span",
                   {
                     role: "presentation",
                     className: "pl-5 cursor-pointer",
                     onClick: (e) => e.stopPropagation(),
-                    children: /* @__PURE__ */ jsx53(FontAwesomeIcon3, { icon: faEllipsisH, className: "w-5 h-5 text-gray-500" })
+                    children: /* @__PURE__ */ jsx51(FontAwesomeIcon3, { icon: faEllipsisH, className: "w-5 h-5 text-gray-500" })
                   }
                 ) }),
-                /* @__PURE__ */ jsx53(
+                /* @__PURE__ */ jsx51(
                   PopoverContent,
                   {
                     align: "center",
                     sideOffset: 14,
                     className: "w-50 p-3 z-[200] border-gray-300",
                     avoidCollisions: true,
-                    children: /* @__PURE__ */ jsxs31(
+                    children: /* @__PURE__ */ jsxs29(
                       "form",
                       {
                         onSubmit: (e) => {
@@ -29531,8 +29450,8 @@ function DataTable({
                         },
                         className: "space-y-2",
                         children: [
-                          /* @__PURE__ */ jsx53("label", { htmlFor: "filter", className: "text-xs text-gray-500 font-normal", children: "Filter by value:" }),
-                          /* @__PURE__ */ jsx53(
+                          /* @__PURE__ */ jsx51("label", { htmlFor: "filter", className: "text-xs text-gray-500 font-normal", children: "Filter by value:" }),
+                          /* @__PURE__ */ jsx51(
                             "input",
                             {
                               name: "filter",
@@ -29542,7 +29461,7 @@ function DataTable({
                               autoComplete: "off"
                             }
                           ),
-                          /* @__PURE__ */ jsx53("div", { className: "justify-end flex", children: /* @__PURE__ */ jsx53(
+                          /* @__PURE__ */ jsx51("div", { className: "justify-end flex", children: /* @__PURE__ */ jsx51(
                             Button,
                             {
                               type: "submit",
@@ -29561,11 +29480,11 @@ function DataTable({
           `header-${header.id}-${index}`
         );
       }) }, `header-group-${hg.id}`)) }),
-      /* @__PURE__ */ jsx53(TableBody, { children: loading ? /* @__PURE__ */ jsx53(Fragment20, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx53(TableRow, { children: dynamicCols.map((_2, j) => /* @__PURE__ */ jsx53(TableCell, { className: "p-3", children: /* @__PURE__ */ jsx53("span", { className: "h-4 bg-gray-200 rounded w-3/4 block animate-pulse" }) }, j)) }, i)) }) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx53(TableRow, { children: row.getVisibleCells().map((cell, cellIndex, arr) => {
+      /* @__PURE__ */ jsx51(TableBody, { children: loading ? /* @__PURE__ */ jsx51(Fragment21, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx51(TableRow, { children: dynamicCols.map((_2, j) => /* @__PURE__ */ jsx51(TableCell, { className: "p-3", children: /* @__PURE__ */ jsx51("span", { className: "h-4 bg-gray-200 rounded w-3/4 block animate-pulse" }) }, j)) }, i)) }) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx51(TableRow, { children: row.getVisibleCells().map((cell, cellIndex, arr) => {
         const meta = cell.column.columnDef.meta || {};
         const isClickable = meta?.isClickable;
         const isLastCell = cellIndex === arr.length - 1;
-        return /* @__PURE__ */ jsxs31(
+        return /* @__PURE__ */ jsxs29(
           TableCell,
           {
             className: `${meta?.cellClass ?? ""} ${isClickable ? "cursor-pointer hover:bg-gray-100 underline text-blue-500" : ""} relative py-2`,
@@ -29582,9 +29501,9 @@ function DataTable({
             },
             children: [
               flexRender(cell.column.columnDef.cell, cell.getContext()),
-              isLastCell && rowActions && rowActions.length > 0 && /* @__PURE__ */ jsx53("div", { className: "absolute bg-[#fff] p-1 px-4 inset-y-0 right-0 flex items-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-lg rounded", children: rowActions.map((action) => {
+              isLastCell && rowActions && rowActions.length > 0 && /* @__PURE__ */ jsx51("div", { className: "absolute bg-[#fff] p-1 px-4 inset-y-0 right-0 flex items-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-lg rounded", children: rowActions.map((action) => {
                 const isDelete = action.id === "delete" || action.icon === "delete";
-                return /* @__PURE__ */ jsx53(
+                return /* @__PURE__ */ jsx51(
                   "button",
                   {
                     className: `ml-2 px-2 py-1 text-[12px] rounded cursor-pointer ${isDelete ? "bg-red-800 text-white hover:bg-neutral-600" : "bg-gray-300 hover:bg-gray-400"}`,
@@ -29606,17 +29525,17 @@ function DataTable({
           },
           `cell-${cell.id}-${cellIndex}`
         );
-      }) }, row.id)) : /* @__PURE__ */ jsx53(TableRow, { children: /* @__PURE__ */ jsx53(TableCell, { colSpan: dynamicCols.length, className: "h-24 text-center", children: /* @__PURE__ */ jsx53("span", { className: "flex items-center justify-center py-10 w-full min-w-full text-gray-600 bg-gray-100", children: "No results." }) }) }) })
+      }) }, row.id)) : /* @__PURE__ */ jsx51(TableRow, { children: /* @__PURE__ */ jsx51(TableCell, { colSpan: dynamicCols.length, className: "h-24 text-center", children: /* @__PURE__ */ jsx51("span", { className: "flex items-center justify-center py-10 w-full min-w-full text-gray-600 bg-gray-100", children: "No results." }) }) }) })
     ] }),
-    pagination && /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between py-3 px-2 text-sm w-full", children: [
-      /* @__PURE__ */ jsxs31("div", { children: [
+    pagination && /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between py-3 px-2 text-sm w-full", children: [
+      /* @__PURE__ */ jsxs29("div", { children: [
         "Page ",
         table.getState().pagination.pageIndex + 1,
         " of ",
         pageCount
       ] }),
-      /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx53(
+      /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx51(
           "button",
           {
             onClick: () => table.previousPage(),
@@ -29629,7 +29548,7 @@ function DataTable({
           table.getState().pagination.pageIndex + 1,
           table.getPageCount(),
           5
-        ).map((pageNum, index) => /* @__PURE__ */ jsx53(
+        ).map((pageNum, index) => /* @__PURE__ */ jsx51(
           "button",
           {
             disabled: pageNum === "...",
@@ -29639,7 +29558,7 @@ function DataTable({
           },
           index
         )),
-        /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsx51(
           "button",
           {
             onClick: () => table.nextPage(),
@@ -29654,7 +29573,7 @@ function DataTable({
 }
 
 // src/components/DataDisplay/Table/Table.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var Table4 = ({
   columns,
   data,
@@ -29679,7 +29598,7 @@ var Table4 = ({
   const rawColumns = Array.isArray(columns) ? columns : [];
   const rawData = Array.isArray(data) ? data : [];
   const isControlled = typeof page === "number";
-  return /* @__PURE__ */ jsx54("div", { className: `${className || ""} space-y-3`, style, children: /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx52("div", { className: `${className || ""} space-y-3`, style, children: /* @__PURE__ */ jsx52(
     DataTable,
     {
       ...props,
@@ -29711,9 +29630,9 @@ var Table4 = ({
 var Table_default = Table4;
 
 // src/components/ui/pagination.tsx
-import { jsx as jsx55, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs30 } from "react/jsx-runtime";
 function Pagination({ className, ...props }) {
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx53(
     "nav",
     {
       role: "navigation",
@@ -29728,7 +29647,7 @@ function PaginationContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx53(
     "ul",
     {
       "data-slot": "pagination-content",
@@ -29738,7 +29657,7 @@ function PaginationContent({
   );
 }
 function PaginationItem({ ...props }) {
-  return /* @__PURE__ */ jsx55("li", { "data-slot": "pagination-item", ...props });
+  return /* @__PURE__ */ jsx53("li", { "data-slot": "pagination-item", ...props });
 }
 function PaginationLink({
   className,
@@ -29746,7 +29665,7 @@ function PaginationLink({
   size = "icon",
   ...props
 }) {
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx53(
     "a",
     {
       "aria-current": isActive ? "page" : void 0,
@@ -29767,7 +29686,7 @@ function PaginationPrevious({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs30(
     PaginationLink,
     {
       "aria-label": "Go to previous page",
@@ -29775,8 +29694,8 @@ function PaginationPrevious({
       className: cn("gap-1 px-2.5 sm:pl-2.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx55(ChevronLeft, {}),
-        /* @__PURE__ */ jsx55("span", { className: "hidden sm:block", children: "Previous" })
+        /* @__PURE__ */ jsx53(ChevronLeft, {}),
+        /* @__PURE__ */ jsx53("span", { className: "hidden sm:block", children: "Previous" })
       ]
     }
   );
@@ -29785,7 +29704,7 @@ function PaginationNext({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs30(
     PaginationLink,
     {
       "aria-label": "Go to next page",
@@ -29793,8 +29712,8 @@ function PaginationNext({
       className: cn("gap-1 px-2.5 sm:pr-2.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx55("span", { className: "hidden sm:block", children: "Next" }),
-        /* @__PURE__ */ jsx55(ChevronRight, {})
+        /* @__PURE__ */ jsx53("span", { className: "hidden sm:block", children: "Next" }),
+        /* @__PURE__ */ jsx53(ChevronRight, {})
       ]
     }
   );
@@ -29803,7 +29722,7 @@ function PaginationEllipsis({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs30(
     "span",
     {
       "aria-hidden": true,
@@ -29811,15 +29730,15 @@ function PaginationEllipsis({
       className: cn("flex size-9 items-center justify-center", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx55(Ellipsis, { className: "size-4" }),
-        /* @__PURE__ */ jsx55("span", { className: "sr-only", children: "More pages" })
+        /* @__PURE__ */ jsx53(Ellipsis, { className: "size-4" }),
+        /* @__PURE__ */ jsx53("span", { className: "sr-only", children: "More pages" })
       ]
     }
   );
 }
 
 // src/components/DataDisplay/Pagination/Pagination.tsx
-import { jsx as jsx56, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs31 } from "react/jsx-runtime";
 var CustomPagination = ({
   totalPages,
   currentPage,
@@ -29865,10 +29784,10 @@ var CustomPagination = ({
     }
   };
   const pageNumbers = getPageNumbers();
-  return /* @__PURE__ */ jsxs33("div", { className: "flex flex-row gap-1 w-full items-center justify-between", children: [
-    /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx56("p", { className: "text-sm text-muted-foreground whitespace-nowrap", children: "Items per page:" }),
-      /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs31("div", { className: "flex flex-row gap-1 w-full items-center justify-between", children: [
+    /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx54("p", { className: "text-sm text-muted-foreground whitespace-nowrap", children: "Items per page:" }),
+      /* @__PURE__ */ jsxs31(
         Select,
         {
           defaultValue: String(perPage),
@@ -29876,26 +29795,26 @@ var CustomPagination = ({
             onPageChange({ page: 1, itemsPerPage: Number(value) });
           },
           children: [
-            /* @__PURE__ */ jsx56(SelectTrigger, { className: "w-[100px]", children: /* @__PURE__ */ jsx56(SelectValue, { placeholder: "Select" }) }),
-            /* @__PURE__ */ jsxs33(SelectContent, { children: [
-              /* @__PURE__ */ jsx56(SelectItem, { value: "5", children: "5" }),
-              /* @__PURE__ */ jsx56(SelectItem, { value: "10", children: "10" }),
-              /* @__PURE__ */ jsx56(SelectItem, { value: "20", children: "20" }),
-              /* @__PURE__ */ jsx56(SelectItem, { value: "50", children: "50" })
+            /* @__PURE__ */ jsx54(SelectTrigger, { className: "w-[100px]", children: /* @__PURE__ */ jsx54(SelectValue, { placeholder: "Select" }) }),
+            /* @__PURE__ */ jsxs31(SelectContent, { children: [
+              /* @__PURE__ */ jsx54(SelectItem, { value: "5", children: "5" }),
+              /* @__PURE__ */ jsx54(SelectItem, { value: "10", children: "10" }),
+              /* @__PURE__ */ jsx54(SelectItem, { value: "20", children: "20" }),
+              /* @__PURE__ */ jsx54(SelectItem, { value: "50", children: "50" })
             ] })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsx56(Pagination, { className: "justify-end", children: /* @__PURE__ */ jsxs33(PaginationContent, { children: [
-      /* @__PURE__ */ jsx56(PaginationItem, { children: /* @__PURE__ */ jsx56(
+    /* @__PURE__ */ jsx54(Pagination, { className: "justify-end", children: /* @__PURE__ */ jsxs31(PaginationContent, { children: [
+      /* @__PURE__ */ jsx54(PaginationItem, { children: /* @__PURE__ */ jsx54(
         PaginationPrevious,
         {
           onClick: () => handlePageChange(currentPage - 1),
           className: currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"
         }
       ) }),
-      pageNumbers.map((pageNumber, index) => /* @__PURE__ */ jsx56(PaginationItem, { children: pageNumber === "..." ? /* @__PURE__ */ jsx56(PaginationEllipsis, {}) : /* @__PURE__ */ jsx56(
+      pageNumbers.map((pageNumber, index) => /* @__PURE__ */ jsx54(PaginationItem, { children: pageNumber === "..." ? /* @__PURE__ */ jsx54(PaginationEllipsis, {}) : /* @__PURE__ */ jsx54(
         PaginationLink,
         {
           onClick: () => handlePageChange(pageNumber),
@@ -29904,7 +29823,7 @@ var CustomPagination = ({
           children: pageNumber
         }
       ) }, index)),
-      /* @__PURE__ */ jsx56(PaginationItem, { children: /* @__PURE__ */ jsx56(
+      /* @__PURE__ */ jsx54(PaginationItem, { children: /* @__PURE__ */ jsx54(
         PaginationNext,
         {
           onClick: () => handlePageChange(currentPage + 1),
@@ -29917,10 +29836,126 @@ var CustomPagination = ({
 var Pagination_default = CustomPagination;
 
 // src/components/Navigation/Tabs/Tabs.tsx
-import { useCallback as useCallback3, useMemo as useMemo4, useState as useState8 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo5, useState as useState8 } from "react";
 import Link5 from "next/link";
 import { useRouter } from "next/navigation";
-import { Fragment as Fragment21, jsx as jsx57, jsxs as jsxs34 } from "react/jsx-runtime";
+
+// src/components/ui/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { jsx as jsx55, jsxs as jsxs32 } from "react/jsx-runtime";
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx55(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx55(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx55(
+    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__ */ jsxs32(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx55(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs32(
+      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__ */ jsxs32(
+            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__ */ jsx55(X, {}),
+                /* @__PURE__ */ jsx55("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx55(
+    "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__ */ jsx55(
+    "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__ */ jsx55(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx55(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+
+// src/components/Navigation/Tabs/Tabs.tsx
+import { Fragment as Fragment22, jsx as jsx56, jsxs as jsxs33 } from "react/jsx-runtime";
 var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder = false, source, parentKey, menuNameKey, menuUrlKey, loading }) => {
   const [openIndex, setOpenIndex] = useState8(null);
   function groupMenus(menus = []) {
@@ -29955,7 +29990,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
     });
     return sortMenus(rootMenus);
   }
-  const rawTabs = useMemo4(() => {
+  const rawTabs = useMemo5(() => {
     if (!Array.isArray(tabs)) return [];
     if (source === "manual") return Array.isArray(tabs) ? tabs : [];
     return groupMenus(tabs);
@@ -29990,13 +30025,13 @@ 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__ */ jsxs34(
+      return /* @__PURE__ */ jsxs33(
         DropdownMenu,
         {
           open: openIndex === index,
           onOpenChange: (open) => setOpenIndex(open ? index : null),
           children: [
-            /* @__PURE__ */ jsxs34(
+            /* @__PURE__ */ jsxs33(
               DropdownMenuTrigger,
               {
                 className: `${finalClasses} inline-flex items-center gap-1`,
@@ -30009,11 +30044,11 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
                 },
                 children: [
                   tab.header,
-                  /* @__PURE__ */ jsx57(ChevronDown, { className: "h-4 w-4 opacity-80" })
+                  /* @__PURE__ */ jsx56(ChevronDown, { className: "h-4 w-4 opacity-80" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx57(
+            /* @__PURE__ */ jsx56(
               DropdownMenuContent,
               {
                 align: "start",
@@ -30026,12 +30061,12 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
                 onMouseLeave: () => {
                   timeout = setTimeout(() => setOpenIndex(null), 150);
                 },
-                children: tab.children.map((item, index2) => /* @__PURE__ */ jsx57(
+                children: tab.children.map((item, index2) => /* @__PURE__ */ jsx56(
                   DropdownMenuItem,
                   {
                     asChild: true,
                     className: "cursor-pointer rounded-sm px-3 py-2 text-gray-800 hover:bg-gray-100 focus:bg-gray-100",
-                    children: /* @__PURE__ */ jsx57(
+                    children: /* @__PURE__ */ jsx56(
                       Link5,
                       {
                         href: item.url || "#",
@@ -30050,7 +30085,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
         index
       );
     }
-    return tab.url ? /* @__PURE__ */ jsx57(
+    return tab.url ? /* @__PURE__ */ jsx56(
       Link5,
       {
         href: tab.url,
@@ -30061,14 +30096,14 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
         children: tab.header
       },
       index
-    ) : /* @__PURE__ */ jsx57("div", { className: finalClasses, style: tab.style, role: "button", tabIndex: 0, children: tab.header }, index);
+    ) : /* @__PURE__ */ jsx56("div", { className: finalClasses, style: tab.style, role: "button", tabIndex: 0, children: tab.header }, index);
   };
-  const renderMobileMenu = () => /* @__PURE__ */ jsxs34(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxs34(DropdownMenuTrigger, { className: "flex items-center gap-2 px-3 py-2 rounded-md bg-white/10 text-white text-sm", children: [
-      /* @__PURE__ */ jsx57(Menu, { className: "h-4 w-4" }),
+  const renderMobileMenu = () => /* @__PURE__ */ jsxs33(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs33(DropdownMenuTrigger, { className: "flex items-center gap-2 px-3 py-2 rounded-md bg-white/10 text-white text-sm", children: [
+      /* @__PURE__ */ jsx56(Menu, { className: "h-4 w-4" }),
       "Menu"
     ] }),
-    /* @__PURE__ */ jsx57(
+    /* @__PURE__ */ jsx56(
       DropdownMenuContent,
       {
         align: "start",
@@ -30077,25 +30112,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__ */ jsxs34(DropdownMenuSub, { children: [
-              /* @__PURE__ */ jsx57(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__ */ jsx57(DropdownMenuSubContent, { className: "bg-white border shadow-lg rounded-md p-1", children: tab.children.map((item, index) => /* @__PURE__ */ jsx57(
+            return /* @__PURE__ */ jsxs33(DropdownMenuSub, { children: [
+              /* @__PURE__ */ jsx56(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__ */ jsx56(DropdownMenuSubContent, { className: "bg-white border shadow-lg rounded-md p-1", children: tab.children.map((item, index) => /* @__PURE__ */ jsx56(
                 DropdownMenuItem,
                 {
                   asChild: true,
                   className: "cursor-pointer rounded-sm px-3 py-2 text-gray-800 hover:bg-gray-100",
-                  children: /* @__PURE__ */ jsx57(Link5, { href: item.url || "#", onClick: (e) => handleBuilderExit(e, item.url || "#"), children: item.header })
+                  children: /* @__PURE__ */ jsx56(Link5, { href: item.url || "#", onClick: (e) => handleBuilderExit(e, item.url || "#"), children: item.header })
                 },
                 item.id || index
               )) })
             ] }, i);
           }
-          return /* @__PURE__ */ jsx57(
+          return /* @__PURE__ */ jsx56(
             DropdownMenuItem,
             {
               asChild: true,
               className: "cursor-pointer rounded-sm px-3 py-2 text-[13px] text-gray-800 hover:bg-gray-100",
-              children: /* @__PURE__ */ jsx57(Link5, { href: tab.url || "#", onClick: (e) => handleBuilderExit(e, tab.url || "#"), children: tab.header })
+              children: /* @__PURE__ */ jsx56(Link5, { href: tab.url || "#", onClick: (e) => handleBuilderExit(e, tab.url || "#"), children: tab.header })
             },
             i
           );
@@ -30105,19 +30140,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__ */ jsxs34(Fragment21, { children: [
-    /* @__PURE__ */ jsxs34("div", { className: cn("min-h-10", className), style, children: [
-      forceDesktop !== void 0 ? forceDesktop && /* @__PURE__ */ jsx57("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsx57("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }) : /* @__PURE__ */ jsx57("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsx57("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }),
-      forceMobile !== void 0 ? forceMobile && /* @__PURE__ */ jsx57("div", { children: renderMobileMenu() }) : /* @__PURE__ */ jsx57("div", { className: "flex md:hidden", children: renderMobileMenu() })
+  return /* @__PURE__ */ jsxs33(Fragment22, { children: [
+    /* @__PURE__ */ jsxs33("div", { className: cn("min-h-10", className), style, children: [
+      forceDesktop !== void 0 ? forceDesktop && /* @__PURE__ */ jsx56("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsx56("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }) : /* @__PURE__ */ jsx56("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsx56("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }),
+      forceMobile !== void 0 ? forceMobile && /* @__PURE__ */ jsx56("div", { children: renderMobileMenu() }) : /* @__PURE__ */ jsx56("div", { className: "flex md:hidden", children: renderMobileMenu() })
     ] }),
-    /* @__PURE__ */ jsx57(Dialog, { open: showExitDialog, onOpenChange: setShowExitDialog, children: /* @__PURE__ */ jsxs34(DialogContent, { className: "bg-[#fff]", children: [
-      /* @__PURE__ */ jsxs34(DialogHeader, { children: [
-        /* @__PURE__ */ jsx57(DialogTitle, { children: "Exit Builder?" }),
-        /* @__PURE__ */ jsx57(DialogDescription, { children: "You are about to leave the builder. Any unsaved changes may be lost." })
+    /* @__PURE__ */ jsx56(Dialog, { open: showExitDialog, onOpenChange: setShowExitDialog, children: /* @__PURE__ */ jsxs33(DialogContent, { className: "bg-[#fff]", children: [
+      /* @__PURE__ */ jsxs33(DialogHeader, { children: [
+        /* @__PURE__ */ jsx56(DialogTitle, { children: "Exit Builder?" }),
+        /* @__PURE__ */ jsx56(DialogDescription, { children: "You are about to leave the builder. Any unsaved changes may be lost." })
       ] }),
-      /* @__PURE__ */ jsxs34(DialogFooter, { children: [
-        /* @__PURE__ */ jsx57(Button, { className: "cursor-pointer bg-[#12715b] text-[#fff]", variant: "outline", onClick: () => setShowExitDialog(false), children: "Cancel" }),
-        /* @__PURE__ */ jsx57(Button, { className: "cursor-pointer border-[#12715b] border", onClick: confirmExit, children: "Yes, Exit" })
+      /* @__PURE__ */ jsxs33(DialogFooter, { children: [
+        /* @__PURE__ */ jsx56(Button, { className: "cursor-pointer bg-[#12715b] text-[#fff]", variant: "outline", onClick: () => setShowExitDialog(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx56(Button, { className: "cursor-pointer border-[#12715b] border", onClick: confirmExit, children: "Yes, Exit" })
       ] })
     ] }) })
   ] });
@@ -30125,8 +30160,8 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-import React11, { useState as useState9 } from "react";
-import { jsx as jsx58, jsxs as jsxs35 } from "react/jsx-runtime";
+import React10, { useState as useState9 } from "react";
+import { jsx as jsx57, jsxs as jsxs34 } from "react/jsx-runtime";
 var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage, dataKey = "key", dataLabel = "header", loading }) => {
   const [activeStage, setActiveStage] = useState9(currentStage || (stages && stages.length > 0 ? stages[0].key : null));
   const nextStage = () => {
@@ -30145,9 +30180,9 @@ var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStag
     onStageChange?.(stageKey);
   };
   const isAllStagesCompleted = activeStage === lastStage;
-  return /* @__PURE__ */ jsx58("div", { className, style, children: /* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between bg-red p-2 rounded-lg border border-gray-200 w-full", children: [
-    /* @__PURE__ */ jsx58("div", { className: "flex items-center", children: /* @__PURE__ */ jsx58("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ jsx58("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx58("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
-    /* @__PURE__ */ jsx58("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: loading ? Array(6).fill(null).map((_, index) => /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx57("div", { className, style, children: /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-between bg-red p-2 rounded-lg border border-gray-200 w-full", children: [
+    /* @__PURE__ */ jsx57("div", { className: "flex items-center", children: /* @__PURE__ */ jsx57("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ jsx57("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx57("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
+    /* @__PURE__ */ jsx57("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: loading ? Array(6).fill(null).map((_, index) => /* @__PURE__ */ jsx57(
       "button",
       {
         className: `
@@ -30160,8 +30195,8 @@ var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStag
       const currentIndex = stages.findIndex((s) => s[dataKey] === activeStage);
       const isCompleted = isAllStagesCompleted || index < currentIndex;
       const isActive = !isAllStagesCompleted && index === currentIndex;
-      return /* @__PURE__ */ jsxs35(React11.Fragment, { children: [
-        /* @__PURE__ */ jsx58(
+      return /* @__PURE__ */ jsxs34(React10.Fragment, { children: [
+        /* @__PURE__ */ jsx57(
           "button",
           {
             className: `
@@ -30174,10 +30209,10 @@ var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStag
             children: stage[dataLabel]
           }
         ),
-        index < stages.length - 1 && /* @__PURE__ */ jsx58("div", { className: "flex-shrink-0 w-3 h-px bg-gray-300" })
+        index < stages.length - 1 && /* @__PURE__ */ jsx57("div", { className: "flex-shrink-0 w-3 h-px bg-gray-300" })
       ] }, stage.id);
     }) }),
-    isShowBtn && /* @__PURE__ */ jsx58("div", { className: "flex items-center", children: /* @__PURE__ */ jsx58(
+    isShowBtn && /* @__PURE__ */ jsx57("div", { className: "flex items-center", children: /* @__PURE__ */ jsx57(
       "button",
       {
         className: "bg-green-700 text-white px-6 py-2 rounded-lg text-sm font-medium transition-colors duration-200 shadow-sm",
@@ -30192,26 +30227,26 @@ var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStag
 var Stages_default = StagesComponent;
 
 // src/components/Navigation/Spacer/Spacer.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var Spacer = ({ className, style }) => {
-  return /* @__PURE__ */ jsx59("div", { className: `${className}`, style });
+  return /* @__PURE__ */ jsx58("div", { className: `${className}`, style });
 };
 var Spacer_default = Spacer;
 
 // src/components/Navigation/Profile/Profile.tsx
-import { jsx as jsx60, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs35 } from "react/jsx-runtime";
 
 // src/components/Navigation/Notification/Notification.tsx
-import { jsx as jsx61, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs36 } from "react/jsx-runtime";
 
 // src/components/Navigation/Logo/Logo.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 
 // src/components/ui/avatar.tsx
-import * as React12 from "react";
+import * as React11 from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { jsx as jsx63 } from "react/jsx-runtime";
-var Avatar = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx63(
+import { jsx as jsx62 } from "react/jsx-runtime";
+var Avatar = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx62(
   AvatarPrimitive.Root,
   {
     ref,
@@ -30223,7 +30258,7 @@ var Avatar = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx63(
+var AvatarImage = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx62(
   AvatarPrimitive.Image,
   {
     ref,
@@ -30232,7 +30267,7 @@ var AvatarImage = React12.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx63(
+var AvatarFallback = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx62(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -30250,8 +30285,8 @@ import Link6 from "next/link";
 import Image4 from "next/image";
 import { useRouter as useRouter2 } from "next/navigation";
 import { DropdownMenuSeparator } from "@radix-ui/react-dropdown-menu";
-import { useCallback as useCallback4, useMemo as useMemo5, useState as useState10 } from "react";
-import { Fragment as Fragment22, jsx as jsx64, jsxs as jsxs38 } from "react/jsx-runtime";
+import { useCallback as useCallback4, useMemo as useMemo6, useState as useState10 } from "react";
+import { Fragment as Fragment23, jsx as jsx63, jsxs as jsxs37 } from "react/jsx-runtime";
 function Navbar({
   style,
   badgeType,
@@ -30289,29 +30324,29 @@ function Navbar({
       router.push(pendingUrl);
     }
   };
-  const formatedMenu = useMemo5(() => {
+  const formatedMenu = useMemo6(() => {
     if (source === "state" && navList && navList.length) {
       return navList.map((i) => ({ ...i, header: i.name || "Menu" }));
     }
     return list || [];
   }, [source, navList]);
-  return /* @__PURE__ */ jsxs38(Fragment22, { children: [
-    /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsxs37(Fragment23, { children: [
+    /* @__PURE__ */ jsx63(
       "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__ */ jsxs38("div", { className: "mx-auto flex max-w-[90%] items-center justify-between px-4 py-4", children: [
-          /* @__PURE__ */ jsx64(
+        children: /* @__PURE__ */ jsxs37("div", { className: "mx-auto flex max-w-[90%] items-center justify-between px-4 py-4", children: [
+          /* @__PURE__ */ jsx63(
             Link6,
             {
               href: "/",
               onClick: (e) => handleBuilderExit(e, "/"),
               className: "flex items-center space-x-2",
-              children: imageUrl ? /* @__PURE__ */ jsx64(Image4, { src: imageUrl, alt: altText, width: 200, height: 200 }) : /* @__PURE__ */ jsx64("span", { className: "font-semibold text-blue-700", children: "Logo" })
+              children: imageUrl ? /* @__PURE__ */ jsx63(Image4, { src: imageUrl, alt: altText, width: 200, height: 200 }) : /* @__PURE__ */ jsx63("span", { className: "font-semibold text-blue-700", children: "Logo" })
             }
           ),
-          !isMobileView && /* @__PURE__ */ jsx64("div", { className: "flex items-center space-x-6 sm:hidden md:flex", children: formatedMenu.map((item) => /* @__PURE__ */ jsx64(
+          !isMobileView && /* @__PURE__ */ jsx63("div", { className: "flex items-center space-x-6 sm:hidden md:flex", children: formatedMenu.map((item) => /* @__PURE__ */ jsx63(
             Link6,
             {
               href: item.url || "#",
@@ -30321,39 +30356,39 @@ function Navbar({
             },
             item.id
           )) }),
-          /* @__PURE__ */ jsxs38("div", { className: "flex items-center space-x-3", children: [
-            !isMobileView ? /* @__PURE__ */ jsx64("div", { className: "flex-1 px-6", children: /* @__PURE__ */ jsxs38("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
-              /* @__PURE__ */ jsx64(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dark:text-white text-gray-400" }),
-              /* @__PURE__ */ jsx64(Input, { placeholder: "Search", className: "pl-9 text-gray-400" })
-            ] }) }) : /* @__PURE__ */ jsx64(Button, { variant: "ghost", size: "icon", className: "border border-gray-400", children: /* @__PURE__ */ jsx64(Search, { className: "h-5 w-5 text-gray-400" }) }),
-            /* @__PURE__ */ jsxs38("div", { className: "relative bg-[#E9E9E9] dark:bg-gray-700 rounded-md", children: [
-              /* @__PURE__ */ jsx64(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx64(Bell, { className: "h-5 w-5 text-[#1C1B1F] dark:text-gray-400" }) }),
-              badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ jsx64("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__ */ jsx64("span", { className: "absolute -top-1 -right-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500" })
+          /* @__PURE__ */ jsxs37("div", { className: "flex items-center space-x-3", children: [
+            !isMobileView ? /* @__PURE__ */ jsx63("div", { className: "flex-1 px-6", children: /* @__PURE__ */ jsxs37("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
+              /* @__PURE__ */ jsx63(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dark:text-white text-gray-400" }),
+              /* @__PURE__ */ jsx63(Input, { placeholder: "Search", className: "pl-9 text-gray-400" })
+            ] }) }) : /* @__PURE__ */ jsx63(Button, { variant: "ghost", size: "icon", className: "border border-gray-400", children: /* @__PURE__ */ jsx63(Search, { className: "h-5 w-5 text-gray-400" }) }),
+            /* @__PURE__ */ jsxs37("div", { className: "relative bg-[#E9E9E9] dark:bg-gray-700 rounded-md", children: [
+              /* @__PURE__ */ jsx63(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx63(Bell, { className: "h-5 w-5 text-[#1C1B1F] dark:text-gray-400" }) }),
+              badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ jsx63("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__ */ jsx63("span", { className: "absolute -top-1 -right-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500" })
             ] }),
-            /* @__PURE__ */ jsxs38(DropdownMenu, { children: [
-              /* @__PURE__ */ jsx64(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs38("div", { className: "flex items-center space-x-2", children: [
-                !isMobileView && showName && /* @__PURE__ */ jsx64("h4", { className: "text-[#000000] dark:text-gray-300 text-[13px] font-[500] mb-0", children: userName }),
-                !isMobileView ? /* @__PURE__ */ jsxs38(Fragment22, { children: [
-                  /* @__PURE__ */ jsx64(Avatar, { className: "cursor-pointer h-8 w-8 text-gray-900", children: profileType === "avatar" ? /* @__PURE__ */ jsx64(
+            /* @__PURE__ */ jsxs37(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx63(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs37("div", { className: "flex items-center space-x-2", children: [
+                !isMobileView && showName && /* @__PURE__ */ jsx63("h4", { className: "text-[#000000] dark:text-gray-300 text-[13px] font-[500] mb-0", children: userName }),
+                !isMobileView ? /* @__PURE__ */ jsxs37(Fragment23, { children: [
+                  /* @__PURE__ */ jsx63(Avatar, { className: "cursor-pointer h-8 w-8 text-gray-900", children: profileType === "avatar" ? /* @__PURE__ */ jsx63(
                     AvatarImage,
                     {
                       src: "/images/appbuilder/toolset/profile.svg",
                       alt: "Profile"
                     }
-                  ) : /* @__PURE__ */ jsx64("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__ */ jsx64(
+                  ) : /* @__PURE__ */ jsx63("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__ */ jsx63(
                     Button,
                     {
                       variant: "ghost",
                       size: "icon",
                       className: "text-gray-900 md:hidden dark:invert",
-                      children: /* @__PURE__ */ jsx64(Menu, { className: "h-6 w-6" })
+                      children: /* @__PURE__ */ jsx63(Menu, { className: "h-6 w-6" })
                     }
                   )
-                ] }) : /* @__PURE__ */ jsx64(Button, { variant: "ghost", size: "icon", className: "text-gray-900 dark:invert", children: /* @__PURE__ */ jsx64(Menu, { className: "h-6 w-6" }) })
+                ] }) : /* @__PURE__ */ jsx63(Button, { variant: "ghost", size: "icon", className: "text-gray-900 dark:invert", children: /* @__PURE__ */ jsx63(Menu, { className: "h-6 w-6" }) })
               ] }) }),
-              /* @__PURE__ */ jsxs38(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-gray-800", children: [
-                profileMenu && profileMenu.length > 0 && /* @__PURE__ */ jsx64(Fragment22, { children: profileMenu.map((item) => /* @__PURE__ */ jsx64(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ jsx64(
+              /* @__PURE__ */ jsxs37(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-gray-800", children: [
+                profileMenu && profileMenu.length > 0 && /* @__PURE__ */ jsx63(Fragment23, { children: profileMenu.map((item) => /* @__PURE__ */ jsx63(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ jsx63(
                   Link6,
                   {
                     href: item.url || "#",
@@ -30361,9 +30396,9 @@ function Navbar({
                     children: item.header
                   }
                 ) }, item.id)) }),
-                /* @__PURE__ */ jsxs38("div", { className: "md:hidden", children: [
-                  /* @__PURE__ */ jsx64(DropdownMenuSeparator, {}),
-                  formatedMenu && formatedMenu.length > 0 && /* @__PURE__ */ jsx64(Fragment22, { children: formatedMenu.map((item) => /* @__PURE__ */ jsx64(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ jsx64(
+                /* @__PURE__ */ jsxs37("div", { className: "md:hidden", children: [
+                  /* @__PURE__ */ jsx63(DropdownMenuSeparator, {}),
+                  formatedMenu && formatedMenu.length > 0 && /* @__PURE__ */ jsx63(Fragment23, { children: formatedMenu.map((item) => /* @__PURE__ */ jsx63(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ jsx63(
                     Link6,
                     {
                       href: item.url || "#",
@@ -30378,21 +30413,21 @@ function Navbar({
         ] })
       }
     ),
-    /* @__PURE__ */ jsx64(Dialog, { open: showExitDialog, onOpenChange: setShowExitDialog, children: /* @__PURE__ */ jsxs38(DialogContent, { className: "bg-[#fff]", children: [
-      /* @__PURE__ */ jsxs38(DialogHeader, { children: [
-        /* @__PURE__ */ jsx64(DialogTitle, { children: "Exit Builder?" }),
-        /* @__PURE__ */ jsx64(DialogDescription, { children: "You are about to leave the builder. Any unsaved changes may be lost." })
+    /* @__PURE__ */ jsx63(Dialog, { open: showExitDialog, onOpenChange: setShowExitDialog, children: /* @__PURE__ */ jsxs37(DialogContent, { className: "bg-[#fff]", children: [
+      /* @__PURE__ */ jsxs37(DialogHeader, { children: [
+        /* @__PURE__ */ jsx63(DialogTitle, { children: "Exit Builder?" }),
+        /* @__PURE__ */ jsx63(DialogDescription, { children: "You are about to leave the builder. Any unsaved changes may be lost." })
       ] }),
-      /* @__PURE__ */ jsxs38(DialogFooter, { children: [
-        /* @__PURE__ */ jsx64(Button, { className: "cursor-pointer bg-[#12715b] text-[#fff]", variant: "outline", onClick: () => setShowExitDialog(false), children: "Cancel" }),
-        /* @__PURE__ */ jsx64(Button, { className: "cursor-pointer border-[#12715b] border", onClick: confirmExit, children: "Yes, Exit" })
+      /* @__PURE__ */ jsxs37(DialogFooter, { children: [
+        /* @__PURE__ */ jsx63(Button, { className: "cursor-pointer bg-[#12715b] text-[#fff]", variant: "outline", onClick: () => setShowExitDialog(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx63(Button, { className: "cursor-pointer border-[#12715b] border", onClick: confirmExit, children: "Yes, Exit" })
       ] })
     ] }) })
   ] });
 }
 
 // src/components/Chart/BarChart.tsx
-import React13 from "react";
+import React12 from "react";
 import {
   BarChart,
   Bar,
@@ -30405,35 +30440,35 @@ import {
   ResponsiveContainer,
   Legend
 } from "recharts";
-import { jsx as jsx65, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs38 } from "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__ */ jsx65(
+    return /* @__PURE__ */ jsx64(
       "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__ */ jsx65("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
+        children: /* @__PURE__ */ jsx64("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
       }
     );
   }
-  return /* @__PURE__ */ jsx65("div", { className: `${className} h-[400px]`, style, children: /* @__PURE__ */ jsx65(ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ jsxs39(BarChart, { data, title: "Leads", desc: "content", children: [
-    /* @__PURE__ */ jsx65(CartesianGrid, { strokeDasharray: "3 3" }),
-    /* @__PURE__ */ jsx65(XAxis, { dataKey: "name" }),
-    /* @__PURE__ */ jsx65(YAxis, {}),
-    /* @__PURE__ */ jsx65(Tooltip, { formatter: (value) => `${value}k` }),
-    /* @__PURE__ */ jsx65(Legend, { verticalAlign: legendsPosition, align: "center" }),
-    /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx64("div", { className: `${className} h-[400px]`, style, children: /* @__PURE__ */ jsx64(ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ jsxs38(BarChart, { data, title: "Leads", desc: "content", children: [
+    /* @__PURE__ */ jsx64(CartesianGrid, { strokeDasharray: "3 3" }),
+    /* @__PURE__ */ jsx64(XAxis, { dataKey: "name" }),
+    /* @__PURE__ */ jsx64(YAxis, {}),
+    /* @__PURE__ */ jsx64(Tooltip, { formatter: (value) => `${value}k` }),
+    /* @__PURE__ */ jsx64(Legend, { verticalAlign: legendsPosition, align: "center" }),
+    /* @__PURE__ */ jsx64(
       Bar,
       {
         dataKey: "value",
         fill: "#00695C",
         radius: [6, 6, 0, 0],
         isAnimationActive: false,
-        children: data.map((entry, index) => /* @__PURE__ */ jsx65(
+        children: data.map((entry, index) => /* @__PURE__ */ jsx64(
           "rect",
           {
             fill: entry.color || "#00695C"
@@ -30442,16 +30477,16 @@ var ChartComponent = ({ className, style, loading, ...props }) => {
         ))
       }
     )
-  ] }) : /* @__PURE__ */ jsxs39(AreaChart, { data, children: [
-    /* @__PURE__ */ jsx65("defs", { children: /* @__PURE__ */ jsxs39("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-      /* @__PURE__ */ jsx65("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
-      /* @__PURE__ */ jsx65("stop", { offset: "95%", stopColor: "#00695C", stopOpacity: 0 })
+  ] }) : /* @__PURE__ */ jsxs38(AreaChart, { data, children: [
+    /* @__PURE__ */ jsx64("defs", { children: /* @__PURE__ */ jsxs38("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx64("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
+      /* @__PURE__ */ jsx64("stop", { offset: "95%", stopColor: "#00695C", stopOpacity: 0 })
     ] }) }),
-    /* @__PURE__ */ jsx65(CartesianGrid, { strokeDasharray: "3 3" }),
-    /* @__PURE__ */ jsx65(XAxis, { dataKey: "name" }),
-    /* @__PURE__ */ jsx65(YAxis, {}),
-    /* @__PURE__ */ jsx65(Tooltip, { formatter: (value) => `${value}k` }),
-    /* @__PURE__ */ jsx65(
+    /* @__PURE__ */ jsx64(CartesianGrid, { strokeDasharray: "3 3" }),
+    /* @__PURE__ */ jsx64(XAxis, { dataKey: "name" }),
+    /* @__PURE__ */ jsx64(YAxis, {}),
+    /* @__PURE__ */ jsx64(Tooltip, { formatter: (value) => `${value}k` }),
+    /* @__PURE__ */ jsx64(
       Area,
       {
         type: "monotone",
@@ -30464,10 +30499,10 @@ var ChartComponent = ({ className, style, loading, ...props }) => {
     )
   ] }) }) });
 };
-var BarChart_default = React13.memo(ChartComponent);
+var BarChart_default = React12.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
-import React14, { useEffect as useEffect25, useMemo as useMemo6, useState as useState11 } from "react";
+import React13, { useEffect as useEffect25, useMemo as useMemo7, useState as useState11 } from "react";
 import {
   PieChart,
   Pie,
@@ -30476,7 +30511,7 @@ import {
   Tooltip as Tooltip2,
   LabelList
 } from "recharts";
-import { Fragment as Fragment23, jsx as jsx66, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx65, jsxs as jsxs39 } from "react/jsx-runtime";
 var getRandomColor = () => {
   const palette = [
     "#2563eb",
@@ -30496,32 +30531,32 @@ var DonutChart = ({ className, style, loading, ...props }) => {
   const showLegends = props.showLegends ?? true;
   const labelType = props.labelType || "inside";
   const canvasMode = props.canvasMode;
-  const data = useMemo6(() => {
+  const data = useMemo7(() => {
     if (!Array.isArray(props.data)) return [];
     return props.data.map((item) => ({ ...item, color: getRandomColor() }));
   }, [props.data]);
-  const total = useMemo6(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
+  const total = useMemo7(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
   const forceMobile = canvasMode === "mobile" || canvasMode === "tablet";
   const [mounted, setMounted] = useState11(false);
   useEffect25(() => {
     const timeout = setTimeout(() => setMounted(true), 100);
     return () => clearTimeout(timeout);
   }, []);
-  const renderLegends = useMemo6(() => {
+  const renderLegends = useMemo7(() => {
     if (!showLegends) return null;
-    return /* @__PURE__ */ jsx66(Fragment23, { children: data.map((d) => /* @__PURE__ */ jsxs40(
+    return /* @__PURE__ */ jsx65(Fragment24, { children: data.map((d) => /* @__PURE__ */ jsxs39(
       "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__ */ jsx66(
+          /* @__PURE__ */ jsx65(
             "span",
             {
               className: "inline-block w-[16px] h-[16px] rounded",
               style: { backgroundColor: d.color }
             }
           ),
-          /* @__PURE__ */ jsx66("span", { className: "text-[#000000] text-[12px] md:text-[13px] font-[500]", children: d.name })
+          /* @__PURE__ */ jsx65("span", { className: "text-[#000000] text-[12px] md:text-[13px] font-[500]", children: d.name })
         ]
       },
       d.name
@@ -30529,24 +30564,24 @@ var DonutChart = ({ className, style, loading, ...props }) => {
   }, [data, showLegends]);
   if (!mounted) return null;
   if (loading || data.length === 0) {
-    return /* @__PURE__ */ jsx66(
+    return /* @__PURE__ */ jsx65(
       "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__ */ jsx66("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
+        children: /* @__PURE__ */ jsx65("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
       }
     );
   }
-  return /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
       className: `relative flex flex-col items-center ${className}`,
       style,
       children: [
-        /* @__PURE__ */ jsxs40("div", { className: "relative w-full md:w-[70%] h-[300px] md:h-[400px] flex items-center justify-center", children: [
-          /* @__PURE__ */ jsx66(ResponsiveContainer2, { width: "99%", height: "100%", children: /* @__PURE__ */ jsxs40(PieChart, { children: [
-            /* @__PURE__ */ jsxs40(
+        /* @__PURE__ */ jsxs39("div", { className: "relative w-full md:w-[70%] h-[300px] md:h-[400px] flex items-center justify-center", children: [
+          /* @__PURE__ */ jsx65(ResponsiveContainer2, { width: "99%", height: "100%", children: /* @__PURE__ */ jsxs39(PieChart, { children: [
+            /* @__PURE__ */ jsxs39(
               Pie,
               {
                 data,
@@ -30558,8 +30593,8 @@ var DonutChart = ({ className, style, loading, ...props }) => {
                 labelLine: false,
                 isAnimationActive: false,
                 children: [
-                  data.map((entry, index) => /* @__PURE__ */ jsx66(Cell, { fill: entry.color }, `cell-${index}`)),
-                  /* @__PURE__ */ jsx66(
+                  data.map((entry, index) => /* @__PURE__ */ jsx65(Cell, { fill: entry.color }, `cell-${index}`)),
+                  /* @__PURE__ */ jsx65(
                     LabelList,
                     {
                       dataKey: "value",
@@ -30572,14 +30607,14 @@ var DonutChart = ({ className, style, loading, ...props }) => {
                 ]
               }
             ),
-            /* @__PURE__ */ jsx66(
+            /* @__PURE__ */ jsx65(
               Tooltip2,
               {
                 formatter: (value, name) => [`${value}k`, name]
               }
             )
           ] }) }),
-          /* @__PURE__ */ jsxs40(
+          /* @__PURE__ */ jsxs39(
             "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]`,
@@ -30590,18 +30625,18 @@ var DonutChart = ({ className, style, loading, ...props }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx66("div", { className: "flex flex-wrap justify-center gap-2 mt-6 w-full md:w-auto", children: renderLegends })
+        /* @__PURE__ */ jsx65("div", { className: "flex flex-wrap justify-center gap-2 mt-6 w-full md:w-auto", children: renderLegends })
       ]
     }
   );
 };
-var PieChart_default = React14.memo(DonutChart);
+var PieChart_default = React13.memo(DonutChart);
 
 // src/components/Blocks/EmailComposer.tsx
-import { jsx as jsx67, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs40 } from "react/jsx-runtime";
 function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc, setShowBcc, cc, setCc, bcc, setBcc, subject, setSubject, body, setBody }) {
-  return /* @__PURE__ */ jsx67("div", { className, style, children: /* @__PURE__ */ jsxs41("div", { className: "border rounded-md shadow bg-[#fff] p-4 mx-auto z-[50] relative", children: [
-    /* @__PURE__ */ jsx67("div", { className: "mb-3", children: /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx66("div", { className, style, children: /* @__PURE__ */ jsxs40("div", { className: "border rounded-md shadow bg-[#fff] p-4 mx-auto z-[50] relative", children: [
+    /* @__PURE__ */ jsx66("div", { className: "mb-3", children: /* @__PURE__ */ jsx66(
       "input",
       {
         type: "email",
@@ -30610,8 +30645,8 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         required: true
       }
     ) }),
-    /* @__PURE__ */ jsx67("div", { className: "mb-3", children: /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx67(
+    /* @__PURE__ */ jsx66("div", { className: "mb-3", children: /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx66(
         "input",
         {
           type: "email",
@@ -30622,7 +30657,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
           required: true
         }
       ),
-      !showCc && /* @__PURE__ */ jsx67(
+      !showCc && /* @__PURE__ */ jsx66(
         "button",
         {
           onClick: () => setShowCc?.(true),
@@ -30630,7 +30665,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
           children: "Cc"
         }
       ),
-      !showBcc && /* @__PURE__ */ jsx67(
+      !showBcc && /* @__PURE__ */ jsx66(
         "button",
         {
           onClick: () => setShowBcc?.(true),
@@ -30639,7 +30674,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         }
       )
     ] }) }),
-    showCc && /* @__PURE__ */ jsx67("div", { className: "mb-3", children: /* @__PURE__ */ jsx67(
+    showCc && /* @__PURE__ */ jsx66("div", { className: "mb-3", children: /* @__PURE__ */ jsx66(
       "input",
       {
         type: "text",
@@ -30649,7 +30684,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__ */ jsx67("div", { className: "mb-3", children: /* @__PURE__ */ jsx67(
+    showBcc && /* @__PURE__ */ jsx66("div", { className: "mb-3", children: /* @__PURE__ */ jsx66(
       "input",
       {
         type: "text",
@@ -30659,7 +30694,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__ */ jsx67("div", { className: "mb-3", children: /* @__PURE__ */ jsx67(
+    /* @__PURE__ */ jsx66("div", { className: "mb-3", children: /* @__PURE__ */ jsx66(
       "input",
       {
         type: "text",
@@ -30669,11 +30704,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__ */ jsx67("div", { className: "mb-4", children: /* @__PURE__ */ jsx67(MyEditor, { value: body, onChange: setBody }) }),
-    /* @__PURE__ */ jsxs41("div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ jsx67("button", { className: "px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100", children: "Discard" }),
-      /* @__PURE__ */ jsx67("button", { className: "px-4 py-2 rounded-md border text-[#12715B] border-[#12715B]", children: "Reset" }),
-      /* @__PURE__ */ jsx67("button", { className: "px-4 py-2 rounded-md bg-[#12715B] text-white", children: "Send" })
+    /* @__PURE__ */ jsx66("div", { className: "mb-4", children: /* @__PURE__ */ jsx66(MyEditor, { value: body, onChange: setBody }) }),
+    /* @__PURE__ */ jsxs40("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx66("button", { className: "px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100", children: "Discard" }),
+      /* @__PURE__ */ jsx66("button", { className: "px-4 py-2 rounded-md border text-[#12715B] border-[#12715B]", children: "Reset" }),
+      /* @__PURE__ */ jsx66("button", { className: "px-4 py-2 rounded-md bg-[#12715B] text-white", children: "Send" })
     ] })
   ] }) });
 }
@@ -30718,10 +30753,10 @@ function showSonnerToast({
 // src/components/ui/sonner.tsx
 import { useTheme } from "next-themes";
 import { Toaster as Sonner } from "sonner";
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
 var Toaster = ({ ...props }) => {
   const { theme = "system" } = useTheme();
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx67(
     Sonner,
     {
       theme,
@@ -30756,7 +30791,7 @@ export {
   Image_default as Image,
   Modal,
   MultiCheckbox_default as MultiCheckbox,
-  MultiSelect_default as MultiSelect,
+  LazyMultiSelectDropdown as MultiSelect,
   Navbar,
   NumberInput_default as NumberInput,
   Pagination_default as Pagination,