Merge pull request 'bugfixes and final release' (#4) from update-1.0.0 into main

Reviewed-on: http://10.0.3.108:3000/Vibe/VibeFinance/pulls/4

.env.example

@@ -17,9 +17,6 @@ CORS_ORIGIN=http://localhost:3400
 
 # Update-notificaties (leeg = melding uit)
 UPDATE_CHECK_URL=https://vibehoogie.duckdns.org/api/v1/repos/vibe/VibeFinance/releases/latest
-# De Gitea-organisatie is publiek, dus de check werkt anoniem — laat dit staan.
+# Nodig zolang de Gitea-repo niet publiek leesbaar is; scope read:repository.
-# Alleen nodig als de organisatie weer privé wordt; scope read:repository.
+# Zonder token geeft releases/latest 404 en blijft de update-melding leeg.
-# Dan geeft releases/latest zonder token 404 en blijft de melding leeg.
-# Let op: een ongeldig token geeft 401, ook op een publieke repo. Bij twijfel
-# de regel uitgecommentarieerd laten in plaats van een token te gokken.
 # UPDATE_CHECK_TOKEN=

BEHEER.md

@@ -32,25 +32,6 @@ Vite proxyt `/api` naar `localhost:3001` binnen dezelfde container.
 > ⚠️ Alleen `.\dev.ps1 down` wist de development-database (`docker compose down -v`).
 > `.\dev.ps1 up` doet een gewone `down` en laat het volume staan.
 
-### Welke versie de dev-app toont
-
-De versie in "Over VibeFinance" komt uit `VITE_APP_VERSION`. `dev.ps1` leest die
-uit de **root** `package.json`, zet hem in de omgeving en synct hem naar
-`frontend/package.json`. In de dev-container is het een *runtime*-variabele
-(`docker-compose.dev.yml`, sectie `environment`) en geen build-arg: Vite bakt
-`__APP_VERSION__` in bij het **starten** van de dev-server, niet bij het bouwen
-van het image. Is hij leeg, dan valt `vite.config.js` terug op
-`frontend/package.json`.
-
-Ziet de app een oude versie, dan draait de dev-server nog van vóór de bump —
-`.\dev.ps1 up` hercreëert de container en start Vite opnieuw. Start je de stack
-handmatig met `docker compose -f docker-compose.dev.yml up`, dan staat
-`VITE_APP_VERSION` niet in je shell en zie je de versie uit
-`frontend/package.json`.
-
-> Een versie met een suffix (`1.0.1-dev`) onderdrukt de update-melding
-> permanent — zie [Update-notificaties](#update-notificaties).
-
 ---
 
 ## Testen
@@ -96,48 +77,31 @@ docker compose -f docker-compose.dev.yml exec -w /app/frontend app npm run lint
 
 ## Tokens
 
-**Eén token, op het werkstation.** Dat is genoeg omdat de `Vibe`-organisatie op
+Twee tokens, gesplitst op machine en op read/write. De grens die iets betekent
-public staat: alles wat alleen *leest* heeft geen token meer nodig — `git clone`,
+ligt tussen werkstation en server, niet tussen push en release: op één machine
-`docker compose pull` en de update-check van de app werken anoniem. Wat overblijft
+kan wie het ene token kan lezen, het andere ook.
-is schrijven, en dat gebeurt allemaal vanaf deze ene machine.
 
 | Token | Machine | Scopes | Gebruikt voor |
 |---|---|---|---|
-| `vibefinance-workstation` | dit werkstation | `write:package`, `write:repository` | `docker push` (`release.ps1`, `dev.ps1 push`) én het aanmaken van de Gitea-release |
+| `vibefinance-workstation` | dit werkstation | `write:package`, `write:repository` | `docker push` (`release.ps1`, `dev.ps1 push`) en het aanmaken van de Gitea-release |
+| `vibefinance-host` | de Docker-host | `read:package`, `read:repository` | `docker compose pull` en de update-check van de app |
 
-Er is geen apart host-token en geen apart registry-token:
+Aanmaken: Gitea → Settings → Applications → Generate New Token. Doe dat onder een
+account dat lid is van de `Vibe`-organisatie — die is privé, dus een token van
+een buitenstaander ziet de repo niet.
 
-- **`git push`** gaat over SSH (`gitea@…:Vibe/VibeFinance.git`), dus die gebruikt
+**Waar ze terechtkomen**
-  je SSH-sleutel en niet dit token.
-- **De registry** heeft geen eigen variabele nodig: `release.ps1` en `dev.ps1`
-  vallen bij een ontbrekende `REGISTRY_TOKEN` terug op `GITEA_TOKEN`. Zet alleen
-  `REGISTRY_USER` erbij, zodat het script zelf kan inloggen als de credential
-  store leeg is.
-- **De Docker-host** hoeft niets meer te hebben: pull en update-check zijn anoniem.
 
-Aanmaken: Gitea → Settings → Applications → Generate New Token, met **beide**
+| | Werkstation | Docker-host |
-scopes aangevinkt. Doe dat onder een account dat push-rechten op de repo heeft —
+|---|---|---|
-lid zijn van de organisatie is daarvoor niet automatisch genoeg. Scopes van een
+| Registry | `docker login` (credential store), of `REGISTRY_USER` + `REGISTRY_TOKEN` in `.env.release` | `docker login` als de gebruiker die deployt |
-bestaand token zijn later niet aan te passen, dus vink ze in één keer goed aan.
+| Gitea-API | `GITEA_TOKEN` in `.env.release` | `UPDATE_CHECK_TOKEN` in `.env` |
 
-**Waar hij terechtkomt** — `.env.release` naast de scripts, niet in git
+**Waarom het host-token read-only blijft.** Dat staat in platte tekst in `.env` op
-(`.gitignore` pakt `.env.*`):
+een server die de app op poort 3400 publiceert. Met schrijfrechten kan wie bij dat
-
+bestand komt — via de container, een shell op die host, of een backup — een eigen
-```ini
+image als `latest` naar de registry pushen, en die host pullt `latest` zelf.
-GITEA_TOKEN=<token met write:package + write:repository>
+Read-only houdt je eigen deploy-pad uit de aanvalsketen.
-REGISTRY_USER=<je Gitea-account>
-```
-
-Een variabele die al in je shell staat wint, zodat je per run kunt afwijken. Een
-lege waarde in het bestand wordt overgeslagen.
-
-**Als de organisatie weer privé gaat** heb je er wél een tweede bij nodig: een
-read-only token op de Docker-host, voor `docker compose pull` en
-`UPDATE_CHECK_TOKEN`. Houd dat token dan read-only. Het staat in platte tekst in
-`.env` op een server die de app op poort 3400 publiceert; met schrijfrechten kan
-wie bij dat bestand komt — via de container, een shell op die host, of een
-backup — een eigen image als `latest` naar de registry pushen, en die host pullt
-`latest` zelf. Read-only houdt je eigen deploy-pad uit de aanvalsketen.
 
 ### Wat een foutcode betekent
 
@@ -145,7 +109,7 @@ backup — een eigen image als `latest` naar de registry pushen, en die host pul
 |---|---|
 | 401 | Token ongeldig of verlopen. Op de registry: helemaal niet ingelogd. |
 | 403 | Het token mag de repo wél zien, maar mist de **scope** voor dit endpoint. Gitea noemt de vereiste scope in de response-body. |
-| 404 | Het token mag de repo niet zien. Gitea geeft geen 403, om niet te verklappen dat iets bestaat: verkeerd account, of geen toegang tot de organisatie. Nu de organisatie public is, wijst een 404 op een leesactie eerder op een verkeerde URL dan op rechten. |
+| 404 | Het token mag de repo niet zien. Gitea geeft geen 403, om niet te verklappen dat iets bestaat: verkeerd account, of geen toegang tot de organisatie. |
 
 Scopes van een bestaand token zijn in Gitea niet aan te passen. Bij een 403 maak
 je dus een nieuw token aan; bijwerken kan niet.
@@ -162,36 +126,17 @@ Vanuit de app-container op de host valt de body van een fout anders weg —
 busybox-`wget` gooit die bij een foutstatus weg, en Node zit in het image:
 
 ```bash
-# Anoniem, zoals de app het doet zonder UPDATE_CHECK_TOKEN
+docker exec vibefinance_app node -e 'fetch(process.env.UPDATE_CHECK_URL,{headers:{Accept:"application/json",Authorization:`token ${process.env.UPDATE_CHECK_TOKEN}`}}).then(async r=>console.log(r.status, (await r.text()).slice(0,300)))'
-docker exec vibefinance_app node -e 'fetch(process.env.UPDATE_CHECK_URL,{headers:{Accept:"application/json"}}).then(async r=>console.log(r.status, (await r.text()).slice(0,300)))'
-
-# Mét token, precies zoals routes/update.js de header opbouwt
-docker exec vibefinance_app node -e 'const t=process.env.UPDATE_CHECK_TOKEN; fetch(process.env.UPDATE_CHECK_URL,{headers:{Accept:"application/json",...(t&&{Authorization:`token ${t}`})}}).then(async r=>console.log(r.status, (await r.text()).slice(0,300)))'
 ```
 
-> Let op: een **ongeldig** token geeft `401`, ook op deze publieke repo — Gitea
+### Tokens opruimen
-> valt bij een verkeerd token niet terug op anonieme toegang. Krijg je 401
-> terwijl anoniem `200` geeft, haal `UPDATE_CHECK_TOKEN` dan uit `.env` in plaats
-> van hem te vervangen. Een *leeg* token is onschuldig: `Authorization: token `
-> negeert Gitea (`200`), en `config/index.js` zet met `|| null` bij een lege
-> waarde helemaal geen header. Nagemeten op 2026-09-10:
-> geen header `200`, `token ongeldig123` `401`, leeg `200`.
 
-### Oude tokens opruimen
+De lijst onder Settings → Applications heeft een kolom **Last used**. Zet eerst
-
+beide machines om, draai daarna een release en een pull, en kijk een dag later
-Nu er één token overblijft, kunnen de rest weg — maar niet op de gok. De lijst
+welke tokens niet meer meebewegen — die kun je intrekken. Betrouwbaarder dan uit
-onder Settings → Applications heeft een kolom **Last used**. Werkwijze:
+de naam afleiden wat waar in gebruik is. Trek niets in vóór die controle: het
-
+token achter je `docker login` op dit werkstation laat een release op de push
-1. Zet het nieuwe token in `.env.release` en draai een release die helemaal
+falen.
-   doorloopt (inclusief `docker push` en stap 5).
-2. Kijk in de lijst welk token net **Last used** heeft gekregen.
-3. Wacht een dag en trek de tokens in die niet meer meebewegen.
-
-Betrouwbaarder dan uit de naam afleiden wat waar in gebruik is. Trek vooral niets
-in vóór die controle: het token achter je `docker login` zit in de credential
-store en niet in een bestand, dus je ziet aan niets welke het is — trek je die
-in, dan valt de push in stap 3 om. Loopt dat toch mis, dan is
-`docker login vibehoogie.duckdns.org` met het nieuwe token genoeg.
 
 ---
 
@@ -238,15 +183,16 @@ in de volgende commit.
 Staat er een `.env.release` naast `release.ps1`, dan leest het script die in
 voordat er iets gebeurt, en hoeft stap 3 niet meer met de hand:
 
-```ini
+```
 # .env.release — staat in .gitignore, hoort alleen op de release-machine
 GITEA_TOKEN=<vibefinance-workstation>
 REGISTRY_USER=<gitea-gebruiker>
+REGISTRY_TOKEN=<vibefinance-workstation>
 ```
 
-`REGISTRY_TOKEN` hoeft er niet in: beide scripts vallen bij een ontbrekende
+Beide tokenvariabelen krijgen hetzelfde token; zie [Tokens](#tokens) voor waarom
-`REGISTRY_TOKEN` terug op `GITEA_TOKEN`. Zie [Tokens](#tokens) voor de scopes en
+dat op deze machine één token mag zijn, en voor wat een 401, 403 of 404 van Gitea
-voor wat een 401, 403 of 404 van Gitea betekent.
+betekent.
 
 Een variabele die al in je shell staat wint, zodat je per run kunt afwijken zonder
 het bestand aan te passen. Het script logt alleen welke namen het heeft geladen,
@@ -445,9 +391,8 @@ machine — `vibefinance-workstation`, zie [Tokens](#tokens). Zonder login faalt
 een push met `401 Unauthorized`; `release.ps1` en `dev.ps1 push` controleren dit
 vóór de build en stoppen dan meteen.
 
-Liever niet handmatig inloggen? Zet `REGISTRY_USER` in `.env.release`, dan logt
+Liever niet handmatig inloggen? Zet `REGISTRY_USER` en `REGISTRY_TOKEN` in
-het script zelf in met `GITEA_TOKEN` — een aparte `REGISTRY_TOKEN` is alleen
+`.env.release`, dan logt het script zelf in.
-nodig als je daar bewust een ánder token voor wilt gebruiken.
 
 Twee valkuilen: log in op `vibehoogie.duckdns.org` **zonder** `:3000` (dat is een
 aparte sleutel in de credential store), en doe het als dezelfde Windows-gebruiker
@@ -461,8 +406,20 @@ docker-credential-desktop list
 
 ### Pullen op een deploy-machine
 
-De organisatie is public, dus een **pull** werkt anoniem — `docker compose pull &&
+Het package is privé, dus ook een **pull** vereist een login — anoniem geeft
-docker compose up -d` en klaar, zonder `docker login`.
+`401 Unauthorized` (`docker compose pull` meldt dan "no basic auth credentials"
+of "pull access denied"). Eenmalig op de Docker-host:
+
+```bash
+docker login vibehoogie.duckdns.org
+# gebruikersnaam: je Gitea-account
+# wachtwoord:     het token van deze host (vibefinance-host, read:package)
+```
+
+Daarna werkt `docker compose pull && docker compose up -d`. De login komt in
+`~/.docker/config.json` van de gebruiker die het commando uitvoert — doe het dus
+als dezelfde gebruiker (bij `sudo docker` is dat root). Log in op
+`vibehoogie.duckdns.org` **zonder** `:3000`.
 
 Controleren zonder te pullen:
 
@@ -470,23 +427,8 @@ Controleren zonder te pullen:
 docker manifest inspect vibehoogie.duckdns.org/vibe/vibefinance-app:latest
 ```
 
-Krijg je `401 Unauthorized`, "no basic auth credentials" of "pull access denied",
+Ditzelfde token gaat als `UPDATE_CHECK_TOKEN` in de `.env` op deze host, voor de
-dan is het package niet publiek leesbaar (organisatie weer op privé, of de
+update-check van de app — één token voor beide, zie [Tokens](#tokens).
-package-eigenaar wijkt af van de organisatie). Dan alsnog eenmalig op de host:
-
-```bash
-docker login vibehoogie.duckdns.org
-# gebruikersnaam: je Gitea-account
-# wachtwoord:     een token met read:package
-```
-
-De login komt in `~/.docker/config.json` van de gebruiker die het commando
-uitvoert — doe het dus als dezelfde gebruiker (bij `sudo docker` is dat root).
-Log in op `vibehoogie.duckdns.org` **zonder** `:3000`.
-
-Moet je terug naar een token, dan kan datzelfde token ook als
-`UPDATE_CHECK_TOKEN` in de `.env` op deze host — één token voor beide, zie
-[Tokens](#tokens).
 
 ---
 
@@ -522,7 +464,7 @@ uit `.env` (of de default in `docker-compose.yml`). Beschikbare backend-variabel
 | Variabele | Betekenis |
 |---|---|
 | `UPDATE_CHECK_URL` | Release-API die gepolld wordt. Leeg = melding uit. |
-| `UPDATE_CHECK_TOKEN` | Optioneel. De `Vibe`-organisatie is public, dus `releases/latest` antwoordt anoniem met `200` en de check heeft geen token nodig. Gaat de organisatie weer privé, dan is het host-token nodig (`read:repository`, zie [Tokens](#tokens)): zonder geeft `releases/latest` dan 404, met een verkeerde scope 403 — in beide gevallen blijft de melding leeg, met alleen een `WARN` in het containerlog. |
+| `UPDATE_CHECK_TOKEN` | Nodig zolang de `Vibe`-organisatie in Gitea privé is: het token van de host (`read:repository`, zie [Tokens](#tokens)). Zonder token geeft `releases/latest` 404, met een verkeerde scope 403 — in beide gevallen blijft de melding leeg, met alleen een `WARN` in het containerlog. |
 
 **Een release publiceren**
 

Changelog.md

@@ -1,53 +1,6 @@
 # Changelog
 
-## [1.0.1] - 2026-09-10
+## [Niet vrijgegeven]
-
-### Toegevoegd
-- Kolommen in de tabellen op Eigen Vermogen ("Geïnvesteerde Fiat") en Voortgang
-  zijn versleepbaar: pak de rechterrand van een kolomkop. De breedtes gaan per
-  tabel naar localStorage, dus ze overleven een tabwissel en een herlaad;
-  dubbelklik op de greep zet één kolom terug op zijn standaardbreedte. De logica
-  staat in de nieuwe hook `frontend/src/hooks/useKolomBreedtes.js`, de greep zelf
-  is `.kolom-grip` in `App.css`
-
-### Gewijzigd
-- De `Vibe`-organisatie in Gitea staat op **public**, dus lezen vereist geen
-  token meer: `git clone`, `docker compose pull` en de update-check werken
-  anoniem. `UPDATE_CHECK_TOKEN` in `.env` is daarmee optioneel — de code
-  ondersteunt hem nog als vangnet voor het geval de organisatie weer privé
-  wordt. Schrijven verandert niet: `docker push` en het aanmaken van een release
-  hebben nog steeds het werkstation-token nodig
-- Het tweetoken-model in `BEHEER.md` is teruggebracht tot **één** Gitea-token op
-  het werkstation, met `write:package` en `write:repository`. Het host-token is
-  niet meer nodig (pull en update-check zijn anoniem), `git push` gaat over SSH,
-  en `REGISTRY_TOKEN` hoeft niet apart: `release.ps1` en `dev.ps1` vielen daar al
-  terug op `GITEA_TOKEN`. Geen code-wijziging, alleen minder te beheren
-- De tabellen op Eigen Vermogen en Voortgang staan op `table-layout: fixed`,
-  nodig om ingestelde kolombreedtes te respecteren. Gevolg: lange tekst rekt een
-  kolom niet meer op maar wordt afgekapt met een ellips. De Opmerkingen-cellen
-  hebben een `title`, dus hover geeft de volledige tekst
-- Het label bij een beschikbare update in "Over VibeFinance" is "Nieuwe versie"
-  (was "Nieuwste versie" in 1.0.0)
-
-### Opgelost
-- De sticky kolomkop van die tabellen was in dark mode maar 30% dekkend: hij
-  gebruikte `T.card` (`rgba(22,23,27,0.30)`), waardoor de rijen tijdens het
-  scrollen zichtbaar door de koptekst heen liepen. Nu `T.popupBg`, de
-  ondoorzichtige variant die al in het thema stond
-- In dev bakte Vite de versie uit `frontend/package.json` in in plaats van de
-  versie uit de root `package.json`. `VITE_APP_VERSION` kwam alleen als
-  build-arg mee, maar de `development`-stage in de `Dockerfile` declareert die
-  `ARG` niet — en Vite bakt de constante in bij het *starten* van de dev-server,
-  niet bij het bouwen van het image. De variabele staat nu in de
-  runtime-omgeving van de dev-container; `vite.config.js` valt met `||` (was
-  `??`) terug op `package.json` als hij leeg is
-- API-antwoorden sturen nu `Cache-Control: no-store`. Ze hadden alleen een
-  `ETag` en geen cache-beleid, waardoor de browser zelf mocht bepalen hoe lang
-  hij ze hergebruikte — per browser en profiel verschillend. Gevolg: de
-  update-melding bleef in Brave op een oud antwoord hangen (nog van vóór het
-  werkende token) terwijl een verse Edge het goede kreeg
-
-## [1.0.0] - 2026-09-09
 
 ### Gewijzigd
 - `BEHEER.md` heeft één centrale `## Tokens`-sectie met het tweetoken-model

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-1.0.1-8b5cf6?style=flat)
+![Version](https://img.shields.io/badge/versie-0.1.9-8b5cf6?style=flat)
 ![Built with Claude](https://img.shields.io/badge/Gebouwd_met-Claude.ai-8b5cf6?style=flat&logo=anthropic&logoColor=white)
 
 <img src="docs/screenshot-dashboard.png" alt="VibeFinance dashboard" width="820">
@@ -49,15 +49,10 @@ openssl rand -hex 64
 ```bash
 cp .env.example .env    # en vul de waarden in
 
-docker compose pull && docker compose up -d
+# Het app-image staat in een privé-registry, dus eerst inloggen:
-```
-
-De `Vibe`-organisatie in Gitea is publiek, dus een pull werkt anoniem — geen
-`docker login` nodig. Krijg je toch `401 Unauthorized` of "pull access denied",
-dan staat de organisatie weer op privé:
-
-```bash
 docker login vibehoogie.duckdns.org   # wachtwoord = Gitea-token met read:package
+
+docker compose pull && docker compose up -d
 ```
 
 Navigeer naar `http://<server-ip>:3400` en registreer je account. De **eerste** geregistreerde gebruiker krijgt automatisch de Admin-rol.
@@ -121,8 +116,7 @@ backend/package.json (15 dependencies)
 
 ```powershell
 # token: staat in .env.release, of eenmalig in de shell
-# één Gitea-token met write:package (push) én write:repository (release)
+$env:GITEA_TOKEN = "<token met write:repository>"
-$env:GITEA_TOKEN = "<token met write:package + write:repository>"
 .\release.ps1
 ```
 
@@ -141,10 +135,6 @@ pusht naar de registry, zet de Git-tag en publiceert de Gitea-release.
 | 📈 **Voortgang** | Grafieken en trends van EV en schuld over tijd (apart bij te houden) |
 | 👥 **Gebruikers** | Accounts aanmaken, bewerken en beheren (Admin-rol vereist) |
 
-De kolommen in de tabellen op Eigen vermogen en Voortgang zijn versleepbaar: pak
-de rechterrand van een kolomkop. De breedtes worden per tabel in de browser
-bewaard; dubbelklik op de greep voor de standaardbreedte.
-
 ---
 
 ## 🏗️ Architectuur
@@ -175,7 +165,7 @@ vibefinance/
 │       ├── version.js          # Draaiende versie (__APP_VERSION__ uit de build)
 │       ├── constants/          # Kleuren, tabs, begindata
 │       ├── utils/              # Formatters, helpers
-│       ├── hooks/              # useTheme, useUpdateCheck, useKolomBreedtes
+│       ├── hooks/              # useTheme, useUpdateCheck
 │       ├── context/            # AppContext (global state + API sync)
 │       ├── components/
 │       │   ├── ui/             # Primitieve UI (VCard, DonutChart…)
@@ -269,7 +259,7 @@ Het schema wordt bij het starten van de app aangemaakt/bijgewerkt via
 | `PORT` | `3001` | Poort binnen de container |
 | `STATIC_DIR` | `/app/public` | Map met de frontend-build |
 | `UPDATE_CHECK_URL` | Gitea releases-API | Bron update-melding (leeg = uit) |
-| `UPDATE_CHECK_TOKEN` | — | Optioneel: de Gitea-repo is publiek, dus de check werkt anoniem. Alleen nodig als de organisatie weer privé wordt; scope `read:repository` |
+| `UPDATE_CHECK_TOKEN` | — | Nodig zolang de Gitea-repo privé is; scope `read:repository` |
 
 ---
 
@@ -299,9 +289,8 @@ Het schema wordt bij het starten van de app aangemaakt/bijgewerkt via
 ## 🛠️ Beheer
 
 Zie `BEHEER.md` voor commando's voor lokale ontwikkeling, releases, logs en
-database-toegang — en voor de sectie **Tokens**: waarom één Gitea-token op het
+database-toegang — en voor de sectie **Tokens**: welk Gitea-token op welke
-werkstation genoeg is, welke scopes het nodig heeft, en wat een 401, 403 of 404
+machine hoort, met welke scopes, en wat een 401, 403 of 404 van Gitea betekent.
-van Gitea betekent.
 
 ---
 

backend/src/server.js

@@ -56,17 +56,6 @@ if (config.NODE_ENV !== "test") {
   app.use(pinoHttp({ logger }));
 }
 
-// ── Geen browsercache op de API ───────────────────────────────────────────────
-// Zonder Cache-Control mag de browser zelf bepalen hoe lang hij een antwoord
-// hergebruikt (heuristische caching). Dat verschilt per browser en profiel: de
-// update-melding bleef in de ene browser op een oud antwoord hangen terwijl een
-// verse browser het goede kreeg. API-antwoorden zijn per gebruiker en per moment,
-// dus die horen nooit uit de cache te komen.
-app.use("/api", (_req, res, next) => {
-  res.setHeader("Cache-Control", "no-store");
-  next();
-});
-
 // ── API-routes ────────────────────────────────────────────────────────────────
 app.use("/api/health",       healthRouter);
 app.use("/api/update-check", updateRouter);

backend/test/app.test.js

@@ -68,15 +68,6 @@ describe("API", () => {
     assert.equal(body.latest, null);
     assert.equal(body.disabled, true);
   });
-
-  // Zonder expliciete header bepaalt de browser zelf hoe lang hij een
-  // API-antwoord hergebruikt, en dat verschilt per browser.
-  it("API-antwoorden komen nooit uit de browsercache", async () => {
-    for (const pad of ["/api/health", "/api/update-check", "/api/bestaat-niet"]) {
-      const res = await fetch(`${basis}${pad}`);
-      assert.match(res.headers.get("cache-control") ?? "", /no-store/, pad);
-    }
-  });
 });
 
 describe("Frontend serveren", () => {

docker-compose.dev.yml

@@ -49,11 +49,6 @@ services:
     environment:
       NODE_ENV:     development
       PORT:         3001
-      # Vite bakt de versie in bij het STARTEN van de dev-server, dus die moet
-      # in de runtime-omgeving staan; de build-arg hierboven bereikt alleen de
-      # frontend-build-stage en doet niets voor target: development.
-      # Leeg = vite.config.js valt terug op frontend/package.json.
-      VITE_APP_VERSION: ${VITE_APP_VERSION:-}
       JWT_SECRET:   dev-secret-change-in-production
       JWT_EXPIRES:  7d
       CORS_ORIGIN:  http://localhost

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibefinance-frontend",
-  "version": "1.0.1",
+  "version": "1.0.0",
   "private": true,
   "type": "module",
   "scripts": {

frontend/src/App.css

@@ -26,37 +26,3 @@ input[type="number"]::-webkit-inner-spin-button {
 @keyframes spin {
   to { transform: rotate(360deg); }
 }
-
-/* Sleepvlak op de rechterrand van een tabelkop — zie hooks/useKolomBreedtes.js.
-   Blijft binnen de cel (geen negatieve offset), anders duwt de laatste kolom
-   een horizontale scrollbar tevoorschijn. */
-.kolom-grip {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 6px;
-  height: 100%;
-  cursor: col-resize;
-  user-select: none;
-  touch-action: none;
-}
-
-/* Het streepje erft de kleur van de kop, dus per categorie de accentkleur. */
-.kolom-grip::after {
-  content: "";
-  position: absolute;
-  top: 25%;
-  right: 2px;
-  width: 1px;
-  height: 50%;
-  background: currentColor;
-  opacity: 0.3;
-}
-
-.kolom-grip:hover::after,
-.kolom-grip:active::after {
-  top: 0;
-  height: 100%;
-  width: 2px;
-  opacity: 1;
-}

frontend/src/components/NavBar.jsx

@@ -165,7 +165,7 @@ function OverPopup({ onClose, nieuweVersie, T }) {
 
           {nieuweVersie && (
             <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
-              <span style={{ fontSize: 13, color: T.muted }}>Nieuwe versie</span>
+              <span style={{ fontSize: 13, color: T.muted }}>Nieuwste versie</span>
               <span style={{ fontSize: 12, fontWeight: 700, color: "#f97316", background: "rgba(249,115,22,0.12)", borderRadius: 6, padding: "3px 10px" }}>
                 v{nieuweVersie.latest}
               </span>

frontend/src/hooks/useKolomBreedtes.js

@@ -1,78 +0,0 @@
-import { useRef, useState } from "react";
-import { loadFromStorage, saveToStorage } from "../utils/storage.js";
-
-// Smaller dan dit wordt een kolom onleesbaar; de greep blijft wel pakbaar.
-const MIN_BREEDTE = 60;
-
-/**
- * Versleepbare kolombreedtes voor een tabel.
- *
- * `kolommen` is een array van { id, breedte } in weergave-volgorde, waarbij
- * `breedte` de standaard in pixels is. De aanpassingen van de gebruiker gaan
- * per tabel naar localStorage, zodat ze een tabwissel of herlaad overleven.
- * Kolommen die later verschijnen (een categorie die de gebruiker toevoegt)
- * krijgen hun standaardbreedte; opgeslagen breedtes van verdwenen kolommen
- * blijven ongebruikt staan en storen niets.
- *
- * De tabel moet `tableLayout: "fixed"` krijgen met een <colgroup>, en als
- * `width` de teruggegeven `totaal`. Met `width: "100%"` verdeelt de browser de
- * ruimte namelijk proportioneel en levert slepen niet exact de gesleepte
- * pixels op.
- *
- * Geeft terug:
- *   breedtes  px per kolom-id, standaard plus aanpassing
- *   totaal    som van de breedtes, voor de `width` van de tabel
- *   grip      props voor het sleepvlak in de <th> van die kolom
- *   herstel   alle kolommen terug naar hun standaardbreedte
- */
-export function useKolomBreedtes(opslagKey, kolommen) {
-  const [aangepast, setAangepast] = useState(() => loadFromStorage(opslagKey) ?? {});
-  // Spiegelt `aangepast` zodat het slepen en het opslaan bij het loslaten niet
-  // van de state-updater afhangen (die mag geen bijwerkingen hebben).
-  const laatste = useRef(aangepast);
-  const sleep   = useRef(null);
-
-  const breedtes = {};
-  for (const k of kolommen) breedtes[k.id] = aangepast[k.id] ?? k.breedte;
-  const totaal = kolommen.reduce((som, k) => som + breedtes[k.id], 0);
-
-  const zet = (volgende) => { laatste.current = volgende; setAangepast(volgende); };
-
-  const grip = (id) => ({
-    className: "kolom-grip",
-    role: "separator",
-    title: "Sleep om de kolom breder of smaller te maken — dubbelklik voor de standaardbreedte",
-    onPointerDown: (e) => {
-      // Pointer capture: het slepen loopt door buiten de greep, ook boven de
-      // rijen of naast de tabel, zonder losse listeners op window.
-      e.preventDefault();
-      e.currentTarget.setPointerCapture(e.pointerId);
-      sleep.current = { id, startX: e.clientX, startBreedte: breedtes[id] };
-    },
-    onPointerMove: (e) => {
-      if (!sleep.current) return;
-      const { id: kolomId, startX, startBreedte } = sleep.current;
-      const nieuw = Math.max(MIN_BREEDTE, Math.round(startBreedte + e.clientX - startX));
-      if (laatste.current[kolomId] === nieuw) return;
-      zet({ ...laatste.current, [kolomId]: nieuw });
-    },
-    onPointerUp: () => {
-      if (!sleep.current) return;
-      sleep.current = null;
-      // Pas bij het loslaten opslaan; tijdens het slepen zou elke pixel een
-      // localStorage-write kosten.
-      saveToStorage(opslagKey, laatste.current);
-    },
-    onDoubleClick: () => {
-      // Zonder destructuring-omit: die laat een ongebruikte variabele achter.
-      const rest = { ...laatste.current };
-      delete rest[id];
-      zet(rest);
-      saveToStorage(opslagKey, rest);
-    },
-  });
-
-  const herstel = () => { zet({}); saveToStorage(opslagKey, {}); };
-
-  return { breedtes, totaal, grip, herstel };
-}

frontend/src/pages/EigenVermogenTab.jsx

@@ -1,7 +1,6 @@
 import { useState } from "react";
 import { useApp } from "../context/AppContext.jsx";
 import { fmt, fmtDatum } from "../utils/format.js";
-import { useKolomBreedtes } from "../hooks/useKolomBreedtes.js";
 import { PURPLE, PURPLE_LIGHT, GREEN, RED, CAT_COLORS } from "../constants/index.js";
 import {
   VCard, DonutChart, Overlay, ModalBox, ModalHeader, ModalFooter,
@@ -251,22 +250,8 @@ function EVVoortgangTabel() {
 
   const removeRow = (datum) => setEvRows(evRows.filter((r) => r.datum !== datum));
 
-  // Kolommen in weergave-volgorde, met hun standaardbreedte. De categorieën
+  const th = { padding: "8px 10px", fontSize: 11, color: T.muted, fontWeight: 600, textAlign: "left", whiteSpace: "nowrap", background: T.card, position: "sticky", top: 0, zIndex: 1, borderBottom: `1px solid ${T.border}` };
-  // zijn dynamisch, dus de lijst wordt per render opgebouwd.
+  const td = { padding: "7px 10px", fontSize: 12, color: T.text, borderBottom: `1px solid ${T.border}` };
-  const kolommen = [
-    { id: "datum",       breedte: 100 },
-    ...cats.map((c) => ({ id: c.id, breedte: 100 })),
-    { id: "nettoWaarde", breedte: 115 },
-    { id: "verschil",    breedte: 105 },
-    { id: "opmerkingen", breedte: 150 },
-    ...(!locked ? [{ id: "acties", breedte: 75 }] : []),
-  ];
-  const { breedtes, totaal, grip } = useKolomBreedtes("ev_kolom_breedtes", kolommen);
-
-  // overflow/ellipsis horen bij tableLayout "fixed": de inhoud rekt de kolom
-  // niet meer op, dus zonder afkappen loopt lange tekst de buurcel binnen.
-  const th = { padding: "8px 10px", fontSize: 11, color: T.muted, fontWeight: 600, textAlign: "left", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", background: T.popupBg, position: "sticky", top: 0, zIndex: 1, borderBottom: `1px solid ${T.border}` };
-  const td = { padding: "7px 10px", fontSize: 12, color: T.text, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", borderBottom: `1px solid ${T.border}` };
 
   return (
     <div>
@@ -341,22 +326,15 @@ function EVVoortgangTabel() {
       {evRows.length > 0 ? (
         <div style={{ overflowX: "auto" }}>
           <div style={{ maxHeight: 340, overflowY: "auto" }}>
-            <table style={{ width: totaal, borderCollapse: "collapse", tableLayout: "fixed" }}>
+            <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 600 }}>
-              <colgroup>
-                {kolommen.map((k) => <col key={k.id} style={{ width: breedtes[k.id] }} />)}
-              </colgroup>
               <thead>
                 <tr>
-                  <th style={th}>Datum<span {...grip("datum")} /></th>
+                  <th style={th}>Datum</th>
-                  {cats.map((c) => (
+                  {cats.map((c) => <th key={c.id} style={{ ...th, color: c.color }}>{c.naam}</th>)}
-                    <th key={c.id} style={{ ...th, color: c.color }}>
+                  <th style={th}>Netto Waarde</th>
-                      {c.naam}<span {...grip(c.id)} />
+                  <th style={th}>Verschil</th>
-                    </th>
+                  <th style={th}>Opmerkingen</th>
-                  ))}
+                  {!locked && <th style={th}></th>}
-                  <th style={th}>Netto Waarde<span {...grip("nettoWaarde")} /></th>
-                  <th style={th}>Verschil<span {...grip("verschil")} /></th>
-                  <th style={th}>Opmerkingen<span {...grip("opmerkingen")} /></th>
-                  {!locked && <th style={th}><span {...grip("acties")} /></th>}
                 </tr>
               </thead>
               <tbody>
@@ -371,8 +349,7 @@ function EVVoortgangTabel() {
                       {cats.map((c) => <td key={c.id} style={{ ...td, color: c.color }}>{fmt(row[c.id] || 0)}</td>)}
                       <td style={{ ...td, fontWeight: 700, color: PURPLE_LIGHT }}>{fmt(row.nettoWaarde || 0)}</td>
                       <td style={{ ...td, fontWeight: 700, color: vColor }}>{vLabel}</td>
-                      {/* title: bij een smalle kolom is de tekst afgekapt */}
+                      <td style={{ ...td, color: T.muted }}>{row.opmerkingen || "—"}</td>
-                      <td style={{ ...td, color: T.muted }} title={row.opmerkingen || ""}>{row.opmerkingen || "—"}</td>
                       {!locked && (
                         <td style={td}>
                           <div style={{ display: "flex", gap: 6 }}>

frontend/src/pages/VoortgangTab.jsx

@@ -1,7 +1,6 @@
 import { useState } from "react";
 import { useApp } from "../context/AppContext.jsx";
 import { fmt, fmtDatum } from "../utils/format.js";
-import { useKolomBreedtes } from "../hooks/useKolomBreedtes.js";
 import { PURPLE, PURPLE_LIGHT, RED, GREEN } from "../constants/index.js";
 import { VCard, DonutChart, Overlay, ModalBox, ModalHeader, ModalFooter } from "../components/ui/index.jsx";
 
@@ -262,21 +261,8 @@ export default function VoortgangTab() {
     setData({ ...data, schuld: { ...schuld, schuldHistory: schuldHistory.filter((s) => s.datum !== datum) } });
   };
 
-  // Kolommen in weergave-volgorde, met hun standaardbreedte.
+  const th = { padding: "8px 10px", fontSize: 11, color: T.muted, fontWeight: 600, textAlign: "left", whiteSpace: "nowrap", background: T.card, position: "sticky", top: 0, zIndex: 1, borderBottom: `1px solid ${T.border}` };
-  const kolommen = [
+  const td = { padding: "7px 10px", fontSize: 12, color: T.text, borderBottom: `1px solid ${T.border}` };
-    { id: "datum",       breedte: 120 },
-    { id: "ev",          breedte: 175 },
-    { id: "schuld",      breedte: 160 },
-    { id: "netto",       breedte: 175 },
-    { id: "opmerkingen", breedte: 340 },
-    ...(!locked ? [{ id: "acties", breedte: 90 }] : []),
-  ];
-  const { breedtes, totaal, grip } = useKolomBreedtes("voortgang_kolom_breedtes", kolommen);
-
-  // overflow/ellipsis horen bij tableLayout "fixed": de inhoud rekt de kolom
-  // niet meer op, dus zonder afkappen loopt lange tekst de buurcel binnen.
-  const th = { padding: "8px 10px", fontSize: 11, color: T.muted, fontWeight: 600, textAlign: "left", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", background: T.popupBg, position: "sticky", top: 0, zIndex: 1, borderBottom: `1px solid ${T.border}` };
-  const td = { padding: "7px 10px", fontSize: 12, color: T.text, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", borderBottom: `1px solid ${T.border}` };
 
   return (
     <div>
@@ -410,18 +396,15 @@ export default function VoortgangTab() {
         )}
         {voortgangRows.length > 0 ? (
           <div style={{ overflowX: "auto" }}>
-            <table style={{ width: totaal, borderCollapse: "collapse", tableLayout: "fixed" }}>
+            <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 560 }}>
-              <colgroup>
-                {kolommen.map((k) => <col key={k.id} style={{ width: breedtes[k.id] }} />)}
-              </colgroup>
               <thead>
                 <tr>
-                  <th style={th}>Datum<span {...grip("datum")} /></th>
+                  <th style={th}>Datum</th>
-                  <th style={{ ...th, color: GREEN }}>Eigen Vermogen<span {...grip("ev")} /></th>
+                  <th style={{ ...th, color: GREEN }}>Eigen Vermogen</th>
-                  <th style={{ ...th, color: RED }}>Schuld<span {...grip("schuld")} /></th>
+                  <th style={{ ...th, color: RED }}>Schuld</th>
-                  <th style={{ ...th, color: PURPLE_LIGHT }}>Nettowaarde<span {...grip("netto")} /></th>
+                  <th style={{ ...th, color: PURPLE_LIGHT }}>Nettowaarde</th>
-                  <th style={th}>Opmerkingen<span {...grip("opmerkingen")} /></th>
+                  <th style={th}>Opmerkingen</th>
-                  {!locked && <th style={th}><span {...grip("acties")} /></th>}
+                  {!locked && <th style={th}></th>}
                 </tr>
               </thead>
               <tbody>
@@ -431,8 +414,7 @@ export default function VoortgangTab() {
                     <td style={{ ...td, color: GREEN, fontWeight: 600 }}>{row.ev !== null ? fmt(row.ev) : "—"}</td>
                     <td style={{ ...td, color: RED, fontWeight: 600 }}>{row.schuld !== null ? fmt(row.schuld) : "—"}</td>
                     <td style={{ ...td, fontWeight: 700, color: row.netto !== null ? (row.netto >= 0 ? GREEN : RED) : T.muted }}>{row.netto !== null ? fmt(row.netto) : "—"}</td>
-                    {/* title: bij een smalle kolom is de tekst afgekapt */}
+                    <td style={{ ...td, color: T.muted }}>{row.opmerkingen || "—"}</td>
-                    <td style={{ ...td, color: T.muted }} title={row.opmerkingen || ""}>{row.opmerkingen || "—"}</td>
                     {!locked && (
                       <td style={{ ...td, whiteSpace: "nowrap" }}>
                         <button onClick={() => setEditRow(row)} style={{ padding: "2px 8px", background: `${PURPLE}22`, border: `1px solid ${PURPLE}44`, borderRadius: 6, color: PURPLE_LIGHT, cursor: "pointer", fontSize: 12, marginRight: 4 }}>✏️</button>

frontend/vite.config.js

@@ -41,6 +41,6 @@ export default defineConfig({
   define: {
     // VITE_API_URL wordt ingebakken tijdens build
     __API_URL__: JSON.stringify(process.env.VITE_API_URL ?? "/api"),
-    __APP_VERSION__: JSON.stringify(process.env.VITE_APP_VERSION || pkg.version),
+    __APP_VERSION__: JSON.stringify(process.env.VITE_APP_VERSION ?? pkg.version),
   },
 });

package.json

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