74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
"use client"
|
||
|
||
import Link from "next/link"
|
||
import { usePathname } from "next/navigation"
|
||
import { signOut } from "next-auth/react"
|
||
|
||
interface SidebarProps {
|
||
role: string
|
||
}
|
||
|
||
export default function Sidebar({ role }: SidebarProps) {
|
||
const pathname = usePathname()
|
||
|
||
const adminLinks = [
|
||
{ href: "/admin", label: "Dashboard", icon: "📊" },
|
||
{ href: "/admin/teams", label: "Teams", icon: "👥" },
|
||
{ href: "/admin/workers", label: "Workers", icon: "👷" },
|
||
{ href: "/admin/managers", label: "Shift Managers", icon: "👔" },
|
||
{ href: "/admin/machines", label: "Machines", icon: "⚙️" },
|
||
]
|
||
|
||
const managerLinks = [
|
||
{ href: "/shift-manager", label: "Dashboard", icon: "📊" },
|
||
{ href: "/shift-manager/shifts", label: "Shifts", icon: "🕐" },
|
||
{ href: "/shift-manager/create-shift", label: "Create Shift", icon: "➕" },
|
||
]
|
||
|
||
const operatorLinks = [
|
||
{ href: "/operator", label: "Active Shifts", icon: "🔄" },
|
||
{ href: "/operator/archive", label: "Shifts Archive", icon: "📁" },
|
||
]
|
||
|
||
const links = role === "admin" ? adminLinks : role === "shift_manager" ? managerLinks : operatorLinks
|
||
|
||
return (
|
||
<aside className="w-64 bg-gray-900 text-white min-h-screen flex flex-col">
|
||
<div className="p-6 border-b border-gray-800">
|
||
<h1 className="text-2xl font-bold">Müller</h1>
|
||
<p className="text-sm text-gray-400 mt-1">Production System</p>
|
||
</div>
|
||
|
||
<nav className="flex-1 p-4">
|
||
<ul className="space-y-2">
|
||
{links.map((link) => (
|
||
<li key={link.href}>
|
||
<Link
|
||
href={link.href}
|
||
className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
|
||
pathname === link.href
|
||
? "bg-blue-600 text-white"
|
||
: "text-gray-300 hover:bg-gray-800"
|
||
}`}
|
||
>
|
||
<span className="text-xl">{link.icon}</span>
|
||
<span>{link.label}</span>
|
||
</Link>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</nav>
|
||
|
||
<div className="p-4 border-t border-gray-800">
|
||
<button
|
||
onClick={() => signOut({ callbackUrl: "/login" })}
|
||
className="w-full flex items-center gap-3 px-4 py-3 rounded-lg text-gray-300 hover:bg-red-600 hover:text-white transition-colors"
|
||
>
|
||
<span className="text-xl">🚪</span>
|
||
<span>Logout</span>
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
)
|
||
}
|