// Portal shared chrome: Sidebar + helpers used by all 3 dashboard variations const { useState: useState_p } = React; // ── Sidebar ───────────────────────────────────────────────────────────────── // Client-facing nav. "Switch organization" is Nearwork-internal and intentionally // not present here — clients never see it. const NAV_SECTIONS = [ { label: 'Hiring', items: [ { id: 'overview', label: 'Overview', icon: 'layout-dashboard' }, { id: 'pipeline', label: 'Pipeline', icon: 'kanban-square' }, ]}, { label: 'Team', items: [ { id: 'team', label: 'Team', icon: 'handshake' }, { id: 'spp', label: 'SPP', icon: 'git-merge' }, ]}, { label: 'Workspace', items: [ { id: 'billing', label: 'Billing', icon: 'wallet' }, ]}, { label: 'Settings', items: [ { id: 'users', label: 'Users', icon: 'users' }, { id: 'settings', label: 'Settings', icon: 'settings' }, ]}, ]; // ── Sidebar nav item (hover-aware) ────────────────────────────────────────── function NavItem({ it, active, tight, onClick, clickable }) { const [hover, setHover] = useState_p(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: tight ? '7px 10px' : '9px 10px', borderRadius: 8, fontSize: 13, fontWeight: active ? 600 : 500, color: active ? NW.black : NW.gray600, background: active ? NW.gray50 : (hover ? NW.offWhite : 'transparent'), cursor: clickable ? 'pointer' : 'default', position: 'relative', transition: 'background 120ms, color 120ms', }}> {active && } {it.label}
); } function PortalSidebar({ active = 'overview', density = 'regular', onNav }) { const tight = density === 'compact'; const c = window.NW_CLIENT; const go = (id) => onNav && onNav(id); const org = window.NW_SPP_ORG; const sections = window.nwNavSections ? window.nwNavSections(org) : NAV_SECTIONS; return ( ); } // ── Top bar inside each dashboard ─────────────────────────────────────────── function PortalTopBar({ greeting, subtitle, dense = false, onNav }) { const [bellOpen, setBellOpen] = useState_p(false); const [query, setQuery] = useState_p(''); const notifs = (window.NW_ACTIVITY || []).slice(0, 5); const unread = 3; // Live search across candidates + roles (mock data on window). const q = query.trim().toLowerCase(); const searchResults = q.length >= 1 ? [ ...(window.NW_CANDIDATES || []) .filter(c => [c.name, c.role, c.location, c.note].some(v => String(v || '').toLowerCase().includes(q))) .slice(0, 6) .map(c => ({ type: 'Candidate', id: c.id, label: c.name, sub: c.role, bg: c.avatarBg, initials: c.initials, route: 'candidate' })), ...(window.NW_OPENINGS || []) .filter(o => [o.title, o.team].some(v => String(v || '').toLowerCase().includes(q))) .slice(0, 4) .map(o => ({ type: 'Role', id: o.id, label: o.title, sub: o.team, route: 'kanban' })), ] : []; return (
setQuery(e.target.value)} placeholder="Search candidates, roles, notes…" style={{ width: '100%', fontFamily: 'Poppins, sans-serif', fontSize: 13, color: NW.black, background: NW.gray50, border: `1px solid transparent`, borderRadius: 999, padding: '9px 14px 9px 36px', outline: 'none', }} /> {query && ( )} {q.length >= 1 && ( <>
setQuery('')} style={{ position: 'fixed', inset: 0, zIndex: 40 }} />
{searchResults.length ? searchResults.map((r, i) => ( )) : (
No matches for “{query}”.
)}
)}
{bellOpen && ( <>
setBellOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 40 }} />
Notifications {unread} new
{notifs.map((a, i) => (
{a.who} {a.what}
{a.when}
{i < unread && }
))}
)}
); } // ── Activity feed row ─────────────────────────────────────────────────────── function ActivityRow({ a, dense, last }) { const iconMap = { advance: 'arrow-right-circle', new: 'user-plus', hired: 'party-popper', note: 'message-square-text', interview: 'calendar-clock', view: 'eye' }; const colorMap = { advance: NW.teal500, new: NW.gray700, hired: NW.green600, note: NW.violet500, interview: NW.blue500, view: NW.gray500 }; return (
{a.who} {a.what}
{a.when}
); } // ── Generic "coming soon" screen (for nav items not yet designed) ──────────── function PortalComingSoon({ active, title, desc, icon, density = 'regular', onNav }) { const dense = density === 'compact'; return (
onNav && onNav('overview')}>Back to overview} />
); } // ── Common helpers ────────────────────────────────────────────────────────── function relTime(days) { if (days === 0) return 'today'; if (days === 1) return '1d ago'; return `${days}d ago`; } function urgencyDot(days) { if (days >= 2) return NW.rose500; if (days === 1) return NW.yellow500; return NW.teal500; } function CandidateAvatar({ c, size = 36 }) { return ; } // Score chip — small, mono function ScoreChip({ value, size = 'md' }) { const color = value >= 90 ? NW.teal600 : value >= 80 ? NW.teal500 : value >= 70 ? NW.yellow500 : NW.gray500; const bg = value >= 90 ? NW.teal50 : value >= 80 ? NW.teal50 : value >= 70 ? NW.yellow50 : NW.gray50; const sizes = { sm: { fz: 11, py: 2, px: 7 }, md: { fz: 12, py: 3, px: 9 }, lg: { fz: 14, py: 5, px: 11 } }; const s = sizes[size]; return ( {value}/100 ); } // Section heading (small overline + display heading) function SectionHead({ overline, title, action, dense }) { return (
{overline &&
{overline}
}

{title}

{action}
); } // ── Empty-state illustration block ────────────────────────────────────────── function EmptyBlock({ icon, title, desc, action }) { return (
{title}
{desc}
{action}
); } Object.assign(window, { PortalSidebar, PortalTopBar, NAV_SECTIONS, NavItem, ActivityRow, PortalComingSoon, relTime, urgencyDot, CandidateAvatar, ScoreChip, SectionHead, EmptyBlock, });