@asteby/metacore-runtime-react 45.0.0 → 45.2.0

package/src/business/feedback.tsx

@@ -0,0 +1,141 @@
+// Retroalimentación que no estorba (benchmark §6.4/§6.5, PIT-005):
+//   - notify.success: toast breve «sustantivo + verbo», arriba y con duración corta.
+//   - <SystemNoticeBanner>: avisos del sistema («Hay novedades») en banner no
+//     bloqueante, nunca encima de las acciones primarias.
+//   - <FormErrorBanner>: error accionable persistente (qué pasó + cómo corregirlo).
+//   - <EmptyState>: estado vacío con explicación y una acción primaria.
+import type { ReactNode } from 'react'
+import { toast } from 'sonner'
+import { AlertCircle, Info, X, type LucideIcon } from 'lucide-react'
+import { Button } from '@asteby/metacore-ui'
+
+/**
+ * Props recomendadas para `<Toaster>` de metacore-ui: los toasts viven arriba a
+ * la derecha (el área de acciones primarias suele estar abajo) y dejan hueco
+ * bajo la cabecera. Se propagan tal cual: `<Toaster {...ACTION_SAFE_TOASTER_PROPS} />`.
+ */
+export const ACTION_SAFE_TOASTER_PROPS = {
+    position: 'top-right' as const,
+    offset: 72,
+    mobileOffset: 72,
+    visibleToasts: 3,
+}
+
+/** Duración de un toast de éxito (ms): confirma y se va. */
+export const SUCCESS_TOAST_MS = 3000
+
+export const notify = {
+    /** Confirmación breve de un éxito («Pago registrado»). Admite «Deshacer». */
+    success(message: string, opts?: { undo?: { label?: string; onUndo: () => void }; description?: string }) {
+        return toast.success(message, {
+            duration: SUCCESS_TOAST_MS,
+            description: opts?.description,
+            action: opts?.undo
+                ? { label: opts.undo.label ?? 'Deshacer', onClick: opts.undo.onUndo }
+                : undefined,
+        })
+    },
+    /**
+     * Error inesperado (red, 5xx) sin campo al que atribuirlo. Los errores de
+     * validación NO van aquí: usa `mapApiError` + `<FormErrorBanner>`/error del input.
+     */
+    error(message: string, description?: string) {
+        return toast.error(message, { description, duration: 8000 })
+    },
+}
+
+export interface SystemNoticeBannerProps {
+    message: ReactNode
+    /** Acción opcional («Actualizar»). */
+    action?: { label: string; onClick: () => void }
+    onDismiss?: () => void
+    dismissLabel?: string
+    className?: string
+}
+
+/** Aviso del sistema en flujo normal de la página (no flota sobre botones). */
+export function SystemNoticeBanner({ message, action, onDismiss, dismissLabel = 'Descartar', className }: SystemNoticeBannerProps) {
+    return (
+        <div
+            role="status"
+            data-slot="system-notice"
+            className={`flex items-center gap-3 rounded-md border bg-muted px-3 py-2 text-sm ${className ?? ''}`}
+        >
+            <Info className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+            <span className="flex-1">{message}</span>
+            {action && (
+                <Button type="button" size="sm" variant="outline" onClick={action.onClick}>
+                    {action.label}
+                </Button>
+            )}
+            {onDismiss && (
+                <Button type="button" size="icon" variant="ghost" onClick={onDismiss} aria-label={dismissLabel}>
+                    <X className="size-4" />
+                </Button>
+            )}
+        </div>
+    )
+}
+
+export interface FormErrorBannerProps {
+    /** Qué pasó y cómo corregirlo (típicamente `mapApiError(...).form`). */
+    message?: string
+    /** Botón a la solución («Ir al campo», «Reintentar»). */
+    action?: { label: string; onClick: () => void }
+    className?: string
+}
+
+/** Error persistente de formulario; no renderiza nada sin `message`. */
+export function FormErrorBanner({ message, action, className }: FormErrorBannerProps) {
+    if (!message) return null
+    return (
+        <div
+            role="alert"
+            data-slot="form-error"
+            className={`flex items-start gap-3 rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-sm text-destructive ${className ?? ''}`}
+        >
+            <AlertCircle className="mt-0.5 size-4 shrink-0" aria-hidden />
+            <span className="flex-1">{message}</span>
+            {action && (
+                <Button type="button" size="sm" variant="outline" onClick={action.onClick}>
+                    {action.label}
+                </Button>
+            )}
+        </div>
+    )
+}
+
+export interface EmptyStateProps {
+    icon?: LucideIcon
+    /** Qué falta («Aún no hay movimientos para este producto»). */
+    title: string
+    description?: string
+    /** Acción primaria («Registrar saldo inicial»). Se oculta si `hidden`. */
+    action?: { label: string; onClick?: () => void; href?: string; hidden?: boolean }
+    className?: string
+}
+
+/** Estado vacío accionable: explicación + una acción primaria. */
+export function EmptyState({ icon: Icon, title, description, action, className }: EmptyStateProps) {
+    const showAction = action && !action.hidden
+    return (
+        <div
+            data-slot="empty-state"
+            className={`flex flex-col items-center gap-2 px-4 py-10 text-center ${className ?? ''}`}
+        >
+            {Icon && <Icon className="size-8 text-muted-foreground" aria-hidden />}
+            <p className="text-sm font-medium">{title}</p>
+            {description && <p className="max-w-sm text-sm text-muted-foreground">{description}</p>}
+            {showAction &&
+                (action.href ? (
+                    <Button asChild size="sm" className="mt-2">
+                        <a href={action.href}>{action.label}</a>
+                    </Button>
+                ) : (
+                    <Button type="button" size="sm" className="mt-2" onClick={action.onClick}>
+                        {action.label}
+                    </Button>
+                ))}
+        </div>
+    )
+}

