From 07ccf055ab599d2dc27efd93cb5298bcbb3a35a1 Mon Sep 17 00:00:00 2001
From: wangwei <Wei.Wang@t-systems.com>
Date: Wed, 3 Jun 2026 17:22:25 +0800
Subject: [PATCH] feat: implement Overview launcher page with hero, workflow
 steps, screen grid

---
 frontend/src/pages/Overview/OverviewPage.tsx | 86 +++++++++++++++++++-
 1 file changed, 85 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/Overview/OverviewPage.tsx b/frontend/src/pages/Overview/OverviewPage.tsx
index c34b8a1..9dd9be9 100644
--- a/frontend/src/pages/Overview/OverviewPage.tsx
+++ b/frontend/src/pages/Overview/OverviewPage.tsx
@@ -1,3 +1,87 @@
+import { useNavigate } from 'react-router-dom';
+import { ArrowRight, BarChart2, Eye, FileText, Shield, MessageSquare, Monitor } from 'lucide-react';
+
+const SCREENS = [
+  { id: 'status', label: 'System Status', icon: <Monitor size={20} />, to: '/status', desc: 'Live health and workflow queue' },
+  { id: 'signals', label: 'Regulatory Signals', icon: <Eye size={20} />, to: '/signals', desc: 'AI-detected regulatory changes' },
+  { id: 'documents', label: 'Document Management', icon: <FileText size={20} />, to: '/documents', desc: 'Upload and inspect documents' },
+  { id: 'compliance', label: 'Compliance Analysis', icon: <Shield size={20} />, to: '/compliance', desc: 'Three-column compliance workspace' },
+  { id: 'chat', label: 'Regulation Q&A', icon: <MessageSquare size={20} />, to: '/chat', desc: 'Chat with cited regulation sources' },
+  { id: 'analytics', label: 'Analytics', icon: <BarChart2 size={20} />, to: '/status', desc: 'KPIs and coverage metrics' },
+];
+
+const STEPS = [
+  { num: '01', label: 'Upload', desc: 'Ingest regulation documents' },
+  { num: '02', label: 'Process', desc: 'Embed and chunk via vector DB' },
+  { num: '03', label: 'Monitor', desc: 'Watch regulatory signal feed' },
+  { num: '04', label: 'Analyze', desc: 'Run compliance gap analysis' },
+  { num: '05', label: 'Review', desc: 'Inspect findings with AI assist' },
+  { num: '06', label: 'Chat', desc: 'Ask questions with cited answers' },
+];
+
 export function OverviewPage() {
-  return <div className="page-content"><p>Overview</p></div>;
+  const navigate = useNavigate();
+  return (
+    <div className="overview-page">
+      <section className="overview-hero">
+        <p className="hero-eyebrow">T-Systems · AI Regulation Hub</p>
+        <h1 className="hero-title">AI Compliance,<br />Automated end-to-end</h1>
+        <p className="hero-desc">
+          Monitor global AI regulations, analyze document compliance gaps,
+          and get cited answers — all in one platform.
+        </p>
+        <div className="hero-actions">
+          <button className="btn primary" onClick={() => navigate('/status')}>
+            Open dashboard <ArrowRight size={14} />
+          </button>
+          <button className="btn" onClick={() => navigate('/chat')}>
+            Jump to regulation chat
+          </button>
+        </div>
+      </section>
+
+      <div className="overview-summary card">
+        <div className="summary-item">
+          <span className="summary-num">6</span>
+          <span className="summary-label">Screens</span>
+        </div>
+        <div className="summary-divider" />
+        <div className="summary-item">
+          <span className="summary-num">5</span>
+          <span className="summary-label">Backend-aware flows</span>
+        </div>
+        <div className="summary-divider" />
+        <div className="summary-item">
+          <span className="summary-num">AI</span>
+          <span className="summary-label">Review posture</span>
+        </div>
+      </div>
+
+      <section className="overview-workflow">
+        <h2 className="section-title">How it works</h2>
+        <div className="workflow-steps">
+          {STEPS.map(s => (
+            <div key={s.num} className="workflow-step">
+              <div className="step-num">{s.num}</div>
+              <div className="step-label">{s.label}</div>
+              <div className="step-desc">{s.desc}</div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="overview-screens">
+        <h2 className="section-title">Screens</h2>
+        <div className="screen-grid">
+          {SCREENS.map(s => (
+            <button key={s.id} className="screen-card card" onClick={() => navigate(s.to)}>
+              <div className="screen-icon">{s.icon}</div>
+              <div className="screen-label">{s.label}</div>
+              <div className="screen-desc">{s.desc}</div>
+            </button>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
 }