vasuzex 2.3.12 → 2.3.14

package/frontend/react-ui/components/DataTable/ActionDefaults.jsx

@@ -1,10 +1,10 @@
-import { Eye, Edit2, Trash2 } from "lucide-react";
+import { Eye, Edit2, Trash2, RotateCcw, Flame } from "lucide-react";
 
 /**
  * ActionDefaults - Production Ready
  * 
  * Default configurations for common DataTable actions
- * Provides sensible defaults for edit, view, delete, and switch actions
+ * Provides sensible defaults for edit, view, delete, hardDelete, restore and switch actions
  * Uses lucide-react icons matching RowActionsCell design
  * 
  * @module components/DataTable/ActionDefaults
@@ -35,6 +35,24 @@ export const ACTION_DEFAULTS = {
     extraClass:
       "p-1.5 text-gray-600 hover:text-rose-600 hover:bg-rose-50 rounded-md transition-colors dark:text-gray-400 dark:hover:text-rose-400 dark:hover:bg-rose-950/30",
   },
+  /** Permanent / hard delete action — shown in trash-only mode */
+  hardDelete: {
+    type: "button",
+    label: "Permanently Delete",
+    icon: Flame,
+    title: "Permanently Delete",
+    extraClass:
+      "p-1.5 text-rose-500 hover:text-white hover:bg-rose-600 rounded-md transition-colors dark:text-rose-400 dark:hover:bg-rose-700",
+  },
+  /** Restore action — shown for trashed rows */
+  restore: {
+    type: "button",
+    label: "Restore",
+    icon: RotateCcw,
+    title: "Restore",
+    extraClass:
+      "p-1.5 text-blue-500 hover:text-white hover:bg-blue-600 rounded-md transition-colors dark:text-blue-400 dark:hover:bg-blue-700",
+  },
   switch: {
     type: "button",
     name: "switch",
@@ -73,6 +91,11 @@ export function applyActionDefaults(
     ...action,
   };
 
+  // For custom actions, use the user's label as tooltip title when no explicit title given
+  if (actionName === 'custom' && !action.title && action.label) {
+    mergedAction.title = action.label;
+  }
+
   // Auto-generate getHref for edit action if resourceName is provided
   if (actionName === "edit" && !mergedAction.getHref && resourceName) {
     mergedAction.getHref = (row) => `/${resourceName}/${row[resourceIdField]}/edit`;
@@ -177,3 +200,94 @@ export function createDeleteClickHandler(
     }
   };
 }
+
+/**
+ * Create a hard-delete (permanent) action onClick handler.
+ * Shows a severe "cannot be undone" confirmation before calling
+ * DELETE url?hardDelete=true.
+ */
+export function createHardDeleteClickHandler(
+  api,
+  deleteUrl,
+  confirmMessage,
+  resourceIdField = "id",
+  options = {}
+) {
+  if (!api) {
+    throw new Error('createHardDeleteClickHandler requires "api" parameter');
+  }
+
+  return async (row) => {
+    try {
+      const Swal = window.Swal;
+      const defaultMsg = typeof confirmMessage === "function"
+        ? confirmMessage(row)
+        : (confirmMessage || "This will permanently remove the record from the database. This action cannot be undone.");
+
+      if (Swal) {
+        const result = await Swal.fire({
+          title: options?.confirmTitle || "Permanently Delete?",
+          text: defaultMsg,
+          icon: "error",
+          showCancelButton: true,
+          confirmButtonColor: "#991b1b",
+          cancelButtonColor: "#6b7280",
+          confirmButtonText: options?.confirmButtonText || "Yes, permanently delete!",
+        });
+        if (!result.isConfirmed) return;
+      } else {
+        if (!window.confirm(`⚠️ PERMANENT DELETE ⚠️\n\n${defaultMsg}`)) return;
+      }
+
+      // Build URL and append hardDelete=true
+      const baseUrl = typeof deleteUrl === "function"
+        ? deleteUrl(row)
+        : deleteUrl.replace(":id", row[resourceIdField]);
+      const separator = baseUrl.includes('?') ? '&' : '?';
+      await api.delete(`${baseUrl}${separator}hardDelete=true`);
+
+      const toast = (await import("react-toastify")).toast;
+      const successMsg = options?.successMessage
+        ? (typeof options.successMessage === "function" ? options.successMessage(row) : options.successMessage)
+        : "Permanently deleted";
+      toast.success(successMsg);
+
+      if (options?.onRefresh) options.onRefresh();
+    } catch (error) {
+      const toast = (await import("react-toastify")).toast;
+      toast.error(error.message || "Failed to permanently delete");
+    }
+  };
+}
+
+/**
+ * Create a restore action onClick handler.
+ * Calls PATCH restoreUrl to restore a soft-deleted record.
+ */
+export function createRestoreClickHandler(
+  api,
+  restoreUrl,
+  resourceIdField = "id",
+  options = {}
+) {
+  if (!api) {
+    throw new Error('createRestoreClickHandler requires "api" parameter');
+  }
+
+  return async (row) => {
+    try {
+      const url = typeof restoreUrl === "function"
+        ? restoreUrl(row)
+        : restoreUrl.replace(":id", row[resourceIdField]);
+      await api.patch(url);
+
+      const toast = (await import("react-toastify")).toast;
+      toast.success(options?.successMessage || "Restored successfully");
+
+      if (options?.onRefresh) options.onRefresh();
+    } catch (error) {
+      const toast = (await import("react-toastify")).toast;
+      toast.error(error.message || "Failed to restore");
+    }
+  };
+}

