@butinapp/ui 0.1.0

package/dist/features/dashboard/overview-model.js

@@ -0,0 +1,170 @@
+import {} from '@butinapp/sdk/data';
+import { convert, round2 } from '@butinapp/sdk/util';
+import { combineDailySpend } from '@butinapp/shapes';
+import { groupBy, sortBy, sumBy } from 'lodash-es';
+const amountAt = (series, month) => series?.find((p) => p.month === month)?.amount ?? 0;
+// The spend-section summary a service reports — the live current-period figure its own page headlines.
+const spendOf = (p) => (p.summaries ?? []).find((s) => s.section === 'spend');
+// A plugin's current-month spend in the base currency. Prefer the current LOCAL month's bar from the service's
+// own per-month series (the figure its chart shows for this month) — built from clean per-month data (invoices,
+// cost-explorer months), so it rolls when the user's local month rolls, not when the provider resets its billing
+// period. A service whose provider period reset early (UTC month rollover) still reads the user's current month
+// here instead of the tiny post-reset open-period figure. With no bar for this month (an arrears service invoices
+// in arrears, so its current month isn't in the series yet) it falls back to the live spend-summary value — its
+// open-period spend, matching its own page. 0 when there's neither, or the native currency has no rate.
+export const currentMtd = (p, nowMonth, baseCurrency = 'USD', rates = {}) => {
+    const bar = monthlyInBase(p, baseCurrency, rates).find((pt) => pt.month === nowMonth);
+    if (bar) {
+        return bar.amount;
+    }
+    // No bar for this month (an arrears service invoices in arrears): the peak accrued reading Butin captured this
+    // month — restores the just-closed month's figure when the provider's live open-period value has already reset
+    // for the next period. Falls through to the live spend-summary value only when nothing was captured this month.
+    if (p.currentMonthAccrual != null && p.currentMonthAccrual > 0) {
+        return convert(p.currentMonthAccrual, p.currency ?? baseCurrency, baseCurrency, rates) ?? 0;
+    }
+    const s = spendOf(p);
+    return s ? (convert(s.value, s.currency ?? p.currency ?? baseCurrency, baseCurrency, rates) ?? 0) : 0;
+};
+// A plugin's monthly amounts converted into the base currency. Sorted by month because the stored series
+// arrives in keyed-table insertion order, and consumers read it by position (prevMo, the spark). An
+// unconvertible currency (no rate) yields an empty series so it never distorts a base-currency aggregate.
+const monthlyInBase = (p, baseCurrency, rates) => {
+    const ccy = p.currency ?? baseCurrency;
+    return (p.monthly ?? [])
+        .flatMap((pt) => {
+        const amount = convert(pt.amount, ccy, baseCurrency, rates);
+        return amount === null ? [] : [{ month: pt.month, amount }];
+    })
+        .sort((a, b) => a.month.localeCompare(b.month));
+};
+// A plugin's per-day spend converted into the base currency (same missing-rate exclusion as monthlyInBase).
+const dailyInBase = (p, baseCurrency, rates) => {
+    const ccy = p.currency ?? baseCurrency;
+    return (p.daily ?? []).flatMap((pt) => {
+        const value = convert(pt.value, ccy, baseCurrency, rates);
+        return value === null ? [] : [{ ...pt, value }];
+    });
+};
+// Union every plugin's months into one sorted, summed series — converting each to the base currency first.
+export const combinedMonthly = (plugins, baseCurrency = 'USD', rates = {}) => {
+    const byMonth = groupBy(plugins.flatMap((p) => monthlyInBase(p, baseCurrency, rates)), (point) => point.month);
+    return sortBy(Object.entries(byMonth), ([month]) => month).map(([month, points]) => ({
+        month,
+        amount: round2(sumBy(points, (pt) => pt.amount))
+    }));
+};
+// Sum every spend plugin's per-day series into one combined daily series (a day is estimated if any
+// contributing service estimated it), converting each to the base currency. Empty when no plugin has
+// captured snapshots yet.
+export const combinedDaily = (plugins, baseCurrency = 'USD', rates = {}) => combineDailySpend(plugins.map((p) => dailyInBase(p, baseCurrency, rates)));
+// Headline numbers. `nowMonth` is the current (partial) month — excluded from the "completed months" the
+// run-rate averages. mtd = nowMonth's total; lastFullMonth = the last completed month before nowMonth.
+export const monthStats = (plugins, nowMonth, baseCurrency = 'USD', rates = {}) => {
+    const combined = combinedMonthly(plugins, baseCurrency, rates);
+    const completed = combined.filter((p) => p.month < nowMonth);
+    const lastFullMonth = completed.at(-1)?.amount ?? 0;
+    const recent = completed.slice(-3);
+    const avg = recent.length > 0 ? sumBy(recent, (p) => p.amount) / recent.length : 0;
+    const mtd = sumBy(plugins, (p) => currentMtd(p, nowMonth, baseCurrency, rates));
+    return {
+        mtd: round2(mtd),
+        lastFullMonth,
+        annualizedRunRate: avg * 12
+    };
+};
+// Per-plugin change between two months, split into increases (delta > 0) and drops (delta < 0), each
+// sorted by magnitude. pct is relative to the `from` month (0 → 100% when growing from nothing).
+export const movers = (plugins, from, to, baseCurrency = 'USD', rates = {}) => {
+    const all = plugins.map((p) => {
+        const series = monthlyInBase(p, baseCurrency, rates);
+        const a = amountAt(series, from);
+        const b = amountAt(series, to);
+        const delta = round2(b - a);
+        return {
+            pluginId: p.pluginId,
+            pluginName: p.pluginName,
+            color: p.color,
+            icon: p.icon,
+            delta,
+            pct: a === 0 ? (b > 0 ? 100 : 0) : Math.round(((b - a) / a) * 100)
+        };
+    });
+    return {
+        increases: all.filter((m) => m.delta > 0).sort((x, y) => y.delta - x.delta),
+        drops: all.filter((m) => m.delta < 0).sort((x, y) => x.delta - y.delta)
+    };
+};
+// One table row per plugin: current-month MTD, last completed month, MoM %, share of last-month total,
+// the full spark series, and the all-window total.
+export const byServiceRows = (plugins, nowMonth, baseCurrency = 'USD', rates = {}) => {
+    const lastMonth = combinedMonthly(plugins, baseCurrency, rates)
+        .filter((p) => p.month < nowMonth)
+        .at(-1)?.month;
+    const series = new Map(plugins.map((p) => [p.pluginId, monthlyInBase(p, baseCurrency, rates)]));
+    const lastTotal = sumBy(plugins, (p) => (lastMonth ? amountAt(series.get(p.pluginId), lastMonth) : 0));
+    return plugins.map((p) => {
+        const months = series.get(p.pluginId) ?? [];
+        const mtd = currentMtd(p, nowMonth, baseCurrency, rates);
+        const lastMo = lastMonth ? amountAt(months, lastMonth) : 0;
+        const prevMo = months.filter((pt) => lastMonth && pt.month < lastMonth).at(-1)?.amount ?? 0;
+        const momPct = prevMo === 0 ? (lastMo > 0 ? 100 : 0) : Math.round(((lastMo - prevMo) / prevMo) * 100);
+        return {
+            pluginId: p.pluginId,
+            pluginName: p.pluginName,
+            color: p.color,
+            icon: p.icon,
+            mtd,
+            lastMo,
+            prevMo,
+            momPct,
+            share: lastTotal === 0 ? 0 : Math.round((lastMo / lastTotal) * 100),
+            spark: months.map((pt) => pt.amount),
+            byMonth: Object.fromEntries(months.map((pt) => [pt.month, pt.amount])),
+            total: round2(sumBy(months, (pt) => pt.amount))
+        };
+    });
+};
+// The detailed table's window "Total": a row summed over only the months currently displayed (the current
+// month read from its live `mtd`, every other month from the series), as opposed to `total` (all-time). A
+// displayed month the service has no data for contributes 0.
+export const windowTotal = (row, months, nowMonth) => round2(sumBy(months, (m) => (m === nowMonth ? row.mtd : (row.byMonth[m] ?? 0))));
+// The current-month spend grouped by each service's NATIVE currency (exact, no conversion), plus a count of
+// currencies with no rate. The Overview shows this breakdown — and an `≈` on the converted headline — only
+// when more than one currency is present or some can't be converted; a single-base-currency setup hides it.
+export const spendBreakdown = (plugins, nowMonth, baseCurrency = 'USD', rates = {}) => {
+    // Native (un-converted) current-month spend per service: the live spend-summary value, else the series bar
+    // — so the per-currency breakdown agrees with the headline for arrears services.
+    const byCcy = groupBy(plugins, (p) => p.currency ?? baseCurrency);
+    const rows = Object.entries(byCcy).map(([currency, group]) => ({
+        currency,
+        mtd: round2(sumBy(group, (p) => spendOf(p)?.value ?? amountAt(p.monthly, nowMonth))),
+        convertible: convert(1, currency, baseCurrency, rates) !== null
+    }));
+    return { rows, unconverted: rows.filter((r) => !r.convertible).length };
+};
+// The older completed months to show as their own columns in the detailed spend table — newest-first,
+// capped at `max`. Excludes the current partial month (its own MTD column) and the last completed month
+// (its own "Last mo" column), so these are the months *before* last-mo (e.g. Apr, Mar, Feb, Jan, Dec).
+export const monthColumns = (plugins, nowMonth, max = 5) => {
+    const completed = combinedMonthly(plugins)
+        .map((p) => p.month)
+        .filter((m) => m < nowMonth);
+    return completed.slice(0, -1).reverse().slice(0, max);
+};
+// A service's headline summary: an explicit headline:true wins, else spend > balance > other.
+export const pickHeadline = (p) => {
+    const summaries = p.summaries ?? [];
+    const order = ['spend', 'balance', 'other'];
+    return summaries.find((s) => s.headline) ?? order.flatMap((sec) => summaries.filter((s) => s.section === sec))[0];
+};
+// A service lands in Spending / Balances for each monetary headline it reports — a bank with a spend AND a
+// balance shows in both. Others is the non-monetary catch-all: a service shows there only when it reports
+// NEITHER spend nor balance (a usage/count-only service, or one with no summary). A billing service that also
+// reports a usage-cost 'other' metric stays in Spending — its usage lives on its own page, not a second tile.
+const has = (p, section) => (p.summaries ?? []).some((s) => s.section === section);
+export const partition = (plugins) => ({
+    spend: plugins.filter((p) => has(p, 'spend')),
+    balances: plugins.filter((p) => has(p, 'balance')),
+    others: plugins.filter((p) => !has(p, 'spend') && !has(p, 'balance'))
+});

