@asteby/metacore-runtime-react 45.0.0 → 45.3.0

package/src/business/line-items.ts

@@ -0,0 +1,190 @@
+// Renglones de documento (cotización, pedido, factura, OC, recepción, OT, RMA, NC).
+// Lógica pura del <LineItemsEditor>: cálculo, validación y serialización. El
+// guardado de renglones fallaba (PIT-018) por mandar al API cadenas vacías y
+// claves de UI; `serializeLineItems` es la única puerta de salida hacia el backend.
+import { roundMoney, toAmount } from './format'
+
+export type LineItemKind = 'item' | 'section' | 'note'
+
+export interface LineItem {
+    /** Clave estable de UI (no se envía al backend). */
+    key: string
+    kind: LineItemKind
+    /** Id del producto/variante en el catálogo (kind=item). */
+    product_id?: string
+    sku?: string
+    description: string
+    quantity: number
+    unit_price: number
+    /** Descuento en porcentaje 0-100. */
+    discount: number
+    /** Tasa de impuesto como fracción (0.16). Viene de la config fiscal de la org. */
+    tax_rate: number
+    technician_id?: string
+    lot?: string
+    dot?: string
+    /** Existencia disponible conocida (para la política de sobreventa). */
+    available?: number
+}
+
+/** Qué hacer si `quantity > available`. */
+export type StockPolicy = 'allow' | 'warn' | 'block'
+
+export interface LineItemsPolicy {
+    /** Default `warn`. */
+    stockPolicy?: StockPolicy
+    /** Permite cantidades/precios negativos (notas de crédito). Default false. */
+    allowNegative?: boolean
+    /** Exige al menos un renglón `item`. Default true. */
+    requireItems?: boolean
+}
+
+let seq = 0
+/** Clave de UI única en el proceso. */
+export function newLineKey(): string {
+    seq += 1
+    return `li_${Date.now().toString(36)}_${seq}`
+}
+
+export function makeLine(partial: Partial<LineItem> = {}): LineItem {
+    return {
+        key: partial.key ?? newLineKey(),
+        kind: 'item',
+        description: '',
+        quantity: 1,
+        unit_price: 0,
+        discount: 0,
+        tax_rate: 0,
+        ...partial,
+    }
+}
+
+export interface LineAmounts {
+    gross: number
+    discount: number
+    net: number
+    tax: number
+    total: number
+}
+
+export function computeLine(l: Pick<LineItem, 'kind' | 'quantity' | 'unit_price' | 'discount' | 'tax_rate'>): LineAmounts {
+    if (l.kind !== 'item') return { gross: 0, discount: 0, net: 0, tax: 0, total: 0 }
+    const gross = roundMoney(toAmount(l.quantity) * toAmount(l.unit_price))
+    const discount = roundMoney(gross * (toAmount(l.discount) / 100))
+    const net = roundMoney(gross - discount)
+    const tax = roundMoney(net * toAmount(l.tax_rate))
+    return { gross, discount, net, tax, total: roundMoney(net + tax) }
+}
+
+export interface LineItemsTotals {
+    subtotal: number
+    discount: number
+    tax: number
+    total: number
+    /** Suma de cantidades de los renglones `item`. */
+    units: number
+}
+
+export function computeTotals(lines: LineItem[]): LineItemsTotals {
+    const t: LineItemsTotals = { subtotal: 0, discount: 0, tax: 0, total: 0, units: 0 }
+    for (const l of lines) {
+        if (l.kind !== 'item') continue
+        const a = computeLine(l)
+        t.subtotal += a.gross
+        t.discount += a.discount
+        t.tax += a.tax
+        t.units += toAmount(l.quantity)
+    }
+    t.subtotal = roundMoney(t.subtotal)
+    t.discount = roundMoney(t.discount)
+    t.tax = roundMoney(t.tax)
+    t.total = roundMoney(t.subtotal - t.discount + t.tax)
+    return t
+}
+
+export interface LineItemsValidation {
+    /** Errores por celda `"<índice>.<campo>"` (mismo formato que DynamicLineItems). */
+    errors: Record<string, string>
+    /** Avisos no bloqueantes (sobreventa con política `warn`). */
+    warnings: Record<string, string>
+    /** Error de documento (sin renglones). */
+    form?: string
+    valid: boolean
+}
+
+export function validateLineItems(lines: LineItem[], policy: LineItemsPolicy = {}): LineItemsValidation {
+    const { stockPolicy = 'warn', allowNegative = false, requireItems = true } = policy
+    const errors: Record<string, string> = {}
+    const warnings: Record<string, string> = {}
+    let items = 0
+    lines.forEach((l, i) => {
+        if (l.kind === 'section' || l.kind === 'note') {
+            if (!l.description.trim()) errors[`${i}.description`] = 'Escribe el texto'
+            return
+        }
+        items += 1
+        const qty = toAmount(l.quantity)
+        const price = toAmount(l.unit_price)
+        const disc = toAmount(l.discount)
+        if (!l.description.trim() && !l.product_id) errors[`${i}.description`] = 'Elige un producto o escribe una descripción'
+        if (qty === 0) errors[`${i}.quantity`] = 'La cantidad debe ser distinta de cero'
+        else if (qty < 0 && !allowNegative) errors[`${i}.quantity`] = 'La cantidad no puede ser negativa'
+        if (price < 0 && !allowNegative) errors[`${i}.unit_price`] = 'El precio no puede ser negativo'
+        if (disc < 0 || disc > 100) errors[`${i}.discount`] = 'El descuento debe estar entre 0 y 100%'
+        if (l.available != null && qty > l.available && stockPolicy !== 'allow') {
+            const msg = `Solo hay ${l.available} disponibles`
+            if (stockPolicy === 'block') errors[`${i}.quantity`] ??= msg
+            else warnings[`${i}.quantity`] = msg
+        }
+    })
+    const form = requireItems && items === 0 ? 'Agrega al menos un renglón' : undefined
+    return { errors, warnings, form, valid: !form && Object.keys(errors).length === 0 }
+}
+
+/**
+ * Forma que se manda al backend: números reales (nunca `""`), sin claves de UI,
+ * opcionales vacíos omitidos y `position` 1-based conservando el orden.
+ */
+export function serializeLineItems(lines: LineItem[]): Array<Record<string, unknown>> {
+    return lines.map((l, i) => {
+        const out: Record<string, unknown> = {
+            position: i + 1,
+            kind: l.kind,
+            description: l.description.trim(),
+        }
+        if (l.kind === 'item') {
+            out.quantity = toAmount(l.quantity)
+            out.unit_price = toAmount(l.unit_price)
+            out.discount = toAmount(l.discount)
+            out.tax_rate = toAmount(l.tax_rate)
+            for (const k of ['product_id', 'sku', 'technician_id', 'lot', 'dot'] as const) {
+                const v = l[k]
+                if (typeof v === 'string' && v.trim()) out[k] = v.trim()
+            }
+        }
+        return out
+    })
+}
+
+/** Inversa de `serializeLineItems`: filas del API → líneas editables (defaults seguros). */
+export function parseLineItems(rows: unknown): LineItem[] {
+    if (!Array.isArray(rows)) return []
+    return rows.map((r) => {
+        const o = (r ?? {}) as Record<string, unknown>
+        const kind: LineItemKind = o.kind === 'section' || o.kind === 'note' ? o.kind : 'item'
+        const str = (v: unknown) => (typeof v === 'string' && v ? v : undefined)
+        return makeLine({
+            kind,
+            product_id: str(o.product_id),
+            sku: str(o.sku),
+            description: typeof o.description === 'string' ? o.description : '',
+            quantity: o.quantity == null ? 1 : toAmount(o.quantity),
+            unit_price: toAmount(o.unit_price),
+            discount: toAmount(o.discount),
+            tax_rate: toAmount(o.tax_rate),
+            technician_id: str(o.technician_id),
+            lot: str(o.lot),
+            dot: str(o.dot),
+        })
+    })
+}

