GilenoNeto901/riseup-squad23
1
0
Fork 0
forked from RiseUP/riseup-squad23
Code Pull Requests Activity

Merge branch 'feature/novo-cadastro-paciente'

Browse Source
This commit is contained in:
jp-lima 2025-09-12 19:19:28 -03:00
commit 8e1fcd9609
1 changed files with 482 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

715
src/components/patients/PatientForm.jsx
View File

@ -1,49 +1,36 @@
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
import InputMask from "react-input-mask"; import InputMask from "react-input-mask";
function PatientForm({ onSave, onCancel, PatientDict }) { function PatientForm({ onSave, onCancel, PatientDict }) {
const FormatTelefones = (valor) => { const FormatTelefones = (valor) => {
const digits = String(valor).replace(/\D/g, '').slice(0, 11);
const digits = String(valor).replace(/\D/g, '').slice(0, 11); return digits
.replace(/(\d)/, '($1')
.replace(/(\d{2})(\d)/, '$1) $2' )
return digits .replace(/(\d)(\d{4})/, '$1 $2')
.replace(/(\d)/, '($1') // 123 -> 123. .replace(/(\d{4})(\d{4})/, '$1-$2')
.replace(/(\d{2})(\d)/, '$1) $2' )
.replace(/(\d)(\d{4})/, '$1 $2')
.replace(/(\d{4})(\d{4})/, '$1-$2')
} }
const FormatCPF = (valor) => { const FormatCPF = (valor) => {
const digits = String(valor).replace(/\D/g, '').slice(0, 11);
const digits = String(valor).replace(/\D/g, '').slice(0, 11); return digits
.replace(/(\d{3})(\d)/, '$1.$2')
.replace(/(\d{3})(\d)/, '$1.$2')
.replace(/(\d{3})(\d{1,2})$/, '$1-$2');
return digits
.replace(/(\d{3})(\d)/, '$1.$2') // 123 -> 123.
.replace(/(\d{3})(\d)/, '$1.$2') // 123.456 -> 123.456.
.replace(/(\d{3})(\d{1,2})$/, '$1-$2'); // 123.456.789 -> 123.456.789-01
} }
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
foto: null,
nome: PatientDict.nome, nome: PatientDict.nome,
nomeSocial: PatientDict.nome_social, nomeSocial: PatientDict.nome_social,
dataNascimento: PatientDict.data_nascimento, dataNascimento: PatientDict.data_nascimento,
genero: PatientDict.sexo, genero: PatientDict.sexo,
documento: '',
numeroDocumento: '',
cpf: PatientDict.cpf, cpf: PatientDict.cpf,
profissao: PatientDict.profissao , profissao: PatientDict.profissao ,
nomeMae: PatientDict.nome_mae, nomeMae: PatientDict.nome_mae,
profissaoMae: PatientDict.profissao_mae, profissaoMae: PatientDict.profissao_mae,
nomePai: PatientDict.nome_pai, nomePai: PatientDict.nome_pai,
profissaoPai: PatientDict.profissao_pai,
nomeResponsavel: '', nomeResponsavel: '',
cpfResponsavel: '', cpfResponsavel: '',
nomeConjuge: '', nomeConjuge: '',
@ -59,50 +46,100 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
telefone1: PatientDict.celular, telefone1: PatientDict.celular,
telefone2: '', telefone2: '',
telefone3: '', telefone3: '',
observacoes: '' observacoes: '',
rg: '',
documentoTipo: '',
numeroDocumento: '',
etniaRaca: '',
naturalidade: '',
nacionalidade: '',
estadoCivil: '',
rnConvenio: false,
// INFORMAÇÕES MÉDICAS
tipoSanguineo: '',
peso: '',
altura: '',
imc: '',
alergias: '',
// INFORMAÇÕES DE CONVÊNIO
convenio: '',
plano: '',
numeroMatricula: '',
validadeCarteira: '',
validadeIndeterminada: false,
pacienteVip: false,
// ANEXO
anexos: null,
}); });
// Estado para armazenar a URL da foto do avatar
const [avatarUrl, setAvatarUrl] = useState(null);
// 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,
});
// Função para alternar o estado de colapso de uma seção
const handleToggleCollapse = (section) => {
setCollapsedSections(prevState => ({
...prevState,
[section]: !prevState[section]
}));
};
// Lógica para calcular o IMC
useEffect(() => {
const peso = parseFloat(formData.peso);
const altura = parseFloat(formData.altura);
if (peso > 0 && altura > 0) {
const imcCalculado = peso / (altura * altura);
setFormData(prev => ({ ...prev, imc: imcCalculado.toFixed(2) }));
} else {
setFormData(prev => ({ ...prev, imc: '' }));
}
}, [formData.peso, formData.altura]);
const handleChange = (e) => { const handleChange = (e) => {
const { name, value } = e.target; const { name, value, type, checked, files } = e.target;
setFormData({
...formData, if (type === 'checkbox') {
[name]: value setFormData({ ...formData, [name]: checked });
}); } else if (type === 'file') {
setFormData({ ...formData, [name]: files[0] });
// 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
}
if(name.includes('cpf')){ } else {
setFormData({ ...formData, [name]: value });
let cpfFormatado = FormatCPF(e.target.value)
setFormData({...formData,
[name]: cpfFormatado,}
)}
else if(name.includes('telefone')){
let telefoneFormatado = FormatTelefones(value)
console.log(telefoneFormatado)
setFormData({...formData,
[name]: telefoneFormatado
})
} }
else if(name.includes('cep')){ if (name.includes('cpf')) {
const digitsCep = String(value).replace(/\D/g, '').slice(0, 8); let cpfFormatado = FormatCPF(value);
setFormData({...formData, setFormData(prev => ({ ...prev, [name]: cpfFormatado }));
[name]: digitsCep } 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 handleCepBlur = async () => {
const cep = formData.cep.replace(/\D/g, ''); const cep = formData.cep.replace(/\D/g, '');
if (cep.length === 8) { if (cep.length === 8) {
@ -127,197 +164,409 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
}; };
const handleSubmit = () => { const handleSubmit = () => {
if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento || !formData.email||!formData.telefone1){ if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento){
alert('Por favor, preencha: Nome ,CPF, Gênero, Data de nascimento, telefone e Email.'); alert('Por favor, preencha Nome ,CPF, Gênero e data de nascimento.');
return; return;
} }
onSave( onSave({
{nome: formData.nome, ...formData,
nomeSocial: formData.nomeSocial, endereco: {
dataNascimento: formData.dataNascimento, cep: formData.cep,
genero: formData.genero, cidade: formData.cidade,
documento: formData.documento, estado: formData.estado,
numeroDocumento: formData.numeroDocumento, bairro: formData.bairro,
cpf: formData.cpf, logradouro: formData.rua,
profissao: formData.profissao, numero: formData.numero,
nomeMae: formData.nomeMae, complemento: formData.complemento,
profissaoMae: formData.profissaoMae, },
nomePai: formData.nomePai, contato: {
profissaoPai: formData.profissaoPai, email: formData.email,
nomeResponsavel: formData.nomeResponsavel, telefone1: formData.telefone1,
cpfResponsavel: formData.cpfResponsavel, telefone2: formData.telefone2,
nomeConjuge: formData.nomeConjuge, telefone3: formData.telefone3,
outroId: formData.outroId, },
endereco: { infoMedicas: {
cep: formData.cep, tipoSanguineo: formData.tipoSanguineo,
cidade: formData.cidade, peso: formData.peso,
estado: formData.estado, altura: formData.altura,
bairro: formData.bairro, imc: formData.imc,
logradouro: formData.rua, alergias: formData.alergias,
numero: formData.numero, },
complemento: formData.complemento, infoConvenio: {
}, convenio: formData.convenio,
plano: formData.plano,
contato: { numeroMatricula: formData.numeroMatricula,
email: formData.email, validadeCarteira: formData.validadeCarteira,
telefone1: formData.telefone1, validadeIndeterminada: formData.validadeIndeterminada,
telefone2: formData.telefone2, pacienteVip: formData.pacienteVip,
telefone3: formData.telefone3, },
}, });
observacoes: formData.observacoes,
}
);
}; };
return ( return (
<div className="card p-3"> <div className="card p-3">
<h3 className="mb-3 text-center">MediConnect</h3> <h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
{/* ------------------ DADOS PESSOAIS ------------------ */} {/* DADOS PESSOAIS */}
<h5 className="mb-3">Dados Pessoais</h5> <div className="mb-5 p-4 border rounded shadow-sm">
<div className="row"> <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('dadosPessoais')} style={{ fontSize: '1.8rem' }}>
<div className="col-md-6 mb-3"> Dados Pessoais
<label>Nome: *</label> <span className="fs-5">
<input type="text" className="form-control" name="nome" value={formData.nome} onChange={handleChange} /> {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 Paciente"
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'
}}
>
&#x2624;
</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' }}>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' }}>Profissão:</label>
<input type="text" className="form-control" name="profissao" value={formData.profissao} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</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 da Mãe:</label>
<input type="text" className="form-control" name="nomeMae" value={formData.nomeMae} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</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="profissaoMae" value={formData.profissaoMae} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div>
<div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>Nome do Pai:</label>
<input type="text" className="form-control" name="nomePai" value={formData.nomePai} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</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="profissaoPai" value={formData.profissaoPai} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</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="nomeResponsavel" value={formData.nomeResponsavel} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</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="cpfResponsavel" value={formData.cpfResponsavel} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</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>
<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-12 mb-3">
<div className="form-check">
<input className="form-check-input" type="checkbox" name="rnConvenio" checked={formData.rnConvenio} onChange={handleChange} id="rnConvenio" style={{ transform: 'scale(1.2)' }} />
<label className="form-check-label ms-2" htmlFor="rnConvenio" style={{ fontSize: '1.1rem' }}>
RN na Guia do convênio
</label>
</div>
</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 Paciente:</label>
<div>
<label htmlFor="anexos-input" className="btn btn-secondary" style={{ fontSize: '1.1rem' }}>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>
<div className="col-md-6 mb-3"> </div>
<label>Nome social:</label>
<input type="text" className="form-control" name="nomeSocial" value={formData.nomeSocial} onChange={handleChange} /> {/* INFORMAÇÕES MÉDICAS */}
</div> <div className="mb-5 p-4 border rounded shadow-sm">
<div className="col-md-6 mb-3"> <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('infoMedicas')} style={{ fontSize: '1.8rem' }}>
<label>Data de nascimento: *</label> Informações Médicas
<input type="date" className="form-control" name="dataNascimento" value={formData.dataNascimento} onChange={handleChange} /> <span className="fs-5">
</div> {collapsedSections.infoMedicas ? '▲' : '▼'}
<div className="col-md-6 mb-3"> </span>
<label>Gênero: *</label> </h4>
<select className="form-control" name="genero" value={formData.genero} onChange={handleChange}> <div className={`collapse${collapsedSections.infoMedicas ? ' show' : ''}`}>
<option value="">Selecione</option> <div className="row mt-3">
<option value="Masculino">Masculino</option> <div className="col-md-6 mb-3">
<option value="Feminino">Feminino</option> <label style={{ fontSize: '1.1rem' }}>Tipo Sanguíneo:</label>
<option value="Outro">Outro</option> <select className="form-control" name="tipoSanguineo" value={formData.tipoSanguineo} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
</select> <option value="">Selecione</option>
</div> <option value="A+">A+</option>
<div className="col-md-6 mb-3"> <option value="A-">A-</option>
<label>Outro documento:</label> <option value="B+">B+</option>
<input type="text" className="form-control" name="documento" value={formData.documento} onChange={handleChange} /> <option value="B-">B-</option>
</div> <option value="AB+">AB+</option>
<div className="col-md-6 mb-3"> <option value="AB-">AB-</option>
<label>Número do documento:</label> <option value="O+">O+</option>
<input type="text" className="form-control" name="numeroDocumento" value={formData.numeroDocumento} onChange={handleChange} /> <option value="O-">O-</option>
</div> </select>
<div className="col-md-6 mb-3"> </div>
<label>CPF: *</label> <div className="col-md-2 mb-3">
<input type="text" className="form-control" name="cpf" value={formData.cpf} onChange={ handleChange} /> <label style={{ fontSize: '1.1rem' }}>Peso (kg):</label>
</div> <input type="number" step="0.1" className="form-control" name="peso" value={formData.peso} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
<div className="col-md-6 mb-3"> </div>
<label>Profissão:</label> <div className="col-md-2 mb-3">
<input type="text" className="form-control" name="profissao" value={formData.profissao} onChange={handleChange} /> <label style={{ fontSize: '1.1rem' }}>Altura (m):</label>
</div> <input type="number" step="0.01" className="form-control" name="altura" value={formData.altura} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
<div className="col-md-6 mb-3"> </div>
<label>Nome da Mãe:</label> <div className="col-md-2 mb-3">
<input type="text" className="form-control" name="nomeMae" value={formData.nomeMae} onChange={handleChange} /> <label style={{ fontSize: '1.1rem' }}>IMC (kg/m²):</label>
</div> <input type="text" className="form-control" name="imc" value={formData.imc} readOnly disabled style={{ fontSize: '1.1rem' }} />
<div className="col-md-6 mb-3"> </div>
<label>Profissão da mãe:</label> <div className="col-md-12 mb-3">
<input type="text" className="form-control" name="profissaoMae" value={formData.profissaoMae} onChange={handleChange} /> <label style={{ fontSize: '1.1rem' }}>Alergias:</label>
</div> <textarea className="form-control" name="alergias" value={formData.alergias} onChange={handleChange} placeholder="Ex: AAS, Dipirona, etc" style={{ fontSize: '1.1rem' }}></textarea>
<div className="col-md-6 mb-3"> </div>
<label>Nome do Pai:</label> </div>
<input type="text" className="form-control" name="nomePai" value={formData.nomePai} onChange={handleChange} />
</div>
<div className="col-md-6 mb-3">
<label>Profissão do pai:</label>
<input type="text" className="form-control" name="profissaoPai" value={formData.profissaoPai} onChange={handleChange} />
</div>
<div className="col-md-6 mb-3">
<label>Nome do responsável:</label>
<input type="text" className="form-control" name="nomeResponsavel" value={formData.nomeResponsavel} onChange={handleChange} />
</div>
<div className="col-md-6 mb-3">
<label>CPF do responsável:</label>
<input type="text" className="form-control" name="cpfResponsavel" value={formData.cpfResponsavel} onChange={handleChange} />
</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>
</div> </div>
{/* ------------------ ENDEREÇO ------------------ */} {/* INFORMAÇÕES DE CONVÊNIO */}
<h5>Endereço</h5> <div className="mb-5 p-4 border rounded shadow-sm">
<div className="row"> <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('infoConvenio')} style={{ fontSize: '1.8rem' }}>
<div className="col-md-4 mb-3"> Informações de convênio
<label>CEP:</label> <span className="fs-5">
<input type="text" className="form-control" name="cep" value={formData.cep} onChange={handleChange} onBlur={handleCepBlur} /> {collapsedSections.infoConvenio ? '▲' : '▼'}
</div> </span>
<div className="col-md-8 mb-3"> </h4>
<label>Rua:</label> <div className={`collapse${collapsedSections.infoConvenio ? ' show' : ''}`}>
<input type="text" className="form-control" name="rua" value={formData.rua} onChange={handleChange} /> <div className="row mt-3">
</div> <div className="col-md-6 mb-3">
<div className="col-md-6 mb-3"> <label style={{ fontSize: '1.1rem' }}>Convênio:</label>
<label>Bairro:</label> <select className="form-control" name="convenio" value={formData.convenio} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
<input type="text" className="form-control" name="bairro" value={formData.bairro} onChange={handleChange} /> <option value="">Selecione</option>
</div> <option value="Amil">Amil</option>
<div className="col-md-4 mb-3"> <option value="Bradesco Saúde">Bradesco Saúde</option>
<label>Cidade:</label> <option value="SulAmérica">SulAmérica</option>
<input type="text" className="form-control" name="cidade" value={formData.cidade} onChange={handleChange} /> <option value="Unimed">Unimed</option>
</div> </select>
<div className="col-md-2 mb-3"> </div>
<label>Estado:</label> <div className="col-md-6 mb-3">
<input type="text" className="form-control" name="estado" value={formData.estado} onChange={handleChange} /> <label style={{ fontSize: '1.1rem' }}>Plano:</label>
</div> <input type="text" className="form-control" name="plano" value={formData.plano} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
<div className="col-md-4 mb-3"> </div>
<label>Número:</label> <div className="col-md-6 mb-3">
<input type="text" className="form-control" name="numero" value={formData.numero} onChange={handleChange} /> <label style={{ fontSize: '1.1rem' }}>Nº de matrícula:</label>
</div> <input type="text" className="form-control" name="numeroMatricula" value={formData.numeroMatricula} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
<div className="col-md-8 mb-3"> </div>
<label>Complemento:</label> <div className="col-md-4 mb-3">
<input type="text" className="form-control" name="complemento" value={formData.complemento} onChange={handleChange} /> <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' }} />
</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} onChange={handleChange} id="validadeIndeterminada" style={{ transform: 'scale(1.2)' }} />
<label className="form-check-label ms-2" htmlFor="validadeIndeterminada" style={{ fontSize: '1.1rem' }}>
Validade indeterminada
</label>
</div>
</div>
{/* PACIENTE VIP */}
<div className="col-md-12 mb-3 mt-3">
<div className="form-check">
<input className="form-check-input" type="checkbox" name="pacienteVip" checked={formData.pacienteVip} onChange={handleChange} id="pacienteVip" style={{ transform: 'scale(1.2)' }} />
<label className="form-check-label ms-2" htmlFor="pacienteVip" style={{ fontSize: '1.1rem' }}>
Paciente VIP
</label>
</div>
</div>
</div>
</div> </div>
</div> </div>
{/* ------------------ CONTATO ------------------ */} {/* ENDEREÇO */}
<h5>Contato</h5> <div className="mb-5 p-4 border rounded shadow-sm">
<div className="row"> <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('endereco')} style={{ fontSize: '1.8rem' }}>
<div className="col-md-6 mb-3"> Endereço
<label>Email: *</label> <span className="fs-5">
<input type="email" className="form-control" name="email" value={formData.email} onChange={handleChange} /> {collapsedSections.endereco ? '▲' : '▼'}
</div> </span>
<div className="col-md-6 mb-3"> </h4>
<label>Telefone: *</label> <div className={`collapse${collapsedSections.endereco ? ' show' : ''}`}>
<input type="text" className="form-control" name="telefone1" value={formData.telefone1} onChange={handleChange} /> <div className="row mt-3">
</div> <div className="col-md-4 mb-3">
<div className="col-md-6 mb-3"> <label style={{ fontSize: '1.1rem' }}>CEP:</label>
<label>Telefone 2:</label> <input type="text" className="form-control" name="cep" value={formData.cep} onChange={handleChange} onBlur={handleCepBlur} style={{ fontSize: '1.1rem' }} />
<input type="text" className="form-control" name="telefone2" value={formData.telefone2} onChange={handleChange} /> </div>
</div> <div className="col-md-8 mb-3">
<div className="col-md-6 mb-3"> <label style={{ fontSize: '1.1rem' }}>Rua:</label>
<label>Telefone 3:</label> <input type="text" className="form-control" name="rua" value={formData.rua} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
<input type="text" className="form-control" name="telefone3" value={formData.telefone3} onChange={handleChange} /> </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>
</div> </div>
{/* ------------------ INFORMAÇÕES ADICIONAIS ------------------ */} {/* CONTATO */}
<h5>Informações Adicionais</h5> <div className="mb-5 p-4 border rounded shadow-sm">
<div className="mb-3"> <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('contato')} style={{ fontSize: '1.8rem' }}>
<label>Observações:</label> Contato
<textarea className="form-control" name="observacoes" value={formData.observacoes} onChange={handleChange}></textarea> <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' }}>Telefone 3:</label>
<input type="text" className="form-control" name="telefone3" value={formData.telefone3} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div>
</div>
</div>
</div> </div>
{/* Botões */} {/* Botões */}
<div className="mt-3"> <div className="mt-3 text-center">
<button className="btn btn-success me-2" onClick={handleSubmit}> <button className="btn btn-success me-3" onClick={handleSubmit} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
Salvar Paciente Salvar Paciente
</button> </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 Cancelar
</button> </button>
</div> </div>
@ -325,4 +574,4 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
); );
} }
export default PatientForm; export default PatientForm;