From 9576e55289a138110825c7ff86580e53dad762a0 Mon Sep 17 00:00:00 2001 From: Frederico Castro Date: Tue, 23 Dec 2025 23:05:14 -0300 Subject: [PATCH] feat(frontend): adicionar modais detalhados para cada bloco de criterios - Criar BlocoCriteriosModal com dados completos da planilha oficial - Incluir formula, base, teto, tempo, bonus e recorrencias por bloco - Tornar blocos clicaveis para abrir modal com informacoes detalhadas - Bloco A: Coordenacao CAPES com bonus atualidade/retorno - Bloco B: Consultoria com bonus continuidade/retorno - Bloco C: Premiacoes, Comissoes, Inscricoes com recorrencias - Bloco D: Indicadores e selos (idioma, titulacao) - Bloco E: Explicacao do indicador PPG_COORD --- .../src/components/BlocoCriteriosModal.css | 476 ++++++++++++++++++ .../src/components/BlocoCriteriosModal.jsx | 289 +++++++++++ frontend/src/components/Header.css | 15 + frontend/src/components/Header.jsx | 25 +- 4 files changed, 797 insertions(+), 8 deletions(-) create mode 100644 frontend/src/components/BlocoCriteriosModal.css create mode 100644 frontend/src/components/BlocoCriteriosModal.jsx diff --git a/frontend/src/components/BlocoCriteriosModal.css b/frontend/src/components/BlocoCriteriosModal.css new file mode 100644 index 0000000..7db65c8 --- /dev/null +++ b/frontend/src/components/BlocoCriteriosModal.css @@ -0,0 +1,476 @@ +.bloco-modal-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.75); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; + padding: 1rem; +} + +.bloco-modal { + background: linear-gradient(145deg, rgba(30, 30, 46, 0.98), rgba(24, 24, 36, 0.98)); + border-radius: 16px; + width: 100%; + max-width: 680px; + max-height: 85vh; + overflow: hidden; + display: flex; + flex-direction: column; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.bloco-modal-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 1.25rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + position: relative; +} + +.bloco-modal-header::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; +} + +.bloco-modal.bloco-a .bloco-modal-header::before { + background: linear-gradient(90deg, #6366f1, #818cf8, #6366f1); +} + +.bloco-modal.bloco-b .bloco-modal-header::before { + background: linear-gradient(90deg, #eab308, #fbbf24, #eab308); +} + +.bloco-modal.bloco-c .bloco-modal-header::before { + background: linear-gradient(90deg, #10b981, #34d399, #10b981); +} + +.bloco-modal.bloco-d .bloco-modal-header::before { + background: linear-gradient(90deg, #d97706, #f59e0b, #d97706); +} + +.bloco-modal.bloco-e .bloco-modal-header::before { + background: linear-gradient(90deg, #8b5cf6, #a78bfa, #8b5cf6); +} + +.bloco-modal-titulo { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.bloco-letra { + width: 32px; + height: 32px; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 1.1rem; +} + +.bloco-modal.bloco-a .bloco-letra { + background: rgba(99, 102, 241, 0.25); + color: #a5b4fc; + border: 1px solid rgba(99, 102, 241, 0.4); +} + +.bloco-modal.bloco-b .bloco-letra { + background: rgba(234, 179, 8, 0.25); + color: #fcd34d; + border: 1px solid rgba(234, 179, 8, 0.4); +} + +.bloco-modal.bloco-c .bloco-letra { + background: rgba(16, 185, 129, 0.25); + color: #6ee7b7; + border: 1px solid rgba(16, 185, 129, 0.4); +} + +.bloco-modal.bloco-d .bloco-letra { + background: rgba(217, 119, 6, 0.25); + color: #fbbf24; + border: 1px solid rgba(217, 119, 6, 0.4); +} + +.bloco-modal.bloco-e .bloco-letra { + background: rgba(139, 92, 246, 0.25); + color: #c4b5fd; + border: 1px solid rgba(139, 92, 246, 0.4); +} + +.bloco-nome { + font-size: 1.1rem; + font-weight: 600; + color: #fff; +} + +.bloco-modal-close { + background: rgba(255, 255, 255, 0.1); + border: none; + color: var(--silver); + width: 32px; + height: 32px; + border-radius: 8px; + cursor: pointer; + font-size: 1rem; + transition: all 0.2s; +} + +.bloco-modal-close:hover { + background: rgba(239, 68, 68, 0.3); + color: #fca5a5; +} + +.bloco-modal-body { + padding: 1.25rem; + overflow-y: auto; + flex: 1; +} + +.bloco-descricao { + color: var(--silver); + font-size: 0.9rem; + margin: 0 0 1rem 0; + line-height: 1.5; +} + +.bloco-formula { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1rem; + background: rgba(255, 255, 255, 0.05); + border-radius: 8px; + margin-bottom: 1rem; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.formula-label { + color: var(--muted); + font-size: 0.8rem; + font-weight: 500; +} + +.bloco-formula code { + color: #60a5fa; + font-family: 'JetBrains Mono', 'Fira Code', monospace; + font-size: 0.85rem; + background: rgba(96, 165, 250, 0.1); + padding: 0.2rem 0.5rem; + border-radius: 4px; +} + +.bloco-nota-destaque { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1rem; + background: rgba(234, 179, 8, 0.15); + border: 1px solid rgba(234, 179, 8, 0.3); + border-radius: 8px; + margin-bottom: 1rem; + color: #fcd34d; + font-size: 0.9rem; + font-weight: 500; +} + +.nota-icon { + font-size: 1rem; +} + +.bloco-secao { + margin-bottom: 1.25rem; +} + +.bloco-secao h4 { + color: var(--accent-2); + font-size: 0.85rem; + font-weight: 600; + margin: 0 0 0.75rem 0; + text-transform: uppercase; + letter-spacing: 0.5px; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.bloco-secao h4::before { + content: ""; + width: 3px; + height: 14px; + border-radius: 2px; +} + +.bloco-modal.bloco-a .bloco-secao h4::before { + background: #6366f1; +} + +.bloco-modal.bloco-b .bloco-secao h4::before { + background: #eab308; +} + +.bloco-modal.bloco-c .bloco-secao h4::before { + background: #10b981; +} + +.bloco-modal.bloco-d .bloco-secao h4::before { + background: #d97706; +} + +.bloco-modal.bloco-e .bloco-secao h4::before { + background: #8b5cf6; +} + +.bloco-tabela { + width: 100%; + border-collapse: collapse; + font-size: 0.8rem; +} + +.bloco-tabela th { + text-align: left; + padding: 0.5rem 0.75rem; + background: rgba(255, 255, 255, 0.05); + color: var(--silver); + font-weight: 500; + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.3px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.bloco-tabela td { + padding: 0.5rem 0.75rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.05); + color: var(--muted); +} + +.bloco-tabela tr:last-child td { + border-bottom: none; +} + +.bloco-tabela td.cod { + color: var(--silver); + font-weight: 600; + font-family: 'JetBrains Mono', monospace; + font-size: 0.75rem; +} + +.bloco-tabela td.num { + text-align: center; + font-weight: 600; +} + +.bloco-modal.bloco-a .bloco-tabela td.num { + color: #a5b4fc; +} + +.bloco-modal.bloco-b .bloco-tabela td.num { + color: #fcd34d; +} + +.bloco-modal.bloco-c .bloco-tabela td.num { + color: #6ee7b7; +} + +.bloco-modal.bloco-d .bloco-tabela td.num { + color: #fbbf24; +} + +.bloco-modal.bloco-e .bloco-tabela td.num { + color: #c4b5fd; +} + +.bloco-tabela td.tempo, +.bloco-tabela td.rec { + font-size: 0.75rem; + color: var(--silver); +} + +.bonus-lista { + display: flex; + flex-direction: column; + gap: 0.75rem; + margin-bottom: 1rem; +} + +.bonus-item { + padding: 0.75rem; + background: rgba(255, 255, 255, 0.03); + border-radius: 8px; + border: 1px solid rgba(255, 255, 255, 0.08); +} + +.bonus-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0.5rem; +} + +.bonus-tipo { + font-weight: 600; + color: var(--accent-2); + font-size: 0.85rem; +} + +.bonus-valor { + background: rgba(16, 185, 129, 0.2); + color: #6ee7b7; + padding: 0.15rem 0.5rem; + border-radius: 4px; + font-size: 0.75rem; + font-weight: 600; +} + +.bonus-descricao { + color: var(--silver); + font-size: 0.8rem; + margin: 0 0 0.35rem 0; + line-height: 1.4; +} + +.bonus-condicao { + color: var(--muted); + font-size: 0.75rem; + margin: 0; +} + +.bonus-condicao strong { + color: var(--silver); +} + +.bonus-valores { + margin-top: 0.75rem; +} + +.selos-grid { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.selo-grupo { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 0.75rem; + background: rgba(255, 255, 255, 0.03); + border-radius: 6px; +} + +.selo-grupo-nome { + color: var(--silver); + font-size: 0.8rem; + font-weight: 500; + min-width: 100px; +} + +.selo-itens { + color: var(--muted); + font-size: 0.8rem; +} + +.selo-item-detalhe { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.4rem 0.75rem; + background: rgba(255, 255, 255, 0.03); + border-radius: 6px; +} + +.selo-cod { + font-family: 'JetBrains Mono', monospace; + font-size: 0.7rem; + color: var(--silver); + background: rgba(255, 255, 255, 0.08); + padding: 0.15rem 0.4rem; + border-radius: 4px; +} + +.selo-nome { + color: var(--silver); + font-size: 0.8rem; +} + +.selo-obs { + color: var(--muted); + font-size: 0.75rem; + font-style: italic; +} + +.detalhes-lista { + margin: 0; + padding-left: 1.25rem; + color: var(--muted); + font-size: 0.85rem; + line-height: 1.6; +} + +.detalhes-lista li { + margin-bottom: 0.35rem; +} + +.bloco-observacoes { + display: flex; + align-items: flex-start; + gap: 0.5rem; + padding: 0.75rem 1rem; + background: rgba(96, 165, 250, 0.1); + border: 1px solid rgba(96, 165, 250, 0.2); + border-radius: 8px; + margin-top: 1rem; +} + +.obs-icon { + font-size: 0.9rem; + flex-shrink: 0; +} + +.bloco-observacoes span:last-child { + color: var(--silver); + font-size: 0.8rem; + line-height: 1.5; +} + +.bloco-modal-footer { + padding: 0.75rem 1.25rem; + border-top: 1px solid rgba(255, 255, 255, 0.1); + text-align: center; +} + +.bloco-modal-footer small { + color: var(--muted); + font-size: 0.7rem; +} + +@media (max-width: 600px) { + .bloco-modal { + max-height: 90vh; + } + + .bloco-modal-body { + padding: 1rem; + } + + .bloco-tabela { + font-size: 0.75rem; + } + + .bloco-tabela th, + .bloco-tabela td { + padding: 0.4rem 0.5rem; + } +} diff --git a/frontend/src/components/BlocoCriteriosModal.jsx b/frontend/src/components/BlocoCriteriosModal.jsx new file mode 100644 index 0000000..35ed1e5 --- /dev/null +++ b/frontend/src/components/BlocoCriteriosModal.jsx @@ -0,0 +1,289 @@ +import React from 'react'; +import { createPortal } from 'react-dom'; +import './BlocoCriteriosModal.css'; + +const DADOS_BLOCOS = { + A: { + titulo: 'Coordenação CAPES', + cor: 'bloco-a', + descricao: 'Funções de coordenação institucional no âmbito da CAPES', + formula: 'Score = min(Base + Tempo + Bônus, Teto)', + atuacoes: [ + { cod: 'CA', nome: 'Coordenador de Área', base: 200, teto: 450, tempo: '10 pts/ano', tetoTempo: 100, atualidade: 30, retorno: 20 }, + { cod: 'CAJ', nome: 'Coordenador Adjunto', base: 150, teto: 370, tempo: '8 pts/ano', tetoTempo: 80, atualidade: 20, retorno: 15 }, + { cod: 'CAJ_MP', nome: 'Coord. Adjunto MP', base: 120, teto: 315, tempo: '6 pts/ano', tetoTempo: 60, atualidade: 15, retorno: 10 }, + { cod: 'CAM', nome: 'Câmara Temática', base: 100, teto: 280, tempo: '5 pts/ano', tetoTempo: 50, atualidade: 20, retorno: 10 }, + ], + bonus: [ + { tipo: 'Atualidade', descricao: 'Mandato vigente no momento da apuração', condicao: 'Coordenação ativa (sem data fim)' }, + { tipo: 'Retorno', descricao: 'Novo mandato após período anterior concluído', condicao: 'Hiato entre mandatos' }, + ], + observacoes: 'Anos completos de atuação institucional. Mandatos fragmentados da mesma função são somados.', + }, + B: { + titulo: 'Consultoria', + cor: 'bloco-b', + descricao: 'Atuação como consultor institucional da CAPES', + formula: 'Score = min(Base + Tempo + Bônus, Teto)', + atuacoes: [ + { cod: 'ATIVO', nome: 'Consultor Ativo', base: 150, teto: 230, tempo: '5 pts/ano', tetoTempo: 50, atualidade: 20, continuidade: 20, retorno: 15 }, + { cod: 'HIST', nome: 'Consultor Histórico', base: 100, teto: 230, tempo: '5 pts/ano', tetoTempo: 50, continuidade: 20, retorno: 20 }, + { cod: 'FALEC', nome: 'Consultor Falecido', base: 100, teto: 230, tempo: '5 pts/ano', tetoTempo: 50, continuidade: 20 }, + ], + bonus: [ + { tipo: 'Atualidade', descricao: 'Consultoria vigente (vínculo ativo)', condicao: 'Apenas CONS_ATIVO', valor: 20 }, + { tipo: 'Continuidade', descricao: 'Atuação contínua ≥ 8 anos consecutivos', condicao: 'Sem hiato significativo', valor: 20 }, + { tipo: 'Retorno', descricao: 'Reativação da consultoria após inatividade', condicao: 'ATIVO: +15 | HIST: +20' }, + ], + observacoes: 'Teto de tempo: 50 pts. Bônus de continuidade aplica-se apenas ao maior patamar atingido (≥8 anos).', + }, + C: { + titulo: 'Premiações, Avaliações, Inscrições', + cor: 'bloco-c', + descricao: 'Participação em premiações, comissões avaliadoras e inscrições', + formula: 'Score = Base + Bônus Recorrência (respeitando teto)', + secoes: [ + { + nome: 'Premiações (Autor)', + itens: [ + { cod: 'GP', nome: 'Grande Prêmio', base: 100, teto: 300 }, + { cod: 'PREMIO', nome: 'Prêmio', base: 50, teto: 150 }, + { cod: 'MENCAO', nome: 'Menção Honrosa', base: 30, teto: 90 }, + ], + }, + { + nome: 'Comissões', + itens: [ + { cod: 'COORD_GP', nome: 'Coord. Comissão GP', base: 50, teto: 120, recorrencia: '+6 pts/ano', maxRec: 20 }, + { cod: 'COORD', nome: 'Coord. Comissão', base: 40, teto: 100, recorrencia: '+4 pts/ano', maxRec: 20 }, + { cod: 'AVAL_GP', nome: 'Avaliador GP', base: 40, teto: 80, recorrencia: '+3 pts/ano', maxRec: 20 }, + { cod: 'AVAL', nome: 'Avaliador', base: 30, teto: 60, recorrencia: '+2 pts/ano', maxRec: 15 }, + ], + }, + { + nome: 'Inscrições', + itens: [ + { cod: 'INSC_INST', nome: 'Institucional (PPG)', base: 20, teto: 50, recorrencia: '+5 pts/part.', maxRec: 10 }, + { cod: 'INSC_AUTOR', nome: 'Autoinscrição', base: 10, teto: 20, recorrencia: '+2 pts/part.', maxRec: 10 }, + ], + }, + ], + selos: [ + { grupo: 'Orientações', itens: ['POS_DOC', 'TESE', 'DISS'] }, + { grupo: 'Co-Orientações', itens: ['POS_DOC', 'TESE', 'DISS'] }, + { grupo: 'Bancas', itens: ['MB_POS_DOC', 'MB_TESE', 'MB_DISS'] }, + ], + observacoes: 'Orientações, co-orientações e bancas geram apenas selos (sem pontuação base no V1).', + }, + D: { + titulo: 'Indicadores', + cor: 'bloco-d', + descricao: 'Indicadores de perfil e participações', + formula: 'Score = Base + Bônus Recorrência (respeitando teto)', + atuacoes: [ + { cod: 'BOL_BPQ', nome: 'Bolsa PQ CNPq', base: 30, teto: 60, obs: 'Reconhecimento externo' }, + { cod: 'PROJ', nome: 'Participação Projeto', base: 10, teto: 30, recorrencia: '+2 pts/part.', maxRec: 10 }, + { cod: 'EVENTO', nome: 'Participação Evento', base: 1, teto: 5, recorrencia: '+1 pt/part.', maxRec: 10 }, + ], + selos: [ + { cod: 'PPG_COORD', nome: 'Coordenador PPG', obs: 'Indicador (sem pontuação V1)' }, + { cod: 'IDIOMA_BILINGUE', nome: 'Bilíngue', obs: '2+ idiomas' }, + { cod: 'IDIOMA_MULTILINGUE', nome: 'Multilíngue', obs: '3+ idiomas' }, + { cod: 'TITULACAO_MESTRE', nome: 'Mestre', obs: 'Maior titulação' }, + { cod: 'TITULACAO_DOUTOR', nome: 'Doutor', obs: 'Maior titulação' }, + { cod: 'TITULACAO_POS_DOC', nome: 'Pós-Doutor', obs: 'Maior titulação' }, + ], + observacoes: 'Idiomas e titulações geram apenas selos de perfil, sem pontuação.', + }, + E: { + titulo: 'Coordenação PPG', + cor: 'bloco-e', + descricao: 'Coordenação de Programa de Pós-Graduação', + nota: 'Não ativo no Ranking V1', + detalhes: [ + 'Dados incompletos no ATUACAPES para pontuação como função institucional', + 'Ausência de vigência (início/fim) nos dados', + 'Tratado como indicador de perfil (selo)', + 'Pode ser ativado em versões futuras com dados completos', + ], + observacoes: 'A pontuação depende de carga futura com datas de início e fim de gestão.', + }, +}; + +const BlocoCriteriosModal = ({ bloco, onClose }) => { + const dados = DADOS_BLOCOS[bloco]; + if (!dados) return null; + + return createPortal( +
+
e.stopPropagation()}> +
+
+ {bloco} + {dados.titulo} +
+ +
+ +
+

{dados.descricao}

+ + {dados.formula && ( +
+ Fórmula: + {dados.formula} +
+ )} + + {dados.nota && ( +
+ ⚠️ + {dados.nota} +
+ )} + + {dados.atuacoes && ( +
+

Atuações

+ + + + + + + + {dados.atuacoes[0]?.tempo && } + {dados.atuacoes[0]?.recorrencia && } + + + + {dados.atuacoes.map((a) => ( + + + + + + {a.tempo && } + {a.recorrencia && } + + ))} + +
CódigoNomeBaseTetoTempoRecorrência
{a.cod}{a.nome}{a.base}{a.teto}{a.tempo} (max {a.tetoTempo}){a.recorrencia} (max {a.maxRec})
+
+ )} + + {dados.bonus && ( +
+

Bônus

+
+ {dados.bonus.map((b, idx) => ( +
+
+ {b.tipo} + {b.valor && +{b.valor} pts} +
+

{b.descricao}

+

Condição: {b.condicao}

+
+ ))} +
+ {bloco === 'A' && ( + + + + + + {dados.atuacoes.map((a) => ( + + + + + + ))} + +
CódigoAtualidadeRetorno
{a.cod}+{a.atualidade}+{a.retorno}
+ )} +
+ )} + + {dados.secoes && dados.secoes.map((secao, idx) => ( +
+

{secao.nome}

+ + + + + + + + {secao.itens[0]?.recorrencia && } + + + + {secao.itens.map((item) => ( + + + + + + {item.recorrencia && } + + ))} + +
CódigoNomeBaseTetoRecorrência
{item.cod}{item.nome}{item.base}{item.teto}{item.recorrencia} (max {item.maxRec})
+
+ ))} + + {dados.selos && ( +
+

Selos (sem pontuação)

+
+ {Array.isArray(dados.selos) && dados.selos[0]?.grupo ? ( + dados.selos.map((grupo, idx) => ( +
+ {grupo.grupo}: + {grupo.itens.join(', ')} +
+ )) + ) : ( + dados.selos.map((selo, idx) => ( +
+ {selo.cod} + {selo.nome} + {selo.obs && ({selo.obs})} +
+ )) + )} +
+
+ )} + + {dados.detalhes && ( +
+

Detalhes

+
    + {dados.detalhes.map((d, idx) => ( +
  • {d}
    • + ))} +
+
+ )} + + {dados.observacoes && ( +
+ ℹ️ + {dados.observacoes} +
+ )} +
+ +
+ Fonte: Ranking ATUACAPES V1.0 - Planilha Oficial de Critérios +
+
+
, + document.body + ); +}; + +export default BlocoCriteriosModal; diff --git a/frontend/src/components/Header.css b/frontend/src/components/Header.css index 10fb892..925e566 100644 --- a/frontend/src/components/Header.css +++ b/frontend/src/components/Header.css @@ -154,6 +154,21 @@ flex-wrap: nowrap; } +.criteria-section.clickable { + cursor: pointer; + transition: all 0.2s ease; +} + +.criteria-section.clickable * { + cursor: pointer; +} + +.criteria-section.clickable:hover { + background: rgba(255, 255, 255, 0.06); + border-color: rgba(255, 255, 255, 0.2); + transform: translateY(-1px); +} + .criteria-section h4 { color: var(--accent-2); font-size: 0.8rem; diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx index b44cae0..dd5774e 100644 --- a/frontend/src/components/Header.jsx +++ b/frontend/src/components/Header.jsx @@ -1,7 +1,9 @@ -import React from 'react'; +import React, { useState } from 'react'; import './Header.css'; +import BlocoCriteriosModal from './BlocoCriteriosModal'; const Header = ({ total }) => { + const [modalBloco, setModalBloco] = useState(null); const dataGeracao = new Date().toLocaleDateString('pt-BR'); const totalFormatado = new Intl.NumberFormat('pt-BR', { maximumFractionDigits: 0, @@ -25,7 +27,7 @@ const Header = ({ total }) => {

Criterios de Pontuacao

-
+
setModalBloco('A')}>

A - Coordenacao CAPES

max 450 @@ -43,7 +45,7 @@ const Header = ({ total }) => {
-
+
setModalBloco('B')}>

B - Consultoria

max 230 @@ -61,7 +63,7 @@ const Header = ({ total }) => {
At=20 Ct=20 Rt=15-20 | Teto tempo: 50
-
+
setModalBloco('E')}>

E - Coord. PPG

indicador @@ -71,7 +73,7 @@ const Header = ({ total }) => {
-
+
setModalBloco('C')}>

C - Premiacoes, Avaliacoes, Inscricoes

@@ -126,7 +128,7 @@ const Header = ({ total }) => {
-
+
setModalBloco('C')}>

C - Orientacoes

selos @@ -151,7 +153,7 @@ const Header = ({ total }) => {
-
+
setModalBloco('C')}>

C - Bancas

selos @@ -166,7 +168,7 @@ const Header = ({ total }) => {
-
+
setModalBloco('D')}>

D - Indicadores

selos @@ -184,6 +186,13 @@ const Header = ({ total }) => {
+ + {modalBloco && ( + setModalBloco(null)} + /> + )} ); };