// Shell — sidebar, topbar, command palette, scope filters. const D = window.VAULT_DATA; const F = window.VAULT_FIRM; const { useState, useEffect, useMemo, useRef, useCallback } = React; // ---------- Helpers ---------- function fmtUSD(m, dp = 0) { if (m == null) return "—"; const sign = m < 0 ? "–" : ""; const v = Math.abs(m); if (v >= 1000) return `${sign}$${(v/1000).toFixed(2)}B`; return `${sign}$${v.toFixed(dp)}M`; } function fmtNum(n) { if (n == null) return "—"; return n.toLocaleString("en-US"); } function fmtPct(p, dp = 0) { if (p == null) return "—"; return `${(p*100).toFixed(dp)}%`; } function relativeTime(iso) { const d = new Date(iso); const now = new Date("2026-05-08T10:00:00"); const mins = Math.round((now - d) / 60000); if (mins < 60) return `${mins}m ago`; if (mins < 60*24) return `${Math.round(mins/60)}h ago`; const days = Math.round(mins / (60*24)); if (days < 7) return `${days}d ago`; return d.toLocaleDateString("en-US", { month:"short", day:"numeric" }); } function personById(id) { return F.PEOPLE_BY_ID[id]; } function subteamById(id) { return F.SUBTEAMS.find(s => s.id === id); } function moduleById(id) { return F.MODULES.find(m => m.id === id); } function projectById(id) { return F.PROJECTS.find(p => p.id === id); } window.VaultUtils = { fmtUSD, fmtNum, fmtPct, relativeTime, personById, subteamById, moduleById, projectById }; // ---------- Avatar ---------- function Avatar({ id, size = "md", showName = false, showSynth = false }) { const p = personById(id); if (!p) return null; const cls = "avatar" + (size === "lg" ? " lg" : size === "xl" ? " xl" : ""); return ( {p.initials} {showName && {p.name}{p.synth && showSynth && }} ); } function AvatarStack({ ids, max = 3 }) { const shown = ids.slice(0, max); const extra = Math.max(0, ids.length - max); return ( {shown.map(id => )} {extra > 0 && +{extra}} ); } function SynthTag() { return ( SYNTH ); } window.Avatar = Avatar; window.AvatarStack = AvatarStack; window.SynthTag = SynthTag; // ---------- Icons ---------- const Icon = { overview: (p) => (), team: (p) => (), leaderboard: (p) => (), projects: (p) => (), pipeline: (p) => (), closed: (p) => (), newclient: (p) => (), search: (p) => (), plus: (p) => (), bell: (p) => (), caret: (p) => (), orgchart: (p) => (), refresh: (p) => (), cloud: (p) => (), chevron: (p) => (), fire: (p) => (), trophy: (p) => (), phone: (p) => (), visit: (p) => (), rain: (p) => (), loi: (p) => (), lead: (p) => (), }; window.Icon = Icon; // ---------- Sidebar ---------- function Sidebar({ view, setView, user, onLogout }) { const isAdmin = user?.access === "admin"; const [tabPanelOpen, setTabPanelOpen] = useState(false); // Subscribe to hidden-tab changes so the sidebar re-renders when admin toggles const [, force] = React.useReducer(x => x + 1, 0); useEffect(() => { const h = () => force(); window.addEventListener("vault:hidden-tabs-changed", h); return () => window.removeEventListener("vault:hidden-tabs-changed", h); }, []); const allUserTabs = [ { id: "overview", label: "Overview", icon: "overview" }, { id: "team", label: "Team", icon: "team" }, { id: "leaderboards", label: "Leaderboards", icon: "leaderboard" }, { id: "projects", label: "Projects", icon: "projects" }, { id: "pipeline", label: "Deal Pipeline", icon: "pipeline" }, { id: "closed", label: "Closed Deals", icon: "closed" }, { id: "newclients", label: "New Client Tracker", icon: "newclient" }, { id: "badges", label: "Badges", icon: "trophy" }, ]; const adminTabs = [ { id: "accounts", label: "Accounts", icon: "team" }, { id: "datasets", label: "Data Sets", icon: "cloud" }, { id: "org", label: "Org Chart", icon: "orgchart" }, { id: "goals", label: "Goals", icon: "trophy" }, { id: "approvals", label: "Approvals", icon: "leaderboard" }, ]; const hidden = (window.VAULT_ADMIN_STORE && window.VAULT_ADMIN_STORE.hiddenTabs) || new Set(); // For non-admins, drop hidden tabs entirely. Admins see all (with a "hidden" indicator). const userTabs = isAdmin ? allUserTabs : allUserTabs.filter(t => !hidden.has(t.id)); return ( ); } window.Sidebar = Sidebar; // ---------- Topbar ---------- function Topbar({ title, subtitle, right }) { return (

{title}

