initial

apps/frontend/src/app/app.config.ts

@@ -0,0 +1,17 @@
+import { provideBrowserGlobalErrorListeners } from '@angular/core';
+import type { ApplicationConfig } from '@angular/core';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
+
+import { routes } from './app.routes';
+import { csrfInterceptor } from './core/csrf.interceptor';
+import { titleStrategyProvider } from './core/title.strategy';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideHttpClient(withInterceptors([csrfInterceptor])),
+    provideRouter(routes, withComponentInputBinding()),
+    titleStrategyProvider,
+  ],
+};

apps/frontend/src/app/app.html

@@ -0,0 +1 @@
+<router-outlet />

apps/frontend/src/app/app.routes.ts

@@ -0,0 +1,79 @@
+import type { Routes } from '@angular/router';
+import { permissionGuard } from './core/permission.guard';
+
+export const routes: Routes = [
+  {
+    path: '',
+    loadComponent: () => import('./layout/app-shell').then((m) => m.AppShellComponent),
+    children: [
+      {
+        path: '',
+        title: 'Dashboard',
+        loadComponent: () =>
+          import('./features/dashboard/dashboard.page').then((m) => m.DashboardPageComponent),
+      },
+      {
+        path: 'profil',
+        title: 'Profil',
+        loadComponent: () =>
+          import('./features/profile/profile.page').then((m) => m.ProfilePageComponent),
+      },
+      {
+        path: 'sessions',
+        title: 'Eigene Sessions',
+        loadComponent: () =>
+          import('./features/sessions/sessions.page').then((m) => m.SessionsPageComponent),
+      },
+      {
+        path: 'items',
+        title: 'Items',
+        canActivate: [permissionGuard],
+        data: { permissions: ['items.read'] },
+        loadComponent: () =>
+          import('./features/items/items.page').then((m) => m.ItemsPageComponent),
+      },
+      {
+        path: 'benutzer',
+        title: 'Benutzerverwaltung',
+        canActivate: [permissionGuard],
+        data: { permissions: ['users.read'] },
+        loadComponent: () =>
+          import('./features/users/users.page').then((m) => m.UsersPageComponent),
+      },
+      {
+        path: 'rollen',
+        title: 'Rollenverwaltung',
+        canActivate: [permissionGuard],
+        data: { permissions: ['roles.read'] },
+        loadComponent: () =>
+          import('./features/roles/roles.page').then((m) => m.RolesPageComponent),
+      },
+      {
+        path: 'audit-log',
+        title: 'Audit-Log',
+        canActivate: [permissionGuard],
+        data: { permissions: ['audit.read'] },
+        loadComponent: () =>
+          import('./features/audit/audit.page').then((m) => m.AuditPageComponent),
+      },
+      {
+        path: '403',
+        title: 'Keine Berechtigung',
+        loadComponent: () =>
+          import('./features/errors/forbidden.page').then((m) => m.ForbiddenPageComponent),
+      },
+      {
+        path: 'fehler',
+        title: 'Fehler',
+        loadComponent: () =>
+          import('./features/errors/error.page').then((m) => m.ErrorPageComponent),
+      },
+      {
+        path: '**',
+        title: 'Nicht gefunden',
+        loadComponent: () =>
+          import('./features/errors/not-found.page').then((m) => m.NotFoundPageComponent),
+      },
+    ],
+  },
+];

apps/frontend/src/app/app.spec.ts

@@ -0,0 +1,18 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { App } from './app';
+
+describe('App', () => {
+  it('renders the router outlet as application entry point', async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+      providers: [provideRouter([])],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    expect(element.querySelector('router-outlet')).not.toBeNull();
+  });
+});

apps/frontend/src/app/app.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet],
+  template: '<router-outlet />',
+})
+export class App {}

apps/frontend/src/app/core/auth.service.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { of } from 'rxjs';
+import { ApiClientService, type UserDto } from '@boilerplate/api-client';
+import { AuthService } from './auth.service';
+
+const user: UserDto = {
+  id: 'u1',
+  name: 'Ada',
+  email: 'ada@example.test',
+  active: true,
+  lastLoginAt: null,
+  settings: { tablePageSize: 20, sidebarExpanded: true },
+  roles: [
+    {
+      id: 'r1',
+      name: 'user',
+      protected: true,
+      permissions: [{ id: 'items.read', description: 'items.read' }],
+    },
+  ],
+};
+
+describe('AuthService', () => {
+  it('derives permissions from roles for navigation decisions', () => {
+    TestBed.configureTestingModule({
+      providers: [{ provide: ApiClientService, useValue: { me: () => of(user) } }],
+    });
+    const service = TestBed.inject(AuthService);
+
+    service.loadMe();
+
+    expect(service.has('items.read')).toBe(true);
+    expect(service.has('users.manage')).toBe(false);
+  });
+});

apps/frontend/src/app/core/auth.service.ts

