Merge pull request #40 from m1guelmcf/Stage

Stage

.gitignore

@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

app/cadastro/page.tsx

@@ -0,0 +1,160 @@
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Calendar, Clock, User, Shield, Stethoscope, Receipt, IdCard  } from "lucide-react"
+
+export default function HomePage() {
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="container mx-auto px-4 py-16">
+        <div className="text-center mb-12">
+          <h1 className="text-4xl font-bold text-foreground mb-4">Central de Operações <br>
+          </br>
+          MediConnect
+
+          </h1>
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+            Gerencie suas consultas médicas de forma simples e eficiente
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+          <Card className="hover:shadow-lg transition-shadow flex flex-col h-full">
+            <CardHeader className="text-center flex-shrink-0">
+              <User className="w-12 h-12 text-blue-600 mx-auto mb-4" />
+              <CardTitle>Área do Paciente</CardTitle>
+              <CardDescription>Tenha o controle total da sua saúde: agende, consulte o histórico e informações pessoais</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4 flex-grow flex flex-col">
+              <div className="space-y-3 flex-grow">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <Calendar className="w-4 h-4" />
+                  <span>Agendar consultas</span>
+                </div>
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <Clock className="w-4 h-4" />
+                  <span>Ver histórico de consultas</span>
+                </div>
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <User className="w-4 h-4" />
+                  <span>Gerenciar dados pessoais</span>
+                </div>
+              </div>
+              <Link href="/patient/login" className="block mt-auto">
+                <Button className="w-full">Entrar como Paciente</Button>
+              </Link>
+            </CardContent>
+          </Card>
+
+          <Card className="hover:shadow-lg transition-shadow flex flex-col h-full">
+            <CardHeader className="text-center flex-shrink-0">
+              <Shield className="w-12 h-12 text-purple-600 mx-auto mb-4" />
+              <CardTitle>Área da Secretária</CardTitle>
+              <CardDescription>Otimize o fluxo de trabalho e mantenha a agenda sempre organizada</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4 flex-grow flex flex-col">
+              <div className="space-y-3 flex-grow">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <Calendar className="w-4 h-4" />
+                  <span>Gerenciar consultas</span>
+                </div>
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <User className="w-4 h-4" />
+                  <span>Cadastrar pacientes</span>
+                </div>
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <Clock className="w-4 h-4" />
+                  <span>Controlar agenda</span>
+                </div>
+              </div>
+              <Link href="/secretary/login" className="block mt-auto">
+                <Button className="w-full bg-purple-600 text-white hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-600 dark:text-white">Entrar como Secretária</Button>
+              </Link>
+            </CardContent>
+          </Card>
+
+          <Card className="hover:shadow-lg transition-shadow flex flex-col h-full">
+            <CardHeader className="text-center flex-shrink-0">
+              <Stethoscope className="w-12 h-12 text-green-600 mx-auto mb-4" />
+              <CardTitle>Área Médica</CardTitle>
+              <CardDescription>Visualize sua agenda, laudos de pacientes e histórico para um diagnóstico preciso</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4 flex-grow flex flex-col">
+              <div className="space-y-3 flex-grow">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <Calendar className="w-4 h-4" />
+                  <span>Gerenciar agenda</span>
+                </div>
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <User className="w-4 h-4" />
+                  <span>Ver pacientes</span>
+                </div>
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <Clock className="w-4 h-4" />
+                  <span>Histórico de atendimentos</span>
+                </div>
+              </div>
+              <Link href="/doctor/login" className="block mt-auto">
+                <Button className="w-full bg-green-600 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 dark:text-white">Entrar como Médico</Button>
+              </Link>
+            </CardContent>
+          </Card>
+
+          <Card className="hover:shadow-lg transition-shadow flex flex-col h-full">
+            <CardHeader className="text-center flex-shrink-0">
+              <IdCard  className="w-12 h-12 text-blue-600 mx-auto mb-4" />
+              <CardTitle>Área do Gestor</CardTitle>
+              <CardDescription>Configure o sistema, gerencie usuários e controle a operação da clínica</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4 flex-grow flex flex-col">
+              <div className="space-y-3 flex-grow">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <Calendar className="w-4 h-4" />
+                  <span>Relatórios gerenciais</span>
+                </div>
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <User className="w-4 h-4" />
+                  <span>Configurações do sistema</span>
+                </div>
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <Clock className="w-4 h-4" />
+                  <span>Gestão de usuários</span>
+                </div>
+              </div>
+              <Link href="/manager/login" className="block mt-auto">
+                <Button className="w-full bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 dark:text-white">Entrar como Gestor</Button>
+              </Link>
+            </CardContent>
+          </Card>
+
+          <Card className="hover:shadow-lg transition-shadow flex flex-col h-full">
+            <CardHeader className="text-center flex-shrink-0">
+              <Receipt className="w-12 h-12 text-orange-600 mx-auto mb-4" />
+              <CardTitle>Área de Finanças</CardTitle>
+              <CardDescription>Controle o faturamento, pagamentos e a saúde financeira da clínica</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4 flex-grow flex flex-col">
+              <div className="space-y-3 flex-grow">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <Calendar className="w-4 h-4" />
+                  <span>Relatórios financeiros</span>
+                </div>
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <User className="w-4 h-4" />
+                  <span>Faturamento</span>
+                </div>
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <Clock className="w-4 h-4" />
+                  <span>Controle de pagamentos</span>
+                </div>
+              </div>
+              <Link href="finance/login" className="block mt-auto">
+                <Button className="w-full bg-orange-600 text-white hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 dark:text-white">Entrar como Financeiro</Button>
+              </Link>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}

app/context/AccessibilityContext.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+
+type Theme = 'light' | 'dark';
+type Contrast = 'normal' | 'high';
+
+interface AccessibilityContextProps {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  contrast: Contrast;
+  setContrast: (contrast: Contrast) => void;
+  fontSize: number;
+  increaseFontSize: () => void;
+  decreaseFontSize: () => void;
+  resetFontSize: () => void;
+}
+
+const AccessibilityContext = createContext<AccessibilityContextProps | undefined>(undefined);
+
+export const AccessibilityProvider = ({ children }: { children: ReactNode }) => {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    if (typeof window !== 'undefined') {
+      return (localStorage.getItem('accessibility-theme') as Theme) || 'light';
+    }
+    return 'light';
+  });
+  const [contrast, setContrastState] = useState<Contrast>(() => {
+    if (typeof window !== 'undefined') {
+      return (localStorage.getItem('accessibility-contrast') as Contrast) || 'normal';
+    }
+    return 'normal';
+  });
+  const [fontSize, setFontSize] = useState<number>(() => {
+    if (typeof window !== 'undefined') {
+      const storedSize = localStorage.getItem('accessibility-font-size');
+      return storedSize ? parseFloat(storedSize) : 16;
+    }
+    return 16;
+  });
+
+  useEffect(() => {
+    const root = document.documentElement;
+    
+    // Theme
+    root.classList.remove('light', 'dark');
+    root.classList.add(theme);
+    localStorage.setItem('accessibility-theme', theme);
+
+    // Contrast
+    root.classList.remove('normal-contrast', 'high-contrast');
+    root.classList.add(contrast === 'high' ? 'high-contrast' : 'normal-contrast');
+    localStorage.setItem('accessibility-contrast', contrast);
+
+    // Font Size
+    root.style.fontSize = `${fontSize}px`;
+    localStorage.setItem('accessibility-font-size', fontSize.toString());
+
+  }, [theme, contrast, fontSize]);
+
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme);
+  };
+
+  const setContrast = (newContrast: Contrast) => {
+    setContrastState(newContrast);
+  };
+
+  const increaseFontSize = () => {
+    setFontSize(prev => Math.min(prev + 2, 24)); // Cap at 24px
+  };
+
+  const decreaseFontSize = () => {
+    setFontSize(prev => Math.max(prev - 2, 12)); // Cap at 12px
+  };
+
+  const resetFontSize = () => {
+    setFontSize(16);
+  };
+
+  return (
+    <AccessibilityContext.Provider
+      value={{
+        theme,
+        setTheme,
+        contrast,
+        setContrast,
+        fontSize,
+        increaseFontSize,
+        decreaseFontSize,
+        resetFontSize,
+      }}
+    >
+      {children}
+    </AccessibilityContext.Provider>
+  );
+};
+
+export const useAccessibility = () => {
+  const context = useContext(AccessibilityContext);
+  if (context === undefined) {
+    throw new Error('useAccessibility must be used within an AccessibilityProvider');
+  }
+  return context;
+};

app/context/AppointmentsContext.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+// A interface Appointment permanece a mesma
+export interface Appointment {
+  id: string;
+  doctorName: string;
+  specialty: string;
+  date: string;
+  time: string;
+  location: string;
+  phone: string;
+  status: 'Agendada' | 'Realizada' | 'Cancelada';
+  observations?: string;
+}
+
+export interface AppointmentsContextType {
+  appointments: Appointment[];
+  addAppointment: (appointmentData: Omit<Appointment, 'id' | 'status'>) => void;
+  updateAppointment: (appointmentId: string, updatedData: Partial<Omit<Appointment, 'id'>>) => void;
+  // [NOVA FUNÇÃO] Adicionando a assinatura da função de exclusão ao nosso contrato
+  deleteAppointment: (appointmentId: string) => void;
+}
+
+const AppointmentsContext = createContext<AppointmentsContextType | undefined>(undefined);
+
+// Os dados iniciais permanecem os mesmos
+const initialAppointments: Appointment[] = [
+  {
+    id: '1',
+    doctorName: "Dr. João Silva",
+    specialty: "Cardiologia",
+    date: "2024-08-15",
+    time: "14:30",
+    status: "Agendada",
+    location: "Consultório A - 2º andar",
+    phone: "(11) 3333-4444",
+    observations: "Paciente relata dor no peito.",
+  },
+  {
+    id: '2',
+    doctorName: "Dra. Maria Santos",
+    specialty: "Dermatologia",
+    date: "2024-09-10",
+    time: "10:00",
+    status: "Agendada",
+    location: "Consultório B - 1º andar",
+    phone: "(11) 3333-5555",
+  },
+  {
+    id: '3',
+    doctorName: "Dr. Pedro Costa",
+    specialty: "Ortopedia",
+    date: "2024-07-08",
+    time: "16:00",
+    status: "Realizada",
+    location: "Consultório C - 3º andar",
+    phone: "(11) 3333-6666",
+  },
+];
+
+export function AppointmentsProvider({ children }: { children: ReactNode }) {
+  const [appointments, setAppointments] = useState<Appointment[]>(initialAppointments);
+
+  const addAppointment = (appointmentData: Omit<Appointment, 'id' | 'status'>) => {
+    const newAppointment: Appointment = {
+      id: Date.now().toString(),
+      status: 'Agendada',
+      ...appointmentData,
+    };
+    setAppointments((prev) => [...prev, newAppointment]);
+  };
+
+  const updateAppointment = (appointmentId: string, updatedData: Partial<Omit<Appointment, 'id'>>) => {
+    setAppointments((prev) =>
+      prev.map((apt) =>
+        apt.id === appointmentId ? { ...apt, ...updatedData } : apt
+      )
+    );
+  };
+
+  // [NOVA FUNÇÃO] Implementando a lógica de exclusão real
+  const deleteAppointment = (appointmentId: string) => {
+    setAppointments((prev) => 
+      // O método 'filter' cria um novo array com todos os itens
+      // EXCETO aquele cujo ID corresponde ao que queremos excluir.
+      prev.filter((apt) => apt.id !== appointmentId)
+    );
+  };
+
+  const value = {
+    appointments,
+    addAppointment,
+    updateAppointment,
+    deleteAppointment, // Disponibilizando a nova função para os componentes
+  };
+
+  return (
+    <AppointmentsContext.Provider value={value}>
+      {children}
+    </AppointmentsContext.Provider>
+  );
+}
+
+export function useAppointments() {
+  const context = useContext(AppointmentsContext);
+  if (context === undefined) {
+    throw new Error('useAppointments deve ser usado dentro de um AppointmentsProvider');
+  }
+  return context;
+}

app/doctor/consultas/page.tsx

@@ -0,0 +1,238 @@
+// ARQUIVO COMPLETO COM A INTERFACE CORRIGIDA: app/doctor/consultas/page.tsx
+
+"use client";
+
+import type React from "react";
+import { useState, useEffect, useMemo } from "react";
+import { useAuthLayout } from "@/hooks/useAuthLayout";
+import { appointmentsService } from "@/services/appointmentsApi.mjs";
+import { patientsService } from "@/services/patientsApi.mjs";
+import { doctorsService } from "@/services/doctorsApi.mjs";
+
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Calendar as CalendarShadcn } from "@/components/ui/calendar";
+import { Separator } from "@/components/ui/separator";
+import { Clock, Calendar as CalendarIcon, User, X, RefreshCw, Loader2, MapPin, Phone, List } from "lucide-react";
+import { format, isFuture, parseISO, isValid, isToday, isTomorrow } from "date-fns";
+import { ptBR } from "date-fns/locale";
+import { toast } from "sonner";
+import Sidebar from "@/components/Sidebar";
+
+// Interfaces (sem alteração)
+interface EnrichedAppointment {
+  id: string;
+  patientName: string;
+  patientPhone: string;
+  scheduled_at: string;
+  status: "requested" | "confirmed" | "completed" | "cancelled" | "checked_in" | "no_show";
+  location: string;
+}
+
+export default function DoctorAppointmentsPage() {
+  const { user, isLoading: isAuthLoading } = useAuthLayout({ requiredRole: "medico" });
+  
+  const [allAppointments, setAllAppointments] = useState<EnrichedAppointment[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
+
+  const fetchAppointments = async (authUserId: string) => {
+    setIsLoading(true);
+    try {
+      const allDoctors = await doctorsService.list();
+      const currentDoctor = allDoctors.find((doc: any) => doc.user_id === authUserId);
+      if (!currentDoctor) {
+        toast.error("Perfil de médico não encontrado para este usuário.");
+        return setIsLoading(false);
+      }
+      const doctorId = currentDoctor.id;
+
+      const [appointmentsList, patientsList] = await Promise.all([
+        appointmentsService.search_appointment(`doctor_id=eq.${doctorId}&order=scheduled_at.asc`),
+        patientsService.list()
+      ]);
+
+      const patientsMap = new Map<string, { name: string; phone: string }>(
+        patientsList.map((p: any) => [p.id, { name: p.full_name, phone: p.phone_mobile }])
+      );
+
+      const enrichedAppointments = appointmentsList.map((apt: any) => ({
+        id: apt.id,
+        patientName: patientsMap.get(apt.patient_id)?.name || "Paciente Desconhecido",
+        patientPhone: patientsMap.get(apt.patient_id)?.phone || "N/A",
+        scheduled_at: apt.scheduled_at,
+        status: apt.status,
+        location: "Consultório Principal",
+      }));
+
+      setAllAppointments(enrichedAppointments);
+    } catch (error) {
+      console.error("Erro ao carregar a agenda:", error);
+      toast.error("Não foi possível carregar sua agenda.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (user?.id) {
+      fetchAppointments(user.id);
+    }
+  }, [user]);
+
+  const groupedAppointments = useMemo(() => {
+    const appointmentsToDisplay = selectedDate
+      ? allAppointments.filter(app => app.scheduled_at && app.scheduled_at.startsWith(format(selectedDate, "yyyy-MM-dd")))
+      : allAppointments.filter(app => {
+        if (!app.scheduled_at) return false;
+        const dateObj = parseISO(app.scheduled_at);
+        return isValid(dateObj) && isFuture(dateObj);
+      });
+
+    return appointmentsToDisplay.reduce((acc, appointment) => {
+      const dateKey = format(parseISO(appointment.scheduled_at), "yyyy-MM-dd");
+      if (!acc[dateKey]) acc[dateKey] = [];
+      acc[dateKey].push(appointment);
+      return acc;
+    }, {} as Record<string, EnrichedAppointment[]>);
+  }, [allAppointments, selectedDate]);
+
+  const bookedDays = useMemo(() => {
+    return allAppointments
+      .map(app => app.scheduled_at ? new Date(app.scheduled_at) : null)
+      .filter((date): date is Date => date !== null);
+  }, [allAppointments]);
+
+  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 });
+  };
+
+  const statusPT: Record<string, string> = {
+      confirmed: "Confirmada",
+      completed: "Concluída",
+      cancelled: "Cancelada",
+      requested: "Solicitada",
+      no_show: "oculta",
+      checked_in: "Aguardando",
+  };
+
+  const getStatusVariant = (status: EnrichedAppointment['status']) => {
+    switch (status) {
+      case "confirmed": case "checked_in": return "text-foreground bg-blue-100 hover:bg-blue-150";
+      case "completed": return "text-foreground bg-green-100 hover:bg-green-150";
+      case "cancelled": case "no_show": return "text-foreground bg-red-200 hover:bg-red-250";
+      case "requested": return "text-foreground bg-yellow-100 hover:bg-yellow-150";
+      default: return "border-gray bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90";
+    }
+  };
+
+  const handleCancel = async (id: string) => {
+    // ... (função sem alteração)
+  };
+  const handleReSchedule = (id: string) => {
+    // ... (função sem alteração)
+  };
+
+  if (isAuthLoading) {
+    return <Sidebar><div>Carregando...</div></Sidebar>;
+  }
+
+  return (
+    <Sidebar>
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-3xl font-bold text-foreground">Agenda Médica</h1>
+          <p className="text-muted-foreground">Consultas para {user?.name || "você"}</p>
+        </div>
+        <div className="flex justify-between items-center">
+          <h2 className="text-xl font-semibold capitalize">
+            {selectedDate ? `Agenda de ${format(selectedDate, "dd/MM/yyyy")}` : "Próximas Consultas"}
+          </h2>
+          <div className="flex gap-2">
+            <Button onClick={() => setSelectedDate(undefined)} variant="ghost" size="sm"><List className="mr-2 h-4 w-4" />Mostrar Todas</Button>
+            <Button onClick={() => user?.id && fetchAppointments(user.id)} disabled={isLoading} variant="outline" size="sm"><RefreshCw className={`mr-2 h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />Atualizar</Button>
+          </div>
+        </div>
+        <div className="grid lg:grid-cols-3 gap-6">
+          <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>
+          <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">{selectedDate ? "Não há agendamentos para esta data." : "Não há próximas 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) => {
+                      const showActions = appointment.status === "requested" || appointment.status === "confirmed";
+                      const scheduledAtDate = parseISO(appointment.scheduled_at);
+                      return (
+                        // *** INÍCIO DA MUDANÇA NO CARD ***
+                        <Card key={appointment.id} className="shadow-sm hover:shadow-md transition-shadow">
+                          <CardContent className="p-4 grid grid-cols-3 items-center gap-4">
+                            {/* Coluna 1: Nome e 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.patientName}
+                              </div>
+                              <div className="flex items-center text-sm text-muted-foreground">
+                                <Clock className="mr-2 h-4 w-4" />
+                                {format(scheduledAtDate, "HH:mm")}
+                              </div>
+                            </div>
+
+                            {/* Coluna 2: Status e Telefone */}
+                            <div className="col-span-1 flex flex-col items-center gap-2">
+                               <Badge variant="outline" className={getStatusVariant(appointment.status)}>{statusPT[appointment.status].replace('_', ' ')}</Badge>
+                               <div className="flex items-center text-sm text-muted-foreground">
+                                <Phone className="mr-2 h-4 w-4" />
+                                {appointment.patientPhone}
+                              </div>
+                            </div>
+
+                            {/* Coluna 3: Ações */}
+                            <div className="col-span-1 flex justify-end">
+                              {showActions && (
+                                <div className="flex flex-col sm:flex-row gap-2">
+                                  <Button variant="outline" size="sm" onClick={() => handleReSchedule(appointment.id)}>
+                                    <RefreshCw className="mr-1.5 h-4 w-4" />Reagendar
+                                  </Button>
+                                  <Button variant="destructive" size="sm" onClick={() => handleCancel(appointment.id)}>
+                                    <X className="mr-1.5 h-4 w-4" />Cancelar
+                                  </Button>
+                                </div>
+                              )}
+                            </div>
+                          </CardContent>
+                        </Card>
+                        // *** FIM DA MUDANÇA NO CARD ***
+                      );
+                    })}
+                  </div>
+                  <Separator className="my-6" />
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+    </Sidebar>
+  );
+}

app/doctor/dashboard/page.tsx

@@ -0,0 +1,416 @@
+"use client";
+
+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, useMemo } from "react"; // Adicionado useMemo
+import { toast } from "@/hooks/use-toast";
+
+import { useAuthLayout } from "@/hooks/useAuthLayout";
+import { patientsService } from "@/services/patientsApi.mjs";
+import { appointmentsService } from "@/services/appointmentsApi.mjs";
+import { format, parseISO, isAfter, isSameMonth, startOfToday } from "date-fns";
+import { ptBR } from "date-fns/locale";
+
+import { AvailabilityService } from "@/services/availabilityApi.mjs";
+import { exceptionsService } from "@/services/exceptionApi.mjs";
+import { doctorsService } from "@/services/doctorsApi.mjs";
+import { usersService } from "@/services/usersApi.mjs";
+import Sidebar from "@/components/Sidebar";
+import WeeklyScheduleCard from "@/components/ui/WeeklyScheduleCard";
+
+
+type Appointment = {
+    id: string;
+    doctor_id: string;
+    patient_id: string;
+    scheduled_at: string;
+    status: string;
+};
+
+type EnrichedAppointment = Appointment & {
+    patientName: string;
+};
+
+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;
+};
+
+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;
+    doctor_id: string;
+    date: string;
+    start_time: string | null;
+    end_time: string | null;
+    kind: "bloqueio" | "disponibilidade";
+    reason: string | null;
+    created_at: string;
+    created_by: string;
+}
+
+type Patient = {
+    id: string;
+    full_name: string;
+};
+
+export default function DoctorDashboard() {
+    // --- CORREÇÃO CRÍTICA DO LOOP ---
+    // Usamos useMemo para garantir que o array de roles seja uma referência estável
+    // e não dispare o useEffect do useAuthLayout infinitamente.
+    const requiredRoles = useMemo(() => ['medico'], []);
+    const { user } = useAuthLayout({ requiredRole: requiredRoles });
+
+    const [loggedDoctor, setLoggedDoctor] = useState<Doctor | null>(null);
+    const [userData, setUserData] = useState<UserData>();
+    const [availability, setAvailability] = useState<any | null>(null);
+    const [exceptions, setExceptions] = useState<Exception[]>([]);
+    const [schedule, setSchedule] = useState<Record<string, { start: string; end: string }[]>>({});
+    const formatTime = (time?: string | null) => time?.split(":")?.slice(0, 2).join(":") ?? "";
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const [exceptionToDelete, setExceptionToDelete] = useState<string | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    const [nextAppointment, setNextAppointment] = useState<EnrichedAppointment | null>(null);
+    const [monthlyCount, setMonthlyCount] = useState<number>(0);
+
+    const weekdaysPT: Record<string, string> = { sunday: "Domingo", monday: "Segunda", tuesday: "Terça", wednesday: "Quarta", thursday: "Quinta", friday: "Sexta", saturday: "Sábado" };
+
+    useEffect(() => {
+        const fetchData = async () => {
+            if (!user?.id) return;
+
+            try {
+                const doctorsList: Doctor[] = await doctorsService.list();
+                const currentDoctor = doctorsList.find(doc => doc.user_id === user.id);
+
+                if (!currentDoctor) {
+                    setError("Perfil de médico não encontrado para este usuário.");
+                    return;
+                }
+                setLoggedDoctor(currentDoctor);
+
+                const [appointmentsList, patientsList, availabilityList, exceptionsList] = await Promise.all([
+                    appointmentsService.list(),
+                    patientsService.list(),
+                    AvailabilityService.list(),
+                    exceptionsService.list()
+                ]);
+
+                const patientsMap = new Map(patientsList.map((p: Patient) => [p.id, p.full_name]));
+
+                const doctorAppointments = appointmentsList
+                    .filter((apt: Appointment) => apt.doctor_id === currentDoctor.id)
+                    .map((apt: Appointment): EnrichedAppointment => ({
+                        ...apt,
+                        patientName: String(patientsMap.get(apt.patient_id) || "Paciente Desconhecido"),
+                    }));
+
+                const today = startOfToday();
+                const upcomingAppointments = doctorAppointments
+                    .filter(apt => isAfter(parseISO(apt.scheduled_at), today))
+                    .sort((a, b) => new Date(a.scheduled_at).getTime() - new Date(b.scheduled_at).getTime());
+                setNextAppointment(upcomingAppointments[0] || null);
+
+                const activeStatuses = ['confirmed', 'requested', 'checked_in'];
+                const currentMonthAppointments = doctorAppointments.filter(apt =>
+                    isSameMonth(parseISO(apt.scheduled_at), new Date()) && activeStatuses.includes(apt.status)
+                );
+                setMonthlyCount(currentMonthAppointments.length);
+
+                setAvailability(availabilityList.filter((d: any) => d.doctor_id === currentDoctor.id));
+                setExceptions(exceptionsList.filter((e: any) => e.doctor_id === currentDoctor.id));
+
+            } catch (e: any) {
+                setError(e?.message || "Erro ao buscar dados do dashboard");
+                console.error("Erro no dashboard:", e);
+            }
+        };
+
+        fetchData();
+    }, [user?.id]); 
+
+    function findDoctorById(id: string, doctors: Doctor[]) {
+        return doctors.find((doctor) => doctor.user_id === id);
+    }
+
+    const openDeleteDialog = (exceptionId: string) => {
+        setExceptionToDelete(exceptionId);
+        setDeleteDialogOpen(true);
+    };
+
+    const handleDeleteException = async (ExceptionId: string) => {
+        try {
+            const res = await exceptionsService.delete(ExceptionId);
+            if (res && res.error) { throw new Error(res.message || "A API retornou um erro"); }
+            toast({ title: "Sucesso", description: "Exceção deletada com sucesso" });
+            setExceptions((prev: Exception[]) => prev.filter((p) => String(p.id) !== String(ExceptionId)));
+        } catch (e: any) {
+            toast({ title: "Erro", description: e?.message || "Não foi possível deletar a exceção" });
+        }
+        setDeleteDialogOpen(false);
+        setExceptionToDelete(null);
+    };
+
+    function formatAvailability(data: Availability[]) {
+        if (!data) return {};
+        const schedule = data.reduce((acc: any, item) => {
+            const { weekday, start_time, end_time } = item;
+            if (!acc[weekday]) acc[weekday] = [];
+            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]);
+
+    return (
+        <Sidebar>
+            <div className="space-y-6">
+                <div>
+                    <h1 className="text-3xl font-bold">Dashboard</h1>
+                    <p className="text-muted-foreground">
+                        Bem-vindo ao seu portal de consultas médicas
+                    </p>
+                </div>
+
+                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <Card>
+                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                            <CardTitle className="text-sm font-medium">Próxima Consulta</CardTitle>
+                            <Calendar className="h-4 w-4 text-muted-foreground" />
+                        </CardHeader>
+                        <CardContent>
+                            {nextAppointment ? (
+                                <>
+                                    <p className="text-2xl font-bold capitalize">
+                                        {nextAppointment.patientName} - {format(parseISO(nextAppointment.scheduled_at), "HH:mm")}
+                                    </p>
+                                    <div className="text-x text-muted-foreground">
+                                        {format(parseISO(nextAppointment.scheduled_at), "dd MMM", { locale: ptBR })}
+                                    </div>
+                                </>
+                            ) : (
+                                <>
+                                    <div className="text-2xl font-bold">Nenhuma</div>
+                                    <p className="text-xs text-muted-foreground">Sem próximas consultas</p>
+                                </>
+                            )}
+                        </CardContent>
+                    </Card>
+
+                    <Card>
+                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                            <CardTitle className="text-sm font-medium">Consultas Este Mês</CardTitle>
+                            <Clock className="h-4 w-4 text-muted-foreground" />
+                        </CardHeader>
+                        <CardContent>
+                            <div className="text-2xl font-bold">{monthlyCount}</div>
+                            <p className="text-xs text-muted-foreground">{monthlyCount === 1 ? '1 agendada' : `${monthlyCount} agendadas`}</p>
+                        </CardContent>
+                    </Card>
+
+                    <Card>
+                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                            <CardTitle className="text-sm font-medium">Perfil</CardTitle>
+                            <User className="h-4 w-4 text-muted-foreground" />
+                        </CardHeader>
+                        <CardContent>
+                            <div className="text-2xl font-bold">100%</div>
+                            <p className="text-xs text-muted-foreground">Dados completos</p>
+                        </CardContent>
+                    </Card>
+                </div>
+
+                <div className="grid md:grid-cols-2 gap-6">
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Ações Rápidas</CardTitle>
+                            <CardDescription>Acesse rapidamente as principais funcionalidades</CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-4">
+                            <Link href="/doctor/consultas">
+                                <Button className="w-full justify-start">
+                                    <Calendar className="mr-2 h-4 w-4" />
+                                    Ver Minhas Consultas
+                                </Button>
+                            </Link>
+                        </CardContent>
+                    </Card>
+
+
+                </div>
+                <div className="grid md:grid-cols-1 gap-6">
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Horário Semanal</CardTitle>
+                            <CardDescription>Confira rapidamente a sua disponibilidade da semana</CardDescription>
+                        </CardHeader>
+                        <CardContent>{loggedDoctor && <WeeklyScheduleCard doctorId={loggedDoctor.id} />}</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: Exception) => {
+                                    const date = new Date(ex.date).toLocaleDateString("pt-BR", {
+                                        weekday: "long",
+                                        day: "2-digit",
+                                        month: "long",
+                                        timeZone: "UTC"
+                                    });
+
+                                    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-primary/10 rounded-lg shadow-sm">
+                                                <div className="text-center">
+                                                    <p className="font-semibold capitalize">{date}</p>
+                                                    <p className="text-sm text-muted-foreground">
+                                                        {startTime && endTime
+                                                            ? `${startTime} - ${endTime}`
+                                                            : "Dia todo"}
+                                                    </p>
+                                                </div>
+                                                <div className="text-center mt-2">
+                                                    <p className={`text-sm font-medium ${ex.kind === "bloqueio" ? "text-destructive" : "text-primary"}`}>{ex.kind === "bloqueio" ? "Bloqueio" : "Liberação"}</p>
+                                                    <p className="text-xs text-muted-foreground italic">{ex.reason || "Sem motivo especificado"}</p>
+                                                </div>
+                                                <div>
+                                                    <Button className="text-destructive" variant="outline" onClick={() => openDeleteDialog(String(ex.id))}>
+                                                        <Trash2></Trash2>
+                                                    </Button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    );
+                                })
+                            ) : (
+                                <p className="text-sm text-muted-foreground 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 esta exceção? Esta ação não pode ser desfeita.</AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                            <AlertDialogCancel>Cancelar</AlertDialogCancel>
+                            <AlertDialogAction onClick={() => exceptionToDelete && handleDeleteException(exceptionToDelete)} className="bg-destructive hover:bg-destructive/90">
+                                Excluir
+                            </AlertDialogAction>
+                        </AlertDialogFooter>
+                    </AlertDialogContent>
+                </AlertDialog>
+            </div>
+        </Sidebar>
+    );
+}

app/doctor/disponibilidade/excecoes/page.tsx

@@ -0,0 +1,258 @@
+"use client";
+
+import type React from "react";
+import Link from "next/link";
+import { useState, useEffect } from "react";
+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 { Calendar as CalendarIcon, RefreshCw } from "lucide-react";
+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
+import { doctorsService } from "@/services/doctorsApi.mjs";
+import Sidebar from "@/components/Sidebar";
+
+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 {
+    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;
+}
+
+// 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 [loggedDoctor, setLoggedDoctor] = useState<Doctor>();
+    const [tipo, setTipo] = useState<string>("");
+   
+    useEffect(() => {
+      const fetchData = async () => {
+        try {
+          const doctorsList: Doctor[] = await doctorsService.list();
+          const doctor = doctorsList[0];
+    
+          // Salva no estado
+          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[]>([]);
+
+    // 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: loggedDoctor?.id,
+            created_by: loggedDoctor?.user_id,
+            date: selectedCalendarDate ? format(selectedCalendarDate, "yyyy-MM-dd") : "",
+            start_time: ((formData.get("horarioEntrada")?formData.get("horarioEntrada") + ":00":null) as string) || null,
+            end_time: ((formData.get("horarioSaida")?formData.get("horarioSaida") + ":00":null) as string) || null,
+            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 (
+        <Sidebar>
+            <div className="space-y-6">
+                <div>
+                    <h1 className="text-3xl font-bold text-foreground">Adicione exceções</h1>
+                    <p className="text-muted-foreground">Altere a disponibilidade em casos especiais para o Dr. João Silva</p>
+                </div>
+
+                <div className="flex justify-between items-center">
+                    <h2 className="text-xl font-semibold text-foreground">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-muted-foreground">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-muted-foreground">Carregando a agenda...</p>
+                        ) : !selectedCalendarDate ? (
+                            <p className="text-center text-lg text-muted-foreground">Selecione uma data.</p>
+                        ) : (
+                            <form className="space-y-6" onSubmit={handleSubmit}>
+                                <div className="bg-card rounded-lg border border-border p-6">
+                                    <h2 className="text-lg font-semibold text-foreground mb-6">Dados </h2>
+                                    <div className="space-y-6">
+                                        <div className="grid md:grid-cols-5 gap-6">
+                                            <div>
+                                                <Label htmlFor="horarioEntrada" className="text-sm font-medium text-foreground">
+                                                    Horario De Entrada
+                                                </Label>
+                                                <Input type="time" id="horarioEntrada" name="horarioEntrada" className="mt-1" />
+                                            </div>
+                                            <div>
+                                                <Label htmlFor="horarioSaida" className="text-sm font-medium text-foreground">
+                                                    Horario De Saida
+                                                </Label>
+                                                <Input type="time" id="horarioSaida" name="horarioSaida" className="mt-1" />
+                                            </div>
+                                        </div>
+
+                                        <div>
+                                            <Label htmlFor="tipo" className="text-sm font-medium text-foreground">
+                                                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="disponibilidade_extra">Disponibilidade extra</SelectItem>
+                                                </SelectContent>
+                                            </Select>
+                                        </div>
+                                        <div>
+                                            <Label htmlFor="reason" className="text-sm font-medium text-foreground">
+                                                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 text-white">
+                                        Salvar Exceção
+                                    </Button>
+                                </div>
+                            </form>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </Sidebar>
+    );
+}

app/doctor/disponibilidade/page.tsx

@@ -0,0 +1,638 @@
+"use client";
+
+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 { 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 { Edit, 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";
+import Sidebar from "@/components/Sidebar";
+
+// ... (Interfaces de tipo omitidas para brevidade, pois não foram alteradas)
+
+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;
+}
+
+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);
+
+  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 loggedUser = await usersService.getMe();
+            const doctorList = await doctorsService.list();
+            setUserData(loggedUser);
+            const doctor = findDoctorById(loggedUser.user.id, doctorList);
+            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;
+    setIsLoading(true);
+    const form = e.currentTarget;
+    const formData = new FormData(form);
+
+    const apiPayload = {
+      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,
+      slot_minutes: Number(formData.get("duracaoConsulta")) || undefined,
+      appointment_type: modalidadeConsulta || undefined,
+      active: true,
+    };
+    console.log(apiPayload);
+
+    try {
+      const res = await AvailabilityService.create(apiPayload);
+      console.log(res);
+
+      let message = "disponibilidade 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("#"); // adicionar página para listar a disponibilidade
+        } catch (err: any) {
+            toast({
+                title: "Erro",
+                description: err?.message || "Não foi possível criar a disponibilidade",
+            });
+        } finally {
+            fetchData()
+            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",
+                });
+            }
+            fetchData()
+            setDeleteDialogOpen(false);
+            setSelectedAvailability(null);
+        };
+
+  return (
+    <Sidebar>
+      <div className="space-y-6 flex-1 overflow-y-auto p-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-bold">
+              Definir Disponibilidade
+            </h1>
+            <p className="text-muted-foreground">
+              Defina sua disponibilidade para consultas{" "}
+            </p>
+          </div>
+        </div>
+
+        <form className="space-y-6" onSubmit={handleSubmit}>
+          <div className="bg-card rounded-lg border p-6">
+            <h2 className="text-lg font-semibold mb-6">Dados </h2>
+
+            <div className="space-y-6">
+              {/* **AJUSTE DE RESPONSIVIDADE: DIAS DA SEMANA** */}
+              <div>
+                <Label className="text-sm font-medium">
+                  Dia Da Semana
+                </Label>
+                {/* O antigo 'flex gap-4 mt-2 flex-nowrap' foi substituído por um grid responsivo: */}
+                <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-x-4 gap-y-2 mt-2">
+                  <label className="flex items-center gap-1">
+                    <input
+                      type="radio"
+                      name="weekday"
+                      value="monday"
+                      className="text-primary"
+                    />
+                    <span className="whitespace-nowrap text-sm">Segunda</span>
+                  </label>
+                  <label className="flex items-center gap-1">
+                    <input
+                      type="radio"
+                      name="weekday"
+                      value="tuesday"
+                      className="text-primary"
+                    />
+                    <span className="whitespace-nowrap text-sm">Terça</span>
+                  </label>
+                  <label className="flex items-center gap-1">
+                    <input
+                      type="radio"
+                      name="weekday"
+                      value="wednesday"
+                      className="text-primary"
+                    />
+                    <span className="whitespace-nowrap text-sm">Quarta</span>
+                  </label>
+                  <label className="flex items-center gap-1">
+                    <input
+                      type="radio"
+                      name="weekday"
+                      value="thursday"
+                      className="text-primary"
+                    />
+                    <span className="whitespace-nowrap text-sm">Quinta</span>
+                  </label>
+                  <label className="flex items-center gap-1">
+                    <input
+                      type="radio"
+                      name="weekday"
+                      value="friday"
+                      className="text-primary"
+                    />
+                    <span className="whitespace-nowrap text-sm">Sexta</span>
+                  </label>
+                  <label className="flex items-center gap-1">
+                    <input
+                      type="radio"
+                      name="weekday"
+                      value="saturday"
+                      className="text-primary"
+                    />
+                    <span className="whitespace-nowrap text-sm">Sábado</span>
+                  </label>
+                  <label className="flex items-center gap-1">
+                    <input
+                      type="radio"
+                      name="weekday"
+                      value="sunday"
+                      className="text-primary"
+                    />
+                    <span className="whitespace-nowrap text-sm">Domingo</span>
+                  </label>
+                </div>
+              </div>
+
+              {/* **AJUSTE DE RESPONSIVIDADE: HORÁRIO E DURAÇÃO** */}
+              {/* Ajustado para 1 coluna em móvel, 2 em tablet e 5 em desktop (mantendo o que já existia com ajustes) */}
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6">
+                <div>
+                  <Label
+                    htmlFor="horarioEntrada"
+                    className="text-sm font-medium"
+                  >
+                    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"
+                  >
+                    Horario De Saida
+                  </Label>
+                  <Input
+                    type="time"
+                    id="horarioSaida"
+                    name="horarioSaida"
+                    required
+                    className="mt-1"
+                  />
+                </div>
+                <div>
+                  <Label
+                    htmlFor="duracaoConsulta"
+                    className="text-sm font-medium whitespace-nowrap"
+                  >
+                  Duração da Consulta(min)
+                  </Label>
+                  <Input
+                    type="number"
+                    id="duracaoConsulta"
+                    name="duracaoConsulta"
+                    required
+                    className="mt-1"
+                  />
+                </div>
+                {/* O Select de modalidade fica fora deste grid para ocupar uma linha inteira em telas menores, como no original, garantindo clareza */}
+              </div>
+
+              <div>
+                <Label
+                  htmlFor="modalidadeConsulta"
+                  className="text-sm font-medium"
+                >
+                  Modalidade De Consulta
+                </Label>
+                <Select
+                  onValueChange={(value) => setModalidadeConsulta(value)}
+                  value={modalidadeConsulta}
+                >
+                  <SelectTrigger className="mt-1">
+                    <SelectValue placeholder="Selecione" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="presencial">Presencial </SelectItem>
+                    <SelectItem value="telemedicina">Telemedicina</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </div>
+
+                    {/* **AJUSTE DE RESPONSIVIDADE: BOTÕES DE AÇÃO** */}
+                    {/* Alinha à direita em telas maiores e empilha (com o botão primário no final) em telas menores */}
+                    {/* Alteração aqui: Adicionado w-full aos Links e Buttons para ocuparem a largura total em telas pequenas */}
+                    <div className="flex flex-col-reverse sm:flex-row sm:justify-between gap-4">
+                        <Link href="/doctor/disponibilidade/excecoes" className="w-full sm:w-auto">
+                            <Button variant="default" className="w-full sm:w-auto">Adicionar Exceção</Button>
+                        </Link>
+                        <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto"> {/* Ajustado para empilhar os botões Cancelar e Salvar em telas pequenas */}
+                            <Link href="/doctor/dashboard" className="w-full sm:w-auto">
+                                <Button variant="outline" className="w-full sm:w-auto">Cancelar</Button>
+                            </Link>
+                            <Button type="submit" className="bg-primary hover:bg-primary/90 w-full sm:w-auto">
+                                Salvar Disponibilidade
+                            </Button>
+                        </div>
+                    </div>
+                </form>
+                
+                {/* **AJUSTE DE RESPONSIVIDADE: CARD DE HORÁRIO SEMANAL** */}
+                <div>
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Horário Semanal</CardTitle>
+                            <CardDescription>Confira ou altere a sua disponibilidade da semana</CardDescription>
+                        </CardHeader>
+                        {/* Define um grid responsivo para os dias da semana (1 coluna em móvel, 2 em pequeno, 3 em médio e 7 em telas grandes) */}
+                        <CardContent className="space-y-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg: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-start p-3 bg-primary/10 rounded-lg min-h-[76px] ">
+                                            <p className="font-medium capitalize text-center ">{weekdaysPT[day]}</p>
+                                            <div className="text-center w-full mt-2">
+                                                {times.length > 0 ? (
+                                                    times.map((t, i) => (
+                                                        <div key={i}>
+                                                            <DropdownMenu>
+                                                                <DropdownMenuTrigger asChild>
+                                                                    <p  className="text-sm text-muted-foreground cursor-pointer rounded hover:text-accent-foreground hover:bg-muted transition-colors duration-150">
+                                                                        {formatTime(t.start)} - {formatTime(t.end)}
+                                                                    </p>
+                                                                </DropdownMenuTrigger>
+                                                                <DropdownMenuContent align="end">
+                                                                    <DropdownMenuItem onClick={() => handleOpenModal(t, day)}>
+                                                                    <Edit className="w-4 h-4 mr-2" />
+                                                                    Editar
+                                                                    </DropdownMenuItem>
+                                                                    <DropdownMenuItem
+                                                                    onClick={() => openDeleteDialog(t, day)}
+                                                                    className="text-destructive focus:bg-destructive/10 focus:text-destructive">
+                                                                    <Trash2 className="w-4 h-4 mr-2" />
+                                                                    Excluir
+                                                                    </DropdownMenuItem>
+                                                                </DropdownMenuContent>
+                                                            </DropdownMenu>
+                                                        </div>
+                                                    ))
+                                                ) : (
+                                                    <p className="text-sm text-muted-foreground italic">Sem horário</p>
+                                                )}
+                                            </div>
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </CardContent>
+                    </Card>
+                </div>
+                
+                {/* AlertDialog e Modal de Edição (não precisam de grandes ajustes de layout, apenas garantindo que os componentes sejam responsivos internamente) */}
+                <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-destructive hover:bg-destructive/90">
+                                    Excluir
+                                </AlertDialogAction>
+                        </AlertDialogFooter>
+                    </AlertDialogContent>
+                </AlertDialog>
+            </div>
+            <AvailabilityEditModal
+                availability={selectedAvailability}
+                isOpen={isModalOpen}
+                onClose={handleCloseModal}
+                onSubmit={handleEdit}
+            />
+            
+        </Sidebar>
+    );
+}

app/doctor/login/page.tsx

@@ -0,0 +1,31 @@
+// Caminho: app/(doctor)/login/page.tsx
+
+import { LoginForm } from "@/components/LoginForm";
+import Link from "next/link"; // Adicionado para o link de "Voltar"
+
+export default function DoctorLoginPage() {
+    // NOTA: Esta página se tornou obsoleta com a criação do /login central.
+    // O ideal no futuro é deletar esta página e redirecionar os usuários.
+
+    return (
+        <div className="min-h-screen bg-gradient-to-br from-green-50 via-white to-green-50 flex items-center justify-center p-4">
+            <div className="w-full max-w-md text-center">
+                <h1 className="text-3xl font-bold text-foreground mb-2">Área do Médico</h1>
+                <p className="text-muted-foreground mb-8">Acesse o sistema médico</p>
+
+                {/* --- ALTERAÇÃO PRINCIPAL AQUI --- */}
+                {/* Chamando o LoginForm unificado sem props desnecessárias */}
+                <LoginForm>
+                    {/* Adicionamos um link de "Voltar" como filho (children) */}
+                    <div className="mt-6 text-center text-sm">
+                        <Link href="/">
+                            <span className="font-semibold text-primary hover:underline cursor-pointer">
+                                Voltar à página inicial
+                            </span>
+                        </Link>
+                    </div>
+                </LoginForm>
+            </div>
+        </div>
+    );
+}

app/doctor/medicos/[id]/editar/page.tsx

@@ -0,0 +1,517 @@
+"use client";
+
+import type React from "react";
+
+import { useState, useEffect } from "react";
+import { useRouter, useParams } from "next/navigation";
+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 { Textarea } from "@/components/ui/textarea";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ArrowLeft, Save } from "lucide-react";
+import Link from "next/link";
+import Sidebar from "@/components/Sidebar";
+
+// Mock data - in a real app, this would come from an API
+const mockDoctors = [
+    {
+        id: 1,
+        nome: "Dr. Carlos Silva",
+        cpf: "123.456.789-00",
+        rg: "12.345.678-9",
+        sexo: "masculino",
+        dataNascimento: "1980-05-15",
+        etnia: "branca",
+        raca: "caucasiana",
+        naturalidade: "Aracaju",
+        nacionalidade: "brasileira",
+        profissao: "Médico",
+        estadoCivil: "casado",
+        nomeMae: "Ana Silva",
+        nomePai: "José Silva",
+        nomeEsposo: "Maria Silva",
+        crm: "CRM/SE 12345",
+        especialidade: "Cardiologia",
+        email: "carlos@email.com",
+        celular: "(79) 99999-1234",
+        telefone1: "(79) 3214-5678",
+        telefone2: "",
+        cep: "49000-000",
+        endereco: "Rua dos Médicos, 123",
+        numero: "123",
+        complemento: "Sala 101",
+        bairro: "Centro",
+        cidade: "Aracaju",
+        estado: "SE",
+        tipoSanguineo: "A+",
+        peso: "80",
+        altura: "1.80",
+        alergias: "Nenhuma alergia conhecida",
+        convenio: "Particular",
+        plano: "Premium",
+        numeroMatricula: "123456789",
+        validadeCarteira: "2025-12-31",
+        observacoes: "Médico experiente",
+    },
+];
+
+export default function EditarMedicoPage() {
+    const router = useRouter();
+    const params = useParams();
+    const doctorId = Number.parseInt(params.id as string);
+
+    const [formData, setFormData] = useState({
+        nome: "",
+        cpf: "",
+        rg: "",
+        sexo: "",
+        dataNascimento: "",
+        etnia: "",
+        raca: "",
+        naturalidade: "",
+        nacionalidade: "",
+        profissao: "",
+        estadoCivil: "",
+        nomeMae: "",
+        nomePai: "",
+        nomeEsposo: "",
+        crm: "",
+        especialidade: "",
+        email: "",
+        celular: "",
+        telefone1: "",
+        telefone2: "",
+        cep: "",
+        endereco: "",
+        numero: "",
+        complemento: "",
+        bairro: "",
+        cidade: "",
+        estado: "",
+        tipoSanguineo: "",
+        peso: "",
+        altura: "",
+        alergias: "",
+        convenio: "",
+        plano: "",
+        numeroMatricula: "",
+        validadeCarteira: "",
+        observacoes: "",
+    });
+
+    const [isGuiaConvenio, setIsGuiaConvenio] = useState(false);
+    const [validadeIndeterminada, setValidadeIndeterminada] = useState(false);
+
+    useEffect(() => {
+        // Load doctor data
+        const doctor = mockDoctors.find((d) => d.id === doctorId);
+        if (doctor) {
+            setFormData(doctor);
+        }
+    }, [doctorId]);
+
+    const handleInputChange = (field: string, value: string) => {
+        setFormData((prev) => ({ ...prev, [field]: value }));
+    };
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        console.log("[v0] Updating doctor:", formData);
+        // Here you would typically send the data to your API
+        router.push("/medicos");
+    };
+
+    return (
+        <Sidebar>
+            <div className="space-y-6">
+                <div className="flex items-center gap-4">
+                    <Link href="/medicos">
+                        <Button variant="ghost" size="sm">
+                            <ArrowLeft className="w-4 h-4 mr-2" />
+                            Voltar
+                        </Button>
+                    </Link>
+                    <div>
+                        <h1 className="text-2xl font-bold text-gray-900">Editar Médico</h1>
+                        <p className="text-gray-600">Atualize as informações do médico</p>
+                    </div>
+                </div>
+
+                <form onSubmit={handleSubmit} className="space-y-8">
+                    <div className="bg-white rounded-lg border border-gray-200 p-6">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Dados Pessoais</h2>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="nome">Nome *</Label>
+                                <Input id="nome" value={formData.nome} onChange={(e) => handleInputChange("nome", e.target.value)} required />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="cpf">CPF *</Label>
+                                <Input id="cpf" value={formData.cpf} onChange={(e) => handleInputChange("cpf", e.target.value)} placeholder="000.000.000-00" required />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="rg">RG</Label>
+                                <Input id="rg" value={formData.rg} onChange={(e) => handleInputChange("rg", e.target.value)} placeholder="00.000.000-0" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label>Sexo *</Label>
+                                <div className="flex gap-4">
+                                    <div className="flex items-center space-x-2">
+                                        <input type="radio" id="masculino" name="sexo" value="masculino" checked={formData.sexo === "masculino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-blue-600" />
+                                        <Label htmlFor="masculino">Masculino</Label>
+                                    </div>
+                                    <div className="flex items-center space-x-2">
+                                        <input type="radio" id="feminino" name="sexo" value="feminino" checked={formData.sexo === "feminino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-blue-600" />
+                                        <Label htmlFor="feminino">Feminino</Label>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="dataNascimento">Data de nascimento *</Label>
+                                <Input id="dataNascimento" type="date" value={formData.dataNascimento} onChange={(e) => handleInputChange("dataNascimento", e.target.value)} required />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="etnia">Etnia</Label>
+                                <Select value={formData.etnia} onValueChange={(value) => handleInputChange("etnia", value)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Selecione" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="branca">Branca</SelectItem>
+                                        <SelectItem value="preta">Preta</SelectItem>
+                                        <SelectItem value="parda">Parda</SelectItem>
+                                        <SelectItem value="amarela">Amarela</SelectItem>
+                                        <SelectItem value="indigena">Indígena</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="raca">Raça</Label>
+                                <Select value={formData.raca} onValueChange={(value) => handleInputChange("raca", value)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Selecione" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="caucasiana">Caucasiana</SelectItem>
+                                        <SelectItem value="negroide">Negroide</SelectItem>
+                                        <SelectItem value="mongoloide">Mongoloide</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="naturalidade">Naturalidade</Label>
+                                <Input id="naturalidade" value={formData.naturalidade} onChange={(e) => handleInputChange("naturalidade", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="nacionalidade">Nacionalidade</Label>
+                                <Select value={formData.nacionalidade} onValueChange={(value) => handleInputChange("nacionalidade", value)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Selecione" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="brasileira">Brasileira</SelectItem>
+                                        <SelectItem value="estrangeira">Estrangeira</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="profissao">Profissão</Label>
+                                <Input id="profissao" value={formData.profissao} onChange={(e) => handleInputChange("profissao", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="estadoCivil">Estado civil</Label>
+                                <Select value={formData.estadoCivil} onValueChange={(value) => handleInputChange("estadoCivil", value)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Selecione" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="solteiro">Solteiro(a)</SelectItem>
+                                        <SelectItem value="casado">Casado(a)</SelectItem>
+                                        <SelectItem value="divorciado">Divorciado(a)</SelectItem>
+                                        <SelectItem value="viuvo">Viúvo(a)</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="nomeMae">Nome da mãe</Label>
+                                <Input id="nomeMae" value={formData.nomeMae} onChange={(e) => handleInputChange("nomeMae", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="nomePai">Nome do pai</Label>
+                                <Input id="nomePai" value={formData.nomePai} onChange={(e) => handleInputChange("nomePai", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="nomeEsposo">Nome do esposo(a)</Label>
+                                <Input id="nomeEsposo" value={formData.nomeEsposo} onChange={(e) => handleInputChange("nomeEsposo", e.target.value)} />
+                            </div>
+                        </div>
+
+                        <div className="mt-6">
+                            <div className="flex items-center space-x-2">
+                                <Checkbox id="guiaConvenio" checked={isGuiaConvenio} onCheckedChange={(checked) => setIsGuiaConvenio(checked === true)} />
+                                <Label htmlFor="guiaConvenio">RN na Guia do convênio</Label>
+                            </div>
+                        </div>
+
+                        <div className="mt-6">
+                            <Label htmlFor="observacoes">Observações</Label>
+                            <Textarea id="observacoes" value={formData.observacoes} onChange={(e) => handleInputChange("observacoes", e.target.value)} placeholder="Digite observações sobre o médico..." className="mt-2" />
+                        </div>
+                    </div>
+
+                    {/* Professional Information Section */}
+                    <div className="bg-white rounded-lg border border-gray-200 p-6">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Informações Profissionais</h2>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="crm">CRM *</Label>
+                                <Input id="crm" value={formData.crm} onChange={(e) => handleInputChange("crm", e.target.value)} placeholder="CRM/UF 12345" required />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="especialidade">Especialidade *</Label>
+                                <Select value={formData.especialidade} onValueChange={(value) => handleInputChange("especialidade", value)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Selecione a especialidade" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="Cardiologia">Cardiologia</SelectItem>
+                                        <SelectItem value="Pediatria">Pediatria</SelectItem>
+                                        <SelectItem value="Ortopedia">Ortopedia</SelectItem>
+                                        <SelectItem value="Neurologia">Neurologia</SelectItem>
+                                        <SelectItem value="Ginecologia">Ginecologia</SelectItem>
+                                        <SelectItem value="Dermatologia">Dermatologia</SelectItem>
+                                        <SelectItem value="Psiquiatria">Psiquiatria</SelectItem>
+                                        <SelectItem value="Oftalmologia">Oftalmologia</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Contact Section */}
+                    <div className="bg-white rounded-lg border border-gray-200 p-6">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Contato</h2>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="email">E-mail</Label>
+                                <Input id="email" type="email" value={formData.email} onChange={(e) => handleInputChange("email", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="celular">Celular</Label>
+                                <Input id="celular" value={formData.celular} onChange={(e) => handleInputChange("celular", e.target.value)} placeholder="(00) 00000-0000" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="telefone1">Telefone 1</Label>
+                                <Input id="telefone1" value={formData.telefone1} onChange={(e) => handleInputChange("telefone1", e.target.value)} placeholder="(00) 0000-0000" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="telefone2">Telefone 2</Label>
+                                <Input id="telefone2" value={formData.telefone2} onChange={(e) => handleInputChange("telefone2", e.target.value)} placeholder="(00) 0000-0000" />
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Address Section */}
+                    <div className="bg-white rounded-lg border border-gray-200 p-6">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Endereço</h2>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="cep">CEP</Label>
+                                <Input id="cep" value={formData.cep} onChange={(e) => handleInputChange("cep", e.target.value)} placeholder="00000-000" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="endereco">Endereço</Label>
+                                <Input id="endereco" value={formData.endereco} onChange={(e) => handleInputChange("endereco", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="numero">Número</Label>
+                                <Input id="numero" value={formData.numero} onChange={(e) => handleInputChange("numero", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="complemento">Complemento</Label>
+                                <Input id="complemento" value={formData.complemento} onChange={(e) => handleInputChange("complemento", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="bairro">Bairro</Label>
+                                <Input id="bairro" value={formData.bairro} onChange={(e) => handleInputChange("bairro", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="cidade">Cidade</Label>
+                                <Input id="cidade" value={formData.cidade} onChange={(e) => handleInputChange("cidade", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="estado">Estado</Label>
+                                <Select value={formData.estado} onValueChange={(value) => handleInputChange("estado", value)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Selecione" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="AC">Acre</SelectItem>
+                                        <SelectItem value="AL">Alagoas</SelectItem>
+                                        <SelectItem value="AP">Amapá</SelectItem>
+                                        <SelectItem value="AM">Amazonas</SelectItem>
+                                        <SelectItem value="BA">Bahia</SelectItem>
+                                        <SelectItem value="CE">Ceará</SelectItem>
+                                        <SelectItem value="DF">Distrito Federal</SelectItem>
+                                        <SelectItem value="ES">Espírito Santo</SelectItem>
+                                        <SelectItem value="GO">Goiás</SelectItem>
+                                        <SelectItem value="MA">Maranhão</SelectItem>
+                                        <SelectItem value="MT">Mato Grosso</SelectItem>
+                                        <SelectItem value="MS">Mato Grosso do Sul</SelectItem>
+                                        <SelectItem value="MG">Minas Gerais</SelectItem>
+                                        <SelectItem value="PA">Pará</SelectItem>
+                                        <SelectItem value="PB">Paraíba</SelectItem>
+                                        <SelectItem value="PR">Paraná</SelectItem>
+                                        <SelectItem value="PE">Pernambuco</SelectItem>
+                                        <SelectItem value="PI">Piauí</SelectItem>
+                                        <SelectItem value="RJ">Rio de Janeiro</SelectItem>
+                                        <SelectItem value="RN">Rio Grande do Norte</SelectItem>
+                                        <SelectItem value="RS">Rio Grande do Sul</SelectItem>
+                                        <SelectItem value="RO">Rondônia</SelectItem>
+                                        <SelectItem value="RR">Roraima</SelectItem>
+                                        <SelectItem value="SC">Santa Catarina</SelectItem>
+                                        <SelectItem value="SP">São Paulo</SelectItem>
+                                        <SelectItem value="SE">Sergipe</SelectItem>
+                                        <SelectItem value="TO">Tocantins</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Medical Information Section */}
+                    <div className="bg-white rounded-lg border border-gray-200 p-6">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Informações Médicas</h2>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="tipoSanguineo">Tipo Sanguíneo</Label>
+                                <Select value={formData.tipoSanguineo} onValueChange={(value) => handleInputChange("tipoSanguineo", value)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Selecione" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="A+">A+</SelectItem>
+                                        <SelectItem value="A-">A-</SelectItem>
+                                        <SelectItem value="B+">B+</SelectItem>
+                                        <SelectItem value="B-">B-</SelectItem>
+                                        <SelectItem value="AB+">AB+</SelectItem>
+                                        <SelectItem value="AB-">AB-</SelectItem>
+                                        <SelectItem value="O+">O+</SelectItem>
+                                        <SelectItem value="O-">O-</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="peso">Peso (kg)</Label>
+                                <Input id="peso" type="number" value={formData.peso} onChange={(e) => handleInputChange("peso", e.target.value)} placeholder="0.0" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="altura">Altura (m)</Label>
+                                <Input id="altura" type="number" step="0.01" value={formData.altura} onChange={(e) => handleInputChange("altura", e.target.value)} placeholder="0.00" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label>IMC</Label>
+                                <Input value={formData.peso && formData.altura ? (Number.parseFloat(formData.peso) / Number.parseFloat(formData.altura) ** 2).toFixed(2) : ""} disabled placeholder="Calculado automaticamente" />
+                            </div>
+                        </div>
+
+                        <div className="mt-6">
+                            <Label htmlFor="alergias">Alergias</Label>
+                            <Textarea id="alergias" value={formData.alergias} onChange={(e) => handleInputChange("alergias", e.target.value)} placeholder="Ex: AAS, Dipirona, etc." className="mt-2" />
+                        </div>
+                    </div>
+
+                    {/* Insurance Information Section */}
+                    <div className="bg-white rounded-lg border border-gray-200 p-6">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Informações de convênio</h2>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="convenio">Convênio</Label>
+                                <Select value={formData.convenio} onValueChange={(value) => handleInputChange("convenio", value)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Selecione" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="Particular">Particular</SelectItem>
+                                        <SelectItem value="SUS">SUS</SelectItem>
+                                        <SelectItem value="Unimed">Unimed</SelectItem>
+                                        <SelectItem value="Bradesco">Bradesco Saúde</SelectItem>
+                                        <SelectItem value="Amil">Amil</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="plano">Plano</Label>
+                                <Input id="plano" value={formData.plano} onChange={(e) => handleInputChange("plano", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="numeroMatricula">Nº de matrícula</Label>
+                                <Input id="numeroMatricula" value={formData.numeroMatricula} onChange={(e) => handleInputChange("numeroMatricula", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="validadeCarteira">Validade da Carteira</Label>
+                                <Input id="validadeCarteira" type="date" value={formData.validadeCarteira} onChange={(e) => handleInputChange("validadeCarteira", e.target.value)} disabled={validadeIndeterminada} />
+                            </div>
+                        </div>
+
+                        <div className="mt-4">
+                            <div className="flex items-center space-x-2">
+                                <Checkbox id="validadeIndeterminada" checked={validadeIndeterminada} onCheckedChange={(checked) => setValidadeIndeterminada(checked === true)} />
+                                <Label htmlFor="validadeIndeterminada">Validade Indeterminada</Label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="flex justify-end gap-4">
+                        <Link href="/medicos">
+                            <Button type="button" variant="outline">
+                                Cancelar
+                            </Button>
+                        </Link>
+                        <Button type="submit" className="bg-green-600 hover:bg-green-700">
+                            <Save className="w-4 h-4 mr-2" />
+                            Salvar Alterações
+                        </Button>
+                    </div>
+                </form>
+            </div>
+        </Sidebar>
+    );
+}

app/doctor/medicos/[id]/laudos/[laudoId]/editar/page.tsx

@@ -0,0 +1,233 @@
+"use client";
+
+import { useParams, useRouter } from "next/navigation";
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { Calendar } from "@/components/ui/calendar";
+import { CalendarIcon } from "lucide-react";
+import { format } from "date-fns";
+import TiptapEditor from "@/components/ui/tiptap-editor";
+import { Skeleton } from "@/components/ui/skeleton";
+import { reportsApi } from "@/services/reportsApi.mjs";
+import Sidebar from "@/components/Sidebar";
+
+export default function EditarLaudoPage() {
+    const router = useRouter();
+    const params = useParams();
+    const patientId = params.id as string;
+    const laudoId = params.laudoId as string;
+
+    const [formData, setFormData] = useState<any>({});
+    const [loading, setLoading] = useState(true);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
+
+    useEffect(() => {
+        if (laudoId) {
+            setLoading(true);
+            reportsApi.getReportById(laudoId)
+                .then((data: any) => {
+                    console.log("Fetched report data:", data);
+                    // The API now returns an array, get the first element
+                    const reportData = Array.isArray(data) && data.length > 0 ? data[0] : null;
+                    if (reportData) {
+                        setFormData({
+                            ...reportData,
+                            due_at: reportData.due_at ? new Date(reportData.due_at) : null,
+                        });
+                    }
+                })
+                .catch(error => {
+                    console.error("Failed to fetch report details:", error);
+                    // Here you could add a toast notification to inform the user
+                })
+                .finally(() => {
+                    setLoading(false);
+                });
+        } else {
+            // If there's no laudoId, we shouldn't be in a loading state.
+            setLoading(false);
+        }
+    }, [laudoId]);
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const { id, value } = e.target;
+        setFormData((prev: any) => ({ ...prev, [id]: value }));
+    };
+
+    const handleSelectChange = (id: string, value: string) => {
+        setFormData((prev: any) => ({ ...prev, [id]: value }));
+    };
+
+    const handleCheckboxChange = (id: string, checked: boolean) => {
+        setFormData((prev: any) => ({ ...prev, [id]: checked }));
+    };
+    
+    const handleDateChange = (date: Date | undefined) => {
+        console.log("Date selected:", date);
+        if (date) {
+            setFormData((prev: any) => ({ ...prev, due_at: date }));
+        }
+    };
+
+    const handleDateSelect = (date: Date | undefined) => {
+        handleDateChange(date);
+        setIsDatePickerOpen(false); // Close the dialog after selection
+    };
+
+    const handleEditorChange = (html: string, json: object) => {
+        setFormData((prev: any) => ({ 
+            ...prev, 
+            content_html: html,
+            content_json: json 
+        }));
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setIsSubmitting(true);
+        try {
+            const { id, patient_id, created_at, updated_at, created_by, updated_by, ...updateData } = formData;
+            await reportsApi.updateReport(laudoId, updateData);
+            // toast({ title: "Laudo atualizado com sucesso!" });
+            router.push(`/doctor/medicos/${patientId}/laudos`);
+        } catch (error) {
+            console.error("Failed to update laudo", error);
+            // toast({ title: "Erro ao atualizar laudo", variant: "destructive" });
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    if (loading) {
+        return (
+            <Sidebar>
+                 <div className="container mx-auto p-4">
+                    <Card>
+                        <CardHeader>
+                            <Skeleton className="h-8 w-1/4" />
+                        </CardHeader>
+                        <CardContent className="space-y-6">
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div className="space-y-2"><Skeleton className="h-4 w-1/6" /><Skeleton className="h-10 w-full" /></div>
+                                <div className="space-y-2"><Skeleton className="h-4 w-1/6" /><Skeleton className="h-10 w-full" /></div>
+                                <div className="space-y-2"><Skeleton className="h-4 w-1/6" /><Skeleton className="h-10 w-full" /></div>
+                                <div className="space-y-2"><Skeleton className="h-4 w-1/6" /><Skeleton className="h-10 w-full" /></div>
+                            </div>
+                            <div className="space-y-2"><Skeleton className="h-4 w-1/6" /><Skeleton className="h-24 w-full" /></div>
+                            <div className="space-y-2"><Skeleton className="h-4 w-1/6" /><Skeleton className="h-40 w-full" /></div>
+                            <div className="flex justify-end space-x-2">
+                                <Skeleton className="h-10 w-24" />
+                                <Skeleton className="h-10 w-24" />
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+            </Sidebar>
+        )
+    }
+
+    return (
+        <Sidebar>
+            <div className="container mx-auto p-4">
+                <Card>
+                    <CardHeader>
+                        <CardTitle>Editar Laudo - {formData.order_number}</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <form onSubmit={handleSubmit} className="space-y-6">
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div className="space-y-2">
+                                    <Label htmlFor="exam">Exame</Label>
+                                    <Input id="exam" value={formData.exam || ''} onChange={handleInputChange} />
+                                </div>
+                                <div className="space-y-2">
+                                    <Label htmlFor="diagnosis">Diagnóstico</Label>
+                                    <Input id="diagnosis" value={formData.diagnosis || ''} onChange={handleInputChange} />
+                                </div>
+                                <div className="space-y-2">
+                                    <Label htmlFor="cid_code">Código CID</Label>
+                                    <Input id="cid_code" value={formData.cid_code || ''} onChange={handleInputChange} />
+                                </div>
+                                 <div className="space-y-2">
+                                    <Label htmlFor="requested_by">Solicitado Por</Label>
+                                    <Input id="requested_by" value={formData.requested_by || ''} onChange={handleInputChange} />
+                                </div>
+                                <div className="space-y-2">
+                                    <Label htmlFor="status">Status</Label>
+                                    <Select onValueChange={(value) => handleSelectChange("status", value)} value={formData.status}>
+                                        <SelectTrigger>
+                                            <SelectValue placeholder="Selecione o status" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="draft">Rascunho</SelectItem>
+                                            <SelectItem value="final">Finalizado</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                 <div className="space-y-2">
+                                    <Label htmlFor="due_at">Data de Vencimento</Label>
+                                    <Dialog open={isDatePickerOpen} onOpenChange={setIsDatePickerOpen}>
+                                        <DialogTrigger asChild>
+                                            <Button variant={"outline"} className="w-full justify-start text-left font-normal">
+                                                <CalendarIcon className="mr-2 h-4 w-4" />
+                                                {formData.due_at ? format(new Date(formData.due_at), "PPP") : <span>Escolha uma data</span>}
+                                            </Button>
+                                        </DialogTrigger>
+                                        <DialogContent className="w-auto p-0">
+                                            <Calendar
+                                                mode="single"
+                                                selected={formData.due_at ? new Date(formData.due_at) : undefined}
+                                                onSelect={handleDateSelect}
+                                                initialFocus
+                                            />
+                                        </DialogContent>
+                                    </Dialog>
+                                </div>
+                            </div>
+                            
+                            <div className="space-y-2">
+                                <Label htmlFor="conclusion">Conclusão</Label>
+                                <Textarea id="conclusion" value={formData.conclusion || ''} onChange={handleInputChange} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label>Conteúdo do Laudo</Label>
+                                <div className="rounded-md border border-input">
+                                    <TiptapEditor content={formData.content_html || ''} onChange={handleEditorChange} />
+                                </div>
+                            </div>
+
+                            <div className="flex items-center space-x-4">
+                                <div className="flex items-center space-x-2">
+                                    <Checkbox id="hide_date" checked={formData.hide_date} onCheckedChange={(checked) => handleCheckboxChange("hide_date", !!checked)} />
+                                    <Label htmlFor="hide_date">Ocultar Data</Label>
+                                </div>
+                                <div className="flex items-center space-x-2">
+                                    <Checkbox id="hide_signature" checked={formData.hide_signature} onCheckedChange={(checked) => handleCheckboxChange("hide_signature", !!checked)} />
+                                    <Label htmlFor="hide_signature">Ocultar Assinatura</Label>
+                                </div>
+                            </div>
+
+                            <div className="flex justify-end space-x-2">
+                                <Button type="button" variant="outline" onClick={() => router.back()} disabled={isSubmitting}>
+                                    Cancelar
+                                </Button>
+                                <Button type="submit" disabled={isSubmitting}>
+                                    {isSubmitting ? "Salvando..." : "Salvar Alterações"}
+                                </Button>
+                            </div>
+                        </form>
+                    </CardContent>
+                </Card>
+            </div>
+        </Sidebar>
+    );
+}

app/doctor/medicos/[id]/laudos/novo/page.tsx

@@ -0,0 +1,189 @@
+ "use client";
+
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
+import { CalendarIcon } from "lucide-react";
+import { format } from "date-fns";
+import TiptapEditor from "@/components/ui/tiptap-editor";
+
+import { reportsApi } from "@/services/reportsApi.mjs";
+import Sidebar from "@/components/Sidebar";
+
+
+
+
+export default function NovoLaudoPage() {
+    const router = useRouter();
+    const params = useParams();
+    const patientId = params.id as string;
+
+    const [formData, setFormData] = useState({
+        order_number: "",
+        exam: "",
+        diagnosis: "",
+        conclusion: "",
+        cid_code: "",
+        content_html: "",
+        content_json: {}, // Added for the JSON content from the editor
+        status: "draft",
+        requested_by: "",
+        due_at: new Date(),
+        hide_date: false,
+        hide_signature: false,
+    });
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const { id, value } = e.target;
+        setFormData(prev => ({ ...prev, [id]: value }));
+    };
+
+    const handleSelectChange = (id: string, value: string) => {
+        setFormData(prev => ({ ...prev, [id]: value }));
+    };
+
+    const handleCheckboxChange = (id: string, checked: boolean) => {
+        setFormData(prev => ({ ...prev, [id]: checked }));
+    };
+    
+    const handleDateChange = (date: Date | undefined) => {
+        if (date) {
+            setFormData(prev => ({ ...prev, due_at: date }));
+        }
+    };
+
+    // Updated to handle both HTML and JSON from the editor
+    const handleEditorChange = (html: string, json: object) => {
+        setFormData(prev => ({ 
+            ...prev, 
+            content_html: html,
+            content_json: json 
+        }));
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setIsSubmitting(true);
+        try {
+            const laudoData = {
+                ...formData,
+                patient_id: patientId,
+                due_at: formData.due_at.toISOString(), // Ensure date is in ISO format for the API
+            };
+            
+            await reportsApi.createReport(laudoData);
+            
+            // You can use a toast notification here for better user feedback
+            // toast({ title: "Laudo criado com sucesso!" });
+            
+            router.push(`/doctor/medicos/${patientId}/laudos`);
+        } catch (error: any) {
+            console.error("Failed to create laudo", error);
+            // You can use a toast notification for errors
+            // toast({ title: "Erro ao criar laudo", description: error.message, variant: "destructive" });
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return (
+        <Sidebar>
+            <div className="container mx-auto p-4">
+                <Card>
+                    <CardHeader>
+                        <CardTitle>Criar Novo Laudo</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <form onSubmit={handleSubmit} className="space-y-6">
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div className="space-y-2">
+                                    <Label htmlFor="exam">Exame</Label>
+                                    <Input id="exam" value={formData.exam} onChange={handleInputChange} />
+                                </div>
+                                <div className="space-y-2">
+                                    <Label htmlFor="diagnosis">Diagnóstico</Label>
+                                    <Input id="diagnosis" value={formData.diagnosis} onChange={handleInputChange} />
+                                </div>
+                                <div className="space-y-2">
+                                    <Label htmlFor="cid_code">Código CID</Label>
+                                    <Input id="cid_code" value={formData.cid_code} onChange={handleInputChange} />
+                                </div>
+                                 <div className="space-y-2">
+                                    <Label htmlFor="requested_by">Solicitado Por</Label>
+                                    <Input id="requested_by" value={formData.requested_by} onChange={handleInputChange} />
+                                </div>
+                                <div className="space-y-2">
+                                    <Label htmlFor="status">Status</Label>
+                                    <Select onValueChange={(value) => handleSelectChange("status", value)} defaultValue={formData.status}>
+                                        <SelectTrigger>
+                                            <SelectValue placeholder="Selecione o status" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="draft">Rascunho</SelectItem>
+                                            <SelectItem value="final">Finalizado</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                 <div className="space-y-2">
+                                    <Label htmlFor="due_at">Data de Vencimento</Label>
+                                     <Popover>
+                                        <PopoverTrigger asChild>
+                                            <Button variant={"outline"} className="w-full justify-start text-left font-normal">
+                                                <CalendarIcon className="mr-2 h-4 w-4" />
+                                                {formData.due_at ? format(formData.due_at, "PPP") : <span>Escolha uma data</span>}
+                                            </Button>
+                                        </PopoverTrigger>
+                                        <PopoverContent className="w-auto p-0">
+                                            <Calendar mode="single" selected={formData.due_at} onSelect={handleDateChange} initialFocus />
+                                        </PopoverContent>
+                                    </Popover>
+                                </div>
+                            </div>
+                            
+                            <div className="space-y-2">
+                                <Label htmlFor="conclusion">Conclusão</Label>
+                                <Textarea id="conclusion" value={formData.conclusion} onChange={handleInputChange} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label>Conteúdo do Laudo</Label>
+                                <div className="rounded-md border border-input">
+                                    <TiptapEditor content={formData.content_html} onChange={handleEditorChange} />
+                                </div>
+                            </div>
+
+                            <div className="flex items-center space-x-4">
+                                <div className="flex items-center space-x-2">
+                                    <Checkbox id="hide_date" checked={formData.hide_date} onCheckedChange={(checked) => handleCheckboxChange("hide_date", !!checked)} />
+                                    <Label htmlFor="hide_date">Ocultar Data</Label>
+                                </div>
+                                <div className="flex items-center space-x-2">
+                                    <Checkbox id="hide_signature" checked={formData.hide_signature} onCheckedChange={(checked) => handleCheckboxChange("hide_signature", !!checked)} />
+                                    <Label htmlFor="hide_signature">Ocultar Assinatura</Label>
+                                </div>
+                            </div>
+
+                            <div className="flex justify-end space-x-2">
+                                <Button type="button" variant="outline" onClick={() => router.back()} disabled={isSubmitting}>
+                                    Cancelar
+                                </Button>
+                                <Button type="submit" disabled={isSubmitting}>
+                                    {isSubmitting ? "Salvando..." : "Salvar Laudo"}
+                                </Button>
+                            </div>
+                        </form>
+                    </CardContent>
+                </Card>
+            </div>
+        </Sidebar>
+    );
+}

app/doctor/medicos/[id]/laudos/page.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { api } from '@/services/api.mjs';
+import { reportsApi } from '@/services/reportsApi.mjs';
+import Sidebar from '@/components/Sidebar';
+
+export default function LaudosPage() {
+    const [patient, setPatient] = useState(null);
+    const [laudos, setLaudos] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const params = useParams();
+    const patientId = params.id as string;
+
+    const [currentPage, setCurrentPage] = useState(1);
+    const [itemsPerPage] = useState(5);
+
+    useEffect(() => {
+        if (patientId) {
+            const fetchPatientAndLaudos = async () => {
+                setLoading(true);
+                try {
+                    const patientData = await api.get(`/rest/v1/patients?id=eq.${patientId}&select=*`).then(r => r?.[0]);
+                    setPatient(patientData);
+
+                    const laudosData = await reportsApi.getReports(patientId);
+                    setLaudos(laudosData);
+                } catch (error) {
+                    console.error("Failed to fetch data:", error);
+                } finally {
+                    setLoading(false);
+                }
+            };
+
+            fetchPatientAndLaudos();
+        }
+    }, [patientId]);
+
+    const indexOfLastItem = currentPage * itemsPerPage;
+    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+    const currentItems = laudos.slice(indexOfFirstItem, indexOfLastItem);
+    const totalPages = Math.ceil(laudos.length / itemsPerPage);
+
+    const paginate = (pageNumber) => setCurrentPage(pageNumber);
+
+    return (
+        <Sidebar>
+            <div className="container mx-auto p-4">
+                {loading ? (
+                    <p>Carregando...</p>
+                ) : (
+                    <>
+                        {patient && (
+                            <Card className="mb-4">
+                                <CardHeader>
+                                    <CardTitle>Informações do Paciente</CardTitle>
+                                </CardHeader>
+                                <CardContent>
+                                    <p><strong>Nome:</strong> {patient.full_name}</p>
+                                    <p><strong>Email:</strong> {patient.email}</p>
+                                    <p><strong>Telefone:</strong> {patient.phone_mobile}</p>
+                                </CardContent>
+                            </Card>
+                        )}
+                        <Card>
+                            <CardHeader className="flex flex-row items-center justify-between">
+                                <CardTitle>Laudos do Paciente</CardTitle>
+                                <Link href={`/doctor/medicos/${patientId}/laudos/novo`}>
+                                    <Button>Criar Novo Laudo</Button>
+                                </Link>
+                            </CardHeader>
+                            <CardContent>
+                                <Table>
+                                    <TableHeader>
+                                        <TableRow>
+                                            <TableHead>Nº do Pedido</TableHead>
+                                            <TableHead>Exame</TableHead>
+                                            <TableHead>Diagnóstico</TableHead>
+                                            <TableHead>Status</TableHead>
+                                            <TableHead>Data de Criação</TableHead>
+                                            <TableHead>Ações</TableHead>
+                                        </TableRow>
+                                    </TableHeader>
+                                    <TableBody>
+                                        {currentItems.length > 0 ? (
+                                            currentItems.map((laudo) => (
+                                                <TableRow key={laudo.id}>
+                                                    <TableCell>{laudo.order_number}</TableCell>
+                                                    <TableCell>{laudo.exam}</TableCell>
+                                                    <TableCell>{laudo.diagnosis}</TableCell>
+                                                    <TableCell>{laudo.status}</TableCell>
+                                                    <TableCell>{new Date(laudo.created_at).toLocaleDateString()}</TableCell>
+                                                    <TableCell>
+                                                        <Link href={`/doctor/medicos/${patientId}/laudos/${laudo.id}/editar`}>
+                                                            <Button variant="outline" size="sm">Editar</Button>
+                                                        </Link>
+                                                    </TableCell>
+                                                </TableRow>
+                                            ))
+                                        ) : (
+                                            <TableRow>
+                                                <TableCell colSpan={6} className="text-center">Nenhum laudo encontrado.</TableCell>
+                                            </TableRow>
+                                        )}
+                                    </TableBody>
+                                </Table>
+                                {totalPages > 1 && (
+                                    <div className="flex justify-center space-x-2 mt-4 p-4">
+                                        {Array.from({ length: totalPages }, (_, i) => (
+                                            <Button key={i} onClick={() => paginate(i + 1)} variant={currentPage === i + 1 ? 'default' : 'outline'}>
+                                                {i + 1}
+                                            </Button>
+                                        ))}
+                                    </div>
+                                )}
+                            </CardContent>
+                        </Card>
+                    </>
+                )}
+            </div>
+        </Sidebar>
+    );
+}

app/doctor/medicos/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}

app/doctor/medicos/novo/page.tsx

@@ -0,0 +1,471 @@
+"use client";
+
+import { useState } 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 { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Upload, Plus, X, ChevronDown } from "lucide-react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import Sidebar from "@/components/Sidebar";
+
+export default function NovoMedicoPage() {
+    const [anexosOpen, setAnexosOpen] = useState(false);
+    const [anexos, setAnexos] = useState<string[]>([]);
+
+    const adicionarAnexo = () => {
+        setAnexos([...anexos, `Documento ${anexos.length + 1}`]);
+    };
+
+    const removerAnexo = (index: number) => {
+        setAnexos(anexos.filter((_, i) => i !== index));
+    };
+
+    return (
+        <Sidebar>
+            <div className="space-y-6">
+                <div className="flex items-center justify-between">
+                    <div>
+                        <h1 className="text-2xl font-bold text-gray-900">Novo Médico</h1>
+                        <p className="text-gray-600">Cadastre um novo médico no sistema</p>
+                    </div>
+                </div>
+
+                <form className="space-y-6">
+                    <div className="bg-white rounded-lg border border-gray-200 p-6">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Dados Pessoais</h2>
+
+                        <div className="space-y-6">
+                            {/* Foto */}
+                            <div className="flex items-center gap-4">
+                                <div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center">
+                                    <Upload className="w-8 h-8 text-gray-400" />
+                                </div>
+                                <Button variant="outline" type="button" size="sm">
+                                    <Upload className="w-4 h-4 mr-2" />
+                                    Carregar Foto
+                                </Button>
+                            </div>
+
+                            <div className="grid md:grid-cols-2 gap-4">
+                                <div>
+                                    <Label htmlFor="nome" className="text-sm font-medium text-gray-700">
+                                        Nome *
+                                    </Label>
+                                    <Input id="nome" placeholder="Nome completo" required className="mt-1" />
+                                </div>
+                                <div>
+                                    <Label htmlFor="nomeSocial" className="text-sm font-medium text-gray-700">
+                                        Nome Social
+                                    </Label>
+                                    <Input id="nomeSocial" placeholder="Nome social ou apelido" className="mt-1" />
+                                </div>
+                            </div>
+
+                            <div className="grid md:grid-cols-3 gap-4">
+                                <div>
+                                    <Label htmlFor="cpf" className="text-sm font-medium text-gray-700">
+                                        CPF *
+                                    </Label>
+                                    <Input id="cpf" placeholder="000.000.000-00" required className="mt-1" />
+                                </div>
+                                <div>
+                                    <Label htmlFor="rg" className="text-sm font-medium text-gray-700">
+                                        RG
+                                    </Label>
+                                    <Input id="rg" placeholder="00.000.000-0" className="mt-1" />
+                                </div>
+                                <div>
+                                    <Label htmlFor="crm" className="text-sm font-medium text-gray-700">
+                                        CRM *
+                                    </Label>
+                                    <Input id="crm" placeholder="CRM/UF 12345" required className="mt-1" />
+                                </div>
+                            </div>
+
+                            <div>
+                                <Label htmlFor="outrosDocumentos" className="text-sm font-medium text-gray-700">
+                                    Outros Documentos
+                                </Label>
+                                <Select>
+                                    <SelectTrigger className="mt-1">
+                                        <SelectValue placeholder="Selecione" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="cnh">CNH</SelectItem>
+                                        <SelectItem value="passaporte">Passaporte</SelectItem>
+                                        <SelectItem value="carteira-trabalho">Carteira de Trabalho</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="grid md:grid-cols-3 gap-4">
+                                <div>
+                                    <Label className="text-sm font-medium text-gray-700">Sexo</Label>
+                                    <div className="flex gap-4 mt-2">
+                                        <label className="flex items-center gap-2">
+                                            <input type="radio" name="sexo" value="masculino" className="text-blue-600" />
+                                            <span className="text-sm">Masculino</span>
+                                        </label>
+                                        <label className="flex items-center gap-2">
+                                            <input type="radio" name="sexo" value="feminino" className="text-blue-600" />
+                                            <span className="text-sm">Feminino</span>
+                                        </label>
+                                    </div>
+                                </div>
+                                <div>
+                                    <Label htmlFor="dataNascimento" className="text-sm font-medium text-gray-700">
+                                        Data de Nascimento
+                                    </Label>
+                                    <Input id="dataNascimento" type="date" className="mt-1" />
+                                </div>
+                                <div>
+                                    <Label htmlFor="estadoCivil" className="text-sm font-medium text-gray-700">
+                                        Estado Civil
+                                    </Label>
+                                    <Select>
+                                        <SelectTrigger className="mt-1">
+                                            <SelectValue placeholder="Selecione" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="solteiro">Solteiro(a)</SelectItem>
+                                            <SelectItem value="casado">Casado(a)</SelectItem>
+                                            <SelectItem value="divorciado">Divorciado(a)</SelectItem>
+                                            <SelectItem value="viuvo">Viúvo(a)</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            </div>
+
+                            <div className="grid md:grid-cols-2 gap-4">
+                                <div>
+                                    <Label htmlFor="etnia" className="text-sm font-medium text-gray-700">
+                                        Etnia
+                                    </Label>
+                                    <Select>
+                                        <SelectTrigger className="mt-1">
+                                            <SelectValue placeholder="Selecione" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="branca">Branca</SelectItem>
+                                            <SelectItem value="preta">Preta</SelectItem>
+                                            <SelectItem value="parda">Parda</SelectItem>
+                                            <SelectItem value="amarela">Amarela</SelectItem>
+                                            <SelectItem value="indigena">Indígena</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                <div>
+                                    <Label htmlFor="raca" className="text-sm font-medium text-gray-700">
+                                        Raça
+                                    </Label>
+                                    <Select>
+                                        <SelectTrigger className="mt-1">
+                                            <SelectValue placeholder="Selecione" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="branca">Branca</SelectItem>
+                                            <SelectItem value="preta">Preta</SelectItem>
+                                            <SelectItem value="parda">Parda</SelectItem>
+                                            <SelectItem value="amarela">Amarela</SelectItem>
+                                            <SelectItem value="indigena">Indígena</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            </div>
+
+                            <div className="grid md:grid-cols-2 gap-4">
+                                <div>
+                                    <Label htmlFor="naturalidade" className="text-sm font-medium text-gray-700">
+                                        Naturalidade
+                                    </Label>
+                                    <Select>
+                                        <SelectTrigger className="mt-1">
+                                            <SelectValue placeholder="Selecione" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="aracaju">Aracaju</SelectItem>
+                                            <SelectItem value="salvador">Salvador</SelectItem>
+                                            <SelectItem value="recife">Recife</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                <div>
+                                    <Label htmlFor="nacionalidade" className="text-sm font-medium text-gray-700">
+                                        Nacionalidade
+                                    </Label>
+                                    <Select>
+                                        <SelectTrigger className="mt-1">
+                                            <SelectValue placeholder="Selecione" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="brasileira">Brasileira</SelectItem>
+                                            <SelectItem value="estrangeira">Estrangeira</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            </div>
+
+                            <div className="grid md:grid-cols-2 gap-4">
+                                <div>
+                                    <Label htmlFor="profissao" className="text-sm font-medium text-gray-700">
+                                        Profissão
+                                    </Label>
+                                    <Input id="profissao" placeholder="Médico" className="mt-1" />
+                                </div>
+                                <div>
+                                    <Label htmlFor="especialidade" className="text-sm font-medium text-gray-700">
+                                        Especialidade *
+                                    </Label>
+                                    <Select>
+                                        <SelectTrigger className="mt-1">
+                                            <SelectValue placeholder="Selecione" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="cardiologia">Cardiologia</SelectItem>
+                                            <SelectItem value="pediatria">Pediatria</SelectItem>
+                                            <SelectItem value="ortopedia">Ortopedia</SelectItem>
+                                            <SelectItem value="ginecologia">Ginecologia</SelectItem>
+                                            <SelectItem value="neurologia">Neurologia</SelectItem>
+                                            <SelectItem value="dermatologia">Dermatologia</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            </div>
+
+                            <div className="grid md:grid-cols-2 gap-4">
+                                <div>
+                                    <Label htmlFor="nomeMae" className="text-sm font-medium text-gray-700">
+                                        Nome da Mãe
+                                    </Label>
+                                    <Input id="nomeMae" placeholder="Nome da mãe" className="mt-1" />
+                                </div>
+                                <div>
+                                    <Label htmlFor="nomePai" className="text-sm font-medium text-gray-700">
+                                        Nome do Pai
+                                    </Label>
+                                    <Input id="nomePai" placeholder="Nome do pai" className="mt-1" />
+                                </div>
+                            </div>
+
+                            <div>
+                                <Label htmlFor="nomeEsposo" className="text-sm font-medium text-gray-700">
+                                    Nome do Esposo(a)
+                                </Label>
+                                <Input id="nomeEsposo" placeholder="Nome do esposo(a)" className="mt-1" />
+                            </div>
+
+                            <div>
+                                <Label htmlFor="codigoLegado" className="text-sm font-medium text-gray-700">
+                                    Código Legado
+                                </Label>
+                                <Input id="codigoLegado" placeholder="Código do sistema anterior" className="mt-1" />
+                            </div>
+
+                            <div>
+                                <Label htmlFor="observacoes" className="text-sm font-medium text-gray-700">
+                                    Observações
+                                </Label>
+                                <Textarea id="observacoes" placeholder="Observações gerais sobre o médico" className="min-h-[100px] mt-1" />
+                            </div>
+
+                            <Collapsible open={anexosOpen} onOpenChange={setAnexosOpen}>
+                                <CollapsibleTrigger asChild>
+                                    <Button variant="ghost" type="button" className="w-full justify-between p-0 h-auto text-left">
+                                        <div className="flex items-center gap-2">
+                                            <div className="w-4 h-4 bg-gray-400 rounded-sm flex items-center justify-center">
+                                                <span className="text-white text-xs">📎</span>
+                                            </div>
+                                            <span className="text-sm font-medium text-gray-700">Anexos do médico</span>
+                                        </div>
+                                        <ChevronDown className={`w-4 h-4 transition-transform ${anexosOpen ? "rotate-180" : ""}`} />
+                                    </Button>
+                                </CollapsibleTrigger>
+                                <CollapsibleContent className="space-y-4 mt-4">
+                                    {anexos.map((anexo, index) => (
+                                        <div key={index} className="flex items-center justify-between p-3 border rounded-lg bg-gray-50">
+                                            <span className="text-sm">{anexo}</span>
+                                            <Button variant="ghost" size="sm" onClick={() => removerAnexo(index)} type="button">
+                                                <X className="w-4 h-4" />
+                                            </Button>
+                                        </div>
+                                    ))}
+                                    <Button variant="outline" onClick={adicionarAnexo} type="button" size="sm">
+                                        <Plus className="w-4 h-4 mr-2" />
+                                        Adicionar Anexo
+                                    </Button>
+                                </CollapsibleContent>
+                            </Collapsible>
+                        </div>
+                    </div>
+
+                    <div className="bg-white rounded-lg border border-gray-200 p-6">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Contato</h2>
+
+                        <div className="space-y-4">
+                            <div className="grid md:grid-cols-3 gap-4">
+                                <div>
+                                    <Label htmlFor="email" className="text-sm font-medium text-gray-700">
+                                        E-mail
+                                    </Label>
+                                    <Input id="email" type="email" placeholder="email@exemplo.com" className="mt-1" />
+                                </div>
+                                <div>
+                                    <Label htmlFor="celular" className="text-sm font-medium text-gray-700">
+                                        Celular
+                                    </Label>
+                                    <div className="flex mt-1">
+                                        <Select>
+                                            <SelectTrigger className="w-20 rounded-r-none">
+                                                <SelectValue placeholder="+55" />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                <SelectItem value="+55">+55</SelectItem>
+                                            </SelectContent>
+                                        </Select>
+                                        <Input placeholder="(XX) XXXXX-XXXX" className="rounded-l-none" />
+                                    </div>
+                                </div>
+                                <div>
+                                    <Label htmlFor="telefone1" className="text-sm font-medium text-gray-700">
+                                        Telefone 1
+                                    </Label>
+                                    <Input id="telefone1" placeholder="(XX) XXXX-XXXX" className="mt-1" />
+                                </div>
+                            </div>
+                            <div>
+                                <Label htmlFor="telefone2" className="text-sm font-medium text-gray-700">
+                                    Telefone 2
+                                </Label>
+                                <Input id="telefone2" placeholder="(XX) XXXX-XXXX" className="mt-1" />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="bg-white rounded-lg border border-gray-200 p-6">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Endereço</h2>
+
+                        <div className="space-y-4">
+                            <div>
+                                <Label htmlFor="cep" className="text-sm font-medium text-gray-700">
+                                    CEP
+                                </Label>
+                                <Input id="cep" placeholder="00000-000" className="mt-1 max-w-xs" />
+                            </div>
+                            <div className="grid md:grid-cols-3 gap-4">
+                                <div className="md:col-span-2">
+                                    <Label htmlFor="endereco" className="text-sm font-medium text-gray-700">
+                                        Endereço
+                                    </Label>
+                                    <Input id="endereco" placeholder="Rua, Avenida..." className="mt-1" />
+                                </div>
+                                <div>
+                                    <Label htmlFor="numero" className="text-sm font-medium text-gray-700">
+                                        Número
+                                    </Label>
+                                    <Input id="numero" placeholder="123" className="mt-1" />
+                                </div>
+                            </div>
+                            <div>
+                                <Label htmlFor="complemento" className="text-sm font-medium text-gray-700">
+                                    Complemento
+                                </Label>
+                                <Input id="complemento" placeholder="Apto, Bloco..." className="mt-1" />
+                            </div>
+                            <div className="grid md:grid-cols-3 gap-4">
+                                <div>
+                                    <Label htmlFor="bairro" className="text-sm font-medium text-gray-700">
+                                        Bairro
+                                    </Label>
+                                    <Input id="bairro" placeholder="Bairro" className="mt-1" />
+                                </div>
+                                <div>
+                                    <Label htmlFor="cidade" className="text-sm font-medium text-gray-700">
+                                        Cidade
+                                    </Label>
+                                    <Input id="cidade" placeholder="Cidade" className="mt-1" />
+                                </div>
+                                <div>
+                                    <Label htmlFor="estado" className="text-sm font-medium text-gray-700">
+                                        Estado
+                                    </Label>
+                                    <Select>
+                                        <SelectTrigger className="mt-1">
+                                            <SelectValue placeholder="Selecione" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="SE">Sergipe</SelectItem>
+                                            <SelectItem value="BA">Bahia</SelectItem>
+                                            <SelectItem value="AL">Alagoas</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="bg-white rounded-lg border border-gray-200 p-6">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-6">Informações Profissionais</h2>
+
+                        <div className="space-y-4">
+                            <div className="grid md:grid-cols-2 gap-4">
+                                <div>
+                                    <Label htmlFor="numeroConselho" className="text-sm font-medium text-gray-700">
+                                        Número do Conselho
+                                    </Label>
+                                    <Input id="numeroConselho" placeholder="Número do CRM" className="mt-1" />
+                                </div>
+                                <div>
+                                    <Label htmlFor="ufConselho" className="text-sm font-medium text-gray-700">
+                                        UF do Conselho
+                                    </Label>
+                                    <Select>
+                                        <SelectTrigger className="mt-1">
+                                            <SelectValue placeholder="Selecione" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="SE">SE</SelectItem>
+                                            <SelectItem value="BA">BA</SelectItem>
+                                            <SelectItem value="AL">AL</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            </div>
+                            <div className="grid md:grid-cols-2 gap-4">
+                                <div>
+                                    <Label htmlFor="dataFormatura" className="text-sm font-medium text-gray-700">
+                                        Data de Formatura
+                                    </Label>
+                                    <Input id="dataFormatura" type="date" className="mt-1" />
+                                </div>
+                                <div>
+                                    <Label htmlFor="instituicaoFormacao" className="text-sm font-medium text-gray-700">
+                                        Instituição de Formação
+                                    </Label>
+                                    <Input id="instituicaoFormacao" placeholder="Nome da universidade" className="mt-1" />
+                                </div>
+                            </div>
+                            <div>
+                                <Label htmlFor="especialidades" className="text-sm font-medium text-gray-700">
+                                    Especialidades Adicionais
+                                </Label>
+                                <Textarea id="especialidades" placeholder="Liste outras especialidades ou subespecialidades..." className="min-h-[80px] mt-1" />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="flex justify-end gap-4">
+                        <Link href="/doctor/medicos">
+                            <Button variant="outline">Cancelar</Button>
+                        </Link>
+                        <Button type="submit" className="bg-green-600 hover:bg-green-700">
+                            Salvar Médico
+                        </Button>
+                    </div>
+                </form>
+            </div>
+        </Sidebar>
+    );
+}

app/doctor/medicos/page.tsx

@@ -0,0 +1,445 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import Link from "next/link";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Eye, Edit, Calendar, Trash2, Loader2, MoreVertical, Filter } from "lucide-react";
+import { api } from "@/services/api.mjs";
+import { PatientDetailsModal } from "@/components/ui/patient-details-modal";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Input } from "@/components/ui/input"; 
+import { Button } from "@/components/ui/button";
+import Sidebar from "@/components/Sidebar";
+
+interface Paciente {
+  id: string;
+  nome: string;
+  telefone: string;
+  cidade: string;
+  estado: string;
+  ultimoAtendimento?: string;
+  proximoAtendimento?: string;
+  email?: string;
+  birth_date?: string;
+  cpf?: string;
+  blood_type?: string;
+  weight_kg?: number;
+  height_m?: number;
+  street?: string;
+  number?: string;
+  complement?: string;
+  neighborhood?: string;
+  cep?: string;
+  // NOVOS CAMPOS PARA O FILTRO
+  convenio?: string; 
+  vip?: string;      
+}
+
+export default function PacientesPage() {
+  const [pacientes, setPacientes] = useState<Paciente[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedPatient, setSelectedPatient] = useState<Paciente | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  // --- ESTADOS DOS FILTROS ---
+  const [searchTerm, setSearchTerm] = useState("");
+  const [convenioFilter, setConvenioFilter] = useState("todos");
+  const [vipFilter, setVipFilter] = useState("todos");
+
+  // --- Lógica de Filtragem ---
+  const filteredPacientes = pacientes.filter((p) => {
+    // 1. Filtro de Texto (Nome ou Telefone)
+    const searchLower = searchTerm.toLowerCase();
+    const matchesSearch = p.nome?.toLowerCase().includes(searchLower) || p.telefone?.includes(searchLower);
+
+    // 2. Filtro de Convênio
+    // Se for "todos", passa. Se não, verifica se o convênio do paciente é igual ao selecionado.
+    const matchesConvenio = convenioFilter === "todos" || (p.convenio?.toLowerCase() === convenioFilter);
+
+    // 3. Filtro VIP
+    // Se for "todos", passa. Se não, verifica se o status VIP é igual ao selecionado.
+    const matchesVip = vipFilter === "todos" || (p.vip?.toLowerCase() === vipFilter);
+
+    return matchesSearch && matchesConvenio && matchesVip;
+  });
+
+  // --- Lógica de Paginação ---
+  const [itemsPerPage, setItemsPerPage] = useState(10);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  // Resetar página quando qualquer filtro mudar
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchTerm, convenioFilter, vipFilter, itemsPerPage]);
+
+  const totalPages = Math.ceil(filteredPacientes.length / itemsPerPage);
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentItems = filteredPacientes.slice(indexOfFirstItem, indexOfLastItem);
+
+  const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
+
+  const goToPrevPage = () => {
+    setCurrentPage((prev) => Math.max(1, prev - 1));
+  };
+
+  const goToNextPage = () => {
+    setCurrentPage((prev) => Math.min(totalPages, prev + 1));
+  };
+
+  const getVisiblePageNumbers = (totalPages: number, currentPage: number) => {
+    const pages: number[] = [];
+    const maxVisiblePages = 5;
+    const halfRange = Math.floor(maxVisiblePages / 2);
+    let startPage = Math.max(1, currentPage - halfRange);
+    let endPage = Math.min(totalPages, currentPage + halfRange);
+
+    if (endPage - startPage + 1 < maxVisiblePages) {
+      if (endPage === totalPages) {
+        startPage = Math.max(1, totalPages - maxVisiblePages + 1);
+      }
+      if (startPage === 1) {
+        endPage = Math.min(totalPages, maxVisiblePages);
+      }
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+    return pages;
+  };
+
+  const visiblePageNumbers = getVisiblePageNumbers(totalPages, currentPage);
+
+  const handleItemsPerPageChange = (value: string) => {
+    setItemsPerPage(Number(value));
+    setCurrentPage(1);
+  };
+
+  const handleOpenModal = (patient: Paciente) => {
+    setSelectedPatient(patient);
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setSelectedPatient(null);
+    setIsModalOpen(false);
+  };
+
+  const formatDate = (dateString: string | null | undefined) => {
+    if (!dateString) return "N/A";
+    try {
+      const date = new Date(dateString);
+      return new Intl.DateTimeFormat("pt-BR").format(date);
+    } catch (e) {
+      return dateString;
+    }
+  };
+
+  const fetchPacientes = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const json = await api.get("/rest/v1/patients");
+      const items = Array.isArray(json)
+        ? json
+        : Array.isArray(json?.data)
+        ? json.data
+        : [];
+
+      const mapped: Paciente[] = items.map((p: any) => ({
+        id: String(p.id ?? ""),
+        nome: p.full_name ?? "—",
+        telefone: p.phone_mobile ?? "N/A",
+        cidade: p.city ?? "N/A",
+        estado: p.state ?? "N/A",
+        ultimoAtendimento: formatDate(p.created_at),
+        proximoAtendimento: "N/A",
+        email: p.email ?? "N/A",
+        birth_date: p.birth_date ?? "N/A",
+        cpf: p.cpf ?? "N/A",
+        blood_type: p.blood_type ?? "N/A",
+        weight_kg: p.weight_kg ?? 0,
+        height_m: p.height_m ?? 0,
+        street: p.street ?? "N/A",
+        number: p.number ?? "N/A",
+        complement: p.complement ?? "N/A",
+        neighborhood: p.neighborhood ?? "N/A",
+        cep: p.cep ?? "N/A",
+        
+        // ⚠️ ATENÇÃO: Verifique o nome real desses campos na sua API
+        // Se a API não retorna, estou colocando valores padrão para teste
+        convenio: p.insurance_plan || p.convenio || "Unimed", // Exemplo: mapeie o campo correto
+        vip: p.is_vip ? "Sim" : "Não", // Exemplo: se for booleano converta para string
+      }));
+
+      setPacientes(mapped);
+    } catch (e: any) {
+      console.error("Erro ao carregar pacientes:", e);
+      setError(e?.message || "Erro ao carregar pacientes");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchPacientes();
+  }, [fetchPacientes]);
+
+  return (
+    <Sidebar>
+      <div className="space-y-6 px-2 sm:px-4 md:px-6">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+          <div>
+            <h1 className="text-2xl font-bold text-foreground">Pacientes</h1>
+            <p className="text-muted-foreground text-sm sm:text-base">
+              Lista de pacientes vinculados
+            </p>
+          </div>
+        </div>
+
+        {/* --- BARRA DE PESQUISA COM FILTROS ATIVOS --- */}
+        <div className="flex flex-col md:flex-row gap-4 items-center p-2 border border-border rounded-lg bg-card shadow-sm">
+            
+            {/* Input de Busca */}
+            <div className="flex items-center gap-3 flex-1 w-full px-2">
+                <Filter className="w-5 h-5 text-muted-foreground flex-shrink-0" />
+                <Input 
+                    type="text" 
+                    placeholder="Buscar por nome ou telefone..." 
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    className="border-0 focus-visible:ring-0 shadow-none bg-transparent px-0 h-auto text-base placeholder:text-muted-foreground"
+                />
+            </div>
+
+            {/* Filtros e Paginação */}
+            <div className="flex flex-wrap items-center gap-4 w-full md:w-auto px-2 border-t md:border-t-0 md:border-l border-border pt-2 md:pt-0 justify-end">
+                
+                {/* FILTRO CONVÊNIO */}
+                <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium whitespace-nowrap text-muted-foreground hidden lg:inline">Convênio</span>
+                    <Select value={convenioFilter} onValueChange={setConvenioFilter}>
+                        <SelectTrigger className="w-[100px] h-8 border-border bg-transparent focus:ring-0">
+                            <SelectValue placeholder="Todos" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="todos">Todos</SelectItem>
+                            {/* Certifique-se que o 'value' aqui seja minúsculo para bater com a lógica do filtro */}
+                            <SelectItem value="unimed">Unimed</SelectItem>
+                            <SelectItem value="bradesco">Bradesco</SelectItem>
+                            <SelectItem value="particular">Particular</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+
+                {/* FILTRO VIP */}
+                <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium whitespace-nowrap text-muted-foreground hidden lg:inline">VIP</span>
+                    <Select value={vipFilter} onValueChange={setVipFilter}>
+                        <SelectTrigger className="w-[90px] h-8 border-border bg-transparent focus:ring-0">
+                            <SelectValue placeholder="Todos" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="todos">Todos</SelectItem>
+                            <SelectItem value="sim">Sim</SelectItem>
+                            <SelectItem value="não">Não</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+
+                {/* PAGINAÇÃO */}
+                <div className="flex items-center gap-2 pl-2 md:border-l border-border">
+                   <Select
+                      onValueChange={handleItemsPerPageChange}
+                      defaultValue={String(itemsPerPage)}
+                    >
+                      <SelectTrigger className="w-[130px] h-8 border-border bg-transparent focus:ring-0">
+                        <SelectValue placeholder="Paginação" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="5">5 por página</SelectItem>
+                        <SelectItem value="10">10 por página</SelectItem>
+                        <SelectItem value="20">20 por página</SelectItem>
+                      </SelectContent>
+                    </Select>
+                </div>
+
+            </div>
+        </div>
+
+        {/* Tabela de Dados */}
+        <div className="bg-card rounded-lg border border-border overflow-hidden shadow-md">
+          <div className="overflow-x-auto hidden md:block">
+            <table className="min-w-[600px] w-full">
+              <thead className="bg-muted border-b border-border">
+                <tr>
+                  <th className="text-left p-3 sm:p-4 font-medium text-foreground">Nome</th>
+                  <th className="text-left p-3 sm:p-4 font-medium text-foreground">Telefone</th>
+                  {/* Coluna Convênio visível para teste */}
+                  <th className="text-left p-3 sm:p-4 font-medium text-foreground hidden lg:table-cell">Convênio</th>
+                  <th className="text-left p-3 sm:p-4 font-medium text-foreground hidden lg:table-cell">VIP</th>
+                  <th className="text-left p-3 sm:p-4 font-medium text-foreground hidden xl:table-cell">Último atendimento</th>
+                  <th className="text-left p-3 sm:p-4 font-medium text-foreground">Ações</th>
+                </tr>
+              </thead>
+              <tbody>
+                {loading ? (
+                  <tr>
+                    <td colSpan={7} className="p-6 text-muted-foreground text-center">
+                      <Loader2 className="w-6 h-6 animate-spin mx-auto text-primary" />
+                      Carregando pacientes...
+                    </td>
+                  </tr>
+                ) : error ? (
+                  <tr>
+                    <td colSpan={7} className="p-6 text-red-600 text-center">{`Erro: ${error}`}</td>
+                  </tr>
+                ) : filteredPacientes.length === 0 ? (
+                  <tr>
+                    <td colSpan={7} className="p-8 text-center text-muted-foreground">
+                       Nenhum paciente encontrado com esses filtros.
+                    </td>
+                  </tr>
+                ) : (
+                  currentItems.map((p) => (
+                    <tr key={p.id} className="border-b border-border hover:bg-accent/40 transition-colors">
+                      <td className="p-3 sm:p-4">{p.nome}</td>
+                      <td className="p-3 sm:p-4 text-muted-foreground">{p.telefone}</td>
+                      <td className="p-3 sm:p-4 text-muted-foreground hidden lg:table-cell">{p.convenio}</td>
+                      <td className="p-3 sm:p-4 text-muted-foreground hidden lg:table-cell">{p.vip}</td>
+                      <td className="p-3 sm:p-4 text-muted-foreground hidden xl:table-cell">{p.ultimoAtendimento}</td>
+                      <td className="p-3 sm:p-4">
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" className="h-8 w-8 p-0">
+                              <span className="sr-only">Abrir menu</span>
+                              <MoreVertical className="h-4 w-4" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem onClick={() => handleOpenModal(p)}>
+                              <Eye className="w-4 h-4 mr-2" />
+                              Ver detalhes
+                            </DropdownMenuItem>
+                            <DropdownMenuItem asChild>
+                              <Link href={`/doctor/medicos/${p.id}/laudos`}>
+                                <Edit className="w-4 h-4 mr-2" />
+                                Laudos
+                              </Link>
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Cards para Mobile */}
+          <div className="md:hidden divide-y divide-border">
+            {loading ? (
+              <div className="p-6 text-muted-foreground text-center">
+                <Loader2 className="w-6 h-6 animate-spin mx-auto text-primary" />
+                Carregando...
+              </div>
+            ) : filteredPacientes.length === 0 ? (
+              <div className="p-8 text-center text-muted-foreground">
+                 Nenhum paciente encontrado.
+              </div>
+            ) : (
+              currentItems.map((p) => (
+                <div key={p.id} className="flex items-center justify-between p-4 hover:bg-accent/40 transition-colors">
+                  <div className="flex-1 min-w-0 pr-4">
+                    <div className="text-base font-semibold text-foreground break-words">
+                      {p.nome || "—"}
+                    </div>
+                    <div className="text-sm text-muted-foreground">
+                       {p.telefone} | {p.convenio} | VIP: {p.vip}
+                    </div>
+                  </div>
+                  <div className="ml-4 flex-shrink-0">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="outline" size="icon">
+                          <Eye className="w-4 h-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem onClick={() => handleOpenModal(p)}>
+                          <Eye className="w-4 h-4 mr-2" />
+                          Ver detalhes
+                        </DropdownMenuItem>
+                        <DropdownMenuItem asChild>
+                          <Link href={`/doctor/pacientes/${p.id}/laudos`}>
+                            <Edit className="w-4 h-4 mr-2" />
+                            Laudos
+                          </Link>
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+
+          {/* Paginação */}
+          {totalPages > 1 && (
+            <div className="flex flex-wrap justify-center items-center gap-2 border-t border-border p-4 bg-muted/40">
+              <button
+                onClick={goToPrevPage}
+                disabled={currentPage === 1}
+                className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-secondary text-secondary-foreground hover:bg-secondary/80 disabled:opacity-50 disabled:cursor-not-allowed border border-border"
+              >
+                {"< Anterior"}
+              </button>
+
+              {visiblePageNumbers.map((number) => (
+                <button
+                  key={number}
+                  onClick={() => paginate(number)}
+                  className={`px-4 py-2 rounded-md font-medium transition-colors text-sm border border-border ${
+                    currentPage === number
+                      ? "bg-blue-600 text-primary-foreground shadow-md border-blue-600"
+                      : "bg-secondary text-secondary-foreground hover:bg-secondary/80"
+                  }`}
+                >
+                  {number}
+                </button>
+              ))}
+
+              <button
+                onClick={goToNextPage}
+                disabled={currentPage === totalPages}
+                className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-secondary text-secondary-foreground hover:bg-secondary/80 disabled:opacity-50 disabled:cursor-not-allowed border border-border"
+              >
+                {"Próximo >"}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <PatientDetailsModal
+        patient={selectedPatient}
+        isOpen={isModalOpen}
+        onClose={handleCloseModal}
+      />
+    </Sidebar>
+  );
+}

app/finance/home/page.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Sidebar from "@/components/Sidebar";
+
+interface Paciente {
+  id: string;
+  nome: string;
+  telefone: string;
+  cidade: string;
+  estado: string;
+  ultimoAtendimento?: string;
+  proximoAtendimento?: string;
+}
+
+export default function PacientesPage() {
+
+  return (
+    <Sidebar>
+      <div></div>
+    </Sidebar>
+  );
+}

app/finance/login/page.tsx

@@ -0,0 +1,31 @@
+// Caminho: app/(finance)/login/page.tsx
+
+import { LoginForm } from "@/components/LoginForm";
+import Link from "next/link"; // Adicionado para o link de "Voltar"
+
+export default function FinanceLoginPage() {
+    // NOTA: Esta página se tornou obsoleta com a criação do /login central.
+    // O ideal no futuro é deletar esta página e redirecionar os usuários.
+
+    return (
+        <div className="min-h-screen bg-gradient-to-br from-orange-50 via-white to-orange-50 flex items-center justify-center p-4">
+            <div className="w-full max-w-md text-center">
+                <h1 className="text-3xl font-bold text-foreground mb-2">Área Financeira</h1>
+                <p className="text-muted-foreground mb-8">Acesse o sistema de faturamento</p>
+
+                {/* --- ALTERAÇÃO PRINCIPAL AQUI --- */}
+                {/* Chamando o LoginForm unificado sem props desnecessárias */}
+                <LoginForm>
+                    {/* Adicionamos um link de "Voltar" como filho (children) */}
+                    <div className="mt-6 text-center text-sm">
+                        <Link href="/">
+                            <span className="font-semibold text-primary hover:underline cursor-pointer">
+                                Voltar à página inicial
+                            </span>
+                        </Link>
+                    </div>
+                </LoginForm>
+            </div>
+        </div>
+    );
+}

app/globals.css

@@ -0,0 +1,154 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@custom-variant dark (&:is(.dark *));
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.637 0.237 25.331);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.7 0.25 25);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+.high-contrast {
+  --background: oklch(0 0 0);
+  --foreground: oklch(1 0.5 100);
+  --card: oklch(0 0 0);
+  --card-foreground: oklch(1 0.5 100);
+  --popover: oklch(0 0 0);
+  --popover-foreground: oklch(1 0.5 100);
+  --primary: oklch(1 0.5 100);
+  --primary-foreground: oklch(0 0 0);
+  --secondary: oklch(0 0 0);
+  --secondary-foreground: oklch(1 0.5 100);
+  --muted: oklch(0 0 0);
+  --muted-foreground: oklch(1 0.5 100);
+  --accent: oklch(0 0 0);
+  --accent-foreground: oklch(1 0.5 100);
+  --destructive: oklch(0.8 0.5 25);
+  --destructive-foreground: oklch(0 0 0);
+  --border: oklch(1 0.5 100);
+  --input: oklch(0 0 0);
+  --ring: oklch(1 0.5 100);
+  --sidebar: oklch(0 0 0);
+  --sidebar-foreground: oklch(1 0.5 100);
+  --sidebar-primary: oklch(1 0.5 100);
+  --sidebar-primary-foreground: oklch(0 0 0);
+  --sidebar-accent: oklch(0 0 0);
+  --sidebar-accent-foreground: oklch(1 0.5 100);
+  --sidebar-border: oklch(1 0.5 100);
+  --sidebar-ring: oklch(1 0.5 100);
+}
+
+@theme inline {
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+    transition: background-color 0.3s, color 0.3s;
+  }
+}

app/layout.tsx

@@ -0,0 +1,23 @@
+import type { Metadata } from "next";
+import { GeistSans } from "geist/font/sans";
+import { GeistMono } from "geist/font/mono";
+import { Analytics } from "@vercel/analytics/next";
+import "./globals.css";
+import { Toaster } from "@/components/ui/toaster";
+import { Providers } from "./providers";
+
+export default function RootLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <html lang="en" suppressHydrationWarning>
+            <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
+                <Providers>{children}</Providers>
+                <Analytics />
+                <Toaster />
+            </body>
+        </html>
+    );
+}

app/login/page.tsx

@@ -0,0 +1,261 @@
+// Caminho: app/login/page.tsx
+
+"use client";
+
+import { usersService } from "@/services/usersApi.mjs";
+import { LoginForm } from "@/components/LoginForm";
+import Link from "next/link";
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ArrowLeft, X } from "lucide-react";
+import { useState } from "react";
+import RenderFromTemplateContext from "next/dist/client/components/render-from-template-context";
+
+export default function LoginPage() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [email, setEmail] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [message, setMessage] = useState<{
+    type: "success" | "error";
+    text: string;
+  } | null>(null);
+
+  const handleOpenModal = () => {
+    // Tenta pegar o email do input do formulário de login
+    const emailInput = document.querySelector(
+      'input[type="email"]'
+    ) as HTMLInputElement;
+    if (emailInput?.value) {
+      setEmail(emailInput.value);
+    }
+    setIsModalOpen(true);
+  };
+
+  const handleResetPassword = async () => {
+    if (!email.trim()) {
+      setMessage({
+        type: "error",
+        text: "Por favor, insira um e-mail válido.",
+      });
+      return;
+    }
+
+    setIsLoading(true);
+    setMessage(null);
+
+    try {
+      // Chama o método que já faz o fetch corretamente
+      const data = await usersService.resetPassword(email);
+
+      console.log("Resposta resetPassword:", data);
+
+      setMessage({
+        type: "success",
+        text: "E-mail de recuperação enviado! Verifique sua caixa de entrada.",
+      });
+
+      setTimeout(() => {
+        setIsModalOpen(false);
+        setMessage(null);
+        setEmail("");
+      }, 2000);
+    } catch (error) {
+      console.error("Erro no reset de senha:", error);
+      setMessage({
+        type: "error",
+        text:
+          error instanceof Error
+            ? error.message
+            : "Erro ao enviar e-mail. Tente novamente.",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+    setMessage(null);
+    setEmail("");
+  };
+
+  return (
+    <>
+      <div className="min-h-screen grid grid-cols-1 lg:grid-cols-2">
+        {/* PAINEL ESQUERDO: O Formulário */}
+        <div className="relative flex flex-col items-center justify-center p-8 bg-background">
+          {/* Link para Voltar */}
+          <div className="absolute top-8 left-8">
+            <Link
+              href="/"
+              className="inline-flex items-center text-muted-foreground hover:text-primary transition-colors font-medium"
+            >
+              <ArrowLeft className="w-4 h-4 mr-2" />
+              Voltar à página inicial
+            </Link>
+          </div>
+
+          {/* O contêiner principal que agora terá a sombra e o estilo de card */}
+          <div className="w-full max-w-md bg-card p-10 rounded-2xl shadow-xl border-2 border-border mt-8">
+            {/* NOVO: Bloco da Logo e Nome (Painel Esquerdo) */}
+            <div className="flex items-center justify-center space-x-3 mb-8">
+              <img
+                src="/Logo MedConnect.png" // Caminho da sua logo
+                alt="Logo MediConnect"
+                className="w-16 h-16 object-contain" // Mesmo tamanho que usamos na página inicial
+              />
+              <span className="text-3xl font-extrabold text-primary">
+                MedConnect
+              </span>
+            </div>
+            {/* FIM: Bloco da Logo e Nome */}
+
+            <div className="text-center mb-8">
+              {/* Título de boas-vindas movido para baixo da logo */}
+              <h1 className="text-3xl font-bold text-foreground">
+                Acesse sua conta
+              </h1>
+              <p className="text-muted-foreground mt-2">
+                Bem-vindo(a) de volta ao MedConnect!
+              </p>
+            </div>
+
+            <LoginForm>
+              {/* Children para o LoginForm */}
+              <div className="mt-4 text-center text-sm">
+                <button
+                  onClick={handleOpenModal}
+                  className="text-muted-foreground hover:text-primary cursor-pointer underline bg-transparent border-none"
+                >
+                  Esqueceu sua senha?
+                </button>
+              </div>
+            </LoginForm>
+
+            <div className="mt-6 text-center text-sm">
+              <span className="text-muted-foreground">
+                Não tem uma conta de paciente?{" "}
+              </span>
+              <Link href="/patient/register">
+                <span className="font-semibold text-blue-600 hover:text-blue-700 hover:underline cursor-pointer">
+                  Crie uma agora
+                </span>
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        {/* PAINEL DIREITO: A Imagem e Branding */}
+        <div className="hidden lg:block relative">
+          {/* Usamos o componente <Image> para otimização e performance */}
+          <Image
+            src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=2070"
+            alt="Médica utilizando um tablet na clínica MedConnect"
+            fill
+            style={{ objectFit: "cover" }}
+            priority
+            className="dark:opacity-80"
+          />
+          {/* Camada de sobreposição para escurecer a imagem e destacar o texto */}
+          <div className="absolute inset-0 bg-primary/80 flex flex-col items-start justify-end p-12 text-left">
+            {/* BLOCO DE NOME ADICIONADO */}
+            <div className="mb-6 border-l-4 border-primary-foreground pl-4">
+              <h1 className="text-5xl font-extrabold text-primary-foreground tracking-wider">
+                MedConnect
+              </h1>
+            </div>
+            <h2 className="text-4xl font-bold text-primary-foreground leading-tight">
+              Tecnologia e Cuidado a Serviço da Sua Saúde.
+            </h2>
+            <p className="mt-4 text-lg text-primary-foreground/80">
+              Acesse seu portal para uma experiência de saúde integrada, segura
+              e eficiente.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Modal de Recuperação de Senha */}
+      {isModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+          <div className="relative w-full max-w-md bg-card p-8 rounded-2xl shadow-2xl mx-4">
+            {/* Botão de fechar */}
+            <button
+              onClick={closeModal}
+              className="absolute top-4 right-4 text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <X className="w-5 h-5" />
+            </button>
+
+            {/* Cabeçalho */}
+            <div className="mb-6">
+              <h2 className="text-2xl font-bold text-foreground">
+                Recuperar Senha
+              </h2>
+              <p className="text-muted-foreground mt-2">
+                Insira seu e-mail e enviaremos um link para redefinir sua senha.
+              </p>
+            </div>
+
+            {/* Input de e-mail */}
+            <div className="space-y-4">
+              <div>
+                <label
+                  htmlFor="email"
+                  className="block text-sm font-medium text-foreground mb-2"
+                >
+                  E-mail
+                </label>
+                <Input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="seu@email.com"
+                  disabled={isLoading}
+                  className="w-full"
+                />
+              </div>
+
+              {/* Mensagem de feedback */}
+              {message && (
+                <div
+                  className={`p-3 rounded-lg text-sm ${
+                    message.type === "success"
+                      ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300"
+                      : "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300"
+                  }`}
+                >
+                  {message.text}
+                </div>
+              )}
+
+              {/* Botões */}
+              <div className="flex gap-3 pt-2">
+                {/* Botão Cancelar – Azul contornado */}
+                <Button
+                  variant="outline"
+                  onClick={closeModal}
+                  disabled={isLoading}
+                  className="flex-1 bg-blue-600 hover:bg-blue-700 text-white"
+                >
+                  Cancelar
+                </Button>
+
+                {/* Botão Resetar Senha – Azul sólido */}
+                <Button
+                  onClick={handleResetPassword}
+                  disabled={isLoading}
+                  className="flex-1 bg-blue-600 hover:bg-blue-700 text-white"
+                >
+                  {isLoading ? "Enviando..." : "Resetar Senha"}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

app/manager/dashboard/page.tsx

@@ -0,0 +1,242 @@
+"use client";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Clock, Plus, User } from "lucide-react"; // Removi 'Calendar' que não estava sendo usado
+import Link from "next/link";
+import React, { useState, useEffect } from "react";
+import { usersService } from "services/usersApi.mjs";
+import { doctorsService } from "services/doctorsApi.mjs";
+import Sidebar from "@/components/Sidebar";
+import { api } from "services/api.mjs"; // <-- ADICIONEI ESTE IMPORT
+
+export default function ManagerDashboard() {
+  // 🔹 Estados para usuários
+  const [firstUser, setFirstUser] = useState<any>(null);
+  const [loadingUser, setLoadingUser] = useState(true);
+
+  // 🔹 Estados para médicos
+  const [doctors, setDoctors] = useState<any[]>([]);
+  const [loadingDoctors, setLoadingDoctors] = useState(true);
+
+    // 🔹 Buscar primeiro usuário (LÓGICA ATUALIZADA)
+    useEffect(() => {
+        async function fetchFirstUser() {
+            setLoadingUser(true); // Garante que o estado de loading inicie como true
+            try {
+                // 1. Busca a lista de usuários com seus cargos (roles)
+                const rolesData = await usersService.list_roles();
+
+                // 2. Verifica se a lista não está vazia
+                if (Array.isArray(rolesData) && rolesData.length > 0) {
+                    const firstUserRole = rolesData[0];
+                    const firstUserId = firstUserRole.user_id;
+
+                    if (!firstUserId) {
+                        throw new Error("O primeiro usuário da lista não possui um ID válido.");
+                    }
+
+                    // 3. Usa o ID para buscar o perfil (com nome e email) do usuário
+                    const profileData = await api.get(
+                        `/rest/v1/profiles?select=full_name,email&id=eq.${firstUserId}`
+                    );
+
+                    // 4. Verifica se o perfil foi encontrado
+                    if (Array.isArray(profileData) && profileData.length > 0) {
+                        const userProfile = profileData[0];
+                        // 5. Combina os dados do cargo e do perfil e atualiza o estado
+                        setFirstUser({
+                            ...firstUserRole,
+                            ...userProfile
+                        });
+                    } else {
+                        // Se não encontrar o perfil, exibe os dados que temos
+                        setFirstUser(firstUserRole);
+                    }
+                }
+            } catch (error) {
+                console.error("Erro ao carregar usuário:", error);
+                setFirstUser(null); // Limpa o usuário em caso de erro
+            } finally {
+                setLoadingUser(false);
+            }
+        }
+
+    fetchFirstUser();
+  }, []);
+
+  // 🔹 Buscar 3 primeiros médicos
+  useEffect(() => {
+    async function fetchDoctors() {
+      try {
+        const data = await doctorsService.list(); // ajuste se seu service tiver outro método
+        if (Array.isArray(data)) {
+          setDoctors(data.slice(0, 3)); // pega os 3 primeiros
+        }
+      } catch (error) {
+        console.error("Erro ao carregar médicos:", error);
+      } finally {
+        setLoadingDoctors(false);
+      }
+    }
+
+    fetchDoctors();
+  }, []);
+
+  return (
+    <Sidebar>
+      <div className="space-y-6">
+        {/* Cabeçalho */}
+        <div>
+          <h1 className="text-3xl font-bold">Dashboard</h1>
+          <p className="text-muted-foreground">
+            Bem-vindo ao seu portal de consultas médicas
+          </p>
+        </div>
+
+                {/* Cards principais */}
+                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+
+
+          {/* Card 2 — Gestão de usuários */}
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">
+                Gestão de usuários
+              </CardTitle>
+              <Clock className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              {loadingUser ? (
+                <div className="text-muted-foreground text-sm">
+                  Carregando usuário...
+                </div>
+              ) : firstUser ? (
+                <>
+                  <div className="text-2xl font-bold">
+                    {firstUser.full_name || "Sem nome"}
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    {firstUser.email || "Sem e-mail cadastrado"}
+                  </p>
+                </>
+              ) : (
+                <div className="text-sm text-muted-foreground">
+                  Nenhum usuário encontrado
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Card 3 — Perfil */}
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Perfil</CardTitle>
+              <User className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">100%</div>
+              <p className="text-xs text-muted-foreground">Dados completos</p>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Cards secundários */}
+        <div className="grid md:grid-cols-2 gap-6">
+          {/* Card — Ações rápidas */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Ações Rápidas</CardTitle>
+              <CardDescription>
+                Acesse rapidamente as principais funcionalidades
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <Link href="/manager/home">
+                <Button className="w-full justify-start">
+                  <User className="mr-2 h-4 w-4" />
+                  Gestão de Médicos
+                </Button>
+              </Link>
+              <Link href="/manager/usuario">
+                <Button
+                  variant="outline"
+                  className="w-full justify-start"
+                >
+                  <User className="mr-2 h-4 w-4" />
+                  Usuários Cadastrados
+                </Button>
+              </Link>
+              <Link href="/manager/home/novo">
+                <Button
+                  variant="outline"
+                  className="w-full justify-start"
+                >
+                  <Plus className="mr-2 h-4 w-4" />
+                  Adicionar Novo Médico
+                </Button>
+              </Link>
+              <Link href="/manager/usuario/novo">
+                <Button
+                  variant="outline"
+                  className="w-full justify-start"
+                >
+                  <Plus className="mr-2 h-4 w-4" />
+                  Criar novo Usuário
+                </Button>
+              </Link>
+            </CardContent>
+          </Card>
+
+          {/* Card — Gestão de Médicos */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Gestão de Médicos</CardTitle>
+              <CardDescription>
+                Médicos cadastrados recentemente
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {loadingDoctors ? (
+                <p className="text-sm text-muted-foreground">Carregando médicos...</p>
+              ) : doctors.length === 0 ? (
+                <p className="text-sm text-muted-foreground">
+                  Nenhum médico cadastrado.
+                </p>
+              ) : (
+                <div className="space-y-4">
+                  {doctors.map((doc, index) => (
+                    <div
+                      key={index}
+                      className="flex items-center justify-between p-3 bg-secondary rounded-lg border"
+                    >
+                      <div>
+                        <p className="font-medium">
+                          {doc.full_name || "Sem nome"}
+                        </p>
+                        <p className="text-sm text-muted-foreground">
+                          {doc.specialty || "Sem especialidade"}
+                        </p>
+                      </div>
+                      <div className="text-right">
+                        <p className="font-medium text-primary">
+                          {doc.active ? "Ativo" : "Inativo"}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </Sidebar>
+  );
+}

app/manager/disponibilidade/page.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import Sidebar from "@/components/Sidebar";
+import WeeklyScheduleCard from "@/components/ui/WeeklyScheduleCard";
+
+import { useEffect, useState, useMemo } from "react";
+
+import { AvailabilityService } from "@/services/availabilityApi.mjs";
+import { doctorsService } from "@/services/doctorsApi.mjs";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import { Filter } from "lucide-react";
+
+type Doctor = {
+    id: string;
+    full_name: string;
+    specialty: string;
+    active: boolean;
+};
+
+type Availability = {
+    id: string;
+    doctor_id: string;
+    weekday: string;
+    start_time: string;
+    end_time: string;
+};
+
+export default function AllAvailabilities() {
+    const [availabilities, setAvailabilities] = useState<Availability[] | null>(null);
+    const [doctors, setDoctors] = useState<Doctor[] | null>(null);
+
+    // 🔎 Filtros
+    const [search, setSearch] = useState("");
+    const [specialty, setSpecialty] = useState("all");
+
+    // 🔄 Paginação
+    const ITEMS_PER_PAGE = 6;
+    const [page, setPage] = useState(1);
+
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                const doctorsList = await doctorsService.list();
+                setDoctors(doctorsList);
+
+                const availabilityList = await AvailabilityService.list();
+                setAvailabilities(availabilityList);
+            } catch (e: any) {
+                alert(`${e?.error} ${e?.message}`);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchData();
+    }, []);
+
+    // 🎯 Obter todas as especialidades existentes
+    const specialties = useMemo(() => {
+        if (!doctors) return [];
+        const unique = Array.from(new Set(doctors.map((d) => d.specialty)));
+        return unique;
+    }, [doctors]);
+
+    // 🔍 Filtrar médicos por especialidade + nome
+    const filteredDoctors = useMemo(() => {
+        if (!doctors) return [];
+
+        return doctors.filter((doctor) => (specialty === "all" ? true : doctor.specialty === specialty)).filter((doctor) => doctor.full_name.toLowerCase().includes(search.toLowerCase()));
+    }, [doctors, search, specialty]);
+
+    // 📄 Paginação (após filtros!)
+    const totalPages = Math.ceil(filteredDoctors.length / ITEMS_PER_PAGE);
+    const paginatedDoctors = filteredDoctors.slice((page - 1) * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE);
+
+    const goNext = () => setPage((p) => Math.min(p + 1, totalPages));
+    const goPrev = () => setPage((p) => Math.max(p - 1, 1));
+
+    if (loading) {
+        return (
+            <Sidebar>
+                <div className="p-6 text-muted-foreground">Carregando dados...</div>
+            </Sidebar>
+        );
+    }
+
+    if (!doctors || !availabilities) {
+        return (
+            <Sidebar>
+                <div className="p-6 text-destructive font-medium">Não foi possível carregar médicos ou disponibilidades.</div>
+            </Sidebar>
+        );
+    }
+
+    return (
+        <Sidebar>
+            <div className="space-y-6">
+                <div>
+                    <h1 className="text-3xl font-bold">Disponibilidade dos Médicos</h1>
+                    <p className="text-muted-foreground">Visualize a agenda semanal individual de cada médico.</p>
+                </div>
+                <Card>
+                    <CardContent>
+                        {/* 🔎 Filtros */}
+                        <div className="flex flex-col md:flex-row gap-4 items-center">
+                            {/* Filtro por nome */}
+                            <Filter className="w-4 h-4 mr-2" />
+                            <Input
+                                placeholder="Buscar por nome do médico..."
+                                value={search}
+                                onChange={(e) => {
+                                    setSearch(e.target.value);
+                                    setPage(1);
+                                }}
+                                className="w-full md:w-1/3"
+                            />
+
+                            {/* Filtro por especialidade */}
+                            <Select
+                                onValueChange={(value) => {
+                                    setSpecialty(value);
+                                    setPage(1);
+                                }}
+                                defaultValue="all"
+                            >
+                                <SelectTrigger className="w-full md:w-64">
+                                    <SelectValue placeholder="Especialidade" />
+                                </SelectTrigger>
+
+                                <SelectContent>
+                                    <SelectItem value="all">Todas as especialidades</SelectItem>
+                                    {specialties.map((sp) => (
+                                        <SelectItem key={sp} value={sp}>
+                                            {sp}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
+                    </CardContent>
+                </Card>
+                {/* GRID de cards */}
+                <div className="grid md:grid-cols-1 lg:grid-cols-1 gap-6">
+                    {paginatedDoctors.map((doctor) => {
+                        const doctorAvailabilities = availabilities.filter((a) => a.doctor_id === doctor.id);
+
+                        return (
+                            <Card key={doctor.id}>
+                                <CardHeader>
+                                    <CardTitle className="text-xl font-semibold">{doctor.full_name}</CardTitle>
+                                </CardHeader>
+
+                                <CardContent>
+                                    <WeeklyScheduleCard doctorId={doctor.id} />
+                                </CardContent>
+                            </Card>
+                        );
+                    })}
+                </div>
+
+                {/* 📄 Paginação */}
+                {totalPages > 1 && (
+                    <div className="flex justify-center items-center gap-4 pt-4">
+                        <Button variant="outline" onClick={goPrev} disabled={page === 1}>
+                            Anterior
+                        </Button>
+
+                        <span className="text-muted-foreground font-medium">
+                            Página {page} de {totalPages}
+                        </span>
+
+                        <Button variant="outline" onClick={goNext} disabled={page === totalPages}>
+                            Próxima
+                        </Button>
+                    </div>
+                )}
+            </div>
+        </Sidebar>
+    );
+}

app/manager/home/[id]/editar/page.tsx

@@ -0,0 +1,492 @@
+"use client"
+
+import { useState, useEffect, useCallback } from "react"
+import { useRouter, useParams } from "next/navigation"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+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 { Checkbox } from "@/components/ui/checkbox"
+import { Save, Loader2, ArrowLeft } from "lucide-react"
+import Sidebar from "@/components/Sidebar"
+import { doctorsService } from "services/doctorsApi.mjs";
+
+const UF_LIST = ["AC", "AL", "AP", "AM", "BA", "CE", "DF", "ES", "GO", "MA", "MT", "MS", "MG", "PA", "PB", "PR", "PE", "PI", "RJ", "RN", "RS", "RO", "RR", "SC", "SP", "SE", "TO"];
+
+interface DoctorFormData {
+    nomeCompleto: string;
+    crm: string;
+    crmEstado: string;
+    especialidade: string;
+    cpf: string;
+    email: string;
+    dataNascimento: string;
+    rg: string;
+    telefoneCelular: string;
+    telefone2: string;
+    cep: string;
+    endereco: string;
+    numero: string;
+    complemento: string;
+    bairro: string;
+    cidade: string;
+    estado: string;
+    ativo: boolean;
+    observacoes: string;
+}
+const apiMap: { [K in keyof DoctorFormData]: string | null } = {
+    nomeCompleto: 'full_name', crm: 'crm', crmEstado: 'crm_uf', especialidade: 'specialty',
+    cpf: 'cpf', email: 'email', dataNascimento: 'birth_date', rg: 'rg',
+    telefoneCelular: 'phone_mobile', telefone2: 'phone2', cep: 'cep',
+    endereco: 'street', numero: 'number', complemento: 'complement',
+    bairro: 'neighborhood', cidade: 'city', estado: 'state', ativo: 'active',
+    observacoes: null,
+};
+
+const defaultFormData: DoctorFormData = {
+    nomeCompleto: '', crm: '', crmEstado: '', especialidade: '', cpf: '', email: '',
+    dataNascimento: '', rg: '', telefoneCelular: '', telefone2: '', cep: '',
+    endereco: '', numero: '', complemento: '', bairro: '', cidade: '', estado: '',
+    ativo: true, observacoes: '',
+};
+
+const cleanNumber = (value: string): string => value.replace(/\D/g, '');
+
+const formatCPF = (value: string): string => {
+    const cleaned = cleanNumber(value).substring(0, 11);
+    return cleaned.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
+};
+
+const formatCEP = (value: string): string => {
+    const cleaned = cleanNumber(value).substring(0, 8);
+    return cleaned.replace(/(\d{5})(\d{3})/, '$1-$2');
+};
+
+const formatPhoneMobile = (value: string): string => {
+    const cleaned = cleanNumber(value).substring(0, 11);
+    if (cleaned.length > 10) {
+        return cleaned.replace(/(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');
+    }
+    return cleaned.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2-$3');
+};
+
+export default function EditarMedicoPage() {
+    const router = useRouter();
+    const params = useParams();
+    const id = Array.isArray(params.id) ? params.id[0] : params.id;
+    const [formData, setFormData] = useState<DoctorFormData>(defaultFormData);
+    const [loading, setLoading] = useState(true);
+    const [isSaving, setIsSaving] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const apiToFormMap: { [key: string]: keyof DoctorFormData } = {
+        'full_name': 'nomeCompleto', 'crm': 'crm', 'crm_uf': 'crmEstado', 'specialty': 'especialidade',
+        'cpf': 'cpf', 'email': 'email', 'birth_date': 'dataNascimento', 'rg': 'rg',
+        'phone_mobile': 'telefoneCelular', 'phone2': 'telefone2', 'cep': 'cep',
+        'street': 'endereco', 'number': 'numero', 'complement': 'complemento',
+        'neighborhood': 'bairro', 'city': 'cidade', 'state': 'estado', 'active': 'ativo'
+    };
+
+
+    useEffect(() => {
+        if (!id) return;
+
+        const fetchDoctor = async () => {
+            try {
+                const data = await doctorsService.getById(id);
+
+                if (!data) {
+                    setError("Médico não encontrado.");
+                    setLoading(false);
+                    return;
+                }
+
+                const initialData: Partial<DoctorFormData> = {};
+
+                Object.keys(data).forEach(key => {
+                    const formKey = apiToFormMap[key];
+                    if (formKey) {
+                        let value = data[key] === null ? '' : data[key];
+                        if (formKey === 'ativo') {
+                            value = !!value;
+                        } else if (typeof value !== 'boolean') {
+                            value = String(value);
+                        }
+                        initialData[formKey] = value as any;
+                    }
+                });
+                initialData.observacoes = "Observação carregada do sistema (exemplo de campo interno)";
+
+                setFormData(prev => ({ ...prev, ...initialData }));
+            } catch (e) {
+                console.error("Erro ao carregar dados:", e);
+                setError("Não foi possível carregar os dados do médico.");
+            } finally {
+                setLoading(false);
+            }
+        };
+        fetchDoctor();
+    }, [id]);
+
+    const handleInputChange = (key: keyof DoctorFormData, value: string | boolean) => {
+
+
+        if (typeof value === 'string') {
+            let maskedValue = value;
+            if (key === 'cpf') maskedValue = formatCPF(value);
+            if (key === 'cep') maskedValue = formatCEP(value);
+            if (key === 'telefoneCelular' || key === 'telefone2') maskedValue = formatPhoneMobile(value);
+
+            setFormData((prev) => ({ ...prev, [key]: maskedValue }));
+        } else {
+            setFormData((prev) => ({ ...prev, [key]: value }));
+        }
+    };
+
+
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError(null);
+        setIsSaving(true);
+
+        if (!id) {
+            setError("ID do médico ausente.");
+            setIsSaving(false);
+            return;
+        }
+
+        const finalPayload: { [key: string]: any } = {};
+        const formKeys = Object.keys(formData) as Array<keyof DoctorFormData>;
+
+
+        formKeys.forEach((key) => {
+            const apiFieldName = apiMap[key];
+
+            if (!apiFieldName) return;
+
+            let value = formData[key];
+
+            if (typeof value === 'string') {
+                let trimmedValue = value.trim();
+                if (trimmedValue === '') {
+                    finalPayload[apiFieldName] = null;
+                    return;
+                }
+                if (key === 'crmEstado' || key === 'estado') {
+                    trimmedValue = trimmedValue.toUpperCase();
+                }
+
+                value = trimmedValue;
+            }
+
+            finalPayload[apiFieldName] = value;
+        });
+
+        delete finalPayload.user_id;
+        try {
+            await doctorsService.update(id, finalPayload);
+            router.push("/manager/home");
+        } catch (e: any) {
+            console.error("Erro ao salvar o médico:", e);
+            let detailedError = "Erro ao atualizar. Verifique os dados e tente novamente.";
+
+            if (e.message && e.message.includes("duplicate key value violates unique constraint")) {
+                detailedError = "O CPF ou CRM informado já está cadastrado em outro registro.";
+            } else if (e.message && e.message.includes("Detalhes:")) {
+                detailedError = e.message.split("Detalhes:")[1].trim();
+            } else if (e.message) {
+                detailedError = e.message;
+            }
+
+            setError(`Erro ao atualizar. Detalhes: ${detailedError}`);
+        } finally {
+            setIsSaving(false);
+        }
+    };
+    if (loading) {
+        return (
+            <Sidebar>
+                <div className="flex justify-center items-center h-full w-full py-16">
+                    <Loader2 className="w-8 h-8 animate-spin text-primary" />
+                    <p className="ml-2 text-muted-foreground">Carregando dados do médico...</p>
+                </div>
+            </Sidebar>
+        );
+    }
+
+    return (
+        <Sidebar>
+            <div className="w-full space-y-6 p-4 md:p-8">
+                <div className="flex items-center justify-between">
+                    <div>
+                        <h1 className="text-2xl font-bold text-foreground">
+                            Editar Médico: <span className="text-primary">{formData.nomeCompleto}</span>
+                        </h1>
+                        <p className="text-sm text-muted-foreground">
+                            Atualize as informações do médico
+                        </p>
+                    </div>
+                    <Link href="/manager/home">
+                        <Button variant="outline">
+                            <ArrowLeft className="w-4 h-4 mr-2" />
+                            Voltar
+                        </Button>
+                    </Link>
+                </div>
+
+                <form onSubmit={handleSubmit} className="space-y-6">
+
+                    {error && (
+                        <div className="p-3 rounded-lg border bg-destructive/10 text-destructive border-destructive/30">
+                            <p className="font-medium">Erro na Atualização:</p>
+                            <p className="text-sm">{error}</p>
+                        </div>
+                    )}
+
+                    <div className="space-y-4 p-4 rounded-xl border border-border shadow-sm bg-card">
+                        <h2 className="text-lg font-semibold text-foreground border-b border-border pb-2">
+                            Dados Principais e Pessoais
+                        </h2>
+                        <div className="grid md:grid-cols-4 gap-4">
+                            <div className="space-y-2 col-span-2">
+                                <Label htmlFor="nomeCompleto">Nome Completo</Label>
+                                <Input
+                                    id="nomeCompleto"
+                                    value={formData.nomeCompleto}
+                                    onChange={(e) => handleInputChange("nomeCompleto", e.target.value)}
+                                    placeholder="Nome do Médico"
+                                />
+                            </div>
+                            <div className="space-y-2 col-span-1">
+                                <Label htmlFor="crm">CRM</Label>
+                                <Input
+                                    id="crm"
+                                    value={formData.crm}
+                                    onChange={(e) => handleInputChange("crm", e.target.value)}
+                                    placeholder="Ex: 123456"
+                                />
+                            </div>
+                            <div className="space-y-2 col-span-1">
+                                <Label htmlFor="crmEstado">UF do CRM</Label>
+                                <Select value={formData.crmEstado} onValueChange={(v) => handleInputChange("crmEstado", v)}>
+                                    <SelectTrigger id="crmEstado">
+                                        <SelectValue placeholder="UF" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {UF_LIST.map(uf => (
+                                            <SelectItem key={uf} value={uf}>{uf}</SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                            </div>
+                        </div>
+
+
+                        <div className="grid md:grid-cols-3 gap-4">
+                            <div className="space-y-2">
+                                <Label htmlFor="especialidade">Especialidade</Label>
+                                <Input
+                                    id="especialidade"
+                                    value={formData.especialidade}
+                                    onChange={(e) => handleInputChange("especialidade", e.target.value)}
+                                    placeholder="Ex: Cardiologia"
+                                />
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="cpf">CPF</Label>
+                                <Input
+                                    id="cpf"
+                                    value={formData.cpf}
+                                    onChange={(e) => handleInputChange("cpf", e.target.value)}
+                                    placeholder="000.000.000-00"
+                                    maxLength={14}
+                                />
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="rg">RG</Label>
+                                <Input
+                                    id="rg"
+                                    value={formData.rg}
+                                    onChange={(e) => handleInputChange("rg", e.target.value)}
+                                    placeholder="00.000.000-0"
+                                />
+                            </div>
+                        </div>
+
+                        <div className="grid md:grid-cols-4 gap-4">
+                            <div className="space-y-2 col-span-2">
+                                <Label htmlFor="email">E-mail</Label>
+                                <Input
+                                    id="email"
+                                    type="email"
+                                    value={formData.email}
+                                    onChange={(e) => handleInputChange("email", e.target.value)}
+                                    placeholder="exemplo@dominio.com"
+                                />
+                            </div>
+                            <div className="space-y-2 col-span-1">
+                                <Label htmlFor="dataNascimento">Data de Nascimento</Label>
+                                <Input
+                                    id="dataNascimento"
+                                    type="date"
+                                    value={formData.dataNascimento}
+                                    onChange={(e) => handleInputChange("dataNascimento", e.target.value)}
+                                />
+                            </div>
+                            <div className="space-y-2 flex items-end justify-center pb-1">
+                                <div className="flex items-center space-x-2">
+                                    <Checkbox
+                                        id="ativo"
+                                        checked={formData.ativo}
+                                        onCheckedChange={(checked) => handleInputChange("ativo", checked === true)}
+                                    />
+                                    <Label htmlFor="ativo">Médico Ativo</Label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="space-y-4 p-4 rounded-xl border border-border shadow-sm bg-card">
+                        <h2 className="text-lg font-semibold text-foreground border-b border-border pb-2">
+                            Contato e Endereço
+                        </h2>
+
+                        <div className="grid md:grid-cols-2 gap-4">
+                            <div className="space-y-2">
+                                <Label htmlFor="telefoneCelular">Telefone Celular</Label>
+                                <Input
+                                    id="telefoneCelular"
+                                    value={formData.telefoneCelular}
+                                    onChange={(e) => handleInputChange("telefoneCelular", e.target.value)}
+                                    placeholder="(00) 00000-0000"
+                                    maxLength={15}
+                                />
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="telefone2">Telefone Adicional</Label>
+                                <Input
+                                    id="telefone2"
+                                    value={formData.telefone2}
+                                    onChange={(e) => handleInputChange("telefone2", e.target.value)}
+                                    placeholder="(00) 00000-0000"
+                                    maxLength={15}
+                                />
+                            </div>
+                        </div>
+
+
+                        <div className="grid md:grid-cols-4 gap-4">
+                            <div className="space-y-2 col-span-1">
+                                <Label htmlFor="cep">CEP</Label>
+                                <Input
+                                    id="cep"
+                                    value={formData.cep}
+                                    onChange={(e) => handleInputChange("cep", e.target.value)}
+                                    placeholder="00000-000"
+                                    maxLength={9}
+                                />
+                            </div>
+                            <div className="space-y-2 col-span-3">
+                                <Label htmlFor="endereco">Logradouro</Label>
+                                <Input
+                                    id="endereco"
+                                    value={formData.endereco}
+                                    onChange={(e) => handleInputChange("endereco", e.target.value)}
+                                    placeholder="Rua, Avenida, etc."
+                                />
+                            </div>
+                        </div>
+
+                        <div className="grid md:grid-cols-4 gap-4">
+                            <div className="space-y-2 col-span-1">
+                                <Label htmlFor="numero">Número</Label>
+                                <Input
+                                    id="numero"
+                                    value={formData.numero}
+                                    onChange={(e) => handleInputChange("numero", e.target.value)}
+                                    placeholder="123"
+                                />
+                            </div>
+                            <div className="space-y-2 col-span-3">
+                                <Label htmlFor="complemento">Complemento</Label>
+                                <Input
+                                    id="complemento"
+                                    value={formData.complemento}
+                                    onChange={(e) => handleInputChange("complemento", e.target.value)}
+                                    placeholder="Apto, Bloco, etc."
+                                />
+                            </div>
+                        </div>
+
+                        <div className="grid md:grid-cols-4 gap-4">
+                            <div className="space-y-2 col-span-2">
+                                <Label htmlFor="bairro">Bairro</Label>
+                                <Input
+                                    id="bairro"
+                                    value={formData.bairro}
+                                    onChange={(e) => handleInputChange("bairro", e.target.value)}
+                                    placeholder="Bairro"
+                                />
+                            </div>
+                            <div className="space-y-2 col-span-1">
+                                <Label htmlFor="cidade">Cidade</Label>
+                                <Input
+                                    id="cidade"
+                                    value={formData.cidade}
+                                    onChange={(e) => handleInputChange("cidade", e.target.value)}
+                                    placeholder="São Paulo"
+                                />
+                            </div>
+                            <div className="space-y-2 col-span-1">
+                                <Label htmlFor="estado">Estado</Label>
+                                <Input
+                                    id="estado"
+                                    value={formData.estado}
+                                    onChange={(e) => handleInputChange("estado", e.target.value)}
+                                    placeholder="SP"
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+
+                    <div className="space-y-4 p-4 rounded-xl border border-border shadow-sm bg-card">
+                        <h2 className="text-lg font-semibold text-foreground border-b border-border pb-2">
+                            Observações (Apenas internas)
+                        </h2>
+                        <Textarea
+                            id="observacoes"
+                            value={formData.observacoes}
+                            onChange={(e) => handleInputChange("observacoes", e.target.value)}
+                            placeholder="Notas internas sobre o médico..."
+                            className="min-h-[100px]"
+                        />
+                    </div>
+
+
+                    <div className="flex justify-end gap-4 pb-8 pt-4">
+                        <Link href="/manager/home">
+                            <Button type="button" variant="outline" disabled={isSaving}>
+                                Cancelar
+                            </Button>
+                        </Link>
+                        <Button
+                            type="submit"
+                            className="bg-primary hover:bg-primary/90"
+                            disabled={isSaving}
+                        >
+                            {isSaving ? (
+                                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                            ) : (
+                                <Save className="w-4 h-4 mr-2" />
+                            )}
+                            {isSaving ? "Salvando..." : "Salvar Alterações"}
+                        </Button>
+                    </div>
+                </form>
+            </div>
+        </Sidebar>
+    );
+}

app/manager/home/page.tsx

@@ -0,0 +1,552 @@
+"use client";
+
+import React, { useEffect, useState, useCallback, useMemo } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Edit, Trash2, Eye, Calendar, Filter, Loader2, MoreVertical } from "lucide-react"
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog"
+
+import { doctorsService } from "services/doctorsApi.mjs";
+import Sidebar from "@/components/Sidebar";
+
+// --- NOVOS IMPORTS (Certifique-se que criou os arquivos no passo anterior) ---
+import { FilterBar } from "@/components/ui/filter-bar";
+import { normalizeSpecialty, getUniqueSpecialties } from "@/lib/normalization";
+
+interface Doctor {
+  id: number;
+  full_name: string;
+  specialty: string;
+  crm: string;
+  phone_mobile: string | null;
+  city: string | null;
+  state: string | null;
+  status?: string;
+}
+
+interface DoctorDetails {
+  nome: string;
+  crm: string;
+  especialidade: string;
+  contato: {
+    celular?: string;
+    telefone1?: string;
+  };
+  endereco: {
+    cidade?: string;
+    estado?: string;
+  };
+  convenio?: string;
+  vip?: boolean;
+  status?: string;
+  ultimo_atendimento?: string;
+  proximo_atendimento?: string;
+  error?: string;
+}
+
+export default function DoctorsPage() {
+  const router = useRouter();
+
+    // --- Estados de Dados ---
+    const [doctors, setDoctors] = useState<Doctor[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    // --- Estados de Modais ---
+    const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
+    const [doctorDetails, setDoctorDetails] = useState<DoctorDetails | null>(null);
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const [doctorToDeleteId, setDoctorToDeleteId] = useState<number | null>(null);
+
+    // --- Estados de Filtro e Busca ---
+    const [searchTerm, setSearchTerm] = useState("");
+    const [filters, setFilters] = useState({
+        specialty: "all",
+        status: "all"
+    });
+
+    // --- Estados de Paginação ---
+    const [itemsPerPage, setItemsPerPage] = useState(10);
+    const [currentPage, setCurrentPage] = useState(1);
+
+    // 1. Buscar Médicos na API
+    const fetchDoctors = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const data: Doctor[] = await doctorsService.list();
+            // Mockando status para visualização (conforme original)
+            const dataWithStatus = data.map((doc, index) => ({
+                ...doc,
+                status: index % 3 === 0 ? "Inativo" : index % 2 === 0 ? "Férias" : "Ativo",
+            }));
+            setDoctors(dataWithStatus || []);
+            // Não resetamos a página aqui para manter a navegação fluida se apenas recarregar dados
+        } catch (e: any) {
+            console.error("Erro ao carregar lista de 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);
+        }
+    }, []);
+
+  useEffect(() => {
+    fetchDoctors();
+  }, [fetchDoctors]);
+
+    // 2. Gerar lista única de especialidades (Normalizada)
+    const uniqueSpecialties = useMemo(() => {
+        return getUniqueSpecialties(doctors);
+    }, [doctors]);
+
+    // 3. Lógica de Filtragem Centralizada
+    const filteredDoctors = useMemo(() => {
+        return doctors.filter((doctor) => {
+            // Normaliza a especialidade do médico atual para comparar
+            const normalizedDocSpecialty = normalizeSpecialty(doctor.specialty);
+            
+            // Filtros exatos
+            const specialtyMatch = filters.specialty === "all" || normalizedDocSpecialty === filters.specialty;
+            const statusMatch = filters.status === "all" || doctor.status === filters.status;
+            
+            // Busca textual (Nome, Telefone, CRM)
+            const searchLower = searchTerm.toLowerCase();
+            const nameMatch = doctor.full_name?.toLowerCase().includes(searchLower);
+            const phoneMatch = doctor.phone_mobile?.includes(searchLower);
+            const crmMatch = doctor.crm?.toLowerCase().includes(searchLower);
+
+            return specialtyMatch && statusMatch && (searchTerm === "" || nameMatch || phoneMatch || crmMatch);
+        });
+    }, [doctors, filters, searchTerm]);
+
+    // --- Handlers de Controle (Com Reset de Paginação) ---
+
+    const handleSearch = (term: string) => {
+        setSearchTerm(term);
+        setCurrentPage(1); // Correção: Reseta para página 1 ao buscar
+    };
+
+    const handleFilterChange = (key: string, value: string) => {
+        setFilters(prev => ({ ...prev, [key]: value }));
+        setCurrentPage(1); // Correção: Reseta para página 1 ao filtrar
+    };
+
+    const handleClearFilters = () => {
+        setSearchTerm("");
+        setFilters({ specialty: "all", status: "all" });
+        setCurrentPage(1); // Correção: Reseta para página 1 ao limpar
+    };
+
+    const handleItemsPerPageChange = (value: string) => {
+        setItemsPerPage(Number(value));
+        setCurrentPage(1);
+    };
+
+    // --- Lógica de Paginação ---
+    const totalPages = Math.ceil(filteredDoctors.length / itemsPerPage);
+    const indexOfLastItem = currentPage * itemsPerPage;
+    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+    const currentItems = filteredDoctors.slice(indexOfFirstItem, indexOfLastItem);
+
+    const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
+    const goToPrevPage = () => setCurrentPage((prev) => Math.max(1, prev - 1));
+    const goToNextPage = () => setCurrentPage((prev) => Math.min(totalPages, prev + 1));
+
+  const getVisiblePageNumbers = (totalPages: number, currentPage: number) => {
+    const pages: number[] = [];
+    const maxVisiblePages = 5;
+    const halfRange = Math.floor(maxVisiblePages / 2);
+    let startPage = Math.max(1, currentPage - halfRange);
+    let endPage = Math.min(totalPages, currentPage + halfRange);
+
+    if (endPage - startPage + 1 < maxVisiblePages) {
+      if (endPage === totalPages) {
+        startPage = Math.max(1, totalPages - maxVisiblePages + 1);
+      }
+      if (startPage === 1) {
+        endPage = Math.min(totalPages, maxVisiblePages);
+      }
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+    return pages;
+  };
+
+  const visiblePageNumbers = getVisiblePageNumbers(totalPages, currentPage);
+
+    // --- Handlers de Ações (Detalhes e Delete) ---
+    const openDetailsDialog = (doctor: Doctor) => {
+        setDetailsDialogOpen(true);
+        setDoctorDetails({
+            nome: doctor.full_name,
+            crm: doctor.crm,
+            especialidade: normalizeSpecialty(doctor.specialty), // Exibe normalizado
+            contato: { celular: doctor.phone_mobile ?? undefined },
+            endereco: { cidade: doctor.city ?? undefined, estado: doctor.state ?? undefined },
+            status: doctor.status || "Ativo",
+            convenio: "Particular",
+            vip: false,
+            ultimo_atendimento: "N/A",
+            proximo_atendimento: "N/A",
+        });
+    };
+
+    const openDeleteDialog = (doctorId: number) => {
+        setDoctorToDeleteId(doctorId);
+        setDeleteDialogOpen(true);
+    };
+
+    const handleDelete = async () => {
+        if (doctorToDeleteId === null) return;
+        setLoading(true);
+        try {
+            await doctorsService.delete(doctorToDeleteId);
+            setDeleteDialogOpen(false);
+            setDoctorToDeleteId(null);
+            await fetchDoctors();
+        } catch (e) {
+            console.error("Erro ao excluir:", e);
+            alert("Erro ao excluir médico.");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+  return (
+    <Sidebar>
+      <div className="space-y-6 px-2 sm:px-4 md:px-6">
+        {/* Cabeçalho */}
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
+          <div>
+            <h1 className="text-2xl font-bold">
+              Médicos Cadastrados
+            </h1>
+            <p className="text-sm text-muted-foreground">
+              Gerencie todos os profissionais de saúde.
+            </p>
+          </div>
+        </div>
+
+                {/* --- NOVO COMPONENTE DE FILTRO --- */}
+                <FilterBar
+                    searchTerm={searchTerm}
+                    onSearch={handleSearch}
+                    activeFilters={filters}
+                    onFilterChange={handleFilterChange}
+                    onClearFilters={handleClearFilters}
+                    searchPlaceholder="Buscar por nome, CRM ou telefone..."
+                    filters={[
+                        { 
+                            key: "specialty", 
+                            label: "Especialidade", 
+                            options: uniqueSpecialties 
+                        },
+                        { 
+                            key: "status", 
+                            label: "Status", 
+                            options: ["Ativo", "Férias", "Inativo"] 
+                        }
+                    ]}
+                >
+                    {/* Seletor de Itens por Página (Filho do FilterBar) */}
+                    <div className="hidden lg:block">
+                        <Select onValueChange={handleItemsPerPageChange} defaultValue={String(itemsPerPage)}>
+                            <SelectTrigger className="w-[70px]">
+                                <SelectValue placeholder="10" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="5">5</SelectItem>
+                                <SelectItem value="10">10</SelectItem>
+                                <SelectItem value="20">20</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+                </FilterBar>
+
+                {/* Tabela de Médicos */}
+                <div className="bg-card rounded-lg border shadow-md overflow-hidden hidden md:block">
+                    {loading ? (
+                        <div className="p-8 text-center text-muted-foreground">
+                            <Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-primary" />
+                            Carregando médicos...
+                        </div>
+                    ) : error ? (
+                        <div className="p-8 text-center text-destructive">{error}</div>
+                    ) : filteredDoctors.length === 0 ? (
+                        <div className="p-8 text-center text-muted-foreground">
+                            {doctors.length === 0
+                                ? <>Nenhum médico cadastrado. <Link href="/manager/home/novo" className="text-primary hover:underline">Adicione um novo</Link>.</>
+                                : "Nenhum médico encontrado com os filtros aplicados."
+                            }
+                        </div>
+                    ) : (
+                        <div className="overflow-x-auto">
+                            <table className="w-full min-w-[600px]">
+                                <thead className="bg-muted border-b">
+                                    <tr>
+                                        <th className="text-left p-2 md:p-4 font-medium text-muted-foreground">Nome</th>
+                                        <th className="text-left p-2 md:p-4 font-medium text-muted-foreground">CRM</th>
+                                        <th className="text-left p-2 md:p-4 font-medium text-muted-foreground">Especialidade</th>
+                                        <th className="text-left p-2 md:p-4 font-medium text-muted-foreground hidden lg:table-cell">Status</th>
+                                        <th className="text-left p-2 md:p-4 font-medium text-muted-foreground hidden xl:table-cell">Cidade/Estado</th>
+                                        <th className="text-right p-4 font-medium text-muted-foreground">Ações</th>
+                                    </tr>
+                                </thead>
+                                <tbody className="bg-card divide-y">
+                                    {currentItems.map((doctor) => (
+                                        <tr key={doctor.id} className="hover:bg-muted transition">
+                                            <td className="px-4 py-3 font-medium">
+                                                {doctor.full_name}
+                                            </td>
+                                            <td className="px-4 py-3 text-muted-foreground hidden sm:table-cell">{doctor.crm}</td>
+                                            <td className="px-4 py-3 text-muted-foreground hidden md:table-cell">
+                                                {/* Exibe Especialidade Normalizada */}
+                                                {normalizeSpecialty(doctor.specialty)}
+                                            </td>
+                                            <td className="px-4 py-3 text-muted-foreground hidden lg:table-cell">
+                                                <span className={`px-2 py-1 rounded-full text-xs ${
+                                                    doctor.status === 'Ativo' ? 'bg-primary/10 text-primary' : 
+                                                    doctor.status === 'Inativo' ? 'bg-destructive/10 text-destructive' : 'bg-yellow-400/10 text-yellow-400'
+                                                }`}>
+                                                    {doctor.status || "N/A"}
+                                                </span>
+                                            </td>
+                                            <td className="px-4 py-3 text-muted-foreground hidden xl:table-cell">
+                                                {(doctor.city || doctor.state)
+                                                    ? `${doctor.city || ""}${doctor.city && doctor.state ? '/' : ''}${doctor.state || ""}`
+                                                    : "N/A"}
+                                            </td>
+                                            <td className="px-4 py-3 text-right">
+                                                <DropdownMenu>
+                                                    <DropdownMenuTrigger asChild>
+                                                        <Button variant="ghost" className="h-8 w-8 p-0">
+                                                            <span className="sr-only">Abrir menu</span>
+                                                            <MoreVertical className="h-4 w-4" />
+                                                        </Button>
+                                                    </DropdownMenuTrigger>
+                                                    <DropdownMenuContent align="end">
+                                                        <DropdownMenuItem onClick={() => openDetailsDialog(doctor)}>
+                                                            <Eye className="mr-2 h-4 w-4" />
+                                                            Ver detalhes
+                                                        </DropdownMenuItem>
+                                                        <DropdownMenuItem asChild>
+                                                            <Link href={`/manager/home/${doctor.id}/editar`}>
+                                                                <Edit className="mr-2 h-4 w-4" />
+                                                                Editar
+                                                            </Link>
+                                                        </DropdownMenuItem>
+                                                        <DropdownMenuItem>
+                                                            <Calendar className="mr-2 h-4 w-4" />
+                                                            Marcar consulta
+                                                        </DropdownMenuItem>
+                                                        <DropdownMenuItem className="text-destructive" onClick={() => openDeleteDialog(doctor.id)}>
+                                                            <Trash2 className="mr-2 h-4 w-4" />
+                                                            Excluir
+                                                        </DropdownMenuItem>
+                                                    </DropdownMenuContent>
+                                                </DropdownMenu>
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                    )}
+                </div>
+
+                {/* Cards de Médicos (Mobile) */}
+                <div className="bg-card rounded-lg border shadow-md p-4 block md:hidden">
+                    {loading ? (
+                        <div className="p-8 text-center text-muted-foreground">
+                            <Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-primary" />
+                            Carregando médicos...
+                        </div>
+                    ) : error ? (
+                        <div className="p-8 text-center text-destructive">{error}</div>
+                    ) : filteredDoctors.length === 0 ? (
+                        <div className="p-8 text-center text-muted-foreground">
+                            {doctors.length === 0
+                                ? <>Nenhum médico cadastrado. <Link href="/manager/home/novo" className="text-primary hover:underline">Adicione um novo</Link>.</>
+                                : "Nenhum médico encontrado com os filtros aplicados."
+                            }
+                        </div>
+                    ) : (
+                        <div className="space-y-4">
+                            {currentItems.map((doctor) => (
+                                <div key={doctor.id} className="bg-muted rounded-lg p-4 flex justify-between items-center border">
+                                    <div>
+                                        <div className="font-semibold">{doctor.full_name}</div>
+                                        <div className="text-xs text-muted-foreground mb-1">{doctor.phone_mobile}</div>
+                                        <div className="text-sm text-muted-foreground">{normalizeSpecialty(doctor.specialty)}</div>
+                                        <div className="text-xs mt-1">
+                                            <span className={`px-2 py-0.5 rounded-full text-xs ${
+                                                    doctor.status === 'Ativo' ? 'bg-primary/10 text-primary' : 
+                                                    doctor.status === 'Inativo' ? 'bg-destructive/10 text-destructive' : 'bg-yellow-400/10 text-yellow-400'
+                                                }`}>
+                                                    {doctor.status || "N/A"}
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <DropdownMenu>
+                                        <DropdownMenuTrigger asChild>
+                                            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                                                <span className="sr-only">Abrir menu</span>
+                                                <div className="font-bold text-muted-foreground">...</div>
+                                            </Button>
+                                        </DropdownMenuTrigger>
+                                        <DropdownMenuContent align="end">
+                                            <DropdownMenuItem onClick={() => openDetailsDialog(doctor)}>
+                                                <Eye className="mr-2 h-4 w-4" />
+                                                Ver detalhes
+                                            </DropdownMenuItem>
+                                            <DropdownMenuItem asChild>
+                                                <Link href={`/manager/home/${doctor.id}/editar`}>
+                                                    <Edit className="mr-2 h-4 w-4" />
+                                                    Editar
+                                                </Link>
+                                            </DropdownMenuItem>
+                                            <DropdownMenuItem className="text-destructive" onClick={() => openDeleteDialog(doctor.id)}>
+                                                <Trash2 className="mr-2 h-4 w-4" />
+                                                Excluir
+                                            </DropdownMenuItem>
+                                        </DropdownMenuContent>
+                                    </DropdownMenu>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </div>
+
+        {/* Paginação */}
+        {totalPages > 1 && (
+          <div className="flex flex-wrap justify-center items-center gap-2 mt-4 p-4 bg-card rounded-lg border shadow-md">
+            <button
+              onClick={goToPrevPage}
+              disabled={currentPage === 1}
+              className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-muted text-muted-foreground hover:bg-muted/90 disabled:opacity-50 disabled:cursor-not-allowed border"
+            >
+              {"< Anterior"}
+            </button>
+
+            {visiblePageNumbers.map((number) => (
+              <button
+                key={number}
+                onClick={() => paginate(number)}
+                className={`px-4 py-2 rounded-md font-medium transition-colors text-sm border ${
+                  currentPage === number
+                    ? "bg-primary text-primary-foreground shadow-md border-primary"
+                    : "bg-muted text-muted-foreground hover:bg-muted/90"
+                }`}
+              >
+                {number}
+              </button>
+            ))}
+
+            <button
+              onClick={goToNextPage}
+              disabled={currentPage === totalPages}
+              className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-muted text-muted-foreground hover:bg-muted/90 disabled:opacity-50 disabled:cursor-not-allowed border"
+            >
+              {"Próximo >"}
+            </button>
+          </div>
+        )}
+
+                {/* Dialogs (Exclusão e Detalhes) */}
+                <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+                    <AlertDialogContent>
+                        <AlertDialogHeader>
+                            <AlertDialogTitle>Confirma a exclusão?</AlertDialogTitle>
+                            <AlertDialogDescription>Esta ação é irreversível e excluirá permanentemente o registro deste médico.</AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                            <AlertDialogCancel disabled={loading}>Cancelar</AlertDialogCancel>
+                            <AlertDialogAction onClick={handleDelete} className="bg-destructive hover:bg-destructive/90" disabled={loading}>
+                                {loading ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : null}
+                                Excluir
+                            </AlertDialogAction>
+                        </AlertDialogFooter>
+                    </AlertDialogContent>
+                </AlertDialog>
+
+        <AlertDialog
+          open={detailsDialogOpen}
+          onOpenChange={setDetailsDialogOpen}
+        >
+          <AlertDialogContent className="max-w-[95%] sm:max-w-lg">
+            <AlertDialogHeader>
+              <AlertDialogTitle className="text-2xl">
+                {doctorDetails?.nome}
+              </AlertDialogTitle>
+              <AlertDialogDescription className="text-left text-muted-foreground">
+                {doctorDetails && (
+                  <div className="space-y-3 text-left">
+                    <h3 className="font-semibold mt-2">
+                      Informações Principais
+                    </h3>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-4 text-sm">
+                      <div>
+                        <strong>CRM:</strong> {doctorDetails.crm}
+                      </div>
+                      <div>
+                        <strong>Especialidade:</strong>{" "}
+                        {doctorDetails.especialidade}
+                      </div>
+                      <div>
+                        <strong>Celular:</strong>{" "}
+                        {doctorDetails.contato.celular || "N/A"}
+                      </div>
+                      <div>
+                        <strong>Localização:</strong>{" "}
+                        {`${doctorDetails.endereco.cidade || "N/A"}/${
+                          doctorDetails.endereco.estado || "N/A"
+                        }`}
+                      </div>
+                    </div>
+
+                    <h3 className="font-semibold mt-4">
+                      Atendimento e Convênio
+                    </h3>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-4 text-sm">
+                      <div>
+                        <strong>Convênio:</strong>{" "}
+                        {doctorDetails.convenio || "N/A"}
+                      </div>
+                      <div>
+                        <strong>VIP:</strong>{" "}
+                        {doctorDetails.vip ? "Sim" : "Não"}
+                      </div>
+                      <div>
+                        <strong>Status:</strong> {doctorDetails.status || "N/A"}
+                      </div>
+                      <div>
+                        <strong>Último atendimento:</strong>{" "}
+                        {doctorDetails.ultimo_atendimento || "N/A"}
+                      </div>
+                      <div>
+                        <strong>Próximo atendimento:</strong>{" "}
+                        {doctorDetails.proximo_atendimento || "N/A"}
+                      </div>
+                    </div>
+                  </div>
+                )}
+                {doctorDetails === null && !loading && (
+                  <div className="text-destructive">Detalhes não disponíveis.</div>
+                )}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Fechar</AlertDialogCancel>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+    </Sidebar>
+  );
+}

app/manager/login/page.tsx

@@ -0,0 +1,31 @@
+// Caminho: app/(manager)/login/page.tsx
+
+import { LoginForm } from "@/components/LoginForm";
+import Link from "next/link"; // Adicionado para o link de "Voltar"
+
+export default function ManagerLoginPage() {
+    // NOTA: Esta página se tornou obsoleta com a criação do /login central.
+    // O ideal no futuro é deletar esta página e redirecionar os usuários.
+
+    return (
+        <div className="min-h-screen bg-background flex items-center justify-center p-4">
+            <div className="w-full max-w-md text-center">
+                <h1 className="text-3xl font-bold text-foreground mb-2">Área do Gestor</h1>
+                <p className="text-muted-foreground mb-8">Acesse o sistema médico</p>
+
+                {/* --- ALTERAÇÃO PRINCIPAL AQUI --- */}
+                {/* Chamando o LoginForm unificado sem props desnecessárias */}
+                <LoginForm>
+                    {/* Adicionamos um link de "Voltar" como filho (children) */}
+                    <div className="mt-6 text-center text-sm">
+                        <Link href="/">
+                            <span className="font-semibold text-primary hover:underline cursor-pointer">
+                                Voltar à página inicial
+                            </span>
+                        </Link>
+                    </div>
+                </LoginForm>
+            </div>
+        </div>
+    );
+}

app/manager/pacientes/[id]/editar/page.tsx

@@ -0,0 +1,651 @@
+"use client";
+
+import type React from "react";
+
+import { useState, useEffect, useRef } from "react";
+import { useRouter, useParams } from "next/navigation";
+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 { Textarea } from "@/components/ui/textarea";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ArrowLeft, Save, Trash2, Paperclip, Upload } from "lucide-react";
+import Link from "next/link";
+import { useToast } from "@/hooks/use-toast";
+import { patientsService } from "@/services/patientsApi.mjs";
+import Sidebar from "@/components/Sidebar";
+
+export default function EditarPacientePage() {
+    const router = useRouter();
+    const params = useParams();
+    const patientId = params.id;
+    const { toast } = useToast();
+
+    // Photo upload state
+    const fileInputRef = useRef<HTMLInputElement | null>(null);
+    const [isUploadingPhoto, setIsUploadingPhoto] = useState(false);
+    const [photoUrl, setPhotoUrl] = useState<string | null>(null);
+    // Anexos state
+    const [anexos, setAnexos] = useState<any[]>([]);
+    const [isUploadingAnexo, setIsUploadingAnexo] = useState(false);
+    const anexoInputRef = useRef<HTMLInputElement | null>(null);
+
+    // Tipagem completa do formulário
+    type FormData = {
+        nome: string; 
+        cpf: string;
+        dataNascimento: string;
+        sexo: string;
+        id?: string;
+        nomeSocial?: string;
+        rg?: string;
+        documentType?: string;
+        documentNumber?: string;
+        ethnicity?: string;
+        race?: string;
+        naturality?: string;
+        nationality?: string;
+        profession?: string;
+        maritalStatus?: string;
+        motherName?: string;
+        motherProfession?: string;
+        fatherName?: string;
+        fatherProfession?: string;
+        guardianName?: string;
+        guardianCpf?: string;
+        spouseName?: string;
+        rnInInsurance?: boolean;
+        legacyCode?: string;
+        notes?: string;
+        email?: string;
+        phoneMobile?: string;
+        phone1?: string;
+        phone2?: string;
+        cep?: string;
+        street?: string;
+        number?: string;
+        complement?: string;
+        neighborhood?: string;
+        city?: string;
+        state?: string;
+        reference?: string;
+        vip?: boolean;
+        lastVisitAt?: string;
+        nextAppointmentAt?: string;
+        createdAt?: string;
+        updatedAt?: string;
+        createdBy?: string;
+        updatedBy?: string;
+        weightKg?: string;
+        heightM?: string;
+        bmi?: string;
+        bloodType?: string;
+    };
+
+    const [formData, setFormData] = useState<FormData>({
+        nome: "",
+        cpf: "",
+        dataNascimento: "",
+        sexo: "",
+        id: "",
+        nomeSocial: "",
+        rg: "",
+        documentType: "",
+        documentNumber: "",
+        ethnicity: "",
+        race: "",
+        naturality: "",
+        nationality: "",
+        profession: "",
+        maritalStatus: "",
+        motherName: "",
+        motherProfession: "",
+        fatherName: "",
+        fatherProfession: "",
+        guardianName: "",
+        guardianCpf: "",
+        spouseName: "",
+        rnInInsurance: false,
+        legacyCode: "",
+        notes: "",
+        email: "",
+        phoneMobile: "",
+        phone1: "",
+        phone2: "",
+        cep: "",
+        street: "",
+        number: "",
+        complement: "",
+        neighborhood: "",
+        city: "",
+        state: "",
+        reference: "",
+        vip: false,
+        lastVisitAt: "",
+        nextAppointmentAt: "",
+        createdAt: "",
+        updatedAt: "",
+        createdBy: "",
+        updatedBy: "",
+        weightKg: "",
+        heightM: "",
+        bmi: "",
+        bloodType: "",
+    });
+
+    const [isGuiaConvenio, setIsGuiaConvenio] = useState(false);
+    const [validadeIndeterminada, setValidadeIndeterminada] = useState(false);
+
+    useEffect(() => {
+        async function fetchPatient() {
+            try {
+                const res = await patientsService.getById(patientId); 
+                setFormData({
+                    id: res[0]?.id ?? "",
+                    nome: res[0]?.full_name ?? "",
+                    nomeSocial: res[0]?.social_name ?? "",
+                    cpf: res[0]?.cpf ?? "",
+                    rg: res[0]?.rg ?? "",
+                    documentType: res[0]?.document_type ?? "",
+                    documentNumber: res[0]?.document_number ?? "",
+                    sexo: res[0]?.sex ?? "",
+                    dataNascimento: res[0]?.birth_date ?? "",
+                    ethnicity: res[0]?.ethnicity ?? "",
+                    race: res[0]?.race ?? "",
+                    naturality: res[0]?.naturality ?? "",
+                    nationality: res[0]?.nationality ?? "",
+                    profession: res[0]?.profession ?? "",
+                    maritalStatus: res[0]?.marital_status ?? "",
+                    motherName: res[0]?.mother_name ?? "",
+                    motherProfession: res[0]?.mother_profession ?? "",
+                    fatherName: res[0]?.father_name ?? "",
+                    fatherProfession: res[0]?.father_profession ?? "",
+                    guardianName: res[0]?.guardian_name ?? "",
+                    guardianCpf: res[0]?.guardian_cpf ?? "",
+                    spouseName: res[0]?.spouse_name ?? "",
+                    rnInInsurance: res[0]?.rn_in_insurance ?? false,
+                    legacyCode: res[0]?.legacy_code ?? "",
+                    notes: res[0]?.notes ?? "",
+                    email: res[0]?.email ?? "",
+                    phoneMobile: res[0]?.phone_mobile ?? "",
+                    phone1: res[0]?.phone1 ?? "",
+                    phone2: res[0]?.phone2 ?? "",
+                    cep: res[0]?.cep ?? "",
+                    street: res[0]?.street ?? "",
+                    number: res[0]?.number ?? "",
+                    complement: res[0]?.complement ?? "",
+                    neighborhood: res[0]?.neighborhood ?? "",
+                    city: res[0]?.city ?? "",
+                    state: res[0]?.state ?? "",
+                    reference: res[0]?.reference ?? "",
+                    vip: res[0]?.vip ?? false,
+                    lastVisitAt: res[0]?.last_visit_at ?? "",
+                    nextAppointmentAt: res[0]?.next_appointment_at ?? "",
+                    createdAt: res[0]?.created_at ?? "",
+                    updatedAt: res[0]?.updated_at ?? "",
+                    createdBy: res[0]?.created_by ?? "",
+                    updatedBy: res[0]?.updated_by ?? "",
+                    weightKg: res[0]?.weight_kg ? String(res[0].weight_kg) : "",
+                    heightM: res[0]?.height_m ? String(res[0].height_m) : "",
+                    bmi: res[0]?.bmi ? String(res[0].bmi) : "",
+                    bloodType: res[0]?.blood_type ?? "",
+                });
+
+            } catch (e: any) {
+                toast({ title: "Erro", description: e?.message || "Falha ao carregar paciente" });
+            }
+        }
+        fetchPatient();
+    }, [patientId, toast]);
+
+    const handleInputChange = (field: string, value: string) => {
+        setFormData((prev) => ({ ...prev, [field]: value }));
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        const payload = {
+            full_name: formData.nome || null,
+            cpf: formData.cpf || null,
+            email: formData.email || null,
+            phone_mobile: formData.phoneMobile || null,
+            birth_date: formData.dataNascimento || null,
+            social_name: formData.nomeSocial || null,
+            sex: formData.sexo || null,
+            blood_type: formData.bloodType || null,
+            weight_kg: formData.weightKg ? Number(formData.weightKg) : null,
+            height_m: formData.heightM ? Number(formData.heightM) : null,
+            street: formData.street || null,
+            number: formData.number || null,
+            complement: formData.complement || null,
+            neighborhood: formData.neighborhood || null,
+            city: formData.city || null,
+            state: formData.state || null,
+            cep: formData.cep || null,
+        };
+
+        try {
+            await patientsService.update(patientId, payload);
+            toast({
+                title: "Sucesso",
+                description: "Paciente atualizado com sucesso",
+                variant: "default"
+            });
+            router.push("/manager/pacientes");
+        } catch (err: any) {
+            console.error("Erro ao atualizar paciente:", err);
+            toast({ 
+                title: "Erro", 
+                description: err?.message || "Não foi possível atualizar o paciente",
+                variant: "destructive"
+            });
+        }
+    };
+
+    return (
+        <Sidebar>
+            <div className="space-y-6 px-2 sm:px-4 pb-20">
+                {/* --- HEADER RESPONSIVO --- */}
+                <div className="flex flex-col xl:flex-row gap-6 xl:items-start xl:justify-between">
+                    <div className="flex flex-col sm:flex-row sm:items-center gap-4">
+                        <Link href="/manager/pacientes">
+                            <Button variant="ghost" size="sm" className="-ml-2">
+                                <ArrowLeft className="w-4 h-4 mr-2" />
+                                Voltar
+                            </Button>
+                        </Link>
+                        <div>
+                            <h1 className="text-xl sm:text-2xl font-bold text-foreground">Editar Paciente</h1>
+                            <p className="text-sm text-muted-foreground">Atualize as informações do paciente</p>
+                        </div>
+                    </div>
+
+                    {/* Anexos Section */}
+                    <div className="w-full xl:w-auto xl:min-w-[400px] bg-card rounded-lg border border-border p-4 sm:p-6">
+                        <h2 className="text-lg font-semibold text-foreground mb-4 sm:mb-6">Anexos</h2>
+                        <div className="flex items-center gap-3 mb-4">
+                            <input ref={anexoInputRef} type="file" className="hidden" />
+                            <Button type="button" variant="outline" size="sm" disabled={isUploadingAnexo} className="w-full sm:w-auto">
+                                <Paperclip className="w-4 h-4 mr-2" /> {isUploadingAnexo ? "Enviando..." : "Adicionar anexo"}
+                            </Button>
+                        </div>
+                        {anexos.length === 0 ? (
+                            <p className="text-sm text-muted-foreground">Nenhum anexo encontrado.</p>
+                        ) : (
+                            <ul className="divide-y divide-border">
+                                {anexos.map((a) => (
+                                    <li key={a.id} className="flex items-center justify-between py-2">
+                                        <div className="flex items-center gap-2 min-w-0">
+                                            <Paperclip className="w-4 h-4 text-muted-foreground shrink-0" />
+                                            <span className="text-sm text-foreground truncate">{a.nome || a.filename || `Anexo ${a.id}`}</span>
+                                        </div>
+                                        <Button type="button" variant="ghost" size="sm" className="text-destructive">
+                                            <Trash2 className="w-4 h-4 mr-1" /> Remover
+                                        </Button>
+                                    </li>
+                                ))}
+                            </ul>
+                        )}
+                    </div>
+                </div>
+
+                <form onSubmit={handleSubmit} className="space-y-6 sm:space-y-8">
+                    {/* --- DADOS PESSOAIS --- */}
+                    <div className="bg-card rounded-lg border border-border p-4 sm:p-6">
+                        <h2 className="text-lg font-semibold text-foreground mb-4 sm:mb-6">Dados Pessoais</h2>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
+                            {/* Photo upload Responsivo */}
+                            <div className="space-y-2 col-span-1 md:col-span-2 lg:col-span-3">
+                                <Label>Foto do paciente</Label>
+                                <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
+                                    <div className="w-20 h-20 rounded-full bg-muted overflow-hidden flex items-center justify-center shrink-0 border">
+                                        {photoUrl ? (
+                                            // eslint-disable-next-line @next/next/no-img-element
+                                            <img src={photoUrl} alt="Foto do paciente" className="w-full h-full object-cover" />
+                                        ) : (
+                                            <span className="text-muted-foreground text-xs text-center px-2">Sem foto</span>
+                                        )}
+                                    </div>
+                                    <div className="flex flex-wrap gap-2 w-full">
+                                        <input ref={fileInputRef} type="file" accept="image/*" className="hidden" />
+                                        <Button type="button" variant="outline" size="sm" disabled={isUploadingPhoto} className="flex-1 sm:flex-none">
+                                            {isUploadingPhoto ? "Enviando..." : "Enviar foto"}
+                                        </Button>
+                                        {photoUrl && (
+                                            <Button type="button" variant="ghost" size="sm" disabled={isUploadingPhoto} className="flex-1 sm:flex-none">
+                                                Remover
+                                            </Button>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div className="space-y-2">
+                                <Label htmlFor="nome">Nome *</Label>
+                                <Input id="nome" value={formData.nome} onChange={(e) => handleInputChange("nome", e.target.value)} required />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="cpf">CPF *</Label>
+                                <Input id="cpf" value={formData.cpf} onChange={(e) => handleInputChange("cpf", e.target.value)} placeholder="000.000.000-00" required />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="rg">RG</Label>
+                                <Input id="rg" value={formData.rg} onChange={(e) => handleInputChange("rg", e.target.value)} placeholder="00.000.000-0" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label>Sexo *</Label>
+                                <div className="flex flex-wrap gap-4 pt-2">
+                                    <div className="flex items-center space-x-2">
+                                        <input type="radio" id="Masculino" name="sexo" value="Masculino" checked={formData.sexo === "Masculino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-primary" />
+                                        <Label htmlFor="Masculino">Masculino</Label>
+                                    </div>
+                                    <div className="flex items-center space-x-2">
+                                        <input type="radio" id="Feminino" name="sexo" value="Feminino" checked={formData.sexo === "Feminino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-primary" />
+                                        <Label htmlFor="Feminino">Feminino</Label>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="dataNascimento">Data de nascimento *</Label>
+                                <Input id="dataNascimento" type="date" value={formData.dataNascimento} onChange={(e) => handleInputChange("dataNascimento", e.target.value)} required />
+                            </div>
+
+                            {/* Demais campos de select e input */}
+                            <div className="space-y-2">
+                                <Label htmlFor="etnia">Etnia</Label>
+                                <Select value={formData.ethnicity} onValueChange={(value) => handleInputChange("ethnicity", value)}>
+                                    <SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="branca">Branca</SelectItem>
+                                        <SelectItem value="preta">Preta</SelectItem>
+                                        <SelectItem value="parda">Parda</SelectItem>
+                                        <SelectItem value="amarela">Amarela</SelectItem>
+                                        <SelectItem value="indigena">Indígena</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="raca">Raça</Label>
+                                <Select value={formData.race} onValueChange={(value) => handleInputChange("race", value)}>
+                                    <SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="caucasiana">Caucasiana</SelectItem>
+                                        <SelectItem value="negroide">Negroide</SelectItem>
+                                        <SelectItem value="mongoloide">Mongoloide</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="naturalidade">Naturalidade</Label>
+                                <Input id="naturalidade" value={formData.naturality} onChange={(e) => handleInputChange("naturality", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="nacionalidade">Nacionalidade</Label>
+                                <Select value={formData.nationality} onValueChange={(value) => handleInputChange("nationality", value)}>
+                                    <SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="brasileira">Brasileira</SelectItem>
+                                        <SelectItem value="estrangeira">Estrangeira</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="profissao">Profissão</Label>
+                                <Input id="profissao" value={formData.profession} onChange={(e) => handleInputChange("profession", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="estadoCivil">Estado civil</Label>
+                                <Select value={formData.maritalStatus} onValueChange={(value) => handleInputChange("maritalStatus", value)}>
+                                    <SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="solteiro">Solteiro(a)</SelectItem>
+                                        <SelectItem value="casado">Casado(a)</SelectItem>
+                                        <SelectItem value="divorciado">Divorciado(a)</SelectItem>
+                                        <SelectItem value="viuvo">Viúvo(a)</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="nomeMae">Nome da mãe</Label>
+                                <Input id="nomeMae" value={formData.motherName} onChange={(e) => handleInputChange("motherName", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="profissaoMae">Profissão da mãe</Label>
+                                <Input id="profissaoMae" value={formData.motherProfession} onChange={(e) => handleInputChange("motherProfession", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="nomePai">Nome do pai</Label>
+                                <Input id="nomePai" value={formData.fatherName} onChange={(e) => handleInputChange("fatherName", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="profissaoPai">Profissão do pai</Label>
+                                <Input id="profissaoPai" value={formData.fatherProfession} onChange={(e) => handleInputChange("fatherProfession", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="nomeResponsavel">Nome do responsável</Label>
+                                <Input id="nomeResponsavel" value={formData.guardianName} onChange={(e) => handleInputChange("guardianName", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="cpfResponsavel">CPF do responsável</Label>
+                                <Input id="cpfResponsavel" value={formData.guardianCpf} onChange={(e) => handleInputChange("guardianCpf", e.target.value)} placeholder="000.000.000-00" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="nomeEsposo">Nome do esposo(a)</Label>
+                                <Input id="nomeEsposo" value={formData.spouseName} onChange={(e) => handleInputChange("spouseName", e.target.value)} />
+                            </div>
+                        </div>
+
+                        <div className="mt-6">
+                            <div className="flex items-center space-x-2">
+                                <Checkbox id="guiaConvenio" checked={isGuiaConvenio} onCheckedChange={(checked) => setIsGuiaConvenio(checked === true)} />
+                                <Label htmlFor="guiaConvenio">RN na Guia do convênio</Label>
+                            </div>
+                        </div>
+
+                        <div className="mt-6">
+                            <Label htmlFor="observacoes">Observações</Label>
+                            <Textarea id="observacoes" value={formData.notes} onChange={(e) => handleInputChange("notes", e.target.value)} placeholder="Digite observações sobre o paciente..." className="mt-2" />
+                        </div>
+                    </div>
+
+                    {/* --- CONTATO --- */}
+                    <div className="bg-card rounded-lg border border-border p-4 sm:p-6">
+                        <h2 className="text-lg font-semibold text-foreground mb-4 sm:mb-6">Contato</h2>
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="email">E-mail *</Label>
+                                <Input id="email" type="email" value={formData.email} onChange={(e) => handleInputChange("email", e.target.value)} required/>
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="celular">Celular *</Label>
+                                <Input id="celular" value={formData.phoneMobile} onChange={(e) => handleInputChange("phoneMobile", e.target.value)} placeholder="(00) 00000-0000" required/>
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="telefone1">Telefone 1</Label>
+                                <Input id="telefone1" value={formData.phone1} onChange={(e) => handleInputChange("phone1", e.target.value)} placeholder="(00) 0000-0000" />
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="telefone2">Telefone 2</Label>
+                                <Input id="telefone2" value={formData.phone2} onChange={(e) => handleInputChange("phone2", e.target.value)} placeholder="(00) 0000-0000" />
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* --- ENDEREÇO --- */}
+                    <div className="bg-card rounded-lg border border-border p-4 sm:p-6">
+                        <h2 className="text-lg font-semibold text-foreground mb-4 sm:mb-6">Endereço</h2>
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="cep">CEP</Label>
+                                <Input id="cep" value={formData.cep} onChange={(e) => handleInputChange("cep", e.target.value)} placeholder="00000-000" />
+                            </div>
+                            <div className="space-y-2 md:col-span-2 lg:col-span-2">
+                                <Label htmlFor="endereco">Endereço</Label>
+                                <Input id="endereco" value={formData.street} onChange={(e) => handleInputChange("street", e.target.value)} />
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="numero">Número</Label>
+                                <Input id="numero" value={formData.number} onChange={(e) => handleInputChange("number", e.target.value)} />
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="complemento">Complemento</Label>
+                                <Input id="complemento" value={formData.complement} onChange={(e) => handleInputChange("complement", e.target.value)} />
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="bairro">Bairro</Label>
+                                <Input id="bairro" value={formData.neighborhood} onChange={(e) => handleInputChange("neighborhood", e.target.value)} />
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="cidade">Cidade</Label>
+                                <Input id="cidade" value={formData.city} onChange={(e) => handleInputChange("city", e.target.value)} />
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="estado">Estado</Label>
+                                <Select value={formData.state} onValueChange={(value) => handleInputChange("state", value)}>
+                                    <SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="AC">Acre</SelectItem>
+                                        <SelectItem value="AL">Alagoas</SelectItem>
+                                        <SelectItem value="AP">Amapá</SelectItem>
+                                        <SelectItem value="AM">Amazonas</SelectItem>
+                                        <SelectItem value="BA">Bahia</SelectItem>
+                                        <SelectItem value="CE">Ceará</SelectItem>
+                                        <SelectItem value="DF">Distrito Federal</SelectItem>
+                                        <SelectItem value="ES">Espírito Santo</SelectItem>
+                                        <SelectItem value="GO">Goiás</SelectItem>
+                                        <SelectItem value="MA">Maranhão</SelectItem>
+                                        <SelectItem value="MT">Mato Grosso</SelectItem>
+                                        <SelectItem value="MS">Mato Grosso do Sul</SelectItem>
+                                        <SelectItem value="MG">Minas Gerais</SelectItem>
+                                        <SelectItem value="PA">Pará</SelectItem>
+                                        <SelectItem value="PB">Paraíba</SelectItem>
+                                        <SelectItem value="PR">Paraná</SelectItem>
+                                        <SelectItem value="PE">Pernambuco</SelectItem>
+                                        <SelectItem value="PI">Piauí</SelectItem>
+                                        <SelectItem value="RJ">Rio de Janeiro</SelectItem>
+                                        <SelectItem value="RN">Rio Grande do Norte</SelectItem>
+                                        <SelectItem value="RS">Rio Grande do Sul</SelectItem>
+                                        <SelectItem value="RO">Rondônia</SelectItem>
+                                        <SelectItem value="RR">Roraima</SelectItem>
+                                        <SelectItem value="SC">Santa Catarina</SelectItem>
+                                        <SelectItem value="SP">São Paulo</SelectItem>
+                                        <SelectItem value="SE">Sergipe</SelectItem>
+                                        <SelectItem value="TO">Tocantins</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* --- INFORMAÇÕES MÉDICAS --- */}
+                    <div className="bg-card rounded-lg border border-border p-4 sm:p-6">
+                        <h2 className="text-lg font-semibold text-foreground mb-4 sm:mb-6">Informações Médicas</h2>
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="tipoSanguineo">Tipo Sanguíneo</Label>
+                                <Select value={formData.bloodType} onValueChange={(value) => handleInputChange("bloodType", value)}>
+                                    <SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="A+">A+</SelectItem>
+                                        <SelectItem value="A-">A-</SelectItem>
+                                        <SelectItem value="B+">B+</SelectItem>
+                                        <SelectItem value="B-">B-</SelectItem>
+                                        <SelectItem value="AB+">AB+</SelectItem>
+                                        <SelectItem value="AB-">AB-</SelectItem>
+                                        <SelectItem value="O+">O+</SelectItem>
+                                        <SelectItem value="O-">O-</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="peso">Peso (kg)</Label>
+                                <Input id="peso" type="number" value={formData.weightKg} onChange={(e) => handleInputChange("weightKg", e.target.value)} placeholder="0.0" />
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="altura">Altura (m)</Label>
+                                <Input id="altura" type="number" step="0.01" value={formData.heightM} onChange={(e) => handleInputChange("heightM", e.target.value)} placeholder="0.00" />
+                            </div>
+                            <div className="space-y-2">
+                                <Label>IMC</Label>
+                                <Input value={formData.weightKg && formData.heightM ? (Number.parseFloat(formData.weightKg) / Number.parseFloat(formData.heightM) ** 2).toFixed(2) : ""} disabled placeholder="Calculado automaticamente" />
+                            </div>
+                        </div>
+                        <div className="mt-6">
+                            <Label htmlFor="alergias">Alergias</Label>
+                            <Textarea id="alergias" onChange={(e) => handleInputChange("alergias", e.target.value)} placeholder="Ex: AAS, Dipirona, etc." className="mt-2" />
+                        </div>
+                    </div>
+
+                    {/* --- CONVÊNIO --- */}
+                    <div className="bg-card rounded-lg border border-border p-4 sm:p-6">
+                        <h2 className="text-lg font-semibold text-foreground mb-4 sm:mb-6">Informações de convênio</h2>
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="convenio">Convênio</Label>
+                                <Select onValueChange={(value) => handleInputChange("convenio", value)}>
+                                    <SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="Particular">Particular</SelectItem>
+                                        <SelectItem value="SUS">SUS</SelectItem>
+                                        <SelectItem value="Unimed">Unimed</SelectItem>
+                                        <SelectItem value="Bradesco">Bradesco Saúde</SelectItem>
+                                        <SelectItem value="Amil">Amil</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="plano">Plano</Label>
+                                <Input id="plano"  onChange={(e) => handleInputChange("plano", e.target.value)} />
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="numeroMatricula">Nº de matrícula</Label>
+                                <Input id="numeroMatricula"  onChange={(e) => handleInputChange("numeroMatricula", e.target.value)} />
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="validadeCarteira">Validade da Carteira</Label>
+                                <Input id="validadeCarteira" type="date" onChange={(e) => handleInputChange("validadeCarteira", e.target.value)} disabled={validadeIndeterminada} />
+                            </div>
+                        </div>
+                        <div className="mt-4">
+                            <div className="flex items-center space-x-2">
+                                <Checkbox id="validadeIndeterminada" checked={validadeIndeterminada} onCheckedChange={(checked) => setValidadeIndeterminada(checked === true)} />
+                                <Label htmlFor="validadeIndeterminada">Validade Indeterminada</Label>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* --- BOTÕES DE AÇÃO --- */}
+                    <div className="flex flex-col-reverse sm:flex-row justify-end gap-4 pt-4">
+                        <Link href="/manager/pacientes" className="w-full sm:w-auto">
+                            <Button type="button" variant="outline" className="w-full">
+                                Cancelar
+                            </Button>
+                        </Link>
+                        <Button type="submit" className="bg-primary hover:bg-primary/90 w-full sm:w-auto">
+                            <Save className="w-4 h-4 mr-2" />
+                            Salvar Alterações
+                        </Button>
+                    </div>
+                </form>
+            </div>
+        </Sidebar>
+    );
+}

app/manager/pacientes/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}

app/manager/pacientes/page.tsx

@@ -0,0 +1,338 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Edit, Trash2, Eye, Calendar, Filter, Loader2, MoreVertical, Phone, MapPin, Activity, ChevronLeft, ChevronRight } from "lucide-react";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import { patientsService } from "@/services/patientsApi.mjs";
+import Sidebar from "@/components/Sidebar";
+
+export default function PacientesPage() {
+    // --- ESTADOS ---
+    const [searchTerm, setSearchTerm] = useState("");
+    const [convenioFilter, setConvenioFilter] = useState("all");
+    const [vipFilter, setVipFilter] = useState("all");
+
+    const [allPatients, setAllPatients] = useState<any[]>([]);
+    const [filteredPatients, setFilteredPatients] = useState<any[]>([]);
+
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    // --- PAGINAÇÃO ---
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+
+    const totalPages = Math.ceil(filteredPatients.length / pageSize);
+    const startIndex = (page - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    
+    const currentPatients = filteredPatients.slice(startIndex, endIndex);
+
+    // --- DIALOGS ---
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const [patientToDelete, setPatientToDelete] = useState<string | null>(null);
+    const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
+    const [patientDetails, setPatientDetails] = useState<any | null>(null);
+
+    // --- LÓGICA DE NÚMEROS DA PAGINAÇÃO (LIMITADO A 3) ---
+    const getPageNumbers = () => {
+        const maxVisible = 3;
+        
+        if (totalPages <= maxVisible) {
+            return Array.from({ length: totalPages }, (_, i) => i + 1);
+        }
+
+        let start = Math.max(1, page - 1);
+        let end = Math.min(totalPages, start + maxVisible - 1);
+
+        if (end === totalPages) {
+            start = Math.max(1, end - maxVisible + 1);
+        }
+
+        const pages = [];
+        for (let i = start; i <= end; i++) {
+            pages.push(i);
+        }
+        return pages;
+    };
+
+    // --- FETCH DADOS ---
+    const fetchAllPacientes = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const res = await patientsService.list();
+            const mapped = res.map((p: any) => ({
+                id: String(p.id ?? ""),
+                nome: p.full_name ?? "—",
+                telefone: p.phone_mobile ?? p.phone1 ?? "—",
+                cidade: p.city ?? "—",
+                estado: p.state ?? "—",
+                ultimoAtendimento: p.last_visit_at?.split('T')[0] ?? "—",
+                proximoAtendimento: p.next_appointment_at?.split('T')[0] ?? "—",
+                vip: Boolean(p.vip ?? false),
+                convenio: p.convenio ?? "Particular",
+                status: p.status ?? undefined,
+            }));
+            setAllPatients(mapped);
+        } catch (e: any) {
+            console.error(e);
+            setError(e?.message || "Erro ao buscar pacientes");
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    useEffect(() => {
+        const filtered = allPatients.filter((patient) => {
+            const matchesSearch = patient.nome?.toLowerCase().includes(searchTerm.toLowerCase()) || patient.telefone?.includes(searchTerm);
+            const matchesConvenio = convenioFilter === "all" || patient.convenio === convenioFilter;
+            const matchesVip = vipFilter === "all" || (vipFilter === "vip" && patient.vip) || (vipFilter === "regular" && !patient.vip);
+            return matchesSearch && matchesConvenio && matchesVip;
+        });
+        setFilteredPatients(filtered);
+        setPage(1); 
+    }, [allPatients, searchTerm, convenioFilter, vipFilter]);
+
+    useEffect(() => {
+        fetchAllPacientes();
+    }, []);
+
+    // --- AÇÕES ---
+    const openDetailsDialog = async (patientId: string) => {
+        setDetailsDialogOpen(true);
+        setPatientDetails(null);
+        try {
+            const res = await patientsService.getById(patientId);
+            setPatientDetails(Array.isArray(res) ? res[0] : res);
+        } catch (e: any) {
+            setPatientDetails({ error: e?.message || "Erro ao buscar detalhes" });
+        }
+    };
+
+    const handleDeletePatient = async (patientId: string) => {
+        try {
+            await patientsService.delete(patientId);
+            setAllPatients((prev) => prev.filter((p) => String(p.id) !== String(patientId)));
+        } catch (e: any) {
+            alert(`Erro ao deletar paciente: ${e?.message || "Erro desconhecido"}`);
+        }
+        setDeleteDialogOpen(false);
+        setPatientToDelete(null);
+    };
+
+    const ActionMenu = ({ patientId }: { patientId: string }) => (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <div className="cursor-pointer p-2 hover:bg-muted rounded-full">
+                    <MoreVertical className="h-4 w-4" />
+                </div>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => openDetailsDialog(String(patientId))}>
+                    <Eye className="w-4 h-4 mr-2" /> Ver detalhes
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                    <Link href={`/manager/pacientes/${patientId}/editar`} className="flex items-center w-full">
+                        <Edit className="w-4 h-4 mr-2" /> Editar
+                    </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                    <Calendar className="w-4 h-4 mr-2" /> Marcar consulta
+                </DropdownMenuItem>
+                <DropdownMenuItem className="text-destructive" onClick={() => { setPatientToDelete(patientId); setDeleteDialogOpen(true); }}>
+                    <Trash2 className="w-4 h-4 mr-2" /> Excluir
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+
+    return (
+        <Sidebar>
+            <div className="space-y-6 px-2 sm:px-4 md:px-8 pb-20">
+                {/* Header */}
+                <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+                    <div>
+                        <h1 className="text-xl md:text-2xl font-bold">Pacientes</h1>
+                        <p className="text-muted-foreground text-sm md:text-base">Gerencie as informações de seus pacientes</p>
+                    </div>
+                </div>
+
+                {/* Filtros */}
+                <div className="flex flex-wrap items-center gap-4 bg-card p-4 rounded-lg border">
+                    <Filter className="w-5 h-5 text-muted-foreground" />
+                    <input type="text" placeholder="Buscar por nome ou telefone..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className="w-full sm:flex-grow sm:max-w-[300px] p-2 border rounded-md text-sm" />
+                    <div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[200px]">
+                        <span className="text-sm font-medium whitespace-nowrap hidden md:block">Convênio</span>
+                        <Select value={convenioFilter} onValueChange={setConvenioFilter}>
+                            <SelectTrigger className="w-full sm:w-40"><SelectValue placeholder="Convênio" /></SelectTrigger>
+                            <SelectContent><SelectItem value="all">Todos</SelectItem><SelectItem value="Particular">Particular</SelectItem><SelectItem value="SUS">SUS</SelectItem><SelectItem value="Unimed">Unimed</SelectItem></SelectContent>
+                        </Select>
+                    </div>
+                    <div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[150px]">
+                        <span className="text-sm font-medium whitespace-nowrap hidden md:block">VIP</span>
+                        <Select value={vipFilter} onValueChange={setVipFilter}>
+                            <SelectTrigger className="w-full sm:w-32"><SelectValue placeholder="VIP" /></SelectTrigger>
+                            <SelectContent><SelectItem value="all">Todos</SelectItem><SelectItem value="vip">VIP</SelectItem><SelectItem value="regular">Regular</SelectItem></SelectContent>
+                        </Select>
+                    </div>
+                    <div className="flex items-center gap-2 w-full sm:w-auto ml-auto sm:ml-0">
+                        <Select value={String(pageSize)} onValueChange={(value) => { setPageSize(Number(value)); setPage(1); }}>
+                            <SelectTrigger className="w-full sm:w-[70px]"><SelectValue placeholder="10" /></SelectTrigger>
+                            <SelectContent><SelectItem value="5">5</SelectItem><SelectItem value="10">10</SelectItem><SelectItem value="20">20</SelectItem></SelectContent>
+                        </Select>
+                    </div>
+                </div>
+
+                {/* Loading / Erro / Conteúdo */}
+                {error ? (
+                    <div className="p-6 text-destructive bg-card border rounded-lg">{`Erro: ${error}`}</div>
+                ) : loading ? (
+                    <div className="p-6 text-center text-muted-foreground flex items-center justify-center bg-card border rounded-lg"><Loader2 className="w-6 h-6 mr-2 animate-spin text-primary" /> Carregando...</div>
+                ) : (
+                    <>
+                        {/* LISTA MOBILE */}
+                        <div className="grid grid-cols-1 gap-4 md:hidden">
+                            {currentPatients.length === 0 ? (
+                                <div className="p-8 text-center text-muted-foreground bg-card rounded-lg border">Nenhum paciente encontrado.</div>
+                            ) : (
+                                currentPatients.map((patient) => (
+                                    <div key={patient.id} className="bg-card p-4 rounded-lg border shadow-sm flex flex-col gap-3 relative">
+                                        <div className="flex justify-between items-start">
+                                            <div className="flex items-center gap-3">
+                                                <div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center"><span className="text-primary font-bold text-sm">{patient.nome?.charAt(0) || "?"}</span></div>
+                                                <div>
+                                                    <div className="font-semibold flex items-center gap-2">{patient.nome}{patient.vip && <span className="px-1.5 py-0.5 text-[10px] font-bold rounded-full text-purple-600 bg-purple-100 uppercase">VIP</span>}</div>
+                                                    <div className="text-xs text-muted-foreground">{patient.convenio}</div>
+                                                </div>
+                                            </div>
+                                            <ActionMenu patientId={String(patient.id)} />
+                                        </div>
+                                        <div className="grid grid-cols-2 gap-2 text-sm text-muted-foreground mt-2 pt-2 border-t">
+                                            <div className="flex items-center gap-2"><Phone className="w-3 h-3" /> {patient.telefone}</div>
+                                            <div className="flex items-center gap-2"><MapPin className="w-3 h-3" /> {patient.cidade}</div>
+                                            <div className="flex items-center gap-2 col-span-2"><Activity className="w-3 h-3" /> Última: {patient.ultimoAtendimento}</div>
+                                        </div>
+                                    </div>
+                                ))
+                            )}
+                        </div>
+
+                        {/* TABELA DESKTOP */}
+                        <div className="bg-card rounded-lg border shadow-md hidden md:block">
+                            <div className="overflow-x-auto">
+                                <table className="w-full min-w-[650px]">
+                                    <thead className="bg-muted border-b">
+                                        <tr>
+                                            <th className="text-left p-4 font-medium text-muted-foreground w-[20%]">Nome</th>
+                                            <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden sm:table-cell">Telefone</th>
+                                            <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden md:table-cell">Cidade / Estado</th>
+                                            <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden sm:table-cell">Convênio</th>
+                                            <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden lg:table-cell">Último atendimento</th>
+                                            <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden lg:table-cell">Próximo atendimento</th>
+                                            <th className="text-left p-4 font-medium text-muted-foreground w-[5%]">Ações</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {currentPatients.length === 0 ? (
+                                            <tr><td colSpan={7} className="p-8 text-center text-muted-foreground">Nenhum paciente encontrado</td></tr>
+                                        ) : (
+                                            currentPatients.map((patient) => (
+                                                <tr key={patient.id} className="border-b hover:bg-muted">
+                                                    <td className="p-4">
+                                                        <div className="flex items-center gap-3">
+                                                            <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center"><span className="text-primary font-medium text-sm">{patient.nome?.charAt(0) || "?"}</span></div>
+                                                            <span className="font-medium">{patient.nome}{patient.vip && <span className="ml-2 px-2 py-0.5 text-xs font-semibold rounded-full text-purple-400 bg-purple-400/15">VIP</span>}</span>
+                                                        </div>
+                                                    </td>
+                                                    <td className="p-4 text-muted-foreground hidden sm:table-cell">{patient.telefone}</td>
+                                                    <td className="p-4 text-muted-foreground hidden md:table-cell">{`${patient.cidade} / ${patient.estado}`}</td>
+                                                    <td className="p-4 text-muted-foreground hidden sm:table-cell">{patient.convenio}</td>
+                                                    <td className="p-4 text-muted-foreground hidden lg:table-cell">{patient.ultimoAtendimento}</td>
+                                                    <td className="p-4 text-muted-foreground hidden lg:table-cell">{patient.proximoAtendimento}</td>
+                                                    <td className="p-4"><ActionMenu patientId={String(patient.id)} /></td>
+                                                </tr>
+                                            ))
+                                        )}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </>
+                )}
+
+                {/* --- RODAPÉ DE PAGINAÇÃO --- */}
+                {totalPages > 1 && !loading && (
+                    <div className="py-4 px-2 border-t border-border">
+                        
+                        {/* 1. PAGINAÇÃO MOBILE (Simples) */}
+                        <div className="flex items-center justify-between md:hidden gap-2">
+                            <Button onClick={() => setPage((prev) => Math.max(1, prev - 1))} disabled={page === 1} variant="outline" size="sm" className="min-w-[90px]">
+                                <ChevronLeft className="w-4 h-4 mr-1" /> Anterior
+                            </Button>
+                            <span className="text-sm font-medium text-muted-foreground">{page} de {totalPages}</span>
+                            <Button onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))} disabled={page === totalPages} variant="outline" size="sm" className="min-w-[90px]">
+                                Próximo <ChevronRight className="w-4 h-4 ml-1" />
+                            </Button>
+                        </div>
+
+                        {/* 2. PAGINAÇÃO DESKTOP (Numerada Limitada) */}
+                        <div className="hidden md:flex items-center justify-center gap-2">
+                            <Button onClick={() => setPage((prev) => Math.max(1, prev - 1))} disabled={page === 1} variant="outline" className="px-4">
+                                &lt; Anterior
+                            </Button>
+
+                            {getPageNumbers().map((pageNum) => (
+                                <Button
+                                    key={pageNum}
+                                    onClick={() => setPage(pageNum)}
+                                    /* CORREÇÃO AQUI: Removemos as classes manuais e usamos apenas o variant */
+                                    variant={pageNum === page ? "default" : "outline"}
+                                    className="w-10 h-10 p-0"
+                                >
+                                    {pageNum}
+                                </Button>
+                            ))}
+
+                            <Button onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))} disabled={page === totalPages} variant="outline" className="px-4">
+                                Próximo &gt;
+                            </Button>
+                        </div>
+                    </div>
+                )}
+
+                {/* Dialogs */}
+                <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+                    <AlertDialogContent>
+                        <AlertDialogHeader><AlertDialogTitle>Confirmar exclusão</AlertDialogTitle><AlertDialogDescription>Tem certeza que deseja excluir este paciente?</AlertDialogDescription></AlertDialogHeader>
+                        <AlertDialogFooter><AlertDialogCancel>Cancelar</AlertDialogCancel><AlertDialogAction onClick={() => patientToDelete && handleDeletePatient(patientToDelete)} className="bg-destructive hover:bg-destructive/90">Excluir</AlertDialogAction></AlertDialogFooter>
+                    </AlertDialogContent>
+                </AlertDialog>
+
+                <AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
+                    <AlertDialogContent className="max-h-[90vh] overflow-y-auto">
+                        <AlertDialogHeader><AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle></AlertDialogHeader>
+                        <AlertDialogDescription>
+                            {patientDetails ? (!patientDetails.error ? (
+                                    <div className="grid gap-4 py-4 text-left">
+                                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                                            <div><p className="font-semibold text-xs text-muted-foreground">NOME</p><p>{patientDetails.full_name}</p></div>
+                                            <div><p className="font-semibold text-xs text-muted-foreground">EMAIL</p><p className="break-all">{patientDetails.email}</p></div>
+                                            <div><p className="font-semibold text-xs text-muted-foreground">TELEFONE</p><p>{patientDetails.phone_mobile}</p></div>
+                                            <div><p className="font-semibold text-xs text-muted-foreground">DATA NASC.</p><p>{patientDetails.birth_date}</p></div>
+                                        </div>
+                                        <div className="border-t pt-4"><p className="font-semibold text-primary mb-2">Endereço</p><p>{patientDetails.street}, {patientDetails.number}</p><p>{patientDetails.cidade}/{patientDetails.estado}</p></div>
+                                    </div>
+                                ) : <p className="text-destructive">{patientDetails.error}</p>) : <Loader2 className="w-6 h-6 animate-spin mx-auto text-primary" />}
+                        </AlertDialogDescription>
+                        <AlertDialogFooter><AlertDialogCancel>Fechar</AlertDialogCancel></AlertDialogFooter>
+                    </AlertDialogContent>
+                </AlertDialog>
+            </div>
+        </Sidebar>
+    );
+}

app/manager/usuario/[id]/editar/page.tsx

@@ -0,0 +1,279 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter, useParams } from "next/navigation"
+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 { Save, Loader2, ArrowLeft } from "lucide-react" 
+import Sidebar from "@/components/Sidebar"
+
+// Mock user service for demonstration. Replace with your actual API service.
+const usersService = {
+  getById: async (id: string): Promise<any> => {
+    console.log(`API Call: Fetching user with ID ${id}`);
+    await new Promise(resolve => setTimeout(resolve, 500));
+    // This mock finds a user from a predefined list.
+    const mockUsers = [
+      { id: 1, full_name: 'Alice Admin', email: 'alice.admin@example.com', phone: '(11) 98765-4321', role: 'admin' },
+      { id: 2, full_name: 'Bruno Gestor', email: 'bruno.g@example.com', phone: '(21) 91234-5678', role: 'gestor' },
+      { id: 3, full_name: 'Dr. Carlos Médico', email: 'carlos.med@example.com', phone: null, role: 'medico' },
+      { id: 4, full_name: 'Daniela Secretaria', email: 'daniela.sec@example.com', phone: '(31) 99999-8888', role: 'secretaria' },
+      { id: 5, full_name: 'Eduardo Usuário', email: 'edu.user@example.com', phone: '(41) 98888-7777', role: 'user' },
+    ];
+    const user = mockUsers.find(u => u.id.toString() === id);
+    if (!user) throw new Error("Usuário não encontrado.");
+    return user;
+  },
+  update: async (id: string, payload: any): Promise<void> => {
+    console.log(`API Call: Updating user ${id} with payload:`, payload);
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    // To simulate an error (e.g., duplicate email), you could throw an error here:
+    // if (payload.email === 'bruno.g@example.com') throw new Error("Este e-mail já está em uso por outro usuário.");
+  }
+};
+
+// Interface for the user form data
+interface UserFormData {
+  nomeCompleto: string;
+  email: string;
+  telefone: string;
+  papel: string;
+  password?: string; // Optional for password updates
+}
+
+// Default state for the form
+const defaultFormData: UserFormData = {
+  nomeCompleto: '',
+  email: '',
+  telefone: '',
+  papel: '',
+  password: '',
+};
+
+// Helper functions for phone formatting
+const cleanNumber = (value: string): string => value.replace(/\D/g, '');
+const formatPhone = (value: string): string => {
+    const cleaned = cleanNumber(value).substring(0, 11);
+    if (cleaned.length > 10) {
+        return cleaned.replace(/(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');
+    }
+    return cleaned.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2-$3');
+};
+
+export default function EditarUsuarioPage() {
+  const router = useRouter();
+  const params = useParams();
+  const id = Array.isArray(params.id) ? params.id[0] : params.id; 
+  
+  const [formData, setFormData] = useState<UserFormData>(defaultFormData);
+  const [loading, setLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Map API field names to our form field names
+  const apiToFormMap: { [key: string]: keyof UserFormData } = {
+      'full_name': 'nomeCompleto',
+      'email': 'email',
+      'phone': 'telefone',
+      'role': 'papel'
+  };
+
+  // Fetch user data when the component mounts
+  useEffect(() => {
+    if (!id) return;
+
+    const fetchUser = async () => {
+      try {
+        const data = await usersService.getById(id);
+        if (!data) {
+          setError("Usuário não encontrado.");
+          setLoading(false);
+          return;
+        }
+
+        const initialData: Partial<UserFormData> = {};
+        Object.keys(data).forEach(key => {
+            const formKey = apiToFormMap[key];
+            if (formKey) {
+                initialData[formKey] = data[key] === null ? '' : String(data[key]);
+            }
+        });
+        
+        setFormData(prev => ({ ...prev, ...initialData }));
+      } catch (e: any) {
+        console.error("Erro ao carregar dados do usuário:", e);
+        setError(e.message || "Não foi possível carregar os dados do usuário.");
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchUser();
+  }, [id]); 
+
+  const handleInputChange = (key: keyof UserFormData, value: string) => {
+    const updatedValue = key === 'telefone' ? formatPhone(value) : value;
+    setFormData((prev) => ({ ...prev, [key]: updatedValue }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setIsSaving(true);
+    
+    if (!id) {
+        setError("ID do usuário ausente.");
+        setIsSaving(false);
+        return;
+    }
+
+    // Prepare payload for the API
+    const payload: { [key: string]: any } = {
+      full_name: formData.nomeCompleto,
+      email: formData.email,
+      phone: formData.telefone.trim() || null,
+      role: formData.papel,
+    };
+
+    // Only include the password in the payload if it has been changed
+    if (formData.password && formData.password.trim() !== '') {
+      payload.password = formData.password;
+    }
+
+    try {
+      await usersService.update(id, payload); 
+      router.push("/manager/usuario"); 
+    } catch (e: any) {
+      console.error("Erro ao salvar o usuário:", e);
+      setError(e.message || "Ocorreu um erro inesperado ao atualizar.");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <Sidebar>
+        <div className="flex justify-center items-center h-full w-full py-16">
+          <Loader2 className="w-8 h-8 animate-spin text-primary" />
+          <p className="ml-2 text-muted-foreground">Carregando dados do usuário...</p>
+        </div>
+      </Sidebar>
+    );
+  }
+
+  return (
+    <Sidebar>
+    <div className="w-full max-w-2xl mx-auto space-y-6 p-4 md:p-8"> 
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-foreground">
+            Editar Usuário: <span className="text-primary">{formData.nomeCompleto}</span>
+          </h1>
+          <p className="text-sm text-muted-foreground">
+            Atualize as informações do usuário (ID: {id}).
+          </p>
+        </div>
+        <Link href="/manager/usuario">
+          <Button variant="outline">
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            Voltar
+          </Button>
+        </Link>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-8 bg-card p-8 border border-border rounded-lg shadow-sm">
+        {error && (
+             <div className="p-3 rounded-lg border bg-destructive/10 text-destructive border-destructive/30">
+                <p className="font-medium">Erro na Atualização:</p>
+                <p className="text-sm">{error}</p>
+            </div>
+        )}
+
+        <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="nomeCompleto">Nome Completo</Label>
+              <Input
+                id="nomeCompleto"
+                value={formData.nomeCompleto}
+                onChange={(e) => handleInputChange("nomeCompleto", e.target.value)}
+              />
+            </div>
+
+            <div className="grid md:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                    <Label htmlFor="email">E-mail</Label>
+                    <Input
+                        id="email"
+                        type="email"
+                        value={formData.email}
+                        onChange={(e) => handleInputChange("email", e.target.value)}
+                    />
+                </div>
+                <div className="space-y-2">
+                    <Label htmlFor="password">Nova Senha</Label>
+                    <Input
+                        id="password"
+                        type="password"
+                        value={formData.password}
+                        onChange={(e) => handleInputChange("password", e.target.value)}
+                        placeholder="Deixe em branco para não alterar"
+                    />
+                </div>
+            </div>
+
+            <div className="grid md:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                    <Label htmlFor="telefone">Telefone</Label>
+                    <Input
+                        id="telefone"
+                        value={formData.telefone}
+                        onChange={(e) => handleInputChange("telefone", e.target.value)}
+                        placeholder="(00) 00000-0000"
+                        maxLength={15}
+                    />
+                </div>
+                <div className="space-y-2">
+                    <Label htmlFor="papel">Papel (Função)</Label>
+                    <Select value={formData.papel} onValueChange={(v) => handleInputChange("papel", v)}>
+                        <SelectTrigger id="papel">
+                            <SelectValue placeholder="Selecione uma função" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="admin">Admin</SelectItem>
+                            <SelectItem value="gestor">Gestor</SelectItem>
+                            <SelectItem value="medico">Médico</SelectItem>
+                            <SelectItem value="secretaria">Secretaria</SelectItem>
+                            <SelectItem value="user">Usuário</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+            </div>
+        </div>
+
+        <div className="flex justify-end gap-4 pt-4">
+          <Link href="/manager/usuario">
+            <Button type="button" variant="outline" disabled={isSaving}>
+              Cancelar
+            </Button>
+          </Link>
+          <Button 
+            type="submit" 
+            className="bg-primary hover:bg-primary/90"
+            disabled={isSaving}
+          >
+            {isSaving ? (
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+            ) : (
+                <Save className="w-4 h-4 mr-2" />
+            )}
+            {isSaving ? "Salvando..." : "Salvar Alterações"}
+          </Button>
+        </div>
+      </form>
+    </div>
+    </Sidebar>
+  );
+}

app/manager/usuario/novo/page.tsx

@@ -0,0 +1,241 @@
+// ARQUIVO COMPLETO PARA: app/manager/usuario/novo/page.tsx
+
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+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 { Save, Loader2 } from "lucide-react";
+import { usersService } from "@/services/usersApi.mjs";
+import { doctorsService } from "@/services/doctorsApi.mjs";
+import { login } from "services/api.mjs";
+import { isValidCPF } from "@/lib/utils"; // 1. IMPORTAÇÃO DA FUNÇÃO DE VALIDAÇÃO
+import Sidebar from "@/components/Sidebar";
+
+interface UserFormData {
+    email: string;
+    nomeCompleto: string;
+    telefone: string;
+    papel: string;
+    senha: string;
+    confirmarSenha: string;
+    cpf: string;
+    crm: string;
+    crm_uf: string;
+    specialty: string;
+}
+
+const defaultFormData: UserFormData = {
+    email: "",
+    nomeCompleto: "",
+    telefone: "",
+    papel: "",
+    senha: "",
+    confirmarSenha: "",
+    cpf: "",
+    crm: "",
+    crm_uf: "",
+    specialty: "",
+};
+
+const cleanNumber = (value: string): string => value.replace(/\D/g, "");
+const formatPhone = (value: string): string => {
+    const cleaned = cleanNumber(value).substring(0, 11);
+    if (cleaned.length === 11) return cleaned.replace(/(\d{2})(\d{5})(\d{4})/, "($1) $2-$3");
+    if (cleaned.length === 10) return cleaned.replace(/(\d{2})(\d{4})(\d{4})/, "($1) $2-$3");
+    return cleaned;
+};
+
+export default function NovoUsuarioPage() {
+    const router = useRouter();
+    const [formData, setFormData] = useState<UserFormData>(defaultFormData);
+    const [isSaving, setIsSaving] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleInputChange = (key: keyof UserFormData, value: string) => {
+        let updatedValue = value;
+        if (key === "telefone") {
+            updatedValue = formatPhone(value);
+        } else if (key === "crm_uf") {
+            updatedValue = value.toUpperCase();
+        }
+        setFormData((prev) => ({ ...prev, [key]: updatedValue }));
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError(null);
+
+        if (!formData.email || !formData.nomeCompleto || !formData.papel || !formData.senha || !formData.confirmarSenha || !formData.cpf) {
+            setError("Por favor, preencha todos os campos obrigatórios.");
+            return;
+        }
+
+        if (formData.senha !== formData.confirmarSenha) {
+            setError("A Senha e a Confirmação de Senha não coincidem.");
+            return;
+        }
+
+        // 2. VALIDAÇÃO DO CPF ANTES DO ENVIO
+        if (!isValidCPF(formData.cpf)) {
+            setError("O CPF informado é inválido. Por favor, verifique os dígitos.");
+            return;
+        }
+
+        if (formData.papel === "medico") {
+            if (!formData.crm || !formData.crm_uf) {
+                setError("Para a função 'Médico', o CRM e a UF do CRM são obrigatórios.");
+                return;
+            }
+        }
+
+        setIsSaving(true);
+
+        try {
+            if (formData.papel === "medico") {
+                const doctorPayload = {
+                    email: formData.email.trim().toLowerCase(),
+                    full_name: formData.nomeCompleto,
+                    cpf: formData.cpf,
+                    crm: formData.crm,
+                    crm_uf: formData.crm_uf,
+                    specialty: formData.specialty || null,
+                    phone_mobile: formData.telefone || null,
+                };
+                await doctorsService.create(doctorPayload);
+            } else {
+                const isPatient = formData.papel === "paciente";
+                const userPayload = {
+                    email: formData.email.trim().toLowerCase(),
+                    password: formData.senha,
+                    full_name: formData.nomeCompleto,
+                    phone: formData.telefone || null,
+                    roles: [formData.papel, "paciente"],
+                    cpf: formData.cpf,
+                    create_patient_record: isPatient,
+                    phone_mobile: isPatient ? formData.telefone || null : undefined,
+                };
+                await usersService.create_user(userPayload);
+            }
+            router.push("/manager/usuario");
+        } catch (e: any) {
+            console.error("Erro ao criar usuário:", e);
+            // 3. MENSAGEM DE ERRO MELHORADA
+            const detail = e.message?.split('detail:"')[1]?.split('"')[0] || e.message;
+            setError(detail.replace(/\\/g, "") || "Não foi possível criar o usuário. Verifique os dados e tente novamente.");
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    const isMedico = formData.papel === "medico";
+
+    return (
+        <Sidebar>
+            <div className="w-full h-full p-4 md:p-8 flex justify-center items-start">
+                <div className="w-full max-w-screen-lg space-y-8">
+                    <div className="flex items-center justify-between border-b pb-4">
+                        <div>
+                            <h1 className="text-3xl font-extrabold">Novo Usuário</h1>
+                            <p className="text-md text-muted-foreground">Preencha os dados para cadastrar um novo usuário no sistema.</p>
+                        </div>
+                        <Link href="/manager/usuario">
+                            <Button variant="outline">Cancelar</Button>
+                        </Link>
+                    </div>
+
+                    <form onSubmit={handleSubmit} className="space-y-6 bg-card p-6 md:p-10 border rounded-xl shadow-lg">
+                        {error && (
+                            <div className="p-4 bg-destructive/10 text-destructive rounded-lg border border-destructive">
+                                <p className="font-semibold">Erro no Cadastro:</p>
+                                <p className="text-sm break-words">{error}</p>
+                            </div>
+                        )}
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <div className="space-y-2 md:col-span-2">
+                                <Label htmlFor="nomeCompleto">Nome Completo *</Label>
+                                <Input id="nomeCompleto" value={formData.nomeCompleto} onChange={(e) => handleInputChange("nomeCompleto", e.target.value)} placeholder="Nome e Sobrenome" required />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="email">E-mail *</Label>
+                                <Input id="email" type="email" value={formData.email} onChange={(e) => handleInputChange("email", e.target.value)} placeholder="exemplo@dominio.com" required />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="papel">Papel (Função) *</Label>
+                                <Select value={formData.papel} onValueChange={(v) => handleInputChange("papel", v)} required>
+                                    <SelectTrigger id="papel">
+                                        <SelectValue placeholder="Selecione uma função" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="admin">Administrador</SelectItem>
+                                        <SelectItem value="gestor">Gestor</SelectItem>
+                                        <SelectItem value="medico">Médico</SelectItem>
+                                        <SelectItem value="secretaria">Secretária</SelectItem>
+                                        <SelectItem value="paciente">Usuário</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            {isMedico && (
+                                <>
+                                    <div className="space-y-2">
+                                        <Label htmlFor="crm">CRM *</Label>
+                                        <Input id="crm" value={formData.crm} onChange={(e) => handleInputChange("crm", e.target.value)} placeholder="Número do CRM" required />
+                                    </div>
+                                    <div className="space-y-2">
+                                        <Label htmlFor="crm_uf">UF do CRM *</Label>
+                                        <Input id="crm_uf" value={formData.crm_uf} onChange={(e) => handleInputChange("crm_uf", e.target.value)} placeholder="Ex: SP" maxLength={2} required />
+                                    </div>
+                                    <div className="space-y-2 md:col-span-2">
+                                        <Label htmlFor="specialty">Especialidade (opcional)</Label>
+                                        <Input id="specialty" value={formData.specialty} onChange={(e) => handleInputChange("specialty", e.target.value)} placeholder="Ex: Cardiologia" />
+                                    </div>
+                                </>
+                            )}
+
+                            <div className="space-y-2">
+                                <Label htmlFor="senha">Senha *</Label>
+                                <Input id="senha" type="password" value={formData.senha} onChange={(e) => handleInputChange("senha", e.target.value)} placeholder="Mínimo 8 caracteres" minLength={8} required />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="confirmarSenha">Confirmar Senha *</Label>
+                                <Input id="confirmarSenha" type="password" value={formData.confirmarSenha} onChange={(e) => handleInputChange("confirmarSenha", e.target.value)} placeholder="Repita a senha" required />
+                                {formData.senha && formData.confirmarSenha && formData.senha !== formData.confirmarSenha && <p className="text-xs text-destructive">As senhas não coincidem.</p>}
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="telefone">Telefone</Label>
+                                <Input id="telefone" value={formData.telefone} onChange={(e) => handleInputChange("telefone", e.target.value)} placeholder="(00) 00000-0000" maxLength={15} />
+                            </div>
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label htmlFor="cpf">Cpf *</Label>
+                            <Input id="cpf" value={formData.cpf} onChange={(e) => handleInputChange("cpf", e.target.value)} placeholder="Apenas números" required />
+                        </div>
+
+                        <div className="flex justify-end gap-4 pt-6 border-t mt-6">
+                            <Link href="/manager/usuario">
+                                <Button type="button" variant="outline" disabled={isSaving}>
+                                    Cancelar
+                                </Button>
+                            </Link>
+                            <Button type="submit" className="bg-primary hover:bg-primary/90" disabled={isSaving}>
+                                {isSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />}
+                                {isSaving ? "Salvando..." : "Salvar Usuário"}
+                            </Button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </Sidebar>
+    );
+}

app/manager/usuario/page.tsx

@@ -0,0 +1,462 @@
+"use client";
+
+import React, { useEffect, useState, useCallback } from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Input } from "@/components/ui/input"; // <--- 1. Importação Adicionada
+import { Plus, Eye, Filter, Loader2, Search } from "lucide-react"; // <--- 1. Ícone Search Adicionado
+import { AlertDialog, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import { api, login } from "services/api.mjs";
+import { usersService } from "services/usersApi.mjs";
+import Sidebar from "@/components/Sidebar";
+
+interface FlatUser {
+  id: string;
+  user_id: string;
+  full_name?: string;
+  email: string;
+  phone?: string | null;
+  role: string;
+}
+
+interface UserInfoResponse {
+  user: any;
+  profile: any;
+  roles: string[];
+  permissions: Record<string, boolean>;
+}
+
+export default function UsersPage() {
+    const [users, setUsers] = useState<FlatUser[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
+    const [userDetails, setUserDetails] = useState<UserInfoResponse | null>(null);
+    
+    // --- Estados de Filtro ---
+    const [searchTerm, setSearchTerm] = useState(""); // <--- 2. Estado da busca
+    const [selectedRole, setSelectedRole] = useState<string>("all");
+
+  // --- Lógica de Paginação INÍCIO ---
+  const [itemsPerPage, setItemsPerPage] = useState(10);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const handleItemsPerPageChange = (value: string) => {
+    setItemsPerPage(Number(value));
+    setCurrentPage(1);
+  };
+  // --- Lógica de Paginação FIM ---
+
+  const fetchUsers = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const rolesData: any[] = await usersService.list_roles();
+      const rolesArray = Array.isArray(rolesData) ? rolesData : [];
+
+      const profilesData: any[] = await api.get(
+        `/rest/v1/profiles?select=id,full_name,email,phone`
+      );
+
+      const profilesById = new Map<string, any>();
+      if (Array.isArray(profilesData)) {
+        for (const p of profilesData) {
+          if (p?.id) profilesById.set(p.id, p);
+        }
+      }
+
+      const mapped: FlatUser[] = rolesArray.map((roleItem) => {
+        const uid = roleItem.user_id;
+        const profile = profilesById.get(uid);
+        return {
+          id: uid,
+          user_id: uid,
+          full_name: profile?.full_name ?? "—",
+          email: profile?.email ?? "—",
+          phone: profile?.phone ?? "—",
+          role: roleItem.role ?? "—",
+        };
+      });
+
+      setUsers(mapped);
+      setCurrentPage(1);
+    } catch (err: any) {
+      console.error("Erro ao buscar usuários:", err);
+      setError("Não foi possível carregar os usuários. Veja console.");
+      setUsers([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        await login();
+      } catch (e) {
+        console.warn("login falhou no init:", e);
+      }
+      await fetchUsers();
+    };
+    init();
+  }, [fetchUsers]);
+
+  const openDetailsDialog = async (flatUser: FlatUser) => {
+    setDetailsDialogOpen(true);
+    setUserDetails(null);
+
+    try {
+      const data = await usersService.full_data(flatUser.user_id);
+      setUserDetails(data);
+    } catch (err: any) {
+      console.error("Erro ao carregar detalhes:", err);
+      setUserDetails({
+        user: { id: flatUser.user_id, email: flatUser.email },
+        profile: { full_name: flatUser.full_name, phone: flatUser.phone },
+        roles: [flatUser.role],
+        permissions: {},
+      });
+    }
+  };
+
+    // --- 3. Lógica de Filtragem Atualizada ---
+    const filteredUsers = users.filter((u) => {
+        // Filtro por Papel (Role)
+        const roleMatch = selectedRole === "all" || u.role === selectedRole;
+
+        // Filtro da Barra de Pesquisa (Nome, Email ou Telefone)
+        const searchLower = searchTerm.toLowerCase();
+        const nameMatch = u.full_name?.toLowerCase().includes(searchLower);
+        const emailMatch = u.email?.toLowerCase().includes(searchLower);
+        const phoneMatch = u.phone?.includes(searchLower);
+        
+        const searchMatch = !searchTerm || nameMatch || emailMatch || phoneMatch;
+
+        return roleMatch && searchMatch;
+    });
+
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentItems = filteredUsers.slice(indexOfFirstItem, indexOfLastItem);
+
+  const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
+
+  const totalPages = Math.ceil(filteredUsers.length / itemsPerPage);
+
+  const goToPrevPage = () => {
+    setCurrentPage((prev) => Math.max(1, prev - 1));
+  };
+
+  const goToNextPage = () => {
+    setCurrentPage((prev) => Math.min(totalPages, prev + 1));
+  };
+
+  const getVisiblePageNumbers = (totalPages: number, currentPage: number) => {
+    const pages: number[] = [];
+    const maxVisiblePages = 5;
+    const halfRange = Math.floor(maxVisiblePages / 2);
+    let startPage = Math.max(1, currentPage - halfRange);
+    let endPage = Math.min(totalPages, currentPage + halfRange);
+
+    if (endPage - startPage + 1 < maxVisiblePages) {
+      if (endPage === totalPages) {
+        startPage = Math.max(1, totalPages - maxVisiblePages + 1);
+      }
+      if (startPage === 1) {
+        endPage = Math.min(totalPages, maxVisiblePages);
+      }
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+    return pages;
+  };
+
+  const visiblePageNumbers = getVisiblePageNumbers(totalPages, currentPage);
+
+  return (
+    <Sidebar>
+      <div className="space-y-6 px-2 sm:px-4 md:px-8">
+        {/* Header */}
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div>
+            <h1 className="text-2xl font-bold">Usuários</h1>
+            <p className="text-sm text-muted-foreground">Gerencie usuários.</p>
+          </div>
+          <Link href="/manager/usuario/novo" className="w-full sm:w-auto">
+            <Button className="w-full sm:w-auto">
+              <Plus className="w-4 h-4 mr-2" /> Novo Usuário
+            </Button>
+          </Link>
+        </div>
+
+                {/* --- 4. Filtro (Barra de Pesquisa + Selects) --- */}
+                <div className="flex flex-col md:flex-row items-start md:items-center gap-3 bg-card p-4 rounded-lg border">
+
+                    {/* Barra de Pesquisa */}
+                    <div className="relative w-full md:flex-1">
+                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                        <Input 
+                            placeholder="Buscar por nome, e-mail ou telefone..." 
+                            value={searchTerm}
+                            onChange={(e) => {
+                                setSearchTerm(e.target.value);
+                                setCurrentPage(1); // Reseta a paginação ao pesquisar
+                            }}
+                            className="pl-10 w-full bg-muted border-border focus:bg-card transition-colors"
+                        />
+                    </div>
+
+                    <div className="flex flex-wrap items-center gap-3 w-full md:w-auto">
+                        {/* Select de Filtro por Papel */}
+                        <div className="flex items-center gap-2 w-full md:w-auto">
+                            <Select
+                                onValueChange={(value) => {
+                                    setSelectedRole(value);
+                                    setCurrentPage(1);
+                                }}
+                                value={selectedRole}>
+
+                                <SelectTrigger className="w-full sm:w-[150px]">
+                                    <SelectValue placeholder="Papel" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="all">Todos</SelectItem>
+                                    <SelectItem value="admin">Admin</SelectItem>
+                                    <SelectItem value="gestor">Gestor</SelectItem>
+                                    <SelectItem value="medico">Médico</SelectItem>
+                                    <SelectItem value="secretaria">Secretária</SelectItem>
+                                    <SelectItem value="user">Usuário</SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </div>
+
+                        {/* Select de Itens por Página */}
+                        <div className="flex items-center gap-2 w-full md:w-auto">
+                            <Select
+                                onValueChange={handleItemsPerPageChange}
+                                defaultValue={String(itemsPerPage)}
+                            >
+                                <SelectTrigger className="w-full sm:w-[80px]">
+                                    <SelectValue placeholder="10" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="5">5</SelectItem>
+                                    <SelectItem value="10">10</SelectItem>
+                                    <SelectItem value="20">20</SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </div>
+                        
+                        <Button variant="outline" className="ml-auto w-full md:w-auto hidden lg:flex">
+                            <Filter className="w-4 h-4 mr-2" />
+                            Filtros
+                        </Button>
+                    </div>
+                </div>
+                {/* Fim do Filtro */}
+
+        {/* Tabela/Lista */}
+        <div className="bg-card rounded-lg border shadow-md overflow-x-auto">
+          {loading ? (
+            <div className="p-8 text-center text-muted-foreground">
+              <Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-primary" />
+              Carregando usuários...
+            </div>
+          ) : error ? (
+            <div className="p-8 text-center text-destructive">{error}</div>
+          ) : filteredUsers.length === 0 ? (
+            <div className="p-8 text-center text-muted-foreground">
+              Nenhum usuário encontrado com os filtros aplicados.
+            </div>
+          ) : (
+            <>
+              {/* Tabela para Telas Médias e Grandes */}
+              <table className="min-w-full divide-y hidden md:table">
+                <thead className="bg-muted">
+                  <tr>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
+                      Nome
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
+                      E-mail
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
+                      Telefone
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
+                      Cargo
+                    </th>
+                    <th className="px-6 py-3 text-right text-xs font-medium text-muted-foreground uppercase">
+                      Ações
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="bg-card divide-y">
+                  {currentItems.map((u) => (
+                    <tr key={u.id} className="hover:bg-muted">
+                      <td className="px-6 py-4 text-sm">
+                        {u.full_name}
+                      </td>
+                      <td className="px-6 py-4 text-sm text-muted-foreground break-all">
+                        {u.email}
+                      </td>
+                      <td className="px-6 py-4 text-sm text-muted-foreground">
+                        {u.phone}
+                      </td>
+                      <td className="px-6 py-4 text-sm text-muted-foreground capitalize">
+                        {u.role}
+                      </td>
+                      <td className="px-6 py-4 text-right">
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          onClick={() => openDetailsDialog(u)}
+                          title="Visualizar"
+                        >
+                          <Eye className="h-4 w-4" />
+                        </Button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+
+                            {/* Layout em Cards/Lista para Telas Pequenas */}
+                            <div className="md:hidden divide-y">
+                                {currentItems.map((u) => (
+                                    <div key={u.id} className="flex items-center justify-between p-4 hover:bg-muted">
+                                        <div className="flex-1 min-w-0">
+                                            <div className="text-sm font-medium truncate">
+                                                {u.full_name || "—"}
+                                            </div>
+                                            <div className="text-xs text-muted-foreground truncate">
+                                                {u.email}
+                                            </div>
+                                            <div className="text-sm text-muted-foreground capitalize mt-1">
+                                                {u.role || "—"}
+                                            </div>
+                                        </div>
+                                        <div className="ml-4 flex-shrink-0">
+                                            <Button
+                                                variant="outline"
+                                                size="icon"
+                                                onClick={() => openDetailsDialog(u)}
+                                                title="Visualizar"
+                                            >
+                                                <Eye className="h-4 w-4" />
+                                            </Button>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+
+              {/* Paginação */}
+              {totalPages > 1 && (
+                <div className="flex flex-wrap justify-center items-center gap-2 mt-4 p-4 border-t">
+                  {/* Botão Anterior */}
+                  <button
+                    onClick={goToPrevPage}
+                    disabled={currentPage === 1}
+                    className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-muted text-muted-foreground hover:bg-muted/90 disabled:opacity-50 disabled:cursor-not-allowed border"
+                  >
+                    {"< Anterior"}
+                  </button>
+
+                  {/* Números das Páginas */}
+                  {visiblePageNumbers.map((number) => (
+                    <button
+                      key={number}
+                      onClick={() => paginate(number)}
+                      className={`px-4 py-2 rounded-md font-medium transition-colors text-sm border ${
+                        currentPage === number
+                          ? "bg-primary text-primary-foreground shadow-md border-primary"
+                          : "bg-muted text-muted-foreground hover:bg-muted/90"
+                      }`}
+                    >
+                      {number}
+                    </button>
+                  ))}
+
+                  {/* Botão Próximo */}
+                  <button
+                    onClick={goToNextPage}
+                    disabled={currentPage === totalPages}
+                    className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-muted text-muted-foreground hover:bg-muted/90 disabled:opacity-50 disabled:cursor-not-allowed border"
+                  >
+                    {"Próximo >"}
+                  </button>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        {/* Modal de Detalhes */}
+        <AlertDialog
+          open={detailsDialogOpen}
+          onOpenChange={setDetailsDialogOpen}
+        >
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle className="text-2xl">
+                {userDetails?.profile?.full_name || "Detalhes do Usuário"}
+              </AlertDialogTitle>
+              <AlertDialogDescription>
+                {!userDetails ? (
+                  <div className="p-4 text-center text-muted-foreground">
+                    <Loader2 className="w-6 h-6 animate-spin mx-auto mb-3 text-primary" />
+                    Buscando dados completos...
+                  </div>
+                ) : (
+                  <div className="space-y-3 pt-2 text-left text-muted-foreground">
+                    <div>
+                      <strong>ID:</strong> {userDetails.user.id}
+                    </div>
+                    <div>
+                      <strong>E-mail:</strong> {userDetails.user.email}
+                    </div>
+                    <div>
+                      <strong>Nome completo:</strong>{" "}
+                      {userDetails.profile.full_name}
+                    </div>
+                    <div>
+                      <strong>Telefone:</strong> {userDetails.profile.phone}
+                    </div>
+                    <div>
+                      <strong>Roles:</strong> {userDetails.roles?.join(", ")}
+                    </div>
+                    <div className="pt-2">
+                      <strong className="block mb-1">Permissões:</strong>
+                      <ul className="list-disc list-inside space-y-0.5 text-sm">
+                        {Object.entries(userDetails.permissions || {}).map(
+                          ([k, v]) => (
+                            <li key={k}>
+                              {k}:{" "}
+                              <span
+                                className={`font-semibold ${
+                                  v ? "text-primary" : "text-destructive"
+                                }`}
+                              >
+                                {v ? "Sim" : "Não"}
+                              </span>
+                            </li>
+                          )
+                        )}
+                      </ul>
+                    </div>
+                  </div>
+                )}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Fechar</AlertDialogCancel>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+    </Sidebar>
+  );
+}

app/page.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import { Stethoscope, Baby, Microscope } from "lucide-react";
+import { useAccessibility } from "./context/AccessibilityContext";
+
+export default function InicialPage() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const { contrast } = useAccessibility();
+
+  const heroClass = contrast === "high"
+    ? "px-6 md:px-10 lg:px-20 py-20 bg-background text-foreground border-y-2 border-primary"
+    : "px-6 md:px-10 lg:px-20 py-20 bg-gradient-to-r from-[#1E2A78] via-[#007BFF] to-[#00BFFF] text-white";
+
+  return (
+    <div className="min-h-screen flex flex-col bg-background font-sans scroll-smooth text-foreground">
+      {/* Barra superior */}
+      <div className="bg-primary text-primary-foreground text-sm py-2 px-4 md:px-6 flex justify-between items-center">
+        <span className="hidden sm:inline">Horário: 08h00 - 21h00</span>
+        <span className="hover:underline cursor-pointer transition">
+          Email: contato@mediconnect.com
+        </span>
+      </div>
+      {/* Header */}
+      <header className="bg-muted text-foreground shadow-md py-4 px-4 md:px-6 flex justify-between items-center relative sticky top-0 z-50 backdrop-blur-md">
+        <a href="#home" className="flex items-center space-x-2 cursor-pointer">
+          <img
+            src="/android-chrome-512x512.png"
+            alt="Logo MediConnect"
+            className="w-20 h-20 object-contain transition-transform hover:scale-105"
+          />
+          <h1 className="text-2xl font-extrabold text-foreground tracking-tight">
+            MedConnect
+          </h1>
+        </a>
+
+        {/* Menu Mobile */}
+        <div className="md:hidden flex items-center space-x-4">
+          <Link href="/login">
+            <Button
+              variant="outline"
+              className="rounded-full px-4 py-2 text-sm border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground transition"
+            >
+              Login
+            </Button>
+          </Link>
+          <button
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+            className="text-[#1E2A78] focus:outline-none"
+          >
+            <svg
+              className="w-6 h-6"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              {isMenuOpen ? (
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M6 18L18 6M6 6l12 12"
+                ></path>
+              ) : (
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M4 6h16M4 12h16M4 18h16"
+                ></path>
+              )}
+            </svg>
+          </button>
+        </div>
+
+        {/* Navegação */}
+        <nav
+          className={`${
+            isMenuOpen ? "block" : "hidden"
+          } absolute top-[76px] left-0 w-full bg-white shadow-md py-4 md:relative md:top-auto md:left-auto md:w-auto md:block md:bg-transparent md:shadow-none transition-all duration-300 z-10`}
+        >
+          <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8 text-foreground font-medium items-center">
+            <Link href="#home" className="hover:text-primary transition">
+              Home
+            </Link>
+            <a href="#about" className="hover:text-primary transition">
+              Sobre
+            </a>
+            <a href="#departments" className="hover:text-primary transition">
+              Departamentos
+            </a>
+            <a href="#doctors" className="hover:text-primary transition">
+              Médicos
+            </a>
+            <a href="#contact" className="hover:text-primary transition">
+              Contato
+            </a>
+          </div>
+        </nav>
+
+        {/* Login Desktop */}
+        <div className="hidden md:flex space-x-4">
+          <Link href="/login">
+            <Button
+              variant="outline"
+              className="rounded-full px-6 py-2 border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground transition cursor-pointer"
+            >
+              Login
+            </Button>
+          </Link>
+        </div>
+      </header>
+      {/* Hero Section */}
+      <section className={`flex flex-col md:flex-row items-center justify-between ${heroClass}`}>
+        <div className="max-w-lg mx-auto md:mx-0">
+          <h2 className="uppercase text-sm tracking-widest opacity-80">
+            Bem-vindo à Saúde Digital
+          </h2>
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mt-2 drop-shadow-lg">
+            Soluções Médicas <br /> & Cuidados com a Saúde
+          </h1>
+          <p className="mt-4 text-base leading-relaxed opacity-90 text-foreground">
+            Excelência em saúde há mais de 25 anos. Atendimento médico com
+            qualidade, segurança e carinho.
+          </p>
+          <div className="mt-8 flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center md:justify-start">
+            <Button className="px-8 py-3 text-base font-semibold bg-card text-card-foreground hover:bg-muted transition-all shadow-md">
+              Nossos Serviços
+            </Button>
+            <Button className="px-8 py-3 text-base font-semibold bg-card text-card-foreground hover:bg-muted transition-all shadow-md">
+              Saiba Mais
+            </Button>
+          </div>
+        </div>
+        <div className="mt-10 md:mt-0 flex justify-center">
+          <img
+            src="https://t4.ftcdn.net/jpg/03/20/52/31/360_F_320523164_tx7Rdd7I2XDTvvKfz2oRuRpKOPE5z0ni.jpg"
+            alt="Médico"
+            className="w-72 sm:w-96 lg:w-[28rem] h-auto object-cover rounded-2xl shadow-xl "
+          />
+        </div>
+      </section>
+      {/* Serviços */}
+      <section
+        id="departments"
+        className="py-20 px-6 md:px-10 lg:px-20 bg-secondary"
+      >
+        <h2 className="text-center text-3xl sm:text-4xl font-extrabold text-foreground">
+          Cuidados completos para a sua saúde
+        </h2>
+        <p className="text-center text-muted-foreground mt-3 text-base">
+          Serviços médicos que oferecemos
+        </p>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 mt-12 max-w-6xl mx-auto">
+          {/* Card */}
+          {[
+            {
+              title: "Clínica Geral",
+              desc: "Seu primeiro passo para o cuidado. Atendimento focado na prevenção e no diagnóstico inicial.",
+              Icon: Stethoscope,
+            },
+            {
+              title: "Pediatria",
+              desc: "Cuidado gentil e especializado para garantir a saúde e o desenvolvimento de crianças e adolescentes.",
+              Icon: Baby,
+            },
+            {
+              title: "Exames",
+              desc: "Resultados rápidos e precisos em exames laboratoriais e de imagem essenciais para seu diagnóstico.",
+              Icon: Microscope,
+            },
+          ].map(({ title, desc, Icon }, index) => (
+            <div
+              key={index}
+              className="p-8 bg-card rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 border border-border group"
+            >
+              <div className="flex items-center space-x-3">
+                <Icon className="text-primary w-6 h-6 group-hover:scale-110 transition-transform" />
+                <h3 className="text-xl font-semibold">{title}</h3>
+              </div>
+              <p className="text-muted-foreground mt-3 text-sm leading-relaxed">
+                {desc}
+              </p>
+              <Button className="mt-6 w-full bg-primary hover:opacity-90 text-primary-foreground transition">
+                Agendar
+              </Button>
+            </div>
+          ))}
+        </div>
+      </section>
+      {/* Footer */}
+      <footer className="bg-primary text-primary-foreground py-8 text-center text-sm border-t-2 border-primary-foreground/20">
+        <div className="space-y-2">
+          <p>© 2025 MediConnect — Todos os direitos reservados</p>
+          <div className="flex justify-center space-x-6 opacity-90">
+            <a href="#about" className="hover:opacity-70 transition">
+              Sobre
+            </a>
+            <a href="#departments" className="hover:opacity-70 transition">
+              Serviços
+            </a>
+            <a href="#contact" className="hover:opacity-70 transition">
+              Contato
+            </a>
+          </div>
+        </div>
+      </footer>
+         
+    </div>
+  );
+}

app/patient/appointments/page.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} 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,
+  MapPin,
+  Phone,
+  User,
+  X,
+  AlertCircle,
+} from "lucide-react";
+import { toast } from "sonner";
+import { appointmentsService } from "@/services/appointmentsApi.mjs";
+import { usersService } from "@/services/usersApi.mjs";
+import { doctorsService } from "@/services/doctorsApi.mjs";
+import Sidebar from "@/components/Sidebar";
+
+export default function PatientAppointmentsPage() {
+  const [appointments, setAppointments] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  
+  // Estados para cancelamento
+  const [cancelModal, setCancelModal] = useState(false);
+  const [selectedAppointment, setSelectedAppointment] = useState<any>(null);
+
+  const fetchData = async () => {
+    setIsLoading(true);
+    try {
+      // 1. Obter usuário logado
+      const user = await usersService.getMe();
+      if (!user || !user.user?.id) {
+        toast.error("Usuário não identificado.");
+        return;
+      }
+
+      // 2. Buscar médicos e agendamentos em paralelo
+      // Filtra apenas agendamentos deste paciente
+      const queryParams = `patient_id=eq.${"user.user.id"}&order=scheduled_at.desc`;
+      console.log("id do paciente:", user.profile.id);
+      const [appointmentList, doctorList] = await Promise.all([
+        appointmentsService.search_appointment(queryParams),
+        doctorsService.list(),
+      ]);
+      console.log("Agendamentos obtidos:", appointmentList);
+      console.log("Médicos obtidos:", doctorList);
+      // 3. Mapear médicos para acesso rápido
+      const doctorMap = new Map(doctorList.map((d: any) => [d.id, d]));
+
+      // 4. Enriquecer os agendamentos com dados do médico
+      const enrichedAppointments = appointmentList.map((apt: any) => ({
+        ...apt,
+        doctor: doctorMap.get(apt.doctor_id) || {
+          full_name: "Médico não encontrado",
+          specialty: "Clínico Geral",
+          location: "Consultório",
+          phone: "N/A"
+        },
+      }));
+      console.log("Agendamentos enriquecidos:", enrichedAppointments);
+      setAppointments(enrichedAppointments);
+    } catch (error) {
+      console.error("Erro ao buscar dados:", error);
+      toast.error("Não foi possível carregar suas consultas.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  // --- LÓGICA DE CANCELAMENTO ---
+  const handleCancelClick = (appointment: any) => {
+    setSelectedAppointment(appointment);
+    setCancelModal(true);
+  };
+
+  const confirmCancel = async () => {
+    if (!selectedAppointment) return;
+    try {
+      // Opção A: Deletar o registro (como no código da secretária)
+      await appointmentsService.delete(selectedAppointment.id);
+      
+      // Opção B: Se preferir apenas mudar o status, descomente abaixo e comente a linha acima:
+      // await appointmentsService.update(selectedAppointment.id, { status: 'cancelled' });
+
+      setAppointments((prev) =>
+        prev.filter((apt) => apt.id !== selectedAppointment.id)
+      );
+      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 (
+    <Sidebar>
+      <div className="space-y-6">
+        <div className="flex justify-between items-center">
+          <div>
+            <h1 className="text-3xl font-bold">Minhas Consultas</h1>
+            <p className="text-muted-foreground">
+              Acompanhe seu histórico e próximos agendamentos
+            </p>
+          </div>
+        </div>
+
+        <div className="grid gap-6">
+          {isLoading ? (
+            <p>Carregando consultas...</p>
+          ) : appointments.length > 0 ? (
+            appointments.map((appointment) => (
+              <Card key={appointment.id}>
+                <CardHeader>
+                  <div className="flex justify-between items-start">
+                    <div>
+                      <CardTitle className="text-lg">
+                        {appointment.doctor.full_name}
+                      </CardTitle>
+                      <CardDescription>
+                        {appointment.doctor.specialty}
+                      </CardDescription>
+                    </div>
+                    {getStatusBadge(appointment.status)}
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="grid md:grid-cols-2 gap-4">
+                    {/* Coluna 1: Data e Hora */}
+                    <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" />
+                        Dr(a). {appointment.doctor.full_name.split(' ')[0]}
+                      </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>
+
+                    {/* Coluna 2: Localização e Contato */}
+                    <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 || "Contato não disponível"}
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Ações */}
+                  {["requested", "confirmed"].includes(appointment.status) && (
+                    <div className="flex gap-2 mt-4 pt-4 border-t justify-end">
+                      <Button 
+                        variant="destructive" 
+                        size="sm" 
+                        className="bg-transparent text-destructive hover:bg-destructive/10 border border-destructive/20"
+                        onClick={() => handleCancelClick(appointment)}
+                      >
+                        <X className="mr-2 h-4 w-4" />
+                        Cancelar Consulta
+                      </Button>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            ))
+          ) : (
+            <div className="text-center py-10 border rounded-lg bg-muted/20">
+              <Calendar className="mx-auto h-10 w-10 text-muted-foreground mb-4" />
+              <p className="text-muted-foreground">Você ainda não possui consultas agendadas.</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Modal de Confirmação de Cancelamento */}
+      <Dialog open={cancelModal} onOpenChange={setCancelModal}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertCircle className="h-5 w-5 text-destructive" />
+              Cancelar Consulta
+            </DialogTitle>
+            <DialogDescription>
+              Tem certeza que deseja cancelar sua consulta com{" "}
+              <strong>{selectedAppointment?.doctor?.full_name}</strong> no dia{" "}
+              {selectedAppointment &&
+                new Date(selectedAppointment.scheduled_at).toLocaleDateString(
+                  "pt-BR", { timeZone: "UTC" }
+                )}
+              ? Esta ação não pode ser desfeita.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCancelModal(false)}>
+              Voltar
+            </Button>
+            <Button variant="destructive" onClick={confirmCancel}>
+              Confirmar Cancelamento
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Sidebar>
+  );
+}
+
+// Helper para Badges (Mantido consistente com o código da secretária)
+const getStatusBadge = (status: string) => {
+  switch (status) {
+    case "requested":
+      return (
+        <Badge className="bg-yellow-400/10 text-yellow-600 hover:bg-yellow-400/20 border-yellow-400/20">Solicitada</Badge>
+      );
+    case "confirmed":
+      return <Badge className="bg-primary/10 text-primary hover:bg-primary/20 border-primary/20">Confirmada</Badge>;
+    case "checked_in":
+      return (
+        <Badge className="bg-indigo-400/10 text-indigo-600 hover:bg-indigo-400/20 border-indigo-400/20">Check-in</Badge>
+      );
+    case "completed":
+      return <Badge className="bg-green-400/10 text-green-600 hover:bg-green-400/20 border-green-400/20">Realizada</Badge>;
+    case "cancelled":
+      return <Badge className="bg-destructive/10 text-destructive hover:bg-destructive/20 border-destructive/20">Cancelada</Badge>;
+    case "no_show":
+      return (
+        <Badge className="bg-muted text-foreground border-muted-foreground/20">Não Compareceu</Badge>
+      );
+    default:
+      return <Badge variant="secondary">{status}</Badge>;
+  }
+};

app/patient/dashboard/page.tsx

@@ -0,0 +1,135 @@
+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 Link from "next/link";
+import Sidebar from "@/components/Sidebar";
+
+export default function PatientDashboard() {
+  return (
+    <Sidebar>
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-3xl font-bold text-foreground">Dashboard</h1>
+          <p className="text-muted-foreground">
+            Bem-vindo ao seu portal de consultas médicas
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">
+                Próxima Consulta
+              </CardTitle>
+              <Calendar className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">15 Jan</div>
+              <p className="text-xs text-muted-foreground">Dr. Silva - 14:30</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">
+                Consultas Este Mês
+              </CardTitle>
+              <Clock className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">3</div>
+              <p className="text-xs text-muted-foreground">
+                2 realizadas, 1 agendada
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Perfil</CardTitle>
+              <User className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">100%</div>
+              <p className="text-xs text-muted-foreground">Dados completos</p>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Ações Rápidas</CardTitle>
+              <CardDescription>
+                Acesse rapidamente as principais funcionalidades
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <Link href="/patient/schedule">
+                <Button className="w-full justify-start">
+                  <User className="mr-2 h-4 w-4" />
+                  Agendar Nova Consulta
+                </Button>
+              </Link>
+              <Link href="/patient/appointments">
+                <Button
+                  variant="secondary"
+                  className="w-full justify-start"
+                >
+                  <Calendar className="mr-2 h-4 w-4" />
+                  Ver Minhas Consultas
+                </Button>
+              </Link>
+              <Link href="/patient/profile">
+                <Button
+                  variant="outline"
+                  className="w-full justify-start"
+                >
+                  <User className="mr-2 h-4 w-4" />
+                  Atualizar Dados
+                </Button>
+              </Link>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Próximas Consultas</CardTitle>
+              <CardDescription>Suas consultas agendadas</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
+                  <div>
+                    <p className="font-medium">Dr. Silva</p>
+                    <p className="text-sm text-muted-foreground">Cardiologia</p>
+                  </div>
+                  <div className="text-right">
+                    <p className="font-medium">15 Jan</p>
+                    <p className="text-sm text-muted-foreground">14:30</p>
+                  </div>
+                </div>
+                <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
+                  <div>
+                    <p className="font-medium">Dra. Santos</p>
+                    <p className="text-sm text-muted-foreground">Dermatologia</p>
+                  </div>
+                  <div className="text-right">
+                    <p className="font-medium">22 Jan</p>
+                    <p className="text-sm text-muted-foreground">10:00</p>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </Sidebar>
+  );
+}

app/patient/login/page.tsx

@@ -0,0 +1,46 @@
+// Caminho: app/patient/login/page.tsx
+
+import Link from "next/link";
+import { LoginForm } from "@/components/LoginForm";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+
+export default function PatientLoginPage() {
+    // NOTA: Esta página de login específica para pacientes se tornou obsoleta
+    // com a criação da nossa página de login central em /login.
+    // Mantemos este arquivo por enquanto para evitar quebrar outras partes do código,
+    // mas o ideal no futuro seria deletar esta página e redirecionar
+    // /patient/login para /login.
+
+    return (
+        <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 flex flex-col items-center justify-center p-4">
+            <div className="w-full max-w-md">
+                <div className="mb-8">
+                    <Link href="/" className="inline-flex items-center text-muted-foreground hover:text-primary transition-colors duration-200 font-medium">
+                        <ArrowLeft className="w-4 h-4 mr-2" />
+                        Voltar ao início
+                    </Link>
+                </div>
+
+                {/* --- ALTERAÇÃO PRINCIPAL AQUI --- */}
+                {/* Removemos as props desnecessárias (title, description, role, etc.) */}
+                {/* O novo LoginForm é autônomo e não precisa mais delas. */}
+                <LoginForm>
+                    {/* Este bloco é passado como 'children' para o LoginForm */}
+                    <div className="mt-6 text-center text-sm">
+                        <span className="text-muted-foreground">Não tem uma conta? </span>
+                        <Link href="/patient/register">
+                            <span className="font-semibold text-primary hover:underline cursor-pointer">
+                                Crie uma agora
+                            </span>
+                        </Link>
+                    </div>
+                </LoginForm>
+
+                <div className="mt-8 text-center">
+                    <p className="text-sm text-muted-foreground">Problemas para acessar? Entre em contato conosco</p>
+                </div>
+            </div>
+       </div>
+    );
+}

app/patient/profile/page.tsx

@@ -0,0 +1,436 @@
+// Caminho: app/patient/profile/page.tsx
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import Sidebar from "@/components/Sidebar";
+import { useAuthLayout } from "@/hooks/useAuthLayout";
+import { patientsService } from "@/services/patientsApi.mjs";
+import { usersService } from "@/services/usersApi.mjs"; // Adicionado import
+import { api } from "@/services/api.mjs";
+
+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 { User, Mail, Phone, Calendar, Upload } from "lucide-react";
+import { toast } from "@/hooks/use-toast";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+interface PatientProfileData {
+  name: string;
+  email: string;
+  phone: string;
+  cpf: string;
+  birthDate: string;
+  cep: string;
+  street: string;
+  number: string;
+  city: string;
+  avatarFullUrl?: string;
+}
+
+export default function PatientProfile() {
+  const { user, isLoading: isAuthLoading } = useAuthLayout({
+    requiredRole: ["paciente", "admin", "medico", "gestor", "secretaria"],
+  });
+
+  const [patientData, setPatientData] = useState<PatientProfileData | null>(null);
+  const [isEditing, setIsEditing] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const getInitials = (name: string) => {
+    if (!name) return "U";
+    return name
+      .split(" ")
+      .map((n) => n[0])
+      .slice(0, 2)
+      .join("")
+      .toUpperCase();
+  };
+
+  // Função auxiliar para construir URL do avatar
+  const buildAvatarUrl = (path: string | null | undefined) => {
+    if (!path) return undefined;
+    const baseUrl = "https://yuanqfswhberkoevtmfr.supabase.co";
+    const cleanPath = path.startsWith('/') ? path.slice(1) : path;
+    const separator = cleanPath.includes('?') ? '&' : '?';
+    return `${baseUrl}/storage/v1/object/avatars/${cleanPath}${separator}t=${new Date().getTime()}`;
+  };
+
+  useEffect(() => {
+    if (user?.id) {
+      const loadData = async () => {
+        try {
+          // 1. Busca dados médicos (Tabela Patients)
+          const patientDetails = await patientsService.getById(user.id);
+          
+          // 2. Busca dados de sistema frescos (Tabela Profiles via getMe)
+          // Isso garante que pegamos o avatar real do banco, não do cache local
+          const userSystemData = await usersService.getMe();
+          
+          const freshAvatarPath = userSystemData?.profile?.avatar_url;
+          const freshAvatarUrl = buildAvatarUrl(freshAvatarPath);
+
+          setPatientData({
+            name: patientDetails.full_name || user.name,
+            email: user.email,
+            phone: patientDetails.phone_mobile || "",
+            cpf: patientDetails.cpf || "",
+            birthDate: patientDetails.birth_date || "",
+            cep: patientDetails.cep || "",
+            street: patientDetails.street || "",
+            number: patientDetails.number || "",
+            city: patientDetails.city || "",
+            avatarFullUrl: freshAvatarUrl, // Usa a URL fresca do banco
+          });
+        } catch (error) {
+          console.error("Erro ao buscar detalhes:", error);
+          toast({
+            title: "Erro",
+            description: "Não foi possível carregar seus dados completos.",
+            variant: "destructive",
+          });
+        }
+      };
+      loadData();
+    }
+  }, [user?.id, user?.email, user?.name]); // Removi user.avatarFullUrl para não depender do cache
+
+  const handleInputChange = (
+    field: keyof PatientProfileData,
+    value: string
+  ) => {
+    setPatientData((prev) => (prev ? { ...prev, [field]: value } : null));
+  };
+
+  const updateLocalSession = (updates: { full_name?: string; avatar_url?: string }) => {
+    try {
+      const storedUserString = localStorage.getItem("user_info");
+      if (storedUserString) {
+        const storedUser = JSON.parse(storedUserString);
+        
+        if (!storedUser.user_metadata) storedUser.user_metadata = {};
+        if (updates.full_name) storedUser.user_metadata.full_name = updates.full_name;
+        if (updates.avatar_url) storedUser.user_metadata.avatar_url = updates.avatar_url;
+        
+        if (!storedUser.profile) storedUser.profile = {};
+        if (updates.full_name) storedUser.profile.full_name = updates.full_name;
+        if (updates.avatar_url) storedUser.profile.avatar_url = updates.avatar_url;
+
+        localStorage.setItem("user_info", JSON.stringify(storedUser));
+      }
+    } catch (e) {
+      console.error("Erro ao atualizar sessão local:", e);
+    }
+  };
+
+  const handleSave = async () => {
+    if (!patientData || !user) return;
+    setIsSaving(true);
+    try {
+      const patientPayload = {
+        full_name: patientData.name,
+        cpf: patientData.cpf,
+        birth_date: patientData.birthDate,
+        phone_mobile: patientData.phone,
+        cep: patientData.cep,
+        street: patientData.street,
+        number: patientData.number,
+        city: patientData.city,
+      };
+      
+      await patientsService.update(user.id, patientPayload);
+      await api.patch(`/rest/v1/profiles?id=eq.${user.id}`, {
+        full_name: patientData.name,
+      });
+      
+      updateLocalSession({ full_name: patientData.name });
+
+      toast({
+        title: "Sucesso!",
+        description: "Seus dados foram atualizados. A página será recarregada.",
+      });
+      
+      setIsEditing(false);
+      setTimeout(() => window.location.reload(), 1000);
+
+    } catch (error) {
+      console.error("Erro ao salvar dados:", error);
+      toast({
+        title: "Erro",
+        description: "Não foi possível salvar suas alterações.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleAvatarClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleAvatarUpload = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const file = event.target.files?.[0];
+    if (!file || !user) return;
+
+    const fileExt = file.name.split(".").pop();
+    const filePath = `${user.id}/avatar.${fileExt}`;
+
+    try {
+      await api.storage.upload("avatars", filePath, file);
+      await api.patch(`/rest/v1/profiles?id=eq.${user.id}`, {
+        avatar_url: filePath,
+      });
+
+      const newFullUrl = buildAvatarUrl(filePath);
+      
+      setPatientData((prev) =>
+        prev ? { ...prev, avatarFullUrl: newFullUrl } : null
+      );
+
+      updateLocalSession({ avatar_url: filePath });
+
+      toast({
+        title: "Sucesso!",
+        description: "Sua foto de perfil foi atualizada.",
+      });
+
+      setTimeout(() => window.location.reload(), 1000);
+
+    } catch (error) {
+      console.error("Erro no upload do avatar:", error);
+      toast({
+        title: "Erro de Upload",
+        description: "Não foi possível enviar sua foto.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  if (isAuthLoading || !patientData) {
+    return (
+      <Sidebar>
+        <div className="flex items-center justify-center h-full">
+          <p className="text-muted-foreground">Carregando seus dados...</p>
+        </div>
+      </Sidebar>
+    );
+  }
+
+  return (
+    <Sidebar>
+      <div className="space-y-6">
+        <div className="flex justify-between items-center">
+          <div>
+            <h1 className="text-3xl font-bold text-foreground">Meus Dados</h1>
+            <p className="text-muted-foreground">Gerencie suas informações pessoais</p>
+          </div>
+          <Button
+            onClick={() => (isEditing ? handleSave() : setIsEditing(true))}
+            disabled={isSaving}
+            className="bg-blue-600 hover:bg-blue-700 text-white"
+          >
+            {isEditing
+              ? isSaving
+                ? "Salvando..."
+                : "Salvar Alterações"
+              : "Editar Dados"}
+          </Button>
+        </div>
+
+        <div className="grid lg:grid-cols-3 gap-6">
+          <div className="lg:col-span-2 space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center">
+                  <User className="mr-2 h-5 w-5" />
+                  Informações Pessoais
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="grid md:grid-cols-2 gap-4">
+                  <div>
+                    <Label htmlFor="name">Nome Completo</Label>
+                    <Input
+                      id="name"
+                      value={patientData.name}
+                      onChange={(e) =>
+                        handleInputChange("name", e.target.value)
+                      }
+                      disabled={!isEditing}
+                    />
+                  </div>
+                  <div>
+                    <Label htmlFor="cpf">CPF</Label>
+                    <Input
+                      id="cpf"
+                      value={patientData.cpf}
+                      onChange={(e) => handleInputChange("cpf", e.target.value)}
+                      disabled={!isEditing}
+                    />
+                  </div>
+                </div>
+                <div>
+                  <Label htmlFor="birthDate">Data de Nascimento</Label>
+                  <Input
+                    id="birthDate"
+                    type="date"
+                    value={patientData.birthDate}
+                    onChange={(e) =>
+                      handleInputChange("birthDate", e.target.value)
+                    }
+                    disabled={!isEditing}
+                  />
+                </div>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center">
+                  <Mail className="mr-2 h-5 w-5" />
+                  Contato e Endereço
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="grid md:grid-cols-2 gap-4">
+                  <div>
+                    <Label htmlFor="email">Email</Label>
+                    <Input
+                      id="email"
+                      type="email"
+                      value={patientData.email}
+                      disabled
+                    />
+                  </div>
+                  <div>
+                    <Label htmlFor="phone">Telefone</Label>
+                    <Input
+                      id="phone"
+                      value={patientData.phone}
+                      onChange={(e) =>
+                        handleInputChange("phone", e.target.value)
+                      }
+                      disabled={!isEditing}
+                    />
+                  </div>
+                </div>
+                <div className="grid md:grid-cols-3 gap-4">
+                  <div>
+                    <Label htmlFor="cep">CEP</Label>
+                    <Input
+                      id="cep"
+                      value={patientData.cep}
+                      onChange={(e) => handleInputChange("cep", e.target.value)}
+                      disabled={!isEditing}
+                    />
+                  </div>
+                  <div className="md:col-span-2">
+                    <Label htmlFor="street">Rua / Logradouro</Label>
+                    <Input
+                      id="street"
+                      value={patientData.street}
+                      onChange={(e) =>
+                        handleInputChange("street", e.target.value)
+                      }
+                      disabled={!isEditing}
+                    />
+                  </div>
+                </div>
+                <div className="grid md:grid-cols-2 gap-4">
+                  <div>
+                    <Label htmlFor="number">Número</Label>
+                    <Input
+                      id="number"
+                      value={patientData.number}
+                      onChange={(e) =>
+                        handleInputChange("number", e.target.value)
+                      }
+                      disabled={!isEditing}
+                    />
+                  </div>
+                  <div>
+                    <Label htmlFor="city">Cidade</Label>
+                    <Input
+                      id="city"
+                      value={patientData.city}
+                      onChange={(e) =>
+                        handleInputChange("city", e.target.value)
+                      }
+                      disabled={!isEditing}
+                    />
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          <div className="space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>Resumo do Perfil</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="flex items-center space-x-3">
+                  <div className="relative group">
+                    <Avatar
+                      className="w-16 h-16 cursor-pointer border-2 border-transparent group-hover:border-blue-500 transition-all"
+                      onClick={handleAvatarClick}
+                    >
+                      <AvatarImage src={patientData.avatarFullUrl} className="object-cover" />
+                      <AvatarFallback className="text-2xl bg-gray-200 text-gray-700 font-bold">
+                        {getInitials(patientData.name)}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div
+                      className="absolute bottom-0 right-0 bg-blue-600 text-white rounded-full p-1.5 cursor-pointer hover:bg-blue-700 shadow-md transition-colors"
+                      onClick={handleAvatarClick}
+                      title="Alterar foto"
+                    >
+                      <Upload className="w-3 h-3" />
+                    </div>
+                    <input
+                      type="file"
+                      ref={fileInputRef}
+                      onChange={handleAvatarUpload}
+                      className="hidden"
+                      accept="image/png, image/jpeg, image/jpg"
+                    />
+                  </div>
+                  <div>
+                    <p className="font-medium text-lg">{patientData.name}</p>
+                    <p className="text-sm text-gray-500">Paciente</p>
+                  </div>
+                </div>
+                <div className="space-y-3 pt-4 border-t">
+                  <div className="flex items-center text-sm">
+                    <Mail className="mr-2 h-4 w-4 text-muted-foreground" />
+                    <span className="truncate">{patientData.email}</span>
+                  </div>
+                  <div className="flex items-center text-sm">
+                    <Phone className="mr-2 h-4 w-4 text-muted-foreground" />
+                    <span>{patientData.phone || "Não informado"}</span>
+                  </div>
+                  <div className="flex items-center text-sm">
+                    <Calendar className="mr-2 h-4 w-4 text-muted-foreground" />
+                    <span>
+                      {patientData.birthDate
+                        ? new Date(patientData.birthDate).toLocaleDateString(
+                            "pt-BR",
+                            { timeZone: "UTC" }
+                          )
+                        : "Não informado"}
+                    </span>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </Sidebar>
+  );
+}

app/patient/register/page.tsx

@@ -0,0 +1,186 @@
+"use client"
+
+import type React from "react"
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { ArrowLeft, Loader2 } from "lucide-react"
+import { useToast } from "@/hooks/use-toast"
+import { usersService } from "@/services/usersApi.mjs" // Mantém a importação
+import { isValidCPF } from "@/lib/utils"
+
+export default function PatientRegister() {
+  // REMOVIDO: Estados para 'showPassword' e 'showConfirmPassword'
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    phone: "",
+    cpf: "",
+    birthDate: "",
+    // REMOVIDO: Campos 'password' e 'confirmPassword'
+  })
+  const [isLoading, setIsLoading] = useState(false)
+  const router = useRouter()
+  const { toast } = useToast()
+
+  const handleInputChange = (field: string, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }))
+  }
+
+  const handleRegister = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsLoading(true)
+
+    // --- VALIDAÇÃO DE CPF ---
+    if (!isValidCPF(formData.cpf)) {
+      toast({
+        title: "CPF Inválido",
+        description: "O CPF informado não é válido. Verifique os dígitos.",
+        variant: "destructive",
+      })
+      setIsLoading(false)
+      return
+    }
+
+    // --- LÓGICA DE REGISTRO COM ENDPOINT PÚBLICO ---
+    try {
+      // ALTERADO: Payload ajustado para o endpoint 'register-patient'
+      const payload = {
+        email: formData.email.trim().toLowerCase(),
+        full_name: formData.name,
+        phone_mobile: formData.phone, // O endpoint espera 'phone_mobile'
+        cpf: formData.cpf.replace(/\D/g, ''),
+        birth_date: formData.birthDate,
+      }
+
+      // ALTERADO: Chamada para a nova função de serviço
+      await usersService.registerPatient(payload)
+
+      // ALTERADO: Mensagem de sucesso para refletir o fluxo de confirmação por e-mail
+      toast({
+        title: "Cadastro enviado com sucesso!",
+        description: "Enviamos um link de confirmação para o seu e-mail. Por favor, verifique sua caixa de entrada para ativar sua conta.",
+      })
+
+      // Redireciona para a página de login
+      router.push("/login")
+
+    } catch (error: any) {
+      console.error("Erro no registro:", error)
+      toast({
+        title: "Erro ao Criar Conta",
+        description: error.message || "Não foi possível concluir o cadastro. Verifique seus dados e tente novamente.",
+        variant: "destructive",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-background py-8 px-4">
+      <div className="max-w-2xl mx-auto">
+        <div className="mb-6">
+          <Link href="/" className="inline-flex items-center text-primary hover:text-primary/90">
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            Voltar ao início
+          </Link>
+        </div>
+        <Card>
+          <CardHeader className="text-center">
+            <CardTitle className="text-2xl text-foreground">Crie sua Conta de Paciente</CardTitle>
+            <CardDescription className="text-muted-foreground">Preencha seus dados para acessar o portal MedConnect</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleRegister} className="space-y-4">
+              <div className="grid md:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="name">Nome Completo *</Label>
+                  <Input
+                    id="name"
+                    value={formData.name}
+                    onChange={(e) => handleInputChange("name", e.target.value)}
+                    required
+                    disabled={isLoading}
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="cpf">CPF *</Label>
+                  <Input
+                    id="cpf"
+                    value={formData.cpf}
+                    onChange={(e) => handleInputChange("cpf", e.target.value)}
+                    placeholder="000.000.000-00"
+                    required
+                    disabled={isLoading}
+                  />
+                </div>
+              </div>
+
+              <div className="grid md:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="email">Email *</Label>
+                  <Input
+                    id="email"
+                    type="email"
+                    value={formData.email}
+                    onChange={(e) => handleInputChange("email", e.target.value)}
+                    required
+                    disabled={isLoading}
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="phone">Telefone *</Label>
+                  <Input
+                    id="phone"
+                    value={formData.phone}
+                    onChange={(e) => handleInputChange("phone", e.target.value)}
+                    placeholder="(11) 99999-9999"
+                    required
+                    disabled={isLoading}
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="birthDate">Data de Nascimento *</Label>
+                <Input
+                  id="birthDate"
+                  type="date"
+                  value={formData.birthDate}
+                  onChange={(e) => handleInputChange("birthDate", e.target.value)}
+                  required
+                  disabled={isLoading}
+                />
+              </div>
+
+              {/* REMOVIDO: Seção de senha e confirmação de senha */}
+
+              <Button type="submit" className="w-full" disabled={isLoading}>
+                {isLoading ? <><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Criando conta...</> : "Criar Conta"}
+              </Button>
+            </form>
+
+            <div className="mt-6 text-center">
+              <p className="text-sm">
+                <span className="text-muted-foreground">Já tem uma conta?</span>{" "}
+                <Link href="/login" className="text-primary hover:underline font-medium">
+                  Faça login aqui
+                </Link>
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

app/patient/reports/page.tsx

@@ -0,0 +1,296 @@
+"use client"
+
+import { useState, useEffect, useMemo } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { toast } from "@/hooks/use-toast"
+import { FileText, Download, Eye, Calendar, User, X, Loader2 } from "lucide-react"
+import Sidebar from "@/components/Sidebar"
+import { useAuthLayout } from "@/hooks/useAuthLayout"
+import { reportsApi } from "@/services/reportsApi.mjs"
+
+interface Report {
+    id: string;
+    order_number: string;
+    patient_id: string;
+    status: string;
+    exam: string;
+    requested_by: string;
+    cid_code: string;
+    diagnosis: string;
+    conclusion: string;
+    content_html: string;
+    content_json: any;
+    hide_date: boolean;
+    hide_signature: boolean;
+    due_at: string;
+    created_by: string;
+    updated_by: string;
+    created_at: string;
+    updated_at: string;
+}
+
+export default function ReportsPage() {
+  const [reports, setReports] = useState<Report[]>([])
+  const [selectedReport, setSelectedReport] = useState<Report | null>(null)
+  const [isViewModalOpen, setIsViewModalOpen] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+    const { user, isLoading: isAuthLoading } = useAuthLayout({
+    requiredRole: ["paciente", "admin", "medico", "gestor", "secretaria"],
+  });
+
+
+  useEffect(() => {
+    if (user) {
+      const fetchReports = async () => {
+        try {
+          setIsLoading(true);
+          const fetchedReports = await reportsApi.getReports(user.id);
+          setReports(fetchedReports);
+        } catch (error) {
+          console.error("Erro ao buscar laudos:", error)
+          toast({
+            title: "Erro ao buscar laudos",
+            description: "Não foi possível carregar os laudos. Tente novamente.",
+            variant: "destructive",
+          })
+        } finally {
+          setIsLoading(false);
+        }
+      }
+      fetchReports()
+    }
+  }, [user?.id])
+
+  const handleViewReport = (reportId: string) => {
+    const report = reports.find((r) => r.id === reportId)
+    if (report) {
+      setSelectedReport(report)
+      setIsViewModalOpen(true)
+    }
+  }
+
+  const handleDownloadReport = async (reportId: string) => {
+    const report = reports.find((r) => r.id === reportId)
+    if (!report) return
+
+    try {
+      toast({
+        title: "Preparando download...",
+        description: "Gerando PDF do laudo médico",
+      })
+
+      const htmlContent = report.content_html;
+
+      const blob = new Blob([htmlContent], { type: "text/html" })
+      const url = URL.createObjectURL(blob)
+
+      const link = document.createElement("a")
+      link.href = url
+      link.download = `laudo-${report.order_number}.html`
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+
+      URL.revokeObjectURL(url)
+
+      toast({
+        title: "Download concluído!",
+        description: "O laudo foi baixado com sucesso",
+      })
+    } catch (error) {
+      console.error("Erro ao baixar laudo:", error)
+      toast({
+        title: "Erro no download",
+        description: "Não foi possível baixar o laudo. Tente novamente.",
+        variant: "destructive",
+      })
+    }
+  }
+
+  const handleCloseModal = () => {
+    setIsViewModalOpen(false)
+    setSelectedReport(null)
+  }
+
+  const availableReports = reports.filter((report) => report.status.toLowerCase() === "draft")
+  const pendingReports = reports.filter((report) => report.status.toLowerCase() !== "draft")
+
+  if (isLoading || isAuthLoading) {
+    return (
+        <Sidebar>
+            <div className="flex justify-center items-center h-full">
+                <Loader2 className="h-8 w-8 animate-spin" />
+            </div>
+        </Sidebar>
+    )
+  }
+
+  return (
+    <Sidebar>
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-3xl font-bold text-foreground">Meus Laudos</h1>
+          <p className="text-muted-foreground mt-2">Visualize e baixe seus laudos médicos e resultados de exames</p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Total de Laudos</CardTitle>
+              <FileText className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{reports.length}</div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Disponíveis</CardTitle>
+              <Eye className="h-4 w-4 text-green-600" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold text-green-600">{availableReports.length}</div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Pendentes</CardTitle>
+              <Calendar className="h-4 w-4 text-yellow-600" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold text-yellow-600">{pendingReports.length}</div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {availableReports.length > 0 && (
+          <div>
+            <h2 className="text-xl font-semibold text-foreground mb-4">Laudos Disponíveis</h2>
+            <div className="grid gap-4">
+              {availableReports.map((report) => (
+                <Card key={report.id} className="hover:shadow-md transition-shadow">
+                  <CardHeader>
+                    <div className="flex items-start justify-between">
+                      <div className="space-y-1">
+                        <CardTitle className="text-lg">{report.exam}</CardTitle>
+                        <CardDescription className="flex items-center gap-4">
+                          <span className="flex items-center gap-1">
+                            <User className="h-4 w-4" />
+                            {report.requested_by}
+                          </span>
+                          <span className="flex items-center gap-1">
+                            <Calendar className="h-4 w-4" />
+                            {new Date(report.created_at).toLocaleDateString("pt-BR")}
+                          </span>
+                        </CardDescription>
+                      </div>
+                      <Badge variant="secondary" className="bg-green-100 text-green-800">
+                        Finalizado
+                      </Badge>
+                    </div>
+                  </CardHeader>
+                  <CardContent>
+                    <p className="text-muted-foreground mb-4">{report.diagnosis}</p>
+                    <div className="flex gap-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleViewReport(report.id)}
+                        className="flex items-center gap-2"
+                      >
+                        <Eye className="h-4 w-4" />
+                        Visualizar
+                      </Button>
+                      <Button
+                        variant="default"
+                        size="sm"
+                        onClick={() => handleDownloadReport(report.id)}
+                        className="flex items-center gap-2"
+                      >
+                        <Download className="h-4 w-4" />
+                        Baixar
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {pendingReports.length > 0 && (
+          <div>
+            <h2 className="text-xl font-semibold text-foreground mb-4">Laudos Pendentes</h2>
+            <div className="grid gap-4">
+              {pendingReports.map((report) => (
+                <Card key={report.id} className="opacity-75">
+                  <CardHeader>
+                    <div className="flex items-start justify-between">
+                      <div className="space-y-1">
+                        <CardTitle className="text-lg">{report.exam}</CardTitle>
+                        <CardDescription className="flex items-center gap-4">
+                          <span className="flex items-center gap-1">
+                            <User className="h-4 w-4" />
+                            {report.requested_by}
+                          </span>
+                          <span className="flex items-center gap-1">
+                            <Calendar className="h-4 w-4" />
+                            {new Date(report.created_at).toLocaleDateString("pt-BR")}
+                          </span>
+                        </CardDescription>
+                      </div>
+                      <Badge variant="secondary" className="bg-yellow-100 text-yellow-800">
+                        {report.status}
+                      </Badge>
+                    </div>
+                  </CardHeader>
+                  <CardContent>
+                     <p className="text-muted-foreground mb-4">{report.diagnosis}</p>
+                    <p className="text-sm text-yellow-600 dark:text-yellow-500 font-medium">
+                      Laudo em processamento. Você será notificado quando estiver disponível.
+                    </p>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {reports.length === 0 && !isLoading && (
+          <Card className="text-center py-12">
+            <CardContent>
+              <FileText className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+              <h3 className="text-lg font-medium text-foreground mb-2">Nenhum laudo encontrado</h3>
+              <p className="text-muted-foreground">Seus laudos médicos aparecerão aqui após a realização de exames.</p>
+            </CardContent>
+          </Card>
+        )}
+
+        <Dialog open={isViewModalOpen} onOpenChange={setIsViewModalOpen}>
+          <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+            <DialogHeader>
+              <div className="flex items-center justify-between">
+                <div>
+                  <DialogTitle className="text-xl font-bold">{selectedReport?.exam}</DialogTitle>
+                  <DialogDescription className="mt-1">
+                    {selectedReport?.order_number}
+                  </DialogDescription>
+                </div>
+                <Button variant="ghost" size="sm" onClick={handleCloseModal} className="h-8 w-8 p-0">
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            </DialogHeader>
+
+            {selectedReport && (
+              <div className="space-y-6 mt-4" dangerouslySetInnerHTML={{ __html: selectedReport.content_html }} />
+            )}
+          </DialogContent>
+        </Dialog>
+      </div>
+    </Sidebar>
+  )
+}

app/patient/schedule/page.tsx

@@ -0,0 +1,12 @@
+// app/patient/appointments/page.tsx
+import Sidebar from "@/components/Sidebar";
+import ScheduleForm from "@/components/schedule/schedule-form";
+
+
+export default function PatientAppointments() {
+  return (
+    <Sidebar>
+      <ScheduleForm />
+    </Sidebar>
+  );
+}

app/providers.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { AccessibilityProvider } from "./context/AccessibilityContext";
+import { AppointmentsProvider } from "./context/AppointmentsContext";
+import { AccessibilityModal } from "@/components/accessibility-modal";
+import { ThemeInitializer } from "@/components/theme-initializer";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <ThemeInitializer />
+      <AccessibilityProvider>
+        <AppointmentsProvider>{children}</AppointmentsProvider>
+        <AccessibilityModal />
+      </AccessibilityProvider>
+    </>
+  );
+}

app/secretary/appointments/page.tsx

@@ -0,0 +1,468 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+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 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";
+import { patientsService } from "@/services/patientsApi.mjs";
+import { doctorsService } from "@/services/doctorsApi.mjs";
+import Sidebar from "@/components/Sidebar";
+
+export default function SecretaryAppointments() {
+  const [appointments, setAppointments] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [selectedAppointment, setSelectedAppointment] = useState<any>(null);
+
+  // Estados dos Modais
+  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: "",
+    time: "",
+    status: "",
+  });
+
+  // Estado de data selecionada
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
+
+  const fetchData = async () => {
+    setIsLoading(true);
+    try {
+      const queryParams = "order=scheduled_at.asc";
+
+      const [appointmentList, patientList, doctorList] = await Promise.all([
+        appointmentsService.search_appointment(queryParams),
+        patientsService.list(),
+        doctorsService.list(),
+      ]);
+
+      const patientMap = new Map(patientList.map((p: any) => [p.id, p]));
+      const doctorMap = new Map(doctorList.map((d: any) => [d.id, d]));
+
+      const enrichedAppointments = appointmentList.map((apt: any) => ({
+        ...apt,
+        patient: patientMap.get(apt.patient_id) || {
+          full_name: "Paciente não encontrado",
+        },
+        doctor: doctorMap.get(apt.doctor_id) || {
+          full_name: "Médico não encontrado",
+          specialty: "N/A",
+        },
+      }));
+
+      setAppointments(enrichedAppointments);
+    } catch (error) {
+      console.error("Falha ao buscar agendamentos:", error);
+      toast.error("Não foi possível carregar a lista de agendamentos.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  // --- 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);
+
+    setEditFormData({
+      date: appointmentDate.toISOString().split("T")[0],
+      time: appointmentDate.toLocaleTimeString("pt-BR", {
+        hour: "2-digit",
+        minute: "2-digit",
+        timeZone: "UTC",
+      }),
+      status: appointment.status,
+    });
+    setEditModal(true);
+  };
+
+  const confirmEdit = async () => {
+    if (
+      !selectedAppointment ||
+      !editFormData.date ||
+      !editFormData.time ||
+      !editFormData.status
+    ) {
+      toast.error("Todos os campos são obrigatórios para a edição.");
+      return;
+    }
+
+    try {
+      const newScheduledAt = new Date(
+        `${editFormData.date}T${editFormData.time}:00Z`
+      ).toISOString();
+      const updatePayload = {
+        scheduled_at: newScheduledAt,
+        status: editFormData.status,
+      };
+
+      await appointmentsService.update(selectedAppointment.id, updatePayload);
+      await fetchData();
+      setEditModal(false);
+      toast.success("Consulta atualizada com sucesso!");
+    } catch (error) {
+      console.error("Erro ao atualizar consulta:", error);
+      toast.error("Não foi possível atualizar a consulta.");
+    }
+  };
+
+  const handleDelete = (appointment: any) => {
+    setSelectedAppointment(appointment);
+    setDeleteModal(true);
+  };
+
+  const confirmDelete = async () => {
+    if (!selectedAppointment) return;
+    try {
+      await appointmentsService.delete(selectedAppointment.id);
+      setAppointments((prev) =>
+        prev.filter((apt) => apt.id !== selectedAppointment.id)
+      );
+      setDeleteModal(false);
+      toast.success("Consulta deletada com sucesso!");
+    } catch (error) {
+      console.error("Erro ao deletar consulta:", error);
+      toast.error("Não foi possível deletar a consulta.");
+    }
+  };
+
+  return (
+    <Sidebar>
+      <div className="space-y-6">
+        {/* 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 text-foreground">
+              Agenda Médica
+            </h1>
+            <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">
+              <CalendarIcon className="mr-2 h-4 w-4" />
+              Agendar Nova Consulta
+            </Button>
+          </Link>
+        </div>
+
+        {/* Barra de Filtros e Ações */}
+        <div className="flex flex-col md:flex-row justify-between items-center gap-4">
+          <h2 className="text-xl font-semibold capitalize whitespace-nowrap">
+            {selectedDate
+              ? `Agenda de ${format(selectedDate, "dd/MM/yyyy")}`
+              : "Todas as Consultas"}
+          </h2>
+          
+          <div className="flex flex-col md:flex-row items-center gap-3 w-full md:w-auto">
+            {/* BARRA DE PESQUISA ADICIONADA AQUI */}
+            <div className="relative w-full md:w-72">
+              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                type="search"
+                placeholder="Buscar paciente ou médico..."
+                className="pl-9 w-full"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+
+            <div className="flex gap-2 w-full md:w-auto">
+              <Button
+                onClick={() => {
+                    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>
+
+        {/* Grid com calendário + lista */}
+        <div className="grid lg:grid-cols-3 gap-6">
+          {/* Coluna esquerda: calendário */}
+          <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) {
+    case "requested":
+      return (
+        <Badge className="bg-yellow-400/10 text-yellow-400">Solicitada</Badge>
+      );
+    case "confirmed":
+      return <Badge className="bg-primary/10 text-primary">Confirmada</Badge>;
+    case "checked_in":
+      return (
+        <Badge className="bg-indigo-400/10 text-indigo-400">Check-in</Badge>
+      );
+    case "completed":
+      return <Badge className="bg-green-400/10 text-green-400">Realizada</Badge>;
+    case "cancelled":
+      return (
+        <Badge className="bg-destructive/10 text-destructive">Cancelada</Badge>
+      );
+    case "no_show":
+      return (
+        <Badge className="bg-muted text-foreground">Não Compareceu</Badge>
+      );
+    default:
+      return <Badge variant="secondary">{status}</Badge>;
+  }
+};

app/secretary/dashboard/page.tsx

@@ -0,0 +1,305 @@
+"use client";
+
+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 Link from "next/link";
+import React, { useState, useEffect } from "react";
+import { patientsService } from "@/services/patientsApi.mjs";
+import { appointmentsService } from "@/services/appointmentsApi.mjs";
+import Sidebar from "@/components/Sidebar";
+
+export default function SecretaryDashboard() {
+  // Estados
+  const [patients, setPatients] = useState<any[]>([]);
+  const [loadingPatients, setLoadingPatients] = useState(true);
+
+  const [firstConfirmed, setFirstConfirmed] = useState<any>(null);
+  const [nextAgendada, setNextAgendada] = useState<any>(null);
+  const [loadingAppointments, setLoadingAppointments] = useState(true);
+
+  // 🔹 Buscar pacientes
+  useEffect(() => {
+    async function fetchPatients() {
+      try {
+        const data = await patientsService.list();
+        if (Array.isArray(data)) {
+          setPatients(data.slice(0, 3));
+        }
+      } catch (error) {
+        console.error("Erro ao carregar pacientes:", error);
+      } finally {
+        setLoadingPatients(false);
+      }
+    }
+    fetchPatients();
+  }, []);
+
+  // 🔹 Buscar consultas (confirmadas + 1ª do mês)
+  useEffect(() => {
+    async function fetchAppointments() {
+      try {
+        const hoje = new Date();
+        const inicioMes = new Date(hoje.getFullYear(), hoje.getMonth(), 1);
+        const fimMes = new Date(hoje.getFullYear(), hoje.getMonth() + 1, 0);
+
+        // Mesmo parâmetro de ordenação da página /secretary/appointments
+        const queryParams = "order=scheduled_at.desc";
+        const data = await appointmentsService.search_appointment(queryParams);
+
+        if (!Array.isArray(data) || data.length === 0) {
+          setFirstConfirmed(null);
+          setNextAgendada(null);
+          return;
+        }
+
+        // 🩵 1️⃣ Consultas confirmadas (para o card “Próxima Consulta Confirmada”)
+        const confirmadas = data.filter((apt: any) => {
+          const dataConsulta = new Date(apt.scheduled_at || apt.date);
+          return apt.status === "confirmed" && dataConsulta >= hoje;
+        });
+
+        confirmadas.sort(
+          (a: any, b: any) =>
+            new Date(a.scheduled_at || a.date).getTime() -
+            new Date(b.scheduled_at || b.date).getTime()
+        );
+
+        setFirstConfirmed(confirmadas[0] || null);
+
+        // 💙 2️⃣ Consultas deste mês — pegar sempre a 1ª (mais próxima)
+        const consultasMes = data.filter((apt: any) => {
+          const dataConsulta = new Date(apt.scheduled_at);
+          return dataConsulta >= inicioMes && dataConsulta <= fimMes;
+        });
+
+        if (consultasMes.length > 0) {
+          consultasMes.sort(
+            (a: any, b: any) =>
+              new Date(a.scheduled_at).getTime() -
+              new Date(b.scheduled_at).getTime()
+          );
+          setNextAgendada(consultasMes[0]);
+        } else {
+          setNextAgendada(null);
+        }
+      } catch (error) {
+        console.error("Erro ao carregar consultas:", error);
+      } finally {
+        setLoadingAppointments(false);
+      }
+    }
+
+    fetchAppointments();
+  }, []);
+
+  return (
+    <Sidebar>
+      <div className="space-y-6">
+        {/* Cabeçalho */}
+        <div>
+          <h1 className="text-3xl font-bold">Dashboard</h1>
+          <p className="text-muted-foreground">
+            Bem-vindo ao seu portal de consultas médicas
+          </p>
+        </div>
+
+        {/* Cards principais */}
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {/* Próxima Consulta Confirmada */}
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">
+                Próxima Consulta Confirmada
+              </CardTitle>
+              <Calendar className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              {loadingAppointments ? (
+                <div className="text-muted-foreground text-sm">
+                  Carregando próxima consulta...
+                </div>
+              ) : firstConfirmed ? (
+                <>
+                  <div className="text-2xl font-bold">
+                    {new Date(
+                      firstConfirmed.scheduled_at || firstConfirmed.date
+                    ).toLocaleDateString("pt-BR")}
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    {firstConfirmed.doctor_name
+                      ? `Dr(a). ${firstConfirmed.doctor_name}`
+                      : "Médico não informado"}{" "}
+                    -{" "}
+                    {new Date(firstConfirmed.scheduled_at).toLocaleTimeString(
+                      "pt-BR",
+                      {
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      }
+                    )}
+                  </p>
+                </>
+              ) : (
+                <div className="text-sm text-muted-foreground">
+                  Nenhuma consulta confirmada encontrada
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Consultas Este Mês */}
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">
+                Consultas Este Mês
+              </CardTitle>
+              <Clock className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              {loadingAppointments ? (
+                <div className="text-muted-foreground text-sm">
+                  Carregando consultas...
+                </div>
+              ) : nextAgendada ? (
+                <>
+                  <div className="text-lg font-bold">
+                    {new Date(nextAgendada.scheduled_at).toLocaleDateString(
+                      "pt-BR",
+                      {
+                        day: "2-digit",
+                        month: "2-digit",
+                        year: "numeric",
+                      }
+                    )}{" "}
+                    às{" "}
+                    {new Date(nextAgendada.scheduled_at).toLocaleTimeString(
+                      "pt-BR",
+                      {
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      }
+                    )}
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    {nextAgendada.doctor_name
+                      ? `Dr(a). ${nextAgendada.doctor_name}`
+                      : "Médico não informado"}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {nextAgendada.patient_name
+                      ? `Paciente: ${nextAgendada.patient_name}`
+                      : ""}
+                  </p>
+                </>
+              ) : (
+                <div className="text-sm text-muted-foreground">
+                  Nenhuma consulta agendada neste mês
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Perfil */}
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Perfil</CardTitle>
+              <User className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">100%</div>
+              <p className="text-xs text-muted-foreground">Dados completos</p>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Cards Secundários */}
+        <div className="grid md:grid-cols-2 gap-6">
+          {/* Ações rápidas */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Ações Rápidas</CardTitle>
+              <CardDescription>
+                Acesse rapidamente as principais funcionalidades
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <Link href="/secretary/schedule">
+                <Button className="w-full justify-start bg-primary text-primary-foreground hover:bg-primary/90">
+                  <User className="mr-2 h-4 w-4" />
+                  Agendar Nova Consulta
+                </Button>
+              </Link>
+              <Link href="/secretary/appointments">
+                <Button
+                  variant="outline"
+                  className="w-full justify-start bg-transparent"
+                >
+                  <Calendar className="mr-2 h-4 w-4" />
+                  Ver Consultas
+                </Button>
+              </Link>
+              <Link href="/secretary/pacientes">
+                <Button
+                  variant="outline"
+                  className="w-full justify-start bg-transparent"
+                >
+                  <User className="mr-2 h-4 w-4" />
+                  Gerenciar Pacientes
+                </Button>
+              </Link>
+            </CardContent>
+          </Card>
+
+          {/* Pacientes */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Pacientes</CardTitle>
+              <CardDescription>Últimos pacientes cadastrados</CardDescription>
+            </CardHeader>
+            <CardContent>
+              {loadingPatients ? (
+                <p className="text-sm text-muted-foreground">Carregando pacientes...</p>
+              ) : patients.length === 0 ? (
+                <p className="text-sm text-muted-foreground">
+                  Nenhum paciente cadastrado.
+                </p>
+              ) : (
+                <div className="space-y-4">
+                  {patients.map((patient, index) => (
+                    <div
+                      key={index}
+                      className="flex items-center justify-between p-3 bg-primary/10 rounded-lg border border-primary/20"
+                    >
+                      <div>
+                        <p className="font-medium text-foreground">
+                          {patient.full_name || "Sem nome"}
+                        </p>
+                        <p className="text-sm text-muted-foreground">
+                          {patient.phone_mobile ||
+                            patient.phone1 ||
+                            "Sem telefone"}
+                        </p>
+                      </div>
+                      <div className="text-right">
+                        <p className="font-medium text-primary">
+                          {patient.convenio || "Particular"}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </Sidebar>
+  );
+}

app/secretary/login/page.tsx

@@ -0,0 +1,31 @@
+// Caminho: app/(secretary)/login/page.tsx
+
+import { LoginForm } from "@/components/LoginForm";
+import Link from "next/link"; // Adicionado para o link de "Voltar"
+
+export default function SecretaryLoginPage() {
+    // NOTA: Esta página se tornou obsoleta com a criação do /login central.
+    // O ideal no futuro é deletar esta página e redirecionar os usuários.
+
+    return (
+        <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 flex items-center justify-center p-4">
+            <div className="w-full max-w-md text-center">
+                <h1 className="text-3xl font-bold text-foreground mb-2">Área da Secretária</h1>
+                <p className="text-muted-foreground mb-8">Acesse o sistema de gerenciamento</p>
+                
+                {/* --- ALTERAÇÃO PRINCIPAL AQUI --- */}
+                {/* Chamando o LoginForm unificado sem props desnecessárias */}
+                <LoginForm>
+                    {/* Adicionamos um link de "Voltar" como filho (children) */}
+                    <div className="mt-6 text-center text-sm">
+                        <Link href="/">
+                            <span className="font-semibold text-primary hover:underline cursor-pointer">
+                                Voltar à página inicial
+                            </span>
+                        </Link>
+                    </div>
+                </LoginForm>
+            </div>
+       </div>
+    );
+}

app/secretary/pacientes/[id]/editar/page.tsx

@@ -0,0 +1,675 @@
+"use client";
+
+import type React from "react";
+
+import { useState, useEffect, useRef } from "react";
+import { useRouter, useParams } from "next/navigation";
+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 { Textarea } from "@/components/ui/textarea";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ArrowLeft, Save, Trash2, Paperclip, Upload } from "lucide-react";
+import Link from "next/link";
+import { useToast } from "@/hooks/use-toast";
+import { patientsService } from "@/services/patientsApi.mjs";
+import Sidebar from "@/components/Sidebar";
+
+export default function EditarPacientePage() {
+    const router = useRouter();
+    const params = useParams();
+    const patientId = params.id;
+    const { toast } = useToast();
+
+    // Photo upload state
+    const fileInputRef = useRef<HTMLInputElement | null>(null);
+    const [isUploadingPhoto, setIsUploadingPhoto] = useState(false);
+    const [photoUrl, setPhotoUrl] = useState<string | null>(null);
+    // Anexos state
+    const [anexos, setAnexos] = useState<any[]>([]);
+    const [isUploadingAnexo, setIsUploadingAnexo] = useState(false);
+    const anexoInputRef = useRef<HTMLInputElement | null>(null);
+
+    type FormData = {
+        nome: string; // full_name
+        cpf: string;
+        dataNascimento: string; // birth_date
+        sexo: string; // sex
+        id?: string;
+        nomeSocial?: string; // social_name
+        rg?: string;
+        documentType?: string; // document_type
+        documentNumber?: string; // document_number
+        ethnicity?: string;
+        race?: string;
+        naturality?: string;
+        nationality?: string;
+        profession?: string;
+        maritalStatus?: string; // marital_status
+        motherName?: string; // mother_name
+        motherProfession?: string; // mother_profession
+        fatherName?: string; // father_name
+        fatherProfession?: string; // father_profession
+        guardianName?: string; // guardian_name
+        guardianCpf?: string; // guardian_cpf
+        spouseName?: string; // spouse_name
+        rnInInsurance?: boolean; // rn_in_insurance
+        legacyCode?: string; // legacy_code
+        notes?: string;
+        email?: string;
+        phoneMobile?: string; // phone_mobile
+        phone1?: string;
+        phone2?: string;
+        cep?: string;
+        street?: string;
+        number?: string;
+        complement?: string;
+        neighborhood?: string;
+        city?: string;
+        state?: string;
+        reference?: string;
+        vip?: boolean;
+        lastVisitAt?: string;
+        nextAppointmentAt?: string;
+        createdAt?: string;
+        updatedAt?: string;
+        createdBy?: string;
+        updatedBy?: string;
+        weightKg?: string;
+        heightM?: string;
+        bmi?: string;
+        bloodType?: string;
+        // Adicionei os campos do convênio para o tipo FormData
+        convenio?: string;
+        plano?: string;
+        numeroMatricula?: string;
+        validadeCarteira?: string;
+        alergias?: string;
+    };
+
+
+    const [formData, setFormData] = useState<FormData>({
+        nome: "",
+        cpf: "",
+        dataNascimento: "",
+        sexo: "",
+        id: "",
+        nomeSocial: "",
+        rg: "",
+        documentType: "",
+        documentNumber: "",
+        ethnicity: "",
+        race: "",
+        naturality: "",
+        nationality: "",
+        profession: "",
+        maritalStatus: "",
+        motherName: "",
+        motherProfession: "",
+        fatherName: "",
+        fatherProfession: "",
+        guardianName: "",
+        guardianCpf: "",
+        spouseName: "",
+        rnInInsurance: false,
+        legacyCode: "",
+        notes: "",
+        email: "",
+        phoneMobile: "",
+        phone1: "",
+        phone2: "",
+        cep: "",
+        street: "",
+        number: "",
+        complement: "",
+        neighborhood: "",
+        city: "",
+        state: "",
+        reference: "",
+        vip: false,
+        lastVisitAt: "",
+        nextAppointmentAt: "",
+        createdAt: "",
+        updatedAt: "",
+        createdBy: "",
+        updatedBy: "",
+        weightKg: "",
+        heightM: "",
+        bmi: "",
+        bloodType: "",
+        convenio: "",
+        plano: "",
+        numeroMatricula: "",
+        validadeCarteira: "",
+        alergias: "",
+    });
+
+    const [isGuiaConvenio, setIsGuiaConvenio] = useState(false);
+    const [validadeIndeterminada, setValidadeIndeterminada] = useState(false);
+
+    useEffect(() => {
+        async function fetchPatient() {
+            try {
+                const res = await patientsService.getById(patientId);
+                // Map API snake_case/nested to local camelCase form
+                setFormData({
+                    id: res[0]?.id ?? "",
+                    nome: res[0]?.full_name ?? "",
+                    nomeSocial: res[0]?.social_name ?? "",
+                    cpf: res[0]?.cpf ?? "",
+                    rg: res[0]?.rg ?? "",
+                    documentType: res[0]?.document_type ?? "",
+                    documentNumber: res[0]?.document_number ?? "",
+                    sexo: res[0]?.sex ?? "",
+                    dataNascimento: res[0]?.birth_date ?? "",
+                    ethnicity: res[0]?.ethnicity ?? "",
+                    race: res[0]?.race ?? "",
+                    naturality: res[0]?.naturality ?? "",
+                    nationality: res[0]?.nationality ?? "",
+                    profession: res[0]?.profession ?? "",
+                    maritalStatus: res[0]?.marital_status ?? "",
+                    motherName: res[0]?.mother_name ?? "",
+                    motherProfession: res[0]?.mother_profession ?? "",
+                    fatherName: res[0]?.father_name ?? "",
+                    fatherProfession: res[0]?.father_profession ?? "",
+                    guardianName: res[0]?.guardian_name ?? "",
+                    guardianCpf: res[0]?.guardian_cpf ?? "",
+                    spouseName: res[0]?.spouse_name ?? "",
+                    rnInInsurance: res[0]?.rn_in_insurance ?? false,
+                    legacyCode: res[0]?.legacy_code ?? "",
+                    notes: res[0]?.notes ?? "",
+                    email: res[0]?.email ?? "",
+                    phoneMobile: res[0]?.phone_mobile ?? "",
+                    phone1: res[0]?.phone1 ?? "",
+                    phone2: res[0]?.phone2 ?? "",
+                    cep: res[0]?.cep ?? "",
+                    street: res[0]?.street ?? "",
+                    number: res[0]?.number ?? "",
+                    complement: res[0]?.complement ?? "",
+                    neighborhood: res[0]?.neighborhood ?? "",
+                    city: res[0]?.city ?? "",
+                    state: res[0]?.state ?? "",
+                    reference: res[0]?.reference ?? "",
+                    vip: res[0]?.vip ?? false,
+                    lastVisitAt: res[0]?.last_visit_at ?? "",
+                    nextAppointmentAt: res[0]?.next_appointment_at ?? "",
+                    createdAt: res[0]?.created_at ?? "",
+                    updatedAt: res[0]?.updated_at ?? "",
+                    createdBy: res[0]?.created_by ?? "",
+                    updatedBy: res[0]?.updated_by ?? "",
+                    weightKg: res[0]?.weight_kg ? String(res[0].weight_kg) : "",
+                    heightM: res[0]?.height_m ? String(res[0].height_m) : "",
+                    bmi: res[0]?.bmi ? String(res[0].bmi) : "",
+                    bloodType: res[0]?.blood_type ?? "",
+                    // Os campos de convênio e alergias não vêm da API, então os deixamos vazios ou com valores padrão
+                    convenio: "",
+                    plano: "",
+                    numeroMatricula: "",
+                    validadeCarteira: "",
+                    alergias: "",
+                });
+
+            } catch (e: any) {
+                toast({ title: "Erro", description: e?.message || "Falha ao carregar paciente" });
+            }
+        }
+        fetchPatient();
+    }, [patientId, toast]);
+
+    const handleInputChange = (field: string, value: string) => {
+        setFormData((prev) => ({ ...prev, [field]: value }));
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        // Build API payload (snake_case)
+        const payload = {
+            full_name: formData.nome || null,
+            cpf: formData.cpf || null,
+            email: formData.email || null,
+            phone_mobile: formData.phoneMobile || null,
+            birth_date: formData.dataNascimento || null,
+            social_name: formData.nomeSocial || null,
+            sex: formData.sexo || null,
+            blood_type: formData.bloodType || null,
+            weight_kg: formData.weightKg ? Number(formData.weightKg) : null,
+            height_m: formData.heightM ? Number(formData.heightM) : null,
+            street: formData.street || null,
+            number: formData.number || null,
+            complement: formData.complement || null,
+            neighborhood: formData.neighborhood || null,
+            city: formData.city || null,
+            state: formData.state || null,
+            cep: formData.cep || null,
+        };
+
+        try {
+            await patientsService.update(patientId, payload);
+            toast({
+                title: "Sucesso",
+                description: "Paciente atualizado com sucesso",
+                variant: "default"
+            });
+            router.push("/secretary/pacientes");
+        } catch (err: any) {
+            console.error("Erro ao atualizar paciente:", err);
+            toast({
+                title: "Erro",
+                description: err?.message || "Não foi possível atualizar o paciente",
+                variant: "destructive"
+            });
+        }
+    };
+
+    return (
+        <Sidebar>
+            {/* O espaçamento foi reduzido aqui: de `p-4 sm:p-6 lg:p-8` para `p-2 sm:p-4 lg:p-6` */}
+            <div className="space-y-6 p-2 sm:p-4 lg:p-6 max-w-10xl mx-auto">{/* Alterado padding responsivo */}
+                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+                    <div className="flex items-center gap-4">
+                        <Link href="/secretary/pacientes">
+                            <Button variant="ghost" size="sm">
+                                <ArrowLeft className="w-4 h-4 mr-2" />
+                                Voltar
+                            </Button>
+                        </Link>
+                        <div>
+                            <h1 className="text-2xl font-bold">Editar Paciente</h1>
+                            <p className="text-muted-foreground">Atualize as informações do paciente</p>
+                        </div>
+                    </div>
+                    {/* Espaço reservado para anexos ou ações futuras */}
+                </div>
+
+                <form onSubmit={handleSubmit} className="space-y-8">
+                    {/* Dados Pessoais Section */}
+                    <div className="bg-card rounded-lg border p-6">
+                        <h2 className="text-lg font-semibold mb-6">Dados Pessoais</h2>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                            {/* Photo upload */}
+                            <div className="space-y-2 col-span-1 md:col-span-2 lg:col-span-1">
+                                <Label>Foto do paciente</Label>
+                                <div className="flex flex-col sm:flex-row items-center gap-4">
+                                    <div className="w-20 h-20 rounded-full bg-muted overflow-hidden flex items-center justify-center">
+                                        {photoUrl ? (
+                                            // eslint-disable-next-line @next/next/no-img-element
+                                            <img src={photoUrl} alt="Foto do paciente" className="w-full h-full object-cover" />
+                                        ) : (
+                                            <span className="text-muted-foreground text-sm text-center">Sem foto</span>
+                                        )}
+                                    </div>
+                                    <div className="flex flex-col sm:flex-row gap-2 mt-2 sm:mt-0">
+                                        <input ref={fileInputRef} type="file" accept="image/*" className="hidden" />
+                                        <Button type="button" variant="outline" disabled={isUploadingPhoto}>
+                                            {isUploadingPhoto ? "Enviando..." : "Enviar foto"}
+                                        </Button>
+                                        {photoUrl && (
+                                            <Button type="button" variant="ghost" disabled={isUploadingPhoto}>
+                                                Remover
+                                            </Button>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="nome">Nome *</Label>
+                                <Input id="nome" value={formData.nome} onChange={(e) => handleInputChange("nome", e.target.value)} required />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="cpf">CPF *</Label>
+                                <Input id="cpf" value={formData.cpf} onChange={(e) => handleInputChange("cpf", e.target.value)} placeholder="000.000.000-00" required />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="rg">RG</Label>
+                                <Input id="rg" value={formData.rg} onChange={(e) => handleInputChange("rg", e.target.value)} placeholder="00.000.000-0" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label>Sexo *</Label>
+                                <div className="flex flex-col sm:flex-row gap-4">
+                                    <div className="flex items-center space-x-2">
+                                        <input type="radio" id="Masculino" name="sexo" value="Masculino" checked={formData.sexo === "Masculino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-primary" />
+                                        <Label htmlFor="Masculino">Masculino</Label>
+                                    </div>
+                                    <div className="flex items-center space-x-2">
+                                        <input type="radio" id="Feminino" name="sexo" value="Feminino" checked={formData.sexo === "Feminino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-primary" />
+                                        <Label htmlFor="Feminino">Feminino</Label>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="dataNascimento">Data de nascimento *</Label>
+                                <Input id="dataNascimento" type="date" value={formData.dataNascimento} onChange={(e) => handleInputChange("dataNascimento", e.target.value)} required />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="etnia">Etnia</Label>
+                                <Select value={formData.ethnicity} onValueChange={(value) => handleInputChange("ethnicity", value)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Selecione" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="branca">Branca</SelectItem>
+                                        <SelectItem value="preta">Preta</SelectItem>
+                                        <SelectItem value="parda">Parda</SelectItem>
+                                        <SelectItem value="amarela">Amarela</SelectItem>
+                                        <SelectItem value="indigena">Indígena</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="raca">Raça</Label>
+                                <Select value={formData.race} onValueChange={(value) => handleInputChange("race", value)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Selecione" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="caucasiana">Caucasiana</SelectItem>
+                                        <SelectItem value="negroide">Negroide</SelectItem>
+                                        <SelectItem value="mongoloide">Mongoloide</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="naturalidade">Naturalidade</Label>
+                                <Input id="naturalidade" value={formData.naturality} onChange={(e) => handleInputChange("naturality", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="nacionalidade">Nacionalidade</Label>
+                                <Select value={formData.nationality} onValueChange={(value) => handleInputChange("nationality", value)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Selecione" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="brasileira">Brasileira</SelectItem>
+                                        <SelectItem value="estrangeira">Estrangeira</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="profissao">Profissão</Label>
+                                <Input id="profissao" value={formData.profession} onChange={(e) => handleInputChange("profissao", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="estadoCivil">Estado civil</Label>
+                                <Select value={formData.maritalStatus} onValueChange={(value) => handleInputChange("maritalStatus", value)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Selecione" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="solteiro">Solteiro(a)</SelectItem>
+                                        <SelectItem value="casado">Casado(a)</SelectItem>
+                                        <SelectItem value="divorciado">Divorciado(a)</SelectItem>
+                                        <SelectItem value="viuvo">Viúvo(a)</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="nomeMae">Nome da mãe</Label>
+                                <Input id="nomeMae" value={formData.motherName} onChange={(e) => handleInputChange("motherName", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="profissaoMae">Profissão da mãe</Label>
+                                <Input id="profissaoMae" value={formData.motherProfession} onChange={(e) => handleInputChange("motherProfession", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="nomePai">Nome do pai</Label>
+                                <Input id="nomePai" value={formData.fatherName} onChange={(e) => handleInputChange("fatherName", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="profissaoPai">Profissão do pai</Label>
+                                <Input id="profissaoPai" value={formData.fatherProfession} onChange={(e) => handleInputChange("fatherProfession", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="nomeResponsavel">Nome do responsável</Label>
+                                <Input id="nomeResponsavel" value={formData.guardianName} onChange={(e) => handleInputChange("guardianName", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="cpfResponsavel">CPF do responsável</Label>
+                                <Input id="cpfResponsavel" value={formData.guardianCpf} onChange={(e) => handleInputChange("guardianCpf", e.target.value)} placeholder="000.000.000-00" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="nomeEsposo">Nome do esposo(a)</Label>
+                                <Input id="nomeEsposo" value={formData.spouseName} onChange={(e) => handleInputChange("spouseName", e.target.value)} />
+                            </div>
+                        </div>
+
+                        <div className="mt-6">
+                            <div className="flex items-center space-x-2">
+                                <Checkbox id="guiaConvenio" checked={isGuiaConvenio} onCheckedChange={(checked) => setIsGuiaConvenio(checked === true)} />
+                                <Label htmlFor="guiaConvenio">RN na Guia do convênio</Label>
+                            </div>
+                        </div>
+
+                        <div className="mt-6">
+                            <Label htmlFor="observacoes">Observações</Label>
+                            <Textarea id="observacoes" value={formData.notes} onChange={(e) => handleInputChange("notes", e.target.value)} placeholder="Digite observações sobre o paciente..." className="mt-2" />
+                        </div>
+                    </div>
+
+                    {/* Contact Section */}
+                    <div className="bg-card rounded-lg border p-6">
+                        <h2 className="text-lg font-semibold mb-6">Contato</h2>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="email">E-mail *</Label>
+                                <Input id="email" type="email" value={formData.email} onChange={(e) => handleInputChange("email", e.target.value)} required />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="celular">Celular *</Label>
+                                <Input id="celular" value={formData.phoneMobile} onChange={(e) => handleInputChange("phoneMobile", e.target.value)} placeholder="(00) 00000-0000" required />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="telefone1">Telefone 1</Label>
+                                <Input id="telefone1" value={formData.phone1} onChange={(e) => handleInputChange("phone1", e.target.value)} placeholder="(00) 0000-0000" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="telefone2">Telefone 2</Label>
+                                <Input id="telefone2" value={formData.phone2} onChange={(e) => handleInputChange("phone2", e.target.value)} placeholder="(00) 0000-0000" />
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Address Section */}
+                    <div className="bg-card rounded-lg border p-6">
+                        <h2 className="text-lg font-semibold mb-6">Endereço</h2>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="cep">CEP</Label>
+                                <Input id="cep" value={formData.cep} onChange={(e) => handleInputChange("cep", e.target.value)} placeholder="00000-000" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="endereco">Endereço</Label>
+                                <Input id="endereco" value={formData.street} onChange={(e) => handleInputChange("street", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="numero">Número</Label>
+                                <Input id="numero" value={formData.number} onChange={(e) => handleInputChange("number", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="complemento">Complemento</Label>
+                                <Input id="complemento" value={formData.complement} onChange={(e) => handleInputChange("complement", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="bairro">Bairro</Label>
+                                <Input id="bairro" value={formData.neighborhood} onChange={(e) => handleInputChange("neighborhood", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="cidade">Cidade</Label>
+                                <Input id="cidade" value={formData.city} onChange={(e) => handleInputChange("city", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="estado">Estado</Label>
+                                <Select value={formData.state} onValueChange={(value) => handleInputChange("state", value)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Selecione" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="AC">Acre</SelectItem>
+                                        <SelectItem value="AL">Alagoas</SelectItem>
+                                        <SelectItem value="AP">Amapá</SelectItem>
+                                        <SelectItem value="AM">Amazonas</SelectItem>
+                                        <SelectItem value="BA">Bahia</SelectItem>
+                                        <SelectItem value="CE">Ceará</SelectItem>
+                                        <SelectItem value="DF">Distrito Federal</SelectItem>
+                                        <SelectItem value="ES">Espírito Santo</SelectItem>
+                                        <SelectItem value="GO">Goiás</SelectItem>
+                                        <SelectItem value="MA">Maranhão</SelectItem>
+                                        <SelectItem value="MT">Mato Grosso</SelectItem>
+                                        <SelectItem value="MS">Mato Grosso do Sul</SelectItem>
+                                        <SelectItem value="MG">Minas Gerais</SelectItem>
+                                        <SelectItem value="PA">Pará</SelectItem>
+                                        <SelectItem value="PB">Paraíba</SelectItem>
+                                        <SelectItem value="PR">Paraná</SelectItem>
+                                        <SelectItem value="PE">Pernambuco</SelectItem>
+                                        <SelectItem value="PI">Piauí</SelectItem>
+                                        <SelectItem value="RJ">Rio de Janeiro</SelectItem>
+                                        <SelectItem value="RN">Rio Grande do Norte</SelectItem>
+                                        <SelectItem value="RS">Rio Grande do Sul</SelectItem>
+                                        <SelectItem value="RO">Rondônia</SelectItem>
+                                        <SelectItem value="RR">Roraima</SelectItem>
+                                        <SelectItem value="SC">Santa Catarina</SelectItem>
+                                        <SelectItem value="SP">São Paulo</SelectItem>
+                                        <SelectItem value="SE">Sergipe</SelectItem>
+                                        <SelectItem value="TO">Tocantins</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Medical Information Section */}
+                    <div className="bg-card rounded-lg border p-6">
+                        <h2 className="text-lg font-semibold mb-6">Informações Médicas</h2>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="tipoSanguineo">Tipo Sanguíneo</Label>
+                                <Select value={formData.bloodType} onValueChange={(value) => handleInputChange("bloodType", value)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Selecione" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="A+">A+</SelectItem>
+                                        <SelectItem value="A-">A-</SelectItem>
+                                        <SelectItem value="B+">B+</SelectItem>
+                                        <SelectItem value="B-">B-</SelectItem>
+                                        <SelectItem value="AB+">AB+</SelectItem>
+                                        <SelectItem value="AB-">AB-</SelectItem>
+                                        <SelectItem value="O+">O+</SelectItem>
+                                        <SelectItem value="O-">O-</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="peso">Peso (kg)</Label>
+                                <Input id="peso" type="number" value={formData.weightKg} onChange={(e) => handleInputChange("weightKg", e.target.value)} placeholder="0.0" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="altura">Altura (m)</Label>
+                                <Input id="altura" type="number" step="0.01" value={formData.heightM} onChange={(e) => handleInputChange("heightM", e.target.value)} placeholder="0.00" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label>IMC</Label>
+                                <Input value={formData.weightKg && formData.heightM ? (Number.parseFloat(formData.weightKg) / Number.parseFloat(formData.heightM) ** 2).toFixed(2) : ""} disabled placeholder="Calculado automaticamente" />
+                            </div>
+                        </div>
+
+                        <div className="mt-6">
+                            <Label htmlFor="alergias">Alergias</Label>
+                            <Textarea id="alergias" value={formData.alergias} onChange={(e) => handleInputChange("alergias", e.target.value)} placeholder="Ex: AAS, Dipirona, etc." className="mt-2" />
+                        </div>
+                    </div>
+
+                    {/* Insurance Information Section */}
+                    <div className="bg-card rounded-lg border p-6">
+                        <h2 className="text-lg font-semibold mb-6">Informações de convênio</h2>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="convenio">Convênio</Label>
+                                <Select value={formData.convenio} onValueChange={(value) => handleInputChange("convenio", value)}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Selecione" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="Particular">Particular</SelectItem>
+                                        <SelectItem value="SUS">SUS</SelectItem>
+                                        <SelectItem value="Unimed">Unimed</SelectItem>
+                                        <SelectItem value="Bradesco">Bradesco Saúde</SelectItem>
+                                        <SelectItem value="Amil">Amil</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="plano">Plano</Label>
+                                <Input id="plano" value={formData.plano} onChange={(e) => handleInputChange("plano", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="numeroMatricula">Nº de matrícula</Label>
+                                <Input id="numeroMatricula" value={formData.numeroMatricula} onChange={(e) => handleInputChange("numeroMatricula", e.target.value)} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="validadeCarteira">Validade da Carteira</Label>
+                                <Input id="validadeCarteira" type="date" value={formData.validadeCarteira} onChange={(e) => handleInputChange("validadeCarteira", e.target.value)} disabled={validadeIndeterminada} />
+                            </div>
+                        </div>
+
+                        <div className="mt-4">
+                            <div className="flex items-center space-x-2">
+                                <Checkbox id="validadeIndeterminada" checked={validadeIndeterminada} onCheckedChange={(checked) => setValidadeIndeterminada(checked === true)} />
+                                <Label htmlFor="validadeIndeterminada">Validade Indeterminada</Label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="flex flex-col sm:flex-row justify-end gap-4">
+                        <Link href="/secretary/pacientes">
+                            <Button type="button" variant="outline" className="w-full sm:w-auto">
+                                Cancelar
+                            </Button>
+                        </Link>
+                        <Button type="submit" className="bg-primary hover:bg-primary/90 w-full sm:w-auto">
+                            <Save className="w-4 h-4 mr-2" />
+                            Salvar Alterações
+                        </Button>
+                    </div>
+                </form>
+            </div>
+        </Sidebar>
+    );
+}

app/secretary/pacientes/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}

app/secretary/pacientes/novo/page.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Save, Loader2 } from "lucide-react";
+import { usersService } from "services/usersApi.mjs";
+import Sidebar from "@/components/Sidebar";
+
+// Interface simplificada para refletir apenas os campos necessários
+interface UserFormData {
+    email: string;
+    nomeCompleto: string;
+    telefone: string;
+    senha: string;
+    confirmarSenha: string;
+    cpf: string;
+}
+
+const defaultFormData: UserFormData = {
+    email: "",
+    nomeCompleto: "",
+    telefone: "",
+    senha: "",
+    confirmarSenha: "",
+    cpf: "",
+};
+
+const cleanNumber = (value: string): string => value.replace(/\D/g, "");
+const formatPhone = (value: string): string => {
+    const cleaned = cleanNumber(value).substring(0, 11);
+    if (cleaned.length === 11) return cleaned.replace(/(\d{2})(\d{5})(\d{4})/, "($1) $2-$3");
+    if (cleaned.length === 10) return cleaned.replace(/(\d{2})(\d{4})(\d{4})/, "($1) $2-$3");
+    return cleaned;
+};
+
+export default function NovoUsuarioPage() {
+    const router = useRouter();
+    const [formData, setFormData] = useState<UserFormData>(defaultFormData);
+    const [isSaving, setIsSaving] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleInputChange = (key: keyof UserFormData, value: string) => {
+        const updatedValue = key === "telefone" ? formatPhone(value) : value;
+        setFormData((prev) => ({ ...prev, [key]: updatedValue }));
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError(null);
+
+        // Validação simplificada
+        if (!formData.email || !formData.nomeCompleto || !formData.senha || !formData.confirmarSenha || !formData.cpf) {
+            setError("Por favor, preencha todos os campos obrigatórios.");
+            return;
+        }
+
+        if (formData.senha !== formData.confirmarSenha) {
+            setError("A Senha e a Confirmação de Senha não coincidem.");
+            return;
+        }
+
+        setIsSaving(true);
+
+        try {
+            // Payload agora é fixo para a role 'paciente'
+            const payload = {
+                full_name: formData.nomeCompleto,
+                email: formData.email.trim().toLowerCase(),
+                phone: formData.telefone || null,
+                role: "paciente", // Role fixada
+                password: formData.senha,
+                cpf: formData.cpf,
+            };
+
+            console.log("📤 Enviando payload para criação de Usuário (Paciente):");
+            console.log(payload);
+
+            // A chamada original à API foi mantida
+            await usersService.create_user(payload);
+
+            router.push("/manager/usuario");
+        } catch (e: any) {
+            console.error("Erro ao criar usuário:", e);
+            setError(e?.message || "Não foi possível criar o paciente. Verifique os dados e tente novamente.");
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    return (
+        <Sidebar>
+            {/* Container principal com padding responsivo e centralização */}
+            <div className="w-full h-full p-4 md:p-8 lg:p-12 flex justify-center items-start">
+                {/* Conteúdo do formulário com largura máxima para telas maiores */}
+                <div className="w-full max-w-screen-md lg:max-w-screen-lg space-y-8">
+                    {/* Cabeçalho da página */}
+                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between border-b pb-4 gap-4"> {/* Ajustado para empilhar em telas pequenas */}
+                        <div>
+                            <h1 className="text-2xl sm:text-3xl font-extrabold text-gray-900">Novo Paciente</h1> {/* Tamanho de texto responsivo */}
+                            <p className="text-sm sm:text-md text-gray-500">Preencha os dados para cadastrar um novo paciente no sistema.</p> {/* Tamanho de texto responsivo */}
+                        </div>
+                        <Link href="/secretary/pacientes">
+                            <Button variant="outline" className="w-full sm:w-auto">Cancelar</Button> {/* Botão ocupa largura total em telas pequenas */}
+                        </Link>
+                    </div>
+
+                    {/* Formulário */}
+                    <form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 md:p-10 border rounded-xl shadow-lg">
+                        {error && (
+                            <div className="p-4 bg-red-50 text-red-700 rounded-lg border border-red-300">
+                                <p className="font-semibold">Erro no Cadastro:</p>
+                                <p className="text-sm break-words">{error}</p>
+                            </div>
+                        )}
+
+                        {/* Campos do formulário em grid responsivo */}
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <div className="space-y-2 md:col-span-2"> {/* Nome Completo ocupa 2 colunas em telas maiores */}
+                                <Label htmlFor="nomeCompleto">Nome Completo *</Label>
+                                <Input id="nomeCompleto" value={formData.nomeCompleto} onChange={(e) => handleInputChange("nomeCompleto", e.target.value)} placeholder="Nome e Sobrenome" required />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="email">E-mail *</Label>
+                                <Input id="email" type="email" value={formData.email} onChange={(e) => handleInputChange("email", e.target.value)} placeholder="exemplo@dominio.com" required />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="telefone">Telefone</Label>
+                                <Input id="telefone" value={formData.telefone} onChange={(e) => handleInputChange("telefone", e.target.value)} placeholder="(00) 00000-0000" maxLength={15} />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="senha">Senha *</Label>
+                                <Input id="senha" type="password" value={formData.senha} onChange={(e) => handleInputChange("senha", e.target.value)} placeholder="Mínimo 8 caracteres" minLength={8} required />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="confirmarSenha">Confirmar Senha *</Label>
+                                <Input id="confirmarSenha" type="password" value={formData.confirmarSenha} onChange={(e) => handleInputChange("confirmarSenha", e.target.value)} placeholder="Repita a senha" required />
+                                {formData.senha && formData.confirmarSenha && formData.senha !== formData.confirmarSenha && <p className="text-xs text-red-500">As senhas não coincidem.</p>}
+                            </div>
+                            
+                            <div className="space-y-2 md:col-span-2"> {/* CPF ocupa 2 colunas em telas maiores */}
+                                <Label htmlFor="cpf">CPF *</Label>
+                                <Input id="cpf" value={formData.cpf} onChange={(e) => handleInputChange("cpf", e.target.value)} placeholder="xxx.xxx.xxx-xx" required />
+                            </div>
+                        </div>
+
+                        {/* Botões de ação */}
+                        <div className="flex flex-col sm:flex-row justify-end gap-4 pt-6 border-t mt-6"> {/* Botões empilhados em telas pequenas */}
+                            <Link href="/secretary/pacientes">
+                                <Button type="button" variant="outline" disabled={isSaving} className="w-full sm:w-auto">
+                                    Cancelar
+                                </Button>
+                            </Link>
+                            <Link  href="/secretary/pacientes">
+                                <Button type="submit" className="bg-green-600 hover:bg-green-700 w-full sm:w-auto" disabled={isSaving}>
+                                
+                                    {isSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />}
+                                    {isSaving ? "Salvando..." : "Salvar Paciente"}
+                                
+                                </Button>
+                            </Link>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </Sidebar>
+    );
+}

app/secretary/pacientes/page.tsx

@@ -0,0 +1,590 @@
+// app/secretary/pacientes/page.tsx
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Plus, Edit, Trash2, Eye, Calendar, Filter, Loader2, MoreVertical } from "lucide-react";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import { patientsService } from "@/services/patientsApi.mjs";
+import Sidebar from "@/components/Sidebar";
+
+// Defina o tamanho da página.
+const PAGE_SIZE = 5;
+
+export default function PacientesPage() {
+  // --- ESTADOS DE DADOS E GERAL ---
+  const [searchTerm, setSearchTerm] = useState("");
+  const [convenioFilter, setConvenioFilter] = useState("all");
+  const [vipFilter, setVipFilter] = useState("all");
+
+  // Lista completa, carregada da API uma única vez
+  const [allPatients, setAllPatients] = useState<any[]>([]);
+  // Lista após a aplicação dos filtros (base para a paginação)
+  const [filteredPatients, setFilteredPatients] = useState<any[]>([]);
+
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // --- ESTADOS DE PAGINAÇÃO ---
+  const [page, setPage] = useState(1);
+
+  // CÁLCULO DA PAGINAÇÃO
+  const totalPages = Math.ceil(filteredPatients.length / PAGE_SIZE);
+  const startIndex = (page - 1) * PAGE_SIZE;
+  const endIndex = startIndex + PAGE_SIZE;
+  // Pacientes a serem exibidos na tabela (aplicando a paginação)
+  const currentPatients = filteredPatients.slice(startIndex, endIndex);
+
+  // --- ESTADOS DE DIALOGS ---
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [patientToDelete, setPatientToDelete] = useState<string | null>(null);
+  const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
+  const [patientDetails, setPatientDetails] = useState<any | null>(null);
+
+  // --- FUNÇÕES DE LÓGICA ---
+
+  // 1. Função para carregar TODOS os pacientes da API
+  const fetchAllPacientes = useCallback(
+    async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        // Como o backend retorna um array, chamamos sem paginação
+        const res = await patientsService.list();
+
+        const mapped = res.map((p: any) => ({
+          id: String(p.id ?? ""),
+          nome: p.full_name ?? "—",
+          telefone: p.phone_mobile ?? p.phone1 ?? "—",
+          cidade: p.city ?? "—",
+          estado: p.state ?? "—",
+          // Formate as datas se necessário, aqui usamos como string
+          ultimoAtendimento: p.last_visit_at?.split('T')[0] ?? "—",
+          proximoAtendimento: p.next_appointment_at?.split('T')[0] ?? "—",
+          vip: Boolean(p.vip ?? false),
+          convenio: p.convenio ?? "Particular", // Define um valor padrão
+          status: p.status ?? undefined,
+        }));
+
+        setAllPatients(mapped);
+      } catch (e: any) {
+        console.error(e);
+        setError(e?.message || "Erro ao buscar pacientes");
+      } finally {
+        setLoading(false);
+      }
+    }, []);
+
+  // 2. Efeito para aplicar filtros e calcular a lista filtrada (chama-se quando allPatients ou filtros mudam)
+  useEffect(() => {
+    const filtered = allPatients.filter((patient) => {
+      // Filtro por termo de busca (Nome ou Telefone)
+      const matchesSearch =
+        patient.nome?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        patient.telefone?.includes(searchTerm);
+
+      // Filtro por Convênio
+      const matchesConvenio =
+        convenioFilter === "all" ||
+        patient.convenio === convenioFilter;
+
+      // Filtro por VIP
+      const matchesVip =
+        vipFilter === "all" ||
+        (vipFilter === "vip" && patient.vip) ||
+        (vipFilter === "regular" && !patient.vip);
+
+      return matchesSearch && matchesConvenio && matchesVip;
+    });
+
+    setFilteredPatients(filtered);
+    // Garante que a página atual seja válida após a filtragem
+    setPage(1);
+  }, [allPatients, searchTerm, convenioFilter, vipFilter]);
+
+  // 3. Efeito inicial para buscar os pacientes
+  useEffect(() => {
+    fetchAllPacientes();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // --- LÓGICA DE AÇÕES (DELETAR / VER DETALHES) ---
+
+  const openDetailsDialog = async (patientId: string) => {
+    setDetailsDialogOpen(true);
+    setPatientDetails(null);
+    try {
+      const res = await patientsService.getById(patientId);
+      setPatientDetails(Array.isArray(res) ? res[0] : res); // Supondo que retorne um array com um item
+    } catch (e: any) {
+      setPatientDetails({ error: e?.message || "Erro ao buscar detalhes" });
+    }
+  };
+
+  const handleDeletePatient = async (patientId: string) => {
+    try {
+      await patientsService.delete(patientId);
+      // Atualiza a lista completa para refletir a exclusão
+      setAllPatients((prev) =>
+        prev.filter((p) => String(p.id) !== String(patientId))
+      );
+    } catch (e: any) {
+      alert(`Erro ao deletar paciente: ${e?.message || "Erro desconhecido"}`);
+    }
+    setDeleteDialogOpen(false);
+    setPatientToDelete(null);
+  };
+
+  const openDeleteDialog = (patientId: string) => {
+    setPatientToDelete(patientId);
+    setDeleteDialogOpen(true);
+  };
+
+  return (
+    <Sidebar>
+      <div className="space-y-6 px-2 sm:px-4 md:px-8">
+        {/* Header (Responsividade OK) */}
+        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+          <div>
+            <h1 className="text-xl md:text-2xl font-bold">
+              Pacientes
+            </h1>
+            <p className="text-muted-foreground text-sm md:text-base">
+              Gerencie as informações de seus pacientes
+            </p>
+          </div>
+          <div className="flex gap-2">
+            <Link href="/secretary/pacientes/novo" className="w-full md:w-auto">
+              <Button className="w-full bg-primary hover:bg-primary/90">
+                <Plus className="w-4 h-4 mr-2" />
+                Adicionar
+              </Button>
+            </Link>
+          </div>
+        </div>
+
+        {/* Bloco de Filtros (Responsividade APLICADA) */}
+        <div className="flex flex-wrap items-center gap-4 bg-card p-4 rounded-lg border">
+          <Filter className="w-5 h-5 text-muted-foreground" />
+
+          {/* Busca - Ocupa 100% no mobile, depois cresce */}
+          <input
+            type="text"
+            placeholder="Buscar por nome ou telefone..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full sm:flex-grow sm:min-w-[150px] p-2 border rounded-md text-sm"
+          />
+
+          {/* Convênio - Ocupa a largura total em telas pequenas, depois se ajusta */}
+          <div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[200px]">
+            <span className="text-sm font-medium whitespace-nowrap hidden md:block">
+              Convênio
+            </span>
+            <Select value={convenioFilter} onValueChange={setConvenioFilter}>
+              <SelectTrigger className="w-full sm:w-40">
+                {" "}
+                {/* w-full para mobile, w-40 para sm+ */}
+                <SelectValue placeholder="Convênio" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">Todos</SelectItem>
+                <SelectItem value="Particular">Particular</SelectItem>
+                <SelectItem value="SUS">SUS</SelectItem>
+                <SelectItem value="Unimed">Unimed</SelectItem>
+                {/* Adicione outros convênios conforme necessário */}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* VIP - Ocupa a largura total em telas pequenas, depois se ajusta */}
+          <div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[150px]">
+            <span className="text-sm font-medium whitespace-nowrap hidden md:block">VIP</span>
+            <Select value={vipFilter} onValueChange={setVipFilter}>
+              <SelectTrigger className="w-full sm:w-32"> {/* w-full para mobile, w-32 para sm+ */}
+                <SelectValue placeholder="VIP" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">Todos</SelectItem>
+                <SelectItem value="vip">VIP</SelectItem>
+                <SelectItem value="regular">Regular</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+
+
+        </div>
+
+        {/* --- SEÇÃO DE TABELA (VISÍVEL EM TELAS MAIORES OU IGUAIS A MD) --- */}
+        {/* Garantir que a tabela se esconda em telas menores e apareça em MD+ */}
+        <div className="bg-card rounded-lg border shadow-md hidden md:block">
+          <div className="overflow-x-auto">
+            {" "}
+            {/* Permite rolagem horizontal se a tabela for muito larga */}
+            {error ? (
+              <div className="p-6 text-destructive">{`Erro ao carregar pacientes: ${error}`}</div>
+            ) : loading ? (
+              <div className="p-6 text-center text-muted-foreground flex items-center justify-center">
+                <Loader2 className="w-6 h-6 mr-2 animate-spin text-primary" />{" "}
+                Carregando pacientes...
+              </div>
+            ) : (
+              <table className="w-full min-w-[650px]">
+                {" "}
+                {/* min-w para evitar que a tabela se contraia demais */}
+                <thead className="bg-muted border-b">
+                  <tr>
+                    <th className="text-left p-4 font-medium text-muted-foreground w-[20%]">
+                      Nome
+                    </th>
+                    {/* Ajustes de visibilidade de colunas para diferentes breakpoints */}
+                    <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden sm:table-cell">
+                      Telefone
+                    </th>
+                    <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden md:table-cell">
+                      Cidade / Estado
+                    </th>
+                    <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden sm:table-cell">
+                      Convênio
+                    </th>
+                    <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden lg:table-cell">
+                      Último atendimento
+                    </th>
+                    <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden lg:table-cell">
+                      Próximo atendimento
+                    </th>
+                    <th className="text-left p-4 font-medium text-muted-foreground w-[5%]">
+                      Ações
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {currentPatients.length === 0 ? (
+                    <tr>
+                      <td colSpan={7} className="p-8 text-center text-muted-foreground">
+                        {allPatients.length === 0
+                          ? "Nenhum paciente cadastrado"
+                          : "Nenhum paciente encontrado com os filtros aplicados"}
+                      </td>
+                    </tr>
+                  ) : (
+                    currentPatients.map((patient) => (
+                      <tr
+                        key={patient.id}
+                        className="border-b hover:bg-muted"
+                      >
+                        <td className="p-4">
+                          <div className="flex items-center gap-3">
+                            <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
+                              <span className="text-primary font-medium text-sm">
+                                {patient.nome?.charAt(0) || "?"}
+                              </span>
+                            </div>
+
+                            <span className="font-medium">
+                              {patient.nome}
+                              {patient.vip && (
+                                <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-500 bg-purple-500/10 rounded-full">
+                                  VIP
+                                </span>
+                              )}
+                            </span>
+                          </div>
+                        </td>
+                        <td className="p-4 text-muted-foreground hidden sm:table-cell">
+                          {patient.telefone}
+                        </td>
+                        <td className="p-4 text-muted-foreground hidden md:table-cell">{`${patient.cidade} / ${patient.estado}`}</td>
+                        <td className="p-4 text-muted-foreground hidden sm:table-cell">
+                          {patient.convenio}
+                        </td>
+                        <td className="p-4 text-muted-foreground hidden lg:table-cell">
+                          {patient.ultimoAtendimento}
+                        </td>
+                        <td className="p-4 text-muted-foreground hidden lg:table-cell">
+                          {patient.proximoAtendimento}
+                        </td>
+
+                        <td className="p-4">
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button variant="ghost" className="h-8 w-8 p-0">
+                                <span className="sr-only">Abrir menu</span>
+                                <MoreVertical className="h-4 w-4" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                              <DropdownMenuItem
+                                onClick={() =>
+                                  openDetailsDialog(String(patient.id))
+                                }
+                              >
+                                <Eye className="w-4 h-4 mr-2" />
+                                Ver detalhes
+                              </DropdownMenuItem>
+
+                              <DropdownMenuItem asChild>
+                                <Link
+                                  href={`/secretary/pacientes/${patient.id}/editar`}
+                                  className="flex items-center w-full"
+                                >
+                                  <Edit className="w-4 h-4 mr-2" />
+                                  Editar
+                                </Link>
+                              </DropdownMenuItem>
+
+                              <DropdownMenuItem>
+                                <Calendar className="w-4 h-4 mr-2" />
+                                Marcar consulta
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                className="text-destructive"
+                                onClick={() =>
+                                  openDeleteDialog(String(patient.id))
+                                }
+                              >
+                                <Trash2 className="w-4 h-4 mr-2" />
+                                Excluir
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </td>
+                      </tr>
+                    ))
+                  )}
+                </tbody>
+              </table>
+            )}
+          </div>
+        </div>
+
+        {/* --- SEÇÃO DE CARDS (VISÍVEL APENAS EM TELAS MENORES QUE MD) --- */}
+        {/* Garantir que os cards apareçam em telas menores e se escondam em MD+ */}
+        <div className="bg-card rounded-lg border shadow-md p-4 block md:hidden">
+          {error ? (
+            <div className="p-6 text-destructive">{`Erro ao carregar pacientes: ${error}`}</div>
+          ) : loading ? (
+            <div className="p-6 text-center text-muted-foreground flex items-center justify-center">
+              <Loader2 className="w-6 h-6 mr-2 animate-spin text-primary" />{" "}
+              Carregando pacientes...
+            </div>
+          ) : filteredPatients.length === 0 ? (
+            <div className="p-8 text-center text-muted-foreground">
+              {allPatients.length === 0
+                ? "Nenhum paciente cadastrado"
+                : "Nenhum paciente encontrado com os filtros aplicados"}
+            </div>
+          ) : (
+            <div className="space-y-4">
+              {currentPatients.map((patient) => (
+                <div
+                  key={patient.id}
+                  className="bg-muted rounded-lg p-4 flex flex-col sm:flex-row justify-between items-start sm:items-center border"
+                >
+                  <div className="flex-grow mb-2 sm:mb-0">
+                    <div className="font-semibold text-lg flex items-center">
+                      {patient.nome}
+                      {patient.vip && (
+                        <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-500 bg-purple-500/10 rounded-full">
+                          VIP
+                        </span>
+                      )}
+                    </div>
+                    <div className="text-sm text-muted-foreground">
+                      Telefone: {patient.telefone}
+                    </div>
+                    <div className="text-sm text-muted-foreground">
+                      Convênio: {patient.convenio}
+                    </div>
+                  </div>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <div className="w-full">
+                        <Button variant="outline" className="w-full">
+                          Ações
+                        </Button>
+                      </div>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem
+                        onClick={() => openDetailsDialog(String(patient.id))}
+                      >
+                        <Eye className="w-4 h-4 mr-2" />
+                        Ver detalhes
+                      </DropdownMenuItem>
+
+                      <DropdownMenuItem asChild>
+                        <Link href={`/secretary/pacientes/${patient.id}/editar`} className="flex items-center w-full">
+                          <Edit className="w-4 h-4 mr-2" />
+                          Editar
+                        </Link>
+                      </DropdownMenuItem>
+
+                      <DropdownMenuItem>
+                        <Calendar className="w-4 h-4 mr-2" />
+                        Marcar consulta
+                      </DropdownMenuItem>
+                      <DropdownMenuItem className="text-destructive" onClick={() => openDeleteDialog(String(patient.id))}>
+                        <Trash2 className="w-4 h-4 mr-2" />
+                        Excluir
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Paginação */}
+        {totalPages > 1 && !loading && (
+          <div className="flex flex-col sm:flex-row items-center justify-center p-4 border-t">
+            <div className="flex space-x-2 flex-wrap justify-center"> {/* Adicionado flex-wrap e justify-center para botões da paginação */}
+              <Button
+                onClick={() => setPage((prev) => Math.max(1, prev - 1))}
+                disabled={page === 1}
+                variant="outline"
+                size="lg"
+              >
+                &lt; Anterior
+              </Button>
+
+              {Array.from({ length: totalPages }, (_, index) => index + 1)
+                .slice(Math.max(0, page - 3), Math.min(totalPages, page + 2))
+                .map((pageNumber) => (
+                  <Button
+                    key={pageNumber}
+                    onClick={() => setPage(pageNumber)}
+                    variant={pageNumber === page ? "default" : "outline"}
+                    size="lg"
+                    className={pageNumber === page ? "bg-primary hover:bg-primary/90 text-primary-foreground" : "text-muted-foreground"}
+                  >
+                    {pageNumber}
+                  </Button>
+                ))}
+
+              <Button
+                onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
+                disabled={page === totalPages}
+                variant="outline"
+                size="lg"
+              >
+                Próximo &gt;
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* AlertDialogs (Permanecem os mesmos) */}
+        <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-destructive hover:bg-destructive/90">
+                Excluir
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+
+        <AlertDialog
+          open={detailsDialogOpen}
+          onOpenChange={setDetailsDialogOpen}
+        >
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>
+              <AlertDialogDescription>
+                {patientDetails === null ? (
+                  <div className="text-muted-foreground">
+                    <Loader2 className="w-6 h-6 animate-spin mx-auto text-primary my-4" />
+                    Carregando...
+                  </div>
+                ) : patientDetails?.error ? (
+                  <div className="text-destructive p-4">{patientDetails.error}</div>
+                ) : (
+                  <div className="grid gap-4 py-4">
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                      <div>
+                        <p className="font-semibold">Nome Completo</p>
+                        <p>{patientDetails.full_name}</p>
+                      </div>
+                      <div>
+                        <p className="font-semibold">Email</p>
+                        <p>{patientDetails.email}</p>
+                      </div>
+                      <div>
+                        <p className="font-semibold">Telefone</p>
+                        <p>{patientDetails.phone_mobile}</p>
+                      </div>
+                      <div>
+                        <p className="font-semibold">Data de Nascimento</p>
+                        <p>{patientDetails.birth_date}</p>
+                      </div>
+                      <div>
+                        <p className="font-semibold">CPF</p>
+                        <p>{patientDetails.cpf}</p>
+                      </div>
+                      <div>
+                        <p className="font-semibold">Tipo Sanguíneo</p>
+                        <p>{patientDetails.blood_type}</p>
+                      </div>
+                      <div>
+                        <p className="font-semibold">Peso (kg)</p>
+                        <p>{patientDetails.weight_kg}</p>
+                      </div>
+                      <div>
+                        <p className="font-semibold">Altura (m)</p>
+                        <p>{patientDetails.height_m}</p>
+                      </div>
+                    </div>
+                    <div className="border-t pt-4 mt-4">
+                      <h3 className="font-semibold mb-2">Endereço</h3>
+                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                        <div>
+                          <p className="font-semibold">Rua</p>
+                          <p>{`${patientDetails.street}, ${patientDetails.number}`}</p>
+                        </div>
+                        <div>
+                          <p className="font-semibold">Complemento</p>
+                          <p>{patientDetails.complement}</p>
+                        </div>
+                        <div>
+                          <p className="font-semibold">Bairro</p>
+                          <p>{patientDetails.neighborhood}</p>
+                        </div>
+                        <div>
+                          <p className="font-semibold">Cidade</p>
+                          <p>{patientDetails.cidade}</p>
+                        </div>
+                        <div>
+                          <p className="font-semibold">Estado</p>
+                          <p>{patientDetails.estado}</p>
+                        </div>
+                        <div>
+                          <p className="font-semibold">CEP</p>
+                          <p>{patientDetails.cep}</p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Fechar</AlertDialogCancel>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+    </Sidebar>
+  );
+}

app/secretary/schedule/page.tsx

@@ -0,0 +1,11 @@
+import Sidebar from "@/components/Sidebar";
+import ScheduleForm from "@/components/schedule/schedule-form";
+
+export default function SecretaryAppointments() {
+  return (
+    <Sidebar>
+      <ScheduleForm />
+    </Sidebar>
+  );
+}
+

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

components/LoginForm.tsx

@@ -0,0 +1,230 @@
+// ARQUIVO COMPLETO E CORRIGIDO PARA: components/LoginForm.tsx
+
+"use client";
+
+import type React from "react";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { login, api } from "@/services/api.mjs";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent } from "@/components/ui/card";
+import { useToast } from "@/hooks/use-toast";
+import { Eye, EyeOff, Mail, Lock, Loader2 } from "lucide-react";
+import { usersService } from "@/services/usersApi.mjs";
+
+interface LoginFormProps {
+  children?: React.ReactNode;
+}
+
+interface FormState {
+  email: string;
+  password: string;
+}
+
+export function LoginForm({ children }: LoginFormProps) {
+  const [form, setForm] = useState<FormState>({ email: "", password: "" });
+  const [showPassword, setShowPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const router = useRouter();
+  const { toast } = useToast();
+
+  const [userRoles, setUserRoles] = useState<string[]>([]);
+  const [authenticatedUser, setAuthenticatedUser] = useState<any>(null);
+
+  /**
+   * --- NOVA FUNÇÃO ---
+   * Finaliza o login com o perfil de dashboard escolhido e redireciona.
+   */
+  const handleRoleSelection = (selectedDashboardRole: string, user: any) => {
+    if (!user) {
+      toast({
+        title: "Erro de Sessão",
+        description:
+          "Não foi possível encontrar os dados do usuário. Tente novamente.",
+        variant: "destructive",
+      });
+      setUserRoles([]);
+      return;
+    }
+
+    const roleInLowerCase = selectedDashboardRole.toLowerCase();
+    console.log("Salvando no localStorage com o perfil:", roleInLowerCase);
+
+    const completeUserInfo = {
+      ...user,
+      user_metadata: { ...user.user_metadata, role: roleInLowerCase },
+    };
+    localStorage.setItem("user_info", JSON.stringify(completeUserInfo));
+
+    let redirectPath = "";
+    switch (selectedDashboardRole) {
+      case "gestor":
+        redirectPath = "/manager/dashboard";
+        break;
+      case "admin":
+        redirectPath = "/manager/dashboard";
+        break;
+      case "medico":
+        redirectPath = "/doctor/dashboard";
+        break;
+      case "secretaria":
+        redirectPath = "/secretary/dashboard";
+        break;
+      case "paciente":
+        redirectPath = "/patient/dashboard";
+        break;
+    }
+
+    if (redirectPath) {
+      toast({ title: `Entrando como ${selectedDashboardRole}...` });
+      router.push(redirectPath);
+    } else {
+      toast({
+        title: "Erro",
+        description: "Perfil selecionado inválido.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    localStorage.removeItem("token");
+    localStorage.removeItem("user_info");
+
+    try {
+      const authData = await login(form.email, form.password);
+      const user = authData.user;
+      if (!user || !user.id) {
+        throw new Error("Resposta de autenticação inválida.");
+      }
+
+      const rolesData = await api.get(
+        `/rest/v1/user_roles?user_id=eq.${user.id}&select=role`
+      );
+
+      const me = await usersService.getMeSimple();
+      console.log(me.roles);
+
+      if (!me.roles || me.roles.length === 0) {
+        throw new Error(
+          "Nenhum perfil de acesso foi encontrado para este usuário."
+        );
+      }
+
+      handleRoleSelection(me.roles[0], user);
+    } catch (error) {
+      localStorage.removeItem("token");
+      localStorage.removeItem("user_info");
+      toast({
+        title: "Erro no Login",
+        description:
+          error instanceof Error
+            ? error.message
+            : "Ocorreu um erro inesperado.",
+        variant: "destructive",
+      });
+      setIsLoading(false);
+    }
+  };
+
+  // Estado para guardar os botões de seleção de perfil
+  const [roleSelectionUI, setRoleSelectionUI] =
+    useState<React.ReactNode | null>(null);
+
+  return (
+    <Card className="w-full bg-transparent border-0 shadow-none">
+      <CardContent className="p-0">
+        {!roleSelectionUI ? (
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="email">E-mail</Label>
+              <div className="relative">
+                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground w-5 h-5" />
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="seu.email@exemplo.com"
+                  value={form.email}
+                  onChange={(e) => setForm({ ...form, email: e.target.value })}
+                  className="pl-10 h-11 focus-visible:ring-blue-600 focus-visible:ring-2"
+                  required
+                  disabled={isLoading}
+                  autoComplete="username"
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Senha</Label>
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground w-5 h-5" />
+                <Input
+                  id="password"
+                  type={showPassword ? "text" : "password"}
+                  placeholder="Digite sua senha"
+                  value={form.password}
+                  onChange={(e) =>
+                    setForm({ ...form, password: e.target.value })
+                  }
+                  className="pl-10 pr-12 h-11 focus-visible:ring-blue-600 focus-visible:ring-2"
+                  required
+                  disabled={isLoading}
+                  autoComplete="current-password"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+                  disabled={isLoading}
+                >
+                  {showPassword ? (
+                    <EyeOff className="w-5 h-5" />
+                  ) : (
+                    <Eye className="w-5 h-5" />
+                  )}
+                </button>
+              </div>
+            </div>
+            <Button
+              type="submit"
+              className="w-full h-11 bg-blue-600 hover:bg-blue-700 text-white"
+              disabled={isLoading}
+            >
+              {isLoading ? (
+                <Loader2 className="w-5 h-5 animate-spin" />
+              ) : (
+                "Entrar"
+              )}
+            </Button>
+          </form>
+        ) : (
+          <div className="space-y-4 animate-in fade-in-50">
+            <h3 className="text-lg font-medium text-center text-foreground">
+              Você tem múltiplos perfis
+            </h3>
+            <p className="text-sm text-muted-foreground text-center">
+              Selecione com qual perfil deseja entrar:
+            </p>
+            <div className="flex flex-col space-y-3 pt-2">
+              {userRoles.map((role) => (
+                <Button
+                  key={role}
+                  variant="outline"
+                  className="h-11 text-base"
+                  onClick={() => handleRoleSelection(role, authenticatedUser)}
+                >
+                  Entrar como: {role.charAt(0).toUpperCase() + role.slice(1)}
+                </Button>
+              ))}
+            </div>
+          </div>
+        )}
+        {children}
+      </CardContent>
+    </Card>
+  );
+}

components/Sidebar.tsx

@@ -0,0 +1,403 @@
+"use client";
+
+import type React from "react";
+import { useState, useEffect } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import Link from "next/link";
+import Cookies from "js-cookie";
+import { api } from "@/services/api.mjs";
+import { usersService } from "@/services/usersApi.mjs"; // Importando usersService
+import { useAccessibility } from "@/app/context/AccessibilityContext";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+import {
+  LogOut,
+  ChevronLeft,
+  ChevronRight,
+  Home,
+  CalendarCheck2,
+  ClipboardPlus,
+  CalendarClock,
+  Users,
+  SquareUser,
+  ClipboardList,
+  Stethoscope,
+} from "lucide-react";
+
+import SidebarUserSection from "@/components/ui/userToolTip";
+
+interface UserData {
+  id: string;
+  email: string;
+  app_metadata: {
+    user_role: string;
+  };
+  user_metadata: {
+    cpf: string;
+    email_verified: boolean;
+    full_name: string;
+    phone_mobile: string;
+    role: string;
+    avatar_url?: string;
+  };
+  identities: {
+    identity_id: string;
+    id: string;
+    user_id: string;
+    provider: string;
+  }[];
+  is_anonymous: boolean;
+}
+
+interface MenuItem {
+  href: string;
+  icon: React.ElementType;
+  label: string;
+}
+
+interface SidebarProps {
+  children: React.ReactNode;
+}
+
+export default function Sidebar({ children }: SidebarProps) {
+  const [userData, setUserData] = useState<UserData>();
+  const [role, setRole] = useState<string>();
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [showLogoutDialog, setShowLogoutDialog] = useState(false);
+  const [avatarFullUrl, setAvatarFullUrl] = useState<string | undefined>(undefined);
+  const router = useRouter();
+  const pathname = usePathname();
+
+  // Função auxiliar para construir URL
+  const buildAvatarUrl = (path: string) => {
+    if (!path) return undefined;
+    const baseUrl = "https://yuanqfswhberkoevtmfr.supabase.co";
+    const cleanPath = path.startsWith('/') ? path.slice(1) : path;
+    const separator = cleanPath.includes('?') ? '&' : '?';
+    return `${baseUrl}/storage/v1/object/avatars/${cleanPath}${separator}t=${new Date().getTime()}`;
+  };
+  const { theme, contrast } = useAccessibility();
+
+  useEffect(() => {
+    const userInfoString = localStorage.getItem("user_info");
+    const token = localStorage.getItem("token");
+
+    if (userInfoString && token) {
+      try {
+        const userInfo = JSON.parse(userInfoString);
+
+        // 1. Tenta pegar o avatar do cache local
+        let rawAvatarPath = 
+          userInfo.profile?.avatar_url || 
+          userInfo.user_metadata?.avatar_url || 
+          userInfo.app_metadata?.avatar_url || 
+          "";
+
+        // Configura estado inicial com o que tem no cache
+        setUserData({
+          id: userInfo.id ?? "",
+          email: userInfo.email ?? "",
+          app_metadata: {
+            user_role: userInfo.app_metadata?.user_role ?? "patient",
+          },
+          user_metadata: {
+            cpf: userInfo.user_metadata?.cpf ?? "",
+            email_verified: userInfo.user_metadata?.email_verified ?? false,
+            full_name: userInfo.user_metadata?.full_name || userInfo.profile?.full_name || "Usuário",
+            phone_mobile: userInfo.user_metadata?.phone_mobile ?? "",
+            role: userInfo.user_metadata?.role ?? "",
+            avatar_url: rawAvatarPath,
+          },
+          identities: userInfo.identities ?? [],
+          is_anonymous: userInfo.is_anonymous ?? false,
+        });
+        
+        setRole(userInfo.user_metadata?.role);
+
+        if (rawAvatarPath) {
+          setAvatarFullUrl(buildAvatarUrl(rawAvatarPath));
+        }
+
+        // 2. AUTO-REPARO: Se não tiver avatar ou profile no cache, busca na API e atualiza
+        if (!rawAvatarPath || !userInfo.profile) {
+          console.log("[Sidebar] Cache incompleto. Buscando dados frescos...");
+          usersService.getMe().then((freshData) => {
+            if (freshData && freshData.profile) {
+              const freshAvatar = freshData.profile.avatar_url;
+              
+              // Atualiza o objeto local
+              const updatedUserInfo = {
+                ...userInfo,
+                profile: freshData.profile, // Injeta o profile completo
+                user_metadata: {
+                  ...userInfo.user_metadata,
+                  avatar_url: freshAvatar || userInfo.user_metadata.avatar_url
+                }
+              };
+
+              // Salva no localStorage para a próxima vez
+              localStorage.setItem("user_info", JSON.stringify(updatedUserInfo));
+              console.log("[Sidebar] LocalStorage sincronizado com sucesso.");
+
+              // Atualiza visualmente se achou um avatar novo
+              if (freshAvatar && freshAvatar !== rawAvatarPath) {
+                setAvatarFullUrl(buildAvatarUrl(freshAvatar));
+                // Atualiza o userData também para refletir no tooltip
+                setUserData(prev => prev ? ({
+                    ...prev,
+                    user_metadata: {
+                        ...prev.user_metadata,
+                        avatar_url: freshAvatar
+                    }
+                }) : undefined);
+              }
+            }
+          }).catch(err => console.error("[Sidebar] Falha no auto-reparo:", err));
+        }
+
+      } catch (e) {
+        console.error("Erro ao processar dados do usuário na Sidebar:", e);
+      }
+
+    } else {
+      router.push("/login");
+    }
+  }, [router]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 1024) {
+        setSidebarCollapsed(true);
+      } else {
+        setSidebarCollapsed(false);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const handleLogout = () => setShowLogoutDialog(true);
+
+  const confirmLogout = async () => {
+    try {
+      await api.logout();
+    } catch (error) {
+      console.error("Erro ao fazer logout", error);
+    } finally {
+      localStorage.removeItem("user_info");
+      localStorage.removeItem("token");
+      Cookies.remove("access_token");
+
+      setShowLogoutDialog(false);
+      router.push("/");
+    }
+  };
+
+  const cancelLogout = () => setShowLogoutDialog(false);
+
+  const SetMenuItems = (role: any) => {
+    const patientItems: MenuItem[] = [
+      { href: "/patient/dashboard", icon: Home, label: "Dashboard" },
+      {
+        href: "/patient/schedule",
+        icon: CalendarClock,
+        label: "Agendar Consulta",
+      },
+      {
+        href: "/patient/appointments",
+        icon: CalendarCheck2,
+        label: "Minhas Consultas",
+      },
+      { href: "/patient/reports", icon: ClipboardPlus, label: "Meus Laudos" },
+      { href: "/patient/profile", icon: SquareUser, label: "Meus Dados" },
+    ];
+
+    const doctorItems: MenuItem[] = [
+      { href: "/doctor/dashboard", icon: Home, label: "Dashboard" },
+      { href: "/doctor/medicos", icon: Users, label: "Gestão de Pacientes" },
+      { href: "/doctor/consultas", icon: CalendarCheck2, label: "Consultas" },
+      {
+        href: "/doctor/disponibilidade",
+        icon: ClipboardList,
+        label: "Disponibilidade",
+      },
+    ];
+
+    const secretaryItems: MenuItem[] = [
+      { href: "/secretary/dashboard", icon: Home, label: "Dashboard" },
+      {
+        href: "/secretary/appointments",
+        icon: CalendarCheck2,
+        label: "Consultas",
+      },
+      {
+        href: "/secretary/schedule",
+        icon: CalendarClock,
+        label: "Agendar Consulta",
+      },
+      {
+        href: "/secretary/pacientes",
+        icon: Users,
+        label: "Gestão de Pacientes",
+      },
+    ];
+
+    const managerItems: MenuItem[] = [
+      { href: "/manager/dashboard", icon: Home, label: "Dashboard" },
+      { href: "/manager/usuario", icon: Users, label: "Gestão de Usuários" },
+      { href: "/manager/home", icon: Stethoscope, label: "Gestão de Médicos" },
+      { href: "/manager/pacientes", icon: Users, label: "Gestão de Pacientes" },
+      { href: "/secretary/appointments", icon: CalendarCheck2, label: "Consultas" },
+      { href: "/manager/disponibilidade", icon: ClipboardList, label: "Disponibilidade" },
+    ];
+
+    switch (role) {
+      case "gestor":
+      case "admin":
+        return managerItems;
+      case "medico":
+        return doctorItems;
+      case "secretaria":
+        return secretaryItems;
+      case "paciente":
+      default:
+        return patientItems;
+    }
+  };
+
+  const menuItems = SetMenuItems(role);
+  const isDefaultMode = theme === "light" && contrast === "normal";
+
+  if (!userData) {
+    return (
+      <div className="flex h-screen w-full items-center justify-center">
+        Carregando...
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-background flex">
+      <div
+        className={`fixed top-0 h-screen flex flex-col z-30 transition-all duration-300
+                ${sidebarCollapsed ? "w-16" : "w-64"}
+                ${isDefaultMode ? "bg-[#123965] text-white" : "bg-sidebar text-sidebar-foreground"}`}
+      >
+        {/* TOPO */}
+        <div className={`p-4 border-b ${isDefaultMode ? "border-white/10" : "border-sidebar-border"} flex items-center justify-between`}>
+          {!sidebarCollapsed && (
+            <div className="flex items-center gap-2">
+              <div className="bg-background p-1 rounded-lg">
+                <img
+                  src="/Logo MedConnect.png"
+                  alt="Logo MedConnect"
+                  className="w-12 h-12 object-contain"
+                />
+              </div>
+
+              <span className="font-semibold text-lg">
+                MedConnect
+              </span>
+            </div>
+          )}
+
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+            className={`p-1 ${isDefaultMode ? "text-white hover:bg-white/10" : "hover:bg-sidebar-accent"} cursor-pointer`}
+          >
+            {sidebarCollapsed ? (
+              <ChevronRight className="w-5 h-5" />
+            ) : (
+              <ChevronLeft className="w-5 h-5" />
+            )}
+          </Button>
+        </div>
+
+        {/* MENU */}
+        <nav className="flex-1 px-3 py-6 overflow-y-auto flex flex-col gap-2">
+          {menuItems.map((item) => {
+            const Icon = item.icon;
+            const isActive = pathname === item.href;
+
+            return (
+              <Link key={item.label} href={item.href}>
+                <div
+                  className={`
+                        flex items-center gap-3 px-3 py-2 rounded-lg transition-colors
+                        ${
+                          isActive
+                            ? `${isDefaultMode ? "bg-white/20 text-white font-semibold" : "bg-sidebar-primary text-sidebar-primary-foreground font-semibold"}`
+                            : `${isDefaultMode ? "text-white/80 hover:bg-white/10 hover:text-white" : "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"}`
+                        }
+                    `}
+                >
+                  <Icon className="w-5 h-5 flex-shrink-0" />
+                  {!sidebarCollapsed && (
+                    <span className="font-medium">{item.label}</span>
+                  )}
+                </div>
+              </Link>
+            );
+          })}
+        </nav>
+
+        {/* PERFIL ORIGINAL + NOME BRANCO - CORREÇÃO DE ALINHAMENTO AQUI */}
+        <div 
+          className={`
+            mt-auto p-3 border-t 
+            ${isDefaultMode ? "border-white/10" : "border-sidebar-border"}
+            flex flex-col
+            ${sidebarCollapsed ? "items-center justify-center" : "items-stretch"}
+          `}
+        >
+          <SidebarUserSection
+            userData={userData}
+            sidebarCollapsed={sidebarCollapsed}
+            handleLogout={handleLogout}
+            isActive={role !== "paciente"}
+            avatarUrl={avatarFullUrl}
+          />
+        </div>
+      </div>
+      <div
+        className={`flex-1 flex flex-col transition-all duration-300 ${
+          sidebarCollapsed ? "ml-16" : "ml-64"
+        }`}
+      >
+        <main className="flex-1 p-4 md:p-6">{children}</main>
+        <Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader>
+              <DialogTitle>Confirmar Saída</DialogTitle>
+              <DialogDescription>
+                Deseja realmente sair do sistema? Você precisará fazer login
+                novamente.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter className="flex gap-2">
+              <Button variant="outline" onClick={cancelLogout}>
+                Cancelar
+              </Button>
+              <Button variant="destructive" onClick={confirmLogout}>
+                <LogOut className="mr-2 h-4 w-4" />
+                Sair
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  );
+}

components/accessibility-modal.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { useAccessibility } from "@/app/context/AccessibilityContext";
+import { Sun, Moon, Contrast, Accessibility } from "lucide-react";
+
+export function AccessibilityModal() {
+  const {
+    theme,
+    setTheme,
+    contrast,
+    setContrast,
+    increaseFontSize,
+    decreaseFontSize,
+    resetFontSize,
+  } = useAccessibility();
+
+  const toggleTheme = () => {
+    setTheme(theme === "light" ? "dark" : "light");
+  };
+
+  const toggleContrast = () => {
+    setContrast(contrast === "normal" ? "high" : "normal");
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="icon" className="fixed bottom-4 right-4 z-50 rounded-full h-14 w-14">
+          <Accessibility className="h-6 w-6" />
+          <span className="sr-only">Abrir configurações de acessibilidade</span>
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Configurações de Acessibilidade</DialogTitle>
+          <DialogDescription>
+            Ajuste a aparência do site para a sua preferência. Suas
+            configurações serão salvas para a próxima visita.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-6 py-4">
+          <div className="flex items-center justify-between">
+            <Label htmlFor="dark-mode" className="flex items-center gap-2">
+              {theme === "light" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+              <span>Modo Escuro</span>
+            </Label>
+            <Switch
+              id="dark-mode"
+              checked={theme === "dark"}
+              onCheckedChange={toggleTheme}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <Label htmlFor="high-contrast" className="flex items-center gap-2">
+              <Contrast className="h-5 w-5" />
+              <span>Alto Contraste</span>
+            </Label>
+            <Switch
+              id="high-contrast"
+              checked={contrast === "high"}
+              onCheckedChange={toggleContrast}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <Label className="flex items-center gap-2">
+                <span className="text-base">Tamanho da Fonte</span>
+            </Label>
+            <div className="flex items-center gap-2">
+              <Button variant="outline" size="sm" onClick={decreaseFontSize} aria-label="Diminuir tamanho da fonte">
+                A-
+              </Button>
+              <Button variant="outline" size="sm" onClick={resetFontSize} aria-label="Resetar tamanho da fonte">
+                A
+              </Button>
+              <Button variant="outline" size="sm" onClick={increaseFontSize} aria-label="Aumentar tamanho da fonte">
+                A+
+              </Button>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

components/schedule/schedule-form.tsx

@@ -0,0 +1,618 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { usersService } from "@/services/usersApi.mjs";
+import { patientsService } from "@/services/patientsApi.mjs";
+import { doctorsService } from "@/services/doctorsApi.mjs";
+import { appointmentsService } from "@/services/appointmentsApi.mjs";
+import { AvailabilityService } from "@/services/availabilityApi.mjs";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { Calendar as CalendarShadcn } from "@/components/ui/calendar";
+import { format, addDays } from "date-fns";
+import { User, StickyNote, CalendarDays, Stethoscope, Check, ChevronsUpDown } from "lucide-react";
+import { smsService } from "@/services/Sms.mjs";
+import { toast } from "@/hooks/use-toast";
+import { cn } from "@/lib/utils";
+
+// --- Importações do Combobox ---
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+export default function ScheduleForm() {
+  // --- ESTADOS ---
+  const [role, setRole] = useState<string>("paciente");
+  const [userId, setUserId] = useState<string | null>(null);
+
+  // Estados de Paciente
+  const [patients, setPatients] = useState<any[]>([]);
+  const [selectedPatient, setSelectedPatient] = useState("");
+  const [openPatientCombobox, setOpenPatientCombobox] = useState(false);
+
+  // Estados de Médico
+  const [doctors, setDoctors] = useState<any[]>([]);
+  const [selectedDoctor, setSelectedDoctor] = useState("");
+  const [openDoctorCombobox, setOpenDoctorCombobox] = useState(false);
+
+  // Estados de Agendamento
+  const [selectedDate, setSelectedDate] = useState("");
+  const [selectedTime, setSelectedTime] = useState("");
+  const [notes, setNotes] = useState("");
+  const [availableTimes, setAvailableTimes] = useState<string[]>([]);
+  const [loadingDoctors, setLoadingDoctors] = useState(true);
+  const [loadingSlots, setLoadingSlots] = useState(false);
+
+  // Configurações
+  const [tipoConsulta] = useState("presencial");
+  const [duracao] = useState("30");
+  const [disponibilidades, setDisponibilidades] = useState<any[]>([]);
+  const [availabilityCounts, setAvailabilityCounts] = useState<Record<string, number>>({});
+  const [tooltip, setTooltip] = useState<{ x: number; y: number; text: string } | null>(null);
+  
+  const calendarRef = useRef<HTMLDivElement | null>(null);
+
+  // --- HELPER FUNCTIONS ---
+  const getWeekdayNumber = (weekday: string) =>
+    ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"].indexOf(weekday.toLowerCase()) + 1;
+
+  const getBrazilDate = (date: Date) =>
+    new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), 12, 0, 0));
+
+  // --- EFFECTS ---
+  useEffect(() => {
+    (async () => {
+      try {
+        const me = await usersService.getMe();
+        const currentRole = me?.roles?.[0] || "paciente";
+        setRole(currentRole);
+        setUserId(me?.user?.id || null);
+
+        if (["secretaria", "gestor", "admin"].includes(currentRole)) {
+          const pats = await patientsService.list();
+          setPatients(pats || []);
+        }
+      } catch (err) {
+        console.error("Erro ao carregar usuário:", err);
+      }
+    })();
+  }, []);
+
+  const fetchDoctors = useCallback(async () => {
+    setLoadingDoctors(true);
+    try {
+      const data = await doctorsService.list();
+      setDoctors(data || []);
+    } catch (err) {
+      console.error("Erro ao buscar médicos:", err);
+      toast({ title: "Erro", description: "Não foi possível carregar médicos." });
+    } finally {
+      setLoadingDoctors(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchDoctors();
+  }, [fetchDoctors]);
+
+  const loadDoctorDisponibilidades = useCallback(async (doctorId?: string) => {
+    if (!doctorId) return;
+    try {
+      const disp = await AvailabilityService.listById(doctorId);
+      setDisponibilidades(disp || []);
+      await computeAvailabilityCountsPreview(doctorId, disp || []);
+    } catch (err) {
+      console.error("Erro ao buscar disponibilidades:", err);
+      setDisponibilidades([]);
+    }
+  }, []);
+
+  const computeAvailabilityCountsPreview = async (doctorId: string, dispList: any[]) => {
+    try {
+      const today = new Date();
+      const start = format(today, "yyyy-MM-dd");
+      const endDate = addDays(today, 90);
+      const end = format(endDate, "yyyy-MM-dd");
+
+      const appointments = await appointmentsService.search_appointment(
+        `doctor_id=eq.${doctorId}&scheduled_at=gte.${start}T00:00:00Z&scheduled_at=lt.${end}T23:59:59Z`
+      );
+
+      const apptsByDate: Record<string, number> = {};
+      (appointments || []).forEach((a: any) => {
+        const d = String(a.scheduled_at).split("T")[0];
+        apptsByDate[d] = (apptsByDate[d] || 0) + 1;
+      });
+
+      const counts: Record<string, number> = {};
+      for (let i = 0; i <= 90; i++) {
+        const d = addDays(today, i);
+        const key = format(d, "yyyy-MM-dd");
+        const dayOfWeek = d.getDay() === 0 ? 7 : d.getDay();
+        const dailyDisp = dispList.filter((p) => getWeekdayNumber(p.weekday) === dayOfWeek);
+        if (dailyDisp.length === 0) {
+          counts[key] = 0;
+          continue;
+        }
+        let possible = 0;
+        dailyDisp.forEach((p) => {
+          const [sh, sm] = p.start_time.split(":").map(Number);
+          const [eh, em] = p.end_time.split(":").map(Number);
+          const startMin = sh * 60 + sm;
+          const endMin = eh * 60 + em;
+          const slot = p.slot_minutes || 30;
+          if (endMin >= startMin) possible += Math.floor((endMin - startMin) / slot) + 1;
+        });
+        const occupied = apptsByDate[key] || 0;
+        counts[key] = Math.max(0, possible - occupied);
+      }
+      setAvailabilityCounts(counts);
+    } catch (err) {
+      console.error("Erro ao calcular contagens:", err);
+      setAvailabilityCounts({});
+    }
+  };
+
+  useEffect(() => {
+    if (selectedDoctor) {
+      loadDoctorDisponibilidades(selectedDoctor);
+    } else {
+      setDisponibilidades([]);
+      setAvailabilityCounts({});
+    }
+    setSelectedDate("");
+    setSelectedTime("");
+    setAvailableTimes([]);
+  }, [selectedDoctor, loadDoctorDisponibilidades]);
+
+  const fetchAvailableSlots = useCallback(async (doctorId: string, date: string) => {
+    if (!doctorId || !date) return;
+    setLoadingSlots(true);
+    setAvailableTimes([]);
+    try {
+      const disponibilidades = await AvailabilityService.listById(doctorId);
+      const consultas = await appointmentsService.search_appointment(
+        `doctor_id=eq.${doctorId}&scheduled_at=gte.${date}T00:00:00Z&scheduled_at=lt.${date}T23:59:59Z`
+      );
+      const diaJS = new Date(date).getDay();
+      const diaAPI = diaJS === 0 ? 7 : diaJS;
+      const disponibilidadeDia = disponibilidades.find((d: any) => getWeekdayNumber(d.weekday) === diaAPI);
+      if (!disponibilidadeDia) {
+        toast({ title: "Nenhuma disponibilidade", description: "Nenhum horário para este dia." });
+        return setAvailableTimes([]);
+      }
+      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 * 60000);
+      }
+      const ocupados = (consultas || []).map((c: any) => String(c.scheduled_at).split("T")[1]?.slice(0, 5));
+      const livres = horariosGerados.filter((h) => !ocupados.includes(h));
+      setAvailableTimes(livres);
+    } catch (err) {
+      console.error(err);
+      toast({ title: "Erro", description: "Falha ao carregar horários." });
+    } finally {
+      setLoadingSlots(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (selectedDoctor && selectedDate) fetchAvailableSlots(selectedDoctor, selectedDate);
+  }, [selectedDoctor, selectedDate, fetchAvailableSlots]);
+
+  // --- SUBMIT ---
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const isSecretaryLike = ["secretaria", "admin", "gestor"].includes(role);
+    const patientId = isSecretaryLike ? selectedPatient : userId;
+
+    if (!patientId || !selectedDoctor || !selectedDate || !selectedTime) {
+      toast({ title: "Campos obrigatórios", description: "Preencha todos os campos." });
+      return;
+    }
+
+    try {
+      const body = {
+        doctor_id: selectedDoctor,
+        patient_id: patientId,
+        scheduled_at: `${selectedDate}T${selectedTime}:00`,
+        duration_minutes: Number(duracao),
+        notes,
+        appointment_type: tipoConsulta,
+      };
+
+      await appointmentsService.create(body);
+      const dateFormatted = selectedDate.split("-").reverse().join("/");
+
+      toast({
+        title: "Consulta agendada!",
+        description: `Consulta marcada para ${dateFormatted} às ${selectedTime}.`,
+      });
+
+      setSelectedDoctor("");
+      setSelectedDate("");
+      setSelectedTime("");
+      setNotes("");
+      setSelectedPatient("");
+    } catch (err) {
+      console.error("❌ Erro ao agendar consulta:", err);
+      toast({ title: "Erro", description: "Falha ao agendar consulta." });
+    }
+  };
+
+  // --- TOOLTIP ---
+  useEffect(() => {
+    const cont = calendarRef.current;
+    if (!cont) return;
+    const onMove = (ev: MouseEvent) => {
+      const target = ev.target as HTMLElement | null;
+      const btn = target?.closest("button");
+      if (!btn) return setTooltip(null);
+      const aria = btn.getAttribute("aria-label") || btn.textContent || "";
+      const parsed = new Date(aria);
+      if (isNaN(parsed.getTime())) return setTooltip(null);
+      const key = format(getBrazilDate(parsed), "yyyy-MM-dd");
+      const count = availabilityCounts[key] ?? 0;
+      setTooltip({
+        x: ev.pageX + 10,
+        y: ev.pageY + 10,
+        text: `${count} horário${count !== 1 ? "s" : ""} disponíveis`,
+      });
+    };
+    const onLeave = () => setTooltip(null);
+    cont.addEventListener("mousemove", onMove);
+    cont.addEventListener("mouseleave", onLeave);
+    return () => {
+      cont.removeEventListener("mousemove", onMove);
+      cont.removeEventListener("mouseleave", onLeave);
+    };
+  }, [availabilityCounts]);
+
+  return (
+    <div className="w-full min-h-screen p-4 md:p-6 lg:p-8">
+      <div className="max-w-7xl mx-auto space-y-6">
+        <div className="space-y-1">
+          <h1 className="text-2xl md:text-3xl font-bold text-foreground">
+            Agendar Consulta
+          </h1>
+          <p className="text-muted-foreground text-sm md:text-base">
+            Preencha os dados abaixo para marcar seu horário.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 xl:grid-cols-[1fr_350px] gap-6">
+          
+          {/* == ESQUERDA == */}
+          <div className="space-y-6">
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
+              
+              {/* BLOCO 1: SELEÇÃO */}
+              <Card className="h-full border shadow-sm">
+                <CardHeader className="pb-3 border-b bg-muted/20">
+                    <CardTitle className="text-base flex items-center gap-2">
+                        <Stethoscope className="w-4 h-4 text-primary" />
+                        Dados da Consulta
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-5 pt-5">
+                  
+                  {/* COMBOBOX DE PACIENTE */}
+                  {["secretaria", "gestor", "admin"].includes(role) && (
+                    <div className="space-y-2">
+                      <Label className="text-sm font-medium">Selecione o Paciente</Label>
+                      
+                      <Popover open={openPatientCombobox} onOpenChange={setOpenPatientCombobox}>
+                        <PopoverTrigger asChild>
+                          <Button
+                            variant="outline"
+                            role="combobox"
+                            aria-expanded={openPatientCombobox}
+                            className="w-full justify-between"
+                          >
+                            {selectedPatient
+                              ? patients.find((p) => p.id === selectedPatient)?.full_name
+                              : "Buscar paciente..."}
+                            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                          </Button>
+                        </PopoverTrigger>
+                        
+                        {/* AQUI: align="start" e w igual ao trigger garantem que não invada a lateral */}
+                        <PopoverContent 
+                          className="w-[--radix-popover-trigger-width] min-w-0 p-0" 
+                          align="start"
+                          side="bottom"
+                        >
+                          <Command>
+                            <CommandInput placeholder="Procurar paciente..." />
+                            
+                            {/* AQUI: max-h-[130px] no mobile deixa a lista bem compacta */}
+                            <CommandList className="max-h-[130px] md:max-h-[300px] overflow-y-auto">
+                              <CommandEmpty>Nenhum paciente encontrado.</CommandEmpty>
+                              <CommandGroup>
+                                {patients.map((p) => (
+                                  <CommandItem
+                                    key={p.id}
+                                    value={p.full_name}
+                                    onSelect={() => {
+                                      setSelectedPatient(p.id === selectedPatient ? "" : p.id);
+                                      setOpenPatientCombobox(false);
+                                    }}
+                                    className="text-xs md:text-sm py-1.5 md:py-2"
+                                  >
+                                    <Check
+                                      className={cn(
+                                        "mr-2 h-3 w-3 md:h-4 md:w-4",
+                                        selectedPatient === p.id ? "opacity-100" : "opacity-0"
+                                      )}
+                                    />
+                                    <span className="truncate">{p.full_name}</span>
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+                  )}
+
+                  {/* COMBOBOX DE MÉDICO */}
+                  <div className="space-y-2">
+                    <Label className="text-sm font-medium">Selecione o Médico</Label>
+                    
+                    <Popover open={openDoctorCombobox} onOpenChange={setOpenDoctorCombobox}>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant="outline"
+                          role="combobox"
+                          aria-expanded={openDoctorCombobox}
+                          className="w-full justify-between"
+                          disabled={loadingDoctors}
+                        >
+                          {loadingDoctors ? "Carregando..." : (
+                            selectedDoctor
+                            ? doctors.find((doctor) => doctor.id === selectedDoctor)?.full_name
+                            : "Buscar médico..."
+                          )}
+                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                        </Button>
+                      </PopoverTrigger>
+
+                      {/* AQUI: Configurações de largura e posicionamento corrigidos */}
+                      <PopoverContent 
+                        className="w-[--radix-popover-trigger-width] min-w-0 p-0" 
+                        align="start"
+                        side="bottom"
+                      >
+                        <Command>
+                          <CommandInput placeholder="Procurar médico..." />
+                          
+                          {/* AQUI: Altura reduzida no mobile */}
+                          <CommandList className="max-h-[130px] md:max-h-[300px] overflow-y-auto">
+                            <CommandEmpty>Nenhum médico encontrado.</CommandEmpty>
+                            <CommandGroup>
+                              {doctors.map((doctor) => (
+                                <CommandItem
+                                  key={doctor.id}
+                                  value={doctor.full_name}
+                                  onSelect={() => {
+                                    setSelectedDoctor(doctor.id === selectedDoctor ? "" : doctor.id);
+                                    setOpenDoctorCombobox(false);
+                                  }}
+                                  className="text-xs md:text-sm py-1.5 md:py-2"
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-3 w-3 md:h-4 md:w-4",
+                                      selectedDoctor === doctor.id ? "opacity-100" : "opacity-0"
+                                    )}
+                                  />
+                                  <div className="flex flex-col truncate">
+                                    <span className="truncate font-medium">{doctor.full_name}</span>
+                                    <span className="text-[10px] md:text-xs text-muted-foreground truncate">{doctor.specialty}</span>
+                                  </div>
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
+
+                    <p className="text-xs text-muted-foreground mt-1">
+                        Digite para filtrar por nome.
+                    </p>
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* BLOCO 2: CALENDÁRIO */}
+              <Card className="h-full border shadow-sm flex flex-col">
+                <CardHeader className="pb-3 border-b bg-muted/20">
+                    <CardTitle className="text-base flex items-center gap-2">
+                        <CalendarDays className="w-4 h-4 text-primary" />
+                        Data Disponível
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="flex-1 flex items-center justify-center pt-4 pb-4">
+                  <div ref={calendarRef} className="flex justify-center w-full overflow-x-auto">
+                    <CalendarShadcn
+                      mode="single"
+                      disabled={!selectedDoctor}
+                      selected={selectedDate ? new Date(selectedDate + "T12:00:00") : undefined}
+                      onSelect={(date) => {
+                        if (!date) return;
+                        const formatted = format(new Date(date.getTime() + 12 * 60 * 60 * 1000), "yyyy-MM-dd");
+                        setSelectedDate(formatted);
+                      }}
+                      className="rounded-md border p-3 w-fit"
+                    />
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* BLOCO 3: OBSERVAÇÕES */}
+            <Card className="border shadow-sm">
+              <CardHeader className="pb-3 border-b bg-muted/20">
+                <CardTitle className="text-base flex items-center gap-2">
+                    <StickyNote className="w-4 h-4 text-primary" />
+                    Observações (Opcional)
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="pt-4">
+                <Textarea
+                  placeholder="Instruções especiais, sintomas ou motivos da consulta..."
+                  value={notes}
+                  onChange={(e) => setNotes(e.target.value)}
+                  rows={3}
+                  className="resize-none w-full"
+                />
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* == DIREITA == */}
+          <div className="w-full">
+            <div className="xl:sticky xl:top-6">
+                <Card className="border-2 border-primary shadow-lg h-full flex flex-col">
+                <CardHeader className="pb-4 border-b border-primary/20 bg-primary/5">
+                    <CardTitle className="text-primary flex items-center gap-2 text-lg">
+                    <User className="h-5 w-5" />
+                    Resumo da Consulta
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="pt-6 space-y-5 flex-1">
+                    
+                    <div className="grid grid-cols-2 gap-4 xl:grid-cols-1">
+                        <div className="space-y-1">
+                        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Médico</p>
+                        <p className="text-sm font-semibold text-foreground break-words">
+                            {selectedDoctor ? doctors.find((d) => d.id === selectedDoctor)?.full_name : "—"}
+                        </p>
+                        </div>
+                        <div className="space-y-1">
+                        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Data</p>
+                        <p className="text-sm font-semibold text-foreground">
+                            {selectedDate ? format(new Date(selectedDate + "T12:00:00"), "dd/MM/yyyy") : "—"}
+                        </p>
+                        </div>
+                    </div>
+
+                    <div className="space-y-2 pt-2">
+                    <Label htmlFor="time-select" className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                        Horário da Sessão
+                    </Label>
+                    <Select
+                        value={selectedTime}
+                        onValueChange={setSelectedTime}
+                        disabled={loadingSlots || availableTimes.length === 0}
+                    >
+                        <SelectTrigger id="time-select" className="bg-white w-full border-primary/30 focus:ring-primary">
+                        <SelectValue
+                            placeholder={
+                            loadingSlots ? "Carregando..." : availableTimes.length === 0 ? "Selecione uma data" : "Escolha o horário"
+                            }
+                        />
+                        </SelectTrigger>
+                        <SelectContent>
+                        {availableTimes.map((h) => (
+                            <SelectItem key={h} value={h}>{h}</SelectItem>
+                        ))}
+                        </SelectContent>
+                    </Select>
+                    </div>
+
+                    <div className="pt-4 border-t border-dashed space-y-2">
+                    <div className="flex justify-between text-sm">
+                        <span className="text-muted-foreground">Tipo:</span>
+                        <span className="font-medium capitalize">{tipoConsulta}</span>
+                    </div>
+                    <div className="flex justify-between text-sm">
+                        <span className="text-muted-foreground">Duração estimada:</span>
+                        <span className="font-medium">{duracao} min</span>
+                    </div>
+                    </div>
+
+                    <div className="pt-4 space-y-3 mt-auto">
+                    <Button
+                        type="submit"
+                        onClick={handleSubmit}
+                        className="w-full bg-primary hover:bg-primary/90 text-primary-foreground font-semibold shadow-md py-6 h-auto text-base transition-all"
+                        disabled={!selectedDoctor || !selectedDate || !selectedTime}
+                    >
+                        Confirmar Agendamento
+                    </Button>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        onClick={() => {
+                        setSelectedDoctor("");
+                        setSelectedDate("");
+                        setSelectedTime("");
+                        setNotes("");
+                        setSelectedPatient("");
+                        }}
+                        className="w-full text-muted-foreground hover:text-destructive"
+                    >
+                        Limpar Formulário
+                    </Button>
+                    </div>
+                </CardContent>
+                </Card>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      {tooltip && (
+        <div
+          style={{
+            position: "absolute",
+            left: tooltip.x,
+            top: tooltip.y,
+            zIndex: 60,
+            background: "rgba(0,0,0,0.85)",
+            color: "white",
+            padding: "6px 10px",
+            borderRadius: 6,
+            fontSize: 12,
+            fontWeight: 500,
+            pointerEvents: "none",
+          }}
+        >
+          {tooltip.text}
+        </div>
+      )}
+    </div>
+  );
+}

components/theme-initializer.tsx

@@ -0,0 +1,32 @@
+import Script from 'next/script';
+
+const themeScript = `
+(function() {
+  try {
+    const theme = localStorage.getItem('accessibility-theme') || 'light';
+    const contrast = localStorage.getItem('accessibility-contrast') || 'normal';
+    const fontSize = localStorage.getItem('accessibility-font-size') || '16';
+
+    const root = document.documentElement;
+    
+    // Clear previous theme classes
+    root.classList.remove('light', 'dark', 'high-contrast');
+    
+    // Add new theme classes
+    root.classList.add(theme);
+    if (contrast === 'high') {
+      root.classList.add('high-contrast');
+    }
+    
+    // Set font size
+    root.style.fontSize = fontSize + 'px';
+
+  } catch (e) {
+    console.error('Failed to apply theme from localStorage', e);
+  }
+})();
+`;
+
+export function ThemeInitializer() {
+  return <Script id="theme-initializer" strategy="beforeInteractive" dangerouslySetInnerHTML={{ __html: themeScript }} />;
+}

components/theme-provider.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import * as React from 'react'
+import {
+  ThemeProvider as NextThemesProvider,
+  type ThemeProviderProps,
+} from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

components/ui/WeeklyScheduleCard.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
+import { AvailabilityService } from "@/services/availabilityApi.mjs";
+import { doctorsService } from "@/services/doctorsApi.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 WeeklyScheduleProps {
+    doctorId?: string;
+}
+
+export default function WeeklyScheduleCard({ doctorId }: WeeklyScheduleProps) {
+    const [schedule, setSchedule] = useState<Record<string, { start: string; end: string }[]>>({});
+    const [loading, setLoading] = useState(true);
+
+    const weekdaysPT: Record<string, string> = {
+        sunday: "Domingo",
+        monday: "Segunda",
+        tuesday: "Terça",
+        wednesday: "Quarta",
+        thursday: "Quinta",
+        friday: "Sexta",
+        saturday: "Sábado",
+    };
+
+    const formatTime = (time?: string | null) => time?.split(":")?.slice(0, 2).join(":") ?? "";
+
+    function formatAvailability(data: Availability[]) {
+        const grouped = data.reduce((acc: any, item) => {
+            const { weekday, start_time, end_time } = item;
+
+            if (!acc[weekday]) acc[weekday] = [];
+
+            acc[weekday].push({ start: start_time, end: end_time });
+
+            return acc;
+        }, {});
+
+        return grouped;
+    }
+
+    useEffect(() => {
+        const fetchSchedule = async () => {
+            try {
+                const availabilityList = await AvailabilityService.list();
+
+                const filtered = availabilityList.filter((a: Availability) => a.doctor_id == doctorId);
+
+                const formatted = formatAvailability(filtered);
+                setSchedule(formatted);
+            } catch (err) {
+                console.error("Erro ao carregar horários:", err);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchSchedule();
+    }, []);
+
+    return (
+        <div className="space-y-4 grid md:grid-cols-7 gap-2">
+            {loading ? (
+                <p className="text-sm text-muted-foreground col-span-7 text-center">Carregando...</p>
+            ) : (
+                ["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-primary/10 rounded-lg">
+                                <p className="font-medium capitalize text-foreground">{weekdaysPT[day]}</p>
+                                <div className="text-center">
+                                    {times.length > 0 ? (
+                                        times.map((t, i) => (
+                                            <p key={i} className="text-sm text-muted-foreground">
+                                                {formatTime(t.start)} <br /> {formatTime(t.end)}
+                                            </p>
+                                        ))
+                                    ) : (
+                                        <p className="text-sm text-muted-foreground italic">Sem horário</p>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    );
+                })
+            )}
+        </div>
+    );
+}

components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDownIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('border-b last:border-b-0', className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn('pt-0 pb-4', className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

components/ui/alert-dialog.tsx

@@ -0,0 +1,157 @@
+'use client'
+
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn('text-lg font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: 'outline' }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

components/ui/aspect-ratio.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }

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>
+  );
+}

components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import * as React from 'react'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+
+import { cn } from '@/lib/utils'
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn('aspect-square size-full', className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        'bg-muted flex size-full items-center justify-center rounded-full',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'span'> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'span'
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { ChevronRight, MoreHorizontal } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn('inline-flex items-center gap-1.5', className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : 'a'
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn('hover:text-foreground transition-colors', className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('text-foreground font-normal', className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('[&>svg]:size-3.5', className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

components/ui/button.tsx

@@ -0,0 +1,57 @@
+// CÓDIGO CORRIGIDO PARA: components/ui/button.tsx
+
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        destructive: 'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+
+    return (
+      <Comp
+        data-slot="button"
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }

components/ui/calendar.tsx

@@ -0,0 +1,213 @@
+'use client'
+
+import * as React from 'react'
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from 'lucide-react'
+import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'
+
+import { cn } from '@/lib/utils'
+import { Button, buttonVariants } from '@/components/ui/button'
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = 'label',
+  buttonVariant = 'ghost',
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>['variant']
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className,
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString('default', { month: 'short' }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn('w-fit', defaultClassNames.root),
+        months: cn(
+          'flex gap-4 flex-col md:flex-row relative',
+          defaultClassNames.months,
+        ),
+        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
+        nav: cn(
+          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
+          defaultClassNames.nav,
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_previous,
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_next,
+        ),
+        month_caption: cn(
+          'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
+          defaultClassNames.month_caption,
+        ),
+        dropdowns: cn(
+          'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
+          defaultClassNames.dropdown_root,
+        ),
+        dropdown: cn(
+          'absolute bg-popover inset-0 opacity-0',
+          defaultClassNames.dropdown,
+        ),
+        caption_label: cn(
+          'select-none font-medium',
+          captionLayout === 'label'
+            ? 'text-sm'
+            : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
+          defaultClassNames.caption_label,
+        ),
+        table: 'w-full border-collapse',
+        weekdays: cn('flex', defaultClassNames.weekdays),
+        weekday: cn(
+          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
+          defaultClassNames.weekday,
+        ),
+        week: cn('flex w-full mt-2', defaultClassNames.week),
+        week_number_header: cn(
+          'select-none w-(--cell-size)',
+          defaultClassNames.week_number_header,
+        ),
+        week_number: cn(
+          'text-[0.8rem] select-none text-muted-foreground',
+          defaultClassNames.week_number,
+        ),
+        day: cn(
+          'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
+          defaultClassNames.day,
+        ),
+        range_start: cn(
+          'rounded-l-md bg-accent',
+          defaultClassNames.range_start,
+        ),
+        range_middle: cn('rounded-none', defaultClassNames.range_middle),
+        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
+        today: cn(
+          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
+          defaultClassNames.today,
+        ),
+        outside: cn(
+          'text-muted-foreground aria-selected:text-muted-foreground',
+          defaultClassNames.outside,
+        ),
+        disabled: cn(
+          'text-muted-foreground opacity-50',
+          defaultClassNames.disabled,
+        ),
+        hidden: cn('invisible', defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === 'left') {
+            return (
+              <ChevronLeftIcon className={cn('size-4', className)} {...props} />
+            )
+          }
+
+          if (orientation === 'right') {
+            return (
+              <ChevronRightIcon
+                className={cn('size-4', className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn('size-4', className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
+        defaultClassNames.day,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn('leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('px-6', className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

components/ui/carousel.tsx

@@ -0,0 +1,241 @@
+'use client'
+
+import * as React from 'react'
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from 'embla-carousel-react'
+import { ArrowLeft, ArrowRight } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: 'horizontal' | 'vertical'
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />')
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = 'horizontal',
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === 'horizontal' ? 'x' : 'y',
+    },
+    plugins,
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext],
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on('reInit', onSelect)
+    api.on('select', onSelect)
+
+    return () => {
+      api?.off('select', onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn('relative', className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({
+  className,
+  variant = 'outline',
+  size = 'icon',
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute size-8 rounded-full',
+        orientation === 'horizontal'
+          ? 'top-1/2 -left-12 -translate-y-1/2'
+          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        className,
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+function CarouselNext({
+  className,
+  variant = 'outline',
+  size = 'icon',
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute size-8 rounded-full',
+        orientation === 'horizontal'
+          ? 'top-1/2 -right-12 -translate-y-1/2'
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        className,
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}

components/ui/chart.tsx

@@ -0,0 +1,353 @@
+'use client'
+
+import * as React from 'react'
+import * as RechartsPrimitive from 'recharts'
+
+import { cn } from '@/lib/utils'
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '', dark: '.dark' } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error('useChart must be used within a <ChartContainer />')
+  }
+
+  return context
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<'div'> & {
+  config: ChartConfig
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >['children']
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color,
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join('\n')}
+}
+`,
+          )
+          .join('\n'),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = 'dot',
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<'div'> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: 'line' | 'dot' | 'dashed'
+    nameKey?: string
+    labelKey?: string
+  }) {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === 'string'
+        ? config[label as keyof typeof config]?.label || label
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn('font-medium', labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      )
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn('font-medium', labelClassName)}>{value}</div>
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== 'dot'
+
+  return (
+    <div
+      className={cn(
+        'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
+        className,
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || 'value'}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+          const indicatorColor = color || item.payload.fill || item.color
+
+          return (
+            <div
+              key={item.dataKey}
+              className={cn(
+                '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
+                indicator === 'dot' && 'items-center',
+              )}
+            >
+              {formatter && item?.value !== undefined && item.name ? (
+                formatter(item.value, item.name, item, index, item.payload)
+              ) : (
+                <>
+                  {itemConfig?.icon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    !hideIndicator && (
+                      <div
+                        className={cn(
+                          'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
+                          {
+                            'h-2.5 w-2.5': indicator === 'dot',
+                            'w-1': indicator === 'line',
+                            'w-0 border-[1.5px] border-dashed bg-transparent':
+                              indicator === 'dashed',
+                            'my-0.5': nestLabel && indicator === 'dashed',
+                          },
+                        )}
+                        style={
+                          {
+                            '--color-bg': indicatorColor,
+                            '--color-border': indicatorColor,
+                          } as React.CSSProperties
+                        }
+                      />
+                    )
+                  )}
+                  <div
+                    className={cn(
+                      'flex flex-1 justify-between leading-none',
+                      nestLabel ? 'items-end' : 'items-center',
+                    )}
+                  >
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">
+                        {itemConfig?.label || item.name}
+                      </span>
+                    </div>
+                    {item.value && (
+                      <span className="text-foreground font-mono font-medium tabular-nums">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = 'bottom',
+  nameKey,
+}: React.ComponentProps<'div'> &
+  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
+    hideIcon?: boolean
+    nameKey?: string
+  }) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center gap-4',
+        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+        className,
+      )}
+    >
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || 'value'}`
+        const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+        return (
+          <div
+            key={item.value}
+            className={cn(
+              '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3',
+            )}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== 'object' || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    'payload' in payload &&
+    typeof payload.payload === 'object' &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === 'string'
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}

components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { CheckIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

components/ui/collapsible.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

components/ui/command.tsx

@@ -0,0 +1,184 @@
+'use client'
+
+import * as React from 'react'
+import { Command as CommandPrimitive } from 'cmdk'
+import { SearchIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = 'Command Palette',
+  description = 'Search for a command to run...',
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn('overflow-hidden p-0', className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn('bg-border -mx-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

components/ui/context-menu.tsx

@@ -0,0 +1,252 @@
+'use client'
+
+import * as React from 'react'
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+  )
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        'text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

components/ui/dialog.tsx

@@ -0,0 +1,160 @@
+'use client'
+
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+// Root (não precisa de wrapper com forwardRef)
+const Dialog = DialogPrimitive.Root
+
+// Trigger
+const DialogTrigger = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>
+>(({ ...props }, ref) => (
+  <DialogPrimitive.Trigger ref={ref} data-slot="dialog-trigger" {...props} />
+))
+DialogTrigger.displayName = DialogPrimitive.Trigger.displayName ?? 'DialogTrigger'
+
+// Portal (não repassamos ref — Portal não expõe ref)
+function DialogPortal({
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>) {
+  return (
+    <DialogPrimitive.Portal data-slot="dialog-portal" {...props}>
+      {children}
+    </DialogPrimitive.Portal>
+  )
+}
+
+// Close
+const DialogClose = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Close>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>
+>(({ ...props }, ref) => (
+  <DialogPrimitive.Close ref={ref} data-slot="dialog-close" {...props} />
+))
+DialogClose.displayName = DialogPrimitive.Close.displayName ?? 'DialogClose'
+
+// Overlay
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    data-slot="dialog-overlay"
+    className={cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+      className,
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName ?? 'DialogOverlay'
+
+// Content
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean
+  }
+>(({ className, children, showCloseButton = true, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      data-slot="dialog-content"
+      className={cn(
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close
+          data-slot="dialog-close"
+          className={cn(
+            // observe as aspas internas em selectors trocadas para evitar conflito
+            "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          )}
+        >
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      )}
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName ?? 'DialogContent'
+
+// Header
+const DialogHeader = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  ),
+)
+DialogHeader.displayName = 'DialogHeader'
+
+// Footer
+const DialogFooter = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="dialog-footer"
+      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+      {...props}
+    />
+  ),
+)
+DialogFooter.displayName = 'DialogFooter'
+
+// Title
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    data-slot="dialog-title"
+    className={cn('text-lg leading-none font-semibold', className)}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName ?? 'DialogTitle'
+
+// Description
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    data-slot="dialog-description"
+    className={cn('text-muted-foreground text-sm', className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName ?? 'DialogDescription'
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogClose,
+  DialogOverlay,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

components/ui/drawer.tsx

@@ -0,0 +1,135 @@
+'use client'
+
+import * as React from 'react'
+import { Drawer as DrawerPrimitive } from 'vaul'
+
+import { cn } from '@/lib/utils'
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
+          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
+          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
+          'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',
+          'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',
+          className,
+        )}
+        {...props}
+      >
+        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn('text-foreground font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+'use client'
+
+import * as React from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

components/ui/filter-bar.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import React from "react";
+import { Search, Filter, X } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+export interface FilterOption {
+  label: string;
+  value: string;
+}
+
+export interface FilterConfig {
+  key: string;        // O nome do estado que vai guardar esse valor (ex: 'specialty')
+  label: string;      // O placeholder do select (ex: 'Especialidade')
+  options: FilterOption[] | string[]; // Opções do dropdown
+}
+
+interface FilterBarProps {
+  onSearch: (term: string) => void;
+  searchTerm: string;
+  searchPlaceholder?: string;
+  filters?: FilterConfig[];
+  activeFilters: Record<string, string>;
+  onFilterChange: (key: string, value: string) => void;
+  onClearFilters?: () => void;
+  className?: string;
+  children?: React.ReactNode; // Para botões extras (ex: "Novo Médico", paginação)
+}
+
+export function FilterBar({
+  onSearch,
+  searchTerm,
+  searchPlaceholder = "Pesquisar...",
+  filters = [],
+  activeFilters,
+  onFilterChange,
+  onClearFilters,
+  children,
+  className,
+}: FilterBarProps) {
+  
+  // Verifica se tem algum filtro ativo para mostrar o botão de limpar
+  const hasActiveFilters = 
+    searchTerm !== "" || 
+    Object.values(activeFilters).some(val => val !== "all" && val !== "");
+
+  return (
+    <div className={`flex flex-col md:flex-row items-start md:items-center gap-3 bg-card p-4 rounded-lg border ${className}`}>
+      
+      {/* Barra de Pesquisa */}
+      <div className="relative w-full md:flex-1">
+        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <Input
+          placeholder={searchPlaceholder}
+          value={searchTerm}
+          onChange={(e) => onSearch(e.target.value)}
+          className="pl-10 w-full bg-muted border-border focus:bg-card transition-colors"
+        />
+      </div>
+
+      {/* Filtros Dinâmicos (Selects) */}
+      <div className="flex flex-wrap items-center gap-3 w-full md:w-auto">
+        {filters.map((filter) => (
+          <div key={filter.key} className="w-full sm:w-auto">
+            <Select
+              value={activeFilters[filter.key] || "all"}
+              onValueChange={(value) => onFilterChange(filter.key, value)}
+            >
+              <SelectTrigger className="w-full sm:w-[180px]">
+                <SelectValue placeholder={filter.label} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">Todos: {filter.label}</SelectItem>
+                {filter.options.map((opt) => {
+                  // Suporta tanto array de strings quanto array de objetos {label, value}
+                  const value = typeof opt === 'string' ? opt : opt.value;
+                  const label = typeof opt === 'string' ? opt : opt.label;
+                  return (
+                    <SelectItem key={value} value={value}>
+                      {label}
+                    </SelectItem>
+                  );
+                })}
+              </SelectContent>
+            </Select>
+          </div>
+        ))}
+
+        {/* Botão de Limpar Filtros */}
+        {hasActiveFilters && onClearFilters && (
+          <Button 
+            variant="ghost" 
+            size="icon" 
+            onClick={onClearFilters}
+            className="text-muted-foreground hover:text-destructive"
+            title="Limpar filtros"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        )}
+
+        {/* Botões Extras (ex: Novo Médico, Paginação) passados como children */}
+        {children}
+      </div>
+    </div>
+  );
+}

components/ui/form.tsx

@@ -0,0 +1,167 @@
+'use client'
+
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { Slot } from '@radix-ui/react-slot'
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from 'react-hook-form'
+
+import { cn } from '@/lib/utils'
+import { Label } from '@/components/ui/label'
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>')
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn('grid gap-2', className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn('data-[error=true]:text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? '') : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn('text-destructive text-sm', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

components/ui/hover-card.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import * as React from 'react'
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+
+import { cn } from '@/lib/utils'
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

components/ui/input-otp.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import * as React from 'react'
+import { OTPInput, OTPInputContext } from 'input-otp'
+import { MinusIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        'flex items-center gap-2 has-disabled:opacity-50',
+        containerClassName,
+      )}
+      className={cn('disabled:cursor-not-allowed', className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn('flex items-center', className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  index: number
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <MinusIcon />
+    </div>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

components/ui/label.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+
+import { cn } from '@/lib/utils'
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

components/ui/menubar.tsx

@@ -0,0 +1,276 @@
+'use client'
+
+import * as React from 'react'
+import * as MenubarPrimitive from '@radix-ui/react-menubar'
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Menubar({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        'bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  )
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = 'start',
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(
+        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto h-4 w-4" />
+    </MenubarPrimitive.SubTrigger>
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}

components/ui/navigation-menu.tsx

@@ -0,0 +1,168 @@
+import * as React from 'react'
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
+import { cva } from 'class-variance-authority'
+import { ChevronDownIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        'group flex flex-1 list-none items-center justify-center gap-1',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn('relative', className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), 'group', className)}
+      {...props}
+    >
+      {children}{' '}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
+        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        'absolute top-full left-0 isolate z-50 flex justify-center',
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+        className,
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+}

components/ui/pagination.tsx

@@ -0,0 +1,127 @@
+import * as React from 'react'
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button, buttonVariants } from '@/components/ui/button'
+
+function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn('mx-auto flex w-full justify-center', className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn('flex flex-row items-center gap-1', className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, 'size'> &
+  React.ComponentProps<'a'>
+
+function PaginationLink({
+  className,
+  isActive,
+  size = 'icon',
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? 'page' : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? 'outline' : 'ghost',
+          size,
+        }),
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}

components/ui/patient-details-modal.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+
+interface Paciente {
+    id: string;
+    nome: string;
+    telefone: string;
+    cidade: string;
+    estado: string;
+    email?: string;
+    birth_date?: string;
+    cpf?: string;
+    blood_type?: string;
+    weight_kg?: number;
+    height_m?: number;
+    street?: string;
+    number?: string;
+    complement?: string;
+    neighborhood?: string;
+    cep?: string;
+    [key: string]: any; // Para permitir outras propriedades se necessário
+}
+
+interface PatientDetailsModalProps {
+  patient: Paciente | null;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function PatientDetailsModal({
+  patient,
+  isOpen,
+  onClose,
+}: PatientDetailsModalProps) {
+  if (!patient) return null;
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-[95%] sm:max-w-lg max-h-[90vh] overflow-y-auto bg-card text-card-foreground border border-border">
+        <DialogHeader>
+          <DialogTitle className="text-xl font-bold text-foreground">Detalhes do Paciente</DialogTitle>
+          <DialogDescription className="text-muted-foreground">
+            Informações detalhadas sobre o paciente.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-2">
+          {/* Grid Principal */}
+          <div className="grid grid-cols-2 gap-4 text-sm">
+            <div>
+              <p className="font-semibold text-foreground">Nome Completo</p>
+              <p className="text-muted-foreground">{patient.nome}</p>
+            </div>
+            
+            {/* CORREÇÃO AQUI: Adicionado 'break-all' para quebrar o email */}
+            <div>
+              <p className="font-semibold text-foreground">Email</p>
+              <p className="text-muted-foreground break-all">{patient.email || "N/A"}</p>
+            </div>
+
+            <div>
+              <p className="font-semibold text-foreground">Telefone</p>
+              <p className="text-muted-foreground">{patient.telefone}</p>
+            </div>
+
+            <div>
+              <p className="font-semibold text-foreground">Data de Nascimento</p>
+              <p className="text-muted-foreground">{patient.birth_date || "N/A"}</p>
+            </div>
+
+            <div>
+              <p className="font-semibold text-foreground">CPF</p>
+              <p className="text-muted-foreground">{patient.cpf || "N/A"}</p>
+            </div>
+
+            <div>
+              <p className="font-semibold text-foreground">Tipo Sanguíneo</p>
+              <p className="text-muted-foreground">{patient.blood_type || "N/A"}</p>
+            </div>
+
+            <div>
+              <p className="font-semibold text-foreground">Peso (kg)</p>
+              <p className="text-muted-foreground">{patient.weight_kg || "0"}</p>
+            </div>
+
+            <div>
+              <p className="font-semibold text-foreground">Altura (m)</p>
+              <p className="text-muted-foreground">{patient.height_m || "0"}</p>
+            </div>
+          </div>
+
+          <hr className="border-border" />
+
+          {/* Seção de Endereço */}
+          <div>
+            <h4 className="font-semibold mb-3 text-foreground">Endereço</h4>
+            <div className="grid grid-cols-2 gap-4 text-sm">
+              <div>
+                <p className="font-semibold text-foreground">Rua</p>
+                <p className="text-muted-foreground">
+                  {patient.street && patient.street !== "N/A" 
+                    ? `${patient.street}, ${patient.number || ""}` 
+                    : "N/A"}
+                </p>
+              </div>
+              <div>
+                <p className="font-semibold text-foreground">Complemento</p>
+                <p className="text-muted-foreground">{patient.complement || "N/A"}</p>
+              </div>
+              <div>
+                <p className="font-semibold text-foreground">Bairro</p>
+                <p className="text-muted-foreground">{patient.neighborhood || "N/A"}</p>
+              </div>
+              <div>
+                <p className="font-semibold text-foreground">Cidade</p>
+                <p className="text-muted-foreground">{patient.cidade || "N/A"}</p>
+              </div>
+              <div>
+                <p className="font-semibold text-foreground">Estado</p>
+                <p className="text-muted-foreground">{patient.estado || "N/A"}</p>
+              </div>
+              <div>
+                <p className="font-semibold text-foreground">CEP</p>
+                <p className="text-muted-foreground">{patient.cep || "N/A"}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="secondary" onClick={onClose} className="w-full sm:w-auto">
+            Fechar
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

components/ui/popover.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+
+import { cn } from '@/lib/utils'
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

components/ui/progress.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import * as React from 'react'
+import * as ProgressPrimitive from '@radix-ui/react-progress'
+
+import { cn } from '@/lib/utils'
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        className,
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }

components/ui/radio-group.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import * as React from 'react'
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { CircleIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn('grid gap-3', className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }

components/ui/resizable.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import * as React from 'react'
+import { GripVerticalIcon } from 'lucide-react'
+import * as ResizablePrimitive from 'react-resizable-panels'
+
+import { cn } from '@/lib/utils'
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn(
+        'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      data-slot="resizable-handle"
+      className={cn(
+        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+        className,
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

components/ui/scroll-area.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import * as React from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+
+import { cn } from '@/lib/utils'
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn('relative', className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        'flex touch-none p-px transition-colors select-none',
+        orientation === 'vertical' &&
+          'h-full w-2.5 border-l border-l-transparent',
+        orientation === 'horizontal' &&
+          'h-2.5 flex-col border-t border-t-transparent',
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

components/ui/select.tsx

@@ -0,0 +1,185 @@
+'use client'
+
+import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = 'default',
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: 'sm' | 'default'
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            'p-1',
+            position === 'popper' &&
+              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

components/ui/separator.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+
+import { cn } from '@/lib/utils'
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

components/ui/sheet.tsx

@@ -0,0 +1,139 @@
+'use client'
+
+import * as React from 'react'
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = 'right',
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: 'top' | 'right' | 'bottom' | 'left'
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          side === 'right' &&
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          side === 'left' &&
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+          side === 'top' &&
+            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+          side === 'bottom' &&
+            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-1.5 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn('text-foreground font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

components/ui/sidebar.tsx

@@ -0,0 +1,726 @@
+'use client'
+
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, VariantProps } from 'class-variance-authority'
+import { PanelLeftIcon } from 'lucide-react'
+
+import { useIsMobile } from '@/hooks/use-mobile'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Separator } from '@/components/ui/separator'
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet'
+import { Skeleton } from '@/components/ui/skeleton'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+
+const SIDEBAR_COOKIE_NAME = 'sidebar_state'
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = '16rem'
+const SIDEBAR_WIDTH_MOBILE = '18rem'
+const SIDEBAR_WIDTH_ICON = '3rem'
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+
+type SidebarContextProps = {
+  state: 'expanded' | 'collapsed'
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error('useSidebar must be used within a SidebarProvider.')
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === 'function' ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open],
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? 'expanded' : 'collapsed'
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              '--sidebar-width': SIDEBAR_WIDTH,
+              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = 'left',
+  variant = 'sidebar',
+  collapsible = 'offcanvas',
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  side?: 'left' | 'right'
+  variant?: 'sidebar' | 'floating' | 'inset'
+  collapsible?: 'offcanvas' | 'icon' | 'none'
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === 'none') {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === 'collapsed' ? collapsible : ''}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+          'group-data-[collapsible=offcanvas]:w-0',
+          'group-data-[side=right]:rotate-180',
+          variant === 'floating' || variant === 'inset'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+          side === 'left'
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+          // Adjust the padding for floating and inset variants.
+          variant === 'floating' || variant === 'inset'
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          className,
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn('size-7', className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        'bg-background relative flex w-full flex-1 flex-col',
+        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn('bg-background h-8 w-full shadow-none', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn('bg-sidebar-border mx-2 w-auto', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'div'> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'div'
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 md:after:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn('w-full text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn('group/menu-item relative', className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = 'default',
+  size = 'default',
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<'button'> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : 'button'
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === 'string') {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== 'collapsed' || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<'button'> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 md:after:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<'div'> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            '--skeleton-width': width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn('group/menu-sub-item relative', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = 'md',
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean
+  size?: 'sm' | 'md'
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot : 'a'
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}

components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from '@/lib/utils'
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn('bg-accent animate-pulse rounded-md', className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

components/ui/slider.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import * as React from 'react'
+import * as SliderPrimitive from '@radix-ui/react-slider'
+
+import { cn } from '@/lib/utils'
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max],
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+        className,
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            'bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }

components/ui/sonner.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import { Toaster as Sonner, ToasterProps } from 'sonner'
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className="toaster group"
+      style={
+        {
+          '--normal-bg': 'var(--popover)',
+          '--normal-text': 'var(--popover-foreground)',
+          '--normal-border': 'var(--border)',
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }