Dashboards

┌────────── DASHBOARD ──────────┐
│                                │
│  📋 Toolbar (LayoutToolbar)    │
│     alinhar · distribuir · PDF │
│                                │
│  📊 Painéis no grid            │
│     ├─ StatsCard               │
│     ├─ DashboardChart          │
│     ├─ DashboardTable          │
│     ├─ DashboardMap (Leaflet)  │
│     ├─ DashboardCalendar       │
│     ├─ DashboardLeaderboard    │
│     ├─ DashboardWorkflow       │
│     ├─ GaugeChart              │
│     ├─ DashboardListCard       │
│     ├─ RecentActivityCard      │
│     └─ ObjectModal (avançado)  │
│                                │
│  🎨 Formatação condicional     │
│  🧠 Insights da IA              │
│  🔍 Filtros por usuário        │
│  📤 Export PDF                  │
└────────────────────────────────┘

4.1. Construtor visual

• URL: /dashboards/create ou /dashboards/:id/edit.
• Engine: react-grid-layout com guias de alinhamento (AlignmentGuides) e toolbar (LayoutToolbar).
• Drag and drop: arrasta painel da galeria, posiciona, redimensiona.
• Múltiplas abas (TabsDashboardSelect) — divida temas em abas (Operacional, Comercial, Qualidade).

4.2. Painéis reaproveitáveis

• URL: /panels (catálogo), /panels/:id/edit (editor isolado).
• Conceito: monte uma vez, use em vários dashboards. Atualização em um lugar reflete em todos.

4.3. Componentes (galeria visual)

🎯 StatsCard

• Número grande + label + variação.
• Para KPIs principais.

📈 DashboardChart / DashboardGraphRenderer / ChartRenderer

• Barra, linha, área, pizza, dispersão, combinações.
• Multi-séries, eixos duplos, agrupamentos.

📋 DashboardTable

• Tabela com filtro, ordenação, busca, paginação.
• Formatação condicional por célula.
• Export Excel.

🗺️ DashboardMap (Leaflet)

• Pinos, clusters, heatmap, polígonos.
• Formatação condicional por valor (MapConditionalFormattingEditor).
• Útil para: visitas, ocorrências, ativos georreferenciados, distribuição de equipe.

📅 DashboardCalendar

• Eventos sobrepostos com cores.
• Para: agendamentos, vencimentos, ações pendentes.

🏅 DashboardLeaderboard

• Ranking em tempo real, conectado ao Z-Score.
• Cores por posição, animação suave.

⚙️ DashboardWorkflow

• Kanban das ações do Z-Flow.
• Colunas por status, cards arrastáveis.
• Substitui Trello/Jira para operação.

🌡️ GaugeChart

• Indicador de pressão (0 a 100%).
• Para metas, capacidade utilizada, saúde.

📜 DashboardListCard

• Lista configurável (top 10 X).

⏱️ RecentActivityCard

• Atividades recentes do escopo definido.

🧱 ObjectModal / DashboardObjectRenderer

• Componente avançado para casos customizados (HTML/JSON livre).

4.4. Formatação condicional

• Componente: ConditionalFormattingEditor.
• Regras:
• "se valor > 80 → verde";
• "se status = atrasado → vermelho + ícone";
• "se variação < -5% → seta para baixo".
• Aplica em: células, ícones, fundos, mapas.

4.5. Filtros por usuário

• Componente: UserFilterConfig.
• O que faz: mesmo dashboard mostra dados diferentes para perfis diferentes.
• Exemplo: "Dashboard Comercial" → vendedor vê só seus dados, gerente vê da equipe, diretor vê tudo.

4.6. Geração assistida por IA

• Componente: QueryGeneratorDialog.
• Como funciona: descreva o gráfico em linguagem natural ("evolução semanal de não-conformidades por unidade"). A IA escreve o SQL e cria o painel.

4.7. Insights automáticos

• Componente: AiInsightsSection.
• O que faz: agente IA roda em background, identifica anomalia/padrão, empurra card para o dashboard.
• Exemplos: "atenção: queda de 22% na Unidade Sul esta semana", "alerta: 3 técnicos com SLA acima da média".

4.8. Exportação PDF

• Componente: DashboardPDFExportDialog.
• O que faz: gera PDF com cabeçalho, contexto e todos os painéis renderizados — pronto para reunião.

4.9. Calendário e mapa avançados