@@ -0,0 +1,43 @@
+import { Injectable, computed, inject, signal } from '@angular/core';
+import type { Permission, UserDto } from '@boilerplate/api-client';
+import { ApiClientService } from '@boilerplate/api-client';
+import { catchError, finalize, of, tap } from 'rxjs';
+import type { Observable } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class AuthService {
+  private readonly api = inject(ApiClientService);
+  readonly user = signal<UserDto | null>(null);
+  readonly loaded = signal(false);
+  readonly permissions = computed(
+    () =>
+      new Set(
+        (this.user()?.roles ?? []).flatMap((role) =>
+          role.permissions.map((permission) => permission.id),
+        ),
+      ),
+  );
+
+  loadMe(): void {
+    this.ensureLoaded().subscribe();
+  }
+
+  ensureLoaded(): Observable<UserDto | null> {
+    if (this.loaded()) {
+      return of(this.user());
+    }
+
+    return this.api.me().pipe(
+      tap((user) => this.user.set(user)),
+      catchError(() => {
+        this.user.set(null);
+        return of(null);
+      }),
+      finalize(() => this.loaded.set(true)),
+    );
+  }
+
+  has(permission: Permission): boolean {
+    return this.permissions().has(permission);
+  }
+}

apps/frontend/src/app/core/csrf.interceptor.ts

@@ -0,0 +1,17 @@
+import type { HttpInterceptorFn } from '@angular/common/http';
+
+const unsafeMethods = new Set(['POST', 'PUT', 'PATCH', 'DELETE']);
+
+export const csrfInterceptor: HttpInterceptorFn = (req, next) => {
+  if (!unsafeMethods.has(req.method)) {
+    return next(req);
+  }
+  const token = document.cookie
+    .split(';')
+    .map((entry) => entry.trim())
+    .find((entry) => entry.startsWith('csrf_token='))
+    ?.split('=')[1];
+  return next(
+    token ? req.clone({ setHeaders: { 'X-CSRF-Token': decodeURIComponent(token) } }) : req,
+  );
+};

apps/frontend/src/app/core/permission.guard.ts

@@ -0,0 +1,21 @@
+import { inject } from '@angular/core';
+import { Router, type CanActivateFn } from '@angular/router';
+import type { Permission } from '@boilerplate/api-client';
+import { map } from 'rxjs';
+import { AuthService } from './auth.service';
+
+export const permissionGuard: CanActivateFn = (route) => {
+  const auth = inject(AuthService);
+  const router = inject(Router);
+  const required = (route.data['permissions'] ?? []) as Permission[];
+  return auth.ensureLoaded().pipe(
+    map((user) => {
+      if (!user) {
+        return router.createUrlTree(['/']);
+      }
+      return required.every((permission) => auth.has(permission))
+        ? true
+        : router.createUrlTree(['/403']);
+    }),
+  );
+};

apps/frontend/src/app/core/title.strategy.ts

@@ -0,0 +1,15 @@
+import { Injectable, inject } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { TitleStrategy, type RouterStateSnapshot } from '@angular/router';
+
+@Injectable()
+export class AppTitleStrategy extends TitleStrategy {
+  private readonly title = inject(Title);
+
+  override updateTitle(snapshot: RouterStateSnapshot): void {
+    const title = this.buildTitle(snapshot);
+    this.title.setTitle(title ? `${title} | Business App` : 'Business App');
+  }
+}
+
+export const titleStrategyProvider = { provide: TitleStrategy, useClass: AppTitleStrategy };

apps/frontend/src/app/features/audit/audit.page.ts

@@ -0,0 +1,57 @@
+import { Component, inject, signal } from '@angular/core';
+import { ApiClientService, type AuditLogDto } from '@boilerplate/api-client';
+
+@Component({
+  standalone: true,
+  template: `
+    <section class="list">
+      @for (entry of entries(); track entry.id) {
+        <article>
+          <strong>{{ labels[entry.action] || entry.action }}</strong>
+          <span>{{ entry.createdAt }} · Objekt: {{ entry.targetType }} {{ entry.targetId }}</span>
+          <small>Request-ID: {{ entry.requestId }}</small>
+        </article>
+      }
+    </section>
+  `,
+  styles: [
+    `
+      .list {
+        display: grid;
+        gap: 12px;
+      }
+      article {
+        display: grid;
+        gap: 6px;
+        background: #fff;
+        border: 1px solid #d9dee7;
+        border-radius: 8px;
+        padding: 16px;
+      }
+      span,
+      small {
+        color: #637083;
+      }
+    `,
+  ],
+})
+export class AuditPageComponent {
+  private readonly api = inject(ApiClientService);
+  readonly entries = signal<AuditLogDto[]>([]);
+  readonly labels: Record<string, string> = {
+    USER_ACTIVATED: 'Benutzer aktiviert',
+    USER_DEACTIVATED: 'Benutzer deaktiviert',
+    USER_ROLE_ASSIGNED: 'Rolle zugewiesen',
+    USER_ROLE_REMOVED: 'Rolle entfernt',
+    ROLE_CREATED: 'Rolle erstellt',
+    ROLE_UPDATED: 'Rolle aktualisiert',
+    ROLE_DELETED: 'Rolle geloescht',
+    ROLE_PERMISSIONS_UPDATED: 'Permissions aktualisiert',
+    SESSION_REVOKED: 'Session beendet',
+    ALL_USER_SESSIONS_REVOKED: 'Alle Sessions beendet',
+  };
+
+  constructor() {
+    this.api.audit().subscribe((page) => this.entries.set(page.items));
+  }
+}

