Add ASP.NET Core backend hosting business rules; FE consumes via typed client

Move the authoritative business rules off the frontend into a real backend,
realising the BFF-lite + decision-DTO design (ADR-0001) that until now lived
only in static mock JSON.

Backend (backend/):
- ASP.NET Core (.NET 10) minimal API, contract-first, Swagger UI at /swagger.
- DDD Domain/ rules layer: profession derivation + applicable policy questions
  (DiplomaRules), herregistratie eligibility + reason (HerregistratieRule),
  scholing threshold (IntakePolicy), submit rejections + reference generation
  (SubmissionRules). In-memory seeded data, ProblemDetails (RFC 7807) errors.
- 27 xUnit tests: rule units + endpoint integration incl. BRP no-address and
  DUO not-found fallbacks and 422 submit paths.

Frontend (only infrastructure/ + contracts/ change, as the architecture promised):
- NSwag-generated typed client (api-client.ts), routed through Angular HttpClient
  via a small fetch adapter so the ?scenario= interceptor still applies.
- GET adapters use resource({ loader: client.x }); submit commands call the client
  and map ProblemDetails -> err. The hardcoded uren==0 / manual-diploma rules are
  deleted (now server-side). Domain, stores, UI and format validators unchanged.
- Deleted the now-dead public/mock/*.json.

Tooling/docs:
- npm start proxies /api -> backend; npm run gen:api regenerates the client;
  docker compose up runs both (bind mounts use :z for SELinux/Fedora).
- backend/README.md walkthrough: adding a policy question is a one-file backend
  change, no FE change, no client regen. Updated CLAUDE.md + ARCHITECTURE.md.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/herregistratie/ui/herregistratie-wizard/herregistratie-wizard.component.ts

@@ -2,13 +2,13 @@ import { Component, computed, inject, input } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { FormFieldComponent } from '@shared/ui/form-field/form-field.component';
 import { TextInputComponent } from '@shared/ui/text-input/text-input.component';
-import { ButtonComponent } from '@shared/ui/button/button.component';
 import { AlertComponent } from '@shared/ui/alert/alert.component';
-import { SpinnerComponent } from '@shared/ui/spinner/spinner.component';
+import { WizardShellComponent, WizardError, WizardStatus } from '@shared/layout/wizard-shell/wizard-shell.component';
 import { createStore } from '@shared/application/store';
 import { BigProfileStore } from '@registratie/application/big-profile.store';
 import { WizardState, WizardMsg, Draft, initial, reduce } from '@herregistratie/domain/herregistratie.machine';
 import { submitHerregistratie } from '@herregistratie/application/submit-herregistratie';
+import { ApiClient } from '@shared/infrastructure/api-client';
 
 /** Organism: multi-step herregistratie wizard. ALL state lives in one signal
     driven by the pure `reduce` function (see herregistratie.machine.ts) via an
@@ -18,55 +18,47 @@ import { submitHerregistratie } from '@herregistratie/application/submit-herregi
     the dashboard shows "in behandeling" immediately. */
 @Component({
   selector: 'app-herregistratie-wizard',
-  imports: [FormsModule, FormFieldComponent, TextInputComponent, ButtonComponent, AlertComponent, SpinnerComponent],
+  imports: [FormsModule, FormFieldComponent, TextInputComponent, AlertComponent, WizardShellComponent],
   template: `
-    @switch (state().tag) {
-      @case ('Editing') {
-        <p class="rhc-paragraph" style="color:var(--rhc-color-grijs-700)">Stap {{ step() }} van 2</p>
-        <form (ngSubmit)="onPrimary()" style="max-width:28rem">
-          @if (step() === 1) {
-            <app-form-field label="Gewerkte uren (afgelopen 5 jaar)" fieldId="uren" [error]="errUren()">
-              <app-text-input inputId="uren" [ngModel]="draft().uren" (ngModelChange)="dispatch({ tag: 'SetField', key: 'uren', value: $event })"
-                name="uren" [invalid]="!!errUren()" placeholder="bijv. 4160" />
-            </app-form-field>
-            <app-form-field label="Aantal jaren werkzaam" fieldId="jaren" [error]="errJaren()">
-              <app-text-input inputId="jaren" [ngModel]="draft().jaren" (ngModelChange)="dispatch({ tag: 'SetField', key: 'jaren', value: $event })"
-                name="jaren" [invalid]="!!errJaren()" placeholder="bijv. 5" />
-            </app-form-field>
-            <div style="display:flex;gap:0.5rem">
-              <app-button type="submit" variant="primary">Volgende</app-button>
-              <app-button type="button" variant="subtle" (click)="restart()">Annuleren</app-button>
-            </div>
-          } @else {
-            <app-form-field label="Behaalde nascholingspunten" fieldId="punten" [error]="errPunten()">
-              <app-text-input inputId="punten" [ngModel]="draft().punten" (ngModelChange)="dispatch({ tag: 'SetField', key: 'punten', value: $event })"
-                name="punten" [invalid]="!!errPunten()" placeholder="bijv. 200" />
-            </app-form-field>
-            <div style="display:flex;gap:0.5rem">
-              <app-button type="button" variant="secondary" (click)="dispatch({ tag: 'Back' })">Vorige</app-button>
-              <app-button type="submit" variant="primary">Herregistratie aanvragen</app-button>
-              <app-button type="button" variant="subtle" (click)="restart()">Annuleren</app-button>
-            </div>
-          }
-        </form>
+    <app-wizard-shell
+      [steps]="stepLabels"
+      [current]="step() - 1"
+      [stepTitle]="stepTitle()"
+      [status]="shellStatus()"
+      [primaryLabel]="primaryLabel()"
+      [canGoBack]="step() === 2"
+      [errors]="errorList()"
+      [errorMessage]="errorMessage()"
+      (primary)="onPrimary()"
+      (back)="dispatch({ tag: 'Back' })"
+      (cancel)="restart()"
+      (retry)="onRetry()">
+
+      @if (step() === 1) {
+        <app-form-field label="Gewerkte uren (afgelopen 5 jaar)" fieldId="uren" [error]="errUren()">
+          <app-text-input inputId="uren" [ngModel]="draft().uren" (ngModelChange)="dispatch({ tag: 'SetField', key: 'uren', value: $event })"
+            name="uren" [invalid]="!!errUren()" placeholder="bijv. 4160" />
+        </app-form-field>
+        <app-form-field label="Aantal jaren werkzaam" fieldId="jaren" [error]="errJaren()">
+          <app-text-input inputId="jaren" [ngModel]="draft().jaren" (ngModelChange)="dispatch({ tag: 'SetField', key: 'jaren', value: $event })"
+            name="jaren" [invalid]="!!errJaren()" placeholder="bijv. 5" />
+        </app-form-field>
+      } @else {
+        <app-form-field label="Behaalde nascholingspunten" fieldId="punten" [error]="errPunten()">
+          <app-text-input inputId="punten" [ngModel]="draft().punten" (ngModelChange)="dispatch({ tag: 'SetField', key: 'punten', value: $event })"
+            name="punten" [invalid]="!!errPunten()" placeholder="bijv. 200" />
+        </app-form-field>
       }
-      @case ('Submitting') {
-        <app-spinner /> <span>Aanvraag wordt verwerkt…</span>
-      }
-      @case ('Submitted') {
+
+      <div wizardSuccess>
         <app-alert type="ok">Uw aanvraag tot herregistratie is ontvangen.</app-alert>
-      }
-      @case ('Failed') {
-        <app-alert type="error">Indienen mislukt: {{ failedError() }}</app-alert>
-        <div style="margin-top:1rem">
-          <app-button variant="secondary" (click)="onRetry()">Opnieuw proberen</app-button>
-        </div>
-      }
-    }
+      </div>
+    </app-wizard-shell>
   `,
 })
 export class HerregistratieWizardComponent {
   private profile = inject(BigProfileStore);
+  private apiClient = inject(ApiClient);
   private store = createStore<WizardState, WizardMsg>(initial, reduce);
 
   /** Optional seed so Storybook / the showcase can mount any state directly. */
@@ -75,6 +67,10 @@ export class HerregistratieWizardComponent {
   readonly state = this.store.model; // public so the showcase can highlight the live state
   protected dispatch = this.store.dispatch;
 
+  // Stepper labels + per-step heading titles (presentational only).
+  readonly stepLabels = ['Werkervaring', 'Nascholing'];
+  private stepTitles = ['Werkervaring (afgelopen 5 jaar)', 'Nascholing'];
+
   private editing = computed(() => (this.state().tag === 'Editing' ? (this.state() as Extract<WizardState, { tag: 'Editing' }>) : null));
   protected step = computed(() => this.editing()?.step ?? 1);
   protected draft = computed<Draft>(() => this.editing()?.draft ?? { uren: '', jaren: '', punten: '' });
@@ -83,6 +79,26 @@ export class HerregistratieWizardComponent {
   protected errPunten = computed(() => this.editing()?.errors.punten ?? '');
   protected failedError = computed(() => (this.state().tag === 'Failed' ? (this.state() as Extract<WizardState, { tag: 'Failed' }>).error : ''));
 
+  // --- Presentational wiring for the shared wizard shell ---------------------
+  protected stepTitle = computed(() => this.stepTitles[this.step() - 1]);
+  protected primaryLabel = computed(() => (this.step() === 1 ? 'Volgende' : 'Herregistratie aanvragen'));
+  protected errorMessage = computed(() => `Indienen mislukt: ${this.failedError()}`);
+  protected shellStatus = computed<WizardStatus>(() => {
+    switch (this.state().tag) {
+      case 'Editing': return 'editing';
+      case 'Submitting': return 'submitting';
+      case 'Submitted': return 'submitted';
+      case 'Failed': return 'failed';
+    }
+  });
+  /** Current step's field errors, flattened for the shell's error summary. */
+  protected errorList = computed<WizardError[]>(() => {
+    const e = this.editing()?.errors ?? {};
+    return (Object.keys(e) as (keyof typeof e)[])
+      .filter((k) => e[k])
+      .map((k) => ({ id: k, message: e[k]! }));
+  });
+
   constructor() {
     queueMicrotask(() => this.dispatch({ tag: 'Seed', state: this.seed() }));
   }
@@ -110,7 +126,7 @@ export class HerregistratieWizardComponent {
     const s = this.state();
     if (s.tag !== 'Submitting') return;
     this.profile.beginHerregistratie();
-    const r = await submitHerregistratie(s.data);
+    const r = await submitHerregistratie(this.apiClient, s.data);
     if (r.ok) {
       this.dispatch({ tag: 'SubmitConfirmed' });
       this.profile.confirmHerregistratie();