vasuzex 2.3.13 → 2.3.15

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

@@ -44,15 +44,31 @@ export function RowActionsCell({
 }) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const menuRef = useRef(null);
-  
+  const btnRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const [menuPos, setMenuPos] = useState({ top: 0, right: 0 });
+
   // Determine which approval actions to show based on current status
   const showApprove = hasApproval && (row.approval_status === 'pending' || row.approval_status === 'rejected');
   const showReject = hasApproval && (row.approval_status === 'pending' || row.approval_status === 'approved');
 
+  const handleToggleMenu = () => {
+    if (!isMenuOpen && btnRef.current) {
+      const rect = btnRef.current.getBoundingClientRect();
+      setMenuPos({
+        top: rect.bottom + 4,
+        right: window.innerWidth - rect.right,
+      });
+    }
+    setIsMenuOpen((prev) => !prev);
+  };
+
   // Close menu when clicking outside
   useEffect(() => {
     const handleClickOutside = (event) => {
-      if (menuRef.current && !menuRef.current.contains(event.target)) {
+      const clickedBtn = btnRef.current && btnRef.current.contains(event.target);
+      const clickedMenu = dropdownRef.current && dropdownRef.current.contains(event.target);
+      if (!clickedBtn && !clickedMenu) {
         setIsMenuOpen(false);
       }
     };
@@ -98,9 +114,10 @@ export function RowActionsCell({
       )}
 
       {/* Overflow Menu - Secondary & Destructive Actions */}
-      <div className="relative" ref={menuRef}>
+      <div className="relative">
         <button
-          onClick={() => setIsMenuOpen(!isMenuOpen)}
+          ref={btnRef}
+          onClick={handleToggleMenu}
           className="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-700"
           title="More Actions"
           aria-label="More Actions"
@@ -110,7 +127,11 @@ export function RowActionsCell({
         </button>
 
         {isMenuOpen && (
-          <div className="absolute right-0 mt-1 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50 py-1">
+          <div
+            ref={dropdownRef}
+            style={{ position: 'fixed', top: menuPos.top, right: menuPos.right }}
+            className="w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-[9999] py-1"
+          >
             {/* Approval Actions - Show based on current status */}
             {(showApprove || showReject) && (
               <>

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

@@ -17,10 +17,12 @@
 
 import React from "react";
 import { TableBody } from "./TableBody.jsx";
+import { MobileCardList } from "./MobileCardList.jsx";
 import { Filters } from "./Filters.jsx";
 import { TableHeader } from "./TableHeader.jsx";
 import { TableState } from "./TableState.jsx";
 import { Pagination } from "./Pagination.jsx";
+import { useMobileDetect } from "../../hooks/useMobileDetect.js";
 
 // Conditional import for React Router (optional dependency)
 let useSearchParamsHook = null;
@@ -58,6 +60,7 @@ try {
  * @param {number} props.initialLimit - Initial rows per page
  * @param {string} props.emptyText - Text to show when no data
  * @param {boolean} props.persistState - Enable URL state persistence (default: true)
+ * @param {boolean} props.mobileCardView - Render as stacked cards on mobile < 640px (default: false)
  */
 
 // URL params that DataTable owns — all other params (e.g. trashed) are preserved as-is
@@ -85,8 +88,14 @@ 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'
+    mobileCardView = false, // Render as stacked cards on mobile (< 640px)
   } = props;
 
+  const isMobile = useMobileDetect(640);
+
   // Validate that api client is provided
   if (!api) {
     throw new Error('DataTable requires "api" prop - pass your API client instance');
@@ -176,8 +185,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 +337,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 +363,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 +380,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 +397,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(() => {
@@ -415,10 +509,12 @@ export function DataTable(props) {
     setPage(newPage);
   };
   
-  return (
-    <div className="overflow-x-auto w-full">
-      {/* Filters and Controls */}
-      <div className="mb-6 overflow-x-scroll rounded-xl border border-gray-200 bg-white dark:border-white/[0.05] dark:bg-white/[0.03]">
+  // Mobile card view — rendered when mobileCardView=true and on mobile
+  // Renders flat (no inner card) so the page's outer card is the visual container
+  if (mobileCardView && isMobile) {
+    return (
+      <div className="w-full text-sm">
+        {/* Filters row — sits at top of the page's outer card */}
         <div className="border-b border-gray-100 p-3 dark:border-white/[0.05]">
           <Filters
             statusFilter={statusFilter}
@@ -429,9 +525,54 @@ 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">
+        <MobileCardList
+          api={api}
+          data={data}
+          columns={columns}
+          actions={actions}
+          loading={loading}
+          emptyText={emptyText}
+          resourceName={resourceName}
+          resourceIdField={resourceIdField}
+          onRefresh={() => setRefreshKey((k) => k + 1)}
+          trashMode={trashed}
+          restoreUrl={restoreUrl}
+        />
+        {/* Pagination inside the page card — connected visually */}
+        {totalPages > 1 && (
+          <Pagination page={page} totalPages={totalPages} onPageChange={handlePageChange} />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full text-sm">
+      <div className="border-b border-gray-100 p-3 dark:border-white/[0.05]">
+        <Filters
+          statusFilter={statusFilter}
+          setStatusFilter={setStatusFilter}
+          setPage={setPage}
+          page={page}
+          limit={limit}
+          setLimit={setLimit}
+          dataLength={data.length}
+          totalItems={totalItems}
+          onRefresh={() => setRefreshKey((k) => k + 1)}
+          trashable={trashable}
+          trashed={trashed}
+          setTrashed={(val) => { setTrashed(val); setPage(1); }}
+        />
+      </div>
+      {/* Table — only this portion scrolls horizontally */}
+      <div className="overflow-x-auto">
+        <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
           <TableHeader
             columns={columns}
             actions={actions}
@@ -460,13 +601,14 @@ export function DataTable(props) {
                 resourceName={resourceName}
                 resourceIdField={resourceIdField}
                 onRefresh={() => setRefreshKey((k) => k + 1)}
+                trashMode={trashed}
+                restoreUrl={restoreUrl}
               />
             )}
           </tbody>
         </table>
       </div>
-
-      {/* Pagination */}
+      {/* Pagination — inside the page's outer card, connected to the table visually */}
       {totalPages > 1 && (
         <Pagination page={page} totalPages={totalPages} onPageChange={handlePageChange} />
       )}

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,12 +18,17 @@ 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>
+  <div className="flex flex-col gap-2 px-2 py-2 text-xs text-gray-600 w-full">
+    {/* Row 1: Rows-per-page selector + showing info + refresh (always fits on one line) */}
+    <div className="flex items-center gap-3 flex-wrap">
+      <div className="flex items-center gap-1.5 shrink-0">
+        <label className="text-xs text-gray-500">Rows:</label>
         <select
           value={limit}
           onChange={(e) => {
@@ -37,40 +44,72 @@ export const Filters = ({
           <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 className="text-xs text-gray-500 shrink-0">
+        {totalItems === 0 ? "0 items" : `${(page - 1) * limit + 1}–${Math.min(page * limit, totalItems)} of ${totalItems}`}
       </span>
+      {onRefresh && (
+        <button
+          onClick={onRefresh}
+          title="Refresh"
+          className="ml-auto 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>
-    {/* 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>
+
+    {/* Row 2: Status filter + Trash tabs (wraps cleanly on small screens) */}
+    {((!trashable || trashed !== 'only') || trashable) && (
+      <div className="flex items-center flex-wrap 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">
+            <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>
+        )}
+      </div>
+    )}
   </div>
 );