feat(registratie): WP-36 — admin cases page + admin delete

Admin-only overview of all cases across owners + an admin delete, gated by a new
`cases:manage` capability (Authz role→cap + CanManageCases + CasesAdmin gate;
FE capability + guard + nav + role.interceptor prefix — the org-template/stamdata
recipe). Backend adds ApplicationStore.ListAll()/DeleteAny() and GET /admin/cases +
DELETE /admin/cases/{id}; admin delete removes ANY case incl. submitted. Page lives
in registratie/ui (owns the Aanvraag aggregate; reuses aanvraag-view + parse),
routed /beheer/zaken; delete guarded by a native confirm, optimistic with rollback.
Typed client regenerated (documents the new endpoints + owner field).

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

src/app/registratie/application/admin-cases.store.spec.ts

@@ -0,0 +1,55 @@
+import { TestBed } from '@angular/core/testing';
+import { describe, it, expect, vi } from 'vitest';
+import { ApplicationsAdapter } from '@registratie/infrastructure/applications.adapter';
+import { AdminCasesStore } from './admin-cases.store';
+
+const summary = (id: string) => ({
+  id,
+  type: 'registratie',
+  status: { tag: 'Concept', stepIndex: 0, stepCount: 3 },
+  documentIds: [],
+  createdAt: '2026-07-23T10:00:00Z',
+  updatedAt: '2026-07-23T10:00:00Z',
+  owner: '19012345601',
+});
+
+function setup(adapter: Partial<ApplicationsAdapter>): AdminCasesStore {
+  TestBed.configureTestingModule({
+    providers: [{ provide: ApplicationsAdapter, useValue: adapter }],
+  });
+  return TestBed.inject(AdminCasesStore);
+}
+
+describe('AdminCasesStore', () => {
+  it('loads and parses the cross-owner list', async () => {
+    const store = setup({ listAll: () => Promise.resolve([summary('a'), summary('b')]) });
+    await store.load();
+    const s = store.cases();
+    expect(s.tag).toBe('Success');
+    expect(s.tag === 'Success' && s.value.map((c) => c.id)).toEqual(['a', 'b']);
+  });
+
+  it('deletes optimistically and confirms via the admin endpoint', async () => {
+    const deleteAny = vi.fn().mockResolvedValue(undefined);
+    const store = setup({
+      listAll: () => Promise.resolve([summary('a'), summary('b')]),
+      deleteAny,
+    });
+    await store.load();
+
+    await store.delete('a');
+    expect(deleteAny).toHaveBeenCalledWith('a');
+    const s = store.cases();
+    expect(s.tag === 'Success' && s.value.map((c) => c.id)).toEqual(['b']);
+  });
+
+  it('rolls back the removal when the delete fails', async () => {
+    const deleteAny = vi.fn().mockRejectedValue(new Error('boom'));
+    const store = setup({ listAll: () => Promise.resolve([summary('a')]), deleteAny });
+    await store.load();
+
+    await store.delete('a');
+    const s = store.cases();
+    expect(s.tag === 'Success' && s.value.map((c) => c.id)).toEqual(['a']); // reappears
+  });
+});

src/app/registratie/application/admin-cases.store.ts

