diff --git a/src/pages/ProfilePage.jsx b/src/pages/ProfilePage.jsx index ef09ef1..6d4f10b 100644 --- a/src/pages/ProfilePage.jsx +++ b/src/pages/ProfilePage.jsx @@ -1,206 +1,107 @@ // src/pages/ProfilePage.jsx -import React, { useState } from 'react'; -import { useLocation, useNavigate } from 'react-router-dom'; -// import { useAuth } from '../components/utils/AuthProvider'; // <-- NOVO: Se você puder importar isso. +import React, { useState } from "react"; +import { useLocation, useNavigate } from "react-router-dom"; +import "./style/ProfilePage.css"; -// --- SIMULAÇÃO DE DADOS DE USUÁRIO --- -// COMO NÃO PODEMOS IMPORTAR O useAuth SEM MEXER EM OUTROS ARQUIVOS, VAMOS USAR ESTA SIMULAÇÃO: const simulatedUserData = { - // ESTA SIMULAÇÃO DEVERIA SER SUBTITUÍDA PELO SEU CONTEXTO DE AUTENTICAÇÃO REAL. - // O EMAIL REALMENTE LOGADO VEM DO CONTEXTO DE AUTENTICAÇÃO (useAuth) - email: 'admin@squad23.com', - role: 'Administrador' // Vamos forçar um valor para fins de visualização + email: "admin@squad23.com", + role: "Administrador", }; const ProfilePage = () => { const location = useLocation(); const navigate = useNavigate(); - // const { user } = useAuth(); // Descomente esta linha e comente o bloco simulatedUserData se puder usar o useAuth! - // --- Lógica de Cargo (AGORA CORRIGIDA PARA PEGAR DA URL SE O CONTEXTO FALHAR) --- const getRoleFromPath = () => { const path = location.pathname; - if (path.includes('/admin')) return 'Administrador'; - if (path.includes('/secretaria')) return 'Secretária'; - if (path.includes('/medico')) return 'Médico'; - if (path.includes('/financeiro')) return 'Financeiro'; - return 'Usuário Padrão'; + if (path.includes("/admin")) return "Administrador"; + if (path.includes("/secretaria")) return "Secretária"; + if (path.includes("/medico")) return "Médico"; + if (path.includes("/financeiro")) return "Financeiro"; + return "Usuário Padrão"; }; - - // Use a simulação ou o dado real: - const userRole = simulatedUserData.role || getRoleFromPath(); - const userEmail = simulatedUserData.email || 'email.nao.encontrado@mediconnect.com'; - - // --- Estados do Componente --- - // Se o nome do usuário vier do contexto de autenticação, use-o aqui - const [userName, setUserName] = useState('Admin Padrão'); + const userRole = simulatedUserData.role || getRoleFromPath(); + const userEmail = simulatedUserData.email || "email.nao.encontrado@example.com"; + + const [userName, setUserName] = useState("Admin Padrão"); const [isEditingName, setIsEditingName] = useState(false); - // --- Funções de Interação --- - - const handleNameChange = (e) => { - if (e.key === 'Enter') { - setIsEditingName(false); - } + const handleNameKeyDown = (e) => { + if (e.key === "Enter") setIsEditingName(false); }; - const handleClose = () => { - navigate(-1); // Volta para a página anterior - }; + const handleClose = () => navigate(-1); return ( -
-
- - {/* Botão de Fechar (X) */} - - {/* 1. Área da Foto de Perfil (Quadrada) */} -
-
-
- -
- - {/* 2. Nome do Usuário com Edição */} -
- {isEditingName ? ( - setUserName(e.target.value)} - onBlur={() => setIsEditingName(false)} - onKeyPress={handleNameChange} - autoFocus - style={styles.nameInput} - /> - ) : ( -

{userName}

- )} - - +
+
+
+
+ +
- {/* 3. Email (AGORA EXIBE O VALOR SIMULADO/CORRIGIDO) */} -

Email: {userEmail}

+
+
+ {isEditingName ? ( + setUserName(e.target.value)} + onBlur={() => setIsEditingName(false)} + onKeyDown={handleNameKeyDown} + autoFocus + /> + ) : ( +

{userName}

+ )} - {/* 4. Cargo (AGORA EXIBE O VALOR SIMULADO/CORRIGIDO) */} -

Cargo: {userRole}

+ +
+ +

+ Email: {userEmail} +

+ +

+ Cargo: {userRole} +

