a694b9d9ea
All checks were successful
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-ai-compliance (push) Successful in 38s
CI / test-python-backend-compliance (push) Successful in 38s
CI / test-python-document-crawler (push) Successful in 22s
CI / test-python-dsms-gateway (push) Successful in 19s
- Migration 024: compliance_dsfas + compliance_dsfa_audit_log Tabellen - dsfa_routes.py: CRUD + stats + audit-log + PATCH status Endpoints - Proxy: /api/sdk/v1/dsfa/[[...path]] → backend-compliance:8002/api/v1/dsfa - dsfa/page.tsx: mockDSFAs entfernt → echte API (loadDSFAs, handleCreateDSFA, handleStatusChange, handleDeleteDSFA) - GeneratorWizard: kontrollierte Inputs + onSubmit-Handler - reporting/page.tsx: getMockReport() Fallback entfernt → Fehlerstate - dsr/[requestId]/page.tsx: mockCommunications entfernt → leeres Array (TODO: Backend fehlt) - 52 neue Tests (680 gesamt, alle grün) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
438 lines
19 KiB
TypeScript
438 lines
19 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, useEffect } from 'react'
|
|
import { useSDK } from '@/lib/sdk'
|
|
import { StepHeader } from '@/components/sdk/StepHeader'
|
|
import {
|
|
ExecutiveReport,
|
|
RiskLevel,
|
|
DeadlineSeverity,
|
|
RISK_LEVEL_INFO,
|
|
DEADLINE_SEVERITY_INFO,
|
|
getScoreColor,
|
|
getScoreBgColor,
|
|
} from '@/lib/sdk/reporting/types'
|
|
import { getExecutiveReport } from '@/lib/sdk/reporting/api'
|
|
|
|
// =============================================================================
|
|
// TYPES
|
|
// =============================================================================
|
|
|
|
type TabId = 'overview' | 'risks' | 'deadlines' | 'modules' | 'activity'
|
|
|
|
interface Tab {
|
|
id: TabId
|
|
label: string
|
|
}
|
|
|
|
// =============================================================================
|
|
// HELPER COMPONENTS
|
|
// =============================================================================
|
|
|
|
function TabNavigation({
|
|
tabs,
|
|
activeTab,
|
|
onTabChange,
|
|
}: {
|
|
tabs: Tab[]
|
|
activeTab: TabId
|
|
onTabChange: (tab: TabId) => void
|
|
}) {
|
|
return (
|
|
<div className="border-b border-gray-200">
|
|
<nav className="flex gap-1 -mb-px" aria-label="Tabs">
|
|
{tabs.map(tab => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => onTabChange(tab.id)}
|
|
className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
|
|
activeTab === tab.id
|
|
? 'border-purple-600 text-purple-600'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ScoreCircle({ score }: { score: number }) {
|
|
const circumference = 2 * Math.PI * 60
|
|
const strokeDashoffset = circumference - (score / 100) * circumference
|
|
|
|
return (
|
|
<div className="relative w-36 h-36">
|
|
<svg className="w-full h-full -rotate-90" viewBox="0 0 128 128">
|
|
<circle
|
|
cx="64" cy="64" r="60"
|
|
stroke="#e5e7eb" strokeWidth="8" fill="none"
|
|
/>
|
|
<circle
|
|
cx="64" cy="64" r="60"
|
|
stroke={score >= 80 ? '#22c55e' : score >= 60 ? '#eab308' : score >= 40 ? '#f97316' : '#ef4444'}
|
|
strokeWidth="8" fill="none"
|
|
strokeLinecap="round"
|
|
strokeDasharray={circumference}
|
|
strokeDashoffset={strokeDashoffset}
|
|
className="transition-all duration-1000"
|
|
/>
|
|
</svg>
|
|
<div className="absolute inset-0 flex flex-col items-center justify-center">
|
|
<span className={`text-3xl font-bold ${getScoreColor(score)}`}>{score}%</span>
|
|
<span className="text-xs text-gray-500">Compliance</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function StatCard({
|
|
label,
|
|
value,
|
|
color = 'gray',
|
|
subtitle,
|
|
}: {
|
|
label: string
|
|
value: number | string
|
|
color?: 'gray' | 'blue' | 'yellow' | 'red' | 'green' | 'purple' | 'orange'
|
|
subtitle?: string
|
|
}) {
|
|
const colorClasses: Record<string, string> = {
|
|
gray: 'border-gray-200 text-gray-900',
|
|
blue: 'border-blue-200 text-blue-600',
|
|
yellow: 'border-yellow-200 text-yellow-600',
|
|
red: 'border-red-200 text-red-600',
|
|
green: 'border-green-200 text-green-600',
|
|
purple: 'border-purple-200 text-purple-600',
|
|
orange: 'border-orange-200 text-orange-600',
|
|
}
|
|
|
|
return (
|
|
<div className={`bg-white rounded-xl border-2 ${colorClasses[color]} p-4`}>
|
|
<div className="text-sm text-gray-500 mb-1">{label}</div>
|
|
<div className={`text-2xl font-bold ${colorClasses[color]?.split(' ')[1] || ''}`}>{value}</div>
|
|
{subtitle && <div className="text-xs text-gray-400 mt-1">{subtitle}</div>}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function RiskBadge({ level }: { level: RiskLevel }) {
|
|
const info = RISK_LEVEL_INFO[level]
|
|
return (
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${info.bgColor} ${info.color}`}>
|
|
{info.label}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
function DeadlineBadge({ severity }: { severity: DeadlineSeverity }) {
|
|
const info = DEADLINE_SEVERITY_INFO[severity]
|
|
return (
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${info.bgColor} ${info.color}`}>
|
|
{info.label}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// TAB CONTENTS
|
|
// =============================================================================
|
|
|
|
function OverviewTab({ report }: { report: ExecutiveReport }) {
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Score + Key Metrics */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
|
<div className="lg:col-span-1 bg-white rounded-xl border border-gray-200 p-6 flex flex-col items-center justify-center">
|
|
<ScoreCircle score={report.complianceScore} />
|
|
<div className="mt-3 flex items-center gap-2">
|
|
<span className="text-sm text-gray-500">Risikolevel:</span>
|
|
<RiskBadge level={report.riskOverview.overallLevel} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="lg:col-span-3 grid grid-cols-2 md:grid-cols-3 gap-4">
|
|
<StatCard label="Verarbeitungstaetigkeiten" value={report.dsgvo.processingActivities} color="blue" subtitle={`${report.dsgvo.activeProcessings} aktiv`} />
|
|
<StatCard label="TOMs umgesetzt" value={`${report.dsgvo.tomsImplemented}/${report.dsgvo.tomsTotal}`} color={report.dsgvo.completionPercent >= 80 ? 'green' : 'yellow'} subtitle={`${report.dsgvo.completionPercent}% vollstaendig`} />
|
|
<StatCard label="Offene Betroffenenanfragen" value={report.dsgvo.openDSRs} color={report.dsgvo.overdueDSRs > 0 ? 'red' : 'green'} subtitle={report.dsgvo.overdueDSRs > 0 ? `${report.dsgvo.overdueDSRs} ueberfaellig` : 'Keine ueberfaelligen'} />
|
|
<StatCard label="Offene Vorfaelle" value={report.incidents.openIncidents} color={report.incidents.criticalIncidents > 0 ? 'red' : 'green'} subtitle={report.incidents.criticalIncidents > 0 ? `${report.incidents.criticalIncidents} kritisch` : 'Keine kritischen'} />
|
|
<StatCard label="Schulungsquote" value={`${Math.round(report.academy.completionRate)}%`} color={report.academy.completionRate >= 80 ? 'green' : 'yellow'} subtitle={`${report.academy.overdueCount} ueberfaellig`} />
|
|
<StatCard label="Lieferanten" value={report.vendors.totalVendors} color="purple" subtitle={`${report.vendors.pendingReviews} ausstehende Pruefungen`} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Deadlines Summary */}
|
|
{report.upcomingDeadlines.length > 0 && (
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">Naechste Fristen</h3>
|
|
<div className="space-y-3">
|
|
{report.upcomingDeadlines.slice(0, 5).map((dl, i) => (
|
|
<div key={i} className="flex items-center justify-between py-2 border-b border-gray-100 last:border-0">
|
|
<div className="flex items-center gap-3">
|
|
<DeadlineBadge severity={dl.severity} />
|
|
<div>
|
|
<div className="text-sm font-medium text-gray-900">{dl.description}</div>
|
|
<div className="text-xs text-gray-500">{dl.module} · {dl.type}</div>
|
|
</div>
|
|
</div>
|
|
<div className={`text-sm font-medium ${dl.daysLeft <= 0 ? 'text-red-600' : dl.daysLeft <= 7 ? 'text-orange-600' : 'text-gray-600'}`}>
|
|
{dl.daysLeft <= 0 ? `${Math.abs(dl.daysLeft)} Tage ueberfaellig` : `${dl.daysLeft} Tage`}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function RisksTab({ report }: { report: ExecutiveReport }) {
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Overall Risk */}
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-lg font-semibold text-gray-900">Gesamt-Risikobewertung</h3>
|
|
<RiskBadge level={report.riskOverview.overallLevel} />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<StatCard label="Offene Findings" value={report.riskOverview.openFindings} color={report.riskOverview.openFindings > 5 ? 'orange' : 'gray'} />
|
|
<StatCard label="Kritische Findings" value={report.riskOverview.criticalFindings} color={report.riskOverview.criticalFindings > 0 ? 'red' : 'green'} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Per-Module Risks */}
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">Risiken nach Modul</h3>
|
|
<div className="space-y-3">
|
|
{report.riskOverview.moduleRisks.map((mr, i) => (
|
|
<div key={i} className="flex items-center justify-between py-3 border-b border-gray-100 last:border-0">
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-sm font-medium text-gray-900 w-32">{mr.module}</span>
|
|
<RiskBadge level={mr.level} />
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-32 h-2 bg-gray-200 rounded-full overflow-hidden">
|
|
<div
|
|
className={`h-full rounded-full ${getScoreBgColor(mr.score)}`}
|
|
style={{ width: `${mr.score}%` }}
|
|
/>
|
|
</div>
|
|
<span className="text-sm text-gray-500 w-12 text-right">{mr.score}%</span>
|
|
<span className="text-xs text-gray-400">{mr.issues} Issues</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function DeadlinesTab({ report }: { report: ExecutiveReport }) {
|
|
return (
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">Alle Fristen ({report.upcomingDeadlines.length})</h3>
|
|
{report.upcomingDeadlines.length === 0 ? (
|
|
<p className="text-gray-500 text-sm">Keine bevorstehenden Fristen.</p>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-2 font-medium text-gray-500">Status</th>
|
|
<th className="text-left py-2 font-medium text-gray-500">Modul</th>
|
|
<th className="text-left py-2 font-medium text-gray-500">Typ</th>
|
|
<th className="text-left py-2 font-medium text-gray-500">Beschreibung</th>
|
|
<th className="text-left py-2 font-medium text-gray-500">Faellig am</th>
|
|
<th className="text-right py-2 font-medium text-gray-500">Verbleibend</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{report.upcomingDeadlines.map((dl, i) => (
|
|
<tr key={i} className="border-b border-gray-50 hover:bg-gray-50">
|
|
<td className="py-2"><DeadlineBadge severity={dl.severity} /></td>
|
|
<td className="py-2 text-gray-700">{dl.module}</td>
|
|
<td className="py-2 text-gray-500">{dl.type}</td>
|
|
<td className="py-2 text-gray-900">{dl.description}</td>
|
|
<td className="py-2 text-gray-500">{new Date(dl.dueDate).toLocaleDateString('de-DE')}</td>
|
|
<td className={`py-2 text-right font-medium ${dl.daysLeft <= 0 ? 'text-red-600' : dl.daysLeft <= 7 ? 'text-orange-600' : 'text-gray-600'}`}>
|
|
{dl.daysLeft <= 0 ? `${Math.abs(dl.daysLeft)}d ueberfaellig` : `${dl.daysLeft}d`}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ModulesTab({ report }: { report: ExecutiveReport }) {
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* DSGVO Module */}
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">DSGVO-Compliance</h3>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<StatCard label="Verarbeitungen" value={report.dsgvo.processingActivities} color="blue" />
|
|
<StatCard label="TOM-Umsetzung" value={`${report.dsgvo.completionPercent}%`} color={report.dsgvo.completionPercent >= 80 ? 'green' : 'yellow'} />
|
|
<StatCard label="DSFAs abgeschlossen" value={report.dsgvo.dsfasCompleted} color="purple" />
|
|
<StatCard label="Loeschfristen definiert" value={report.dsgvo.retentionPolicies} color="gray" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Vendors */}
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">Lieferanten-Compliance</h3>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<StatCard label="Lieferanten gesamt" value={report.vendors.totalVendors} color="purple" />
|
|
<StatCard label="Aktive Lieferanten" value={report.vendors.activeVendors} color="blue" />
|
|
<StatCard label="Ausstehende Pruefungen" value={report.vendors.pendingReviews} color={report.vendors.pendingReviews > 0 ? 'yellow' : 'green'} />
|
|
<StatCard label="Abgelaufene Vertraege" value={report.vendors.expiredContracts} color={report.vendors.expiredContracts > 0 ? 'red' : 'green'} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Incidents */}
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">Datenschutzvorfaelle</h3>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<StatCard label="Vorfaelle gesamt" value={report.incidents.totalIncidents} color="gray" />
|
|
<StatCard label="Offen" value={report.incidents.openIncidents} color={report.incidents.openIncidents > 0 ? 'orange' : 'green'} />
|
|
<StatCard label="Kritisch" value={report.incidents.criticalIncidents} color={report.incidents.criticalIncidents > 0 ? 'red' : 'green'} />
|
|
<StatCard label="Meldungen ausstehend" value={report.incidents.notificationsPending} color={report.incidents.notificationsPending > 0 ? 'red' : 'green'} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Whistleblower */}
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">Hinweisgebersystem</h3>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<StatCard label="Meldungen gesamt" value={report.whistleblower.totalReports} color="gray" />
|
|
<StatCard label="Offen" value={report.whistleblower.openReports} color={report.whistleblower.openReports > 0 ? 'yellow' : 'green'} />
|
|
<StatCard label="Eingangsbestaetigung ueberfaellig" value={report.whistleblower.overdueAcknowledgments} color={report.whistleblower.overdueAcknowledgments > 0 ? 'red' : 'green'} />
|
|
<StatCard label="Rueckmeldung ueberfaellig" value={report.whistleblower.overdueFeedbacks} color={report.whistleblower.overdueFeedbacks > 0 ? 'red' : 'green'} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Academy */}
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">Compliance Academy</h3>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<StatCard label="Kurse" value={report.academy.totalCourses} color="purple" />
|
|
<StatCard label="Einschreibungen" value={report.academy.totalEnrollments} color="blue" />
|
|
<StatCard label="Abschlussrate" value={`${Math.round(report.academy.completionRate)}%`} color={report.academy.completionRate >= 80 ? 'green' : 'yellow'} />
|
|
<StatCard label="Ueberfaellig" value={report.academy.overdueCount} color={report.academy.overdueCount > 0 ? 'red' : 'green'} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ActivityTab({ report }: { report: ExecutiveReport }) {
|
|
return (
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">Letzte Aktivitaeten</h3>
|
|
{report.recentActivity.length === 0 ? (
|
|
<p className="text-gray-500 text-sm">Keine Aktivitaeten vorhanden.</p>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{report.recentActivity.map((entry, i) => (
|
|
<div key={i} className="flex items-start gap-3 py-2 border-b border-gray-100 last:border-0">
|
|
<div className="w-2 h-2 rounded-full bg-purple-400 mt-2 flex-shrink-0" />
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-sm text-gray-900">{entry.description}</div>
|
|
<div className="text-xs text-gray-500 flex gap-2 mt-0.5">
|
|
<span>{entry.module}</span>
|
|
<span>·</span>
|
|
<span>{entry.action}</span>
|
|
<span>·</span>
|
|
<span>{new Date(entry.timestamp).toLocaleString('de-DE')}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// MAIN COMPONENT
|
|
// =============================================================================
|
|
|
|
export default function ReportingPage() {
|
|
const { state } = useSDK()
|
|
const [activeTab, setActiveTab] = useState<TabId>('overview')
|
|
const [report, setReport] = useState<ExecutiveReport | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
useEffect(() => {
|
|
let cancelled = false
|
|
|
|
async function loadReport() {
|
|
setLoading(true)
|
|
setError(null)
|
|
try {
|
|
const data = await getExecutiveReport()
|
|
if (!cancelled) setReport(data)
|
|
} catch (err) {
|
|
console.warn('Backend nicht erreichbar:', err)
|
|
if (!cancelled) setError(err instanceof Error ? err.message : 'Verbindung zum Backend fehlgeschlagen')
|
|
} finally {
|
|
if (!cancelled) setLoading(false)
|
|
}
|
|
}
|
|
|
|
loadReport()
|
|
return () => { cancelled = true }
|
|
}, [])
|
|
|
|
const tabs: Tab[] = [
|
|
{ id: 'overview', label: 'Uebersicht' },
|
|
{ id: 'risks', label: 'Risiken' },
|
|
{ id: 'deadlines', label: 'Fristen' },
|
|
{ id: 'modules', label: 'Module' },
|
|
{ id: 'activity', label: 'Aktivitaeten' },
|
|
]
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<StepHeader stepId="reporting" />
|
|
|
|
<TabNavigation tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} />
|
|
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-20">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
|
|
<span className="ml-3 text-gray-500">Bericht wird generiert...</span>
|
|
</div>
|
|
) : report ? (
|
|
<>
|
|
{/* Generated timestamp */}
|
|
<div className="text-xs text-gray-400 text-right">
|
|
Generiert: {new Date(report.generatedAt).toLocaleString('de-DE')}
|
|
</div>
|
|
|
|
{activeTab === 'overview' && <OverviewTab report={report} />}
|
|
{activeTab === 'risks' && <RisksTab report={report} />}
|
|
{activeTab === 'deadlines' && <DeadlinesTab report={report} />}
|
|
{activeTab === 'modules' && <ModulesTab report={report} />}
|
|
{activeTab === 'activity' && <ActivityTab report={report} />}
|
|
</>
|
|
) : (
|
|
<div className="text-center py-20 text-gray-500">
|
|
<p>Bericht konnte nicht geladen werden.</p>
|
|
{error && <p className="text-sm text-red-500 mt-2">{error}</p>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|