212 lines
9.3 KiB
TypeScript
212 lines
9.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { usePathname, useRouter } from "next/navigation";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@/components/ui/popover";
|
|
import {
|
|
Inbox,
|
|
Calendar,
|
|
LayoutGrid,
|
|
Heart,
|
|
UserCog,
|
|
Bell,
|
|
Settings,
|
|
LogOut,
|
|
} from "lucide-react";
|
|
|
|
export function Header() {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const [notificationsOpen, setNotificationsOpen] = useState(false);
|
|
const [userMenuOpen, setUserMenuOpen] = useState(false);
|
|
|
|
// Mock notifications data
|
|
const notifications = [
|
|
{
|
|
id: 1,
|
|
title: "New appointment scheduled",
|
|
message: "John Smith booked an appointment for tomorrow",
|
|
time: "2 hours ago",
|
|
type: "info",
|
|
read: false,
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Payment received",
|
|
message: "Payment of $150 received from Jane Doe",
|
|
time: "5 hours ago",
|
|
type: "success",
|
|
read: false,
|
|
},
|
|
];
|
|
|
|
const unreadCount = notifications.filter((n) => !n.read).length;
|
|
|
|
return (
|
|
<header className="bg-white border-b border-gray-200 fixed top-0 left-0 right-0 z-50">
|
|
<div className="px-3 sm:px-4 md:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between h-14 sm:h-16">
|
|
{/* Logo */}
|
|
<Link href="/admin/dashboard" className="flex items-center gap-2 sm:gap-3">
|
|
<div className="flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-linear-to-r from-rose-100 to-pink-100">
|
|
<Heart className="w-4 h-4 sm:w-6 sm:h-6 text-rose-600" fill="currentColor" />
|
|
</div>
|
|
<span className="text-base sm:text-lg md:text-xl font-semibold text-gray-900 hidden sm:inline">Attune Heart</span>
|
|
</Link>
|
|
|
|
{/* Navigation Links */}
|
|
<nav className="flex items-center gap-0.5 sm:gap-1">
|
|
<Link
|
|
href="/admin/dashboard"
|
|
className={`flex items-center gap-1 sm:gap-2 px-2 sm:px-3 md:px-4 py-1.5 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition-colors ${
|
|
pathname === "/admin/dashboard"
|
|
? "bg-linear-to-r from-rose-500 to-pink-600 text-white"
|
|
: "text-gray-600 hover:bg-gray-100"
|
|
}`}
|
|
>
|
|
<LayoutGrid className="w-4 h-4 sm:w-5 sm:h-5" />
|
|
<span className="hidden sm:inline">Dashboard</span>
|
|
</Link>
|
|
<Link
|
|
href="/admin/booking"
|
|
className={`flex items-center gap-1 sm:gap-2 px-2 sm:px-3 md:px-4 py-1.5 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition-colors ${
|
|
pathname === "/admin/booking"
|
|
? "bg-linear-to-r from-rose-500 to-pink-600 text-white"
|
|
: "text-gray-600 hover:bg-gray-100"
|
|
}`}
|
|
>
|
|
<Calendar className="w-4 h-4 sm:w-5 sm:h-5" />
|
|
<span className="hidden sm:inline">Book Appointment</span>
|
|
</Link>
|
|
</nav>
|
|
|
|
{/* Right Side Actions */}
|
|
<div className="flex items-center gap-1.5 sm:gap-2 md:gap-3">
|
|
<Popover open={notificationsOpen} onOpenChange={setNotificationsOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="relative w-8 h-8 sm:w-9 sm:h-9 md:w-10 md:h-10 cursor-pointer">
|
|
<Inbox className="w-5 h-5 sm:w-6 sm:h-6 md:w-8 md:h-8 text-gray-600" />
|
|
{unreadCount > 0 && (
|
|
<span className="absolute top-0.5 right-0.5 sm:top-1 sm:right-1 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-green-500 rounded-full"></span>
|
|
)}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-[calc(100vw-2rem)] sm:w-80 md:w-96 p-0 bg-white shadow-xl border border-gray-200" align="end">
|
|
{/* Thumbtack Design at Top Right */}
|
|
<div className="relative">
|
|
<div className="absolute -top-2 right-8 w-4 h-4 bg-white border-l border-t border-gray-200 rotate-45"></div>
|
|
<div className="absolute -top-1 right-8 w-2 h-2 bg-white translate-x-1/2"></div>
|
|
</div>
|
|
<div className="flex items-center justify-between p-4 border-b">
|
|
<h3 className="font-semibold text-gray-900">Notifications</h3>
|
|
{unreadCount > 0 && (
|
|
<span className="px-2 py-1 text-xs font-medium bg-rose-100 text-rose-700 rounded-full">
|
|
{unreadCount} new
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="max-h-96 overflow-y-auto">
|
|
{notifications.length === 0 ? (
|
|
<div className="p-8 text-center text-gray-500">
|
|
<Bell className="w-12 h-12 mx-auto mb-2 text-gray-300" />
|
|
<p className="text-sm">No notifications</p>
|
|
</div>
|
|
) : (
|
|
<div className="divide-y">
|
|
{notifications.map((notification) => {
|
|
return (
|
|
<div
|
|
key={notification.id}
|
|
className={`p-4 hover:bg-gray-50 transition-colors cursor-pointer ${
|
|
!notification.read ? "bg-rose-50/50" : ""
|
|
}`}
|
|
>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<p
|
|
className={`text-sm font-medium text-gray-900 ${
|
|
!notification.read ? "font-semibold" : ""
|
|
}`}
|
|
>
|
|
{notification.title}
|
|
</p>
|
|
{!notification.read && (
|
|
<span className="shrink-0 w-2 h-2 bg-green-500 rounded-full mt-1"></span>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-gray-600 mt-1">
|
|
{notification.message}
|
|
</p>
|
|
<p className="text-xs text-gray-400 mt-1">
|
|
{notification.time}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="p-3 border-t bg-gray-50">
|
|
<Link
|
|
href="/admin/notifications"
|
|
onClick={() => setNotificationsOpen(false)}
|
|
className="block w-full text-center text-sm font-medium text-rose-600 hover:text-rose-700 hover:underline transition-colors"
|
|
>
|
|
View all notifications
|
|
</Link>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<Popover open={userMenuOpen} onOpenChange={setUserMenuOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="rounded-full bg-linear-to-r from-rose-100 to-pink-100 hover:from-rose-200 hover:to-pink-200 cursor-pointer w-8 h-8 sm:w-9 sm:h-9 md:w-10 md:h-10">
|
|
<UserCog className="w-4 h-4 sm:w-5 sm:h-5 text-rose-600" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-56 sm:w-64 p-0 bg-white shadow-xl border border-gray-200" align="end">
|
|
{/* Thumbtack Design at Top Right */}
|
|
<div className="relative">
|
|
<div className="absolute -top-2 right-8 w-4 h-4 bg-white border-l border-t border-gray-200 rotate-45"></div>
|
|
<div className="absolute -top-1 right-8 w-2 h-2 bg-white translate-x-1/2"></div>
|
|
</div>
|
|
<div className="py-2">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => {
|
|
setUserMenuOpen(false);
|
|
router.push("/admin/settings");
|
|
}}
|
|
className="w-full flex items-center gap-3 px-4 py-3 justify-start hover:bg-gray-50 transition-colors cursor-pointer"
|
|
>
|
|
<Settings className="w-5 h-5 text-gray-600" />
|
|
<span className="text-sm font-medium text-gray-900">Settings</span>
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => {
|
|
setUserMenuOpen(false);
|
|
router.push("/");
|
|
}}
|
|
className="w-full flex items-center gap-3 px-4 py-3 justify-start hover:bg-gray-50 transition-colors cursor-pointer"
|
|
>
|
|
<LogOut className="w-5 h-5 text-red-500" />
|
|
<span className="text-sm font-medium text-red-500">Logout</span>
|
|
</Button>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|