vasuzex 2.3.14 → 2.3.15

package/CHANGELOG.md

@@ -2,6 +2,47 @@
 
 All notable changes to Vasuzex will be documented in this file.
 
+## [2.3.15] - 2026-04-20
+
+### ✨ Added
+
+#### DataTable — Mobile Card View (`vasuzex/react`)
+
+- **New `mobileCardView` prop** — When `mobileCardView={true}`, DataTable renders `MobileCardList` instead of the standard table on viewports narrower than 640px (Tailwind `sm` breakpoint)
+- **`MobileCardList` component** — Stacked card layout optimised for touch
+  - Column priority system: mark columns as `priority="primary"` (shown full-width, no label), `priority="secondary"` (compact label:value rows), or omit to auto-assign first 3 as primary and rest as secondary
+  - Supports full action set: view, edit, delete, hard-delete (🔥), and restore actions
+  - Skeleton loading state with `animate-pulse` placeholders
+  - Empty-state text support via `emptyText` prop
+- **New `useMobileDetect` hook** — `window.matchMedia`-based viewport detection; no resize listener polling, reacts instantly, SSR-safe fallback
+
+#### Pagination — Mobile Responsive Layout (`vasuzex/react`)
+
+- **Mobile compact mode** (visible on `sm:hidden`): Prev / "Page X of Y" + jump-to-page input / Next
+  - Jump-to-page input: type a page number and press Enter (or blur) to navigate directly
+- **Desktop unchanged**: full numbered page buttons with ellipsis remain as before
+
+#### BreadCrumb — Responsive Props (`vasuzex/react`)
+
+- Added `className` prop for external style overrides
+- Responsive typography and spacing: `text-lg sm:text-xl`, `gap-2 sm:gap-3`, `mb-3 sm:mb-6`
+
+### 🐛 Fixed
+
+#### Filters — Responsive Layout (`vasuzex/react`)
+
+- Moved refresh button inline with rows-per-page selector and showing info (no longer isolated in a separate row)
+- Shortened label: "Rows:" instead of "Rows per page:" — saves horizontal space on small screens
+- Compact showing info format: `1–10 of 50` instead of `Showing 1 to 10 of 50 items`
+
+#### RowActionsCell — Dropdown Clipping Fix (`vasuzex/react`)
+
+- **Root cause**: Dropdown was positioned `absolute` inside the table cell, causing it to be clipped by `overflow-x-auto` on the table container
+- **Fix**: Dropdown now uses `position: fixed` anchored to the trigger button via `getBoundingClientRect()`, with `z-index: 9999` — never clipped by any overflow parent
+- Fixed click-outside detection: separate `btnRef` and `dropdownRef` so clicking the button or inside the menu never incorrectly closes the dropdown
+
+---
+
 ## [2.3.14] - 2026-04-08
 
 ### 🐛 Fixed

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

@@ -28,10 +28,10 @@ const ChevronRightIcon = (props) => (
   </svg>
 );
 
-export const BreadCrumb = ({ title, addLink, addLabel, addIcon, items }) => (
-  <div className="flex flex-wrap items-center justify-between gap-3 mb-6">
+export const BreadCrumb = ({ title, addLink, addLabel, addIcon, items, className }) => (
+  <div className={`flex flex-wrap items-center justify-between gap-2 sm:gap-3 mb-3 sm:mb-6 ${className || ''}`}>
     <div>
-      <h2 className="text-xl font-semibold text-gray-900 dark:text-white">{title}</h2>
+      <h2 className="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white">{title}</h2>
       <nav className="mt-1">
         <ol className="flex items-center gap-1.5">
           {items.map((item, idx) => (

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
@@ -88,8 +91,11 @@ export function DataTable(props) {
     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');
@@ -503,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}
@@ -523,7 +531,48 @@ export function DataTable(props) {
             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}
@@ -559,8 +608,7 @@ export function DataTable(props) {
           </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

@@ -25,35 +25,42 @@ export const Filters = ({
   setTrashed,
 }) => (
   <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>
+    {/* 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) => {
+            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="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: Status filters + Trash tabs + Refresh */}
-      <div className="flex flex-wrap items-center justify-end gap-2">
+    {/* 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">
@@ -80,7 +87,7 @@ export const Filters = ({
 
         {/* 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">
+          <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); }}
@@ -102,18 +109,7 @@ export const Filters = ({
             </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>
-    </div>
+    )}
   </div>
 );

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/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';

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

@@ -0,0 +1,30 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * useMobileDetect
+ *
+ * Detects whether the viewport is below the given breakpoint using
+ * window.matchMedia — no polling, no resize listeners, reacts instantly.
+ *
+ * @param {number} breakpoint - Max-width in px (default 640 = Tailwind `sm`)
+ * @returns {boolean} true when viewport < breakpoint
+ */
+export function useMobileDetect(breakpoint = 640) {
+  const getIsMobile = () =>
+    typeof window !== 'undefined'
+      ? window.matchMedia(`(max-width: ${breakpoint - 1}px)`).matches
+      : false;
+
+  const [isMobile, setIsMobile] = useState(getIsMobile);
+
+  useEffect(() => {
+    const mq = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    const handler = (e) => setIsMobile(e.matches);
+    // Set immediately in case of SSR mismatch
+    setIsMobile(mq.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, [breakpoint]);
+
+  return isMobile;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vasuzex",
-  "version": "2.3.14",
+  "version": "2.3.15",
   "description": "Laravel-inspired framework for Node.js monorepos - V2 with optimized dependencies",
   "type": "module",
   "main": "./framework/index.js",