Tasks goals: investment income in the €10k/month bar (trailing-12m money.transactions amount_cents>0, category dividend|interest, any account except Joint, ÷12); own segment colour + breakdown line, breakdown amounts with cents

src/lib/server/goal-metrics/core.ts

@@ -23,6 +23,10 @@ export type GoalMetricDetail = {
 export type GoalMetricResult = { value: number; detail: GoalMetricDetail };
 
 export const SIDE_INCOME_SOURCE = 'moneybird-side-income-t12m';
+/** money.transactions.category values that count as investment income (agreed with MoneyMan).
+ *  Dividends, interest (incl. Revolut savings interest) and distributions are recorded as one
+ *  of these; deposits, transfers, investment sales and unrealised gains are NOT. */
+export const INVESTMENT_INCOME_CATEGORIES = ['dividend', 'interest'];
 const TZ = 'Europe/Amsterdam';
 
 type SourceRow = {
@@ -54,6 +58,18 @@ async function ownNetIncomeMonthly(sql: Sql): Promise<GoalMetricResult> {
 		select value, detail, computed_at, error from tasks.metric_sources
 		where key = ${SIDE_INCOME_SOURCE}`;
 
+	// Investment income: trailing 12 months of money.transactions with amount_cents > 0 and
+	// category in INVESTMENT_INCOME_CATEGORIES, on any account except Joint (shared), ÷ 12.
+	const [inv] = await sql<{ cents: string; n: number }[]>`
+		select coalesce(sum(t.amount_cents), 0) as cents, count(*)::int as n
+		from money.transactions t
+		join money.accounts a on a.id = t.account_id
+		where t.amount_cents > 0
+			and t.category = any(${INVESTMENT_INCOME_CATEGORIES})
+			and a.scope <> 'joint'
+			and t.date > ((now() at time zone ${TZ})::date - interval '12 months')
+			and t.date <= (now() at time zone ${TZ})::date`;
+
 	const parts: GoalMetricPart[] = rows.map((r) => ({
 		key: `recurring-${r.id}`,
 		label: r.name,
@@ -71,6 +87,12 @@ async function ownNetIncomeMonthly(sql: Sql): Promise<GoalMetricResult> {
 				: 'not fetched yet',
 		asOf: src?.computed_at ? new Date(src.computed_at).toISOString() : null
 	});
+	parts.push({
+		key: 'investment-income',
+		label: 'Investment income',
+		value: round2(Number(inv?.cents ?? 0) / 100 / 12),
+		note: `${inv?.n ?? 0} dividend/interest payments, last 12 months ÷ 12`
+	});
 	return {
 		value: round2(parts.reduce((s, p) => s + p.value, 0)),
 		detail: {
@@ -87,7 +109,7 @@ export const GOAL_METRICS: Record<
 	{ label: string; compute: (sql: Sql) => Promise<GoalMetricResult> }
 > = {
 	'own-net-income-monthly': {
-		label: 'Own net income / month (salary + side income)',
+		label: 'Own net income / month (salary + side + investment income)',
 		compute: ownNetIncomeMonthly
 	}
 };

src/routes/trackers/tasks/+page.svelte

@@ -20,6 +20,7 @@
 	import Sparkles from 'lucide-svelte/icons/sparkles';
 	import RefreshCw from 'lucide-svelte/icons/refresh-cw';
 	import TriangleAlert from 'lucide-svelte/icons/triangle-alert';
+	import TrendingUp from 'lucide-svelte/icons/trending-up';
 	import type { SubmitFunction } from '@sveltejs/kit';
 	import type { PageProps } from './$types';
 
@@ -202,6 +203,8 @@
 			: `${n.toLocaleString('en-GB')}${unit ? ` ${unit}` : ''}`;
 	// Auto metrics (goal.metricKey): stacked bar per part, colourful on the black/white base.
 	const PART_COLORS = ['rgb(14 165 233)', 'rgb(245 158 11)', 'rgb(168 85 247)', 'rgb(16 185 129)'];
+	const money2 = (n: number) =>
+		new Intl.NumberFormat('nl-NL', { style: 'currency', currency: 'EUR' }).format(n);
 	const partPct = (v: number, target: number) => Math.max(0, Math.min(100, (v / target) * 100));
 	const pctLabel = (v: number, target: number) => {
 		const p = (v / target) * 100;
@@ -521,9 +524,9 @@
 								aria-valuemax={target}
 								aria-valuenow={goal.metricCurrent}
 							>
-								{#each d.parts as p, i (p.key)}<span
+								{#each d.parts.filter((p) => p.value > 0) as p (p.key)}<span
 										style:width={`${partPct(p.value, target)}%`}
-										style:background={PART_COLORS[i % PART_COLORS.length]}
+										style:background={PART_COLORS[d.parts.indexOf(p) % PART_COLORS.length]}
 										title={`${p.label}: ${money(p.value, goal.metricUnit)}`}
 									></span>{/each}
 							</div>
@@ -531,12 +534,14 @@
 								{#each d.parts as p, i (p.key)}
 									<li>
 										<span class="dot" style:color={PART_COLORS[i % PART_COLORS.length]}
-											>{#if p.key === 'side-income'}<Sparkles size={12} />{:else}<Briefcase
+											>{#if p.key === 'side-income'}<Sparkles
 													size={12}
-												/>{/if}</span
+												/>{:else if p.key === 'investment-income'}<TrendingUp
+													size={12}
+												/>{:else}<Briefcase size={12} />{/if}</span
 										>
 										<span class="truncate" title={p.note ?? ''}>{p.label}</span>
-										<span class="amt">{money(p.value, goal.metricUnit)}</span>
+										<span class="amt">{money2(p.value)}</span>
 									</li>
 								{/each}
 							</ul>