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/app.routes.ts

@@ -74,6 +74,16 @@ export const routes: Routes = [
         canActivate: [capabilityGuard('stamdata:edit')],
         loadComponent: () => import('@beheer/ui/stamdata.page').then((m) => m.StamdataPage),
       },
+      {
+        path: 'beheer/zaken',
+        // Admin-only cases overview + delete (WP-36): capabilityGuard denies-by-default
+        // unless GET /me resolved `cases:manage` (Admin role). Backend re-enforces via the
+        // CasesAdmin gate — the guard just avoids loading a page that would 403. The page
+        // lives in registratie/ui (which owns the Aanvraag aggregate); routed under /beheer.
+        canActivate: [capabilityGuard('cases:manage')],
+        loadComponent: () =>
+          import('@registratie/ui/admin-cases.page').then((m) => m.AdminCasesPage),
+      },
       {
         path: 'concepts',
         loadComponent: () => import('./showcase/concepts.page').then((m) => m.ConceptsPage),

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);
+  }
+}

src/app/shared/domain/capability.ts

@@ -3,4 +3,9 @@
  * Server-resolved and opaque to the FE — never derived from a role client-side.
  */
 export type Capability =
-  'brief:approve' | 'brief:reject' | 'brief:send' | 'orgtemplate:edit' | 'stamdata:edit';
+  | 'brief:approve'
+  | 'brief:reject'
+  | 'brief:send'
+  | 'orgtemplate:edit'
+  | 'stamdata:edit'
+  | 'cases:manage';

src/app/shared/infrastructure/api-client.ts

@@ -1032,6 +1032,94 @@ export class ApiClient {
         return Promise.resolve<SubmitApplicationResponse>(null as any);
     }
 
+    /**
+     * @return OK
+     */
+    casesAll(): Promise<ApplicationSummaryDto[]> {
+        let url_ = this.baseUrl + "/api/v1/admin/cases";
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_: RequestInit = {
+            method: "GET",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processCasesAll(_response);
+        });
+    }
+
+    protected processCasesAll(response: Response): Promise<ApplicationSummaryDto[]> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as ApplicationSummaryDto[];
+            return result200;
+            });
+        } else if (status === 403) {
+            return response.text().then((_responseText) => {
+            let result403: any = null;
+            result403 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as ProblemDetails;
+            return throwException("Forbidden", status, _responseText, _headers, result403);
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<ApplicationSummaryDto[]>(null as any);
+    }
+
+    /**
+     * @return No Content
+     */
+    cases(id: string): Promise<void> {
+        let url_ = this.baseUrl + "/api/v1/admin/cases/{id}";
+        if (id === undefined || id === null)
+            throw new globalThis.Error("The parameter 'id' must be defined.");
+        url_ = url_.replace("{id}", encodeURIComponent("" + id));
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_: RequestInit = {
+            method: "DELETE",
+            headers: {
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processCases(_response);
+        });
+    }
+
+    protected processCases(response: Response): Promise<void> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 204) {
+            return response.text().then((_responseText) => {
+            return;
+            });
+        } else if (status === 403) {
+            return response.text().then((_responseText) => {
+            let result403: any = null;
+            result403 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as ProblemDetails;
+            return throwException("Forbidden", status, _responseText, _headers, result403);
+            });
+        } else if (status === 404) {
+            return response.text().then((_responseText) => {
+            return throwException("Not Found", status, _responseText, _headers);
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<void>(null as any);
+    }
+
     /**
      * @return OK
      */
@@ -1674,6 +1762,7 @@ export interface ApplicationSummaryDto {
     createdAt?: string | undefined;
     updatedAt?: string | undefined;
     submittedAt?: string | undefined;
+    owner?: string | undefined;
 }
 
 export interface BriefDecisionsDto {

src/app/shared/infrastructure/me.adapter.ts

@@ -9,6 +9,7 @@ const KNOWN: readonly Capability[] = [
   'brief:send',
   'orgtemplate:edit',
   'stamdata:edit',
+  'cases:manage',
 ];
 
 /**

src/app/shared/infrastructure/role.interceptor.ts

@@ -12,6 +12,7 @@ import { currentRole } from './role';
 const ROLE_AWARE = [
   '/api/v1/brief',
   '/api/v1/admin/org-template',
+  '/api/v1/admin/cases',
   '/api/v1/stamdata',
   '/api/v1/me',
 ];

src/app/shared/layout/site-header/site-header.component.ts

@@ -33,6 +33,11 @@ const ADMIN_NAV_ITEMS: readonly (HeaderNavItem & { readonly cap: Capability })[]
     to: '/beheer/stamdata',
     cap: 'stamdata:edit',
   },
+  {
+    label: $localize`:@@header.nav.zaken:Aanvragen`,
+    to: '/beheer/zaken',
+    cap: 'cases:manage',
+  },
 ];
 
 /** Organism: CIBG Huisstijl site header — logo block, robijn titlebar (breadcrumb +