📊 Capítulo 03
Dashboard
A tela inicial do CRMAppy — um painel de controle com três quadros que mostram sua carteira, sua agenda e a temperatura das ações em tempo real.
📋 Visão Geral
O Dashboard é a primeira tela que o usuário vê ao acessar o CRMAppy.
Funciona como um painel de controle pessoal — traz um retrato instantâneo do que está
acontecendo na sua carteira, na sua agenda e na qualidade das suas interações comerciais.
É composto por um banner de boas-vindas personalizado e três quadros independentes dispostos lado a lado: Métricas Gerais, Agenda e Temperaturas. Cada quadro carrega seus dados de forma autônoma e se atualiza automaticamente quando ações são registradas no sistema.
É composto por um banner de boas-vindas personalizado e três quadros independentes dispostos lado a lado: Métricas Gerais, Agenda e Temperaturas. Cada quadro carrega seus dados de forma autônoma e se atualiza automaticamente quando ações são registradas no sistema.
👋 Banner de Boas-Vindas
| Elemento | Comportamento |
|---|---|
| Saudação por horário | Muda automaticamente conforme a hora local do usuário: Bom dia (até 11h) · Boa tarde (12h–17h) · Boa noite (18h+) |
| Nome do usuário | Exibe o nome de exibição cadastrado no perfil. Se não houver nome, exibe apenas a saudação. |
| Prefixo de gênero | Adapta o texto conforme preferência de saudação: Bem-vindo (masculino) · Bem-vinda (feminino) · Bem-vindo(a) (neutro) |
| Gradiente de cor | O fundo muda com o horário: âmbar/laranja de manhã · azul/índigo à tarde · índigo/azul escuro à noite |
🧩 Os Três Quadros
Abaixo do banner, o Dashboard exibe três quadros em colunas. Cada um tem um propósito distinto e dados independentes.
Quadro 1
Métricas Gerais
Sua carteira · Total de Empresas · Ações
Clientes
12 de 48
Leads
5 de 21
Prospects
3 de 14
Ativos
18 de 62
Inativos
2 de 21
Quadro 2
Agenda
Compromissos do dia e próximos dias
📅 Hoje (2 compromissos)
REUNIÃO DE ALINHAMENTO
Empresa ABC
➡️ Amanhã (1 compromisso)
PROPOSTA COMERCIAL
Clínica XYZ
⚠️ Atrasadas (1)
FOLLOW-UP PENDENTE
📅 3 compromissos na próxima semana
Demais semanas
📅 2 compromissos entre 16/06 ~ 20/06
Quadro 3
Temperaturas
Ações, empresas e tempo sob a lente da temperatura
Distribuição de ações por temperatura
22 · 55%
10 · 25%
5 · 12%
3 · 8%
Empresas por temperatura predominante
🔥 18 empresas
🌡 7 empresas
➖ 4 empresas
❄️ 2 empresas
Linha temporal ← passadas · hoje · futuras →
🔥← 1453 →
🌡← 622 →
➖← 311 →
❄️← 201 →
📦 Quadro 1 Métricas Gerais — em detalhe
| Elemento | O que mostra |
|---|---|
| Clientes Pill azul |
Número de empresas classificadas como Cliente na sua carteira vs. total da empresa. O gráfico de pizza (MiniPie) mostra ações ativas (verde) vs. concluídas (cinza). |
| Leads Pill verde |
Empresas em estágio de Lead — interesse identificado mas ainda sem proposta formal. Idem ao MiniPie de ações. |
| Prospects Pill roxo |
Empresas prospectadas — primeiro contato ou reconhecimento. Ainda sem qualificação como Lead. |
| Ativos Pill âmbar |
Total de empresas com status ativo na sua carteira vs. total da empresa. |
| Inativos Pill cinza |
Empresas sem movimentação recente ou marcadas como inativas. |
| Barra de carteira Barra âmbar no rodapé |
Mostra visualmente qual percentual das empresas da organização está na sua carteira. Ex: "Sua carteira 20 (35%) · Empresas 83". |
ℹ️ Leitura do formato "X de Y"
O número antes de "de" é a sua carteira. O número depois é o total da organização.
Exemplo: "12 de 48 Clientes" = você tem 12 clientes, a empresa tem 48 no total.
📅 Quadro 2 Agenda — em detalhe
Exibe todos os compromissos pendentes do usuário, organizados em grupos por status de data. Cada item mostra: título da ação, empresa, contato, tipo de canal e horário.
| Grupo | Cor de fundo | Critério |
|---|---|---|
| 📅 Hoje | Âmbar | Compromissos com data igual a hoje e horário ainda não vencido |
| ➡️ Amanhã | Verde claro | Compromissos agendados para o dia seguinte |
| ⚠️ Atrasadas | Vermelho suave | Data anterior a hoje, ou hoje com horário já passado |
| ❓ Sem data | Lilás | Compromissos criados sem data definida |
Tags de tipo de ação
| Tag | Cor | Significado |
|---|---|---|
| Ligação (E) | Ligação (E) | Chamada efetuada (outbound) |
| Ligação (R) | Ligação (R) | Chamada recebida (inbound) |
| Whats (E) | Whats (E) | WhatsApp enviado |
| Whats (R) | Whats (R) | WhatsApp recebido |
| E-mail (E) | E-mail (E) | E-mail enviado |
| E-mail (R) | E-mail (R) | E-mail recebido |
| Tarefa | Tarefa | Tarefa interna sem canal |
Resumo de semanas futuras (card azul)
Abaixo dos grupos do dia, aparece um card azul escuro (#2722B6) com o resumo
de compromissos das próximas semanas úteis (segunda a sexta). Sábados e domingos
são agrupados automaticamente na semana da sexta anterior.
| Linha | O que mostra |
|---|---|
| Próxima semana | Total de compromissos na semana útil imediatamente seguinte |
| Demais semanas | Agrupamento semana a semana das semanas seguintes com contagem e intervalo de datas |
| Divisor de ano | Quando compromissos ultrapassam o ano corrente, um separador com o ano aparece automaticamente |
🌡️ Quadro 3 Temperaturas — em detalhe
Analisa a qualidade e intensidade das interações comerciais usando o conceito de temperatura — uma classificação que indica o nível de engajamento e urgência de cada ação e empresa. O quadro cobre um período de 30 dias anteriores a 45 dias futuros a partir de hoje.
| Temperatura | Ícone | Significado |
|---|---|---|
| Quente | 🔥 | Alta frequência de contato, cliente ativo e responsivo. Prioridade máxima de atenção. |
| Morna | 🌡️ | Interações regulares mas sem urgência imediata. Relacionamento em manutenção. |
| Neutra | ➖ | Poucos contatos recentes. Empresa não avança nem regride no relacionamento. |
| Fria | ❄️ | Baixa ou nenhuma interação. Risco de perda do relacionamento comercial. |
| Bloco | O que mostra |
|---|---|
| Distribuição de ações | Barra de progresso por temperatura mostrando quantidade absoluta e percentual do total de ações no período |
| Empresas por temperatura | Quantas empresas têm cada temperatura como predominante. Ao passar o mouse, exibe as principais empresas de cada grupo. |
| Linha temporal | Para cada temperatura: quantas ações são do passado (← ), de hoje e do futuro (→). Revela se o engajamento está concentrado no passado ou planejado para frente. |
💡 Como usar as temperaturas estrategicamente
Muitas ações frias no passado e poucas no futuro = clientes sendo negligenciados.
Concentração de ações quentes = carteira saudável e engajada. Use o quadro para
priorizar quem precisa de contato urgente.
🔄 Atualização dos Dados
ℹ️ Os dados do Dashboard se atualizam automaticamente
Sempre que uma ação é registrada ou uma empresa é modificada no sistema
(em qualquer módulo), o Dashboard detecta a mudança e recarrega os três
quadros automaticamente — sem precisar atualizar a página.
| Quadro | Fonte de dados |
|---|---|
| Métricas Gerais | Hook useDashboardQuadro1 — consulta empresas e ações filtradas pela carteira do usuário logado |
| Agenda | View vw_dashboard_user_agenda no Supabase — ações pendentes do usuário ordenadas por data e horário |
| Temperaturas | Hook useDashboardQuadro3 — janela de ±30/45 dias com classificação por temperatura |