@algorithm-shift/design-system 1.2.86 → 1.2.88

package/dist/index.d.mts

@@ -143,6 +143,8 @@ interface StagesProps extends ElementProps {
   buttonText?: string;
   onStageChange?: (stageId: string) => void;
   currentStage?: string;
+  dataKey?: string;
+  dataLabel?: string;
 }
 
 type ButtonProps = ElementProps & React.ComponentProps<"button"> & {
@@ -195,7 +197,7 @@ interface NavbarProps extends ElementProps {
   showName?: boolean;
   imageUrl?: string;
   altText?: string;
-  canvasMode?: 'desktop' | 'tablet' | 'mobile';
+  canvasMode?: 'desktop' | 'tablet' | 'mobile' | string;
   list?: Record<string, any>;
   profileMenu?: Record<string, any>;
   userName?: string;
@@ -256,8 +258,10 @@ interface RepeaterProps<T> {
     emptyFallback?: React__default.ReactNode;
     wrapper?: (children: React__default.ReactNode) => React__default.ReactNode;
     className?: string;
+    loading?: boolean;
+    loadingText?: string;
 }
-declare function Repeater<T>({ items, count, render, emptyFallback, wrapper, className, }: RepeaterProps<T>): react_jsx_runtime.JSX.Element;
+declare function Repeater<T>({ items, count, render, emptyFallback, wrapper, className, loading, loadingText, }: RepeaterProps<T>): react_jsx_runtime.JSX.Element;
 declare const _default$2: typeof Repeater;
 
 declare const ButtonWrapper: ({ className, style, textContent, loadingText, loading, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
@@ -367,13 +371,13 @@ interface ExtendedTableProps extends TableProps {
   enableDelete?: boolean;
 }
 
-declare const Table: ({ columns, data, rowActions, className, style, pagination, paginationMode, itemsPerPage, onPageChange, onSortChange, onFilterChange, onGlobalSearch, page, loading, totalRecords, globalSearch, onCellClick, enableDelete, onDeleteRow, ...props }: ExtendedTableProps) => react_jsx_runtime.JSX.Element;
+declare const Table: ({ columns, data, rowActions, className, style, pagination, paginationMode, itemsPerPage, onPageChange, onSortChange, onFilterChange, onGlobalSearch, page, loading, totalRecords, globalSearch, onCellClick, onDeleteRow, ...props }: ExtendedTableProps) => react_jsx_runtime.JSX.Element;
 
 declare const CustomPagination: ({ totalPages, currentPage, onPageChange, maxVisiblePages, perPage, }: CustomPaginationProps) => react_jsx_runtime.JSX.Element;
 
 declare const Tabs: ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder, source, parentKey, menuNameKey, menuUrlKey, loading }: TabsProps) => react_jsx_runtime.JSX.Element;
 
-declare const StagesComponent: ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage }: StagesProps) => react_jsx_runtime.JSX.Element;
+declare const StagesComponent: ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage, dataKey, dataLabel }: StagesProps) => react_jsx_runtime.JSX.Element;
 
 declare const Spacer: ({ className, style }: ElementProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -143,6 +143,8 @@ interface StagesProps extends ElementProps {
   buttonText?: string;
   onStageChange?: (stageId: string) => void;
   currentStage?: string;
+  dataKey?: string;
+  dataLabel?: string;
 }
 
 type ButtonProps = ElementProps & React.ComponentProps<"button"> & {
@@ -195,7 +197,7 @@ interface NavbarProps extends ElementProps {
   showName?: boolean;
   imageUrl?: string;
   altText?: string;
-  canvasMode?: 'desktop' | 'tablet' | 'mobile';
+  canvasMode?: 'desktop' | 'tablet' | 'mobile' | string;
   list?: Record<string, any>;
   profileMenu?: Record<string, any>;
   userName?: string;
@@ -256,8 +258,10 @@ interface RepeaterProps<T> {
     emptyFallback?: React__default.ReactNode;
     wrapper?: (children: React__default.ReactNode) => React__default.ReactNode;
     className?: string;
+    loading?: boolean;
+    loadingText?: string;
 }
-declare function Repeater<T>({ items, count, render, emptyFallback, wrapper, className, }: RepeaterProps<T>): react_jsx_runtime.JSX.Element;
+declare function Repeater<T>({ items, count, render, emptyFallback, wrapper, className, loading, loadingText, }: RepeaterProps<T>): react_jsx_runtime.JSX.Element;
 declare const _default$2: typeof Repeater;
 
 declare const ButtonWrapper: ({ className, style, textContent, loadingText, loading, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
@@ -367,13 +371,13 @@ interface ExtendedTableProps extends TableProps {
   enableDelete?: boolean;
 }
 
-declare const Table: ({ columns, data, rowActions, className, style, pagination, paginationMode, itemsPerPage, onPageChange, onSortChange, onFilterChange, onGlobalSearch, page, loading, totalRecords, globalSearch, onCellClick, enableDelete, onDeleteRow, ...props }: ExtendedTableProps) => react_jsx_runtime.JSX.Element;
+declare const Table: ({ columns, data, rowActions, className, style, pagination, paginationMode, itemsPerPage, onPageChange, onSortChange, onFilterChange, onGlobalSearch, page, loading, totalRecords, globalSearch, onCellClick, onDeleteRow, ...props }: ExtendedTableProps) => react_jsx_runtime.JSX.Element;
 
 declare const CustomPagination: ({ totalPages, currentPage, onPageChange, maxVisiblePages, perPage, }: CustomPaginationProps) => react_jsx_runtime.JSX.Element;
 
 declare const Tabs: ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder, source, parentKey, menuNameKey, menuUrlKey, loading }: TabsProps) => react_jsx_runtime.JSX.Element;
 
-declare const StagesComponent: ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage }: StagesProps) => react_jsx_runtime.JSX.Element;
+declare const StagesComponent: ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage, dataKey, dataLabel }: StagesProps) => react_jsx_runtime.JSX.Element;
 
 declare const Spacer: ({ className, style }: ElementProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -323,12 +323,17 @@ function Repeater({
   render,
   emptyFallback = null,
   wrapper,
-  className
+  className,
+  loading = false,
+  loadingText = "Loading..."
 }) {
   const list = import_react4.default.useMemo(
     () => typeof count === "number" ? items.slice(0, count) : items,
     [items, count]
   );
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className, children: loadingText });
+  }
   if (!list.length) {
     return emptyFallback ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: emptyFallback }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className, children: "No items to display." });
   }
