/* ============================================================
CurrencyDesk OS — Dashboard (owner command center)
Design language: banknote security engraving. Guilloché rosettes,
intaglio hairlines, treasury inks (slate / green / oxblood / bronze)
on cream, serial-number typography — the feel of currency itself,
held to Apple-grade restraint. All data is live off the ledger
and the rate engine.
============================================================ */
(function () {
const { useState, useMemo, useEffect } = React;
const { CD, Ic, fmt, num, crossRate, Absent, businessDate, businessDayWindow, dDiff, useDeskFacts } = window.CDOS;
const computeFlags = window.CDOS.computeFlags;
const RANGES = [['7d', 'Week', 7], ['30d', 'Month', 30], ['90d', '3M', 90], ['180d', '6M', 180], ['365d', 'Year', 365], ['all', 'All', null]];
const HEAD = { '7d': 'Past 7 days', '30d': 'Past 30 days', '90d': 'Past 90 days', '180d': 'Past 6 months', '365d': 'Past year', 'all': 'All-time' };
/* treasury-ink accents (used sparingly over the OS black/cream base).
Themed like CD: values are CSS vars; light = engraving on cream,
dark = the same plate printed on midnight stock, inks lifted to keep
the intaglio contrast. */
const T_THEMES = {
light: {
cream: '#f3eee2', panel: '#faf6ec', vignette: '#f6f1e4',
slate: '#33425f', green: '#2f6b54', oxblood: '#9c3b46', bronze: '#9a7536', steel: '#5a6a86',
line: 'rgba(40,52,80,0.20)', hair: 'rgba(40,52,80,0.12)', wash: 'rgba(40,52,80,0.05)',
},
dark: {
cream: '#191a17', panel: '#1e1f1b', vignette: '#232420',
slate: '#aab6d2', green: '#7cc2a2', oxblood: '#dd8f97', bronze: '#cfa96a', steel: '#93a0ba',
line: 'rgba(186,200,232,0.24)', hair: 'rgba(186,200,232,0.13)', wash: 'rgba(186,200,232,0.06)',
}
};
(function injectDashVars() {
if (document.getElementById('cdos-dash-vars')) return;
const decl = (o) => Object.keys(o).map(k => '--dt-' + k + ':' + o[k] + ';').join('');
const el = document.createElement('style'); el.id = 'cdos-dash-vars';
el.textContent = ':root{' + decl(T_THEMES.light) + '}html[data-cdtheme="dark"]{' + decl(T_THEMES.dark) + '}';
document.head.appendChild(el);
})();
const T = {}; Object.keys(T_THEMES.light).forEach(k => { T[k] = 'var(--dt-' + k + ')'; });
const money0 = (v) => (v < 0 ? '−' : '') + '$' + Math.abs(Math.round(v)).toLocaleString('en-CA');
/* The desk's own currency, and a conversion into it that refuses to
guess. The rate board is quoted in units per CANADIAN dollar, so this
can only answer for a desk that keeps its books in that currency —
everywhere else it returns null and the panel shows the figure as
absent rather than as a Canadian number under a foreign symbol. */
const homeCcy = () => { const pack = window.CDOS.deskPack(); return (pack && pack.homeCurrency) || (window.CDOS.reportingLimit(null) || {}).currency || null; };
const homeOf = (a, ccy) => { const home = homeCcy(); if (!home) return null; if (ccy === home) return +a || 0; if (home !== 'CAD') return null; const r = crossRate('CAD', ccy); return r ? (+a || 0) / r : null; };
const fmtHome = (v) => v == null ? '—' : fmt(v, homeCcy() || 'CAD');
const flagEmoji = (code) => { try { return (typeof CUR !== 'undefined' ? (CUR.find(c => c.code === code) || {}).flag : '') || ''; } catch (e) { return ''; } };
const initials = (n) => (n || '?').split(/[\s.]+/).filter(Boolean).map(x => x[0]).join('').slice(0, 2).toUpperCase();
/* ---------------- guilloché rosette (hypotrochoid weave) ---------------- */
function hypo(R, r, d, turns, steps) {
const k = (R - r) / r; let p = '';
const N = steps * turns;
for (let i = 0; i <= N; i++) { const t = (i / steps) * 2 * Math.PI; const x = (R - r) * Math.cos(t) + d * Math.cos(k * t); const y = (R - r) * Math.sin(t) - d * Math.sin(k * t); p += (i === 0 ? 'M' : 'L') + x.toFixed(1) + ',' + y.toFixed(1); }
return p;
}
function Rosette({ size = 132, stroke = T.slate, opacity = 1, style }) {
// a few layered hypotrochoids → the woven banknote rosette
const layers = useMemo(() => ([
{ d: hypo(48, 7, 32, 7, 240), w: 0.5, o: 0.9 },
{ d: hypo(44, 5, 26, 5, 240), w: 0.5, o: 0.8 },
{ d: hypo(38, 9, 30, 9, 240), w: 0.45, o: 0.7 },
{ d: hypo(28, 4, 18, 4, 220), w: 0.45, o: 0.85 },
]), []);
return ();
}
function WaveRule({ color = T.line, h = 10, amp = 3, period = 22 }) {
const w = 1200; let d = `M0,${h / 2}`;
for (let x = 0; x <= w; x += 2) d += ` L${x},${(h / 2 + amp * Math.sin((x / period) * 2 * Math.PI)).toFixed(2)}`;
return ();
}
/* ---------------- engraved charts ---------------- */
function AreaChart({ data, w = 420, h = 92, stroke = T.slate }) {
if (!data || data.length < 2) return
Awaiting history
;
const max = Math.max(...data, 1), min = Math.min(...data, 0), rng = max - min || 1;
const X = (i) => (i / (data.length - 1)) * w;
const Y = (v) => h - ((v - min) / rng) * (h - 10) - 5;
const line = data.map((v, i) => `${i === 0 ? 'M' : 'L'}${X(i).toFixed(1)},${Y(v).toFixed(1)}`).join(' ');
return ();
}
function Donut({ a, b }) {
const size = 128, total = a + b || 1, r = size / 2 - 11, c = 2 * Math.PI * r, aFrac = a / total, cx = size / 2, cy = size / 2;
return (
Earned
{money0(total)}
);
}
function VBars({ series, h = 100 }) {
const max = Math.max(...series.map(s => s.v), 1);
return (
{series.map((s, i) => { const last = i === series.length - 1; return (
{s.label}
); })}
);
}
/* ---------------- intaglio card shell ---------------- */
function Engrave({ children }) { return {children}; }
function Card({ title, action, children, span }) {
return (
{title}
{action}
{children}
);
}
function Delta({ cur, prev, light }) {
if (prev == null || prev === 0) return —;
const pct = ((cur - prev) / Math.abs(prev)) * 100, up = pct >= 0;
return ({up ? '▲' : '▼'} {Math.abs(pct).toFixed(1)}%);
}
/* ============================================================
THE OFFICE OF THE DESK
Every headline on this screen used to be computed here, in the
browser, from a demo seed. It announced Earnings $1,150, Volume
$130,566, Deals 38 and Margin 0.88% for a desk that had posted one
$1,000 trade and voided it, over a serial number reading № 20260618
— a date seven weeks in the past.
The FX exposure panel was worse than wrong, it was dangerous. It
computed a position as the NET OF THE PERIOD'S DEALS: pay-ins minus
pay-outs. That is a flow, not a holding, and it reported the desk
SHORT €10,302 and SHORT ₱13,900 when the ledger had it LONG €12,000
and holding no pesos at all. An owner hedging off that panel would
sell euros they do not have short and buy pesos they never held.
Both now come from the ledger — GET /api/ledger/summary for what was
earned over a window, GET /api/ledger/position for what is actually
in the boxes. Where the book has no answer the tile says so; see
docs/ABSENT_FIGURES.md.
============================================================ */
function Dashboard({ rows, clients, settings, me, onOpenLedger, onOpenClient, openFiltered, onOpenApp, serverBacked, cashVersion }) {
const [posMode, setPosMode] = useState('value');
const [range, setRange] = useState('30d');
// the trading day and the jurisdiction pack, from the server
const deskFacts = useDeskFacts();
/* The window this screen is asking the book about. Its length comes
from the range picker; where it STARTS comes from the till session's
business date, because that is the day the desk considers itself to
be trading in. */
const winDays = (RANGES.find(r => r[0] === range) || RANGES[1])[2];
const [book, setBook] = useState({ loading: true, summary: null, prior: null, position: null, error: '' });
useEffect(() => {
const backend = window.CDOS.Backend;
if (!backend) { setBook({ loading: false, summary: null, prior: null, position: null, error: 'This desk is not signed in to the ledger.' }); return; }
let live = true;
setBook(b => ({ ...b, loading: true }));
window.CDOS.refreshBusinessDate().then(() => {
/* Two windows, so "up 12% on the period before" is a comparison of
two real periods rather than of one real one against a guess.
An all-time range has no period before it and asks for none. */
const current = winDays == null ? {} : window.CDOS.businessDayWindow(winDays);
const prior = winDays == null ? null : { from: window.CDOS.businessDayWindow(winDays * 2).from, to: current.from };
return Promise.all([
backend.loadLedgerSummary(current),
prior ? backend.loadLedgerSummary(prior) : Promise.resolve(null),
backend.loadLedgerPosition(),
]);
})
.then(([summary, prior, position]) => { if (live) setBook({ loading: false, summary, prior, position, error: '' }); })
.catch(error => { if (live) setBook({ loading: false, summary: null, prior: null, position: null, error: (error && error.message) || 'The ledger could not be reached.' }); });
return () => { live = false; };
}, [range, serverBacked, cashVersion, deskFacts]);
const summary = book.summary;
const home = (summary && summary.homeCurrency) || (book.position && book.position.homeCurrency) || homeCcy() || 'CAD';
/* What the desk EARNED: commission plus the realized margin the
disposal itself booked. Not a spread against a market mid — see
docs/COST_BASIS.md. Null means the ledger has nothing to total,
which is a different statement from "earned nothing". */
const periodEarn = summary ? summary.earningsHome : null;
const priorEarn = book.prior ? book.prior.earningsHome : null;
const totVol = summary ? summary.volumeHome : null;
const totFees = summary ? summary.feesHome : null;
const totRealized = summary ? summary.realizedPnlHome : null;
const dealCount = summary ? summary.posted : null;
const marginPct = (periodEarn != null && totVol != null && Number(totVol) > 0)
? (Number(periodEarn) / Number(totVol)) * 100 : null;
/* WHAT THE DESK IS HOLDING — till and vault, as the ledger states it.
Long means the cash is in the box; there is no "short" here, because
a desk cannot hold negative banknotes. A currency the desk has run
out of simply is not in the list, and the panel says which
currencies are on the book rather than implying a hedge. */
const held = useMemo(() => {
const p = book.position;
if (!p) return null;
return (p.currencies || [])
.map(c => ({
ccy: c.currency,
units: Number(c.quantity),
home: c.marketValueHome == null ? null : Number(c.marketValueHome),
unrealized: c.unrealizedPnlHome == null ? null : Number(c.unrealizedPnlHome),
}))
.filter(c => c.units > 0)
.sort((a, b) => (b.home || 0) - (a.home || 0));
}, [book.position]);
const fxRows = (held || []).filter(p => p.ccy !== home);
const fxValued = fxRows.every(p => p.home != null);
/* Gross foreign exposure: the home value of every foreign note in the
building. There is no net-versus-gross distinction on physical cash
— you are long all of it — so the panel reports one figure and what
a one-percent move does to it. */
const fxTotal = fxValued ? fxRows.reduce((s, p) => s + p.home, 0) : null;
const sensitivity = fxTotal == null ? null : Math.abs(fxTotal) * 0.01;
const maxPos = Math.max(1, ...((held || []).map(p => Math.abs(p.home || 0))));
const D = useMemo(() => {
/* These read the transaction rows the ledger sent, which is what
`rows` now is — the demo seed is gone. Grouping records the server
supplied is presentation, not a second book; no cash figure is
derived here. Earnings per client and per teller use the deal's
own booked spread rather than a re-estimate. */
const earnOf = (r) => (+r.fee || 0) + (r.spreadCad != null && !isNaN(r.spreadCad) ? Math.max(0, +r.spreadCad) : 0);
const inWindow = (d) => winDays == null ? true : (dDiff(d, businessDate()) >= -0.5 && dDiff(d, businessDate()) <= winDays + 0.5);
const live = rows.filter(r => r.status !== 'void' && inWindow(r.date));
const cl = {};
live.forEach(r => { const k = r.customer || '—'; const c = cl[k] || (cl[k] = { name: k, vol: 0, earn: 0, n: 0 }); c.vol += (homeOf(r.inAmt, r.inCcy) || 0); c.earn += earnOf(r); c.n++; });
const topClients = Object.values(cl).sort((a, b) => b.vol - a.vol).slice(0, 5);
const tl = {}; live.forEach(r => { tl[r.teller || '—'] = (tl[r.teller || '—'] || 0) + earnOf(r); });
const tellers = Object.entries(tl).sort((a, b) => b[1] - a[1]);
const corrM = {}; live.forEach(r => { const k = r.inCcy + ' → ' + r.outCcy; const c = corrM[k] || (corrM[k] = { route: k, vol: 0, n: 0 }); c.vol += (homeOf(r.inAmt, r.inCcy) || 0); c.n++; });
const corridors = Object.values(corrM).sort((a, b) => b.vol - a.vol).slice(0, 5);
const flags = computeFlags(rows, clients, settings);
let rptOpen = 0, rptFiled = 0; const strSet = new Set(), kycSet = new Set();
live.forEach(r => { const f = flags[r.id] || {}; if (f.single) { r.filed ? rptFiled++ : rptOpen++; } if (f.str && !r.ackStr) strSet.add(r.customer); if (f.kyc && f.kyc !== 'ok') kycSet.add(r.customer); });
const recent = [...live].sort((a, b) => (b.date + b.time).localeCompare(a.date + a.time)).slice(0, 6);
const movers = (typeof CUR !== 'undefined' ? CUR : []).filter(c => c.code !== homeCcy()).map(c => ({ code: c.code, flag: c.flag, chg: +c.chg || 0 })).sort((a, b) => Math.abs(b.chg) - Math.abs(a.chg)).slice(0, 6);
const bmode = (winDays == null || winDays > 180) ? 'month' : winDays > 31 ? 'week' : 'day';
const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const keyOf = (date) => { if (bmode === 'day') return date; if (bmode === 'month') return date.slice(0, 7); const dt = new Date(date); const off = (dt.getDay() + 6) % 7; dt.setDate(dt.getDate() - off); return dt.toISOString().slice(0, 10); };
const labelOf = (k) => { if (bmode === 'day') return k.slice(5); if (bmode === 'month') return MON[(+k.slice(5, 7)) - 1] + ' ' + k.slice(2, 4); return k.slice(5); };
const bk = {}; live.forEach(r => { const k = keyOf(r.date); bk[k] = (bk[k] || 0) + earnOf(r); });
const series = Object.keys(bk).sort().slice(-12).map(k => ({ key: k, label: labelOf(k), earn: bk[k] }));
return { topClients, tellers, corridors, rptOpen, rptFiled, str: strSet.size, kyc: kycSet.size, recent, movers, series, bmode };
}, [rows, clients, settings, range, deskFacts]);
// ---- cross-module consolidation: Transfers, Cheques, Vault, screening ----
const X = useMemo(() => {
const J = (k, d) => { try { const r = JSON.parse(localStorage.getItem(k) || 'null'); return r == null ? d : r; } catch (e) { return d; } };
const P = window.CDOS, comp = P._compliance;
const transfers = J('cdos_transfers_v1', []), cheques = J('cdos_cheques_v1', []), beneficiaries = J('cdos_beneficiaries_v1', []);
const tInProg = transfers.filter(t => t.status !== 'paid' && t.status !== 'cancelled').length;
const tHold = transfers.filter(t => t.status === 'hold').length;
const tVol = transfers.filter(t => t.status !== 'cancelled').reduce((s, t) => s + (t.direction === 'send' ? t.payAmt : (homeOf(t.recvAmt, homeCcy()) || 0)), 0);
const chRisk = cheques.filter(c => c.status === 'held').reduce((s, c) => s + (+c.netCad || 0), 0);
const chOverdue = cheques.filter(c => c.status === 'held' && c.holdUntil < businessDate()).length;
const chLoss = cheques.filter(c => c.status === 'returned').reduce((s, c) => s + (+c.netCad || 0), 0);
/* The vault tile reads the SAFE's own figures out of the same
position response the exposure panel uses, so the Dashboard and
the Vault app cannot report two different strong rooms. */
const vaultTotals = (book.position && book.position.vaultTotals) || null;
const vaultTracked = !!(book.position && book.position.vaultTracked);
const regime = P.getRegime ? P.getRegime(settings) : { aggHours: 24 };
/* The reporting line: the desk's own, in the desk's own currency,
from the jurisdiction pack the server states — never the hardcoded
10,000 Canadian dollars this file used to inherit. */
const limit = P.reportingLimit(settings);
let sanc = 0;
if (comp) { Object.keys(clients || {}).forEach(n => { if (comp.screen(n).status !== 'clear') sanc++; }); beneficiaries.forEach(b => { if (comp.screen(b.name).status !== 'clear') sanc++; }); }
const agg = comp ? comp.aggClusters(rows, Object.assign({}, regime, limit.amount != null ? { threshold: limit.amount } : null)).length : 0;
const eftr = limit.amount == null ? null : transfers.filter(t => t.status !== 'cancelled' && (t.direction === 'send' ? t.payAmt : (homeOf(t.recvAmt, homeCcy()) || 0)) >= limit.amount).length;
return { tInProg, tHold, tVol, chRisk, chOverdue, chLoss, vaultTotals, vaultTracked, sanc, agg, eftr, regime, limit };
}, [rows, clients, settings, range, book.position, deskFacts]);
const hour = new Date().getHours();
const greet = hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';
const firstName = (me && me.name ? me.name.split(/[ .]/).filter(Boolean).pop() : '') || 'there';
const maxTeller = Math.max(1, ...D.tellers.map(t => t[1]));
const maxCorr = Math.max(1, ...D.corridors.map(c => c.vol));
const headLabel = HEAD[range] || 'Period';
const bucketWord = D.bmode === 'day' ? 'days' : D.bmode === 'week' ? 'weeks' : 'months';
/* The serial is the trading day this desk is actually in, not the last
date a demo record happened to carry. */
const serial = businessDate().replace(/-/g, '') + ' · ' + (settings && settings.deskName ? settings.deskName.replace(/[^0-9]/g, '') || '01' : '01');
const deskName = (settings && (settings.operatingName || settings.bizName)) || 'This desk';
/* One line, used by every tile that has to explain a dash. */
const noBook = book.error || (book.loading ? 'reading the book…' : 'nothing posted in this period');
return (
{/* ===== BANKNOTE MASTHEAD ===== */}
{/* eyebrow / serial line */}
CurrencyDesk · Office of the Desk№ {serial}
{/* left — denomination */}
{greet}, {firstName}
{headLabel} · earnings
{/* The number an owner reads first. It is the ledger's or
it is a dash — never a demo figure, and never a
confident $0 for a period the book has not answered. */}
{periodEarn == null
?
: {money0(Number(periodEarn))}}
{periodEarn != null && }
{/* CASH POSITION & FX EXPOSURE — the desk's actual holdings.
What was here derived a "position" from the net of the
period's deals, which is a FLOW. It reported the desk short
currencies it was long and short a currency it had never
held. This reads the boxes. */}
{[['value', home], ['units', 'Units']].map(([v, l]) => )}
What the drawer and the safe physically hold, per the ledger — held means the notes are in the building. Physical cash is never short. {sensitivity == null ? 'A currency the branch has not published a rate for cannot be valued, so the exposure figure is withheld rather than estimated.' : `A 1% move against ${home} shifts the foreign holding ±${money0(sensitivity)}.`}
{/* REVENUE MIX — commission versus TRADING MARGIN.
The second slice used to be an FX spread estimated against a
market mid. It is now the realized figure the disposal booked
against what the notes actually cost, which is the only thing
a desk may call profit. See docs/COST_BASIS.md. */}
{periodEarn == null ? (
{X.tHold > 0 ? {X.tHold} on hold : none on hold}
· {X.limit.amount == null ? 'no reporting line set for this desk' : `${X.eftr} cross-border ≥ ${X.limit.label}`}
{X.vaultTracked ? `${X.vaultTotals.currencies} currenc${X.vaultTotals.currencies === 1 ? 'y' : 'ies'} on the ledger` : 'count the safe once and record it'}