agendamento de consulta do medico e paciente

This commit is contained in:
GilenoNeto901 2025-12-03 22:25:55 -03:00
commit 17a69ed57b
4 changed files with 728 additions and 406 deletions

View File

@ -1,4 +1,4 @@
import React, { useState, useMemo, useEffect, useCallback } from "react";
import React, { useState, useMemo, useEffect, useCallback } from "react";
import { useNavigate } from "react-router-dom";
import API_KEY from "../components/utils/apiKeys.js";
import AgendamentoCadastroManager from "../pages/AgendamentoCadastroManager.jsx";
@ -15,6 +15,7 @@ import {
Edit,
Trash2,
CheckCircle,
FileText,
} from "lucide-react";
import "../pages/style/Agendamento.css";
import "../pages/style/FilaEspera.css";
@ -295,6 +296,18 @@ const Agendamento = () => {
setPageConsulta(true);
};
const handleCreateReport = (appointment) => {
navigate("/medico/novo-relatorio", {
state: {
appointment,
patient_id: appointment.patient_id,
doctor_id: appointment.doctor_id,
paciente_nome: appointment.paciente_nome,
medico_nome: appointment.medico_nome,
},
});
};
const handleSearchMedicos = (term) => {
setSearchTermDoctor(term);
if (term.trim()) {
@ -609,6 +622,16 @@ const filtrarPorPaciente = (appointments) => {
<Edit size={16} />
</button>
)}
{app.status !== "cancelled" && (
<button
className="btn-action btn-report-blue"
onClick={() => handleCreateReport(app)}
title="Criar Relatório / Laudo"
aria-label={`Criar relatório para ${app.paciente_nome}`}
>
<FileText size={16} />
</button>
)}
{app.status !== "cancelled" && (
<button
className="btn-action btn-delete"

View File

@ -1,5 +1,6 @@
// src/PagesMedico/FormNovoRelatorio.jsx
import React, { useEffect, useState, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { useNavigate, useLocation } from 'react-router-dom';
import API_KEY from '../components/utils/apiKeys';
import { useAuth } from '../components/utils/AuthProvider';
import TiptapEditor from './TiptapEditor';
@ -12,6 +13,7 @@ const FormNovoRelatorio = () => {
const { getAuthorizationHeader } = useAuth();
const authHeader = getAuthorizationHeader();
const navigate = useNavigate();
const location = useLocation();
const [patients, setPatients] = useState([]);
const [doctors, setDoctors] = useState([]);
@ -33,6 +35,7 @@ const FormNovoRelatorio = () => {
const [showDoctorDropdown, setShowDoctorDropdown] = useState(false);
const patientRef = useRef();
const doctorRef = useRef();
const [lockedFromAppointment, setLockedFromAppointment] = useState(false);
useEffect(() => {
let mounted = true;
@ -129,7 +132,24 @@ const FormNovoRelatorio = () => {
const handleEditorChange = (html) => setForm(prev => ({ ...prev, contentHtml: html }));
// 🔹 Agora com created_by sendo o ID do usuário logado
useEffect(() => {
if (location && location.state && location.state.appointment) {
const appt = location.state.appointment;
const paciente_nome = location.state.paciente_nome || appt.paciente_nome || '';
const medico_nome = location.state.medico_nome || appt.medico_nome || '';
setForm(prev => ({
...prev,
patient_id: appt.patient_id || prev.patient_id,
patient_name: paciente_nome || prev.patient_name,
patient_birth: prev.patient_birth || '',
doctor_id: appt.doctor_id || prev.doctor_id,
doctor_name: medico_nome || prev.doctor_name,
contentHtml: generateTemplate(paciente_nome, prev.patient_birth || '', medico_nome)
}));
setLockedFromAppointment(true);
}
}, [location]);
const handleSubmit = async (e) => {
e.preventDefault();
if (!form.patient_id) return alert('Selecione o paciente (clicando no item) antes de salvar.');
@ -149,7 +169,6 @@ const FormNovoRelatorio = () => {
requested_by: form.doctor_name || ''
};
// Busca o id do usuário logado (via token)
let userId = null;
try {
const token = authHeader?.replace(/^Bearer\s+/i, '') || '';
@ -189,8 +208,6 @@ const FormNovoRelatorio = () => {
}
const created = await res.json();
console.log('Relatório criado:', created);
window.dispatchEvent(new Event('reports:refresh'));
alert('Relatório criado com sucesso!');
navigate('/medico/relatorios');
@ -211,11 +228,12 @@ const FormNovoRelatorio = () => {
<input
className="form-control"
placeholder="Comece a digitar (ex.: m para pacientes que começam com m)"
value={patientQuery}
onChange={(e) => { setPatientQuery(e.target.value); setShowPatientDropdown(true); }}
onFocus={() => setShowPatientDropdown(true)}
value={lockedFromAppointment ? form.patient_name : patientQuery}
onChange={(e) => { if (!lockedFromAppointment) { setPatientQuery(e.target.value); setShowPatientDropdown(true); } }}
onFocus={() => { if (!lockedFromAppointment) setShowPatientDropdown(true); }}
disabled={lockedFromAppointment}
/>
{showPatientDropdown && patientQuery && (
{!lockedFromAppointment && showPatientDropdown && patientQuery && (
<ul className="list-group position-absolute" style={{ zIndex: 50, maxHeight: 220, overflowY: 'auto', width: '100%' }}>
{filteredPatients.length > 0 ? filteredPatients.map(p => (
<li key={p.id} className="list-group-item list-group-item-action" onClick={() => choosePatient(p)}>
@ -232,11 +250,12 @@ const FormNovoRelatorio = () => {
<input
className="form-control"
placeholder="Comece a digitar o nome do médico"
value={doctorQuery}
onChange={(e) => { setDoctorQuery(e.target.value); setShowDoctorDropdown(true); }}
onFocus={() => setShowDoctorDropdown(true)}
value={lockedFromAppointment ? form.doctor_name : doctorQuery}
onChange={(e) => { if (!lockedFromAppointment) { setDoctorQuery(e.target.value); setShowDoctorDropdown(true); } }}
onFocus={() => { if (!lockedFromAppointment) setShowDoctorDropdown(true); }}
disabled={lockedFromAppointment}
/>
{showDoctorDropdown && doctorQuery && (
{!lockedFromAppointment && showDoctorDropdown && doctorQuery && (
<ul className="list-group position-absolute" style={{ zIndex: 50, maxHeight: 220, overflowY: 'auto', width: '100%' }}>
{filteredDoctors.length > 0 ? filteredDoctors.map(d => (
<li key={d.id} className="list-group-item list-group-item-action" onClick={() => chooseDoctor(d)}>
@ -261,4 +280,4 @@ const FormNovoRelatorio = () => {
);
};
export default FormNovoRelatorio;
export default FormNovoRelatorio;

File diff suppressed because it is too large Load Diff

View File

@ -43,33 +43,6 @@
margin-left: 0;
}
@media (max-width: 576px) {
.busca-atendimento {
flex-direction: column;
gap: 10px;
}
.container-btns-agenda-fila_esepera {
flex-direction: column;
align-items: flex-start;
gap: 10px;
flex-wrap: wrap; /* Adicionado para permitir quebra de linha nos botões */
}
.btns-gerenciamento-e-consulta {
width: 100%;
justify-content: space-between;
flex-wrap: wrap; /* Adicionado para permitir quebra de linha nos botões */
}
.btn-adicionar-consulta {
padding: 8px 12px; /* Reduzido o padding */
font-size: 0.8rem; /* Reduzido o tamanho da fonte */
white-space: normal; /* Permite quebra de linha no texto do botão */
text-align: center;
}
}
.container-btns-agenda-fila_esepera {
margin-top: 20px;
margin-left: 0;
@ -84,7 +57,7 @@
background-color: transparent;
border: 0;
border-bottom: 2px solid transparent;
padding: 10px 12px; /* Reduzido o padding */
padding: 10px 12px;
border-radius: 0;
font-weight: 600;
color: #718096;
@ -136,22 +109,8 @@
margin-top: 20px;
}
@media (max-width: 768px) {
.calendar-wrapper {
flex-direction: column;
padding: 16px;
}
}
.calendar-info-panel { flex: 0 0 300px; border-right: 1px solid #E2E8F0; padding-right: 24px; display: flex; flex-direction: column; }
@media (max-width: 768px) {
.calendar-info-panel {
border-right: none;
border-bottom: 1px solid #E2E8F0;
padding-right: 0;
padding-bottom: 16px;
}
}
.info-date-display { background-color: #EDF2F7; border-radius: 8px; padding: 12px; text-align: center; margin-bottom: 16px; }
.info-date-display span { font-weight: 600; color: #718096; text-transform: uppercase; font-size: 0.9rem; }
.info-date-display strong { display: block; font-size: 2.5rem; font-weight: 700; color: #2D3748; }
@ -179,13 +138,6 @@
.nav-buttons button:hover { background-color: #EDF2F7; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
@media (max-width: 1200px) {
.calendar-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
.calendar-grid { grid-template-columns: repeat(2, 1fr); }
}
.day-header { font-weight: 600; color: #718096; text-align: center; padding: 8px 0; font-size: 0.875rem; }
.day-cell { min-height: 110px; border-radius: 8px; border: 1px solid #E2E8F0; padding: 8px; transition: background-color 0.2s, border-color 0.2s; cursor: pointer; position: relative; }
.day-cell span { font-weight: 600; color: #4A5568; }
@ -232,7 +184,6 @@
color: #C53030;
}
.appointment-item {
display: flex;
align-items: center;
@ -275,87 +226,104 @@
background-color: #C53030;
}
.table-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table {
width: 100%;
border-collapse: collapse;
min-width: 600px;
}
@media (max-width: 768px) {
.unidade-selecionarprofissional { flex-direction: column; align-items: stretch; gap: 12px; }
.calendar-wrapper { flex-direction: column; padding: 16px; }
.calendar-info-panel { flex: 0 0 auto; border-right: none; border-bottom: 1px solid #E2E8F0; padding-right: 0; padding-bottom: 16px; }
.busca-atendimento {
flex-direction: column;
gap: 10px;
}
.container-btns-agenda-fila_esepera {
flex-direction: column;
align-items: flex-start;
gap: 10px;
flex-wrap: wrap;
}
.btns-gerenciamento-e-consulta {
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
}
.btn-adicionar-consulta {
padding: 8px 12px;
font-size: 0.8rem;
white-space: normal;
text-align: center;
}
.unidade-selecionarprofissional {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.calendar-wrapper {
flex-direction: column;
padding: 16px;
}
.calendar-info-panel {
border-right: none;
border-bottom: 1px solid #E2E8F0;
padding-right: 0;
padding-bottom: 16px;
}
.calendar-grid { grid-template-columns: repeat(4, 1fr); }
.calendar-controls { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 576px) {
.calendar-grid { grid-template-columns: 1fr; } /* 1 coluna em telas muito pequenas */
.calendar-grid { grid-template-columns: 1fr; }
.date-indicator h2 { font-size: 1.25rem; }
.legend-item { font-size: 0.75rem; padding: 4px 8px; }
.appointment-item { flex-direction: column; align-items: stretch; gap: 8px; }
.appointment-actions { width: 100%; }
.btn-action { width: 100%; }
}
.btn-adicionar-consulta {
background-color: #2a67e2;
color: #fff;
padding: 10px 24px;
border-radius: 8px;
border: none;
font-weight: 600;
font-size: 1rem;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition: background 0.2s;
}
.btn-adicionar-consulta:hover {
background-color: #1d4ed8;
}
.btn-adicionar-consulta i {
font-size: 1.2em;
vertical-align: middle;
}
.btn-adicionar-consulta i {
font-size: 1.2em;
vertical-align: middle;
display: flex;
align-items: center;
justify-content: center;
}
.container-btns-agenda-fila_esepera {
display: flex;
justify-content: space-between;
align-items: center;
margin: 15px 0 20px;
color: #fff;
}
.tabs-agenda-fila {
display: flex;
gap: 10px;
}
.btns-gerenciamento-e-consulta {
display: flex;
gap: 10px;
flex-wrap: wrap; /* Permite quebra de linha */
}
.container-btns-agenda-fila_esepera {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 0 8px;
}
.calendario-ou-filaespera {
margin-top: 0;
padding-top: 0;
}
.calendar-wrapper {
margin-top: 0;
}
.calendar-legend {
display: flex;
gap: 8px;
margin-top: 12px; /* afasta dos filtros acima */
@media (max-width: 425px) {
.calendar-main {
overflow-x: auto;
}
.calendar-grid {
min-width: 400px;
grid-template-columns: repeat(7, 1fr);
}
.day-cell {
min-height: 80px;
}
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid #E2E8F0;
border-radius: 8px;
margin-bottom: 16px;
}
table {
min-width: 600px;
font-size: 0.875rem;
}
table th,
table td {
padding: 8px;
white-space: nowrap;
}
}