@juv/codego-react-ui 3.4.8 → 3.5.0

package/dist/index.global.js

@@ -69638,7 +69638,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
   var React28 = __toESM(require_react(), 1);
   var import_react_dom2 = __toESM(require_react_dom(), 1);
   var import_jsx_runtime32 = __toESM(require_jsx_runtime(), 1);
-  function useServerTable({ url: url2, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce = 300, transform, manual = false, refresh: refreshEnabled = false, refreshInterval = 0, hardReload, onSuccess, onError }) {
+  function useServerTable({ url: url2, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce = 300, transform, manual = false, refresh: refreshEnabled = false, refreshInterval = 0, hardReload, onSuccess, onError, filter: filterFields, sort: sortKeys }) {
     const [data, setData] = React28.useState([]);
     const [columns, setColumns] = React28.useState([]);
     const [currentPage, setCurrentPage] = React28.useState(1);
@@ -69648,6 +69648,15 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     const [tick, setTick] = React28.useState(0);
     const [searchValue, setSearchValue] = React28.useState("");
     const debounceTimer = React28.useRef(void 0);
+    const [filterValues, setFilterValues] = React28.useState(() => {
+      const init = {};
+      filterFields?.forEach((f) => {
+        init[f.key] = f.type === "checkbox" || f.type === "toggle" ? false : "";
+      });
+      return init;
+    });
+    const [sortKey, setSortKey] = React28.useState("");
+    const [sortDir, setSortDir] = React28.useState("asc");
     React28.useEffect(() => {
       if (hardReload) hardReload.current = () => setTick((t) => t + 1);
     }, [hardReload]);
@@ -69656,13 +69665,32 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       const id = setInterval(() => setTick((t) => t + 1), refreshInterval);
       return () => clearInterval(id);
     }, [refreshInterval]);
+    const activeFilterParams = React28.useMemo(() => {
+      const out = {};
+      filterFields?.forEach((f) => {
+        const v = filterValues[f.key];
+        if (f.type === "checkbox" || f.type === "toggle") {
+          if (v) out[f.key] = 1;
+        } else if (f.type === "date-range") {
+          if (v?.from) out[`${f.key}_from`] = v.from;
+          if (v?.to) out[`${f.key}_to`] = v.to;
+        } else if (v !== "" && v !== null && v !== void 0) {
+          out[f.key] = v;
+        }
+      });
+      if (sortKey) {
+        out.sort = sortKey;
+        out.direction = sortDir;
+      }
+      return out;
+    }, [filterValues, sortKey, sortDir, filterFields]);
     React28.useEffect(() => {
       if (manual && tick === 0) return;
       let cancelled = false;
       setLoading(true);
       setError(null);
       axios_default.get(url2, {
-        params: { ...params, page: currentPage, search: searchValue }
+        params: { ...params, ...activeFilterParams, page: currentPage, search: searchValue }
       }).then(({ data: res }) => {
         if (cancelled) return;
         const payload = encrypt ? decryptLaravelPayload(res, key) : res;
@@ -69708,15 +69736,184 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       return () => {
         cancelled = true;
       };
-    }, [url2, currentPage, tick, JSON.stringify(params), encrypt, decryptPayloadLog, JSON.stringify(columnOverrides), searchValue]);
+    }, [url2, currentPage, tick, JSON.stringify(params), JSON.stringify(activeFilterParams), encrypt, decryptPayloadLog, JSON.stringify(columnOverrides), searchValue]);
     const handleSearchChange = (value) => {
       setSearchValue(value);
       setCurrentPage(1);
       if (debounceTimer.current) clearTimeout(debounceTimer.current);
-      debounceTimer.current = setTimeout(() => {
-        setTick((t) => t + 1);
-      }, debounce);
+      debounceTimer.current = setTimeout(() => setTick((t) => t + 1), debounce);
+    };
+    const handleFilterChange = (key2, value) => {
+      setFilterValues((prev) => ({ ...prev, [key2]: value }));
+      setCurrentPage(1);
+      setTick((t) => t + 1);
+    };
+    const handleClearFilters = () => {
+      const reset = {};
+      filterFields?.forEach((f) => {
+        reset[f.key] = f.type === "checkbox" || f.type === "toggle" ? false : "";
+      });
+      setFilterValues(reset);
+      setSortKey("");
+      setSortDir("asc");
+      setCurrentPage(1);
+      setTick((t) => t + 1);
     };
