// ============ DASHBOARD · SIDEBAR ============
// Left rail: brand, "New agent" CTA, three nav groups, user pill.
// Icons live here because nothing else uses them.
function IconCitrus() { return ; }
function IconAgents() { return ; }
function IconActivity() { return ; }
function IconApproval() { return ; }
function IconBilling() { return ; }
function IconInbox() { return ; }
function IconLeads() { return ; }
function IconInsights() { return ; }
function IconTemplates() { return ; }
function IconKnow() { return ; }
function IconMeasure() { return ; }
function IconTools() { return ; }
function IconTeam() { return ; }
function IconSettings() { return ; }
function IconPersonas() { return ; }
function Sidebar({ tab, setTab, onNew, inboxBadge = 0, approvalsBadge = 0, authUser, enabledSections, allowAgentCreation = true }) {
// Filter helper: a nav item is visible when the allowlist is null/undefined
// (backwards-compat — show everything) OR when its id is in the array.
// "settings" is ALWAYS visible regardless — tenants must keep access to
// their own account management even when the master-admin disables it.
const isSectionEnabled = (id) => {
if (id === "settings" || id === "home") return true;
if (!Array.isArray(enabledSections)) return true;
return enabledSections.includes(id);
};
// Local "brand" is the user-configured profile (citrus_profile in
// localStorage). Per-tenant branding (window.CITRUS_BRANDING) wins when
// present — it's server-driven and overrides anything the tenant set in
// their own dashboard profile. Defensive: both sources are optional.
const readBrand = () => {
let local = {};
try { local = JSON.parse(localStorage.getItem("citrus_profile") || "{}"); }
catch { local = {}; }
const server = (typeof window !== "undefined" && window.CITRUS_BRANDING) || {};
return {
color: (server.accentColor && /^#[0-9a-fA-F]{6}$/.test(server.accentColor) ? server.accentColor : null) || local.color || null,
logo: server.logoUrl || local.logo || null,
name: server.displayName || local.name || null,
};
};
const [brand, setBrand] = useState(readBrand());
useEffect(() => {
const handler = () => setBrand(readBrand());
window.addEventListener("citrus-brand", handler);
return () => window.removeEventListener("citrus-brand", handler);
}, []);
// Self-sync: fetch /config on mount so the rail picks up the current
// tenant's saved profile.name without waiting for the user to visit
// Settings. The server's response REPLACES localStorage — we do NOT
// merge with whatever was there. Merging caused a nasty bug: after
// viewing /t/bahr/ then signing in as Gabtic, localStorage still had
// {name: "Bahr"}; Gabtic's /config returned a profile that had `desc`
// set but no `name`, so the merge kept "Bahr" and the dashboard header
// displayed "Bahr" for a Gabtic-authed user. Treat localStorage as a
// disposable rendering cache, not a persistent merge target.
useEffect(() => {
const cfg = (typeof window !== "undefined" && window.CITRUS_CONFIG) || {};
const url = cfg.SERVER_URL || "";
if (!url) return;
let cancelled = false;
fetch(`${url}/config`)
.then((r) => (r.ok ? r.json() : null))
.then((data) => {
if (cancelled || !data) return;
if (data.profile && typeof data.profile === "object") {
localStorage.setItem("citrus_profile", JSON.stringify(data.profile));
} else {
// Server returned no profile for this tenant (brand-new tenant);
// wipe the cached one so the rail falls back to defaults instead
// of showing the previous tenant's name.
localStorage.removeItem("citrus_profile");
}
// Patch window.CITRUS_BRANDING with the authenticated per-tenant
// branding. On first sign-in the page loaded before any token existed,
// so .config.js served Citrus defaults. Syncing from the authenticated
// /config response fixes the sidebar name without a full page reload.
if (data.branding && typeof data.branding === "object" && window.CITRUS_BRANDING) {
Object.assign(window.CITRUS_BRANDING, data.branding);
}
// Broadcast so already-mounted sections (e.g. Agents welcome card)
// can pick up the new tenant profile/name without a page refresh.
try { window.dispatchEvent(new Event("citrus-brand")); } catch {}
setBrand(readBrand());
})
.catch(() => {});
return () => { cancelled = true; };
}, []);
const groupA = [
{ id: "home", label: "CITRUS", icon: },
{ id: "agents", label: "Agents", icon: },
{ id: "inbox", label: "Inbox", icon: , badge: inboxBadge },
{ id: "leads", label: "Leads", icon: },
{ id: "activity", label: "Activity", icon: },
{ id: "approvals", label: "Approvals", icon: , badge: approvalsBadge },
{ id: "insights", label: "Insights", icon: },
];
const groupB = [
{ id: "templates", label: "Templates", icon: },
{ id: "personas", label: "Personas", icon: },
{ id: "knowledge", label: "Knowledge", icon: },
{ id: "tools", label: "Tools", icon: },
{ id: "team", label: "Team", icon: },
];
const groupC = [
{ id: "billing", label: "Billing", icon: },
{ id: "settings", label: "Settings", icon: },
];
const renderGroup = (g, label) => {
const visible = g.filter((it) => isSectionEnabled(it.id));
const filtered = visible;
// Hide the group header entirely when the whole group was filtered out —
// otherwise we'd render a section label with no items underneath it.
if (filtered.length === 0) return null;
return (
<>
{label ?