App Header

1"use client"
2 
3import { useEffect, useRef, useState } from "react"
4import Link from "next/link"
5import { usePathname, useRouter } from "next/navigation"
6import {
7  Menu,
8  Search,
9  BellIcon,
10  LogOut,
11  User,
12  Settings,
13  ListTodo,
14  type LucideIcon,
15} from "lucide-react"
16import { Button } from "@/registry/ui/button"
17import {
18  Sheet,
19  SheetContent,
20  SheetClose,
21} from "@/registry/ui/sheet"
22import {
23  DropdownMenu,
24  DropdownMenuContent,
25  DropdownMenuGroup,
26  DropdownMenuItem,
27  DropdownMenuLabel,
28  DropdownMenuSeparator,
29  DropdownMenuTrigger,
30} from "@/registry/ui/dropdown-menu"
31import { MiniCard } from "@/registry/ui/mini-card"
32import {
33  CommandDialog,
34  Command,
35  CommandEmpty,
36  CommandGroup,
37  CommandInput,
38  CommandItem,
39  CommandList,
40  CommandSeparator,
41} from "@/registry/ui/command"
42 
43// Types
44export interface NavItem {
45  title: string
46  url: string
47  icon?: LucideIcon
48}
49 
50export interface CommandItemType {
51  label: string
52  icon?: LucideIcon
53  href?: string
54  action?: () => void
55}
56 
57export interface CommandGroupType {
58  heading: string
59  items: CommandItemType[]
60}
61 
62const DEFAULT_NAV_ITEMS: NavItem[] = [
63  { title: "Queue", url: "/queue" },
64]
65 
66const DEFAULT_FOOTER_ITEMS: NavItem[] = []
67 
68// Default logout stub - replace with your auth implementation
69async function defaultLogout(): Promise<void> {
70  console.warn("AppHeader: No logoutAction provided. Implement your own logout logic.")
71}
72 
73interface AppHeaderProps {
74  agentName?: string
75  agentRole?: string
76  title?: string
77  logoSrc?: string
78  logoAlt?: string
79  homeHref?: string
80  navItems?: NavItem[]
81  footerItems?: NavItem[]
82  logoutAction?: () => Promise<void>
83  showNotifications?: boolean
84  showSearch?: boolean
85  commandGroups?: CommandGroupType[]
86}
87 
88export function AppHeader({
89  agentName,
90  agentRole,
91  title = "TTB Label Verification",
92  logoSrc = "/logo/app-seal/treasury.png",
93  logoAlt = "Treasury",
94  homeHref = "/queue",
95  navItems = DEFAULT_NAV_ITEMS,
96  footerItems = DEFAULT_FOOTER_ITEMS,
97  logoutAction = defaultLogout,
98  showNotifications = true,
99  showSearch = true,
100  commandGroups,
101}: AppHeaderProps) {
102  const [menuOpen, setMenuOpen] = useState(false)
103  const [commandOpen, setCommandOpen] = useState(false)
104  const pathname = usePathname()
105  const router = useRouter()
106  const logoutFormRef = useRef<HTMLFormElement | null>(null)
107 
108  useEffect(() => {
109    const down = (e: KeyboardEvent) => {
110      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
111        e.preventDefault()
112// … truncated