package/src/business/field-errors.ts

@@ -0,0 +1,92 @@
+// Mapeo de errores de API (409/422/…) a mensajes por campo (PIT-002/003/013/021/029).
+//
+// Un 422 trae `errors: {campo: [{code, params}]}`; un 409 (duplicado, enum,
+// conflicto de estado) suele traer solo `message`/`details`. Ambos se resuelven
+// aquí a `{ fields, form }`: los campos se pintan junto al input y `form` (lo que
+// no se pudo atribuir a un campo) va a un banner persistente — el toast solo
+// confirma éxitos.
+import {
+    extractFieldErrors,
+    extractServerError,
+    localizeFieldErrorMap,
+    type Translate,
+} from '../server-error'
+
+export interface MappedApiError {
+    /** HTTP status si el error lo trae (axios `response.status`). */
+    status?: number
+    /** Mensaje ya localizado por campo, listo para el `error` de cada input. */
+    fields: Record<string, string>
+    /** Mensaje general (qué pasó + cómo corregirlo) para un banner; sin jerga. */
+    form?: string
+    /** true si hay al menos un mensaje atribuible a un campo. */
+    hasFieldErrors: boolean
+}
+
+export interface MapApiErrorOptions {
+    t?: Translate
+    language?: string
+    /** Etiquetas traducidas por clave de campo (para «El campo {{label}}…»). */
+    labels?: Record<string, string>
+    /** Campos conocidos del formulario: un 409 se atribuye al que la causa nombra. */
+    knownFields?: string[]
+    fallback?: string
+}
+
+const CONFLICT_HINTS: Array<{ re: RegExp; es: string }> = [
+    { re: /duplicate|already exists|unique|23505|ya existe/i, es: 'Ya existe un registro con ese valor' },
+]
+
+/** Traductor sin i18next: devuelve el default con `{{var}}` interpolado. */
+const defaultTranslate: Translate = (key, o) =>
+    (o?.defaultValue ?? key).replace(/\{\{(\w+)\}\}/g, (_, k: string) => String(o?.[k] ?? ''))
+
+function statusOf(err: unknown): number | undefined {
+    const s = (err as { response?: { status?: unknown } } | undefined)?.response?.status
+    return typeof s === 'number' ? s : undefined
+}
+
+/** Encuentra el campo que un texto de causa nombra (`Key (sku)=(A1) already exists`). */
+function fieldNamedBy(text: string, known: string[] | undefined): string | undefined {
+    if (!known?.length) return undefined
+    const lower = text.toLowerCase()
+    return known.find((k) => new RegExp(`(^|[^a-z0-9_])${k.toLowerCase()}([^a-z0-9_]|$)`).test(lower))
+}
+
+/**
+ * Convierte cualquier error de mutación en mensajes por campo + mensaje general.
+ * Pura salvo por `t`; no muestra toasts.
+ */
+export function mapApiError(err: unknown, opts: MapApiErrorOptions = {}): MappedApiError {
+    const t: Translate = opts.t ?? defaultTranslate
+    const status = statusOf(err)
+    const raw = extractFieldErrors(err)
+    if (raw) {
+        const fields = localizeFieldErrorMap(raw, t, { labels: opts.labels, language: opts.language })
+        return { status, fields, hasFieldErrors: Object.keys(fields).length > 0 }
+    }
+
+    // Sin respuesta HTTP (red caída, CORS, excepción): el texto crudo es jerga.
+    const noResponse = !(err as { response?: unknown } | undefined)?.response && err instanceof Error
+    const fallback = opts.fallback ?? t('common.error', { defaultValue: 'No se pudo completar la operación' })
+    if (noResponse) return { status, fields: {}, form: fallback, hasFieldErrors: false }
+    const { title, description } = extractServerError(err, fallback)
+    const text = [title, description].filter(Boolean).join(' — ')
+
+    if (status === 409 || status === 422) {
+        const hint = CONFLICT_HINTS.find((h) => h.re.test(text))
+        const field = fieldNamedBy(text, opts.knownFields)
+        if (field) {
+            const label = opts.labels?.[field] ?? field
+            const msg = hint
+                ? t('validation.duplicate', { defaultValue: 'Ya existe un registro con ese {{label}}', label })
+                : t(title, { defaultValue: title })
+            return { status, fields: { [field]: msg }, hasFieldErrors: true }
+        }
+        const form = hint ? hint.es : t(title, { defaultValue: title })
+        return { status, fields: {}, form: description && !hint ? `${form}. ${description}` : form, hasFieldErrors: false }
+    }
+
+    const form = t(title, { defaultValue: title })
+    return { status, fields: {}, form: description ? `${form}. ${description}` : form, hasFieldErrors: false }
+}

