Ajusta detalhamento do componente B no frontend

frontend/src/components/ConsultorCard.jsx

@@ -1,6 +1,55 @@
 import React, { useState, useRef, useEffect } from 'react';
 import './ConsultorCard.css';
 
+const FORMULAS = {
+  componente_a: {
+    titulo: 'Coordenação CAPES',
+    base: 'CA=200 | CAJ=150 | CAJ-MP=120 | CAM=100',
+    tempo: 'CA: 10pts/ano (máx 100)\nCAJ: 8pts/ano (máx 80)\nCAJ-MP: 6pts/ano (máx 60)\nCAM: 5pts/ano (máx 50)',
+    extras: '20 pts por área adicional (máx 100)',
+    bonus: 'Bônus atualidade:\nCA=30 | CAJ=20 | CAJ-MP=15 | CAM=10',
+    retorno: '+20 pts se retornou à coordenação',
+    total: 'Base + Tempo + Extras + Bônus + Retorno\n(máx 450 pts)',
+  },
+  componente_b: {
+    titulo: 'Coordenação PPG',
+    base: '70 pts por ser coordenador de programa',
+    tempo: '5 pts por ano completo (máx 50)',
+    extras: '20 pts por programa adicional (máx 40)',
+    bonus: 'Nota CAPES do PPG (máx 20): 7=20 | 6=15 | 5=10 | 4=5 | 3=0',
+    retorno: '',
+    total: 'Base + Tempo + Extras + Nota (máx 180 pts)',
+  },
+  componente_c: {
+    titulo: 'Consultoria',
+    base: 'Ativo (recente): 150 pts | Histórico/Falecido: 100 pts',
+    tempo: '5 pts por ano de consultoria (máx 50)',
+    extras: 'Extras: não se aplicam (0)',
+    bonus: 'Continuidade: 3 anos=+5 | 5 anos=+10 | 8+ anos=+15',
+    retorno: '+15 pts se retornou à consultoria',
+    total: 'Base + Tempo + Bônus + Retorno (máx 230 pts)',
+  },
+  componente_d: {
+    titulo: 'Premiações',
+    base: 'Soma dos pontos das premiações',
+    tempo: '',
+    extras: 'Avaliação (avaliador) soma até 20 pts; demais pontos somam à base',
+    bonus: '',
+    retorno: '',
+    total: 'Pontos totais das premiações (teto 180 pts)',
+  },
+};
+
+const ScoreItemWithTooltip = ({ value, label, formula, style }) => (
+  <div className="score-item-wrapper">
+    <div className="score-item" style={style}>
+      <div className="score-item-value" style={style}>{value}</div>
+      <div className="score-item-label">{label}</div>
+    </div>
+    {formula && <div className="score-tooltip">{formula}</div>}
+  </div>
+);
+
 const ConsultorCard = ({ consultor, highlight }) => {
   const [expanded, setExpanded] = useState(false);
   const cardRef = useRef(null);
@@ -27,6 +76,19 @@ const ConsultorCard = ({ consultor, highlight }) => {
 
   const { pontuacao } = consultor;
   const { consultoria } = consultor;
+  const temPPGDetalhado = (consultor.coordenacoes_programas || []).length > 0;
+
+  const formulasB = temPPGDetalhado
+    ? FORMULAS.componente_b
+    : {
+        titulo: 'Coordenação PPG',
+        base: `Total apurado (sem detalhamento): ${pontuacao.componente_b.total} pts`,
+        tempo: '',
+        extras: '',
+        bonus: '',
+        retorno: '',
+        total: `Total ${pontuacao.componente_b.total} pts`,
+      };
 
   return (
     <div ref={cardRef} className={`ranking-card ${expanded ? 'expanded' : ''} ${highlight ? 'highlight' : ''}`} onClick={() => setExpanded(!expanded)}>
@@ -77,33 +139,36 @@ const ConsultorCard = ({ consultor, highlight }) => {
             <div className="detail-section">
               <h4>Pontuação Total</h4>
               <div className="score-breakdown-total">
-                <div className="score-item">
-                  <div className="score-item-value" style={{ color: pontuacao.componente_a.total > 0 ? 'var(--accent-2)' : 'var(--muted)' }}>
-                    {pontuacao.componente_a.total}
+                <ScoreItemWithTooltip
+                  value={pontuacao.componente_a.total}
+                  label="COMP A"
+                  formula={`Coordenação CAPES\n${FORMULAS.componente_a.total}`}
+                  style={{ color: pontuacao.componente_a.total > 0 ? 'var(--accent-2)' : 'var(--muted)' }}
+                />
+                <ScoreItemWithTooltip
+                  value={pontuacao.componente_b.total}
+                  label="COMP B"
+                  formula={`Coordenação PPG\n${FORMULAS.componente_b.total}`}
+                  style={{ color: pontuacao.componente_b.total > 0 ? 'var(--success)' : 'var(--muted)' }}
+                />
+                <ScoreItemWithTooltip
+                  value={pontuacao.componente_c.total}
+                  label="COMP C"
+                  formula={`Consultoria\n${FORMULAS.componente_c.total}`}
+                  style={{ color: pontuacao.componente_c.total > 0 ? 'var(--gold)' : 'var(--muted)' }}
+                />
+                <ScoreItemWithTooltip
+                  value={pontuacao.componente_d.total}
+                  label="COMP D"
+                  formula={`Premiações\n${FORMULAS.componente_d.total}`}
+                  style={{ color: pontuacao.componente_d.total > 0 ? 'var(--bronze)' : 'var(--muted)' }}
+                />
+                <div className="score-item-wrapper">
+                  <div className="score-item score-total">
+                    <div className="score-item-value">{pontuacao.pontuacao_total}</div>
+                    <div className="score-item-label">TOTAL</div>
                   </div>
-                  <div className="score-item-label">COMP A</div>
-                </div>
-                <div className="score-item">
-                  <div className="score-item-value" style={{ color: pontuacao.componente_b.total > 0 ? 'var(--success)' : 'var(--muted)' }}>
-                    {pontuacao.componente_b.total}
-                  </div>
-                  <div className="score-item-label">COMP B</div>
-                </div>
-                <div className="score-item">
-                  <div className="score-item-value" style={{ color: pontuacao.componente_c.total > 0 ? 'var(--gold)' : 'var(--muted)' }}>
-                    {pontuacao.componente_c.total}
-                  </div>
-                  <div className="score-item-label">COMP C</div>
-                </div>
-                <div className="score-item">
-                  <div className="score-item-value" style={{ color: pontuacao.componente_d.total > 0 ? 'var(--bronze)' : 'var(--muted)' }}>
-                    {pontuacao.componente_d.total}
-                  </div>
-                  <div className="score-item-label">COMP D</div>
-                </div>
-                <div className="score-item score-total">
-                  <div className="score-item-value">{pontuacao.pontuacao_total}</div>
-                  <div className="score-item-label">TOTAL</div>
+                  <div className="score-tooltip">Comp A + Comp B + Comp C + Comp D</div>
                 </div>
               </div>
             </div>
@@ -112,24 +177,28 @@ const ConsultorCard = ({ consultor, highlight }) => {
               titulo="A - Coordenação CAPES"
               componente={pontuacao.componente_a}
               cor="var(--accent-2)"
+              formulas={FORMULAS.componente_a}
             />
 
             <ComponenteDetalhes
               titulo="B - Coordenação PPG"
               componente={pontuacao.componente_b}
               cor="var(--success)"
+              formulas={formulasB}
             />
 
             <ComponenteDetalhes
               titulo="C - Consultoria"
               componente={pontuacao.componente_c}
               cor="var(--gold)"
+              formulas={FORMULAS.componente_c}
             />
 
             <ComponenteDetalhes
               titulo="D - Premiações"
               componente={pontuacao.componente_d}
               cor="var(--bronze)"
+              formulas={FORMULAS.componente_d}
             />
           </div>
 
@@ -188,35 +257,23 @@ const ConsultorCard = ({ consultor, highlight }) => {
   );
 };
 
-const ComponenteDetalhes = ({ titulo, componente, cor }) => (
+const ComponenteDetalhes = ({ titulo, componente, cor, formulas }) => (
   <div className="detail-section">
     <h4 style={{ color: cor }}>{titulo}</h4>
     <div className="score-breakdown">
-      <div className="score-item">
-        <div className="score-item-value">{componente.base}</div>
-        <div className="score-item-label">BASE</div>
-      </div>
-      <div className="score-item">
-        <div className="score-item-value">{componente.tempo}</div>
-        <div className="score-item-label">TEMPO</div>
-      </div>
-      <div className="score-item">
-        <div className="score-item-value">{componente.extras}</div>
-        <div className="score-item-label">EXTRAS</div>
-      </div>
-      <div className="score-item">
-        <div className="score-item-value">{componente.bonus}</div>
-        <div className="score-item-label">BÔNUS</div>
-      </div>
+      <ScoreItemWithTooltip value={componente.base} label="BASE" formula={formulas?.base} />
+      <ScoreItemWithTooltip value={componente.tempo} label="TEMPO" formula={formulas?.tempo} />
+      <ScoreItemWithTooltip value={componente.extras} label="EXTRAS" formula={formulas?.extras} />
+      <ScoreItemWithTooltip value={componente.bonus} label="BÔNUS" formula={formulas?.bonus} />
       {componente.retorno > 0 && (
-        <div className="score-item">
-          <div className="score-item-value">{componente.retorno}</div>
-          <div className="score-item-label">RETORNO</div>
-        </div>
+        <ScoreItemWithTooltip value={componente.retorno} label="RETORNO" formula={formulas?.retorno} />
       )}
-      <div className="score-item score-total">
-        <div className="score-item-value">{componente.total}</div>
-        <div className="score-item-label">TOTAL</div>
+      <div className="score-item-wrapper">
+        <div className="score-item score-total">
+          <div className="score-item-value">{componente.total}</div>
+          <div className="score-item-label">TOTAL</div>
+        </div>
+        {formulas?.total && <div className="score-tooltip">{formulas.total}</div>}
       </div>
     </div>
   </div>