/* Vitesse Insights — refreshed charts */ const balanceData = [ { label: "8 Mar", balance: 14.40, debit: 1.10, credit: 0.24 }, { label: null, balance: 13.20, debit: 0.38, credit: 0.12 }, { label: "22 Mar", balance: 14.80, debit: 1.22, credit: 0.36 }, { label: null, balance: 15.40, debit: 0.30, credit: 0.18 }, { label: "5 Apr", balance: 14.00, debit: 0.86, credit: 0.60 }, { label: null, balance: 15.20, debit: 0.40, credit: 0.14 }, { label: "19 Apr", balance: 15.20, debit: 0.96, credit: 0.78 }, { label: null, balance: 15.60, debit: 0.28, credit: 0.16 }, { label: "3 May", balance: 14.80, debit: 1.08, credit: 0.88 }, { label: null, balance: 15.40, debit: 0.42, credit: 0.20 }, { label: "17 May", balance: 15.80, debit: 1.18, credit: 0.96 }, { label: null, balance: 14.60, debit: 0.96, credit: 0.24 }, { label: "27 May", balance: 16.00, debit: 0.64, credit: 0.38, partial: true }]; const fundData = [ { name: "USD", value: 48.8, color: PURP.base, onColor: "#fff" }, { name: "GBP", value: 33.8, color: PURP.dark, onColor: "#fff" }, { name: "EUR", value: 10.0, color: PURP.pastel, onColor: "#3C3640" }, { name: "PLN", value: 3.6, color: ORANGE.light, onColor: "#3C3640" }, { name: "SEK", value: 2.4, color: ORANGE.warm, onColor: "#fff" }, { name: "Other", value: 1.4, color: NEUTRAL_MUTED, onColor: "#3C3640" }]; const paymentData = [ { label: "8 Mar", small: 0.18, mid: 0.42, large: 0.50, volume: 170 }, { label: null, small: 0.18, mid: 0.44, large: 0.52, volume: 175 }, { label: "22 Mar", small: 0.20, mid: 0.46, large: 0.56, volume: 180 }, { label: null, small: 0.19, mid: 0.50, large: 0.60, volume: 190 }, { label: "5 Apr", small: 0.20, mid: 0.48, large: 0.54, volume: 180 }, { label: null, small: 0.21, mid: 0.46, large: 0.56, volume: 180 }, { label: "19 Apr", small: 0.19, mid: 0.46, large: 0.52, volume: 170 }, { label: null, small: 0.22, mid: 0.52, large: 0.62, volume: 190 }, { label: "3 May", small: 0.23, mid: 0.54, large: 0.64, volume: 200 }, { label: null, small: 0.20, mid: 0.48, large: 0.56, volume: 180 }, { label: "17 May", small: 0.18, mid: 0.42, large: 0.48, volume: 160 }, { label: null, small: 0.19, mid: 0.46, large: 0.52, volume: 190 }, { label: "27 May", small: 0.12, mid: 0.18, large: 0.10, volume: 80, partial: true }]; const tpaGroups = [ { label: "Fund balance", values: [3.46, 2.24, 0.80], unit: "M" }, { label: "Number of accounts", values: [18, 12, 6] }, { label: "Avg. runway", values: [42, 51, 47], unit: "d" }]; const tpaSeries = [ { name: "Blue Plain Risk Admins", color: PURP.dark }, { name: "Insurova", color: PURP.base }, { name: "Iron Oak Claims", color: PURP.pastel }]; const runwayRows = [ { account: "Blue Plain | GBP Auto", days: 6, daily: "£149,600", closing: "£880,200", tone: "danger" }, { account: "Insurova | GBP Auto", days: 11, daily: "£80,950", closing: "£874,000", tone: "warn" }, { account: "Blue Plain | USD Work Comp", days: 13, daily: "£67,450", closing: "£889,600", tone: "warn" }, { account: "Blue Plain | NOK Auto", days: 14, daily: "£55,950", closing: "£768,300", tone: "soft" }, { account: "Insurova | PLN Auto", days: 17, daily: "£48,750", closing: "£851,700", tone: "soft" }, { account: "Blue Plain | PLN Prop", days: 18, daily: "£51,600", closing: "£935,950", tone: "soft" }]; // ---------- animation ---------- // One-shot reveal 0→1 on mount; in parallel, an "active clock" t (seconds since // the topic became active, 0 when idle). p drives reveal; t drives per-point // jitter so each widget's values, lines, bars and segments wiggle independently. function useTopicProgress(active) { const [s, setS] = React.useState({ p: 0, t: 0 }); const startRef = React.useRef(null); const activeStartRef = React.useRef(null); React.useEffect(() => { if (startRef.current === null) startRef.current = performance.now(); activeStartRef.current = active ? performance.now() : null; let raf; let cancelled = false; const REVEAL_MS = 1000; const loop = (now) => { if (cancelled) return; const dt = now - startRef.current; const p = Math.min(1, dt / REVEAL_MS); const t = activeStartRef.current !== null ? (now - activeStartRef.current) / 1000 : 0; setS({ p, t }); // Keep ticking only if reveal is in-flight OR widget is active if (p < 1 || activeStartRef.current !== null) { raf = requestAnimationFrame(loop); } }; raf = requestAnimationFrame(loop); return () => {cancelled = true;cancelAnimationFrame(raf);}; }, [active]); return s; } const easeOut = (p) => 1 - Math.pow(1 - p, 3); // Parse "£7.56M" / "430" / "99.13%" → {prefix, target, decimals, suffix} function parseAnimatable(str) { const m = String(str).match(/^([^\d\-]*)(-?[\d,]*\.?\d+)(.*)$/); if (!m) return null; const numStr = m[2]; const target = parseFloat(numStr.replace(/,/g, "")); const decimals = numStr.includes(".") ? numStr.split(".")[1].length : 0; return { prefix: m[1], target, decimals, suffix: m[3] }; } function formatAnimated(parsed, current) { if (!parsed) return ""; const fixed = current.toFixed(parsed.decimals); // Add thousand separators to the integer part so e.g. 17604 → "17,604" const [intPart, decPart] = fixed.split("."); const sign = intPart.startsWith("-") ? "-" : ""; const intAbs = sign ? intPart.slice(1) : intPart; const withCommas = intAbs.replace(/\B(?=(\d{3})+(?!\d))/g, ","); const numStr = decPart !== undefined ? `${sign}${withCommas}.${decPart}` : `${sign}${withCommas}`; return `${parsed.prefix}${numStr}${parsed.suffix}`; } // Per-point sinusoidal jitter — returns `v` unchanged when t<=0 (idle). const jitV = (v, t, phase, amp) => t > 0 ? v * (1 + amp * Math.sin(t * 2.6 + phase)) : v; // ---------- atoms ---------- const Card = ({ children, style, active, ...rest }) =>
{children}
; // Hover hint popover for the (?) badges next to widget titles. Content is // grounded in the Vitesse docs (docs.vitessepsp.com — Portfolio Overview, // Metrics, Charts, Tables). Hovering the badge OR the popover keeps it open. const HintBadge = ({ title, body, align = "left" }) => { const [open, setOpen] = React.useState(false); const tipRef = React.useRef(null); // Horizontal nudge applied once the popover is open, so it never spills past // the viewport edge on narrow / mobile screens regardless of its anchor side. const [dx, setDx] = React.useState(0); React.useLayoutEffect(() => { if (!open) { setDx(0); return; } const el = tipRef.current; if (!el) return; const r = el.getBoundingClientRect(); const margin = 10; let shift = 0; if (r.right > window.innerWidth - margin) shift = (window.innerWidth - margin) - r.right; else if (r.left < margin) shift = margin - r.left; if (shift !== 0) setDx((prev) => prev + shift); }, [open]); return ( setOpen(true)} onMouseLeave={() => setOpen(false)}> ? {open ?
{title}
{body}
 : null} ); }; const SectionTitle = ({ children, help, hint, hintAlign }) =>

