Painel Administrativo do SaaS
Especificação completa com wireframes, componentes, fluxos de tela e regras de negócio para o painel de gestão da plataforma DBCHECKOUT
1Visão Geral do Painel
Usuários
Operadores da plataforma, time técnico e suporte
Objetivo
Gerenciar o SaaS, não o negócio do cliente
Segurança
Acesso restrito com autenticação forte
Princípio Fundamental
Este painel NUNCA acessa ou modifica dados de negócio dos clientes. Sua função é exclusivamente operacional e de governança da plataforma.
2Layout e Navegação
Wireframe: Layout Principal
Sidebar (Navegação Principal)
- Dashboard - Visão geral da plataforma
- Redes - Gestão de tenants
- Lojas - Gestão de lojas por rede
- Usuários - Gestão de acessos
- Ingestão - Monitor de ETL
- Saúde - Performance do sistema
- Billing - Planos e assinaturas
- Logs - Auditoria e governança
Header (Barra Superior)
- Busca Global
Buscar redes, lojas ou usuários
- Notificações
Alertas críticos do sistema
- Perfil do Admin
Configurações e logout
3Módulo: Dashboard
Wireframe: Dashboard Administrativo
KPIs Operacionais
Total de redes com status ativo
Fonte: redes.ativo = true
Soma de todas as lojas cadastradas
Fonte: COUNT(lojas)
Total de usuários com acesso
Fonte: profiles.ativo = true
Espaço total em GB no Supabase
Fonte: Supabase API
Gráficos e Visualizações
- Ingestões por Dia
Gráfico de linha mostrando volume de ETL nos últimos 7 dias
- Status das Lojas
Gráfico de pizza: Ativas / Inativas / Com Erro
- Distribuição de Planos
Gráfico de barras por tipo de plano contratado
Alertas Críticos
Falha de Ingestão
Loja 045 - Rede Pizza Express - Última tentativa: há 2 horas
Storage Próximo do Limite
Rede Burger King - 85% do plano utilizado
4Módulo: Gestão de Redes
Wireframe: Lista de Redes
Tabela de Redes
| Coluna | Tipo | Descrição |
|---|---|---|
| Nome | Text | Nome fantasia da rede |
| CNPJ | Text | CNPJ formatado |
| Plano | Badge | Starter / Pro / Enterprise |
| Lojas | Number | Total de lojas cadastradas |
| Status | Badge | Ativo / Suspenso / Inativo |
| Ações | Dropdown | Editar / Ver Lojas / Suspender |
Modal: Nova Rede
Regras de Negócio
- CNPJ deve ser único no sistema
- Limite de lojas deve respeitar o plano contratado
- Suspensão de rede bloqueia acesso de todos os usuários
- Exclusão de rede requer confirmação e não pode ter lojas ativas
5Módulo: Gestão de Lojas
Informações da Loja
- • Nome da loja
- • Código único
- • Rede pertencente
- • Status (ativo/inativo)
- • Última consolidação
- • Status de ingestão
- • Erros recentes
- • Volume de dados
Monitor de Ingestão
Ações Administrativas
6Módulo: Gestão de Usuários
Perfis de Acesso
Acesso total à plataforma
- ✓ Gerenciar redes e lojas
- ✓ Gerenciar usuários
- ✓ Configurar billing
- ✓ Acessar logs e auditoria
Operação e suporte
- ✓ Visualizar redes e lojas
- ✓ Monitorar ingestão
- ✓ Reprocessar dados
- ✗ Não gerencia billing
Atendimento ao cliente
- ✓ Visualizar informações
- ✓ Reset de senha
- ✓ Ver logs de acesso
- ✗ Não modifica dados
Somente leitura
- ✓ Visualizar dashboards
- ✓ Ver relatórios
- ✗ Não modifica nada
- ✗ Não acessa logs
Criar Novo Usuário
7Módulo: Monitor de Ingestão
Status em Tempo Real
142
Lojas processadas hoje
8
Aguardando conclusão
3
Requerem atenção
Log de Processamento
Processados 1.247 registros em 2m 34s
Processados 892 registros em 1m 52s
Erro: Timeout na conexão com banco legado
8Módulo: Saúde da Plataforma
Métricas de Infraestrutura
Volume de Dados por Rede
12 lojas
45 lojas
8 lojas
9Fluxos de Tela Principais
Fluxo 1: Cadastro de Nova Rede
Lista de Redes
Clicar em "+ Nova Rede"
Modal de Cadastro
Preencher formulário
Validação
Sistema valida CNPJ
Sucesso
Rede criada e listada
Fluxo 2: Investigação de Falha de Ingestão
Alerta no Dashboard
Falha detectada
Monitor de Ingestão
Ver detalhes do erro
Detalhes da Loja
Verificar configuração
Reprocessar
Executar ETL manual
Fluxo 3: Suspensão de Rede por Inadimplência
Billing
Identificar inadimplência
Detalhes da Rede
Clicar em "Suspender"
Confirmação
Confirmar suspensão
Bloqueio
Acesso bloqueado
10Stack Tecnológico
Frontend
- • React 19
- • TypeScript
- • TailwindCSS
- • React Router
- • Recharts (gráficos)
- • React Query
Backend
- • Node.js + Express
- • TypeScript
- • JWT Auth
- • Supabase Client
- • Bull (filas)
- • Redis (cache)
Banco de Dados
- • Supabase (PostgreSQL)
- • Row Level Security
- • Realtime subscriptions
- • Storage para logs
Especificações Relacionadas
Especificação do Painel Administrativo
DBCHECKOUT - Gestão da Plataforma SaaS v1.0