Um pequeno detalhe
This commit is contained in:
parent
d67f4d6db4
commit
b1ac9ea3ff
@ -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"
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user