Facturas de cliente

2025-10-19 00:31:30 +02:00 · 2025-10-19 00:31:30 +02:00 · 94be2d066f
commit 94be2d066f
parent af2997465e
11 changed files with 430 additions and 215 deletions
--- a/biome.json
+++ b/biome.json
@ -31,7 +31,8 @@
      },
      "suspicious": {
        "noImplicitAnyLet": "info",
-        "noExplicitAny": "info"
+        "noExplicitAny": "info",
+        "noArrayIndexKey": "info"
      },
      "style": {
        "useImportType": "off",
--- a/modules/customer-invoices/src/common/locales/en.json
+++ b/modules/customer-invoices/src/common/locales/en.json
@ -14,7 +14,11 @@
    "actions": "Actions",

    "rows_selected": "{{count}} fila(s) seleccionadas.",
-    "rows_selected_of_total": "{{count}} de {{total}} fila(s) seleccionadas."
+    "rows_selected_of_total": "{{count}} de {{total}} fila(s) seleccionadas.",
+
+    "search_placeholder": "Type for search...",
+    "search": "Search",
+    "clear": "Clear"
  },

  "catalog": {
--- a/modules/customer-invoices/src/common/locales/es.json
+++ b/modules/customer-invoices/src/common/locales/es.json
@ -14,7 +14,11 @@
    "actions": "Acciones",

    "rows_selected": "{{count}} fila(s) seleccionadas.",
-    "rows_selected_of_total": "{{count}} de {{total}} fila(s) seleccionadas."
+    "rows_selected_of_total": "{{count}} de {{total}} fila(s) seleccionadas.",
+
+    "search_placeholder": "Escribe aquí para buscar...",
+    "search": "Buscar",
+    "clear": "Limpiar"
  },
  "catalog": {
    "status": {
--- a/modules/customer-invoices/src/web/hooks/use-customer-invoices-query.tsx
+++ b/modules/customer-invoices/src/web/hooks/use-customer-invoices-query.tsx
@ -3,8 +3,17 @@ import { useDataSource } from "@erp/core/hooks";
 import { DefaultError, QueryKey, useQuery } from "@tanstack/react-query";
 import { CustomerInvoicesPage } from '../schemas';

-export const CUSTOMER_INVOICES_QUERY_KEY = (criteria?: CriteriaDTO): QueryKey =>
-  ["customer_invoices", criteria] as const;
+export const CUSTOMER_INVOICES_QUERY_KEY = (criteria: CriteriaDTO): QueryKey => [
+  "customer_invoices", {
+    pageNumber: criteria.pageNumber ?? 0,
+    pageSize: criteria.pageSize ?? 10,
+    q: criteria.q ?? "",
+    filters: criteria.filters ?? [],
+    orderBy: criteria.orderBy ?? "",
+    order: criteria.order ?? "",
+  },
+];
+

 type InvoicesQueryOptions = {
  enabled?: boolean;
@ -21,8 +30,8 @@ export const useInvoicesQuery = (options?: InvoicesQueryOptions) => {
    queryKey: CUSTOMER_INVOICES_QUERY_KEY(criteria),
    queryFn: async ({ signal }) => {
      return await dataSource.getList<CustomerInvoicesPage>("customer-invoices", {
-        ...criteria,
        signal,
+        ...criteria,
      });
    },
    enabled,
--- a/modules/customer-invoices/src/web/pages/list/invoices-list-grid.tsx
+++ b/modules/customer-invoices/src/web/pages/list/invoices-list-grid.tsx
@ -2,9 +2,9 @@ import type { CellKeyDownEvent, RowClickedEvent } from "ag-grid-community";
 import { useCallback, useState } from "react";


-import { DataTable, LoadingOverlay } from '@repo/rdx-ui/components';
-import { Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@repo/shadcn-ui/components';
-import { FileDownIcon, FilterIcon, SearchIcon } from 'lucide-react';
+import { DataTable, SkeletonDataTable } from '@repo/rdx-ui/components';
+import { Button, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Spinner } from '@repo/shadcn-ui/components';
+import { FileDownIcon, FilterIcon, SearchIcon, XIcon } from 'lucide-react';
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "../../i18n";
 import { InvoiceSummaryFormData, InvoicesPageFormData } from '../../schemas';
@ -14,8 +14,13 @@ export type InvoiceUpdateCompProps = {
  invoicesPage: InvoicesPageFormData;
  loading?: boolean;

-  onPageChange?: (pageIndex: number) => void;
+  pageIndex: number;
+  pageSize: number;
+  onPageChange?: (pageNumber: number) => void;
  onPageSizeChange?: (pageSize: number) => void;
+
+  searchValue: string;
+  onSearchChange: (value: string) => void;
 }


@ -23,8 +28,11 @@ export type InvoiceUpdateCompProps = {
 export const InvoicesListGrid = ({
  invoicesPage,
  loading,
+  pageIndex,
+  pageSize,
  onPageChange,
  onPageSizeChange,
+  searchValue, onSearchChange,
 }: InvoiceUpdateCompProps) => {
  const { t } = useTranslation();
  const navigate = useNavigate();
@ -33,8 +41,7 @@ export const InvoicesListGrid = ({
  const [statusFilter, setStatusFilter] = useState("todas");

  const columns = useInvoicesListColumns();
-  const { items, page, per_page, total_pages, total_items } = invoicesPage;
-
+  const { items, total_items } = invoicesPage;

  // Navegación accesible (click o teclado)
  const goToRow = useCallback(
@ -77,6 +84,15 @@ export const InvoicesListGrid = ({
    [goToRow]
  );

+  // Handlers de búsqueda
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value);
+  const handleClear = () => onSearchChange("");
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      // Envío inmediato: forzar “salto” del debounce
+      onSearchChange((e.target as HTMLInputElement).value);
+    }
+  };

  const handleRowClick = useCallback(
    (invoice: InvoiceSummaryFormData, _index: number, e: React.MouseEvent) => {
@ -87,20 +103,53 @@ export const InvoicesListGrid = ({
    [navigate]
  );

+  if (loading) {
+    return (
+      <div className="flex flex-col gap-4">
+        <SkeletonDataTable
+          columns={columns.length}
+          rows={Math.max(6, pageSize)}
+          showFooter
+          footerProps={{ pageIndex, pageSize, totalItems: total_items ?? 0 }}
+        />
+      </div>
+    );
+  }

  // Render principal
  return (
    <div className="flex flex-col gap-4">
      {/* Barra de filtros */}
      <div className="flex flex-col sm:flex-row gap-4 mb-6">
-        <div className="relative flex-1">
-          <SearchIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
-          <Input
-            placeholder="Buscar por número o cliente..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="pl-10 "
+        <div className="relative flex-1" role="search" aria-label={t("pages.list.searchPlaceholder")}>
+
+
+          <InputGroup className='bg-background' data-disabled={loading}>
+            <InputGroupInput
+              placeholder={t("common.search_placeholder")}
+              value={searchValue}
+              onChange={handleInputChange}
+              onKeyDown={handleKeyDown}
+              inputMode="search"
+              autoComplete="off"
+              spellCheck={false}
+              disabled={loading}
            />
+            <InputGroupAddon>
+              <SearchIcon />
+            </InputGroupAddon>
+            <InputGroupAddon align="inline-end">
+              {loading && <Spinner />}
+              {!searchValue && !loading && <InputGroupButton variant='secondary' className='cursor-pointer'>
+                {t("common.search")}
+              </InputGroupButton>}
+              {searchValue && !loading && <InputGroupButton variant='secondary' className='cursor-pointer' aria-label={t("common.clear")} onClick={handleClear}>
+                <XIcon className="size-4" aria-hidden />
+                <span className="sr-only">{t("common.search")}</span>
+              </InputGroupButton>}
+
+            </InputGroupAddon>
+          </InputGroup>
        </div>
        <Select value={statusFilter} onValueChange={setStatusFilter}>
          <SelectTrigger className="w-full sm:w-48 bg-white border-gray-200 shadow-sm">
@ -120,27 +169,22 @@ export const InvoicesListGrid = ({
        </Button>
      </div>
      <div className="overflow-hidden">
+
        <DataTable
          columns={columns}
          data={items}
          readOnly
          enableRowSelection
          enablePagination
+
          manualPagination
-          pageIndex={page - 1}
-          pageSize={per_page}
+          pageIndex={pageIndex} // DataTable usa 0-based
+          pageSize={pageSize}
          totalItems={total_items}
          onPageChange={onPageChange}
          onPageSizeChange={onPageSizeChange}
          onRowClick={handleRowClick}
        />
-
-        {loading && (
-          <div className="absolute inset-0 flex items-center justify-center bg-background/50">
-            <LoadingOverlay />
-          </div>
-        )}
-
      </div>
    </div>
  );
--- a/modules/customer-invoices/src/web/pages/list/invoices-list-page.tsx
+++ b/modules/customer-invoices/src/web/pages/list/invoices-list-page.tsx
@ -1,5 +1,5 @@
 import { ErrorAlert } from '@erp/customers/components';
-import { AppBreadcrumb, AppContent, AppHeader, BackHistoryButton } from "@repo/rdx-ui/components";
+import { AppBreadcrumb, AppContent, AppHeader, BackHistoryButton, useDebounce } from "@repo/rdx-ui/components";
 import { Button } from "@repo/shadcn-ui/components";
 import { FilePenIcon, PlusIcon } from "lucide-react";
 import { useMemo, useState } from 'react';
@ -13,8 +13,20 @@ export const InvoiceListPage = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();

-  const [pageIndex, setOageIndex] = useState(0);
+  const [pageIndex, setPageIndex] = useState(5);
  const [pageSize, setPageSize] = useState(10);
+  const [search, setSearch] = useState("");
+  const debouncedQ = useDebounce(search, 300);
+
+
+  const criteria = useMemo(
+    () => ({
+      q: debouncedQ || "",
+      pageSize,
+      pageNumber: pageIndex,
+    }),
+    [pageSize, pageIndex, debouncedQ]
+  );

  const {
    data,
@ -22,10 +34,7 @@ export const InvoiceListPage = () => {
    isError,
    error,
  } = useInvoicesQuery({
-    criteria: {
-      pageSize,
-      pageNumber: pageIndex
-    }
+    criteria
  });

  const invoicesPageData = useMemo(() => {
@ -38,12 +47,19 @@ export const InvoiceListPage = () => {

  const handlePageChange = (newPageIndex: number) => {
    // TanStack usa pageIndex 0-based → API usa 0-based también
-    setOageIndex(newPageIndex);
+    setPageIndex(newPageIndex);
  };

  const handlePageSizeChange = (newSize: number) => {
    setPageSize(newSize);
-    setOageIndex(0);
+    setPageIndex(0);
+  };
+
+  const handleSearchChange = (value: string) => {
+    // Normalización ligera: recorta y colapsa espacios internos
+    const cleaned = value.trim().replace(/\s+/g, " ");
+    setSearch(cleaned);
+    setPageIndex(0);
  };

  if (isError || !invoicesPageData) {
@ -70,22 +86,6 @@ export const InvoiceListPage = () => {


        />
-        {/* Header */}
-        <div className="flex items-center justify-between mb-6">
-          <div>
-            <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-600 to-violet-600 bg-clip-text text-transparent mb-2">
-              Facturas
-            </h1>
-            <p className="text-gray-600">Gestiona y consulta todas tus facturas de cliente</p>
-          </div>
-
-          <Button onClick={() => navigate(-1)} className="bg-gradient-to-r from-blue-600 to-violet-600 hover:from-blue-700 hover:to-violet-700 text-white shadow-lg shadow-blue-500/30">
-            <PlusIcon className="mr-2 h-4 w-4" />
-            Nueva Factura
-          </Button>
-
-        </div>
-
      </AppHeader>
      <AppContent>
        <div className='flex items-center justify-between space-y-6'>
@ -108,8 +108,12 @@ export const InvoiceListPage = () => {
          <InvoicesListGrid
            invoicesPage={invoicesPageData}
            loading={isLoading}
+            pageIndex={pageIndex}
+            pageSize={pageSize}
            onPageChange={handlePageChange}
            onPageSizeChange={handlePageSizeChange}
+            searchValue={search}
+            onSearchChange={handleSearchChange}
          />
        </div>
      </AppContent>
--- a/packages/rdx-ui/src/components/datatable/data-table-pagination.tsx
+++ b/packages/rdx-ui/src/components/datatable/data-table-pagination.tsx
@ -21,14 +21,19 @@ import { DataTableMeta } from './data-table.tsx';

 interface DataTablePaginationProps<TData> {
  table: Table<TData>;
+  onPageChange?: (pageIndex: number) => void;
+  onPageSizeChange?: (pageSize: number) => void;
+
  className?: string;
 }

-export function DataTablePagination<TData>({ table, className }: DataTablePaginationProps<TData>) {
+export function DataTablePagination<TData>({
+  table, onPageChange, onPageSizeChange, className }: DataTablePaginationProps<TData>) {
  const { t } = useTranslation();

  const { pageIndex: rawIndex, pageSize: rawSize } = table.getState().pagination;
-  const totalRows = (table.options.meta as DataTableMeta<TData>)?.totalItems ?? table.getFilteredRowModel().rows.length;
+  const meta = table.options.meta as DataTableMeta<TData>;
+  const totalRows = meta?.totalItems ?? table.getFilteredRowModel().rows.length;

  // Normalización segura
  const pageIndex = Number.isFinite(rawIndex) && rawIndex >= 0 ? rawIndex : 0;
@ -41,23 +46,28 @@ export function DataTablePagination<TData>({ table, className }: DataTablePagina
  const start = totalRows > 0 ? pageIndex * pageSize + 1 : 0;
  const end = totalRows > 0 ? Math.min(start + pageSize - 1, totalRows) : 0;

+  // Handlers de navegación controlada
+  const notify = (next: Partial<{ pageIndex: number; pageSize: number }>) =>
+    table.options.onPaginationChange?.({ pageIndex, pageSize, ...next });
+
+  const gotoPage = (index: number) => onPageChange ? onPageChange(index) : notify({ pageIndex: index });
+  const handlePageSizeChange = (size: string) => onPageSizeChange ?
+    onPageSizeChange(Number(size)) :
+    notify({ pageSize: Number(size) });
+
+  const gotoPreviousPage = () => gotoPage(pageIndex - 1);
+  const gotoNextPage = () => gotoPage(pageIndex + 1);
+  const gotoFirstPage = () => gotoPage(0);
+  const gotoLastPage = () => gotoPage(pageCount - 1);
+
  return (
-    <div className={cn(
-      "flex items-center justify-between",
-      className
-    )}>
+    <div className={cn("flex items-center justify-between", className)}>
      {/* Información izquierda */}
      <div className="flex flex-col sm:flex-row items-center gap-4 flex-1 text-sm text-muted-foreground">
-        {/* Rango visible */}
        <span aria-live="polite">
-          {t("components.datatable.pagination.showing_range", {
-            start,
-            end,
-            total: totalRows,
-          })}
+          {t("components.datatable.pagination.showing_range", { start, end, total: totalRows })}
        </span>

-        {/* Selección de filas */}
        {hasSelected && (
          <span aria-live="polite">
            {t("components.datatable.pagination.rows_selected", {
@ -68,13 +78,8 @@ export function DataTablePagination<TData>({ table, className }: DataTablePagina
        )}

        <div className="flex items-center gap-2">
-          <span className="text-sm text-muted-foreground text-nowrap">
-            {t("components.datatable.pagination.rows_per_page")}
-          </span>
-          <Select
-            value={String(pageSize)}
-            onValueChange={(value) => table.setPageSize(Number(value))}
-          >
+          <span>{t("components.datatable.pagination.rows_per_page")}</span>
+          <Select value={String(pageSize)} onValueChange={handlePageSizeChange}>
            <SelectTrigger className="w-20 h-8 bg-white border-gray-200">
              <SelectValue placeholder={String(pageSize)} />
            </SelectTrigger>
@ -86,6 +91,7 @@ export function DataTablePagination<TData>({ table, className }: DataTablePagina
              ))}
            </SelectContent>
          </Select>
+          {pageIndex + 1} / {pageCount}
        </div>
      </div>

@ -93,63 +99,61 @@ export function DataTablePagination<TData>({ table, className }: DataTablePagina
      <div className="flex items-center gap-2">
        <Pagination>
          <PaginationContent>
-            {/* Primera página */}
            <PaginationItem>
              <PaginationLink
                aria-label={t("components.datatable.pagination.goto_first_page")}
-                onClick={() => table.setPageIndex(0)}
-                isActive={!table.getCanPreviousPage()}
+                onClick={() => {
+                  if (pageIndex > 0) gotoFirstPage();
+                }}
+                isActive={pageIndex > 0}
                size="sm"
-                className="px-2.5"
+                className="px-2.5 cursor-pointer"
              >
                <ChevronsLeftIcon className="size-4" />
              </PaginationLink>
            </PaginationItem>

-            {/* Anterior */}
            <PaginationItem>
              <PaginationLink
                aria-label={t("components.datatable.pagination.goto_previous_page")}
-                onClick={() => table.previousPage()}
-                isActive={!table.getCanPreviousPage()}
+                onClick={() => {
+                  if (pageIndex > 0) gotoPreviousPage();
+                }}
+                isActive={pageIndex > 0}
                size="sm"
-                className="px-2.5"
+                className="px-2.5 cursor-pointer"
              >
                <ChevronLeftIcon className="size-4" />
              </PaginationLink>
            </PaginationItem>

-            <span
-              className="text-sm text-muted-foreground px-2"
-              aria-live="polite"
-            >
-              {t("components.datatable.pagination.page_of", {
-                page: pageIndex + 1,
-                of: pageCount || 1,
-              })}
+            <span className="text-sm text-muted-foreground px-2" aria-live="polite">
+              {t("components.datatable.pagination.page_of", { page: pageIndex + 1, of: pageCount })}
            </span>

-            {/* Siguiente */}
            <PaginationItem>
              <PaginationLink
                aria-label={t("components.datatable.pagination.goto_next_page")}
-                onClick={() => table.nextPage()}
-                isActive={!table.getCanNextPage()}
+                onClick={() => {
+                  if (pageIndex < pageCount - 1) gotoNextPage();
+                }}
+                isActive={pageIndex < pageCount - 1}
                size="sm"
-                className="px-2.5"
+                className="px-2.5 cursor-pointer"
              >
                <ChevronRightIcon className="size-4" />
              </PaginationLink>
            </PaginationItem>

-            {/* Última página */}
            <PaginationItem>
              <PaginationLink
                aria-label={t("components.datatable.pagination.goto_last_page")}
-                onClick={() => table.setPageIndex(pageCount - 1)}
-                isActive={!table.getCanNextPage()}
+                onClick={() => {
+                  if (pageIndex < pageCount - 1) gotoLastPage();
+                }}
+                isActive={pageIndex < pageCount - 1}
                size="sm"
-                className="px-2.5"
+                className="px-2.5 cursor-pointer"
              >
                <ChevronsRightIcon className="size-4" />
              </PaginationLink>
--- a/packages/rdx-ui/src/components/datatable/data-table.tsx
+++ b/packages/rdx-ui/src/components/datatable/data-table.tsx
@ -101,7 +101,7 @@ export function DataTable<TData, TValue>({

  readOnly = false,
  enablePagination = true,
-  pageSize = 25,
+  pageSize = 10,
  enableRowSelection = false,
  EditorComponent,

@ -145,10 +145,7 @@ export function DataTable<TData, TValue>({
      columnVisibility,
      rowSelection,
      columnFilters,
-      pagination: {
-        pageIndex,
-        pageSize,
-      },
+      pagination: { pageIndex, pageSize },
    },

    manualPagination,
@ -156,13 +153,14 @@ export function DataTable<TData, TValue>({
      ? Math.ceil((totalItems ?? data.length) / (pageSize ?? 25))
      : undefined,

+    // Propagar cambios al padre
    onPaginationChange: (updater) => {
-      const next =
-        typeof updater === "function"
+      const next = typeof updater === "function"
        ? updater({ pageIndex, pageSize })
        : updater;
-      if (next.pageIndex !== undefined) onPageChange?.(next.pageIndex);
-      if (next.pageSize !== undefined) onPageSizeChange?.(next.pageSize);
+
+      if (typeof next.pageIndex === "number") onPageChange?.(next.pageIndex);
+      if (typeof next.pageSize === "number") onPageSizeChange?.(next.pageSize);
    },

    enableRowSelection,
@ -183,6 +181,10 @@ export function DataTable<TData, TValue>({

  // Render principal
  return (
+    <div
+      className="overflow-hidden transition-[max-height] duration-300 ease-in-out"
+      style={{ maxHeight: `${table.getRowModel().rows.length * 56}px` }} // 56≈altura fila
+    >
      <div className="flex flex-col gap-0">
        <DataTableToolbar table={table} showViewOptions={!readOnly} />

@ -267,7 +269,7 @@ export function DataTable<TData, TValue>({
              <TableFooter>
                <TableRow>
                  <TableCell colSpan={100}>
-                  <DataTablePagination table={table} />
+                    <DataTablePagination table={table} onPageChange={onPageChange} onPageSizeChange={onPageSizeChange} />
                  </TableCell>
                </TableRow>
              </TableFooter>)
@ -276,8 +278,6 @@ export function DataTable<TData, TValue>({
          </TableComp>
        </div>

-
-
        {/* Editor modal */}
        {EditorComponent && editIndex !== null && (
          <Dialog open onOpenChange={handleCloseEditor}>
@ -304,5 +304,6 @@ export function DataTable<TData, TValue>({
          </Dialog>
        )}
      </div>
+    </div>
  )
 }
--- a/packages/rdx-ui/src/components/datatable/index.tsx
+++ b/packages/rdx-ui/src/components/datatable/index.tsx
@ -1,4 +1,5 @@
 export * from "./data-table-column-header.tsx";
 export * from "./data-table.tsx";

+export * from "./skeleton-data-table.tsx";
 export * from "./with-row-selection.tsx";
--- a/packages/rdx-ui/src/components/datatable/skeleton-data-table-footer.tsx
+++ b/packages/rdx-ui/src/components/datatable/skeleton-data-table-footer.tsx
@ -0,0 +1,69 @@
+// SkeletonTableFooter.tsx
+
+/** Skeleton del footer de paginación, imita DataTablePagination */
+export function SkeletonDataTableFooter({
+    pageIndex = 0,
+    pageSize = 10,
+    totalItems = 0,
+}: {
+    pageIndex?: number; // 0-based
+    pageSize?: number;
+    totalItems?: number;
+}) {
+    // Cálculo de rango (1-based visual)
+    const start = totalItems > 0 ? pageIndex * pageSize + 1 : 0;
+    const end = totalItems > 0 ? Math.min(start + pageSize - 1, totalItems) : 0;
+
+    return (
+        <div
+            role="status"
+            aria-busy="true"
+            className="flex items-center justify-between border-t border-border px-4 py-3 bg-background"
+        >
+            {/* Izquierda: rango visible */}
+            <div className="flex flex-col sm:flex-row items-center gap-4 flex-1 text-sm text-muted-foreground">
+                <span aria-live="polite">
+                    {/* Texto real + shimmer leve para coherencia visual */}
+                    {`Mostrando ${start}–${end} de ${totalItems} registros`}
+                </span>
+
+                {/* 'Filas por página' + trigger del select simulado */}
+                <div className="flex items-center gap-2">
+                    <span>Filas por página</span>
+                    <div
+                        className="h-8 w-20 rounded bg-foreground/10 animate-pulse motion-reduce:animate-none"
+                        aria-hidden
+                    />
+                </div>
+            </div>
+
+            {/* Derecha: controles de paginación simulados */}
+            <div className="flex items-center gap-2">
+                {/* Primera */}
+                <div
+                    className="h-8 w-8 rounded-md bg-foreground/10 animate-pulse motion-reduce:animate-none"
+                    aria-hidden
+                />
+                {/* Anterior */}
+                <div
+                    className="h-8 w-8 rounded-md bg-foreground/10 animate-pulse motion-reduce:animate-none"
+                    aria-hidden
+                />
+                {/* Indicador de página */}
+                <div className="h-5 w-28 rounded bg-foreground/10 animate-pulse motion-reduce:animate-none" />
+                {/* Siguiente */}
+                <div
+                    className="h-8 w-8 rounded-md bg-foreground/10 animate-pulse motion-reduce:animate-none"
+                    aria-hidden
+                />
+                {/* Última */}
+                <div
+                    className="h-8 w-8 rounded-md bg-foreground/10 animate-pulse motion-reduce:animate-none"
+                    aria-hidden
+                />
+            </div>
+
+            <span className="sr-only">Loading pagination…</span>
+        </div>
+    );
+}
--- a/packages/rdx-ui/src/components/datatable/skeleton-data-table.tsx
+++ b/packages/rdx-ui/src/components/datatable/skeleton-data-table.tsx
@ -0,0 +1,74 @@
+import {
+    TableBody,
+    TableCell,
+    Table as TableComp,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@repo/shadcn-ui/components";
+// SkeletonTable.tsx
+import * as React from "react";
+import { SkeletonDataTableFooter } from './skeleton-data-table-footer.tsx';
+
+export type SkeletonTableProps = {
+    columns?: number;
+    rows?: number;
+    stickyHeader?: boolean;
+    showFooter?: boolean;
+    footerProps?: { pageIndex?: number; pageSize?: number; totalItems?: number };
+}
+
+// Componente Skeleton de tabla genérico
+export const SkeletonDataTable = ({
+    columns = 6,
+    rows = 10,
+    stickyHeader = true,
+    showFooter = true,
+    footerProps,
+}: SkeletonTableProps) => {
+    // Genera arrays para mapear
+    const cols = React.useMemo(() => Array.from({ length: columns }), [columns]);
+    const rws = React.useMemo(() => Array.from({ length: rows }), [rows]);
+
+    return (
+        <div className="overflow-hidden rounded-md border bg-background" role="status" aria-busy="true">
+            <TableComp className="w-full text-sm">
+                <TableHeader className={stickyHeader ? "sticky top-0 z-10 bg-muted" : ""}>
+                    <TableRow>
+                        {cols.map((_, i) => (
+                            <TableHead key={`sk-th-${i}`}>
+                                <div className="h-4 w-24 rounded bg-foreground/10 animate-pulse motion-reduce:animate-none" />
+                            </TableHead>
+                        ))}
+                    </TableRow>
+                </TableHeader>
+
+                <TableBody>
+                    {rws.map((_, r) => (
+                        <TableRow key={`sk-tr-${r}`}>
+                            {cols.map((_, c) => (
+                                <TableCell key={`sk-td-${r}-${c}`} className="align-top">
+                                    <div
+                                        className={[
+                                            "h-4 rounded bg-foreground/10 animate-pulse motion-reduce:animate-none",
+                                            c === 0 ? "w-36" : "w-full",
+                                            "my-2",
+                                        ].join(" ")}
+                                        style={{ maxWidth: c % 3 === 0 ? "14rem" : c % 3 === 1 ? "10rem" : "100%" }}
+                                    />
+                                    {c > 0 && (
+                                        <div className="mt-2 h-3 w-1/2 rounded bg-foreground/10 animate-pulse motion-reduce:animate-none" />
+                                    )}
+                                </TableCell>
+                            ))}
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </TableComp>
+
+            {showFooter && <SkeletonDataTableFooter {...footerProps} />}
+
+            <span className="sr-only">Loading table…</span>
+        </div>
+    );
+}