@algorithm-shift/design-system 1.3.120 → 1.3.121

package/dist/index.mjs

@@ -2918,13 +2918,61 @@ function resolveDate(option, customOption) {
   switch (option) {
     case "today":
       return /* @__PURE__ */ new Date();
-    case "custom":
-      return customOption ? new Date(customOption) : void 0;
+    case "custom": {
+      if (!customOption) return void 0;
+      const d = new Date(customOption);
+      return !isNaN(d.getTime()) ? d : void 0;
+    }
     case "none":
     default:
       return void 0;
   }
 }
+function resolveDefaultDate(option, customOption) {
+  if (!option || option === "none") return void 0;
+  const now = /* @__PURE__ */ new Date();
+  switch (option) {
+    case "today":
+      return new Date(now);
+    case "currentPlus1Week": {
+      const d = new Date(now);
+      d.setDate(d.getDate() + 7);
+      return d;
+    }
+    case "currentPlus1Year": {
+      const d = new Date(now);
+      d.setFullYear(d.getFullYear() + 1);
+      return d;
+    }
+    case "previousDay": {
+      const d = new Date(now);
+      d.setDate(d.getDate() - 1);
+      return d;
+    }
+    case "previous1Week": {
+      const d = new Date(now);
+      d.setDate(d.getDate() - 7);
+      return d;
+    }
+    case "previous1Month": {
+      const d = new Date(now);
+      d.setMonth(d.getMonth() - 1);
+      return d;
+    }
+    case "previous1Year": {
+      const d = new Date(now);
+      d.setFullYear(d.getFullYear() - 1);
+      return d;
+    }
+    case "custom": {
+      if (!customOption) return void 0;
+      const d = new Date(customOption);
+      return !isNaN(d.getTime()) ? d : void 0;
+    }
+    default:
+      return void 0;
+  }
+}
 function DateTimePicker({
   className,
   style,
@@ -2942,6 +2990,8 @@ function DateTimePicker({
   const customMinimumDate = props.customMinimumDate ?? "";
   const maximumDate = props.maximumDate ?? "none";
   const customMaximumDate = props.customMaximumDate ?? "";
+  const defaultDateValue = props.defaultDateValue ?? "none";
+  const customDefaultDate = props.customDefaultDate ?? "";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
@@ -2949,9 +2999,11 @@ function DateTimePicker({
   const minDate = resolveDate(minimumDate, customMinimumDate);
   const maxDate = resolveDate(maximumDate, customMaximumDate);
   const [date, setDate] = React8.useState(() => {
-    if (!props.value) return void 0;
-    const d = new Date(props.value);
-    return isNaN(d.getTime()) ? void 0 : d;
+    if (props.value) {
+      const d = new Date(props.value);
+      if (!isNaN(d.getTime())) return d;
+    }
+    return resolveDefaultDate(defaultDateValue, customDefaultDate);
   });
   const initialHours = date ? date.getHours() : 0;
   const initialMinutes = date ? date.getMinutes() : 0;
@@ -2966,26 +3018,6 @@ function DateTimePicker({
   React8.useEffect(() => {
     setAmPm(hours >= 12 ? "PM" : "AM");
   }, [hours]);
-  React8.useEffect(() => {
-    if (!props.value) {
-      setDate(void 0);
-      return;
-    }
-    const d = new Date(props.value);
-    if (!isNaN(d.getTime())) {
-      setDate(d);
-      setHours(d.getHours());
-      setMinutes(d.getMinutes());
-    }
-  }, [props.value]);
-  const [year, setYear] = React8.useState(date ? date.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear());
-  React8.useEffect(() => {
-    if (!date) return;
-    const newDate = new Date(date);
-    newDate.setFullYear(year);
-    setDate(newDate);
-    emitChange(newDate);
-  }, [year]);
   const emitChange = (nextDate) => {
     if (!props.onChange) return;
     let valueString = "";
@@ -3007,6 +3039,36 @@ function DateTimePicker({
     };
     props.onChange(event, props.name || "");
   };
+  React8.useEffect(() => {
+    if (!props.value) {
+      const defaultDate = resolveDefaultDate(defaultDateValue, customDefaultDate);
+      setDate(defaultDate);
+      if (defaultDate) {
+        setYear(defaultDate.getFullYear());
+        setHours(defaultDate.getHours());
+        setMinutes(defaultDate.getMinutes());
+        emitChange(defaultDate);
+      } else {
+        setHours(0);
+        setMinutes(0);
+      }
+      return;
+    }
+    const d = new Date(props.value);
+    if (!isNaN(d.getTime())) {
+      setDate(d);
+      setHours(d.getHours());
+      setMinutes(d.getMinutes());
+    }
+  }, [props.value, defaultDateValue, customDefaultDate]);
+  const [year, setYear] = React8.useState(date ? date.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear());
+  React8.useEffect(() => {
+    if (!date) return;
+    const newDate = new Date(date);
+    newDate.setFullYear(year);
+    setDate(newDate);
+    emitChange(newDate);
+  }, [year]);
   const updateDateTime = (nextBaseDate, h = hours, m = minutes) => {
     if (!nextBaseDate) {
       setDate(void 0);
@@ -3237,7 +3299,7 @@ function DateTimePicker({
         name: props.name,
         autoComplete: isAutocomplete ? "on" : "off",
         readOnly: isReadonly,
-        value: !date ? "" : mode === "date" ? format(date, "yyyy-MM-dd") : mode === "time" ? format(date, "HH:mm:ss") : date.toISOString(),
+        value: !date || isNaN(date.getTime()) ? "" : mode === "date" ? format(date, "yyyy-MM-dd") : mode === "time" ? format(date, "HH:mm:ss") : date.toISOString(),
         onChange: () => {
         }
       }
@@ -5967,55 +6029,51 @@ import {
   YAxis,
   CartesianGrid,
   Tooltip as Tooltip2,
-  ResponsiveContainer,
-  Legend
+  ResponsiveContainer
 } from "recharts";
 import { jsx as jsx68, jsxs as jsxs42 } from "react/jsx-runtime";
-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 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"
+];
 var ChartComponent = ({
   className,
   style,
@@ -6023,25 +6081,30 @@ var ChartComponent = ({
   dataKey,
   dataLabel,
   apiUrl,
+  source,
   isPaginationEnabled,
   limit = 10,
   canvasMode,
+  showLegends = true,
+  legendPosition = "bottom",
+  onLegendClick,
   ...props
 }) => {
+  const useApi = source === "api" && !!apiUrl;
   const [rawData, setRawData] = useState15([]);
   const [rawMeta, setRawMeta] = useState15(null);
   const [localLoading, setLocalLoading] = useState15(false);
   const [currentPage, setCurrentPage] = useState15(1);
-  const effectiveData = apiUrl ? rawData : props.data || [];
-  const effectiveLoading = apiUrl ? localLoading : externalLoading;
+  const effectiveData = useApi ? rawData : props.data || [];
+  const effectiveLoading = useApi ? localLoading : externalLoading;
   useEffect29(() => {
-    if (apiUrl) {
+    if (useApi) {
       setCurrentPage(1);
     }
-  }, [apiUrl]);
+  }, [useApi]);
   const fetchData = useCallback7(async (page) => {
     if (!apiUrl) return;
-    const cancelled = false;
+    let cancelled = false;
     try {
       setLocalLoading(true);
       const params = new URLSearchParams({
@@ -6077,9 +6140,9 @@ var ChartComponent = ({
     }
   }, [apiUrl, limit]);
   useEffect29(() => {
-    if (!apiUrl) return;
+    if (!useApi) return;
     fetchData(currentPage);
-  }, [apiUrl, currentPage, fetchData]);
+  }, [useApi, currentPage, fetchData]);
   const handlePageChange = (newPage) => {
     if (rawMeta && (newPage < 1 || newPage > rawMeta.pages)) return;
     setCurrentPage(newPage);
@@ -6088,15 +6151,59 @@ var ChartComponent = ({
     if (!Array.isArray(effectiveData) || effectiveData.length === 0 || !dataKey || !dataLabel) {
       return [];
     }
-    return effectiveData.map((item) => ({
+    return effectiveData.map((item, index) => ({
       ...item,
       [dataKey]: Number(item[dataKey] || 0),
-      fill: getRandomColor()
+      fill: item.fill || palette[index % palette.length]
     }));
   }, [effectiveData, dataKey, dataLabel]);
   const chartType = props.chartType || "bar";
-  const legendsPosition = ["middle", "bottom"].includes(props.legendsPosition) ? props.legendsPosition : "top";
-  if (effectiveLoading || data.length === 0) {
+  const forceMobile = canvasMode === "mobile" || canvasMode === "tablet";
+  const renderLegends = useMemo11(() => {
+    if (!showLegends || !dataKey || !dataLabel) return null;
+    const isLegendRight2 = !forceMobile && legendPosition === "right";
+    return /* @__PURE__ */ jsx68(
+      "div",
+      {
+        className: isLegendRight2 ? "flex flex-col gap-2 w-full min-w-0 justify-start" : "flex flex-wrap justify-center gap-2 mt-4 w-full max-w-4xl",
+        children: data.map((d, index) => {
+          const value = d[dataKey] ?? 0;
+          const displayValue = value >= 1e3 ? `${(value / 1e3).toFixed(0)}k` : value.toLocaleString();
+          const payload = {
+            name: d[dataLabel],
+            value,
+            [dataLabel]: d[dataLabel],
+            [dataKey]: value
+          };
+          return /* @__PURE__ */ jsxs42(
+            "div",
+            {
+              role: onLegendClick ? "button" : void 0,
+              tabIndex: onLegendClick ? 0 : void 0,
+              onClick: onLegendClick ? () => onLegendClick(payload) : void 0,
+              onKeyDown: onLegendClick ? (e) => e.key === "Enter" && onLegendClick(payload) : void 0,
+              className: `flex items-center space-x-2 rounded-lg border border-gray-200/50 px-3 py-1.5 min-w-[180px] w-[180px] bg-white/80 backdrop-blur-sm shadow-sm hover:shadow-md transition-all ${onLegendClick ? "cursor-pointer" : ""}`,
+              children: [
+                /* @__PURE__ */ jsx68(
+                  "span",
+                  {
+                    className: "inline-block w-[12px] h-[12px] rounded-full shrink-0 border-2 border-white/50",
+                    style: { backgroundColor: d.fill }
+                  }
+                ),
+                /* @__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 capitalize", children: d[dataLabel] }),
+                  /* @__PURE__ */ jsx68("span", { className: "text-xs text-gray-600 font-medium", children: displayValue })
+                ] })
+              ]
+            },
+            `legend-${index}`
+          );
+        })
+      }
+    );
+  }, [data, dataLabel, dataKey, showLegends, onLegendClick, legendPosition, forceMobile]);
+  if (effectiveLoading) {
     return /* @__PURE__ */ jsxs42(
       "div",
       {
@@ -6127,141 +6234,167 @@ var ChartComponent = ({
       }
     );
   }
-  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: "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__ */ jsx68("span", { children: "\u2190 Prev" })
-          }
-        ),
-        /* @__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__ */ jsx68("span", { children: "Next \u2192" })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs42("div", { className: "flex items-center space-x-2 hidden sm:flex", children: [
-        /* @__PURE__ */ jsx68(
-          "button",
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx68(
+      "div",
+      {
+        className: `relative flex flex-col items-center justify-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: "text-center", children: /* @__PURE__ */ jsx68("div", { className: "inline-flex items-center space-x-2 bg-white/80 px-6 py-3 rounded-xl backdrop-blur-sm border border-gray-200 shadow-lg", children: /* @__PURE__ */ jsx68("span", { className: "text-sm font-medium text-gray-600", children: "No data" }) }) })
+      }
+    );
+  }
+  const isLegendRight = !forceMobile && legendPosition === "right";
+  return /* @__PURE__ */ jsxs42(
+    "div",
+    {
+      className: `relative flex ${isLegendRight ? "flex-row items-stretch gap-4" : "flex-col items-center"} ${className}`,
+      style,
+      children: [
+        /* @__PURE__ */ jsxs42(
+          "div",
           {
-            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__ */ jsx68("span", { children: "\u2190 Prev" })
+            className: `relative flex items-center justify-center ${isLegendRight ? "flex-[2] min-w-0 max-w-[70%] h-[450px]" : "w-full md:w-[75%] h-[450px] mb-2"}`,
+            children: [
+              isPaginationEnabled && rawMeta && /* @__PURE__ */ jsxs42("div", { className: "flex items-center justify-between mb-4 px-2", children: [
+                /* @__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__ */ jsx68("span", { children: "\u2190 Prev" })
+                    }
+                  ),
+                  /* @__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__ */ jsx68("span", { children: "Next \u2192" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs42("div", { className: "hidden sm:flex items-center space-x-2", 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__ */ jsx68("span", { children: "\u2190 Prev" })
+                    }
+                  ),
+                  /* @__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__ */ jsx68("span", { children: "Next \u2192" })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__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,
+                    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"
+                    },
+                    height: 80,
+                    className: "hidden sm:block"
+                  }
+                ),
+                /* @__PURE__ */ jsx68(
+                  YAxis,
+                  {
+                    tickFormatter: (value) => `${(value / 1e3).toFixed(0)}k`,
+                    tick: {
+                      fontSize: 12,
+                      fill: "#94a3b8",
+                      fontWeight: 500
+                    },
+                    domain: ["dataMin", "dataMax"],
+                    width: 60
+                  }
+                ),
+                /* @__PURE__ */ jsx68(Tooltip2, { formatter: (value) => [`${value}`, "Count"] }),
+                /* @__PURE__ */ jsx68(
+                  Bar,
+                  {
+                    dataKey,
+                    radius: [6, 6, 0, 0],
+                    isAnimationActive: false
+                  }
+                )
+              ] }) : /* @__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__ */ jsx68(CartesianGrid, { strokeDasharray: "3 3" }),
+                /* @__PURE__ */ jsx68(
+                  XAxis,
+                  {
+                    dataKey: dataLabel,
+                    angle: 0,
+                    interval: 0,
+                    tick: {
+                      fontSize: 13,
+                      fontWeight: 500,
+                      fill: "#666",
+                      fontFamily: "inherit"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx68(
+                  YAxis,
+                  {
+                    tickFormatter: (value) => `${(value / 1e3).toFixed(0)}k`,
+                    tick: {
+                      fontSize: 12,
+                      fill: "#94a3b8",
+                      fontWeight: 500
+                    },
+                    domain: ["dataMin", "dataMax"],
+                    width: 60
+                  }
+                ),
+                /* @__PURE__ */ jsx68(Tooltip2, { formatter: (value) => `${value}k` }),
+                /* @__PURE__ */ jsx68(
+                  Area,
+                  {
+                    type: "monotone",
+                    dataKey,
+                    stroke: "#00695C",
+                    fillOpacity: 1,
+                    fill: "url(#colorCount)",
+                    isAnimationActive: false
+                  }
+                )
+              ] }) })
+            ]
           }
         ),
-        /* @__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__ */ jsx68("span", { children: "Next \u2192" })
-          }
-        )
-      ] })
-    ] }),
-    /* @__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,
-          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"
-          },
-          height: 80,
-          className: "hidden sm:block"
-        }
-      ),
-      /* @__PURE__ */ jsx68(
-        YAxis,
-        {
-          tickFormatter: (value) => `${(value / 1e3).toFixed(0)}k`,
-          tick: {
-            fontSize: 12,
-            fill: "#94a3b8",
-            fontWeight: 500
-          },
-          domain: ["dataMin", "dataMax"],
-          width: 60
-        }
-      ),
-      /* @__PURE__ */ jsx68(Tooltip2, { formatter: (value) => [`${value}`, "Count"] }),
-      /* @__PURE__ */ jsx68(Legend, { verticalAlign: legendsPosition, align: "center" }),
-      /* @__PURE__ */ jsx68(
-        Bar,
-        {
-          dataKey,
-          radius: [6, 6, 0, 0],
-          isAnimationActive: false
-        }
-      )
-    ] }) : /* @__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__ */ jsx68(CartesianGrid, { strokeDasharray: "3 3" }),
-      /* @__PURE__ */ jsx68(
-        XAxis,
-        {
-          dataKey: dataLabel,
-          angle: 0,
-          interval: 0,
-          tick: {
-            fontSize: 13,
-            fontWeight: 500,
-            fill: "#666",
-            fontFamily: "inherit"
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx68(
-        YAxis,
-        {
-          tickFormatter: (value) => `${(value / 1e3).toFixed(0)}k`,
-          tick: {
-            fontSize: 12,
-            fill: "#94a3b8",
-            fontWeight: 500
-          },
-          domain: ["dataMin", "dataMax"],
-          width: 60
-        }
-      ),
-      /* @__PURE__ */ jsx68(Tooltip2, { formatter: (value) => `${value}k` }),
-      /* @__PURE__ */ jsx68(
-        Area,
-        {
-          type: "monotone",
-          dataKey,
-          stroke: "#00695C",
-          fillOpacity: 1,
-          fill: "url(#colorCount)",
-          isAnimationActive: false
-        }
-      )
-    ] }) })
-  ] });
+        showLegends && /* @__PURE__ */ jsx68("div", { className: isLegendRight ? "flex flex-col w-[30%] min-w-[180px] justify-center" : "w-full", children: renderLegends })
+      ]
+    }
+  );
 };
 var BarChart_default = React14.memo(ChartComponent);
 
@@ -6276,8 +6409,8 @@ import {
   Tooltip as Tooltip3
 } from "recharts";
 import { jsx as jsx69, jsxs as jsxs43 } from "react/jsx-runtime";
-var getRandomColor2 = () => {
-  const palette = [
+var getRandomColor = () => {
+  const palette2 = [
     "#2563eb",
     "#1d4ed8",
     "#1e40af",
@@ -6339,7 +6472,7 @@ var getRandomColor2 = () => {
     "#155e75",
     "#164e63"
   ];
-  return palette[Math.floor(Math.random() * palette.length)];
+  return palette2[Math.floor(Math.random() * palette2.length)];
 };
 var DonutChart = ({
   className,
@@ -6348,16 +6481,20 @@ var DonutChart = ({
   dataKey = "value",
   dataLabel = "name",
   apiUrl,
+  source,
+  legendPosition = "bottom",
+  onLegendClick,
   ...props
 }) => {
   const showLegends = props.showLegends ?? true;
   const canvasMode = props.canvasMode;
+  const useApi = source === "api" && !!apiUrl;
   const [rawData, setRawData] = useState16([]);
   const [localLoading, setLocalLoading] = useState16(false);
-  const effectiveData = apiUrl ? rawData : props.data || [];
-  const effectiveLoading = apiUrl ? localLoading : externalLoading;
+  const effectiveData = useApi ? rawData : props.data || [];
+  const effectiveLoading = useApi ? localLoading : externalLoading;
   useEffect30(() => {
-    if (!apiUrl) return;
+    if (!useApi) return;
     let cancelled = false;
     const fetchData = async () => {
       try {
@@ -6391,12 +6528,12 @@ var DonutChart = ({
     return () => {
       cancelled = true;
     };
-  }, [apiUrl]);
+  }, [useApi, apiUrl]);
   const data = useMemo12(() => {
     if (!Array.isArray(effectiveData) || effectiveData.length === 0) return [];
     return effectiveData.map((item) => ({
       ...item,
-      color: item.color || getRandomColor2(),
+      color: item.color || getRandomColor(),
       [dataKey]: Number(item[dataKey] ?? 0),
       [dataLabel]: item[dataLabel] ?? "Unknown"
     }));
@@ -6444,42 +6581,59 @@ var DonutChart = ({
   }, []);
   const renderLegends = useMemo12(() => {
     if (!showLegends) return null;
-    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__ */ 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__ */ jsx69(
-              "span",
-              {
-                className: "inline-block w-[12px] h-[12px] rounded-full shrink-0 border-2 border-white/50",
-                style: { backgroundColor: d.color }
-              }
-            ),
-            /* @__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__ */ jsx69("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]);
+    const isLegendRight2 = !forceMobile && legendPosition === "right";
+    return /* @__PURE__ */ jsx69(
+      "div",
+      {
+        className: isLegendRight2 ? "flex flex-col gap-2 w-full min-w-0 justify-start" : "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();
+          const payload = {
+            name: d[dataLabel],
+            value: actualValue,
+            [dataLabel]: d[dataLabel],
+            [dataKey]: actualValue
+          };
+          return /* @__PURE__ */ jsxs43(
+            "div",
+            {
+              role: onLegendClick ? "button" : void 0,
+              tabIndex: onLegendClick ? 0 : void 0,
+              onClick: onLegendClick ? () => onLegendClick(payload) : void 0,
+              onKeyDown: onLegendClick ? (e) => e.key === "Enter" && onLegendClick(payload) : void 0,
+              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 ${onLegendClick ? "cursor-pointer" : ""}`,
+              children: [
+                /* @__PURE__ */ jsx69(
+                  "span",
+                  {
+                    className: "inline-block w-[12px] h-[12px] rounded-full shrink-0 border-2 border-white/50",
+                    style: { backgroundColor: d.color }
+                  }
+                ),
+                /* @__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__ */ jsx69("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, onLegendClick, legendPosition, forceMobile]);
   if (!mounted) return null;
-  if (effectiveLoading || data.length === 0) {
+  if (effectiveLoading) {
     return /* @__PURE__ */ jsxs43(
       "div",
       {
@@ -6509,66 +6663,90 @@ var DonutChart = ({
       }
     );
   }
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx69(
+      "div",
+      {
+        className: `relative flex flex-col items-center justify-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__ */ jsx69("div", { className: "text-center", children: /* @__PURE__ */ jsx69("div", { className: "inline-flex items-center space-x-2 bg-white/80 px-6 py-3 rounded-xl backdrop-blur-sm border border-gray-200 shadow-lg", children: /* @__PURE__ */ jsx69("span", { className: "text-sm font-medium text-gray-600", children: "No data" }) }) })
+      }
+    );
+  }
   const { inner, outer } = getDynamicRadius();
   const innerRadius = inner;
   const outerRadius = outer;
-  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,
+  const isLegendRight = !forceMobile && legendPosition === "right";
+  return /* @__PURE__ */ jsxs43(
+    "div",
+    {
+      className: `relative flex ${isLegendRight ? "flex-row items-stretch gap-4" : "flex-col items-center"} ${className}`,
+      style,
+      children: [
+        /* @__PURE__ */ jsxs43(
+          "div",
           {
-            data: chartData,
-            cx: "50%",
-            cy: "50%",
-            innerRadius,
-            outerRadius,
-            dataKey,
-            labelLine: false,
-            isAnimationActive: true,
-            animationDuration: 800,
-            minAngle: 3,
-            children: chartData.map((entry, index) => /* @__PURE__ */ jsx69(
-              Cell,
-              {
-                fill: entry.color,
-                stroke: entry.isBoosted ? "#fff" : "transparent",
-                strokeWidth: entry.isBoosted ? 1.5 : 0
-              },
-              `cell-${index}`
-            ))
+            className: `relative flex items-center justify-center ${isLegendRight ? "flex-[2] min-w-0 max-w-[70%]" : "w-full md:w-[75%]"} h-[280px] md:h-[380px] ${isLegendRight ? "" : "mb-2"}`,
+            children: [
+              /* @__PURE__ */ jsx69(ResponsiveContainer2, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs43(PieChart, { children: [
+                /* @__PURE__ */ jsx69(
+                  Pie,
+                  {
+                    data: chartData,
+                    cx: "50%",
+                    cy: "50%",
+                    innerRadius,
+                    outerRadius,
+                    dataKey,
+                    labelLine: false,
+                    isAnimationActive: true,
+                    animationDuration: 800,
+                    minAngle: 3,
+                    children: chartData.map((entry, index) => /* @__PURE__ */ jsx69(
+                      Cell,
+                      {
+                        fill: entry.color,
+                        stroke: entry.isBoosted ? "#fff" : "transparent",
+                        strokeWidth: entry.isBoosted ? 1.5 : 0
+                      },
+                      `cell-${index}`
+                    ))
+                  }
+                ),
+                /* @__PURE__ */ jsx69(
+                  Tooltip3,
+                  {
+                    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"
+                    }
+                  }
+                )
+              ] }) }),
+              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__ */ jsx69("span", { className: "text-sm md:text-base font-normal text-gray-600 block md:inline-block md:ml-1", children: "total" })
+              ] }) })
+            ]
           }
         ),
-        /* @__PURE__ */ jsx69(
-          Tooltip3,
-          {
-            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"
-            }
-          }
-        )
-      ] }) }),
-      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__ */ jsx69("span", { className: "text-sm md:text-base font-normal text-gray-600 block md:inline-block md:ml-1", children: "total" })
-      ] }) })
-    ] }),
-    renderLegends
-  ] });
+        showLegends && /* @__PURE__ */ jsx69("div", { className: isLegendRight ? "flex flex-col w-[30%] min-w-[180px] justify-center" : "w-full", children: renderLegends })
+      ]
+    }
+  );
 };
 var PieChart_default = React15.memo(DonutChart);