• DashboardCalendar com filtros e legenda.
• DashboardMap com layers configuráveis e clustering automático.

4.10. Múltiplas fontes em um painel

• Combine dado interno (Ziinp) + SQL externo (ERP) + API REST em um único painel.
• Sem ETL.

[ Gestor: "preciso ver vencimentos críticos por filial" ]
              │
              ▼
[ Abre /dashboards/create ]
              │
              ▼
[ Adiciona painel "Mapa" ]
              │
              ▼
[ Conecta a Data Source "Vencimentos" (interno) ]
              │
              ▼
[ Configura formatação condicional: ]
[   < 30 dias = vermelho, < 7 dias = piscando ]
              │
              ▼
[ Adiciona painel "Tabela top 10 itens" ]
              │
              ▼
[ Configura filtro por usuário ]
[   (cada gerente vê só sua filial) ]
              │
              ▼
[ Salva dashboard, compartilha com cargo "Gerente" ]
              │
              ▼
[ Cada gerente abre, vê o seu, age direto ]

Cenário A — Sala de controle 24/7

Dashboard "Operações em tempo real":

• Mapa com todos os atendimentos abertos;
• Kanban Z-Flow;
• StatsCards de SLA;
• Lista de incidentes críticos;
• Insights IA.

Atualização automática. Equipe de plantão age direto da tela.

Cenário B — Reunião semanal de diretoria

Dashboard "Resumo executivo":

• Variação WoW de KPIs;
• Top 5 unidades por score;
• Gauge de capacidade utilizada;
• Calendário consolidado.

Botão "Exportar PDF" → arquivo pronto pra apresentar.

Cenário C — Painel por filial

Dashboard "Filial" com filtro por usuário. Cada gerente abre e vê só sua filial. Sem duplicar dashboard, sem confusão de visualização.

Cenário D — Dashboard misto operacional + financeiro

Combina vendas do ERP (SQL externo), visitas do Z-Field (interno), score por equipe do Z-Score (interno). Tudo em um único painel.

7.1. Pitch 5 minutos

7.2. Apresentação 15 minutos

Objetivos

• Criar dashboard com 5 painéis diferentes.
• Configurar formatação condicional e filtro por usuário.
• Combinar fonte interna + externa em um painel.
• Exportar PDF.

Agenda

Exercícios

1. Dashboard base: crie com 5 painéis (StatsCard, Chart de barra, Tabela, Mapa, Leaderboard). 2. Avançado: adicione formatação condicional em 2 painéis. Configure filtro por usuário. 3. Combinar fontes: adicione 1 painel com dado interno + 1 painel com dado SQL externo.

Quiz

1. Qual o engine de layout?
2. O que DashboardWorkflow substitui?
3. Como o mesmo dashboard mostra dados diferentes por perfil?
4. Onde a IA empurra insights?
5. Como combinar fonte interna + externa?
6. Como exportar PDF?

Setup inicial

• [ ] Mapear os 3 dashboards essenciais (operacional, executivo, por filial).
• [ ] Criar painéis reaproveitáveis em /panels.
• [ ] Configurar permissões — quem vê o quê.
• [ ] Testar filtro por usuário.
• [ ] Configurar export PDF com cabeçalho da empresa.

Revisão mensal

• [ ] Há painéis sem visualização? Avaliar utilidade.
• [ ] Tempo de carregamento aceitável? Cache de Data Source.
• [ ] Formatação condicional ainda faz sentido?
• [ ] Insights IA estão sendo úteis ou ruído?

Posso dashboard mobile? Sim — grid responsivo. Painéis se ajustam.

Quantos dashboards posso ter? Sem limite técnico.

Posso embedar em outro sistema? Via iframe com autenticação, sim.

Os gráficos atualizam em tempo real? Depende do TTL do Data Source. Para tempo real estrito, configurar TTL = 0.

Posso ter dashboard público? Sim — com cuidado e autenticação adequada.

Posso programar envio de PDF agendado? Sim — via Automation com cron.

Suporta drilldown? Sim — clique em um gráfico abre filtro/tabela detalhada.

Posso comparar períodos? Sim — filtros temporais e séries comparativas.

A galeria de Dashboards começa na criação e publicação de um painel e avança pelos formatos que transformam dados em decisão: gráficos, mapa, kanban, ranking, calendário, indicadores, filtros e exportação. Ela encerra com a camada de inteligência que sugere onde agir primeiro.

