Phase 1: frontend UI skeleton

frontend/.claude/CLAUDE.md

@@ -0,0 +1,55 @@
+
+You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.
+
+## TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+## Angular Best Practices
+
+- Always use standalone components over NgModules
+- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
+- Use `NgOptimizedImage` for all static images.
+  - `NgOptimizedImage` does not work for inline base64 images.
+
+## Accessibility Requirements
+
+- It MUST pass all AXE checks.
+- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.
+
+### Components
+
+- Keep components small and focused on a single responsibility
+- Use `input()` and `output()` functions instead of decorators
+- Use `computed()` for derived state
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead
+- Do NOT use `ngStyle`, use `style` bindings instead
+- When using external templates/styles, use paths relative to the component TS file.
+
+## State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+- Do NOT use `mutate` on signals, use `update` or `set` instead
+
+## Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+- Do not assume globals like (`new Date()`) are available.
+
+## Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection

frontend/.cursor/rules/cursor.mdc

@@ -0,0 +1,60 @@
+---
+context: true
+priority: high
+scope: project
+---
+
+You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.
+
+## TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+## Angular Best Practices
+
+- Always use standalone components over NgModules
+- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
+- Use `NgOptimizedImage` for all static images.
+  - `NgOptimizedImage` does not work for inline base64 images.
+
+## Accessibility Requirements
+
+- It MUST pass all AXE checks.
+- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.
+
+### Components
+
+- Keep components small and focused on a single responsibility
+- Use `input()` and `output()` functions instead of decorators
+- Use `computed()` for derived state
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead
+- Do NOT use `ngStyle`, use `style` bindings instead
+- When using external templates/styles, use paths relative to the component TS file.
+
+## State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+- Do NOT use `mutate` on signals, use `update` or `set` instead
+
+## Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+- Do not assume globals like (`new Date()`) are available.
+
+## Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection

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

frontend/.gemini/GEMINI.md

@@ -0,0 +1,55 @@
+
+You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.
+
+## TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+## Angular Best Practices
+
+- Always use standalone components over NgModules
+- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
+- Use `NgOptimizedImage` for all static images.
+  - `NgOptimizedImage` does not work for inline base64 images.
+
+## Accessibility Requirements
+
+- It MUST pass all AXE checks.
+- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.
+
+### Components
+
+- Keep components small and focused on a single responsibility
+- Use `input()` and `output()` functions instead of decorators
+- Use `computed()` for derived state
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead
+- Do NOT use `ngStyle`, use `style` bindings instead
+- When using external templates/styles, use paths relative to the component TS file.
+
+## State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+- Do NOT use `mutate` on signals, use `update` or `set` instead
+
+## Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+- Do not assume globals like (`new Date()`) are available.
+
+## Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection

frontend/.github/copilot-instructions.md

@@ -0,0 +1,55 @@
+
+You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.
+
+## TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+## Angular Best Practices
+
+- Always use standalone components over NgModules
+- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
+- Use `NgOptimizedImage` for all static images.
+  - `NgOptimizedImage` does not work for inline base64 images.
+
+## Accessibility Requirements
+
+- It MUST pass all AXE checks.
+- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.
+
+### Components
+
+- Keep components small and focused on a single responsibility
+- Use `input()` and `output()` functions instead of decorators
+- Use `computed()` for derived state
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead
+- Do NOT use `ngStyle`, use `style` bindings instead
+- When using external templates/styles, use paths relative to the component TS file.
+
+## State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+- Do NOT use `mutate` on signals, use `update` or `set` instead
+
+## Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+- Do not assume globals like (`new Date()`) are available.
+
+## Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection

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

frontend/.junie/guidelines.md

@@ -0,0 +1,55 @@
+
+You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.
+
+## TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+## Angular Best Practices
+
+- Always use standalone components over NgModules
+- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
+- Use `NgOptimizedImage` for all static images.
+  - `NgOptimizedImage` does not work for inline base64 images.
+
+## Accessibility Requirements
+
+- It MUST pass all AXE checks.
+- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.
+
+### Components
+
+- Keep components small and focused on a single responsibility
+- Use `input()` and `output()` functions instead of decorators
+- Use `computed()` for derived state
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead
+- Do NOT use `ngStyle`, use `style` bindings instead
+- When using external templates/styles, use paths relative to the component TS file.
+
+## State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+- Do NOT use `mutate` on signals, use `update` or `set` instead
+
+## Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+- Do not assume globals like (`new Date()`) are available.
+
+## Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection

