dashboard tooltip update

BEHEER.md

@@ -245,9 +245,11 @@ 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 alle vier zonder te schrijven. Ze blijven na een echte
+Een `-DryRun` meldt de vier bestandswijzigingen zonder ze te schrijven (de
-release als wijziging in je working tree staan; neem ze mee in de volgende
+Git-tag is de uitzondering in die tabel: die hoort bij stap 4, niet bij de
-commit.
+auto-updates). Na een echte release blijven die vier als wijziging in je working
+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
@@ -333,9 +335,11 @@ De Express-app serveert zowel de API als de gebouwde frontend:
 
 | Verzoek | Wat de app doet |
 |---|---|
-| `/api/...` | REST API (rate limited) |
+| `/api/...` | REST API (rate limited, `Cache-Control: no-store`) |
-| `/assets/...` | statische build uit `STATIC_DIR`, 1 jaar `immutable` gecached |
+| `/assets/...` | gehashte build-bestanden uit `STATIC_DIR`, 1 jaar `immutable` |
-| al het overige | `index.html` — fallback voor React-routing |
+| `/favicon.svg`, `/icons/...` | vaste namen, dus `max-age=0, must-revalidate` |
+| pad mét extensie zonder bestand | echte 404, niet `index.html` |
+| al het overige | `index.html` — fallback voor React-routing, `no-store` |
 
 `STATIC_DIR` staat standaard op `/app/public`; daar zet de `Dockerfile` de
 Vite-build neer. Bestaat die map niet (bijv. in dev), dan serveert de app
@@ -381,6 +385,12 @@ De backend slaat alle data op in **PostgreSQL**.
 
 > PostgreSQL 18 gebruikt `PGDATA=/var/lib/postgresql/18/docker`. Het volume is gemount op `/var/lib/postgresql` zodat data bewaard blijft na een container restart.
 
+Daarnaast heeft de app zelf een backup onder **Instellingen**: die schrijft een
+ZIP met de data van de *ingelogde* gebruiker (`data.json` + `meta.json`) en leest
+zo'n ZIP ook weer in. Handig per gebruiker, maar het is geen servercopie — accounts,
+wachtwoordhashes en de data van andere gebruikers zitten er niet in. Voor een
+volledige backup gebruik je `pg_dump` hieronder.
+
 **Backup maken:**
 
 ```bash
@@ -407,12 +417,25 @@ docker exec -i vibefinance_postgres psql -U vibefinance -d vibefinance < backup-
 
 De eerste geregistreerde gebruiker krijgt automatisch de **Admin**-rol. Verdere accounts kunnen via de app aangemaakt worden (Gebruikersbeheer, Admin vereist) of via de API.
 
-Rollen:
+### Rollen
-| Rol | Rechten |
+
+De rolkeuze in Gebruikersbeheer biedt drie waarden, maar de backend dwingt er op
+dit moment één af:
+
+| Rol | Wat de code ermee doet |
 |---|---|
-| `Admin` | Alles, inclusief gebruikersbeheer |
+| `Admin` | Enige rol die wordt gecontroleerd: `requireAdmin` in `middleware/auth.js` bewaakt alle routes onder `/api/users` |
-| `Bewerker` | Data lezen en bewerken |
+| `Bewerker` | Geen eigen rechten — gelijk aan `Viewer` |
-| `Viewer` | Alleen lezen |
+| `Viewer` | Standaardrol voor een nieuw account; mag de eigen data lezen én schrijven |
+
+Dat `Viewer` toch mag schrijven is geen gat in de afscherming: `/api/data` werkt
+per gebruiker en gaat altijd over de rij van het eigen token (`req.user.sub`).
+Niemand ziet dus data van een ander. Wat ontbreekt is een read-only account —
+wil je dat, dan is er een controle op `rol` nodig bij `PUT`/`DELETE /api/data`.
+
+> De "Gebruikers"-knop in de navigatiebalk staat bij iedereen in beeld; bij een
+> niet-Admin antwoordt `/api/users` met `403` en blijft de lijst leeg. De
+> afscherming zit dus in de API, niet in de navigatie.
 
 ---
 

Changelog.md

@@ -2,6 +2,79 @@
 
 ## [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`,
