@asteby/metacore-runtime-react 46.0.0 → 46.2.0

package/dist/document/use-document-sources.d.ts

@@ -1,6 +1,12 @@
 import type { DocumentSourceDef } from './types';
 export interface DocumentSourcesState {
     sources: Record<string, Record<string, unknown>[]>;
+    /**
+     * Total del servidor por fuente directa (`meta.total`), para que un contador
+     * diga 312 y no «50» (el tamaño de la página que se trajo). Una fuente sin
+     * `meta.total` —o de dos saltos— no aparece: el contador cae al largo de sus filas.
+     */
+    totals: Record<string, number>;
     loading: boolean;
     /** Vuelve a pedir todas las fuentes (tras ejecutar una acción). */
     reload: () => void;

package/dist/document/use-document-sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-document-sources.d.ts","sourceRoot":"","sources":["../../src/document/use-document-sources.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAQhD,MAAM,WAAW,oBAAoB;IACjC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,CAAA;IAClD,OAAO,EAAE,OAAO,CAAA;IAChB,mEAAmE;IACnE,MAAM,EAAE,MAAM,IAAI,CAAA;CACrB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAC9B,IAAI,EAAE,iBAAiB,EAAE,GAAG,SAAS,EACrC,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GACtC,oBAAoB,CAgEtB"}
+{"version":3,"file":"use-document-sources.d.ts","sourceRoot":"","sources":["../../src/document/use-document-sources.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAQhD,MAAM,WAAW,oBAAoB;IACjC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,CAAA;IAClD;;;;OAIG;IACH,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC9B,OAAO,EAAE,OAAO,CAAA;IAChB,mEAAmE;IACnE,MAAM,EAAE,MAAM,IAAI,CAAA;CACrB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAC9B,IAAI,EAAE,iBAAiB,EAAE,GAAG,SAAS,EACrC,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GACtC,oBAAoB,CAuEtB"}

package/dist/document/use-document-sources.js

@@ -12,16 +12,19 @@ const VIA_CHUNK = 40;
 export function useDocumentSources(defs, recordId) {
     const api = useApi();
     const [sources, setSources] = useState({});
+    const [totals, setTotals] = useState({});
     const [loading, setLoading] = useState(false);
     const [nonce, setNonce] = useState(0);
     const reload = useCallback(() => setNonce((n) => n + 1), []);
     useEffect(() => {
         if (!defs || defs.length === 0 || recordId === undefined || recordId === null) {
             setSources({});
+            setTotals({});
             return;
         }
         let cancelled = false;
         setLoading(true);
+        const seenTotals = {};
         const fetchRows = async (d, params) => {
             try {
                 const res = await api.get(`/data/${d.model}`, {
@@ -29,6 +32,10 @@ export function useDocumentSources(defs, recordId) {
                 });
                 const body = res.data;
                 const rows = (body?.data ?? body);
+                const total = body?.meta?.total;
+                // Sólo las consultas directas (sin `via`): las de dos saltos se parten en trozos y no suman.
+                if (!d.via && typeof total === 'number' && Number.isFinite(total))
+                    seenTotals[d.key] = total;
                 return Array.isArray(rows) ? rows : [];
             }
             catch {
@@ -62,11 +69,12 @@ export function useDocumentSources(defs, recordId) {
             if (cancelled)
                 return;
             setSources(out);
+            setTotals(seenTotals);
             setLoading(false);
         });
         return () => {
             cancelled = true;
         };
     }, [api, defs, recordId, nonce]);
-    return { sources, loading, reload };
+    return { sources, totals, loading, reload };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "46.0.0",
+  "version": "46.2.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/__tests__/inspection-checklist.test.tsx

@@ -0,0 +1,70 @@
+// @vitest-environment happy-dom
+//
+// <InspectionChecklist>: el semáforo de una llanta sale de la profundidad, verde
+// limpia la recomendación y la foto se sube por el host (onUpload).
+import { useState } from 'react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (k: string, o?: any) => o?.defaultValue ?? k,
+        i18n: { language: 'es' },
+    }),
+}))
+
+import { InspectionChecklist } from '../business/inspection-checklist'
+import { makeInspectionPoint, type InspectionHeader, type InspectionPoint } from '../business/inspection'
+
+afterEach(cleanup)
+
+function Harness({ initial, onUpload }: { initial: InspectionPoint[]; onUpload?: any }) {
+    const [points, setPoints] = useState(initial)
+    const [header, setHeader] = useState<InspectionHeader>({ damage_notes: '', odometer_km: null, fuel_level: '' })
+    return (
+        <>
+            <InspectionChecklist points={points} onChange={setPoints} header={header} onHeaderChange={setHeader} onUpload={onUpload} />
+            <output data-testid="state">{JSON.stringify({ points, header })}</output>
+        </>
+    )
+}
+const state = () => JSON.parse(screen.getByTestId('state').textContent ?? '{}')
+
+describe('InspectionChecklist', () => {
+    it('captura la profundidad y pinta el semáforo solo', () => {
+        render(<Harness initial={[makeInspectionPoint({ section: 'Llantas', name: 'Llanta FL', kind: 'tread', unit: 'mm' })]} />)
+        fireEvent.change(screen.getByLabelText('Llanta FL (mm)'), { target: { value: '1.2' } })
+        expect(state().points[0]).toMatchObject({ value: 1.2, status: 'urgent' })
+        fireEvent.change(screen.getByLabelText('Llanta FL (mm)'), { target: { value: '6' } })
+        expect(state().points[0].status).toBe('ok')
+    })
+
+    it('verde limpia la recomendación; amarillo la permite', () => {
+        render(
+            <Harness
+                initial={[makeInspectionPoint({ name: 'Balatas', status: 'attention', recommendation: 'Cambiar', unit_price: 500 })]}
+            />,
+        )
+        expect(screen.getByPlaceholderText('Trabajo recomendado')).toBeTruthy()
+        fireEvent.click(screen.getByRole('radio', { name: 'Bien' }))
+        expect(state().points[0]).toMatchObject({ status: 'ok', recommendation: '', unit_price: 0 })
+        expect(screen.queryByPlaceholderText('Trabajo recomendado')).toBeNull()
+    })
+
+    it('captura kilometraje y combustible del encabezado', () => {
+        render(<Harness initial={[]} />)
+        fireEvent.change(screen.getByLabelText('Kilometraje'), { target: { value: '84210' } })
+        fireEvent.click(screen.getByRole('radio', { name: '1/2' }))
+        expect(state().header).toMatchObject({ odometer_km: 84210, fuel_level: 'half' })
+    })
+
+    it('sube la foto por el host y la cuelga del punto', async () => {
+        const onUpload = vi.fn(async () => ({ url: '/storage/public/inspections/a.jpg' }))
+        const { container } = render(<Harness initial={[makeInspectionPoint({ name: 'Frenos' })]} onUpload={onUpload} />)
+        const input = container.querySelector('input[type=file]') as HTMLInputElement
+        fireEvent.change(input, { target: { files: [new File(['x'], 'a.jpg', { type: 'image/jpeg' })] } })
+        await waitFor(() => expect(state().points[0].media).toHaveLength(1))
+        expect(state().points[0].media[0]).toMatchObject({ url: '/storage/public/inspections/a.jpg', type: 'photo' })
+        expect(onUpload).toHaveBeenCalledTimes(1)
+    })
+})

