126 lines
4.6 KiB
TypeScript
126 lines
4.6 KiB
TypeScript
"use client"
|
|
|
|
import type React from "react"
|
|
|
|
import { useState } from "react"
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import {
|
|
Search,
|
|
Bell,
|
|
Settings,
|
|
Users,
|
|
UserCheck,
|
|
Calendar,
|
|
FileText,
|
|
BarChart3,
|
|
Home,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
} from "lucide-react"
|
|
|
|
interface HospitalLayoutProps {
|
|
children: React.ReactNode
|
|
}
|
|
|
|
export default function HospitalLayout({ children }: HospitalLayoutProps) {
|
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
|
|
const pathname = usePathname()
|
|
|
|
const menuItems = [
|
|
{ icon: Home, label: "Dashboard", href: "/" },
|
|
{ icon: Users, label: "Pacientes", href: "/pacientes" },
|
|
{ icon: UserCheck, label: "Médicos", href: "/medicos" },
|
|
{ icon: Calendar, label: "Consultas", href: "/consultas" },
|
|
{ icon: FileText, label: "Relatórios", href: "/relatorios" },
|
|
{ icon: BarChart3, label: "Estatísticas", href: "/estatisticas" },
|
|
{ icon: Settings, label: "Configurações", href: "/configuracoes" },
|
|
]
|
|
|
|
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"}`}
|
|
>
|
|
<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="p-2">
|
|
{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>
|
|
|
|
{/* Main Content */}
|
|
<div className="flex-1 flex flex-col">
|
|
{/* 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">
|
|
<div className="text-right">
|
|
<div className="text-sm font-medium text-gray-900">NÚCLEO DE ESPECIALIDADES</div>
|
|
</div>
|
|
|
|
<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 className="flex items-center gap-2">
|
|
<div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
|
|
<span className="text-white font-medium text-sm">RA</span>
|
|
</div>
|
|
<span className="text-sm font-medium text-gray-900">RA</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Page Content */}
|
|
<main className="flex-1 p-6">{children}</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|