@@ -0,0 +1,57 @@
+import { Injectable, inject, signal } from '@angular/core';
+import { RemoteData } from '@shared/application/remote-data';
+import { Aanvraag } from '@registratie/domain/aanvraag';
+import {
+  ApplicationsAdapter,
+  parseApplications,
+} from '@registratie/infrastructure/applications.adapter';
+
+type Err = Error | undefined;
+
+/**
+ * Admin view of ALL cases across owners (WP-36; `cases:manage`) — the back-office
+ * counterpart of the user-facing `ApplicationsStore`. Same shape: one root singleton
+ * owns the list as a writable RemoteData signal, delete removes the row synchronously
+ * (optimistic) and rolls back on error. Admin delete removes any case (any owner,
+ * submitted or not — the server enforces the capability).
+ */
+@Injectable({ providedIn: 'root' })
+export class AdminCasesStore {
+  private adapter = inject(ApplicationsAdapter);
+
+  private state = signal<RemoteData<Err, Aanvraag[]>>({ tag: 'Loading' });
+  readonly cases = this.state.asReadonly();
+
+  /** Fetch + parse at the trust boundary, then publish as RemoteData. Keeps the
+      last-good value on a resync (only shows Loading on the first load). */
+  async load() {
+    if (this.state().tag !== 'Success') this.state.set({ tag: 'Loading' });
+    try {
+      const parsed = parseApplications(await this.adapter.listAll());
+      this.state.set(
+        parsed.ok
+          ? { tag: 'Success', value: parsed.value }
+          : { tag: 'Failure', error: new Error(parsed.error) },
+      );
+    } catch (e) {
+      this.state.set({ tag: 'Failure', error: e as Error });
+    }
+  }
+
+  reload() {
+    void this.load();
+  }
+
+  /** Delete a case: drop it now (synchronous), then confirm the DELETE; roll back on error. */
+  async delete(id: string) {
+    const before = this.state();
+    if (before.tag === 'Success') {
+      this.state.set({ tag: 'Success', value: before.value.filter((a) => a.id !== id) });
+    }
+    try {
+      await this.adapter.deleteAny(id);
+    } catch {
+      this.state.set(before); // roll back: the row reappears
+    }
+  }
+}

src/app/registratie/domain/aanvraag.ts

@@ -24,6 +24,9 @@ export interface Aanvraag {
   createdAt: string;
   updatedAt: string;
   submittedAt?: string;
+  /** The case owner (a BSN). Only populated by the admin cross-owner list (WP-36);
+      the user's own list leaves it undefined. */
+  owner?: string;
 }
 
 /** Detail adds the opaque wizard snapshot used to resume a Concept. */

src/app/registratie/infrastructure/applications.adapter.ts

@@ -32,6 +32,16 @@ export class ApplicationsAdapter {
     return this.client.applicationsAll();
   }
 
+  /** Admin: every case across all owners (WP-36; `cases:manage`). Parsed at the boundary. */
+  listAll(): Promise<ApplicationSummaryDto[]> {
+    return this.client.casesAll();
+  }
+
+  /** Admin: delete ANY case (any owner, submitted or not — WP-36). */
+  deleteAny(id: string): Promise<void> {
+    return this.client.cases(id);
+  }
+
   detail(id: string): Promise<ApplicationDetailDto> {
     return this.client.applicationsGET(id);
   }
@@ -100,6 +110,7 @@ function parseCommon(dto: ApplicationSummaryDto): Result<string, Aanvraag> {
     createdAt: dto.createdAt,
     updatedAt: dto.updatedAt,
     submittedAt: dto.submittedAt,
+    owner: dto.owner, // only present on the admin cross-owner list (WP-36)
   });
 }
 

src/app/registratie/ui/admin-cases.page.ts

