Merge pull request 'Adicionado criação de disponibilidade e exceção' (#25) from StsDanilo/riseup-squad21:Disponibilidade into disponibilidade

Reviewed-on: #25

app/doctor/dashboard/page.tsx

@@ -3,10 +3,13 @@
 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, Plus } from "lucide-react";
+import { Calendar, Clock, User, Trash2 } from "lucide-react";
 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 { AvailabilityService } from "@/services/availabilityApi.mjs";
+import { exceptionsService } from "@/services/exceptionApi.mjs";
+import { toast } from "@/hooks/use-toast";
 
 type Availability = {
     id: string;
@@ -29,10 +32,15 @@ type Schedule = {
 
 export default function PatientDashboard() {
     const userInfo = JSON.parse(localStorage.getItem("user_info") || "{}");
-    const doctorId = "58ea5330-5cfe-4433-a218-2749844aee89"; //userInfo.id;
+    const doctorId = "3bb9ee4a-cfdd-4d81-b628-383907dfa225"; //userInfo.id;
     const [availability, setAvailability] = useState<any | null>(null);
+    const [exceptions, setExceptions] = useState<any | null>(null);
     const [schedule, setSchedule] = useState<Record<string, { start: string; end: string }[]>>({});
     const formatTime = (time: string) => time.split(":").slice(0, 2).join(":");
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const [patientToDelete, setPatientToDelete] = useState<string | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
     // Mapa de tradução
     const weekdaysPT: Record<string, string> = {
         sunday: "Domingo",
@@ -47,9 +55,14 @@ export default function PatientDashboard() {
     useEffect(() => {
         const fetchData = async () => {
             try {
+                // fetch para disponibilidade
                 const response = await AvailabilityService.list();
                 const filteredResponse = response.filter((disp: { doctor_id: any }) => disp.doctor_id == doctorId);
                 setAvailability(filteredResponse);
+                // fetch para exceções
+                const res = await exceptionsService.list();
+                const filteredRes = res.filter((disp: { doctor_id: any }) => disp.doctor_id == doctorId);
+                setExceptions(filteredRes);
             } catch (e: any) {
                 alert(`${e?.error} ${e?.message}`);
             }
@@ -57,6 +70,41 @@ export default function PatientDashboard() {
         fetchData();
     }, []);
 
+    const openDeleteDialog = (patientId: string) => {
+        setPatientToDelete(patientId);
+        setDeleteDialogOpen(true);
+    };
+
+    const handleDeletePatient = async (patientId: string) => {
+        // Remove from current list (client-side deletion)
+        try {
+            const res = await exceptionsService.delete(patientId);
+
+            let message = "Exceção 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,
+            });
+
+            setExceptions((prev: any[]) => prev.filter((p) => String(p.id) !== String(patientId)));
+        } catch (e: any) {
+            toast({
+                title: "Erro",
+                description: e?.message || "Não foi possível deletar a exceção",
+            });
+        }
+        setDeleteDialogOpen(false);
+        setPatientToDelete(null);
+    };
+
     function formatAvailability(data: Availability[]) {
         // Agrupar os horários por dia da semana
         const schedule = data.reduce((acc: any, item) => {
@@ -199,6 +247,68 @@ export default function PatientDashboard() {
                         </CardContent>
                     </Card>
                 </div>
+                <div className="grid md:grid-cols-1 gap-6">
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Exceções</CardTitle>
+                            <CardDescription>Bloqueios e liberações eventuais de agenda</CardDescription>
+                        </CardHeader>
+
+                        <CardContent className="space-y-4 grid md:grid-cols-7 gap-2">
+                            {exceptions && exceptions.length > 0 ? (
+                                exceptions.map((ex: any) => {
+                                    // Formata data e hora
+                                    const date = new Date(ex.date).toLocaleDateString("pt-BR", {
+                                        weekday: "long",
+                                        day: "2-digit",
+                                        month: "long",
+                                    });
+
+                                    const startTime = formatTime(ex.start_time);
+                                    const endTime = formatTime(ex.end_time);
+
+                                    return (
+                                        <div key={ex.id} className="space-y-4">
+                                            <div className="flex flex-col items-center justify-between p-3 bg-blue-50 rounded-lg shadow-sm">
+                                                <div className="text-center">
+                                                    <p className="font-semibold capitalize">{date}</p>
+                                                    <p className="text-sm text-gray-600">
+                                                        {startTime} - {endTime}
+                                                    </p>
+                                                </div>
+                                                <div className="text-center mt-2">
+                                                    <p className={`text-sm font-medium ${ex.kind === "bloqueio" ? "text-red-600" : "text-green-600"}`}>{ex.kind === "bloqueio" ? "Bloqueio" : "Liberação"}</p>
+                                                    <p className="text-xs text-gray-500 italic">{ex.reason || "Sem motivo especificado"}</p>
+                                                </div>
+                                                <div>
+                                                    <Button className="text-red-600" variant="outline" onClick={() => openDeleteDialog(String(ex.id))}>
+                                                        <Trash2></Trash2>
+                                                    </Button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    );
+                                })
+                            ) : (
+                                <p className="text-sm text-gray-400 italic col-span-7 text-center">Nenhuma exceção registrada.</p>
+                            )}
+                        </CardContent>
+                    </Card>
+                </div>
+                <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+                    <AlertDialogContent>
+                        <AlertDialogHeader>
+                            <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
+                            <AlertDialogDescription>Tem certeza que deseja excluir este paciente? 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">
+                                Excluir
+                            </AlertDialogAction>
+                        </AlertDialogFooter>
+                    </AlertDialogContent>
+                </AlertDialog>
             </div>
         </DoctorLayout>
     );

app/doctor/disponibilidade/excecoes/page.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import type React from "react";
+import Link from "next/link";
+import { useState, useEffect } from "react";
+import DoctorLayout from "@/components/doctor-layout";
+import { Card, CardContent, 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 { Clock, Calendar as CalendarIcon, MapPin, Phone, User, X, RefreshCw } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { useRouter } from "next/navigation";
+import { toast } from "@/hooks/use-toast";
+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
+
+const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
+
+// --- TIPAGEM DA CONSULTA SALVA NO LOCALSTORAGE ---
+interface LocalStorageAppointment {
+    id: number;
+    patientName: string;
+    doctor: string;
+    specialty: string;
+    date: string; // Data no formato YYYY-MM-DD
+    time: string; // Hora no formato HH:MM
+    status: "agendada" | "confirmada" | "cancelada" | "realizada";
+    location: string;
+    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();
+};
+
+// --- COMPONENTE PRINCIPAL ---
+
+export default function ExceptionPage() {
+    const [allAppointments, setAllAppointments] = useState<LocalStorageAppointment[]>([]);
+    const router = useRouter();
+    const [filteredAppointments, setFilteredAppointments] = useState<LocalStorageAppointment[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const userInfo = JSON.parse(localStorage.getItem("user_info") || "{}");
+    const doctorIdTemp = "3bb9ee4a-cfdd-4d81-b628-383907dfa225";
+    const [tipo, setTipo] = useState<string>("");
+
+    // NOVO ESTADO 1: Armazena os dias com consultas (para o calendário)
+    const [bookedDays, setBookedDays] = useState<Date[]>([]);
+
+    // NOVO ESTADO 2: Armazena a data selecionada no calendário
+    const [selectedCalendarDate, setSelectedCalendarDate] = useState<Date | undefined>(new Date());
+
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        if (isLoading) return;
+        //setIsLoading(true);
+        const form = e.currentTarget;
+        const formData = new FormData(form);
+
+        const apiPayload = {
+            doctor_id: doctorIdTemp,
+            created_by: doctorIdTemp,
+            date: selectedCalendarDate ? format(selectedCalendarDate, "yyyy-MM-dd") : "",
+            start_time: ((formData.get("horarioEntrada") + ":00") as string) || undefined,
+            end_time: ((formData.get("horarioSaida") + ":00") as string) || undefined,
+            kind: tipo || undefined,
+            reason: formData.get("reason"),
+        };
+        console.log(apiPayload);
+        try {
+            const res = await exceptionsService.create(apiPayload);
+            console.log(res);
+
+            let message = "Exceção cadastrada 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("/doctor/dashboard"); // adicionar página para listar a disponibilidade
+        } catch (err: any) {
+            toast({
+                title: "Erro",
+                description: err?.message || "Não foi possível cadastrar a exceção",
+            });
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const displayDate = selectedCalendarDate ? new Date(selectedCalendarDate).toLocaleDateString("pt-BR", { weekday: "long", day: "2-digit", month: "long" }) : "Selecione uma data";
+
+    return (
+        <DoctorLayout>
+            <div className="space-y-6">
+                <div>
+                    <h1 className="text-3xl font-bold text-gray-900">Adicione exceções</h1>
+                    <p className="text-gray-600">Altere a disponibilidade em casos especiais para o Dr. {userInfo.user_metadata.full_name}</p>
+                </div>
+
+                <div className="flex justify-between items-center">
+                    <h2 className="text-xl font-semibold">Consultas para: {displayDate}</h2>
+                    <Button disabled={isLoading} variant="outline" size="sm">
+                        <RefreshCw className={`mr-2 h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
+                        Atualizar Agenda
+                    </Button>
+                </div>
+
+                {/* NOVO LAYOUT DE DUAS COLUNAS */}
+                <div className="grid lg:grid-cols-3 gap-6">
+                    {/* COLUNA 1: CALENDÁRIO */}
+                    <div className="lg:col-span-1">
+                        <Card>
+                            <CardHeader>
+                                <CardTitle className="flex items-center">
+                                    <CalendarIcon className="mr-2 h-5 w-5" />
+                                    Calendário
+                                </CardTitle>
+                                <p className="text-sm text-gray-500">Selecione a data desejada.</p>
+                            </CardHeader>
+                            <CardContent className="flex justify-center p-2">
+                                <Calendar
+                                    mode="single"
+                                    selected={selectedCalendarDate}
+                                    onSelect={setSelectedCalendarDate}
+                                    autoFocus
+                                    // A CHAVE DO HIGHLIGHT: Passa o array de datas agendadas
+                                    modifiers={{ booked: bookedDays }}
+                                    // Define o estilo CSS para o modificador 'booked'
+                                    modifiersClassNames={{
+                                        booked: "bg-blue-600 text-white aria-selected:!bg-blue-700 hover:!bg-blue-700/90",
+                                    }}
+                                    className="rounded-md border p-2"
+                                />
+                            </CardContent>
+                        </Card>
+                    </div>
+
+                    {/* COLUNA 2: FORM PARA ADICIONAR EXCEÇÃO */}
+                    <div className="lg:col-span-2 space-y-4">
+                        {isLoading ? (
+                            <p className="text-center text-lg text-gray-500">Carregando a agenda...</p>
+                        ) : !selectedCalendarDate ? (
+                            <p className="text-center text-lg text-gray-500">Selecione uma data.</p>
+                        ) : (
+                            <form className="space-y-6" onSubmit={handleSubmit}>
+                                <div className="bg-white rounded-lg border border-gray-200 p-6">
+                                    <h2 className="text-lg font-semibold text-gray-900 mb-6">Dados </h2>
+                                    <h4>{selectedCalendarDate?.toLocaleDateString("pt-BR", { weekday: "long" })}</h4>
+                                    <div className="space-y-6">
+                                        <div className="grid md:grid-cols-5 gap-6">
+                                            <div>
+                                                <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" />
+                                            </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" />
+                                            </div>
+                                        </div>
+
+                                        <div>
+                                            <Label htmlFor="tipo" className="text-sm font-medium text-gray-700">
+                                                Tipo
+                                            </Label>
+                                            <Select onValueChange={(value) => setTipo(value)} value={tipo}>
+                                                <SelectTrigger className="mt-1">
+                                                    <SelectValue placeholder="Selecione" />
+                                                </SelectTrigger>
+                                                <SelectContent>
+                                                    <SelectItem value="bloqueio">Bloqueio </SelectItem>
+                                                    <SelectItem value="liberacao">Liberação</SelectItem>
+                                                </SelectContent>
+                                            </Select>
+                                        </div>
+                                        <div>
+                                            <Label htmlFor="reason" className="text-sm font-medium text-gray-700">
+                                                Motivo
+                                            </Label>
+                                            <Input type="textarea" id="reason" name="reason" required className="mt-1" />
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className="flex justify-end gap-4">
+                                    <Link href="/doctor/disponibilidade">
+                                        <Button variant="outline">Cancelar</Button>
+                                    </Link>
+                                    <Button type="submit" className="bg-green-600 hover:bg-green-700">
+                                        Salvar Exceção
+                                    </Button>
+                                </div>
+                            </form>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </DoctorLayout>
+    );
+}

app/doctor/disponibilidade/page.tsx

@@ -16,6 +16,7 @@ export default function AvailabilityPage() {
     const router = useRouter();
     const [isLoading, setIsLoading] = useState(false);
     const userInfo = JSON.parse(localStorage.getItem("user_info") || "{}");
+    const doctorIdTemp = "3bb9ee4a-cfdd-4d81-b628-383907dfa225";
     const [modalidadeConsulta, setModalidadeConsulta] = useState<string>("");
 
     useEffect(() => {
@@ -39,8 +40,8 @@ export default function AvailabilityPage() {
         const formData = new FormData(form);
 
         const apiPayload = {
-            doctor_id: userInfo.id,
+            doctor_id: doctorIdTemp,
-            created_by: userInfo.id,
+            created_by: doctorIdTemp,
             weekday: (formData.get("weekday") as string) || undefined,
             start_time: (formData.get("horarioEntrada") as string) || undefined,
             end_time: (formData.get("horarioSaida") as string) || undefined,
@@ -168,7 +169,10 @@ export default function AvailabilityPage() {
                     </div>
 
                     <div className="flex justify-end gap-4">
-                        <Link href="/doctor/medicos">
+                        <Link href="/doctor/disponibilidade/excecoes">
+                            <Button variant="outline">Adicionar Exceção</Button>
+                        </Link>
+                        <Link href="/doctor/dashboard">
                             <Button variant="outline">Cancelar</Button>
                         </Link>
                         <Button type="submit" className="bg-green-600 hover:bg-green-700">

services/exceptionApi.mjs

@@ -0,0 +1,7 @@
+import { api } from "./api.mjs";
+
+export const exceptionsService = {
+    list: () => api.get("/rest/v1/doctor_exceptions"),
+    create: (data) => api.post("/rest/v1/doctor_exceptions", data),
+    delete: (id) => api.delete(`/rest/v1/doctor_exceptions?id=eq.${id}`),
+};