Now let me read the chart component to understand the available chart patterns:
Now I have all the context I need. Let me build this comprehensive call center dashboard. I'll create a dark-themed, professional dashboard with all 4 pages based on the specification. Let me start by updating the theme, then building the components.
Now let me update the layout with proper metadata and font:
Now let me build the dashboard components. I'll create the shared components first, then each page:
Now let me create all 4 pages:
Now let me create the main page that ties everything together:
O dashboard de call center foi construido com as 4 paginas conforme o wireframe e a especificacao fornecida. A Pagina 1 (Visao Executiva) possui KPIs (SLA, Abandono, TME, TMA, Volume, Ocupacao), graficos de tendencia SLA vs Meta e Abandono vs Meta, mapa de calor hora/dia, top contribuintes para abandono e alertas automaticos. A Pagina 2 (Operacao) inclui funil de atendimento, grafico por intervalo de 30 min, histograma de abandono por faixa de espera e comparativo entre skills. A Pagina 3 (Produtividade do Agente) traz ranking de agentes, distribuicao de status (donut), ocupacao por turno e scatterplot de dispersao. A Pagina 4 (Diagnostico) apresenta a arvore de KPIs para causa raiz, correlacoes entre variaveis, curva de sobrevivencia, deteccao de anomalias e tabela detalhada com drill-through. O tema utiliza uma paleta profissional em azul marinho com tokens semanticos para sucesso, alerta e perigo.
Agora vou verificar os componentes do dashboard para entender onde as fontes sao aplicadas nos titulos e KPIs:
Vou usar a Playfair Display para titulos (serif elegante e executiva) e manter a Inter para corpo. E uma combinacao classica de dashboard corporativo premium. Vou atualizar o layout e o globals.css, e ajustar os componentes para usarem font-serif nos titulos e valores grandes.
Agora vou atualizar os componentes para aplicar font-serif nos titulos, valores de KPI e cabecalhos dos cards:
Agora vou atualizar todos os CardTitle nas 4 paginas para usar font-serif:
Agora vou atualizar as outras 3 paginas tambem:
Agora vou aplicar font-serif em todos os CardTitle das 3 paginas restantes e nos valores grandes do funil e da arvore de KPI:
Now page-agents.tsx:
Now page-diagnostics.tsx - update all CardTitles and the KPI tree values:
As fontes foram atualizadas para um padrao executivo. A Playfair Display (serif classica e elegante) agora e usada em todos os titulos de cards (CardTitle), valores grandes dos KPIs, cabecalho "Central de Operacoes", valores do funil e nos nos da arvore de KPIs. A Inter (sans-serif limpa e profissional) permanece como fonte de corpo, labels e dados menores, com letras maiusculas e tracking mais aberto nos rotulos para reforcar a hierarquia visual.