Details melhorias
This commit is contained in:
jp-lima
commit
7b28e2a242
4
package-lock.json
generated
4
package-lock.json
generated
@ -21614,8 +21614,7 @@
|
||||
"node_modules/dayjs": {
|
||||
"version": "1.11.18",
|
||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.18.tgz",
|
||||
"integrity": "sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==",
|
||||
"license": "MIT"
|
||||
"integrity": "sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA=="
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.4.1",
|
||||
@ -30562,7 +30561,6 @@
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
|
||||
"integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
}
|
||||
|
||||
@ -6,8 +6,10 @@ import Table from "./pages/Table";
|
||||
import Inicio from './pages/Inicio';
|
||||
import FormLayout from './pages/FormLayout';
|
||||
import EditPage from './pages/EditPage';
|
||||
import DoctorEditPage from './pages/DoctorEditPage';
|
||||
|
||||
import Details from './pages/Details';
|
||||
import DoctorDetails from './pages/DoctorDetails';
|
||||
|
||||
import DoctorTable from './pages/DoctorTable';
|
||||
import DoctorFormLayout from './pages/DoctorFormLayout';
|
||||
@ -40,8 +42,12 @@ function App() {
|
||||
return <DoctorTable setCurrentPage={setCurrentPage} setPatientID={setPatientID} />;
|
||||
case 'details-page-paciente':
|
||||
return <Details patientID={patientID} setCurrentPage={setCurrentPage} />;
|
||||
case 'details-page-doctor':
|
||||
return <DoctorDetails patientID={patientID} setCurrentPage={setCurrentPage} />;
|
||||
case 'edit-page-paciente':
|
||||
return <EditPage id={patientID} />;
|
||||
case 'edit-page-doctor':
|
||||
return <DoctorEditPage id={patientID} />;
|
||||
default:
|
||||
return <Inicio setCurrentPage={setCurrentPage} />;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
const body = document.body;
|
||||
const theme = localStorage.getItem('theme')
|
||||
|
||||
if (theme)
|
||||
if (theme)
|
||||
document.documentElement.setAttribute('data-bs-theme', theme)
|
||||
|
||||
@ -48,12 +48,12 @@ function Sidebar(props) {
|
||||
<div className="sidebar-header">
|
||||
<div className="d-flex justify-content-between">
|
||||
<div className="logo">
|
||||
{/* Logo volta pro Início */}
|
||||
{/* Logo volta pro Dashboard */}
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
props.setCurrentPage('Inicio');
|
||||
props.setCurrentPage('dashboard');
|
||||
}}
|
||||
>
|
||||
<hi>MediConnect</hi>
|
||||
|
||||
@ -31,63 +31,98 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
|
||||
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
nome: PatientDict.nome,
|
||||
nomeSocial: PatientDict.nome_social,
|
||||
dataNascimento: PatientDict.data_nascimento,
|
||||
genero: PatientDict.sexo,
|
||||
//documento: '',
|
||||
//numeroDocumento: '',
|
||||
cpf: PatientDict.cpf,
|
||||
profissao: PatientDict.profissao ,
|
||||
//nomeConjuge: '',
|
||||
//outroId: '',
|
||||
cep: '',
|
||||
cidade: PatientDict.cidade,
|
||||
estado: PatientDict.estado,
|
||||
bairro: PatientDict.bairro,
|
||||
rua: PatientDict.logradouro,
|
||||
numero: '',
|
||||
complemento: '',
|
||||
email: PatientDict.email,
|
||||
telefone1: PatientDict.celular,
|
||||
telefone2: '',
|
||||
telefone3: '',
|
||||
observacoes: ''
|
||||
});
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData({
|
||||
...formData,
|
||||
[name]: value
|
||||
foto: null,
|
||||
nome: PatientDict.nome,
|
||||
nomeSocial: PatientDict.nome_social,
|
||||
dataNascimento: PatientDict.data_nascimento,
|
||||
genero: PatientDict.sexo,
|
||||
cpf: PatientDict.cpf,
|
||||
profissao: PatientDict.profissao ,
|
||||
nomeConjuge: '',
|
||||
outroId: '',
|
||||
cep: '',
|
||||
cidade: PatientDict.cidade,
|
||||
estado: PatientDict.estado,
|
||||
bairro: PatientDict.bairro,
|
||||
rua: PatientDict.logradouro,
|
||||
numero: '',
|
||||
complemento: '',
|
||||
email: PatientDict.email,
|
||||
telefone1: PatientDict.celular,
|
||||
telefone2: '',
|
||||
telefone3: '',
|
||||
observacoes: '',
|
||||
rg: '',
|
||||
documentoTipo: '',
|
||||
numeroDocumento: '',
|
||||
etniaRaca: '',
|
||||
naturalidade: '',
|
||||
nacionalidade: '',
|
||||
estadoCivil: '',
|
||||
|
||||
// INFORMAÇÕES MÉDICAS
|
||||
tipoSanguineo: '',
|
||||
peso: '',
|
||||
altura: '',
|
||||
imc: '',
|
||||
alergias: '',
|
||||
|
||||
// ANEXO
|
||||
anexos: null,
|
||||
});
|
||||
|
||||
// Estado para armazenar a URL da foto do avatar
|
||||
const [avatarUrl, setAvatarUrl] = useState(null);
|
||||
|
||||
if(name.includes('cpf')){
|
||||
// Estado para controlar quais seções estão colapsadas
|
||||
const [collapsedSections, setCollapsedSections] = useState({
|
||||
dadosPessoais: true, // Alterado para true para a seção ficar aberta por padrão
|
||||
infoMedicas: false,
|
||||
infoConvenio: false,
|
||||
endereco: false,
|
||||
contato: false,
|
||||
});
|
||||
|
||||
let cpfFormatado = FormatCPF(e.target.value)
|
||||
// Função para alternar o estado de colapso de uma seção
|
||||
const handleToggleCollapse = (section) => {
|
||||
setCollapsedSections(prevState => ({
|
||||
...prevState,
|
||||
[section]: !prevState[section]
|
||||
}));
|
||||
};
|
||||
|
||||
setFormData({...formData,
|
||||
[name]: cpfFormatado,}
|
||||
)}
|
||||
const handleChange = (e) => {
|
||||
const { name, value, type, checked, files } = e.target;
|
||||
|
||||
if (type === 'checkbox') {
|
||||
setFormData({ ...formData, [name]: checked });
|
||||
} else if (type === 'file') {
|
||||
setFormData({ ...formData, [name]: files[0] });
|
||||
|
||||
else if(name.includes('telefone')){
|
||||
let telefoneFormatado = FormatTelefones(value)
|
||||
// Lógica para pré-visualizar a imagem no avatar
|
||||
if (name === 'foto' && files[0]) {
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
setAvatarUrl(reader.result);
|
||||
};
|
||||
reader.readAsDataURL(files[0]);
|
||||
} else if (name === 'foto' && !files[0]) {
|
||||
setAvatarUrl(null); // Limpa o avatar se nenhum arquivo for selecionado
|
||||
}
|
||||
|
||||
console.log(telefoneFormatado)
|
||||
|
||||
|
||||
|
||||
setFormData({...formData,
|
||||
[name]: telefoneFormatado
|
||||
})
|
||||
} else {
|
||||
setFormData({ ...formData, [name]: value });
|
||||
}
|
||||
|
||||
|
||||
if (name.includes('cpf')) {
|
||||
let cpfFormatado = FormatCPF(value);
|
||||
setFormData(prev => ({ ...prev, [name]: cpfFormatado }));
|
||||
} else if (name.includes('telefone')) {
|
||||
let telefoneFormatado = FormatTelefones(value);
|
||||
setFormData(prev => ({ ...prev, [name]: telefoneFormatado }));
|
||||
}
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Função para buscar endereço pelo CEP
|
||||
const handleCepBlur = async () => {
|
||||
const cep = formData.cep.replace(/\D/g, '');
|
||||
@ -113,196 +148,421 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento || !formData.email){
|
||||
alert('Por favor, preencha: Nome ,CPF, Gênero, Data de nascimento e Email.');
|
||||
if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento || !formData.email) {
|
||||
alert('Por favor, preencha: Nome ,CPF, Gênero, Data de Nascimento e Email.');
|
||||
return;
|
||||
}
|
||||
|
||||
onSave(
|
||||
{nome: formData.nome,
|
||||
nomeSocial: formData.nomeSocial,
|
||||
dataNascimento: formData.dataNascimento,
|
||||
genero: formData.genero,
|
||||
//documento: formData.documento,
|
||||
//numeroDocumento: formData.numeroDocumento,
|
||||
cpf: formData.cpf,
|
||||
profissao: formData.profissao,
|
||||
//nomeConjuge: formData.nomeConjuge,
|
||||
//outroId: formData.outroId,
|
||||
endereco: {
|
||||
cep: formData.cep,
|
||||
cidade: formData.cidade,
|
||||
estado: formData.estado,
|
||||
bairro: formData.bairro,
|
||||
logradouro: formData.rua,
|
||||
numero: formData.numero,
|
||||
complemento: formData.complemento,
|
||||
},
|
||||
|
||||
contato: {
|
||||
email: formData.email,
|
||||
telefone1: formData.telefone1,
|
||||
telefone2: formData.telefone2,
|
||||
telefone3: formData.telefone3,
|
||||
},
|
||||
|
||||
observacoes: formData.observacoes,
|
||||
}
|
||||
|
||||
|
||||
{
|
||||
...formData,
|
||||
endereco: {
|
||||
cep: formData.cep,
|
||||
cidade: formData.cidade,
|
||||
estado: formData.estado,
|
||||
bairro: formData.bairro,
|
||||
logradouro: formData.rua,
|
||||
numero: formData.numero,
|
||||
complemento: formData.complemento,
|
||||
},
|
||||
contato: {
|
||||
email: formData.email,
|
||||
telefone1: formData.telefone1,
|
||||
telefone2: formData.telefone2,
|
||||
telefone3: formData.telefone3,
|
||||
},
|
||||
infoMedicas: {
|
||||
tipoSanguineo: formData.tipoSanguineo,
|
||||
peso: formData.peso,
|
||||
altura: formData.altura,
|
||||
imc: formData.imc,
|
||||
alergias: formData.alergias,
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card p-3">
|
||||
<h3 className="mb-3 text-center">MediConnect</h3>
|
||||
<div className="card p-3 shadow-sm">
|
||||
<h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
|
||||
|
||||
{/* ------------------ DADOS PESSOAIS ------------------ */}
|
||||
<h5 className="mb-3">Dados Pessoais</h5>
|
||||
<div className="row">
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Nome: *</label>
|
||||
<input type="text" className="form-control" name="nome" value={formData.nome} onChange={handleChange} />
|
||||
{/* 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' }}>
|
||||
Dados Pessoais
|
||||
<span className="fs-5">
|
||||
{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="me-3">
|
||||
{avatarUrl ? (
|
||||
<img
|
||||
src={avatarUrl}
|
||||
alt="Avatar do Médico"
|
||||
style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover' }}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
width: '100px',
|
||||
height: '100px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: '#e0e0e0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '3.5rem',
|
||||
color: '#9e9e9e'
|
||||
}}
|
||||
>
|
||||
☤
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="foto-input" className="btn btn-primary" style={{ fontSize: '1rem' }}>Carregar Foto</label>
|
||||
<input
|
||||
type="file"
|
||||
className="form-control d-none"
|
||||
name="foto"
|
||||
id="foto-input"
|
||||
onChange={handleChange}
|
||||
accept="image/*"
|
||||
/>
|
||||
{formData.foto && <span className="ms-2" style={{ fontSize: '1rem' }}>{formData.foto.name}</span>}
|
||||
</div>
|
||||
</div>
|
||||
{/* CADASTRO */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nome: *</label>
|
||||
<input type="text" className="form-control" name="nome" value={formData.nome} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nome social:</label>
|
||||
<input type="text" className="form-control" name="nomeSocial" value={formData.nomeSocial} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Data de nascimento: *</label>
|
||||
<input type="date" className="form-control" name="dataNascimento" value={formData.dataNascimento} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Gênero: *</label>
|
||||
<select className="form-control" name="genero" value={formData.genero} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="Masculino">Masculino</option>
|
||||
<option value="Feminino">Feminino</option>
|
||||
<option value="Outro">Outro</option>
|
||||
</select>
|
||||
</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="outroId" value={formData.outroId} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>CPF: *</label>
|
||||
<input type="text" className="form-control" name="cpf" value={formData.cpf} onChange={ handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</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' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Outros documentos:</label>
|
||||
<select className="form-control" name="documentoTipo" value={formData.documentoTipo} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="CNH">CNH</option>
|
||||
<option value="Passaporte">Passaporte</option>
|
||||
</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="numeroDocumento" value={formData.numeroDocumento} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Etnia e Raça:</label>
|
||||
<select className="form-control" name="etniaRaca" value={formData.etniaRaca} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="Branca">Branca</option>
|
||||
<option value="Preta">Preta</option>
|
||||
<option value="Parda">Parda</option>
|
||||
<option value="Amarela">Amarela</option>
|
||||
<option value="Indígena">Indígena</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Naturalidade:</label>
|
||||
<input type="text" className="form-control" name="naturalidade" value={formData.naturalidade} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nacionalidade:</label>
|
||||
<input type="text" className="form-control" name="nacionalidade" value={formData.nacionalidade} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Especialização:</label>
|
||||
<select className="form-control" name="profissao" value={formData.profissao} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="Cardiologia">Clínica médica (clínico geral)</option>
|
||||
<option value="Dermatologia">Pediatria</option>
|
||||
<option value="Ginecologia">Ginecologia e obstetrícia</option>
|
||||
<option value="Pediatria">Cardiologia</option>
|
||||
<option value="Ortopedia">Ortopedia e traumatologia</option>
|
||||
<option value="Oftalmologia">Oftalmologia</option>
|
||||
<option value="Neurologia">Otorrinolaringologia</option>
|
||||
<option value="Psiquiatria">Dermatologia</option>
|
||||
<option value="Endocrinologia">Neurologia</option>
|
||||
<option value="Oncologia">Psiquiatria</option>
|
||||
<option value="Oncologia">Endocrinologia</option>
|
||||
<option value="Oncologia">Gastroenterologia</option>
|
||||
<option value="Oncologia">Urologia</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Estado civil:</label>
|
||||
<select className="form-control" name="estadoCivil" value={formData.estadoCivil} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="Solteiro">Solteiro(a)</option>
|
||||
<option value="Casado">Casado(a)</option>
|
||||
<option value="Divorciado">Divorciado(a)</option>
|
||||
<option value="Viuvo">Viúvo(a)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nome do esposo(a):</label>
|
||||
<input type="text" className="form-control" name="nomeConjuge" value={formData.nomeConjuge} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
|
||||
{/* CAMPOS MOVIDOS */}
|
||||
<div className="col-md-12 mb-3 mt-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Observações:</label>
|
||||
<textarea className="form-control" name="observacoes" value={formData.observacoes} onChange={handleChange} style={{ fontSize: '1.1rem' }}></textarea>
|
||||
</div>
|
||||
<div className="col-md-12 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Anexos do Médico:</label>
|
||||
<div>
|
||||
<label htmlFor="anexos-input" className="btn btn-secondary" style={{ fontSize: '1.1rem', background: '#9ca3af' }}>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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Nome social:</label>
|
||||
<input type="text" className="form-control" name="nomeSocial" value={formData.nomeSocial} onChange={handleChange} />
|
||||
</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' }}>
|
||||
Endereço
|
||||
<span className="fs-5">
|
||||
{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} onBlur={handleCepBlur} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-8 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Rua:</label>
|
||||
<input type="text" className="form-control" name="rua" value={formData.rua} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Bairro:</label>
|
||||
<input type="text" className="form-control" name="bairro" value={formData.bairro} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Cidade:</label>
|
||||
<input type="text" className="form-control" name="cidade" value={formData.cidade} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-2 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Estado:</label>
|
||||
<input type="text" className="form-control" name="estado" value={formData.estado} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Número:</label>
|
||||
<input type="text" className="form-control" name="numero" value={formData.numero} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-8 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Complemento:</label>
|
||||
<input type="text" className="form-control" name="complemento" value={formData.complemento} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Data de nascimento:</label>
|
||||
<input type="date" className="form-control" name="dataNascimento" value={formData.dataNascimento} onChange={handleChange} />
|
||||
</div>
|
||||
|
||||
{/* CONTATO */}
|
||||
<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
|
||||
<span className="fs-5">
|
||||
{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>
|
||||
<input type="email" className="form-control" name="email" value={formData.email} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Telefone: *</label>
|
||||
<input type="text" className="form-control" name="telefone1" value={formData.telefone1} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Telefone 2:</label>
|
||||
<input type="text" className="form-control" name="telefone2" value={formData.telefone2} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Celular:</label>
|
||||
<input type="text" className="form-control" name="telefone3" value={formData.telefone3} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Gênero: *</label>
|
||||
<select className="form-control" name="genero" value={formData.genero} onChange={handleChange}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="Masculino">Masculino</option>
|
||||
<option value="Feminino">Feminino</option>
|
||||
<option value="Outro">Outro</option>
|
||||
</select>
|
||||
</div>
|
||||
{/*
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Outro documento:</label>
|
||||
<input type="text" className="form-control" name="documento" value={formData.documento} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Número do documento:</label>
|
||||
<input type="text" className="form-control" name="numeroDocumento" value={formData.numeroDocumento} onChange={handleChange} />
|
||||
</div>
|
||||
*/}
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>CPF: *</label>
|
||||
<input type="text" className="form-control" name="cpf" value={formData.cpf} onChange={ handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Especialização:</label>
|
||||
<select
|
||||
className="form-control"
|
||||
name="profissao"
|
||||
value={formData.profissao}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<option value="">Selecione uma especialização</option>
|
||||
<option value="Cardiologia">Clínica médica (clínico geral)</option>
|
||||
<option value="Dermatologia">Pediatria</option>
|
||||
<option value="Ginecologia">Ginecologia e obstetrícia</option>
|
||||
<option value="Pediatria">Cardiologia</option>
|
||||
<option value="Ortopedia">Ortopedia e traumatologia</option>
|
||||
<option value="Oftalmologia">Oftalmologia</option>
|
||||
<option value="Neurologia">Otorrinolaringologia</option>
|
||||
<option value="Psiquiatria">Dermatologia</option>
|
||||
<option value="Endocrinologia">Neurologia</option>
|
||||
<option value="Oncologia">Psiquiatria</option>
|
||||
<option value="Oncologia">Endocrinologia</option>
|
||||
<option value="Oncologia">Gastroenterologia</option>
|
||||
<option value="Oncologia">Urologia</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/*
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Nome do esposo(a):</label>
|
||||
<input type="text" className="form-control" name="nomeConjuge" value={formData.nomeConjuge} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Identificador de outro sistema:</label>
|
||||
<input type="text" className="form-control" name="outroId" value={formData.outroId} onChange={handleChange} />
|
||||
</div>
|
||||
*/}
|
||||
</div>
|
||||
|
||||
{/* ------------------ ENDEREÇO ------------------ */}
|
||||
<h5>Endereço</h5>
|
||||
<div className="row">
|
||||
<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} />
|
||||
</div>
|
||||
<div className="col-md-8 mb-3">
|
||||
<label>Rua:</label>
|
||||
<input type="text" className="form-control" name="rua" value={formData.rua} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Bairro:</label>
|
||||
<input type="text" className="form-control" name="bairro" value={formData.bairro} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label>Cidade:</label>
|
||||
<input type="text" className="form-control" name="cidade" value={formData.cidade} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-2 mb-3">
|
||||
<label>Estado:</label>
|
||||
<input type="text" className="form-control" name="estado" value={formData.estado} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label>Número:</label>
|
||||
<input type="text" className="form-control" name="numero" value={formData.numero} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-8 mb-3">
|
||||
<label>Complemento:</label>
|
||||
<input type="text" className="form-control" name="complemento" value={formData.complemento} onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ------------------ CONTATO ------------------ */}
|
||||
<h5>Contato</h5>
|
||||
<div className="row">
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>E-mail: *</label>
|
||||
<input type="email" className="form-control" name="email" value={formData.email} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Telefone: *</label>
|
||||
<input type="text" className="form-control" name="telefone1" value={formData.telefone1} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Telefone 2:</label>
|
||||
<input type="text" className="form-control" name="telefone2" value={formData.telefone2} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Telefone 3:</label>
|
||||
<input type="text" className="form-control" name="telefone3" value={formData.telefone3} onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ------------------ INFORMAÇÕES ADICIONAIS ------------------ */}
|
||||
<h5>Informações Adicionais</h5>
|
||||
<div className="mb-3">
|
||||
<label>Observações:</label>
|
||||
<textarea className="form-control" name="observacoes" value={formData.observacoes} onChange={handleChange}></textarea>
|
||||
</div>
|
||||
|
||||
{/* Botões */}
|
||||
<div className="mt-3">
|
||||
<button className="btn btn-success me-2" onClick={handleSubmit}>
|
||||
<div className="mt-3 text-center">
|
||||
<button className="btn btn-success me-3" onClick={handleSubmit} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
|
||||
Salvar Paciente
|
||||
</button>
|
||||
<button className="btn btn-light" onClick={onCancel}>
|
||||
<button className="btn btn-light" onClick={onCancel} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
// <div className="card p-3">
|
||||
// <h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
|
||||
|
||||
// {/* ------------------ DADOS PESSOAIS ------------------ */}
|
||||
// <h5 className="mb-3">Dados Pessoais</h5>
|
||||
// <div className="row">
|
||||
// <div className="col-md-6 mb-3">
|
||||
// <label>Nome: *</label>
|
||||
// <input type="text" className="form-control" name="nome" value={formData.nome} onChange={handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-6 mb-3">
|
||||
// <label>Nome social:</label>
|
||||
// <input type="text" className="form-control" name="nomeSocial" value={formData.nomeSocial} onChange={handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-6 mb-3">
|
||||
// <label>Data de nascimento:</label>
|
||||
// <input type="date" className="form-control" name="dataNascimento" value={formData.dataNascimento} onChange={handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-6 mb-3">
|
||||
// <label>Gênero: *</label>
|
||||
// <select className="form-control" name="genero" value={formData.genero} onChange={handleChange}>
|
||||
// <option value="">Selecione</option>
|
||||
// <option value="Masculino">Masculino</option>
|
||||
// <option value="Feminino">Feminino</option>
|
||||
// <option value="Outro">Outro</option>
|
||||
// </select>
|
||||
// </div>
|
||||
// <div className="col-md-6 mb-3">
|
||||
// <label>CPF: *</label>
|
||||
// <input type="text" className="form-control" name="cpf" value={formData.cpf} onChange={ handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-6 mb-3">
|
||||
// <label>Especialização:</label>
|
||||
// <select
|
||||
// className="form-control"
|
||||
// name="profissao"
|
||||
// value={formData.profissao}
|
||||
// onChange={handleChange}
|
||||
// >
|
||||
// <option value="">Selecione uma especialização</option>
|
||||
// <option value="Cardiologia">Clínica médica (clínico geral)</option>
|
||||
// <option value="Dermatologia">Pediatria</option>
|
||||
// <option value="Ginecologia">Ginecologia e obstetrícia</option>
|
||||
// <option value="Pediatria">Cardiologia</option>
|
||||
// <option value="Ortopedia">Ortopedia e traumatologia</option>
|
||||
// <option value="Oftalmologia">Oftalmologia</option>
|
||||
// <option value="Neurologia">Otorrinolaringologia</option>
|
||||
// <option value="Psiquiatria">Dermatologia</option>
|
||||
// <option value="Endocrinologia">Neurologia</option>
|
||||
// <option value="Oncologia">Psiquiatria</option>
|
||||
// <option value="Oncologia">Endocrinologia</option>
|
||||
// <option value="Oncologia">Gastroenterologia</option>
|
||||
// <option value="Oncologia">Urologia</option>
|
||||
// </select>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// {/* ------------------ ENDEREÇO ------------------ */}
|
||||
// <h5>Endereço</h5>
|
||||
// <div className="row">
|
||||
// <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} />
|
||||
// </div>
|
||||
// <div className="col-md-8 mb-3">
|
||||
// <label>Rua:</label>
|
||||
// <input type="text" className="form-control" name="rua" value={formData.rua} onChange={handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-6 mb-3">
|
||||
// <label>Bairro:</label>
|
||||
// <input type="text" className="form-control" name="bairro" value={formData.bairro} onChange={handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-4 mb-3">
|
||||
// <label>Cidade:</label>
|
||||
// <input type="text" className="form-control" name="cidade" value={formData.cidade} onChange={handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-2 mb-3">
|
||||
// <label>Estado:</label>
|
||||
// <input type="text" className="form-control" name="estado" value={formData.estado} onChange={handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-4 mb-3">
|
||||
// <label>Número:</label>
|
||||
// <input type="text" className="form-control" name="numero" value={formData.numero} onChange={handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-8 mb-3">
|
||||
// <label>Complemento:</label>
|
||||
// <input type="text" className="form-control" name="complemento" value={formData.complemento} onChange={handleChange} />
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// {/* ------------------ CONTATO ------------------ */}
|
||||
// <h5>Contato</h5>
|
||||
// <div className="row">
|
||||
// <div className="col-md-6 mb-3">
|
||||
// <label>E-mail: *</label>
|
||||
// <input type="email" className="form-control" name="email" value={formData.email} onChange={handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-6 mb-3">
|
||||
// <label>Telefone: *</label>
|
||||
// <input type="text" className="form-control" name="telefone1" value={formData.telefone1} onChange={handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-6 mb-3">
|
||||
// <label>Telefone 2:</label>
|
||||
// <input type="text" className="form-control" name="telefone2" value={formData.telefone2} onChange={handleChange} />
|
||||
// </div>
|
||||
// <div className="col-md-6 mb-3">
|
||||
// <label>Telefone 3:</label>
|
||||
// <input type="text" className="form-control" name="telefone3" value={formData.telefone3} onChange={handleChange} />
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// {/* ------------------ INFORMAÇÕES ADICIONAIS ------------------ */}
|
||||
// <h5>Informações Adicionais</h5>
|
||||
// <div className="mb-3">
|
||||
// <label>Observações:</label>
|
||||
// <textarea className="form-control" name="observacoes" value={formData.observacoes} onChange={handleChange}></textarea>
|
||||
// </div>
|
||||
|
||||
// {/* Botões */}
|
||||
// <div className="mt-3">
|
||||
// <button className="btn btn-success me-2" onClick={handleSubmit}>
|
||||
// Salvar Paciente
|
||||
// </button>
|
||||
// <button className="btn btn-light" onClick={onCancel}>
|
||||
// Cancelar
|
||||
// </button>
|
||||
// </div>
|
||||
// </div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -109,7 +109,7 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
|
||||
const handleChange = (e) => {
|
||||
const { name, value, type, checked, files } = e.target;
|
||||
|
||||
console.log(enderecoData)
|
||||
console.log(formData, name)
|
||||
|
||||
if (type === 'checkbox') {
|
||||
setFormData({ ...formData, [name]: checked });
|
||||
@ -129,20 +129,19 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
|
||||
|
||||
|
||||
if (name.includes('cpf')) {
|
||||
let cpfFormatado = FormatCPF(value);
|
||||
setFormData(prev => ({ ...prev, [name]: cpfFormatado }));
|
||||
|
||||
setFormData({...formData, cpf:FormatCPF(value) });
|
||||
|
||||
} else if (name.includes('telefone')) {
|
||||
let telefoneFormatado = FormatTelefones(value);
|
||||
setContato(prev => ({ ...prev, [name]: telefoneFormatado }));
|
||||
}
|
||||
|
||||
if (name === 'email') {
|
||||
}else if (name === 'email') {
|
||||
setContato(prev => ({ ...prev, email: value }));
|
||||
}else if(name.includes('endereco')) {
|
||||
setEnderecoData(prev => ({ ...prev, [name.split('.')[1]]: value }));
|
||||
}else{
|
||||
setFormData({ ...formData, [name]: value });}
|
||||
setFormData({ ...formData, [name]: value });
|
||||
}
|
||||
};
|
||||
|
||||
const handleCepBlur = async () => {
|
||||
@ -171,12 +170,16 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
|
||||
const handleSubmit = async () => {
|
||||
if (!formData.nome || !formData.cpf || !formData.sexo || !formData.data_nascimento){
|
||||
alert('Por favor, preencha Nome ,CPF, Gênero e data de nascimento.');
|
||||
return;
|
||||
}
|
||||
const CPFinvalido = await ValidarCPF(formData.cpf)
|
||||
|
||||
const CPFinvalido = await ValidarCPF(formData.cpf)
|
||||
console.log(CPFinvalido)
|
||||
if(CPFinvalido[0] === true){
|
||||
alert(CPFinvalido[1])
|
||||
return}
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
onSave({
|
||||
...formData,
|
||||
@ -212,7 +215,7 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className="card p-3">
|
||||
<h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
|
||||
|
||||
@ -13,29 +13,29 @@
|
||||
{
|
||||
"name": "Cadastro de Pacientes",
|
||||
"url": "form-layout",
|
||||
"icon": "file-earmark-medical-fill"
|
||||
"icon": "heart-pulse-fill"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "Cadastro do Médico",
|
||||
"url": "doctor-form-layout",
|
||||
"icon": "file-earmark-medical-fill"
|
||||
"icon": "capsule"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "Lista de Pacientes",
|
||||
"icon": "table",
|
||||
"icon": "clipboard-heart-fill",
|
||||
"url": "table"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "Lista de Médico",
|
||||
"icon": "table",
|
||||
"icon": "hospital-fill",
|
||||
"url": "doctor-table"
|
||||
},
|
||||
{
|
||||
"name": "Agendar consulta",
|
||||
"icon": "table",
|
||||
"icon": "calendar-plus-fill",
|
||||
"url": "agendamento"
|
||||
}
|
||||
|
||||
|
||||
@ -1,409 +0,0 @@
|
||||
[
|
||||
{
|
||||
"name": "Início",
|
||||
"url": "Inicio",
|
||||
"icon": "grid-fill"
|
||||
},
|
||||
{
|
||||
"name": "Components",
|
||||
"key": "component",
|
||||
"icon": "stack",
|
||||
"submenu": [
|
||||
{
|
||||
"name": "Alert",
|
||||
"url": "component-alert.html"
|
||||
},
|
||||
{
|
||||
"name": "Badge",
|
||||
"url": "component-badge.html"
|
||||
},
|
||||
{
|
||||
"name": "Breadcrumb",
|
||||
"url": "component-breadcrumb.html"
|
||||
},
|
||||
{
|
||||
"name": "Button",
|
||||
"url": "component-button.html"
|
||||
},
|
||||
{
|
||||
"name": "Card",
|
||||
"url": "component-card.html"
|
||||
},
|
||||
{
|
||||
"name": "Carousel",
|
||||
"url": "component-carousel.html"
|
||||
},
|
||||
{
|
||||
"name": "Collapse",
|
||||
"url": "component-collapse.html"
|
||||
},
|
||||
{
|
||||
"name": "Dropdown",
|
||||
"url": "component-dropdown.html"
|
||||
},
|
||||
{
|
||||
"name": "List Group",
|
||||
"url": "component-list-group.html"
|
||||
},
|
||||
{
|
||||
"name": "Modal",
|
||||
"url": "component-modal.html"
|
||||
},
|
||||
{
|
||||
"name": "Navs",
|
||||
"url": "component-navs.html"
|
||||
},
|
||||
{
|
||||
"name": "Pagination",
|
||||
"url": "component-pagination.html"
|
||||
},
|
||||
{
|
||||
"name": "Progress",
|
||||
"url": "component-progress.html"
|
||||
},
|
||||
{
|
||||
"name": "Spinner",
|
||||
"url": "component-spinner.html"
|
||||
},
|
||||
{
|
||||
"name": "Tooltip",
|
||||
"url": "component-tooltip.html"
|
||||
},
|
||||
{
|
||||
"name": "Extra Components",
|
||||
"key": "extra-component",
|
||||
"icon": "collection-fill",
|
||||
"submenu": [
|
||||
{
|
||||
"name": "Avatar",
|
||||
"url": "extra-component-avatar.html"
|
||||
},
|
||||
{
|
||||
"name": "Comment",
|
||||
"url": "extra-component-comment.html"
|
||||
},
|
||||
{
|
||||
"name": "Sweet Alert",
|
||||
"url": "extra-component-sweetalert.html"
|
||||
},
|
||||
{
|
||||
"name": "Toastify",
|
||||
"url": "extra-component-toastify.html"
|
||||
},
|
||||
{
|
||||
"name": "Rating",
|
||||
"url": "extra-component-rating.html"
|
||||
},
|
||||
{
|
||||
"name": "Divider",
|
||||
"url": "extra-component-divider.html"
|
||||
},
|
||||
{
|
||||
"name": "GLightbox",
|
||||
"url": "extra-component-glightbox.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Layouts",
|
||||
"key": "layout",
|
||||
"icon": "grid-1x2-fill",
|
||||
"submenu": [
|
||||
{
|
||||
"name": "Default Layout",
|
||||
"url": "layout-default.html"
|
||||
},
|
||||
{
|
||||
"name": "1 Column",
|
||||
"url": "layout-vertical-1-column.html"
|
||||
},
|
||||
{
|
||||
"name": "Vertical Navbar",
|
||||
"url": "layout-vertical-navbar.html"
|
||||
},
|
||||
{
|
||||
"name": "RTL Layout",
|
||||
"url": "layout-rtl.html"
|
||||
},
|
||||
{
|
||||
"name": "Horizontal Menu",
|
||||
"url": "layout-horizontal.html"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Forms",
|
||||
"key": "form",
|
||||
"icon": "file-earmark-medical-fill",
|
||||
"submenu": [
|
||||
{
|
||||
"name": "Form Elements",
|
||||
"key": "form-element",
|
||||
"icon": "hexagon-fill",
|
||||
"submenu": [
|
||||
{
|
||||
"name": "Input",
|
||||
"url": "form-element-input.html"
|
||||
},
|
||||
{
|
||||
"name": "Input Group",
|
||||
"url": "form-element-input-group.html"
|
||||
},
|
||||
{
|
||||
"name": "Select",
|
||||
"url": "form-element-select.html"
|
||||
},
|
||||
{
|
||||
"name": "Radio",
|
||||
"url": "form-element-radio.html"
|
||||
},
|
||||
{
|
||||
"name": "Checkbox",
|
||||
"url": "form-element-checkbox.html"
|
||||
},
|
||||
{
|
||||
"name": "Textarea",
|
||||
"url": "form-element-textarea.html"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Form Layout",
|
||||
"url": "form-layout",
|
||||
"icon": "file-earmark-medical-fill"
|
||||
},
|
||||
{
|
||||
"name": "Form Validation",
|
||||
"icon": "journal-check",
|
||||
"key": "form-validation",
|
||||
"submenu": [
|
||||
{
|
||||
"name": "Parsley",
|
||||
"url": "form-validation-parsley.html"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Form Editor",
|
||||
"icon": "pen-fill",
|
||||
"key": "form-editor",
|
||||
"submenu": [
|
||||
{
|
||||
"name": "Quill",
|
||||
"url": "form-editor-quill.html"
|
||||
},
|
||||
{
|
||||
"name": "CKEditor",
|
||||
"url": "form-editor-ckeditor.html"
|
||||
},
|
||||
{
|
||||
"name": "Summernote",
|
||||
"url": "form-editor-summernote.html"
|
||||
},
|
||||
{
|
||||
"name": "TinyMCE",
|
||||
"url": "form-editor-tinymce.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Table",
|
||||
"icon": "table",
|
||||
"submenu": [
|
||||
{
|
||||
"name": "Table",
|
||||
"url": "table",
|
||||
"icon": "file-earmark-spreadsheet-fill"
|
||||
},
|
||||
{
|
||||
"name": "Datatable",
|
||||
"url": "table-datatable.html",
|
||||
"icon": "file-earmark-spreadsheet-fill"
|
||||
},
|
||||
{
|
||||
"name": "Datatable (jQuery)",
|
||||
"url": "table-datatable-jquery.html",
|
||||
"icon": "file-earmark-spreadsheet-fill"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Extras",
|
||||
"key": "extras",
|
||||
"icon": "plus-square-fill",
|
||||
"submenu": [
|
||||
{
|
||||
"name": "Widgets",
|
||||
"key": "ui-widgets",
|
||||
"icon": "pentagon-fill",
|
||||
"submenu": [
|
||||
{
|
||||
"name": "Chatbox",
|
||||
"url": "ui-widgets-chatbox.html"
|
||||
},
|
||||
{
|
||||
"name": "Pricing",
|
||||
"url": "ui-widgets-pricing.html"
|
||||
},
|
||||
{
|
||||
"name": "To-do List",
|
||||
"url": "ui-widgets-todolist.html"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Icons",
|
||||
"key": "ui-icons",
|
||||
"icon": "egg-fill",
|
||||
"submenu": [
|
||||
{
|
||||
"name": "Bootstrap Icons ",
|
||||
"url": "ui-icons-bootstrap-icons.html"
|
||||
},
|
||||
{
|
||||
"name": "Fontawesome",
|
||||
"url": "ui-icons-fontawesome.html"
|
||||
},
|
||||
{
|
||||
"name": "Dripicons",
|
||||
"url": "ui-icons-dripicons.html"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Charts",
|
||||
"key": "ui-chart",
|
||||
"icon": "bar-chart-fill",
|
||||
"submenu": [
|
||||
{
|
||||
"name": "ChartJS",
|
||||
"url": "ui-chart-chartjs.html"
|
||||
},
|
||||
{
|
||||
"name": "Apexcharts",
|
||||
"url": "ui-chart-apexcharts.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Pages",
|
||||
"key": "pages",
|
||||
"icon": "file-earmark-fill",
|
||||
"submenu": [
|
||||
{
|
||||
"name": "Authentication",
|
||||
"key": "auth",
|
||||
"icon": "person-badge-fill",
|
||||
"submenu": [
|
||||
{
|
||||
"name": "Login",
|
||||
"url": "auth-login.html"
|
||||
},
|
||||
{
|
||||
"name": "Register",
|
||||
"url": "auth-register.html"
|
||||
},
|
||||
{
|
||||
"name": "Forgot Password",
|
||||
"url": "auth-forgot-password.html"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Errors",
|
||||
"key": "error",
|
||||
"icon": "x-octagon-fill",
|
||||
"submenu": [
|
||||
{
|
||||
"name": "403",
|
||||
"url": "error-403.html"
|
||||
},
|
||||
{
|
||||
"name": "404",
|
||||
"url": "error-404.html"
|
||||
},
|
||||
{
|
||||
"name": "500",
|
||||
"url": "error-500.html"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "File Uploader",
|
||||
"key": "ui-file",
|
||||
"icon": "cloud-arrow-up-fill",
|
||||
"url": "ui-file-uploader.html"
|
||||
},
|
||||
{
|
||||
"name": "Maps",
|
||||
"key": "ui-map",
|
||||
"icon": "map-fill",
|
||||
"submenu": [
|
||||
{
|
||||
"name": "Google Map",
|
||||
"url": "ui-map-google-map.html"
|
||||
},
|
||||
{
|
||||
"name": "JS Vector Map",
|
||||
"url": "ui-map-jsvectormap.html"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Email Application",
|
||||
"key": "application-email",
|
||||
"icon": "envelope-fill",
|
||||
"url": "application-email.html"
|
||||
},
|
||||
{
|
||||
"name": "Chat Application",
|
||||
"key": "application-chat",
|
||||
"icon": "chat-dots-fill",
|
||||
"url": "application-chat.html"
|
||||
},
|
||||
{
|
||||
"name": "Photo Gallery",
|
||||
"key": "application-gallery",
|
||||
"icon": "image-fill",
|
||||
"url": "application-gallery.html"
|
||||
},
|
||||
{
|
||||
"name": "Checkout Page",
|
||||
"key": "application-checkout",
|
||||
"icon": "basket-fill",
|
||||
"url": "application-checkout.html"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Support",
|
||||
"key": "error",
|
||||
"icon": "life-preserver",
|
||||
"submenu": [
|
||||
{
|
||||
"name": "Documentation",
|
||||
"key": "error",
|
||||
"icon": "life-preserver",
|
||||
"url": "https://zuramai.github.io/mazer/docs"
|
||||
},
|
||||
{
|
||||
"name": "Contribute",
|
||||
"key": "error",
|
||||
"url": "https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md",
|
||||
"icon": "puzzle"
|
||||
},
|
||||
{
|
||||
"name": "Donate",
|
||||
"key": "error",
|
||||
"url": "https://github.com/zuramai/mazer#donation",
|
||||
"icon": "cash"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -10,7 +10,7 @@ const Details = ({ patientID, setCurrentPage }) => {
|
||||
fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}`)
|
||||
.then(res => res.json())
|
||||
|
||||
.then(result => {setPaciente(result.data); console.log(result.data)})
|
||||
.then(result => {setPaciente(result.data)})
|
||||
.catch(err => console.error("Erro ao buscar paciente:", err));
|
||||
}, [patientID]);
|
||||
|
||||
@ -18,29 +18,16 @@ const Details = ({ patientID, setCurrentPage }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<div>
|
||||
<button className="btn btn-success me-2" onClick={() => setCurrentPage("table")}>
|
||||
<i className="bi bi-chevron-left"></i> Voltar
|
||||
</button>
|
||||
|
||||
<button className="btn btn-light" onClick={() => setCurrentPage("edit-page-paciente")}>
|
||||
<i className="bi bi-pencil-square"></i> Editar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
{/* ------------------ HEADER ------------------ */}
|
||||
<div className="card p-3">
|
||||
<div className="card p-3 shadow-sm">
|
||||
<h3 className="mb-3 text-center">MediConnect</h3>
|
||||
<hr />
|
||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||
|
||||
<div className="d-flex mb-3">
|
||||
<div className="avatar avatar-lg">
|
||||
<div className="avatar avatar-xl">
|
||||
<img src={avatarPlaceholder} alt="" />
|
||||
</div>
|
||||
<div className="media-body ms-3">
|
||||
<div className="media-body ms-3 font-extrabold">
|
||||
<span>{paciente.nome || "Nome Completo"}</span>
|
||||
<p>{paciente.cpf || "CPF"}</p>
|
||||
</div>
|
||||
@ -48,258 +35,238 @@ const Details = ({ patientID, setCurrentPage }) => {
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* ------------------ DADOS PESSOAIS ------------------ */}
|
||||
<div className="card p-3">
|
||||
<div className="card p-3 shadow-sm">
|
||||
<h5 className="mb-3">Dados Pessoais</h5>
|
||||
<hr />
|
||||
<div className="row">
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Nome:</label>
|
||||
<label className="font-extrabold">Nome:</label>
|
||||
<p>{paciente.nome || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Nome social:</label>
|
||||
<label className="font-extrabold">Nome social:</label>
|
||||
<p>{paciente.nome_social || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Data de nascimento:</label>
|
||||
<label className="font-extrabold">Data de nascimento:</label>
|
||||
<p>{paciente.data_nascimento || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Gênero:</label>
|
||||
<label className="font-extrabold">Gênero:</label>
|
||||
<p>{paciente.sexo || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Outro documento:</label>
|
||||
<p>{paciente.outros_documentos?.tipo || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Número do documento:</label>
|
||||
<p>{paciente.outros_documentos?.numero || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>CPF:</label>
|
||||
<label className="font-extrabold">CPF:</label>
|
||||
<p>{paciente.cpf || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Profissão:</label>
|
||||
<label className="font-extrabold">RG:</label>
|
||||
<p>{paciente.rg || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Outro documento:</label>
|
||||
<p>{paciente.outros_documentos?.tipo || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Número do documento:</label>
|
||||
<p>{paciente.outros_documentos?.numero || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Etnia:</label>
|
||||
<p>{paciente.etnia || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Raça:</label>
|
||||
<p>{paciente.raca || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Naturalidade:</label>
|
||||
<p>{paciente.etniaRaca || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Profissão:</label>
|
||||
<p>{paciente.profissao || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Nome da Mãe:</label>
|
||||
<label className="font-extrabold">Nome da Mãe:</label>
|
||||
<p>{paciente.nome_mae || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Profissão da mãe:</label>
|
||||
<label className="font-extrabold">Profissão da mãe:</label>
|
||||
<p>{paciente.profissao_mae || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Nome do Pai:</label>
|
||||
<label className="font-extrabold">Nome do Pai:</label>
|
||||
<p>{paciente.nome_pai || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Profissão do pai:</label>
|
||||
<label className="font-extrabold">Profissão do pai:</label>
|
||||
<p>{paciente.profissao_pai || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Nome do responsável:</label>
|
||||
<label className="font-extrabold">Nome do responsável:</label>
|
||||
<p>{paciente.nome_responsavel || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>CPF do responsável:</label>
|
||||
<label className="font-extrabold">CPF do responsável:</label>
|
||||
<p>{paciente.cpf_responsavel || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Nome do esposo(a):</label>
|
||||
<label className="font-extrabold">Estado civil:</label>
|
||||
<p>{paciente.estado_civil || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Nome do esposo(a):</label>
|
||||
<p>{paciente.nome_conjuge || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Identificador de outro sistema:</label>
|
||||
<p>{paciente.outroId || "-"}</p>
|
||||
<label className="font-extrabold">Identificador de outro sistema:</label>
|
||||
<p>{paciente.outro_id || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" type="checkbox" checked={paciente.rnConvenio} disabled/>
|
||||
<label className="font-extrabold">RN na Guia do convênio:</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Observações:</label>
|
||||
<p>{paciente.observacoes || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Anexos do Paciente:</label>
|
||||
<p>{ "-"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ------------------ INFORMAÇÕES MÉDICAS ------------------ */}
|
||||
<div className="card p-3 shadow-sm">
|
||||
<h5>Informações Médicas</h5>
|
||||
<hr />
|
||||
<div className="row">
|
||||
<div className="col-md-3 mb-3">
|
||||
<label className="font-extrabold">Tipo Sanguíneo:</label>
|
||||
<p>{paciente.tipoSanguineo || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-3 mb-3">
|
||||
<label className="font-extrabold">Peso (kg):</label>
|
||||
<p>{paciente.peso || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-3 mb-3">
|
||||
<label className="font-extrabold">Altura (m):</label>
|
||||
<p>{paciente.altura || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-3 mb-3">
|
||||
<label className="font-extrabold">IMC (kg/m²):</label>
|
||||
<p>{paciente.imc || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Alergias:</label>
|
||||
<p>{paciente.alergias || "-"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ------------------ INFORMAÇÕES DE CONVÊNIO ------------------ */}
|
||||
<div className="card p-3 shadow-sm">
|
||||
<h5>Informações de Convênio</h5>
|
||||
<hr />
|
||||
<div className="row">
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Convênio:</label>
|
||||
<p>{paciente.convenio || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Plano:</label>
|
||||
<p>{paciente.plano || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Nº de matrícula:</label>
|
||||
<p>{paciente.numeroMatricula || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-3 mb-3">
|
||||
<label className="font-extrabold">Validade da Carteira:</label>
|
||||
<p>{paciente.validadeCarteira || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-2 d-flex align-items-end mb-3">
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" type="checkbox" checked={paciente.validadeIndeterminada} disabled/>
|
||||
<label className="font-extrabold">Validade indeterminada:</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-2 d-flex align-items-end mb-3">
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" type="checkbox" checked={paciente.pacienteVip} disabled/>
|
||||
<label className="font-extrabold">Paciente VIP: </label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ------------------ ENDEREÇO ------------------ */}
|
||||
<div className="card p-3">
|
||||
<div className="card p-3 shadow-sm">
|
||||
<h5>Endereço</h5>
|
||||
<hr />
|
||||
<div className="row">
|
||||
<div className="col-md-4 mb-3">
|
||||
<label>CEP:</label>
|
||||
<label className="font-extrabold">CEP:</label>
|
||||
<p>{paciente.endereco?.cep || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-8 mb-3">
|
||||
<label>Rua:</label>
|
||||
<label className="font-extrabold">Rua:</label>
|
||||
<p>{paciente.endereco?.logradouro || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label>Bairro:</label>
|
||||
<label className="font-extrabold">Bairro:</label>
|
||||
<p>{paciente.endereco?.bairro || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label>Cidade:</label>
|
||||
<label className="font-extrabold">Cidade:</label>
|
||||
<p>{paciente.endereco?.cidade || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-2 mb-3">
|
||||
<label>Estado:</label>
|
||||
<label className="font-extrabold">Estado:</label>
|
||||
<p>{paciente.endereco?.estado || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label>Número:</label>
|
||||
<label className="font-extrabold">Número:</label>
|
||||
<p>{paciente.endereco?.numero || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-8 mb-3">
|
||||
<label>Complemento:</label>
|
||||
<label className="font-extrabold">Complemento:</label>
|
||||
<p>{paciente.endereco?.complemento || "-"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ------------------ CONTATO ------------------ */}
|
||||
<div className="card p-3">
|
||||
<div className="card p-3 shadow-sm">
|
||||
<h5>Contato</h5>
|
||||
<hr />
|
||||
<div className="row">
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Email:</label>
|
||||
<label className="font-extrabold">Email:</label>
|
||||
<p>{paciente.contato?.email || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Telefone:</label>
|
||||
<p>{paciente.contato?.telefone1 || "-"}</p>
|
||||
<label className="font-extrabold">Telefone:</label>
|
||||
<p>{paciente.contato?.celular || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Telefone 2:</label>
|
||||
<label className="font-extrabold">Telefone 2:</label>
|
||||
<p>{paciente.contato?.telefone2 || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Telefone 3:</label>
|
||||
<label className="font-extrabold">Telefone 3:</label>
|
||||
<p>{paciente.contato?.telefone3 || "-"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ------------------ INFORMAÇÕES ADICIONAIS ------------------ */}
|
||||
<div className="card p-3">
|
||||
<h5>Informações Adicionais</h5>
|
||||
<hr />
|
||||
<div className="mb-3">
|
||||
<label>Observações:</label>
|
||||
<p>{paciente.observacoes || "-"}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dados pessoais
|
||||
<div className="" style={styles.section}>
|
||||
<h3 style={styles.sectionTitle}>Dados Pessoais</h3>
|
||||
<div style={styles.grid}>
|
||||
<div style={styles.item}><strong>Nome Completo:</strong> {paciente.nomeCompleto}</div>
|
||||
<div style={styles.item}><strong>CPF:</strong> {paciente.cpf}</div>
|
||||
<div style={styles.item}><strong>Idade:</strong> {paciente.idade}</div>
|
||||
<div style={styles.item}><strong>Data de Nascimento:</strong> {paciente.dataNascimento}</div>
|
||||
<div style={styles.item}><strong>Sexo:</strong> {paciente.sexo}</div>
|
||||
<div style={styles.item}><strong>Estado Civil:</strong> {paciente.estadoCivil}</div>
|
||||
<div style={styles.item}><strong>Profissão:</strong> {paciente.profissao}</div>
|
||||
<div style={styles.item}><strong>Nacionalidade:</strong> {paciente.nacionalidade}</div>
|
||||
<div style={styles.item}><strong>Naturalidade:</strong> {paciente.naturalidade}</div>
|
||||
<div style={styles.item}><strong>Etnia:</strong> {paciente.etnia}</div>
|
||||
</div>
|
||||
</div>
|
||||
*/}
|
||||
{/* Contato */}
|
||||
{/* <div style={styles.section}>
|
||||
<h3 style={styles.sectionTitle}>Informações de Contato</h3>
|
||||
<div style={styles.grid}>
|
||||
<div style={styles.item}><strong>E-mail:</strong> {paciente.email}</div>
|
||||
<div style={styles.item}><strong>Celular:</strong> {paciente.celular}</div>
|
||||
<div style={styles.item}><strong>Telefone 1:</strong> {paciente.telefone1 || "-"}</div>
|
||||
<div style={styles.item}><strong>Telefone 2:</strong> {paciente.telefone2 || "-"}</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
// const styles = {
|
||||
// container: {
|
||||
// width: "80%",
|
||||
// maxWidth: "800px",
|
||||
// margin: "30px auto",
|
||||
// background: "#fff",
|
||||
// borderRadius: "10px",
|
||||
// padding: "20px",
|
||||
// boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
|
||||
// fontFamily: "Arial, sans-serif",
|
||||
// position: "relative"
|
||||
// },
|
||||
// backBtn: {
|
||||
// background: "#ddd",
|
||||
// border: "none",
|
||||
// borderRadius: "6px",
|
||||
// padding: "8px 14px",
|
||||
// cursor: "pointer",
|
||||
// marginBottom: "15px"
|
||||
// },
|
||||
// header: {
|
||||
// textAlign: "center",
|
||||
// marginBottom: "20px",
|
||||
// position: "relative"
|
||||
// },
|
||||
// avatar: {
|
||||
// width: "80px",
|
||||
// height: "80px",
|
||||
// borderRadius: "50%",
|
||||
// background: "#ddd",
|
||||
// display: "block",
|
||||
// margin: "0 auto"
|
||||
// },
|
||||
// nome: {
|
||||
// margin: "10px 0 5px"
|
||||
// },
|
||||
// vip: {
|
||||
// color: "#f7b500",
|
||||
// fontWeight: "bold",
|
||||
// marginLeft: "5px"
|
||||
// },
|
||||
// cpf: {
|
||||
// margin: "5px 0",
|
||||
// color: "#555"
|
||||
// },
|
||||
// editBtn: {
|
||||
// background: "#0d6efd",
|
||||
// color: "white",
|
||||
// padding: "8px 14px",
|
||||
// border: "none",
|
||||
// borderRadius: "6px",
|
||||
// cursor: "pointer",
|
||||
// position: "absolute",
|
||||
// right: "20px",
|
||||
// top: "20px"
|
||||
// },
|
||||
// section: {
|
||||
// marginBottom: "20px",
|
||||
// border: "1px solid #e0e0e0",
|
||||
// borderRadius: "8px",
|
||||
// padding: "15px"
|
||||
// },
|
||||
// sectionTitle: {
|
||||
// marginTop: 0,
|
||||
// borderBottom: "1px solid #ddd",
|
||||
// paddingBottom: "8px",
|
||||
// fontSize: "18px"
|
||||
// },
|
||||
// grid: {
|
||||
// display: "grid",
|
||||
// gridTemplateColumns: "1fr 1fr",
|
||||
// gap: "10px 20px",
|
||||
// marginTop: "10px"
|
||||
// },
|
||||
// item: {
|
||||
// fontSize: "14px"
|
||||
// }
|
||||
// };
|
||||
|
||||
export default Details;
|
||||
182
src/pages/DoctorDetails.jsx
Normal file
182
src/pages/DoctorDetails.jsx
Normal file
@ -0,0 +1,182 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import avatarPlaceholder from '../assets/images/avatar_placeholder.png';
|
||||
|
||||
const Details = ({ patientID, setCurrentPage }) => {
|
||||
const [paciente, setPaciente] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
if (!patientID) return;
|
||||
|
||||
fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}`)
|
||||
.then(res => res.json())
|
||||
.then(data => setPaciente(data))
|
||||
.catch(err => console.error("Erro ao buscar médico:", err));
|
||||
}, [patientID]);
|
||||
|
||||
//if (!paciente) return <p style={{ textAlign: "center" }}>Carregando...</p>;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="card p-3 shadow-sm">
|
||||
<h3 className="mb-3 text-center">MediConnect</h3>
|
||||
<hr />
|
||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||
<button className="btn btn-success me-2" onClick={() => setCurrentPage("table")}>
|
||||
<i className="bi bi-chevron-left"></i> Voltar
|
||||
</button>
|
||||
<div className="d-flex mb-3">
|
||||
<div className="avatar avatar-xl">
|
||||
<img src={avatarPlaceholder} alt="" />
|
||||
</div>
|
||||
<div className="media-body ms-3 font-extrabold">
|
||||
<span>{paciente.nome || "Nome Completo"}</span>
|
||||
<p>{paciente.cpf || "CPF"}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button className="btn btn-light" onClick={() => setCurrentPage("edit-page-doctor")}>
|
||||
<i className="bi bi-pencil-square"></i> Editar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ------------------ DADOS PESSOAIS ------------------ */}
|
||||
<div className="card p-3 shadow-sm">
|
||||
<h5 className="mb-3">Dados Pessoais</h5>
|
||||
<hr />
|
||||
<div className="row">
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Nome:</label>
|
||||
<p>{paciente.nome || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Nome social:</label>
|
||||
<p>{paciente.nomeSocial || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Data de nascimento:</label>
|
||||
<p>{paciente.dataNascimento || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Gênero:</label>
|
||||
<p>{paciente.sexo || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">CPF:</label>
|
||||
<p>{paciente.cpf || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">CRM:</label>
|
||||
<p>{paciente.rg || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Outro documento:</label>
|
||||
<p>{paciente.documento || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Número do documento:</label>
|
||||
<p>{paciente.numeroDocumento || "-"}</p>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Etnia e Raça:</label>
|
||||
<p>{paciente.etniaRaca || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Nacionalidade:</label>
|
||||
<p>{paciente.etniaRaca || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Naturalidade:</label>
|
||||
<p>{paciente.etniaRaca || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Especialização:</label>
|
||||
<p>{paciente.profissao || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Estado civil:</label>
|
||||
<p>{paciente.estadoCivil || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Nome do esposo(a):</label>
|
||||
<p>{paciente.nomeConjuge || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Identificador de outro sistema:</label>
|
||||
<p>{paciente.outroId || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Observações:</label>
|
||||
<p>{paciente.observacoes || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Anexos do Médico:</label>
|
||||
<p>{paciente.anexos || "-"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ------------------ ENDEREÇO ------------------ */}
|
||||
<div className="card p-3 shadow-sm">
|
||||
<h5>Endereço</h5>
|
||||
<hr />
|
||||
<div className="row">
|
||||
<div className="col-md-4 mb-3">
|
||||
<label className="font-extrabold">CEP:</label>
|
||||
<p>{paciente.cep || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-8 mb-3">
|
||||
<label className="font-extrabold">Rua:</label>
|
||||
<p>{paciente.rua || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label className="font-extrabold">Bairro:</label>
|
||||
<p>{paciente.bairro || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label className="font-extrabold">Cidade:</label>
|
||||
<p>{paciente.cidade || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-2 mb-3">
|
||||
<label className="font-extrabold">Estado:</label>
|
||||
<p>{paciente.estado || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label className="font-extrabold">Número:</label>
|
||||
<p>{paciente.numero || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-8 mb-3">
|
||||
<label className="font-extrabold">Complemento:</label>
|
||||
<p>{paciente.complemento || "-"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ------------------ CONTATO ------------------ */}
|
||||
<div className="card p-3 shadow-sm">
|
||||
<h5>Contato</h5>
|
||||
<hr />
|
||||
<div className="row">
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Email:</label>
|
||||
<p>{paciente.email || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Telefone:</label>
|
||||
<p>{paciente.telefone1 || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Telefone 2:</label>
|
||||
<p>{paciente.telefone2 || "-"}</p>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label className="font-extrabold">Celular:</label>
|
||||
<p>{paciente.telefone3 || "-"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
@ -1,52 +1,51 @@
|
||||
// import React from 'react'
|
||||
import React from 'react'
|
||||
|
||||
// import DoctorForm from '../components/doctors/DoctorForm'
|
||||
import DoctorForm from '../components/doctors/DoctorForm'
|
||||
|
||||
// import {useEffect, useState} from 'react'
|
||||
import {useEffect, useState} from 'react'
|
||||
|
||||
// const EditPage = ( {id}) => {
|
||||
const DoctorEditPage = ( {id}) => {
|
||||
|
||||
// const [PatientToPUT, setPatientPUT] = useState({})
|
||||
const [PatientToPUT, setPatientPUT] = useState({})
|
||||
|
||||
// var requestOptions = {
|
||||
// method: 'GET',
|
||||
// redirect: 'follow'
|
||||
// };
|
||||
var requestOptions = {
|
||||
method: 'GET',
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
// useEffect(() => {
|
||||
useEffect(() => {
|
||||
|
||||
|
||||
// fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, requestOptions)
|
||||
// .then(response => response.json())
|
||||
// .then(result => result.data)
|
||||
// .then(data => console.log(data))
|
||||
// .catch(error => console.log('error', error));
|
||||
fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, requestOptions)
|
||||
.then(response => response.json())
|
||||
.then(result => result.data)
|
||||
.then(data => console.log(data))
|
||||
.catch(error => console.log('error', error));
|
||||
|
||||
// }, [])
|
||||
// const HandlePutPatient = () => {
|
||||
}, [])
|
||||
const HandlePutPatient = () => {
|
||||
|
||||
// console.log('médico atualizado')
|
||||
console.log('médico atualizado')
|
||||
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
// return (
|
||||
return (
|
||||
|
||||
// <div>
|
||||
<div>
|
||||
|
||||
// <button>Voltar para lista sem salvar</button>
|
||||
|
||||
|
||||
|
||||
// <PatientForm
|
||||
// onSave={HandlePutPatient}
|
||||
// onCancel={console.log('Não atualizar')}
|
||||
// PatientDict={PatientToPUT}
|
||||
<DoctorForm
|
||||
onSave={HandlePutPatient}
|
||||
onCancel={console.log('Não atualizar')}
|
||||
PatientDict={PatientToPUT}
|
||||
|
||||
// />
|
||||
/>
|
||||
|
||||
// </div>
|
||||
// )
|
||||
// }
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// export default EditPage
|
||||
export default DoctorEditPage
|
||||
@ -25,11 +25,11 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
|
||||
let value = e.target.value;
|
||||
|
||||
if (value === "verdetalhes") {
|
||||
setCurrentPage("details-page-paciente");
|
||||
setCurrentPage("details-page-doctor");
|
||||
}
|
||||
|
||||
if (value === "editar") {
|
||||
setCurrentPage("edit-page-paciente");
|
||||
setCurrentPage("edit-page-doctor");
|
||||
setPatientID(id);
|
||||
}
|
||||
|
||||
|
||||
@ -52,8 +52,6 @@ fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/", requestOptions)
|
||||
return (
|
||||
|
||||
<div>
|
||||
|
||||
<button>Voltar para lista sem salvar</button>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -23,7 +23,6 @@ function FormLayout( ) {
|
||||
header: myHeaders,
|
||||
body:raw,
|
||||
redirect:'follow'
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user