Files
SeConectai_Vendas/Etapas/V2/15-frontend-area-master.md
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.4 KiB
Raw Permalink Blame History

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