@algorithm-shift/design-system 1.2.78 → 1.2.80

package/dist/index.mjs

@@ -233,7 +233,7 @@ function Repeater({
     [items, count]
   );
   if (!list.length) {
-    return emptyFallback ? /* @__PURE__ */ jsx10(Fragment2, { children: emptyFallback }) : null;
+    return emptyFallback ? /* @__PURE__ */ jsx10(Fragment2, { children: emptyFallback }) : /* @__PURE__ */ jsx10("div", { className, children: "No items to display." });
   }
   const content = list.map((item, i) => /* @__PURE__ */ jsx10(React3.Fragment, { children: render(item, i, list) }, i));
   return wrapper ? /* @__PURE__ */ jsx10(Fragment2, { children: wrapper(content) }) : /* @__PURE__ */ jsx10("div", { className, children: content });
@@ -27505,7 +27505,7 @@ function RichText({ className, style, ...props }) {
 }
 
 // src/components/Inputs/Dropdown/Dropdown.tsx
-import { useEffect as useEffect13 } from "react";
+import { useEffect as useEffect15 } from "react";
 
 // src/components/ui/select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
@@ -27633,15 +27633,269 @@ function SelectScrollDownButton({
   );
 }
 
-// src/components/Inputs/Dropdown/Dropdown.tsx
+// src/components/Inputs/Dropdown/LazyDropdown.tsx
+import { useState as useState5, useRef as useRef3, useEffect as useEffect14 } from "react";
+
+// src/components/Wrappers/Portal.tsx
+import ReactDOM from "react-dom";
+var Portal3 = ({ children, container }) => {
+  const target = container || document.body;
+  return ReactDOM.createPortal(children, target);
+};
+var Portal_default = Portal3;
+
+// src/hooks/useLazyDropdown.ts
+import { useState as useState4, useEffect as useEffect13, useRef as useRef2, useCallback as useCallback2 } from "react";
+import axios from "axios";
+function useLazyDropdown(config) {
+  const [options, setOptions] = useState4([]);
+  const [page, setPage] = useState4(1);
+  const [hasMore, setHasMore] = useState4(true);
+  const [loading, setLoading] = useState4(false);
+  const [searchTerm, setSearchTerm] = useState4("");
+  const debounceTimer = useRef2(null);
+  const allDataRef = useRef2([]);
+  const configRef = useRef2(config);
+  const PAGE_SIZE = config.pageSize || 10;
+  useEffect13(() => {
+    configRef.current = config;
+  }, [config]);
+  const transformToOptions = useCallback2((data) => {
+    if (!data || !Array.isArray(data)) return [];
+    const cfg = configRef.current;
+    return data.map((item) => ({
+      value: item[cfg.dataKey] ?? item.id ?? "",
+      label: item[cfg.dataLabel] ?? item.name ?? item.label ?? ""
+    }));
+  }, []);
+  const fetchApiData = useCallback2(async (pageNum, term) => {
+    if (!configRef.current.apiUrl) return [];
+    const limit = PAGE_SIZE;
+    const params = { page: pageNum, limit };
+    if (term) params[configRef.current.dataLabel ?? "search"] = term;
+    const res = await axios.get(configRef.current.apiUrl, {
+      params,
+      withCredentials: true
+    });
+    if (res.data?.success && Array.isArray(res.data.data)) {
+      const data = res.data.data;
+      return transformToOptions(data);
+    }
+    return [];
+  }, [PAGE_SIZE, transformToOptions]);
+  const loadPage = useCallback2(async (pageNum, term) => {
+    const cfg = configRef.current;
+    if (!cfg.enabled) return;
+    setLoading(true);
+    try {
+      let pageOptions = [];
+      if (cfg.dataSource === "api") {
+        pageOptions = await fetchApiData(pageNum, term);
+        setHasMore(pageOptions.length === PAGE_SIZE);
+      } else {
+        const allData = allDataRef.current || [];
+        let filtered = allData;
+        if (term) {
+          const termLower = term.toLowerCase();
+          filtered = allData.filter((item) => {
+            const label = String(item[cfg.dataLabel] ?? item.name ?? item.label ?? "").toLowerCase();
+            const value = String(item[cfg.dataKey] ?? item.id ?? "").toLowerCase();
+            return label.includes(termLower) || value.includes(termLower);
+          });
+        }
+        const start = (pageNum - 1) * PAGE_SIZE;
+        const end = start + PAGE_SIZE;
+        pageOptions = transformToOptions(filtered.slice(start, end));
+        setHasMore(end < filtered.length);
+      }
+      setOptions((prev) => pageNum === 1 ? pageOptions : [...prev, ...pageOptions]);
+      setPage(pageNum);
+    } catch (err) {
+      console.error("\u274C useLazyDropdown loadPage error:", err);
+      setHasMore(false);
+    } finally {
+      setLoading(false);
+    }
+  }, [fetchApiData, transformToOptions]);
+  const loadMore = useCallback2(() => {
+    if (!loading && hasMore) {
+      loadPage(page + 1, searchTerm);
+    }
+  }, [loading, hasMore, page, searchTerm, loadPage]);
+  const search = useCallback2((term) => {
+    setSearchTerm(term);
+    if (debounceTimer.current) clearTimeout(debounceTimer.current);
+    debounceTimer.current = setTimeout(() => {
+      loadPage(1, term);
+    }, 300);
+  }, [loadPage]);
+  const reset = useCallback2(() => {
+    setSearchTerm("");
+    setPage(1);
+    loadPage(1, "");
+  }, [loadPage]);
+  useEffect13(() => {
+    if (config.initialData?.length) {
+      allDataRef.current = config.initialData;
+      loadPage(1, "");
+    }
+  }, [config.initialData, loadPage]);
+  useEffect13(() => {
+    return () => {
+      if (debounceTimer.current) clearTimeout(debounceTimer.current);
+    };
+  }, []);
+  return {
+    options,
+    loading,
+    hasMore,
+    loadMore,
+    search,
+    reset
+  };
+}
+
+// src/components/Inputs/Dropdown/LazyDropdown.tsx
 import { Fragment as Fragment11, jsx as jsx36, jsxs as jsxs18 } from "react/jsx-runtime";
+function LazySelectDropdown({
+  options = [],
+  value,
+  onChange,
+  placeholder,
+  className,
+  id,
+  disabled,
+  readOnly,
+  source,
+  apiUrl,
+  pageSize,
+  dataKey = "id",
+  dataLabel = "name",
+  errorMessage
+}) {
+  const [isOpen, setIsOpen] = useState5(false);
+  const [searchTerm, setSearchTerm] = useState5("");
+  const dropdownRef = useRef3(null);
+  const observerTarget = useRef3(null);
+  const {
+    options: lazyOptions,
+    loading,
+    hasMore,
+    loadMore,
+    search,
+    reset
+  } = useLazyDropdown({
+    enabled: true,
+    dataSource: source || "",
+    apiUrl,
+    pageSize: pageSize || 10,
+    dataKey,
+    dataLabel,
+    initialData: options || []
+  });
+  const selectedOption = lazyOptions.find((opt) => opt.value === value);
+  useEffect14(() => {
+    const handleClickOutside = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsOpen(false);
+        setSearchTerm("");
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  useEffect14(() => {
+    if (!isOpen || !hasMore || loading) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) loadMore();
+      },
+      { threshold: 0.1 }
+    );
+    if (observerTarget.current) observer.observe(observerTarget.current);
+    return () => observer.disconnect();
+  }, [isOpen, hasMore, loading, loadMore]);
+  const handleSearchChange = (e) => {
+    const term = e.target.value;
+    setSearchTerm(term);
+    search(term);
+  };
+  const handleSelect = (optValue) => {
+    onChange?.(optValue);
+    setIsOpen(false);
+    setSearchTerm("");
+    reset();
+  };
+  const handleFocus = () => {
+    if (!disabled) setIsOpen(true);
+  };
+  return /* @__PURE__ */ jsxs18("div", { ref: dropdownRef, className: "relative w-full", children: [
+    /* @__PURE__ */ jsx36(
+      "input",
+      {
+        type: "text",
+        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",
+          disabled ? "bg-gray-100 cursor-not-allowed" : "bg-white cursor-pointer",
+          className,
+          errorMessage ? "border-red-500" : ""
+        ),
+        placeholder: selectedOption?.label || placeholder,
+        value: isOpen ? searchTerm : selectedOption?.label || "",
+        onFocus: handleFocus,
+        onChange: handleSearchChange,
+        readOnly: !isOpen || readOnly,
+        disabled
+      }
+    ),
+    errorMessage && /* @__PURE__ */ jsx36("p", { className: "mt-1 text-xs text-red-500", children: errorMessage }),
+    isOpen && !disabled && /* @__PURE__ */ jsx36(Portal_default, { container: dropdownRef.current, children: /* @__PURE__ */ jsx36(
+      "div",
+      {
+        className: "fixed z-[9999] w-fit mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto",
+        style: { width: dropdownRef.current?.offsetWidth },
+        children: loading && lazyOptions.length === 0 ? /* @__PURE__ */ jsxs18("div", { className: "px-3 py-4 text-center text-gray-500 flex items-center justify-center gap-2 text-sm", children: [
+          /* @__PURE__ */ jsx36("div", { className: "animate-spin w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full" }),
+          "Loading..."
+        ] }) : lazyOptions.length > 0 ? /* @__PURE__ */ jsxs18(Fragment11, { children: [
+          lazyOptions.map((option, index) => /* @__PURE__ */ jsx36(
+            "div",
+            {
+              onClick: () => handleSelect(option.value),
+              className: `px-3 py-2 hover:bg-blue-50 cursor-pointer text-sm ${option.value === value ? "bg-blue-100" : ""}`,
+              children: option.label
+            },
+            `${option.value}-${index}`
+          )),
+          hasMore && /* @__PURE__ */ jsx36(
+            "div",
+            {
+              ref: observerTarget,
+              className: "px-3 py-2 text-center text-gray-400 text-sm border-t",
+              children: loading ? /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-center gap-2 text-sm", children: [
+                /* @__PURE__ */ jsx36("div", { className: "animate-spin w-3 h-3 border-2 border-gray-300 border-t-blue-500 rounded-full" }),
+                "Loading more..."
+              ] }) : "Scroll for more..."
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx36("div", { className: "px-3 py-4 text-sm text-center text-gray-500", children: searchTerm ? `No results for "${searchTerm}"` : "No options available" })
+      }
+    ) })
+  ] });
+}
+var LazyDropdown_default = LazySelectDropdown;
+
+// src/components/Inputs/Dropdown/Dropdown.tsx
+import { Fragment as Fragment12, jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
 var Dropdown = ({ className, style, ...props }) => {
   const list = Array.isArray(props?.data) ? props.data : [];
-  const placeholder = props.placeholder ? props.placeholder : "Placeholder text";
+  const placeholder = props.placeholder ? props.placeholder : "Select an option";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
-  useEffect13(() => {
+  useEffect15(() => {
     if (props.value !== void 0) {
       handleChange(props.value);
     }
@@ -27655,9 +27909,25 @@ var Dropdown = ({ className, style, ...props }) => {
     value: item[dataKey],
     label: item[dataLabel]
   }));
-  return /* @__PURE__ */ jsxs18(Fragment11, { children: [
-    /* @__PURE__ */ jsxs18(Select, { name: props.name, value: props.value || "", onValueChange: handleChange, disabled: isDisabled || !isEditable, children: [
-      /* @__PURE__ */ jsx36(
+  if (props.lazyLoad) {
+    return /* @__PURE__ */ jsx37(
+      LazyDropdown_default,
+      {
+        ...props,
+        id: props.name || "lazy-select-field",
+        options: list,
+        onChange: handleChange,
+        placeholder,
+        className,
+        style,
+        disabled: isDisabled || !isEditable,
+        readOnly: isReadonly
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs19(Fragment12, { children: [
+    /* @__PURE__ */ jsxs19(Select, { name: props.name, value: props.value || "", onValueChange: handleChange, disabled: isDisabled || !isEditable, children: [
+      /* @__PURE__ */ jsx37(
         SelectTrigger,
         {
           id: props.name || "select-field",
@@ -27667,31 +27937,31 @@ var Dropdown = ({ className, style, ...props }) => {
             borderColor: props.errorMessage ? "#f87171" : style?.borderColor
           },
           "aria-readonly": isReadonly,
-          children: /* @__PURE__ */ jsx36(SelectValue, { placeholder })
+          children: /* @__PURE__ */ jsx37(SelectValue, { placeholder })
         }
       ),
-      /* @__PURE__ */ jsxs18(SelectContent, { children: [
-        props.dataLoading && /* @__PURE__ */ jsx36(SelectItem, { value: "none", disabled: true, children: "Loading..." }),
-        !props.dataLoading && options.length === 0 && /* @__PURE__ */ jsx36(SelectItem, { value: "none", disabled: true, children: "No options" }),
-        options.map((opt) => /* @__PURE__ */ jsx36(SelectItem, { value: opt.value, children: opt.label }, opt.value))
+      /* @__PURE__ */ jsxs19(SelectContent, { children: [
+        props.dataLoading && /* @__PURE__ */ jsx37(SelectItem, { value: "none", disabled: true, children: "Loading..." }),
+        !props.dataLoading && options.length === 0 && /* @__PURE__ */ jsx37(SelectItem, { value: "none", disabled: true, children: "No options" }),
+        options.map((opt) => /* @__PURE__ */ jsx37(SelectItem, { value: opt.value, children: opt.label }, opt.value))
       ] })
     ] }),
-    props.errorMessage && /* @__PURE__ */ jsx36("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ jsx37("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var Dropdown_default = Dropdown;
 
 // src/components/Inputs/SwitchToggle/SwitchToggle.tsx
-import { useEffect as useEffect14 } from "react";
+import { useEffect as useEffect16 } from "react";
 
 // src/components/ui/switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function Switch({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     SwitchPrimitive.Root,
     {
       "data-slot": "switch",
@@ -27700,7 +27970,7 @@ function Switch({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx37(
+      children: /* @__PURE__ */ jsx38(
         SwitchPrimitive.Thumb,
         {
           "data-slot": "switch-thumb",
@@ -27714,11 +27984,11 @@ function Switch({
 }
 
 // src/components/Inputs/SwitchToggle/SwitchToggle.tsx
-import { Fragment as Fragment12, jsx as jsx38, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
 var SwitchToggle = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
-  useEffect14(() => {
+  useEffect16(() => {
     if (props.value !== void 0) {
       handleChange?.(props.value);
     }
@@ -27726,9 +27996,9 @@ var SwitchToggle = ({ className, style, ...props }) => {
   const handleChange = (value) => {
     props.onChange?.(value);
   };
-  return /* @__PURE__ */ jsxs19(Fragment12, { children: [
-    /* @__PURE__ */ jsx38("div", { className, style, children: /* @__PURE__ */ jsxs19("div", { className: "flex items-center space-x-2 mb-2", children: [
-      /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsxs20(Fragment13, { children: [
+    /* @__PURE__ */ jsx39("div", { className, style, children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center space-x-2 mb-2", children: [
+      /* @__PURE__ */ jsx39(
         Switch,
         {
           id: props.name || "switch",
@@ -27737,23 +28007,23 @@ var SwitchToggle = ({ className, style, ...props }) => {
           disabled: isDisabled || !isEditable
         }
       ),
-      /* @__PURE__ */ jsx38(Label2, { htmlFor: props.name || "switch", children: props.text })
+      /* @__PURE__ */ jsx39(Label2, { htmlFor: props.name || "switch", children: props.text })
     ] }) }),
-    props.errorMessage && /* @__PURE__ */ jsx38("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ jsx39("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var SwitchToggle_default = SwitchToggle;
 
 // src/components/Inputs/PhoneInput/PhoneInput.tsx
-import { useEffect as useEffect15 } from "react";
+import { useEffect as useEffect17 } from "react";
 import { PhoneInput as PhoneInputField } from "react-international-phone";
 import "react-international-phone/style.css";
-import { Fragment as Fragment13, jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
 var PhoneInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Enter phone number";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
-  useEffect15(() => {
+  useEffect17(() => {
     if (props.value !== void 0) {
       handleChange?.(props.value);
     }
@@ -27761,8 +28031,8 @@ var PhoneInput = ({ className, style, ...props }) => {
   const handleChange = (val) => {
     props.onChange?.(val);
   };
-  return /* @__PURE__ */ jsxs20(Fragment13, { children: [
-    /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsxs21(Fragment14, { children: [
+    /* @__PURE__ */ jsx40(
       PhoneInputField,
       {
         defaultCountry: "in",
@@ -27786,21 +28056,21 @@ var PhoneInput = ({ className, style, ...props }) => {
         disabled: isDisabled || !isEditable
       }
     ),
-    props.errorMessage && /* @__PURE__ */ jsx39("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ jsx40("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var PhoneInput_default = PhoneInput;
 
 // src/components/Inputs/SearchInput/SearchInput.tsx
-import { useEffect as useEffect16 } from "react";
-import { Fragment as Fragment14, jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useEffect as useEffect18 } from "react";
+import { Fragment as Fragment15, jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
 var SearchInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  useEffect16(() => {
+  useEffect18(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -27809,8 +28079,8 @@ var SearchInput = ({ className, style, ...props }) => {
   const handleChange = (e) => {
     props.onChange?.(e);
   };
-  return /* @__PURE__ */ jsxs21(Fragment14, { children: [
-    /* @__PURE__ */ jsx40("div", { className: "flex justify-start items-center relative", children: /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsxs22(Fragment15, { children: [
+    /* @__PURE__ */ jsx41("div", { className: "flex justify-start items-center relative", children: /* @__PURE__ */ jsx41(
       Input,
       {
         type: "text",
@@ -27829,17 +28099,17 @@ var SearchInput = ({ className, style, ...props }) => {
         readOnly: isReadonly
       }
     ) }),
-    props.errorMessage && /* @__PURE__ */ jsx40("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ jsx41("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var SearchInput_default = SearchInput;
 
 // src/components/Inputs/FileInput/FileInput.tsx
-import { useEffect as useEffect17 } from "react";
-import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
+import { useEffect as useEffect19 } from "react";
+import { jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
 var FileInput2 = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
-  useEffect17(() => {
+  useEffect19(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -27848,8 +28118,8 @@ var FileInput2 = ({ className, style, ...props }) => {
   const handleChange = (e) => {
     props.onChange?.(e);
   };
-  return /* @__PURE__ */ jsxs22("div", { className: "d-flex items-center relative align-middle", children: [
-    /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsxs23("div", { className: "d-flex items-center relative align-middle", children: [
+    /* @__PURE__ */ jsx42(
       Input,
       {
         type: "file",
@@ -27866,14 +28136,14 @@ var FileInput2 = ({ className, style, ...props }) => {
         onChange: handleChange
       }
     ),
-    props.errorMessage && /* @__PURE__ */ jsx41("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ jsx42("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var FileInput_default = FileInput2;
 
 // src/components/Inputs/DatePicker/DatePicker.tsx
-import { useEffect as useEffect18 } from "react";
-import { Fragment as Fragment15, jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
+import { useEffect as useEffect20 } from "react";
+import { Fragment as Fragment16, jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
 function DatePicker({ className, style, ...props }) {
   const placeholder = props.placeholder ?? "Placeholder text";
   const minimumDate = props.minimumDate ?? "none";
@@ -27898,7 +28168,7 @@ function DatePicker({ className, style, ...props }) {
   };
   const minDate = resolveDate(minimumDate, customMinimumDate);
   const maxDate = resolveDate(maximumDate, customMaximumDate);
-  useEffect18(() => {
+  useEffect20(() => {
     if (props.value !== void 0) {
       handleChange(props.value);
     }
@@ -27910,8 +28180,8 @@ function DatePicker({ className, style, ...props }) {
     if (!value) return "";
     return new Date(value).toISOString().split("T")[0];
   };
-  return /* @__PURE__ */ jsxs23(Fragment15, { children: [
-    /* @__PURE__ */ jsx42("div", { className: "flex justify-start items-center relative", children: /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsxs24(Fragment16, { children: [
+    /* @__PURE__ */ jsx43("div", { className: "flex justify-start items-center relative", children: /* @__PURE__ */ jsx43(
       Input,
       {
         type: "date",
@@ -27936,18 +28206,18 @@ function DatePicker({ className, style, ...props }) {
         max: maxDate
       }
     ) }),
-    props.errorMessage && /* @__PURE__ */ jsx42("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ jsx43("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 }
 
 // src/components/Inputs/DateRange/DateRange.tsx
-import React7, { useEffect as useEffect20 } from "react";
+import React7, { useEffect as useEffect22 } from "react";
 import { addDays, format } from "date-fns";
 
 // src/components/ui/calendar.tsx
 import * as React6 from "react";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 function Calendar2({
   className,
   classNames,
@@ -27959,7 +28229,7 @@ function Calendar2({
   ...props
 }) {
   const defaultClassNames = getDefaultClassNames();
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     DayPicker,
     {
       showOutsideDays,
@@ -28058,7 +28328,7 @@ function Calendar2({
       },
       components: {
         Root: ({ className: className2, rootRef, ...props2 }) => {
-          return /* @__PURE__ */ jsx43(
+          return /* @__PURE__ */ jsx44(
             "div",
             {
               "data-slot": "calendar",
@@ -28070,10 +28340,10 @@ function Calendar2({
         },
         Chevron: ({ className: className2, orientation, ...props2 }) => {
           if (orientation === "left") {
-            return /* @__PURE__ */ jsx43(ChevronLeft, { className: cn("size-4", className2), ...props2 });
+            return /* @__PURE__ */ jsx44(ChevronLeft, { className: cn("size-4", className2), ...props2 });
           }
           if (orientation === "right") {
-            return /* @__PURE__ */ jsx43(
+            return /* @__PURE__ */ jsx44(
               ChevronRight,
               {
                 className: cn("size-4", className2),
@@ -28081,11 +28351,11 @@ function Calendar2({
               }
             );
           }
-          return /* @__PURE__ */ jsx43(ChevronDown, { className: cn("size-4", className2), ...props2 });
+          return /* @__PURE__ */ jsx44(ChevronDown, { className: cn("size-4", className2), ...props2 });
         },
         DayButton: CalendarDayButton,
         WeekNumber: ({ children, ...props2 }) => {
-          return /* @__PURE__ */ jsx43("td", { ...props2, children: /* @__PURE__ */ jsx43("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
+          return /* @__PURE__ */ jsx44("td", { ...props2, children: /* @__PURE__ */ jsx44("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
         },
         ...components
       },
@@ -28104,7 +28374,7 @@ function CalendarDayButton({
   React6.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     Button,
     {
       ref,
@@ -28127,16 +28397,16 @@ function CalendarDayButton({
 
 // src/components/ui/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ jsx44(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ jsx45(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx44(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ jsx45(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({
   className,
@@ -28144,7 +28414,7 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx44(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx45(
     PopoverPrimitive.Content,
     {
       "data-slot": "popover-content",
@@ -28160,7 +28430,7 @@ function PopoverContent({
 }
 
 // src/components/Inputs/DateRange/DateRange.tsx
-import { Fragment as Fragment16, jsx as jsx45, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx46, jsxs as jsxs25 } from "react/jsx-runtime";
 var DateRange = ({ className, style, ...props }) => {
   const isDateRange = (val) => !!val && val.from instanceof Date;
   const [date, setDate] = React7.useState(
@@ -28169,7 +28439,7 @@ var DateRange = ({ className, style, ...props }) => {
       to: addDays(/* @__PURE__ */ new Date(), 7)
     }
   );
-  useEffect20(() => {
+  useEffect22(() => {
     if (props.value && isDateRange(props.value)) {
       handleChange?.(props.value);
     }
@@ -28180,9 +28450,9 @@ var DateRange = ({ className, style, ...props }) => {
       props.onChange?.(value);
     }
   };
-  return /* @__PURE__ */ jsxs24(Fragment16, { children: [
-    /* @__PURE__ */ jsx45("div", { className, style, children: /* @__PURE__ */ jsxs24(Popover, { children: [
-      /* @__PURE__ */ jsx45(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsxs25(Fragment17, { children: [
+    /* @__PURE__ */ jsx46("div", { className, style, children: /* @__PURE__ */ jsxs25(Popover, { children: [
+      /* @__PURE__ */ jsx46(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx46(
         Button,
         {
           id: "date",
@@ -28191,15 +28461,15 @@ var DateRange = ({ className, style, ...props }) => {
             "w-full justify-start text-left font-normal text-[11px] border-[#BDBDBD]",
             !date && "text-muted-foreground"
           ),
-          children: date?.from ? date.to ? /* @__PURE__ */ jsxs24(Fragment16, { children: [
+          children: date?.from ? date.to ? /* @__PURE__ */ jsxs25(Fragment17, { children: [
             format(date.from, "LLL dd, y"),
             " -",
             " ",
             format(date.to, "LLL dd, y")
-          ] }) : format(date.from, "LLL dd, y") : /* @__PURE__ */ jsx45("span", { children: "Pick a date range" })
+          ] }) : format(date.from, "LLL dd, y") : /* @__PURE__ */ jsx46("span", { children: "Pick a date range" })
         }
       ) }),
-      /* @__PURE__ */ jsx45(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsx46(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx46(
         Calendar2,
         {
           mode: "range",
@@ -28210,21 +28480,21 @@ var DateRange = ({ className, style, ...props }) => {
         }
       ) })
     ] }) }),
-    props.errorMessage && /* @__PURE__ */ jsx45("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ jsx46("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var DateRange_default = DateRange;
 
 // src/components/Inputs/TextInputGroup/TextInputGroup.tsx
-import { useEffect as useEffect21 } from "react";
-import { Fragment as Fragment17, jsx as jsx46, jsxs as jsxs25 } from "react/jsx-runtime";
+import { useEffect as useEffect23 } from "react";
+import { Fragment as Fragment18, jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
 var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  useEffect21(() => {
+  useEffect23(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -28233,8 +28503,8 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
   const handleChange = (e) => {
     props.onChange?.(e);
   };
-  return /* @__PURE__ */ jsxs25(Fragment17, { children: [
-    /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(Fragment18, { children: [
+    /* @__PURE__ */ jsxs26(
       "div",
       {
         className: cn(
@@ -28244,8 +28514,8 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
           props.errorMessage ? "border-red-500" : ""
         ),
         children: [
-          prepend && /* @__PURE__ */ jsx46("div", { className: "px-3 flex items-center bg-gray-500 text-white h-10 rounded-l-md", children: prepend }),
-          /* @__PURE__ */ jsx46(
+          prepend && /* @__PURE__ */ jsx47("div", { className: "px-3 flex items-center bg-gray-500 text-white h-10 rounded-l-md", children: prepend }),
+          /* @__PURE__ */ jsx47(
             Input,
             {
               id: props.name || "prepend-input",
@@ -28267,11 +28537,11 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
               readOnly: isReadonly
             }
           ),
-          append && /* @__PURE__ */ jsx46("div", { className: "px-3 flex items-center bg-gray-500 text-white h-10 rounded-r-md", children: append })
+          append && /* @__PURE__ */ jsx47("div", { className: "px-3 flex items-center bg-gray-500 text-white h-10 rounded-r-md", children: append })
         ]
       }
     ),
-    props.errorMessage && /* @__PURE__ */ jsx46("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ jsx47("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var TextInputGroup_default = TextInputGroup;
@@ -28284,22 +28554,22 @@ import { Command as CommandPrimitive } from "cmdk";
 
 // src/components/ui/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
 function Dialog({
   ...props
 }) {
-  return /* @__PURE__ */ jsx47(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsx48(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx47(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsx48(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     DialogPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -28317,9 +28587,9 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs26(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ jsx47(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx48(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs27(
       DialogPrimitive.Content,
       {
         "data-slot": "dialog-content",
@@ -28330,14 +28600,14 @@ function DialogContent({
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ jsxs26(
+          showCloseButton && /* @__PURE__ */ jsxs27(
             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__ */ jsx47(X, {}),
-                /* @__PURE__ */ jsx47("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx48(X, {}),
+                /* @__PURE__ */ jsx48("span", { className: "sr-only", children: "Close" })
               ]
             }
           )
@@ -28347,7 +28617,7 @@ function DialogContent({
   ] });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       "data-slot": "dialog-header",
@@ -28357,7 +28627,7 @@ function DialogHeader({ className, ...props }) {
   );
 }
 function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       "data-slot": "dialog-footer",
@@ -28373,7 +28643,7 @@ function DialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
@@ -28386,7 +28656,7 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
@@ -28397,12 +28667,12 @@ function DialogDescription({
 }
 
 // src/components/ui/command.tsx
-import { jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
 function Command2({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     CommandPrimitive,
     {
       "data-slot": "command",
@@ -28418,14 +28688,14 @@ function CommandInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       "data-slot": "command-input-wrapper",
       className: "flex h-9 items-center gap-2 border-b px-3",
       children: [
-        /* @__PURE__ */ jsx48(Search, { className: "size-4 shrink-0 opacity-50" }),
-        /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx49(Search, { className: "size-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ jsx49(
           CommandPrimitive.Input,
           {
             "data-slot": "command-input",
@@ -28444,7 +28714,7 @@ function CommandList({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     CommandPrimitive.List,
     {
       "data-slot": "command-list",
@@ -28459,7 +28729,7 @@ function CommandList({
 function CommandEmpty({
   ...props
 }) {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     CommandPrimitive.Empty,
     {
       "data-slot": "command-empty",
@@ -28472,7 +28742,7 @@ function CommandGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     CommandPrimitive.Group,
     {
       "data-slot": "command-group",
@@ -28488,7 +28758,7 @@ function CommandItem({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     CommandPrimitive.Item,
     {
       "data-slot": "command-item",
@@ -28502,7 +28772,7 @@ function CommandItem({
 }
 
 // src/components/Inputs/Multiselect/MultiSelect.tsx
-import { jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs29 } from "react/jsx-runtime";
 var MultiSelect = ({
   value = [],
   onChange,
@@ -28527,15 +28797,15 @@ var MultiSelect = ({
     );
   };
   const selectedLabels = React8.useMemo(
-    () => data.filter((opt) => value.includes(opt.value)).map((opt) => opt.label),
+    () => data?.filter((opt) => value.includes(opt.value)).map((opt) => opt.label),
     [data, value]
   );
-  const options = data.map((item) => ({
+  const options = data?.map((item) => ({
     value: item[dataKey],
     label: item[dataLabel]
   }));
-  return /* @__PURE__ */ jsxs28(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx49(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx50(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs29(
       Button,
       {
         variant: "outline",
@@ -28544,12 +28814,12 @@ var MultiSelect = ({
         disabled,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx49("span", { className: "truncate", children: selectedLabels.length > 0 ? selectedLabels.join(", ") : placeholder }),
-          /* @__PURE__ */ jsx49(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+          /* @__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__ */ jsx49(
+    /* @__PURE__ */ jsx50(
       PopoverContent,
       {
         align: "start",
@@ -28558,26 +28828,26 @@ var MultiSelect = ({
         onInteractOutside: (e) => {
           if (e.target.closest(".keep-open")) e.preventDefault();
         },
-        children: /* @__PURE__ */ jsxs28(Command2, { shouldFilter: searchable, children: [
-          searchable && /* @__PURE__ */ jsx49(CommandInput, { placeholder: "Search..." }),
-          /* @__PURE__ */ jsxs28(CommandList, { children: [
-            /* @__PURE__ */ jsx49(CommandEmpty, { children: "No options found." }),
-            /* @__PURE__ */ jsx49(CommandGroup, { children: options.map((opt) => {
+        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__ */ jsx49(
+              return /* @__PURE__ */ jsx50(
                 "div",
                 {
                   className: "keep-open",
-                  children: /* @__PURE__ */ jsx49(
+                  children: /* @__PURE__ */ jsx50(
                     CommandItem,
                     {
                       onMouseDown: (e) => {
                         e.preventDefault();
                         toggleOption(opt.value);
                       },
-                      children: /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2", children: [
-                        /* @__PURE__ */ jsx49(Checkbox, { checked: isSelected }),
-                        /* @__PURE__ */ jsx49("span", { children: opt.label })
+                      children: /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsx50(Checkbox, { checked: isSelected }),
+                        /* @__PURE__ */ jsx50("span", { children: opt.label })
                       ] })
                     },
                     opt.value
@@ -28590,7 +28860,7 @@ var MultiSelect = ({
         ] })
       }
     ),
-    props.errorMessage && /* @__PURE__ */ jsx49("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+    props.errorMessage && /* @__PURE__ */ jsx50("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var MultiSelect_default = MultiSelect;
@@ -28608,14 +28878,14 @@ import {
 } from "@tanstack/react-table";
 
 // src/components/ui/table.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 function Table3({ className, ...props }) {
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     "div",
     {
       "data-slot": "table-container",
       className: "relative w-full overflow-x-auto rounded-md border border-gray-200 bg-white",
-      children: /* @__PURE__ */ jsx50(
+      children: /* @__PURE__ */ jsx51(
         "table",
         {
           "data-slot": "table",
@@ -28627,7 +28897,7 @@ function Table3({ className, ...props }) {
   );
 }
 function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     "thead",
     {
       "data-slot": "table-header",
@@ -28640,7 +28910,7 @@ function TableHeader({ className, ...props }) {
   );
 }
 function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     "tbody",
     {
       "data-slot": "table-body",
@@ -28653,7 +28923,7 @@ function TableBody({ className, ...props }) {
   );
 }
 function TableRow({ className, ...props }) {
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     "tr",
     {
       "data-slot": "table-row",
@@ -28666,7 +28936,7 @@ function TableRow({ className, ...props }) {
   );
 }
 function TableHead({ className, ...props }) {
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     "th",
     {
       "data-slot": "table-head",
@@ -28679,7 +28949,7 @@ function TableHead({ className, ...props }) {
   );
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     "td",
     {
       "data-slot": "table-cell",
@@ -28692,8 +28962,246 @@ function TableCell({ className, ...props }) {
   );
 }
 
+// src/lib/table/useDynamicColumns.ts
+import { createColumnHelper } from "@tanstack/react-table";
+
+// src/lib/table/cellRendererFactory.tsx
+import Image2 from "next/image";
+
+// src/lib/table/valueFormatter.ts
+import dayjs from "dayjs";
+var valueFormatter = (value, format2, customFormatters = {}) => {
+  if (!format2) return value;
+  if (value == null) return "";
+  if (format2.startsWith("custom:")) {
+    const key = format2.replace("custom:", "");
+    return customFormatters[key] ? customFormatters[key](value) : value;
+  }
+  const [type, arg] = format2.split(":");
+  switch (type) {
+    case "date":
+      return dayjs(value).format(arg || "YYYY-MM-DD");
+    case "datetime":
+      return dayjs(value).format(arg || "YYYY-MM-DD HH:mm:ss");
+    case "time":
+      return dayjs(value).format(arg || "HH:mm");
+    case "number":
+      return Number(value).toFixed(parseInt(arg || "2"));
+    case "currency":
+      return new Intl.NumberFormat("en-IN", {
+        style: "currency",
+        currency: arg || "INR"
+      }).format(Number(value));
+    case "uppercase":
+      return String(value).toUpperCase();
+    case "lowercase":
+      return String(value).toLowerCase();
+    default:
+      return value;
+  }
+};
+
+// src/lib/table/cellRendererFactory.tsx
+import { Fragment as Fragment19, jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
+var getContrastColor = (bg) => {
+  let c = bg.trim().toUpperCase();
+  if (/^#([a-fA-F0-9]{3})$/.test(c)) {
+    c = "#" + c.slice(1).split("").map((x) => x + x).join("");
+  }
+  const named = {
+    white: "#FFFFFF",
+    black: "#000000",
+    red: "#FF0000",
+    green: "#008000",
+    blue: "#0000FF",
+    gray: "#808080",
+    grey: "#808080",
+    orange: "#FFA500",
+    yellow: "#FFFF00",
+    purple: "#800080",
+    pink: "#FFC0CB",
+    teal: "#008080"
+  };
+  if (!c.startsWith("#")) {
+    const lower = c.toLowerCase();
+    if (named[lower]) c = named[lower];
+    else return "#FFFFFF";
+  }
+  if (!/^#([a-fA-F0-9]{6})$/.test(c)) return "#FFFFFF";
+  const r = parseInt(c.slice(1, 3), 16);
+  const g = parseInt(c.slice(3, 5), 16);
+  const b = parseInt(c.slice(5, 7), 16);
+  const brightness = (r * 299 + g * 587 + b * 114) / 1e3;
+  return brightness > 160 ? "#000000" : "#FFFFFF";
+};
+var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers = {}, format2, customFormatters = {}) => {
+  const formattedValue = valueFormatter(value, format2, customFormatters);
+  switch (renderer) {
+    /* -------------------- BASIC -------------------- */
+    case "text":
+      return /* @__PURE__ */ jsx52("span", { children: row?.[rendererProps?.rowField] || formattedValue });
+    case "number":
+      return /* @__PURE__ */ jsx52("span", { className: "tabular-nums text-right", children: valueFormatter(row?.[rendererProps?.rowField] || formattedValue, "number:2") });
+    case "date":
+      return /* @__PURE__ */ jsx52("span", { children: valueFormatter(row?.[rendererProps?.rowField] || formattedValue, "date:DD MMM YYYY") });
+    case "link":
+      return /* @__PURE__ */ jsx52(
+        "a",
+        {
+          href: `${rendererProps?.prefix || ""}${row?.[rendererProps?.rowField] || formattedValue}`,
+          target: "_blank",
+          rel: "noreferrer",
+          className: `text-blue-500 underline ${rendererProps?.className || ""}`,
+          children: rendererProps?.label || formattedValue
+        }
+      );
+    /* -------------------- VISUAL -------------------- */
+    case "image":
+      return /* @__PURE__ */ jsx52("div", { className: "relative", children: /* @__PURE__ */ jsx52(
+        Image2,
+        {
+          src: row?.[rendererProps?.rowField] || formattedValue || rendererProps?.fallback || "/placeholder.png",
+          alt: rendererProps?.alt || "",
+          width: rendererProps?.width || 40,
+          height: rendererProps?.height || 40,
+          className: `object-cover ${rendererProps?.rounded ? "rounded-full" : ""} ${rendererProps?.className || ""}`,
+          style: {
+            borderRadius: rendererProps?.rounded ? "50%" : 0,
+            objectFit: "cover"
+          }
+        }
+      ) });
+    case "icon":
+      const maybeIcon = lucide_react_exports[rendererProps?.icon];
+      const IconComponent = typeof maybeIcon === "function" ? maybeIcon : Star;
+      return /* @__PURE__ */ jsx52(
+        IconComponent,
+        {
+          size: rendererProps?.size || 16,
+          color: rendererProps?.color || "#555",
+          className: rendererProps?.className || ""
+        }
+      );
+    case "badge": {
+      const color = rendererProps?.colorMap?.[formattedValue] || rendererProps?.color || "gray";
+      if (!formattedValue) return null;
+      const textColor = getContrastColor(color);
+      return /* @__PURE__ */ jsx52(
+        "span",
+        {
+          className: `inline-block px-2 py-1 text-xs rounded-full bg-${color}-100 text-${textColor}-700 ${rendererProps?.className || ""}`,
+          style: { backgroundColor: color, color: textColor },
+          children: formattedValue
+        }
+      );
+    }
+    case "chip": {
+      const color = rendererProps?.color || "gray";
+      const maybeIcon2 = lucide_react_exports[rendererProps?.icon];
+      const IconComponent2 = typeof maybeIcon2 === "function" ? maybeIcon2 : Star;
+      if (!formattedValue) return null;
+      const textColor = getContrastColor(color);
+      return /* @__PURE__ */ jsxs30(
+        "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" }) }),
+            formattedValue
+          ]
+        }
+      );
+    }
+    /* -------------------- INTERACTIVE -------------------- */
+    case "button":
+      return /* @__PURE__ */ jsx52(
+        "button",
+        {
+          onClick: () => rendererProps?.onClick?.(row, formattedValue),
+          className: `px-2 py-1 rounded text-white bg-blue-600 hover:bg-blue-700 ${rendererProps?.className || ""}`,
+          children: row?.[rendererProps?.rowField] || rendererProps.value || formattedValue
+        }
+      );
+    case "switch":
+      return /* @__PURE__ */ jsxs30("label", { className: "inline-flex items-center cursor-pointer", children: [
+        /* @__PURE__ */ jsx52(
+          "input",
+          {
+            type: "checkbox",
+            checked: !!value,
+            onChange: (e) => rendererProps?.onChange?.(row, e.target.checked),
+            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" }) })
+      ] });
+    case "progress":
+      return /* @__PURE__ */ jsx52("div", { className: "w-full bg-gray-100 rounded-full h-2", children: /* @__PURE__ */ jsx52(
+        "div",
+        {
+          className: "bg-blue-600 h-2 rounded-full transition-all",
+          style: { width: `${row?.[rendererProps?.rowField] || formattedValue || 0}%` }
+        }
+      ) });
+    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(
+        Star,
+        {
+          size: 16,
+          className: i < stars ? "text-yellow-400" : "text-gray-300",
+          fill: i < stars ? "#facc15" : "none"
+        },
+        i
+      )) });
+    }
+    /* -------------------- ADVANCED -------------------- */
+    case "custom": {
+      const CustomRenderer = customRenderers[rendererProps?.customRendererId] || customRenderers[rendererProps?.rendererId];
+      if (CustomRenderer)
+        return /* @__PURE__ */ jsx52(
+          CustomRenderer,
+          {
+            value: formattedValue,
+            row,
+            ...rendererProps
+          }
+        );
+      return /* @__PURE__ */ jsx52("span", { children: "Missing custom renderer" });
+    }
+    /* -------------------- DEFAULT -------------------- */
+    default:
+      return /* @__PURE__ */ jsx52("span", { children: formattedValue });
+  }
+};
+
+// src/lib/table/useDynamicColumns.ts
+var columnHelper = createColumnHelper();
+var useDynamicColumns = (config, customRenderers = {}, customFormatters = {}) => {
+  return config.columns.map(
+    (col) => columnHelper.accessor(col.accessorKey ?? col.id, {
+      id: col.accessorKey ?? col.id,
+      header: col.header,
+      cell: (info) => {
+        const value = info.getValue();
+        const row = info.row.original;
+        return cellRendererFactory(
+          col.renderer,
+          col.rendererProps,
+          value,
+          row,
+          customRenderers,
+          col.format,
+          customFormatters
+        );
+      }
+    })
+  );
+};
+
 // src/components/ui/data-table.tsx
-import { Fragment as Fragment18, jsx as jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx53, jsxs as jsxs31 } from "react/jsx-runtime";
 function DataTable({
   columns,
   data,
@@ -28719,7 +29227,7 @@ function DataTable({
   const deleteColumn = React9.useMemo(() => ({
     id: "delete",
     header: "Actions",
-    cell: ({ row }) => /* @__PURE__ */ jsx51(
+    cell: ({ row }) => /* @__PURE__ */ jsx53(
       "button",
       {
         className: "px-3 py-1 text-[12px] bg-red-800 text-white rounded hover:bg-neutral-600 cursor-pointer",
@@ -28740,9 +29248,10 @@ function DataTable({
     }
     return columns;
   }, [columns, enableDelete, deleteColumn]);
+  const dynamicCols = useDynamicColumns({ columns: combinedColumns });
   const table = useReactTable({
     data,
-    columns: combinedColumns,
+    columns: dynamicCols,
     state: {
       columnFilters,
       columnVisibility,
@@ -28787,11 +29296,11 @@ function DataTable({
     }
     return [];
   };
-  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(
+  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(
             "input",
             {
               type: "text",
@@ -28806,9 +29315,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__ */ jsx51(Search, { className: "absolute left-2 top-2.5 text-gray-400", size: 16 })
+          /* @__PURE__ */ jsx53(Search, { className: "absolute left-2 top-2.5 text-gray-400", size: 16 })
         ] }),
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx53(
           Button,
           {
             size: "sm",
@@ -28818,8 +29327,8 @@ function DataTable({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs29(Popover, { children: [
-        /* @__PURE__ */ jsx51(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx51(
+      /* @__PURE__ */ jsxs31(Popover, { children: [
+        /* @__PURE__ */ jsx53(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx53(
           Button,
           {
             variant: "outline",
@@ -28828,10 +29337,10 @@ function DataTable({
             children: "Manage Columns"
           }
         ) }),
-        /* @__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(
+        /* @__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(
               "input",
               {
                 type: "checkbox",
@@ -28850,8 +29359,8 @@ function DataTable({
             ),
             "Toggle All"
           ] }),
-          table.getAllLeafColumns().map((column) => /* @__PURE__ */ jsxs29("label", { className: "flex items-center gap-2 text-sm", children: [
-            /* @__PURE__ */ jsx51(
+          table.getAllLeafColumns().map((column) => /* @__PURE__ */ jsxs31("label", { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ jsx53(
               "input",
               {
                 type: "checkbox",
@@ -28864,13 +29373,13 @@ function DataTable({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs29(Table3, { children: [
-      /* @__PURE__ */ jsx51(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx51(TableRow, { children: hg.headers.map((header) => {
+    /* @__PURE__ */ jsxs31(Table3, { children: [
+      /* @__PURE__ */ jsx53(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx53(TableRow, { children: hg.headers.map((header) => {
         const canSort = header.column.getCanSort();
         const canFilter = header.column.getCanFilter();
         const sortDir = manualSort?.key === header.column.id ? manualSort.dir : null;
-        return /* @__PURE__ */ jsx51(TableHead, { className: "relative select-none", children: /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs29(
+        return /* @__PURE__ */ jsx53(TableHead, { className: "relative select-none", children: /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs31(
             "span",
             {
               className: `flex items-center gap-1 ${canSort ? "cursor-pointer" : ""}`,
@@ -28882,32 +29391,32 @@ function DataTable({
               },
               children: [
                 flexRender(header.column.columnDef.header, header.getContext()),
-                canSort && /* @__PURE__ */ jsxs29(Fragment18, { 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" })
+                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" })
                 ] })
               ]
             }
           ),
-          canFilter && /* @__PURE__ */ jsxs29(Popover, { children: [
-            /* @__PURE__ */ jsx51(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx51(
+          canFilter && /* @__PURE__ */ jsxs31(Popover, { children: [
+            /* @__PURE__ */ jsx53(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx53(
               "span",
               {
                 role: "presentation",
                 className: "pl-5 cursor-pointer",
                 onClick: (e) => e.stopPropagation(),
-                children: /* @__PURE__ */ jsx51(FontAwesomeIcon3, { icon: faEllipsisH, className: "w-5 h-5 text-gray-500" })
+                children: /* @__PURE__ */ jsx53(FontAwesomeIcon3, { icon: faEllipsisH, className: "w-5 h-5 text-gray-500" })
               }
             ) }),
-            /* @__PURE__ */ jsx51(
+            /* @__PURE__ */ jsx53(
               PopoverContent,
               {
                 align: "center",
                 sideOffset: 14,
                 className: "w-50 p-3 z-[200] border-gray-300",
                 avoidCollisions: true,
-                children: /* @__PURE__ */ jsxs29(
+                children: /* @__PURE__ */ jsxs31(
                   "form",
                   {
                     onSubmit: (e) => {
@@ -28920,8 +29429,8 @@ function DataTable({
                     },
                     className: "space-y-2",
                     children: [
-                      /* @__PURE__ */ jsx51("label", { htmlFor: "filter", className: "text-xs text-gray-500 font-normal", children: "Filter by value:" }),
-                      /* @__PURE__ */ jsx51(
+                      /* @__PURE__ */ jsx53("label", { htmlFor: "filter", className: "text-xs text-gray-500 font-normal", children: "Filter by value:" }),
+                      /* @__PURE__ */ jsx53(
                         "input",
                         {
                           name: "filter",
@@ -28931,7 +29440,7 @@ function DataTable({
                           autoComplete: "off"
                         }
                       ),
-                      /* @__PURE__ */ jsx51("div", { className: "justify-end flex", children: /* @__PURE__ */ jsx51(
+                      /* @__PURE__ */ jsx53("div", { className: "justify-end flex", children: /* @__PURE__ */ jsx53(
                         Button,
                         {
                           type: "submit",
@@ -28947,10 +29456,10 @@ function DataTable({
           ] })
         ] }) }, header.id);
       }) }, hg.id)) }),
-      /* @__PURE__ */ jsx51(TableBody, { children: loading ? /* @__PURE__ */ jsx51(TableRow, { children: /* @__PURE__ */ jsx51(TableCell, { colSpan: combinedColumns.length, className: "h-24 text-center", children: "Loading..." }) }) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx51(TableRow, { children: row.getVisibleCells().map((cell) => {
+      /* @__PURE__ */ jsx53(TableBody, { children: loading ? /* @__PURE__ */ jsx53(Fragment20, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx53(TableRow, { children: combinedColumns.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) => {
         const meta = cell.column.columnDef.meta || {};
         const isClickable = meta?.isClickable;
-        return /* @__PURE__ */ jsx51(
+        return /* @__PURE__ */ jsx53(
           TableCell,
           {
             className: `${meta?.cellClass ?? ""} ${isClickable ? "cursor-pointer hover:bg-gray-100" : ""}`,
@@ -28964,17 +29473,17 @@ function DataTable({
           },
           cell.id
         );
-      }) }, row.id)) : /* @__PURE__ */ jsx51(TableRow, { children: /* @__PURE__ */ jsx51(TableCell, { colSpan: combinedColumns.length, className: "h-24 text-center", children: "No results." }) }) })
+      }) }, row.id)) : /* @__PURE__ */ jsx53(TableRow, { children: /* @__PURE__ */ jsx53(TableCell, { colSpan: combinedColumns.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." }) }) }) })
     ] }),
-    pagination && /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between py-3 px-2 text-sm w-full", children: [
-      /* @__PURE__ */ jsxs29("div", { children: [
+    pagination && /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between py-3 px-2 text-sm w-full", children: [
+      /* @__PURE__ */ jsxs31("div", { children: [
         "Page ",
         table.getState().pagination.pageIndex + 1,
         " of ",
         table.getPageCount()
       ] }),
-      /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx51(
+      /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx53(
           "button",
           {
             onClick: () => table.previousPage(),
@@ -28987,7 +29496,7 @@ function DataTable({
           table.getState().pagination.pageIndex + 1,
           table.getPageCount(),
           5
-        ).map((pageNum, index) => /* @__PURE__ */ jsx51(
+        ).map((pageNum, index) => /* @__PURE__ */ jsx53(
           "button",
           {
             disabled: pageNum === "...",
@@ -28997,7 +29506,7 @@ function DataTable({
           },
           index
         )),
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx53(
           "button",
           {
             onClick: () => table.nextPage(),
@@ -29012,7 +29521,7 @@ function DataTable({
 }
 
 // src/components/DataDisplay/Table/Table.tsx
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var Table4 = ({
   columns,
   data,
@@ -29038,7 +29547,7 @@ var Table4 = ({
   const rawColumns = Array.isArray(columns) ? columns : [];
   const rawData = Array.isArray(data) ? data : [];
   const isControlled = typeof page === "number";
-  return /* @__PURE__ */ jsx52("div", { className: `${className || ""} space-y-3`, style, children: /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx54("div", { className: `${className || ""} space-y-3`, style, children: /* @__PURE__ */ jsx54(
     DataTable,
     {
       ...props,
@@ -29071,9 +29580,9 @@ var Table4 = ({
 var Table_default = Table4;
 
 // src/components/ui/pagination.tsx
-import { jsx as jsx53, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs32 } from "react/jsx-runtime";
 function Pagination({ className, ...props }) {
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx55(
     "nav",
     {
       role: "navigation",
@@ -29088,7 +29597,7 @@ function PaginationContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx55(
     "ul",
     {
       "data-slot": "pagination-content",
@@ -29098,7 +29607,7 @@ function PaginationContent({
   );
 }
 function PaginationItem({ ...props }) {
-  return /* @__PURE__ */ jsx53("li", { "data-slot": "pagination-item", ...props });
+  return /* @__PURE__ */ jsx55("li", { "data-slot": "pagination-item", ...props });
 }
 function PaginationLink({
   className,
@@ -29106,7 +29615,7 @@ function PaginationLink({
   size = "icon",
   ...props
 }) {
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx55(
     "a",
     {
       "aria-current": isActive ? "page" : void 0,
@@ -29127,7 +29636,7 @@ function PaginationPrevious({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs32(
     PaginationLink,
     {
       "aria-label": "Go to previous page",
@@ -29135,8 +29644,8 @@ function PaginationPrevious({
       className: cn("gap-1 px-2.5 sm:pl-2.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx53(ChevronLeft, {}),
-        /* @__PURE__ */ jsx53("span", { className: "hidden sm:block", children: "Previous" })
+        /* @__PURE__ */ jsx55(ChevronLeft, {}),
+        /* @__PURE__ */ jsx55("span", { className: "hidden sm:block", children: "Previous" })
       ]
     }
   );
@@ -29145,7 +29654,7 @@ function PaginationNext({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs32(
     PaginationLink,
     {
       "aria-label": "Go to next page",
@@ -29153,8 +29662,8 @@ function PaginationNext({
       className: cn("gap-1 px-2.5 sm:pr-2.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx53("span", { className: "hidden sm:block", children: "Next" }),
-        /* @__PURE__ */ jsx53(ChevronRight, {})
+        /* @__PURE__ */ jsx55("span", { className: "hidden sm:block", children: "Next" }),
+        /* @__PURE__ */ jsx55(ChevronRight, {})
       ]
     }
   );
@@ -29163,7 +29672,7 @@ function PaginationEllipsis({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs32(
     "span",
     {
       "aria-hidden": true,
@@ -29171,15 +29680,15 @@ function PaginationEllipsis({
       className: cn("flex size-9 items-center justify-center", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx53(Ellipsis, { className: "size-4" }),
-        /* @__PURE__ */ jsx53("span", { className: "sr-only", children: "More pages" })
+        /* @__PURE__ */ jsx55(Ellipsis, { className: "size-4" }),
+        /* @__PURE__ */ jsx55("span", { className: "sr-only", children: "More pages" })
       ]
     }
   );
 }
 
 // src/components/DataDisplay/Pagination/Pagination.tsx
-import { jsx as jsx54, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs33 } from "react/jsx-runtime";
 var CustomPagination = ({
   totalPages,
   currentPage,
@@ -29225,10 +29734,10 @@ var CustomPagination = ({
     }
   };
   const pageNumbers = getPageNumbers();
-  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(
+  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(
         Select,
         {
           defaultValue: String(perPage),
@@ -29236,26 +29745,26 @@ var CustomPagination = ({
             onPageChange({ page: 1, itemsPerPage: Number(value) });
           },
           children: [
-            /* @__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(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(Pagination, { className: "justify-end", children: /* @__PURE__ */ jsxs31(PaginationContent, { children: [
-      /* @__PURE__ */ jsx54(PaginationItem, { children: /* @__PURE__ */ jsx54(
+    /* @__PURE__ */ jsx56(Pagination, { className: "justify-end", children: /* @__PURE__ */ jsxs33(PaginationContent, { children: [
+      /* @__PURE__ */ jsx56(PaginationItem, { children: /* @__PURE__ */ jsx56(
         PaginationPrevious,
         {
           onClick: () => handlePageChange(currentPage - 1),
           className: currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"
         }
       ) }),
-      pageNumbers.map((pageNumber, index) => /* @__PURE__ */ jsx54(PaginationItem, { children: pageNumber === "..." ? /* @__PURE__ */ jsx54(PaginationEllipsis, {}) : /* @__PURE__ */ jsx54(
+      pageNumbers.map((pageNumber, index) => /* @__PURE__ */ jsx56(PaginationItem, { children: pageNumber === "..." ? /* @__PURE__ */ jsx56(PaginationEllipsis, {}) : /* @__PURE__ */ jsx56(
         PaginationLink,
         {
           onClick: () => handlePageChange(pageNumber),
@@ -29264,7 +29773,7 @@ var CustomPagination = ({
           children: pageNumber
         }
       ) }, index)),
-      /* @__PURE__ */ jsx54(PaginationItem, { children: /* @__PURE__ */ jsx54(
+      /* @__PURE__ */ jsx56(PaginationItem, { children: /* @__PURE__ */ jsx56(
         PaginationNext,
         {
           onClick: () => handlePageChange(currentPage + 1),
@@ -29277,11 +29786,11 @@ var CustomPagination = ({
 var Pagination_default = CustomPagination;
 
 // src/components/Navigation/Tabs/Tabs.tsx
-import { useCallback as useCallback2, useMemo as useMemo5, useState as useState6 } 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 Fragment19, jsx as jsx55, jsxs as jsxs32 } from "react/jsx-runtime";
-var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder = true, source, parentKey, menuNameKey, menuUrlKey, loading }) => {
+import { Fragment as Fragment21, jsx as jsx57, jsxs as jsxs34 } from "react/jsx-runtime";
+var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder = false, source, parentKey, menuNameKey, menuUrlKey, loading }) => {
   function groupMenus(menus = []) {
     const menuMap = /* @__PURE__ */ new Map();
     menus.forEach((menu) => {
@@ -29327,9 +29836,9 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
     return pathname === path || path !== "/" && pathname?.startsWith(path);
   };
   const router = useRouter();
-  const [showExitDialog, setShowExitDialog] = useState6(false);
-  const [pendingUrl, setPendingUrl] = useState6(null);
-  const handleBuilderExit = useCallback2(
+  const [showExitDialog, setShowExitDialog] = useState8(false);
+  const [pendingUrl, setPendingUrl] = useState8(null);
+  const handleBuilderExit = useCallback3(
     (e, url) => {
       if (isBuilder) {
         e.preventDefault();
@@ -29348,23 +29857,23 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
   const renderDesktopTab = (tab, index) => {
     const finalClasses = [baseClasses, isActive(tab.url) ? activeClasses : hoverClasses, tab.className || ""].join(" ");
     if (Array.isArray(tab.children) && tab.children.length > 0 && tab.isDropDown) {
-      return /* @__PURE__ */ jsxs32(DropdownMenu, { children: [
-        /* @__PURE__ */ jsxs32(DropdownMenuTrigger, { className: `${finalClasses} inline-flex items-center gap-1`, children: [
+      return /* @__PURE__ */ jsxs34(DropdownMenu, { children: [
+        /* @__PURE__ */ jsxs34(DropdownMenuTrigger, { className: `${finalClasses} inline-flex items-center gap-1`, children: [
           tab.header,
-          /* @__PURE__ */ jsx55(ChevronDown, { className: "h-4 w-4 opacity-80" })
+          /* @__PURE__ */ jsx57(ChevronDown, { className: "h-4 w-4 opacity-80" })
         ] }),
-        /* @__PURE__ */ jsx55(
+        /* @__PURE__ */ jsx57(
           DropdownMenuContent,
           {
             align: "start",
             sideOffset: 6,
             className: "z-50 min-w-[160px] rounded-md border border-gray-200 bg-white p-1 shadow-lg",
-            children: tab.children.map((item) => /* @__PURE__ */ jsx55(
+            children: tab.children.map((item, index2) => /* @__PURE__ */ jsx57(
               DropdownMenuItem,
               {
                 asChild: true,
                 className: "cursor-pointer rounded-sm px-3 py-2 text-[12px] text-gray-800 hover:bg-gray-100 focus:bg-gray-100",
-                children: /* @__PURE__ */ jsx55(
+                children: /* @__PURE__ */ jsx57(
                   Link5,
                   {
                     href: item.url || "#",
@@ -29374,13 +29883,13 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
                   }
                 )
               },
-              item.id
+              item.id || index2
             ))
           }
         )
       ] }, index);
     }
-    return tab.url ? /* @__PURE__ */ jsx55(
+    return tab.url ? /* @__PURE__ */ jsx57(
       Link5,
       {
         href: tab.url,
@@ -29391,14 +29900,14 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
         children: tab.header
       },
       index
-    ) : /* @__PURE__ */ jsx55("div", { className: finalClasses, style: tab.style, role: "button", tabIndex: 0, children: tab.header }, index);
+    ) : /* @__PURE__ */ jsx57("div", { className: finalClasses, style: tab.style, role: "button", tabIndex: 0, children: tab.header }, index);
   };
-  const renderMobileMenu = () => /* @__PURE__ */ jsxs32(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxs32(DropdownMenuTrigger, { className: "flex items-center gap-2 px-3 py-2 rounded-md bg-white/10 text-white text-sm", children: [
-      /* @__PURE__ */ jsx55(Menu, { className: "h-4 w-4" }),
+  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" }),
       "Menu"
     ] }),
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx57(
       DropdownMenuContent,
       {
         align: "start",
@@ -29407,25 +29916,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__ */ jsxs32(DropdownMenuSub, { children: [
-              /* @__PURE__ */ jsx55(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__ */ jsx55(DropdownMenuSubContent, { className: "bg-white border shadow-lg rounded-md p-1", children: tab.children.map((item) => /* @__PURE__ */ jsx55(
+            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(
                 DropdownMenuItem,
                 {
                   asChild: true,
                   className: "cursor-pointer rounded-sm px-3 py-2 text-[12px] text-gray-800 hover:bg-gray-100",
-                  children: /* @__PURE__ */ jsx55(Link5, { href: item.url || "#", onClick: (e) => handleBuilderExit(e, item.url || "#"), children: item.header })
+                  children: /* @__PURE__ */ jsx57(Link5, { href: item.url || "#", onClick: (e) => handleBuilderExit(e, item.url || "#"), children: item.header })
                 },
-                item.id
+                item.id || index
               )) })
             ] }, i);
           }
-          return /* @__PURE__ */ jsx55(
+          return /* @__PURE__ */ jsx57(
             DropdownMenuItem,
             {
               asChild: true,
               className: "cursor-pointer rounded-sm px-3 py-2 text-[13px] text-gray-800 hover:bg-gray-100",
-              children: /* @__PURE__ */ jsx55(Link5, { href: tab.url || "#", onClick: (e) => handleBuilderExit(e, tab.url || "#"), children: tab.header })
+              children: /* @__PURE__ */ jsx57(Link5, { href: tab.url || "#", onClick: (e) => handleBuilderExit(e, tab.url || "#"), children: tab.header })
             },
             i
           );
@@ -29435,19 +29944,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__ */ jsxs32(Fragment19, { children: [
-    /* @__PURE__ */ jsxs32("div", { className, style, children: [
-      forceDesktop !== void 0 ? forceDesktop && /* @__PURE__ */ jsx55("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsx55("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }) : /* @__PURE__ */ jsx55("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsx55("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }),
-      forceMobile !== void 0 ? forceMobile && /* @__PURE__ */ jsx55("div", { children: renderMobileMenu() }) : /* @__PURE__ */ jsx55("div", { className: "flex md:hidden", children: renderMobileMenu() })
+  return /* @__PURE__ */ jsxs34(Fragment21, { children: [
+    /* @__PURE__ */ jsxs34("div", { 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() })
     ] }),
-    /* @__PURE__ */ jsx55(Dialog, { open: showExitDialog, onOpenChange: setShowExitDialog, children: /* @__PURE__ */ jsxs32(DialogContent, { className: "bg-[#fff]", children: [
-      /* @__PURE__ */ jsxs32(DialogHeader, { children: [
-        /* @__PURE__ */ jsx55(DialogTitle, { children: "Exit Builder?" }),
-        /* @__PURE__ */ jsx55(DialogDescription, { children: "You are about to leave the builder. Any unsaved changes may be lost." })
+    /* @__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__ */ jsxs32(DialogFooter, { children: [
-        /* @__PURE__ */ jsx55(Button, { className: "cursor-pointer bg-[#12715b] text-[#fff]", variant: "outline", onClick: () => setShowExitDialog(false), children: "Cancel" }),
-        /* @__PURE__ */ jsx55(Button, { className: "cursor-pointer border-[#12715b] border", onClick: confirmExit, children: "Yes, Exit" })
+      /* @__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" })
       ] })
     ] }) })
   ] });
@@ -29456,17 +29965,17 @@ var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
 import React10 from "react";
-import { jsx as jsx56, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs35 } from "react/jsx-runtime";
 var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage }) => {
-  return /* @__PURE__ */ jsx56("div", { className, style, children: /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between bg-red p-2 rounded-lg border border-gray-200 w-full", children: [
-    /* @__PURE__ */ jsx56("div", { className: "flex items-center", children: /* @__PURE__ */ jsx56("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ jsx56("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx56("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
-    /* @__PURE__ */ jsx56("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: stages?.length > 0 && stages?.map((stage, index) => {
+  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: stages?.length > 0 && stages?.map((stage, index) => {
       const currentIndex = stages.findIndex((s) => s.key === currentStage);
       const isAllCompleted = currentStage === "completed";
       const isCompleted = isAllCompleted || index < currentIndex;
       const isActive = !isAllCompleted && index === currentIndex;
-      return /* @__PURE__ */ jsxs33(React10.Fragment, { children: [
-        /* @__PURE__ */ jsx56(
+      return /* @__PURE__ */ jsxs35(React10.Fragment, { children: [
+        /* @__PURE__ */ jsx58(
           "button",
           {
             className: `
@@ -29480,10 +29989,10 @@ var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStag
             children: stage.header
           }
         ),
-        index < stages.length - 1 && /* @__PURE__ */ jsx56("div", { className: "flex-shrink-0 w-3 h-px bg-gray-300" })
+        index < stages.length - 1 && /* @__PURE__ */ jsx58("div", { className: "flex-shrink-0 w-3 h-px bg-gray-300" })
       ] }, stage.id);
     }) }),
-    isShowBtn && /* @__PURE__ */ jsx56("div", { className: "flex items-center", children: /* @__PURE__ */ jsx56(
+    isShowBtn && /* @__PURE__ */ jsx58("div", { className: "flex items-center", children: /* @__PURE__ */ jsx58(
       "button",
       {
         className: "bg-[#034486] text-white px-6 py-2 rounded-lg text-sm font-medium transition-colors duration-200 shadow-sm",
@@ -29501,26 +30010,26 @@ var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStag
 var Stages_default = StagesComponent;
 
 // src/components/Navigation/Spacer/Spacer.tsx
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var Spacer = ({ className, style }) => {
-  return /* @__PURE__ */ jsx57("div", { className: `${className}`, style });
+  return /* @__PURE__ */ jsx59("div", { className: `${className}`, style });
 };
 var Spacer_default = Spacer;
 
 // src/components/Navigation/Profile/Profile.tsx
-import { jsx as jsx58, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs36 } from "react/jsx-runtime";
 
 // src/components/Navigation/Notification/Notification.tsx
-import { jsx as jsx59, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs37 } from "react/jsx-runtime";
 
 // src/components/Navigation/Logo/Logo.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 
 // src/components/ui/avatar.tsx
 import * as React11 from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { jsx as jsx61 } from "react/jsx-runtime";
-var Avatar = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx61(
+import { jsx as jsx63 } from "react/jsx-runtime";
+var Avatar = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx63(
   AvatarPrimitive.Root,
   {
     ref,
@@ -29532,7 +30041,7 @@ var Avatar = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx61(
+var AvatarImage = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx63(
   AvatarPrimitive.Image,
   {
     ref,
@@ -29541,7 +30050,7 @@ var AvatarImage = React11.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx61(
+var AvatarFallback = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx63(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -29556,11 +30065,11 @@ AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 // src/components/Navigation/Navbar/Navbar.tsx
 import Link6 from "next/link";
-import Image3 from "next/image";
+import Image4 from "next/image";
 import { useRouter as useRouter2 } from "next/navigation";
 import { DropdownMenuSeparator } from "@radix-ui/react-dropdown-menu";
-import { useCallback as useCallback3, useMemo as useMemo6, useState as useState7 } from "react";
-import { Fragment as Fragment20, jsx as jsx62, jsxs as jsxs36 } from "react/jsx-runtime";
+import { useCallback as useCallback4, useMemo as useMemo6, useState as useState9 } from "react";
+import { Fragment as Fragment22, jsx as jsx64, jsxs as jsxs38 } from "react/jsx-runtime";
 function Navbar({
   style,
   badgeType,
@@ -29580,9 +30089,9 @@ function Navbar({
 }) {
   const isMobileView = canvasMode === "mobile" || canvasMode === "tablet";
   const router = useRouter2();
-  const [showExitDialog, setShowExitDialog] = useState7(false);
-  const [pendingUrl, setPendingUrl] = useState7(null);
-  const handleBuilderExit = useCallback3(
+  const [showExitDialog, setShowExitDialog] = useState9(false);
+  const [pendingUrl, setPendingUrl] = useState9(null);
+  const handleBuilderExit = useCallback4(
     (e, url) => {
       if (isBuilder) {
         e.preventDefault();
@@ -29604,23 +30113,23 @@ function Navbar({
     }
     return list || [];
   }, [source, navList]);
-  return /* @__PURE__ */ jsxs36(Fragment20, { children: [
-    /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsxs38(Fragment22, { children: [
+    /* @__PURE__ */ jsx64(
       "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__ */ jsxs36("div", { className: "mx-auto flex max-w-[90%] items-center justify-between px-4 py-4", children: [
-          /* @__PURE__ */ jsx62(
+        children: /* @__PURE__ */ jsxs38("div", { className: "mx-auto flex max-w-[90%] items-center justify-between px-4 py-4", children: [
+          /* @__PURE__ */ jsx64(
             Link6,
             {
               href: "/",
               onClick: (e) => handleBuilderExit(e, "/"),
               className: "flex items-center space-x-2",
-              children: imageUrl ? /* @__PURE__ */ jsx62(Image3, { src: imageUrl, alt: altText, width: 200, height: 200 }) : /* @__PURE__ */ jsx62("span", { className: "font-semibold text-blue-700", children: "Logo" })
+              children: imageUrl ? /* @__PURE__ */ jsx64(Image4, { src: imageUrl, alt: altText, width: 200, height: 200 }) : /* @__PURE__ */ jsx64("span", { className: "font-semibold text-blue-700", children: "Logo" })
             }
           ),
-          !isMobileView && /* @__PURE__ */ jsx62("div", { className: "flex items-center space-x-6 sm:hidden md:flex", children: formatedMenu.map((item) => /* @__PURE__ */ jsx62(
+          !isMobileView && /* @__PURE__ */ jsx64("div", { className: "flex items-center space-x-6 sm:hidden md:flex", children: formatedMenu.map((item) => /* @__PURE__ */ jsx64(
             Link6,
             {
               href: item.url || "#",
@@ -29630,39 +30139,39 @@ function Navbar({
             },
             item.id
           )) }),
-          /* @__PURE__ */ jsxs36("div", { className: "flex items-center space-x-3", children: [
-            !isMobileView ? /* @__PURE__ */ jsx62("div", { className: "flex-1 px-6", children: /* @__PURE__ */ jsxs36("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
-              /* @__PURE__ */ jsx62(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dark:text-white text-gray-400" }),
-              /* @__PURE__ */ jsx62(Input, { placeholder: "Search", className: "pl-9 text-gray-400" })
-            ] }) }) : /* @__PURE__ */ jsx62(Button, { variant: "ghost", size: "icon", className: "border border-gray-400", children: /* @__PURE__ */ jsx62(Search, { className: "h-5 w-5 text-gray-400" }) }),
-            /* @__PURE__ */ jsxs36("div", { className: "relative bg-[#E9E9E9] dark:bg-gray-700 rounded-md", children: [
-              /* @__PURE__ */ jsx62(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx62(Bell, { className: "h-5 w-5 text-[#1C1B1F] dark:text-gray-400" }) }),
-              badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ jsx62("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__ */ jsx62("span", { className: "absolute -top-1 -right-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500" })
+          /* @__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__ */ jsxs36(DropdownMenu, { children: [
-              /* @__PURE__ */ jsx62(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs36("div", { className: "flex items-center space-x-2", children: [
-                !isMobileView && showName && /* @__PURE__ */ jsx62("h4", { className: "text-[#000000] dark:text-gray-300 text-[13px] font-[500] mb-0", children: userName }),
-                !isMobileView ? /* @__PURE__ */ jsxs36(Fragment20, { children: [
-                  /* @__PURE__ */ jsx62(Avatar, { className: "cursor-pointer h-8 w-8 text-gray-900", children: profileType === "avatar" ? /* @__PURE__ */ jsx62(
+            /* @__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(
                     AvatarImage,
                     {
                       src: "/images/appbuilder/toolset/profile.svg",
                       alt: "Profile"
                     }
-                  ) : /* @__PURE__ */ jsx62("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__ */ jsx62(
+                  ) : /* @__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(
                     Button,
                     {
                       variant: "ghost",
                       size: "icon",
                       className: "text-gray-900 md:hidden dark:invert",
-                      children: /* @__PURE__ */ jsx62(Menu, { className: "h-6 w-6" })
+                      children: /* @__PURE__ */ jsx64(Menu, { className: "h-6 w-6" })
                     }
                   )
-                ] }) : /* @__PURE__ */ jsx62(Button, { variant: "ghost", size: "icon", className: "text-gray-900 dark:invert", children: /* @__PURE__ */ jsx62(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__ */ jsxs36(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-gray-800", children: [
-                profileMenu && profileMenu.length > 0 && /* @__PURE__ */ jsx62(Fragment20, { children: profileMenu.map((item) => /* @__PURE__ */ jsx62(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ jsx62(
+              /* @__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(
                   Link6,
                   {
                     href: item.url || "#",
@@ -29670,9 +30179,9 @@ function Navbar({
                     children: item.header
                   }
                 ) }, item.id)) }),
-                /* @__PURE__ */ jsxs36("div", { className: "md:hidden", children: [
-                  /* @__PURE__ */ jsx62(DropdownMenuSeparator, {}),
-                  formatedMenu && formatedMenu.length > 0 && /* @__PURE__ */ jsx62(Fragment20, { children: formatedMenu.map((item) => /* @__PURE__ */ jsx62(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ jsx62(
+                /* @__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(
                     Link6,
                     {
                       href: item.url || "#",
@@ -29687,14 +30196,14 @@ function Navbar({
         ] })
       }
     ),
-    /* @__PURE__ */ jsx62(Dialog, { open: showExitDialog, onOpenChange: setShowExitDialog, children: /* @__PURE__ */ jsxs36(DialogContent, { className: "bg-[#fff]", children: [
-      /* @__PURE__ */ jsxs36(DialogHeader, { children: [
-        /* @__PURE__ */ jsx62(DialogTitle, { children: "Exit Builder?" }),
-        /* @__PURE__ */ jsx62(DialogDescription, { children: "You are about to leave the builder. Any unsaved changes may be lost." })
+    /* @__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__ */ jsxs36(DialogFooter, { children: [
-        /* @__PURE__ */ jsx62(Button, { className: "cursor-pointer bg-[#12715b] text-[#fff]", variant: "outline", onClick: () => setShowExitDialog(false), children: "Cancel" }),
-        /* @__PURE__ */ jsx62(Button, { className: "cursor-pointer border-[#12715b] border", onClick: confirmExit, children: "Yes, Exit" })
+      /* @__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" })
       ] })
     ] }) })
   ] });
@@ -29714,35 +30223,35 @@ import {
   ResponsiveContainer,
   Legend
 } from "recharts";
-import { jsx as jsx63, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs39 } 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__ */ jsx63(
+    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__ */ jsx63("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__ */ jsx63("div", { className: `${className} h-[400px]`, style, children: /* @__PURE__ */ jsx63(ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ jsxs37(BarChart, { data, title: "Leads", desc: "content", children: [
-    /* @__PURE__ */ jsx63(CartesianGrid, { strokeDasharray: "3 3" }),
-    /* @__PURE__ */ jsx63(XAxis, { dataKey: "name" }),
-    /* @__PURE__ */ jsx63(YAxis, {}),
-    /* @__PURE__ */ jsx63(Tooltip, { formatter: (value) => `${value}k` }),
-    /* @__PURE__ */ jsx63(Legend, { verticalAlign: legendsPosition, align: "center" }),
-    /* @__PURE__ */ jsx63(
+  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(
       Bar,
       {
         dataKey: "value",
         fill: "#00695C",
         radius: [6, 6, 0, 0],
         isAnimationActive: false,
-        children: data.map((entry, index) => /* @__PURE__ */ jsx63(
+        children: data.map((entry, index) => /* @__PURE__ */ jsx65(
           "rect",
           {
             fill: entry.color || "#00695C"
@@ -29751,16 +30260,16 @@ var ChartComponent = ({ className, style, loading, ...props }) => {
         ))
       }
     )
-  ] }) : /* @__PURE__ */ jsxs37(AreaChart, { data, children: [
-    /* @__PURE__ */ jsx63("defs", { children: /* @__PURE__ */ jsxs37("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-      /* @__PURE__ */ jsx63("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
-      /* @__PURE__ */ jsx63("stop", { offset: "95%", stopColor: "#00695C", stopOpacity: 0 })
+  ] }) : /* @__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__ */ jsx63(CartesianGrid, { strokeDasharray: "3 3" }),
-    /* @__PURE__ */ jsx63(XAxis, { dataKey: "name" }),
-    /* @__PURE__ */ jsx63(YAxis, {}),
-    /* @__PURE__ */ jsx63(Tooltip, { formatter: (value) => `${value}k` }),
-    /* @__PURE__ */ jsx63(
+    /* @__PURE__ */ jsx65(CartesianGrid, { strokeDasharray: "3 3" }),
+    /* @__PURE__ */ jsx65(XAxis, { dataKey: "name" }),
+    /* @__PURE__ */ jsx65(YAxis, {}),
+    /* @__PURE__ */ jsx65(Tooltip, { formatter: (value) => `${value}k` }),
+    /* @__PURE__ */ jsx65(
       Area,
       {
         type: "monotone",
@@ -29776,7 +30285,7 @@ var ChartComponent = ({ className, style, loading, ...props }) => {
 var BarChart_default = React12.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
-import React13, { useEffect as useEffect23, useMemo as useMemo7, useState as useState8 } from "react";
+import React13, { useEffect as useEffect25, useMemo as useMemo7, useState as useState10 } from "react";
 import {
   PieChart,
   Pie,
@@ -29785,7 +30294,7 @@ import {
   Tooltip as Tooltip2,
   LabelList
 } from "recharts";
-import { Fragment as Fragment21, jsx as jsx64, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx66, jsxs as jsxs40 } from "react/jsx-runtime";
 var getRandomColor = () => {
   const palette = [
     "#2563eb",
@@ -29811,26 +30320,26 @@ var DonutChart = ({ className, style, loading, ...props }) => {
   }, [props.data]);
   const total = useMemo7(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
   const forceMobile = canvasMode === "mobile" || canvasMode === "tablet";
-  const [mounted, setMounted] = useState8(false);
-  useEffect23(() => {
+  const [mounted, setMounted] = useState10(false);
+  useEffect25(() => {
     const timeout = setTimeout(() => setMounted(true), 100);
     return () => clearTimeout(timeout);
   }, []);
   const renderLegends = useMemo7(() => {
     if (!showLegends) return null;
-    return /* @__PURE__ */ jsx64(Fragment21, { children: data.map((d) => /* @__PURE__ */ jsxs38(
+    return /* @__PURE__ */ jsx66(Fragment23, { children: data.map((d) => /* @__PURE__ */ jsxs40(
       "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__ */ jsx64(
+          /* @__PURE__ */ jsx66(
             "span",
             {
               className: "inline-block w-[16px] h-[16px] rounded",
               style: { backgroundColor: d.color }
             }
           ),
-          /* @__PURE__ */ jsx64("span", { className: "text-[#000000] text-[12px] md:text-[13px] font-[500]", children: d.name })
+          /* @__PURE__ */ jsx66("span", { className: "text-[#000000] text-[12px] md:text-[13px] font-[500]", children: d.name })
         ]
       },
       d.name
@@ -29838,24 +30347,24 @@ var DonutChart = ({ className, style, loading, ...props }) => {
   }, [data, showLegends]);
   if (!mounted) return null;
   if (loading || data.length === 0) {
-    return /* @__PURE__ */ jsx64(
+    return /* @__PURE__ */ jsx66(
       "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__ */ jsx64("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
+        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." })
       }
     );
   }
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs40(
     "div",
     {
       className: `relative flex flex-col items-center ${className}`,
       style,
       children: [
-        /* @__PURE__ */ jsxs38("div", { className: "relative w-full md:w-[70%] h-[300px] md:h-[400px] flex items-center justify-center", children: [
-          /* @__PURE__ */ jsx64(ResponsiveContainer2, { width: "99%", height: "100%", children: /* @__PURE__ */ jsxs38(PieChart, { children: [
-            /* @__PURE__ */ jsxs38(
+        /* @__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(
               Pie,
               {
                 data,
@@ -29867,8 +30376,8 @@ var DonutChart = ({ className, style, loading, ...props }) => {
                 labelLine: false,
                 isAnimationActive: false,
                 children: [
-                  data.map((entry, index) => /* @__PURE__ */ jsx64(Cell, { fill: entry.color }, `cell-${index}`)),
-                  /* @__PURE__ */ jsx64(
+                  data.map((entry, index) => /* @__PURE__ */ jsx66(Cell, { fill: entry.color }, `cell-${index}`)),
+                  /* @__PURE__ */ jsx66(
                     LabelList,
                     {
                       dataKey: "value",
@@ -29881,14 +30390,14 @@ var DonutChart = ({ className, style, loading, ...props }) => {
                 ]
               }
             ),
-            /* @__PURE__ */ jsx64(
+            /* @__PURE__ */ jsx66(
               Tooltip2,
               {
                 formatter: (value, name) => [`${value}k`, name]
               }
             )
           ] }) }),
-          /* @__PURE__ */ jsxs38(
+          /* @__PURE__ */ jsxs40(
             "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]`,
@@ -29899,7 +30408,7 @@ var DonutChart = ({ className, style, loading, ...props }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx64("div", { className: "flex flex-wrap justify-center gap-2 mt-6 w-full md:w-auto", children: renderLegends })
+        /* @__PURE__ */ jsx66("div", { className: "flex flex-wrap justify-center gap-2 mt-6 w-full md:w-auto", children: renderLegends })
       ]
     }
   );
@@ -29907,10 +30416,10 @@ var DonutChart = ({ className, style, loading, ...props }) => {
 var PieChart_default = React13.memo(DonutChart);
 
 // src/components/Blocks/EmailComposer.tsx
-import { jsx as jsx65, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs41 } from "react/jsx-runtime";
 function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc, setShowBcc, cc, setCc, bcc, setBcc, subject, setSubject, body, setBody }) {
-  return /* @__PURE__ */ jsx65("div", { className, style, children: /* @__PURE__ */ jsxs39("div", { className: "border rounded-md shadow bg-[#fff] p-4 mx-auto z-[50] relative", children: [
-    /* @__PURE__ */ jsx65("div", { className: "mb-3", children: /* @__PURE__ */ jsx65(
+  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(
       "input",
       {
         type: "email",
@@ -29919,8 +30428,8 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         required: true
       }
     ) }),
-    /* @__PURE__ */ jsx65("div", { className: "mb-3", children: /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx65(
+    /* @__PURE__ */ jsx67("div", { className: "mb-3", children: /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx67(
         "input",
         {
           type: "email",
@@ -29931,7 +30440,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
           required: true
         }
       ),
-      !showCc && /* @__PURE__ */ jsx65(
+      !showCc && /* @__PURE__ */ jsx67(
         "button",
         {
           onClick: () => setShowCc?.(true),
@@ -29939,7 +30448,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
           children: "Cc"
         }
       ),
-      !showBcc && /* @__PURE__ */ jsx65(
+      !showBcc && /* @__PURE__ */ jsx67(
         "button",
         {
           onClick: () => setShowBcc?.(true),
@@ -29948,7 +30457,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         }
       )
     ] }) }),
-    showCc && /* @__PURE__ */ jsx65("div", { className: "mb-3", children: /* @__PURE__ */ jsx65(
+    showCc && /* @__PURE__ */ jsx67("div", { className: "mb-3", children: /* @__PURE__ */ jsx67(
       "input",
       {
         type: "text",
@@ -29958,7 +30467,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__ */ jsx65("div", { className: "mb-3", children: /* @__PURE__ */ jsx65(
+    showBcc && /* @__PURE__ */ jsx67("div", { className: "mb-3", children: /* @__PURE__ */ jsx67(
       "input",
       {
         type: "text",
@@ -29968,7 +30477,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__ */ jsx65("div", { className: "mb-3", children: /* @__PURE__ */ jsx65(
+    /* @__PURE__ */ jsx67("div", { className: "mb-3", children: /* @__PURE__ */ jsx67(
       "input",
       {
         type: "text",
@@ -29978,11 +30487,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__ */ jsx65("div", { className: "mb-4", children: /* @__PURE__ */ jsx65(MyEditor, { value: body, onChange: setBody }) }),
-    /* @__PURE__ */ jsxs39("div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ jsx65("button", { className: "px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100", children: "Discard" }),
-      /* @__PURE__ */ jsx65("button", { className: "px-4 py-2 rounded-md border text-[#12715B] border-[#12715B]", children: "Reset" }),
-      /* @__PURE__ */ jsx65("button", { className: "px-4 py-2 rounded-md bg-[#12715B] text-white", children: "Send" })
+    /* @__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" })
     ] })
   ] }) });
 }
@@ -30027,10 +30536,10 @@ function showSonnerToast({
 // src/components/ui/sonner.tsx
 import { useTheme } from "next-themes";
 import { Toaster as Sonner } from "sonner";
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 var Toaster = ({ ...props }) => {
   const { theme = "system" } = useTheme();
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx68(
     Sonner,
     {
       theme,