feat(frontend): Gap Analysis UI — Product Wizard + Dashboard
- ProductWizard: Product type, technologies, data processing, certifications - GapDashboard: Summary cards, regulation overview, prioritized gap table - Expandable rows with recommendations - Filter by severity and status - Route: /sdk/gap-analysis Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
@@ -0,0 +1,246 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
|
||||||
|
interface GapReport {
|
||||||
|
profile_name: string
|
||||||
|
regulations: Array<{
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
risk_level: string
|
||||||
|
confidence: number
|
||||||
|
reasoning: string
|
||||||
|
requirements?: string[]
|
||||||
|
}>
|
||||||
|
summary: {
|
||||||
|
total_applicable_regulations: number
|
||||||
|
total_gaps: number
|
||||||
|
gaps_by_status: Record<string, number>
|
||||||
|
gaps_by_severity: Record<string, number>
|
||||||
|
overall_compliance_percent: number
|
||||||
|
estimated_effort_weeks: number
|
||||||
|
}
|
||||||
|
gaps: Array<{
|
||||||
|
mc_id: string
|
||||||
|
mc_name: string
|
||||||
|
regulation: string
|
||||||
|
status: string
|
||||||
|
title: string
|
||||||
|
severity: string
|
||||||
|
priority: { score: number; rank: number }
|
||||||
|
recommendation: string
|
||||||
|
control_count: number
|
||||||
|
}>
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
report: GapReport
|
||||||
|
onBack: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const STATUS_COLORS: Record<string, string> = {
|
||||||
|
fulfilled: 'bg-green-100 text-green-800',
|
||||||
|
partial: 'bg-yellow-100 text-yellow-800',
|
||||||
|
missing: 'bg-red-100 text-red-800',
|
||||||
|
unclear: 'bg-gray-100 text-gray-800',
|
||||||
|
}
|
||||||
|
|
||||||
|
const STATUS_LABELS: Record<string, string> = {
|
||||||
|
fulfilled: 'Erfuellt',
|
||||||
|
partial: 'Teilweise',
|
||||||
|
missing: 'Offen',
|
||||||
|
unclear: 'Unklar',
|
||||||
|
}
|
||||||
|
|
||||||
|
const SEVERITY_COLORS: Record<string, string> = {
|
||||||
|
CRITICAL: 'bg-red-600 text-white',
|
||||||
|
HIGH: 'bg-orange-500 text-white',
|
||||||
|
MEDIUM: 'bg-yellow-400 text-gray-900',
|
||||||
|
LOW: 'bg-blue-100 text-blue-800',
|
||||||
|
}
|
||||||
|
|
||||||
|
export function GapDashboard({ report, onBack }: Props) {
|
||||||
|
const [filterSeverity, setFilterSeverity] = useState<string>('all')
|
||||||
|
const [filterStatus, setFilterStatus] = useState<string>('all')
|
||||||
|
const [expandedGap, setExpandedGap] = useState<string | null>(null)
|
||||||
|
|
||||||
|
const filteredGaps = report.gaps.filter(g => {
|
||||||
|
if (filterSeverity !== 'all' && g.severity !== filterSeverity) return false
|
||||||
|
if (filterStatus !== 'all' && g.status !== filterStatus) return false
|
||||||
|
return true
|
||||||
|
})
|
||||||
|
|
||||||
|
const s = report.summary
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{/* Back button */}
|
||||||
|
<button onClick={onBack} className="mb-6 text-blue-600 hover:text-blue-800 text-sm">
|
||||||
|
← Neue Analyse
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Summary Cards */}
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
||||||
|
<SummaryCard
|
||||||
|
label="Regulierungen"
|
||||||
|
value={s.total_applicable_regulations}
|
||||||
|
color="blue"
|
||||||
|
/>
|
||||||
|
<SummaryCard
|
||||||
|
label="Offene Gaps"
|
||||||
|
value={s.gaps_by_status?.missing || 0}
|
||||||
|
color="red"
|
||||||
|
/>
|
||||||
|
<SummaryCard
|
||||||
|
label="Compliance"
|
||||||
|
value={`${s.overall_compliance_percent}%`}
|
||||||
|
color={s.overall_compliance_percent >= 80 ? 'green' : 'orange'}
|
||||||
|
/>
|
||||||
|
<SummaryCard
|
||||||
|
label="Gesch. Aufwand"
|
||||||
|
value={`${s.estimated_effort_weeks} Wo.`}
|
||||||
|
color="purple"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Applicable Regulations */}
|
||||||
|
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-8">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">
|
||||||
|
Anwendbare Regulierungen
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||||
|
{report.regulations.map(reg => (
|
||||||
|
<div
|
||||||
|
key={reg.id}
|
||||||
|
className="border border-gray-200 rounded-lg p-4 hover:shadow-sm transition-shadow"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<span className="font-medium text-gray-900 text-sm">
|
||||||
|
{reg.name}
|
||||||
|
</span>
|
||||||
|
<span className={`px-2 py-0.5 rounded text-xs font-medium ${
|
||||||
|
reg.risk_level === 'high' ? 'bg-red-100 text-red-700' :
|
||||||
|
reg.risk_level === 'medium' ? 'bg-yellow-100 text-yellow-700' :
|
||||||
|
'bg-green-100 text-green-700'
|
||||||
|
}`}>
|
||||||
|
{reg.risk_level}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-gray-500">{reg.reasoning}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filters */}
|
||||||
|
<div className="flex gap-4 mb-4">
|
||||||
|
<select
|
||||||
|
value={filterSeverity}
|
||||||
|
onChange={e => setFilterSeverity(e.target.value)}
|
||||||
|
className="px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||||
|
>
|
||||||
|
<option value="all">Alle Prioritaeten</option>
|
||||||
|
<option value="CRITICAL">Kritisch</option>
|
||||||
|
<option value="HIGH">Hoch</option>
|
||||||
|
<option value="MEDIUM">Mittel</option>
|
||||||
|
<option value="LOW">Niedrig</option>
|
||||||
|
</select>
|
||||||
|
<select
|
||||||
|
value={filterStatus}
|
||||||
|
onChange={e => setFilterStatus(e.target.value)}
|
||||||
|
className="px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||||
|
>
|
||||||
|
<option value="all">Alle Status</option>
|
||||||
|
<option value="missing">Offen</option>
|
||||||
|
<option value="partial">Teilweise</option>
|
||||||
|
<option value="fulfilled">Erfuellt</option>
|
||||||
|
</select>
|
||||||
|
<span className="text-sm text-gray-500 self-center">
|
||||||
|
{filteredGaps.length} von {report.gaps.length} Anforderungen
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Gap List */}
|
||||||
|
<div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
||||||
|
<table className="w-full">
|
||||||
|
<thead className="bg-gray-50 border-b border-gray-200">
|
||||||
|
<tr>
|
||||||
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">#</th>
|
||||||
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Anforderung</th>
|
||||||
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Regulierung</th>
|
||||||
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
|
||||||
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Prioritaet</th>
|
||||||
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Controls</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-gray-100">
|
||||||
|
{filteredGaps.map(gap => (
|
||||||
|
<React.Fragment key={gap.mc_id}>
|
||||||
|
<tr
|
||||||
|
className="hover:bg-gray-50 cursor-pointer"
|
||||||
|
onClick={() => setExpandedGap(expandedGap === gap.mc_id ? null : gap.mc_id)}
|
||||||
|
>
|
||||||
|
<td className="px-4 py-3 text-sm text-gray-500">{gap.priority.rank}</td>
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<div className="text-sm font-medium text-gray-900">{gap.title}</div>
|
||||||
|
<div className="text-xs text-gray-500">{gap.mc_name}</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-gray-600">{gap.regulation}</td>
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${STATUS_COLORS[gap.status] || ''}`}>
|
||||||
|
{STATUS_LABELS[gap.status] || gap.status}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<span className={`px-2 py-1 rounded text-xs font-bold ${SEVERITY_COLORS[gap.severity] || ''}`}>
|
||||||
|
{gap.severity}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-gray-500">{gap.control_count}</td>
|
||||||
|
</tr>
|
||||||
|
{expandedGap === gap.mc_id && (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={6} className="px-4 py-4 bg-blue-50">
|
||||||
|
<div className="text-sm">
|
||||||
|
<p className="font-medium text-gray-700 mb-1">Empfehlung:</p>
|
||||||
|
<p className="text-gray-600">{gap.recommendation}</p>
|
||||||
|
<p className="mt-2 text-xs text-gray-400">
|
||||||
|
Priority Score: {gap.priority.score.toFixed(1)} | MC: {gap.mc_id}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SummaryCard({ label, value, color }: { label: string; value: string | number; color: string }) {
|
||||||
|
const bg = {
|
||||||
|
blue: 'bg-blue-50 border-blue-200',
|
||||||
|
red: 'bg-red-50 border-red-200',
|
||||||
|
green: 'bg-green-50 border-green-200',
|
||||||
|
orange: 'bg-orange-50 border-orange-200',
|
||||||
|
purple: 'bg-purple-50 border-purple-200',
|
||||||
|
}[color] || 'bg-gray-50 border-gray-200'
|
||||||
|
|
||||||
|
const text = {
|
||||||
|
blue: 'text-blue-700',
|
||||||
|
red: 'text-red-700',
|
||||||
|
green: 'text-green-700',
|
||||||
|
orange: 'text-orange-700',
|
||||||
|
purple: 'text-purple-700',
|
||||||
|
}[color] || 'text-gray-700'
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`rounded-xl border p-4 ${bg}`}>
|
||||||
|
<p className="text-sm text-gray-600">{label}</p>
|
||||||
|
<p className={`text-2xl font-bold mt-1 ${text}`}>{value}</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,238 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
|
||||||
|
const PRODUCT_TYPES = [
|
||||||
|
{ value: 'iot', label: 'IoT / Connected Device' },
|
||||||
|
{ value: 'software', label: 'Software / Desktop App' },
|
||||||
|
{ value: 'saas', label: 'SaaS / Cloud-Plattform' },
|
||||||
|
{ value: 'hardware', label: 'Hardware / Elektronik' },
|
||||||
|
{ value: 'machinery', label: 'Maschine / Anlage' },
|
||||||
|
{ value: 'medical_device', label: 'Medizinprodukt' },
|
||||||
|
{ value: 'exchange', label: 'Krypto-Exchange / Fintech' },
|
||||||
|
{ value: 'other', label: 'Sonstiges' },
|
||||||
|
]
|
||||||
|
|
||||||
|
const TECHNOLOGIES = [
|
||||||
|
{ value: 'ai', label: 'Kuenstliche Intelligenz / ML' },
|
||||||
|
{ value: 'blockchain', label: 'Blockchain / Smart Contracts' },
|
||||||
|
{ value: 'cloud', label: 'Cloud-Infrastruktur' },
|
||||||
|
{ value: 'api', label: 'REST/GraphQL API' },
|
||||||
|
{ value: 'database', label: 'Datenbank' },
|
||||||
|
{ value: 'encryption', label: 'Verschluesselung' },
|
||||||
|
{ value: 'ota_updates', label: 'OTA Software-Updates' },
|
||||||
|
{ value: 'sensor', label: 'Sensoren' },
|
||||||
|
{ value: 'actuator', label: 'Aktoren / Motoren' },
|
||||||
|
{ value: 'network', label: 'Netzwerk-Anbindung' },
|
||||||
|
{ value: 'camera', label: 'Kamera / Bilderkennung' },
|
||||||
|
{ value: 'payment', label: 'Zahlungsabwicklung' },
|
||||||
|
{ value: 'fiat_gateway', label: 'Fiat On/Off-Ramp' },
|
||||||
|
]
|
||||||
|
|
||||||
|
const DATA_TYPES = [
|
||||||
|
{ value: 'personal_data', label: 'Personenbezogene Daten' },
|
||||||
|
{ value: 'health_data', label: 'Gesundheitsdaten' },
|
||||||
|
{ value: 'financial_data', label: 'Finanzdaten' },
|
||||||
|
{ value: 'telemetry', label: 'Telemetrie / Nutzungsdaten' },
|
||||||
|
]
|
||||||
|
|
||||||
|
const CERTIFICATIONS = [
|
||||||
|
{ value: 'ISO27001', label: 'ISO 27001' },
|
||||||
|
{ value: 'CE', label: 'CE-Kennzeichnung' },
|
||||||
|
{ value: 'SOC2', label: 'SOC 2' },
|
||||||
|
{ value: 'ISO13485', label: 'ISO 13485 (Medizin)' },
|
||||||
|
]
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
onAnalyze: (profile: Record<string, unknown>) => void
|
||||||
|
loading: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ProductWizard({ onAnalyze, loading }: Props) {
|
||||||
|
const [name, setName] = useState('')
|
||||||
|
const [description, setDescription] = useState('')
|
||||||
|
const [productType, setProductType] = useState('')
|
||||||
|
const [technologies, setTechnologies] = useState<string[]>([])
|
||||||
|
const [dataProcessing, setDataProcessing] = useState<string[]>([])
|
||||||
|
const [certifications, setCertifications] = useState<string[]>([])
|
||||||
|
const [connectedToInternet, setConnectedToInternet] = useState(false)
|
||||||
|
const [hasSoftwareUpdates, setHasSoftwareUpdates] = useState(false)
|
||||||
|
const [usesAI, setUsesAI] = useState(false)
|
||||||
|
const [processesPersonalData, setProcessesPersonalData] = useState(false)
|
||||||
|
const [isCriticalInfra, setIsCriticalInfra] = useState(false)
|
||||||
|
|
||||||
|
const toggleArrayValue = (
|
||||||
|
arr: string[],
|
||||||
|
setter: (v: string[]) => void,
|
||||||
|
value: string
|
||||||
|
) => {
|
||||||
|
setter(arr.includes(value) ? arr.filter(v => v !== value) : [...arr, value])
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
onAnalyze({
|
||||||
|
name: name || 'Unbenanntes Produkt',
|
||||||
|
description,
|
||||||
|
product_type: productType,
|
||||||
|
technologies,
|
||||||
|
data_processing: dataProcessing,
|
||||||
|
markets: ['EU'],
|
||||||
|
connected_to_internet: connectedToInternet,
|
||||||
|
has_software_updates: hasSoftwareUpdates,
|
||||||
|
uses_ai: usesAI,
|
||||||
|
processes_personal_data: processesPersonalData,
|
||||||
|
is_critical_infra_supplier: isCriticalInfra,
|
||||||
|
existing_certifications: certifications,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
|
||||||
|
{/* Produktname */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Produktname
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={name}
|
||||||
|
onChange={e => setName(e.target.value)}
|
||||||
|
placeholder="z.B. SmartFactory Gateway Pro"
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Beschreibung */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Produktbeschreibung
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={description}
|
||||||
|
onChange={e => setDescription(e.target.value)}
|
||||||
|
rows={3}
|
||||||
|
placeholder="Beschreiben Sie Ihr Produkt in 2-3 Saetzen..."
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Produkttyp */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Produkttyp
|
||||||
|
</label>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||||
|
{PRODUCT_TYPES.map(pt => (
|
||||||
|
<button
|
||||||
|
key={pt.value}
|
||||||
|
onClick={() => setProductType(pt.value)}
|
||||||
|
className={`px-4 py-3 rounded-lg border text-sm font-medium transition-colors ${
|
||||||
|
productType === pt.value
|
||||||
|
? 'bg-blue-50 border-blue-500 text-blue-700'
|
||||||
|
: 'border-gray-200 text-gray-700 hover:bg-gray-50'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{pt.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Technologien */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Verwendete Technologien
|
||||||
|
</label>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{TECHNOLOGIES.map(t => (
|
||||||
|
<button
|
||||||
|
key={t.value}
|
||||||
|
onClick={() => toggleArrayValue(technologies, setTechnologies, t.value)}
|
||||||
|
className={`px-3 py-1.5 rounded-full text-sm border transition-colors ${
|
||||||
|
technologies.includes(t.value)
|
||||||
|
? 'bg-blue-100 border-blue-400 text-blue-800'
|
||||||
|
: 'border-gray-200 text-gray-600 hover:bg-gray-50'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{t.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Datenverarbeitung */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Verarbeitete Daten
|
||||||
|
</label>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{DATA_TYPES.map(d => (
|
||||||
|
<button
|
||||||
|
key={d.value}
|
||||||
|
onClick={() => toggleArrayValue(dataProcessing, setDataProcessing, d.value)}
|
||||||
|
className={`px-3 py-1.5 rounded-full text-sm border transition-colors ${
|
||||||
|
dataProcessing.includes(d.value)
|
||||||
|
? 'bg-green-100 border-green-400 text-green-800'
|
||||||
|
: 'border-gray-200 text-gray-600 hover:bg-gray-50'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{d.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Checkboxen */}
|
||||||
|
<div className="mb-6 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
{[
|
||||||
|
{ label: 'Mit dem Internet verbunden', value: connectedToInternet, setter: setConnectedToInternet },
|
||||||
|
{ label: 'Hat Software-Updates (OTA)', value: hasSoftwareUpdates, setter: setHasSoftwareUpdates },
|
||||||
|
{ label: 'Verwendet KI / Machine Learning', value: usesAI, setter: setUsesAI },
|
||||||
|
{ label: 'Verarbeitet personenbezogene Daten', value: processesPersonalData, setter: setProcessesPersonalData },
|
||||||
|
{ label: 'Zulieferer fuer kritische Infrastruktur', value: isCriticalInfra, setter: setIsCriticalInfra },
|
||||||
|
].map(cb => (
|
||||||
|
<label key={cb.label} className="flex items-center gap-3 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={cb.value}
|
||||||
|
onChange={e => cb.setter(e.target.checked)}
|
||||||
|
className="w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-gray-700">{cb.label}</span>
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bestehende Zertifizierungen */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Bestehende Zertifizierungen (optional)
|
||||||
|
</label>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{CERTIFICATIONS.map(cert => (
|
||||||
|
<button
|
||||||
|
key={cert.value}
|
||||||
|
onClick={() => toggleArrayValue(certifications, setCertifications, cert.value)}
|
||||||
|
className={`px-3 py-1.5 rounded-full text-sm border transition-colors ${
|
||||||
|
certifications.includes(cert.value)
|
||||||
|
? 'bg-purple-100 border-purple-400 text-purple-800'
|
||||||
|
: 'border-gray-200 text-gray-600 hover:bg-gray-50'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{cert.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Submit */}
|
||||||
|
<button
|
||||||
|
onClick={handleSubmit}
|
||||||
|
disabled={!productType || loading}
|
||||||
|
className="w-full py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
|
||||||
|
>
|
||||||
|
{loading ? 'Analyse laeuft...' : 'Gap-Analyse starten'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,96 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import { ProductWizard } from './_components/ProductWizard'
|
||||||
|
import { GapDashboard } from './_components/GapDashboard'
|
||||||
|
|
||||||
|
interface GapReport {
|
||||||
|
profile_id: string
|
||||||
|
profile_name: string
|
||||||
|
regulations: Array<{
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
applicable: boolean
|
||||||
|
confidence: number
|
||||||
|
reasoning: string
|
||||||
|
risk_level: string
|
||||||
|
deadline?: string
|
||||||
|
requirements?: string[]
|
||||||
|
}>
|
||||||
|
summary: {
|
||||||
|
total_applicable_regulations: number
|
||||||
|
total_gaps: number
|
||||||
|
gaps_by_status: Record<string, number>
|
||||||
|
gaps_by_severity: Record<string, number>
|
||||||
|
gaps_by_regulation: Record<string, number>
|
||||||
|
overall_compliance_percent: number
|
||||||
|
estimated_effort_weeks: number
|
||||||
|
}
|
||||||
|
gaps: Array<{
|
||||||
|
mc_id: string
|
||||||
|
mc_name: string
|
||||||
|
regulation: string
|
||||||
|
status: string
|
||||||
|
title: string
|
||||||
|
severity: string
|
||||||
|
priority: { score: number; rank: number }
|
||||||
|
recommendation: string
|
||||||
|
control_count: number
|
||||||
|
}>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function GapAnalysisPage() {
|
||||||
|
const [report, setReport] = useState<GapReport | null>(null)
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
const [error, setError] = useState('')
|
||||||
|
|
||||||
|
const handleAnalyze = async (profile: Record<string, unknown>) => {
|
||||||
|
setLoading(true)
|
||||||
|
setError('')
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/sdk/v1/gap/analyze', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(profile),
|
||||||
|
})
|
||||||
|
if (!res.ok) throw new Error(await res.text())
|
||||||
|
const data = await res.json()
|
||||||
|
setReport(data)
|
||||||
|
} catch (e) {
|
||||||
|
setError(e instanceof Error ? e.message : 'Analyse fehlgeschlagen')
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 py-8">
|
||||||
|
<div className="max-w-6xl mx-auto px-4">
|
||||||
|
<div className="mb-8">
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900">
|
||||||
|
Regulatory Gap-Analyse
|
||||||
|
</h1>
|
||||||
|
<p className="text-gray-600 mt-2">
|
||||||
|
Beschreiben Sie Ihr Produkt und erhalten Sie eine priorisierte
|
||||||
|
Liste der Compliance-Anforderungen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="mb-6 bg-red-50 border border-red-200 rounded-lg p-4">
|
||||||
|
<p className="text-red-700">{error}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!report ? (
|
||||||
|
<ProductWizard onAnalyze={handleAnalyze} loading={loading} />
|
||||||
|
) : (
|
||||||
|
<GapDashboard
|
||||||
|
report={report}
|
||||||
|
onBack={() => setReport(null)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user