package/src/business/payment-capture.tsx

@@ -0,0 +1,158 @@
+// PaymentCapture — cobro mixto con cambio, referencia y cuenta (benchmark §7).
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Trash2 } from 'lucide-react'
+import { Button, Input } from '@asteby/metacore-ui'
+import { useCan } from '../permissions-context'
+import { useFormatter } from './format'
+import {
+    newTender,
+    serializePayment,
+    summarizePayment,
+    validatePayment,
+    type PaymentMethodOption,
+    type PaymentPolicy,
+    type PaymentTender,
+} from './payment'
+
+export interface PaymentCaptureProps {
+    /** Total a cobrar. */
+    total: number
+    methods: PaymentMethodOption[]
+    value: PaymentTender[]
+    onChange: (tenders: PaymentTender[]) => void
+    /** Confirmar cobro: recibe el payload ya serializado. Solo se llama si es válido. */
+    onSubmit?: (payload: ReturnType<typeof serializePayment>) => void
+    policy?: PaymentPolicy
+    /** Errores del servidor `"<índice>.<campo>"`. */
+    serverErrors?: Record<string, string>
+    submitLabel?: string
+    submitting?: boolean
+    /** Capability requerida para cobrar (p. ej. `pos_orders.pagar`). Sin ella, botón oculto. */
+    submitPermission?: string
+    currency?: string
+    disabled?: boolean
+}
+
+export function PaymentCapture({
+    total,
+    methods,
+    value,
+    onChange,
+    onSubmit,
+    policy,
+    serverErrors,
+    submitLabel,
+    submitting,
+    submitPermission,
+    currency,
+    disabled,
+}: PaymentCaptureProps) {
+    const { t } = useTranslation()
+    const can = useCan()
+    const fmt = useFormatter({ currency })
+    const summary = useMemo(() => summarizePayment(total, value, methods), [total, value, methods])
+    const validation = useMemo(() => validatePayment(total, value, methods, policy), [total, value, methods, policy])
+    const errors = { ...validation.errors, ...serverErrors }
+    const byId = new Map(methods.map((m) => [m.id, m]))
+    const mayPay = submitPermission ? can(submitPermission) : true
+
+    const patch = (idx: number, p: Partial<PaymentTender>) =>
+        onChange(value.map((x, i) => (i === idx ? { ...x, ...p } : x)))
+
+    return (
+        <div data-slot="payment-capture" className="space-y-3">
+            <div className="flex flex-wrap gap-2">
+                {methods.map((m) => (
+                    <Button
+                        key={m.id}
+                        type="button"
+                        size="sm"
+                        variant="outline"
+                        disabled={disabled}
+                        onClick={() => onChange([...value, newTender(m.id, summary.remaining)])}
+                    >
+                        {m.label}
+                    </Button>
+                ))}
+            </div>
+
+            {value.map((tender, i) => {
+                const m = byId.get(tender.method)
+                return (
+                    <div key={tender.key} className="grid grid-cols-[1fr_8rem_auto] items-start gap-2 rounded-md border p-2">
+                        <div className="space-y-1">
+                            <p className="text-sm font-medium">{m?.label ?? tender.method}</p>
+                            {m?.requiresReference && (
+                                <Input
+                                    placeholder={t('payment.reference', { defaultValue: 'Referencia' })}
+                                    value={tender.reference ?? ''}
+                                    disabled={disabled}
+                                    aria-invalid={!!errors[`${i}.reference`]}
+                                    onChange={(e) => patch(i, { reference: e.target.value })}
+                                />
+                            )}
+                            {m?.requiresAccount && (
+                                <select
+                                    className="h-9 w-full rounded-md border bg-background px-2 text-sm"
+                                    value={tender.account_id ?? ''}
+                                    disabled={disabled}
+                                    onChange={(e) => patch(i, { account_id: e.target.value || undefined })}
+                                >
+                                    <option value="">{t('payment.account', { defaultValue: 'Cuenta…' })}</option>
+                                    {(m.accounts ?? []).map((a) => (
+                                        <option key={a.id} value={a.id}>{a.label}</option>
+                                    ))}
+                                </select>
+                            )}
+                            {(['reference', 'account_id', 'method'] as const).map(
+                                (f) => errors[`${i}.${f}`] && <p key={f} className="text-xs text-destructive">{errors[`${i}.${f}`]}</p>,
+                            )}
+                        </div>
+                        <div>
+                            <Input
+                                inputMode="decimal"
+                                className="text-right"
+                                value={String(tender.amount)}
+                                disabled={disabled}
+                                aria-invalid={!!errors[`${i}.amount`]}
+                                onChange={(e) => patch(i, { amount: Number(e.target.value.replace(',', '.')) || 0 })}
+                            />
+                            {errors[`${i}.amount`] && <p className="mt-0.5 text-xs text-destructive">{errors[`${i}.amount`]}</p>}
+                        </div>
+                        <Button
+                            type="button"
+                            size="icon"
+                            variant="ghost"
+                            disabled={disabled}
+                            aria-label={t('common.delete', { defaultValue: 'Eliminar' })}
+                            onClick={() => onChange(value.filter((_, j) => j !== i))}
+                        >
+                            <Trash2 className="size-4" />
+                        </Button>
+                    </div>
+                )
+            })}
+
+            <dl className="space-y-0.5 text-sm tabular-nums">
+                <div className="flex justify-between"><dt className="text-muted-foreground">{t('payment.total', { defaultValue: 'Total' })}</dt><dd>{fmt.money(summary.total)}</dd></div>
+                <div className="flex justify-between"><dt className="text-muted-foreground">{t('payment.paid', { defaultValue: 'Pagado' })}</dt><dd>{fmt.money(summary.paid)}</dd></div>
+                {summary.remaining > 0 && <div className="flex justify-between font-medium"><dt>{t('payment.remaining', { defaultValue: 'Pendiente' })}</dt><dd>{fmt.money(summary.remaining)}</dd></div>}
+                {summary.change > 0 && <div className="flex justify-between font-semibold"><dt>{t('payment.change', { defaultValue: 'Cambio' })}</dt><dd>{fmt.money(summary.change)}</dd></div>}
+            </dl>
+
+            {validation.form && value.length > 0 && <p role="alert" className="text-sm text-destructive">{validation.form}</p>}
+
+            {onSubmit && mayPay && (
+                <Button
+                    type="button"
+                    className="w-full"
+                    disabled={disabled || submitting || !validation.valid}
+                    onClick={() => onSubmit(serializePayment(value, methods, total))}
+                >
+                    {submitLabel ?? t('payment.submit', { defaultValue: 'Cobrar' })}
+                </Button>
+            )}
+        </div>
+    )
+}

