forked from RiseUP/riseup-squad23
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",
|
||||
|
||||
@ -12,28 +12,20 @@ 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);
|
||||
|
||||
|
||||
const Agendamento = ({ setDictInfo }) => {
|
||||
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 [currentDate, setCurrentDate] = useState(dayjs());
|
||||
const [selectedDay, setSelectedDay] = useState(dayjs());
|
||||
const [quickJump, setQuickJump] = useState({
|
||||
@ -41,19 +33,14 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
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) {
|
||||
@ -62,10 +49,8 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
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);
|
||||
@ -74,12 +59,9 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
|
||||
const consultasBrutas = await response.json() || [];
|
||||
|
||||
|
||||
|
||||
const newDict = {};
|
||||
const newFila = [];
|
||||
|
||||
|
||||
for (const agendamento of consultasBrutas) {
|
||||
const agendamentoMelhorado = {
|
||||
...agendamento,
|
||||
@ -105,7 +87,6 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
setDictAgendamentosOrganizados(newDict);
|
||||
setFilaDeEsperaData(newFila);
|
||||
|
||||
|
||||
} catch (err) {
|
||||
console.error('Falha ao buscar ou processar agendamentos:', err);
|
||||
setDictAgendamentosOrganizados({});
|
||||
@ -115,11 +96,9 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
carregarDados();
|
||||
}, [authHeader, user]);
|
||||
|
||||
|
||||
const updateAppointmentStatus = async (id, updates) => {
|
||||
const myHeaders = new Headers({
|
||||
"Authorization": authHeader, "apikey": API_KEY, "Content-Type": "application/json"
|
||||
@ -136,35 +115,26 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
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!");
|
||||
|
||||
@ -182,7 +152,6 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
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);
|
||||
@ -202,34 +171,6 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
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' }}>
|
||||
@ -238,28 +179,31 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Minhas consultas</h1>
|
||||
<div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
|
||||
|
||||
<button
|
||||
style={PageNovaConsulta ? activeButtonStyle : inactiveButtonStyle}
|
||||
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
|
||||
style={FiladeEspera && !PageNovaConsulta ? activeButtonStyle : inactiveButtonStyle}
|
||||
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>
|
||||
@ -269,7 +213,6 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
<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>
|
||||
@ -297,7 +240,10 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
</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 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">
|
||||
@ -382,8 +328,6 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
<AgendamentoCadastroManager setPageConsulta={setPageConsulta} />
|
||||
)}
|
||||
|
||||
|
||||
{}
|
||||
{isCancelModalOpen && (
|
||||
<div className="modal-overlay">
|
||||
<div className="modal-content" style={{ maxWidth: '400px' }}>
|
||||
@ -420,10 +364,8 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
</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