feat: Performance Monitoring Dashboard

src/lib/monitoring/alerts.ts

@@ -0,0 +1,28 @@
+import { Metric } from "./provider";
+
+export type Alert = {
+  message: string;
+  severity: "low" | "high";
+};
+
+export function checkAlerts(metrics: Metric[]): Alert[] {
+  const alerts: Alert[] = [];
+
+  metrics.forEach((m) => {
+    if (m.name === "response_time" && m.value > 400) {
+      alerts.push({
+        message: "High response time detected",
+        severity: "high",
+      });
+    }
+
+    if (m.name === "error_rate" && m.value > 3) {
+      alerts.push({
+        message: "Error rate is above threshold",
+        severity: "high",
+      });
+    }
+  });
+
+  return alerts;
+}

src/lib/monitoring/metrics.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+import { LocalMonitoringProvider, Metric } from "./provider";
+
+const provider = new LocalMonitoringProvider();
+
+export function useMetrics() {
+  const [metrics, setMetrics] = useState<Metric[]>([]);
+
+  useEffect(() => {
+    const fetchMetrics = async () => {
+      const data = await provider.getMetrics();
+      setMetrics(data);
+    };
+
+    fetchMetrics();
+    const interval = setInterval(fetchMetrics, 5000); // real-time updates
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return metrics;
+}

src/lib/monitoring/provider.ts

@@ -0,0 +1,27 @@
+export type Metric = {
+  name: string;
+  value: number;
+  timestamp: number;
+};
+
+export interface MonitoringProvider {
+  getMetrics(): Promise<Metric[]>;
+}
+
+// Simple local provider (can swap with Datadog/New Relic later)
+export class LocalMonitoringProvider implements MonitoringProvider {
+  async getMetrics(): Promise<Metric[]> {
+    return [
+      {
+        name: "response_time",
+        value: Math.random() * 500,
+        timestamp: Date.now(),
+      },
+      {
+        name: "error_rate",
+        value: Math.random() * 5,
+        timestamp: Date.now(),
+      },
+    ];
+  }
+}

src/pages/admin/monitoring.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { useMetrics } from "@/lib/monitoring/metrics";
+import { checkAlerts } from "@/lib/monitoring/alerts";
+
+const MonitoringDashboard: React.FC = () => {
+  const metrics = useMetrics();
+  const alerts = checkAlerts(metrics);
+
+  return (
+    <div className="p-6">
+      <h1 className="text-xl font-semibold mb-4">
+        Performance Monitoring Dashboard
+      </h1>
+
+      {/* Alerts */}
+      {alerts.length > 0 && (
+        <div className="mb-4 space-y-2">
+          {alerts.map((alert, i) => (
+            <div
+              key={i}
+              className="p-3 bg-red-100 text-red-700 rounded"
+            >
+              🚨 {alert.message}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Metrics */}
+      <div className="grid grid-cols-2 gap-4">
+        {metrics.map((metric) => (
+          <div
+            key={metric.name}
+            className="p-4 border rounded shadow-sm"
+          >
+            <p className="text-sm text-gray-500">{metric.name}</p>
+            <p className="text-lg font-bold">
+              {metric.value.toFixed(2)}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MonitoringDashboard;