38 lines
1.7 KiB
Markdown
38 lines
1.7 KiB
Markdown
# 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
|