/* App shell - sidebar + topbar + routing + global record panel + tweaks.
Exports: App. */
const NAV_SECTIONS = [
{ label: null, items: [
{ id: "dashboard", label: "Dashboard", icon: "dashboard" },
{ id: "map", label: "Map", icon: "map" },
{ id: "directory", label: "People", icon: "directory" },
{ id: "orgs", label: "Organisations", icon: "building" },
{ id: "initiatives", label: "Initiatives", icon: "grid" },
{ id: "projects", label: "Projects", icon: "folder" },
{ id: "events", label: "Events", icon: "calendar" },
]},
{ label: "Intelligence", items: [
{ id: "copilot", label: "NeuroAI", icon: "spark", action: "assistant" },
{ id: "prioritise", label: "Prioritisation", icon: "target" },
{ id: "reports", label: "Reports & Analytics", icon: "analytics" },
{ id: "impact", label: "Impact Tracker", icon: "trendingUp" },
{ id: "forecast", label: "Forecasting", icon: "globe" },
]},
{ label: "Operations", items: [
{ id: "booking", label: "Room Booking", icon: "door" },
{ id: "funding", label: "Funding Hub", icon: "funding" },
{ id: "pipeline", label: "Grant Pipeline", icon: "pipeline" },
{ id: "applications", label: "Applications", icon: "inbox" },
{ id: "tasks", label: "Tasks & Reminders", icon: "tasks" },
{ id: "documents", label: "Documents", icon: "document" },
]},
{ label: "Tools", items: [
{ id: "linkfinder", label: "Link Finder", icon: "link" },
{ id: "workflows", label: "Workflows", icon: "workflow" },
{ id: "alerts", label: "Alerts & Signals", icon: "signal" },
{ id: "integrations", label: "Integrations", icon: "plug", soon: true },
]},
];
const NAV_ADMIN = [
{ id: "settings", label: "Settings", icon: "settings" },
{ id: "admin", label: "Users", icon: "shield" },
{ id: "audit", label: "Audit Log", icon: "history", soon: true },
{ id: "billing", label: "Billing", icon: "receipt", soon: true },
];
/* Aspirational feature teasers - each "soon" route renders a polished
preview so the demo shows the platform's full potential. */
const FEATURES = {
integrations: { icon: "plug", tag: "Plays well with your stack",
blurb: "Connect your CRM, accounting, calendar and email so the ecosystem stays in sync without anyone copying data by hand.",
caps: [["plug", "Pre-built connectors", "Sync with the tools you already run."], ["layers", "Two-way sync", "Changes flow both ways, automatically."], ["lock", "Secure by design", "Granular scopes and full audit trail."]] },
audit: { icon: "history", tag: "Total accountability",
blurb: "A complete, tamper-evident history of every change - who edited what, when, and why - for full governance confidence.",
caps: [["history", "Full change log", "Every edit captured with author and timestamp."], ["lock", "Tamper-evident", "Immutable record for governance."], ["document", "Export for audit", "One-click compliance reports."]] },
billing: { icon: "receipt", tag: "Simple, transparent plans",
blurb: "Manage your subscription, seats and invoices - scale the platform as your ecosystem grows.",
caps: [["receipt", "Invoices & receipts", "Everything in one place."], ["user", "Seat management", "Add and remove team members easily."], ["trendingUp", "Usage insights", "See how your team uses the platform."]] },
};
/* ---- global topbar search with live results ---- */
function TopSearch({ onOpen, onSeeAll }) {
const D = window.DATA;
const [q, setQ] = React.useState("");
const [open, setOpen] = React.useState(false);
const ref = React.useRef(null);
React.useEffect(() => {
const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener("mousedown", h);
return () => document.removeEventListener("mousedown", h);
}, []);
const pool = [...D.orgs, ...D.people, ...D.projects, ...D.events];
const results = q ? pool.filter((e) => e.name.toLowerCase().includes(q.toLowerCase())).slice(0, 7) : [];
return (
{ setQ(e.target.value); setOpen(true); }} onFocus={() => setOpen(true)}
onKeyDown={(e) => { if (e.key === "Enter") { onSeeAll(q); setOpen(false); } }}
style={{ paddingLeft: 42, height: 46, background: "var(--surface-2)" }} />
{open && q && (
{results.length ? results.map((e) => {
const k = D.kindOf(e.id);
return (
);
}) :
No matches for "{q}"
}
)}
);
}
/* ---- events view ---- */
function EventsView({ onOpen }) {
const D = window.DATA;
const sorted = [...D.events].sort((a, b) => new Date(a.date) - new Date(b.date));
return (
Events
Convenings, galas and forums across the ecosystem.
{sorted.map((ev) => {
const d = new Date(ev.date);
return (
);
})}
);
}
/* ---- feature teaser (aspirational "coming soon" pages) ---- */
function FeatureTeaser({ id, title, onOpenRecord }) {
const f = FEATURES[id] || { icon: "spark", tag: "Coming soon", blurb: "This module is on the roadmap.", caps: [] };
return (
{/* hero */}
On the roadmap
{title}
{f.tag}
{f.blurb}
{/* capabilities */}
{f.caps.map((c, i) => (
))}
{/* faux preview */}
Full module arriving soon
);
}
/* lightweight, real-data-flavoured mock per feature */
function TeaserMock({ id, onOpenRecord }) {
const D = window.DATA;
const bar = (label, val, max, color) => (
{label}
{D.fmtMoney(val)}
);
if (id === "reports" || id === "impact" || id === "forecast") {
const doms = D.domains.map((dm) => ({ dm, total: D.orgs.filter((o) => o.domain === dm.id).reduce((s, o) => s + (o.funding ? o.funding.awarded : 0), 0) }));
const max = Math.max(...doms.map((d) => d.total)) || 1;
return {doms.map((d) => bar(d.dm.label, d.total, max, domainColor(d.dm.id)))}
;
}
if (id === "pipeline") {
const cols = [["Prospect", "Prospect", "var(--warn)"], ["In review", "In review", "var(--info)"], ["Approved", "Approved", "var(--good)"], ["Active", "Active", "var(--accent)"]];
return (
{cols.map(([label, , c]) => {
const items = (label === "Prospect" ? D.orgs.filter((o) => o.relationship === "Prospect") : D.projects.filter((p) => p.status === label)).slice(0, 3);
return (
{label}
{items.map((it, i) =>
{it.name}
)}
);
})}
{rows.map((r, i) => (
{r[0]}
{r[1]}
))}
{steps.map(([ic, label], i) => (
{i < steps.length - 1 && }
))}
{rows.map((r, i) => (
{r[0]}
{r[1]}
))}
{top.map((o) => bar(o.name, D.orgGap(o), max, "var(--accent)"))}
;
}
/* ---- accent helpers ---- */
function applyAccent(hex) {
const r = document.documentElement;
r.style.setProperty("--accent", hex);
r.style.setProperty("--accent-press", `color-mix(in srgb, ${hex} 82%, #000)`);
r.style.setProperty("--accent-contrast", "#ffffff");
}
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"accent": "#2456cc",
"theme": "light",
"density": "regular",
"mapLayout": "organic",
"projectsDefault": true,
"peopleDefault": true,
"eventsDefault": true
}/*EDITMODE-END*/;
const THEME_ORDER = ["light", "dim", "dark"];
const THEME_META = { light: { icon: "sun", label: "Light" }, dim: { icon: "dim", label: "Dim" }, dark: { icon: "moon", label: "Dark" } };
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [loggedIn, setLoggedIn] = React.useState(false);
const [route, setRoute] = React.useState("dashboard");
const [selectedId, setSelectedId] = React.useState(null);
const [egoFocus, setEgoFocus] = React.useState(null);
const [layout, setLayout] = React.useState(t.mapLayout);
const [showProjects, setShowProjects] = React.useState(t.projectsDefault);
const [showPeople, setShowPeople] = React.useState(t.peopleDefault);
const [showEvents, setShowEvents] = React.useState(t.eventsDefault);
const [recents, setRecents] = React.useState(() => {
try { return JSON.parse(localStorage.getItem("an_recents") || "[]"); } catch (e) { return []; }
});
const [collapsed, setCollapsed] = React.useState(false);
const [dirQuery, setDirQuery] = React.useState(null);
const [intelSubject, setIntelSubject] = React.useState("o-beacon");
const [crmProject, setCrmProject] = React.useState(null);
const [assistantOpen, setAssistantOpen] = React.useState(false);
const [, force] = React.useReducer((x) => x + 1, 0);
const theme = THEME_ORDER.includes(t.theme) ? t.theme : "light";
const userName = "Cristina Koppel";
const cycleTheme = () => setTweak("theme", THEME_ORDER[(THEME_ORDER.indexOf(theme) + 1) % THEME_ORDER.length]);
// apply theme + accent + density to document
React.useEffect(() => { document.documentElement.setAttribute("data-theme", theme); }, [theme]);
React.useEffect(() => { applyAccent(t.accent); }, [t.accent]);
React.useEffect(() => {
const r = document.documentElement.style;
const map = { compact: ["16px", "12px"], regular: ["26px", "22px"], comfy: ["34px", "28px"] };
const [pad, gap] = map[t.density] || map.regular;
r.setProperty("--pad", pad); r.setProperty("--gap", gap);
}, [t.density]);
React.useEffect(() => { setLayout(t.mapLayout); }, [t.mapLayout]);
React.useEffect(() => { setShowProjects(t.projectsDefault); }, [t.projectsDefault]);
React.useEffect(() => { setShowPeople(t.peopleDefault); }, [t.peopleDefault]);
React.useEffect(() => { setShowEvents(t.eventsDefault); }, [t.eventsDefault]);
const pushRecent = (id) => {
if (!id || id === "funder") return;
setRecents((prev) => {
const next = [id, ...prev.filter((x) => x !== id)].slice(0, 12);
try { localStorage.setItem("an_recents", JSON.stringify(next)); } catch (e) {}
return next;
});
};
const openRecord = (id) => { setEgoFocus(null); setSelectedId(id); pushRecent(id); };
const navigate = (r) => { setEgoFocus(null); setRoute(r); if (r !== "directory") setDirQuery(null); };
const onMutate = () => force();
const viewConnections = (id) => { setSelectedId(null); setEgoFocus(id); setRoute("map"); };
const openIntel = (id) => { setSelectedId(null); setEgoFocus(null); if (id) setIntelSubject(id); setRoute("intel"); };
const openInCRM = (id) => { setSelectedId(null); setCrmProject(id); setRoute("projects"); };
if (!loggedIn) {
return (
setLoggedIn(true)} />
);
}
const navW = collapsed ? 76 : 300;
return (
{/* SIDEBAR */}
{/* MAIN */}
{/* topbar */}
{ setDirQuery(q); navigate("directory"); }} />
{/* content */}
{route === "dashboard" && }
{route === "map" && !egoFocus && }
{route === "initiatives" && }
{route === "map" && egoFocus && setEgoFocus(null)} />}
{route === "intel" && navigate("map")} onOpenRecord={openRecord} />}
{route === "directory" && }
{route === "orgs" && }
{route === "projects" && }
{route === "linkfinder" && }
{route === "prioritise" && }
{route === "reports" && }
{route === "events" && }
{route === "booking" && }
{route === "funding" && }
{route === "pipeline" && }
{route === "applications" && }
{route === "tasks" && }
{route === "documents" && }
{route === "impact" && }
{route === "forecast" && }
{route === "workflows" && }
{route === "alerts" && }
{FEATURES[route] && s.items).concat(NAV_ADMIN).find((n) => n.id === route) || {}).label || "Coming soon"} onOpenRecord={openRecord} />}
{route === "settings" && setTweak("theme", v)} userName={userName} />}
{route === "admin" && }
{/* GLOBAL RECORD SIDE PANEL */}
{selectedId && (
setSelectedId(null)} className="fade-in" style={{ position: "absolute", inset: 0, background: "rgba(10,12,18,0.32)", zIndex: 40 }} />
setSelectedId(null)} onMutate={onMutate} onViewConnections={viewConnections} onOpenIntel={openIntel} onExpand={openInCRM} />
)}
{/* AI ASSISTANT SIDEBAR */}
setAssistantOpen(false)} onOpenRecord={openRecord} />
);
}
function NavItem({ n, active, collapsed, onClick }) {
const [hover, setHover] = React.useState(false);
const bg = active ? "var(--accent-soft)" : (hover ? "var(--surface-2)" : "transparent");
const col = active ? "var(--accent)" : (n.soon ? "var(--text-faint)" : "var(--text-muted)");
return (
);
}
function AppTweaks({ t, theme, setTweak }) {
return (
setTweak("accent", v)} />
setTweak("theme", v)} />
setTweak("mapLayout", v)} />
setTweak("projectsDefault", v)} />
setTweak("density", v)} />
);
}
window.App = App;