@algorithm-shift/design-system 1.2.65 → 1.2.67

package/dist/index.js

@@ -243,6 +243,11 @@ function TabGroupComponent({
   activeTab,
   onTabChange
 }) {
+  (0, import_react3.useEffect)(() => {
+    if (list && list.length > 0 && !activeTab && onTabChange) {
+      onTabChange(list[0]?.tabId);
+    }
+  }, [list, activeTab, onTabChange]);
   const formatedList = (0, import_react3.useMemo)(
     () => Array.isArray(list) ? [...list].sort((a, b) => (a.orderNumber ?? 0) - (b.orderNumber ?? 0)) : [],
     [list]
@@ -27819,7 +27824,7 @@ var PhoneInput = ({ className, style, ...props }) => {
         name: props.name,
         value: props.value || "",
         className: cn(
-          "rounded-md",
+          "rounded-md border-1",
           className,
           props.errorMessage ? "border-red-500" : ""
         ),
@@ -28434,16 +28439,20 @@ function DataTable({
   onPageChange,
   pageSize = 10,
   paginationMode = "client",
-  totalRecords = 0
+  totalRecords = 0,
+  onSortChange,
+  onFilterChange,
+  onGlobalSearch,
+  globalSearch
 }) {
-  const [sorting, setSorting] = React6.useState([]);
   const [columnFilters, setColumnFilters] = React6.useState([]);
   const [columnVisibility, setColumnVisibility] = React6.useState({});
+  const [manualSort, setManualSort] = React6.useState(null);
+  const [searchTerm, setSearchTerm] = React6.useState("");
   const table = (0, import_react_table.useReactTable)({
     data,
     columns,
     state: {
-      sorting,
       columnFilters,
       columnVisibility,
       pagination: {
@@ -28451,11 +28460,9 @@ function DataTable({
         pageSize
       }
     },
-    onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
     onColumnVisibilityChange: setColumnVisibility,
     getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
-    getSortedRowModel: (0, import_react_table.getSortedRowModel)(),
     getFilteredRowModel: (0, import_react_table.getFilteredRowModel)(),
     getPaginationRowModel: pagination && paginationMode === "client" ? (0, import_react_table.getPaginationRowModel)() : void 0,
     manualPagination: paginationMode === "server",
@@ -28485,68 +28492,105 @@ function DataTable({
     }
     return [];
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "overflow-hidden rounded-md border w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex justify-end p-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Popover, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-        Button,
-        {
-          variant: "outline",
-          size: "sm",
-          className: "px-3 py-1 text-xs cursor-pointer",
-          children: "Manage Columns"
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(PopoverContent, { align: "end", className: "w-48 p-3 space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "text-sm font-medium mb-2", children: "Show / Hide Columns" }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "flex items-center gap-2 text-sm font-semibold border-b pb-2 mb-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "overflow-hidden rounded-md w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: `flex ${globalSearch ? "justify-between" : "justify-end"} p-2 bg-gray-50`, children: [
+      globalSearch && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-2 w-full max-w-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "relative w-full", children: [
           /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             "input",
             {
-              type: "checkbox",
-              checked: table.getAllLeafColumns().every((col) => col.getIsVisible()),
-              ref: (input) => {
-                if (input) {
-                  input.indeterminate = table.getAllLeafColumns().some((col) => col.getIsVisible()) && !table.getAllLeafColumns().every((col) => col.getIsVisible());
+              type: "text",
+              placeholder: "Search...",
+              value: searchTerm,
+              onChange: (e) => setSearchTerm(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && onGlobalSearch) {
+                  onGlobalSearch(searchTerm.trim());
                 }
               },
-              onChange: (e) => {
-                table.getAllLeafColumns().forEach(
-                  (col) => col.toggleVisibility(e.target.checked)
-                );
-              }
+              className: "border border-gray-300 rounded-md text-sm px-3 py-2 pl-8 w-full focus:outline-none focus:ring-1 focus:ring-[#12715B]"
             }
           ),
-          "Toggle All"
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Search, { className: "absolute left-2 top-2.5 text-gray-400", size: 16 })
         ] }),
-        table.getAllLeafColumns().map((column) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "flex items-center gap-2 text-sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-            "input",
-            {
-              type: "checkbox",
-              checked: column.getIsVisible(),
-              onChange: (e) => column.toggleVisibility(e.target.checked)
-            }
-          ),
-          column.columnDef.header?.toString() ?? column.id
-        ] }, column.id))
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          Button,
+          {
+            size: "sm",
+            className: "bg-[#12715B] text-white text-xs h-auto py-2 px-3",
+            onClick: () => onGlobalSearch?.(searchTerm.trim()),
+            children: "Search"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Popover, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            className: "px-3 py-1 text-xs cursor-pointer border-gray-300",
+            children: "Manage Columns"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(PopoverContent, { align: "end", className: "w-48 p-3 space-y-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "text-sm font-medium mb-2", children: "Show / Hide Columns" }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "flex items-center gap-2 text-sm font-semibold border-b pb-2 mb-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              "input",
+              {
+                type: "checkbox",
+                checked: table.getAllLeafColumns().every((col) => col.getIsVisible()),
+                ref: (input) => {
+                  if (input) {
+                    input.indeterminate = table.getAllLeafColumns().some((col) => col.getIsVisible()) && !table.getAllLeafColumns().every((col) => col.getIsVisible());
+                  }
+                },
+                onChange: (e) => {
+                  table.getAllLeafColumns().forEach(
+                    (col) => col.toggleVisibility(e.target.checked)
+                  );
+                }
+              }
+            ),
+            "Toggle All"
+          ] }),
+          table.getAllLeafColumns().map((column) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              "input",
+              {
+                type: "checkbox",
+                checked: column.getIsVisible(),
+                onChange: (e) => column.toggleVisibility(e.target.checked)
+              }
+            ),
+            column.columnDef.header?.toString() ?? column.id
+          ] }, column.id))
+        ] })
       ] })
