'use client'; import { useState, useEffect, useRef } from 'react'; import { useRouter } from 'next/navigation'; import { getNotifications, markAllRead, clearNotifications, formatRelative, type Notification } from '@/lib/notifications'; const MODULE_ICONS: Record = { orders: , products: , customers: , farms: , }; export default function NotificationBell({ onRefresh }: { onRefresh?: (module: string) => void }) { const [notifications, setNotifications] = useState([]); const [open, setOpen] = useState(false); const panelRef = useRef(null); const router = useRouter(); const load = () => setNotifications(getNotifications()); useEffect(() => { load(); const handler = () => load(); window.addEventListener('usfloral-notification', handler); return () => window.removeEventListener('usfloral-notification', handler); }, []); // Close on outside click useEffect(() => { const handler = (e: MouseEvent) => { if (panelRef.current && !panelRef.current.contains(e.target as Node)) setOpen(false); }; document.addEventListener('mousedown', handler); return () => document.removeEventListener('mousedown', handler); }, []); const unread = notifications.filter(n => !n.read).length; const handleOpen = () => { setOpen(v => !v); if (!open) { markAllRead(); load(); } }; const handleGoTo = (notif: Notification) => { setOpen(false); router.push(notif.link); }; return (
{/* Bell button */} {/* Dropdown panel */} {open && (
{/* Header */}

Notificaciones

{notifications.length === 0 ? 'Sin actividad reciente' : `${notifications.length} eventos registrados`}

{notifications.length > 0 && ( )}
{/* List */}
{notifications.length === 0 ? (

Sin notificaciones

) : notifications.map((notif) => (
{MODULE_ICONS[notif.module] || MODULE_ICONS['orders']}

{notif.message}

{formatRelative(notif.timestamp)}

))}
)}
); }