Subir con OCR

Funcionalidad de escaneo y extracción automática de datos desde imágenes o PDFs de facturas usando tecnología OCR.

Componente

src/features/expenses/components/CreateExpenseSheet.tsx

<CreateExpenseSheet
  transaction={null}
  open={isOpen}
  onOpenChange={setIsOpen}
  onSuccess={handleSuccess}
/>

Características

• Escáner de documentos optimizado para móvil y escritorio
• Extracción OCR mediante Edge Function
• Pre-carga de datos desde imagen/PDF escaneado
• Indicador de confianza para cada campo extraído
• Corrección manual de datos extraídos
• Procesamiento en lote para múltiples documentos
• Vista previa del documento escaneado

Tipos de datos OCR

interface ExpenseOCRData {
  merchant?: string;          // Nombre del comercio
  amount?: number;            // Importe total
  date?: string;              // Fecha del documento
  tax_amount?: number;        // IVA extraído
  invoice_number?: string;    // Número de factura
  category?: string;          // Categoría sugerida
  raw_text?: string;          // Texto completo extraído
  confidence?: number;        // Confianza global (0-1)
}

Confianza de extracción

El sistema calcula un nivel de confianza para cada campo:

• Alta (más de 0.8): Datos muy fiables, pre-cargar directamente
• Media (0.5-0.8): Datos probables, revisar antes de guardar
• Baja (menos de 0.5): Datos dudosos, requieren corrección manual

Flujo de procesamiento

1. Captura: Usuario toma foto o sube archivo
2. Envío: Imagen se envía a Edge Function /ocr-process
3. Análisis: OCR extrae texto y estructura datos
4. Pre-carga: Formulario se rellena con datos extraídos
5. Revisión: Usuario corrige campos si es necesario
6. Guardado: Se crea el gasto con metadata OCR

Matching automático de proveedor

import { useOCRVendorMatch } from '@/features/expenses/hooks/useOCRVendorMatch';

const { matchResult } = useOCRVendorMatch(ocrData.merchant);

// matchResult contiene:
// {
//   vendor: Vendor | null,
//   confidence: 'high' | 'medium' | 'low',
//   matchedBy: 'exact' | 'alias' | 'fuzzy'
// }

El sistema busca proveedores por:

• Coincidencia exacta de nombre
• Alias registrados para el comercio
• Fuzzy matching con algoritmo Levenshtein

Componentes del escáner

Desktop:

src/features/expenses/components/scanner/DesktopExpenseScanner.tsx

<DesktopExpenseScanner
  onScanComplete={handleOCRData}
  businessId={currentBusinessId}
/>

Mobile:

src/features/expenses/components/scanner/MobileExpenseScanner.tsx

<MobileExpenseScanner
  onScanComplete={handleOCRData}
  businessId={currentBusinessId}
/>

Indicador de confianza

src/features/expenses/components/ExpenseConfidenceIndicator.tsx

<ExpenseConfidenceIndicator
  confidence={ocrData.confidence}
  fieldName="amount"
  extractedValue={ocrData.amount}
/>

Muestra:

• Verde: Alta confianza (más de 80%)
• Amarillo: Media confianza (50-80%)
• Rojo: Baja confianza (menos de 50%)

Edge Function: OCR Processing

Endpoint

POST /functions/v1/ocr-process

Input

{
  image: base64string,      // Imagen codificada
  businessId: string,       // ID del negocio
}

Output

{
  success: boolean,
  data: ExpenseOCRData,
  processingTime: number    // Milisegundos
}

Tecnologías

• Tesseract.js: Motor OCR open source
• OpenAI Vision API: Análisis semántico opcional
• Sharp: Preprocesamiento de imágenes

Optimizaciones

1. Preprocesamiento de imagen (ajuste de contraste, rotación)
2. Detección de región de interés (ROI)
3. Normalización de formatos de fecha
4. Extracción de patrones fiscales españoles (NIF/CIF)

---