Atomic-design POC: BIG-register self-service portal (Angular + Rijkshuisstijl)

Atoms/molecules/organisms/templates/pages composing the NL Design System
(Utrecht) CSS themed Rijkshuisstijl via @rijkshuisstijl-community tokens.
Login -> dashboard -> registration detail, mock JSON over HttpClient, Storybook
organized by atomic layer.

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

src/app/pages/dashboard/dashboard.page.ts

@@ -0,0 +1,38 @@
+import { Component, inject } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
+import { PageLayoutComponent } from '../../templates/page-layout/page-layout.component';
+import { HeadingComponent } from '../../atoms/heading/heading.component';
+import { LinkComponent } from '../../atoms/link/link.component';
+import { RegistrationSummaryComponent } from '../../organisms/registration-summary/registration-summary.component';
+import { RegistrationTableComponent } from '../../organisms/registration-table/registration-table.component';
+import { RegistrationService } from '../../core/registration.service';
+
+@Component({
+  selector: 'app-dashboard-page',
+  imports: [AsyncPipe, PageLayoutComponent, HeadingComponent, LinkComponent, RegistrationSummaryComponent, RegistrationTableComponent],
+  template: `
+    <app-page-layout>
+      <app-heading [level]="1">Mijn BIG-registratie</app-heading>
+
+      @if (reg$ | async; as reg) {
+        <app-registration-summary [reg]="reg" />
+      }
+
+      <div style="margin-top:2rem">
+        <app-heading [level]="2">Specialismen en aantekeningen</app-heading>
+        @if (notes$ | async; as notes) {
+          <app-registration-table [rows]="notes" />
+        }
+      </div>
+
+      <p style="margin-top:2rem">
+        <app-link to="/registratie">Gegevens bekijken of een wijziging doorgeven →</app-link>
+      </p>
+    </app-page-layout>
+  `,
+})
+export class DashboardPage {
+  private svc = inject(RegistrationService);
+  reg$ = this.svc.getRegistration();
+  notes$ = this.svc.getAantekeningen();
+}