Merge pull request 'bugfix' (#11) from update-1.0.5 into main

Reviewed-on: http://10.0.3.108:3000/Vibe/VibeFinance/pulls/11

BEHEER.md

@@ -245,11 +245,9 @@ tag op een Raspberry Pi en op een x86-server werkt.
 | `README.md` | de `versie-x.x.x`-badge bovenaan | vóór de build |
 | `package.json` (root) | versie → `x.x.(x+1)-dev` voor de volgende cyclus | **ná** het publiceren |
 
-Een `-DryRun` meldt de vier bestandswijzigingen zonder ze te schrijven (de
+Een `-DryRun` meldt alle vier zonder te schrijven. Ze blijven na een echte
-Git-tag is de uitzondering in die tabel: die hoort bij stap 4, niet bij de
+release als wijziging in je working tree staan; neem ze mee in de volgende
-auto-updates). Na een echte release blijven die vier als wijziging in je working
+commit.
-tree staan; neem ze mee in de volgende commit — de tag staat dan op de commit
-ervóór, dus de release bevat ze nog niet.
 
 De laatste staat bewust ná het publiceren: breekt de release eerder af, dan
 schuift het versienummer niet vooruit. Bijeffect dat je moet kennen — na een

Changelog.md

@@ -2,50 +2,6 @@
 
 ## [Niet vrijgegeven]
 
-### Opgelost
-- De tooltip van de dashboardgrafiek viel buiten de tekening zodra vermogen en
-  inleg ver uit elkaar lagen. Hij werd boven het hoogste punt geplaatst en klapte
-  naar onderen als daar geen ruimte was — maar dat "onderen" rekende vanaf het
-  laagste punt, en met een kaart van 76px kwam hij dan onder het tekenvlak
-  terecht: over de datumlabels heen en half afgekapt. Precies in het midden van
-  de grafiek, waar je hem het meest gebruikt. De kaart staat nu náást de
-  hoverlijn (links of rechts, afhankelijk van waar de meeste ruimte is) en wordt
-  verticaal geklemd binnen het tekenvlak, dus hij past altijd
-
-## [1.0.6] - 2026-09-11
-
-### Toegevoegd
-- De grafiek "Ontwikkeling van Eigen Vermogen" op het dashboard heeft een tweede
-  lijn: de **cumulatief geïnvesteerde fiat**. Die is opgebouwd uit dezelfde
-  gegevens als de KPI's erboven — het oudste voortgangsmoment telt als inleg,
-  elke latere rij telt zijn stortingen erbij op — zodat het laatste punt van de
-  lijn exact gelijk is aan "Totaal geïnvesteerde fiat". Het verschil tussen de
-  twee lijnen is je rendement, en dat staat nu ook in de tooltip: vermogen,
-  ingelegd en resultaat per datum
-- Legenda boven de grafiek, nodig zodra er meer dan één lijn in staat
-
-### Gewijzigd
-- De inleglijn wordt met rechte segmenten getekend en niet met de
-  Catmull-Rom-afronding van de vermogenslijn. Cumulatieve inleg loopt nooit
-  terug, maar de bezier-afronding trekt tussen twee ongelijke stortingen een
-  doorbuiging onder het vorige punt — dan zou de grafiek een daling tonen die
-  in de data niet bestaat
-- De y-as schaalt op beide reeksen. Op alleen de vermogenswaarden zou de
-  inleglijn buiten beeld lopen zodra je meer hebt ingelegd dan het vermogen
-  waard is
-- De schermentabel in `README.md` beschreef het Dashboard als "totaal eigen
-  vermogen, schulden en netto vermogen". Dat klopte niet: `DashboardTab.jsx`
-  leest `totSchuld` helemaal niet en toont geen schuld en geen nettowaarde — dat
-  staat op het Voortgang-tabblad. De rij noemt nu wat er wél staat (KPI's over
-  inleg, vermogen, winst en ROI, de doelbalk en de grafiek), met een alinea
-  eronder over de twee lijnen
-
-### Bekend
-- De screenshot bovenaan `README.md` is van vóór deze wijziging en toont de
-  grafiek nog met één lijn
-
-## [1.0.5] - 2026-09-11
-
 ### Gewijzigd
 - De documentatie is gelijkgetrokken met de code. `README.md`: de bestandsboom
   miste `backend/src/logger.js`, `docker/check-updates.mjs`,

README.md

@@ -10,7 +10,7 @@ Eigen vermogen · Schulden · Voortgang · Gebruikersbeheer
 ![Node.js](https://img.shields.io/badge/Node.js_22-339933?style=flat&logo=node.js&logoColor=white)
 ![PostgreSQL](https://img.shields.io/badge/PostgreSQL_18-4169E1?style=flat&logo=postgresql&logoColor=white)
 ![Docker](https://img.shields.io/badge/Docker_Compose-2496ED?style=flat&logo=docker&logoColor=white)
-![Version](https://img.shields.io/badge/versie-1.0.6-8b5cf6?style=flat)
+![Version](https://img.shields.io/badge/versie-1.0.4-8b5cf6?style=flat)
 ![Built with Claude](https://img.shields.io/badge/Gebouwd_met-Claude.ai-8b5cf6?style=flat&logo=anthropic&logoColor=white)
 
 <img src="docs/screenshot-dashboard.png" alt="VibeFinance dashboard" width="820">
@@ -166,21 +166,13 @@ build — anders zou de release met een placeholder als notes online komen.
 
 | Scherm | Wat het doet |
 |---|---|
-| 📊 **Dashboard** | KPI's over inleg, vermogen, winst en ROI, de voortgang naar je doel, en de grafiek met vermogen tegen inleg |
+| 📊 **Dashboard** | Overzicht van totaal eigen vermogen, schulden en netto vermogen |
 | 💰 **Eigen vermogen** | Vermogensposten per categorie beheren + geïnvesteerde fiat historiek |
 | 📉 **Schuld** | Schulden bijhouden per blok met afbetalingsoverzicht |
 | 📈 **Voortgang Schuld & EV** | Grafieken en trends van EV en schuld over tijd (apart bij te houden) |
 | 👥 **Gebruikers** | Accounts aanmaken, bewerken en beheren (Admin-rol vereist) |
 | ⚙️ **Instellingen** | Licht/donker thema, backup downloaden en backup terugzetten |
 
-De grafiek "Ontwikkeling van Eigen Vermogen" op het dashboard tekent twee lijnen
-op één as: je netto waarde per voortgangsmoment, en daaronder de cumulatief
-geïnvesteerde fiat. Het verschil tussen de twee is je rendement; de tooltip zet
-vermogen, inleg en resultaat per datum onder elkaar. Het laatste punt van de
-inleglijn is per definitie gelijk aan de KPI "Totaal geïnvesteerde fiat" — beide
-rekenen het oudste voortgangsmoment als startinleg en tellen daar de stortingen
-per rij bij op.
-
 De kolommen in de tabellen op Eigen vermogen en Voortgang zijn versleepbaar: pak
 de rechterrand van een kolomkop. De breedtes worden per tabel in de browser
 bewaard; dubbelklik op de greep voor de standaardbreedte.

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibefinance-frontend",
-  "version": "1.0.6",
+  "version": "1.0.4",
   "private": true,
   "type": "module",
   "scripts": {

frontend/src/pages/DashboardTab.jsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useApp } from "../context/AppContext.jsx";
 import { fmt, pct, fmtDatum } from "../utils/format.js";
-import { GREEN, RED, GOLD } from "../constants/index.js";
+import { GREEN, RED } from "../constants/index.js";
 
 const TEAL = "#a855f7";
 import { VCard, VBadge } from "../components/ui/index.jsx";
@@ -38,16 +38,6 @@ export default function DashboardTab() {
   // Minigrafiek data
   const vData = [...evRows].sort((a, b) => a.datum.localeCompare(b.datum));
 
-  // Cumulatief geïnvesteerde fiat, op dezelfde datums als vData. Dezelfde
-  // opbouw als de KPI's hierboven: het oudste punt is de start-EV (daar is de
-  // inleg per definitie gelijk aan de waarde), elk volgend punt telt de
-  // stortingen van die rij erbij op. Het laatste punt is daarmee gelijk aan
-  // "Totaal geïnvesteerde fiat".
-  const fiatData = vData.reduce((acc, row, i) => {
-    acc.push(i === 0 ? (row.nettoWaarde || 0) : acc[i - 1] + catSum(row));
-    return acc;
-  }, []);
-
   return (
     <div>
       <div style={{ marginBottom: 24 }}>
@@ -123,21 +113,7 @@ export default function DashboardTab() {
 
       {/* EV Grafiek */}
       <VCard style={{ background: T.card, border: `1px solid ${T.border}`, marginBottom: 20 }}>
-        <div style={{
+        <div style={{ fontWeight: 600, marginBottom: 16 }}>Ontwikkeling van Eigen Vermogen</div>
-          display: "flex", alignItems: "center", justifyContent: "space-between",
-          gap: 12, flexWrap: "wrap", marginBottom: 16,
-        }}>
-          <div style={{ fontWeight: 600 }}>Ontwikkeling van Eigen Vermogen</div>
-          {vData.length >= 2 && (
-            <div style={{ display: "flex", alignItems: "center", gap: 14, fontSize: 11, color: T.muted }}>
-              <Legenda kleur="linear-gradient(90deg, #0eddd4, #8b5cf6)" label="Eigen vermogen" />
-              <Legenda
-                kleur={`repeating-linear-gradient(90deg, ${GOLD} 0 5px, transparent 5px 9px)`}
-                label="Geïnvesteerde fiat"
-              />
-            </div>
-          )}
-        </div>
         {vData.length < 2 ? (
           <div style={{ textAlign: "center", padding: "32px 0", color: T.muted }}>
             <div style={{ fontSize: 28, marginBottom: 8 }}>📈</div>
@@ -146,7 +122,7 @@ export default function DashboardTab() {
             </div>
           </div>
         ) : (
-          <MiniLineChart vData={vData} fiatData={fiatData} darkMode={darkMode} />
+          <MiniLineChart vData={vData} darkMode={darkMode} />
         )}
       </VCard>
 
@@ -154,16 +130,6 @@ export default function DashboardTab() {
   );
 }
 
-// ── Legenda-item bij de grafiek ─────────────────────────────────────────────
-function Legenda({ kleur, label }) {
-  return (
-    <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
-      <span style={{ width: 16, height: 3, borderRadius: 2, background: kleur }} />
-      {label}
-    </span>
-  );
-}
-
 // ── Smooth Catmull-Rom bezier path ──────────────────────────────────────────
 function crPath(xs, ys, t = 0.4) {
   if (xs.length < 2) return "";
@@ -183,25 +149,18 @@ function crPath(xs, ys, t = 0.4) {
 }
 
 // ── Mini inline SVG grafiek ────────────────────────────────────────────────────
-function MiniLineChart({ vData, fiatData, darkMode }) {
+function MiniLineChart({ vData, darkMode }) {
   const [hovered, setHovered] = useState(null);
   const W = 700, H = 230, pl = 62, pr = 16, pt = 16, pb = 52;
-  const vals  = vData.map((d) => d.nettoWaarde || 0);
+  const vals = vData.map((d) => d.nettoWaarde || 0);
-  const fVals = fiatData;
+  const mn   = Math.min(...vals) * 0.95;
-  // Beide reeksen staan in euro's op dezelfde as, dus het bereik moet ze allebei
+  const mx   = Math.max(...vals) * 1.05;
-  // omvatten — anders loopt de inleglijn buiten beeld zodra die boven de EV uitkomt.
-  const mn   = Math.min(...vals, ...fVals) * 0.95;
-  const mx   = Math.max(...vals, ...fVals) * 1.05;
   const rng  = mx - mn || 1;
   const iW   = W - pl - pr, iH = H - pt - pb;
   const xs   = vData.map((_, i) => pl + (i / Math.max(vData.length - 1, 1)) * iW);
   const ys   = vals.map((v) => pt + (1 - (v - mn) / rng) * iH);
-  const fYs  = fVals.map((v) => pt + (1 - (v - mn) / rng) * iH);
   const linePath = crPath(xs, ys);
   const areaPath = `${linePath} L ${xs[xs.length-1]},${pt+iH} L ${xs[0]},${pt+iH} Z`;
-  // Rechte segmenten, geen crPath: de inleg loopt nooit terug, en de bezier-
-  // afronding zou tussen twee stortingen een dip tekenen die er niet is.
-  const fiatPath = xs.map((x, i) => `${i ? "L" : "M"} ${x},${fYs[i]}`).join(" ");
   const gc   = darkMode ? "rgba(255,255,255,0.07)" : "rgba(0,0,0,0.06)";
   const lc   = darkMode ? "#6b7280" : "#94a3b8";
 
@@ -213,19 +172,9 @@ function MiniLineChart({ vData, fiatData, darkMode }) {
   };
 
   const h = hovered;
-  const tipW = 150, tipH = 76;
+  const tipW = 114, tipH = 46;
-  // Náást de hoverlijn, niet erboven of eronder. Zodra de twee punten ver uit
+  const tipX = h !== null ? Math.min(Math.max(xs[h] - tipW / 2, pl), W - tipW - 4) : 0;
-  // elkaar liggen is er verticaal geen ruimte voor een kaart van 76px: dan
+  const tipY = h !== null ? (ys[h] - tipH - 14 < pt ? ys[h] + 14 : ys[h] - tipH - 14) : 0;
-  // klapte hij naar onderen tot buiten de tekening, over de datumlabels heen en
-  // half afgekapt. Zijwaarts past hij altijd; de klemmen houden hem binnen het
-  // tekenvlak.
-  const naarRechts = h !== null && xs[h] < pl + iW / 2;
-  const tipX = h === null ? 0 : naarRechts
-    ? Math.min(xs[h] + 16, W - pr - tipW)
-    : Math.max(xs[h] - tipW - 16, pl);
-  const tipY = h === null ? 0
-    : Math.max(pt, Math.min((ys[h] + fYs[h]) / 2 - tipH / 2, pt + iH - tipH));
-  const resultaat = h !== null ? vals[h] - fVals[h] : 0;
 
   return (
     <svg
@@ -265,11 +214,6 @@ function MiniLineChart({ vData, fiatData, darkMode }) {
       {/* Vlakkleur met gradient + fade */}
       <path d={areaPath} fill="url(#chartLineGrad)" mask="url(#chartAreaMask)" opacity="0.4" />
 
-      {/* Geïnvesteerde fiat — gestippeld, zodat het als referentielijn leest
-          en de EV-lijn de hoofdrol houdt */}
-      <path d={fiatPath} fill="none" stroke={GOLD} strokeWidth="1.8"
-        strokeDasharray="5,4" strokeLinecap="round" strokeLinejoin="round" opacity="0.85" />
-
       {/* Lijn */}
       <path d={linePath} fill="none" stroke="url(#chartLineGrad)"
         strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
@@ -280,14 +224,10 @@ function MiniLineChart({ vData, fiatData, darkMode }) {
           stroke="rgba(255,255,255,0.25)" strokeWidth="1" strokeDasharray="4,3" />
       )}
 
-      {/* Hover punten */}
+      {/* Hover punt */}
       {h !== null && (
-        <>
+        <circle cx={xs[h]} cy={ys[h]} r="5.5"
-          <circle cx={xs[h]} cy={fYs[h]} r="4.5"
+          fill="#0eddd4" stroke={darkMode ? "#151c2e" : "#fff"} strokeWidth="2.5" />
-            fill={GOLD} stroke={darkMode ? "#151c2e" : "#fff"} strokeWidth="2.5" />
-          <circle cx={xs[h]} cy={ys[h]} r="5.5"
-            fill="#0eddd4" stroke={darkMode ? "#151c2e" : "#fff"} strokeWidth="2.5" />
-        </>
       )}
 
       {/* Tooltip */}
@@ -299,24 +239,10 @@ function MiniLineChart({ vData, fiatData, darkMode }) {
           <text x={tipX + tipW / 2} y={tipY + 16} fill={lc} fontSize="9" textAnchor="middle">
             {fmtDatum(vData[h].datum)}
           </text>
-          <text x={tipX + 10} y={tipY + 33} fill={lc} fontSize="9">Vermogen</text>
+          <text x={tipX + tipW / 2} y={tipY + 34} fill="#0eddd4" fontSize="11"
-          <text x={tipX + tipW - 10} y={tipY + 33} fill="#0eddd4" fontSize="10"
+            fontWeight="700" textAnchor="middle">
-            fontWeight="700" textAnchor="end">
             {fmt(vals[h])}
           </text>
-          <text x={tipX + 10} y={tipY + 48} fill={lc} fontSize="9">Ingelegd</text>
-          <text x={tipX + tipW - 10} y={tipY + 48} fill={GOLD} fontSize="10"
-            fontWeight="700" textAnchor="end">
-            {fmt(fVals[h])}
-          </text>
-          <line x1={tipX + 10} y1={tipY + 55} x2={tipX + tipW - 10} y2={tipY + 55}
-            stroke={gc} strokeWidth="1" />
-          <text x={tipX + 10} y={tipY + 68} fill={lc} fontSize="9">Resultaat</text>
-          <text x={tipX + tipW - 10} y={tipY + 68}
-            fill={resultaat >= 0 ? GREEN : RED} fontSize="10"
-            fontWeight="700" textAnchor="end">
-            {`${resultaat >= 0 ? "+" : ""}${fmt(resultaat)}`}
-          </text>
         </g>
       )}
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibefinance",
-  "version": "1.0.7",
+  "version": "1.0.5",
   "description": "VibeFinance — persoonlijk vermogensbeheer",
   "private": true,
   "repository": "https://vibehoogie.duckdns.org/vibe/VibeFinance",