baaz-custom-components 5.0.23 → 5.0.26

package/dist/index.mjs

@@ -1909,7 +1909,13 @@ var CustomBreadcrumb = ({
 var breadcrumb_default = CustomBreadcrumb;
 
 // src/components/custom/grid/index.tsx
-import { useCallback as useCallback2, useRef as useRef2, useImperativeHandle, forwardRef } from "react";
+import {
+  useCallback as useCallback2,
+  useRef as useRef2,
+  useImperativeHandle,
+  forwardRef,
+  useEffect as useEffect6
+} from "react";
 import { Grid as SvarGrid, WillowDark } from "@svar-ui/react-grid";
 
 // src/utils/exportPdf.ts
@@ -1943,7 +1949,7 @@ function exportExcel(rows, name) {
 }
 
 // src/components/custom/grid/gridHeader.tsx
-import { useEffect as useEffect5, useRef, useState as useState6 } from "react";
+import { useEffect as useEffect5, useRef, useState as useState6, useMemo as useMemo3 } from "react";
 import {
   FileText,
   FileSpreadsheet,
@@ -1952,7 +1958,8 @@ import {
   Ellipsis,
   X as X2,
   Plus,
-  Trash2
+  Trash2,
+  Check
 } from "lucide-react";
 import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 var GridHeader = ({
@@ -1965,7 +1972,8 @@ var GridHeader = ({
   searchValue,
   searchkey = "",
   filterList,
-  onFilterChange
+  onFilterChange,
+  initialFilters = []
 }) => {
   const [downloadMenu, setDownloadMenu] = useState6(false);
   const [filterMenu, setFilterMenu] = useState6(false);
@@ -1974,17 +1982,29 @@ var GridHeader = ({
   const downloadRef = useRef(null);
   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();
-    const overflowRight = rect.right > window.innerWidth;
-    const overflowBottom = rect.bottom > window.innerHeight;
-    if (overflowRight) {
+    if (rect.right > window.innerWidth) {
       dropdown.style.left = "auto";
       dropdown.style.right = "0";
     }
-    if (overflowBottom) {
+    if (rect.bottom > window.innerHeight) {
       dropdown.style.top = "auto";
       dropdown.style.bottom = "100%";
       dropdown.style.marginBottom = "8px";
@@ -2002,17 +2022,44 @@ var GridHeader = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  useEffect5(() => {
-    onFilterChange == null ? void 0 : onFilterChange({
-      conditions
-    });
+  const isValidFilter = (condition) => {
+    if (!condition.column || !condition.operator) return false;
+    if (condition.operator === "date-range") {
+      const rangeValue = condition.value;
+      return !!((rangeValue == null ? void 0 : rangeValue.start) && (rangeValue == null ? void 0 : rangeValue.end));
+    }
+    return condition.value !== void 0 && condition.value !== "";
+  };
+  const allFiltersValid = useMemo3(() => {
+    if (conditions.length === 0) return false;
+    return conditions.every(isValidFilter);
   }, [conditions]);
+  const activeFilterCount = (initialFilters == null ? void 0 : initialFilters.length) || 0;
+  const formatFiltersForApi = (conditions2) => {
+    return conditions2.filter(isValidFilter).map(({ column, operator, value, logic }, index) => ({
+      column,
+      operator,
+      value,
+      logic: index === 0 ? "WHERE" : logic != null ? logic : "AND"
+    }));
+  };
+  const hasChangesFromInitial = useMemo3(() => {
+    if (conditions.length === 0 && activeFilterCount === 0) return false;
+    if (conditions.length !== activeFilterCount) return true;
+    const formatted = formatFiltersForApi(conditions);
+    const initialFormatted = initialFilters || [];
+    if (formatted.length !== initialFormatted.length) return true;
+    return JSON.stringify(formatted) !== JSON.stringify(initialFormatted);
+  }, [conditions, initialFilters, activeFilterCount]);
+  const canApply = useMemo3(() => {
+    return allFiltersValid && hasChangesFromInitial;
+  }, [allFiltersValid, hasChangesFromInitial]);
   const addCondition = () => {
     setConditions((prev) => [
       ...prev,
       {
         id: crypto.randomUUID(),
-        logic: prev.length === 0 ? void 0 : "AND"
+        logic: prev.length === 0 ? "WHERE" : "AND"
       }
     ]);
   };
@@ -2022,22 +2069,48 @@ var GridHeader = ({
     );
   };
   const deleteCondition = (id) => {
-    setConditions((prev) => prev.filter((c) => c.id !== id));
+    const updatedConditions = conditions.filter((c) => c.id !== id);
+    setConditions(updatedConditions);
+    if (updatedConditions.length === 0) {
+      setFilterMenu(false);
+      onFilterChange == null ? void 0 : onFilterChange({
+        conditions: [],
+        formatted: [],
+        action: "clear"
+      });
+    }
+  };
+  const applyFilters = () => {
+    if (!canApply) return;
+    const formatted = formatFiltersForApi(conditions);
+    onFilterChange == null ? void 0 : onFilterChange({
+      conditions: conditions.filter(isValidFilter),
+      formatted,
+      action: "apply"
+    });
+    setFilterMenu(false);
   };
   const clearFilters = () => {
     setConditions([]);
+    setFilterMenu(false);
+    onFilterChange == null ? void 0 : onFilterChange({
+      conditions: [],
+      formatted: [],
+      action: "clear"
+    });
   };
-  return /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-between bg-card py-2 px-4", children: [
+  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",
+            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"
+              "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 })
             ]
           }
         ),
@@ -2053,16 +2126,20 @@ var GridHeader = ({
                   "button",
                   {
                     onClick: clearFilters,
-                    className: "p-2 rounded-md hover:bg-destructive/30",
+                    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;
+                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",
                   {
@@ -2077,8 +2154,8 @@ var GridHeader = ({
                           }),
                           className: "w-full px-2 py-2 rounded-md bg-input text-sm",
                           children: [
-                            /* @__PURE__ */ jsx23("option", { value: "AND", children: "and" }),
-                            /* @__PURE__ */ jsx23("option", { value: "OR", children: "or" })
+                            /* @__PURE__ */ jsx23("option", { value: "AND", children: "AND" }),
+                            /* @__PURE__ */ jsx23("option", { value: "OR", children: "OR" })
                           ]
                         }
                       ) }),
@@ -2093,7 +2170,7 @@ var GridHeader = ({
                           }),
                           className: "flex-1 min-w-0 px-3 py-2 rounded-md bg-input text-sm",
                           children: [
-                            /* @__PURE__ */ jsx23("option", { value: "", children: "Column" }),
+                            /* @__PURE__ */ jsx23("option", { value: "", disabled: true, children: "Column" }),
                             filterList.map((f) => /* @__PURE__ */ jsx23(
                               "option",
                               {
@@ -2114,29 +2191,91 @@ var GridHeader = ({
                             operator: e.target.value,
                             value: void 0
                           }),
-                          className: "flex-1 min-w-0 px-3 py-2 rounded-md bg-input text-sm",
+                          className: "flex-1 min-w-0 px-3 py-2 rounded-md bg-input text-sm disabled:opacity-50 disabled:cursor-not-allowed",
                           children: [
-                            /* @__PURE__ */ jsx23("option", { value: "", children: "Operator" }),
-                            selectedColumn == null ? void 0 : selectedColumn.operators.map((op) => /* @__PURE__ */ jsx23("option", { value: op.label, children: op.label }, op.label))
+                            /* @__PURE__ */ jsx23("option", { value: "", disabled: true, children: "Operator" }),
+                            selectedColumn == null ? void 0 : selectedColumn.operators.map((op) => {
+                              var _a2;
+                              return /* @__PURE__ */ jsx23("option", { value: (_a2 = op.value) != null ? _a2 : "", children: op.label }, op.value);
+                            })
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsx23(
-                        "input",
-                        {
-                          value: (_d = condition.value) != null ? _d : "",
-                          onChange: (e) => updateCondition(condition.id, {
-                            value: e.target.value
-                          }),
-                          placeholder: "Enter value",
-                          className: "flex-1 min-w-0 px-3 py-2 rounded-md bg-input text-sm"
-                        }
-                      ),
+                      /* @__PURE__ */ jsxs17("div", { className: "flex-1 min-w-0", children: [
+                        (selectedOperator == null ? void 0 : selectedOperator.value) === "input" && /* @__PURE__ */ jsx23(
+                          "input",
+                          {
+                            value: (_d = condition.value) != null ? _d : "",
+                            onChange: (e) => updateCondition(condition.id, {
+                              value: e.target.value
+                            }),
+                            placeholder: "Enter value",
+                            className: "w-full px-3 py-2 rounded-md bg-input text-sm"
+                          }
+                        ),
+                        (selectedOperator == null ? void 0 : selectedOperator.value) === "select" && /* @__PURE__ */ jsxs17(
+                          "select",
+                          {
+                            value: (_e = condition.value) != null ? _e : "",
+                            onChange: (e) => updateCondition(condition.id, {
+                              value: e.target.value
+                            }),
+                            className: "w-full px-3 py-2 rounded-md bg-input text-sm",
+                            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))
+                            ]
+                          }
+                        ),
+                        (selectedOperator == null ? void 0 : selectedOperator.value) === "date" && /* @__PURE__ */ jsx23(
+                          "input",
+                          {
+                            type: "date",
+                            value: (_g = condition.value) != null ? _g : "",
+                            onChange: (e) => updateCondition(condition.id, {
+                              value: e.target.value
+                            }),
+                            className: "w-full px-3 py-2 rounded-md bg-input text-sm"
+                          }
+                        ),
+                        (selectedOperator == null ? void 0 : selectedOperator.value) === "date-range" && /* @__PURE__ */ jsxs17("div", { className: "flex gap-2", children: [
+                          /* @__PURE__ */ jsx23(
+                            "input",
+                            {
+                              type: "date",
+                              value: (_i = (_h = condition.value) == null ? void 0 : _h.start) != null ? _i : "",
+                              onChange: (e) => updateCondition(condition.id, {
+                                value: __spreadProps(__spreadValues({}, condition.value), {
+                                  start: e.target.value
+                                })
+                              }),
+                              placeholder: "Start date",
+                              className: "w-full px-3 py-2 rounded-md bg-input text-sm"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx23(
+                            "input",
+                            {
+                              type: "date",
+                              value: (_k = (_j = condition.value) == null ? void 0 : _j.end) != null ? _k : "",
+                              onChange: (e) => updateCondition(condition.id, {
+                                value: __spreadProps(__spreadValues({}, condition.value), {
+                                  end: e.target.value
+                                })
+                              }),
+                              placeholder: "End date",
+                              className: "w-full px-3 py-2 rounded-md bg-input text-sm"
+                            }
+                          )
+                        ] }),
+                        !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(
                         "button",
                         {
                           onClick: () => deleteCondition(condition.id),
-                          className: "p-2 rounded-md hover:bg-destructive/30",
+                          className: "p-2 rounded-md hover:bg-destructive/30 cursor-pointer",
+                          title: "Delete condition",
                           children: /* @__PURE__ */ jsx23(Trash2, { size: 16 })
                         }
                       ) })
@@ -2145,17 +2284,38 @@ var GridHeader = ({
                   condition.id
                 );
               }) }),
-              /* @__PURE__ */ jsxs17(
-                "button",
-                {
-                  onClick: addCondition,
-                  className: "flex items-center gap-2 text-sm text-primary",
-                  children: [
-                    /* @__PURE__ */ jsx23(Plus, { size: 14 }),
-                    "Add condition"
-                  ]
-                }
-              )
+              /* @__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"
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
             ]
           }
         )
@@ -2165,11 +2325,11 @@ var GridHeader = ({
           "button",
           {
             onClick: () => setDownloadMenu((p) => !p),
-            className: "p-2 rounded-md hover:bg-input",
+            className: "p-2 rounded-md hover:bg-input cursor-pointer",
             children: /* @__PURE__ */ jsx23(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", children: [
+        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(
             "button",
             {
@@ -2177,7 +2337,7 @@ var GridHeader = ({
                 onPdf == null ? void 0 : onPdf();
                 setDownloadMenu(false);
               },
-              className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted",
+              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 }),
                 "PDF"
@@ -2191,7 +2351,7 @@ var GridHeader = ({
                 onExcel == null ? void 0 : onExcel();
                 setDownloadMenu(false);
               },
-              className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted",
+              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 }),
                 "Excel"
@@ -2209,7 +2369,7 @@ var GridHeader = ({
           "button",
           {
             onClick: () => setSearchOpen(true),
-            className: "w-[40px] h-[40px] flex items-center justify-center rounded-md hover:bg-input",
+            className: "w-[40px] h-[40px] flex items-center justify-center rounded-md hover:bg-input cursor-pointer",
             children: /* @__PURE__ */ jsx23(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: [
@@ -2224,7 +2384,14 @@ var GridHeader = ({
               value: searchValue
             }
           ),
-          /* @__PURE__ */ jsx23("button", { onClick: () => setSearchOpen(false), children: /* @__PURE__ */ jsx23(X2, { size: 16 }) })
+          /* @__PURE__ */ jsx23(
+            "button",
+            {
+              onClick: () => setSearchOpen(false),
+              className: "cursor-pointer",
+              children: /* @__PURE__ */ jsx23(X2, { size: 16 })
+            }
+          )
         ] })
       }
     ) })
@@ -2247,7 +2414,8 @@ var Grid = forwardRef(
       downloadable = true,
       fileName,
       fonts,
-      onFilterChange
+      onFilterChange,
+      initialFilters
     } = _b, rest = __objRest(_b, [
       "data",
       "columns",
@@ -2259,7 +2427,8 @@ var Grid = forwardRef(
       "downloadable",
       "fileName",
       "fonts",
-      "onFilterChange"
+      "onFilterChange",
+      "initialFilters"
     ]);
     const apiRef = useRef2(null);
     const containerRef = useRef2(null);
@@ -2294,6 +2463,14 @@ var Grid = forwardRef(
         });
       }
     }, [columns, data]);
+    useEffect6(() => {
+      if (!containerRef.current) return;
+      const observer = new ResizeObserver(() => {
+        resizeColumns();
+      });
+      observer.observe(containerRef.current);
+      return () => observer.disconnect();
+    }, [resizeColumns]);
     const init = useCallback2(
       (api) => {
         apiRef.current = api;
@@ -2337,7 +2514,8 @@ var Grid = forwardRef(
           onSearch: rest.onSearch,
           searchValue: rest.searchValue,
           filterList: rest.filterList,
-          onFilterChange
+          onFilterChange,
+          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(
@@ -2440,7 +2618,7 @@ 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", children: [
+  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: [
         "Showing ",