baaz-custom-components 5.0.27 → 5.0.29

package/dist/index.js

@@ -1946,7 +1946,7 @@ var CustomBreadcrumb = ({
 var breadcrumb_default = CustomBreadcrumb;
 
 // src/components/custom/grid/index.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_react_grid = require("@svar-ui/react-grid");
 
 // src/utils/exportPdf.ts
@@ -1979,70 +1979,23 @@ function exportExcel(rows, name) {
   XLSX.writeFile(workbook, `${name != null ? name : "export"}.xlsx`);
 }
 
-// src/components/custom/grid/gridHeader.tsx
+// src/components/custom/grid/gridHeader/index.tsx
+var import_react6 = require("react");
+var import_lucide_react13 = require("lucide-react");
+
+// src/components/custom/grid/gridHeader/components/filters.tsx
 var import_react5 = require("react");
 var import_lucide_react12 = require("lucide-react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var GridHeader = ({
-  onPdf,
-  onExcel,
-  onSearch = () => {
-  },
-  download,
-  search,
-  searchValue,
-  searchkey = "",
-  filterList,
+var Filters = ({
   onFilterChange,
-  initialFilters = []
+  initialFilters = [],
+  filterList
 }) => {
-  const [downloadMenu, setDownloadMenu] = (0, import_react5.useState)(false);
-  const [filterMenu, setFilterMenu] = (0, import_react5.useState)(false);
-  const [searchOpen, setSearchOpen] = (0, import_react5.useState)(false);
   const [conditions, setConditions] = (0, import_react5.useState)([]);
-  const downloadRef = (0, import_react5.useRef)(null);
+  const [filterMenu, setFilterMenu] = (0, import_react5.useState)(false);
   const filterRef = (0, import_react5.useRef)(null);
   const filterDropdownRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
-    if (initialFilters && initialFilters.length > 0) {
-      const initialConditions = initialFilters.map(
-        (filter, index) => ({
-          id: crypto.randomUUID(),
-          column: filter.column,
-          operator: filter.operator,
-          value: filter.value,
-          logic: index === 0 ? "WHERE" : filter.logic || "AND"
-        })
-      );
-      setConditions(initialConditions);
-    }
-  }, []);
-  (0, import_react5.useEffect)(() => {
-    if (!filterMenu || !filterDropdownRef.current) return;
-    const dropdown = filterDropdownRef.current;
-    const rect = dropdown.getBoundingClientRect();
-    if (rect.right > window.innerWidth) {
-      dropdown.style.left = "auto";
-      dropdown.style.right = "0";
-    }
-    if (rect.bottom > window.innerHeight) {
-      dropdown.style.top = "auto";
-      dropdown.style.bottom = "100%";
-      dropdown.style.marginBottom = "8px";
-    }
-  }, [filterMenu]);
-  (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);
-  }, []);
   const isValidFilter = (condition) => {
     if (!condition.column || !condition.operator) return false;
     if (condition.operator === "date-range") {
@@ -2057,10 +2010,11 @@ var GridHeader = ({
   }, [conditions]);
   const activeFilterCount = (initialFilters == null ? void 0 : initialFilters.length) || 0;
   const formatFiltersForApi = (conditions2) => {
-    return conditions2.filter(isValidFilter).map(({ column, operator, value, logic }, index) => ({
+    return conditions2.filter(isValidFilter).map(({ column, operator, value, logic, key }, index) => ({
       column,
       operator,
       value,
+      key,
       logic: index === 0 ? "WHERE" : logic != null ? logic : "AND"
     }));
   };
@@ -2120,60 +2074,93 @@ var GridHeader = ({
       action: "clear"
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between bg-card py-2 px-4 rounded-tl-md rounded-tr-md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-3", children: [
-      filterList.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative", ref: filterRef, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-          "button",
-          {
-            onClick: () => setFilterMenu((p) => !p),
-            className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-input text-sm cursor-pointer",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.ListFilter, { size: 16 }),
-              "Filters",
-              activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ml-1 px-1.5 py-0.5 text-xs bg-primary text-primary-foreground rounded-full font-medium", children: activeFilterCount })
-            ]
-          }
-        ),
-        filterMenu && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-          "div",
-          {
-            ref: filterDropdownRef,
-            className: "absolute top-full left-0 mt-2 w-[650px] max-w-[95vw] p-4 rounded-md border !bg-background shadow-lg z-50 space-y-4",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-sm font-medium", children: "In this view, show records" }),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                  "button",
-                  {
-                    onClick: clearFilters,
-                    className: "p-2 rounded-md hover:bg-destructive/30 cursor-pointer",
-                    title: "Clear all filters",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.X, { size: 16 })
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "space-y-3", children: conditions.map((condition, index) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-                const selectedColumn = filterList.find(
-                  (f) => f.columnName.value === condition.column
-                );
-                const selectedOperator = selectedColumn == null ? void 0 : selectedColumn.operators.find(
-                  (op) => op.value === condition.operator
-                );
-                return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-                  "div",
-                  {
-                    className: "flex items-center gap-2 w-full",
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-[90px] shrink-0", children: index === 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-sm font-medium", children: "Where" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  (0, import_react5.useEffect)(() => {
+    if (initialFilters && initialFilters.length > 0) {
+      const initialConditions = initialFilters.map(
+        (filter, index) => ({
+          id: crypto.randomUUID(),
+          column: filter.column,
+          operator: filter.operator,
+          value: filter.value,
+          logic: index === 0 ? "WHERE" : filter.logic || "AND"
+        })
+      );
+      setConditions(initialConditions);
+    }
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    const handleClickOutside = (e) => {
+      if (filterRef.current && !filterRef.current.contains(e.target)) {
+        setFilterMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const selectedColumns = (0, import_react5.useMemo)(() => {
+    return conditions.map((c) => c.column).filter(Boolean);
+  }, [conditions]);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative", ref: filterRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      "button",
+      {
+        onClick: () => setFilterMenu((p) => !p),
+        className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-input text-sm cursor-pointer",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.ListFilter, { size: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hidden md:block", children: "Filters" }),
+          activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ml-1 px-1.5 py-0.5 text-xs bg-primary text-primary-foreground rounded-full font-medium", children: activeFilterCount })
+        ]
+      }
+    ),
+    filterMenu && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        "div",
+        {
+          className: "fixed inset-0 bg-black/40 z-40 md:hidden",
+          onClick: () => setFilterMenu(false)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        "div",
+        {
+          ref: filterDropdownRef,
+          className: "fixed inset-x-0 bottom-0 md:absolute md:top-full md:bottom-auto md:left-0 w-full md:w-[700px] md:max-w-[95vw] max-h-[85vh] overflow-y-auto p-4 rounded-t-2xl md:rounded-md border bg-background shadow-xl z-50 space-y-4",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-start sm:items-center justify-between gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-sm font-medium", children: "In this view, show records" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "button",
+                {
+                  onClick: clearFilters,
+                  className: "p-2 rounded-md hover:bg-destructive/30 cursor-pointer",
+                  title: "Clear all filters",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.X, { size: 16 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "space-y-3 w-full flex flex-col overflow-auto", children: conditions.map((condition, index) => {
+              var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+              const selectedColumn = filterList.find(
+                (f) => f.columnName.value === condition.column
+              );
+              const selectedOperator = selectedColumn == null ? void 0 : selectedColumn.operators.find(
+                (op) => op.value === condition.operator
+              );
+              return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                "div",
+                {
+                  className: "flex flex-col md:flex-row gap-3 md:gap-2 w-full",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col sm:flex-row gap-2 w-full", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full sm:w-[90px] shrink-0", children: index === 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-sm font-medium", children: "Where" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                         "select",
                         {
                           value: (_a = condition.logic) != null ? _a : "AND",
                           onChange: (e) => updateCondition(condition.id, {
                             logic: e.target.value
                           }),
-                          className: "w-full px-2 py-2 rounded-md bg-input text-sm",
+                          className: "w-full px-3 py-2 rounded-md bg-input text-sm focus:outline-none",
                           children: [
                             /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "AND", children: "AND" }),
                             /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "OR", children: "OR" })
@@ -2189,17 +2176,21 @@ var GridHeader = ({
                             operator: void 0,
                             value: void 0
                           }),
-                          className: "flex-1 min-w-0 px-3 py-2 rounded-md bg-input text-sm",
+                          className: "w-full sm:min-w-[8rem] px-3 py-2 rounded-md bg-input text-sm focus:outline-none",
                           children: [
                             /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "", disabled: true, children: "Column" }),
-                            filterList.map((f) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                              "option",
-                              {
-                                value: f.columnName.value,
-                                children: f.columnName.label
-                              },
-                              f.columnName.value
-                            ))
+                            filterList.map((f) => {
+                              const isUsed = selectedColumns.includes(f.columnName.value) && condition.column !== f.columnName.value;
+                              return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                                "option",
+                                {
+                                  value: f.columnName.value,
+                                  disabled: isUsed,
+                                  children: f.columnName.label
+                                },
+                                f.columnName.value
+                              );
+                            })
                           ]
                         }
                       ),
@@ -2208,11 +2199,18 @@ var GridHeader = ({
                         {
                           value: (_c = condition.operator) != null ? _c : "",
                           disabled: !selectedColumn,
-                          onChange: (e) => updateCondition(condition.id, {
-                            operator: e.target.value,
-                            value: void 0
-                          }),
-                          className: "flex-1 min-w-0 px-3 py-2 rounded-md bg-input text-sm disabled:opacity-50 disabled:cursor-not-allowed",
+                          onChange: (e) => {
+                            const operatorValue = e.target.value;
+                            const operator = selectedColumn == null ? void 0 : selectedColumn.operators.find(
+                              (op) => op.value === operatorValue
+                            );
+                            updateCondition(condition.id, {
+                              operator: e.target.value,
+                              key: operator == null ? void 0 : operator.key,
+                              value: void 0
+                            });
+                          },
+                          className: "w-full sm:min-w-[8rem] px-3 py-2 rounded-md bg-input text-sm disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none",
                           children: [
                             /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "", disabled: true, children: "Operator" }),
                             selectedColumn == null ? void 0 : selectedColumn.operators.map((op) => {
@@ -2221,8 +2219,10 @@ var GridHeader = ({
                             })
                           ]
                         }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col sm:flex-row gap-2 w-full items-start sm:items-center", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex-1 w-full min-w-0", children: [
                         (selectedOperator == null ? void 0 : selectedOperator.value) === "input" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                           "input",
                           {
@@ -2231,7 +2231,7 @@ var GridHeader = ({
                               value: e.target.value
                             }),
                             placeholder: "Enter value",
-                            className: "w-full px-3 py-2 rounded-md bg-input text-sm"
+                            className: "w-full px-3 py-2 rounded-md bg-input text-sm focus:outline-none"
                           }
                         ),
                         (selectedOperator == null ? void 0 : selectedOperator.value) === "select" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
@@ -2241,7 +2241,7 @@ var GridHeader = ({
                             onChange: (e) => updateCondition(condition.id, {
                               value: e.target.value
                             }),
-                            className: "w-full px-3 py-2 rounded-md bg-input text-sm",
+                            className: "w-full px-3 py-2 rounded-md bg-input text-sm focus:outline-none",
                             children: [
                               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "", disabled: true, children: "Select value" }),
                               (_f = selectedOperator.options) == null ? void 0 : _f.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
@@ -2256,10 +2256,10 @@ var GridHeader = ({
                             onChange: (e) => updateCondition(condition.id, {
                               value: e.target.value
                             }),
-                            className: "w-full px-3 py-2 rounded-md bg-input text-sm"
+                            className: "w-full px-3 py-2 rounded-md bg-input text-sm focus:outline-none"
                           }
                         ),
-                        (selectedOperator == null ? void 0 : selectedOperator.value) === "date-range" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex gap-2", children: [
+                        (selectedOperator == null ? void 0 : selectedOperator.value) === "date-range" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col sm:flex-row gap-2 w-full", children: [
                           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                             "input",
                             {
@@ -2270,8 +2270,7 @@ var GridHeader = ({
                                   start: e.target.value
                                 })
                               }),
-                              placeholder: "Start date",
-                              className: "w-full px-3 py-2 rounded-md bg-input text-sm"
+                              className: "w-full px-3 py-2 rounded-md bg-input text-sm focus:outline-none"
                             }
                           ),
                           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -2284,14 +2283,13 @@ var GridHeader = ({
                                   end: e.target.value
                                 })
                               }),
-                              placeholder: "End date",
-                              className: "w-full px-3 py-2 rounded-md bg-input text-sm"
+                              className: "w-full px-3 py-2 rounded-md bg-input text-sm focus:outline-none"
                             }
                           )
                         ] }),
                         !selectedOperator && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full px-3 py-2 rounded-md bg-input/50 text-sm text-muted-foreground", children: "Select operator" })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-[40px] flex justify-center shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full sm:w-[40px] flex justify-end sm:justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                         "button",
                         {
                           onClick: () => deleteCondition(condition.id),
@@ -2300,58 +2298,100 @@ var GridHeader = ({
                           children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Trash2, { size: 16 })
                         }
                       ) })
