Redesign net worth page with summary paragraph and dynamic chart

rollecode · rollecode · commit 4b2da19406ed · 2026-03-23T03:32:37.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+### 1.5.3: 2026-03-23
+
+* Redesign net worth page with change summary, dynamic gradient chart, forecast line, and zero reference
+* Move net worth to second position in sidebar navigation
+
 ### 1.5.2: 2026-03-23
 
 * Add over/under diff as first item in spending flow chart tooltip
diff --git a/src/app/(app)/net-worth/page.tsx b/src/app/(app)/net-worth/page.tsx
@@ -10,11 +10,11 @@ import {
   Area,
   XAxis,
   YAxis,
-  CartesianGrid,
   Tooltip,
   ResponsiveContainer,
+  ReferenceLine,
+  ReferenceDot,
 } from "recharts";
-import { ChartContainer } from "@/components/ui/chart-container";
 import { RefreshCw, TrendingUp, TrendingDown, Wallet, Loader2 } from "lucide-react";
 import { F } from "@/components/ui/f";
 
@@ -27,9 +27,14 @@ interface Snapshot {
   net_worth: number;
 }
 
+function nwColor(value: number): string {
+  if (value >= 0) return "rgb(74, 222, 128)";
+  return "rgb(248, 113, 113)";
+}
+
 export default function NetWorthPage() {
-  const { t, fmt, mask } = useLocale();
-  const { connected } = useYnab();
+  const { t, locale, fmt, mask } = useLocale();
+  const { connected, data: ynabData } = useYnab();
   const [snapshots, setSnapshots] = useState<Snapshot[]>([]);
   const [loading, setLoading] = useState(true);
   const [snapshotting, setSnapshotting] = useState(false);
@@ -75,13 +80,54 @@ export default function NetWorthPage() {
 
   const latest = snapshots.length > 0 ? snapshots[snapshots.length - 1] : null;
 
-  const chartData = snapshots.map((s) => ({
+  // Change since earliest available snapshot
+  const compareSnapshot = snapshots.length >= 2 ? snapshots[0] : null;
+  const changeAmount = latest && compareSnapshot ? latest.net_worth - compareSnapshot.net_worth : null;
+  const changeDays = latest && compareSnapshot
+    ? Math.round((new Date(latest.date).getTime() - new Date(compareSnapshot.date).getTime()) / 86400000)
+    : 0;
+
+  // Total investments
+  const totalInvestments = latest ? latest.investments : 0;
+
+  // Chart data — deduplicate per day, keep latest snapshot
+  const byDay = new Map<string, Snapshot>();
+  for (const s of snapshots) {
+    byDay.set(s.date, s);
+  }
+  const uniqueSnapshots = [...byDay.values()].sort((a, b) => a.date.localeCompare(b.date));
+  const chartData: { date: string; netWorth?: number; forecast?: number }[] = uniqueSnapshots.map((s) => ({
     date: `${parseInt(s.date.split("-")[2], 10)}.${parseInt(s.date.split("-")[1], 10)}`,
     netWorth: Math.round(s.net_worth),
-    investments: Math.round(s.investments),
-    debts: Math.round(s.debts),
   }));
 
+  // Add forecast: project 7 days from last value using weekly trend
+  if (snapshots.length >= 2 && latest) {
+    const prevWeek = snapshots.length >= 7 ? snapshots[snapshots.length - 7] : snapshots[0];
+    const daysBetween = Math.max(1, (new Date(latest.date).getTime() - new Date(prevWeek.date).getTime()) / 86400000);
+    const dailyTrend = (latest.net_worth - prevWeek.net_worth) / daysBetween;
+
+    // Bridge point: last actual value also starts the forecast
+    chartData[chartData.length - 1].forecast = Math.round(latest.net_worth);
+
+    const lastDate = new Date(latest.date);
+    for (let d = 1; d <= 7; d++) {
+      const forecastDate = new Date(lastDate);
+      forecastDate.setDate(forecastDate.getDate() + d);
+      chartData.push({
+        date: `${forecastDate.getDate()}.${forecastDate.getMonth() + 1}`,
+        forecast: Math.round(latest.net_worth + dailyTrend * d),
+      });
+    }
+  }
+
+  // Dynamic gradient stops for the line
+  const actualPoints = chartData.filter((d) => d.netWorth !== undefined);
+  const gradientStops = actualPoints.map((d, i, arr) => {
+    const pos = arr.length > 1 ? i / (arr.length - 1) : 0.5;
+    return { pos, color: nwColor(d.netWorth!) };
+  });
+
   if (!connected) {
     return (
       <div className="page-stack">
@@ -95,9 +141,11 @@ export default function NetWorthPage() {
     <div className="page-stack">
       <div className="page-header-row">
         <h1 className="page-heading">{t.dashboard.netWorth}</h1>
-        <Button variant="outline" size="sm" onClick={takeSnapshot} disabled={snapshotting}>
-          <RefreshCw className={snapshotting ? "icon-sm animate-spin" : "icon-sm"} />
-        </Button>
+        <div className="sync-row">
+          <Button variant="outline" size="sm" onClick={takeSnapshot} disabled={snapshotting}>
+            <RefreshCw className={snapshotting ? "icon-sm animate-spin" : "icon-sm"} />
+          </Button>
+        </div>
       </div>
 
       {loading ? (
@@ -106,22 +154,118 @@ export default function NetWorthPage() {
         </div>
       ) : (
         <>
+          {/* Summary paragraph */}
           {latest && (
-            <div className="net-worth-grid">
-              <Card className="net-worth-hero">
-                <p className="net-worth-hero-value" data-positive={latest.net_worth >= 0 || undefined}>
-                  <F v={latest.net_worth} />
-                </p>
-              </Card>
+            <div className="personal-greeting"><p className="personal-greeting-text">
+              {changeAmount !== null && changeAmount !== 0 && changeDays > 0 ? (
+                <>
+                  {locale === "fi" ? "Varallisuuden muutos " : "Net worth change "}
+                  <span style={{ color: changeAmount > 0 ? "var(--positive)" : "var(--negative)" }}>
+                    {changeAmount > 0 ? "+" : ""}<F v={changeAmount} s=" €" />
+                  </span>
+                  {locale === "fi" ? ` edellisten ${changeDays} päivän aikana.` : ` over the past ${changeDays} days.`}
+                </>
+              ) : changeAmount === 0 && changeDays > 0 ? (
+                <>{locale === "fi" ? "Varallisuus pysynyt samana." : "Net worth stayed the same."}</>
+              ) : (
+                <>{locale === "fi" ? "Ota tilannekuvia nähdäksesi kehityksen." : "Take snapshots to track progress."}</>
+              )}
+            </p></div>
+          )}
 
+          {/* Chart with dynamic line */}
+          {chartData.length > 1 && (() => {
+            const lastActualIdx = chartData.reduce((last, d, i) => d.netWorth !== undefined ? i : last, -1);
+            const lastActualPoint = lastActualIdx >= 0 ? chartData[lastActualIdx] : null;
+            const lastNw = lastActualPoint?.netWorth ?? 0;
+            const dotColor = nwColor(lastNw);
+            const bubbleText = `${fmt(lastNw)} €`;
+            const bubbleW = bubbleText.length * 5.8 + 14;
+
+            /* eslint-disable @typescript-eslint/no-explicit-any */
+            const renderDotLabel = (props: any) => {
+              const { viewBox } = props;
+              if (!viewBox) return null;
+              const { x, y } = viewBox;
+              const bh = 20;
+              const bx = x + 8;
+              const by = y - bh - 5;
+              return (
+                <g>
+                  <path d={`M${bx + 2},${by + bh - 2} L${bx + 9},${by + bh - 2} L${bx + 2},${by + bh + 5} Z`} fill={dotColor} />
+                  <rect x={bx} y={by} width={bubbleW} height={bh} rx={5} fill={dotColor} />
+                  <text x={bx + bubbleW / 2} y={by + bh / 2 + 1} textAnchor="middle" dominantBaseline="middle" fill="#0a0a10" fontSize={11} fontWeight={600} style={{ fontVariantNumeric: "tabular-nums" }}>
+                    {bubbleText}
+                  </text>
+                </g>
+              );
+            };
+
+            return (
+              <div className="spending-flow">
+                <div className="spending-flow-chart">
+                  <ResponsiveContainer width="100%" height={160}>
+                    <AreaChart data={chartData} margin={{ top: 36, right: 16, left: -20, bottom: 0 }}>
+                      <defs>
+                        <linearGradient id="nwLineGrad" x1="0" y1="0" x2="1" y2="0">
+                          {gradientStops.map((s, i) => (
+                            <stop key={i} offset={`${Math.round(s.pos * 100)}%`} stopColor={s.color} />
+                          ))}
+                        </linearGradient>
+                      </defs>
+                      <XAxis dataKey="date" tick={{ fill: "#52525b", fontSize: 9 }} tickLine={false} axisLine={false} interval="preserveStartEnd" />
+                      <YAxis hide domain={[(dataMin: number) => Math.min(dataMin, 0) - 200, (dataMax: number) => Math.max(dataMax, 0) + 200]} />
+                      <ReferenceLine y={0} stroke="rgba(255,255,255,0.15)" strokeDasharray="3 3" />
+                      <Tooltip
+                        content={({ active, payload, label }) => {
+                          if (!active || !payload?.length) return null;
+                          const nw = payload.find((p) => p.dataKey === "netWorth" && p.value != null);
+                          const fc = payload.find((p) => p.dataKey === "forecast" && p.value != null);
+                          if (!nw && !fc) return null;
+                          const val = Number(nw ? nw.value : fc!.value);
+                          const isForecast = !nw;
+                          return (
+                            <div className="chart-tooltip">
+                              <p className="chart-tooltip-label">{label}</p>
+                              <p className="chart-tooltip-value" style={{ color: nwColor(val) }}>
+                                {isForecast ? (locale === "fi" ? "Ennuste: " : "Forecast: ") : ""}
+                                {fmt(val)} €
+                              </p>
+                            </div>
+                          );
+                        }}
+                      />
+                      <Area type="monotone" dataKey="forecast" stroke={dotColor} strokeWidth={2} strokeDasharray="6 4" fill="none" dot={false} strokeOpacity={0.4} />
+                      <Area type="monotone" dataKey="netWorth" stroke="url(#nwLineGrad)" strokeWidth={5} fill="none" dot={false} />
+                      {lastActualPoint && (
+                        <ReferenceDot
+                          x={lastActualPoint.date}
+                          y={lastNw}
+                          r={5}
+                          fill="#0a0a10"
+                          stroke={dotColor}
+                          strokeWidth={4}
+                          label={renderDotLabel}
+                        />
+                      )}
+                    </AreaChart>
+                  </ResponsiveContainer>
+                </div>
+              </div>
+            );
+          })()}
+
+          {/* Stat cards */}
+          {latest && (
+            <div className="net-worth-grid">
               <Card className="net-worth-card">
                 <div className="net-worth-card-row">
                   <div className="net-worth-card-icon" data-color="primary">
                     <Wallet />
                   </div>
                   <div>
                     <p className="net-worth-card-label">{t.dashboard.accounts}</p>
-                    <p className="net-worth-card-value"><F v={latest.checking + latest.savings} /></p>
+                    <p className="net-worth-card-value"><F v={latest.checking + latest.savings} s=" €" /></p>
                   </div>
                 </div>
               </Card>
@@ -133,7 +277,7 @@ export default function NetWorthPage() {
                   </div>
                   <div>
                     <p className="net-worth-card-label">{t.dashboard.investments}</p>
-                    <p className="net-worth-card-value text-positive"><F v={latest.investments} /></p>
+                    <p className="net-worth-card-value text-positive"><F v={latest.investments} s=" €" /></p>
                   </div>
                 </div>
               </Card>
@@ -145,49 +289,18 @@ export default function NetWorthPage() {
                   </div>
                   <div>
                     <p className="net-worth-card-label">{t.debts.title}</p>
-                    <p className="net-worth-card-value text-negative"><F v={latest.debts} /></p>
+                    <p className="net-worth-card-value text-negative"><F v={latest.debts} s=" €" /></p>
                   </div>
                 </div>
               </Card>
             </div>
           )}
 
-          {chartData.length > 1 && (
-            <Card className="net-worth-card net-worth-chart-card">
-              <ChartContainer height={300}>
-                <ResponsiveContainer width="100%" height="100%">
-                  <AreaChart data={chartData} margin={{ top: 4, right: 4, left: 0, bottom: 0 }}>
-                    <defs>
-                      <linearGradient id="nwGrad" x1="0" y1="0" x2="0" y2="1">
-                        <stop offset="0%" stopColor="#818cf8" stopOpacity={0.3} />
-                        <stop offset="100%" stopColor="#818cf8" stopOpacity={0} />
-                      </linearGradient>
-                    </defs>
-                    <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.04)" vertical={false} />
-                    <XAxis dataKey="date" tick={{ fill: "#71717a", fontSize: 11 }} tickLine={false} axisLine={false} />
-                    <YAxis tick={{ fill: "#71717a", fontSize: 10 }} tickLine={false} axisLine={false} tickFormatter={(v) => mask(v >= 1000 ? `${(v/1000).toFixed(0)}k €` : `${Math.round(v)} €`)} width={50} domain={["auto", "auto"]} />
-                    <Tooltip
-                      content={({ active, payload, label }) =>
-                        active && payload?.length ? (
-                          <div className="chart-tooltip">
-                            <p className="chart-tooltip-label">{label}</p>
-                            <p className="chart-tooltip-value text-foreground">{fmt(Number(payload[0].value))} €</p>
-                          </div>
-                        ) : null
-                      }
-                    />
-                    <Area type="monotone" dataKey="netWorth" stroke="#818cf8" strokeWidth={2} fill="url(#nwGrad)" />
-                  </AreaChart>
-                </ResponsiveContainer>
-              </ChartContainer>
-            </Card>
-          )}
-
           {chartData.length <= 1 && (
             <p className="page-subtitle">
               {snapshots.length === 0
-                ? "Take your first snapshot to start tracking net worth over time."
-                : "Keep taking snapshots to see your net worth trend."}
+                ? (locale === "fi" ? "Ota ensimmäinen tilannekuva aloittaaksesi varallisuuden seuranta." : "Take your first snapshot to start tracking net worth over time.")
+                : (locale === "fi" ? "Jatka tilannekuvien ottamista nähdäksesi varallisuuden kehityksen." : "Keep taking snapshots to see your net worth trend.")}
             </p>
           )}
         </>
diff --git a/src/styles/modules/net-worth.css b/src/styles/modules/net-worth.css
@@ -1,4 +1,5 @@
-/* Module: net-worth — minimal */
+/* Module: net-worth */
+
 
 .net-worth-section {
   display: flex;
@@ -22,57 +23,10 @@
 
 @media (min-width: 1024px) {
   .net-worth-grid {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-/* Hero card */
-.card.net-worth-hero {
-  border: none;
-  background: transparent;
-  backdrop-filter: none;
-  padding: 0 0.25rem;
-  gap: 0.125rem;
-  grid-column: 1 / -1;
-}
-
-.card.net-worth-hero:hover {
-  border-color: transparent;
-}
-
-@media (min-width: 1024px) {
-  .card.net-worth-hero {
-    grid-column: span 1;
-  }
-}
-
-.net-worth-hero-label {
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--muted-foreground);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.net-worth-hero-value {
-  font-size: 2rem;
-  line-height: 1.2;
-  font-weight: 700;
-  letter-spacing: -0.04em;
-  color: var(--negative);
-  font-variant-numeric: tabular-nums;
-  padding: 0.25rem 0;
-}
-
-@media (min-width: 768px) {
-  .net-worth-hero-value {
-    font-size: 2.25rem;
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 
-.net-worth-hero-value[data-positive] {
-  color: var(--positive);
-}
 
 /* Metric cards — minimal */
 .card.net-worth-card {
@@ -180,10 +134,6 @@
   color: var(--foreground);
 }
 
-.card.net-worth-chart-card {
-  padding: 1rem;
-}
-
 .net-worth-list-amount {
   font-size: 0.8125rem;
   font-weight: 600;
