@algorithm-shift/design-system 1.3.107 → 1.3.109

package/dist/index.d.mts

@@ -168,6 +168,7 @@ interface StagesProps extends ElementProps {
   triggerOnClick?: boolean;
   saving?: boolean;
   canvasMode?: 'desktop' | 'tablet' | 'mobile' | 'app';
+  primaryColor?: string
 }
 
 type ButtonProps = ElementProps & React.ComponentProps<"button"> & {
@@ -494,7 +495,7 @@ declare const HistoryTimeline: ({ title, className, loading, titleKey, descripti
 
 declare const Tabs: ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder, source, parentKey, menuNameKey, menuUrlKey, loading, bgActiveColor, textActiveColor }: TabsProps) => react_jsx_runtime.JSX.Element;
 
-declare const StagesComponent: ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage, dataKey, dataLabel, loading, saving, triggerOnClick, canvasMode }: StagesProps) => react_jsx_runtime.JSX.Element;
+declare const StagesComponent: ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage, dataKey, dataLabel, loading, saving, triggerOnClick, canvasMode, ...props }: StagesProps) => react_jsx_runtime.JSX.Element;
 
 declare const Spacer: ({ className, style }: ElementProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -168,6 +168,7 @@ interface StagesProps extends ElementProps {
   triggerOnClick?: boolean;
   saving?: boolean;
   canvasMode?: 'desktop' | 'tablet' | 'mobile' | 'app';
+  primaryColor?: string
 }
 
 type ButtonProps = ElementProps & React.ComponentProps<"button"> & {
@@ -494,7 +495,7 @@ declare const HistoryTimeline: ({ title, className, loading, titleKey, descripti
 
 declare const Tabs: ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder, source, parentKey, menuNameKey, menuUrlKey, loading, bgActiveColor, textActiveColor }: TabsProps) => react_jsx_runtime.JSX.Element;
 
-declare const StagesComponent: ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage, dataKey, dataLabel, loading, saving, triggerOnClick, canvasMode }: StagesProps) => react_jsx_runtime.JSX.Element;
+declare const StagesComponent: ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage, dataKey, dataLabel, loading, saving, triggerOnClick, canvasMode, ...props }: StagesProps) => react_jsx_runtime.JSX.Element;
 
 declare const Spacer: ({ className, style }: ElementProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -3665,6 +3665,7 @@ var React11 = __toESM(require("react"));
 var import_free_solid_svg_icons2 = require("@fortawesome/free-solid-svg-icons");
 var import_react_fontawesome3 = require("@fortawesome/react-fontawesome");
 var import_react_table2 = require("@tanstack/react-table");
+var import_axios3 = __toESM(require("axios"));
 var import_lucide_react12 = require("lucide-react");
 
 // src/components/ui/table.tsx
@@ -3780,11 +3781,9 @@ var valueFormatter = (value, format3, customFormatters = {}) => {
     case "date":
       return dayjs_setup_default(value).format(arg || "YYYY-MM-DD");
     case "datetimenumber":
-      const parsed = dayjs_setup_default(value).isValid() ? dayjs_setup_default(value).utc() : dayjs_setup_default(value);
-      return parsed.format("YYYY-MM-DD hh:mm");
+      return dayjs_setup_default(value).format("YYYY-MM-DD hh:mm");
     case "datetime":
-      const formated = dayjs_setup_default(value).isValid() ? dayjs_setup_default(value).utc() : dayjs_setup_default(value);
-      return formated.format("DD MMM YYYY hh:mm A");
+      return dayjs_setup_default(value).format("DD MMM YYYY hh:mm A");
     case "days":
       return `${dayjs_setup_default().diff(dayjs_setup_default(value), "day")} days`;
     case "months":
@@ -4101,13 +4100,153 @@ function DataTable({
   onDeleteRow,
   rowActions,
   enableRowSelection = false,
-  getRowSelection
+  getRowSelection,
+  tableId,
+  manageColumns = false,
+  preferenceUrl,
+  axiosInstance
 }) {
   const [columnFilters, setColumnFilters] = React11.useState([]);
   const [columnVisibility, setColumnVisibility] = React11.useState({});
+  const hasLoadedInitialState = React11.useRef(false);
+  const isSavingRef = React11.useRef(false);
+  const isFetchingRef = React11.useRef(false);
+  const transformApiToFrontend = React11.useCallback((apiSettings, allColumnIds) => {
+    if (!apiSettings || !apiSettings.columns || !apiSettings.columns.visible) {
+      return {};
+    }
+    const visibleColumns = apiSettings.columns.visible;
+    const result = {};
+    allColumnIds.forEach((colId) => {
+      result[colId] = visibleColumns.includes(colId);
+    });
+    return result;
+  }, []);
+  const transformFrontendToApi = React11.useCallback((visibility) => {
+    const visibleColumns = Object.keys(visibility).filter((colId) => visibility[colId] === true);
+    return {
+      columns: {
+        visible: visibleColumns
+      }
+    };
+  }, []);
+  const fetchColumnPreferences = React11.useCallback(async () => {
+    if (isFetchingRef.current) {
+      return;
+    }
+    if (!tableId || !manageColumns) {
+      hasLoadedInitialState.current = true;
+      return;
+    }
+    isFetchingRef.current = true;
+    try {
+      const entityKey = `table:${tableId}`;
+      const apiUrl = `${preferenceUrl}/${encodeURIComponent(entityKey)}`;
+      const axiosClient = axiosInstance ?? import_axios3.default;
+      const response = await axiosClient.get(apiUrl, {
+        withCredentials: true
+      });
+      if (response) {
+        const data2 = response.data;
+        if (data2.success && data2.data && data2.data.exists && data2.data.settings) {
+          let allColumnIds = [];
+          if (tableRef.current) {
+            allColumnIds = tableRef.current.getAllLeafColumns().map((col) => col.id).filter(Boolean);
+          } else {
+            allColumnIds = columns.map((col) => {
+              if (typeof col.id === "string") {
+                return col.id;
+              }
+              if (col.accessorKey) {
+                return col.accessorKey;
+              }
+              return null;
+            }).filter((id) => !!id);
+            if (enableRowSelection && !allColumnIds.includes("__select__")) {
+              allColumnIds.unshift("__select__");
+            }
+          }
+          if (allColumnIds.length > 0) {
+            const transformed = transformApiToFrontend(data2.data.settings, allColumnIds);
+            console.log("[DataTable] Loaded column preferences:", {
+              visibleColumns: data2.data.settings.columns?.visible,
+              allColumnIds,
+              transformed
+            });
+            if (Object.keys(transformed).length > 0) {
+              setColumnVisibility(transformed);
+            }
+          }
+        } else {
+          console.log("[DataTable] No saved preferences found, using default visibility");
+        }
+      } else {
+        console.warn("Failed to fetch column preferences:", response);
+      }
+    } catch (error) {
+      console.error("Error fetching column preferences:", error);
+    } finally {
+      hasLoadedInitialState.current = true;
+      isFetchingRef.current = false;
+    }
+  }, [tableId, transformApiToFrontend, manageColumns]);
+  const saveColumnPreferences = React11.useCallback(async (visibility) => {
+    if (!tableId || isSavingRef.current || !manageColumns) {
+      return;
+    }
+    isSavingRef.current = true;
+    try {
+      const entityKey = `table:${tableId}`;
+      const apiUrl = `${preferenceUrl}/${encodeURIComponent(entityKey)}`;
+      const settings = transformFrontendToApi(visibility);
+      const requestBody = {
+        settings,
+        is_default: true
+      };
+      const axiosClient = axiosInstance ?? import_axios3.default;
+      const response = await axiosClient.post(apiUrl, requestBody, {
+        withCredentials: true
+      });
+      if (!response) {
+        console.error("Failed to save column preferences:", response);
+      }
+    } catch (error) {
+      console.error("Error saving column preferences:", error);
+    } finally {
+      isSavingRef.current = false;
+    }
+  }, [tableId, transformFrontendToApi, manageColumns]);
+  React11.useEffect(() => {
+    if (hasLoadedInitialState.current || isFetchingRef.current) {
+      return;
+    }
+    if (!tableId) {
+      return;
+    }
+    if (manageColumns) {
+      fetchColumnPreferences();
+    }
+  }, [tableId, manageColumns]);
   const [manualSort, setManualSort] = React11.useState(null);
   const [searchTerm, setSearchTerm] = React11.useState("");
   const tableData = Array.isArray(data) ? data : [];
+  const filteredData = React11.useMemo(() => {
+    if (paginationMode === "client" && globalSearch && searchTerm.trim()) {
+      const searchLower = searchTerm.toLowerCase().trim();
+      return tableData.filter((row) => {
+        return columns.some((column) => {
+          const columnId = typeof column.id === "string" ? column.id : column.accessorKey;
+          if (!columnId) return false;
+          const accessorFn = column.accessorFn;
+          const cellValue = accessorFn ? accessorFn(row, 0) : row[columnId];
+          const cellValueStr = cellValue != null ? String(cellValue).toLowerCase() : "";
+          return cellValueStr.includes(searchLower);
+        });
+      });
+    }
+    return tableData;
+  }, [tableData, searchTerm, paginationMode, globalSearch, columns]);
+  const finalData = paginationMode === "client" && globalSearch ? filteredData : tableData;
   const finalCols = [...columns];
   if (enableRowSelection) {
     finalCols.unshift({
@@ -4134,44 +4273,89 @@ function DataTable({
   const dynamicCols = useDynamicColumns({ columns: finalCols, enableRowSelection });
   const [rowSelection, setRowSelection] = React11.useState({});
   const [localPageSize, setLocalPageSize] = React11.useState(pageSize);
+  const [localPageIndex, setLocalPageIndex] = React11.useState(0);
+  const isUpdatingPageSizeRef = React11.useRef(false);
+  const tableRef = React11.useRef(null);
+  React11.useEffect(() => {
+    if (paginationMode === "client") {
+      setLocalPageSize(pageSize);
+    }
+  }, [pageSize, paginationMode]);
   const table = (0, import_react_table2.useReactTable)({
-    data: tableData,
+    data: finalData,
     columns: dynamicCols,
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize
+      }
+    },
     state: {
       columnFilters,
       columnVisibility,
       rowSelection,
-      ...paginationMode === "server" ? {
-        pagination: {
-          pageIndex: controlledPageIndex ?? 0,
-          pageSize: localPageSize
-        }
-      } : {}
+      pagination: {
+        pageIndex: paginationMode === "server" ? controlledPageIndex ?? 0 : localPageIndex,
+        pageSize: localPageSize
+      }
     },
     enableRowSelection: !!enableRowSelection,
     onRowSelectionChange: (updater) => {
       setRowSelection((old) => {
         const newState = typeof updater === "function" ? updater(old) : updater;
-        const selectedData = Object.keys(newState).filter((key) => newState[key]).map((rowId) => tableData[Number(rowId)]);
+        const selectedData = Object.keys(newState).filter((key) => newState[key]).map((rowId) => finalData[Number(rowId)]);
         getRowSelection?.({ rows: selectedData });
         return newState;
       });
     },
     onColumnFiltersChange: setColumnFilters,
-    onColumnVisibilityChange: setColumnVisibility,
+    onColumnVisibilityChange: (updater) => {
+      setColumnVisibility((old) => {
+        const newState = typeof updater === "function" ? updater(old) : updater;
+        setTimeout(() => {
+          if (tableRef.current && tableId && hasLoadedInitialState.current) {
+            try {
+              const completeVisibility = {};
+              tableRef.current.getAllLeafColumns().forEach((column) => {
+                completeVisibility[column.id] = column.getIsVisible();
+              });
+              if (Object.keys(completeVisibility).length > 0) {
+                saveColumnPreferences(completeVisibility);
+              }
+            } catch (error) {
+              console.error("Error saving column visibility to API:", error);
+            }
+          }
+        }, 0);
+        return newState;
+      });
+    },
     getCoreRowModel: (0, import_react_table2.getCoreRowModel)(),
     getFilteredRowModel: (0, import_react_table2.getFilteredRowModel)(),
     getPaginationRowModel: pagination && paginationMode === "client" ? (0, import_react_table2.getPaginationRowModel)() : void 0,
     manualPagination: paginationMode === "server",
     pageCount: paginationMode === "server" ? Math.ceil(totalRecords / localPageSize) : void 0,
-    ...paginationMode === "server" ? {
-      onPaginationChange: (updater) => {
-        const prev = table.getState().pagination;
-        const next = typeof updater === "function" ? updater(prev) : updater;
+    onPaginationChange: (updater) => {
+      if (isUpdatingPageSizeRef.current) {
+        isUpdatingPageSizeRef.current = false;
+        return;
+      }
+      const prev = table.getState().pagination;
+      const next = typeof updater === "function" ? updater(prev) : updater;
+      if (paginationMode === "server") {
         onPageChange?.(next.pageIndex, next.pageSize);
+      } else {
+        setLocalPageIndex(next.pageIndex);
+        setLocalPageSize(next.pageSize);
       }
-    } : {}
+    }
   });
+  React11.useEffect(() => {
+    tableRef.current = table;
+    if (table && !hasLoadedInitialState.current && !isFetchingRef.current && tableId) {
+      fetchColumnPreferences();
+    }
+  }, [table, tableId]);
   const getPageNumbers = (currentPage, totalPages, maxVisiblePages = 5) => {
     if (totalPages <= maxVisiblePages) {
       return Array.from({ length: totalPages }, (_, i) => i + 1);
@@ -4194,17 +4378,26 @@ function DataTable({
   const pageCount = table.getPageCount() === 0 ? 1 : table.getPageCount();
   const handlePageSizeChange = (e) => {
     const newSize = Number(e.target.value);
-    const currentPageIndex = table.getState().pagination.pageIndex;
-    onPageChange?.(currentPageIndex, newSize);
-    setLocalPageSize(newSize);
+    if (paginationMode === "server") {
+      const currentPageIndex = table.getState().pagination.pageIndex;
+      onPageChange?.(currentPageIndex, newSize);
+      setLocalPageSize(newSize);
+    } else {
+      isUpdatingPageSizeRef.current = true;
+      setLocalPageSize(newSize);
+      setLocalPageIndex(0);
+    }
   };
   const pageSizeOptions = React11.useMemo(() => {
+    if (paginationMode === "client") {
+      return [5, 10, 20, 50, 100];
+    }
     const options = [5, 10, 20, 50, 100].filter((size) => size < totalRecords);
     if (options.length === 0) {
       options.push(5);
     }
     return options;
-  }, [totalRecords]);
+  }, [paginationMode, totalRecords]);
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "overflow-hidden rounded-md w-full", children: [
     !loading && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex justify-between p-2 bg-gray-50", children: [
       /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-4 w-full", children: [
@@ -4220,10 +4413,17 @@ function DataTable({
                 type: "text",
                 placeholder: "Search...",
                 value: searchTerm,
-                onChange: (e) => setSearchTerm(e.target.value),
+                onChange: (e) => {
+                  setSearchTerm(e.target.value);
+                  if (paginationMode === "client") {
+                    setLocalPageIndex(0);
+                  }
+                },
                 onKeyDown: (e) => {
-                  if (e.key === "Enter" && onGlobalSearch) {
-                    onGlobalSearch(searchTerm.trim());
+                  if (e.key === "Enter") {
+                    if (paginationMode === "server" && onGlobalSearch) {
+                      onGlobalSearch(searchTerm.trim());
+                    }
                   }
                 },
                 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]"
@@ -4231,7 +4431,7 @@ function DataTable({
             ),
             /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react12.Search, { className: "absolute left-2 top-2.5 text-gray-400", size: 16 })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          paginationMode === "server" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             Button,
             {
               size: "sm",
@@ -4242,7 +4442,7 @@ function DataTable({
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Popover, { children: [
+      manageColumns && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Popover, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           Button,
           {
@@ -4252,42 +4452,44 @@ function DataTable({
             children: "Manage Columns"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(PopoverContent, { align: "end", className: "w-48 p-3 space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(PopoverContent, { align: "end", className: "w-48 p-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "text-sm font-medium mb-2", children: "Show / Hide Columns" }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("label", { className: "flex items-center gap-2 text-sm font-semibold border-b pb-2 mb-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.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) => {
-            const header = column.columnDef.header;
-            return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("label", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "max-h-56 overflow-y-auto pr-1 space-y-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("label", { className: "flex items-center gap-2 text-sm font-semibold border-b pb-2 mb-2", children: [
               /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                 "input",
                 {
                   type: "checkbox",
-                  checked: column.getIsVisible(),
-                  onChange: (e) => column.toggleVisibility(e.target.checked)
+                  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)
+                    );
+                  }
                 }
               ),
-              typeof header === "function" ? header({ column, header, table }) : typeof header === "string" ? header : column.id
-            ] }, column.id);
-          })
+              "Toggle All"
+            ] }),
+            table.getAllLeafColumns().map((column) => {
+              const header = column.columnDef.header;
+              return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("label", { className: "flex items-center gap-2 text-sm", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: column.getIsVisible(),
+                    onChange: (e) => column.toggleVisibility(e.target.checked)
+                  }
+                ),
+                typeof header === "function" ? header({ column, header, table }) : typeof header === "string" ? header : column.id
+              ] }, column.id);
+            })
+          ] })
         ] })
       ] })
     ] }),