package/dist/features/dashboard/overview.d.ts

@@ -0,0 +1,8 @@
+import { type FxRates } from '@butinapp/sdk/util';
+import { type OverviewPlugin } from './overview-model.js';
+export declare const Overview: ({ plugins, baseCurrency, rates, onOpen }: {
+    plugins: OverviewPlugin[];
+    baseCurrency?: string;
+    rates?: FxRates;
+    onOpen?: (pluginId: string) => void;
+}) => import("react").JSX.Element;

package/dist/features/dashboard/overview.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MONTH_ABBR, convert } from '@butinapp/sdk/util';
+import { ArrowDownRight, ArrowUpRight, ChevronDown } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '../../components/card.js';
+import { DropdownMenu, DropdownMenuItem, DropdownMenuContent, DropdownMenuTrigger } from '../../components/dropdown-menu.js';
+import { ServiceIcon } from '../../components/service-icon.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../components/tooltip.js';
+import { useLabels } from '../../i18n/context.js';
+import { useFormat } from '../../i18n/format-context.js';
+import { formatDateTime } from '../../i18n/format.js';
+import { formatMoney, formatMoneyCompact } from '../../lib/format.js';
+import { StatCard } from '../charts.js';
+import { byServiceRows, combinedDaily, combinedMonthly, monthColumns, monthStats, movers, partition, spendBreakdown, windowTotal } from './overview-model.js';
+import { TimeseriesChart } from './timeseries-chart.js';
+const monthLabel = (key) => {
+    const [y, m] = key.split('-');
+    return `${MONTH_ABBR[Number(m) - 1] ?? m} '${(y ?? '').slice(2)}`;
+};
+const nowMonthKey = () => {
+    const d = new Date();
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
+};
+const pctClass = (n) => n > 0 ? 'text-red-500 dark:text-red-400' : n < 0 ? 'text-emerald-500 dark:text-emerald-400' : 'text-muted-foreground';
+// The Spending band: rollup stat cards, a combined monthly-spend bar chart, "what changed" movers, and a
+// by-service table. Fed only the plugins reporting a spend section (see `partition`) — so non-monetary
+// services never land in the spend math. Reads each plugin's monthly series; one with none contributes nothing.
+const SpendingSection = ({ plugins, fx, onOpen }) => {
+    const t = useLabels();
+    const nowMonth = nowMonthKey();
+    const { baseCurrency, rates } = fx;
+    const [view, setView] = useState('compact');
+    // How many trailing months the detailed table shows as columns (This mo + Last mo + the older columns).
+    const [monthsToShow, setMonthsToShow] = useState(6);
+    const combined = useMemo(() => combinedMonthly(plugins, baseCurrency, rates), [plugins, baseCurrency, rates]);
+    const daily = useMemo(() => combinedDaily(plugins, baseCurrency, rates), [plugins, baseCurrency, rates]);
+    const stats = useMemo(() => monthStats(plugins, nowMonth, baseCurrency, rates), [plugins, nowMonth, baseCurrency, rates]);
+    const rows = useMemo(() => byServiceRows(plugins, nowMonth, baseCurrency, rates).sort((a, b) => b.lastMo - a.lastMo), [plugins, nowMonth, baseCurrency, rates]);
+    // The older-month columns: the chosen window minus the dedicated This-mo + Last-mo columns.
+    const cols = useMemo(() => monthColumns(plugins, nowMonth, Math.max(0, monthsToShow - 2)), [plugins, nowMonth, monthsToShow]);
+    const breakdown = useMemo(() => spendBreakdown(plugins, nowMonth, baseCurrency, rates), [plugins, nowMonth, baseCurrency, rates]);
+    const completed = combined.filter((p) => p.month < nowMonth);
+    const from = completed.at(-2)?.month ?? completed.at(-1)?.month ?? nowMonth;
+    const to = completed.at(-1)?.month ?? nowMonth;
+    const move = useMemo(() => movers(plugins, from, to, baseCurrency, rates), [plugins, from, to, baseCurrency, rates]);
+    const hints = columnHints(nowMonth, to, from);
+    if (combined.length === 0) {
+        return _jsx("p", { className: "text-muted-foreground text-sm", children: t.noDataYet });
+    }
+    // Mixed currencies (or one with no rate) → the headline total is an approximation; flag it with `≈` and
+    // surface the exact per-currency subtotals so the converted number is never the whole story.
+    const approx = breakdown.rows.length > 1 || breakdown.unconverted > 0;
+    const money = (n) => `${approx ? '≈ ' : ''}${formatMoney(n, baseCurrency)}`;
+    return (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-3", children: [_jsx(StatCard, { label: "Last full month", value: money(stats.lastFullMonth) }), _jsx(StatCard, { label: "This month (MTD)", value: money(stats.mtd) }), _jsx(StatCard, { label: "Annualized run-rate", value: `${approx ? '≈ ' : ''}${formatMoneyCompact(stats.annualizedRunRate, baseCurrency)}`, sub: "last 3 mo avg \u00D7 12" })] }), approx ? _jsx(CurrencyBreakdownRow, { breakdown: breakdown, baseCurrency: baseCurrency }) : null, _jsx(TimeseriesChart, { monthly: combined.map((p) => ({ key: p.month, value: p.amount })), daily: daily.map((p) => ({ key: p.date, value: p.value, estimated: p.estimated })), isMoney: true, currency: baseCurrency, title: "Total monthly spend", height: 220, highlightCurrentMonth: true }), move.increases.length > 0 || move.drops.length > 0 ? (_jsxs("div", { className: "grid grid-cols-1 gap-3 lg:grid-cols-2", children: [_jsx(MoverList, { title: "Biggest increases", movers: move.increases.slice(0, 4), currency: baseCurrency, onOpen: onOpen }), _jsx(MoverList, { title: "Biggest drops", movers: move.drops.slice(0, 4), currency: baseCurrency, onOpen: onOpen })] })) : null, _jsxs(Card, { className: "gap-2 py-0", children: [cols.length > 0 ? (_jsxs(CardHeader, { className: "flex-row items-center justify-between px-4 pt-3", children: [_jsx(CardTitle, { className: "text-muted-foreground text-[11px] font-medium", children: "By service" }), _jsxs("div", { className: "flex items-center gap-2", children: [view === 'detailed' ? _jsx(MonthsPicker, { value: monthsToShow, onChange: setMonthsToShow }) : null, _jsx(ViewToggle, { view: view, onChange: setView })] })] })) : null, _jsx(CardContent, { className: "overflow-x-auto p-0", children: view === 'detailed' && cols.length > 0 ? (_jsx(DetailedSpendTable, { rows: rows, cols: cols, months: [nowMonth, ...(to !== nowMonth ? [to] : []), ...cols], nowMonth: nowMonth, currency: baseCurrency, hints: hints, onOpen: onOpen })) : (_jsx(CompactSpendTable, { rows: rows, currency: baseCurrency, hints: hints, onOpen: onOpen })) })] })] }));
+};
+// The exact per-currency subtotals behind an approximated headline: one chip per native currency, plus a
+// note when some currency has no rate (so its spend isn't in the converted total). Links to currency settings.
+const CurrencyBreakdownRow = ({ breakdown, baseCurrency }) => (_jsxs("div", { className: "flex flex-wrap items-center gap-1.5 text-xs", children: [breakdown.rows.map((r) => (_jsx("span", { className: `rounded-md px-2 py-1 font-mono tabular-nums ${r.convertible ? 'bg-secondary/50' : 'bg-amber-500/10 text-amber-600 dark:text-amber-400'}`, title: r.convertible ? undefined : `No ${r.currency}→${baseCurrency} rate — not in the total`, children: formatMoney(r.mtd, r.currency) }, r.currency))), breakdown.unconverted > 0 ? (_jsxs("span", { className: "text-muted-foreground", children: [breakdown.unconverted, " not converted \u2014 add a rate in Settings"] })) : null] }));
+const ViewToggle = ({ view, onChange }) => (_jsx("div", { className: "bg-secondary/50 flex rounded-md p-0.5 text-[11px]", children: ['compact', 'detailed'].map((v) => (_jsx("button", { onClick: () => onChange(v), className: `rounded px-2 py-0.5 capitalize transition-colors ${view === v ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`, children: v }, v))) }));
+const columnHints = (now, last, prev) => ({
+    thisMo: `Spend so far this month (${monthLabel(now)}), still accruing`,
+    lastMo: `Total for the last completed month (${monthLabel(last)})`,
+    prevMo: `Total for the month before last (${monthLabel(prev)})`,
+    mom: `Change from ${monthLabel(prev)} (Prev mo) to ${monthLabel(last)} (Last mo) — the current partial month is excluded`
+});
+// A column header whose label reveals its hint on hover/focus.
+const HeaderTip = ({ label, hint }) => (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "cursor-default", children: label }) }), _jsx(TooltipContent, { children: hint })] }));
+const MONTH_OPTIONS = [6, 12, 24];
+// How many trailing months the detailed table shows as columns. Mirrors the chart's small dropdown.
+const MonthsPicker = ({ value, onChange }) => (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { className: "bg-secondary/50 hover:bg-secondary text-muted-foreground hover:text-foreground flex items-center gap-1 rounded-md px-2 py-0.5 text-[11px] transition-colors", children: [value, " mo", _jsx(ChevronDown, { className: "size-3" })] }), _jsx(DropdownMenuContent, { children: MONTH_OPTIONS.map((n) => (_jsxs(DropdownMenuItem, { onSelect: () => onChange(n), children: [n, " months"] }, n))) })] }));
+// A minimal inline trend line — no ECharts instance per row. Colored by net direction (spend up = red,
+// matching the MoM coloring). Renders nothing for a flat/single-point series.
+const Sparkline = ({ data }) => {
+    if (data.length < 2) {
+        return null;
+    }
+    const w = 64;
+    const h = 18;
+    const max = Math.max(...data);
+    const min = Math.min(...data);
+    const range = max - min || 1;
+    const points = data
+        .map((v, i) => `${((i / (data.length - 1)) * w).toFixed(1)},${(h - ((v - min) / range) * h).toFixed(1)}`)
+        .join(' ');
+    return (_jsx("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, preserveAspectRatio: "none", className: pctClass(data.at(-1) - data[0]), children: _jsx("polyline", { points: points, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinejoin: "round", strokeLinecap: "round" }) }));
+};
+const CompactSpendTable = ({ rows, currency, hints, onOpen }) => (_jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "text-muted-foreground border-b text-left text-[11px] uppercase", children: _jsxs("tr", { children: [_jsx("th", { className: "px-4 py-2 font-medium", children: "Service" }), _jsx("th", { className: "px-4 py-2 text-right font-medium", children: _jsx(HeaderTip, { label: "This mo", hint: hints.thisMo }) }), _jsx("th", { className: "px-4 py-2 text-right font-medium", children: _jsx(HeaderTip, { label: "Last mo", hint: hints.lastMo }) }), _jsx("th", { className: "px-4 py-2 text-right font-medium", children: _jsx(HeaderTip, { label: "Prev mo", hint: hints.prevMo }) }), _jsx("th", { className: "px-4 py-2 text-right font-medium", children: _jsx(HeaderTip, { label: "MoM", hint: hints.mom }) }), _jsx("th", { className: "px-4 py-2 text-right font-medium", children: "Share" }), _jsx("th", { className: "px-4 py-2 text-right font-medium", children: "All time" })] }) }), _jsx("tbody", { children: rows.map((r) => (_jsxs("tr", { className: `border-b last:border-0 ${onOpen ? 'hover:bg-secondary/40 cursor-pointer' : ''}`, onClick: onOpen ? () => onOpen(r.pluginId) : undefined, children: [_jsx("td", { className: "px-4 py-2", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ServiceIcon, { id: r.pluginId, icon: r.icon, name: r.pluginName, color: r.color, size: 16 }), r.pluginName] }) }), _jsx("td", { className: "px-4 py-2 text-right font-mono tabular-nums", children: r.mtd ? formatMoney(r.mtd, currency) : '—' }), _jsx("td", { className: "px-4 py-2 text-right font-mono tabular-nums", children: formatMoney(r.lastMo, currency) }), _jsx("td", { className: "text-muted-foreground px-4 py-2 text-right font-mono tabular-nums", children: formatMoney(r.prevMo, currency) }), _jsxs("td", { className: `px-4 py-2 text-right font-mono tabular-nums ${pctClass(r.momPct)}`, children: [r.momPct > 0 ? '+' : '', r.momPct, "%"] }), _jsxs("td", { className: "text-muted-foreground px-4 py-2 text-right font-mono tabular-nums", children: [r.share, "%"] }), _jsx("td", { className: "px-4 py-2 text-right font-mono tabular-nums", children: formatMoney(r.total, currency) })] }, r.pluginId))) })] }));
+// The wide view: the compact summary columns plus a trend sparkline and one column per older completed month,
+// then the displayed-window Total and the all-time column. `months` is every month the row displays (This mo +
+// Last mo + the older `cols`), driving the window Total. The card's overflow-x-auto scrolls it on narrow widths.
+const DetailedSpendTable = ({ rows, cols, months, nowMonth, currency, hints, onOpen }) => (_jsxs("table", { className: "w-full text-sm whitespace-nowrap", children: [_jsx("thead", { className: "text-muted-foreground border-b text-left text-[11px] uppercase", children: _jsxs("tr", { children: [_jsx("th", { className: "px-4 py-2 font-medium", children: "Service" }), _jsx("th", { className: "px-4 py-2 text-right font-medium", children: _jsx(HeaderTip, { label: "This mo", hint: hints.thisMo }) }), _jsx("th", { className: "px-4 py-2 text-right font-medium", children: _jsx(HeaderTip, { label: "Last mo", hint: hints.lastMo }) }), _jsx("th", { className: "px-4 py-2 text-right font-medium", children: _jsx(HeaderTip, { label: "MoM", hint: hints.mom }) }), _jsx("th", { className: "px-4 py-2 text-right font-medium", children: "Share" }), _jsx("th", { className: "px-4 py-2 text-center font-medium", children: "Trend" }), cols.map((m) => (_jsx("th", { className: "px-4 py-2 text-right font-medium", children: monthLabel(m) }, m))), _jsx("th", { className: "px-4 py-2 text-right font-medium", children: "Total" }), _jsx("th", { className: "text-muted-foreground px-4 py-2 text-right font-medium", children: "All time" })] }) }), _jsx("tbody", { children: rows.map((r) => (_jsxs("tr", { className: `border-b last:border-0 ${onOpen ? 'hover:bg-secondary/40 cursor-pointer' : ''}`, onClick: onOpen ? () => onOpen(r.pluginId) : undefined, children: [_jsx("td", { className: "px-4 py-2", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ServiceIcon, { id: r.pluginId, icon: r.icon, name: r.pluginName, color: r.color, size: 16 }), r.pluginName] }) }), _jsx("td", { className: "px-4 py-2 text-right font-mono tabular-nums", children: r.mtd ? formatMoney(r.mtd, currency) : '—' }), _jsx("td", { className: "px-4 py-2 text-right font-mono tabular-nums", children: formatMoney(r.lastMo, currency) }), _jsxs("td", { className: `px-4 py-2 text-right font-mono tabular-nums ${pctClass(r.momPct)}`, children: [r.momPct > 0 ? '+' : '', r.momPct, "%"] }), _jsxs("td", { className: "text-muted-foreground px-4 py-2 text-right font-mono tabular-nums", children: [r.share, "%"] }), _jsx("td", { className: "px-4 py-2", children: _jsx("div", { className: "flex justify-center", children: _jsx(Sparkline, { data: r.spark }) }) }), cols.map((m) => (_jsx("td", { className: "px-4 py-2 text-right font-mono tabular-nums", children: m in r.byMonth ? formatMoney(r.byMonth[m], currency) : '—' }, m))), _jsx("td", { className: "px-4 py-2 text-right font-mono tabular-nums", children: formatMoney(windowTotal(r, months, nowMonth), currency) }), _jsx("td", { className: "text-muted-foreground px-4 py-2 text-right font-mono tabular-nums", children: formatMoney(r.total, currency) })] }, r.pluginId))) })] }));
+const MoverList = ({ title, movers: items, currency, onOpen }) => (_jsxs(Card, { className: "gap-2 py-3", children: [_jsx(CardHeader, { className: "px-4", children: _jsx(CardTitle, { className: "text-muted-foreground text-[11px] font-medium", children: title }) }), _jsx(CardContent, { className: "flex flex-wrap gap-2 px-4", children: items.length === 0 ? (_jsx("span", { className: "text-muted-foreground text-xs", children: "\u2014" })) : (items.map((m) => {
+                const up = m.delta > 0;
+                return (_jsxs("button", { onClick: onOpen ? () => onOpen(m.pluginId) : undefined, className: "bg-secondary/50 hover:bg-secondary flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-xs transition-colors", children: [_jsx(ServiceIcon, { id: m.pluginId, icon: m.icon, name: m.pluginName, color: m.color, size: 14 }), _jsx("span", { children: m.pluginName }), _jsxs("span", { className: `flex items-center font-mono tabular-nums ${up ? 'text-red-500 dark:text-red-400' : 'text-emerald-500 dark:text-emerald-400'}`, children: [up ? _jsx(ArrowUpRight, { className: "size-3" }) : _jsx(ArrowDownRight, { className: "size-3" }), formatMoneyCompact(Math.abs(m.delta), currency)] })] }, m.pluginId));
+            })) })] }));
+// The Balances band: money you HOLD, never folded into spend. A net-worth rollup + one row per balance
+// plugin. Renders only when populated, so it's invisible until a balance-section plugin (e.g. a bank) lands.
+const BalancesSection = ({ plugins, fx, onOpen }) => {
+    const t = useLabels();
+    const { baseCurrency, rates } = fx;
+    // Net worth is summed in the base currency; a balance whose currency has no rate is left out of the total
+    // (its native amount still shows on its own row). `≈` flags the conversion when any row needed one.
+    let approx = false;
+    const netWorth = plugins.reduce((sum, p) => {
+        const ccy = p.currency ?? baseCurrency;
+        const converted = convert(p.balance ?? 0, ccy, baseCurrency, rates);
+        if (ccy !== baseCurrency) {
+            approx = true;
+        }
+        return sum + (converted ?? 0);
+    }, 0);
+    const rows = [...plugins].sort((a, b) => (b.balance ?? 0) - (a.balance ?? 0));
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-3", children: _jsx(StatCard, { label: t.netWorth, value: `${approx ? '≈ ' : ''}${formatMoney(netWorth, baseCurrency)}` }) }), _jsx(Card, { className: "gap-0 py-0", children: _jsx(CardContent, { className: "p-0", children: _jsx("ul", { children: rows.map((r) => (_jsxs("li", { className: `flex items-center justify-between border-b px-4 py-2.5 text-sm last:border-0 ${onOpen ? 'hover:bg-secondary/40 cursor-pointer' : ''}`, onClick: onOpen ? () => onOpen(r.pluginId) : undefined, children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(ServiceIcon, { id: r.pluginId, icon: r.icon, name: r.pluginName, color: r.color, size: 16 }), r.pluginName] }), _jsx("span", { className: "font-mono tabular-nums", children: formatMoney(r.balance ?? 0, r.currency ?? baseCurrency) })] }, r.pluginId))) }) }) })] }));
+};
+// The Others band: services whose headline is a per-service 'other' metric (usage/count) — never summed.
+// A light launcher tile each: identity, a derived item count, last-fetched, and a connection-state dot.
+const OthersSection = ({ plugins, onOpen }) => {
+    const t = useLabels();
+    const prefs = useFormat();
+    return (_jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4", children: plugins.map((p) => (_jsx(Card, { className: `gap-1 py-3 ${onOpen ? 'hover:bg-secondary/40 cursor-pointer transition-colors' : ''}`, onClick: onOpen ? () => onOpen(p.pluginId) : undefined, children: _jsxs(CardContent, { className: "space-y-1 px-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ServiceIcon, { id: p.pluginId, icon: p.icon, name: p.pluginName, color: p.color, size: 16 }), _jsx("span", { className: "truncate font-medium", children: p.pluginName }), _jsx("span", { className: `ml-auto size-2 shrink-0 rounded-full ${p.state === 'connected' ? 'bg-emerald-500' : 'bg-muted-foreground/40'}` })] }), p.itemCount != null ? _jsx("p", { className: "font-mono text-sm tabular-nums", children: t.itemCount(p.itemCount) }) : null, p.lastRunAt ? (_jsx("p", { className: "text-muted-foreground text-xs", children: t.lastFetched(formatDateTime(p.lastRunAt, prefs, t.intlLocale)) })) : null] }) }, p.pluginId))) }));
+};
+const SectionHeader = ({ title }) => (_jsx("h2", { className: "text-muted-foreground text-[11px] font-semibold tracking-wide uppercase", children: title }));
+// The cross-service home: partitions plugins by summary section into Spending / Balances / Others bands (a
+// service appears in each band it reports), rendering only the populated ones. Headers appear only when >1
+// band shows, so a spend-only user sees the spend dashboard with no extra chrome. Pure + prop-driven.
+export const Overview = ({ plugins, baseCurrency = 'USD', rates = {}, onOpen }) => {
+    const t = useLabels();
+    const fx = { baseCurrency, rates };
+    const { spend, balances, others } = partition(plugins);
+    const populated = [spend.length > 0, balances.length > 0, others.length > 0].filter(Boolean).length;
+    if (populated === 0) {
+        return _jsx("p", { className: "text-muted-foreground text-sm", children: t.noDataYet });
+    }
+    const showHeaders = populated > 1;
+    return (_jsxs("div", { className: "space-y-8", children: [spend.length > 0 ? (_jsxs("section", { className: "space-y-3", children: [showHeaders ? _jsx(SectionHeader, { title: t.overviewSpending }) : null, _jsx(SpendingSection, { plugins: spend, fx: fx, onOpen: onOpen })] })) : null, balances.length > 0 ? (_jsxs("section", { className: "space-y-3", children: [showHeaders ? _jsx(SectionHeader, { title: t.overviewBalances }) : null, _jsx(BalancesSection, { plugins: balances, fx: fx, onOpen: onOpen })] })) : null, others.length > 0 ? (_jsxs("section", { className: "space-y-3", children: [showHeaders ? _jsx(SectionHeader, { title: t.overviewOthers }) : null, _jsx(OthersSection, { plugins: others, onOpen: onOpen })] })) : null] }));
+};

