Métricas e Indicadores

Última atualização: 15 de julho de 2026

Visão Geral

O gauge de métricas na própria home, a tela de "Indicadores" e a tela de detalhe de uma métrica específica formam um conjunto coerente de telas, com boa estrutura visual e de navegação. Nenhuma das três, porém, lê um número real do vendedor hoje. Todo valor exibido é uma constante escrita direto no código.

Arquivos-chave

Arquivo	Responsabilidade
features/home/home-controller.tsx	HOME_METRICS_CONTENT, HOME_METRICS_LEGENDS, HOME_METRICS_MONTHLY_CHART
features/home/subscreens/indicators/home-indicators.tsx	INDICATOR_SECTIONS, a tela de indicadores
features/home/subscreens/metrics/metric-details/home-metric-detail.mock.ts	Dados do detalhe de uma métrica específica

O gauge de performance/engajamento da home

A home mostra um medidor circular com uma nota (score) e uma legenda de faixas (baixa/média/alta), alternando entre a visão "performance" e "engajamento". Os dois vêm de objetos estáticos indexados por visão e por período:

// home-controller.tsx
const HOME_METRICS_LEGENDS: Record<HomeMetricsView, Record<HomeMetricsPeriod, HomeMetricLegend[]>> = {
  performance: {
    partial: [
      { PERCINI: 0, PERCFIM: 48, DESCRICAO: "Baixa", COR: "#F14A38" },
      // ...
    ],
  },
};

const HOME_METRICS_CONTENT: Record<HomeMetricsView, Record<HomeMetricsPeriod, HomeMetricsSnapshot>> = {
  performance: {
    partial: { score: 75, /* ... */ },
  },
};

const HOME_METRICS_MONTHLY_CHART: Record<HomeMetricsView, HomeMetricsMonthlyChart> = {
  performance: buildYearlyMetricsChart([38, 44, 51, 58, 63, 69, 72, 76, 81, 86, 90, 94]),
};

O gráfico mensal, a nota do gauge, e as faixas de cor da legenda são todos números fixos, não uma agregação de vendas reais. Trocar de período (parcial/mês anterior, por exemplo) troca entre conjuntos diferentes desses valores fixos, não refaz nenhum cálculo.

A tela de Indicadores mostra zero para tudo

INDICATOR_SECTIONS, em home-indicators.tsx, define as seções "Performance" e "Engajamento" com uma lista de itens, cada um já com seu valor de exibição escrito literalmente no código, e esse valor é sempre zero:

// home-indicators.tsx
const INDICATOR_SECTIONS: IndicatorSection[] = [
  {
    category: "performance",
    title: "Performance",
    items: [
      { id: "new-sales", label: "Novas vendas", value: "0 Qtd" },
      { id: "sales-mix", label: "Mix de vendas", value: "0 sku" },
      { id: "discount", label: "Desconto", value: "0 %" },
      { id: "sales-goal", label: "Meta de vendas", value: "R$ 0,00" },
      { id: "bonus", label: "Bonificação", value: "R$ 0,00" },
      { id: "positivation", label: "Positivação", value: "0%" },
      { id: "average-ticket", label: "Ticket médio", value: "R$ 0,00" },
    ],
  },
  // ...
];

Não existe nenhuma consulta, estado ou prop que substitua esses valores. Tocar num item navega para a tela de detalhe (detalhes-metrica), passando a categoria e o id do item como parâmetro, mas isso serve só para a tela de detalhe saber qual dos itens mockados exibir, não para buscar um número real.

O detalhe de uma métrica também é mock, e é compartilhado com o engajamento genérico

home-metric-detail.mock.ts exporta listas separadas para performance e engajamento (PERFORMANCE_DETAIL_ITEMS, ENGAGEMENT_DETAIL_ITEMS), junto com suas legendas (PERFORMANCE_LEGENDS, ENGAGEMENT_LEGENDS) e uma função getMetricDetailItem que resolve qual item mostrar a partir dos parâmetros de rota. Esse mesmo arquivo também é reaproveitado pela tela de detalhe de engajamento quando ela não está no contexto de um cliente específico, documentada em Ranking e Engajamento.

Armadilhas conhecidas

Não gaste tempo procurando por que um indicador específico "não atualiza" depois de uma venda ou sincronização, hoje nenhum deles é alimentado por dados reais. Se for conectar essa tela a dados de fato, o ponto de entrada mais direto é substituir INDICATOR_SECTIONS e HOME_METRICS_CONTENT por valores vindos de uma consulta, mantendo o formato de IndicatorSection/HomeMetricsSnapshot já definido, que parece ter sido desenhado prevendo essa substituição.