Merge branch 'main' into ExcecoesFinal

This commit is contained in:
pedrofedericoo 2025-10-15 21:07:54 -03:00
commit d08aec9363
8 changed files with 523 additions and 1260 deletions

View File

@ -9,7 +9,7 @@ import LandingPage from './pages/LandingPage';
import PerfilFinanceiro from "./perfis/perfil_financeiro/PerfilFinanceiro"; import PerfilFinanceiro from "./perfis/perfil_financeiro/PerfilFinanceiro";
import Perfiladm from "./perfis/Perfil_adm/Perfiladm"; import Perfiladm from "./perfis/Perfil_adm/Perfiladm";
import PerfilMedico from "./perfis/Perfil_medico/PerfilMedico"; import PerfilMedico from "./perfis/Perfil_medico/PerfilMedico";
import PerfilPaciente from "./perfis/Perfil_paciente/Perfilpaciente"
// Componentes globais de acessibilidade // Componentes globais de acessibilidade
import VlibrasWidget from "./components/VlibrasWidget"; import VlibrasWidget from "./components/VlibrasWidget";
@ -30,6 +30,7 @@ function App() {
<Route path="/financeiro/*" element={<PerfilFinanceiro />} /> <Route path="/financeiro/*" element={<PerfilFinanceiro />} />
<Route path="/medico/*" element={<PerfilMedico />} /> <Route path="/medico/*" element={<PerfilMedico />} />
<Route path="/admin/*" element={<Perfiladm />} /> <Route path="/admin/*" element={<Perfiladm />} />
<Route path="/paciente/*" element={<PerfilPaciente />} />
<Route path="*" element={<h2>Página não encontrada</h2>} /> <Route path="*" element={<h2>Página não encontrada</h2>} />
</Routes> </Routes>
</Router> </Router>

File diff suppressed because it is too large Load Diff

View File

@ -33,6 +33,7 @@ const TrocardePerfis = () => {
{ key: "medico", label: "Médico", route: "/medico" }, { key: "medico", label: "Médico", route: "/medico" },
{ key: "financeiro", label: "Financeiro", route: "/financeiro" }, { key: "financeiro", label: "Financeiro", route: "/financeiro" },
{ key: "admin", label: "Administração", route: "/admin" }, { key: "admin", label: "Administração", route: "/admin" },
{ key: "paciente", label: "Paciente", route: "/paciente" },
].filter( ].filter(
(opt) => (opt) =>
showProfiles?.includes(opt.key) || showProfiles?.includes("admin") showProfiles?.includes(opt.key) || showProfiles?.includes("admin")

View File

@ -1,35 +1,37 @@
import React, { useState, useRef } from "react"; import React, { useState, useRef } from 'react';
import { Link, useNavigate, useLocation } from "react-router-dom"; import { Link, useNavigate, useLocation } from 'react-router-dom';
function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) { function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
const FormatTelefones = (valor) => { const FormatTelefones = (valor) => {
const digits = String(valor).replace(/\D/g, "").slice(0, 11); const digits = String(valor).replace(/\D/g, '').slice(0, 11);
return digits return digits
.replace(/(\d)/, "($1") .replace(/(\d)/, '($1')
.replace(/(\d{2})(\d)/, "$1) $2") .replace(/(\d{2})(\d)/, '$1) $2')
.replace(/(\d)(\d{4})/, "$1 $2") .replace(/(\d)(\d{4})/, '$1 $2')
.replace(/(\d{4})(\d{4})/, "$1-$2"); .replace(/(\d{4})(\d{4})/, '$1-$2');
}; };
const FormatCPF = (valor) => { const FormatCPF = (valor) => {
const digits = String(valor).replace(/\D/g, "").slice(0, 11); const digits = String(valor).replace(/\D/g, '').slice(0, 11);
return digits return digits
.replace(/(\d{3})(\d)/, "$1.$2") .replace(/(\d{3})(\d)/, '$1.$2')
.replace(/(\d{3})(\d)/, "$1.$2") .replace(/(\d{3})(\d)/, '$1.$2')
.replace(/(\d{3})(\d{1,2})$/, "$1-$2"); .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
}; };
const validarCPF = (cpf) => { const validarCPF = (cpf) => {
const cpfLimpo = cpf.replace(/\D/g, ""); const cpfLimpo = cpf.replace(/\D/g, '');
if (cpfLimpo.length !== 11) return false; if (cpfLimpo.length !== 11) return false;
if (/^(\d)\1+$/.test(cpfLimpo)) return false; if (/^(\d)\1+$/.test(cpfLimpo)) return false;
let soma = 0; let soma = 0;
for (let i = 0; i < 9; i++) { for (let i = 0; i < 9; i++) {
soma += parseInt(cpfLimpo.charAt(i)) * (10 - i); soma += parseInt(cpfLimpo.charAt(i)) * (10 - i);
@ -45,16 +47,14 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
resto = 11 - (soma % 11); resto = 11 - (soma % 11);
let digito2 = resto === 10 || resto === 11 ? 0 : resto; let digito2 = resto === 10 || resto === 11 ? 0 : resto;
return (
digito1 === parseInt(cpfLimpo.charAt(9)) && return digito1 === parseInt(cpfLimpo.charAt(9)) && digito2 === parseInt(cpfLimpo.charAt(10));
digito2 === parseInt(cpfLimpo.charAt(10))
);
}; };
const [avatarUrl, setAvatarUrl] = useState(null); const [avatarUrl, setAvatarUrl] = useState(null);
const [showRequiredModal, setShowRequiredModal] = useState(false); const [showRequiredModal, setShowRequiredModal] = useState(false);
const [emptyFields, setEmptyFields] = useState([]); const [emptyFields, setEmptyFields] = useState([]);
const [cpfError, setCpfError] = useState(""); const [cpfError, setCpfError] = useState('');
const nomeRef = useRef(null); const nomeRef = useRef(null);
const cpfRef = useRef(null); const cpfRef = useRef(null);
@ -70,59 +70,63 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
}); });
const handleToggleCollapse = (section) => { const handleToggleCollapse = (section) => {
setCollapsedSections((prevState) => ({ setCollapsedSections(prevState => ({
...prevState, ...prevState,
[section]: !prevState[section], [section]: !prevState[section]
})); }));
}; };
const handleChange = (e) => { const handleChange = (e) => {
const { name, value, type, checked, files } = e.target; const { name, value, type, checked, files } = e.target;
if (value && emptyFields.includes(name)) { if (value && emptyFields.includes(name)) {
setEmptyFields((prev) => prev.filter((field) => field !== name)); setEmptyFields(prev => prev.filter(field => field !== name));
} }
if (name === "cpf" && cpfError) {
setCpfError(""); if (name === 'cpf' && cpfError) {
setCpfError('');
} }
if (type === "checkbox") { if (type === 'checkbox') {
setFormData((prev) => ({ ...prev, [name]: checked })); setFormData(prev => ({ ...prev, [name]: checked }));
} else if (type === "file") { } else if (type === 'file') {
setFormData((prev) => ({ ...prev, [name]: files[0] })); setFormData(prev => ({ ...prev, [name]: files[0] }));
if (name === "foto" && files[0]) { if (name === 'foto' && files[0]) {
const reader = new FileReader(); const reader = new FileReader();
reader.onloadend = () => { reader.onloadend = () => {
setAvatarUrl(reader.result); setAvatarUrl(reader.result);
}; };
reader.readAsDataURL(files[0]); reader.readAsDataURL(files[0]);
} else if (name === "foto" && !files[0]) { } else if (name === 'foto' && !files[0]) {
setAvatarUrl(null); setAvatarUrl(null);
} }
} else if (name.includes("cpf")) {
let cpfFormatado = FormatCPF(value);
setFormData((prev) => ({ ...prev, [name]: cpfFormatado }));
const cpfLimpo = cpfFormatado.replace(/\D/g, ""); } else if (name.includes('cpf')) {
let cpfFormatado = FormatCPF(value);
setFormData(prev => ({ ...prev, [name]: cpfFormatado }));
const cpfLimpo = cpfFormatado.replace(/\D/g, '');
if (cpfLimpo.length === 11) { if (cpfLimpo.length === 11) {
if (!validarCPF(cpfFormatado)) { if (!validarCPF(cpfFormatado)) {
setCpfError("CPF inválido"); setCpfError('CPF inválido');
} else { } else {
setCpfError(""); setCpfError('');
} }
} }
} else if (name.includes("phone")) { } else if (name.includes('phone')) {
let telefoneFormatado = FormatTelefones(value); let telefoneFormatado = FormatTelefones(value);
setFormData((prev) => ({ ...prev, [name]: telefoneFormatado })); setFormData(prev => ({ ...prev, [name]: telefoneFormatado }));
} else { } else {
setFormData((prev) => ({ ...prev, [name]: value })); setFormData(prev => ({ ...prev, [name]: value }));
} }
}; };
const handleCepBlur = async () => { const handleCepBlur = async () => {
const cep = formData.cep?.replace(/\D/g, ""); const cep = formData.cep?.replace(/\D/g, '');
if (cep && cep.length === 8) { if (cep && cep.length === 8) {
try { try {
const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`); const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
@ -130,49 +134,50 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
if (!data.erro) { if (!data.erro) {
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
street: data.logradouro || "", street: data.logradouro || '',
neighborhood: data.bairro || "", neighborhood: data.bairro || '',
city: data.localidade || "", city: data.localidade || '',
state: data.uf || "", state: data.uf || ''
})); }));
} else { } else {
setShowRequiredModal(true); setShowRequiredModal(true);
setEmptyFields(["cep"]); setEmptyFields(['cep']);
} }
} catch (error) { } catch (error) {
setShowRequiredModal(true); setShowRequiredModal(true);
setEmptyFields(["cep"]); setEmptyFields(['cep']);
} }
} }
}; };
const scrollToEmptyField = (fieldName) => { const scrollToEmptyField = (fieldName) => {
let fieldRef = null; let fieldRef = null;
switch (fieldName) { switch (fieldName) {
case "full_name": case 'full_name':
fieldRef = nomeRef; fieldRef = nomeRef;
setCollapsedSections((prev) => ({ ...prev, dadosPessoais: true })); setCollapsedSections(prev => ({ ...prev, dadosPessoais: true }));
break; break;
case "cpf": case 'cpf':
fieldRef = cpfRef; fieldRef = cpfRef;
setCollapsedSections((prev) => ({ ...prev, dadosPessoais: true })); setCollapsedSections(prev => ({ ...prev, dadosPessoais: true }));
break; break;
case "email": case 'email':
fieldRef = emailRef; fieldRef = emailRef;
setCollapsedSections((prev) => ({ ...prev, contato: true })); setCollapsedSections(prev => ({ ...prev, contato: true }));
break; break;
case "phone_mobile": case 'phone_mobile':
fieldRef = telefoneRef; fieldRef = telefoneRef;
setCollapsedSections((prev) => ({ ...prev, contato: true })); setCollapsedSections(prev => ({ ...prev, contato: true }));
break; break;
case "crm_uf": case 'crm_uf':
fieldRef = crmUfRef; fieldRef = crmUfRef;
setCollapsedSections((prev) => ({ ...prev, dadosPessoais: true })); setCollapsedSections(prev => ({ ...prev, dadosPessoais: true }));
break; break;
case "crm": case 'crm':
fieldRef = crmRef; fieldRef = crmRef;
setCollapsedSections((prev) => ({ ...prev, dadosPessoais: true })); setCollapsedSections(prev => ({ ...prev, dadosPessoais: true }));
break; break;
default: default:
return; return;
@ -182,19 +187,20 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
setTimeout(() => { setTimeout(() => {
if (fieldRef.current) { if (fieldRef.current) {
fieldRef.current.scrollIntoView({ fieldRef.current.scrollIntoView({
behavior: "smooth", behavior: 'smooth',
block: "center", block: 'center'
}); });
fieldRef.current.focus(); fieldRef.current.focus();
fieldRef.current.style.border = "2px solid #dc3545";
fieldRef.current.style.boxShadow = fieldRef.current.style.border = '2px solid #dc3545';
"0 0 0 0.2rem rgba(220, 53, 69, 0.25)"; fieldRef.current.style.boxShadow = '0 0 0 0.2rem rgba(220, 53, 69, 0.25)';
setTimeout(() => { setTimeout(() => {
if (fieldRef.current) { if (fieldRef.current) {
fieldRef.current.style.border = ""; fieldRef.current.style.border = '';
fieldRef.current.style.boxShadow = ""; fieldRef.current.style.boxShadow = '';
} }
}, 3000); }, 3000);
} }
@ -204,17 +210,18 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
const handleSubmit = async () => { const handleSubmit = async () => {
const missingFields = []; const missingFields = [];
if (!formData.full_name) missingFields.push("full_name"); if (!formData.full_name) missingFields.push('full_name');
if (!formData.cpf) missingFields.push("cpf"); if (!formData.cpf) missingFields.push('cpf');
if (!formData.email) missingFields.push("email"); if (!formData.email) missingFields.push('email');
if (!formData.phone_mobile) missingFields.push("phone_mobile"); if (!formData.phone_mobile) missingFields.push('phone_mobile');
if (!formData.crm_uf) missingFields.push("crm_uf"); if (!formData.crm_uf) missingFields.push('crm_uf');
if (!formData.crm) missingFields.push("crm"); if (!formData.crm) missingFields.push('crm');
if (missingFields.length > 0) { if (missingFields.length > 0) {
setEmptyFields(missingFields); setEmptyFields(missingFields);
setShowRequiredModal(true); setShowRequiredModal(true);
setTimeout(() => { setTimeout(() => {
if (missingFields.length > 0) { if (missingFields.length > 0) {
scrollToEmptyField(missingFields[0]); scrollToEmptyField(missingFields[0]);
@ -223,23 +230,26 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
return; return;
} }
const cpfLimpo = formData.cpf.replace(/\D/g, "");
const cpfLimpo = formData.cpf.replace(/\D/g, '');
if (cpfLimpo.length !== 11) { if (cpfLimpo.length !== 11) {
setShowRequiredModal(true); setShowRequiredModal(true);
setEmptyFields(["cpf"]); setEmptyFields(['cpf']);
setCpfError("CPF deve ter 11 dígitos"); setCpfError('CPF deve ter 11 dígitos');
setTimeout(() => scrollToEmptyField("cpf"), 500); setTimeout(() => scrollToEmptyField('cpf'), 500);
return; return;
} }
if (!validarCPF(formData.cpf)) { if (!validarCPF(formData.cpf)) {
setShowRequiredModal(true); setShowRequiredModal(true);
setEmptyFields(["cpf"]); setEmptyFields(['cpf']);
setCpfError("CPF inválido"); setCpfError('CPF inválido');
setTimeout(() => scrollToEmptyField("cpf"), 500); setTimeout(() => scrollToEmptyField('cpf'), 500);
return; return;
} }
try { try {
await onSave({ ...formData }); await onSave({ ...formData });
@ -290,16 +300,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
alignItems: "center", alignItems: "center",
}} }}
> >
<h5 <h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Atenção</h5>
style={{
color: "#fff",
margin: 0,
fontSize: "1.2rem",
fontWeight: "bold",
}}
>
Atenção
</h5>
<button <button
onClick={handleModalClose} onClick={handleModalClose}
style={{ style={{
@ -315,109 +316,20 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
</div> </div>
<div style={{ padding: "25px 20px" }}> <div style={{ padding: "25px 20px" }}>
<p <p style={{ color: "#111", fontSize: "1.1rem", margin: "0 0 15px 0", fontWeight: "bold" }}>
style={{ {cpfError ? 'Problema com o CPF:' : 'Por favor, preencha:'}
color: "#111",
fontSize: "1.1rem",
margin: "0 0 15px 0",
fontWeight: "bold",
}}
>
{cpfError ? "Problema com o CPF:" : "Por favor, preencha:"}
</p> </p>
<div <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginLeft: '10px' }}>
style={{
display: "flex",
flexDirection: "column",
gap: "8px",
marginLeft: "10px",
}}
>
{cpfError ? ( {cpfError ? (
<p <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>{cpfError}</p>
style={{
color: "#111",
fontSize: "1.1rem",
margin: 0,
fontWeight: "600",
}}
>
{cpfError}
</p>
) : ( ) : (
<> <>
{!formData.full_name && ( {!formData.full_name && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Nome</p>}
<p {!formData.cpf && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- CPF</p>}
style={{ {!formData.email && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Email</p>}
color: "#111", {!formData.phone_mobile && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Telefone</p>}
fontSize: "1.1rem", {!formData.crm_uf && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Estado do CRM</p>}
margin: 0, {!formData.crm && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- CRM</p>}
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>
)}
</> </>
)} )}
</div> </div>
@ -452,26 +364,18 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
)} )}
<div className="card p-3 shadow-sm"> <div className="card p-3 shadow-sm">
<h3 className="mb-4 text-center" style={{ fontSize: "2.5rem" }}> <h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
MediConnect
</h3>
<div className="mb-5 p-4 border rounded shadow-sm"> <div className="mb-5 p-4 border rounded shadow-sm">
<h4 <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('dadosPessoais')}
onClick={() => handleToggleCollapse("dadosPessoais")} style={{ fontSize: '1.8rem' }}>
style={{ fontSize: "1.8rem" }}
>
Dados Pessoais Dados Pessoais
<span className="fs-5"> <span className="fs-5">
{collapsedSections.dadosPessoais ? "▲" : "▼"} {collapsedSections.dadosPessoais ? '▲' : '▼'}
</span> </span>
</h4> </h4>
<div <div className={`collapse${collapsedSections.dadosPessoais ? ' show' : ''}`}>
className={`collapse${
collapsedSections.dadosPessoais ? " show" : ""
}`}
>
<div className="row mt-3"> <div className="row mt-3">
<div className="col-md-6 mb-3 d-flex align-items-center"> <div className="col-md-6 mb-3 d-flex align-items-center">
<div className="me-3"> <div className="me-3">
@ -479,25 +383,20 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
<img <img
src={avatarUrl} src={avatarUrl}
alt="Avatar do Médico" alt="Avatar do Médico"
style={{ style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover' }}
width: "100px",
height: "100px",
borderRadius: "50%",
objectFit: "cover",
}}
/> />
) : ( ) : (
<div <div
style={{ style={{
width: "100px", width: '100px',
height: "100px", height: '100px',
borderRadius: "50%", borderRadius: '50%',
backgroundColor: "#e0e0e0", backgroundColor: '#e0e0e0',
display: "flex", display: 'flex',
alignItems: "center", alignItems: 'center',
justifyContent: "center", justifyContent: 'center',
fontSize: "3.5rem", fontSize: '3.5rem',
color: "#9e9e9e", color: '#9e9e9e'
}} }}
> >
&#x2624; &#x2624;
@ -505,13 +404,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
)} )}
</div> </div>
<div> <div>
<label <label htmlFor="foto-input" className="btn btn-primary" style={{ fontSize: '1rem' }}>Carregar Foto</label>
htmlFor="foto-input"
className="btn btn-primary"
style={{ fontSize: "1rem" }}
>
Carregar Foto
</label>
<input <input
type="file" type="file"
className="form-control d-none" className="form-control d-none"
@ -520,66 +413,49 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
onChange={handleChange} onChange={handleChange}
accept="image/*" accept="image/*"
/> />
{formData.foto && ( {formData.foto && <span className="ms-2" style={{ fontSize: '1rem' }}>{formData.foto.name}</span>}
<span className="ms-2" style={{ fontSize: "1rem" }}>
{formData.foto.name}
</span>
)}
</div> </div>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: "1.1rem" }}>Nome: *</label> <label style={{ fontSize: '1.1rem' }}>Nome: *</label>
<input <input
ref={nomeRef} ref={nomeRef}
type="text" type="text"
className="form-control" className="form-control"
name="full_name" name="full_name"
value={formData.full_name || ""} value={formData.full_name || ''}
onChange={handleChange} onChange={handleChange}
/> />
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: "1.1rem" }}> <label style={{ fontSize: '1.1rem' }}>Data de nascimento:</label>
Data de nascimento: <input type="date" className="form-control" name="birth_date" value={formData.birth_date || ''} onChange={handleChange} min="1900-01-01" max="2025-09-24" />
</label>
<input
type="date"
className="form-control"
name="birth_date"
value={formData.birth_date || ""}
onChange={handleChange}
min="1900-01-01"
max="2025-09-24"
/>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: "1.1rem" }}>CPF: *</label> <label style={{ fontSize: '1.1rem' }}>CPF: *</label>
<input <input
ref={cpfRef} ref={cpfRef}
type="text" type="text"
className={`form-control ${cpfError ? "is-invalid" : ""}`} className={`form-control ${cpfError ? 'is-invalid' : ''}`}
name="cpf" name="cpf"
value={formData.cpf || ""} value={formData.cpf || ''}
onChange={handleChange} onChange={handleChange}
/> />
{cpfError && ( {cpfError && (
<div <div className="invalid-feedback" style={{ display: 'block' }}>
className="invalid-feedback"
style={{ display: "block" }}
>
{cpfError} {cpfError}
</div> </div>
)} )}
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: "1.1rem" }}>Estado do CRM: *</label> <label style={{ fontSize: '1.1rem' }}>Estado do CRM: *</label>
<select <select
ref={crmUfRef} ref={crmUfRef}
className="form-control" className="form-control"
name="crm_uf" name="crm_uf"
value={formData.crm_uf || ""} value={formData.crm_uf || ''}
onChange={handleChange} onChange={handleChange}
> >
<option value="">Selecione</option> <option value="">Selecione</option>
@ -613,37 +489,28 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: "1.1rem" }}>CRM: *</label> <label style={{ fontSize: '1.1rem' }}>CRM: *</label>
<input <input
ref={crmRef} ref={crmRef}
type="text" type="text"
className="form-control" className="form-control"
name="crm" name="crm"
value={formData.crm || ""} value={formData.crm || ''}
onChange={handleChange} onChange={handleChange}
/> />
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: "1.1rem" }}>Especialização:</label> <label style={{ fontSize: '1.1rem' }}>Especialização:</label>
<select <select className="form-control" name="specialty" value={formData.specialty || ''} onChange={handleChange}>
className="form-control"
name="specialty"
value={formData.specialty || ""}
onChange={handleChange}
>
<option value="">Selecione</option> <option value="">Selecione</option>
<option value="Clínica Geral"> <option value="Clínica Geral">Clínica médica (clínico geral)</option>
Clínica médica (clínico geral)
</option>
<option value="Pediatria">Pediatria</option> <option value="Pediatria">Pediatria</option>
<option value="Ginecologia">Ginecologia e obstetrícia</option> <option value="Ginecologia">Ginecologia e obstetrícia</option>
<option value="Cardiologia">Cardiologia</option> <option value="Cardiologia">Cardiologia</option>
<option value="Ortopedia">Ortopedia e traumatologia</option> <option value="Ortopedia">Ortopedia e traumatologia</option>
<option value="Oftalmologia">Oftalmologia</option> <option value="Oftalmologia">Oftalmologia</option>
<option value="Otorrinolaringologia"> <option value="Otorrinolaringologia">Otorrinolaringologia</option>
Otorrinolaringologia
</option>
<option value="Dermatologia">Dermatologia</option> <option value="Dermatologia">Dermatologia</option>
<option value="Neurologia">Neurologia</option> <option value="Neurologia">Neurologia</option>
<option value="Psiquiatria">Psiquiatria</option> <option value="Psiquiatria">Psiquiatria</option>
@ -657,187 +524,103 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
</div> </div>
<div className="mb-5 p-4 border rounded shadow-sm"> <div className="mb-5 p-4 border rounded shadow-sm">
<h4 <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('contato')}
onClick={() => handleToggleCollapse("contato")} style={{ fontSize: '1.8rem' }}>
style={{ fontSize: "1.8rem" }}
>
Contato Contato
<span className="fs-5"> <span className="fs-5">
{collapsedSections.contato ? "▲" : "▼"} {collapsedSections.contato ? '▲' : '▼'}
</span> </span>
</h4> </h4>
<div <div className={`collapse${collapsedSections.contato ? ' show' : ''}`}>
className={`collapse${collapsedSections.contato ? " show" : ""}`}
>
<div className="row mt-3"> <div className="row mt-3">
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: "1.1rem" }}>Email: *</label> <label style={{ fontSize: '1.1rem' }}>Email: *</label>
<input <input
ref={emailRef} ref={emailRef}
type="email" type="email"
className="form-control" className="form-control"
name="email" name="email"
value={formData.email || ""} value={formData.email || ''}
onChange={handleChange} onChange={handleChange}
/> />
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: "1.1rem" }}>Telefone: *</label> <label style={{ fontSize: '1.1rem' }}>Telefone: *</label>
<input <input
ref={telefoneRef} ref={telefoneRef}
type="text" type="text"
className="form-control" className="form-control"
name="phone_mobile" name="phone_mobile"
value={formData.phone_mobile || ""} value={formData.phone_mobile || ''}
onChange={handleChange} onChange={handleChange}
/> />
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: "1.1rem" }}>Telefone 2:</label> <label style={{ fontSize: '1.1rem' }}>Telefone 2:</label>
<input <input type="text" className="form-control" name="phone2" value={formData.phone2 || ''} onChange={handleChange} />
type="text"
className="form-control"
name="phone2"
value={formData.phone2 || ""}
onChange={handleChange}
/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="mb-5 p-4 border rounded shadow-sm"> <div className="mb-5 p-4 border rounded shadow-sm">
<h4 <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('endereco')}
onClick={() => handleToggleCollapse("endereco")} style={{ fontSize: '1.8rem' }}>
style={{ fontSize: "1.8rem" }}
>
Endereço Endereço
<span className="fs-5"> <span className="fs-5">
{collapsedSections.endereco ? "▲" : "▼"} {collapsedSections.endereco ? '▲' : '▼'}
</span> </span>
</h4> </h4>
<div <div className={`collapse${collapsedSections.endereco ? ' show' : ''}`}>
className={`collapse${collapsedSections.endereco ? " show" : ""}`}
>
<div className="row mt-3"> <div className="row mt-3">
<div className="col-md-4 mb-3"> <div className="col-md-4 mb-3">
<label>CEP:</label> <label>CEP:</label>
<input <input type="text" className="form-control" name="cep" value={formData.cep || ''} onChange={handleChange} onBlur={handleCepBlur} />
type="text"
className="form-control"
name="cep"
value={formData.cep || ""}
onChange={handleChange}
onBlur={handleCepBlur}
/>
</div> </div>
<div className="col-md-8 mb-3"> <div className="col-md-8 mb-3">
<label>Rua:</label> <label>Rua:</label>
<input <input type="text" className="form-control" name="street" value={formData.street || ''} onChange={handleChange} />
type="text"
className="form-control"
name="street"
value={formData.street || ""}
onChange={handleChange}
/>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label>Bairro:</label> <label>Bairro:</label>
<input <input type="text" className="form-control" name="neighborhood" value={formData.neighborhood || ''} onChange={handleChange} />
type="text"
className="form-control"
name="neighborhood"
value={formData.neighborhood || ""}
onChange={handleChange}
/>
</div> </div>
<div className="col-md-4 mb-3"> <div className="col-md-4 mb-3">
<label>Cidade:</label> <label>Cidade:</label>
<input <input type="text" className="form-control" name="city" value={formData.city || ''} onChange={handleChange} />
type="text"
className="form-control"
name="city"
value={formData.city || ""}
onChange={handleChange}
/>
</div> </div>
<div className="col-md-2 mb-3"> <div className="col-md-2 mb-3">
<label>Estado:</label> <label>Estado:</label>
<input <input type="text" className="form-control" name="state" value={formData.state || ''} onChange={handleChange} />
type="text"
className="form-control"
name="state"
value={formData.state || ""}
onChange={handleChange}
/>
</div> </div>
<div className="col-md-4 mb-3"> <div className="col-md-4 mb-3">
<label>Número:</label> <label>Número:</label>
<input <input type="text" className="form-control" name="number" value={formData.number || ''} onChange={handleChange} />
type="text"
className="form-control"
name="number"
value={formData.number || ""}
onChange={handleChange}
/>
</div> </div>
<div className="col-md-8 mb-3"> <div className="col-md-8 mb-3">
<label>Complemento:</label> <label>Complemento:</label>
<input <input type="text" className="form-control" name="complement" value={formData.complement || ''} onChange={handleChange} />
type="text"
className="form-control"
name="complement"
value={formData.complement || ""}
onChange={handleChange}
/>
</div> </div>
</div> </div>
</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("disponibilidade")}
style={{ fontSize: "1.8rem" }}
>
Disponibilidade Semanal
<span className="fs-5">
{collapsedSections.disponibilidade ? "▲" : "▼"}
</span>
</h4>
<div
className={`collapse${
collapsedSections.disponibilidade ? " show" : ""
}`}
>
<WeeklyAvailabilityPicker
initialAvailability={formData.availability || {}}
onChange={(newAvailability) => {
setFormData((prev) => ({
...prev,
availability: newAvailability,
}));
}}
/>
</div>
</div>
<div className="mt-3 text-center"> <div className="mt-3 text-center">
<button <button
className="btn btn-success me-3" className="btn btn-success me-3"
onClick={handleSubmit} onClick={handleSubmit}
disabled={isLoading} disabled={isLoading}
style={{ fontSize: "1.2rem", padding: "0.75rem 1.5rem" }} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}
> >
{isLoading ? "Salvando..." : "Salvar Médico"} {isLoading ? 'Salvando...' : 'Salvar Médico'}
</button> </button>
<Link to={`/${location.pathname.split("/")[1]}/medicos`}> <Link to={`/${location.pathname.split("/")[1]}/medicos`}>
<button <button
className="btn btn-light" className="btn btn-light"
style={{ fontSize: "1.2rem", padding: "0.75rem 1.5rem" }} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}
> >
Cancelar Cancelar
</button> </button>
@ -848,79 +631,4 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
); );
} }
function WeeklyAvailabilityPicker() {
const days = ["Seg", "Ter", "Qua", "Qui", "Sex", "Sáb", "Dom"];
const [availability, setAvailability] = useState(
days.reduce((acc, day) => ({ ...acc, [day]: [] }), {})
);
const handleAddInterval = (day) => {
const newIntervals = [...availability[day], { start: "", end: "" }];
const newAvailability = { ...availability, [day]: newIntervals };
setAvailability(newAvailability);
};
const handleRemoveInterval = (day, index) => {
const newIntervals = availability[day].filter((_, i) => i !== index);
setAvailability({ ...availability, [day]: newIntervals });
};
const handleTimeChange = (day, index, field, value) => {
const newIntervals = availability[day].map((interval, i) =>
i === index ? { ...interval, [field]: value } : interval
);
setAvailability({ ...availability, [day]: newIntervals });
};
const handleSave = () => {
const data = [];
for (const [day, intervals] of Object.entries(availability)) {
intervals.forEach(({ start, end }) => {
const dayIndex = days.indexOf(day);
data.push({ day: dayIndex, start, end });
});
}
fetch("https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data),
})
.then((res) => res.json())
.then((res) => console.log("Salvo:", res))
.catch((err) => console.error("Erro:", err));
};
return (
<div>
{days.map((day) => (
<div key={day} style={{ marginBottom: "20px" }}>
<h5>{day}</h5>
{availability[day].map((interval, index) => (
<div
key={index}
style={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: "5px" }}
>
<input
type="time"
value={interval.start}
onChange={(e) => handleTimeChange(day, index, "start", e.target.value)}
/>
<span>até</span>
<input
type="time"
value={interval.end}
onChange={(e) => handleTimeChange(day, index, "end", e.target.value)}
/>
<button onClick={() => handleRemoveInterval(day, index)}>Remover</button>
</div>
))}
<button onClick={() => handleAddInterval(day)}>Adicionar intervalo</button>
</div>
))}
<button onClick={handleSave}>Salvar Disponibilidade</button>
</div>
);
}
export default DoctorForm; export default DoctorForm;

View File

@ -0,0 +1,13 @@
[
{
"name": "Minhas consulta",
"icon": "calendar-plus-fill",
"url": "/paciente/agendamento"
},
{
"name": "Meus laudos",
"icon": "table",
"url": "/paciente/laudo"
}
]

View File

@ -44,7 +44,6 @@ function DoctorCadastroManager() {
number: doctorData.number || null, number: doctorData.number || null,
complement: doctorData.complement || null, complement: doctorData.complement || null,
phone2: doctorData.phone2 ? doctorData.phone2.replace(/\D/g, '') : null, phone2: doctorData.phone2 ? doctorData.phone2.replace(/\D/g, '') : null,
availability: doctorData.availability || {},
}; };
console.log('Dados limpos para envio:', cleanedData); console.log('Dados limpos para envio:', cleanedData);

View File

@ -1,115 +1,77 @@
import React, { useEffect, useState } from "react"; import React from 'react'
import { GetDoctorByID } from "../components/utils/Functions-Endpoints/Doctor"; import { GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor'
import DoctorForm from "../components/doctors/DoctorForm"; import DoctorForm from '../components/doctors/DoctorForm'
import { useAuth } from "../components/utils/AuthProvider"; import { useAuth } from '../components/utils/AuthProvider'
import { useParams } from "react-router-dom"; import {useEffect, useState} from 'react'
import API_KEY from "../components/utils/apiKeys"; import { useParams } from 'react-router-dom'
import API_KEY from '../components/utils/apiKeys'
const DoctorEditPage = () => { const DoctorEditPage = () => {
const { getAuthorizationHeader } = useAuth(); const {getAuthorizationHeader, isAuthenticated} = useAuth();
const [DoctorToPUT, setDoctorPUT] = useState({}); const [DoctorToPUT, setDoctorPUT] = useState({})
const [availability, setAvailability] = useState([]);
const { id: DoctorID } = useParams();
useEffect(() => { const Parametros = useParams()
const authHeader = getAuthorizationHeader();
// Buscar médico const DoctorID = Parametros.id
GetDoctorByID(DoctorID, authHeader)
.then((data) => setDoctorPUT(data[0]))
.catch((err) => console.error(err));
// Buscar disponibilidades useEffect(() => {
const fetchAvailability = async () => {
try {
const res = await fetch(
`https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability/${DoctorID}`,
{ headers: { apikey: API_KEY, Authorization: authHeader } }
);
const data = await res.json();
setAvailability(data.data || []);
} catch (err) {
console.error(err);
}
};
fetchAvailability(); const authHeader = getAuthorizationHeader()
}, []);
// Atualizar uma disponibilidade GetDoctorByID(DoctorID, authHeader)
const updateAvailability = async (id, updatedData) => { .then((data) => {
const authHeader = getAuthorizationHeader(); console.log(data, "médico vindo da API");
try { setDoctorPUT(data[0])
await fetch( ; // supabase retorna array
`https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability/${id}`, })
{ .catch((err) => console.error("Erro ao buscar paciente:", err));
method: "PUT",
headers: {
apikey: API_KEY,
Authorization: authHeader,
"Content-Type": "application/json",
},
body: JSON.stringify(updatedData),
}
);
// atualizar localmente
setAvailability((prev) =>
prev.map((a) => (a.id === id ? { ...a, ...updatedData } : a))
);
} catch (err) {
console.error(err);
}
};
// Deletar uma disponibilidade
const deleteAvailability = async (id) => {
const authHeader = getAuthorizationHeader();
try {
await fetch(
`https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability/${id}`,
{
method: "DELETE",
headers: { apikey: API_KEY, Authorization: authHeader },
}
);
setAvailability((prev) => prev.filter((a) => a.id !== id));
} catch (err) {
console.error(err);
}
};
}, [])
const HandlePutDoctor = async () => { const HandlePutDoctor = async () => {
const authHeader = getAuthorizationHeader(); const authHeader = getAuthorizationHeader()
try {
await fetch(
`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${DoctorID}`, var myHeaders = new Headers();
{ myHeaders.append('apikey', API_KEY)
method: "PUT", myHeaders.append("Authorization", authHeader);
headers: { myHeaders.append("Content-Type", "application/json");
apikey: API_KEY,
Authorization: authHeader, var raw = JSON.stringify(DoctorToPUT);
"Content-Type": "application/json",
}, console.log("Enviando médico para atualização:", DoctorToPUT);
body: JSON.stringify(DoctorToPUT),
} var requestOptions = {
); method: 'PUT',
} catch (err) { headers: myHeaders,
console.error(err); body: raw,
} redirect: 'follow'
}; };
try {
const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${DoctorID}`,requestOptions);
console.log(response)
} catch (error) {
console.error("Erro ao atualizar paciente:", error);
throw error;
}
}
return ( return (
<div> <div>
<DoctorForm
onSave={HandlePutDoctor}
formData={DoctorToPUT}
setFormData={setDoctorPUT}
availability={availability}
updateAvailability={updateAvailability}
deleteAvailability={deleteAvailability}
/>
</div>
);
};
export default DoctorEditPage; <DoctorForm
onSave={HandlePutDoctor}
formData={DoctorToPUT}
setFormData={setDoctorPUT}
/>
</div>
)
}
export default DoctorEditPage

View File

@ -0,0 +1,23 @@
import { Routes, Route } from "react-router-dom";
import Sidebar from "../../components/Sidebar";
import PacienteItems from "../../data/sidebar-items-paciente.json";
import Agendamento from "../../pages/Agendamento";
import LaudoManager from "../../pages/LaudoManager";
function PerfilPaciente({ onLogout }) {
return (
<div id="app" className="active">
<Sidebar onLogout={onLogout} menuItems={PacienteItems} />
<div id="main">
<Routes>
<Route path="/" element={<LaudoManager />} />
<Route path="agendamento" element={<Agendamento />} />
<Route path="laudo" element={<LaudoManager />} />
<Route path="*" element={<h2>Página não encontrada</h2>} />
</Routes>
</div>
</div>
);
}
export default PerfilPaciente;