+  `frontend/public/`, `InstellingenModal.jsx`, `LoginBackground.jsx` en de
+  losse bestanden in `utils/`, en noemde de update-route `update-check` terwijl
+  het bestand `routes/update.js` heet. De schermentabel gebruikt nu de labels
+  zoals ze in `constants/index.js` staan ("Schuld", "Voortgang Schuld & EV") en
+  vermeldt **Instellingen** — thema plus backup/restore via ZIP, dat nergens in
+  de README stond
+- De tabel "wat de app met een verzoek doet" (in beide bestanden) noemde alleen
+  `/assets/...` en de SPA-fallback. `server.js` kent vier gevallen: `no-store`
+  op de API en op HTML, een jaar `immutable` op de gehashte bundels,
+  `must-revalidate` op bestanden met een vaste naam (`favicon.svg`, `icons/*`)
+  en een echte 404 op een pad mét extensie waar geen bestand achter zit
+- `BEHEER.md` beschreef `Bewerker` als "data lezen en bewerken" en `Viewer` als
+  "alleen lezen". Zo werkt het niet: `requireAdmin` is de enige rolcontrole in
+  de code en bewaakt alleen `/api/users`. Een `Viewer` mag daardoor gewoon zijn
+  eigen data schrijven — geen gat in de afscherming, want `/api/data` gaat altijd
+  over de rij van het eigen token, maar wél iets anders dan er stond. De sectie
+  zegt nu wat de code doet en wat er nodig is voor een echt read-only account
+- `README.md` en `BEHEER.md` wijzen bij backup naar het juiste niveau: de ZIP
+  onder Instellingen bevat alleen de data van de ingelogde gebruiker, `pg_dump`
+  is de volledige servercopie
+- `DATABASE_URL` staat in de variabelentabel van `README.md`. Hij wordt door
+  `docker-compose.yml` samengesteld uit de `POSTGRES_*` waarden, dus zelf zetten
+  is alleen nodig buiten Compose
+
+## [1.0.4] - 2026-09-10
+
 ### Gewijzigd
 - Git-tags krijgen weer een `v`-prefix (`v1.0.4`), net als t/m `v1.0.0`. Sinds
   1.0.1 was dat `1.0.1`, `1.0.2`, `1.0.3` — en omdat Gitea de tag op de

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.3-8b5cf6?style=flat)
+![Version](https://img.shields.io/badge/versie-1.0.6-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,16 +166,30 @@ build — anders zou de release met een placeholder als notes online komen.
 
 | Scherm | Wat het doet |
 |---|---|
-| 📊 **Dashboard** | Overzicht van totaal eigen vermogen, schulden en netto vermogen |
+| 📊 **Dashboard** | KPI's over inleg, vermogen, winst en ROI, de voortgang naar je doel, en de grafiek met vermogen tegen inleg |
 | 💰 **Eigen vermogen** | Vermogensposten per categorie beheren + geïnvesteerde fiat historiek |
-| 📉 **Schulden** | Schulden bijhouden per blok met afbetalingsoverzicht |
+| 📉 **Schuld** | Schulden bijhouden per blok met afbetalingsoverzicht |
-| 📈 **Voortgang** | Grafieken en trends van EV en schuld over tijd (apart bij te houden) |
+| 📈 **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.
 
+Backup en restore lopen via **Instellingen** in de navigatiebalk: "Backup maken"
+downloadt een ZIP (`data.json` + `meta.json`) met je eigen financiële data,
+"Backup terugzetten" leest zo'n ZIP weer in en schrijft hem via `/api/data` weg.
+Dat is de gebruikersvariant; een volledige database-dump staat in `BEHEER.md`.
+
 ---
 
 ## 🏗️ Architectuur
@@ -193,27 +207,33 @@ vibefinance/
 ├── release.ps1 / release.sh    # Release (test, push, tag, Gitea-release)
 │
 ├── docker/
-│   └── dev-entrypoint.sh       # Start API + Vite samen in de dev-container
+│   ├── dev-entrypoint.sh       # Start API + Vite samen in de dev-container
+│   ├── check-updates.mjs       # Dependency-check tegen het npm-register
+│   └── update-exceptions.json  # Pakketten die bewust achterblijven, met reden
 │
 ├── docs/
 │   └── screenshot-dashboard.png # Screenshot bovenaan deze README
 │
 ├── frontend/                   # React / Vite SPA (build → dist)
 │   ├── vite.config.js          # /api proxy naar de API in dezelfde container
+│   ├── index.html              # Vite-entry, verwijst naar /favicon.svg
+│   ├── public/                 # Ongebundeld: favicon.svg + icons/
 │   └── src/
 │       ├── App.jsx             # Root – wiring + idle-logout
 │       ├── App.css             # Reset + losse klassen (o.a. .kolom-grip)
 │       ├── main.jsx
 │       ├── version.js          # Draaiende versie (__APP_VERSION__ uit de build)
 │       ├── constants/          # Kleuren, tabs, begindata
-│       ├── utils/              # Formatters, helpers
+│       ├── utils/              # format.js (bedragen/datums), storage.js
 │       ├── hooks/              # useTheme, useUpdateCheck, useKolomBreedtes
-│       ├── context/            # AppContext (global state + API sync)
+│       ├── context/            # AppContext (global state + API sync + backup)
 │       ├── components/
 │       │   ├── ui/             # Primitieve UI (VCard, DonutChart…)
 │       │   ├── LoginPage.jsx
+│       │   ├── LoginBackground.jsx
 │       │   ├── NavBar.jsx
 │       │   ├── ProfielPopup.jsx
+│       │   ├── InstellingenModal.jsx  # Thema + backup/restore
 │       │   └── GebruikersBeheer.jsx
 │       └── pages/
 │           ├── DashboardTab.jsx
@@ -226,10 +246,11 @@ vibefinance/
     └── src/
         ├── server.js           # Entry point: API op /api, SPA op /
         ├── db.js               # PostgreSQL pool + initDb() schema-migraties
+        ├── logger.js           # pino (pino-pretty buiten productie)
         ├── config/             # Omgevingsvariabelen (incl. STATIC_DIR)
         ├── constants/          # Begindata (initialData.js)
         ├── middleware/         # auth.js, errorHandler.js
-        ├── routes/             # auth, data, users, health, update-check
+        ├── routes/             # auth, data, users, health, update
         └── stores/             # userStore, dataStore
 ```
 
@@ -245,9 +266,11 @@ frontend en API.
 
 | Verzoek | Wat de app doet |
 |---|---|
-| `/api/...` | REST API (rate limited) |
+| `/api/...` | REST API (rate limited, `Cache-Control: no-store`) |
-| `/assets/...` | Statische build, 1 jaar `immutable` gecached |
+| `/assets/...` | Gehashte build-bestanden, 1 jaar `immutable` gecached |
-| al het overige | `index.html` — fallback voor React-routing |
+| `/favicon.svg`, `/icons/...` | Vaste namen, dus `max-age=0, must-revalidate` |
+| pad mét extensie, geen bestand | echte 404 (geen HTML waar een icoon wordt verwacht) |
+| al het overige | `index.html` — fallback voor React-routing, niet gecached |
 
 ---
 
@@ -295,6 +318,7 @@ Het schema wordt bij het starten van de app aangemaakt/bijgewerkt via
 | `JWT_SECRET` | — | **Verplicht** — minimaal 64 tekens |
 | `POSTGRES_USER` | `vibefinance` | Database gebruikersnaam |
 | `POSTGRES_DB` | `vibefinance` | Database naam |
+| `DATABASE_URL` | — | Connectiestring; `docker-compose.yml` stelt hem samen uit de drie `POSTGRES_*` waarden, dus zelf zetten hoeft alleen buiten Compose |
 | `JWT_EXPIRES` | `7d` | Geldigheidsduur token |
 | `CORS_ORIGIN` | `http://localhost` | Externe domeinnaam (één origin, dus zelden nodig) |
 | `APP_PORT` | `3400` | Poort op de host (container luistert op 3001) |
@@ -309,6 +333,10 @@ Het schema wordt bij het starten van de app aangemaakt/bijgewerkt via
 
 - Wachtwoorden gehasht met bcrypt (cost factor 12)
 - JWT authenticatie met instelbare vervaltijd
+- Data is per gebruiker: `/api/data` leest en schrijft alleen de rij van de
+  ingelogde gebruiker (`sub` uit het token)
+- Van de rollen wordt alleen **Admin** afgedwongen, op `/api/users` — zie de
+  sectie Rollen in `BEHEER.md`
 - Frontend en API op één origin — geen interne proxy, geen CORS-uitzonderingen
 - Content-Security-Policy via Helmet, toegespitst op wat de app laadt
 - Database bereikbaar alleen binnen het interne Docker netwerk

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibefinance-frontend",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "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 } from "../constants/index.js";
+import { GREEN, RED, GOLD } from "../constants/index.js";
 
 const TEAL = "#a855f7";
 import { VCard, VBadge } from "../components/ui/index.jsx";
