586 lines
36 KiB
HTML
586 lines
36 KiB
HTML
<!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 & 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>
|