tiagoandClaude Sonnet 5
323912748f
Adiciona o frontend Next.js em frontend/ (setup, design system, autenticação/tema, layout/navegação, área master, área tenant completa: clientes, produtos, vendas, recebimentos, whatsapp, e-mail, alertas, equipe e perfil). Estende o backend de forma aditiva e autorizada: cookie httpOnly para refresh token (Etapa 13) e CRUD de equipe + edição de perfil do tenant (Etapa 18, módulo src/modules/equipe/ novo e PUT /tenant/perfil). Detalhes completos em Etapas/V2/*. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
93 lines
4.1 KiB
Markdown
93 lines
4.1 KiB
Markdown
# Etapa 11 — Setup do Projeto Frontend
|
|
|
|
## Contexto do projeto
|
|
|
|
Estou construindo o frontend do **SeConectai Vendas** — CRM/vendas
|
|
multi-tenant. O backend (API REST em NestJS) já está pronto, seguindo o
|
|
schema e as etapas descritas em documentos separados. O frontend consome
|
|
essa API e tem duas áreas: painel **master** (`/master`) e painel
|
|
**tenant** (`/app`).
|
|
|
|
A arquitetura completa (rotas, breakpoints, tokens de design, estrutura
|
|
de pastas) está definida no arquivo `10-frontend-schema-arquitetura.md`
|
|
— **use esse arquivo como fonte de verdade** para tudo que for construído
|
|
nesta e nas próximas etapas.
|
|
|
|
Esta é a **Etapa 1 de 9 do frontend** (numerada como Etapa 11 no conjunto
|
|
geral do projeto, para não colidir com as 8 etapas do backend). Aqui é
|
|
só a fundação — nenhuma tela de negócio ainda.
|
|
|
|
## Objetivo desta etapa
|
|
|
|
Inicializar o projeto Next.js com toda a configuração base: Tailwind com
|
|
os tokens de design do schema, estrutura de pastas, variáveis de
|
|
ambiente, lint/format, e uma página inicial validando a conexão com a
|
|
API do backend.
|
|
|
|
## Tarefas
|
|
|
|
1. **Inicialização do projeto**
|
|
- Next.js 14+ com App Router, TypeScript, ESLint já integrado.
|
|
- Configurar Tailwind CSS.
|
|
- Configurar Prettier + regra de integração com ESLint (sem conflito
|
|
de formatação).
|
|
|
|
2. **Tokens de design**
|
|
- Criar `styles/tokens.css` com todas as CSS variables definidas na
|
|
seção 6 do schema (`--neutral-*`, `--surface`, `--danger`,
|
|
`--success`, `--warning`, `--brand-master`, `--brand-master-accent`,
|
|
`--color-primary` com fallback `#2563EB`).
|
|
- Configurar `tailwind.config.ts` para expor essas variáveis como
|
|
cores utilitárias (ex: `bg-primary`, `text-danger`), em vez de usar
|
|
`var(--...)` espalhado pelo código.
|
|
- Configurar fonte (Inter ou equivalente definida no schema), incluindo
|
|
`font-variant-numeric: tabular-nums` disponível como classe utilitária
|
|
para colunas de valores monetários.
|
|
|
|
3. **Estrutura de pastas**
|
|
- Criar exatamente a estrutura de pastas da seção 9 do schema:
|
|
`app/(public)/`, `app/master/`, `app/app/`, `components/ui/`,
|
|
`components/layout/`, `components/domain/`, `lib/api/`,
|
|
`lib/auth/`, `lib/theme/`, `lib/validators/`, `hooks/`, `styles/`.
|
|
- Cada pasta de rota deve existir com um `page.tsx` placeholder (ex:
|
|
"Em construção — Etapa X") para validar que o roteamento do mapa de
|
|
rotas inteiro já resolve sem erro 404, mesmo antes das telas reais
|
|
existirem.
|
|
|
|
4. **Variáveis de ambiente e cliente HTTP base**
|
|
- `.env.local.example` com `NEXT_PUBLIC_API_URL` e demais chaves que
|
|
forem necessárias.
|
|
- Criar `lib/api/client.ts`: wrapper mínimo sobre `fetch` (ou axios,
|
|
justificar a escolha) com base URL configurável, tratamento de erro
|
|
padronizado (parse de erro da API em formato consistente), e um
|
|
ponto único de onde o interceptor de refresh token será plugado na
|
|
Etapa 13 (deixar o gancho pronto, sem implementar auth ainda).
|
|
|
|
5. **Página de diagnóstico**
|
|
- Uma rota simples (ex: `/diagnostico`, pode ser removida depois) que
|
|
chama `GET /health` do backend e mostra o resultado — só para
|
|
confirmar que a integração frontend↔backend está funcionando de
|
|
ponta a ponta antes de seguir.
|
|
|
|
6. **Qualidade**
|
|
- Scripts no `package.json`: `dev`, `build`, `start`, `lint`,
|
|
`format`.
|
|
- Configurar Husky + lint-staged (ou equivalente) para rodar lint no
|
|
pre-commit, se fizer sentido para o fluxo do projeto.
|
|
|
|
## Critérios de aceite
|
|
|
|
- [ ] `npm run dev` sobe o projeto sem erro
|
|
- [ ] Todas as rotas do mapa de rotas (seção 4 do schema) resolvem, com
|
|
página placeholder, sem 404
|
|
- [ ] `tokens.css` contém todas as variáveis do schema, aplicadas
|
|
corretamente (inspecionar no DevTools que os valores computados
|
|
batem)
|
|
- [ ] Classes utilitárias do Tailwind (`bg-primary`, `text-danger` etc)
|
|
funcionam e refletem os tokens
|
|
- [ ] `/diagnostico` mostra o retorno real de `GET /health` do backend
|
|
(com o backend rodando local)
|
|
- [ ] `npm run lint` roda sem erro
|
|
- [ ] Estrutura de pastas idêntica à definida na seção 9 do schema de
|
|
frontend
|