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>
100 lines
4.4 KiB
Markdown
100 lines
4.4 KiB
Markdown
# Etapa 15 — Área Master: Telas de Negócio
|
||
|
||
## Contexto do projeto
|
||
|
||
Continuação do frontend do **SeConectai Vendas**. Já existem: setup,
|
||
design system, autenticação/tema, e o layout/navegação da área master
|
||
funcionando. Esta etapa implementa as telas reais dentro desse layout,
|
||
consumindo os endpoints do painel master já prontos no backend (Etapas
|
||
3 e 4 do backend).
|
||
|
||
## Objetivo desta etapa
|
||
|
||
Todas as telas funcionais da área `/master`: dashboard, gestão de
|
||
tenants, planos, faturas, configuração da Evolution API e templates/logs
|
||
de alerta.
|
||
|
||
## Tarefas
|
||
|
||
1. **`/master/dashboard`**
|
||
- Cards de resumo (usando o componente `Card`/`StatCard`): total de
|
||
tenants por status, MRR, total recebido no mês, total em aberto.
|
||
- Gráfico simples (Recharts) de evolução de faturamento ou novos
|
||
tenants nos últimos meses, se o backend expuser dado suficiente
|
||
para isso — caso não exponha, usar só os cards de resumo e anotar a
|
||
limitação.
|
||
- Layout em grid (2–4 colunas no desktop, coluna única no mobile).
|
||
|
||
2. **`/master/tenants`**
|
||
- Listagem usando o componente `Table` (vira cards no mobile
|
||
automaticamente), colunas: nome, status (`StatusPill`), plano,
|
||
data de criação. Busca por nome/documento, filtro por status,
|
||
paginação.
|
||
- Ação rápida por linha: ver detalhe, mudar status.
|
||
- Botão "Novo tenant" levando para `/master/tenants/novo`.
|
||
|
||
3. **`/master/tenants/novo`**
|
||
- Formulário de criação: dados cadastrais, seleção de plano
|
||
(`Select`), dia de vencimento da mensalidade, dados do primeiro
|
||
usuário `tenant_admin` (nome, e-mail, senha provisória — mostrar a
|
||
senha gerada/informada em um `Toast`/modal de confirmação após
|
||
criar, com aviso claro para copiar/repassar ao cliente).
|
||
|
||
4. **`/master/tenants/:id`**
|
||
- Detalhe completo com `Tabs`: Dados cadastrais (editável), Faturas
|
||
(lista de `tenant_faturas` desse tenant, com ação de marcar como
|
||
paga), Uso (quantidade de usuários/customers/vendas — dados
|
||
agregados do backend).
|
||
- Ação de mudar status (`ativo`/`suspenso`/`cancelado`/`inadimplente`)
|
||
com confirmação explícita (modal) antes de aplicar, já que afeta o
|
||
login dos usuários do tenant.
|
||
|
||
5. **`/master/planos`**
|
||
- CRUD simples em lista + modal de criação/edição (não precisa de
|
||
página própria, dado o volume baixo de planos).
|
||
- Impedir exclusão de plano em uso (o backend já bloqueia — o
|
||
frontend deve mostrar a mensagem de erro retornada de forma clara,
|
||
não apenas um erro genérico).
|
||
|
||
6. **`/master/faturas`**
|
||
- Listagem consolidada de todas as `tenant_faturas`, filtros por
|
||
status/tenant/período, ação de marcar como paga.
|
||
- Botão de ação para disparar a geração de faturas do mês (endpoint
|
||
manual do backend nesta fase) com confirmação antes de executar.
|
||
|
||
7. **`/master/evolution-config`**
|
||
- Formulário de cadastro/edição da conexão (nome, URL base, API key —
|
||
campo de senha/mascarado, nunca mostrar a key completa depois de
|
||
salva).
|
||
- Botão "Testar conexão" com feedback claro de sucesso/erro (`Toast`).
|
||
|
||
8. **`/master/alertas/templates`** e **`/master/alertas/logs`**
|
||
- Templates: lista + editor de template (tipo, canal, assunto,
|
||
corpo com suporte a inserir os placeholders disponíveis via um
|
||
menu de ajuda ao lado do editor).
|
||
- Logs: listagem com filtro por canal/status/período, mostrando o
|
||
conteúdo enviado e o erro (se houver) ao expandir uma linha.
|
||
|
||
9. **`/master/configuracoes`**
|
||
- Dados do próprio admin master (nome, e-mail), troca de senha.
|
||
|
||
## Critérios de aceite
|
||
|
||
- [ ] Todas as telas listadas funcionam ponta a ponta com o backend real
|
||
- [ ] Dashboard mostra números corretos comparados com dados de teste
|
||
conhecidos
|
||
- [ ] Criar tenant exibe claramente a senha provisória gerada, com aviso
|
||
de que não será mostrada novamente
|
||
- [ ] Mudar status de tenant exige confirmação explícita antes de
|
||
aplicar
|
||
- [ ] Erros de negócio retornados pela API (ex: exclusão de plano em
|
||
uso, limite de instância) aparecem como mensagem clara para o
|
||
usuário, não como erro genérico
|
||
- [ ] API key da Evolution nunca aparece em texto completo na tela após
|
||
salva
|
||
- [ ] Editor de template mostra os placeholders disponíveis e insere
|
||
corretamente no corpo da mensagem
|
||
- [ ] Todas as listagens usam paginação, busca/filtro e estados de
|
||
loading/vazio corretamente
|
||
- [ ] Todas as telas testadas em 375px, 768px e 1280px
|