apps/frontend/src/app/features/dashboard/dashboard.page.ts

@@ -0,0 +1,59 @@
+import { Component, inject, signal } from '@angular/core';
+import { ApiClientService } from '@boilerplate/api-client';
+
+@Component({
+  standalone: true,
+  template: `
+    <section class="kpis">
+      @for (card of cards(); track card.label) {
+        <article>
+          <span>{{ card.label }}</span>
+          <strong>{{ card.value }}</strong>
+        </article>
+      }
+    </section>
+  `,
+  styles: [
+    `
+      .kpis {
+        display: grid;
+        gap: 12px;
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      }
+      article {
+        background: #fff;
+        border: 1px solid #d9dee7;
+        border-radius: 8px;
+        padding: 18px;
+      }
+      span {
+        display: block;
+        color: #637083;
+        margin-bottom: 8px;
+      }
+      strong {
+        font-size: 2rem;
+      }
+    `,
+  ],
+})
+export class DashboardPageComponent {
+  private readonly api = inject(ApiClientService);
+  readonly cards = signal([
+    { label: 'Benutzer', value: 0 },
+    { label: 'Aktive Sessions', value: 0 },
+    { label: 'Rollen', value: 0 },
+    { label: 'Items', value: 0 },
+  ]);
+
+  constructor() {
+    this.api.dashboard().subscribe((data) =>
+      this.cards.set([
+        { label: 'Benutzer', value: data.userCount },
+        { label: 'Aktive Sessions', value: data.activeSessions },
+        { label: 'Rollen', value: data.roleCount },
+        { label: 'Items', value: data.itemCount },
+      ]),
+    );
+  }
+}

apps/frontend/src/app/features/errors/error.page.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+  standalone: true,
+  template: `<p class="state">Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.</p>`,
+  styles: [
+    `
+      .state {
+        background: #fff;
+        border: 1px solid #d9dee7;
+        border-radius: 8px;
+        padding: 20px;
+      }
+    `,
+  ],
+})
+export class ErrorPageComponent {}

apps/frontend/src/app/features/errors/forbidden.page.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+  standalone: true,
+  template: `<p class="state">Keine Berechtigung fuer diese Seite.</p>`,
+  styles: [
+    `
+      .state {
+        background: #fff;
+        border: 1px solid #d9dee7;
+        border-radius: 8px;
+        padding: 20px;
+      }
+    `,
+  ],
+})
+export class ForbiddenPageComponent {}

apps/frontend/src/app/features/errors/not-found.page.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+  standalone: true,
+  template: `<p class="state">Die angeforderte Seite wurde nicht gefunden.</p>`,
+  styles: [
+    `
+      .state {
+        background: #fff;
+        border: 1px solid #d9dee7;
+        border-radius: 8px;
+        padding: 20px;
+      }
+    `,
+  ],
+})
+export class NotFoundPageComponent {}

apps/frontend/src/app/features/items/items.page.spec.ts

@@ -0,0 +1,26 @@
+import { TestBed } from '@angular/core/testing';
+import { of } from 'rxjs';
+import { ApiClientService } from '@boilerplate/api-client';
+import { ItemsPageComponent } from './items.page';
+
+describe('ItemsPageComponent', () => {
+  it('keeps the save button disabled while the typed form is invalid', async () => {
+    await TestBed.configureTestingModule({
+      imports: [ItemsPageComponent],
+      providers: [
+        {
+          provide: ApiClientService,
+          useValue: {
+            items: () => of({ items: [], total: 0, page: 1, pageSize: 20 }),
+          },
+        },
+      ],
+    }).compileComponents();
+    const fixture = TestBed.createComponent(ItemsPageComponent);
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.form.invalid).toBe(true);
+    fixture.componentInstance.form.controls.name.setValue('Neues Item');
+    expect(fixture.componentInstance.form.valid).toBe(true);
+  });
+});

apps/frontend/src/app/features/items/items.page.ts

