Adicionados perfil de Gestor e Financeiro

app/finance/home/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import FinancierLayout from "@/components/finance-layout";
+
+interface Paciente {
+  id: string;
+  nome: string;
+  telefone: string;
+  cidade: string;
+  estado: string;
+  ultimoAtendimento?: string;
+  proximoAtendimento?: string;
+}
+
+export default function PacientesPage() {
+  const [pacientes, setPacientes] = useState<Paciente[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchPacientes() {
+      try {
+        setLoading(true);
+        setError(null);
+        const res = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes");
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const json = await res.json();
+        const items = Array.isArray(json?.data) ? json.data : [];
+
+        const mapped = items.map((p: any) => ({
+          id: String(p.id ?? ""),
+          nome: p.nome ?? "",
+          telefone: p?.contato?.celular ?? p?.contato?.telefone1 ?? p?.telefone ?? "",
+          cidade: p?.endereco?.cidade ?? p?.cidade ?? "",
+          estado: p?.endereco?.estado ?? p?.estado ?? "",
+          ultimoAtendimento: p.ultimo_atendimento ?? p.ultimoAtendimento ?? "",
+          proximoAtendimento: p.proximo_atendimento ?? p.proximoAtendimento ?? "",
+        }));
+
+        setPacientes(mapped);
+      } catch (e: any) {
+        setError(e?.message || "Erro ao carregar pacientes");
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchPacientes();
+  }, []);
+
+  return (
+    <FinancierLayout>
+      <div></div>
+    </FinancierLayout>
+  );
+}

app/finance/login/page.tsx

@@ -0,0 +1,155 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+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 { 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/manager/home/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import ManagerLayout from "@/components/manager-layout";
+
+interface Paciente {
+  id: string;
+  nome: string;
+  telefone: string;
+  cidade: string;
+  estado: string;
+  ultimoAtendimento?: string;
+  proximoAtendimento?: string;
+}
+
+export default function PacientesPage() {
+  const [pacientes, setPacientes] = useState<Paciente[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchPacientes() {
+      try {
+        setLoading(true);
+        setError(null);
+        const res = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes");
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const json = await res.json();
+        const items = Array.isArray(json?.data) ? json.data : [];
+
+        const mapped = items.map((p: any) => ({
+          id: String(p.id ?? ""),
+          nome: p.nome ?? "",
+          telefone: p?.contato?.celular ?? p?.contato?.telefone1 ?? p?.telefone ?? "",
+          cidade: p?.endereco?.cidade ?? p?.cidade ?? "",
+          estado: p?.endereco?.estado ?? p?.estado ?? "",
+          ultimoAtendimento: p.ultimo_atendimento ?? p.ultimoAtendimento ?? "",
+          proximoAtendimento: p.proximo_atendimento ?? p.proximoAtendimento ?? "",
+        }));
+
+        setPacientes(mapped);
+      } catch (e: any) {
+        setError(e?.message || "Erro ao carregar pacientes");
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchPacientes();
+  }, []);
+
+  return (
+    <ManagerLayout>
+      <div></div>
+    </ManagerLayout>
+  );
+}

app/manager/login/page.tsx

@@ -0,0 +1,155 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+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 { 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)
+
+    // Simular autenticação
+    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/page.tsx

@@ -117,7 +117,7 @@ export default function HomePage() {
                   <span>Gestão de usuários</span>
                 </div>
               </div>
-              <Link href="#" className="block mt-auto">
+              <Link href="/manager/login" className="block mt-auto">
                 <Button className="w-full bg-blue-600 hover:bg-blue-700">Entrar como Gestor</Button>
               </Link>
             </CardContent>
@@ -144,7 +144,7 @@ export default function HomePage() {
                   <span>Controle de pagamentos</span>
                 </div>
               </div>
-              <Link href="#" className="block mt-auto">
+              <Link href="/finance/login" className="block mt-auto">
                 <Button className="w-full bg-orange-600 hover:bg-orange-700">Entrar como Financeiro</Button>
               </Link>
             </CardContent>

components/finance-layout.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import type React from "react";
+
+import { useState, useEffect } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Search, Bell, Calendar, Clock, User, LogOut, Menu, X, Home, FileText, ChevronLeft, ChevronRight } from "lucide-react";
+
+interface FinancierData {
+    id: string,
+    name: string,
+    email: string,
+    phone: string,
+    cpf: string,
+    department: string,
+    permissions: object,
+}
+
+interface PatientLayoutProps {
+    children: React.ReactNode;
+}
+
+export default function FinancierLayout({ children }: PatientLayoutProps) {
+    const [financierData, setFinancierData] = useState<FinancierData | null>(null);
+    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+    const [showLogoutDialog, setShowLogoutDialog] = useState(false);
+    const router = useRouter();
+    const pathname = usePathname();
+
+    useEffect(() => {
+        const data = localStorage.getItem("financierData");
+        if (data) {
+            setFinancierData(JSON.parse(data));
+        } else {
+            router.push("/finance/login");
+        }
+    }, [router]);
+
+    const handleLogout = () => {
+        setShowLogoutDialog(true);
+    };
+
+    const confirmLogout = () => {
+        localStorage.removeItem("financierData");
+        setShowLogoutDialog(false);
+        router.push("/");
+    };
+
+    const cancelLogout = () => {
+        setShowLogoutDialog(false);
+    };
+
+    const menuItems = [
+        {
+            href: "#",
+            icon: Home,
+            label: "Dashboard",
+            // Botão para o dashboard do médico
+        },
+        {
+            href: "#",
+            icon: Calendar,
+            label: "Relatórios financeiros",
+            // Botão para o dashboard do médico
+        },
+        
+        {
+            href: "#",
+            icon: User,
+            label: "Finanças Gerais",
+            // Botão para página do editor de laudo
+        },
+        {
+            href: "#",
+            icon: Calendar,
+            label: "Configurações",
+            // Botão para página de consultas marcadas do médico atual
+        },
+    ];
+
+    if (!financierData) {
+        return <div>Carregando...</div>;
+    }
+
+    return (
+        <div className="min-h-screen bg-gray-50 flex">
+            {/* Sidebar */}
+            <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-10`}>
+                <div className="p-4 border-b border-gray-200">
+                    <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-4 h-4 bg-white rounded-sm"></div>
+                                </div>
+                                <span className="font-semibold text-gray-900">Hospital System</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>
+                    </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));
+
+                        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"}`}>
+                                    <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">
+                        <Avatar>
+                            <AvatarImage src="/placeholder.svg?height=40&width=40" />
+                            <AvatarFallback>
+                                {financierData.name
+                                    .split(" ")
+                                    .map((n) => n[0])
+                                    .join("")}
+                            </AvatarFallback>
+                        </Avatar>
+                        <div className="flex-1 min-w-0">
+                            <p className="text-sm font-medium text-gray-900 truncate">{financierData.name}</p>
+                            <p className="text-xs text-gray-500 truncate">{financierData.department}</p>
+                        </div>
+                    </div>
+                    <Button variant="outline" size="sm" className="w-full bg-transparent" onClick={handleLogout}>
+                        <LogOut className="mr-2 h-4 w-4" />
+                        Sair
+                    </Button>
+                </div>
+            </div>
+
+            {/* Main Content */}
+            <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">
+                    <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" />
+                                <Input placeholder="Buscar paciente" className="pl-10 bg-gray-50 border-gray-200" />
+                            </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>
+                            </Button>
+                        </div>
+                    </div>
+                </header>
+
+                {/* Page Content */}
+                <main className="flex-1 p-6">{children}</main>
+            </div>
+
+            {/* Logout confirmation dialog */}
+            <Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
+                <DialogContent className="sm:max-w-md">
+                    <DialogHeader>
+                        <DialogTitle>Confirmar Saída</DialogTitle>
+                        <DialogDescription>Deseja realmente sair do sistema? Você precisará fazer login novamente para acessar sua conta.</DialogDescription>
+                    </DialogHeader>
+                    <DialogFooter className="flex gap-2">
+                        <Button variant="outline" onClick={cancelLogout}>
+                            Cancelar
+                        </Button>
+                        <Button variant="destructive" onClick={confirmLogout}>
+                            <LogOut className="mr-2 h-4 w-4" />
+                            Sair
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+}

components/manager-layout.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import type React from "react";
+
+import { useState, useEffect } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Search, Bell, Calendar, Clock, User, LogOut, Menu, X, Home, FileText, ChevronLeft, ChevronRight } from "lucide-react";
+
+interface ManagerData {
+    id: string,
+    name: string,
+    email: string,
+    phone: string,
+    cpf: string,
+    department: string,
+    permissions: object,
+}
+
+interface PatientLayoutProps {
+    children: React.ReactNode;
+}
+
+export default function ManagerLayout({ children }: PatientLayoutProps) {
+    const [managerData, setManagerData] = useState<ManagerData | null>(null);
+    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+    const [showLogoutDialog, setShowLogoutDialog] = useState(false);
+    const router = useRouter();
+    const pathname = usePathname();
+
+    useEffect(() => {
+        const data = localStorage.getItem("managerData");
+        if (data) {
+            setManagerData(JSON.parse(data));
+        } else {
+            router.push("/manager/login");
+        }
+    }, [router]);
+
+    const handleLogout = () => {
+        setShowLogoutDialog(true);
+    };
+
+    const confirmLogout = () => {
+        localStorage.removeItem("managerData");
+        setShowLogoutDialog(false);
+        router.push("/");
+    };
+
+    const cancelLogout = () => {
+        setShowLogoutDialog(false);
+    };
+
+    const menuItems = [
+        {
+            href: "#",
+            icon: Home,
+            label: "Dashboard",
+            // Botão para o dashboard do médico
+        },
+        {
+            href: "#",
+            icon: Calendar,
+            label: "Relatórios gerenciais",
+            // Botão para o dashboard do médico
+        },
+        
+        {
+            href: "#",
+            icon: User,
+            label: "Gestão de Usuários",
+            // Botão para página do editor de laudo
+        },
+        {
+            href: "#",
+            icon: User,
+            label: "Gestão de Médicos",
+            // Botão para a página de visualização de todos os pacientes
+        },
+        {
+            href: "#",
+            icon: Calendar,
+            label: "Configurações",
+            // Botão para página de consultas marcadas do médico atual
+        },
+    ];
+
+    if (!managerData) {
+        return <div>Carregando...</div>;
+    }
+
+    return (
+        <div className="min-h-screen bg-gray-50 flex">
+            {/* Sidebar */}
+            <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-10`}>
+                <div className="p-4 border-b border-gray-200">
+                    <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-4 h-4 bg-white rounded-sm"></div>
+                                </div>
+                                <span className="font-semibold text-gray-900">Hospital System</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>
+                    </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));
+
+                        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"}`}>
+                                    <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">
+                        <Avatar>
+                            <AvatarImage src="/placeholder.svg?height=40&width=40" />
+                            <AvatarFallback>
+                                {managerData.name
+                                    .split(" ")
+                                    .map((n) => n[0])
+                                    .join("")}
+                            </AvatarFallback>
+                        </Avatar>
+                        <div className="flex-1 min-w-0">
+                            <p className="text-sm font-medium text-gray-900 truncate">{managerData.name}</p>
+                            <p className="text-xs text-gray-500 truncate">{managerData.department}</p>
+                        </div>
+                    </div>
+                    <Button variant="outline" size="sm" className="w-full bg-transparent" onClick={handleLogout}>
+                        <LogOut className="mr-2 h-4 w-4" />
+                        Sair
+                    </Button>
+                </div>
+            </div>
+
+            {/* Main Content */}
+            <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">
+                    <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" />
+                                <Input placeholder="Buscar paciente" className="pl-10 bg-gray-50 border-gray-200" />
+                            </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>
+                            </Button>
+                        </div>
+                    </div>
+                </header>
+
+                {/* Page Content */}
+                <main className="flex-1 p-6">{children}</main>
+            </div>
+
+            {/* Logout confirmation dialog */}
+            <Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
+                <DialogContent className="sm:max-w-md">
+                    <DialogHeader>
+                        <DialogTitle>Confirmar Saída</DialogTitle>
+                        <DialogDescription>Deseja realmente sair do sistema? Você precisará fazer login novamente para acessar sua conta.</DialogDescription>
+                    </DialogHeader>
+                    <DialogFooter className="flex gap-2">
+                        <Button variant="outline" onClick={cancelLogout}>
+                            Cancelar
+                        </Button>
+                        <Button variant="destructive" onClick={confirmLogout}>
+                            <LogOut className="mr-2 h-4 w-4" />
+                            Sair
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+}