@asteby/metacore-runtime-react 49.7.0 → 49.8.0

package/src/__tests__/line-row-create-edit.test.tsx

@@ -0,0 +1,312 @@
+// @vitest-environment happy-dom
+//
+// Renglón del DocumentEditor «como las apps top»:
+//   - crear el producto desde la celda («Crear producto «texto»» / «+»): el
+//     producto nuevo entra en ESE renglón y lo llena igual que al elegirlo;
+//   - editar el producto del renglón (lápiz en la celda): el renglón toma los
+//     valores nuevos salvo lo que el usuario sobrescribió, con aviso «aplicar»;
+//   - la tarjeta de la contraparte con etiquetas y catálogos legibles;
+//   - placeholder corto y unidad con su etiqueta (nunca la clave cruda).
+import { useState } from 'react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+
+vi.mock('@tanstack/react-router', () => ({ useNavigate: () => () => {} }))
+vi.mock('react-i18next', () => {
+    const t = (k: string, o?: Record<string, any>) => {
+        let s: string = o?.defaultValue ?? k
+        for (const [key, v] of Object.entries(o ?? {})) s = s.replace(`{{${key}}}`, String(v))
+        return s
+    }
+    const value = { t, i18n: { language: 'es' } }
+    return { useTranslation: () => value }
+})
+
+import { DocumentLinesGrid } from '../business/line-items-editor'
+import { DocumentEditor } from '../business/document-editor'
+import { makeLine, serializeLineItems, type LineItem } from '../business/line-items'
+import { applyCatalogPending, applyProductToLine, lineOverrides, refreshLineFromProduct } from '../business/document-lines'
+import { fieldDisplayMeta, formatOptionValue, linesFromSource, partySummaryRows } from '../business/document-editor-model'
+import type { ProductResult } from '../business/product-search'
+import { ApiProvider, type ApiClient } from '../api-context'
+import type { DocumentFormType } from '../types'
+
+afterEach(cleanup)
+
+const tire: ProductResult = { id: 'p1', name: 'Llanta 205/55R16', sku: 'LL-205', price: 1500, tax_rate: 0.16, unit: 'unit' }
+
+function Grid(props: { initial?: LineItem[]; onCreateProduct?: any; onEditProduct?: any; unitLabel?: (u: string) => string | undefined }) {
+    const [lines, setLines] = useState(props.initial ?? [])
+    return (
+        <>
+            <DocumentLinesGrid
+                value={lines}
+                onChange={setLines}
+                search={vi.fn(async () => [])}
+                columns={['discount', 'tax']}
+                currency="MXN"
+                onCreateProduct={props.onCreateProduct}
+                onEditProduct={props.onEditProduct}
+                unitLabel={props.unitLabel}
+            />
+            <output data-testid="state">{JSON.stringify(lines)}</output>
+        </>
+    )
+}
+const state = () => JSON.parse(screen.getByTestId('state').textContent ?? '[]') as LineItem[]
+
+async function typeAndCreate(input: HTMLElement, text: string) {
+    input.focus()
+    fireEvent.change(input, { target: { value: text } })
+    const create = await waitFor(() => {
+        const el = document.querySelector('[data-slot="picker-create"]') as HTMLElement | null
+        if (!el) throw new Error('sin pie «Crear»')
+        return el
+    }, { timeout: 2000 })
+    expect(create.textContent).toContain('Crear producto')
+    expect(create.textContent).toContain(`«${text}»`)
+    fireEvent.click(create)
+}
+
+describe('renglón — crear producto desde la celda', () => {
+    it('el renglón vacío del final: «Crear producto «texto»» abre el alta prellenada y el producto nuevo llena el renglón', async () => {
+        let resolve!: (p: ProductResult) => void
+        const onCreate = vi.fn(() => new Promise<ProductResult>((r) => (resolve = r)))
+        render(<Grid onCreateProduct={onCreate} unitLabel={(u) => (u === 'unit' ? 'pza' : undefined)} />)
+        await typeAndCreate(screen.getByRole('combobox', { name: 'Buscar producto' }), 'Llanta nueva')
+        expect(onCreate).toHaveBeenCalledWith('Llanta nueva')
+        // Mientras el modal está abierto no se agrega nada.
+        expect(state()).toHaveLength(0)
+        await act(async () => resolve({ ...tire, id: 'p9', name: 'Llanta nueva', sku: 'LL-NEW', price: 2450 }))
+        await waitFor(() => expect(state()).toHaveLength(1))
+        expect(state()[0]).toMatchObject({ product_id: 'p9', description: 'Llanta nueva', sku: 'LL-NEW', unit_price: 2450, catalog_price: 2450, tax_rate: 0.16, unit: 'unit', quantity: 1 })
+        // La unidad con su etiqueta, nunca la clave cruda.
+        const row = document.querySelector(`[data-line-key="${state()[0].key}"]`)!
+        expect(row.textContent).toContain('LL-NEW · pza')
+        expect(row.textContent).not.toContain('· unit')
+        await waitFor(() => expect((document.activeElement as HTMLElement | null)?.getAttribute('data-cell')).toBe('quantity'))
+    })
+
+    it('un renglón libre (sin producto): el producto creado queda en ESE renglón, no en uno nuevo', async () => {
+        const free = makeLine({ description: '', quantity: 3 })
+        const onCreate = vi.fn(async () => ({ ...tire, id: 'p7', name: 'Rin 16' }))
+        render(<Grid initial={[free]} onCreateProduct={onCreate} />)
+        const cell = screen.getAllByRole('combobox', { name: 'Descripción' })[0]
+        await typeAndCreate(cell, 'Rin 16')
+        await waitFor(() => expect(state()[0].product_id).toBe('p7'))
+        expect(state()).toHaveLength(1)
+        expect(state()[0]).toMatchObject({ key: free.key, description: 'Rin 16', quantity: 3, unit_price: 1500 })
+    })
+
+    it('el «+» unido al buscador también abre el alta', async () => {
+        const onCreate = vi.fn(() => new Promise<ProductResult>(() => {}))
+        render(<Grid onCreateProduct={onCreate} />)
+        const draft = document.querySelector('[data-slot="line-draft-row"]') as HTMLElement
+        fireEvent.click(within(draft).getByRole('button', { name: 'Crear producto' }))
+        expect(onCreate).toHaveBeenCalledWith('')
+    })
+
+    it('sin `onCreateProduct` no hay pie ni «+» (otros usos del grid quedan igual)', () => {
+        render(<Grid />)
+        const draft = document.querySelector('[data-slot="line-draft-row"]') as HTMLElement
+        expect(within(draft).queryByRole('button', { name: 'Crear producto' })).toBeNull()
+    })
+})
+
+describe('renglón — editar el producto desde la celda', () => {
+    it('lápiz accesible por teclado; al guardar actualiza lo que sigue igual al catálogo y respeta el precio capturado con aviso «aplicar»', async () => {
+        const picked = applyProductToLine(makeLine({ quantity: 2 }), tire)
+        let resolve!: (p: ProductResult) => void
+        const onEdit = vi.fn(() => new Promise<ProductResult>((r) => (resolve = r)))
+        render(<Grid initial={[picked]} onEditProduct={onEdit} />)
+        // El usuario cambia el precio a mano (override).
+        const price = screen.getByRole('textbox', { name: 'Precio' })
+        fireEvent.change(price, { target: { value: '1400' } })
+        const pencil = screen.getByRole('button', { name: 'Editar producto' })
+        expect(pencil.tagName).toBe('BUTTON')
+        expect(pencil.getAttribute('tabindex')).not.toBe('-1')
+        fireEvent.click(pencil)
+        expect(onEdit).toHaveBeenCalledWith(expect.objectContaining({ product_id: 'p1' }))
+        await act(async () => resolve({ ...tire, name: 'Llanta 205/55R16 XL', sku: 'LL-205XL', price: 1650, tax_rate: 0.08, unit: 'set' }))
+        await waitFor(() => expect(state()[0].description).toBe('Llanta 205/55R16 XL'))
+        const l = state()[0]
+        expect(l).toMatchObject({ sku: 'LL-205XL', tax_rate: 0.08, unit: 'set', catalog_price: 1650, quantity: 2 })
+        // Override respetado.
+        expect(l.unit_price).toBe(1400)
+        const notice = document.querySelector('[data-slot="catalog-pending"]') as HTMLElement
+        expect(notice.textContent).toMatch(/Precio de catálogo cambió a .*1,650\.00/)
+        fireEvent.click(within(notice).getByRole('button', { name: 'aplicar' }))
+        await waitFor(() => expect(state()[0].unit_price).toBe(1650))
+        expect(document.querySelector('[data-slot="catalog-pending"]')).toBeNull()
+    })
+
+    it('sin overrides no hay aviso: todo el renglón toma el catálogo nuevo', async () => {
+        const picked = applyProductToLine(makeLine(), tire)
+        render(<Grid initial={[picked]} onEditProduct={vi.fn(async () => ({ ...tire, price: 1800 }))} />)
+        fireEvent.click(screen.getByRole('button', { name: 'Editar producto' }))
+        await waitFor(() => expect(state()[0].unit_price).toBe(1800))
+        expect(document.querySelector('[data-slot="catalog-pending"]')).toBeNull()
+    })
+
+    it('sin `onEditProduct` no hay lápiz', () => {
+        render(<Grid initial={[applyProductToLine(makeLine(), tire)]} />)
+        expect(screen.queryByRole('button', { name: 'Editar producto' })).toBeNull()
+    })
+})
+
+describe('refreshLineFromProduct (puro)', () => {
+    it('dirty por campo: solo pisa lo que sigue igual a la foto del catálogo', () => {
+        const line = { ...applyProductToLine(makeLine(), tire), description: 'Llanta con nombre del cliente' }
+        expect([...lineOverrides(line)]).toEqual(['description'])
+        const next = refreshLineFromProduct(line, { ...tire, name: 'Llanta nueva', price: 1600 })
+        expect(next.description).toBe('Llanta con nombre del cliente')
+        expect(next.unit_price).toBe(1600)
+        expect(next.catalog_pending).toEqual({ description: 'Llanta nueva' })
+        // La foto avanza: el override sigue siéndolo, lo demás queda limpio.
+        expect([...lineOverrides(next)]).toEqual(['description'])
+        expect(applyCatalogPending(next).description).toBe('Llanta nueva')
+    })
+
+    it('renglón de un documento origen: no cambia cantidad, tope ni vínculo, ni pisa los precios del origen', () => {
+        const [src] = linesFromSource([{ id: 'sol-1', product_id: 'p1', product_name: 'Llanta', quantity: 4, remaining_quantity: 2, unit_price: 1300, tax_rate: 0.16 }])
+        const next = refreshLineFromProduct(src, { ...tire, price: 1700 })
+        expect(next).toMatchObject({ quantity: 2, max_quantity: 2, source_line_id: 'sol-1', unit_price: 1300, description: 'Llanta', product_id: 'p1' })
+        expect(next.catalog_pending?.unit_price).toBe(1700)
+    })
+
+    it('la foto y el aviso no viajan al backend', () => {
+        const next = refreshLineFromProduct({ ...applyProductToLine(makeLine(), tire), unit_price: 1 }, { ...tire, price: 2 })
+        const [row] = serializeLineItems([next])
+        expect(row).not.toHaveProperty('catalog')
+        expect(row).not.toHaveProperty('catalog_pending')
+    })
+})
+
+describe('tarjeta de la contraparte', () => {
+    it('etiqueta del campo, valores de catálogo «código · texto» y sin vacíos ni claves crudas', () => {
+        const meta = fieldDisplayMeta([
+            [{ key: 'tax_id', label: 'customers.field.tax_id' }, { key: 'email', label: 'Correo' }],
+            [{ key: 'fiscal_data.uso_cfdi', label: 'Uso del CFDI', options: [{ value: 'G03', label: 'Gastos en general' }] }],
+        ], (s) => (s === 'customers.field.tax_id' ? 'RFC' : s))
+        const rows = partySummaryRows(
+            { tax_id: 'TBA850312KJ9', email: '  ', fiscal_data: { uso_cfdi: 'G03', regimen: '601' } },
+            ['tax_id', 'email'],
+            {},
+            6,
+            meta,
+        )
+        expect(rows).toEqual([
+            { key: 'tax_id', label: 'RFC', value: 'TBA850312KJ9' },
+            { key: 'fiscal_data.uso_cfdi', label: 'Uso del CFDI', value: 'G03 · Gastos en general' },
+            { key: 'fiscal_data.regimen', label: 'Regimen', value: '601' },
+        ])
+    })
+
+    it('formatOptionValue: la etiqueta que ya trae el código va tal cual; sin opción, el valor', () => {
+        expect(formatOptionValue('G03', [{ value: 'G03', label: 'G03 · Gastos en general' }])).toBe('G03 · Gastos en general')
+        expect(formatOptionValue('active', [{ value: 'active', label: 'Activo' }])).toBe('Activo')
+        expect(formatOptionValue('X', [])).toBe('X')
+    })
+})
+
+// ---- DocumentEditor: el puente con el host ----------------------------------
+
+const invoice: DocumentFormType = {
+    key: 'invoice',
+    label: 'Factura',
+    value: 'I',
+    layout: 'editor',
+    party: { field: 'customer_id', model: 'customers.Customer', summary: ['tax_id', 'email'] },
+    fields: [{ key: 'customer_id', label: 'Cliente', type: 'text', required: true }],
+    lines: { columns: ['tax'] },
+    submit_label: 'Guardar factura',
+}
+
+function makeApi(routes: Record<string, (url: string, cfg?: any) => unknown>) {
+    const get = vi.fn(async (url: string, cfg?: any) => {
+        for (const [prefix, fn] of Object.entries(routes)) if (url === prefix || url.startsWith(prefix + '?')) return { data: fn(url, cfg) }
+        if (url.startsWith('/metadata')) throw Object.assign(new Error('404'), { response: { status: 404 } })
+        return { data: { data: [] } }
+    })
+    return { get, post: vi.fn(), put: vi.fn(), delete: vi.fn() } as unknown as ApiClient & { get: typeof get }
+}
+
+describe('DocumentEditor — crear/editar el producto del renglón por el host', () => {
+    it('crear: dispara metacore:create-record prellenado y llena el renglón con el registro leído del catálogo', async () => {
+        const created = { id: 'p9', name: 'Válvula nueva', sku: 'VAL-N', unit_price: 120, unit_of_measure: 'unit', is_active: true }
+        const api = makeApi({
+            '/data/products.Product': () => ({ data: [created] }),
+            '/metadata/modal/products.Product': () => ({ data: { fields: [{ key: 'unit_of_measure', label: 'Unidad', options: [{ value: 'unit', label: 'pza' }] }] } }),
+        })
+        const events: any[] = []
+        const onEvt = (e: Event) => events.push((e as CustomEvent).detail)
+        window.addEventListener('metacore:create-record', onEvt)
+        render(
+            <ApiProvider client={api} batch={false}>
+                <DocumentEditor model="customers.Invoice" forms={{ types: [invoice] }} type={invoice} onCancel={() => {}} currency="MXN" defaultTaxRate={0.16} />
+            </ApiProvider>,
+        )
+        await typeAndCreate(screen.getByRole('combobox', { name: 'Buscar producto' }), 'Válvula nueva')
+        window.removeEventListener('metacore:create-record', onEvt)
+        expect(events).toHaveLength(1)
+        expect(events[0]).toMatchObject({ model: 'products.Product', defaults: { name: 'Válvula nueva' } })
+        await act(async () => events[0].onCreated({ id: 'p9' }))
+        const row = await waitFor(() => {
+            const r = document.querySelector('[data-slot="editor-lines"] tr[data-line-key]') as HTMLElement | null
+            if (!r) throw new Error('sin renglón')
+            return r
+        })
+        expect((within(row).getByRole('textbox', { name: 'Descripción' }) as HTMLInputElement).value).toBe('Válvula nueva')
+        expect((within(row).getByRole('textbox', { name: 'Precio' }) as HTMLInputElement).value).toBe('120')
+        await waitFor(() => expect(row.textContent).toContain('VAL-N · pza'))
+    })
+
+    it('editar: el lápiz dispara metacore:edit-record con el id del producto del renglón', async () => {
+        const rec = { id: 'p1', name: 'Llanta', sku: 'LL', unit_price: 1500, is_active: true }
+        const api = makeApi({ '/data/products.Product': () => ({ data: [rec] }) })
+        render(
+            <ApiProvider client={api} batch={false}>
+                <DocumentEditor model="customers.Invoice" forms={{ types: [invoice] }} type={invoice} onCancel={() => {}} currency="MXN" defaultTaxRate={0.16} />
+            </ApiProvider>,
+        )
+        const input = screen.getByRole('combobox', { name: 'Buscar producto' })
+        input.focus()
+        fireEvent.change(input, { target: { value: 'Llan' } })
+        await waitFor(() => expect(screen.getAllByRole('option').length).toBeGreaterThan(0), { timeout: 2000 })
+        fireEvent.keyDown(input, { key: 'Enter' })
+        const events: any[] = []
+        const onEvt = (e: Event) => events.push((e as CustomEvent).detail)
+        window.addEventListener('metacore:edit-record', onEvt)
+        fireEvent.click(await screen.findByRole('button', { name: 'Editar producto' }))
+        window.removeEventListener('metacore:edit-record', onEvt)
+        expect(events[0]).toMatchObject({ model: 'products.Product', recordId: 'p1' })
+        rec.unit_price = 1999
+        rec.name = 'Llanta XL'
+        await act(async () => events[0].onSaved(rec))
+        await waitFor(() => expect((screen.getByRole('textbox', { name: 'Precio' }) as HTMLInputElement).value).toBe('1999'))
+        expect((screen.getByRole('textbox', { name: 'Descripción' }) as HTMLInputElement).value).toBe('Llanta XL')
+    })
+
+    it('tarjeta: si la clave con módulo no resuelve, usa la corta; etiquetas y catálogos legibles', async () => {
+        const api = makeApi({
+            '/data/customers.Customer': () => ({ data: [{ id: 'c1', name: 'ACME', tax_id: 'AAA010101AAA', email: '', fiscal_data: { uso_cfdi: 'G03' } }] }),
+            '/metadata/modal/Customer': () => ({ data: { fields: [{ key: 'tax_id', label: 'RFC' }, { key: 'fiscal_data.uso_cfdi', label: 'Uso del CFDI', options: [{ value: 'G03', label: 'Gastos en general' }] }] } }),
+        })
+        render(
+            <ApiProvider client={api} batch={false}>
+                <DocumentEditor model="customers.Invoice" forms={{ types: [invoice] }} type={invoice} onCancel={() => {}} currency="MXN" />
+            </ApiProvider>,
+        )
+        fireEvent.change(document.getElementById('customer_id')!, { target: { value: 'c1' } })
+        const card = await waitFor(() => {
+            const c = document.querySelector('[data-slot="party-card"]') as HTMLElement | null
+            if (!c || !c.textContent?.includes('RFC') || !c.textContent.includes('Gastos')) throw new Error('tarjeta sin etiquetas')
+            return c
+        })
+        expect(card.textContent).toContain('G03 · Gastos en general')
+        expect(card.textContent).not.toContain('tax_id')
+        expect(card.textContent).not.toContain('uso_cfdi')
+        // El correo vacío no aparece.
+        expect(within(card).queryByText(/email|Correo/i)).toBeNull()
+    })
+})