@@ -27814,6 +27819,31 @@ function useLazyDropdown(config) {
       setLoading(false);
     }
   }, [fetchApiData, transformToOptions]);
+  const fetchValueItem = async () => {
+    if (!configRef.current.apiUrl) return [];
+    try {
+      setLoading(true);
+      const res = await import_axios.default.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);
+    }
+  };
+  (0, import_react19.useEffect)(() => {
+    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 = (0, import_react19.useCallback)(() => {
     if (!loading && hasMore) {
       loadPage(page + 1, searchTerm);
@@ -27890,7 +27920,8 @@ function LazySelectDropdown({
     pageSize: pageSize || 10,
     dataKey,
     dataLabel,
-    initialData: options || []
+    initialData: options || [],
+    value
   });
   const selectedOption = lazyOptions.find((opt) => opt.value === value);
   (0, import_react20.useEffect)(() => {
@@ -27955,7 +27986,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,
@@ -29326,7 +29357,10 @@ var useDynamicColumns = (config, customRenderers = {}, customFormatters = {}) =>
           col.format,
           customFormatters
         );
-      }
+      },
+      enableSorting: col.enableSorting,
+      enableColumnFilter: col.enableColumnFilter,
+      meta: col.meta
     });
   });
 };
@@ -29349,37 +29383,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__ */ (0, import_jsx_runtime53.jsx)(
-      "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 = (0, import_react_table2.useReactTable)({
     data,
     columns: dynamicCols,
@@ -29505,7 +29515,7 @@ function DataTable({
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Table3, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableRow, { children: hg.headers.map((header) => {
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(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;
@@ -29585,26 +29595,49 @@ function DataTable({
               }
             )
           ] })
-        ] }) }, header.id);
-      }) }, hg.id)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableBody, { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_jsx_runtime53.Fragment, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableRow, { children: combinedColumns.map((_2, j) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableCell, { className: "p-3", children: /* @__PURE__ */ (0, import_jsx_runtime53.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_runtime53.jsx)(TableRow, { children: row.getVisibleCells().map((cell) => {
+        ] }) }, `header-${header.id}-${index}`);
+      }) }, `header-group-${hg.id}`)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableBody, { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_jsx_runtime53.Fragment, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableRow, { children: dynamicCols.map((_2, j) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableCell, { className: "p-3", children: /* @__PURE__ */ (0, import_jsx_runtime53.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_runtime53.jsx)(TableRow, { children: row.getVisibleCells().map((cell, cellIndex, arr) => {
         const meta = cell.column.columnDef.meta || {};
         const isClickable = meta?.isClickable;
-        return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        const isLastCell = cellIndex === arr.length - 1;
+        return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
           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: (0, import_react_table2.flexRender)(cell.column.columnDef.cell, cell.getContext())
+            children: [
+              (0, import_react_table2.flexRender)(cell.column.columnDef.cell, cell.getContext()),
+              isLastCell && rowActions && rowActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("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__ */ (0, import_jsx_runtime53.jsx)(
+                  "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__ */ (0, import_jsx_runtime53.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableCell, { colSpan: combinedColumns.length, className: "h-24 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("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__ */ (0, import_jsx_runtime53.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableCell, { colSpan: dynamicCols.length, className: "h-24 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("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__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center justify-between py-3 px-2 text-sm w-full", children: [
       /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { children: [
@@ -29671,7 +29704,6 @@ var Table4 = ({
   totalRecords = 0,
   globalSearch = false,
   onCellClick,
-  enableDelete,
   onDeleteRow,
   ...props
 }) => {
@@ -29703,8 +29735,7 @@ var Table4 = ({
       },
       onDeleteRow: (cell) => {
         onDeleteRow?.(cell.id);
-      },
-      enableDelete
+      }
     }
   ) });
 };
@@ -30097,27 +30128,42 @@ var Tabs_default = Tabs;
 // src/components/Navigation/Stages/Stages.tsx
 var import_react30 = __toESM(require("react"));
 var import_jsx_runtime58 = require("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] = (0, import_react30.useState)(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__ */ (0, import_jsx_runtime58.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center justify-between bg-red p-2 rounded-lg border border-gray-200 w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("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__ */ (0, import_jsx_runtime58.jsxs)(import_react30.default.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           "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__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex-shrink-0 w-3 h-px bg-gray-300" })
@@ -30126,9 +30172,9 @@ var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStag
     isShowBtn && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       "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
       }