forked from RiseUP/riseup-squad23
Organização da estilização
This commit is contained in:
parent
28f12b467c
commit
b6bda9945b
201
src/components/doctors/DoctorForm.css
Normal file
201
src/components/doctors/DoctorForm.css
Normal file
@ -0,0 +1,201 @@
|
||||
.doctor-form-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.doctor-form-title {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin-bottom: 2rem;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.8rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-toggle {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-control-custom {
|
||||
font-size: 1.1rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.avatar-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background-color: #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 3.5rem;
|
||||
color: #9e9e9e;
|
||||
}
|
||||
|
||||
.file-input-label {
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.actions-container {
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
font-size: 1.2rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
font-size: 1.2rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
.modal-overlay {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
width: 400px;
|
||||
max-width: 90%;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: #1e3a8a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 25px 20px;
|
||||
}
|
||||
|
||||
.modal-message {
|
||||
color: #111;
|
||||
font-size: 1.1rem;
|
||||
margin: 0 0 15px 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.modal-list-item {
|
||||
color: #111;
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 15px 20px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.modal-confirm-btn {
|
||||
background-color: #1e3a8a;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 8px 20px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.doctor-form-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.btn-submit,
|
||||
.btn-cancel {
|
||||
font-size: 1.1rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { Link, useNavigate, useLocation } from 'react-router-dom';
|
||||
import './DoctorForm.css';
|
||||
|
||||
function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
const navigate = useNavigate();
|
||||
@ -22,16 +23,13 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
.replace(/(\d{3})(\d{1,2})$/, '$1-$2');
|
||||
};
|
||||
|
||||
|
||||
const validarCPF = (cpf) => {
|
||||
const cpfLimpo = cpf.replace(/\D/g, '');
|
||||
|
||||
if (cpfLimpo.length !== 11) return false;
|
||||
|
||||
|
||||
if (/^(\d)\1+$/.test(cpfLimpo)) return false;
|
||||
|
||||
|
||||
let soma = 0;
|
||||
for (let i = 0; i < 9; i++) {
|
||||
soma += parseInt(cpfLimpo.charAt(i)) * (10 - i);
|
||||
@ -39,7 +37,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
let resto = 11 - (soma % 11);
|
||||
let digito1 = resto === 10 || resto === 11 ? 0 : resto;
|
||||
|
||||
|
||||
soma = 0;
|
||||
for (let i = 0; i < 10; i++) {
|
||||
soma += parseInt(cpfLimpo.charAt(i)) * (11 - i);
|
||||
@ -47,7 +44,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
resto = 11 - (soma % 11);
|
||||
let digito2 = resto === 10 || resto === 11 ? 0 : resto;
|
||||
|
||||
|
||||
return digito1 === parseInt(cpfLimpo.charAt(9)) && digito2 === parseInt(cpfLimpo.charAt(10));
|
||||
};
|
||||
|
||||
@ -79,12 +75,10 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
const handleChange = (e) => {
|
||||
const { name, value, type, checked, files } = e.target;
|
||||
|
||||
|
||||
if (value && emptyFields.includes(name)) {
|
||||
setEmptyFields(prev => prev.filter(field => field !== name));
|
||||
}
|
||||
|
||||
|
||||
if (name === 'cpf' && cpfError) {
|
||||
setCpfError('');
|
||||
}
|
||||
@ -108,7 +102,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
let cpfFormatado = FormatCPF(value);
|
||||
setFormData(prev => ({ ...prev, [name]: cpfFormatado }));
|
||||
|
||||
|
||||
const cpfLimpo = cpfFormatado.replace(/\D/g, '');
|
||||
if (cpfLimpo.length === 11) {
|
||||
if (!validarCPF(cpfFormatado)) {
|
||||
@ -150,7 +143,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const scrollToEmptyField = (fieldName) => {
|
||||
let fieldRef = null;
|
||||
|
||||
@ -183,7 +175,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
if (fieldRef.current) {
|
||||
fieldRef.current.scrollIntoView({
|
||||
@ -192,11 +183,9 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
});
|
||||
fieldRef.current.focus();
|
||||
|
||||
|
||||
fieldRef.current.style.border = '2px solid #dc3545';
|
||||
fieldRef.current.style.boxShadow = '0 0 0 0.2rem rgba(220, 53, 69, 0.25)';
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
if (fieldRef.current) {
|
||||
fieldRef.current.style.border = '';
|
||||
@ -208,7 +197,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
|
||||
const missingFields = [];
|
||||
if (!formData.full_name) missingFields.push('full_name');
|
||||
if (!formData.cpf) missingFields.push('cpf');
|
||||
@ -221,7 +209,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
setEmptyFields(missingFields);
|
||||
setShowRequiredModal(true);
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
if (missingFields.length > 0) {
|
||||
scrollToEmptyField(missingFields[0]);
|
||||
@ -230,7 +217,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const cpfLimpo = formData.cpf.replace(/\D/g, '');
|
||||
if (cpfLimpo.length !== 11) {
|
||||
setShowRequiredModal(true);
|
||||
@ -240,7 +226,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (!validarCPF(formData.cpf)) {
|
||||
setShowRequiredModal(true);
|
||||
setEmptyFields(['cpf']);
|
||||
@ -249,12 +234,9 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
try {
|
||||
await onSave({ ...formData });
|
||||
|
||||
} catch (error) {
|
||||
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
@ -265,96 +247,43 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
{showRequiredModal && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
zIndex: 9999,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: "10px",
|
||||
width: "400px",
|
||||
maxWidth: "90%",
|
||||
boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#1e3a8a",
|
||||
padding: "15px 20px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Atenção</h5>
|
||||
<div className="modal-overlay">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">Atenção</h5>
|
||||
<button
|
||||
onClick={handleModalClose}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
fontSize: "20px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
className="modal-close-btn"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: "25px 20px" }}>
|
||||
<p style={{ color: "#111", fontSize: "1.1rem", margin: "0 0 15px 0", fontWeight: "bold" }}>
|
||||
<div className="modal-body">
|
||||
<p className="modal-message">
|
||||
{cpfError ? 'Problema com o CPF:' : 'Por favor, preencha:'}
|
||||
</p>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginLeft: '10px' }}>
|
||||
<div className="modal-list">
|
||||
{cpfError ? (
|
||||
<p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>{cpfError}</p>
|
||||
<p className="modal-list-item">{cpfError}</p>
|
||||
) : (
|
||||
<>
|
||||
{!formData.full_name && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Nome</p>}
|
||||
{!formData.cpf && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- CPF</p>}
|
||||
{!formData.email && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Email</p>}
|
||||
{!formData.phone_mobile && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Telefone</p>}
|
||||
{!formData.crm_uf && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Estado do CRM</p>}
|
||||
{!formData.crm && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- CRM</p>}
|
||||
{!formData.full_name && <p className="modal-list-item">- Nome</p>}
|
||||
{!formData.cpf && <p className="modal-list-item">- CPF</p>}
|
||||
{!formData.email && <p className="modal-list-item">- Email</p>}
|
||||
{!formData.phone_mobile && <p className="modal-list-item">- Telefone</p>}
|
||||
{!formData.crm_uf && <p className="modal-list-item">- Estado do CRM</p>}
|
||||
{!formData.crm && <p className="modal-list-item">- CRM</p>}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
padding: "15px 20px",
|
||||
borderTop: "1px solid #ddd",
|
||||
}}
|
||||
>
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
onClick={handleModalClose}
|
||||
style={{
|
||||
backgroundColor: "#1e3a8a",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
padding: "8px 20px",
|
||||
borderRadius: "6px",
|
||||
cursor: "pointer",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
className="modal-confirm-btn"
|
||||
>
|
||||
Fechar
|
||||
</button>
|
||||
@ -363,48 +292,35 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="card p-3 shadow-sm">
|
||||
<h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
|
||||
<div className="card doctor-form-container shadow-sm">
|
||||
<h3 className="doctor-form-title">MediConnect</h3>
|
||||
|
||||
<div className="mb-5 p-4 border rounded shadow-sm">
|
||||
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
|
||||
onClick={() => handleToggleCollapse('dadosPessoais')}
|
||||
style={{ fontSize: '1.8rem' }}>
|
||||
{/* DADOS PESSOAIS */}
|
||||
<div className="form-section">
|
||||
<h4 className="section-header" onClick={() => handleToggleCollapse('dadosPessoais')}>
|
||||
Dados Pessoais
|
||||
<span className="fs-5">
|
||||
<span className="section-toggle">
|
||||
{collapsedSections.dadosPessoais ? '▲' : '▼'}
|
||||
</span>
|
||||
</h4>
|
||||
<div className={`collapse${collapsedSections.dadosPessoais ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
<div className="col-md-6 mb-3 d-flex align-items-center">
|
||||
<div className="col-md-6 mb-3 avatar-container">
|
||||
<div className="me-3">
|
||||
{avatarUrl ? (
|
||||
<img
|
||||
src={avatarUrl}
|
||||
alt="Avatar do Médico"
|
||||
style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover' }}
|
||||
className="avatar-image"
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
width: '100px',
|
||||
height: '100px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: '#e0e0e0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '3.5rem',
|
||||
color: '#9e9e9e'
|
||||
}}
|
||||
>
|
||||
<div className="avatar-placeholder">
|
||||
☤
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="foto-input" className="btn btn-primary" style={{ fontSize: '1rem' }}>Carregar Foto</label>
|
||||
<label htmlFor="foto-input" className="btn btn-primary file-input-label">Carregar Foto</label>
|
||||
<input
|
||||
type="file"
|
||||
className="form-control d-none"
|
||||
@ -413,31 +329,31 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
onChange={handleChange}
|
||||
accept="image/*"
|
||||
/>
|
||||
{formData.foto && <span className="ms-2" style={{ fontSize: '1rem' }}>{formData.foto.name}</span>}
|
||||
{formData.foto && <span className="ms-2 form-label">{formData.foto.name}</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nome: *</label>
|
||||
<label className="form-label">Nome: *</label>
|
||||
<input
|
||||
ref={nomeRef}
|
||||
type="text"
|
||||
className="form-control"
|
||||
className="form-control form-control-custom"
|
||||
name="full_name"
|
||||
value={formData.full_name || ''}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Data de nascimento:</label>
|
||||
<input type="date" className="form-control" name="birth_date" value={formData.birth_date || ''} onChange={handleChange} min="1900-01-01" max="2025-09-24" />
|
||||
<label className="form-label">Data de nascimento:</label>
|
||||
<input type="date" className="form-control form-control-custom" name="birth_date" value={formData.birth_date || ''} onChange={handleChange} min="1900-01-01" max="2025-09-24" />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>CPF: *</label>
|
||||
<label className="form-label">CPF: *</label>
|
||||
<input
|
||||
ref={cpfRef}
|
||||
type="text"
|
||||
className={`form-control ${cpfError ? 'is-invalid' : ''}`}
|
||||
className={`form-control form-control-custom ${cpfError ? 'is-invalid' : ''}`}
|
||||
name="cpf"
|
||||
value={formData.cpf || ''}
|
||||
onChange={handleChange}
|
||||
@ -450,10 +366,10 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Estado do CRM: *</label>
|
||||
<label className="form-label">Estado do CRM: *</label>
|
||||
<select
|
||||
ref={crmUfRef}
|
||||
className="form-control"
|
||||
className="form-control form-control-custom"
|
||||
name="crm_uf"
|
||||
value={formData.crm_uf || ''}
|
||||
onChange={handleChange}
|
||||
@ -489,11 +405,11 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>CRM: *</label>
|
||||
<label className="form-label">CRM: *</label>
|
||||
<input
|
||||
ref={crmRef}
|
||||
type="text"
|
||||
className="form-control"
|
||||
className="form-control form-control-custom"
|
||||
name="crm"
|
||||
value={formData.crm || ''}
|
||||
onChange={handleChange}
|
||||
@ -501,8 +417,8 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Especialização:</label>
|
||||
<select className="form-control" name="specialty" value={formData.specialty || ''} onChange={handleChange}>
|
||||
<label className="form-label">Especialização:</label>
|
||||
<select className="form-control form-control-custom" name="specialty" value={formData.specialty || ''} onChange={handleChange}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="Clínica Geral">Clínica médica (clínico geral)</option>
|
||||
<option value="Pediatria">Pediatria</option>
|
||||
@ -523,105 +439,100 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-5 p-4 border rounded shadow-sm">
|
||||
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
|
||||
onClick={() => handleToggleCollapse('contato')}
|
||||
style={{ fontSize: '1.8rem' }}>
|
||||
{/* CONTATO */}
|
||||
<div className="form-section">
|
||||
<h4 className="section-header" onClick={() => handleToggleCollapse('contato')}>
|
||||
Contato
|
||||
<span className="fs-5">
|
||||
<span className="section-toggle">
|
||||
{collapsedSections.contato ? '▲' : '▼'}
|
||||
</span>
|
||||
</h4>
|
||||
<div className={`collapse${collapsedSections.contato ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Email: *</label>
|
||||
<label className="form-label">Email: *</label>
|
||||
<input
|
||||
ref={emailRef}
|
||||
type="email"
|
||||
className="form-control"
|
||||
className="form-control form-control-custom"
|
||||
name="email"
|
||||
value={formData.email || ''}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Telefone: *</label>
|
||||
<label className="form-label">Telefone: *</label>
|
||||
<input
|
||||
ref={telefoneRef}
|
||||
type="text"
|
||||
className="form-control"
|
||||
className="form-control form-control-custom"
|
||||
name="phone_mobile"
|
||||
value={formData.phone_mobile || ''}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Telefone 2:</label>
|
||||
<input type="text" className="form-control" name="phone2" value={formData.phone2 || ''} onChange={handleChange} />
|
||||
<label className="form-label">Telefone 2:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="phone2" value={formData.phone2 || ''} onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-5 p-4 border rounded shadow-sm">
|
||||
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
|
||||
onClick={() => handleToggleCollapse('endereco')}
|
||||
style={{ fontSize: '1.8rem' }}>
|
||||
{/* ENDEREÇO */}
|
||||
<div className="form-section">
|
||||
<h4 className="section-header" onClick={() => handleToggleCollapse('endereco')}>
|
||||
Endereço
|
||||
<span className="fs-5">
|
||||
<span className="section-toggle">
|
||||
{collapsedSections.endereco ? '▲' : '▼'}
|
||||
</span>
|
||||
</h4>
|
||||
<div className={`collapse${collapsedSections.endereco ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
<div className="col-md-4 mb-3">
|
||||
<label>CEP:</label>
|
||||
<input type="text" className="form-control" name="cep" value={formData.cep || ''} onChange={handleChange} onBlur={handleCepBlur} />
|
||||
<label className="form-label">CEP:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="cep" value={formData.cep || ''} onChange={handleChange} onBlur={handleCepBlur} />
|
||||
</div>
|
||||
<div className="col-md-8 mb-3">
|
||||
<label>Rua:</label>
|
||||
<input type="text" className="form-control" name="street" value={formData.street || ''} onChange={handleChange} />
|
||||
<label className="form-label">Rua:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="street" value={formData.street || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Bairro:</label>
|
||||
<input type="text" className="form-control" name="neighborhood" value={formData.neighborhood || ''} onChange={handleChange} />
|
||||
<label className="form-label">Bairro:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="neighborhood" value={formData.neighborhood || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label>Cidade:</label>
|
||||
<input type="text" className="form-control" name="city" value={formData.city || ''} onChange={handleChange} />
|
||||
<label className="form-label">Cidade:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="city" value={formData.city || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-2 mb-3">
|
||||
<label>Estado:</label>
|
||||
<input type="text" className="form-control" name="state" value={formData.state || ''} onChange={handleChange} />
|
||||
<label className="form-label">Estado:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="state" value={formData.state || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label>Número:</label>
|
||||
<input type="text" className="form-control" name="number" value={formData.number || ''} onChange={handleChange} />
|
||||
<label className="form-label">Número:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="number" value={formData.number || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-8 mb-3">
|
||||
<label>Complemento:</label>
|
||||
<input type="text" className="form-control" name="complement" value={formData.complement || ''} onChange={handleChange} />
|
||||
<label className="form-label">Complemento:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="complement" value={formData.complement || ''} onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 text-center">
|
||||
{/* BOTÕES DE AÇÃO */}
|
||||
<div className="actions-container">
|
||||
<button
|
||||
className="btn btn-success me-3"
|
||||
className="btn btn-success btn-submit"
|
||||
onClick={handleSubmit}
|
||||
disabled={isLoading}
|
||||
style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}
|
||||
>
|
||||
{isLoading ? 'Salvando...' : 'Salvar Médico'}
|
||||
</button>
|
||||
|
||||
<Link to={`/${location.pathname.split("/")[1]}/medicos`}>
|
||||
<button
|
||||
className="btn btn-light"
|
||||
style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}
|
||||
>
|
||||
<button className="btn btn-light btn-cancel">
|
||||
Cancelar
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
215
src/components/patients/PatientForm.css
Normal file
215
src/components/patients/PatientForm.css
Normal file
@ -0,0 +1,215 @@
|
||||
.patient-form-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.patient-form-title {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin-bottom: 2rem;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.8rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-toggle {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-control-custom {
|
||||
font-size: 1.1rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.avatar-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background-color: #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 3.5rem;
|
||||
color: #9e9e9e;
|
||||
}
|
||||
|
||||
.file-input-label {
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.checkbox-custom {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
font-size: 1.1rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.textarea-custom {
|
||||
font-size: 1.1rem;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.actions-container {
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
font-size: 1.2rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
font-size: 1.2rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
.modal-overlay {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
width: 400px;
|
||||
max-width: 90%;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: #1e3a8a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 25px 20px;
|
||||
}
|
||||
|
||||
.modal-message {
|
||||
color: #111;
|
||||
font-size: 1.1rem;
|
||||
margin: 0 0 15px 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.modal-list-item {
|
||||
color: #111;
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 15px 20px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.modal-confirm-btn {
|
||||
background-color: #1e3a8a;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 8px 20px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.patient-form-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.btn-submit,
|
||||
.btn-cancel {
|
||||
font-size: 1.1rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { FormatTelefones, FormatPeso, FormatCPF } from '../utils/Formatar/Format';
|
||||
import './PatientForm.css';
|
||||
|
||||
function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
const [avatarUrl, setAvatarUrl] = useState(null);
|
||||
@ -20,17 +21,13 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
const emailRef = useRef(null);
|
||||
const telefoneRef = useRef(null);
|
||||
|
||||
|
||||
const validarCPF = (cpf) => {
|
||||
const cpfLimpo = cpf.replace(/\D/g, '');
|
||||
|
||||
|
||||
if (cpfLimpo.length !== 11) return false;
|
||||
|
||||
|
||||
if (/^(\d)\1+$/.test(cpfLimpo)) return false;
|
||||
|
||||
|
||||
let soma = 0;
|
||||
for (let i = 0; i < 9; i++) {
|
||||
soma += parseInt(cpfLimpo.charAt(i)) * (10 - i);
|
||||
@ -38,7 +35,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
let resto = 11 - (soma % 11);
|
||||
let digito1 = resto === 10 || resto === 11 ? 0 : resto;
|
||||
|
||||
|
||||
soma = 0;
|
||||
for (let i = 0; i < 10; i++) {
|
||||
soma += parseInt(cpfLimpo.charAt(i)) * (11 - i);
|
||||
@ -46,7 +42,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
resto = 11 - (soma % 11);
|
||||
let digito2 = resto === 10 || resto === 11 ? 0 : resto;
|
||||
|
||||
|
||||
return digito1 === parseInt(cpfLimpo.charAt(9)) && digito2 === parseInt(cpfLimpo.charAt(10));
|
||||
};
|
||||
|
||||
@ -71,12 +66,10 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
const handleChange = (e) => {
|
||||
const { name, value, type, checked, files } = e.target;
|
||||
|
||||
|
||||
if (value && emptyFields.includes(name)) {
|
||||
setEmptyFields(prev => prev.filter(field => field !== name));
|
||||
}
|
||||
|
||||
|
||||
if (name === 'cpf' && cpfError) {
|
||||
setCpfError('');
|
||||
}
|
||||
@ -120,7 +113,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
switch (fieldName) {
|
||||
case 'full_name':
|
||||
fieldRef = nomeRef;
|
||||
|
||||
setCollapsedSections(prev => ({ ...prev, dadosPessoais: true }));
|
||||
break;
|
||||
case 'cpf':
|
||||
@ -139,7 +131,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
if (fieldRef.current) {
|
||||
fieldRef.current.scrollIntoView({
|
||||
@ -148,11 +139,9 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
});
|
||||
fieldRef.current.focus();
|
||||
|
||||
|
||||
fieldRef.current.style.border = '2px solid #dc3545';
|
||||
fieldRef.current.style.boxShadow = '0 0 0 0.2rem rgba(220, 53, 69, 0.25)';
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
if (fieldRef.current) {
|
||||
fieldRef.current.style.border = '';
|
||||
@ -164,7 +153,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
|
||||
const missingFields = [];
|
||||
if (!formData.full_name) missingFields.push('full_name');
|
||||
if (!formData.cpf) missingFields.push('cpf');
|
||||
@ -175,17 +163,14 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
setEmptyFields(missingFields);
|
||||
setShowRequiredModal(true);
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
if (missingFields.length > 0) {
|
||||
scrollToEmptyField(missingFields[0]);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const cpfLimpo = formData.cpf.replace(/\D/g, '');
|
||||
if (cpfLimpo.length !== 11) {
|
||||
setShowRequiredModal(true);
|
||||
@ -195,7 +180,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (!validarCPF(formData.cpf)) {
|
||||
setShowRequiredModal(true);
|
||||
setEmptyFields(['cpf']);
|
||||
@ -205,7 +189,9 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
}
|
||||
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
if (!emailRegex.test(formData.email)) {
|
||||
throw new Error('Email inválido. Por favor, verifique o email digitado.');
|
||||
}
|
||||
|
||||
await onSave({ ...formData, bmi: parseFloat(formData.bmi) || null });
|
||||
};
|
||||
@ -215,48 +201,36 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card p-3">
|
||||
<h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
|
||||
<div className="card patient-form-container">
|
||||
<h3 className="patient-form-title">MediConnect</h3>
|
||||
|
||||
{/* DADOS PESSOAIS */}
|
||||
<div className="mb-5 p-4 border rounded shadow-sm">
|
||||
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('dadosPessoais')} style={{ fontSize: '1.8rem' }}>
|
||||
<div className="form-section">
|
||||
<h4 className="section-header" onClick={() => handleToggleCollapse('dadosPessoais')}>
|
||||
Dados Pessoais
|
||||
<span className="fs-5">
|
||||
<span className="section-toggle">
|
||||
{collapsedSections.dadosPessoais ? '▲' : '▼'}
|
||||
</span>
|
||||
</h4>
|
||||
<div className={`collapse${collapsedSections.dadosPessoais ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
{/* AVATAR E INPUT DE FOTO */}
|
||||
<div className="col-md-6 mb-3 d-flex align-items-center">
|
||||
<div className="col-md-6 mb-3 avatar-container">
|
||||
<div className="me-3">
|
||||
{avatarUrl ? (
|
||||
<img
|
||||
src={avatarUrl}
|
||||
alt="Avatar do Paciente"
|
||||
style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover' }}
|
||||
className="avatar-image"
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
width: '100px',
|
||||
height: '100px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: '#e0e0e0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '3.5rem',
|
||||
color: '#9e9e9e'
|
||||
}}
|
||||
>
|
||||
<div className="avatar-placeholder">
|
||||
☤
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="foto-input" className="btn btn-primary" style={{ fontSize: '1rem' }}>Carregar Foto</label>
|
||||
<label htmlFor="foto-input" className="btn btn-primary file-input-label">Carregar Foto</label>
|
||||
<input
|
||||
type="file"
|
||||
className="form-control d-none"
|
||||
@ -265,48 +239,45 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
onChange={handleChange}
|
||||
accept="image/*"
|
||||
/>
|
||||
{formData.foto && <span className="ms-2" style={{ fontSize: '1rem' }}>{formData.foto.name}</span>}
|
||||
{formData.foto && <span className="ms-2 form-label">{formData.foto.name}</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CAMPOS OBRIGATÓRIOS */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nome: *</label>
|
||||
<label className="form-label">Nome: *</label>
|
||||
<input
|
||||
ref={nomeRef}
|
||||
type="text"
|
||||
className="form-control"
|
||||
className="form-control form-control-custom"
|
||||
name="full_name"
|
||||
value={formData.full_name || ''}
|
||||
onChange={handleChange}
|
||||
style={{ fontSize: '1.1rem' }}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nome social:</label>
|
||||
<input type="text" className="form-control" name="social_name" value={formData.social_name || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Nome social:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="social_name" value={formData.social_name || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Data de nascimento:</label>
|
||||
<label className="form-label">Data de nascimento:</label>
|
||||
<input
|
||||
type="date"
|
||||
className="form-control"
|
||||
className="form-control form-control-custom"
|
||||
name="birth_date"
|
||||
value={formData.birth_date || ''}
|
||||
onChange={handleChange}
|
||||
style={{ fontSize: '1.1rem' }}
|
||||
min="1900-01-01" max="2025-09-24"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Gênero:</label>
|
||||
<label className="form-label">Gênero:</label>
|
||||
<select
|
||||
className="form-control"
|
||||
className="form-control form-control-custom"
|
||||
name="sex"
|
||||
value={formData.sex || ''}
|
||||
onChange={handleChange}
|
||||
style={{ fontSize: '1.1rem' }}
|
||||
>
|
||||
<option value="">Selecione</option>
|
||||
<option value="Masculino">Masculino</option>
|
||||
@ -315,15 +286,14 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>CPF: *</label>
|
||||
<label className="form-label">CPF: *</label>
|
||||
<input
|
||||
ref={cpfRef}
|
||||
type="text"
|
||||
className={`form-control ${cpfError ? 'is-invalid' : ''}`}
|
||||
className={`form-control form-control-custom ${cpfError ? 'is-invalid' : ''}`}
|
||||
name="cpf"
|
||||
value={formData.cpf || ''}
|
||||
onChange={handleChange}
|
||||
style={{ fontSize: '1.1rem' }}
|
||||
required
|
||||
/>
|
||||
{cpfError && (
|
||||
@ -333,12 +303,12 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
)}
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>RG:</label>
|
||||
<input type="text" className="form-control" name="rg" value={formData.rg || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">RG:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="rg" value={formData.rg || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Outros documentos:</label>
|
||||
<select className="form-control" name="document_type" value={formData.document_type || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<label className="form-label">Outros documentos:</label>
|
||||
<select className="form-control form-control-custom" name="document_type" value={formData.document_type || ''} onChange={handleChange}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="CNH">CNH</option>
|
||||
<option value="Passaporte">Passaporte</option>
|
||||
@ -346,12 +316,12 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Número do documento:</label>
|
||||
<input type="text" className="form-control" name="document_number" value={formData.document_number || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Número do documento:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="document_number" value={formData.document_number || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Etnia e Raça:</label>
|
||||
<select className="form-control" name="race" value={formData.race || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<label className="form-label">Etnia e Raça:</label>
|
||||
<select className="form-control form-control-custom" name="race" value={formData.race || ''} onChange={handleChange}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="Branca">Branca</option>
|
||||
<option value="Preta">Preta</option>
|
||||
@ -361,20 +331,20 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Naturalidade:</label>
|
||||
<input type="text" className="form-control" name="naturality" value={formData.naturalidade || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Naturalidade:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="naturality" value={formData.naturalidade || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nacionalidade:</label>
|
||||
<input type="text" className="form-control" name="nationality" value={formData.nationality || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Nacionalidade:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="nationality" value={formData.nationality || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Profissão:</label>
|
||||
<input type="text" className="form-control" name="profession" value={formData.profession || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Profissão:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="profession" value={formData.profession || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Estado civil:</label>
|
||||
<select className="form-control" name="marital_status" value={formData.marital_status || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<label className="form-label">Estado civil:</label>
|
||||
<select className="form-control form-control-custom" name="marital_status" value={formData.marital_status || ''} onChange={handleChange}>
|
||||
<option value="" disabled>Selecione</option>
|
||||
<option value="Solteiro">Solteiro(a)</option>
|
||||
<option value="Casado">Casado(a)</option>
|
||||
@ -383,37 +353,37 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nome da Mãe:</label>
|
||||
<input type="text" className="form-control" name="mother_name" value={formData.mother_name || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Nome da Mãe:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="mother_name" value={formData.mother_name || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Profissão da mãe:</label>
|
||||
<input type="text" className="form-control" name="mother_profession" value={formData.mother_profession || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Profissão da mãe:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="mother_profession" value={formData.mother_profession || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nome do Pai:</label>
|
||||
<input type="text" className="form-control" name="father_name" value={formData.father_name || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Nome do Pai:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="father_name" value={formData.father_name || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Profissão do pai:</label>
|
||||
<input type="text" className="form-control" name="father_profession" value={formData.father_profession || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Profissão do pai:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="father_profession" value={formData.father_profession || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nome do responsável:</label>
|
||||
<input type="text" className="form-control" name="guardian_name" value={formData.guardian_name || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Nome do responsável:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="guardian_name" value={formData.guardian_name || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>CPF do responsável:</label>
|
||||
<input type="text" className="form-control" name="guardian_cpf" value={formData.guardian_cpf || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">CPF do responsável:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="guardian_cpf" value={formData.guardian_cpf || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Identificador de outro sistema:</label>
|
||||
<input type="text" className="form-control" name="legacy_code" value={formData.legacy_code || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Identificador de outro sistema:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="legacy_code" value={formData.legacy_code || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-12 mb-3">
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" type="checkbox" name="rn_in_insurance" checked={formData.rn_in_insurance || false} onChange={handleChange} id="rn_in_insurance" style={{ transform: 'scale(1.2)' }} />
|
||||
<label className="form-check-label ms-2" htmlFor="rn_in_insurance" style={{ fontSize: '1.1rem' }}>
|
||||
<input className="form-check-input checkbox-custom" type="checkbox" name="rn_in_insurance" checked={formData.rn_in_insurance || false} onChange={handleChange} id="rn_in_insurance" />
|
||||
<label className="form-check-label checkbox-label" htmlFor="rn_in_insurance">
|
||||
RN na Guia do convênio
|
||||
</label>
|
||||
</div>
|
||||
@ -421,35 +391,34 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
|
||||
{/* CAMPOS ADICIONAIS */}
|
||||
<div className="col-md-12 mb-3 mt-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Observações:</label>
|
||||
<textarea className="form-control" name="notes" value={formData.notes || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} placeholder='alergias, doenças crônicas, informações sobre porteses ou marca-passo, etc'></textarea>
|
||||
<label className="form-label">Observações:</label>
|
||||
<textarea className="form-control textarea-custom" name="notes" value={formData.notes || ''} onChange={handleChange} placeholder='alergias, doenças crônicas, informações sobre porteses ou marca-passo, etc'></textarea>
|
||||
</div>
|
||||
<div className="col-md-12 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Anexos do Paciente:</label>
|
||||
<label className="form-label">Anexos do Paciente:</label>
|
||||
<div>
|
||||
<label htmlFor="anexos-input" className="btn btn-secondary" style={{ fontSize: '1.1rem' }}>Escolher arquivo</label>
|
||||
<label htmlFor="anexos-input" className="btn btn-secondary file-input-label">Escolher arquivo</label>
|
||||
<input type="file" className="form-control d-none" name="anexos" id="anexos-input" onChange={handleChange} />
|
||||
<span className="ms-2" style={{ fontSize: '1.1rem' }}>{formData.anexos ? formData.anexos.name : 'Nenhum arquivo escolhido'}</span>
|
||||
<span className="ms-2 form-label">{formData.anexos ? formData.anexos.name : 'Nenhum arquivo escolhido'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* INFORMAÇÕES MÉDICAS */}
|
||||
<div className="mb-5 p-4 border rounded shadow-sm">
|
||||
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('infoMedicas')} style={{ fontSize: '1.8rem' }}>
|
||||
<div className="form-section">
|
||||
<h4 className="section-header" onClick={() => handleToggleCollapse('infoMedicas')}>
|
||||
Informações Médicas
|
||||
<span className="fs-5">
|
||||
<span className="section-toggle">
|
||||
{collapsedSections.infoMedicas ? '▲' : '▼'}
|
||||
</span>
|
||||
</h4>
|
||||
<div className={`collapse${collapsedSections.infoMedicas ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Tipo Sanguíneo:</label>
|
||||
<select className="form-control" name="blood_type" value={formData.blood_type || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<label className="form-label">Tipo Sanguíneo:</label>
|
||||
<select className="form-control form-control-custom" name="blood_type" value={formData.blood_type || ''} onChange={handleChange}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="A+">A+</option>
|
||||
<option value="A-">A-</option>
|
||||
@ -462,35 +431,34 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-2 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Peso (kg):</label>
|
||||
<input type="text" step="0.1" className="form-control" name="weight_kg" value={formData.weight_kg || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Peso (kg):</label>
|
||||
<input type="text" step="0.1" className="form-control form-control-custom" name="weight_kg" value={formData.weight_kg || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-2 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Altura (m):</label>
|
||||
<input type="text" step="0.01" className="form-control" name="height_m" value={formData.height_m || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Altura (m):</label>
|
||||
<input type="text" step="0.01" className="form-control form-control-custom" name="height_m" value={formData.height_m || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-2 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>IMC (kg/m²):</label>
|
||||
<input type="text" className="form-control" name="bmi" value={formData.bmi || ''} readOnly disabled style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">IMC (kg/m²):</label>
|
||||
<input type="text" className="form-control form-control-custom" name="bmi" value={formData.bmi || ''} readOnly disabled />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* INFORMAÇÕES DE CONVÊNIO */}
|
||||
<div className="mb-5 p-4 border rounded shadow-sm">
|
||||
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('infoConvenio')} style={{ fontSize: '1.8rem' }}>
|
||||
<div className="form-section">
|
||||
<h4 className="section-header" onClick={() => handleToggleCollapse('infoConvenio')}>
|
||||
Informações de convênio
|
||||
<span className="fs-5">
|
||||
<span className="section-toggle">
|
||||
{collapsedSections.infoConvenio ? '▲' : '▼'}
|
||||
</span>
|
||||
</h4>
|
||||
<div className={`collapse${collapsedSections.infoConvenio ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Convênio:</label>
|
||||
<select className="form-control" name="convenio" value={formData.convenio || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<label className="form-label">Convênio:</label>
|
||||
<select className="form-control form-control-custom" name="convenio" value={formData.convenio || ''} onChange={handleChange}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="Amil">Amil</option>
|
||||
<option value="Bradesco Saúde">Bradesco Saúde</option>
|
||||
@ -499,21 +467,21 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Plano:</label>
|
||||
<input type="text" className="form-control" name="plano" value={formData.plano || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Plano:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="plano" value={formData.plano || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nº de matrícula:</label>
|
||||
<input type="text" className="form-control" name="numeroMatricula" value={formData.numeroMatricula || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Nº de matrícula:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="numeroMatricula" value={formData.numeroMatricula || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Validade da Carteira:</label>
|
||||
<input type="date" className="form-control" name="validadeCarteira" value={formData.validadeCarteira || ''} onChange={handleChange} disabled={formData.validadeIndeterminada} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Validade da Carteira:</label>
|
||||
<input type="date" className="form-control form-control-custom" name="validadeCarteira" value={formData.validadeCarteira || ''} onChange={handleChange} disabled={formData.validadeIndeterminada} />
|
||||
</div>
|
||||
<div className="col-md-2 d-flex align-items-end mb-3">
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" type="checkbox" name="validadeIndeterminada" checked={formData.validadeIndeterminada || false} onChange={handleChange} id="validadeIndeterminada" style={{ transform: 'scale(1.2)' }} />
|
||||
<label className="form-check-label ms-2" htmlFor="validadeIndeterminada" style={{ fontSize: '1.1rem' }}>
|
||||
<input className="form-check-input checkbox-custom" type="checkbox" name="validadeIndeterminada" checked={formData.validadeIndeterminada || false} onChange={handleChange} id="validadeIndeterminada" />
|
||||
<label className="form-check-label checkbox-label" htmlFor="validadeIndeterminada">
|
||||
Validade indeterminada
|
||||
</label>
|
||||
</div>
|
||||
@ -521,8 +489,8 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
{/* PACIENTE VIP */}
|
||||
<div className="col-md-12 mb-3 mt-3">
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" type="checkbox" name="vip" checked={formData.vip || false} onChange={handleChange} id="vip" style={{ transform: 'scale(1.2)' }} />
|
||||
<label className="form-check-label ms-2" htmlFor="vip" style={{ fontSize: '1.1rem' }}>
|
||||
<input className="form-check-input checkbox-custom" type="checkbox" name="vip" checked={formData.vip || false} onChange={handleChange} id="vip" />
|
||||
<label className="form-check-label checkbox-label" htmlFor="vip">
|
||||
Paciente VIP
|
||||
</label>
|
||||
</div>
|
||||
@ -532,185 +500,129 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</div>
|
||||
|
||||
{/* ENDEREÇO */}
|
||||
<div className="mb-5 p-4 border rounded shadow-sm">
|
||||
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('endereco')} style={{ fontSize: '1.8rem' }}>
|
||||
<div className="form-section">
|
||||
<h4 className="section-header" onClick={() => handleToggleCollapse('endereco')}>
|
||||
Endereço
|
||||
<span className="fs-5">
|
||||
<span className="section-toggle">
|
||||
{collapsedSections.endereco ? '▲' : '▼'}
|
||||
</span>
|
||||
</h4>
|
||||
<div className={`collapse${collapsedSections.endereco ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
<div className="col-md-4 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>CEP:</label>
|
||||
<input type="text" className="form-control" name="cep" value={formData.cep || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">CEP:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="cep" value={formData.cep || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-8 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Rua:</label>
|
||||
<input type="text" className="form-control" name="street" value={formData.street || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Rua:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="street" value={formData.street || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Bairro:</label>
|
||||
<input type="text" className="form-control" name="neighborhood" value={formData.neighborhood || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Bairro:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="neighborhood" value={formData.neighborhood || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Cidade:</label>
|
||||
<input type="text" className="form-control" name="city" value={formData.city || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Cidade:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="city" value={formData.city || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-2 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Estado:</label>
|
||||
<input type="text" className="form-control" name="state" value={formData.state || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Estado:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="state" value={formData.state || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Número:</label>
|
||||
<input type="text" className="form-control" name="number" value={formData.number || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Número:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="number" value={formData.number || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-8 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Complemento:</label>
|
||||
<input type="text" className="form-control" name="complement" value={formData.complement || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Complemento:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="complement" value={formData.complement || ''} onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-5 p-4 border rounded shadow-sm">
|
||||
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('contato')} style={{ fontSize: '1.8rem' }}>
|
||||
{/* CONTATO */}
|
||||
<div className="form-section">
|
||||
<h4 className="section-header" onClick={() => handleToggleCollapse('contato')}>
|
||||
Contato
|
||||
<span className="fs-5">
|
||||
<span className="section-toggle">
|
||||
{collapsedSections.contato ? '▲' : '▼'}
|
||||
</span>
|
||||
</h4>
|
||||
<div className={`collapse${collapsedSections.contato ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Email: *</label>
|
||||
<label className="form-label">Email: *</label>
|
||||
<input
|
||||
ref={emailRef}
|
||||
type="email"
|
||||
className="form-control"
|
||||
className="form-control form-control-custom"
|
||||
name="email"
|
||||
value={formData.email || ''}
|
||||
onChange={handleChange}
|
||||
style={{ fontSize: '1.1rem' }}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Telefone: *</label>
|
||||
<label className="form-label">Telefone: *</label>
|
||||
<input
|
||||
ref={telefoneRef}
|
||||
type="text"
|
||||
className="form-control"
|
||||
className="form-control form-control-custom"
|
||||
name="phone_mobile"
|
||||
value={formData.phone_mobile || ''}
|
||||
onChange={handleChange}
|
||||
style={{ fontSize: '1.1rem' }}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Telefone 2:</label>
|
||||
<input type="text" className="form-control" name="phone1" value={formData.phone1 || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Telefone 2:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="phone1" value={formData.phone1 || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Telefone 3:</label>
|
||||
<input type="text" className="form-control" name="phone2" value={formData.phone2 || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label className="form-label">Telefone 3:</label>
|
||||
<input type="text" className="form-control form-control-custom" name="phone2" value={formData.phone2 || ''} onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* MODAL DE VALIDAÇÃO */}
|
||||
{showRequiredModal && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
zIndex: 9999,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: "10px",
|
||||
width: "400px",
|
||||
maxWidth: "90%",
|
||||
boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#1e3a8a",
|
||||
padding: "15px 20px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Atenção</h5>
|
||||
<div className="modal-overlay">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">Atenção</h5>
|
||||
<button
|
||||
onClick={handleModalClose}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
fontSize: "20px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
className="modal-close-btn"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div style={{ padding: "25px 20px" }}>
|
||||
<p style={{ color: "#111", fontSize: "1.1rem", margin: "0 0 15px 0", fontWeight: "bold" }}>
|
||||
<div className="modal-body">
|
||||
<p className="modal-message">
|
||||
{cpfError ? 'Problema com o CPF:' : 'Por favor, preencha:'}
|
||||
</p>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginLeft: '10px' }}>
|
||||
<div className="modal-list">
|
||||
{cpfError ? (
|
||||
<p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>{cpfError}</p>
|
||||
<p className="modal-list-item">{cpfError}</p>
|
||||
) : (
|
||||
<>
|
||||
{!formData.full_name && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Nome</p>}
|
||||
{!formData.cpf && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- CPF</p>}
|
||||
{!formData.email && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Email</p>}
|
||||
{!formData.phone_mobile && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Telefone</p>}
|
||||
{!formData.full_name && <p className="modal-list-item">- Nome</p>}
|
||||
{!formData.cpf && <p className="modal-list-item">- CPF</p>}
|
||||
{!formData.email && <p className="modal-list-item">- Email</p>}
|
||||
{!formData.phone_mobile && <p className="modal-list-item">- Telefone</p>}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
padding: "15px 20px",
|
||||
borderTop: "1px solid #ddd",
|
||||
}}
|
||||
>
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
onClick={handleModalClose}
|
||||
style={{
|
||||
backgroundColor: "#1e3a8a",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
padding: "8px 20px",
|
||||
borderRadius: "6px",
|
||||
cursor: "pointer",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
className="modal-confirm-btn"
|
||||
>
|
||||
Fechar
|
||||
</button>
|
||||
@ -719,13 +631,13 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
<div className="mt-3 text-center">
|
||||
<button className="btn btn-success me-3" onClick={handleSubmit} disabled={isLoading} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
|
||||
{/* BOTÕES DE AÇÃO */}
|
||||
<div className="actions-container">
|
||||
<button className="btn btn-success btn-submit" onClick={handleSubmit} disabled={isLoading}>
|
||||
{isLoading ? 'Salvando...' : 'Salvar Paciente'}
|
||||
</button>
|
||||
<Link to='/secretaria/pacientes'>
|
||||
<button className="btn btn-light" style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
|
||||
<button className="btn btn-light btn-cancel">
|
||||
Cancelar
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
@ -3,6 +3,7 @@ import { useAuth } from '../components/utils/AuthProvider';
|
||||
import DoctorForm from '../components/doctors/DoctorForm';
|
||||
import API_KEY from '../components/utils/apiKeys';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
import './style/DoctorCadastroManager.css';
|
||||
|
||||
function DoctorCadastroManager() {
|
||||
const [doctorData, setDoctorData] = useState({});
|
||||
@ -65,7 +66,6 @@ function DoctorCadastroManager() {
|
||||
if (!response.ok) {
|
||||
let errorMessage = `Erro ao salvar médico (${response.status})`;
|
||||
|
||||
|
||||
const responseText = await response.text();
|
||||
console.log("Conteúdo da resposta:", responseText);
|
||||
|
||||
@ -75,7 +75,6 @@ function DoctorCadastroManager() {
|
||||
console.error("Erro detalhado:", errorData);
|
||||
errorMessage = errorData.message || errorData.details || errorMessage;
|
||||
} catch (jsonError) {
|
||||
|
||||
errorMessage = responseText || errorMessage;
|
||||
}
|
||||
} else {
|
||||
@ -101,7 +100,6 @@ function DoctorCadastroManager() {
|
||||
result = { success: true, status: response.status };
|
||||
}
|
||||
|
||||
|
||||
setShowSuccessModal(true);
|
||||
|
||||
} catch (error) {
|
||||
@ -110,7 +108,7 @@ function DoctorCadastroManager() {
|
||||
let userFriendlyMessage = error.message;
|
||||
|
||||
if (error.message.includes('doctors_cpf_key') || error.message.includes('duplicate key')) {
|
||||
userFriendlyMessage = 'Já existe um médico cadastrado com este CPF. Verifique os dados ou edite o médico existente.';
|
||||
userFriendlyMessage = 'Já existe um médico cadastrado com este CPF.';
|
||||
} else if (error.message.includes('Unexpected end of JSON input')) {
|
||||
userFriendlyMessage = 'Erro de comunicação com o servidor. Tente novamente.';
|
||||
}
|
||||
@ -124,7 +122,6 @@ function DoctorCadastroManager() {
|
||||
|
||||
const handleCloseSuccessModal = () => {
|
||||
setShowSuccessModal(false);
|
||||
|
||||
const prefixo = location.pathname.split("/")[1];
|
||||
navigate(`/${prefixo}/medicos`);
|
||||
};
|
||||
@ -135,83 +132,35 @@ function DoctorCadastroManager() {
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoading && (
|
||||
<div className="loading-overlay">
|
||||
<div className="loading-spinner"></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showSuccessModal && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
zIndex: 9999,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: "10px",
|
||||
width: "400px",
|
||||
maxWidth: "90%",
|
||||
boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#28a745",
|
||||
padding: "15px 20px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Sucesso</h5>
|
||||
<div className="modal-overlay">
|
||||
<div className="modal-container">
|
||||
<div className="modal-header modal-header-success">
|
||||
<h5 className="modal-title">Sucesso</h5>
|
||||
<button
|
||||
onClick={handleCloseSuccessModal}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
fontSize: "20px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
className="modal-close-button"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: "25px 20px" }}>
|
||||
<p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>
|
||||
<div className="modal-body">
|
||||
<p className="modal-message">
|
||||
Médico cadastrado com sucesso!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
padding: "15px 20px",
|
||||
borderTop: "1px solid #ddd",
|
||||
}}
|
||||
>
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
onClick={handleCloseSuccessModal}
|
||||
style={{
|
||||
backgroundColor: "#28a745",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
padding: "8px 20px",
|
||||
borderRadius: "6px",
|
||||
cursor: "pointer",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
className="modal-button modal-button-success"
|
||||
>
|
||||
Fechar
|
||||
</button>
|
||||
@ -220,82 +169,29 @@ function DoctorCadastroManager() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{showErrorModal && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
zIndex: 9999,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: "10px",
|
||||
width: "400px",
|
||||
maxWidth: "90%",
|
||||
boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#dc3545",
|
||||
padding: "15px 20px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Erro</h5>
|
||||
<div className="modal-overlay">
|
||||
<div className="modal-container">
|
||||
<div className="modal-header modal-header-error">
|
||||
<h5 className="modal-title">Erro</h5>
|
||||
<button
|
||||
onClick={handleCloseErrorModal}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
fontSize: "20px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
className="modal-close-button"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: "25px 20px" }}>
|
||||
<p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>
|
||||
<div className="modal-body">
|
||||
<p className="modal-message">
|
||||
{errorMessage}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
padding: "15px 20px",
|
||||
borderTop: "1px solid #ddd",
|
||||
}}
|
||||
>
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
onClick={handleCloseErrorModal}
|
||||
style={{
|
||||
backgroundColor: "#dc3545",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
padding: "8px 20px",
|
||||
borderRadius: "6px",
|
||||
cursor: "pointer",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
className="modal-button modal-button-error"
|
||||
>
|
||||
Fechar
|
||||
</button>
|
||||
|
||||
@ -1,33 +1,32 @@
|
||||
import {useState} from 'react';
|
||||
import { useState } from 'react';
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import PatientForm from '../components/patients/PatientForm';
|
||||
import API_KEY from '../components/utils/apiKeys';
|
||||
import { useAuth } from '../components/utils/AuthProvider';
|
||||
import './style/PatientCadastroManager.css';
|
||||
|
||||
function PatientCadastroManager( {setCurrentPage} ) {
|
||||
function PatientCadastroManager({ setCurrentPage }) {
|
||||
const navigate = useNavigate()
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [infosModal, setInfosModal] = useState({title:'', message:''});
|
||||
const [infosModal, setInfosModal] = useState({ title: '', message: '' });
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const { getAuthorizationHeader, isAuthenticated } = useAuth();
|
||||
const [formData, setFormData] = useState({})
|
||||
|
||||
|
||||
const validarCPF = (cpf) => {
|
||||
cpf = cpf.replace(/\D/g, '');
|
||||
|
||||
if (cpf.length !== 11) return false;
|
||||
|
||||
|
||||
if (/^(\d)\1+$/.test(cpf)) return false;
|
||||
|
||||
let soma = 0;
|
||||
let resto;
|
||||
|
||||
for (let i = 1; i <= 9; i++) {
|
||||
soma = soma + parseInt(cpf.substring(i-1, i)) * (11 - i);
|
||||
soma = soma + parseInt(cpf.substring(i - 1, i)) * (11 - i);
|
||||
}
|
||||
|
||||
resto = (soma * 10) % 11;
|
||||
@ -36,7 +35,7 @@ function PatientCadastroManager( {setCurrentPage} ) {
|
||||
|
||||
soma = 0;
|
||||
for (let i = 1; i <= 10; i++) {
|
||||
soma = soma + parseInt(cpf.substring(i-1, i)) * (12 - i);
|
||||
soma = soma + parseInt(cpf.substring(i - 1, i)) * (12 - i);
|
||||
}
|
||||
|
||||
resto = (soma * 10) % 11;
|
||||
@ -47,24 +46,19 @@ function PatientCadastroManager( {setCurrentPage} ) {
|
||||
}
|
||||
|
||||
const handleSavePatient = async (patientData) => {
|
||||
console.log(' Iniciando salvamento do paciente:', patientData);
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
|
||||
console.log(' Verificando autenticação...');
|
||||
if (!isAuthenticated) {
|
||||
throw new Error('Usuário não autenticado');
|
||||
}
|
||||
|
||||
const authHeader = getAuthorizationHeader();
|
||||
console.log(' Header de autorização:', authHeader ? 'Presente' : 'Faltando');
|
||||
|
||||
if (!authHeader) {
|
||||
throw new Error('Header de autorização não encontrado');
|
||||
}
|
||||
|
||||
|
||||
const cpfLimpo = patientData.cpf.replace(/\D/g, '');
|
||||
if (!validarCPF(cpfLimpo)) {
|
||||
throw new Error('CPF inválido. Por favor, verifique o número digitado.');
|
||||
@ -76,23 +70,15 @@ function PatientCadastroManager( {setCurrentPage} ) {
|
||||
myHeaders.append("Authorization", authHeader);
|
||||
myHeaders.append("Prefer", "return=representation");
|
||||
|
||||
console.log(' Headers configurados:', {
|
||||
'Content-Type': 'application/json',
|
||||
'apikey': API_KEY ? 'Presente' : 'Faltando',
|
||||
'Authorization': authHeader ? 'Presente' : 'Faltando',
|
||||
'Prefer': 'return=representation'
|
||||
});
|
||||
|
||||
const cleanedData = {
|
||||
full_name: patientData.full_name,
|
||||
cpf: cpfLimpo,
|
||||
email: patientData.email,
|
||||
phone_mobile: patientData.phone_mobile,
|
||||
|
||||
birth_date: patientData.birth_date || null,
|
||||
sex: patientData.sex === 'Masculino' ? 'M' :
|
||||
patientData.sex === 'Feminino' ? 'F' :
|
||||
patientData.sex || null,
|
||||
patientData.sex === 'Feminino' ? 'F' :
|
||||
patientData.sex || null,
|
||||
social_name: patientData.social_name || null,
|
||||
rg: patientData.rg || null,
|
||||
blood_type: patientData.blood_type || null,
|
||||
@ -100,16 +86,31 @@ function PatientCadastroManager( {setCurrentPage} ) {
|
||||
height_m: patientData.height_m ? parseFloat(patientData.height_m) : null,
|
||||
bmi: patientData.bmi ? parseFloat(patientData.bmi) : null,
|
||||
notes: patientData.notes || null,
|
||||
mother_name: patientData.mother_name || null,
|
||||
father_name: patientData.father_name || null,
|
||||
guardian_name: patientData.guardian_name || null,
|
||||
guardian_cpf: patientData.guardian_cpf ? patientData.guardian_cpf.replace(/\D/g, '') : null,
|
||||
marital_status: patientData.marital_status || null,
|
||||
profession: patientData.profession || null,
|
||||
naturality: patientData.naturality || null,
|
||||
nationality: patientData.nationality || null,
|
||||
race: patientData.race || null,
|
||||
cep: patientData.cep || null,
|
||||
street: patientData.street || null,
|
||||
number: patientData.number || null,
|
||||
complement: patientData.complement || null,
|
||||
neighborhood: patientData.neighborhood || null,
|
||||
city: patientData.city || null,
|
||||
state: patientData.state || null,
|
||||
phone1: patientData.phone1 || null,
|
||||
phone2: patientData.phone2 || null
|
||||
};
|
||||
|
||||
console.log(' Dados limpos para envio:', cleanedData);
|
||||
|
||||
if (!cleanedData.full_name || !cleanedData.cpf || !cleanedData.email || !cleanedData.phone_mobile) {
|
||||
throw new Error('Dados obrigatórios faltando: nome, CPF, email e telefone são necessários');
|
||||
}
|
||||
|
||||
var raw = JSON.stringify(cleanedData);
|
||||
console.log(' Payload JSON:', raw);
|
||||
|
||||
var requestOptions = {
|
||||
method: 'POST',
|
||||
@ -118,29 +119,16 @@ function PatientCadastroManager( {setCurrentPage} ) {
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
console.log(' Fazendo requisição para API...');
|
||||
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions);
|
||||
|
||||
console.log(' Status da resposta:', response.status);
|
||||
console.log(' Response ok:', response.ok);
|
||||
|
||||
let responseData;
|
||||
try {
|
||||
responseData = await response.json();
|
||||
console.log(' Corpo da resposta:', responseData);
|
||||
} catch (jsonError) {
|
||||
console.log(' Não foi possível parsear JSON da resposta:', jsonError);
|
||||
responseData = { error: 'Resposta inválida da API' };
|
||||
}
|
||||
|
||||
|
||||
if (!response.ok) {
|
||||
console.error(' Erro da API - Detalhes:', {
|
||||
status: response.status,
|
||||
statusText: response.statusText,
|
||||
data: responseData
|
||||
});
|
||||
|
||||
let errorMessage = 'Erro ao salvar paciente';
|
||||
|
||||
if (response.status === 401) {
|
||||
@ -148,7 +136,7 @@ function PatientCadastroManager( {setCurrentPage} ) {
|
||||
} else if (response.status === 403) {
|
||||
errorMessage = 'Acesso proibido. Verifique suas permissões.';
|
||||
} else if (response.status === 409) {
|
||||
errorMessage = 'Paciente com este CPF já existe.';
|
||||
errorMessage = 'Já existe um paciente cadastrado com este CPF.';
|
||||
} else if (response.status === 400) {
|
||||
errorMessage = `Dados inválidos: ${responseData.details || responseData.message || 'Verifique os campos'}`;
|
||||
} else if (response.status === 422) {
|
||||
@ -162,23 +150,18 @@ function PatientCadastroManager( {setCurrentPage} ) {
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
|
||||
console.log(' Paciente salvo com sucesso:', responseData);
|
||||
|
||||
|
||||
setInfosModal({
|
||||
title: 'Sucesso',
|
||||
message: 'O cadastro do paciente foi realizado com sucesso.'
|
||||
});
|
||||
setShowModal(true);
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
setShowModal(false);
|
||||
navigate('/secretaria/pacientes');
|
||||
}, 2000);
|
||||
|
||||
} catch (error) {
|
||||
console.error(' Erro completo ao salvar paciente:', error);
|
||||
setInfosModal({
|
||||
title: 'Erro',
|
||||
message: error.message || 'Não foi possível conectar ao servidor. Verifique sua internet e tente novamente.'
|
||||
@ -192,76 +175,30 @@ function PatientCadastroManager( {setCurrentPage} ) {
|
||||
return (
|
||||
<>
|
||||
<div className="page-heading">
|
||||
{showModal &&(
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
zIndex: 9999,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: "10px",
|
||||
width: "400px",
|
||||
maxWidth: "90%",
|
||||
boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: infosModal.title === 'Sucesso' ? "#28a745" : "#dc3545",
|
||||
padding: "15px 20px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>{infosModal.title}</h5>
|
||||
{showModal && (
|
||||
<div className="modal-overlay fade-in">
|
||||
<div className="modal-content slide-in">
|
||||
<div className={`modal-header ${infosModal.title === 'Sucesso' ? 'success' : 'error'}`}>
|
||||
<h5>{infosModal.title}</h5>
|
||||
<button
|
||||
onClick={() => setShowModal(false)}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
fontSize: "20px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
className="modal-close-button"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div style={{ padding: "25px 20px" }}>
|
||||
<p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>
|
||||
<div className="modal-body">
|
||||
<p className="modal-message">
|
||||
{infosModal.message}
|
||||
</p>
|
||||
{infosModal.title === 'Erro' && (
|
||||
<p style={{ color: "#666", fontSize: "0.9rem", margin: "10px 0 0 0" }}>
|
||||
<p className="modal-submessage">
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
padding: "15px 20px",
|
||||
borderTop: "1px solid #ddd",
|
||||
}}
|
||||
>
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowModal(false);
|
||||
@ -269,16 +206,7 @@ function PatientCadastroManager( {setCurrentPage} ) {
|
||||
navigate('/secretaria/pacientes');
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: "#1e3a8a",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
padding: "8px 20px",
|
||||
borderRadius: "6px",
|
||||
cursor: "pointer",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
className={`modal-confirm-button ${infosModal.title === 'Sucesso' ? 'success' : 'error'}`}
|
||||
>
|
||||
Fechar
|
||||
</button>
|
||||
|
||||
281
src/pages/style/DoctorCadastroManager.css
Normal file
281
src/pages/style/DoctorCadastroManager.css
Normal file
@ -0,0 +1,281 @@
|
||||
/* Estilos do modal */
|
||||
.modal-overlay {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
width: 400px;
|
||||
max-width: 90%;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
animation: modal-appear 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes modal-appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9) translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-header-success {
|
||||
background-color: #28a745 !important;
|
||||
}
|
||||
|
||||
.modal-header-error {
|
||||
background-color: #dc3545 !important;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-close-button {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-close-button:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 25px 20px;
|
||||
}
|
||||
|
||||
.modal-message {
|
||||
color: #111;
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 15px 20px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.modal-button {
|
||||
border: none;
|
||||
padding: 8px 20px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.modal-button-success {
|
||||
background-color: #28a745;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.modal-button-success:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
.modal-button-error {
|
||||
background-color: #dc3545;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.modal-button-error:hover {
|
||||
background-color: #c82333;
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
margin-bottom: 2rem;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
.page-heading h3 {
|
||||
color: #333;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.page-content section {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page-content .row {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page-content .col-12 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9998;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #3498db;
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.modal-close-button:focus,
|
||||
.modal-button:focus {
|
||||
outline: 2px solid #0056b3;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Garantir que as cores dos cabeçalhos sejam aplicadas */
|
||||
.modal-overlay .modal-container .modal-header.modal-header-success {
|
||||
background-color: #28a745 !important;
|
||||
}
|
||||
|
||||
.modal-overlay .modal-container .modal-header.modal-header-error {
|
||||
background-color: #dc3545 !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.modal-container {
|
||||
width: 95%;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.modal-message {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.page-heading h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 1.5rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.modal-header {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 1rem;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
.page-heading h3 {
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-contrast: high) {
|
||||
.modal-container {
|
||||
border: 2px solid #000;
|
||||
}
|
||||
|
||||
.modal-header-success {
|
||||
background-color: #006400 !important;
|
||||
}
|
||||
|
||||
.modal-header-error {
|
||||
background-color: #8b0000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.modal-container {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.modal-button:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
animation-duration: 2s;
|
||||
}
|
||||
}
|
||||
278
src/pages/style/PatientCadastroManager.css
Normal file
278
src/pages/style/PatientCadastroManager.css
Normal file
@ -0,0 +1,278 @@
|
||||
.page-heading {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.page-heading h3 {
|
||||
color: #1e3a8a;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background-color: #d1ecf1;
|
||||
border-color: #bee5eb;
|
||||
color: #0c5460;
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-radius: 0.375rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.spinner-border-sm {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-width: 0.15em;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.75rem;
|
||||
margin-left: -0.75rem;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
padding-right: 0.75rem;
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
/* Estilos do modal */
|
||||
.modal-overlay {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
width: 400px;
|
||||
max-width: 90%;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
animation: modal-appear 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes modal-appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: #1e3a8a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-header.success {
|
||||
background-color: #28a745 !important;
|
||||
}
|
||||
|
||||
.modal-header.error {
|
||||
background-color: #dc3545 !important;
|
||||
}
|
||||
|
||||
.modal-header h5 {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-close-button {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.modal-close-button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 25px 20px;
|
||||
}
|
||||
|
||||
.modal-message {
|
||||
color: #111;
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.modal-submessage {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
margin: 10px 0 0 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 15px 20px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.modal-confirm-button {
|
||||
background-color: #1e3a8a;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 8px 20px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.modal-confirm-button:hover {
|
||||
background-color: #1e40a5;
|
||||
}
|
||||
|
||||
.modal-confirm-button.success {
|
||||
background-color: #28a745 !important;
|
||||
}
|
||||
|
||||
.modal-confirm-button.success:hover {
|
||||
background-color: #218838 !important;
|
||||
}
|
||||
|
||||
.modal-confirm-button.error {
|
||||
background-color: #dc3545 !important;
|
||||
}
|
||||
|
||||
.modal-confirm-button.error:hover {
|
||||
background-color: #c82333 !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-heading {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.page-heading h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 95%;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.modal-message {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.page-heading h3 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.modal-header h5 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.modal-confirm-button {
|
||||
padding: 6px 16px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.3s ease-in;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-in {
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateY(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.loading-state::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
z-index: 10;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user