feat(admin): grouped sidebar IA

src/components/admin/AdminSidebar.tsx

@@ -1,226 +1,146 @@
 "use client";
 
-import { useState, useEffect, useRef, useCallback, KeyboardEvent } from "react";
+import { useState, useEffect, useRef, useCallback, KeyboardEvent, ComponentType } from "react";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
-import { useRouter } from "next/navigation";
+import {
+  LayoutDashboard,
+  ShoppingCart,
+  MapPin,
+  Package,
+  Truck,
+  Ship,
+  Mail,
+  Store,
+  Sparkles,
+  Upload,
+  BrainCircuit,
+  Clock,
+  Droplets,
+  Route,
+  ChartBar,
+  Receipt,
+  Settings,
+  LogOut,
+  Menu,
+  X,
+  ArrowLeft,
+} from "lucide-react";
 import { signOutAction } from "@/actions/auth-actions";
 import BrandSelector from "@/components/admin/BrandSelector";
+import SideNavGroup from "@/components/admin/SideNavGroup";
 
-// Elegant warm sidebar design
+// Sidebar tokens used (from src/styles/admin-design-system.css):
-// Colors: parchment 100 bg, soft linen text, powder petal accent
+//   --admin-sidebar-bg          (#2A2520)
+//   --admin-sidebar-text        (#B8B4A8)
+//   --admin-sidebar-hover       (#3A352F)
+//   --admin-sidebar-active      (#4A443C)
+//   --admin-sidebar-accent      (#D4A24C — amber, used for active left-border + dot)
+// The "amber accent" replaces the old `--admin-accent` (citrus orange) in the
+// sidebar only — primary buttons elsewhere still use the deep botanical green.
 