package/src/business/format.ts

@@ -0,0 +1,151 @@
+// Formateador único de moneda, número y fecha (benchmark PIT-023 / PIT-025).
+//
+// Toda la UI de negocio (toasts, tickets, PDFs, pickers) formatea por aquí para
+// no mezclar locale y moneda (el «MX$1,06.00» del toast de cobro) ni desfasar
+// fechas por zona horaria. La moneda y la zona son config de la org — nunca se
+// hardcodean: salen de <CurrencyContext>/<TimeZoneContext> o de `opts`.
+import { useMemo } from 'react'
+import { useCurrency, useTimeZone } from '../org-runtime-context'
+
+/** Locale por defecto del producto. */
+export const DEFAULT_LOCALE = 'es-MX'
+/** Moneda cuando ni la org ni el llamador dan una (mismo fallback que las celdas). */
+export const FALLBACK_CURRENCY = 'USD'
+
+export interface FormatOptions {
+    /** BCP-47. Default `es-MX`. */
+    locale?: string
+    /** ISO-4217 de la org. Default: contexto → `USD`. */
+    currency?: string
+    /** IANA de la org. Default: contexto → zona del navegador. */
+    timeZone?: string
+}
+
+/** Redondea a centavos evitando el error binario (1.005 → 1.01). */
+export function roundMoney(n: number, decimals = 2): number {
+    if (!Number.isFinite(n)) return 0
+    const f = 10 ** decimals
+    return Math.round((n + Number.EPSILON) * f) / f
+}
+
+/** Número (string con símbolo/separadores, o number) → number; NaN → 0. */
+export function toAmount(v: unknown): number {
+    if (typeof v === 'number') return Number.isFinite(v) ? v : 0
+    if (typeof v !== 'string') return 0
+    const s = v.replace(/[^0-9.,-]/g, '')
+    if (!s) return 0
+    const lastComma = s.lastIndexOf(',')
+    const lastDot = s.lastIndexOf('.')
+    const normalized =
+        lastComma > lastDot ? s.replace(/\./g, '').replace(',', '.') : s.replace(/,/g, '')
+    const n = Number(normalized)
+    return Number.isFinite(n) ? n : 0
+}
+
+/**
+ * Monto con símbolo de la moneda de la org: `formatMoney(1060, {currency:'MXN'})`
+ * → `$1,060.00`. Un valor no numérico devuelve `''` (nunca «NaN»).
+ */
+export function formatMoney(amount: unknown, opts: FormatOptions = {}): string {
+    const n = typeof amount === 'number' ? amount : toAmount(amount)
+    if (!Number.isFinite(n)) return ''
+    const currency = opts.currency || FALLBACK_CURRENCY
+    try {
+        return new Intl.NumberFormat(opts.locale || DEFAULT_LOCALE, {
+            style: 'currency',
+            currency,
+            currencyDisplay: 'narrowSymbol',
+        }).format(n)
+    } catch {
+        return `${currency} ${n.toFixed(2)}`
+    }
+}
+
+/** Número plano localizado (`1,234.5`). */
+export function formatQuantity(n: unknown, opts: { locale?: string; maximumFractionDigits?: number } = {}): string {
+    const v = typeof n === 'number' ? n : toAmount(n)
+    if (!Number.isFinite(v)) return ''
+    return new Intl.NumberFormat(opts.locale || DEFAULT_LOCALE, {
+        maximumFractionDigits: opts.maximumFractionDigits ?? 3,
+    }).format(v)
+}
+
+const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/
+
+function toDate(input: unknown): { date: Date; dateOnly: boolean } | null {
+    if (input == null || input === '') return null
+    if (input instanceof Date) return Number.isNaN(input.getTime()) ? null : { date: input, dateOnly: false }
+    if (typeof input === 'string' || typeof input === 'number') {
+        const dateOnly = typeof input === 'string' && DATE_ONLY.test(input)
+        const d = new Date(input)
+        return Number.isNaN(d.getTime()) ? null : { date: d, dateOnly }
+    }
+    return null
+}
+
+/**
+ * Fecha (`29 sep 2026`). Un `YYYY-MM-DD` es fecha de calendario: se formatea en
+ * UTC para que no retroceda un día en zonas con offset negativo.
+ */
+export function formatDate(input: unknown, opts: FormatOptions & { style?: Intl.DateTimeFormatOptions['dateStyle'] } = {}): string {
+    const parsed = toDate(input)
+    if (!parsed) return ''
+    return new Intl.DateTimeFormat(opts.locale || DEFAULT_LOCALE, {
+        dateStyle: opts.style ?? 'medium',
+        timeZone: parsed.dateOnly ? 'UTC' : opts.timeZone || undefined,
+    }).format(parsed.date)
+}
+
+/** Fecha y hora en la zona de la org (`29 sep 2026, 14:05`). */
+export function formatDateTime(input: unknown, opts: FormatOptions = {}): string {
+    const parsed = toDate(input)
+    if (!parsed) return ''
+    if (parsed.dateOnly) return formatDate(input, opts)
+    return new Intl.DateTimeFormat(opts.locale || DEFAULT_LOCALE, {
+        dateStyle: 'medium',
+        timeStyle: 'short',
+        timeZone: opts.timeZone || undefined,
+    }).format(parsed.date)
+}
+
+export interface Formatter {
+    locale: string
+    currency: string
+    timeZone: string | undefined
+    money: (amount: unknown, currency?: string) => string
+    quantity: (n: unknown) => string
+    date: (input: unknown) => string
+    dateTime: (input: unknown) => string
+}
+
+/** Formateador ligado a un locale/moneda/zona fijos (para tickets y PDFs fuera de React). */
+export function createFormatter(opts: FormatOptions = {}): Formatter {
+    const locale = opts.locale || DEFAULT_LOCALE
+    const currency = opts.currency || FALLBACK_CURRENCY
+    const timeZone = opts.timeZone || undefined
+    return {
+        locale,
+        currency,
+        timeZone,
+        money: (amount, c) => formatMoney(amount, { locale, currency: c || currency }),
+        quantity: (n) => formatQuantity(n, { locale }),
+        date: (input) => formatDate(input, { locale, timeZone }),
+        dateTime: (input) => formatDateTime(input, { locale, timeZone }),
+    }
+}
+
+/** Formateador con la moneda y zona de la org tomadas del runtime provider. */
+export function useFormatter(overrides: FormatOptions = {}): Formatter {
+    const orgCurrency = useCurrency()
+    const orgZone = useTimeZone()
+    const { locale, currency, timeZone } = overrides
+    return useMemo(
+        () =>
+            createFormatter({
+                locale,
+                currency: currency ?? orgCurrency,
+                timeZone: timeZone ?? orgZone,
+            }),
+        [locale, currency, timeZone, orgCurrency, orgZone],
+    )
+}

