Disponibilidade completa

app/doctor/dashboard/page.tsx

@@ -4,12 +4,16 @@ import DoctorLayout from "@/components/doctor-layout";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Calendar, Clock, User, Trash2 } from "lucide-react";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+
 import Link from "next/link";
 import { useEffect, useState } from "react";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import { toast } from "@/hooks/use-toast";
+
 import { AvailabilityService } from "@/services/availabilityApi.mjs";
 import { exceptionsService } from "@/services/exceptionApi.mjs";
-import { toast } from "@/hooks/use-toast";
+import { doctorsService } from "@/services/doctorsApi.mjs";
+import { usersService } from "@/services/usersApi.mjs";
 
 type Availability = {
     id: string;
@@ -30,15 +34,86 @@ type Schedule = {
     weekday: object;
 };
 
+type Doctor = {
+  id: string;
+  user_id: string | null;
+  crm: string;
+  crm_uf: string;
+  specialty: string;
+  full_name: string;
+  cpf: string;
+  email: string;
+  phone_mobile: string | null;
+  phone2: string | null;
+  cep: string | null;
+  street: string | null;
+  number: string | null;
+  complement: string | null;
+  neighborhood: string | null;
+  city: string | null;
+  state: string | null;
+  birth_date: string | null;
+  rg: string | null;
+  active: boolean;
+  created_at: string;
+  updated_at: string;
+  created_by: string;
+  updated_by: string | null;
+  max_days_in_advance: number;
+  rating: number | null;
+}
+
+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;
+}
+
+interface Exception {
+  id: string; // id da exceção
+  doctor_id: string;
+  date: string; // formato YYYY-MM-DD
+  start_time: string | null; // null = dia inteiro
+  end_time: string | null;   // null = dia inteiro
+  kind: "bloqueio" | "disponibilidade"; // tipos conhecidos
+  reason: string | null; // pode ser null
+  created_at: string; // timestamp ISO
+  created_by: string;
+}
+
 export default function PatientDashboard() {
-    var userInfo;
+    const [loggedDoctor, setLoggedDoctor] = useState<Doctor>();
-    const doctorId = "3bb9ee4a-cfdd-4d81-b628-383907dfa225"; //userInfo.id;
+    const [userData, setUserData] = useState<UserData>();
     const [availability, setAvailability] = useState<any | null>(null);
-    const [exceptions, setExceptions] = useState<any | null>(null);
+    const [exceptions, setExceptions] = useState<Exception[]>([]);
     const [schedule, setSchedule] = useState<Record<string, { start: string; end: string }[]>>({});
-    const formatTime = (time: string) => time.split(":").slice(0, 2).join(":");
+    const formatTime = (time?: string | null) => time?.split(":")?.slice(0, 2).join(":") ?? "";
     const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-    const [patientToDelete, setPatientToDelete] = useState<string | null>(null);
+    const [exceptionToDelete, setExceptionToDelete] = useState<string | null>(null);
     const [error, setError] = useState<string | null>(null);
 
     // Mapa de tradução
@@ -53,34 +128,53 @@ export default function PatientDashboard() {
     };
 
     useEffect(() => {
-        userInfo = JSON.parse(localStorage.getItem("user_info") || "{}")
   const fetchData = async () => {
-            userInfo = JSON.parse(localStorage.getItem("user_info") || "{}");
     try {
-                // fetch para disponibilidade
+      const doctorsList: Doctor[] = await doctorsService.list();
-                const response = await AvailabilityService.list();
+      const doctor = doctorsList[0];
-                const filteredResponse = response.filter((disp: { doctor_id: any }) => disp.doctor_id == doctorId);
+
-                setAvailability(filteredResponse);
+      // Salva no estado
-                // fetch para exceções
+      setLoggedDoctor(doctor);
-                const res = await exceptionsService.list();
+
-                const filteredRes = res.filter((disp: { doctor_id: any }) => disp.doctor_id == doctorId);
+      // Busca disponibilidade
-                setExceptions(filteredRes);
+      const availabilityList = await AvailabilityService.list();
+      
+      // Filtra já com a variável local
+      const filteredAvail = availabilityList.filter(
+        (disp: { doctor_id: string }) => disp.doctor_id === doctor?.id
+      );
+      setAvailability(filteredAvail);
+
+      // Busca exceções
+      const exceptionsList = await exceptionsService.list();
+      const filteredExc = exceptionsList.filter(
+        (exc: { doctor_id: string }) => exc.doctor_id === doctor?.id
+      );
+      console.log(exceptionsList)
+      setExceptions(filteredExc);
+
     } catch (e: any) {
       alert(`${e?.error} ${e?.message}`);
     }
   };
+
   fetchData();
 }, []);
 
-    const openDeleteDialog = (patientId: string) => {
+    // Função auxiliar para filtrar o id do doctor correspondente ao user logado
-        setPatientToDelete(patientId);
+    function findDoctorById(id: string, doctors: Doctor[]) {
+        return doctors.find((doctor) => doctor.user_id === id);
+    }
+    
+    const openDeleteDialog = (exceptionId: string) => {
+        setExceptionToDelete(exceptionId);
         setDeleteDialogOpen(true);
     };
 
-    const handleDeletePatient = async (patientId: string) => {
+    const handleDeleteException = async (ExceptionId: string) => {
-        // Remove from current list (client-side deletion)
         try {
-            const res = await exceptionsService.delete(patientId);
+            alert(ExceptionId)
+            const res = await exceptionsService.delete(ExceptionId);
 
             let message = "Exceção deletada com sucesso";
             try {
@@ -96,7 +190,7 @@ export default function PatientDashboard() {
                 description: message,
             });
 
-            setExceptions((prev: any[]) => prev.filter((p) => String(p.id) !== String(patientId)));
+            setExceptions((prev: Exception[]) => prev.filter((p) => String(p.id) !== String(ExceptionId)));
         } catch (e: any) {
             toast({
                 title: "Erro",
@@ -104,7 +198,7 @@ export default function PatientDashboard() {
             });
         }
         setDeleteDialogOpen(false);
-        setPatientToDelete(null);
+        setExceptionToDelete(null);
     };
 
     function formatAvailability(data: Availability[]) {
@@ -258,12 +352,13 @@ export default function PatientDashboard() {
 
                         <CardContent className="space-y-4 grid md:grid-cols-7 gap-2">
                             {exceptions && exceptions.length > 0 ? (
-                                exceptions.map((ex: any) => {
+                                exceptions.map((ex: Exception) => {
                                     // Formata data e hora
                                     const date = new Date(ex.date).toLocaleDateString("pt-BR", {
                                         weekday: "long",
                                         day: "2-digit",
                                         month: "long",
+                                        timeZone: "UTC"
                                     });
 
                                     const startTime = formatTime(ex.start_time);
@@ -275,7 +370,9 @@ export default function PatientDashboard() {
                                                 <div className="text-center">
                                                     <p className="font-semibold capitalize">{date}</p>
                                                    <p className="text-sm text-gray-600">
-                                                        {startTime} - {endTime} <br /> -
+                                                        {startTime && endTime
+                                                        ? `${startTime} - ${endTime}`
+                                                        : "Dia todo"}
                                                     </p>
                                                 </div>
                                                 <div className="text-center mt-2">
@@ -301,11 +398,11 @@ export default function PatientDashboard() {
                     <AlertDialogContent>
                         <AlertDialogHeader>
                             <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
-                            <AlertDialogDescription>Tem certeza que deseja excluir este paciente? Esta ação não pode ser desfeita.</AlertDialogDescription>
+                            <AlertDialogDescription>Tem certeza que deseja excluir esta exceção? Esta ação não pode ser desfeita.</AlertDialogDescription>
                         </AlertDialogHeader>
                         <AlertDialogFooter>
                             <AlertDialogCancel>Cancelar</AlertDialogCancel>
-                            <AlertDialogAction onClick={() => patientToDelete && handleDeletePatient(patientToDelete)} className="bg-red-600 hover:bg-red-700">
+                            <AlertDialogAction onClick={() => exceptionToDelete && handleDeleteException(exceptionToDelete)} className="bg-red-600 hover:bg-red-700">
                                 Excluir
                             </AlertDialogAction>
                         </AlertDialogFooter>

app/doctor/disponibilidade/excecoes/page.tsx

@@ -18,9 +18,36 @@ import { exceptionsService } from "@/services/exceptionApi.mjs";
 // IMPORTAR O COMPONENTE CALENDÁRIO DA SHADCN
 import { Calendar } from "@/components/ui/calendar";
 import { format } from "date-fns"; // Usaremos o date-fns para formatação e comparação de datas
-import { userInfo } from "os";
+import { doctorsService } from "@/services/doctorsApi.mjs";
 
-const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
+type Doctor = {
+  id: string;
+  user_id: string | null;
+  crm: string;
+  crm_uf: string;
+  specialty: string;
+  full_name: string;
+  cpf: string;
+  email: string;
+  phone_mobile: string | null;
+  phone2: string | null;
+  cep: string | null;
+  street: string | null;
+  number: string | null;
+  complement: string | null;
+  neighborhood: string | null;
+  city: string | null;
+  state: string | null;
+  birth_date: string | null;
+  rg: string | null;
+  active: boolean;
+  created_at: string;
+  updated_at: string;
+  created_by: string;
+  updated_by: string | null;
+  max_days_in_advance: number;
+  rating: number | null;
+}
 
 // --- TIPAGEM DA CONSULTA SALVA NO LOCALSTORAGE ---
 interface LocalStorageAppointment {
@@ -35,8 +62,6 @@ interface LocalStorageAppointment {
     phone: string;
 }
 
-const LOGGED_IN_DOCTOR_NAME = "Dr. João Santos";
-
 // Função auxiliar para comparar se duas datas (Date objects) são o mesmo dia
 const isSameDay = (date1: Date, date2: Date) => {
     return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
@@ -49,17 +74,24 @@ export default function ExceptionPage() {
     const router = useRouter();
     const [filteredAppointments, setFilteredAppointments] = useState<LocalStorageAppointment[]>([]);
     const [isLoading, setIsLoading] = useState(false);
-    var userInfo;
+    const [loggedDoctor, setLoggedDoctor] = useState<Doctor>();
-    const doctorIdTemp = "3bb9ee4a-cfdd-4d81-b628-383907dfa225";
     const [tipo, setTipo] = useState<string>("");
    
     useEffect(() => {
-        userInfo = JSON.parse(localStorage.getItem("user_info") || "{}")
+      const fetchData = async () => {
-    })
+        try {
+          const doctorsList: Doctor[] = await doctorsService.list();
+          const doctor = doctorsList[0];
     
-    useEffect(() => {
+          // Salva no estado
-        userInfo = JSON.parse(localStorage.getItem("user_info") || "{}");
+          setLoggedDoctor(doctor);
-    });
+        } catch (e: any) {
+          alert(`${e?.error} ${e?.message}`);
+        }
+      };
+    
+      fetchData();
+    }, []);
 
     // NOVO ESTADO 1: Armazena os dias com consultas (para o calendário)
     const [bookedDays, setBookedDays] = useState<Date[]>([]);
@@ -75,11 +107,11 @@ export default function ExceptionPage() {
         const formData = new FormData(form);
 
         const apiPayload = {
-            doctor_id: doctorIdTemp,
+            doctor_id: loggedDoctor?.id,
-            created_by: doctorIdTemp,
+            created_by: loggedDoctor?.user_id,
             date: selectedCalendarDate ? format(selectedCalendarDate, "yyyy-MM-dd") : "",
-            start_time: ((formData.get("horarioEntrada") + ":00") as string) || undefined,
+            start_time: ((formData.get("horarioEntrada")?formData.get("horarioEntrada") + ":00":null) as string) || null,
-            end_time: ((formData.get("horarioSaida") + ":00") as string) || undefined,
+            end_time: ((formData.get("horarioSaida")?formData.get("horarioSaida") + ":00":null) as string) || null,
             kind: tipo || undefined,
             reason: formData.get("reason"),
         };
@@ -176,13 +208,13 @@ export default function ExceptionPage() {
                                                 <Label htmlFor="horarioEntrada" className="text-sm font-medium text-gray-700">
                                                     Horario De Entrada
                                                 </Label>
-                                                <Input type="time" id="horarioEntrada" name="horarioEntrada" required className="mt-1" />
+                                                <Input type="time" id="horarioEntrada" name="horarioEntrada" className="mt-1" />
                                             </div>
                                             <div>
                                                 <Label htmlFor="horarioSaida" className="text-sm font-medium text-gray-700">
                                                     Horario De Saida
                                                 </Label>
-                                                <Input type="time" id="horarioSaida" name="horarioSaida" required className="mt-1" />
+                                                <Input type="time" id="horarioSaida" name="horarioSaida" className="mt-1" />
                                             </div>
                                         </div>
 
@@ -196,7 +228,7 @@ export default function ExceptionPage() {
                                                 </SelectTrigger>
                                                 <SelectContent>
                                                     <SelectItem value="bloqueio">Bloqueio </SelectItem>
-                                                    <SelectItem value="liberacao">Liberação</SelectItem>
+                                                    <SelectItem value="disponibilidade_extra">Disponibilidade extra</SelectItem>
                                                 </SelectContent>
                                             </Select>
                                         </div>

app/doctor/disponibilidade/page.tsx

@@ -2,15 +2,24 @@
 
 import { useState, useEffect } from "react";
 import Link from "next/link";
+
 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 DoctorLayout from "@/components/doctor-layout";
+
 import { AvailabilityService } from "@/services/availabilityApi.mjs";
 import { usersService } from "@/services/usersApi.mjs";
+import { doctorsService } from "@/services/doctorsApi.mjs";
+
 import { toast } from "@/hooks/use-toast";
 import { useRouter } from "next/navigation";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Eye, Edit, Calendar, Trash2 } from "lucide-react";
+import { AvailabilityEditModal } from "@/components/ui/availability-edit-modal";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
 
 interface UserPermissions {
     isAdmin: boolean;
@@ -42,29 +51,195 @@ interface UserData {
     permissions: UserPermissions;
 }
 
+type Doctor = {
+  id: string;
+  user_id: string | null;
+  crm: string;
+  crm_uf: string;
+  specialty: string;
+  full_name: string;
+  cpf: string;
+  email: string;
+  phone_mobile: string | null;
+  phone2: string | null;
+  cep: string | null;
+  street: string | null;
+  number: string | null;
+  complement: string | null;
+  neighborhood: string | null;
+  city: string | null;
+  state: string | null;
+  birth_date: string | null;
+  rg: string | null;
+  active: boolean;
+  created_at: string;
+  updated_at: string;
+  created_by: string;
+  updated_by: string | null;
+  max_days_in_advance: number;
+  rating: number | null;
+}
+
+type Availability = {
+    id: string;
+    doctor_id: string;
+    weekday: string;
+    start_time: string;
+    end_time: string;
+    slot_minutes: number;
+    appointment_type: string;
+    active: boolean;
+    created_at: string;
+    updated_at: string;
+    created_by: string;
+    updated_by: string | null;
+};
+
 export default function AvailabilityPage() {
     const [error, setError] = useState<string | null>(null);
     const router = useRouter();
     const [isLoading, setIsLoading] = useState(false);
+    const [schedule, setSchedule] = useState<Record<string, { start: string; end: string }[]>>({});
+    const formatTime = (time?: string | null) => time?.split(":")?.slice(0, 2).join(":") ?? "";
     const [userData, setUserData] = useState<UserData>();
+    const [availability, setAvailability] = useState<any | null>(null);
+    const [doctorId, setDoctorId] = useState<string>();
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
     const [modalidadeConsulta, setModalidadeConsulta] = useState<string>("");
+    const [selectedAvailability, setSelectedAvailability] = useState<Availability | null>(null);
+    const [isModalOpen, setIsModalOpen] = useState(false);
     
-    useEffect(() => {
+    const selectAvailability = (schedule: { start: string; end: string;}, day: string) => {
+        const selected = availability.filter((a: Availability) =>
+            a.start_time === schedule.start &&
+            a.end_time === schedule.end &&
+            a.weekday === day
+        );
+        setSelectedAvailability(selected[0]);
+    }
+
+    const handleOpenModal = (schedule: { start: string; end: string;}, day: string) => {
+        selectAvailability(schedule, day)
+        setIsModalOpen(true);
+    };
+    
+    const handleCloseModal = () => {
+        setSelectedAvailability(null);
+        setIsModalOpen(false);
+    };
+
+    const handleEdit = async (formData:{ start_time: "", end_time: "", slot_minutes: "", appointment_type: "", id:""}) => {
+        if (isLoading) return;
+        setIsLoading(true);
+
+        const apiPayload = {
+            start_time: formData.start_time,
+            end_time: formData.end_time,
+            slot_minutes: formData.slot_minutes,
+            appointment_type: formData.appointment_type,
+        };
+        console.log(apiPayload);
+
+        try {
+            const res = await AvailabilityService.update(formData.id, apiPayload);
+            console.log(res);
+
+            let message = "disponibilidade editada com sucesso";
+            try {
+                if (!res[0].id) {
+                    throw new Error(`${res.error} ${res.message}` || "A API retornou erro");
+                } else {
+                    console.log(message);
+                }
+            } catch {}
+
+            toast({
+                title: "Sucesso",
+                description: message,
+            });
+            router.push("#")
+        } catch (err: any) {
+            toast({
+                title: "Erro",
+                description: err?.message || "Não foi possível editar a disponibilidade",
+            });
+        } finally {
+            setIsLoading(false);
+            handleCloseModal();
+            fetchData()
+        }
+    };
+
+        // Mapa de tradução
+    const weekdaysPT: Record<string, string> = {
+        sunday: "Domingo",
+        monday: "Segunda",
+        tuesday: "Terça",
+        wednesday: "Quarta",
+        thursday: "Quinta",
+        friday: "Sexta",
+        saturday: "Sábado",
+    };
     const fetchData = async () => {
             try {
-                const response = await AvailabilityService.list();
+                const loggedUser = await usersService.getMe();
-                console.log(response);
+                const doctorList = await doctorsService.list();
-                const user = await usersService.getMe();
+                setUserData(loggedUser);
-                console.log(user);
+                const doctor = findDoctorById(loggedUser.user.id, doctorList);
-                setUserData(user);
+                setDoctorId(doctor?.id);
+                console.log(doctor);
+                // Busca disponibilidade
+                const availabilityList = await AvailabilityService.list();
+              
+                // Filtra já com a variável local
+                const filteredAvail = availabilityList.filter(
+                (disp: { doctor_id: string }) => disp.doctor_id === doctor?.id
+                );
+                setAvailability(filteredAvail);
             } catch (e: any) {
                 alert(`${e?.error} ${e?.message}`);
             }
         };
 
+    useEffect(() => {        
         fetchData();
     }, []);
 
+    // Função auxiliar para filtrar o id do doctor correspondente ao user logado
+    function findDoctorById(id: string, doctors: Doctor[]) {
+        return doctors.find((doctor) => doctor.user_id === id);
+    }
+    
+    
+    function formatAvailability(data: Availability[]) {
+        // Agrupar os horários por dia da semana
+        const schedule = data.reduce((acc: any, item) => {
+            const { weekday, start_time, end_time } = item;
+            
+            // Se o dia ainda não existe, cria o array
+            if (!acc[weekday]) {
+                acc[weekday] = [];
+            }
+            
+            // Adiciona o horário do dia
+            acc[weekday].push({
+                start: start_time,
+                end: end_time,
+            });
+            
+            return acc;
+        }, {} as Record<string, { start: string; end: string }[]>);
+        
+        return schedule;
+    }
+    
+    useEffect(() => {
+        if (availability) {
+            const formatted = formatAvailability(availability);
+            setSchedule(formatted);
+        }
+    }, [availability]);
+
     const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
         if (isLoading) return;
@@ -73,7 +248,7 @@ export default function AvailabilityPage() {
         const formData = new FormData(form);
 
         const apiPayload = {
-            doctor_id: userData?.user.id,
+            doctor_id: doctorId,
             weekday: (formData.get("weekday") as string) || undefined,
             start_time: (formData.get("horarioEntrada") as string) || undefined,
             end_time: (formData.get("horarioSaida") as string) || undefined,
@@ -104,13 +279,47 @@ export default function AvailabilityPage() {
         } catch (err: any) {
             toast({
                 title: "Erro",
-                description: err?.message || "Não foi possível cadastrar o paciente",
+                description: err?.message || "Não foi possível criar a disponibilidade",
             });
         } finally {
             setIsLoading(false);
         }
     };
 
+    const openDeleteDialog = (schedule: { start: string; end: string;}, day: string) => {
+        selectAvailability(schedule, day)
+        setDeleteDialogOpen(true);
+    };
+
+    const handleDeleteAvailability = async (AvailabilityId: string) => {
+            try {
+                const res = await AvailabilityService.delete(AvailabilityId);
+    
+                let message = "Disponibilidade deletada com sucesso";
+                try {
+                    if (res) {
+                        throw new Error(`${res.error} ${res.message}` || "A API retornou erro");
+                    } else {
+                        console.log(message);
+                    }
+                } catch {}
+    
+                toast({
+                    title: "Sucesso",
+                    description: message,
+                });
+    
+                setAvailability((prev: Availability[]) => prev.filter((p) => String(p.id) !== String(AvailabilityId)));
+            } catch (e: any) {
+                toast({
+                    title: "Erro",
+                    description: e?.message || "Não foi possível deletar a disponibilidade",
+                });
+            }
+            setDeleteDialogOpen(false);
+            setSelectedAvailability(null);
+        };
+
     return (
         <DoctorLayout>
             <div className="space-y-6">
@@ -152,7 +361,7 @@ export default function AvailabilityPage() {
                                         </label>
                                         <label className="flex items-center gap-2">
                                             <input type="radio" name="weekday" value="saturday" className="text-blue-600" />
-                                            <span className="whitespace-nowrap text-sm">Sabado</span>
+                                            <span className="whitespace-nowrap text-sm">Sábado</span>
                                         </label>
                                         <label className="flex items-center gap-2">
                                             <input type="radio" name="weekday" value="sunday" className="text-blue-600" />
@@ -200,10 +409,11 @@ export default function AvailabilityPage() {
                         </div>
                     </div>
 
-                    <div className="flex justify-end gap-4">
+                    <div className="flex justify-between gap-4">
                         <Link href="/doctor/disponibilidade/excecoes">
-                            <Button variant="outline">Adicionar Exceção</Button>
+                            <Button variant="default">Adicionar Exceção</Button>
                         </Link>
+                        <div>
                             <Link href="/doctor/dashboard">
                                 <Button variant="outline">Cancelar</Button>
                             </Link>
@@ -211,8 +421,81 @@ export default function AvailabilityPage() {
                                 Salvar Disponibilidade
                             </Button>
                         </div>
-                </form>
                     </div>
+                </form>
+                <div>
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Horário Semanal</CardTitle>
+                            <CardDescription>Confira ou altere a sua disponibilidade da semana</CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-4 grid md:grid-cols-7 gap-2">
+                            {["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"].map((day) => {
+                                const times = schedule[day] || [];
+                                return (
+                                    <div key={day} className="space-y-4">
+                                        <div className="flex flex-col items-center justify-between p-3 bg-blue-50 rounded-lg">
+                                            <div>
+                                                <p className="font-medium capitalize">{weekdaysPT[day]}</p>
+                                            </div>
+                                            <div className="text-center">
+                                                {times.length > 0 ? (
+                                                    times.map((t, i) => (
+                                                        <div key={i}>
+                                                            <DropdownMenu>
+                                                                <DropdownMenuTrigger asChild>
+                                                                    <p  className="text-sm text-gray-600 hover:text-accent-foreground hover:bg-gray-200">
+                                                                        {formatTime(t.start)} <br /> {formatTime(t.end)}
+                                                                    </p>
+                                                                </DropdownMenuTrigger>
+                                                                <DropdownMenuContent align="end">
+                                                                    <DropdownMenuItem onClick={() => handleOpenModal(t, day)}>
+                                                                    <Eye className="w-4 h-4 mr-2" />
+                                                                    Editar
+                                                                    </DropdownMenuItem>
+                                                                    <DropdownMenuItem
+                                                                    onClick={() => openDeleteDialog(t, day)}
+                                                                    className="text-red-600">
+                                                                    <Trash2 className="w-4 h-4 mr-2" />
+                                                                    Excluir
+                                                                    </DropdownMenuItem>
+                                                                </DropdownMenuContent>
+                                                            </DropdownMenu>
+                                                        </div>
+                                                    ))
+                                                ) : (
+                                                    <p className="text-sm text-gray-400 italic">Sem horário</p>
+                                                )}
+                                            </div>
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </CardContent>
+                    </Card>
+                </div>
+                <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+                    <AlertDialogContent>
+                        <AlertDialogHeader>
+                            <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
+                            <AlertDialogDescription>Tem certeza que deseja excluir esta disponibilidade? Esta ação não pode ser desfeita.</AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                            <AlertDialogCancel>Cancelar</AlertDialogCancel>
+                                <AlertDialogAction onClick={() => selectedAvailability && handleDeleteAvailability(selectedAvailability.id)} className="bg-red-600 hover:bg-red-700">
+                                    Excluir
+                                </AlertDialogAction>
+                        </AlertDialogFooter>
+                    </AlertDialogContent>
+                </AlertDialog>
+            </div>
+            <AvailabilityEditModal
+                availability={selectedAvailability}
+                isOpen={isModalOpen}
+                onClose={handleCloseModal}
+                onSubmit={handleEdit}
+            />
+            
         </DoctorLayout>
     );
 }

components/ui/availability-edit-modal.tsx

@@ -0,0 +1,130 @@
+'use client'
+
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useEffect, useState } from "react";
+import { start } from "repl";
+import { appointmentsService } from "@/services/appointmentsApi.mjs";
+
+type Availability = {
+    id: string;
+    doctor_id: string;
+    weekday: string;
+    start_time: string;
+    end_time: string;
+    slot_minutes: number;
+    appointment_type: string;
+    active: boolean;
+    created_at: string;
+    updated_at: string;
+    created_by: string;
+    updated_by: string | null;
+};
+
+interface AvailabilityEditModalProps {
+  isOpen: boolean;
+  availability: Availability | null;
+  onClose: () => void;
+  onSubmit: (formData: any) => void;
+}
+
+export function AvailabilityEditModal({ availability, isOpen, onClose, onSubmit }: AvailabilityEditModalProps) {
+  const [modalidadeConsulta, setModalidadeConsulta] = useState<string>("");
+  const [form, setForm] = useState({ start_time: "", end_time: "", slot_minutes: "", appointment_type: "", id:availability?.id});
+    // Mapa de tradução
+  const weekdaysPT: Record<string, string> = {
+    sunday: "Domingo",
+    monday: "Segunda-Feira",
+    tuesday: "Terça-Feira",
+    wednesday: "Quarta-Feira",
+    thursday: "Quinta-Feira",
+    friday: "Sexta-Feira",
+    saturday: "Sábado",
+  };
+  
+  const handleInputChange = (field: string, value: string) => {
+    setForm((prev) => ({ ...prev, [field]: value }));
+  };
+  
+  const handleFormSubmit = () => {
+    onSubmit(form);
+  };
+  
+  useEffect(() => {
+    if (availability) {
+    setModalidadeConsulta(availability.appointment_type);
+    setForm({
+      start_time: availability.start_time,
+      end_time: availability.end_time,
+      slot_minutes: availability.slot_minutes.toString(),
+      appointment_type: availability.appointment_type,
+      id: availability.id
+    });
+  }
+  }, [availability])
+
+  if (!availability) {
+  return null;
+}
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>Edite a disponibilidade</DialogTitle>
+          <DialogDescription>Altere a disponibilidade atual.</DialogDescription>
+        </DialogHeader>
+          <form  onSubmit={(e) => { e.preventDefault(); handleFormSubmit(); }}>
+            <div className="grid gap-4 py-1" >
+                <h3 className="font-semibold mb-2">{weekdaysPT[availability.weekday]}</h3>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <Label htmlFor="start_time" className="font-semibold">Horário de entrada *</Label>
+                  <Input id="start_time" type="time" value={form.start_time} onChange={(e) => handleInputChange("start_time", e.target.value)}/>
+                </div>
+                <div>
+                  <Label htmlFor="end_time" className="font-semibold">Horário de saída *</Label>
+                  <Input id="end_time" type="time" value={form.end_time} onChange={(e) => handleInputChange("end_time", e.target.value)}/>
+                </div>              
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <Label htmlFor="duracaoConsulta" className="text-sm font-medium text-gray-700">
+                    Duração Da Consulta (min)
+                  </Label>
+                  <Input type="number" id="duracaoConsulta" value={form.slot_minutes} onChange={(e) => handleInputChange("slot_minutes", e.target.value)} name="duracaoConsulta" required  className="mt-1" />
+                </div>
+                <div>
+                  <Label htmlFor="modalidadeConsulta" className="text-sm font-medium text-gray-700">
+                    Modalidade De Consulta
+                    </Label>
+                    <Select value={form.appointment_type} onValueChange={(value) => {setModalidadeConsulta(value); handleInputChange("appointment_type", value);}}>
+                      <SelectTrigger className="mt-1">
+                        <SelectValue placeholder="Selecione" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="presencial">Presencial </SelectItem>
+                        <SelectItem value="telemedicina">Telemedicina</SelectItem>
+                      </SelectContent>
+                    </Select>
+                </div>           
+              </div>   
+              <div className="grid grid-cols-5 gap-4">           
+                <Button type="submit" className="col-start-5 bg-green-600 hover:bg-green-700">Confirmar</Button>
+              </div>
+            </div>  
+          </form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="outline" className="px-4 py-2 bg-gray-200 rounded-md">Fechar</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}