# 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