{children}

{hint ? : help ? ? : null}
; const Tab = ({ active, children }) =>
{children}
; const Pill = ({ children, active }) => {children}; const Select = ({ children, leading }) =>
{leading} {children}
; const KpiCard = ({ label, value, suffix, delta, deltaDir, helper, progress = 1, t = 0, active, clampMax, wobbleAmp = 0.012, hint, hintAlign }) => { const isUp = deltaDir === "up"; const isFlat = deltaDir === "flat"; const isDown = deltaDir === "down"; const bg = isUp ? "#E8F5EE" : isDown ? "#FCEDE7" : "#F0EBF1"; const fg = isUp ? "#1F8A5B" : isDown ? "#C2402A" : "#6B6470"; const reveal = easeOut(Math.max(0, Math.min(1, progress))); const wobble = t > 0 && reveal >= 1 ? 1 + wobbleAmp * Math.sin(t * 2.6 + 0.7) : 1; const parsed = React.useMemo(() => parseAnimatable(value), [value]); let raw = parsed ? parsed.target * reveal * wobble : null; if (raw !== null && clampMax !== undefined) raw = Math.min(raw, clampMax); const displayValue = parsed ? formatAnimated(parsed, raw) : value; // Delta pill: the number inside wobbles slightly; the pill itself stays put. const deltaParsed = React.useMemo(() => parseAnimatable(delta), [delta]); const animating = t > 0 && reveal >= 1; let displayDelta = delta; if (animating && deltaParsed && deltaParsed.target !== 0) { const dDec = deltaParsed.decimals; const dWobble = 1 + 0.20 * Math.sin(t * 2.6 + 2.1); const dRaw = deltaParsed.target * dWobble; displayDelta = formatAnimated({ ...deltaParsed, decimals: dDec }, dRaw); } return (
{label} {hint ? : ?}
{displayValue} {suffix ? {suffix} : null}
{isUp ? "▲" : isDown ? "▼" : "—"} {displayDelta} {helper}
); }; const LegendItem = ({ color, label, swatchShape = "dot", checkbox = false, compact = false }) =>
{swatchShape === "line" ? : } {label} {checkbox ? : null}
; const RunwayBadge = ({ days, tone, animT = 0, idx = 0 }) => { const map = { danger: { bg: "#FCEDE7", fg: "#C2402A" }, warn: { bg: "#FFF6E5", fg: "#8A5A00" }, soft: { bg: "#E8F4EC", fg: "#3FA078" }, ok: { bg: "#E8F5EE", fg: "#1F8A5B" } }; const palette = map[tone] || map.warn; // Pill width scales with the days value so a 6-day pill is narrowest and an // 18-day pill is widest. When the Runway accordion is open we also wobble // the width on its own sine wave so the bars visibly breathe. const baseWidth = 36 + days * 2; const wobble = animT > 0 ? 1 + 0.075 * Math.sin(animT * 2.6 + idx * 0.9 + 1.7) : 1; return ( {days} days); }; // ---------- sidebar ---------- const SidebarItem = ({ icon, label, active }) =>
{icon}
; const Sidebar = () => ; // ---------- hint content (grounded in docs.vitessepsp.com) ---------- const HINTS = { fundBalance: { title: "Fund balance", body: "The total fund balance across all active accounts, shown in your selected display currency." }, accounts: { title: "Number of accounts", body: "The total number of active accounts across your portfolio." }, avgPayment: { title: "Average payment", body: "The average payment value over the selected time period." }, successRate: { title: "Payment success rate", body: "The percentage of payments successfully processed during the selected time period." }, balance: { title: "Balance trends", body: "Your fund balance, and corresponding credits and debits over the selected period." }, fund: { title: "Fund holding", body: "A percentage breakdown of your funds by currency in value." }, payments: { title: "Payments", body: "Total payment value over the selected period and currency. The bars show payment volume by size band." }, tpa: { title: "Top TPA", body: "The top third-party administrators ranked by the total value of delegated funds. For each, see fund balance, number of accounts, and average runway over the last three months." }, runway: { title: "Account runway", body: "Every account ranked by projected runway, i.e. the days of payments its current balance covers at recent run-rate. Use it as a directional signal for funding planning." } }; // ---------- main view ---------- const Dashboard = () => { // Accordion open state is driven ONLY by clicking items in the explain panel. const [openTopic, setOpenTopic] = React.useState(null); // Widget hover state is independent: hovering a dashboard widget animates that // widget (and highlights it) but never opens or selects an accordion item. const [hoverTopic, setHoverTopic] = React.useState(null); // A widget is "active" (animating + highlighted) when it's hovered OR when its // accordion item is open — but hover no longer feeds the accordion. const activeTopic = hoverTopic || openTopic; // Below this width the explanation panel is hidden and the dashboard takes the // full width on its own (the panel's hover/scroll behaviour doesn't suit a // narrow, touch viewport). const [isMobile, setIsMobile] = React.useState( () => typeof window !== "undefined" && window.matchMedia("(max-width: 760px)").matches ); React.useEffect(() => { const mq = window.matchMedia("(max-width: 760px)"); const handler = (e) => setIsMobile(e.matches); if (mq.addEventListener) mq.addEventListener("change", handler); else mq.addListener(handler); return () => { if (mq.removeEventListener) mq.removeEventListener("change", handler); else mq.removeListener(handler); }; }, []); // On mobile there's no hover, so we auto-select the widget whose vertical // centre is closest to the middle of the viewport as the user scrolls. That // widget becomes the active topic (highlight + animation), mirroring what // hover does on desktop. // // IMPORTANT: this page reports its full height to the host, so the iframe is // sized to fit and the *outer* page scrolls — the iframe itself never does. // That means window "scroll" events never fire here and window.innerHeight is // the whole document, not the visible screen. So we can't measure scroll // position directly. IntersectionObserver's intersectionRect, however, always // reflects the element's true on-screen geometry (clipped by the parent // viewport across the iframe boundary), so it works in every embedding: // top-level page, internally-scrolling iframe, or parent-scrolled full-height // iframe. React.useEffect(() => { if (!isMobile || typeof IntersectionObserver === "undefined") return; const els = Array.from(document.querySelectorAll("[data-topic]")); if (!els.length) return; const latest = new Map(); const select = () => { // Reconstruct the visible viewport from the union of the on-screen // (clipped) rects, then pick the widget straddling its centre. let minTop = Infinity, maxBottom = -Infinity; const vis = []; els.forEach((el) => { const e = latest.get(el); if (!e || !e.isIntersecting) return; const r = e.intersectionRect; if (r.height === 0) return; minTop = Math.min(minTop, r.top); maxBottom = Math.max(maxBottom, r.bottom); vis.push({ topic: el.getAttribute("data-topic"), center: r.top + r.height / 2 }); }); if (!vis.length) return; const viewCenter = (minTop + maxBottom) / 2; let best = null, bestDist = Infinity; vis.forEach((v) => { const d = Math.abs(v.center - viewCenter); if (d < bestDist) { bestDist = d; best = v.topic; } }); if (best) setOpenTopic((cur) => (cur === best ? cur : best)); }; const thresholds = []; for (let i = 0; i <= 20; i++) thresholds.push(i / 20); const io = new IntersectionObserver((entries) => { entries.forEach((e) => latest.set(e.target, e)); select(); }, { threshold: thresholds }); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, [isMobile]); const kpisA = useTopicProgress(activeTopic === "kpis"); const balanceA = useTopicProgress(activeTopic === "balance"); const fundA = useTopicProgress(activeTopic === "fund"); const paymentsA = useTopicProgress(activeTopic === "payments"); const tpaA = useTopicProgress(activeTopic === "tpa"); const runwayA = useTopicProgress(activeTopic === "runway"); const isActive = (id) => activeTopic === id; // Hover hysteresis: a transient mouseleave (caused by the box-shadow transition // momentarily shifting the pointer's hit-test, or any sub-pixel reflow) must // NOT immediately collapse the hovered topic. We debounce the close and cancel // it the instant the pointer re-enters any widget, so nothing oscillates. const closeTimer = React.useRef(null); const cancelClose = () => { if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; } }; const hoverProps = (id) => ({ onMouseEnter: () => { cancelClose(); setHoverTopic(id); setOpenTopic(id); }, onMouseMove: () => { cancelClose(); setHoverTopic((cur) => cur === id ? cur : id); setOpenTopic((cur) => cur === id ? cur : id); }, onMouseLeave: () => { cancelClose(); closeTimer.current = setTimeout(() => { setHoverTopic((cur) => cur === id ? null : cur); setOpenTopic((cur) => cur === id ? null : cur); closeTimer.current = null; }, 220); } }); // Top TPA header figures track the FIRST series (Blue Plain Risk Admins) of // the grouped-bar chart as it animates. Mirror GroupedBars' jit() exactly: // jit(v) = v * (1 + 0.045 * sin(t*2.6 + gi*1.7 + si*1.1 + 0.3)), series si = 0. const tpaWob = (gi) => tpaA.t > 0 ? (1 + 0.045 * Math.sin(tpaA.t * 2.6 + gi * 1.7 + 0.3)) : 1; const tpaFund = tpaGroups[0].values[0] * tpaWob(0); const tpaAccts = Math.round(tpaGroups[1].values[0] * tpaWob(1)); const tpaRunway = Math.round(tpaGroups[2].values[0] * tpaWob(2)); return (

Portfolio Overview

{/* filters */} {!isMobile ?
Last 3 months
: null} {/* KPI row */}
{/* Balance Trends */}
Balance Trend
{/* Fund allocation + Payment */}
Fund holding
by currency
{fundData.slice().reverse().filter((d) => d.name !== "Other").map((d, i) => {d.name} )}
Payments
{/* Top TPA + Runway */}
Top TPA

Blue Plain Risk Admins

Fund balance: £{tpaFund.toFixed(2)}M Accounts: {tpaAccts} Avg. runway: {tpaRunway} days
{tpaSeries.map((s, i) => {s.name} )}
Runway
Account Runway AVG. DAILY PAYMENTS CLOSING BALANCE
{runwayRows.map((r, i) => { // Stagger reveals so the cascade fills the full anim window. const n = runwayRows.length; const slotLen = 0.45; // each row reveals over 45% of progress const start = i / Math.max(1, n - 1) * (1 - slotLen); const local = Math.max(0, Math.min(1, (runwayA.p - start) / slotLen)); const eased = 1 - Math.pow(1 - local, 3); // When the runway accordion is open, gently wobble each row's // figures so the table also has a "live" feel. const dailyParsed = parseAnimatable(r.daily); const closingParsed = parseAnimatable(r.closing); const wA = runwayA.t > 0 ? 1 + 0.028 * Math.sin(runwayA.t * 2.6 + i * 0.7) : 1; const wB = runwayA.t > 0 ? 1 + 0.025 * Math.sin(runwayA.t * 2.6 + i * 0.7 + 1.4) : 1; const dailyTxt = dailyParsed ? formatAnimated(dailyParsed, dailyParsed.target * wA) : r.daily; const closingTxt = closingParsed ? formatAnimated(closingParsed, closingParsed.target * wB) : r.closing; return (
{r.account} {dailyTxt} {closingTxt}
); })}
); }; window.Dashboard = Dashboard;