From e269a155da031cb34423c747e99d892deeb0077a Mon Sep 17 00:00:00 2001 From: Madhura68 Date: Sun, 19 Apr 2026 02:36:11 +0200 Subject: [PATCH] Implement ST-305 budget warning feedback --- README.md | 5 +-- components/planning/activity-form.tsx | 11 +++++++ components/planning/energy-meter-card.tsx | 36 ++++++++++++++++++--- docs/README.md | 2 +- docs/backlog/inspannings-monitor-backlog.md | 4 +-- 5 files changed, 49 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 3e29c54..9d63efe 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,7 @@ product, niet als medisch hulpmiddel. Release 1 blijft smal: - planningsfundering met activiteitenmodel, categorieën en skip-redenen in Supabase - planningpagina voor vandaag met activiteit toevoegen en directe lijstweergave - energiemeter met lopend totaal ten opzichte van het dagbudget +- niet-blokkerende waarschuwing bij budgetoverschrijding in planning en dashboard - eerste unit tests voor budget- en meterlogica via `Vitest` - korte onboardingflow voor eerste voorkeuren - instellingen voor taal, timezone, reminders en zichtbaarheid van energiepunten @@ -114,6 +115,6 @@ zichtbaar als `NEXT_PUBLIC_ENABLE_TEST_WIZARD=true` staat. ## Eerstvolgende bouwstappen 1. `ST-303` Autocomplete op eerdere activiteiten toevoegen -2. `ST-305` Overschrijdingswaarschuwing toevoegen -3. `ST-401` Evaluatie- en dagoverzichtslus bouwen +2. `ST-401` Evaluatie- en dagoverzichtslus bouwen +3. `ST-404` Dagoverzicht bouwen 4. `ST-105` RLS-policy tests en hardening afronden diff --git a/components/planning/activity-form.tsx b/components/planning/activity-form.tsx index 8faac94..37224d1 100644 --- a/components/planning/activity-form.tsx +++ b/components/planning/activity-form.tsx @@ -2,6 +2,7 @@ import { useActionState, useMemo, useState } from "react"; import { createActivityAction } from "@/app/planning/actions"; +import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { Button, buttonVariants } from "@/components/ui/button"; import { Card, @@ -199,6 +200,16 @@ export function ActivityForm({ categories, activities, dailyBudget }: ActivityFo {previewMeter.remainingBudget} punten ruimte.

) : null} + {previewMeter?.isOverBudget ? ( + + Niet-blokkerende waarschuwing + + Met deze activiteit kom je ongeveer{" "} + {Math.abs(previewMeter.remainingBudget ?? 0)} punten boven je dagbudget uit. + Je kunt nog steeds opslaan, maar dit is een goed moment om bewust te heroverwegen of te versimpelen. + + + ) : null} diff --git a/components/planning/energy-meter-card.tsx b/components/planning/energy-meter-card.tsx index 0cc0edc..1f68626 100644 --- a/components/planning/energy-meter-card.tsx +++ b/components/planning/energy-meter-card.tsx @@ -1,3 +1,8 @@ +import { + Alert, + AlertDescription, + AlertTitle, +} from "@/components/ui/alert"; import { Card, CardContent, @@ -25,6 +30,18 @@ function formatRemainingLabel(remainingBudget: number) { return `${Math.abs(remainingBudget)} punten erboven`; } +function getMeterDescription(meter: PlanningMeterSnapshot) { + if (meter.dailyBudget === null) { + return "Er is nog geen dagbudget beschikbaar. De meter wordt actief zodra je ochtendcheck-in van vandaag er staat."; + } + + if (meter.isOverBudget) { + return "Je planning zit boven je dagbudget. Dat is een signaal om eventueel iets te verschuiven of lichter te maken, niet om te blokkeren."; + } + + return "De meter blijft bewust eenvoudig: punten volgen uit duur en impact van je activiteiten."; +} + export function EnergyMeterCard({ meter, tone = "default", @@ -48,15 +65,16 @@ export function EnergyMeterCard({ - {meter.dailyBudget === null - ? "Er is nog geen dagbudget beschikbaar. De meter wordt actief zodra je ochtendcheck-in van vandaag er staat." - : "De meter blijft bewust eenvoudig: punten volgen uit duur en impact van je activiteiten."} + {getMeterDescription(meter)}
@@ -72,6 +90,16 @@ export function EnergyMeterCard({ ) : null}
+ + {meter.dailyBudget !== null && meter.isOverBudget ? ( + + Je zit boven je dagbudget + + Je planning komt nu {Math.abs(meter.remainingBudget ?? 0)} punten boven het dagbudget uit. + Je kunt nog steeds doorgaan, maar dit is een goed moment om iets te schrappen, te verkorten of later te doen. + + + ) : null} ); diff --git a/docs/README.md b/docs/README.md index 5686559..816379e 100644 --- a/docs/README.md +++ b/docs/README.md @@ -40,7 +40,7 @@ Deze map bevat de vernieuwde documentatie voor de gekozen `wellness/self-managem - Ochtendcheck-in slaat nu energiescore en slaapkwaliteit per dag op - Dagbudget v1 is bewust eenvoudig: `daily_budget = energy_score` - Energieniveau en budget worden al direct getoond in check-in en dashboard -- `ST-301`, `ST-302` en `ST-304` leggen nu ook het activiteitenmodel en de eerste dagplanningflow vast +- `ST-301`, `ST-302`, `ST-304` en `ST-305` leggen nu ook het activiteitenmodel en de eerste dagplanningflow vast - Eerste unit tests voor budget- en meterlogica draaien via `Vitest` ## Generator diff --git a/docs/backlog/inspannings-monitor-backlog.md b/docs/backlog/inspannings-monitor-backlog.md index fc3c40a..34a704e 100644 --- a/docs/backlog/inspannings-monitor-backlog.md +++ b/docs/backlog/inspannings-monitor-backlog.md @@ -78,7 +78,7 @@ Status: `ST-201`, `ST-202`, `ST-203`, `ST-204` en `ST-205` zijn inmiddels gereal Doel: de gebruiker kan activiteiten voor de dag plannen binnen een eenvoudig energiemodel. -Status: `ST-301`, `ST-302` en `ST-304` zijn inmiddels gerealiseerd in de app. De volgende logische stap ligt nu in `ST-303` en `ST-305`. +Status: `ST-301`, `ST-302`, `ST-304` en `ST-305` zijn inmiddels gerealiseerd in de app. De volgende logische stap ligt nu in `ST-303` en `EPIC-05`. | Story ID | Titel | Type | Definition of done | | --- | --- | --- | --- | @@ -86,7 +86,7 @@ Status: `ST-301`, `ST-302` en `ST-304` zijn inmiddels gerealiseerd in de app. De | ST-302 | Planningformulier bouwen | UI | Afgerond: activiteit kan met naam, categorie, duur, impact en prioriteit worden aangemaakt | | ST-303 | Autocomplete op eerdere activiteiten toevoegen | UX | Veelgebruikte activiteiten zijn snel opnieuw te kiezen | | ST-304 | EnergyMeter en lopend totaal implementeren | Logic/UI | Afgerond: totaal update direct na elke wijziging | -| ST-305 | Overschrijdingswaarschuwing toevoegen | UX | Gebruiker krijgt feedback maar behoudt regie | +| ST-305 | Overschrijdingswaarschuwing toevoegen | UX | Afgerond: gebruiker krijgt feedback maar behoudt regie | ## EPIC-05 Evaluatie en dagoverzicht