forked from RiseUP/riseup-squad21
325 lines
16 KiB
TypeScript
325 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import PatientLayout from "@/components/patient-layout";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Calendar, Clock, MapPin, Phone, User, X, CalendarDays } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
|
|
import { appointmentsService } from "@/services/appointmentsApi.mjs";
|
|
import { patientsService } from "@/services/patientsApi.mjs";
|
|
import { doctorsService } from "@/services/doctorsApi.mjs";
|
|
import { usersService } from "@/services/usersApi.mjs";
|
|
|
|
const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
|
|
|
|
interface UserPermissions {
|
|
isAdmin: boolean;
|
|
isManager: boolean;
|
|
isDoctor: boolean;
|
|
isSecretary: boolean;
|
|
isAdminOrManager: boolean;
|
|
}
|
|
|
|
interface UserData {
|
|
user: {
|
|
id: string;
|
|
email: string;
|
|
email_confirmed_at: string | null;
|
|
created_at: string | null;
|
|
last_sign_in_at: string | null;
|
|
};
|
|
profile: {
|
|
id: string;
|
|
full_name: string;
|
|
email: string;
|
|
phone: string;
|
|
avatar_url: string | null;
|
|
disabled: boolean;
|
|
created_at: string | null;
|
|
updated_at: string | null;
|
|
};
|
|
roles: string[];
|
|
permissions: UserPermissions;
|
|
}
|
|
|
|
export default function PatientAppointments() {
|
|
const [appointments, setAppointments] = useState<any[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [selectedAppointment, setSelectedAppointment] = useState<any>(null);
|
|
const [userData, setUserData] = useState<UserData>();
|
|
|
|
// Modais
|
|
const [rescheduleModal, setRescheduleModal] = useState(false);
|
|
const [cancelModal, setCancelModal] = useState(false);
|
|
|
|
// Formulário de reagendamento/cancelamento
|
|
const [rescheduleData, setRescheduleData] = useState({ date: "", time: "", reason: "" });
|
|
const [cancelReason, setCancelReason] = useState("");
|
|
|
|
const timeSlots = ["08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30"];
|
|
|
|
const fetchData = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
const queryParams = "order=scheduled_at.desc";
|
|
const appointmentList = await appointmentsService.search_appointment(queryParams);
|
|
const patientList = await patientsService.list();
|
|
const doctorList = await doctorsService.list();
|
|
|
|
const user = await usersService.getMe();
|
|
setUserData(user);
|
|
|
|
const doctorMap = new Map(doctorList.map((d: any) => [d.id, d]));
|
|
const patientMap = new Map(patientList.map((p: any) => [p.id, p]));
|
|
|
|
console.log(appointmentList);
|
|
|
|
// Filtra apenas as consultas do paciente logado
|
|
const patientAppointments = appointmentList
|
|
.filter((apt: any) => apt.patient_id === userData?.user.id)
|
|
.map((apt: any) => ({
|
|
...apt,
|
|
doctor: doctorMap.get(apt.doctor_id) || { full_name: "Médico não encontrado", specialty: "N/A" },
|
|
patient: patientMap.get(apt.patient_id) || { full_name: "Paciente não encontrado" },
|
|
}));
|
|
|
|
setAppointments(patientAppointments);
|
|
} catch (error) {
|
|
console.error("Erro ao carregar consultas:", error);
|
|
toast.error("Não foi possível carregar suas consultas.");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, []);
|
|
|
|
const getStatusBadge = (status: string) => {
|
|
switch (status) {
|
|
case "requested":
|
|
return <Badge className="bg-yellow-100 text-yellow-800">Solicitada</Badge>;
|
|
case "confirmed":
|
|
return <Badge className="bg-blue-100 text-blue-800">Confirmada</Badge>;
|
|
case "checked_in":
|
|
return <Badge className="bg-indigo-100 text-indigo-800">Check-in</Badge>;
|
|
case "completed":
|
|
return <Badge className="bg-green-100 text-green-800">Realizada</Badge>;
|
|
case "cancelled":
|
|
return <Badge className="bg-red-100 text-red-800">Cancelada</Badge>;
|
|
default:
|
|
return <Badge variant="secondary">{status}</Badge>;
|
|
}
|
|
};
|
|
|
|
const handleReschedule = (appointment: any) => {
|
|
setSelectedAppointment(appointment);
|
|
setRescheduleData({ date: "", time: "", reason: "" });
|
|
setRescheduleModal(true);
|
|
};
|
|
|
|
const handleCancel = (appointment: any) => {
|
|
setSelectedAppointment(appointment);
|
|
setCancelReason("");
|
|
setCancelModal(true);
|
|
};
|
|
|
|
const confirmReschedule = async () => {
|
|
if (!rescheduleData.date || !rescheduleData.time) {
|
|
toast.error("Por favor, selecione uma nova data e horário.");
|
|
return;
|
|
}
|
|
try {
|
|
const newScheduledAt = new Date(`${rescheduleData.date}T${rescheduleData.time}:00Z`).toISOString();
|
|
|
|
await appointmentsService.update(selectedAppointment.id, {
|
|
scheduled_at: newScheduledAt,
|
|
status: "requested",
|
|
});
|
|
|
|
setAppointments((prev) => prev.map((apt) => (apt.id === selectedAppointment.id ? { ...apt, scheduled_at: newScheduledAt, status: "requested" } : apt)));
|
|
|
|
setRescheduleModal(false);
|
|
toast.success("Consulta reagendada com sucesso!");
|
|
} catch (error) {
|
|
console.error("Erro ao reagendar consulta:", error);
|
|
toast.error("Não foi possível reagendar a consulta.");
|
|
}
|
|
};
|
|
|
|
const confirmCancel = async () => {
|
|
if (!cancelReason.trim() || cancelReason.trim().length < 10) {
|
|
toast.error("Por favor, informe um motivo de cancelamento (mínimo 10 caracteres).");
|
|
return;
|
|
}
|
|
try {
|
|
await appointmentsService.update(selectedAppointment.id, {
|
|
status: "cancelled",
|
|
cancel_reason: cancelReason,
|
|
});
|
|
|
|
setAppointments((prev) => prev.map((apt) => (apt.id === selectedAppointment.id ? { ...apt, status: "cancelled" } : apt)));
|
|
|
|
setCancelModal(false);
|
|
toast.success("Consulta cancelada com sucesso!");
|
|
} catch (error) {
|
|
console.error("Erro ao cancelar consulta:", error);
|
|
toast.error("Não foi possível cancelar a consulta.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<PatientLayout>
|
|
<div className="space-y-6">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900">Minhas Consultas</h1>
|
|
<p className="text-gray-600">Veja, reagende ou cancele suas consultas</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-6">
|
|
{isLoading ? (
|
|
<p>Carregando suas consultas...</p>
|
|
) : appointments.length > 0 ? (
|
|
appointments.map((appointment) => (
|
|
<Card key={appointment.id}>
|
|
<CardHeader>
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<CardTitle className="text-lg">{appointment.doctor.full_name}</CardTitle>
|
|
<CardDescription>{appointment.doctor.specialty}</CardDescription>
|
|
</div>
|
|
{getStatusBadge(appointment.status)}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid md:grid-cols-2 gap-3">
|
|
<div className="space-y-2 text-sm text-gray-700">
|
|
<div className="flex items-center">
|
|
<Calendar className="mr-2 h-4 w-4 text-gray-500" />
|
|
{new Date(appointment.scheduled_at).toLocaleDateString("pt-BR", { timeZone: "UTC" })}
|
|
</div>
|
|
<div className="flex items-center">
|
|
<Clock className="mr-2 h-4 w-4 text-gray-500" />
|
|
{new Date(appointment.scheduled_at).toLocaleTimeString("pt-BR", {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
timeZone: "UTC",
|
|
})}
|
|
</div>
|
|
<div className="flex items-center">
|
|
<MapPin className="mr-2 h-4 w-4 text-gray-500" />
|
|
{appointment.doctor.location || "Local a definir"}
|
|
</div>
|
|
<div className="flex items-center">
|
|
<Phone className="mr-2 h-4 w-4 text-gray-500" />
|
|
{appointment.doctor.phone || "N/A"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{appointment.status !== "cancelled" && (
|
|
<div className="flex gap-2 mt-4 pt-4 border-t">
|
|
<Button variant="outline" size="sm" onClick={() => handleReschedule(appointment)}>
|
|
<CalendarDays className="mr-2 h-4 w-4" />
|
|
Reagendar
|
|
</Button>
|
|
<Button variant="outline" size="sm" className="text-red-600 hover:text-red-700 hover:bg-red-50" onClick={() => handleCancel(appointment)}>
|
|
<X className="mr-2 h-4 w-4" />
|
|
Cancelar
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
))
|
|
) : (
|
|
<p className="text-gray-600">Você ainda não possui consultas agendadas.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* MODAL DE REAGENDAMENTO */}
|
|
<Dialog open={rescheduleModal} onOpenChange={setRescheduleModal}>
|
|
<DialogContent className="sm:max-w-[425px]">
|
|
<DialogHeader>
|
|
<DialogTitle>Reagendar Consulta</DialogTitle>
|
|
<DialogDescription>
|
|
Escolha uma nova data e horário para sua consulta com <strong>{selectedAppointment?.doctor?.full_name}</strong>.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="date">Nova Data</Label>
|
|
<Input id="date" type="date" value={rescheduleData.date} onChange={(e) => setRescheduleData((prev) => ({ ...prev, date: e.target.value }))} min={new Date().toISOString().split("T")[0]} />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="time">Novo Horário</Label>
|
|
<Select value={rescheduleData.time} onValueChange={(value) => setRescheduleData((prev) => ({ ...prev, time: value }))}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Selecione um horário" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{timeSlots.map((time) => (
|
|
<SelectItem key={time} value={time}>
|
|
{time}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="reason">Motivo (opcional)</Label>
|
|
<Textarea id="reason" placeholder="Explique brevemente o motivo do reagendamento..." value={rescheduleData.reason} onChange={(e) => setRescheduleData((prev) => ({ ...prev, reason: e.target.value }))} />
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setRescheduleModal(false)}>
|
|
Cancelar
|
|
</Button>
|
|
<Button onClick={confirmReschedule}>Confirmar</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* MODAL DE CANCELAMENTO */}
|
|
<Dialog open={cancelModal} onOpenChange={setCancelModal}>
|
|
<DialogContent className="sm:max-w-[425px]">
|
|
<DialogHeader>
|
|
<DialogTitle>Cancelar Consulta</DialogTitle>
|
|
<DialogDescription>
|
|
Deseja realmente cancelar sua consulta com <strong>{selectedAppointment?.doctor?.full_name}</strong>?
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="cancel-reason" className="text-sm font-medium">
|
|
Motivo do Cancelamento <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Textarea id="cancel-reason" placeholder="Informe o motivo do cancelamento (mínimo 10 caracteres)" value={cancelReason} onChange={(e) => setCancelReason(e.target.value)} className="min-h-[100px]" />
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setCancelModal(false)}>
|
|
Voltar
|
|
</Button>
|
|
<Button variant="destructive" onClick={confirmCancel}>
|
|
Confirmar Cancelamento
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</PatientLayout>
|
|
);
|
|
}
|