Prospeccao_SeConectai/Schema/etapas/08-frontend-integracao-api.md

Etapa 08 — Integração do frontend com a API

Objetivo

Substituir os dados mockados da etapa 07 por integração real com a API REST do backend (etapa 06).

Tarefas

1. Criar lib/api.ts com cliente HTTP configurado (axios ou fetch wrapper), incluindo injeção automática do token JWT nas requisições
2. Implementar autenticação real: LoginPage chama POST /auth/login, armazena token (ex: em memória + refresh via contexto React, evitar localStorage para o token se possível por segurança)
3. Integrar NovaBuscaPage:
   • Formulário (React Hook Form + Zod) envia POST /buscas
   • Após criar, redirecionar para BuscasPage mostrando a busca recém-criada com status pendente
4. Integrar BuscasPage:
   • GET /buscas com paginação
   • Polling (TanStack Query com refetchInterval) para atualizar status das buscas pendente/em_execucao automaticamente até virarem concluida/erro
5. Integrar LeadsPage:
   • GET /leads com os filtros (ramo, cidade/UF, status, busca de origem) refletidos na URL (query params) para permitir compartilhar/voltar filtros
   • Botão de exportação chamando GET /leads/export e disparando download do CSV
   • Ação de atualizar status do lead via PATCH /leads/{id}/status
6. Integrar CuradoriaRamosPage:
   • GET /leads/sem-ramo
   • Ação para vincular a um ramo existente ou criar novo ramo com alias, chamando os endpoints de RamoController
7. Integrar DashboardPage com dados agregados reais (pode exigir um endpoint adicional simples no backend para contagens, se não existir ainda — registrar essa necessidade em PROGRESSO.md caso apareça)
8. Tratar estados de loading/erro em todas as páginas (skeleton states, mensagens de erro amigáveis)

Critérios de aceite

• Login real funcional, com logout e expiração de sessão tratados
• Criar busca pelo frontend resulta em leads aparecendo em LeadsPage sem necessidade de reload manual (polling funcionando)
• Filtros de LeadsPage refletidos na URL e persistentes ao navegar
• Exportação CSV funcional a partir do frontend
• Curadoria de ramos funcional de ponta a ponta
• Estados de loading/erro tratados em todas as integrações