diff --git a/frontend/src/components/ConsultorCard.css b/frontend/src/components/ConsultorCard.css index 5be68aa..aea0ef6 100644 --- a/frontend/src/components/ConsultorCard.css +++ b/frontend/src/components/ConsultorCard.css @@ -1559,3 +1559,51 @@ color: var(--muted); font-size: 0.75rem; } + +.tipo-modal-voltar { + background: rgba(99, 102, 241, 0.15); + border: 1px solid rgba(99, 102, 241, 0.3); + border-radius: 6px; + color: #a5b4fc; + font-size: 0.8rem; + font-weight: 500; + padding: 0.35rem 0.65rem; + cursor: pointer; + transition: all 200ms ease; + margin-right: 0.75rem; +} + +.tipo-modal-voltar:hover { + background: rgba(99, 102, 241, 0.25); + border-color: rgba(99, 102, 241, 0.5); + color: #c7d2fe; +} + +.modal-item-clicavel { + cursor: pointer; + position: relative; + transition: all 150ms ease; + padding-right: 2rem; +} + +.modal-item-clicavel:hover { + background: rgba(79, 70, 229, 0.12); + border-color: rgba(79, 70, 229, 0.4); + transform: translateX(3px); +} + +.modal-item-arrow { + position: absolute; + right: 0.75rem; + top: 50%; + transform: translateY(-50%); + color: var(--accent); + font-size: 0.9rem; + opacity: 0.5; + transition: all 150ms ease; +} + +.modal-item-clicavel:hover .modal-item-arrow { + opacity: 1; + transform: translateY(-50%) translateX(3px); +} diff --git a/frontend/src/components/ConsultorCard.jsx b/frontend/src/components/ConsultorCard.jsx index 0503be9..a2f086b 100644 --- a/frontend/src/components/ConsultorCard.jsx +++ b/frontend/src/components/ConsultorCard.jsx @@ -688,30 +688,43 @@ const SeloModal = ({ selo, consultor, onClose }) => { }; const ItemDetalheModal = ({ item, tipo, onClose }) => { + const [subDetalhe, setSubDetalhe] = useState(null); + if (!item || !tipo) return null; const formatDate = (dateStr) => { if (!dateStr) return 'N/A'; + if (dateStr.includes('/')) { + const parts = dateStr.split(' ')[0].split('/'); + if (parts.length === 3) { + return `${parts[0]}/${parts[1]}/${parts[2]}`; + } + } return new Date(dateStr).toLocaleDateString('pt-BR'); }; + const currentItem = subDetalhe?.item || item; + const currentTipo = subDetalhe?.tipo || tipo; + const getTitulo = () => { - switch (tipo) { + switch (currentTipo) { case 'titulacao': return 'Titulação'; - case 'producoes_lattes': return 'Produções Lattes'; + case 'producoes_lattes': return 'Currículo Lattes'; case 'vinculo': return 'Vínculo de Consultoria'; case 'coordenacao': return 'Coordenação CAPES'; case 'premiacao': return 'Premiação'; case 'avaliacao': return 'Avaliação de Comissão'; case 'inscricao': return 'Inscrição em Prêmio'; - case 'participacao': return item.codigo === 'PROJ' ? 'Projeto' : 'Evento'; + case 'participacao': return currentItem.codigo === 'PROJ' ? 'Projeto' : 'Evento'; case 'orientacao': return 'Orientação'; + case 'orientacao_lattes': return 'Orientação Concluída'; + case 'idioma': return 'Idioma'; default: return 'Detalhes'; } }; const getIcone = () => { - switch (tipo) { + switch (currentTipo) { case 'titulacao': return '🎓'; case 'producoes_lattes': return '📚'; case 'vinculo': return '💼'; @@ -719,45 +732,168 @@ const ItemDetalheModal = ({ item, tipo, onClose }) => { case 'premiacao': return '🏆'; case 'avaliacao': return '📋'; case 'inscricao': return '📝'; - case 'participacao': return item.codigo === 'PROJ' ? '📊' : '📅'; + case 'participacao': return currentItem.codigo === 'PROJ' ? '📊' : '📅'; case 'orientacao': return '🎓'; + case 'orientacao_lattes': return '👨🏫'; + case 'idioma': return '🌐'; default: return '📄'; } }; + const handleVoltar = () => { + setSubDetalhe(null); + }; + const renderContent = () => { - switch (tipo) { + switch (currentTipo) { case 'titulacao': { + const it = currentItem; return (