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

Mudanças no cadastro para se encaixar com a API

Browse Source
This commit is contained in:
jp-lima 2025-10-01 13:06:02 -03:00
parent 87d734071f
commit 612f0c51a0
11 changed files with 171 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.js
View File

@ -1,15 +1,12 @@
import { useState } from "react"; import { useState } from "react";
import PerfilSecretaria from "./perfis/perfil_secretaria/PerfilSecretaria"; import PerfilSecretaria from "./perfis/perfil_secretaria/PerfilSecretaria";
import { AuthProvider } from "./components/utils/AuthProvider";
function App() { function App() {
return ( return (
<div> <div>
<AuthProvider>
<PerfilSecretaria/> <PerfilSecretaria/>
</AuthProvider>
</div> </div>
); );
} }

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

@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import {Link} from 'react-router-dom' import {Link} from 'react-router-dom'
// formatar número // formatar número
// formatar CPF // formatar CPF
import { FormatTelefones,FormatPeso } from '../utils/Formatar/Format'; import { FormatTelefones,FormatPeso, FormatCPF } from '../utils/Formatar/Format';
function PatientForm({ onSave, onCancel, formData, setFormData }) { function PatientForm({ onSave, onCancel, formData, setFormData }) {
const [errorModalMsg, setErrorModalMsg] = useState(""); const [errorModalMsg, setErrorModalMsg] = useState("");
@ -12,87 +12,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
const [pacienteExistente, setPacienteExistente] = useState(null); const [pacienteExistente, setPacienteExistente] = useState(null);
const [showSuccessModal, setShowSuccessModal] = useState(false); const [showSuccessModal, setShowSuccessModal] = useState(false);
const ReceberRespostaAPIdoCPF = async (cpf) =>{
var myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer <token>");
myHeaders.append("Content-Type", "application/json");
var raw = JSON.stringify({
"cpf": cpf
});
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
const response = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/validar-cpf", requestOptions)
if (!response.ok) {
throw new Error('Erro na API de validação de CPF. Status: ' + response.status);
}
const result = await response.json()
return result.data
}
// Função para buscar os dados completos do paciente pelo ID
const BuscarPacientePorId = async (id) => {
var myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer <token>");
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
try {
const response = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, requestOptions);
const result = await response.json();
return result.data;
} catch (error) {
console.error("Erro ao buscar paciente por ID:", error);
return null;
}
};
const ValidarCPF = async (cpf) => {
let aviso
let Erro = false
try {
const resultadoAPI = await ReceberRespostaAPIdoCPF(cpf)
const valido = resultadoAPI.valido
const ExisteNoBancoDeDados = resultadoAPI.existe
const idPaciente = resultadoAPI.id_paciente
if(valido === false){
aviso = 'CPF inválido'
Erro = true
}
else if(ExisteNoBancoDeDados === true){
const paciente = await BuscarPacientePorId(idPaciente);
if (paciente) {
setPacienteExistente(paciente);
setShowModal(true);
}
Erro = true
}
} catch (error) {
console.error("Erro na validação do CPF:", error);
setShowModal404(true);
Erro = true;
}
return [Erro,aviso]
}
const FormatCPF = (valor) => {
const digits = String(valor).replace(/\D/g, '').slice(0, 11);
return digits
.replace(/(\d{3})(\d)/, '$1.$2')
.replace(/(\d{3})(\d)/, '$1.$2')
.replace(/(\d{3})(\d{1,2})$/, '$1-$2');
}
// Estado para armazenar a URL da foto do avatar // Estado para armazenar a URL da foto do avatar
@ -130,15 +49,13 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
const handleChange = (e) => { const handleChange = (e) => {
const { name, value, type, checked, files } = e.target; const { name, value, type, checked, files } = e.target;
console.log(formData, name) console.log(formData, name, checked)
if (type === 'checkbox') { if (type === 'file') {
setFormData({ ...formData, [name]: checked });
} else if (type === 'file') {
setFormData({ ...formData, [name]: files[0] }); setFormData({ ...formData, [name]: files[0] });
// Lógica para pré-visualizar a imagem no avatar // Lógica para pré-visualizar a imagem no avatar
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);
@ -149,13 +66,16 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
}} }}
if (name.includes('cpf')) { else if (name.includes('cpf')) {
setFormData({...formData, cpf:FormatCPF(value) }); setFormData({...formData, cpf:FormatCPF(value) });
} else if (name.includes('phone')) { } else if (name.includes('phone')) {
setFormData({ ...formData, [name]: FormatTelefones(value) }); setFormData({ ...formData, [name]: FormatTelefones(value) });
}else if(name.includes('weight') || name.includes('bmi') || name.includes('height')){ }else if(name.includes('weight') || name.includes('bmi') || name.includes('height')){
setFormData({...formData,[name]: FormatPeso(value) }) setFormData({...formData,[name]: FormatPeso(value) })
}else{ }else if(name.includes('rn') || name.includes('vip')){
setFormData({ ...formData, [name]: checked });
}
else{
setFormData({ ...formData, [name]: value }); setFormData({ ...formData, [name]: value });
} }
}; };
@ -190,15 +110,11 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
} }
const [CPFinvalido] = await ValidarCPF(formData.cpf);
if(CPFinvalido === true){
}
onSave({ onSave({
...formData,bmi:12.0 ...formData,bmi:12.0
}); });
setShowSuccessModal(true);
}; };
return ( return (
@ -371,7 +287,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
{/* CAMPOS MOVIDOS */} {/* CAMPOS MOVIDOS */}
<div className="col-md-12 mb-3 mt-3"> <div className="col-md-12 mb-3 mt-3">
<label style={{ fontSize: '1.1rem' }}>Observações:</label> <label style={{ fontSize: '1.1rem' }}>Observações:</label>
<textarea className="form-control" name="observacoes" value={formData.observacoes} onChange={handleChange} style={{ fontSize: '1.1rem' }}></textarea> <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>
</div> </div>
<div className="col-md-12 mb-3"> <div className="col-md-12 mb-3">
<label style={{ fontSize: '1.1rem' }}>Anexos do Paciente:</label> <label style={{ fontSize: '1.1rem' }}>Anexos do Paciente:</label>
@ -422,10 +338,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
<label style={{ fontSize: '1.1rem' }}>IMC (kg/m²):</label> <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' }} /> <input type="text" className="form-control" name="bmi" value={formData.bmi} readOnly disabled style={{ fontSize: '1.1rem' }} />
</div> </div>
<div className="col-md-12 mb-3">
<label style={{ fontSize: '1.1rem' }}>Alergias:</label>
<textarea className="form-control" name="alergias" value={formData.alergias} onChange={handleChange} placeholder="Ex: AAS, Dipirona, etc" style={{ fontSize: '1.1rem' }}></textarea>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -473,7 +386,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
{/* PACIENTE VIP */} {/* PACIENTE VIP */}
<div className="col-md-12 mb-3 mt-3"> <div className="col-md-12 mb-3 mt-3">
<div className="form-check"> <div className="form-check">
<input className="form-check-input" type="checkbox" name="vip" checked={formData.vip} onChange={handleChange} id="pacienteVip" style={{ transform: 'scale(1.2)' }} /> <input className="form-check-input" type="checkbox" name="vip" checked={formData.vip} onChange={handleChange} id="vip" style={{ transform: 'scale(1.2)' }} />
<label className="form-check-label ms-2" htmlFor="vip" style={{ fontSize: '1.1rem' }}> <label className="form-check-label ms-2" htmlFor="vip" style={{ fontSize: '1.1rem' }}>
Paciente VIP Paciente VIP
</label> </label>
@ -561,7 +474,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
Salvar Paciente Salvar Paciente
</button> </button>
<Link to='/'> <Link to='/pacientes'>
<button className="btn btn-light" style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}> <button className="btn btn-light" style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
Cancelar Cancelar
</button> </button>
@ -571,51 +484,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
{/* Modal para paciente existente */} {/* Modal para paciente existente */}
{showModal && pacienteExistente && ( {showModal && pacienteExistente && (
<div className="modal" style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.5)' }}> <div></div>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">Ops! Este CPF já está cadastrado</h5>
<button type="button" className="btn-close" onClick={() => setShowModal(false)}></button>
</div>
<div className="modal-body">
<div className="text-center mb-3">
<img
src={pacienteExistente.foto || 'https://via.placeholder.com/100'}
alt="Foto do Paciente"
className="rounded-circle"
style={{ width: '100px', height: '100px', objectFit: 'cover' }}
/>
</div>
<p><strong>ID do Paciente:</strong> {pacienteExistente.id}</p>
<p><strong>Nome Completo:</strong> {pacienteExistente.nome}</p>
<p><strong>CPF:</strong> {pacienteExistente.cpf}</p>
<p><strong>Data de Nascimento:</strong> {pacienteExistente.data_nascimento}</p>
<p><strong>Telefone:</strong> {pacienteExistente.contato.telefone1}</p>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-primary"
onClick={() => setShowModal(false)}
>
Fechar e Continuar no Cadastro
</button>
<button
type="button"
className="btn btn-primary"
onClick={() => {
alert(`Navegando para os detalhes do paciente ID: ${pacienteExistente.id}`);
setShowModal(false);
}}
>
Visualizar Paciente Existente
</button>
</div>
</div>
</div>
</div>
)} )}
{/* Modal de sucesso ao salvar paciente */} {/* Modal de sucesso ao salvar paciente */}