@@ -0,0 +1,166 @@
+import { Component, inject, signal } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { ApiClientService, type ApiErrorBody, type ItemDto } from '@boilerplate/api-client';
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule],
+  template: `
+    <form class="toolbar" (ngSubmit)="load()">
+      <input [formControl]="search" placeholder="Suchen" />
+      <button type="submit">Suchen</button>
+    </form>
+    @if (error()) {
+      <p class="error">{{ error() }}</p>
+    }
+    <section class="grid">
+      @for (item of items(); track item.id) {
+        <article (click)="edit(item)">
+          <strong>{{ item.name }}</strong>
+          <span>{{ item.description || 'Keine Beschreibung' }}</span>
+          <small>{{ item.status }} · Version {{ item.version }}</small>
+        </article>
+      }
+    </section>
+    <form class="panel" [formGroup]="form" (ngSubmit)="save()">
+      <h2>{{ selected()?.id ? 'Item bearbeiten' : 'Item erstellen' }}</h2>
+      <label>Name <input formControlName="name" /></label>
+      <label>Beschreibung <textarea formControlName="description"></textarea></label>
+      <label
+        >Status
+        <select formControlName="status">
+          <option value="draft">Entwurf</option>
+          <option value="active">Aktiv</option>
+          <option value="archived">Archiviert</option>
+        </select>
+      </label>
+      <div class="actions">
+        <button type="submit" [disabled]="form.invalid">Speichern</button>
+        @if (selected(); as item) {
+          <button type="button" class="danger" (click)="delete(item)">Loeschen</button>
+        }
+      </div>
+    </form>
+  `,
+  styles: [
+    `
+      .toolbar,
+      .panel {
+        display: grid;
+        gap: 12px;
+        background: #fff;
+        border: 1px solid #d9dee7;
+        border-radius: 8px;
+        padding: 16px;
+      }
+      .toolbar {
+        grid-template-columns: 1fr auto;
+        margin-bottom: 16px;
+      }
+      .grid {
+        display: grid;
+        gap: 12px;
+        margin-bottom: 16px;
+      }
+      article {
+        background: #fff;
+        border: 1px solid #d9dee7;
+        border-radius: 8px;
+        padding: 16px;
+        display: grid;
+        gap: 6px;
+        cursor: pointer;
+      }
+      label {
+        display: grid;
+        gap: 6px;
+      }
+      input,
+      textarea,
+      select,
+      button {
+        min-height: 44px;
+      }
+      textarea {
+        min-height: 96px;
+      }
+      button {
+        background: #26648e;
+        color: #fff;
+        border: 0;
+        padding: 0 16px;
+      }
+      .danger {
+        background: #a23b3b;
+      }
+      .error {
+        color: #a23b3b;
+        font-weight: 600;
+      }
+      @media (min-width: 760px) {
+        .grid {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+      }
+    `,
+  ],
+})
+export class ItemsPageComponent {
+  private readonly api = inject(ApiClientService);
+  readonly items = signal<ItemDto[]>([]);
+  readonly selected = signal<ItemDto | null>(null);
+  readonly error = signal('');
+  readonly search = new FormControl('', { nonNullable: true });
+  readonly form = new FormGroup({
+    name: new FormControl('', {
+      nonNullable: true,
+      validators: [
+        (control) => Validators.required(control),
+        (control) => Validators.maxLength(160)(control),
+      ],
+    }),
+    description: new FormControl('', { nonNullable: true }),
+    status: new FormControl<ItemDto['status']>('draft', { nonNullable: true }),
+  });
+
+  constructor() {
+    this.load();
+  }
+
+  load(): void {
+    this.api.items({ search: this.search.value }).subscribe((page) => this.items.set(page.items));
+  }
+
+  edit(item: ItemDto): void {
+    this.selected.set(item);
+    this.form.setValue({
+      name: item.name,
+      description: item.description ?? '',
+      status: item.status,
+    });
+  }
+
+  save(): void {
+    this.error.set('');
+    const value = this.form.getRawValue();
+    const selected = this.selected();
+    const request = selected
+      ? this.api.updateItem(selected.id, { ...value, version: selected.version })
+      : this.api.createItem(value);
+    request.subscribe({
+      next: () => {
+        this.selected.set(null);
+        this.form.reset({ name: '', description: '', status: 'draft' });
+        this.load();
+      },
+      error: (err: { error?: ApiErrorBody }) =>
+        this.error.set(err.error?.message ?? 'Speichern fehlgeschlagen.'),
+    });
+  }
+
+  delete(item: ItemDto): void {
+    if (confirm('Item wirklich loeschen?')) {
+      this.api.deleteItem(item.id, item.version).subscribe(() => this.load());
+    }
+  }
+}

apps/frontend/src/app/features/profile/profile.page.ts

@@ -0,0 +1,86 @@
+import { Component, inject } from '@angular/core';
+import { ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms';
+import { AuthService } from '../../core/auth.service';
+import { ApiClientService } from '@boilerplate/api-client';
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule],
+  template: `
+    @if (auth.user(); as user) {
+      <section class="panel">
+        <dl>
+          <dt>Name</dt>
+          <dd>{{ user.name }}</dd>
+          <dt>E-Mail</dt>
+          <dd>{{ user.email || 'Nicht gesetzt' }}</dd>
+          <dt>Letzter Login</dt>
+          <dd>{{ user.lastLoginAt || 'Noch nicht bekannt' }}</dd>
+        </dl>
+        <form [formGroup]="form" (ngSubmit)="save()">
+          <label
+            >Tabellen-Seitengroesse
+            <input type="number" formControlName="tablePageSize" min="5" max="100"
+          /></label>
+          <label
+            ><input type="checkbox" formControlName="sidebarExpanded" /> Sidebar standardmaessig
+            ausgeklappt</label
+          >
+          <button type="submit">Speichern</button>
+        </form>
+      </section>
+    }
+  `,
+  styles: [
+    `
+      .panel {
+        background: #fff;
+        border: 1px solid #d9dee7;
+        border-radius: 8px;
+        padding: 18px;
+      }
+      dl {
+        display: grid;
+        grid-template-columns: 120px 1fr;
+        gap: 10px;
+      }
+      dt {
+        color: #637083;
+      }
+      form {
+        display: grid;
+        gap: 14px;
+        max-width: 420px;
+      }
+      input {
+        min-height: 44px;
+      }
+      button {
+        min-height: 44px;
+        background: #26648e;
+        color: #fff;
+        border: 0;
+        padding: 0 18px;
+      }
+    `,
+  ],
+})
+export class ProfilePageComponent {
+  readonly auth = inject(AuthService);
+  private readonly api = inject(ApiClientService);
+  readonly form = new FormGroup({
+    tablePageSize: new FormControl(20, { nonNullable: true }),
+    sidebarExpanded: new FormControl(true, { nonNullable: true }),
+  });
+
+  constructor() {
+    const user = this.auth.user();
+    if (user) {
+      this.form.setValue(user.settings);
+    }
+  }
+
+  save(): void {
+    this.api.updateSettings(this.form.getRawValue()).subscribe((user) => this.auth.user.set(user));
+  }
+}