frontend/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
+}

frontend/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

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"
+    }
+  ]
+}

frontend/.vscode/mcp.json

@@ -0,0 +1,9 @@
+{
+  // For more information, visit: https://angular.dev/ai/mcp
+  "servers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}

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)"
+          }
+        }
+      }
+    }
+  ]
+}

frontend/.windsurf/rules/guidelines.md

@@ -0,0 +1,55 @@
+
+You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.
+
+## TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+## Angular Best Practices
+
+- Always use standalone components over NgModules
+- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
+- Use `NgOptimizedImage` for all static images.
+  - `NgOptimizedImage` does not work for inline base64 images.
+
+## Accessibility Requirements
+
+- It MUST pass all AXE checks.
+- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.
+
+### Components
+
+- Keep components small and focused on a single responsibility
+- Use `input()` and `output()` functions instead of decorators
+- Use `computed()` for derived state
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead
+- Do NOT use `ngStyle`, use `style` bindings instead
+- When using external templates/styles, use paths relative to the component TS file.
+
+## State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+- Do NOT use `mutate` on signals, use `update` or `set` instead
+
+## Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+- Do not assume globals like (`new Date()`) are available.
+
+## Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection

frontend/AGENTS.md

@@ -0,0 +1,55 @@
+
+You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.
+
+## TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+## Angular Best Practices
+
+- Always use standalone components over NgModules
+- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
+- Use `NgOptimizedImage` for all static images.
+  - `NgOptimizedImage` does not work for inline base64 images.
+
+## Accessibility Requirements
+
+- It MUST pass all AXE checks.
+- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.
+
+### Components
+
+- Keep components small and focused on a single responsibility
+- Use `input()` and `output()` functions instead of decorators
+- Use `computed()` for derived state
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead
+- Do NOT use `ngStyle`, use `style` bindings instead
+- When using external templates/styles, use paths relative to the component TS file.
+
+## State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+- Do NOT use `mutate` on signals, use `update` or `set` instead
+
+## Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+- Do not assume globals like (`new Date()`) are available.
+
+## Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection

frontend/README.md

@@ -0,0 +1,59 @@
+# Frontend
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.3.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+
+## Running unit tests
+
+To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

frontend/angular.json

@@ -0,0 +1,97 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm"
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "frontend": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss",
+          "skipTests": true
+        },
+        "@schematics/angular:class": {
+          "skipTests": true
+        },
+        "@schematics/angular:directive": {
+          "skipTests": true
+        },
+        "@schematics/angular:guard": {
+          "skipTests": true
+        },
+        "@schematics/angular:interceptor": {
+          "skipTests": true
+        },
+        "@schematics/angular:pipe": {
+          "skipTests": true
+        },
+        "@schematics/angular:resolver": {
+          "skipTests": true
+        },
+        "@schematics/angular:service": {
+          "skipTests": true
+        }
+      },
+      "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"
+        }
+      }
+    }
+  }
+}

frontend/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "frontend",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "packageManager": "npm@10.9.4",
+  "dependencies": {
+    "@angular/cdk": "^21.2.3",
+    "@angular/common": "^21.2.0",
+    "@angular/compiler": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/material": "^21.2.3",
+    "@angular/platform-browser": "^21.2.0",
+    "@angular/router": "^21.2.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^21.2.3",
+    "@angular/cli": "^21.2.3",
+    "@angular/compiler-cli": "^21.2.0",
+    "prettier": "^3.8.1",
+    "typescript": "~5.9.2"
+  }
+}

frontend/src/app/app.config.ts

@@ -0,0 +1,8 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    
+  ]
+};

frontend/src/app/app.html

@@ -0,0 +1 @@
+<app-dashboard />

frontend/src/app/app.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { Dashboard } from './dashboard/dashboard';
+
+@Component({
+  selector: 'app-root',
+  imports: [Dashboard],
+  templateUrl: './app.html',
+  styleUrl: './app.scss',
+})
+export class App {}

frontend/src/app/core/mocks/alerts.mock.ts

