RiseUP/riseup-squad23
4
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Nova alteração no formulario do paciente

Browse Source
This commit is contained in:
GilenoNeto901 2025-09-10 14:50:20 -03:00
parent 34826df314
commit 954a97acb8
3 changed files with 422 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
package-lock.json generated
View File

@ -25,6 +25,7 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-apexcharts": "^1.7.0", "react-apexcharts": "^1.7.0",
"react-bootstrap": "^2.10.10", "react-bootstrap": "^2.10.10",
"react-bootstrap-icons": "^1.11.6",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-flatpickr": "^4.0.11", "react-flatpickr": "^4.0.11",
"react-input-mask": "^2.0.4", "react-input-mask": "^2.0.4",
@ -30401,6 +30402,18 @@
} }
} }
}, },
"node_modules/react-bootstrap-icons": {
"version": "1.11.6",
"resolved": "https://registry.npmjs.org/react-bootstrap-icons/-/react-bootstrap-icons-1.11.6.tgz",
"integrity": "sha512-ycXiyeSyzbS1C4+MlPTYe0riB+UlZ7LV7YZQYqlERV2cxDiKtntI0huHmP/3VVvzPt4tGxqK0K+Y6g7We3U6tQ==",
"license": "MIT",
"dependencies": {
"prop-types": "^15.7.2"
},
"peerDependencies": {
"react": ">=16.8.6"
}
},
"node_modules/react-dev-utils": { "node_modules/react-dev-utils": {
"version": "12.0.1", "version": "12.0.1",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",

1
package.json
View File

@ -20,6 +20,7 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-apexcharts": "^1.7.0", "react-apexcharts": "^1.7.0",
"react-bootstrap": "^2.10.10", "react-bootstrap": "^2.10.10",
"react-bootstrap-icons": "^1.11.6",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-flatpickr": "^4.0.11", "react-flatpickr": "^4.0.11",
"react-input-mask": "^2.0.4", "react-input-mask": "^2.0.4",

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

@ -57,24 +57,47 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
estadoCivil: '', estadoCivil: '',
rnConvenio: false, rnConvenio: false,
//CAMPOS: INFORMAÇÕES MÉDICAS // INFORMAÇÕES MÉDICAS
tipoSanguineo: '', tipoSanguineo: '',
peso: '', peso: '',
altura: '', altura: '',
imc: '', imc: '',
alergias: '', alergias: '',
// CAMPOS: INFORMAÇÕES DE CONVÊNIO // INFORMAÇÕES DE CONVÊNIO
convenio: '', convenio: '',
plano: '', plano: '',
numeroMatricula: '', numeroMatricula: '',
validadeCarteira: '', validadeCarteira: '',
validadeIndeterminada: false, validadeIndeterminada: false,
pacienteVip: false, // NOVO CAMPO ADICIONADO
// CAMPO: ANEXOS // ANEXO
anexos: null, 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,
infoAdicionais: false,
anexos: 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 // Lógica para calcular o IMC
useEffect(() => { useEffect(() => {
const peso = parseFloat(formData.peso); const peso = parseFloat(formData.peso);
@ -95,6 +118,18 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
setFormData({ ...formData, [name]: checked }); setFormData({ ...formData, [name]: checked });
} else if (type === 'file') { } else if (type === 'file') {
setFormData({ ...formData, [name]: files[0] }); 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
}
} else { } else {
setFormData({ ...formData, [name]: value }); setFormData({ ...formData, [name]: value });
} }
@ -167,6 +202,7 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
numeroMatricula: formData.numeroMatricula, numeroMatricula: formData.numeroMatricula,
validadeCarteira: formData.validadeCarteira, validadeCarteira: formData.validadeCarteira,
validadeIndeterminada: formData.validadeIndeterminada, validadeIndeterminada: formData.validadeIndeterminada,
pacienteVip: formData.pacienteVip, // Adicionando o novo campo
}, },
}); });
}; };
@ -175,266 +211,379 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
<div className="card p-3"> <div className="card p-3">
<h3 className="mb-3 text-center">MedicoConnect</h3> <h3 className="mb-3 text-center">MedicoConnect</h3>
{/* ------------------ DADOS PESSOAIS ------------------ */} {/* DADOS PESSOAIS */}
<h5 className="mb-3">Dados Pessoais</h5>
<div className="row">
<div className="col-md-6 mb-3">
<label>Foto:</label>
<input type="file" className="form-control" name="foto" onChange={handleChange} />
</div>
<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>RG:</label>
<input type="text" className="form-control" name="rg" value={formData.rg} onChange={handleChange} />
</div>
<div className="col-md-6 mb-3">
<label>Outros documentos:</label>
<select className="form-control" name="documentoTipo" value={formData.documentoTipo} onChange={handleChange}>
<option value="">Selecione</option>
<option value="CNH">CNH</option>
<option value="Passaporte">Passaporte</option>
</select>
</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>Etnia e Raça:</label>
<select className="form-control" name="etniaRaca" value={formData.etniaRaca} onChange={handleChange}>
<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>Naturalidade:</label>
<input type="text" className="form-control" name="naturalidade" value={formData.naturalidade} onChange={handleChange} />
</div>
<div className="col-md-6 mb-3">
<label>Nacionalidade:</label>
<input type="text" className="form-control" name="nacionalidade" value={formData.nacionalidade} onChange={handleChange} />
</div>
<div className="col-md-6 mb-3">
<label>Profissão:</label>
<input type="text" className="form-control" name="profissao" value={formData.profissao} onChange={handleChange} />
</div>
<div className="col-md-6 mb-3">
<label>Estado civil:</label>
<select className="form-control" name="estadoCivil" value={formData.estadoCivil} onChange={handleChange}>
<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>Nome da Mãe:</label>
<input type="text" className="form-control" name="nomeMae" value={formData.nomeMae} onChange={handleChange} />
</div>
<div className="col-md-6 mb-3">
<label>Profissão da mãe:</label>
<input type="text" className="form-control" name="profissaoMae" value={formData.profissaoMae} onChange={handleChange} />
</div>
<div className="col-md-6 mb-3">
<label>Nome do Pai:</label>
<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 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" />
<label className="form-check-label" htmlFor="rnConvenio">
RN na Guia do convênio
</label>
</div>
</div>
</div>
{/* ------------------ INFORMAÇÕES MÉDICAS ------------------ */}
<h5 className="mt-3">Informações Médicas</h5>
<div className="row">
<div className="col-md-6 mb-3">
<label>Tipo Sanguíneo:</label>
<select className="form-control" name="tipoSanguineo" value={formData.tipoSanguineo} onChange={handleChange}>
<option value="">Selecione</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B-">B-</option>
<option value="AB+">AB+</option>
<option value="AB-">AB-</option>
<option value="O+">O+</option>
<option value="O-">O-</option>
</select>
</div>
<div className="col-md-2 mb-3">
<label>Peso (kg):</label>
<input type="number" step="0.1" className="form-control" name="peso" value={formData.peso} onChange={handleChange} />
</div>
<div className="col-md-2 mb-3">
<label>Altura (m):</label>
<input type="number" step="0.01" className="form-control" name="altura" value={formData.altura} onChange={handleChange} />
</div>
<div className="col-md-2 mb-3">
<label>IMC (kg/m²):</label>
<input type="text" className="form-control" name="imc" value={formData.imc} readOnly disabled />
</div>
<div className="col-md-12 mb-3">
<label>Alergias:</label>
<textarea className="form-control" name="alergias" value={formData.alergias} onChange={handleChange} placeholder="Ex: AAS, Dipirona, etc"></textarea>
</div>
</div>
{/* ------------------ INFORMAÇÕES DE CONVÊNIO ------------------ */}
<h5 className="mt-3">Informações de convênio</h5>
<div className="row">
<div className="col-md-6 mb-3">
<label>Convênio:</label>
<select className="form-control" name="convenio" value={formData.convenio} onChange={handleChange}>
<option value="">Selecione</option>
<option value="Amil">Amil</option>
<option value="Bradesco Saúde">Bradesco Saúde</option>
<option value="SulAmérica">SulAmérica</option>
<option value="Unimed">Unimed</option>
</select>
</div>
<div className="col-md-6 mb-3">
<label>Plano:</label>
<input type="text" className="form-control" name="plano" value={formData.plano} onChange={handleChange} />
</div>
<div className="col-md-6 mb-3">
<label>Nº de matrícula:</label>
<input type="text" className="form-control" name="numeroMatricula" value={formData.numeroMatricula} onChange={handleChange} />
</div>
<div className="col-md-4 mb-3">
<label>Validade da Carteira:</label>
<input type="date" className="form-control" name="validadeCarteira" value={formData.validadeCarteira} onChange={handleChange} disabled={formData.validadeIndeterminada} />
</div>
<div className="col-md-2 d-flex align-items-end mb-3">
<div className="form-check">
<input className="form-check-input" type="checkbox" name="validadeIndeterminada" checked={formData.validadeIndeterminada} onChange={handleChange} id="validadeIndeterminada" />
<label className="form-check-label" htmlFor="validadeIndeterminada">
Validade indeterminada
</label>
</div>
</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>Email:</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 className="mt-3">Informações Adicionais</h5>
<div className="mb-3"> <div className="mb-3">
<label>Observações:</label> <h5 className="mb-0 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('dadosPessoais')}>
<textarea className="form-control" name="observacoes" value={formData.observacoes} onChange={handleChange}></textarea> Dados Pessoais
<span className="fs-5">
{collapsedSections.dadosPessoais ? '▲' : '▼'}
</span>
</h5>
<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: '80px', height: '80px', borderRadius: '50%', objectFit: 'cover' }}
/>
) : (
<div
style={{
width: '80px',
height: '80px',
borderRadius: '50%',
backgroundColor: '#e0e0e0',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '3rem',
color: '#9e9e9e'
}}
>
&#x2624;
</div>
)}
</div>
<div>
<label htmlFor="foto-input" className="btn btn-primary">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">{formData.foto.name}</span>}
</div>
</div>
{/* CADASTRO */}
<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>RG:</label>
<input type="text" className="form-control" name="rg" value={formData.rg} onChange={handleChange} />
</div>
<div className="col-md-6 mb-3">
<label>Outros documentos:</label>
<select className="form-control" name="documentoTipo" value={formData.documentoTipo} onChange={handleChange}>
<option value="">Selecione</option>
<option value="CNH">CNH</option>
<option value="Passaporte">Passaporte</option>
</select>
</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>Etnia e Raça:</label>
<select className="form-control" name="etniaRaca" value={formData.etniaRaca} onChange={handleChange}>
<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>Naturalidade:</label>
<input type="text" className="form-control" name="naturalidade" value={formData.naturalidade} onChange={handleChange} />
</div>
<div className="col-md-6 mb-3">
<label>Nacionalidade:</label>
<input type="text" className="form-control" name="nacionalidade" value={formData.nacionalidade} onChange={handleChange} />
</div>
<div className="col-md-6 mb-3">
<label>Profissão:</label>
<input type="text" className="form-control" name="profissao" value={formData.profissao} onChange={handleChange} />
</div>
<div className="col-md-6 mb-3">
<label>Estado civil:</label>
<select className="form-control" name="estadoCivil" value={formData.estadoCivil} onChange={handleChange}>
<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>Nome da Mãe:</label>
<input type="text" className="form-control" name="nomeMae" value={formData.nomeMae} onChange={handleChange} />
</div>
<div className="col-md-6 mb-3">
<label>Profissão da mãe:</label>
<input type="text" className="form-control" name="profissaoMae" value={formData.profissaoMae} onChange={handleChange} />
</div>
<div className="col-md-6 mb-3">
<label>Nome do Pai:</label>
<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 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" />
<label className="form-check-label" htmlFor="rnConvenio">
RN na Guia do convênio
</label>
</div>
</div>
</div>
</div>
</div> </div>
{/* ------------------ ANEXOS DO PACIENTE ------------------ */} {/* INFORMAÇÕES MÉDICAS */}
<h5 className="mt-3">Anexos do Paciente</h5>
<div className="mb-3"> <div className="mb-3">
<label htmlFor="anexos-input" className="btn btn-secondary">Escolher arquivo</label> <h5 className="mb-0 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('infoMedicas')}>
<input type="file" className="form-control d-none" name="anexos" id="anexos-input" onChange={handleChange} /> Informações Médicas
<span className="ms-2">{formData.anexos ? formData.anexos.name : 'Nenhum arquivo escolhido'}</span> <span className="fs-5">
{collapsedSections.infoMedicas ? '▲' : '▼'}
</span>
</h5>
<div className={`collapse${collapsedSections.infoMedicas ? ' show' : ''}`}>
<div className="row mt-3">
<div className="col-md-6 mb-3">
<label>Tipo Sanguíneo:</label>
<select className="form-control" name="tipoSanguineo" value={formData.tipoSanguineo} onChange={handleChange}>
<option value="">Selecione</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B-">B-</option>
<option value="AB+">AB+</option>
<option value="AB-">AB-</option>
<option value="O+">O+</option>
<option value="O-">O-</option>
</select>
</div>
<div className="col-md-2 mb-3">
<label>Peso (kg):</label>
<input type="number" step="0.1" className="form-control" name="peso" value={formData.peso} onChange={handleChange} />
</div>
<div className="col-md-2 mb-3">
<label>Altura (m):</label>
<input type="number" step="0.01" className="form-control" name="altura" value={formData.altura} onChange={handleChange} />
</div>
<div className="col-md-2 mb-3">
<label>IMC (kg/m²):</label>
<input type="text" className="form-control" name="imc" value={formData.imc} readOnly disabled />
</div>
<div className="col-md-12 mb-3">
<label>Alergias:</label>
<textarea className="form-control" name="alergias" value={formData.alergias} onChange={handleChange} placeholder="Ex: AAS, Dipirona, etc"></textarea>
</div>
</div>
</div>
</div>
{/* INFORMAÇÕES DE CONVÊNIO */}
<div className="mb-3">
<h5 className="mb-0 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('infoConvenio')}>
Informações de convênio
<span className="fs-5">
{collapsedSections.infoConvenio ? '▲' : '▼'}
</span>
</h5>
<div className={`collapse${collapsedSections.infoConvenio ? ' show' : ''}`}>
<div className="row mt-3">
<div className="col-md-6 mb-3">
<label>Convênio:</label>
<select className="form-control" name="convenio" value={formData.convenio} onChange={handleChange}>
<option value="">Selecione</option>
<option value="Amil">Amil</option>
<option value="Bradesco Saúde">Bradesco Saúde</option>
<option value="SulAmérica">SulAmérica</option>
<option value="Unimed">Unimed</option>
</select>
</div>
<div className="col-md-6 mb-3">
<label>Plano:</label>
<input type="text" className="form-control" name="plano" value={formData.plano} onChange={handleChange} />
</div>
<div className="col-md-6 mb-3">
<label>Nº de matrícula:</label>
<input type="text" className="form-control" name="numeroMatricula" value={formData.numeroMatricula} onChange={handleChange} />
</div>
<div className="col-md-4 mb-3">
<label>Validade da Carteira:</label>
<input type="date" className="form-control" name="validadeCarteira" value={formData.validadeCarteira} onChange={handleChange} disabled={formData.validadeIndeterminada} />
</div>
<div className="col-md-2 d-flex align-items-end mb-3">
<div className="form-check">
<input className="form-check-input" type="checkbox" name="validadeIndeterminada" checked={formData.validadeIndeterminada} onChange={handleChange} id="validadeIndeterminada" />
<label className="form-check-label" htmlFor="validadeIndeterminada">
Validade indeterminada
</label>
</div>
</div>
{/* NOVO CAMPO: 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" />
<label className="form-check-label" htmlFor="pacienteVip">
Paciente VIP
</label>
</div>
</div>
</div>
</div>
</div>
{/* ENDEREÇO */}
<div className="mb-3">
<h5 className="mb-0 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('endereco')}>
Endereço
<span className="fs-5">
{collapsedSections.endereco ? '▲' : '▼'}
</span>
</h5>
<div className={`collapse${collapsedSections.endereco ? ' show' : ''}`}>
<div className="row mt-3">
<div className="col-md-4 mb-3">
<label>CEP:</label>
<input type="text" className="form-control" name="cep" value={formData.cep} onChange={handleChange} onBlur={handleCepBlur} />
</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>
</div>
</div>
{/* CONTATO */}
<div className="mb-3">
<h5 className="mb-0 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('contato')}>
Contato
<span className="fs-5">
{collapsedSections.contato ? '▲' : '▼'}
</span>
</h5>
<div className={`collapse${collapsedSections.contato ? ' show' : ''}`}>
<div className="row mt-3">
<div className="col-md-6 mb-3">
<label>Email: *</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>
</div>
</div>
{/* INFORMAÇÕES ADICIONAIS */}
<div className="mb-3">
<h5 className="mb-0 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('infoAdicionais')}>
Informações Adicionais
<span className="fs-5">
{collapsedSections.infoAdicionais ? '▲' : '▼'}
</span>
</h5>
<div className={`collapse${collapsedSections.infoAdicionais ? ' show' : ''}`}>
<div className="row mt-3">
<div className="mb-3">
<label>Observações:</label>
<textarea className="form-control" name="observacoes" value={formData.observacoes} onChange={handleChange}></textarea>
</div>
</div>
</div>
</div>
{/* ANEXOS DO PACIENTE */}
<div className="mb-3">
<h5 className="mb-0 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('anexos')}>
Anexos do Paciente
<span className="fs-5">
{collapsedSections.anexos ? '▲' : '▼'}
</span>
</h5>
<div className={`collapse${collapsedSections.anexos ? ' show' : ''}`}>
<div className="row mt-3">
<div className="mb-3">
<label htmlFor="anexos-input" className="btn btn-secondary">Escolher arquivo</label>
<input type="file" className="form-control d-none" name="anexos" id="anexos-input" onChange={handleChange} />
<span className="ms-2">{formData.anexos ? formData.anexos.name : 'Nenhum arquivo escolhido'}</span>
</div>
</div>
</div>
</div> </div>
{/* Botões */} {/* Botões */}