@algorithm-shift/design-system 1.2.978 → 1.2.979

package/dist/index.js

@@ -47,6 +47,7 @@ __export(src_exports, {
   FileInput: () => FileInput_default,
   FlexLayout: () => Flex_default,
   GridLayout: () => Grid_default,
+  HistoryTimeline: () => HistoryTimeline_default,
   Icon: () => Icon_default,
   Image: () => Image_default,
   Modal: () => Modal,
@@ -30514,29 +30515,230 @@ var CustomPagination = ({
 };
 var Pagination_default = CustomPagination;
 
-// src/components/Navigation/Tabs/Tabs.tsx
+// src/components/DataDisplay/HistoryTimeline/HistoryTimeline.tsx
 var import_react30 = require("react");
+
+// src/components/ui/accordion.tsx
+var AccordionPrimitive = __toESM(require("@radix-ui/react-accordion"));
+var import_jsx_runtime55 = require("react/jsx-runtime");
+function Accordion2({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    AccordionPrimitive.Item,
+    {
+      "data-slot": "accordion-item",
+      className: cn("border-b last:border-b-0", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+    AccordionPrimitive.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ChevronDown, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    AccordionPrimitive.Content,
+    {
+      "data-slot": "accordion-content",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: cn("pt-0 pb-4", className), children })
+    }
+  );
+}
+
+// src/components/ui/card.tsx
+var import_jsx_runtime56 = require("react/jsx-runtime");
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("px-6", className),
+      ...props
+    }
+  );
+}
+
+// src/components/DataDisplay/HistoryTimeline/HistoryTimeline.tsx
+var import_jsx_runtime57 = require("react/jsx-runtime");
+function getValue(item, key) {
+  if (!key) return void 0;
+  return item[key];
+}
+var HistoryTimeline = ({
+  title = "Timeline",
+  className,
+  loading = false,
+  titleKey,
+  descriptionKey,
+  createdAtKey,
+  ...props
+}) => {
+  const data = (0, import_react30.useMemo)(() => {
+    if (Array.isArray(props.data)) {
+      return props.data;
+    }
+    return [];
+  }, [props.data]);
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Card, { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(CardContent, { className: "flex items-center justify-center px-4 py-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(LoaderCircle, { className: "h-5 w-5 animate-spin text-muted-foreground" }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ml-2 text-sm text-muted-foreground", children: "Loading history\u2026" })
+    ] }) });
+  }
+  if (data.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Card, { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(CardContent, { className: "px-4 py-8 text-center text-muted-foreground", children: "No history available." }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Card, { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Accordion2, { type: "single", collapsible: true, defaultValue: "history", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(AccordionItem, { value: "history", className: "border-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(CardHeader, { className: "flex flex-row items-center justify-between gap-2 border-b px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      AccordionTrigger,
+      {
+        className: cn(
+          "flex flex-1 items-center justify-between gap-2 p-0 text-left",
+          "hover:no-underline"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(CardTitle, { className: "text-base font-semibold", children: title })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(AccordionContent, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(CardContent, { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("ol", { className: "relative ml-4 border-l-2 border-[#939393] space-y-4", children: data.map((item, index) => {
+      const id = item.id ?? index;
+      const rawTitle = getValue(item, titleKey);
+      const rawDescription = getValue(item, descriptionKey);
+      const rawCreatedAt = getValue(item, createdAtKey);
+      const titleText = String(rawTitle ?? "");
+      const descriptionText = rawDescription != null ? String(rawDescription) : "";
+      const createdAtDate = rawCreatedAt != null ? new Date(rawCreatedAt) : null;
+      return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("li", { className: "relative pl-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "absolute left-[-9px] top-2 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bg-[#06A59A] text-white rounded-md p-[5px]", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          Info,
+          {
+            className: cn(
+              "h-5 w-5 text-white"
+            )
+          }
+        ) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          Accordion2,
+          {
+            type: "single",
+            collapsible: true,
+            className: "w-full",
+            children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(AccordionItem, { value: `item-${item.id}`, className: "border-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                AccordionTrigger,
+                {
+                  className: cn(
+                    "flex items-center justify-between gap-2 rounded-md px-2 py-1 text-left",
+                    "hover:bg-muted/60 hover:no-underline"
+                  ),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm font-medium leading-none", children: titleText }),
+                    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-[11px] text-muted-foreground", children: new Intl.DateTimeFormat("default", {
+                      dateStyle: "medium",
+                      timeStyle: "short"
+                    }).format(createdAtDate ?? /* @__PURE__ */ new Date()) })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(AccordionContent, { className: "pt-1", children: descriptionText && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "rounded-md bg-muted px-2 py-2 text-xs text-muted-foreground", children: descriptionText }) })
+            ] })
+          }
+        )
+      ] }, id);
+    }) }) }) })
+  ] }) }) });
+};
+var HistoryTimeline_default = HistoryTimeline;
+
+// src/components/Navigation/Tabs/Tabs.tsx
+var import_react31 = require("react");
 var import_link5 = __toESM(require("next/link"));
 var import_navigation3 = require("next/navigation");
 
 // src/components/ui/dialog.tsx
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function Dialog({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     DialogPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -30554,9 +30756,9 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DialogOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
       DialogPrimitive.Content,
       {
         "data-slot": "dialog-content",
@@ -30567,14 +30769,14 @@ function DialogContent({
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
             DialogPrimitive.Close,
             {
               "data-slot": "dialog-close",
               className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(X, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(X, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "sr-only", children: "Close" })
               ]
             }
           )
@@ -30584,7 +30786,7 @@ function DialogContent({
   ] });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     "div",
     {
       "data-slot": "dialog-header",
@@ -30594,7 +30796,7 @@ function DialogHeader({ className, ...props }) {
   );
 }
 function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     "div",
     {
       "data-slot": "dialog-footer",
@@ -30610,7 +30812,7 @@ function DialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
@@ -30623,7 +30825,7 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
@@ -30671,9 +30873,9 @@ function showSonnerToast({
 }
 
 // src/components/Navigation/Tabs/Tabs.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder = false, source, parentKey, menuNameKey, menuUrlKey, loading, bgActiveColor, textActiveColor }) => {
-  const [openIndex, setOpenIndex] = (0, import_react30.useState)(null);
+  const [openIndex, setOpenIndex] = (0, import_react31.useState)(null);
   const currentPathname = (0, import_navigation3.usePathname)();
   function groupMenus(menus = []) {
     const menuMap = /* @__PURE__ */ new Map();
@@ -30707,7 +30909,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
     });
     return sortMenus(rootMenus);
   }
-  const rawTabs = (0, import_react30.useMemo)(() => {
+  const rawTabs = (0, import_react31.useMemo)(() => {
     if (!Array.isArray(tabs)) return [];
     if (source === "manual") return Array.isArray(tabs) ? tabs : [];
     return groupMenus(tabs);
@@ -30737,9 +30939,9 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
     return tab.children.some((child) => isActive(child.url));
   };
   const router = (0, import_navigation3.useRouter)();
-  const [showExitDialog, setShowExitDialog] = (0, import_react30.useState)(false);
-  const [pendingUrl, setPendingUrl] = (0, import_react30.useState)(null);
-  const handleBuilderExit = (0, import_react30.useCallback)(
+  const [showExitDialog, setShowExitDialog] = (0, import_react31.useState)(false);
+  const [pendingUrl, setPendingUrl] = (0, import_react31.useState)(null);
+  const handleBuilderExit = (0, import_react31.useCallback)(
     (e, url) => {
       if (isBuilder) {
         e.preventDefault();
@@ -30770,13 +30972,13 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
       border: active && textActiveColor ? `1px solid ${textActiveColor}` : void 0
     };
     if (Array.isArray(tab.children) && tab.children.length > 0 && tab.isDropDown) {
-      return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
         DropdownMenu,
         {
           open: openIndex === index,
           onOpenChange: (open) => setOpenIndex(open ? index : null),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
               DropdownMenuTrigger,
               {
                 className: `${finalClasses} inline-flex items-center gap-1`,
@@ -30790,11 +30992,11 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
                 style: finalStyle,
                 children: [
                   tab.header,
-                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ChevronDown, { className: "h-4 w-4 opacity-80" })
+                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ChevronDown, { className: "h-4 w-4 opacity-80" })
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
               DropdownMenuContent,
               {
                 align: "start",
@@ -30807,12 +31009,12 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
                 onMouseLeave: () => {
                   timeout = setTimeout(() => setOpenIndex(null), 150);
                 },
-                children: tab.children.map((item, index2) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                children: tab.children.map((item, index2) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                   DropdownMenuItem,
                   {
                     asChild: true,
                     className: "cursor-pointer rounded-sm px-3 py-2 text-gray-800 hover:bg-gray-100 focus:bg-gray-100",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                       import_link5.default,
                       {
                         href: item.url || "#",
@@ -30831,7 +31033,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
         index
       );
     }
-    return tab.url ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    return tab.url ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       import_link5.default,
       {
         href: tab.url,
@@ -30842,14 +31044,14 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
         children: tab.header
       },
       index
-    ) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: finalClasses, style: finalStyle, role: "button", tabIndex: 0, children: tab.header }, index);
+    ) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: finalClasses, style: finalStyle, role: "button", tabIndex: 0, children: tab.header }, index);
   };
-  const renderMobileMenu = () => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(DropdownMenu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(DropdownMenuTrigger, { className: "flex items-center gap-2 px-3 py-2 rounded-md bg-white/10 text-white text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Menu, { className: "h-4 w-4" }),
+  const renderMobileMenu = () => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DropdownMenuTrigger, { className: "flex items-center gap-2 px-3 py-2 rounded-md bg-white/10 text-white text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Menu, { className: "h-4 w-4" }),
       "Menu"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       DropdownMenuContent,
       {
         align: "start",
@@ -30858,25 +31060,25 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
         children: rawTabs.map((tab, i) => {
           const hasChildren = Array.isArray(tab.children) && tab.children.length > 0 && tab.isDropDown;
           if (hasChildren) {
-            return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(DropdownMenuSub, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DropdownMenuSubTrigger, { className: "flex items-center justify-between cursor-pointer rounded-sm px-3 py-2 text-[13px] text-foreground hover:text-foreground", children: tab.header }),
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DropdownMenuSubContent, { className: "bg-white border shadow-lg rounded-md p-1", children: tab.children.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DropdownMenuSub, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DropdownMenuSubTrigger, { className: "flex items-center justify-between cursor-pointer rounded-sm px-3 py-2 text-[13px] text-foreground hover:text-foreground", children: tab.header }),
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DropdownMenuSubContent, { className: "bg-white border shadow-lg rounded-md p-1", children: tab.children.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                 DropdownMenuItem,
                 {
                   asChild: true,
                   className: "cursor-pointer rounded-sm px-3 py-2 text-gray-800 hover:bg-gray-100",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_link5.default, { href: item.url || "#", onClick: (e) => handleBuilderExit(e, item.url || "#"), children: item.header })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_link5.default, { href: item.url || "#", onClick: (e) => handleBuilderExit(e, item.url || "#"), children: item.header })
                 },
                 item.id || index
               )) })
             ] }, i);
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
             DropdownMenuItem,
             {
               asChild: true,
               className: "cursor-pointer rounded-sm px-3 py-2 text-[13px] text-gray-800 hover:bg-gray-100",
-              children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_link5.default, { href: tab.url || "#", onClick: (e) => handleBuilderExit(e, tab.url || "#"), children: tab.header })
+              children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_link5.default, { href: tab.url || "#", onClick: (e) => handleBuilderExit(e, tab.url || "#"), children: tab.header })
             },
             i
           );
@@ -30886,19 +31088,19 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
   ] });
   const forceMobile = canvasMode ? canvasMode === "mobile" || canvasMode === "tablet" : void 0;
   const forceDesktop = canvasMode ? canvasMode === "desktop" : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: cn("min-h-10", className), style, children: [
-      forceDesktop !== void 0 ? forceDesktop && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "hidden md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "hidden md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }),
-      forceMobile !== void 0 ? forceMobile && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { children: renderMobileMenu() }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex md:hidden", children: renderMobileMenu() })
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: cn("min-h-10", className), style, children: [
+      forceDesktop !== void 0 ? forceDesktop && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "hidden md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "hidden md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }),
+      forceMobile !== void 0 ? forceMobile && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { children: renderMobileMenu() }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex md:hidden", children: renderMobileMenu() })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Dialog, { open: showExitDialog, onOpenChange: setShowExitDialog, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(DialogContent, { className: "bg-[#fff]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(DialogHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DialogTitle, { children: "Exit Builder?" }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DialogDescription, { children: "You are about to leave the builder. Any unsaved changes may be lost." })
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Dialog, { open: showExitDialog, onOpenChange: setShowExitDialog, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DialogContent, { className: "bg-[#fff]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DialogHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DialogTitle, { children: "Exit Builder?" }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DialogDescription, { children: "You are about to leave the builder. Any unsaved changes may be lost." })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(DialogFooter, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Button, { className: "cursor-pointer bg-[#12715b] text-[#fff]", variant: "outline", onClick: () => setShowExitDialog(false), children: "Cancel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Button, { className: "cursor-pointer border-[#12715b] border", onClick: confirmExit, children: "Yes, Exit" })
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DialogFooter, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { className: "cursor-pointer bg-[#12715b] text-[#fff]", variant: "outline", onClick: () => setShowExitDialog(false), children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { className: "cursor-pointer border-[#12715b] border", onClick: confirmExit, children: "Yes, Exit" })
       ] })
     ] }) })
   ] });