-                    ]
-                  },
-                  condition.id
-                );
-              }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between pt-2 border-t", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-                  "button",
-                  {
-                    onClick: addCondition,
-                    className: "flex items-center gap-2 text-sm text-primary hover:text-primary/80 cursor-pointer",
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Plus, { size: 14 }),
-                      "Add condition"
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-                  "button",
-                  {
-                    onClick: applyFilters,
-                    disabled: !canApply,
-                    className: "flex items-center gap-2 px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed hover:bg-primary/90 transition-colors cursor-pointer",
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Check, { size: 16 }),
-                      "Apply",
-                      hasChangesFromInitial && canApply && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                        "span",
-                        {
-                          className: "ml-1 w-2 h-2 bg-yellow-400 rounded-full",
-                          title: "Unapplied changes"
-                        }
-                      )
-                    ]
-                  }
-                )
-              ] })
-            ]
-          }
-        )
-      ] }),
-      download && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative", ref: downloadRef, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    ] })
+                  ]
+                },
+                condition.id
+              );
+            }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between pt-2 border-t", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                "button",
+                {
+                  onClick: addCondition,
+                  className: "flex items-center gap-2 text-sm text-primary hover:text-primary/80 cursor-pointer",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Plus, { size: 14 }),
+                    "Add condition"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                "button",
+                {
+                  onClick: applyFilters,
+                  disabled: !canApply,
+                  className: "flex items-center gap-2 px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed hover:bg-primary/90 transition-colors cursor-pointer",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Check, { size: 16 }),
+                    "Apply",
+                    hasChangesFromInitial && canApply && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                      "span",
+                      {
+                        className: "ml-1 w-2 h-2 bg-yellow-400 rounded-full",
+                        title: "Unapplied changes"
+                      }
+                    )
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+var filters_default = Filters;
+
+// src/components/custom/grid/gridHeader/index.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var GridHeader = ({
+  onPdf,
+  onExcel,
+  onSearch = () => {
+  },
+  download,
+  search,
+  searchValue,
+  searchkey = "",
+  filterList,
+  onFilterChange,
+  initialFilters = []
+}) => {
+  const [downloadMenu, setDownloadMenu] = (0, import_react6.useState)(false);
+  const [searchOpen, setSearchOpen] = (0, import_react6.useState)(false);
+  const downloadRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
+    const handleClickOutside = (e) => {
+      if (downloadRef.current && !downloadRef.current.contains(e.target)) {
+        setDownloadMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col md:flex-row md:items-center justify-between bg-card py-2 px-2 md:px-4 rounded-tl-md rounded-tr-md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-between items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        filters_default,
+        {
+          onFilterChange,
+          initialFilters,
+          filterList
+        }
+      ),
+      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: "p-2 rounded-md hover:bg-input cursor-pointer",
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Ellipsis, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Ellipsis, { size: 16 })
           }
         ),