+ +
+ +
+
); }; -// Estilos Atualizados para Aumentar o Tamanho do Modal -const styles = { - overlay: { - position: 'fixed', - top: 0, - left: 0, - right: 0, - bottom: 0, - backgroundColor: 'rgba(0, 0, 0, 0.5)', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - zIndex: 1100, - }, - modalContainer: { - position: 'relative', - padding: '50px 70px', // Aumentado o padding - backgroundColor: 'white', - borderRadius: '15px', - boxShadow: '0 8px 30px rgba(0, 0, 0, 0.3)', - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - minWidth: '400px', - width: '60%', // Aumentando a largura para cobrir mais a tela - maxWidth: '500px', // Limite máximo para não ficar gigante em telas grandes - height: 'auto', - }, - closeButton: { - position: 'absolute', - top: '15px', - right: '20px', - background: 'none', - border: 'none', - fontSize: '30px', - cursor: 'pointer', - color: '#666', - lineHeight: '1', - }, - // ... (Os estilos de profilePictureContainer, infoContainer, etc., permanecem iguais) - profilePictureContainer: { - width: '120px', - height: '120px', - borderRadius: '15px', - overflow: 'hidden', - boxShadow: '0 4px 10px rgba(0, 0, 0, 0.15)', - marginBottom: '20px', - }, - profilePicturePlaceholder: { - width: '100%', - height: '100%', - backgroundColor: '#A9A9A9', - backgroundImage: 'url(\'data:image/svg+xml;utf8,\')', - backgroundSize: '80%', - backgroundRepeat: 'no-repeat', - backgroundPosition: 'center', - }, - infoContainer: { - textAlign: 'center', - maxWidth: '400px', - width: '100%', - }, - nameSection: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - marginBottom: '10px', - }, - userName: { - margin: '0 5px 0 0', - fontSize: '1.8rem', - color: '#333', - }, - nameInput: { - fontSize: '1.8rem', - padding: '5px', - border: '1px solid #ccc', - borderRadius: '5px', - textAlign: 'center', - marginRight: '5px', - }, - editButton: { - background: 'none', - border: 'none', - cursor: 'pointer', - fontSize: '1.2rem', - marginLeft: '5px', - }, - emailText: { - fontSize: '1rem', - color: '#666', - margin: '5px 0', - }, - roleText: { - fontSize: '1.1rem', - color: '#333', - marginTop: '15px', - paddingTop: '10px', - borderTop: '1px solid #eee', - } -}; - -export default ProfilePage; \ No newline at end of file +export default ProfilePage; diff --git a/src/pages/style/ProfilePage.css b/src/pages/style/ProfilePage.css index e69de29..c9215aa 100644 --- a/src/pages/style/ProfilePage.css +++ b/src/pages/style/ProfilePage.css @@ -0,0 +1,178 @@ +/* src/pages/ProfilePage.css */ + +/* Overlay que cobre toda a tela */ +.profile-overlay { + position: fixed; + inset: 0; + background-color: rgba(0, 0, 0, 0.65); + display: flex; + align-items: center; + justify-content: center; + z-index: 20000; /* acima de header, vlibras, botões de acessibilidade */ + padding: 20px; + box-sizing: border-box; +} + +/* Card central (estilo modal amplo parecido com a 4ª foto) */ +.profile-modal { + background: #ffffff; + border-radius: 10px; + padding: 18px; + width: min(1100px, 96%); + max-width: 1100px; + box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5); + position: relative; + box-sizing: border-box; + overflow: visible; +} + +/* Botão fechar (X) no canto do card */ +.profile-close { + position: absolute; + top: 14px; + right: 14px; + background: none; + border: none; + font-size: 26px; + color: #666; + cursor: pointer; + line-height: 1; +} + +/* Conteúdo dividido em 2 colunas: esquerda avatar / direita infos */ +.profile-content { + display: flex; + gap: 28px; + align-items: flex-start; + padding: 22px 18px; +} + +/* Coluna esquerda - avatar */ +.profile-left { + width: 220px; + display: flex; + justify-content: center; +} + +/* Avatar quadrado com sombra (estilo da foto 4) */ +.avatar-wrapper { + position: relative; + width: 180px; + height: 180px; +} + +.avatar-square { + width: 100%; + height: 100%; + border-radius: 8px; + background-color: #d0d0d0; + background-image: url("data:image/svg+xml;utf8,"); + background-position: center; + background-repeat: no-repeat; + background-size: 55%; + box-shadow: 0 8px 24px rgba(0,0,0,0.25); +} + +/* Botão editar sobre o avatar — círculo pequeno */ +.avatar-edit-btn { + position: absolute; + right: -8px; + bottom: -8px; + transform: translate(0, 0); + border: none; + background: #ffffff; + padding: 8px 9px; + border-radius: 50%; + box-shadow: 0 6px 14px rgba(0,0,0,0.18); + cursor: pointer; + font-size: 0.95rem; + line-height: 1; +} + +/* Coluna direita - informações */ +.profile-right { + flex: 1; + min-width: 280px; + display: flex; + flex-direction: column; + justify-content: center; +} + +/* Nome e botão de editar inline */ +.profile-name-row { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 10px; +} + +.profile-username { + margin: 0; + font-size: 1.9rem; + color: #222; +} + +.profile-edit-inline { + background: none; + border: none; + cursor: pointer; + font-size: 1.05rem; + color: #444; +} + +/* input de edição do nome */ +.profile-name-input { + font-size: 1.6rem; + padding: 6px 8px; + border: 1px solid #e0e0e0; + border-radius: 6px; +} + +/* email/role */ +.profile-email, +.profile-role { + margin: 6px 0; + color: #555; + font-size: 1rem; +} + +.profile-role { + margin-top: 14px; + padding-top: 12px; + border-top: 1px solid #f1f1f1; + color: #333; +} + +/* ações (apenas fechar aqui) */ +.profile-actions-row { + display: flex; + gap: 12px; + margin-top: 18px; +} + +/* botões */ +.btn { + padding: 8px 14px; + border-radius: 8px; + border: 1px solid transparent; + cursor: pointer; + font-size: 0.95rem; +} + +.btn-close { + background: #f0f0f0; + color: #222; + border: 1px solid #e6e6e6; +} + +/* responsividade */ +@media (max-width: 880px) { + .profile-content { + flex-direction: column; + gap: 14px; + align-items: center; + } + .profile-left { width: 100%; } + .avatar-wrapper { width: 140px; height: 140px; } + .profile-right { width: 100%; text-align: center; } +}