/* App shell: sidebar nav, topbar, theme, agency/client toggle, filters, routing */ (function () { const { useState, useEffect, useMemo, useRef } = React; const Icon = window.Icon; const { CLIENTS, PORTFOLIO } = window.AGENCY; const { fmtUSD, fmtMult, fmtNum } = window.FMT; const U = window.UI; const { Card, Badge, TierBadge, HealthBar, Sparkline, Segmented, MetronomeBadge, InfoDot, ROAI_TIP, C, cx } = U; // ---- URL routing (query params on /) ---- const AGENCY_SECTIONS = ["home", "clients", "analytics", "billing"]; const CLIENT_SECTIONS = ["roai", "projects", "marketplace", "billing", "insights"]; const AGENCY_BILLING_TABS = ["overview", "invoices", "contracts", "clients", "live"]; const CLIENT_BILLING_TABS = ["overview", "invoices", "payment", "usage"]; function parseURL() { const p = new URLSearchParams(window.location.search); const view = p.get("view"), sec = p.get("section"), tabP = p.get("tab"); const vc = CLIENTS.find((c) => c.id === p.get("client")); if (view === "client") { const clientSection = CLIENT_SECTIONS.includes(sec) ? sec : "roai"; return { mode: "client", selected: null, section: "home", portalId: vc ? vc.id : CLIENTS[0].id, clientSection, tab: clientSection === "billing" && CLIENT_BILLING_TABS.includes(tabP) ? tabP : "overview" }; } const section = AGENCY_SECTIONS.includes(sec) ? sec : "home"; return { mode: "internal", selected: vc || null, portalId: CLIENTS[0].id, clientSection: "roai", section, tab: section === "billing" && AGENCY_BILLING_TABS.includes(tabP) ? tabP : "overview" }; } function buildURL(s) { const p = new URLSearchParams(); if (s.mode === "client") { p.set("view", "client"); p.set("client", s.portalId); p.set("section", s.clientSection); if (s.clientSection === "billing") p.set("tab", s.tab); } else { p.set("view", "agency"); if (s.selected) p.set("client", s.selected.id); else { p.set("section", s.section); if (s.section === "billing") p.set("tab", s.tab); } } return "?" + p.toString(); } const Overview = window.Overview, DeepDive = window.DeepDive, Portal = window.Portal; const CAL_URL = "https://cal.com/rami-alcheikh/strategy-call?utm_source=vela&utm_medium=cta"; const INDUSTRIES = ["All", ...Array.from(new Set(CLIENTS.map((c) => c.industry)))]; const TIERS = ["All", "Elite", "Strong", "Stable", "At risk"]; const CLIENT_TITLES = { roai: "ROAI Center", projects: "Active projects", marketplace: "AI marketplace", billing: "Billing", insights: "Insights & reports" }; function Brand({ collapsed }) { return (
{!collapsed && (
Vela OS
FPT CX Services
)}
); } function NavItem({ icon, label, active, onClick, badge }) { return ( ); } function Sidebar({ section, setSection, mode, setMode, clientSection, setClientSection, portalClient, setTab, navOpen, setNavOpen }) { const isClient = mode === "client"; const [desktop, setDesktop] = useState(() => window.matchMedia("(min-width: 1024px)").matches); useEffect(() => { const mq = window.matchMedia("(min-width: 1024px)"); const on = () => setDesktop(mq.matches); mq.addEventListener("change", on); return () => mq.removeEventListener("change", on); }, []); return ( ); } function Topbar({ mode, setMode, theme, setTheme, filters, setFilters, section, selected, onBack, clientSection, setNavOpen }) { const FilterSelect = ({ value, onChange, options, label }) => ( ); return (
{mode === "client" ?
{CLIENT_TITLES[clientSection] || "Customer portal"}Client view
: selected ?
{selected.name}
:

{section === "home" ? "Agency overview" : section === "clients" ? "Clients" : section === "analytics" ? "ROAI analytics" : "Billing"}

}
{mode === "internal" && !selected && (section === "home" || section === "clients" || section === "analytics") && (
setFilters((f) => ({ ...f, industry: v }))} options={INDUSTRIES} /> setFilters((f) => ({ ...f, tier: v }))} options={TIERS} />
)}
Book a discovery call
); } function ClientsDirectory({ clients, onSelect, onViewAsClient }) { return (

All clients

{clients.length} active engagements · click any client for the ROAI deep dive

{clients.map((c) => ( onSelect(c)} className="p-5">
{c.short}
{c.name}
{c.industry} · {c.plan}
ROAI e.stopPropagation()}>
= 5 ? "text-emerald-400" : c.roai >= 2 ? "text-[var(--text)]" : "text-rose-400")}>{fmtMult(c.roai)}
t.value)} color={c.roai >= 2 ? C.emerald : C.rose} w={104} h={36} />
Value delivered
{fmtUSD(c.value, { compact: true })}
AI cost
{fmtUSD(c.cost, { compact: true })}
Health
Deep dive
))}
); } function BillingView({ clients }) { const totalMRR = clients.reduce((s, c) => s + c.mrr, 0); const totalCredits = clients.reduce((s, c) => s + c.credits.used, 0); const totalIncluded = clients.reduce((s, c) => s + c.credits.included, 0); return (
Recurring revenue
{fmtUSD(totalMRR)}/mo
Across {clients.length} subscriptions
Credits consumed
{fmtNum(totalCredits)}
{Math.round((totalCredits / totalIncluded) * 100)}% of pooled allotment
Live
All meters reporting

Hybrid billing by client

Subscription + usage-based AI credits, metered via Metronome

{clients.map((c) => { const pct = (c.credits.used / c.credits.included) * 100; return ( ); })}
ClientPlan SubscriptionCredits used UtilizationStatus
{c.short}{c.name}
 {c.plan} {fmtUSD(c.mrr)} {fmtNum(c.credits.used)}
95 ? C.rose : pct > 85 ? C.amber : C.emerald }} />
{pct.toFixed(0)}%
 {c.credits.topupSuggest ? Top-up due : Healthy}
); } function App() { const init = useMemo(() => parseURL(), []); const [theme, setTheme] = useState(() => localStorage.getItem("velaos-theme") || "dark"); const [mode, setMode] = useState(init.mode); const [section, setSection] = useState(init.section); const [selected, setSelected] = useState(init.selected); const [portalId, setPortalId] = useState(init.portalId); const [clientSection, setClientSection] = useState(init.clientSection); const [tab, setTab] = useState(init.tab); const [navOpen, setNavOpen] = useState(false); const [filters, setFilters] = useState({ industry: "All", tier: "All" }); useEffect(() => { document.documentElement.classList.toggle("dark", theme === "dark"); document.documentElement.classList.toggle("light", theme === "light"); localStorage.setItem("velaos-theme", theme); }, [theme]); useEffect(() => { if (mode === "client") setSelected(null); }, [mode]); // ---- keep the URL in sync with view state (deep-linkable, back/forward) ---- const firstRun = useRef(true), fromPop = useRef(false); useEffect(() => { const url = buildURL({ mode, section, selected, portalId, clientSection, tab }); if (url !== (window.location.search || "")) { if (firstRun.current || fromPop.current) history.replaceState(null, "", url); else history.pushState(null, "", url); } firstRun.current = false; fromPop.current = false; }, [mode, section, selected, portalId, clientSection, tab]); // ---- per-view document.title (SEO + tab/history clarity) ---- useEffect(() => { const BRAND = "Vela OS · FPT CX Services"; let label; if (mode === "client") { label = (CLIENT_TITLES[clientSection] || "Customer portal") + " · Client portal"; } else if (selected) { label = selected.name + " · ROAI deep dive"; } else if (section === "home") { label = "Agency overview"; } else if (section === "clients") { label = "Clients"; } else if (section === "analytics") { label = "ROAI analytics"; } else if (section === "billing") { label = "Billing"; } document.title = label ? label + " — " + BRAND : BRAND + " — ROAI Analytics"; }, [mode, section, selected, clientSection]); useEffect(() => { const onPop = () => { const s = parseURL(); fromPop.current = true; setMode(s.mode); setSection(s.section); setSelected(s.selected); setPortalId(s.portalId); setClientSection(s.clientSection); setTab(s.tab); }; window.addEventListener("popstate", onPop); return () => window.removeEventListener("popstate", onPop); }, []); const filtered = useMemo(() => CLIENTS.filter((c) => (filters.industry === "All" || c.industry === filters.industry) && (filters.tier === "All" || c.tier === filters.tier)), [filters]); const portalClient = CLIENTS.find((c) => c.id === portalId); const selectClient = (c) => { setSelected(c); window.scrollTo({ top: 0 }); }; const viewAsClient = (id) => { setPortalId(id); setClientSection("roai"); setSelected(null); setMode("client"); window.scrollTo({ top: 0 }); }; const BS = window.BillingScreens; let main; if (mode === "client") main = ; else if (selected) main = setSelected(null)} onViewAsClient={viewAsClient} />; else if (section === "home") main = ; else if (section === "clients") main = ; else if (section === "analytics") main = ; else if (section === "billing") main = ; return (
{navOpen &&
setNavOpen(false)} />} { setSection(s); setSelected(null); }} mode={mode} setMode={setMode} clientSection={clientSection} setClientSection={setClientSection} portalClient={portalClient} setTab={setTab} navOpen={navOpen} setNavOpen={setNavOpen} />
setSelected(null)} clientSection={clientSection} setNavOpen={setNavOpen} />
{main}
); } window.App = App; })();