dashboards

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/medicos/consultas/page.tsx

@@ -33,8 +33,8 @@ const LOGGED_IN_DOCTOR_NAME = "Dr. João Santos";
 // Função auxiliar para comparar se duas datas (Date objects) são o mesmo dia
 const isSameDay = (date1: Date, date2: Date) => {
     return date1.getFullYear() === date2.getFullYear() &&
-           date1.getMonth() === date2.getMonth() &&
-           date1.getDate() === date2.getDate();
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate();
 };
 
 // --- COMPONENTE PRINCIPAL ---
@@ -136,7 +136,7 @@ export default function DoctorAppointmentsPage() {
     };
 
     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";
 
 

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/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/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/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);
-  handleResize(); // inicializa com a largura atual
-  window.addEventListener("resize", handleResize);
-  return () => window.removeEventListener("resize", handleResize);
-}, []);
+        const handleResize = () => setWindowWidth(window.innerWidth);
+        handleResize(); // inicializa com a largura atual
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
 
-useEffect(() => {
-  if (isMobile) {
-    setSidebarCollapsed(true);
-  } else {
-    setSidebarCollapsed(false);
-  }
-}, [isMobile]);
+    useEffect(() => {
+        if (isMobile) {
+            setSidebarCollapsed(true);
+        } else {
+            setSidebarCollapsed(false);
+        }
+    }, [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
@@ -149,46 +149,62 @@ useEffect(() => {
 
                 // ... (seu código anterior)
 
-            {/* Sidebar para desktop */}
-            <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-border">
-                    <div className="flex items-center justify-between">
-                        {!sidebarCollapsed && (
-                            <div className="flex items-center gap-2">
-                                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-                                    <div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
+                {/* Sidebar para desktop */}
+                <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-border">
+                        <div className="flex items-center justify-between">
+                            {!sidebarCollapsed && (
+                                <div className="flex items-center gap-2">
+                                    <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+                                        <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-foreground">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>
+                            )}
+                            <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>
+                        </div>
                     </div>
-                </div>
 
-                <nav className="flex-1 p-2 overflow-y-auto">
-                    {menuItems.map((item) => {
-                        const Icon = item.icon;
-                        const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
+                    <nav className="flex-1 p-2 overflow-y-auto">
+                        {menuItems.map((item) => {
+                            const Icon = item.icon;
+                            const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
 
-                        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-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>
-                            </Link>
-                        );
-                    })}
-                </nav>
+                            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-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>
+                                </Link>
+                            );
+                        })}
+                    </nav>
 
-                <div className="border-t p-4 mt-auto">
-                    <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 */}
-                        {!sidebarCollapsed && (
-                            <>
-                                <Avatar>
+                    <div className="border-t p-4 mt-auto">
+                        <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 */}
+                            {!sidebarCollapsed && (
+                                <>
+                                    <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,35 +213,19 @@ useEffect(() => {
                                             .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
-                                        .split(" ")
-                                        .map((n) => n[0])
-                                        .join("")}
-                                </AvatarFallback>
-                            </Avatar>
-                        )}
-                    </div>
+                            )}
+                        </div>
 
-                    {/* Novo botão de sair, usando a mesma estrutura dos itens de menu */}
-                    <div
-                        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}
-                    >
-                        <LogOut className="w-5 h-5 flex-shrink-0" />
-                        {!sidebarCollapsed && <span className="font-medium">Sair</span>}
+                        {/* Novo botão de sair, usando a mesma estrutura dos itens de menu */}
+                        <div
+                            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}
+                        >
+                            <LogOut className="w-5 h-5 flex-shrink-0" />
+                            {!sidebarCollapsed && <span className="font-medium">Sair</span>}
+                        </div>
                     </div>
                 </div>
-            </div>
 
             </div>
 
@@ -287,7 +287,7 @@ 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-card border-b border-border px-6 py-4">
                     <div className="flex items-center justify-between">

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,7 +84,7 @@ 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: "#", icon: User, label: "Gestão de Médicos" },
@@ -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 ${
-                    isActive
-                      ? "bg-accent text-accent-foreground"
-                      : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-                  }`}
+                  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 && (

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: "###", icon: Calendar, label: "Consultas" },
-    { href: "#", icon: Clock, label: "Agendar Consulta" },
+    { href: "/secretary/dashboard", icon: Home, label: "Dashboard" },
+    { href: "/secretary/appointments", icon: Calendar, label: "Consultas" },
+    { href: "/secretary/schedule", icon: Clock, label: "Agendar Consulta" },
     { href: "/secretary/pacientes", icon: User, label: "Pacientes" },
   ]
 
@@ -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 ${
-                    isActive
-                      ? "bg-accent text-accent-foreground"
-                      : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-                  }`}
+                  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>}
@@ -189,9 +188,8 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
 
       {/* Main Content */}
       <div
-        className={`flex-1 flex flex-col transition-all duration-300 ${
-          sidebarCollapsed ? "ml-16" : "ml-64"
-        }`}
+        className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"
+          }`}
       >
         {/* Header */}
         <header className="bg-card border-b border-border px-6 py-4">