@@ -30906,8 +31108,8 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-var import_react31 = __toESM(require("react"));
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_react32 = __toESM(require("react"));
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var StagesComponent = ({
   stages,
   isShowBtn,
@@ -30923,8 +31125,8 @@ var StagesComponent = ({
   triggerOnClick = false,
   canvasMode = "desktop"
 }) => {
-  const [activeStage, setActiveStage] = (0, import_react31.useState)(currentStage || (stages && stages.length > 0 ? stages[0][dataKey] : null));
-  const [isCompleted, setIsCompleted] = (0, import_react31.useState)(false);
+  const [activeStage, setActiveStage] = (0, import_react32.useState)(currentStage || (stages && stages.length > 0 ? stages[0][dataKey] : null));
+  const [isCompleted, setIsCompleted] = (0, import_react32.useState)(false);
   const updateStage = (stageKey) => {
     setActiveStage(stageKey);
     onStageChange?.(stageKey);
@@ -30955,7 +31157,7 @@ var StagesComponent = ({
   };
   const isAllStagesCompleted = isCompleted || currentStage === lastStage;
   const disabled = isAllStagesCompleted || loading || saving;
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     "div",
     {
       className: `
@@ -30965,8 +31167,8 @@ var StagesComponent = ({
         ${isMobile ? "p-3 sm:p-4" : "p-2"}
       `,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex items-center flex-shrink-0 order-1 lg:order-1", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("button", { className: "p-2 hover:bg-gray-100 rounded flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex items-center flex-shrink-0 order-1 lg:order-1", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("button", { className: "p-2 hover:bg-gray-100 rounded flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           "div",
           {
             className: `
@@ -30974,7 +31176,7 @@ var StagesComponent = ({
           flex-wrap gap-2 sm:gap-2 lg:gap-3 w-full lg:w-auto
           ${isMobile ? "order-2 mt-2 lg:mt-0" : "order-2"}
         `,
-            children: loading ? Array(6).fill(null).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            children: loading ? Array(6).fill(null).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
               "button",
               {
                 className: `
@@ -30992,8 +31194,8 @@ var StagesComponent = ({
               const currentIndex = stages.findIndex((s) => s[dataKey] === activeStage);
               const isCompletedStage = isAllStagesCompleted || index <= currentIndex;
               const isActive = !isAllStagesCompleted && index === currentIndex;
-              return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react31.default.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react32.default.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                   "button",
                   {
                     className: `
@@ -31010,19 +31212,19 @@ var StagesComponent = ({
                     children: stage[dataLabel]
                   }
                 ),
-                !isMobile && index < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "hidden sm:flex sm:flex-shrink-0 w-3 h-px bg-gray-300 sm:w-4" })
+                !isMobile && index < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "hidden sm:flex sm:flex-shrink-0 w-3 h-px bg-gray-300 sm:w-4" })
               ] }, stage.id);
             })
           }
         ),
