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