{subtitle &&
{subtitle}
}
{right}
); } window.Topbar = Topbar; // ---------- Scope filters (Module → Sub-Team → Individual w/ multi-select) ---------- function ScopeFilters({ scope, setScope, allowMulti = true }) { const allSubteams = scope.module ? F.SUBTEAMS.filter(s => s.moduleId === scope.module) : F.SUBTEAMS; // Filter to deal-team modules only in dropdown (hide Operations + President) const subteams = allSubteams.filter(s => s.moduleId === "deals"); const subSubteams = scope.subteam ? (F.SUBSUBTEAMS || []).filter(s => s.parentSubteam === scope.subteam) : []; const individuals = window.VaultPeriod.applyScope(F.PEOPLE, { module: scope.module, subteam: scope.subteam, subSubteam: scope.subSubteam, individuals: [] }); const indDropdownRef = useRef(null); const [indOpen, setIndOpen] = useState(false); useEffect(() => { const onClick = (e) => { if (indDropdownRef.current && !indDropdownRef.current.contains(e.target)) setIndOpen(false); }; document.addEventListener("mousedown", onClick); return () => document.removeEventListener("mousedown", onClick); }, []); const SelectStyle = { border: "1px solid var(--line)", background: "var(--surface)", borderRadius: 8, padding: "5px 9px", fontSize: 12.5, color: "var(--ink)", minWidth: 0, }; const indSummary = scope.individuals.length === 0 ? "All individuals" : scope.individuals.length === 1 ? personById(scope.individuals[0]).name : `${scope.individuals.length} selected`; return (
{subSubteams.length > 0 && ( )} {allowMulti ? (
{indOpen && (
Individuals · ⌘-click to add {scope.individuals.length > 0 && ( )}
{individuals.map(p => { const checked = scope.individuals.includes(p.id); return ( ); })}
)}
) : ( )} {(scope.module || scope.subteam || scope.subSubteam || scope.individuals.length > 0) && ( )}
); } window.ScopeFilters = ScopeFilters; // ---------- Command Palette ---------- function CommandPalette({ open, onClose, onCommand }) { const [q, setQ] = useState(""); const [idx, setIdx] = useState(0); const inputRef = useRef(null); useEffect(() => { if (open) { setQ(""); setIdx(0); setTimeout(() => inputRef.current?.focus(), 30); } }, [open]); const items = useMemo(() => { const base = [ { id: "v:overview", kind: "View", label: "Go to Overview", sub: "Firm dashboard", action: { type: "view", id: "overview" } }, { id: "v:team", kind: "View", label: "Go to Team", sub: "Activity drill-down", action: { type: "view", id: "team" } }, { id: "v:leaderboards", kind: "View", label: "Go to Leaderboards", sub: "Top performers", action: { type: "view", id: "leaderboards" } }, { id: "v:projects", kind: "View", label: "Go to Projects", sub: "Engagement grid", action: { type: "view", id: "projects" } }, { id: "v:pipeline", kind: "View", label: "Go to Deal Pipeline", sub: "Active targets", action: { type: "view", id: "pipeline" } }, { id: "v:closed", kind: "View", label: "Go to Closed Deals", sub: "Realized fees", action: { type: "view", id: "closed" } }, { id: "v:newclients", kind: "View", label: "Go to New Client Tracker", sub: "Pre-engagement", action: { type: "view", id: "newclients" } }, ...F.PROJECTS.map(p => ({ id: `pj:${p.id}`, kind: "Project", label: p.name, sub: `${p.client} · ${p.type}`, action: { type: "view", id: "projects" } })), ...F.PIPELINE.map(t => { const st = F.STATUS_BY_CODE[Number(t.status).toFixed(2)]; return { id: `pl:${t.id}`, kind: "Target", label: t.target || t.client || "Target", sub: `${st ? st.label : "Status " + t.status} · ${t.nextAction || ""}`, action: { type: "view", id: "pipeline" } }; }), ]; if (!q.trim()) return base.slice(0, 9); const needle = q.toLowerCase(); return base.filter(i => (i.label + " " + i.sub).toLowerCase().includes(needle)).slice(0, 14); }, [q]); useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") onClose(); else if (e.key === "ArrowDown") { e.preventDefault(); setIdx(i => Math.min(i+1, items.length-1)); } else if (e.key === "ArrowUp") { e.preventDefault(); setIdx(i => Math.max(i-1, 0)); } else if (e.key === "Enter") { if (items[idx]) { onCommand(items[idx].action); onClose(); } } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, items, idx, onClose, onCommand]); if (!open) return null; return (
e.stopPropagation()} style={{ width: 580, maxWidth: "92vw", background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 14, boxShadow: "var(--shadow-md)", overflow: "hidden", }}>
{ setQ(e.target.value); setIdx(0); }} placeholder="Search views, projects, targets…" style={{ flex: 1, border: 0, outline: "none", background: "transparent", fontSize: 15, color: "var(--ink)", }}/> esc
{items.map((it, i) => ( ))} {items.length === 0 &&
No matches
}
); } window.CommandPalette = CommandPalette;