baaz-custom-components 3.3.3 → 5.0.0

package/dist/index.mjs

@@ -1913,7 +1913,431 @@ var CustomBreadcrumb = ({
   ] }) });
 };
 var breadcrumb_default = CustomBreadcrumb;
+
+// src/components/custom/grid/index.tsx
+import { useRef as useRef2 } from "react";
+import { Grid as SvarGrid, WillowDark } from "@svar-ui/react-grid";
+
+// src/components/custom/grid/sortableHeaderCell.tsx
+import { MoveDown, MoveUp } from "lucide-react";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }) {
+  if (!(cell == null ? void 0 : cell.id)) return /* @__PURE__ */ jsx23("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__ */ jsxs17(
+    "div",
+    {
+      onClick: handleClick,
+      className: "cursor-pointer flex items-center gap-2 justify-between select-none",
+      children: [
+        /* @__PURE__ */ jsx23("span", { children: cell.text }),
+        active && (sortOrder === "asc" ? /* @__PURE__ */ jsx23(MoveDown, { className: "w-3 h-4" }) : /* @__PURE__ */ jsx23(MoveUp, { className: "w-3 h-4" }))
+      ]
+    }
+  );
+}
+var sortableHeaderCell_default = SortableHeaderCell;
+
+// src/utils/exportPdf.ts
+import jsPDF from "jspdf";
+import autoTable from "jspdf-autotable";
+function exportPdf(rows, name) {
+  if (!rows.length) return;
+  const doc = new jsPDF();
+  const columns = Object.keys(rows[0]);
+  const body = rows.map((row) => columns.map((col) => {
+    var _a;
+    return String((_a = row[col]) != null ? _a : "");
+  }));
+  autoTable(doc, {
+    head: [columns],
+    body,
+    styles: { fontSize: 8 },
+    headStyles: { fillColor: [40, 40, 40] }
+  });
+  doc.save(`${name != null ? name : "export"}.pdf`);
+}
+
+// src/utils/exportExcel.ts
+import * as XLSX from "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
+import { useEffect as useEffect5, useRef, useState as useState6 } from "react";
+import {
+  Download,
+  FileText,
+  FileSpreadsheet,
+  Search,
+  ListFilter,
+  X as X2
+} from "lucide-react";
+import { useSearchParams, useRouter } from "next/navigation";
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+var GridHeader = ({
+  onPdf,
+  onExcel,
+  onSearch,
+  download,
+  search,
+  searchValue,
+  searchkey = "",
+  filterList
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [downloadMenu, setDownloadMenu] = useState6(false);
+  const [filterMenu, setFilterMenu] = useState6(false);
+  const [filter, setFilter] = useState6({});
+  const downloadRef = useRef(null);
+  const filterRef = 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 });
+  };
+  useEffect5(() => {
+    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__ */ jsxs18("div", { className: "flex justify-end gap-4 items-center", children: [
+    filterList.length > 0 && /* @__PURE__ */ jsxs18("div", { className: "relative", ref: filterRef, children: [
+      /* @__PURE__ */ jsx24(
+        "button",
+        {
+          onClick: () => setFilterMenu((p) => !p),
+          className: "py-2 px-4 rounded-md bg-input hover:bg-muted transition cursor-pointer",
+          children: /* @__PURE__ */ jsx24(ListFilter, { size: 18 })
+        }
+      ),
+      filterMenu && /* @__PURE__ */ jsxs18("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__ */ jsxs18(
+          "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__ */ jsx24("option", { value: "", disabled: true, children: "Columns" }),
+              filterList.map((f) => /* @__PURE__ */ jsx24("option", { value: f.columnName, children: f.columnName }, f.columnName))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs18(
+          "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__ */ jsx24("option", { value: "", disabled: true, children: "Operator" }),
+              selectedColumn == null ? void 0 : selectedColumn.operators.map((op) => /* @__PURE__ */ jsx24("option", { value: op.label, children: op.label }, op.label))
+            ]
+          }
+        ),
+        (selectedOperator == null ? void 0 : selectedOperator.value) === "input" && /* @__PURE__ */ jsx24(
+          "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__ */ jsx24(
+          "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__ */ jsxs18(
+          "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__ */ jsx24("option", { value: "", disabled: true, children: "Value" }),
+              (_f = selectedOperator.options) == null ? void 0 : _f.map((opt) => /* @__PURE__ */ jsx24("option", { value: opt.value, children: opt.label }, opt.value))
+            ]
+          }
+        ),
+        (selectedOperator == null ? void 0 : selectedOperator.value) === "date-range" && /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx24(
+            "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__ */ jsx24("span", { className: "text-sm text-muted-foreground", children: "to" }),
+          /* @__PURE__ */ jsx24(
+            "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__ */ jsx24(
+          "button",
+          {
+            onClick: clearFilters,
+            className: "ml-auto p-2 rounded-md hover:bg-muted transition",
+            title: "Clear filters",
+            children: /* @__PURE__ */ jsx24(X2, { size: 16 })
+          }
+        )
+      ] })
+    ] }),
+    download && /* @__PURE__ */ jsxs18("div", { className: "relative", ref: downloadRef, children: [
+      /* @__PURE__ */ jsx24(
+        "button",
+        {
+          onClick: () => setDownloadMenu((p) => !p),
+          className: "py-2 px-4 rounded-md bg-input hover:bg-muted transition",
+          children: /* @__PURE__ */ jsx24(Download, { size: 18 })
+        }
+      ),
+      downloadMenu && /* @__PURE__ */ jsxs18("div", { className: "absolute top-full right-0 mt-2 w-32 rounded-md border bg-background shadow-lg z-50", children: [
+        /* @__PURE__ */ jsxs18(
+          "button",
+          {
+            onClick: () => {
+              onPdf();
+              setDownloadMenu(false);
+            },
+            className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted",
+            children: [
+              /* @__PURE__ */ jsx24(FileText, { size: 14 }),
+              "PDF"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs18(
+          "button",
+          {
+            onClick: () => {
+              onExcel();
+              setDownloadMenu(false);
+            },
+            className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted",
+            children: [
+              /* @__PURE__ */ jsx24(FileSpreadsheet, { size: 14 }),
+              "Excel"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    search && /* @__PURE__ */ jsxs18("div", { className: "py-2 px-4 w-[20rem] rounded-md border border-input bg-background flex items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx24(Search, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsx24(
+        "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
+import { jsx as jsx25, jsxs as jsxs19 } from "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 = useRef2(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__ */ jsx25(
+          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__ */ jsxs19("div", { className: "w-full h-full overflow-auto flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx25(
+      gridHeader_default,
+      {
+        onPdf: handleExportPdf,
+        onExcel: handleExportExcel,
+        download: downloadable,
+        search: rest.search,
+        searchkey: rest.searchkey,
+        onSearch: rest.onSearch,
+        searchValue: rest.searchValue,
+        filterList: rest.filterList
+      }
+    ),
+    /* @__PURE__ */ jsx25(WillowDark, { fonts, children: /* @__PURE__ */ jsx25(SvarGrid, __spreadProps(__spreadValues({}, rest), { data, columns: svarColumns, init })) })
+  ] });
+}
+var grid_default = Grid;
 export {
   breadcrumb_default as CustomBreadcrumb,
+  grid_default as Grid,
   Navbar
 };