As telas reais foram documentadas no sandbox em 24/05/2026. Kanban e insights de IA são composições ilustrativas identificadas junto aos quadros, usadas para tornar visíveis widgets que não estavam configurados no painel capturado.

Print 01 - Catálogo de dashboards

Ampliar

Leitura do print: A listagem centraliza painéis disponiveis e caminhos para visualizar ou editar.

Evidência capturada; desktop / 1440 x 980; origem: `/dashboards`.

Print 02 - Novo dashboard

Ampliar

Leitura do print: A tela inicial documenta o ponto de composição de um novo painel.

Evidência capturada; desktop / 1440 x 980; origem: `/dashboards/create`.

Print 03 - Editor de dashboard

Ampliar

Leitura do print: O editor real comprova o ambiente de configuração de painel.

Evidência capturada; desktop / 1440 x 980; origem: `/dashboards/:id/edit`.

Print 04 - Dashboard publicado

Ampliar

Leitura do print: O painel publicado apresenta indicadores reais de quantidade de inspecoes e profissionais inspecionados.

Evidência capturada; desktop / 1440 x 980; origem: `/dashboards/:id`.

Print 05 - Gráficos variados

Ampliar

Leitura do print: O dashboard apresenta distribuição em barras com valores destacados e tabela complementar, favorecendo comparação entre períodos e responsáveis.

Evidência capturada; desktop / 1440 x 980; origem: `DashboardChart` em PDF exportado do dashboard.

Print 06 - Mapa com clusters

Ampliar

Leitura do print: O mapa associa serviços a pontos geográficos coloridos e evidencia a concentração das ocorrências na região, acompanhado pela lista tabular dos itens identificados.

Evidência capturada; desktop / 1440 x 980; origem: `DashboardMap` em PDF exportado do dashboard.

Print 07 - Kanban de workflow

Ampliar

Leitura do print: O painel organiza inspeções entre pendência, análise, aprovação e conclusão, oferecendo uma leitura direta do volume e do avanço operacional.

Imagem ilustrativa gerada com GPT Image a partir da marca oficial ZIINP; não representa um dashboard configurado no sandbox.

Print 08 - Leaderboard

Ampliar

Leitura do print: O painel apresenta a posição do usuário e o ranking geral por pontuação, com destaque visual para os primeiros colocados e o desempenho atual.

Evidência capturada; desktop / 1440 x 980; origem: `DashboardLeaderboard`.

Print 09 - Calendario

Ampliar

Leitura do print: O widget mensal organiza eventos no calendário, oferece alternância entre dia, semana e mês e resume o volume disponível para acompanhamento.

Evidência capturada; desktop / 1440 x 980; origem: `DashboardCalendar`.

Print 10 - Gauge

Ampliar

Leitura do print: O velocímetro apresenta escala cromática de alerta a desempenho e valor atual destacado, compondo uma leitura executiva imediata no dashboard exportado.

Evidência capturada; desktop / 1440 x 980; origem: `GaugeChart` em PDF exportado do dashboard.

Print 11 - Formatacao condicional

Ampliar

Leitura do print: A tabela de produção aplica cores por faixa e barras proporcionais aos valores, permitindo identificar volume e desempenho diretamente na leitura das linhas.

Evidência capturada; desktop / 1440 x 980; origem: resultado renderizado de `ConditionalFormattingEditor`.

Print 12 - Filtro por usuário

Ampliar

Leitura do print: Na implementação real, a personalização ocorre por grupo: o gestor associa dashboards ao grupo do usuário, define ordem e seleciona o painel padrão disponível aos membros.

Evidência capturada; desktop / 1440 x 980; origem: configuração de dashboards por grupo (`UserFilterConfig`).

Print 13 - Insights de IA

Ampliar

Leitura do print: A camada analítica combina alertas de atraso, evolução de eficiência e recomendação acionável para apoiar decisões da operação.

Imagem ilustrativa gerada com GPT Image a partir da marca oficial ZIINP; não representa um dashboard configurado no sandbox.

Print 14 - PDF exportado

Ampliar

Leitura do print: O PDF gerado preserva identidade visual e estrutura tabular do Dashboard de Produção, com navegação multipágina no visualizador para apresentação ou arquivamento.

Evidência capturada; desktop / 1440 x 980; origem: `Exportar PDF`.

🏭 Dashboard "Operações Industriais"

