bugfix

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>