Merge pull request #35 from m1guelmcf/layout-consulta-secretaria

novo layout da secretaria

app/secretary/appointments/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import {
   Card,
   CardContent,
@@ -11,15 +11,24 @@ import {
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Dialog } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input"; // Importei o Input
+import { Calendar as CalendarShadcn } from "@/components/ui/calendar";
+import { Separator } from "@/components/ui/separator";
 import {
-  Calendar,
+  Calendar as CalendarIcon,
   Clock,
   MapPin,
   Phone,
   User,
   Trash2,
   Pencil,
+  List,
+  RefreshCw,
+  Loader2,
+  Search, // Importei o ícone de busca
 } from "lucide-react";
+import { format, parseISO, isValid, isToday, isTomorrow } from "date-fns";
+import { ptBR } from "date-fns/locale";
 import { toast } from "sonner";
 import Link from "next/link";
 import { appointmentsService } from "@/services/appointmentsApi.mjs";
@@ -36,6 +45,9 @@ export default function SecretaryAppointments() {
   const [deleteModal, setDeleteModal] = useState(false);
   const [editModal, setEditModal] = useState(false);
 
+  // Estado da Busca
+  const [searchTerm, setSearchTerm] = useState("");
+
   // Estado para o formulário de edição
   const [editFormData, setEditFormData] = useState({
     date: "",
@@ -43,15 +55,15 @@ export default function SecretaryAppointments() {
     status: "",
   });
 
+  // Estado de data selecionada
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
+
   const fetchData = async () => {
     setIsLoading(true);
     try {
-      // 1. DEFINIR O PARÂMETRO DE ORDENAÇÃO
+      const queryParams = "order=scheduled_at.asc";
-      // 'scheduled_at.desc' ordena pela data do agendamento, em ordem descendente (mais recentes primeiro).
-      const queryParams = "order=scheduled_at.desc";
 
       const [appointmentList, patientList, doctorList] = await Promise.all([
-        // 2. USAR A FUNÇÃO DE BUSCA COM O PARÂMETRO DE ORDENAÇÃO
         appointmentsService.search_appointment(queryParams),
         patientsService.list(),
         doctorsService.list(),
@@ -82,9 +94,66 @@ export default function SecretaryAppointments() {
 
   useEffect(() => {
     fetchData();
-  }, []); // Array vazio garante que a busca ocorra apenas uma vez, no carregamento da página.
+  }, []);
 
-  // --- LÓGICA DE EDIÇÃO ---
+  // --- Filtragem e Agrupamento ---
+  const groupedAppointments = useMemo(() => {
+    let filteredList = appointments;
+
+    // 1. Filtro de Texto (Nome do Paciente ou Médico)
+    if (searchTerm) {
+      const lowerTerm = searchTerm.toLowerCase();
+      filteredList = filteredList.filter(
+        (apt) =>
+          apt.patient.full_name.toLowerCase().includes(lowerTerm) ||
+          apt.doctor.full_name.toLowerCase().includes(lowerTerm)
+      );
+    }
+
+    // 2. Filtro de Data (se selecionada)
+    if (selectedDate) {
+      filteredList = filteredList.filter((apt) => {
+        if (!apt.scheduled_at) return false;
+        const iso = apt.scheduled_at.toString();
+        return iso.startsWith(format(selectedDate, "yyyy-MM-dd"));
+      });
+    }
+
+    // 3. Agrupamento por dia
+    return filteredList.reduce((acc: Record<string, any[]>, apt: any) => {
+      if (!apt.scheduled_at) return acc;
+      const dateObj = new Date(apt.scheduled_at);
+      if (!isValid(dateObj)) return acc;
+      const key = format(dateObj, "yyyy-MM-dd");
+      if (!acc[key]) acc[key] = [];
+      acc[key].push(apt);
+      return acc;
+    }, {});
+  }, [appointments, selectedDate, searchTerm]);
+
+  // Dias que têm consulta (para destacar no calendário)
+  const bookedDays = useMemo(
+    () =>
+      appointments
+        .map((apt) =>
+          apt.scheduled_at ? new Date(apt.scheduled_at) : null
+        )
+        .filter((d): d is Date => d !== null && isValid(d)),
+    [appointments]
+  );
+
+  const formatDisplayDate = (dateString: string) => {
+    const date = parseISO(dateString);
+    if (isToday(date)) {
+      return `Hoje, ${format(date, "dd 'de' MMMM", { locale: ptBR })}`;
+    }
+    if (isTomorrow(date)) {
+      return `Amanhã, ${format(date, "dd 'de' MMMM", { locale: ptBR })}`;
+    }
+    return format(date, "EEEE, dd 'de' MMMM", { locale: ptBR });
+  };
+
+  // --- LÓGICA DE EDIÇÃO E DELEÇÃO ---
   const handleEdit = (appointment: any) => {
     setSelectedAppointment(appointment);
     const appointmentDate = new Date(appointment.scheduled_at);
@@ -122,11 +191,7 @@ export default function SecretaryAppointments() {
       };
 
       await appointmentsService.update(selectedAppointment.id, updatePayload);
-
+      await fetchData();
-      // 3. RECARREGAR OS DADOS APÓS A EDIÇÃO
-      // Isso garante que a lista permaneça ordenada corretamente se a data for alterada.
-      fetchData();
-
       setEditModal(false);
       toast.success("Consulta atualizada com sucesso!");
     } catch (error) {
@@ -135,7 +200,6 @@ export default function SecretaryAppointments() {
     }
   };
 
-  // --- LÓGICA DE DELEÇÃO ---
   const handleDelete = (appointment: any) => {
     setSelectedAppointment(appointment);
     setDeleteModal(true);
@@ -156,161 +220,249 @@ export default function SecretaryAppointments() {
     }
   };
 
-  const timeSlots = [
-    "08:00",
-    "08:30",
-    "09:00",
-    "09:30",
-    "10:00",
-    "10:30",
-    "11:00",
-    "11:30",
-    "14:00",
-    "14:30",
-    "15:00",
-    "15:30",
-    "16:00",
-    "16:30",
-    "17:00",
-    "17:30",
-  ];
-  const appointmentStatuses = [
-    "requested",
-    "confirmed",
-    "checked_in",
-    "completed",
-    "cancelled",
-    "no_show",
-  ];
-
   return (
     <Sidebar>
       <div className="space-y-6">
-        <div className="flex justify-between items-center">
+        {/* Cabeçalho principal */}
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
           <div>
-            <h1 className="text-3xl font-bold">
+            <h1 className="text-3xl font-bold text-foreground">
-              Consultas Agendadas
+              Agenda Médica
             </h1>
-            <p className="text-muted-foreground">Gerencie as consultas dos pacientes</p>
+            <p className="text-muted-foreground">
+              Consultas para os pacientes
+            </p>
           </div>
           <Link href="/secretary/schedule">
             <Button className="bg-primary hover:bg-primary/90 text-primary-foreground">
-              <Calendar className="mr-2 h-4 w-4" />
+              <CalendarIcon className="mr-2 h-4 w-4" />
               Agendar Nova Consulta
             </Button>
           </Link>
         </div>
 
-        <div className="grid gap-6">
+        {/* Barra de Filtros e Ações */}
-          {isLoading ? (
+        <div className="flex flex-col md:flex-row justify-between items-center gap-4">
-            <p>Carregando consultas...</p>
+          <h2 className="text-xl font-semibold capitalize whitespace-nowrap">
-          ) : appointments.length > 0 ? (
+            {selectedDate
-            appointments.map((appointment) => (
+              ? `Agenda de ${format(selectedDate, "dd/MM/yyyy")}`
-              <Card key={appointment.id}>
+              : "Todas as Consultas"}
-                <CardHeader>
+          </h2>
-                  <div className="flex justify-between items-start">
+          
-                    <div>
+          <div className="flex flex-col md:flex-row items-center gap-3 w-full md:w-auto">
-                      <CardTitle className="text-lg">
+            {/* BARRA DE PESQUISA ADICIONADA AQUI */}
-                        {appointment.doctor.full_name}
+            <div className="relative w-full md:w-72">
-                      </CardTitle>
+              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-                      <CardDescription>
+              <Input
-                        {appointment.doctor.specialty}
+                type="search"
-                      </CardDescription>
+                placeholder="Buscar paciente ou médico..."
-                    </div>
+                className="pl-9 w-full"
-                    {getStatusBadge(appointment.status)}
+                value={searchTerm}
-                  </div>
+                onChange={(e) => setSearchTerm(e.target.value)}
-                </CardHeader>
+              />
-                <CardContent>
-                  <div className="grid md:grid-cols-2 gap-4">
-                    <div className="space-y-3">
-                      <div className="flex items-center text-sm text-foreground font-medium">
-                        <User className="mr-2 h-4 w-4 text-muted-foreground" />
-                        {appointment.patient.full_name}
-                      </div>
-                      <div className="flex items-center text-sm text-muted-foreground">
-                        <Calendar className="mr-2 h-4 w-4" />
-                        {new Date(appointment.scheduled_at).toLocaleDateString(
-                          "pt-BR",
-                          { timeZone: "UTC" }
-                        )}
-                      </div>
-                      <div className="flex items-center text-sm text-muted-foreground">
-                        <Clock className="mr-2 h-4 w-4" />
-                        {new Date(appointment.scheduled_at).toLocaleTimeString(
-                          "pt-BR",
-                          {
-                            hour: "2-digit",
-                            minute: "2-digit",
-                            timeZone: "UTC",
-                          }
-                        )}
-                      </div>
-                    </div>
-                    <div className="space-y-3">
-                      <div className="flex items-center text-sm text-muted-foreground">
-                        <MapPin className="mr-2 h-4 w-4" />
-                        {appointment.doctor.location || "Local a definir"}
-                      </div>
-                      <div className="flex items-center text-sm text-muted-foreground">
-                        <Phone className="mr-2 h-4 w-4" />
-                        {appointment.doctor.phone || "N/A"}
-                      </div>
-                    </div>
-                  </div>
-
-                                    <div className="flex gap-2 mt-4 pt-4 border-t">
-                                        <Button variant="outline" size="sm" onClick={() => handleEdit(appointment)}>
-                                            <Pencil className="mr-2 h-4 w-4" />
-                                            Editar
-                                        </Button>
-                                        <Button variant="outline" size="sm" className="text-destructive hover:text-destructive/90 hover:bg-destructive/10 bg-transparent" onClick={() => handleDelete(appointment)}>
-                                            <Trash2 className="mr-2 h-4 w-4" />
-                                            Cancelar
-                                        </Button>
-                                    </div>
-                                </CardContent>
-                            </Card>
-                        ))
-                    ) : (
-                        <p>Nenhuma consulta encontrada.</p>
-                    )}
-                </div>
             </div>
 
-      {/* MODAL DE EDIÇÃO */}
+            <div className="flex gap-2 w-full md:w-auto">
-      <Dialog open={editModal} onOpenChange={setEditModal}>
+              <Button
-        {/* ... (código do modal de edição) ... */}
+                onClick={() => {
-      </Dialog>
+                    setSelectedDate(undefined);
+                    setSearchTerm("");
+                }}
+                variant="ghost"
+                size="sm"
+                className="flex-1 md:flex-none"
+              >
+                <List className="mr-2 h-4 w-4" />
+                Mostrar Todas
+              </Button>
+              <Button
+                onClick={() => fetchData()}
+                disabled={isLoading}
+                variant="outline"
+                size="sm"
+                className="flex-1 md:flex-none"
+              >
+                <RefreshCw
+                  className={`mr-2 h-4 w-4 ${isLoading ? "animate-spin" : ""}`}
+                />
+                Atualizar
+              </Button>
+            </div>
+          </div>
+        </div>
 
-      {/* Modal de Deleção */}
+        {/* Grid com calendário + lista */}
-      <Dialog open={deleteModal} onOpenChange={setDeleteModal}>
+        <div className="grid lg:grid-cols-3 gap-6">
-        {/* ... (código do modal de deleção) ... */}
+          {/* Coluna esquerda: calendário */}
-      </Dialog>
+          <div className="lg:col-span-1">
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center">
+                  <CalendarIcon className="mr-2 h-5 w-5" />
+                  Filtrar por Data
+                </CardTitle>
+                <CardDescription>
+                  Selecione um dia para ver os detalhes.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="flex justify-center p-2">
+                <CalendarShadcn
+                  mode="single"
+                  selected={selectedDate}
+                  onSelect={setSelectedDate}
+                  modifiers={{ booked: bookedDays }}
+                  modifiersClassNames={{ booked: "bg-primary/20" }}
+                  className="rounded-md border p-2"
+                  locale={ptBR}
+                />
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Coluna direita: lista de consultas */}
+          <div className="lg:col-span-2 space-y-6">
+            {isLoading ? (
+              <div className="flex justify-center items-center h-48">
+                <Loader2 className="h-8 w-8 animate-spin text-primary" />
+              </div>
+            ) : Object.keys(groupedAppointments).length === 0 ? (
+              <Card className="flex flex-col items-center justify-center h-48 text-center">
+                <CardHeader>
+                  <CardTitle>Nenhuma consulta encontrada</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-muted-foreground">
+                    {searchTerm 
+                        ? "Nenhum resultado para a busca." 
+                        : selectedDate
+                            ? "Não há agendamentos para esta data."
+                            : "Não há consultas agendadas."}
+                  </p>
+                </CardContent>
+              </Card>
+            ) : (
+              Object.entries(groupedAppointments).map(
+                ([date, appointmentsForDay]) => (
+                  <div key={date}>
+                    <h3 className="text-lg font-semibold text-foreground mb-3 capitalize">
+                      {formatDisplayDate(date)}
+                    </h3>
+                    <div className="space-y-4">
+                      {appointmentsForDay.map((appointment: any) => {
+                        const scheduledAtDate = new Date(
+                          appointment.scheduled_at
+                        );
+
+                        return (
+                          <Card
+                            key={appointment.id}
+                            className="shadow-sm hover:shadow-md transition-shadow"
+                          >
+                            <CardContent className="p-4 grid grid-cols-1 md:grid-cols-3 items-center gap-4">
+                              {/* Coluna 1: Paciente + hora */}
+                              <div className="col-span-1 flex flex-col gap-2">
+                                <div className="font-semibold flex items-center text-foreground">
+                                  <User className="mr-2 h-4 w-4 text-primary" />
+                                  {appointment.patient.full_name}
+                                </div>
+                                <div className="flex items-center text-sm text-muted-foreground">
+                                  <Clock className="mr-2 h-4 w-4" />
+                                  {isValid(scheduledAtDate)
+                                    ? format(scheduledAtDate, "HH:mm")
+                                    : "--:--"}
+                                </div>
+                              </div>
+
+                              {/* Coluna 2: Médico / local / telefone */}
+                              <div className="col-span-1 flex flex-col gap-2">
+                                <div className="flex items-center text-sm text-muted-foreground">
+                                  <User className="mr-2 h-4 w-4" />
+                                  {appointment.doctor.full_name}
+                                </div>
+                                <div className="flex items-center text-sm text-muted-foreground">
+                                  <MapPin className="mr-2 h-4 w-4" />
+                                  {appointment.doctor.location ||
+                                    "Local a definir"}
+                                </div>
+                                <div className="flex items-center text-sm text-muted-foreground">
+                                  <Phone className="mr-2 h-4 w-4" />
+                                  {appointment.doctor.phone || "N/A"}
+                                </div>
+                                <div>{getStatusBadge(appointment.status)}</div>
+                              </div>
+
+                              {/* Coluna 3: Ações */}
+                              <div className="col-span-1 flex justify-start md:justify-end">
+                                <div className="flex gap-2">
+                                  <Button
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={() => handleEdit(appointment)}
+                                  >
+                                    <Pencil className="mr-2 h-4 w-4" />
+                                    Editar
+                                  </Button>
+                                  <Button
+                                    variant="destructive"
+                                    size="sm"
+                                    onClick={() => handleDelete(appointment)}
+                                  >
+                                    <Trash2 className="mr-2 h-4 w-4" />
+                                    Cancelar
+                                  </Button>
+                                </div>
+                              </div>
+                            </CardContent>
+                          </Card>
+                        );
+                      })}
+                    </div>
+                    <Separator className="my-6" />
+                  </div>
+                )
+              )
+            )}
+          </div>
+        </div>
+
+        {/* MODAL DE EDIÇÃO */}
+        <Dialog open={editModal} onOpenChange={setEditModal}>
+           {/* Modal de edição permanece o mesmo, adicione o DialogContent se precisar */}
+           {/* Aqui estou assumindo que você tem o conteúdo do Dialog no seu código original ou em outro lugar, pois ele não estava completo no snippet anterior */}
+        </Dialog>
+
+        {/* Modal de Deleção */}
+        <Dialog open={deleteModal} onOpenChange={setDeleteModal}>
+           {/* Modal de deleção permanece o mesmo */}
+        </Dialog>
+      </div>
     </Sidebar>
   );
 }
 
 const getStatusBadge = (status: string) => {
-    switch (status) {
+  switch (status) {
-      case "requested":
+    case "requested":
-        return (
+      return (
-          <Badge className="bg-yellow-400/10 text-yellow-400">Solicitada</Badge>
+        <Badge className="bg-yellow-400/10 text-yellow-400">Solicitada</Badge>
-        );
+      );
-      case "confirmed":
+    case "confirmed":
-        return <Badge className="bg-primary/10 text-primary">Confirmada</Badge>;
+      return <Badge className="bg-primary/10 text-primary">Confirmada</Badge>;
-      case "checked_in":
+    case "checked_in":
-        return (
+      return (
-          <Badge className="bg-indigo-400/10 text-indigo-400">Check-in</Badge>
+        <Badge className="bg-indigo-400/10 text-indigo-400">Check-in</Badge>
-        );
+      );
-      case "completed":
+    case "completed":
-        return <Badge className="bg-green-400/10 text-green-400">Realizada</Badge>;
+      return <Badge className="bg-green-400/10 text-green-400">Realizada</Badge>;
-      case "cancelled":
+    case "cancelled":
-        return <Badge className="bg-destructive/10 text-destructive">Cancelada</Badge>;
+      return (
-      case "no_show":
+        <Badge className="bg-destructive/10 text-destructive">Cancelada</Badge>
-        return (
+      );
-          <Badge className="bg-muted text-foreground">Não Compareceu</Badge>
+    case "no_show":
-        );
+      return (
-      default:
+        <Badge className="bg-muted text-foreground">Não Compareceu</Badge>
-        return <Badge variant="secondary">{status}</Badge>;
+      );
-    }
+    default:
-  };
+      return <Badge variant="secondary">{status}</Badge>;
+  }
+};