Proformas: Ordenación y guardar preferencias

modules/customer-invoices/src/api/infrastructure/issued-invoices/persistence/sequelize/repositories/issued-invoice.repository.ts

@@ -220,11 +220,19 @@ export class IssuedInvoiceRepository
       const query = criteriaConverter.convert(criteria, {
         searchableFields: ["invoice_number", "reference", "description"],
         mappings: {
-          invoice_number: "CustomerInvoiceModel.invoice_number",
+          invoice_date: "invoice_date",
-          reference: "CustomerInvoiceModel.reference",
+          invoice_number: "invoice_number",
-          description: "CustomerInvoiceModel.description",
+          reference: "reference",
+          description: "description",
+          recipient_name: "current_customer.name",
         },
-        allowedFields: ["invoice_date", "id", "created_at"],
+        sortableFields: [
+          "current_customer.name",
+          "invoice_number",
+          "invoice_date",
+          "id",
+          "created_at",
+        ],
         enableFullText: true,
         database: this.database,
         strictMode: true, // fuerza error si ORDER BY no permitido

modules/customer-invoices/src/api/infrastructure/proformas/persistence/sequelize/repositories/proforma.repository.ts

@@ -350,11 +350,19 @@ export class ProformaRepository
       const query = criteriaConverter.convert(criteria, {
         searchableFields: ["invoice_number", "reference", "description"],
         mappings: {
-          invoice_number: "CustomerInvoiceModel.invoice_number",
+          invoice_date: "invoice_date",
-          reference: "CustomerInvoiceModel.reference",
+          invoice_number: "invoice_number",
-          description: "CustomerInvoiceModel.description",
+          reference: "reference",
+          description: "description",
+          recipient_name: "current_customer.name",
         },
-        allowedFields: ["invoice_date", "id", "created_at"],
+        sortableFields: [
+          "current_customer.name",
+          "invoice_number",
+          "invoice_date",
+          "id",
+          "created_at",
+        ],
         enableFullText: true,
         database: this.database,
         strictMode: true, // fuerza error si ORDER BY no permitido

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

@@ -150,12 +150,12 @@
       "list": {
         "title": "Customer proformas",
         "description": "List all customer proformas",
-        "grid_columns": {
+        "columns": {
-          "invoice_number": "#",
+          "invoice_number": "Num.",
           "series": "Serie",
           "reference": "Reference",
           "status": "Status",
-          "invoice_date": "Proforma date",
+          "invoice_date": "Date",
           "operation_date": "Operation date",
           "recipient": "Customer",
           "recipient_tin": "TIN",

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

@@ -151,12 +151,12 @@
       "list": {
         "title": "Proformas",
         "description": "Lista todas las proformas",
-        "grid_columns": {
+        "columns": {
-          "invoice_number": "#",
+          "invoice_number": "Num.",
           "series": "Serie",
           "reference": "Reference",
           "status": "Estado",
-          "invoice_date": "Fecha de proforma",
+          "invoice_date": "Fecha",
           "operation_date": "Fecha de operación",
           "recipient": "Cliente",
           "recipient_tin": "NIF/CIF",

modules/customer-invoices/src/web/proformas/list/controllers/use-list-proformas.controller.ts

@@ -1,5 +1,10 @@
 import { useDebounce } from "@erp/core/hooks";
-import { useDataTablePreferences } from "@repo/rdx-ui/components";
+import { INITIAL_PAGE_INDEX, INITIAL_PAGE_SIZE } from "@repo/rdx-criteria";
+import {
+  type DataTableSort,
+  type DataTableSortDirection,
+  useDataTablePreferences,
+} from "@repo/rdx-ui/components";
 import { NumberHelper } from "@repo/rdx-utils";
 import { useCallback, useMemo, useState } from "react";
 import { useSearchParams } from "react-router-dom";
@@ -13,14 +18,41 @@ import {
 
 type ProformaListStatusFilter = "all" | ProformaStatus;
 
+// Datos por defecto mientras se carga la consulta o en caso de error.
 const EMPTY_PROFORMAS_LIST: ProformaList = {
   items: [],
-  page: 0,
+  page: INITIAL_PAGE_INDEX,
-  perPage: 5,
+  perPage: INITIAL_PAGE_SIZE,
   totalPages: 0,
   totalItems: 0,
 };
 
+// Campos que se permiten ordenar para la lista de proformas (consulta).
+type ProformaListSortField = "invoiceNumber" | "recipientName" | "invoiceDate";
+
+type ProformaListApiSortField = "invoice_number" | "recipient_name" | "invoice_date";
+
+const PROFORMA_LIST_SORT_FIELDS: Record<ProformaListSortField, ProformaListApiSortField> = {
+  invoiceNumber: "invoice_number",
+  recipientName: "recipient_name",
+  invoiceDate: "invoice_date",
+};
+
+const DEFAULT_API_SORT_FIELD: ProformaListApiSortField = "invoice_date";
+
+const DEFAULT_SORT = {
+  field: "invoiceDate",
+  direction: "desc",
+} satisfies DataTableSort;
+
+const isProformaListSortField = (value: string | null): value is ProformaListSortField => {
+  return value === "invoiceNumber" || value === "recipientName" || value === "invoiceDate";
+};
+
+const isSortDirection = (value: string | null): value is DataTableSortDirection => {
+  return value === "asc" || value === "desc";
+};
+
 export const useListProformasController = () => {
   const [search, setSearch] = useState("");
   const [statusFilter, setStatusFilter] = useState<ProformaListStatusFilter>("all");
@@ -28,7 +60,7 @@ export const useListProformasController = () => {
 
   const tablePreferences = useDataTablePreferences({
     storageKey: "proformas:list:grid",
-    defaultPageSize: 5,
+    defaultPageSize: EMPTY_PROFORMAS_LIST.perPage,
     defaultColumnVisibility: {
       reference: true,
       recipientName: true,
@@ -36,12 +68,17 @@ export const useListProformasController = () => {
       totalAmountFmt: true,
       invoiceDate: true,
     },
+    defaultSort: DEFAULT_SORT,
   });
 
   const { pageSize: preferencesPageSize, setPageSize: setPageSizePreference } = tablePreferences;
+  const { sort: preferencesSorting, setSort: setSortPreference } = tablePreferences;
 
   // Parse page from URL (1-based) or default to 1
-  const urlPage = NumberHelper.parsePositiveInteger(searchParams.get("page"), 1);
+  const urlPage = NumberHelper.parsePositiveInteger(
+    searchParams.get("page"),
+    INITIAL_PAGE_INDEX + 1
+  );
   const pageIndex = urlPage - 1; // Convert to 0-based for internal use
 
   // Parse pageSize from URL or use preferences
@@ -52,17 +89,37 @@ export const useListProformasController = () => {
 
   const debouncedSearch = useDebounce(search, 300);
 
+  // Criterios de ordenamiento
+  const urlSortFieldValue = searchParams.get("sortField");
+  const urlSortDirectionValue = searchParams.get("sortDirection");
+
+  const urlSort =
+    isProformaListSortField(urlSortFieldValue) && isSortDirection(urlSortDirectionValue)
+      ? {
+          field: urlSortFieldValue,
+          direction: urlSortDirectionValue,
+        }
+      : undefined;
+
+  const sort = urlSort ?? preferencesSorting ?? DEFAULT_SORT;
+
+  const orderBy =
+    PROFORMA_LIST_SORT_FIELDS[sort.field as ProformaListSortField] ?? DEFAULT_API_SORT_FIELD;
+
+  const order = sort.direction;
+
+  // Construir criterios de consulta
   const criteria = useMemo<NonNullable<ListProformasByCriteriaParams["criteria"]>>(
     () => ({
       q: debouncedSearch || "",
       pageNumber: pageIndex,
       pageSize,
-      order: "desc",
+      orderBy,
-      orderBy: "invoice_date",
+      order,
       filters:
         statusFilter === "all" ? [] : [{ field: "status", operator: "eq", value: statusFilter }],
     }),
-    [debouncedSearch, pageIndex, pageSize, statusFilter]
+    [debouncedSearch, pageIndex, pageSize, orderBy, order, statusFilter]
   );
 
   const query = useProformasListQuery({ criteria });
@@ -96,7 +153,7 @@ export const useListProformasController = () => {
         // Reset page to 1 when search changes
         setSearchParams((prev) => {
           const params = new URLSearchParams(prev);
-          params.set("page", "1");
+          params.set("page", String(INITIAL_PAGE_INDEX + 1)); // Convert to 1-based for URL
           return params;
         });
         return nextValue;
@@ -124,7 +181,7 @@ export const useListProformasController = () => {
       // Reset page to 1 and update pageSize when it changes
       setSearchParams((prev) => {
         const params = new URLSearchParams(prev);
-        params.set("page", "1");
+        params.set("page", String(INITIAL_PAGE_INDEX + 1)); // Convert to 1-based for URL
         params.set("pageSize", String(value));
         return params;
       });
@@ -133,6 +190,31 @@ export const useListProformasController = () => {
     [pageSize, setSearchParams, setPageSizePreference]
   );
 
+  const setSortValue = useCallback(
+    (nextSort: DataTableSort) => {
+      if (!isProformaListSortField(nextSort.field)) {
+        return;
+      }
+
+      if (sort.field === nextSort.field && sort.direction === nextSort.direction) {
+        return;
+      }
+
+      setSearchParams((prev) => {
+        const params = new URLSearchParams(prev);
+
+        params.set("sortField", nextSort.field);
+        params.set("sortDirection", nextSort.direction);
+        params.set("page", String(INITIAL_PAGE_INDEX + 1));
+
+        return params;
+      });
+
+      setSortPreference(nextSort);
+    },
+    [setSearchParams, sort.field, sort.direction, setSortPreference]
+  );
+
   return {
     data: query.data ?? EMPTY_PROFORMAS_LIST,
     isLoading: query.isLoading,
@@ -153,6 +235,9 @@ export const useListProformasController = () => {
     search,
     setSearchValue,
 
+    sort,
+    setSort: setSortValue,
+
     statusFilter,
     setStatusFilter: setStatusFilterValue,
   };

modules/customer-invoices/src/web/proformas/list/ui/blocks/proformas-grid/proformas-grid.tsx

@@ -1,4 +1,4 @@
-import { DataTable, SkeletonDataTable } from "@repo/rdx-ui/components";
+import { DataTable, type DataTableSort, SkeletonDataTable } from "@repo/rdx-ui/components";
 import type { ColumnDef, OnChangeFn, VisibilityState } from "@tanstack/react-table";
 
 import { useTranslation } from "../../../../../i18n";
@@ -16,6 +16,9 @@ interface ProformasGridProps {
   onPageChange: (pageIndex: number) => void;
   onPageSizeChange: (size: number) => void;
 
+  sort: DataTableSort;
+  onSortChange?: (nextSort: DataTableSort) => void;
+
   columnVisibility?: VisibilityState;
   onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
 
@@ -24,15 +27,22 @@ interface ProformasGridProps {
 
 export const ProformasGrid = ({
   data,
+  columns,
+
   loading,
   fetching,
-  columns,
+
   pageIndex,
   pageSize,
   onPageChange,
   onPageSizeChange,
+
+  sort,
+  onSortChange,
+
   columnVisibility,
   onColumnVisibilityChange,
+
   onRowClick,
 }: ProformasGridProps) => {
   const { t } = useTranslation();
@@ -57,12 +67,15 @@ export const ProformasGrid = ({
       enablePagination
       enableRowSelection
       manualPagination
+      manualSorting
       onColumnVisibilityChange={onColumnVisibilityChange}
       onPageChange={onPageChange}
       onPageSizeChange={onPageSizeChange}
+      onSortChange={onSortChange}
       //onRowClick={(row) => onRowClick?.(row.id)}
       pageIndex={pageIndex}
       pageSize={pageSize}
+      sort={sort}
       totalItems={totalItems}
     />
   );

modules/customer-invoices/src/web/proformas/list/ui/blocks/proformas-grid/use-proforma-grid-columns.tsx

@@ -1,3 +1,4 @@
+import { DataTableColumnHeader } from "@repo/rdx-ui/components";
 import { DateHelper } from "@repo/rdx-utils";
 import {
   Button,
@@ -9,7 +10,6 @@ import {
 } from "@repo/shadcn-ui/components";
 import type { ColumnDef } from "@tanstack/react-table";
 import {
-  ArrowUpDownIcon,
   ExternalLinkIcon,
   FileTextIcon,
   PencilIcon,
@@ -46,6 +46,7 @@ export function useProformasGridColumns(
 ): ColumnDef<ProformaListRow, unknown>[] {
   const { t } = useTranslation();
 
+  // Todas las columnas deben tener un id
   return React.useMemo<ColumnDef<ProformaListRow, unknown>[]>(
     () => [
       {
@@ -70,37 +71,52 @@ export function useProformasGridColumns(
             onCheckedChange={(value) => row.toggleSelected(!!value)}
           />
         ),
-        enableSorting: false,
         enableHiding: false,
+        enableSorting: false,
       },
       {
+        id: "invoiceDate",
+        accessorKey: "invoiceDate",
+        enableHiding: false,
+        enableSorting: true,
+        header: ({ column }) => (
+          <DataTableColumnHeader
+            column={column}
+            title={t("pages.proformas.list.columns.invoice_date")}
+          />
+        ),
+        cell: ({ row }) => DateHelper.format(row.original.invoiceDate),
+      },
+      {
+        id: "series",
         accessorKey: "series",
         header: "Serie",
         enableHiding: true,
+        enableSorting: false,
       },
       {
+        id: "invoiceNumber",
         accessorKey: "invoiceNumber",
-        header: ({ column }) => {
-          return (
-            <Button
-              className="px-0"
-              onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-              variant="ghost"
-            >
-              Num.
-              <ArrowUpDownIcon className="ml-2 size-4" />
-            </Button>
-          );
-        },
         enableHiding: false,
+        enableSorting: true,
+        header: ({ column }) => (
+          <DataTableColumnHeader
+            column={column}
+            title={t("pages.proformas.list.columns.invoice_number")}
+          />
+        ),
         meta: {
           cellClassName: "font-medium",
         },
       },
       {
+        id: "status",
         accessorKey: "status",
-        header: "Estado",
         enableHiding: true,
+        enableSorting: false,
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title={t("pages.proformas.list.columns.status")} />
+        ),
         cell: ({ row }) => {
           const proforma = row.original;
 
@@ -139,19 +155,16 @@ export function useProformasGridColumns(
 
       // Cliente
       {
+        id: "recipientName",
         accessorKey: "recipientName",
-        header: ({ column }) => {
+        enableHiding: false,
-          return (
+        enableSorting: true,
-            <Button
+        header: ({ column }) => (
-              className="px-0"
+          <DataTableColumnHeader
-              onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+            column={column}
-              variant="ghost"
+            title={t("pages.proformas.list.columns.recipient")}
-            >
+          />
-              Cliente
+        ),
-              <ArrowUpDownIcon className="ml-2 size-4" />
-            </Button>
-          );
-        },
         cell: ({ row }) => {
           const proforma = row.original;
           return (
@@ -165,26 +178,18 @@ export function useProformasGridColumns(
           cellClassName: "max-w-128",
         },
       },
+
       {
-        accessorKey: "invoiceDate",
+        id: "reference",
-        header: ({ column }) => {
-          return (
-            <Button
-              className="px-0"
-              onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-              variant="ghost"
-            >
-              Fecha prof.
-              <ArrowUpDownIcon className="ml-2 size-4" />
-            </Button>
-          );
-        },
-        cell: ({ row }) => DateHelper.format(row.original.invoiceDate),
-      },
-      {
         accessorKey: "reference",
-        header: "Referencia",
         enableHiding: true,
+        enableSorting: false,
+        header: ({ column }) => (
+          <DataTableColumnHeader
+            column={column}
+            title={t("pages.proformas.list.columns.reference")}
+          />
+        ),
         cell: ({ row }) => <div className="truncate">{row.original.reference}</div>,
         meta: {
           cellClassName: "hidden lg:table-cell max-w-16",
@@ -193,40 +198,56 @@ export function useProformasGridColumns(
       },
 
       {
+        id: "subtotalAmountFmt",
         accessorKey: "subtotalAmountFmt",
-        header: () => "Subtotal",
+        enableHiding: true,
+        enableSorting: false,
+        header: ({ column }) => (
+          <DataTableColumnHeader
+            column={column}
+            title={t("pages.proformas.list.columns.subtotal_amount")}
+          />
+        ),
         meta: {
           cellClassName: "hidden 2xl:table-cell text-right tabular-nums font-medium",
           headerClassName: "hidden 2xl:table-cell text-right",
         },
       },
       {
+        id: "totalDiscountAmountFmt",
         accessorKey: "totalDiscountAmountFmt",
         header: "Dtos",
+        enableSorting: false,
         meta: {
           cellClassName: "hidden 2xl:table-cell text-right tabular-nums font-medium",
           headerClassName: "hidden 2xl:table-cell text-right",
         },
       },
       {
+        id: "taxableAmountFmt",
         accessorKey: "taxableAmountFmt",
         header: "Base Imp.",
+        enableSorting: false,
         meta: {
           cellClassName: "hidden 2xl:table-cell text-right tabular-nums font-medium",
           headerClassName: "hidden 2xl:table-cell text-right",
         },
       },
       {
+        id: "taxesAmountFmt",
         accessorKey: "taxesAmountFmt",
         header: "Impuestos",
+        enableSorting: false,
         meta: {
           cellClassName: "hidden 2xl:table-cell text-right tabular-nums font-medium",
           headerClassName: "hidden 2xl:table-cell text-right",
         },
       },
       {
+        id: "totalAmountFmt",
         accessorKey: "totalAmountFmt",
         header: "Total",
+        enableSorting: false,
         meta: {
           cellClassName: "hidden xl:table-cell text-right tabular-nums font-semibold",
           headerClassName: "hidden xl:table-cell text-right",
@@ -257,7 +278,12 @@ export function useProformasGridColumns(
                       render={
                         <Button
                           className="size-7 cursor-pointer text-muted-foreground hover:text-primary"
-                          onClick={() => actionHandlers.onEditClick?.(proforma)}
+                          onClick={(event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+
+                            actionHandlers.onEditClick?.(proforma);
+                          }}
                           size="icon"
                           variant="ghost"
                         >
@@ -279,9 +305,12 @@ export function useProformasGridColumns(
                       render={
                         <Button
                           className="size-7 cursor-pointer text-muted-foreground hover:text-primary"
-                          onClick={() =>
+                          onClick={(event) => {
-                            actionHandlers.onChangeStatusClick?.(proforma, availableTransitions[0])
+                            event.preventDefault();
-                          }
+                            event.stopPropagation();
+
+                            actionHandlers.onChangeStatusClick?.(proforma, availableTransitions[0]);
+                          }}
                           size="icon"
                           variant="ghost"
                         >
@@ -305,7 +334,12 @@ export function useProformasGridColumns(
                       render={
                         <Button
                           className="size-7 cursor-pointer text-muted-foreground hover:text-primary"
-                          onClick={() => actionHandlers.onIssueClick?.(proforma)}
+                          onClick={(event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+
+                            actionHandlers.onIssueClick?.(proforma);
+                          }}
                           size="icon"
                           variant="ghost"
                         >
@@ -326,8 +360,10 @@ export function useProformasGridColumns(
                       render={
                         <Button
                           className="size-8 text-destructive/75 hover:text-destructive cursor-pointer"
-                          onClick={(e) => {
+                          onClick={(event) => {
-                            e.preventDefault();
+                            event.preventDefault();
+                            event.stopPropagation();
+
                             actionHandlers.onDeleteClick?.(proforma);
                           }}
                           size="icon"

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

@@ -98,8 +98,10 @@ export const ListProformasPage = () => {
           onPageChange={listCtrl.setPageIndex}
           onPageSizeChange={listCtrl.setPageSize}
           onRowClick={(proformaId) => panelCtrl.openProformaPanel(proformaId, "view")}
+          onSortChange={listCtrl.setSort}
           pageIndex={listCtrl.pageIndex}
           pageSize={listCtrl.pageSize}
+          sort={listCtrl.sort}
         />
 
         {/* Explicación técnica */}

modules/customer-invoices/src/web/proformas/update/ui/editors/proforma-update-editor-form.tsx

@@ -61,11 +61,11 @@ export const ProformaUpdateEditorForm = ({
       onKeyDown={preventEnterKeySubmitForm}
       onSubmit={onSubmit}
     >
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-12">
+      <div className="grid grid-cols-1 gap-4 xl:grid-cols-12">
-        <ProformaUpdateHeaderEditor className="md:col-span-8" disabled={isSubmitting} />
+        <ProformaUpdateHeaderEditor className="xl:col-span-9" disabled={isSubmitting} />
 
         <ProformaUpdateRecipientEditor
-          className="md:col-span-4"
+          className="xl:col-span-3"
           disabled={isSubmitting}
           onChangeCustomerClick={onChangeCustomerClick}
           onCreateCustomerClick={onCreateCustomerClick}
@@ -76,9 +76,9 @@ export const ProformaUpdateEditorForm = ({
       <ProformaUpdateItemsEditor disabled={isSubmitting} itemsCtrl={itemsCtrl} taxCtrl={taxCtrl} />
 
       <div className="grid grid-cols-1 gap-4 md:grid-cols-12">
-        <ProformaUpdateTaxEditor className="md:col-span-6" taxCtrl={taxCtrl} />
+        <ProformaUpdateTaxEditor className="md:col-span-4" taxCtrl={taxCtrl} />
         <ProformaTotalsSummary
-          className="md:col-span-6"
+          className="md:col-span-8"
           currency={currencyCode}
           globalDiscountField={
             <PercentageField

modules/customer-invoices/src/web/proformas/update/ui/editors/proforma-update-header-editor.tsx

@@ -6,6 +6,7 @@ import {
   TextAreaField,
   TextField,
 } from "@repo/rdx-ui/components";
+import { Badge } from "@repo/shadcn-ui/components";
 import { FileTextIcon } from "lucide-react";
 
 import { useTranslation } from "../../../../i18n";
@@ -34,7 +35,7 @@ export const ProformaUpdateHeaderEditor = ({
     >
       <FormSectionGrid>
         <SelectField
-          className="md:col-span-2"
+          className="md:col-span-3"
           disabled={disabled}
           label={t("form_fields.proformas.series.label")}
           name="series"
@@ -42,9 +43,33 @@ export const ProformaUpdateHeaderEditor = ({
           readOnly={readOnly}
         />
 
-        <DatePickerField
+        <TextField
+          className="md:col-span-6"
+          disabled={disabled}
+          label={t("form_fields.proformas.invoice_number.label")}
+          maxLength={16}
+          name="reference"
+          placeholder={t("form_fields.proformas.invoice_number.placeholder")}
+          readOnly={readOnly}
+          rightIcon={
+            <Badge className="text-sm" variant="secondary">
+              Autom.
+            </Badge>
+          }
+        />
+
+        <SelectField
           className="md:col-span-3"
           disabled={disabled}
+          label={t("form_fields.proformas.currency_code.label")}
+          name="currencyCode"
+          placeholder={t("form_fields.proformas.currency_code.placeholder")}
+          readOnly={readOnly}
+        />
+
+        <DatePickerField
+          className="md:col-span-3 md:col-start-1"
+          disabled={disabled}
           label={t("form_fields.proformas.invoice_date.label")}
           name="invoiceDate"
           placeholder={t("form_fields.proformas.invoice_date.placeholder")}
@@ -62,7 +87,7 @@ export const ProformaUpdateHeaderEditor = ({
         />
 
         <TextField
-          className="md:col-span-4"
+          className="md:col-span-6"
           disabled={disabled}
           label={t("form_fields.proformas.reference.label")}
           maxLength={256}

modules/customer-invoices/src/web/proformas/update/ui/pages/proforma-update-page.tsx

@@ -64,7 +64,7 @@ export const ProformaUpdatePage = () => {
   return (
     <FormProvider {...updateCtrl.form}>
       <UnsavedChangesProvider isDirty={updateCtrl.form.formState.isDirty}>
-        <AppHeader className="mx-auto max-w-5xl space-y-4">
+        <AppHeader className="mx-auto max-w-7xl space-y-4">
           <PageHeader
             description={t("pages.proformas.update.description")}
             onBackClick={() => navigateBack()}
@@ -87,7 +87,7 @@ export const ProformaUpdatePage = () => {
           />
         </AppHeader>
 
-        <AppContent className="mx-auto max-w-5xl space-y-4">
+        <AppContent className="mx-auto max-w-7xl space-y-4">
           {updateCtrl.isUpdateError && (
             <ErrorAlert
               message={

modules/customers/src/api/infrastructure/persistence/sequelize/repositories/customer.repository.ts

@@ -242,7 +242,7 @@ export class CustomerRepository
           "email_primary",
           "mobile_primary",
         ],
-        allowedFields: [
+        sortableFields: [
           "name",
           "trade_name",
           "reference",

packages/rdx-criteria/src/criteria-to-sequelize-converter.ts

@@ -124,17 +124,18 @@ export class CriteriaToSequelizeConverter implements ICriteriaToOrmConverter {
     const field = mappings[criteria.order.orderBy.value] || criteria.order.orderBy.value;
     const direction = criteria.order.orderType.value.toUpperCase();
 
-    const allowedFields = params.allowedFields ?? ["id", "created_at"];
+    const sortableFields = params.sortableFields ?? ["id", "created_at"];
     const strict = params.strictMode ?? false;
 
-    if (!allowedFields.includes(field)) {
+    if (!sortableFields.includes(field)) {
-      const msg = `[CriteriaToSequelizeConverter] Ignored ORDER BY '${field}' (not in allowedFields).`;
+      const msg = `[CriteriaToSequelizeConverter] Ignored ORDER BY '${field}' (not in sortableFields).`;
       if (strict) throw new Error(msg);
       console.warn(msg);
       return;
     }
 
-    appendOrder(options, [[field, direction]] as OrderItem[]);
+    const orderItem = this.buildOrderItem(field, direction);
+    appendOrder(options, orderItem as OrderItem[]);
   }
 
   /** Paginación estándar */
@@ -182,4 +183,18 @@ export class CriteriaToSequelizeConverter implements ICriteriaToOrmConverter {
 
     return `\`${tableAlias}\`.\`${field}\``;
   }
+
+  private buildOrderItem(field: string, direction: string): OrderItem {
+  if (field.includes(".")) {
+    const [associationAlias, column] = field.split(".");
+
+    if (!associationAlias || !column) {
+      throw new Error(`[CriteriaToSequelizeConverter] Invalid nested ORDER BY field '${field}'.`);
+    }
+
+    return [{ as: associationAlias }, column, direction] as OrderItem;
+  }
+
+  return [field, direction];
+}
 }

packages/rdx-criteria/src/types.ts

@@ -11,7 +11,7 @@ export type CriteriaMappings = Record<string, string>;
 
 /**
  * Parámetros de conversión → FindOptions (Sequelize).
- * - allowedFields: lista blanca de campos ordenables (deben estar indexados).
+ * - sortableFields: lista blanca de campos ordenables (deben estar indexados).
  * - searchableFields: columnas FULLTEXT (deben tener índice FT en BD).
  * - enableFullText: activa MATCH ... AGAINST si true.
  * - mappings: mapeo Criteria→SQL.
@@ -20,7 +20,7 @@ export type CriteriaMappings = Record<string, string>;
  * - strictMode?: true = lanza error si orden no permitido
  */
 export interface ConvertParams {
-  allowedFields?: string[]; // p.ej. ['invoice_date','id','created_at']
+  sortableFields?: string[]; // p.ej. ['invoice_date','id','created_at']
   searchableFields?: string[]; // p.ej. ['reference','description','notes']
   enableFullText?: boolean; // default: false
   mappings?: CriteriaMappings; // default: {}

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

@@ -41,7 +41,7 @@ export function DataTableColumnHeader<TData, TValue>({
               type="button"
               variant="ghost"
             >
-              <span>{title}</span>
+              {title}
               {column.getIsSorted() === "desc" ? (
                 <ArrowDownIcon />
               ) : column.getIsSorted() === "asc" ? (

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

@@ -65,6 +65,13 @@ export type DataTableMeta<TData> = TableMeta<TData> & {
   bulkOps?: DataTableBulkRowOps<TData>;
 };
 
+export type DataTableSortDirection = "asc" | "desc";
+
+export interface DataTableSort {
+  field: string;
+  direction: DataTableSortDirection;
+}
+
 export interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
@@ -81,6 +88,11 @@ export interface DataTableProps<TData, TValue> {
 
   getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
 
+  // Soporte para ordenamiento server-side
+  sort?: DataTableSort;
+  onSortChange?: (sort: DataTableSort) => void;
+  manualSorting?: boolean;
+
   // Soporte para paginación server-side
   manualPagination?: boolean;
   pageIndex?: number; // 0-based
@@ -111,6 +123,10 @@ export function DataTable<TData, TValue>({
 
   getRowId,
 
+  sort: sorting,
+  onSortChange: onSortingChange,
+  manualSorting,
+
   manualPagination,
   pageIndex = 0,
   totalItems,
@@ -122,7 +138,7 @@ export function DataTable<TData, TValue>({
   const { t } = useTranslation();
 
   const [rowSelection, setRowSelection] = React.useState({});
-  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [internalSorting, setInternalSorting] = React.useState<DataTableSort | undefined>();
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
   const [colSizes, setColSizes] = React.useState<ColumnSizingState>({});
 
@@ -130,10 +146,57 @@ export function DataTable<TData, TValue>({
     {}
   );
 
+  // Visibilidad
   const resolvedColumnVisibility = columnVisibility ?? internalColumnVisibility;
-
   const handleColumnVisibilityChange = onColumnVisibilityChange ?? setInternalColumnVisibility;
 
+  // Ordenación
+  const resolvedSorting = sorting ?? internalSorting;
+  const resolvedSortingState = React.useMemo<SortingState>(
+    () =>
+      resolvedSorting
+        ? [
+            {
+              id: resolvedSorting.field,
+              desc: resolvedSorting.direction === "desc",
+            },
+          ]
+        : [],
+    [resolvedSorting]
+  );
+
+  const handleSortingChange: OnChangeFn<SortingState> = (updater) => {
+    const nextSorting = typeof updater === "function" ? updater(resolvedSortingState) : updater;
+
+    const next = nextSorting[0];
+
+    if (!next?.id) {
+      return;
+    }
+
+    const nextSort: DataTableSort = {
+      field: next.id,
+      direction: next.desc ? "desc" : "asc",
+    };
+
+    if (
+      resolvedSorting?.field === nextSort.field &&
+      resolvedSorting.direction === nextSort.direction
+    ) {
+      return;
+    }
+
+    if (onSortingChange) {
+      onSortingChange(nextSort);
+      return;
+    }
+
+    setInternalSorting(nextSort);
+  };
+
+  const isManualSorting = manualSorting ?? false;
+  const isManualPagination = manualPagination ?? false;
+
   // Configuración TanStack
   const table = useReactTable({
     data,
@@ -151,14 +214,15 @@ export function DataTable<TData, TValue>({
 
     state: {
       columnSizing: colSizes,
-      sorting,
+      sorting: resolvedSortingState,
       columnVisibility: resolvedColumnVisibility,
       rowSelection,
       columnFilters,
       pagination: { pageIndex, pageSize },
     },
 
-    manualPagination,
+    manualSorting: isManualSorting,
+    manualPagination: isManualPagination,
     autoResetPageIndex: false,
 
     pageCount: manualPagination ? Math.max(1, Math.ceil((totalItems ?? 0) / pageSize)) : undefined,
@@ -176,16 +240,17 @@ export function DataTable<TData, TValue>({
       }
     },
 
+    onSortingChange: handleSortingChange,
+
     enableRowSelection,
     onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
     onColumnVisibilityChange: handleColumnVisibilityChange,
 
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: manualPagination ? undefined : getPaginationRowModel(),
+    getPaginationRowModel: isManualPagination ? undefined : getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
+    getSortedRowModel: isManualSorting ? undefined : getSortedRowModel(),
     getFacetedRowModel: getFacetedRowModel(),
     getFacetedUniqueValues: getFacetedUniqueValues(),
   });

packages/rdx-ui/src/components/datatable/hooks/use-data-table-preferences.ts

@@ -1,21 +1,28 @@
 import type { OnChangeFn, VisibilityState } from "@tanstack/react-table";
 import * as React from "react";
 
+import type { DataTableSort } from "../data-table.tsx";
+
+// Es preferible utilizar tipos de TanStack/Table
+// para guardar las preferencias de la tabla.
 export interface DataTablePreferences {
   pageSize: number;
   columnVisibility: VisibilityState;
+  sort?: DataTableSort;
 }
 
 interface UseDataTablePreferencesParams {
   storageKey: string;
   defaultPageSize: number;
   defaultColumnVisibility?: VisibilityState;
+  defaultSort?: DataTableSort;
 }
 
 export const useDataTablePreferences = ({
   storageKey,
   defaultPageSize,
   defaultColumnVisibility = {},
+  defaultSort = { field: "", direction: "asc" },
 }: UseDataTablePreferencesParams) => {
   const [preferences, setPreferences] = React.useState<DataTablePreferences>(() => {
     try {
@@ -25,6 +32,7 @@ export const useDataTablePreferences = ({
         return {
           pageSize: defaultPageSize,
           columnVisibility: defaultColumnVisibility,
+          sort: defaultSort,
         };
       }
 
@@ -36,11 +44,13 @@ export const useDataTablePreferences = ({
           ...defaultColumnVisibility,
           ...parsed.columnVisibility,
         },
+        sort: parsed.sort ?? defaultSort,
       };
     } catch {
       return {
         pageSize: defaultPageSize,
         columnVisibility: defaultColumnVisibility,
+        sort: defaultSort,
       };
     }
   });
@@ -82,9 +92,28 @@ export const useDataTablePreferences = ({
     [persist]
   );
 
+  const setSort = React.useCallback(
+    (sort: DataTableSort) => {
+      setPreferences((previous) => {
+        const next: DataTablePreferences = {
+          ...previous,
+          sort,
+        };
+
+        persist(next);
+
+        return next;
+      });
+    },
+    [persist]
+  );
+
   return {
     pageSize: preferences.pageSize,
     columnVisibility: preferences.columnVisibility,
+    sort: preferences.sort,
+
+    setSort,
     setPageSize,
     setColumnVisibility,
   };