+    const hasActiveFilters = filterFields?.some((f) => {
+      const v = filterValues[f.key];
+      return f.type === "checkbox" || f.type === "toggle" ? !!v : v !== "" && v !== null && v !== void 0;
+    }) || !!sortKey;
+    const filterBar = filterFields?.length || sortKeys?.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-wrap items-end gap-3 rounded-xl border border-border bg-muted/30 px-4 py-3", children: [
+      filterFields?.map((f) => {
+        const label = f.label ?? f.key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+        const value = filterValues[f.key];
+        const opts = (f.options ?? []).map(
+          (o) => typeof o === "string" ? { label: o, value: o } : o
+        );
+        if (f.type === "checkbox") return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              checked: !!value,
+              onChange: (e) => handleFilterChange(f.key, e.target.checked),
+              className: "h-4 w-4 rounded accent-primary"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xs font-medium text-foreground", children: label })
+        ] }, f.key);
+        if (f.type === "toggle") return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "button",
+            {
+              type: "button",
+              role: "switch",
+              "aria-checked": !!value,
+              onClick: () => handleFilterChange(f.key, !value),
+              className: cn(
+                "relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors",
+                value ? "bg-primary" : "bg-muted"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: cn(
+                "pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform",
+                value ? "translate-x-4" : "translate-x-0"
+              ) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xs font-medium text-foreground", children: label })
+        ] }, f.key);
+        if (f.type === "select") return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+            "select",
+            {
+              value: value ?? "",
+              onChange: (e) => handleFilterChange(f.key, e.target.value),
+              className: "h-8 min-w-[120px] rounded-lg border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-colors",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("option", { value: "", children: f.placeholder ?? `All ${label}` }),
+                opts.map((o) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("option", { value: o.value, children: o.label }, o.value))
+              ]
+            }
+          )
+        ] }, f.key);
+        if (f.type === "date" || f.type === "date-time") return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "input",
+            {
+              type: f.type === "date-time" ? "datetime-local" : "date",
+              value: value ?? "",
+              onChange: (e) => handleFilterChange(f.key, e.target.value),
+              className: "h-8 rounded-lg border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-colors"
+            }
+          )
+        ] }, f.key);
+        if (f.type === "date-range") return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              "input",
+              {
+                type: "date",
+                value: value?.from ?? "",
+                onChange: (e) => handleFilterChange(f.key, { ...value, from: e.target.value }),
+                className: "h-8 rounded-lg border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-colors"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xs text-muted-foreground", children: "\u2013" }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              "input",
+              {
+                type: "date",
+                value: value?.to ?? "",
+                onChange: (e) => handleFilterChange(f.key, { ...value, to: e.target.value }),
+                className: "h-8 rounded-lg border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-colors"
+              }
+            )
+          ] })
+        ] }, f.key);
+        return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "input",
+            {
+              type: "text",
+              value: value ?? "",
+              placeholder: f.placeholder ?? `Filter ${label}\u2026`,
+              onChange: (e) => handleFilterChange(f.key, e.target.value),
+              className: "h-8 min-w-[140px] rounded-lg border border-border bg-background px-3 text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-colors"
+            }
+          )
+        ] }, f.key);
+      }),
+      sortKeys?.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Sort by" }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+            "select",
+            {
+              value: sortKey,
+              onChange: (e) => {
+                setSortKey(e.target.value);
+                setCurrentPage(1);
+                setTick((t) => t + 1);
+              },
+              className: "h-8 min-w-[120px] rounded-lg border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-colors",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("option", { value: "", children: "Default" }),
+                sortKeys.map((k) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("option", { value: k, children: k.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()) }, k))
+              ]
+            }
+          ),
+          sortKey && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setSortDir((d) => d === "asc" ? "desc" : "asc");
+                setTick((t) => t + 1);
+              },
+              className: "flex h-8 w-8 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+              title: sortDir === "asc" ? "Ascending" : "Descending",
+              children: sortDir === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevronUp, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevronDown, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] })
+      ] }) : null,
+      hasActiveFilters && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: handleClearFilters,
+          className: "flex h-8 items-center gap-1.5 self-end rounded-lg border border-border bg-background px-3 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(X, { className: "h-3 w-3" }),
+            " Clear"
+          ]
+        }
+      )
+    ] }) : null;
     return {
       data,
       columns,
@@ -69725,6 +69922,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       serverPagination: pagination ? { pagination, currentPage, goToPage: (page) => setCurrentPage(page) } : null,
       loading,
       error,
+      filterBar,
       goToPage: (page) => setCurrentPage(page),
       reload: () => setTick((t) => t + 1),
       refresh: () => setTick((t) => t + 1),
@@ -70434,6 +70632,9 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     renderExpanded,
     columnVisibility,
     onColumnVisibilityChange,
+    columnVisibilityIcon,
+    filterBar,
+    filterableIcon,
     exportable = false,
     onExport,
     virtualized = false,
@@ -70454,6 +70655,8 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     const [sortKey, setSortKey] = React28.useState(null);
     const [sortDir, setSortDir] = React28.useState(null);
     const [bulkLoading, setBulkLoading] = React28.useState(false);
+    const [bulkConfirm, setBulkConfirm] = React28.useState(null);
+    const [filterBarOpen, setFilterBarOpen] = React28.useState(false);
     const [expandedIds, setExpandedIds] = React28.useState(/* @__PURE__ */ new Set());
     const [dragOverId, setDragOverId] = React28.useState(null);
     const [focusedRowIdx, setFocusedRowIdx] = React28.useState(-1);
@@ -70590,7 +70793,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     const unselectedCount = totalRows - selectedIds.length;
     const handleSelectAllRecords = () => setSelectedIds(filteredData.map((item) => String(item[idKey])));
     const handleUnselectAll = () => setSelectedIds([]);
-    const handleBulkDeleteSelected = async () => {
+    const execBulkDeleteSelected = async () => {
       if (!bulkDeleteBaseUrl || selectedIds.length === 0) {
         onBulkDelete?.(selectedIds);
         setSelectedIds([]);
@@ -70612,7 +70815,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
         setBulkLoading(false);
       }
     };
-    const handleDeleteAll = async () => {
+    const execDeleteAll = async () => {
       if (!bulkDeleteBaseUrl) return;
       setBulkLoading(true);
       try {
@@ -70679,10 +70882,22 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
                   ]
                 }
               ),
+              unselectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+                "button",
+                {
+                  onClick: handleSelectAllRecords,
+                  disabled: bulkLoading,
+                  className: "inline-flex items-center gap-1.5 rounded-lg border border-border bg-muted/50 px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-muted transition-colors disabled:opacity-40",
+                  children: [
+                    "Select all ",
+                    unselectedCount
+                  ]
+                }
+              ),
               /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                 "button",
                 {
-                  onClick: handleBulkDeleteSelected,
+                  onClick: () => setBulkConfirm("selected"),
                   disabled: bulkLoading,
                   className: "inline-flex items-center gap-1.5 rounded-lg bg-danger/10 border border-danger/20 px-3 py-1.5 text-xs font-medium text-danger hover:bg-danger/20 transition-colors disabled:opacity-40",
                   children: [
@@ -70692,30 +70907,29 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
                     " selected"
                   ]
                 }
+              ),
+              bulkDeleteBaseUrl && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+                "button",
+                {
+                  onClick: () => setBulkConfirm("all"),
+                  disabled: bulkLoading,
+                  className: "inline-flex items-center gap-1.5 rounded-lg bg-danger/10 border border-danger/20 px-3 py-1.5 text-xs font-medium text-danger hover:bg-danger/20 transition-colors disabled:opacity-40",
+                  children: [
+                    bulkLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Trash2, { className: "h-3.5 w-3.5" }),
+                    "Delete all"
+                  ]
+                }
               )
             ] }),
