Facturas de cliente

modules/core/src/api/infrastructure/sequelize/sequelize-error-translator.ts

@@ -56,7 +56,7 @@ export function translateSequelizeError(err: unknown): Error {
       return DomainValidationError.invalidFormat(d.path, d.message, { cause: err });
     }
 
-    return new ValidationErrorCollection(details, { cause: err });
+    return new ValidationErrorCollection("Invalid data provided", details, { cause: err });
   }
 
   // 4) Conectividad / indisponibilidad (transitorio)

modules/core/src/common/dto/base.schemas.ts

@@ -10,7 +10,7 @@ import { z } from "zod/v4";
 
 export const NumericStringSchema = z
   .string()
-  .regex(/^\d$/, { message: "Must be empty or contain only digits (0-9)." });
+  .regex(/^\d*$/, { message: "Must be empty or contain only digits (0-9)." });
 
 // Cantidad de dinero (base): solo para la cantidad y la escala, sin moneda
 export const AmountBaseSchema = z.object({

modules/core/src/common/dto/list-view.response.dto.ts

@@ -7,12 +7,17 @@ import { MetadataSchema } from "./metadata.dto";
  * @param itemSchema Esquema Zod del elemento T
  * @returns Zod schema para ListViewDTO<T>
  */
-export const createListViewResponseSchema = <T extends z.ZodTypeAny>(itemSchema: T) =>
+export const PaginationSchema = z.object({
-  z.object({
   page: z.number().int().min(1, "Page must be a positive integer"),
   per_page: z.number().int().min(1, "Items per page must be a positive integer"),
   total_pages: z.number().int().min(0, "Total pages must be a non-negative integer"),
   total_items: z.number().int().min(0, "Total items must be a non-negative integer"),
+});
+
+export type Pagination = z.infer<typeof PaginationSchema>;
+
+export const createPaginatedListSchema = <T extends z.ZodTypeAny>(itemSchema: T) =>
+  PaginationSchema.extend({
     items: z.array(itemSchema),
     metadata: MetadataSchema.optional(),
   });

modules/core/src/common/helpers/money-dto-helper.ts

@@ -46,7 +46,7 @@ const fromNumericString = (amount?: string, currency: string = "EUR", scale = 2)
   if (!amount || amount?.trim?.() === "") {
     return {
       value: "",
-      scale: "",
+      scale: String(scale),
       currency_code: currency,
     };
   }

modules/core/src/common/helpers/percentage-dto-helpers.ts

@@ -42,7 +42,7 @@ const fromNumericString = (amount?: string, scale = 2): PercentageDTO => {
   if (!amount || amount?.trim?.() === "") {
     return {
       value: "",
-      scale: "",
+      scale: String(scale),
     };
   }
   return {

modules/core/src/common/helpers/quantity-dto-helpers.ts

@@ -42,7 +42,7 @@ const fromNumericString = (amount?: string, scale = 2): QuantityDTO => {
   if (!amount || amount?.trim?.() === "") {
     return {
       value: "",
-      scale: "",
+      scale: String(scale),
     };
   }
   return {

modules/core/src/web/lib/data-source/axios/create-axios-data-source.ts

@@ -41,11 +41,11 @@ export const createAxiosDataSource = (client: AxiosInstance): IDataSource => {
   return {
     getBaseUrl: () => (client as AxiosInstance).getUri(),
 
-    getList: async <T, R>(resource: string, params?: Record<string, unknown>): Promise<R> => {
+    getList: async <T>(resource: string, params?: Record<string, unknown>): Promise<T> => {
       const { signal, ...rest } = params as any; // en 'rest' puede venir el "criteria".
 
       const res = await (client as AxiosInstance).get<T[]>(resource, { signal, params: rest });
-      return <R>res.data;
+      return <T>res.data;
     },
 
     getOne: async <T>(resource: string, id: string | number, params?: Record<string, unknown>) => {

modules/core/src/web/lib/data-source/datasource.interface.ts

@@ -14,7 +14,7 @@ export interface ICustomParams {
 
 export interface IDataSource {
   getBaseUrl(): string;
-  getList<T, R>(resource: string, params?: Record<string, unknown>): Promise<R>;
+  getList<T>(resource: string, params?: Record<string, unknown>): Promise<T>;
   getOne<T>(resource: string, id: string | number, params?: Record<string, unknown>): Promise<T>;
   getMany<T, R>(resource: string, ids: Array<string | number>): Promise<R>;
   createOne<T>(resource: string, data: Partial<T>, params?: Record<string, unknown>): Promise<T>;

modules/customer-invoices/src/api/application/helpers/map-dto-to-customer-invoice-items-props.ts

@@ -2,12 +2,14 @@ import {
   ValidationErrorCollection,
   ValidationErrorDetail,
   extractOrPushError,
+  maybeFromNullableVO,
 } from "@repo/rdx-ddd";
 import { Result } from "@repo/rdx-utils";
 import { CreateCustomerInvoiceRequestDTO } from "../../../common";
 import {
   CustomerInvoiceItem,
   CustomerInvoiceItemDescription,
+  CustomerInvoiceItemProps,
   ItemAmount,
   ItemDiscount,
   ItemQuantity,
@@ -24,44 +26,40 @@ export function mapDTOToCustomerInvoiceItemsProps(
     const path = (field: string) => `items[${index}].${field}`;
 
     const description = extractOrPushError(
-      CustomerInvoiceItemDescription.create(item.description),
+      maybeFromNullableVO(item.description, (value) =>
+        CustomerInvoiceItemDescription.create(value)
+      ),
       path("description"),
       errors
     );
 
     const quantity = extractOrPushError(
-      ItemQuantity.create({
+      maybeFromNullableVO(item.quantity, (value) => ItemQuantity.create({ value })),
-        value: Number(item.quantity),
-      }),
       path("quantity"),
       errors
     );
 
-    const unitPrice = extractOrPushError(
+    const unitAmount = extractOrPushError(
-      ItemAmount.create({
+      maybeFromNullableVO(item.unit_amount, (value) => ItemAmount.create({ value })),
-        value: item.unitPrice.amount,
+      path("unit_amount"),
-        scale: item.unitPrice.scale,
-        currency_code: item.unitPrice.currency,
-      }),
-      path("unit_price"),
       errors
     );
 
-    const discount = extractOrPushError(
+    const discountPercentage = extractOrPushError(
-      ItemDiscount.create({
+      maybeFromNullableVO(item.discount_percentage, (value) => ItemDiscount.create({ value })),
-        value: item.discount.amount,
+      path("discount_percentage"),
-        scale: item.discount.scale,
-      }),
-      path("discount"),
       errors
     );
 
     if (errors.length === 0) {
-      const itemProps = {
+      const itemProps: CustomerInvoiceItemProps = {
         description: description,
         quantity: quantity,
-        unitPrice: unitPrice,
+        unitAmount: unitAmount,
-        discount: discount,
+        discountPercentage: discountPercentage,
+        //currencyCode,
+        //languageCode,
+        //taxes:
       };
 
       if (hasNoUndefinedFields(itemProps)) {
@@ -77,7 +75,7 @@ export function mapDTOToCustomerInvoiceItemsProps(
     }
 
     if (errors.length > 0) {
-      return Result.fail(new ValidationErrorCollection(errors));
+      return Result.fail(new ValidationErrorCollection("Invoice items dto mapping failed", errors));
     }
   });
 

modules/customer-invoices/src/api/application/helpers/map-dto-to-customer-invoice-props.ts

@@ -66,7 +66,7 @@ export function mapDTOToCustomerInvoiceProps(dto: CreateCustomerInvoiceRequestDT
   }
 
   if (errors.length > 0) {
-    return Result.fail(new ValidationErrorCollection("Customer dto mapping failed", errors));
+    return Result.fail(new ValidationErrorCollection("Invoice dto mapping failed", errors));
   }
 
   const invoiceProps: CustomerInvoiceProps = {

modules/customer-invoices/src/api/application/presenters/queries/list-customer-invoices.presenter.ts

@@ -12,6 +12,7 @@ export class ListCustomerInvoicesPresenter extends Presenter {
     const invoiceDTO: ArrayElement<ListCustomerInvoicesResponseDTO["items"]> = {
       id: invoice.id.toString(),
       company_id: invoice.companyId.toString(),
+      is_proforma: invoice.isProforma,
       customer_id: invoice.customerId.toString(),
 
       invoice_number: toEmptyString(invoice.invoiceNumber, (value) => value.toString()),
@@ -20,6 +21,8 @@ export class ListCustomerInvoicesPresenter extends Presenter {
 
       invoice_date: invoice.invoiceDate.toDateString(),
       operation_date: toEmptyString(invoice.operationDate, (value) => value.toDateString()),
+      reference: toEmptyString(invoice.reference, (value) => value.toString()),
+      description: toEmptyString(invoice.description, (value) => value.toString()),
 
       recipient: {
         customer_id: invoice.customerId.toString(),
@@ -32,6 +35,7 @@ export class ListCustomerInvoicesPresenter extends Presenter {
       taxes: invoice.taxes,
 
       subtotal_amount: invoice.subtotalAmount.toObjectString(),
+      discount_percentage: invoice.discountPercentage.toObjectString(),
       discount_amount: invoice.discountAmount.toObjectString(),
       taxable_amount: invoice.taxableAmount.toObjectString(),
       taxes_amount: invoice.taxesAmount.toObjectString(),

modules/customer-invoices/src/api/application/use-cases/create/map-dto-to-create-customer-invoice-props.ts

@@ -72,7 +72,7 @@ export class CreateCustomerInvoicePropsMapper {
       );
 
       const invoiceNumber = extractOrPushError(
-        CustomerInvoiceNumber.create(dto.invoice_number),
+        maybeFromNullableVO(dto.invoice_number, (value) => CustomerInvoiceNumber.create(value)),
         "invoice_number",
         this.errors
       );

modules/customer-invoices/src/api/infrastructure/mappers/domain/customer-invoice-item.mapper.ts

@@ -148,7 +148,7 @@ export class CustomerInvoiceItemDomainMapper
 
     if (createResult.isFailure) {
       return Result.fail(
-        new ValidationErrorCollection([
+        new ValidationErrorCollection("Invoice item entity creation failed", [
           { path: `items[${index}]`, message: createResult.error.message },
         ])
       );

modules/customer-invoices/src/api/infrastructure/mappers/domain/customer-invoice.mapper.ts

@@ -235,7 +235,9 @@ export class CustomerInvoiceDomainMapper
 
       // 5) Si hubo errores de mapeo, devolvemos colección de validación
       if (errors.length > 0) {
-        return Result.fail(new ValidationErrorCollection(errors));
+        return Result.fail(
+          new ValidationErrorCollection("Customer invoice mapping failed [mapToDomain]", errors)
+        );
       }
 
       // 6) Construcción del agregado (Dominio)
@@ -279,7 +281,9 @@ export class CustomerInvoiceDomainMapper
 
       if (createResult.isFailure) {
         return Result.fail(
-          new ValidationErrorCollection([{ path: "invoice", message: createResult.error.message }])
+          new ValidationErrorCollection("Customer invoice entity creation failed", [
+            { path: "invoice", message: createResult.error.message },
+          ])
         );
       }
 
@@ -338,7 +342,9 @@ export class CustomerInvoiceDomainMapper
 
     // 7) Si hubo errores de mapeo, devolvemos colección de validación
     if (errors.length > 0) {
-      return Result.fail(new ValidationErrorCollection(errors));
+      return Result.fail(
+        new ValidationErrorCollection("Customer invoice mapping to persistence failed", errors)
+      );
     }
 
     const invoiceValues: CustomerInvoiceCreationAttributes = {

modules/customer-invoices/src/api/infrastructure/mappers/domain/invoice-recipient.mapper.ts

@@ -106,7 +106,9 @@ export class InvoiceRecipientDomainMapper {
 
     if (createResult.isFailure) {
       return Result.fail(
-        new ValidationErrorCollection([{ path: "recipient", message: createResult.error.message }])
+        new ValidationErrorCollection("Invoice recipient entity creation failed", [
+          { path: "recipient", message: createResult.error.message },
+        ])
       );
     }
 

modules/customer-invoices/src/api/infrastructure/mappers/domain/item-taxes.mapper.ts

@@ -68,7 +68,7 @@ export class ItemTaxesDomainMapper
     const createResult = Tax.create(tax!);
     if (createResult.isFailure) {
       return Result.fail(
-        new ValidationErrorCollection([
+        new ValidationErrorCollection("Invoice item tax creation failed", [
           { path: `taxes[${index}]`, message: createResult.error.message },
         ])
       );

modules/customer-invoices/src/api/infrastructure/mappers/queries/customer-invoice.list.mapper.ts

@@ -38,6 +38,7 @@ export type CustomerInvoiceListDTO = {
   invoiceDate: UtcDate;
   operationDate: Maybe<UtcDate>;
 
+  reference: Maybe<string>;
   description: Maybe<string>;
 
   customerId: UniqueID;

modules/customer-invoices/src/common/dto/request/update-customer-invoice-by-id.request.dto.ts

@@ -20,7 +20,8 @@ export const UpdateCustomerInvoiceByIdRequestSchema = z.object({
   language_code: z.string().optional(),
   currency_code: z.string().optional(),
 
-  items: z.array(
+  items: z
+    .array(
       z.object({
         is_non_valued: z.string().optional(),
 
@@ -32,7 +33,9 @@ export const UpdateCustomerInvoiceByIdRequestSchema = z.object({
 
         tax_codes: z.array(z.string()).default([]),
       })
-  ),
+    )
+    .optional()
+    .default([]),
 });
 
 export type UpdateCustomerInvoiceByIdRequestDTO = Partial<

modules/customer-invoices/src/common/dto/response/list-customer-invoices.response.dto.ts

@@ -1,10 +1,17 @@
-import { MetadataSchema, MoneySchema, createListViewResponseSchema } from "@erp/core";
+import {
+  MetadataSchema,
+  MoneySchema,
+  PercentageSchema,
+  createPaginatedListSchema,
+} from "@erp/core";
 import { z } from "zod/v4";
 
-export const ListCustomerInvoicesResponseSchema = createListViewResponseSchema(
+export const ListCustomerInvoicesResponseSchema = createPaginatedListSchema(
   z.object({
     id: z.uuid(),
     company_id: z.uuid(),
+    is_proforma: z.boolean(),
+
     customer_id: z.string(),
 
     invoice_number: z.string(),
@@ -17,7 +24,10 @@ export const ListCustomerInvoicesResponseSchema = createListViewResponseSchema(
     language_code: z.string(),
     currency_code: z.string(),
 
-    recipient: {
+    reference: z.string(),
+    description: z.string(),
+
+    recipient: z.object({
       tin: z.string(),
       name: z.string(),
       street: z.string(),
@@ -26,11 +36,12 @@ export const ListCustomerInvoicesResponseSchema = createListViewResponseSchema(
       postal_code: z.string(),
       province: z.string(),
       country: z.string(),
-    },
+    }),
 
     taxes: z.string(),
 
     subtotal_amount: MoneySchema,
+    discount_percentage: PercentageSchema,
     discount_amount: MoneySchema,
     taxable_amount: MoneySchema,
     taxes_amount: MoneySchema,

modules/customer-invoices/src/common/locales/en.json

@@ -36,12 +36,15 @@
         "invoice_number": "Inv. number",
         "series": "Serie",
         "status": "Status",
-        "invoice_date": "Date",
+        "invoice_date": "Invoice date",
-        "recipient_tin": "Customer TIN",
+        "operation_date": "Operation date",
+        "recipient_tin": "TIN",
         "recipient_name": "Customer name",
-        "recipient_city": "Customer city",
+        "recipient_street": "Street",
-        "recipient_province": "Customer province",
+        "recipient_city": "City",
-        "recipient_postal_code": "Customer postal code",
+        "recipient_province": "Province",
+        "recipient_postal_code": "Postal code",
+        "recipient_country": "Country",
         "total_amount": "Total price"
       }
     },

modules/customer-invoices/src/common/locales/es.json

@@ -35,13 +35,16 @@
         "invoice_number": "Nº factura",
         "series": "Serie",
         "status": "Estado",
-        "invoice_date": "Fecha",
+        "invoice_date": "Fecha de factura",
-        "recipient_tin": "NIF cliente",
+        "operation_date": "Fecha de operación",
-        "recipient_name": "Nombre cliente",
+        "recipient_tin": "NIF/CIF",
-        "recipient_city": "Ciudad cliente",
+        "recipient_name": "Cliente",
-        "recipient_province": "Provincia cliente",
+        "recipient_street": "Dirección",
-        "recipient_postal_code": "Código postal cliente",
+        "recipient_city": "Ciudad",
-        "total_amount": "Precio total"
+        "recipient_province": "Provincia",
+        "recipient_postal_code": "Código postal",
+        "recipient_country": "País",
+        "total_amount": "Importe total"
       }
     },
     "create": {

modules/customer-invoices/src/web/components/customer-invoice-status-badge.tsx

@@ -3,44 +3,46 @@ import { cn } from "@repo/shadcn-ui/lib/utils";
 import { forwardRef } from "react";
 import { useTranslation } from "../i18n";
 
-export type CustomerInvoiceStatus = "draft" | "issued" | "sent" | "received" | "rejected";
+export type CustomerInvoiceStatus = "draft" | "sent" | "approved" | "rejected" | "issued";
 
 export type CustomerInvoiceStatusBadgeProps = {
-  status: string; // permitir cualquier valor
+  status: string | CustomerInvoiceStatus; // permitir cualquier valor
+  dotVisible?: boolean;
   className?: string;
 };
 
 const statusColorConfig: Record<CustomerInvoiceStatus, { badge: string; dot: string }> = {
   draft: {
     badge:
-      "bg-gray-600/10 dark:bg-gray-600/20 hover:bg-gray-600/10 text-gray-500 border-gray-600/60",
+      "bg-gray-500/10 dark:bg-gray-500/20 hover:bg-gray-500/10 text-gray-600 border-gray-400/60",
     dot: "bg-gray-500",
   },
-  issued: {
-    badge:
-      "bg-amber-600/10 dark:bg-amber-600/20 hover:bg-amber-600/10 text-amber-500 border-amber-600/60",
-    dot: "bg-amber-500",
-  },
   sent: {
     badge:
-      "bg-cyan-600/10 dark:bg-cyan-600/20 hover:bg-cyan-600/10 text-cyan-500 border-cyan-600/60 shadow-none rounded-full",
+      "bg-amber-500/10 dark:bg-amber-500/20 hover:bg-amber-500/10 text-amber-500 border-amber-600/60",
-    dot: "bg-cyan-500",
+    dot: "bg-amber-500",
   },
-  received: {
+  approved: {
     badge:
-      "bg-emerald-600/10 dark:bg-emerald-600/20 hover:bg-emerald-600/10 text-emerald-500 border-emerald-600/60",
+      "bg-emerald-500/10 dark:bg-emerald-500/20 hover:bg-emerald-500/10 text-emerald-500 border-emerald-600/60",
     dot: "bg-emerald-500",
   },
   rejected: {
-    badge: "bg-red-600/10 dark:bg-red-600/20 hover:bg-red-600/10 text-red-500 border-red-600/60",
+    badge:
+      "bg-red-500/10 dark:bg-red-500/20 hover:bg-red-500/10 text-red-500 border-red-600/60",
     dot: "bg-red-500",
   },
+  issued: {
+    badge:
+      "bg-blue-600/10 dark:bg-blue-600/20 hover:bg-blue-600/10 text-blue-500 border-blue-600/60",
+    dot: "bg-blue-500",
+  },
 };
 
 export const CustomerInvoiceStatusBadge = forwardRef<
   HTMLDivElement,
   CustomerInvoiceStatusBadgeProps
->(({ status, className, ...props }, ref) => {
+>(({ status, dotVisible, className, ...props }, ref) => {
   const { t } = useTranslation();
   const normalizedStatus = status.toLowerCase() as CustomerInvoiceStatus;
   const config = statusColorConfig[normalizedStatus];
@@ -56,8 +58,8 @@ export const CustomerInvoiceStatusBadge = forwardRef<
 
   return (
     <Badge className={cn(commonClassName, config.badge, className)} {...props}>
-      <div className={cn("h-1.5 w-1.5 rounded-full mr-2", config.dot)} />
+      {dotVisible && <div className={cn("h-1.5 w-1.5 rounded-full mr-2", config.dot)} />}
-      {t(`catalog.status.${status}`)}
+      {t(`catalog.status.${normalizedStatus}`, { defaultValue: status })}
     </Badge>
   );
 });

modules/customer-invoices/src/web/components/customer-invoices-layout.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from "react";
 
-export const CustomerInvoicesLayout = ({ children }: PropsWithChildren) => {
+export const InvoicesLayout = ({ children }: PropsWithChildren) => {
   return <div>{children}</div>;
 };

modules/customer-invoices/src/web/components/customer-invoices-list-grid.tsx

@@ -1,255 +0,0 @@
-import { AG_GRID_LOCALE_ES } from "@ag-grid-community/locale";
-import type { CellKeyDownEvent, RowClickedEvent, ValueFormatterParams } from "ag-grid-community";
-import {
-  ColDef,
-  GridOptions,
-  SizeColumnsToContentStrategy,
-  SizeColumnsToFitGridStrategy,
-  SizeColumnsToFitProvidedWidthStrategy,
-} from "ag-grid-community";
-import { useCallback, useMemo, useState } from "react";
-
-
-import { formatDate } from "@erp/core/client";
-import { ErrorOverlay } from "@repo/rdx-ui/components";
-import { Button } from "@repo/shadcn-ui/components";
-import { AgGridReact } from "ag-grid-react";
-import { ChevronRightIcon } from "lucide-react";
-import { useNavigate } from "react-router-dom";
-import { useCustomerInvoicesQuery } from "../hooks";
-import { useTranslation } from "../i18n";
-import { CustomerInvoiceStatusBadge } from "./customer-invoice-status-badge";
-
-// Create new GridExample component
-export const CustomerInvoicesListGrid = () => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  //const { formatCurrency } = useMoney();
-
-  const {
-    data: invoices,
-    isLoading,
-    isError,
-    error,
-  } = useCustomerInvoicesQuery({
-    pagination: { pageSize: 999 },
-  });
-
-  // Definición de columnas
-  const [colDefs] = useState<ColDef[]>([
-    {
-      field: "status",
-      headerName: t("pages.list.grid_columns.status"),
-      cellRenderer: (params: ValueFormatterParams) => (
-        <CustomerInvoiceStatusBadge status={params.value} />
-      ),
-      minWidth: 120,
-    },
-    {
-      field: "invoice_number",
-      headerName: t("pages.list.grid_columns.invoice_number"),
-      cellClass: "tabular-nums",
-      minWidth: 130,
-    },
-    {
-      field: "series",
-      headerName: t("pages.list.grid_columns.series"),
-      cellClass: "tabular-nums",
-      minWidth: 80,
-    },
-    {
-      field: "invoice_date",
-      headerName: t("pages.list.grid_columns.invoice_date"),
-      valueFormatter: (p: ValueFormatterParams) => formatDate(p.value),
-      cellClass: "tabular-nums",
-      minWidth: 130,
-    },
-    {
-      field: "recipient.tin",
-      headerName: t("pages.list.grid_columns.recipient_tin"),
-      cellClass: "tabular-nums",
-      minWidth: 130,
-    },
-    {
-      field: "recipient.name",
-      headerName: t("pages.list.grid_columns.recipient_name"),
-      minWidth: 200,
-    },
-    {
-      field: "recipient.city",
-      headerName: t("pages.list.grid_columns.recipient_city"),
-      minWidth: 130,
-    },
-    {
-      field: "recipient.province",
-      headerName: t("pages.list.grid_columns.recipient_province"),
-      minWidth: 130,
-    },
-    {
-      field: "recipient.postal_code",
-      headerName: t("pages.list.grid_columns.recipient_postal_code"),
-      minWidth: 100,
-    },
-    {
-      field: "taxable_amount",
-      headerName: t("pages.list.grid_columns.taxable_amount"),
-      type: "rightAligned",
-      /*valueFormatter: (params: ValueFormatterParams) => {
-        const raw: MoneyDTO | null = params.value;
-        return raw ? formatCurrency(raw) : "—";
-      },*/
-      cellClass: "tabular-nums",
-      minWidth: 130,
-    },
-    {
-      field: "taxes_amount",
-      headerName: t("pages.list.grid_columns.taxes_amount"),
-      type: "rightAligned",
-      /*valueFormatter: (params: ValueFormatterParams) => {
-        const raw: MoneyDTO | null = params.value;
-        return raw ? formatCurrency(raw) : "—";
-      },*/
-      cellClass: "tabular-nums",
-      minWidth: 130,
-    },
-    {
-      field: "total_amount",
-      headerName: t("pages.list.grid_columns.total_amount"),
-      type: "rightAligned",
-      /*valueFormatter: (params: ValueFormatterParams) => {
-        const raw: MoneyDTO | null = params.value;
-        return raw ? formatCurrency(raw) : "—";
-      },*/
-      cellClass: "tabular-nums font-semibold",
-      minWidth: 140,
-    },
-    {
-      colId: "actions",
-      headerName: t("pages.list.grid_columns.actions", "Acciones"),
-      cellRenderer: (params: ValueFormatterParams) => {
-        const id = params.data?.id;
-        if (!id) return null;
-        return (
-          <Button
-            variant="secondary"
-            size="icon"
-            className="size-8"
-            aria-label={t("pages.list.open_invoice", "Abrir factura")}
-            onClick={() => navigate(`/customer-invoices/${id}/edit`)}
-          >
-            <ChevronRightIcon className="h-4 w-4" />
-          </Button>
-        );
-      },
-      minWidth: 80,
-      maxWidth: 80,
-      pinned: "right",
-    },
-  ]);
-
-  // Navegación accesible (click o teclado)
-  const goToRow = useCallback(
-    (id: string, newTab = false) => {
-      const url = `/customer-invoices/${id}/edit`;
-      newTab
-        ? window.open(url, "_blank", "noopener,noreferrer")
-        : navigate(url);
-    },
-    [navigate]
-  );
-
-  const onRowClicked = useCallback(
-    (e: RowClickedEvent<any>) => {
-      if (!e.data) return;
-      const newTab =
-        e.event instanceof MouseEvent && (e.event.metaKey || e.event.ctrlKey);
-      goToRow(e.data.id, newTab);
-    },
-    [goToRow]
-  );
-
-  const onCellKeyDown = useCallback(
-    (e: CellKeyDownEvent<any>) => {
-      if (!e.data) return;
-
-      const ev = e.event;
-      if (!ev || !(ev instanceof KeyboardEvent)) return;
-
-      const key = ev.key;
-      if (key === "Enter" || key === " ") {
-        ev.preventDefault();
-        goToRow(e.data.id);
-      }
-      if ((ev.ctrlKey || ev.metaKey) && key === "Enter") {
-        ev.preventDefault();
-        goToRow(e.data.id, true);
-      }
-    },
-    [goToRow]
-  );
-
-  // Estrategia de autoajuste de columnas
-  const autoSizeStrategy = useMemo<
-    | SizeColumnsToFitGridStrategy
-    | SizeColumnsToFitProvidedWidthStrategy
-    | SizeColumnsToContentStrategy
-  >(
-    () => ({
-      type: "fitGridWidth",
-      defaultMinWidth: 100,
-      columnLimits: [{ colId: "actions", minWidth: 80, maxWidth: 80 }],
-    }),
-    []
-  );
-
-  // Config general de AG Grid
-  const gridOptions: GridOptions = useMemo(
-    () => ({
-      columnDefs: colDefs,
-      autoSizeStrategy,
-      defaultColDef: {
-        editable: false,
-        flex: 1,
-        filter: false,
-        sortable: false,
-        resizable: true,
-      },
-      pagination: true,
-      paginationPageSize: 20,
-      paginationPageSizeSelector: [10, 20, 30, 50],
-      localeText: AG_GRID_LOCALE_ES,
-      suppressRowClickSelection: true,
-      getRowClass: () => "clickable-row",
-      onCellKeyDown,
-      onRowClicked,
-      getRowId: (p) => p.data.id,
-    }),
-    [autoSizeStrategy, colDefs, onCellKeyDown, onRowClicked]
-  );
-
-  // Error al cargar
-  if (isError) {
-    return (
-      <ErrorOverlay
-        errorMessage={
-          (error as Error)?.message ??
-          t("pages.update.loadErrorMsg", "Inténtalo de nuevo más tarde.")
-        }
-      />
-    );
-  }
-
-  // Render principal
-  return (
-    <section
-      className="ag-theme-alpine ag-theme-shadcn w-full h-full"
-      aria-label={t("pages.list.aria_label", "Listado de facturas de cliente")}
-    >
-      <AgGridReact
-        rowData={invoices?.items ?? []}
-        loading={isLoading}
-        {...gridOptions}
-      />
-    </section>
-  );
-};

modules/customer-invoices/src/web/components/editor/items/items-editor.tsx

@@ -26,8 +26,6 @@ export const ItemsEditor = () => {
         name: "items",
     });
 
-    console.log(fields);
-
     const baseColumns = useWithRowSelection(useItemsColumns(), true);
     const columns = useMemo(
         () => [...baseColumns, debugIdCol],

modules/customer-invoices/src/web/components/index.tsx

@@ -1,10 +1,11 @@
+export * from "../pages/list/invoices-list-grid";
 export * from "./customer-invoice-editor-skeleton";
 export * from "./customer-invoice-prices-card";
 export * from "./customer-invoice-status-badge";
 export * from "./customer-invoice-taxes-multi-select";
 export * from "./customer-invoices-layout";
-export * from "./customer-invoices-list-grid";
 export * from "./editor";
 export * from "./editor/invoice-tax-summary";
 export * from "./editor/invoice-totals";
 export * from "./page-header";
+

modules/customer-invoices/src/web/customer-invoice-routes.tsx

@@ -3,18 +3,18 @@ import { lazy } from "react";
 import { Outlet, RouteObject } from "react-router-dom";
 
 // Lazy load components
-const CustomerInvoicesLayout = lazy(() =>
+const InvoicesLayout = lazy(() =>
-  import("./components").then((m) => ({ default: m.CustomerInvoicesLayout }))
+  import("./components").then((m) => ({ default: m.InvoicesLayout }))
 );
 
-const CustomerInvoicesList = lazy(() =>
+const InvoiceListPage = lazy(() =>
-  import("./pages").then((m) => ({ default: m.CustomerInvoicesList }))
+  import("./pages").then((m) => ({ default: m.InvoiceListPage }))
 );
 
 const CustomerInvoiceAdd = lazy(() =>
   import("./pages").then((m) => ({ default: m.CustomerInvoiceCreate }))
 );
-const CustomerInvoiceUpdate = lazy(() =>
+const InvoiceUpdatePage = lazy(() =>
   import("./pages").then((m) => ({ default: m.InvoiceUpdatePage }))
 );
 
@@ -23,15 +23,15 @@ export const CustomerInvoiceRoutes = (params: ModuleClientParams): RouteObject[]
     {
       path: "customer-invoices",
       element: (
-        <CustomerInvoicesLayout>
+        <InvoicesLayout>
           <Outlet context={params} />
-        </CustomerInvoicesLayout>
+        </InvoicesLayout>
       ),
       children: [
-        { path: "", index: true, element: <CustomerInvoicesList /> }, // index
+        { path: "", index: true, element: <InvoiceListPage /> }, // index
-        { path: "list", element: <CustomerInvoicesList /> },
+        { path: "list", element: <InvoiceListPage /> },
         { path: "create", element: <CustomerInvoiceAdd /> },
-        { path: ":id/edit", element: <CustomerInvoiceUpdate /> },
+        { path: ":id/edit", element: <InvoiceUpdatePage /> },
 
         //
         /*{ path: "create", element: <CustomerInvoicesList /> },

modules/customer-invoices/src/web/hooks/use-customer-invoices-query.tsx

@@ -1,22 +1,30 @@
-import { useDataSource, useQueryKey } from "@erp/core/hooks";
+import { CriteriaDTO } from '@erp/core';
-import { useQuery } from "@tanstack/react-query";
+import { useDataSource } from "@erp/core/hooks";
-import { ListCustomerInvoicesResponseDTO } from "../../common/dto";
+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;
+
+type InvoicesQueryOptions = {
+  enabled?: boolean;
+  criteria?: CriteriaDTO
+};
 
 // Obtener todas las facturas
-export const useCustomerInvoicesQuery = (params?: any) => {
+export const useInvoicesQuery = (options?: InvoicesQueryOptions) => {
   const dataSource = useDataSource();
-  const keys = useQueryKey();
+  const enabled = options?.enabled ?? true;
+  const criteria = options?.criteria ?? {};
 
-  return useQuery<ListCustomerInvoicesResponseDTO>({
+  return useQuery<CustomerInvoicesPage, DefaultError>({
-    queryKey: keys().data().resource("customer-invoices").action("list").params(params).get(),
+    queryKey: CUSTOMER_INVOICES_QUERY_KEY(criteria),
-    queryFn: async (context) => {
+    queryFn: async ({ signal }) => {
-      const { signal } = context;
+      return await dataSource.getList<CustomerInvoicesPage>("customer-invoices", {
-      const invoices = await dataSource.getList("customer-invoices", {
+        params: criteria,
         signal,
-        ...params,
       });
-
-      return invoices as ListCustomerInvoicesResponseDTO;
     },
+    enabled
   });
 };

modules/customer-invoices/src/web/hooks/use-invoice-query.ts

@@ -5,11 +5,11 @@ import { CustomerInvoice } from "../schemas";
 export const CUSTOMER_INVOICE_QUERY_KEY = (id: string): QueryKey =>
   ["customer_invoice", id] as const;
 
-type CustomerInvoiceQueryOptions = {
+type InvoiceQueryOptions = {
   enabled?: boolean;
 };
 
-export function useInvoiceQuery(invoiceId?: string, options?: CustomerInvoiceQueryOptions) {
+export const useInvoiceQuery = (invoiceId?: string, options?: InvoiceQueryOptions) => {
   const dataSource = useDataSource();
   const enabled = (options?.enabled ?? true) && !!invoiceId;
 
@@ -26,7 +26,7 @@ export function useInvoiceQuery(invoiceId?: string, options?: CustomerInvoiceQue
     },
     enabled,
   });
-}
+};
 
 /*
     export function useQuery<

modules/customer-invoices/src/web/pages/customer-invoices-list.tsx

@@ -1,95 +0,0 @@
-import { AppBreadcrumb, AppContent } from "@repo/rdx-ui/components";
-import { Button } from "@repo/shadcn-ui/components";
-import { PlusIcon } from "lucide-react";
-import { useNavigate } from "react-router-dom";
-import { CustomerInvoicesListGrid } from "../components";
-import { useTranslation } from "../i18n";
-
-export const CustomerInvoicesList = () => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-
-  return (
-    <>
-      <AppBreadcrumb />
-      <AppContent>
-        <div className='flex items-center justify-between space-y-6'>
-          <div>
-            <h2 className='text-2xl font-bold tracking-tight'>{t("pages.list.title")}</h2>
-            <p className='text-muted-foreground'>{t("pages.list.description")}</p>
-          </div>
-          <div className='flex items-center space-x-2'>
-            <Button
-              onClick={() => navigate("/customer-invoices/create")}
-              className='cursor-pointer'
-            >
-              <PlusIcon className='w-4 h-4 mr-2' />
-              {t("pages.create.title")}
-            </Button>
-          </div>
-        </div>
-        <div className='flex flex-col w-full h-full py-3'>
-          <CustomerInvoicesListGrid />
-        </div>
-      </AppContent>
-    </>
-  );
-};
-
-/*
-  return (
-    <>
-      <div className='flex items-center justify-between space-y-2'>
-        <div>
-          <h2 className='text-2xl font-bold tracking-tight'>
-            {t('customerInvoices.list.title' />
-          </h2>
-          <p className='text-muted-foreground'>
-            {t('CustomerInvoices.list.subtitle' />
-          </p>
-        </div>
-        <div className='flex items-center space-x-2'>
-          <Button onClick={() => navigate("/CustomerInvoices/add")}>
-            <PlusIcon className='w-4 h-4 mr-2' />
-            {t("customerInvoices.create.title")}
-          </Button>
-        </div>
-      </div>
-
-      <Tabs value={status} onValueChange={setStatus}>
-        <div className='flex flex-col items-start justify-between mb-4 sm:flex-row sm:items-center'>
-          <div className='w-full mb-4 sm:w-auto sm:mb-0'>
-            <TabsList className='hidden sm:flex'>
-              {CustomerInvoiceStatuses.map((s) => (
-                <TabsTrigger key={s.value} value={s.value}>
-                  {s.label}
-                </TabsTrigger>
-              ))}
-            </TabsList>
-            <div className='flex items-center w-full space-x-2 sm:hidden'>
-              <Label>{t("customerInvoices.list.tabs_title")}</Label>
-              <Select value={status} onValueChange={setStatus}>
-                <SelectTrigger>
-                  <SelectValue placeholder='Seleccionar estado' />
-                </SelectTrigger>
-                <SelectContent>
-                  {CustomerInvoiceStatuses.map((s) => (
-                    <SelectItem key={s.value} value={s.value}>
-                      {s.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-        </div>
-        {CustomerInvoiceStatuses.map((s) => (
-          <TabsContent key={s.value} value={s.value}>
-            <CustomerInvoicesGrid />
-          </TabsContent>
-        ))}
-      </Tabs>
-    </>
-  );
-};
-*/

modules/customer-invoices/src/web/pages/index.ts

@@ -1,3 +1,3 @@
 export * from "./create";
-export * from "./customer-invoices-list";
+export * from "./list";
 export * from "./update";

modules/customer-invoices/src/web/pages/list/index.ts

@@ -0,0 +1 @@
+export * from "./invoices-list-page";

modules/customer-invoices/src/web/pages/list/invoices-list-grid.tsx

@@ -0,0 +1,110 @@
+import type { CellKeyDownEvent, RowClickedEvent } from "ag-grid-community";
+import { useCallback, useState } from "react";
+
+
+import { DataTable } 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 { useNavigate } from "react-router-dom";
+import { useTranslation } from "../../i18n";
+import { CustomerInvoicesPage } from '../../schemas';
+import { useInvoicesListColumns } from './use-invoices-list-columns';
+
+export type InvoiceUpdateCompProps = {
+  invoicesPage: CustomerInvoicesPage;
+  loading?: boolean;
+}
+
+
+// Create new GridExample component
+export const InvoicesListGrid = ({ invoicesPage, loading }: InvoiceUpdateCompProps) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const [searchTerm, setSearchTerm] = useState("");
+  const [statusFilter, setStatusFilter] = useState("todas");
+
+  const columns = useInvoicesListColumns();
+
+  const { items, page, total_pages, total_items } = invoicesPage;
+
+
+  // Navegación accesible (click o teclado)
+  const goToRow = useCallback(
+    (id: string, newTab = false) => {
+      const url = `/customer-invoices/${id}/edit`;
+      newTab
+        ? window.open(url, "_blank", "noopener,noreferrer")
+        : navigate(url);
+    },
+    [navigate]
+  );
+
+  const onRowClicked = useCallback(
+    (e: RowClickedEvent<any>) => {
+      if (!e.data) return;
+      const newTab =
+        e.event instanceof MouseEvent && (e.event.metaKey || e.event.ctrlKey);
+      goToRow(e.data.id, newTab);
+    },
+    [goToRow]
+  );
+
+  const onCellKeyDown = useCallback(
+    (e: CellKeyDownEvent<any>) => {
+      if (!e.data) return;
+
+      const ev = e.event;
+      if (!ev || !(ev instanceof KeyboardEvent)) return;
+
+      const key = ev.key;
+      if (key === "Enter" || key === " ") {
+        ev.preventDefault();
+        goToRow(e.data.id);
+      }
+      if ((ev.ctrlKey || ev.metaKey) && key === "Enter") {
+        ev.preventDefault();
+        goToRow(e.data.id, true);
+      }
+    },
+    [goToRow]
+  );
+
+
+  // Render principal
+  return (
+    <>
+      {/* Filters and Actions */}
+      <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>
+        <Select value={statusFilter} onValueChange={setStatusFilter}>
+          <SelectTrigger className="w-full sm:w-48 bg-white border-gray-200 shadow-sm">
+            <FilterIcon className="mr-2 h-4 w-4" />
+            <SelectValue placeholder="Estado" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="todas">Todas</SelectItem>
+            <SelectItem value="pagada">Pagadas</SelectItem>
+            <SelectItem value="pendiente">Pendientes</SelectItem>
+            <SelectItem value="vencida">Vencidas</SelectItem>
+          </SelectContent>
+        </Select>
+        <Button variant="outline" className="border-blue-200 text-blue-600 hover:bg-blue-50 bg-transparent">
+          <FileDownIcon className="mr-2 h-4 w-4" />
+          Exportar
+        </Button>
+      </div>
+      <div className="overflow-hidden">
+        <DataTable columns={columns} data={items} enablePagination={true} />
+      </div>
+    </>
+  );
+};

modules/customer-invoices/src/web/pages/list/invoices-list-page.tsx

@@ -0,0 +1,100 @@
+import { ErrorAlert } from '@erp/customers/components';
+import { AppBreadcrumb, AppContent, AppHeader, BackHistoryButton } from "@repo/rdx-ui/components";
+import { Button } from "@repo/shadcn-ui/components";
+import { FilePenIcon, PlusIcon } from "lucide-react";
+import { useMemo } from 'react';
+import { useNavigate } from "react-router-dom";
+import { InvoicesListGrid, PageHeader } from '../../components';
+import { useInvoicesQuery } from '../../hooks';
+import { useTranslation } from "../../i18n";
+import { invoiceResumeDtoToFormAdapter } from '../../schemas/invoice-resume-dto.adapter';
+
+export const InvoiceListPage = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const {
+    data,
+    isLoading,
+    isError,
+    error,
+  } = useInvoicesQuery({
+    criteria: {
+      pageSize: 999,
+    }
+  });
+
+  const invoicesPageData = useMemo(() => {
+    if (!data) return undefined;
+    return {
+      ...data,
+      items: invoiceResumeDtoToFormAdapter.fromDto(data.items)
+    }
+  }, [data]);
+
+
+  if (isError || !invoicesPageData) {
+    return (
+      <AppContent>
+        <ErrorAlert
+          title={t("pages.list.loadErrorTitle")}
+          message={(error as Error)?.message || "Error al cargar el listado"}
+        />
+        <BackHistoryButton />
+      </AppContent>
+    );
+  }
+
+  return (
+    <>
+      <AppHeader>
+        <AppBreadcrumb />
+        <PageHeader
+          title={t("pages.list.title")}
+          icon={<FilePenIcon className='size-6 text-primary' aria-hidden />}
+          rightSlot={
+            <></>}
+
+
+        />
+        {/* 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'>
+          <div>
+            <h2 className='text-2xl font-bold tracking-tight'>{t("pages.list.title")}</h2>
+            <p className='text-muted-foreground'>{t("pages.list.description")}</p>
+          </div>
+          <div className='flex items-center space-x-2'>
+            <Button
+              onClick={() => navigate("/customer-invoices/create")}
+              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"
+              aria-label={t("pages.create.title")}
+            >
+              <PlusIcon className="mr-2 h-4 w-4" aria-hidden />
+              {t("pages.create.title")}
+            </Button>
+          </div>
+        </div>
+        <div className='flex flex-col w-full h-full py-3'>
+          <InvoicesListGrid invoicesPage={invoicesPageData} loading={isLoading} />
+        </div>
+      </AppContent>
+    </>
+  );
+};

modules/customer-invoices/src/web/pages/list/use-invoices-list-columns.tsx

@@ -0,0 +1,120 @@
+import { formatDate } from '@erp/core/client';
+import { DataTableColumnHeader } from '@repo/rdx-ui/components';
+import type { ColumnDef } from "@tanstack/react-table";
+import * as React from "react";
+import { CustomerInvoiceStatusBadge } from '../../components';
+import { useTranslation } from '../../i18n';
+import { InvoicesPageFormData } from '../../schemas/invoice-resume.form.schema';
+
+
+
+export function useInvoicesListColumns(): ColumnDef<InvoicesPageFormData>[] {
+  //const { t, readOnly, currency_code, language_code } = useInvoiceContext();
+  const { t } = useTranslation();
+
+  // Atención: Memoizar siempre para evitar reconstrucciones y resets de estado de tabla
+  return React.useMemo<ColumnDef<InvoicesPageFormData>[]>(() => [
+    {
+      accessorKey: "invoice_number",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title={t("pages.list.grid_columns.invoice_number")} className='text-left' />
+      ),
+      cell: ({ row }) => (
+        <div className='font-semibold text-left text-primary'>
+          {row.getValue('invoice_number')}
+        </div>
+      ),
+      enableHiding: false,
+      enableSorting: false,
+      size: 32,
+    }, {
+      accessorKey: "status",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title={t("pages.list.grid_columns.status")} className='text-left' />
+      ),
+      cell: ({ row }) => (
+        <CustomerInvoiceStatusBadge status={row.getValue('status')} />
+      ),
+      enableSorting: false,
+      size: 32,
+    }, {
+      accessorKey: "series",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title={t("pages.list.grid_columns.series")} className='text-left' />
+      ),
+      cell: ({ row }) => (
+        <div className='font-medium text-left'>
+          {row.getValue('series')}
+        </div>
+
+      ),
+      enableSorting: false,
+      size: 32,
+    }, {
+      accessorKey: "invoice_date",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title={t("pages.list.grid_columns.invoice_date")} className='text-left tabular-nums' />
+      ),
+      cell: ({ row }) => (
+        <div className='font-medium text-left tabular-nums'>
+          {formatDate(row.getValue('invoice_date'))}
+        </div>
+
+      ),
+      enableSorting: false,
+      size: 32,
+    }, {
+      accessorKey: "operation_date",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title={t("pages.list.grid_columns.operation_date")} className='text-left tabular-nums' />
+      ),
+      cell: ({ row }) => (
+        <div className='font-medium text-left tabular-nums'>
+          {formatDate(row.getValue('operation_date'))}
+        </div>
+
+      ),
+      enableSorting: false,
+      size: 32,
+    }, {
+      id: "recipient_tin",
+      accessorKey: "recipient.tin",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title={t("pages.list.grid_columns.recipient_tin")} className='text-left tabular-nums' />
+      ),
+      cell: ({ row }) => (
+        <div className='font-medium text-left tabular-nums'>
+          {row.getValue('recipient_tin')}
+        </div>
+      ),
+      enableSorting: false,
+      size: 32,
+    }, {
+      accessorKey: "recipient.name",
+      id: "recipient_name",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title={t("pages.list.grid_columns.recipient_name")} className='text-left tabular-nums' />
+      ),
+      cell: ({ row }) => (
+        <div className='font-semibold text-left tabular-nums'>
+          {row.getValue('recipient_name')}
+        </div>
+      ),
+      enableSorting: false,
+      size: 32,
+    }, {
+      accessorKey: "total_amount_fmt",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title={t("pages.list.grid_columns.total_amount")} className='text-right tabular-nums' />
+      ),
+      cell: ({ row }) => (
+        <div className='font-semibold text-right tabular-nums'>
+          {row.getValue('total_amount_fmt')}
+        </div>
+      ),
+      enableSorting: false,
+      size: 32,
+    }
+
+  ], [t]);
+}

modules/customer-invoices/src/web/pages/update/invoice-update-comp.tsx

@@ -60,8 +60,10 @@ export const InvoiceUpdateComp = ({
     });
 
     const handleSubmit = (formData: InvoiceFormData) => {
+        const dto = invoiceDtoToFormAdapter.toDto(formData, context)
+        console.log("dto => ", dto);
         mutate(
-            { id: invoice_id, data: formData },
+            { id: invoice_id, data: dto as Partial<InvoiceFormData> },
             {
                 onSuccess: () => showSuccessToast(t("pages.update.successTitle")),
                 onError: (e) => showErrorToast(t("pages.update.errorTitle"), e.message),

modules/customer-invoices/src/web/pages/update/invoice-update-page.tsx

@@ -19,11 +19,7 @@ export const InvoiceUpdatePage = () => {
   const taxCatalog = useMemo(() => SpainTaxCatalogProvider(), []);
 
   const invoiceQuery = useInvoiceQuery(invoice_id, { enabled: !!invoice_id });
-  const { data: invoiceData, isLoading, isError, error,
+  const { data: invoiceData, isLoading, isError, error } = invoiceQuery;
-
-  } = invoiceQuery;
-
-  console.log("InvoiceUpdatePage");
 
   if (isLoading) {
     return <CustomerInvoiceEditorSkeleton />;

modules/customer-invoices/src/web/schemas/index.ts

@@ -1,3 +1,5 @@
-export * from "./customer-invoices.api.schema";
 export * from "./invoice-dto.adapter";
+export * from "./invoice-resume-dto.adapter";
+export * from "./invoice-resume.form.schema";
 export * from "./invoice.form.schema";
+export * from "./invoices.api.schema";

modules/customer-invoices/src/web/schemas/invoice-resume-dto.adapter.ts

@@ -0,0 +1,62 @@
+import { MoneyDTOHelper, PercentageDTOHelper, formatCurrency } from "@erp/core";
+import { InvoiceSummaryFormData } from "./invoice-resume.form.schema";
+import { CustomerInvoiceSummary } from "./invoices.api.schema";
+
+/**
+ * Convierte el DTO completo de API a datos numéricos para el formulario.
+ */
+export const invoiceResumeDtoToFormAdapter = {
+  fromDto(dtos: CustomerInvoiceSummary[], context?: any) {
+    return dtos.map(
+      (dto) =>
+        ({
+          ...dto,
+
+          subtotal_amount: MoneyDTOHelper.toNumber(dto.subtotal_amount),
+          subtotal_amount_fmt: formatCurrency(
+            MoneyDTOHelper.toNumber(dto.subtotal_amount),
+            Number(dto.total_amount.scale || 2),
+            dto.currency_code,
+            dto.language_code
+          ),
+
+          discount_percentage: PercentageDTOHelper.toNumber(dto.discount_percentage),
+          discount_percentage_fmt: PercentageDTOHelper.toNumericString(dto.discount_percentage),
+
+          discount_amount: MoneyDTOHelper.toNumber(dto.discount_amount),
+          discount_amount_fmt: formatCurrency(
+            MoneyDTOHelper.toNumber(dto.discount_amount),
+            Number(dto.total_amount.scale || 2),
+            dto.currency_code,
+            dto.language_code
+          ),
+
+          taxable_amount: MoneyDTOHelper.toNumber(dto.taxable_amount),
+          taxable_amount_fmt: formatCurrency(
+            MoneyDTOHelper.toNumber(dto.taxable_amount),
+            Number(dto.total_amount.scale || 2),
+            dto.currency_code,
+            dto.language_code
+          ),
+
+          taxes_amount: MoneyDTOHelper.toNumber(dto.taxes_amount),
+          taxes_amount_fmt: formatCurrency(
+            MoneyDTOHelper.toNumber(dto.taxes_amount),
+            Number(dto.total_amount.scale || 2),
+            dto.currency_code,
+            dto.language_code
+          ),
+
+          total_amount: MoneyDTOHelper.toNumber(dto.total_amount),
+          total_amount_fmt: formatCurrency(
+            MoneyDTOHelper.toNumber(dto.total_amount),
+            Number(dto.total_amount.scale || 2),
+            dto.currency_code,
+            dto.language_code
+          ),
+
+          //taxes: dto.taxes,
+        }) as unknown as InvoiceSummaryFormData
+    );
+  },
+};

modules/customer-invoices/src/web/schemas/invoice-resume.form.schema.ts

@@ -0,0 +1,25 @@
+import { CustomerInvoiceSummary, CustomerInvoicesPage } from "./invoices.api.schema";
+
+export type InvoiceSummaryFormData = CustomerInvoiceSummary & {
+  subtotal_amount_fmt: string;
+  subtotal_amount: number;
+
+  discount_percentage_fmt: string;
+  discount_percentage: number;
+
+  discount_amount_fmt: string;
+  discount_amount: number;
+
+  taxable_amount_fmt: string;
+  taxable_amount: number;
+
+  taxes_amoun_fmt: string;
+  taxes_amount: number;
+
+  total_amount_fmt: string;
+  total_amount: number;
+};
+
+export type InvoicesPageFormData = CustomerInvoicesPage & {
+  items: InvoiceSummaryFormData[];
+};

modules/customer-invoices/src/web/schemas/invoices.api.schema.ts

@@ -1,14 +1,14 @@
 import { z } from "zod/v4";
 
+import { PaginationSchema } from "@erp/core";
 import { ArrayElement } from "@repo/rdx-utils";
 import {
   CreateCustomerInvoiceRequestSchema,
   GetCustomerInvoiceByIdResponseSchema,
-  ListCustomerInvoicesResponseDTO,
+  ListCustomerInvoicesResponseSchema,
   UpdateCustomerInvoiceByIdRequestSchema,
 } from "../../common";
 
-// Esquemas (Zod) provenientes del servidor
 export const CustomerInvoiceSchema = GetCustomerInvoiceByIdResponseSchema.omit({
   metadata: true,
 });
@@ -23,7 +23,12 @@ export type CustomerInvoiceCreateInput = z.infer<typeof CustomerInvoiceCreateSch
 export type CustomerInvoiceUpdateInput = z.infer<typeof CustomerInvoiceUpdateSchema>; // Cuerpo para actualizar
 
 // Resultado de consulta con criteria (paginado, etc.)
-export type CustomerInvoicesPage = ListCustomerInvoicesResponseDTO;
+export const CustomerInvoicesPageSchema = ListCustomerInvoicesResponseSchema.omit({
+  metadata: true,
+});
+
+export type PaginatedResponse = z.infer<typeof PaginationSchema>;
+export type CustomerInvoicesPage = z.infer<typeof CustomerInvoicesPageSchema>;
 
 // Ítem simplificado dentro del listado (no toda la entidad)
 export type CustomerInvoiceSummary = Omit<ArrayElement<CustomerInvoicesPage["items"]>, "metadata">;

modules/customers/src/api/infrastructure/mappers/domain/customer.mapper.ts

@@ -197,7 +197,7 @@ export class CustomerDomainMapper
 
       // Si hubo errores de mapeo, devolvemos colección de validación
       if (errors.length > 0) {
-        return Result.fail(new ValidationErrorCollection(errors));
+        return Result.fail(new ValidationErrorCollection("Customer props mapping failed", errors));
       }
 
       const customerProps: CustomerProps = {

modules/customers/src/common/dto/response/list-customers.response.dto.ts

@@ -1,7 +1,7 @@
-import { MetadataSchema, createListViewResponseSchema } from "@erp/core";
+import { MetadataSchema, createPaginatedListSchema } from "@erp/core";
 import { z } from "zod/v4";
 
-export const ListCustomersResponseSchema = createListViewResponseSchema(
+export const ListCustomersResponseSchema = createPaginatedListSchema(
   z.object({
     id: z.uuid(),
     company_id: z.uuid(),

packages/rdx-ddd/src/errors/validation-error-collection.ts

@@ -11,7 +11,7 @@
  *   { path: "lines[1].unitPrice.amount", message: "Amount must be a positive number" },
  *   { path: "lines[1].unitPrice.scale", message: "Scale must be a non-negative integer" },
  * ];
- * const validationError = new ValidationErrorCollection(errors);
+ * const validationError = new ValidationErrorCollection(message, errors);
  *
  */
 
@@ -36,7 +36,7 @@ export interface ValidationErrorDetail {
  *   { path: "lines[1].unitPrice.amount", message: "Amount must be positive" },
  *   { path: "lines[1].unitPrice.scale", message: "Scale must be non-negative" },
  * ];
- * throw new ValidationErrorCollection(errors);
+ * throw new ValidationErrorCollection(message, errors);
  */
 export class ValidationErrorCollection extends DomainError {
   public readonly kind = "VALIDATION" as const;
@@ -44,10 +44,11 @@ export class ValidationErrorCollection extends DomainError {
   public readonly details: ValidationErrorDetail[];
 
   constructor(
+    message: string,
     details: ValidationErrorDetail[],
     options?: ErrorOptions & { metadata?: Record<string, unknown> }
   ) {
-    super("Multiple validation errors", "MULTIPLE_VALIDATION_ERRORS", {
+    super(message, "MULTIPLE_VALIDATION_ERRORS", {
       ...options,
       metadata: { ...(options?.metadata ?? {}), errors: details },
     });
@@ -60,6 +61,7 @@ export class ValidationErrorCollection extends DomainError {
 
   /** Crear a partir de varios DomainValidationError */
   static fromErrors(
+    message: string,
     errors: DomainValidationError[],
     options?: ErrorOptions & { metadata?: Record<string, unknown> }
   ): ValidationErrorCollection {
@@ -69,7 +71,7 @@ export class ValidationErrorCollection extends DomainError {
       value: (e as any).cause, // opcional: valor que provocó el error
     }));
 
-    return new ValidationErrorCollection(details, options);
+    return new ValidationErrorCollection(message, details, options);
   }
 
   /** Serialización para Problem+JSON / logs */

packages/rdx-ddd/src/helpers/extract-or-push-error.ts

@@ -39,7 +39,8 @@ export function extractOrPushError<T>(
 
     if (isValidationErrorCollection(error)) {
       // Copiar todos los detalles, rellenando path si falta
-      error.details.forEach((detail) => {
+      console.log(error);
+      error.details?.forEach((detail) => {
         errors.push({
           ...detail,
           path: detail.path ?? path,

packages/rdx-ui/src/components/datatable/data-table-column-header.tsx

@@ -26,7 +26,7 @@ export function DataTableColumnHeader<TData, TValue>({
   const { t } = useTranslation();
 
   if (!column.getCanSort()) {
-    return <div className={cn("text-xs text-muted-foreground text-nowrap", className)}>{title}</div>
+    return <div className={cn("text-xs text-muted-foreground text-nowrap cursor-default", className)}>{title}</div>
   }
 
   return (

packages/rdx-ui/src/components/datatable/data-table-pagination.tsx

@@ -1,104 +1,157 @@
-import { Table } from "@tanstack/react-table"
+import { Table } from "@tanstack/react-table";
 import {
-  ChevronLeft,
+  ChevronLeftIcon,
-  ChevronRight,
+  ChevronRightIcon,
-  ChevronsLeft,
+  ChevronsLeftIcon,
-  ChevronsRight,
+  ChevronsRightIcon
-} from "lucide-react"
+} from "lucide-react";
 
 import {
-  Button, Select,
+  Pagination, PaginationContent,
+  PaginationItem, PaginationLink,
+  Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue
-} from '@repo/shadcn-ui/components'
+} from '@repo/shadcn-ui/components';
+import { cn } from '@repo/shadcn-ui/lib/utils';
+import { useTranslation } from '../../locales/i18n.ts';
+import { DataTableMeta } from './data-table.tsx';
 
 interface DataTablePaginationProps<TData> {
-  table: Table<TData>
+  table: Table<TData>;
+  className?: string;
 }
 
-export function DataTablePagination<TData>({
+export function DataTablePagination<TData>({ table, className }: DataTablePaginationProps<TData>) {
-  table,
+  const { t } = useTranslation();
-}: DataTablePaginationProps<TData>) {
+
+  const { pageIndex, pageSize } = table.getState().pagination;
+  const pageCount = table.getPageCount() || 1;
+  const totalRows = (table.options.meta as DataTableMeta<TData>)?.totalItems ?? table.getFilteredRowModel().rows.length;
+  const hasSelected = table.getFilteredSelectedRowModel().rows.length > 0;
+
+  // Calcula rango visible (inicio-fin)
+  const start = totalRows === 0 ? 0 : pageIndex * pageSize + 1;
+  const end = Math.min((pageIndex + 1) * pageSize, totalRows);
+
   return (
-    <div className="flex items-center justify-between px-2">
+    <div className={cn(
-      <div className="text-muted-foreground flex-1 text-sm">
+      "flex items-center justify-between",
-        {table.getFilteredSelectedRowModel().rows.length} of{" "}
+      className
-        {table.getFilteredRowModel().rows.length} row(s) selected.
+    )}>
-      </div>
+      {/* Información izquierda */}
-      <div className="flex items-center space-x-6 lg:space-x-8">
+      <div className="flex flex-col sm:flex-row items-center gap-4 flex-1 text-sm text-muted-foreground">
-        <div className="flex items-center space-x-2">
+        {/* Rango visible */}
-          <p className="text-sm font-medium">Rows per page</p>
+        <span aria-live="polite">
+          {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", {
+              count: table.getFilteredSelectedRowModel().rows.length,
+              total: table.getFilteredRowModel().rows.length,
+            })}
+          </span>
+        )}
+
+        <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={`${table.getState().pagination.pageSize}`}
+            value={String(pageSize)}
-            onValueChange={(value) => {
+            onValueChange={(value) => table.setPageSize(Number(value))}
-              table.setPageSize(Number(value))
-            }}
           >
-            <SelectTrigger className="h-8 w-[70px]">
+            <SelectTrigger className="w-20 h-8 bg-white border-gray-200">
-              <SelectValue placeholder={table.getState().pagination.pageSize} />
+              <SelectValue placeholder={String(pageSize)} />
             </SelectTrigger>
-            <SelectContent side="top">
+            <SelectContent>
-              {[10, 20, 25, 30, 40, 50].map((pageSize) => (
+              {[10, 20, 25, 30, 40, 50].map((size) => (
-                <SelectItem key={pageSize} value={`${pageSize}`}>
+                <SelectItem key={size} value={String(size)}>
-                  {pageSize}
+                  {size}
                 </SelectItem>
               ))}
             </SelectContent>
           </Select>
         </div>
-        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
-          Page {table.getState().pagination.pageIndex + 1} of{" "}
-          {table.getPageCount()}
       </div>
-        <div className="flex items-center space-x-2">
+
-          <Button
+      {/* Controles derecha */}
-            type="button"
+      <div className="flex items-center gap-2">
-            variant="outline"
+        <Pagination>
-            size="icon"
+          <PaginationContent>
-            className="hidden size-8 lg:flex"
+            {/* Primera página */}
+            <PaginationItem>
+              <PaginationLink
+                aria-label={t("components.datatable.pagination.goto_first_page")}
                 onClick={() => table.setPageIndex(0)}
-            disabled={!table.getCanPreviousPage()}
+                isActive={!table.getCanPreviousPage()}
+                size="sm"
+                className="px-2.5"
               >
-            <span className="sr-only">Go to first page</span>
+                <ChevronsLeftIcon className="size-4" />
-            <ChevronsLeft />
+              </PaginationLink>
-          </Button>
+            </PaginationItem>
-          <Button
+
-            type="button"
+            {/* Anterior */}
-            variant="outline"
+            <PaginationItem>
-            size="icon"
+              <PaginationLink
-            className="size-8"
+                aria-label={t("components.datatable.pagination.goto_previous_page")}
                 onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
+                isActive={!table.getCanPreviousPage()}
+                size="sm"
+                className="px-2.5"
               >
-            <span className="sr-only">Go to previous page</span>
+                <ChevronLeftIcon className="size-4" />
-            <ChevronLeft />
+              </PaginationLink>
-          </Button>
+            </PaginationItem>
-          <Button
+
-            type="button"
+            <span
-            variant="outline"
+              className="text-sm text-muted-foreground px-2"
-            size="icon"
+              aria-live="polite"
-            className="size-8"
+            >
+              {t("components.datatable.pagination.page_of", {
+                page: pageIndex + 1,
+                of: pageCount || 1,
+              })}
+            </span>
+
+            {/* Siguiente */}
+            <PaginationItem>
+              <PaginationLink
+                aria-label={t("components.datatable.pagination.goto_next_page")}
                 onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
+                isActive={!table.getCanNextPage()}
+                size="sm"
+                className="px-2.5"
               >
-            <span className="sr-only">Go to next page</span>
+                <ChevronRightIcon className="size-4" />
-            <ChevronRight />
+              </PaginationLink>
-          </Button>
+            </PaginationItem>
-          <Button
+
-            type="button"
+            {/* Última página */}
-            variant="outline"
+            <PaginationItem>
-            size="icon"
+              <PaginationLink
-            className="hidden size-8 lg:flex"
+                aria-label={t("components.datatable.pagination.goto_last_page")}
-            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+                onClick={() => table.setPageIndex(pageCount - 1)}
-            disabled={!table.getCanNextPage()}
+                isActive={!table.getCanNextPage()}
+                size="sm"
+                className="px-2.5"
               >
-            <span className="sr-only">Go to last page</span>
+                <ChevronsRightIcon className="size-4" />
-            <ChevronsRight />
+              </PaginationLink>
-          </Button>
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
       </div>
     </div>
-    </div>
+  );
-  )
 }

packages/rdx-ui/src/components/datatable/data-table-toolbar.tsx

@@ -2,61 +2,79 @@ import { Button, Separator, Tooltip, TooltipContent, TooltipTrigger } from '@rep
 import { cn } from '@repo/shadcn-ui/lib/utils'
 import { Table } from "@tanstack/react-table"
 import { ArrowDownIcon, ArrowUpIcon, CopyPlusIcon, PlusIcon, ScanIcon, TrashIcon } from 'lucide-react'
-import { useCallback, useMemo } from 'react'
+import React from 'react'
 import { useTranslation } from "../../locales/i18n.ts"
 import { DataTableViewOptions } from './data-table-view-options.tsx'
 import { DataTableMeta } from './data-table.tsx'
 
+
 interface DataTableToolbarProps<TData> {
-  table: Table<TData>
+  table: Table<TData>;
-  showViewOptions?: boolean
+  showViewOptions?: boolean;
+  className?: string;
 }
 
 export function DataTableToolbar<TData>({
   table,
   showViewOptions = true,
+  className
 }: DataTableToolbarProps<TData>) {
+  const { t } = useTranslation();
+  const meta = table.options.meta as DataTableMeta<TData> | undefined;
 
-  const { t } = useTranslation()
+  const readOnly = meta?.readOnly ?? false;
-  const meta = table.options.meta as DataTableMeta<TData>
-    | undefined
 
-  const rowSelection = table.getSelectedRowModel().rows;
+  // Modelos y conteos
-  const selectedCount = rowSelection.length;
+  const allRows = table.getFilteredRowModel().rows;
+  const selectedRows = table.getSelectedRowModel().rows;
+  const totalCount = allRows.length;
+  const selectedCount = selectedRows.length;
   const hasSelection = selectedCount > 0;
 
-  const selectedRowIndexes = useMemo(() => rowSelection.map((row) => row.index), [rowSelection]);
+  // Índices seleccionados (memoizado)
+  const selectedIndexes = React.useMemo(
+    () => selectedRows.map((r) => r.index),
+    [selectedRows]
+  );
 
-  const handleAdd = useCallback(() => meta?.tableOps?.onAdd?.(table), [meta])
+  const handleAdd = React.useCallback(() => {
-  const handleDuplicateSelected = useCallback(
+    if (!readOnly) meta?.tableOps?.onAdd?.(table);
-    () => meta?.bulkOps?.duplicateSelected?.(selectedRowIndexes, table),
+  }, [meta, table, readOnly]);
-    [meta, selectedRowIndexes]
-  )
-  const handleMoveSelectedUp = useCallback(
-    () => meta?.bulkOps?.moveSelectedUp?.(selectedRowIndexes, table),
-    [meta, selectedRowIndexes]
-  )
-  const handleMoveSelectedDown = useCallback(
-    () => meta?.bulkOps?.moveSelectedDown?.(selectedRowIndexes, table),
-    [meta, selectedRowIndexes]
-  )
-  const handleRemoveSelected = useCallback(
-    () => meta?.bulkOps?.removeSelected?.(selectedRowIndexes, table),
-    [meta, selectedRowIndexes]
-  )
 
+  const handleDuplicateSelected = React.useCallback(() => {
+    if (!readOnly) meta?.bulkOps?.duplicateSelected?.(selectedIndexes, table);
+  }, [meta, selectedIndexes, table, readOnly]);
+
+  const handleMoveSelectedUp = React.useCallback(() => {
+    if (!readOnly) meta?.bulkOps?.moveSelectedUp?.(selectedIndexes, table);
+  }, [meta, selectedIndexes, table, readOnly]);
+
+  const handleMoveSelectedDown = React.useCallback(() => {
+    if (!readOnly) meta?.bulkOps?.moveSelectedDown?.(selectedIndexes, table);
+  }, [meta, selectedIndexes, table, readOnly]);
+
+  const handleRemoveSelected = React.useCallback(() => {
+    if (!readOnly) meta?.bulkOps?.removeSelected?.(selectedIndexes, table);
+  }, [meta, selectedIndexes, table, readOnly]);
+
+  const handleClearSelection = React.useCallback(() => {
+    table.resetRowSelection();
+  }, [table]);
+
+  // Render principal
   return (
     <div
       className={cn(
-        "flex items-center justify-between gap-2 py-2",
+        "flex items-center justify-between gap-2 py-2 bg-transparent",
-        "border-b border-muted px-1 sm:px-2"
+        className
       )}
     >
-      {/* IZQUIERDA: acciones globales y sobre selección */}
+      {/* IZQUIERDA: acciones + contador */}
-      <div className="flex flex-1 items-center gap-2 flex-wrap">
+      <div className="flex flex-1 items-center gap-3 flex-wrap">
-        {meta?.tableOps?.onAdd && (
+        {/* Botón añadir */}
+        {!readOnly && meta?.tableOps?.onAdd && (
           <Button
-            type='button'
+            type="button"
             size="sm"
             onClick={handleAdd}
             aria-label={t("components.datatable.actions.add")}
@@ -66,13 +84,14 @@ export function DataTableToolbar<TData>({
           </Button>
         )}
 
+        {/* Acciones sobre selección */}
         {hasSelection && (
           <>
             <Separator orientation="vertical" className="h-5 mx-1" />
 
-            {meta?.bulkOps?.duplicateSelected && (
+            {!readOnly && meta?.bulkOps?.duplicateSelected && (
               <Button
-                type='button'
+                type="button"
                 size="sm"
                 variant="outline"
                 onClick={handleDuplicateSelected}
@@ -83,12 +102,11 @@ export function DataTableToolbar<TData>({
               </Button>
             )}
 
-            {meta?.bulkOps?.moveSelectedUp && (
+            {!readOnly && meta?.bulkOps?.moveSelectedUp && (
               <Tooltip>
                 <TooltipTrigger asChild>
-
                   <Button
-                    type='button'
+                    type="button"
                     size="sm"
                     variant="outline"
                     onClick={handleMoveSelectedUp}
@@ -97,17 +115,17 @@ export function DataTableToolbar<TData>({
                     <ArrowUpIcon className="size-4" aria-hidden="true" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>{t("components.datatable.actions.move_up")}</TooltipContent>
+                <TooltipContent>
+                  {t("components.datatable.actions.move_up")}
+                </TooltipContent>
               </Tooltip>
-
             )}
 
-            {meta?.bulkOps?.moveSelectedDown && (
+            {!readOnly && meta?.bulkOps?.moveSelectedDown && (
               <Tooltip>
                 <TooltipTrigger asChild>
-
                   <Button
-                    type='button'
+                    type="button"
                     size="sm"
                     variant="outline"
                     onClick={handleMoveSelectedDown}
@@ -115,19 +133,21 @@ export function DataTableToolbar<TData>({
                   >
                     <ArrowDownIcon className="size-4" aria-hidden="true" />
                   </Button>
-
                 </TooltipTrigger>
-                <TooltipContent>{t("components.datatable.actions.move_down")}</TooltipContent>
+                <TooltipContent>
+                  {t("components.datatable.actions.move_down")}
+                </TooltipContent>
               </Tooltip>
-
             )}
 
-            {meta?.bulkOps?.removeSelected && (
+            {!readOnly && meta?.bulkOps?.removeSelected && (
               <>
-                <Separator orientation="vertical" className="h-5 mx-1 w-1 bg-red-500" />
+                <Separator
-
+                  orientation="vertical"
+                  className="h-5 mx-1 w-[1px] bg-red-500/70"
+                />
                 <Button
-                  type='button'
+                  type="button"
                   size="sm"
                   variant="destructive"
                   onClick={handleRemoveSelected}
@@ -140,31 +160,46 @@ export function DataTableToolbar<TData>({
             )}
 
             <Separator orientation="vertical" className="h-6 mx-1 bg-muted/50" />
+
             <Tooltip>
               <TooltipTrigger asChild>
-
                 <Button
                   type="button"
                   size="sm"
                   variant="outline"
-                  disabled={!table.getSelectedRowModel().rows.length}
+                  onClick={handleClearSelection}
-                  onClick={() => table.resetRowSelection()}
                 >
                   <ScanIcon className="size-4 mr-1" aria-hidden="true" />
-                  <span>Quitar selección</span>
+                  <span>{t("components.datatable.actions.clear_selection")}</span>
                 </Button>
               </TooltipTrigger>
-              <TooltipContent>Quita la selección</TooltipContent>
+              <TooltipContent>
+                {t("components.datatable.actions.clear_selection")}
+              </TooltipContent>
             </Tooltip>
-
           </>
         )}
+
+        {/* Contador de selección */}
+        <div
+          className="text-sm text-muted-foreground ml-2"
+          aria-live="polite"
+        >
+          {hasSelection
+            ? t("components.datatable.selection_summary", {
+              count: selectedCount,
+              total: totalCount,
+            })
+            : t("components.datatable.selection_none", { total: totalCount })}
+        </div>
       </div>
 
-      {/* DERECHA: opciones de vista / filtros */}
+      {/* DERECHA: opciones de vista */}
       <div className="flex items-center gap-2">
-        {showViewOptions && <DataTableViewOptions table={table} />}
+        {showViewOptions && !readOnly && <DataTableViewOptions table={table} />}
       </div>
     </div>
-  )
+  );
 }
+
+export const MemoizedDataTableToolbar = React.memo(DataTableToolbar) as typeof DataTableToolbar;

packages/rdx-ui/src/components/datatable/data-table.tsx

@@ -61,6 +61,9 @@ export type DataTableBulkRowOps<TData> = {
 };
 
 export type DataTableMeta<TData> = TableMeta<TData> & {
+  totalItems?: number;  // para paginación server-side
+  readOnly?: boolean;
+
   tableOps?: DataTableOps<TData>
   rowOps?: DataTableRowOps<TData>
   bulkOps?: DataTableBulkRowOps<TData>
@@ -78,52 +81,99 @@ export interface DataTableProps<TData, TValue> {
   enableRowSelection?: boolean
   EditorComponent?: React.ComponentType<{ row: TData; index: number; onClose: () => void }>
 
-  getRowId?: (row: Row<TData>, index: number) => string;
+  getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
+
+  // Soporte para paginación server-side
+  manualPagination?: boolean;
+  pageIndex?: number; // 0-based
+  totalItems?: number;
+  onPageChange?: (pageIndex: number) => void;
+  onPageSizeChange?: (pageSize: number) => void;
+
+  // Acción al hacer click en una fila
+  onRowClick?: (row: TData, index: number, event: React.MouseEvent<HTMLTableRowElement>) => void;
 }
 
 export function DataTable<TData, TValue>({
   columns,
   data,
   meta,
+
   readOnly = false,
   enablePagination = true,
   pageSize = 25,
   enableRowSelection = false,
   EditorComponent,
+
+  getRowId,
+
+  manualPagination,
+  pageIndex = 0,
+  totalItems,
+  onPageChange,
+  onPageSizeChange,
+
+  onRowClick,
 }: DataTableProps<TData, TValue>) {
   const { t } = useTranslation();
-  const [rowSelection, setRowSelection] = React.useState({})
-  const [sorting, setSorting] = React.useState<SortingState>([])
-  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
-  const [colSizes, setColSizes] = React.useState<ColumnSizingState>({})
-  const [editIndex, setEditIndex] = React.useState<number | null>(null)
 
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [colSizes, setColSizes] = React.useState<ColumnSizingState>({});
+  const [editIndex, setEditIndex] = React.useState<number | null>(null);
+
+  // Configuración TanStack
   const table = useReactTable({
     data,
     columns,
     columnResizeMode: "onChange",
     onColumnSizingChange: setColSizes,
-    getRowId: (row: any, i) => row.id ?? String(i),
+    meta: { ...meta, totalItems, readOnly },
-    meta,
+
+    getRowId:
+      getRowId ??
+      ((originalRow: TData, i: number) =>
+        typeof (originalRow as any).id !== "undefined"
+          ? String((originalRow as any).id)
+          : String(i)),
+
     state: {
       columnSizing: colSizes,
       sorting,
       columnVisibility,
       rowSelection,
       columnFilters,
+      pagination: {
+        pageIndex,
+        pageSize,
       },
-    initialState: {
-      pagination: { pageSize },
     },
+
+    manualPagination,
+    pageCount: manualPagination
+      ? Math.ceil((totalItems ?? data.length) / (pageSize ?? 25))
+      : undefined,
+
+    onPaginationChange: (updater) => {
+      const next =
+        typeof updater === "function"
+          ? updater({ pageIndex, pageSize })
+          : updater;
+      if (next.pageIndex !== undefined) onPageChange?.(next.pageIndex);
+      if (next.pageSize !== undefined) onPageSizeChange?.(next.pageSize);
+    },
+
     enableRowSelection,
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
     onColumnVisibilityChange: setColumnVisibility,
+
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
+    getPaginationRowModel: manualPagination ? undefined : getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getFacetedRowModel: getFacetedRowModel(),
     getFacetedUniqueValues: getFacetedUniqueValues(),
@@ -131,17 +181,19 @@ export function DataTable<TData, TValue>({
 
   const handleCloseEditor = React.useCallback(() => setEditIndex(null), [])
 
+  // Render principal
   return (
-    <div className='flex flex-col gap-0'>
+    <div className="flex flex-col gap-0">
-      <DataTableToolbar table={table} showViewOptions={false} />
+      <DataTableToolbar table={table} showViewOptions={!readOnly} />
 
       <div className="overflow-hidden rounded-md border">
         <TableComp className="w-full text-sm">
-          <TableHeader className="sticky top-0 bg-muted hover:bg-muted z-10">
+          {/* CABECERA */}
+          <TableHeader className="sticky top-0 z-10">
             {table.getHeaderGroups().map((hg) => (
               <TableRow key={hg.id}>
                 {hg.headers.map((h) => {
-                  const w = h.getSize(); // px
+                  const w = h.getSize();
                   const minW = h.column.columnDef.minSize;
                   const maxW = h.column.columnDef.maxSize;
                   return (
@@ -154,7 +206,11 @@ export function DataTable<TData, TValue>({
                         maxWidth: typeof maxW === "number" ? `${maxW}px` : undefined,
                       }}
                     >
-                      {h.isPlaceholder ? null : flexRender(h.column.columnDef.header, h.getContext())}
+                      <div className={"text-xs text-muted-foreground text-nowrap cursor-default"}>
+                        {h.isPlaceholder
+                          ? null
+                          : flexRender(h.column.columnDef.header, h.getContext())}
+                      </div>
                     </TableHead>
                   );
                 })}
@@ -162,10 +218,22 @@ export function DataTable<TData, TValue>({
             ))}
           </TableHeader>
 
+          {/* CUERPO */}
           <TableBody>
             {table.getRowModel().rows.length ? (
-              table.getRowModel().rows.map((row, i) => (
+              table.getRowModel().rows.map((row, rowIndex) => (
-                <TableRow key={row.id} data-state={row.getIsSelected() && "selected"} className='group'>
+                <TableRow
+                  key={row.id}
+                  role="button"
+                  tabIndex={0}
+                  data-state={row.getIsSelected() && "selected"}
+                  className={`group bg-background ${readOnly ? "cursor-default" : "cursor-pointer"}`}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") onRowClick?.(row.original, rowIndex, e as any);
+                  }}
+                  onDoubleClick={
+                    !readOnly && !onRowClick ? () => setEditIndex(rowIndex) : undefined
+                  }                >
                   {row.getVisibleCells().map((cell) => {
                     const w = cell.column.getSize();
                     const minW = cell.column.columnDef.minSize;
@@ -188,23 +256,29 @@ export function DataTable<TData, TValue>({
               ))
             ) : (
               <TableRow>
-                <TableCell
+                <TableCell colSpan={columns.length} className="h-24 text-center text-muted-foreground">
-                  colSpan={columns.length}
-                  className='h-24 text-center text-muted-foreground'
-                >
                   {t("components.datatable.empty")}
                 </TableCell>
               </TableRow>
             )}
           </TableBody>
+          {/* Paginación */}
+          {enablePagination && (
             <TableFooter>
+              <TableRow>
+                <TableCell colSpan={100}>
+                  <DataTablePagination table={table} />
+                </TableCell>
+              </TableRow>
+            </TableFooter>)
+          }
 
-          </TableFooter>
         </TableComp>
       </div>
 
-      {enablePagination && <DataTablePagination table={table} />}
 
+
+      {/* Editor modal */}
       {EditorComponent && editIndex !== null && (
         <Dialog open onOpenChange={handleCloseEditor}>
           <DialogContent className="max-w-3xl">

packages/rdx-ui/src/locales/en.json

@@ -12,11 +12,27 @@
       "desc": "Desc",
       "hide": "Hide",
       "empty": "No results found",
+      "selection_summary": "{{count}} selected rows of {{total}}",
+      "selection_none": "Total: {{total}} rows",
       "columns": {
         "actions": "Actions"
       },
       "actions": {
-        "add": "Add new line"
+        "add": "Add new line",
+        "duplicate": "Duplicate",
+        "remove": "Remove",
+        "move_up": "Move up",
+        "move_down": "Move down"
+      },
+      "pagination": {
+        "goto_first_page": "Go to first page",
+        "goto_previus_page": "Go to previus_page",
+        "goto_next_page": "Go to next page",
+        "goto_last_page": "Go to last page",
+        "page_of": "Page {{page}} of {{of}}",
+        "rows_per_page": "Rows per page",
+        "showing_range": "Showing {{start}}–{{end}} of {{total}} records",
+        "rows_selected": "{{count}} of {{total}} selected rows"
       }
     },
     "loading_indicator": {

packages/rdx-ui/src/locales/es.json

@@ -15,6 +15,8 @@
       "desc": "Desc",
       "hide": "Ocultar",
       "empty": "No hay resultados",
+      "selection_summary": "{{count}} filas seleccionadas de {{total}}",
+      "selection_none": "Total: {{total}} filas",
       "columns": {
         "actions": "Acciones"
       },
@@ -24,6 +26,16 @@
         "remove": "Eliminar",
         "move_up": "Subir",
         "move_down": "Bajar"
+      },
+      "pagination": {
+        "goto_first_page": "Ir a la primera página",
+        "goto_previus_page": "Ir a la página anterior",
+        "goto_next_page": "Ir a la página siguiente",
+        "goto_last_page": "Ir a la última página",
+        "page_of": "Página {{page}} de {{of}}",
+        "rows_per_page": "Filas por página",
+        "showing_range": "Mostrando {{start}}–{{end}} de {{total}} registros",
+        "rows_selected": "{{count}} de {{total}} filas seleccionadas"
       }
     },
     "loading_indicator": {

packages/rdx-ui/src/styles/globals.css

@@ -1 +1,43 @@
 @source "../components";
+
+@layer components {
+  /**
+   * Convención: .brand-[surface/text]-[escala]-[dirección]
+   * Requiere dark mode activo en Tailwind (class o media).
+   */
+
+  /* Fondo suave diagonal */
+  .brand-surface-50-br {
+    @apply bg-gradient-to-br from-blue-50 via-violet-50 to-purple-50
+           dark:from-blue-950 dark:via-violet-950 dark:to-purple-950;
+  }
+
+  .brand-surface-100-br {
+    @apply bg-gradient-to-br from-blue-100 via-violet-100 to-purple-100
+           dark:from-blue-900 dark:via-violet-900 dark:to-purple-900;
+  }
+
+  /* Fondo suave horizontal */
+  .brand-surface-50-x {
+    @apply bg-gradient-to-r from-blue-50 to-violet-50
+     hover:from-blue-50 hover:to-violet-50
+           dark:from-blue-900 dark:to-violet-900;
+  }
+
+  .brand-surface-100-x {
+    @apply bg-gradient-to-r from-blue-100 to-violet-100
+     hover:from-blue-100 hover:to-violet-100
+           dark:from-blue-900 dark:to-violet-900;
+  }
+
+  .brand-surface-200-x {
+    @apply bg-gradient-to-r from-blue-200 to-violet-200
+           dark:from-blue-800 dark:to-violet-800;
+  }
+
+  /* Gradiente para texto (intenso) */
+  .brand-text-strong-x {
+    @apply bg-gradient-to-r from-blue-600 to-violet-600 bg-clip-text text-transparent antialiased
+           dark:from-blue-400 dark:to-violet-400;
+  }
+}

packages/shadcn-ui/src/components/pagination.tsx

@@ -1,17 +1,16 @@
-import * as React from "react"
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
   MoreHorizontalIcon,
 } from "lucide-react"
+import * as React from "react"
 
-import { cn } from "@repo/shadcn-ui/lib/utils"
 import { Button, buttonVariants } from "@repo/shadcn-ui/components/button"
+import { cn } from "@repo/shadcn-ui/lib/utils"
 
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
   return (
     <nav
-      role="navigation"
       aria-label="pagination"
       data-slot="pagination"
       className={cn("mx-auto flex w-full justify-center", className)}
@@ -118,10 +117,6 @@ function PaginationEllipsis({
 
 export {
   Pagination,
-  PaginationContent,
+  PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious
-  PaginationLink,
-  PaginationItem,
-  PaginationPrevious,
-  PaginationNext,
-  PaginationEllipsis,
 }
+

packages/shadcn-ui/src/components/table.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 
 import { cn } from "@repo/shadcn-ui/lib/utils"

packages/shadcn-ui/src/styles/globals.css

@@ -14,35 +14,10 @@
  *
  * https://tweakcn.com/
  * https://themux.vercel.app/shadcn-themes
+ * https://shadcnstudio.com/theme-generator
  *
  **/
 
-@theme {
-  --graphite-50: #f8f9fc;
-  --graphite-100: #f1f2f9;
-  --graphite-200: #e2e4f0;
-  --graphite-300: #cbd0e1;
-  --graphite-400: #949db8;
-  --graphite-500: #646e8b;
-  --graphite-600: #475269;
-  --graphite-700: #333b55;
-  --graphite-800: #1e233b;
-  --graphite-900: #0f121a;
-  --graphite-950: #020307;
-
-  --magenta-50: #fff0f7;
-  --magenta-100: #ffdcec;
-  --magenta-200: #ffbfdd;
-  --magenta-300: #ff9aca;
-  --magenta-400: #ff70b4;
-  --magenta-500: #ff479e;
-  --magenta-600: #ff1a88;
-  --magenta-700: #e60070;
-  --magenta-800: #cc0063;
-  --magenta-900: #99004a;
-  --magenta-950: #660031;
-}
-
 :root {
   --font-sans: "Noto Sans", ui-sans-serif, sans-serif, system-ui;
   --font-serif: "Noto Serif", ui-serif, serif;