Init

client/src/pages/SlaKpi/index.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import PageHeader from '../../components/PageHeader';
+import SlaHeatmap from '../../components/charts/SlaHeatmap';
+import { getSla } from '../../services/analytics.service';
+import type { SlaMetric } from '../../types/analytics.types';
+import styles from './SlaKpi.module.scss';
+
+export default function SlaKpi({ refreshKey }: { refreshKey: number }) {
+  const [metrics, setMetrics] = useState<SlaMetric[] | null>(null);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    let alive = true;
+    setError(false);
+    getSla()
+      .then(r => { if (alive) setMetrics(r.metrics); })
+      .catch(() => { if (alive) setError(true); });
+    return () => { alive = false; };
+  }, [refreshKey]);
+
+  if (error) return <div className={styles.stateError}>Failed to load SLA metrics.</div>;
+  if (!metrics) return <div className={styles.state}>Loading SLA metrics…</div>;
+
+  return (
+    <div className={styles.page}>
+      <PageHeader title="PM KPIs — SLA" subtitle="Per-PM × ticket-size averages vs configured norms (green = on target, red = over)" />
+      <div className={styles.grid}>
+        {metrics.map(m => <SlaHeatmap key={m.key} metric={m} />)}
+      </div>
+    </div>
+  );
+}