@@ -0,0 +1,45 @@
+export interface AlertData {
+  id: number;
+  timestamp: string;
+  severity: 'critical' | 'warning' | 'info';
+  message: string;
+  source: string;
+}
+
+export const ALERT_MOCKS: AlertData[] = [
+  {
+    id: 1,
+    timestamp: '2026-03-24T10:32:00Z',
+    severity: 'critical',
+    message: 'Node B-12 unresponsive for 5 minutes',
+    source: 'Network Monitor',
+  },
+  {
+    id: 2,
+    timestamp: '2026-03-24T10:28:00Z',
+    severity: 'warning',
+    message: 'CPU usage above 85% on Cluster A',
+    source: 'Resource Monitor',
+  },
+  {
+    id: 3,
+    timestamp: '2026-03-24T10:15:00Z',
+    severity: 'info',
+    message: 'AI detected anomalous traffic pattern in Zone 3',
+    source: 'AI Insights',
+  },
+  {
+    id: 4,
+    timestamp: '2026-03-24T09:58:00Z',
+    severity: 'warning',
+    message: 'SSL certificate expires in 7 days for api.example.com',
+    source: 'Cert Monitor',
+  },
+  {
+    id: 5,
+    timestamp: '2026-03-24T09:45:00Z',
+    severity: 'info',
+    message: 'Auto-scaling triggered: +2 instances in Region US-East',
+    source: 'AI Insights',
+  },
+];

frontend/src/app/core/mocks/kpi.mock.ts

@@ -0,0 +1,41 @@
+export interface KpiData {
+  title: string;
+  value: string;
+  unit?: string;
+  trend: 'up' | 'down' | 'stable';
+  trendLabel: string;
+  icon: string;
+}
+
+export const KPI_MOCKS: KpiData[] = [
+  {
+    title: 'Network Health',
+    value: '98.2',
+    unit: '%',
+    trend: 'up',
+    trendLabel: '+1.5% from last hour',
+    icon: 'hub',
+  },
+  {
+    title: 'Critical Incidents',
+    value: '3',
+    trend: 'down',
+    trendLabel: '-2 from yesterday',
+    icon: 'error_outline',
+  },
+  {
+    title: 'Threat Severity',
+    value: 'Low',
+    trend: 'stable',
+    trendLabel: 'No change',
+    icon: 'shield',
+  },
+  {
+    title: 'Site Availability',
+    value: '99.97',
+    unit: '%',
+    trend: 'up',
+    trendLabel: '+0.03% this week',
+    icon: 'cloud_done',
+  },
+];

frontend/src/app/dashboard/alert-list/alert-list.html

@@ -0,0 +1,23 @@
+<mat-card class="alert-card" appearance="outlined">
+  <mat-card-content>
+    <h3 class="alert-title">Recent Alerts &amp; AI Insights</h3>
+    <ul class="alert-list">
+      @for (alert of alerts(); track alert.id) {
+        <li class="alert-item">
+          <mat-icon [class]="'severity-icon severity-' + alert.severity">
+            {{ severityIcon(alert.severity) }}
+          </mat-icon>
+          <div class="alert-body">
+            <span class="alert-message">{{ alert.message }}</span>
+            <span class="alert-meta">
+              {{ alert.source }} · {{ alert.timestamp | date: 'HH:mm' }}
+            </span>
+          </div>
+          <span [class]="'severity-badge severity-' + alert.severity">
+            {{ alert.severity }}
+          </span>
+        </li>
+      }
+    </ul>
+  </mat-card-content>
+</mat-card>

frontend/src/app/dashboard/alert-list/alert-list.scss

