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

Um pequeno detalhe

Browse Source
This commit is contained in:
pedrofedericoo 2025-11-27 12:23:06 -03:00
parent d67f4d6db4
commit b1ac9ea3ff
2 changed files with 122 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/FinanceiroDashboard.jsx
View File

@ -334,7 +334,7 @@ export default function FinanceiroDashboard() {
setNovoPagamento(false); setNovoPagamento(false);
}} }}
> >
<i className="bi bi-eye me-1"></i> Ver / Editar <i className="bi bi-eye me-1"></i> Ver Detalhes
</button> </button>
<button <button
className="btn-delete" className="btn-delete"

188
src/pages/inicioPaciente.jsx
View File

@ -1,9 +1,15 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from "react";
import { useNavigate } from 'react-router-dom'; import { useNavigate } from "react-router-dom";
import { FaCalendarAlt, FaCalendarCheck, FaFileAlt, FaUserMd, FaClock } from 'react-icons/fa'; import {
import { useAuth } from '../components/utils/AuthProvider'; FaCalendarAlt,
import API_KEY from '../components/utils/apiKeys'; FaCalendarCheck,
import './style/inicioPaciente.css'; 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() { function InicioPaciente() {
const navigate = useNavigate(); const navigate = useNavigate();
@ -15,7 +21,8 @@ function InicioPaciente() {
const [pacienteId, setPacienteId] = useState(null); const [pacienteId, setPacienteId] = useState(null);
useEffect(() => { useEffect(() => {
const userId = localStorage.getItem('user_id') || localStorage.getItem('patient_id'); const userId =
localStorage.getItem("user_id") || localStorage.getItem("patient_id");
setPacienteId(userId); setPacienteId(userId);
}, []); }, []);
@ -23,57 +30,63 @@ function InicioPaciente() {
const fetchMedicos = async () => { const fetchMedicos = async () => {
try { try {
const authHeader = getAuthorizationHeader(); const authHeader = getAuthorizationHeader();
const myHeaders = new Headers(); const myHeaders = new Headers();
myHeaders.append("apikey", API_KEY); myHeaders.append("apikey", API_KEY);
myHeaders.append("Authorization", authHeader); myHeaders.append("Authorization", authHeader);
const requestOptions = { const requestOptions = {
method: 'GET', method: "GET",
headers: myHeaders, headers: myHeaders,
redirect: 'follow' redirect: "follow",
}; };
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors", requestOptions); const response = await fetch(
"https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors",
requestOptions
);
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
setMedicos(data); setMedicos(data);
console.log(' Médicos carregados:', data.length); console.log(" Médicos carregados:", data.length);
} else { } else {
console.error(' Erro ao buscar médicos:', response.status); console.error(" Erro ao buscar médicos:", response.status);
} }
} catch (error) { } catch (error) {
console.error(' Erro ao buscar médicos:', error); console.error(" Erro ao buscar médicos:", error);
} }
}; };
const fetchAgendamentos = async () => { const fetchAgendamentos = async () => {
try { try {
const authHeader = getAuthorizationHeader(); const authHeader = getAuthorizationHeader();
const myHeaders = new Headers(); const myHeaders = new Headers();
myHeaders.append("apikey", API_KEY); myHeaders.append("apikey", API_KEY);
myHeaders.append("Authorization", authHeader); myHeaders.append("Authorization", authHeader);
const requestOptions = { const requestOptions = {
method: 'GET', method: "GET",
headers: myHeaders, headers: myHeaders,
redirect: 'follow' redirect: "follow",
}; };
// Buscar todos os agendamentos (depois filtraremos pelo paciente) // Buscar todos os agendamentos (depois filtraremos pelo paciente)
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOptions); const response = await fetch(
"https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments",
requestOptions
);
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
setAgendamentos(data); setAgendamentos(data);
console.log(' Agendamentos carregados:', data.length); console.log(" Agendamentos carregados:", data.length);
} else { } else {
console.error(' Erro ao buscar agendamentos:', response.status); console.error(" Erro ao buscar agendamentos:", response.status);
} }
} catch (error) { } catch (error) {
console.error(' Erro ao buscar agendamentos:', error); console.error(" Erro ao buscar agendamentos:", error);
} finally { } finally {
setLoading(false); setLoading(false);
} }
@ -87,44 +100,50 @@ function InicioPaciente() {
useEffect(() => { useEffect(() => {
if (agendamentos.length > 0 && medicos.length > 0) { if (agendamentos.length > 0 && medicos.length > 0) {
const agendamentosComNomes = agendamentos.map(agendamento => { const agendamentosComNomes = agendamentos.map((agendamento) => {
const medico = medicos.find(m => m.id === agendamento.doctor_id); const medico = medicos.find((m) => m.id === agendamento.doctor_id);
return { return {
...agendamento, ...agendamento,
nomeMedico: medico?.full_name || 'Médico não encontrado', nomeMedico: medico?.full_name || "Médico não encontrado",
especialidadeMedico: medico?.specialty || '' especialidadeMedico: medico?.specialty || "",
}; };
}); });
setAgendamentosComMedicos(agendamentosComNomes); setAgendamentosComMedicos(agendamentosComNomes);
} }
}, [agendamentos, medicos]); }, [agendamentos, medicos]);
const meusAgendamentos = agendamentosComMedicos.filter(a => const meusAgendamentos = agendamentosComMedicos.filter((a) =>
pacienteId ? a.patient_id === pacienteId : true pacienteId ? a.patient_id === pacienteId : true
); );
const hoje = new Date(); const hoje = new Date();
hoje.setHours(0, 0, 0, 0); hoje.setHours(0, 0, 0, 0);
const agendamentosFuturos = meusAgendamentos.filter(a => { const agendamentosFuturos = meusAgendamentos
if (!a.scheduled_at) return false; .filter((a) => {
const dataAgendamento = new Date(a.scheduled_at); if (!a.scheduled_at) return false;
return dataAgendamento >= hoje && a.status !== 'cancelled' && a.status !== 'completed'; const dataAgendamento = new Date(a.scheduled_at);
}).sort((a, b) => new Date(a.scheduled_at) - new Date(b.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 proximasConsultas = agendamentosFuturos.length;
const consultasHoje = agendamentosFuturos.filter(a => { const consultasHoje = agendamentosFuturos.filter((a) => {
const dataAgendamento = new Date(a.scheduled_at); const dataAgendamento = new Date(a.scheduled_at);
dataAgendamento.setHours(0, 0, 0, 0); dataAgendamento.setHours(0, 0, 0, 0);
return dataAgendamento.getTime() === hoje.getTime(); return dataAgendamento.getTime() === hoje.getTime();
}).length; }).length;
const consultasPendentes = meusAgendamentos.filter(a => const consultasPendentes = meusAgendamentos.filter(
a.status === 'pending' || a.status === 'requested' (a) => a.status === "pending" || a.status === "requested"
).length; ).length;
const historicoConsultas = meusAgendamentos.filter(a => const historicoConsultas = meusAgendamentos.filter(
a.status === 'completed' (a) => a.status === "completed"
).length; ).length;
return ( return (
@ -154,17 +173,19 @@ function InicioPaciente() {
<FaCalendarCheck className="stat-paciente-icon" /> <FaCalendarCheck className="stat-paciente-icon" />
</div> </div>
</div> </div>
<div className="stat-paciente-card"> <div className="stat-paciente-card">
<div className="stat-paciente-info"> <div className="stat-paciente-info">
<span className="stat-paciente-label">Aguardando</span> <span className="stat-paciente-label">Aguardando</span>
<span className="stat-paciente-value">{loading ? '...' : consultasPendentes}</span> <span className="stat-paciente-value">
{loading ? "..." : consultasPendentes}
</span>
</div> </div>
<div className="stat-paciente-icon-wrapper purple"> <div className="stat-paciente-icon-wrapper purple">
<FaClock className="stat-paciente-icon" /> <FaClock className="stat-paciente-icon" />
</div> </div>
</div> </div>
<div className="stat-paciente-card"> <div className="stat-paciente-card">
<div className="stat-paciente-info"> <div className="stat-paciente-info">
<span className="stat-paciente-label">Realizadas</span> <span className="stat-paciente-label">Realizadas</span>
@ -179,27 +200,42 @@ function InicioPaciente() {
<div className="quick-actions-paciente"> <div className="quick-actions-paciente">
<h2>Acesso Rápido</h2> <h2>Acesso Rápido</h2>
<div className="actions-paciente-grid"> <div className="actions-paciente-grid">
<div className="action-paciente-button" onClick={() => navigate('/paciente/agendamento')}> <div
className="action-paciente-button"
onClick={() => navigate("/paciente/agendamento")}
>
<FaCalendarCheck className="action-paciente-icon" /> <FaCalendarCheck className="action-paciente-icon" />
<div className="action-paciente-info"> <div className="action-paciente-info">
<span className="action-paciente-title">Minhas Consultas</span> <span className="action-paciente-title">Minhas Consultas</span>
<span className="action-paciente-desc">Ver todos os agendamentos</span> <span className="action-paciente-desc">
Ver todos os agendamentos
</span>
</div> </div>
</div> </div>
<div className="action-paciente-button" onClick={() => navigate('/paciente/laudo')}> <div
className="action-paciente-button"
onClick={() => navigate("/paciente/laudo")}
>
<FaFileAlt className="action-paciente-icon" /> <FaFileAlt className="action-paciente-icon" />
<div className="action-paciente-info"> <div className="action-paciente-info">
<span className="action-paciente-title">Meus Laudos</span> <span className="action-paciente-title">Meus Laudos</span>
<span className="action-paciente-desc">Acessar documentos médicos</span> <span className="action-paciente-desc">
Acessar documentos médicos
</span>
</div> </div>
</div> </div>
<div className="action-paciente-button" onClick={() => navigate('/paciente/agendamento')}> <div
className="action-paciente-button"
onClick={() => navigate("/paciente/agendamento")}
>
<FaUserMd className="action-paciente-icon" /> <FaUserMd className="action-paciente-icon" />
<div className="action-paciente-info"> <div className="action-paciente-info">
<span className="action-paciente-title">Meus Médicos</span> <span className="action-paciente-title">Meus Médicos</span>
<span className="action-paciente-desc">Ver histórico de atendimentos</span> <span className="action-paciente-desc">
Ver histórico de atendimentos
</span>
</div> </div>
</div> </div>
</div> </div>
@ -213,22 +249,28 @@ function InicioPaciente() {
</div> </div>
) : agendamentosFuturos.length > 0 ? ( ) : agendamentosFuturos.length > 0 ? (
<div className="consultas-paciente-list"> <div className="consultas-paciente-list">
{agendamentosFuturos.slice(0, 3).map(agendamento => ( {agendamentosFuturos.slice(0, 3).map((agendamento) => (
<div key={agendamento.id} className="consulta-paciente-item"> <div key={agendamento.id} className="consulta-paciente-item">
<div className="consulta-paciente-info"> <div className="consulta-paciente-info">
<div className="consulta-paciente-time-date"> <div className="consulta-paciente-time-date">
<p className="consulta-paciente-hora"> <p className="consulta-paciente-hora">
{new Date(agendamento.scheduled_at).toLocaleTimeString('pt-BR', { {new Date(agendamento.scheduled_at).toLocaleTimeString(
hour: '2-digit', "pt-BR",
minute: '2-digit' {
})} hour: "2-digit",
minute: "2-digit",
}
)}
</p> </p>
<p className="consulta-paciente-data"> <p className="consulta-paciente-data">
{new Date(agendamento.scheduled_at).toLocaleDateString('pt-BR', { {new Date(agendamento.scheduled_at).toLocaleDateString(
day: '2-digit', "pt-BR",
month: 'short', {
year: 'numeric' day: "2-digit",
})} month: "short",
year: "numeric",
}
)}
</p> </p>
</div> </div>
<div className="consulta-paciente-detalhes"> <div className="consulta-paciente-detalhes">
@ -242,16 +284,25 @@ function InicioPaciente() {
</p> </p>
)} )}
</div> </div>
<span className={`consulta-paciente-status status-${agendamento.status}`}> <span
{agendamento.status === 'scheduled' ? 'Confirmado' : className={`consulta-paciente-status status-${agendamento.status}`}
agendamento.status === 'pending' ? 'Aguardando' : >
agendamento.status === 'requested' ? 'Solicitado' : agendamento.status} {agendamento.status === "scheduled"
? "Confirmado"
: agendamento.status === "pending"
? "Aguardando"
: agendamento.status === "requested"
? "Solicitado"
: agendamento.status}
</span> </span>
</div> </div>
</div> </div>
))} ))}
{agendamentosFuturos.length > 3 && ( {agendamentosFuturos.length > 3 && (
<button className="view-all-paciente-button" onClick={() => navigate('/paciente/agendamento')}> <button
className="view-all-paciente-button"
onClick={() => navigate("/paciente/agendamento")}
>
Ver todas as consultas Ver todas as consultas
</button> </button>
)} )}
@ -260,7 +311,10 @@ function InicioPaciente() {
<div className="no-consultas-content"> <div className="no-consultas-content">
<FaCalendarCheck className="no-consultas-icon" /> <FaCalendarCheck className="no-consultas-icon" />
<p>Você não tem consultas agendadas</p> <p>Você não tem consultas agendadas</p>
<button className="agendar-paciente-button" onClick={() => navigate('/paciente/agendamento/criar')}> <button
className="agendar-paciente-button"
onClick={() => navigate("/paciente/agendamento/criar")}
>
Agendar Consulta Agendar Consulta
</button> </button>
</div> </div>
@ -270,4 +324,4 @@ function InicioPaciente() {
); );
} }
export default InicioPaciente; export default InicioPaciente;