package/frontend/react-ui/components/DataTable/DataTable.jsx

@@ -85,6 +85,9 @@ export function DataTable(props) {
     onToggle,
     api, // API client instance passed as prop
     persistState = true, // Enable URL-based state persistence by default
+    trashable = false, // Enable trash/restore UI (Live / With Trash / Trash tabs)
+    restoreUrl, // URL template for restore, e.g. "/products/:id/restore"
+    initialTrashed = 'without', // Initial trash mode: 'without' | 'with' | 'only'
   } = props;
 
   // Validate that api client is provided
@@ -169,9 +172,18 @@ export function DataTable(props) {
   const [statusFilter, setStatusFilter] = React.useState(urlState.statusFilter);
   const [limit, setLimit] = React.useState(urlState.limit);
   const [columnSearch, setColumnSearch] = React.useState(urlState.columnSearch);
-  
+  // Debounced version of columnSearch — API is only called once the user pauses typing
+  const [debouncedColumnSearch, setDebouncedColumnSearch] = React.useState(urlState.columnSearch);
+  const columnSearchDebounceRef = React.useRef(null);
+
+  // Abort controller for in-flight requests — cancelled whenever new fetch params arrive
+  const abortControllerRef = React.useRef(null);
+
+  const [trashed, setTrashed] = React.useState(initialTrashed);
+
   const [data, setData] = React.useState([]);
-  const [loading, setLoading] = React.useState(false);
+  // Start as true: skeleton shows immediately on first render before the initial fetch.
+  const [loading, setLoading] = React.useState(true);
   const [totalPages, setTotalPages] = React.useState(1);
   const [totalItems, setTotalItems] = React.useState(0);
 
@@ -283,6 +295,22 @@ export function DataTable(props) {
     }
   }, [location?.search, hasReactRouter, loadStateFromURL]);
 
