Merge pull request 'bugfix' (#19) from update-1.0.13 into main

Reviewed-on: #19

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`

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)
 
 <img src="docs/screenshot-dashboard.png" alt="VibeFinance dashboard" width="820">
@@ -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

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": {

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",
       }}
     >

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",
       }}
     >

frontend/src/components/NavBar.jsx

@@ -116,7 +116,7 @@ function OverPopup({ onClose, nieuweVersie, T }) {
       {/* Overlay */}
       <div onClick={onClose} style={{
         position: "fixed", inset: 0, zIndex: 490,
-        background: "rgba(0,0,0,0.55)", backdropFilter: "blur(4px)",
+        background: "rgba(0,0,0,0.45)",
         display: "flex", alignItems: "center", justifyContent: "center",
       }}>
         {/* Modal */}

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,
       }}
     >

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() {
           <div style={{ fontWeight: 700, fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase", color: "#f59e0b", marginBottom: 12 }}>Rendement Eigen Vermogen</div>
           <div style={{ padding: "10px 0", borderBottom: `1px solid ${T.border}` }}>
             <div style={{ fontSize: 11, color: T.muted, marginBottom: 4 }}>Bedrag</div>
-            <div style={{ fontSize: 15, fontWeight: 700, color: T.muted }}>—</div>
+            <div style={{ fontSize: 15, fontWeight: 700, color: rendementKleur }}>
+              {rendementBedrag === null ? "—" : fmt(rendementBedrag)}
+            </div>
           </div>
           <div style={{ padding: "10px 0" }}>
             <div style={{ fontSize: 11, color: T.muted, marginBottom: 4 }}>Percentage</div>
-            <div style={{ fontSize: 15, fontWeight: 700, color: T.muted }}>—</div>
+            <div style={{ fontSize: 15, fontWeight: 700, color: rendementKleur }}>
+              {rendementPct === null ? "—" : `${rendementPct >= 0 ? "+" : ""}${rendementPct.toFixed(1)}%`}
+            </div>
           </div>
         </VCard>
 

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",