apps/frontend/src/app/features/roles/roles.page.ts

@@ -0,0 +1,149 @@
+import { Component, inject, signal } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { ApiClientService, type Permission, type RoleDto } from '@boilerplate/api-client';
+
+const permissions: Permission[] = [
+  'items.read',
+  'items.create',
+  'items.update',
+  'items.delete',
+  'users.read',
+  'users.manage',
+  'roles.read',
+  'roles.manage',
+  'audit.read',
+  'sessions.readOwn',
+  'sessions.revokeOwn',
+  'sessions.manage',
+];
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule],
+  template: `
+    <section class="list">
+      @for (role of roles(); track role.id) {
+        <article (click)="edit(role)">
+          <strong
+            >{{ role.name }}
+            @if (role.protected) {
+              <small>Systemrolle</small>
+            }
+          </strong>
+          <span
+            >{{ role.permissions.length }} Permissions ·
+            {{ role.users?.length ?? 0 }} Benutzer</span
+          >
+        </article>
+      }
+    </section>
+    <form [formGroup]="form" (ngSubmit)="save()" class="panel">
+      <h2>{{ selected()?.id ? 'Rolle bearbeiten' : 'Rolle anlegen' }}</h2>
+      <label>Name <input formControlName="name" /></label>
+      <fieldset>
+        <legend>Permissions</legend>
+        @for (permission of allPermissions; track permission) {
+          <label
+            ><input
+              type="checkbox"
+              [checked]="selectedPermissions().has(permission)"
+              (change)="toggle(permission)"
+            />
+            {{ permission }}</label
+          >
+        }
+      </fieldset>
+      <button type="submit" [disabled]="form.invalid">Speichern</button>
+      @if (selected(); as role) {
+        @if (!role.protected) {
+          <button type="button" class="danger" (click)="delete(role.id)">Loeschen</button>
+        }
+      }
+    </form>
+  `,
+  styles: [
+    `
+      .list,
+      .panel,
+      fieldset {
+        display: grid;
+        gap: 12px;
+      }
+      article,
+      .panel {
+        background: #fff;
+        border: 1px solid #d9dee7;
+        border-radius: 8px;
+        padding: 16px;
+      }
+      article {
+        cursor: pointer;
+      }
+      input,
+      button {
+        min-height: 44px;
+      }
+      button {
+        background: #26648e;
+        color: #fff;
+        border: 0;
+        padding: 0 16px;
+      }
+      .danger {
+        background: #a23b3b;
+      }
+      small {
+        color: #637083;
+        margin-left: 6px;
+      }
+    `,
+  ],
+})
+export class RolesPageComponent {
+  private readonly api = inject(ApiClientService);
+  readonly roles = signal<RoleDto[]>([]);
+  readonly selected = signal<RoleDto | null>(null);
+  readonly selectedPermissions = signal(new Set<Permission>());
+  readonly allPermissions = permissions;
+  readonly form = new FormGroup({
+    name: new FormControl('', {
+      nonNullable: true,
+      validators: [(control) => Validators.required(control)],
+    }),
+  });
+
+  constructor() {
+    this.load();
+  }
+
+  load(): void {
+    this.api.roles().subscribe((roles) => this.roles.set(roles));
+  }
+
+  edit(role: RoleDto): void {
+    this.selected.set(role);
+    this.form.setValue({ name: role.name });
+    this.selectedPermissions.set(new Set(role.permissions.map((permission) => permission.id)));
+  }
+
+  toggle(permission: Permission): void {
+    const next = new Set(this.selectedPermissions());
+    if (next.has(permission)) next.delete(permission);
+    else next.add(permission);
+    this.selectedPermissions.set(next);
+  }
+
+  save(): void {
+    const body = {
+      name: this.form.controls.name.value,
+      permissions: Array.from(this.selectedPermissions()),
+    };
+    const selected = this.selected();
+    const request = selected ? this.api.updateRole(selected.id, body) : this.api.createRole(body);
+    request.subscribe(() => this.load());
+  }
+
+  delete(id: string): void {
+    this.api.deleteRole(id).subscribe(() => this.load());
+  }
+}

apps/frontend/src/app/features/sessions/sessions.page.ts