package/src/business/document-editor-model.ts

@@ -178,12 +178,68 @@ export function partyDefaults(
     return out
 }
 
-/** Filas de la tarjeta de contraparte: resumen declarado + extensiones (máximo `limit`). */
+/** Etiqueta y opciones de catálogo de un campo (de la metadata del modelo o del propio tipo). */
+export interface FieldDisplayMeta {
+    label?: string
+    options?: ReadonlyArray<{ value: unknown; label?: unknown }>
+}
+
+/**
+ * Metadata de pantalla por clave a partir de listas de campos/columnas
+ * (`/metadata/modal` → fields, `/metadata/table` → columns, campos del tipo).
+ * La primera lista que trae etiqueta u opciones para una clave gana.
+ */
+export function fieldDisplayMeta(
+    lists: ReadonlyArray<ReadonlyArray<unknown> | null | undefined>,
+    translate: (s: string) => string = (s) => s,
+): Record<string, FieldDisplayMeta> {
+    const out: Record<string, FieldDisplayMeta> = {}
+    for (const list of lists) {
+        for (const raw of list ?? []) {
+            const f = raw as { key?: unknown; name?: unknown; label?: unknown; options?: unknown }
+            const key = typeof f?.key === 'string' ? f.key : typeof f?.name === 'string' ? f.name : undefined
+            if (!key) continue
+            const cur = (out[key] ??= {})
+            if (!cur.label && typeof f.label === 'string' && f.label) cur.label = translate(f.label)
+            if (!cur.options && Array.isArray(f.options) && f.options.length > 0) {
+                cur.options = f.options.map((o: any) => ({ value: o?.value, label: typeof o?.label === 'string' ? translate(o.label) : o?.label }))
+            }
+        }
+    }
+    return out
+}
+
+/** `tax_id` → «Tax id»: último recurso cuando ningún metadata etiqueta la columna. */
+export function humanizeKey(key: string): string {
+    const base = key.replace(EXTENSION_PREFIX, '').replace(/[_.]+/g, ' ').trim()
+    return base ? base.charAt(0).toUpperCase() + base.slice(1) : key
+}
+
+/**
+ * Valor de catálogo legible: `G03` con la opción «Gastos en general» →
+ * «G03 · Gastos en general» (si la etiqueta ya trae el código, tal cual).
+ */
+export function formatOptionValue(value: unknown, options?: FieldDisplayMeta['options']): string {
+    const raw = String(value)
+    const opt = options?.find((o) => String(o.value) === raw)
+    const label = opt && typeof opt.label === 'string' ? opt.label.trim() : ''
+    if (!label || label === raw) return raw
+    if (label.includes(raw)) return label
+    const codeLike = /^[A-Z0-9]{1,5}$/.test(raw) && /\d/.test(raw)
+    return codeLike ? `${raw} · ${label}` : label
+}
+
+/**
+ * Filas de la tarjeta de contraparte: resumen declarado + extensiones (máximo
+ * `limit`). Etiqueta del campo (metadata / labels declarados, ya traducidos),
+ * valores de catálogo con su texto y nunca claves crudas ni vacíos.
+ */
 export function partySummaryRows(
     party: Record<string, any> | null,
     summary: readonly string[] = [],
     labels: Record<string, string> = {},
     limit = 6,
+    meta: Record<string, FieldDisplayMeta> = {},
 ): Array<{ key: string; label: string; value: string }> {
     if (!party) return []
     const keys = new Set<string>(summary)
@@ -193,7 +249,9 @@ export function partySummaryRows(
     for (const key of keys) {
         const v = readPath(party, key)
         if (!hasValue(v) || typeof v === 'object') continue
-        rows.push({ key, label: labels[key] ?? key.replace(EXTENSION_PREFIX, ''), value: String(v) })
+        if (typeof v === 'string' && !v.trim()) continue
+        const m = meta[key]
+        rows.push({ key, label: labels[key] ?? m?.label ?? humanizeKey(key), value: formatOptionValue(v, m?.options) })
     }
     return rows.slice(0, limit)
 }

package/src/business/document-editor.tsx

@@ -29,13 +29,17 @@ import { FormErrorBanner } from './feedback'
 import { DocumentLinesGrid, type DocumentLinesGridProps, type LineItemsColumn } from './line-items-editor'
 import { computeTotals, serializeLineItems, taxBreakdown, type LineItem } from './line-items'
 import { roundMoney, toAmount, useFormatter } from './format'
-import { createCatalogProductSearch } from './catalog-product-search'
+import { catalogRecordToProduct, createCatalogProductSearch } from './catalog-product-search'
+import type { ProductResult } from './product-search'
+import { requestRecordCreate, requestRecordEdit, withSearchPrefill } from '../record-picker-actions'
 import {
     allocationAmountField,
     allocationIssueMessages,
     allocationPayload,
     creditStatus,
     editorLinesConfig,
+    fieldDisplayMeta,
+    type FieldDisplayMeta,
     linesFromSource,
     localIssues,
     sourceLoadSummary,
@@ -91,8 +95,13 @@ export interface DocumentEditorProps {
     onSaved?: (record?: unknown) => void
     onCancel: () => void
     searchProducts?: DocumentLinesGridProps['search']
-    /** Modelo de catálogo del buscador por defecto. Default `products.Product`. */
+    /**
+     * Modelo de catálogo: buscador por defecto y alta/edición del producto
+     * desde la celda del renglón. Default `products.Product`.
+     */
     productModel?: string
+    /** Columna del modelo de catálogo que recibe lo buscado al crear. Default `name`. */
+    productLabelField?: string
     defaultTaxRate?: number
     currency?: string
     /** Hoy (días de atraso del reparto; inyectable en tests). */
@@ -118,6 +127,7 @@ export function DocumentEditor({
     onCancel,
     searchProducts,
     productModel,
+    productLabelField = 'name',
     defaultTaxRate,
     currency,
     today,
@@ -145,7 +155,8 @@ export function DocumentEditor({
     const [linesFromSourceDoc, setLinesFromSourceDoc] = useState(false)
     const [extFields, setExtFields] = useState<ActionFieldDef[]>([])
     const [party, setParty] = useState<Record<string, any> | null>(null)
-    const [partyLabels, setPartyLabels] = useState<Record<string, string>>({})
+    const [partyFieldLists, setPartyFieldLists] = useState<unknown[][]>([])
+    const [catalogMeta, setCatalogMeta] = useState<Record<string, FieldDisplayMeta> | null>(null)
     // Etiquetas de los selectores que el editor llena por código (contraparte y
     // documento origen de «Cargar desde…»): sin ellas el selector cerrado pinta el UUID.
     const [seeds, setSeeds] = useState<Record<string, SeedLabel>>({})
@@ -254,25 +265,93 @@ export function DocumentEditor({
         }
     }, [api, type.party, partyId])
 
-    // Etiquetas de la tarjeta (RFC, régimen…): las del formulario del modelo de
-    // la contraparte, incluidas sus extensiones; sin ellas se ve la columna cruda.
+    // Etiquetas de la tarjeta (RFC, régimen…) y texto de sus catálogos: la
+    // metadata del modelo de la contraparte (formulario, con extensiones, y
+    // tabla); sin ellas se veía la columna cruda (`tax_id`).
     const partyModel = type.party?.model
     useEffect(() => {
         if (!partyModel) return
         let cancelled = false
-        api.get(`/metadata/modal/${partyModel}`)
-            .then((res: any) => {
-                const fields: any[] = res?.data?.data?.fields ?? res?.data?.fields ?? []
-                const out: Record<string, string> = {}
-                for (const f of fields) if (typeof f?.key === 'string' && typeof f?.label === 'string' && f.label) out[f.key] = f.label
-                if (!cancelled) setPartyLabels(out)
-            })
-            .catch(() => {})
+        void loadModelFieldLists(api, partyModel).then((lists) => {
+            if (!cancelled) setPartyFieldLists(lists)
+        })
         return () => {
             cancelled = true
         }
     }, [api, partyModel])
 
+    // Modelo de catálogo del renglón: alta/edición desde la celda y etiquetas
+    // de sus catálogos (unidad «unit» → «Pieza»).
+    const catalogModel = productModel ?? 'products.Product'
+    // Perezoso: solo cuando ya hay un renglón con producto (no compite con la
+    // carga inicial del editor).
+    const hasCatalogLine = lines.some((l) => l.kind === 'item' && !!l.product_id)
+    const wantsCatalogMeta = !!lineCfg && !isAllocation && hasCatalogLine
+    useEffect(() => {
+        if (!wantsCatalogMeta) return
+        let cancelled = false
+        void loadModelFieldLists(api, catalogModel).then((lists) => {
+            if (!cancelled) setCatalogMeta(fieldDisplayMeta(lists, tl))
+        })
+        return () => {
+            cancelled = true
+        }
+    }, [api, catalogModel, tl, wantsCatalogMeta])
+
+    /** Lee el producto guardado con la misma proyección del buscador (catalogRecordToProduct). */
+    const loadCatalogProduct = useCallback(
+        async (id: string, saved?: Record<string, any>): Promise<ProductResult | null> => {
+            try {
+                const res: any = await api.get(`/data/${catalogModel}`, { params: { f_id: `eq:${id}`, per_page: 1 } })
+                const rows = res?.data?.data
+                const row = Array.isArray(rows) ? rows[0] : null
+                if (row) return catalogRecordToProduct({ ...(saved ?? {}), ...row }, taxRate)
+            } catch {
+                // Sin lectura, lo que devolvió el guardado.
+            }
+            return saved && saved.id != null ? catalogRecordToProduct(saved, taxRate) : null
+        },
+        [api, catalogModel, taxRate],
+    )
+    const createProduct = useCallback(
+        (query: string) =>
+            new Promise<ProductResult | null>((resolve) => {
+                requestRecordCreate({
+                    model: catalogModel,
+                    defaults: withSearchPrefill(query, productLabelField),
+                    onCreated: (rec: any) => {
+                        if (rec?.id == null) return resolve(null)
+                        void loadCatalogProduct(String(rec.id), rec).then(resolve)
+                    },
+                })
+            }),
+        [catalogModel, productLabelField, loadCatalogProduct],
+    )
+    const editProduct = useCallback(
+        (line: LineItem) =>
+            new Promise<ProductResult | null>((resolve) => {
+                const id = line.catalog?.product_ref ?? line.product_id
+                if (!id) return resolve(null)
+                requestRecordEdit({
+                    model: catalogModel,
+                    recordId: id,
+                    onSaved: (rec: any) => void loadCatalogProduct(id, rec && typeof rec === 'object' ? { id, ...rec } : undefined).then(resolve),
+                })
+            }),
+        [catalogModel, loadCatalogProduct],
+    )
+    /** Unidad visible: la opción del catálogo; sin opciones declaradas, el valor tal cual. */
+    const unitLabel = useCallback(
+        (u: string) => {
+            if (!catalogMeta) return undefined
+            const opts = catalogMeta.unit_of_measure?.options ?? catalogMeta.unit?.options
+            if (!opts) return u
+            const o = opts.find((x) => String(x.value) === u)
+            return typeof o?.label === 'string' && o.label && o.label !== u ? o.label : undefined
+        },
+        [catalogMeta],
+    )
+
     // Cobro: documentos abiertos de la contraparte.
     const openCfg = lineCfg?.open_documents
     const allocPartyId = openCfg ? header[openCfg.party_field] ?? partyId : undefined
@@ -595,10 +674,10 @@ export function DocumentEditor({
             </FieldCell>
         ) : null
 
-    const summaryRows = partySummaryRows(party, type.party?.summary, {
-        ...Object.fromEntries(Object.entries(partyLabels).map(([k, v]) => [k, tl(v)])),
-        ...Object.fromEntries(allFields.map((f) => [f.key, tl(f.label)])),
-    })
+    // Etiquetas y catálogos: la metadata de la contraparte y, para las
+    // extensiones compartidas (`fiscal_data.uso_cfdi`), los campos del propio documento.
+    const summaryMeta = useMemo(() => fieldDisplayMeta([...partyFieldLists, allFields], tl), [partyFieldLists, allFields, tl])
+    const summaryRows = partySummaryRows(party, type.party?.summary, {}, 6, summaryMeta)
     const advancedSummary = groups.advanced
         .filter(visible)
         .map((f) => {
@@ -782,6 +861,9 @@ export function DocumentEditor({
                     search={search}
                     currency={currency}
                     showTotals={false}
+                    onCreateProduct={kind === 'credit' ? undefined : createProduct}
+                    onEditProduct={editProduct}
+                    unitLabel={unitLabel}
                 />
             )}
             {!fullscreen && totalsPanel}
@@ -954,3 +1036,36 @@ function SourcePicker({
         </div>
     )
 }
+
+/**
+ * Campos y columnas de un modelo para etiquetar sus valores: formulario
+ * (`/metadata/modal`, con extensiones) y tabla (`/metadata/table`). Si la
+ * clave con módulo (`customers.Customer`) no resuelve en el host, prueba la
+ * corta (`Customer`), como el puente de alta del host. Nunca lanza.
+ */
+async function loadModelFieldLists(api: { get: (url: string, cfg?: any) => Promise<any> }, model: string): Promise<unknown[][]> {
+    const short = model.includes('.') ? model.slice(model.lastIndexOf('.') + 1) : undefined
+    // `undefined` = la petición falló (el host no conoce esa clave); `[]` = respondió sin campos.
+    const read = async (url: string, key: 'fields' | 'columns'): Promise<unknown[] | undefined> => {
+        try {
+            const res = await api.get(url)
+            const list = res?.data?.data?.[key] ?? res?.data?.[key]
+            return Array.isArray(list) ? list : []
+        } catch {
+            return undefined
+        }
+    }
+    // En serie y solo lo necesario (una lectura en el caso normal): el
+    // formulario; la clave corta solo si la larga falló; la tabla solo si
+    // ningún formulario respondió con campos.
+    const candidates = short ? [model, short] : [model]
+    for (const kind of ['modal', 'table'] as const) {
+        for (const m of candidates) {
+            const list = await read(`/metadata/${kind}/${m}`, kind === 'modal' ? 'fields' : 'columns')
+            if (list === undefined) continue
+            if (list.length > 0) return [list]
+            break
+        }
+    }
+    return []
+}