@@ -0,0 +1,92 @@
+:host {
+  display: block;
+}
+
+.alert-card {
+  border-radius: var(--pf-radius-md);
+}
+
+.alert-title {
+  font: var(--mat-sys-title-medium);
+  color: var(--mat-sys-on-surface);
+  margin: 0 0 var(--pf-spacing-md);
+}
+
+.alert-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-spacing-sm);
+}
+
+.alert-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--pf-spacing-md);
+  padding: var(--pf-spacing-md);
+  border-radius: var(--pf-radius-sm);
+  background: var(--mat-sys-surface-container-low);
+}
+
+.severity-icon {
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  margin-top: 2px;
+
+  &.severity-critical {
+    color: var(--pf-severity-critical);
+  }
+
+  &.severity-warning {
+    color: var(--pf-severity-warning);
+  }
+
+  &.severity-info {
+    color: var(--pf-severity-info);
+  }
+}
+
+.alert-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-spacing-xs);
+}
+
+.alert-message {
+  font: var(--mat-sys-body-medium);
+  color: var(--mat-sys-on-surface);
+}
+
+.alert-meta {
+  font: var(--mat-sys-label-small);
+  color: var(--mat-sys-on-surface-variant);
+}
+
+.severity-badge {
+  flex-shrink: 0;
+  font: var(--mat-sys-label-small);
+  padding: var(--pf-spacing-xs) var(--pf-spacing-sm);
+  border-radius: var(--pf-radius-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+
+  &.severity-critical {
+    background: rgba(211, 47, 47, 0.1);
+    color: var(--pf-severity-critical);
+  }
+
+  &.severity-warning {
+    background: rgba(237, 108, 2, 0.1);
+    color: var(--pf-severity-warning);
+  }
+
+  &.severity-info {
+    background: rgba(2, 136, 209, 0.1);
+    color: var(--pf-severity-info);
+  }
+}

frontend/src/app/dashboard/alert-list/alert-list.ts

@@ -0,0 +1,24 @@
+import { Component, input } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { MatCard, MatCardContent } from '@angular/material/card';
+import { MatIcon } from '@angular/material/icon';
+import { AlertData } from '../../core/mocks/alerts.mock';
+
+@Component({
+  selector: 'app-alert-list',
+  imports: [DatePipe, MatCard, MatCardContent, MatIcon],
+  templateUrl: './alert-list.html',
+  styleUrl: './alert-list.scss',
+})
+export class AlertList {
+  alerts = input.required<AlertData[]>();
+
+  protected severityIcon(severity: AlertData['severity']): string {
+    const icons: Record<string, string> = {
+      critical: 'error',
+      warning: 'warning',
+      info: 'info',
+    };
+    return icons[severity];
+  }
+}

frontend/src/app/dashboard/chart-placeholder/chart-placeholder.html

@@ -0,0 +1,9 @@
+<mat-card class="chart-card" appearance="outlined">
+  <mat-card-content>
+    <h3 class="chart-title">{{ title() }}</h3>
+    <div class="chart-area">
+      <mat-icon class="chart-icon">bar_chart</mat-icon>
+      <span class="chart-label">Chart library not yet installed</span>
+    </div>
+  </mat-card-content>
+</mat-card>

frontend/src/app/dashboard/chart-placeholder/chart-placeholder.scss

@@ -0,0 +1,37 @@
+:host {
+  display: block;
+}
+
+.chart-card {
+  height: 100%;
+  border-radius: var(--pf-radius-md);
+}
+
+.chart-title {
+  font: var(--mat-sys-title-medium);
+  color: var(--mat-sys-on-surface);
+  margin: 0 0 var(--pf-spacing-md);
+}
+
+.chart-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  border: 2px dashed var(--mat-sys-outline-variant);
+  border-radius: var(--pf-radius-sm);
+  gap: var(--pf-spacing-sm);
+}
+
+.chart-icon {
+  font-size: 48px;
+  width: 48px;
+  height: 48px;
+  color: var(--mat-sys-outline);
+}
+
+.chart-label {
+  font: var(--mat-sys-body-medium);
+  color: var(--mat-sys-on-surface-variant);
+}

frontend/src/app/dashboard/chart-placeholder/chart-placeholder.ts

@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+import { MatCard, MatCardContent } from '@angular/material/card';
+import { MatIcon } from '@angular/material/icon';
+
+@Component({
+  selector: 'app-chart-placeholder',
+  imports: [MatCard, MatCardContent, MatIcon],
+  templateUrl: './chart-placeholder.html',
+  styleUrl: './chart-placeholder.scss',
+})
+export class ChartPlaceholder {
+  title = input.required<string>();
+}

frontend/src/app/dashboard/dashboard.html