@@ -0,0 +1,75 @@
+import { Component, inject, signal } from '@angular/core';
+import { ApiClientService, type SessionDto } from '@boilerplate/api-client';
+
+@Component({
+  standalone: true,
+  template: `
+    <button class="secondary" type="button" (click)="revokeOthers()">
+      Alle anderen Sessions beenden
+    </button>
+    <section class="list">
+      @for (session of sessions(); track session.id) {
+        <article>
+          <strong>{{ session.current ? 'Aktuelle Session' : 'Session' }}</strong>
+          <span>Angemeldet: {{ session.createdAt }}</span>
+          <span>Letzte Aktivitaet: {{ session.lastActivityAt }}</span>
+          <span
+            >{{ session.userAgent || 'Unbekannter Browser' }} ·
+            {{ session.approximateIp || 'IP unbekannt' }}</span
+          >
+          @if (!session.current && !session.revokedAt) {
+            <button type="button" (click)="revoke(session.id)">Beenden</button>
+          }
+        </article>
+      }
+    </section>
+  `,
+  styles: [
+    `
+      .secondary,
+      button {
+        min-height: 44px;
+        border: 1px solid #26648e;
+        background: #fff;
+        color: #184e77;
+        padding: 0 14px;
+      }
+      .list {
+        display: grid;
+        gap: 12px;
+        margin-top: 16px;
+      }
+      article {
+        display: grid;
+        gap: 8px;
+        background: #fff;
+        border: 1px solid #d9dee7;
+        border-radius: 8px;
+        padding: 16px;
+      }
+      span {
+        color: #536173;
+      }
+    `,
+  ],
+})
+export class SessionsPageComponent {
+  private readonly api = inject(ApiClientService);
+  readonly sessions = signal<SessionDto[]>([]);
+
+  constructor() {
+    this.load();
+  }
+
+  load(): void {
+    this.api.sessions().subscribe((sessions) => this.sessions.set(sessions));
+  }
+
+  revoke(id: string): void {
+    this.api.revokeSession(id).subscribe(() => this.load());
+  }
+
+  revokeOthers(): void {
+    this.api.revokeOtherSessions().subscribe(() => this.load());
+  }
+}

apps/frontend/src/app/features/users/users.page.ts

@@ -0,0 +1,98 @@
+import { Component, inject, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ApiClientService, type UserDto } from '@boilerplate/api-client';
+
+@Component({
+  standalone: true,
+  imports: [FormsModule],
+  template: `
+    <form class="toolbar" (ngSubmit)="load()">
+      <input name="search" [(ngModel)]="search" placeholder="Benutzer suchen" />
+      <button type="submit">Suchen</button>
+    </form>
+    <section class="list">
+      @for (user of users(); track user.id) {
+        <article>
+          <div>
+            <strong>{{ user.name }}</strong>
+            <span>{{ user.email || 'Keine E-Mail' }}</span>
+            <span
+              >{{ user.active ? 'Aktiv' : 'Deaktiviert' }} · Letzter Login:
+              {{ user.lastLoginAt || 'nie' }}</span
+            >
+          </div>
+          <button type="button" (click)="setActive(user)">
+            {{ user.active ? 'Deaktivieren' : 'Aktivieren' }}
+          </button>
+          <button type="button" (click)="revokeSessions(user.id)">Sessions beenden</button>
+        </article>
+      }
+    </section>
+  `,
+  styles: [
+    `
+      .toolbar {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        gap: 12px;
+        margin-bottom: 16px;
+      }
+      input,
+      button {
+        min-height: 44px;
+      }
+      button {
+        border: 0;
+        background: #26648e;
+        color: #fff;
+        padding: 0 14px;
+      }
+      .list {
+        display: grid;
+        gap: 12px;
+      }
+      article {
+        display: grid;
+        gap: 12px;
+        background: #fff;
+        border: 1px solid #d9dee7;
+        border-radius: 8px;
+        padding: 16px;
+      }
+      article div {
+        display: grid;
+        gap: 4px;
+      }
+      span {
+        color: #637083;
+      }
+      @media (min-width: 760px) {
+        article {
+          grid-template-columns: 1fr auto auto;
+          align-items: center;
+        }
+      }
+    `,
+  ],
+})
+export class UsersPageComponent {
+  private readonly api = inject(ApiClientService);
+  readonly users = signal<UserDto[]>([]);
+  search = '';
+
+  constructor() {
+    this.load();
+  }
+
+  load(): void {
+    this.api.users({ search: this.search }).subscribe((page) => this.users.set(page.items));
+  }
+
+  setActive(user: UserDto): void {
+    this.api.setUserActive(user.id, !user.active).subscribe(() => this.load());
+  }
+
+  revokeSessions(userId: string): void {
+    this.api.revokeUserSessions(userId).subscribe();
+  }
+}

apps/frontend/src/app/layout/app-shell.html

