@open-mercato/core 0.7.0 → 0.7.1-develop.7102.1.b41f7e3e51

package/src/modules/sales/components/documents/AdjustmentsSection.tsx

@@ -23,7 +23,7 @@ import type { SectionAction } from '@open-mercato/core/modules/customers/compone
 import type { SalesAdjustmentKind } from '../../data/entities'
 import { PriceWithCurrency } from '../PriceWithCurrency'
 import { AdjustmentDialog, type AdjustmentRowData, type AdjustmentSubmitPayload } from './AdjustmentDialog'
-import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useT, useLocale } from '@open-mercato/shared/lib/i18n/context'
 import { useOrganizationScopeDetail } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
 import { extractCustomFieldValues } from './customFieldHelpers'
 import { createLogger } from '@open-mercato/shared/lib/logger'
@@ -60,9 +60,9 @@ function normalizeNumber(value: unknown, fallback = 0): number {
   return fallback
 }
 
-function formatPercent(value: number | null | undefined): string {
+export function formatPercent(value: number | null | undefined, locale?: string): string {
   if (value === null || value === undefined) return '—'
-  const formatter = new Intl.NumberFormat(undefined, { style: 'percent', maximumFractionDigits: 2 })
+  const formatter = new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 2 })
   return formatter.format(value / 100)
 }
 