@@ -0,0 +1,30 @@
+<section class="dashboard">
+  <header class="dashboard-header">
+    <h1 class="dashboard-title">PulseFabric Monitor</h1>
+    <p class="dashboard-subtitle">Real-time infrastructure monitoring dashboard</p>
+  </header>
+
+  <div class="kpi-grid">
+    @for (kpi of kpis; track kpi.title) {
+      <app-kpi-card
+        [title]="kpi.title"
+        [value]="kpi.value"
+        [unit]="kpi.unit ?? ''"
+        [trend]="kpi.trend"
+        [trendLabel]="kpi.trendLabel"
+        [icon]="kpi.icon"
+      />
+    }
+  </div>
+
+  <div class="chart-grid">
+    <app-chart-placeholder title="Network Traffic (24h)" />
+    <app-chart-placeholder title="Incident Trend (7d)" />
+  </div>
+
+  <app-alert-list [alerts]="alerts" />
+
+  <div id="ai-dropzone" class="ai-dropzone">
+    <span class="dropzone-label">AI Widget Drop Zone</span>
+  </div>
+</section>

frontend/src/app/dashboard/dashboard.scss

@@ -0,0 +1,71 @@
+:host {
+  display: block;
+}
+
+.dashboard {
+  max-width: var(--pf-content-max-width);
+  margin: 0 auto;
+  padding: var(--pf-spacing-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-spacing-xl);
+}
+
+.dashboard-header {
+  padding: var(--pf-spacing-lg) 0;
+}
+
+.dashboard-title {
+  font: var(--mat-sys-headline-large);
+  color: var(--mat-sys-on-surface);
+  margin: 0;
+}
+
+.dashboard-subtitle {
+  font: var(--mat-sys-body-large);
+  color: var(--mat-sys-on-surface-variant);
+  margin: var(--pf-spacing-xs) 0 0;
+}
+
+.kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--pf-spacing-lg);
+}
+
+.chart-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--pf-spacing-lg);
+}
+
+.ai-dropzone {
+  min-height: 120px;
+  border: 2px dashed var(--mat-sys-outline-variant);
+  border-radius: var(--pf-radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dropzone-label {
+  font: var(--mat-sys-body-medium);
+  color: var(--mat-sys-outline);
+}
+
+@media (max-width: 1024px) {
+  .kpi-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 600px) {
+  .kpi-grid,
+  .chart-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .dashboard {
+    padding: var(--pf-spacing-md);
+  }
+}

frontend/src/app/dashboard/dashboard.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { KpiCard } from './kpi-card/kpi-card';
+import { ChartPlaceholder } from './chart-placeholder/chart-placeholder';
+import { AlertList } from './alert-list/alert-list';
+import { KPI_MOCKS } from '../core/mocks/kpi.mock';
+import { ALERT_MOCKS } from '../core/mocks/alerts.mock';
+
+@Component({
+  selector: 'app-dashboard',
+  imports: [KpiCard, ChartPlaceholder, AlertList],
+  templateUrl: './dashboard.html',
+  styleUrl: './dashboard.scss',
+})
+export class Dashboard {
+  protected readonly kpis = KPI_MOCKS;
+  protected readonly alerts = ALERT_MOCKS;
+}

frontend/src/app/dashboard/kpi-card/kpi-card.html

@@ -0,0 +1,18 @@
+<mat-card class="kpi-card" appearance="outlined">
+  <mat-card-content>
+    <div class="kpi-header">
+      <mat-icon class="kpi-icon">{{ icon() }}</mat-icon>
+      <span class="kpi-title">{{ title() }}</span>
+    </div>
+    <div class="kpi-value">
+      {{ value() }}
+      @if (unit()) {
+        <span class="kpi-unit">{{ unit() }}</span>
+      }
+    </div>
+    <div class="kpi-trend" [class]="'kpi-trend trend-' + trend()">
+      <mat-icon class="trend-icon">{{ trendIcon() }}</mat-icon>
+      <span>{{ trendLabel() }}</span>
+    </div>
+  </mat-card-content>
+</mat-card>

frontend/src/app/dashboard/kpi-card/kpi-card.scss

@@ -0,0 +1,63 @@
+:host {
+  display: block;
+}
+
+.kpi-card {
+  height: 100%;
+  border-radius: var(--pf-radius-md);
+}
+
+.kpi-header {
+  display: flex;
+  align-items: center;
+  gap: var(--pf-spacing-sm);
+  margin-bottom: var(--pf-spacing-md);
+}
+
+.kpi-icon {
+  color: var(--mat-sys-primary);
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+}
+
+.kpi-title {
+  font: var(--mat-sys-title-small);
+  color: var(--mat-sys-on-surface-variant);
+}
+
+.kpi-value {
+  font: var(--mat-sys-display-small);
+  color: var(--mat-sys-on-surface);
+  margin-bottom: var(--pf-spacing-sm);
+}
+
+.kpi-unit {
+  font: var(--mat-sys-title-medium);
+  color: var(--mat-sys-on-surface-variant);
+}
+
+.kpi-trend {
+  display: flex;
+  align-items: center;
+  gap: var(--pf-spacing-xs);
+  font: var(--mat-sys-label-medium);
+}
+
+.trend-icon {
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+}
+
+.trend-up {
+  color: #2e7d32;
+}
+
+.trend-down {
+  color: var(--pf-severity-critical);
+}
+
+.trend-stable {
+  color: var(--mat-sys-on-surface-variant);
+}

frontend/src/app/dashboard/kpi-card/kpi-card.ts

@@ -0,0 +1,27 @@
+import { Component, computed, input } from '@angular/core';
+import { MatCard, MatCardContent } from '@angular/material/card';
+import { MatIcon } from '@angular/material/icon';
+
+@Component({
+  selector: 'app-kpi-card',
+  imports: [MatCard, MatCardContent, MatIcon],
+  templateUrl: './kpi-card.html',
+  styleUrl: './kpi-card.scss',
+})
+export class KpiCard {
+  title = input.required<string>();
+  value = input.required<string>();
+  unit = input<string>();
+  trend = input.required<'up' | 'down' | 'stable'>();
+  trendLabel = input.required<string>();
+  icon = input.required<string>();
+
+  protected trendIcon = computed(() => {
+    const icons: Record<string, string> = {
+      up: 'trending_up',
+      down: 'trending_down',
+      stable: 'trending_flat',
+    };
+    return icons[this.trend()];
+  });
+}

frontend/src/app/shared/styles/_tokens.scss

@@ -0,0 +1,27 @@
+:root {
+  // Spacing
+  --pf-spacing-xs: 4px;
+  --pf-spacing-sm: 8px;
+  --pf-spacing-md: 16px;
+  --pf-spacing-lg: 24px;
+  --pf-spacing-xl: 32px;
+  --pf-spacing-2xl: 48px;
+
+  // Border radius
+  --pf-radius-sm: 8px;
+  --pf-radius-md: 12px;
+  --pf-radius-lg: 16px;
+
+  // Shadows
+  --pf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --pf-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+  // Layout
+  --pf-content-max-width: 1400px;
+  --pf-header-height: 64px;
+
+  // Severity colors
+  --pf-severity-critical: #d32f2f;
+  --pf-severity-warning: #ed6c02;
+  --pf-severity-info: #0288d1;
+}

frontend/src/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>PulseFabric Monitor</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

frontend/src/main.ts

@@ -0,0 +1,6 @@
+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));

