Ranking e Engajamento

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

Visão Geral

O ranking de vendedores é inteiramente mockado. O detalhe de engajamento de um cliente é mais interessante: quando aberto a partir de um cliente real, uma parte da tela mostra dados genuínos daquele cliente, enquanto outra parte, o gráfico de evolução mensal, continua sendo sempre a mesma sequência fixa de números, não importa qual cliente esteja sendo visto.

Arquivos-chave

Arquivo	Responsabilidade
features/home/subscreens/ranking/home-ranking.controller.ts	Monta o ranking a partir de clientes de teste
features/home/subscreens/engagement/home-engagement-detail-controller.ts	Resumo de engajamento (real quando há cliente) + evolução mensal (sempre mock)

O ranking usa clientes de teste, não vendedores reais

O ranking deveria mostrar uma classificação de vendedores por pontuação, mas a lista de "competidores" vem de um fixture de teste de clientes, e a pontuação de cada mês vem de uma tabela de números literais, uma posição por índice:

// home-ranking.controller.ts
import { clientResponseMock } from "@/__mocks__/client.mock";

const RANKING_POINTS_BY_MONTH: Record<RankingMonthId, number[]> = {
  jan: [6120, 5580, 2410, 2200, 2060, 1940, 1880, 1820, 1760, 1680],
  fev: [5710, 6240, 2380, 2140, 2080, 1910, 1870, 1830, 1770, 1660],
  mar: [6030, 6400, 2475, 2190, 2110, 1935, 1885, 1850, 1790, 1690],
  abr: [2569, 6589, 2285, 2150, 2050, 1900, 1860, 1800, 1790, 1600],
};

const getRankingEntries = (month: RankingMonthId): RankingEntry[] =>
  clientResponseMock.content
    .slice(0, RANKING_CLIENT_LIMIT)
    .map((client, index) => {
      const points = RANKING_POINTS_BY_MONTH[month][index] ?? 0;
      // ...monta nome, iniciais e cor do avatar a partir do cliente de teste
    });

Os "vendedores" no ranking são, na verdade, os primeiros clientes do arquivo de mock de testes do app, com um nome de exibição derivado do nome do cliente. Só existem quatro meses de dados (janeiro a abril), todos com números fixos.

O detalhe de engajamento de um cliente é parcialmente real

Diferente do ranking, essa tela recebe de fato um cliente real quando é aberta a partir da ação "Engajamento do Cliente" na carteira, documentada em Seleção e Navegação. O resumo de classificação, posição de ranking e percentual de engajamento é calculado a partir de campos reais desse cliente:

// home-engagement-detail-controller.ts
const buildClientEngagementSummary = (client: Partial<Client> | null) => {
  if (!client) return null;

  const classificationValue = String(client.grupoAutor ?? "").trim();
  const rankingValue = Number(client.sugTipNegSaid ?? 0);
  const engagementValue = Number(client.percentConsumidor ?? 0);

  return {
    classificationLabel: classificationValue || "N/A",
    engagementLabel: engagementValue > 0 ? `${Math.round(engagementValue)}%` : "--",
    rankingLabel: rankingValue > 0 ? `${rankingValue}º` : "--",
  };
};

Quando a tela é aberta sem um cliente no contexto (o caso genérico, fora do fluxo de carteira), esse resumo vem, em vez disso, dos mesmos ENGAGEMENT_DETAIL_ITEMS/ENGAGEMENT_LEGENDS mockados documentados em Métricas e Indicadores.

O gráfico de evolução mensal é sempre mock, com ou sem cliente

Independente de a tela ter um cliente real ou não, o gráfico de barras de evolução ao longo de 12 meses vem sempre da mesma sequência fixa de valores:

const ENGAGEMENT_EVOLUTION_VALUES = [
  65, 63, 60, 70, 72, 76, 80, 83, 85, 88, 91, 94,
];

const buildEngagementEvolutionBars = (): EngagementEvolutionBar[] => {
  // ... usa sempre ENGAGEMENT_EVOLUTION_VALUES, nunca um histórico do cliente
};

Ou seja: dois clientes completamente diferentes, cada um com seu percentual de engajamento real e correto no resumo do topo, verão exatamente o mesmo gráfico de evolução abaixo dele.

Armadilhas conhecidas

Ao validar essa tela com um cliente real, não assuma que o gráfico de evolução também é real só porque o resumo acima dele é. São duas fontes de dados completamente independentes dentro da mesma tela, uma real e uma sempre fixa.