130 lines
4.2 KiB
TypeScript
130 lines
4.2 KiB
TypeScript
import { Bell, RefreshCw, HelpCircle, User as UserIcon } from 'lucide-react';
|
|
import { Button } from '../ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '../ui/dropdown-menu';
|
|
import { Badge } from '../ui/badge';
|
|
import { User } from '../../lib/mock-data';
|
|
|
|
interface HeaderProps {
|
|
title: string;
|
|
currentUser?: User | null;
|
|
onRefresh?: () => void;
|
|
}
|
|
|
|
export function Header({ title, currentUser, onRefresh }: HeaderProps) {
|
|
const notifications = [
|
|
{
|
|
id: '1',
|
|
message: 'New application assigned: APP-006',
|
|
time: '5 min ago',
|
|
unread: true
|
|
},
|
|
{
|
|
id: '2',
|
|
message: 'Interview scheduled for APP-001',
|
|
time: '1 hour ago',
|
|
unread: true
|
|
},
|
|
{
|
|
id: '3',
|
|
message: 'Document verified for APP-004',
|
|
time: '2 hours ago',
|
|
unread: false
|
|
}
|
|
];
|
|
|
|
const unreadCount = notifications.filter(n => n.unread).length;
|
|
|
|
return (
|
|
<header className="bg-white border-b border-slate-200 px-6 py-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-slate-900">{title}</h1>
|
|
<p className="text-slate-600">Manage and track dealership applications</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
{/* Current User Info */}
|
|
{currentUser && (
|
|
<div className="flex items-center gap-3 px-3 py-2 bg-slate-100 rounded-lg">
|
|
<div className="w-8 h-8 bg-amber-600 rounded-full flex items-center justify-center">
|
|
<UserIcon className="w-4 h-4 text-white" />
|
|
</div>
|
|
<div className="text-left">
|
|
<p className="text-slate-900">{currentUser.name}</p>
|
|
<p className="text-slate-600">{currentUser.role}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Refresh Button */}
|
|
{onRefresh && (
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={onRefresh}
|
|
title="Refresh"
|
|
>
|
|
<RefreshCw className="w-4 h-4" />
|
|
</Button>
|
|
)}
|
|
|
|
{/* Help */}
|
|
<Button variant="outline" size="icon" title="Help">
|
|
<HelpCircle className="w-4 h-4" />
|
|
</Button>
|
|
|
|
{/* Notifications */}
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" size="icon" className="relative">
|
|
<Bell className="w-4 h-4" />
|
|
{unreadCount > 0 && (
|
|
<Badge
|
|
variant="destructive"
|
|
className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center text-xs"
|
|
>
|
|
{unreadCount}
|
|
</Badge>
|
|
)}
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-80">
|
|
<div className="p-3 border-b">
|
|
<p>Notifications</p>
|
|
</div>
|
|
<div className="max-h-96 overflow-y-auto">
|
|
{notifications.map((notification) => (
|
|
<DropdownMenuItem
|
|
key={notification.id}
|
|
className={`p-3 cursor-pointer ${
|
|
notification.unread ? 'bg-amber-50' : ''
|
|
}`}
|
|
>
|
|
<div className="flex-1">
|
|
<p className="text-slate-900">{notification.message}</p>
|
|
<p className="text-slate-500 mt-1">{notification.time}</p>
|
|
</div>
|
|
{notification.unread && (
|
|
<div className="w-2 h-2 bg-amber-600 rounded-full flex-shrink-0"></div>
|
|
)}
|
|
</DropdownMenuItem>
|
|
))}
|
|
</div>
|
|
<div className="p-3 border-t text-center">
|
|
<button className="text-amber-600 hover:text-amber-700">
|
|
View All Notifications
|
|
</button>
|
|
</div>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|