🚀 Telecom Fault Dashboard

Angular 21 + .NET 8 • HttpOnly Cookie Authentication • Signals + Lazy Routes

---

🛰 Overview

A modern Network Operations Center (NOC) dashboard for monitoring and managing telecom network faults.
Built with Angular 21 (using Signals, inject(), @if, @for, lazy routes) and .NET 8 Minimal API using secure HttpOnly session cookies (no localStorage).

---

⚡ Key Features

• 🔐 Secure Login – Auth via HttpOnly cookie (/api/auth/login) so Angular never stores tokens.
• 🌐 Sites Dashboard – Filter by region and type (Fibre / 5G) using signals and computed().
• ⚙️ Faults Module – Filter by severity and open/closed state; compute MTTR automatically.
• 🧭 Fault Detail Page – Close or inspect a single fault with one click.
• 📊 Reports Page – Aggregates open fault counts, critical issues, and mean repair time.
• 🧩 Modern Angular APIs – Uses new control flow (@if, @for), functional DI (inject()), and lazy modules.
• 🔄 No localStorage – Cookies only; safe from XSS token theft.

---

🧰 Project Structure

├─ telecom-fault-dashboard/ # Angular 21 frontend │ ├─ proxy.conf.json │ └─ src/app/... └─ TelecomFaults/ # .NET 8 Minimal API backend ├─ Program.cs ├─ appsettings.json └─ (Controllers, Models, Services)

💡 If your backend path differs, update the target in proxy.conf.json.

---

🧱 Prerequisites

Tool	Version	Purpose
Node.js	≥ 20.x	Angular CLI
npm	≥ 10.x	Package manager
.NET SDK	≥ 8.x	API
PostgreSQL (optional)	≥ 14	Persistence layer

🖥 Frontend Setup (Angular 21)

• bash
• cd telecom-fault-dashboard
• npm install

Dev proxy is already configured:

"proxyConfig": "proxy.conf.json"

• ng serve

→ http://localhost:4200

proxy.conf.json

{ "/api": { "target": "http://localhost:5059", "secure": false, "changeOrigin": true } }

⚙ Backend Setup (.NET 8 Minimal API)

cd TelecomFaults
dotnet run --urls http://localhost:5059

→ API runs at http://localhost:5059

🚀 Quick Start

• Start backend:

• dotnet run --urls http://localhost:5059

• Start frontend:

• ng serve

• Open in browser:

• http://localhost:4200

• Demo login:

• username: demo

• password: pass

Explore:

🏗 Sites

⚡ Faults

📊 Reports

🧠 Why It’s “Modern Angular”

Modern Feature	Benefit
@if / @for	Replaces *ngIf / *ngFor, improves performance & readability
Signals (signal, computed, effect)	Reactive state without RxJS boilerplate
inject()	Functional DI (no constructors) in components, guards, and interceptors
Lazy Routes	Faster initial load and modular structure
HttpOnly Cookies	Eliminates token storage in JS, more secure

🔒 Security Highlights

• No localStorage or sessionStorage used for authentication.

• All auth handled via HttpOnly cookies.

• CSRF-safe by default (Angular withCredentials + .NET cookie auth).

• Backend CORS allows http://localhost:4200 with credentials.