frontend/src/styles.scss

@@ -0,0 +1,40 @@
+// Include theming for Angular Material with `mat.theme()`.
+// This Sass mixin will define CSS variables that are used for styling Angular Material
+// components according to the Material 3 design spec.
+// Learn more about theming and how to use it for your application's
+// custom components at https://material.angular.dev/guide/theming
+@use '@angular/material' as mat;
+@use 'app/shared/styles/tokens';
+
+html {
+  height: 100%;
+  @include mat.theme(
+    (
+      color: (
+        primary: mat.$violet-palette,
+        tertiary: mat.$blue-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+}
+
+body {
+  // Default the application to a light color theme. This can be changed to
+  // `dark` to enable the dark color theme, or to `light dark` to defer to the
+  // user's system settings.
+  color-scheme: light;
+
+  // Set a default background, font and text colors for the application using
+  // Angular Material's system-level CSS variables. Learn more about these
+  // variables at https://material.angular.dev/guide/system-variables
+  background-color: var(--mat-sys-surface);
+  color: var(--mat-sys-on-surface);
+  font: var(--mat-sys-body-medium);
+
+  // Reset the user agent margin.
+  margin: 0;
+  height: 100%;
+}
+/* You can add global styles to this file, and also import other style files */

frontend/tsconfig.app.json

@@ -0,0 +1,15 @@
+/* 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/app",
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
+  ]
+}

frontend/tsconfig.json

@@ -0,0 +1,30 @@
+/* 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. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

frontend/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* 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"
+    ]
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.spec.ts"
+  ]
+}