InfoPet · Facturas OCR Mobile

🐕 Panchita · 2026-04-07

Estado 1 — Captura de factura

3 propuestas de layout para los botones. Elige una y Fiori implementa.

Opción A — Hero + link secundario
‹
Facturas
Digital (Bsale)
Física (OCR)
🧾
Fotografía la factura
La IA extrae automáticamente proveedor, productos y montos
o elegir foto de galería
Opción B — Lista jerarquizada ✓ Recomendada
‹
Facturas
Digital (Bsale)
Física (OCR)
La IA extrae los datos automáticamente. Elige cómo subir la factura:
📷
Tomar foto ahora
Abre la cámara en tiempo real
›
o
🖼️
Elegir de galería
Foto ya tomada
›
Opción C — Área dashed + botones iguales
‹
Facturas
Digital (Bsale)
Física (OCR)
📄
Sube la factura física
JPG o PNG · máx 10 MB
Estados 2 y 3 — Flujo completo (con Opción B)

Imagen cargada → Resultado OCR. Navega con los botones.

🐕 Panchita — Reporte de Diseño

InfoPet · Facturas OCR Mobile · 2026-04-07

Benchmark — Flujos de captura de documentos
AppPatrón de capturaLo que funcionaAdoptado
Expensify Un botón grande "SmartScan" + link "manual" Jerarquía clara, acción principal obvia Jerarquía A>B
SAP Concur Action sheet (bottom sheet) con opciones No confunde, opciones claras Lista vertical
Bsale Mobile Dos botones idénticos en grid — Descartado — confunde igual/prioridad
Google Lens Un solo botón enorme de cámara Sin fricción, acción única Inspiró Opción A
Por qué se veía raro el diseño anterior
Dos botones idénticos en tamaño con línea punteada transmiten que ambas opciones tienen el mismo peso — sin jerarquía. El cerebro se paraliza ("¿cuál elijo primero?"). Además la línea punteada recuerda a un drop zone de desktop, no a una acción táctil mobile.

La Opción B recomendada establece jerarquía clara: cámara = acción principal (color de acento, más grande) y galería = alternativa (ghost, más pequeño).
Por qué lista vertical en lugar de tabla horizontal
En 375px una tabla con 3+ columnas fuerza scroll horizontal o comprime el texto hasta hacerlo ilegible. La lista de cards usa todo el ancho para el nombre del producto (que es lo más largo) y pone cantidad + precio en una fila secundaria. Cada producto es un bloque táctil, fácil de editar después.
User Stories
Dueño de tienda
Cuando llega una factura física, quiero sacar foto con el celular y que la IA extraiga los datos, para no tipear manualmente cada producto.
Dueño de tienda
Cuando veo el resultado del OCR, quiero leer claramente cada producto, cantidad y precio sin hacer scroll horizontal, para verificar errores rápido.
Dueño de tienda
Cuando tengo la foto en la galería ya tomada, quiero poder subirla sin abrir la cámara, para no repetir el proceso.
Handoff para Fiori
🐕 Panchita → 🎨 Fiori — Facturas OCR Mobile
Maqueta
~/Downloads/maquetas/infopet/
2026-04-07-facturas-ocr-mobile.html
Layout elegido
Opción B — lista jerarquizada (confirmar con Guillermo)
Captura cámara
<input type="file" accept="image/*" capture="environment">
Captura galería
<input type="file" accept="image/*"> (sin capture)
Resultado
Lista de cards verticales, NO tabla horizontal
Scroll
Solo vertical · Ninguna sección con overflow-x