consultas paciente e listagem das consultas para paciente

app/patient/appointments/page.tsx

@@ -2,98 +2,92 @@
 
 import { useState, useEffect } from "react";
 import PatientLayout from "@/components/patient-layout";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } 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 { Calendar, Clock, CalendarDays, X } from "lucide-react";
-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";
+// Tipagem correta para o usuário
-
+interface UserProfile {
-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;
+  phone?: string;
-        avatar_url: string | null;
+  avatar_url?: string;
-        disabled: boolean;
-        created_at: string | null;
-        updated_at: string | null;
-    };
-    roles: string[];
-    permissions: UserPermissions;
 }
 
-export default function PatientAppointments() {
+interface User {
-    const [appointments, setAppointments] = useState<any[]>([]);
+  user: {
+    id: string;
+    email: string;
+  };
+  profile: UserProfile;
+  roles: string[];
+  permissions?: any;
+}
+
+interface Appointment {
+  id: string;
+  doctor_id: string;
+  scheduled_at: string;
+  status: string;
+  doctorName?: string;
+}
+
+export default function PatientAppointmentsPage() {
+  const [appointments, setAppointments] = useState<Appointment[]>([]);
   const [isLoading, setIsLoading] = useState(true);
-    const [selectedAppointment, setSelectedAppointment] = useState<any>(null);
+  const [userData, setUserData] = useState<User | null>(null);
-    const [userData, setUserData] = useState<UserData>();
 
-    // Modais
+  // --- Busca o usuário logado ---
-    const [rescheduleModal, setRescheduleModal] = useState(false);
+  const fetchUser = async () => {
-    const [cancelModal, setCancelModal] = useState(false);
+    try {
+      const user: User = await usersService.getMe();
+      if (!user.roles.includes("patient") && !user.roles.includes("user")) {
+        toast.error("Apenas pacientes podem visualizar suas consultas.");
+        setIsLoading(false);
+        return null;
+      }
+      setUserData(user);
+      return user;
+    } catch (err) {
+      console.error("Erro ao buscar usuário logado:", err);
+      toast.error("Não foi possível identificar o usuário logado.");
+      setIsLoading(false);
+      return null;
+    }
+  };
 
-    // Formulário de reagendamento/cancelamento
+  // --- Busca consultas do paciente ---
-    const [rescheduleData, setRescheduleData] = useState({ date: "", time: "", reason: "" });
+  const fetchAppointments = async (patientId: string) => {
-    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 queryParams = `patient_id=eq.${patientId}&order=scheduled_at.desc`;
-            const appointmentList = await appointmentsService.search_appointment(queryParams);
+      const appointmentsList: Appointment[] = await appointmentsService.search_appointment(queryParams);
-            const patientList = await patientsService.list();
-            const doctorList = await doctorsService.list();
 
-            const user = await usersService.getMe();
+      // Buscar nome do médico para cada consulta
-            setUserData(user);
+      const appointmentsWithDoctor = await Promise.all(
+        appointmentsList.map(async (apt) => {
+          let doctorName = apt.doctor_id;
+          if (apt.doctor_id) {
+            try {
+              const doctorInfo = await usersService.full_data(apt.doctor_id);
+              doctorName = doctorInfo?.profile?.full_name || apt.doctor_id;
+            } catch (err) {
+              console.error("Erro ao buscar nome do médico:", err);
+            }
+          }
+          return { ...apt, doctorName };
+        })
+      );
 
-            const doctorMap = new Map(doctorList.map((d: any) => [d.id, d]));
+      setAppointments(appointmentsWithDoctor);
-            const patientMap = new Map(patientList.map((p: any) => [p.id, p]));
+    } catch (err) {
-
+      console.error("Erro ao carregar consultas:", err);
-            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);
@@ -101,7 +95,12 @@ export default function PatientAppointments() {
   };
 
   useEffect(() => {
-        fetchData();
+    (async () => {
+      const user = await fetchUser();
+      if (user?.user.id) {
+        await fetchAppointments(user.user.id);
+      }
+    })();
   }, []);
 
   const getStatusBadge = (status: string) => {
@@ -121,204 +120,67 @@ export default function PatientAppointments() {
     }
   };
 
-    const handleReschedule = (appointment: any) => {
+  const handleReschedule = (apt: Appointment) => {
-        setSelectedAppointment(appointment);
+    toast.info(`Funcionalidade de reagendamento da consulta ${apt.id} ainda não implementada`);
-        setRescheduleData({ date: "", time: "", reason: "" });
-        setRescheduleModal(true);
   };
 
-    const handleCancel = (appointment: any) => {
+  const handleCancel = (apt: Appointment) => {
-        setSelectedAppointment(appointment);
+    toast.info(`Funcionalidade de cancelamento da consulta ${apt.id} ainda não implementada`);
-        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>
+            <p>Carregando consultas...</p>
-                    ) : appointments.length > 0 ? (
+          ) : appointments.length === 0 ? (
-                        appointments.map((appointment) => (
+            <p className="text-gray-600">Você ainda não possui consultas agendadas.</p>
-                            <Card key={appointment.id}>
+          ) : (
-                                <CardHeader>
+            appointments.map((apt) => (
-                                    <div className="flex justify-between items-start">
+              <Card key={apt.id}>
+                <CardHeader className="flex justify-between items-start">
                   <div>
-                                            <CardTitle className="text-lg">{appointment.doctor.full_name}</CardTitle>
+                    <CardTitle className="text-lg">{apt.doctorName}</CardTitle>
-                                            <CardDescription>{appointment.doctor.specialty}</CardDescription>
+                    <CardDescription>Especialidade: N/A</CardDescription>
-                                        </div>
-                                        {getStatusBadge(appointment.status)}
                   </div>
+                  {getStatusBadge(apt.status)}
                 </CardHeader>
-                                <CardContent>
+                <CardContent className="grid md:grid-cols-2 gap-3 text-sm text-gray-700">
-                                    <div className="grid md:grid-cols-2 gap-3">
+                  <div className="space-y-2">
-                                        <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" })}
+                      {new Date(apt.scheduled_at).toLocaleDateString("pt-BR")}
                     </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", {
+                      {new Date(apt.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)}>
+                    {apt.status !== "cancelled" && (
-                                                <CalendarDays className="mr-2 h-4 w-4" />
+                      <>
-                                                Reagendar
+                        <Button variant="outline" size="sm" onClick={() => handleReschedule(apt)}>
+                          <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)}>
+                        <Button variant="destructive" size="sm" onClick={() => handleCancel(apt)}>
-                                                <X className="mr-2 h-4 w-4" />
+                          <X className="mr-2 h-4 w-4" /> Cancelar
-                                                Cancelar
                         </Button>
-                                        </div>
+                      </>
                     )}
+                  </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>
   );
 }

app/patient/schedule/page.tsx

@@ -1,156 +1,242 @@
 "use client";
 
+import { usersService } from "services/usersApi.mjs";
+import { doctorsService } from "services/doctorsApi.mjs";
+import { appointmentsService } from "services/appointmentsApi.mjs";
+import { AvailabilityService } from "services/availabilityApi.mjs";
+
 import { useState, useEffect, useCallback } from "react";
 import { Calendar, Clock, User } from "lucide-react";
 import PatientLayout from "@/components/patient-layout";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
-import { doctorsService } from "services/doctorsApi.mjs";
+
+const API_URL = " https://yuanqfswhberkoevtmfr.supabase.co/";
 
 interface Doctor {
   id: string;
   full_name: string;
   specialty: string;
-    phone_mobile: string;
 }
 
-const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
+interface Disponibilidade {
+  weekday: string;
+  start_time: string;
+  end_time: string;
+  slot_minutes?: number;
+}
 
 export default function ScheduleAppointment() {
   const [selectedDoctor, setSelectedDoctor] = useState("");
   const [selectedDate, setSelectedDate] = useState("");
   const [selectedTime, setSelectedTime] = useState("");
-    const [notes, setNotes] = useState("");
+  const [doctors, setDoctors] = useState<Doctor[]>([]);
+  const [availableTimes, setAvailableTimes] = useState<string[]>([]);
+  const [loadingSlots, setLoadingSlots] = useState(false);
+  const [loadingDoctors, setLoadingDoctors] = useState(true);
 
-    // novos campos
   const [tipoConsulta, setTipoConsulta] = useState("presencial");
   const [duracao, setDuracao] = useState("30");
-    const [convenio, setConvenio] = useState("");
+  const [notes, setNotes] = useState("");
-    const [queixa, setQueixa] = useState("");
-    const [obsPaciente, setObsPaciente] = useState("");
-    const [obsInternas, setObsInternas] = useState("");
-
-    const [doctors, setDoctors] = useState<Doctor[]>([]);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
 
   const fetchDoctors = useCallback(async () => {
-        setLoading(true);
+    setLoadingDoctors(true);
-        setError(null);
     try {
       const data: Doctor[] = await doctorsService.list();
-            console.log(data);
       setDoctors(data || []);
-        } catch (e: any) {
+    } catch (e) {
-            console.error("Erro ao carregar lista de médicos:", e);
+      console.error("Erro ao buscar médicos:", e);
-            setError("Não foi possível carregar a lista de médicos. Verifique a conexão com a API.");
-            setDoctors([]);
     } finally {
-            setLoading(false);
+      setLoadingDoctors(false);
     }
   }, []);
 
+  const fetchAvailableSlots = useCallback(
+    async (doctorId: string, date: string) => {
+      if (!doctorId || !date) return;
+      setLoadingSlots(true);
+      setAvailableTimes([]);
+
+      try {
+        const disponibilidades: Disponibilidade[] =
+          await AvailabilityService.listById(doctorId);
+        const consultas = await appointmentsService.search_appointment(
+          `doctor_id=eq.${doctorId}&scheduled_at=gte.${date}&scheduled_at=lt.${date}T23:59:59`
+        );
+
+        const diaJS = new Date(date).getDay();
+        // Ajuste: Sunday = 0 -> API pode esperar 1-7
+        const diaAPI = diaJS === 0 ? 7 : diaJS;
+
+        console.log("Disponibilidades recebidas: ", disponibilidades);
+        console.log("Consultas do dia: ", consultas);
+
+        const disponibilidadeDia = disponibilidades.find(
+          (d: Disponibilidade) => Number(diaAPI) === getWeekdayNumber(d.weekday)
+        );
+
+        if (!disponibilidadeDia) {
+          console.log("Nenhuma disponibilidade para este dia");
+          setAvailableTimes([]);
+          setLoadingSlots(false);
+          return;
+        }
+
+        const [startHour, startMin] = disponibilidadeDia.start_time
+          .split(":")
+          .map(Number);
+        const [endHour, endMin] = disponibilidadeDia.end_time
+          .split(":")
+          .map(Number);
+        const slot = disponibilidadeDia.slot_minutes || 30;
+
+        const horariosGerados: string[] = [];
+        let atual = new Date(date);
+        atual.setHours(startHour, startMin, 0, 0);
+
+        const end = new Date(date);
+        end.setHours(endHour, endMin, 0, 0);
+
+        while (atual < end) {
+          horariosGerados.push(atual.toTimeString().slice(0, 5));
+          atual = new Date(atual.getTime() + slot * 60 * 1000);
+        }
+
+        const ocupados = consultas.map((c: any) =>
+          c.scheduled_at.split("T")[1].slice(0, 5)
+        );
+        const livres = horariosGerados.filter((h) => !ocupados.includes(h));
+
+        setAvailableTimes(livres);
+      } catch (err) {
+        console.error(err);
+        setAvailableTimes([]);
+      } finally {
+        setLoadingSlots(false);
+      }
+    },
+    []
+  );
+
+  const getWeekdayNumber = (weekday: string) => {
+    // Converte weekday API para número: 1=Monday ... 7=Sunday
+    switch (weekday.toLowerCase()) {
+      case "monday":
+        return 1;
+      case "tuesday":
+        return 2;
+      case "wednesday":
+        return 3;
+      case "thursday":
+        return 4;
+      case "friday":
+        return 5;
+      case "saturday":
+        return 6;
+      case "sunday":
+        return 7;
+      default:
+        return 0;
+    }
+  };
+
   useEffect(() => {
     fetchDoctors();
   }, [fetchDoctors]);
 
-    const availableTimes = ["08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30"];
+  useEffect(() => {
+    if (selectedDoctor && selectedDate) {
+      fetchAvailableSlots(selectedDoctor, selectedDate);
+    } else {
+      setAvailableTimes([]);
+    }
+    setSelectedTime("");
+  }, [selectedDoctor, selectedDate, fetchAvailableSlots]);
 
-    const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
-        const doctorDetails = doctors.find((d) => d.id === selectedDoctor);
+    if (!selectedDoctor || !selectedDate || !selectedTime) {
-        const patientDetails = {
+      alert("Selecione médico, data e horário.");
-            id: "P001",
-            full_name: "Paciente Exemplo Único",
-            location: "Clínica Geral",
-            phone: "(11) 98765-4321",
-        };
-
-        if (!patientDetails || !doctorDetails) {
-            alert("Erro: Selecione o médico ou dados do paciente indisponíveis.");
       return;
     }
 
-        const newAppointment = {
+    const doctor = doctors.find((d) => d.id === selectedDoctor);
-            id: new Date().getTime(),
+    const scheduledISO = `${selectedDate}T${selectedTime}:00Z`;
-            patientName: patientDetails.full_name,
+
-            doctor: doctorDetails.full_name,
+    const paciente = await usersService.getMe();
-            specialty: doctorDetails.specialty,
+    const body = {
-            date: selectedDate,
+      doctor_id: doctor?.id,
-            time: selectedTime,
+      patient_id: paciente.user.id,
-            tipoConsulta,
+      scheduled_at: scheduledISO,
-            duracao,
+      duration_minutes: Number(duracao),
-            convenio,
+      created_by: paciente.user.id,
-            queixa,
-            obsPaciente,
-            obsInternas,
-            notes,
-            status: "agendada",
-            phone: patientDetails.phone,
     };
 
-        const storedAppointmentsRaw = localStorage.getItem(APPOINTMENTS_STORAGE_KEY);
+    try {
-        const currentAppointments = storedAppointmentsRaw ? JSON.parse(storedAppointmentsRaw) : [];
+      const res = await fetch(`${API_URL}/appointments`, {
-        const updatedAppointments = [...currentAppointments, newAppointment];
+        method: "POST",
-        localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(updatedAppointments));
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
 
-        alert(`Consulta com ${doctorDetails.full_name} agendada com sucesso!`);
+      if (!res.ok) throw new Error("Erro ao agendar consulta");
 
-        // resetar campos
+      alert("Consulta agendada com sucesso!");
       setSelectedDoctor("");
       setSelectedDate("");
       setSelectedTime("");
-        setNotes("");
+      setAvailableTimes([]);
-        setTipoConsulta("presencial");
+    } catch (err) {
-        setDuracao("30");
+      console.error(err);
-        setConvenio("");
+      alert("Falha ao agendar consulta");
-        setQueixa("");
+    }
-        setObsPaciente("");
-        setObsInternas("");
   };
 
   return (
     <PatientLayout>
       <div className="space-y-6">
-                <div>
+        <h1 className="text-2xl font-bold">Agendar Consulta</h1>
-                    <h1 className="text-3xl font-bold text-gray-900">Agendar Consulta</h1>
-                    <p className="text-gray-600">Escolha o médico, data e horário para sua consulta</p>
-                </div>
 
-                <div className="grid lg:grid-cols-3 gap-6">
-                    <div className="lg:col-span-2">
         <Card>
           <CardHeader>
             <CardTitle>Dados da Consulta</CardTitle>
-                                <CardDescription>Preencha as informações para agendar sua consulta</CardDescription>
+            <CardDescription>Escolha o médico, data e horário</CardDescription>
           </CardHeader>
           <CardContent>
-                                <form onSubmit={handleSubmit} className="space-y-6">
+            <form onSubmit={handleSubmit} className="space-y-4">
               {/* Médico */}
               <div className="space-y-2">
-                                        <Label htmlFor="doctor">Médico</Label>
+                <Label>Médico</Label>
                 <Select value={selectedDoctor} onValueChange={setSelectedDoctor}>
                   <SelectTrigger>
-                                                <SelectValue placeholder="Selecione um médico" />
+                    <SelectValue placeholder="Selecione o médico" />
                   </SelectTrigger>
                   <SelectContent>
-                                                {loading ? (
+                    {loadingDoctors ? (
                       <SelectItem value="loading" disabled>
-                                                        Carregando médicos...
+                        Carregando...
-                                                    </SelectItem>
-                                                ) : error ? (
-                                                    <SelectItem value="error" disabled>
-                                                        Erro ao carregar
                       </SelectItem>
                     ) : (
-                                                    doctors.map((doctor) => (
+                      doctors.map((d: Doctor) => (
-                                                        <SelectItem key={doctor.id} value={doctor.id}>
+                        <SelectItem key={d.id} value={d.id}>
-                                                            {doctor.full_name} - {doctor.specialty}
+                          {d.full_name} - {d.specialty}
                         </SelectItem>
                       ))
                     )}
@@ -158,135 +244,118 @@ export default function ScheduleAppointment() {
                 </Select>
               </div>
 
-                                    {/* Data e horário */}
+              {/* Data */}
-                                    <div className="grid md:grid-cols-2 gap-4">
               <div className="space-y-2">
-                                            <Label htmlFor="date">Data</Label>
+                <Label>Data</Label>
-                                            <Input id="date" type="date" value={selectedDate} onChange={(e) => setSelectedDate(e.target.value)} min={new Date().toISOString().split("T")[0]} />
+                <Input
+                  type="date"
+                  value={selectedDate}
+                  onChange={(e) => setSelectedDate(e.target.value)}
+                  min={new Date().toISOString().split("T")[0]}
+                  disabled={!selectedDoctor}
+                />
               </div>
 
+              {/* Horário */}
               <div className="space-y-2">
-                                            <Label htmlFor="time">Horário</Label>
+                <Label>Horário</Label>
-                                            <Select value={selectedTime} onValueChange={setSelectedTime}>
+                <Select
+                  value={selectedTime}
+                  onValueChange={setSelectedTime}
+                  disabled={loadingSlots || availableTimes.length === 0}
+                >
                   <SelectTrigger>
-                                                    <SelectValue placeholder="Selecione um horário" />
+                    <SelectValue
+                      placeholder={
+                        loadingSlots
+                          ? "Carregando horários..."
+                          : availableTimes.length === 0
+                          ? "Nenhum horário disponível"
+                          : "Selecione o horário"
+                      }
+                    />
                   </SelectTrigger>
                   <SelectContent>
-                                                    {availableTimes.map((time) => (
+                    {availableTimes.map((h) => (
-                                                        <SelectItem key={time} value={time}>
+                      <SelectItem key={h} value={h}>
-                                                            {time}
+                        {h}
                       </SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
               </div>
-                                    </div>
+
-                                    {/* Tipo e Duração */}
+              {/* Tipo e duração */}
-                                    <div className="grid md:grid-cols-2 gap-4">
+              <div className="grid grid-cols-2 gap-4">
-                                        <div className="space-y-2">
+                <div>
-                                            <Label htmlFor="tipoConsulta">Tipo de Consulta</Label>
+                  <Label>Tipo</Label>
                   <Select value={tipoConsulta} onValueChange={setTipoConsulta}>
-                                                <SelectTrigger id="tipoConsulta">
+                    <SelectTrigger>
-                                                    <SelectValue placeholder="Selecione o tipo" />
+                      <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
                       <SelectItem value="presencial">Presencial</SelectItem>
-                                                    <SelectItem value="online">Telemedicina</SelectItem>
+                      <SelectItem value="online">Online</SelectItem>
                     </SelectContent>
                   </Select>
                 </div>
+                <div>
+                  <Label>Duração (min)</Label>
+                  <Input
+                    type="number"
+                    value={duracao}
+                    onChange={(e) => setDuracao(e.target.value)}
+                    min={10}
+                    max={120}
+                  />
+                </div>
+              </div>
 
+              {/* Observações */}
               <div className="space-y-2">
-                                            <Label htmlFor="duracao">Duração (minutos)</Label>
+                <Label>Observações</Label>
-                                            <Input id="duracao" type="number" min={10} max={120} value={duracao} onChange={(e) => setDuracao(e.target.value)} />
+                <Textarea value={notes} onChange={(e) => setNotes(e.target.value)} />
-                                        </div>
               </div>
 
-                                    {/* Convênio */}
+              <Button
-                                    <div className="space-y-2">
+                type="submit"
-                                        <Label htmlFor="convenio">Convênio (opcional)</Label>
+                disabled={!selectedDoctor || !selectedDate || !selectedTime}
-                                        <Input id="convenio" placeholder="Nome do convênio do paciente" value={convenio} onChange={(e) => setConvenio(e.target.value)} />
+                className="w-full"
-                                    </div>
+              >
-
+                Agendar
-                                    {/* Queixa Principal */}
-                                    <div className="space-y-2">
-                                        <Label htmlFor="queixa">Queixa Principal (opcional)</Label>
-                                        <Textarea id="queixa" placeholder="Descreva brevemente o motivo da consulta..." value={queixa} onChange={(e) => setQueixa(e.target.value)} />
-                                    </div>
-
-                                    {/* Observações do Paciente */}
-                                    <div className="space-y-2">
-                                        <Label htmlFor="obsPaciente">Observações do Paciente (opcional)</Label>
-                                        <Textarea id="obsPaciente" placeholder="Anotações relevantes informadas pelo paciente..." value={obsPaciente} onChange={(e) => setObsPaciente(e.target.value)} />
-                                    </div>
-
-                                    {/* Observações Internas */}
-                                    <div className="space-y-2">
-                                        <Label htmlFor="obsInternas">Observações Internas (opcional)</Label>
-                                        <Textarea id="obsInternas" placeholder="Anotações para a equipe da clínica..." value={obsInternas} onChange={(e) => setObsInternas(e.target.value)} />
-                                    </div>
-
-                                    {/* Observações gerais */}
-                                    <div className="space-y-2">
-                                        <Label htmlFor="notes">Observações gerais (opcional)</Label>
-                                        <Textarea id="notes" placeholder="Descreva brevemente o motivo da consulta ou observações importantes" value={notes} onChange={(e) => setNotes(e.target.value)} rows={3} />
-                                    </div>
-
-                                    {/* Botão */}
-                                    <Button type="submit" className="w-full" disabled={!selectedDoctor || !selectedDate || !selectedTime}>
-                                        Agendar Consulta
               </Button>
             </form>
           </CardContent>
         </Card>
-                    </div>
 
         {/* Resumo */}
-                    <div className="space-y-6">
         <Card>
           <CardHeader>
             <CardTitle className="flex items-center">
-                                    <Calendar className="mr-2 h-5 w-5" />
+              <Calendar className="mr-2 h-5 w-5" /> Resumo
-                                    Resumo
             </CardTitle>
           </CardHeader>
-                            <CardContent className="space-y-4">
+          <CardContent>
             {selectedDoctor && (
-                                    <div className="flex items-center space-x-2">
+              <p>
-                                        <User className="h-4 w-4 text-gray-500" />
+                <User className="inline-block w-4 h-4 mr-1" />
-                                        <span className="text-sm">{doctors.find((d) => d.id === selectedDoctor)?.full_name}</span>
+                {doctors.find((d) => d.id === selectedDoctor)?.full_name}
-                                    </div>
+              </p>
             )}
-
             {selectedDate && (
-                                    <div className="flex items-center space-x-2">
+              <p>
-                                        <Calendar className="h-4 w-4 text-gray-500" />
+                <Calendar className="inline-block w-4 h-4 mr-1" />
-                                        <span className="text-sm">{new Date(selectedDate).toLocaleDateString("pt-BR")}</span>
+                {new Date(selectedDate).toLocaleDateString("pt-BR")}
-                                    </div>
+              </p>
             )}
-
             {selectedTime && (
-                                    <div className="flex items-center space-x-2">
+              <p>
-                                        <Clock className="h-4 w-4 text-gray-500" />
+                <Clock className="inline-block w-4 h-4 mr-1" />
-                                        <span className="text-sm">{selectedTime}</span>
+                {selectedTime}
-                                    </div>
+              </p>
             )}
           </CardContent>
         </Card>
-
-                        <Card>
-                            <CardHeader>
-                                <CardTitle>Informações Importantes</CardTitle>
-                            </CardHeader>
-                            <CardContent className="text-sm text-gray-600 space-y-2">
-                                <p>• Chegue com 15 minutos de antecedência</p>
-                                <p>• Traga documento com foto</p>
-                                <p>• Traga carteirinha do convênio</p>
-                                <p>• Traga exames anteriores, se houver</p>
-                            </CardContent>
-                        </Card>
-                    </div>
-                </div>
       </div>
     </PatientLayout>
   );

components/doctor-layout.tsx

@@ -145,12 +145,7 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
       label: "Consultas",
       // Botão para página de consultas marcadas do médico atual
     },
-    {
+    
-      href: "/doctor/medicos/editorlaudo",
-      icon: Clock,
-      label: "Editor de Laudo",
-      // Botão para página do editor de laudo
-    },
     {
       href: "/doctor/medicos",
       icon: User,

services/availabilityApi.mjs

@@ -6,4 +6,14 @@ export const AvailabilityService = {
     create: (data) => api.post("/rest/v1/doctor_availability", data),
     update: (id, data) => api.patch(`/rest/v1/doctor_availability?id=eq.${id}`, data),
     delete: (id) => api.delete(`/rest/v1/doctor_availability?id=eq.${id}`),
+    
 };
+export async function getDisponibilidadeByMedico(idMedico) {
+  try {
+    const response = await api.get(`/disponibilidade/${idMedico}`);
+    return response.data;
+  } catch (error) {
+    console.error("Erro ao buscar disponibilidade do médico:", error);
+    return [];
+  }
+}