{/* 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",
@@ -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 */}