initial

2026-07-16 09:49:22 +02:00
commit 543e8273a7
157 changed files with 22761 additions and 0 deletions
--- a/apps/frontend/.editorconfig
+++ b/apps/frontend/.editorconfig
@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
--- a/apps/frontend/.gitignore
+++ b/apps/frontend/.gitignore
@@ -0,0 +1,44 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/mcp.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+__screenshots__/
+
+# System files
+.DS_Store
+Thumbs.db
--- a/apps/frontend/.prettierrc
+++ b/apps/frontend/.prettierrc
@@ -0,0 +1,12 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
+}
--- a/apps/frontend/.vscode/extensions.json
+++ b/apps/frontend/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}
--- a/apps/frontend/.vscode/launch.json
+++ b/apps/frontend/.vscode/launch.json
@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}
--- a/apps/frontend/.vscode/tasks.json
+++ b/apps/frontend/.vscode/tasks.json
@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "Changes detected"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation (complete|failed)"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "Changes detected"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation (complete|failed)"
+          }
+        }
+      }
+    }
+  ]
+}
--- a/apps/frontend/README.md
+++ b/apps/frontend/README.md
@@ -0,0 +1,35 @@
+# Frontend Workspace
+
+Angular Frontend fuer das Boilerplate. Der Workspace wird normalerweise ueber die
+Root-Scripts gesteuert.
+
+## Befehle
+
+```bash
+npm --workspace apps/frontend run start
+npm --workspace apps/frontend run build
+npm --workspace apps/frontend run typecheck
+npm --workspace apps/frontend run test
+```
+
+Im lokalen Start laeuft Angular auf `http://localhost:4200` und nutzt
+`proxy.conf.json`, um `/api` an das Backend auf `http://localhost:3000` zu
+proxyn.
+
+## Struktur
+
+- `src/app/layout/app-shell.ts`: Hauptlayout, Navigation und Login-Zustand
+- `src/app/app.routes.ts`: Routen und Permission-Daten
+- `src/app/core/auth.service.ts`: aktueller Benutzer und Permissions
+- `src/app/core/csrf.interceptor.ts`: CSRF-Header fuer schreibende Requests
+- `src/app/core/permission.guard.ts`: UI-seitige Routensperre
+- `src/app/features`: fachliche Seiten
+
+## Entwicklungsregeln
+
+Das Frontend nutzt keine UI-Library. Komponenten bleiben mobile-first und
+verwenden eigenes HTML und SCSS. Permissions im Frontend dienen nur Darstellung
+und Navigation; die verbindliche Autorisierung findet im Backend statt.
+
+API-Zugriffe laufen ueber `@boilerplate/api-client`. Der Client ist generiert
+und wird aus dem Root mit `npm run api:generate` aktualisiert.
--- a/apps/frontend/angular.json
+++ b/apps/frontend/angular.json
@@ -0,0 +1,77 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm",
+    "analytics": false
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "frontend": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": ["src/styles.scss"]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "frontend:build:production"
+            },
+            "development": {
+              "buildTarget": "frontend:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test"
+        }
+      }
+    }
+  }
+}
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@boilerplate/frontend",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "ng serve --host 0.0.0.0 --port 4200 --proxy-config proxy.conf.json",
+    "build": "ng build --configuration production",
+    "typecheck": "ng build --configuration development --no-progress",
+    "test": "vitest run --config vitest.config.ts"
+  },
+  "dependencies": {
+    "@angular/common": "22.0.6",
+    "@angular/compiler": "22.0.6",
+    "@angular/core": "22.0.6",
+    "@angular/forms": "22.0.6",
+    "@angular/platform-browser": "22.0.6",
+    "@angular/platform-browser-dynamic": "22.0.6",
+    "@angular/router": "22.0.6",
+    "@boilerplate/api-client": "1.0.0",
+    "rxjs": "7.8.2",
+    "tslib": "2.8.1"
+  }
+}
--- a/apps/frontend/proxy.conf.json
+++ b/apps/frontend/proxy.conf.json
@@ -0,0 +1,12 @@
+{
+  "/api": {
+    "target": "http://localhost:3000",
+    "secure": false,
+    "changeOrigin": true
+  },
+  "/health": {
+    "target": "http://localhost:3000",
+    "secure": false,
+    "changeOrigin": true
+  }
+}
--- a/apps/frontend/public/favicon.ico
+++ b/apps/frontend/public/favicon.ico
--- a/apps/frontend/src/app/app.config.ts
+++ b/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,
+  ],
+};
--- a/apps/frontend/src/app/app.html
+++ b/apps/frontend/src/app/app.html
@@ -0,0 +1 @@
+<router-outlet />
--- a/apps/frontend/src/app/app.routes.ts
+++ b/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),
+      },
+    ],
+  },
+];
--- a/apps/frontend/src/app/app.scss
+++ b/apps/frontend/src/app/app.scss
--- a/apps/frontend/src/app/app.spec.ts
+++ b/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();
+  });
+});
--- a/apps/frontend/src/app/app.ts
+++ b/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 {}
--- a/apps/frontend/src/app/core/auth.service.spec.ts
+++ b/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);
+  });
+});
--- a/apps/frontend/src/app/core/auth.service.ts
+++ b/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);
+  }
+}
--- a/apps/frontend/src/app/core/csrf.interceptor.ts
+++ b/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,
+  );
+};
--- a/apps/frontend/src/app/core/permission.guard.ts
+++ b/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']);
+    }),
+  );
+};
--- a/apps/frontend/src/app/core/title.strategy.ts
+++ b/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 };
--- a/apps/frontend/src/app/features/audit/audit.page.ts
+++ b/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));
+  }
+}
--- a/apps/frontend/src/app/features/dashboard/dashboard.page.ts
+++ b/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 },
+      ]),
+    );
+  }
+}
--- a/apps/frontend/src/app/features/errors/error.page.ts
+++ b/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 {}
--- a/apps/frontend/src/app/features/errors/forbidden.page.ts
+++ b/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 {}
--- a/apps/frontend/src/app/features/errors/not-found.page.ts
+++ b/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 {}
--- a/apps/frontend/src/app/features/items/items.page.spec.ts
+++ b/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);
+  });
+});
--- a/apps/frontend/src/app/features/items/items.page.ts
+++ b/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());
+    }
+  }
+}
--- a/apps/frontend/src/app/features/profile/profile.page.ts
+++ b/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));
+  }
+}
--- a/apps/frontend/src/app/features/roles/roles.page.ts
+++ b/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());
+  }
+}
--- a/apps/frontend/src/app/features/sessions/sessions.page.ts
+++ b/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());
+  }
+}
--- a/apps/frontend/src/app/features/users/users.page.ts
+++ b/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();
+  }
+}
--- a/apps/frontend/src/app/layout/app-shell.html
+++ b/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>
--- a/apps/frontend/src/app/layout/app-shell.scss
+++ b/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;
+  }
+}
--- a/apps/frontend/src/app/layout/app-shell.spec.ts
+++ b/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);
+  });
+});
--- a/apps/frontend/src/app/layout/app-shell.ts
+++ b/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);
+  }
+}
--- a/apps/frontend/src/index.html
+++ b/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>
--- a/apps/frontend/src/main.ts
+++ b/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));
--- a/apps/frontend/src/styles.scss
+++ b/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;
+}
--- a/apps/frontend/src/test-setup.ts
+++ b/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());
--- a/apps/frontend/tsconfig.app.json
+++ b/apps/frontend/tsconfig.app.json
@@ -0,0 +1,10 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"]
+}
--- a/apps/frontend/tsconfig.json
+++ b/apps/frontend/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compileOnSave": false,
+  "compilerOptions": {
+    "module": "preserve",
+    "target": "ES2023",
+    "lib": ["ES2023", "DOM"],
+    "types": [],
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "strict": true
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
--- a/apps/frontend/tsconfig.spec.json
+++ b/apps/frontend/tsconfig.spec.json
@@ -0,0 +1,10 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": ["vitest/globals", "node"]
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.spec.ts"]
+}
--- a/apps/frontend/vitest.config.ts
+++ b/apps/frontend/vitest.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    include: ['src/**/*.spec.ts'],
+    setupFiles: ['src/test-setup.ts'],
+    globals: true,
+  },
+});