Merge branch 'main' of https://git.popcode.com.br/RiseUP/riseup-squad21

app/cadastro/page.tsx

@@ -5,15 +5,15 @@ import { Calendar, Clock, User, Shield, Stethoscope, Receipt, IdCard  } from "lu
 
 export default function HomePage() {
   return (
-    <div className="min-h-screen bg-[#F2F2F2]">
+    <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-gray-900 mb-4">Central de Operações <br>
+          <h1 className="text-4xl font-bold text-foreground mb-4">Central de Operações <br>
           </br>
           MedConnect
 
           </h1>
-          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
             Gerencie suas consultas médicas de forma simples e eficiente
           </p>
         </div>
@@ -21,21 +21,21 @@ export default function HomePage() {
         <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-black-600 mx-auto mb-4" />
+              <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-gray-600">
+                <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-gray-600">
+                <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-gray-600">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                   <User className="w-4 h-4" />
                   <span>Gerenciar dados pessoais</span>
                 </div>
@@ -54,21 +54,21 @@ export default function HomePage() {
             </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-gray-600">
+                <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-gray-600">
+                <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-gray-600">
+                <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 hover:bg-purple-700">Entrar como Secretária</Button>
+                <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>
@@ -81,21 +81,21 @@ export default function HomePage() {
             </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-gray-600">
+                <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-gray-600">
+                <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-gray-600">
+                <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 hover:bg-green-700">Entrar como Médico</Button>
+                <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>
@@ -108,21 +108,21 @@ export default function HomePage() {
             </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-gray-600">
+                <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-gray-600">
+                <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-gray-600">
+                <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 hover:bg-blue-700">Entrar como Gestor</Button>
+                <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>
@@ -135,21 +135,21 @@ export default function HomePage() {
             </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-gray-600">
+                <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-gray-600">
+                <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-gray-600">
+                <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 hover:bg-orange-700">Entrar como Financeiro</Button>
+                <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>

app/context/AccessibilityContext.tsx

@@ -0,0 +1,99 @@
+"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 'light';
+    return (localStorage.getItem('accessibility-theme') as Theme) || 'light';
+  });
+  const [contrast, setContrastState] = useState<Contrast>(() => {
+    if (typeof window === 'undefined') return 'normal';
+    return (localStorage.getItem('accessibility-contrast') as Contrast) || 'normal';
+  });
+  const [fontSize, setFontSize] = useState<number>(() => {
+    if (typeof window === 'undefined') return 16;
+    const storedSize = localStorage.getItem('accessibility-font-size');
+    return storedSize ? parseFloat(storedSize) : 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/doctor/dashboard/page.tsx

@@ -0,0 +1,91 @@
+import DoctorLayout from "@/components/doctor-layout"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Calendar, Clock, User, Plus } from "lucide-react"
+import Link from "next/link"
+
+export default function PatientDashboard() {
+    return (
+        <DoctorLayout>
+            <div className="space-y-6">
+                <div>
+                    <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
+                    <p className="text-gray-600">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">02 out</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">4</div>
+                            <p className="text-xs text-muted-foreground">4 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/medicos/consultas">
+                                <Button className="w-full justify-start">
+                                    <Calendar className="mr-2 h-4 w-4" />
+                                    Ver Minhas Consultas
+                                </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-blue-50 rounded-lg">
+                                    <div>
+                                        <p className="font-medium">Dr. João Santos</p>
+                                        <p className="text-sm text-gray-600">Cardiologia</p>
+                                    </div>
+                                    <div className="text-right">
+                                        <p className="font-medium">02 out</p>
+                                        <p className="text-sm text-gray-600">14:30</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+            </div>
+        </DoctorLayout>
+    )
+}

app/doctor/login/page.tsx

@@ -1,157 +1,11 @@
-"use client"
+// Caminho: app/(doctor)/login/page.tsx
 
-import type React from "react"
+import { LoginForm } from "@/components/LoginForm";
 
-import { useState } from "react"
+export default function DoctorLoginPage() {
-import { useRouter } from "next/navigation"
+    return (
-import { Button } from "@/components/ui/button"
+        <div className="min-h-screen bg-gradient-to-br from-green-50 via-white to-green-50 flex items-center justify-center p-4">
-import { Input } from "@/components/ui/input"
+            <LoginForm title="Área do Médico" description="Acesse o sistema médico" role="doctor" themeColor="green" redirectPath="/doctor/medicos" />
-import { Label } from "@/components/ui/label"
+        </div>
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+    );
-import { Separator } from "@/components/ui/separator"
-import { useToast } from "@/hooks/use-toast"
-import { Eye, EyeOff, Mail, Lock, Stethoscope, Loader2 } from "lucide-react"
-import Link from "next/link"
-
-interface LoginForm {
-  email: string
-  password: string
-}
-
-export default function DoctorLogin() {
-  const [form, setForm] = useState<LoginForm>({ email: "", password: "" })
-  const [showPassword, setShowPassword] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const router = useRouter()
-  const { toast } = useToast()
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setIsLoading(true)
-
-    // Simular autenticação
-    setTimeout(() => {
-      if (form.email && form.password) {
-        const doctorData = {
-          id: "1",
-          name: "Dr. João Santos",
-          email: form.email,
-          phone: "(11) 98888-8888",
-          cpf: "987.654.321-00",
-          crm: "CRM/SP 123456",
-          specialty: "Cardiologia",
-          department: "Cardiologia",
-          permissions: ["view_patients", "manage_appointments", "create_reports"],
-        }
-
-        localStorage.setItem("doctorData", JSON.stringify(doctorData))
-        localStorage.setItem("userType", "doctor")
-
-        toast({
-          title: "Login realizado com sucesso!",
-          description: "Bem-vindo ao sistema, " + doctorData.name,
-        })
-
-        router.push("/doctor/medicos")
-      } else {
-        toast({
-          title: "Erro no login",
-          description: "Por favor, preencha todos os campos.",
-          variant: "destructive",
-        })
-      }
-      setIsLoading(false)
-    }, 1500)
-  }
-
-  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">
-      <Card className="w-full max-w-md shadow-xl border-0 bg-white/80 backdrop-blur-sm">
-        <CardHeader className="text-center space-y-4 pb-8">
-          <div className="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
-            <Stethoscope className="w-8 h-8 text-green-600" />
-          </div>
-          <div>
-            <CardTitle className="text-2xl font-bold text-gray-900">Área do Médico</CardTitle>
-            <CardDescription className="text-gray-600 mt-2">Acesse o sistema médico</CardDescription>
-          </div>
-        </CardHeader>
-
-        <CardContent className="space-y-6">
-          <form onSubmit={handleSubmit} className="space-y-5">
-            <div className="space-y-2">
-              <Label htmlFor="email" className="text-sm font-medium text-gray-700">
-                E-mail
-              </Label>
-              <div className="relative">
-                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-                <Input
-                  id="email"
-                  type="email"
-                  placeholder="dr.medico@clinica.com"
-                  value={form.email}
-                  onChange={(e) => setForm({ ...form, email: e.target.value })}
-                  className="pl-10 h-11 border-gray-200 focus:border-green-500 focus:ring-green-500"
-                  required
-                />
-              </div>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="password" className="text-sm font-medium text-gray-700">
-                Senha
-              </Label>
-              <div className="relative">
-                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-                <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-10 h-11 border-gray-200 focus:border-green-500 focus:ring-green-500"
-                  required
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
-                >
-                  {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                </button>
-              </div>
-            </div>
-
-            <Button
-              type="submit"
-              className="w-full h-11 bg-green-600 hover:bg-green-700 text-white font-medium"
-              disabled={isLoading}
-            >
-              {isLoading ? (
-                <>
-                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                  Entrando...
-                </>
-              ) : (
-                "Entrar"
-              )}
-            </Button>
-          </form>
-
-          <div className="relative">
-            <Separator className="my-6" />
-            <span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white px-3 text-sm text-gray-500">
-              ou
-            </span>
-          </div>
-
-          <div className="text-center">
-            <Link href="/" className="text-sm text-green-600 hover:text-green-700 font-medium hover:underline">
-              Voltar à página inicial
-            </Link>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  )
 }

app/doctor/medicos/consultas/page.tsx

@@ -2,7 +2,7 @@
 
 import type React from "react";
 import { useState, useEffect } from "react";
-import DoctorLayout from "@/components/doctor-layout"; 
+import DoctorLayout from "@/components/doctor-layout";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Clock, Calendar as CalendarIcon, MapPin, Phone, User, X, RefreshCw } from "lucide-react";
@@ -19,7 +19,7 @@ const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
 interface LocalStorageAppointment {
     id: number;
     patientName: string;
-    doctor: string;       
+    doctor: string;
     specialty: string;
     date: string; // Data no formato YYYY-MM-DD
     time: string; // Hora no formato HH:MM
@@ -28,13 +28,13 @@ interface LocalStorageAppointment {
     phone: string;
 }
 
-const LOGGED_IN_DOCTOR_NAME = "Dr. João Santos"; 
+const LOGGED_IN_DOCTOR_NAME = "Dr. João Santos";
 
 // Função auxiliar para comparar se duas datas (Date objects) são o mesmo dia
 const isSameDay = (date1: Date, date2: Date) => {
     return date1.getFullYear() === date2.getFullYear() &&
-           date1.getMonth() === date2.getMonth() &&
+        date1.getMonth() === date2.getMonth() &&
-           date1.getDate() === date2.getDate();
+        date1.getDate() === date2.getDate();
 };
 
 // --- COMPONENTE PRINCIPAL ---
@@ -43,10 +43,10 @@ export default function DoctorAppointmentsPage() {
     const [allAppointments, setAllAppointments] = useState<LocalStorageAppointment[]>([]);
     const [filteredAppointments, setFilteredAppointments] = useState<LocalStorageAppointment[]>([]);
     const [isLoading, setIsLoading] = useState(true);
-    
+
     // 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());
 
@@ -58,20 +58,20 @@ export default function DoctorAppointmentsPage() {
     useEffect(() => {
         if (selectedCalendarDate) {
             const dateString = format(selectedCalendarDate, 'yyyy-MM-dd');
-            
+
             // Filtra a lista completa de agendamentos pela data selecionada
             const todayAppointments = allAppointments
                 .filter(app => app.date === dateString)
                 .sort((a, b) => a.time.localeCompare(b.time)); // Ordena por hora
-            
+
             setFilteredAppointments(todayAppointments);
         } else {
             // Se nenhuma data estiver selecionada (ou se for limpa), mostra todos (ou os de hoje)
             const todayDateString = format(new Date(), 'yyyy-MM-dd');
             const todayAppointments = allAppointments
                 .filter(app => app.date === todayDateString)
-                .sort((a, b) => a.time.localeCompare(b.time)); 
+                .sort((a, b) => a.time.localeCompare(b.time));
-                
+
             setFilteredAppointments(todayAppointments);
         }
     }, [allAppointments, selectedCalendarDate]);
@@ -87,7 +87,7 @@ export default function DoctorAppointmentsPage() {
 
             // 1. EXTRAI E PREPARA AS DATAS PARA O CALENDÁRIO
             const uniqueBookedDates = Array.from(new Set(appointmentsToShow.map(app => app.date)));
-            
+
             // Converte YYYY-MM-DD para objetos Date, garantindo que o tempo seja meia-noite (00:00:00)
             const dateObjects = uniqueBookedDates.map(dateString => new Date(dateString + 'T00:00:00'));
 
@@ -122,12 +122,12 @@ export default function DoctorAppointmentsPage() {
         const storedAppointmentsRaw = localStorage.getItem(APPOINTMENTS_STORAGE_KEY);
         const allAppts: LocalStorageAppointment[] = storedAppointmentsRaw ? JSON.parse(storedAppointmentsRaw) : [];
 
-        const updatedAppointments = allAppts.map(app => 
+        const updatedAppointments = allAppts.map(app =>
             app.id === id ? { ...app, status: "cancelada" as const } : app
         );
 
         localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(updatedAppointments));
-        loadAppointments(); 
+        loadAppointments();
         toast.info(`Consulta cancelada com sucesso.`);
     };
 
@@ -135,8 +135,8 @@ export default function DoctorAppointmentsPage() {
         toast.info(`Reagendamento da Consulta ID: ${id}. Navegar para a página de agendamento.`);
     };
 
-    const displayDate = selectedCalendarDate ? 
+    const displayDate = selectedCalendarDate ?
-        new Date(selectedCalendarDate).toLocaleDateString("pt-BR", {weekday: 'long', day: '2-digit', month: 'long'}) : 
+        new Date(selectedCalendarDate).toLocaleDateString("pt-BR", { weekday: 'long', day: '2-digit', month: 'long' }) :
         "Selecione uma data";
 
 
@@ -158,7 +158,7 @@ export default function DoctorAppointmentsPage() {
 
                 {/* 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>
@@ -176,10 +176,10 @@ export default function DoctorAppointmentsPage() {
                                     onSelect={setSelectedCalendarDate}
                                     initialFocus
                                     // A CHAVE DO HIGHLIGHT: Passa o array de datas agendadas
-                                    modifiers={{ booked: bookedDays }} 
+                                    modifiers={{ booked: bookedDays }}
                                     // Define o estilo CSS para o modificador 'booked'
-                                    modifiersClassNames={{ 
+                                    modifiersClassNames={{
-                                        booked: "bg-blue-600 text-white aria-selected:!bg-blue-700 hover:!bg-blue-700/90" 
+                                        booked: "bg-blue-600 text-white aria-selected:!bg-blue-700 hover:!bg-blue-700/90"
                                     }}
                                     className="rounded-md border p-2"
                                 />
@@ -233,23 +233,23 @@ export default function DoctorAppointmentsPage() {
                                                 </div>
                                                 <div className="flex items-center text-sm text-gray-700">
                                                     <Phone className="mr-2 h-4 w-4 text-gray-500" />
-                                                    {appointment.phone || "N/A"} 
+                                                    {appointment.phone || "N/A"}
                                                 </div>
                                             </div>
 
                                             <div className="flex flex-col justify-center items-end">
                                                 {showActions && (
                                                     <div className="flex space-x-2">
-                                                        <Button 
+                                                        <Button
-                                                            variant="outline" 
+                                                            variant="outline"
                                                             size="sm"
                                                             onClick={() => handleReSchedule(appointment.id)}
                                                         >
                                                             <RefreshCw className="mr-2 h-4 w-4" />
                                                             Reagendar
                                                         </Button>
-                                                        <Button 
+                                                        <Button
-                                                            variant="destructive" 
+                                                            variant="destructive"
                                                             size="sm"
                                                             onClick={() => handleCancel(appointment.id)}
                                                         >

app/doctor/medicos/page.tsx

@@ -57,8 +57,8 @@ export default function PacientesPage() {
     return new Intl.DateTimeFormat('pt-BR').format(date);
   };
 
-  const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(5);
+  const [currentPage, setCurrentPage] = useState(1);
 
   const indexOfLastItem = currentPage * itemsPerPage;
   const indexOfFirstItem = indexOfLastItem - itemsPerPage;
@@ -109,28 +109,28 @@ export default function PacientesPage() {
     <DoctorLayout>
       <div className="space-y-6">
         <div>
-          <h1 className="text-2xl font-bold text-gray-900">Pacientes</h1>
+          <h1 className="text-2xl font-bold text-foreground">Pacientes</h1>
-          <p className="text-gray-600">Lista de pacientes vinculados</p>
+          <p className="text-muted-foreground">Lista de pacientes vinculados</p>
         </div>
 
-        <div className="bg-white rounded-lg border border-gray-200">
+        <div className="bg-card rounded-lg border border-border">
           <div className="overflow-x-auto">
             <table className="w-full">
-              <thead className="bg-gray-50 border-b border-gray-200">
+              <thead className="bg-muted border-b border-border">
                 <tr>
-                  <th className="text-left p-4 font-medium text-gray-700">Nome</th>
+                  <th className="text-left p-4 font-medium text-foreground">Nome</th>
-                  <th className="text-left p-4 font-medium text-gray-700">Telefone</th>
+                  <th className="text-left p-4 font-medium text-foreground">Telefone</th>
-                  <th className="text-left p-4 font-medium text-gray-700">Cidade</th>
+                  <th className="text-left p-4 font-medium text-foreground">Cidade</th>
-                  <th className="text-left p-4 font-medium text-gray-700">Estado</th>
+                  <th className="text-left p-4 font-medium text-foreground">Estado</th>
-                  <th className="text-left p-4 font-medium text-gray-700">Último atendimento</th>
+                  <th className="text-left p-4 font-medium text-foreground">Último atendimento</th>
-                  <th className="text-left p-4 font-medium text-gray-700">Próximo atendimento</th>
+                  <th className="text-left p-4 font-medium text-foreground">Próximo atendimento</th>
-                  <th className="text-left p-4 font-medium text-gray-700">Ações</th>
+                  <th className="text-left p-4 font-medium text-foreground">Ações</th>
                 </tr>
               </thead>
               <tbody>
                 {loading ? (
                   <tr>
-                    <td colSpan={7} className="p-6 text-gray-600">
+                    <td colSpan={7} className="p-6 text-muted-foreground">
                       Carregando pacientes...
                     </td>
                   </tr>
@@ -140,23 +140,23 @@ export default function PacientesPage() {
                   </tr>
                 ) : pacientes.length === 0 ? (
                   <tr>
-                    <td colSpan={7} className="p-8 text-center text-gray-500">
+                    <td colSpan={7} className="p-8 text-center text-muted-foreground">
                       Nenhum paciente encontrado
                     </td>
                   </tr>
                 ) : (
                   currentItems.map((p) => (
-                    <tr key={p.id} className="border-b border-gray-100 hover:bg-gray-50">
+                    <tr key={p.id} className="border-b border-border hover:bg-accent">
                       <td className="p-4">{p.nome}</td>
-                      <td className="p-4 text-gray-600">{p.telefone}</td>
+                      <td className="p-4 text-muted-foreground">{p.telefone}</td>
-                      <td className="p-4 text-gray-600">{p.cidade}</td>
+                      <td className="p-4 text-muted-foreground">{p.cidade}</td>
-                      <td className="p-4 text-gray-600">{p.estado}</td>
+                      <td className="p-4 text-muted-foreground">{p.estado}</td>
-                      <td className="p-4 text-gray-600">{p.ultimoAtendimento}</td>
+                      <td className="p-4 text-muted-foreground">{p.ultimoAtendimento}</td>
-                      <td className="p-4 text-gray-600">{p.proximoAtendimento}</td>
+                      <td className="p-4 text-muted-foreground">{p.proximoAtendimento}</td>
                       <td className="p-4">
                         <DropdownMenu>
                           <DropdownMenuTrigger asChild>
-                            <button className="text-blue-600 hover:underline">Ações</button>
+                            <button className="text-primary hover:underline">Ações</button>
                           </DropdownMenuTrigger>
                           <DropdownMenuContent align="end">
                             <DropdownMenuItem onClick={() => handleOpenModal(p)}>
@@ -192,12 +192,12 @@ export default function PacientesPage() {
               </tbody>
             </table>
           </div>
-          <div className="flex justify-center space-x-2 mt-4">
+          <div className="flex justify-center space-x-2 mt-4 p-4">
             {Array.from({ length: Math.ceil(pacientes.length / itemsPerPage) }, (_, i) => (
               <button
                 key={i}
                 onClick={() => paginate(i + 1)}
-                className={`px-4 py-2 rounded-md ${currentPage === i + 1 ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
+                className={`px-4 py-2 rounded-md ${currentPage === i + 1 ? 'bg-primary text-primary-foreground' : 'bg-secondary text-secondary-foreground'}`}
               >
                 {i + 1}
               </button>

app/finance/login/page.tsx

@@ -1,155 +1,12 @@
-"use client"
+// Caminho: app/(finance)/login/page.tsx
 
-import type React from "react"
+import { LoginForm } from "@/components/LoginForm";
 
-import { useState } from "react"
+export default function FinanceLoginPage() {
-import { useRouter } from "next/navigation"
+    return (
-import { Button } from "@/components/ui/button"
+        // Fundo com gradiente laranja, como no seu código original
-import { Input } from "@/components/ui/input"
+        <div className="min-h-screen bg-gradient-to-br from-orange-50 via-white to-orange-50 flex items-center justify-center p-4">
-import { Label } from "@/components/ui/label"
+            <LoginForm title="Área Financeira" description="Acesse o sistema de faturamento" role="finance" themeColor="orange" redirectPath="/finance/home" />
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+        </div>
-import { Separator } from "@/components/ui/separator"
+    );
-import { useToast } from "@/hooks/use-toast"
-import { Eye, EyeOff, Mail, Lock, Stethoscope, Loader2, Receipt } from "lucide-react"
-import Link from "next/link"
-
-interface LoginForm {
-  email: string
-  password: string
-}
-
-export default function DoctorLogin() {
-  const [form, setForm] = useState<LoginForm>({ email: "", password: "" })
-  const [showPassword, setShowPassword] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const router = useRouter()
-  const { toast } = useToast()
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setIsLoading(true)
-
-    // Simular autenticação
-    setTimeout(() => {
-      if (form.email && form.password) {
-        const financierData = {
-          id: "1",
-          name: "Thiago Nigro",
-          email: form.email,
-          phone: "(11) 98888-8888",
-          cpf: "987.654.321-00",
-          department: "Financeiro",
-          permissions: ["view_reports", "manage_finances", "create_reports"],
-        }
-
-        localStorage.setItem("financierData", JSON.stringify(financierData))
-        localStorage.setItem("userType", "financier")
-
-        toast({
-          title: "Login realizado com sucesso!",
-          description: "Bem-vindo ao sistema, " + financierData.name,
-        })
-
-        router.push("/finance/home")
-      } else {
-        toast({
-          title: "Erro no login",
-          description: "Por favor, preencha todos os campos.",
-          variant: "destructive",
-        })
-      }
-      setIsLoading(false)
-    }, 1500)
-  }
-
-  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">
-      <Card className="w-full max-w-md shadow-xl border-0 bg-white/80 backdrop-blur-sm">
-        <CardHeader className="text-center space-y-4 pb-8">
-          <div className="mx-auto w-16 h-16 bg-orange-200 rounded-full flex items-center justify-center">
-            <Receipt className="w-8 h-8 text-orange-600" />
-          </div>
-          <div>
-            <CardTitle className="text-2xl font-bold text-gray-900">Área do Médico</CardTitle>
-            <CardDescription className="text-gray-600 mt-2">Acesse o sistema médico</CardDescription>
-          </div>
-        </CardHeader>
-
-        <CardContent className="space-y-6">
-          <form onSubmit={handleSubmit} className="space-y-5">
-            <div className="space-y-2">
-              <Label htmlFor="email" className="text-sm font-medium text-gray-700">
-                E-mail
-              </Label>
-              <div className="relative">
-                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-                <Input
-                  id="email"
-                  type="email"
-                  placeholder="dr.medico@clinica.com"
-                  value={form.email}
-                  onChange={(e) => setForm({ ...form, email: e.target.value })}
-                  className="pl-10 h-11 border-gray-200 focus:border-green-500 focus:ring-green-500"
-                  required
-                />
-              </div>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="password" className="text-sm font-medium text-gray-700">
-                Senha
-              </Label>
-              <div className="relative">
-                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-                <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-10 h-11 border-gray-200 focus:border-green-500 focus:ring-green-500"
-                  required
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
-                >
-                  {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                </button>
-              </div>
-            </div>
-
-            <Button
-              type="submit"
-              className="w-full h-11 bg-orange-600 hover:bg-orange-700 text-white font-medium"
-              disabled={isLoading}
-            >
-              {isLoading ? (
-                <>
-                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                  Entrando...
-                </>
-              ) : (
-                "Entrar"
-              )}
-            </Button>
-          </form>
-
-          <div className="relative">
-            <Separator className="my-6" />
-            <span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white px-3 text-sm text-gray-500">
-              ou
-            </span>
-          </div>
-
-          <div className="text-center">
-            <Link href="/" className="text-sm text-orange-600 hover:text-orange-700 font-medium hover:underline">
-              Voltar à página inicial
-            </Link>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  )
 }

app/globals.css

@@ -74,6 +74,36 @@
   --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.5 0.3 30);
+    --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);
@@ -121,5 +151,6 @@
   }
   body {
     @apply bg-background text-foreground;
+    transition: background-color 0.3s, color 0.3s;
   }
 }

app/layout.tsx

@@ -1,31 +1,32 @@
-import type { Metadata } from 'next'
+import type { Metadata } from "next";
-import { GeistSans } from 'geist/font/sans'
+import { GeistSans } from "geist/font/sans";
-import { GeistMono } from 'geist/font/mono'
+import { GeistMono } from "geist/font/mono";
-import { Analytics } from '@vercel/analytics/next'
+import { Analytics } from "@vercel/analytics/next";
-import './globals.css'
+import "./globals.css";
+import { Toaster } from "@/components/ui/toaster";
 // [PASSO 1.2] - Importando o nosso provider
-import { AppointmentsProvider } from './context/AppointmentsContext'
+import { AppointmentsProvider } from "./context/AppointmentsContext";
-
+import { AccessibilityProvider } from "./context/AccessibilityContext";
-export const metadata: Metadata = {
+import { AccessibilityModal } from "@/components/accessibility-modal";
-  title: 'Clinic App',
+import { ThemeInitializer } from "@/components/theme-initializer";
-  description: 'Created with v0',
-  generator: 'v0.app',
-}
 
 export default function RootLayout({
-  children,
+    children,
 }: Readonly<{
-  children: React.ReactNode
+    children: React.ReactNode;
 }>) {
-  return (
+    return (
-    <html lang="en">
+        <html lang="en" suppressHydrationWarning>
-      <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
+            <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
-        {/* [PASSO 1.2] - Envolvendo a aplicação com o provider */}
+                {/* [PASSO 1.2] - Envolvendo a aplicação com o provider */}
-        <AppointmentsProvider>
+                <ThemeInitializer />
-          {children}
+                <AccessibilityProvider>
-        </AppointmentsProvider>
+                    <AppointmentsProvider>{children}</AppointmentsProvider>
-        <Analytics />
+                    <AccessibilityModal />
-      </body>
+                </AccessibilityProvider>
-    </html>
+                <Analytics />
-  )
+                <Toaster />
-}
+            </body>
+        </html>
+    );
+}

app/manager/dashboard/page.tsx

@@ -0,0 +1,113 @@
+import ManagerLayout from "@/components/manager-layout"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Calendar, Clock, User, Plus } from "lucide-react"
+import Link from "next/link"
+
+export default function ManagerDashboard() {
+    return (
+        <ManagerLayout>
+            <div className="space-y-6">
+                <div>
+                    <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
+                    <p className="text-gray-600">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">Relatórios gerenciais</CardTitle>
+                            <Calendar 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 não lidos, 1 lido</p>
+                        </CardContent>
+                    </Card>
+
+                    <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>
+                            <div className="text-2xl font-bold">João Marques</div>
+                            <p className="text-xs text-muted-foreground">fez login a 13min</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="##">
+                                <Button className="w-full justify-start">
+                                    <Plus className="mr-2 h-4 w-4" />
+                                    #
+                                </Button>
+                            </Link>
+                            <Link href="##">
+                                <Button variant="outline" className="w-full justify-start bg-transparent">
+                                    <Calendar className="mr-2 h-4 w-4" />
+                                    #
+                                </Button>
+                            </Link>
+                            <Link href="##">
+                                <Button variant="outline" className="w-full justify-start bg-transparent">
+                                    <User className="mr-2 h-4 w-4" />
+                                    #
+                                </Button>
+                            </Link>
+                        </CardContent>
+                    </Card>
+
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Gestão de Médicos</CardTitle>
+                            <CardDescription>Médicos online</CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="space-y-4">
+                                <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
+                                    <div>
+                                        <p className="font-medium">Dr. Silva</p>
+                                        <p className="text-sm text-gray-600">Cardiologia</p>
+                                    </div>
+                                    <div className="text-right">
+                                        <p className="font-medium">On-line</p>
+                                        <p className="text-sm text-gray-600"></p>
+                                    </div>
+                                </div>
+                                <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
+                                    <div>
+                                        <p className="font-medium">Dra. Santos</p>
+                                        <p className="text-sm text-gray-600">Dermatologia</p>
+                                    </div>
+                                    <div className="text-right">
+                                        <p className="font-medium">Off-line</p>
+                                        <p className="text-sm text-gray-600">Visto as 8:33</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+            </div>
+        </ManagerLayout>
+    )
+}

app/manager/login/page.tsx

@@ -1,154 +1,12 @@
-"use client"
+// Caminho: app/(manager)/login/page.tsx
 
-import type React from "react"
+import { LoginForm } from "@/components/LoginForm";
 
-import { useState } from "react"
+export default function ManagerLoginPage() {
-import { useRouter } from "next/navigation"
+    return (
-import { Button } from "@/components/ui/button"
+        // Mantemos o seu plano de fundo original
-import { Input } from "@/components/ui/input"
+        <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 flex items-center justify-center p-4">
-import { Label } from "@/components/ui/label"
+            <LoginForm title="Área do Gestor" description="Acesse o sistema médico" role="manager" themeColor="blue" redirectPath="/manager/home" />
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+        </div>
-import { Separator } from "@/components/ui/separator"
+    );
-import { useToast } from "@/hooks/use-toast"
-import { Eye, EyeOff, Mail, Lock, Stethoscope, Loader2, IdCard } from "lucide-react"
-import Link from "next/link"
-
-interface LoginForm {
-  email: string
-  password: string
-}
-
-export default function ManagerLogin() {
-  const [form, setForm] = useState<LoginForm>({ email: "", password: "" })
-  const [showPassword, setShowPassword] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const router = useRouter()
-  const { toast } = useToast()
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setIsLoading(true)
-
-    setTimeout(() => {
-      if (form.email && form.password) {
-        const managerData = {
-          id: "1",
-          name: "Arthur Cavalcante",
-          email: form.email,
-          phone: "(11) 98888-8888",
-          cpf: "987.654.321-00",
-          department: "Gerente",
-          permissions: ["manage_user", "manage_doctors", "create_reports"],
-        }
-
-        localStorage.setItem("managerData", JSON.stringify(managerData))
-        localStorage.setItem("userType", "manager")
-
-        toast({
-          title: "Login realizado com sucesso!",
-          description: "Bem-vindo ao sistema, " + managerData.name,
-        })
-
-        router.push("/manager/home")
-      } else {
-        toast({
-          title: "Erro no login",
-          description: "Por favor, preencha todos os campos.",
-          variant: "destructive",
-        })
-      }
-      setIsLoading(false)
-    }, 1500)
-  }
-
-  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">
-      <Card className="w-full max-w-md shadow-xl border-0 bg-white/80 backdrop-blur-sm">
-        <CardHeader className="text-center space-y-4 pb-8">
-          <div className="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
-            <IdCard className="w-8 h-8 text-blue-600" />
-          </div>
-          <div>
-            <CardTitle className="text-2xl font-bold text-gray-900">Área do Gestor</CardTitle>
-            <CardDescription className="text-gray-600 mt-2">Acesse o sistema médico</CardDescription>
-          </div>
-        </CardHeader>
-
-        <CardContent className="space-y-6">
-          <form onSubmit={handleSubmit} className="space-y-5">
-            <div className="space-y-2">
-              <Label htmlFor="email" className="text-sm font-medium text-gray-700">
-                E-mail
-              </Label>
-              <div className="relative">
-                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-                <Input
-                  id="email"
-                  type="email"
-                  placeholder="gestor@clinica.com"
-                  value={form.email}
-                  onChange={(e) => setForm({ ...form, email: e.target.value })}
-                  className="pl-10 h-11 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
-                  required
-                />
-              </div>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="password" className="text-sm font-medium text-gray-700">
-                Senha
-              </Label>
-              <div className="relative">
-                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-                <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-10 h-11 border-gray-200 focus:border-green-500 focus:ring-green-500"
-                  required
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
-                >
-                  {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                </button>
-              </div>
-            </div>
-
-            <Button
-              type="submit"
-              className="w-full h-11 bg-blue-600 hover:bg-blue-700 text-white font-medium"
-              disabled={isLoading}
-            >
-              {isLoading ? (
-                <>
-                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                  Entrando...
-                </>
-              ) : (
-                "Entrar"
-              )}
-            </Button>
-          </form>
-
-          <div className="relative">
-            <Separator className="my-6" />
-            <span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white px-3 text-sm text-gray-500">
-              ou
-            </span>
-          </div>
-
-          <div className="text-center">
-            <Link href="/" className="text-sm text-blue-600 hover:text-blue-700 font-medium hover:underline">
-              Voltar à página inicial
-            </Link>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  )
 }

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 ManagerLayout from "@/components/manager-layout"
+
+// 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 (
+        <ManagerLayout>
+            <div className="flex justify-center items-center h-full w-full py-16">
+                <Loader2 className="w-8 h-8 animate-spin text-green-600" />
+                <p className="ml-2 text-gray-600">Carregando dados do usuário...</p>
+            </div>
+        </ManagerLayout>
+    );
+  }
+
+  return (
+    <ManagerLayout>
+    <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-gray-900">
+            Editar Usuário: <span className="text-green-600">{formData.nomeCompleto}</span>
+          </h1>
+          <p className="text-sm text-gray-500">
+            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-white p-8 border rounded-lg shadow-sm">
+        {error && (
+             <div className="p-3 bg-red-100 text-red-700 rounded-lg border border-red-300">
+                <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-green-600 hover:bg-green-700"
+            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>
+    </ManagerLayout>
+  );
+}

app/manager/usuario/novo/page.tsx

@@ -0,0 +1,214 @@
+"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 ManagerLayout from "@/components/manager-layout"
+
+// Mock user service for demonstration. Replace with your actual API service.
+const usersService = {
+  create: async (payload: any) => {
+    console.log("API Call: Creating user with payload:", payload);
+    // Simulate network delay
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    // Simulate a success response
+    return { id: Date.now(), ...payload };
+    // To simulate an error, you could throw an error here:
+    // throw new Error("O e-mail informado já está em uso.");
+  }
+};
+
+// Define the structure for our form data
+interface UserFormData {
+  email: string;
+  password: string;
+  nomeCompleto: string;
+  telefone: string;
+  papel: string; // e.g., 'admin', 'gestor', 'medico', etc.
+}
+
+// Define the initial state for the form
+const defaultFormData: UserFormData = {
+  email: '',
+  password: '',
+  nomeCompleto: '',
+  telefone: '',
+  papel: '',
+};
+
+// Helper function to remove non-digit characters
+const cleanNumber = (value: string): string => value.replace(/\D/g, '');
+
+// Helper function to format a phone number
+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 NovoUsuarioPage() {
+  const router = useRouter();
+  const [formData, setFormData] = useState<UserFormData>(defaultFormData);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Handles changes in form inputs
+  const handleInputChange = (key: keyof UserFormData, value: string) => {
+    const updatedValue = key === 'telefone' ? formatPhone(value) : value;
+    setFormData((prev) => ({ ...prev, [key]: updatedValue }));
+  };
+
+  // Handles form submission
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    // Basic validation
+    if (!formData.email || !formData.password || !formData.nomeCompleto || !formData.papel) {
+      setError("Por favor, preencha todos os campos obrigatórios.");
+      return;
+    }
+
+    setIsSaving(true);
+
+    // Prepare payload for the API
+    const payload = {
+      email: formData.email,
+      password: formData.password,
+      full_name: formData.nomeCompleto,
+      phone: formData.telefone.trim() || null, // Send null if empty
+      role: formData.papel,
+    };
+
+    try {
+      await usersService.create(payload); 
+      // On success, redirect to the main user list page
+      router.push("/manager/usuario"); 
+    } catch (e: any) {
+      console.error("Erro ao criar usuário:", e);
+      setError(e.message || "Ocorreu um erro inesperado. Tente novamente.");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <ManagerLayout>
+      <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-gray-900">Novo Usuário</h1>
+            <p className="text-sm text-gray-500">
+              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-8 bg-white p-8 border rounded-lg shadow-sm">
+          
+          {/* Error Message Display */}
+          {error && (
+               <div className="p-3 bg-red-100 text-red-700 rounded-lg border border-red-300">
+                   <p className="font-medium">Erro no Cadastro:</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)}
+                placeholder="Nome e Sobrenome"
+                required
+              />
+            </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)}
+                        placeholder="exemplo@dominio.com"
+                        required
+                    />
+                </div>
+                <div className="space-y-2">
+                    <Label htmlFor="password">Senha *</Label>
+                    <Input
+                        id="password"
+                        type="password"
+                        value={formData.password}
+                        onChange={(e) => handleInputChange("password", e.target.value)}
+                        placeholder="••••••••"
+                        required
+                    />
+                </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)} required>
+                        <SelectTrigger id="papel">
+                        <SelectValue placeholder="Selecione uma função" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="gestor">Gestor</SelectItem>
+                            <SelectItem value="secretaria">Secretaria</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+            </div>
+          </div>
+
+          {/* Action Buttons */}
+          <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-green-600 hover:bg-green-700"
+              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>
+    </ManagerLayout>
+  );
+}

