From 4181ac3f0f7a2cccd52a328de35a48c854a27748 Mon Sep 17 00:00:00 2001 From: Jordy Hoogeveen Date: Thu, 1 Oct 2026 16:57:16 +0200 Subject: [PATCH] bugfix --- Changelog.md | 26 +++++++++++++++++++ README.md | 11 ++++++-- frontend/package.json | 2 +- frontend/src/components/GebruikersBeheer.jsx | 2 +- frontend/src/components/InstellingenModal.jsx | 2 +- frontend/src/components/NavBar.jsx | 2 +- frontend/src/components/ui/index.jsx | 2 +- frontend/src/pages/VoortgangTab.jsx | 19 +++++++++++--- package.json | 2 +- 9 files changed, 57 insertions(+), 11 deletions(-) diff --git a/Changelog.md b/Changelog.md index f3248a6..8c399b2 100644 --- a/Changelog.md +++ b/Changelog.md @@ -2,6 +2,32 @@ ## [Niet vrijgegeven] +### Opgelost +- **De kaart "Rendement Eigen Vermogen" op Voortgang stond leeg.** Bedrag en + percentage waren sinds de eerste commit hardcoded als `—` in de JSX; er zat + geen berekening achter en `evRows` werd niet eens uit de context gehaald. Het + oogde als een datafout — lege database, mislukte API-call — maar de kaart was + nooit afgebouwd. Hij rekent nu met dezelfde formule als het blok "Rendement" + op Eigen vermogen: huidige waarde min geïnvesteerde fiat, gedeeld door die + inleg. Groen bij winst, rood bij verlies, en `—` zolang er niets is ingelegd, + zodat er niet door nul wordt gedeeld +- Beide kaarten tonen daarmee hetzelfde totaal. Dat is bewust: twee plekken die + "rendement" noemen horen niet twee verschillende getallen te geven + +### Gewijzigd +- De achtergrond achter een popup is lichter: `rgba(0,0,0,0.75)` naar `0.45` in + de gedeelde `Overlay`. Op 0.75 was van het scherm eronder vrijwel niets meer + te zien, terwijl je bij het invullen van een modal juist wilt kunnen nakijken + waar je vandaan kwam. Gedimd genoeg om de modal de aandacht te laten houden +- De popups van NavBar, Instellingen en Gebruikersbeheer gebruiken de gedeelde + `Overlay` niet maar hadden hun eigen backdrop op `rgba(0,0,0,0.55)` met + `backdropFilter: blur(4px)`. Alle drie staan nu op dezelfde 0.45, en de blur + is eruit: die maakte de achtergrond onscherp in plaats van zichtbaar, en + zonder dat weg te halen bleven ze alsnog afwijken van de rest. Vier + popup-backdrops, één waarde + +## [1.0.12] - 2026-09-18 + ### Beveiliging - **De postgres-container draait niet meer als root.** Beide compose-bestanden starten hem met `user: "postgres"`. Alle 46 bevindingen op `postgres:18-alpine` diff --git a/README.md b/README.md index 197c0ac..3e71241 100644 --- a/README.md +++ b/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.11-8b5cf6?style=flat) +![Version](https://img.shields.io/badge/versie-1.0.12-8b5cf6?style=flat) ![Built with Claude](https://img.shields.io/badge/Gebouwd_met-Claude.ai-8b5cf6?style=flat&logo=anthropic&logoColor=white) VibeFinance dashboard @@ -190,7 +190,7 @@ build — anders zou de release met een placeholder als notes online komen. | 📊 **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 | | 📉 **Schuld** | Schulden bijhouden per blok met afbetalingsoverzicht | -| 📈 **Voortgang Schuld & EV** | Grafieken en trends van EV en schuld over tijd (apart bij te houden) | +| 📈 **Voortgang Schuld & EV** | KPI-kaarten met de verdeling van schuld en EV, het rendement en de netto waarde, plus grafieken en trends van EV en schuld over tijd (apart bij te houden) | | 👥 **Gebruikers** | Accounts aanmaken, bewerken en beheren (Admin-rol vereist) | | ⚙️ **Instellingen** | Kleurthema, licht/donker, backup downloaden, backup terugzetten en export naar HTML | @@ -202,6 +202,13 @@ inleglijn is per definitie gelijk aan de KPI "Totaal geïnvesteerde fiat" — be rekenen het oudste voortgangsmoment als startinleg en tellen daar de stortingen per rij bij op. +Rendement betekent overal hetzelfde: huidige waarde min geïnvesteerde fiat, +gedeeld door die inleg. De kaart "Rendement Eigen Vermogen" op Voortgang en het +blok "Rendement" op Eigen vermogen tonen daarom hetzelfde totaal — dat laatste +splitst het alleen nog uit per categorie. Zolang er geen inleg is vastgelegd +staat er `—` in plaats van een percentage, want zonder noemer is er geen +rendement te berekenen. + De x-as noemt maanden (`sep '26`), niet losse datums: de grafiek rekent uit hoeveel labels er naast elkaar passen en toont er zoveel, terugtellend vanaf het laatste punt zodat dat er altijd bij staat. Bij een langere reeks dunt hij diff --git a/frontend/package.json b/frontend/package.json index 1efd3e7..2faceec 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,6 +1,6 @@ { "name": "vibefinance-frontend", - "version": "1.0.12-dev", + "version": "1.0.13-dev", "private": true, "type": "module", "scripts": { diff --git a/frontend/src/components/GebruikersBeheer.jsx b/frontend/src/components/GebruikersBeheer.jsx index 1e22c14..d18096e 100644 --- a/frontend/src/components/GebruikersBeheer.jsx +++ b/frontend/src/components/GebruikersBeheer.jsx @@ -172,7 +172,7 @@ export default function GebruikersBeheer({ onClose }) { onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 400, - background: "rgba(0,0,0,0.55)", backdropFilter: "blur(4px)", + background: "rgba(0,0,0,0.45)", display: "flex", alignItems: "center", justifyContent: "center", }} > diff --git a/frontend/src/components/InstellingenModal.jsx b/frontend/src/components/InstellingenModal.jsx index d9f0d1d..82b1c64 100644 --- a/frontend/src/components/InstellingenModal.jsx +++ b/frontend/src/components/InstellingenModal.jsx @@ -49,7 +49,7 @@ export default function InstellingenModal({ onClose }) { onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 400, - background: "rgba(0,0,0,0.55)", backdropFilter: "blur(4px)", + background: "rgba(0,0,0,0.45)", display: "flex", alignItems: "center", justifyContent: "center", }} > diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx index 16103d3..b78c0ff 100644 --- a/frontend/src/components/NavBar.jsx +++ b/frontend/src/components/NavBar.jsx @@ -116,7 +116,7 @@ function OverPopup({ onClose, nieuweVersie, T }) { {/* Overlay */}
{/* Modal */} diff --git a/frontend/src/components/ui/index.jsx b/frontend/src/components/ui/index.jsx index 25b1be9..33d845d 100644 --- a/frontend/src/components/ui/index.jsx +++ b/frontend/src/components/ui/index.jsx @@ -319,7 +319,7 @@ export function Overlay({ children, onClose, zIndex = 400 }) { onClick={(e) => { if (e.target === e.currentTarget) onClose(); }} style={{ position: "fixed", inset: 0, - background: "rgba(0,0,0,0.75)", + background: "rgba(0,0,0,0.45)", zIndex, }} > diff --git a/frontend/src/pages/VoortgangTab.jsx b/frontend/src/pages/VoortgangTab.jsx index 0cab37c..2272b66 100644 --- a/frontend/src/pages/VoortgangTab.jsx +++ b/frontend/src/pages/VoortgangTab.jsx @@ -237,13 +237,22 @@ export default function VoortgangTab() { const [showAdd, setShowAdd] = useState(false); const [editRow, setEditRow] = useState(null); const { - totEV, totSchuld, catTotals, schuldBlokken, schuldHistory, + totEV, totSchuld, cats, catTotals, evRows, schuldBlokken, schuldHistory, evVoortgangHistory, setEvVoortgangHistory, data, setData, schuld, locked, darkMode, T, } = useApp(); const nettoWaarde = totEV - totSchuld; + // Rendement t.o.v. de geinvesteerde fiat, zelfde formule als op de EV-tab. + const totGeinvesteerd = cats.reduce( + (a, c) => a + evRows.reduce((b, r) => b + (r[c.id] || 0), 0), + 0 + ); + const rendementBedrag = totGeinvesteerd > 0 ? totEV - totGeinvesteerd : null; + const rendementPct = totGeinvesteerd > 0 ? (rendementBedrag / totGeinvesteerd) * 100 : null; + const rendementKleur = rendementBedrag === null ? T.muted : rendementBedrag >= 0 ? GREEN : RED; + const schuldCatsDash = schuldBlokken.map((b) => ({ naam: b.naam, color: b.color, subtot: b.items.reduce((a, i) => a + (i.waarde || 0), 0), @@ -377,11 +386,15 @@ export default function VoortgangTab() {
Rendement Eigen Vermogen
Bedrag
-
—
+
+ {rendementBedrag === null ? "—" : fmt(rendementBedrag)} +
Percentage
-
—
+
+ {rendementPct === null ? "—" : `${rendementPct >= 0 ? "+" : ""}${rendementPct.toFixed(1)}%`} +
diff --git a/package.json b/package.json index f819aa8..1f7052f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vibefinance", - "version": "1.0.12", + "version": "1.0.13", "description": "VibeFinance — persoonlijk vermogensbeheer", "private": true, "repository": "https://vibehoogie.duckdns.org/vibe/VibeFinance", -- 2.47.3