/* screen-insights.jsx — Insights (F10): month recap, 6-month bars, days-to-paid,
top clients → window.QScreens.Insights. Pushed route under Home. */
(function () {
const Q = window.Q, LIB = window.LIB, Icons = window.Icons;
const { Icon } = Icons;
const { useState, useEffect, useRef } = React;
const { AppBar, Card, Kicker, AnimatedNumber, Button, Avatar, EntityLink, Money, Row } = Q;
const t = window.t;
/* Reduced-motion gate (mirrors primitives' REDUCE; locally scoped). */
const REDUCE = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
/* Count-up for a PLAIN number (the day count earns a reveal, but it's not money
so AnimatedNumber — which always renders currency — can't carry it). render(n)
formats the integer back into its i18n string. Counts up once per session per key. */
const seenDays = new Map();
function CountUp({ value, animKey, duration = 750, render, ...rest }) {
const seen = animKey != null && seenDays.get(animKey) === value;
const [disp, setDisp] = useState(seen ? value : 0);
const rafRef = useRef(null);
useEffect(() => {
if (animKey != null) seenDays.set(animKey, value);
if (REDUCE() || seen) { setDisp(value); return; }
const t0 = performance.now();
const tick = (now) => {
const p = Math.min(1, (now - t0) / duration);
const e = 1 - Math.pow(1 - p, 3);
setDisp(Math.round(value * e));
if (p < 1) rafRef.current = requestAnimationFrame(tick);
};
rafRef.current = requestAnimationFrame(tick);
return () => cancelAnimationFrame(rafRef.current);
}, [value]);
return
{render(disp)}
;
}
/* Same legend markup as Home's split-bar legend (gold/success). */
function Legend({ color, label }) {
return (
{label}
);
}
function Insights({ api }) {
const { db, today } = api;
const ins = LIB.insights(db, today);
const cur = db.COMPANY.currency;
const now = ins.months[ins.months.length - 1];
/* {count} in the recap body = invoices that went out this month. */
const issuedCount = (db.INVOICES || []).filter(i =>
i.kind === "invoice" && i.status !== "draft" && String(i.issued || "").slice(0, 7) === now.key
).length;
/* Brief copy→check swap on the button confirms the recap copied, in-place,
on top of the toast — a tactile "share your month" demo beat. */
const [copied, setCopied] = useState(false);
const copiedRef = useRef(null);
useEffect(() => () => clearTimeout(copiedRef.current), []);
const copyRecap = () => {
try { navigator.clipboard.writeText(LIB.recapText(db, today)); } catch (e) { /* clipboard may be unavailable; the toast still confirms the intent */ }
Q.toast(t("insights.shared"), "copy");
setCopied(true);
clearTimeout(copiedRef.current);
copiedRef.current = setTimeout(() => setCopied(false), 1400);
};
/* Bars scale: max across BOTH series, never below 1 (empty months keep a sane axis).
A single blowout month on a LINEAR axis flattens every other bar to a sliver
(insights-chart-outlier-flattens-bars). Map heights through sqrt so a 10× month
reads ~3× taller — small months stay legible while the tallest still wins. The
axis tick still shows the true money max; only the visual encoding is compressed. */
const max = Math.max(1, ...ins.months.map(mo => Math.max(mo.billed, mo.collected)));
const sqrtMax = Math.sqrt(max);
const barH = v => (v > 0 ? Math.max(3, Math.round((Math.sqrt(v) / sqrtMax) * 72)) : 0);
/* Choreography: the recap numbers count up first; the bars then grow left→right
(220ms base + 40ms/col), and the current-month value labels settle on top once
the final bar has finished. One source of truth so the cascade stays in sync. */
const BAR_BASE = 220, BAR_STEP = 40, BAR_DUR = 500;
const labelDelay = BAR_BASE + (ins.months.length - 1) * BAR_STEP + BAR_DUR;
/* daysToPaidAvg is null when nothing has been paid yet — "0 days" reads as
"instant payment" which is a lie (days-to-paid-zero-empty-state). Branch the
card on hasDaysToPaid and show guidance instead of a fake zero. */
const hasDaysToPaid = ins.daysToPaidAvg != null;
const d = hasDaysToPaid ? ins.daysToPaidAvg : 0;
/* MoM (harsh-mom-down-narrative / insights-partial-month-crash render half):
LIB already computes delta as MTD-vs-same-elapsed-window, so the number is
honest on a partial month. The remaining job here is TONE: a partial-month
dip is not an alarm, so we drop the alert-red terracotta on a "down" arrow
while the month is still incomplete and add a quiet "N days in" caption so
the comparison is legible as month-to-date, not a finished verdict. */
const incomplete = ins.mom.incomplete;
const delta = ins.mom.deltaPct;
const isDown = delta != null && delta < 0;
const momKey = delta == null || delta === 0 ? "insights.mom.flat" : delta > 0 ? "insights.mom.up" : "insights.mom.down";
/* down + still-incomplete month → neutral text-3 (not terracotta alert) */
const downColor = incomplete ? "var(--color-text-3)" : "var(--color-accent)";
const momIcon = delta == null || delta === 0 ? null
: delta > 0 ? { name: "arrowUpRight", color: "var(--color-success)" }
: { name: "trendingDown", color: downColor };
const momTextColor = isDown && incomplete ? "var(--color-text-3)" : "var(--color-text-2)";
return (
{/* MoM is a billed-revenue delta: it lives under BILLED (up = success;
down = terracotta, but neutral text-3 while the month is incomplete
so a partial-month dip doesn't read as a red alarm). */}
{/* "N days in" makes clear the comparison is month-to-date vs the same
window last month, not a finished month. Only while incomplete. */}
{incomplete && (
{/* Collected = money that actually LANDED, so it reads in success-green
to match its dot (collected-gold-number-green-dot: a gold number over
a green dot mixed the "billed/owed" and "paid/in" semantics). Billed
stays gold — money invoiced, not yet collected. */}
{/* ── 6-month double-bar chart ───────────────────────────── */}
{t("insights.6months")}
{/* paddingTop 16 = headroom for the max tick + current-month values;
track spans 16..88 inside the padding box, so gridline (50%) = 52, baseline = 88 */}
{window.fmtMoney(max, cur, { cents: false })}
{/* paddingRight 6 + right-anchored annotation on the final column keep the € labels off the card edge */}
{ins.months.map((mo, i) => (
{i === ins.months.length - 1 && (
/* values fade in only after the final bar has grown, so they settle on top instead of floating in empty space */
{/* ── Days to get paid (serif display / not gold: a day count is NOT money, so text-1) ── */}
{t("insights.daysToPaid")}
{hasDaysToPaid ? (
/* a day count isn't money, but it still earns a count-up reveal (text-1, not gold) */
t("insights.daysToPaid.value", { d: n })} />
) : (
/* No invoice has been paid yet → "0 days" would read as instant payment.
Show guidance instead (days-to-paid-zero-empty-state). */
{/* The list is aggregated YEAR-TO-DATE (lib filters issued-year === current);
without a timeframe "Top clients" reads as all-time and the totals don't
reconcile with anything (top-clients-no-timeframe). State the window. */}
{t("insights.topClients")}{t("tax.period.ytd")}
{ins.topClients.map((c, i) => (
api.goTab("clients", "client", { id: c.id })}
style={{ animation: "q-fade-up .4s cubic-bezier(.32,.72,0,1) both", animationDelay: (0.04 + i * 0.05) + "s" }}>
{/* ordinal rank turns "a list" into "a ranking" — mono, muted, gold for #1 */}
{i + 1}