app/manager/usuario/page.tsx

@@ -0,0 +1,245 @@
+"use client";
+
+import React, { useEffect, useState, useCallback } from "react"
+import ManagerLayout from "@/components/manager-layout";
+import Link from "next/link"
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Plus, Edit, Trash2, Eye, Filter, Loader2 } from "lucide-react"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+
+// Mock user service for demonstration. Replace with your actual API service.
+const usersService = {
+  list: async (): Promise<User[]> => {
+    console.log("API Call: Fetching users...");
+    await new Promise(resolve => setTimeout(resolve, 500)); // Simulate network delay
+    return [
+      { id: 1, full_name: 'Alice Admin', email: 'alice.admin@example.com', phone: '(11) 98765-4321', role: 'user' },
+
+    ];
+  },
+  delete: async (id: number): Promise<void> => {
+    console.log(`API Call: Deleting user with ID ${id}`);
+    await new Promise(resolve => setTimeout(resolve, 700));
+    // In a real app, you'd handle potential errors here
+  }
+};
+
+// Interface for a User object
+interface User {
+    id: number;
+    full_name: string;
+    email: string;
+    phone: string | null;
+    role: 'admin' | 'gestor' | 'medico' | 'secretaria' | 'user';
+}
+
+// Interface for User Details (can be the same as User for this case)
+interface UserDetails extends User {}
+
+export default function UsersPage() {
+  const router = useRouter();
+
+  const [users, setUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
+  const [userDetails, setUserDetails] = useState<UserDetails | null>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [userToDeleteId, setUserToDeleteId] = useState<number | null>(null);
+  
+  const fetchUsers = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data: User[] = await usersService.list();
+      setUsers(data || []); 
+    } catch (e: any) {
+      console.error("Erro ao carregar lista de usuários:", e);
+      setError("Não foi possível carregar a lista de usuários. Tente novamente.");
+      setUsers([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchUsers();
+  }, [fetchUsers]);
+
+  const openDetailsDialog = (user: User) => {
+    setUserDetails(user);
+    setDetailsDialogOpen(true);
+  };
+
+  const handleDelete = async () => {
+    if (userToDeleteId === null) return;
+
+    setLoading(true);
+    try {
+      await usersService.delete(userToDeleteId);
+      console.log(`Usuário com ID ${userToDeleteId} excluído com sucesso!`);
+      setDeleteDialogOpen(false);
+      setUserToDeleteId(null);
+      await fetchUsers(); // Refresh the list after deletion
+    } catch (e) {
+      console.error("Erro ao excluir:", e);
+      alert("Erro ao excluir usuário.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const openDeleteDialog = (userId: number) => {
+    setUserToDeleteId(userId);
+    setDeleteDialogOpen(true);
+  };
+  
+  const handleEdit = (userId: number) => {
+    // Assuming the edit page is at a similar path
+    router.push(`/manager/usuario/${userId}/editar`);
+  };
+
+  return (
+    <ManagerLayout>
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Usuários Cadastrados</h1>
+          <p className="text-sm text-gray-500">Gerencie todos os usuários do sistema.</p>
+        </div>
+        <Link href="/manager/usuario/novo">
+          <Button className="bg-green-600 hover:bg-green-700">
+            <Plus className="w-4 h-4 mr-2" />
+            Adicionar Novo
+          </Button>
+        </Link>
+      </div>
+
+      {/* Filters Section */}
+      <div className="flex items-center space-x-4 bg-white p-4 rounded-lg border border-gray-200">
+        <Filter className="w-5 h-5 text-gray-400" />
+        <Select>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Filtrar por Papel" />
+          </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>
+
+      {/* Users Table */}
+      <div className="bg-white rounded-lg border border-gray-200 shadow-md overflow-hidden">
+        {loading ? (
+            <div className="p-8 text-center text-gray-500">
+                <Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-green-600" />
+                Carregando usuários...
+            </div>
+        ) : error ? (
+            <div className="p-8 text-center text-red-600">
+                {error}
+            </div>
+        ) : users.length === 0 ? (
+            <div className="p-8 text-center text-gray-500">
+                Nenhum usuário cadastrado. <Link href="/manager/usuario/novo" className="text-green-600 hover:underline">Adicione um novo</Link>.
+            </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200">
+              <thead className="bg-gray-50">
+                <tr>
+                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nome Completo</th>
+                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">E-mail</th>
+                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Telefone</th>
+                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Papel</th>
+                  <th scope="col" className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>
+                </tr>
+              </thead>
+              <tbody className="bg-white divide-y divide-gray-200">
+                {users.map((user) => (
+                  <tr key={user.id} className="hover:bg-gray-50">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{user.full_name}</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{user.email}</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{user.phone || "N/A"}</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 capitalize">{user.role}</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <div className="flex justify-end space-x-1">
+                          <Button variant="outline" size="icon" onClick={() => openDetailsDialog(user)} title="Visualizar Detalhes">
+                              <Eye className="h-4 w-4" />
+                          </Button>
+                          <Button variant="outline" size="icon" onClick={() => handleEdit(user.id)} title="Editar">
+                              <Edit className="h-4 w-4 text-blue-600" />
+                          </Button>
+                          <Button variant="outline" size="icon" onClick={() => openDeleteDialog(user.id)} title="Excluir">
+                              <Trash2 className="h-4 w-4 text-red-600" />
+                          </Button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+      
+      {/* Delete Confirmation Dialog */}
+      <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 usuário.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={loading}>Cancelar</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete} className="bg-red-600 hover:bg-red-700" disabled={loading}>
+                {loading ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : null}
+                Excluir
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* User Details Dialog */}
+      <AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle className="text-2xl">{userDetails?.full_name}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {userDetails && (
+                <div className="space-y-3 pt-2 text-left text-gray-700">
+                  <div className="grid grid-cols-1 gap-y-2 text-sm">
+                      <div><strong>E-mail:</strong> {userDetails.email}</div>
+                      <div><strong>Telefone:</strong> {userDetails.phone || 'Não informado'}</div>
+                      <div className="capitalize"><strong>Papel:</strong> {userDetails.role}</div>
+                  </div>
+                </div>
+              )}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Fechar</AlertDialogCancel>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+    </ManagerLayout>
+  );
+}

app/page.tsx

@@ -6,29 +6,29 @@ import { Button } from "@/components/ui/button"
 
 export default function InicialPage() {
   return (
-    <div className="min-h-screen flex flex-col bg-gray-50">
+    <div className="min-h-screen flex flex-col bg-background">
       {}
-      <div className="bg-black text-white text-sm py-2 px-6 flex justify-between">
+      <div className="bg-primary text-primary-foreground text-sm py-2 px-6 flex justify-between">
         <span> Horário: 08h00 - 21h00</span>
         <span> Email: contato@medconnect.com</span>
       </div>
 
       {}
-      <header className="bg-white shadow-md py-4 px-6 flex justify-between items-center">
+      <header className="bg-card shadow-md py-4 px-6 flex justify-between items-center">
-        <h1 className="text-2xl font-bold text-blue-700">MedConnect</h1>
+        <h1 className="text-2xl font-bold text-primary">MedConnect</h1>
-        <nav className="flex space-x-6 text-gray-700 font-medium">
+        <nav className="flex space-x-6 text-muted-foreground font-medium">
-          <a href="#home" className="hover:text-blue-600">Home</a>
+          <a href="#home" className="hover:text-primary">Home</a>
-          <a href="#about" className="hover:text-blue-600">Sobre</a>
+          <a href="#about" className="hover:text-primary">Sobre</a>
-          <a href="#departments" className="hover:text-blue-600">Departamentos</a>
+          <a href="#departments" className="hover:text-primary">Departamentos</a>
-          <a href="#doctors" className="hover:text-blue-600">Médicos</a>
+          <a href="#doctors" className="hover:text-primary">Médicos</a>
-          <a href="#contact" className="hover:text-blue-600">Contato</a>
+          <a href="#contact" className="hover:text-primary">Contato</a>
         </nav>
        <div className="flex space-x-4">
   {}
   <Link href="/cadastro">
     <Button
     variant="outline"
-    className="rounded-full px-6 py-2 border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white transition cursor-pointer"
+    className="rounded-full px-6 py-2 border-2 transition cursor-pointer"
   >
     Login
   </Button>
@@ -38,22 +38,21 @@ export default function InicialPage() {
       </header>
 
       {}
-      <section className="flex flex-col md:flex-row items-center justify-between px-10 md:px-20 py-16 bg-gray-100">
+      <section className="flex flex-col md:flex-row items-center justify-between px-10 md:px-20 py-16 bg-background">
         <div className="max-w-lg">
-          <h2 className="text-gray-600 uppercase text-sm">Bem-vindo à Saúde Digital</h2>
+          <h2 className="text-muted-foreground uppercase text-sm">Bem-vindo à Saúde Digital</h2>
-          <h1 className="text-4xl font-extrabold text-black leading-tight mt-2">
+          <h1 className="text-4xl font-extrabold text-foreground leading-tight mt-2">
             Soluções Médicas <br /> & Cuidados com a Saúde
           </h1>
-          <p className="text-gray-600 mt-4">
+          <p className="text-muted-foreground mt-4">
             Excelência em saúde há mais de 25 anos. Atendimento médicio com qualidade,segurança e carinho.
           </p>
           <div className="mt-6 flex space-x-4">
-            <Button className="rounded-full px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white shadow-lg transition">
+            <Button>
               Nossos Serviços
             </Button>
             <Button
-              variant="outline"
+              variant="secondary"
-              className="rounded-full px-6 py-2 border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white transition"
             >
               Saiba Mais
             </Button>
@@ -69,35 +68,35 @@ export default function InicialPage() {
       </section>
 
       {}
-      <section className="py-16 px-10 md:px-20 bg-white">
+      <section className="py-16 px-10 md:px-20 bg-card">
-        <h2 className="text-center text-3xl font-bold text-black">Cuidados completos para a sua saúde</h2>
+        <h2 className="text-center text-3xl font-bold text-foreground">Cuidados completos para a sua saúde</h2>
-        <p className="text-center text-gray-600 mt-2">Serviços médicos que oferecemos</p>
+        <p className="text-center text-muted-foreground mt-2">Serviços médicos que oferecemos</p>
 
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-10">
-          <div className="p-6 bg-gray-100 rounded-xl shadow hover:shadow-lg transition">
+          <div className="p-6 bg-background rounded-xl shadow hover:shadow-lg transition">
-            <h3 className="text-xl font-semibold text-blue-600">Clínica Geral</h3>
+            <h3 className="text-xl font-semibold text-primary">Clínica Geral</h3>
-            <p className="text-gray-600 mt-2">
+            <p className="text-muted-foreground mt-2">
               Seu primeiro passo para o cuidado. Atendimento focado na prevenção e no diagnóstico inicial.
             </p>
-            <Button className="mt-4 rounded-full bg-blue-600 hover:bg-blue-700 text-white px-5 py-2">
+            <Button className="mt-4">
               Agendar
             </Button>
           </div>
-          <div className="p-6 bg-gray-100 rounded-xl shadow hover:shadow-lg transition">
+          <div className="p-6 bg-background rounded-xl shadow hover:shadow-lg transition">
-            <h3 className="text-xl font-semibold text-blue-600">Pediatria</h3>
+            <h3 className="text-xl font-semibold text-primary">Pediatria</h3>
-            <p className="text-gray-600 mt-2">
+            <p className="text-muted-foreground mt-2">
               Cuidado gentil e especializado para garantir a saúde e o desenvolvimeto de crianças e adolescentes.
             </p>
-            <Button className="mt-4 rounded-full bg-blue-600 hover:bg-blue-700 text-white px-5 py-2">
+            <Button className="mt-4">
               Agendar
             </Button>
           </div>
-          <div className="p-6 bg-gray-100 rounded-xl shadow hover:shadow-lg transition">
+          <div className="p-6 bg-background rounded-xl shadow hover:shadow-lg transition">
-            <h3 className="text-xl font-semibold text-blue-600">Exames</h3>
+            <h3 className="text-xl font-semibold text-primary">Exames</h3>
-            <p className="text-gray-600 mt-2">
+            <p className="text-muted-foreground mt-2">
               Resultados rápidos e precisos em exames laboratoriais e de imagem essenciais para seu diagnóstico.
             </p>
-            <Button className="mt-4 rounded-full bg-blue-600 hover:bg-blue-700 text-white px-5 py-2">
+            <Button className="mt-4">
               Agendar
             </Button>
           </div>
@@ -105,7 +104,7 @@ export default function InicialPage() {
       </section>
 
       {}
-      <footer className="bg-black text-white py-6 text-center">
+      <footer className="bg-primary text-primary-foreground py-6 text-center">
         <p>© 2025 MedConnect</p>
       </footer>
     </div>

app/patient/login/page.tsx

@@ -1,164 +1,35 @@
-"use client"
+// Caminho: app/(patient)/login/page.tsx
 
-import type React from "react"
+import Link from "next/link";
+import { LoginForm } from "@/components/LoginForm";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
 
-import { useState } from "react"
+export default function PatientLoginPage() {
-import { useRouter } from "next/navigation"
+    return (
-import Link from "next/link"
+        <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">
-import { Button } from "@/components/ui/button"
+            <div className="w-full max-w-md">
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+                <div className="mb-8">
-import { Input } from "@/components/ui/input"
+                    <Link href="/" className="inline-flex items-center text-muted-foreground hover:text-primary transition-colors duration-200 font-medium">
-import { Label } from "@/components/ui/label"
+                        <ArrowLeft className="w-4 h-4 mr-2" />
-import { Eye, EyeOff, ArrowLeft, Stethoscope, Mail, Lock } from "lucide-react"
+                        Voltar ao início
+                    </Link>
+                </div>
 
-export default function PatientLogin() {
+                <LoginForm title="Área do Paciente" description="Acesse sua conta para gerenciar consultas" role="patient" themeColor="blue" redirectPath="/patient/dashboard">
-  const [showPassword, setShowPassword] = useState(false)
+                    {/* Este bloco é passado como 'children' para o LoginForm */}
-  const [email, setEmail] = useState("")
+                    <Link href="/patient/register" passHref>
-  const [password, setPassword] = useState("")
+                        <Button variant="outline" className="w-full h-12 text-base">
-  const [isLoading, setIsLoading] = useState(false)
+                            Criar nova conta
-  const router = useRouter()
+                        </Button>
+                    </Link>
+                </LoginForm>
 
-  const handleLogin = async (e: React.FormEvent) => {
+                {/* Conteúdo e espaçamento restaurados */}
-    e.preventDefault()
+                <div className="mt-8 text-center">
-    setIsLoading(true)
+                    <p className="text-sm text-muted-foreground">Problemas para acessar? Entre em contato conosco</p>
-
+                </div>
-    // Simulação de login - em produção, conectar com API real
-    setTimeout(() => {
-      if (email && password) {
-        // Salvar dados do usuário no localStorage para simulação
-        localStorage.setItem(
-          "patientData",
-          JSON.stringify({
-            name: "João Silva",
-            email: email,
-            phone: "(11) 99999-9999",
-            cpf: "123.456.789-00",
-            birthDate: "1990-01-01",
-            address: "Rua das Flores, 123 - São Paulo, SP",
-          }),
-        )
-        router.push("/patient/dashboard")
-      }
-      setIsLoading(false)
-    }, 1000)
-  }
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 flex 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-slate-600 hover:text-blue-600 transition-colors duration-200 font-medium"
-          >
-            <ArrowLeft className="w-4 h-4 mr-2" />
-            Voltar ao início
-          </Link>
-        </div>
-
-        <Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm">
-          <CardHeader className="text-center pb-8">
-            <div className="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
-              <Stethoscope className="w-8 h-8 text-blue-600" />
             </div>
-            <CardTitle className="text-3xl font-bold text-slate-800 mb-2">Área do Paciente</CardTitle>
-            <CardDescription className="text-slate-600 text-base">
-              Acesse sua conta para gerenciar consultas e laudos
-            </CardDescription>
-          </CardHeader>
-
-          <CardContent className="px-8 pb-8">
-            <form onSubmit={handleLogin} className="space-y-6">
-              <div className="space-y-2">
-                <Label htmlFor="email" className="text-slate-700 font-medium">
-                  Email
-                </Label>
-                <div className="relative">
-                  <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5" />
-                  <Input
-                    id="email"
-                    type="email"
-                    placeholder="seu@email.com"
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    className="pl-11 h-12 border-slate-200 focus:border-blue-500 focus:ring-blue-500"
-                    required
-                  />
-                </div>
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="password" className="text-slate-700 font-medium">
-                  Senha
-                </Label>
-                <div className="relative">
-                  <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5" />
-                  <Input
-                    id="password"
-                    type={showPassword ? "text" : "password"}
-                    placeholder="Sua senha"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    className="pl-11 pr-12 h-12 border-slate-200 focus:border-blue-500 focus:ring-blue-500"
-                    required
-                  />
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    className="absolute right-2 top-1/2 transform -translate-y-1/2 h-8 w-8 p-0 hover:bg-slate-100"
-                    onClick={() => setShowPassword(!showPassword)}
-                  >
-                    {showPassword ? (
-                      <EyeOff className="h-4 w-4 text-slate-400" />
-                    ) : (
-                      <Eye className="h-4 w-4 text-slate-400" />
-                    )}
-                  </Button>
-                </div>
-              </div>
-
-              <Button
-                type="submit"
-                className="w-full h-12 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50"
-                disabled={isLoading}
-              >
-                {isLoading ? (
-                  <div className="flex items-center">
-                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
-                    Entrando...
-                  </div>
-                ) : (
-                  "Entrar na minha conta"
-                )}
-              </Button>
-            </form>
-
-            <div className="mt-8 text-center">
-              <div className="relative">
-                <div className="absolute inset-0 flex items-center">
-                  <div className="w-full border-t border-slate-200"></div>
-                </div>
-                <div className="relative flex justify-center text-sm">
-                  <span className="px-4 bg-white text-slate-500">Novo por aqui?</span>
-                </div>
-              </div>
-              <div className="mt-4">
-                <Link
-                  href="/patient/register"
-                  className="inline-flex items-center justify-center w-full h-12 border border-slate-200 rounded-lg text-slate-700 hover:bg-slate-50 transition-colors duration-200 font-medium"
-                >
-                  Criar nova conta
-                </Link>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        <div className="mt-8 text-center">
-          <p className="text-sm text-slate-500">Problemas para acessar? Entre em contato conosco</p>
         </div>
-      </div>
+    );
-    </div>
-  )
 }

app/patient/schedule/page.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import type React from "react"
-import { useState } from "react"
+import { useState, useEffect, useCallback } from "react"
 // Importações de componentes omitidas para brevidade, mas estão no código original
 import PatientLayout from "@/components/patient-layout"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
@@ -11,6 +11,15 @@ import { Label } from "@/components/ui/label"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Textarea } from "@/components/ui/textarea"
 import { Calendar, Clock, User } from "lucide-react"
+import { doctorsService } from "services/doctorsApi.mjs";
+
+interface Doctor {
+    id: string;
+    full_name: string;
+    specialty: string;
+    phone_mobile: string;
+    
+}
 
 // Chave do LocalStorage, a mesma usada em secretarypage.tsx
 const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
@@ -20,13 +29,30 @@ export default function ScheduleAppointment() {
   const [selectedDate, setSelectedDate] = useState("")
   const [selectedTime, setSelectedTime] = useState("")
   const [notes, setNotes] = useState("")
+  const [doctors, setDoctors] = useState<Doctor[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
-  const doctors = [
+
-    { id: "1", name: "Dr. João Silva", specialty: "Cardiologia" },
+  const fetchDoctors = useCallback(async () => {
-    { id: "2", name: "Dra. Maria Santos", specialty: "Dermatologia" },
+      setLoading(true);
-    { id: "3", name: "Dr. Pedro Costa", specialty: "Ortopedia" },
+      setError(null);
-    { id: "4", name: "Dra. Ana Lima", specialty: "Ginecologia" },
+      try {
-  ]
+        
+        const data: Doctor[] = await doctorsService.list();
+        setDoctors(data || []); 
+      } 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]);
 
   const availableTimes = [
     "08:00",
@@ -65,7 +91,7 @@ export default function ScheduleAppointment() {
     const newAppointment = {
         id: new Date().getTime(), // ID único simples
         patientName: patientDetails.full_name,
-        doctor: doctorDetails.name, // Nome completo do médico (necessário para a listagem)
+        doctor: doctorDetails.full_name, // Nome completo do médico (necessário para a listagem)
         specialty: doctorDetails.specialty,
         date: selectedDate,
         time: selectedTime,
@@ -83,7 +109,7 @@ export default function ScheduleAppointment() {
     // 3. Salva a lista atualizada no LocalStorage
     localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(updatedAppointments));
 
-    alert(`Consulta com ${doctorDetails.name} agendada com sucesso!`);
+    alert(`Consulta com ${doctorDetails.full_name} agendada com sucesso!`);
     
     // Limpar o formulário após o sucesso (opcional)
     setSelectedDoctor("");
@@ -118,7 +144,7 @@ export default function ScheduleAppointment() {
                       <SelectContent>
                         {doctors.map((doctor) => (
                           <SelectItem key={doctor.id} value={doctor.id}>
-                            {doctor.name} - {doctor.specialty}
+                            {doctor.full_name} - {doctor.specialty}
                           </SelectItem>
                         ))}
                       </SelectContent>
@@ -185,7 +211,7 @@ export default function ScheduleAppointment() {
                 {selectedDoctor && (
                   <div className="flex items-center space-x-2">
                     <User className="h-4 w-4 text-gray-500" />
-                    <span className="text-sm">{doctors.find((d) => d.id === selectedDoctor)?.name}</span>
+                    <span className="text-sm">{doctors.find((d) => d.id === selectedDoctor)?.full_name}</span>
                   </div>
                 )}
 

app/secretary/appointments/page.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import SecretaryLayout from "@/components/secretary-layout";
+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 { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Calendar, Clock, MapPin, Phone, CalendarDays, X, User } from "lucide-react";
+import { toast } from "sonner";
+import Link from "next/link";
+
+const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
+
+const initialAppointments = [
+    {
+        id: 1,
+        patientName: "Carlos Pereira",
+        doctor: "Dr. João Silva",
+        specialty: "Cardiologia",
+        date: "2024-01-15",
+        time: "14:30",
+        status: "agendada",
+        location: "Consultório A - 2º andar",
+        phone: "(11) 3333-4444",
+    },
+    {
+        id: 2,
+        patientName: "Ana Beatriz Costa",
+        doctor: "Dra. Maria Santos",
+        specialty: "Dermatologia",
+        date: "2024-01-22",
+        time: "10:00",
+        status: "agendada",
+        location: "Consultório B - 1º andar",
+        phone: "(11) 3333-5555",
+    },
+    {
+        id: 3,
+        patientName: "Roberto Almeida",
+        doctor: "Dr. Pedro Costa",
+        specialty: "Ortopedia",
+        date: "2024-01-08",
+        time: "16:00",
+        status: "realizada",
+        location: "Consultório C - 3º andar",
+        phone: "(11) 3333-6666",
+    },
+    {
+        id: 4,
+        patientName: "Fernanda Lima",
+        doctor: "Dra. Ana Lima",
+        specialty: "Ginecologia",
+        date: "2024-01-05",
+        time: "09:30",
+        status: "realizada",
+        location: "Consultório D - 2º andar",
+        phone: "(11) 3333-7777",
+    },
+];
+
+export default function SecretaryAppointments() {
+    const [appointments, setAppointments] = useState<any[]>([]);
+    const [rescheduleModal, setRescheduleModal] = useState(false);
+    const [cancelModal, setCancelModal] = useState(false);
+    const [selectedAppointment, setSelectedAppointment] = useState<any>(null);
+    const [rescheduleData, setRescheduleData] = useState({ date: "", time: "", reason: "" });
+    const [cancelReason, setCancelReason] = useState("");
+
+    useEffect(() => {
+        const storedAppointments = localStorage.getItem(APPOINTMENTS_STORAGE_KEY);
+        if (storedAppointments) {
+            setAppointments(JSON.parse(storedAppointments));
+        } else {
+            setAppointments(initialAppointments);
+            localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(initialAppointments));
+        }
+    }, []);
+
+    const updateAppointments = (updatedAppointments: any[]) => {
+        setAppointments(updatedAppointments);
+        localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(updatedAppointments));
+    };
+
+    const handleReschedule = (appointment: any) => {
+        setSelectedAppointment(appointment);
+        setRescheduleData({ date: "", time: "", reason: "" });
+        setRescheduleModal(true);
+    };
+
+    const handleCancel = (appointment: any) => {
+        setSelectedAppointment(appointment);
+        setCancelReason("");
+        setCancelModal(true);
+    };
+
+    const confirmReschedule = () => {
+        if (!rescheduleData.date || !rescheduleData.time) {
+            toast.error("Por favor, selecione uma nova data e horário");
+            return;
+        }
+        const updated = appointments.map((apt) => (apt.id === selectedAppointment.id ? { ...apt, date: rescheduleData.date, time: rescheduleData.time } : apt));
+        updateAppointments(updated);
+        setRescheduleModal(false);
+        toast.success("Consulta reagendada com sucesso!");
+    };
+
+    const confirmCancel = () => {
+        if (!cancelReason.trim() || cancelReason.trim().length < 10) {
+            toast.error("O motivo do cancelamento é obrigatório e deve ter no mínimo 10 caracteres.");
+            return;
+        }
+        const updated = appointments.map((apt) => (apt.id === selectedAppointment.id ? { ...apt, status: "cancelada" } : apt));
+        updateAppointments(updated);
+        setCancelModal(false);
+        toast.success("Consulta cancelada com sucesso!");
+    };
+
+    const getStatusBadge = (status: string) => {
+        switch (status) {
+            case "agendada":
+                return <Badge className="bg-blue-100 text-blue-800">Agendada</Badge>;
+            case "realizada":
+                return <Badge className="bg-green-100 text-green-800">Realizada</Badge>;
+            case "cancelada":
+                return <Badge className="bg-red-100 text-red-800">Cancelada</Badge>;
+            default:
+                return <Badge variant="secondary">{status}</Badge>;
+        }
+    };
+
+    const timeSlots = ["08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30"];
+
+    return (
+        <SecretaryLayout>
+            <div className="space-y-6">
+                <div className="flex justify-between items-center">
+                    <div>
+                        <h1 className="text-3xl font-bold text-gray-900">Consultas Agendadas</h1>
+                        <p className="text-gray-600">Gerencie as consultas dos pacientes</p>
+                    </div>
+                    <Link href="/secretary/schedule">
+                        <Button>
+                            <Calendar className="mr-2 h-4 w-4" />
+                            Agendar Nova Consulta
+                        </Button>
+                    </Link>
+                </div>
+
+                <div className="grid gap-6">
+                    {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}</CardTitle>
+                                            <CardDescription>{appointment.specialty}</CardDescription>
+                                        </div>
+                                        {getStatusBadge(appointment.status)}
+                                    </div>
+                                </CardHeader>
+                                <CardContent>
+                                    <div className="grid md:grid-cols-2 gap-4">
+                                        <div className="space-y-3">
+                                            <div className="flex items-center text-sm text-gray-800 font-medium">
+                                                <User className="mr-2 h-4 w-4 text-gray-600" />
+                                                {appointment.patientName}
+                                            </div>
+                                            <div className="flex items-center text-sm text-gray-600">
+                                                <Calendar className="mr-2 h-4 w-4" />
+                                                {new Date(appointment.date).toLocaleDateString("pt-BR", { timeZone: "UTC" })}
+                                            </div>
+                                            <div className="flex items-center text-sm text-gray-600">
+                                                <Clock className="mr-2 h-4 w-4" />
+                                                {appointment.time}
+                                            </div>
+                                        </div>
+                                        <div className="space-y-3">
+                                            <div className="flex items-center text-sm text-gray-600">
+                                                <MapPin className="mr-2 h-4 w-4" />
+                                                {appointment.location}
+                                            </div>
+                                            <div className="flex items-center text-sm text-gray-600">
+                                                <Phone className="mr-2 h-4 w-4" />
+                                                {appointment.phone}
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    {appointment.status === "agendada" && (
+                                        <div className="flex gap-2 mt-4 pt-4 border-t">
+                                            <Button variant="outline" size="sm" onClick={() => handleReschedule(appointment)}>
+                                                <CalendarDays className="mr-2 h-4 w-4" />
+                                                Reagendar
+                                            </Button>
+                                            <Button variant="outline" size="sm" className="text-red-600 hover:text-red-700 hover:bg-red-50 bg-transparent" onClick={() => handleCancel(appointment)}>
+                                                <X className="mr-2 h-4 w-4" />
+                                                Cancelar
+                                            </Button>
+                                        </div>
+                                    )}
+                                </CardContent>
+                            </Card>
+                        ))
+                    ) : (
+                        <p>Nenhuma consulta encontrada.</p>
+                    )}
+                </div>
+            </div>
+
+            <Dialog open={rescheduleModal} onOpenChange={setRescheduleModal}>
+                <DialogContent className="sm:max-w-[425px]">
+                    <DialogHeader>
+                        <DialogTitle>Reagendar Consulta</DialogTitle>
+                        <DialogDescription>Reagendar consulta com {selectedAppointment?.doctor} para {selectedAppointment?.patientName}</DialogDescription>
+                    </DialogHeader>
+                    <div className="grid gap-4 py-4">
+                        <div className="grid gap-2">
+                            <Label htmlFor="date">Nova Data</Label>
+                            <Input id="date" type="date" value={rescheduleData.date} onChange={(e) => setRescheduleData((prev) => ({ ...prev, date: e.target.value }))} min={new Date().toISOString().split("T")[0]} />
+                        </div>
+                        <div className="grid gap-2">
+                            <Label htmlFor="time">Novo Horário</Label>
+                            <Select value={rescheduleData.time} onValueChange={(value) => setRescheduleData((prev) => ({ ...prev, time: value }))}>
+                                <SelectTrigger>
+                                    <SelectValue placeholder="Selecione um horário" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    {timeSlots.map((time) => (
+                                        <SelectItem key={time} value={time}>
+                                            {time}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
+                        <div className="grid gap-2">
+                            <Label htmlFor="reason">Motivo do Reagendamento (opcional)</Label>
+                            <Textarea id="reason" placeholder="Informe o motivo do reagendamento..." value={rescheduleData.reason} onChange={(e) => setRescheduleData((prev) => ({ ...prev, reason: e.target.value }))} />
+                        </div>
+                    </div>
+                    <DialogFooter>
+                        <Button variant="outline" onClick={() => setRescheduleModal(false)}>
+                            Cancelar
+                        </Button>
+                        <Button onClick={confirmReschedule}>Confirmar Reagendamento</Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            <Dialog open={cancelModal} onOpenChange={setCancelModal}>
+                <DialogContent className="sm:max-w-[425px]">
+                    <DialogHeader>
+                        <DialogTitle>Cancelar Consulta</DialogTitle>
+                        <DialogDescription>Tem certeza que deseja cancelar a consulta de {selectedAppointment?.patientName} com {selectedAppointment?.doctor}?</DialogDescription>
+                    </DialogHeader>
+                    <div className="grid gap-4 py-4">
+                        <div className="grid gap-2">
+                            <Label htmlFor="cancel-reason" className="text-sm font-medium">
+                                Motivo do Cancelamento <span className="text-red-500">*</span>
+                            </Label>
+                            <Textarea id="cancel-reason" placeholder="Por favor, informe o motivo do cancelamento... (obrigatório)" value={cancelReason} onChange={(e) => setCancelReason(e.target.value)} required className={`min-h-[100px] ${!cancelReason.trim() && cancelModal ? "border-red-300 focus:border-red-500" : ""}`} />
+                            <p className="text-xs text-gray-500">Mínimo de 10 caracteres. Este campo é obrigatório.</p>
+                        </div>
+                    </div>
+                    <DialogFooter>
+                        <Button variant="outline" onClick={() => setCancelModal(false)}>
+                            Voltar
+                        </Button>
+                        <Button variant="destructive" onClick={confirmCancel} disabled={!cancelReason.trim() || cancelReason.trim().length < 10}>
+                            Confirmar Cancelamento
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </SecretaryLayout>
+    );
+}

app/secretary/dashboard/page.tsx

@@ -0,0 +1,113 @@
+import SecretaryLayout from "@/components/secretary-layout"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Calendar, Clock, User, Plus } from "lucide-react"
+import Link from "next/link"
+
+export default function SecretaryDashboard() {
+    return (
+        <SecretaryLayout>
+            <div className="space-y-6">
+                <div>
+                    <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
+                    <p className="text-gray-600">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="/secretary/schedule">
+                                <Button className="w-full justify-start">
+                                    <Plus 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="##">
+                                <Button variant="outline" className="w-full justify-start bg-transparent">
+                                    <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-blue-50 rounded-lg">
+                                    <div>
+                                        <p className="font-medium">Dr. Silva</p>
+                                        <p className="text-sm text-gray-600">Cardiologia</p>
+                                    </div>
+                                    <div className="text-right">
+                                        <p className="font-medium">15 Jan</p>
+                                        <p className="text-sm text-gray-600">14:30</p>
+                                    </div>
+                                </div>
+                                <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
+                                    <div>
+                                        <p className="font-medium">Dra. Santos</p>
+                                        <p className="text-sm text-gray-600">Dermatologia</p>
+                                    </div>
+                                    <div className="text-right">
+                                        <p className="font-medium">22 Jan</p>
+                                        <p className="text-sm text-gray-600">10:00</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+            </div>
+        </SecretaryLayout>
+    )
+}

app/secretary/login/page.tsx

@@ -1,157 +1,11 @@
-"use client"
+// Caminho: app/(secretary)/login/page.tsx
 
-import type React from "react"
+import { LoginForm } from "@/components/LoginForm";
 
-import { useState } from "react"
+export default function SecretaryLoginPage() {
-import { useRouter } from "next/navigation"
+    return (
-import { Button } from "@/components/ui/button"
+        <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 flex items-center justify-center p-4">
-import { Input } from "@/components/ui/input"
+            <LoginForm title="Área da Secretária" description="Acesse o sistema de gerenciamento" role="secretary" themeColor="blue" redirectPath="/secretary/pacientes" />
-import { Label } from "@/components/ui/label"
+        </div>
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+    );
-import { Separator } from "@/components/ui/separator"
-import { useToast } from "@/hooks/use-toast"
-import { Eye, EyeOff, Mail, Lock, UserCheck, Loader2 } from "lucide-react"
-import Link from "next/link"
-
-interface LoginForm {
-  email: string
-  password: string
-}
-
-export default function SecretaryLogin() {
-  const [form, setForm] = useState<LoginForm>({ email: "", password: "" })
-  const [showPassword, setShowPassword] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const router = useRouter()
-  const { toast } = useToast()
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setIsLoading(true)
-
-    // Simular autenticação
-    setTimeout(() => {
-      if (form.email && form.password) {
-        // Simular dados da secretária
-        const secretaryData = {
-          id: "1",
-          name: "Maria Silva",
-          email: form.email,
-          phone: "(11) 99999-9999",
-          cpf: "123.456.789-00",
-          employeeId: "SEC001",
-          department: "Recepção",
-          permissions: ["manage_appointments", "view_patients", "manage_schedule"],
-        }
-
-        localStorage.setItem("secretaryData", JSON.stringify(secretaryData))
-        localStorage.setItem("userType", "secretary")
-
-        toast({
-          title: "Login realizado com sucesso!",
-          description: "Bem-vinda ao sistema, " + secretaryData.name,
-        })
-
-        router.push("/secretary/pacientes") // direciona para a página
-      } else {
-        toast({
-          title: "Erro no login",
-          description: "Por favor, preencha todos os campos.",
-          variant: "destructive",
-        })
-      }
-      setIsLoading(false)
-    }, 1500)
-  }
-
-  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">
-      <Card className="w-full max-w-md shadow-xl border-0 bg-white/80 backdrop-blur-sm">
-        <CardHeader className="text-center space-y-4 pb-8">
-          <div className="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
-            <UserCheck className="w-8 h-8 text-blue-600" />
-          </div>
-          <div>
-            <CardTitle className="text-2xl font-bold text-gray-900">Área da Secretária</CardTitle>
-            <CardDescription className="text-gray-600 mt-2">Acesse o sistema de gerenciamento</CardDescription>
-          </div>
-        </CardHeader>
-
-        <CardContent className="space-y-6">
-          <form onSubmit={handleSubmit} className="space-y-5">
-            <div className="space-y-2">
-              <Label htmlFor="email" className="text-sm font-medium text-gray-700">
-                E-mail
-              </Label>
-              <div className="relative">
-                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-                <Input
-                  id="email"
-                  type="email"
-                  placeholder="seu.email@clinica.com"
-                  value={form.email}
-                  onChange={(e) => setForm({ ...form, email: e.target.value })}
-                  className="pl-10 h-11 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
-                  required
-                />
-              </div>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="password" className="text-sm font-medium text-gray-700">
-                Senha
-              </Label>
-              <div className="relative">
-                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-                <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-10 h-11 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
-                  required
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
-                >
-                  {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                </button>
-              </div>
-            </div>
-
-            <Button
-              type="submit"
-              className="w-full h-11 bg-blue-600 hover:bg-blue-700 text-white font-medium"
-              disabled={isLoading}
-            >
-              {isLoading ? (
-                <>
-                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                  Entrando...
-                </>
-              ) : (
-                "Entrar"
-              )}
-            </Button>
-          </form>
-
-          <div className="relative">
-            <Separator className="my-6" />
-            <span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white px-3 text-sm text-gray-500">
-              ou
-            </span>
-          </div>
-
-          <div className="text-center">
-            <Link href="/" className="text-sm text-blue-600 hover:text-blue-700 font-medium hover:underline">
-              Voltar à página inicial
-            </Link>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  )
 }

app/secretary/pacientes/page.tsx

@@ -126,12 +126,12 @@ export default function PacientesPage() {
             <div className="space-y-6">
                 <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 text-gray-900">Pacientes</h1>
+                        <h1 className="text-xl md:text-2xl font-bold text-foreground">Pacientes</h1>
-                        <p className="text-gray-600 text-sm md:text-base">Gerencie as informações de seus pacientes</p>
+                        <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">
-                            <Button className="bg-blue-600 hover:bg-blue-700 w-full md:w-auto">
+                            <Button className="w-full md:w-auto">
                                 <Plus className="w-4 h-4 mr-2" />
                                 Adicionar
                             </Button>
@@ -139,10 +139,10 @@ export default function PacientesPage() {
                     </div>
                 </div>
 
-                <div className="flex flex-col md:flex-row flex-wrap gap-4 bg-white p-4 rounded-lg border border-gray-200">
+                <div className="flex flex-col md:flex-row flex-wrap gap-4 bg-card p-4 rounded-lg border border-border">
                     {/* Convênio */}
                     <div className="flex items-center gap-2 w-full md:w-auto">
-                        <span className="text-sm font-medium text-gray-700">Convênio</span>
+                        <span className="text-sm font-medium text-foreground">Convênio</span>
                         <Select value={convenioFilter} onValueChange={setConvenioFilter}>
                             <SelectTrigger className="w-full md:w-40">
                                 <SelectValue placeholder="Selecione o Convênio" />
@@ -157,7 +157,7 @@ export default function PacientesPage() {
                     </div>
 
                     <div className="flex items-center gap-2 w-full md:w-auto">
-                        <span className="text-sm font-medium text-gray-700">VIP</span>
+                        <span className="text-sm font-medium text-foreground">VIP</span>
                         <Select value={vipFilter} onValueChange={setVipFilter}>
                             <SelectTrigger className="w-full md:w-32">
                                 <SelectValue placeholder="Selecione" />
@@ -170,7 +170,7 @@ export default function PacientesPage() {
                         </Select>
                     </div>
                     <div className="flex items-center gap-2 w-full md:w-auto">
-                        <span className="text-sm font-medium text-gray-700">Aniversariantes</span>
+                        <span className="text-sm font-medium text-foreground">Aniversariantes</span>
                         <Select>
                             <SelectTrigger className="w-full md:w-32">
                                 <SelectValue placeholder="Selecione" />
@@ -184,7 +184,7 @@ export default function PacientesPage() {
                     </div>
 
                     <div className="flex items-center gap-2">
-                        <span className="text-sm font-medium text-gray-700">VIP</span>
+                        <span className="text-sm font-medium text-foreground">VIP</span>
                         <Select value={vipFilter} onValueChange={setVipFilter}>
                             <SelectTrigger className="w-32">
                                 <SelectValue placeholder="Selecione" />
@@ -198,7 +198,7 @@ export default function PacientesPage() {
                     </div>
 
                     <div className="flex items-center gap-2">
-                        <span className="text-sm font-medium text-gray-700">Aniversariantes</span>
+                        <span className="text-sm font-medium text-foreground">Aniversariantes</span>
                         <Select>
                             <SelectTrigger className="w-32">
                                 <SelectValue placeholder="Selecione" />
@@ -211,7 +211,7 @@ export default function PacientesPage() {
                         </Select>
                     </div>
 
-                    <Button variant="outline" className="ml-auto bg-transparent w-full md:w-auto">
+                    <Button variant="outline" className="ml-auto w-full md:w-auto">
                         <Filter className="w-4 h-4 mr-2" />
                         Filtro avançado
                     </Button>

app/secretary/schedule/page.tsx

@@ -0,0 +1,241 @@
+"use client";
+
+import type React from "react";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import SecretaryLayout from "@/components/secretary-layout";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { Calendar, Clock, User } from "lucide-react";
+import { patientsService } from "@/services/patientsApi.mjs";
+import { doctorsService } from "@/services/doctorsApi.mjs"; // Importar o serviço de médicos
+import { toast } from "sonner";
+
+const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
+
+export default function ScheduleAppointment() {
+    const router = useRouter();
+    const [patients, setPatients] = useState<any[]>([]);
+    const [doctors, setDoctors] = useState<any[]>([]); // Estado para armazenar os médicos da API
+    const [selectedPatient, setSelectedPatient] = useState("");
+    const [selectedDoctor, setSelectedDoctor] = useState("");
+    const [selectedDate, setSelectedDate] = useState("");
+    const [selectedTime, setSelectedTime] = useState("");
+    const [notes, setNotes] = useState("");
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                // Carrega pacientes e médicos em paralelo para melhor performance
+                const [patientList, doctorList] = await Promise.all([
+                    patientsService.list(),
+                    doctorsService.list()
+                ]);
+                setPatients(patientList);
+                setDoctors(doctorList);
+            } catch (error) {
+                console.error("Falha ao buscar dados iniciais:", error);
+                toast.error("Não foi possível carregar os dados de pacientes e médicos.");
+            }
+        };
+        fetchData();
+    }, []);
+
+    const availableTimes = ["08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30"];
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+
+        const patientDetails = patients.find((p) => String(p.id) === selectedPatient);
+        const doctorDetails = doctors.find((d) => String(d.id) === selectedDoctor);
+
+        if (!patientDetails || !doctorDetails) {
+            toast.error("Erro ao encontrar detalhes do paciente ou médico.");
+            return;
+        }
+
+        const newAppointment = {
+            id: new Date().getTime(), // ID único simples
+            patientName: patientDetails.full_name,
+            doctor: doctorDetails.full_name, // Usar full_name para consistência
+            specialty: doctorDetails.specialty,
+            date: selectedDate,
+            time: selectedTime,
+            status: "agendada",
+            location: doctorDetails.location || "Consultório a definir", // Fallback
+            phone: doctorDetails.phone || "N/A", // Fallback
+        };
+
+        const storedAppointmentsRaw = localStorage.getItem(APPOINTMENTS_STORAGE_KEY);
+        const currentAppointments = storedAppointmentsRaw ? JSON.parse(storedAppointmentsRaw) : [];
+        const updatedAppointments = [...currentAppointments, newAppointment];
+
+        localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(updatedAppointments));
+
+        toast.success("Consulta agendada com sucesso!");
+        router.push("/secretary/appointments");
+    };
+
+    return (
+        <SecretaryLayout>
+            <div className="space-y-6">
+                <div>
+                    <h1 className="text-3xl font-bold text-gray-900">Agendar Consulta</h1>
+                    <p className="text-gray-600">Escolha o paciente, médico, data e horário para a consulta</p>
+                </div>
+
+                <div className="grid lg:grid-cols-3 gap-6">
+                    <div className="lg:col-span-2">
+                        <Card>
+                            <CardHeader>
+                                <CardTitle>Dados da Consulta</CardTitle>
+                                <CardDescription>Preencha as informações para agendar a consulta</CardDescription>
+                            </CardHeader>
+                            <CardContent>
+                                <form onSubmit={handleSubmit} className="space-y-6">
+                                    <div className="space-y-2">
+                                        <Label htmlFor="patient">Paciente</Label>
+                                        <Select value={selectedPatient} onValueChange={setSelectedPatient}>
+                                            <SelectTrigger>
+                                                <SelectValue placeholder="Selecione um paciente" />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                {patients.length > 0 ? (
+                                                    patients.map((patient) => (
+                                                        <SelectItem key={patient.id} value={String(patient.id)}>
+                                                            {patient.full_name}
+                                                        </SelectItem>
+                                                    ))
+                                                ) : (
+                                                    <SelectItem value="loading" disabled>
+                                                        Carregando pacientes...
+                                                    </SelectItem>
+                                                )}
+                                            </SelectContent>
+                                        </Select>
+                                    </div>
+
+                                    <div className="space-y-2">
+                                        <Label htmlFor="doctor">Médico</Label>
+                                        <Select value={selectedDoctor} onValueChange={setSelectedDoctor}>
+                                            <SelectTrigger>
+                                                <SelectValue placeholder="Selecione um médico" />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                {doctors.length > 0 ? (
+                                                    doctors.map((doctor) => (
+                                                        <SelectItem key={doctor.id} value={String(doctor.id)}>
+                                                            {doctor.full_name} - {doctor.specialty}
+                                                        </SelectItem>
+                                                    ))
+                                                ) : (
+                                                    <SelectItem value="loading" disabled>
+                                                        Carregando médicos...
+                                                    </SelectItem>
+                                                )}
+                                            </SelectContent>
+                                        </Select>
+                                    </div>
+
+                                    <div className="grid md:grid-cols-2 gap-4">
+                                        <div className="space-y-2">
+                                            <Label htmlFor="date">Data</Label>
+                                            <Input id="date" type="date" value={selectedDate} onChange={(e) => setSelectedDate(e.target.value)} min={new Date().toISOString().split("T")[0]} />
+                                        </div>
+
+                                        <div className="space-y-2">
+                                            <Label htmlFor="time">Horário</Label>
+                                            <Select value={selectedTime} onValueChange={setSelectedTime}>
+                                                <SelectTrigger>
+                                                    <SelectValue placeholder="Selecione um horário" />
+                                                </SelectTrigger>
+                                                <SelectContent>
+                                                    {availableTimes.map((time) => (
+                                                        <SelectItem key={time} value={time}>
+                                                            {time}
+                                                        </SelectItem>
+                                                    ))}
+                                                </SelectContent>
+                                            </Select>
+                                        </div>
+                                    </div>
+
+                                    <div className="space-y-2">
+                                        <Label htmlFor="notes">Observações (opcional)</Label>
+                                        <Textarea id="notes" placeholder="Descreva brevemente o motivo da consulta ou observações importantes" value={notes} onChange={(e) => setNotes(e.target.value)} rows={3} />
+                                    </div>
+
+                                    <Button type="submit" className="w-full" disabled={!selectedPatient || !selectedDoctor || !selectedDate || !selectedTime}>
+                                        Agendar Consulta
+                                    </Button>
+                                </form>
+                            </CardContent>
+                        </Card>
+                    </div>
+
+                    <div className="space-y-6">
+                        <Card>
+                            <CardHeader>
+                                <CardTitle className="flex items-center">
+                                    <Calendar className="mr-2 h-5 w-5" />
+                                    Resumo
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent className="space-y-4">
+                                {selectedPatient && (
+                                    <div className="flex items-start space-x-2">
+                                        <User className="h-4 w-4 text-gray-500 mt-1 flex-shrink-0" />
+                                        <div className="text-sm">
+                                            <span className="font-semibold text-gray-800">Paciente:</span>
+                                            <p className="text-gray-600">{patients.find((p) => String(p.id) === selectedPatient)?.full_name}</p>
+                                        </div>
+                                    </div>
+                                )}
+
+                                {selectedDoctor && (
+                                    <div className="flex items-start space-x-2">
+                                        <User className="h-4 w-4 text-gray-500 mt-1 flex-shrink-0" />
+                                        <div className="text-sm">
+                                            <span className="font-semibold text-gray-800">Médico:</span>
+                                            <p className="text-gray-600">{doctors.find((d) => String(d.id) === selectedDoctor)?.full_name}</p>
+                                        </div>
+                                    </div>
+                                )}
+
+                                {selectedDate && (
+                                    <div className="flex items-center space-x-2">
+                                        <Calendar className="h-4 w-4 text-gray-500" />
+                                        <span className="text-sm">{new Date(selectedDate).toLocaleDateString("pt-BR", { timeZone: "UTC" })}</span>
+                                    </div>
+                                )}
+
+                                {selectedTime && (
+                                    <div className="flex items-center space-x-2">
+                                        <Clock className="h-4 w-4 text-gray-500" />
+                                        <span className="text-sm">{selectedTime}</span>
+                                    </div>
+                                )}
+                            </CardContent>
+                        </Card>
+
+                        <Card>
+                            <CardHeader>
+                                <CardTitle>Informações Importantes</CardTitle>
+                            </CardHeader>
+                            <CardContent className="text-sm text-gray-600 space-y-2">
+                                <p>• Chegue com 15 minutos de antecedência</p>
+                                <p>• Traga documento com foto</p>
+                                <p>• Traga carteirinha do convênio</p>
+                                <p>• Traga exames anteriores, se houver</p>
+                            </CardContent>
+                        </Card>
+                    </div>
+                </div>
+            </div>
+        </SecretaryLayout>
+    );
+}

components/LoginForm.tsx

@@ -0,0 +1,223 @@
+// Caminho: components/LoginForm.tsx
+"use client";
+
+import type React from "react";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import Cookies from "js-cookie";
+import { jwtDecode } from "jwt-decode";
+import { cn } from "@/lib/utils";
+
+// Componentes Shadcn UI
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { apikey } from "@/services/api.mjs";
+
+// Hook customizado
+import { useToast } from "@/hooks/use-toast";
+
+// Ícones
+import { Eye, EyeOff, Mail, Lock, Loader2, UserCheck, Stethoscope, IdCard, Receipt } from "lucide-react";
+
+interface LoginFormProps {
+    title: string;
+    description: string;
+    role: "secretary" | "doctor" | "patient" | "admin" | "manager" | "finance";
+    themeColor: "blue" | "green" | "orange";
+    redirectPath: string;
+    children?: React.ReactNode;
+}
+
+interface FormState {
+    email: string;
+    password: string;
+}
+
+// Supondo que o payload do seu token tenha esta estrutura
+interface DecodedToken {
+    name: string;
+    email: string;
+    role: string;
+    exp: number;
+    // Adicione outros campos que seu token possa ter
+}
+
+const themeClasses = {
+    blue: {
+        iconBg: "bg-blue-100",
+        iconText: "text-blue-600",
+        button: "bg-blue-600 hover:bg-blue-700",
+        link: "text-blue-600 hover:text-blue-700",
+        focus: "focus:border-blue-500 focus:ring-blue-500",
+    },
+    green: {
+        iconBg: "bg-green-100",
+        iconText: "text-green-600",
+        button: "bg-green-600 hover:bg-green-700",
+        link: "text-green-600 hover:text-green-700",
+        focus: "focus:border-green-500 focus:ring-green-500",
+    },
+    orange: {
+        iconBg: "bg-orange-100",
+        iconText: "text-orange-600",
+        button: "bg-orange-600 hover:bg-orange-700",
+        link: "text-orange-600 hover:text-orange-700",
+        focus: "focus:border-orange-500 focus:ring-orange-500",
+    },
+};
+
+const roleIcons = {
+    secretary: UserCheck,
+    patient: Stethoscope,
+    doctor: Stethoscope,
+    admin: UserCheck,
+    manager: IdCard,
+    finance: Receipt,
+};
+
+export function LoginForm({ title, description, role, themeColor, redirectPath, 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 currentTheme = themeClasses[themeColor];
+    const Icon = roleIcons[role];
+
+    // ==================================================================
+    // AJUSTE PRINCIPAL NA LÓGICA DE LOGIN
+    // ==================================================================
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setIsLoading(true);
+
+        const LOGIN_URL = "https://yuanqfswhberkoevtmfr.supabase.co/auth/v1/token?grant_type=password";
+        const API_KEY = apikey;
+
+        if (!API_KEY) {
+            toast({
+                title: "Erro de Configuração",
+                description: "A chave da API não foi encontrada.",
+            });
+            setIsLoading(false);
+            return;
+        }
+
+        try {
+            const response = await fetch(LOGIN_URL, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    apikey: API_KEY,
+                },
+                body: JSON.stringify({ email: form.email, password: form.password }),
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                throw new Error(data.error_description || "Credenciais inválidas. Tente novamente.");
+            }
+
+            const accessToken = data.access_token;
+            const user = data.user;
+
+            /* =================== Verificação de Role Desativada Temporariamente =================== */
+            // if (user.user_metadata.role !== role) {
+            //   toast({ title: "Acesso Negado", ... });
+            //   return;
+            // }
+            /* ===================================================================================== */
+
+            Cookies.set("access_token", accessToken, { expires: 1, secure: true });
+            localStorage.setItem("user_info", JSON.stringify(user));
+
+            toast({
+                title: "Login bem-sucedido!",
+                description: `Bem-vindo(a), ${user.user_metadata.full_name || "usuário"}! Redirecionando...`,
+            });
+
+            router.push(redirectPath);
+        } catch (error) {
+            toast({
+                title: "Erro no Login",
+                description: error instanceof Error ? error.message : "Ocorreu um erro inesperado.",
+            });
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    // O JSX do return permanece exatamente o mesmo, preservando seus ajustes.
+    return (
+        <Card className="w-full max-w-md shadow-xl border-0 bg-white/80 backdrop-blur-sm">
+            <CardHeader className="text-center space-y-4 pb-8">
+                <div className={cn("mx-auto w-16 h-16 rounded-full flex items-center justify-center", currentTheme.iconBg)}>
+                    <Icon className={cn("w-8 h-8", currentTheme.iconText)} />
+                </div>
+                <div>
+                    <CardTitle className="text-2xl font-bold text-gray-900">{title}</CardTitle>
+                    <CardDescription className="text-gray-600 mt-2">{description}</CardDescription>
+                </div>
+            </CardHeader>
+            <CardContent className="px-8 pb-8">
+                <form onSubmit={handleSubmit} className="space-y-6">
+                    {/* Inputs e Botão */}
+                    <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-gray-400 w-5 h-5" />
+                            <Input id="email" type="email" placeholder="seu.email@clinica.com" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} className={cn("pl-11 h-12 border-slate-200", currentTheme.focus)} required disabled={isLoading} />
+                        </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-gray-400 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={cn("pl-11 pr-12 h-12 border-slate-200", currentTheme.focus)} required disabled={isLoading} />
+                            <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-2 top-1/2 -translate-y-1/2 h-8 w-8 p-0 text-gray-400 hover:text-gray-600" disabled={isLoading}>
+                                {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                            </button>
+                        </div>
+                    </div>
+                    <Button type="submit" className={cn("w-full h-12 text-base font-semibold", currentTheme.button)} disabled={isLoading}>
+                        {isLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : "Entrar"}
+                    </Button>
+                </form>
+                {/* Conteúdo Extra (children) */}
+                <div className="mt-8">
+                    {children ? (
+                        <div className="space-y-4">
+                            <div className="relative">
+                                <div className="absolute inset-0 flex items-center">
+                                    <div className="w-full border-t border-slate-200"></div>
+                                </div>
+                                <div className="relative flex justify-center text-sm">
+                                    <span className="px-4 bg-white text-slate-500">Novo por aqui?</span>
+                                </div>
+                            </div>
+                            {children}
+                        </div>
+                    ) : (
+                        <>
+                            <div className="relative">
+                                <Separator className="my-6" />
+                                <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white px-3 text-sm text-gray-500">ou</span>
+                            </div>
+                            <div className="text-center">
+                                <Link href="/" className={cn("text-sm font-medium hover:underline", currentTheme.link)}>
+                                    Voltar à página inicial
+                                </Link>
+                            </div>
+                        </>
+                    )}
+                </div>
+            </CardContent>
+        </Card>
+    );
+}

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/doctor-layout.tsx

@@ -24,11 +24,11 @@ interface DoctorData {
     permissions: object;
 }
 
-interface PatientLayoutProps {
+interface DoctorLayoutProps {
     children: React.ReactNode;
 }
 
-export default function DoctorLayout({ children }: PatientLayoutProps) {
+export default function DoctorLayout({ children }: DoctorLayoutProps) {
     const [doctorData, setDoctorData] = useState<DoctorData | null>(null);
     const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
     const [showLogoutDialog, setShowLogoutDialog] = useState(false);
@@ -48,19 +48,19 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
     }, [router]);
 
     useEffect(() => {
-  const handleResize = () => setWindowWidth(window.innerWidth);
+        const handleResize = () => setWindowWidth(window.innerWidth);
-  handleResize(); // inicializa com a largura atual
+        handleResize(); // inicializa com a largura atual
-  window.addEventListener("resize", handleResize);
+        window.addEventListener("resize", handleResize);
-  return () => window.removeEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
-}, []);
+    }, []);
 
-useEffect(() => {
+    useEffect(() => {
-  if (isMobile) {
+        if (isMobile) {
-    setSidebarCollapsed(true);
+            setSidebarCollapsed(true);
-  } else {
+        } else {
-    setSidebarCollapsed(false);
+            setSidebarCollapsed(false);
-  }
+        }
-}, [isMobile]);
+    }, [isMobile]);
 
     const handleLogout = () => {
         setShowLogoutDialog(true);
@@ -82,7 +82,7 @@ useEffect(() => {
 
     const menuItems = [
         {
-            href: "#",
+            href: "/doctor/dashboard",
             icon: Home,
             label: "Dashboard",
             // Botão para o dashboard do médico
@@ -112,17 +112,17 @@ useEffect(() => {
     }
 
     return (
-        <div className="min-h-screen bg-gray-50 flex">
+        <div className="min-h-screen bg-background flex">
             {/* Sidebar para desktop */}
-            <div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
+            <div className={`bg-card border-r border-border transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
-                <div className="p-4 border-b border-gray-200">
+                <div className="p-4 border-b border-border">
                     <div className="flex items-center justify-between">
                         {!sidebarCollapsed && (
                             <div className="flex items-center gap-2">
-                                <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+                                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-                                    <div className="w-4 h-4 bg-white rounded-sm"></div>
+                                    <div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
                                 </div>
-                                <span className="font-semibold text-gray-900">MidConnecta</span>
+                                <span className="font-semibold text-foreground">MidConnecta</span>
                             </div>
                         )}
                         <Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
@@ -138,7 +138,7 @@ useEffect(() => {
 
                         return (
                             <Link key={item.href} href={item.href}>
-                                <div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
+                                <div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"}`}>
                                     <Icon className="w-5 h-5 flex-shrink-0" />
                                     {!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
                                 </div>
@@ -149,46 +149,62 @@ useEffect(() => {
 
                 // ... (seu código anterior)
 
-            {/* Sidebar para desktop */}
+                {/* Sidebar para desktop */}
-            <div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
+                <div className={`bg-card border-r border-border transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
-                <div className="p-4 border-b border-gray-200">
+                    <div className="p-4 border-b border-border">
-                    <div className="flex items-center justify-between">
+                        <div className="flex items-center justify-between">
-                        {!sidebarCollapsed && (
+                            {!sidebarCollapsed && (
-                            <div className="flex items-center gap-2">
+                                <div className="flex items-center gap-2">
-                                <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+                                    <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-                                    <div className="w-4 h-4 bg-white rounded-sm"></div>
+                                        <div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
+                                    </div>
+                                    <span className="font-semibold text-foreground">MedConnect</span>
                                 </div>
-                                <span className="font-semibold text-gray-900">MedConnect</span>
+                            )}
-                            </div>
+                            <Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
-                        )}
+                                {sidebarCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
-                        <Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
+                            </Button>
-                            {sidebarCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
+                        </div>
-                        </Button>
                     </div>
-                </div>
 
-                <nav className="flex-1 p-2 overflow-y-auto">
+                    <nav className="flex-1 p-2 overflow-y-auto">
-                    {menuItems.map((item) => {
+                        {menuItems.map((item) => {
-                        const Icon = item.icon;
+                            const Icon = item.icon;
-                        const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
+                            const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
 
-                        return (
+                            return (
-                            <Link key={item.href} href={item.href}>
+                                <Link key={item.href} href={item.href}>
-                                <div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
+                                    <div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"}`}>
-                                    <Icon className="w-5 h-5 flex-shrink-0" />
+                                        <Icon className="w-5 h-5 flex-shrink-0" />
-                                    {!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
+                                        {!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
-                                </div>
+                                    </div>
-                            </Link>
+                                </Link>
-                        );
+                            );
-                    })}
+                        })}
-                </nav>
+                    </nav>
 
-                <div className="border-t p-4 mt-auto">
+                    <div className="border-t p-4 mt-auto">
-                    <div className="flex items-center space-x-3 mb-4">
+                        <div className="flex items-center space-x-3 mb-4">
-                        {/* Se a sidebar estiver recolhida, o avatar e o texto do usuário também devem ser condensados ou ocultados */}
+                            {/* Se a sidebar estiver recolhida, o avatar e o texto do usuário também devem ser condensados ou ocultados */}
-                        {!sidebarCollapsed && (
+                            {!sidebarCollapsed && (
-                            <>
+                                <>
-                                <Avatar>
+                                    <Avatar>
+                                        <AvatarImage src="/placeholder.svg?height=40&width=40" />
+                                        <AvatarFallback>
+                                            {doctorData.name
+                                                .split(" ")
+                                                .map((n) => n[0])
+                                                .join("")}
+                                        </AvatarFallback>
+                                    </Avatar>
+                                    <div className="flex-1 min-w-0">
+                                        <p className="text-sm font-medium text-foreground truncate">{doctorData.name}</p>
+                                        <p className="text-xs text-muted-foreground truncate">{doctorData.specialty}</p>
+                                    </div>
+                                </>
+                            )}
+                            {sidebarCollapsed && (
+                                <Avatar className="mx-auto"> {/* Centraliza o avatar quando recolhido */}
                                     <AvatarImage src="/placeholder.svg?height=40&width=40" />
                                     <AvatarFallback>
                                         {doctorData.name
@@ -197,49 +213,33 @@ useEffect(() => {
                                             .join("")}
                                     </AvatarFallback>
                                 </Avatar>
-                                <div className="flex-1 min-w-0">
+                            )}
-                                    <p className="text-sm font-medium text-gray-900 truncate">{doctorData.name}</p>
+                        </div>
-                                    <p className="text-xs text-gray-500 truncate">{doctorData.specialty}</p>
-                                </div>
-                            </>
-                        )}
-                        {sidebarCollapsed && (
-                            <Avatar className="mx-auto"> {/* Centraliza o avatar quando recolhido */}
-                                <AvatarImage src="/placeholder.svg?height=40&width=40" />
-                                <AvatarFallback>
-                                    {doctorData.name
-                                        .split(" ")
-                                        .map((n) => n[0])
-                                        .join("")}
-                                </AvatarFallback>
-                            </Avatar>
-                        )}
-                    </div>
 
-                    {/* Novo botão de sair, usando a mesma estrutura dos itens de menu */}
+                        {/* Novo botão de sair, usando a mesma estrutura dos itens de menu */}
-                    <div
+                        <div
-                        className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors text-gray-600 hover:bg-gray-50 cursor-pointer ${sidebarCollapsed ? "justify-center" : ""}`}
+                            className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors text-muted-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer ${sidebarCollapsed ? "justify-center" : ""}`}
-                        onClick={handleLogout}
+                            onClick={handleLogout}
-                    >
+                        >
-                        <LogOut className="w-5 h-5 flex-shrink-0" />
+                            <LogOut className="w-5 h-5 flex-shrink-0" />
-                        {!sidebarCollapsed && <span className="font-medium">Sair</span>}
+                            {!sidebarCollapsed && <span className="font-medium">Sair</span>}
+                        </div>
                     </div>
                 </div>
-            </div>
+
-        
             </div>
 
             {/* Sidebar para mobile (apresentado como um menu overlay) */}
             {isMobileMenuOpen && (
-                <div className="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden" onClick={toggleMobileMenu}></div>
+                <div className="fixed inset-0 bg-background/50 z-40 md:hidden" onClick={toggleMobileMenu}></div>
             )}
-            <div className={`bg-white border-r border-gray-200 fixed left-0 top-0 h-screen flex flex-col z-50 transition-transform duration-300 md:hidden ${isMobileMenuOpen ? "translate-x-0 w-64" : "-translate-x-full w-64"}`}>
+            <div className={`bg-card border-r border-border fixed left-0 top-0 h-screen flex flex-col z-50 transition-transform duration-300 md:hidden ${isMobileMenuOpen ? "translate-x-0 w-64" : "-translate-x-full w-64"}`}>
-                <div className="p-4 border-b border-gray-200 flex items-center justify-between">
+                <div className="p-4 border-b border-border flex items-center justify-between">
                     <div className="flex items-center gap-2">
-                        <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+                        <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-                            <div className="w-4 h-4 bg-white rounded-sm"></div>
+                            <div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
                         </div>
-                        <span className="font-semibold text-gray-900">Hospital System</span>
+                        <span className="font-semibold text-foreground">Hospital System</span>
                     </div>
                     <Button variant="ghost" size="sm" onClick={toggleMobileMenu} className="p-1">
                         <X className="w-4 h-4" />
@@ -253,7 +253,7 @@ useEffect(() => {
 
                         return (
                             <Link key={item.href} href={item.href} onClick={toggleMobileMenu}> {/* Fechar menu ao clicar */}
-                                <div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
+                                <div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"}`}>
                                     <Icon className="w-5 h-5 flex-shrink-0" />
                                     <span className="font-medium">{item.label}</span>
                                 </div>
@@ -274,8 +274,8 @@ useEffect(() => {
                             </AvatarFallback>
                         </Avatar>
                         <div className="flex-1 min-w-0">
-                            <p className="text-sm font-medium text-gray-900 truncate">{doctorData.name}</p>
+                            <p className="text-sm font-medium text-foreground truncate">{doctorData.name}</p>
-                            <p className="text-xs text-gray-500 truncate">{doctorData.specialty}</p>
+                            <p className="text-xs text-muted-foreground truncate">{doctorData.specialty}</p>
                         </div>
                     </div>
                     <Button variant="outline" size="sm" className="w-full bg-transparent" onClick={() => { handleLogout(); toggleMobileMenu(); }}> {/* Fechar menu ao deslogar */}
@@ -287,21 +287,21 @@ useEffect(() => {
 
 
             {/* Main Content */}
-      <div className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"}`}>
+            <div className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"}`}>
                 {/* Header */}
-                <header className="bg-white border-b border-gray-200 px-6 py-4">
+                <header className="bg-card border-b border-border px-6 py-4">
                     <div className="flex items-center justify-between">
                         <div className="flex items-center gap-4 flex-1">
                             <div className="relative flex-1 max-w-md">
-                                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
-                                <Input placeholder="Buscar paciente" className="pl-10 bg-gray-50 border-gray-200" />
+                                <Input placeholder="Buscar paciente" className="pl-10 bg-background border-border" />
                             </div>
                         </div>
 
                         <div className="flex items-center gap-4">
                             <Button variant="ghost" size="sm" className="relative">
                                 <Bell className="w-5 h-5" />
-                                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">1</Badge>
+                                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">1</Badge>
                             </Button>
                         </div>
                     </div>

components/finance-layout.tsx

@@ -122,21 +122,21 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 flex">
+    <div className="min-h-screen bg-background flex">
       {/* Sidebar */}
       <div
-        className={`bg-white border-r border-gray-200 transition-all duration-300 ${
+        className={`bg-card border-r border-border transition-all duration-300 ${
           sidebarCollapsed ? "w-16" : "w-64"
         } fixed left-0 top-0 h-screen flex flex-col z-10`}
       >
-        <div className="p-4 border-b border-gray-200">
+        <div className="p-4 border-b border-border">
           <div className="flex items-center justify-between">
             {!sidebarCollapsed && (
               <div className="flex items-center gap-2">
-                <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-                  <div className="w-4 h-4 bg-white rounded-sm"></div>
+                  <div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
                 </div>
-                <span className="font-semibold text-gray-900">
+                <span className="font-semibold text-foreground">
                   MidConnecta
                 </span>
               </div>
@@ -168,8 +168,8 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
                 <div
                   className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
                     isActive
-                      ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
+                      ? "bg-accent text-accent-foreground"
-                      : "text-gray-600 hover:bg-gray-50"
+                      : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                   }`}
                 >
                   <Icon className="w-5 h-5 flex-shrink-0" />
@@ -196,10 +196,10 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
             </Avatar>
             {!sidebarCollapsed && (
               <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium text-gray-900 truncate">
+                <p className="text-sm font-medium text-foreground truncate">
                   {financierData.name}
                 </p>
-                <p className="text-xs text-gray-500 truncate">
+                <p className="text-xs text-muted-foreground truncate">
                   {financierData.department}
                 </p>
               </div>
@@ -233,14 +233,14 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
         }`}
       >
         {/* Header */}
-        <header className="bg-white border-b border-gray-200 px-6 py-4">
+        <header className="bg-card border-b border-border px-6 py-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-4 flex-1 max-w-md">
               <div className="relative flex-1">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
                 <Input
                   placeholder="Buscar paciente"
-                  className="pl-10 bg-gray-50 border-gray-200"
+                  className="pl-10 bg-background border-border"
                 />
               </div>
             </div>
@@ -248,7 +248,7 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
             <div className="flex items-center gap-4">
               <Button variant="ghost" size="sm" className="relative">
                 <Bell className="w-5 h-5" />
-                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
+                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">
                   1
                 </Badge>
               </Button>

components/hospital-layout.tsx

@@ -111,19 +111,19 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 flex">
+    <div className="min-h-screen bg-background flex">
       {/*  Sidebar  */}
       <div
-        className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} h-screen flex flex-col`}
+        className={`bg-card border-r border-border transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} h-screen flex flex-col`}
       >
-        <div className="p-4 border-b border-gray-200">
+        <div className="p-4 border-b border-border">
           <div className="flex items-center justify-between">
             {!sidebarCollapsed && (
               <div className="flex items-center gap-2">
-                <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-                  <div className="w-4 h-4 bg-white rounded-sm"></div>
+                  <div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
                 </div>
-                <span className="font-semibold text-gray-900">MedConnect</span>
+                <span className="font-semibold text-foreground">MedConnect</span>
               </div>
             )}
             <Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
@@ -141,7 +141,7 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
               <Link key={item.href} href={item.href}>
                 <div
                   className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
-                    isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"
+                    isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                   }`}
                 >
                   <Icon className="w-5 h-5 flex-shrink-0" />
@@ -164,8 +164,8 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
               </AvatarFallback>
             </Avatar>
             <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium text-gray-900 truncate">{patientData.name}</p>
+              <p className="text-sm font-medium text-foreground truncate">{patientData.name}</p>
-              <p className="text-xs text-gray-500 truncate">{patientData.email}</p>
+              <p className="text-xs text-muted-foreground truncate">{patientData.email}</p>
             </div>
           </div>
           <Button variant="outline" size="sm" className="w-full bg-transparent" onClick={handleLogout}>
@@ -178,19 +178,19 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
       {/* Main Content */}
       <div className="flex-1 flex flex-col">
         {/* Header */}
-        <header className="bg-white border-b border-gray-200 px-6 py-4">
+        <header className="bg-card border-b border-border px-6 py-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-4 flex-1 max-w-md">
               <div className="relative flex-1">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
-                <Input placeholder="Buscar paciente" className="pl-10 bg-gray-50 border-gray-200" />
+                <Input placeholder="Buscar paciente" className="pl-10 bg-background border-border" />
               </div>
             </div>
 
             <div className="flex items-center gap-4">
               <Button variant="ghost" size="sm" className="relative">
                 <Bell className="w-5 h-5" />
-                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
+                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">
                   1
                 </Badge>
               </Button>

components/manager-layout.tsx

@@ -37,11 +37,11 @@ interface ManagerData {
   permissions: object;
 }
 
-interface PatientLayoutProps {
+interface ManagerLayoutProps {
   children: React.ReactNode;
 }
 
-export default function ManagerLayout({ children }: PatientLayoutProps) {
+export default function ManagerLayout({ children }: ManagerLayoutProps) {
   const [managerData, setManagerData] = useState<ManagerData | null>(null);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [showLogoutDialog, setShowLogoutDialog] = useState(false);
@@ -84,10 +84,10 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
   const cancelLogout = () => setShowLogoutDialog(false);
 
   const menuItems = [
-    { href: "#", icon: Home, label: "Dashboard" },
+    { href: "/manager/dashboard", icon: Home, label: "Dashboard" },
     { href: "#", icon: Calendar, label: "Relatórios gerenciais" },
-    { href: "#", icon: User, label: "Gestão de Usuários" },
+    { href: "/manager/usuario", icon: User, label: "Gestão de Usuários" },
-    { href: "#", icon: User, label: "Gestão de Médicos" },
+    { href: "/manager/home", icon: User, label: "Gestão de Médicos" },
     { href: "#", icon: Calendar, label: "Configurações" },
   ];
 
@@ -96,20 +96,20 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 flex">
+    <div className="min-h-screen bg-background flex">
       {/* Sidebar */}
       <div
-        className={`bg-white border-r border-gray-200 transition-all duration-300 fixed top-0 h-screen flex flex-col z-30
+        className={`bg-card border-r border-border transition-all duration-300 fixed top-0 h-screen flex flex-col z-30
           ${sidebarCollapsed ? "w-16" : "w-64"}`}
       >
         {/* Logo + collapse button */}
-        <div className="p-4 border-b border-gray-200 flex items-center justify-between">
+        <div className="p-4 border-b border-border flex items-center justify-between">
           {!sidebarCollapsed && (
             <div className="flex items-center gap-2">
-              <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-                <div className="w-4 h-4 bg-white rounded-sm"></div>
+                <div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
               </div>
-              <span className="font-semibold text-gray-900">
+              <span className="font-semibold text-foreground">
                 MidConnecta
               </span>
             </div>
@@ -139,11 +139,10 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
             return (
               <Link key={item.href} href={item.href}>
                 <div
-                  className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
+                  className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive
-                    isActive
+                    ? "bg-accent text-accent-foreground"
-                      ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
+                    : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-                      : "text-gray-600 hover:bg-gray-50"
+                    }`}
-                  }`}
                 >
                   <Icon className="w-5 h-5 flex-shrink-0" />
                   {!sidebarCollapsed && (
@@ -169,10 +168,10 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
             </Avatar>
             {!sidebarCollapsed && (
               <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium text-gray-900 truncate">
+                <p className="text-sm font-medium text-foreground truncate">
                   {managerData.name}
                 </p>
-                <p className="text-xs text-gray-500 truncate">
+                <p className="text-xs text-muted-foreground truncate">
                   {managerData.department}
                 </p>
               </div>
@@ -205,14 +204,14 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
           ${sidebarCollapsed ? "ml-16" : "ml-64"}`}
       >
         {/* Header */}
-        <header className="bg-white border-b border-gray-200 px-4 md:px-6 py-4 flex items-center justify-between">
+        <header className="bg-card border-b border-border px-4 md:px-6 py-4 flex items-center justify-between">
           {/* Search */}
           <div className="flex items-center gap-4 flex-1 max-w-md">
             <div className="relative flex-1">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
               <Input
                 placeholder="Buscar paciente"
-                className="pl-10 bg-gray-50 border-gray-200"
+                className="pl-10 bg-background border-border"
               />
             </div>
           </div>
@@ -221,7 +220,7 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
           <div className="flex items-center gap-4 ml-auto">
             <Button variant="ghost" size="sm" className="relative">
               <Bell className="w-5 h-5" />
-              <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
+              <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">
                 1
               </Badge>
             </Button>

components/patient-layout.tsx

@@ -5,6 +5,7 @@ import { useState, useEffect } from "react"
 import Link from "next/link"
 import { useRouter, usePathname } from "next/navigation"
 import { Button } from "@/components/ui/button"
+import Cookies from "js-cookie"
 import { Input } from "@/components/ui/input"
 import { Badge } from "@/components/ui/badge"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
@@ -66,14 +67,31 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
   }, [])
 
   useEffect(() => {
-    const data = localStorage.getItem("patientData")
+    // 1. Procuramos pela chave correta: 'user_info'
-    if (data) {
+    const userInfoString = localStorage.getItem("user_info");
-      setPatientData(JSON.parse(data))
+    // 2. Para mais segurança, verificamos também se o token de acesso existe no cookie
-    } else {
+    const token = Cookies.get("access_token");
-      router.push("/patient/login")
-    }
-  }, [router])
 
+    if (userInfoString && token) {
+      const userInfo = JSON.parse(userInfoString);
+
+      // 3. Adaptamos os dados para a estrutura que seu layout espera (PatientData)
+      // Usamos os dados do objeto 'user' que a API do Supabase nos deu
+      setPatientData({
+        name: userInfo.user_metadata?.full_name || "Paciente",
+        email: userInfo.email || "",
+        // Os campos abaixo não vêm do login, então os deixamos vazios por enquanto
+        phone: userInfo.phone || "",
+        cpf: "", 
+        birthDate: "",
+        address: "",
+      });
+    } else {
+      // Se as informações do usuário ou o token não forem encontrados, mandamos para o login.
+      router.push("/patient/login");
+    }
+  }, [router]);
+  
   const handleLogout = () => setShowLogoutDialog(true)
 
   const confirmLogout = () => {
@@ -97,22 +115,22 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 flex">
+    <div className="min-h-screen bg-background flex">
       {/* Sidebar */}
       <div
-        className={`bg-white border-r border-gray-200 transition-all duration-300 ${
+        className={`bg-card border-r border-border transition-all duration-300 ${
           sidebarCollapsed ? "w-16" : "w-64"
         } fixed left-0 top-0 h-screen flex flex-col z-10`}
       >
         {/* Header da Sidebar */}
-        <div className="p-4 border-b border-gray-200">
+        <div className="p-4 border-b border-border">
           <div className="flex items-center justify-between">
             {!sidebarCollapsed && (
               <div className="flex items-center gap-2">
-                <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-                  <div className="w-4 h-4 bg-white rounded-sm"></div>
+                  <div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
                 </div>
-                <span className="font-semibold text-gray-900">MedConnect</span>
+                <span className="font-semibold text-foreground">MedConnect</span>
               </div>
             )}
             <Button
@@ -143,8 +161,8 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
                 <div
                   className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
                     isActive
-                      ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
+                      ? "bg-accent text-accent-foreground"
-                      : "text-gray-600 hover:bg-gray-50"
+                      : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                   }`}
                 >
                   <Icon className="w-5 h-5 flex-shrink-0" />
@@ -171,10 +189,10 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
             </Avatar>
             {!sidebarCollapsed && (
               <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium text-gray-900 truncate">
+                <p className="text-sm font-medium text-foreground truncate">
                   {patientData.name}
                 </p>
-                <p className="text-xs text-gray-500 truncate">
+                <p className="text-xs text-muted-foreground truncate">
                   {patientData.email}
                 </p>
               </div>
@@ -208,14 +226,14 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
         }`}
       >
         {/* Header */}
-        <header className="bg-white border-b border-gray-200 px-6 py-4">
+        <header className="bg-card border-b border-border px-6 py-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-4 flex-1 max-w-md">
               <div className="relative flex-1">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
                 <Input
                   placeholder="Buscar paciente"
-                  className="pl-10 bg-gray-50 border-gray-200"
+                  className="pl-10 bg-background border-border"
                 />
               </div>
             </div>
@@ -223,7 +241,7 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
             <div className="flex items-center gap-4">
               <Button variant="ghost" size="sm" className="relative">
                 <Bell className="w-5 h-5" />
-                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
+                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">
                   1
                 </Badge>
               </Button>

components/secretary-layout.tsx

@@ -41,11 +41,11 @@ interface SecretaryData {
   permissions: object
 }
 
-interface PatientLayoutProps {
+interface SecretaryLayoutProps {
   children: React.ReactNode
 }
 
-export default function SecretaryLayout({ children }: PatientLayoutProps) {
+export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
   const [showLogoutDialog, setShowLogoutDialog] = useState(false)
   const router = useRouter()
@@ -73,9 +73,9 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
   const cancelLogout = () => setShowLogoutDialog(false)
 
   const menuItems = [
-    { href: "##", icon: Home, label: "Dashboard" },
+    { href: "/secretary/dashboard", icon: Home, label: "Dashboard" },
-    { href: "###", icon: Calendar, label: "Consultas" },
+    { href: "/secretary/appointments", icon: Calendar, label: "Consultas" },
-    { href: "#", icon: Clock, label: "Agendar Consulta" },
+    { href: "/secretary/schedule", icon: Clock, label: "Agendar Consulta" },
     { href: "/secretary/pacientes", icon: User, label: "Pacientes" },
   ]
 
@@ -91,21 +91,21 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 flex">
+    <div className="min-h-screen bg-background flex">
       {/* Sidebar */}
       <div
-        className={`bg-white border-r border-gray-200 transition-all duration-300 
+        className={`bg-card border-r border-border transition-all duration-300 
           ${sidebarCollapsed ? "w-16" : "w-64"} 
           fixed left-0 top-0 h-screen flex flex-col z-10`}
       >
-        <div className="p-4 border-b border-gray-200">
+        <div className="p-4 border-b border-border">
           <div className="flex items-center justify-between">
             {!sidebarCollapsed && (
               <div className="flex items-center gap-2">
-                <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-                  <div className="w-4 h-4 bg-white rounded-sm"></div>
+                  <div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
                 </div>
-                <span className="font-semibold text-gray-900">MedConnect</span>
+                <span className="font-semibold text-foreground">MedConnect</span>
               </div>
             )}
             <Button
@@ -132,11 +132,10 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
             return (
               <Link key={item.href} href={item.href}>
                 <div
-                  className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
+                  className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive
-                    isActive
+                    ? "bg-accent text-accent-foreground"
-                      ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
+                    : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-                      : "text-gray-600 hover:bg-gray-50"
+                    }`}
-                  }`}
                 >
                   <Icon className="w-5 h-5 flex-shrink-0" />
                   {!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
@@ -159,10 +158,10 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
             </Avatar>
             {!sidebarCollapsed && (
               <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium text-gray-900 truncate">
+                <p className="text-sm font-medium text-foreground truncate">
                   {secretaryData.name}
                 </p>
-                <p className="text-xs text-gray-500 truncate">{secretaryData.email}</p>
+                <p className="text-xs text-muted-foreground truncate">{secretaryData.email}</p>
               </div>
             )}
           </div>
@@ -189,19 +188,18 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
 
       {/* Main Content */}
       <div
-        className={`flex-1 flex flex-col transition-all duration-300 ${
+        className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"
-          sidebarCollapsed ? "ml-16" : "ml-64"
+          }`}
-        }`}
       >
         {/* Header */}
-        <header className="bg-white border-b border-gray-200 px-6 py-4">
+        <header className="bg-card border-b border-border px-6 py-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-4 flex-1 max-w-md">
               <div className="relative flex-1">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
                 <Input
                   placeholder="Buscar paciente"
-                  className="pl-10 bg-gray-50 border-gray-200"
+                  className="pl-10 bg-background border-border"
                 />
               </div>
             </div>
@@ -216,7 +214,7 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
               */}
               <Button variant="ghost" size="sm" className="relative">
                 <Bell className="w-5 h-5" />
-                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
+                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">
                   1
                 </Badge>
               </Button>

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/ui/patient-details-modal.tsx

@@ -5,8 +5,8 @@ import {
 } from "@/components/ui/dialog";
 
 interface PatientDetailsModalProps {
-  patient: any;
   isOpen: boolean;
+  patient: any;
   onClose: () => void;
 }
 

package-lock.json

@@ -50,8 +50,10 @@
         "embla-carousel-react": "8.5.1",
         "geist": "^1.3.1",
         "input-otp": "1.4.1",
+        "js-cookie": "^3.0.5",
+        "jwt-decode": "^4.0.0",
         "lucide-react": "^0.454.0",
-        "next": "14.2.16",
+        "next": "^14.2.33",
         "next-themes": "^0.4.6",
         "react": "^18",
         "react-day-picker": "^9.8.0",
@@ -67,6 +69,7 @@
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4.1.9",
+        "@types/js-cookie": "^3.0.6",
         "@types/node": "^22",
         "@types/react": "^18",
         "@types/react-dom": "^18",
@@ -215,15 +218,15 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.2.16",
+      "version": "14.2.33",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.16.tgz",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.33.tgz",
-      "integrity": "sha512-fLrX5TfJzHCbnZ9YUSnGW63tMV3L4nSfhgOQ0iCcX21Pt+VSTDuaLsSuL8J/2XAiVA5AnzvXDpf6pMs60QxOag==",
+      "integrity": "sha512-CgVHNZ1fRIlxkLhIX22flAZI/HmpDaZ8vwyJ/B0SDPTBuLZ1PJ+DWMjCHhqnExfmSQzA/PbZi8OAc7PAq2w9IA==",
       "license": "MIT"
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.2.16",
+      "version": "14.2.33",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.16.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.33.tgz",
-      "integrity": "sha512-uFT34QojYkf0+nn6MEZ4gIWQ5aqGF11uIZ1HSxG+cSbj+Mg3+tYm8qXYd3dKN5jqKUm5rBVvf1PBRO/MeQ6rxw==",
+      "integrity": "sha512-HqYnb6pxlsshoSTubdXKu15g3iivcbsMXg4bYpjL2iS/V6aQot+iyF4BUc2qA/J/n55YtvE4PHMKWBKGCF/+wA==",
       "cpu": [
         "arm64"
       ],
@@ -237,9 +240,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.2.16",
+      "version": "14.2.33",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.16.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.33.tgz",
-      "integrity": "sha512-mCecsFkYezem0QiZlg2bau3Xul77VxUD38b/auAjohMA22G9KTJneUYMv78vWoCCFkleFAhY1NIvbyjj1ncG9g==",
+      "integrity": "sha512-8HGBeAE5rX3jzKvF593XTTFg3gxeU4f+UWnswa6JPhzaR6+zblO5+fjltJWIZc4aUalqTclvN2QtTC37LxvZAA==",
       "cpu": [
         "x64"
       ],
@@ -253,9 +256,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.16",
+      "version": "14.2.33",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.16.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.33.tgz",
-      "integrity": "sha512-yhkNA36+ECTC91KSyZcgWgKrYIyDnXZj8PqtJ+c2pMvj45xf7y/HrgI17hLdrcYamLfVt7pBaJUMxADtPaczHA==",
+      "integrity": "sha512-JXMBka6lNNmqbkvcTtaX8Gu5by9547bukHQvPoLe9VRBx1gHwzf5tdt4AaezW85HAB3pikcvyqBToRTDA4DeLw==",
       "cpu": [
         "arm64"
       ],
@@ -269,9 +272,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.16",
+      "version": "14.2.33",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.16.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.33.tgz",
-      "integrity": "sha512-X2YSyu5RMys8R2lA0yLMCOCtqFOoLxrq2YbazFvcPOE4i/isubYjkh+JCpRmqYfEuCVltvlo+oGfj/b5T2pKUA==",
+      "integrity": "sha512-Bm+QulsAItD/x6Ih8wGIMfRJy4G73tu1HJsrccPW6AfqdZd0Sfm5Imhgkgq2+kly065rYMnCOxTBvmvFY1BKfg==",
       "cpu": [
         "arm64"
       ],
@@ -285,9 +288,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.16",
+      "version": "14.2.33",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.16.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.33.tgz",
-      "integrity": "sha512-9AGcX7VAkGbc5zTSa+bjQ757tkjr6C/pKS7OK8cX7QEiK6MHIIezBLcQ7gQqbDW2k5yaqba2aDtaBeyyZh1i6Q==",
+      "integrity": "sha512-FnFn+ZBgsVMbGDsTqo8zsnRzydvsGV8vfiWwUo1LD8FTmPTdV+otGSWKc4LJec0oSexFnCYVO4hX8P8qQKaSlg==",
       "cpu": [
         "x64"
       ],
@@ -301,9 +304,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.16",
+      "version": "14.2.33",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.16.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.33.tgz",
-      "integrity": "sha512-Klgeagrdun4WWDaOizdbtIIm8khUDQJ/5cRzdpXHfkbY91LxBXeejL4kbZBrpR/nmgRrQvmz4l3OtttNVkz2Sg==",
+      "integrity": "sha512-345tsIWMzoXaQndUTDv1qypDRiebFxGYx9pYkhwY4hBRaOLt8UGfiWKr9FSSHs25dFIf8ZqIFaPdy5MljdoawA==",
       "cpu": [
         "x64"
       ],
@@ -317,9 +320,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.16",
+      "version": "14.2.33",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.16.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.33.tgz",
-      "integrity": "sha512-PwW8A1UC1Y0xIm83G3yFGPiOBftJK4zukTmk7DI1CebyMOoaVpd8aSy7K6GhobzhkjYvqS/QmzcfsWG2Dwizdg==",
+      "integrity": "sha512-nscpt0G6UCTkrT2ppnJnFsYbPDQwmum4GNXYTeoTIdsmMydSKFz9Iny2jpaRupTb+Wl298+Rh82WKzt9LCcqSQ==",
       "cpu": [
         "arm64"
       ],
@@ -333,9 +336,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.16",
+      "version": "14.2.33",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.16.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.33.tgz",
-      "integrity": "sha512-jhPl3nN0oKEshJBNDAo0etGMzv0j3q3VYorTSFqH1o3rwv1MQRdor27u1zhkgsHPNeY1jxcgyx1ZsCkDD1IHgg==",
+      "integrity": "sha512-pc9LpGNKhJ0dXQhZ5QMmYxtARwwmWLpeocFmVG5Z0DzWq5Uf0izcI8tLc+qOpqxO1PWqZ5A7J1blrUIKrIFc7Q==",
       "cpu": [
         "ia32"
       ],
@@ -349,9 +352,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.2.16",
+      "version": "14.2.33",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.16.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.33.tgz",
-      "integrity": "sha512-OA7NtfxgirCjfqt+02BqxC3MIgM/JaGjw9tOe4fyZgPsqfseNiMPnCRP44Pfs+Gpo9zPN+SXaFsgP6vk8d571A==",
+      "integrity": "sha512-nOjfZMy8B94MdisuzZo9/57xuFVLHJaDj5e/xrduJp9CV2/HrfxTRH2fbyLe+K9QT41WBLUd4iXX3R7jBp0EUg==",
       "cpu": [
         "x64"
       ],
@@ -2463,6 +2466,13 @@
       "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
       "license": "MIT"
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/linkify-it": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
@@ -3080,12 +3090,30 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "license": "MIT"
     },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.30.1",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
@@ -3452,12 +3480,12 @@
       }
     },
     "node_modules/next": {
-      "version": "14.2.16",
+      "version": "14.2.33",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.2.16.tgz",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.33.tgz",
-      "integrity": "sha512-LcO7WnFu6lYSvCzZoo1dB+IO0xXz5uEv52HF1IUN0IqVTUIZGHuuR10I5efiLadGt+4oZqTcNZyVVEem/TM5nA==",
+      "integrity": "sha512-GiKHLsD00t4ACm1p00VgrI0rUFAC9cRDGReKyERlM57aeEZkOQGcZTpIbsGn0b562FTPJWmYfKwplfO9EaT6ng==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "14.2.16",
+        "@next/env": "14.2.33",
         "@swc/helpers": "0.5.5",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001579",
@@ -3472,15 +3500,15 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.2.16",
+        "@next/swc-darwin-arm64": "14.2.33",
-        "@next/swc-darwin-x64": "14.2.16",
+        "@next/swc-darwin-x64": "14.2.33",
-        "@next/swc-linux-arm64-gnu": "14.2.16",
+        "@next/swc-linux-arm64-gnu": "14.2.33",
-        "@next/swc-linux-arm64-musl": "14.2.16",
+        "@next/swc-linux-arm64-musl": "14.2.33",
-        "@next/swc-linux-x64-gnu": "14.2.16",
+        "@next/swc-linux-x64-gnu": "14.2.33",
-        "@next/swc-linux-x64-musl": "14.2.16",
+        "@next/swc-linux-x64-musl": "14.2.33",
-        "@next/swc-win32-arm64-msvc": "14.2.16",
+        "@next/swc-win32-arm64-msvc": "14.2.33",
-        "@next/swc-win32-ia32-msvc": "14.2.16",
+        "@next/swc-win32-ia32-msvc": "14.2.33",
-        "@next/swc-win32-x64-msvc": "14.2.16"
+        "@next/swc-win32-x64-msvc": "14.2.33"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",

package.json

@@ -51,8 +51,10 @@
     "embla-carousel-react": "8.5.1",
     "geist": "^1.3.1",
     "input-otp": "1.4.1",
+    "js-cookie": "^3.0.5",
+    "jwt-decode": "^4.0.0",
     "lucide-react": "^0.454.0",
-    "next": "14.2.16",
+    "next": "^14.2.33",
     "next-themes": "^0.4.6",
     "react": "^18",
     "react-day-picker": "^9.8.0",
@@ -68,6 +70,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.9",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^22",
     "@types/react": "^18",
     "@types/react-dom": "^18",

services/api.mjs

@@ -1,90 +1,84 @@
-
 const BASE_URL = "https://yuanqfswhberkoevtmfr.supabase.co";
-const API_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl1YW5xZnN3aGJlcmtvZXZ0bWZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ5NTQzNjksImV4cCI6MjA3MDUzMDM2OX0.g8Fm4XAvtX46zifBZnYVH4tVuQkqUH6Ia9CXQj4DztQ"; 
+const API_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl1YW5xZnN3aGJlcmtvZXZ0bWZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ5NTQzNjksImV4cCI6MjA3MDUzMDM2OX0.g8Fm4XAvtX46zifBZnYVH4tVuQkqUH6Ia9CXQj4DztQ";
+export const apikey = API_KEY;
 var tempToken;
 
 export async function login() {
-  const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/auth/v1/token?grant_type=password", {
+    const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/auth/v1/token?grant_type=password", {
-    method: "POST",
+        method: "POST",
-    headers: {
+        headers: {
-      "Content-Type": "application/json",
+            "Content-Type": "application/json",
-      Prefer: "return=representation",
+            Prefer: "return=representation",
-      "apikey": API_KEY, // valor fixo
+            apikey: API_KEY, // valor fixo
-    },
+        },
-    body: JSON.stringify({ email: "riseup@popcode.com.br", password: "riseup" }),
+        body: JSON.stringify({ email: "riseup@popcode.com.br", password: "riseup" }),
-  });
+    });
 
-  const data = await response.json();
+    const data = await response.json();
- 
+
-  localStorage.setItem("token", data.access_token);
+    localStorage.setItem("token", data.access_token);
-  
+
-  return data;
+    return data;
 }
 
-
 let loginPromise = login();
 
-
- 
 async function request(endpoint, options = {}) {
-  
+    if (loginPromise) {
-  if (loginPromise) {
+        try {
-    try {
+            await loginPromise;
-        await loginPromise;
+        } catch (error) {
-    } catch (error) {
+            console.error("Falha na autenticação inicial:", error);
-        console.error("Falha na autenticação inicial:", error);
-    }
- 
-    loginPromise = null; 
-  }
-
-  const token = localStorage.getItem("token"); 
-
-  const headers = {
-    "Content-Type": "application/json",
-    "apikey": API_KEY, 
-    ...(token ? { "Authorization": `Bearer ${token}` } : {}), 
-    ...options.headers,
-  };
-
-  try {
-    const response = await fetch(`${BASE_URL}${endpoint}`, {
-      ...options,
-      headers,
-    });
-
-    if (!response.ok) {
-     
-      let errorBody = `Status: ${response.status}`;
-      try {
-        const contentType = response.headers.get("content-type");
-        if (contentType && contentType.includes("application/json")) {
-          const jsonError = await response.json();
-        
-          errorBody = jsonError.message || JSON.stringify(jsonError);
-        } else {
-          errorBody = await response.text();
         }
-      } catch (e) {
+
-       
+        loginPromise = null;
-        errorBody = `Status: ${response.status} - Falha ao ler corpo do erro.`;
-      }
-      
-      throw new Error(`Erro HTTP: ${response.status} - Detalhes: ${errorBody}`);
     }
-    const contentType = response.headers.get("content-type");
+
-    if (response.status === 204 || (contentType && !contentType.includes("application/json")) || !contentType) {
+    const token = localStorage.getItem("token");
-      return {}; 
+
+    const headers = {
+        "Content-Type": "application/json",
+        apikey: API_KEY,
+        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+        ...options.headers,
+    };
+
+    try {
+        const response = await fetch(`${BASE_URL}${endpoint}`, {
+            ...options,
+            headers,
+        });
+
+        if (!response.ok) {
+            let errorBody = `Status: ${response.status}`;
+            try {
+                const contentType = response.headers.get("content-type");
+                if (contentType && contentType.includes("application/json")) {
+                    const jsonError = await response.json();
+
+                    errorBody = jsonError.message || JSON.stringify(jsonError);
+                } else {
+                    errorBody = await response.text();
+                }
+            } catch (e) {
+                errorBody = `Status: ${response.status} - Falha ao ler corpo do erro.`;
+            }
+
+            throw new Error(`Erro HTTP: ${response.status} - Detalhes: ${errorBody}`);
+        }
+        const contentType = response.headers.get("content-type");
+        if (response.status === 204 || (contentType && !contentType.includes("application/json")) || !contentType) {
+            return {};
+        }
+        return await response.json();
+    } catch (error) {
+        console.error("Erro na requisição:", error);
+        throw error;
     }
-    return await response.json();
-  } catch (error) {
-    console.error("Erro na requisição:", error);
-    throw error;
-  }
 }
 export const api = {
-  get: (endpoint) => request(endpoint, { method: "GET" }),
+    get: (endpoint) => request(endpoint, { method: "GET" }),
-  post: (endpoint, data) => request(endpoint, { method: "POST", body: JSON.stringify(data) }),
+    post: (endpoint, data) => request(endpoint, { method: "POST", body: JSON.stringify(data) }),
-  patch: (endpoint, data) => request(endpoint, { method: "PATCH", body: JSON.stringify(data) }),
+    patch: (endpoint, data) => request(endpoint, { method: "PATCH", body: JSON.stringify(data) }),
-  delete: (endpoint) => request(endpoint, { method: "DELETE" }),
+    delete: (endpoint) => request(endpoint, { method: "DELETE" }),
-};
+};

styles/globals.css

@@ -1,125 +0,0 @@
-@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.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
-  --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.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --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);
-}
-
-@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;
-  }
-}