From c80417298a1a9f90900799d1d6645037282aa5d6 Mon Sep 17 00:00:00 2001
From: nutcas3 <mauricee423@gmail.com>
Date: Fri, 17 Apr 2026 16:41:00 +0300
Subject: [PATCH] feat: Add system health monitoring page with service metrics
 and status tracking

- Add HealthPage component with service grid layout and status badges
- Add six monitored services: API Server, PostgreSQL, Redis Cache, Charging Engine, AMF Gateway, ES2+ SM-DP+
- Add service metrics: status, latency, uptime, CPU usage, memory consumption
- Add HeartPulse icon header with page title and description
- Add statusVariant mapping healthy to success badge and degraded to warning badge
- Display metrics
---
 apps/web-dashboard/src/app/health/page.tsx | 62 ++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 apps/web-dashboard/src/app/health/page.tsx

diff --git a/apps/web-dashboard/src/app/health/page.tsx b/apps/web-dashboard/src/app/health/page.tsx
new file mode 100644
index 0000000..10acf43
--- /dev/null
+++ b/apps/web-dashboard/src/app/health/page.tsx
@@ -0,0 +1,62 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { HeartPulse, Server, Database, Cpu, HardDrive, Wifi } from "lucide-react";
+
+const services = [
+  { name: "API Server", icon: Server, status: "healthy", latency: "12ms", uptime: "99.99%", cpu: "23%", memory: "512 MB" },
+  { name: "PostgreSQL", icon: Database, status: "healthy", latency: "3ms", uptime: "99.97%", cpu: "15%", memory: "2.1 GB" },
+  { name: "Redis Cache", icon: Database, status: "healthy", latency: "1ms", uptime: "99.99%", cpu: "5%", memory: "256 MB" },
+  { name: "Charging Engine (Rust)", icon: Cpu, status: "healthy", latency: "2ms", uptime: "99.98%", cpu: "8%", memory: "64 MB" },
+  { name: "AMF Gateway", icon: Wifi, status: "healthy", latency: "45ms", uptime: "99.95%", cpu: "12%", memory: "128 MB" },
+  { name: "ES2+ SM-DP+", icon: HardDrive, status: "degraded", latency: "230ms", uptime: "98.50%", cpu: "N/A", memory: "N/A" },
+];
+
+export default function HealthPage() {
+  return (
+    <div className="p-8 space-y-6">
+      <div className="flex items-center gap-3">
+        <HeartPulse className="size-8 text-emerald-600" />
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">System Health</h1>
+          <p className="text-muted-foreground mt-1">Monitor service health, latency, and resource usage.</p>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+        {services.map((svc) => (
+          <Card key={svc.name}>
+            <CardHeader className="flex-row items-center justify-between pb-2">
+              <div className="flex items-center gap-2">
+                <svc.icon className="size-5 text-muted-foreground" />
+                <CardTitle className="text-base">{svc.name}</CardTitle>
+              </div>
+              <Badge variant={svc.status === "healthy" ? "success" : "warning"}>
+                {svc.status}
+              </Badge>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-2 gap-y-2 text-sm">
+                <div>
+                  <p className="text-muted-foreground text-xs">Latency</p>
+                  <p className="font-mono font-medium">{svc.latency}</p>
+                </div>
+                <div>
+                  <p className="text-muted-foreground text-xs">Uptime</p>
+                  <p className="font-mono font-medium">{svc.uptime}</p>
+                </div>
+                <div>
+                  <p className="text-muted-foreground text-xs">CPU</p>
+                  <p className="font-mono font-medium">{svc.cpu}</p>
+                </div>
+                <div>
+                  <p className="text-muted-foreground text-xs">Memory</p>
+                  <p className="font-mono font-medium">{svc.memory}</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}