package/dist/features/dashboard/plan-views.d.ts

@@ -0,0 +1,7 @@
+import { type CapabilityResult, type Dataset, type View } from '@butinapp/sdk/data';
+export declare const defaultViews: (datasets: Dataset[]) => View[];
+export interface PlannedView {
+    view: View;
+    dataset: Dataset;
+}
+export declare const planViews: (result: CapabilityResult) => PlannedView[];

package/dist/features/dashboard/plan-views.js

@@ -0,0 +1,29 @@
+import {} from '@butinapp/sdk/data';
+// Synthesize views for a result that ships none: a record -> stat; a table with a timestamp column and a
+// money|count column -> timeseries; every table also gets a table view.
+export const defaultViews = (datasets) => {
+    const views = [];
+    for (const ds of datasets) {
+        if (ds.shape === 'record') {
+            views.push({ type: 'stat', dataset: ds.id });
+            continue;
+        }
+        const ts = ds.columns.find((c) => c.role === 'timestamp');
+        const num = ds.columns.find((c) => c.role === 'money' || c.role === 'count');
+        if (ts && num) {
+            views.push({ type: 'timeseries', dataset: ds.id, x: ts.key, y: num.key });
+        }
+        views.push({ type: 'table', dataset: ds.id });
+    }
+    return views;
+};
+// Resolve each view (explicit, or defaulted) to its dataset, dropping any whose dataset id is unknown.
+// The validator already flags dangling refs; the renderer just skips them so one bad view never blanks
+// the whole dashboard.
+export const planViews = (result) => {
+    const byId = new Map(result.datasets.map((d) => [d.id, d]));
+    const views = result.views ?? defaultViews(result.datasets);
+    return views
+        .map((view) => ({ view, dataset: byId.get(view.dataset) }))
+        .filter((p) => p.dataset != null);
+};