-    ] }) }),
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Table3, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: hg.headers.map((header) => {
         const canSort = header.column.getCanSort();
         const canFilter = header.column.getCanFilter();
+        const sortDir = manualSort?.key === header.column.id ? manualSort.dir : null;
         return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableHead, { className: "relative select-none", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
             "span",
             {
               className: `flex items-center gap-1 ${canSort ? "cursor-pointer" : ""}`,
-              onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
+              onClick: () => {
+                if (!canSort) return;
+                const newDir = manualSort?.key === header.column.id && manualSort.dir === "asc" ? "desc" : "asc";
+                setManualSort({ key: header.column.id, dir: newDir });
+                onSortChange?.(header.column.id, newDir);
+              },
               children: [
                 (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()),
                 canSort && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
-                  header.column.getIsSorted() === "asc" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowUp, { size: 14, className: "text-gray-500" }),
-                  header.column.getIsSorted() === "desc" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowDown, { size: 14, className: "text-gray-500" }),
-                  !header.column.getIsSorted() && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowUpDown, { size: 14, className: "text-gray-400" })
+                  sortDir === "asc" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowUp, { size: 14, className: "text-gray-500" }),
+                  sortDir === "desc" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowDown, { size: 14, className: "text-gray-500" }),
+                  !sortDir && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowUpDown, { size: 14, className: "text-gray-400" })
                 ] })
               ]
             }
