@algorithm-shift/design-system 1.2.86 → 1.2.88

package/dist/index.mjs

@@ -226,12 +226,17 @@ function Repeater({
   render,
   emptyFallback = null,
   wrapper,
-  className
+  className,
+  loading = false,
+  loadingText = "Loading..."
 }) {
   const list = React3.useMemo(
     () => typeof count === "number" ? items.slice(0, count) : items,
     [items, count]
   );
+  if (loading) {
+    return /* @__PURE__ */ jsx10("div", { className, children: loadingText });
+  }
   if (!list.length) {
     return emptyFallback ? /* @__PURE__ */ jsx10(Fragment2, { children: emptyFallback }) : /* @__PURE__ */ jsx10("div", { className, children: "No items to display." });
   }
@@ -27717,6 +27722,31 @@ function useLazyDropdown(config) {
       setLoading(false);
     }
   }, [fetchApiData, transformToOptions]);
+  const fetchValueItem = async () => {
+    if (!configRef.current.apiUrl) return [];
+    try {
+      setLoading(true);
+      const res = await axios.get(configRef.current.apiUrl, {
+        params: { [configRef.current.dataKey]: configRef.current.value },
+        withCredentials: true
+      });
+      if (res.data?.success && Array.isArray(res.data.data) && res.data.data.length > 0) {
+        const fetched = transformToOptions(res.data.data);
+        setOptions((prev) => [...fetched, ...prev]);
+      }
+    } catch (err) {
+      console.warn("\u26A0\uFE0F Failed to fetch default value for dropdown:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect13(() => {
+    const cfg = configRef.current;
+    if (!cfg.enabled || !cfg.value || cfg.dataSource !== "api" || !cfg.apiUrl) return;
+    const valueExists = options.some((opt) => opt.value === cfg.value);
+    if (valueExists) return;
+    fetchValueItem();
+  }, [config.value, config.dataKey, config.apiUrl, config.dataSource, transformToOptions]);
   const loadMore = useCallback2(() => {
     if (!loading && hasMore) {
       loadPage(page + 1, searchTerm);
@@ -27793,7 +27823,8 @@ function LazySelectDropdown({
     pageSize: pageSize || 10,
     dataKey,
     dataLabel,
-    initialData: options || []
+    initialData: options || [],
+    value
   });
   const selectedOption = lazyOptions.find((opt) => opt.value === value);
   useEffect14(() => {
@@ -27858,7 +27889,7 @@ function LazySelectDropdown({
       "div",
       {
         onMouseDown: (e) => e.stopPropagation(),
-        className: "absolute z-[9999] w-fit mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto",
+        className: "absolute z-[900] w-fit mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto",
         style: {
           width: dropdownRef.current?.offsetWidth,
           top: dropdownRef.current ? dropdownRef.current.getBoundingClientRect().bottom + window.scrollY : 0,
@@ -29235,7 +29266,10 @@ var useDynamicColumns = (config, customRenderers = {}, customFormatters = {}) =>
           col.format,
           customFormatters
         );
-      }
+      },
+      enableSorting: col.enableSorting,
+      enableColumnFilter: col.enableColumnFilter,
+      meta: col.meta
     });
   });
 };
@@ -29258,37 +29292,13 @@ function DataTable({
   globalSearch,
   onCellClick,
   onDeleteRow,
-  enableDelete
+  rowActions
 }) {
   const [columnFilters, setColumnFilters] = React9.useState([]);
   const [columnVisibility, setColumnVisibility] = React9.useState({});
   const [manualSort, setManualSort] = React9.useState(null);
   const [searchTerm, setSearchTerm] = React9.useState("");
-  const deleteColumn = React9.useMemo(() => ({
-    id: "delete",
-    header: "Actions",
-    cell: ({ row }) => /* @__PURE__ */ jsx53(
-      "button",
-      {
-        className: "px-3 py-1 text-[12px] bg-red-800 text-white rounded hover:bg-neutral-600 cursor-pointer",
-        onClick: (event) => {
-          event.stopPropagation();
-          if (onDeleteRow) {
-            onDeleteRow(row.original, "delete");
-          }
-        },
-        children: "Delete"
-      }
-    ),
-    meta: { isClickable: true }
-  }), [onDeleteRow]);
-  const combinedColumns = React9.useMemo(() => {
-    if (enableDelete) {
-      return [...columns, deleteColumn];
-    }
-    return columns;
-  }, [columns, enableDelete, deleteColumn]);
-  const dynamicCols = useDynamicColumns({ columns: combinedColumns });
+  const dynamicCols = useDynamicColumns({ columns });
   const table = useReactTable({
     data,
     columns: dynamicCols,
@@ -29414,7 +29424,7 @@ function DataTable({
       ] })
     ] }),
     /* @__PURE__ */ jsxs31(Table3, { children: [
-      /* @__PURE__ */ jsx53(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx53(TableRow, { children: hg.headers.map((header) => {
+      /* @__PURE__ */ jsx53(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx53(TableRow, { children: hg.headers.map((header, index) => {
         const canSort = header.column.getCanSort();
         const canFilter = header.column.getCanFilter();
         const sortDir = manualSort?.key === header.column.id ? manualSort.dir : null;
@@ -29494,26 +29504,49 @@ function DataTable({
               }
             )
           ] })
-        ] }) }, header.id);
-      }) }, hg.id)) }),
-      /* @__PURE__ */ jsx53(TableBody, { children: loading ? /* @__PURE__ */ jsx53(Fragment20, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx53(TableRow, { children: combinedColumns.map((_2, j) => /* @__PURE__ */ jsx53(TableCell, { className: "p-3", children: /* @__PURE__ */ jsx53("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__ */ jsx53(TableRow, { children: row.getVisibleCells().map((cell) => {
+        ] }) }, `header-${header.id}-${index}`);
+      }) }, `header-group-${hg.id}`)) }),
+      /* @__PURE__ */ jsx53(TableBody, { children: loading ? /* @__PURE__ */ jsx53(Fragment20, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx53(TableRow, { children: dynamicCols.map((_2, j) => /* @__PURE__ */ jsx53(TableCell, { className: "p-3", children: /* @__PURE__ */ jsx53("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__ */ jsx53(TableRow, { children: row.getVisibleCells().map((cell, cellIndex, arr) => {
         const meta = cell.column.columnDef.meta || {};
         const isClickable = meta?.isClickable;
-        return /* @__PURE__ */ jsx53(
+        const isLastCell = cellIndex === arr.length - 1;
+        return /* @__PURE__ */ jsxs31(
           TableCell,
           {
-            className: `${meta?.cellClass ?? ""} ${isClickable ? "cursor-pointer hover:bg-gray-100" : ""}`,
+            className: `${meta?.cellClass ?? ""} ${isClickable ? "cursor-pointer hover:bg-gray-100" : ""} relative`,
             style: meta?.cellStyle,
             onClick: () => {
               if (isClickable && onCellClick) {
                 onCellClick(cell.row.original, cell.column.id);
               }
             },
-            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+            children: [
+              flexRender(cell.column.columnDef.cell, cell.getContext()),
+              isLastCell && rowActions && rowActions.length > 0 && /* @__PURE__ */ jsx53("div", { className: "absolute bg-[#fff] p-1 px-4 inset-y-0 right-0 flex items-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-lg rounded", children: rowActions.map((action) => {
+                const isDelete = action.id === "delete" || action.icon === "delete";
+                return /* @__PURE__ */ jsx53(
+                  "button",
+                  {
+                    className: `ml-2 px-2 py-1 text-[12px] rounded cursor-pointer ${isDelete ? "bg-red-800 text-white hover:bg-neutral-600" : "bg-gray-300 hover:bg-gray-400"}`,
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      if (isDelete) {
+                        onDeleteRow?.(cell.row.original, "delete");
+                      } else {
+                        onCellClick?.(cell.row.original, cell.column.id);
+                      }
+                    },
+                    title: action.header,
+                    children: action.header
+                  },
+                  action.id
+                );
+              }) })
+            ]
           },
-          cell.id
+          `cell-${cell.id}-${cellIndex}`
         );
-      }) }, row.id)) : /* @__PURE__ */ jsx53(TableRow, { children: /* @__PURE__ */ jsx53(TableCell, { colSpan: combinedColumns.length, className: "h-24 text-center", children: /* @__PURE__ */ jsx53("span", { className: "flex items-center justify-center py-10 w-full min-w-full text-gray-600 bg-gray-100", children: "No results." }) }) }) })
+      }) }, row.id)) : /* @__PURE__ */ jsx53(TableRow, { children: /* @__PURE__ */ jsx53(TableCell, { colSpan: dynamicCols.length, className: "h-24 text-center", children: /* @__PURE__ */ jsx53("span", { className: "flex items-center justify-center py-10 w-full min-w-full text-gray-600 bg-gray-100", children: "No results." }) }) }) })
     ] }),
     pagination && /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between py-3 px-2 text-sm w-full", children: [
       /* @__PURE__ */ jsxs31("div", { children: [
@@ -29580,7 +29613,6 @@ var Table4 = ({
   totalRecords = 0,
   globalSearch = false,
   onCellClick,
-  enableDelete,
   onDeleteRow,
   ...props
 }) => {
@@ -29612,8 +29644,7 @@ var Table4 = ({
       },
       onDeleteRow: (cell) => {
         onDeleteRow?.(cell.id);
-      },
-      enableDelete
+      }
     }
   ) });
 };
