Prospeccao_SeConectai/Schema/etapas/07-frontend-setup-dashboard.md

Etapa 07 — Setup do dashboard frontend

Objetivo

Criar o esqueleto do frontend (React + Vite + TypeScript) com a estrutura de páginas e componentes base, ainda sem integração real com a API (usar dados mockados).

Contexto

Esta etapa é só estrutura visual e navegação. A integração real com o backend é a etapa 08.

Tarefas

1. Criar projeto com npm create vite@latest (template react-ts)
2. Instalar e configurar: Tailwind CSS, shadcn/ui, TanStack Query, React Hook Form + Zod, React Router, Recharts
3. Criar estrutura de pastas:

   src/
   ├── pages/
   │   ├── LoginPage.tsx
   │   ├── DashboardPage.tsx        (visão geral: total de leads, buscas recentes, gráfico por ramo)
   │   ├── NovaBuscaPage.tsx        (formulário para disparar nova busca)
   │   ├── LeadsPage.tsx            (listagem/filtro/exportação de leads)
   │   ├── BuscasPage.tsx           (histórico e status de buscas)
   │   └── CuradoriaRamosPage.tsx   (fila de leads sem ramo mapeado)
   ├── components/
   ├── hooks/
   ├── lib/
   └── types/
   

4. Implementar layout base (sidebar de navegação + header) com shadcn/ui
5. Criar as páginas acima com dados mockados (arrays estáticos) só para validar layout e navegação
6. Configurar roteamento protegido (redireciona para login se não autenticado — pode usar um mock de autenticação nesta etapa)

Critérios de aceite

• Projeto sobe com npm run dev sem erros
• Todas as páginas listadas existem e são navegáveis pela sidebar
• Layout responsivo básico funcional (não precisa ser pixel-perfect nesta etapa)
• Dados mockados suficientes para visualizar tabelas, formulário e gráfico preenchidos