package/src/business/index.ts

@@ -0,0 +1,13 @@
+export * from './format'
+export * from './field-errors'
+export * from './feedback'
+export * from './line-items'
+export * from './line-items-editor'
+export * from './payment'
+export * from './payment-capture'
+export * from './refund'
+export * from './refund-destination'
+export * from './product-search'
+export * from './product-picker'
+export * from './customer-picker'
+export * from './catalog'

package/src/business/line-items-editor.tsx

@@ -0,0 +1,259 @@
+// LineItemsEditor — editor de renglones compartido (benchmark §7, COT-1/PIT-018).
+// Controlado: `value`/`onChange` con `LineItem[]`. Guardar = `serializeLineItems`.
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Plus, Trash2, StickyNote, Heading } from 'lucide-react'
+import { Button, Input } from '@asteby/metacore-ui'
+import { useCan } from '../permissions-context'
+import { useFormatter } from './format'
+import {
+    computeLine,
+    computeTotals,
+    makeLine,
+    validateLineItems,
+    type LineItem,
+    type LineItemsPolicy,
+    type LineItemsValidation,
+} from './line-items'
+
+export type LineItemsColumn = 'discount' | 'tax' | 'technician' | 'lot' | 'dot'
+
+export interface LineItemsEditorProps {
+    value: LineItem[]
+    /** Se emite con cada cambio; las líneas siempre traen `key`. */
+    onChange: (lines: LineItem[]) => void
+    /** Columnas opcionales visibles. Default: `['discount']`. */
+    columns?: LineItemsColumn[]
+    policy?: LineItemsPolicy
+    /** Errores externos del servidor `"<índice>.<campo>"` (de `mapApiError().fields`). */
+    serverErrors?: Record<string, string>
+    /** Se emite tras cada cambio con el resultado de validar (para bloquear «Guardar»). */
+    onValidate?: (v: LineItemsValidation) => void
+    /** Slot: abre el ProductPicker; al elegir, el llamador hace `onChange([...value, makeLine(...)])`. */
+    onRequestProduct?: () => void
+    /** Permite secciones y notas (Odoo-style). Default true. */
+    allowSections?: boolean
+    readOnly?: boolean
+    /** Permiso requerido para editar (default: sin gate). Sin él → solo lectura. */
+    editPermission?: string
+    /** Moneda ISO (default: la de la org). */
+    currency?: string
+}
+
+const num = (s: string): number => (s.trim() === '' ? 0 : Number(s.replace(',', '.')) || 0)
+
+export function LineItemsEditor({
+    value,
+    onChange,
+    columns = ['discount'],
+    policy,
+    serverErrors,
+    onValidate,
+    onRequestProduct,
+    allowSections = true,
+    readOnly = false,
+    editPermission,
+    currency,
+}: LineItemsEditorProps) {
+    const { t } = useTranslation()
+    const can = useCan()
+    const fmt = useFormatter({ currency })
+    const locked = readOnly || (editPermission ? !can(editPermission) : false)
+    const validation = useMemo(() => validateLineItems(value, policy), [value, policy])
+    const totals = useMemo(() => computeTotals(value), [value])
+    const errors = { ...validation.errors, ...serverErrors }
+    const show = (c: LineItemsColumn) => columns.includes(c)
+
+    const emit = (next: LineItem[]) => {
+        onChange(next)
+        onValidate?.(validateLineItems(next, policy))
+    }
+    const patch = (idx: number, p: Partial<LineItem>) =>
+        emit(value.map((l, i) => (i === idx ? { ...l, ...p } : l)))
+    const remove = (idx: number) => emit(value.filter((_, i) => i !== idx))
+
+    const cell = (i: number, field: keyof LineItem) => errors[`${i}.${field}`]
+    const warn = (i: number, field: string) => validation.warnings[`${i}.${field}`]
+
+    return (
+        <div data-slot="line-items-editor" className="space-y-2">
+            <div className="overflow-x-auto rounded-md border">
+                <table className="w-full text-sm">
+                    <thead className="bg-muted/50 text-left text-xs text-muted-foreground">
+                        <tr>
+                            <th className="px-2 py-2">{t('lineItems.description', { defaultValue: 'Descripción' })}</th>
+                            <th className="w-24 px-2 py-2 text-right">{t('lineItems.quantity', { defaultValue: 'Cant.' })}</th>
+                            <th className="w-32 px-2 py-2 text-right">{t('lineItems.unitPrice', { defaultValue: 'Precio' })}</th>
+                            {show('discount') && <th className="w-20 px-2 py-2 text-right">{t('lineItems.discount', { defaultValue: 'Desc. %' })}</th>}
+                            {show('tax') && <th className="w-20 px-2 py-2 text-right">{t('lineItems.tax', { defaultValue: 'IVA %' })}</th>}
+                            {show('technician') && <th className="w-32 px-2 py-2">{t('lineItems.technician', { defaultValue: 'Técnico' })}</th>}
+                            {show('lot') && <th className="w-28 px-2 py-2">{t('lineItems.lot', { defaultValue: 'Lote' })}</th>}
+                            {show('dot') && <th className="w-24 px-2 py-2">DOT</th>}
+                            <th className="w-32 px-2 py-2 text-right">{t('lineItems.total', { defaultValue: 'Importe' })}</th>
+                            <th className="w-10" />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {value.map((l, i) => {
+                            if (l.kind !== 'item') {
+                                return (
+                                    <tr key={l.key} className="border-t bg-muted/30">
+                                        <td colSpan={99} className="px-2 py-1.5">
+                                            <div className="flex items-center gap-2">
+                                                <Input
+                                                    value={l.description}
+                                                    disabled={locked}
+                                                    aria-invalid={!!cell(i, 'description')}
+                                                    placeholder={l.kind === 'section' ? t('lineItems.sectionPlaceholder', { defaultValue: 'Sección' }) : t('lineItems.notePlaceholder', { defaultValue: 'Nota' })}
+                                                    className={l.kind === 'section' ? 'font-semibold' : 'italic'}
+                                                    onChange={(e) => patch(i, { description: e.target.value })}
+                                                />
+                                                {!locked && (
+                                                    <Button type="button" size="icon" variant="ghost" onClick={() => remove(i)} aria-label={t('common.delete', { defaultValue: 'Eliminar' })}>
+                                                        <Trash2 className="size-4" />
+                                                    </Button>
+                                                )}
+                                            </div>
+                                            {cell(i, 'description') && <p className="mt-1 text-xs text-destructive">{cell(i, 'description')}</p>}
+                                        </td>
+                                    </tr>
+                                )
+                            }
+                            const a = computeLine(l)
+                            return (
+                                <tr key={l.key} className="border-t align-top">
+                                    <td className="px-2 py-1.5">
+                                        <Input
+                                            value={l.description}
+                                            disabled={locked}
+                                            aria-invalid={!!cell(i, 'description')}
+                                            onChange={(e) => patch(i, { description: e.target.value })}
+                                        />
+                                        {l.sku && <p className="mt-0.5 text-xs text-muted-foreground">{l.sku}</p>}
+                                        {cell(i, 'description') && <p className="mt-0.5 text-xs text-destructive">{cell(i, 'description')}</p>}
+                                    </td>
+                                    <td className="px-2 py-1.5">
+                                        <Input
+                                            inputMode="decimal"
+                                            className="text-right"
+                                            value={String(l.quantity)}
+                                            disabled={locked}
+                                            aria-invalid={!!cell(i, 'quantity')}
+                                            onChange={(e) => patch(i, { quantity: num(e.target.value) })}
+                                        />
+                                        {cell(i, 'quantity') && <p className="mt-0.5 text-xs text-destructive">{cell(i, 'quantity')}</p>}
+                                        {!cell(i, 'quantity') && warn(i, 'quantity') && <p className="mt-0.5 text-xs text-muted-foreground">{warn(i, 'quantity')}</p>}
+                                    </td>
+                                    <td className="px-2 py-1.5">
+                                        <Input
+                                            inputMode="decimal"
+                                            className="text-right"
+                                            value={String(l.unit_price)}
+                                            disabled={locked}
+                                            aria-invalid={!!cell(i, 'unit_price')}
+                                            onChange={(e) => patch(i, { unit_price: num(e.target.value) })}
+                                        />
+                                        {cell(i, 'unit_price') && <p className="mt-0.5 text-xs text-destructive">{cell(i, 'unit_price')}</p>}
+                                    </td>
+                                    {show('discount') && (
+                                        <td className="px-2 py-1.5">
+                                            <Input
+                                                inputMode="decimal"
+                                                className="text-right"
+                                                value={String(l.discount)}
+                                                disabled={locked}
+                                                aria-invalid={!!cell(i, 'discount')}
+                                                onChange={(e) => patch(i, { discount: num(e.target.value) })}
+                                            />
+                                            {cell(i, 'discount') && <p className="mt-0.5 text-xs text-destructive">{cell(i, 'discount')}</p>}
+                                        </td>
+                                    )}
+                                    {show('tax') && (
+                                        <td className="px-2 py-1.5">
+                                            <Input
+                                                inputMode="decimal"
+                                                className="text-right"
+                                                value={String(Math.round(l.tax_rate * 10000) / 100)}
+                                                disabled={locked}
+                                                onChange={(e) => patch(i, { tax_rate: num(e.target.value) / 100 })}
+                                            />
+                                        </td>
+                                    )}
+                                    {show('technician') && (
+                                        <td className="px-2 py-1.5">
+                                            <Input value={l.technician_id ?? ''} disabled={locked} onChange={(e) => patch(i, { technician_id: e.target.value })} />
+                                        </td>
+                                    )}
+                                    {show('lot') && (
+                                        <td className="px-2 py-1.5">
+                                            <Input value={l.lot ?? ''} disabled={locked} onChange={(e) => patch(i, { lot: e.target.value })} />
+                                        </td>
+                                    )}
+                                    {show('dot') && (
+                                        <td className="px-2 py-1.5">
+                                            <Input value={l.dot ?? ''} disabled={locked} onChange={(e) => patch(i, { dot: e.target.value })} />
+                                        </td>
+                                    )}
+                                    <td className="px-2 py-2 text-right tabular-nums">{fmt.money(a.net)}</td>
+                                    <td className="px-1 py-1.5">
+                                        {!locked && (
+                                            <Button type="button" size="icon" variant="ghost" onClick={() => remove(i)} aria-label={t('common.delete', { defaultValue: 'Eliminar' })}>
+                                                <Trash2 className="size-4" />
+                                            </Button>
+                                        )}
+                                    </td>
+                                </tr>
+                            )
+                        })}
+                        {value.length === 0 && (
+                            <tr>
+                                <td colSpan={99} className="px-3 py-6 text-center text-muted-foreground">
+                                    {t('lineItems.empty', { defaultValue: 'Aún no hay renglones. Agrega un producto o un renglón libre.' })}
+                                </td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            </div>
+
+            {validation.form && value.length > 0 && <p role="alert" className="text-sm text-destructive">{validation.form}</p>}
+
+            <div className="flex flex-wrap items-start justify-between gap-3">
+                {!locked ? (
+                    <div className="flex flex-wrap gap-2">
+                        {onRequestProduct && (
+                            <Button type="button" size="sm" variant="outline" onClick={onRequestProduct}>
+                                <Plus className="mr-1 size-4" />
+                                {t('lineItems.addProduct', { defaultValue: 'Agregar producto' })}
+                            </Button>
+                        )}
+                        <Button type="button" size="sm" variant="outline" onClick={() => emit([...value, makeLine()])}>
+                            <Plus className="mr-1 size-4" />
+                            {t('lineItems.addLine', { defaultValue: 'Renglón libre' })}
+                        </Button>
+                        {allowSections && (
+                            <>
+                                <Button type="button" size="sm" variant="ghost" onClick={() => emit([...value, makeLine({ kind: 'section' })])}>
+                                    <Heading className="mr-1 size-4" />
+                                    {t('lineItems.addSection', { defaultValue: 'Sección' })}
+                                </Button>
+                                <Button type="button" size="sm" variant="ghost" onClick={() => emit([...value, makeLine({ kind: 'note' })])}>
+                                    <StickyNote className="mr-1 size-4" />
+                                    {t('lineItems.addNote', { defaultValue: 'Nota' })}
+                                </Button>
+                            </>
+                        )}
+                    </div>
+                ) : (
+                    <span />
+                )}
+                <dl className="min-w-56 space-y-0.5 text-sm tabular-nums">
+                    <div className="flex justify-between gap-6"><dt className="text-muted-foreground">{t('lineItems.subtotal', { defaultValue: 'Subtotal' })}</dt><dd>{fmt.money(totals.subtotal)}</dd></div>
+                    {totals.discount > 0 && <div className="flex justify-between gap-6"><dt className="text-muted-foreground">{t('lineItems.discountTotal', { defaultValue: 'Descuento' })}</dt><dd>-{fmt.money(totals.discount)}</dd></div>}
+                    {totals.tax > 0 && <div className="flex justify-between gap-6"><dt className="text-muted-foreground">{t('lineItems.taxTotal', { defaultValue: 'Impuestos' })}</dt><dd>{fmt.money(totals.tax)}</dd></div>}
+                    <div className="flex justify-between gap-6 font-semibold"><dt>{t('lineItems.total', { defaultValue: 'Total' })}</dt><dd>{fmt.money(totals.total)}</dd></div>
+                </dl>
+            </div>
+        </div>
+    )
+}