Atualizar app/secretary/appointments/page.tsx

app/secretary/appointments/page.tsx

@@ -8,132 +8,145 @@ 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, CalendarDays, X, User } from "lucide-react";
+import { Calendar, Clock, MapPin, Phone, User, Trash2, Pencil } from "lucide-react";
 import { toast } from "sonner";
 import Link from "next/link";
-
+import { appointmentsService } from "@/services/appointmentsApi.mjs";
-const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
+import { patientsService } from "@/services/patientsApi.mjs";
-
+import { doctorsService } from "@/services/doctorsApi.mjs";
-const initialAppointments = [
-    {
-        id: 1,
-        patientName: "Carlos Pereira",
-        doctor: "Dr. João Silva",
-        specialty: "Cardiologia",
-        date: "2024-01-15",
-        time: "14:30",
-        status: "agendada",
-        location: "Consultório A - 2º andar",
-        phone: "(11) 3333-4444",
-    },
-    {
-        id: 2,
-        patientName: "Ana Beatriz Costa",
-        doctor: "Dra. Maria Santos",
-        specialty: "Dermatologia",
-        date: "2024-01-22",
-        time: "10:00",
-        status: "agendada",
-        location: "Consultório B - 1º andar",
-        phone: "(11) 3333-5555",
-    },
-    {
-        id: 3,
-        patientName: "Roberto Almeida",
-        doctor: "Dr. Pedro Costa",
-        specialty: "Ortopedia",
-        date: "2024-01-08",
-        time: "16:00",
-        status: "realizada",
-        location: "Consultório C - 3º andar",
-        phone: "(11) 3333-6666",
-    },
-    {
-        id: 4,
-        patientName: "Fernanda Lima",
-        doctor: "Dra. Ana Lima",
-        specialty: "Ginecologia",
-        date: "2024-01-05",
-        time: "09:30",
-        status: "realizada",
-        location: "Consultório D - 2º andar",
-        phone: "(11) 3333-7777",
-    },
-];
 
 export default function SecretaryAppointments() {
     const [appointments, setAppointments] = useState<any[]>([]);
-    const [rescheduleModal, setRescheduleModal] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
-    const [cancelModal, setCancelModal] = useState(false);
     const [selectedAppointment, setSelectedAppointment] = useState<any>(null);
-    const [rescheduleData, setRescheduleData] = useState({ date: "", time: "", reason: "" });
+
-    const [cancelReason, setCancelReason] = useState("");
+    // Estados dos Modais
+    const [deleteModal, setDeleteModal] = useState(false);
+    const [editModal, setEditModal] = useState(false);
+
+    // Estado para o formulário de edição
+    const [editFormData, setEditFormData] = useState({
+        date: "",
+        time: "",
+        status: "",
+    });
+
+    const fetchData = async () => {
+        setIsLoading(true);
+        try {
+            const [appointmentList, patientList, doctorList] = await Promise.all([
+                appointmentsService.list(),
+                patientsService.list(),
+                doctorsService.list(),
+            ]);
+
+            const patientMap = new Map(patientList.map((p: any) => [p.id, p]));
+            const doctorMap = new Map(doctorList.map((d: any) => [d.id, d]));
+
+            const enrichedAppointments = appointmentList.map((apt: any) => ({
+                ...apt,
+                patient: patientMap.get(apt.patient_id) || { full_name: "Paciente não encontrado" },
+                doctor: doctorMap.get(apt.doctor_id) || { full_name: "Médico não encontrado", specialty: "N/A" },
+            }));
+
+            setAppointments(enrichedAppointments);
+        } catch (error) {
+            console.error("Falha ao buscar agendamentos:", error);
+            toast.error("Não foi possível carregar a lista de agendamentos.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
 
     useEffect(() => {
-        const storedAppointments = localStorage.getItem(APPOINTMENTS_STORAGE_KEY);
+        fetchData();
-        if (storedAppointments) {
-            setAppointments(JSON.parse(storedAppointments));
-        } else {
-            setAppointments(initialAppointments);
-            localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(initialAppointments));
-        }
     }, []);
 
-    const updateAppointments = (updatedAppointments: any[]) => {
+    // --- LÓGICA DE EDIÇÃO ---
-        setAppointments(updatedAppointments);
+    const handleEdit = (appointment: any) => {
-        localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(updatedAppointments));
-    };
-
-    const handleReschedule = (appointment: any) => {
         setSelectedAppointment(appointment);
-        setRescheduleData({ date: "", time: "", reason: "" });
+        const appointmentDate = new Date(appointment.scheduled_at);
-        setRescheduleModal(true);
+
+        setEditFormData({
+            date: appointmentDate.toISOString().split('T')[0],
+            time: appointmentDate.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit', timeZone: 'UTC' }),
+            status: appointment.status,
+        });
+        setEditModal(true);
     };
 
-    const handleCancel = (appointment: any) => {
+    const confirmEdit = async () => {
-        setSelectedAppointment(appointment);
+        if (!selectedAppointment || !editFormData.date || !editFormData.time || !editFormData.status) {
-        setCancelReason("");
+            toast.error("Todos os campos são obrigatórios para a edição.");
-        setCancelModal(true);
-    };
-
-    const confirmReschedule = () => {
-        if (!rescheduleData.date || !rescheduleData.time) {
-            toast.error("Por favor, selecione uma nova data e horário");
             return;
         }
-        const updated = appointments.map((apt) => (apt.id === selectedAppointment.id ? { ...apt, date: rescheduleData.date, time: rescheduleData.time } : apt));
-        updateAppointments(updated);
-        setRescheduleModal(false);
-        toast.success("Consulta reagendada com sucesso!");
-    };
 
-    const confirmCancel = () => {
+        try {
-        if (!cancelReason.trim() || cancelReason.trim().length < 10) {
+            const newScheduledAt = new Date(`${editFormData.date}T${editFormData.time}:00Z`).toISOString();
-            toast.error("O motivo do cancelamento é obrigatório e deve ter no mínimo 10 caracteres.");
+            const updatePayload = {
-            return;
+                scheduled_at: newScheduledAt,
+                status: editFormData.status,
+            };
+
+            await appointmentsService.update(selectedAppointment.id, updatePayload);
+
+            setAppointments(prevAppointments =>
+                prevAppointments.map(apt =>
+                    apt.id === selectedAppointment.id ? { ...apt, scheduled_at: newScheduledAt, status: editFormData.status } : apt
+                )
+            );
+
+            setEditModal(false);
+            toast.success("Consulta atualizada com sucesso!");
+
+        } catch (error) {
+            console.error("Erro ao atualizar consulta:", error);
+            toast.error("Não foi possível atualizar a consulta.");
         }
-        const updated = appointments.map((apt) => (apt.id === selectedAppointment.id ? { ...apt, status: "cancelada" } : apt));
-        updateAppointments(updated);
-        setCancelModal(false);
-        toast.success("Consulta cancelada com sucesso!");
     };
 
+    // --- LÓGICA DE DELEÇÃO ---
+    const handleDelete = (appointment: any) => {
+        setSelectedAppointment(appointment);
+        setDeleteModal(true);
+    };
+
+    const confirmDelete = async () => {
+        if (!selectedAppointment) return;
+        try {
+            await appointmentsService.delete(selectedAppointment.id);
+            setAppointments((prev) => prev.filter((apt) => apt.id !== selectedAppointment.id));
+            setDeleteModal(false);
+            toast.success("Consulta deletada com sucesso!");
+        } catch (error) {
+            console.error("Erro ao deletar consulta:", error);
+            toast.error("Não foi possível deletar a consulta.");
+        }
+    };
+
+    // ** FUNÇÃO CORRIGIDA E MELHORADA **
     const getStatusBadge = (status: string) => {
         switch (status) {
-            case "agendada":
+            case "requested":
-                return <Badge className="bg-blue-100 text-blue-800">Agendada</Badge>;
+                return <Badge className="bg-yellow-100 text-yellow-800">Solicitada</Badge>;
-            case "realizada":
+            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 "cancelada":
+            case "cancelled":
                 return <Badge className="bg-red-100 text-red-800">Cancelada</Badge>;
+            case "no_show":
+                return <Badge className="bg-gray-100 text-gray-800">Não Compareceu</Badge>;
             default:
                 return <Badge variant="secondary">{status}</Badge>;
         }
     };
 
     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 appointmentStatuses = ["requested", "confirmed", "checked_in", "completed", "cancelled", "no_show"];
 
     return (
         <SecretaryLayout>
@@ -144,22 +157,19 @@ export default function SecretaryAppointments() {
                         <p className="text-gray-600">Gerencie as consultas dos pacientes</p>
                     </div>
                     <Link href="/secretary/schedule">
-                        <Button>
+                        <Button><Calendar className="mr-2 h-4 w-4" /> Agendar Nova Consulta</Button>
-                            <Calendar className="mr-2 h-4 w-4" />
-                            Agendar Nova Consulta
-                        </Button>
                     </Link>
                 </div>
 
                 <div className="grid gap-6">
-                    {appointments.length > 0 ? (
+                    {isLoading ? <p>Carregando 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}</CardTitle>
+                                            <CardTitle className="text-lg">{appointment.doctor.full_name}</CardTitle>
-                                            <CardDescription>{appointment.specialty}</CardDescription>
+                                            <CardDescription>{appointment.doctor.specialty}</CardDescription>
                                         </div>
                                         {getStatusBadge(appointment.status)}
                                     </div>
@@ -169,41 +179,39 @@ export default function SecretaryAppointments() {
                                         <div className="space-y-3">
                                             <div className="flex items-center text-sm text-gray-800 font-medium">
                                                 <User className="mr-2 h-4 w-4 text-gray-600" />
-                                                {appointment.patientName}
+                                                {appointment.patient.full_name}
                                             </div>
                                             <div className="flex items-center text-sm text-gray-600">
                                                 <Calendar className="mr-2 h-4 w-4" />
-                                                {new Date(appointment.date).toLocaleDateString("pt-BR", { timeZone: "UTC" })}
+                                                {new Date(appointment.scheduled_at).toLocaleDateString("pt-BR", { timeZone: "UTC" })}
                                             </div>
                                             <div className="flex items-center text-sm text-gray-600">
                                                 <Clock className="mr-2 h-4 w-4" />
-                                                {appointment.time}
+                                                {new Date(appointment.scheduled_at).toLocaleTimeString("pt-BR", { hour: '2-digit', minute: '2-digit', timeZone: "UTC" })}
                                             </div>
                                         </div>
                                         <div className="space-y-3">
                                             <div className="flex items-center text-sm text-gray-600">
                                                 <MapPin className="mr-2 h-4 w-4" />
-                                                {appointment.location}
+                                                {appointment.doctor.location || "Local a definir"}
                                             </div>
                                             <div className="flex items-center text-sm text-gray-600">
                                                 <Phone className="mr-2 h-4 w-4" />
-                                                {appointment.phone}
+                                                {appointment.doctor.phone || "N/A"}
                                             </div>
                                         </div>
                                     </div>
 
-                                    {appointment.status === "agendada" && (
+                                    <div className="flex gap-2 mt-4 pt-4 border-t">
-                                        <div className="flex gap-2 mt-4 pt-4 border-t">
+                                        <Button variant="outline" size="sm" onClick={() => handleEdit(appointment)}>
-                                            <Button variant="outline" size="sm" onClick={() => handleReschedule(appointment)}>
+                                            <Pencil className="mr-2 h-4 w-4" />
-                                                <CalendarDays className="mr-2 h-4 w-4" />
+                                            Editar
-                                                Reagendar
+                                        </Button>
-                                            </Button>
+                                        <Button variant="outline" size="sm" className="text-red-600 hover:text-red-700 hover:bg-red-50 bg-transparent" onClick={() => handleDelete(appointment)}>
-                                            <Button variant="outline" size="sm" className="text-red-600 hover:text-red-700 hover:bg-red-50 bg-transparent" onClick={() => handleCancel(appointment)}>
+                                            <Trash2 className="mr-2 h-4 w-4" />
-                                                <X className="mr-2 h-4 w-4" />
+                                            Deletar
-                                                Cancelar
+                                        </Button>
-                                            </Button>
+                                    </div>
-                                        </div>
-                                    )}
                                 </CardContent>
                             </Card>
                         ))
@@ -213,68 +221,58 @@ export default function SecretaryAppointments() {
                 </div>
             </div>
 
-            <Dialog open={rescheduleModal} onOpenChange={setRescheduleModal}>
+            {/* MODAL DE EDIÇÃO */}
+            <Dialog open={editModal} onOpenChange={setEditModal}>
                 <DialogContent className="sm:max-w-[425px]">
                     <DialogHeader>
-                        <DialogTitle>Reagendar Consulta</DialogTitle>
+                        <DialogTitle>Editar Consulta</DialogTitle>
-                        <DialogDescription>Reagendar consulta com {selectedAppointment?.doctor} para {selectedAppointment?.patientName}</DialogDescription>
+                        <DialogDescription>
+                            Altere os dados da consulta de <strong>{selectedAppointment?.patient.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]} />
+                            <Input id="date" type="date" value={editFormData.date} onChange={(e) => setEditFormData(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 }))}>
+                            <Select value={editFormData.time} onValueChange={(value) => setEditFormData(prev => ({ ...prev, time: value }))}>
-                                <SelectTrigger>
+                                <SelectTrigger><SelectValue placeholder="Selecione um horário" /></SelectTrigger>
-                                    <SelectValue placeholder="Selecione um horário" />
-                                </SelectTrigger>
                                 <SelectContent>
-                                    {timeSlots.map((time) => (
+                                    {timeSlots.map((time) => (<SelectItem key={time} value={time}>{time}</SelectItem>))}
-                                        <SelectItem key={time} value={time}>
-                                            {time}
-                                        </SelectItem>
-                                    ))}
                                 </SelectContent>
                             </Select>
                         </div>
                         <div className="grid gap-2">
-                            <Label htmlFor="reason">Motivo do Reagendamento (opcional)</Label>
+                            <Label htmlFor="status">Status da Consulta</Label>
-                            <Textarea id="reason" placeholder="Informe o motivo do reagendamento..." value={rescheduleData.reason} onChange={(e) => setRescheduleData((prev) => ({ ...prev, reason: e.target.value }))} />
+                            <Select value={editFormData.status} onValueChange={(value) => setEditFormData(prev => ({ ...prev, status: value }))}>
+                                <SelectTrigger><SelectValue placeholder="Selecione um status" /></SelectTrigger>
+                                <SelectContent>
+                                    {appointmentStatuses.map((status) => (<SelectItem key={status} value={status}>{status}</SelectItem>))}
+                                </SelectContent>
+                            </Select>
                         </div>
                     </div>
                     <DialogFooter>
-                        <Button variant="outline" onClick={() => setRescheduleModal(false)}>
+                        <Button variant="outline" onClick={() => setEditModal(false)}>Cancelar</Button>
-                            Cancelar
+                        <Button onClick={confirmEdit}>Salvar Alterações</Button>
-                        </Button>
-                        <Button onClick={confirmReschedule}>Confirmar Reagendamento</Button>
                     </DialogFooter>
                 </DialogContent>
             </Dialog>
 
-            <Dialog open={cancelModal} onOpenChange={setCancelModal}>
+            {/* Modal de Deleção */}
+            <Dialog open={deleteModal} onOpenChange={setDeleteModal}>
                 <DialogContent className="sm:max-w-[425px]">
                     <DialogHeader>
-                        <DialogTitle>Cancelar Consulta</DialogTitle>
+                        <DialogTitle>Deletar Consulta</DialogTitle>
-                        <DialogDescription>Tem certeza que deseja cancelar a consulta de {selectedAppointment?.patientName} com {selectedAppointment?.doctor}?</DialogDescription>
+                        <DialogDescription>
+                            Tem certeza que deseja deletar a consulta de <strong>{selectedAppointment?.patient.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="Por favor, informe o motivo do cancelamento... (obrigatório)" value={cancelReason} onChange={(e) => setCancelReason(e.target.value)} required className={`min-h-[100px] ${!cancelReason.trim() && cancelModal ? "border-red-300 focus:border-red-500" : ""}`} />
-                            <p className="text-xs text-gray-500">Mínimo de 10 caracteres. Este campo é obrigatório.</p>
-                        </div>
-                    </div>
                     <DialogFooter>
-                        <Button variant="outline" onClick={() => setCancelModal(false)}>
+                        <Button variant="outline" onClick={() => setDeleteModal(false)}>Cancelar</Button>
-                            Voltar
+                        <Button variant="destructive" onClick={confirmDelete}>Confirmar Deleção</Button>
-                        </Button>
-                        <Button variant="destructive" onClick={confirmCancel} disabled={!cancelReason.trim() || cancelReason.trim().length < 10}>
-                            Confirmar Cancelamento
-                        </Button>
                     </DialogFooter>
                 </DialogContent>
             </Dialog>