readme v0.1.4

BEHEER.md

@@ -51,6 +51,38 @@ docker compose pull && docker compose up -d
 docker compose down -v && docker compose up -d
 ```
 
+### PostgreSQL versie-upgrade
+
+Bij een upgrade van PostgreSQL (bijv. 16 → 18) is de bestaande data niet compatibel. Stappen:
+
+```bash
+# 1. Backup maken
+docker exec vibefinance_postgres pg_dump -U vibefinance vibefinance > backup-$(date +%F).sql
+
+# 2. Oude containers en volumes verwijderen
+docker compose down -v
+
+# 3. Nieuwe versie starten
+docker compose up -d
+
+# 4. Backup terugzetten
+docker exec -i vibefinance_postgres psql -U vibefinance -d vibefinance < backup-YYYY-MM-DD.sql
+```
+
+---
+
+## Architectuur — nginx proxy
+
+De frontend-container (nginx) serveert de React-app en proxyt `/api/`-verzoeken intern door naar de backend-container op poort 3001. Dit is geconfigureerd in `frontend/nginx-spa.conf`:
+
+```nginx
+location /api/ {
+    proxy_pass http://backend:3001;
+}
+```
+
+> Ontbreekt dit blok, dan krijgen gebruikers "Kan geen verbinding maken met de server" bij het inloggen — ook al draaien alle containers.
+
 ---
 
 ## Logs en diagnose

Changelog.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [0.1.3] - 2026-04-16
+
+### Toegevoegd
+- Versienummer met logo zichtbaar boven de logout-knop in de sidebar
+
+### Gewijzigd
+- Registry verplaatst van intern IP (`10.0.3.108:3000`) naar publieke DuckDNS-hostnaam (`vibehoogie.duckdns.org`) — toegankelijk via Nginx Proxy Manager
+- PostgreSQL productie geüpgraded van versie 16 naar 18 (volume mount aangepast naar `/var/lib/postgresql`)
+- Witte rand rondom de app verwijderd (globale CSS reset toegevoegd, `App.css` gekoppeld aan `App.jsx`)
+
+### Opgelost
+- Login gaf "Kan geen verbinding maken met de server": `nginx-spa.conf` miste een `/api/` proxy-blok naar de backend-container — alle API-calls kwamen niet aan
+
+---
+
 ## [0.0.4] - 2026-04-08
 
 ### Toegevoegd

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-0.0.3-8b5cf6?style=flat)
+![Version](https://img.shields.io/badge/versie-0.1.4-8b5cf6?style=flat)
 ![Built with Claude](https://img.shields.io/badge/Gebouwd_met-Claude.ai-8b5cf6?style=flat&logo=anthropic&logoColor=white)
 
 </div>
@@ -83,7 +83,7 @@ vibefinance/
 │
 ├── frontend/                   # React / Vite SPA
 │   ├── Dockerfile              # Multi-stage: dev → build → nginx
-│   ├── nginx-spa.conf          # SPA fallback binnen de container
+│   ├── nginx-spa.conf          # SPA fallback + /api proxy naar backend
 │   ├── vite.config.js
 │   └── src/
 │       ├── App.jsx             # Root – wiring + idle-logout
@@ -170,7 +170,7 @@ Beveiligde endpoints vereisen `Authorization: Bearer <token>`. Rate limiting: 20
 
 - Wachtwoorden gehasht met bcrypt (cost factor 12)
 - JWT authenticatie met instelbare vervaltijd
-- Backend uitsluitend bereikbaar via nginx proxy
+- Backend uitsluitend bereikbaar via nginx proxy (`/api/` in `nginx-spa.conf`)
 - Database bereikbaar alleen binnen het interne Docker netwerk
 - Containers draaien als non-root
 - Helmet security headers

docker-compose.yml

@@ -10,7 +10,7 @@
 services:
 
   postgres:
-    image: postgres:16-alpine
+    image: postgres:18-alpine
     container_name: vibefinance_postgres
     restart: unless-stopped
     environment:
@@ -18,7 +18,7 @@ services:
       POSTGRES_USER:     ${POSTGRES_USER:-vibefinance}
       POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
     volumes:
-      - vibefinance_pgdata:/var/lib/postgresql/data
+      - vibefinance_pgdata:/var/lib/postgresql
     healthcheck:
       test: ["CMD-SHELL", "pg_isready -U vibefinance"]
       interval: 10s
@@ -51,7 +51,7 @@ services:
     container_name: vibefinance_frontend
     restart: unless-stopped
     ports:
-      - "${FRONTEND_PORT:-3300}:80"
+      - "${FRONTEND_PORT:-3400}:80"
     depends_on:
       backend:
         condition: service_healthy

frontend/nginx-spa.conf

@@ -14,6 +14,16 @@ server {
         try_files $uri =404;
     }
 
+    # Proxy API-calls naar de backend
+    location /api/ {
+        proxy_pass         http://backend:3001;
+        proxy_http_version 1.1;
+        proxy_set_header   Host              $host;
+        proxy_set_header   X-Real-IP         $remote_addr;
+        proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
+        proxy_set_header   X-Forwarded-Proto $scheme;
+    }
+
     # SPA fallback – stuur alle routes naar index.html
     location / {
         try_files $uri $uri/ /index.html;

frontend/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "vibefinance-frontend",
-    "version":  "0.1.1",
+    "version":  "0.1.4",
     "updateCheckUrl":  "https://vibehoogie.duckdns.org/api/v1/repos/vibe/VibeFinance/releases/latest",
     "private":  true,
     "type":  "module",

frontend/src/App.css

@@ -1,5 +1,12 @@
-* {
+*, *::before, *::after {
   box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body, #root {
+  height: 100%;
+  width: 100%;
 }
 
 input[type="number"]::-webkit-inner-spin-button {

frontend/src/App.jsx

@@ -1,3 +1,4 @@
+import "./App.css";
 import { AppProvider, useApp } from "./context/AppContext.jsx";
 import { useEffect, useRef, useState } from "react";
 import LoginPage from "./components/LoginPage.jsx";

frontend/src/components/NavBar.jsx

@@ -276,6 +276,27 @@ export default function NavBar() {
           </div>
         )}
 
+        {/* App naam + versienummer */}
+        {!collapsed && (
+          <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 12px", marginBottom: 4 }}>
+            <div style={{
+              width: 32, height: 32, flexShrink: 0,
+              background: `linear-gradient(135deg, ${PURPLE}, #a855f7)`,
+              borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center",
+              boxShadow: `0 0 8px ${PURPLE}44`,
+            }}>
+              <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
+                <polyline points="2,15 6,9 10,12 14,5 18,8" stroke="#fff" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round"/>
+                <line x1="2" y1="17" x2="18" y2="17" stroke="rgba(255,255,255,0.35)" strokeWidth="1.2"/>
+              </svg>
+            </div>
+            <div>
+              <div style={{ fontSize: 13, fontWeight: 700, color: T.text }}>VibeFinance</div>
+              <div style={{ fontSize: 11, color: T.muted }}>{version}</div>
+            </div>
+          </div>
+        )}
+
         {/* Uitloggen */}
         <SidebarItem
           onClick={logout}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibefinance",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "VibeFinance — persoonlijk vermogensbeheer",
   "private": true,
   "repository": "https://vibehoogie.duckdns.org/vibe/VibeFinance",