@juv/codego-react-ui 3.4.8 → 3.5.0

package/dist/index.js

@@ -6359,7 +6359,7 @@ import { createPortal as createPortal3 } from "react-dom";
 import axios3 from "axios";
 import { ChevronLeft as ChevronLeft6, ChevronRight as ChevronRight8, Search as Search5, Trash2 as Trash22, ChevronsUpDown, ChevronUp, ChevronDown as ChevronDown4, X as X9, Eye as Eye2, Pencil as Pencil2, Trash as Trash3, Loader2 as Loader22 } from "lucide-react";
 import { Fragment as Fragment12, jsx as jsx32, jsxs as jsxs30 } from "react/jsx-runtime";
-function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce = 300, transform, manual = false, refresh: refreshEnabled = false, refreshInterval = 0, hardReload, onSuccess, onError }) {
+function useServerTable({ url, 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);
@@ -6369,6 +6369,15 @@ function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOv
   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]);
@@ -6377,13 +6386,32 @@ function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOv
     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);
     axios3.get(url, {
-      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;
@@ -6429,15 +6457,184 @@ function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOv
     return () => {
       cancelled = true;
     };
-  }, [url, currentPage, tick, JSON.stringify(params), encrypt, decryptPayloadLog, JSON.stringify(columnOverrides), searchValue]);
+  }, [url, 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__ */ jsxs30("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__ */ jsxs30("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [
+        /* @__PURE__ */ jsx32(
+          "input",
+          {
+            type: "checkbox",
+            checked: !!value,
+            onChange: (e) => handleFilterChange(f.key, e.target.checked),
+            className: "h-4 w-4 rounded accent-primary"
+          }
+        ),
+        /* @__PURE__ */ jsx32("span", { className: "text-xs font-medium text-foreground", children: label })
+      ] }, f.key);
+      if (f.type === "toggle") return /* @__PURE__ */ jsxs30("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [
+        /* @__PURE__ */ jsx32(
+          "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__ */ jsx32("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__ */ jsx32("span", { className: "text-xs font-medium text-foreground", children: label })
+      ] }, f.key);
+      if (f.type === "select") return /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx32("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsxs30(
+          "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__ */ jsx32("option", { value: "", children: f.placeholder ?? `All ${label}` }),
+              opts.map((o) => /* @__PURE__ */ jsx32("option", { value: o.value, children: o.label }, o.value))
+            ]
+          }
+        )
+      ] }, f.key);
+      if (f.type === "date" || f.type === "date-time") return /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx32("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsx32(
+          "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__ */ jsxs30("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx32("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx32(
+            "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__ */ jsx32("span", { className: "text-xs text-muted-foreground", children: "\u2013" }),
+          /* @__PURE__ */ jsx32(
+            "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__ */ jsxs30("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx32("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsx32(
+          "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__ */ jsxs30("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx32("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Sort by" }),
+      /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxs30(
+          "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__ */ jsx32("option", { value: "", children: "Default" }),
+              sortKeys.map((k) => /* @__PURE__ */ jsx32("option", { value: k, children: k.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()) }, k))
+            ]
+          }
+        ),
+        sortKey && /* @__PURE__ */ jsx32(
+          "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__ */ jsx32(ChevronUp, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx32(ChevronDown4, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] })
+    ] }) : null,
+    hasActiveFilters && /* @__PURE__ */ jsxs30(
+      "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__ */ jsx32(X9, { className: "h-3 w-3" }),
+          " Clear"
+        ]
+      }
+    )
+  ] }) : null;
   return {
     data,
     columns,
@@ -6446,6 +6643,7 @@ function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOv
     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),
