Um pequeno detalhe

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

View File

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

View File

@ -1,9 +1,15 @@
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';
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();
@ -15,7 +21,8 @@ function InicioPaciente() {
const [pacienteId, setPacienteId] = useState(null);
useEffect(() => {
const userId = localStorage.getItem('user_id') || localStorage.getItem('patient_id');
const userId =
localStorage.getItem("user_id") || localStorage.getItem("patient_id");
setPacienteId(userId);
}, []);
@ -23,57 +30,63 @@ function InicioPaciente() {
const fetchMedicos = async () => {
try {
const authHeader = getAuthorizationHeader();
const myHeaders = new Headers();
myHeaders.append("apikey", API_KEY);
myHeaders.append("Authorization", authHeader);
const requestOptions = {
method: 'GET',
method: "GET",
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) {
const data = await response.json();
setMedicos(data);
console.log(' Médicos carregados:', data.length);
console.log(" Médicos carregados:", data.length);
} else {
console.error(' Erro ao buscar médicos:', response.status);
console.error(" Erro ao buscar médicos:", response.status);
}
} catch (error) {
console.error(' Erro ao buscar médicos:', 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',
method: "GET",
headers: myHeaders,
redirect: 'follow'
redirect: "follow",
};
// 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) {
const data = await response.json();
setAgendamentos(data);
console.log(' Agendamentos carregados:', data.length);
console.log(" Agendamentos carregados:", data.length);
} else {
console.error(' Erro ao buscar agendamentos:', response.status);
console.error(" Erro ao buscar agendamentos:", response.status);
}
} catch (error) {
console.error(' Erro ao buscar agendamentos:', error);
console.error(" Erro ao buscar agendamentos:", error);
} finally {
setLoading(false);
}
@ -87,44 +100,50 @@ function InicioPaciente() {
useEffect(() => {
if (agendamentos.length > 0 && medicos.length > 0) {
const agendamentosComNomes = agendamentos.map(agendamento => {
const medico = medicos.find(m => m.id === agendamento.doctor_id);
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 || ''
nomeMedico: medico?.full_name || "Médico não encontrado",
especialidadeMedico: medico?.specialty || "",
};
});
setAgendamentosComMedicos(agendamentosComNomes);
}
}, [agendamentos, medicos]);
const meusAgendamentos = agendamentosComMedicos.filter(a =>
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 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 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'
const consultasPendentes = meusAgendamentos.filter(
(a) => a.status === "pending" || a.status === "requested"
).length;
const historicoConsultas = meusAgendamentos.filter(a =>
a.status === 'completed'
const historicoConsultas = meusAgendamentos.filter(
(a) => a.status === "completed"
).length;
return (
@ -154,17 +173,19 @@ function InicioPaciente() {
<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>
<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>
@ -179,27 +200,42 @@ function InicioPaciente() {
<div className="quick-actions-paciente">
<h2>Acesso Rápido</h2>
<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" />
<div className="action-paciente-info">
<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 className="action-paciente-button" onClick={() => navigate('/paciente/laudo')}>
<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>
<span className="action-paciente-desc">
Acessar documentos médicos
</span>
</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" />
<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>
<span className="action-paciente-desc">
Ver histórico de atendimentos
</span>
</div>
</div>
</div>
@ -213,22 +249,28 @@ function InicioPaciente() {
</div>
) : agendamentosFuturos.length > 0 ? (
<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 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'
})}
{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'
})}
{new Date(agendamento.scheduled_at).toLocaleDateString(
"pt-BR",
{
day: "2-digit",
month: "short",
year: "numeric",
}
)}
</p>
</div>
<div className="consulta-paciente-detalhes">
@ -242,16 +284,25 @@ function InicioPaciente() {
</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
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')}>
<button
className="view-all-paciente-button"
onClick={() => navigate("/paciente/agendamento")}
>
Ver todas as consultas
</button>
)}
@ -260,7 +311,10 @@ function InicioPaciente() {
<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')}>
<button
className="agendar-paciente-button"
onClick={() => navigate("/paciente/agendamento/criar")}
>
Agendar Consulta
</button>
</div>
@ -270,4 +324,4 @@ function InicioPaciente() {
);
}
export default InicioPaciente;
export default InicioPaciente;