vasuzex 2.3.13 → 2.3.15

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

@@ -0,0 +1,226 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import {
+  applyActionDefaults,
+  createViewClickHandler,
+  createDeleteClickHandler,
+  createHardDeleteClickHandler,
+  createRestoreClickHandler,
+} from './ActionDefaults.jsx';
+
+// ─── MobileCardList ──────────────────────────────────────────────────────────
+//
+// Column priority system:
+//   primary        — shown full-width, no label prefix (first = bold title)
+//   secondary      — compact label:value pairs below a divider
+//   hidden-mobile  — never shown
+//
+// If no column has priority set:
+//   first 3 columns → primary | rest → secondary
+
+export function MobileCardList({
+  api,
+  data,
+  columns,
+  actions,
+  loading,
+  emptyText,
+  resourceName,
+  resourceIdField = 'id',
+  onRefresh,
+  trashMode,
+  restoreUrl,
+}) {
+  const hasPriority = columns.some((c) => c.priority);
+
+  // Detect column-based actions (render fn inside field:'actions' column)
+  const actionsColumn = columns.find((c) => c.field === 'actions');
+
+  let primaryColumns, secondaryColumns;
+  if (hasPriority) {
+    primaryColumns = columns.filter((c) => c.priority === 'primary' && c.field !== 'actions');
+    secondaryColumns = columns.filter((c) => c.priority === 'secondary' && c.field !== 'actions');
+  } else {
+    // No priority set — treat first 3 visible columns as primary, rest as secondary
+    const visible = columns.filter((c) => c.field !== 'actions');
+    primaryColumns = visible.slice(0, 3);
+    secondaryColumns = visible.slice(3);
+  }
+
+  const renderCell = (col, row) => {
+    if (col.render) return col.render(row);
+    const val = row[col.field];
+    return (val === undefined || val === null) ? '—' : String(val);
+  };
+
+  // ── Skeleton loading ───────────────────────────────────────────────────────
+  if (loading) {
+    return (
+      <div className="divide-y divide-gray-100">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} className="p-4 animate-pulse">
+            <div className="h-4 bg-gray-200 rounded w-1/2 mb-2" />
+            <div className="h-3 bg-gray-100 rounded w-3/4 mb-1.5" />
+            <div className="h-3 bg-gray-100 rounded w-2/3 mb-3" />
+            <div className="flex gap-2 mt-3">
+              <div className="h-7 bg-gray-100 rounded w-16" />
+              <div className="h-7 bg-gray-100 rounded w-16" />
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  // ── Empty state ────────────────────────────────────────────────────────────
+  if (!data || data.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
+        <div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-3">
+          <svg className="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
+              d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+          </svg>
+        </div>
+        <p className="text-sm text-gray-500">{emptyText || 'No data found'}</p>
+      </div>
+    );
+  }
+
+  // ── Card list ──────────────────────────────────────────────────────────────
+  return (
+    <div className="divide-y divide-gray-100">
+      {data.map((row, idx) => {
+        const rowId = row[resourceIdField] ?? row.id ?? row._id ?? idx;
+        const isTrashed = !!row.deleted_at;
+        const renderedColumnActions = actionsColumn && actionsColumn.render
+          ? actionsColumn.render(row)
+          : null;
+
+        return (
+          <div key={rowId} className={`p-4 ${isTrashed ? 'bg-red-50/40' : ''}`}>
+
+            {/* ── Primary columns: title + body rows, no label prefix ── */}
+            <div className="space-y-1.5 mb-3">
+              {primaryColumns.map((col, colIdx) => {
+                const content = renderCell(col, row);
+                return (
+                  <div
+                    key={col.field}
+                    className={colIdx === 0
+                      ? 'text-sm font-semibold text-gray-900 leading-snug'
+                      : 'text-sm text-gray-700 leading-snug'
+                    }
+                  >
+                    {content}
+                  </div>
+                );
+              })}
+            </div>
+
+            {/* ── Secondary columns: compact label:value pairs ── */}
+            {secondaryColumns.length > 0 && (
+              <div className="border-t border-gray-100 pt-2 mb-3 space-y-1">
+                {secondaryColumns.map((col) => (
+                  <div key={col.field} className="flex items-start gap-2">
+                    <span className="text-xs text-gray-400 w-20 shrink-0 pt-0.5">{col.label}</span>
+                    <div className="text-xs text-gray-600 flex-1 min-w-0 break-words">{renderCell(col, row)}</div>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* ── Trashed indicator ── */}
+            {isTrashed && (
+              <div className="mb-2">
+                <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-red-100 text-red-700 rounded-full">
+                  Deleted
+                </span>
+              </div>
+            )}
+
+            {/* ── Actions ── */}
+            {/* Column-based actions (e.g. RowActionsCellExtended) take precedence */}
+            {renderedColumnActions ? (
+              <div className="mt-2 pt-2 border-t border-gray-100">
+                {renderedColumnActions}
+              </div>
+            ) : actions && actions.length > 0 && (
+              <div className="flex items-center gap-1.5 flex-wrap">
+                {actions.map((actionDef) => {
+                  const action = applyActionDefaults(actionDef, resourceName, resourceIdField);
+                  const Icon = action.icon;
+
+                  // Switch toggle — skip in mobile card
+                  if (action.name === 'switch') return null;
+
+                  // Trash-mode visibility rules
+                  const isDeleteAction = action.name === 'delete';
+                  const isHardDelete = action.name === 'hardDelete';
+                  const isRestore = action.name === 'restore';
+                  if (trashMode === 'only' && isDeleteAction) return null;
+                  if (trashMode !== 'only' && (isHardDelete || isRestore)) return null;
+
+                  // Resolve onClick
+                  let onClick = action.onClick ? () => action.onClick(row) : null;
+                  if (!onClick) {
+                    if (isHardDelete && action.deleteUrl) {
+                      const handler = createHardDeleteClickHandler(api, action.deleteUrl, action.confirmMessage, resourceIdField, { onRefresh });
+                      onClick = () => handler(row);
+                    } else if (isRestore && restoreUrl) {
+                      const handler = createRestoreClickHandler(api, restoreUrl, resourceIdField, { onRefresh });
+                      onClick = () => handler(row);
+                    } else if (isDeleteAction && action.deleteUrl) {
+                      const handler = createDeleteClickHandler(api, action.deleteUrl, action.confirmMessage, resourceIdField, { onRefresh });
+                      onClick = () => handler(row);
+                    } else if (action.name === 'view' && action.apiUrl) {
+                      const handler = createViewClickHandler(api, action.apiUrl, action.modalEvent, resourceIdField);
+                      onClick = () => handler(row);
+                    }
+                  }
+
+                  const btnBase = 'inline-flex items-center gap-1 px-2.5 py-1 rounded-md text-xs font-medium border transition-colors';
+                  const btnColor = (isDeleteAction || isHardDelete)
+                    ? 'border-red-200 bg-white text-red-600 hover:bg-red-50'
+                    : isRestore
+                    ? 'border-green-200 bg-white text-green-700 hover:bg-green-50'
+                    : 'border-gray-200 bg-white text-gray-600 hover:bg-gray-50';
+
+                  if (action.type === 'link' && action.getHref) {
+                    return (
+                      <Link
+                        key={action.name || action.label}
+                        to={action.getHref(row)}
+                        title={action.title || action.label}
+                        className={`${btnBase} ${btnColor} ${action.extraClass || ''}`}
+                      >
+                        {Icon && <Icon size={12} />}
+                        <span>{action.label || action.title}</span>
+                      </Link>
+                    );
+                  }
+
+                  return (
+                    <button
+                      key={action.name || action.label}
+                      type="button"
+                      title={action.title || action.label}
+                      onClick={onClick}
+                      className={`${btnBase} ${btnColor} ${action.extraClass || ''}`}
+                    >
+                      {Icon && <Icon size={12} />}
+                      <span>{action.label || action.title}</span>
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default MobileCardList;
+

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

@@ -1,72 +1,135 @@
-import React from "react";
+import React, { useState } from "react";
 
 /**
  * Pagination Component - Production Ready
  * 
  * Pagination controls with page numbers, previous/next buttons
+ * Mobile: compact Prev / Page X of Y (jump input) / Next layout
+ * Desktop: full numbered page buttons
  * 
  * @module components/DataTable/Pagination
  */
-export const Pagination = ({ page, totalPages, onPageChange }) => (
-  <div className="flex items-center justify-between border-t border-gray-200 bg-white px-6 py-4 dark:border-gray-700 dark:bg-gray-800">
-    <div className="text-sm text-gray-700 dark:text-gray-400">
-      Page {page} of {totalPages}
-    </div>
-    <div className="flex gap-2 items-center">
-      <button
-        onClick={() => onPageChange(page - 1)}
-        disabled={page === 1}
-        className="rounded-lg border border-gray-300 px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
-      >
-        Previous
-      </button>
-      {page > 3 && (
-        <>
-          <button
-            onClick={() => onPageChange(1)}
-            className={`rounded-lg border px-3 py-1 text-sm font-medium mx-0.5 ${page === 1 ? "bg-brand-600 text-white border-brand-600" : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-700"}`}
-          >
-            1
-          </button>
-          <span className="text-gray-400">...</span>
-        </>
-      )}
-      {Array.from({ length: totalPages }, (_, i) => i + 1)
-        .filter(
-          (p) =>
-            p === page ||
-            p === page - 1 ||
-            p === page + 1 ||
-            (page <= 3 && p <= 4) ||
-            (page >= totalPages - 2 && p >= totalPages - 3),
-        )
-        .map((p) => (
+export const Pagination = ({ page, totalPages, onPageChange }) => {
+  const [jumpValue, setJumpValue] = useState('');
+
+  const handleJump = (e) => {
+    if (e.key === 'Enter' || e.type === 'blur') {
+      const val = parseInt(jumpValue, 10);
+      if (!isNaN(val) && val >= 1 && val <= totalPages) {
+        onPageChange(val);
+      }
+      setJumpValue('');
+    }
+  };
+
+  return (
+    <div className="border-t border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
+
+      {/* ── Mobile: compact layout (hidden on sm+) ── */}
+      <div className="sm:hidden px-3 py-3 space-y-2">
+        <div className="text-center text-xs text-gray-600 dark:text-gray-400">
+          Page {page} of {totalPages}
+        </div>
+
+        <div className="grid grid-cols-2 gap-2">
+        <button
+          onClick={() => onPageChange(page - 1)}
+          disabled={page === 1}
+          className="w-full rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
+        >
+          Previous
+        </button>
+
+        <button
+          onClick={() => onPageChange(page + 1)}
+          disabled={page === totalPages}
+          className="w-full rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
+        >
+          Next
+        </button>
+        </div>
+
+        <div className="flex items-center justify-center gap-2 text-xs text-gray-600 dark:text-gray-400">
+          <span>Go to</span>
+          <input
+            type="number"
+            min={1}
+            max={totalPages}
+            value={jumpValue}
+            onChange={(e) => setJumpValue(e.target.value)}
+            onKeyDown={handleJump}
+            onBlur={handleJump}
+            placeholder="page"
+            className="w-16 rounded border border-gray-300 px-2 py-0.5 text-xs text-center outline-none focus:border-brand-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
+          />
+        </div>
+      </div>
+
+      {/* ── Desktop: full numbered layout (hidden below sm) ── */}
+      <div className="hidden sm:flex items-center justify-between px-6 py-4">
+        <div className="text-sm text-gray-700 dark:text-gray-400">
+          Page {page} of {totalPages}
+        </div>
+        <div className="flex gap-2 items-center">
           <button
-            key={p}
-            onClick={() => onPageChange(p)}
-            className={`rounded-lg border px-3 py-1 text-sm font-medium mx-0.5 ${p === page ? "bg-brand-600 text-white border-brand-600" : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-700"}`}
+            onClick={() => onPageChange(page - 1)}
+            disabled={page === 1}
+            className="rounded-lg border border-gray-300 px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
           >
-            {p}
+            Previous
           </button>
-        ))}
-      {page < totalPages - 2 && (
-        <>
-          <span className="text-gray-400">...</span>
+          {page > 3 && (
+            <>
+              <button
+                onClick={() => onPageChange(1)}
+                className={`rounded-lg border px-3 py-1 text-sm font-medium mx-0.5 ${page === 1 ? "bg-brand-600 text-white border-brand-600" : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-700"}`}
+              >
+                1
+              </button>
+              <span className="text-gray-400">...</span>
+            </>
+          )}
+          {Array.from({ length: totalPages }, (_, i) => i + 1)
+            .filter(
+              (p) =>
+                p === page ||
+                p === page - 1 ||
+                p === page + 1 ||
+                (page <= 3 && p <= 4) ||
+                (page >= totalPages - 2 && p >= totalPages - 3),
+            )
+            .map((p) => (
+              <button
+                key={p}
+                onClick={() => onPageChange(p)}
+                className={`rounded-lg border px-3 py-1 text-sm font-medium mx-0.5 ${p === page ? "bg-brand-600 text-white border-brand-600" : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-700"}`}
+              >
+                {p}
+              </button>
+            ))}
+          {page < totalPages - 2 && (
+            <>
+              <span className="text-gray-400">...</span>
+              <button
+                onClick={() => onPageChange(totalPages)}
+                className={`rounded-lg border px-3 py-1 text-sm font-medium mx-0.5 ${page === totalPages ? "bg-brand-600 text-white border-brand-600" : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-700"}`}
+              >
+                {totalPages}
+              </button>
+            </>
+          )}
           <button
-            onClick={() => onPageChange(totalPages)}
-            className={`rounded-lg border px-3 py-1 text-sm font-medium mx-0.5 ${page === totalPages ? "bg-brand-600 text-white border-brand-600" : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-700"}`}
+            onClick={() => onPageChange(page + 1)}
+            disabled={page === totalPages}
+            className="rounded-lg border border-gray-300 px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
           >
-            {totalPages}
+            Next
           </button>
-        </>
-      )}
-      <button
-        onClick={() => onPageChange(page + 1)}
-        disabled={page === totalPages}
-        className="rounded-lg border border-gray-300 px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
-      >
-        Next
-      </button>
+        </div>
+      </div>
+
     </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>
           )}

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

@@ -1,23 +1,52 @@
 import React from "react";
 
+/**
+ * Skeleton pulse block – light-grey bar that animates.
+ * Width can be "full", "3/4", "1/2", "1/3" or a fixed px value.
+ */
+const SkeletonCell = ({ width = "3/4", height = "h-4" }) => {
+  const widthClass =
+    width === "full" ? "w-full" :
+    width === "3/4"  ? "w-3/4"  :
+    width === "1/2"  ? "w-1/2"  :
+    width === "1/3"  ? "w-1/3"  :
+    width === "1/4"  ? "w-1/4"  : width;
+
+  return (
+    <div
+      className={`${height} ${widthClass} rounded bg-gray-200 dark:bg-gray-700 animate-pulse`}
+    />
+  );
+};
+
+/**
+ * A single skeleton row matching the number of visible columns + optional action column.
+ * Alternates bar widths so the shimmer does not look monotonous.
+ */
+const WIDTHS = ["3/4", "1/2", "full", "1/3", "3/4", "1/2"];
+
+const SkeletonRow = ({ colSpan }) => (
+  <tr className="border-b border-gray-200 dark:border-gray-700">
+    {Array.from({ length: colSpan }).map((_, i) => (
+      <td key={i} className="px-6 py-4">
+        <SkeletonCell width={WIDTHS[i % WIDTHS.length]} />
+      </td>
+    ))}
+  </tr>
+);
+
 /**
  * TableState Component
- * Handles loading and empty states for DataTable
+ * Handles loading (skeleton rows) and empty states for DataTable
  */
-export const TableState = ({ loading, empty, colSpan, emptyText }) => {
+export const TableState = ({ loading, empty, colSpan, emptyText, skeletonRows = 6 }) => {
   if (loading) {
     return (
-      <tr>
-        <td colSpan={colSpan} className="text-center py-8">
-          <div className="flex items-center justify-center gap-2">
-            <svg className="animate-spin h-5 w-5 text-brand-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-            </svg>
-            <span>Loading data...</span>
-          </div>
-        </td>
-      </tr>
+      <>
+        {Array.from({ length: skeletonRows }).map((_, i) => (
+          <SkeletonRow key={i} colSpan={colSpan} />
+        ))}
+      </>
     );
   }
   if (empty) {

package/frontend/react-ui/hooks/index.js

@@ -15,3 +15,4 @@ export { useFocusTrap } from './useFocusTrap.js';
 export { useAnnouncer } from './useAnnouncer.js';
 export { useKeyboardNavigation } from './useKeyboardNavigation.js';
 export { useListNavigation } from './useListNavigation.js';
+export { useMobileDetect } from './useMobileDetect.js';