package/src/business/payment.ts

@@ -0,0 +1,125 @@
+// Cobro mixto (POS/Caja, Apartado, Cobranza, Factura «Registrar pago», OT).
+// Lógica pura de <PaymentCapture>: resumen (pagado/pendiente/cambio) y validación.
+import { roundMoney, toAmount } from './format'
+
+/** Método de pago configurable por org (el catálogo NO se hardcodea en el SDK). */
+export interface PaymentMethodOption {
+    id: string
+    label: string
+    /** Efectivo: admite recibir de más y devolver cambio. */
+    cash?: boolean
+    requiresReference?: boolean
+    requiresAccount?: boolean
+    /** Tope por método (saldo de cuenta de cliente, monedero). */
+    maxAmount?: number
+    /** Cuentas/cajas destino elegibles (requiresAccount). */
+    accounts?: Array<{ id: string; label: string }>
+}
+
+export interface PaymentTender {
+    key: string
+    method: string
+    amount: number
+    reference?: string
+    account_id?: string
+}
+
+export interface PaymentSummary {
+    total: number
+    paid: number
+    /** Lo que falta por cobrar (>= 0). */
+    remaining: number
+    /** Cambio a entregar: exceso cubierto por efectivo (>= 0). */
+    change: number
+    /** Exceso en métodos no-efectivo (no se puede devolver): error. */
+    overpaid: number
+    settled: boolean
+}
+
+let seq = 0
+export function newTender(method: string, amount = 0): PaymentTender {
+    seq += 1
+    return { key: `pt_${Date.now().toString(36)}_${seq}`, method, amount }
+}
+
+export function summarizePayment(
+    total: number,
+    tenders: PaymentTender[],
+    methods: PaymentMethodOption[],
+): PaymentSummary {
+    const byId = new Map(methods.map((m) => [m.id, m]))
+    let paid = 0
+    let cash = 0
+    for (const t of tenders) {
+        const a = Math.max(0, toAmount(t.amount))
+        paid += a
+        if (byId.get(t.method)?.cash) cash += a
+    }
+    paid = roundMoney(paid)
+    const tot = roundMoney(total)
+    const excess = roundMoney(Math.max(0, paid - tot))
+    const change = roundMoney(Math.min(excess, cash))
+    return {
+        total: tot,
+        paid,
+        remaining: roundMoney(Math.max(0, tot - paid)),
+        change,
+        overpaid: roundMoney(excess - change),
+        settled: paid >= tot,
+    }
+}
+
+export interface PaymentValidation {
+    /** Errores por renglón de pago `"<índice>.<campo>"`. */
+    errors: Record<string, string>
+    /** Error general. */
+    form?: string
+    valid: boolean
+}
+
+export interface PaymentPolicy {
+    /** Permite cobro parcial (anticipo/abono). Default false. */
+    allowPartial?: boolean
+}
+
+export function validatePayment(
+    total: number,
+    tenders: PaymentTender[],
+    methods: PaymentMethodOption[],
+    policy: PaymentPolicy = {},
+): PaymentValidation {
+    const byId = new Map(methods.map((m) => [m.id, m]))
+    const errors: Record<string, string> = {}
+    tenders.forEach((t, i) => {
+        const m = byId.get(t.method)
+        const a = toAmount(t.amount)
+        if (!m) errors[`${i}.method`] = 'Método de pago no disponible'
+        if (a <= 0) errors[`${i}.amount`] = 'Captura un monto mayor a cero'
+        if (m?.maxAmount != null && a > m.maxAmount) errors[`${i}.amount`] = `El máximo para ${m.label} es ${m.maxAmount}`
+        if (m?.requiresReference && !t.reference?.trim()) errors[`${i}.reference`] = 'La referencia es obligatoria'
+        if (m?.requiresAccount && !t.account_id) errors[`${i}.account_id`] = 'Elige la cuenta'
+    })
+    const s = summarizePayment(total, tenders, methods)
+    let form: string | undefined
+    if (tenders.length === 0) form = 'Agrega al menos un pago'
+    else if (s.overpaid > 0) form = 'Solo el efectivo puede exceder el total (se devuelve como cambio)'
+    else if (!policy.allowPartial && !s.settled) form = 'El pago no cubre el total'
+    return { errors, form, valid: !form && Object.keys(errors).length === 0 }
+}
+
+/** Payload hacia el backend: montos reales; el cambio no es un pago. */
+export function serializePayment(tenders: PaymentTender[], methods: PaymentMethodOption[], total: number) {
+    const s = summarizePayment(total, tenders, methods)
+    return {
+        payments: tenders.map((t) => ({
+            method: t.method,
+            // Monto entregado por el cliente; el cambio va aparte en `change`.
+            amount: roundMoney(toAmount(t.amount)),
+            ...(t.reference?.trim() ? { reference: t.reference.trim() } : {}),
+            ...(t.account_id ? { account_id: t.account_id } : {}),
+        })),
+        paid: s.paid,
+        change: s.change,
+        remaining: s.remaining,
+    }
+}

