251225:1703 On going update to 1.7.0: Refoctory drawing Module not finish

frontend/components/admin/sidebar.tsx

@@ -2,15 +2,46 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useState } from "react";
 import { cn } from "@/lib/utils";
-import { Users, Building2, Settings, FileText, Activity, GitGraph, Shield, BookOpen } from "lucide-react";
+import {
+  Users,
+  Building2,
+  Settings,
+  FileText,
+  Activity,
+  GitGraph,
+  Shield,
+  BookOpen,
+  FileStack,
+  ChevronDown,
+  ChevronRight,
+} from "lucide-react";
 
-const menuItems = [
+interface MenuItem {
+  href?: string;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+  children?: { href: string; label: string }[];
+}
+
+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",
+    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/numbering", label: "Numbering", icon: FileText },
   { href: "/admin/workflows", label: "Workflows", icon: GitGraph },
   { href: "/admin/security/roles", label: "Security Roles", icon: Shield },
@@ -22,6 +53,20 @@ const menuItems = [
 
 export function AdminSidebar() {
   const pathname = usePathname();
+  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)
+  );
+
+  const toggleMenu = (label: string) => {
+    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">
@@ -33,12 +78,65 @@ export function AdminSidebar() {
       <nav className="space-y-1">
         {menuItems.map((item) => {
           const Icon = item.icon;
-          const isActive = pathname.startsWith(item.href);
 
+          // Has children - collapsible menu
+          if (item.children) {
+            const isExpanded = expandedMenus.includes(item.label);
+            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",
+                    hasActiveChild
+                      ? "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" />
+                  )}
+                </button>
+
+                {isExpanded && (
+                  <div className="ml-4 mt-1 space-y-1 border-l pl-4">
+                    {item.children.map((child) => {
+                      const isActive = pathname === child.href;
+                      return (
+                        <Link
+                          key={child.href}
+                          href={child.href}
+                          className={cn(
+                            "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"
+                          )}
+                        >
+                          {child.label}
+                        </Link>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            );
+          }
+
+          // Simple menu item
+          const isActive = pathname.startsWith(item.href!);
           return (
             <Link
               key={item.href}
-              href={item.href}
+              href={item.href!}
               className={cn(
                 "flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-sm font-medium",
                 isActive