@@ -0,0 +1,129 @@
+import { Component, computed, effect, inject } from '@angular/core';
+import { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';
+import { AlertComponent } from '@shared/ui/alert/alert.component';
+import { ButtonComponent } from '@shared/ui/button/button.component';
+import { DataBlockComponent } from '@shared/ui/data-block/data-block.component';
+import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
+import { ASYNC } from '@shared/ui/async/async.component';
+import { AccessStore } from '@shared/application/access.store';
+import { formatDatumNl } from '@shared/kernel/datum';
+import { Aanvraag } from '@registratie/domain/aanvraag';
+import { TYPE_LABELS, statusLabel, referentie } from '@registratie/domain/aanvraag-view';
+import { AdminCasesStore } from '@registratie/application/admin-cases.store';
+
+/**
+ * Admin page: every case across all owners, with an admin delete (WP-36). Lives in
+ * `registratie` (which owns the Aanvraag aggregate) — the back-office counterpart of the
+ * user's dashboard, reusing the same view labels + trust-boundary parse. Deny-by-default
+ * capability gate (`cases:manage`): a denial alert for non-admins, the list for admins.
+ * Delete is guarded by a native confirm — it is irreversible and may remove submitted cases.
+ */
+@Component({
+  selector: 'app-admin-cases-page',
+  imports: [
+    PageShellComponent,
+    AlertComponent,
+    ButtonComponent,
+    DataBlockComponent,
+    DataRowComponent,
+    ...ASYNC,
+  ],
+  styles: [
+    `
+      .case {
+        margin-block-end: var(--rhc-space-max-lg);
+      }
+    `,
+  ],
+  template: `
+    <app-page-shell [heading]="heading" [intro]="intro" backLink="/dashboard">
+      @if (!access.ready()) {
+        <!-- wait for /me before deciding — avoids flashing the denial to an admin -->
+      } @else if (!canManage()) {
+        <app-alert type="error">{{ deniedText }}</app-alert>
+      } @else {
+        <app-async [data]="store.cases()">
+          <ng-template appAsyncError>
+            <app-alert type="error">{{ failedText }}</app-alert>
+            <app-button variant="secondary" (click)="reload()">{{ retryText }}</app-button>
+          </ng-template>
+          <ng-template appAsyncLoaded>
+            @if (cases().length === 0) {
+              <app-alert type="info">{{ emptyText }}</app-alert>
+            } @else {
+              @for (c of cases(); track c.id) {
+                <div class="case">
+                  <app-data-block [heading]="typeLabel(c)" [level]="2">
+                    @for (row of rows(c); track row.key) {
+                      <div app-data-row [key]="row.key" [value]="row.value"></div>
+                    }
+                  </app-data-block>
+                  <app-button variant="secondary" (click)="confirmDelete(c)">{{
+                    deleteText
+                  }}</app-button>
+                </div>
+              }
+            }
+          </ng-template>
+        </app-async>
+      }
+    </app-page-shell>
+  `,
+})
+export class AdminCasesPage {
+  protected store = inject(AdminCasesStore);
+  protected access = inject(AccessStore);
+
+  protected canManage = computed(() => this.access.can('cases:manage'));
+  protected cases = computed(() => {
+    const rd = this.store.cases();
+    return rd.tag === 'Success' ? rd.value : [];
+  });
+
+  protected heading = $localize`:@@adminCases.heading:Aanvragen beheren`;
+  protected intro = $localize`:@@adminCases.intro:Alle aanvragen in het register. Een aanvraag verwijderen kan niet ongedaan worden gemaakt.`;
+  protected deniedText = $localize`:@@adminCases.denied:U hebt geen rechten om aanvragen te beheren.`;
+  protected failedText = $localize`:@@adminCases.failed:De aanvragen konden niet worden geladen.`;
+  protected emptyText = $localize`:@@adminCases.empty:Er zijn geen aanvragen.`;
+  protected retryText = $localize`:@@adminCases.retry:Opnieuw proberen`;
+  protected deleteText = $localize`:@@adminCases.delete:Verwijderen`;
+
+  private ownerKey = $localize`:@@adminCases.owner:Eigenaar (BSN)`;
+  private statusKey = $localize`:@@adminCases.status:Status`;
+  private refKey = $localize`:@@adminCases.referentie:Referentie`;
+  private ingediendKey = $localize`:@@adminCases.ingediend:Ingediend op`;
+
+  protected typeLabel = (c: Aanvraag) => TYPE_LABELS[c.type];
+
+  /** Key/value rows for one case (owner + lifecycle facts; the type is the block heading). */
+  protected rows(c: Aanvraag): { key: string; value: string }[] {
+    return [
+      { key: this.ownerKey, value: c.owner ?? '—' },
+      { key: this.statusKey, value: statusLabel(c.status) },
+      { key: this.refKey, value: referentie(c.status) || '—' },
+      { key: this.ingediendKey, value: c.submittedAt ? formatDatumNl(c.submittedAt) : '—' },
+    ];
+  }
+
+  private loadRequested = false;
+  constructor() {
+    // Load once the capability resolves to allowed (a 403 GET would be wasted otherwise).
+    // Depends only on canManage() + a plain flag — never the store model (WP-26 loop lesson).
+    effect(() => {
+      if (this.canManage() && !this.loadRequested) {
+        this.loadRequested = true;
+        void this.store.load();
+      }
+    });
+  }
+
+  protected reload() {
+    void this.store.load();
+  }
+
+  /** Native confirm — no dialog component exists, and admin delete is irreversible. */
+  protected confirmDelete(c: Aanvraag) {
+    const msg = $localize`:@@adminCases.confirm:Deze aanvraag definitief verwijderen?`;
+    if (confirm(msg)) void this.store.delete(c.id);
+  }
+}