-            selectable && unselectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-              "button",
-              {
-                onClick: handleSelectAllRecords,
-                disabled: bulkLoading,
-                className: "inline-flex items-center gap-1.5 rounded-lg border border-border bg-muted/50 px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-muted transition-colors disabled:opacity-40",
-                children: [
-                  "Select all ",
-                  unselectedCount
-                ]
-              }
-            ),
-            selectable && bulkDeleteBaseUrl && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+            filterBar && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               "button",
               {
-                onClick: handleDeleteAll,
-                disabled: bulkLoading,
-                className: "inline-flex items-center gap-1.5 rounded-lg bg-danger/10 border border-danger/20 px-3 py-1.5 text-xs font-medium text-danger hover:bg-danger/20 transition-colors disabled:opacity-40",
-                children: [
-                  bulkLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Trash2, { className: "h-3.5 w-3.5" }),
-                  "Delete all"
-                ]
+                onClick: () => setFilterBarOpen((o) => !o),
+                className: cn(
+                  "inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors",
+                  filterBarOpen ? "border-primary bg-primary/10 text-primary hover:bg-primary/20" : "border-border bg-muted/50 text-muted-foreground hover:bg-muted"
+                ),
+                children: filterableIcon ?? "Filter"
               }
             ),
             exportable && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative group", children: [
