baaz-custom-components 5.0.27 → 5.0.29

package/dist/index.mjs

@@ -1911,10 +1911,10 @@ var breadcrumb_default = CustomBreadcrumb;
 // src/components/custom/grid/index.tsx
 import {
   useCallback as useCallback2,
-  useRef as useRef2,
+  useRef as useRef3,
   useImperativeHandle,
   forwardRef,
-  useEffect as useEffect6
+  useEffect as useEffect7
 } from "react";
 import { Grid as SvarGrid, WillowDark } from "@svar-ui/react-grid";
 
@@ -1948,80 +1948,29 @@ function exportExcel(rows, name) {
   XLSX.writeFile(workbook, `${name != null ? name : "export"}.xlsx`);
 }
 
-// src/components/custom/grid/gridHeader.tsx
-import { useEffect as useEffect5, useRef, useState as useState6, useMemo as useMemo3 } from "react";
+// src/components/custom/grid/gridHeader/index.tsx
+import { useEffect as useEffect6, useRef as useRef2, useState as useState7 } from "react";
 import {
   FileText,
   FileSpreadsheet,
   Search,
-  ListFilter,
   Ellipsis,
-  X as X2,
-  Plus,
-  Trash2,
-  Check
+  X as X3
 } from "lucide-react";
-import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
-var GridHeader = ({
-  onPdf,
-  onExcel,
-  onSearch = () => {
-  },
-  download,
-  search,
-  searchValue,
-  searchkey = "",
-  filterList,
+
+// src/components/custom/grid/gridHeader/components/filters.tsx
+import { useEffect as useEffect5, useMemo as useMemo3, useRef, useState as useState6 } from "react";
+import { ListFilter, X as X2, Plus, Trash2, Check } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+var Filters = ({
   onFilterChange,
-  initialFilters = []
+  initialFilters = [],
+  filterList
 }) => {
-  const [downloadMenu, setDownloadMenu] = useState6(false);
-  const [filterMenu, setFilterMenu] = useState6(false);
-  const [searchOpen, setSearchOpen] = useState6(false);
   const [conditions, setConditions] = useState6([]);
-  const downloadRef = useRef(null);
+  const [filterMenu, setFilterMenu] = useState6(false);
   const filterRef = useRef(null);
   const filterDropdownRef = useRef(null);
-  useEffect5(() => {
-    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);
-    }
-  }, []);
-  useEffect5(() => {
-    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]);
-  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);
-  }, []);
   const isValidFilter = (condition) => {
     if (!condition.column || !condition.operator) return false;
     if (condition.operator === "date-range") {
@@ -2036,10 +1985,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"
     }));
   };
@@ -2099,60 +2049,93 @@ var GridHeader = ({
       action: "clear"
     });
   };
