eindelijk weer eens een push

2026-05-31 16:07:30 +02:00
parent 01cff8e165
commit ff21c258e0
2747 changed files with 302316 additions and 131101 deletions
@@ -0,0 +1,13 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install --omit=dev
+
+COPY server.js ./
+COPY public/ ./public/
+
+EXPOSE 3000
+
+CMD ["node", "server.js"]
@@ -0,0 +1,84 @@
+---
+# Secret – CouchDB credentials
+apiVersion: v1
+kind: Secret
+metadata:
+  name: couchdb-credentials
+  namespace: couchdb
+type: Opaque
+stringData:
+  username: admin
+  password: Couchdb01
+  url: http://admin:Couchdb01@couchdb.couchdb.svc.cluster.local:5984
+
+---
+# Deployment
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: aangifte
+  namespace: couchdb
+  labels:
+    app: aangifte
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: aangifte
+  template:
+    metadata:
+      labels:
+        app: aangifte
+    spec:
+      containers:
+        - name: aangifte
+          image: allardkrings/aangifte
+          imagePullPolicy: Always
+          ports:
+            - containerPort: 8080
+          env:
+            - name: COUCHDB_URL
+              valueFrom:
+                secretKeyRef:
+                  name: couchdb-credentials
+                  key: url
+          resources:
+            requests:
+              memory: "128Mi"
+              cpu: "100m"
+            limits:
+              memory: "256Mi"
+              cpu: "250m"
+
+---
+# Service
+apiVersion: v1
+kind: Service
+metadata:
+  name: aangifte
+  namespace: couchdb
+spec:
+  selector:
+    app: aangifte
+  ports:
+    - port: 8080
+      targetPort: 8080
+
+---
+# IngressRoute
+apiVersion: traefik.io/v1alpha1
+kind: IngressRoute
+metadata:
+  name: aangifte
+  namespace: couchdb
+spec:
+  entryPoints:
+    - websecure
+  routes:
+    - match: Host(`aangifte-prod.allarddcs.nl`)
+      kind: Rule
+      services:
+        - name: aangifte
+          port: 8080
+  tls:
+    certResolver: letsencrypt
@@ -0,0 +1,13 @@
+{
+  "name": "aangifte-app",
+  "version": "1.0.0",
+  "description": "Belastingdienst aangifte app with CouchDB backend",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "http-proxy-middleware": "^3.0.0"
+  }
+}
@@ -0,0 +1,585 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Mijn Belastingdienst – Aangifte Inkomstenbelasting 2024</title>
+<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;600;700&display=swap" rel="stylesheet">
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: 'Source Sans 3', Arial, sans-serif; font-size: 14px; color: #1a1a1a; background: #fff; }
+
+  .top-logo-bar { border-bottom: 1px solid #ccc; padding: 10px 20px; display: flex; justify-content: center; align-items: center; }
+  .logo-placeholder { display: flex; align-items: center; gap: 10px; }
+  .logo-shield { width: 44px; height: 44px; background: #154273; border-radius: 2px; display: flex; align-items: center; justify-content: center; }
+  .logo-shield svg { width: 28px; height: 28px; }
+  .logo-site-name { font-size: 15px; color: #333; font-weight: 400; }
+
+  .main-header { background: #c8daea; padding: 12px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #a8c0d8; }
+  .main-header .app-title { font-size: 20px; font-weight: 700; color: #1a1a1a; }
+  .main-header .user-name { font-size: 18px; font-weight: 700; color: #1a1a1a; }
+
+  .app-body { display: flex; min-height: calc(100vh - 120px); }
+
+  .sidebar { width: 280px; min-width: 280px; border-right: 1px solid #ddd; padding: 20px 0; background: #fff; overflow-y: auto; }
+  .sidebar-title { font-size: 14px; font-weight: 700; color: #1a1a1a; padding: 0 16px 12px 16px; border-bottom: 1px solid #eee; margin-bottom: 8px; }
+  .nav-tree { list-style: none; }
+  .nav-item { display: flex; align-items: center; gap: 6px; padding: 5px 16px; font-size: 13px; color: #1a1a1a; cursor: pointer; line-height: 1.4; }
+  .nav-item:hover { background: #e8f0f8; }
+  .nav-item.active { background: #dce8f5; font-weight: 600; color: #154273; }
+  .nav-item.section-header { font-weight: 600; padding-top: 8px; }
+  .nav-sub { list-style: none; padding-left: 24px; }
+  .nav-sub .nav-item { font-weight: 400; }
+
+  .main-content { flex: 1; padding: 28px 36px; max-width: 820px; }
+  .content-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
+  .content-subtitle { font-size: 16px; font-weight: 700; margin-bottom: 20px; color: #1a1a1a; }
+
+  .employer-block { border: 1px solid #ccc; border-radius: 3px; margin-bottom: 24px; background: #fff; }
+  .employer-header { background: #f5f5f5; border-bottom: 1px solid #ccc; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
+  .employer-header-left { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
+  .collapse-icon { color: #154273; font-size: 12px; font-weight: 700; }
+  .btn-verwijderen { background: none; border: none; color: #154273; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 5px; font-family: inherit; text-decoration: underline; }
+  .btn-verwijderen:hover { color: #0f2f52; }
+  .employer-body { padding: 20px; }
+
+  .form-row { display: flex; align-items: flex-start; margin-bottom: 16px; gap: 16px; }
+  .form-label-col { min-width: 200px; font-size: 14px; padding-top: 8px; display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
+  .form-value-col { flex: 1; }
+
+  .help-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1px solid #154273; color: #154273; border-radius: 2px; font-size: 11px; font-weight: 700; cursor: pointer; flex-shrink: 0; background: white; font-family: inherit; }
+  .tooltip { display: none; position: absolute; background: #154273; color: white; padding: 8px 12px; border-radius: 3px; font-size: 12px; max-width: 240px; line-height: 1.5; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
+  .tooltip::before { content: ''; position: absolute; top: -6px; left: 12px; border: 6px solid transparent; border-bottom-color: #154273; border-top: none; }
+  .help-container { position: relative; display: inline-block; }
+  .help-container:hover .tooltip { display: block; top: 100%; margin-top: 4px; left: 0; }
+
+  .bd-text-input { width: 100%; max-width: 320px; border: 1px solid #aaa; border-radius: 2px; padding: 6px 10px; font-size: 14px; font-family: inherit; background: #eaf3fb; color: #1a1a1a; }
+  .bd-text-input:focus { outline: none; border-color: #154273; box-shadow: 0 0 0 2px rgba(21,66,115,0.2); }
+  .bd-text-input[readonly] { background: #f0f0f0; color: #555; }
+
+  .money-row { display: flex; gap: 24px; margin-bottom: 16px; align-items: flex-start; }
+  .money-col { display: flex; flex-direction: column; gap: 4px; }
+  .money-label { font-size: 14px; display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
+  .money-input-wrap { display: flex; align-items: center; border: 1px solid #aaa; border-radius: 2px; background: #eaf3fb; overflow: hidden; width: 130px; }
+  .money-input-wrap .euro-sign { padding: 6px 8px; background: #eaf3fb; font-size: 14px; color: #333; border-right: 1px solid #aaa; flex-shrink: 0; }
+  .money-input-wrap input { border: none; background: #eaf3fb; padding: 6px 8px; font-size: 14px; font-family: inherit; width: 100%; text-align: right; }
+  .money-input-wrap input:focus { outline: none; }
+
+  .sub-section-title { font-size: 14px; font-weight: 700; margin: 20px 0 12px 0; }
+  .radio-row { display: flex; align-items: center; margin-top: 4px; }
+  .radio-option { display: flex; align-items: center; gap: 5px; padding: 5px 12px 5px 0; cursor: pointer; font-size: 14px; }
+  .radio-option input[type="radio"] { accent-color: #154273; width: 15px; height: 15px; }
+
+  .btn-toevoegen { background: none; border: 1px solid #154273; color: #154273; padding: 6px 16px; font-size: 13px; font-family: inherit; border-radius: 2px; cursor: pointer; margin-top: 8px; display: flex; align-items: center; gap: 6px; }
+  .btn-toevoegen:hover { background: #e8f0f8; }
+
+  .bottom-nav { display: flex; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid #ddd; align-items: center; }
+  .btn-primary { background: #154273; color: white; border: none; padding: 9px 24px; font-size: 14px; font-weight: 600; font-family: inherit; border-radius: 2px; cursor: pointer; }
+  .btn-primary:hover { background: #1a5296; }
+  .btn-secondary { background: white; color: #154273; border: 1px solid #154273; padding: 8px 20px; font-size: 14px; font-family: inherit; border-radius: 2px; cursor: pointer; }
+  .btn-secondary:hover { background: #e8f0f8; }
+
+  .pension-block { border: 1px solid #ccc; border-radius: 3px; margin-bottom: 16px; background: #fff; }
+  .pension-header { background: #f5f5f5; border-bottom: 1px solid #ccc; padding: 9px 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 700; font-size: 13px; }
+
+  .section-tabs { display: none; }
+  .section-tabs.active-section { display: block; }
+  .info-text { font-size: 13px; color: #555; margin-bottom: 16px; line-height: 1.6; }
+
+  .status-bar { font-size: 12px; color: #555; display: flex; align-items: center; gap: 8px; }
+  .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #ccc; flex-shrink: 0; }
+  .status-dot.saved { background: #39870c; }
+  .status-dot.saving { background: #e17000; animation: pulse 1s infinite; }
+  .status-dot.error { background: #d52b1e; }
+  @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
+
+  .toast { position: fixed; bottom: 24px; right: 24px; padding: 12px 20px; border-radius: 3px; font-size: 13px; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,0.2); transform: translateY(60px); opacity: 0; transition: all 0.3s ease; z-index: 1000; }
+  .toast.show { transform: translateY(0); opacity: 1; }
+  .toast.success { background: #39870c; color: white; }
+  .toast.error { background: #d52b1e; color: white; }
+
+  @media (max-width: 768px) { .sidebar { display: none; } .main-content { padding: 16px; } .money-row { flex-wrap: wrap; } }
+</style>
+</head>
+<body>
+
+<div class="top-logo-bar">
+  <div class="logo-placeholder">
+    <div class="logo-shield">
+      <svg viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M14 2L4 7v7c0 5.5 4.3 10.7 10 12 5.7-1.3 10-6.5 10-12V7L14 2z" fill="white" opacity="0.9"/>
+        <text x="9" y="19" font-size="12" font-weight="bold" fill="#154273" font-family="Arial">BD</text>
+      </svg>
+    </div>
+    <span class="logo-site-name">Belastingdienst</span>
+  </div>
+</div>
+
+<div class="main-header">
+  <span class="app-title">Mijn Belastingdienst</span>
+  <span class="user-name">A C KRINGS</span>
+</div>
+
+<div class="app-body">
+  <nav class="sidebar">
+    <div class="sidebar-title">Aangifte Inkomstenbelasting 2024</div>
+    <ul class="nav-tree">
+      <li><span class="nav-item" onclick="showSection('intro')">Introductie</span></li>
+      <li><span class="nav-item" onclick="showSection('persoonlijk')">Persoonlijke gegevens A C KRINGS</span></li>
+      <li><span class="nav-item" onclick="showSection('partner')">Partner</span></li>
+      <li><span class="nav-item" onclick="showSection('vooraf')">Vooraf ingevulde gegevens</span></li>
+      <li><span class="nav-item" onclick="showSection('partner-gegevens')">Persoonlijke gegevens partner</span></li>
+      <li><span class="nav-item" onclick="showSection('kinderen')">Persoonlijke gegevens kinderen</span></li>
+      <li><span class="nav-item" onclick="showSection('onderneming')">Onderneming</span></li>
+      <li>
+        <span class="nav-item section-header" onclick="toggleNav('nav-inkomsten')">
+          <span id="chev-nav-inkomsten">▼</span> Inkomsten
+        </span>
+        <ul class="nav-sub" id="nav-inkomsten">
+          <li><span class="nav-item active" onclick="showSection('loondienst')">Inkomsten uit loondienst</span></li>
+          <li><span class="nav-item" onclick="showSection('pensioen')">Pensioen en andere uitkeringen</span></li>
+          <li><span class="nav-item" onclick="showSection('overige-inkomsten')">Overige inkomsten</span></li>
+          <li><span class="nav-item" onclick="showSection('beschikbaar')">Inkomsten uit beschikbaar gestelde bezittingen</span></li>
+          <li><span class="nav-item" onclick="showSection('partneralimentatie')">Partneralimentatie</span></li>
+        </ul>
+      </li>
+      <li><span class="nav-item" onclick="showSection('woningen')">Woningen en andere onroerende zaken</span></li>
+      <li>
+        <span class="nav-item section-header" onclick="toggleNav('nav-bank')">
+          <span id="chev-nav-bank">▲</span> Bankrekeningen en andere bezittingen
+        </span>
+        <ul class="nav-sub" id="nav-bank" style="display:none">
+          <li><span class="nav-item" onclick="showSection('bank')">Bank- en spaarrekeningen</span></li>
+          <li><span class="nav-item" onclick="showSection('aanmerkelijk')">Aanmerkelijk belang</span></li>
+          <li><span class="nav-item" onclick="showSection('beleggingen')">Beleggingen</span></li>
+          <li><span class="nav-item" onclick="showSection('kapitaalverzekeringen')">Kapitaalverzekeringen</span></li>
+          <li><span class="nav-item" onclick="showSection('bouwdepots')">Bouwdepots</span></li>
+          <li><span class="nav-item" onclick="showSection('andere-bezittingen')">Andere bezittingen</span></li>
+        </ul>
+      </li>
+      <li>
+        <span class="nav-item section-header" onclick="toggleNav('nav-hypotheken')">
+          <span id="chev-nav-hypotheken">▼</span> Hypotheken en andere schulden
+        </span>
+        <ul class="nav-sub" id="nav-hypotheken">
+          <li><span class="nav-item" onclick="showSection('hypotheken')">Hypotheken en leningen woning</span></li>
+        </ul>
+      </li>
+      <li>
+        <span class="nav-item section-header" onclick="toggleNav('nav-uitgaven')">
+          <span id="chev-nav-uitgaven">▲</span> Uitgaven
+        </span>
+        <ul class="nav-sub" id="nav-uitgaven" style="display:none">
+          <li><span class="nav-item" onclick="showSection('lijfrente')">Uitgaven voor lijfrente</span></li>
+          <li><span class="nav-item" onclick="showSection('zorgkosten')">Zorgkosten</span></li>
+          <li><span class="nav-item" onclick="showSection('giften')">Giften</span></li>
+        </ul>
+      </li>
+    </ul>
+  </nav>
+
+  <main class="main-content">
+
+    <!-- LOONDIENST -->
+    <div id="section-loondienst" class="section-tabs active-section">
+      <div class="content-title">Inkomsten uit loondienst</div>
+      <div class="content-subtitle">A C KRINGS</div>
+      <div class="employer-block" id="employer-0">
+        <div class="employer-header" onclick="toggleEmployer(0)">
+          <div class="employer-header-left">
+            <span class="collapse-icon" id="emp-icon-0">∧</span>
+            Werkgever: MINISTERIE VAN FINANCIEN
+          </div>
+          <button class="btn-verwijderen" onclick="event.stopPropagation()">
+            <span>🗑</span> verwijderen
+          </button>
+        </div>
+        <div class="employer-body" id="emp-body-0">
+          <div class="form-row">
+            <div class="form-label-col">Soort inkomsten: <div class="help-container"><button class="help-btn">?</button><div class="tooltip">Het soort inkomsten bepaalt hoe de loonheffing wordt berekend.</div></div></div>
+            <div class="form-value-col"><input class="bd-text-input" type="text" value="Loon binnen Nederland" readonly></div>
+          </div>
+          <div class="form-row">
+            <div class="form-label-col">Werkgever: <div class="help-container"><button class="help-btn">?</button><div class="tooltip">De naam van uw werkgever zoals vermeld op uw jaaropgave.</div></div></div>
+            <div class="form-value-col"><input class="bd-text-input" type="text" id="wg0-naam" value="MINISTERIE VAN FINANCIEN"></div>
+          </div>
+          <div class="money-row">
+            <div class="money-col">
+              <div class="money-label">Loon: <div class="help-container"><button class="help-btn">?</button><div class="tooltip">Brutoloon van uw jaaropgave (rubriek 1).</div></div></div>
+              <div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" id="wg0-loon" value="118231"></div>
+            </div>
+            <div class="money-col">
+              <div class="money-label">Loonheffing: <div class="help-container"><button class="help-btn">?</button><div class="tooltip">Ingehouden loonheffing (rubriek 2).</div></div></div>
+              <div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" id="wg0-loonheffing" value="41992"></div>
+            </div>
+            <div class="money-col">
+              <div class="money-label">Arbeidskorting: <div class="help-container"><button class="help-btn">?</button><div class="tooltip">Arbeidskorting verrekend door werkgever (rubriek 5).</div></div></div>
+              <div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" id="wg0-arbeidskorting" value="869"></div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-label-col" style="align-self:flex-start;padding-top:4px">
+              Andere inkomsten bij deze werkgever waarop geen loonheffing wordt ingehouden (zoals fooien):
+              <div class="help-container" style="margin-left:4px"><button class="help-btn">?</button><div class="tooltip">Bijv. fooien of andere inkomsten die niet op de loonstrook staan.</div></div>
+            </div>
+            <div class="form-value-col" style="padding-top:4px">
+              <div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" id="wg0-andere" value="0"></div>
+            </div>
+          </div>
+          <div class="sub-section-title">Reiskosten MINISTERIE VAN FINANCIEN</div>
+          <div class="form-row">
+            <div class="form-label-col">Reisde U met openbaar vervoer naar het werk?: <div class="help-container"><button class="help-btn">?</button><div class="tooltip">U kunt reiskosten aftrekken als u met OV reisde zonder volledige vergoeding.</div></div></div>
+            <div class="form-value-col">
+              <div class="radio-row">
+                <label class="radio-option"><input type="radio" name="reiskosten-0" value="ja"> ja</label>
+                <label class="radio-option"><input type="radio" name="reiskosten-0" value="nee" checked> nee</label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <button class="btn-toevoegen">＋ Werkgever toevoegen</button>
+      <div class="bottom-nav">
+        <button class="btn-primary" onclick="opslaanEnVolgende('pensioen')">Volgende ▶</button>
+        <button class="btn-secondary" onclick="showSection('vooraf')">◀ Vorige</button>
+        <button class="btn-secondary" onclick="opslaan()">💾 Opslaan</button>
+        <div class="status-bar"><div class="status-dot" id="statusDot"></div><span id="statusText">Niet opgeslagen</span></div>
+      </div>
+    </div>
+
+    <!-- PENSIOEN -->
+    <div id="section-pensioen" class="section-tabs">
+      <div class="content-title">Pensioen en andere uitkeringen</div>
+      <div class="content-subtitle">A C KRINGS</div>
+      <p class="info-text">Controleer de bedragen aan de hand van uw jaaropgaven.</p>
+      <div class="pension-block">
+        <div class="pension-header" onclick="togglePension(this)">
+          <span>∧ Nationale Nederlanden – € 646</span>
+          <button class="btn-verwijderen" onclick="event.stopPropagation()">🗑 verwijderen</button>
+        </div>
+        <div class="employer-body">
+          <div class="money-row">
+            <div class="money-col"><div class="money-label">Loon:</div><div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" id="p0-loon" value="646"></div></div>
+            <div class="money-col"><div class="money-label">Loonheffing:</div><div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" id="p0-heffing" value="114"></div></div>
+          </div>
+        </div>
+      </div>
+      <div class="pension-block">
+        <div class="pension-header" onclick="togglePension(this)">
+          <span>∧ ABP – € 45.926</span>
+          <button class="btn-verwijderen" onclick="event.stopPropagation()">🗑 verwijderen</button>
+        </div>
+        <div class="employer-body">
+          <div class="money-row">
+            <div class="money-col"><div class="money-label">Loon:</div><div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" id="p1-loon" value="45926"></div></div>
+            <div class="money-col"><div class="money-label">Loonheffing:</div><div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" id="p1-heffing" value="10149"></div></div>
+          </div>
+        </div>
+      </div>
+      <div class="pension-block">
+        <div class="pension-header" onclick="togglePension(this)">
+          <span>∧ Nationale Nederlanden – € 472</span>
+          <button class="btn-verwijderen" onclick="event.stopPropagation()">🗑 verwijderen</button>
+        </div>
+        <div class="employer-body">
+          <div class="money-row">
+            <div class="money-col"><div class="money-label">Loon:</div><div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" id="p2-loon" value="472"></div></div>
+            <div class="money-col"><div class="money-label">Loonheffing:</div><div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" id="p2-heffing" value="82"></div></div>
+          </div>
+        </div>
+      </div>
+      <div class="pension-block">
+        <div class="pension-header" onclick="togglePension(this)">
+          <span>∧ UWV – € 13.336</span>
+          <button class="btn-verwijderen" onclick="event.stopPropagation()">🗑 verwijderen</button>
+        </div>
+        <div class="employer-body">
+          <div class="money-row">
+            <div class="money-col"><div class="money-label">Loon:</div><div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" id="p3-loon" value="13336"></div></div>
+            <div class="money-col"><div class="money-label">Loonheffing:</div><div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" id="p3-heffing" value="2538"></div></div>
+          </div>
+        </div>
+      </div>
+      <button class="btn-toevoegen">＋ Uitkering toevoegen</button>
+      <div class="bottom-nav">
+        <button class="btn-primary" onclick="opslaanEnVolgende('woningen')">Volgende ▶</button>
+        <button class="btn-secondary" onclick="showSection('loondienst')">◀ Vorige</button>
+        <button class="btn-secondary" onclick="opslaan()">💾 Opslaan</button>
+        <div class="status-bar"><div class="status-dot" id="statusDot2"></div><span id="statusText2">Niet opgeslagen</span></div>
+      </div>
+    </div>
+
+    <!-- WONINGEN -->
+    <div id="section-woningen" class="section-tabs">
+      <div class="content-title">Woningen en andere onroerende zaken</div>
+      <div class="content-subtitle">A C KRINGS</div>
+      <div class="employer-block">
+        <div class="employer-header">
+          <div class="employer-header-left">∧ Warnsveld – Postcode 7231GH nr. 42</div>
+          <button class="btn-verwijderen">🗑 verwijderen</button>
+        </div>
+        <div class="employer-body">
+          <div class="form-row">
+            <div class="form-label-col">Situatie begin jaar:</div>
+            <div class="form-value-col"><input class="bd-text-input" type="text" value="woning: Hoofdverblijf" readonly></div>
+          </div>
+          <div class="form-row">
+            <div class="form-label-col">WOZ-waarde:</div>
+            <div class="form-value-col"><div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" id="woz-waarde" value="528000"></div></div>
+          </div>
+          <div class="form-row">
+            <div class="form-label-col">Verhuurd in 2024?</div>
+            <div class="form-value-col"><div class="radio-row">
+              <label class="radio-option"><input type="radio" name="verhuurd" value="ja"> ja</label>
+              <label class="radio-option"><input type="radio" name="verhuurd" value="nee" checked> nee</label>
+            </div></div>
+          </div>
+          <div class="form-row">
+            <div class="form-label-col">Erfpachtcanon betaald?</div>
+            <div class="form-value-col"><div class="radio-row">
+              <label class="radio-option"><input type="radio" name="erfpacht" value="ja"> ja</label>
+              <label class="radio-option"><input type="radio" name="erfpacht" value="nee" checked> nee</label>
+            </div></div>
+          </div>
+        </div>
+      </div>
+      <div class="bottom-nav">
+        <button class="btn-primary" onclick="opslaanEnVolgende('hypotheken')">Volgende ▶</button>
+        <button class="btn-secondary" onclick="showSection('pensioen')">◀ Vorige</button>
+        <button class="btn-secondary" onclick="opslaan()">💾 Opslaan</button>
+      </div>
+    </div>
+
+    <!-- HYPOTHEKEN -->
+    <div id="section-hypotheken" class="section-tabs">
+      <div class="content-title">Hypotheken en andere schulden</div>
+      <div class="content-subtitle">A C KRINGS</div>
+      <div class="employer-block">
+        <div class="employer-header">
+          <div class="employer-header-left">∧ BijBouwe – nr. 290396101</div>
+          <button class="btn-verwijderen">🗑 verwijderen</button>
+        </div>
+        <div class="employer-body">
+          <div class="money-row">
+            <div class="money-col"><div class="money-label">Schuld 01-01-2024:</div><div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" value="217500"></div></div>
+            <div class="money-col"><div class="money-label">Schuld 31-12-2024:</div><div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" value="217500"></div></div>
+            <div class="money-col"><div class="money-label">Rente betaald:</div><div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" value="3546"></div></div>
+          </div>
+          <div class="form-row">
+            <div class="form-label-col">Schuld voor eigen woning?</div>
+            <div class="form-value-col"><div class="radio-row">
+              <label class="radio-option"><input type="radio" name="woning-schuld" value="ja" checked> ja</label>
+              <label class="radio-option"><input type="radio" name="woning-schuld" value="nee"> nee</label>
+            </div></div>
+          </div>
+        </div>
+      </div>
+      <div class="employer-block">
+        <div class="employer-header">
+          <div class="employer-header-left">∧ BijBouwe – nr. 290396101 (aflossing)</div>
+          <button class="btn-verwijderen">🗑 verwijderen</button>
+        </div>
+        <div class="employer-body">
+          <div class="money-row">
+            <div class="money-col"><div class="money-label">Schuld 01-01-2024:</div><div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" value="88431"></div></div>
+            <div class="money-col"><div class="money-label">Schuld 31-12-2024:</div><div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" value="85263"></div></div>
+            <div class="money-col"><div class="money-label">Rente betaald:</div><div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" value="1423"></div></div>
+          </div>
+        </div>
+      </div>
+      <button class="btn-toevoegen">＋ Lening toevoegen</button>
+      <div class="bottom-nav">
+        <button class="btn-primary" onclick="opslaanEnVolgende('intro')">Opslaan &amp; afronden ▶</button>
+        <button class="btn-secondary" onclick="showSection('woningen')">◀ Vorige</button>
+        <button class="btn-secondary" onclick="opslaan()">💾 Opslaan</button>
+      </div>
+    </div>
+
+    <!-- Placeholders -->
+    <div id="section-intro" class="section-tabs"><div class="content-title">Introductie</div><p class="info-text" style="margin-top:12px">Welkom bij de aangifte Inkomstenbelasting 2024. Uw gegevens worden opgeslagen in CouchDB.</p><div class="bottom-nav"><button class="btn-primary" onclick="showSection('persoonlijk')">Volgende ▶</button></div></div>
+    <div id="section-persoonlijk" class="section-tabs"><div class="content-title">Persoonlijke gegevens A C KRINGS</div><div style="margin-top:12px"><div class="form-row"><div class="form-label-col">Naam:</div><div class="form-value-col"><input class="bd-text-input" type="text" value="A C KRINGS"></div></div><div class="form-row"><div class="form-label-col">Geboortedatum:</div><div class="form-value-col"><input class="bd-text-input" type="date" value="1956-05-22"></div></div><div class="form-row"><div class="form-label-col">Burgerservicenummer:</div><div class="form-value-col"><input class="bd-text-input" type="text" value="4444444444"></div></div></div><div class="bottom-nav"><button class="btn-primary" onclick="showSection('partner')">Volgende ▶</button></div></div>
+    <div id="section-partner" class="section-tabs"><div class="content-title">Partner</div><div style="margin-top:12px"><div class="form-row"><div class="form-label-col">Naam partner:</div><div class="form-value-col"><input class="bd-text-input" type="text" value="H M A VAN DER POL"></div></div><div class="form-row"><div class="form-label-col">Geboortedatum partner:</div><div class="form-value-col"><input class="bd-text-input" type="date" value="1960-05-15"></div></div><div class="form-row"><div class="form-label-col">Fiscale partner?</div><div class="form-value-col"><div class="radio-row"><label class="radio-option"><input type="radio" name="fiscaal" value="ja" checked> ja</label><label class="radio-option"><input type="radio" name="fiscaal" value="nee"> nee</label></div></div></div></div><div class="bottom-nav"><button class="btn-primary" onclick="showSection('loondienst')">Volgende ▶</button></div></div>
+    <div id="section-vooraf" class="section-tabs"><div class="content-title">Vooraf ingevulde gegevens</div><p class="info-text" style="margin-top:12px">Gegevens zijn vooraf ingevuld vanuit uw werkgever(s) en pensioenuitvoerder(s). Controleer zorgvuldig.</p><div class="bottom-nav"><button class="btn-primary" onclick="showSection('loondienst')">Naar inkomsten ▶</button></div></div>
+    <div id="section-partner-gegevens" class="section-tabs"><div class="content-title">Persoonlijke gegevens partner</div><p class="info-text" style="margin-top:12px">H M A VAN DER POL – BSN: 3333333333</p></div>
+    <div id="section-kinderen" class="section-tabs"><div class="content-title">Persoonlijke gegevens kinderen</div><p class="info-text" style="margin-top:12px">2 kinderen: A M KRINGS (2005) en A C KRINGS (2006).</p></div>
+    <div id="section-onderneming" class="section-tabs"><div class="content-title">Onderneming</div><p class="info-text" style="margin-top:12px">Ondernemer IB: nee. Geldverstrekker: ja.</p></div>
+    <div id="section-overige-inkomsten" class="section-tabs"><div class="content-title">Overige inkomsten</div><p class="info-text" style="margin-top:12px">Geen overige inkomsten opgegeven.</p></div>
+    <div id="section-beschikbaar" class="section-tabs"><div class="content-title">Inkomsten uit beschikbaar gestelde bezittingen</div></div>
+    <div id="section-partneralimentatie" class="section-tabs"><div class="content-title">Partneralimentatie</div></div>
+    <div id="section-bank" class="section-tabs"><div class="content-title">Bank- en spaarrekeningen</div></div>
+    <div id="section-aanmerkelijk" class="section-tabs"><div class="content-title">Aanmerkelijk belang</div></div>
+    <div id="section-beleggingen" class="section-tabs"><div class="content-title">Beleggingen</div></div>
+    <div id="section-kapitaalverzekeringen" class="section-tabs"><div class="content-title">Kapitaalverzekeringen</div></div>
+    <div id="section-bouwdepots" class="section-tabs"><div class="content-title">Bouwdepots</div></div>
+    <div id="section-andere-bezittingen" class="section-tabs"><div class="content-title">Andere bezittingen</div></div>
+    <div id="section-lijfrente" class="section-tabs"><div class="content-title">Uitgaven voor lijfrente</div></div>
+    <div id="section-zorgkosten" class="section-tabs"><div class="content-title">Zorgkosten</div></div>
+    <div id="section-giften" class="section-tabs"><div class="content-title">Giften</div></div>
+
+  </main>
+</div>
+
+<div class="toast" id="toast"></div>
+
+<script>
+  const DB = '/api/couchdb/aangifte';
+  const DOC_ID = 'aangifte-2024-allard';
+  let currentRev = null;
+
+  async function ensureDb() {
+    await fetch(`${DB}`, { method: 'PUT' });
+  }
+
+  function collectData() {
+    return {
+      _id: DOC_ID,
+      login_naam: 'allard',
+      jaar_aangifte: 2024,
+      naam: 'A C KRINGS',
+      geboortedatum: '1956-05-22',
+      burgerservicenummer: 4444444444,
+      naam_partner: 'H M A VAN DER POL',
+      geboortedatum_partner: '1960-05-15',
+      burgerservicenummer_partner: 3333333333,
+      inkomstenUitLoondienst: [{
+        werkgever: val('wg0-naam'),
+        soortInkomsten: 'loon',
+        loon: num('wg0-loon'),
+        loonheffing: num('wg0-loonheffing'),
+        arbeidskorting: num('wg0-arbeidskorting'),
+        andereInkomsten: num('wg0-andere') || null,
+        reiskosten: document.querySelector('input[name="reiskosten-0"]:checked')?.value === 'ja'
+      }],
+      pensioenEnAndereUitkeringen: [
+        { verzekeringsmaatschappij: 'Nationale Nederlanden', loon: num('p0-loon'), loonheffing: num('p0-heffing') },
+        { verzekeringsmaatschappij: 'ABP',                   loon: num('p1-loon'), loonheffing: num('p1-heffing') },
+        { verzekeringsmaatschappij: 'Nationale Nederlanden', loon: num('p2-loon'), loonheffing: num('p2-heffing') },
+        { verzekeringsmaatschappij: 'UWV',                   loon: num('p3-loon'), loonheffing: num('p3-heffing') },
+      ],
+      woningen: [{
+        postcode: '7231GH', huisnummer: 42, woonplaats: 'Warnsveld',
+        woz_waarde: num('woz-waarde'),
+        verhuurd: document.querySelector('input[name="verhuurd"]:checked')?.value === 'ja',
+        erfpachtcanon: document.querySelector('input[name="erfpacht"]:checked')?.value === 'ja',
+        situatie_begin_jaar: 'woning: Hoofdverblijf'
+      }],
+      updated_at: new Date().toISOString()
+    };
+  }
+
+  async function opslaan() {
+    setStatus('saving', 'Opslaan...');
+    try {
+      await ensureDb();
+      const doc = collectData();
+      if (currentRev) doc._rev = currentRev;
+      const res = await fetch(`${DB}/${DOC_ID}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(doc)
+      });
+      const json = await res.json();
+      if (res.ok) {
+        currentRev = json.rev;
+        setStatus('saved', 'Opgeslagen ✓');
+        showToast('✓ Opgeslagen in CouchDB', 'success');
+      } else {
+        throw new Error(json.reason || res.statusText);
+      }
+    } catch (e) {
+      setStatus('error', 'Fout bij opslaan');
+      showToast('✗ Fout: ' + e.message, 'error');
+    }
+  }
+
+  async function laadDocument() {
+    try {
+      const res = await fetch(`${DB}/${DOC_ID}`);
+      if (res.ok) {
+        const doc = await res.json();
+        currentRev = doc._rev;
+        if (doc.inkomstenUitLoondienst?.[0]) {
+          const w = doc.inkomstenUitLoondienst[0];
+          set('wg0-naam', w.werkgever);
+          set('wg0-loon', w.loon);
+          set('wg0-loonheffing', w.loonheffing);
+          set('wg0-arbeidskorting', w.arbeidskorting);
+          set('wg0-andere', w.andereInkomsten || 0);
+        }
+        const p = doc.pensioenEnAndereUitkeringen || [];
+        if (p[0]) { set('p0-loon', p[0].loon); set('p0-heffing', p[0].loonheffing); }
+        if (p[1]) { set('p1-loon', p[1].loon); set('p1-heffing', p[1].loonheffing); }
+        if (p[2]) { set('p2-loon', p[2].loon); set('p2-heffing', p[2].loonheffing); }
+        if (p[3]) { set('p3-loon', p[3].loon); set('p3-heffing', p[3].loonheffing); }
+        if (doc.woningen?.[0]) set('woz-waarde', doc.woningen[0].woz_waarde);
+        setStatus('saved', 'Geladen uit CouchDB ✓');
+      }
+    } catch (e) {
+      console.warn('Geen bestaand document, nieuw document wordt aangemaakt bij opslaan.');
+    }
+  }
+
+  function val(id) { return document.getElementById(id)?.value || ''; }
+  function num(id) { return parseInt(document.getElementById(id)?.value) || 0; }
+  function set(id, v) { const el = document.getElementById(id); if (el) el.value = v; }
+
+  function setStatus(state, text) {
+    ['statusDot','statusDot2'].forEach(id => {
+      const d = document.getElementById(id);
+      if (d) d.className = 'status-dot ' + state;
+    });
+    ['statusText','statusText2'].forEach(id => {
+      const el = document.getElementById(id);
+      if (el) el.textContent = text;
+    });
+  }
+
+  function showToast(msg, type) {
+    const t = document.getElementById('toast');
+    t.textContent = msg;
+    t.className = 'toast ' + type + ' show';
+    setTimeout(() => t.classList.remove('show'), 3000);
+  }
+
+  function showSection(id) {
+    document.querySelectorAll('.section-tabs').forEach(s => s.classList.remove('active-section'));
+    const el = document.getElementById('section-' + id);
+    if (el) el.classList.add('active-section');
+    document.querySelectorAll('.nav-item').forEach(n => {
+      n.classList.toggle('active', !!(n.getAttribute('onclick') && n.getAttribute('onclick').includes("'" + id + "'")));
+    });
+  }
+
+  async function opslaanEnVolgende(next) {
+    await opslaan();
+    showSection(next);
+  }
+
+  function toggleNav(id) {
+    const el = document.getElementById(id);
+    const chev = document.getElementById('chev-' + id);
+    const hidden = el.style.display === 'none';
+    el.style.display = hidden ? 'block' : 'none';
+    if (chev) chev.textContent = hidden ? '▼' : '▲';
+  }
+
+  function toggleEmployer(idx) {
+    const body = document.getElementById('emp-body-' + idx);
+    const icon = document.getElementById('emp-icon-' + idx);
+    const hidden = body.style.display === 'none';
+    body.style.display = hidden ? 'block' : 'none';
+    icon.textContent = hidden ? '∧' : '∨';
+  }
+
+  function togglePension(header) {
+    const body = header.nextElementSibling;
+    const span = header.querySelector('span');
+    const hidden = body.style.display === 'none';
+    body.style.display = hidden ? 'block' : 'none';
+    span.textContent = span.textContent.replace(hidden ? '∨' : '∧', hidden ? '∧' : '∨');
+  }
+
+  laadDocument();
+</script>
+</body>
+</html>
@@ -0,0 +1,33 @@
+const express = require('express');
+const { createProxyMiddleware } = require('http-proxy-middleware');
+const path = require('path');
+
+const app = express();
+const PORT = 3000;
+
+const COUCHDB_URL = process.env.COUCHDB_URL || 'http://admin:Couchdb01@couchdb.couchdb.svc.cluster.local:5984';
+
+// Proxy /api/couchdb → CouchDB
+app.use('/api/couchdb', createProxyMiddleware({
+  target: COUCHDB_URL,
+  changeOrigin: true,
+  pathRewrite: { '^/api/couchdb': '' },
+  on: {
+    error: (err, req, res) => {
+      console.error('CouchDB proxy error:', err.message);
+      res.status(502).json({ error: 'CouchDB unreachable', detail: err.message });
+    }
+  }
+}));
+
+// Serve static files
+app.use(express.static(path.join(__dirname, 'public')));
+
+app.get('*', (req, res) => {
+  res.sendFile(path.join(__dirname, 'public', 'index.html'));
+});
+
+app.listen(PORT, () => {
+  console.log(`Aangifte app running on port ${PORT}`);
+  console.log(`CouchDB proxy → ${COUCHDB_URL}`);
+});