Codebase Cleanup and Organization

app/admin/components/sidebar.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { cn } from '@/lib/utils';
@@ -12,11 +13,27 @@ import {
   UserCog,
   BrainCircuit,
   Database,
-  Braces
+  Braces,
+  Grid,
+  ChevronDown,
+  ChevronRight
 } from 'lucide-react';
 
+// Define the type for navigation items
+type NavItem = {
+  name: string;
+  href: string | undefined;
+  icon: any;
+  isCategory?: boolean;
+  submenu?: {
+    name: string;
+    href: string;
+    icon?: any;
+  }[];
+};
+
 // Define navigation items
-const navigationItems = [
+const navigationItems: NavItem[] = [
   {
     name: 'Overview',
     href: '/admin/overview',
@@ -29,8 +46,20 @@ const navigationItems = [
   },
   {
     name: 'Jets',
-    href: '/admin/jets',
-    icon: Plane
+    href: undefined,
+    icon: Plane,
+    isCategory: true,
+    submenu: [
+      {
+        name: 'Jets List',
+        href: '/admin/jets'
+      },
+      {
+        name: 'Seat Layouts',
+        href: '/admin/jets/layouts',
+        icon: Grid
+      }
+    ]
   },
   {
     name: 'JetStream Flights',
@@ -66,6 +95,17 @@ const navigationItems = [
 
 export default function Sidebar() {
   const pathname = usePathname();
+  const [expandedMenus, setExpandedMenus] = useState<Record<string, boolean>>({
+    // Start with Jets expanded by default
+    'Jets': true
+  });
+
+  const toggleSubmenu = (name: string) => {
+    setExpandedMenus(prev => ({
+      ...prev,
+      [name]: !prev[name]
+    }));
+  };
 
   return (
     <div className="h-full flex flex-col py-4 overflow-y-auto">
@@ -77,28 +117,92 @@ export default function Sidebar() {
 
       <nav className="space-y-1 px-2 flex-1 overflow-y-auto">
         {navigationItems.map((item) => {
-          const isActive = pathname === item.href || pathname?.startsWith(`${item.href}/`);
+          const isActive = item.href 
+            ? (pathname === item.href || pathname?.startsWith(`${item.href}/`))
+            : item.submenu?.some(subitem => pathname === subitem.href || pathname?.startsWith(`${subitem.href}/`));
+
+          const hasSubmenu = item.submenu && item.submenu.length > 0;
+          const isExpanded = expandedMenus[item.name] || false;
 
           return (
-            <Link
-              key={item.name}
-              href={item.href}
-              className={cn(
-                'flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors',
-                isActive 
-                  ? 'bg-amber-50 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300' 
-                  : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800',
-                'group'
+            <div key={item.name} className="flex flex-col space-y-1">
+              {/* Main menu item */}
+              {item.isCategory ? (
+                // Category header (toggleable)
+                <button
+                  onClick={() => toggleSubmenu(item.name)}
+                  className={cn(
+                    'flex items-center justify-between px-3 py-2 text-sm font-medium rounded-md w-full text-left',
+                    isActive
+                      ? 'bg-amber-50 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300' 
+                      : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800',
+                    'group'
+                  )}
+                >
+                  <div className="flex items-center">
+                    <item.icon className={cn(
+                      'mr-3 h-5 w-5 flex-shrink-0',
+                      isActive 
+                        ? 'text-amber-500 dark:text-amber-400' 
+                        : 'text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-400'
+                    )} />
+                    {item.name}
+                  </div>
+                  {isExpanded ? (
+                    <ChevronDown className="h-4 w-4 text-gray-500" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4 text-gray-500" />
+                  )}
+                </button>
+              ) : (
+                // Regular clickable link
+                <Link
+                  href={item.href || '#'}
+                  className={cn(
+                    'flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors',
+                    isActive 
+                      ? 'bg-amber-50 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300' 
+                      : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800',
+                    'group'
+                  )}
+                >
+                  <item.icon className={cn(
+                    'mr-3 h-5 w-5 flex-shrink-0',
+                    isActive 
+                      ? 'text-amber-500 dark:text-amber-400' 
+                      : 'text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-400'
+                  )} />
+                  {item.name}
+                </Link>
+              )}
+
+              {/* Submenu items if any and expanded */}
+              {hasSubmenu && isExpanded && (
+                <div className="ml-8 pl-1 border-l border-gray-200 dark:border-gray-700 space-y-1">
+                  {item.submenu!.map((subitem) => {
+                    const isSubActive = pathname === subitem.href || pathname?.startsWith(`${subitem.href}/`);
+
+                    return (
+                      <Link
+                        key={subitem.name}
+                        href={subitem.href}
+                        className={cn(
+                          'flex items-center pl-2 py-2 text-sm font-medium rounded-md transition-colors',
+                          isSubActive 
+                            ? 'text-amber-600 dark:text-amber-400 bg-amber-50/50 dark:bg-amber-900/20' 
+                            : 'text-gray-600 hover:text-amber-600 dark:text-gray-400 dark:hover:text-amber-400 hover:bg-gray-50 dark:hover:bg-gray-800/50',
+                        )}
+                      >
+                        {subitem.icon && (
+                          <subitem.icon className="mr-2 h-4 w-4 flex-shrink-0" />
+                        )}
+                        <span className="truncate">{subitem.name}</span>
+                      </Link>
+                    );
+                  })}
+                </div>
               )}
-            >
-              <item.icon className={cn(
-                'mr-3 h-5 w-5 flex-shrink-0',
-                isActive 
-                  ? 'text-amber-500 dark:text-amber-400' 
-                  : 'text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-400'
-              )} />
-              {item.name}
-            </Link>
+            </div>
           );
         })}
       </nav>