// Overlays — Notifications panel, Search popover, Mobile menu drawer // All three mount at root level and sit over the app chrome. const Backdrop = ({ onClose, zIndex = 70, opacity = 0.32 }) => (
); // ───────────────────────────────────────────────────────────── // Notifications Panel // ───────────────────────────────────────────────────────────── const notifIconFor = (kind) => { switch (kind) { case 'recognition': return 'sparkles'; case 'redemption': return 'gift'; case 'reaction': return 'sparkles'; case 'badge': return 'medal'; case 'system': return 'bell'; default: return 'bell'; } }; const NotificationRow = ({ n, onClick }) => ( ); const NotificationsPanel = ({ open, onClose, anchorRef, isMobile, allRead = false, onMarkAllRead }) => { const data = window.MERIT_DATA; const [tab, setTab] = React.useState('all'); const [mode, setMode] = React.useState('normal'); // normal | empty const panelRef = React.useRef(null); React.useEffect(() => { if (open) setTab('all'); }, [open]); React.useEffect(() => { if (!open || isMobile) return; const onDown = (e) => { if (panelRef.current && !panelRef.current.contains(e.target) && anchorRef?.current && !anchorRef.current.contains(e.target)) { onClose(); } }; document.addEventListener('mousedown', onDown); return () => document.removeEventListener('mousedown', onDown); }, [open, isMobile]); if (!open) return null; const all = data.notifications || []; const unread = (allRead || mode === 'empty') ? [] : all.filter(n => n.unread); const shownRaw = mode === 'empty' ? [] : (tab === 'unread' ? unread : all); const shown = allRead ? shownRaw.map(n => ({ ...n, unread: false })) : shownRaw; const today = shown.filter(n => n.group === 'today'); const earlier = shown.filter(n => n.group !== 'today'); const header = (

Notifications

{unread.length > 0 && mode !== 'empty' && ( {unread.length} )}
{isMobile && ( )}
{[{v:'all', l:'All', count:all.length}, {v:'unread', l:'Unread', count:unread.length}].map(o => ( ))}
); const list = (
{shown.length === 0 ? (
) : ( <> {today.length > 0 && ( <>
Today
{today.map(n => )} )} {earlier.length > 0 && ( <>
Earlier
{earlier.map(n => )} )} )}
); const footer = (
); if (isMobile) { return ( <>
{header} {list} {footer}
); } return (
{header} {list} {footer}
); }; // ───────────────────────────────────────────────────────────── // Search Popover // ───────────────────────────────────────────────────────────── const SearchResultRow = ({ icon, primary, secondary, meta, rightIcon, onClick }) => ( ); const SearchPopover = ({ open, query, onClose, setScreen, setQuery, isAdmin }) => { const data = window.MERIT_DATA; const [recentSearches, setRecentSearches] = React.useState( () => (data.searchSuggestions?.recent || []) ); if (!open) return null; const q = query.trim().toLowerCase(); const people = q ? data.leaderboard.filter(p => p.name.toLowerCase().includes(q) || p.team.toLowerCase().includes(q)).slice(0, 4) : []; const rewards = q ? data.rewards.filter(r => r.title.toLowerCase().includes(q) || r.category.toLowerCase().includes(q)).slice(0, 4) : []; const activity = q ? data.activity.filter(a => a.note.toLowerCase().includes(q) || a.category.toLowerCase().includes(q) || a.activityName?.toLowerCase().includes(q)).slice(0, 3) : []; const hasResults = people.length + rewards.length + activity.length > 0; const quickActions = (data.searchSuggestions?.quickActions || []).filter(qa => !qa.admin || isAdmin); const go = (screen) => { setScreen(screen); onClose(); }; return (
e.preventDefault()} > {!q ? ( <>
Quick actions
{quickActions.map(qa => ( } primary={qa.label} rightIcon={} onClick={() => go(qa.screen)}/> ))}
Recent searches
{recentSearches.map((r, i) => ( } primary={r} rightIcon={↵} onClick={() => { if (setQuery) setQuery(r); }}/> ))}
Search teammates, rewards, activities ↑ ↓ ↵
) : !hasResults ? (
go('rewards')} style={{fontSize: 13, padding: '8px 14px'}}>Browse rewards, , ]}/>
) : ( <> {people.length > 0 && ( <>
People
{people.length}
{people.map(p => ( } primary={{p.name}{p.isYou && · you}} secondary={p.team} meta={#{p.rank} · {p.points.toLocaleString()} pts} onClick={() => { if (p.isYou) { go('profile'); } else { setScreen('peer-profile', { peer: { name: p.name, initials: p.initials, team: p.team, rank: p.rank, points: p.points } }); onClose(); } }}/> ))}
)} {rewards.length > 0 && ( <>
Rewards
{rewards.length}
{rewards.map(r => ( } primary={r.title} secondary={`${r.category} · ${r.stock}`} meta={{r.cost.toLocaleString()} pts} onClick={() => go('rewards')}/> ))}
)} {activity.length > 0 && ( <>
Activity
{activity.length}
{activity.map(a => ( } primary={a.note} secondary={`${a.category} · ${a.date}`} meta={ 0 ? 'var(--success)' : 'var(--text-muted)', fontWeight: 600}}>{a.amount > 0 ? '+' : ''}{a.amount}} onClick={() => go('history')}/> ))}
)}
{people.length + rewards.length + activity.length} results for "{query}"
)}
); }; // ───────────────────────────────────────────────────────────── // Mobile Menu Drawer // ───────────────────────────────────────────────────────────── const MobileMenuDrawer = ({ open, onClose, screen, setScreen, isAdmin, currentUser, theme, onThemeToggle, onSignOut, scope = 'viewport' }) => { React.useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [open]); // C4: Lock body scroll while drawer is open React.useEffect(() => { document.body.style.overflow = open ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [open]); if (!open) return null; const items = [ { id: 'dashboard', label: 'Dashboard', icon: 'home', desc: 'Your balance and activity' }, { id: 'history', label: 'My Activities', icon: 'history', desc: 'Log, edit and track entries' }, { id: 'leaderboard', label: 'Leaderboard', icon: 'medal', desc: 'Rankings this month' }, { id: 'rewards', label: 'Rewards', icon: 'gift', desc: 'Catalog and redemptions' }, { id: 'feed', label: 'Activity feed', icon: 'sparkles', desc: 'Approved activities across the team' }, { id: 'profile', label: 'My Profile', icon: 'user', desc: 'Badges and summary' }, ]; const adminItems = [ { id: 'approve', label: 'Point Approval', icon: 'check', desc: 'Review and approve submitted activities' }, { id: 'reports', label: 'Reports', icon: 'chart', desc: 'Team trends and top performers' }, { id: 'settings', label: 'Admin', icon: 'settings', desc: 'Manage categories, users, and permissions' }, ]; const Item = ({ it }) => { const active = screen === it.id; return ( ); }; const positionStyle = scope === 'frame' ? { position: 'absolute', left: 0, top: 0, bottom: 0, zIndex: 76 } : { position: 'fixed', left: 0, top: 0, bottom: 0, zIndex: 76 }; return ( <> ); }; Object.assign(window, { NotificationsPanel, SearchPopover, MobileMenuDrawer });