@@ -0,0 +1,36 @@
+<div class="shell">
+  <header class="topbar">
+    <button
+      class="icon-button"
+      type="button"
+      (click)="drawerOpen.set(!drawerOpen())"
+      aria-label="Navigation"
+    >
+      <span></span><span></span><span></span>
+    </button>
+    <strong>Business App</strong>
+    <a class="logout" href="/api/auth/logout">Abmelden</a>
+  </header>
+
+  <aside class="sidebar" [class.open]="drawerOpen()">
+    <nav>
+      @for (item of nav; track item.path) {
+        @if (visible(item)) {
+          <a
+            [routerLink]="item.path"
+            routerLinkActive="active"
+            [routerLinkActiveOptions]="{ exact: item.path === '/' }"
+          >
+            {{ item.label }}
+          </a>
+        }
+      }
+    </nav>
+  </aside>
+
+  <main class="content">
+    <nav class="breadcrumbs">Start / {{ title() }}</nav>
+    <h1>{{ title() }}</h1>
+    <router-outlet />
+  </main>
+</div>

apps/frontend/src/app/layout/app-shell.scss

@@ -0,0 +1,98 @@
+.shell {
+  min-height: 100vh;
+  background: #f6f7f9;
+  color: #1b2430;
+}
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 0 16px;
+  background: #ffffff;
+  border-bottom: 1px solid #d9dee7;
+}
+
+.icon-button {
+  width: 44px;
+  height: 44px;
+  border: 1px solid #c7ced9;
+  background: #ffffff;
+  display: grid;
+  place-content: center;
+  gap: 4px;
+}
+
+.icon-button span {
+  display: block;
+  width: 18px;
+  height: 2px;
+  background: #1b2430;
+}
+
+.logout {
+  margin-left: auto;
+  color: #184e77;
+}
+
+.sidebar {
+  position: fixed;
+  inset: 64px auto 0 0;
+  width: 260px;
+  background: #ffffff;
+  border-right: 1px solid #d9dee7;
+  transform: translateX(-100%);
+  transition: transform 160ms ease;
+  z-index: 9;
+}
+
+.sidebar.open {
+  transform: translateX(0);
+}
+
+nav a {
+  display: block;
+  padding: 14px 18px;
+  color: #263445;
+  text-decoration: none;
+  min-height: 48px;
+}
+
+nav a.active {
+  background: #e8f0f7;
+  border-left: 4px solid #26648e;
+}
+
+.content {
+  padding: 20px 16px 48px;
+}
+
+.breadcrumbs {
+  color: #637083;
+  font-size: 0.9rem;
+  margin-bottom: 8px;
+}
+
+h1 {
+  font-size: 1.6rem;
+  margin: 0 0 20px;
+}
+
+@media (min-width: 900px) {
+  .icon-button {
+    display: none;
+  }
+
+  .sidebar {
+    transform: none;
+  }
+
+  .content {
+    margin-left: 260px;
+    padding: 28px 32px;
+  }
+}

apps/frontend/src/app/layout/app-shell.spec.ts

@@ -0,0 +1,41 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { of } from 'rxjs';
+import { ApiClientService } from '@boilerplate/api-client';
+import { AppShellComponent } from './app-shell';
+
+describe('AppShellComponent', () => {
+  it('hides navigation entries without matching permissions', async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppShellComponent],
+      providers: [
+        provideRouter([]),
+        {
+          provide: ApiClientService,
+          useValue: {
+            me: () =>
+              of({
+                id: 'u1',
+                name: 'Ada',
+                email: null,
+                active: true,
+                lastLoginAt: null,
+                settings: { tablePageSize: 20, sidebarExpanded: true },
+                roles: [{ id: 'r1', name: 'user', protected: true, permissions: [] }],
+              }),
+          },
+        },
+      ],
+    }).compileComponents();
+    const fixture = TestBed.createComponent(AppShellComponent);
+    fixture.detectChanges();
+
+    expect(
+      fixture.componentInstance.visible({
+        label: 'Benutzer',
+        path: '/benutzer',
+        permission: 'users.read',
+      }),
+    ).toBe(false);
+  });
+});

apps/frontend/src/app/layout/app-shell.ts