+  // Debounce columnSearch — user sees immediate input response, but API call waits 400ms
+  // Also syncs back if columnSearch is set programmatically (URL restore / browser back)
+  React.useEffect(() => {
+    if (columnSearchDebounceRef.current) {
+      clearTimeout(columnSearchDebounceRef.current);
+    }
+    columnSearchDebounceRef.current = setTimeout(() => {
+      setDebouncedColumnSearch(columnSearch);
+    }, 400);
+    return () => {
+      if (columnSearchDebounceRef.current) {
+        clearTimeout(columnSearchDebounceRef.current);
+      }
+    };
+  }, [columnSearch]);
+
   const handleStatusToggle = async (row) => {
     if (!toggleLink) return;
     try {
@@ -298,13 +326,40 @@ export function DataTable(props) {
     }
   };
   
-  // Reset page to 1 when columnSearch changes
+  // Reset page to 1 when debouncedColumnSearch changes
   React.useEffect(() => {
     setPage(1);
-  }, [columnSearch]);
+  }, [debouncedColumnSearch]);
+
+  // useLayoutEffect fires synchronously after DOM mutation, before paint.
+  // This guarantees the skeleton is committed to the DOM before ANY passive
+  // effect (useEffect) runs — which is where fetchData and the API call live.
+  // Without this, React 18 + createRoot batches setLoading(true) with the
+  // fast localhost API response into one render, so the skeleton never paints.
+  //
+  // Skip the very first run (initial mount) because loading already starts as
+  // true, and fetchData's own useEffect handles the first fetch.
+  const isFirstRender = React.useRef(true);
+  React.useLayoutEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    setLoading(true);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page, sortBy, sortOrder, statusFilter, limit, search, debouncedColumnSearch, trashable, trashed, refreshKey, refreshSignal]);
 
   const fetchData = React.useCallback(async () => {
-    setLoading(true);
+    // Cancel any in-flight request before starting a new one
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    abortControllerRef.current = new AbortController();
+    const signal = abortControllerRef.current.signal;
+
+    // loading=true is already set synchronously by useLayoutEffect before this
+    // effect runs. Do not set it here — that caused React 18 batching issues.
+    let wasAborted = false;
     try {
       const params = new URLSearchParams({
         page: page.toString(),
@@ -314,14 +369,17 @@ export function DataTable(props) {
       });
       if (statusFilter !== "all") params.append("isActive", statusFilter);
       if (search) params.append("search", search);
-      // Add column search params
-      Object.entries(columnSearch).forEach(([field, value]) => {
+      // Add debounced column search params
+      Object.entries(debouncedColumnSearch).forEach(([field, value]) => {
         if (value) params.append(`columnSearch[${field}]`, value);
       });
 
+      // Append trashed param when trashable mode is active
+      if (trashable) params.append('trashed', trashed);
+
       // Properly append params to apiUrl (check if apiUrl already has query params)
       const separator = apiUrl.includes('?') ? '&' : '?';
-      const result = await api.get(`${apiUrl}${separator}${params}`);
+      const result = await api.get(`${apiUrl}${separator}${params}`, { signal });
 
       // Handle nested data structure: result.data.data OR result.data.items
       const items = Array.isArray(result.data)
@@ -333,32 +391,103 @@ export function DataTable(props) {
       setTotalPages(pagination?.totalPages || 1);
       setTotalItems(pagination?.total || 0);
     } catch (err) {
-      setData([]);
-      setTotalPages(1);
-      setTotalItems(0);
+      // Abort errors are expected when a newer request supersedes this one — do not
+      // reset loading state because the new request is already in flight with loading=true.
+      if (err && (err.name === 'AbortError' || err.code === 'ERR_CANCELED')) {
+        wasAborted = true;
+      } else {
+        setData([]);
+        setTotalPages(1);
+        setTotalItems(0);
+      }
     } finally {
-      setLoading(false);
+      // Only clear loading when this request completed normally (not aborted).
+      // An aborted request means a newer fetch is already running with loading=true.
+      if (!wasAborted) {
+        setLoading(false);
+      }
     }
-  }, [api, apiUrl, page, sortBy, sortOrder, statusFilter, limit, search, columnSearch]);
-
-  // Trigger fetchData for main params
+  }, [api, apiUrl, page, sortBy, sortOrder, statusFilter, limit, search, debouncedColumnSearch, trashable, trashed]);
+
+  // Always-current ref to fetchData — lets refreshSignal and refreshKey effects
+  // call the latest fetchData without including fetchData in their dep arrays.
+  // This prevents double-fetches: if fetchData were in refreshSignal's deps, the
+  // effect would fire on EVERY sort/search (because fetchData recreates whenever
+  // its own deps change), causing two concurrent requests.
+  const fetchDataRef = React.useRef(fetchData);
+  fetchDataRef.current = fetchData;
+
+  // Trigger fetchData for main params.
+  //
+  // Why rAF + setTimeout(0):
+  // Browser frame sequence: macro-task → microtasks → rAF callbacks → layout+PAINT → next macro-task.
+  // useLayoutEffect commits loading=true (skeleton) synchronously during the commit phase.
+  // Passive effects (useEffect) run as a MessageChannel macro-task.
+  // Inside that macro-task we schedule rAF, which fires PRE-paint of the current frame.
+  // Inside rAF we schedule setTimeout(0), which queues as a MACRO-TASK — meaning it fires
+  // AFTER the browser completes layout+paint for the current frame.
+  // Result: skeleton is guaranteed to be painted to screen before fetchData() opens the XHR.
   React.useEffect(() => {
-    fetchData();
+    let rafId;
+    let timerId;
+    rafId = requestAnimationFrame(() => {
+      timerId = setTimeout(() => {
+        fetchDataRef.current();
+      }, 0);
+    });
+    return () => {
+      cancelAnimationFrame(rafId);
+      clearTimeout(timerId);
+    };
   }, [fetchData]);
 
-  // Trigger fetchData when refreshSignal changes
+  // Trigger fetchData when refreshSignal changes.
+  // fetchData is intentionally NOT in deps — we use fetchDataRef to avoid re-firing
+  // this effect on every sort/search (which would cause a double-fetch).
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   React.useEffect(() => {
     if (typeof refreshSignal !== 'undefined') {
-      fetchData();
+      let rafId;
+      let timerId;
+      rafId = requestAnimationFrame(() => {
+        timerId = setTimeout(() => {
+          fetchDataRef.current();
+        }, 0);
+      });
+      return () => {
+        cancelAnimationFrame(rafId);
+        clearTimeout(timerId);
+      };
     }
-  }, [refreshSignal, fetchData]);
+  }, [refreshSignal]);
 