package/src/business/catalog.ts

@@ -65,4 +65,21 @@ export const BUSINESS_COMPONENTS: readonly BusinessComponentSpec[] = [
         usedBy: ['POS', 'Pedido', 'Factura', 'RMA', 'OT'],
         helpers: ['computeReturnTotals', 'validateReturnChoices', 'creditNoteRelation', 'returnSteps', 'serializeReturn'],
     },
+    {
+        name: 'InspectionChecklist',
+        value: 'points: InspectionPoint[] (+ header: InspectionHeader)',
+        events: ['onChange', 'onHeaderChange', 'onUpload', 'onValidate', 'onAddToBudget'],
+        permissions: [],
+        usedBy: ['Recepción de vehículo', 'OT', 'Alineación', 'Garantía'],
+        helpers: [
+            'makeInspectionPoint',
+            'treadStatus',
+            'worstStatus',
+            'summarizeInspection',
+            'validateInspection',
+            'serializeInspectionPoints',
+            'parseInspectionPoints',
+            'recommendationsToLines',
+        ],
+    },
 ] as const

package/src/business/index.ts

@@ -13,3 +13,5 @@ export * from './customer-picker'
 export * from './catalog'
 export * from './return'
 export * from './return-wizard'
+export * from './inspection'
+export * from './inspection-checklist'

