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>
95 lines
4.6 KiB
Markdown
95 lines
4.6 KiB
Markdown
# Etapa 14 — Layout e Navegação (Master e Tenant)
|
|
|
|
## Contexto do projeto
|
|
|
|
Continuação do frontend do **SeConectai Vendas**. Já existem: setup,
|
|
componentes base, e autenticação/tema funcionando. Ainda não existe
|
|
nenhum layout real das áreas autenticadas — as rotas de `/master` e
|
|
`/app` só têm placeholders.
|
|
|
|
Referência obrigatória: seção 5 (navegação por área) do
|
|
`10-frontend-schema-arquitetura.md`.
|
|
|
|
## Objetivo desta etapa
|
|
|
|
Construir o "casco" (shell) de navegação das duas áreas autenticadas —
|
|
sidebar, topbar, drawer mobile, bottom tab bar — totalmente responsivo,
|
|
que vai envolver todas as telas de negócio das próximas etapas.
|
|
|
|
## Tarefas
|
|
|
|
1. **Layout master (`app/master/layout.tsx`)**
|
|
- Desktop (`lg+`): sidebar fixa à esquerda (~240px) com: logo/marca
|
|
do SeConectai Vendas no topo (identidade fixa do master, não
|
|
whitelabel), lista de itens de menu com ícone + label, item ativo
|
|
destacado, avatar + nome do admin master + botão de logout no
|
|
rodapé.
|
|
- Itens do menu master: Dashboard, Tenants, Planos, Faturas,
|
|
Configuração Evolution API, Alertas (Templates/Logs),
|
|
Configurações.
|
|
- Topbar: breadcrumb da página atual + ícone de notificações (pode
|
|
ficar como placeholder visual nesta etapa, funcionalidade real na
|
|
Etapa 18/19) + busca rápida (input, funcionalidade real pode ficar
|
|
para depois, mas o componente deve existir).
|
|
- Mobile (abaixo de `md`): topbar fixa compacta (logo símbolo +
|
|
hambúrguer + notificações) + drawer com o menu completo + bottom
|
|
tab bar com os itens mais usados (definir 4 principais: Dashboard,
|
|
Tenants, Faturas, Alertas — o resto entra em "Mais").
|
|
|
|
2. **Layout tenant (`app/app/layout.tsx`)**
|
|
- Mesma estrutura de sidebar/topbar/drawer/bottom-nav do master, mas:
|
|
- Logo e cor vêm do tema do tenant autenticado (usar o que foi
|
|
resolvido na Etapa 13).
|
|
- Itens do menu: Dashboard, Clientes, Produtos, Vendas,
|
|
Recebimentos, WhatsApp, E-mail, Alertas, Equipe, Perfil.
|
|
- Bottom tab bar mobile com 4 principais: Dashboard, Clientes,
|
|
Vendas, Recebimentos — resto em "Mais".
|
|
- Itens do menu visíveis conforme o papel do usuário logado (ex:
|
|
"Equipe" só aparece para `tenant_admin`) — implementar o
|
|
controle de visibilidade por `role` aqui, para ser reaproveitado
|
|
em todas as telas.
|
|
|
|
3. **Componentes de layout (`components/layout/`)**
|
|
- `Sidebar`: recebe a lista de itens de menu e o slot de rodapé
|
|
(usuário) como props/children — não deve ter os itens hardcoded
|
|
dentro dela, para poder ser reaproveitada entre master e tenant com
|
|
conteúdo diferente.
|
|
- `Topbar`: recebe breadcrumb e slots de ações (notificações, busca).
|
|
- `Drawer`: menu deslizante mobile, fecha ao navegar ou ao tocar fora.
|
|
- `BottomTabBar`: recebe até 4 itens fixos + item "Mais" que abre um
|
|
sheet com o restante do menu.
|
|
- `Breadcrumb`: gerado a partir da estrutura de rotas (pode ser
|
|
manual por página nesta primeira versão, com nota no código sobre
|
|
automatizar depois).
|
|
|
|
4. **Estado de navegação**
|
|
- Sidebar colapsável (ícones apenas) no breakpoint `md`, com um botão
|
|
para expandir/recolher manualmente também no desktop, se fizer
|
|
sentido — decisão livre, mas documentar o comportamento escolhido.
|
|
- Persistir a preferência de sidebar colapsada/expandida (ex: em
|
|
cookie ou localStorage, não é dado sensível).
|
|
|
|
5. **Empty shells das páginas de negócio**
|
|
- Cada rota de `/master/*` e `/app/*` já criada como placeholder na
|
|
Etapa 11 deve agora estar **dentro** do layout correto (sidebar +
|
|
topbar aplicados), ainda com conteúdo placeholder — só a moldura
|
|
precisa estar pronta e correta aqui.
|
|
|
|
## Critérios de aceite
|
|
|
|
- [ ] Layout master renderiza sidebar/topbar no desktop e
|
|
drawer+bottom-nav no mobile, com os itens de menu corretos
|
|
- [ ] Layout tenant renderiza com a cor/logo do tenant autenticado
|
|
aplicada corretamente na sidebar/topbar
|
|
- [ ] Item "Equipe" só aparece no menu do tenant para usuários
|
|
`tenant_admin` (testar com usuário de outro papel)
|
|
- [ ] Navegação entre itens do menu funciona e destaca corretamente o
|
|
item ativo, tanto no desktop quanto no drawer/bottom-nav mobile
|
|
- [ ] Drawer mobile fecha ao selecionar um item ou tocar fora dele
|
|
- [ ] Bottom tab bar mostra os 4 itens definidos + "Mais" com o restante
|
|
- [ ] Sidebar colapsável funciona no breakpoint `md` e a preferência do
|
|
usuário é lembrada entre sessões
|
|
- [ ] Todas as rotas do mapa de rotas abrem dentro do layout correto
|
|
(nenhuma "solta" sem sidebar/topbar)
|
|
- [ ] Testado em 375px, 768px e 1280px sem quebra de layout
|