-  return /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-between bg-card py-2 px-4 rounded-tl-md rounded-tr-md", children: [
-    /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-3", children: [
-      filterList.length > 0 && /* @__PURE__ */ jsxs17("div", { className: "relative", ref: filterRef, children: [
-        /* @__PURE__ */ jsxs17(
-          "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__ */ jsx23(ListFilter, { size: 16 }),
-              "Filters",
-              activeFilterCount > 0 && /* @__PURE__ */ jsx23("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__ */ jsxs17(
-          "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__ */ jsxs17("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx23("span", { className: "text-sm font-medium", children: "In this view, show records" }),
-                /* @__PURE__ */ jsx23(
-                  "button",
-                  {
-                    onClick: clearFilters,
-                    className: "p-2 rounded-md hover:bg-destructive/30 cursor-pointer",
-                    title: "Clear all filters",
-                    children: /* @__PURE__ */ jsx23(X2, { size: 16 })
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx23("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__ */ jsxs17(
-                  "div",
-                  {
-                    className: "flex items-center gap-2 w-full",
-                    children: [
-                      /* @__PURE__ */ jsx23("div", { className: "w-[90px] shrink-0", children: index === 0 ? /* @__PURE__ */ jsx23("span", { className: "text-sm font-medium", children: "Where" }) : /* @__PURE__ */ jsxs17(
+  useEffect5(() => {
+    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);
+    }
+  }, []);
+  useEffect5(() => {
+    const handleClickOutside = (e) => {
+      if (filterRef.current && !filterRef.current.contains(e.target)) {
+        setFilterMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const selectedColumns = useMemo3(() => {
+    return conditions.map((c) => c.column).filter(Boolean);
+  }, [conditions]);
+  return /* @__PURE__ */ jsxs17("div", { className: "relative", ref: filterRef, children: [
+    /* @__PURE__ */ jsxs17(
+      "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__ */ jsx23(ListFilter, { size: 16 }),
+          /* @__PURE__ */ jsx23("span", { className: "hidden md:block", children: "Filters" }),
+          activeFilterCount > 0 && /* @__PURE__ */ jsx23("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__ */ jsxs17(Fragment2, { children: [
+      /* @__PURE__ */ jsx23(
+        "div",
+        {
+          className: "fixed inset-0 bg-black/40 z-40 md:hidden",
+          onClick: () => setFilterMenu(false)
+        }
+      ),
+      /* @__PURE__ */ jsxs17(
+        "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__ */ jsxs17("div", { className: "flex items-start sm:items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsx23("span", { className: "text-sm font-medium", children: "In this view, show records" }),
+              /* @__PURE__ */ jsx23(
+                "button",
+                {
+                  onClick: clearFilters,
+                  className: "p-2 rounded-md hover:bg-destructive/30 cursor-pointer",
+                  title: "Clear all filters",
+                  children: /* @__PURE__ */ jsx23(X2, { size: 16 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx23("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__ */ jsxs17(
+                "div",
+                {
+                  className: "flex flex-col md:flex-row gap-3 md:gap-2 w-full",
+                  children: [
+                    /* @__PURE__ */ jsxs17("div", { className: "flex flex-col sm:flex-row gap-2 w-full", children: [
+                      /* @__PURE__ */ jsx23("div", { className: "w-full sm:w-[90px] shrink-0", children: index === 0 ? /* @__PURE__ */ jsx23("span", { className: "text-sm font-medium", children: "Where" }) : /* @__PURE__ */ jsxs17(
                         "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__ */ jsx23("option", { value: "AND", children: "AND" }),
                             /* @__PURE__ */ jsx23("option", { value: "OR", children: "OR" })
@@ -2168,17 +2151,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__ */ jsx23("option", { value: "", disabled: true, children: "Column" }),
-                            filterList.map((f) => /* @__PURE__ */ jsx23(
-                              "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__ */ jsx23(
+                                "option",
+                                {
+                                  value: f.columnName.value,
+                                  disabled: isUsed,
+                                  children: f.columnName.label
+                                },
+                                f.columnName.value
+                              );
+                            })
                           ]
                         }
                       ),
@@ -2187,11 +2174,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__ */ jsx23("option", { value: "", disabled: true, children: "Operator" }),
                             selectedColumn == null ? void 0 : selectedColumn.operators.map((op) => {
@@ -2200,8 +2194,10 @@ var GridHeader = ({
                             })
                           ]
                         }
-                      ),
-                      /* @__PURE__ */ jsxs17("div", { className: "flex-1 min-w-0", children: [
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs17("div", { className: "flex flex-col sm:flex-row gap-2 w-full items-start sm:items-center", children: [
+                      /* @__PURE__ */ jsxs17("div", { className: "flex-1 w-full min-w-0", children: [
                         (selectedOperator == null ? void 0 : selectedOperator.value) === "input" && /* @__PURE__ */ jsx23(
                           "input",
                           {
@@ -2210,7 +2206,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__ */ jsxs17(
@@ -2220,7 +2216,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__ */ jsx23("option", { value: "", disabled: true, children: "Select value" }),
                               (_f = selectedOperator.options) == null ? void 0 : _f.map((opt) => /* @__PURE__ */ jsx23("option", { value: opt.value, children: opt.label }, opt.value))
@@ -2235,10 +2231,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__ */ jsxs17("div", { className: "flex gap-2", children: [
+                        (selectedOperator == null ? void 0 : selectedOperator.value) === "date-range" && /* @__PURE__ */ jsxs17("div", { className: "flex flex-col sm:flex-row gap-2 w-full", children: [
                           /* @__PURE__ */ jsx23(
                             "input",
                             {
@@ -2249,8 +2245,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__ */ jsx23(
@@ -2263,14 +2258,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__ */ jsx23("div", { className: "w-full px-3 py-2 rounded-md bg-input/50 text-sm text-muted-foreground", children: "Select operator" })
                       ] }),
-                      /* @__PURE__ */ jsx23("div", { className: "w-[40px] flex justify-center shrink-0", children: /* @__PURE__ */ jsx23(
+                      /* @__PURE__ */ jsx23("div", { className: "w-full sm:w-[40px] flex justify-end sm:justify-center", children: /* @__PURE__ */ jsx23(
                         "button",
                         {
                           onClick: () => deleteCondition(condition.id),
@@ -2279,58 +2273,100 @@ var GridHeader = ({
                           children: /* @__PURE__ */ jsx23(Trash2, { size: 16 })
                         }
                       ) })
-                    ]
-                  },
-                  condition.id
-                );
-              }) }),
-              /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-between pt-2 border-t", children: [
-                /* @__PURE__ */ jsxs17(
-                  "button",
-                  {
-                    onClick: addCondition,
-                    className: "flex items-center gap-2 text-sm text-primary hover:text-primary/80 cursor-pointer",
-                    children: [
-                      /* @__PURE__ */ jsx23(Plus, { size: 14 }),
-                      "Add condition"
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs17(
-                  "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__ */ jsx23(Check, { size: 16 }),
-                      "Apply",
-                      hasChangesFromInitial && canApply && /* @__PURE__ */ jsx23(
-                        "span",
-                        {
-                          className: "ml-1 w-2 h-2 bg-yellow-400 rounded-full",
-                          title: "Unapplied changes"
-                        }
-                      )
-                    ]
-                  }
-                )
-              ] })
-            ]
-          }
-        )
-      ] }),
-      download && /* @__PURE__ */ jsxs17("div", { className: "relative", ref: downloadRef, children: [
-        /* @__PURE__ */ jsx23(
+                    ] })
+                  ]
+                },
+                condition.id
+              );
+            }) }),
+            /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-between pt-2 border-t", children: [
+              /* @__PURE__ */ jsxs17(
+                "button",
+                {
+                  onClick: addCondition,
+                  className: "flex items-center gap-2 text-sm text-primary hover:text-primary/80 cursor-pointer",
+                  children: [
+                    /* @__PURE__ */ jsx23(Plus, { size: 14 }),
+                    "Add condition"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs17(
+                "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__ */ jsx23(Check, { size: 16 }),
+                    "Apply",
+                    hasChangesFromInitial && canApply && /* @__PURE__ */ jsx23(
+                      "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
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+var GridHeader = ({
+  onPdf,
+  onExcel,
+  onSearch = () => {
+  },
+  download,
+  search,
+  searchValue,
+  searchkey = "",
+  filterList,
+  onFilterChange,
+  initialFilters = []
+}) => {
+  const [downloadMenu, setDownloadMenu] = useState7(false);
+  const [searchOpen, setSearchOpen] = useState7(false);
+  const downloadRef = useRef2(null);
+  useEffect6(() => {
+    const handleClickOutside = (e) => {
+      if (downloadRef.current && !downloadRef.current.contains(e.target)) {
+        setDownloadMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  return /* @__PURE__ */ jsxs18("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__ */ jsxs18("div", { className: "flex justify-between items-center gap-3", children: [
+      /* @__PURE__ */ jsx24(
+        filters_default,
+        {
+          onFilterChange,
+          initialFilters,
+          filterList
+        }
+      ),
+      download && /* @__PURE__ */ jsxs18("div", { className: "relative", ref: downloadRef, children: [
+        /* @__PURE__ */ jsx24(
           "button",
           {
             onClick: () => setDownloadMenu((p) => !p),
             className: "p-2 rounded-md hover:bg-input cursor-pointer",
-            children: /* @__PURE__ */ jsx23(Ellipsis, { size: 16 })
+            children: /* @__PURE__ */ jsx24(Ellipsis, { size: 16 })
           }
         ),
-        downloadMenu && /* @__PURE__ */ jsxs17("div", { className: "absolute top-full right-0 mt-2 w-32 rounded-md border !bg-background shadow-lg z-50 overflow-hidden", children: [
-          /* @__PURE__ */ jsxs17(
+        downloadMenu && /* @__PURE__ */ jsxs18("div", { className: "absolute top-full right-0 mt-2 w-32 rounded-md border !bg-background shadow-lg z-50 overflow-hidden", children: [
+          /* @__PURE__ */ jsxs18(
             "button",
             {
               onClick: () => {
@@ -2339,12 +2375,12 @@ var GridHeader = ({
               },
               className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted cursor-pointer",
               children: [
-                /* @__PURE__ */ jsx23(FileText, { size: 14 }),
+                /* @__PURE__ */ jsx24(FileText, { size: 14 }),
                 "PDF"
               ]
             }
           ),
-          /* @__PURE__ */ jsxs17(
+          /* @__PURE__ */ jsxs18(
             "button",
             {
               onClick: () => {
@@ -2353,7 +2389,7 @@ var GridHeader = ({
               },
               className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted cursor-pointer",
               children: [
-                /* @__PURE__ */ jsx23(FileSpreadsheet, { size: 14 }),
+                /* @__PURE__ */ jsx24(FileSpreadsheet, { size: 14 }),
                 "Excel"
               ]
             }
@@ -2361,20 +2397,20 @@ var GridHeader = ({
         ] })
       ] })
     ] }),
-    search && /* @__PURE__ */ jsx23("div", { className: "relative h-[40px] flex items-center", children: /* @__PURE__ */ jsx23(
+    search && /* @__PURE__ */ jsx24("div", { className: "relative h-[40px] flex items-center", children: /* @__PURE__ */ jsx24(
       "div",
       {
-        className: `absolute right-0 flex items-center transition-all duration-200 ${searchOpen ? "w-[250px]" : "w-[40px]"} h-[40px]`,
-        children: !searchOpen ? /* @__PURE__ */ jsx23(
+        className: `absolute md:right-0 flex items-center transition-all duration-200 ${searchOpen ? "w-[250px]" : "w-[40px]"} h-[40px]`,
+        children: !searchOpen ? /* @__PURE__ */ jsx24(
           "button",
           {
             onClick: () => setSearchOpen(true),
             className: "w-[40px] h-[40px] flex items-center justify-center rounded-md hover:bg-input cursor-pointer",
-            children: /* @__PURE__ */ jsx23(Search, { size: 18 })
+            children: /* @__PURE__ */ jsx24(Search, { size: 18 })
           }
-        ) : /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2 w-full h-full px-3 rounded-md border border-input bg-background", children: [
-          /* @__PURE__ */ jsx23(Search, { size: 16 }),
-          /* @__PURE__ */ jsx23(
+        ) : /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2 w-full h-full px-3 rounded-md border border-input bg-background", children: [
+          /* @__PURE__ */ jsx24(Search, { size: 16 }),
+          /* @__PURE__ */ jsx24(
             "input",
             {
               autoFocus: true,
@@ -2384,12 +2420,12 @@ var GridHeader = ({
               value: searchValue
             }
           ),
-          /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx24(
             "button",
             {
               onClick: () => setSearchOpen(false),
               className: "cursor-pointer",
-              children: /* @__PURE__ */ jsx23(X2, { size: 16 })
+              children: /* @__PURE__ */ jsx24(X3, { size: 16 })
             }
           )
         ] })
@@ -2400,7 +2436,7 @@ var GridHeader = ({
 var gridHeader_default = GridHeader;
 
 // src/components/custom/grid/index.tsx
-import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 var Grid = forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -2430,8 +2466,8 @@ var Grid = forwardRef(
       "onFilterChange",
       "initialFilters"
     ]);
-    const apiRef = useRef2(null);
-    const containerRef = useRef2(null);
+    const apiRef = useRef3(null);
+    const containerRef = useRef3(null);
     useImperativeHandle(ref, () => apiRef.current, []);
     const resizeColumns = useCallback2(() => {
       var _a2;
@@ -2463,7 +2499,7 @@ var Grid = forwardRef(
         });
       }
     }, [columns, data]);
-    useEffect6(() => {
+    useEffect7(() => {
       if (!containerRef.current) return;
       const observer = new ResizeObserver(() => {
         resizeColumns();
@@ -2502,8 +2538,8 @@ var Grid = forwardRef(
         onExportExcel == null ? void 0 : onExportExcel();
       }
     }, [getSelectedData, exportExcel, onExportExcel, fileName]);
-    return /* @__PURE__ */ jsxs18("div", { className: "w-full h-full flex flex-col overflow-hidden", children: [
-      /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsxs19("div", { className: "w-full h-full flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsx25(
         gridHeader_default,
         {
           onPdf: handleExportPdf,
@@ -2518,7 +2554,7 @@ var Grid = forwardRef(
           initialFilters
         }
       ),
-      /* @__PURE__ */ jsx24("div", { className: "flex-1 w-full overflow-hidden", ref: containerRef, children: /* @__PURE__ */ jsx24(WillowDark, { fonts, children: /* @__PURE__ */ jsx24("div", { className: "w-full h-full relative", children: rest.loading ? /* @__PURE__ */ jsx24("div", { className: "absolute inset-0 bg-background/60 backdrop-blur-sm flex items-center justify-center z-10", children: /* @__PURE__ */ jsx24("div", { className: "animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent" }) }) : /* @__PURE__ */ jsx24(
+      /* @__PURE__ */ jsx25("div", { className: "flex-1 w-full overflow-hidden", ref: containerRef, children: /* @__PURE__ */ jsx25(WillowDark, { fonts, children: /* @__PURE__ */ jsx25("div", { className: "w-full h-full relative", children: rest.loading ? /* @__PURE__ */ jsx25("div", { className: "absolute inset-0 bg-background/60 backdrop-blur-sm flex items-center justify-center z-10", children: /* @__PURE__ */ jsx25("div", { className: "animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent" }) }) : /* @__PURE__ */ jsx25(
         SvarGrid,
         __spreadProps(__spreadValues({}, rest), {
           data,
@@ -2534,9 +2570,9 @@ var grid_default = Grid;
 
 // src/components/custom/grid/sortableHeaderCell.tsx
 import { MoveDown, MoveUp, ArrowUpDown } from "lucide-react";
-import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }) {
-  if (!(cell == null ? void 0 : cell.id)) return /* @__PURE__ */ jsx25("span", { children: cell == null ? void 0 : cell.text });
+  if (!(cell == null ? void 0 : cell.id)) return /* @__PURE__ */ jsx26("span", { children: cell == null ? void 0 : cell.text });
   const active = sortKey === cell.id;
   const handleClick = () => {
     if (!onSortChange || !cell.id) return;
@@ -2550,15 +2586,15 @@ function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }) {
     }
     onSortChange("", null);
   };
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     "div",
     {
       onClick: handleClick,
       className: "cursor-pointer flex items-center gap-2 justify-between select-none",
       children: [
-        /* @__PURE__ */ jsx25("span", { children: cell.text }),
-        !active && /* @__PURE__ */ jsx25(ArrowUpDown, { className: "w-4 h-4 opacity-50" }),
-        active && (sortOrder === "asc" ? /* @__PURE__ */ jsx25(MoveDown, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx25(MoveUp, { className: "w-4 h-4" }))
+        /* @__PURE__ */ jsx26("span", { children: cell.text }),
+        !active && /* @__PURE__ */ jsx26(ArrowUpDown, { className: "w-4 h-4 opacity-50" }),
+        active && (sortOrder === "asc" ? /* @__PURE__ */ jsx26(MoveDown, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx26(MoveUp, { className: "w-4 h-4" }))
       ]
     }
   );
@@ -2597,7 +2633,7 @@ function getPaginationRange(currentPage, totalPages, siblingCount = 2) {
 
 // src/components/custom/pagination/index.tsx
 import { ChevronLeft, ChevronRight as ChevronRight3 } from "lucide-react";
-import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 function Pagination({
   totalCount,
   count = null,
@@ -2618,47 +2654,47 @@ function Pagination({
   const handlePageSizeChange = (size) => {
     onPageSizeChange == null ? void 0 : onPageSizeChange(size);
   };
-  return /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between bg-card px-3 py-2 rounded-br-md rounded-bl-md", children: [
-    /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-3 text-xs text-muted-foreground tracking-wider font-medium", children: [
-      /* @__PURE__ */ jsxs20("span", { children: [
+  return /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-between bg-card px-3 py-2 rounded-br-md rounded-bl-md", children: [
+    /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-3 text-xs text-muted-foreground tracking-wider font-medium", children: [
+      /* @__PURE__ */ jsxs21("span", { children: [
         "Showing ",
-        /* @__PURE__ */ jsx26("span", { className: "text-foreground", children: count }),
+        /* @__PURE__ */ jsx27("span", { className: "text-foreground", children: count }),
         " of",
         " ",
-        /* @__PURE__ */ jsx26("span", { className: "text-foreground", children: totalCount })
+        /* @__PURE__ */ jsx27("span", { className: "text-foreground", children: totalCount })
       ] }),
-      showSizeChanger && /* @__PURE__ */ jsx26(
+      showSizeChanger && /* @__PURE__ */ jsx27(
         "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__ */ jsxs20("option", { value: size, children: [
+          children: sizeChangerOptions.map((size) => /* @__PURE__ */ jsxs21("option", { value: size, children: [
             size,
             " / page"
           ] }, size))
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx27(
         "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__ */ jsx26(ChevronLeft, { className: "w-5 h-5 select-none" })
+          children: /* @__PURE__ */ jsx27(ChevronLeft, { className: "w-5 h-5 select-none" })
         }
       ),
       pages.map(
-        (page, idx) => page === "dots" ? /* @__PURE__ */ jsx26(
+        (page, idx) => page === "dots" ? /* @__PURE__ */ jsx27(
           "span",
           {
             className: "px-2 text-muted-foreground text-xs tracking-wider font-medium",
             children: "\u2026"
           },
           `dots-${idx}`
-        ) : /* @__PURE__ */ jsx26(
+        ) : /* @__PURE__ */ jsx27(
           "button",
           {
             onClick: () => handlePageChange(page),
@@ -2668,13 +2704,13 @@ function Pagination({
           page
         )
       ),
-      /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsx27(
         "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__ */ jsx26(ChevronRight3, { className: "w-5 h-5 select-none" })
+          children: /* @__PURE__ */ jsx27(ChevronRight3, { className: "w-5 h-5 select-none" })
         }
       )
     ] })