@@ -38,6 +38,16 @@ 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 }}>
@@ -113,7 +123,21 @@ export default function DashboardTab() {
 
       {/* EV Grafiek */}
       <VCard style={{ background: T.card, border: `1px solid ${T.border}`, marginBottom: 20 }}>
-        <div style={{ fontWeight: 600, marginBottom: 16 }}>Ontwikkeling van Eigen Vermogen</div>
+        <div style={{
+          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>
@@ -122,7 +146,7 @@ export default function DashboardTab() {
             </div>
           </div>
         ) : (
-          <MiniLineChart vData={vData} darkMode={darkMode} />
+          <MiniLineChart vData={vData} fiatData={fiatData} darkMode={darkMode} />
         )}
       </VCard>
 
@@ -130,6 +154,16 @@ 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 "";
@@ -149,18 +183,25 @@ function crPath(xs, ys, t = 0.4) {
 }
 
 // ── Mini inline SVG grafiek ────────────────────────────────────────────────────
-function MiniLineChart({ vData, darkMode }) {
+function MiniLineChart({ vData, fiatData, 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 mn   = Math.min(...vals) * 0.95;
+  const fVals = fiatData;
-  const mx   = Math.max(...vals) * 1.05;
+  // Beide reeksen staan in euro's op dezelfde as, dus het bereik moet ze allebei
+  // 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";
 
@@ -172,9 +213,19 @@ function MiniLineChart({ vData, darkMode }) {
   };
 
   const h = hovered;
-  const tipW = 114, tipH = 46;
+  const tipW = 150, tipH = 76;
-  const tipX = h !== null ? Math.min(Math.max(xs[h] - tipW / 2, pl), W - tipW - 4) : 0;
+  // Náást de hoverlijn, niet erboven of eronder. Zodra de twee punten ver uit
-  const tipY = h !== null ? (ys[h] - tipH - 14 < pt ? ys[h] + 14 : ys[h] - tipH - 14) : 0;
+  // elkaar liggen is er verticaal geen ruimte voor een kaart van 76px: dan
+  // 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
@@ -214,6 +265,11 @@ function MiniLineChart({ vData, 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" />
@@ -224,10 +280,14 @@ function MiniLineChart({ vData, darkMode }) {
           stroke="rgba(255,255,255,0.25)" strokeWidth="1" strokeDasharray="4,3" />
       )}
 
-      {/* Hover punt */}
+      {/* Hover punten */}
       {h !== null && (
+        <>
+          <circle cx={xs[h]} cy={fYs[h]} r="4.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 */}
@@ -239,10 +299,24 @@ function MiniLineChart({ vData, darkMode }) {
           <text x={tipX + tipW / 2} y={tipY + 16} fill={lc} fontSize="9" textAnchor="middle">
             {fmtDatum(vData[h].datum)}
           </text>
-          <text x={tipX + tipW / 2} y={tipY + 34} fill="#0eddd4" fontSize="11"
+          <text x={tipX + 10} y={tipY + 33} fill={lc} fontSize="9">Vermogen</text>
-            fontWeight="700" textAnchor="middle">
+          <text x={tipX + tipW - 10} y={tipY + 33} fill="#0eddd4" fontSize="10"
+            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.4",
+  "version": "1.0.7",
   "description": "VibeFinance — persoonlijk vermogensbeheer",
   "private": true,
   "repository": "https://vibehoogie.duckdns.org/vibe/VibeFinance",