@algorithm-shift/design-system 1.2.958 → 1.2.960

package/dist/index.js

@@ -27770,13 +27770,25 @@ function useLazyDropdown(config) {
   (0, import_react19.useEffect)(() => {
     configRef.current = config;
   }, [config]);
+  function getValueByPath2(obj, path) {
+    if (!obj || !path) return void 0;
+    const parts = path.split(/\.|__/);
+    return parts.reduce((acc, key) => acc?.[key], obj);
+  }
   const transformToOptions = (0, import_react19.useCallback)((data) => {
     if (!data || !Array.isArray(data)) return [];
     const cfg = configRef.current;
-    return data.map((item) => ({
-      value: item[cfg.dataKey] ?? item.id ?? "",
-      label: item[cfg.dataLabel] ?? item.name ?? item.label ?? ""
-    }));
+    return data.map((item) => {
+      const value = getValueByPath2(item, cfg.dataKey) ?? item.id ?? "";
+      let label = "";
+      if (cfg.dataLabel) {
+        label = getValueByPath2(item, cfg.dataLabel) ?? item.name ?? item.label ?? "";
+      }
+      return {
+        value,
+        label
+      };
+    });
   }, []);
   const fetchApiData = (0, import_react19.useCallback)(async (pageNum, term) => {
     if (!configRef.current.apiUrl) return [];
@@ -29068,9 +29080,12 @@ var valueFormatter = (value, format2, customFormatters = {}) => {
   switch (type) {
     case "date":
       return dayjs_setup_default(value).format(arg || "YYYY-MM-DD");
-    case "datetime":
+    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");
+    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");
     case "days":
       return `${dayjs_setup_default().diff(dayjs_setup_default(value), "day")} days`;
     case "months":
@@ -29356,6 +29371,7 @@ function DataTable({
   const [searchTerm, setSearchTerm] = React9.useState("");
   const tableData = Array.isArray(data) ? data : [];
   const dynamicCols = useDynamicColumns({ columns });
+  const [localPageSize, setLocalPageSize] = React9.useState(pageSize);
   const table = (0, import_react_table2.useReactTable)({
     data: tableData,
     columns: dynamicCols,
@@ -29404,36 +29420,48 @@ function DataTable({
     return [];
   };
   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);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "overflow-hidden rounded-md w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: `flex ${globalSearch ? "justify-between" : "justify-end"} p-2 bg-gray-50`, children: [
-      globalSearch && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-2 w-full max-w-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "relative 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: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("p", { className: "text-sm font-medium", children: [
+          "Total Records : ",
+          totalRecords.toLocaleString("en-IN") || 0
+        ] }),
+        globalSearch && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-2 w-full max-w-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "relative w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+              "input",
+              {
+                type: "text",
+                placeholder: "Search...",
+                value: searchTerm,
+                onChange: (e) => setSearchTerm(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" && 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]"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Search, { className: "absolute left-2 top-2.5 text-gray-400", size: 16 })
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-            "input",
+            Button,
             {
-              type: "text",
-              placeholder: "Search...",
-              value: searchTerm,
-              onChange: (e) => setSearchTerm(e.target.value),
-              onKeyDown: (e) => {
-                if (e.key === "Enter" && 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]"
+              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_runtime51.jsx)(Search, { className: "absolute left-2 top-2.5 text-gray-400", size: 16 })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime51.jsxs)(Popover, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
@@ -29623,12 +29651,26 @@ function DataTable({
         );
       }) }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableCell, { colSpan: dynamicCols.length, className: "h-24 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime51.jsxs)("div", { className: "flex items-center justify-between py-3 px-2 text-sm w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
-        "Page ",
-        table.getState().pagination.pageIndex + 1,
-        " of ",
-        pageCount
+    pagination && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center justify-between py-3 text-sm w-full", children: [
+      !loading && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex gap-2 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          "select",
+          {
+            value: localPageSize,
+            onChange: handlePageSizeChange,
+            className: "ml-2 border rounded py-1 text-sm cursor-pointer border-blue-600",
+            children: [10, 20, 50, 100].map((size) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("option", { value: size, children: [
+              size,
+              " / page"
+            ] }, size))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
+          "Page ",
+          table.getState().pagination.pageIndex + 1,
+          " of ",
+          pageCount
+        ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(