Hostaway MCP Server

'use client' import Link from 'next/link' import { usePathname } from 'next/navigation' import { useState } from 'react' import { Menu } from 'lucide-react' import { Button } from '@/components/ui/button' import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, } from '@/components/ui/sheet' import { cn } from '@/lib/utils' interface NavItem { href: string label: string icon: string } const navItems: NavItem[] = [ { href: '/dashboard', label: 'Home', icon: '🏠' }, { href: '/dashboard/usage', label: 'Usage', icon: '📊' }, { href: '/dashboard/billing', label: 'Billing', icon: '💳' }, { href: '/dashboard/api-keys', label: 'API Keys', icon: '🔑' }, { href: '/dashboard/settings', label: 'Settings', icon: '⚙️' }, ] export function DashboardNav() { const pathname = usePathname() return ( <nav className="flex flex-col gap-2 p-4"> {navItems.map((item) => { const isActive = pathname === item.href return ( <Link key={item.href} href={item.href} className={cn( 'flex items-center gap-3 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors', 'hover:bg-accent hover:text-accent-foreground', isActive ? 'bg-primary text-primary-foreground' : 'text-muted-foreground' )} aria-current={isActive ? 'page' : undefined} > <span className="text-lg">{item.icon}</span> <span>{item.label}</span> </Link> ) })} </nav> ) } export function MobileNav() { const [open, setOpen] = useState(false) const pathname = usePathname() return ( <Sheet open={open} onOpenChange={setOpen}> <SheetTrigger asChild> <Button variant="ghost" size="icon" className="md:hidden" aria-label="Open menu" > <Menu className="h-5 w-5" /> </Button> </SheetTrigger> <SheetContent side="left" className="w-64 p-0"> <SheetHeader className="border-b px-6 py-4"> <SheetTitle>Navigation</SheetTitle> </SheetHeader> <nav className="flex flex-col gap-2 p-4"> {navItems.map((item) => { const isActive = pathname === item.href return ( <Link key={item.href} href={item.href} onClick={() => setOpen(false)} className={cn( 'flex items-center gap-3 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors', 'hover:bg-accent hover:text-accent-foreground', isActive ? 'bg-primary text-primary-foreground' : 'text-muted-foreground' )} aria-current={isActive ? 'page' : undefined} > <span className="text-lg">{item.icon}</span> <span>{item.label}</span> </Link> ) })} </nav> </SheetContent> </Sheet> ) } interface DashboardHeaderProps { userEmail?: string } export function DashboardHeader({ userEmail }: DashboardHeaderProps) { return ( <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"> <div className="flex h-16 items-center justify-between px-6"> <div className="flex items-center gap-4"> <MobileNav /> <div> <h1 className="text-xl font-semibold">Hostaway MCP Dashboard</h1> <p className="text-sm text-muted-foreground">Property Management</p> </div> </div> <div className="flex items-center gap-4"> {userEmail && ( <div className="hidden sm:flex sm:flex-col sm:items-end"> <p className="text-sm font-medium">{userEmail}</p> <p className="text-xs text-muted-foreground">Admin</p> </div> )} <form action="/auth/signout" method="post"> <Button type="submit" variant="outline" size="sm"> Logout </Button> </form> </div> </div> </header> ) }