49ce417428
All checks were successful
CI/CD / go-lint (push) Has been skipped
CI/CD / python-lint (push) Has been skipped
CI/CD / nodejs-lint (push) Has been skipped
CI/CD / test-go-ai-compliance (push) Successful in 32s
CI/CD / test-python-backend-compliance (push) Successful in 34s
CI/CD / test-python-document-crawler (push) Successful in 23s
CI/CD / test-python-dsms-gateway (push) Successful in 21s
CI/CD / validate-canonical-controls (push) Successful in 11s
CI/CD / Deploy (push) Successful in 2s
Module 2: Extended Compliance Dashboard with roadmap, module-status, next-actions, snapshots, score-history Module 3: 7 German security document templates (IT-Sicherheitskonzept, Datenschutz, Backup, Logging, Incident-Response, Zugriff, Risikomanagement) Module 4: Compliance Process Manager with CRUD, complete/skip/seed, ~50 seed tasks, 3-tab UI Module 5: Evidence Collector Extended with automated checks, control-mapping, coverage report, 4-tab UI Also includes: canonical control library enhancements (verification method, categories, dedup), control generator improvements, RAG client extensions 52 tests pass, frontend builds clean. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
813 lines
39 KiB
TypeScript
813 lines
39 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* Compliance Hub Page (SDK Version - Zusatzmodul)
|
|
*
|
|
* Central compliance management dashboard with tabs:
|
|
* - Uebersicht: Score, Stats, Quick Access, Findings
|
|
* - Roadmap: 4-column Kanban (Quick Wins / Must Have / Should Have / Nice to Have)
|
|
* - Module: Grid with module cards + progress bars
|
|
* - Trend: Score history chart
|
|
*/
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import Link from 'next/link'
|
|
|
|
// Types
|
|
interface DashboardData {
|
|
compliance_score: number
|
|
total_regulations: number
|
|
total_requirements: number
|
|
total_controls: number
|
|
controls_by_status: Record<string, number>
|
|
controls_by_domain: Record<string, Record<string, number>>
|
|
total_evidence: number
|
|
evidence_by_status: Record<string, number>
|
|
total_risks: number
|
|
risks_by_level: Record<string, number>
|
|
}
|
|
|
|
interface Regulation {
|
|
id: string
|
|
code: string
|
|
name: string
|
|
full_name: string
|
|
regulation_type: string
|
|
effective_date: string | null
|
|
description: string
|
|
requirement_count: number
|
|
}
|
|
|
|
interface MappingsData {
|
|
total: number
|
|
by_regulation: Record<string, number>
|
|
}
|
|
|
|
interface FindingsData {
|
|
major_count: number
|
|
minor_count: number
|
|
ofi_count: number
|
|
total: number
|
|
open_majors: number
|
|
open_minors: number
|
|
}
|
|
|
|
interface RoadmapItem {
|
|
id: string
|
|
control_id: string
|
|
title: string
|
|
status: string
|
|
domain: string
|
|
owner: string | null
|
|
next_review_at: string | null
|
|
days_overdue: number
|
|
weight: number
|
|
}
|
|
|
|
interface RoadmapData {
|
|
buckets: Record<string, RoadmapItem[]>
|
|
counts: Record<string, number>
|
|
}
|
|
|
|
interface ModuleInfo {
|
|
key: string
|
|
label: string
|
|
count: number
|
|
status: string
|
|
progress: number
|
|
}
|
|
|
|
interface ModuleStatusData {
|
|
modules: ModuleInfo[]
|
|
total: number
|
|
started: number
|
|
complete: number
|
|
overall_progress: number
|
|
}
|
|
|
|
interface NextAction {
|
|
id: string
|
|
control_id: string
|
|
title: string
|
|
status: string
|
|
domain: string
|
|
owner: string | null
|
|
days_overdue: number
|
|
urgency_score: number
|
|
reason: string
|
|
}
|
|
|
|
interface ScoreSnapshot {
|
|
id: string
|
|
score: number
|
|
controls_total: number
|
|
controls_pass: number
|
|
snapshot_date: string
|
|
created_at: string
|
|
}
|
|
|
|
type TabKey = 'overview' | 'roadmap' | 'modules' | 'trend'
|
|
|
|
const DOMAIN_LABELS: Record<string, string> = {
|
|
gov: 'Governance',
|
|
priv: 'Datenschutz',
|
|
iam: 'Identity & Access',
|
|
crypto: 'Kryptografie',
|
|
sdlc: 'Secure Dev',
|
|
ops: 'Operations',
|
|
ai: 'KI-spezifisch',
|
|
cra: 'Supply Chain',
|
|
aud: 'Audit',
|
|
}
|
|
|
|
const BUCKET_LABELS: Record<string, { label: string; color: string; bg: string }> = {
|
|
quick_wins: { label: 'Quick Wins', color: 'text-green-700', bg: 'bg-green-50 border-green-200' },
|
|
must_have: { label: 'Must Have', color: 'text-red-700', bg: 'bg-red-50 border-red-200' },
|
|
should_have: { label: 'Should Have', color: 'text-yellow-700', bg: 'bg-yellow-50 border-yellow-200' },
|
|
nice_to_have: { label: 'Nice to Have', color: 'text-slate-700', bg: 'bg-slate-50 border-slate-200' },
|
|
}
|
|
|
|
const MODULE_ICONS: Record<string, string> = {
|
|
vvt: '📋', tom: '🔒', dsfa: '⚠️', loeschfristen: '🗑️', risks: '🎯',
|
|
controls: '✅', evidence: '📎', obligations: '📜', incidents: '🚨',
|
|
vendor: '🤝', legal_templates: '📄', training: '🎓', audit: '🔍',
|
|
security_backlog: '🛡️', quality: '⭐',
|
|
}
|
|
|
|
export default function ComplianceHubPage() {
|
|
const [activeTab, setActiveTab] = useState<TabKey>('overview')
|
|
const [dashboard, setDashboard] = useState<DashboardData | null>(null)
|
|
const [regulations, setRegulations] = useState<Regulation[]>([])
|
|
const [mappings, setMappings] = useState<MappingsData | null>(null)
|
|
const [findings, setFindings] = useState<FindingsData | null>(null)
|
|
const [roadmap, setRoadmap] = useState<RoadmapData | null>(null)
|
|
const [moduleStatus, setModuleStatus] = useState<ModuleStatusData | null>(null)
|
|
const [nextActions, setNextActions] = useState<NextAction[]>([])
|
|
const [scoreHistory, setScoreHistory] = useState<ScoreSnapshot[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [seeding, setSeeding] = useState(false)
|
|
const [savingSnapshot, setSavingSnapshot] = useState(false)
|
|
|
|
useEffect(() => {
|
|
loadData()
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (activeTab === 'roadmap' && !roadmap) loadRoadmap()
|
|
if (activeTab === 'modules' && !moduleStatus) loadModuleStatus()
|
|
if (activeTab === 'trend' && scoreHistory.length === 0) loadScoreHistory()
|
|
}, [activeTab]) // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
const loadData = async () => {
|
|
setLoading(true)
|
|
setError(null)
|
|
try {
|
|
const [dashboardRes, regulationsRes, mappingsRes, findingsRes, actionsRes] = await Promise.all([
|
|
fetch('/api/sdk/v1/compliance/dashboard'),
|
|
fetch('/api/sdk/v1/compliance/regulations'),
|
|
fetch('/api/sdk/v1/compliance/mappings'),
|
|
fetch('/api/sdk/v1/isms/findings?status=open'),
|
|
fetch('/api/sdk/v1/compliance/dashboard/next-actions?limit=5'),
|
|
])
|
|
|
|
if (dashboardRes.ok) setDashboard(await dashboardRes.json())
|
|
if (regulationsRes.ok) {
|
|
const data = await regulationsRes.json()
|
|
setRegulations(data.regulations || [])
|
|
}
|
|
if (mappingsRes.ok) setMappings(await mappingsRes.json())
|
|
if (findingsRes.ok) setFindings(await findingsRes.json())
|
|
if (actionsRes.ok) {
|
|
const data = await actionsRes.json()
|
|
setNextActions(data.actions || [])
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to load compliance data:', err)
|
|
setError('Verbindung zum Backend fehlgeschlagen')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const loadRoadmap = async () => {
|
|
try {
|
|
const res = await fetch('/api/sdk/v1/compliance/dashboard/roadmap')
|
|
if (res.ok) setRoadmap(await res.json())
|
|
} catch { /* silent */ }
|
|
}
|
|
|
|
const loadModuleStatus = async () => {
|
|
try {
|
|
const res = await fetch('/api/sdk/v1/compliance/dashboard/module-status')
|
|
if (res.ok) setModuleStatus(await res.json())
|
|
} catch { /* silent */ }
|
|
}
|
|
|
|
const loadScoreHistory = async () => {
|
|
try {
|
|
const res = await fetch('/api/sdk/v1/compliance/dashboard/score-history?months=12')
|
|
if (res.ok) {
|
|
const data = await res.json()
|
|
setScoreHistory(data.snapshots || [])
|
|
}
|
|
} catch { /* silent */ }
|
|
}
|
|
|
|
const saveSnapshot = async () => {
|
|
setSavingSnapshot(true)
|
|
try {
|
|
const res = await fetch('/api/sdk/v1/compliance/dashboard/snapshot', { method: 'POST' })
|
|
if (res.ok) {
|
|
loadScoreHistory()
|
|
}
|
|
} catch { /* silent */ }
|
|
finally { setSavingSnapshot(false) }
|
|
}
|
|
|
|
const seedDatabase = async () => {
|
|
setSeeding(true)
|
|
try {
|
|
const res = await fetch('/api/sdk/v1/compliance/seed', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ force: false }),
|
|
})
|
|
|
|
if (res.ok) {
|
|
const result = await res.json()
|
|
alert(`Datenbank erfolgreich initialisiert!\n\nRegulations: ${result.counts?.regulations || 0}\nControls: ${result.counts?.controls || 0}\nRequirements: ${result.counts?.requirements || 0}`)
|
|
loadData()
|
|
} else {
|
|
const error = await res.text()
|
|
alert(`Fehler beim Seeding: ${error}`)
|
|
}
|
|
} catch (err) {
|
|
console.error('Seeding failed:', err)
|
|
alert('Fehler beim Initialisieren der Datenbank')
|
|
} finally {
|
|
setSeeding(false)
|
|
}
|
|
}
|
|
|
|
const score = dashboard?.compliance_score || 0
|
|
const scoreColor = score >= 80 ? 'text-green-600' : score >= 60 ? 'text-yellow-600' : 'text-red-600'
|
|
const scoreBgColor = score >= 80 ? 'bg-green-500' : score >= 60 ? 'bg-yellow-500' : 'bg-red-500'
|
|
|
|
const tabs: { key: TabKey; label: string }[] = [
|
|
{ key: 'overview', label: 'Uebersicht' },
|
|
{ key: 'roadmap', label: 'Roadmap' },
|
|
{ key: 'modules', label: 'Module' },
|
|
{ key: 'trend', label: 'Trend' },
|
|
]
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Title Card */}
|
|
<div className="bg-white rounded-xl shadow-sm border p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-slate-900">Compliance Hub</h1>
|
|
<p className="text-slate-500 mt-1">
|
|
Zentrale Verwaltung aller Compliance-Anforderungen nach DSGVO, AI Act, BSI TR-03161 und weiteren Regulierungen.
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={saveSnapshot}
|
|
disabled={savingSnapshot}
|
|
className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 text-sm"
|
|
>
|
|
{savingSnapshot ? 'Speichere...' : 'Score-Snapshot speichern'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="bg-white rounded-xl shadow-sm border">
|
|
<div className="flex border-b">
|
|
{tabs.map(tab => (
|
|
<button
|
|
key={tab.key}
|
|
onClick={() => setActiveTab(tab.key)}
|
|
className={`px-6 py-3 text-sm font-medium transition-colors ${
|
|
activeTab === tab.key
|
|
? 'text-purple-600 border-b-2 border-purple-600'
|
|
: 'text-slate-500 hover:text-slate-700'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Error Banner */}
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4 flex items-center gap-3">
|
|
<svg className="w-5 h-5 text-red-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span className="text-red-700">{error}</span>
|
|
<button onClick={loadData} className="ml-auto text-red-600 hover:text-red-800 text-sm font-medium">
|
|
Erneut versuchen
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Seed Button if no data */}
|
|
{!loading && (dashboard?.total_controls || 0) === 0 && (
|
|
<div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="font-medium text-yellow-800">Keine Compliance-Daten vorhanden</p>
|
|
<p className="text-sm text-yellow-700">Initialisieren Sie die Datenbank mit den Seed-Daten.</p>
|
|
</div>
|
|
<button
|
|
onClick={seedDatabase}
|
|
disabled={seeding}
|
|
className="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 disabled:opacity-50"
|
|
>
|
|
{seeding ? 'Initialisiere...' : 'Datenbank initialisieren'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{loading ? (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600" />
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* ============================================================ */}
|
|
{/* TAB: Uebersicht */}
|
|
{/* ============================================================ */}
|
|
{activeTab === 'overview' && (
|
|
<>
|
|
{/* Quick Actions */}
|
|
<div className="bg-white rounded-xl shadow-sm border p-6">
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4">Schnellzugriff</h3>
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4">
|
|
{[
|
|
{ href: '/sdk/audit-checklist', icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01', label: 'Audit Checkliste', sub: `${dashboard?.total_requirements || '...'} Anforderungen`, color: 'purple' },
|
|
{ href: '/sdk/controls', icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z', label: 'Controls', sub: `${dashboard?.total_controls || '...'} Massnahmen`, color: 'green' },
|
|
{ href: '/sdk/evidence', icon: 'M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z', label: 'Evidence', sub: 'Nachweise', color: 'blue' },
|
|
{ href: '/sdk/risks', icon: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z', label: 'Risk Matrix', sub: '5x5 Risiken', color: 'red' },
|
|
{ href: '/sdk/process-tasks', icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4', label: 'Prozesse', sub: 'Aufgaben', color: 'indigo' },
|
|
{ href: '/sdk/audit-report', icon: 'M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z', label: 'Audit Report', sub: 'PDF Export', color: 'orange' },
|
|
].map(item => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`p-4 rounded-lg border border-slate-200 hover:border-${item.color}-500 hover:bg-${item.color}-50 transition-colors text-center`}
|
|
>
|
|
<div className={`text-${item.color}-600 mb-2 flex justify-center`}>
|
|
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={item.icon} />
|
|
</svg>
|
|
</div>
|
|
<p className="font-medium text-slate-900 text-sm">{item.label}</p>
|
|
<p className="text-xs text-slate-500 mt-1">{item.sub}</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Score and Stats Row */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
|
|
<div className="bg-white rounded-xl shadow-sm border p-6">
|
|
<h3 className="text-sm font-medium text-slate-500 mb-4">Compliance Score</h3>
|
|
<div className={`text-5xl font-bold ${scoreColor}`}>
|
|
{score.toFixed(0)}%
|
|
</div>
|
|
<div className="mt-4 h-2 bg-slate-200 rounded-full overflow-hidden">
|
|
<div className={`h-full transition-all duration-500 ${scoreBgColor}`} style={{ width: `${score}%` }} />
|
|
</div>
|
|
<p className="mt-2 text-sm text-slate-500">
|
|
{dashboard?.controls_by_status?.pass || 0} von {dashboard?.total_controls || 0} Controls bestanden
|
|
</p>
|
|
</div>
|
|
|
|
{[
|
|
{ label: 'Verordnungen', value: dashboard?.total_regulations || 0, sub: `${dashboard?.total_requirements || 0} Anforderungen`, iconColor: 'blue', icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z' },
|
|
{ label: 'Controls', value: dashboard?.total_controls || 0, sub: `${dashboard?.controls_by_status?.pass || 0} bestanden`, iconColor: 'green', icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z' },
|
|
{ label: 'Nachweise', value: dashboard?.total_evidence || 0, sub: `${dashboard?.evidence_by_status?.valid || 0} aktiv`, iconColor: 'purple', icon: 'M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z' },
|
|
{ label: 'Risiken', value: dashboard?.total_risks || 0, sub: `${(dashboard?.risks_by_level?.high || 0) + (dashboard?.risks_by_level?.critical || 0)} kritisch`, iconColor: 'red', icon: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z' },
|
|
].map(stat => (
|
|
<div key={stat.label} className="bg-white rounded-xl shadow-sm border p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-slate-500">{stat.label}</p>
|
|
<p className="text-2xl font-bold text-slate-900">{stat.value}</p>
|
|
</div>
|
|
<div className={`w-10 h-10 bg-${stat.iconColor}-100 rounded-lg flex items-center justify-center`}>
|
|
<svg className={`w-5 h-5 text-${stat.iconColor}-600`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={stat.icon} />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<p className="mt-2 text-sm text-slate-500">{stat.sub}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Next Actions + Findings */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
{/* Next Actions */}
|
|
<div className="bg-white rounded-xl shadow-sm border p-6">
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4">Naechste Aktionen</h3>
|
|
{nextActions.length === 0 ? (
|
|
<p className="text-sm text-slate-500">Keine offenen Aktionen.</p>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{nextActions.map(action => (
|
|
<div key={action.id} className="flex items-center gap-3 p-3 rounded-lg bg-slate-50">
|
|
<div className={`w-2 h-2 rounded-full flex-shrink-0 ${
|
|
action.days_overdue > 0 ? 'bg-red-500' : 'bg-yellow-500'
|
|
}`} />
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-slate-900 truncate">{action.title}</p>
|
|
<p className="text-xs text-slate-500">
|
|
{action.control_id} · {DOMAIN_LABELS[action.domain] || action.domain}
|
|
{action.days_overdue > 0 && <span className="text-red-600 ml-2">{action.days_overdue}d ueberfaellig</span>}
|
|
</p>
|
|
</div>
|
|
<span className={`px-2 py-0.5 text-xs rounded-full ${
|
|
action.status === 'partial' ? 'bg-yellow-100 text-yellow-700' : 'bg-slate-100 text-slate-600'
|
|
}`}>
|
|
{action.status}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Audit Findings */}
|
|
<div className="bg-white rounded-xl shadow-sm border p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-lg font-semibold text-slate-900">Audit Findings</h3>
|
|
<Link href="/sdk/audit-checklist" className="text-sm text-purple-600 hover:text-purple-700">
|
|
Audit Checkliste →
|
|
</Link>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4 mb-4">
|
|
<div className="p-4 bg-red-50 border border-red-200 rounded-lg">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<div className="w-3 h-3 bg-red-500 rounded-full" />
|
|
<span className="text-sm font-medium text-red-800">Hauptabweichungen</span>
|
|
</div>
|
|
<p className="text-3xl font-bold text-red-600">{findings?.open_majors || 0}</p>
|
|
<p className="text-xs text-red-600">offen (blockiert Zertifizierung)</p>
|
|
</div>
|
|
<div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<div className="w-3 h-3 bg-yellow-500 rounded-full" />
|
|
<span className="text-sm font-medium text-yellow-800">Nebenabweichungen</span>
|
|
</div>
|
|
<p className="text-3xl font-bold text-yellow-600">{findings?.open_minors || 0}</p>
|
|
<p className="text-xs text-yellow-600">offen (erfordert CAPA)</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-slate-500">
|
|
Gesamt: {findings?.total || 0} Findings ({findings?.major_count || 0} Major, {findings?.minor_count || 0} Minor, {findings?.ofi_count || 0} OFI)
|
|
</span>
|
|
{(findings?.open_majors || 0) === 0 ? (
|
|
<span className="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium">
|
|
Zertifizierung moeglich
|
|
</span>
|
|
) : (
|
|
<span className="px-2 py-1 bg-red-100 text-red-700 rounded-full text-xs font-medium">
|
|
Zertifizierung blockiert
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Control-Mappings & Domain Chart */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
<div className="bg-white rounded-xl shadow-sm border p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-lg font-semibold text-slate-900">Control-Mappings</h3>
|
|
<Link href="/sdk/controls" className="text-sm text-purple-600 hover:text-purple-700">
|
|
Alle anzeigen →
|
|
</Link>
|
|
</div>
|
|
<div className="flex items-center gap-6 mb-4">
|
|
<div>
|
|
<p className="text-4xl font-bold text-purple-600">{mappings?.total || 0}</p>
|
|
<p className="text-sm text-slate-500">Mappings gesamt</p>
|
|
</div>
|
|
<div className="flex-1 h-16 bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500 mb-1">Nach Verordnung</p>
|
|
<div className="flex gap-1 flex-wrap">
|
|
{mappings?.by_regulation && Object.entries(mappings.by_regulation).slice(0, 5).map(([reg, count]) => (
|
|
<span key={reg} className="px-2 py-0.5 bg-purple-100 text-purple-700 rounded text-xs">
|
|
{reg}: {count}
|
|
</span>
|
|
))}
|
|
{!mappings?.by_regulation && (
|
|
<span className="px-2 py-0.5 bg-slate-100 text-slate-500 rounded text-xs">Keine Mappings vorhanden</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl shadow-sm border p-6">
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4">Controls nach Domain</h3>
|
|
<div className="space-y-2">
|
|
{Object.entries(dashboard?.controls_by_domain || {}).slice(0, 6).map(([domain, stats]) => {
|
|
const total = stats.total || 0
|
|
const pass = stats.pass || 0
|
|
const partial = stats.partial || 0
|
|
const passPercent = total > 0 ? ((pass + partial * 0.5) / total) * 100 : 0
|
|
|
|
return (
|
|
<div key={domain} className="flex items-center gap-3">
|
|
<span className="text-xs font-medium text-slate-600 w-24 truncate">
|
|
{DOMAIN_LABELS[domain] || domain}
|
|
</span>
|
|
<div className="flex-1 h-2 bg-slate-200 rounded-full overflow-hidden flex">
|
|
<div className="bg-green-500 h-full" style={{ width: `${(pass / (total || 1)) * 100}%` }} />
|
|
<div className="bg-yellow-500 h-full" style={{ width: `${(partial / (total || 1)) * 100}%` }} />
|
|
</div>
|
|
<span className="text-xs text-slate-500 w-16 text-right">{passPercent.toFixed(0)}%</span>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Regulations Table */}
|
|
<div className="bg-white rounded-xl shadow-sm border overflow-hidden">
|
|
<div className="p-4 border-b flex items-center justify-between">
|
|
<h3 className="text-lg font-semibold text-slate-900">Verordnungen & Standards ({regulations.length})</h3>
|
|
<button onClick={loadData} className="text-sm text-purple-600 hover:text-purple-700">
|
|
Aktualisieren
|
|
</button>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-slate-50">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Code</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Name</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Typ</th>
|
|
<th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Anforderungen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-200">
|
|
{regulations.slice(0, 15).map((reg) => (
|
|
<tr key={reg.id} className="hover:bg-slate-50">
|
|
<td className="px-4 py-3">
|
|
<span className="font-mono font-medium text-purple-600">{reg.code}</span>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<p className="font-medium text-slate-900">{reg.name}</p>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<span className={`px-2 py-1 text-xs rounded-full ${
|
|
reg.regulation_type === 'eu_regulation' ? 'bg-blue-100 text-blue-700' :
|
|
reg.regulation_type === 'eu_directive' ? 'bg-purple-100 text-purple-700' :
|
|
reg.regulation_type === 'bsi_standard' ? 'bg-green-100 text-green-700' :
|
|
'bg-slate-100 text-slate-700'
|
|
}`}>
|
|
{reg.regulation_type === 'eu_regulation' ? 'EU-VO' :
|
|
reg.regulation_type === 'eu_directive' ? 'EU-RL' :
|
|
reg.regulation_type === 'bsi_standard' ? 'BSI' :
|
|
reg.regulation_type === 'de_law' ? 'DE' : reg.regulation_type}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-center">
|
|
<span className="font-medium">{reg.requirement_count}</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* ============================================================ */}
|
|
{/* TAB: Roadmap */}
|
|
{/* ============================================================ */}
|
|
{activeTab === 'roadmap' && (
|
|
<div>
|
|
{!roadmap ? (
|
|
<div className="flex items-center justify-center h-48">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
|
|
{(['quick_wins', 'must_have', 'should_have', 'nice_to_have'] as const).map(bucketKey => {
|
|
const meta = BUCKET_LABELS[bucketKey]
|
|
const items = roadmap.buckets[bucketKey] || []
|
|
|
|
return (
|
|
<div key={bucketKey} className={`rounded-xl border p-4 ${meta.bg}`}>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className={`font-semibold ${meta.color}`}>{meta.label}</h3>
|
|
<span className={`text-xs font-medium px-2 py-0.5 rounded-full bg-white ${meta.color}`}>
|
|
{items.length}
|
|
</span>
|
|
</div>
|
|
<div className="space-y-2 max-h-96 overflow-y-auto">
|
|
{items.length === 0 ? (
|
|
<p className="text-sm text-slate-400 text-center py-4">Keine Eintraege</p>
|
|
) : (
|
|
items.map(item => (
|
|
<div key={item.id} className="bg-white rounded-lg p-3 shadow-sm">
|
|
<p className="text-sm font-medium text-slate-900 truncate">{item.title}</p>
|
|
<div className="mt-1 flex items-center gap-2 text-xs text-slate-500">
|
|
<span className="font-mono">{item.control_id}</span>
|
|
<span>·</span>
|
|
<span>{DOMAIN_LABELS[item.domain] || item.domain}</span>
|
|
</div>
|
|
{item.days_overdue > 0 && (
|
|
<p className="mt-1 text-xs text-red-600">{item.days_overdue}d ueberfaellig</p>
|
|
)}
|
|
{item.owner && (
|
|
<p className="mt-1 text-xs text-slate-400">{item.owner}</p>
|
|
)}
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* ============================================================ */}
|
|
{/* TAB: Module */}
|
|
{/* ============================================================ */}
|
|
{activeTab === 'modules' && (
|
|
<div>
|
|
{!moduleStatus ? (
|
|
<div className="flex items-center justify-center h-48">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Summary */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
|
<div className="bg-white rounded-xl shadow-sm border p-6 text-center">
|
|
<p className="text-sm text-slate-500">Gesamt-Fortschritt</p>
|
|
<p className="text-3xl font-bold text-purple-600">{moduleStatus.overall_progress.toFixed(0)}%</p>
|
|
</div>
|
|
<div className="bg-white rounded-xl shadow-sm border p-6 text-center">
|
|
<p className="text-sm text-slate-500">Module gestartet</p>
|
|
<p className="text-3xl font-bold text-blue-600">{moduleStatus.started}/{moduleStatus.total}</p>
|
|
</div>
|
|
<div className="bg-white rounded-xl shadow-sm border p-6 text-center">
|
|
<p className="text-sm text-slate-500">Module abgeschlossen</p>
|
|
<p className="text-3xl font-bold text-green-600">{moduleStatus.complete}/{moduleStatus.total}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Module Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{moduleStatus.modules.map(mod => (
|
|
<div key={mod.key} className="bg-white rounded-xl shadow-sm border p-5">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<span className="text-2xl">{MODULE_ICONS[mod.key] || '📦'}</span>
|
|
<div>
|
|
<h4 className="font-medium text-slate-900">{mod.label}</h4>
|
|
<p className="text-xs text-slate-500">{mod.count} Eintraege</p>
|
|
</div>
|
|
<span className={`ml-auto px-2 py-0.5 text-xs rounded-full font-medium ${
|
|
mod.status === 'complete' ? 'bg-green-100 text-green-700' :
|
|
mod.status === 'in_progress' ? 'bg-yellow-100 text-yellow-700' :
|
|
'bg-slate-100 text-slate-500'
|
|
}`}>
|
|
{mod.status === 'complete' ? 'Fertig' :
|
|
mod.status === 'in_progress' ? 'In Arbeit' : 'Offen'}
|
|
</span>
|
|
</div>
|
|
<div className="h-2 bg-slate-200 rounded-full overflow-hidden">
|
|
<div
|
|
className={`h-full transition-all duration-500 ${
|
|
mod.status === 'complete' ? 'bg-green-500' :
|
|
mod.status === 'in_progress' ? 'bg-yellow-500' : 'bg-slate-300'
|
|
}`}
|
|
style={{ width: `${mod.progress}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* ============================================================ */}
|
|
{/* TAB: Trend */}
|
|
{/* ============================================================ */}
|
|
{activeTab === 'trend' && (
|
|
<div className="bg-white rounded-xl shadow-sm border p-6">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-semibold text-slate-900">Score-Verlauf</h3>
|
|
<button
|
|
onClick={saveSnapshot}
|
|
disabled={savingSnapshot}
|
|
className="px-3 py-1.5 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
|
>
|
|
{savingSnapshot ? 'Speichere...' : 'Aktuellen Score speichern'}
|
|
</button>
|
|
</div>
|
|
|
|
{scoreHistory.length === 0 ? (
|
|
<div className="text-center py-12">
|
|
<p className="text-slate-500">Noch keine Score-Snapshots vorhanden.</p>
|
|
<p className="text-sm text-slate-400 mt-1">Klicken Sie auf "Aktuellen Score speichern", um den ersten Datenpunkt zu erstellen.</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Simple SVG Line Chart */}
|
|
<div className="relative h-64 mb-6">
|
|
<svg className="w-full h-full" viewBox="0 0 800 200" preserveAspectRatio="none">
|
|
{/* Grid lines */}
|
|
{[0, 25, 50, 75, 100].map(pct => (
|
|
<line key={pct} x1="0" y1={200 - pct * 2} x2="800" y2={200 - pct * 2}
|
|
stroke="#e2e8f0" strokeWidth="1" />
|
|
))}
|
|
{/* Score line */}
|
|
<polyline
|
|
fill="none"
|
|
stroke="#9333ea"
|
|
strokeWidth="3"
|
|
strokeLinejoin="round"
|
|
points={scoreHistory.map((s, i) => {
|
|
const x = scoreHistory.length === 1 ? 400 : (i / (scoreHistory.length - 1)) * 780 + 10
|
|
const y = 200 - (s.score / 100) * 200
|
|
return `${x},${y}`
|
|
}).join(' ')}
|
|
/>
|
|
{/* Points */}
|
|
{scoreHistory.map((s, i) => {
|
|
const x = scoreHistory.length === 1 ? 400 : (i / (scoreHistory.length - 1)) * 780 + 10
|
|
const y = 200 - (s.score / 100) * 200
|
|
return (
|
|
<circle key={i} cx={x} cy={y} r="5" fill="#9333ea" stroke="white" strokeWidth="2" />
|
|
)
|
|
})}
|
|
</svg>
|
|
{/* Y-axis labels */}
|
|
<div className="absolute left-0 top-0 h-full flex flex-col justify-between text-xs text-slate-400 -ml-2">
|
|
<span>100%</span>
|
|
<span>75%</span>
|
|
<span>50%</span>
|
|
<span>25%</span>
|
|
<span>0%</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Snapshot Table */}
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-slate-50">
|
|
<tr>
|
|
<th className="px-4 py-2 text-left text-xs font-medium text-slate-500 uppercase">Datum</th>
|
|
<th className="px-4 py-2 text-center text-xs font-medium text-slate-500 uppercase">Score</th>
|
|
<th className="px-4 py-2 text-center text-xs font-medium text-slate-500 uppercase">Controls</th>
|
|
<th className="px-4 py-2 text-center text-xs font-medium text-slate-500 uppercase">Bestanden</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-200">
|
|
{scoreHistory.slice().reverse().map(snap => (
|
|
<tr key={snap.id} className="hover:bg-slate-50">
|
|
<td className="px-4 py-2 text-slate-700">{new Date(snap.snapshot_date).toLocaleDateString('de-DE')}</td>
|
|
<td className="px-4 py-2 text-center">
|
|
<span className={`font-bold ${
|
|
snap.score >= 80 ? 'text-green-600' : snap.score >= 60 ? 'text-yellow-600' : 'text-red-600'
|
|
}`}>
|
|
{typeof snap.score === 'number' ? snap.score.toFixed(1) : snap.score}%
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-2 text-center text-slate-600">{snap.controls_total}</td>
|
|
<td className="px-4 py-2 text-center text-slate-600">{snap.controls_pass}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|