# 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