62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T33bc,'use client' import * as React from 'react' import { UserPlus, Calendar, CreditCard, FileText, GraduationCap, Target, X, BellOff, Archive, type LucideIcon, } from 'lucide-react' import { Button } from '@/components/ui/button' import { Badge } from '@/components/ui/badge' import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover' type NotificationCategory = 'hr' | 'payroll' | 'timeoff' | 'performance' | 'training' | 'system' interface Notification { id: string title: string body: string category: NotificationCategory timestamp: Date read: boolean actionUrl?: string actor?: string } const categoryConfig: Record = { hr: { icon: UserPlus, accent: 'bg-success', bg: 'bg-success/10 text-success', }, payroll: { icon: CreditCard, accent: 'bg-info', bg: 'bg-info/10 text-info', }, timeoff: { icon: Calendar, accent: 'bg-chart-3', bg: 'bg-chart-3/10 text-chart-3', }, performance: { icon: Target, accent: 'bg-warning', bg: 'bg-warning/10 text-warning', }, training: { icon: GraduationCap, accent: 'bg-primary', bg: 'bg-primary/10 text-primary', }, system: { icon: FileText, accent: 'bg-muted-foreground', bg: 'bg-muted text-muted-foreground', }, } const now = new Date() const initialNotifications: Notification[] = [ { id: '1', title: 'Time off approved', body: 'Your annual leave request for Mar 15-18 has been approved by Sarah Connor.', category: 'timeoff', timestamp: new Date(now.getTime() - 12 * 60 * 1000), read: false, actor: 'Sarah Connor', }, { id: '2', title: 'New employee onboarded', body: 'Marcus Rivera has joined the Engineering team as Senior Developer.', category: 'hr', timestamp: new Date(now.getTime() - 45 * 60 * 1000), read: false, actor: 'Marcus Rivera', }, { id: '3', title: 'Performance review due', body: 'Annual performance review for 3 direct reports is due by end of this week.', category: 'performance', timestamp: new Date(now.getTime() - 2 * 60 * 60 * 1000), read: false, }, { id: '4', title: 'Payroll processed', body: 'March 2026 payroll has been processed successfully. 103 employees paid.', category: 'payroll', timestamp: new Date(now.getTime() - 5 * 60 * 60 * 1000), read: true, }, { id: '5', title: 'Training enrollment open', body: 'New course available: "Leadership Fundamentals Q2". Enroll before Mar 20.', category: 'training', timestamp: new Date(now.getTime() - 8 * 60 * 60 * 1000), read: true, }, { id: '6', title: 'Document requires signature', body: 'Updated Employee Handbook 2026 needs your acknowledgement.', category: 'system', timestamp: new Date(now.getTime() - 26 * 60 * 60 * 1000), read: true, actionUrl: '/documents', }, { id: '7', title: 'Time off request pending', body: 'Alice Johnson requested sick leave for Mar 12. Awaiting your approval.', category: 'timeoff', timestamp: new Date(now.getTime() - 28 * 60 * 60 * 1000), read: true, actor: 'Alice Johnson', }, { id: '8', title: 'Benefits enrollment closing', body: "Open enrollment period ends Mar 31. 12 employees haven't enrolled yet.", category: 'hr', timestamp: new Date(now.getTime() - 48 * 60 * 60 * 1000), read: true, }, ] const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate()) function formatTime(date: Date): string { const diffMs = now.getTime() - date.getTime() const diffMin = Math.floor(diffMs / 60000) if (diffMin < 1) return 'Just now' if (diffMin < 60) return `${diffMin}m ago` const diffHrs = Math.floor(diffMin / 60) if (diffHrs < 24) return `${diffHrs}h ago` const diffDays = Math.floor(diffHrs / 24) if (diffDays === 1) return 'Yesterday' return `${diffDays}d ago` } const STYLE_ID = 'notifications-popover-styles' const STYLE_CONTENT = ` .notification-panel { --scrollbar-size: 4px; } .notification-scroll::-webkit-scrollbar { width: var(--scrollbar-size); } .notification-scroll::-webkit-scrollbar-track { background: transparent; } .notification-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } .notification-item { cursor: pointer; transition: background-color 0.15s ease; animation: notif-slide-in 0.25s ease both; } .notification-item:hover { background-color: var(--muted); } @keyframes notif-slide-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .notification-scroll { position: relative; } .notification-scroll::after { content: ''; position: sticky; bottom: 0; left: 0; right: 0; display: block; height: 24px; margin-top: -24px; background: linear-gradient(to bottom, transparent, var(--popover)); pointer-events: none; } ` export interface NotificationsPopoverProps { /** Custom trigger. Receives the live unread count. */ trigger?: (ctx: { unreadCount: number }) => React.ReactNode } export function NotificationsPopover({ trigger }: NotificationsPopoverProps) { // Inject scoped styles once. React.useEffect(() => { if (typeof document === 'undefined') return if (document.getElementById(STYLE_ID)) return const el = document.createElement('style') el.id = STYLE_ID el.textContent = STYLE_CONTENT document.head.appendChild(el) }, []) const [notifications, setNotifications] = React.useState(initialNotifications) const [activeFilter, setActiveFilter] = React.useState<'all' | 'unread'>('all') const [isOpen, setIsOpen] = React.useState(false) const unreadCount = React.useMemo(() => notifications.filter((n) => !n.read).length, [notifications]) const filteredNotifications = React.useMemo(() => { if (activeFilter === 'unread') { return notifications.filter((n) => !n.read) } return notifications }, [notifications, activeFilter]) const groupedNotifications = React.useMemo(() => { const today = filteredNotifications.filter((n) => n.timestamp >= todayStart) const earlier = filteredNotifications.filter((n) => n.timestamp < todayStart) return { today, earlier } }, [filteredNotifications]) function markAsRead(id: string) { setNotifications((prev) => prev.map((n) => (n.id === id ? { ...n, read: true } : n))) } function markAllRead() { setNotifications((prev) => prev.map((n) => ({ ...n, read: true }))) } function dismissNotification(id: string) { setNotifications((prev) => prev.filter((n) => n.id !== id)) } function renderItem(n: Notification, animationDelay: number) { const Icon = categoryConfig[n.category].icon return (

markAsRead(n.id)} >

{n.title}

{formatTime(n.timestamp)} {!n.read ? : null}

{n.body}

) } return ( {trigger ? trigger({ unreadCount }) : }

Notifications

{unreadCount > 0 ? ( {unreadCount} ) : null}

{unreadCount > 0 ? ( ) : null}

{filteredNotifications.length === 0 ? (

All caught up

No {activeFilter === 'unread' ? 'unread ' : ''}notifications

) : ( <> {groupedNotifications.today.length > 0 ? ( <>

Today

{groupedNotifications.today.map((n, index) => renderItem(n, index * 30))} ) : null} {groupedNotifications.earlier.length > 0 ? ( <>

Earlier

{groupedNotifications.earlier.map((n, index) => renderItem(n, (groupedNotifications.today.length + index) * 30), )} ) : null} )}

setIsOpen(false)} > View all notifications

) } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/badge.json","https://uipkge.dev/r/react/popover.json"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"packages/registry-react/blocks/notifications-popover/NotificationsPopover.tsx","content":"$64","type":"registry:block","target":"~/components/blocks/NotificationsPopover.tsx"}],"className":"h-[70svh] min-h-80"}]]}]