260218:1712 20260218 TASK-BEFE-001n

frontend/components/admin/sidebar.tsx

@@ -1,9 +1,9 @@
-"use client";
+'use client';
 
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useState } from "react";
-import { cn } from "@/lib/utils";
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useState } from 'react';
+import { cn } from '@/lib/utils';
 import {
   Users,
   Building2,
@@ -16,7 +16,7 @@ import {
   FileStack,
   ChevronDown,
   ChevronRight,
-} from "lucide-react";
+} from 'lucide-react';
 
 interface MenuItem {
   href?: string;
@@ -26,29 +26,47 @@ interface MenuItem {
 }
 
 const menuItems: MenuItem[] = [
-  { href: "/admin/users", label: "Users", icon: Users },
-  { href: "/admin/organizations", label: "Organizations", icon: Building2 },
-  { href: "/admin/projects", label: "Projects", icon: FileText },
-  { href: "/admin/contracts", label: "Contracts", icon: FileText },
-  { href: "/admin/reference", label: "Reference Data", icon: BookOpen },
   {
-    label: "Drawing Master Data",
+    label: 'Access Control',
+    icon: Shield,
+    children: [
+      { href: '/admin/access-control/users', label: 'Users' },
+      { href: '/admin/access-control/roles', label: 'Roles' },
+      { href: '/admin/access-control/organizations', label: 'Organizations' },
+    ],
+  },
+  {
+    label: 'Document Control',
     icon: FileStack,
     children: [
-      { href: "/admin/drawings/contract/volumes", label: "Contract: Volumes" },
-      { href: "/admin/drawings/contract/categories", label: "Contract: Categories" },
-      { href: "/admin/drawings/contract/sub-categories", label: "Contract: Sub-categories" },
-      { href: "/admin/drawings/shop/main-categories", label: "Shop: Main Categories" },
-      { href: "/admin/drawings/shop/sub-categories", label: "Shop: Sub-categories" },
-    ]
+      { href: '/admin/doc-control/projects', label: 'Projects' },
+      { href: '/admin/doc-control/contracts', label: 'Contracts' },
+      { href: '/admin/doc-control/numbering', label: 'Numbering' },
+      { href: '/admin/doc-control/reference', label: 'Reference Data' },
+      { href: '/admin/doc-control/workflows', label: 'Workflows' },
+    ],
   },
-  { href: "/admin/numbering", label: "Numbering", icon: FileText },
-  { href: "/admin/workflows", label: "Workflows", icon: GitGraph },
-  { href: "/admin/security/roles", label: "Security Roles", icon: Shield },
-  { href: "/admin/security/sessions", label: "Active Sessions", icon: Users },
-  { href: "/admin/system-logs/numbering", label: "System Logs", icon: Activity },
-  { href: "/admin/audit-logs", label: "Audit Logs", icon: Activity },
-  { href: "/admin/settings", label: "Settings", icon: Settings },
+  {
+    label: 'Drawing Master',
+    icon: FileStack, // Or another icon
+    children: [
+      { href: '/admin/doc-control/drawings/contract/volumes', label: 'Contract: Volumes' },
+      { href: '/admin/doc-control/drawings/contract/categories', label: 'Contract: Categories' },
+      { href: '/admin/doc-control/drawings/contract/sub-categories', label: 'Contract: Sub-categories' },
+      { href: '/admin/doc-control/drawings/shop/main-categories', label: 'Shop: Main Categories' },
+      { href: '/admin/doc-control/drawings/shop/sub-categories', label: 'Shop: Sub-categories' },
+    ],
+  },
+  {
+    label: 'Monitoring',
+    icon: Activity,
+    children: [
+      { href: '/admin/monitoring/audit-logs', label: 'Audit Logs' },
+      { href: '/admin/monitoring/system-logs/numbering', label: 'System Logs' },
+      { href: '/admin/monitoring/sessions', label: 'Active Sessions' },
+    ],
+  },
+  { href: '/admin/settings', label: 'Settings', icon: Settings },
 ];
 
 export function AdminSidebar() {
@@ -56,23 +74,19 @@ export function AdminSidebar() {
   const [expandedMenus, setExpandedMenus] = useState<string[]>(
     // Auto-expand if current path matches a child
     menuItems
-      .filter(item => item.children?.some(child => pathname.startsWith(child.href)))
-      .map(item => item.label)
+      .filter((item) => item.children?.some((child) => pathname.startsWith(child.href)))
+      .map((item) => item.label)
   );
 
   const toggleMenu = (label: string) => {
-    setExpandedMenus(prev =>
-      prev.includes(label)
-        ? prev.filter(l => l !== label)
-        : [...prev, label]
-    );
+    setExpandedMenus((prev) => (prev.includes(label) ? prev.filter((l) => l !== label) : [...prev, label]));
   };
 
   return (
     <aside className="w-64 border-r bg-card p-4 hidden md:block">
       <div className="mb-8 px-2">
-         <h2 className="text-xl font-bold tracking-tight">Admin Console</h2>
-         <p className="text-sm text-muted-foreground">LCBP3 DMS</p>
+        <h2 className="text-xl font-bold tracking-tight">Admin Console</h2>
+        <p className="text-sm text-muted-foreground">LCBP3 DMS</p>
       </div>
 
       <nav className="space-y-1">
@@ -82,28 +96,24 @@ export function AdminSidebar() {
           // Has children - collapsible menu
           if (item.children) {
             const isExpanded = expandedMenus.includes(item.label);
-            const hasActiveChild = item.children.some(child => pathname.startsWith(child.href));
+            const hasActiveChild = item.children.some((child) => pathname.startsWith(child.href));
 
             return (
               <div key={item.label}>
                 <button
                   onClick={() => toggleMenu(item.label)}
                   className={cn(
-                    "w-full flex items-center justify-between gap-3 px-3 py-2 rounded-lg transition-colors text-sm font-medium",
+                    'w-full flex items-center justify-between gap-3 px-3 py-2 rounded-lg transition-colors text-sm font-medium',
                     hasActiveChild
-                      ? "bg-primary/10 text-primary"
-                      : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                      ? 'bg-primary/10 text-primary'
+                      : 'text-muted-foreground hover:bg-muted hover:text-foreground'
                   )}
                 >
                   <span className="flex items-center gap-3">
                     <Icon className="h-4 w-4" />
                     <span>{item.label}</span>
                   </span>
-                  {isExpanded ? (
-                    <ChevronDown className="h-4 w-4" />
-                  ) : (
-                    <ChevronRight className="h-4 w-4" />
-                  )}
+                  {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                 </button>
 
                 {isExpanded && (
@@ -115,10 +125,10 @@ export function AdminSidebar() {
                           key={child.href}
                           href={child.href}
                           className={cn(
-                            "block px-3 py-1.5 rounded-lg transition-colors text-sm",
+                            'block px-3 py-1.5 rounded-lg transition-colors text-sm',
                             isActive
-                              ? "bg-primary text-primary-foreground shadow-sm"
-                              : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                              ? 'bg-primary text-primary-foreground shadow-sm'
+                              : 'text-muted-foreground hover:bg-muted hover:text-foreground'
                           )}
                         >
                           {child.label}
@@ -138,10 +148,10 @@ export function AdminSidebar() {
               key={item.href}
               href={item.href!}
               className={cn(
-                "flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-sm font-medium",
+                'flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-sm font-medium',
                 isActive
-                  ? "bg-primary text-primary-foreground shadow-sm"
-                  : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                  ? 'bg-primary text-primary-foreground shadow-sm'
+                  : 'text-muted-foreground hover:bg-muted hover:text-foreground'
               )}
             >
               <Icon className="h-4 w-4" />
@@ -152,9 +162,9 @@ export function AdminSidebar() {
       </nav>
 
       <div className="mt-auto pt-8 px-2 fixed bottom-4 w-56">
-          <Link href="/dashboard" className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-2">
-              ← Back to Dashboard
-          </Link>
+        <Link href="/dashboard" className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-2">
+          ← Back to Dashboard
+        </Link>
       </div>
     </aside>
   );