@@ -28564,8 +28608,8 @@ function DataTable({
             /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               PopoverContent,
               {
-                align: "start",
-                sideOffset: 4,
+                align: "center",
+                sideOffset: 14,
                 className: "w-50 p-3 z-[200] border-gray-300",
                 avoidCollisions: true,
                 children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
@@ -28574,8 +28618,10 @@ function DataTable({
                     onSubmit: (e) => {
                       e.preventDefault();
                       const formData = new FormData(e.currentTarget);
-                      const value = formData.get("filter");
-                      header.column.setFilterValue(value || void 0);
+                      const value = formData.get("filter") || "";
+                      if (onFilterChange && value) {
+                        onFilterChange({ columnKey: header.column.id, columnTerm: value });
+                      }
                     },
                     className: "space-y-2",
                     children: [
@@ -28665,9 +28711,13 @@ var Table4 = ({
   paginationMode = "client",
   itemsPerPage = 10,
   onPageChange,
+  onSortChange,
+  onFilterChange,
+  onGlobalSearch,
   page,
   loading = false,
   totalRecords = 0,
+  globalSearch = false,
   ...props
 }) => {
   const rawColumns = Array.isArray(columns) ? columns : [];
@@ -28688,7 +28738,11 @@ var Table4 = ({
         onPageChange?.({ page: pageIndex + 1, itemsPerPage: pageSize });
       },
       paginationMode,
-      totalRecords
+      totalRecords,
+      onSortChange: (col, dir) => onSortChange?.({ sort_by: col, sort_order: dir }),
+      onFilterChange: (filters) => onFilterChange?.({ columnKey: filters.columnKey, columnTerm: filters.columnTerm }),
+      onGlobalSearch: (term) => onGlobalSearch?.({ searchTerm: term }),
+      globalSearch
     }
   ) });
 };
@@ -29085,20 +29139,20 @@ function Navbar({
   userName = "Guest User"
 }) {
   const isMobileView = canvasMode === "mobile" || canvasMode === "tablet";
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("nav", { className: "w-full border-b bg-white shadow-sm", style, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "mx-auto flex max-w-7xl items-center justify-between px-4 py-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("nav", { className: "w-full border-b border-b-white dark:border-b-gray-800 dark:bg-gray-800 bg-white shadow-sm", style, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "mx-auto flex max-w-[90%] items-center justify-between px-4 py-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_link6.default, { href: "/", className: "flex items-center space-x-2", children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_image3.default, { src: imageUrl, alt: altText, width: 200, height: 200 }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "font-semibold text-blue-700", children: "Logo" }) }),
     !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex items-center space-x-6 sm:hidden md:flex", children: list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       import_link6.default,
       {
         href: item.url || "#",
-        className: "text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors",
+        className: "text-sm font-medium dark:text-white text-gray-600 hover:text-gray-900 transition-colors",
         children: item.header
       },
       item.id
     )) }),
     /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center space-x-3", children: [
       !isMobileView ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex-1 px-6", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dark:text-white text-gray-400" }),
         /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Input, { placeholder: "Search", className: "pl-9 text-gray-400" })
       ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         Button,
@@ -29109,13 +29163,13 @@ function Navbar({
           children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Search, { className: "h-5 w-5 text-gray-400" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "relative bg-[#E9E9E9] rounded-md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Bell, { className: "h-5 w-5 text-[#1C1B1F]" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "relative bg-[#E9E9E9] dark:bg-gray-700 rounded-md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Bell, { className: "h-5 w-5 text-[#1C1B1F] dark:text-gray-400" }) }),
         badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] text-white leading-8", children: badgeCount }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "absolute -top-1 -right-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(DropdownMenu, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center space-x-2", children: [
-          !isMobileView && showName && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h4", { className: "text-[#000000] text-[13px] font-[500] mb-0", children: userName }),
+          !isMobileView && showName && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h4", { className: "text-[#000000] dark:text-gray-300 text-[13px] font-[500] mb-0", children: userName }),
           !isMobileView ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Avatar, { className: "cursor-pointer h-8 w-8 text-gray-900", children: profileType === "avatar" ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
               AvatarImage,
@@ -29129,7 +29183,7 @@ function Navbar({
               {
                 variant: "ghost",
                 size: "icon",
-                className: "text-gray-900 md:hidden",
+                className: "text-gray-900 md:hidden dark:invert",
                 children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Menu, { className: "h-6 w-6" })
               }
             )
@@ -29138,16 +29192,16 @@ function Navbar({
             {
               variant: "ghost",
               size: "icon",
-              className: "text-gray-900",
+              className: "text-gray-900 dark:invert",
               children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Menu, { className: "h-6 w-6" })
             }
           )
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(DropdownMenuContent, { align: "end", className: "bg-white", children: [
-          profileMenu && profileMenu.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx_runtime58.Fragment, { children: profileMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DropdownMenuItem, { className: "text-black", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_link6.default, { href: item.url || "#", children: item.header }) }, item.id)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-gray-800", children: [
+          profileMenu && profileMenu.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx_runtime58.Fragment, { children: profileMenu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_link6.default, { href: item.url || "#", children: item.header }) }, item.id)) }),
           /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "md:hidden", children: [
             /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_dropdown_menu.DropdownMenuSeparator, {}),
-            list && list.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx_runtime58.Fragment, { children: list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DropdownMenuItem, { className: "text-black", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_link6.default, { href: item.url || "#", children: item.header }) }, item.id)) })
+            list && list.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx_runtime58.Fragment, { children: list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_link6.default, { href: item.url || "#", children: item.header }) }, item.id)) })
           ] })
         ] })
       ] })
