vasuzex 2.3.13 → 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
@@ -176,8 +179,11 @@ export function DataTable(props) {
   // 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);
 
@@ -325,6 +331,24 @@ export function DataTable(props) {
     setPage(1);
   }, [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 () => {
     // Cancel any in-flight request before starting a new one
     if (abortControllerRef.current) {
@@ -333,7 +357,9 @@ export function DataTable(props) {
     abortControllerRef.current = new AbortController();
     const signal = abortControllerRef.current.signal;
 
-    setLoading(true);
+    // 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(),
@@ -348,6 +374,9 @@ export function DataTable(props) {
         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}`, { signal });
@@ -362,35 +391,94 @@ export function DataTable(props) {
       setTotalPages(pagination?.totalPages || 1);
       setTotalItems(pagination?.total || 0);
     } catch (err) {
-      // Ignore abort errors — they are expected when a newer request supersedes this one
-      if (err && err.name === 'AbortError') return;
-      if (err && err.code === 'ERR_CANCELED') return;
-      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, debouncedColumnSearch]);
-
-  // 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(() => {
@@ -429,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">
@@ -460,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>
 );

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

@@ -5,15 +5,19 @@ import {
   applyActionDefaults,
   createViewClickHandler,
   createDeleteClickHandler,
+  createHardDeleteClickHandler,
+  createRestoreClickHandler,
+  ACTION_DEFAULTS,
 } from "./ActionDefaults.jsx";
 
 /**
  * TableBody Component - Production Ready
- * 
- * Table body with data rows, column rendering, and action buttons
- * Handles Switch component for status toggle
- * Auto-configures edit/view/delete actions
- * 
+ *
+ * Table body with data rows, column rendering, and action buttons.
+ * Handles Switch component for status toggle.
+ * Trash-aware: when trashMode='only', delete becomes hardDelete with warning;
+ * restore button shown automatically for trashed rows.
+ *
  * @module components/DataTable/TableBody
  */
 export function TableBody({
@@ -27,14 +31,26 @@ export function TableBody({
   resourceName,
   resourceIdField = "id",
   onRefresh,
+  // Trash support: 'without' | 'with' | 'only'
+  trashMode,
+  // URL for the restore endpoint (e.g. "/products/:id/restore")
+  restoreUrl,
 }) {
   if (loading) {
+    const skeletonRows = Array.from({ length: 5 });
+    const colCount = columns.length + (actions ? 1 : 0);
     return (
-      <tr>
-        <td colSpan={columns.length + (actions ? 1 : 0)} className="text-center py-8">
-          Loading data...
-        </td>
-      </tr>
+      <>
+        {skeletonRows.map((_, rowIdx) => (
+          <tr key={rowIdx} className="border-b border-gray-200 dark:border-gray-700 animate-pulse">
+            {Array.from({ length: colCount }).map((_, colIdx) => (
+              <td key={colIdx} className="px-6 py-4">
+                <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4" />
+              </td>
+            ))}
+          </tr>
+        ))}
+      </>
     );
   }
   
@@ -83,6 +99,11 @@ export function TableBody({
                     return null;
                   }
 
+                  // In trash-only mode: skip edit/switch/status-toggle actions
+                  if (trashMode === 'only' && ['edit', 'switch'].includes(userAction.name)) {
+                    return null;
+                  }
+
                   // Apply defaults based on action name
                   const action = applyActionDefaults(userAction, resourceName, resourceIdField);
 
@@ -114,22 +135,46 @@ export function TableBody({
                     }
                   }
 
-                  // Handle delete action with automatic confirmation
+                  // Handle delete action:
+                  // — in trash-only mode, OR when row is already soft-deleted (has deleted_at) → hard-delete with permanent-delete confirmation
+                  // — normal mode → soft-delete with standard confirmation
                   if (action.type === "button" && action.name === "delete") {
                     const deleteAction = action;
                     if (deleteAction.deleteUrl && !userAction.onClick) {
-                      deleteAction.onClick = createDeleteClickHandler(
-                        api,
-                        deleteAction.deleteUrl,
-                        deleteAction.confirmMessage || "Are you sure you want to delete this item?",
-                        resourceIdField,
-                        {
-                          confirmTitle: deleteAction.confirmTitle,
-                          confirmButtonText: deleteAction.confirmButtonText,
-                          successMessage: deleteAction.successMessage,
-                          onRefresh,
-                        },
-                      );
+                      const isAlreadyTrashed = !!row.deleted_at;
+                      if (trashMode === 'only' || isAlreadyTrashed) {
+                        // Override to hardDelete
+                        deleteAction.onClick = createHardDeleteClickHandler(
+                          api,
+                          deleteAction.deleteUrl,
+                          deleteAction.confirmMessage || "This will permanently remove the record from the database. This action cannot be undone.",
+                          resourceIdField,
+                          {
+                            confirmTitle: "Permanently Delete?",
+                            confirmButtonText: "Yes, permanently delete!",
+                            successMessage: deleteAction.successMessage || "Permanently deleted",
+                            onRefresh,
+                          },
+                        );
+                        // Apply hardDelete styling
+                        if (!userAction.className) {
+                          deleteAction.className = ACTION_DEFAULTS.hardDelete.extraClass;
+                        }
+                        deleteAction.title = "Permanently Delete";
+                      } else {
+                        deleteAction.onClick = createDeleteClickHandler(
+                          api,
+                          deleteAction.deleteUrl,
+                          deleteAction.confirmMessage || "Are you sure you want to delete this item?",
+                          resourceIdField,
+                          {
+                            confirmTitle: deleteAction.confirmTitle,
+                            confirmButtonText: deleteAction.confirmButtonText,
+                            successMessage: deleteAction.successMessage,
+                            onRefresh,
+                          },
+                        );
+                      }
                     }
                   }
 
@@ -138,7 +183,7 @@ export function TableBody({
                   const className =
                     typeof action.className === "function"
                       ? action.className(row)
-                      : action.className || "";
+                      : action.className || action.extraClass || "";
                   const title =
                     typeof action.title === "function"
                       ? action.title(row)
@@ -183,6 +228,22 @@ export function TableBody({
 
                   return null;
                 })}
+
+                {/* Auto-inject Restore button when trashMode is active and row is trashed */}
+                {restoreUrl && (trashMode === 'only' || (trashMode === 'with' && row.deleted_at)) && (() => {
+                  const handler = createRestoreClickHandler(api, restoreUrl, resourceIdField, { onRefresh });
+                  const Icon = ACTION_DEFAULTS.restore.icon;
+                  return (
+                    <button
+                      key="auto-restore"
+                      onClick={() => handler(row)}
+                      className={ACTION_DEFAULTS.restore.extraClass}
+                      title="Restore"
+                    >
+                      <Icon className="h-4 w-4" />
+                    </button>
+                  );
+                })()}
               </div>
             </td>
           )}