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

Merge branch 'main' of https://git.popcode.com.br/RiseUP/riseup-squad23 into Disponibilidades5

Browse Source
This commit is contained in:
pedrofedericoo 2025-11-19 12:26:07 -03:00
commit 63121d6702
41 changed files with 6730 additions and 4229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3299
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

11
package.json
View File

@ -5,6 +5,14 @@
"dependencies": {
"@ckeditor/ckeditor5-build-classic": "^41.4.2",
"@ckeditor/ckeditor5-react": "^11.0.0",
"@fortawesome/fontawesome-svg-core": "^7.1.0",
"@fortawesome/free-solid-svg-icons": "^7.1.0",
"@fortawesome/react-fontawesome": "^3.1.0",
"@fullcalendar/core": "^6.1.19",
"@fullcalendar/daygrid": "^6.1.19",
"@fullcalendar/interaction": "^6.1.19",
"@fullcalendar/react": "^6.1.19",
"@fullcalendar/timegrid": "^6.1.19",
"@jitsi/react-sdk": "^1.4.0",
"@sweetalert2/theme-dark": "^5.0.27",
"@testing-library/dom": "^10.4.1",
@ -20,7 +28,7 @@
"bootstrap": "^5.3.8",
"bootstrap-icons": "^1.13.1",
"cors": "^2.8.5",
"dayjs": "^1.11.18",
"dayjs": "^1.11.19",
"dotenv": "^17.2.3",
"express": "^5.1.0",
"firebase": "^12.5.0",
@ -44,6 +52,7 @@
"react-quill": "^2.0.0",
"react-router-dom": "^7.9.2",
"react-scripts": "5.0.1",
"react-toastify": "^11.0.5",
"recharts": "^3.1.2",
"sweetalert2": "^11.22.4",
"tiptap": "^1.32.2",

1059
src/PagesMedico/DoctorAgendamentoManager.jsx
View File

File diff suppressed because it is too large Load Diff

130
src/PagesMedico/DoctorRelatorioManager.jsx
View File

@ -1,9 +1,11 @@
// src/PagesMedico/DoctorRelatorioManager.jsx
import API_KEY from '../components/utils/apiKeys';
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 { GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor';
import { UserInfos } from '../components/utils/Functions-Endpoints/General';
import { useNavigate } from 'react-router-dom';
import html2pdf from 'html2pdf.js';
import TiptapViewer from './TiptapViewer';
@ -12,12 +14,11 @@ import './styleMedico/DoctorRelatorioManager.css';
const DoctorRelatorioManager = () => {
const navigate = useNavigate();
const { getAuthorizationHeader } = useAuth();
let authHeader = getAuthorizationHeader();
const authHeader = getAuthorizationHeader();
const [relatoriosOriginais, setRelatoriosOriginais] = useState([]);
const [relatoriosFiltrados, setRelatoriosFiltrados] = useState([]);
const [relatoriosFinais, setRelatoriosFinais] = useState([]);
const [pacientesData, setPacientesData] = useState({});
const [pacientesComRelatorios, setPacientesComRelatorios] = useState([]);
const [medicosComRelatorios, setMedicosComRelatorios] = useState([]);
const [showModal, setShowModal] = useState(false);
@ -30,8 +31,7 @@ const DoctorRelatorioManager = () => {
const [paginaAtual, setPaginaAtual] = useState(1);
const [itensPorPagina, setItensPorPagina] = useState(10);
const totalPaginas = Math.ceil(relatoriosFinais.length / itensPorPagina);
const totalPaginas = Math.max(1, Math.ceil(relatoriosFinais.length / itensPorPagina));
const indiceInicial = (paginaAtual - 1) * itensPorPagina;
const indiceFinal = indiceInicial + itensPorPagina;
const relatoriosPaginados = relatoriosFinais.slice(indiceInicial, indiceFinal);
@ -41,14 +41,76 @@ const DoctorRelatorioManager = () => {
const fetchReports = async () => {
try {
var myHeaders = new Headers();
const myHeaders = new Headers();
myHeaders.append('apikey', API_KEY);
if (authHeader) myHeaders.append('Authorization', authHeader);
var requestOptions = { method: 'GET', headers: myHeaders, redirect: 'follow' };
const requestOptions = { method: 'GET', headers: myHeaders, redirect: 'follow' };
const res = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?select=*", requestOptions);
const data = await res.json();
// Tenta descobrir o ID do usuário logado para aplicar filtro por médico
let userId = null;
let userFullName = null;
try {
const token = authHeader ? authHeader.replace(/^Bearer\s+/i, '') : '';
if (token) {
const userInfo = await UserInfos(token);
userId = userInfo?.id || userInfo?.user?.id || userInfo?.sub || null;
userFullName = userInfo?.full_name || (userInfo?.user && userInfo.user.full_name) || null;
}
} catch (err) {
console.warn('Não foi possível obter UserInfos (pode não estar logado):', err);
}
// Monta a URL com possíveis filtros preferenciais
const baseUrl = "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?select=*";
let data = [];
if (userId) {
// 1) tenta por doctor_id
try {
const res = await fetch(`${baseUrl}&doctor_id=eq.${userId}`, requestOptions);
data = await res.json();
} catch (e) {
console.warn('Erro ao buscar por doctor_id:', e);
data = [];
}
// 2) fallback para created_by (se vazio)
if ((!Array.isArray(data) || data.length === 0) && userId) {
try {
const res2 = await fetch(`${baseUrl}&created_by=eq.${userId}`, requestOptions);
data = await res2.json();
} catch (e) {
console.warn('Erro ao buscar por created_by:', e);
data = [];
}
}
// 3) fallback para requested_by com nome completo (se ainda vazio)
if ((!Array.isArray(data) || data.length === 0) && userFullName) {
try {
// encode para evitar problemas com espaços/caracteres especiais
const encodedName = encodeURIComponent(userFullName);
const res3 = await fetch(`${baseUrl}&requested_by=eq.${encodedName}`, requestOptions);
data = await res3.json();
} catch (e) {
console.warn('Erro ao buscar por requested_by:', e);
data = [];
}
}
}
// Se não obteve userId ou nenhuma das tentativas acima retornou algo, busca tudo (comportamento anterior)
if (!userId || (!Array.isArray(data) || data.length === 0)) {
try {
const resAll = await fetch(baseUrl, requestOptions);
data = await resAll.json();
} catch (e) {
console.error('Erro listar relatórios (busca completa):', e);
data = [];
}
}
// garante unicidade e ordenação por criação
const uniqueMap = new Map();
(Array.isArray(data) ? data : []).forEach(r => {
if (r && r.id) uniqueMap.set(r.id, r);
@ -62,7 +124,7 @@ const DoctorRelatorioManager = () => {
setRelatoriosFinais(unique);
}
} catch (err) {
console.error('Erro listar relatórios', err);
console.error('Erro listar relatórios (catch):', err);
if (mounted) {
setRelatoriosOriginais([]);
setRelatoriosFiltrados([]);
@ -82,43 +144,57 @@ const DoctorRelatorioManager = () => {
};
}, [authHeader]);
// Busca dados de pacientes e médicos baseados na lista final que aparece na tela
useEffect(() => {
const fetchRelData = async () => {
const pacientes = [];
const medicos = [];
for (let i = 0; i < relatoriosFiltrados.length; i++) {
const rel = relatoriosFiltrados[i];
for (let i = 0; i < relatoriosFinais.length; i++) {
const rel = relatoriosFinais[i];
// paciente
try {
const pacienteRes = await GetPatientByID(rel.patient_id, authHeader);
pacientes.push(Array.isArray(pacienteRes) ? pacienteRes[0] : pacienteRes);
} catch (err) {
pacientes.push(null);
}
// médico: prioriza campos com id (doctor_id ou created_by). Se tiver somente requested_by (nome), usa nome.
try {
const doctorId = rel.created_by || rel.requested_by || null;
if (doctorId) {
const docRes = await GetDoctorByID(doctorId, authHeader);
if (rel.doctor_id) {
const docRes = await GetDoctorByID(rel.doctor_id, authHeader);
medicos.push(Array.isArray(docRes) ? docRes[0] : docRes);
} else if (rel.created_by) {
// created_by costuma ser id
const docRes = await GetDoctorByID(rel.created_by, authHeader);
medicos.push(Array.isArray(docRes) ? docRes[0] : docRes);
} else if (rel.requested_by) {
medicos.push({ full_name: rel.requested_by });
} else {
medicos.push({ full_name: rel.requested_by || '' });
medicos.push({ full_name: '' });
}
} catch (err) {
// fallback para requested_by se houver
medicos.push({ full_name: rel.requested_by || '' });
}
}
setPacientesComRelatorios(pacientes);
setMedicosComRelatorios(medicos);
};
if (relatoriosFiltrados.length > 0) fetchRelData();
if (relatoriosFinais.length > 0) fetchRelData();
else {
setPacientesComRelatorios([]);
setMedicosComRelatorios([]);
}
}, [relatoriosFiltrados, authHeader]);
}, [relatoriosFinais, authHeader]);
const abrirModal = (relatorio, index) => {
const abrirModal = (relatorio, pageIndex) => {
// encontra índice global do relatório no array relatoriosFinais (para alinhar com pacientes/medicos)
const globalIndex = relatoriosFinais.findIndex(r => r.id === relatorio.id);
const indexToUse = globalIndex >= 0 ? globalIndex : (indiceInicial + pageIndex);
setRelatorioModal(relatorio);
setModalIndex(index);
setModalIndex(indexToUse);
setShowModal(true);
};
@ -127,6 +203,7 @@ const DoctorRelatorioManager = () => {
setTermoPesquisa('');
setFiltroExame('');
setRelatoriosFinais(relatoriosOriginais);
setPaginaAtual(1);
};
const BaixarPDFdoRelatorio = (nome_paciente, idx) => {
@ -198,17 +275,17 @@ const DoctorRelatorioManager = () => {
<div id='infoPaciente' style={{ padding: '0 6px' }}>
<p><strong>Paciente:</strong> {pacientesComRelatorios[modalIndex]?.full_name}</p>
<p><strong>Data de nascimento:</strong> {pacientesComRelatorios[modalIndex]?.birth_date || '—'}</p>
<p><strong>Data do exame:</strong> {relatoriosFiltrados[modalIndex]?.due_at || '—'}</p>
<p><strong>Data do exame:</strong> {relatoriosFinais[modalIndex]?.due_at || '—'}</p>
<p style={{ marginTop: 12, fontWeight: '700' }}>Conteúdo do Relatório:</p>
<div className="tiptap-viewer-wrapper">
<TiptapViewer htmlContent={relatoriosFiltrados[modalIndex]?.content_html || relatoriosFiltrados[modalIndex]?.content || 'Relatório não preenchido.'} />
<TiptapViewer htmlContent={relatoriosFinais[modalIndex]?.content_html || relatoriosFinais[modalIndex]?.content || 'Relatório não preenchido.'} />
</div>
</div>
<div style={{ marginTop: 20, padding: '0 6px' }}>
<p>Dr {medicosComRelatorios[modalIndex]?.full_name || relatoriosFiltrados[modalIndex]?.requested_by}</p>
<p style={{ color: '#6c757d', fontSize: '0.95rem' }}>Emitido em: {relatoriosFiltrados[modalIndex]?.created_at || '—'}</p>
<p>Dr {medicosComRelatorios[modalIndex]?.full_name || relatoriosFinais[modalIndex]?.requested_by}</p>
<p style={{ color: '#6c757d', fontSize: '0.95rem' }}>Emitido em: {relatoriosFinais[modalIndex]?.created_at || '—'}</p>
</div>
</div>
</div>
@ -295,7 +372,8 @@ const DoctorRelatorioManager = () => {
<tbody>
{relatoriosPaginados.length > 0 ? (
relatoriosPaginados.map((relatorio, index) => {
const paciente = pacientesData[relatorio.patient_id];
const globalIndex = relatoriosFinais.findIndex(r => r.id === relatorio.id);
const paciente = pacientesComRelatorios[globalIndex];
return (
<tr key={relatorio.id}>
<td>{paciente?.full_name || 'Carregando...'}</td>
@ -381,4 +459,4 @@ const DoctorRelatorioManager = () => {
);
};
export default DoctorRelatorioManager;
export default DoctorRelatorioManager;

770
src/PagesPaciente/ConsultasPaciente.jsx
View File

@ -1,419 +1,429 @@
import React from 'react'
import "./style.css"
import CardConsultaPaciente from './CardConsultaPaciente'
import { useNavigate } from 'react-router-dom'
import { useEffect, useState, useMemo } from 'react'
import API_KEY from '../components/utils/apiKeys'
import { useAuth } from '../components/utils/AuthProvider'
import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient'
import { GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor'
import React, { useState, useMemo, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import API_KEY from '../components/utils/apiKeys.js';
import AgendamentoCadastroManager from '../pages/AgendamentoCadastroManager.jsx';
import { useAuth } from '../components/utils/AuthProvider.js';
import dayjs from 'dayjs';
import 'dayjs/locale/pt-br';
import isBetween from 'dayjs/plugin/isBetween';
import localeData from 'dayjs/plugin/localeData';
import { ChevronLeft, ChevronRight, Edit, Trash2 } from 'lucide-react';
import "../pages/style/Agendamento.css";
import '../pages/style/FilaEspera.css';
import Spinner from '../components/Spinner.jsx';
import { UserInfos } from '../components/utils/Functions-Endpoints/General'
import dayjs from 'dayjs'
import TabelaAgendamentoDia from "../components/AgendarConsulta/TabelaAgendamentoDia"
const ConsultasPaciente = ({ setDictInfo }) => {
const { getAuthorizationHeader } = useAuth()
const [agendamentosOrganizados, setAgendamentosOrganizados] = useState({})
const [listaTodasConsultas, setListaTodasConsultas] = useState([])
const [patientID, setPatientID] = useState("")
const [showDeleteModal, setShowDeleteModal] = useState(false)
const [selectedID, setSelectedId] = useState("")
let authHeader = getAuthorizationHeader()
dayjs.locale('pt-br');
dayjs.extend(isBetween);
dayjs.extend(localeData);
const Agendamento = ({ setDictInfo }) => {
const navigate = useNavigate();
const { getAuthorizationHeader, user } = useAuth();
const [motivoCancelamento, setMotivoCancelamento] = useState("")
const [consultas, setConsultas] = useState([])
const [consultasOrganizadas, setConsultasOrganizadas] = useState({})
const [filaDeEspera, setFilaDeEspera] = useState([])
const [viewFila, setViewFila] = useState(false)
const [isLoading, setIsLoading] = useState(true);
const [DictAgendamentosOrganizados, setDictAgendamentosOrganizados] = useState({});
const [filaEsperaData, setFilaDeEsperaData] = useState([]);
const [FiladeEspera, setFiladeEspera] = useState(false);
const [PageNovaConsulta, setPageConsulta] = useState(false);
const [listaConsultasID, setListaConsultaID] = useState([])
const [coresConsultas,setCoresConsultas] = useState([])
const [showConfirmModal, setShowConfirmModal] = useState(false)
const [currentDate, setCurrentDate] = useState(dayjs());
const [selectedDay, setSelectedDay] = useState(dayjs());
const [quickJump, setQuickJump] = useState({
month: currentDate.month(),
year: currentDate.year()
});
const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
const [appointmentToCancel, setAppointmentToCancel] = useState(null);
const [cancellationReason, setCancellationReason] = useState('');
const authHeader = useMemo(() => getAuthorizationHeader(), [getAuthorizationHeader]);
useEffect(() => {
console.log(listaConsultasID, coresConsultas, "ojwhdofigewfey7few0fr74r")
}, [coresConsultas, listaConsultasID])
useMemo(() => {
let conjuntoConsultas = {}
let filaEspera = []
const fetchInfosConsultas = async (consulta) => {
//console.log(doctor, "PACIENTE TRAZIDO PELO ")
//let consultaMelhorada = {...consulta, paciente_nome:paciente[0].full_name, medico_nome:doctor[0].full_name }
//console.log(consultaMelhorada,"ID DO MEDICO")
for(let i = 0; listaTodasConsultas.length > i; i++){
let consulta = listaTodasConsultas[i]
let doctor = await GetDoctorByID(consulta.doctor_id, authHeader)
let paciente = await GetPatientByID(consulta.patient_id, authHeader)
consulta = {...consulta, medico_nome:doctor[0]?.full_name, paciente_nome:paciente[0]?.full_name}
if(consulta.status === "requested"){
filaEspera.push(consulta)
const carregarDados = async () => {
const patientId = user?.patient_id || "6e7f8829-0574-42df-9290-8dbb70f75ada";
}else{
let data = consulta.scheduled_at.split("T")[0]
let chavesConsultas = Object.keys(conjuntoConsultas)
if(chavesConsultas.includes(data)){
let lista = conjuntoConsultas[data]
lista.push(consulta)
conjuntoConsultas = {...conjuntoConsultas, [data]:lista}
}else{
conjuntoConsultas = {...conjuntoConsultas, [data]:[consulta] }
}
if (!authHeader) {
console.warn("Header de autorização não disponível.");
setIsLoading(false);
return;
}
}
setConsultasOrganizadas(conjuntoConsultas)
setFilaDeEspera(filaEspera)
}
console.log("so muda")
if(!listaTodasConsultas.length) return
console.log(filaEspera, "fila de espera")
fetchInfosConsultas();
}, [listaTodasConsultas])
useEffect(() => {
let userInfos = UserInfos(authHeader)
const fetchConsultas = async () => {
setIsLoading(true);
try {
const myHeaders = new Headers();
myHeaders.append("Authorization", authHeader);
myHeaders.append("apikey", API_KEY)
const myHeaders = new Headers({ "Authorization": authHeader, "apikey": API_KEY });
const requestOptions = { method: 'GET', headers: myHeaders };
const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?select=*,doctors(full_name)&patient_id=eq.${patientId}`, requestOptions);
if (!response.ok) throw new Error(`Erro na requisição: ${response.statusText}`);
const consultasBrutas = await response.json() || [];
const requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?patient_id=eq.${"6e7f8829-0574-42df-9290-8dbb70f75ada"}`, requestOptions);
const result = await response.json();
setListaTodasConsultas(result);
} catch (error) {
console.log('error', error);
const newDict = {};
const newFila = [];
for (const agendamento of consultasBrutas) {
const agendamentoMelhorado = {
...agendamento,
medico_nome: agendamento.doctors?.full_name || 'Médico não informado'
};
if (agendamento.status === "requested") {
newFila.push({ agendamento: agendamentoMelhorado, Infos: agendamentoMelhorado });
} else {
const diaAgendamento = dayjs(agendamento.scheduled_at).format("YYYY-MM-DD");
if (newDict[diaAgendamento]) {
newDict[diaAgendamento].push(agendamentoMelhorado);
} else {
newDict[diaAgendamento] = [agendamentoMelhorado];
}
}
}
for (const key in newDict) {
newDict[key].sort((a, b) => a.scheduled_at.localeCompare(b.scheduled_at));
}
setDictAgendamentosOrganizados(newDict);
setFilaDeEsperaData(newFila);
} catch (err) {
console.error('Falha ao buscar ou processar agendamentos:', err);
setDictAgendamentosOrganizados({});
setFilaDeEsperaData([]);
} finally {
setIsLoading(false);
}
};
fetchConsultas();
}, []);
const navigate = useNavigate()
carregarDados();
}, [authHeader, user]);
const confirmConsulta = (selectedPatientId) => {
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append('apikey', API_KEY)
myHeaders.append("authorization", authHeader)
var raw = JSON.stringify({ "status":"confirmed"
});
var requestOptions = {
method: 'PATCH',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${selectedPatientId}`, requestOptions)
.then(response => {if(response.status !== 200)(console.log(response))})
.then(result => console.log(result))
.catch(error => console.log('error', error));
}
const deleteConsulta = async (ID) => {
const updateAppointmentStatus = async (id, updates) => {
const myHeaders = new Headers({
"Authorization": authHeader, "apikey": API_KEY, "Content-Type": "application/json"
});
const requestOptions = { method: 'PATCH', headers: myHeaders, body: JSON.stringify(updates) };
try {
const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append('apikey', API_KEY);
myHeaders.append("authorization", authHeader);
const raw = JSON.stringify({ "status": "cancelled", "cancellation_reason":motivoCancelamento });
const requestOptions = {
method: 'PATCH',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${ID}`, requestOptions);
if (!response.ok) {
const errorText = await response.text();
throw new Error(`Falha ao cancelar consulta: ${response.status} - ${errorText}`);
}
setConsultas(prevConsultas => prevConsultas.filter(consulta => consulta.id !== ID));
console.log("Consulta cancelada com sucesso!");
alert("Consulta cancelada com sucesso!");
const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${id}`, requestOptions);
if (!response.ok) throw new Error('Falha ao atualizar o status.');
return true;
} catch (error) {
console.error('Erro ao cancelar a consulta:', error);
alert('Erro ao cancelar a consulta. Veja o console.');
console.error('Erro de rede/servidor:', error);
return false;
}
};
const handleCancelClick = (appointmentId) => {
setAppointmentToCancel(appointmentId);
setCancellationReason('');
setIsCancelModalOpen(true);
};
const executeCancellation = async () => {
if (!appointmentToCancel) return;
setIsLoading(true);
const motivo = cancellationReason.trim() || "Cancelado pelo paciente (motivo não especificado)";
const success = await updateAppointmentStatus(appointmentToCancel, {
status: "cancelled",
cancellation_reason: motivo,
updated_at: new Date().toISOString()
});
setIsCancelModalOpen(false);
setAppointmentToCancel(null);
setCancellationReason('');
if (success) {
alert("Solicitação cancelada com sucesso!");
setDictAgendamentosOrganizados(prev => {
const newDict = { ...prev };
for (const date in newDict) {
newDict[date] = newDict[date].filter(app => app.id !== appointmentToCancel);
}
return newDict;
});
setFilaDeEsperaData(prev => prev.filter(item => item.agendamento.id !== appointmentToCancel));
} else {
alert("Falha ao cancelar a solicitação.");
}
setIsLoading(false);
};
const handleQuickJumpChange = (type, value) => setQuickJump(prev => ({ ...prev, [type]: Number(value) }));
const applyQuickJump = () => {
const newDate = dayjs().year(quickJump.year).month(quickJump.month).date(1);
setCurrentDate(newDate);
setSelectedDay(newDate);
};
const dateGrid = useMemo(() => {
const grid = [];
const startOfMonth = currentDate.startOf('month');
let currentDay = startOfMonth.subtract(startOfMonth.day(), 'day');
for (let i = 0; i < 42; i++) {
grid.push(currentDay);
currentDay = currentDay.add(1, 'day');
}
return grid;
}, [currentDate]);
const weekDays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
const handleDateClick = (day) => setSelectedDay(day);
const activeButtonStyle = {
backgroundColor: '#1B2A41',
color: 'white',
padding: '6px 12px',
fontSize: '0.875rem',
borderRadius: '8px',
border: '1px solid white',
display: 'flex',
alignItems: 'center',
gap: '8px',
cursor: 'pointer'
};
const inactiveButtonStyle = {
backgroundColor: '#1B2A41',
color: 'white',
padding: '6px 12px',
fontSize: '0.875rem',
borderRadius: '8px',
border: '1px solid #1B2A41',
display: 'flex',
alignItems: 'center',
gap: '8px',
cursor: 'pointer'
};
if (isLoading) {
return (
<div className="form-container" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
<Spinner />
</div>
);
}
return (
<div>
<h1> Gerencie suas consultas</h1>
{/*Adicionei esse className para poder ter o fundo branco presente no style, mesmo não sendo para um form */}
<div className='form-container'>
<div className='btns-container'>
<button className="btn btn-primary" onClick={() => { navigate("criar") }}>
<i className="bi bi-plus-circle"></i> Adicionar Consulta
</button>
{!viewFila ?
<button onClick={() => setViewFila(true)} className="btn btn-primary">Ver fila de espera</button>
:
<button onClick={() => setViewFila(false)} className="btn btn-primary">Ver consultas </button>
}
</div>
<h1>Minhas consultas</h1>
<div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
{viewFila ?
<div className="fila-container">
<div className="fila-header">
<input
type="text"
placeholder="Pesquisar na fila de espera..."
className="busca-fila-espera"
//value={searchTerm}
//onChange={(e) => setSearchTerm(e.target.value)}
/>
<h2 className="fila-titulo">Fila de Espera</h2>
<button
style={PageNovaConsulta ? activeButtonStyle : inactiveButtonStyle}
onClick={() => {
setPageConsulta(true);
setFiladeEspera(false);
}}
>
<i className="bi bi-plus-circle"></i> Solicitar Agendamento
</button>
<button
style={FiladeEspera && !PageNovaConsulta ? activeButtonStyle : inactiveButtonStyle}
onClick={() => {
setFiladeEspera(!FiladeEspera);
setPageConsulta(false);
}}
>
<i className="bi bi-list-task me-1"></i> Fila de Espera ({filaEsperaData.length})
</button>
</div>
<table className="fila-tabela">
<thead>
<tr>
<th>Nome do Paciente</th> {/* Ajustado o cabeçalho */}
<th>CPF</th> {/* Ajustado o cabeçalho */}
<th>Médico Solicitado</th> {/* Ajustado o cabeçalho */}
<th>Data da Solicitação</th> {/* Ajustado o cabeçalho */}
<th>Ações</th>
</tr>
</thead>
<tbody>
{filaDeEspera.map((item, index) => (
<tr key={index}>
<td> <p>{item?.paciente_nome} </p> </td>
<td><p>{item?.paciente_cpf} </p></td>
<td><p>{item?.medico_nome} </p></td>
<td>{dayjs(item?.created_at).format('DD/MM/YYYY HH:mm')}</td>
<td> <div className="d-flex gap-2">
<button
className="btn btn-sm btn-delete"
onClick={() => {
setSelectedId(item.id)
setShowDeleteModal(true);
}}
>
<i className="bi bi-trash me-1"></i> Excluir
</button>
</div></td>
</tr>
))}
</tbody>
</table>
</div>
:
<div>
<h2 className='fila-titulo'>Suas proximas consultas</h2>
<TabelaAgendamentoDia agendamentos={consultasOrganizadas} setDictInfo={setDictInfo}
selectedID={selectedID} setSelectedId={setSelectedId} setShowDeleteModal={setShowDeleteModal}
coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID}
listaConsultasID={listaConsultasID} setShowConfirmModal={setShowConfirmModal}
/>
</div>
}
{showDeleteModal && (
<div
className="modal fade show"
style={{
display: "block",
backgroundColor: "rgba(0, 0, 0, 0.5)",
}}
tabIndex="-1"
onClick={(e) =>
e.target.classList.contains("modal") && setShowDeleteModal(false)
}
>
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-header bg-danger bg-opacity-25">
<h5 className="modal-title text-danger">
Confirmação de Cancelamento
</h5>
<button
type="button"
className="btn-close"
onClick={() => setShowDeleteModal(false)}
></button>
</div>
<div className="modal-body">
<p className="mb-0 fs-5">
Qual o motivo do cancelamento?
</p>
<div className='campo-de-input'>
<textarea className='input-modal' value={motivoCancelamento} onChange={(e) => setMotivoCancelamento(e.target.value)} />
{!PageNovaConsulta ? (
<div className='atendimento-eprocura'>
<section className='calendario-ou-filaespera'>
{!FiladeEspera ? (
<div className="calendar-wrapper">
<div className="calendar-info-panel">
<div className="info-date-display"><span>{selectedDay.format('MMM')}</span><strong>{selectedDay.format('DD')}</strong></div>
<div className="info-details"><h3>{selectedDay.format('dddd')}</h3><p>{selectedDay.format('D [de] MMMM [de] YYYY')}</p></div>
<div className="appointments-list">
<h4>Consultas para {selectedDay.format('DD/MM')}</h4>
{(DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')]?.length > 0) ? (
DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')].map(app => (
<div key={app.id} className="appointment-item" data-status={app.status}>
<div className="item-time">{dayjs(app.scheduled_at).format('HH:mm')}</div>
<div className="item-details">
<span>Consulta com Dr(a). {app.medico_nome}</span>
</div>
<div className='item-actions'>
{app.status !== 'cancelled' && dayjs(app.scheduled_at).isAfter(dayjs()) && (
<button className="btn btn-sm btn-outline-danger" onClick={() => handleCancelClick(app.id)} title="Cancelar Consulta">
<Trash2 size={16} />
</button>
)}
</div>
</div>
))
) : (<div className="no-appointments-info"><p>Nenhuma consulta agendada para esta data.</p></div>)}
</div>
</div>
<div className="calendar-main">
<div className="calendar-legend">
<div className="legend-item" data-status="completed">Realizado</div><div className="legend-item" data-status="confirmed">Confirmado</div><div className="legend-item" data-status="agendado">Agendado</div><div className="legend-item" data-status="cancelled">Cancelado</div>
</div>
<div className="calendar-controls">
<div className="date-indicator">
<h2>{currentDate.format('MMMM [de] YYYY')}</h2>
<div className="quick-jump-controls" style={{ display: 'flex', gap: '5px', marginTop: '10px' }}>
<select value={quickJump.month} onChange={(e) => handleQuickJumpChange('month', e.target.value)} className="form-select form-select-sm w-auto">
{dayjs.months().map((month, index) => (<option key={index} value={index}>{month.charAt(0).toUpperCase() + month.slice(1)}</option>))}
</select>
<select value={quickJump.year} onChange={(e) => handleQuickJumpChange('year', e.target.value)} className="form-select form-select-sm w-auto">
{Array.from({ length: 11 }, (_, i) => dayjs().year() - 5 + i).map(year => (<option key={year} value={year}>{year}</option>))}
</select>
<button className="btn btn-sm btn-outline-primary" onClick={applyQuickJump} disabled={quickJump.month === currentDate.month() && quickJump.year === currentDate.year()}>Ir</button>
</div>
</div>
<div className="nav-buttons">
<button onClick={() => setCurrentDate(c => c.subtract(1, 'month'))}><ChevronLeft size={20} /></button>
<button onClick={() => setCurrentDate(dayjs())}>Hoje</button>
<button onClick={() => setCurrentDate(c => c.add(1, 'month'))}><ChevronRight size={20} /></button>
</div>
</div>
<div className="calendar-grid">
{weekDays.map(day => <div key={day} className="day-header">{day}</div>)}
{dateGrid.map((day, index) => {
const appointmentsOnDay = DictAgendamentosOrganizados[day.format('YYYY-MM-DD')] || [];
const cellClasses = `day-cell ${day.isSame(currentDate, 'month') ? 'current-month' : 'other-month'} ${day.isSame(dayjs(), 'day') ? 'today' : ''} ${day.isSame(selectedDay, 'day') ? 'selected' : ''}`;
return (
<div key={index} className={cellClasses} onClick={() => handleDateClick(day)}>
<span>{day.format('D')}</span>
{appointmentsOnDay.length > 0 && <div className="appointments-indicator">{appointmentsOnDay.length}</div>}
</div>
);
})}
</div>
</div>
</div>
) : (
<div className="page-content table-paciente-container">
<section className="row">
<div className="col-12">
<div className="card table-paciente-card">
<div className="card-header"><h4 className="card-title mb-0">Minhas Solicitações em Fila de Espera</h4></div>
<div className="card-body">
<div className="table-responsive">
<table className="table table-striped table-hover">
<thead>
<tr>
<th>Médico Solicitado</th>
<th>Data da Solicitação</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
{filaEsperaData.length > 0 ? (filaEsperaData.map((item) => (
<tr key={item.agendamento.id}>
<td>Dr(a). {item.Infos?.medico_nome}</td>
<td>{dayjs(item.agendamento.created_at).format('DD/MM/YYYY HH:mm')}</td>
<td>
<button className="btn btn-sm btn-danger" onClick={() => handleCancelClick(item.agendamento.id)}>
<i className="bi bi-trash me-1"></i> Cancelar
</button>
</td>
</tr>
))) : (
<tr>
<td colSpan="3" className="text-center py-4">
<div className="text-muted">Nenhuma solicitação na fila de espera.</div>
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</div>
)}
</section>
</div>
</div>
) : (
<AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
)}
<div className="modal-footer">
<button
type="button"
className="btn btn-primary"
onClick={() => {setShowDeleteModal(false);
}}
>
Cancelar
</button>
<button
type="button"
className="btn btn-danger"
onClick={() => {
deleteConsulta(selectedID)
setShowDeleteModal(false)
let lista_cores = coresConsultas
let lista = listaConsultasID
lista.push(selectedID)
lista_cores.push("cancelled")
setCoresConsultas(lista_cores)
setListaConsultaID(lista)
console.log("lista", lista)
}}
>
<i className="bi bi-trash me-1"></i> Excluir
</button>
</div>
</div>
</div>
</div>)}
{showConfirmModal &&(
<div
className="modal fade show"
style={{
display: "block",
backgroundColor: "rgba(0, 0, 0, 0.5)",
}}
tabIndex="-1"
onClick={(e) =>
e.target.classList.contains("modal") && setShowDeleteModal(false)
}
>
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-header bg-success">
<h5 className="modal-title">
Confirmação de edição
</h5>
</div>
<div className="modal-body">
<p className="mb-0 fs-5">
Tem certeza que deseja retirar o cancelamento ?
</p>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-primary"
onClick={() => {setShowConfirmModal(false); setSelectedId("")}}
>
Cancelar
</button>
<button
type="button"
className="btn btn-success"
onClick={() => {confirmConsulta(selectedID);setShowConfirmModal(false)
let lista_cores = coresConsultas
let lista = listaConsultasID
lista.push(selectedID)
lista_cores.push("confirmed")
setCoresConsultas(lista_cores)
setListaConsultaID(lista)
}}
>
<i className="bi bi-trash me-1"></i> Confirmar
</button>
</div>
</div>
</div>
</div>)
}
</div>
{}
{isCancelModalOpen && (
<div className="modal-overlay">
<div className="modal-content" style={{ maxWidth: '400px' }}>
<div className="modal-header" style={{ backgroundColor: '#fee2e2', borderBottom: '1px solid #fca5a5', padding: '15px', borderRadius: '8px 8px 0 0' }}>
<h4 style={{ margin: 0, color: '#dc2626' }}>Confirmação de Cancelamento</h4>
<button className="close-button" onClick={() => setIsCancelModalOpen(false)} style={{ background: 'none', border: 'none', fontSize: '1.5rem', cursor: 'pointer' }}>&times;</button>
</div>
<div className="modal-body" style={{ padding: '20px' }}>
<p>Qual o motivo do cancelamento?</p>
<textarea
value={cancellationReason}
onChange={(e) => setCancellationReason(e.target.value)}
placeholder="Ex: Precisei viajar, motivo pessoal, etc."
rows="4"
style={{ width: '100%', padding: '10px', resize: 'none', border: '1px solid #ccc', borderRadius: '4px' }}
></textarea>
</div>
<div className="modal-footer" style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', padding: '15px', borderTop: '1px solid #eee' }}>
<button
className="btn btn-secondary"
onClick={() => setIsCancelModalOpen(false)}
style={{ backgroundColor: '#6c757d', color: 'white', border: 'none', padding: '8px 15px', borderRadius: '4px' }}
>
Cancelar
</button>
<button
className="btn btn-danger"
onClick={executeCancellation}
style={{ backgroundColor: '#dc3545', color: 'white', border: 'none', padding: '8px 15px', borderRadius: '4px' }}
>
<Trash2 size={16} style={{ marginRight: '5px' }} /> Excluir
</button>
</div>
</div>
</div>
)}
{}
</div>
)
}
export default ConsultasPaciente;
export default Agendamento;

165
src/components/AgendarConsulta/CalendarComponent.jsx Normal file
View File

@ -0,0 +1,165 @@
import React, { useMemo } from 'react';
import dayjs from 'dayjs';
import { ChevronLeft, ChevronRight, Edit, Trash2 } from 'lucide-react';
import Spinner from '../Spinner.jsx'; // Certifique-se de que o caminho está correto
const CalendarComponent = ({
currentDate,
setCurrentDate,
selectedDay,
setSelectedDay,
DictAgendamentosOrganizados,
showSpinner,
setSelectedId,
setShowDeleteModal,
setShowConfirmModal,
quickJump,
handleQuickJumpChange,
applyQuickJump
}) => {
// Gera os 42 dias para o grid do calendário
const generateDateGrid = () => {
const grid = [];
const startOfMonth = currentDate.startOf('month');
// Começa no domingo da semana em que o mês começa (day() retorna 0 para domingo)
let currentDay = startOfMonth.subtract(startOfMonth.day(), 'day');
// Gera 6 semanas (6*7 = 42 dias)
for (let i = 0; i < 42; i++) {
grid.push(currentDay);
currentDay = currentDay.add(1, 'day');
}
return grid;
};
const dateGrid = useMemo(() => generateDateGrid(), [currentDate]);
const weekDays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
const handleDateClick = (day) => {
setSelectedDay(day);
// Opcional: Adicionar lógica para abrir o agendamento do dia/semana/mês (sua primeira imagem)
// Se você quiser que o clique abra a tela de agendamento de slots:
// Exemplo: onSelectDate(day);
};
// Função para obter o status de agendamentos para o indicador (ponto azul)
const getAppointmentCount = (day) => {
return DictAgendamentosOrganizados[day.format('YYYY-MM-DD')]?.length || 0;
};
return (
<div className="calendar-wrapper">
{/* Painel lateral de informações */}
<div className="calendar-info-panel">
<div className="info-date-display">
<span>{selectedDay.format('MMM')}</span>
<strong>{selectedDay.format('DD')}</strong>
</div>
<div className="info-details">
<h3>{selectedDay.format('dddd')}</h3>
<p>{selectedDay.format('D [de] MMMM [de] YYYY')}</p>
</div>
<div className="appointments-list">
<h4>Consultas para {selectedDay.format('DD/MM')}</h4>
{showSpinner ? <Spinner/> : (DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')]?.length > 0) ? (
DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')].map(app => (
<div key={app.id} className="appointment-item" data-status={app.status}>
<div className="item-time">{dayjs(app.scheduled_at).format('HH:mm')}</div>
<div className="item-details">
<span>{app.paciente_nome}</span>
<small>Dr(a). {app.medico_nome}</small>
</div>
<div className="appointment-actions">
{app.status === 'cancelled' ? (
<button className="btn-action btn-edit" onClick={() => { setSelectedId(app.id); setShowConfirmModal(true); }}>
<Edit size={16} />
</button>
) : (
<button className="btn-action btn-delete" onClick={() => { setSelectedId(app.id); setShowDeleteModal(true); }}>
<Trash2 size={16} />
</button>
)}
</div>
</div>
))
) : (
<div className="no-appointments-info"><p>Nenhuma consulta agendada.</p></div>
)}
</div>
</div>
{/* Calendário Principal */}
<div className="calendar-main">
{/* Legenda */}
<div className="calendar-legend">
<div className="legend-item" data-status="completed">Realizado</div>
<div className="legend-item" data-status="confirmed">Confirmado</div>
<div className="legend-item" data-status="agendado">Agendado</div>
<div className="legend-item" data-status="cancelled">Cancelado</div>
</div>
{/* Controles de navegação e Jump */}
<div className="calendar-controls">
<div className="date-indicator">
<h2>{currentDate.format('MMMM [de] YYYY')}</h2>
<div className="quick-jump-controls" style={{ display: 'flex', gap: '5px', marginTop: '10px' }}>
<select
value={quickJump.month}
onChange={(e) => handleQuickJumpChange('month', e.target.value)}
className="form-select form-select-sm w-auto"
>
{dayjs.months().map((month, index) => (
<option key={index} value={index}>{month.charAt(0).toUpperCase() + month.slice(1)}</option>
))}
</select>
<select
value={quickJump.year}
onChange={(e) => handleQuickJumpChange('year', e.target.value)}
className="form-select form-select-sm w-auto"
>
{Array.from({ length: 11 }, (_, i) => dayjs().year() - 5 + i).map(year => (
<option key={year} value={year}>{year}</option>
))}
</select>
<button
className="btn btn-sm btn-outline-primary"
onClick={applyQuickJump}
disabled={quickJump.month === currentDate.month() && quickJump.year === currentDate.year()}
>
Ir
</button>
</div>
</div>
<div className="nav-buttons">
<button onClick={() => { setCurrentDate(currentDate.subtract(1, 'month')); setSelectedDay(currentDate.subtract(1, 'month')); }}><ChevronLeft size={20} /></button>
<button onClick={() => { setCurrentDate(dayjs()); setSelectedDay(dayjs()); }}>Hoje</button>
<button onClick={() => { setCurrentDate(currentDate.add(1, 'month')); setSelectedDay(currentDate.add(1, 'month')); }}><ChevronRight size={20} /></button>
</div>
</div>
{/* Grid dos dias */}
<div className="calendar-grid">
{weekDays.map(day => <div key={day} className="day-header">{day}</div>)}
{dateGrid.map((day, index) => {
const count = getAppointmentCount(day);
const cellClasses = `day-cell ${day.isSame(currentDate, 'month') ? 'current-month' : 'other-month'} ${day.isSame(dayjs(), 'day') ? 'today' : ''} ${day.isSame(selectedDay, 'day') ? 'selected' : ''}`;
return (
<div
key={index}
className={cellClasses}
onClick={() => handleDateClick(day)}
>
<span>{day.format('D')}</span>
{count > 0 && <div className="appointments-indicator">{count}</div>}
</div>
);
})}
</div>
</div>
</div>
);
};
export default CalendarComponent;

116
src/components/AgendarConsulta/FormNovaConsulta.jsx
View File

@ -1,11 +1,12 @@
import InputMask from "react-input-mask";
import "./style/formagendamentos.css";
import { useState, useEffect, useCallback } from "react";
import { GetPatientByCPF } from "../utils/Functions-Endpoints/Patient";
import { GetPatientByCPF, GetAllPatients } from "../utils/Functions-Endpoints/Patient";
import { GetAllDoctors } from "../utils/Functions-Endpoints/Doctor";
import { useAuth } from "../utils/AuthProvider";
import API_KEY from "../utils/apiKeys";
const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) => {
const { getAuthorizationHeader } = useAuth();
@ -19,6 +20,10 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
const [horarioTermino, setHorarioTermino] = useState('');
const [horariosDisponiveis, sethorariosDisponiveis] = useState([]);
const [todosPacientes, setTodosPacientes] = useState([])
const [pacientesFiltrados, setPacientesFiltrados] = useState([])
const [isDropdownPacienteOpen, setIsDropdownPacienteOpen] = useState(false)
const [status, setStatus] = useState("confirmed")
let authHeader = getAuthorizationHeader()
@ -70,6 +75,13 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
setTodosProfissionais(Medicos);
}, [authHeader]);
const ChamarPacientes = useCallback (async () => {
const Pacientes = await GetAllPatients(authHeader);
setTodosPacientes(Pacientes)
console.log("pacientes")
console.log(Pacientes)
}, [authHeader])
useEffect(() => {
console.log("Horario","tessssste" )
@ -82,6 +94,11 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
ChamarMedicos();
}, [ChamarMedicos]);
useEffect(() => {
ChamarPacientes()
}, [ChamarPacientes])
useEffect(() => {
if (!agendamento.dataAtendimento || !agendamento.doctor_id) return;
@ -126,6 +143,25 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
setIsDropdownOpen(filtered.length > 0);
};
const handleSearchPaciente = (e) => {
const term = e.target.value;
handleChange(e);
if (term.trim() === '') {
setPacientesFiltrados([]);
setIsDropdownPacienteOpen(false);
return;
}
const filtered = todosPacientes.filter(p =>
p.full_name.toLowerCase().includes(term.toLowerCase())
);
console.log(filtered.length > 0, "filtrados")
setPacientesFiltrados(filtered);
setIsDropdownPacienteOpen(filtered.length > 0);
}
const handleSelectProfissional = (profissional) => {
setAgendamento(prev => ({
...prev,
@ -136,6 +172,18 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
setIsDropdownOpen(false);
};
const handleSelectPaciente = (paciente) => {
setAgendamento(prev => ({
...prev,
patient_id:paciente.id,
paciente_nome: paciente.full_name,
paciente_cpf: paciente.cpf
}))
setProfissionaisFiltrados([])
setIsDropdownPacienteOpen(false)
}
const formatarHora = (datetimeString) => {
return datetimeString?.substring(11, 16) || '';
};
@ -195,7 +243,6 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">Sucesso</h5>
<button onClick={handleCloseModal} className="modal-close-btn">×</button>
</div>
<div className="modal-body">
<p className="modal-message">Agendamento salvo com sucesso!</p>
@ -211,17 +258,7 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
<h2 className="section-title">Informações do paciente</h2>
<div className="campos-informacoes-paciente" id="informacoes-paciente-linha-um">
<div className="campo-de-input">
<label>CPF do paciente</label>
<input
type="text"
name="paciente_cpf"
placeholder="000.000.000-00"
onChange={handleChange}
value={agendamento.paciente_cpf}
/>
</div>
<div className="campo-de-input-container">
<div className="campo-de-input">
<label>Nome *</label>
<input
@ -229,8 +266,34 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
name="paciente_nome"
placeholder="Insira o nome do paciente"
required
onChange={(e) => handleSearchPaciente(e)}
value={agendamento?.paciente_nome || ""}
autoComplete="off"
/>
</div>
{isDropdownPacienteOpen && pacientesFiltrados.length > 0 && (
<div className="dropdown-pacientes">
{pacientesFiltrados.map((paciente) => (
<div
key={paciente.id}
className="dropdown-item"
onClick={() => handleSelectPaciente(paciente)}
>
{`${paciente.full_name.split(" ")[0]} ${paciente.full_name.split(" ")[1]} - ${paciente.cpf}`}
</div>
))}
</div>
)}
</div>
<div className="campo-de-input campo-cpf">
<label>CPF do paciente</label>
<input
type="text"
name="paciente_cpf"
placeholder="000.000.000-00"
onChange={handleChange}
value={agendamento.paciente_nome}
value={agendamento.paciente_cpf}
/>
</div>
</div>
@ -320,29 +383,6 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
</select>
</div>
<div className="seletor-wrapper">
<label>Número de Sessões *</label>
<div className="sessao-contador">
<button
type="button"
onClick={() => setSessoes(prev => Math.max(0, prev - 1))}
disabled={sessoes === 0}
>
<i className="bi bi-chevron-compact-left"></i>
</button>
<p className="sessao-valor">{sessoes}</p>
<button
type="button"
onClick={() => setSessoes(prev => Math.min(3, prev + 1))}
disabled={sessoes === 3}
>
<i className="bi bi-chevron-compact-right"></i>
</button>
</div>
</div>
<div className="campo-de-input">
<label htmlFor="termino">Término *</label>
<input
@ -392,4 +432,4 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
);
};
export default FormNovaConsulta;
export default FormNovaConsulta;

269
src/components/AgendarConsulta/style/formagendamentos.css
View File

@ -414,96 +414,248 @@ html[data-bs-theme="dark"] svg {
}
/* ========== Modal Overlay ========== */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
animation: fadeIn 0.3s ease-in;
}
.modal-content {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
max-width: 400px;
width: 90%;
text-align: center;
animation: modalAppear 0.3s ease-out;
}
@keyframes modalAppear {
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.9) translateY(-20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.modal-header h3 {
margin: 0 0 1rem 0;
color: #28a745;
font-size: 1.5rem;
font-weight: 600;
/* ========== Modal Content ========== */
.modal-content {
background-color: #fff;
border-radius: 10px;
width: 400px;
max-width: 90%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
overflow: hidden;
animation: slideIn 0.3s ease-out;
}
.modal-body {
margin-bottom: 1.5rem;
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.modal-body p {
/* ========== Modal Header ========== */
.modal-header {
background-color: #1e3a8a;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header.success {
background-color: #1e3a8a !important;
}
.modal-header.error {
background-color: #dc3545 !important;
}
.modal-header .modal-title {
color: #fff;
margin: 0;
color: #333;
font-size: 1.1rem;
line-height: 1.5;
font-size: 1.2rem;
font-weight: bold;
}
.modal-close-btn {
background: none;
border: none;
font-size: 20px;
color: #fff;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: background-color 0.2s;
}
.modal-close-btn:hover {
background-color: rgba(255, 255, 255, 0.2);
}
/* ========== Modal Body ========== */
.modal-body {
padding: 25px 20px;
background: #fff;
}
.modal-body .modal-message {
color: #111;
font-size: 1.1rem;
margin: 0;
font-weight: 600;
line-height: 1.4;
text-align: center;
}
.modal-submessage {
color: #666;
font-size: 0.9rem;
margin: 10px 0 0 0;
line-height: 1.4;
text-align: center;
}
/* ========== Modal Footer ========== */
.modal-footer {
display: flex;
justify-content: center;
justify-content: flex-end;
padding: 15px 20px;
border-top: 1px solid #ddd;
background: #fff;
}
.modal-footer .btn-primary {
background: #28a745;
padding: 10px 24px;
.modal-confirm-btn {
background-color: #1e3a8a;
color: #fff;
border: none;
padding: 8px 20px;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
font-weight: 500;
font-weight: bold;
transition: all 0.2s ease;
}
.modal-footer .btn-primary:hover {
background: #218838;
.modal-confirm-btn:hover {
background-color: #1e40af;
transform: translateY(-1px);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.modal-confirm-btn.success {
background-color: #1e3a8a !important;
}
.modal-confirm-btn.success:hover {
background-color: #1e40af !important;
}
.modal-confirm-btn.error {
background-color: #dc3545 !important;
}
.modal-confirm-btn.error:hover {
background-color: #c82333 !important;
}
/* ========== Dark Mode ========== */
html[data-bs-theme="dark"] .modal-content {
background: #232323 !important;
color: #e0e0e0 !important;
border: 1px solid #404053 !important;
border: 1px solid #404053;
}
html[data-bs-theme="dark"] .modal-header h3 {
color: #4ade80 !important;
html[data-bs-theme="dark"] .modal-header {
background: #1e3a8a !important;
}
html[data-bs-theme="dark"] .modal-body p {
html[data-bs-theme="dark"] .modal-header.success {
background-color: #1e3a8a !important;
}
html[data-bs-theme="dark"] .modal-header.error {
background-color: #dc3545 !important;
}
html[data-bs-theme="dark"] .modal-header .modal-title,
html[data-bs-theme="dark"] .modal-close-btn {
color: white !important;
}
html[data-bs-theme="dark"] .modal-body {
background: #232323 !important;
}
html[data-bs-theme="dark"] .modal-body .modal-message {
color: #e0e0e0 !important;
}
html[data-bs-theme="dark"] .modal-footer .btn-primary {
background: #16a34a !important;
html[data-bs-theme="dark"] .modal-submessage {
color: #b0b7c3 !important;
}
html[data-bs-theme="dark"] .modal-footer .btn-primary:hover {
background: #15803d !important;
html[data-bs-theme="dark"] .modal-footer {
background: #232323 !important;
border-top: 1px solid #404053;
}
html[data-bs-theme="dark"] .modal-confirm-btn {
background: #2563eb !important;
}
html[data-bs-theme="dark"] .modal-confirm-btn:hover {
background: #1e40af !important;
}
/* ========== Responsive ========== */
@media (max-width: 768px) {
.modal-content {
width: 95%;
margin: 1rem;
}
.modal-body {
padding: 20px 15px;
}
.modal-message {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.modal-header {
padding: 12px 15px;
}
.modal-header .modal-title {
font-size: 1.1rem;
}
.modal-body {
padding: 15px;
}
.modal-footer {
padding: 12px 15px;
}
.modal-confirm-btn {
padding: 6px 16px;
font-size: 0.9rem;
}
}
@ -516,4 +668,25 @@ html[data-bs-theme="dark"] .modal-footer .btn-primary:hover {
html[data-bs-theme="dark"] .horario-termino-readonly {
background-color: #2d3748 !important;
color: #a0aec0 !important;
}
.campo-cpf{
margin-left: 40px;
}
input[name="paciente_cpf"]{
width: 12rem;
}
.dropdown-pacientes{
position: absolute;
top: 100%;
left: 0;
background-color: white;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 100;
max-height: 200px;
overflow-y: auto;
}

339
src/components/Estilo/Toggle.css Normal file
View File

@ -0,0 +1,339 @@
/* ========== Variáveis CSS ========== */
:root {
--toggle-bg: #ffffff;
--toggle-border: #e5e7eb;
--toggle-hover: #f3f4f6;
--toggle-active: #dbeafe;
--toggle-text: #1f2937;
--toggle-text-secondary: #374151;
--toggle-icon: #6b7280;
--toggle-accent: #2563eb;
--toggle-accent-hover: #1d4ed8;
--toggle-shadow: rgba(0, 0, 0, 0.05);
--toggle-shadow-hover: rgba(0, 0, 0, 0.1);
}
/* ========== Container Principal ========== */
.toggle-sidebar-wrapper {
background: var(--toggle-bg);
border-radius: 12px;
border: 1px solid var(--toggle-border);
margin-bottom: 16px;
overflow-y: auto;
overflow-x: hidden;
box-shadow: 0 1px 3px var(--toggle-shadow);
transition: box-shadow 0.2s ease;
scrollbar-width: none;
-ms-overflow-style: none;
}
.toggle-sidebar-wrapper::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
.toggle-sidebar-wrapper:hover {
box-shadow: 0 4px 6px var(--toggle-shadow-hover);
}
.container-title {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
cursor: pointer;
background-color: var(--toggle-bg);
transition: background-color 0.2s ease;
border-bottom: 1px solid var(--toggle-border);
}
.container-title:hover {
background-color: var(--toggle-hover);
}
.toggle-title {
color: var(--toggle-text);
font-weight: 600;
font-size: 16px;
margin: 0;
user-select: none;
letter-spacing: -0.01em;
}
.toggle-arrow {
color: var(--toggle-icon);
transition: transform 0.2s ease;
font-size: 14px;
}
.container-title:hover .toggle-arrow {
color: var(--toggle-accent);
}
/* ========== Menu Lista ========== */
.sidebar-menu-list {
list-style: none;
padding: 8px;
margin: 0;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
min-height: 100%;
/* Scroll invisível mas funcional */
scrollbar-width: none;
-ms-overflow-style: none;
}
.sidebar-menu-list::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
.sidebar-item {
list-style: none;
margin: 2px 0;
}
/* ========== Links da Sidebar ========== */
.sidebar-link {
display: flex;
align-items: center;
text-decoration: none;
color: var(--toggle-text-secondary);
padding: 11px 14px;
border-radius: 8px;
font-size: 15px;
width: 100%;
text-align: left;
border: none;
background: none;
cursor: pointer;
font-weight: 500;
transition: none;
gap: 12px;
}
.sidebar-link i {
font-size: 19px;
color: var(--toggle-icon);
transition: none;
}
.sidebar-link:hover {
background-color: var(--toggle-hover);
color: var(--toggle-text);
}
.sidebar-link:hover i {
color: var(--toggle-accent);
}
.sidebar-link.active {
background-color: var(--toggle-active);
color: var(--toggle-accent);
font-weight: 600;
}
.sidebar-link.active i {
color: var(--toggle-accent);
}
/* ========== Título da Sidebar ========== */
.sidebar-title {
padding: 18px 14px 10px;
font-size: 13px;
color: var(--toggle-text-secondary);
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.05em;
}
/* ========== Itens com Submenu ========== */
.sidebar-item.has-sub {
margin: 4px 0;
}
.sidebar-item.has-sub .sidebar-link {
position: relative;
}
.sidebar-item.has-sub .sidebar-link::after {
content: "\F285";
font-family: "bootstrap-icons";
margin-left: auto;
transition: transform 0.2s ease;
font-size: 12px;
color: var(--toggle-icon);
}
.sidebar-item.has-sub.active .sidebar-link::after {
transform: rotate(180deg);
}
.sidebar-item.has-sub .sidebar-link.submenu-active {
background-color: var(--toggle-hover);
color: var(--toggle-text);
}
.sidebar-item.has-sub .sidebar-link.submenu-active i {
color: var(--toggle-accent);
}
/* ========== Submenu ========== */
.submenu {
list-style: none;
padding: 4px 0 4px 8px;
margin: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
/* Scroll invisível */
scrollbar-width: none;
-ms-overflow-style: none;
}
.submenu::-webkit-scrollbar {
display: none;
}
.sidebar-item.has-sub.active .submenu {
max-height: 1000px;
overflow: visible;
}
.submenu-item {
margin: 2px 0;
}
.submenu-item .sidebar-link {
padding: 9px 14px 9px 40px;
font-size: 14px;
position: relative;
}
.submenu-item .sidebar-link::before {
content: '';
position: absolute;
left: 22px;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background-color: var(--toggle-icon);
}
.submenu-item .sidebar-link:hover::before {
background-color: var(--toggle-accent);
}
.submenu-item .sidebar-link.active::before {
background-color: var(--toggle-accent);
}
/* ========== Ícones e Indicadores ========== */
.external-icon {
font-size: 11px;
margin-left: auto;
opacity: 0.6;
color: var(--toggle-icon);
}
.active-indicator {
display: none;
}
/* ========== Botão de Logout ========== */
.logout-item {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--toggle-border);
position: sticky;
bottom: 0;
background: var(--toggle-bg);
z-index: 10;
}
.logout-button {
display: flex;
align-items: center;
text-decoration: none;
color: #dc3545;
padding: 11px 14px;
border-radius: 8px;
font-size: 15px;
width: 100%;
text-align: left;
border: none;
background: none;
cursor: pointer;
font-weight: 500;
transition: background-color 0.2s ease;
gap: 12px;
}
.logout-button i {
font-size: 19px;
color: #dc3545;
}
.logout-button:hover {
background-color: #fee;
color: #c82333;
}
.logout-button:hover i {
color: #c82333;
}
/* ========== Scroll Invisível mas Funcional ========== */
/* Containers do Mazer template que envolvem o ToggleSidebar */
#sidebar,
#sidebar .sidebar-wrapper,
#sidebar .sidebar-wrapper.active,
.sidebar-wrapper,
.sidebar-wrapper.active,
.sidebar-menu,
.sidebar-menu ul,
.sidebar-menu ul.menu,
ul.menu {
overflow-y: auto !important;
overflow-x: hidden !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
#sidebar::-webkit-scrollbar,
#sidebar .sidebar-wrapper::-webkit-scrollbar,
#sidebar .sidebar-wrapper.active::-webkit-scrollbar,
.sidebar-wrapper::-webkit-scrollbar,
.sidebar-wrapper.active::-webkit-scrollbar,
.sidebar-menu::-webkit-scrollbar,
.sidebar-menu ul::-webkit-scrollbar,
.sidebar-menu ul.menu::-webkit-scrollbar,
ul.menu::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
background: transparent !important;
}
/* ========== Dark Mode Support ========== */
html[data-bs-theme="dark"] {
--toggle-bg: #1f2937;
--toggle-border: #374151;
--toggle-hover: #374151;
--toggle-active: #1e3a8a;
--toggle-text: #f9fafb;
--toggle-text-secondary: #d1d5db;
--toggle-icon: #9ca3af;
--toggle-accent: #60a5fa;
--toggle-accent-hover: #3b82f6;
--toggle-shadow: rgba(0, 0, 0, 0.3);
--toggle-shadow-hover: rgba(0, 0, 0, 0.5);
}

107
src/components/Sidebar.jsx
View File

@ -1,7 +1,16 @@
import React, { useState, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import TrocardePerfis from "./TrocardePerfis";
import MobileMenuToggle from "./MobileMenuToggle";
import ToggleSidebar from "./ToggleSidebar";
import { useAuth } from "./utils/AuthProvider";
import PacienteItems from "../data/sidebar-items-paciente.json"
import DoctorItems from "../data/sidebar-items-medico.json"
import admItems from "../data/sidebar-items-adm.json"
import SecretariaItems from "../data/sidebar-items-secretaria.json"
import FinanceiroItems from "../data/sidebar-items-financeiro.json"
import { UserInfos } from "./utils/Functions-Endpoints/General";
function Sidebar({ menuItems }) {
const [isActive, setIsActive] = useState(true);
@ -9,6 +18,24 @@ function Sidebar({ menuItems }) {
const [isMobile, setIsMobile] = useState(false);
const [showLogoutModal, setShowLogoutModal] = useState(false);
const navigate = useNavigate();
const [roleUser, setRoleUser] = useState([])
const {getAuthorizationHeader} = useAuth();
const authHeader = getAuthorizationHeader();
let pathname = window.location.pathname.split("/")[1]
// useEffect para definir quais toggle da sidebar devem aparecer
useEffect(() => {
let teste = localStorage.getItem("roleUser")
setRoleUser(teste)
}, [authHeader])
// Detecta se é mobile/tablet
useEffect(() => {
@ -18,6 +45,7 @@ function Sidebar({ menuItems }) {
setIsActive(!mobile);
};
checkScreenSize();
window.addEventListener("resize", checkScreenSize);
return () => window.removeEventListener("resize", checkScreenSize);
@ -91,6 +119,7 @@ function Sidebar({ menuItems }) {
const handleLogoutCancel = () => setShowLogoutModal(false);
const renderLink = (item) => {
if (item.url && item.url.startsWith("/")) {
return (
@ -213,55 +242,41 @@ function Sidebar({ menuItems }) {
<div className="sidebar-menu">
<ul className="menu">
{menuItems &&
menuItems.map((item, index) => {
if (item.isTitle)
return (
<li key={index} className="sidebar-title">
{item.name}
</li>
);
if (item.submenu)
return (
<li
key={index}
className={`sidebar-item has-sub ${
openSubmenu === item.key ? "active" : ""
}`}
>
<button
type="button"
className="sidebar-link btn"
onClick={() => handleSubmenuClick(item.key)}
>
<i className={`bi bi-${item.icon}`}></i>
<span>{item.name}</span>
</button>
<ul
className={`submenu ${
openSubmenu === item.key ? "active" : ""
}`}
>
{item.submenu.map((subItem, subIndex) => (
<li key={subIndex} className="submenu-item">
{renderLink(subItem)}
</li>
))}
</ul>
</li>
);
{roleUser.includes("admin") &&
<ToggleSidebar perfil={"administrador"} items={admItems} defaultOpen={pathname.includes("admin") } />
}
{roleUser.includes("admin") || roleUser.includes("secretaria") ?
<ToggleSidebar perfil={"secretaria"} items={SecretariaItems} defaultOpen={pathname.includes("secretaria")} />
:
null
}
return (
<li key={index} className="sidebar-item">
{renderLink(item)}
</li>
);
})}
{roleUser.includes("admin") || roleUser.includes("medico") ?
<ToggleSidebar perfil={"medico"} items={DoctorItems} defaultOpen={pathname.includes("medico") } />
:null
}
{/* Logout */}
{roleUser.includes("admin") || roleUser.includes("financeiro") ?
<ToggleSidebar perfil={"financeiro"} items={FinanceiroItems} defaultOpen={pathname.includes("financeiro") } />
:null
}
<TrocardePerfis />
{roleUser.includes("admin") || roleUser.includes("paciente") ?
<ToggleSidebar perfil={"paciente"} items={PacienteItems} defaultOpen={pathname.includes("paciente") } />
: null
}
{/* Botão de Logout */}
<li className="sidebar-item logout-item">
<button
className="sidebar-link logout-button"
onClick={handleLogoutClick}
>
<i className="bi bi-box-arrow-right"></i>
<span>Sair</span>
</button>
</li>
</ul>
</div>

139
src/components/ToggleSidebar.jsx Normal file
View File

@ -0,0 +1,139 @@
import React from 'react'
import { useState, useEffect } from 'react'
import { Link, useLocation } from 'react-router-dom'
import "./Estilo/Toggle.css"
const ToggleSidebar = ({ perfil, items, defaultOpen = false }) => {
const [isOpen, setOpen] = useState(defaultOpen)
const [openSubmenu, setOpenSubmenu] = useState(null)
const [activeLink, setActiveLink] = useState('')
const location = useLocation()
useEffect(() => {
const currentPath = location.pathname
setActiveLink(currentPath)
const findActiveSubmenu = () => {
for (let item of items) {
if (item.submenu) {
const activeSubItem = item.submenu.find(subItem =>
subItem.url === currentPath
)
if (activeSubItem) {
setOpenSubmenu(item.key)
return
}
} else if (item.url === currentPath) {
setActiveLink(currentPath)
}
}
}
findActiveSubmenu()
}, [location.pathname, items])
const OpenClose = () => {
setOpen(!isOpen)
}
const handleSubmenuClick = (key) => {
setOpenSubmenu(openSubmenu === key ? null : key)
}
const isLinkActive = (url) => {
return activeLink === url
}
const renderLink = (item, isSubmenu = false) => {
const isActive = isLinkActive(item.url)
const linkClass = `sidebar-link ${isActive ? 'active' : ''} ${isSubmenu ? 'submenu-link' : ''}`
if (item.url && item.url.startsWith("/")) {
return (
<Link
to={item.url}
className={linkClass}
onClick={() => !isSubmenu && setActiveLink(item.url)}
>
{item.icon && <i className={`bi bi-${item.icon}`}></i>}
<span>{item.name}</span>
{isActive && <div className="active-indicator"></div>}
</Link>
)
}
return (
<a
href={item.url}
className={linkClass}
target="_blank"
rel="noopener noreferrer"
>
{item.icon && <i className={`bi bi-${item.icon}`}></i>}
<span>{item.name}</span>
<i className="bi bi-box-arrow-up-right external-icon"></i>
</a>
)
}
return (
<div className="toggle-sidebar-wrapper">
<div className='container-title' onClick={OpenClose}>
<p className='toggle-title'>{perfil}</p>
{isOpen
? <i className="bi bi-caret-down-fill toggle-arrow"></i>
: <i className="bi bi-caret-right-fill toggle-arrow"></i>
}
</div>
{isOpen && (
<ul className='sidebar-menu-list'>
{items.map((item, index) => {
if (item.isTitle) {
return (
<li key={`title-${index}`} className="sidebar-title">
<span>{item.name}</span>
</li>
)
}
if (item.submenu) {
const isSubmenuActive = openSubmenu === item.key
return (
<li
key={item.key || index}
className={`sidebar-item has-sub ${isSubmenuActive ? "active" : ""}`}
>
<button
type="button"
className={`sidebar-link btn ${isSubmenuActive ? "submenu-active" : ""}`}
onClick={() => handleSubmenuClick(item.key)}
>
<i className={`bi bi-${item.icon}`}></i>
<span>{item.name}</span>
</button>
<ul className={`submenu ${isSubmenuActive ? "active" : ""}`}>
{item.submenu.map((subItem, subIndex) => (
<li key={subIndex} className="submenu-item">
{renderLink(subItem, true)}
</li>
))}
</ul>
</li>
)
}
return (
<li key={item.key || index} className="sidebar-item">
{renderLink(item)}
</li>
)
})}
</ul>
)}
</div>
)
}
export default ToggleSidebar

1
src/components/doctors/DoctorForm.jsx
View File

@ -338,7 +338,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
}
}
alert("Médico salvo com sucesso!");
} catch (error) {
console.error("Erro ao salvar médico ou disponibilidade:", error);
alert("Erro ao salvar médico ou disponibilidade.");

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

@ -52,6 +52,8 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
}));
};
useEffect(() => {
const peso = parseFloat(formData.weight_kg);
const altura = parseFloat(formData.height_m);
@ -63,9 +65,20 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
}
}, [formData.weight_kg, formData.height_m, setFormData]);
const handleCep = (value) => {
if(value.length === 8){
fetch(`https://viacep.com.br/ws/${value}/json/`)
.then(response => response.json())
.then(result => {setFormData(prev => ({...prev, street:result.logradouro,neighborhood:result.bairro,city:result.localidade,
state:result.estado
}))})
}
}
const handleChange = (e) => {
const { name, value, type, checked, files } = e.target;
console.log(name, value)
if (value && emptyFields.includes(name)) {
setEmptyFields(prev => prev.filter(field => field !== name));
}
@ -101,8 +114,11 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
} else if (name.includes('weight_kg') || name.includes('height_m')) {
setFormData(prev => ({ ...prev, [name]: FormatPeso(value) }));
} else if (name === 'rn_in_insurance' || name === 'vip' || name === 'validadeIndeterminada') {
setFormData(prev => ({ ...prev, [name]: checked }));
} else {
setFormData(prev => ({ ...prev, [name]: checked }));
} else if(name === 'cep'){
handleCep(value)
setFormData(prev => ({...prev, [name]: value}))
}else {
setFormData(prev => ({ ...prev, [name]: value }));
}
};
@ -189,9 +205,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
}
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(formData.email)) {
throw new Error('Email inválido. Por favor, verifique o email digitado.');
}
await onSave({ ...formData, bmi: parseFloat(formData.bmi) || null });
};
@ -647,4 +660,4 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
);
}
export default PatientForm;
export default PatientForm;

8
src/components/utils/Functions-Endpoints/General.js
View File

@ -38,4 +38,10 @@ const UserInfos = async (access_token) => {
}
};
export { UserInfos };
const SearchCep = async (cep) => {
fetch(`https://brasilapi.com.br/api/cep/v1/${cep}`)
.then(response => console.log(response))
}
export { UserInfos,SearchCep };

15
src/data/sidebar-items-adm.json
View File

@ -1,8 +1,4 @@
[
{
"name": "Menu",
"isTitle": true
},
{
"name": "Lista de Pacientes",
"icon": "clipboard-heart-fill",
@ -24,17 +20,10 @@
"name": "Relatórios",
"icon": "table",
"url": "/admin/laudo"
},
{
"name": "Gestão de Usuários",
"icon": "person-badge-fill",
"url": "/admin/gestao"
},
},
{
"name": "Painel Administrativo",
"icon": "file-bar-graph-fill",
"url": "/admin/painel"
}
]
]

4
src/data/sidebar-items-financeiro.json
View File

@ -1,8 +1,4 @@
[
{
"name": "Menu-Financeiro",
"isTitle": true
},
{
"name": "Controle Financeiro",
"icon": "cash-coin",

10
src/data/sidebar-items-medico.json
View File

@ -1,14 +1,4 @@
[
{
"name": "Menu",
"isTitle": true
},
{
"name": "Prontuário",
"icon": "calendar-plus-fill",
"url": "/medico/prontuario"
},
{
"name": "Seus Agendamentos",
"icon": "calendar",

10
src/data/sidebar-items-paciente.json
View File

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

13
src/data/sidebar-items-secretaria.json
View File

@ -1,9 +1,4 @@
[
{
"name": "Menu",
"isTitle": true
},
{
"name":"Início",
"url": "/secretaria/",
@ -25,11 +20,5 @@
"name": "Agendar consulta",
"icon": "calendar-plus-fill",
"url": "/secretaria/agendamento"
},
{
"name": "Laudo do Paciente",
"icon": "table",
"url": "/secretaria/laudo"
}
]
]

1074
src/pages/Agendamento.jsx
View File

File diff suppressed because it is too large Load Diff

238
src/pages/AgendamentoCadastroManager.jsx
View File

@ -1,82 +1,182 @@
import React from 'react'
import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta'
import API_KEY from '../components/utils/apiKeys'
import { useAuth } from '../components/utils/AuthProvider'
import { useEffect,useState } from 'react'
import dayjs from 'dayjs'
import { UserInfos } from '../components/utils/Functions-Endpoints/General'
const AgendamentoCadastroManager = ({setPageConsulta, Dict}) => {
import React, { useEffect, useState } from 'react';
import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta';
import API_KEY from '../components/utils/apiKeys';
import { useAuth } from '../components/utils/AuthProvider';
import dayjs from 'dayjs';
import { UserInfos } from '../components/utils/Functions-Endpoints/General';
import { toast } from 'react-toastify';
const AgendamentoCadastroManager = ({ setPageConsulta, agendamentoInicial }) => {
const {getAuthorizationHeader} = useAuth()
const [agendamento, setAgendamento] = useState({status:'confirmed'})
const [idUsuario, setIDusuario] = useState('0')
const { getAuthorizationHeader } = useAuth();
const [agendamento, setAgendamento] = useState({ status: 'agendado' });
const [idUsuario, setIDusuario] = useState('0');
const [isEditMode, setIsEditMode] = useState(false);
let authHeader = getAuthorizationHeader()
let authHeader = getAuthorizationHeader();
useEffect(() => {
if (agendamentoInicial && agendamentoInicial.id) {
const scheduled_at = dayjs(agendamentoInicial.scheduled_at);
useEffect(() => {
setAgendamento({
...agendamentoInicial,
dataAtendimento: scheduled_at.format('YYYY-MM-DD'),
horarioInicio: scheduled_at.format('HH:mm'),        
tipo_consulta: agendamentoInicial.appointment_type || 'Presencial',
convenio: agendamentoInicial.insurance_provider || 'Público',
paciente_nome: agendamentoInicial.paciente_nome || '',
paciente_cpf: agendamentoInicial.paciente_cpf || '',
medico_nome: agendamentoInicial.medico_nome || '',
patient_id: agendamentoInicial.patient_id,
doctor_id: agendamentoInicial.doctor_id,
status: agendamentoInicial.status,
});
setIsEditMode(true);
} else {
setAgendamento({
status: 'agendado',
patient_id: null,
doctor_id: null,
dataAtendimento: dayjs().format('YYYY-MM-DD'),
horarioInicio: '',
tipo_consulta: 'Presencial',
convenio: 'Público',
paciente_nome: '',
paciente_cpf: '',
medico_nome: ''
});
setIsEditMode(false);
}
if(!Dict){setAgendamento({})}
else{
console.log(Dict)
setAgendamento(Dict)
}
const ColherInfoUsuario =async () => {
const result = await UserInfos(authHeader)
setIDusuario(result?.profile?.id)
}
ColherInfoUsuario()
}, [])
const handleSave = (Dict) => {
let DataAtual = dayjs()
const ColherInfoUsuario = async () => {
const result = await UserInfos(authHeader);
setIDusuario(result?.profile?.id);
};
ColherInfoUsuario();
}, [agendamentoInicial, authHeader]);
const handleSave = async (Dict) => {
var myHeaders = new Headers();
myHeaders.append("apikey", API_KEY);
myHeaders.append("Authorization", authHeader);
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Prefer", "return=representation");
var raw = JSON.stringify({
"patient_id": Dict.patient_id,
"doctor_id": Dict.doctor_id,
"scheduled_at": `${Dict.dataAtendimento}T${Dict.horarioInicio}:00.000Z`,
"duration_minutes": Dict.duration_minutes || 30,
"appointment_type": Dict.tipo_consulta,
"insurance_provider": Dict.convenio,
"status": Dict.status || 'agendado',
"created_by": idUsuario,
"created_at": dayjs().toISOString(),
});
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
try {
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOptions);
if (response.ok) {
toast.success("Agendamento criado com sucesso! ✅");
setPageConsulta(false);
} else {
const errorText = await response.text();
console.error('Erro ao cadastrar agendamento:', errorText);
toast.error(`Falha ao criar agendamento: ${JSON.parse(errorText)?.message || 'Erro desconhecido'}`);
}
} catch (error) {
console.error('Erro de rede:', error);
toast.error("Erro de rede ao salvar. ❌");
}
}
const handleUpdate = async (Dict) => {
const appointmentId = agendamentoInicial.id;
var myHeaders = new Headers();
myHeaders.append("apikey", API_KEY);
myHeaders.append("Authorization", authHeader);
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Prefer", "return=representation");
var raw = JSON.stringify({
"patient_id": Dict.patient_id,
"doctor_id": Dict.doctor_id,
"scheduled_at": `${Dict.dataAtendimento}T${Dict.horarioInicio}:00.000Z`,
"duration_minutes": 30,
"appointment_type": Dict.tipo_consulta,
"patient_notes": "",
"insurance_provider": Dict.convenio,
"status": Dict.status,
"created_by": idUsuario
});
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
}
var raw = JSON.stringify({
"patient_id": Dict.patient_id,
"doctor_id": Dict.doctor_id,
"scheduled_at": `${Dict.dataAtendimento}T${Dict.horarioInicio}:00.000Z`,
"duration_minutes": Dict.duration_minutes || 30,
"appointment_type": Dict.tipo_consulta,
"insurance_provider": Dict.convenio,
"status": Dict.status,
"updated_at": dayjs().toISOString(),
"updated_by": idUsuario,
});
var requestOptions = {
method: 'PATCH',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
try {
const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${appointmentId}`, requestOptions);
if (response.ok) {
toast.success("Agendamento atualizado com sucesso! 📝");
setPageConsulta(false);
} else {
const errorText = await response.text();
console.error('Erro ao atualizar agendamento:', errorText);
toast.error(`Falha ao atualizar agendamento: ${JSON.parse(errorText)?.message || 'Erro desconhecido'}`);
}
} catch (error) {
console.error('Erro de rede:', error);
toast.error("Erro de rede ao atualizar. ❌");
}
}
const handleFormSubmit = (Dict) => {
if (isEditMode) {
handleUpdate(Dict);
} else {
handleSave(Dict);
}
}
return (
<div>
<FormNovaConsulta onSave={handleSave} agendamento={agendamento} setAgendamento={setAgendamento} onCancel={() => setPageConsulta(false)}/>
return (
<div>
{}
<FormNovaConsulta
onSave={handleFormSubmit}
agendamento={agendamento}
setAgendamento={setAgendamento}
onCancel={() => setPageConsulta(false)}
/>
</div>
);
};
</div>
)
}
export default AgendamentoCadastroManager
export default AgendamentoCadastroManager;

24
src/pages/Details.jsx
View File

@ -7,7 +7,7 @@ import { Link } from "react-router-dom";
import { useAuth } from "../components/utils/AuthProvider";
const Details = () => {
const Details = (DictInfo) => {
const parametros = useParams();
const {getAuthorizationHeader, isAuthenticated} = useAuth();
const [paciente, setPaciente] = useState({});
@ -22,19 +22,29 @@ const Details = () => {
navigate(`/${prefixo}/pacientes`);
}
const navigateEdit = () => {
const prefixo = location.pathname.split("/")[1];
navigate(`/${prefixo}/medicos/edit`);
}
useEffect(() => {
if (!patientID) return;
if (!DictInfo) return;
console.log(patientID, 'teu id')
const authHeader = getAuthorizationHeader()
GetPatientByID(patientID, authHeader)
GetPatientByID(DictInfo.DictInfo.id, authHeader)
.then((data) => {
console.log(data, "paciente vindo da API");
setPaciente(data[0]); // supabase retorna array
})
.catch((err) => console.error("Erro ao buscar paciente:", err));
}, [patientID]);
}, [DictInfo]);
const handleDelete = async (anexoId) => {
@ -82,11 +92,9 @@ const Details = () => {
</div>
</div>
<Link to={`edit`}>
<button className="btn btn-light" >
<button className="btn btn-light" onClick={() => navigateEdit()} >
<i className="bi bi-pencil-square"></i> Editar
</button>
</Link>
</div>
</div>
@ -285,4 +293,4 @@ const Details = () => {
);
};
export default Details;
export default Details;

73
src/pages/DoctorDetails.jsx
View File

@ -4,37 +4,24 @@ import { useParams,Link, useNavigate, useLocation } from "react-router-dom";
import { GetDoctorByID } from "../components/utils/Functions-Endpoints/Doctor";
import { useAuth } from "../components/utils/AuthProvider";
const Details = () => {
const DoctorDetails = ({DictInfo}) => {
const {getAuthorizationHeader} = useAuth();
const [doctor, setDoctor] = useState({});
const Parametros = useParams()
const navigate = useNavigate();
const location = useLocation();
const Voltar = () => {
const navigateEdit = () => {
const prefixo = location.pathname.split("/")[1];
navigate(`/${prefixo}/medicos/edit`);
}
const Voltar = () => {
const prefixo = location.pathname.split("/")[1];
navigate(`/${prefixo}/medicos`);
}
const doctorID = Parametros.id
useEffect(() => {
if (!doctorID) return;
const authHeader = getAuthorizationHeader()
GetDoctorByID(doctorID, authHeader)
.then((data) => {
console.log(data, "médico vindo da API");
setDoctor(data[0])
; // supabase retorna array
})
.catch((err) => console.error("Erro ao buscar paciente:", err));
}, [doctorID]);
//if (!doctor) return <p style={{ textAlign: "center" }}>Carregando...</p>;
return (
<>
<div className="card p-3 shadow-sm">
@ -50,15 +37,13 @@ const Details = () => {
<img src={avatarPlaceholder} alt="" />
</div>
<div className="media-body ms-3 font-extrabold">
<span>{doctor.nome || "Nome Completo"}</span>
<p>{doctor.cpf || "CPF"}</p>
<span>{DictInfo.full_name || "Nome Completo"}</span>
<p>{DictInfo.cpf || "CPF"}</p>
</div>
</div>
<Link to={`edit`}>
<button className="btn btn-light" onClick={() => {console.log(doctor.id)}} >
<button className="btn btn-light" onClick={() => {navigateEdit()}} >
<i className="bi bi-pencil-square"></i> Editar
</button>
</Link>
</div>
</div>
@ -69,29 +54,29 @@ const Details = () => {
<div className="row">
<div className="col-md-6 mb-3">
<label className="font-extrabold">Nome:</label>
<p>{doctor.full_name || "-"}</p>
<p>{DictInfo.full_name || "-"}</p>
</div>
<div className="col-md-6 mb-3">
<label className="font-extrabold">Data de nascimento:</label>
<p>{doctor.birth_date || "-"}</p>
<p>{DictInfo.birth_date || "-"}</p>
</div>
<div className="col-md-6 mb-3">
<label className="font-extrabold">CPF:</label>
<p>{doctor.cpf || "-"}</p>
<p>{DictInfo.cpf || "-"}</p>
</div>
<div className="col-md-6 mb-3">
<label className="font-extrabold">CRM:</label>
<p>{doctor.crm || "-"}</p>
<p>{DictInfo.crm || "-"}</p>
</div>
<div className="col-md-6 mb-3">
<label className="font-extrabold">Estado do CRM:</label>
<p>{doctor.crm_uf || "-"}</p>
<p>{DictInfo.crm_uf || "-"}</p>
</div>
<div className="col-md-6 mb-3">
<label className="font-extrabold">Especialização:</label>
<p>{doctor.specialty || "-"}</p>
<p>{DictInfo.specialty || "-"}</p>
</div>
</div>
</div>
@ -103,31 +88,31 @@ const Details = () => {
<div className="row">
<div className="col-md-4 mb-3">
<label className="font-extrabold">CEP:</label>
<p>{doctor.cep || "-"}</p>
<p>{DictInfo.cep || "-"}</p>
</div>
<div className="col-md-8 mb-3">
<label className="font-extrabold">Rua:</label>
<p>{doctor.street || "-"}</p>
<p>{DictInfo.street || "-"}</p>
</div>
<div className="col-md-4 mb-3">
<label className="font-extrabold">Bairro:</label>
<p>{doctor.neighborhood || "-"}</p>
<p>{DictInfo.neighborhood || "-"}</p>
</div>
<div className="col-md-4 mb-3">
<label className="font-extrabold">Cidade:</label>
<p>{doctor.city || "-"}</p>
<p>{DictInfo.city || "-"}</p>
</div>
<div className="col-md-2 mb-3">
<label className="font-extrabold">Estado:</label>
<p>{doctor.state || "-"}</p>
<p>{DictInfo.state || "-"}</p>
</div>
<div className="col-md-4 mb-3">
<label className="font-extrabold">Número:</label>
<p>{doctor.number || "-"}</p>
<p>{DictInfo.number || "-"}</p>
</div>
<div className="col-md-8 mb-3">
<label className="font-extrabold">Complemento:</label>
<p>{doctor.complement || "-"}</p>
<p>{DictInfo.complement || "-"}</p>
</div>
</div>
</div>
@ -139,15 +124,15 @@ const Details = () => {
<div className="row">
<div className="col-md-6 mb-3">
<label className="font-extrabold">Email:</label>
<p>{doctor.email || "-"}</p>
<p>{DictInfo.email || "-"}</p>
</div>
<div className="col-md-6 mb-3">
<label className="font-extrabold">Telefone:</label>
<p>{doctor.phone_mobile || "-"}</p>
<p>{DictInfo.phone_mobile || "-"}</p>
</div>
<div className="col-md-6 mb-3">
<label className="font-extrabold">Telefone 2:</label>
<p>{doctor.phone2 || "-"}</p>
<p>{DictInfo.phone2 || "-"}</p>
</div>
</div>
@ -156,4 +141,4 @@ const Details = () => {
);
};
export default Details;
export default DoctorDetails;

60
src/pages/DoctorEditPage.jsx
View File

@ -8,49 +8,23 @@ import API_KEY from "../components/utils/apiKeys";
const ENDPOINT_AVAILABILITY =
"https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_availability";
const DoctorEditPage = () => {
const DoctorEditPage = ({DictInfo}) => {
const { getAuthorizationHeader } = useAuth();
const [DoctorToPUT, setDoctorPUT] = useState({});
const Parametros = useParams();
const [searchParams] = useSearchParams();
const DoctorID = Parametros.id;
const DoctorID = "b24c88b2-1d51-4c04-8fe8-e75c3f2817d1";
const availabilityId = searchParams.get("availabilityId");
const [availabilityToPATCH, setAvailabilityToPATCH] = useState(null);
const [mode, setMode] = useState("doctor");
console.log("teste", DictInfo)
useEffect(() => {
const authHeader = getAuthorizationHeader();
if (availabilityId) {
setMode("availability");
fetch(`${ENDPOINT_AVAILABILITY}?id=eq.${availabilityId}&select=*`, {
method: "GET",
headers: {
apikey: API_KEY,
Authorization: authHeader,
},
})
.then((res) => res.json())
.then((data) => {
if (data && data.length > 0) {
setAvailabilityToPATCH(data[0]);
console.log("Disponibilidade vinda da API:", data[0]);
}
})
.catch((err) => console.error("Erro ao buscar disponibilidade:", err));
} else {
setMode("doctor");
GetDoctorByID(DoctorID, authHeader)
.then((data) => {
console.log(data, "médico vindo da API");
setDoctorPUT(data[0]);
})
.catch((err) => console.error("Erro ao buscar paciente:", err));
}
}, [DoctorID, availabilityId, getAuthorizationHeader]);
useEffect(() => {
setDoctorPUT(DictInfo)
}, [DictInfo]);
const HandlePutDoctor = async () => {
const authHeader = getAuthorizationHeader();
@ -71,18 +45,8 @@ const DoctorEditPage = () => {
redirect: "follow",
};
try {
const response = await fetch(
`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${DoctorID}`,
requestOptions
);
console.log("Resposta PUT Doutor:", response);
alert("Dados do médico atualizados com sucesso!");
} catch (error) {
console.error("Erro ao atualizar médico:", error);
alert("Erro ao atualizar dados do médico.");
throw error;
}
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${DictInfo.id}`,requestOptions)
.then(response => console.log(response))
};
// 2. Função para Atualizar DISPONIBILIDADE (PATCH)
@ -123,12 +87,6 @@ const DoctorEditPage = () => {
return (
<div>
<h1 className="text-2xl font-bold mb-4">
{mode === "availability"
? `Editar Horário Disponível (ID: ${availabilityId.substring(0, 8)})`
: `Editar Médico (ID: ${DoctorID})`}
</h1>
<DoctorForm
onSave={
mode === "availability" ? HandlePatchAvailability : HandlePutDoctor

80
src/pages/DoctorTable.jsx
View File

@ -4,7 +4,7 @@ import { useAuth } from "../components/utils/AuthProvider";
import { Link } from "react-router-dom";
import "./style/TableDoctor.css";
function TableDoctor() {
function TableDoctor({setDictInfo}) {
const { getAuthorizationHeader, isAuthenticated } = useAuth();
const [medicos, setMedicos] = useState([]);
@ -27,6 +27,10 @@ function TableDoctor() {
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [selectedDoctorId, setSelectedDoctorId] = useState(null);
// Ordenação rápida
const [sortKey, setSortKey] = useState(null); // 'nome' | 'idade' | null
const [sortDir, setSortDir] = useState('asc'); // 'asc' | 'desc'
const limparFiltros = () => {
setSearch("");
setFiltroEspecialidade("Todos");
@ -143,11 +147,25 @@ function TableDoctor() {
return resultado;
}) : [];
// Aplica ordenação rápida
const applySorting = (arr) => {
if (!Array.isArray(arr) || !sortKey) return arr;
const copy = [...arr];
if (sortKey === 'nome') {
copy.sort((a, b) => (a.full_name || '').localeCompare((b.full_name || ''), undefined, { sensitivity: 'base' }));
} else if (sortKey === 'idade') {
copy.sort((a, b) => calcularIdade(a.birth_date) - calcularIdade(b.birth_date));
}
if (sortDir === 'desc') copy.reverse();
return copy;
};
const medicosOrdenados = applySorting(medicosFiltrados);
const totalPaginas = Math.ceil(medicosFiltrados.length / itensPorPagina);
const indiceInicial = (paginaAtual - 1) * itensPorPagina;
const indiceFinal = indiceInicial + itensPorPagina;
const medicosPaginados = medicosFiltrados.slice(indiceInicial, indiceFinal);
const medicosPaginados = medicosOrdenados.slice(indiceInicial, indiceFinal);
const irParaPagina = (pagina) => {
@ -185,7 +203,7 @@ function TableDoctor() {
useEffect(() => {
setPaginaAtual(1);
}, [search, filtroEspecialidade, filtroAniversariante, filtroCidade, filtroEstado, idadeMinima, idadeMaxima, dataInicial, dataFinal]);
}, [search, filtroEspecialidade, filtroAniversariante, filtroCidade, filtroEstado, idadeMinima, idadeMaxima, dataInicial, dataFinal, sortKey, sortDir]);
return (
<>
@ -258,6 +276,34 @@ function TableDoctor() {
<i className="bi bi-calendar me-1"></i> Aniversariantes
</button>
</div>
{/* Ordenação rápida */}
<div className="vr mx-2 d-none d-md-block" />
<div className="d-flex align-items-center gap-2">
<span className="text-muted small">Ordenar por:</span>
{(() => {
const sortValue = sortKey ? `${sortKey}-${sortDir}` : '';
return (
<select
className="form-select compact-select sort-select w-auto"
value={sortValue}
onChange={(e) => {
const v = e.target.value;
if (!v) { setSortKey(null); setSortDir('asc'); return; }
const [k, d] = v.split('-');
setSortKey(k);
setSortDir(d);
}}
>
<option value="">Sem ordenação</option>
<option value="nome-asc">Nome (A-Z)</option>
<option value="nome-desc">Nome (Z-A)</option>
<option value="idade-asc">Idade (crescente)</option>
<option value="idade-desc">Idade (decrescente)</option>
</select>
);
})()}
</div>
</div>
<div className="d-flex justify-content-between align-items-center mt-3">
@ -357,24 +403,6 @@ function TableDoctor() {
</div>
</div>
{(search || filtroEspecialidade !== "Todos" || filtroAniversariante ||
filtroCidade || filtroEstado || idadeMinima || idadeMaxima || dataInicial || dataFinal) && (
<div className="alert alert-info mb-3 filters-active">
<strong>Filtros ativos:</strong>
<div className="mt-1">
{search && <span className="badge bg-primary me-2">Busca: "{search}"</span>}
{filtroEspecialidade !== "Todos" && <span className="badge bg-primary me-2">Especialidade: {filtroEspecialidade}</span>}
{filtroAniversariante && <span className="badge bg-primary me-2">Aniversariantes</span>}
{filtroCidade && <span className="badge bg-primary me-2">Cidade: {filtroCidade}</span>}
{filtroEstado && <span className="badge bg-primary me-2">Estado: {filtroEstado}</span>}
{idadeMinima && <span className="badge bg-primary me-2">Idade mín: {idadeMinima}</span>}
{idadeMaxima && <span className="badge bg-primary me-2">Idade máx: {idadeMaxima}</span>}
{dataInicial && <span className="badge bg-primary me-2">Data inicial: {dataInicial}</span>}
{dataFinal && <span className="badge bg-primary me-2">Data final: {dataFinal}</span>}
</div>
</div>
)}
<div className="table-responsive">
<table className="table table-striped table-hover table-doctor-table">
<thead>
@ -409,14 +437,14 @@ function TableDoctor() {
<td>{medico.email || 'Não informado'}</td>
<td>
<div className="d-flex gap-2">
<Link to={`${medico.id}`}>
<button className="btn btn-sm btn-view">
<Link to={`details`}>
<button className="btn btn-sm btn-view" onClick={() => setDictInfo({...medico})}>
<i className="bi bi-eye me-1"></i> Ver Detalhes
</button>
</Link>
<Link to={`${medico.id}/edit`}>
<button className="btn btn-sm btn-edit">
<Link to={`edit`}>
<button className="btn btn-sm btn-edit" onClick={() => setDictInfo({...medico})}>
<i className="bi bi-pencil me-1"></i> Editar
</button>
</Link>
@ -568,4 +596,4 @@ function TableDoctor() {
);
}
export default TableDoctor;
export default TableDoctor;

51
src/pages/EditPage.jsx
View File

@ -1,34 +1,20 @@
import React from 'react'
import PatientForm from '../components/patients/PatientForm'
import {useEffect, useState} from 'react'
import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient'
import API_KEY from '../components/utils/apiKeys'
import {useNavigate, useParams } from 'react-router-dom'
import { useAuth } from '../components/utils/AuthProvider'
const EditPage = () => {
const EditPage = ({DictInfo}) => {
const navigate = useNavigate()
const Parametros = useParams()
const [PatientToPUT, setPatientPUT] = useState({})
const { getAuthorizationHeader, isAuthenticated } = useAuth();
const PatientID = Parametros.id
useEffect(() => {
const authHeader = getAuthorizationHeader()
GetPatientByID(PatientID, authHeader)
.then((data) => {
console.log(data[0], "paciente vindo da API");
setPatientPUT(data[0]); // supabase retorna array
})
.catch((err) => console.error("Erro ao buscar paciente:", err));
}, [PatientID])
setPatientPUT(DictInfo)
}, [DictInfo])
const HandlePutPatient = async () => {
const authHeader = getAuthorizationHeader()
@ -39,9 +25,9 @@ const HandlePutPatient = async () => {
myHeaders.append("Authorization", authHeader);
myHeaders.append("Content-Type", "application/json");
var raw = JSON.stringify(PatientToPUT);
var raw = JSON.stringify({...PatientToPUT, bmi:Number(PatientToPUT) || null});
console.log("Enviando paciente para atualização:", PatientToPUT);
console.log("Enviando atualização:", PatientToPUT);
var requestOptions = {
method: 'PATCH',
@ -50,26 +36,11 @@ const HandlePutPatient = async () => {
redirect: 'follow'
};
try {
const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients?id=eq.${PatientID}`,requestOptions);
console.log(response)
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients?id=eq.${PatientToPUT.id}`,requestOptions)
.then(response => console.log(response))
.then(result => console.log(result))
.catch(console.log("erro"))
if(response.ok === false){
console.error("Erro ao atualizar paciente:");
}
else{
console.log("ATUALIZADO COM SUCESSO");
navigate('/secretaria/pacientes')
}
return response;
} catch (error) {
console.error("Erro ao atualizar paciente:", error);
throw error;
}
};
return (
@ -86,4 +57,4 @@ const HandlePutPatient = async () => {
)
}
export default EditPage
export default EditPage

185
src/pages/Inicio.jsx
View File

@ -1,6 +1,8 @@
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { FaUser, FaUserPlus, FaCalendarAlt, FaCalendarCheck } from 'react-icons/fa';
import { useAuth } from '../components/utils/AuthProvider';
import API_KEY from '../components/utils/apiKeys';
import './style/Inicio.css';
import { Link } from 'react-router-dom';
@ -8,18 +10,141 @@ import { Link } from 'react-router-dom';
function Inicio() {
const navigate = useNavigate();
const { getAuthorizationHeader, isAuthenticated } = useAuth();
const [pacientes, setPacientes] = useState([]);
const [medicos, setMedicos] = useState([]);
const [agendamentos, setAgendamentos] = useState([]);
const [agendamentosComPacientes, setAgendamentosComPacientes] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchPacientes = async () => {
try {
const authHeader = getAuthorizationHeader();
const myHeaders = new Headers();
myHeaders.append("apikey", API_KEY);
myHeaders.append("Authorization", authHeader);
const requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions);
if (response.ok) {
const data = await response.json();
setPacientes(data);
console.log('Pacientes carregados:', data.length);
} else {
console.error(' Erro ao buscar pacientes:', response.status);
}
} catch (error) {
console.error(' Erro ao buscar pacientes:', error);
}
};
const fetchMedicos = async () => {
try {
const authHeader = getAuthorizationHeader();
const myHeaders = new Headers();
myHeaders.append("apikey", API_KEY);
myHeaders.append("Authorization", authHeader);
const requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors", requestOptions);
if (response.ok) {
const data = await response.json();
setMedicos(data);
console.log(' Médicos carregados:', data.length);
} else {
console.error('Erro ao buscar médicos:', response.status);
}
} catch (error) {
console.error(' Erro ao buscar médicos:', error);
}
};
const fetchAgendamentos = async () => {
try {
const authHeader = getAuthorizationHeader();
const myHeaders = new Headers();
myHeaders.append("apikey", API_KEY);
myHeaders.append("Authorization", authHeader);
const requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOptions);
if (response.ok) {
const data = await response.json();
setAgendamentos(data);
console.log(' Agendamentos carregados:', data.length);
} else {
console.error(' Erro ao buscar agendamentos:', response.status);
}
} catch (error) {
console.error(' Erro ao buscar agendamentos:', error);
} finally {
setLoading(false);
}
};
if (isAuthenticated) {
fetchPacientes();
fetchMedicos();
fetchAgendamentos();
}
}, [isAuthenticated, getAuthorizationHeader]);
useEffect(() => {
if (agendamentos.length > 0 && pacientes.length > 0 && medicos.length > 0) {
const agendamentosComNomes = agendamentos.map(agendamento => {
const paciente = pacientes.find(p => p.id === agendamento.patient_id);
const medico = medicos.find(m => m.id === agendamento.doctor_id);
return {
...agendamento,
nomePaciente: paciente?.full_name || 'Paciente não encontrado',
nomeMedico: medico?.full_name || 'Médico não encontrado',
especialidadeMedico: medico?.specialty || ''
};
});
setAgendamentosComPacientes(agendamentosComNomes);
}
}, [agendamentos, pacientes, medicos]);
const totalPacientes = pacientes.length;
const novosEsseMes = pacientes.filter(p => p.createdAt && new Date(p.createdAt).getMonth() === new Date().getMonth()).length;
const novosEsseMes = pacientes.filter(p => p.created_at && new Date(p.created_at).getMonth() === new Date().getMonth()).length;
const hoje = new Date();
const agendamentosDoDia = agendamentos.filter(
a => a.data && new Date(a.data).getDate() === hoje.getDate()
);
hoje.setHours(0, 0, 0, 0);
const agendamentosDoDia = agendamentosComPacientes.filter(a => {
if (!a.scheduled_at) return false;
const dataAgendamento = new Date(a.scheduled_at);
dataAgendamento.setHours(0, 0, 0, 0);
return dataAgendamento.getTime() === hoje.getTime();
});
const agendamentosHoje = agendamentosDoDia.length;
const pendencias = agendamentos.filter(a => a.status === 'pending' || a.status === 'scheduled').length;
return (
<div className="dashboard-container">
@ -57,7 +182,7 @@ function Inicio() {
<div className="stat-card">
<div className="stat-info">
<span className="stat-label">PENDÊNCIAS</span>
<span className="stat-value">0</span>
<span className="stat-value">{loading ? '...' : pendencias}</span>
</div>
<div className="stat-icon-wrapper orange"><FaCalendarAlt className="stat-icon" /></div>
</div>
@ -92,14 +217,54 @@ function Inicio() {
<div className="appointments-section">
<h2>Próximos Agendamentos</h2>
{agendamentosHoje > 0 ? (
<div>
{agendamentosDoDia.map(agendamento => (
{loading ? (
<div className="no-appointments-content">
<p>Carregando agendamentos...</p>
</div>
) : agendamentosHoje > 0 ? (
<div className="agendamentos-list">
{agendamentosDoDia.slice(0, 5).map(agendamento => (
<div key={agendamento.id} className="agendamento-item">
<p>{agendamento.nomePaciente}</p>
<p>{new Date(agendamento.data).toLocaleTimeString()}</p>
<div className="agendamento-info">
<div className="agendamento-time-date">
<p className="agendamento-hora">
{new Date(agendamento.scheduled_at).toLocaleTimeString('pt-BR', {
hour: '2-digit',
minute: '2-digit'
})}
</p>
<p className="agendamento-data">
{new Date(agendamento.scheduled_at).toLocaleDateString('pt-BR', {
day: '2-digit',
month: '2-digit',
year: 'numeric'
})}
</p>
</div>
<div className="agendamento-detalhes">
<p className="agendamento-paciente">
<strong>Paciente:</strong> {agendamento.nomePaciente}
</p>
<p className="agendamento-medico">
<strong>Dr(a):</strong> {agendamento.nomeMedico}
{agendamento.especialidadeMedico && ` - ${agendamento.especialidadeMedico}`}
</p>
</div>
<span className={`agendamento-status status-${agendamento.status}`}>
{agendamento.status === 'scheduled' ? 'Agendado' :
agendamento.status === 'completed' ? 'Concluído' :
agendamento.status === 'pending' ? 'Pendente' :
agendamento.status === 'cancelled' ? 'Cancelado' :
agendamento.status === 'requested' ? '' : agendamento.status}
</span>
</div>
</div>
))}
{agendamentosHoje > 5 && (
<button className="view-all-button" onClick={() => navigate('/secretaria/agendamento')}>
Ver todos os {agendamentosHoje} agendamentos
</button>
)}
</div>
) : (
<div className="no-appointments-content">

745
src/pages/LaudoManager.jsx
View File

@ -1,337 +1,514 @@
// src/pages/LaudoManager.jsx
import React, { useState, useEffect } from "react";
import "./LaudoStyle.css"; // Importa o CSS externo
import API_KEY from '../components/utils/apiKeys';
import { Link } from 'react-router-dom';
import React, { useState, useEffect } from 'react';
import { useAuth } from '../components/utils/AuthProvider';
import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient';
import { GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor';
import { useNavigate } from 'react-router-dom';
import html2pdf from 'html2pdf.js';
import TiptapViewer from '../PagesMedico/TiptapViewer'
import '../PagesMedico/styleMedico/DoctorRelatorioManager.css';
/* ===== Mock data (simula APIDOG) ===== */
function mockFetchLaudos() {
return [
{
id: "LAU-300551296",
pedido: 300551296,
data: "29/07/2025",
paciente: { nome: "Sarah Mariana Oliveira", cpf: "616.869.070-**", nascimento: "1990-03-25", convenio: "Unimed" },
solicitante: "Sandro Rangel Santos",
exame: "US - Abdome Total",
conteudo: "RELATÓRIO MÉDICO\n\nAchados: Imagens compatíveis com ...\nConclusão: Órgãos sem alterações significativas.",
status: "rascunho"
},
{
id: "LAU-300659170",
pedido: 300659170,
data: "29/07/2025",
paciente: { nome: "Laissa Helena Marquetti", cpf: "950.684.57-**", nascimento: "1986-09-12", convenio: "Bradesco" },
solicitante: "Sandro Rangel Santos",
exame: "US - Mamária Bilateral",
conteudo: "RELATÓRIO MÉDICO\n\nAchados: text...",
status: "liberado"
},
{
id: "LAU-300658301",
pedido: 300658301,
data: "28/07/2025",
paciente: { nome: "Vera Lúcia Oliveira Santos", cpf: "928.005.**", nascimento: "1979-02-02", convenio: "Particular" },
solicitante: "Dr. Fulano",
exame: "US - Transvaginal",
conteudo: "RELATÓRIO MÉDICO\n\nAchados: ...",
status: "entregue"
}
];
}
const LaudoManager = () => {
const navigate = useNavigate();
const { getAuthorizationHeader } = useAuth();
const authHeader = getAuthorizationHeader();
function mockDeleteLaudo(id) {
return new Promise((res) => setTimeout(() => res({ ok: true }), 500));
}
const [relatoriosOriginais, setRelatoriosOriginais] = useState([]);
const [relatoriosFiltrados, setRelatoriosFiltrados] = useState([]);
const [relatoriosFinais, setRelatoriosFinais] = useState([]);
const [pacientesComRelatorios, setPacientesComRelatorios] = useState([]);
const [medicosComRelatorios, setMedicosComRelatorios] = useState([]);
const [showModal, setShowModal] = useState(false);
const [relatorioModal, setRelatorioModal] = useState(null);
const [termoPesquisa, setTermoPesquisa] = useState('');
const [filtroExame, setFiltroExame] = useState('');
const [modalIndex, setModalIndex] = useState(0);
/* ===== Componente ===== */
export default function LaudoManager() {
const [laudos, setLaudos] = useState([]);
const [openDropdownId, setOpenDropdownId] = useState(null);
const [showProtocolModal, setShowProtocolModal] = useState(false);
const [protocolForIndex, setProtocolForIndex] = useState(null);
/* viewerLaudo é usado para mostrar o editor/leitura;
previewLaudo é usado para a pré-visualização (sem bloquear) */
const [viewerLaudo, setViewerLaudo] = useState(null);
const [previewLaudo, setPreviewLaudo] = useState(null);
const [showPreview, setShowPreview] = useState(false);
const [paginaAtual, setPaginaAtual] = useState(1);
const [itensPorPagina, setItensPorPagina] = useState(10);
const [showConfirmDelete, setShowConfirmDelete] = useState(false);
const [toDelete, setToDelete] = useState(null);
const [loadingDelete, setLoadingDelete] = useState(false);
// agora guardamos a mensagem (null = sem aviso)
const [noPermissionText, setNoPermissionText] = useState(null);
/* notificação simples (sem backdrop) para 'sem permissão' */
const [showNoPermission, setShowNoPermission] = useState(false);
const isSecretary = true;
/* pesquisa */
const [query, setQuery] = useState("");
/* Para simplificar: eu assumo aqui que estamos na visão da secretaria */
const isSecretary = true; // permanece true (somente leitura)
const totalPaginas = Math.max(1, Math.ceil(relatoriosFinais.length / itensPorPagina));
const indiceInicial = (paginaAtual - 1) * itensPorPagina;
const indiceFinal = indiceInicial + itensPorPagina;
const relatoriosPaginados = relatoriosFinais.slice(indiceInicial, indiceFinal);
useEffect(() => {
// Importa os dados mock apenas
const data = mockFetchLaudos();
setLaudos(data);
}, []);
let mounted = true;
// Fecha dropdown ao clicar fora
useEffect(() => {
function onDocClick(e) {
if (e.target.closest && e.target.closest('.action-btn')) return;
if (e.target.closest && e.target.closest('.dropdown')) return;
setOpenDropdownId(null);
}
document.addEventListener('click', onDocClick);
return () => document.removeEventListener('click', onDocClick);
}, []);
const fetchReports = async () => {
try {
const myHeaders = new Headers();
myHeaders.append('apikey', API_KEY);
if (authHeader) myHeaders.append('Authorization', authHeader);
const requestOptions = { method: 'GET', headers: myHeaders, redirect: 'follow' };
function toggleDropdown(id, e) {
e.stopPropagation();
setOpenDropdownId(prev => (prev === id ? null : id));
}
const res = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?select=*", requestOptions);
const data = await res.json();
/* (botao editar) */
function handleOpenViewer(laudo) {
setOpenDropdownId(null);
if (isSecretary) {
// (notificação sem bloquear)
setShowNoPermission(true);
return;
}
setViewerLaudo(laudo);
}
const uniqueMap = new Map();
(Array.isArray(data) ? data : []).forEach(r => {
if (r && r.id) uniqueMap.set(r.id, r);
});
const unique = Array.from(uniqueMap.values())
.sort((a, b) => new Date(b.created_at || 0) - new Date(a.created_at || 0));
/* (botao imprimir) */
function handlePrint(laudo) {
// evitar bug: fechar viewer antes de abrir preview
setViewerLaudo(null);
setPreviewLaudo(laudo);
setShowPreview(true);
setOpenDropdownId(null);
}
/* (botao excluir) */
function handleRequestDelete(laudo) {
setToDelete(laudo);
setOpenDropdownId(null);
setShowConfirmDelete(true);
}
/* (funcionalidade do botao de excluir) */
async function doConfirmDelete(confirm) {
if (!toDelete) return;
if (!confirm) {
setShowConfirmDelete(false);
setToDelete(null);
return;
}
setLoadingDelete(true);
try {
const resp = await mockDeleteLaudo(toDelete.id);
if (resp.ok || resp === true) {
// removo o laudo da lista local
setLaudos(curr => curr.filter(l => l.id !== toDelete.id));
setShowConfirmDelete(false);
setToDelete(null);
alert("Laudo excluído com sucesso.");
} else {
alert("Erro ao excluir. Tente novamente.");
if (mounted) {
setRelatoriosOriginais(unique);
setRelatoriosFiltrados(unique);
setRelatoriosFinais(unique);
}
} catch (err) {
console.error('Erro listar relatórios', err);
if (mounted) {
setRelatoriosOriginais([]);
setRelatoriosFiltrados([]);
setRelatoriosFinais([]);
}
}
} catch (err) {
alert("Erro de rede ao excluir.");
} finally {
setLoadingDelete(false);
}
}
};
/* filtro de pesquisa (por pedido ou nome do paciente) */
const normalized = (s = "") => String(s).toLowerCase();
const filteredLaudos = laudos.filter(l => {
const q = normalized(query).trim();
if (!q) return true;
if (normalized(l.pedido).includes(q)) return true;
if (normalized(l.paciente?.nome).includes(q)) return true;
return false;
});
fetchReports();
const refreshHandler = () => fetchReports();
window.addEventListener('reports:refresh', refreshHandler);
return () => {
mounted = false;
window.removeEventListener('reports:refresh', refreshHandler);
};
}, [authHeader]);
useEffect(() => {
const fetchRelData = async () => {
const pacientes = [];
const medicos = [];
for (let i = 0; i < relatoriosFiltrados.length; i++) {
const rel = relatoriosFiltrados[i];
try {
const pacienteRes = await GetPatientByID(rel.patient_id, authHeader);
pacientes.push(Array.isArray(pacienteRes) ? pacienteRes[0] : pacienteRes);
} catch (err) {
pacientes.push(null);
}
try {
const doctorId = rel.created_by || rel.requested_by || null;
if (doctorId) {
const docRes = await GetDoctorByID(doctorId, authHeader);
medicos.push(Array.isArray(docRes) ? docRes[0] : docRes);
} else {
medicos.push({ full_name: rel.requested_by || '' });
}
} catch (err) {
medicos.push({ full_name: rel.requested_by || '' });
}
}
setPacientesComRelatorios(pacientes);
setMedicosComRelatorios(medicos);
};
if (relatoriosFiltrados.length > 0) fetchRelData();
else {
setPacientesComRelatorios([]);
setMedicosComRelatorios([]);
}
}, [relatoriosFiltrados, authHeader]);
const abrirModal = (relatorio, index) => {
setRelatorioModal(relatorio);
setModalIndex(index);
setShowModal(true);
};
const limparFiltros = () => {
setTermoPesquisa('');
setFiltroExame('');
setRelatoriosFinais(relatoriosOriginais);
};
const BaixarPDFdoRelatorio = (nome_paciente, idx) => {
const elemento = document.getElementById(`folhaA4-${idx}`);
if (!elemento) {
console.error('Elemento para gerar PDF não encontrado:', `folhaA4-${idx}`);
return;
}
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();
};
const handleEditClick = (relatorio) => {
if (isSecretary) {
setNoPermissionText('Sem permissão para editar/criar laudo.');
return;
}
navigate(`/medico/relatorios/${relatorio.id}/edit`);
};
const handleOpenProtocol = (relatorio, index) => {
setProtocolForIndex({ relatorio, index });
setShowProtocolModal(true);
};
const handleLiberarLaudo = async (relatorio) => {
if (isSecretary) {
// MUDANÇA: mostrar "Ainda não implementado"
setNoPermissionText('Ainda não implementado');
return;
}
// para médicos: implementação real já estava antes (mantive o bloco, caso queira)
try {
const myHeaders = new Headers();
myHeaders.append('apikey', API_KEY);
if (authHeader) myHeaders.append('Authorization', authHeader);
myHeaders.append('Content-Type', 'application/json');
myHeaders.append('Prefer', 'return=representation');
const body = JSON.stringify({ status: 'liberado' });
const res = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?id=eq.${relatorio.id}`, {
method: 'PATCH',
headers: myHeaders,
body
});
if (!res.ok) {
const txt = await res.text().catch(()=> '');
throw new Error('Erro ao liberar laudo: ' + res.status + ' ' + txt);
}
// refetch simples
const refreshed = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?select=*", {
method: 'GET',
headers: (() => { const h=new Headers(); h.append('apikey', API_KEY); if(authHeader) h.append('Authorization', authHeader); return h; })(),
});
const data = await refreshed.json();
setRelatoriosOriginais(Array.isArray(data)? data : []);
setRelatoriosFiltrados(Array.isArray(data)? data : []);
setRelatoriosFinais(Array.isArray(data)? data : []);
alert('Laudo liberado com sucesso.');
} catch (err) {
console.error(err);
alert('Erro ao liberar laudo. Veja console.');
}
};
useEffect(() => {
const q = (termoPesquisa || '').toLowerCase().trim();
const ex = (filtroExame || '').toLowerCase().trim();
let items = relatoriosOriginais || [];
if (q) {
items = items.filter(r => {
const patientName = (r.patient_name || r.patient_fullname || '').toString().toLowerCase();
const pedido = (r.id || r.request_id || r.request || '').toString().toLowerCase();
return patientName.includes(q) || pedido.includes(q) || (r.patient_id && r.patient_id.toString().includes(q));
});
}
if (ex) items = items.filter(r => (r.exam || r.exame || '').toLowerCase().includes(ex));
setRelatoriosFiltrados(items);
setRelatoriosFinais(items);
setPaginaAtual(1);
}, [termoPesquisa, filtroExame, relatoriosOriginais]);
const irParaPagina = (pagina) => setPaginaAtual(pagina);
const avancarPagina = () => { if (paginaAtual < totalPaginas) setPaginaAtual(paginaAtual + 1); };
const voltarPagina = () => { if (paginaAtual > 1) setPaginaAtual(paginaAtual - 1); };
const gerarNumerosPaginas = () => {
const paginas = [];
const paginasParaMostrar = 5;
let inicio = Math.max(1, paginaAtual - Math.floor(paginasParaMostrar / 2));
let fim = Math.min(totalPaginas, inicio + paginasParaMostrar - 1);
inicio = Math.max(1, fim - paginasParaMostrar + 1);
for (let i = inicio; i <= fim; i++) paginas.push(i);
return paginas;
};
return (
<div className="laudo-wrap">
<div className="left-col">
<div className="title-row">
<div>
<div className="page-title">Gerenciamento de Laudo</div>
{/* removi a linha "Visualização: Secretaria" conforme pedido */}
</div>
</div>
<div style={{ marginBottom:12 }}>
<input
placeholder="Pesquisar paciente ou pedido..."
value={query}
onChange={e => setQuery(e.target.value)}
style={{ width:"100%", padding:12, borderRadius:8, border:"1px solid #e6eef8" }}
/>
</div>
{filteredLaudos.length === 0 ? (
<div className="empty">Nenhum laudo encontrado.</div>
) : (
<div style={{ borderRadius:8, overflow:"visible", boxShadow:"0 0 0 1px #eef6ff" }}>
{filteredLaudos.map((l) => (
<div className="laudo-row" key={l.id}>
<div className="col" style={{ flex: "0 0 160px" }}>
<div style={{ fontWeight:700 }}>{l.pedido}</div>
<div className="small-muted">{l.data}</div>
<div>
<div className="page-heading"><h3>Lista de Relatórios</h3></div>
<div className="page-content">
<section className="row">
<div className="col-12">
<div className="card">
<div className="card-header d-flex justify-content-between align-items-center">
<h4 className="card-title mb-0">Relatórios Cadastrados</h4>
<div>
<button
className="btn btn-primary"
onClick={() => setNoPermissionText('Sem permissão para editar/criar laudo.')}
title="Secretaria não pode criar relatórios"
>
<i className="bi bi-plus-circle"></i> Adicionar Relatório
</button>
</div>
<div className="col" style={{ flex:2 }}>
<div style={{ fontWeight:600 }}>{l.paciente.nome}</div>
<div className="small-muted">{l.paciente.cpf} • {l.paciente.convenio}</div>
</div>
<div className="col" style={{ flex:1 }}>{l.exame}</div>
<div className="col small">{l.solicitante}</div>
<div className="col small" style={{ flex: "0 0 80px", textAlign:"left" }}>{l.status}</div>
</div>
<div className="row-actions">
<div className="action-btn" onClick={(e)=> toggleDropdown(l.id, e)} title="Ações">
<i class="bi bi-three-dots-vertical"></i>
<div className="card-body">
<div className="card p-3 mb-3">
<h5 className="mb-3">
<i className="bi bi-funnel-fill me-2 text-primary"></i> Filtros
</h5>
<div className="row">
<div className="col-md-5">
<div className="mb-3">
<label className="form-label">Buscar por nome ou CPF do paciente</label>
<input
type="text"
className="form-control"
placeholder="Digite nome ou CPF do paciente..."
value={termoPesquisa}
onChange={(e) => setTermoPesquisa(e.target.value)}
/>
</div>
</div>
<div className="col-md-5">
<div className="mb-3">
<label className="form-label">Filtrar por tipo de exame</label>
<input
type="text"
className="form-control"
placeholder="Digite o tipo de exame..."
value={filtroExame}
onChange={(e) => setFiltroExame(e.target.value)}
/>
</div>
</div>
<div className="col-md-2 d-flex align-items-end">
<button className="btn btn-outline-secondary w-100" onClick={limparFiltros}>
<i className="bi bi-arrow-clockwise"></i> Limpar
</button>
</div>
</div>
<div className="mt-2">
<div className="contador-relatorios">
{relatoriosFinais.length} DE {relatoriosOriginais.length} RELATÓRIOS ENCONTRADOS
</div>
</div>
</div>
{openDropdownId === l.id && (
<div className="dropdown" data-laudo-dropdown={l.id}>
<div className="item" onClick={() => handleOpenViewer(l)}>Editar</div>
<div className="item" onClick={() => handlePrint(l)}>Imprimir</div>
<div className="item" onClick={() => { alert("Protocolo de entrega: formulário (não implementado)."); setOpenDropdownId(null); }}>Protocolo de entrega</div>
<div className="item" onClick={() => { alert("Liberar laudo: requer permissão de médico. (não implementado)"); setOpenDropdownId(null); }}>Liberar laudo</div>
<div className="item" onClick={() => handleRequestDelete(l)} style={{ color:"#c23b3b" }}>Excluir laudo</div>
<div className="table-responsive">
<table className="table table-striped table-hover">
<thead>
<tr>
<th>Paciente</th>
<th>CPF</th>
<th>Exame</th>
<th></th>
</tr>
</thead>
<tbody>
{relatoriosPaginados.length > 0 ? (
relatoriosPaginados.map((relatorio, index) => {
const paciente = pacientesComRelatorios[index] || {};
return (
<tr key={relatorio.id || index}>
<td>{paciente?.full_name || relatorio.patient_name || 'Carregando...'}</td>
<td>{paciente?.cpf || 'Carregando...'}</td>
<td>{relatorio.exam || relatorio.exame || '—'}</td>
<td>
<div className="d-flex gap-2">
<button className="btn btn-sm btn-ver-detalhes" onClick={() => abrirModal(relatorio, index)}>
<i className="bi bi-eye me-1"></i> Ver Detalhes
</button>
<button className="btn btn-sm btn-editar" onClick={() => handleEditClick(relatorio)}>
<i className="bi bi-pencil me-1"></i> Editar
</button>
{/* Removido o botão "Imprimir" daqui (agora no Ver Detalhes) */}
<button className="btn btn-sm btn-protocolo" onClick={() => handleOpenProtocol(relatorio, index)}>
<i className="bi bi-send me-1"></i> Protocolo
</button>
<button className="btn btn-sm btn-liberar" onClick={() => handleLiberarLaudo(relatorio)}>
<i className="bi bi-unlock me-1"></i> Liberar laudo
</button>
</div>
</td>
</tr>
);
})
) : (
<tr><td colSpan="4" className="text-center">Nenhum relatório encontrado.</td></tr>
)}
</tbody>
</table>
{relatoriosFinais.length > 0 && (
<div className="d-flex justify-content-between align-items-center mt-3">
<div className="d-flex align-items-center">
<span className="me-2 text-muted">Itens por página:</span>
<select
className="form-select form-select-sm w-auto"
value={itensPorPagina}
onChange={(e) => {
setItensPorPagina(Number(e.target.value));
setPaginaAtual(1);
}}
>
<option value={5}>5</option>
<option value={10}>10</option>
<option value={25}>25</option>
<option value={50}>50</option>
</select>
</div>
<div className="d-flex align-items-center">
<span className="me-3 text-muted">
Página {paginaAtual} de {totalPaginas} •
Mostrando {indiceInicial + 1}-{Math.min(indiceFinal, relatoriosFinais.length)} de {relatoriosFinais.length} itens
</span>
<nav>
<ul className="pagination pagination-sm mb-0">
<li className={`page-item ${paginaAtual === 1 ? 'disabled' : ''}`}>
<button className="page-link" onClick={voltarPagina}>
<i className="bi bi-chevron-left"></i>
</button>
</li>
{gerarNumerosPaginas().map(pagina => (
<li key={pagina} className={`page-item ${pagina === paginaAtual ? 'active' : ''}`}>
<button className="page-link" onClick={() => irParaPagina(pagina)}>
{pagina}
</button>
</li>
))}
<li className={`page-item ${paginaAtual === totalPaginas ? 'disabled' : ''}`}>
<button className="page-link" onClick={avancarPagina}>
<i className="bi bi-chevron-right"></i>
</button>
</li>
</ul>
</nav>
</div>
</div>
)}
</div>
</div>
))}
</div>
</div>
)}
</section>
</div>
{/* Viewer modal (modo leitura) — só abre para quem tem permissão */}
{viewerLaudo && !showPreview && !isSecretary && (
<div className="viewer-modal" style={{ pointerEvents:"auto" }}>
<div className="modal-backdrop" onClick={() => setViewerLaudo(null)} />
<div className="modal-card" role="dialog" aria-modal="true">
<div className="viewer-header">
<div>
<div style={{ fontSize:18, fontWeight:700 }}>{viewerLaudo.paciente.nome}</div>
<div className="patient-info">
Nasc.: {viewerLaudo.paciente.nascimento} • {computeAge(viewerLaudo.paciente.nascimento)} anos • {viewerLaudo.paciente.cpf} • {viewerLaudo.paciente.convenio}
{/* Modal principal (detalhes) */}
{showModal && relatorioModal && (
<div className="modal modal-centered" role="dialog" aria-modal="true" onClick={() => setShowModal(false)}>
<div className="modal-dialog modal-dialog-square" role="document" onClick={(e) => e.stopPropagation()}>
<div className="modal-content">
<div className="modal-header custom-modal-header">
<h5 className="modal-title">Relatório de {pacientesComRelatorios[modalIndex]?.full_name || relatorioModal.patient_name || 'Paciente'}</h5>
<button type="button" className="btn-close modal-close-btn" aria-label="Close" onClick={() => setShowModal(false)}></button>
</div>
<div className="modal-body">
<div id={`folhaA4-${modalIndex}`} className="folhaA4">
<div id='header-relatorio' style={{ textAlign: 'center', marginBottom: 24 }}>
<p style={{ margin: 0 }}>Clinica Rise up</p>
<p style={{ margin: 0 }}>Dr - CRM/SP 123456</p>
<p style={{ margin: 0 }}>Avenida - (79) 9 4444-4444</p>
</div>
<div id='infoPaciente' style={{ padding: '0 6px' }}>
<p><strong>Paciente:</strong> {pacientesComRelatorios[modalIndex]?.full_name || relatorioModal.patient_name || '—'}</p>
<p><strong>Data de nascimento:</strong> {pacientesComRelatorios[modalIndex]?.birth_date || '—'}</p>
<p><strong>Data do exame:</strong> {relatorioModal?.due_at || relatorioModal?.date || '—'}</p>
<p style={{ marginTop: 12, fontWeight: '700' }}>Conteúdo do Relatório:</p>
<div className="tiptap-viewer-wrapper">
<TiptapViewer htmlContent={relatorioModal?.content_html || relatorioModal?.content || relatorioModal?.diagnosis || 'Relatório não preenchido.'} />
</div>
</div>
<div style={{ marginTop: 20, padding: '0 6px' }}>
<p>Dr {medicosComRelatorios[modalIndex]?.full_name || relatorioModal?.requested_by || '—'}</p>
<p style={{ color: '#6c757d', fontSize: '0.95rem' }}>Emitido em: {relatorioModal?.created_at || '—'}</p>
</div>
</div>
</div>
<div style={{ display:"flex", gap:8 }}>
<button className="tool-btn" onClick={() => { setPreviewLaudo(viewerLaudo); setShowPreview(true); setViewerLaudo(null); }}>Pré-visualizar / Imprimir</button>
<button className="tool-btn" onClick={() => setViewerLaudo(null)}>Fechar</button>
</div>
</div>
<div className="toolbar">
<div className="tool-btn">B</div>
<div className="tool-btn"><i>I</i></div>
<div className="tool-btn"><u>U</u></div>
<div className="tool-btn">Fonte</div>
<div className="tool-btn">Tamanho</div>
<div className="tool-btn">Lista</div>
<div className="tool-btn">Campos</div>
<div className="tool-btn">Modelos</div>
<div className="tool-btn">Imagens</div>
</div>
<div className="editor-area" aria-readonly>
{viewerLaudo.conteudo.split("\n").map((line, i) => (
<p key={i} style={{ margin: line.trim()==="" ? "8px 0" : "6px 0" }}>{line}</p>
))}
</div>
<div className="footer-controls">
<div className="toggle small-muted">
<label><input type="checkbox" disabled /> Pré-visualização</label>
<label style={{ marginLeft:12 }}><input type="checkbox" disabled /> Ocultar data</label>
<label style={{ marginLeft:12 }}><input type="checkbox" disabled /> Ocultar assinatura</label>
</div>
<div style={{ display:"flex", gap:8 }}>
<button className="btn secondary" onClick={() => { if(window.confirm("Cancelar e voltar à lista? Todas alterações não salvas serão perdidas.")) setViewerLaudo(null); }}>Cancelar</button>
<button className="btn primary" onClick={() => alert("Salvar (não implementado para secretaria).")}>Salvar laudo</button>
<div className="modal-footer custom-modal-footer">
<button className="btn btn-primary" onClick={() => BaixarPDFdoRelatorio(pacientesComRelatorios[modalIndex]?.full_name || 'paciente', modalIndex)}>
<i className='bi bi-file-pdf-fill'></i> baixar em pdf
</button>
<button type="button" className="btn btn-outline-secondary" onClick={() => { setShowModal(false) }}>
Fechar
</button>
</div>
</div>
</div>
</div>
)}
{/* Preview modal — agora não bloqueia a tela (sem backdrop escuro), botão imprimir é interativo */}
{showPreview && previewLaudo && (
<div className="preview-modal" style={{ pointerEvents:"none" /* container não bloqueia */ }}>
<div /* sem backdrop, assim não deixa a tela escura/blocked */ />
<div className="modal-card" style={{ maxWidth:900, pointerEvents:"auto" }}>
<div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:12 }}>
<div style={{ fontWeight:700 }}>Pré-visualização - {previewLaudo.paciente.nome}</div>
<div style={{ display:"flex", gap:8 }}>
<button className="tool-btn" onClick={() => alert("Imprimir (simulado).")}>Imprimir / Download</button>
<button className="tool-btn" onClick={() => { setShowPreview(false); setPreviewLaudo(null); }}>Fechar</button>
</div>
</div>
<div style={{ border: "1px solid #e6eef8", borderRadius:6, padding:18, background:"#fff" }}>
<div style={{ marginBottom:8, fontSize:14, color:"#33475b" }}>
<strong>RELATÓRIO MÉDICO</strong>
</div>
<div style={{ marginBottom:14, fontSize:13, color:"#546b7f" }}>
{previewLaudo.paciente.nome} • Nasc.: {previewLaudo.paciente.nascimento} • CPF: {previewLaudo.paciente.cpf}
{/* Modal Protocolo */}
{showProtocolModal && protocolForIndex && (
<div className="modal modal-centered" role="dialog" aria-modal="true" onClick={() => setShowProtocolModal(false)}>
<div className="modal-dialog modal-dialog-tabela-relatorio" role="document" onClick={(e) => e.stopPropagation()}>
<div className="modal-content">
<div className="modal-header custom-modal-header">
<h5 className="modal-title">Protocolo de Entrega - {protocolForIndex.relatorio?.patient_name || 'Paciente'}</h5>
<button type="button" className="btn-close modal-close-btn" aria-label="Close" onClick={() => setShowProtocolModal(false)}></button>
</div>
<div style={{ whiteSpace:"pre-wrap", fontSize:15, color:"#1f2d3d", lineHeight:1.5 }}>
{previewLaudo.conteudo}
<div className="modal-body">
<div style={{ padding: '0 6px' }}>
<p><strong>Pedido:</strong> {protocolForIndex.relatorio?.id || protocolForIndex.relatorio?.pedido}</p>
<p><strong>Paciente:</strong> {protocolForIndex.relatorio?.patient_name || '—'}</p>
<p><strong>Data:</strong> {protocolForIndex.relatorio?.due_at || protocolForIndex.relatorio?.date || '—'}</p>
<hr />
<p>Protocolo de entrega gerado automaticamente. (Substitua pelo endpoint real se houver)</p>
</div>
</div>
<div className="modal-footer custom-modal-footer">
<button className="btn btn-primary" onClick={() => {
const idx = protocolForIndex.index ?? 0;
BaixarPDFdoRelatorio(protocolForIndex.relatorio?.patient_name || 'paciente', idx);
}}>
<i className='bi bi-file-earmark-pdf-fill'></i> baixar protocolo (PDF)
</button>
<button type="button" className="btn btn-outline-secondary" onClick={() => setShowProtocolModal(false)}>
Fechar
</button>
</div>
</div>
</div>
</div>
)}
{/* Notificação simples: Sem permissão (exibe sem backdrop escuro) - centralizada */}
{showNoPermission && (
<div className="notice-card" role="alert" aria-live="polite">
<div style={{ fontWeight:700, marginBottom:6 }}>Sem permissão para editar</div>
<div style={{ marginBottom:10, color:"#5a6f80" }}>Você está na visualização da secretaria. Edição disponível somente para médicos autorizados.</div>
<div style={{ textAlign:"right" }}>
<button className="tool-btn" onClick={() => setShowNoPermission(false)}>Fechar</button>
</div>
</div>
)}
{/* Confirm delete modal (simples: Sim / Não) */}
{showConfirmDelete && toDelete && (
<div className="confirm-modal" style={{ pointerEvents:"auto" }}>
<div className="modal-card" style={{ maxWidth:480 }}>
<div style={{ fontWeight:700, marginBottom:8 }}>Confirmar exclusão</div>
<div style={{ marginBottom:12 }}>Você tem certeza que quer excluir o laudo <strong>{toDelete.pedido} - {toDelete.paciente.nome}</strong> ? Esta ação é irreversível.</div>
<div style={{ display:"flex", justifyContent:"flex-end", gap:8 }}>
<button className="tool-btn" onClick={() => doConfirmDelete(false)} disabled={loadingDelete}>Não</button>
<button className="tool-btn" onClick={() => doConfirmDelete(true)} disabled={loadingDelete} style={{ background: loadingDelete ? "#d7e8ff" : "#ffecec", border: "1px solid #ffd7d7" }}>
{loadingDelete ? "Excluindo..." : "Sim, excluir"}
</button>
{/* Variável de aviso: mostra texto personalizado */}
{noPermissionText && (
<div className="modal modal-centered" role="dialog" aria-modal="true" onClick={() => setNoPermissionText(null)}>
<div className="modal-dialog modal-dialog-square" role="document" onClick={(e) => e.stopPropagation()}>
<div className="modal-content">
<div style={{ padding: 18 }}>
<h5 style={{ marginBottom: 8 }}>{noPermissionText}</h5>
<p style={{ color: '#6c757d' }}>{/* opcional descrição aqui */}</p>
<div style={{ textAlign: 'right', marginTop: 12 }}>
<button className="btn btn-outline-secondary" onClick={() => setNoPermissionText(null)}>Fechar</button>
</div>
</div>
</div>
</div>
</div>
)}
</div>
);
}
};
/* ===== Helpers ===== */
function computeAge(birth) {
if (!birth) return "-";
const [y,m,d] = birth.split("-").map(x => parseInt(x,10));
if (!y) return "-";
const today = new Date();
let age = today.getFullYear() - y;
const mm = today.getMonth() + 1;
const dd = today.getDate();
if (mm < m || (mm === m && dd < d)) age--;
return age;
}
export default LaudoManager;

37
src/pages/LaudoStyle.css
View File

@ -309,4 +309,39 @@ html[data-bs-theme="dark"] .notice-card {
background: #232323 !important;
color: #e0e0e0 !important;
box-shadow: 0 8px 30px rgba(10,20,40,0.32) !important;
}
}
/* Botões coloridos para Protocolo e Liberar (combina com estilo dos outros botões) */
.btn-protocolo {
background-color: #E6F2FF;
color: #004085;
border: 1px solid #d6e9ff;
padding: 8px 12px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
}
.btn-protocolo:hover {
background-color: #cce5ff;
}
/* Liberar laudo - estilo parecido com o botão editar (amarelo claro) */
.btn-liberar {
background-color: #FFF3CD;
color: #856404;
border: 1px solid #ffeaa7;
padding: 8px 12px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
}
.btn-liberar:hover {
background-color: #ffeaa7;
}
/* Ajuste visual (pequeno) para espaçamento horizontal dos botões da linha */
.table-responsive .d-flex.gap-2 .btn {
display: inline-flex;
align-items: center;
gap: 6px;
}

5
src/pages/Login.jsx
View File

@ -118,7 +118,8 @@ function Login({ onEnterSystem }) {
if (data.access_token) {
const UserData = await UserInfos(`bearer ${data.access_token}`);
console.log(UserData, "Dados do usuário");
localStorage.setItem("roleUser", UserData.roles)
if (UserData?.roles?.includes("admin")) {
navigate(`/admin/`);
} else if (UserData?.roles?.includes("secretaria")) {
@ -131,7 +132,7 @@ function Login({ onEnterSystem }) {
navigate(`/paciente/`);
}
}else{
console.log("ERROROROROROOR")
console.log("Erro na tentativa de login")
setShowCabecalho(true)
}
} else {

139
src/pages/MedicoAgendamento.jsx Normal file
View File

@ -0,0 +1,139 @@
import React, { useState, useMemo, useEffect } from 'react';
import dayjs from 'dayjs';
import CalendarComponent from '../components/AgendarConsulta/CalendarComponent.jsx';
import { useAuth } from '../components/utils/AuthProvider.js';
import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendamentoDia';
dayjs.locale('pt-br');
const MedicoAgendamento = () => {
const { getAuthorizationHeader, user } = useAuth();
const [currentDate, setCurrentDate] = useState(dayjs());
const [selectedDay, setSelectedDay] = useState(dayjs());
const [DictAgendamentosOrganizados, setAgendamentosOrganizados] = useState({});
const [showSpinner, setShowSpinner] = useState(true);
const [modoVisualizacao, setModoVisualizacao] = useState('Dia');
const [quickJump, setQuickJump] = useState({
month: currentDate.month(),
year: currentDate.year()
});
const handleQuickJumpChange = (type, value) => {
setQuickJump(prev => ({ ...prev, [type]: Number(value) }));
};
const applyQuickJump = () => {
let newDate = dayjs().year(quickJump.year).month(quickJump.month).date(1);
setCurrentDate(newDate);
setSelectedDay(newDate);
};
const [selectedID, setSelectedId] = useState('0');
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [showConfirmModal, setShowConfirmModal] = useState(false); t
useEffect(() => {
const mockAgendamentos = {
[dayjs().format('YYYY-MM-DD')]: [
{ id: 1, scheduled_at: dayjs().set('hour', 10).set('minute', 0).toISOString(), paciente_nome: "Paciente Teste 1", medico_nome: "Dr. Mock", status: "agendado" },
{ id: 2, scheduled_at: dayjs().set('hour', 11).set('minute', 30).toISOString(), paciente_nome: "Paciente Teste 2", medico_nome: "Dr. Mock", status: "confirmed" },
],
'2025-10-27': [
{ id: 3, scheduled_at: '2025-10-27T19:30:00Z', paciente_nome: 'Davi Andrade', medico_nome: 'Dr. João', status: 'agendado' },
{ id: 4, scheduled_at: '2025-10-27T20:00:00Z', paciente_nome: 'Davi Andrade', medico_nome: 'Dr. João', status: 'agendado' },
{ id: 5, scheduled_at: '2025-10-27T21:30:00Z', paciente_nome: 'Davi Andrade', medico_nome: 'Dr. João', status: 'agendado' },
]
};
const today = dayjs();
const startOfMonth = today.startOf('month');
const nov11 = startOfMonth.add(10, 'day').format('YYYY-MM-DD');
mockAgendamentos[nov11] = [
{ id: 6, scheduled_at: `${nov11}T10:30:00Z`, paciente_nome: 'Paciente C', medico_nome: 'Isaac Kauã', status: 'agendado' },
{ id: 7, scheduled_at: `${nov11}T11:00:00Z`, paciente_nome: 'João Gustavo', medico_nome: 'João Gustavo', status: 'agendado' },
{ id: 8, scheduled_at: `${nov11}T12:30:00Z`, paciente_nome: 'João Gustavo', medico_nome: 'João Gustavo', status: 'agendado' },
{ id: 9, scheduled_at: `${nov11}T15:00:00Z`, paciente_nome: 'Pedro Abravanel', medico_nome: 'Fernando Prichowski', status: 'agendado' },
];
setAgendamentosOrganizados(mockAgendamentos);
setShowSpinner(false);
}, []);
const handleSelectSlot = (timeSlot, doctorId) => {
alert(`Abrir tela de Nova Consulta para o dia ${selectedDay.format('DD/MM/YYYY')} às ${timeSlot} com o Médico ID: ${doctorId}`);
};
const isMedico = true;
const medicoLogadoID = user?.doctor_id || "ID_MEDICO_DEFAULT";
return (
<div className='agendamento-medico-container'>
<h1>Agenda do Médico: {user?.full_name || "Nome do Médico"}</h1>
<div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
<button className='manage-button btn' onClick={() => {}}><i className="bi bi-gear-fill me-1"></i> Mudar Disponibilidade</button>
<button className="btn btn-primary" onClick={() => {}}><i className="bi bi-person-plus-fill"></i> Adicionar Paciente</button>
</div>
<div className="tab-buttons" style={{ marginBottom: '20px' }}>
<button className={`btn ${modoVisualizacao === 'Dia' ? 'btn-primary' : 'btn-outline-primary'}`} onClick={() => setModoVisualizacao('Dia')}>Dia</button>
<button className={`btn ${modoVisualizacao === 'Semana' ? 'btn-primary' : 'btn-outline-primary'}`} onClick={() => setModoVisualizacao('Semana')}>Semana</button>
<button className={`btn ${modoVisualizacao === 'Mês' ? 'btn-primary' : 'btn-outline-primary'}`} onClick={() => setModoVisualizacao('Mês')}>Mês</button>
</div>
<div className='agenda-e-calendario-wrapper'>
{}
<div className='medico-calendar-column' style={{ flex: 1 }}>
<CalendarComponent
currentDate={currentDate}
setCurrentDate={setCurrentDate}
selectedDay={selectedDay}
setSelectedDay={setSelectedDay}
DictAgendamentosOrganizados={DictAgendamentosOrganizados}
showSpinner={showSpinner}
T
setSelectedId={setSelectedId}
setShowDeleteModal={setShowDeleteModal}
setShowConfirmModal={setShowConfirmModal}
quickJump={quickJump}
handleQuickJumpChange={handleQuickJumpChange}
applyQuickJump={applyQuickJump}
/>
</div>
{}
<div className='medico-schedule-column' style={{ flex: 2 }}>
{modoVisualizacao === 'Dia' && (
<TabelaAgendamentoDia
selectedDay={selectedDay}
agendamentosDoDia={DictAgendamentosOrganizados[selectedDay.format('YYYY-MM-DD')] || []}
onSelectSlot={handleSelectSlot}
isMedicoView={isMedico}
medicoID={medicoLogadoID}
horariosDeTrabalho={[
{ hora: '19:30', medicoId: '123' },
{ hora: '20:00', medicoId: '123' },
{ hora: '21:30', medicoId: '123' }
]}
/>
)}
{}
{}
{}
</div>
</div>
</div>
);
};
export default MedicoAgendamento;

132
src/pages/TabelaAgendamentoDia.jsx Normal file
View File

@ -0,0 +1,132 @@
import React, { useState, useEffect } from 'react';
import dayjs from 'dayjs';
import 'dayjs/locale/pt-br';
import { ChevronLeft, ChevronRight, Edit, Trash2, User, Stethoscope } from 'lucide-react';
// Configura o Day.js para usar o idioma português do Brasil
dayjs.locale('pt-br');
const TabelaAgendamentoDia = ({
agendamentos,
setDictInfo,
setShowDeleteModal,
setSelectedId,
setShowConfirmModal,
listaConsultasID,
coresConsultas
}) => {
const [currentDate, setCurrentDate] = useState(dayjs());
const [appointmentsForDay, setAppointmentsForDay] = useState([]);
useEffect(() => {
const formattedDate = currentDate.format('YYYY-MM-DD');
const dailyAppointments = agendamentos[formattedDate] || [];
const appointmentsComStatusAtualizado = dailyAppointments.map(app => {
const index = listaConsultasID.indexOf(app.id);
if (index > -1) {
return { ...app, status: coresConsultas[index] };
}
return app;
});
setAppointmentsForDay(appointmentsComStatusAtualizado);
}, [currentDate, agendamentos, listaConsultasID, coresConsultas]);
const handlePrevDay = () => {
setCurrentDate(currentDate.subtract(1, 'day'));
};
const handleNextDay = () => {
setCurrentDate(currentDate.add(1, 'day'));
};
const handleEdit = (agendamento) => {
// Adapte para a sua lógica de edição, talvez abrindo um modal
console.log("Editar:", agendamento);
setDictInfo(agendamento);
};
const handleDelete = (id) => {
setSelectedId(id);
setShowDeleteModal(true);
};
// Gera os horários do dia (ex: 08:00 às 18:00)
const renderTimeSlots = () => {
const slots = [];
for (let i = 8; i <= 18; i++) {
const time = `${i.toString().padStart(2, '0')}:00`;
const hourlyAppointments = appointmentsForDay.filter(app =>
dayjs(app.scheduled_at).format('HH:mm') === time
);
slots.push(
<div className="time-slot" key={time}>
<div className="time-marker">{time}</div>
<div className="appointments-container">
{hourlyAppointments.length > 0 ? (
hourlyAppointments.map(app => (
<div key={app.id} className="appointment-card" data-status={app.status}>
<div className="card-content">
<div className="card-line">
<Stethoscope size={16} className="card-icon" />
<strong>Dr(a):</strong> {app.medico_nome}
</div>
<div className="card-line">
<User size={16} className="card-icon" />
<strong>Paciente:</strong> {app.paciente_nome}
</div>
</div>
<div className="card-actions">
<button className="btn-card-action" onClick={() => handleEdit(app)}>
<Edit size={16} />
</button>
<button className="btn-card-action btn-delete" onClick={() => handleDelete(app.id)}>
<Trash2 size={16} />
</button>
</div>
</div>
))
) : (
<div className="no-appointment-placeholder"></div>
)}
</div>
</div>
);
}
return slots;
};
return (
<div className="modern-daily-view">
<div className="calendar-header">
<button onClick={handlePrevDay} className="btn-nav">
<ChevronLeft size={24} />
</button>
<h2>{currentDate.format('dddd, D [de] MMMM [de] YYYY')}</h2>
<button onClick={handleNextDay} className="btn-nav">
<ChevronRight size={24} />
</button>
</div>
<div className="timeline">
{renderTimeSlots()}
</div>
</div>
);
};
export default TabelaAgendamentoDia;

84
src/pages/TablePaciente.jsx
View File

@ -6,7 +6,7 @@ import "./style/TablePaciente.css";
import ModalErro from "../components/utils/fetchErros/ModalErro";
import manager from "../components/utils/fetchErros/ManagerFunction";
function TablePaciente({ setCurrentPage, setPatientID }) {
function TablePaciente({ setCurrentPage, setPatientID,setDictInfo }) {
const { getAuthorizationHeader, isAuthenticated } = useAuth();
@ -23,6 +23,10 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
const [dataInicial, setDataInicial] = useState("");
const [dataFinal, setDataFinal] = useState("");
// Ordenação rápida
const [sortKey, setSortKey] = useState(null); // 'nome' | 'idade' | null
const [sortDir, setSortDir] = useState('asc'); // 'asc' | 'desc'
const [paginaAtual, setPaginaAtual] = useState(1);
const [itensPorPagina, setItensPorPagina] = useState(10);
@ -109,11 +113,8 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
}
};
// Função para refresh token (adicionada)
const RefreshingToken = () => {
console.log("Refreshing token...");
// Aqui você pode adicionar a lógica de refresh do token se necessário
// Por enquanto é apenas um placeholder para evitar o erro
};
useEffect(() => {
@ -249,11 +250,25 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
return resultado;
}) : [];
// Aplica ordenação rápida
const applySorting = (arr) => {
if (!Array.isArray(arr) || !sortKey) return arr;
const copy = [...arr];
if (sortKey === 'nome') {
copy.sort((a, b) => (a.full_name || '').localeCompare((b.full_name || ''), undefined, { sensitivity: 'base' }));
} else if (sortKey === 'idade') {
copy.sort((a, b) => calcularIdade(a.birth_date) - calcularIdade(b.birth_date));
}
if (sortDir === 'desc') copy.reverse();
return copy;
};
const pacientesOrdenados = applySorting(pacientesFiltrados);
const totalPaginas = Math.ceil(pacientesFiltrados.length / itensPorPagina);
const indiceInicial = (paginaAtual - 1) * itensPorPagina;
const indiceFinal = indiceInicial + itensPorPagina;
const pacientesPaginados = pacientesFiltrados.slice(indiceInicial, indiceFinal);
const pacientesPaginados = pacientesOrdenados.slice(indiceInicial, indiceFinal);
const irParaPagina = (pagina) => {
@ -292,7 +307,7 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
useEffect(() => {
setPaginaAtual(1);
}, [search, filtroConvenio, filtroVIP, filtroAniversariante, filtroCidade, filtroEstado, idadeMinima, idadeMaxima, dataInicial, dataFinal]);
}, [search, filtroConvenio, filtroVIP, filtroAniversariante, filtroCidade, filtroEstado, idadeMinima, idadeMaxima, dataInicial, dataFinal, sortKey, sortDir]);
return (
<>
@ -361,6 +376,34 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
>
<i className="bi bi-calendar me-1"></i> Aniversariantes
</button>
{/* Ordenação rápida (estilo compacto por select) */}
<div className="vr mx-2 d-none d-md-block" />
<div className="d-flex align-items-center gap-2">
<span className="text-muted small">Ordenar por:</span>
{(() => {
const sortValue = sortKey ? `${sortKey}-${sortDir}` : '';
return (
<select
className="form-select compact-select sort-select w-auto"
value={sortValue}
onChange={(e) => {
const v = e.target.value;
if (!v) { setSortKey(null); setSortDir('asc'); return; }
const [k, d] = v.split('-');
setSortKey(k);
setSortDir(d);
}}
>
<option value="">Sem ordenação</option>
<option value="nome-asc">Nome (A-Z)</option>
<option value="nome-desc">Nome (Z-A)</option>
<option value="idade-asc">Idade (crescente)</option>
<option value="idade-desc">Idade (decrescente)</option>
</select>
);
})()}
</div>
</div>
<div className="d-flex justify-content-between align-items-center">
@ -460,25 +503,6 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
</div>
</div>
{(search || filtroConvenio !== "Todos" || filtroVIP || filtroAniversariante ||
filtroCidade || filtroEstado || idadeMinima || idadeMaxima || dataInicial || dataFinal) && (
<div className="alert alert-info mb-3 filters-active">
<strong>Filtros ativos:</strong>
<div className="mt-1">
{search && <span className="badge bg-primary me-2">Busca: "{search}"</span>}
{filtroConvenio !== "Todos" && <span className="badge bg-primary me-2">Convênio: {filtroConvenio}</span>}
{filtroVIP && <span className="badge bg-primary me-2">VIP</span>}
{filtroAniversariante && <span className="badge bg-primary me-2">Aniversariantes</span>}
{filtroCidade && <span className="badge bg-primary me-2">Cidade: {filtroCidade}</span>}
{filtroEstado && <span className="badge bg-primary me-2">Estado: {filtroEstado}</span>}
{idadeMinima && <span className="badge bg-primary me-2">Idade mín: {idadeMinima}</span>}
{idadeMaxima && <span className="badge bg-primary me-2">Idade máx: {idadeMaxima}</span>}
{dataInicial && <span className="badge bg-primary me-2">Data inicial: {dataInicial}</span>}
{dataFinal && <span className="badge bg-primary me-2">Data final: {dataFinal}</span>}
</div>
</div>
)}
<div className="table-responsive">
<table className="table table-striped table-hover table-paciente-table">
<thead>
@ -520,14 +544,14 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
<td>{paciente.email || 'Não informado'}</td>
<td>
<div className="d-flex gap-2">
<Link to={`${paciente.id}`}>
<button className="btn btn-sm btn-view">
<Link to={"details"}>
<button className="btn btn-sm btn-view" onClick={() => setDictInfo(paciente)}>
<i className="bi bi-eye me-1"></i> Ver Detalhes
</button>
</Link>
<Link to={`${paciente.id}/edit`}>
<button className="btn btn-sm btn-edit">
<Link to={"edit"}>
<button className="btn btn-sm btn-edit" onClick={() => setDictInfo(paciente)}>
<i className="bi bi-pencil me-1"></i> Editar
</button>
</Link>
@ -679,4 +703,4 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
);
}
export default TablePaciente;
export default TablePaciente;

273
src/pages/inicioPaciente.jsx Normal file
View File

@ -0,0 +1,273 @@
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { FaCalendarAlt, FaCalendarCheck, FaFileAlt, FaUserMd, FaClock } from 'react-icons/fa';
import { useAuth } from '../components/utils/AuthProvider';
import API_KEY from '../components/utils/apiKeys';
import './style/inicioPaciente.css';
function InicioPaciente() {
const navigate = useNavigate();
const { getAuthorizationHeader, isAuthenticated } = useAuth();
const [agendamentos, setAgendamentos] = useState([]);
const [medicos, setMedicos] = useState([]);
const [agendamentosComMedicos, setAgendamentosComMedicos] = useState([]);
const [loading, setLoading] = useState(true);
const [pacienteId, setPacienteId] = useState(null);
useEffect(() => {
const userId = localStorage.getItem('user_id') || localStorage.getItem('patient_id');
setPacienteId(userId);
}, []);
useEffect(() => {
const fetchMedicos = async () => {
try {
const authHeader = getAuthorizationHeader();
const myHeaders = new Headers();
myHeaders.append("apikey", API_KEY);
myHeaders.append("Authorization", authHeader);
const requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors", requestOptions);
if (response.ok) {
const data = await response.json();
setMedicos(data);
console.log(' Médicos carregados:', data.length);
} else {
console.error(' Erro ao buscar médicos:', response.status);
}
} catch (error) {
console.error(' Erro ao buscar médicos:', error);
}
};
const fetchAgendamentos = async () => {
try {
const authHeader = getAuthorizationHeader();
const myHeaders = new Headers();
myHeaders.append("apikey", API_KEY);
myHeaders.append("Authorization", authHeader);
const requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
// Buscar todos os agendamentos (depois filtraremos pelo paciente)
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOptions);
if (response.ok) {
const data = await response.json();
setAgendamentos(data);
console.log(' Agendamentos carregados:', data.length);
} else {
console.error(' Erro ao buscar agendamentos:', response.status);
}
} catch (error) {
console.error(' Erro ao buscar agendamentos:', error);
} finally {
setLoading(false);
}
};
if (isAuthenticated) {
fetchMedicos();
fetchAgendamentos();
}
}, [isAuthenticated, getAuthorizationHeader]);
useEffect(() => {
if (agendamentos.length > 0 && medicos.length > 0) {
const agendamentosComNomes = agendamentos.map(agendamento => {
const medico = medicos.find(m => m.id === agendamento.doctor_id);
return {
...agendamento,
nomeMedico: medico?.full_name || 'Médico não encontrado',
especialidadeMedico: medico?.specialty || ''
};
});
setAgendamentosComMedicos(agendamentosComNomes);
}
}, [agendamentos, medicos]);
const meusAgendamentos = agendamentosComMedicos.filter(a =>
pacienteId ? a.patient_id === pacienteId : true
);
const hoje = new Date();
hoje.setHours(0, 0, 0, 0);
const agendamentosFuturos = meusAgendamentos.filter(a => {
if (!a.scheduled_at) return false;
const dataAgendamento = new Date(a.scheduled_at);
return dataAgendamento >= hoje && a.status !== 'cancelled' && a.status !== 'completed';
}).sort((a, b) => new Date(a.scheduled_at) - new Date(b.scheduled_at));
const proximasConsultas = agendamentosFuturos.length;
const consultasHoje = agendamentosFuturos.filter(a => {
const dataAgendamento = new Date(a.scheduled_at);
dataAgendamento.setHours(0, 0, 0, 0);
return dataAgendamento.getTime() === hoje.getTime();
}).length;
const consultasPendentes = meusAgendamentos.filter(a =>
a.status === 'pending' || a.status === 'requested'
).length;
const historicoConsultas = meusAgendamentos.filter(a =>
a.status === 'completed'
).length;
return (
<div className="dashboard-paciente-container">
<div className="dashboard-paciente-header">
<h1>Bem-vindo ao MediConnect</h1>
<p>Gerencie suas consultas e acompanhe seu histórico médico</p>
</div>
<div className="stats-paciente-grid">
<div className="stat-paciente-card">
<div className="stat-paciente-info">
<span className="stat-paciente-label">Próximas Consultas</span>
<span className="stat-paciente-value">{proximasConsultas}</span>
</div>
<div className="stat-paciente-icon-wrapper blue">
<FaCalendarAlt className="stat-paciente-icon" />
</div>
</div>
<div className="stat-paciente-card">
<div className="stat-paciente-info">
<span className="stat-paciente-label">Consultas Hoje</span>
<span className="stat-paciente-value">{consultasHoje}</span>
</div>
<div className="stat-paciente-icon-wrapper green">
<FaCalendarCheck className="stat-paciente-icon" />
</div>
</div>
<div className="stat-paciente-card">
<div className="stat-paciente-info">
<span className="stat-paciente-label">Aguardando</span>
<span className="stat-paciente-value">{loading ? '...' : consultasPendentes}</span>
</div>
<div className="stat-paciente-icon-wrapper purple">
<FaClock className="stat-paciente-icon" />
</div>
</div>
<div className="stat-paciente-card">
<div className="stat-paciente-info">
<span className="stat-paciente-label">Realizadas</span>
<span className="stat-paciente-value">{historicoConsultas}</span>
</div>
<div className="stat-paciente-icon-wrapper orange">
<FaFileAlt className="stat-paciente-icon" />
</div>
</div>
</div>
<div className="quick-actions-paciente">
<h2>Acesso Rápido</h2>
<div className="actions-paciente-grid">
<div className="action-paciente-button" onClick={() => navigate('/paciente/agendamento')}>
<FaCalendarCheck className="action-paciente-icon" />
<div className="action-paciente-info">
<span className="action-paciente-title">Minhas Consultas</span>
<span className="action-paciente-desc">Ver todos os agendamentos</span>
</div>
</div>
<div className="action-paciente-button" onClick={() => navigate('/paciente/laudo')}>
<FaFileAlt className="action-paciente-icon" />
<div className="action-paciente-info">
<span className="action-paciente-title">Meus Laudos</span>
<span className="action-paciente-desc">Acessar documentos médicos</span>
</div>
</div>
<div className="action-paciente-button" onClick={() => navigate('/paciente/agendamento')}>
<FaUserMd className="action-paciente-icon" />
<div className="action-paciente-info">
<span className="action-paciente-title">Meus Médicos</span>
<span className="action-paciente-desc">Ver histórico de atendimentos</span>
</div>
</div>
</div>
</div>
<div className="proximas-consultas-section">
<h2>Próximas Consultas</h2>
{loading ? (
<div className="no-consultas-content">
<p>Carregando suas consultas...</p>
</div>
) : agendamentosFuturos.length > 0 ? (
<div className="consultas-paciente-list">
{agendamentosFuturos.slice(0, 3).map(agendamento => (
<div key={agendamento.id} className="consulta-paciente-item">
<div className="consulta-paciente-info">
<div className="consulta-paciente-time-date">
<p className="consulta-paciente-hora">
{new Date(agendamento.scheduled_at).toLocaleTimeString('pt-BR', {
hour: '2-digit',
minute: '2-digit'
})}
</p>
<p className="consulta-paciente-data">
{new Date(agendamento.scheduled_at).toLocaleDateString('pt-BR', {
day: '2-digit',
month: 'short',
year: 'numeric'
})}
</p>
</div>
<div className="consulta-paciente-detalhes">
<p className="consulta-paciente-medico">
<FaUserMd className="consulta-icon" />
<strong>Dr(a):</strong> {agendamento.nomeMedico}
</p>
{agendamento.especialidadeMedico && (
<p className="consulta-paciente-especialidade">
{agendamento.especialidadeMedico}
</p>
)}
</div>
<span className={`consulta-paciente-status status-${agendamento.status}`}>
{agendamento.status === 'scheduled' ? 'Confirmado' :
agendamento.status === 'pending' ? 'Aguardando' :
agendamento.status === 'requested' ? 'Solicitado' : agendamento.status}
</span>
</div>
</div>
))}
{agendamentosFuturos.length > 3 && (
<button className="view-all-paciente-button" onClick={() => navigate('/paciente/agendamento')}>
Ver todas as consultas
</button>
)}
</div>
) : (
<div className="no-consultas-content">
<FaCalendarCheck className="no-consultas-icon" />
<p>Você não tem consultas agendadas</p>
<button className="agendar-paciente-button" onClick={() => navigate('/paciente/agendamento/criar')}>
Agendar Consulta
</button>
</div>
)}
</div>
</div>
);
}
export default InicioPaciente;

566
src/pages/style/Agendamento.css
View File

@ -1,3 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
.filtros-container select,
.filtros-container input {
padding: 0.5rem;
@ -14,420 +16,210 @@
cursor: pointer;
}
.unidade-selecionarprofissional{
background-color: #fdfdfdde;
padding: 20px 10px;
.unidade-selecionarprofissional {
background-color: #ffffff;
padding: 20px 20px;
display: flex;
border-radius:10px ;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.unidade-selecionarprofissional input, .unidade-selecionarprofissional select {
margin-left: 8px;
border-radius: 8px;
padding: 5px;
width: 20%;
}
.unidade-selecionarprofissional select{
width: 7%;
}
.busca-atendimento{
display: flex;
flex-direction: row;
margin:10px;
justify-content: flex-start;
}
.busca-atendimento select{
padding:5px;
border-radius:8px ;
margin-left: 15px;
background-color: #0078d7;
color: white;
font-weight: bold;
}
.busca-atendimento input{
margin-left: 8px;
border-radius: 8px;
padding: 5px;
width: 100%;
}
.btn-selecionar-tabeladia, .btn-selecionar-tabelasemana, .btn-selecionar-tabelames {
background-color: rgba(231, 231, 231, 0.808);
padding:8px 10px;
font-size: larger;
font-weight: bold;
border-style: hidden;
}
.btn-selecionar-tabeladia{
border-radius: 10px 0px 0px 10px;
}
.btn-selecionar-tabelames{
border-radius: 0px 10px 10px 0px;
}
.btn-selecionar-tabeladia.ativo, .btn-selecionar-tabelasemana.ativo, .btn-selecionar-tabelames.ativo{
background-color: lightcyan;
border-color: darkcyan;
font-weight: bolder;
}
.legenda-tabela{
display: flex;
margin-top: 30px;
margin-bottom: 10px;
gap: 15px;
justify-content: flex-end;
}
.legenda-item-realizado{
background-color: #2c5e37;
}
.legenda-item-confirmed{
background-color: #1e90ff;
}
.legenda-item-cancelado{
background-color: #d9534f;
}
.legenda-item-agendado{
background-color: #f0ad4e;
}
#status-card-consulta-completed, .legenda-item-realizado {
background-color: #b7ffbd;
border:3px solid #91d392;
padding: 5px;
font-weight: bold;
border-radius: 10px;
}
#status-card-consulta-cancelled, .legenda-item-cancelado {
background-color: #ffb7cc;
border:3px solid #ff6c84;
padding: 5px;
font-weight: bold;
border-radius: 10px;
}
#status-card-consulta-confirmed, .legenda-item-confirmed {
background-color: #eef8fb;
border:3px solid #d8dfe7;
padding: 5px;
font-weight: bold;
border-radius: 10px;
}
#status-card-consulta-agendado, .legenda-item-agendado {
background-color: #f7f7c4;
border:3px solid #f3ce67;
padding: 5px;
font-weight: bold;
border-radius: 10px;
}
.btns-e-legenda-container{
display: flex;
justify-content: space-between;
flex-direction: row;
margin-top: 10px;
}
.calendario {
border-collapse: collapse;
width: 100%;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 12px rgb(255, 255, 255);
border: 10px solid #ffffffc5;
background-color: rgb(253, 253, 253);
}
.calendario-ou-filaespera{
margin-top: 0;
}
.container-btns-agenda-fila_esepera{
margin-top: 30px;
display: flex;
flex-direction: row;
gap: 20px;
margin-left:20px ;
}
.btn-fila-espera, .btn-agenda{
background-color: transparent;
border: 0px ;
border-bottom: 3px solid rgb(253, 253, 253);
padding: 8px;
border-radius: 10px 10px 0px 0px;
font-weight: bold;
}
.opc-filaespera-ativo, .opc-agenda-ativo{
color: white;
background-color: #5980fd;
}
html[data-bs-theme="dark"] {
body {
background-color: #121212;
color: #e0e0e0;
}
.calendario {
background-color: #1e1e1e;
border: 10px solid #333;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.unidade-selecionarprofissional {
background-color: #1e1e1e;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.busca-atendimento input {
background-color: #2c2c2c;
color: #e0e0e0;
border: 1px solid #444;
}
.btn-buscar,
.btn-selecionar-tabeladia,
.btn-selecionar-tabelasemana,
.btn-selecionar-tabelames {
background-color: #2c2c2c;
color: #e0e0e0;
border: none;
}
.btn-selecionar-tabeladia.ativo,
.btn-selecionar-tabelasemana.ativo,
.btn-selecionar-tabelames.ativo {
background-color: #005a9e;
border-color: #004578;
color: #fff;
}
.legenda-item-realizado {
background-color: #14532d;
border-color: #166534;
}
.legenda-item-confirmado {
background-color: #1e3a8a;
border-color: #2563eb;
}
.legenda-item-cancelado {
background-color: #7f1d1d;
border-color: #dc2626;
}
.legenda-item-agendado {
background-color: #78350f;
border-color: #f59e0b;
}
#status-card-consulta-realizado,
.legenda-item-realizado {
background-color: #14532d;
border: 3px solid #166534;
color: #e0e0e0;
}
#status-card-consulta-cancelado,
.legenda-item-cancelado {
background-color: #7f1d1d;
border: 3px solid #dc2626;
color: #e0e0e0;
}
#status-card-consulta-confirmado,
.legenda-item-confirmado {
background-color: #1e3a8a;
border: 3px solid #2563eb;
color: #e0e0e0;
}
#status-card-consulta-agendado,
.legenda-item-agendado {
background-color: #78350f;
border: 3px solid #f59e0b;
color: #e0e0e0;
}
.btns-e-legenda-container {
background-color: #181818;
}
.container-btns-agenda-fila_esepera {
background-color: #181818;
}
.btn-fila-espera,
.btn-agenda {
background-color: #2c2c2c;
color: #e0e0e0;
border-bottom: 3px solid #333;
}
.opc-filaespera-ativo,
.opc-agenda-ativo {
color: #fff;
background-color: #005a9e;
}
}
/* Estilo para o botão de Editar */
.btn-edit-custom {
background-color: #FFF3CD;
color: #856404;
}
/* Estilo para o botão de Excluir (Deletar) */
.btn-delete-custom {
background-color: #F8D7DA;
color: #721C24;
padding: 10px;
}
.cardconsulta{
display:flex;
align-items: center;
flex-direction: row;
}
.container-botons{
display: flex;
flex-direction: column;
}
#tabela-seletor-container {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
background-color: #fff;
border-radius: 8px;
padding: 6px 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
width: fit-content;
margin: 0 auto;
}
#tabela-seletor-container p {
margin: 0;
font-size: 23px;
font-weight: 500;
color: #4085f6;
text-align: center;
white-space: nowrap;
}
#tabela-seletor-container button {
background: transparent;
border: none;
color: #555;
font-size: 20px;
cursor: pointer;
padding: 4px 6px;
border-radius: 6px;
transition: all 0.2s ease-in-out;
}
#tabela-seletor-container button:hover {
background-color: rgba(0, 0, 0, 0.05);
color: #000;
}
#tabela-seletor-container i {
pointer-events: none;
}
.input-e-dropdown-wrapper {
position: relative;
width: 350px;
margin-left: auto;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
margin-bottom: 20px;
}
.busca-atendimento {
}
.busca-atendimento > div {
/* Garante que a div interna do input ocupe toda a largura do wrapper */
width: 100%;
/* Estilos para o contêiner do ícone e input, se necessário */
display: flex;
flex-direction: row;
margin: 0;
justify-content: flex-start;
}
.busca-atendimento input {
/* Garante que o input preencha a largura disponível dentro do seu contêiner */
width: calc(100% - 40px); /* Exemplo: 100% menos a largura do ícone (aprox. 40px) */
/* ... outros estilos de borda, padding, etc. do seu input ... */
border: 2px solid #000000;
border-radius: 8px;
padding: 10px 15px;
width: 100%;
font-size: 1rem;
margin-left: 0;
}
.container-btns-agenda-fila_esepera {
margin-top: 20px;
margin-left: 0;
display: flex;
flex-direction: row;
gap: 0;
border-bottom: 2px solid #E2E8F0;
margin-bottom: 20px;
}
.btn-fila-espera, .btn-agenda {
background-color: transparent;
border: 0;
border-bottom: 2px solid transparent;
padding: 12px 24px;
border-radius: 0;
font-weight: 600;
color: #718096;
cursor: pointer;
margin-bottom: -2px;
transition: color 0.2s, border-color 0.2s;
}
.btn-fila-espera:hover, .btn-agenda:hover {
color: #2B6CB0;
}
.opc-filaespera-ativo, .opc-agenda-ativo {
color: #4299E1;
background-color: transparent;
border-bottom: 2px solid #4299E1;
}
.input-e-dropdown-wrapper {
position: relative;
width: 100%;
margin: 0;
}
/* 3. O Dropdown: Posicionamento e Estilização */
.dropdown-medicos {
/* POSICIONAMENTO: Faz o dropdown flutuar */
position: absolute;
/* POSICIONAMENTO: Coloca o topo do dropdown logo abaixo do input */
top: 100%;
left: 0;
/* LARGURA: Essencial. Ocupa 100% do .input-e-dropdown-wrapper, limitando-se a ele. */
width: 100%;
/* SOBREPOSIÇÃO: Garante que fique acima de outros elementos (como a Fila de Espera) */
z-index: 1000;
/* ESTILIZAÇÃO: Aparência */
background-color: #ffffff; /* Fundo branco para não vazar */
border: 1px solid #ccc; /* Borda leve */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para profundidade */
border-top: none; /* Deixa o visual mais integrado ao input */
/* COMPORTAMENTO: Limite de altura e scroll */
background-color: #ffffff;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-top: none;
max-height: 250px;
overflow-y: auto;
}
.dropdown-item { padding: 10px 15px; cursor: pointer; }
.dropdown-item:hover { background-color: #f0f0f0; }
/* 4. Estilização de cada item do dropdown */
.dropdown-item {
padding: 10px 15px;
cursor: pointer;
font-size: 14px;
.calendar-wrapper {
display: flex;
gap: 24px;
background-color: #fff;
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
font-family: 'Inter', sans-serif;
margin-top: 20px;
}
.calendar-info-panel { flex: 0 0 300px; border-right: 1px solid #E2E8F0; padding-right: 24px; display: flex; flex-direction: column; }
.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; }
.info-details { text-align: center; margin-bottom: 24px; }
.info-details h3 { font-size: 1.25rem; font-weight: 600; color: #2D3748; margin: 0; text-transform: capitalize; }
.info-details p { color: #718096; margin: 0; }
.appointments-list { flex-grow: 1; overflow-y: auto; }
.appointments-list h4 { font-size: 1rem; font-weight: 600; color: #4A5568; margin-bottom: 12px; position: sticky; top: 0; background-color: #fff; padding-bottom: 8px; }
.appointment-item { display: flex; gap: 12px; padding: 10px; border-radius: 6px; border-left: 4px solid; margin-bottom: 8px; background-color: #F7FAFC; }
.item-time { font-weight: 600; color: #2B6CB0; }
.item-details { display: flex; flex-direction: column; }
.item-details span { font-weight: 500; color: #2D3748; }
.item-details small { color: #718096; }
.no-appointments-info { text-align: center; padding: 20px; color: #A0AEC0; }
.appointment-item[data-status="confirmed"] { border-color: #4299E1; }
.appointment-item[data-status="completed"] { border-color: #48BB78; }
.appointment-item[data-status="cancelled"] { border-color: #F56565; }
.appointment-item[data-status="agendado"],
.appointment-item[data-status="requested"] { border-color: #ED8936; }
.calendar-main { flex-grow: 1; }
.calendar-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.date-indicator h2 { font-size: 1.5rem; font-weight: 600; color: #2D3748; margin: 0; text-transform: capitalize; }
.nav-buttons { display: flex; gap: 8px; }
.nav-buttons button { padding: 8px 12px; border-radius: 6px; border: 1px solid #CBD5E0; background-color: #fff; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.nav-buttons button:hover { background-color: #EDF2F7; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.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; }
.day-cell:hover { background-color: #EDF2F7; border-color: #BEE3F8; }
.day-cell.other-month { background-color: #F7FAFC; }
.day-cell.other-month span { color: #A0AEC0; }
.day-cell.today span { background-color: #4299E1; color: #fff; border-radius: 50%; padding: 2px 6px; display: inline-block; }
.day-cell.selected { background-color: #BEE3F8; border-color: #4299E1; }
.appointments-indicator { background-color: #4299E1; color: white; font-size: 0.7rem; font-weight: bold; border-radius: 50%; width: 18px; height: 18px; display: flex; justify-content: center; align-items: center; position: absolute; bottom: 8px; right: 8px; }
.calendar-legend {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-bottom: 16px;
}
.legend-item {
padding: 6px 12px;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 600;
color: #333;
/* Evita que nomes muito longos quebrem ou saiam da caixa */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dropdown-item:hover {
background-color: #f0f0f0; /* Cor ao passar o mouse */
color: #007bff;
.legend-item[data-status="completed"] {
background-color: #C6F6D5;
border: 1px solid #9AE6B4;
color: #2F855A;
}
.legend-item[data-status="confirmed"] {
background-color: #EBF8FF;
border: 1px solid #BEE3F8;
color: #3182CE;
}
.legend-item[data-status="agendado"] {
background-color: #FEFCBF;
border: 1px solid #F6E05E;
color: #B7791F;
}
.legend-item[data-status="cancelled"] {
background-color: #FED7D7;
border: 1px solid #FEB2B2;
color: #C53030;
}
.input-modal{
width: 80%;
.appointment-item {
display: flex;
align-items: center;
justify-content: space-between;
}
.item-details {
flex-grow: 1;
}
.appointment-actions {
display: flex;
gap: 8px;
}
.btn-action {
padding: 8px;
border-radius: 8px;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
}
.btn-action.btn-edit {
background-color: #FEFCBF;
color: #B7791F;
}
.btn-action.btn-edit:hover {
background-color: #F6E05E;
}
.btn-action.btn-delete {
background-color: #E53E3E;
color: #fff;
}
.btn-action.btn-delete:hover {
background-color: #C53030;
}

2
src/pages/style/FilaEspera.css
View File

@ -322,4 +322,4 @@ html[data-bs-theme="dark"] .busca-fila-espera {
html[data-bs-theme="dark"] .busca-fila-espera:focus {
border-color: #5980fd !important;
}
}

188
src/pages/style/Inicio.css
View File

@ -228,4 +228,192 @@ html[data-bs-theme="dark"] .manage-button {
html[data-bs-theme="dark"] .manage-button:hover {
background-color: #2323b0;
}
/* Lista de Agendamentos */
.agendamentos-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.agendamento-item {
background-color: #f9fafb;
border-left: 4px solid #5d5dff;
border-radius: 8px;
padding: 1rem 1.25rem;
transition: all 0.2s ease;
}
.agendamento-item:hover {
background-color: #f0f2f5;
transform: translateX(5px);
}
.agendamento-info {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.agendamento-time-date {
display: flex;
flex-direction: column;
align-items: center;
min-width: 90px;
}
.agendamento-hora {
font-size: 1.3rem;
font-weight: 700;
color: #5d5dff;
margin: 0;
line-height: 1.2;
}
.agendamento-data {
font-size: 0.75rem;
font-weight: 500;
color: #888;
margin: 0;
margin-top: 0.25rem;
}
.agendamento-detalhes {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
min-width: 300px;
}
.agendamento-paciente,
.agendamento-medico {
font-size: 0.95rem;
color: #444;
margin: 0;
line-height: 1.4;
}
.agendamento-paciente strong,
.agendamento-medico strong {
font-weight: 600;
color: #333;
}
.agendamento-status {
font-size: 0.75rem;
font-weight: 600;
padding: 0.4rem 0.8rem;
border-radius: 20px;
text-transform: uppercase;
}
.agendamento-status.status-scheduled {
background-color: #e3f2fd;
color: #1976d2;
}
.agendamento-status.status-completed {
background-color: #e8f5e9;
color: #388e3c;
}
.agendamento-status.status-pending {
background-color: #fff3e0;
color: #f57c00;
}
.agendamento-status.status-cancelled {
background-color: #ffebee;
color: #d32f2f;
}
.agendamento-status.status-requested {
background-color: #f3e5f5;
color: #7b1fa2;
}
.view-all-button {
width: 100%;
margin-top: 1rem;
background-color: #f0f2f5;
color: #5d5dff;
border: 2px solid #5d5dff;
border-radius: 8px;
padding: 0.75rem 1.5rem;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.view-all-button:hover {
background-color: #5d5dff;
color: #fff;
}
/* Dark Mode - Agendamentos */
html[data-bs-theme="dark"] .agendamento-item {
background-color: #2a2a2a;
border-left-color: #6c6cff;
}
html[data-bs-theme="dark"] .agendamento-item:hover {
background-color: #333;
}
html[data-bs-theme="dark"] .agendamento-hora {
color: #8888ff;
}
html[data-bs-theme="dark"] .agendamento-data {
color: #999;
}
html[data-bs-theme="dark"] .agendamento-paciente,
html[data-bs-theme="dark"] .agendamento-medico {
color: #d0d0d0;
}
html[data-bs-theme="dark"] .agendamento-paciente strong,
html[data-bs-theme="dark"] .agendamento-medico strong {
color: #e0e0e0;
}
html[data-bs-theme="dark"] .agendamento-status.status-scheduled {
background-color: #1a3a52;
color: #64b5f6;
}
html[data-bs-theme="dark"] .agendamento-status.status-completed {
background-color: #1b3a1f;
color: #81c784;
}
html[data-bs-theme="dark"] .agendamento-status.status-pending {
background-color: #3d2817;
color: #ffb74d;
}
html[data-bs-theme="dark"] .agendamento-status.status-cancelled {
background-color: #3d1f1f;
color: #e57373;
}
html[data-bs-theme="dark"] .agendamento-status.status-requested {
background-color: #2d1f3d;
color: #ba68c8;
}
html[data-bs-theme="dark"] .view-all-button {
background-color: #2a2a2a;
color: #8888ff;
border-color: #6c6cff;
}
html[data-bs-theme="dark"] .view-all-button:hover {
background-color: #6c6cff;
color: #fff;
}

454
src/pages/style/inicioPaciente.css Normal file
View File

@ -0,0 +1,454 @@
.dashboard-paciente-container {
padding: 2rem;
background-color: #f7f9fc;
flex-grow: 1;
min-height: 100vh;
}
/* Header - Paciente */
.dashboard-paciente-header {
margin-bottom: 2rem;
}
.dashboard-paciente-header h1 {
font-size: 2rem;
font-weight: 600;
color: #333;
margin-bottom: 0.5rem;
}
.dashboard-paciente-header p {
font-size: 1rem;
color: #666;
}
/* Estatísticas - Paciente */
.stats-paciente-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.stat-paciente-card {
background-color: #fff;
border-radius: 12px;
padding: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-paciente-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}
.stat-paciente-info {
display: flex;
flex-direction: column;
}
.stat-paciente-label {
font-size: 0.75rem;
font-weight: 600;
color: #888;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stat-paciente-value {
font-size: 2.2rem;
font-weight: 700;
color: #444;
}
.stat-paciente-icon-wrapper {
width: 55px;
height: 55px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.stat-paciente-icon {
font-size: 1.4rem;
color: #fff;
}
/* Cores dos ícones - Paciente */
.stat-paciente-icon-wrapper.blue { background-color: #5d5dff; }
.stat-paciente-icon-wrapper.green { background-color: #30d158; }
.stat-paciente-icon-wrapper.purple { background-color: #a272ff; }
.stat-paciente-icon-wrapper.orange { background-color: #f1952e; }
/* Ações Rápidas - Paciente */
.quick-actions-paciente h2 {
font-size: 1.3rem;
font-weight: 600;
color: #333;
margin-bottom: 1.5rem;
}
.actions-paciente-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.action-paciente-button {
background-color: #fff;
border-radius: 12px;
padding: 1.5rem;
display: flex;
align-items: center;
cursor: pointer;
transition: all 0.2s ease-in-out;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.action-paciente-button:hover {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
}
.action-paciente-icon {
font-size: 2.5rem;
margin-right: 1.2rem;
color: #5d5dff;
}
.action-paciente-info {
display: flex;
flex-direction: column;
}
.action-paciente-title {
font-size: 1.05rem;
font-weight: 600;
color: #444;
margin-bottom: 0.25rem;
}
.action-paciente-desc {
font-size: 0.85rem;
color: #888;
}
/* Próximas Consultas - Paciente */
.proximas-consultas-section {
background-color: #fff;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.proximas-consultas-section h2 {
font-size: 1.3rem;
font-weight: 600;
color: #333;
margin-bottom: 1.5rem;
}
/* Lista de Consultas - Paciente */
.consultas-paciente-list {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.consulta-paciente-item {
background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
border-left: 5px solid #5d5dff;
border-radius: 10px;
padding: 1.25rem 1.5rem;
transition: all 0.3s ease;
}
.consulta-paciente-item:hover {
background: linear-gradient(135deg, #f0f2f5 0%, #fafbfc 100%);
transform: translateX(8px);
box-shadow: 0 4px 12px rgba(93, 93, 255, 0.15);
}
.consulta-paciente-info {
display: flex;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
}
.consulta-paciente-time-date {
display: flex;
flex-direction: column;
align-items: center;
min-width: 90px;
padding: 0.5rem;
background-color: #f0f2ff;
border-radius: 8px;
}
.consulta-paciente-hora {
font-size: 1.5rem;
font-weight: 700;
color: #5d5dff;
margin: 0;
line-height: 1.2;
}
.consulta-paciente-data {
font-size: 0.8rem;
font-weight: 500;
color: #7777aa;
margin: 0;
margin-top: 0.25rem;
text-transform: capitalize;
}
.consulta-paciente-detalhes {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
min-width: 250px;
}
.consulta-paciente-medico {
font-size: 1rem;
color: #444;
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.consulta-icon {
color: #5d5dff;
font-size: 1.1rem;
}
.consulta-paciente-medico strong {
font-weight: 600;
color: #333;
}
.consulta-paciente-especialidade {
font-size: 0.85rem;
color: #666;
margin: 0;
margin-left: 1.6rem;
font-style: italic;
}
.consulta-paciente-status {
font-size: 0.75rem;
font-weight: 600;
padding: 0.5rem 1rem;
border-radius: 20px;
text-transform: uppercase;
white-space: nowrap;
}
.consulta-paciente-status.status-scheduled {
background-color: #e3f2fd;
color: #1976d2;
}
.consulta-paciente-status.status-pending {
background-color: #fff3e0;
color: #f57c00;
}
.consulta-paciente-status.status-requested {
background-color: #f3e5f5;
color: #7b1fa2;
}
/* Sem Consultas */
.no-consultas-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 3rem 1rem;
}
.no-consultas-icon {
font-size: 4rem;
color: #bbb;
margin-bottom: 1.5rem;
}
.no-consultas-content p {
font-size: 1.1rem;
color: #666;
margin-bottom: 2rem;
}
.agendar-paciente-button,
.view-all-paciente-button {
background-color: #5d5dff;
color: #fff;
border: none;
border-radius: 8px;
padding: 0.875rem 2rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.agendar-paciente-button:hover,
.view-all-paciente-button:hover {
background-color: #4444ff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(93, 93, 255, 0.3);
}
.view-all-paciente-button {
width: 100%;
margin-top: 1rem;
background-color: #f0f2f5;
color: #5d5dff;
border: 2px solid #5d5dff;
}
.view-all-paciente-button:hover {
background-color: #5d5dff;
color: #fff;
}
/* Dark Mode - Paciente */
html[data-bs-theme="dark"] .dashboard-paciente-container {
background-color: #121212;
color: #e0e0e0;
}
html[data-bs-theme="dark"] .dashboard-paciente-header h1,
html[data-bs-theme="dark"] .dashboard-paciente-header p,
html[data-bs-theme="dark"] .quick-actions-paciente h2,
html[data-bs-theme="dark"] .proximas-consultas-section h2,
html[data-bs-theme="dark"] .action-paciente-title,
html[data-bs-theme="dark"] .stat-paciente-value {
color: #e0e0e0;
}
html[data-bs-theme="dark"] .stat-paciente-card,
html[data-bs-theme="dark"] .action-paciente-button,
html[data-bs-theme="dark"] .proximas-consultas-section {
background-color: #1e1e1e;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
html[data-bs-theme="dark"] .stat-paciente-label,
html[data-bs-theme="dark"] .action-paciente-desc,
html[data-bs-theme="dark"] .no-consultas-content p {
color: #b0b0b0;
}
html[data-bs-theme="dark"] .consulta-paciente-item {
background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
border-left-color: #6c6cff;
}
html[data-bs-theme="dark"] .consulta-paciente-item:hover {
background: linear-gradient(135deg, #333 0%, #252525 100%);
box-shadow: 0 4px 12px rgba(108, 108, 255, 0.2);
}
html[data-bs-theme="dark"] .consulta-paciente-time-date {
background-color: #2a2a3a;
}
html[data-bs-theme="dark"] .consulta-paciente-hora {
color: #8888ff;
}
html[data-bs-theme="dark"] .consulta-paciente-data {
color: #9999cc;
}
html[data-bs-theme="dark"] .consulta-paciente-medico,
html[data-bs-theme="dark"] .consulta-paciente-especialidade {
color: #d0d0d0;
}
html[data-bs-theme="dark"] .consulta-paciente-medico strong {
color: #e0e0e0;
}
html[data-bs-theme="dark"] .consulta-icon,
html[data-bs-theme="dark"] .action-paciente-icon {
color: #8888ff;
}
html[data-bs-theme="dark"] .consulta-paciente-status.status-scheduled {
background-color: #1a3a52;
color: #64b5f6;
}
html[data-bs-theme="dark"] .consulta-paciente-status.status-pending {
background-color: #3d2817;
color: #ffb74d;
}
html[data-bs-theme="dark"] .consulta-paciente-status.status-requested {
background-color: #2d1f3d;
color: #ba68c8;
}
html[data-bs-theme="dark"] .no-consultas-icon {
color: #666;
}
html[data-bs-theme="dark"] .agendar-paciente-button {
background-color: #6c6cff;
}
html[data-bs-theme="dark"] .agendar-paciente-button:hover {
background-color: #5555dd;
}
html[data-bs-theme="dark"] .view-all-paciente-button {
background-color: #2a2a2a;
color: #8888ff;
border-color: #6c6cff;
}
html[data-bs-theme="dark"] .view-all-paciente-button:hover {
background-color: #6c6cff;
color: #fff;
}
/* Responsivo */
@media (max-width: 768px) {
.dashboard-paciente-container {
padding: 1rem;
}
.stats-paciente-grid {
grid-template-columns: 1fr;
}
.actions-paciente-grid {
grid-template-columns: 1fr;
}
.consulta-paciente-info {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.consulta-paciente-time-date {
width: 100%;
flex-direction: row;
justify-content: space-around;
}
}

21
src/perfis/Perfil_adm/Perfiladm.jsx
View File

@ -14,11 +14,14 @@ import DoctorEditPage from "../../pages/DoctorEditPage";
import UserDashboard from '../../PagesAdm/gestao.jsx';
import PainelAdministrativo from '../../PagesAdm/painel.jsx';
import admItems from "../../data/sidebar-items-adm.json";
import {useState} from "react"
// ...restante do código...
function Perfiladm() {
return (
const [DictInfo, setDictInfo] = useState({})
return (
<div id="app" className="active">
<Sidebar menuItems={admItems} />
@ -27,12 +30,12 @@ function Perfiladm() {
<Route path="/" element={<UserDashboard />} />
<Route path="/pacientes/cadastro" element={<PatientCadastroManager />} />
<Route path="/medicos/cadastro" element={<DoctorCadastroManager />} />
<Route path="/pacientes" element={<TablePaciente />} />
<Route path="/medicos" element={<DoctorTable />} />
<Route path="/pacientes/:id" element={<Details />} />
<Route path="/pacientes/:id/edit" element={<EditPage />} />
<Route path="/medicos/:id" element={<DoctorDetails />} />
<Route path="/medicos/:id/edit" element={<DoctorEditPage />} />
<Route path="/pacientes" element={<TablePaciente setDictInfo={setDictInfo}/>} />
<Route path="/medicos" element={<DoctorTable setDictInfo={setDictInfo} />} />
<Route path="/pacientes/details" element={<Details DictInfo={DictInfo} />} />
<Route path="/pacientes/edit" element={<EditPage DictInfo={DictInfo} />} />
<Route path="/medicos/details" element={<DoctorDetails DictInfo={DictInfo}/>} />
<Route path="/medicos/edit" element={<DoctorEditPage DictInfo={DictInfo}/>} />
<Route path="/agendamento" element={<Agendamento />} />
<Route path="/laudo" element={<LaudoManager />} />
@ -46,4 +49,4 @@ function Perfiladm() {
);
}
export default Perfiladm;
export default Perfiladm;

22
src/perfis/Perfil_paciente/Perfilpaciente.jsx
View File

@ -2,21 +2,14 @@ import { Routes, Route } from "react-router-dom";
import Sidebar from "../../components/Sidebar";
import PacienteItems from "../../data/sidebar-items-paciente.json";
import { useState } from "react";
import InicioPaciente from "../../pages/inicioPaciente";
import LaudoManager from "../../pages/LaudoManager";
import ConsultaCadastroManager from "../../PagesPaciente/ConsultaCadastroManager";
import ConsultasPaciente from "../../PagesPaciente/ConsultasPaciente";
import ConsultaEditPage from "../../PagesPaciente/ConsultaEditPage";
// 1. IMPORTAÇÃO ADICIONADA
import BotaoVideoPaciente from "../../components/BotaoVideoPaciente";
function PerfilPaciente({ onLogout }) {
const [DictInfo, setDictInfo] = useState({})
const [dadosConsulta, setConsulta] = useState({})
return (
<div id="app" className="active">
@ -24,20 +17,15 @@ const [DictInfo, setDictInfo] = useState({})
<div id="main">
<Routes>
<Route path="/" element={<LaudoManager />} />
<Route path="agendamento" element={<ConsultasPaciente setDictInfo={setDictInfo}/>} />
<Route path="/" element={<InicioPaciente />} />
<Route path="agendamento" element={<ConsultasPaciente setConsulta={setConsulta}/>} />
<Route path="agendamento/criar" element={<ConsultaCadastroManager />} />
<Route path="agendamento/edit" element={<ConsultaEditPage DictInfo={DictInfo} />} />
<Route path="agendamento/edit" element={<ConsultaEditPage dadosConsulta={dadosConsulta} />} />
<Route path="laudo" element={<LaudoManager />} />
<Route path="*" element={<h2>Página não encontrada</h2>} />
</Routes>
</div>
{/* 2. COMPONENTE ADICIONADO AQUI */}
<BotaoVideoPaciente />
</div>
);
}

14
src/perfis/perfil_secretaria/PerfilSecretaria.jsx
View File

@ -24,18 +24,18 @@ function PerfilSecretaria({ onLogout }) {
return (
// <Router>
<div id="app" className="active">
<Sidebar onLogout={onLogout} menuItems={SecretariaItems} />
<Sidebar onLogout={onLogout} />
<div id="main">
<Routes>
<Route path="/" element={<Inicio/>}/>
<Route path="pacientes/cadastro" element={<PatientCadastroManager />} />
<Route path="medicos/cadastro" element={<DoctorCadastroManager />} />
<Route path="pacientes" element={<TablePaciente />} />
<Route path="medicos" element={<DoctorTable />} />
<Route path="pacientes/:id" element={<Details />} />
<Route path="pacientes/:id/edit" element={<EditPage />} />
<Route path="medicos/:id" element={<DoctorDetails />} />
<Route path="medicos/:id/edit" element={<DoctorEditPage />} />
<Route path="pacientes" element={<TablePaciente setDictInfo={setDictInfo}/>} />
<Route path="medicos" element={<DoctorTable setDictInfo={setDictInfo} />} />
<Route path="pacientes/details" element={<Details DictInfo={DictInfo}/>} />
<Route path="pacientes/edit" element={<EditPage DictInfo={DictInfo}/>} />
<Route path="medicos/details" element={<DoctorDetails doctor={DictInfo} />} />
<Route path="medicos/edit" element={<DoctorEditPage DictInfo={DictInfo} />} />
<Route path="agendamento" element={<Agendamento setDictInfo={setDictInfo}/>} />
<Route path="agendamento/edit" element={<AgendamentoEditPage setDictInfo={setDictInfo} DictInfo={DictInfo}/>} />
<Route path="laudo" element={<LaudoManager />} />