0b37c5e692
Website (14 monoliths split): - compliance/page.tsx (1,519 → 9), docs/audit (1,262 → 20) - quality (1,231 → 16), alerts (1,203 → 10), docs (1,202 → 11) - i18n.ts (1,173 → 8 language files) - unity-bridge (1,094 → 12), backlog (1,087 → 6) - training (1,066 → 8), rag (1,063 → 8) - Deleted index_original.ts (4,899 LOC dead backup) Studio-v2 (5 monoliths split): - meet/page.tsx (1,481 → 9), messages (1,166 → 9) - AlertsB2BContext.tsx (1,165 → 5 modules) - alerts-b2b/page.tsx (1,019 → 6), korrektur/archiv (1,001 → 6) All existing imports preserved. Zero new TypeScript errors. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
99 lines
6.1 KiB
TypeScript
99 lines
6.1 KiB
TypeScript
export default function ArchitekturTab() {
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="bg-white rounded-xl shadow-sm border p-6">
|
|
<h2 className="text-xl font-semibold text-slate-900 mb-4">Systemarchitektur</h2>
|
|
<p className="text-slate-600 mb-6">
|
|
Das Compliance & Audit Framework ist modular aufgebaut und integriert sich nahtlos in die bestehende Breakpilot-Infrastruktur.
|
|
</p>
|
|
|
|
{/* Architecture Diagram */}
|
|
<div className="bg-slate-50 rounded-lg p-6 mb-6">
|
|
<pre className="text-sm text-slate-700 font-mono whitespace-pre overflow-x-auto">{`
|
|
┌─────────────────────────────────────────────────────────────────────────┐
|
|
│ COMPLIANCE FRAMEWORK │
|
|
├─────────────────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
|
|
│ │ Next.js │ │ FastAPI │ │ PostgreSQL │ │
|
|
│ │ Frontend │───▶│ Backend │───▶│ Database │ │
|
|
│ │ (Port 3000)│ │ (Port 8000)│ │ (Port 5432)│ │
|
|
│ └─────────────┘ └─────────────┘ └─────────────┘ │
|
|
│ │ │ │ │
|
|
│ │ │ │ │
|
|
│ ┌─────▼─────┐ ┌─────▼─────┐ ┌─────▼─────┐ │
|
|
│ │ Admin UI │ │ Compliance │ │ 7 Tables │ │
|
|
│ │ /admin/ │ │ Module │ │ compliance_│ │
|
|
│ │compliance/│ │ /backend/ │ │ regulations│ │
|
|
│ └───────────┘ │compliance/ │ │ _controls │ │
|
|
│ └───────────┘ │ _evidence │ │
|
|
│ │ _risks │ │
|
|
│ │ ... │ │
|
|
│ └───────────┘ │
|
|
└─────────────────────────────────────────────────────────────────────────┘
|
|
`}</pre>
|
|
</div>
|
|
|
|
{/* Component Details */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div className="border rounded-lg p-4">
|
|
<h3 className="font-semibold text-slate-900 mb-2">Frontend (Next.js)</h3>
|
|
<ul className="text-sm text-slate-600 space-y-1">
|
|
<li>- Dashboard mit Compliance Score</li>
|
|
<li>- Control Catalogue mit Filtern</li>
|
|
<li>- Evidence Upload & Management</li>
|
|
<li>- Risk Matrix Visualisierung</li>
|
|
<li>- Audit Export Wizard</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="border rounded-lg p-4">
|
|
<h3 className="font-semibold text-slate-900 mb-2">Backend (FastAPI)</h3>
|
|
<ul className="text-sm text-slate-600 space-y-1">
|
|
<li>- REST API Endpoints</li>
|
|
<li>- Repository Pattern</li>
|
|
<li>- Pydantic Schemas</li>
|
|
<li>- Seeder Service</li>
|
|
<li>- Export Generator</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="border rounded-lg p-4">
|
|
<h3 className="font-semibold text-slate-900 mb-2">Datenbank (PostgreSQL)</h3>
|
|
<ul className="text-sm text-slate-600 space-y-1">
|
|
<li>- compliance_regulations</li>
|
|
<li>- compliance_requirements</li>
|
|
<li>- compliance_controls</li>
|
|
<li>- compliance_control_mappings</li>
|
|
<li>- compliance_evidence</li>
|
|
<li>- compliance_risks</li>
|
|
<li>- compliance_audit_exports</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Data Flow */}
|
|
<div className="bg-white rounded-xl shadow-sm border p-6">
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4">Datenfluss</h3>
|
|
<div className="space-y-4">
|
|
{[
|
|
{ num: 1, bg: 'bg-blue-50', numBg: 'bg-blue-500', title: 'Regulations & Requirements', desc: 'EU-Verordnungen, BSI-Standards werden als Seed-Daten geladen' },
|
|
{ num: 2, bg: 'bg-green-50', numBg: 'bg-green-500', title: 'Controls & Mappings', desc: 'Technische Controls werden Requirements zugeordnet' },
|
|
{ num: 3, bg: 'bg-purple-50', numBg: 'bg-purple-500', title: 'Evidence Collection', desc: 'Nachweise werden manuell oder automatisiert erfasst' },
|
|
{ num: 4, bg: 'bg-orange-50', numBg: 'bg-orange-500', title: 'Audit Export', desc: 'ZIP-Pakete fuer externe Pruefer generieren' },
|
|
].map((step) => (
|
|
<div key={step.num} className={`flex items-center gap-4 p-4 ${step.bg} rounded-lg`}>
|
|
<div className={`w-8 h-8 ${step.numBg} text-white rounded-full flex items-center justify-center font-bold`}>{step.num}</div>
|
|
<div>
|
|
<p className="font-medium text-slate-900">{step.title}</p>
|
|
<p className="text-sm text-slate-600">{step.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|