@@ -0,0 +1,224 @@
+import { Component, computed, inject, signal } from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet, Router } from '@angular/router';
+import type { Permission } from '@boilerplate/api-client';
+import { AuthService } from '../core/auth.service';
+
+interface NavItem {
+  label: string;
+  path: string;
+  permission?: Permission;
+}
+
+@Component({
+  selector: 'app-shell',
+  standalone: true,
+  imports: [RouterOutlet, RouterLink, RouterLinkActive],
+  template: `
+    <div class="shell">
+      <header class="topbar">
+        @if (auth.user()) {
+          <button
+            class="icon-button"
+            type="button"
+            (click)="drawerOpen.set(!drawerOpen())"
+            aria-label="Navigation"
+          >
+            <span></span><span></span><span></span>
+          </button>
+        }
+        <strong>Business App</strong>
+        @if (auth.user()) {
+          <a class="logout" href="/api/auth/logout">Abmelden</a>
+        } @else {
+          <a class="logout" href="/api/auth/login">Anmelden</a>
+        }
+      </header>
+
+      @if (auth.loaded()) {
+        @if (auth.user()) {
+          <aside class="sidebar" [class.open]="drawerOpen()">
+            <nav>
+              @for (item of nav; track item.path) {
+                @if (visible(item)) {
+                  <a
+                    [routerLink]="item.path"
+                    routerLinkActive="active"
+                    [routerLinkActiveOptions]="{ exact: item.path === '/' }"
+                  >
+                    {{ item.label }}
+                  </a>
+                }
+              }
+            </nav>
+          </aside>
+
+          <main class="content">
+            <nav class="breadcrumbs">Start / {{ title() }}</nav>
+            <h1>{{ title() }}</h1>
+            <router-outlet />
+          </main>
+        } @else {
+          <main class="content public-content">
+            <section class="login-panel">
+              <h1>Anmelden</h1>
+              <p>Bitte melden Sie sich ueber den zentralen Identity Provider an.</p>
+              <a class="primary-action" href="/api/auth/login">Mit OIDC anmelden</a>
+            </section>
+          </main>
+        }
+      } @else {
+        <main class="content public-content">
+          <section class="login-panel">
+            <h1>Session wird geprueft</h1>
+            <p>Bitte warten.</p>
+          </section>
+        </main>
+      }
+    </div>
+  `,
+  styles: [
+    `
+      .shell {
+        min-height: 100vh;
+        background: #f6f7f9;
+        color: #1b2430;
+      }
+      .topbar {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+        height: 64px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 16px;
+        background: #fff;
+        border-bottom: 1px solid #d9dee7;
+      }
+      .icon-button {
+        width: 44px;
+        height: 44px;
+        border: 1px solid #c7ced9;
+        background: #fff;
+        display: grid;
+        place-content: center;
+        gap: 4px;
+      }
+      .icon-button span {
+        display: block;
+        width: 18px;
+        height: 2px;
+        background: #1b2430;
+      }
+      .logout {
+        margin-left: auto;
+        color: #184e77;
+      }
+      .public-content {
+        min-height: calc(100vh - 64px);
+        display: grid;
+        place-items: center;
+      }
+      .login-panel {
+        width: min(100%, 440px);
+        background: #fff;
+        border: 1px solid #d9dee7;
+        border-radius: 8px;
+        padding: 24px;
+        display: grid;
+        gap: 14px;
+      }
+      .login-panel h1,
+      .login-panel p {
+        margin: 0;
+      }
+      .login-panel p {
+        color: #536173;
+      }
+      .primary-action {
+        min-height: 44px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 6px;
+        background: #26648e;
+        color: #fff;
+        text-decoration: none;
+        padding: 0 16px;
+      }
+      .sidebar {
+        position: fixed;
+        inset: 64px auto 0 0;
+        width: 260px;
+        background: #fff;
+        border-right: 1px solid #d9dee7;
+        transform: translateX(-100%);
+        transition: transform 160ms ease;
+        z-index: 9;
+      }
+      .sidebar.open {
+        transform: translateX(0);
+      }
+      nav a {
+        display: block;
+        padding: 14px 18px;
+        color: #263445;
+        text-decoration: none;
+        min-height: 48px;
+      }
+      nav a.active {
+        background: #e8f0f7;
+        border-left: 4px solid #26648e;
+      }
+      .content {
+        padding: 20px 16px 48px;
+      }
+      .breadcrumbs {
+        color: #637083;
+        font-size: 0.9rem;
+        margin-bottom: 8px;
+      }
+      h1 {
+        font-size: 1.6rem;
+        margin: 0 0 20px;
+      }
+      @media (min-width: 900px) {
+        .icon-button {
+          display: none;
+        }
+        .sidebar {
+          transform: none;
+        }
+        .content {
+          margin-left: 260px;
+          padding: 28px 32px;
+        }
+      }
+    `,
+  ],
+})
+export class AppShellComponent {
+  private readonly router = inject(Router);
+  readonly auth = inject(AuthService);
+  readonly drawerOpen = signal(false);
+  readonly title = computed(
+    () => this.router.routerState.snapshot.root.firstChild?.firstChild?.title ?? 'Dashboard',
+  );
+  readonly nav: NavItem[] = [
+    { label: 'Dashboard', path: '/' },
+    { label: 'Profil', path: '/profil' },
+    { label: 'Sessions', path: '/sessions', permission: 'sessions.readOwn' },
+    { label: 'Items', path: '/items', permission: 'items.read' },
+    { label: 'Benutzer', path: '/benutzer', permission: 'users.read' },
+    { label: 'Rollen', path: '/rollen', permission: 'roles.read' },
+    { label: 'Audit-Log', path: '/audit-log', permission: 'audit.read' },
+  ];
+
+  constructor() {
+    this.auth.loadMe();
+  }
+
+  visible(item: NavItem): boolean {
+    return !item.permission || this.auth.has(item.permission);
+  }
+}

apps/frontend/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Frontend</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

apps/frontend/src/main.ts

@@ -0,0 +1,5 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig).catch((err) => console.error(err));

apps/frontend/src/styles.scss

@@ -0,0 +1,40 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+  background: #f6f7f9;
+  color: #1b2430;
+}
+
+body {
+  margin: 0;
+}
+
+input,
+textarea,
+select,
+button {
+  font: inherit;
+  border-radius: 6px;
+}
+
+input,
+textarea,
+select {
+  border: 1px solid #b9c2d0;
+  padding: 10px 12px;
+  background: #fff;
+}
+
+button {
+  cursor: pointer;
+}

apps/frontend/src/test-setup.ts

@@ -0,0 +1,8 @@
+import '@angular/compiler';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());