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/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>