@@ -77,6 +77,7 @@ export function SalesDocumentAdjustmentsSection({
   onRowsChange,
 }: SalesDocumentAdjustmentsSectionProps) {
   const t = useT()
+  const locale = useLocale()
   const { organizationId, tenantId } = useOrganizationScopeDetail()
   const resolvedOrganizationId = orgFromProps ?? organizationId ?? null
   const resolvedTenantId = tenantFromProps ?? tenantId ?? null
@@ -433,7 +434,7 @@ export function SalesDocumentAdjustmentsSection({
       {
         id: 'rate',
         header: t('sales.documents.adjustments.rate', 'Rate'),
-        cell: ({ row }) => <span className="font-mono text-sm text-muted-foreground">{formatPercent(row.original.rate)}</span>,
+        cell: ({ row }) => <span className="font-mono text-sm text-muted-foreground">{formatPercent(row.original.rate, locale)}</span>,
       },
       {
         id: 'position',
@@ -441,7 +442,7 @@ export function SalesDocumentAdjustmentsSection({
         cell: ({ row }) => <span className="text-sm text-muted-foreground">{row.original.position}</span>,
       },
     ],
-    [currencyCode, resolveKindLabel, t]
+    [currencyCode, locale, resolveKindLabel, t]
   )
 
   const showLoadingState = loading && rows.length === 0

package/src/modules/sales/components/documents/ItemsSection.tsx

@@ -16,7 +16,7 @@ import {
   createDictionaryMap,
   normalizeDictionaryEntries,
 } from "@open-mercato/core/modules/dictionaries/components/dictionaryAppearance";
-import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { useT, useLocale } from "@open-mercato/shared/lib/i18n/context";
 import { useOrganizationScopeDetail } from "@open-mercato/shared/lib/frontend/useOrganizationScope";
 import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
 import { emitSalesDocumentTotalsRefresh } from "@open-mercato/core/modules/sales/lib/frontend/documentTotalsEvents";
@@ -131,6 +131,11 @@ function resolveInjectedColumnValue(
   return current;
 }
 
+const SHIPMENTS_PAGE_SIZE = 100;
+// A single order beyond this many shipment pages is pathological; stopping there
+// keeps the shipped state explicitly unresolved rather than silently partial.
+const SHIPMENTS_MAX_PAGES = 50;
+
 type SalesDocumentItemsSectionProps = {
   documentId: string;
   kind: "order" | "quote";
@@ -153,6 +158,7 @@ export function SalesDocumentItemsSection({
   onItemsChange,
 }: SalesDocumentItemsSectionProps) {
   const t = useT();
+  const locale = useLocale();
   const { organizationId, tenantId } = useOrganizationScopeDetail();
   const { confirm, ConfirmDialogElement } = useConfirmDialog();
   const resolvedOrganizationId = orgFromProps ?? organizationId ?? null;
@@ -168,6 +174,12 @@ export function SalesDocumentItemsSection({
   const [shippedTotals, setShippedTotals] = React.useState<Map<string, number>>(
     new Map(),
   );
+  // Quotes have no shipments at all, so their shipped state is known up front.
+  // For orders it stays unknown until every shipment page has been read — an
+  // empty map from a pending or failed load must never read as "nothing shipped".
+  const [shippedTotalsResolved, setShippedTotalsResolved] = React.useState(
+    kind !== "order",
+  );
 
   const { widgets: allColumnWidgets } = useInjectionDataWidgets(
     extensionPoints.hosts.orderItemColumns.spotId,
@@ -379,22 +391,31 @@ export function SalesDocumentItemsSection({
   const loadShippedTotals = React.useCallback(async () => {
     if (kind !== "order") {
       setShippedTotals(new Map());
+      setShippedTotalsResolved(true);
       return;
     }
+    setShippedTotals(new Map());
+    setShippedTotalsResolved(false);
     try {
-      const params = new URLSearchParams({
-        page: "1",
-        pageSize: "100",
-        orderId: documentId,
-      });
-      const response = await apiCall<{
-        items?: Array<Record<string, unknown>>;
-      }>(`/api/sales/shipments?${params.toString()}`, undefined, {
-        fallback: { items: [] },
-      });
-      if (response.ok && Array.isArray(response.result?.items)) {
-        const totals = new Map<string, number>();
-        response.result.items.forEach((shipment) => {
+      const totals = new Map<string, number>();
+      let page = 1;
+      let collected = 0;
+      let complete = false;
+      while (page <= SHIPMENTS_MAX_PAGES) {
+        const params = new URLSearchParams({
+          page: String(page),
+          pageSize: String(SHIPMENTS_PAGE_SIZE),
+          orderId: documentId,
+        });
+        const response = await apiCall<{
+          items?: Array<Record<string, unknown>>;
+          total?: unknown;
+        }>(`/api/sales/shipments?${params.toString()}`, undefined, {
+          fallback: { items: [] },
+        });
+        if (!response.ok || !Array.isArray(response.result?.items)) return;
+        const shipments = response.result.items;
+        shipments.forEach((shipment) => {
           const entries = Array.isArray(shipment.items)
             ? (shipment.items as Array<Record<string, unknown>>)
             : [];
@@ -412,13 +433,22 @@ export function SalesDocumentItemsSection({
             totals.set(lineId, current + quantity);
           });
         });
-        setShippedTotals(totals);
-      } else {
-        setShippedTotals(new Map());
+        collected += shipments.length;
+        const reportedTotal = normalizeNumber(response.result?.total, Number.NaN);
+        const hasMore =
+          shipments.length >= SHIPMENTS_PAGE_SIZE &&
+          (!Number.isFinite(reportedTotal) || collected < reportedTotal);
+        if (!hasMore) {
+          complete = true;
+          break;
+        }
+        page += 1;
       }
+      if (!complete) return;
+      setShippedTotals(totals);
+      setShippedTotalsResolved(true);
     } catch (err) {
       logger.error('sales.document.shipments.load', { err });
-      setShippedTotals(new Map());
     }
   }, [documentId, kind]);
 
@@ -439,6 +469,7 @@ export function SalesDocumentItemsSection({
     if (kind !== "order") {
       shipmentsLoadedForDocument.current = null;
       setShippedTotals(new Map());
+      setShippedTotalsResolved(true);
       return;
     }
     const key = `${kind}:${documentId}`;
@@ -797,6 +828,7 @@ export function SalesDocumentItemsSection({
                           {formatMoney(
                             item.unitPriceGross,
                             item.currencyCode ?? currencyCode ?? undefined,
+                            locale,
                           )}{" "}
                           <span className="text-xs text-muted-foreground">
                             {t("sales.documents.items.table.gross", "gross")}
@@ -806,6 +838,7 @@ export function SalesDocumentItemsSection({
                           {formatMoney(
                             item.unitPriceNet,
                             item.currencyCode ?? currencyCode ?? undefined,
+                            locale,
                           )}{" "}
                           {t("sales.documents.items.table.net", "net")}
                         </span>
@@ -820,6 +853,7 @@ export function SalesDocumentItemsSection({
                                   item.currencyCode ??
                                     currencyCode ??
                                     undefined,
+                                  locale,
                                 ),
                                 unit: unitPriceReference.referenceUnitCode,
                               },
@@ -843,6 +877,7 @@ export function SalesDocumentItemsSection({
                                       item.currencyCode ??
                                         currencyCode ??
                                         undefined,
+                                      locale,
                                     ),
                                   },
                                 )}
@@ -873,6 +908,7 @@ export function SalesDocumentItemsSection({
                           {formatMoney(
                             item.totalGross,
                             item.currencyCode ?? currencyCode ?? undefined,
+                            locale,
                           )}{" "}
                           <span className="text-xs font-normal text-muted-foreground">
                             {t("sales.documents.items.table.gross", "gross")}
@@ -882,6 +918,7 @@ export function SalesDocumentItemsSection({
                           {formatMoney(
                             item.totalNet,
                             item.currencyCode ?? currencyCode ?? undefined,
+                            locale,
                           )}{" "}
                           {t("sales.documents.items.table.net", "net")}
                         </span>
@@ -964,6 +1001,7 @@ export function SalesDocumentItemsSection({
             ? Math.max(0, shippedTotals.get(lineForEdit.id) ?? 0)
             : 0
         }
+        shippedQuantityResolved={shippedTotalsResolved}
         onSaved={async () => {
           await loadItems();
           emitSalesDocumentTotalsRefresh({ documentId, kind });

package/src/modules/sales/components/documents/LineItemDialog.tsx

@@ -46,10 +46,11 @@ import {
   renderDictionaryColor,
 } from "@open-mercato/core/modules/dictionaries/components/dictionaryAppearance";
 import { E } from "#generated/entities.ids.generated";
-import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { useT, useLocale } from "@open-mercato/shared/lib/i18n/context";
 import { useOrganizationScopeDetail } from "@open-mercato/shared/lib/frontend/useOrganizationScope";
 import { formatMoney, normalizeNumber } from "./lineItemUtils";
 import type { SalesLineRecord } from "./lineItemTypes";
+import { prepareShippedLineUpdatePayload } from "./lineItemShipmentLock";
 import {
   normalizeCustomFieldSubmitValue,
   extractCustomFieldValues,
@@ -279,6 +280,13 @@ type SalesLineDialogProps = {
   tenantId: string | null;
   initialLine?: SalesLineRecord | null;
   shippedQuantity?: number;
+  /**
+   * Whether `shippedQuantity` reflects a fully resolved shipment state. Defaults
+   * to `true` so callers that genuinely know the value keep working; pass `false`
+   * while the host is still loading shipments or after the load failed, and the
+   * dialog locks pricing instead of assuming the line is unshipped.
+   */
+  shippedQuantityResolved?: boolean;
   onOpenChange: (open: boolean) => void;
   onSaved?: () => Promise<void> | void;
   onDraftSaved?: (payload: Record<string, unknown>, lineId: string | null) => Promise<void> | void;
@@ -475,11 +483,13 @@ export function LineItemDialog({
   tenantId,
   initialLine,
   shippedQuantity = 0,
+  shippedQuantityResolved = true,
   onOpenChange,
   onSaved,
   onDraftSaved,
 }: SalesLineDialogProps) {
   const t = useT();
+  const locale = useLocale();
   const scope = useOrganizationScopeDetail();
   const resolvedOrganizationId = organizationId ?? scope.organizationId ?? null;
   const resolvedTenantId = tenantId ?? scope.tenantId ?? null;
@@ -513,6 +523,23 @@ export function LineItemDialog({
     () => (kind === "order" ? "sales/order-lines" : "sales/quote-lines"),
     [kind],
   );
+  // A line the caller has not resolved shipment state for is treated as shipped:
+  // the server rejects pricing changes on shipped lines, so guessing "unshipped"
+  // from a pending or failed shipments load hands the user an edit that cannot
+  // be saved. A brand-new line has no shipments by construction.
+  const hasExistingLine = Boolean(initialLine);
+  const shipmentStateUnknown = kind === "order" && hasExistingLine && !shippedQuantityResolved;
+  const isShippedOrderLine =
+    kind === "order" &&
+    hasExistingLine &&
+    (shipmentStateUnknown || shippedQuantity > 0);
+  // While the shipments read is unresolved the shipped quantity is unknown, so the
+  // only safe floor for a quantity edit is the quantity already stored on the line:
+  // whatever turns out to be shipped can never exceed it. Raising stays allowed,
+  // exactly as it is once the state resolves.
+  const storedQuantity = Number(initialLine?.quantity ?? 0);
+  const safeStoredQuantity = Number.isFinite(storedQuantity) ? storedQuantity : 0;
+  const quantityFloor = shipmentStateUnknown ? safeStoredQuantity : shippedQuantity;
   const documentKey = kind === "order" ? "orderId" : "quoteId";
   const customFieldEntityId =
     kind === "order" ? E.sales.sales_order_line : E.sales.sales_quote_line;
@@ -1018,10 +1045,10 @@ export function LineItemDialog({
               displayMode === "including-tax" &&
               amountGross !== null &&
               currency
-                ? formatMoney(amountGross, currency)
+                ? formatMoney(amountGross, currency, locale)
                 : null,
               displayMode === "excluding-tax" && amountNet !== null && currency
-                ? formatMoney(amountNet, currency)
+                ? formatMoney(amountNet, currency, locale)
                 : null,
               displayMode
                 ? displayMode === "including-tax"
@@ -1037,9 +1064,9 @@ export function LineItemDialog({
               labelParts.length > 0
                 ? labelParts.join(" • ")
                 : amountGross !== null && currency
-                  ? formatMoney(amountGross, currency)
+                  ? formatMoney(amountGross, currency, locale)
                   : amountNet !== null && currency
-                    ? formatMoney(amountNet, currency)
+                    ? formatMoney(amountNet, currency, locale)
                     : id;
             return {
               id,
@@ -1330,12 +1357,17 @@ export function LineItemDialog({
           },
         );
       }
-      if (shippedQuantity > 0 && qtyNumber < shippedQuantity) {
-        const message = t(
-          "sales.documents.items.errorQuantityBelowShipped",
-          "You cannot lower the quantity below the {{shipped}} already shipped.",
-          { shipped: shippedQuantity },
-        );
+      if (quantityFloor > 0 && qtyNumber < quantityFloor) {
+        const message = shipmentStateUnknown
+          ? t(
+              "sales.documents.items.errorQuantityShipmentsUnknown",
+              "The quantity cannot be lowered until this order's shipments have been read. Reopen the order to try again.",
+            )
+          : t(
+              "sales.documents.items.errorQuantityBelowShipped",
+              "You cannot lower the quantity below the {{shipped}} already shipped.",
+              { shipped: shippedQuantity },
+            );
         throw createCrudFormError(message, { quantity: message });
       }
       const resolvedQuantityUnit = (() => {
@@ -1509,9 +1541,20 @@ export function LineItemDialog({
       }
       if (resolvedName) payload.name = resolvedName;
 
+      const submittedPayload = prepareShippedLineUpdatePayload(
+        payload,
+        isShippedOrderLine && initialLine
+          ? {
+              quantity: initialLine.quantity,
+              totalNetAmount: initialLine.totalNet,
+              totalGrossAmount: initialLine.totalGross,
+            }
+          : null,
+      );
+
       try {
         if (onDraftSaved) {
-          await onDraftSaved(payload, editingId);
+          await onDraftSaved(submittedPayload, editingId);
           closeDialog();
           return;
         }
@@ -1521,7 +1564,9 @@ export function LineItemDialog({
           () =>
             action(
               resourcePath,
-              editingId ? { id: editingId, ...payload } : payload,
+              editingId
+                ? { id: editingId, ...submittedPayload }
+                : submittedPayload,
               {
                 errorMessage: t(
                   "sales.documents.items.errorSave",
@@ -1552,10 +1597,15 @@ export function LineItemDialog({
       documentKey,
       documentUpdatedAt,
       editingId,
+      initialLine,
+      isShippedOrderLine,
       onDraftSaved,
       priceOptions,
       productOption,
+      quantityFloor,
       resourcePath,
+      shipmentStateUnknown,
+      shippedQuantity,
       t,
       variantOption,
       onSaved,
@@ -1613,6 +1663,7 @@ export function LineItemDialog({
                   type="button"
                   size="sm"
                   variant={mode === "catalog" ? "default" : "ghost"}
+                  disabled={isShippedOrderLine}
                   onClick={() => switchMode("catalog")}
                 >
                   {t("sales.documents.items.lineMode.catalog", "Catalog item")}
@@ -1621,6 +1672,7 @@ export function LineItemDialog({
                   type="button"
                   size="sm"
                   variant={mode === "custom" ? "default" : "ghost"}
+                  disabled={isShippedOrderLine}
                   onClick={() => switchMode("custom")}
                 >
                   {t("sales.documents.items.lineMode.custom", "Custom line")}
@@ -1801,6 +1853,7 @@ export function LineItemDialog({
                       },
                     )
                   }
+                  disabled={isShippedOrderLine}
                 />
               ),
             } satisfies CrudField,
@@ -1960,7 +2013,7 @@ export function LineItemDialog({
                         },
                       )
                     }
-                    disabled={!productId}
+                    disabled={isShippedOrderLine || !productId}
                   />
                 );
               },
@@ -1984,6 +2037,51 @@ export function LineItemDialog({
                   typeof values?.variantId === "string"
                     ? values.variantId
                     : null;
+                const selectedPriceId =
+                  typeof value === "string" ? value : null;
+                const selectedPrice = selectedPriceId
+                  ? (priceOptions.find(
+                      (entry) => entry.id === selectedPriceId,
+                    ) ?? null)
+                  : null;
+                if (isShippedOrderLine) {
+                  const lockedAmount = normalizeNumber(
+                    values?.unitPrice,
+                    Number.NaN,
+                  );
+                  const lockedCurrency =
+                    selectedPrice?.currencyCode ??
+                    (typeof values?.currencyCode === "string"
+                      ? values.currencyCode
+                      : currencyCode) ??
+                    undefined;
+                  const lockedModeLabel =
+                    values?.priceMode === "net"
+                      ? t("sales.documents.items.priceNet", "Net")
+                      : t("sales.documents.items.priceGross", "Gross");
+                  const lockedAmountLabel = Number.isFinite(lockedAmount)
+                    ? `${formatMoney(lockedAmount, lockedCurrency, locale)} — ${lockedModeLabel}`
+                    : lockedModeLabel;
+                  const lockedPriceDetail =
+                    selectedPrice?.priceKindTitle ??
+                    selectedPrice?.priceKindCode ??
+                    null;
+                  return (
+                    <div className="space-y-2">
+                      <Input
+                        readOnly
+                        disabled
+                        value={lockedAmountLabel}
+                        aria-label={t("sales.documents.items.price", "Price")}
+                      />
+                      {lockedPriceDetail ? (
+                        <p className="text-xs text-muted-foreground">
+                          {lockedPriceDetail}
+                        </p>
+                      ) : null}
+                    </div>
+                  );
+                }
                 return (
                   <LookupSelect
                     key={
@@ -1991,7 +2089,7 @@ export function LineItemDialog({
                         ? `${productId}-${variantId ?? "no-variant"}`
                         : "price"
                     }
-                    value={typeof value === "string" ? value : null}
+                    value={selectedPriceId}
                     onChange={(next) => {
                       setValue(next ?? null);
                       const selected = next
@@ -2133,9 +2231,11 @@ export function LineItemDialog({
                   }
                   onChange={(event) => setValue(event.target.value)}
                   placeholder="0.00"
+                  disabled={isShippedOrderLine}
                 />
                 <Select
                   value={mode}
+                  disabled={isShippedOrderLine}
                   onValueChange={(value) => {
                     const nextMode = value === "net" ? "net" : "gross";
                     setFormValue?.("priceMode", nextMode);
@@ -2161,11 +2261,11 @@ export function LineItemDialog({
                       "sales.documents.items.priceBasisTemplate",
                       "Catalog price basis: {{baseAmount}} / {{baseUnit}}. Converted for {{unit}}: {{baseAmount}} × {{factor}} = {{convertedAmount}}.",
                       {
-                        baseAmount: formatMoney(selectedBaseAmount as number, selectedCurrency),
+                        baseAmount: formatMoney(selectedBaseAmount as number, selectedCurrency, locale),
                         baseUnit: baseUnitCode,
                         unit: quantityUnitCode,
                         factor: unitFactor,
-                        convertedAmount: formatMoney(convertedAmount, selectedCurrency),
+                        convertedAmount: formatMoney(convertedAmount, selectedCurrency, locale),
                       },
                     )}
                   </p>
@@ -2222,7 +2322,7 @@ export function LineItemDialog({
               <Select
                 value={resolvedValue || undefined}
                 onValueChange={(value) => handleChange({ target: { value } } as React.ChangeEvent<HTMLSelectElement>)}
-                disabled={!taxRates.length}
+                disabled={isShippedOrderLine || !taxRates.length}
               >
                 <SelectTrigger>
                   <SelectValue
@@ -2292,6 +2392,7 @@ export function LineItemDialog({
               <Input
                 value={typeof value === "string" ? value : ""}
                 onChange={(event) => setValue(event.target.value || null)}
+                disabled={isShippedOrderLine}
                 placeholder={t(
                   "sales.documents.items.quantityUnitPlaceholder",
                   "e.g. pc",
@@ -2349,7 +2450,7 @@ export function LineItemDialog({
                   });
                 }
               }}
-              disabled={!productId}
+              disabled={isShippedOrderLine || !productId}
             >
               <SelectTrigger>
                 <SelectValue
@@ -2394,7 +2495,7 @@ export function LineItemDialog({
                 typeof values?.quantityUnit === "string"
                   ? values.quantityUnit
                   : null;
-              if (productId) {
+              if (productId && !isShippedOrderLine) {
                 const selectedPriceId =
                   typeof values?.priceId === "string" ? values.priceId : null;
                 const selectedPriceKindId =
@@ -2549,6 +2650,7 @@ export function LineItemDialog({
     resolveTaxSelection,
     selectPriceAfterRefresh,
     hasTaxMetadata,
+    isShippedOrderLine,
   ]);
 
   const groups = React.useMemo<CrudFormGroup[]>(() => {
@@ -2914,6 +3016,21 @@ export function LineItemDialog({
               : t("sales.documents.items.addTitle", "Add line")}
           </DialogTitle>
         </DialogHeader>
+        {isShippedOrderLine ? (
+          <Alert status="information" style="lighter">
+            <AlertDescription>
+              {shipmentStateUnknown
+                ? t(
+                    "sales.documents.items.shippedLineLockPending",
+                    "Pricing is locked until this order's shipments have been read. Reopen the order to try again — you can still edit the name and raise the quantity.",
+                  )
+                : t(
+                    "sales.documents.items.shippedLineLocked",
+                    "Pricing is locked on this line because it already has shipped items. You can still edit the name and quantity.",
+                  )}
+            </AlertDescription>
+          </Alert>
+        ) : null}
         <CrudForm<LineFormState>
           key={formResetKey}
           embedded

package/src/modules/sales/components/documents/PaymentsSection.tsx

@@ -13,8 +13,9 @@ import { RowActions } from '@open-mercato/ui/backend/RowActions'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { useOrganizationScopeDetail } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
-import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useT, useLocale } from '@open-mercato/shared/lib/i18n/context'
 import { emitSalesDocumentTotalsRefresh } from '@open-mercato/core/modules/sales/lib/frontend/documentTotalsEvents'
+import { extensionPoints } from '@open-mercato/core/modules/sales/extension-points'
 import { PaymentDialog, type PaymentFormData, type PaymentTotals } from './PaymentDialog'
 import { extractCustomFieldValues } from './customFieldHelpers'
 import { Plus } from 'lucide-react'
@@ -59,10 +60,10 @@ function normalizeNumber(value: unknown): number {
   return 0
 }
 
-function formatMoney(value: number, currency: string | null | undefined): string {
+function formatMoney(value: number, currency: string | null | undefined, locale?: string): string {
   if (!currency || currency.trim().length !== 3) return value.toFixed(2)
   try {
-    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(value)
+    return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(value)
   } catch {
     return `${currency.toUpperCase()} ${value.toFixed(2)}`
   }
@@ -79,6 +80,7 @@ export function SalesDocumentPaymentsSection({
   onPaymentsChange,
 }: SalesDocumentPaymentsSectionProps) {
   const t = useT()
+  const locale = useLocale()
   const { organizationId, tenantId } = useOrganizationScopeDetail()
   const resolvedOrganizationId = orgFromProps ?? organizationId ?? null
   const resolvedTenantId = tenantFromProps ?? tenantId ?? null
@@ -275,6 +277,10 @@ export function SalesDocumentPaymentsSection({
         cell: ({ row }) => row.original.paymentMethodName ?? '—',
       },
       {
+        // Injected columns are placed against `ColumnDef.id` before the table is
+        // built, so an accessor-derived id is not yet available: the gateway
+        // status widget anchors on this explicit id.
+        id: 'status',
         accessorKey: 'status',
         header: t('sales.documents.payments.status', 'Status'),
         cell: ({ row }) => row.original.statusLabel ?? row.original.status ?? '—',
@@ -282,24 +288,24 @@ export function SalesDocumentPaymentsSection({
       {
         accessorKey: 'amount',
         header: t('sales.documents.payments.amount', 'Amount'),
-        cell: ({ row }) => formatMoney(row.original.amount, row.original.currencyCode ?? currencyCode),
+        cell: ({ row }) => formatMoney(row.original.amount, row.original.currencyCode ?? currencyCode, locale),
       },
       {
         accessorKey: 'receivedAt',
         header: t('sales.documents.payments.receivedAt', 'Received'),
         cell: ({ row }) =>
           row.original.receivedAt
-            ? new Date(row.original.receivedAt).toLocaleDateString()
+            ? new Date(row.original.receivedAt).toLocaleDateString(locale)
             : '—',
       },
       {
         accessorKey: 'createdAt',
         header: t('sales.documents.payments.createdAt', 'Created'),
         cell: ({ row }) =>
-          row.original.createdAt ? new Date(row.original.createdAt).toLocaleString() : '—',
+          row.original.createdAt ? new Date(row.original.createdAt).toLocaleString(locale) : '—',
         meta: {
           tooltipContent: (row: PaymentRow) =>
-            row.createdAt ? new Date(row.createdAt).toLocaleString() : undefined,
+            row.createdAt ? new Date(row.createdAt).toLocaleString(locale) : undefined,
         },
       },
       {
@@ -322,7 +328,7 @@ export function SalesDocumentPaymentsSection({
         },
       },
     ],
-    [currencyCode, deleteActionLabel, editActionLabel, handleDelete, openEditPayment, t]
+    [currencyCode, deleteActionLabel, editActionLabel, handleDelete, locale, openEditPayment, t]
   )
 
   if (loading) {
@@ -350,7 +356,12 @@ export function SalesDocumentPaymentsSection({
   return (
     <div className="space-y-4">
       {payments.length ? (
-        <DataTable<PaymentRow> columns={columns} data={payments} onRowClick={openEditPayment} />
+        <DataTable<PaymentRow>
+          columns={columns}
+          data={payments}
+          onRowClick={openEditPayment}
+          extensionTableId={extensionPoints.hosts.paymentsTable.tableId}
+        />
       ) : (
         <TabEmptyState
           title={t('sales.documents.payments.emptyTitle', 'No payments yet.')}