@algorithm-shift/design-system 1.2.976 → 1.2.978

package/dist/index.mjs

@@ -26930,7 +26930,7 @@ var TextInput = ({ className, style, ...props }) => {
     /* @__PURE__ */ jsx20(
       Input,
       {
-        type: "text",
+        type: props.inputType || "text",
         name: props.name,
         className: cn(className, props.errorMessage ? "border-red-500" : ""),
         style: {
@@ -30819,8 +30819,22 @@ var Tabs_default = Tabs;
 // src/components/Navigation/Stages/Stages.tsx
 import React10, { useState as useState10 } from "react";
 import { jsx as jsx57, jsxs as jsxs34 } from "react/jsx-runtime";
-var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage, dataKey = "key", dataLabel = "header", loading, saving, triggerOnClick = false }) => {
-  const [activeStage, setActiveStage] = useState10(currentStage || (stages && stages.length > 0 ? stages[0].key : null));
+var StagesComponent = ({
+  stages,
+  isShowBtn,
+  buttonText,
+  className,
+  style,
+  onStageChange,
+  currentStage,
+  dataKey = "key",
+  dataLabel = "header",
+  loading,
+  saving,
+  triggerOnClick = false,
+  canvasMode = "desktop"
+}) => {
+  const [activeStage, setActiveStage] = useState10(currentStage || (stages && stages.length > 0 ? stages[0][dataKey] : null));
   const [isCompleted, setIsCompleted] = useState10(false);
   const updateStage = (stageKey) => {
     setActiveStage(stageKey);
@@ -30830,18 +30844,19 @@ var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStag
     if (!stages || stages.length === 0) return;
     const currentIndex = stages.findIndex((stage) => stage[dataKey] === activeStage);
     if (currentIndex + 1 === stages.length) {
-      const currentStage2 = stages[currentIndex];
-      updateStage(currentStage2[dataKey]);
+      const currentStageObj = stages[currentIndex];
+      updateStage(currentStageObj[dataKey]);
       setIsCompleted(true);
       return;
     }
-    if (currentIndex < stages.length) {
-      const currentStage2 = stages[currentIndex];
-      updateStage(currentStage2[dataKey]);
+    if (currentIndex < stages.length - 1) {
+      const nextStageObj = stages[currentIndex + 1];
+      updateStage(nextStageObj[dataKey]);
       return;
     }
   };
   const lastStage = stages && stages.length > 0 ? stages[stages.length - 1][dataKey] : null;
+  const isMobile = canvasMode === "mobile";
   const onStageClick = (stageKey) => {
     if (!stageKey || stageKey === activeStage || activeStage === lastStage) return;
     setActiveStage(stageKey);
@@ -30851,50 +30866,91 @@ var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStag
   };
   const isAllStagesCompleted = isCompleted || currentStage === lastStage;
   const disabled = isAllStagesCompleted || loading || saving;
-  return /* @__PURE__ */ jsx57("div", { className, style, children: /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-between bg-red p-2 rounded-lg border border-gray-200 w-full", children: [
-    /* @__PURE__ */ jsx57("div", { className: "flex items-center", children: /* @__PURE__ */ jsx57("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ jsx57("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx57("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
-    /* @__PURE__ */ jsx57("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: loading ? Array(6).fill(null).map((_, index) => /* @__PURE__ */ jsx57(
-      "button",
-      {
-        className: `
-                  min-w-[80px] min-h-[35px] px-4 py-2 rounded-full text-sm font-medium transition-colors duration-200 whitespace-nowrap
-                  text-gray-700 hover:bg-gray-100 border border-gray-200 bg-gray-100 animate-pulse`,
-        disabled: true
-      },
-      index
-    )) : stages?.length > 0 && stages?.map((stage, index) => {
-      const currentIndex = stages.findIndex((s) => s[dataKey] === activeStage);
-      const isCompleted2 = isAllStagesCompleted || index < currentIndex;
-      const isActive = !isAllStagesCompleted && index === currentIndex;
-      return /* @__PURE__ */ jsxs34(React10.Fragment, { children: [
+  return /* @__PURE__ */ jsx57("div", { className, style, children: /* @__PURE__ */ jsxs34(
+    "div",
+    {
+      className: `
+        flex flex-col lg:flex-row items-start lg:items-center 
+        justify-between bg-red p-2 rounded-lg border border-gray-200 w-full
+        gap-3 lg:gap-0
+        ${isMobile ? "p-3 sm:p-4" : "p-2"}
+      `,
+      children: [
+        /* @__PURE__ */ jsx57("div", { className: "flex items-center flex-shrink-0 order-1 lg:order-1", children: /* @__PURE__ */ jsx57("button", { className: "p-2 hover:bg-gray-100 rounded flex-shrink-0", children: /* @__PURE__ */ jsx57("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx57("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
         /* @__PURE__ */ jsx57(
-          "button",
+          "div",
           {
             className: `
-                  min-w-[80px] px-4 py-2 rounded-full text-sm font-medium transition-colors duration-200 whitespace-nowrap
-                  ${isActive ? "bg-green-700 text-white shadow-md" : isCompleted2 ? "bg-green-50 text-green-700 border border-green-700" : "bg-white text-gray-700 hover:bg-gray-100 border border-gray-200"}`,
-            onClick: () => {
-              if (isAllStagesCompleted) return;
-              onStageClick(stage[dataKey]);
-            },
-            children: stage[dataLabel]
+          flex flex-col sm:flex-row items-center flex-1 px-1 sm:px-2 
+          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__ */ jsx57(
+              "button",
+              {
+                className: `
+                  min-w-[70px] sm:min-w-[80px] w-full sm:w-auto
+                  min-h-[32px] sm:min-h-[35px] px-3 sm:px-4 py-2 rounded-full 
+                  text-xs sm:text-sm font-medium transition-colors duration-200 
+                  whitespace-nowrap text-gray-700 hover:bg-gray-100 border 
+                  border-gray-200 bg-gray-100 animate-pulse flex-shrink-0
+                  ${isMobile ? "flex-1" : ""}
+                `,
+                disabled: true
+              },
+              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__ */ jsxs34(React10.Fragment, { children: [
+                /* @__PURE__ */ jsx57(
+                  "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"}
+                    ${isMobile ? "flex-1 text-center py-2.5" : ""}
+                  `,
+                    onClick: () => {
+                      if (isAllStagesCompleted) return;
+                      onStageClick(stage[dataKey]);
+                    },
+                    children: stage[dataLabel]
+                  }
+                ),
+                !isMobile && index < stages.length - 1 && /* @__PURE__ */ jsx57("div", { className: "hidden sm:flex sm:flex-shrink-0 w-3 h-px bg-gray-300 sm:w-4" })
+              ] }, stage.id);
+            })
           }
         ),
-        index < stages.length - 1 && /* @__PURE__ */ jsx57("div", { className: "flex-shrink-0 w-3 h-px bg-gray-300" })
-      ] }, stage.id);
-    }) }),
-    isShowBtn && /* @__PURE__ */ jsx57("div", { className: "flex items-center", children: /* @__PURE__ */ jsx57(
-      "button",
-      {
-        className: `bg-green-700 text-white px-6 py-2 rounded-lg text-sm font-medium transition-colors duration-200 shadow-sm ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
-        onClick: () => {
-          nextStage();
-        },
-        disabled,
-        children: saving ? "Updating..." : buttonText
-      }
-    ) })
-  ] }) });
+        isShowBtn && /* @__PURE__ */ jsx57(
+          "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__ */ jsx57(
+              "button",
+              {
+                className: `
+                w-full lg:w-auto bg-green-700 text-white px-4 lg:px-6 py-2.5 
+                rounded-lg text-sm font-medium transition-colors duration-200 
+                shadow-sm ${disabled ? "opacity-50 cursor-not-allowed" : "hover:shadow-md"}
+              `,
+                onClick: nextStage,
+                disabled,
+                children: saving ? "Updating..." : buttonText
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
 };
 var Stages_default = StagesComponent;
 
@@ -31099,7 +31155,8 @@ function Navbar({
 }
 
 // src/components/Chart/BarChart.tsx
-import React12 from "react";
+import React12, { useEffect as useEffect25, useMemo as useMemo9, useState as useState12, useCallback as useCallback5 } from "react";
+import axios2 from "axios";
 import {
   BarChart,
   Bar,
@@ -31113,194 +31170,611 @@ import {
   Legend
 } from "recharts";
 import { jsx as jsx64, jsxs as jsxs38 } from "react/jsx-runtime";
-var ChartComponent = ({ className, style, loading, ...props }) => {
-  const data = Array.isArray(props.data) ? props.data : [];
+var getRandomColor = () => {
+  const palette = [
+    "#2563eb",
+    "#1d4ed8",
+    "#1e40af",
+    "#1e3a8a",
+    "#1e293b",
+    "#10b981",
+    "#059669",
+    "#047857",
+    "#065f46",
+    "#022c22",
+    "#f59e0b",
+    "#d97706",
+    "#b45309",
+    "#92400e",
+    "#422006",
+    "#ef4444",
+    "#dc2626",
+    "#b91c1c",
+    "#991b1b",
+    "#7f1d1d",
+    "#8b5cf6",
+    "#7c3aed",
+    "#6d28d9",
+    "#5b21b6",
+    "#4c1d95",
+    "#14b8a6",
+    "#0d9488",
+    "#0f766e",
+    "#115e59",
+    "#134e4a",
+    "#ec4899",
+    "#db2777",
+    "#be185d",
+    "#9d174d",
+    "#831843",
+    "#22c55e",
+    "#16a34a",
+    "#15803d",
+    "#166534",
+    "#14532d"
+  ];
+  return palette[Math.floor(Math.random() * palette.length)];
+};
+var ChartComponent = ({
+  className,
+  style,
+  loading: externalLoading,
+  dataKey,
+  dataLabel,
+  apiUrl,
+  isPaginationEnabled,
+  limit = 10,
+  canvasMode,
+  ...props
+}) => {
+  const [rawData, setRawData] = useState12([]);
+  const [rawMeta, setRawMeta] = useState12(null);
+  const [localLoading, setLocalLoading] = useState12(false);
+  const [currentPage, setCurrentPage] = useState12(1);
+  const effectiveData = apiUrl ? rawData : props.data || [];
+  const effectiveLoading = apiUrl ? localLoading : externalLoading;
+  useEffect25(() => {
+    if (apiUrl) {
+      setCurrentPage(1);
+    }
+  }, [apiUrl]);
+  const fetchData = useCallback5(async (page) => {
+    if (!apiUrl) return;
+    const cancelled = false;
+    try {
+      setLocalLoading(true);
+      const params = new URLSearchParams({
+        page: page.toString(),
+        limit: limit.toString()
+      });
+      const res = await axios2.get(`${apiUrl}?${params.toString()}`, {
+        withCredentials: true
+      });
+      if (!cancelled) {
+        let data2 = [];
+        let meta = null;
+        if (res.data?.success && Array.isArray(res.data.data)) {
+          data2 = res.data.data;
+          meta = res.data.meta || null;
+        } else if (Array.isArray(res.data)) {
+          data2 = res.data;
+        }
+        setRawData(data2);
+        setRawMeta(meta);
+      }
+    } catch (err) {
+      if (!cancelled) {
+        showSonnerToast({
+          title: err?.response?.data?.message || err?.message || "Failed to load chart data",
+          variant: "error"
+        });
+        setRawData([]);
+      }
+    } finally {
+      if (!cancelled) setLocalLoading(false);
+    }
+  }, [apiUrl, limit]);
+  useEffect25(() => {
+    if (!apiUrl) return;
+    fetchData(currentPage);
+  }, [apiUrl, currentPage, fetchData]);
+  const handlePageChange = (newPage) => {
+    if (rawMeta && (newPage < 1 || newPage > rawMeta.pages)) return;
+    setCurrentPage(newPage);
+  };
+  const data = useMemo9(() => {
+    if (!Array.isArray(effectiveData) || effectiveData.length === 0 || !dataKey || !dataLabel) {
+      return [];
+    }
+    return effectiveData.map((item) => ({
+      ...item,
+      [dataKey]: Number(item[dataKey] || 0),
+      fill: getRandomColor()
+    }));
+  }, [effectiveData, dataKey, dataLabel]);
   const chartType = props.chartType || "bar";
-  const legendsPosition = props.legendsPosition === "middle" || props.legendsPosition === "bottom" ? props.legendsPosition : "top";
-  if (loading || data.length === 0) {
-    return /* @__PURE__ */ jsx64(
+  const legendsPosition = ["middle", "bottom"].includes(props.legendsPosition) ? props.legendsPosition : "top";
+  if (effectiveLoading || data.length === 0) {
+    return /* @__PURE__ */ jsxs38(
       "div",
       {
-        className: `flex items-center justify-center w-full h-[300px] md:h-[400px] bg-gray-50 animate-pulse rounded-lg ${className}`,
+        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__ */ jsx64("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
+        children: [
+          /* @__PURE__ */ jsx64("div", { className: "mb-6 flex justify-center", children: /* @__PURE__ */ jsxs38("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__ */ jsx64("div", { className: "w-5 h-5 border-2 border-gray-400 border-t-blue-500 rounded-full animate-spin" }),
+            /* @__PURE__ */ jsx64("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__ */ jsx64("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent animate-shimmer rounded-xl" }),
+          /* @__PURE__ */ jsx64("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__ */ jsx64("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__ */ jsxs38(
+              "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__ */ jsx64("div", { className: "absolute inset-0 bg-gradient-to-r from-white/40 via-transparent to-white/40 animate-shimmer-bar" }),
+                  /* @__PURE__ */ jsx64("div", { className: "absolute bottom-1 left-1/2 w-4 h-1 rounded-full transform -translate-x-1/2 blur-sm" })
+                ]
+              },
+              `bar-${idx}`
+            );
+          }) }) })
+        ]
       }
     );
   }
-  return /* @__PURE__ */ jsx64("div", { className: `${className} h-[400px]`, style, children: /* @__PURE__ */ jsx64(ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ jsxs38(BarChart, { data, title: "Leads", desc: "content", children: [
-    /* @__PURE__ */ jsx64(CartesianGrid, { strokeDasharray: "3 3" }),
-    /* @__PURE__ */ jsx64(XAxis, { dataKey: "name" }),
-    /* @__PURE__ */ jsx64(YAxis, {}),
-    /* @__PURE__ */ jsx64(Tooltip, { formatter: (value) => `${value}k` }),
-    /* @__PURE__ */ jsx64(Legend, { verticalAlign: legendsPosition, align: "center" }),
-    /* @__PURE__ */ jsx64(
-      Bar,
-      {
-        dataKey: "value",
-        fill: "#00695C",
-        radius: [6, 6, 0, 0],
-        isAnimationActive: false,
-        children: data.map((entry, index) => /* @__PURE__ */ jsx64(
-          "rect",
+  return /* @__PURE__ */ jsxs38("div", { className: `${className} h-[450px]`, style, children: [
+    isPaginationEnabled && rawMeta && /* @__PURE__ */ jsxs38("div", { className: "flex items-center justify-between mb-4 px-2", children: [
+      /* @__PURE__ */ jsxs38("div", { className: "text-sm text-gray-600 hidden sm:block", children: [
+        "Page ",
+        rawMeta.page,
+        " of ",
+        rawMeta.pages,
+        " (",
+        rawMeta.total.toLocaleString(),
+        " total records)"
+      ] }),
+      /* @__PURE__ */ jsxs38("div", { className: "flex items-center space-x-2 sm:hidden w-full justify-center", children: [
+        /* @__PURE__ */ jsx64(
+          "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__ */ jsx64("span", { children: "\u2190 Prev" })
+          }
+        ),
+        /* @__PURE__ */ jsx64("span", { className: "px-2 py-2 text-xs font-semibold text-gray-700 min-w-[36px] text-center flex-shrink-0", children: currentPage }),
+        /* @__PURE__ */ jsx64(
+          "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__ */ jsx64("span", { children: "Next \u2192" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs38("div", { className: "flex items-center space-x-2 hidden sm:flex", children: [
+        /* @__PURE__ */ jsx64(
+          "button",
           {
-            fill: entry.color || "#00695C"
+            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__ */ jsx64("span", { children: "\u2190 Prev" })
+          }
+        ),
+        /* @__PURE__ */ jsx64("span", { className: "px-3 py-1 text-sm font-medium text-gray-700", children: currentPage }),
+        /* @__PURE__ */ jsx64(
+          "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__ */ jsx64("span", { children: "Next \u2192" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx64(ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ jsxs38(BarChart, { data, children: [
+      /* @__PURE__ */ jsx64(CartesianGrid, { strokeDasharray: "3 3" }),
+      /* @__PURE__ */ jsx64(
+        XAxis,
+        {
+          dataKey: dataLabel,
+          angle: -45,
+          textAnchor: "end",
+          interval: 0,
+          tickFormatter: (value) => value?.toString().length > 10 ? `${value.toString().substring(0, 10)}...` : value,
+          tick: {
+            fontSize: 13,
+            fontWeight: 500,
+            fill: "#666",
+            fontFamily: "inherit"
           },
-          `bar-${index}`
-        ))
-      }
-    )
-  ] }) : /* @__PURE__ */ jsxs38(AreaChart, { data, children: [
-    /* @__PURE__ */ jsx64("defs", { children: /* @__PURE__ */ jsxs38("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-      /* @__PURE__ */ jsx64("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
-      /* @__PURE__ */ jsx64("stop", { offset: "95%", stopColor: "#00695C", stopOpacity: 0 })
-    ] }) }),
-    /* @__PURE__ */ jsx64(CartesianGrid, { strokeDasharray: "3 3" }),
-    /* @__PURE__ */ jsx64(XAxis, { dataKey: "name" }),
-    /* @__PURE__ */ jsx64(YAxis, {}),
-    /* @__PURE__ */ jsx64(Tooltip, { formatter: (value) => `${value}k` }),
-    /* @__PURE__ */ jsx64(
-      Area,
-      {
-        type: "monotone",
-        dataKey: "value",
-        stroke: "#00695C",
-        fillOpacity: 1,
-        fill: "url(#colorCount)",
-        isAnimationActive: false
-      }
-    )
-  ] }) }) });
+          height: 80,
+          className: "hidden sm:block"
+        }
+      ),
+      /* @__PURE__ */ jsx64(
+        YAxis,
+        {
+          tickFormatter: (value) => `${(value / 1e3).toFixed(0)}k`,
+          tick: {
+            fontSize: 12,
+            fill: "#94a3b8",
+            fontWeight: 500
+          },
+          domain: ["dataMin", "dataMax"],
+          width: 60
+        }
+      ),
+      /* @__PURE__ */ jsx64(Tooltip, { formatter: (value) => [`${value}`, "Count"] }),
+      /* @__PURE__ */ jsx64(Legend, { verticalAlign: legendsPosition, align: "center" }),
+      /* @__PURE__ */ jsx64(
+        Bar,
+        {
+          dataKey,
+          radius: [6, 6, 0, 0],
+          isAnimationActive: false
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs38(AreaChart, { data, children: [
+      /* @__PURE__ */ jsx64("defs", { children: /* @__PURE__ */ jsxs38("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ jsx64("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
+        /* @__PURE__ */ jsx64("stop", { offset: "95%", stopColor: "#00695C", stopOpacity: 0 })
+      ] }) }),
+      /* @__PURE__ */ jsx64(CartesianGrid, { strokeDasharray: "3 3" }),
+      /* @__PURE__ */ jsx64(
+        XAxis,
+        {
+          dataKey: dataLabel,
+          angle: 0,
+          interval: 0,
+          tick: {
+            fontSize: 13,
+            fontWeight: 500,
+            fill: "#666",
+            fontFamily: "inherit"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx64(
+        YAxis,
+        {
+          tickFormatter: (value) => `${(value / 1e3).toFixed(0)}k`,
+          tick: {
+            fontSize: 12,
+            fill: "#94a3b8",
+            fontWeight: 500
+          },
+          domain: ["dataMin", "dataMax"],
+          width: 60
+        }
+      ),
+      /* @__PURE__ */ jsx64(Tooltip, { formatter: (value) => `${value}k` }),
+      /* @__PURE__ */ jsx64(
+        Area,
+        {
+          type: "monotone",
+          dataKey,
+          stroke: "#00695C",
+          fillOpacity: 1,
+          fill: "url(#colorCount)",
+          isAnimationActive: false
+        }
+      )
+    ] }) })
+  ] });
 };
 var BarChart_default = React12.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
-import React13, { useEffect as useEffect25, useMemo as useMemo9, useState as useState12 } from "react";
+import React13, { useEffect as useEffect26, useMemo as useMemo10, useState as useState13 } from "react";
+import axios3 from "axios";
 import {
   PieChart,
   Pie,
   Cell,
   ResponsiveContainer as ResponsiveContainer2,
-  Tooltip as Tooltip2,
-  LabelList
+  Tooltip as Tooltip2
 } from "recharts";
-import { Fragment as Fragment24, jsx as jsx65, jsxs as jsxs39 } from "react/jsx-runtime";
-var getRandomColor = () => {
+import { jsx as jsx65, jsxs as jsxs39 } from "react/jsx-runtime";
+var getRandomColor2 = () => {
   const palette = [
     "#2563eb",
+    "#1d4ed8",
+    "#1e40af",
+    "#1e3a8a",
+    "#1e293b",
     "#10b981",
+    "#059669",
+    "#047857",
+    "#065f46",
+    "#022c22",
     "#f59e0b",
+    "#d97706",
+    "#b45309",
+    "#92400e",
+    "#422006",
     "#ef4444",
+    "#dc2626",
+    "#b91c1c",
+    "#991b1b",
+    "#7f1d1d",
     "#8b5cf6",
+    "#7c3aed",
+    "#6d28d9",
+    "#5b21b6",
+    "#4c1d95",
     "#14b8a6",
+    "#0d9488",
+    "#0f766e",
+    "#115e59",
+    "#134e4a",
     "#ec4899",
-    "#e11d48",
+    "#db2777",
+    "#be185d",
+    "#9d174d",
+    "#831843",
     "#22c55e",
-    "#3b82f6"
+    "#16a34a",
+    "#15803d",
+    "#166534",
+    "#14532d",
+    "#3b82f6",
+    "#2563eb",
+    "#1d4ed8",
+    "#1e40af",
+    "#1e3a8a",
+    "#f97316",
+    "#ea580c",
+    "#c2410c",
+    "#9a3412",
+    "#7c2d12",
+    "#a855f7",
+    "#9333ea",
+    "#7e22ce",
+    "#6b21a8",
+    "#581c87",
+    "#06b6d4",
+    "#0891b2",
+    "#0e7490",
+    "#155e75",
+    "#164e63"
   ];
   return palette[Math.floor(Math.random() * palette.length)];
 };
-var DonutChart = ({ className, style, loading, ...props }) => {
+var DonutChart = ({
+  className,
+  style,
+  loading: externalLoading,
+  dataKey = "value",
+  dataLabel = "name",
+  apiUrl,
+  ...props
+}) => {
   const showLegends = props.showLegends ?? true;
-  const labelType = props.labelType || "inside";
   const canvasMode = props.canvasMode;
-  const data = useMemo9(() => {
-    if (!Array.isArray(props.data)) return [];
-    return props.data.map((item) => ({ ...item, color: getRandomColor() }));
-  }, [props.data]);
-  const total = useMemo9(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
+  const [rawData, setRawData] = useState13([]);
+  const [localLoading, setLocalLoading] = useState13(false);
+  const effectiveData = apiUrl ? rawData : props.data || [];
+  const effectiveLoading = apiUrl ? localLoading : externalLoading;
+  useEffect26(() => {
+    if (!apiUrl) return;
+    let cancelled = false;
+    const fetchData = async () => {
+      try {
+        setLocalLoading(true);
+        const res = await axios3.get(apiUrl, {
+          withCredentials: true
+        });
+        if (!cancelled) {
+          let data2 = [];
+          if (res.data?.success && Array.isArray(res.data.data)) {
+            data2 = res.data.data;
+          } else if (Array.isArray(res.data)) {
+            data2 = res.data;
+          }
+          setRawData(data2);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          showSonnerToast({
+            title: err?.response?.data?.message || err?.message || "Failed to load chart data",
+            variant: "error"
+          });
+          setRawData([]);
+        }
+      } finally {
+        if (!cancelled) setLocalLoading(false);
+      }
+    };
+    fetchData();
+    return () => {
+      cancelled = true;
+    };
+  }, [apiUrl]);
+  const data = useMemo10(() => {
+    if (!Array.isArray(effectiveData) || effectiveData.length === 0) return [];
+    return effectiveData.map((item) => ({
+      ...item,
+      color: item.color || getRandomColor2(),
+      [dataKey]: Number(item[dataKey] ?? 0),
+      [dataLabel]: item[dataLabel] ?? "Unknown"
+    }));
+  }, [effectiveData, dataKey, dataLabel]);
+  const total = useMemo10(
+    () => data.reduce((sum, d) => sum + (d[dataKey] ?? 0), 0),
+    [data, dataKey]
+  );
+  const formattedTotal = useMemo10(() => {
+    if (total >= 1e6) {
+      return `${(total / 1e6).toFixed(1)}M`;
+    }
+    if (total >= 1e3) {
+      return `${(total / 1e3).toFixed(0)}k`;
+    }
+    return total.toString();
+  }, [total]);
+  const chartData = useMemo10(() => {
+    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);
+    const minValue = total * minAngle / 360;
+    return sortedData.map((item, index) => {
+      const value = item[dataKey] ?? 0;
+      if (value < minValue && index < 12) {
+        return {
+          ...item,
+          [dataKey]: minValue * 1.2,
+          isBoosted: true
+        };
+      }
+      return item;
+    });
+  }, [data, total, dataKey]);
   const forceMobile = canvasMode === "mobile" || canvasMode === "tablet";
-  const [mounted, setMounted] = useState12(false);
-  useEffect25(() => {
+  const getDynamicRadius = () => {
+    if (forceMobile) return { inner: 60, outer: 100 };
+    if (chartData.length <= 6) return { inner: 85, outer: 150 };
+    return { inner: 70, outer: 130 };
+  };
+  const [mounted, setMounted] = useState13(false);
+  useEffect26(() => {
     const timeout = setTimeout(() => setMounted(true), 100);
     return () => clearTimeout(timeout);
   }, []);
-  const renderLegends = useMemo9(() => {
+  const renderLegends = useMemo10(() => {
     if (!showLegends) return null;
-    return /* @__PURE__ */ jsx65(Fragment24, { children: data.map((d) => /* @__PURE__ */ jsxs39(
-      "div",
-      {
-        className: "flex items-center space-x-2 rounded-md border border-gray-200 px-3 py-2 w-[48%] md:w-auto",
-        children: [
-          /* @__PURE__ */ jsx65(
-            "span",
-            {
-              className: "inline-block w-[16px] h-[16px] rounded",
-              style: { backgroundColor: d.color }
-            }
-          ),
-          /* @__PURE__ */ jsx65("span", { className: "text-[#000000] text-[12px] md:text-[13px] font-[500]", children: d.name })
-        ]
-      },
-      d.name
-    )) });
-  }, [data, showLegends]);
+    return /* @__PURE__ */ jsx65("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__ */ jsxs39(
+        "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__ */ jsx65(
+              "span",
+              {
+                className: "inline-block w-[12px] h-[12px] rounded-full shrink-0 border-2 border-white/50",
+                style: { backgroundColor: d.color }
+              }
+            ),
+            /* @__PURE__ */ jsxs39("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx65("span", { className: "text-gray-900 text-[11px] md:text-[13px] font-semibold block truncate leading-tight", children: d[dataLabel] }),
+              /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-1 text-xs text-gray-600 font-medium", children: [
+                /* @__PURE__ */ jsx65("span", { children: displayValue }),
+                /* @__PURE__ */ jsxs39("span", { children: [
+                  (actualValue / total * 100).toFixed(1),
+                  "%"
+                ] }),
+                d.isBoosted && /* @__PURE__ */ jsx65("span", { className: "text-[9px] px-1 py-0.5 bg-blue-100 text-blue-700 rounded-full", children: "min" })
+              ] })
+            ] })
+          ]
+        },
+        `legend-${index}`
+      );
+    }) });
+  }, [chartData, data, dataLabel, dataKey, total, showLegends]);
   if (!mounted) return null;
-  if (loading || data.length === 0) {
-    return /* @__PURE__ */ jsx65(
+  if (effectiveLoading || data.length === 0) {
+    return /* @__PURE__ */ jsxs39(
       "div",
       {
-        className: `flex items-center justify-center w-full h-[300px] md:h-[400px] bg-gray-50 animate-pulse rounded-lg ${className}`,
+        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__ */ jsx65("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs39(
-    "div",
-    {
-      className: `relative flex flex-col items-center ${className}`,
-      style,
-      children: [
-        /* @__PURE__ */ jsxs39("div", { className: "relative w-full md:w-[70%] h-[300px] md:h-[400px] flex items-center justify-center", children: [
-          /* @__PURE__ */ jsx65(ResponsiveContainer2, { width: "99%", height: "100%", children: /* @__PURE__ */ jsxs39(PieChart, { children: [
-            /* @__PURE__ */ jsxs39(
-              Pie,
-              {
-                data,
-                cx: "50%",
-                cy: "50%",
-                innerRadius: forceMobile ? 60 : 80,
-                outerRadius: forceMobile ? 100 : 140,
-                dataKey: "value",
-                labelLine: false,
-                isAnimationActive: false,
-                children: [
-                  data.map((entry, index) => /* @__PURE__ */ jsx65(Cell, { fill: entry.color }, `cell-${index}`)),
-                  /* @__PURE__ */ jsx65(
-                    LabelList,
-                    {
-                      dataKey: "value",
-                      position: labelType === "inside" ? "inside" : "outside",
-                      fill: labelType === "inside" ? "#fff" : "#000",
-                      fontSize: forceMobile ? 10 : 13,
-                      fontWeight: 600
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx65(
-              Tooltip2,
-              {
-                formatter: (value, name) => [`${value}k`, name]
-              }
-            )
+        children: [
+          /* @__PURE__ */ jsx65("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent animate-shimmer rounded-xl" }),
+          /* @__PURE__ */ jsx65("div", { className: "mt-6 text-center", children: /* @__PURE__ */ jsxs39("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__ */ jsx65("div", { className: "w-5 h-5 border-2 border-gray-300 border-t-blue-400 rounded-full animate-spin" }),
+            /* @__PURE__ */ jsx65("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__ */ jsxs39(
+          /* @__PURE__ */ jsx65("div", { className: "flex flex-wrap justify-center gap-3 mt-8 w-full max-w-4xl", children: [...Array(18)].map((_, idx) => /* @__PURE__ */ jsxs39(
             "div",
             {
-              className: `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 ${forceMobile ? "text-2xl" : "text-4xl"} font-bold text-[#000]`,
+              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: [
-                total,
-                "k"
+                /* @__PURE__ */ jsx65("div", { className: "w-4 h-4 rounded-full bg-gradient-to-r from-blue-300 to-purple-300 animate-pulse" }),
+                /* @__PURE__ */ jsxs39("div", { className: "flex-1 space-y-1", children: [
+                  /* @__PURE__ */ jsx65("div", { className: "h-3 w-20 bg-gray-300 rounded animate-pulse" }),
+                  /* @__PURE__ */ jsx65("div", { className: "h-2.5 w-16 bg-gray-200/60 rounded animate-pulse-delayed" })
+                ] })
               ]
+            },
+            idx
+          )) })
+        ]
+      }
+    );
+  }
+  const { inner, outer } = getDynamicRadius();
+  const innerRadius = inner;
+  const outerRadius = outer;
+  return /* @__PURE__ */ jsxs39("div", { className: `relative flex flex-col items-center ${className}`, style, children: [
+    /* @__PURE__ */ jsxs39("div", { className: "relative w-full md:w-[75%] h-[280px] md:h-[380px] flex items-center justify-center mb-2", children: [
+      /* @__PURE__ */ jsx65(ResponsiveContainer2, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs39(PieChart, { children: [
+        /* @__PURE__ */ jsx65(
+          Pie,
+          {
+            data: chartData,
+            cx: "50%",
+            cy: "50%",
+            innerRadius,
+            outerRadius,
+            dataKey,
+            labelLine: false,
+            isAnimationActive: true,
+            animationDuration: 800,
+            minAngle: 3,
+            children: chartData.map((entry, index) => /* @__PURE__ */ jsx65(
+              Cell,
+              {
+                fill: entry.color,
+                stroke: entry.isBoosted ? "#fff" : "transparent",
+                strokeWidth: entry.isBoosted ? 1.5 : 0
+              },
+              `cell-${index}`
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx65(
+          Tooltip2,
+          {
+            formatter: (value, name, payload) => {
+              const label = payload && payload.payload ? payload.payload[dataLabel] : name;
+              const actualItem = data.find((item) => item[dataLabel] === label);
+              const actualValue = actualItem ? actualItem[dataKey] : value;
+              const valueFormatted = actualValue >= 1e3 ? `${(actualValue / 1e3).toFixed(0)}k` : actualValue.toLocaleString();
+              const percentage = (actualValue / total * 100).toFixed(1);
+              return [
+                `${label}: ${valueFormatted} (${percentage}%)`
+              ];
+            },
+            contentStyle: {
+              backgroundColor: "white",
+              border: "1px solid #e5e7eb",
+              borderRadius: "8px",
+              fontSize: "13px",
+              padding: "8px 12px"
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsx65("div", { className: "flex flex-wrap justify-center gap-2 mt-6 w-full md:w-auto", children: renderLegends })
-      ]
-    }
-  );
+          }
+        )
+      ] }) }),
+      total > 0 && /* @__PURE__ */ jsx65("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__ */ jsxs39("div", { className: "text-[#1f2937] leading-tight", children: [
+        formattedTotal,
+        /* @__PURE__ */ jsx65("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 = React13.memo(DonutChart);