84 lines
3.9 KiB
JavaScript
Executable File
84 lines
3.9 KiB
JavaScript
Executable File
// File: frontend/app/_components/SideNavigation.jsx
|
|
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { Home, FileText, Users, Settings, Package2, Upload, PlusCircle, Workflow, BarChart } from 'lucide-react';
|
|
import { can } from "@/lib/rbac";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
// Component นี้จะรับ user object ที่มี roles และ permissions มาจาก Server Component Parent
|
|
export function SideNavigation({ user }) {
|
|
const pathname = usePathname();
|
|
|
|
// สร้าง Array ของเมนูหลักตามโครงสร้างเดิมของคุณ
|
|
const mainNavLinks = [
|
|
{ href: '/dashboard', label: 'Dashboard', icon: Home, perm: null }, // หน้าแรกเข้าได้ทุกคน
|
|
{ href: '/correspondences', label: 'Correspondences', icon: FileText, perm: 'correspondence:view' },
|
|
{ href: '/drawings', label: 'Drawings', icon: FileText, perm: 'drawing:view' },
|
|
{ href: '/rfas', label: 'RFAs', icon: FileText, perm: 'rfa:view' },
|
|
{ href: '/transmittals', label: 'Transmittals', icon: FileText, perm: 'transmittal:view' },
|
|
{ href: '/reports', label: 'Reports', icon: BarChart, perm: 'report:view' },
|
|
];
|
|
|
|
// สร้าง Array ของเมนู Admin ตามโครงสร้างเดิมของคุณ
|
|
const adminNavLinks = [
|
|
{ href: '/admin', label: 'Admin', icon: Settings, perm: 'admin:view' },
|
|
{ href: '/users', label: 'ผู้ใช้/บทบาท', icon: Users, perm: 'users:manage' },
|
|
{ href: '/workflow', label: 'Workflow', icon: Workflow, perm: 'workflow:view' },
|
|
];
|
|
|
|
return (
|
|
<div className="flex flex-col h-full max-h-screen gap-2">
|
|
<div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
|
|
<Link href="/dashboard" className="flex items-center gap-2 font-semibold">
|
|
<Package2 className="w-6 h-6" />
|
|
<span className="">LCB P3 DMS</span>
|
|
</Link>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto">
|
|
<nav className="grid items-start px-2 text-sm font-medium lg:px-4">
|
|
{/* Render เมนูหลัก */}
|
|
{mainNavLinks.map(({ href, label, icon: Icon, perm }) =>
|
|
(perm === null || can(user, perm)) && (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className={cn(
|
|
'flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary',
|
|
(pathname === href || (href !== '/dashboard' && pathname.startsWith(href))) ? 'bg-muted text-primary' : ''
|
|
)}
|
|
>
|
|
<Icon className="w-4 h-4" />
|
|
{label}
|
|
</Link>
|
|
)
|
|
)}
|
|
|
|
{/* Render เมนู Admin ถ้ามีสิทธิ์อย่างน้อย 1 เมนู */}
|
|
{adminNavLinks.some(link => can(user, link.perm)) && (
|
|
<>
|
|
<div className="my-2 border-t"></div>
|
|
{adminNavLinks.map(({ href, label, icon: Icon, perm }) =>
|
|
can(user, perm) && (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className={cn(
|
|
'flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary',
|
|
pathname.startsWith(href) ? 'bg-muted text-primary' : ''
|
|
)}
|
|
>
|
|
<Icon className="w-4 h-4" />
|
|
{label}
|
|
</Link>
|
|
)
|
|
)}
|
|
</>
|
|
)}
|
|
</nav>
|
|
</div>
|
|
{/* ส่วน Card ด้านล่างสามารถคงไว้ หรือเอาออกได้ตามต้องการ */}
|
|
</div>
|
|
);
|
|
} |