Painéis:

• StatsCard: OEE médio, horas paradas, # OS abertas, score do dia.
• DashboardChart: produção por turno (linha).
• DashboardWorkflow (kanban): OS por status.
• DashboardMap: equipamentos com status colorido.
• DashboardLeaderboard: top operadores do mês.
• AiInsightsSection: anomalias detectadas pelo agente.

⚡ Dashboard "Telecom — Sala de Controle"

• StatsCard: tickets abertos, SLA, NPS.
• DashboardMap: ocorrências por região (clusters).
• GaugeChart: utilização da equipe.
• DashboardTable: top 10 tickets críticos.
• DashboardCalendar: agenda de instalações.

🏥 Dashboard "Clínica"

• StatsCard: atendimentos hoje, no-show, NPS, receita estimada.
• DashboardCalendar: agenda de todos os especialistas.
• DashboardChart: ocupação por especialidade.
• DashboardListCard: pacientes em espera.

🛒 Dashboard "Ranking de Lojas"

• DashboardLeaderboard: top 10 lojas (score Z-Score).
• DashboardChart: evolução semanal.
• DashboardTable: detalhamento por loja, com formatação condicional (vermelho < 6, verde > 8).
• DashboardMap: lojas por região.

🏗️ Dashboard "Segurança do Trabalho"

• StatsCard: dias sem acidente, quase-acidentes reportados, # NCs.
• GaugeChart: % EPI conforme.
• DashboardChart: NCs por causa-raiz.
• AiInsightsSection: anomalia "Unidade Norte com aumento de 30%".

💰 Dashboard "Financeiro"

• StatsCard: a pagar hoje, a receber hoje, fluxo de caixa estimado.
• DashboardChart: receita vs. despesa (linha + área).
• DashboardTable: top 10 inadimplentes (filtro por usuário: cada gerente só vê os seus).

📞 Dashboard "Atendimento ao Cliente"

• StatsCard: tickets abertos, NPS, TMR.
• GaugeChart: capacidade da equipe.
• DashboardWorkflow: tickets por status.
• DashboardListCard: top 5 motivos.

🎓 Dashboard "Pessoas"

• StatsCard: # colaboradores, turnover %, % de treinamentos em dia.
• DashboardChart: evolução de score por equipe.
• DashboardListCard: aniversariantes.
• DashboardLeaderboard: top em Z-Score.

Receita 1 — Painel "Heat map de visitas"

Painel: DashboardMap
Fonte: respostas do formulário "Visita Técnica"
Configuração:
  modo: heatmap
  intensidade: density
  cor: gradiente verde→vermelho
Útil pra: identificar regiões super/sub atendidas.

Receita 2 — Painel "Workflow board (substitui Trello)"

Painel: DashboardWorkflow
Fonte: Z-Flow
Colunas: Aberto, Em andamento, Aguardando, Concluído
Card: título + responsável + prazo
Drag-and-drop ativo (move muda status no Z-Flow real).

Receita 3 — Painel "Leaderboard ao vivo"

Painel: DashboardLeaderboard
Fonte: Z-Score esquema X
Visão: top 10 individual + top 5 equipes
Atualização: real time (cache 30s)
Animação: suave ao mudar posição

Receita 4 — Painel "Gauge de SLA"

Painel: GaugeChart
Fonte: Z-Flow stats
Valor: % SLA cumprido nas últimas 24h
Faixas:
  0–60% = vermelho
  60–85% = amarelo
  85–100% = verde

Receita 5 — Painel "Anomalia automática"

Painel: AiInsightsSection
Configuração:
  agente "Detector de Anomalia" roda 4×/dia
  empurra cards quando detecta
Card típico:
  "Atenção: queda de 28% no volume da Unidade Norte na última semana"

Receita 6 — Dashboard executivo com export PDF

3 abas:
  Aba 1: Operacional (workflow, calendário, mapa)
  Aba 2: Comercial (vendas, NPS, ranking)
  Aba 3: Pessoas (score, treinamentos, headcount)

Botão "Exportar PDF":
  monta capa, índice, todas as abas, rodapé com data
  envia por e-mail aos diretores às 18h via Automation

• Implantar 3 dashboards essenciais no primeiro mês.
• Substituir Power BI para casos operacionais.
• Plugar agente IA que monitora KPIs e empurra alertas.
• Treinar gerentes a usar dashboards em reunião 1×1.