-type NavItem = {
+type IconComponent = ComponentType<{ className?: string; size?: number | string }>;
-  href?: string;
+
+type NavItemDef = {
+  href: string;
   label: string;
-  icon?: string;
+  icon: IconComponent;
-  divider?: boolean;
+  /** If set, this item is hidden when `enabledAddons[key] === false`. */
+  addonKey?: string;
+  /** When true, only `userRole === "platform_admin"` sees this item. */
+  requiresPlatformAdmin?: boolean;
 };
 
-const NAV_ITEMS: NavItem[] = [
+type NavGroup = {
-  // Main
+  label: string;
-  { href: "/admin", label: "Dashboard", icon: "grid" },
+  items: NavItemDef[];
-  { href: "/admin/orders", label: "Orders", icon: "shopping-cart" },
+};
-  { href: "/admin/stops", label: "Stops & Routes", icon: "map-pin" },
+
-  { href: "/admin/products", label: "Products", icon: "package" },
+/**
-  { href: "/admin/communications", label: "Communications", icon: "mail" },
+ * Grouped nav IA per `docs/superpowers/specs/2026-06-17-admin-redesign.md` §4.
-  // Settings section
+ * Order is intentional (top-to-bottom = frequency-of-use + mental flow).
-  { divider: true, label: "Settings" },
+ *
-  { href: "/admin/settings", label: "General", icon: "settings" },
+ * - Workspace     : Dashboard is always shown; Command Center is platform_admin-only.
-  { href: "/admin/time-tracking", label: "Workers & PINs", icon: "users" },
+ * - Operations    : Day-to-day order/stop/product flow.
-  { href: "/admin/time-tracking?tab=tasks", label: "Tasks", icon: "clipboard" },
+ * - Communications: Harvest Reach only — the other sub-items live inside that page.
-  { href: "/admin/users", label: "Users & Permissions", icon: "shield" },
+ * - Growth        : Wholesale portal, data imports, AI assistant.
-  { href: "/admin/settings/integrations", label: "Integrations", icon: "plug" },
+ * - Tracking      : Time tracking is always on; Water Log / Route Trace are
-  { href: "/admin/settings/billing", label: "Billing", icon: "billing" },
+ *                   gated on their respective add-ons via `enabledAddons`.
+ * - Insights      : Reporting + tax.
+ * - Settings      : Single entry; sub-pages are tabs inside /admin/settings.
+ */
+const NAV_GROUPS: NavGroup[] = [
+  {
+    label: "Workspace",
+    items: [
+      { href: "/admin", label: "Dashboard", icon: LayoutDashboard },
+      {
+        href: "/admin/command-center",
+        label: "Command Center",
+        icon: Sparkles,
+        requiresPlatformAdmin: true,
+      },
+    ],
+  },
+  {
+    label: "Operations",
+    items: [
+      { href: "/admin/orders", label: "Orders", icon: ShoppingCart },
+      { href: "/admin/stops", label: "Stops & Routes", icon: MapPin },
+      { href: "/admin/products", label: "Products", icon: Package },
+      { href: "/admin/pickup", label: "Driver Pickup", icon: Truck },
+      { href: "/admin/shipping", label: "Shipping", icon: Ship },
+    ],
+  },
+  {
+    label: "Communications",
+    items: [
+      { href: "/admin/communications", label: "Harvest Reach", icon: Mail },
+    ],
+  },
+  {
+    label: "Growth",
+    items: [
+      { href: "/admin/wholesale", label: "Wholesale", icon: Store },
+      { href: "/admin/import", label: "Import Center", icon: Upload },
+      { href: "/admin/settings/ai", label: "AI Intelligence", icon: BrainCircuit },
+    ],
+  },
+  {
+    label: "Tracking",
+    items: [
+      { href: "/admin/time-tracking", label: "Time Tracking", icon: Clock },
+      { href: "/admin/water-log", label: "Water Log", icon: Droplets, addonKey: "water_log" },
+      { href: "/admin/route-trace", label: "Route Trace", icon: Route, addonKey: "route_trace" },
+    ],
+  },
+  {
+    label: "Insights",
+    items: [
+      { href: "/admin/reports", label: "Reports", icon: ChartBar },
+      { href: "/admin/taxes", label: "Tax Dashboard", icon: Receipt },
+    ],
+  },
+  {
+    label: "Settings",
+    items: [
+      { href: "/admin/settings", label: "Settings", icon: Settings },
+    ],
+  },
 ];
 
-// Icon components
-function GridIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className ?? "w-4 h-4"} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
-      <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25a2.25 2.25 0 01-2.25 2.25H15.75a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H15.75a2.25 2.25 0 01-2.25-2.25v-2.25z" />
-    </svg>
-  );
-}
-
-function CartIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className ?? "w-4 h-4"} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
-      <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM12.94 18.55l.276-.276a.75.75 0 011.06 0l.27.27a.75.75 0 010 1.06l-.27.27a.75.75 0 01-1.06 0l-.276-.276a.75.75 0 010-1.06z" />
-    </svg>
-  );
-}
-
-function MapPinIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className ?? "w-4 h-4"} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
-      <path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
-      <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
-    </svg>
-  );
-}
-
-function PackageIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className ?? "w-4 h-4"} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
-      <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
-    </svg>
-  );
-}
-
-function ClipboardIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className ?? "w-4 h-4"} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
-      <path strokeLinecap="round" strokeLinejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.801 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
-    </svg>
-  );
-}
-
-function ClockIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className ?? "w-4 h-4"} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
-      <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
-    </svg>
-  );
-}
-
-function MailIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className ?? "w-4 h-4"} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
-      <path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-3-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
-    </svg>
-  );
-}
-
-function SparkleIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className ?? "w-4 h-4"} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
-      <path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
-    </svg>
-  );
-}
-
-function SettingsCogIcon({ open }: { open: boolean }) {
-  return (
-    <svg className={`w-4 h-4 transition-transform duration-200 ${open ? "rotate-45" : ""}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
-      <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09.542.56.94 1.11.94h2.64c.55 0 1.02-.398 1.11-.94l.213-1.999c.018-.158.04-.315.062-.472a.563.563 0 00-.122-.519l-.79-2.758A.562.562 0 0014.56 0H9.44a.563.563 0 00-.424.264l-.79 2.758a.563.563 0 00-.122.519c.022.157.044.314.062.472l.213 1.999zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z" />
-    </svg>
-  );
-}
-
-function ChevronIcon({ open }: { open: boolean }) {
-  return (
-    <svg className={`w-3.5 h-3.5 transition-transform duration-200 ${open ? "rotate-180" : ""}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
-      <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-    </svg>
-  );
-}
-
-function HamburgerIcon() {
-  return (
-    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
-      <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-    </svg>
-  );
-}
-
-function CloseIcon() {
-  return (
-    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
-      <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-    </svg>
-  );
-}
-
-function BillingIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className ?? "w-4 h-4"} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
-      <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 0h3m-3.75 0h3m-3.75 0h3m3.75 0h3m-3.75 0h3m3.75 0h3m3.75 0h3" />
-    </svg>
-  );
-}
-
-function PuzzleIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className ?? "w-4 h-4"} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
-      <path strokeLinecap="round" strokeLinejoin="round" d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 01-.657.643 48.39 48.39 0 01-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 01-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 00-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 01-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 00.657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 01-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 005.427-.63 48.05 48.05 0 00.582-4.717.532.532 0 00-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 00.658-.663 48.422 48.422 0 00-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 01-.61-.58v0z" />
-    </svg>
-  );
-}
-
-function PlugIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className ?? "w-4 h-4"} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
-      <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
-    </svg>
-  );
-}
-
-function TruckIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className ?? "w-4 h-4"} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
-      <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12" />
-    </svg>
-  );
-}
-
-function SquareIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className ?? "w-4 h-4"} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
-      <rect x="3" y="3" width="18" height="18" rx="2" />
-    </svg>
-  );
-}
-
-function LogoutIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className ?? "w-4 h-4"} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
-      <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
-    </svg>
-  );
-}
-
-function UsersIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className ?? "w-4 h-4"} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
-      <path strokeLinecap="round" strokeLinejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
-    </svg>
-  );
-}
-
-function ShieldIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className ?? "w-4 h-4"} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
-      <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
-    </svg>
-  );
-}
-
-const ICON_MAP: Record<string, React.ReactNode> = {
-  grid: <GridIcon />,
-  "shopping-cart": <CartIcon />,
-  "map-pin": <MapPinIcon />,
-  package: <PackageIcon />,
-  clipboard: <ClipboardIcon />,
-  clock: <ClockIcon />,
-  mail: <MailIcon />,
-  settings: <SettingsCogIcon open={false} />,
-  advanced: <SparkleIcon />,
-  billing: <BillingIcon />,
-  puzzle: <PuzzleIcon />,
-  plug: <PlugIcon />,
-  sparkles: <SparkleIcon />,
-  truck: <TruckIcon />,
-  square: <SquareIcon />,
-  users: <UsersIcon />,
-  shield: <ShieldIcon />,
-};
-
 type SidebarProps = {
   userRole?: string | null;
   brandIds?: string[];
   activeBrandId?: string | null;
   brands?: { id: string; name: string; slug: string; logo_url: string | null }[];
+  /**
+   * Map of add-on key → enabled. When a key is `false` (or omitted, with the
+   * add-on not in the map), any nav item with that `addonKey` is hidden.
+   * When the prop itself is omitted, all add-on-gated items are shown
+   * (back-compat with the current admin layout, which doesn't pass it).
+   */
+  enabledAddons?: Record<string, boolean>;
 };
 
 export default function AdminSidebar({
@@ -228,6 +148,7 @@ export default function AdminSidebar({
   brandIds,
   activeBrandId,
   brands,
+  enabledAddons,
 }: SidebarProps) {
   const pathname = usePathname();
   const router = useRouter();
@@ -237,15 +158,52 @@ export default function AdminSidebar({
   const mobileMenuRef = useRef<HTMLDivElement>(null);
   const closeButtonRef = useRef<HTMLButtonElement>(null);
 
-  const roleLabel = userRole === "platform_admin" ? "Platform Admin"
+  const roleLabel =
-    : userRole === "brand_admin" ? "Brand Admin"
+    userRole === "platform_admin"
-    : userRole === "store_employee" ? "Store Employee"
+      ? "Platform Admin"
-    : null;
+      : userRole === "brand_admin"
+        ? "Brand Admin"
+        : userRole === "store_employee"
+          ? "Store Employee"
+          : null;
 
-  const isActive = useCallback((href: string) => {
+  /**
-    if (href === "/admin") return pathname === "/admin";
+   * Build the filtered list of visible nav items for the current viewer.
-    return pathname.startsWith(href);
+   * Honors role-gating (Command Center) and add-on gating (Water Log, Route Trace).
-  }, [pathname]);
+   * If `enabledAddons` is undefined, add-on-gated items are shown (no gating).
+   */
+  const visibleItems: NavItemDef[] = NAV_GROUPS.flatMap((group) => {
+    return group.items.filter((item) => {
+      if (item.requiresPlatformAdmin && userRole !== "platform_admin") {
+        return false;
+      }
+      if (item.addonKey && enabledAddons && enabledAddons[item.addonKey] === false) {
+        return false;
+      }
+      return true;
+    });
+  });
+
+  /**
+   * Groups rendered, with empty ones removed. The Communications group is
+   * always rendered today (Harvest Reach is always visible) — but if a
+   * future iteration hides Harvest Reach for some role, the entire group
+   * header goes away rather than rendering an empty section.
+   */
+  const visibleGroups: NavGroup[] = NAV_GROUPS
+    .map((group) => ({
+      ...group,
+      items: group.items.filter((item) => visibleItems.includes(item)),
+    }))
+    .filter((group) => group.items.length > 0);
+
+  const isActive = useCallback(
+    (href: string) => {
+      if (href === "/admin") return pathname === "/admin";
+      return pathname.startsWith(href);
+    },
+    [pathname],
+  );
 
   // Close mobile menu with animation
   const closeMobileMenu = useCallback(() => {
@@ -283,31 +241,106 @@ export default function AdminSidebar({
     };
   }, [mobileOpen]);
 
-  // Keyboard navigation for nav items
+  // Keyboard navigation for nav items (arrow up/down loops, enter/space activates)
-  const handleNavKeyDown = useCallback((e: KeyboardEvent<HTMLAnchorElement>, href: string, index: number) => {
+  const handleNavKeyDown = useCallback(
-    const navLinks = NAV_ITEMS.filter(item => !item.divider);
+    (e: KeyboardEvent<HTMLAnchorElement>, href: string, index: number) => {
+      const total = visibleItems.length;
+      if (total === 0) return;
 
-    if (e.key === "ArrowDown") {
+      if (e.key === "ArrowDown") {
-      e.preventDefault();
+        e.preventDefault();
-      const nextIndex = (index + 1) % navLinks.length;
+        const nextIndex = (index + 1) % total;
-      const nextLink = document.querySelector(`[data-nav-index="${nextIndex}"]`) as HTMLAnchorElement;
+        const nextLink = document.querySelector(
-      nextLink?.focus();
+          `[data-nav-index="${nextIndex}"]`,
-    } else if (e.key === "ArrowUp") {
+        ) as HTMLAnchorElement | null;
-      e.preventDefault();
+        nextLink?.focus();
-      const prevIndex = index === 0 ? navLinks.length - 1 : index - 1;
+      } else if (e.key === "ArrowUp") {
-      const prevLink = document.querySelector(`[data-nav-index="${prevIndex}"]`) as HTMLAnchorElement;
+        e.preventDefault();
-      prevLink?.focus();
+        const prevIndex = index === 0 ? total - 1 : index - 1;
-    } else if (e.key === "Enter" || e.key === " ") {
+        const prevLink = document.querySelector(
-      e.preventDefault();
+          `[data-nav-index="${prevIndex}"]`,
-      router.push(href);
+        ) as HTMLAnchorElement | null;
-      if (mobileOpen) closeMobileMenu();
+        prevLink?.focus();
-    }
+      } else if (e.key === "Enter" || e.key === " ") {
-  }, [router, mobileOpen, closeMobileMenu]);
+        e.preventDefault();
+        router.push(href);
+        if (mobileOpen) closeMobileMenu();
+      }
+    },
+    [router, mobileOpen, closeMobileMenu, visibleItems.length],
+  );
 
   async function handleLogout() {
     await signOutAction();
   }
 
+  // Shared nav-link renderer. Used by both the desktop sidebar and the mobile
+  // slide-in panel — they're the same list, just in a different container.
+  const renderNavLink = (item: NavItemDef, index: number) => {
+    const active = isActive(item.href);
+    const Icon = item.icon;
+    return (
+      <li key={item.href}>
+        <Link
+          href={item.href}
+          data-nav-index={index}
+          onClick={() => closeMobileMenu()}
+          onKeyDown={(e) => handleNavKeyDown(e, item.href, index)}
+          className={[
+            "group flex items-center gap-2.5 pl-3 pr-2.5 py-2 rounded-r-md text-xs font-medium",
+            "border-l-[3px] transition-all duration-200",
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--admin-sidebar-bg)]",
+          ].join(" ")}
+          style={
+            active
+              ? {
+                  backgroundColor: "var(--admin-sidebar-active)",
+                  color: "#F4F1E8",
+                  borderLeftColor: "var(--admin-sidebar-accent)",
+                }
+              : {
+                  color: "var(--admin-sidebar-text)",
+                  borderLeftColor: "transparent",
+                }
+          }
+          onMouseEnter={(e) => {
+            if (!active) {
+              e.currentTarget.style.backgroundColor =
+                "var(--admin-sidebar-hover)";
+            }
+          }}
+          onMouseLeave={(e) => {
+            if (!active) {
+              e.currentTarget.style.backgroundColor = "transparent";
+            }
+          }}
+          aria-current={active ? "page" : undefined}
+          tabIndex={0}
+        >
+          <span
+            className="flex-shrink-0 transition-colors duration-200"
+            style={{
+              color: active
+                ? "var(--admin-sidebar-accent)"
+                : "rgba(208, 203, 180, 0.6)",
+            }}
+            aria-hidden="true"
+          >
+            <Icon className="w-4 h-4" />
+          </span>
+          <span className="flex-1 truncate">{item.label}</span>
+          {active && (
+            <span
+              className="w-1.5 h-1.5 rounded-full flex-shrink-0"
+              style={{ backgroundColor: "var(--admin-sidebar-accent)" }}
+              aria-hidden="true"
+            />
+          )}
+        </Link>
+      </li>
+    );
+  };
+
   return (
     <>
       {/* Mobile hamburger button - accessible */}
@@ -319,7 +352,7 @@ export default function AdminSidebar({
         aria-controls="admin-sidebar"
         type="button"
       >
-        <HamburgerIcon />
+        <Menu className="w-5 h-5" aria-hidden="true" />
       </button>
 
       {/* Mobile overlay backdrop with blur */}
@@ -332,20 +365,20 @@ export default function AdminSidebar({
         />
       )}
 
-      {/* Sidebar panel - Elegant warm dark with smooth transitions */}
+      {/* Sidebar panel - dark canvas, grouped nav, amber accent for active */}
       <aside
         ref={sidebarRef}
         id="admin-sidebar"
         className={[
-          "fixed top-0 left-0 h-full w-56 z-50",
+          "fixed top-0 left-0 h-full w-60 z-50",
           "border-r flex flex-col",
           "transition-transform duration-300 ease-out lg:translate-x-0",
           mobileOpen ? "translate-x-0" : "-translate-x-full",
-          isClosing ? "opacity-90" : "opacity-100"
+          isClosing ? "opacity-90" : "opacity-100",
         ].join(" ")}
         style={{
           backgroundColor: "var(--admin-sidebar-bg)",
-          borderColor: "rgba(208, 203, 180, 0.2)"
+          borderColor: "rgba(208, 203, 180, 0.2)",
         }}
         role="navigation"
         aria-label="Admin navigation"
@@ -364,11 +397,9 @@ export default function AdminSidebar({
             >
               <div
                 className="flex h-9 w-9 items-center justify-center rounded-xl shadow-sm transition-transform hover:scale-105"
-                style={{ backgroundColor: "var(--admin-accent)" }}
+                style={{ backgroundColor: "var(--admin-sidebar-accent)" }}
               >
-                <svg className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+                <ArrowLeft className="h-5 w-5 text-white" aria-hidden="true" />
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
               </div>
               <span className="text-sm font-semibold tracking-tight">Admin</span>
             </Link>
@@ -381,101 +412,66 @@ export default function AdminSidebar({
               aria-label="Close navigation menu"
               type="button"
             >
-              <CloseIcon />
+              <X className="w-5 h-5" aria-hidden="true" />
             </button>
           </div>
         </div>
 
         {/* Back to site link */}
-        <div className="px-5 py-3 border-b flex-shrink-0" style={{ borderColor: "rgba(208, 203, 180, 0.2)" }}>
+        <div
+          className="px-5 py-3 border-b flex-shrink-0"
+          style={{ borderColor: "rgba(208, 203, 180, 0.2)" }}
+        >
           <Link
             href="/"
             className="text-xs transition-colors flex items-center gap-1.5 hover:text-white"
             style={{ color: "var(--admin-sidebar-text)" }}
           >
-            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+            <ArrowLeft className="w-3.5 h-3.5" aria-hidden="true" />
-              <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
-            </svg>
             Back to Site
           </Link>
         </div>
 
-        {/* Nav links with keyboard navigation */}
+        {/* Nav groups with keyboard navigation */}
-        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-3 py-4 scrollbar-thin">
+        <nav
-          <ul className="space-y-1" role="list">
+          ref={mobileMenuRef}
-            {NAV_ITEMS.map((item, index) => {
+          className="flex-1 overflow-y-auto overflow-x-hidden pt-3 pb-2 scrollbar-thin"
-              // Divider with optional label
+        >
-              if (item.divider) {
+          {visibleGroups.map((group) => (
-                return (
+            <SideNavGroup key={group.label} label={group.label}>
-                  <li key={`divider-${index}`} role="separator" aria-hidden="true">
+              {group.items.map((item) => {
-                    <div className="flex items-center gap-2 px-3 py-3 mt-2">
+                const idx = visibleItems.findIndex((v) => v.href === item.href);
-                      <span className="text-[10px] font-semibold uppercase tracking-widest" style={{ color: "rgba(195, 195, 193, 0.5)" }}>
+                return renderNavLink(item, idx);
-                        {item.label}
+              })}
-                      </span>
+            </SideNavGroup>
-                    </div>
+          ))}
-                  </li>
-                );
-              }
-
-              const active = isActive(item.href!);
-              const icon = item.icon ? ICON_MAP[item.icon] : null;
-              const navIndex = NAV_ITEMS.filter(i => !i.divider).findIndex(i => i.href === item.href);
-
-              return (
-                <li key={item.href}>
-                  <Link
-                    href={item.href!}
-                    data-nav-index={navIndex}
-                    onClick={() => closeMobileMenu()}
-                    onKeyDown={(e) => handleNavKeyDown(e, item.href!, navIndex)}
-                    className={[
-                      "group flex items-center gap-2.5 px-3 py-2 rounded-lg text-xs font-medium transition-all duration-200",
-                      "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--admin-sidebar-bg)]",
-                      active
-                        ? "border-l-[3px]"
-                        : "border-l-[3px] hover:border-l-[3px]",
-                    ].join(" ")}
-                    style={active ? {
-                      backgroundColor: "rgba(202, 117, 67, 0.15)",
-                      color: "#dea889",
-                      borderColor: "var(--admin-accent)",
-                      borderLeftColor: "var(--admin-accent)"
-                    } : {
-                      color: "var(--admin-sidebar-text)",
-                      borderColor: "transparent"
-                    }}
-                    aria-current={active ? "page" : undefined}
-                    tabIndex={0}
-                  >
-                    <span 
-                      className="flex-shrink-0 transition-colors duration-200" 
-                      style={{
-                        color: active ? "var(--admin-accent)" : "rgba(208, 203, 180, 0.6)"
-                      }}
-                      aria-hidden="true"
-                    >
-                      {icon}
-                    </span>
-                    <span className="flex-1">{item.label}</span>
-                    {active && (
-                      <span 
-                        className="w-1.5 h-1.5 rounded-full flex-shrink-0 animate-pulse" 
-                        style={{ backgroundColor: "var(--admin-accent)" }} 
-                        aria-hidden="true"
-                      />
-                    )}
-                  </Link>
-                </li>
-              );
-            })}
-          </ul>
         </nav>
 
-        {/* Bottom: brand picker + role + sign out */}
+        {/* Bottom: command-palette tip + brand picker + role + sign out */}
         <div
-          className="px-4 py-5 border-t flex-shrink-0 space-y-3"
+          className="px-4 py-4 border-t flex-shrink-0 space-y-3"
           style={{ borderColor: "rgba(208, 203, 180, 0.2)" }}
         >
+          {/* Cmd+K hint — the command palette itself is mounted separately
+              in the admin layout; this is just a discoverability nudge. */}
+          <div
+            className="flex items-center justify-between text-[10px] uppercase tracking-widest"
+            style={{ color: "rgba(195, 195, 193, 0.5)" }}
+            aria-hidden="true"
+          >
+            <span>Tip</span>
+            <kbd
+              className="font-mono px-1.5 py-0.5 rounded border"
+              style={{
+                color: "rgba(195, 195, 193, 0.7)",
+                backgroundColor: "rgba(208, 203, 180, 0.1)",
+                borderColor: "rgba(208, 203, 180, 0.2)",
+              }}
+            >
+              ⌘K
+            </kbd>
+          </div>
+
           {/* Brand selector — only show when admin has access to brands */}
           {brands && brands.length > 0 && (
             <BrandSelector
@@ -491,13 +487,18 @@ export default function AdminSidebar({
               className="px-3 py-2.5 rounded-xl border"
               style={{
                 backgroundColor: "rgba(208, 203, 180, 0.1)",
-                borderColor: "rgba(208, 203, 180, 0.2)"
+                borderColor: "rgba(208, 203, 180, 0.2)",
               }}
             >
-              <p className="text-[10px] font-medium uppercase tracking-widest mb-0.5" style={{ color: "rgba(195, 195, 193, 0.6)" }}>
+              <p
+                className="text-[10px] font-medium uppercase tracking-widest mb-0.5"
+                style={{ color: "rgba(195, 195, 193, 0.6)" }}
+              >
                 {roleLabel}
               </p>
-              <p className="text-xs" style={{ color: "rgba(195, 195, 193, 0.8)" }}>Signed in</p>
+              <p className="text-xs" style={{ color: "rgba(195, 195, 193, 0.8)" }}>
+                Signed in
+              </p>
             </div>
           )}
           <button
@@ -507,7 +508,7 @@ export default function AdminSidebar({
             aria-label="Sign out of admin"
             type="button"
           >
-            <LogoutIcon />
+            <LogOut className="w-4 h-4" aria-hidden="true" />
             Sign out
           </button>
         </div>

src/components/admin/SideNavGroup.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+/**
+ * SideNavGroup — a presentational wrapper that renders an optional group
+ * label (10px uppercase, tracking-widest) and a hairline divider, then
+ * passes the nav item children through unchanged.
+ *
+ * Used by AdminSidebar to chunk the long list of admin links into the
+ * 7 IA groups defined in `docs/superpowers/specs/2026-06-17-admin-redesign.md`
+ * (Workspace · Operations · Communications · Growth · Tracking · Insights · Settings).
+ *
+ * `collapsed` is a future-proofing prop for a per-group collapse toggle;
+ * it visually hides the children but keeps the label + divider in place.
+ */
+type SideNavGroupProps = {
+  label?: string;
+  children: React.ReactNode;
+  collapsed?: boolean;
+};
+
+export default function SideNavGroup({
+  label,
+  children,
+  collapsed = false,
+}: SideNavGroupProps) {
+  return (
+    <section
+      className="px-3 pb-3"
+      aria-label={label ? `${label} section` : undefined}
+    >
+      {label && (
+        <div
+          className="flex items-center gap-2 px-3 pt-3 pb-2 mb-1 border-b"
+          style={{ borderColor: "rgba(208, 203, 180, 0.12)" }}
+        >
+          <span
+            className="text-[10px] font-semibold uppercase tracking-widest select-none"
+            style={{ color: "rgba(184, 180, 168, 0.5)" }}
+          >
+            {label}
+          </span>
+        </div>
+      )}
+      <ul className="space-y-1" role="list" hidden={collapsed}>
+        {children}
+      </ul>
+    </section>
+  );
+}