RQE - Relatório de Qualidade de Entrega

Manual interno para compor dashboards com o grid canônico de 24 colunas, incluindo conversões práticas do legado e exemplos usados no mockup.

Guia de composição

O dashboard deve nascer em 24 colunas. Referências ao grid de 16 colunas ficam restritas à conversão de legado já existente.

Resumo operacional

Regras rápidas para montar novas telas e revisar páginas já convertidas.

Base 24 colunas

Use col-span-24 para blocos de largura total.

Tablet 24 colunas também

O breakpoint médio mantém o mesmo grid; ajuste spans apenas quando a leitura pedir reempilhamento.

Mobile 1 coluna

A malha colapsa para uma coluna abaixo de 600px, sem exigir utilitários extras.

Conversão prática do legado

Mapeamentos comuns do grid antigo para o novo grid-base.

Padrão legado Novo padrão Uso recomendado
span 16/16 col-span-24 Cabeçalhos de seção, blocos de KPI, tabelas e narrativas de apoio.
span 8/16 + 8/16 col-span-12 + col-span-12 Dois gráficos com o mesmo peso visual.
span 4/16 × 4 col-span-6 × 4 Quatro cards executivos no mesmo nível.
span 10/16 + 6/16 col-span-15 + col-span-9 Gráfico principal com card auxiliar ou scorecard lateral.
span 12/16 + 4/16 col-span-18 + col-span-6 Área analítica dominante com apoio compacto.
3 colunas visuais equivalentes col-span-8 × 3 Três comparações lado a lado com simetria estável.

Checklist de revisão

Pontos que evitam regressão para a lógica de 16 colunas.

  • Não documentar 16 colunas como referência de partida para layouts novos.
  • Preferir combinações exatas da malha de 24: 24, 12, 8, 6, 15, 9 e 18.
  • Ao revisar HTMLs, confirmar se o equilíbrio visual continua correto em lg: e md: quando houver overrides.
  • Usar col-span-24 em tabelas longas, scorecards em faixa e blocos introdutórios.
  • Quando o layout médio precisar respirar mais, prefira expandir o card para 24 colunas em md: em vez de voltar a proporções antigas.

Exemplos reais do dashboard

Composições já adotadas nas páginas convertidas.

24 / 24 KPIs de performance, KPIs de auditoria, extrato financeiro e tabelas operacionais.
12 / 24 Investimento por plataforma + faturado versus gasto; cobertura geográfica + daypart.
12 / 24 Pares equivalentes para comparações diretas no mesmo nível hierárquico.
8 / 24 Terços simétricos como mix de mídia, canais de TV e tipos de comercial.
8 / 24 Uso ideal para três gráficos compactos com o mesmo peso visual.
8 / 24 Também aplicado em anomalias gerais, impacto por volume e impacto por valor.
15 / 24 Série temporal principal, como ritmo mensal ou custo versus atenção.
9 / 24 Card de apoio com ranking, saúde por contrato ou leitura executiva complementar.

Orientação para telas grandes

Como aproveitar a largura disponível sem fragmentar demais a leitura.

Em telas grandes, mantenha a hierarquia visual por densidade: largura total para síntese, 12/12 para comparações e 15/9 quando houver um gráfico dominante.

Evite quebrar uma narrativa principal em muitos blocos estreitos. O ganho do grid de 24 colunas está na precisão dos pesos, não em multiplicar mini-cards sem contexto.

Orientação para telas médias

O breakpoint médio continua em 24 colunas, então a decisão é de legibilidade e não de troca de sistema.

<section class="card col-span-15 md:col-span-24 lg:col-span-15">...</section>
<section class="card col-span-9 md:col-span-24 lg:col-span-9">...</section>

Use esse padrão quando um par 15/9 ficar apertado no tablet. Os dois cards ocupam toda a largura em md, mas voltam à composição assimétrica em lg.

Para linhas de três cards, o ajuste preferido em médio é empilhar em duas ou uma linhas usando md:col-span-12 ou md:col-span-24, sem reintroduzir contas baseadas em 16.

Cuidados com números grandes

KPIs financeiros e executivos precisam manter leitura em uma linha sem forçar overflow horizontal.

Os scorecards usam clamp() no CSS e ajuste progressivo de fonte em js/ui/responsive-metrics.js para reduzir o texto até caber no card.

Quando houver alternativa curta, como moeda compacta, registrar também uma versão resumida no builder do card. Exemplo atual: R$ 36.500.000 pode cair para R$ 36,5 mi sem perder contexto.

Para grids de KPI com 4 ou 5 cards, manter maxLines=1 e reduzir a quantidade de colunas em larguras intermediárias antes de aceitar quebra visual.

Matriz de validação responsiva

Evidência objetiva dos tamanhos revisados na checagem final dos HTMLs convertidos.

Largura Regras ativas Comportamento validado
1440px Grid de 24 colunas em lg; composições 8/8/8, 12/12 e 15/9 preservadas. Financeiro mantém 15/9 no bloco principal; Auditoria e Performance mantêm terços simétricos sem cards de largura total fora dos casos intencionais.
1280px Mesmo grid de 24 colunas; métricas usam modo compacto por coluna intermediária. KPIs continuam legíveis com redução controlada de colunas internas e sem alterar a hierarquia externa dos cards.
1024px Ainda 24 colunas; md:col-span-24 e md:col-span-12 passam a reempilhar o conteúdo. Pares 15/9 viram 24/24; linhas em terços passam para 12/12/24 quando necessário; filtros caem para 3 colunas.
768px Mesmo breakpoint médio; alturas máximas caem para 360px nos gráficos grandes e 280px nos médios. Gráficos e tabelas seguem dentro do card, sem retorno ao grid legado de 16 colunas.
390px Layout mobile em 1 coluna; filtros em 1 coluna; section-heading passa a span 1. Cards, gráficos, texto e números empilham sem overflow lateral; gráficos grandes caem para 300px e KPIs mantêm ajuste de fonte em uma linha.