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

Adição da funcionalidade de ver detalhes e editar

Browse Source
This commit is contained in:
jp-lima 2025-10-09 09:05:33 -03:00
parent 92c84e7f2d
commit dc24d36346
7 changed files with 422 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
src/PagesMedico/DoctorRelatorioManager.jsx
View File

@ -3,15 +3,19 @@ import { Link } from 'react-router-dom';
import {useState, useEffect} from 'react'
import { useAuth } from '../components/utils/AuthProvider';
import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient';
import { useNavigate } from 'react-router-dom';
import html2pdf from 'html2pdf.js';
const DoctorRelatorioManager = () => {
const navigate = useNavigate()
const {getAuthorizationHeader} = useAuth();
let authHeader = getAuthorizationHeader()
const [RelatoriosFiltrados, setRelatorios] = useState([])
const [PacientesComRelatorios, setPacientesComRelatorios] = useState([])
const [showModal, setShowModal] = useState(false)
const [index, setIndex] = useState()
useEffect( () => {
let pacientesDosRelatorios =[]
let pacientesDosRelatorios = []
const ListarPacientes = async () => {
for (let i = 0; i < RelatoriosFiltrados.length; i++) {
@ -50,10 +54,78 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?patient_id&statu
.catch(error => console.log('error', error));
}, [])
const BaixarPDFdoRelatorio = (nome_paciente) => {
const elemento = document.getElementById("folhaA4"); // tua div do relatório
const opt = {
margin: 0,
filename: `relatorio_${nome_paciente || "paciente"}.pdf`,
html2canvas: { scale: 2 },
jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
};
html2pdf().set(opt).from(elemento).save();
}
return (
<div>
{showModal && (
<div className="modal" >
<div className="modal-dialog modal-tabela-relatorio">
<div className="modal-content">
<div className="modal-header text-white">
<h5 className="modal-title ">Relatório de {PacientesComRelatorios[index]?.full_name} </h5>
<button
type="button"
className="btn-close"
onClick={() => setShowModal(false)}
></button>
</div>
<div className="modal-body">
<div id="folhaA4">
<div id='header-relatorio'>
<p>Clinica Rise up</p>
<p>Dr - CRM/SP 123456</p>
<p>Avenida - (79) 9 4444-4444</p>
</div>
<div id='infoPaciente'>
<p>Paciente: {PacientesComRelatorios[index]?.full_name}</p>
<p>Data de nascimento: {PacientesComRelatorios[index]?.birth_date} </p>
<p>Data do exame: {}</p>
<p>Exame: {RelatoriosFiltrados[index]?.exam}</p>
<p>Diagnostico: {RelatoriosFiltrados[index]?.diagnosis}</p>
<p>Conclusão: {RelatoriosFiltrados[index]?.conclusion}</p>
</div>
<div>
<p>Dr {RelatoriosFiltrados[index]?.required_by}</p>
<p>Emitido em: 0</p>
</div>
</div>
</div>
<div className="modal-footer">
<button className="btn btn-primary" onClick={() => BaixarPDFdoRelatorio(PacientesComRelatorios[index]?.full_name)}><i className='bi bi-file-pdf-fill'></i> baixar em pdf</button>
<button
type="button"
className="btn btn-primary"
onClick={() => {setShowModal(false)}}
>
Fechar
</button>
</div>
</div>
</div>
</div>
)}
<div className="page-heading">
<h3>Lista de Relatórios</h3>
</div>
@ -103,39 +175,59 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?patient_id&statu
<table className="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th>Paciente</th>
<th>CPF</th>
<th>Exame</th>
<th></th>
<th>Ações</th>
</tr>
</thead>
<tbody>
{RelatoriosFiltrados.length > 0 ? (
RelatoriosFiltrados.map((relatorio, index) => (
<tr key={relatorio.id}>
<td>{relatorio.order_number}</td>
<td className='infos-paciente'>{PacientesComRelatorios[index]?.full_name}</td>
<td className='infos-paciente'>{PacientesComRelatorios[index]?.cpf}</td>
<td>{relatorio.exam}</td>
<td>{relatorio.create_at}</td>
<td>
<div class="btn-group mb-1">
<div class="dropdown">
<div className="d-flex gap-2">
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<button class="btn btn-primary dropdown-toggle me-1" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Ações
<button
className="btn btn-sm"
style={{
backgroundColor: "#E6F2FF",
color: "#004085",
}}
onClick={() => {
setShowModal(true); setIndex(index)
}}
>
<i className="bi bi-eye me-1"></i> Ver Detalhes
</button>
<a class="dropdown-item" href="#">Visualizar</a>
<a class="dropdown-item" href="#">Editar</a>
<a class="dropdown-item" href="#">Excluir</a>
</div>
</div>
<button
className="btn btn-sm"
style={{
backgroundColor: "#FFF3CD",
color: "#856404",
}}
onClick={() => {
navigate(`/medico/relatorios/${relatorio.id}/edit`)
}}
>
<i className="bi bi-pencil me-1"></i> Editar
</button>
</div>
</td>
</tr>

65
src/PagesMedico/EditPageRelatorio.jsx Normal file
View File

@ -0,0 +1,65 @@
import React, { useEffect, useState } from 'react'
import FormRelatorio from '../components/FormRelatorio'
import { useParams } from 'react-router-dom'
import API_KEY from '../components/utils/apiKeys'
import { useAuth } from '../components/utils/AuthProvider'
const EditPageRelatorio = () => {
const params = useParams()
const {getAuthorizationHeader} = useAuth()
let authHeader = getAuthorizationHeader()
const [DictInfo, setDictInfo] = useState({})
let RelatorioID = params.id
const handleSave = (RelatorioInfos) => {
var myHeaders = new Headers();
myHeaders.append("apikey", API_KEY);
myHeaders.append("Authorization", authHeader);
myHeaders.append("Content-Type", "application/json");
const raw = JSON.stringify({...RelatorioInfos, order_number:'REL-2025-4386'})
console.log(RelatorioInfos)
var requestOptions = {
method: 'PATCH',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?id=eq.${RelatorioID}`, requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
}
useEffect(() => {
var myHeaders = new Headers();
myHeaders.append("apikey", API_KEY);
myHeaders.append("Authorization", authHeader);
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?id=eq.${RelatorioID}`, requestOptions)
.then(response => response.json())
.then(result => setDictInfo(result[0]))
.catch(error => console.log('error', error));
}, [])
console.log(RelatorioID)
return (
<div>
<FormRelatorio DictInfo={DictInfo} setDictInfo={setDictInfo} onSave={handleSave}/>
</div>
)
}
export default EditPageRelatorio

186
src/PagesMedico/FormNovoRelatorio.jsx
View File

@ -1,72 +1,24 @@
import React from 'react'
import '../PagesMedico/styleMedico/FormNovoRelatorio.css'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAuth } from '../components/utils/AuthProvider'
import { GetPatientByCPF } from '../components/utils/Functions-Endpoints/Patient'
import { FormatCPF } from '../components/utils/Formatar/Format'
import API_KEY from '../components/utils/apiKeys'
import html2pdf from "html2pdf.js";
import FormRelatorio from '../components/FormRelatorio'
import { useState } from 'react'
import { useAuth } from '../components/utils/AuthProvider'
const FormNovoRelatorio = () => {
const [DictInfo, setDictInfo] = useState({})
const {getAuthorizationHeader} = useAuth()
let authHeader = getAuthorizationHeader()
const navigate= useNavigate()
const [DictInfo, setDictInfo] = useState({})
const [showModal, setShowModal] = useState(false)
const handleChange = (e) => {
const { name, value } = e.target;
console.log(name, value)
if(name === 'paciente_cpf') {
const formattedCPF = FormatCPF(value);
setDictInfo((prev) => ({ ...prev, [name]: formattedCPF }));
const fetchPatient = async () => {
const patientData = await GetPatientByCPF(formattedCPF, authHeader);
if (patientData) {
setDictInfo((prev) => ({
...prev,
paciente_cpf:value,
paciente_nome: patientData.full_name,
paciente_id: patientData.id
}));
}
};
if(formattedCPF.length === 14){
fetchPatient();
}
}else{
setDictInfo((prev) => ({ ...prev, [name]: value }));
}
}
const handleSubmit = (e) => {
e.preventDefault();
console.log(DictInfo)
setShowModal(true)
const handleSave = (data) => {
console.log("Relatório salvo:", data);
var myHeaders = new Headers();
myHeaders.append("apikey", API_KEY);
myHeaders.append("Authorization", authHeader);
myHeaders.append("Content-Type", "application/json");
var raw = JSON.stringify({
"patient_id": DictInfo.paciente_id,
"exam": DictInfo.exam,
"diagnosis": DictInfo.diagnosis,
"conclusion": DictInfo.conclusao,
"status": "draft",
"requested_by": DictInfo.requested_by,
"hide_date": false,
"hide_signature": false,
});
var raw = JSON.stringify({...data});
var requestOptions = {
method: 'POST',
@ -83,124 +35,8 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports", requestOptions
return (
<div>
{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 bg-success text-white">
<h5 className="modal-title ">Relatório criado com sucesso</h5>
<button
type="button"
className="btn-close"
onClick={() => setShowModal(false)}
></button>
</div>
<div className="modal-body">
<p>Você também pode baixa-lo agora em pdf</p>
</div>
<div className="modal-footer">
<button className="btn btn-primary"><i className='bi bi-file-pdf-fill'></i> baixar em pdf</button>
<button
type="button"
className="btn btn-primary"
onClick={() => {setShowModal(false); navigate(('/medico/relatorios'))}}
>
Fechar
</button>
</div>
</div>
</div>
</div>
)}
<h3>Criar novo relatório</h3>
<div className='card'>
<form action="" onSubmit={handleSubmit}>
<div id='primeiraLinha'>
<div className="col-md-2 mb-3">
<label >Nome do paciente:</label>
<input type="text" step="0.1" className="form-control" name="paciente_nome" onChange={handleChange} value={DictInfo.paciente_nome || ''} required />
</div>
<div className="col-md-2 mb-3">
<label >CPF do paciente:</label>
<input type="text" step="0.1" className="form-control" name="paciente_cpf" onChange={handleChange} value={DictInfo.paciente_cpf || ''} required />
</div>
<div className="col-md-2 mb-3">
<label >Nome do médico:</label>
<input type="text" step="0.1" className="form-control" name="requested_by" onChange={handleChange} value={DictInfo.requested_by || ''} required />
</div>
<div className="col-md-2 mb-3">
<label >Exame:</label>
<input type="text" className="form-control" name="exam" onChange={handleChange} />
</div>
<div className="col-md-2 mb-3">
<label >Data do exame:</label>
<input type="date" className="form-control" name="data_exame" onChange={handleChange} value={DictInfo.data_exame || ''} />
</div>
</div>
<div className='row'>
<div className="col-md-2 mb-3">
<label htmlFor='diagnostico'>Diagnostico:</label>
<textarea name="diagnostico" id="diagnostico" onChange={handleChange} cols="30" rows="5" value={DictInfo.diagnostico || ''}></textarea>
</div>
<div className="col-md-2 mb-3">
<label htmlFor='conclusao'>Conclusão:</label>
<textarea name="conclusao" id="conclusao" onChange={handleChange} cols="30" rows="5" value={DictInfo.conclusao || ''}></textarea>
</div>
</div>
<button
className="btn btn-success submitButton"
type='submit'
>
Salvar
</button>
</form>
</div>
<h3>Modelo do relatório</h3>
<div id="folhaA4">
<div id='header-relatorio'>
<p>Clinica Rise up</p>
<p>Dr {DictInfo.requested_by} - CRM/SP 123456</p>
<p>Avenida - (79) 9 4444-4444</p>
</div>
<div id='infoPaciente'>
<p>Paciente: {DictInfo?.paciente_nome}</p>
<p>Data de nascimento: </p>
<p>Data do exame: {DictInfo.data_exame}</p>
<p>Exame: {DictInfo.exame}</p>
<p>Diagnostico: {DictInfo.diagnostico}</p>
<p>Conclusão: {DictInfo.conclusao}</p>
</div>
<div>
<p>Dr {DictInfo.requested_by}</p>
<p>Emitido em: 0</p>
</div>
</div>
<h3>Criar Novo Relatorio</h3>
<FormRelatorio DictInfo={DictInfo} setDictInfo={setDictInfo} onSave={handleSave} />
</div>
)
}

22
src/PagesMedico/styleMedico/geral.css
View File

@ -187,3 +187,25 @@ td {
padding: 12px;
border-bottom: 1px solid var(--cor-borda);
}
.modal-tabela-relatorio{
width: 70rem;
}
.modal-dialog.modal-tabela-relatorio {
max-width: 900px; /* largura máxima da modal */
width: 100%; /* ocupa até o limite */
margin: 1.75rem auto; /* centraliza vertical e horizontalmente */
}
.modal-content {
height: auto; /* altura variável conforme o conteúdo */
max-height: none; /* remove limite interno */
}
.modal-body {
max-height: 70vh; /* limite vertical — 80% da altura da tela */
overflow-y: auto; /* ativa rolagem vertical */
overflow-x: hidden; /* impede rolagem horizontal */
padding: 20px; /* espaço interno mais agradável */
}

201
src/components/FormRelatorio.jsx Normal file
View File

@ -0,0 +1,201 @@
import React from 'react'
import '../PagesMedico/styleMedico/FormNovoRelatorio.css'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAuth } from '../components/utils/AuthProvider'
import { GetPatientByCPF } from '../components/utils/Functions-Endpoints/Patient'
import { FormatCPF } from '../components/utils/Formatar/Format'
import html2pdf from 'html2pdf.js'
const FormRelatorio = ({onSave, DictInfo, setDictInfo }) => {
const {getAuthorizationHeader} = useAuth()
let authHeader = getAuthorizationHeader()
const navigate= useNavigate()
const [showModal, setShowModal] = useState(false)
const BaixarPDFdoRelatorio = () => {
const elemento = document.getElementById("folhaA4"); // tua div do relatório
const opt = {
margin: 0,
filename: `relatorio_${DictInfo?.paciente_nome || "paciente"}.pdf`,
html2canvas: { scale: 2 },
jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
};
html2pdf().set(opt).from(elemento).save();
}
const handleChange = (e) => {
const { name, value } = e.target;
console.log(name, value)
if(name === 'paciente_cpf') {
const formattedCPF = FormatCPF(value);
setDictInfo((prev) => ({ ...prev, [name]: formattedCPF }));
const fetchPatient = async () => {
const patientData = await GetPatientByCPF(formattedCPF, authHeader);
if (patientData) {
setDictInfo((prev) => ({
...prev,
paciente_cpf:value,
paciente_nome: patientData.full_name,
paciente_id: patientData.id
}));
}
};
if(formattedCPF.length === 14){
fetchPatient();
}
}else{
setDictInfo((prev) => ({ ...prev, [name]: value }));
}
}
const handleSubmit = (e) => {
e.preventDefault();
console.log(DictInfo)
setShowModal(true)
onSave({
"patient_id": DictInfo.paciente_id,
"exam": DictInfo.exam,
"diagnosis": DictInfo.diagnosis,
"conclusion": DictInfo.conclusao,
"status": "draft",
"requested_by": DictInfo.requested_by,
"hide_date": false,
"hide_signature": false,
});
}
return (
<div>
{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 bg-success text-white">
<h5 className="modal-title ">Relatório criado com sucesso</h5>
<button
type="button"
className="btn-close"
onClick={() => setShowModal(false)}
></button>
</div>
<div className="modal-body">
<p>Você também pode baixa-lo agora em pdf</p>
</div>
<div className="modal-footer">
<button className="btn btn-primary" onClick={ BaixarPDFdoRelatorio}><i className='bi bi-file-pdf-fill'></i> baixar em pdf</button>
<button
type="button"
className="btn btn-primary"
onClick={() => {setShowModal(false); navigate(('/medico/relatorios'))}}
>
Fechar
</button>
</div>
</div>
</div>
</div>
)}
<div className='card'>
<form action="" onSubmit={handleSubmit}>
<div id='primeiraLinha'>
<div className="col-md-2 mb-3">
<label >Nome do paciente:</label>
<input type="text" step="0.1" className="form-control" name="paciente_nome" onChange={handleChange} value={DictInfo.paciente_nome || ''} required />
</div>
<div className="col-md-2 mb-3">
<label >CPF do paciente:</label>
<input type="text" step="0.1" className="form-control" name="paciente_cpf" onChange={handleChange} value={DictInfo.paciente_cpf || ''} required />
</div>
<div className="col-md-2 mb-3">
<label >Nome do médico:</label>
<input type="text" step="0.1" className="form-control" name="requested_by" onChange={handleChange} value={DictInfo.requested_by || ''} required />
</div>
<div className="col-md-2 mb-3">
<label >Exame:</label>
<input type="text" className="form-control" name="exam" onChange={handleChange} />
</div>
<div className="col-md-2 mb-3">
<label >Data do exame:</label>
<input type="date" className="form-control" name="data_exame" onChange={handleChange} value={DictInfo.data_exame || ''} />
</div>
</div>
<div className='row'>
<div className="col-md-2 mb-3">
<label htmlFor='diagnostico'>Diagnostico:</label>
<textarea name="diagnostico" id="diagnostico" onChange={handleChange} cols="30" rows="5" value={DictInfo.diagnostico || ''}></textarea>
</div>
<div className="col-md-2 mb-3">
<label htmlFor='conclusao'>Conclusão:</label>
<textarea name="conclusao" id="conclusao" onChange={handleChange} cols="30" rows="5" value={DictInfo.conclusao || ''}></textarea>
</div>
</div>
<button
className="btn btn-success submitButton"
type='submit'
>
Salvar
</button>
</form>
</div>
<h3>Modelo do relatório</h3>
<div id="folhaA4">
<div id='header-relatorio'>
<p>Clinica Rise up</p>
<p>Dr {DictInfo.requested_by} - CRM/SP 123456</p>
<p>Avenida - (79) 9 4444-4444</p>
</div>
<div id='infoPaciente'>
<p>Paciente: {DictInfo?.paciente_nome}</p>
<p>Data de nascimento: </p>
<p>Data do exame: {DictInfo.data_exam}</p>
<p>Exame: {DictInfo.exam}</p>
<p>Diagnostico: {DictInfo.diagnostico}</p>
<p>Conclusão: {DictInfo.conclusao}</p>
</div>
<div>
<p>Dr {DictInfo.requested_by}</p>
<p>Emitido em: 0</p>
</div>
</div>
</div>
)
}
export default FormRelatorio

2
src/perfis/Perfil_medico/PerfilMedico.jsx
View File

@ -8,6 +8,7 @@ import Agendamento from "../../PagesMedico/Agendamento";
import Chat from "../../PagesMedico/Chat";
import DoctorItems from "../../data/sidebar-items-medico.json";
import FormNovoRelatorio from "../../PagesMedico/FormNovoRelatorio";
import EditPageRelatorio from "../../PagesMedico/EditPageRelatorio";
// ...existing code...
function PerfilMedico() {
@ -19,6 +20,7 @@ function PerfilMedico() {
<Routes>
<Route path="/" element={<DoctorRelatorioManager />} />
<Route path="/relatorios/criar" element={<FormNovoRelatorio />} />
<Route path="/relatorios/:id/edit" element={<EditPageRelatorio />} />
<Route path="/prontuario" element={<Prontuario />} />
<Route path="/relatorios" element={<DoctorRelatorioManager />} />
<Route path="/agendamentoMedico" element={<Agendamento />} />