Merge pull request 'upgrade prod to postgres 18 same as dev' (#3) from update-0.1.3 into main

Reviewed-on: #3

BEHEER.md

@@ -51,6 +51,24 @@ 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
+```
+
 ---
 
 ## Logs en diagnose

Changelog.md

@@ -1,5 +1,17 @@
 # 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`)
+
+---
+
 ## [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.3-8b5cf6?style=flat)
 ![Built with Claude](https://img.shields.io/badge/Gebouwd_met-Claude.ai-8b5cf6?style=flat&logo=anthropic&logoColor=white)
 
 </div>

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/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "vibefinance-frontend",
-    "version":  "0.1.1",
+    "version":  "0.1.3-dev",
     "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.3",
   "description": "VibeFinance — persoonlijk vermogensbeheer",
   "private": true,
   "repository": "https://vibehoogie.duckdns.org/vibe/VibeFinance",