@@ -70731,7 +70945,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
               )) })
             ] }),
             columnVisibility && onColumnVisibilityChange && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative group", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { className: "inline-flex items-center gap-1.5 rounded-lg border border-border bg-muted/50 px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-muted transition-colors", children: "Columns" }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { className: "inline-flex items-center gap-1.5 rounded-lg border border-border bg-muted/50 px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-muted transition-colors", children: columnVisibilityIcon ?? "Columns" }),
               /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "absolute right-0 top-full mt-1 z-20 hidden group-hover:flex flex-col min-w-[150px] rounded-xl border border-border bg-card shadow-lg overflow-hidden p-2 gap-1", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "flex items-center gap-2 px-2 py-1 rounded-lg hover:bg-muted cursor-pointer text-xs", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   "input",
@@ -70753,6 +70967,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
             ] })
           ] })
         ] }),
+        filterBar && filterBarOpen && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: filterBar }),
         loading && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-center py-12 text-muted-foreground gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LoaderCircle, { className: "h-5 w-5 animate-spin" }),
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-sm", children: "Loading\u2026" })
@@ -71146,6 +71361,37 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
             }
           }
         }
+      ),
+      bulkConfirm && (0, import_react_dom2.createPortal)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "div",
+          {
+            className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+            style: { background: "rgba(0,0,0,0.5)" },
+            onMouseDown: (e) => {
+              if (e.target === e.currentTarget) setBulkConfirm(null);
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative w-full max-w-md rounded-2xl border border-border bg-card shadow-2xl flex flex-col", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h2", { className: "text-base font-semibold", children: "Confirm Delete" }),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { onClick: () => setBulkConfirm(null), className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(X, { className: "h-4 w-4" }) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "px-6 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-sm text-muted-foreground", children: bulkConfirm === "selected" ? `Are you sure you want to delete ${selectedIds.length} selected record${selectedIds.length !== 1 ? "s" : ""}? This action cannot be undone.` : "Are you sure you want to delete all records? This action cannot be undone." }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "px-6 py-4 border-t border-border flex justify-end gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { variant: "outline", size: "sm", onClick: () => setBulkConfirm(null), disabled: bulkLoading, children: "Cancel" }),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Button, { variant: "danger", size: "sm", disabled: bulkLoading, onClick: async () => {
+                  if (bulkConfirm === "selected") await execBulkDeleteSelected();
+                  else await execDeleteAll();
+                  setBulkConfirm(null);
+                }, children: [
+                  bulkLoading && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LoaderCircle, { className: "h-3.5 w-3.5 mr-1.5 animate-spin" }),
+                  bulkLoading ? "Deleting\u2026" : "Delete"
+                ] })
+              ] })
+            ] })
+          }
+        ),
+        document.body
       )
     ] });
   }