Files

T

tiagoandClaude Sonnet 5 323912748f Frontend completo (Etapas 11-18) e extensões de backend (Etapas 13 e 18)

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>

2026-08-16 09:41:13 -03:00

4.6 KiB

Raw Permalink Blame History

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

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").
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.
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).
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).
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

4.6 KiB Raw Permalink Blame History