package/src/business/product-picker.tsx

@@ -0,0 +1,171 @@
+// ProductPicker — una sola búsqueda para productos, llantas y variantes
+// (medida «205/55R16», SKU, código de barras, clave de proveedor). Benchmark §7.
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Search } from 'lucide-react'
+import { Badge, Input } from '@asteby/metacore-ui'
+import { useFormatter } from './format'
+import { useAsyncSearch } from './use-async-search'
+import {
+    availableStock,
+    parseProductQuery,
+    type ProductQuery,
+    type ProductResult,
+    type ProductVariant,
+} from './product-search'
+import { EmptyState } from './feedback'
+
+export interface ProductPickerProps {
+    /**
+     * Búsqueda: recibe la consulta ya clasificada (`barcode` | `tire_size` |
+     * `text`) para que el backend elija el índice. Debe ser estable (useCallback).
+     */
+    search: (query: Exclude<ProductQuery, { kind: 'empty' }>, signal: AbortSignal) => Promise<ProductResult[]>
+    /** Se emite al elegir un producto o una variante concreta. */
+    onSelect: (product: ProductResult, variant?: ProductVariant) => void
+    /** Almacén para mostrar/validar existencias; sin él, se suma el total. */
+    warehouseId?: string
+    /** Un código de barras con un único resultado se selecciona solo al pulsar Enter. Default true. */
+    autoSelectBarcode?: boolean
+    /** Permite elegir productos sin existencia (se marcan). Default true. */
+    allowOutOfStock?: boolean
+    placeholder?: string
+    autoFocus?: boolean
+    currency?: string
+    disabled?: boolean
+}
+
+export function ProductPicker({
+    search,
+    onSelect,
+    warehouseId,
+    autoSelectBarcode = true,
+    allowOutOfStock = true,
+    placeholder,
+    autoFocus,
+    currency,
+    disabled,
+}: ProductPickerProps) {
+    const { t } = useTranslation()
+    const fmt = useFormatter({ currency })
+    const [text, setText] = useState('')
+    const parsed = parseProductQuery(text)
+    // Un código de barras es exacto: no se espera a 2 caracteres ni se debouncea mucho.
+    const run = useCallback(
+        (q: string, signal: AbortSignal) => {
+            const p = parseProductQuery(q)
+            return p.kind === 'empty' ? Promise.resolve([]) : search(p, signal)
+        },
+        [search],
+    )
+    const { results, loading, error } = useAsyncSearch(text, run, {
+        minChars: parsed.kind === 'barcode' ? 8 : 2,
+        delay: parsed.kind === 'barcode' ? 0 : 250,
+    })
+
+    const pick = (p: ProductResult, v?: ProductVariant) => {
+        const stock = availableStock(v ?? p, warehouseId)
+        if (!allowOutOfStock && stock != null && stock <= 0) return
+        onSelect(p, v)
+        setText('')
+    }
+
+    return (
+        <div data-slot="product-picker" className="space-y-2">
+            <div className="relative">
+                <Search className="pointer-events-none absolute left-2.5 top-2.5 size-4 text-muted-foreground" aria-hidden />
+                <Input
+                    autoFocus={autoFocus}
+                    disabled={disabled}
+                    className="pl-8"
+                    value={text}
+                    placeholder={placeholder ?? t('productPicker.placeholder', { defaultValue: 'Producto, medida (205/55R16), SKU o código de barras' })}
+                    onChange={(e) => setText(e.target.value)}
+                    onKeyDown={(e) => {
+                        if (e.key === 'Enter' && autoSelectBarcode && parsed.kind === 'barcode' && results.length === 1) {
+                            e.preventDefault()
+                            const only = results[0]!
+                            const exact = only.variants?.find((v) => v.barcode === parsed.barcode)
+                            pick(only, exact)
+                        }
+                    }}
+                />
+            </div>
+
+            {parsed.kind === 'tire_size' && (
+                <p className="text-xs text-muted-foreground">
+                    {t('productPicker.tireSize', { defaultValue: 'Medida de llanta' })}: {parsed.tire.normalized}
+                </p>
+            )}
+            {loading && <p className="text-sm text-muted-foreground">{t('common.searching', { defaultValue: 'Buscando…' })}</p>}
+            {error && !loading && (
+                <p role="alert" className="text-sm text-destructive">
+                    {t('productPicker.error', { defaultValue: 'No se pudo buscar. Revisa tu conexión e inténtalo de nuevo.' })}
+                </p>
+            )}
+            {!loading && !error && parsed.kind !== 'empty' && text.trim().length >= 2 && results.length === 0 && (
+                <EmptyState
+                    title={t('productPicker.empty', { defaultValue: 'No encontramos ese producto' })}
+                    description={t('productPicker.emptyHint', { defaultValue: 'Prueba con otra medida, SKU o código de barras.' })}
+                />
+            )}
+
+            {results.length > 0 && (
+                <ul role="listbox" className="max-h-72 divide-y overflow-auto rounded-md border">
+                    {results.map((p) => {
+                        const stock = availableStock(p, warehouseId)
+                        const hasVariants = (p.variants?.length ?? 0) > 0
+                        return (
+                            <li key={p.id} role="option" aria-selected={false} className="px-2 py-1.5">
+                                <button
+                                    type="button"
+                                    className="flex w-full items-center justify-between gap-2 text-left disabled:opacity-50"
+                                    disabled={hasVariants || (!allowOutOfStock && stock != null && stock <= 0)}
+                                    onClick={() => pick(p)}
+                                >
+                                    <span>
+                                        <span className="block text-sm font-medium">{p.name}</span>
+                                        <span className="block text-xs text-muted-foreground">
+                                            {[p.sku, p.tire?.normalized, p.supplier_sku && `Prov. ${p.supplier_sku}`].filter(Boolean).join(' · ')}
+                                        </span>
+                                    </span>
+                                    <span className="flex items-center gap-2">
+                                        {stock != null && (
+                                            <Badge variant={stock > 0 ? 'success' : 'danger'}>
+                                                {stock > 0 ? t('productPicker.inStock', { defaultValue: '{{n}} disp.', n: stock }) : t('productPicker.outOfStock', { defaultValue: 'Sin existencia' })}
+                                            </Badge>
+                                        )}
+                                        {p.price != null && !hasVariants && <span className="text-sm tabular-nums">{fmt.money(p.price)}</span>}
+                                    </span>
+                                </button>
+                                {hasVariants && (
+                                    <ul className="mt-1 space-y-0.5 pl-3">
+                                        {p.variants!.map((v) => {
+                                            const vs = availableStock(v, warehouseId)
+                                            return (
+                                                <li key={v.id}>
+                                                    <button
+                                                        type="button"
+                                                        className="flex w-full items-center justify-between gap-2 rounded px-1 py-0.5 text-left text-sm hover:bg-accent disabled:opacity-50"
+                                                        disabled={!allowOutOfStock && vs != null && vs <= 0}
+                                                        onClick={() => pick(p, v)}
+                                                    >
+                                                        <span>{v.label}</span>
+                                                        <span className="flex items-center gap-2">
+                                                            {vs != null && <Badge variant={vs > 0 ? 'success' : 'danger'}>{vs}</Badge>}
+                                                            {(v.price ?? p.price) != null && <span className="tabular-nums">{fmt.money(v.price ?? p.price)}</span>}
+                                                        </span>
+                                                    </button>
+                                                </li>
+                                            )
+                                        })}
+                                    </ul>
+                                )}
+                            </li>
+                        )
+                    })}
+                </ul>
+            )}
+        </div>
+    )
+}