@@ -4386,7 +4588,22 @@ function DataTable({
           `header-${header.id}-${index}`
         );
       }) }, `header-group-${hg.id}`)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableBody, { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx_runtime51.Fragment, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableRow, { children: dynamicCols.map((_2, j) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableCell, { className: "p-3", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "h-4 bg-gray-200 rounded w-3/4 block animate-pulse" }) }, j)) }, i)) }) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableRow, { children: row.getVisibleCells().map((cell, cellIndex, arr) => {
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableBody, { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx_runtime51.Fragment, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableRow, { children: table.getHeaderGroups()[0].headers.map((header, j) => {
+        const column = header.column;
+        return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          TableCell,
+          {
+            className: "p-3",
+            style: {
+              width: column.getSize(),
+              minWidth: column.columnDef.minSize,
+              maxWidth: column.columnDef.maxSize
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "h-4 bg-gray-200 rounded w-full block animate-pulse" })
+          },
+          j
+        );
+      }) }, i)) }) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableRow, { children: row.getVisibleCells().map((cell, cellIndex, arr) => {
         const meta = cell.column.columnDef.meta || {};
         const isClickable = meta?.isClickable;
         const isLastCell = cellIndex === arr.length - 1;
@@ -5410,29 +5627,6 @@ function TooltipTrigger({
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
-    TooltipPrimitive.Content,
-    {
-      "data-slot": "tooltip-content",
-      sideOffset,
-      className: cn(
-        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
-      ]
-    }
-  ) });
-}
 
 // src/components/Navigation/Stages/Stages.tsx
 var import_jsx_runtime61 = require("react/jsx-runtime");
@@ -5449,7 +5643,8 @@ var StagesComponent = ({
   loading,
   saving,
   triggerOnClick = false,
-  canvasMode = "desktop"
+  canvasMode = "desktop",
+  ...props
 }) => {
   const [activeStage, setActiveStage] = (0, import_react34.useState)("");
   const [isCompleted, setIsCompleted] = (0, import_react34.useState)(false);
@@ -5527,6 +5722,7 @@ var StagesComponent = ({
   }, [currentStage, stages]);
   const isAllStagesCompleted = isCompleted || activeRootStage?.[dataKey] === lastStage;
   const disabled = isAllStagesCompleted || loading || saving;
+  const primaryColor = props.primaryColor || "#12715b";
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     "div",
     {
@@ -5564,16 +5760,19 @@ var StagesComponent = ({
               const currentIndex = stages.findIndex((s) => s[dataKey] === activeStage);
               const isCompletedStage = isAllStagesCompleted || index <= currentIndex;
               const isActive = !isAllStagesCompleted && index === currentIndex;
-              let stageColor = "bg-green-50 text-green-700 border-2 border-green-700";
+              let stageColor = `text-[${primaryColor}] border-2 border-[${primaryColor}]`;
+              let stageStyle = { borderColor: primaryColor, color: isActive ? "white" : primaryColor, backgroundColor: isActive ? primaryColor : "transparent" };
               if (stage.hasOwnProperty("isSuccess") && stage.isSuccess === false) {
-                stageColor = "bg-red-50 text-red-700 border-2 border-red-700";
+                stageColor = `bg-red-50 text-red-700 border-2 border-red-700`;
+                stageStyle = { borderColor: "red", color: "red", backgroundColor: "transparent" };
               }
               let stageLabel = stage[dataLabel];
               if (stage[dataKey] !== activeChildStage?.[dataKey] && activeRootStage?.[dataKey] === stage[dataKey]) {
                 stageLabel = activeChildStage?.[dataLabel] || stageLabel;
-                stageColor = "bg-green-50 text-green-700 border-2 border-green-700";
+                stageColor = `text-[${primaryColor}] border-2 border-[${primaryColor}]`;
                 if (activeChildStage.hasOwnProperty("isSuccess") && activeChildStage.isSuccess === false) {
                   stageColor = "bg-red-50 text-red-700 border-2 border-red-700";
+                  stageStyle = { borderColor: "red", color: "red", backgroundColor: "transparent" };
                 }
               }
               const stageKey = typeof stage[dataKey] === "string" ? stage[dataKey] : JSON.stringify(stage[dataKey]);
@@ -5585,17 +5784,17 @@ var StagesComponent = ({
                     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 max-w-[150px] text-ellipsis overflow-hidden
-                    ${isActive ? "bg-green-700 text-white shadow-md" : isCompletedStage ? stageColor : "bg-white text-gray-700 hover:bg-gray-100 border border-gray-200"}
+                    ${isActive ? `bg-[${primaryColor}] text-white shadow-md` : isCompletedStage ? stageColor : "bg-white border border-gray-200"}
                     ${isMobile ? "flex-1 text-center py-2.5" : ""}
                   `,
                     onClick: () => {
                       if (isAllStagesCompleted) return;
                       onStageClick(stage[dataKey]);
                     },
+                    style: stageStyle,
                     children: stageLabel
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TooltipContent, { className: "max-w-[400px] p-3 text-xs text-muted-foreground space-y-2", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("b", { children: stageLabel }) }) }),
                 !isMobile && index < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "hidden sm:flex sm:flex-shrink-0 w-3 h-px bg-gray-300 sm:w-4" })
               ] }, stageKey) }, stageKey);
             })
@@ -5612,12 +5811,13 @@ var StagesComponent = ({
               "button",
               {
                 className: `
-                w-full lg:w-auto bg-green-700 text-white px-4 lg:px-6 py-2.5 
+                w-full lg:w-auto 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,
+                style: { backgroundColor: primaryColor },
                 children: saving ? "Updating..." : buttonText
               }
             )
@@ -5823,7 +6023,7 @@ function Navbar({
 
 // src/components/Chart/BarChart.tsx
 var import_react36 = __toESM(require("react"));
-var import_axios3 = __toESM(require("axios"));
+var import_axios4 = __toESM(require("axios"));
 var import_recharts = require("recharts");
 var import_jsx_runtime68 = require("react/jsx-runtime");
 var getRandomColor = () => {
@@ -5903,7 +6103,7 @@ var ChartComponent = ({
         page: page.toString(),
         limit: limit.toString()
       });
-      const axiosClient = props.axiosInstance ?? import_axios3.default;
+      const axiosClient = props.axiosInstance ?? import_axios4.default;
       const res = await axiosClient.get(`${apiUrl}?${params.toString()}`, {
         withCredentials: true
       });
@@ -6131,7 +6331,7 @@ var BarChart_default = import_react36.default.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
 var import_react37 = __toESM(require("react"));
-var import_axios4 = __toESM(require("axios"));
+var import_axios5 = __toESM(require("axios"));
 var import_recharts2 = require("recharts");
 var import_jsx_runtime69 = require("react/jsx-runtime");
 var getRandomColor2 = () => {
@@ -6220,7 +6420,7 @@ var DonutChart = ({
     const fetchData = async () => {
       try {
         setLocalLoading(true);
-        const axiosClient = props.axiosInstance ?? import_axios4.default;
+        const axiosClient = props.axiosInstance ?? import_axios5.default;
         const res = await axiosClient.get(apiUrl, {
           withCredentials: true
         });