-        isShowBtn && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        isShowBtn && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           "div",
           {
             className: `
             flex items-center flex-shrink-0 w-full lg:w-auto
             ${isMobile ? "order-3 mt-3 lg:mt-0" : "order-3"}
           `,
-            children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
               "button",
               {
                 className: `
@@ -31044,26 +31246,26 @@ var StagesComponent = ({
 var Stages_default = StagesComponent;
 
 // src/components/Navigation/Spacer/Spacer.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var Spacer = ({ className, style }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `${className}`, style });
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: `${className}`, style });
 };
 var Spacer_default = Spacer;
 
 // src/components/Navigation/Profile/Profile.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 
 // src/components/Navigation/Notification/Notification.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 
 // src/components/Navigation/Logo/Logo.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 
 // src/components/ui/avatar.tsx
 var React11 = __toESM(require("react"));
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
-var import_jsx_runtime62 = require("react/jsx-runtime");
-var Avatar = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var Avatar = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
   AvatarPrimitive.Root,
   {
     ref,
@@ -31075,7 +31277,7 @@ var Avatar = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+var AvatarImage = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
   AvatarPrimitive.Image,
   {
     ref,
@@ -31084,7 +31286,7 @@ var AvatarImage = React11.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+var AvatarFallback = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -31102,8 +31304,8 @@ var import_link6 = __toESM(require("next/link"));
 var import_image4 = __toESM(require("next/image"));
 var import_navigation4 = require("next/navigation");
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
-var import_react32 = require("react");
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_react33 = require("react");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 function Navbar({
   style,
   badgeType,
@@ -31123,9 +31325,9 @@ function Navbar({
 }) {
   const isMobileView = canvasMode === "mobile" || canvasMode === "tablet";
   const router = (0, import_navigation4.useRouter)();
-  const [showExitDialog, setShowExitDialog] = (0, import_react32.useState)(false);
-  const [pendingUrl, setPendingUrl] = (0, import_react32.useState)(null);
-  const handleBuilderExit = (0, import_react32.useCallback)(
+  const [showExitDialog, setShowExitDialog] = (0, import_react33.useState)(false);
+  const [pendingUrl, setPendingUrl] = (0, import_react33.useState)(null);
+  const handleBuilderExit = (0, import_react33.useCallback)(
     (e, url) => {
       if (isBuilder) {
         e.preventDefault();
@@ -31141,29 +31343,29 @@ function Navbar({
       router.push(pendingUrl);
     }
   };
-  const formatedMenu = (0, import_react32.useMemo)(() => {
+  const formatedMenu = (0, import_react33.useMemo)(() => {
     if (source === "state" && navList && navList.length) {
       return navList.map((i) => ({ ...i, header: i.name || "Menu" }));
     }
     return list || [];
   }, [source, navList]);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       "nav",
       {
         className: "w-full border-b border-b-white dark:border-b-gray-800 dark:bg-gray-800 bg-white shadow-sm",
         style,
-        children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "mx-auto flex max-w-[90%] items-center justify-between px-4 py-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "mx-auto flex max-w-[90%] items-center justify-between px-4 py-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
             import_link6.default,
             {
               href: "/",
               onClick: (e) => handleBuilderExit(e, "/"),
               className: "flex items-center space-x-2",
-              children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_image4.default, { src: imageUrl, alt: altText, width: 200, height: 200 }) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "font-semibold text-blue-700", children: "Logo" })
+              children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_image4.default, { src: imageUrl, alt: altText, width: 200, height: 200 }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "font-semibold text-blue-700", children: "Logo" })
             }
           ),
-          !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "flex items-center space-x-6 sm:hidden md:flex", children: formatedMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex items-center space-x-6 sm:hidden md:flex", children: formatedMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
             import_link6.default,
             {
               href: item.url || "#",
@@ -31173,39 +31375,39 @@ function Navbar({
             },
             item.id
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex items-center space-x-3", children: [
-            !isMobileView ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "flex-1 px-6", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dark:text-white text-gray-400" }),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Input, { placeholder: "Search", className: "pl-9 text-gray-400" })
-            ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Button, { variant: "ghost", size: "icon", className: "border border-gray-400", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Search, { className: "h-5 w-5 text-gray-400" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "relative bg-[#E9E9E9] dark:bg-gray-700 rounded-md", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Bell, { className: "h-5 w-5 text-[#1C1B1F] dark:text-gray-400" }) }),
-              badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] text-white leading-8", children: badgeCount }) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "absolute -top-1 -right-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500" })
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center space-x-3", children: [
+            !isMobileView ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex-1 px-6", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dark:text-white text-gray-400" }),
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Input, { placeholder: "Search", className: "pl-9 text-gray-400" })
+            ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { variant: "ghost", size: "icon", className: "border border-gray-400", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Search, { className: "h-5 w-5 text-gray-400" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "relative bg-[#E9E9E9] dark:bg-gray-700 rounded-md", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Bell, { className: "h-5 w-5 text-[#1C1B1F] dark:text-gray-400" }) }),
+              badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] text-white leading-8", children: badgeCount }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "absolute -top-1 -right-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(DropdownMenu, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex items-center space-x-2", children: [
-                !isMobileView && showName && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("h4", { className: "text-[#000000] dark:text-gray-300 text-[13px] font-[500] mb-0", children: userName }),
-                !isMobileView ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Avatar, { className: "cursor-pointer h-8 w-8 text-gray-900", children: profileType === "avatar" ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(DropdownMenu, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center space-x-2", children: [
+                !isMobileView && showName && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("h4", { className: "text-[#000000] dark:text-gray-300 text-[13px] font-[500] mb-0", children: userName }),
+                !isMobileView ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Avatar, { className: "cursor-pointer h-8 w-8 text-gray-900", children: profileType === "avatar" ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
                     AvatarImage,
                     {
                       src: "/images/appbuilder/toolset/profile.svg",
                       alt: "Profile"
                     }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "w-8 h-8 bg-[#12715b] rounded-full text-[#fff] text-center text-[11px] flex items-center justify-center", children: userName && getInitials(userName) }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "w-8 h-8 bg-[#12715b] rounded-full text-[#fff] text-center text-[11px] flex items-center justify-center", children: userName && getInitials(userName) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
                     Button,
                     {
                       variant: "ghost",
                       size: "icon",
                       className: "text-gray-900 md:hidden dark:invert",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Menu, { className: "h-6 w-6" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Menu, { className: "h-6 w-6" })
                     }
                   )
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Button, { variant: "ghost", size: "icon", className: "text-gray-900 dark:invert", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Menu, { className: "h-6 w-6" }) })
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { variant: "ghost", size: "icon", className: "text-gray-900 dark:invert", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Menu, { className: "h-6 w-6" }) })
               ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-gray-800", children: [
-                profileMenu && profileMenu.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_jsx_runtime63.Fragment, { children: profileMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-gray-800", children: [
+                profileMenu && profileMenu.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_jsx_runtime66.Fragment, { children: profileMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
                   import_link6.default,
                   {
                     href: item.url || "#",
@@ -31213,9 +31415,9 @@ function Navbar({
                     children: item.header
                   }
                 ) }, item.id)) }),
-                /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "md:hidden", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react_dropdown_menu.DropdownMenuSeparator, {}),
-                  formatedMenu && formatedMenu.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_jsx_runtime63.Fragment, { children: formatedMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "md:hidden", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react_dropdown_menu.DropdownMenuSeparator, {}),
+                  formatedMenu && formatedMenu.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_jsx_runtime66.Fragment, { children: formatedMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
                     import_link6.default,
                     {
                       href: item.url || "#",
@@ -31230,24 +31432,24 @@ function Navbar({
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Dialog, { open: showExitDialog, onOpenChange: setShowExitDialog, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(DialogContent, { className: "bg-[#fff]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(DialogHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DialogTitle, { children: "Exit Builder?" }),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DialogDescription, { children: "You are about to leave the builder. Any unsaved changes may be lost." })
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Dialog, { open: showExitDialog, onOpenChange: setShowExitDialog, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(DialogContent, { className: "bg-[#fff]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(DialogHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DialogTitle, { children: "Exit Builder?" }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DialogDescription, { children: "You are about to leave the builder. Any unsaved changes may be lost." })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(DialogFooter, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Button, { className: "cursor-pointer bg-[#12715b] text-[#fff]", variant: "outline", onClick: () => setShowExitDialog(false), children: "Cancel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Button, { className: "cursor-pointer border-[#12715b] border", onClick: confirmExit, children: "Yes, Exit" })
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(DialogFooter, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { className: "cursor-pointer bg-[#12715b] text-[#fff]", variant: "outline", onClick: () => setShowExitDialog(false), children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { className: "cursor-pointer border-[#12715b] border", onClick: confirmExit, children: "Yes, Exit" })
       ] })
     ] }) })
   ] });
 }
 
 // src/components/Chart/BarChart.tsx
-var import_react33 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 var import_axios2 = __toESM(require("axios"));
 var import_recharts = require("recharts");
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var getRandomColor = () => {
   const palette = [
     "#2563eb",
@@ -31305,18 +31507,18 @@ var ChartComponent = ({
   canvasMode,
   ...props
 }) => {
-  const [rawData, setRawData] = (0, import_react33.useState)([]);
-  const [rawMeta, setRawMeta] = (0, import_react33.useState)(null);
-  const [localLoading, setLocalLoading] = (0, import_react33.useState)(false);
-  const [currentPage, setCurrentPage] = (0, import_react33.useState)(1);
+  const [rawData, setRawData] = (0, import_react34.useState)([]);
+  const [rawMeta, setRawMeta] = (0, import_react34.useState)(null);
+  const [localLoading, setLocalLoading] = (0, import_react34.useState)(false);
+  const [currentPage, setCurrentPage] = (0, import_react34.useState)(1);
   const effectiveData = apiUrl ? rawData : props.data || [];
   const effectiveLoading = apiUrl ? localLoading : externalLoading;
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (apiUrl) {
       setCurrentPage(1);
     }
   }, [apiUrl]);
-  const fetchData = (0, import_react33.useCallback)(async (page) => {
+  const fetchData = (0, import_react34.useCallback)(async (page) => {
     if (!apiUrl) return;
     const cancelled = false;
     try {
@@ -31325,7 +31527,8 @@ var ChartComponent = ({
         page: page.toString(),
         limit: limit.toString()
       });
-      const res = await import_axios2.default.get(`${apiUrl}?${params.toString()}`, {
+      const axiosClient = props.axiosInstance ?? import_axios2.default;
+      const res = await axiosClient.get(`${apiUrl}?${params.toString()}`, {
         withCredentials: true
       });
       if (!cancelled) {
@@ -31352,7 +31555,7 @@ var ChartComponent = ({
       if (!cancelled) setLocalLoading(false);
     }
   }, [apiUrl, limit]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (!apiUrl) return;
     fetchData(currentPage);
   }, [apiUrl, currentPage, fetchData]);
@@ -31360,7 +31563,7 @@ var ChartComponent = ({
     if (rawMeta && (newPage < 1 || newPage > rawMeta.pages)) return;
     setCurrentPage(newPage);
   };
-  const data = (0, import_react33.useMemo)(() => {
+  const data = (0, import_react34.useMemo)(() => {
     if (!Array.isArray(effectiveData) || effectiveData.length === 0 || !dataKey || !dataLabel) {
       return [];
     }
@@ -31373,27 +31576,27 @@ var ChartComponent = ({
   const chartType = props.chartType || "bar";
   const legendsPosition = ["middle", "bottom"].includes(props.legendsPosition) ? props.legendsPosition : "top";
   if (effectiveLoading || data.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
       "div",
       {
         className: `relative flex flex-col w-full h-[300px] md:h-[400px] bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-6 ${className}`,
         style,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "mb-6 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "inline-flex items-center space-x-2 bg-white/90 px-6 py-2.5 rounded-xl backdrop-blur-sm border border-gray-200 shadow-lg", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "w-5 h-5 border-2 border-gray-400 border-t-blue-500 rounded-full animate-spin" }),
-            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "text-sm font-medium text-gray-700 bg-gradient-to-r from-gray-300 bg-clip-text animate-pulse", children: "Loading chart data..." })
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "mb-6 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "inline-flex items-center space-x-2 bg-white/90 px-6 py-2.5 rounded-xl backdrop-blur-sm border border-gray-200 shadow-lg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "w-5 h-5 border-2 border-gray-400 border-t-blue-500 rounded-full animate-spin" }),
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-sm font-medium text-gray-700 bg-gradient-to-r from-gray-300 bg-clip-text animate-pulse", children: "Loading chart data..." })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent animate-shimmer rounded-xl" }),
-          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "flex-1 relative w-full h-full min-h-[240px] md:min-h-[320px] bg-white/80 rounded-lg border border-gray-200/50 shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "absolute bottom-0 left-4 right-4 flex gap-2 h-[200px] md:h-[280px] justify-center items-end", children: [...Array(20)].map((_, idx) => {
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent animate-shimmer rounded-xl" }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex-1 relative w-full h-full min-h-[240px] md:min-h-[320px] bg-white/80 rounded-lg border border-gray-200/50 shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "absolute bottom-0 left-4 right-4 flex gap-2 h-[200px] md:h-[280px] justify-center items-end", children: [...Array(20)].map((_, idx) => {
             const randomHeight = `${Math.floor(Math.random() * 76) + 20}%`;
-            return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
               "div",
               {
                 className: `relative w-10 md:w-12 flex-1 max-w-[48px] rounded-t-lg bg-gradient-to-t from-gray-100 via-gray-200 to-transparent shadow-lg border border-gray-200/50 animate-slide-up stagger-${idx} overflow-hidden`,
                 style: { height: randomHeight, animationDelay: `${idx * 0.08}s` },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "absolute inset-0 bg-gradient-to-r from-white/40 via-transparent to-white/40 animate-shimmer-bar" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "absolute bottom-1 left-1/2 w-4 h-1 rounded-full transform -translate-x-1/2 blur-sm" })
+                  /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "absolute inset-0 bg-gradient-to-r from-white/40 via-transparent to-white/40 animate-shimmer-bar" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "absolute bottom-1 left-1/2 w-4 h-1 rounded-full transform -translate-x-1/2 blur-sm" })
                 ]
               },
               `bar-${idx}`
@@ -31403,9 +31606,9 @@ var ChartComponent = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: `${className} h-[450px]`, style, children: [
-    isPaginationEnabled && rawMeta && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex items-center justify-between mb-4 px-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "text-sm text-gray-600 hidden sm:block", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: `${className} h-[450px]`, style, children: [
+    isPaginationEnabled && rawMeta && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center justify-between mb-4 px-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "text-sm text-gray-600 hidden sm:block", children: [
         "Page ",
         rawMeta.page,
         " of ",
@@ -31414,52 +31617,52 @@ var ChartComponent = ({
         rawMeta.total.toLocaleString(),
         " total records)"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex items-center space-x-2 sm:hidden w-full justify-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center space-x-2 sm:hidden w-full justify-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
           "button",
           {
             onClick: () => handlePageChange(currentPage - 1),
             disabled: currentPage === 1 || localLoading,
             className: "flex-1 px-3 py-2 text-xs font-medium rounded-lg border bg-white shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center justify-center space-x-1 min-w-0",
-            children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { children: "\u2190 Prev" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { children: "\u2190 Prev" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "px-2 py-2 text-xs font-semibold text-gray-700 min-w-[36px] text-center flex-shrink-0", children: currentPage }),
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "px-2 py-2 text-xs font-semibold text-gray-700 min-w-[36px] text-center flex-shrink-0", children: currentPage }),
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
           "button",
           {
             onClick: () => handlePageChange(currentPage + 1),
             disabled: currentPage >= rawMeta.pages || localLoading,
             className: "flex-1 px-3 py-2 text-xs font-medium rounded-lg border bg-white shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center justify-center space-x-1 min-w-0",
-            children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { children: "Next \u2192" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { children: "Next \u2192" })
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex items-center space-x-2 hidden sm:flex", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center space-x-2 hidden sm:flex", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
           "button",
           {
             onClick: () => handlePageChange(currentPage - 1),
             disabled: currentPage === 1 || localLoading,
             className: "px-3 py-1.5 text-sm font-medium rounded-lg border bg-white shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center space-x-1",
-            children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { children: "\u2190 Prev" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { children: "\u2190 Prev" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "px-3 py-1 text-sm font-medium text-gray-700", children: currentPage }),
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "px-3 py-1 text-sm font-medium text-gray-700", children: currentPage }),
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
           "button",
           {
             onClick: () => handlePageChange(currentPage + 1),
             disabled: currentPage >= rawMeta.pages || localLoading,
             className: "px-3 py-1.5 text-sm font-medium rounded-lg border bg-white shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center space-x-1",
-            children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { children: "Next \u2192" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { children: "Next \u2192" })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_recharts.BarChart, { data, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_recharts.BarChart, { data, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         import_recharts.XAxis,
         {
           dataKey: dataLabel,
@@ -31477,7 +31680,7 @@ var ChartComponent = ({
           className: "hidden sm:block"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         import_recharts.YAxis,
         {
           tickFormatter: (value) => `${(value / 1e3).toFixed(0)}k`,
@@ -31490,9 +31693,9 @@ var ChartComponent = ({
           width: 60
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_recharts.Tooltip, { formatter: (value) => [`${value}`, "Count"] }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_recharts.Legend, { verticalAlign: legendsPosition, align: "center" }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_recharts.Tooltip, { formatter: (value) => [`${value}`, "Count"] }),
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_recharts.Legend, { verticalAlign: legendsPosition, align: "center" }),
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         import_recharts.Bar,
         {
           dataKey,
@@ -31500,13 +31703,13 @@ var ChartComponent = ({
           isAnimationActive: false
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_recharts.AreaChart, { data, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("stop", { offset: "95%", stopColor: "#00695C", stopOpacity: 0 })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_recharts.AreaChart, { data, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("stop", { offset: "95%", stopColor: "#00695C", stopOpacity: 0 })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         import_recharts.XAxis,
         {
           dataKey: dataLabel,
@@ -31520,7 +31723,7 @@ var ChartComponent = ({
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         import_recharts.YAxis,
         {
           tickFormatter: (value) => `${(value / 1e3).toFixed(0)}k`,
@@ -31533,8 +31736,8 @@ var ChartComponent = ({
           width: 60
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_recharts.Tooltip, { formatter: (value) => `${value}k` }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_recharts.Tooltip, { formatter: (value) => `${value}k` }),
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         import_recharts.Area,
         {
           type: "monotone",
@@ -31548,13 +31751,13 @@ var ChartComponent = ({
     ] }) })
   ] });
 };
-var BarChart_default = import_react33.default.memo(ChartComponent);
+var BarChart_default = import_react34.default.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
-var import_react34 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var import_axios3 = __toESM(require("axios"));
 var import_recharts2 = require("recharts");
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var getRandomColor2 = () => {
   const palette = [
     "#2563eb",
@@ -31631,17 +31834,18 @@ var DonutChart = ({
 }) => {
   const showLegends = props.showLegends ?? true;
   const canvasMode = props.canvasMode;
-  const [rawData, setRawData] = (0, import_react34.useState)([]);
-  const [localLoading, setLocalLoading] = (0, import_react34.useState)(false);
+  const [rawData, setRawData] = (0, import_react35.useState)([]);
+  const [localLoading, setLocalLoading] = (0, import_react35.useState)(false);
   const effectiveData = apiUrl ? rawData : props.data || [];
   const effectiveLoading = apiUrl ? localLoading : externalLoading;
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!apiUrl) return;
     let cancelled = false;
     const fetchData = async () => {
       try {
         setLocalLoading(true);
-        const res = await import_axios3.default.get(apiUrl, {
+        const axiosClient = props.axiosInstance ?? import_axios3.default;
+        const res = await axiosClient.get(apiUrl, {
           withCredentials: true
         });
         if (!cancelled) {
@@ -31670,7 +31874,7 @@ var DonutChart = ({
       cancelled = true;
     };
   }, [apiUrl]);
-  const data = (0, import_react34.useMemo)(() => {
+  const data = (0, import_react35.useMemo)(() => {
     if (!Array.isArray(effectiveData) || effectiveData.length === 0) return [];
     return effectiveData.map((item) => ({
       ...item,
@@ -31679,11 +31883,11 @@ var DonutChart = ({
       [dataLabel]: item[dataLabel] ?? "Unknown"
     }));
   }, [effectiveData, dataKey, dataLabel]);
-  const total = (0, import_react34.useMemo)(
+  const total = (0, import_react35.useMemo)(
     () => data.reduce((sum, d) => sum + (d[dataKey] ?? 0), 0),
     [data, dataKey]
   );
-  const formattedTotal = (0, import_react34.useMemo)(() => {
+  const formattedTotal = (0, import_react35.useMemo)(() => {
     if (total >= 1e6) {
       return `${(total / 1e6).toFixed(1)}M`;
     }
@@ -31692,7 +31896,7 @@ var DonutChart = ({
     }
     return total.toString();
   }, [total]);
-  const chartData = (0, import_react34.useMemo)(() => {
+  const chartData = (0, import_react35.useMemo)(() => {
     if (total === 0) return data;
     const sortedData = [...data].sort((a, b) => (b[dataKey] ?? 0) - (a[dataKey] ?? 0));
     const minAngle = 360 / Math.max(12, sortedData.length);
@@ -31715,39 +31919,39 @@ var DonutChart = ({
     if (chartData.length <= 6) return { inner: 85, outer: 150 };
     return { inner: 70, outer: 130 };
   };
-  const [mounted, setMounted] = (0, import_react34.useState)(false);
-  (0, import_react34.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react35.useState)(false);
+  (0, import_react35.useEffect)(() => {
     const timeout = setTimeout(() => setMounted(true), 100);
     return () => clearTimeout(timeout);
   }, []);
-  const renderLegends = (0, import_react34.useMemo)(() => {
+  const renderLegends = (0, import_react35.useMemo)(() => {
     if (!showLegends) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex flex-wrap justify-center gap-2 mt-4 w-full max-w-4xl", children: chartData.map((d, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex flex-wrap justify-center gap-2 mt-4 w-full max-w-4xl", children: chartData.map((d, index) => {
       const actualValue = data.find(
         (item) => item[dataLabel] === d[dataLabel]
       )?.[dataKey] ?? d[dataKey];
       const displayValue = actualValue >= 1e3 ? `${(actualValue / 1e3).toFixed(0)}k` : actualValue.toLocaleString();
-      return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
         "div",
         {
           className: "flex items-center space-x-2 rounded-lg border border-gray-200/50 px-3 py-1.5 w-[48%] sm:w-[32%] md:w-auto bg-white/80 backdrop-blur-sm shadow-sm hover:shadow-md transition-all",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
               "span",
               {
                 className: "inline-block w-[12px] h-[12px] rounded-full shrink-0 border-2 border-white/50",
                 style: { backgroundColor: d.color }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "text-gray-900 text-[11px] md:text-[13px] font-semibold block truncate leading-tight", children: d[dataLabel] }),
-              /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center gap-1 text-xs text-gray-600 font-medium", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { children: displayValue }),
-                /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-gray-900 text-[11px] md:text-[13px] font-semibold block truncate leading-tight", children: d[dataLabel] }),
+              /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex items-center gap-1 text-xs text-gray-600 font-medium", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { children: displayValue }),
+                /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { children: [
                   (actualValue / total * 100).toFixed(1),
                   "%"
                 ] }),
-                d.isBoosted && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "text-[9px] px-1 py-0.5 bg-blue-100 text-blue-700 rounded-full", children: "min" })
+                d.isBoosted && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-[9px] px-1 py-0.5 bg-blue-100 text-blue-700 rounded-full", children: "min" })
               ] })
             ] })
           ]
@@ -31758,26 +31962,26 @@ var DonutChart = ({
   }, [chartData, data, dataLabel, dataKey, total, showLegends]);
   if (!mounted) return null;
   if (effectiveLoading || data.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
       "div",
       {
         className: `relative flex flex-col items-center w-full h-[300px] md:h-[400px] bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-6 ${className}`,
         style,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent animate-shimmer rounded-xl" }),
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "mt-6 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "inline-flex items-center space-x-2 bg-white/80 px-6 py-2 rounded-full backdrop-blur-sm border border-gray-200 shadow-lg", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "w-5 h-5 border-2 border-gray-300 border-t-blue-400 rounded-full animate-spin" }),
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "text-sm font-medium text-gray-600 bg-gradient-to-r from-gray-300 bg-clip-text animate-pulse", children: "Loading chart data..." })
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent animate-shimmer rounded-xl" }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "mt-6 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "inline-flex items-center space-x-2 bg-white/80 px-6 py-2 rounded-full backdrop-blur-sm border border-gray-200 shadow-lg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "w-5 h-5 border-2 border-gray-300 border-t-blue-400 rounded-full animate-spin" }),
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-sm font-medium text-gray-600 bg-gradient-to-r from-gray-300 bg-clip-text animate-pulse", children: "Loading chart data..." })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex flex-wrap justify-center gap-3 mt-8 w-full max-w-4xl", children: [...Array(18)].map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex flex-wrap justify-center gap-3 mt-8 w-full max-w-4xl", children: [...Array(18)].map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
             "div",
             {
               className: `h-10 w-[48%] sm:w-[32%] md:w-32 rounded-xl bg-gradient-to-r from-gray-200 via-gray-300/50 to-gray-200 p-3 flex items-center space-x-3 animate-slide-up stagger-${idx} shadow-sm border border-gray-200/50`,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "w-4 h-4 rounded-full bg-gradient-to-r from-blue-300 to-purple-300 animate-pulse" }),
-                /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex-1 space-y-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "h-3 w-20 bg-gray-300 rounded animate-pulse" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "h-2.5 w-16 bg-gray-200/60 rounded animate-pulse-delayed" })
+                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "w-4 h-4 rounded-full bg-gradient-to-r from-blue-300 to-purple-300 animate-pulse" }),
+                /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex-1 space-y-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "h-3 w-20 bg-gray-300 rounded animate-pulse" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "h-2.5 w-16 bg-gray-200/60 rounded animate-pulse-delayed" })
                 ] })
               ]
             },
@@ -31790,10 +31994,10 @@ var DonutChart = ({
   const { inner, outer } = getDynamicRadius();
   const innerRadius = inner;
   const outerRadius = outer;
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: `relative flex flex-col items-center ${className}`, style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "relative w-full md:w-[75%] h-[280px] md:h-[380px] flex items-center justify-center mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_recharts2.PieChart, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: `relative flex flex-col items-center ${className}`, style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "relative w-full md:w-[75%] h-[280px] md:h-[380px] flex items-center justify-center mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_recharts2.PieChart, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           import_recharts2.Pie,
           {
             data: chartData,
@@ -31806,7 +32010,7 @@ var DonutChart = ({
             isAnimationActive: true,
             animationDuration: 800,
             minAngle: 3,
-            children: chartData.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+            children: chartData.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
               import_recharts2.Cell,
               {
                 fill: entry.color,
@@ -31817,7 +32021,7 @@ var DonutChart = ({
             ))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           import_recharts2.Tooltip,
           {
             formatter: (value, name, payload) => {
@@ -31840,21 +32044,21 @@ var DonutChart = ({
           }
         )
       ] }) }),
-      total > 0 && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-center pointer-events-none ${forceMobile ? "text-xl px-2" : "text-3xl px-4"} font-bold bg-white/90 backdrop-blur-sm rounded-full py-1 shadow-lg`, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "text-[#1f2937] leading-tight", children: [
+      total > 0 && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-center pointer-events-none ${forceMobile ? "text-xl px-2" : "text-3xl px-4"} font-bold bg-white/90 backdrop-blur-sm rounded-full py-1 shadow-lg`, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "text-[#1f2937] leading-tight", children: [
         formattedTotal,
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "text-sm md:text-base font-normal text-gray-600 block md:inline-block md:ml-1", children: "total" })
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-sm md:text-base font-normal text-gray-600 block md:inline-block md:ml-1", children: "total" })
       ] }) })
     ] }),
     renderLegends
   ] });
 };
-var PieChart_default = import_react34.default.memo(DonutChart);
+var PieChart_default = import_react35.default.memo(DonutChart);
 
 // src/components/Blocks/EmailComposer.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc, setShowBcc, cc, setCc, bcc, setBcc, subject, setSubject, body, setBody }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "border rounded-md shadow bg-[#fff] p-4 mx-auto z-[50] relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "border rounded-md shadow bg-[#fff] p-4 mx-auto z-[50] relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       "input",
       {
         type: "email",
@@ -31863,8 +32067,8 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         required: true
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         "input",
         {
           type: "email",
@@ -31875,7 +32079,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
           required: true
         }
       ),
-      !showCc && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      !showCc && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         "button",
         {
           onClick: () => setShowCc?.(true),
@@ -31883,7 +32087,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
           children: "Cc"
         }
       ),
-      !showBcc && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      !showBcc && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         "button",
         {
           onClick: () => setShowBcc?.(true),
@@ -31892,7 +32096,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         }
       )
     ] }) }),
-    showCc && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    showCc && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       "input",
       {
         type: "text",
@@ -31902,7 +32106,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         className: "w-full flex-1 border-2 rounded-md h-[40px] px-3 focus:outline-none border-[#E9E9E9] text-[#383838]"
       }
     ) }),
-    showBcc && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    showBcc && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       "input",
       {
         type: "text",
@@ -31912,7 +32116,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         className: "w-full flex-1 border-2 rounded-md h-[40px] px-3 focus:outline-none border-[#E9E9E9] text-[#383838]"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       "input",
       {
         type: "text",
@@ -31922,11 +32126,11 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         className: "w-full flex-1 border-2 rounded-md h-[40px] px-3 focus:outline-none border-[#E9E9E9] text-[#383838]"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(MyEditor, { value: body, onChange: setBody }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { className: "px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100", children: "Discard" }),
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { className: "px-4 py-2 rounded-md border text-[#12715B] border-[#12715B]", children: "Reset" }),
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { className: "px-4 py-2 rounded-md bg-[#12715B] text-white", children: "Send" })
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(MyEditor, { value: body, onChange: setBody }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("button", { className: "px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100", children: "Discard" }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("button", { className: "px-4 py-2 rounded-md border text-[#12715B] border-[#12715B]", children: "Reset" }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("button", { className: "px-4 py-2 rounded-md bg-[#12715B] text-white", children: "Send" })
     ] })
   ] }) });
 }
@@ -31934,10 +32138,10 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
 // src/components/ui/sonner.tsx
 var import_next_themes = require("next-themes");
 var import_sonner2 = require("sonner");
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var Toaster = ({ ...props }) => {
   const { theme = "system" } = (0, import_next_themes.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
     import_sonner2.Toaster,
     {
       theme,
@@ -31969,6 +32173,7 @@ var Toaster = ({ ...props }) => {
   FileInput,
   FlexLayout,
   GridLayout,
+  HistoryTimeline,
   Icon,
   Image,
   Modal,