10
src/components/utils/Formatar/Format.js
View File

@ -20,4 +20,12 @@ const FormatTelefones = (valor) => {
} }
export {FormatTelefones, FormatPeso} const FormatCPF = (valor) => {
const digits = String(valor).replace(/\D/g, '').slice(0, 11);
return digits
.replace(/(\d{3})(\d)/, '$1.$2')
.replace(/(\d{3})(\d)/, '$1.$2')
.replace(/(\d{3})(\d{1,2})$/, '$1-$2');
}
export {FormatTelefones, FormatPeso, FormatCPF}

12
src/data/sidebar-items.json
View File

@ -10,18 +10,6 @@
"icon": "house" "icon": "house"
}, },
{
"name": "Cadastro de Pacientes",
"url": "/pacientes/cadastro",
"icon": "heart-pulse-fill"
},
{
"name": "Cadastro do Médico",
"url": "/medicos/cadastro",
"icon": "capsule"
},
{ {
"name": "Lista de Pacientes", "name": "Lista de Pacientes",
"icon": "clipboard-heart-fill", "icon": "clipboard-heart-fill",

97
src/pages/Details.jsx
View File

@ -3,7 +3,7 @@ import avatarPlaceholder from '../assets/images/avatar_placeholder.png';
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import API_KEY from "../components/utils/apiKeys"; import API_KEY from "../components/utils/apiKeys";
import {GetByID} from "../components/utils/Functions-Endpoints/Patient" import {GetByID} from "../components/utils/Functions-Endpoints/Patient"
import { Link } from "react-router-dom";
import { useAuth } from "../components/utils/AuthProvider"; import { useAuth } from "../components/utils/AuthProvider";
@ -89,16 +89,29 @@ const Details = () => {
<h3 className="mb-3 text-center">MediConnect</h3> <h3 className="mb-3 text-center">MediConnect</h3>
<hr /> <hr />
<div className="d-flex justify-content-between align-items-center mb-3"> <div className="d-flex justify-content-between align-items-center mb-3">
<Link to={'/pacientes'}>
<button className="btn btn-success me-2" >
<i className="bi bi-chevron-left"></i> Voltar
</button>
</Link>
<div className="d-flex mb-3"> <div className="d-flex mb-3">
<div className="avatar avatar-xl"> <div className="avatar avatar-xl">
<img src={avatarPlaceholder} alt="" /> <img src={avatarPlaceholder} alt="" />
</div> </div>
<div className="media-body ms-3 font-extrabold"> <div className="media-body ms-3 font-extrabold">
<span>{paciente.nome || "Nome Completo"}</span> <span>{paciente.full_name || "Nome Completo"}</span>
<p>{paciente.cpf || "CPF"}</p> <p>{paciente.cpf || "CPF"}</p>
</div> </div>
</div> </div>
<Link to={`/pacientes/${paciente.id}/edit`}>
<button className="btn btn-light" >
<i className="bi bi-pencil-square"></i> Editar
</button>
</Link>
</div> </div>
</div> </div>
@ -114,7 +127,7 @@ const Details = () => {
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">Nome social:</label> <label className="font-extrabold">Nome social:</label>
<p>{paciente.nome_social || "-"}</p> <p>{paciente.social_name || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">Data de nascimento:</label> <label className="font-extrabold">Data de nascimento:</label>
@ -134,55 +147,55 @@ const Details = () => {
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">Outro documento:</label> <label className="font-extrabold">Outro documento:</label>
<p>{paciente.outros_documentos?.tipo || "-"}</p> <p>{paciente.document_type || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">Número do documento:</label> <label className="font-extrabold">Número do documento:</label>
<p>{paciente.outros_documentos?.numero || "-"}</p> <p>{paciente.document_number || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">Etnia:</label> <label className="font-extrabold">Etnia:</label>
<p>{paciente.etnia || "-"}</p> <p>{paciente.ethnicity || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">Raça:</label> <label className="font-extrabold">Raça:</label>
<p>{paciente.raca || "-"}</p> <p>{paciente.race || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">Naturalidade:</label> <label className="font-extrabold">Naturalidade:</label>
<p>{paciente.etniaRaca || "-"}</p> <p>{paciente.naturality || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">Profissão:</label> <label className="font-extrabold">Profissão:</label>
<p>{paciente.profissao || "-"}</p> <p>{paciente.profession || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">Nome da Mãe:</label> <label className="font-extrabold">Nome da Mãe:</label>
<p>{paciente.nome_mae || "-"}</p> <p>{paciente.mother_name || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">Profissão da mãe:</label> <label className="font-extrabold">Profissão da mãe:</label>
<p>{paciente.profissao_mae || "-"}</p> <p>{paciente.mother_profession || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">Nome do Pai:</label> <label className="font-extrabold">Nome do Pai:</label>
<p>{paciente.nome_pai || "-"}</p> <p>{paciente.father_name || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">Profissão do pai:</label> <label className="font-extrabold">Profissão do pai:</label>
<p>{paciente.profissao_pai || "-"}</p> <p>{paciente.father_profession || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">Nome do responsável:</label> <label className="font-extrabold">Nome do responsável:</label>
<p>{paciente.nome_responsavel || "-"}</p> <p>{paciente.guardian_name || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">CPF do responsável:</label> <label className="font-extrabold">CPF do responsável:</label>
<p>{paciente.cpf_responsavel || "-"}</p> <p>{paciente.guardian_cpf || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">Estado civil:</label> <label className="font-extrabold">Estado civil:</label>
<p>{paciente.estado_civil || "-"}</p> <p>{paciente.marital_status || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">Nome do esposo(a):</label> <label className="font-extrabold">Nome do esposo(a):</label>
@ -190,17 +203,17 @@ const Details = () => {
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">Identificador de outro sistema:</label> <label className="font-extrabold">Identificador de outro sistema:</label>
<p>{paciente.outro_id || "-"}</p> <p>{paciente.legacy_code || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<div className="form-check"> <div className="form-check">
<input className="form-check-input" type="checkbox" checked={paciente.rnConvenio} disabled/> <input className="form-check-input" type="checkbox" checked={paciente.rn_in_insurance} disabled/>
<label className="font-extrabold">RN na Guia do convênio:</label> <label className="font-extrabold">RN na Guia do convênio:</label>
</div> </div>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">Observações:</label> <label className="font-extrabold">Observações:</label>
<p>{paciente.observacoes || "-"}</p> <p>{paciente.notes || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">Anexos do Paciente:</label> <label className="font-extrabold">Anexos do Paciente:</label>
@ -219,15 +232,7 @@ const Details = () => {
<p>-</p> <p>-</p>
)} )}
</div> </div>
<div className="col-md-6 mb-3">
<label htmlFor="foto-input" className="btn btn-primary" style={{ fontSize: '1rem' }}>
Carregar Um Novo Anexo
</label>
<input
type="file" className="form-control d-none" name="foto" id="foto-input" onChange={(e) => setSelectedFile(e.target.files[0])} accept="image/*"/>
{selectedFile && <span className="ms-2" style={{ fontSize: '1rem' }}>{selectedFile.name}</span>}
<button onClick={handleUpload} className="btn btn-success ms-2">Enviar</button>
</div>
</div> </div>
</div> </div>
@ -238,23 +243,19 @@ const Details = () => {
<div className="row"> <div className="row">
<div className="col-md-3 mb-3"> <div className="col-md-3 mb-3">
<label className="font-extrabold">Tipo Sanguíneo:</label> <label className="font-extrabold">Tipo Sanguíneo:</label>
<p>{paciente.tipoSanguineo || "-"}</p> <p>{paciente.blood_type || "-"}</p>
</div> </div>
<div className="col-md-3 mb-3"> <div className="col-md-3 mb-3">
<label className="font-extrabold">Peso (kg):</label> <label className="font-extrabold">Peso (kg):</label>
<p>{paciente.peso || "-"}</p> <p>{paciente.weight_kg || "-"}</p>
</div> </div>
<div className="col-md-3 mb-3"> <div className="col-md-3 mb-3">
<label className="font-extrabold">Altura (m):</label> <label className="font-extrabold">Altura (m):</label>
<p>{paciente.altura || "-"}</p> <p>{paciente.height_m || "-"}</p>
</div> </div>
<div className="col-md-3 mb-3"> <div className="col-md-3 mb-3">
<label className="font-extrabold">IMC (kg/m²):</label> <label className="font-extrabold">IMC (kg/m²):</label>
<p>{paciente.imc || "-"}</p> <p>{paciente.bmi || "-"}</p>
</div>
<div className="col-md-6 mb-3">
<label className="font-extrabold">Alergias:</label>
<p>{paciente.alergias || "-"}</p>
</div> </div>
</div> </div>
</div> </div>
@ -288,7 +289,7 @@ const Details = () => {
</div> </div>
<div className="col-md-2 d-flex align-items-end mb-3"> <div className="col-md-2 d-flex align-items-end mb-3">
<div className="form-check"> <div className="form-check">
<input className="form-check-input" type="checkbox" checked={paciente.pacienteVip} disabled/> <input className="form-check-input" type="checkbox" checked={paciente.vip} disabled/>
<label className="font-extrabold">Paciente VIP: </label> <label className="font-extrabold">Paciente VIP: </label>
</div> </div>
</div> </div>
@ -302,31 +303,31 @@ const Details = () => {
<div className="row"> <div className="row">
<div className="col-md-4 mb-3"> <div className="col-md-4 mb-3">
<label className="font-extrabold">CEP:</label> <label className="font-extrabold">CEP:</label>
<p>{paciente.endereco?.cep || "-"}</p> <p>{paciente.cep || "-"}</p>
</div> </div>
<div className="col-md-8 mb-3"> <div className="col-md-8 mb-3">
<label className="font-extrabold">Rua:</label> <label className="font-extrabold">Rua:</label>
<p>{paciente.endereco?.logradouro || "-"}</p> <p>{paciente.street || "-"}</p>
</div> </div>
<div className="col-md-4 mb-3"> <div className="col-md-4 mb-3">
<label className="font-extrabold">Bairro:</label> <label className="font-extrabold">Bairro:</label>
<p>{paciente.endereco?.bairro || "-"}</p> <p>{paciente.neighborhood || "-"}</p>
</div> </div>
<div className="col-md-4 mb-3"> <div className="col-md-4 mb-3">
<label className="font-extrabold">Cidade:</label> <label className="font-extrabold">Cidade:</label>
<p>{paciente.endereco?.cidade || "-"}</p> <p>{paciente.city || "-"}</p>
</div> </div>
<div className="col-md-2 mb-3"> <div className="col-md-2 mb-3">
<label className="font-extrabold">Estado:</label> <label className="font-extrabold">Estado:</label>
<p>{paciente.endereco?.estado || "-"}</p> <p>{paciente.state || "-"}</p>
</div> </div>
<div className="col-md-4 mb-3"> <div className="col-md-4 mb-3">
<label className="font-extrabold">Número:</label> <label className="font-extrabold">Número:</label>
<p>{paciente.endereco?.numero || "-"}</p> <p>{paciente.number || "-"}</p>
</div> </div>
<div className="col-md-8 mb-3"> <div className="col-md-8 mb-3">
<label className="font-extrabold">Complemento:</label> <label className="font-extrabold">Complemento:</label>
<p>{paciente.endereco?.complemento || "-"}</p> <p>{paciente.complement || "-"}</p>
</div> </div>
</div> </div>
</div> </div>
@ -338,19 +339,19 @@ const Details = () => {
<div className="row"> <div className="row">
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">Email:</label> <label className="font-extrabold">Email:</label>
<p>{paciente.contato?.email || "-"}</p> <p>{paciente.email || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">Telefone:</label> <label className="font-extrabold">Telefone:</label>
<p>{paciente.contato?.celular || "-"}</p> <p>{paciente.phone_mobile || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">Telefone 2:</label> <label className="font-extrabold">Telefone 2:</label>
<p>{paciente.contato?.telefone2 || "-"}</p> <p>{paciente.phone1 || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label className="font-extrabold">Telefone 3:</label> <label className="font-extrabold">Telefone 3:</label>
<p>{paciente.contato?.telefone3 || "-"}</p> <p>{paciente.phone2 || "-"}</p>
</div> </div>
</div> </div>
</div> </div>

14
src/pages/DoctorCadastroManager.jsx
View File

@ -4,11 +4,13 @@ import React, { useState } from 'react';
import { useAuth } from '../components/utils/AuthProvider'; import { useAuth } from '../components/utils/AuthProvider';
import DoctorForm from '../components/doctors/DoctorForm'; import DoctorForm from '../components/doctors/DoctorForm';
import API_KEY from '../components/utils/apiKeys'; import API_KEY from '../components/utils/apiKeys';
import { Navigate, useNavigate } from 'react-router-dom';
function DoctorCadastroManager( ) { function DoctorCadastroManager( ) {
const [DoctorDict, setDoctorDict] = useState({}) const [DoctorDict, setDoctorDict] = useState({})
const navigate = useNavigate();
const { getAuthorizationHeader, isAuthenticated } = useAuth(); const { getAuthorizationHeader, isAuthenticated } = useAuth();
// Estado do modal de sucesso // Estado do modal de sucesso
@ -40,10 +42,10 @@ function DoctorCadastroManager( ) {
try { try {
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1//doctors", requestOptions); const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1//doctors", requestOptions);
const result = await response.json();
console.log("Médico salvo no backend:", result); console.log("Médico salvo no backend:", response);
return result; return response;
} catch (error) { } catch (error) {
console.error("Erro ao salvar Médico:", error); console.error("Erro ao salvar Médico:", error);
throw error; throw error;
@ -80,7 +82,7 @@ function DoctorCadastroManager( ) {
<DoctorForm <DoctorForm
onSave={handleSaveDoctor} onSave={handleSaveDoctor}
onCancel={console.log('hsh')} onCancel={() => {navigate('/medicos')}}
formData={DoctorDict} formData={DoctorDict}
setFormData={setDoctorDict} setFormData={setDoctorDict}
/> />

18
src/pages/DoctorDetails.jsx
View File

@ -1,6 +1,6 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import avatarPlaceholder from '../assets/images/avatar_placeholder.png'; import avatarPlaceholder from '../assets/images/avatar_placeholder.png';
import { useParams } from "react-router-dom"; import { useParams,Link } from "react-router-dom";
import { GetDoctorByID } from "../components/utils/Functions-Endpoints/Doctor"; import { GetDoctorByID } from "../components/utils/Functions-Endpoints/Doctor";
import { useAuth } from "../components/utils/AuthProvider"; import { useAuth } from "../components/utils/AuthProvider";
@ -34,9 +34,11 @@ const Details = ({setCurrentPage }) => {
<h3 className="mb-3 text-center">MediConnect</h3> <h3 className="mb-3 text-center">MediConnect</h3>
<hr /> <hr />
<div className="d-flex justify-content-between align-items-center mb-3"> <div className="d-flex justify-content-between align-items-center mb-3">
<button className="btn btn-success me-2" onClick={() => setCurrentPage("table")}> <Link to={'/medicos'}>
<i className="bi bi-chevron-left"></i> Voltar <button className="btn btn-success me-2" >
</button> <i className="bi bi-chevron-left"></i> Voltar
</button>
</Link>
<div className="d-flex mb-3"> <div className="d-flex mb-3">
<div className="avatar avatar-xl"> <div className="avatar avatar-xl">
<img src={avatarPlaceholder} alt="" /> <img src={avatarPlaceholder} alt="" />
@ -46,9 +48,11 @@ const Details = ({setCurrentPage }) => {
<p>{doctor.cpf || "CPF"}</p> <p>{doctor.cpf || "CPF"}</p>
</div> </div>
</div> </div>
<button className="btn btn-light" onClick={() => setCurrentPage("edit-page-doctor")}> <Link to={`/medicos/${doctor.id}/edit`}>
<i className="bi bi-pencil-square"></i> Editar <button className="btn btn-light" onClick={() => {console.log(doctor.id)}} >
</button> <i className="bi bi-pencil-square"></i> Editar
</button>
</Link>
</div> </div>
</div> </div>

16
src/pages/DoctorTable.jsx
View File

@ -4,7 +4,7 @@ import { useAuth } from "../components/utils/AuthProvider";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
function TableDoctor({ setCurrentPage, setPatientID }) { function TableDoctor({ setCurrentPage, setPatientID }) {
const {getAuthorizationHeader, isAuthenticated} = useAuth(); const {getAuthorizationHeader, isAuthenticated} = useAuth();
const [medicos, setMedicos] = useState([]); const [medicos, setMedicos] = useState([]);
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
@ -95,12 +95,14 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
<div className="card"> <div className="card">
<div className="card-header d-flex justify-content-between align-items-center"> <div className="card-header d-flex justify-content-between align-items-center">
<h4 className="card-title mb-0">Médicos Cadastrados</h4> <h4 className="card-title mb-0">Médicos Cadastrados</h4>
<button <Link to={'/medicos/cadastro'}>
className="btn btn-primary" <button
onClick={() => setCurrentPage("form-layout")} className="btn btn-primary"
>
<i className="bi bi-plus-circle"></i> Adicionar Médico >
</button> <i className="bi bi-plus-circle"></i> Adicionar Médico
</button>
</Link>
</div> </div>
<div className="card-body"> <div className="card-body">

19
src/pages/EditPage.jsx
View File

@ -5,9 +5,10 @@ import PatientForm from '../components/patients/PatientForm'
import {useEffect, useState} from 'react' import {useEffect, useState} from 'react'
import { GetByID } from '../components/utils/Functions-Endpoints/Patient' import { GetByID } from '../components/utils/Functions-Endpoints/Patient'
import API_KEY from '../components/utils/apiKeys' import API_KEY from '../components/utils/apiKeys'
import { useParams } from 'react-router-dom' import {useNavigate, useParams } from 'react-router-dom'
import { useAuth } from '../components/utils/AuthProvider' import { useAuth } from '../components/utils/AuthProvider'
const EditPage = ( {id, setCurrentPage}) => { const EditPage = ( {id, setCurrentPage}) => {
const navigate = useNavigate()
const Parametros = useParams() const Parametros = useParams()
const [PatientToPUT, setPatientPUT] = useState({}) const [PatientToPUT, setPatientPUT] = useState({})
@ -53,10 +54,18 @@ const HandlePutPatient = async () => {
const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients?id=eq.${PatientID}`,requestOptions); const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients?id=eq.${PatientID}`,requestOptions);
// se o backend retorna JSON // se o backend retorna JSON
const result = await response.json(); console.log("Resposta do servidor:", response.ok);
console.log("ATUALIZADO COM SUCESSO", result); if(response.ok === false){
const errorText = await response.text();
return result; console.error("Erro ao atualizar paciente:", errorText);
}
else{
console.log("ATUALIZADO COM SUCESSO");
navigate('/pacientes')
}
return response;
} catch (error) { } catch (error) {
console.error("Erro ao atualizar paciente:", error); console.error("Erro ao atualizar paciente:", error);
throw error; throw error;

3
src/pages/Inicio.jsx
View File

@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
import { FaUser, FaUserPlus, FaCalendarAlt, FaCalendarCheck } from 'react-icons/fa'; import { FaUser, FaUserPlus, FaCalendarAlt, FaCalendarCheck } from 'react-icons/fa';
import './style/Inicio.css'; import './style/Inicio.css';
import { useAuth } from '../components/utils/AuthProvider'; import { useAuth } from '../components/utils/AuthProvider';
import { Link } from 'react-router-dom';
function Inicio({ setCurrentPage }) { function Inicio({ setCurrentPage }) {
const {setAuthTokens} = useAuth() const {setAuthTokens} = useAuth()
@ -10,8 +11,6 @@ function Inicio({ setCurrentPage }) {
useEffect(() => { useEffect(() => {
var myHeaders = new Headers(); var myHeaders = new Headers();
myHeaders.append("apikey", "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl1YW5xZnN3aGJlcmtvZXZ0bWZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ5NTQzNjksImV4cCI6MjA3MDUzMDM2OX0.g8Fm4XAvtX46zifBZnYVH4tVuQkqUH6Ia9CXQj4DztQ"); myHeaders.append("apikey", "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl1YW5xZnN3aGJlcmtvZXZ0bWZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ5NTQzNjksImV4cCI6MjA3MDUzMDM2OX0.g8Fm4XAvtX46zifBZnYVH4tVuQkqUH6Ia9CXQj4DztQ");

67
src/pages/PatientCadastroManager.jsx
View File

@ -2,8 +2,10 @@ import {useState} from 'react';
import PatientForm from '../components/patients/PatientForm'; import PatientForm from '../components/patients/PatientForm';
import API_KEY from '../components/utils/apiKeys'; import API_KEY from '../components/utils/apiKeys';
import { useAuth } from '../components/utils/AuthProvider'; import { useAuth } from '../components/utils/AuthProvider';
import { useNavigate } from 'react-router-dom';
function PatientCadastroManager( {setCurrentPage} ) { function PatientCadastroManager( {setCurrentPage} ) {
const navigate = useNavigate()
const [showModal, setShowModal] = useState(false);
const { getAuthorizationHeader, isAuthenticated } = useAuth(); const { getAuthorizationHeader, isAuthenticated } = useAuth();
const [formData, setFormData] = useState({}) const [formData, setFormData] = useState({})
@ -11,7 +13,6 @@ function PatientCadastroManager( {setCurrentPage} ) {
const handleSavePatient = async (patientData) => { const handleSavePatient = async (patientData) => {
const authHeader = getAuthorizationHeader(); const authHeader = getAuthorizationHeader();
var myHeaders = new Headers(); var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json"); myHeaders.append("Content-Type", "application/json");
myHeaders.append("apikey", API_KEY) myHeaders.append("apikey", API_KEY)
@ -30,34 +31,72 @@ function PatientCadastroManager( {setCurrentPage} ) {
redirect: 'follow' redirect: 'follow'
}; };
// 23505 - cpf duplicadoo
// 23514 - cpf invalido
try { try {
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions); const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions);
const result = await response.json(); console.log(response.ok, 'aqui')
console.log("Paciente salvo no backend:", result);
if(response.ok === false){
return result; const data = await response.json();
} catch (error) { console.log("Erro ao salvar paciente:", data);
console.error("Erro ao salvar paciente:", error); if (data.code === "23505") {
throw error; setShowModal(true);
}
} }
else{
console.log("ATUALIZADO COM SUCESSO");
navigate('/pacientes')
}
} catch (error) {
console.error("Erro ao salvar paciente:", error);
throw error;
}
}; };
return ( return (
<> <>
<div className="page-heading"> <div className="page-heading">
{showModal &&(
<div className="modal" style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.5)' }}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">Ops! Este CPF já está cadastrado</h5>
<button type="button" className="btn-close" onClick={() => setShowModal(false)}></button>
</div>
<div className="modal-body">
<div className="text-center mb-3">
</div>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-primary"
onClick={() => setShowModal(false)}
>
Fechar e Continuar no Cadastro
</button>
</div>
</div>
</div>
</div>)}
<h3>Cadastro de Pacientes</h3> <h3>Cadastro de Pacientes</h3>
</div> </div>
<div className="page-content"> <div className="page-content">
<section className="row"> <section className="row">
<div className="col-12"> <div className="col-12">
{/* Aqui está a lógica principal: */}
{/* Se a view for 'list', mostramos a lista com o botão. */}
{/* Se for 'form', mostramos o formulário de cadastro. */}
<PatientForm <PatientForm
onSave={handleSavePatient} onSave={handleSavePatient}
onCancel={() => {setCurrentPage('table')}} onCancel={() => {navigate('/pacientes')}}
formData={formData} formData={formData}
setFormData={setFormData} setFormData={setFormData}
/> />