@algorithm-shift/design-system 1.2.995 → 1.2.996

package/dist/index.mjs

@@ -3164,7 +3164,7 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
 var TextInputGroup_default = TextInputGroup;
 
 // src/components/Inputs/Multiselect/MultiSelect.tsx
-import { useState as useState10, useRef as useRef7, useEffect as useEffect25, useMemo as useMemo5 } from "react";
+import { useState as useState10, useRef as useRef7, useEffect as useEffect25, useMemo as useMemo5, useCallback as useCallback3 } from "react";
 import { XIcon, XSquareIcon as XSquareIcon3 } from "lucide-react";
 import { Fragment as Fragment19, jsx as jsx48, jsxs as jsxs28 } from "react/jsx-runtime";
 function LazyMultiSelectDropdown({
@@ -3187,6 +3187,7 @@ function LazyMultiSelectDropdown({
 }) {
   const [isOpen, setIsOpen] = useState10(false);
   const [searchTerm, setSearchTerm] = useState10("");
+  const [selectedDetails, setSelectedDetails] = useState10({});
   const dropdownRef = useRef7(null);
   const observerTarget = useRef7(null);
   const ensureUnique = (arr) => {
@@ -3238,8 +3239,28 @@ function LazyMultiSelectDropdown({
     }
   };
   const selectedOptions = useMemo5(() => {
-    return lazyOptions.filter((opt) => normalizedValue.includes(opt.value));
-  }, [lazyOptions, normalizedValue]);
+    return normalizedValue.map((id2) => {
+      const fromLazy = lazyOptions.find((opt) => opt.value === id2);
+      if (fromLazy) return fromLazy;
+      if (selectedDetails[id2]) return selectedDetails[id2];
+      return { value: id2, label: id2 };
+    });
+  }, [normalizedValue, lazyOptions, selectedDetails]);
+  useEffect25(() => {
+    const newDetails = { ...selectedDetails };
+    normalizedValue.forEach((id2) => {
+      const option = lazyOptions.find((opt) => opt.value === id2);
+      if (option && !newDetails[id2]) {
+        newDetails[id2] = option;
+      }
+    });
+    Object.keys(newDetails).forEach((key) => {
+      if (!normalizedValue.includes(key)) {
+        delete newDetails[key];
+      }
+    });
+    setSelectedDetails(newDetails);
+  }, [normalizedValue, lazyOptions]);
   useEffect25(() => {
     const handleClick = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
@@ -3265,7 +3286,7 @@ function LazyMultiSelectDropdown({
     setSearchTerm(term);
     search(term);
   };
-  const toggleSelect = (val) => {
+  const toggleSelect = useCallback3((val) => {
     let updated;
     if (normalizedValue.includes(val)) {
       updated = normalizedValue.filter((v) => v !== val);
@@ -3273,14 +3294,18 @@ function LazyMultiSelectDropdown({
       updated = ensureUnique([...normalizedValue, val]);
     }
     onChange?.(convertOutput(updated), id);
-  };
+  }, [normalizedValue, onChange, id, convertOutput]);
   const removeTag = (val) => {
     const updated = normalizedValue.filter((v) => v !== val);
     onChange?.(convertOutput(updated), id);
   };
   const handleFocus = () => {
-    if (!disabled) setIsOpen(true);
-    if (lazyOptions.length === 0) loadPage(1, "");
+    if (!disabled) {
+      setIsOpen(true);
+      if (lazyOptions.length === 0) {
+        loadPage(1, "");
+      }
+    }
   };
   return /* @__PURE__ */ jsxs28("div", { ref: dropdownRef, className: "relative w-full", children: [
     /* @__PURE__ */ jsxs28(
@@ -3923,9 +3948,9 @@ function DataTable({
     setLocalPageSize(newSize);
   };
   const pageSizeOptions = React10.useMemo(() => {
-    const options = [10, 20, 50, 100].filter((size) => size < totalRecords);
+    const options = [5, 10, 20, 50, 100].filter((size) => size < totalRecords);
     if (options.length === 0) {
-      options.push(10);
+      options.push(5);
     }
     return options;
   }, [totalRecords]);
@@ -4688,7 +4713,7 @@ var HistoryTimeline = ({
 var HistoryTimeline_default = HistoryTimeline;
 
 // src/components/Navigation/Tabs/Tabs.tsx
-import { useCallback as useCallback3, useMemo as useMemo8, useState as useState12 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo8, useState as useState12 } from "react";
 import { ChevronDown as ChevronDown2, Menu } from "lucide-react";
 import Link3 from "next/link";
 import { usePathname, useRouter } from "next/navigation";
@@ -4915,7 +4940,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
   const router = useRouter();
   const [showExitDialog, setShowExitDialog] = useState12(false);
   const [pendingUrl, setPendingUrl] = useState12(null);
-  const handleBuilderExit = useCallback3(
+  const handleBuilderExit = useCallback4(
     (e, url) => {
       if (isBuilder) {
         e.preventDefault();
@@ -5083,7 +5108,59 @@ var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
 import React11, { useEffect as useEffect26, useState as useState13 } from "react";
+
+// src/components/ui/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { jsx as jsx60, jsxs as jsxs37 } from "react/jsx-runtime";
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx60(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx60(TooltipProvider, { children: /* @__PURE__ */ jsx60(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx60(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx60(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs37(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx60(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+
+// src/components/Navigation/Stages/Stages.tsx
+import { jsx as jsx61, jsxs as jsxs38 } from "react/jsx-runtime";
 var StagesComponent = ({
   stages,
   isShowBtn,
@@ -5101,6 +5178,8 @@ var StagesComponent = ({
 }) => {
   const [activeStage, setActiveStage] = useState13("");
   const [isCompleted, setIsCompleted] = useState13(false);
+  const [activeChildStage, setActiveChildStage] = useState13(null);
+  const [activeRootStage, setActiveRootStage] = useState13(null);
   useEffect26(() => {
     if (currentStage) {
       setActiveStage(currentStage);
@@ -5111,6 +5190,9 @@ var StagesComponent = ({
   const updateStage = (stageKey) => {
     setActiveStage(stageKey);
     onStageChange?.(stageKey);
+    const { activeRoot, activeChild } = findStageContext(stages, stageKey);
+    setActiveRootStage(activeRoot);
+    setActiveChildStage(activeChild);
   };
   const nextStage = () => {
     if (!stages || stages.length === 0) return;
@@ -5136,9 +5218,41 @@ var StagesComponent = ({
       onStageChange?.(stageKey);
     }
   };
-  const isAllStagesCompleted = isCompleted || currentStage === lastStage;
+  const findStageContext = (nodes, curr, root = null) => {
+    if (!nodes || nodes.length === 0) {
+      return { activeRoot: null, activeChild: null };
+    }
+    if (!Array.isArray(nodes)) {
+      return { activeRoot: null, activeChild: null };
+    }
+    for (const node of nodes) {
+      const currentRoot = root ?? node;
+      if (node?.[dataKey] === curr) {
+        return {
+          activeRoot: root ?? node,
+          activeChild: node
+        };
+      }
+      const result = findStageContext(node?.children, curr, currentRoot);
+      if (result.activeChild) {
+        return result;
+      }
+    }
+    return { activeRoot: null, activeChild: null };
+  };
+  useEffect26(() => {
+    if (!currentStage || !Array.isArray(stages)) {
+      setActiveRootStage(null);
+      setActiveChildStage(null);
+      return;
+    }
+    const { activeRoot, activeChild } = findStageContext(stages, currentStage);
+    setActiveRootStage(activeRoot);
+    setActiveChildStage(activeChild);
+  }, [currentStage, stages]);
+  const isAllStagesCompleted = isCompleted || activeRootStage?.[dataKey] === lastStage;
   const disabled = isAllStagesCompleted || loading || saving;
-  return /* @__PURE__ */ jsx60("div", { className, style, children: /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsx61("div", { className, style, children: /* @__PURE__ */ jsxs38(
     "div",
     {
       className: `
@@ -5148,8 +5262,8 @@ var StagesComponent = ({
         ${isMobile ? "p-3 sm:p-4" : "p-2"}
       `,
       children: [
-        /* @__PURE__ */ jsx60("div", { className: "flex items-center flex-shrink-0 order-1 lg:order-1", children: /* @__PURE__ */ jsx60("button", { className: "p-2 hover:bg-gray-100 rounded flex-shrink-0", children: /* @__PURE__ */ jsx60("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx60("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx61("div", { className: "flex items-center flex-shrink-0 order-1 lg:order-1", children: /* @__PURE__ */ jsx61("button", { className: "p-2 hover:bg-gray-100 rounded flex-shrink-0", children: /* @__PURE__ */ jsx61("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx61("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
+        /* @__PURE__ */ jsx61(
           "div",
           {
             className: `
@@ -5157,7 +5271,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__ */ jsx60(
+            children: loading ? Array(6).fill(null).map((_, index) => /* @__PURE__ */ jsx61(
               "button",
               {
                 className: `
@@ -5171,41 +5285,49 @@ var StagesComponent = ({
                 disabled: true
               },
               index
-            )) : stages?.length > 0 && stages?.map((stage, index) => {
+            )) : (stages || [])?.length > 0 && stages?.map((stage, index) => {
               const currentIndex = stages.findIndex((s) => s[dataKey] === activeStage);
               const isCompletedStage = isAllStagesCompleted || index <= currentIndex;
               const isActive = !isAllStagesCompleted && index === currentIndex;
-              return /* @__PURE__ */ jsxs37(React11.Fragment, { children: [
-                /* @__PURE__ */ jsx60(
+              let stageColor = !stage.isSuccess ? "bg-red-50 text-red-700 border-2 border-red-700" : "bg-green-50 text-green-700 border-2 border-green-700";
+              let stageLabel = stage[dataLabel];
+              if (stage[dataKey] !== activeChildStage?.[dataKey] && activeRootStage?.[dataKey] === stage[dataKey]) {
+                stageLabel = activeChildStage?.[dataLabel] || stageLabel;
+                stageColor = activeChildStage?.isSuccess ? "bg-green-50 text-green-700 border-2 border-green-700" : "bg-red-50 text-red-700 border-2 border-red-700";
+              }
+              const stageKey = typeof stage[dataKey] === "string" ? stage[dataKey] : JSON.stringify(stage[dataKey]);
+              return /* @__PURE__ */ jsx61(React11.Fragment, { children: /* @__PURE__ */ jsxs38(Tooltip, { delayDuration: 500, disableHoverableContent: true, children: [
+                /* @__PURE__ */ jsx61(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx61(
                   "button",
                   {
                     className: `
                     min-w-[70px] sm:min-w-[80px] w-full sm:w-auto px-3 sm:px-4 py-1.5 sm:py-2 
                     rounded-full text-xs sm:text-sm font-medium transition-colors duration-200 
-                    whitespace-normal sm:whitespace-nowrap flex-shrink-0
-                    ${isActive ? "bg-green-700 text-white shadow-md" : isCompletedStage ? "bg-green-50 text-green-700 border-2 border-green-700" : "bg-white text-gray-700 hover:bg-gray-100 border border-gray-200"}
+                    whitespace-normal sm:whitespace-nowrap flex-shrink-0 max-w-[150px] text-ellipsis overflow-hidden
+                    ${isActive ? "bg-green-700 text-white shadow-md" : isCompletedStage ? stageColor : "bg-white text-gray-700 hover:bg-gray-100 border border-gray-200"}
                     ${isMobile ? "flex-1 text-center py-2.5" : ""}
                   `,
                     onClick: () => {
                       if (isAllStagesCompleted) return;
                       onStageClick(stage[dataKey]);
                     },
-                    children: stage[dataLabel]
+                    children: stageLabel
                   }
-                ),
-                !isMobile && index < stages.length - 1 && /* @__PURE__ */ jsx60("div", { className: "hidden sm:flex sm:flex-shrink-0 w-3 h-px bg-gray-300 sm:w-4" })
-              ] }, stage.id);
+                ) }),
+                /* @__PURE__ */ jsx61(TooltipContent, { className: "max-w-[400px] p-3 text-xs text-muted-foreground space-y-2", children: /* @__PURE__ */ jsx61("span", { children: /* @__PURE__ */ jsx61("b", { children: stageLabel }) }) }),
+                !isMobile && index < stages.length - 1 && /* @__PURE__ */ jsx61("div", { className: "hidden sm:flex sm:flex-shrink-0 w-3 h-px bg-gray-300 sm:w-4" })
+              ] }, stageKey) }, stageKey);
             })
           }
         ),
-        isShowBtn && /* @__PURE__ */ jsx60(
+        isShowBtn && /* @__PURE__ */ jsx61(
           "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__ */ jsx60(
+            children: /* @__PURE__ */ jsx61(
               "button",
               {
                 className: `
@@ -5227,23 +5349,23 @@ var StagesComponent = ({
 var Stages_default = StagesComponent;
 
 // src/components/Navigation/Spacer/Spacer.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 var Spacer = ({ className, style }) => {
-  return /* @__PURE__ */ jsx61("div", { className: `${className}`, style });
+  return /* @__PURE__ */ jsx62("div", { className: `${className}`, style });
 };
 var Spacer_default = Spacer;
 
 // src/components/Navigation/Profile/Profile.tsx
-import { jsx as jsx62, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs39 } from "react/jsx-runtime";
 
 // src/components/Navigation/Notification/Notification.tsx
-import { jsx as jsx63, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs40 } from "react/jsx-runtime";
 
 // src/components/Navigation/Logo/Logo.tsx
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 
 // src/components/Navigation/Navbar/Navbar.tsx
-import { useCallback as useCallback4, useMemo as useMemo9, useState as useState14, useEffect as useEffect27 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo9, useState as useState14, useEffect as useEffect27 } from "react";
 import { Bell, Search as Search2, Menu as Menu2 } from "lucide-react";
 import Image3 from "next/image";
 import Link4 from "next/link";
@@ -5252,8 +5374,8 @@ import { useRouter as useRouter2 } from "next/navigation";
 // src/components/ui/avatar.tsx
 import * as React12 from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { jsx as jsx65 } from "react/jsx-runtime";
-var Avatar = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx65(
+import { jsx as jsx66 } from "react/jsx-runtime";
+var Avatar = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx66(
   AvatarPrimitive.Root,
   {
     ref,
@@ -5265,7 +5387,7 @@ var Avatar = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx65(
+var AvatarImage = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx66(
   AvatarPrimitive.Image,
   {
     ref,
@@ -5274,7 +5396,7 @@ var AvatarImage = React12.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx65(
+var AvatarFallback = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx66(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -5288,7 +5410,7 @@ var AvatarFallback = React12.forwardRef(({ className, ...props }, ref) => /* @__
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 // src/components/Navigation/Navbar/Navbar.tsx
-import { Fragment as Fragment23, jsx as jsx66, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx67, jsxs as jsxs41 } from "react/jsx-runtime";
 function Navbar({
   style,
   badgeType,
@@ -5326,7 +5448,7 @@ function Navbar({
   const isMobile = mode === "mobile";
   const isTablet = mode === "tablet";
   const isDesktop = mode === "desktop";
-  const handleBuilderExit = useCallback4(
+  const handleBuilderExit = useCallback5(
     (e, url) => {
       if (isBuilder) {
         e.preventDefault();
@@ -5346,9 +5468,9 @@ function Navbar({
     }
     return list;
   }, [source, navList, list]);
-  const RenderSearchInput = () => /* @__PURE__ */ jsx66("div", { className: "flex-1 px-2", children: /* @__PURE__ */ jsxs40("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
-    /* @__PURE__ */ jsx66(Search2, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dark:text-white text-gray-400" }),
-    /* @__PURE__ */ jsx66(
+  const RenderSearchInput = () => /* @__PURE__ */ jsx67("div", { className: "flex-1 px-2", children: /* @__PURE__ */ jsxs41("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
+    /* @__PURE__ */ jsx67(Search2, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dark:text-white text-gray-400" }),
+    /* @__PURE__ */ jsx67(
       Input,
       {
         placeholder: "Search",
@@ -5364,23 +5486,23 @@ function Navbar({
       }
     )
   ] }) });
-  return /* @__PURE__ */ jsxs40(Fragment23, { children: [
-    /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsxs41(Fragment23, { children: [
+    /* @__PURE__ */ jsx67(
       "nav",
       {
         className: "w-full min-h-[75px] border-b border-gray-200 dark:border-gray-800 dark:bg-gray-800 bg-white shadow-sm",
         style,
-        children: /* @__PURE__ */ jsxs40("div", { className: "mx-auto flex max-w-[90%] items-center justify-between px-4 py-4", children: [
-          /* @__PURE__ */ jsx66(
+        children: /* @__PURE__ */ jsxs41("div", { className: "mx-auto flex max-w-[90%] items-center justify-between px-4 py-4", children: [
+          /* @__PURE__ */ jsx67(
             Link4,
             {
               href: "/",
               onClick: (e) => handleBuilderExit(e, "/"),
               className: "flex items-center space-x-2",
-              children: imageUrl ? /* @__PURE__ */ jsx66(Image3, { src: imageUrl, alt: altText, width: 180, height: 40 }) : /* @__PURE__ */ jsx66("span", { className: "font-semibold text-blue-700", children: "Logo" })
+              children: imageUrl ? /* @__PURE__ */ jsx67(Image3, { src: imageUrl, alt: altText, width: 180, height: 40 }) : /* @__PURE__ */ jsx67("span", { className: "font-semibold text-blue-700", children: "Logo" })
             }
           ),
-          isDesktop && /* @__PURE__ */ jsx66("div", { className: "hidden md:flex items-center space-x-6", children: formattedMenu.map((item) => /* @__PURE__ */ jsx66(
+          isDesktop && /* @__PURE__ */ jsx67("div", { className: "hidden md:flex items-center space-x-6", children: formattedMenu.map((item) => /* @__PURE__ */ jsx67(
             Link4,
             {
               href: item.url,
@@ -5390,23 +5512,23 @@ function Navbar({
             },
             item.id
           )) }),
-          /* @__PURE__ */ jsxs40("div", { className: "flex items-center space-x-3", children: [
-            (isDesktop || isTablet) && /* @__PURE__ */ jsx66(RenderSearchInput, {}),
-            /* @__PURE__ */ jsxs40("div", { className: "relative bg-gray-200 dark:bg-gray-700 rounded-md", children: [
-              /* @__PURE__ */ jsx66(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx66(Bell, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }) }),
-              badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ jsx66("span", { className: "absolute -top-1 -right-1 h-4 w-4 flex items-center justify-center bg-red-500 rounded-full text-white text-[10px]", children: badgeCount }) : !hideBadgeWhenZero && /* @__PURE__ */ jsx66("span", { className: "absolute -top-1 -right-1 h-2 w-2 bg-red-500 rounded-full" })
+          /* @__PURE__ */ jsxs41("div", { className: "flex items-center space-x-3", children: [
+            (isDesktop || isTablet) && /* @__PURE__ */ jsx67(RenderSearchInput, {}),
+            /* @__PURE__ */ jsxs41("div", { className: "relative bg-gray-200 dark:bg-gray-700 rounded-md", children: [
+              /* @__PURE__ */ jsx67(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx67(Bell, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }) }),
+              badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ jsx67("span", { className: "absolute -top-1 -right-1 h-4 w-4 flex items-center justify-center bg-red-500 rounded-full text-white text-[10px]", children: badgeCount }) : !hideBadgeWhenZero && /* @__PURE__ */ jsx67("span", { className: "absolute -top-1 -right-1 h-2 w-2 bg-red-500 rounded-full" })
             ] }),
-            /* @__PURE__ */ jsxs40(DropdownMenu, { children: [
-              /* @__PURE__ */ jsx66(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs40("div", { className: "flex items-center space-x-2 cursor-pointer", children: [
-                !isMobile && showName && /* @__PURE__ */ jsx66("h4", { className: "text-gray-900 dark:text-gray-300 text-sm", children: userName }),
-                /* @__PURE__ */ jsx66(Avatar, { className: "h-8 w-8", children: profileType === "avatar" ? /* @__PURE__ */ jsx66(AvatarImage, { src: "/images/appbuilder/toolset/profile.svg", alt: "profile" }) : /* @__PURE__ */ jsx66("div", { className: "bg-green-700 text-white h-full w-full rounded-full flex items-center justify-center text-xs", children: getInitials(userName) }) }),
-                (isMobile || isTablet) && /* @__PURE__ */ jsx66(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx66(Menu2, { className: "h-6 w-6" }) })
+            /* @__PURE__ */ jsxs41(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx67(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs41("div", { className: "flex items-center space-x-2 cursor-pointer", children: [
+                !isMobile && showName && /* @__PURE__ */ jsx67("h4", { className: "text-gray-900 dark:text-gray-300 text-sm", children: userName }),
+                /* @__PURE__ */ jsx67(Avatar, { className: "h-8 w-8", children: profileType === "avatar" ? /* @__PURE__ */ jsx67(AvatarImage, { src: "/images/appbuilder/toolset/profile.svg", alt: "profile" }) : /* @__PURE__ */ jsx67("div", { className: "bg-green-700 text-white h-full w-full rounded-full flex items-center justify-center text-xs", children: getInitials(userName) }) }),
+                (isMobile || isTablet) && /* @__PURE__ */ jsx67(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx67(Menu2, { className: "h-6 w-6" }) })
               ] }) }),
-              /* @__PURE__ */ jsxs40(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-gray-800", children: [
-                profileMenu.map((item) => /* @__PURE__ */ jsx66(DropdownMenuItem, { children: /* @__PURE__ */ jsx66(Link4, { href: item.url, onClick: (e) => handleBuilderExit(e, item.url), children: item.header }) }, item.id)),
-                (isMobile || isTablet) && /* @__PURE__ */ jsxs40(Fragment23, { children: [
-                  /* @__PURE__ */ jsx66(DropdownMenuSeparator, {}),
-                  formattedMenu.map((item) => /* @__PURE__ */ jsx66(DropdownMenuItem, { children: /* @__PURE__ */ jsx66(Link4, { href: item.url, onClick: (e) => handleBuilderExit(e, item.url), children: item.header }) }, item.id))
+              /* @__PURE__ */ jsxs41(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-gray-800", children: [
+                profileMenu.map((item) => /* @__PURE__ */ jsx67(DropdownMenuItem, { children: /* @__PURE__ */ jsx67(Link4, { href: item.url, onClick: (e) => handleBuilderExit(e, item.url), children: item.header }) }, item.id)),
+                (isMobile || isTablet) && /* @__PURE__ */ jsxs41(Fragment23, { children: [
+                  /* @__PURE__ */ jsx67(DropdownMenuSeparator, {}),
+                  formattedMenu.map((item) => /* @__PURE__ */ jsx67(DropdownMenuItem, { children: /* @__PURE__ */ jsx67(Link4, { href: item.url, onClick: (e) => handleBuilderExit(e, item.url), children: item.header }) }, item.id))
                 ] })
               ] })
             ] })
@@ -5414,12 +5536,12 @@ function Navbar({
         ] })
       }
     ),
-    isMobile && /* @__PURE__ */ jsx66("div", { className: "p-3", children: /* @__PURE__ */ jsx66(RenderSearchInput, {}) })
+    isMobile && /* @__PURE__ */ jsx67("div", { className: "p-3", children: /* @__PURE__ */ jsx67(RenderSearchInput, {}) })
   ] });
 }
 
 // src/components/Chart/BarChart.tsx
-import React13, { useEffect as useEffect28, useMemo as useMemo10, useState as useState15, useCallback as useCallback5 } from "react";
+import React13, { useEffect as useEffect28, useMemo as useMemo10, useState as useState15, useCallback as useCallback6 } from "react";
 import axios3 from "axios";
 import {
   BarChart,
@@ -5429,11 +5551,11 @@ import {
   XAxis,
   YAxis,
   CartesianGrid,
-  Tooltip,
+  Tooltip as Tooltip2,
   ResponsiveContainer,
   Legend
 } from "recharts";
-import { jsx as jsx67, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs42 } from "react/jsx-runtime";
 var getRandomColor = () => {
   const palette = [
     "#2563eb",
@@ -5502,7 +5624,7 @@ var ChartComponent = ({
       setCurrentPage(1);
     }
   }, [apiUrl]);
-  const fetchData = useCallback5(async (page) => {
+  const fetchData = useCallback6(async (page) => {
     if (!apiUrl) return;
     const cancelled = false;
     try {
@@ -5560,27 +5682,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__ */ jsxs41(
+    return /* @__PURE__ */ jsxs42(
       "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__ */ jsx67("div", { className: "mb-6 flex justify-center", children: /* @__PURE__ */ jsxs41("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__ */ jsx67("div", { className: "w-5 h-5 border-2 border-gray-400 border-t-blue-500 rounded-full animate-spin" }),
-            /* @__PURE__ */ jsx67("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__ */ jsx68("div", { className: "mb-6 flex justify-center", children: /* @__PURE__ */ jsxs42("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__ */ jsx68("div", { className: "w-5 h-5 border-2 border-gray-400 border-t-blue-500 rounded-full animate-spin" }),
+            /* @__PURE__ */ jsx68("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__ */ jsx67("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent animate-shimmer rounded-xl" }),
-          /* @__PURE__ */ jsx67("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__ */ jsx67("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__ */ jsx68("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent animate-shimmer rounded-xl" }),
+          /* @__PURE__ */ jsx68("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__ */ jsx68("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__ */ jsxs41(
+            return /* @__PURE__ */ jsxs42(
               "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__ */ jsx67("div", { className: "absolute inset-0 bg-gradient-to-r from-white/40 via-transparent to-white/40 animate-shimmer-bar" }),
-                  /* @__PURE__ */ jsx67("div", { className: "absolute bottom-1 left-1/2 w-4 h-1 rounded-full transform -translate-x-1/2 blur-sm" })
+                  /* @__PURE__ */ jsx68("div", { className: "absolute inset-0 bg-gradient-to-r from-white/40 via-transparent to-white/40 animate-shimmer-bar" }),
+                  /* @__PURE__ */ jsx68("div", { className: "absolute bottom-1 left-1/2 w-4 h-1 rounded-full transform -translate-x-1/2 blur-sm" })
                 ]
               },
               `bar-${idx}`
@@ -5590,9 +5712,9 @@ var ChartComponent = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs41("div", { className: `${className} h-[450px]`, style, children: [
-    isPaginationEnabled && rawMeta && /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between mb-4 px-2", children: [
-      /* @__PURE__ */ jsxs41("div", { className: "text-sm text-gray-600 hidden sm:block", children: [
+  return /* @__PURE__ */ jsxs42("div", { className: `${className} h-[450px]`, style, children: [
+    isPaginationEnabled && rawMeta && /* @__PURE__ */ jsxs42("div", { className: "flex items-center justify-between mb-4 px-2", children: [
+      /* @__PURE__ */ jsxs42("div", { className: "text-sm text-gray-600 hidden sm:block", children: [
         "Page ",
         rawMeta.page,
         " of ",
@@ -5601,52 +5723,52 @@ var ChartComponent = ({
         rawMeta.total.toLocaleString(),
         " total records)"
       ] }),
-      /* @__PURE__ */ jsxs41("div", { className: "flex items-center space-x-2 sm:hidden w-full justify-center", children: [
-        /* @__PURE__ */ jsx67(
+      /* @__PURE__ */ jsxs42("div", { className: "flex items-center space-x-2 sm:hidden w-full justify-center", children: [
+        /* @__PURE__ */ jsx68(
           "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__ */ jsx67("span", { children: "\u2190 Prev" })
+            children: /* @__PURE__ */ jsx68("span", { children: "\u2190 Prev" })
           }
         ),
-        /* @__PURE__ */ jsx67("span", { className: "px-2 py-2 text-xs font-semibold text-gray-700 min-w-[36px] text-center flex-shrink-0", children: currentPage }),
-        /* @__PURE__ */ jsx67(
+        /* @__PURE__ */ jsx68("span", { className: "px-2 py-2 text-xs font-semibold text-gray-700 min-w-[36px] text-center flex-shrink-0", children: currentPage }),
+        /* @__PURE__ */ jsx68(
           "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__ */ jsx67("span", { children: "Next \u2192" })
+            children: /* @__PURE__ */ jsx68("span", { children: "Next \u2192" })
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs41("div", { className: "flex items-center space-x-2 hidden sm:flex", children: [
-        /* @__PURE__ */ jsx67(
+      /* @__PURE__ */ jsxs42("div", { className: "flex items-center space-x-2 hidden sm:flex", children: [
+        /* @__PURE__ */ jsx68(
           "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__ */ jsx67("span", { children: "\u2190 Prev" })
+            children: /* @__PURE__ */ jsx68("span", { children: "\u2190 Prev" })
           }
         ),
-        /* @__PURE__ */ jsx67("span", { className: "px-3 py-1 text-sm font-medium text-gray-700", children: currentPage }),
-        /* @__PURE__ */ jsx67(
+        /* @__PURE__ */ jsx68("span", { className: "px-3 py-1 text-sm font-medium text-gray-700", children: currentPage }),
+        /* @__PURE__ */ jsx68(
           "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__ */ jsx67("span", { children: "Next \u2192" })
+            children: /* @__PURE__ */ jsx68("span", { children: "Next \u2192" })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx67(ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ jsxs41(BarChart, { data, children: [
-      /* @__PURE__ */ jsx67(CartesianGrid, { strokeDasharray: "3 3" }),
-      /* @__PURE__ */ jsx67(
+    /* @__PURE__ */ jsx68(ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ jsxs42(BarChart, { data, children: [
+      /* @__PURE__ */ jsx68(CartesianGrid, { strokeDasharray: "3 3" }),
+      /* @__PURE__ */ jsx68(
         XAxis,
         {
           dataKey: dataLabel,
@@ -5664,7 +5786,7 @@ var ChartComponent = ({
           className: "hidden sm:block"
         }
       ),
-      /* @__PURE__ */ jsx67(
+      /* @__PURE__ */ jsx68(
         YAxis,
         {
           tickFormatter: (value) => `${(value / 1e3).toFixed(0)}k`,
@@ -5677,9 +5799,9 @@ var ChartComponent = ({
           width: 60
         }
       ),
-      /* @__PURE__ */ jsx67(Tooltip, { formatter: (value) => [`${value}`, "Count"] }),
-      /* @__PURE__ */ jsx67(Legend, { verticalAlign: legendsPosition, align: "center" }),
-      /* @__PURE__ */ jsx67(
+      /* @__PURE__ */ jsx68(Tooltip2, { formatter: (value) => [`${value}`, "Count"] }),
+      /* @__PURE__ */ jsx68(Legend, { verticalAlign: legendsPosition, align: "center" }),
+      /* @__PURE__ */ jsx68(
         Bar,
         {
           dataKey,
@@ -5687,13 +5809,13 @@ var ChartComponent = ({
           isAnimationActive: false
         }
       )
-    ] }) : /* @__PURE__ */ jsxs41(AreaChart, { data, children: [
-      /* @__PURE__ */ jsx67("defs", { children: /* @__PURE__ */ jsxs41("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-        /* @__PURE__ */ jsx67("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
-        /* @__PURE__ */ jsx67("stop", { offset: "95%", stopColor: "#00695C", stopOpacity: 0 })
+    ] }) : /* @__PURE__ */ jsxs42(AreaChart, { data, children: [
+      /* @__PURE__ */ jsx68("defs", { children: /* @__PURE__ */ jsxs42("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ jsx68("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
+        /* @__PURE__ */ jsx68("stop", { offset: "95%", stopColor: "#00695C", stopOpacity: 0 })
       ] }) }),
-      /* @__PURE__ */ jsx67(CartesianGrid, { strokeDasharray: "3 3" }),
-      /* @__PURE__ */ jsx67(
+      /* @__PURE__ */ jsx68(CartesianGrid, { strokeDasharray: "3 3" }),
+      /* @__PURE__ */ jsx68(
         XAxis,
         {
           dataKey: dataLabel,
@@ -5707,7 +5829,7 @@ var ChartComponent = ({
           }
         }
       ),
-      /* @__PURE__ */ jsx67(
+      /* @__PURE__ */ jsx68(
         YAxis,
         {
           tickFormatter: (value) => `${(value / 1e3).toFixed(0)}k`,
@@ -5720,8 +5842,8 @@ var ChartComponent = ({
           width: 60
         }
       ),
-      /* @__PURE__ */ jsx67(Tooltip, { formatter: (value) => `${value}k` }),
-      /* @__PURE__ */ jsx67(
+      /* @__PURE__ */ jsx68(Tooltip2, { formatter: (value) => `${value}k` }),
+      /* @__PURE__ */ jsx68(
         Area,
         {
           type: "monotone",
@@ -5745,9 +5867,9 @@ import {
   Pie,
   Cell,
   ResponsiveContainer as ResponsiveContainer2,
-  Tooltip as Tooltip2
+  Tooltip as Tooltip3
 } from "recharts";
-import { jsx as jsx68, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs43 } from "react/jsx-runtime";
 var getRandomColor2 = () => {
   const palette = [
     "#2563eb",
@@ -5916,32 +6038,32 @@ var DonutChart = ({
   }, []);
   const renderLegends = useMemo11(() => {
     if (!showLegends) return null;
-    return /* @__PURE__ */ jsx68("div", { className: "flex flex-wrap justify-center gap-2 mt-4 w-full max-w-4xl", children: chartData.map((d, index) => {
+    return /* @__PURE__ */ jsx69("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__ */ jsxs42(
+      return /* @__PURE__ */ jsxs43(
         "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__ */ jsx68(
+            /* @__PURE__ */ jsx69(
               "span",
               {
                 className: "inline-block w-[12px] h-[12px] rounded-full shrink-0 border-2 border-white/50",
                 style: { backgroundColor: d.color }
               }
             ),
-            /* @__PURE__ */ jsxs42("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx68("span", { className: "text-gray-900 text-[11px] md:text-[13px] font-semibold block truncate leading-tight", children: d[dataLabel] }),
-              /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-1 text-xs text-gray-600 font-medium", children: [
-                /* @__PURE__ */ jsx68("span", { children: displayValue }),
-                /* @__PURE__ */ jsxs42("span", { children: [
+            /* @__PURE__ */ jsxs43("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx69("span", { className: "text-gray-900 text-[11px] md:text-[13px] font-semibold block truncate leading-tight", children: d[dataLabel] }),
+              /* @__PURE__ */ jsxs43("div", { className: "flex items-center gap-1 text-xs text-gray-600 font-medium", children: [
+                /* @__PURE__ */ jsx69("span", { children: displayValue }),
+                /* @__PURE__ */ jsxs43("span", { children: [
                   (actualValue / total * 100).toFixed(1),
                   "%"
                 ] }),
-                d.isBoosted && /* @__PURE__ */ jsx68("span", { className: "text-[9px] px-1 py-0.5 bg-blue-100 text-blue-700 rounded-full", children: "min" })
+                d.isBoosted && /* @__PURE__ */ jsx69("span", { className: "text-[9px] px-1 py-0.5 bg-blue-100 text-blue-700 rounded-full", children: "min" })
               ] })
             ] })
           ]
@@ -5952,26 +6074,26 @@ var DonutChart = ({
   }, [chartData, data, dataLabel, dataKey, total, showLegends]);
   if (!mounted) return null;
   if (effectiveLoading || data.length === 0) {
-    return /* @__PURE__ */ jsxs42(
+    return /* @__PURE__ */ jsxs43(
       "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__ */ jsx68("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent animate-shimmer rounded-xl" }),
-          /* @__PURE__ */ jsx68("div", { className: "mt-6 text-center", children: /* @__PURE__ */ jsxs42("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__ */ jsx68("div", { className: "w-5 h-5 border-2 border-gray-300 border-t-blue-400 rounded-full animate-spin" }),
-            /* @__PURE__ */ jsx68("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__ */ jsx69("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent animate-shimmer rounded-xl" }),
+          /* @__PURE__ */ jsx69("div", { className: "mt-6 text-center", children: /* @__PURE__ */ jsxs43("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__ */ jsx69("div", { className: "w-5 h-5 border-2 border-gray-300 border-t-blue-400 rounded-full animate-spin" }),
+            /* @__PURE__ */ jsx69("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__ */ jsx68("div", { className: "flex flex-wrap justify-center gap-3 mt-8 w-full max-w-4xl", children: [...Array(18)].map((_, idx) => /* @__PURE__ */ jsxs42(
+          /* @__PURE__ */ jsx69("div", { className: "flex flex-wrap justify-center gap-3 mt-8 w-full max-w-4xl", children: [...Array(18)].map((_, idx) => /* @__PURE__ */ jsxs43(
             "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__ */ jsx68("div", { className: "w-4 h-4 rounded-full bg-gradient-to-r from-blue-300 to-purple-300 animate-pulse" }),
-                /* @__PURE__ */ jsxs42("div", { className: "flex-1 space-y-1", children: [
-                  /* @__PURE__ */ jsx68("div", { className: "h-3 w-20 bg-gray-300 rounded animate-pulse" }),
-                  /* @__PURE__ */ jsx68("div", { className: "h-2.5 w-16 bg-gray-200/60 rounded animate-pulse-delayed" })
+                /* @__PURE__ */ jsx69("div", { className: "w-4 h-4 rounded-full bg-gradient-to-r from-blue-300 to-purple-300 animate-pulse" }),
+                /* @__PURE__ */ jsxs43("div", { className: "flex-1 space-y-1", children: [
+                  /* @__PURE__ */ jsx69("div", { className: "h-3 w-20 bg-gray-300 rounded animate-pulse" }),
+                  /* @__PURE__ */ jsx69("div", { className: "h-2.5 w-16 bg-gray-200/60 rounded animate-pulse-delayed" })
                 ] })
               ]
             },
@@ -5984,10 +6106,10 @@ var DonutChart = ({
   const { inner, outer } = getDynamicRadius();
   const innerRadius = inner;
   const outerRadius = outer;
-  return /* @__PURE__ */ jsxs42("div", { className: `relative flex flex-col items-center ${className}`, style, children: [
-    /* @__PURE__ */ jsxs42("div", { className: "relative w-full md:w-[75%] h-[280px] md:h-[380px] flex items-center justify-center mb-2", children: [
-      /* @__PURE__ */ jsx68(ResponsiveContainer2, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs42(PieChart, { children: [
-        /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsxs43("div", { className: `relative flex flex-col items-center ${className}`, style, children: [
+    /* @__PURE__ */ jsxs43("div", { className: "relative w-full md:w-[75%] h-[280px] md:h-[380px] flex items-center justify-center mb-2", children: [
+      /* @__PURE__ */ jsx69(ResponsiveContainer2, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs43(PieChart, { children: [
+        /* @__PURE__ */ jsx69(
           Pie,
           {
             data: chartData,
@@ -6000,7 +6122,7 @@ var DonutChart = ({
             isAnimationActive: true,
             animationDuration: 800,
             minAngle: 3,
-            children: chartData.map((entry, index) => /* @__PURE__ */ jsx68(
+            children: chartData.map((entry, index) => /* @__PURE__ */ jsx69(
               Cell,
               {
                 fill: entry.color,
@@ -6011,8 +6133,8 @@ var DonutChart = ({
             ))
           }
         ),
-        /* @__PURE__ */ jsx68(
-          Tooltip2,
+        /* @__PURE__ */ jsx69(
+          Tooltip3,
           {
             formatter: (value, name, payload) => {
               const label = payload && payload.payload ? payload.payload[dataLabel] : name;
@@ -6034,9 +6156,9 @@ var DonutChart = ({
           }
         )
       ] }) }),
-      total > 0 && /* @__PURE__ */ jsx68("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__ */ jsxs42("div", { className: "text-[#1f2937] leading-tight", children: [
+      total > 0 && /* @__PURE__ */ jsx69("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__ */ jsxs43("div", { className: "text-[#1f2937] leading-tight", children: [
         formattedTotal,
-        /* @__PURE__ */ jsx68("span", { className: "text-sm md:text-base font-normal text-gray-600 block md:inline-block md:ml-1", children: "total" })
+        /* @__PURE__ */ jsx69("span", { className: "text-sm md:text-base font-normal text-gray-600 block md:inline-block md:ml-1", children: "total" })
       ] }) })
     ] }),
     renderLegends
@@ -6045,10 +6167,10 @@ var DonutChart = ({
 var PieChart_default = React14.memo(DonutChart);
 
 // src/components/Blocks/EmailComposer.tsx
-import { jsx as jsx69, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs44 } from "react/jsx-runtime";
 function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc, setShowBcc, cc, setCc, bcc, setBcc, subject, setSubject, body, setBody }) {
-  return /* @__PURE__ */ jsx69("div", { className, style, children: /* @__PURE__ */ jsxs43("div", { className: "border rounded-md shadow bg-[#fff] p-4 mx-auto z-[50] relative", children: [
-    /* @__PURE__ */ jsx69("div", { className: "mb-3", children: /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx70("div", { className, style, children: /* @__PURE__ */ jsxs44("div", { className: "border rounded-md shadow bg-[#fff] p-4 mx-auto z-[50] relative", children: [
+    /* @__PURE__ */ jsx70("div", { className: "mb-3", children: /* @__PURE__ */ jsx70(
       "input",
       {
         type: "email",
@@ -6057,8 +6179,8 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         required: true
       }
     ) }),
-    /* @__PURE__ */ jsx69("div", { className: "mb-3", children: /* @__PURE__ */ jsxs43("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx69(
+    /* @__PURE__ */ jsx70("div", { className: "mb-3", children: /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx70(
         "input",
         {
           type: "email",
@@ -6069,7 +6191,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
           required: true
         }
       ),
-      !showCc && /* @__PURE__ */ jsx69(
+      !showCc && /* @__PURE__ */ jsx70(
         "button",
         {
           onClick: () => setShowCc?.(true),
@@ -6077,7 +6199,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
           children: "Cc"
         }
       ),
-      !showBcc && /* @__PURE__ */ jsx69(
+      !showBcc && /* @__PURE__ */ jsx70(
         "button",
         {
           onClick: () => setShowBcc?.(true),
@@ -6086,7 +6208,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         }
       )
     ] }) }),
-    showCc && /* @__PURE__ */ jsx69("div", { className: "mb-3", children: /* @__PURE__ */ jsx69(
+    showCc && /* @__PURE__ */ jsx70("div", { className: "mb-3", children: /* @__PURE__ */ jsx70(
       "input",
       {
         type: "text",
@@ -6096,7 +6218,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__ */ jsx69("div", { className: "mb-3", children: /* @__PURE__ */ jsx69(
+    showBcc && /* @__PURE__ */ jsx70("div", { className: "mb-3", children: /* @__PURE__ */ jsx70(
       "input",
       {
         type: "text",
@@ -6106,7 +6228,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__ */ jsx69("div", { className: "mb-3", children: /* @__PURE__ */ jsx69(
+    /* @__PURE__ */ jsx70("div", { className: "mb-3", children: /* @__PURE__ */ jsx70(
       "input",
       {
         type: "text",
@@ -6116,11 +6238,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__ */ jsx69("div", { className: "mb-4", children: /* @__PURE__ */ jsx69(MyEditor, { value: body, onChange: setBody }) }),
-    /* @__PURE__ */ jsxs43("div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ jsx69("button", { className: "px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100", children: "Discard" }),
-      /* @__PURE__ */ jsx69("button", { className: "px-4 py-2 rounded-md border text-[#12715B] border-[#12715B]", children: "Reset" }),
-      /* @__PURE__ */ jsx69("button", { className: "px-4 py-2 rounded-md bg-[#12715B] text-white", children: "Send" })
+    /* @__PURE__ */ jsx70("div", { className: "mb-4", children: /* @__PURE__ */ jsx70(MyEditor, { value: body, onChange: setBody }) }),
+    /* @__PURE__ */ jsxs44("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx70("button", { className: "px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100", children: "Discard" }),
+      /* @__PURE__ */ jsx70("button", { className: "px-4 py-2 rounded-md border text-[#12715B] border-[#12715B]", children: "Reset" }),
+      /* @__PURE__ */ jsx70("button", { className: "px-4 py-2 rounded-md bg-[#12715B] text-white", children: "Send" })
     ] })
   ] }) });
 }
@@ -6128,10 +6250,10 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
 // src/components/ui/sonner.tsx
 import { useTheme } from "next-themes";
 import { Toaster as Sonner } from "sonner";
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
 var Toaster = ({ ...props }) => {
   const { theme = "system" } = useTheme();
-  return /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx71(
     Sonner,
     {
       theme,