From 235de6597515ab7ea038e9f2c632cd9986dd5da6 Mon Sep 17 00:00:00 2001
From: wangwei <Wei.Wang@t-systems.com>
Date: Wed, 3 Jun 2026 17:26:22 +0800
Subject: [PATCH] feat: implement System Status page with stats grid, panel
 grid, KPI strip

---
 frontend/src/pages/Status/StatusPage.tsx | 154 ++++++++++++++++++++++-
 1 file changed, 153 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/Status/StatusPage.tsx b/frontend/src/pages/Status/StatusPage.tsx
index a91dbb8..4d31d04 100644
--- a/frontend/src/pages/Status/StatusPage.tsx
+++ b/frontend/src/pages/Status/StatusPage.tsx
@@ -1,3 +1,155 @@
+import { useState, useEffect } from 'react';
+import { Topbar } from '../../components/layout/Topbar';
+import { Search, Upload, Download } from 'lucide-react';
+
+interface Stats { total_documents: number; vector_chunks: number; high_impact: number; last_90_days: number; }
+
+const TASKS = [
+  { name: 'EU AI Act — Article 13 check', status: 'ok', progress: 88, cta: 'View report' },
+  { name: 'GB/T 42118 compliance scan', status: 'warn', progress: 54, cta: 'Continue' },
+  { name: 'MIIT Draft — automotive AI embedding', status: 'info', progress: 12, cta: 'Start' },
+];
+
+const PROGRAMS = [
+  { name: 'EU AI Act Readiness', status: 'ok', coverage: 88 },
+  { name: 'China MIIT Compliance', status: 'warn', coverage: 54 },
+  { name: 'ISO/SAE 21434 Audit', status: 'info', coverage: 32 },
+];
+
+const KPIS = [
+  { label: 'Retrieval hit rate', value: 94, unit: '%' },
+  { label: 'Evidence coverage', value: 78, unit: '%' },
+  { label: 'Reviewer SLA', value: 91, unit: '%' },
+];
+
+const SERVICES = [
+  { name: 'Vector store (Chroma)', status: 'ok' },
+  { name: 'LLM gateway (Claude)', status: 'ok' },
+  { name: 'Document parser', status: 'ok' },
+  { name: 'SSE stream endpoint', status: 'ok' },
+  { name: 'Regulation feed sync', status: 'warn' },
+];
+
+const EVENTS = [
+  { date: '2025-11-18', title: 'EU AI Act — Delegated acts published', summary: 'European Commission releases implementing rules for high-risk AI classification under Annex III.' },
+  { date: '2025-10-30', title: 'MIIT Draft — automotive AI', summary: 'New draft regulation covers in-vehicle AI training data provenance and OTA update governance.' },
+  { date: '2025-10-05', title: 'ISO/SAE 21434 amendment', summary: 'Amendment 1 clarifies cybersecurity management system scope for software-only updates.' },
+];
+
+const STATUS_LABEL: Record<string, string> = { ok: 'Complete', warn: 'In progress', info: 'Pending' };
+
 export function StatusPage() {
-  return <div className="page-content"><p>Status</p></div>;
+  const [stats, setStats] = useState<Stats | null>(null);
+
+  useEffect(() => {
+    fetch('/api/v1/perception/stats')
+      .then(r => r.json())
+      .then(d => setStats(d))
+      .catch(() => setStats({ total_documents: 42, vector_chunks: 3841, high_impact: 7, last_90_days: 14 }));
+  }, []);
+
+  return (
+    <div className="status-page">
+      <Topbar
+        title="System Status"
+        actions={
+          <>
+            <div className="search-box">
+              <Search size={13} />
+              <input placeholder="Search..." />
+            </div>
+            <button className="btn sm"><Download size={13} />Export status</button>
+            <button className="btn sm primary"><Upload size={13} />New upload</button>
+          </>
+        }
+      />
+      <div className="page-content">
+        <div className="stats-grid">
+          <div className="stat-cell">
+            <div className="stat-value">{stats?.total_documents ?? '—'}</div>
+            <div className="stat-label">Documents indexed</div>
+          </div>
+          <div className="stat-cell">
+            <div className="stat-value">{stats?.vector_chunks?.toLocaleString() ?? '—'}</div>
+            <div className="stat-label">Vector chunks</div>
+          </div>
+          <div className="stat-cell danger">
+            <div className="stat-value">{stats?.high_impact ?? '—'}</div>
+            <div className="stat-label">High-impact signals</div>
+          </div>
+          <div className="stat-cell">
+            <div className="stat-value">{stats?.last_90_days ?? '—'}</div>
+            <div className="stat-label">Last 90 days</div>
+          </div>
+        </div>
+
+        <div className="panel-grid">
+          <div className="panel-left">
+            <div className="card">
+              <div className="card-header">Workflow queue</div>
+              {TASKS.map(t => (
+                <div key={t.name} className="task-row">
+                  <div className="task-info">
+                    <div className="task-name">{t.name}</div>
+                    <div className="task-progress-bar">
+                      <div className="task-progress-fill" style={{ width: `${t.progress}%` }} />
+                    </div>
+                  </div>
+                  <span className={`status ${t.status}`}>{STATUS_LABEL[t.status]}</span>
+                  <button className="btn sm">{t.cta}</button>
+                </div>
+              ))}
+            </div>
+
+            <div className="card">
+              <div className="card-header">Active compliance programs</div>
+              {PROGRAMS.map(p => (
+                <div key={p.name} className="program-row">
+                  <span className={`status ${p.status}`} style={{ marginRight: 'auto' }}>{p.name}</span>
+                  <span className="program-pct">{p.coverage}%</span>
+                </div>
+              ))}
+              <div className="kpi-strip">
+                {KPIS.map(k => (
+                  <div key={k.label} className="kpi-item">
+                    <div className="kpi-label">{k.label}</div>
+                    <div className="kpi-bar"><div className="kpi-fill" style={{ width: `${k.value}%` }} /></div>
+                    <div className="kpi-value">{k.value}{k.unit}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <div className="panel-right">
+            <div className="card">
+              <div className="card-header">System health</div>
+              {SERVICES.map(s => (
+                <div key={s.name} className="service-row">
+                  <span className="service-name">{s.name}</span>
+                  <span className={`status ${s.status}`}>{s.status === 'ok' ? 'Online' : 'Degraded'}</span>
+                </div>
+              ))}
+            </div>
+
+            <div className="card">
+              <div className="card-header">Regulatory watch</div>
+              {EVENTS.map(e => (
+                <div key={e.title} className="event-row">
+                  <div className="event-date">{e.date}</div>
+                  <div className="event-title">{e.title}</div>
+                  <div className="event-summary">{e.summary}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <footer className="page-footer">
+        <div className="live-dot" />
+        <span>Regulation Hub · T-Systems AI · Online</span>
+      </footer>
+    </div>
+  );
 }