{/* icon bubble */}

{/* text */}

{title}

{body}

{/* time + unread dot */}

{time} {!read && (

)}

); } // ─── Empty state ────────────────────────────────────────── function NotifEmpty() { return (

All quiet for now

Notifications about matches,
deals, and reports appear here.

); } // ─── Investor notifications ─────────────────────────────── // Shared hook — loads real notifications from Supabase function useNotifications(accentColor) { const [notifs, setNotifs] = React.useState(null); // null = loading const [loading, setLoading] = React.useState(true); React.useEffect(() => { (async () => { try { const data = await window.DB.getNotifications(); if (data && data.length > 0) { // Transform DB rows to UI shape setNotifs(data.map(n => ({ id: n.id, type: n.type || "match", title: n.title, body: n.body, time: relTimeFromISO(n.created_at), read: n.is_read, actionScreen: n.action_screen, actionId: n.action_id, }))); } else { setNotifs([]); // empty — show empty state } } catch (e) { console.warn("[MM] notifs load:", e); setNotifs([]); // don't show mock, show empty } setLoading(false); })(); }, []); const markRead = async (id) => { setNotifs(ns => ns.map(n => n.id === id ? { ...n, read: true } : n)); try { await window.DB.markNotificationRead(id); } catch (e) {} }; const markAllRead = async () => { setNotifs(ns => ns.map(n => ({ ...n, read: true }))); // Mark all in DB if (notifs) { for (const n of notifs.filter(n => !n.read)) { try { await window.DB.markNotificationRead(n.id); } catch (e) {} } } }; return { notifs, loading, markRead, markAllRead }; } function relTimeFromISO(iso) { if (!iso) return ""; const diff = Date.now() - new Date(iso).getTime(); const m = Math.floor(diff / 60000); if (m < 1) return "just now"; if (m < 60) return `${m}m ago`; const h = Math.floor(m / 60); if (h < 24) return `${h}h ago`; const d = Math.floor(h / 24); if (d < 7) return `${d}d ago`; return new Date(iso).toLocaleDateString("en-NG", { day:"numeric", month:"short" }); } // Shared notification list renderer function NotifList({ notifs, loading, markRead, markAllRead, accentColor }) { if (loading) { const S = window.MM_SKEL; return S ? : null; } const unreadCount = (notifs || []).filter(n => !n.read).length; const today = (notifs || []).filter(n => { const d = new Date(Date.now() - 24*60*60*1000); return new Date(n.createdAt || Date.now()) >= d; }); // Simpler split: first 3 are "today", rest are "earlier" const firstThree = (notifs || []).slice(0, 3); const rest = (notifs || []).slice(3); return ( <> {unreadCount > 0 && ( )}

{!notifs || notifs.length === 0 ? (

) : (

{firstThree.length > 0 && ( <>

Recent

{firstThree.map(n => ( markRead(n.id)} /> ))} )} {rest.length > 0 && ( <>

Earlier

{rest.map(n => ( markRead(n.id)} /> ))} )}

)}

); } function InvNotifications({ onBack, onNavigate }) { const { notifs, loading, markRead, markAllRead } = useNotifications("var(--clay)"); return (

} trailing={ } sticky />

); } // ─── Business owner notifications ───────────────────────── function BizNotifications({ onBack, onNavigate }) { const { notifs, loading, markRead, markAllRead } = useNotifications("var(--forest)"); return (

} trailing={ } sticky />

); }