Runbook — Dashboard do Sagazchat

Manual operacional para uma IA ou pessoa auditar e explicar o Dashboard do Sagazchat.

Status: validado em 2026-05-10/11 na conta de exemplo. O Dashboard é majoritariamente leitura; não há ações destrutivas observadas nesta tela.

1. Onde fica

• Sidebar: Geral › Dashboard
• URL: https://app.sagazchat.com/
• Rota também referenciada em scripts antigos como /dashboard, mas a tela validada abre na raiz /.

2. Estrutura da tela

No topo do conteúdo aparecem:

• Filtrar período
• Badge Vencimento: DD/MM/AAAA
• Alternância Por data / Por período
• Dois inputs type="date" quando está em Por data
• Botão Filtrar

Cards principais:

Card	Campo da API	Interpretação
Atendimentos Finalizados	counters.supportFinished	Conversas finalizadas no intervalo selecionado.
Em Andamento	counters.supportHappening	Conversas abertas/em atendimento.
Pendentes	counters.supportPending	Conversas aguardando atendimento.
Novos Contatos	counters.leads	Novos contatos/leads no intervalo.
Tempo Médio de Atendimento	counters.avgSupportTime	Média de duração dos atendimentos. Vem em minutos e a UI formata para horas/minutos.
Tempo Médio de Espera	counters.avgWaitTime	Tempo médio até atendimento. null aparece como —.
Avaliação Média	counters.avgRating	Média das avaliações. Zero/ausente aparece como —.

Seções abaixo dos cards:

• Conversas por Hora (Hoje): gráfico de linha por hora do dia. Mostra atividade horária; visualmente usa eixo 00:00, 03:00, 06:00, 09:00, 12:00, 15:00, 18:00, 21:00.
• Distribuição de Status: gráfico donut com total e percentuais de Finalizados, Em Andamento e Pendentes.
• Desempenho por Departamento: tabela por fila/departamento.
• Equipe de Atendimento: tabela por atendente.

3. API observada

Ao abrir o Dashboard, o frontend chama o perfil do usuário para montar menu, empresa, vencimento e filas:

GET /users/profile/<userId>

Exemplo de dados usados:

{
  "name": "Exemplo",
  "company": {
    "name": "Exemplo",
    "dueDate": "2026-05-21T03:00:00.000Z",
    "status": true
  },
  "queues": [
    { "id": 77, "name": "Comercial - Atendente 1", "color": "#2194C5" },
    { "id": 78, "name": "Comercial - Atendente 2", "color": "#CF2FF7" },
    { "id": 79, "name": "Financeiro/RH", "color": "#F5C539" }
  ]
}

O relatório principal vem de:

GET /dashboard?date_from=YYYY-MM-DD&date_to=YYYY-MM-DD

Resposta real observada:

{
  "counters": {
    "leads": 2,
    "avgRating": 0,
    "avgWaitTime": null,
    "avgSupportTime": 293,
    "supportPending": 3,
    "supportFinished": 0,
    "supportHappening": 1
  },
  "attendants": [
    {
      "id": 39,
      "name": "Exemplo",
      "open": 1,
      "closed": 0,
      "online": true,
      "rating": 0,
      "pending": 0,
      "tickets": 1,
      "avgSupportTime": 293
    }
  ],
  "queues": [
    {
      "id": 77,
      "name": "Comercial - Atendente 1",
      "color": "#2194C5",
      "totalOpen": 0,
      "avgWaitTime": 0,
      "totalWaiting": 0,
      "totalFinished": 0,
      "avgSupportTime": 0
    }
  ]
}

Também houve chamada paralela para tickets do dia/canal:

GET /tickets?date=<ISO_DATE>&channel=whatsapp

Essa chamada alimenta estado global/listas da aplicação e não é o endpoint principal dos cards do Dashboard.

4. Filtro de data

Modo validado:

1. Em Por data, preencher os dois campos de data.
2. Clicar Filtrar.
3. O frontend chama /dashboard?date_from=<inicio>&date_to=<fim>.

Exemplo validado:

date_from=2026-05-09
date_to=2026-05-10

Modo Por período aparece visualmente no topo, mas ainda precisa ser validado em detalhe antes de documentar payload/atalhos. Não presumir se ele usa presets, intervalo relativo ou outro formato sem abrir e capturar a UI.

5. Tabela de departamentos

Colunas:

• Departamento
• T. Espera Médio
• T. Atendimento Médio
• Finalizados
• Em Atendimento
• Aguardando

Cada linha corresponde a uma fila/departamento vindo de queues.

Campos:

Coluna UI	Campo API
Departamento	queue.name
Cor/bolinha	queue.color
T. Espera Médio	queue.avgWaitTime
T. Atendimento Médio	queue.avgSupportTime
Finalizados	queue.totalFinished
Em Atendimento	queue.totalOpen
Aguardando	queue.totalWaiting

6. Tabela de equipe

Colunas:

• Atendente
• Avaliação
• Resolução
• Abertas · Pendentes · Resolvidas

Campos:

Coluna UI	Campo API
Atendente	attendant.name
Online/offline	attendant.online
Tempo médio	attendant.avgSupportTime
Avaliação	attendant.rating
Resolução	derivado de closed, tickets/totais
Abertas	attendant.open
Pendentes	attendant.pending
Resolvidas	attendant.closed

7. Ações seguras

Ação	Dispara mudança?	Observação
Abrir Dashboard	Não	Leitura.
Alterar datas nos inputs	Não, até clicar Filtrar	Só muda UI local antes do clique.
Clicar Filtrar	Não destrutivo	Recarrega métricas.
Alternar Por data / Por período	Não destrutivo	Muda modo de filtro; detalhes do modo Por período ainda a validar.
Clicar sidebar	Navega	Pode sair da tela.

8. Imagens capturadas

• public/media/nova-ui/dashboard.png: visão superior com filtro, cards e gráficos.
• public/media/nova-ui/dashboard-equipe.png: visão inferior com departamentos e equipe.

Script usado:

node scripts/sagaz-dashboard-inspect.mjs

Arquivos de apoio:

• scripts/_out/dashboard/dashboard-home.png
• scripts/_out/dashboard/dashboard-equipe.png
• scripts/_out/dashboard/dashboard-network.json
• scripts/_out/dashboard-home.json