@@ -29156,19 +29210,45 @@ function Navbar({
 }
 
 // src/components/Chart/BarChart.tsx
+var import_react27 = __toESM(require("react"));
 var import_recharts = require("recharts");
 var import_jsx_runtime59 = require("react/jsx-runtime");
-var ChartComponent = ({ className, style, ...props }) => {
-  const data = Array.isArray(props?.data) ? props.data : [];
+var ChartComponent = ({ className, style, loading, ...props }) => {
+  const data = Array.isArray(props.data) ? props.data : [];
   const chartType = props.chartType || "bar";
   const legendsPosition = props.legendsPosition === "middle" || props.legendsPosition === "bottom" ? props.legendsPosition : "top";
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: `${className} h-[400px]`, style, children: data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_recharts.BarChart, { data, children: [
+  if (loading || data.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      "div",
+      {
+        className: `flex items-center justify-center w-full h-[300px] md:h-[400px] bg-gray-50 animate-pulse rounded-lg ${className}`,
+        style,
+        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: `${className} h-[400px]`, style, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_recharts.BarChart, { data, title: "Leads", desc: "content", children: [
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }),
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.XAxis, { dataKey: "name" }),
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.YAxis, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.Tooltip, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.Tooltip, { formatter: (value) => `${value}k` }),
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.Legend, { verticalAlign: legendsPosition, align: "center" }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.Bar, { dataKey: "value", fill: "#00695C" })
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      import_recharts.Bar,
+      {
+        dataKey: "value",
+        fill: "#00695C",
+        radius: [6, 6, 0, 0],
+        isAnimationActive: false,
+        children: data.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          "rect",
+          {
+            fill: entry.color || "#00695C"
+          },
+          `bar-${index}`
+        ))
+      }
+    )
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_recharts.AreaChart, { data, children: [
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
@@ -29177,7 +29257,7 @@ var ChartComponent = ({ className, style, ...props }) => {
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }),
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.XAxis, { dataKey: "name" }),
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.YAxis, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.Tooltip, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts.Tooltip, { formatter: (value) => `${value}k` }),
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       import_recharts.Area,
       {
@@ -29185,47 +29265,44 @@ var ChartComponent = ({ className, style, ...props }) => {
         dataKey: "value",
         stroke: "#00695C",
         fillOpacity: 1,
-        fill: "url(#colorCount)"
+        fill: "url(#colorCount)",
+        isAnimationActive: false
       }
     )
   ] }) }) });
 };
-var BarChart_default = ChartComponent;
+var BarChart_default = import_react27.default.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
+var import_react28 = __toESM(require("react"));
 var import_recharts2 = require("recharts");
 var import_jsx_runtime60 = require("react/jsx-runtime");
