Benjamin Admin
ef4cf1cb62
Readiness check: legally tighter + sales-sharper copy per review — names both regulations cleanly (CRA + Machinery Reg 2023/1230 in plain language), frames CRA Art. 13 as "more than a yearly pentest: assess/document/handle cyber risk across the lifecycle" (not over-claiming a "continuously documented risk assessment"), adds the "we turn regulation into code" positioning, and reorders the 8 questions in CRA order (machine -> connectivity -> software -> updates -> remote -> app -> personal data -> critical env). Track B: the Compliance Agent Pre-Scan wizard now detects the shared CompanyProfile and offers "Aus Profil übernehmen" — tolerant mapping (legal_form, industry, employee_count) across the differing module vocabularies, user- triggered (never silent), so company context isn't re-asked. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
324 lines
12 KiB
TypeScript
324 lines
12 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* P79 — Pre-Scan-Wizard (8 Pflichtfelder).
|
|
*
|
|
* 8 Pflichtfelder die vor dem Lauf abgefragt werden. Werte landen im
|
|
* scan_context und filtern später die MC-Auswertung (zusammen mit P72
|
|
* scope_doc_type + applicable_industries). Erwartete Noise-Reduktion:
|
|
* 70-80% bei falsch zugeordneten HIGH-MCs.
|
|
*/
|
|
|
|
import React, { useState, useEffect } from 'react'
|
|
|
|
export interface ScanContext {
|
|
industry: string
|
|
business_model: string
|
|
direct_sales: string
|
|
legal_form: string
|
|
group_structure: string
|
|
employee_count: string
|
|
special_data: string[]
|
|
third_country_transfer: string
|
|
}
|
|
|
|
const INDUSTRIES = [
|
|
{ id: '', label: '— bitte wählen —' },
|
|
{ id: 'automotive', label: 'Automotive / OEM' },
|
|
{ id: 'ecommerce', label: 'E-Commerce / Online-Handel' },
|
|
{ id: 'saas', label: 'SaaS / Software' },
|
|
{ id: 'banking', label: 'Banking / Finance' },
|
|
{ id: 'insurance', label: 'Insurance / Versicherung' },
|
|
{ id: 'healthcare', label: 'Healthcare / Gesundheit' },
|
|
{ id: 'education', label: 'Bildung / Schule' },
|
|
{ id: 'public', label: 'Öffentliche Verwaltung' },
|
|
{ id: 'manufacturing', label: 'Industrie / Manufacturing' },
|
|
{ id: 'media', label: 'Medien / Verlag' },
|
|
{ id: 'other', label: 'Sonstige' },
|
|
]
|
|
|
|
const LEGAL_FORMS = [
|
|
{ id: '', label: '— bitte wählen —' },
|
|
{ id: 'ag', label: 'AG (Aktiengesellschaft)' },
|
|
{ id: 'gmbh', label: 'GmbH' },
|
|
{ id: 'gmbh_co_kg', label: 'GmbH & Co. KG' },
|
|
{ id: 'kg', label: 'KG' },
|
|
{ id: 'ohg', label: 'OHG' },
|
|
{ id: 'ug', label: 'UG (haftungsbeschränkt)' },
|
|
{ id: 'ek', label: 'e.K. / Einzelunternehmen' },
|
|
{ id: 'verein', label: 'Verein' },
|
|
{ id: 'stiftung', label: 'Stiftung' },
|
|
{ id: 'behoerde', label: 'Behörde / Körperschaft öff. Rechts' },
|
|
{ id: 'other', label: 'Sonstige' },
|
|
]
|
|
|
|
const GROUP_STRUCTURES = [
|
|
{ id: '', label: '— bitte wählen —' },
|
|
{ id: 'standalone', label: 'Eigenständig' },
|
|
{ id: 'parent', label: 'Konzern-Mutter' },
|
|
{ id: 'subsidiary', label: 'Konzern-Tochter' },
|
|
{ id: 'joint_venture', label: 'Joint Venture' },
|
|
{ id: 'processor', label: 'Reiner Auftragsverarbeiter' },
|
|
]
|
|
|
|
const EMPLOYEE_COUNTS = [
|
|
{ id: '', label: '— bitte wählen —' },
|
|
{ id: 'lt10', label: 'unter 10' },
|
|
{ id: '10_19', label: '10-19' },
|
|
{ id: '20_49', label: '20-49 (DSB ab 20 Pflicht)' },
|
|
{ id: '50_249', label: '50-249 (Whistleblower-Pflicht)' },
|
|
{ id: '250_499', label: '250-499' },
|
|
{ id: '500_999', label: '500-999' },
|
|
{ id: '1000_plus', label: '1.000+ (Konzern)' },
|
|
]
|
|
|
|
const SPECIAL_DATA_OPTIONS = [
|
|
{ id: 'health', label: 'Gesundheitsdaten' },
|
|
{ id: 'biometric', label: 'Biometrische Daten' },
|
|
{ id: 'ethnicity', label: 'Religiöse / ethnische Herkunft' },
|
|
{ id: 'sexual', label: 'Sexuelle Orientierung' },
|
|
{ id: 'criminal', label: 'Strafrechtliche Daten' },
|
|
{ id: 'minors', label: 'Minderjährige (<16)' },
|
|
{ id: 'none', label: 'Keine besonderen Daten' },
|
|
]
|
|
|
|
const STORAGE_KEY = 'compliance-scan-context'
|
|
|
|
function emptyContext(): ScanContext {
|
|
return {
|
|
industry: '',
|
|
business_model: '',
|
|
direct_sales: '',
|
|
legal_form: '',
|
|
group_structure: '',
|
|
employee_count: '',
|
|
special_data: [],
|
|
third_country_transfer: '',
|
|
}
|
|
}
|
|
|
|
export function isContextComplete(ctx: ScanContext): boolean {
|
|
return Boolean(
|
|
ctx.industry &&
|
|
ctx.business_model &&
|
|
ctx.direct_sales &&
|
|
ctx.legal_form &&
|
|
ctx.group_structure &&
|
|
ctx.employee_count &&
|
|
ctx.special_data.length > 0 &&
|
|
ctx.third_country_transfer
|
|
)
|
|
}
|
|
|
|
// Track B — consolidation: prefill from the shared CompanyProfile instead of
|
|
// re-asking. Vocabularies differ across modules, so map tolerantly (only fields
|
|
// that map cleanly; the rest the user fills). User-triggered, never silent.
|
|
const DEV_TENANT = '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
|
|
const _VALID_LEGAL = new Set(['ag', 'gmbh', 'gmbh_co_kg', 'kg', 'ohg', 'ug', 'ek', 'verein', 'stiftung', 'behoerde'])
|
|
const _INDUSTRY_ALIAS: Record<string, string> = {
|
|
maschinenbau: 'manufacturing', industrie: 'manufacturing', manufacturing: 'manufacturing',
|
|
automotive: 'automotive', oem: 'automotive', saas: 'saas', software: 'saas',
|
|
ecommerce: 'ecommerce', handel: 'ecommerce', banking: 'banking', finance: 'banking',
|
|
insurance: 'insurance', versicherung: 'insurance', healthcare: 'healthcare', gesundheit: 'healthcare',
|
|
bildung: 'education', education: 'education', medien: 'media', media: 'media',
|
|
verwaltung: 'public', public: 'public',
|
|
}
|
|
const _SIZE_TO_EMP: Record<string, string> = {
|
|
micro: 'lt10', small: '20_49', medium: '50_249', large: '250_499', enterprise: '1000_plus',
|
|
}
|
|
|
|
function mapProfileToScanContext(p: any): Partial<ScanContext> {
|
|
const out: Partial<ScanContext> = {}
|
|
const lf = String(p.legal_form || '').toLowerCase().replace(/[^a-z_]/g, '')
|
|
if (_VALID_LEGAL.has(lf)) out.legal_form = lf
|
|
const ind = String(Array.isArray(p.industry) ? p.industry[0] : (p.industry || '')).toLowerCase().trim()
|
|
if (_INDUSTRY_ALIAS[ind]) out.industry = _INDUSTRY_ALIAS[ind]
|
|
const size = String(p.company_size || '').toLowerCase()
|
|
if (_SIZE_TO_EMP[size]) out.employee_count = _SIZE_TO_EMP[size]
|
|
return out
|
|
}
|
|
|
|
export function PreScanWizard({
|
|
value,
|
|
onChange,
|
|
}: {
|
|
value: ScanContext
|
|
onChange: (ctx: ScanContext) => void
|
|
}) {
|
|
const [profile, setProfile] = useState<any>(null)
|
|
useEffect(() => {
|
|
fetch(`/api/sdk/v1/company-profile?tenant_id=${DEV_TENANT}`)
|
|
.then((r) => (r.ok ? r.json() : null))
|
|
.then((p) => { if (p && p.company_name) setProfile(p) })
|
|
.catch(() => {})
|
|
}, [])
|
|
|
|
const update = <K extends keyof ScanContext>(key: K, val: ScanContext[K]) => {
|
|
onChange({ ...value, [key]: val })
|
|
}
|
|
|
|
const toggleSpecialData = (id: string) => {
|
|
const next = value.special_data.includes(id)
|
|
? value.special_data.filter(x => x !== id)
|
|
: [...value.special_data.filter(x => x !== 'none' || id === 'none'), id]
|
|
onChange({ ...value, special_data: id === 'none' ? ['none'] : next.filter(x => x !== 'none') })
|
|
}
|
|
|
|
return (
|
|
<div style={{
|
|
background: '#f0f9ff',
|
|
border: '1px solid #bfdbfe',
|
|
borderRadius: 8,
|
|
padding: '14px 16px',
|
|
marginBottom: 14,
|
|
}}>
|
|
<div style={{ fontSize: 11, color: '#1e40af', textTransform: 'uppercase',
|
|
letterSpacing: 1.2, marginBottom: 4, fontWeight: 600 }}>
|
|
Pflichtangaben zur Klassifizierung des Audits
|
|
</div>
|
|
<h3 style={{ margin: '0 0 6px', fontSize: 14, color: '#1e293b' }}>
|
|
Vor dem Scan: 8 Angaben zum Unternehmen
|
|
</h3>
|
|
<p style={{ margin: '0 0 12px', fontSize: 11, color: '#475569', lineHeight: 1.5 }}>
|
|
Diese Angaben filtern irrelevante Compliance-Themen heraus (z.B. eHealth-
|
|
Vorschriften bei einem Autobauer) und liefern eine realistische
|
|
Einschätzung statt pauschaler Verstoss-Listen.
|
|
</p>
|
|
|
|
{profile && (
|
|
<div style={{ background: '#ecfdf5', border: '1px solid #a7f3d0', borderRadius: 8,
|
|
padding: '8px 12px', marginBottom: 12, fontSize: 11, color: '#065f46' }}>
|
|
<strong>Unternehmensprofil erkannt:</strong> {profile.company_name}
|
|
{profile.industry ? ` · ${Array.isArray(profile.industry) ? profile.industry.join(', ') : profile.industry}` : ''}
|
|
{profile.legal_form ? ` · ${profile.legal_form}` : ''}
|
|
{profile.company_size ? ` · ${profile.company_size}` : ''}
|
|
{' '}— diese Angaben müssen Sie nicht erneut eingeben.
|
|
<button
|
|
onClick={() => onChange({ ...value, ...mapProfileToScanContext(profile) })}
|
|
style={{ marginLeft: 8, padding: '2px 10px', borderRadius: 6, border: '1px solid #059669',
|
|
background: '#059669', color: '#fff', cursor: 'pointer', fontSize: 11 }}
|
|
>
|
|
Aus Profil übernehmen
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
|
|
<Field label="1. Branche*">
|
|
<select value={value.industry} onChange={e => update('industry', e.target.value)} style={inputStyle}>
|
|
{INDUSTRIES.map(o => <option key={o.id} value={o.id}>{o.label}</option>)}
|
|
</select>
|
|
</Field>
|
|
|
|
<Field label="2. Geschäftsmodell*">
|
|
<select value={value.business_model} onChange={e => update('business_model', e.target.value)} style={inputStyle}>
|
|
<option value="">— bitte wählen —</option>
|
|
<option value="b2b">B2B</option>
|
|
<option value="b2c">B2C</option>
|
|
<option value="both">Beides (B2B + B2C)</option>
|
|
</select>
|
|
</Field>
|
|
|
|
<Field label="3. Direkt-Vertrieb (Webshop/Buchung)*">
|
|
<select value={value.direct_sales} onChange={e => update('direct_sales', e.target.value)} style={inputStyle}>
|
|
<option value="">— bitte wählen —</option>
|
|
<option value="yes">Ja</option>
|
|
<option value="no">Nein</option>
|
|
<option value="lead_funnel">Nur Lead-Funnel (Probefahrten, Anfragen)</option>
|
|
</select>
|
|
</Field>
|
|
|
|
<Field label="4. Rechtsform*">
|
|
<select value={value.legal_form} onChange={e => update('legal_form', e.target.value)} style={inputStyle}>
|
|
{LEGAL_FORMS.map(o => <option key={o.id} value={o.id}>{o.label}</option>)}
|
|
</select>
|
|
</Field>
|
|
|
|
<Field label="5. Konzern-Struktur*">
|
|
<select value={value.group_structure} onChange={e => update('group_structure', e.target.value)} style={inputStyle}>
|
|
{GROUP_STRUCTURES.map(o => <option key={o.id} value={o.id}>{o.label}</option>)}
|
|
</select>
|
|
</Field>
|
|
|
|
<Field label="6. Mitarbeiterzahl*">
|
|
<select value={value.employee_count} onChange={e => update('employee_count', e.target.value)} style={inputStyle}>
|
|
{EMPLOYEE_COUNTS.map(o => <option key={o.id} value={o.id}>{o.label}</option>)}
|
|
</select>
|
|
</Field>
|
|
|
|
<Field label="7. Besondere Datenkategorien*" colSpan={2}>
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
|
|
{SPECIAL_DATA_OPTIONS.map(o => (
|
|
<label key={o.id} style={{ fontSize: 12, display: 'inline-flex',
|
|
alignItems: 'center', gap: 4,
|
|
padding: '4px 8px', background: '#fff',
|
|
border: '1px solid #cbd5e1',
|
|
borderRadius: 4 }}>
|
|
<input type="checkbox"
|
|
checked={value.special_data.includes(o.id)}
|
|
onChange={() => toggleSpecialData(o.id)} />
|
|
{o.label}
|
|
</label>
|
|
))}
|
|
</div>
|
|
</Field>
|
|
|
|
<Field label="8. Bekannter Drittland-Transfer*" colSpan={2}>
|
|
<select value={value.third_country_transfer} onChange={e => update('third_country_transfer', e.target.value)} style={inputStyle}>
|
|
<option value="">— bitte wählen —</option>
|
|
<option value="yes">Ja (USA, CN, IN, UK, ...)</option>
|
|
<option value="no">Nein (nur EU/EWR)</option>
|
|
<option value="unknown">Weiß nicht (bitte automatisch prüfen)</option>
|
|
</select>
|
|
</Field>
|
|
</div>
|
|
|
|
{!isContextComplete(value) && (
|
|
<div style={{ marginTop: 10, fontSize: 11, color: '#92400e',
|
|
background: '#fef3c7', padding: '6px 10px',
|
|
borderRadius: 4, border: '1px solid #fde68a' }}>
|
|
Bitte alle 8 Pflichtfelder ausfüllen — der Scan-Button wird erst aktiv,
|
|
wenn die Klassifizierung komplett ist.
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const inputStyle: React.CSSProperties = {
|
|
width: '100%',
|
|
padding: '6px 8px',
|
|
fontSize: 12,
|
|
border: '1px solid #cbd5e1',
|
|
borderRadius: 4,
|
|
background: '#fff',
|
|
}
|
|
|
|
function Field({ label, children, colSpan }: { label: string; children: React.ReactNode; colSpan?: number }) {
|
|
return (
|
|
<div style={{ gridColumn: colSpan ? `span ${colSpan}` : undefined }}>
|
|
<label style={{ display: 'block', fontSize: 11, color: '#475569',
|
|
marginBottom: 4, fontWeight: 600 }}>
|
|
{label}
|
|
</label>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function useScanContext(): [ScanContext, (ctx: ScanContext) => void] {
|
|
const [ctx, setCtx] = useState<ScanContext>(() => {
|
|
if (typeof window === 'undefined') return emptyContext()
|
|
try {
|
|
const s = localStorage.getItem(STORAGE_KEY)
|
|
return s ? { ...emptyContext(), ...JSON.parse(s) } : emptyContext()
|
|
} catch {
|
|
return emptyContext()
|
|
}
|
|
})
|
|
useEffect(() => {
|
|
try { localStorage.setItem(STORAGE_KEY, JSON.stringify(ctx)) } catch {}
|
|
}, [ctx])
|
|
return [ctx, setCtx]
|
|
}
|