# Cartão +Vida — Extractor de Dados com IA

## Descripción
Herramienta interna single-file HTML/JS para emisión rápida de cartões de membresía da Clínica Mais Vida. Personal recepcionista sube foto do BI (frente + verso) ou passaporte e a IA extrae automaticamente nome, número de documento e datas. App genera cartão final (PNG/PDF) sobreponiendo texto sobre template oficial via Canvas. Tudo client-side — zero backend, zero instalação.

## Cliente
Clínica Mais Vida — Centro de Diagnóstico e Especialidades  
Bairro Patriota, Luanda, Angola

## Año
2025

## Tipo de proyecto
Aplicación web standalone single-file — herramienta interna sin backend (zero deploy, zero servidor, abre directo en browser)

## Funcionalidades principales

### Extracción com IA (Gemini Vision)
- **Tab Bilhete ID**: subida de até 2 fotos (frente + verso) JPG/PNG/PDF — IA detecta nome, número BI, datas
- **Tab Passaporte**: 1 foto, mesma extracción
- **Tab WhatsApp**: cola texto desestructurado de mensagem, IA estructura datos
- **Tab Manual**: fallback sin IA — preenche campos a mão

### Geração do cartão
- Canvas com template frente base64 embebido (oficial da clínica)
- Sobrepõe nome (Arial Narrow Bold com auto-fit), número, datas em coordenadas pixel-perfect
- Capitalização automática de nome (lowercase para preposições "de/da/dos")
- Modal preview + download PDF (via jsPDF)

### Histórico
- Tab Histórico com lista paginada de cartões emitidos
- Filtro por mês de emissão
- Ordem ascendente / descendente
- Export `.xlsx` (xlsx.js) — útil para listas administrativas
- Import / export backup `.json`
- Limpar tudo (botão de segurança)

### Configuração
- Pegar Google AI Studio API key (tab Config) → guarda em `localStorage`
- Botão "Testar chave" valida com chamada dummy a Gemini
- Limite gratuito Gemini: 20 extracções/dia, reset 07:00 (Angola)
- Trocar chave a qualquer momento sem editar código

## Stack tecnológico
- **HTML/CSS/JS vanilla** — zero framework, zero build
- **AI**: Google Gemini API (`gemini-2.5-flash-lite`) via fetch direto
- **Canvas API**: render do cartão final
- **jsPDF** (CDN): conversão canvas → PDF
- **xlsx.js** (CDN): export Excel
- **localStorage**: histórico + API key + preferências
- **Single file**: 1.5 MB (maioria = templates frente/verso embebidos como base64 PNG)

## Decisiones técnicas destacadas
- **Single HTML standalone**: distribuição trivial — copia ficheiro para qualquer PC, abre, funciona. Nem servidor web preciso (file:// suporta tudo)
- **Templates embebidos base64**: cartão sempre tem layout oficial mesmo offline, sem dependências externas
- **API key client-side**: tradeoff aceitável para tool interno (1 utilizador conhecido); evita backend completo
- **Gemini Flash Lite**: modelo barato + rápido + suficiente para vision OCR de BI estruturado
- **Auto-fit do nome**: shrink dinâmico do font-size se nome longo não cabe (loop while measureText > 340px)
- **Coordenadas hardcoded**: medidas pixel a pixel sobre template original 4167×2917 escalado para canvas 850px (factor 0.336/0.607)
- **Fallback manual**: se IA falha (limite atingido / chave inválida / foto má), recepcionista preenche a mão e ainda gera o cartão

## Vantagens operacionais
- Recepcionista emite cartão em ~10 segundos vs ~5 minutos manual
- Zero erros de digitação (IA lê fonte original)
- Backup local em JSON — se PC parte, recuperação imediata noutro
- Sem dependência de internet permanente — só durante extracção (browser, IA call). Tudo o resto offline
- Template oficial sempre actualizado — basta editar base64 no HTML

## Material visual (em `imagens/`)
- `cartao-frente.png` (810 KB) — Template oficial frente do cartão (extraído do HTML, era base64 embebido)
- `cartao-verso.png` (241 KB) — Template oficial verso
- Logo da clínica está como SVG inline no header da página (cruz médica branca em quadrado vermelho)

## Capturas a recolher
- Tab Bilhete ID com 2 fotos carregadas
- Tab Passaporte com extracção em progresso (loading spinner)
- Tab WhatsApp com texto colado e botão extrair
- Tab Histórico com filtro de mês activo + lista
- Tab Manual (formulário de preenchimento)
- Tab Config (input de API key + botão testar)
- Modal final do cartão gerado (com botão descarregar PDF)
- Cartão PDF resultante (exemplo de output)