ajeitei a solicitar agendamento e fila de espera
This commit is contained in:
parent
ad7c300a44
commit
6ccb0992c3
10
package-lock.json
generated
10
package-lock.json
generated
@ -38,6 +38,7 @@
|
||||
"express": "^5.1.0",
|
||||
"firebase": "^12.5.0",
|
||||
"flatpickr": "^4.6.13",
|
||||
"helmet": "^8.1.0",
|
||||
"html2pdf.js": "^0.12.1",
|
||||
"lucide-react": "^0.543.0",
|
||||
"node-fetch": "^3.3.2",
|
||||
@ -25979,6 +25980,15 @@
|
||||
"he": "bin/he"
|
||||
}
|
||||
},
|
||||
"node_modules/helmet": {
|
||||
"version": "8.1.0",
|
||||
"resolved": "https://registry.npmjs.org/helmet/-/helmet-8.1.0.tgz",
|
||||
"integrity": "sha512-jOiHyAZsmnr8LqoPGmCjYAaiuWwjAPLgY8ZX2XrmHawt99/u1y6RgrZMTeoPfpUbV96HOalYgz1qzkRbw54Pmg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/hoopy": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
|
||||
|
||||
@ -33,6 +33,7 @@
|
||||
"express": "^5.1.0",
|
||||
"firebase": "^12.5.0",
|
||||
"flatpickr": "^4.6.13",
|
||||
"helmet": "^8.1.0",
|
||||
"html2pdf.js": "^0.12.1",
|
||||
"lucide-react": "^0.543.0",
|
||||
"node-fetch": "^3.3.2",
|
||||
|
||||
@ -1,429 +1,371 @@
|
||||
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 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 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';
|
||||
|
||||
|
||||
dayjs.locale('pt-br');
|
||||
dayjs.extend(isBetween);
|
||||
dayjs.extend(localeData);
|
||||
|
||||
dayjs.extend(localeData);
|
||||
|
||||
const Agendamento = ({ setDictInfo }) => {
|
||||
const navigate = useNavigate();
|
||||
const { getAuthorizationHeader, user } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const { getAuthorizationHeader, user } = useAuth();
|
||||
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [DictAgendamentosOrganizados, setDictAgendamentosOrganizados] = useState({});
|
||||
const [filaEsperaData, setFilaDeEsperaData] = useState([]);
|
||||
const [FiladeEspera, setFiladeEspera] = useState(false);
|
||||
const [PageNovaConsulta, setPageConsulta] = 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 [currentDate, setCurrentDate] = useState(dayjs());
|
||||
const [selectedDay, setSelectedDay] = useState(dayjs());
|
||||
const [quickJump, setQuickJump] = useState({
|
||||
month: currentDate.month(),
|
||||
year: currentDate.year()
|
||||
});
|
||||
|
||||
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(() => {
|
||||
const carregarDados = async () => {
|
||||
const patientId = user?.patient_id || "6e7f8829-0574-42df-9290-8dbb70f75ada";
|
||||
|
||||
if (!authHeader) {
|
||||
console.warn("Header de autorização não disponível.");
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
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 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);
|
||||
}
|
||||
};
|
||||
|
||||
carregarDados();
|
||||
}, [authHeader, user]);
|
||||
|
||||
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 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 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('');
|
||||
|
||||
|
||||
const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
|
||||
const [appointmentToCancel, setAppointmentToCancel] = useState(null);
|
||||
const [cancellationReason, setCancellationReason] = useState('');
|
||||
|
||||
const authHeader = useMemo(() => getAuthorizationHeader(), [getAuthorizationHeader]);
|
||||
if (success) {
|
||||
alert("Solicitação cancelada com sucesso!");
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const carregarDados = async () => {
|
||||
|
||||
const patientId = user?.patient_id || "6e7f8829-0574-42df-9290-8dbb70f75ada";
|
||||
|
||||
if (!authHeader) {
|
||||
console.warn("Header de autorização não disponível.");
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
|
||||
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 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);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
carregarDados();
|
||||
}, [authHeader, user]);
|
||||
|
||||
|
||||
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 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 de rede/servidor:', error);
|
||||
return false;
|
||||
setDictAgendamentosOrganizados(prev => {
|
||||
const newDict = { ...prev };
|
||||
for (const date in newDict) {
|
||||
newDict[date] = newDict[date].filter(app => app.id !== appointmentToCancel);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
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 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);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div>
|
||||
<h1>Minhas consultas</h1>
|
||||
<div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
|
||||
|
||||
<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>
|
||||
|
||||
{!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 className="form-container" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
|
||||
<Spinner />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Minhas consultas</h1>
|
||||
<div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
|
||||
<button
|
||||
className="btn-adicionar-consulta"
|
||||
onClick={() => {
|
||||
setPageConsulta(true);
|
||||
setFiladeEspera(false);
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: PageNovaConsulta ? '#1d4ed8' : undefined
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-plus-circle"></i> Solicitar Agendamento
|
||||
</button>
|
||||
<button
|
||||
className="btn-adicionar-consulta"
|
||||
onClick={() => {
|
||||
setFiladeEspera(!FiladeEspera);
|
||||
setPageConsulta(false);
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: FiladeEspera && !PageNovaConsulta ? '#1d4ed8' : undefined
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-list-task me-1"></i> Fila de Espera ({filaEsperaData.length})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{!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>
|
||||
) : (
|
||||
<AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
|
||||
)}
|
||||
|
||||
|
||||
{}
|
||||
{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' }}>×</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 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>
|
||||
)
|
||||
) : (
|
||||
<AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
|
||||
)}
|
||||
|
||||
{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' }}>×</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 Agendamento;
|
||||
|
||||
@ -223,3 +223,31 @@
|
||||
.btn-action.btn-delete:hover {
|
||||
background-color: #C53030;
|
||||
}
|
||||
.btn-adicionar-consulta {
|
||||
background-color: #2a67e2;
|
||||
color: #fff;
|
||||
padding: 10px 24px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.btn-adicionar-consulta:hover {
|
||||
background-color: #1d4ed8;
|
||||
}
|
||||
.btn-adicionar-consulta i {
|
||||
font-size: 1.2em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.btn-adicionar-consulta i {
|
||||
font-size: 1.2em;
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user