Compare commits
5 Commits
b0da8d0edf
...
9a91893784
| Author | SHA1 | Date | |
|---|---|---|---|
| 9a91893784 | |||
| 6c2ba37964 | |||
| b6bda9945b | |||
| 28f12b467c | |||
| a01c62440e |
@ -1,33 +1,31 @@
|
||||
/* src/components/Header/Header.css */
|
||||
.header-container {
|
||||
width: 100%;
|
||||
position: absolute; /* Permite posicionamento livre sobre o conteúdo */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end; /* Alinha os elementos do container à direita */
|
||||
justify-content: flex-end;
|
||||
padding: 10px 20px;
|
||||
box-sizing: border-box;
|
||||
z-index: 1000; /* Garante que fique acima de outros elementos */
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.right-corner-elements {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px; /* Espaço entre o telefone e a seção de perfil */
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* --- ÍCONE DE TELEFONE --- */
|
||||
.phone-icon-container {
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
padding: 5px; /* Área clicável um pouco maior */
|
||||
}
|
||||
.phone-icon {
|
||||
display: block; /* Garante que o emoji fique bem centralizado */
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.phone-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* --- SEÇÃO DE PERFIL --- */
|
||||
.profile-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -37,19 +35,18 @@
|
||||
.profile-picture-container {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%; /* Círculo */
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border: 2px solid #ccc; /* Borda simples */
|
||||
border: 2px solid #ccc;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.profile-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #A9A9A9; /* Cor cinza escura para o fundo */
|
||||
background-color: #A9A9A9;
|
||||
border-radius: 50%;
|
||||
/* Adicionando um ícone simples de pessoa em branco para simular o ícone */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -64,13 +61,12 @@
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%23FFFFFF" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm-45.7 48C79.8 304 0 383.8 0 482.3c0 16.7 13.5 30.2 30.2 30.2h387.6c16.7 0 30.2-13.5 30.2-30.2 0-98.5-79.8-178.3-178.3-178.3h-45.7z"/></svg>');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0.8; /* Suaviza um pouco o ícone */
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* --- DROPDOWN (MENU) --- */
|
||||
.profile-dropdown {
|
||||
position: absolute;
|
||||
top: 50px; /* Posição abaixo da foto de perfil (40px + 10px de espaço) */
|
||||
top: 50px;
|
||||
right: 0;
|
||||
background-color: white;
|
||||
border: 1px solid #ddd;
|
||||
@ -78,9 +74,9 @@
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 10;
|
||||
z-index: 1000;
|
||||
min-width: 150px;
|
||||
overflow: hidden; /* Garante que bordas fiquem visíveis */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dropdown-button {
|
||||
@ -99,9 +95,311 @@
|
||||
}
|
||||
|
||||
.logout-button {
|
||||
color: #cc0000; /* Cor vermelha para o botão de logout */
|
||||
color: #cc0000;
|
||||
}
|
||||
|
||||
.logout-button:hover {
|
||||
background-color: #ffe0e0;
|
||||
}
|
||||
|
||||
.suporte-card-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.suporte-card-container {
|
||||
position: relative;
|
||||
z-index: 2001;
|
||||
margin-top: 80px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.suporte-card {
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
||||
padding: 2rem;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.suporte-titulo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.suporte-subtitulo {
|
||||
color: #666;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.contato-item {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
background-color: #f8f9fa;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.contato-item:hover {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
.contato-item.clickable {
|
||||
cursor: pointer;
|
||||
background-color: #e3f2fd;
|
||||
}
|
||||
|
||||
.contato-item.clickable:hover {
|
||||
background-color: #bbdefb;
|
||||
}
|
||||
|
||||
.contato-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.contato-nome {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.contato-descricao {
|
||||
color: #666;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.contato-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.chat-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
z-index: 3000;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
position: relative;
|
||||
z-index: 3001;
|
||||
margin-top: 80px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.chat-online {
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
||||
width: 350px;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
background-color: #1e3a8a;
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
border-radius: 12px 12px 0 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chat-titulo {
|
||||
color: white;
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.fechar-chat {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fechar-chat:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.chat-mensagens {
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.mensagem {
|
||||
max-width: 80%;
|
||||
padding: 0.75rem;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mensagem.usuario {
|
||||
align-self: flex-end;
|
||||
background-color: #e3f2fd;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.mensagem.suporte {
|
||||
align-self: flex-start;
|
||||
background-color: #f5f5f5;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.mensagem-texto {
|
||||
margin-bottom: 0.25rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.mensagem-hora {
|
||||
font-size: 0.7rem;
|
||||
color: #666;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.mensagem.suporte .mensagem-hora {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
gap: 0.5rem;
|
||||
background-color: white;
|
||||
border-radius: 0 0 12px 12px;
|
||||
}
|
||||
|
||||
.chat-campo {
|
||||
flex: 1;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 20px;
|
||||
outline: none;
|
||||
font-size: 0.9rem;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.chat-campo:focus {
|
||||
border-color: #1e3a8a;
|
||||
}
|
||||
|
||||
.chat-enviar {
|
||||
background-color: #1e3a8a;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.chat-enviar:hover {
|
||||
background-color: #1e40af;
|
||||
}
|
||||
/* Modal de Logout */
|
||||
.logout-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.logout-modal-content {
|
||||
background-color: white;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
||||
max-width: 400px;
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logout-modal-content h3 {
|
||||
margin-bottom: 1rem;
|
||||
color: #333;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.logout-modal-content p {
|
||||
margin-bottom: 2rem;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.logout-modal-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logout-cancel-button {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
background-color: transparent;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.logout-cancel-button:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.logout-confirm-button {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.logout-confirm-button:hover {
|
||||
background-color: #c82333;
|
||||
}
|
||||
@ -1,58 +1,290 @@
|
||||
// src/components/Header/Header.jsx
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import './Header.css';
|
||||
|
||||
const Header = () => {
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
const [isSuporteCardOpen, setIsSuporteCardOpen] = useState(false);
|
||||
const [isChatOpen, setIsChatOpen] = useState(false);
|
||||
const [mensagem, setMensagem] = useState('');
|
||||
const [mensagens, setMensagens] = useState([]);
|
||||
const [showLogoutModal, setShowLogoutModal] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const chatInputRef = useRef(null);
|
||||
const mensagensContainerRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isChatOpen && chatInputRef.current) {
|
||||
chatInputRef.current.focus();
|
||||
}
|
||||
}, [isChatOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
if (mensagensContainerRef.current) {
|
||||
mensagensContainerRef.current.scrollTop = mensagensContainerRef.current.scrollHeight;
|
||||
}
|
||||
}, [mensagens]);
|
||||
|
||||
// Funções de Logout (do seu código)
|
||||
const handleLogoutClick = () => {
|
||||
setShowLogoutModal(true);
|
||||
setIsDropdownOpen(false);
|
||||
};
|
||||
|
||||
const handleLogoutConfirm = async () => {
|
||||
try {
|
||||
const token =
|
||||
localStorage.getItem("token") ||
|
||||
localStorage.getItem("authToken") ||
|
||||
localStorage.getItem("userToken") ||
|
||||
localStorage.getItem("access_token") ||
|
||||
sessionStorage.getItem("token") ||
|
||||
sessionStorage.getItem("authToken");
|
||||
|
||||
if (token) {
|
||||
const response = await fetch(
|
||||
"https://mock.apidog.com/m1/1053378-0-default/auth/v1/logout",
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (response.status === 204) console.log("Logout realizado com sucesso");
|
||||
else if (response.status === 401) console.log("Token inválido ou expirado");
|
||||
else {
|
||||
try {
|
||||
const errorData = await response.json();
|
||||
console.error("Erro no logout:", errorData);
|
||||
} catch {
|
||||
console.error("Erro no logout - status:", response.status);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
clearAuthData();
|
||||
navigate("/login");
|
||||
} catch (error) {
|
||||
console.error("Erro durante logout:", error);
|
||||
clearAuthData();
|
||||
navigate("/login");
|
||||
} finally {
|
||||
setShowLogoutModal(false);
|
||||
}
|
||||
};
|
||||
|
||||
const clearAuthData = () => {
|
||||
["token","authToken","userToken","access_token","user","auth","userData"].forEach(key => {
|
||||
localStorage.removeItem(key);
|
||||
sessionStorage.removeItem(key);
|
||||
});
|
||||
|
||||
if (window.caches) {
|
||||
caches.keys().then(names => {
|
||||
names.forEach(name => {
|
||||
if (name.includes("auth") || name.includes("api")) caches.delete(name);
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogoutCancel = () => setShowLogoutModal(false);
|
||||
|
||||
const handleProfileClick = () => {
|
||||
setIsDropdownOpen(!isDropdownOpen);
|
||||
if (isSuporteCardOpen) setIsSuporteCardOpen(false);
|
||||
if (isChatOpen) setIsChatOpen(false);
|
||||
};
|
||||
|
||||
const handleViewProfile = () => {
|
||||
// Redireciona para uma página de perfil (Rota que adicionaremos no App.js)
|
||||
navigate('/perfil');
|
||||
setIsDropdownOpen(false);
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
// Ação de Logout: Exibe um alerta e redireciona para a tela de Login
|
||||
alert('Você foi desconectado. Executando ação de logout...');
|
||||
setIsDropdownOpen(false);
|
||||
navigate('/login');
|
||||
const handleSuporteClick = () => {
|
||||
setIsSuporteCardOpen(!isSuporteCardOpen);
|
||||
if (isDropdownOpen) setIsDropdownOpen(false);
|
||||
if (isChatOpen) setIsChatOpen(false);
|
||||
};
|
||||
|
||||
const handleSupportClick = () => {
|
||||
// Funcionalidade de suporte (futuramente implementada em TelefoneSuporte)
|
||||
alert('Função de Suporte de Telefone em desenvolvimento.');
|
||||
const handleCloseSuporteCard = () => {
|
||||
setIsSuporteCardOpen(false);
|
||||
};
|
||||
|
||||
const handleChatClick = () => {
|
||||
setIsChatOpen(true);
|
||||
setIsSuporteCardOpen(false);
|
||||
setMensagens([
|
||||
{
|
||||
id: 1,
|
||||
texto: 'Olá! Bem-vindo ao suporte Mediconnect. Como podemos ajudar você hoje?',
|
||||
remetente: 'suporte',
|
||||
hora: new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })
|
||||
}
|
||||
]);
|
||||
};
|
||||
|
||||
const handleCloseChat = () => {
|
||||
setIsChatOpen(false);
|
||||
setMensagem('');
|
||||
};
|
||||
|
||||
const handleEnviarMensagem = (e) => {
|
||||
e.preventDefault();
|
||||
if (mensagem.trim() === '') return;
|
||||
|
||||
const novaMensagemUsuario = {
|
||||
id: Date.now(),
|
||||
texto: mensagem,
|
||||
remetente: 'usuario',
|
||||
hora: new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })
|
||||
};
|
||||
|
||||
setMensagens(prev => [...prev, novaMensagemUsuario]);
|
||||
setMensagem('');
|
||||
|
||||
setTimeout(() => {
|
||||
if (chatInputRef.current) {
|
||||
chatInputRef.current.focus();
|
||||
}
|
||||
}, 0);
|
||||
|
||||
setTimeout(() => {
|
||||
const respostas = [
|
||||
'Entendi sua dúvida. Vou verificar isso para você.',
|
||||
'Obrigado pela informação. Estou analisando seu caso.',
|
||||
'Pode me dar mais detalhes sobre o problema?',
|
||||
'Já encaminhei sua solicitação para nossa equipe técnica.',
|
||||
'Vou ajudar você a resolver isso!'
|
||||
];
|
||||
|
||||
const respostaSuporte = {
|
||||
id: Date.now() + 1,
|
||||
texto: respostas[Math.floor(Math.random() * respostas.length)],
|
||||
remetente: 'suporte',
|
||||
hora: new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })
|
||||
};
|
||||
|
||||
setMensagens(prev => [...prev, respostaSuporte]);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const SuporteCard = () => (
|
||||
<div className="suporte-card">
|
||||
<h2 className="suporte-titulo">Suporte</h2>
|
||||
<p className="suporte-subtitulo">Entre em contato conosco através dos canais abaixo</p>
|
||||
|
||||
<div className="contato-item">
|
||||
<div className="contato-info">
|
||||
<div className="contato-nome">Email</div>
|
||||
<div className="contato-descricao">suporte@mediconnect.com</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="contato-item">
|
||||
<div className="contato-info">
|
||||
<div className="contato-nome">Telefone</div>
|
||||
<div className="contato-descricao">(11) 3333-4444</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="contato-item clickable" onClick={handleChatClick}>
|
||||
<div className="contato-info">
|
||||
<div className="contato-nome">Chat Online</div>
|
||||
<div className="contato-descricao">Disponível 24/7</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ChatOnline = () => (
|
||||
<div className="chat-online">
|
||||
<div className="chat-header">
|
||||
<h3 className="chat-titulo">Chat de Suporte</h3>
|
||||
<button type="button" className="fechar-chat" onClick={handleCloseChat}>×</button>
|
||||
</div>
|
||||
|
||||
<div className="chat-mensagens" ref={mensagensContainerRef}>
|
||||
{mensagens.map((msg) => (
|
||||
<div key={msg.id} className={`mensagem ${msg.remetente}`}>
|
||||
<div className="mensagem-texto">{msg.texto}</div>
|
||||
<div className="mensagem-hora">{msg.hora}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<form className="chat-input" onSubmit={handleEnviarMensagem}>
|
||||
<input
|
||||
ref={chatInputRef}
|
||||
type="text"
|
||||
value={mensagem}
|
||||
onChange={(e) => setMensagem(e.target.value)}
|
||||
placeholder="Digite sua mensagem..."
|
||||
className="chat-campo"
|
||||
autoFocus
|
||||
/>
|
||||
<button type="submit" className="chat-enviar">Enviar</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="header-container">
|
||||
<div className="right-corner-elements">
|
||||
|
||||
{/* Ícone de Telefone */}
|
||||
<div className="phone-icon-container" onClick={handleSupportClick}>
|
||||
<div className="phone-icon-container" onClick={handleSuporteClick}>
|
||||
<span className="phone-icon" role="img" aria-label="telefone">📞</span>
|
||||
</div>
|
||||
|
||||
{/* Seção de Perfil com Dropdown */}
|
||||
<div className="profile-section">
|
||||
<div className="profile-picture-container" onClick={handleProfileClick}>
|
||||
{/* O div "profile-placeholder" simula a foto de perfil circular colorida */}
|
||||
<div className="profile-placeholder"></div>
|
||||
</div>
|
||||
|
||||
{isDropdownOpen && (
|
||||
<div className="profile-dropdown">
|
||||
<button onClick={handleViewProfile} className="dropdown-button">Ver Perfil</button>
|
||||
<button onClick={handleLogout} className="dropdown-button logout-button">Sair (Logout)</button>
|
||||
<button type="button" onClick={handleViewProfile} className="dropdown-button">Ver Perfil</button>
|
||||
<button type="button" onClick={handleLogoutClick} className="dropdown-button logout-button">Sair (Logout)</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modal de Logout */}
|
||||
{showLogoutModal && (
|
||||
<div className="logout-modal-overlay">
|
||||
<div className="logout-modal-content">
|
||||
<h3>Confirmar Logout</h3>
|
||||
<p>Tem certeza que deseja encerrar a sessão?</p>
|
||||
<div className="logout-modal-buttons">
|
||||
<button onClick={handleLogoutCancel} className="logout-cancel-button">
|
||||
Cancelar
|
||||
</button>
|
||||
<button onClick={handleLogoutConfirm} className="logout-confirm-button">
|
||||
Sair
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isSuporteCardOpen && (
|
||||
<div className="suporte-card-overlay" onClick={handleCloseSuporteCard}>
|
||||
<div className="suporte-card-container" onClick={(e) => e.stopPropagation()}>
|
||||
<SuporteCard />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isChatOpen && (
|
||||
<div className="chat-overlay">
|
||||
<div className="chat-container">
|
||||
<ChatOnline />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
201
src/components/doctors/DoctorForm.css
Normal file
201
src/components/doctors/DoctorForm.css
Normal file
@ -0,0 +1,201 @@
|
||||
.doctor-form-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.doctor-form-title {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin-bottom: 2rem;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.8rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-toggle {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-control-custom {
|
||||
font-size: 1.1rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.avatar-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background-color: #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 3.5rem;
|
||||
color: #9e9e9e;
|
||||
}
|
||||
|
||||
.file-input-label {
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.actions-container {
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
font-size: 1.2rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
font-size: 1.2rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
.modal-overlay {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
width: 400px;
|
||||
max-width: 90%;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: #1e3a8a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 25px 20px;
|
||||
}
|
||||
|
||||
.modal-message {
|
||||
color: #111;
|
||||
font-size: 1.1rem;
|
||||
margin: 0 0 15px 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.modal-list-item {
|
||||
color: #111;
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 15px 20px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.modal-confirm-btn {
|
||||
background-color: #1e3a8a;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 8px 20px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.doctor-form-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.btn-submit,
|
||||
.btn-cancel {
|
||||
font-size: 1.1rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { Link, useNavigate, useLocation } from 'react-router-dom';
|
||||
import './DoctorForm.css';
|
||||
|
||||
function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
const navigate = useNavigate();
|
||||
@ -22,16 +23,13 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
.replace(/(\d{3})(\d{1,2})$/, '$1-$2');
|
||||
};
|
||||
|
||||
|
||||
const validarCPF = (cpf) => {
|
||||
const cpfLimpo = cpf.replace(/\D/g, '');
|
||||
|
||||
if (cpfLimpo.length !== 11) return false;
|
||||
|
||||
|
||||
if (/^(\d)\1+$/.test(cpfLimpo)) return false;
|
||||
|
||||
|
||||
let soma = 0;
|
||||
for (let i = 0; i < 9; i++) {
|
||||
soma += parseInt(cpfLimpo.charAt(i)) * (10 - i);
|
||||
@ -39,7 +37,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
let resto = 11 - (soma % 11);
|
||||
let digito1 = resto === 10 || resto === 11 ? 0 : resto;
|
||||
|
||||
|
||||
soma = 0;
|
||||
for (let i = 0; i < 10; i++) {
|
||||
soma += parseInt(cpfLimpo.charAt(i)) * (11 - i);
|
||||
@ -47,7 +44,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
resto = 11 - (soma % 11);
|
||||
let digito2 = resto === 10 || resto === 11 ? 0 : resto;
|
||||
|
||||
|
||||
return digito1 === parseInt(cpfLimpo.charAt(9)) && digito2 === parseInt(cpfLimpo.charAt(10));
|
||||
};
|
||||
|
||||
@ -79,12 +75,10 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
const handleChange = (e) => {
|
||||
const { name, value, type, checked, files } = e.target;
|
||||
|
||||
|
||||
if (value && emptyFields.includes(name)) {
|
||||
setEmptyFields(prev => prev.filter(field => field !== name));
|
||||
}
|
||||
|
||||
|
||||
if (name === 'cpf' && cpfError) {
|
||||
setCpfError('');
|
||||
}
|
||||
@ -108,7 +102,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
let cpfFormatado = FormatCPF(value);
|
||||
setFormData(prev => ({ ...prev, [name]: cpfFormatado }));
|
||||
|
||||
|
||||
const cpfLimpo = cpfFormatado.replace(/\D/g, '');
|
||||
if (cpfLimpo.length === 11) {
|
||||
if (!validarCPF(cpfFormatado)) {
|
||||
@ -150,7 +143,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const scrollToEmptyField = (fieldName) => {
|
||||
let fieldRef = null;
|
||||
|
||||
@ -183,7 +175,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
if (fieldRef.current) {
|
||||
fieldRef.current.scrollIntoView({
|
||||
@ -192,11 +183,9 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
});
|
||||
fieldRef.current.focus();
|
||||
|
||||
|
||||
fieldRef.current.style.border = '2px solid #dc3545';
|
||||
fieldRef.current.style.boxShadow = '0 0 0 0.2rem rgba(220, 53, 69, 0.25)';
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
if (fieldRef.current) {
|
||||
fieldRef.current.style.border = '';
|
||||
@ -208,7 +197,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
|
||||
const missingFields = [];
|
||||
if (!formData.full_name) missingFields.push('full_name');
|
||||
if (!formData.cpf) missingFields.push('cpf');
|
||||
@ -221,7 +209,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
setEmptyFields(missingFields);
|
||||
setShowRequiredModal(true);
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
if (missingFields.length > 0) {
|
||||
scrollToEmptyField(missingFields[0]);
|
||||
@ -230,7 +217,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const cpfLimpo = formData.cpf.replace(/\D/g, '');
|
||||
if (cpfLimpo.length !== 11) {
|
||||
setShowRequiredModal(true);
|
||||
@ -240,7 +226,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (!validarCPF(formData.cpf)) {
|
||||
setShowRequiredModal(true);
|
||||
setEmptyFields(['cpf']);
|
||||
@ -249,12 +234,9 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
try {
|
||||
await onSave({ ...formData });
|
||||
|
||||
} catch (error) {
|
||||
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
@ -265,96 +247,43 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
{showRequiredModal && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
zIndex: 9999,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: "10px",
|
||||
width: "400px",
|
||||
maxWidth: "90%",
|
||||
boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#1e3a8a",
|
||||
padding: "15px 20px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Atenção</h5>
|
||||
<div className="modal-overlay">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">Atenção</h5>
|
||||
<button
|
||||
onClick={handleModalClose}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
fontSize: "20px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
className="modal-close-btn"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: "25px 20px" }}>
|
||||
<p style={{ color: "#111", fontSize: "1.1rem", margin: "0 0 15px 0", fontWeight: "bold" }}>
|
||||
<div className="modal-body">
|
||||
<p className="modal-message">
|
||||
{cpfError ? 'Problema com o CPF:' : 'Por favor, preencha:'}
|
||||
</p>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginLeft: '10px' }}>
|
||||
<div className="modal-list">
|
||||
{cpfError ? (
|
||||
<p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>{cpfError}</p>
|
||||
<p className="modal-list-item">{cpfError}</p>
|
||||
) : (
|
||||
<>
|
||||
{!formData.full_name && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Nome</p>}
|
||||
{!formData.cpf && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- CPF</p>}
|
||||
{!formData.email && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Email</p>}
|
||||
{!formData.phone_mobile && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Telefone</p>}
|
||||
{!formData.crm_uf && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Estado do CRM</p>}
|
||||
{!formData.crm && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- CRM</p>}
|
||||
{!formData.full_name && <p className="modal-list-item">- Nome</p>}
|
||||
{!formData.cpf && <p className="modal-list-item">- CPF</p>}
|
||||
{!formData.email && <p className="modal-list-item">- Email</p>}
|
||||
{!formData.phone_mobile && <p className="modal-list-item">- Telefone</p>}
|
||||
{!formData.crm_uf && <p className="modal-list-item">- Estado do CRM</p>}
|
||||
{!formData.crm && <p className="modal-list-item">- CRM</p>}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
padding: "15px 20px",
|
||||
borderTop: "1px solid #ddd",
|
||||
}}
|
||||
>
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
onClick={handleModalClose}
|
||||
style={{
|
||||
backgroundColor: "#1e3a8a",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
padding: "8px 20px",
|
||||
borderRadius: "6px",
|
||||
cursor: "pointer",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
className="modal-confirm-btn"
|
||||
>
|
||||
Fechar
|
||||
</button>
|
||||
@ -363,48 +292,35 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="card p-3 shadow-sm">
|
||||
<h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
|
||||
<div className="card doctor-form-container shadow-sm">
|
||||
<h3 className="doctor-form-title">MediConnect</h3>
|
||||
|
||||
<div className="mb-5 p-4 border rounded shadow-sm">
|
||||
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
|
||||
onClick={() => handleToggleCollapse('dadosPessoais')}
|
||||
style={{ fontSize: '1.8rem' }}>
|
||||
{/* DADOS PESSOAIS */}
|
||||
<div className="form-section">
|
||||
<h4 className="section-header" onClick={() => handleToggleCollapse('dadosPessoais')}>
|
||||
Dados Pessoais
|
||||
<span className="fs-5">
|
||||
<span className="section-toggle">
|
||||
{collapsedSections.dadosPessoais ? '▲' : '▼'}
|
||||
</span>
|
||||
</h4>
|
||||
<div className={`collapse${collapsedSections.dadosPessoais ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
<div className="col-md-6 mb-3 d-flex align-items-center">
|
||||
<div className="col-md-6 mb-3 avatar-container">
|
||||
<div className="me-3">
|
||||
{avatarUrl ? (
|
||||
<img
|
||||
src={avatarUrl}
|
||||
alt="Avatar do Médico"
|
||||
style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover' }}
|
||||
className="avatar-image"
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
width: '100px',
|
||||
height: '100px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: '#e0e0e0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '3.5rem',
|
||||
color: '#9e9e9e'
|
||||
}}
|
||||
>
|
||||
<div className="avatar-placeholder">
|
||||
☤
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="foto-input" className="btn btn-primary" style={{ fontSize: '1rem' }}>Carregar Foto</label>
|
||||
<label htmlFor="foto-input" className="btn btn-primary file-input-label">Carregar Foto</label>
|
||||
<input
|
||||
type="file"
|
||||
className="form-control d-none"
|
||||
@ -413,31 +329,31 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
onChange={handleChange}
|
||||
accept="image/*"
|
||||
/>
|
||||
{formData.foto && <span className="ms-2" style={{ fontSize: '1rem' }}>{formData.foto.name}</span>}
|
||||
{formData.foto && <span className="ms-2 form-label">{formData.foto.name}</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nome: *</label>
|
||||
<label className="form-label">Nome: *</label>
|
||||
<input
|
||||
ref={nomeRef}
|
||||
type="text"
|
||||
className="form-control"
|
||||
className="form-control form-control-custom"
|
||||
name="full_name"
|
||||
value={formData.full_name || ''}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Data de nascimento:</label>
|
||||
<input type="date" className="form-control" name="birth_date" value={formData.birth_date || ''} onChange={handleChange} min="1900-01-01" max="2025-09-24" />
|
||||
<label className="form-label">Data de nascimento:</label>
|
||||
<input type="date" className="form-control form-control-custom" name="birth_date" value={formData.birth_date || ''} onChange={handleChange} min="1900-01-01" max="2025-09-24" />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>CPF: *</label>
|
||||
<label className="form-label">CPF: *</label>
|
||||
<input
|
||||
ref={cpfRef}
|
||||
type="text"
|
||||
className={`form-control ${cpfError ? 'is-invalid' : ''}`}
|
||||
className={`form-control form-control-custom ${cpfError ? 'is-invalid' : ''}`}
|
||||
name="cpf"
|
||||
value={formData.cpf || ''}
|
||||
onChange={handleChange}
|
||||
@ -450,10 +366,10 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Estado do CRM: *</label>
|
||||
<label className="form-label">Estado do CRM: *</label>
|
||||
<select
|
||||
ref={crmUfRef}
|
||||
className="form-control"
|
||||
className="form-control form-control-custom"
|
||||
name="crm_uf"
|
||||
value={formData.crm_uf || ''}
|
||||
onChange={handleChange}
|
||||
@ -489,11 +405,11 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>CRM: *</label>
|
||||
<label className="form-label">CRM: *</label>
|
||||
<input
|
||||
ref={crmRef}
|
||||
type="text"
|
||||
className="form-control"
|
||||
className="form-control form-control-custom"
|
||||
name="crm"
|
||||
value={formData.crm || ''}
|
||||
onChange={handleChange}
|
||||
@ -501,8 +417,8 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Especialização:</label>
|
||||
<select className="form-control" name="specialty" value={formData.specialty || ''} onChange={handleChange}>
|
||||
<label className="form-label">Especialização:</label>
|
||||
<select className="form-control form-control-custom" name="specialty" value={formData.specialty || ''} onChange={handleChange}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="Clínica Geral">Clínica médica (clínico geral)</option>
|
||||
<option value="Pediatria">Pediatria</option>
|
||||
@ -523,105 +439,100 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-5 p-4 border rounded shadow-sm">
|
||||
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
|
||||
onClick={() => handleToggleCollapse('contato')}
|
||||
style={{ fontSize: '1.8rem' }}>
|
||||
{/* CONTATO */}
|
||||
<div className="form-section">
|
||||
<h4 className="section-header" onClick={() => handleToggleCollapse('contato')}>
|
||||
Contato
|
||||
<span className="fs-5">
|
||||
<span className="section-toggle">
|
||||
{collapsedSections.contato ? '▲' : '▼'}
|
||||
</span>
|
||||
</h4>
|
||||
<div className={`collapse${collapsedSections.contato ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Email: *</label>
|
||||
<label className="form-label">Email: *</label>
|
||||
<input
|
||||
ref={emailRef}
|
||||
type="email"
|
||||
className="form-control"
|
||||
className="form-control form-control-custom"
|
||||
name="email"
|
||||
value={formData.email || ''}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Telefone: *</label>
|
||||
<label className="form-label">Telefone: *</label>
|
||||
<input
|
||||
ref={telefoneRef}
|
||||
type="text"
|
||||
className="form-control"
|
||||
className="form-control form-control-custom"
|
||||
name="phone_mobile"
|
||||
value={formData.phone_mobile || ''}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Telefone 2:</label>
|
||||
<input type="text" className="form-control" name="phone2" value={formData.phone2 || ''} onChange={handleChange} />
|
||||
<label className="form-label">Telefone 2:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="phone2" value={formData.phone2 || ''} onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-5 p-4 border rounded shadow-sm">
|
||||
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
|
||||
onClick={() => handleToggleCollapse('endereco')}
|
||||
style={{ fontSize: '1.8rem' }}>
|
||||
{/* ENDEREÇO */}
|
||||
<div className="form-section">
|
||||
<h4 className="section-header" onClick={() => handleToggleCollapse('endereco')}>
|
||||
Endereço
|
||||
<span className="fs-5">
|
||||
<span className="section-toggle">
|
||||
{collapsedSections.endereco ? '▲' : '▼'}
|
||||
</span>
|
||||
</h4>
|
||||
<div className={`collapse${collapsedSections.endereco ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
<div className="col-md-4 mb-3">
|
||||
<label>CEP:</label>
|
||||
<input type="text" className="form-control" name="cep" value={formData.cep || ''} onChange={handleChange} onBlur={handleCepBlur} />
|
||||
<label className="form-label">CEP:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="cep" value={formData.cep || ''} onChange={handleChange} onBlur={handleCepBlur} />
|
||||
</div>
|
||||
<div className="col-md-8 mb-3">
|
||||
<label>Rua:</label>
|
||||
<input type="text" className="form-control" name="street" value={formData.street || ''} onChange={handleChange} />
|
||||
<label className="form-label">Rua:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="street" value={formData.street || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Bairro:</label>
|
||||
<input type="text" className="form-control" name="neighborhood" value={formData.neighborhood || ''} onChange={handleChange} />
|
||||
<label className="form-label">Bairro:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="neighborhood" value={formData.neighborhood || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label>Cidade:</label>
|
||||
<input type="text" className="form-control" name="city" value={formData.city || ''} onChange={handleChange} />
|
||||
<label className="form-label">Cidade:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="city" value={formData.city || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-2 mb-3">
|
||||
<label>Estado:</label>
|
||||
<input type="text" className="form-control" name="state" value={formData.state || ''} onChange={handleChange} />
|
||||
<label className="form-label">Estado:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="state" value={formData.state || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label>Número:</label>
|
||||
<input type="text" className="form-control" name="number" value={formData.number || ''} onChange={handleChange} />
|
||||
<label className="form-label">Número:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="number" value={formData.number || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-8 mb-3">
|
||||
<label>Complemento:</label>
|
||||
<input type="text" className="form-control" name="complement" value={formData.complement || ''} onChange={handleChange} />
|
||||
<label className="form-label">Complemento:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="complement" value={formData.complement || ''} onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 text-center">
|
||||
{/* BOTÕES DE AÇÃO */}
|
||||
<div className="actions-container">
|
||||
<button
|
||||
className="btn btn-success me-3"
|
||||
className="btn btn-success btn-submit"
|
||||
onClick={handleSubmit}
|
||||
disabled={isLoading}
|
||||
style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}
|
||||
>
|
||||
{isLoading ? 'Salvando...' : 'Salvar Médico'}
|
||||
</button>
|
||||
|
||||
<Link to={`/${location.pathname.split("/")[1]}/medicos`}>
|
||||
<button
|
||||
className="btn btn-light"
|
||||
style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}
|
||||
>
|
||||
<button className="btn btn-light btn-cancel">
|
||||
Cancelar
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
215
src/components/patients/PatientForm.css
Normal file
215
src/components/patients/PatientForm.css
Normal file
@ -0,0 +1,215 @@
|
||||
.patient-form-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.patient-form-title {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin-bottom: 2rem;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.8rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-toggle {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-control-custom {
|
||||
font-size: 1.1rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.avatar-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background-color: #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 3.5rem;
|
||||
color: #9e9e9e;
|
||||
}
|
||||
|
||||
.file-input-label {
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.checkbox-custom {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
font-size: 1.1rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.textarea-custom {
|
||||
font-size: 1.1rem;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.actions-container {
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
font-size: 1.2rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
font-size: 1.2rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
.modal-overlay {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
width: 400px;
|
||||
max-width: 90%;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: #1e3a8a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 25px 20px;
|
||||
}
|
||||
|
||||
.modal-message {
|
||||
color: #111;
|
||||
font-size: 1.1rem;
|
||||
margin: 0 0 15px 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.modal-list-item {
|
||||
color: #111;
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 15px 20px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.modal-confirm-btn {
|
||||
background-color: #1e3a8a;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 8px 20px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.patient-form-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.btn-submit,
|
||||
.btn-cancel {
|
||||
font-size: 1.1rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { FormatTelefones, FormatPeso, FormatCPF } from '../utils/Formatar/Format';
|
||||
import './PatientForm.css';
|
||||
|
||||
function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
const [avatarUrl, setAvatarUrl] = useState(null);
|
||||
@ -20,17 +21,13 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
const emailRef = useRef(null);
|
||||
const telefoneRef = useRef(null);
|
||||
|
||||
|
||||
const validarCPF = (cpf) => {
|
||||
const cpfLimpo = cpf.replace(/\D/g, '');
|
||||
|
||||
|
||||
if (cpfLimpo.length !== 11) return false;
|
||||
|
||||
|
||||
if (/^(\d)\1+$/.test(cpfLimpo)) return false;
|
||||
|
||||
|
||||
let soma = 0;
|
||||
for (let i = 0; i < 9; i++) {
|
||||
soma += parseInt(cpfLimpo.charAt(i)) * (10 - i);
|
||||
@ -38,7 +35,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
let resto = 11 - (soma % 11);
|
||||
let digito1 = resto === 10 || resto === 11 ? 0 : resto;
|
||||
|
||||
|
||||
soma = 0;
|
||||
for (let i = 0; i < 10; i++) {
|
||||
soma += parseInt(cpfLimpo.charAt(i)) * (11 - i);
|
||||
@ -46,7 +42,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
resto = 11 - (soma % 11);
|
||||
let digito2 = resto === 10 || resto === 11 ? 0 : resto;
|
||||
|
||||
|
||||
return digito1 === parseInt(cpfLimpo.charAt(9)) && digito2 === parseInt(cpfLimpo.charAt(10));
|
||||
};
|
||||
|
||||
@ -71,12 +66,10 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
const handleChange = (e) => {
|
||||
const { name, value, type, checked, files } = e.target;
|
||||
|
||||
|
||||
if (value && emptyFields.includes(name)) {
|
||||
setEmptyFields(prev => prev.filter(field => field !== name));
|
||||
}
|
||||
|
||||
|
||||
if (name === 'cpf' && cpfError) {
|
||||
setCpfError('');
|
||||
}
|
||||
@ -120,7 +113,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
switch (fieldName) {
|
||||
case 'full_name':
|
||||
fieldRef = nomeRef;
|
||||
|
||||
setCollapsedSections(prev => ({ ...prev, dadosPessoais: true }));
|
||||
break;
|
||||
case 'cpf':
|
||||
@ -139,7 +131,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
if (fieldRef.current) {
|
||||
fieldRef.current.scrollIntoView({
|
||||
@ -148,11 +139,9 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
});
|
||||
fieldRef.current.focus();
|
||||
|
||||
|
||||
fieldRef.current.style.border = '2px solid #dc3545';
|
||||
fieldRef.current.style.boxShadow = '0 0 0 0.2rem rgba(220, 53, 69, 0.25)';
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
if (fieldRef.current) {
|
||||
fieldRef.current.style.border = '';
|
||||
@ -164,7 +153,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
|
||||
const missingFields = [];
|
||||
if (!formData.full_name) missingFields.push('full_name');
|
||||
if (!formData.cpf) missingFields.push('cpf');
|
||||
@ -175,17 +163,14 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
setEmptyFields(missingFields);
|
||||
setShowRequiredModal(true);
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
if (missingFields.length > 0) {
|
||||
scrollToEmptyField(missingFields[0]);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
}, 500);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const cpfLimpo = formData.cpf.replace(/\D/g, '');
|
||||
if (cpfLimpo.length !== 11) {
|
||||
setShowRequiredModal(true);
|
||||
@ -195,7 +180,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (!validarCPF(formData.cpf)) {
|
||||
setShowRequiredModal(true);
|
||||
setEmptyFields(['cpf']);
|
||||
@ -205,8 +189,10 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
}
|
||||
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(formData.email)) {
|
||||
throw new Error('Email inválido. Por favor, verifique o email digitado.');
|
||||
}
|
||||
|
||||
|
||||
await onSave({ ...formData, bmi: parseFloat(formData.bmi) || null });
|
||||
};
|
||||
|
||||
@ -215,48 +201,36 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card p-3">
|
||||
<h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
|
||||
<div className="card patient-form-container">
|
||||
<h3 className="patient-form-title">MediConnect</h3>
|
||||
|
||||
{/* DADOS PESSOAIS */}
|
||||
<div className="mb-5 p-4 border rounded shadow-sm">
|
||||
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('dadosPessoais')} style={{ fontSize: '1.8rem' }}>
|
||||
<div className="form-section">
|
||||
<h4 className="section-header" onClick={() => handleToggleCollapse('dadosPessoais')}>
|
||||
Dados Pessoais
|
||||
<span className="fs-5">
|
||||
<span className="section-toggle">
|
||||
{collapsedSections.dadosPessoais ? '▲' : '▼'}
|
||||
</span>
|
||||
</h4>
|
||||
<div className={`collapse${collapsedSections.dadosPessoais ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
{/* AVATAR E INPUT DE FOTO */}
|
||||
<div className="col-md-6 mb-3 d-flex align-items-center">
|
||||
<div className="col-md-6 mb-3 avatar-container">
|
||||
<div className="me-3">
|
||||
{avatarUrl ? (
|
||||
<img
|
||||
src={avatarUrl}
|
||||
alt="Avatar do Paciente"
|
||||
style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover' }}
|
||||
className="avatar-image"
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
width: '100px',
|
||||
height: '100px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: '#e0e0e0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '3.5rem',
|
||||
color: '#9e9e9e'
|
||||
}}
|
||||
>
|
||||
<div className="avatar-placeholder">
|
||||
☤
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="foto-input" className="btn btn-primary" style={{ fontSize: '1rem' }}>Carregar Foto</label>
|
||||
<label htmlFor="foto-input" className="btn btn-primary file-input-label">Carregar Foto</label>
|
||||
<input
|
||||
type="file"
|
||||
className="form-control d-none"
|
||||
@ -265,48 +239,45 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
onChange={handleChange}
|
||||
accept="image/*"
|
||||
/>
|
||||
{formData.foto && <span className="ms-2" style={{ fontSize: '1rem' }}>{formData.foto.name}</span>}
|
||||
{formData.foto && <span className="ms-2 form-label">{formData.foto.name}</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CAMPOS OBRIGATÓRIOS */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nome: *</label>
|
||||
<label className="form-label">Nome: *</label>
|
||||
<input
|
||||
ref={nomeRef}
|
||||
type="text"
|
||||
className="form-control"
|
||||
className="form-control form-control-custom"
|
||||
name="full_name"
|
||||
value={formData.full_name || ''}
|
||||
onChange={handleChange}
|
||||
style={{ fontSize: '1.1rem' }}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nome social:</label>
|
||||
<input type="text" className="form-control" name="social_name" value={formData.social_name || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Nome social:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="social_name" value={formData.social_name || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Data de nascimento:</label>
|
||||
<label className="form-label">Data de nascimento:</label>
|
||||
<input
|
||||
type="date"
|
||||
className="form-control"
|
||||
className="form-control form-control-custom"
|
||||
name="birth_date"
|
||||
value={formData.birth_date || ''}
|
||||
onChange={handleChange}
|
||||
style={{ fontSize: '1.1rem' }}
|
||||
min="1900-01-01" max="2025-09-24"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Gênero:</label>
|
||||
<label className="form-label">Gênero:</label>
|
||||
<select
|
||||
className="form-control"
|
||||
className="form-control form-control-custom"
|
||||
name="sex"
|
||||
value={formData.sex || ''}
|
||||
onChange={handleChange}
|
||||
style={{ fontSize: '1.1rem' }}
|
||||
>
|
||||
<option value="">Selecione</option>
|
||||
<option value="Masculino">Masculino</option>
|
||||
@ -315,15 +286,14 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>CPF: *</label>
|
||||
<label className="form-label">CPF: *</label>
|
||||
<input
|
||||
ref={cpfRef}
|
||||
type="text"
|
||||
className={`form-control ${cpfError ? 'is-invalid' : ''}`}
|
||||
className={`form-control form-control-custom ${cpfError ? 'is-invalid' : ''}`}
|
||||
name="cpf"
|
||||
value={formData.cpf || ''}
|
||||
onChange={handleChange}
|
||||
style={{ fontSize: '1.1rem' }}
|
||||
required
|
||||
/>
|
||||
{cpfError && (
|
||||
@ -333,12 +303,12 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
)}
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>RG:</label>
|
||||
<input type="text" className="form-control" name="rg" value={formData.rg || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">RG:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="rg" value={formData.rg || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Outros documentos:</label>
|
||||
<select className="form-control" name="document_type" value={formData.document_type || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<label className="form-label">Outros documentos:</label>
|
||||
<select className="form-control form-control-custom" name="document_type" value={formData.document_type || ''} onChange={handleChange}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="CNH">CNH</option>
|
||||
<option value="Passaporte">Passaporte</option>
|
||||
@ -346,12 +316,12 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Número do documento:</label>
|
||||
<input type="text" className="form-control" name="document_number" value={formData.document_number || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Número do documento:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="document_number" value={formData.document_number || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Etnia e Raça:</label>
|
||||
<select className="form-control" name="race" value={formData.race || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<label className="form-label">Etnia e Raça:</label>
|
||||
<select className="form-control form-control-custom" name="race" value={formData.race || ''} onChange={handleChange}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="Branca">Branca</option>
|
||||
<option value="Preta">Preta</option>
|
||||
@ -361,20 +331,20 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Naturalidade:</label>
|
||||
<input type="text" className="form-control" name="naturality" value={formData.naturalidade || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Naturalidade:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="naturality" value={formData.naturalidade || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nacionalidade:</label>
|
||||
<input type="text" className="form-control" name="nationality" value={formData.nationality || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Nacionalidade:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="nationality" value={formData.nationality || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Profissão:</label>
|
||||
<input type="text" className="form-control" name="profession" value={formData.profession || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Profissão:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="profession" value={formData.profession || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Estado civil:</label>
|
||||
<select className="form-control" name="marital_status" value={formData.marital_status || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<label className="form-label">Estado civil:</label>
|
||||
<select className="form-control form-control-custom" name="marital_status" value={formData.marital_status || ''} onChange={handleChange}>
|
||||
<option value="" disabled>Selecione</option>
|
||||
<option value="Solteiro">Solteiro(a)</option>
|
||||
<option value="Casado">Casado(a)</option>
|
||||
@ -383,37 +353,37 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nome da Mãe:</label>
|
||||
<input type="text" className="form-control" name="mother_name" value={formData.mother_name || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Nome da Mãe:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="mother_name" value={formData.mother_name || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Profissão da mãe:</label>
|
||||
<input type="text" className="form-control" name="mother_profession" value={formData.mother_profession || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Profissão da mãe:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="mother_profession" value={formData.mother_profession || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nome do Pai:</label>
|
||||
<input type="text" className="form-control" name="father_name" value={formData.father_name || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Nome do Pai:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="father_name" value={formData.father_name || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Profissão do pai:</label>
|
||||
<input type="text" className="form-control" name="father_profession" value={formData.father_profession || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Profissão do pai:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="father_profession" value={formData.father_profession || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nome do responsável:</label>
|
||||
<input type="text" className="form-control" name="guardian_name" value={formData.guardian_name || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Nome do responsável:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="guardian_name" value={formData.guardian_name || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>CPF do responsável:</label>
|
||||
<input type="text" className="form-control" name="guardian_cpf" value={formData.guardian_cpf || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">CPF do responsável:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="guardian_cpf" value={formData.guardian_cpf || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Identificador de outro sistema:</label>
|
||||
<input type="text" className="form-control" name="legacy_code" value={formData.legacy_code || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Identificador de outro sistema:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="legacy_code" value={formData.legacy_code || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-12 mb-3">
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" type="checkbox" name="rn_in_insurance" checked={formData.rn_in_insurance || false} onChange={handleChange} id="rn_in_insurance" style={{ transform: 'scale(1.2)' }} />
|
||||
<label className="form-check-label ms-2" htmlFor="rn_in_insurance" style={{ fontSize: '1.1rem' }}>
|
||||
<input className="form-check-input checkbox-custom" type="checkbox" name="rn_in_insurance" checked={formData.rn_in_insurance || false} onChange={handleChange} id="rn_in_insurance" />
|
||||
<label className="form-check-label checkbox-label" htmlFor="rn_in_insurance">
|
||||
RN na Guia do convênio
|
||||
</label>
|
||||
</div>
|
||||
@ -421,35 +391,34 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
|
||||
{/* CAMPOS ADICIONAIS */}
|
||||
<div className="col-md-12 mb-3 mt-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Observações:</label>
|
||||
<textarea className="form-control" name="notes" value={formData.notes || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} placeholder='alergias, doenças crônicas, informações sobre porteses ou marca-passo, etc'></textarea>
|
||||
<label className="form-label">Observações:</label>
|
||||
<textarea className="form-control textarea-custom" name="notes" value={formData.notes || ''} onChange={handleChange} placeholder='alergias, doenças crônicas, informações sobre porteses ou marca-passo, etc'></textarea>
|
||||
</div>
|
||||
<div className="col-md-12 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Anexos do Paciente:</label>
|
||||
<label className="form-label">Anexos do Paciente:</label>
|
||||
<div>
|
||||
<label htmlFor="anexos-input" className="btn btn-secondary" style={{ fontSize: '1.1rem' }}>Escolher arquivo</label>
|
||||
<label htmlFor="anexos-input" className="btn btn-secondary file-input-label">Escolher arquivo</label>
|
||||
<input type="file" className="form-control d-none" name="anexos" id="anexos-input" onChange={handleChange} />
|
||||
<span className="ms-2" style={{ fontSize: '1.1rem' }}>{formData.anexos ? formData.anexos.name : 'Nenhum arquivo escolhido'}</span>
|
||||
<span className="ms-2 form-label">{formData.anexos ? formData.anexos.name : 'Nenhum arquivo escolhido'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* INFORMAÇÕES MÉDICAS */}
|
||||
<div className="mb-5 p-4 border rounded shadow-sm">
|
||||
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('infoMedicas')} style={{ fontSize: '1.8rem' }}>
|
||||
<div className="form-section">
|
||||
<h4 className="section-header" onClick={() => handleToggleCollapse('infoMedicas')}>
|
||||
Informações Médicas
|
||||
<span className="fs-5">
|
||||
<span className="section-toggle">
|
||||
{collapsedSections.infoMedicas ? '▲' : '▼'}
|
||||
</span>
|
||||
</h4>
|
||||
<div className={`collapse${collapsedSections.infoMedicas ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Tipo Sanguíneo:</label>
|
||||
<select className="form-control" name="blood_type" value={formData.blood_type || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<label className="form-label">Tipo Sanguíneo:</label>
|
||||
<select className="form-control form-control-custom" name="blood_type" value={formData.blood_type || ''} onChange={handleChange}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="A+">A+</option>
|
||||
<option value="A-">A-</option>
|
||||
@ -462,35 +431,34 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-2 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Peso (kg):</label>
|
||||
<input type="text" step="0.1" className="form-control" name="weight_kg" value={formData.weight_kg || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Peso (kg):</label>
|
||||
<input type="text" step="0.1" className="form-control form-control-custom" name="weight_kg" value={formData.weight_kg || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-2 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Altura (m):</label>
|
||||
<input type="text" step="0.01" className="form-control" name="height_m" value={formData.height_m || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Altura (m):</label>
|
||||
<input type="text" step="0.01" className="form-control form-control-custom" name="height_m" value={formData.height_m || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-2 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>IMC (kg/m²):</label>
|
||||
<input type="text" className="form-control" name="bmi" value={formData.bmi || ''} readOnly disabled style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">IMC (kg/m²):</label>
|
||||
<input type="text" className="form-control form-control-custom" name="bmi" value={formData.bmi || ''} readOnly disabled />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* INFORMAÇÕES DE CONVÊNIO */}
|
||||
<div className="mb-5 p-4 border rounded shadow-sm">
|
||||
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('infoConvenio')} style={{ fontSize: '1.8rem' }}>
|
||||
<div className="form-section">
|
||||
<h4 className="section-header" onClick={() => handleToggleCollapse('infoConvenio')}>
|
||||
Informações de convênio
|
||||
<span className="fs-5">
|
||||
<span className="section-toggle">
|
||||
{collapsedSections.infoConvenio ? '▲' : '▼'}
|
||||
</span>
|
||||
</h4>
|
||||
<div className={`collapse${collapsedSections.infoConvenio ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Convênio:</label>
|
||||
<select className="form-control" name="convenio" value={formData.convenio || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<label className="form-label">Convênio:</label>
|
||||
<select className="form-control form-control-custom" name="convenio" value={formData.convenio || ''} onChange={handleChange}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="Amil">Amil</option>
|
||||
<option value="Bradesco Saúde">Bradesco Saúde</option>
|
||||
@ -499,21 +467,21 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Plano:</label>
|
||||
<input type="text" className="form-control" name="plano" value={formData.plano || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Plano:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="plano" value={formData.plano || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nº de matrícula:</label>
|
||||
<input type="text" className="form-control" name="numeroMatricula" value={formData.numeroMatricula || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Nº de matrícula:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="numeroMatricula" value={formData.numeroMatricula || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Validade da Carteira:</label>
|
||||
<input type="date" className="form-control" name="validadeCarteira" value={formData.validadeCarteira || ''} onChange={handleChange} disabled={formData.validadeIndeterminada} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Validade da Carteira:</label>
|
||||
<input type="date" className="form-control form-control-custom" name="validadeCarteira" value={formData.validadeCarteira || ''} onChange={handleChange} disabled={formData.validadeIndeterminada} />
|
||||
</div>
|
||||
<div className="col-md-2 d-flex align-items-end mb-3">
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" type="checkbox" name="validadeIndeterminada" checked={formData.validadeIndeterminada || false} onChange={handleChange} id="validadeIndeterminada" style={{ transform: 'scale(1.2)' }} />
|
||||
<label className="form-check-label ms-2" htmlFor="validadeIndeterminada" style={{ fontSize: '1.1rem' }}>
|
||||
<input className="form-check-input checkbox-custom" type="checkbox" name="validadeIndeterminada" checked={formData.validadeIndeterminada || false} onChange={handleChange} id="validadeIndeterminada" />
|
||||
<label className="form-check-label checkbox-label" htmlFor="validadeIndeterminada">
|
||||
Validade indeterminada
|
||||
</label>
|
||||
</div>
|
||||
@ -521,8 +489,8 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
{/* PACIENTE VIP */}
|
||||
<div className="col-md-12 mb-3 mt-3">
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" type="checkbox" name="vip" checked={formData.vip || false} onChange={handleChange} id="vip" style={{ transform: 'scale(1.2)' }} />
|
||||
<label className="form-check-label ms-2" htmlFor="vip" style={{ fontSize: '1.1rem' }}>
|
||||
<input className="form-check-input checkbox-custom" type="checkbox" name="vip" checked={formData.vip || false} onChange={handleChange} id="vip" />
|
||||
<label className="form-check-label checkbox-label" htmlFor="vip">
|
||||
Paciente VIP
|
||||
</label>
|
||||
</div>
|
||||
@ -532,185 +500,129 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</div>
|
||||
|
||||
{/* ENDEREÇO */}
|
||||
<div className="mb-5 p-4 border rounded shadow-sm">
|
||||
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('endereco')} style={{ fontSize: '1.8rem' }}>
|
||||
<div className="form-section">
|
||||
<h4 className="section-header" onClick={() => handleToggleCollapse('endereco')}>
|
||||
Endereço
|
||||
<span className="fs-5">
|
||||
<span className="section-toggle">
|
||||
{collapsedSections.endereco ? '▲' : '▼'}
|
||||
</span>
|
||||
</h4>
|
||||
<div className={`collapse${collapsedSections.endereco ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
<div className="col-md-4 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>CEP:</label>
|
||||
<input type="text" className="form-control" name="cep" value={formData.cep || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">CEP:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="cep" value={formData.cep || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-8 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Rua:</label>
|
||||
<input type="text" className="form-control" name="street" value={formData.street || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Rua:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="street" value={formData.street || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Bairro:</label>
|
||||
<input type="text" className="form-control" name="neighborhood" value={formData.neighborhood || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Bairro:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="neighborhood" value={formData.neighborhood || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Cidade:</label>
|
||||
<input type="text" className="form-control" name="city" value={formData.city || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Cidade:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="city" value={formData.city || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-2 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Estado:</label>
|
||||
<input type="text" className="form-control" name="state" value={formData.state || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Estado:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="state" value={formData.state || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Número:</label>
|
||||
<input type="text" className="form-control" name="number" value={formData.number || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Número:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="number" value={formData.number || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-8 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Complemento:</label>
|
||||
<input type="text" className="form-control" name="complement" value={formData.complement || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Complemento:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="complement" value={formData.complement || ''} onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-5 p-4 border rounded shadow-sm">
|
||||
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('contato')} style={{ fontSize: '1.8rem' }}>
|
||||
{/* CONTATO */}
|
||||
<div className="form-section">
|
||||
<h4 className="section-header" onClick={() => handleToggleCollapse('contato')}>
|
||||
Contato
|
||||
<span className="fs-5">
|
||||
<span className="section-toggle">
|
||||
{collapsedSections.contato ? '▲' : '▼'}
|
||||
</span>
|
||||
</h4>
|
||||
<div className={`collapse${collapsedSections.contato ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Email: *</label>
|
||||
<label className="form-label">Email: *</label>
|
||||
<input
|
||||
ref={emailRef}
|
||||
type="email"
|
||||
className="form-control"
|
||||
className="form-control form-control-custom"
|
||||
name="email"
|
||||
value={formData.email || ''}
|
||||
onChange={handleChange}
|
||||
style={{ fontSize: '1.1rem' }}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Telefone: *</label>
|
||||
<label className="form-label">Telefone: *</label>
|
||||
<input
|
||||
ref={telefoneRef}
|
||||
type="text"
|
||||
className="form-control"
|
||||
className="form-control form-control-custom"
|
||||
name="phone_mobile"
|
||||
value={formData.phone_mobile || ''}
|
||||
onChange={handleChange}
|
||||
style={{ fontSize: '1.1rem' }}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Telefone 2:</label>
|
||||
<input type="text" className="form-control" name="phone1" value={formData.phone1 || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Telefone 2:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="phone1" value={formData.phone1 || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Telefone 3:</label>
|
||||
<input type="text" className="form-control" name="phone2" value={formData.phone2 || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Telefone 3:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="phone2" value={formData.phone2 || ''} onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* MODAL DE VALIDAÇÃO */}
|
||||
{showRequiredModal && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
zIndex: 9999,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: "10px",
|
||||
width: "400px",
|
||||
maxWidth: "90%",
|
||||
boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#1e3a8a",
|
||||
padding: "15px 20px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Atenção</h5>
|
||||
<div className="modal-overlay">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">Atenção</h5>
|
||||
<button
|
||||
onClick={handleModalClose}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
fontSize: "20px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
className="modal-close-btn"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div style={{ padding: "25px 20px" }}>
|
||||
<p style={{ color: "#111", fontSize: "1.1rem", margin: "0 0 15px 0", fontWeight: "bold" }}>
|
||||
<div className="modal-body">
|
||||
<p className="modal-message">
|
||||
{cpfError ? 'Problema com o CPF:' : 'Por favor, preencha:'}
|
||||
</p>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginLeft: '10px' }}>
|
||||
<div className="modal-list">
|
||||
{cpfError ? (
|
||||
<p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>{cpfError}</p>
|
||||
<p className="modal-list-item">{cpfError}</p>
|
||||
) : (
|
||||
<>
|
||||
{!formData.full_name && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Nome</p>}
|
||||
{!formData.cpf && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- CPF</p>}
|
||||
{!formData.email && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Email</p>}
|
||||
{!formData.phone_mobile && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Telefone</p>}
|
||||
{!formData.full_name && <p className="modal-list-item">- Nome</p>}
|
||||
{!formData.cpf && <p className="modal-list-item">- CPF</p>}
|
||||
{!formData.email && <p className="modal-list-item">- Email</p>}
|
||||
{!formData.phone_mobile && <p className="modal-list-item">- Telefone</p>}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
padding: "15px 20px",
|
||||
borderTop: "1px solid #ddd",
|
||||
}}
|
||||
>
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
onClick={handleModalClose}
|
||||
style={{
|
||||
backgroundColor: "#1e3a8a",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
padding: "8px 20px",
|
||||
borderRadius: "6px",
|
||||
cursor: "pointer",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
className="modal-confirm-btn"
|
||||
>
|
||||
Fechar
|
||||
</button>
|
||||
@ -719,13 +631,13 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
<div className="mt-3 text-center">
|
||||
<button className="btn btn-success me-3" onClick={handleSubmit} disabled={isLoading} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
|
||||
{/* BOTÕES DE AÇÃO */}
|
||||
<div className="actions-container">
|
||||
<button className="btn btn-success btn-submit" onClick={handleSubmit} disabled={isLoading}>
|
||||
{isLoading ? 'Salvando...' : 'Salvar Paciente'}
|
||||
</button>
|
||||
<Link to='/secretaria/pacientes'>
|
||||
<button className="btn btn-light" style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
|
||||
<button className="btn btn-light btn-cancel">
|
||||
Cancelar
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
@ -3,6 +3,7 @@ import { useAuth } from '../components/utils/AuthProvider';
|
||||
import DoctorForm from '../components/doctors/DoctorForm';
|
||||
import API_KEY from '../components/utils/apiKeys';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
import './style/DoctorCadastroManager.css';
|
||||
|
||||
function DoctorCadastroManager() {
|
||||
const [doctorData, setDoctorData] = useState({});
|
||||
@ -65,7 +66,6 @@ function DoctorCadastroManager() {
|
||||
if (!response.ok) {
|
||||
let errorMessage = `Erro ao salvar médico (${response.status})`;
|
||||
|
||||
|
||||
const responseText = await response.text();
|
||||
console.log("Conteúdo da resposta:", responseText);
|
||||
|
||||
@ -75,7 +75,6 @@ function DoctorCadastroManager() {
|
||||
console.error("Erro detalhado:", errorData);
|
||||
errorMessage = errorData.message || errorData.details || errorMessage;
|
||||
} catch (jsonError) {
|
||||
|
||||
errorMessage = responseText || errorMessage;
|
||||
}
|
||||
} else {
|
||||
@ -101,7 +100,6 @@ function DoctorCadastroManager() {
|
||||
result = { success: true, status: response.status };
|
||||
}
|
||||
|
||||
|
||||
setShowSuccessModal(true);
|
||||
|
||||
} catch (error) {
|
||||
@ -110,7 +108,7 @@ function DoctorCadastroManager() {
|
||||
let userFriendlyMessage = error.message;
|
||||
|
||||
if (error.message.includes('doctors_cpf_key') || error.message.includes('duplicate key')) {
|
||||
userFriendlyMessage = 'Já existe um médico cadastrado com este CPF. Verifique os dados ou edite o médico existente.';
|
||||
userFriendlyMessage = 'Já existe um médico cadastrado com este CPF.';
|
||||
} else if (error.message.includes('Unexpected end of JSON input')) {
|
||||
userFriendlyMessage = 'Erro de comunicação com o servidor. Tente novamente.';
|
||||
}
|
||||
@ -124,7 +122,6 @@ function DoctorCadastroManager() {
|
||||
|
||||
const handleCloseSuccessModal = () => {
|
||||
setShowSuccessModal(false);
|
||||
|
||||
const prefixo = location.pathname.split("/")[1];
|
||||
navigate(`/${prefixo}/medicos`);
|
||||
};
|
||||
@ -135,83 +132,35 @@ function DoctorCadastroManager() {
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoading && (
|
||||
<div className="loading-overlay">
|
||||
<div className="loading-spinner"></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showSuccessModal && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
zIndex: 9999,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: "10px",
|
||||
width: "400px",
|
||||
maxWidth: "90%",
|
||||
boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#28a745",
|
||||
padding: "15px 20px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Sucesso</h5>
|
||||
<div className="modal-overlay">
|
||||
<div className="modal-container">
|
||||
<div className="modal-header modal-header-success">
|
||||
<h5 className="modal-title">Sucesso</h5>
|
||||
<button
|
||||
onClick={handleCloseSuccessModal}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
fontSize: "20px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
className="modal-close-button"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: "25px 20px" }}>
|
||||
<p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>
|
||||
<div className="modal-body">
|
||||
<p className="modal-message">
|
||||
Médico cadastrado com sucesso!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
padding: "15px 20px",
|
||||
borderTop: "1px solid #ddd",
|
||||
}}
|
||||
>
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
onClick={handleCloseSuccessModal}
|
||||
style={{
|
||||
backgroundColor: "#28a745",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
padding: "8px 20px",
|
||||
borderRadius: "6px",
|
||||
cursor: "pointer",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
className="modal-button modal-button-success"
|
||||
>
|
||||
Fechar
|
||||
</button>
|
||||
@ -220,82 +169,29 @@ function DoctorCadastroManager() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{showErrorModal && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
zIndex: 9999,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: "10px",
|
||||
width: "400px",
|
||||
maxWidth: "90%",
|
||||
boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#dc3545",
|
||||
padding: "15px 20px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Erro</h5>
|
||||
<div className="modal-overlay">
|
||||
<div className="modal-container">
|
||||
<div className="modal-header modal-header-error">
|
||||
<h5 className="modal-title">Erro</h5>
|
||||
<button
|
||||
onClick={handleCloseErrorModal}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
fontSize: "20px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
className="modal-close-button"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: "25px 20px" }}>
|
||||
<p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>
|
||||
<div className="modal-body">
|
||||
<p className="modal-message">
|
||||
{errorMessage}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
padding: "15px 20px",
|
||||
borderTop: "1px solid #ddd",
|
||||
}}
|
||||
>
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
onClick={handleCloseErrorModal}
|
||||
style={{
|
||||
backgroundColor: "#dc3545",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
padding: "8px 20px",
|
||||
borderRadius: "6px",
|
||||
cursor: "pointer",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
className="modal-button modal-button-error"
|
||||
>
|
||||
Fechar
|
||||
</button>
|
||||
|
||||
@ -2,30 +2,40 @@ import React, { useState, useEffect } from "react";
|
||||
import API_KEY from "../components/utils/apiKeys";
|
||||
import { useAuth } from "../components/utils/AuthProvider";
|
||||
import { Link } from "react-router-dom";
|
||||
import "./style/TableDoctor.css";
|
||||
|
||||
function TableDoctor() {
|
||||
const { getAuthorizationHeader, isAuthenticated } = useAuth();
|
||||
|
||||
const [medicos, setMedicos] = useState([]);
|
||||
const [search, setSearch] = useState("");
|
||||
const [filtroEspecialidade, setFiltroEspecialidade] = useState("Todos");
|
||||
// REMOVIDO: const [filtroVIP, setFiltroVIP] = useState(false);
|
||||
const [filtroAniversariante, setFiltroAniversariante] = useState(false);
|
||||
|
||||
// estados do modal
|
||||
// Estados para filtros avançados
|
||||
const [showFiltrosAvancados, setShowFiltrosAvancados] = useState(false);
|
||||
const [filtroCidade, setFiltroCidade] = useState("");
|
||||
const [filtroEstado, setFiltroEstado] = useState("");
|
||||
const [idadeMinima, setIdadeMinima] = useState("");
|
||||
const [idadeMaxima, setIdadeMaxima] = useState("");
|
||||
const [dataInicial, setDataInicial] = useState("");
|
||||
const [dataFinal, setDataFinal] = useState("");
|
||||
|
||||
// estados do modal
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [selectedDoctorId, setSelectedDoctorId] = useState(null);
|
||||
|
||||
// Função para excluir médicos
|
||||
const deleteDoctor = async (id) => {
|
||||
|
||||
const authHeader = getAuthorizationHeader()
|
||||
console.log(id, 'teu id')
|
||||
|
||||
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append('apikey', API_KEY);
|
||||
myHeaders.append("Authorization", authHeader)
|
||||
|
||||
|
||||
var requestOptions = { method: "DELETE", redirect: "follow", headers:myHeaders };
|
||||
myHeaders.append('apikey', API_KEY);
|
||||
myHeaders.append("Authorization", authHeader)
|
||||
|
||||
var requestOptions = { method: "DELETE", redirect: "follow", headers: myHeaders };
|
||||
|
||||
try {
|
||||
const result = await fetch(
|
||||
@ -53,90 +63,331 @@ function TableDoctor() {
|
||||
);
|
||||
};
|
||||
|
||||
// Buscar médicos da API
|
||||
useEffect(() => {
|
||||
// Função para calcular idade a partir da data de nascimento
|
||||
const calcularIdade = (dataNascimento) => {
|
||||
if (!dataNascimento) return 0;
|
||||
const hoje = new Date();
|
||||
const nascimento = new Date(dataNascimento);
|
||||
let idade = hoje.getFullYear() - nascimento.getFullYear();
|
||||
const mes = hoje.getMonth() - nascimento.getMonth();
|
||||
|
||||
const authHeader = getAuthorizationHeader()
|
||||
|
||||
console.log(authHeader, 'aqui autorização')
|
||||
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("apikey", API_KEY);
|
||||
myHeaders.append("Authorization", `${authHeader}`);
|
||||
var requestOptions = {
|
||||
method: 'GET',
|
||||
headers: myHeaders,
|
||||
redirect: 'follow'
|
||||
if (mes < 0 || (mes === 0 && hoje.getDate() < nascimento.getDate())) {
|
||||
idade--;
|
||||
}
|
||||
return idade;
|
||||
};
|
||||
|
||||
<<<<<<< HEAD
|
||||
// Função para limpar todos os filtros
|
||||
const limparFiltros = () => {
|
||||
setSearch("");
|
||||
setFiltroEspecialidade("Todos");
|
||||
// REMOVIDO: setFiltroVIP(false);
|
||||
setFiltroAniversariante(false);
|
||||
setShowFiltrosAvancados(false); // Adicionado para fechar os avançados
|
||||
setFiltroCidade("");
|
||||
setFiltroEstado("");
|
||||
setIdadeMinima("");
|
||||
setIdadeMaxima("");
|
||||
setDataInicial("");
|
||||
setDataFinal("");
|
||||
};
|
||||
=======
|
||||
fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors", requestOptions)
|
||||
.then(response => response.json())
|
||||
.then(result => {setMedicos(result); console.log(result)})
|
||||
.catch(error => console.log('error', error));
|
||||
}, []);
|
||||
>>>>>>> main
|
||||
|
||||
// ✨ CORREÇÃO AQUI: Verificamos se 'medicos' é um array antes de filtrar.
|
||||
const medicosFiltrados = Array.isArray(medicos) ? medicos.filter(
|
||||
(medico) =>
|
||||
`${medico.nome} ${medico.cpf} ${medico.email} ${medico.telefone}`
|
||||
.toLowerCase()
|
||||
.includes(search.toLowerCase()) &&
|
||||
(filtroAniversariante ? ehAniversariante(medico.data_nascimento) : true)
|
||||
) : []; // Se não for um array, usamos um array vazio como fallback.
|
||||
// Buscar médicos da API
|
||||
useEffect(() => {
|
||||
const authHeader = getAuthorizationHeader()
|
||||
console.log(authHeader, 'aqui autorização')
|
||||
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("apikey", API_KEY);
|
||||
myHeaders.append("Authorization", `${authHeader}`);
|
||||
var requestOptions = {
|
||||
method: 'GET',
|
||||
headers: myHeaders,
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors", requestOptions)
|
||||
.then(response => response.json())
|
||||
.then(result => setMedicos(result))
|
||||
.catch(error => console.log('error', error));
|
||||
}, [isAuthenticated, getAuthorizationHeader]);
|
||||
|
||||
// ✨ FILTRO CORRIGIDO - Baseado na estrutura real dos dados
|
||||
const medicosFiltrados = Array.isArray(medicos) ? medicos.filter((medico) => {
|
||||
// Filtro por nome OU CPF - usando campos reais da API
|
||||
const buscaNome = medico.full_name?.toLowerCase().includes(search.toLowerCase());
|
||||
const buscaCPF = medico.cpf?.toLowerCase().includes(search.toLowerCase());
|
||||
const buscaEmail = medico.email?.toLowerCase().includes(search.toLowerCase());
|
||||
const passaBusca = search === "" || buscaNome || buscaCPF || buscaEmail;
|
||||
|
||||
// Filtro por especialidade - ajustando para campo real
|
||||
const passaEspecialidade = filtroEspecialidade === "Todos" || medico.specialty === filtroEspecialidade;
|
||||
|
||||
// REMOVIDO: Filtro VIP - Não é mais utilizado
|
||||
// const passaVIP = filtroVIP ? medico.vip === true : true;
|
||||
|
||||
// Filtro aniversariante
|
||||
const passaAniversario = filtroAniversariante
|
||||
? ehAniversariante(medico.birth_date)
|
||||
: true;
|
||||
|
||||
// Filtros avançados - ajustando para campos reais
|
||||
const passaCidade = filtroCidade ?
|
||||
medico.city?.toLowerCase().includes(filtroCidade.toLowerCase()) : true;
|
||||
|
||||
const passaEstado = filtroEstado ?
|
||||
medico.state?.toLowerCase().includes(filtroEstado.toLowerCase()) : true;
|
||||
|
||||
// Filtro por idade - usando birth_date
|
||||
const idade = calcularIdade(medico.birth_date);
|
||||
const passaIdadeMinima = idadeMinima ? idade >= parseInt(idadeMinima) : true;
|
||||
const passaIdadeMaxima = idadeMaxima ? idade <= parseInt(idadeMaxima) : true;
|
||||
|
||||
// Filtro por data de cadastro - usando created_at ou similar
|
||||
const passaDataInicial = dataInicial ?
|
||||
medico.created_at && new Date(medico.created_at) >= new Date(dataInicial) : true;
|
||||
|
||||
const passaDataFinal = dataFinal ?
|
||||
medico.created_at && new Date(medico.created_at) <= new Date(dataFinal) : true;
|
||||
|
||||
// Combinação de todos os filtros (passaVIP removido)
|
||||
const resultado = passaBusca && passaEspecialidade && passaAniversario &&
|
||||
passaCidade && passaEstado && passaIdadeMinima && passaIdadeMaxima &&
|
||||
passaDataInicial && passaDataFinal;
|
||||
|
||||
return resultado;
|
||||
}) : [];
|
||||
|
||||
// Contador de médicos filtrados
|
||||
useEffect(() => {
|
||||
console.log(` Médicos totais: ${medicos.length}, Filtrados: ${medicosFiltrados.length}`);
|
||||
}, [medicos, medicosFiltrados, search]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="page-heading">
|
||||
<h3>Lista de Médicos</h3>
|
||||
</div>
|
||||
<div className="page-content">
|
||||
<div className="page-content table-doctor-container">
|
||||
<section className="row">
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<div className="card-header d-flex justify-content-between align-items-center">
|
||||
<div className="card table-doctor-card">
|
||||
<div className="card-header">
|
||||
<h4 className="card-title mb-0">Médicos Cadastrados</h4>
|
||||
<Link to={'cadastro'}>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
|
||||
>
|
||||
<Link to={'cadastro'}>
|
||||
<button className="btn btn-primary">
|
||||
<i className="bi bi-plus-circle"></i> Adicionar Médico
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="card-body">
|
||||
<div className="d-flex gap-2 mb-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Pesquisar médico..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="form-control"
|
||||
style={{ maxWidth: "300px" }}
|
||||
/>
|
||||
{/* Seção de Filtros */}
|
||||
<div className="card p-3 mb-3 table-doctor-filters">
|
||||
<h5 className="mb-3">
|
||||
<i className="bi bi-funnel-fill me-2 text-primary"></i>{" "}
|
||||
Filtros
|
||||
</h5>
|
||||
|
||||
<button
|
||||
className={`btn ${
|
||||
filtroAniversariante
|
||||
? "btn-primary"
|
||||
: "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setFiltroAniversariante(!filtroAniversariante)}
|
||||
>
|
||||
<i className="bi bi-calendar me-1"></i> Aniversariantes
|
||||
</button>
|
||||
{/* Busca por nome OU CPF ou email */}
|
||||
<div className="mb-3">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Buscar por nome ou CPF..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
<small className="text-muted">
|
||||
Digite o nome completo ou número do CPF
|
||||
</small>
|
||||
</div>
|
||||
|
||||
{/* Filtros Básicos - LADO A LADO */}
|
||||
<div className="filtros-basicos">
|
||||
<select
|
||||
className="form-select filter-especialidade"
|
||||
value={filtroEspecialidade}
|
||||
onChange={(e) => setFiltroEspecialidade(e.target.value)}
|
||||
>
|
||||
<option value="Todos">Todas as Especialidades</option>
|
||||
<option value="Clínica Geral">Clínica médica (clínico geral)</option>
|
||||
<option value="Pediatria">Pediatria</option>
|
||||
<option value="Ginecologia">Ginecologia e obstetrícia</option>
|
||||
<option value="Cardiologia">Cardiologia</option>
|
||||
<option value="Ortopedia">Ortopedia e traumatologia</option>
|
||||
<option value="Oftalmologia">Oftalmologia</option>
|
||||
<option value="Otorrinolaringologia">Otorrinolaringologia</option>
|
||||
<option value="Dermatologia">Dermatologia</option>
|
||||
<option value="Neurologia">Neurologia</option>
|
||||
<option value="Psiquiatria">Psiquiatria</option>
|
||||
<option value="Endocrinologia">Endocrinologia</option>
|
||||
<option value="Gastroenterologia">Gastroenterologia</option>
|
||||
<option value="Urologia">Urologia</option>
|
||||
</select>
|
||||
|
||||
<div className="filter-buttons-container">
|
||||
{/* REMOVIDO: Botão VIP
|
||||
<button
|
||||
className={`btn filter-btn ${filtroVIP ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setFiltroVIP(!filtroVIP)}
|
||||
>
|
||||
<i className="bi bi-award me-1"></i> VIP
|
||||
</button> */}
|
||||
|
||||
<button
|
||||
className={`btn filter-btn ${filtroAniversariante
|
||||
? "btn-primary"
|
||||
: "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setFiltroAniversariante(!filtroAniversariante)}
|
||||
>
|
||||
<i className="bi bi-calendar me-1"></i> Aniversariantes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Botão para mostrar/ocultar filtros avançados */}
|
||||
<div className="d-flex justify-content-between align-items-center mt-3"> {/* Adicionado mt-3 para separar do anterior */}
|
||||
<button
|
||||
className="btn btn-link p-0 text-decoration-none"
|
||||
onClick={() => setShowFiltrosAvancados(!showFiltrosAvancados)}
|
||||
>
|
||||
<i className={`bi bi-chevron-${showFiltrosAvancados ? 'up' : 'down'} me-1`}></i>
|
||||
Filtros Avançados
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="btn btn-outline-secondary btn-sm"
|
||||
onClick={limparFiltros}
|
||||
>
|
||||
<i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Filtros Avançados */}
|
||||
{showFiltrosAvancados && (
|
||||
<div className="mt-3 p-3 border rounded advanced-filters">
|
||||
<h6 className="mb-3">Filtros Avançados</h6>
|
||||
|
||||
<div className="row g-3">
|
||||
{/* Localização */}
|
||||
<div className="col-md-6">
|
||||
<label className="form-label fw-bold">Cidade</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Digite a cidade..."
|
||||
value={filtroCidade}
|
||||
onChange={(e) => setFiltroCidade(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<label className="form-label fw-bold">Estado</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Ex: Minas Gerais"
|
||||
value={filtroEstado}
|
||||
onChange={(e) => setFiltroEstado(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Intervalo de Idade */}
|
||||
<div className="col-md-6">
|
||||
<label className="form-label fw-bold">Idade mínima</label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control"
|
||||
placeholder="Ex: 25"
|
||||
value={idadeMinima}
|
||||
onChange={(e) => setIdadeMinima(e.target.value)}
|
||||
min="0"
|
||||
max="150"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<label className="form-label fw-bold">Idade máxima</label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control"
|
||||
placeholder="Ex: 70"
|
||||
value={idadeMaxima}
|
||||
onChange={(e) => setIdadeMaxima(e.target.value)}
|
||||
min="0"
|
||||
max="150"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Data de Cadastro */}
|
||||
<div className="col-md-6">
|
||||
<label className="form-label fw-bold">Data inicial</label>
|
||||
<input
|
||||
type="date"
|
||||
className="form-control"
|
||||
value={dataInicial}
|
||||
onChange={(e) => setDataInicial(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<label className="form-label fw-bold">Data final</label>
|
||||
<input
|
||||
type="date"
|
||||
className="form-control"
|
||||
value={dataFinal}
|
||||
onChange={(e) => setDataFinal(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Informações dos filtros ativos */}
|
||||
{(search || filtroEspecialidade !== "Todos" || filtroAniversariante || // filtroVIP removido
|
||||
filtroCidade || filtroEstado || idadeMinima || idadeMaxima || dataInicial || dataFinal) && (
|
||||
<div className="alert alert-info mb-3 filters-active">
|
||||
<strong>Filtros ativos:</strong>
|
||||
<div className="mt-1">
|
||||
{search && <span className="badge bg-primary me-2">Busca: "{search}"</span>}
|
||||
{filtroEspecialidade !== "Todos" && <span className="badge bg-primary me-2">Especialidade: {filtroEspecialidade}</span>}
|
||||
{/* REMOVIDO: {filtroVIP && <span className="badge bg-primary me-2">VIP</span>} */}
|
||||
{filtroAniversariante && <span className="badge bg-primary me-2">Aniversariantes</span>}
|
||||
{filtroCidade && <span className="badge bg-primary me-2">Cidade: {filtroCidade}</span>}
|
||||
{filtroEstado && <span className="badge bg-primary me-2">Estado: {filtroEstado}</span>}
|
||||
{idadeMinima && <span className="badge bg-primary me-2">Idade mín: {idadeMinima}</span>}
|
||||
{idadeMaxima && <span className="badge bg-primary me-2">Idade máx: {idadeMaxima}</span>}
|
||||
{dataInicial && <span className="badge bg-primary me-2">Data inicial: {dataInicial}</span>}
|
||||
{dataFinal && <span className="badge bg-primary me-2">Data final: {dataFinal}</span>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Contador de resultados */}
|
||||
<div className="mb-3">
|
||||
<span className="badge results-badge">
|
||||
{medicosFiltrados.length} de {medicos.length} médicos encontrados
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Tabela de Médicos */}
|
||||
<div className="table-responsive">
|
||||
<table className="table table-striped table-hover">
|
||||
<table className="table table-striped table-hover table-doctor-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nome</th>
|
||||
<th>CPF</th>
|
||||
<th>Especialidade</th>
|
||||
<th>Email</th>
|
||||
<th>Telefone</th>
|
||||
<th></th>
|
||||
<th>Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -144,66 +395,45 @@ function TableDoctor() {
|
||||
{medicosFiltrados.length > 0 ? (
|
||||
medicosFiltrados.map((medico) => (
|
||||
<tr key={medico.id}>
|
||||
<td>{medico.full_name}</td>
|
||||
<td>{medico.cpf}</td>
|
||||
<td>{medico.email}</td>
|
||||
<td>{medico.telefone}</td>
|
||||
<td>
|
||||
<span
|
||||
className={`badge ${
|
||||
medico.ativo === "ativo"
|
||||
? "bg-success"
|
||||
: "bg-danger"
|
||||
}`}
|
||||
>
|
||||
{medico.ativo}
|
||||
<div className="d-flex align-items-center">
|
||||
{medico.full_name}
|
||||
{ehAniversariante(medico.birth_date) && (
|
||||
<span className="badge anniversary-badge ms-2" title="Aniversariante do dia">
|
||||
<i className="bi bi-gift"></i>
|
||||
</span>
|
||||
)}
|
||||
{/* REMOVIDO: Badge VIP
|
||||
{medico.vip && (
|
||||
<span className="badge vip-badge ms-2" title="Médico VIP">
|
||||
VIP
|
||||
</span>
|
||||
)} */}
|
||||
</div>
|
||||
</td>
|
||||
<td>{medico.cpf}</td>
|
||||
<td>
|
||||
<span className="badge specialty-badge">
|
||||
{medico.specialty || 'Não informado'}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td>{medico.email || 'Não informado'}</td>
|
||||
<td>
|
||||
<div className="d-flex gap-2">
|
||||
{/* Ver Detalhes */}
|
||||
<Link to={`${medico.id}`}>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "#E6F2FF",
|
||||
color: "#004085",
|
||||
}}
|
||||
onClick={() => {
|
||||
console.log('editar')
|
||||
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-eye me-1"></i> Ver
|
||||
Detalhes
|
||||
<button className="btn btn-sm btn-view">
|
||||
<i className="bi bi-eye me-1"></i> Ver Detalhes
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
{/* Editar */}
|
||||
<Link to={`${medico.id}/edit`}>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "#FFF3CD",
|
||||
color: "#856404",
|
||||
}}
|
||||
onClick={() => {
|
||||
|
||||
console.log('Editar')
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-pencil me-1"></i> Editar
|
||||
</button>
|
||||
<button className="btn btn-sm btn-edit">
|
||||
<i className="bi bi-pencil me-1"></i> Editar
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "#F8D7DA",
|
||||
color: "#721C24",
|
||||
}}
|
||||
className="btn btn-sm btn-delete"
|
||||
onClick={() => {
|
||||
setSelectedDoctorId(medico.id);
|
||||
setShowDeleteModal(true);
|
||||
@ -217,7 +447,7 @@ function TableDoctor() {
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan="6" className="text-center">
|
||||
<td colSpan="5" className="empty-state">
|
||||
Nenhum médico encontrado.
|
||||
</td>
|
||||
</tr>
|
||||
@ -231,10 +461,10 @@ function TableDoctor() {
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Modal de confirmação de exclusão */}
|
||||
{/* Modal de confirmação */}
|
||||
{showDeleteModal && (
|
||||
<div
|
||||
className="modal fade show"
|
||||
className="modal fade show delete-modal"
|
||||
style={{
|
||||
display: "block",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
@ -246,19 +476,23 @@ function TableDoctor() {
|
||||
>
|
||||
<div className="modal-dialog modal-dialog-centered">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header" style={{ backgroundColor: '#b91c1c' }}>
|
||||
<h5 className="modal-title text-dark"> Confirmação de Exclusão</h5>
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">
|
||||
Confirmação de Exclusão
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={() => setShowDeleteModal(false)}
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
<p className="mb-0 fs-5" style={{ color: '#111' }}>
|
||||
<p className="mb-0 fs-5">
|
||||
Tem certeza que deseja excluir este médico?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
@ -267,6 +501,7 @@ function TableDoctor() {
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-danger"
|
||||
@ -283,4 +518,4 @@ function TableDoctor() {
|
||||
);
|
||||
}
|
||||
|
||||
export default TableDoctor;
|
||||
export default TableDoctor;
|
||||
@ -1,70 +1,64 @@
|
||||
import {useState} from 'react';
|
||||
import { useState } from 'react';
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import PatientForm from '../components/patients/PatientForm';
|
||||
import API_KEY from '../components/utils/apiKeys';
|
||||
import { useAuth } from '../components/utils/AuthProvider';
|
||||
import './style/PatientCadastroManager.css';
|
||||
|
||||
function PatientCadastroManager( {setCurrentPage} ) {
|
||||
function PatientCadastroManager({ setCurrentPage }) {
|
||||
const navigate = useNavigate()
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [infosModal, setInfosModal] = useState({title:'', message:''});
|
||||
const [infosModal, setInfosModal] = useState({ title: '', message: '' });
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const { getAuthorizationHeader, isAuthenticated } = useAuth();
|
||||
const [formData, setFormData] = useState({})
|
||||
|
||||
|
||||
const validarCPF = (cpf) => {
|
||||
cpf = cpf.replace(/\D/g, '');
|
||||
|
||||
|
||||
if (cpf.length !== 11) return false;
|
||||
|
||||
|
||||
|
||||
if (/^(\d)\1+$/.test(cpf)) return false;
|
||||
|
||||
let soma = 0;
|
||||
let resto;
|
||||
|
||||
|
||||
for (let i = 1; i <= 9; i++) {
|
||||
soma = soma + parseInt(cpf.substring(i-1, i)) * (11 - i);
|
||||
soma = soma + parseInt(cpf.substring(i - 1, i)) * (11 - i);
|
||||
}
|
||||
|
||||
|
||||
resto = (soma * 10) % 11;
|
||||
if ((resto === 10) || (resto === 11)) resto = 0;
|
||||
if (resto !== parseInt(cpf.substring(9, 10))) return false;
|
||||
|
||||
|
||||
soma = 0;
|
||||
for (let i = 1; i <= 10; i++) {
|
||||
soma = soma + parseInt(cpf.substring(i-1, i)) * (12 - i);
|
||||
soma = soma + parseInt(cpf.substring(i - 1, i)) * (12 - i);
|
||||
}
|
||||
|
||||
|
||||
resto = (soma * 10) % 11;
|
||||
if ((resto === 10) || (resto === 11)) resto = 0;
|
||||
if (resto !== parseInt(cpf.substring(10, 11))) return false;
|
||||
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
const handleSavePatient = async (patientData) => {
|
||||
console.log(' Iniciando salvamento do paciente:', patientData);
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
|
||||
console.log(' Verificando autenticação...');
|
||||
if (!isAuthenticated) {
|
||||
throw new Error('Usuário não autenticado');
|
||||
}
|
||||
|
||||
const authHeader = getAuthorizationHeader();
|
||||
console.log(' Header de autorização:', authHeader ? 'Presente' : 'Faltando');
|
||||
|
||||
|
||||
if (!authHeader) {
|
||||
throw new Error('Header de autorização não encontrado');
|
||||
}
|
||||
|
||||
|
||||
const cpfLimpo = patientData.cpf.replace(/\D/g, '');
|
||||
if (!validarCPF(cpfLimpo)) {
|
||||
throw new Error('CPF inválido. Por favor, verifique o número digitado.');
|
||||
@ -76,23 +70,15 @@ function PatientCadastroManager( {setCurrentPage} ) {
|
||||
myHeaders.append("Authorization", authHeader);
|
||||
myHeaders.append("Prefer", "return=representation");
|
||||
|
||||
console.log(' Headers configurados:', {
|
||||
'Content-Type': 'application/json',
|
||||
'apikey': API_KEY ? 'Presente' : 'Faltando',
|
||||
'Authorization': authHeader ? 'Presente' : 'Faltando',
|
||||
'Prefer': 'return=representation'
|
||||
});
|
||||
|
||||
const cleanedData = {
|
||||
full_name: patientData.full_name,
|
||||
cpf: cpfLimpo,
|
||||
email: patientData.email,
|
||||
phone_mobile: patientData.phone_mobile,
|
||||
|
||||
birth_date: patientData.birth_date || null,
|
||||
sex: patientData.sex === 'Masculino' ? 'M' :
|
||||
patientData.sex === 'Feminino' ? 'F' :
|
||||
patientData.sex || null,
|
||||
sex: patientData.sex === 'Masculino' ? 'M' :
|
||||
patientData.sex === 'Feminino' ? 'F' :
|
||||
patientData.sex || null,
|
||||
social_name: patientData.social_name || null,
|
||||
rg: patientData.rg || null,
|
||||
blood_type: patientData.blood_type || null,
|
||||
@ -100,16 +86,31 @@ function PatientCadastroManager( {setCurrentPage} ) {
|
||||
height_m: patientData.height_m ? parseFloat(patientData.height_m) : null,
|
||||
bmi: patientData.bmi ? parseFloat(patientData.bmi) : null,
|
||||
notes: patientData.notes || null,
|
||||
mother_name: patientData.mother_name || null,
|
||||
father_name: patientData.father_name || null,
|
||||
guardian_name: patientData.guardian_name || null,
|
||||
guardian_cpf: patientData.guardian_cpf ? patientData.guardian_cpf.replace(/\D/g, '') : null,
|
||||
marital_status: patientData.marital_status || null,
|
||||
profession: patientData.profession || null,
|
||||
naturality: patientData.naturality || null,
|
||||
nationality: patientData.nationality || null,
|
||||
race: patientData.race || null,
|
||||
cep: patientData.cep || null,
|
||||
street: patientData.street || null,
|
||||
number: patientData.number || null,
|
||||
complement: patientData.complement || null,
|
||||
neighborhood: patientData.neighborhood || null,
|
||||
city: patientData.city || null,
|
||||
state: patientData.state || null,
|
||||
phone1: patientData.phone1 || null,
|
||||
phone2: patientData.phone2 || null
|
||||
};
|
||||
|
||||
console.log(' Dados limpos para envio:', cleanedData);
|
||||
|
||||
if (!cleanedData.full_name || !cleanedData.cpf || !cleanedData.email || !cleanedData.phone_mobile) {
|
||||
throw new Error('Dados obrigatórios faltando: nome, CPF, email e telefone são necessários');
|
||||
}
|
||||
|
||||
var raw = JSON.stringify(cleanedData);
|
||||
console.log(' Payload JSON:', raw);
|
||||
|
||||
var requestOptions = {
|
||||
method: 'POST',
|
||||
@ -118,37 +119,24 @@ function PatientCadastroManager( {setCurrentPage} ) {
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
console.log(' Fazendo requisição para API...');
|
||||
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions);
|
||||
|
||||
console.log(' Status da resposta:', response.status);
|
||||
console.log(' Response ok:', response.ok);
|
||||
|
||||
let responseData;
|
||||
try {
|
||||
responseData = await response.json();
|
||||
console.log(' Corpo da resposta:', responseData);
|
||||
} catch (jsonError) {
|
||||
console.log(' Não foi possível parsear JSON da resposta:', jsonError);
|
||||
responseData = { error: 'Resposta inválida da API' };
|
||||
}
|
||||
|
||||
|
||||
if (!response.ok) {
|
||||
console.error(' Erro da API - Detalhes:', {
|
||||
status: response.status,
|
||||
statusText: response.statusText,
|
||||
data: responseData
|
||||
});
|
||||
|
||||
let errorMessage = 'Erro ao salvar paciente';
|
||||
|
||||
|
||||
if (response.status === 401) {
|
||||
errorMessage = 'Não autorizado. Verifique suas credenciais.';
|
||||
} else if (response.status === 403) {
|
||||
errorMessage = 'Acesso proibido. Verifique suas permissões.';
|
||||
} else if (response.status === 409) {
|
||||
errorMessage = 'Paciente com este CPF já existe.';
|
||||
errorMessage = 'Já existe um paciente cadastrado com este CPF.';
|
||||
} else if (response.status === 400) {
|
||||
errorMessage = `Dados inválidos: ${responseData.details || responseData.message || 'Verifique os campos'}`;
|
||||
} else if (response.status === 422) {
|
||||
@ -158,26 +146,26 @@ function PatientCadastroManager( {setCurrentPage} ) {
|
||||
} else {
|
||||
errorMessage = `Erro ${response.status}: ${responseData.message || responseData.error || 'Erro desconhecido'}`;
|
||||
}
|
||||
|
||||
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
|
||||
console.log(' Paciente salvo com sucesso:', responseData);
|
||||
|
||||
|
||||
setInfosModal({
|
||||
title: 'Sucesso',
|
||||
message: 'O cadastro do paciente foi realizado com sucesso.'
|
||||
});
|
||||
setShowModal(true);
|
||||
<<<<<<< HEAD
|
||||
|
||||
=======
|
||||
|
||||
>>>>>>> main
|
||||
setTimeout(() => {
|
||||
setShowModal(false);
|
||||
navigate('/secretaria/pacientes');
|
||||
}, 2000);
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.error(' Erro completo ao salvar paciente:', error);
|
||||
setInfosModal({
|
||||
title: 'Erro',
|
||||
message: error.message || 'Não foi possível conectar ao servidor. Verifique sua internet e tente novamente.'
|
||||
@ -191,76 +179,30 @@ function PatientCadastroManager( {setCurrentPage} ) {
|
||||
return (
|
||||
<>
|
||||
<div className="page-heading">
|
||||
{showModal &&(
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
zIndex: 9999,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: "10px",
|
||||
width: "400px",
|
||||
maxWidth: "90%",
|
||||
boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: infosModal.title === 'Sucesso' ? "#28a745" : "#dc3545",
|
||||
padding: "15px 20px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>{infosModal.title}</h5>
|
||||
{showModal && (
|
||||
<div className="modal-overlay fade-in">
|
||||
<div className="modal-content slide-in">
|
||||
<div className={`modal-header ${infosModal.title === 'Sucesso' ? 'success' : 'error'}`}>
|
||||
<h5>{infosModal.title}</h5>
|
||||
<button
|
||||
onClick={() => setShowModal(false)}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
fontSize: "20px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
className="modal-close-button"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div style={{ padding: "25px 20px" }}>
|
||||
<p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>
|
||||
<div className="modal-body">
|
||||
<p className="modal-message">
|
||||
{infosModal.message}
|
||||
</p>
|
||||
{infosModal.title === 'Erro' && (
|
||||
<p style={{ color: "#666", fontSize: "0.9rem", margin: "10px 0 0 0" }}>
|
||||
<p className="modal-submessage">
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
padding: "15px 20px",
|
||||
borderTop: "1px solid #ddd",
|
||||
}}
|
||||
>
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowModal(false);
|
||||
@ -268,16 +210,7 @@ function PatientCadastroManager( {setCurrentPage} ) {
|
||||
navigate('/secretaria/pacientes');
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: "#1e3a8a",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
padding: "8px 20px",
|
||||
borderRadius: "6px",
|
||||
cursor: "pointer",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
className={`modal-confirm-button ${infosModal.title === 'Sucesso' ? 'success' : 'error'}`}
|
||||
>
|
||||
Fechar
|
||||
</button>
|
||||
|
||||
@ -2,12 +2,11 @@ import React, { useState, useEffect } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import API_KEY from "../components/utils/apiKeys";
|
||||
import { useAuth } from "../components/utils/AuthProvider";
|
||||
|
||||
|
||||
import "./style/TablePaciente.css"; // Import do CSS
|
||||
|
||||
function TablePaciente({ setCurrentPage, setPatientID }) {
|
||||
|
||||
const {getAuthorizationHeader, isAuthenticated} = useAuth();
|
||||
|
||||
const { getAuthorizationHeader, isAuthenticated } = useAuth();
|
||||
|
||||
const [pacientes, setPacientes] = useState([]);
|
||||
const [search, setSearch] = useState("");
|
||||
@ -15,12 +14,19 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
|
||||
const [filtroVIP, setFiltroVIP] = useState(false);
|
||||
const [filtroAniversariante, setFiltroAniversariante] = useState(false);
|
||||
|
||||
// estados do modal
|
||||
// Estados para filtros avançados
|
||||
const [showFiltrosAvancados, setShowFiltrosAvancados] = useState(false);
|
||||
const [filtroCidade, setFiltroCidade] = useState("");
|
||||
const [filtroEstado, setFiltroEstado] = useState("");
|
||||
const [idadeMinima, setIdadeMinima] = useState("");
|
||||
const [idadeMaxima, setIdadeMaxima] = useState("");
|
||||
const [dataInicial, setDataInicial] = useState("");
|
||||
const [dataFinal, setDataFinal] = useState("");
|
||||
|
||||
// estados do modal
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [selectedPatientId, setSelectedPatientId] = useState(null);
|
||||
|
||||
|
||||
|
||||
const GetAnexos = async (id) => {
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("Authorization", "Bearer <token>");
|
||||
@ -73,15 +79,15 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
|
||||
|
||||
// função de exclusão atualizada
|
||||
const deletePatient = async (id) => {
|
||||
|
||||
|
||||
const authHeader = getAuthorizationHeader()
|
||||
console.log(id)
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append('apikey', API_KEY);
|
||||
myHeaders.append("Authorization", authHeader)
|
||||
|
||||
|
||||
var requestOptions = { method: "DELETE", redirect: "follow", headers:myHeaders };
|
||||
|
||||
|
||||
var requestOptions = { method: "DELETE", redirect: "follow", headers: myHeaders };
|
||||
|
||||
try {
|
||||
const result = await fetch(
|
||||
@ -100,23 +106,34 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
|
||||
// Requisição inicial para buscar pacientes
|
||||
useEffect(() => {
|
||||
|
||||
const authHeader = getAuthorizationHeader()
|
||||
const authHeader = getAuthorizationHeader()
|
||||
|
||||
<<<<<<< HEAD
|
||||
console.log(authHeader, 'aqui autorização')
|
||||
=======
|
||||
console.log(authHeader)
|
||||
>>>>>>> main
|
||||
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("apikey", API_KEY);
|
||||
myHeaders.append("Authorization", `${authHeader}`);
|
||||
var requestOptions = {
|
||||
method: 'GET',
|
||||
headers: myHeaders,
|
||||
redirect: 'follow'
|
||||
};
|
||||
myHeaders.append("apikey", API_KEY);
|
||||
myHeaders.append("Authorization", `${authHeader}`);
|
||||
var requestOptions = {
|
||||
method: 'GET',
|
||||
headers: myHeaders,
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
<<<<<<< HEAD
|
||||
fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions)
|
||||
.then(response => response.json())
|
||||
.then(result => setPacientes(result))
|
||||
.catch(error => console.log('error', error));
|
||||
=======
|
||||
fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions)
|
||||
.then(response => response.json())
|
||||
.then(result => {setPacientes(result); console.log(result)})
|
||||
.catch(error => console.log('error', error));
|
||||
>>>>>>> main
|
||||
}, [isAuthenticated, getAuthorizationHeader]);
|
||||
|
||||
// Função para verificar se hoje é aniversário do paciente
|
||||
@ -131,116 +148,286 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
|
||||
);
|
||||
};
|
||||
|
||||
// ✨ CORREÇÃO AQUI: Verificamos se 'pacientes' é um array antes de filtrar.
|
||||
const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente) => {
|
||||
const textoCompletoPaciente = `${paciente.nome} ${paciente.cpf} ${paciente.email} ${paciente.telefone}`.toLowerCase();
|
||||
const passaBusca = textoCompletoPaciente.includes(search.toLowerCase());
|
||||
const passaVIP = filtroVIP ? paciente.vip === true : true;
|
||||
const passaConvenio = filtroConvenio === "Todos" || paciente.convenio === filtroConvenio;
|
||||
const passaAniversario = filtroAniversariante
|
||||
? ehAniversariante(paciente.data_nascimento)
|
||||
: true;
|
||||
// Função para calcular idade a partir da data de nascimento
|
||||
const calcularIdade = (dataNascimento) => {
|
||||
if (!dataNascimento) return 0;
|
||||
const hoje = new Date();
|
||||
const nascimento = new Date(dataNascimento);
|
||||
let idade = hoje.getFullYear() - nascimento.getFullYear();
|
||||
const mes = hoje.getMonth() - nascimento.getMonth();
|
||||
|
||||
return passaBusca && passaVIP && passaConvenio && passaAniversario;
|
||||
}) : []; // Se não for um array, usamos um array vazio como fallback.
|
||||
if (mes < 0 || (mes === 0 && hoje.getDate() < nascimento.getDate())) {
|
||||
idade--;
|
||||
}
|
||||
return idade;
|
||||
};
|
||||
|
||||
// Função para limpar todos os filtros
|
||||
const limparFiltros = () => {
|
||||
setSearch("");
|
||||
setFiltroConvenio("Todos");
|
||||
setFiltroVIP(false);
|
||||
setFiltroAniversariante(false);
|
||||
setFiltroCidade("");
|
||||
setFiltroEstado("");
|
||||
setIdadeMinima("");
|
||||
setIdadeMaxima("");
|
||||
setDataInicial("");
|
||||
setDataFinal("");
|
||||
};
|
||||
|
||||
// FILTRO CORRIGIDO - Baseado na estrutura real dos dados
|
||||
const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente) => {
|
||||
// Filtro por nome OU CPF - usando campos reais da API
|
||||
const buscaNome = paciente.full_name?.toLowerCase().includes(search.toLowerCase());
|
||||
const buscaCPF = paciente.cpf?.toLowerCase().includes(search.toLowerCase());
|
||||
const passaBusca = search === "" || buscaNome || buscaCPF;
|
||||
|
||||
// Filtro por convênio - ajustando para campo real
|
||||
const passaConvenio = filtroConvenio === "Todos" || paciente.insurance_plan === filtroConvenio;
|
||||
|
||||
// Outros filtros
|
||||
const passaVIP = filtroVIP ? paciente.vip === true : true;
|
||||
const passaAniversario = filtroAniversariante
|
||||
? ehAniversariante(paciente.birth_date)
|
||||
: true;
|
||||
|
||||
// Filtros avançados - ajustando para campos reais
|
||||
const passaCidade = filtroCidade ?
|
||||
paciente.city?.toLowerCase().includes(filtroCidade.toLowerCase()) : true;
|
||||
|
||||
const passaEstado = filtroEstado ?
|
||||
paciente.state?.toLowerCase().includes(filtroEstado.toLowerCase()) : true;
|
||||
|
||||
// Filtro por idade - usando birth_date
|
||||
const idade = calcularIdade(paciente.birth_date);
|
||||
const passaIdadeMinima = idadeMinima ? idade >= parseInt(idadeMinima) : true;
|
||||
const passaIdadeMaxima = idadeMaxima ? idade <= parseInt(idadeMaxima) : true;
|
||||
|
||||
// Filtro por data do último atendimento - usando last_appointment
|
||||
const passaDataInicial = dataInicial ?
|
||||
paciente.last_appointment && new Date(paciente.last_appointment) >= new Date(dataInicial) : true;
|
||||
|
||||
const passaDataFinal = dataFinal ?
|
||||
paciente.last_appointment && new Date(paciente.last_appointment) <= new Date(dataFinal) : true;
|
||||
|
||||
// Combinação: (Nome OU CPF) E Convênio E outros filtros
|
||||
const resultado = passaBusca && passaConvenio && passaVIP && passaAniversario &&
|
||||
passaCidade && passaEstado && passaIdadeMinima && passaIdadeMaxima &&
|
||||
passaDataInicial && passaDataFinal;
|
||||
|
||||
return resultado;
|
||||
}) : [];
|
||||
|
||||
// Contador de pacientes filtrados
|
||||
useEffect(() => {
|
||||
console.log(`📈 Pacientes totais: ${pacientes.length}, Filtrados: ${pacientesFiltrados.length}`);
|
||||
}, [pacientes, pacientesFiltrados, search]);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="page-heading">
|
||||
<h3>Lista de Pacientes</h3>
|
||||
</div>
|
||||
<div className="page-content">
|
||||
<div className="page-content table-paciente-container">
|
||||
<section className="row">
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<div className="card-header d-flex justify-content-between align-items-center">
|
||||
<div className="card table-paciente-card">
|
||||
<div className="card-header">
|
||||
<h4 className="card-title mb-0">Pacientes Cadastrados</h4>
|
||||
<Link to={'cadastro'}>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
>
|
||||
<button className="btn btn-primary">
|
||||
<i className="bi bi-plus-circle"></i> Adicionar Paciente
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="card-body">
|
||||
<div className="card p-3 mb-3">
|
||||
{/* Seção de Filtros */}
|
||||
<div className="card p-3 mb-3 table-paciente-filters">
|
||||
<h5 className="mb-3">
|
||||
<i className="bi bi-funnel-fill me-2 text-primary"></i>{" "}
|
||||
Filtros
|
||||
</h5>
|
||||
|
||||
<div
|
||||
className="d-flex flex-nowrap align-items-center gap-2"
|
||||
style={{ overflowX: "auto", paddingBottom: "6px" }}
|
||||
>
|
||||
{/* Busca por nome ou CPF */}
|
||||
<div className="mb-3">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Buscar por nome..."
|
||||
placeholder="Buscar por nome ou CPF..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
style={{
|
||||
minWidth: 250,
|
||||
maxWidth: 300,
|
||||
width: 260,
|
||||
flex: "0 0 auto",
|
||||
}}
|
||||
/>
|
||||
<small className="text-muted">
|
||||
Digite o nome completo ou número do CPF
|
||||
</small>
|
||||
</div>
|
||||
|
||||
{/* Filtros Básicos */}
|
||||
<div className="d-flex flex-wrap align-items-center gap-2 mb-3">
|
||||
<select
|
||||
className="form-select"
|
||||
className="form-select compact-select"
|
||||
value={filtroConvenio}
|
||||
onChange={(e) => setFiltroConvenio(e.target.value)}
|
||||
style={{
|
||||
minWidth: 200,
|
||||
width: 180,
|
||||
flex: "0 0 auto",
|
||||
}}
|
||||
style={{ minWidth: "150px", maxWidth: "200px" }} // Diminuído
|
||||
>
|
||||
<option>Todos os Convênios</option>
|
||||
<option>Bradesco Saúde</option>
|
||||
<option>Hapvida</option>
|
||||
<option>Unimed</option>
|
||||
<option value="Todos">Todos os Convênios</option>
|
||||
<option value="Bradesco Saúde">Bradesco Saúde</option>
|
||||
<option value="Hapvida">Hapvida</option>
|
||||
<option value="Unimed">Unimed</option>
|
||||
</select>
|
||||
|
||||
<button
|
||||
className={`btn ${
|
||||
filtroVIP ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
className={`btn btn-sm ${filtroVIP ? "btn-primary" : "btn-outline-primary"}`} // Adicionado btn-sm
|
||||
onClick={() => setFiltroVIP(!filtroVIP)}
|
||||
style={{ flex: "0 0 auto", whiteSpace: "nowrap" }}
|
||||
style={{ padding: "0.25rem 0.5rem" }} // Padding reduzido
|
||||
>
|
||||
<i className="bi bi-award me-1"></i> VIP
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn ${
|
||||
filtroAniversariante
|
||||
? "btn-primary"
|
||||
: "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() =>
|
||||
setFiltroAniversariante(!filtroAniversariante)
|
||||
}
|
||||
style={{ flex: "0 0 auto", whiteSpace: "nowrap" }}
|
||||
className={`btn btn-sm ${filtroAniversariante ? "btn-primary" : "btn-outline-primary"
|
||||
}`} // Adicionado btn-sm
|
||||
onClick={() => setFiltroAniversariante(!filtroAniversariante)}
|
||||
style={{ padding: "0.25rem 0.5rem" }} // Padding reduzido
|
||||
>
|
||||
<i className="bi bi-calendar me-1"></i> Aniversariantes
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Botão para mostrar/ocultar filtros avançados */}
|
||||
<div className="d-flex justify-content-between align-items-center">
|
||||
<button
|
||||
className="btn btn-link p-0 text-decoration-none"
|
||||
onClick={() => setShowFiltrosAvancados(!showFiltrosAvancados)}
|
||||
>
|
||||
<i className={`bi bi-chevron-${showFiltrosAvancados ? 'up' : 'down'} me-1`}></i>
|
||||
Filtros Avançados
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="btn btn-outline-secondary btn-sm"
|
||||
onClick={limparFiltros}
|
||||
>
|
||||
<i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Filtros Avançados */}
|
||||
{showFiltrosAvancados && (
|
||||
<div className="mt-3 p-3 border rounded advanced-filters">
|
||||
<h6 className="mb-3">Filtros Avançados</h6>
|
||||
|
||||
<div className="row g-3">
|
||||
{/* Localização */}
|
||||
<div className="col-md-6">
|
||||
<label className="form-label fw-bold">Cidade</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Digite a cidade..."
|
||||
value={filtroCidade}
|
||||
onChange={(e) => setFiltroCidade(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<label className="form-label fw-bold">Estado</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Ex: Minas Gerais"
|
||||
value={filtroEstado}
|
||||
onChange={(e) => setFiltroEstado(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Intervalo de Idade */}
|
||||
<div className="col-md-6">
|
||||
<label className="form-label fw-bold">Idade mínima</label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control"
|
||||
placeholder="Ex: 18"
|
||||
value={idadeMinima}
|
||||
onChange={(e) => setIdadeMinima(e.target.value)}
|
||||
min="0"
|
||||
max="150"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<label className="form-label fw-bold">Idade máxima</label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control"
|
||||
placeholder="Ex: 65"
|
||||
value={idadeMaxima}
|
||||
onChange={(e) => setIdadeMaxima(e.target.value)}
|
||||
min="0"
|
||||
max="150"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Data do Último Atendimento */}
|
||||
<div className="col-md-6">
|
||||
<label className="form-label fw-bold">Data inicial</label>
|
||||
<input
|
||||
type="date"
|
||||
className="form-control"
|
||||
value={dataInicial}
|
||||
onChange={(e) => setDataInicial(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<label className="form-label fw-bold">Data final</label>
|
||||
<input
|
||||
type="date"
|
||||
className="form-control"
|
||||
value={dataFinal}
|
||||
onChange={(e) => setDataFinal(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Informações dos filtros ativos */}
|
||||
{(search || filtroConvenio !== "Todos" || filtroVIP || filtroAniversariante ||
|
||||
filtroCidade || filtroEstado || idadeMinima || idadeMaxima || dataInicial || dataFinal) && (
|
||||
<div className="alert alert-info mb-3 filters-active">
|
||||
<strong>Filtros ativos:</strong>
|
||||
<div className="mt-1">
|
||||
{search && <span className="badge bg-primary me-2">Busca: "{search}"</span>}
|
||||
{filtroConvenio !== "Todos" && <span className="badge bg-primary me-2">Convênio: {filtroConvenio}</span>}
|
||||
{filtroVIP && <span className="badge bg-primary me-2">VIP</span>}
|
||||
{filtroAniversariante && <span className="badge bg-primary me-2">Aniversariantes</span>}
|
||||
{filtroCidade && <span className="badge bg-primary me-2">Cidade: {filtroCidade}</span>}
|
||||
{filtroEstado && <span className="badge bg-primary me-2">Estado: {filtroEstado}</span>}
|
||||
{idadeMinima && <span className="badge bg-primary me-2">Idade mín: {idadeMinima}</span>}
|
||||
{idadeMaxima && <span className="badge bg-primary me-2">Idade máx: {idadeMaxima}</span>}
|
||||
{dataInicial && <span className="badge bg-primary me-2">Data inicial: {dataInicial}</span>}
|
||||
{dataFinal && <span className="badge bg-primary me-2">Data final: {dataFinal}</span>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Contador de resultados */}
|
||||
<div className="mb-3">
|
||||
<span className="badge results-badge">
|
||||
{pacientesFiltrados.length} de {pacientes.length} pacientes encontrados
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Tabela de Pacientes */}
|
||||
<div className="table-responsive">
|
||||
<table className="table table-striped table-hover">
|
||||
<table className="table table-striped table-hover table-paciente-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nome</th>
|
||||
<th>CPF</th>
|
||||
<th>Convênio</th>
|
||||
<th>Email</th>
|
||||
<th>Telefone</th>
|
||||
<th></th>
|
||||
<th>Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -248,62 +435,46 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente
|
||||
{pacientesFiltrados.length > 0 ? (
|
||||
pacientesFiltrados.map((paciente) => (
|
||||
<tr key={paciente.id}>
|
||||
<td>{paciente.full_name}</td>
|
||||
<td>{paciente.cpf}</td>
|
||||
<td>{paciente.email}</td>
|
||||
<td>{paciente.telefone}</td>
|
||||
<td>
|
||||
<span
|
||||
className={`badge ${
|
||||
paciente.ativo === "ativo"
|
||||
? "bg-success"
|
||||
: "bg-danger"
|
||||
}`}
|
||||
>
|
||||
{paciente.ativo}
|
||||
<div className="d-flex align-items-center patient-name-container">
|
||||
{paciente.full_name}
|
||||
<div className="d-flex patient-badges">
|
||||
{ehAniversariante(paciente.birth_date) && (
|
||||
<span className="badge anniversary-badge ms-2" title="Aniversariante do dia">
|
||||
<i className="bi bi-gift"></i>
|
||||
</span>
|
||||
)}
|
||||
{paciente.vip && (
|
||||
<span className="badge vip-badge ms-2" title="Paciente VIP">
|
||||
VIP
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>{paciente.cpf}</td>
|
||||
<td>
|
||||
<span className="badge insurance-badge">
|
||||
{paciente.insurance_plan || 'Não informado'}
|
||||
</span>
|
||||
</td>
|
||||
<td>{paciente.email || 'Não informado'}</td>
|
||||
<td>
|
||||
<div className="d-flex gap-2">
|
||||
<Link to={`${paciente.id}`}>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "#E6F2FF",
|
||||
color: "#004085",
|
||||
}}
|
||||
onClick={() => {
|
||||
|
||||
console.log(paciente.id);
|
||||
}}
|
||||
>
|
||||
<button className="btn btn-sm btn-view">
|
||||
<i className="bi bi-eye me-1"></i> Ver Detalhes
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
<Link to={`${paciente.id}/edit`}>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "#FFF3CD",
|
||||
color: "#856404",
|
||||
}}
|
||||
onClick={() => {console.log(paciente.id)
|
||||
|
||||
|
||||
}}
|
||||
>
|
||||
<button className="btn btn-sm btn-edit">
|
||||
<i className="bi bi-pencil me-1"></i> Editar
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
{/* Botão que abre o modal */}
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "#F8D7DA",
|
||||
color: "#721C24",
|
||||
}}
|
||||
className="btn btn-sm btn-delete"
|
||||
onClick={() => {
|
||||
setSelectedPatientId(paciente.id);
|
||||
setShowDeleteModal(true);
|
||||
@ -317,7 +488,7 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan="8" className="text-center">
|
||||
<td colSpan="5" className="empty-state">
|
||||
Nenhum paciente encontrado.
|
||||
</td>
|
||||
</tr>
|
||||
@ -334,7 +505,7 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente
|
||||
{/* Modal de confirmação */}
|
||||
{showDeleteModal && (
|
||||
<div
|
||||
className="modal fade show"
|
||||
className="modal fade show delete-modal"
|
||||
style={{
|
||||
display: "block",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
@ -346,9 +517,8 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente
|
||||
>
|
||||
<div className="modal-dialog modal-dialog-centered">
|
||||
<div className="modal-content">
|
||||
|
||||
<div className="modal-header bg-danger bg-opacity-25">
|
||||
<h5 className="modal-title text-danger">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">
|
||||
Confirmação de Exclusão
|
||||
</h5>
|
||||
<button
|
||||
@ -360,12 +530,11 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente
|
||||
|
||||
<div className="modal-body">
|
||||
<p className="mb-0 fs-5">
|
||||
Tem certeza que deseja excluir este paciente?
|
||||
Tem certeza que deseja excluir este paciente?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="modal-footer">
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
@ -374,7 +543,6 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente
|
||||
Cancelar
|
||||
</button>
|
||||
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-danger"
|
||||
@ -391,4 +559,4 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente
|
||||
);
|
||||
}
|
||||
|
||||
export default TablePaciente;
|
||||
export default TablePaciente;
|
||||
281
src/pages/style/DoctorCadastroManager.css
Normal file
281
src/pages/style/DoctorCadastroManager.css
Normal file
@ -0,0 +1,281 @@
|
||||
/* Estilos do modal */
|
||||
.modal-overlay {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
width: 400px;
|
||||
max-width: 90%;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
animation: modal-appear 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes modal-appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9) translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-header-success {
|
||||
background-color: #28a745 !important;
|
||||
}
|
||||
|
||||
.modal-header-error {
|
||||
background-color: #dc3545 !important;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-close-button {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-close-button:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 25px 20px;
|
||||
}
|
||||
|
||||
.modal-message {
|
||||
color: #111;
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 15px 20px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.modal-button {
|
||||
border: none;
|
||||
padding: 8px 20px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.modal-button-success {
|
||||
background-color: #28a745;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.modal-button-success:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
.modal-button-error {
|
||||
background-color: #dc3545;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.modal-button-error:hover {
|
||||
background-color: #c82333;
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
margin-bottom: 2rem;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
.page-heading h3 {
|
||||
color: #333;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.page-content section {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page-content .row {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page-content .col-12 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9998;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #3498db;
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.modal-close-button:focus,
|
||||
.modal-button:focus {
|
||||
outline: 2px solid #0056b3;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Garantir que as cores dos cabeçalhos sejam aplicadas */
|
||||
.modal-overlay .modal-container .modal-header.modal-header-success {
|
||||
background-color: #28a745 !important;
|
||||
}
|
||||
|
||||
.modal-overlay .modal-container .modal-header.modal-header-error {
|
||||
background-color: #dc3545 !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.modal-container {
|
||||
width: 95%;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.modal-message {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.page-heading h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 1.5rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.modal-header {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 1rem;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
.page-heading h3 {
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-contrast: high) {
|
||||
.modal-container {
|
||||
border: 2px solid #000;
|
||||
}
|
||||
|
||||
.modal-header-success {
|
||||
background-color: #006400 !important;
|
||||
}
|
||||
|
||||
.modal-header-error {
|
||||
background-color: #8b0000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.modal-container {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.modal-button:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
animation-duration: 2s;
|
||||
}
|
||||
}
|
||||
278
src/pages/style/PatientCadastroManager.css
Normal file
278
src/pages/style/PatientCadastroManager.css
Normal file
@ -0,0 +1,278 @@
|
||||
.page-heading {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.page-heading h3 {
|
||||
color: #1e3a8a;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background-color: #d1ecf1;
|
||||
border-color: #bee5eb;
|
||||
color: #0c5460;
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-radius: 0.375rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.spinner-border-sm {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-width: 0.15em;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.75rem;
|
||||
margin-left: -0.75rem;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
padding-right: 0.75rem;
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
/* Estilos do modal */
|
||||
.modal-overlay {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
width: 400px;
|
||||
max-width: 90%;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
animation: modal-appear 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes modal-appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: #1e3a8a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-header.success {
|
||||
background-color: #28a745 !important;
|
||||
}
|
||||
|
||||
.modal-header.error {
|
||||
background-color: #dc3545 !important;
|
||||
}
|
||||
|
||||
.modal-header h5 {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-close-button {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.modal-close-button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 25px 20px;
|
||||
}
|
||||
|
||||
.modal-message {
|
||||
color: #111;
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.modal-submessage {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
margin: 10px 0 0 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 15px 20px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.modal-confirm-button {
|
||||
background-color: #1e3a8a;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 8px 20px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.modal-confirm-button:hover {
|
||||
background-color: #1e40a5;
|
||||
}
|
||||
|
||||
.modal-confirm-button.success {
|
||||
background-color: #28a745 !important;
|
||||
}
|
||||
|
||||
.modal-confirm-button.success:hover {
|
||||
background-color: #218838 !important;
|
||||
}
|
||||
|
||||
.modal-confirm-button.error {
|
||||
background-color: #dc3545 !important;
|
||||
}
|
||||
|
||||
.modal-confirm-button.error:hover {
|
||||
background-color: #c82333 !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-heading {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.page-heading h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 95%;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.modal-message {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.page-heading h3 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.modal-header h5 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.modal-confirm-button {
|
||||
padding: 6px 16px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.3s ease-in;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-in {
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateY(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.loading-state::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
z-index: 10;
|
||||
}
|
||||
237
src/pages/style/TableDoctor.css
Normal file
237
src/pages/style/TableDoctor.css
Normal file
@ -0,0 +1,237 @@
|
||||
/* TableDoctor.css */
|
||||
.table-doctor-container {
|
||||
line-height: 2.5;
|
||||
}
|
||||
|
||||
.table-doctor-card {
|
||||
border: none;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.table-doctor-card .card-header {
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.table-doctor-filters {
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.table-doctor-filters h5 {
|
||||
color: #495057;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.table-doctor-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-doctor-table th {
|
||||
background-color: #f8f9fa;
|
||||
color: #495057;
|
||||
font-weight: 600;
|
||||
padding: 15px 8px;
|
||||
border-bottom: 2px solid #dee2e6;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table-doctor-table td {
|
||||
padding: 15px 8px;
|
||||
vertical-align: middle;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.table-doctor-table tbody tr:hover {
|
||||
background-color: rgba(0, 0, 0, 0.025);
|
||||
}
|
||||
|
||||
/* Badges */
|
||||
.specialty-badge {
|
||||
background-color: #1e3a8a !important;
|
||||
color: white !important;
|
||||
padding: 0.35em 0.65em;
|
||||
font-size: 0.75em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* REMOVIDO: .vip-badge */
|
||||
|
||||
.results-badge {
|
||||
background-color: #1e3a8a;
|
||||
color: white;
|
||||
padding: 0.5em 0.75em;
|
||||
font-size: 0.875em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.anniversary-badge {
|
||||
background-color: #ffc107;
|
||||
color: #000;
|
||||
padding: 0.35em 0.65em;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
/* Botões de ação */
|
||||
.btn-view {
|
||||
background-color: #E6F2FF !important;
|
||||
color: #004085 !important;
|
||||
border: 1px solid #B8D4F0;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.btn-view:hover {
|
||||
background-color: #D1E7FF !important;
|
||||
border-color: #9EC5FE;
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background-color: #FFF3CD !important;
|
||||
color: #856404 !important;
|
||||
border: 1px solid #FFEAA7;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
background-color: #FFEEBA !important;
|
||||
border-color: #FFE087;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background-color: #F8D7DA !important;
|
||||
color: #721C24 !important;
|
||||
border: 1px solid #F5C6CB;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background-color: #F1B0B7 !important;
|
||||
border-color: #ED969E;
|
||||
}
|
||||
|
||||
/* Filtros avançados */
|
||||
.advanced-filters {
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.advanced-filters h6 {
|
||||
color: #495057;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-label.fw-bold {
|
||||
color: #495057;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.delete-modal .modal-header {
|
||||
background-color: rgba(220, 53, 69, 0.1);
|
||||
border-bottom: 1px solid rgba(220, 53, 69, 0.2);
|
||||
}
|
||||
|
||||
.delete-modal .modal-title {
|
||||
color: #dc3545;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Controles de tamanho para filtros */
|
||||
.filter-especialidade {
|
||||
min-width: 180px !important;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.filter-buttons-container {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
white-space: nowrap;
|
||||
padding: 0.375rem 0.75rem;
|
||||
}
|
||||
|
||||
/* Ajustes específicos para os filtros básicos */
|
||||
.filtros-basicos {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* Responsividade */
|
||||
@media (max-width: 768px) {
|
||||
.table-doctor-table {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.table-doctor-table th,
|
||||
.table-doctor-table td {
|
||||
padding: 10px 6px;
|
||||
}
|
||||
|
||||
.btn-view,
|
||||
.btn-edit,
|
||||
.btn-delete {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.filtros-basicos {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.filter-especialidade {
|
||||
min-width: 100% !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.filter-buttons-container {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Estados vazios */
|
||||
.empty-state {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.empty-state td {
|
||||
border-bottom: none;
|
||||
padding: 2rem !important;
|
||||
}
|
||||
|
||||
/* Alertas de filtros ativos */
|
||||
.filters-active .badge {
|
||||
font-size: 0.75em;
|
||||
padding: 0.4em 0.65em;
|
||||
}
|
||||
|
||||
/* Animações suaves */
|
||||
.table-doctor-table tbody tr {
|
||||
transition: background-color 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-view,
|
||||
.btn-edit,
|
||||
.btn-delete {
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
237
src/pages/style/TablePaciente.css
Normal file
237
src/pages/style/TablePaciente.css
Normal file
@ -0,0 +1,237 @@
|
||||
/* TablePaciente.css */
|
||||
.table-paciente-container {
|
||||
line-height: 2.5;
|
||||
}
|
||||
|
||||
.table-paciente-card {
|
||||
border: none;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.table-paciente-card .card-header {
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.table-paciente-filters {
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.table-paciente-filters h5 {
|
||||
color: #495057;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.table-paciente-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-paciente-table th {
|
||||
background-color: #f8f9fa;
|
||||
color: #495057;
|
||||
font-weight: 600;
|
||||
padding: 15px 8px;
|
||||
border-bottom: 2px solid #dee2e6;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table-paciente-table td {
|
||||
padding: 15px 8px;
|
||||
vertical-align: middle;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.table-paciente-table tbody tr:hover {
|
||||
background-color: rgba(0, 0, 0, 0.025);
|
||||
}
|
||||
|
||||
/* Badges */
|
||||
.insurance-badge {
|
||||
background-color: #6c757d !important;
|
||||
color: white !important;
|
||||
padding: 0.35em 0.65em;
|
||||
font-size: 0.75em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.vip-badge {
|
||||
background-color: #1e3a8a !important;
|
||||
color: white !important;
|
||||
padding: 0.35em 0.65em;
|
||||
font-size: 0.75em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.results-badge {
|
||||
background-color: #1e3a8a;
|
||||
color: white;
|
||||
padding: 0.5em 0.75em;
|
||||
font-size: 0.875em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.anniversary-badge {
|
||||
background-color: #ffc107;
|
||||
color: #000;
|
||||
padding: 0.35em 0.65em;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
/* Botões de ação */
|
||||
.btn-view {
|
||||
background-color: #E6F2FF !important;
|
||||
color: #004085 !important;
|
||||
border: 1px solid #B8D4F0;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.btn-view:hover {
|
||||
background-color: #D1E7FF !important;
|
||||
border-color: #9EC5FE;
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background-color: #FFF3CD !important;
|
||||
color: #856404 !important;
|
||||
border: 1px solid #FFEAA7;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
background-color: #FFEEBA !important;
|
||||
border-color: #FFE087;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background-color: #F8D7DA !important;
|
||||
color: #721C24 !important;
|
||||
border: 1px solid #F5C6CB;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background-color: #F1B0B7 !important;
|
||||
border-color: #ED969E;
|
||||
}
|
||||
|
||||
/* Filtros avançados */
|
||||
.advanced-filters {
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.advanced-filters h6 {
|
||||
color: #495057;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-label.fw-bold {
|
||||
color: #495057;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.delete-modal .modal-header {
|
||||
background-color: rgba(220, 53, 69, 0.1);
|
||||
border-bottom: 1px solid rgba(220, 53, 69, 0.2);
|
||||
}
|
||||
|
||||
.delete-modal .modal-title {
|
||||
color: #dc3545;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Estados vazios */
|
||||
.empty-state {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.empty-state td {
|
||||
border-bottom: none;
|
||||
padding: 2rem !important;
|
||||
}
|
||||
|
||||
/* Alertas de filtros ativos */
|
||||
.filters-active .badge {
|
||||
font-size: 0.75em;
|
||||
padding: 0.4em 0.65em;
|
||||
}
|
||||
|
||||
/* Animações suaves */
|
||||
.table-paciente-table tbody tr {
|
||||
transition: background-color 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-view,
|
||||
.btn-edit,
|
||||
.btn-delete {
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
/* Responsividade */
|
||||
@media (max-width: 768px) {
|
||||
.table-paciente-table {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.table-paciente-table th,
|
||||
.table-paciente-table td {
|
||||
padding: 10px 6px;
|
||||
}
|
||||
|
||||
.btn-view,
|
||||
.btn-edit,
|
||||
.btn-delete {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.table-paciente-filters .d-flex {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.table-paciente-filters .form-select {
|
||||
min-width: 100% !important;
|
||||
}
|
||||
|
||||
.patient-name-container {
|
||||
flex-direction: column;
|
||||
align-items: flex-start !important;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.patient-badges {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}/* Estilos para componentes compactos */
|
||||
.compact-select {
|
||||
font-size: 1.0rem;
|
||||
padding: 0.45rem 0.5rem;
|
||||
}
|
||||
|
||||
.compact-select option {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Ajuste adicional para os botões de filtro */
|
||||
.table-paciente-filters .btn-sm {
|
||||
font-size: 0.8rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Garantir que os botões fiquem alinhados */
|
||||
.table-paciente-filters .d-flex {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user