baaz-custom-components 3.3.3 → 5.0.1

package/dist/index.js

@@ -60,7 +60,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   CustomBreadcrumb: () => breadcrumb_default,
-  Navbar: () => Navbar
+  Grid: () => grid_default,
+  Navbar: () => Navbar,
+  Pagination: () => pagination_default
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -1947,8 +1949,554 @@ var CustomBreadcrumb = ({
   ] }) });
 };
 var breadcrumb_default = CustomBreadcrumb;
+
+// src/components/custom/grid/index.tsx
+var import_react6 = require("react");
+var import_react_grid = require("@svar-ui/react-grid");
+
+// src/components/custom/grid/sortableHeaderCell.tsx
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }) {
+  if (!(cell == null ? void 0 : cell.id)) return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: cell == null ? void 0 : cell.text });
+  const active = sortKey === cell.id;
+  const handleClick = () => {
+    if (!onSortChange) return;
+    if (active) {
+      onSortChange(cell.id, sortOrder === "asc" ? "desc" : "asc");
+    } else {
+      onSortChange(cell.id, "asc");
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "div",
+    {
+      onClick: handleClick,
+      className: "cursor-pointer flex items-center gap-2 justify-between select-none",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: cell.text }),
+        active && (sortOrder === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.MoveDown, { className: "w-3 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.MoveUp, { className: "w-3 h-4" }))
+      ]
+    }
+  );
+}
+var sortableHeaderCell_default = SortableHeaderCell;
+
+// src/utils/exportPdf.ts
+var import_jspdf = __toESM(require("jspdf"));
+var import_jspdf_autotable = __toESM(require("jspdf-autotable"));
+function exportPdf(rows, name) {
+  if (!rows.length) return;
+  const doc = new import_jspdf.default();
+  const columns = Object.keys(rows[0]);
+  const body = rows.map((row) => columns.map((col) => {
+    var _a;
+    return String((_a = row[col]) != null ? _a : "");
+  }));
+  (0, import_jspdf_autotable.default)(doc, {
+    head: [columns],
+    body,
+    styles: { fontSize: 8 },
+    headStyles: { fillColor: [40, 40, 40] }
+  });
+  doc.save(`${name != null ? name : "export"}.pdf`);
+}
+
+// src/utils/exportExcel.ts
+var XLSX = __toESM(require("xlsx"));
+function exportExcel(rows, name) {
+  if (!rows.length) return;
+  const worksheet = XLSX.utils.json_to_sheet(rows);
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(workbook, worksheet, "Data");
+  XLSX.writeFile(workbook, `${name != null ? name : "export"}.xlsx`);
+}
+
+// src/components/custom/grid/gridHeader.tsx
+var import_react5 = require("react");
+var import_lucide_react13 = require("lucide-react");
+var import_navigation = require("next/navigation");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var GridHeader = ({
+  onPdf,
+  onExcel,
+  onSearch,
+  download,
+  search,
+  searchValue,
+  searchkey = "",
+  filterList
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const router = (0, import_navigation.useRouter)();
+  const searchParams = (0, import_navigation.useSearchParams)();
+  const [downloadMenu, setDownloadMenu] = (0, import_react5.useState)(false);
+  const [filterMenu, setFilterMenu] = (0, import_react5.useState)(false);
+  const [filter, setFilter] = (0, import_react5.useState)({});
+  const downloadRef = (0, import_react5.useRef)(null);
+  const filterRef = (0, import_react5.useRef)(null);
+  const selectedColumn = filterList.find((f) => f.columnName === filter.column);
+  const selectedOperator = selectedColumn == null ? void 0 : selectedColumn.operators.find(
+    (op) => op.label === filter.operator
+  );
+  const updateParams = (next) => {
+    const params = new URLSearchParams(searchParams.toString());
+    if (next.column) params.set("column", next.column);
+    else params.delete("column");
+    if (next.operator) params.set("operator", next.operator);
+    else params.delete("operator");
+    if (next.value) {
+      (selectedOperator == null ? void 0 : selectedOperator.value) === "date" ? params.set("value", String(Date.parse(next.value))) : params.set("value", next.value);
+    } else params.delete("value");
+    if (next.startDate)
+      params.set("startDate", String(Date.parse(next.startDate)));
+    else params.delete("startDate");
+    if (next.endDate) params.set("endDate", String(Date.parse(next.endDate)));
+    else params.delete("endDate");
+    router.replace(`?${params.toString()}`);
+  };
+  const clearFilters = () => {
+    setFilter({});
+    router.replace("?", { scroll: false });
+  };
+  (0, import_react5.useEffect)(() => {
+    const handleClickOutside = (e) => {
+      if (downloadRef.current && !downloadRef.current.contains(e.target)) {
+        setDownloadMenu(false);
+      }
+      if (filterRef.current && !filterRef.current.contains(e.target)) {
+        setFilterMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-end gap-4 items-center", children: [
+    filterList.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative", ref: filterRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        "button",
+        {
+          onClick: () => setFilterMenu((p) => !p),
+          className: "py-2 px-4 rounded-md bg-input hover:bg-muted transition cursor-pointer",
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.ListFilter, { size: 18 })
+        }
+      ),
+      filterMenu && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "absolute top-full right-0 mt-2 p-3 !min-w-[30rem] rounded-md border bg-background shadow-lg z-50 flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+          "select",
+          {
+            className: "px-4 py-2 rounded-md bg-input text-sm focus:outline-none",
+            value: (_a = filter.column) != null ? _a : "",
+            onChange: (e) => {
+              const next = {
+                column: e.target.value,
+                operator: null,
+                value: null
+              };
+              setFilter(next);
+              updateParams(next);
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: "", disabled: true, children: "Columns" }),
+              filterList.map((f) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: f.columnName, children: f.columnName }, f.columnName))
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+          "select",
+          {
+            className: "px-4 py-2 rounded-md bg-input text-sm focus:outline-none",
+            value: (_b = filter.operator) != null ? _b : "",
+            disabled: !selectedColumn,
+            onChange: (e) => {
+              const next = __spreadProps(__spreadValues({}, filter), {
+                operator: e.target.value,
+                value: void 0
+              });
+              setFilter(next);
+              updateParams(next);
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: "", disabled: true, children: "Operator" }),
+              selectedColumn == null ? void 0 : selectedColumn.operators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: op.label, children: op.label }, op.label))
+            ]
+          }
+        ),
+        (selectedOperator == null ? void 0 : selectedOperator.value) === "input" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          "input",
+          {
+            className: "px-4 py-2 rounded-md bg-input text-sm focus:outline-none",
+            placeholder: "Filter value",
+            value: (_c = filter.value) != null ? _c : "",
+            onChange: (e) => {
+              const next = __spreadProps(__spreadValues({}, filter), {
+                value: e.target.value
+              });
+              setFilter(next);
+              updateParams(next);
+            }
+          }
+        ),
+        (selectedOperator == null ? void 0 : selectedOperator.value) === "date" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          "input",
+          {
+            type: "datetime-local",
+            className: "px-4 py-2 rounded-md bg-input text-sm focus:outline-none",
+            value: (_d = filter.value) != null ? _d : "",
+            onChange: (e) => setFilter((prev) => __spreadProps(__spreadValues({}, prev), {
+              value: e.target.value
+            }))
+          }
+        ),
+        (selectedOperator == null ? void 0 : selectedOperator.value) === "select" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+          "select",
+          {
+            className: "px-2 py-1 rounded-md bg-input text-sm focus:outline-none",
+            value: (_e = filter.value) != null ? _e : "",
+            onChange: (e) => setFilter((prev) => __spreadProps(__spreadValues({}, prev), {
+              value: e.target.value
+            })),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: "", disabled: true, children: "Value" }),
+              (_f = selectedOperator.options) == null ? void 0 : _f.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+            ]
+          }
+        ),
+        (selectedOperator == null ? void 0 : selectedOperator.value) === "date-range" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "input",
+            {
+              type: "datetime-local",
+              className: "px-3 py-2 rounded-md bg-input text-sm",
+              value: (_g = filter.startDate) != null ? _g : "",
+              onChange: (e) => {
+                const nextRange = __spreadProps(__spreadValues({}, filter), {
+                  startDate: e.target.value
+                });
+                if (nextRange.startDate) {
+                  const next = __spreadProps(__spreadValues({}, filter), {
+                    startDate: nextRange.startDate
+                  });
+                  setFilter(next);
+                  updateParams(next);
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-sm text-muted-foreground", children: "to" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "input",
+            {
+              type: "datetime-local",
+              className: "px-3 py-2 rounded-md bg-input text-sm",
+              value: (_h = filter.endDate) != null ? _h : "",
+              onChange: (e) => {
+                const nextRange = __spreadProps(__spreadValues({}, filter), {
+                  endDate: e.target.value
+                });
+                if (nextRange.startDate && nextRange.endDate) {
+                  const next = __spreadProps(__spreadValues({}, filter), {
+                    endDate: nextRange.endDate
+                  });
+                  setFilter(next);
+                  updateParams(next);
+                }
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          "button",
+          {
+            onClick: clearFilters,
+            className: "ml-auto p-2 rounded-md hover:bg-muted transition",
+            title: "Clear filters",
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.X, { size: 16 })
+          }
+        )
+      ] })
+    ] }),
+    download && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative", ref: downloadRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        "button",
+        {
+          onClick: () => setDownloadMenu((p) => !p),
+          className: "py-2 px-4 rounded-md bg-input hover:bg-muted transition",
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Download, { size: 18 })
+        }
+      ),
+      downloadMenu && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "absolute top-full right-0 mt-2 w-32 rounded-md border bg-background shadow-lg z-50", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+          "button",
+          {
+            onClick: () => {
+              onPdf();
+              setDownloadMenu(false);
+            },
+            className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.FileText, { size: 14 }),
+              "PDF"
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+          "button",
+          {
+            onClick: () => {
+              onExcel();
+              setDownloadMenu(false);
+            },
+            className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.FileSpreadsheet, { size: 14 }),
+              "Excel"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    search && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "py-2 px-4 w-[20rem] rounded-md border border-input bg-background flex items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Search, { className: "w-4 h-4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        "input",
+        {
+          placeholder: `Search by ${searchkey}`,
+          className: "w-full focus:outline-none bg-transparent",
+          onChange: onSearch,
+          value: searchValue
+        }
+      )
+    ] })
+  ] });
+};
+var gridHeader_default = GridHeader;
+
+// src/components/custom/grid/index.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function Grid(_a) {
+  var _b = _a, {
+    data,
+    columns,
+    sortKey,
+    sortOrder,
+    onSortChange,
+    onExportPdf,
+    onExportExcel,
+    downloadable = true,
+    fileNmae,
+    fonts
+  } = _b, rest = __objRest(_b, [
+    "data",
+    "columns",
+    "sortKey",
+    "sortOrder",
+    "onSortChange",
+    "onExportPdf",
+    "onExportExcel",
+    "downloadable",
+    "fileNmae",
+    "fonts"
+  ]);
+  const apiRef = (0, import_react6.useRef)(null);
+  const svarColumns = columns.map((col) => {
+    const _a2 = col, { sortable, header } = _a2, columnProps = __objRest(_a2, ["sortable", "header"]);
+    if (!sortable) {
+      return __spreadProps(__spreadValues({}, columnProps), {
+        header
+      });
+    }
+    return __spreadProps(__spreadValues({}, columnProps), {
+      header: {
+        text: header,
+        cell: (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          sortableHeaderCell_default,
+          __spreadProps(__spreadValues({}, props), {
+            sortKey,
+            sortOrder,
+            onSortChange
+          })
+        )
+      }
+    });
+  });
+  const init = (api) => {
+    apiRef.current = api;
+  };
+  const getSelectedData = () => {
+    var _a2, _b2;
+    const selected = (_b2 = (_a2 = apiRef.current) == null ? void 0 : _a2.getState().selectedRows) != null ? _b2 : [];
+    let selectedData = data.filter((row) => {
+      return selected.includes(row.id);
+    });
+    return selectedData;
+  };
+  const handleExportPdf = () => {
+    const selected = getSelectedData();
+    if (selected.length) {
+      exportPdf(selected, fileNmae);
+    } else {
+      onExportPdf == null ? void 0 : onExportPdf();
+    }
+  };
+  const handleExportExcel = () => {
+    const selected = getSelectedData();
+    if (selected.length) {
+      exportExcel(selected, fileNmae);
+    } else {
+      onExportExcel == null ? void 0 : onExportExcel();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "w-full h-full overflow-auto flex flex-col gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      gridHeader_default,
+      {
+        onPdf: handleExportPdf,
+        onExcel: handleExportExcel,
+        download: downloadable,
+        search: rest.search,
+        searchkey: rest.searchkey,
+        onSearch: rest.onSearch,
+        searchValue: rest.searchValue,
+        filterList: rest.filterList
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_grid.WillowDark, { fonts, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_grid.Grid, __spreadProps(__spreadValues({}, rest), { data, columns: svarColumns, init })) })
+  ] });
+}
+var grid_default = Grid;
+
+// src/components/custom/pagination/index.tsx
+var import_react7 = require("react");
+var import_navigation2 = require("next/navigation");
+
+// src/utils/pagination.ts
+function getPaginationRange(currentPage, totalPages, siblingCount = 2) {
+  const range = [];
+  if (totalPages <= 1) return [1];
+  const firstPage = 1;
+  const lastPage = totalPages;
+  const leftSiblingStart = Math.max(
+    currentPage - siblingCount,
+    firstPage + 1
+  );
+  const rightSiblingEnd = Math.min(
+    currentPage + siblingCount,
+    lastPage - 1
+  );
+  range.push(firstPage);
+  if (leftSiblingStart > firstPage + 1) {
+    range.push("dots");
+  }
+  for (let page = leftSiblingStart; page <= rightSiblingEnd; page++) {
+    range.push(page);
+  }
+  if (rightSiblingEnd < lastPage - 1) {
+    range.push("dots");
+  }
+  if (lastPage !== firstPage) {
+    range.push(lastPage);
+  }
+  return range;
+}
+
+// src/components/custom/pagination/index.tsx
+var import_lucide_react14 = require("lucide-react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function Pagination({
+  totalCount,
+  count = null,
+  currentPage = 1,
+  totalPages = 1,
+  pageSize = 10,
+  onPageChange,
+  onPageSizeChange,
+  showSizeChanger = false,
+  sizeChangerOptions = [10, 20, 50, 100]
+}) {
+  const router = (0, import_navigation2.useRouter)();
+  const params = (0, import_navigation2.useSearchParams)();
+  const setParams = (0, import_react7.useCallback)(
+    (updates) => {
+      const q = new URLSearchParams(params.toString());
+      Object.entries(updates).forEach(([k, v]) => q.set(k, v));
+      router.replace(`?${q.toString()}`, { scroll: false });
+    },
+    [params, router]
+  );
+  const handlePageChange = (page) => {
+    if (page < 1 || page > totalPages) return;
+    if (onPageChange) {
+      onPageChange(page);
+      return;
+    }
+    setParams({ page: String(page) });
+  };
+  const handlePageSizeChange = (size) => {
+    if (onPageSizeChange) {
+      onPageSizeChange(size);
+      return;
+    }
+    setParams({ pageSize: String(size), page: "1" });
+  };
+  if (totalPages <= 1) return null;
+  const pages = getPaginationRange(currentPage, totalPages);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center justify-between px-4 py-3 text-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-3 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { children: [
+        "Showing ",
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-foreground", children: count }),
+        " of",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-foreground", children: totalCount })
+      ] }),
+      showSizeChanger && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        "select",
+        {
+          value: pageSize,
+          onChange: (e) => handlePageSizeChange(Number(e.target.value)),
+          className: "rounded-md border border-input bg-background px-2 py-1 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+          children: sizeChangerOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("option", { value: size, children: [
+            size,
+            " / page"
+          ] }, size))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        import_lucide_react14.ChevronLeft,
+        {
+          onClick: () => currentPage === totalPages ? null : handlePageChange(currentPage - 1),
+          className: "rounded-md border border-border w-8 h-8 text-sm hover:bg-card-foreground disabled:opacity-40"
+        }
+      ),
+      pages.map(
+        (page, idx) => page === "dots" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "px-2 text-muted-foreground", children: "\u2026" }, `dots-${idx}`) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          "button",
+          {
+            onClick: () => handlePageChange(page),
+            className: `rounded-md w-8 h-8 text-sm transition ${page === currentPage ? "bg-card-foreground text-foreground" : "hover:bg-card-foreground"}`,
+            children: page
+          },
+          page
+        )
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        import_lucide_react14.ChevronRight,
+        {
+          onClick: () => currentPage === totalPages ? null : handlePageChange(currentPage + 1),
+          className: "rounded-md border border-border w-8 h-8 text-sm hover:bg-card-foreground disabled:opacity-40"
+        }
+      )
+    ] })
+  ] });
+}
+var pagination_default = Pagination;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CustomBreadcrumb,
-  Navbar
+  Grid,
+  Navbar,
+  Pagination
 });