@@ -7155,6 +7353,9 @@ function Table({
   renderExpanded,
   columnVisibility,
   onColumnVisibilityChange,
+  columnVisibilityIcon,
+  filterBar,
+  filterableIcon,
   exportable = false,
   onExport,
   virtualized = false,
@@ -7175,6 +7376,8 @@ function Table({
   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);
@@ -7311,7 +7514,7 @@ function Table({
   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([]);
@@ -7333,7 +7536,7 @@ function Table({
       setBulkLoading(false);
     }
   };
-  const handleDeleteAll = async () => {
+  const execDeleteAll = async () => {
     if (!bulkDeleteBaseUrl) return;
     setBulkLoading(true);
     try {
@@ -7400,10 +7603,22 @@ function Table({
                 ]
               }
             ),
+            unselectedCount > 0 && /* @__PURE__ */ jsxs30(
+              "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__ */ jsxs30(
               "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: [
@@ -7413,30 +7628,29 @@ function Table({
                   " selected"
                 ]
               }
+            ),
+            bulkDeleteBaseUrl && /* @__PURE__ */ jsxs30(
+              "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__ */ jsx32(Loader22, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx32(Trash22, { className: "h-3.5 w-3.5" }),
+                  "Delete all"
+                ]
+              }
             )
           ] }),
-          selectable && unselectedCount > 0 && /* @__PURE__ */ jsxs30(
-            "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__ */ jsxs30(
+          filterBar && /* @__PURE__ */ jsx32(
             "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__ */ jsx32(Loader22, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx32(Trash22, { 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__ */ jsxs30("div", { className: "relative group", children: [
@@ -7452,7 +7666,7 @@ function Table({
             )) })
           ] }),
           columnVisibility && onColumnVisibilityChange && /* @__PURE__ */ jsxs30("div", { className: "relative group", children: [
-            /* @__PURE__ */ jsx32("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__ */ jsx32("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__ */ jsx32("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__ */ jsxs30("label", { className: "flex items-center gap-2 px-2 py-1 rounded-lg hover:bg-muted cursor-pointer text-xs", children: [
               /* @__PURE__ */ jsx32(
                 "input",
@@ -7474,6 +7688,7 @@ function Table({
           ] })
         ] })
       ] }),
+      filterBar && filterBarOpen && /* @__PURE__ */ jsx32("div", { children: filterBar }),
       loading && /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-center py-12 text-muted-foreground gap-2", children: [
         /* @__PURE__ */ jsx32(Loader22, { className: "h-5 w-5 animate-spin" }),
         /* @__PURE__ */ jsx32("span", { className: "text-sm", children: "Loading\u2026" })
@@ -7867,6 +8082,37 @@ function Table({
           }
         }
       }
+    ),
+    bulkConfirm && createPortal3(
+      /* @__PURE__ */ jsx32(
+        "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__ */ jsxs30("div", { className: "relative w-full max-w-md rounded-2xl border border-border bg-card shadow-2xl flex flex-col", children: [
+            /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border", children: [
+              /* @__PURE__ */ jsx32("h2", { className: "text-base font-semibold", children: "Confirm Delete" }),
+              /* @__PURE__ */ jsx32("button", { onClick: () => setBulkConfirm(null), className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx32(X9, { className: "h-4 w-4" }) })
+            ] }),
+            /* @__PURE__ */ jsx32("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsx32("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__ */ jsxs30("div", { className: "px-6 py-4 border-t border-border flex justify-end gap-2", children: [
+              /* @__PURE__ */ jsx32(Button, { variant: "outline", size: "sm", onClick: () => setBulkConfirm(null), disabled: bulkLoading, children: "Cancel" }),
+              /* @__PURE__ */ jsxs30(Button, { variant: "danger", size: "sm", disabled: bulkLoading, onClick: async () => {
+                if (bulkConfirm === "selected") await execBulkDeleteSelected();
+                else await execDeleteAll();
+                setBulkConfirm(null);
+              }, children: [
+                bulkLoading && /* @__PURE__ */ jsx32(Loader22, { className: "h-3.5 w-3.5 mr-1.5 animate-spin" }),
+                bulkLoading ? "Deleting\u2026" : "Delete"
+              ] })
+            ] })
+          ] })
+        }
+      ),
+      document.body
     )
   ] });
 }

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "3.4.8",
+  "version": "3.5.0",
   "description": "Reusable React UI components",
   "license": "MIT",
   "main": "dist/index.js",