@@ -29826,7 +29857,7 @@ var CustomPagination = ({
 var Pagination_default = CustomPagination;
 
 // src/components/Navigation/Tabs/Tabs.tsx
-import { useCallback as useCallback3, useMemo as useMemo5, useState as useState8 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo4, useState as useState8 } from "react";
 import Link5 from "next/link";
 import { useRouter } from "next/navigation";
 import { Fragment as Fragment21, jsx as jsx57, jsxs as jsxs34 } from "react/jsx-runtime";
@@ -29863,7 +29894,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
     });
     return sortMenus(rootMenus);
   }
-  const rawTabs = useMemo5(() => {
+  const rawTabs = useMemo4(() => {
     if (!Array.isArray(tabs)) return [];
     if (source === "manual") return Array.isArray(tabs) ? tabs : [];
     return groupMenus(tabs);
@@ -30004,29 +30035,44 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-import React10 from "react";
+import React10, { useState as useState9 } from "react";
 import { jsx as jsx58, jsxs as jsxs35 } from "react/jsx-runtime";
-var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage }) => {
+var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage, dataKey = "key", dataLabel = "header" }) => {
+  const [activeStage, setActiveStage] = useState9(currentStage || (stages && stages.length > 0 ? stages[0].key : null));
+  const nextStage = () => {
+    if (!stages || stages.length === 0) return;
+    const currentIndex = stages.findIndex((stage) => stage[dataKey] === activeStage);
+    if (currentIndex < stages.length - 1) {
+      const newStage = stages[currentIndex + 1];
+      setActiveStage(newStage[dataKey]);
+      onStageChange?.(newStage[dataKey]);
+    }
+  };
+  const lastStage = stages && stages.length > 0 ? stages[stages.length - 1][dataKey] : null;
+  const onStageClick = (stageKey) => {
+    if (!stageKey || stageKey === activeStage || activeStage === lastStage) return;
+    setActiveStage(stageKey);
+    onStageChange?.(stageKey);
+  };
+  const isAllStagesCompleted = activeStage === lastStage;
   return /* @__PURE__ */ jsx58("div", { className, style, children: /* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between bg-red p-2 rounded-lg border border-gray-200 w-full", children: [
     /* @__PURE__ */ jsx58("div", { className: "flex items-center", children: /* @__PURE__ */ jsx58("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ jsx58("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx58("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
     /* @__PURE__ */ jsx58("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: stages?.length > 0 && stages?.map((stage, index) => {
-      const currentIndex = stages.findIndex((s) => s.key === currentStage);
-      const isAllCompleted = currentStage === "completed";
-      const isCompleted = isAllCompleted || index < currentIndex;
-      const isActive = !isAllCompleted && index === currentIndex;
+      const currentIndex = stages.findIndex((s) => s[dataKey] === activeStage);
+      const isCompleted = isAllStagesCompleted || index < currentIndex;
+      const isActive = !isAllStagesCompleted && index === currentIndex;
       return /* @__PURE__ */ jsxs35(React10.Fragment, { children: [
         /* @__PURE__ */ jsx58(
           "button",
           {
             className: `
                   min-w-[120px] px-4 py-2 rounded-full text-sm font-medium transition-colors duration-200 whitespace-nowrap
-                  ${isActive ? "bg-[#034486] text-white shadow-md" : isCompleted ? "bg-[#e0f2fe] text-[#034486] border border-[#034486]" : "bg-white text-gray-700 hover:bg-gray-100 border border-gray-200"}`,
+                  ${isActive ? "bg-green-700 text-white shadow-md" : isCompleted ? "bg-green-50 text-green-700 border border-green-700" : "bg-white text-gray-700 hover:bg-gray-100 border border-gray-200"}`,
             onClick: () => {
-              if (onStageChange) {
-                onStageChange(stage.key);
-              }
+              if (isAllStagesCompleted) return;
+              onStageClick(stage[dataKey]);
             },
-            children: stage.header
+            children: stage[dataLabel]
           }
         ),
         index < stages.length - 1 && /* @__PURE__ */ jsx58("div", { className: "flex-shrink-0 w-3 h-px bg-gray-300" })
@@ -30035,9 +30081,9 @@ var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStag
     isShowBtn && /* @__PURE__ */ jsx58("div", { className: "flex items-center", children: /* @__PURE__ */ jsx58(
       "button",
       {
-        className: "bg-[#034486] text-white px-6 py-2 rounded-lg text-sm font-medium transition-colors duration-200 shadow-sm",
+        className: "bg-green-700 text-white px-6 py-2 rounded-lg text-sm font-medium transition-colors duration-200 shadow-sm",
         onClick: () => {
-          onStageChange?.("completed");
+          nextStage();
         },
         children: buttonText
       }
@@ -30105,7 +30151,7 @@ import Link6 from "next/link";
 import Image4 from "next/image";
 import { useRouter as useRouter2 } from "next/navigation";
 import { DropdownMenuSeparator } from "@radix-ui/react-dropdown-menu";
-import { useCallback as useCallback4, useMemo as useMemo6, useState as useState9 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo5, useState as useState10 } from "react";
 import { Fragment as Fragment22, jsx as jsx64, jsxs as jsxs38 } from "react/jsx-runtime";
 function Navbar({
   style,
@@ -30126,8 +30172,8 @@ function Navbar({
 }) {
   const isMobileView = canvasMode === "mobile" || canvasMode === "tablet";
   const router = useRouter2();
-  const [showExitDialog, setShowExitDialog] = useState9(false);
-  const [pendingUrl, setPendingUrl] = useState9(null);
+  const [showExitDialog, setShowExitDialog] = useState10(false);
+  const [pendingUrl, setPendingUrl] = useState10(null);
   const handleBuilderExit = useCallback4(
     (e, url) => {
       if (isBuilder) {
@@ -30144,7 +30190,7 @@ function Navbar({
       router.push(pendingUrl);
     }
   };
-  const formatedMenu = useMemo6(() => {
+  const formatedMenu = useMemo5(() => {
     if (source === "state" && navList && navList.length) {
       return navList.map((i) => ({ ...i, header: i.name || "Menu" }));
     }
@@ -30322,7 +30368,7 @@ var ChartComponent = ({ className, style, loading, ...props }) => {
 var BarChart_default = React12.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
-import React13, { useEffect as useEffect25, useMemo as useMemo7, useState as useState10 } from "react";
+import React13, { useEffect as useEffect25, useMemo as useMemo6, useState as useState11 } from "react";
 import {
   PieChart,
   Pie,
@@ -30351,18 +30397,18 @@ var DonutChart = ({ className, style, loading, ...props }) => {
   const showLegends = props.showLegends ?? true;
   const labelType = props.labelType || "inside";
   const canvasMode = props.canvasMode;
-  const data = useMemo7(() => {
+  const data = useMemo6(() => {
     if (!Array.isArray(props.data)) return [];
     return props.data.map((item) => ({ ...item, color: getRandomColor() }));
   }, [props.data]);
-  const total = useMemo7(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
+  const total = useMemo6(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
   const forceMobile = canvasMode === "mobile" || canvasMode === "tablet";
-  const [mounted, setMounted] = useState10(false);
+  const [mounted, setMounted] = useState11(false);
   useEffect25(() => {
     const timeout = setTimeout(() => setMounted(true), 100);
     return () => clearTimeout(timeout);
   }, []);
-  const renderLegends = useMemo7(() => {
+  const renderLegends = useMemo6(() => {
     if (!showLegends) return null;
     return /* @__PURE__ */ jsx66(Fragment23, { children: data.map((d) => /* @__PURE__ */ jsxs40(
       "div",