feat(ui): atualizar painel de criterios com todos os blocos do documento V1

- Reorganizar layout em 3 linhas com 5 blocos (A, B, C, D, E)
- Bloco A: Coordenacao CAPES (CA, CAJ, CAJ_MP, CAM)
- Bloco B: Consultoria (ATIVO, HIST, FALECIDO)
- Bloco C: Premiacoes, Avaliacoes, Inscricoes, Orientacoes, Bancas
- Bloco D: Indicadores (BOL_BPQ, PROJ, EVENTO, IDIOMA, TITULACAO)
- Bloco E: Coord. PPG (reservado para V2)
- Atualizar valores Base/Teto conforme documento oficial
- Adicionar logo CAPES no header
- Melhorar alinhamento de colunas nas tabelas
- Ajustar tamanhos de fonte para melhor legibilidade
This commit is contained in:
Frederico Castro
2025-12-20 06:02:35 -03:00
parent fe763d83c6
commit 7ba2c2be9d
2 changed files with 381 additions and 146 deletions

View File

@@ -22,11 +22,29 @@
z-index: 1; z-index: 1;
} }
.header-title-row {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.35rem;
}
.header-logo {
width: 60px;
height: 60px;
object-fit: contain;
border-radius: 10px;
background: white;
padding: 6px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255,255,255,0.1);
flex-shrink: 0;
}
.header h1 { .header h1 {
font-size: clamp(1.9rem, 3vw, 2.5rem); font-size: clamp(1.9rem, 3vw, 2.5rem);
font-weight: 700; font-weight: 700;
letter-spacing: -0.5px; letter-spacing: -0.5px;
margin-bottom: 0.35rem; margin-bottom: 0;
background: linear-gradient(135deg, #fff 0%, #a5b4fc 50%, #60a5fa 100%); background: linear-gradient(135deg, #fff 0%, #a5b4fc 50%, #60a5fa 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
@@ -64,15 +82,15 @@
background: rgba(79,70,229,0.1); background: rgba(79,70,229,0.1);
border: 1px solid rgba(79,70,229,0.3); border: 1px solid rgba(79,70,229,0.3);
border-radius: 12px; border-radius: 12px;
padding: 1rem; padding: 0.875rem;
margin-top: 1.25rem; margin-top: 1.25rem;
} }
.criteria-box h3 { .criteria-box h3 {
color: var(--accent-2); color: var(--accent-2);
font-size: 0.95rem; font-size: 0.9rem;
font-weight: 600; font-weight: 600;
margin-bottom: 1rem; margin-bottom: 0.875rem;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1.5px; letter-spacing: 1.5px;
@@ -84,7 +102,7 @@
.criteria-box h3::after { .criteria-box h3::after {
content: ""; content: "";
position: absolute; position: absolute;
bottom: -6px; bottom: -5px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: 60px; width: 60px;
@@ -92,10 +110,14 @@
background: linear-gradient(90deg, transparent, var(--accent-2), transparent); background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
} }
.criteria-grid { .criteria-row {
display: grid; display: flex;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.6rem;
gap: 1rem; margin-bottom: 0.6rem;
}
.criteria-row:last-child {
margin-bottom: 0;
} }
.criteria-section { .criteria-section {
@@ -103,11 +125,15 @@
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px; border-radius: 10px;
padding: 1rem; padding: 0.5rem 0.5rem 0.5rem 0.4rem;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease; flex: 1;
}
.criteria-section.wide {
flex: 1 1 100%;
} }
.criteria-section::before { .criteria-section::before {
@@ -116,123 +142,78 @@
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 3px; height: 2px;
border-radius: 14px 14px 0 0; border-radius: 10px 10px 0 0;
} }
.criteria-section:hover { .section-header {
transform: translateY(-2px); display: flex;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); align-items: center;
} gap: 0.4rem;
margin-bottom: 0.4rem;
.criteria-section.bloco-a { flex-wrap: nowrap;
border-color: rgba(99, 102, 241, 0.3);
background: linear-gradient(180deg, rgba(99, 102, 241, 0.08) 0%, rgba(255,255,255,0.02) 100%);
box-shadow: 0 4px 20px rgba(99, 102, 241, 0.1), inset 0 1px 0 rgba(255,255,255,0.05);
}
.criteria-section.bloco-a::before {
background: linear-gradient(90deg, #6366f1, #818cf8, #6366f1);
}
.criteria-section.bloco-a h4 {
color: #a5b4fc;
}
.criteria-section.bloco-c {
border-color: rgba(234, 179, 8, 0.3);
background: linear-gradient(180deg, rgba(234, 179, 8, 0.08) 0%, rgba(255,255,255,0.02) 100%);
box-shadow: 0 4px 20px rgba(234, 179, 8, 0.1), inset 0 1px 0 rgba(255,255,255,0.05);
}
.criteria-section.bloco-c::before {
background: linear-gradient(90deg, #eab308, #fbbf24, #eab308);
}
.criteria-section.bloco-c h4 {
color: #fcd34d;
}
.criteria-section.bloco-c .pts-value {
color: #fcd34d !important;
}
.criteria-section.bloco-d {
border-color: rgba(217, 119, 6, 0.3);
background: linear-gradient(180deg, rgba(217, 119, 6, 0.08) 0%, rgba(255,255,255,0.02) 100%);
box-shadow: 0 4px 20px rgba(217, 119, 6, 0.1), inset 0 1px 0 rgba(255,255,255,0.05);
}
.criteria-section.bloco-d::before {
background: linear-gradient(90deg, #d97706, #f59e0b, #d97706);
}
.criteria-section.bloco-d h4 {
color: #fbbf24;
}
.criteria-section.bloco-d .pts-value {
color: #fbbf24 !important;
} }
.criteria-section h4 { .criteria-section h4 {
color: var(--accent-2); color: var(--accent-2);
font-size: 0.85rem; font-size: 0.7rem;
margin-bottom: 0.25rem; margin: 0;
letter-spacing: 0.4px; letter-spacing: 0.2px;
display: inline; white-space: nowrap;
} }
.max-pts { .max-pts {
display: inline-block; padding: 0.1rem 0.35rem;
margin-left: 0.5rem; border-radius: 4px;
padding: 0.2rem 0.6rem; font-size: 0.55rem;
border-radius: 6px;
font-size: 0.7rem;
font-weight: 600; font-weight: 600;
letter-spacing: 0.3px; letter-spacing: 0.2px;
white-space: nowrap;
flex-shrink: 0;
margin-left: auto;
} }
.bloco-a .max-pts { .table-columns {
background: rgba(99, 102, 241, 0.25); display: flex;
color: #c7d2fe; gap: 0.5rem;
border: 1px solid rgba(99, 102, 241, 0.4);
} }
.bloco-c .max-pts { .table-columns .criteria-table {
background: rgba(234, 179, 8, 0.2); flex: 1;
color: #fef08a;
border: 1px solid rgba(234, 179, 8, 0.4);
}
.bloco-d .max-pts {
background: rgba(217, 119, 6, 0.2);
color: #fed7aa;
border: 1px solid rgba(217, 119, 6, 0.4);
} }
.criteria-table { .criteria-table {
width: 100%; width: 100%;
margin-top: 0.6rem; margin-top: 0.25rem;
font-size: 0.75rem; font-size: 0.65rem;
border-collapse: collapse; border-collapse: collapse;
} }
.criteria-table.compact {
font-size: 0.6rem;
}
.criteria-table th { .criteria-table th {
text-align: left; text-align: center;
color: var(--silver); color: var(--silver);
font-weight: 500; font-weight: 500;
padding: 0.3rem 0.4rem; padding: 0.15rem 0.2rem;
border-bottom: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1);
font-size: 0.7rem; font-size: 0.55rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.3px;
white-space: nowrap;
}
.criteria-table th:first-child {
text-align: left;
} }
.criteria-table td { .criteria-table td {
padding: 0.35rem 0.4rem; padding: 0.15rem 0.2rem;
color: var(--muted); color: var(--muted);
border-bottom: 1px dashed rgba(255,255,255,0.05); border-bottom: 1px dashed rgba(255,255,255,0.05);
white-space: nowrap;
} }
.criteria-table tr:last-child td { .criteria-table tr:last-child td {
@@ -244,24 +225,175 @@
font-weight: 500; font-weight: 500;
} }
.pts-value { .criteria-table td:not(:first-child) {
text-align: right; text-align: center;
color: var(--accent-2) !important;
font-weight: 400 !important;
} }
.criteria-note { .criteria-note {
margin-top: 0.5rem; margin-top: 0.3rem;
padding-top: 0.4rem; padding-top: 0.25rem;
border-top: 1px dashed rgba(255,255,255,0.1); border-top: 1px dashed rgba(255,255,255,0.1);
font-size: 0.7rem; font-size: 0.55rem;
color: var(--muted); color: var(--muted);
text-align: center; text-align: center;
font-style: italic; font-style: italic;
} }
@media (max-width: 768px) { /* Bloco A */
.criteria-grid { .criteria-section.bloco-a {
grid-template-columns: 1fr; border-color: rgba(99, 102, 241, 0.3);
background: linear-gradient(180deg, rgba(99, 102, 241, 0.08) 0%, rgba(255,255,255,0.02) 100%);
}
.criteria-section.bloco-a::before {
background: linear-gradient(90deg, #6366f1, #818cf8, #6366f1);
}
.criteria-section.bloco-a h4 {
color: #a5b4fc;
}
.bloco-a .max-pts {
background: rgba(99, 102, 241, 0.25);
color: #c7d2fe;
border: 1px solid rgba(99, 102, 241, 0.4);
}
.bloco-a .criteria-table td:not(:first-child) {
color: #a5b4fc;
}
/* Bloco B */
.criteria-section.bloco-b {
border-color: rgba(234, 179, 8, 0.3);
background: linear-gradient(180deg, rgba(234, 179, 8, 0.08) 0%, rgba(255,255,255,0.02) 100%);
}
.criteria-section.bloco-b::before {
background: linear-gradient(90deg, #eab308, #fbbf24, #eab308);
}
.criteria-section.bloco-b h4 {
color: #fcd34d;
}
.bloco-b .max-pts {
background: rgba(234, 179, 8, 0.2);
color: #fef08a;
border: 1px solid rgba(234, 179, 8, 0.4);
}
.bloco-b .criteria-table td:not(:first-child) {
color: #fcd34d;
}
/* Bloco C */
.criteria-section.bloco-c {
border-color: rgba(16, 185, 129, 0.3);
background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, rgba(255,255,255,0.02) 100%);
}
.criteria-section.bloco-c::before {
background: linear-gradient(90deg, #10b981, #34d399, #10b981);
}
.criteria-section.bloco-c h4 {
color: #6ee7b7;
}
.bloco-c .max-pts {
background: rgba(16, 185, 129, 0.2);
color: #a7f3d0;
border: 1px solid rgba(16, 185, 129, 0.4);
}
.bloco-c .criteria-table td:not(:first-child) {
color: #6ee7b7;
}
/* Bloco D */
.criteria-section.bloco-d {
border-color: rgba(217, 119, 6, 0.3);
background: linear-gradient(180deg, rgba(217, 119, 6, 0.08) 0%, rgba(255,255,255,0.02) 100%);
}
.criteria-section.bloco-d::before {
background: linear-gradient(90deg, #d97706, #f59e0b, #d97706);
}
.criteria-section.bloco-d h4 {
color: #fbbf24;
}
.bloco-d .max-pts {
background: rgba(217, 119, 6, 0.2);
color: #fed7aa;
border: 1px solid rgba(217, 119, 6, 0.4);
}
.bloco-d .criteria-table td:not(:first-child) {
color: #fbbf24;
}
/* Bloco E */
.criteria-section.bloco-e {
border-color: rgba(139, 92, 246, 0.3);
background: linear-gradient(180deg, rgba(139, 92, 246, 0.08) 0%, rgba(255,255,255,0.02) 100%);
}
.criteria-section.bloco-e::before {
background: linear-gradient(90deg, #8b5cf6, #a78bfa, #8b5cf6);
}
.criteria-section.bloco-e h4 {
color: #c4b5fd;
}
.bloco-e .max-pts {
background: rgba(139, 92, 246, 0.2);
color: #ddd6fe;
border: 1px solid rgba(139, 92, 246, 0.4);
}
.bloco-e .criteria-table td:not(:first-child) {
color: #c4b5fd;
}
@media (max-width: 900px) {
.criteria-row {
flex-wrap: wrap;
}
.criteria-section {
flex: 1 1 calc(50% - 0.3rem);
min-width: calc(50% - 0.3rem);
}
.criteria-section.wide {
flex: 1 1 100%;
}
.table-columns {
flex-wrap: wrap;
}
.table-columns .criteria-table {
flex: 1 1 100%;
}
}
@media (max-width: 600px) {
.criteria-section {
flex: 1 1 100%;
}
.header-title-row {
gap: 0.75rem;
}
.header-logo {
width: 48px;
height: 48px;
padding: 4px;
} }
} }

View File

@@ -10,68 +10,171 @@ const Header = ({ total }) => {
return ( return (
<header className="header"> <header className="header">
<div className="header-content"> <div className="header-content">
<div className="header-title-row">
<img src="/logo_capes.jpg" alt="CAPES" className="header-logo" />
<h1>Ranking de Consultores CAPES</h1> <h1>Ranking de Consultores CAPES</h1>
</div>
<p className="subtitle"> <p className="subtitle">
Sistema de pontuacao baseado nos Criterios V2 | Ranking ATUACAPES V1.0 | Dezembro 2025
3 Blocos: Coordenacao CAPES + Consultoria + Premiacoes/Avaliacoes
</p> </p>
<div className="meta"> <div className="meta">
Gerado em {dataGeracao} | Total: {totalFormatado} consultores Gerado em {dataGeracao} | Total: {totalFormatado} consultores
</div> </div>
<div className="criteria-box"> <div className="criteria-box">
<h3>Blocos de Pontuacao</h3> <h3>Criterios de Pontuacao</h3>
<div className="criteria-grid">
<div className="criteria-row">
<div className="criteria-section bloco-a"> <div className="criteria-section bloco-a">
<div className="section-header">
<h4>A - Coordenacao CAPES</h4> <h4>A - Coordenacao CAPES</h4>
<span className="max-pts">max 450 pts</span> <span className="max-pts">max 450</span>
</div>
<table className="criteria-table"> <table className="criteria-table">
<thead> <thead>
<tr> <tr><th>Cod</th><th>Base</th><th>Teto</th><th>Tempo</th><th>At</th><th>Ret</th></tr>
<th>Codigo</th>
<th>Base</th>
<th>Tempo</th>
<th>Bonus</th>
</tr>
</thead> </thead>
<tbody> <tbody>
<tr><td>CA</td><td>200</td><td>10/ano (max 100)</td><td>30</td></tr> <tr><td>CA</td><td>200</td><td>450</td><td>10/a</td><td>30</td><td>20</td></tr>
<tr><td>CAJ</td><td>150</td><td>8/ano (max 80)</td><td>20</td></tr> <tr><td>CAJ</td><td>150</td><td>370</td><td>8/a</td><td>20</td><td>15</td></tr>
<tr><td>CAJ_MP</td><td>120</td><td>6/ano (max 60)</td><td>15</td></tr> <tr><td>CAJ_MP</td><td>120</td><td>315</td><td>6/a</td><td>15</td><td>10</td></tr>
<tr><td>CAM</td><td>100</td><td>5/ano (max 50)</td><td>20</td></tr> <tr><td>CAM</td><td>100</td><td>280</td><td>5/a</td><td>20</td><td>10</td></tr>
</tbody> </tbody>
</table> </table>
<div className="criteria-note">+ Retorno (20)</div> </div>
<div className="criteria-section bloco-b">
<div className="section-header">
<h4>B - Consultoria</h4>
<span className="max-pts">max 230</span>
</div>
<table className="criteria-table">
<thead>
<tr><th>Cod</th><th>Base</th><th>Teto</th><th>Tempo</th><th>Bonus</th></tr>
</thead>
<tbody>
<tr><td>ATIVO</td><td>150</td><td>230</td><td>5/a</td><td>At+Ct+Rt</td></tr>
<tr><td>HIST</td><td>100</td><td>230</td><td>5/a</td><td>Ct+Rt</td></tr>
<tr><td>FALEC</td><td>100</td><td>230</td><td>5/a</td><td>Ct</td></tr>
</tbody>
</table>
<div className="criteria-note">At=20 Ct=20 Rt=15-20 | Teto tempo: 50</div>
</div>
<div className="criteria-section bloco-e">
<div className="section-header">
<h4>E - Coord. PPG</h4>
<span className="max-pts">V2</span>
</div>
<table className="criteria-table">
<thead>
<tr><th>Cod</th><th>Base</th><th>Teto</th></tr>
</thead>
<tbody>
<tr><td>PPG_COORD</td><td>0</td><td>0</td></tr>
</tbody>
</table>
<div className="criteria-note">Dados incompletos no V1</div>
</div>
</div>
<div className="criteria-row">
<div className="criteria-section bloco-c wide">
<div className="section-header">
<h4>C - Premiacoes, Avaliacoes, Inscricoes</h4>
<span className="max-pts">max 300</span>
</div>
<div className="table-columns">
<table className="criteria-table">
<thead>
<tr><th>Premiacoes</th><th>Base</th><th>Teto</th></tr>
</thead>
<tbody>
<tr><td>PREMIACAO_GP</td><td>100</td><td>300</td></tr>
<tr><td>PREMIACAO</td><td>50</td><td>150</td></tr>
<tr><td>MENCAO</td><td>30</td><td>90</td></tr>
</tbody>
</table>
<table className="criteria-table">
<thead>
<tr><th>Comissoes</th><th>Base</th><th>Teto</th></tr>
</thead>
<tbody>
<tr><td>COORD_GP</td><td>50</td><td>120</td></tr>
<tr><td>COORD</td><td>40</td><td>100</td></tr>
<tr><td>AVAL_GP</td><td>40</td><td>80</td></tr>
<tr><td>AVAL</td><td>30</td><td>60</td></tr>
</tbody>
</table>
<table className="criteria-table">
<thead>
<tr><th>Inscricoes</th><th>Base</th><th>Teto</th></tr>
</thead>
<tbody>
<tr><td>INSC_INST</td><td>20</td><td>50</td></tr>
<tr><td>INSC_AUTOR</td><td>10</td><td>20</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<div className="criteria-row">
<div className="criteria-section bloco-c">
<div className="section-header">
<h4>C - Orientacoes</h4>
<span className="max-pts">selos</span>
</div>
<div className="table-columns">
<table className="criteria-table compact">
<thead><tr><th>Orientacao</th><th>B</th><th>T</th></tr></thead>
<tbody>
<tr><td>POS_DOC</td><td>0</td><td>0</td></tr>
<tr><td>TESE</td><td>0</td><td>0</td></tr>
<tr><td>DISS</td><td>0</td><td>0</td></tr>
</tbody>
</table>
<table className="criteria-table compact">
<thead><tr><th>Co-Orient</th><th>B</th><th>T</th></tr></thead>
<tbody>
<tr><td>POS_DOC</td><td>0</td><td>0</td></tr>
<tr><td>TESE</td><td>0</td><td>0</td></tr>
<tr><td>DISS</td><td>0</td><td>0</td></tr>
</tbody>
</table>
</div>
<div className="criteria-note">+versoes _PREM | Selos no V1</div>
</div> </div>
<div className="criteria-section bloco-c"> <div className="criteria-section bloco-c">
<h4>C - Consultoria</h4> <div className="section-header">
<span className="max-pts">max 230 pts</span> <h4>C - Bancas</h4>
<table className="criteria-table"> <span className="max-pts">selos</span>
</div>
<table className="criteria-table compact">
<thead><tr><th>Membro Banca</th><th>Base</th><th>Teto</th></tr></thead>
<tbody> <tbody>
<tr><td>CONS_ATIVO</td><td className="pts-value">150 pts</td></tr> <tr><td>MB_POS_DOC</td><td>0</td><td>0</td></tr>
<tr><td>CONS_HIST</td><td className="pts-value">100 pts</td></tr> <tr><td>MB_TESE</td><td>0</td><td>0</td></tr>
<tr><td>CONS_FALECIDO</td><td className="pts-value">100 pts</td></tr> <tr><td>MB_DISS</td><td>0</td><td>0</td></tr>
<tr><td>Tempo</td><td className="pts-value">5 pts/ano (max 50)</td></tr>
<tr><td>Continuidade 3a</td><td className="pts-value">+5 pts</td></tr>
<tr><td>Continuidade 5a</td><td className="pts-value">+10 pts</td></tr>
<tr><td>Continuidade 8a+</td><td className="pts-value">+15 pts</td></tr>
<tr><td>Retorno</td><td className="pts-value">+15 pts</td></tr>
</tbody> </tbody>
</table> </table>
<div className="criteria-note">+versoes _PREM | Selos no V1</div>
</div> </div>
<div className="criteria-section bloco-d"> <div className="criteria-section bloco-d">
<h4>D - Premiacoes e Avaliacoes</h4> <div className="section-header">
<span className="max-pts">max 180 pts</span> <h4>D - Indicadores</h4>
<table className="criteria-table"> <span className="max-pts">selos</span>
</div>
<table className="criteria-table compact">
<thead><tr><th>Codigo</th><th>Base</th><th>Teto</th></tr></thead>
<tbody> <tbody>
<tr><td>PREMIACAO (GP)</td><td className="pts-value">150 pts (max 180)</td></tr> <tr><td>BOL_BPQ</td><td>30</td><td>60</td></tr>
<tr><td>PREMIACAO_GP</td><td className="pts-value">30 pts (max 60)</td></tr> <tr><td>PROJ</td><td>10</td><td>30</td></tr>
<tr><td>MENCAO</td><td className="pts-value">10 pts (max 20)</td></tr> <tr><td>EVENTO</td><td>1</td><td>5</td></tr>
<tr><td>INSC_INST</td><td className="pts-value">30 pts (max 60)</td></tr> <tr><td>IDIOMA</td><td>0</td><td>0</td></tr>
<tr><td>AVAL_COMIS_GP</td><td className="pts-value">50 pts (max 100)</td></tr> <tr><td>TITULACAO</td><td>0</td><td>0</td></tr>
<tr><td>COORD_COMIS_GP</td><td className="pts-value">60 pts (max 120)</td></tr>
</tbody> </tbody>
</table> </table>
</div> </div>