baaz-custom-components 3.3.3 → 5.0.0

package/dist/index.d.mts

@@ -57,4 +57,49 @@ type BreadcrumbProps = {
 
 declare const CustomBreadcrumb: ({ layoutName, includeFrom, pathname, }: BreadcrumbProps) => react.JSX.Element;
 
-export { type BreadcrumbProps, CustomBreadcrumb, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, type RouteTree, type RouterAdapter, type UserData };
+type SortOrder = "asc" | "desc";
+type GridColumn = {
+    id: string;
+    header: string;
+    sortable?: boolean;
+    flexgrow?: number;
+    resize?: boolean;
+};
+type Filters = {
+    columnName: string;
+    operators: {
+        label: string;
+        value: "input" | "date" | "select" | "date-range" | null;
+        options?: {
+            label: string;
+            value: string;
+        }[];
+    }[];
+};
+type GridProps = {
+    data: Record<string, any>[];
+    columns: GridColumn[];
+    sortKey?: string | null;
+    sortOrder?: SortOrder | null;
+    onSortChange?: (key: string, order: SortOrder) => void;
+    multiselect?: boolean;
+    reorder?: boolean;
+    overlay?: React.FC | string;
+    init?: any;
+    onupdatecell?: any;
+    fonts?: boolean;
+    autoConfig?: boolean | {};
+    downloadable?: boolean;
+    fileNmae?: string;
+    search: boolean;
+    searchkey: string;
+    searchValue: string;
+    onExportPdf?: () => void;
+    onExportExcel?: () => void;
+    onSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    filterList: Filters[];
+};
+
+declare function Grid({ data, columns, sortKey, sortOrder, onSortChange, onExportPdf, onExportExcel, downloadable, fileNmae, fonts, ...rest }: GridProps): react.JSX.Element;
+
+export { type BreadcrumbProps, CustomBreadcrumb, Grid, type GridProps, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, type RouteTree, type RouterAdapter, type UserData };

package/dist/index.d.ts

@@ -57,4 +57,49 @@ type BreadcrumbProps = {
 
 declare const CustomBreadcrumb: ({ layoutName, includeFrom, pathname, }: BreadcrumbProps) => react.JSX.Element;
 
-export { type BreadcrumbProps, CustomBreadcrumb, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, type RouteTree, type RouterAdapter, type UserData };
+type SortOrder = "asc" | "desc";
+type GridColumn = {
+    id: string;
+    header: string;
+    sortable?: boolean;
+    flexgrow?: number;
+    resize?: boolean;
+};
+type Filters = {
+    columnName: string;
+    operators: {
+        label: string;
+        value: "input" | "date" | "select" | "date-range" | null;
+        options?: {
+            label: string;
+            value: string;
+        }[];
+    }[];
+};
+type GridProps = {
+    data: Record<string, any>[];
+    columns: GridColumn[];
+    sortKey?: string | null;
+    sortOrder?: SortOrder | null;
+    onSortChange?: (key: string, order: SortOrder) => void;
+    multiselect?: boolean;
+    reorder?: boolean;
+    overlay?: React.FC | string;
+    init?: any;
+    onupdatecell?: any;
+    fonts?: boolean;
+    autoConfig?: boolean | {};
+    downloadable?: boolean;
+    fileNmae?: string;
+    search: boolean;
+    searchkey: string;
+    searchValue: string;
+    onExportPdf?: () => void;
+    onExportExcel?: () => void;
+    onSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    filterList: Filters[];
+};
+
+declare function Grid({ data, columns, sortKey, sortOrder, onSortChange, onExportPdf, onExportExcel, downloadable, fileNmae, fonts, ...rest }: GridProps): react.JSX.Element;
+
+export { type BreadcrumbProps, CustomBreadcrumb, Grid, type GridProps, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, type RouteTree, type RouterAdapter, type UserData };

package/dist/index.js

@@ -60,6 +60,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   CustomBreadcrumb: () => breadcrumb_default,
+  Grid: () => grid_default,
   Navbar: () => Navbar
 });
 module.exports = __toCommonJS(index_exports);
@@ -1947,8 +1948,425 @@ 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;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CustomBreadcrumb,
+  Grid,
   Navbar
 });