"use client"; import React, { useState, useEffect } from 'react'; import Link from 'next/link'; import { usePathname, useRouter } from 'next/navigation'; import { LayoutDashboard, Ticket, Link2, Monitor, FileText, Plus, Lightbulb, ChevronDown, PlusCircle, ArrowUpRight, ArrowDownLeft, History, BookOpen, Users, ClipboardCheck, CalendarDays, Settings, CheckSquare, Briefcase, Shield, } from 'lucide-react'; import { useAuthStore } from '@/stores'; import apiClient from '@/services/apiClient'; import type { MenuPermission } from '@/types'; const Sidebar = ({ isCollapsed }: { isCollapsed?: boolean }) => { const pathname = usePathname(); const router = useRouter(); const [isItamOpen, setIsItamOpen] = useState(pathname.startsWith('/itam')); const [isAdminOpen, setIsAdminOpen] = useState(pathname.startsWith('/settings')); const [menuPerms, setMenuPerms] = useState>({}); const [permsLoaded, setPermsLoaded] = useState(false); const user = useAuthStore((s) => s.user); const role = user?.roleCode; useEffect(() => { apiClient.get('/menu-permissions').then((res: any) => { if (res?.success && res.data) { const map: Record = {}; res.data.forEach((p: MenuPermission) => { map[p.menuKey] = p; }); setMenuPerms(map); } }).catch(() => {}).finally(() => setPermsLoaded(true)); }, []); const canAccess = (menuKey: string): boolean => { if (!permsLoaded) return true; // show all until loaded const perm = menuPerms[menuKey]; if (!perm) return true; try { const roles: string[] = JSON.parse(perm.allowedRoles); return role ? roles.includes(role) : false; } catch { return true; } }; const menuItems = [ { name: 'Dashboard', href: '/', icon: LayoutDashboard }, { name: 'SR Issues', href: '/issues', icon: Ticket }, { name: 'Dispatch', href: '/dispatch', icon: Link2 }, ]; const itamSubItems = [ { name: 'Asset Hub', href: '/itam', icon: Monitor }, { name: 'Register', href: '/itam/register', icon: PlusCircle }, { name: 'Check-out', href: '/itam/checkout', icon: ArrowUpRight }, { name: 'Check-in', href: '/itam/checkin', icon: ArrowDownLeft }, { name: 'History', href: '/itam', icon: History }, ]; const projects = [ { name: 'Samsung Pay SI', dot: 'bg-dot-green' }, { name: 'LG CNS SM', dot: 'bg-dot-orange' }, { name: 'Kakao Maintenance', dot: 'bg-dot-blue' }, ]; return ( ); }; export default Sidebar;