-        downloadMenu && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "absolute top-full right-0 mt-2 w-32 rounded-md border !bg-background shadow-lg z-50 overflow-hidden", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        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 overflow-hidden", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             "button",
             {
               onClick: () => {
@@ -2360,12 +2400,12 @@ var GridHeader = ({
               },
               className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted cursor-pointer",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.FileText, { size: 14 }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.FileText, { size: 14 }),
                 "PDF"
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             "button",
             {
               onClick: () => {
@@ -2374,7 +2414,7 @@ var GridHeader = ({
               },
               className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted cursor-pointer",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.FileSpreadsheet, { size: 14 }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.FileSpreadsheet, { size: 14 }),
                 "Excel"
               ]
             }
@@ -2382,20 +2422,20 @@ var GridHeader = ({
         ] })
       ] })
     ] }),
-    search && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "relative h-[40px] flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    search && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "relative h-[40px] flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "div",
       {
-        className: `absolute right-0 flex items-center transition-all duration-200 ${searchOpen ? "w-[250px]" : "w-[40px]"} h-[40px]`,
-        children: !searchOpen ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        className: `absolute md:right-0 flex items-center transition-all duration-200 ${searchOpen ? "w-[250px]" : "w-[40px]"} h-[40px]`,
+        children: !searchOpen ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "button",
           {
             onClick: () => setSearchOpen(true),
             className: "w-[40px] h-[40px] flex items-center justify-center rounded-md hover:bg-input cursor-pointer",
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Search, { size: 18 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Search, { size: 18 })
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2 w-full h-full px-3 rounded-md border border-input bg-background", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Search, { size: 16 }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-2 w-full h-full px-3 rounded-md border border-input bg-background", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Search, { size: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "input",
             {
               autoFocus: true,
@@ -2405,12 +2445,12 @@ var GridHeader = ({
               value: searchValue
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "button",
             {
               onClick: () => setSearchOpen(false),
               className: "cursor-pointer",
-              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.X, { size: 16 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.X, { size: 16 })
             }
           )
         ] })
@@ -2421,8 +2461,8 @@ var GridHeader = ({
 var gridHeader_default = GridHeader;
 
 // src/components/custom/grid/index.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var Grid = (0, import_react6.forwardRef)(
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Grid = (0, import_react7.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       data,
@@ -2451,10 +2491,10 @@ var Grid = (0, import_react6.forwardRef)(
       "onFilterChange",
       "initialFilters"
     ]);
-    const apiRef = (0, import_react6.useRef)(null);
-    const containerRef = (0, import_react6.useRef)(null);
-    (0, import_react6.useImperativeHandle)(ref, () => apiRef.current, []);
-    const resizeColumns = (0, import_react6.useCallback)(() => {
+    const apiRef = (0, import_react7.useRef)(null);
+    const containerRef = (0, import_react7.useRef)(null);
+    (0, import_react7.useImperativeHandle)(ref, () => apiRef.current, []);
+    const resizeColumns = (0, import_react7.useCallback)(() => {
       var _a2;
       const api = apiRef.current;
       const container = containerRef.current;
@@ -2484,7 +2524,7 @@ var Grid = (0, import_react6.forwardRef)(
         });
       }
     }, [columns, data]);
-    (0, import_react6.useEffect)(() => {
+    (0, import_react7.useEffect)(() => {
       if (!containerRef.current) return;
       const observer = new ResizeObserver(() => {
         resizeColumns();
@@ -2492,7 +2532,7 @@ var Grid = (0, import_react6.forwardRef)(
       observer.observe(containerRef.current);
       return () => observer.disconnect();
     }, [resizeColumns]);
-    const init = (0, import_react6.useCallback)(
+    const init = (0, import_react7.useCallback)(
       (api) => {
         apiRef.current = api;
         resizeColumns();
@@ -2507,7 +2547,7 @@ var Grid = (0, import_react6.forwardRef)(
       });
       return selectedData;
     };
-    const handleExportPdf = (0, import_react6.useCallback)(() => {
+    const handleExportPdf = (0, import_react7.useCallback)(() => {
       const selected = getSelectedData();
       if (selected.length) {
         exportPdf(selected, fileName);
@@ -2515,7 +2555,7 @@ var Grid = (0, import_react6.forwardRef)(
         onExportPdf == null ? void 0 : onExportPdf();
       }
     }, [getSelectedData, exportPdf, onExportPdf, fileName]);
-    const handleExportExcel = (0, import_react6.useCallback)(() => {
+    const handleExportExcel = (0, import_react7.useCallback)(() => {
       const selected = getSelectedData();
       if (selected.length) {
         exportExcel(selected, fileName);
@@ -2523,8 +2563,8 @@ var Grid = (0, import_react6.forwardRef)(
         onExportExcel == null ? void 0 : onExportExcel();
       }
     }, [getSelectedData, exportExcel, onExportExcel, fileName]);
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "w-full h-full flex flex-col overflow-hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "w-full h-full flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         gridHeader_default,
         {
           onPdf: handleExportPdf,
@@ -2539,7 +2579,7 @@ var Grid = (0, import_react6.forwardRef)(
           initialFilters
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex-1 w-full overflow-hidden", ref: containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_grid.WillowDark, { fonts, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-full h-full relative", children: rest.loading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute inset-0 bg-background/60 backdrop-blur-sm flex items-center justify-center z-10", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent" }) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex-1 w-full overflow-hidden", ref: containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_grid.WillowDark, { fonts, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-full h-full relative", children: rest.loading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute inset-0 bg-background/60 backdrop-blur-sm flex items-center justify-center z-10", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent" }) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         import_react_grid.Grid,
         __spreadProps(__spreadValues({}, rest), {
           data,
@@ -2554,10 +2594,10 @@ var Grid = (0, import_react6.forwardRef)(
 var grid_default = Grid;
 
 // src/components/custom/grid/sortableHeaderCell.tsx
-var import_lucide_react13 = require("lucide-react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_lucide_react14 = require("lucide-react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }) {
-  if (!(cell == null ? void 0 : cell.id)) return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: cell == null ? void 0 : cell.text });
+  if (!(cell == null ? void 0 : cell.id)) return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: cell == null ? void 0 : cell.text });
   const active = sortKey === cell.id;
   const handleClick = () => {
     if (!onSortChange || !cell.id) return;
@@ -2571,15 +2611,15 @@ function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }) {
     }
     onSortChange("", null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
     {
       onClick: handleClick,
       className: "cursor-pointer flex items-center gap-2 justify-between select-none",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: cell.text }),
-        !active && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.ArrowUpDown, { className: "w-4 h-4 opacity-50" }),
-        active && (sortOrder === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.MoveDown, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.MoveUp, { className: "w-4 h-4" }))
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: cell.text }),
+        !active && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.ArrowUpDown, { className: "w-4 h-4 opacity-50" }),
+        active && (sortOrder === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.MoveDown, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.MoveUp, { className: "w-4 h-4" }))
       ]
     }
   );
@@ -2617,8 +2657,8 @@ function getPaginationRange(currentPage, totalPages, siblingCount = 2) {
 }
 
 // src/components/custom/pagination/index.tsx
-var import_lucide_react14 = require("lucide-react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function Pagination({
   totalCount,
   count = null,
@@ -2639,47 +2679,47 @@ function Pagination({
   const handlePageSizeChange = (size) => {
     onPageSizeChange == null ? void 0 : onPageSizeChange(size);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center justify-between bg-card px-3 py-2 rounded-br-md rounded-bl-md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-3 text-xs text-muted-foreground tracking-wider font-medium", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center justify-between bg-card px-3 py-2 rounded-br-md rounded-bl-md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-3 text-xs text-muted-foreground tracking-wider font-medium", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { children: [
         "Showing ",
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-foreground", children: count }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-foreground", children: count }),
         " of",
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-foreground", children: totalCount })
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-foreground", children: totalCount })
       ] }),
-      showSizeChanger && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      showSizeChanger && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "select",
         {
           value: pageSize,
           onChange: (e) => handlePageSizeChange(Number(e.target.value)),
           className: "rounded-md border border-input bg-background px-3 py-2 text-xs text-foreground focus:outline-none",
-          children: sizeChangerOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("option", { value: size, children: [
+          children: sizeChangerOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime27.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)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "button",
         {
           disabled: currentPage === 1,
           onClick: () => handlePageChange(currentPage - 1),
           className: "border border-border w-8 h-8 rounded-md flex items-center justify-center disabled:opacity-40 hover:bg-card-foreground transition",
-          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.ChevronLeft, { className: "w-5 h-5 select-none" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react15.ChevronLeft, { className: "w-5 h-5 select-none" })
         }
       ),
       pages.map(
-        (page, idx) => page === "dots" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        (page, idx) => page === "dots" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "span",
           {
             className: "px-2 text-muted-foreground text-xs tracking-wider font-medium",
             children: "\u2026"
           },
           `dots-${idx}`
-        ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "button",
           {
             onClick: () => handlePageChange(page),
@@ -2689,13 +2729,13 @@ function Pagination({
           page
         )
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "button",
         {
           disabled: currentPage === totalPages,
           onClick: () => handlePageChange(currentPage + 1),
           className: "border border-border w-8 h-8 rounded-md flex items-center justify-center disabled:opacity-40 hover:bg-card-foreground transition",
-          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.ChevronRight, { className: "w-5 h-5 select-none" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react15.ChevronRight, { className: "w-5 h-5 select-none" })
         }
       )
     ] })