package/src/business/inspection-checklist.tsx

@@ -0,0 +1,457 @@
+// InspectionChecklist — plantilla de puntos con semáforo, medición, fotos/video
+// por punto y recomendación → renglón del presupuesto (benchmark §7, TAL-4/5;
+// Shopmonkey S39, Tekmetric S36). Controlado: `points` + `onChange`. Sirve a la
+// recepción del vehículo (encabezado con km/combustible/daños), a la inspección
+// multipunto de la OT, a la hoja de alineación y a la garantía.
+import { useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Camera, Loader2, Trash2, Video } from 'lucide-react'
+import { Badge, Button, Input, Textarea } from '@asteby/metacore-ui'
+import { useFormatter } from './format'
+import {
+    DEFAULT_TREAD_THRESHOLDS,
+    FUEL_LEVELS,
+    hasRecommendation,
+    newInspectionKey,
+    summarizeInspection,
+    treadStatus,
+    validateInspection,
+    type FuelLevel,
+    type InspectionHeader,
+    type InspectionMedia,
+    type InspectionPoint,
+    type InspectionRules,
+    type InspectionStatus,
+    type InspectionValidation,
+    type TreadThresholds,
+} from './inspection'
+
+export interface InspectionUploadResult {
+    url: string
+    /** Si el host no lo dice, se deduce del archivo. */
+    type?: 'photo' | 'video'
+}
+
+export interface InspectionChecklistProps {
+    points: InspectionPoint[]
+    onChange: (points: InspectionPoint[]) => void
+    /** Encabezado de recepción (km, combustible, daños). Sin él no se muestra. */
+    header?: InspectionHeader
+    onHeaderChange?: (header: InspectionHeader) => void
+    /**
+     * Sube un archivo al almacenamiento del host (el mismo `POST /upload` que
+     * usan los campos `upload`) y devuelve su URL. Sin él no hay botón de foto.
+     */
+    onUpload?: (file: File, point: InspectionPoint | null) => Promise<InspectionUploadResult>
+    /** Emite la validación tras cada cambio (para bloquear «Guardar»/«Enviar»). */
+    onValidate?: (v: InspectionValidation) => void
+    rules?: InspectionRules
+    /** Umbrales de profundidad de dibujo (mm). */
+    treadThresholds?: TreadThresholds
+    /** Errores del servidor `"<índice>.<campo>"`. */
+    serverErrors?: Record<string, string>
+    /** Muestra la recomendación y su precio. Default true. */
+    allowRecommendations?: boolean
+    /** Permite agregar/quitar puntos a mano. Default false (los pone la plantilla). */
+    allowCustomPoints?: boolean
+    /** Solo lectura: sin edición, para revisar una inspección enviada o cerrada. */
+    readOnly?: boolean
+    currency?: string
+    /** Botón «Agregar al presupuesto» sobre las recomendaciones (recibe los puntos). */
+    onAddToBudget?: (points: InspectionPoint[]) => void
+}
+
+const STATUS_STYLE: Record<InspectionStatus, string> = {
+    pending: 'border-border text-muted-foreground',
+    ok: 'border-emerald-500/50 bg-emerald-500/15 text-emerald-700 dark:text-emerald-300',
+    attention: 'border-amber-500/50 bg-amber-500/15 text-amber-700 dark:text-amber-300',
+    urgent: 'border-red-500/50 bg-red-500/15 text-red-700 dark:text-red-300',
+}
+
+const STATUS_DOT: Record<InspectionStatus, string> = {
+    pending: 'bg-muted-foreground/40',
+    ok: 'bg-emerald-500',
+    attention: 'bg-amber-500',
+    urgent: 'bg-red-500',
+}
+
+const LIGHTS: InspectionStatus[] = ['ok', 'attention', 'urgent']
+
+function statusLabel(t: (k: string, o: { defaultValue: string }) => string, s: InspectionStatus): string {
+    switch (s) {
+        case 'ok':
+            return t('inspection.status.ok', { defaultValue: 'Bien' })
+        case 'attention':
+            return t('inspection.status.attention', { defaultValue: 'Atención' })
+        case 'urgent':
+            return t('inspection.status.urgent', { defaultValue: 'Urgente' })
+        default:
+            return t('inspection.status.pending', { defaultValue: 'Sin revisar' })
+    }
+}
+
+function fuelLabel(t: (k: string, o: { defaultValue: string }) => string, f: FuelLevel): string {
+    switch (f) {
+        case 'empty':
+            return t('inspection.fuel.empty', { defaultValue: 'Reserva' })
+        case 'quarter':
+            return t('inspection.fuel.quarter', { defaultValue: '1/4' })
+        case 'half':
+            return t('inspection.fuel.half', { defaultValue: '1/2' })
+        case 'three_quarters':
+            return t('inspection.fuel.three_quarters', { defaultValue: '3/4' })
+        default:
+            return t('inspection.fuel.full', { defaultValue: 'Lleno' })
+    }
+}
+
+function mediaTypeOf(file: File, hint?: 'photo' | 'video'): 'photo' | 'video' {
+    return hint ?? (file.type.startsWith('video/') ? 'video' : 'photo')
+}
+
+export function InspectionChecklist({
+    points,
+    onChange,
+    header,
+    onHeaderChange,
+    onUpload,
+    onValidate,
+    rules,
+    treadThresholds = DEFAULT_TREAD_THRESHOLDS,
+    serverErrors,
+    allowRecommendations = true,
+    allowCustomPoints = false,
+    readOnly = false,
+    currency,
+    onAddToBudget,
+}: InspectionChecklistProps) {
+    const { t } = useTranslation()
+    const fmt = useFormatter({ currency })
+    const [uploading, setUploading] = useState<string | null>(null)
+    const [uploadError, setUploadError] = useState<string | null>(null)
+    const validation = useMemo(() => validateInspection(points, header, rules), [points, header, rules])
+    const errors = { ...validation.errors, ...serverErrors }
+    const summary = useMemo(() => summarizeInspection(points), [points])
+
+    const sections = useMemo(() => {
+        const order: string[] = []
+        const map = new Map<string, number[]>()
+        points.forEach((p, i) => {
+            const s = p.section || ''
+            if (!map.has(s)) {
+                map.set(s, [])
+                order.push(s)
+            }
+            map.get(s)!.push(i)
+        })
+        return order.map((s) => ({ section: s, indexes: map.get(s)! }))
+    }, [points])
+
+    const emit = (next: InspectionPoint[]) => {
+        onChange(next)
+        onValidate?.(validateInspection(next, header, rules))
+    }
+    const patch = (i: number, partial: Partial<InspectionPoint>) =>
+        emit(points.map((p, j) => (j === i ? { ...p, ...partial } : p)))
+
+    const setValue = (i: number, raw: string) => {
+        const p = points[i]
+        const value = raw.trim() === '' ? null : Number(raw.replace(',', '.'))
+        const v = value != null && Number.isFinite(value) ? value : null
+        // La profundidad de dibujo fija el semáforo; el técnico aún puede subirlo.
+        if (p.kind === 'tread') patch(i, { value: v, status: treadStatus(v, treadThresholds) })
+        else patch(i, { value: v })
+    }
+
+    const setStatus = (i: number, status: InspectionStatus) => {
+        const p = points[i]
+        // Verde no lleva recomendación: se limpia para no dejar un renglón huérfano.
+        patch(i, status === 'ok' ? { status, recommendation: '', unit_price: 0, quantity: 1 } : { status: p.status === status ? 'pending' : status })
+    }
+
+    const upload = async (i: number, file: File) => {
+        if (!onUpload) return
+        const p = points[i]
+        setUploading(p.key)
+        setUploadError(null)
+        try {
+            const res = await onUpload(file, p)
+            const media: InspectionMedia = { key: newInspectionKey('im'), url: res.url, type: mediaTypeOf(file, res.type) }
+            patch(i, { media: [...p.media, media] })
+        } catch (e) {
+            setUploadError(e instanceof Error ? e.message : t('inspection.uploadError', { defaultValue: 'No se pudo subir el archivo' }))
+        } finally {
+            setUploading(null)
+        }
+    }
+
+    const setHeader = (partial: Partial<InspectionHeader>) => {
+        if (!header) return
+        const next = { ...header, ...partial }
+        onHeaderChange?.(next)
+        onValidate?.(validateInspection(points, next, rules))
+    }
+
+    const addPoint = (section: string) =>
+        emit([...points, { key: newInspectionKey(), section, name: '', kind: 'check', status: 'pending', notes: '', recommendation: '', quantity: 1, unit_price: 0, media: [] }])
+
+    return (
+        <div data-slot="inspection-checklist" className="space-y-4">
+            {header && (
+                <div data-slot="inspection-header" className="grid gap-3 rounded-lg border bg-muted/20 p-3 sm:grid-cols-2">
+                    <label className="space-y-1 text-sm">
+                        <span className="text-xs font-medium text-muted-foreground">{t('inspection.odometer', { defaultValue: 'Kilometraje' })}</span>
+                        <Input
+                            inputMode="numeric"
+                            value={header.odometer_km == null ? '' : String(header.odometer_km)}
+                            disabled={readOnly}
+                            onChange={(e) => {
+                                const n = Number(e.target.value.replace(/[^\d.]/g, ''))
+                                setHeader({ odometer_km: e.target.value.trim() === '' || !Number.isFinite(n) ? null : n })
+                            }}
+                        />
+                    </label>
+                    <div className="space-y-1 text-sm">
+                        <span className="text-xs font-medium text-muted-foreground">{t('inspection.fuel.label', { defaultValue: 'Nivel de combustible' })}</span>
+                        <div role="radiogroup" className="flex flex-wrap gap-1.5">
+                            {FUEL_LEVELS.map((f) => (
+                                <Button
+                                    key={f}
+                                    type="button"
+                                    size="sm"
+                                    role="radio"
+                                    aria-checked={header.fuel_level === f}
+                                    variant={header.fuel_level === f ? 'default' : 'outline'}
+                                    disabled={readOnly}
+                                    onClick={() => setHeader({ fuel_level: header.fuel_level === f ? '' : f })}
+                                >
+                                    {fuelLabel(t, f)}
+                                </Button>
+                            ))}
+                        </div>
+                    </div>
+                    <label className="space-y-1 text-sm sm:col-span-2">
+                        <span className="text-xs font-medium text-muted-foreground">{t('inspection.damages', { defaultValue: 'Daños visibles al recibirlo' })}</span>
+                        <Textarea
+                            rows={2}
+                            value={header.damage_notes}
+                            disabled={readOnly}
+                            placeholder={t('inspection.damagesPlaceholder', { defaultValue: 'Golpes, rayones, faltantes...' })}
+                            onChange={(e) => setHeader({ damage_notes: e.target.value })}
+                        />
+                    </label>
+                </div>
+            )}
+
+            {sections.map(({ section, indexes }) => (
+                <section key={section || '_'} aria-label={section} className="space-y-2">
+                    {section && <h4 className="text-sm font-semibold">{section}</h4>}
+                    <div className="space-y-2">
+                        {indexes.map((i) => {
+                            const p = points[i]
+                            const needsValue = p.kind === 'tread' || p.kind === 'measure'
+                            const issue = p.status === 'attention' || p.status === 'urgent'
+                            return (
+                                <div key={p.key} data-slot="inspection-point" data-status={p.status} className="space-y-2 rounded-lg border p-3">
+                                    <div className="flex flex-wrap items-center gap-2">
+                                        <span className={`h-2.5 w-2.5 shrink-0 rounded-full ${STATUS_DOT[p.status]}`} aria-hidden />
+                                        {allowCustomPoints && !readOnly ? (
+                                            <Input
+                                                className="h-8 max-w-56"
+                                                value={p.name}
+                                                aria-invalid={!!errors[`${i}.name`]}
+                                                onChange={(e) => patch(i, { name: e.target.value })}
+                                            />
+                                        ) : (
+                                            <span className="min-w-0 flex-1 text-sm font-medium">{p.name}</span>
+                                        )}
+                                        {needsValue && (
+                                            <div className="flex items-center gap-1">
+                                                <Input
+                                                    inputMode="decimal"
+                                                    className="h-8 w-20 text-right"
+                                                    value={p.value == null ? '' : String(p.value)}
+                                                    disabled={readOnly}
+                                                    aria-label={`${p.name} (${p.unit ?? ''})`}
+                                                    aria-invalid={!!errors[`${i}.value`]}
+                                                    onChange={(e) => setValue(i, e.target.value)}
+                                                />
+                                                <span className="text-xs text-muted-foreground">{p.unit ?? (p.kind === 'tread' ? 'mm' : '')}</span>
+                                            </div>
+                                        )}
+                                        <div role="radiogroup" aria-label={p.name} className="flex gap-1">
+                                            {LIGHTS.map((s) => (
+                                                <button
+                                                    key={s}
+                                                    type="button"
+                                                    role="radio"
+                                                    aria-checked={p.status === s}
+                                                    disabled={readOnly}
+                                                    onClick={() => setStatus(i, s)}
+                                                    className={`rounded-full border px-2.5 py-1 text-xs transition ${
+                                                        p.status === s ? STATUS_STYLE[s] : 'border-border text-muted-foreground hover:bg-muted'
+                                                    } disabled:opacity-60`}
+                                                >
+                                                    {statusLabel(t, s)}
+                                                </button>
+                                            ))}
+                                        </div>
+                                        {allowCustomPoints && !readOnly && (
+                                            <Button
+                                                type="button"
+                                                variant="ghost"
+                                                size="sm"
+                                                className="h-8 w-8 p-0"
+                                                aria-label={t('inspection.removePoint', { defaultValue: 'Quitar punto' })}
+                                                onClick={() => emit(points.filter((_, j) => j !== i))}
+                                            >
+                                                <Trash2 className="h-4 w-4" />
+                                            </Button>
+                                        )}
+                                    </div>
+
+                                    {(issue || p.notes || readOnly === false) && (
+                                        <Textarea
+                                            rows={1}
+                                            value={p.notes}
+                                            disabled={readOnly}
+                                            aria-invalid={!!errors[`${i}.notes`]}
+                                            placeholder={t('inspection.notes', { defaultValue: 'Observaciones' })}
+                                            onChange={(e) => patch(i, { notes: e.target.value })}
+                                        />
+                                    )}
+                                    {errors[`${i}.notes`] && <p className="text-xs text-destructive">{errors[`${i}.notes`]}</p>}
+                                    {errors[`${i}.value`] && <p className="text-xs text-destructive">{errors[`${i}.value`]}</p>}
+
+                                    {allowRecommendations && issue && (
+                                        <div className="grid gap-2 rounded-md bg-muted/30 p-2 sm:grid-cols-[1fr_5rem_7rem]">
+                                            <Input
+                                                value={p.recommendation}
+                                                disabled={readOnly}
+                                                aria-invalid={!!errors[`${i}.recommendation`]}
+                                                placeholder={t('inspection.recommendation', { defaultValue: 'Trabajo recomendado' })}
+                                                onChange={(e) => patch(i, { recommendation: e.target.value })}
+                                            />
+                                            <Input
+                                                inputMode="decimal"
+                                                className="text-right"
+                                                value={String(p.quantity)}
+                                                disabled={readOnly || !hasRecommendation(p)}
+                                                aria-label={t('inspection.quantity', { defaultValue: 'Cantidad' })}
+                                                onChange={(e) => patch(i, { quantity: Number(e.target.value.replace(',', '.')) || 0 })}
+                                            />
+                                            <Input
+                                                inputMode="decimal"
+                                                className="text-right"
+                                                value={String(p.unit_price)}
+                                                disabled={readOnly || !hasRecommendation(p)}
+                                                aria-label={t('inspection.unitPrice', { defaultValue: 'Precio' })}
+                                                aria-invalid={!!errors[`${i}.unit_price`]}
+                                                onChange={(e) => patch(i, { unit_price: Number(e.target.value.replace(',', '.')) || 0 })}
+                                            />
+                                            {errors[`${i}.recommendation`] && (
+                                                <p className="text-xs text-destructive sm:col-span-3">{errors[`${i}.recommendation`]}</p>
+                                            )}
+                                        </div>
+                                    )}
+
+                                    <div className="flex flex-wrap items-center gap-2">
+                                        {p.media.map((m) => (
+                                            <span key={m.key} className="group relative">
+                                                {m.type === 'video' ? (
+                                                    <video src={m.url} className="h-14 w-20 rounded border object-cover" controls preload="metadata" />
+                                                ) : (
+                                                    <img src={m.url} alt={m.caption ?? p.name} className="h-14 w-14 rounded border object-cover" />
+                                                )}
+                                                {!readOnly && (
+                                                    <button
+                                                        type="button"
+                                                        aria-label={t('inspection.removeMedia', { defaultValue: 'Quitar archivo' })}
+                                                        className="absolute -right-1 -top-1 hidden h-5 w-5 items-center justify-center rounded-full bg-background text-xs shadow group-hover:flex"
+                                                        onClick={() => patch(i, { media: p.media.filter((x) => x.key !== m.key) })}
+                                                    >
+                                                        ×
+                                                    </button>
+                                                )}
+                                            </span>
+                                        ))}
+                                        {!readOnly && onUpload && <MediaPick busy={uploading === p.key} onFile={(f) => upload(i, f)} />}
+                                        {p.approval && p.approval !== 'none' && (
+                                            <Badge variant="outline" className="ml-auto">
+                                                {p.approval === 'approved'
+                                                    ? t('inspection.approval.approved', { defaultValue: 'Aprobado por el cliente' })
+                                                    : p.approval === 'declined'
+                                                      ? t('inspection.approval.declined', { defaultValue: 'Rechazado por el cliente' })
+                                                      : t('inspection.approval.pending', { defaultValue: 'Esperando al cliente' })}
+                                            </Badge>
+                                        )}
+                                    </div>
+                                </div>
+                            )
+                        })}
+                    </div>
+                    {allowCustomPoints && !readOnly && (
+                        <Button type="button" variant="outline" size="sm" onClick={() => addPoint(section)}>
+                            {t('inspection.addPoint', { defaultValue: 'Agregar punto' })}
+                        </Button>
+                    )}
+                </section>
+            ))}
+
+            {uploadError && <p role="alert" className="text-sm text-destructive">{uploadError}</p>}
+            {validation.form && points.length > 0 && <p role="alert" className="text-sm text-destructive">{validation.form}</p>}
+
+            <div data-slot="inspection-summary" className="flex flex-wrap items-center gap-2 rounded-lg border bg-muted/20 p-3 text-sm">
+                {LIGHTS.map((s) => (
+                    <Badge key={s} variant="outline" className={STATUS_STYLE[s]}>
+                        {statusLabel(t, s)}: {summary.counts[s]}
+                    </Badge>
+                ))}
+                {summary.pending > 0 && (
+                    <Badge variant="outline" className={STATUS_STYLE.pending}>
+                        {statusLabel(t, 'pending')}: {summary.pending}
+                    </Badge>
+                )}
+                {allowRecommendations && summary.recommendations > 0 && (
+                    <span className="ml-auto font-medium">
+                        {t('inspection.recommendedTotal', { defaultValue: 'Recomendado' })}: {fmt.money(summary.recommendedTotal)}
+                    </span>
+                )}
+                {onAddToBudget && !readOnly && summary.recommendations > 0 && (
+                    <Button type="button" size="sm" onClick={() => onAddToBudget(points.filter(hasRecommendation))}>
+                        {t('inspection.addToBudget', { defaultValue: 'Agregar al presupuesto' })}
+                    </Button>
+                )}
+            </div>
+        </div>
+    )
+}
+
+/** Botón de foto/video: abre la cámara en móvil, el selector de archivos en escritorio. */
+function MediaPick({ busy, onFile }: { busy: boolean; onFile: (f: File) => void }) {
+    const { t } = useTranslation()
+    const ref = useRef<HTMLInputElement | null>(null)
+    return (
+        <>
+            <input
+                ref={ref}
+                type="file"
+                accept="image/*,video/*"
+                capture="environment"
+                className="sr-only"
+                tabIndex={-1}
+                aria-hidden="true"
+                onChange={(e) => {
+                    const f = e.target.files?.[0]
+                    if (ref.current) ref.current.value = ''
+                    if (f) onFile(f)
+                }}
+            />
+            <Button type="button" variant="outline" size="sm" disabled={busy} onClick={() => ref.current?.click()}>
+                {busy ? <Loader2 className="mr-1.5 h-4 w-4 animate-spin" /> : <Camera className="mr-1.5 h-4 w-4" />}
+                {t('inspection.addMedia', { defaultValue: 'Foto o video' })}
+                <Video className="ml-1.5 h-3.5 w-3.5 opacity-60" aria-hidden />
+            </Button>
+        </>
+    )
+}