Consolidate financial pages into Financial submenu

- Grouped accounts, reports, reconciliation, and audit logs under one menu
- All 6 financial tools now accessible from expandable Financial submenu
- Cleaner admin navigation with collapsible sections

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

src/components/AdminMenu.tsx

@@ -4,10 +4,25 @@ import Link from 'next/link';
 import { useEffect, useRef, useState } from 'react';
 import { logoutAdmin } from '@/app/admin/login/actions';
 
-const ADMIN_LINKS = [
+interface MenuItem {
+  href?: string;
+  label: string;
+  submenu?: MenuItem[];
+}
+
+const ADMIN_LINKS: MenuItem[] = [
   { href: '/admin/orders', label: 'Orders' },
+  {
+    label: '💰 Financial',
+    submenu: [
       { href: '/admin/accounts', label: 'Accounts' },
-  { href: '/admin/accounts/reconciliation', label: 'Bank reconciliation' },
+      { href: '/admin/accounts/reports', label: 'Reports & Analysis' },
+      { href: '/admin/accounts/reconciliation', label: 'Bank Reconciliation' },
+      { href: '/admin/financial-audit', label: 'Audit Trail' },
+      { href: '/admin/login-logs', label: 'Admin login activity' },
+      { href: '/admin/customer-login-logs', label: 'Customer login activity' },
+    ],
+  },
   { href: '/admin/products/new', label: 'Add product' },
   { href: '/admin/products', label: 'All products' },
   { href: '/admin/categories/new', label: 'Add category' },
@@ -23,13 +38,11 @@ const ADMIN_LINKS = [
   { href: '/admin/collections', label: 'All collections' },
   { href: '/admin/customers', label: 'Email customers' },
   { href: '/admin/maintenance', label: 'Maintenance' },
-  { href: '/admin/login-logs', label: 'Admin login activity' },
-  { href: '/admin/customer-login-logs', label: 'Customer login activity' },
-  { href: '/admin/financial-audit', label: 'Financial audit trail' },
 ];
 
 export default function AdminMenu() {
   const [open, setOpen] = useState(false);
+  const [expandedSubmenu, setExpandedSubmenu] = useState<string | null>(null);
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -40,6 +53,10 @@ export default function AdminMenu() {
     return () => document.removeEventListener('mousedown', onClickOutside);
   }, []);
 
+  const handleSubmenuToggle = (label: string) => {
+    setExpandedSubmenu(expandedSubmenu === label ? null : label);
+  };
+
   return (
     <div ref={ref} className="relative hidden md:block">
       <button
@@ -52,19 +69,48 @@ export default function AdminMenu() {
       </button>
 
       {open && (
-        <div className="absolute right-0 top-full mt-2 w-48 border border-line bg-paper shadow-sm">
+        <div className="absolute right-0 top-full mt-2 w-56 border border-line bg-paper shadow-sm max-h-96 overflow-y-auto">
-          {ADMIN_LINKS.map((link) => (
+          {ADMIN_LINKS.map((item) => (
+            <div key={item.label}>
+              {item.submenu ? (
+                <>
+                  <button
+                    onClick={() => handleSubmenuToggle(item.label)}
+                    className="w-full flex items-center justify-between px-4 py-3 text-sm hover:bg-surface text-left font-medium"
+                  >
+                    {item.label}
+                    <span className={`inline-block transition-transform text-xs ${expandedSubmenu === item.label ? 'rotate-180' : ''}`}>
+                      ▾
+                    </span>
+                  </button>
+                  {expandedSubmenu === item.label && (
+                    <div className="bg-surface/50">
+                      {item.submenu.map((subitem) => (
                         <Link
-              key={link.href}
+                          key={subitem.href}
-              href={link.href}
+                          href={subitem.href!}
+                          onClick={() => setOpen(false)}
+                          className="block px-6 py-2 text-xs text-muted hover:text-ink hover:bg-surface"
+                        >
+                          {subitem.label}
+                        </Link>
+                      ))}
+                    </div>
+                  )}
+                </>
+              ) : (
+                <Link
+                  href={item.href!}
                   onClick={() => setOpen(false)}
                   className="block px-4 py-3 text-sm hover:bg-surface"
                 >
-              {link.label}
+                  {item.label}
                 </Link>
+              )}
+            </div>
           ))}
           <form action={logoutAdmin}>
-            <button type="submit" className="block w-full px-4 py-3 text-left text-sm hover:bg-surface">
+            <button type="submit" className="w-full block px-4 py-3 text-left text-sm hover:bg-surface border-t border-line">
               Log out
             </button>
           </form>