package/dist/features/dashboard/rollup.d.ts

@@ -0,0 +1,31 @@
+import { type Section, type Summary } from '@butinapp/sdk/data';
+import type { MtdBasis } from '@butinapp/sdk/presets';
+import { type FxRates } from '@butinapp/sdk/util';
+export interface RollupTile {
+    pluginId: string;
+    pluginName: string;
+    color?: string;
+    state?: 'connected' | 'disconnected';
+    summary?: Summary;
+    summaries?: Summary[];
+}
+export interface CurrencySubtotal {
+    currency: string;
+    value: number;
+    contributors: number;
+}
+export interface RollupBand {
+    section: Section;
+    label: string;
+    role: 'money' | 'count';
+    currency: string;
+    value: number;
+    contributors: number;
+    breakdown: CurrencySubtotal[];
+    unconverted: number;
+    bases?: Set<MtdBasis>;
+}
+export interface CurrencyRollup {
+    bands: RollupBand[];
+}
+export declare const rollup: (tiles: RollupTile[], baseCurrency: string, rates: FxRates) => CurrencyRollup;

package/dist/features/dashboard/rollup.js

@@ -0,0 +1,45 @@
+import {} from '@butinapp/sdk/data';
+import { convert, round2 } from '@butinapp/sdk/util';
+// Combine the spend summaries across services into one band; balance + other never sum (they're per-service).
+// Money is converted to baseCurrency (a currency with no rate stays out of the total and is counted in
+// `unconverted`, never silently summed); the exact per-currency subtotals ride along in `breakdown`.
+export const rollup = (tiles, baseCurrency, rates) => {
+    const band = {
+        section: 'spend',
+        label: 'Spend this month',
+        role: 'money',
+        currency: baseCurrency,
+        value: 0,
+        contributors: 0,
+        breakdown: [],
+        unconverted: 0
+    };
+    for (const tile of tiles) {
+        const spend = (tile.summaries ?? []).find((s) => s.section === 'spend');
+        if (!spend || spend.role !== 'money') {
+            continue;
+        }
+        band.contributors += 1;
+        if (spend.basis) {
+            ;
+            (band.bases ??= new Set()).add(spend.basis);
+        }
+        const ccy = spend.currency ?? baseCurrency;
+        const sub = band.breakdown.find((b) => b.currency === ccy);
+        if (sub) {
+            sub.value = round2(sub.value + spend.value);
+            sub.contributors += 1;
+        }
+        else {
+            band.breakdown.push({ currency: ccy, value: round2(spend.value), contributors: 1 });
+        }
+        const converted = convert(spend.value, ccy, baseCurrency, rates);
+        if (converted === null) {
+            band.unconverted += 1;
+        }
+        else {
+            band.value = round2(band.value + converted);
+        }
+    }
+    return { bands: band.contributors > 0 ? [band] : [] };
+};

package/dist/features/dashboard/timeseries-chart.d.ts

@@ -0,0 +1,11 @@
+import { type ChartPoint } from './view-models.js';
+export declare const TimeseriesChart: ({ monthly, daily, isMoney, currency, title, height, highlightCurrentMonth, estimateCurrentMonth }: {
+    monthly: ChartPoint[];
+    daily?: ChartPoint[];
+    isMoney?: boolean;
+    currency?: string;
+    title?: string;
+    height?: number;
+    highlightCurrentMonth?: boolean;
+    estimateCurrentMonth?: number;
+}) => import("react").JSX.Element;