125 lines
4.0 KiB
TypeScript
125 lines
4.0 KiB
TypeScript
'use client'
|
|
|
|
import { usePathname, useRouter } from 'next/navigation'
|
|
import { signOut } from 'next-auth/react'
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu'
|
|
import { Menu, LogOut, Settings, User as UserIcon, Monitor } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { MobileNav } from './mobile-nav'
|
|
import { useState } from 'react'
|
|
|
|
interface Profile {
|
|
fullName: string | null
|
|
company: string | null
|
|
role: string | null
|
|
}
|
|
|
|
interface AuthUser {
|
|
id: string
|
|
email: string
|
|
name: string
|
|
}
|
|
|
|
interface DashboardHeaderProps {
|
|
user: AuthUser
|
|
profile: Profile | null
|
|
}
|
|
|
|
const pageTitles: Record<string, string> = {
|
|
'/dashboard': 'Overview',
|
|
'/dashboard/machines': 'Machines',
|
|
'/dashboard/connect': 'Quick Connect',
|
|
'/dashboard/sessions': 'Session History',
|
|
'/dashboard/settings': 'Settings',
|
|
'/dashboard/admin': 'Admin',
|
|
'/download': 'Download Agent',
|
|
}
|
|
|
|
export function DashboardHeader({ user, profile }: DashboardHeaderProps) {
|
|
const pathname = usePathname()
|
|
const router = useRouter()
|
|
const [mobileNavOpen, setMobileNavOpen] = useState(false)
|
|
|
|
const handleSignOut = async () => {
|
|
await signOut({ redirect: false })
|
|
router.push('/auth/login')
|
|
}
|
|
|
|
const displayName = profile?.fullName || user.name || user.email?.split('@')[0]
|
|
const title = pageTitles[pathname] || 'Dashboard'
|
|
|
|
return (
|
|
<>
|
|
<header className="flex h-16 items-center justify-between gap-4 px-6 border-b border-border/50 bg-card/50">
|
|
<div className="flex items-center gap-4">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="lg:hidden"
|
|
onClick={() => setMobileNavOpen(true)}
|
|
>
|
|
<Menu className="h-5 w-5" />
|
|
<span className="sr-only">Open menu</span>
|
|
</Button>
|
|
|
|
<Link href="/dashboard" className="flex items-center gap-2 lg:hidden">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary">
|
|
<Monitor className="h-4 w-4 text-primary-foreground" />
|
|
</div>
|
|
</Link>
|
|
|
|
<h1 className="text-lg font-semibold hidden sm:block">{title}</h1>
|
|
</div>
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="flex items-center gap-2">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-secondary text-sm font-medium">
|
|
{displayName?.charAt(0)?.toUpperCase() || 'U'}
|
|
</div>
|
|
<span className="hidden sm:inline-block text-sm">{displayName}</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-56">
|
|
<div className="px-2 py-1.5">
|
|
<p className="text-sm font-medium">{displayName}</p>
|
|
<p className="text-xs text-muted-foreground">{user.email}</p>
|
|
</div>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/dashboard/settings" className="cursor-pointer">
|
|
<UserIcon className="mr-2 h-4 w-4" />
|
|
Profile
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/dashboard/settings" className="cursor-pointer">
|
|
<Settings className="mr-2 h-4 w-4" />
|
|
Settings
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={handleSignOut} className="cursor-pointer text-destructive">
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
Sign out
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</header>
|
|
|
|
<MobileNav
|
|
open={mobileNavOpen}
|
|
onClose={() => setMobileNavOpen(false)}
|
|
profile={profile}
|
|
/>
|
|
</>
|
|
)
|
|
}
|