fix(ui): corrigir exibição de posição e status no ranking

- Ajustar caixa do rank para crescer automaticamente com números grandes
- Reduzir fonte proporcionalmente para posições com 4-7 dígitos
- Exibir STATUS com valor padrão '-' quando consultoria não existe
- Ajustar responsividade para telas menores
This commit is contained in:
Frederico Castro
2025-12-17 17:22:24 -03:00
parent 15570be9c9
commit 678be6170f
2 changed files with 56 additions and 17 deletions

View File

@@ -233,7 +233,11 @@ const ConsultorCard = memo(({ consultor, highlight, selecionado, onToggleSelecio
/>
<span className="checkmark"></span>
</div>
<div className={`rank ${getRankClass(consultor.posicao || consultor.rank)}`}>#{consultor.posicao || consultor.rank}</div>
<div className={`rank ${getRankClass(consultor.posicao || consultor.rank)}`}>
<span className={`rank-number rank-digits-${String(consultor.posicao || consultor.rank).length}`}>
#{consultor.posicao || consultor.rank}
</span>
</div>
<div className="card-info">
<div className="consultant-name">
@@ -262,18 +266,14 @@ const ConsultorCard = memo(({ consultor, highlight, selecionado, onToggleSelecio
</div>
<div className="card-stats">
{consultoria && (
<>
<div className="stat" title={`Codigo: ${consultoria.codigo}`}>
<div className="stat-value">{consultoria.codigo?.replace('CONS_', '')}</div>
<div className="stat-label">Status</div>
</div>
<div className="stat" title={`${consultoria.anos_consecutivos || 0} anos consecutivos`}>
<div className="stat-value">{consultoria.anos_consecutivos || 0}</div>
<div className="stat-label">Anos Consec.</div>
</div>
</>
)}
<div className="stat" title={consultoria ? `Codigo: ${consultoria.codigo}` : 'Sem consultoria ativa'}>
<div className="stat-value">{consultoria?.codigo?.replace('CONS_', '') || '-'}</div>
<div className="stat-label">Status</div>
</div>
<div className="stat" title={`${consultoria?.anos_consecutivos || 0} anos consecutivos`}>
<div className="stat-value">{consultoria?.anos_consecutivos || 0}</div>
<div className="stat-label">Anos Consec.</div>
</div>
<div className="stat">
<div className="score-value">{pontuacaoTotal}</div>
<div className="stat-label">Score</div>