-  // Internal refresh after status toggle
+  // Internal refresh after status toggle.
+  // fetchData is intentionally NOT in deps — same reason as refreshSignal above.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   React.useEffect(() => {
     if (refreshKey > 0) {
-      fetchData();
+      let rafId;
+      let timerId;
+      rafId = requestAnimationFrame(() => {
+        timerId = setTimeout(() => {
+          fetchDataRef.current();
+        }, 0);
+      });
+      return () => {
+        cancelAnimationFrame(rafId);
+        clearTimeout(timerId);
+      };
     }
-  }, [refreshKey, fetchData]);
+  }, [refreshKey]);
+
+  // Abort any in-flight request when the component unmounts
+  React.useEffect(() => {
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, []);
 
   const handleSort = (field) => {
     if (sortBy === field) {
@@ -388,6 +517,10 @@ export function DataTable(props) {
             setLimit={setLimit}
             dataLength={data.length}
             totalItems={totalItems}
+            onRefresh={() => setRefreshKey((k) => k + 1)}
+            trashable={trashable}
+            trashed={trashed}
+            setTrashed={(val) => { setTrashed(val); setPage(1); }}
           />
         </div>
         <table className="min-w-full w-full divide-y divide-gray-200 dark:divide-gray-700">
@@ -419,6 +552,8 @@ export function DataTable(props) {
                 resourceName={resourceName}
                 resourceIdField={resourceIdField}
                 onRefresh={() => setRefreshKey((k) => k + 1)}
+                trashMode={trashed}
+                restoreUrl={restoreUrl}
               />
             )}
           </tbody>

package/frontend/react-ui/components/DataTable/Filters.jsx

@@ -1,10 +1,12 @@
 import React from "react";
+import { RefreshCw, Trash2 } from "lucide-react";
 
 /**
  * Filters Component - Production Ready
- * 
- * Status filters (All/Active/Inactive), rows per page selector, and showing info
- * 
+ *
+ * Status filters (All/Active/Inactive), rows per page selector, trash tabs,
+ * and a refresh button.
+ *
  * @module components/DataTable/Filters
  */
 export const Filters = ({
@@ -16,61 +18,102 @@ export const Filters = ({
   setLimit,
   dataLength,
   totalItems,
+  onRefresh,
+  // Trash support
+  trashable,
+  trashed,
+  setTrashed,
 }) => (
-  <div className="flex items-start justify-between px-2 py-2 text-xs text-gray-600 w-full">
-    {/* Left: Rows per page and Showing info */}
-    <div className="flex flex-col items-start gap-1">
-      <div className="flex items-center gap-1 whitespace-nowrap">
-        <label className="text-xs">Rows per page:</label>
-        <select
-          value={limit}
-          onChange={(e) => {
-            setLimit(Number(e.target.value));
-            setPage(1);
-          }}
-          className="rounded border border-gray-300 bg-transparent px-2 py-1 text-xs outline-none dark:border-gray-700 dark:bg-gray-900"
-        >
-          <option value="5">5</option>
-          <option value="10">10</option>
-          <option value="25">25</option>
-          <option value="50">50</option>
-          <option value="100">100</option>
-        </select>
+  <div className="flex flex-col gap-2 px-2 py-2 text-xs text-gray-600 w-full">
+    {/* Top row: rows-per-page + showing info + trash tabs + refresh */}
+    <div className="flex items-start justify-between w-full gap-2">
+      {/* Left: Rows per page and Showing info */}
+      <div className="flex flex-col items-start gap-1">
+        <div className="flex items-center gap-1 whitespace-nowrap">
+          <label className="text-xs">Rows per page:</label>
+          <select
+            value={limit}
+            onChange={(e) => {
+              setLimit(Number(e.target.value));
+              setPage(1);
+            }}
+            className="rounded border border-gray-300 bg-transparent px-2 py-1 text-xs outline-none dark:border-gray-700 dark:bg-gray-900"
+          >
+            <option value="5">5</option>
+            <option value="10">10</option>
+            <option value="25">25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+          </select>
+        </div>
+        <span className="whitespace-nowrap mt-1">
+          Showing {totalItems === 0 ? 0 : (page - 1) * limit + 1} to{" "}
+          {Math.min(page * limit, totalItems)} of {totalItems} items
+        </span>
+      </div>
+
+      {/* Right: Status filters + Trash tabs + Refresh */}
+      <div className="flex flex-wrap items-center justify-end gap-2">
+        {/* Status filter buttons — hidden when viewing only-trash */}
+        {(!trashable || trashed !== 'only') && (
+          <div className="flex items-center gap-1">
+            <button
+              onClick={() => { setStatusFilter("all"); setPage(1); }}
+              className={`rounded-lg px-3 py-1.5 text-sm font-medium transition ${statusFilter === "all" ? "bg-brand-600 text-white shadow-theme-xs" : "bg-white text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-700"}`}
+            >
+              All
+            </button>
+            <button
+              onClick={() => { setStatusFilter("true"); setPage(1); }}
+              className={`rounded-lg px-3 py-1.5 text-sm font-medium transition ${statusFilter === "true" ? "bg-brand-600 text-white shadow-theme-xs" : "bg-white text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-700"}`}
+            >
+              Active
+            </button>
+            <button
+              onClick={() => { setStatusFilter("false"); setPage(1); }}
+              className={`rounded-lg px-3 py-1.5 text-sm font-medium transition ${statusFilter === "false" ? "bg-brand-600 text-white shadow-theme-xs" : "bg-white text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-700"}`}
+            >
+              Inactive
+            </button>
+          </div>
+        )}
+
+        {/* Trash tabs (only shown when trashable=true) */}
+        {trashable && (
+          <div className="flex items-center gap-1 border-l pl-2 border-gray-200 dark:border-gray-700">
+            <Trash2 className="h-3 w-3 text-gray-400 mr-0.5" />
+            <button
+              onClick={() => { setTrashed('without'); setPage(1); }}
+              className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${trashed === 'without' ? 'bg-green-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'}`}
+            >
+              Live
+            </button>
+            <button
+              onClick={() => { setTrashed('with'); setPage(1); }}
+              className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${trashed === 'with' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'}`}
+            >
+              With Trash
+            </button>
+            <button
+              onClick={() => { setTrashed('only'); setPage(1); }}
+              className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${trashed === 'only' ? 'bg-red-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'}`}
+            >
+              Trash
+            </button>
+          </div>
+        )}
+
+        {/* Refresh button — always shown */}
+        {onRefresh && (
+          <button
+            onClick={onRefresh}
+            title="Refresh"
+            className="p-1.5 rounded-md text-gray-500 hover:text-brand-600 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+          >
+            <RefreshCw className="h-4 w-4" />
+          </button>
+        )}
       </div>
-      <span className="whitespace-nowrap mt-1">
-        Showing {totalItems === 0 ? 0 : (page - 1) * limit + 1} to{" "}
-        {Math.min(page * limit, totalItems)} of {totalItems} items
-      </span>
-    </div>
-    {/* Right: Filter buttons */}
-    <div className="flex-shrink-0 flex gap-2">
-      <button
-        onClick={() => {
-          setStatusFilter("all");
-          setPage(1);
-        }}
-        className={`rounded-lg px-4 py-2 text-sm font-medium transition ${statusFilter === "all" ? "bg-brand-600 text-white shadow-theme-xs" : "bg-white text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-700"}`}
-      >
-        All
-      </button>
-      <button
-        onClick={() => {
-          setStatusFilter("true");
-          setPage(1);
-        }}
-        className={`rounded-lg px-4 py-2 text-sm font-medium transition ${statusFilter === "true" ? "bg-brand-600 text-white shadow-theme-xs" : "bg-white text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-700"}`}
-      >
-        Active
-      </button>
-      <button
-        onClick={() => {
-          setStatusFilter("false");
-          setPage(1);
-        }}
-        className={`rounded-lg px-4 py-2 text-sm font-medium transition ${statusFilter === "false" ? "bg-brand-600 text-white shadow-theme-xs" : "bg-white text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-700"}`}
-      >
-        Inactive
-      </button>
     </div>
   </div>
 );