-var DonutChart = ({ className, style, ...props }) => {
-  const data = Array.isArray(props?.data) ? props.data : [];
-  const total = data.reduce((sum, d) => sum + d.value, 0);
-  const showPercentage = props.showPercentage ?? true;
+var getRandomColor = () => {
+  const palette = [
+    "#2563eb",
+    "#10b981",
+    "#f59e0b",
+    "#ef4444",
+    "#8b5cf6",
+    "#14b8a6",
+    "#ec4899",
+    "#e11d48",
+    "#22c55e",
+    "#3b82f6"
+  ];
+  return palette[Math.floor(Math.random() * palette.length)];
+};
+var DonutChart = ({ className, style, loading, ...props }) => {
   const showLegends = props.showLegends ?? true;
   const labelType = props.labelType || "inside";
   const canvasMode = props.canvasMode;
-  const renderLabel = ({ value, x, y }) => {
-    if (value == null) return null;
-    const percentage = (Number(value) / total * 100).toFixed(0);
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
-      "text",
-      {
-        x,
-        y,
-        textAnchor: "middle",
-        dominantBaseline: "central",
-        className: "text-[10px] font-semibold",
-        fill: labelType === "inside" ? "#fff" : "#000",
-        children: [
-          value,
-          "k ",
-          showPercentage ? `(${percentage}%)` : ""
-        ]
-      }
-    );
-  };
+  const data = (0, import_react28.useMemo)(() => {
+    if (!Array.isArray(props.data)) return [];
+    return props.data.map((item) => ({ ...item, color: getRandomColor() }));
+  }, [props.data]);
+  const total = (0, import_react28.useMemo)(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
   const forceMobile = canvasMode === "mobile" || canvasMode === "tablet";
-  const forceDesktop = canvasMode === "desktop";
-  const wrapperClass = canvasMode ? forceDesktop ? "flex-row" : "flex-col" : "flex-col md:flex-row";
-  const renderLegends = () => {
+  const renderLegends = (0, import_react28.useMemo)(() => {
     if (!showLegends) return null;
     return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_jsx_runtime60.Fragment, { children: data.map((d) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
       "div",
@@ -29244,23 +29321,33 @@ var DonutChart = ({ className, style, ...props }) => {
       },
       d.name
     )) });
-  };
+  }, [data, showLegends]);
+  if (loading || data.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      "div",
+      {
+        className: `flex items-center justify-center w-full h-[300px] md:h-[400px] bg-gray-50 animate-pulse rounded-lg ${className}`,
+        style,
+        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "text-gray-400 text-sm md:text-base", children: loading ? "Loading chart report..." : "No data available to display the chart." })
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     "div",
     {
-      className: `relative flex items-center ${wrapperClass} ${className}`,
+      className: `relative flex flex-col items-center ${className}`,
       style,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "relative w-full md:w-[70%] h-[300px] md:h-[400px] flex items-center justify-center", children: [
-          data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_recharts2.PieChart, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_recharts2.PieChart, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
               import_recharts2.Pie,
               {
                 data,
                 cx: "50%",
                 cy: "50%",
-                innerRadius: 70,
-                outerRadius: 120,
+                innerRadius: forceMobile ? 60 : 80,
+                outerRadius: forceMobile ? 100 : 140,
                 dataKey: "value",
                 labelLine: false,
                 isAnimationActive: false,
@@ -29271,26 +29358,38 @@ var DonutChart = ({ className, style, ...props }) => {
                     {
                       dataKey: "value",
                       position: labelType === "inside" ? "inside" : "outside",
-                      content: renderLabel
+                      fill: labelType === "inside" ? "#fff" : "#000",
+                      fontSize: forceMobile ? 10 : 13,
+                      fontWeight: 600
                     }
                   )
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts2.Tooltip, { formatter: (value, name) => [`${value}k`, name] })
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              import_recharts2.Tooltip,
+              {
+                formatter: (value, name) => [`${value}k`, name]
+              }
+            )
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-2xl md:text-4xl font-bold text-[#000]", children: [
-            total,
-            "k"
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+            "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]`,
+              children: [
+                total,
+                "k"
+              ]
+            }
+          )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: `flex ${forceDesktop ? "flex-col ml-auto space-y-3" : "flex-wrap justify-center gap-2 mt-4"}
-            w-full md:w-auto`, children: renderLegends() })
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex flex-wrap justify-center gap-2 mt-6 w-full md:w-auto", children: renderLegends })
       ]
     }
   );
 };
-var PieChart_default = DonutChart;
+var PieChart_default = import_react28.default.memo(DonutChart);
 
 // src/components/Blocks/EmailComposer.tsx
 var import_jsx_runtime61 = require("react/jsx-runtime");