a673cb0ce4
Some checks failed
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 41s
CI/CD / test-python-backend-compliance (push) Successful in 39s
CI/CD / test-python-document-crawler (push) Successful in 25s
CI/CD / test-python-dsms-gateway (push) Successful in 21s
CI/CD / deploy-hetzner (push) Failing after 1s
The auto-save timers (SDK context + backend) were firing after completeAndSaveProfile(), resetting isComplete back to false. Fix: skip auto-save when currentStep===99 (completed), cancel pending timers before completing, and await backend save before updating SDK context. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
3018 lines
149 KiB
TypeScript
3018 lines
149 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, useEffect, useRef } from 'react'
|
|
import { useSDK } from '@/lib/sdk'
|
|
import {
|
|
CompanyProfile,
|
|
BusinessModel,
|
|
OfferingType,
|
|
TargetMarket,
|
|
CompanySize,
|
|
LegalForm,
|
|
MachineBuilderProfile,
|
|
MachineProductType,
|
|
AIIntegrationType,
|
|
HumanOversightLevel,
|
|
CriticalSector,
|
|
BUSINESS_MODEL_LABELS,
|
|
OFFERING_TYPE_LABELS,
|
|
TARGET_MARKET_LABELS,
|
|
COMPANY_SIZE_LABELS,
|
|
MACHINE_PRODUCT_TYPE_LABELS,
|
|
AI_INTEGRATION_TYPE_LABELS,
|
|
HUMAN_OVERSIGHT_LABELS,
|
|
CRITICAL_SECTOR_LABELS,
|
|
} from '@/lib/sdk/types'
|
|
|
|
// =============================================================================
|
|
// WIZARD STEPS
|
|
// =============================================================================
|
|
|
|
const BASE_WIZARD_STEPS = [
|
|
{ id: 1, name: 'Basisinfos', description: 'Firmenname und Rechtsform' },
|
|
{ id: 2, name: 'Geschaeftsmodell', description: 'B2B, B2C und Angebote' },
|
|
{ id: 3, name: 'Firmengroesse', description: 'Mitarbeiter und Umsatz' },
|
|
{ id: 4, name: 'Standorte', description: 'Hauptsitz und Zielmaerkte' },
|
|
{ id: 5, name: 'Datenschutz', description: 'Rollen und DSB' },
|
|
{ id: 6, name: 'Zertifizierungen & Kontakte', description: 'Bestehende und angestrebte Zertifizierungen' },
|
|
]
|
|
|
|
const MACHINE_BUILDER_STEP = { id: 7, name: 'Produkt & Maschine', description: 'Software, KI und CE in Ihrem Produkt' }
|
|
|
|
function getWizardSteps(industry: string | string[]) {
|
|
if (isMachineBuilderIndustry(industry)) {
|
|
return [...BASE_WIZARD_STEPS, MACHINE_BUILDER_STEP]
|
|
}
|
|
return BASE_WIZARD_STEPS
|
|
}
|
|
|
|
// Keep WIZARD_STEPS for backwards compat in static references
|
|
const WIZARD_STEPS = BASE_WIZARD_STEPS
|
|
|
|
// =============================================================================
|
|
// LEGAL FORMS
|
|
// =============================================================================
|
|
|
|
const LEGAL_FORM_LABELS: Record<LegalForm, string> = {
|
|
einzelunternehmen: 'Einzelunternehmen',
|
|
gbr: 'GbR',
|
|
ohg: 'OHG',
|
|
kg: 'KG',
|
|
gmbh: 'GmbH',
|
|
ug: 'UG (haftungsbeschränkt)',
|
|
ag: 'AG',
|
|
gmbh_co_kg: 'GmbH & Co. KG',
|
|
ev: 'e.V. (Verein)',
|
|
stiftung: 'Stiftung',
|
|
other: 'Sonstige',
|
|
}
|
|
|
|
// =============================================================================
|
|
// INDUSTRIES
|
|
// =============================================================================
|
|
|
|
const INDUSTRIES = [
|
|
'Technologie / IT',
|
|
'IT Dienstleistungen',
|
|
'E-Commerce / Handel',
|
|
'Finanzdienstleistungen',
|
|
'Versicherungen',
|
|
'Gesundheitswesen',
|
|
'Pharma',
|
|
'Bildung',
|
|
'Beratung / Consulting',
|
|
'Marketing / Agentur',
|
|
'Produktion / Industrie',
|
|
'Logistik / Transport',
|
|
'Immobilien',
|
|
'Bau',
|
|
'Energie',
|
|
'Automobil',
|
|
'Luft- und Raumfahrt',
|
|
'Maschinenbau',
|
|
'Anlagenbau',
|
|
'Automatisierung',
|
|
'Robotik',
|
|
'Messtechnik',
|
|
'Agrar',
|
|
'Chemie',
|
|
'Minen / Bergbau',
|
|
'Telekommunikation',
|
|
'Medien / Verlage',
|
|
'Gastronomie / Hotellerie',
|
|
'Recht / Kanzlei',
|
|
'Oeffentlicher Dienst',
|
|
'Sonstige',
|
|
]
|
|
|
|
const MACHINE_BUILDER_INDUSTRIES = [
|
|
'Maschinenbau',
|
|
'Anlagenbau',
|
|
'Automatisierung',
|
|
'Robotik',
|
|
'Messtechnik',
|
|
]
|
|
|
|
const isMachineBuilderIndustry = (industry: string | string[]) => {
|
|
const industries = Array.isArray(industry) ? industry : [industry]
|
|
return industries.some(i => MACHINE_BUILDER_INDUSTRIES.includes(i))
|
|
}
|
|
|
|
// =============================================================================
|
|
// STEP COMPONENTS
|
|
// =============================================================================
|
|
|
|
function StepBasicInfo({
|
|
data,
|
|
onChange,
|
|
}: {
|
|
data: Partial<CompanyProfile>
|
|
onChange: (updates: Partial<CompanyProfile>) => void
|
|
}) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Firmenname <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={data.companyName || ''}
|
|
onChange={e => onChange({ companyName: e.target.value })}
|
|
placeholder="Ihre Firma (ohne Rechtsform)"
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Rechtsform <span className="text-red-500">*</span>
|
|
</label>
|
|
<select
|
|
value={data.legalForm || ''}
|
|
onChange={e => onChange({ legalForm: e.target.value as LegalForm })}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
>
|
|
<option value="">Bitte wählen...</option>
|
|
{Object.entries(LEGAL_FORM_LABELS).map(([value, label]) => (
|
|
<option key={value} value={value}>
|
|
{label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Branche(n)</label>
|
|
<p className="text-sm text-gray-500 mb-3">Mehrfachauswahl moeglich</p>
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
|
|
{INDUSTRIES.map(ind => {
|
|
const selected = (data.industry || []).includes(ind)
|
|
return (
|
|
<button
|
|
key={ind}
|
|
type="button"
|
|
onClick={() => {
|
|
const current = data.industry || []
|
|
const updated = selected
|
|
? current.filter(i => i !== ind)
|
|
: [...current, ind]
|
|
onChange({ industry: updated })
|
|
}}
|
|
className={`p-3 rounded-lg border-2 text-sm text-left transition-all ${
|
|
selected
|
|
? 'border-purple-500 bg-purple-50 text-purple-700 font-medium'
|
|
: 'border-gray-200 hover:border-purple-300 text-gray-700'
|
|
}`}
|
|
>
|
|
{ind}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
{(data.industry || []).includes('Sonstige') && (
|
|
<div className="mt-3">
|
|
<input
|
|
type="text"
|
|
value={data.industryOther || ''}
|
|
onChange={e => onChange({ industryOther: e.target.value })}
|
|
placeholder="Ihre Branche eingeben..."
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">Gründungsjahr</label>
|
|
<input
|
|
type="number"
|
|
value={data.foundedYear || ''}
|
|
onChange={e => {
|
|
const val = parseInt(e.target.value)
|
|
onChange({ foundedYear: isNaN(val) ? null : val })
|
|
}}
|
|
onFocus={e => {
|
|
if (!data.foundedYear) onChange({ foundedYear: 2000 })
|
|
}}
|
|
placeholder="2020"
|
|
min="1900"
|
|
max={new Date().getFullYear()}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// URL fields shown when specific offerings are selected
|
|
const OFFERING_URL_CONFIG: Partial<Record<OfferingType, { label: string; placeholder: string; hint: string }>> = {
|
|
website: { label: 'Website-Domain', placeholder: 'https://www.beispiel.de', hint: 'Ihre Unternehmenswebsite' },
|
|
webshop: { label: 'Online-Shop URL', placeholder: 'https://shop.beispiel.de', hint: 'URL zu Ihrem Online-Shop' },
|
|
app_mobile: { label: 'App-Store Links', placeholder: 'https://apps.apple.com/... oder https://play.google.com/...', hint: 'Apple App Store und/oder Google Play Store Link' },
|
|
software_saas: { label: 'SaaS-Portal URL', placeholder: 'https://app.beispiel.de', hint: 'Login-/Registrierungsseite Ihres Kundenportals' },
|
|
app_web: { label: 'Web-App URL', placeholder: 'https://app.beispiel.de', hint: 'URL zu Ihrer Web-Anwendung' },
|
|
}
|
|
|
|
// Step-specific explanations for "Warum diese Fragen?"
|
|
const STEP_EXPLANATIONS: Record<number, string> = {
|
|
1: 'Rechtsform und Gründungsjahr bestimmen, welche Meldepflichten und Schwellenwerte für Ihr Unternehmen gelten (z.B. NIS2, AI Act).',
|
|
2: 'Ihr Geschäftsmodell und Ihre Angebote bestimmen, welche DSGVO-Pflichten greifen: B2C erfordert z.B. strengere Einwilligungsregeln, Webshops brauchen Cookie-Banner und Datenschutzerklärungen, SaaS-Angebote eine Auftragsverarbeitung.',
|
|
3: 'Die Unternehmensgröße bestimmt, ob Sie einen DSB benennen müssen (ab 20 MA), ob NIS2-Pflichten greifen und welche Audit-Anforderungen gelten.',
|
|
4: 'Standorte und Zielmärkte bestimmen, welche nationalen Datenschutzgesetze zusätzlich zur DSGVO greifen (z.B. BDSG, DSG-AT, UK GDPR, CCPA).',
|
|
5: 'Ob Sie Verantwortlicher oder Auftragsverarbeiter sind, bestimmt Ihre DSGVO-Pflichten grundlegend.',
|
|
6: 'Regulierungsrahmen und Prüfzyklen definieren, welche Compliance-Module für Sie aktiviert werden und in welchem Rhythmus Audits stattfinden.',
|
|
7: 'Als Maschinenbauer gelten zusätzliche Anforderungen: CE-Kennzeichnung, Maschinenverordnung, Produktsicherheit und ggf. Hochrisiko-KI im Sinne des AI Act.',
|
|
}
|
|
|
|
function StepBusinessModel({
|
|
data,
|
|
onChange,
|
|
}: {
|
|
data: Partial<CompanyProfile>
|
|
onChange: (updates: Partial<CompanyProfile>) => void
|
|
}) {
|
|
const toggleOffering = (offering: OfferingType) => {
|
|
const current = data.offerings || []
|
|
if (current.includes(offering)) {
|
|
// Remove offering and its URL
|
|
const urls = { ...(data.offeringUrls || {}) }
|
|
delete urls[offering]
|
|
onChange({ offerings: current.filter(o => o !== offering), offeringUrls: urls })
|
|
} else {
|
|
onChange({ offerings: [...current, offering] })
|
|
}
|
|
}
|
|
|
|
const updateOfferingUrl = (offering: string, url: string) => {
|
|
onChange({ offeringUrls: { ...(data.offeringUrls || {}), [offering]: url } })
|
|
}
|
|
|
|
// Offerings that are selected and have URL config
|
|
const selectedWithUrls = (data.offerings || []).filter(o => o in OFFERING_URL_CONFIG)
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-4">
|
|
Geschäftsmodell <span className="text-red-500">*</span>
|
|
</label>
|
|
<div className="grid grid-cols-4 gap-4">
|
|
{Object.entries(BUSINESS_MODEL_LABELS).map(([value, { short }]) => (
|
|
<button
|
|
key={value}
|
|
type="button"
|
|
onClick={() => onChange({ businessModel: value as BusinessModel })}
|
|
className={`p-4 rounded-xl border-2 text-center transition-all ${
|
|
data.businessModel === value
|
|
? 'border-purple-500 bg-purple-50 text-purple-700'
|
|
: 'border-gray-200 hover:border-purple-300'
|
|
}`}
|
|
>
|
|
<div className="font-semibold">{short}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
{data.businessModel && (
|
|
<p className="text-sm text-gray-500 mt-2">
|
|
{BUSINESS_MODEL_LABELS[data.businessModel].description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-4">
|
|
Was bieten Sie an? <span className="text-gray-400">(Mehrfachauswahl möglich)</span>
|
|
</label>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{Object.entries(OFFERING_TYPE_LABELS).map(([value, { label, description }]) => (
|
|
<button
|
|
key={value}
|
|
type="button"
|
|
onClick={() => toggleOffering(value as OfferingType)}
|
|
className={`p-4 rounded-xl border-2 text-left transition-all ${
|
|
(data.offerings || []).includes(value as OfferingType)
|
|
? 'border-purple-500 bg-purple-50'
|
|
: 'border-gray-200 hover:border-purple-300'
|
|
}`}
|
|
>
|
|
<div className="font-medium text-gray-900">{label}</div>
|
|
<div className="text-sm text-gray-500">{description}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Hint when both webshop and SaaS are selected */}
|
|
{(data.offerings || []).includes('webshop') && (data.offerings || []).includes('software_saas') && (
|
|
<div className="mt-3 flex items-start gap-2 p-3 bg-amber-50 border border-amber-200 rounded-lg">
|
|
<svg className="w-5 h-5 text-amber-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<p className="text-sm text-amber-800">
|
|
<strong>Hinweis:</strong> Wenn Sie reine Software verkaufen, genuegt <em>SaaS/Cloud</em> — <em>Online-Shop</em> ist nur fuer physische Produkte oder Hardware mit Abo-Modell gedacht.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* URL fields for selected offerings */}
|
|
{selectedWithUrls.length > 0 && (
|
|
<div className="space-y-4">
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
Zugehörige URLs
|
|
</label>
|
|
{selectedWithUrls.map(offering => {
|
|
const config = OFFERING_URL_CONFIG[offering]!
|
|
return (
|
|
<div key={offering}>
|
|
<label className="block text-sm text-gray-600 mb-1">{config.label}</label>
|
|
<input
|
|
type="url"
|
|
value={(data.offeringUrls || {})[offering] || ''}
|
|
onChange={e => updateOfferingUrl(offering, e.target.value)}
|
|
placeholder={config.placeholder}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
<p className="text-xs text-gray-400 mt-1">{config.hint}</p>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function StepCompanySize({
|
|
data,
|
|
onChange,
|
|
}: {
|
|
data: Partial<CompanyProfile>
|
|
onChange: (updates: Partial<CompanyProfile>) => void
|
|
}) {
|
|
return (
|
|
<div className="space-y-8">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-4">
|
|
Unternehmensgröße <span className="text-red-500">*</span>
|
|
</label>
|
|
<div className="space-y-3">
|
|
{Object.entries(COMPANY_SIZE_LABELS).map(([value, label]) => (
|
|
<button
|
|
key={value}
|
|
type="button"
|
|
onClick={() => onChange({ companySize: value as CompanySize })}
|
|
className={`w-full p-4 rounded-xl border-2 text-left transition-all ${
|
|
data.companySize === value
|
|
? 'border-purple-500 bg-purple-50'
|
|
: 'border-gray-200 hover:border-purple-300'
|
|
}`}
|
|
>
|
|
<div className="font-medium text-gray-900">{label}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-3">Jahresumsatz</label>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{[
|
|
{ value: '< 2 Mio', label: '< 2 Mio. Euro' },
|
|
{ value: '2-10 Mio', label: '2-10 Mio. Euro' },
|
|
{ value: '10-50 Mio', label: '10-50 Mio. Euro' },
|
|
{ value: '> 50 Mio', label: '> 50 Mio. Euro' },
|
|
].map(opt => (
|
|
<button
|
|
key={opt.value}
|
|
type="button"
|
|
onClick={() => onChange({ annualRevenue: opt.value })}
|
|
className={`p-4 rounded-xl border-2 text-left transition-all ${
|
|
data.annualRevenue === opt.value
|
|
? 'border-purple-500 bg-purple-50 text-purple-700 font-medium'
|
|
: 'border-gray-200 hover:border-purple-300 text-gray-700'
|
|
}`}
|
|
>
|
|
{opt.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
{(data.companySize === 'medium' || data.companySize === 'large' || data.companySize === 'enterprise') && (
|
|
<p className="text-xs text-amber-600 mt-2">
|
|
Geben Sie den konsolidierten Konzernumsatz an, wenn der Compliance-Check für Mutter- und Tochtergesellschaften gelten soll.
|
|
Für eine einzelne Einheit eines Konzerns geben Sie nur deren Umsatz an.
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function StepLocations({
|
|
data,
|
|
onChange,
|
|
}: {
|
|
data: Partial<CompanyProfile>
|
|
onChange: (updates: Partial<CompanyProfile>) => void
|
|
}) {
|
|
const toggleMarket = (market: TargetMarket) => {
|
|
const current = data.targetMarkets || []
|
|
if (current.includes(market)) {
|
|
onChange({ targetMarkets: current.filter(m => m !== market) })
|
|
} else {
|
|
onChange({ targetMarkets: [...current, market] })
|
|
}
|
|
}
|
|
|
|
const STATES_BY_COUNTRY: Record<string, { label: string; options: string[] }> = {
|
|
DE: {
|
|
label: 'Bundesland',
|
|
options: [
|
|
'Baden-Württemberg', 'Bayern', 'Berlin', 'Brandenburg', 'Bremen',
|
|
'Hamburg', 'Hessen', 'Mecklenburg-Vorpommern', 'Niedersachsen',
|
|
'Nordrhein-Westfalen', 'Rheinland-Pfalz', 'Saarland', 'Sachsen',
|
|
'Sachsen-Anhalt', 'Schleswig-Holstein', 'Thüringen',
|
|
],
|
|
},
|
|
AT: {
|
|
label: 'Bundesland',
|
|
options: [
|
|
'Burgenland', 'Kärnten', 'Niederösterreich', 'Oberösterreich',
|
|
'Salzburg', 'Steiermark', 'Tirol', 'Vorarlberg', 'Wien',
|
|
],
|
|
},
|
|
CH: {
|
|
label: 'Kanton',
|
|
options: [
|
|
'Aargau', 'Appenzell Ausserrhoden', 'Appenzell Innerrhoden',
|
|
'Basel-Landschaft', 'Basel-Stadt', 'Bern', 'Freiburg', 'Genf',
|
|
'Glarus', 'Graubünden', 'Jura', 'Luzern', 'Neuenburg', 'Nidwalden',
|
|
'Obwalden', 'Schaffhausen', 'Schwyz', 'Solothurn', 'St. Gallen',
|
|
'Tessin', 'Thurgau', 'Uri', 'Waadt', 'Wallis', 'Zug', 'Zürich',
|
|
],
|
|
},
|
|
}
|
|
|
|
const countryStates = data.headquartersCountry ? STATES_BY_COUNTRY[data.headquartersCountry] : null
|
|
const stateLabel = countryStates?.label || 'Region / Provinz'
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
{/* Country */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Land des Hauptsitzes <span className="text-red-500">*</span>
|
|
</label>
|
|
<select
|
|
value={data.headquartersCountry || ''}
|
|
onChange={e => onChange({ headquartersCountry: e.target.value, headquartersCountryOther: '' })}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
>
|
|
<option value="">Bitte wählen...</option>
|
|
<option value="DE">Deutschland</option>
|
|
<option value="AT">Österreich</option>
|
|
<option value="CH">Schweiz</option>
|
|
<option value="LI">Liechtenstein</option>
|
|
<option value="LU">Luxemburg</option>
|
|
<option value="NL">Niederlande</option>
|
|
<option value="FR">Frankreich</option>
|
|
<option value="IT">Italien</option>
|
|
<option value="other">Anderes Land</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Other country free text */}
|
|
{data.headquartersCountry === 'other' && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">Land (Freitext)</label>
|
|
<input
|
|
type="text"
|
|
value={data.headquartersCountryOther || ''}
|
|
onChange={e => onChange({ headquartersCountryOther: e.target.value })}
|
|
placeholder="z.B. Vereinigtes Königreich"
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Street + House Number */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">Straße und Hausnummer</label>
|
|
<input
|
|
type="text"
|
|
value={data.headquartersStreet || ''}
|
|
onChange={e => onChange({ headquartersStreet: e.target.value })}
|
|
placeholder="Musterstraße 42"
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
|
|
{/* PLZ + City */}
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">PLZ</label>
|
|
<input
|
|
type="text"
|
|
value={data.headquartersZip || ''}
|
|
onChange={e => onChange({ headquartersZip: e.target.value })}
|
|
placeholder="10115"
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">Stadt</label>
|
|
<input
|
|
type="text"
|
|
value={data.headquartersCity || ''}
|
|
onChange={e => onChange({ headquartersCity: e.target.value })}
|
|
placeholder="Berlin"
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* State / Bundesland / Kanton */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">{stateLabel}</label>
|
|
{countryStates ? (
|
|
<select
|
|
value={data.headquartersState || ''}
|
|
onChange={e => onChange({ headquartersState: e.target.value })}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
>
|
|
<option value="">Bitte wählen...</option>
|
|
{countryStates.options.map(s => (
|
|
<option key={s} value={s}>{s}</option>
|
|
))}
|
|
</select>
|
|
) : (
|
|
<input
|
|
type="text"
|
|
value={data.headquartersState || ''}
|
|
onChange={e => onChange({ headquartersState: e.target.value })}
|
|
placeholder="Region / Provinz"
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-4">
|
|
Zielmärkte <span className="text-red-500">*</span>
|
|
<span className="text-gray-400 font-normal ml-2">Wo verkaufen/operieren Sie?</span>
|
|
</label>
|
|
<div className="space-y-3">
|
|
{Object.entries(TARGET_MARKET_LABELS).map(([value, { label, description }]) => (
|
|
<button
|
|
key={value}
|
|
type="button"
|
|
onClick={() => toggleMarket(value as TargetMarket)}
|
|
className={`w-full p-4 rounded-xl border-2 text-left transition-all ${
|
|
(data.targetMarkets || []).includes(value as TargetMarket)
|
|
? 'border-purple-500 bg-purple-50'
|
|
: 'border-gray-200 hover:border-purple-300'
|
|
}`}
|
|
>
|
|
<div className="font-medium text-gray-900">{label}</div>
|
|
<div className="text-sm text-gray-500">{description}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function StepDataProtection({
|
|
data,
|
|
onChange,
|
|
}: {
|
|
data: Partial<CompanyProfile>
|
|
onChange: (updates: Partial<CompanyProfile>) => void
|
|
}) {
|
|
return (
|
|
<div className="space-y-8">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-4">
|
|
Datenschutz-Rolle nach DSGVO
|
|
</label>
|
|
<div className="space-y-3">
|
|
<label className="flex items-start gap-4 p-4 rounded-xl border-2 border-gray-200 hover:border-purple-300 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={data.isDataController ?? true}
|
|
onChange={e => onChange({ isDataController: e.target.checked })}
|
|
className="mt-1 w-5 h-5 text-purple-600 rounded focus:ring-purple-500"
|
|
/>
|
|
<div>
|
|
<div className="font-medium text-gray-900">Verantwortlicher (Art. 4 Nr. 7 DSGVO)</div>
|
|
<div className="text-sm text-gray-500">
|
|
Wir entscheiden selbst über Zwecke und Mittel der Datenverarbeitung
|
|
</div>
|
|
</div>
|
|
</label>
|
|
|
|
<label className="flex items-start gap-4 p-4 rounded-xl border-2 border-gray-200 hover:border-purple-300 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={data.isDataProcessor ?? false}
|
|
onChange={e => onChange({ isDataProcessor: e.target.checked })}
|
|
className="mt-1 w-5 h-5 text-purple-600 rounded focus:ring-purple-500"
|
|
/>
|
|
<div>
|
|
<div className="font-medium text-gray-900">Auftragsverarbeiter (Art. 4 Nr. 8 DSGVO)</div>
|
|
<div className="text-sm text-gray-500">
|
|
Wir verarbeiten personenbezogene Daten im Auftrag anderer Unternehmen
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Datenschutzbeauftragter (Name)
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={data.dpoName || ''}
|
|
onChange={e => onChange({ dpoName: e.target.value || null })}
|
|
placeholder="Optional"
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">DSB E-Mail</label>
|
|
<input
|
|
type="email"
|
|
value={data.dpoEmail || ''}
|
|
onChange={e => onChange({ dpoEmail: e.target.value || null })}
|
|
placeholder="dsb@firma.de"
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// STEP 6: RECHTLICHER RAHMEN (was Step 8)
|
|
// =============================================================================
|
|
|
|
// NOTE: Verarbeitungstaetigkeiten (former Step 6) and KI-Systeme (former Step 7)
|
|
// have been moved to Compliance Scope (Blocks 7 and 8).
|
|
|
|
// DSGVO-Standard Datenkategorien — kept as shared reference for scope
|
|
const ALL_DATA_CATEGORIES = [
|
|
{ id: 'stammdaten', label: 'Stammdaten', desc: 'Name, Geburtsdatum, Geschlecht', info: 'Vor- und Nachname, Geburtsdatum, Geschlecht, Anrede, Titel, Familienstand, Staatsangehörigkeit, Personalnummer, Kundennummer' },
|
|
{ id: 'kontaktdaten', label: 'Kontaktdaten', desc: 'E-Mail, Telefon, Adresse', info: 'E-Mail-Adresse, Telefonnummer, Mobilnummer, Postanschrift, Faxnummer, Messenger-IDs der betroffenen Personen' },
|
|
{ id: 'vertragsdaten', label: 'Vertragsdaten', desc: 'Vertragsnummer, Laufzeit, Konditionen', info: 'Vertragsnummer, Vertragsbeginn/-ende, Laufzeit, Konditionen, Kündigungsfristen, Vertragsgegenstand, Bestellhistorie' },
|
|
{ id: 'zahlungsdaten', label: 'Zahlungs-/Bankdaten', desc: 'IBAN, Kreditkarte, Rechnungen', info: 'IBAN, BIC, Kontoinhaber, Kreditkartennummer, Rechnungsbeträge, Zahlungshistorie, Steuer-ID, USt-IdNr.' },
|
|
{ id: 'beschaeftigtendaten', label: 'Beschäftigtendaten', desc: 'Gehalt, Arbeitszeiten, Urlaub', info: 'Gehalt/Lohn, Steuerklasse, SV-Nummer, Krankenkasse (z.B. AOK, TK), Arbeitszeiten, Urlaubstage, Abwesenheiten, Beurteilungen, Eintrittsdatum. Aufbewahrung: i.d.R. 3 Jahre nach Austritt (§ 195 BGB), Lohndaten 8 Jahre (§ 147 AO)' },
|
|
{ id: 'kommunikation', label: 'Kommunikationsdaten', desc: 'E-Mail-Inhalte, Chat-Verläufe', info: 'E-Mail-Inhalte und -Metadaten, Chat-Nachrichten, Gesprächsprotokolle, Support-Tickets, Briefkorrespondenz' },
|
|
{ id: 'nutzungsdaten', label: 'Nutzungs-/Logdaten', desc: 'IP-Adressen, Login-Zeiten, Klicks', info: 'IP-Adressen, Login-Zeitpunkte, Seitenaufrufe, Klickverhalten, Geräteinformationen, Browser-Typ, Session-Dauer' },
|
|
{ id: 'standortdaten', label: 'Standortdaten', desc: 'GPS, Check-in, Lieferadressen', info: 'GPS-Koordinaten, Check-in/Check-out-Zeiten, Lieferadressen, Reiserouten, WLAN-Standortbestimmung' },
|
|
{ id: 'bilddaten', label: 'Bild-/Videodaten', desc: 'Fotos, Videoaufnahmen, Profilbilder', info: 'Profilfotos, Ausweiskopien, Videoaufnahmen (Überwachung), Bewerbungsfotos, Schulungsvideos' },
|
|
{ id: 'bewerberdaten', label: 'Bewerberdaten', desc: 'Lebenslauf, Zeugnisse, Anschreiben', info: 'Lebenslauf, Anschreiben, Zeugnisse, Referenzen, Gehaltsvorstellungen, Verfügbarkeit, Bewerbungsquelle. Löschfrist bei Absage: max. 6 Monate (AGG §§ 15, 21)' },
|
|
{ id: 'qualifikationsdaten', label: 'Qualifikations-/Schulungsdaten', desc: 'Fortbildungen, Zertifikate, Abschlüsse', info: 'Besuchte Seminare und Schulungen, Zertifikate, Abschlüsse, Qualifikationsnachweise, Schulungsdaten und -ergebnisse, Weiterbildungshistorie' },
|
|
] as const
|
|
|
|
const ALL_SPECIAL_CATEGORIES = [
|
|
{ id: 'gesundheit', label: 'Gesundheitsdaten', desc: 'Krankheitstage, Atteste, Diagnosen', info: 'Krankheitstage, AU-Bescheinigungen, Diagnosen, Behinderungsgrad (GdB), BEM-Daten, arbeitsmedizinische Untersuchungen, Impfstatus, Allergien. Auch AU ohne Diagnose = Gesundheitsdatum (LDI NRW). Schwangerschaft, Allergien, Online-Arzneimittelbestellung (EuGH C-21/23). NICHT: Krankenkassenname (z.B. AOK, TK) — das sind normale Beschäftigtendaten.' },
|
|
{ id: 'biometrie', label: 'Biometrische Daten', desc: 'Fingerabdruck, Gesichtserkennung', info: 'Fingerabdruck, Gesichtserkennung, Iris-Scan, Stimmerkennung, Handvenenscan. Nur wenn zur eindeutigen Identifizierung verwendet (ErwGr. 51). Einfaches Passfoto = kein biometrisches Datum.' },
|
|
{ id: 'religion', label: 'Religion', desc: 'Konfession, Kirchensteuer', info: 'Konfession/Religionszugehörigkeit (relevant für Kirchensteuer auf Lohnabrechnung). Auch indirekt: Kantinenbestellung halal/koscher (EuGH C-184/20 weite Auslegung). Praktisch jedes Unternehmen mit Beschäftigten verarbeitet diese Daten über die Gehaltsabrechnung.' },
|
|
{ id: 'gewerkschaft', label: 'Gewerkschaftszugehörigkeit', desc: 'Mitgliedschaft', info: 'Gewerkschaftsmitgliedschaft, Betriebsratszugehörigkeit, Tarifzugehörigkeit' },
|
|
{ id: 'genetik', label: 'Genetische Daten', desc: 'DNA, Erbkrankheiten', info: 'DNA-Analysen, genetische Prädispositionen, Erbkrankheitsrisiken (nur in Spezialfällen relevant)' },
|
|
] as const
|
|
|
|
// Verarbeitungstätigkeiten mit aktivitätsspezifischen Datenkategorien
|
|
// Hinweis: Rechtsgrundlage (legal_basis) wird hier im Profil nicht angezeigt —
|
|
// die juristische Zuordnung erfolgt im VVT-Schritt (Art. 30 DSGVO).
|
|
interface ActivityTemplate {
|
|
id: string
|
|
name: string
|
|
purpose: string
|
|
primary_categories: string[] // Sichtbar + vorausgewählt
|
|
art9_relevant: string[] // Art. 9 Kategorien die plausibel relevant sind
|
|
default_legal_basis: string
|
|
legalHint?: string // Gesetzlicher Hinweis (z.B. ArbZG-Pflicht)
|
|
hasServiceProvider?: boolean // Kann ein externer Dienstleister eingesetzt werden?
|
|
categoryInfo?: Record<string, string> // Override Info-Text pro Datenkategorie (kontextspezifisch)
|
|
}
|
|
|
|
interface ActivityDepartment {
|
|
id: string
|
|
name: string
|
|
icon: string
|
|
activities: ActivityTemplate[]
|
|
}
|
|
|
|
// ── Universelle Abteilungen (immer sichtbar) ──
|
|
|
|
const UNIVERSAL_DEPARTMENTS: ActivityDepartment[] = [
|
|
{
|
|
id: 'personal', name: 'Personal / HR', icon: '👥',
|
|
activities: [
|
|
{ id: 'personalverwaltung', name: 'Personalverwaltung', purpose: 'Verwaltung von Beschäftigtendaten für das Arbeitsverhältnis', primary_categories: ['stammdaten', 'kontaktdaten', 'beschaeftigtendaten', 'zahlungsdaten'], art9_relevant: ['gesundheit', 'religion', 'gewerkschaft'], default_legal_basis: 'contract', categoryInfo: { stammdaten: 'Vor-/Nachname, Geburtsdatum, Geschlecht, Familienstand, Staatsangehörigkeit, Personalnummer', kontaktdaten: 'Privat- und Dienstadresse, Telefonnummern, dienstliche E-Mail, Notfallkontakt', beschaeftigtendaten: 'Steuerklasse, SV-Nummer, Krankenkasse (z.B. AOK, TK — kein Gesundheitsdatum!), Eintrittsdatum, Arbeitszeit, Urlaubstage. Aufbewahrung: 3 Jahre nach Austritt (§ 195 BGB)', zahlungsdaten: 'IBAN für Gehaltsauszahlung, Vermögenswirksame Leistungen, Pfändungsdaten' } },
|
|
{ id: 'lohnbuchhaltung', name: 'Lohn- und Gehaltsabrechnung', purpose: 'Berechnung und Auszahlung von Löhnen und Gehältern', primary_categories: ['beschaeftigtendaten', 'zahlungsdaten', 'stammdaten'], art9_relevant: [], default_legal_basis: 'legal', hasServiceProvider: true, categoryInfo: { beschaeftigtendaten: 'Gehalt, Zulagen, Prämien, Steuerklasse, SV-Nummer, Krankenkasse, Kirchensteuermerkmal. Aufbewahrung: Lohnabrechnungen 8 Jahre (§ 147 AO), Lohnsteuer 6 Jahre (§ 41 EStG). Hinweis: Gesundheits- und Religionsdaten werden bereits unter Personalverwaltung als Art. 9-Kategorien erfasst.', zahlungsdaten: 'IBAN, Bankverbindung, Gehaltsabrechnungen, Pfändungsbeträge. Aufbewahrung: 8 Jahre (§ 147 AO)' } },
|
|
{ id: 'bewerbermanagement', name: 'Bewerbermanagement', purpose: 'Entgegennahme, Prüfung und Bearbeitung von Bewerbungen', primary_categories: ['bewerberdaten', 'stammdaten', 'kontaktdaten', 'kommunikation', 'qualifikationsdaten'], art9_relevant: ['gesundheit', 'religion'], default_legal_basis: 'consent', categoryInfo: { bewerberdaten: 'Lebenslauf, Anschreiben, Zeugnisse, Referenzen, Gehaltsvorstellungen. Löschfrist bei Absage: max. 6 Monate (AGG §§ 15, 21)', kontaktdaten: 'Privatadresse, E-Mail, Telefonnummer des Bewerbers', kommunikation: 'Bewerbungskorrespondenz, Einladungen, Absageschreiben' } },
|
|
{ id: 'arbeitszeiterfassung', name: 'Arbeitszeiterfassung', purpose: 'Erfassung und Dokumentation der Arbeitszeiten', primary_categories: ['beschaeftigtendaten'], art9_relevant: [], default_legal_basis: 'legal', legalHint: 'Gesetzlich vorgeschrieben (§ 3 ArbZG). Fehlende Arbeitszeiterfassung ist ein Compliance-Risiko.', categoryInfo: { beschaeftigtendaten: 'Beginn/Ende der Arbeitszeit, Pausen, Überstunden, Ruhezeiten. Aufbewahrung: mind. 2 Jahre (§ 16 Abs. 2 ArbZG). Nicht für Leistungskontrolle verwenden!' } },
|
|
{ id: 'weiterbildung', name: 'Fort- und Weiterbildung', purpose: 'Verwaltung von Schulungen und Weiterbildungsmaßnahmen', primary_categories: ['qualifikationsdaten', 'beschaeftigtendaten', 'stammdaten'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
],
|
|
},
|
|
{
|
|
id: 'finanzen', name: 'Finanzen / Buchhaltung', icon: '💰',
|
|
activities: [
|
|
{ id: 'finanzbuchhaltung', name: 'Finanzbuchhaltung', purpose: 'Buchführung, Rechnungsstellung, steuerliche Dokumentation', primary_categories: ['stammdaten', 'zahlungsdaten', 'vertragsdaten', 'kontaktdaten'], art9_relevant: [], default_legal_basis: 'legal', categoryInfo: { zahlungsdaten: 'Rechnungsbeträge, IBAN, Buchungsbelege, USt-IdNr. Aufbewahrung: 8 Jahre (§ 147 AO)', vertragsdaten: 'Vertragsnummer, Konditionen, Bestellhistorie. Aufbewahrung: Handelskorrespondenz 6 Jahre (§ 257 HGB)', kontaktdaten: 'Rechnungsadresse, Ansprechpartner in der Debitorenbuchhaltung' } },
|
|
{ id: 'zahlungsverkehr', name: 'Zahlungsverkehr', purpose: 'Abwicklung von ein- und ausgehenden Zahlungen', primary_categories: ['zahlungsdaten', 'stammdaten', 'kontaktdaten', 'vertragsdaten'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
{ id: 'mahnwesen', name: 'Mahnwesen / Inkasso', purpose: 'Überwachung offener Forderungen und Mahnverfahren', primary_categories: ['stammdaten', 'kontaktdaten', 'zahlungsdaten', 'vertragsdaten'], art9_relevant: [], default_legal_basis: 'interest' },
|
|
{ id: 'reisekostenabrechnung', name: 'Reisekostenabrechnung', purpose: 'Abrechnung und Erstattung von Dienstreisekosten', primary_categories: ['beschaeftigtendaten', 'zahlungsdaten', 'standortdaten'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
],
|
|
},
|
|
{
|
|
id: 'vertrieb', name: 'Vertrieb / Sales', icon: '📈',
|
|
activities: [
|
|
{ id: 'crm', name: 'CRM / Kundenverwaltung', purpose: 'Verwaltung von Kundenbeziehungen, Kontakthistorie, Verkaufschancen', primary_categories: ['stammdaten', 'kontaktdaten', 'kommunikation', 'vertragsdaten'], art9_relevant: [], default_legal_basis: 'contract', categoryInfo: { stammdaten: 'Firmenname, Ansprechpartner-Name, Titel, Position, Kundennummer', kontaktdaten: 'Geschäftliche E-Mail, Telefon, Büroadresse des Ansprechpartners. B2B-Kontaktdaten sind personenbezogene Daten — Art. 13 DSGVO Informationspflicht gilt!', kommunikation: 'E-Mail-Korrespondenz, Gesprächsnotizen, Support-Tickets, Meeting-Protokolle' } },
|
|
{ id: 'angebotserstellung', name: 'Angebotserstellung', purpose: 'Erstellung und Nachverfolgung von Angeboten', primary_categories: ['stammdaten', 'kontaktdaten', 'vertragsdaten'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
{ id: 'vertragsmanagement', name: 'Vertragsmanagement', purpose: 'Verwaltung, Archivierung und Nachverfolgung von Verträgen', primary_categories: ['vertragsdaten', 'stammdaten', 'kontaktdaten'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
],
|
|
},
|
|
{
|
|
id: 'marketing', name: 'Marketing', icon: '📣',
|
|
activities: [
|
|
{ id: 'newsletter', name: 'Newsletter / E-Mail-Marketing', purpose: 'Versand von Newslettern und E-Mail-Marketing an Abonnenten', primary_categories: ['kontaktdaten', 'nutzungsdaten', 'stammdaten'], art9_relevant: [], default_legal_basis: 'consent' },
|
|
{ id: 'website_tracking', name: 'Website-Tracking / Analytics', purpose: 'Analyse des Nutzerverhaltens auf der Website mittels Tracking-Tools', primary_categories: ['nutzungsdaten', 'standortdaten'], art9_relevant: [], default_legal_basis: 'consent' },
|
|
{ id: 'social_media', name: 'Social-Media-Marketing', purpose: 'Betrieb von Unternehmensprofilen und Werbekampagnen', primary_categories: ['kontaktdaten', 'nutzungsdaten', 'kommunikation'], art9_relevant: [], default_legal_basis: 'consent' },
|
|
{ id: 'consent_management', name: 'Consent-Management (Cookies)', purpose: 'Verwaltung der Einwilligungen für Cookies und Tracking', primary_categories: ['nutzungsdaten'], art9_relevant: [], default_legal_basis: 'consent' },
|
|
],
|
|
},
|
|
{
|
|
id: 'it', name: 'IT / Administration', icon: '🖥️',
|
|
activities: [
|
|
{ id: 'zugangsverwaltung', name: 'Zugangsverwaltung (IAM)', purpose: 'Verwaltung von Benutzerkonten, Passwörtern und Zugriffsrechten', primary_categories: ['beschaeftigtendaten', 'stammdaten', 'nutzungsdaten'], art9_relevant: ['biometrie'], default_legal_basis: 'contract' },
|
|
{ id: 'email_kommunikation', name: 'E-Mail-Kommunikation', purpose: 'Geschäftliche E-Mail-Korrespondenz', primary_categories: ['kontaktdaten', 'kommunikation', 'stammdaten'], art9_relevant: [], default_legal_basis: 'interest' },
|
|
{ id: 'datensicherung', name: 'Datensicherung / Backup', purpose: 'Sicherung von Unternehmensdaten zum Schutz vor Datenverlust', primary_categories: ['nutzungsdaten', 'beschaeftigtendaten'], art9_relevant: [], default_legal_basis: 'interest' },
|
|
{ id: 'website_betrieb', name: 'Website-Betrieb', purpose: 'Bereitstellung der Unternehmenswebsite und Kontaktformulare', primary_categories: ['nutzungsdaten', 'kontaktdaten', 'stammdaten'], art9_relevant: [], default_legal_basis: 'interest', hasServiceProvider: true, legalHint: 'Bei externem Website-Management: AVV nach Art. 28 DSGVO mit dem Dienstleister erforderlich. Cookies, Analytics und Kontaktformulare verarbeiten personenbezogene Daten — auch wenn der Dienstleister sie technisch betreibt, bleibt Ihr Unternehmen verantwortlich.' },
|
|
{ id: 'it_sicherheit', name: 'IT-Sicherheit / Logging', purpose: 'Überwachung der IT-Sicherheit, Log-Analyse, Vorfallbehandlung', primary_categories: ['nutzungsdaten', 'beschaeftigtendaten'], art9_relevant: [], default_legal_basis: 'interest' },
|
|
],
|
|
},
|
|
{
|
|
id: 'recht', name: 'Recht / Compliance', icon: '⚖️',
|
|
activities: [
|
|
{ id: 'datenschutzanfragen', name: 'Betroffenenrechte (DSGVO)', purpose: 'Bearbeitung von Auskunfts-, Lösch- und Berichtigungsanfragen', primary_categories: ['stammdaten', 'kontaktdaten', 'kommunikation'], art9_relevant: [], default_legal_basis: 'legal' },
|
|
{ id: 'auftragsverarbeitung', name: 'Auftragsverarbeitung (AVV)', purpose: 'Dokumentation und Verwaltung von Auftragsverarbeitungsverhältnissen', primary_categories: ['stammdaten', 'kontaktdaten', 'vertragsdaten'], art9_relevant: [], default_legal_basis: 'legal' },
|
|
{ id: 'whistleblowing', name: 'Hinweisgebersystem', purpose: 'Entgegennahme und Bearbeitung von Meldungen nach HinSchG', primary_categories: ['stammdaten', 'kontaktdaten', 'kommunikation'], art9_relevant: [], default_legal_basis: 'legal', categoryInfo: { stammdaten: 'Identität des Hinweisgebers (besonders schützenswert! § 8 HinSchG Vertraulichkeitsgebot)', kontaktdaten: 'Kontaktdaten nur für zuständige Meldestelle zugänglich', kommunikation: 'Meldungsinhalt, Kommunikationsverlauf, Zeugenaussagen. Löschfrist: 3 Jahre nach Abschluss (§ 11 Abs. 5 HinSchG)' } },
|
|
],
|
|
},
|
|
]
|
|
|
|
// ── Abteilungen die je nach Kontext relevant sind ──
|
|
|
|
const OPTIONAL_DEPARTMENTS: ActivityDepartment[] = [
|
|
{
|
|
id: 'einkauf', name: 'Einkauf / Beschaffung', icon: '🛒',
|
|
activities: [
|
|
{ id: 'lieferantenverwaltung', name: 'Lieferantenverwaltung', purpose: 'Erfassung und Pflege von Lieferantenstammdaten', primary_categories: ['stammdaten', 'kontaktdaten', 'vertragsdaten', 'zahlungsdaten'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
{ id: 'bestellwesen', name: 'Bestellwesen', purpose: 'Abwicklung von Bestellungen bei Lieferanten', primary_categories: ['stammdaten', 'vertragsdaten', 'zahlungsdaten'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
{ id: 'lieferantenbewertung', name: 'Lieferantenbewertung', purpose: 'Bewertung und Qualifizierung von Lieferanten', primary_categories: ['stammdaten', 'kontaktdaten'], art9_relevant: [], default_legal_basis: 'interest' },
|
|
],
|
|
},
|
|
{
|
|
id: 'produktion', name: 'Produktion / Fertigung', icon: '🏭',
|
|
activities: [
|
|
{ id: 'produktionsplanung', name: 'Produktionsplanung', purpose: 'Planung und Steuerung von Produktionsprozessen inkl. Personalzuordnung', primary_categories: ['beschaeftigtendaten', 'stammdaten'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
{ id: 'qualitaetskontrolle', name: 'Qualitätskontrolle', purpose: 'Prüfung und Dokumentation der Produktqualität', primary_categories: ['beschaeftigtendaten', 'stammdaten'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
{ id: 'arbeitssicherheit', name: 'Arbeitssicherheit / Arbeitsschutz', purpose: 'Dokumentation von Arbeitsschutzmaßnahmen, Unfällen, Gefährdungsbeurteilungen', primary_categories: ['beschaeftigtendaten'], art9_relevant: ['gesundheit'], default_legal_basis: 'legal' },
|
|
{ id: 'schichtplanung', name: 'Schichtplanung', purpose: 'Erstellung und Verwaltung von Schichtplänen', primary_categories: ['beschaeftigtendaten'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
],
|
|
},
|
|
{
|
|
id: 'logistik', name: 'Logistik / Versand', icon: '🚚',
|
|
activities: [
|
|
{ id: 'versandabwicklung', name: 'Versandabwicklung', purpose: 'Verarbeitung von Empfänger- und Versanddaten für den Warenversand', primary_categories: ['stammdaten', 'kontaktdaten', 'standortdaten'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
{ id: 'lieferverfolgung', name: 'Lieferverfolgung / Sendungstracking', purpose: 'Nachverfolgung von Sendungen und Zustellung', primary_categories: ['stammdaten', 'kontaktdaten', 'standortdaten'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
{ id: 'lagerverwaltung', name: 'Lagerverwaltung', purpose: 'Verwaltung von Lagerbeständen und Warenbewegungen', primary_categories: ['stammdaten', 'beschaeftigtendaten'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
{ id: 'retouren', name: 'Retourenmanagement', purpose: 'Bearbeitung von Warenrücksendungen', primary_categories: ['stammdaten', 'kontaktdaten', 'vertragsdaten'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
],
|
|
},
|
|
{
|
|
id: 'kundenservice', name: 'Kundenservice / Support', icon: '🎧',
|
|
activities: [
|
|
{ id: 'ticketsystem', name: 'Ticketsystem / Support', purpose: 'Erfassung und Bearbeitung von Kundenanfragen und Supportfällen', primary_categories: ['stammdaten', 'kontaktdaten', 'kommunikation'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
{ id: 'beschwerdemanagement', name: 'Beschwerdemanagement', purpose: 'Bearbeitung und Dokumentation von Kundenbeschwerden', primary_categories: ['stammdaten', 'kontaktdaten', 'kommunikation'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
],
|
|
},
|
|
{
|
|
id: 'facility', name: 'Facility Management', icon: '🏢',
|
|
activities: [
|
|
{ id: 'zutrittskontrolle', name: 'Zutrittskontrolle', purpose: 'Kontrolle und Protokollierung des Zutritts zu Gebäuden und Räumen', primary_categories: ['beschaeftigtendaten', 'stammdaten', 'bilddaten'], art9_relevant: ['biometrie'], default_legal_basis: 'interest' },
|
|
{ id: 'videoueberwachung', name: 'Videoüberwachung', purpose: 'Überwachung von Gebäuden und Geländen mittels Videokameras', primary_categories: ['bilddaten', 'beschaeftigtendaten'], art9_relevant: ['biometrie'], default_legal_basis: 'interest', categoryInfo: { bilddaten: 'Videoaufzeichnungen von Kameras. Speicherdauer: empfohlen max. 72h (BeschDG-Entwurf). Datenschutzhinweis-Schilder (Art. 13 DSGVO) sind Pflicht. Betriebsrat hat Mitbestimmungsrecht (§ 87 Abs. 1 Nr. 6 BetrVG)' } },
|
|
{ id: 'besuchermanagement', name: 'Besuchermanagement', purpose: 'Erfassung und Verwaltung von Besucherdaten', primary_categories: ['stammdaten', 'kontaktdaten'], art9_relevant: [], default_legal_basis: 'interest' },
|
|
],
|
|
},
|
|
]
|
|
|
|
// ── Branchenspezifische Abteilungen ──
|
|
|
|
const INDUSTRY_DEPARTMENTS: Record<string, ActivityDepartment[]> = {
|
|
'E-Commerce / Handel': [{
|
|
id: 'ecommerce', name: 'E-Commerce / Webshop', icon: '🛍️',
|
|
activities: [
|
|
{ id: 'bestellabwicklung', name: 'Bestellabwicklung (Webshop)', purpose: 'Verarbeitung von Kundenbestellungen im Online-Shop', primary_categories: ['stammdaten', 'kontaktdaten', 'zahlungsdaten', 'vertragsdaten'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
{ id: 'kundenkonto', name: 'Kundenkonto-Verwaltung', purpose: 'Verwaltung registrierter Kundenkonten im Online-Shop', primary_categories: ['stammdaten', 'kontaktdaten', 'nutzungsdaten', 'zahlungsdaten'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
{ id: 'webshop_analyse', name: 'Webshop-Analyse / Conversion', purpose: 'Analyse des Kaufverhaltens und Conversion-Rates', primary_categories: ['nutzungsdaten', 'standortdaten'], art9_relevant: [], default_legal_basis: 'consent' },
|
|
{ id: 'produktbewertungen', name: 'Produktbewertungen / Reviews', purpose: 'Verwaltung von Kundenrezensionen und Produktbewertungen', primary_categories: ['stammdaten', 'kontaktdaten', 'kommunikation'], art9_relevant: [], default_legal_basis: 'consent' },
|
|
],
|
|
}],
|
|
'Gesundheitswesen': [{
|
|
id: 'gesundheit_dept', name: 'Medizin / Patientenversorgung', icon: '🏥',
|
|
activities: [
|
|
{ id: 'patientenverwaltung', name: 'Patientenverwaltung', purpose: 'Verwaltung von Patientenstammdaten und Krankengeschichte', primary_categories: ['stammdaten', 'kontaktdaten', 'zahlungsdaten'], art9_relevant: ['gesundheit', 'genetik'], default_legal_basis: 'contract' },
|
|
{ id: 'terminplanung_med', name: 'Terminplanung (Patienten)', purpose: 'Vergabe und Verwaltung von Patiententerminen', primary_categories: ['stammdaten', 'kontaktdaten'], art9_relevant: ['gesundheit'], default_legal_basis: 'contract' },
|
|
{ id: 'kv_abrechnung', name: 'KV-Abrechnung', purpose: 'Abrechnung von Leistungen gegenüber Kassenärztlichen Vereinigungen', primary_categories: ['stammdaten', 'zahlungsdaten'], art9_relevant: ['gesundheit'], default_legal_basis: 'legal' },
|
|
{ id: 'med_dokumentation', name: 'Medizinische Dokumentation', purpose: 'Dokumentation von Diagnosen, Therapien und Behandlungsverläufen', primary_categories: ['stammdaten'], art9_relevant: ['gesundheit', 'genetik'], default_legal_basis: 'legal' },
|
|
],
|
|
}],
|
|
'Finanzdienstleistungen': [{
|
|
id: 'finanz_dept', name: 'Regulatorik / Finanzaufsicht', icon: '🏦',
|
|
activities: [
|
|
{ id: 'kyc', name: 'Know Your Customer (KYC)', purpose: 'Identifizierung und Verifizierung von Kunden gemäß GwG', primary_categories: ['stammdaten', 'kontaktdaten', 'bilddaten'], art9_relevant: [], default_legal_basis: 'legal' },
|
|
{ id: 'kontoverwaltung', name: 'Kontoverwaltung', purpose: 'Verwaltung von Kundenkonten und Kontobewegungen', primary_categories: ['stammdaten', 'kontaktdaten', 'zahlungsdaten'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
{ id: 'geldwaeschepraevention', name: 'Geldwäscheprävention (AML)', purpose: 'Überwachung verdächtiger Transaktionen nach GwG', primary_categories: ['stammdaten', 'zahlungsdaten'], art9_relevant: [], default_legal_basis: 'legal' },
|
|
],
|
|
}],
|
|
'Bildung': [{
|
|
id: 'bildung_dept', name: 'Bildung / Lehre', icon: '🎓',
|
|
activities: [
|
|
{ id: 'schuelerverwaltung', name: 'Schüler-/Teilnehmerverwaltung', purpose: 'Verwaltung von Lernenden, Noten, Anwesenheit', primary_categories: ['stammdaten', 'kontaktdaten', 'nutzungsdaten'], art9_relevant: ['gesundheit', 'religion'], default_legal_basis: 'contract' },
|
|
{ id: 'lernplattform', name: 'Lernplattform / LMS', purpose: 'Bereitstellung und Nutzung digitaler Lernplattformen', primary_categories: ['stammdaten', 'nutzungsdaten', 'kommunikation'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
{ id: 'pruefungsverwaltung', name: 'Prüfungsverwaltung', purpose: 'Verwaltung und Dokumentation von Prüfungen und Noten', primary_categories: ['stammdaten'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
],
|
|
}],
|
|
'Immobilien': [{
|
|
id: 'immobilien_dept', name: 'Immobilienverwaltung', icon: '🏠',
|
|
activities: [
|
|
{ id: 'mieterverwaltung', name: 'Mieterverwaltung', purpose: 'Verwaltung von Mietverträgen und Mieterdaten', primary_categories: ['stammdaten', 'kontaktdaten', 'vertragsdaten', 'zahlungsdaten'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
{ id: 'nebenkostenabrechnung', name: 'Nebenkostenabrechnung', purpose: 'Erstellung und Versand von Nebenkostenabrechnungen', primary_categories: ['stammdaten', 'zahlungsdaten'], art9_relevant: [], default_legal_basis: 'contract' },
|
|
],
|
|
}],
|
|
}
|
|
|
|
// Compute which departments to show based on company context
|
|
function getRelevantDepartments(industry: string | string[], businessModel: string | undefined, companySize: string | undefined): ActivityDepartment[] {
|
|
const departments: ActivityDepartment[] = [...UNIVERSAL_DEPARTMENTS]
|
|
|
|
// Always show optional departments — user can choose
|
|
departments.push(...OPTIONAL_DEPARTMENTS)
|
|
|
|
// Add industry-specific departments (support multi-select)
|
|
const industries = Array.isArray(industry) ? industry : [industry]
|
|
const addedIds = new Set<string>()
|
|
for (const ind of industries) {
|
|
const industryDepts = INDUSTRY_DEPARTMENTS[ind]
|
|
if (industryDepts) {
|
|
for (const dept of industryDepts) {
|
|
if (!addedIds.has(dept.id)) {
|
|
addedIds.add(dept.id)
|
|
departments.push(dept)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return departments
|
|
}
|
|
|
|
interface ProcessingActivity {
|
|
id: string
|
|
name: string
|
|
purpose: string
|
|
data_categories: string[]
|
|
legal_basis: string
|
|
department?: string
|
|
custom?: boolean
|
|
usesServiceProvider?: boolean
|
|
serviceProviderName?: string
|
|
}
|
|
|
|
interface AISystem {
|
|
id: string
|
|
name: string
|
|
vendor: string
|
|
purpose: string
|
|
purposes?: string[]
|
|
processes_personal_data: boolean
|
|
isCustom?: boolean
|
|
notes?: string
|
|
}
|
|
|
|
// Helper: find template for an activity ID across all departments
|
|
function findTemplate(departments: ActivityDepartment[], activityId: string): ActivityTemplate | null {
|
|
for (const dept of departments) {
|
|
const t = dept.activities.find(a => a.id === activityId)
|
|
if (t) return t
|
|
}
|
|
return null
|
|
}
|
|
|
|
function StepProcessing({
|
|
data,
|
|
onChange,
|
|
}: {
|
|
data: Partial<CompanyProfile> & { processingSystems?: ProcessingActivity[] }
|
|
onChange: (updates: Record<string, unknown>) => void
|
|
}) {
|
|
const activities: ProcessingActivity[] = (data as any).processingSystems || []
|
|
const industry = data.industry || []
|
|
const [expandedActivity, setExpandedActivity] = useState<string | null>(null)
|
|
const [collapsedDepts, setCollapsedDepts] = useState<Set<string>>(new Set())
|
|
const [showExtraCategories, setShowExtraCategories] = useState<Set<string>>(new Set())
|
|
const [expandedInfoCat, setExpandedInfoCat] = useState<string | null>(null)
|
|
|
|
const departments = getRelevantDepartments(industry, data.businessModel, data.companySize)
|
|
const activeIds = new Set(activities.map(a => a.id))
|
|
|
|
const toggleActivity = (template: ActivityTemplate, deptId: string) => {
|
|
if (activeIds.has(template.id)) {
|
|
onChange({ processingSystems: activities.filter(a => a.id !== template.id) })
|
|
} else {
|
|
onChange({
|
|
processingSystems: [...activities, {
|
|
id: template.id,
|
|
name: template.name,
|
|
purpose: template.purpose,
|
|
data_categories: [...template.primary_categories],
|
|
legal_basis: template.default_legal_basis,
|
|
department: deptId,
|
|
}],
|
|
})
|
|
}
|
|
}
|
|
|
|
const updateActivity = (id: string, updates: Partial<ProcessingActivity>) => {
|
|
onChange({
|
|
processingSystems: activities.map(a => a.id === id ? { ...a, ...updates } : a),
|
|
})
|
|
}
|
|
|
|
const toggleDataCategory = (activityId: string, categoryId: string) => {
|
|
const activity = activities.find(a => a.id === activityId)
|
|
if (!activity) return
|
|
const cats = activity.data_categories.includes(categoryId)
|
|
? activity.data_categories.filter(c => c !== categoryId)
|
|
: [...activity.data_categories, categoryId]
|
|
updateActivity(activityId, { data_categories: cats })
|
|
}
|
|
|
|
const toggleDeptCollapse = (deptId: string) => {
|
|
setCollapsedDepts(prev => {
|
|
const next = new Set(prev)
|
|
if (next.has(deptId)) next.delete(deptId); else next.add(deptId)
|
|
return next
|
|
})
|
|
}
|
|
|
|
const toggleExtraCategories = (activityId: string) => {
|
|
setShowExtraCategories(prev => {
|
|
const next = new Set(prev)
|
|
if (next.has(activityId)) next.delete(activityId); else next.add(activityId)
|
|
return next
|
|
})
|
|
}
|
|
|
|
const addCustomActivity = () => {
|
|
const id = `custom_${Date.now()}`
|
|
onChange({
|
|
processingSystems: [...activities, {
|
|
id,
|
|
name: '',
|
|
purpose: '',
|
|
data_categories: [],
|
|
legal_basis: 'contract',
|
|
custom: true,
|
|
}],
|
|
})
|
|
setExpandedActivity(id)
|
|
}
|
|
|
|
const removeActivity = (id: string) => {
|
|
onChange({ processingSystems: activities.filter(a => a.id !== id) })
|
|
if (expandedActivity === id) setExpandedActivity(null)
|
|
}
|
|
|
|
// Count active activities per department
|
|
const deptActivityCount = (dept: ActivityDepartment) =>
|
|
dept.activities.filter(a => activeIds.has(a.id)).length
|
|
|
|
// Render a data category checkbox with info tooltip
|
|
const renderCategoryCheckbox = (cat: { id: string; label: string; desc: string; info: string }, activity: ProcessingActivity, variant: 'normal' | 'extra' | 'art9' | 'art9-extra', template?: ActivityTemplate | null) => {
|
|
const infoText = template?.categoryInfo?.[cat.id] || cat.info
|
|
const isInfoExpanded = expandedInfoCat === `${activity.id}-${cat.id}`
|
|
const colorClasses = variant.startsWith('art9')
|
|
? { check: 'text-red-600 focus:ring-red-500', hover: 'hover:bg-red-100', text: variant === 'art9-extra' ? 'text-gray-500' : 'text-gray-700' }
|
|
: { check: 'text-purple-600 focus:ring-purple-500', hover: 'hover:bg-gray-100', text: variant === 'extra' ? 'text-gray-500' : 'text-gray-700' }
|
|
|
|
// Split info text to highlight retention periods
|
|
const aufbewahrungIdx = infoText.indexOf('Aufbewahrung:')
|
|
const loeschfristIdx = infoText.indexOf('Löschfrist')
|
|
const speicherdauerIdx = infoText.indexOf('Speicherdauer:')
|
|
const retentionIdx = [aufbewahrungIdx, loeschfristIdx, speicherdauerIdx].filter(i => i >= 0).sort((a, b) => a - b)[0] ?? -1
|
|
const hasRetention = retentionIdx >= 0
|
|
const mainText = hasRetention ? infoText.slice(0, retentionIdx).replace(/\.\s*$/, '') : infoText
|
|
const retentionText = hasRetention ? infoText.slice(retentionIdx) : ''
|
|
|
|
return (
|
|
<div key={cat.id}>
|
|
<label className={`flex items-center gap-2 text-xs p-1.5 rounded ${colorClasses.hover} cursor-pointer`}>
|
|
<input type="checkbox" checked={activity.data_categories.includes(cat.id)} onChange={() => toggleDataCategory(activity.id, cat.id)} className={`w-3.5 h-3.5 ${colorClasses.check} rounded`} />
|
|
<span className={colorClasses.text}>{cat.label}</span>
|
|
<button
|
|
type="button"
|
|
onClick={e => { e.preventDefault(); e.stopPropagation(); setExpandedInfoCat(isInfoExpanded ? null : `${activity.id}-${cat.id}`) }}
|
|
className="ml-auto w-4 h-4 flex items-center justify-center rounded-full bg-gray-200 hover:bg-gray-300 text-gray-500 text-[10px] font-bold flex-shrink-0"
|
|
title={infoText}
|
|
>
|
|
i
|
|
</button>
|
|
</label>
|
|
{isInfoExpanded && (
|
|
<div className="ml-7 mt-1 mb-1 px-2 py-1.5 bg-blue-50 border border-blue-100 rounded text-[11px] text-blue-800">
|
|
{hasRetention ? (
|
|
<>
|
|
<span>{mainText}</span>
|
|
<span className="block mt-1 px-1.5 py-0.5 bg-amber-50 border border-amber-200 rounded text-amber-800">
|
|
<span className="mr-1">🕓</span>{retentionText}
|
|
</span>
|
|
</>
|
|
) : infoText}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Render activity detail panel (shared between template and custom)
|
|
const renderActivityDetail = (activity: ProcessingActivity, template: ActivityTemplate | null) => {
|
|
const primaryIds = new Set(template?.primary_categories || [])
|
|
const art9Ids = new Set(template?.art9_relevant || [])
|
|
const primaryCats = ALL_DATA_CATEGORIES.filter(c => primaryIds.has(c.id))
|
|
const extraCats = ALL_DATA_CATEGORIES.filter(c => !primaryIds.has(c.id))
|
|
const relevantArt9 = ALL_SPECIAL_CATEGORIES.filter(c => art9Ids.has(c.id))
|
|
const otherArt9 = ALL_SPECIAL_CATEGORIES.filter(c => !art9Ids.has(c.id))
|
|
const showingExtra = showExtraCategories.has(activity.id)
|
|
// For custom activities, show all categories
|
|
const isCustom = !template || activity.custom
|
|
|
|
return (
|
|
<div className="ml-4 mt-2 p-4 bg-gray-50 rounded-lg border border-gray-200 space-y-4">
|
|
{/* Legal hint (e.g. ArbZG for Arbeitszeiterfassung) */}
|
|
{template?.legalHint && (
|
|
<div className="flex items-start gap-2 px-3 py-2 bg-amber-50 border border-amber-200 rounded-lg">
|
|
<span className="text-amber-600 text-sm mt-0.5">⚠</span>
|
|
<span className="text-xs text-amber-800">{template.legalHint}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Custom: name + purpose fields */}
|
|
{isCustom && (
|
|
<div className="grid grid-cols-1 gap-3">
|
|
<input type="text" value={activity.name} onChange={e => updateActivity(activity.id, { name: e.target.value })} placeholder="Name der Verarbeitungstätigkeit" className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
|
|
<input type="text" value={activity.purpose} onChange={e => updateActivity(activity.id, { purpose: e.target.value })} placeholder="Zweck der Verarbeitung" className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
|
|
</div>
|
|
)}
|
|
|
|
{/* Service Provider option (e.g. for Lohn- und Gehaltsabrechnung) */}
|
|
{template?.hasServiceProvider && (
|
|
<div className="bg-blue-50 rounded-lg p-3 border border-blue-100 space-y-2">
|
|
<label className="flex items-center gap-2 text-xs cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={activity.usesServiceProvider || false}
|
|
onChange={e => updateActivity(activity.id, {
|
|
usesServiceProvider: e.target.checked,
|
|
...(!e.target.checked ? { serviceProviderName: '' } : {})
|
|
})}
|
|
className="w-3.5 h-3.5 text-blue-600 rounded focus:ring-blue-500"
|
|
/>
|
|
<span className="text-blue-800 font-medium">Externer Dienstleister wird eingesetzt</span>
|
|
</label>
|
|
{activity.usesServiceProvider && (
|
|
<div className="ml-6">
|
|
<input
|
|
type="text"
|
|
value={activity.serviceProviderName || ''}
|
|
onChange={e => updateActivity(activity.id, { serviceProviderName: e.target.value })}
|
|
placeholder="Name des Dienstleisters (optional)"
|
|
className="w-full px-3 py-1.5 border border-blue-200 rounded text-xs focus:ring-2 focus:ring-blue-400 focus:border-transparent bg-white"
|
|
/>
|
|
<p className="text-[10px] text-blue-600 mt-1">Wird als Auftragsverarbeiter (AVV) im VVT erfasst.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Primary Data Categories */}
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-600 mb-2">Betroffene Datenkategorien</label>
|
|
<div className="grid grid-cols-2 gap-1.5">
|
|
{(isCustom ? ALL_DATA_CATEGORIES : primaryCats).map(cat =>
|
|
renderCategoryCheckbox(cat, activity, 'normal', template)
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Extra categories (expandable, only for template-based) */}
|
|
{!isCustom && extraCats.length > 0 && (
|
|
<div>
|
|
<button type="button" onClick={() => toggleExtraCategories(activity.id)} className="text-xs text-purple-600 hover:text-purple-800">
|
|
{showingExtra ? '▾ Weitere Kategorien ausblenden' : `▸ Weitere ${extraCats.length} Kategorien anzeigen`}
|
|
</button>
|
|
{showingExtra && (
|
|
<div className="grid grid-cols-2 gap-1.5 mt-2">
|
|
{extraCats.map(cat => renderCategoryCheckbox(cat, activity, 'extra', template))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Art. 9 Special Categories — only show if relevant for this activity */}
|
|
{(isCustom ? ALL_SPECIAL_CATEGORIES.length > 0 : relevantArt9.length > 0) && (
|
|
<div className="bg-red-50 rounded-lg p-3 border border-red-100">
|
|
<label className="block text-xs font-medium text-red-700 mb-2">
|
|
Besondere Kategorien (Art. 9 DSGVO)
|
|
</label>
|
|
<div className="grid grid-cols-2 gap-1.5">
|
|
{(isCustom ? ALL_SPECIAL_CATEGORIES : relevantArt9).map(cat =>
|
|
renderCategoryCheckbox(cat, activity, 'art9', template)
|
|
)}
|
|
</div>
|
|
{/* Show remaining Art. 9 categories if expanded */}
|
|
{!isCustom && otherArt9.length > 0 && showingExtra && (
|
|
<div className="grid grid-cols-2 gap-1.5 mt-2 pt-2 border-t border-red-100">
|
|
{otherArt9.map(cat => renderCategoryCheckbox(cat, activity, 'art9-extra', template))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<button type="button" onClick={() => removeActivity(activity.id)} className="text-xs text-red-500 hover:text-red-700">
|
|
Verarbeitungstätigkeit entfernen
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
{/* Processing Activities grouped by department */}
|
|
<div>
|
|
<h3 className="text-sm font-medium text-gray-700 mb-1">Verarbeitungstätigkeiten</h3>
|
|
<p className="text-xs text-gray-500 mb-4">
|
|
Wählen Sie pro Abteilung aus, welche Verarbeitungen stattfinden. Diese bilden die Grundlage für Ihr Verarbeitungsverzeichnis (VVT) nach Art. 30 DSGVO.
|
|
</p>
|
|
|
|
<div className="space-y-4">
|
|
{departments.map(dept => {
|
|
const isCollapsed = collapsedDepts.has(dept.id)
|
|
const activeCount = deptActivityCount(dept)
|
|
|
|
return (
|
|
<div key={dept.id} className="border border-gray-200 rounded-lg overflow-hidden">
|
|
{/* Department header */}
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleDeptCollapse(dept.id)}
|
|
className="w-full flex items-center gap-3 px-4 py-3 bg-gray-50 hover:bg-gray-100 transition-colors text-left"
|
|
>
|
|
<span className="text-base">{dept.icon}</span>
|
|
<span className="text-sm font-medium text-gray-900 flex-1">{dept.name}</span>
|
|
{activeCount > 0 && (
|
|
<span className="text-xs bg-purple-100 text-purple-700 px-2 py-0.5 rounded-full">
|
|
{activeCount} aktiv
|
|
</span>
|
|
)}
|
|
<svg className={`w-4 h-4 text-gray-400 transition-transform ${isCollapsed ? '' : 'rotate-180'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Department activities */}
|
|
{!isCollapsed && (
|
|
<div className="p-3 space-y-2">
|
|
{dept.activities.map(template => {
|
|
const isActive = activeIds.has(template.id)
|
|
const activity = activities.find(a => a.id === template.id)
|
|
const isExpanded = expandedActivity === template.id
|
|
|
|
return (
|
|
<div key={template.id}>
|
|
<div
|
|
className={`flex items-center gap-3 p-3 rounded-lg border-2 cursor-pointer transition-all ${
|
|
isActive ? 'border-purple-500 bg-purple-50' : 'border-gray-100 hover:border-purple-300'
|
|
}`}
|
|
onClick={() => {
|
|
if (!isActive) {
|
|
toggleActivity(template, dept.id)
|
|
setExpandedActivity(template.id)
|
|
} else {
|
|
setExpandedActivity(isExpanded ? null : template.id)
|
|
}
|
|
}}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={isActive}
|
|
onChange={e => { e.stopPropagation(); toggleActivity(template, dept.id) }}
|
|
className="w-4 h-4 text-purple-600 rounded focus:ring-purple-500 flex-shrink-0"
|
|
/>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-medium text-gray-900">{template.name}</span>
|
|
{template.legalHint && (
|
|
<span className="text-[10px] bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-medium whitespace-nowrap">Pflicht</span>
|
|
)}
|
|
{template.hasServiceProvider && (
|
|
<span className="text-[10px] bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-medium whitespace-nowrap">AVV-relevant</span>
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-gray-500 truncate">{template.purpose}</p>
|
|
</div>
|
|
{isActive && (
|
|
<span className="text-xs text-purple-600 flex-shrink-0">
|
|
{activity?.data_categories.length || 0} Kat.
|
|
</span>
|
|
)}
|
|
{isActive && (
|
|
<svg className={`w-4 h-4 text-gray-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
)}
|
|
</div>
|
|
|
|
{isActive && isExpanded && activity && renderActivityDetail(activity, template)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{/* Custom activities */}
|
|
{activities.filter(a => a.custom).map(activity => (
|
|
<div key={activity.id} className="mt-2">
|
|
<div
|
|
className="flex items-center gap-3 p-3 rounded-lg border-2 border-purple-500 bg-purple-50 cursor-pointer"
|
|
onClick={() => setExpandedActivity(expandedActivity === activity.id ? null : activity.id)}
|
|
>
|
|
<span className="w-4 h-4 flex items-center justify-center text-purple-600 flex-shrink-0 text-sm">+</span>
|
|
<div className="flex-1 min-w-0">
|
|
<span className="text-sm font-medium text-gray-900">{activity.name || 'Neue Verarbeitungstätigkeit'}</span>
|
|
</div>
|
|
<svg className={`w-4 h-4 text-gray-400 transition-transform ${expandedActivity === activity.id ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
{expandedActivity === activity.id && renderActivityDetail(activity, null)}
|
|
</div>
|
|
))}
|
|
|
|
{/* Add custom activity button */}
|
|
<button
|
|
type="button"
|
|
onClick={addCustomActivity}
|
|
className="w-full mt-3 px-3 py-2 text-sm text-purple-700 bg-purple-50 border-2 border-dashed border-purple-200 rounded-lg hover:bg-purple-100 hover:border-purple-300 transition-colors"
|
|
>
|
|
+ Eigene Verarbeitungstätigkeit hinzufügen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// STEP 7: KI-SYSTEME
|
|
// =============================================================================
|
|
|
|
interface AISystemTemplate {
|
|
id: string
|
|
name: string
|
|
vendor: string
|
|
category: string
|
|
icon: string
|
|
typicalPurposes: string[]
|
|
dataWarning?: string
|
|
processes_personal_data_likely: boolean
|
|
}
|
|
|
|
const AI_SYSTEM_TEMPLATES: { category: string; icon: string; systems: AISystemTemplate[] }[] = [
|
|
{
|
|
category: 'Text-KI / Chatbots',
|
|
icon: '\uD83D\uDCAC',
|
|
systems: [
|
|
{ id: 'chatgpt', name: 'ChatGPT', vendor: 'OpenAI', category: 'Text-KI / Chatbots', icon: '\uD83D\uDCAC', typicalPurposes: ['Textgenerierung', 'Kundensupport', 'Zusammenfassungen', 'Recherche'], dataWarning: 'Datenverarbeitung in den USA. Eingaben koennen fuer Training verwendet werden (opt-out moeglich).', processes_personal_data_likely: true },
|
|
{ id: 'claude', name: 'Claude', vendor: 'Anthropic', category: 'Text-KI / Chatbots', icon: '\uD83D\uDCAC', typicalPurposes: ['Textgenerierung', 'Analyse', 'Zusammenfassungen', 'Code-Review'], dataWarning: 'Datenverarbeitung in den USA. Eingaben werden NICHT fuer Training verwendet.', processes_personal_data_likely: true },
|
|
{ id: 'gemini', name: 'Google Gemini', vendor: 'Google', category: 'Text-KI / Chatbots', icon: '\uD83D\uDCAC', typicalPurposes: ['Textgenerierung', 'Recherche', 'Zusammenfassungen'], dataWarning: 'Datenverarbeitung in den USA/EU je nach Einstellung.', processes_personal_data_likely: true },
|
|
{ id: 'perplexity', name: 'Perplexity', vendor: 'Perplexity AI', category: 'Text-KI / Chatbots', icon: '\uD83D\uDCAC', typicalPurposes: ['Websuche mit KI', 'Recherche', 'Zusammenfassungen'], dataWarning: 'Websuche + KI. Eingaben werden verarbeitet.', processes_personal_data_likely: false },
|
|
],
|
|
},
|
|
{
|
|
category: 'Office / Produktivitaet',
|
|
icon: '\uD83D\uDCCE',
|
|
systems: [
|
|
{ id: 'copilot365', name: 'Microsoft 365 Copilot', vendor: 'Microsoft', category: 'Office / Produktivitaet', icon: '\uD83D\uDCCE', typicalPurposes: ['E-Mail-Entwuerfe', 'Dokument-Zusammenfassung', 'Praesentationen', 'Excel-Analysen'], dataWarning: 'In M365-Tenant integriert. Daten bleiben im Tenant, aber: KI-Verarbeitung ggf. in den USA.', processes_personal_data_likely: true },
|
|
{ id: 'google-workspace-ai', name: 'Google Workspace AI', vendor: 'Google', category: 'Office / Produktivitaet', icon: '\uD83D\uDCCE', typicalPurposes: ['E-Mail-Entwuerfe', 'Dokument-Zusammenfassung', 'Tabellen-Analysen'], dataWarning: 'Duet AI in Docs, Sheets, Gmail. Datenverarbeitung je nach Workspace-Region.', processes_personal_data_likely: true },
|
|
{ id: 'notion-ai', name: 'Notion AI', vendor: 'Notion', category: 'Office / Produktivitaet', icon: '\uD83D\uDCCE', typicalPurposes: ['Texterstellung', 'Zusammenfassungen', 'Aufgabenverwaltung'], dataWarning: 'Datenverarbeitung in den USA.', processes_personal_data_likely: false },
|
|
{ id: 'grammarly', name: 'Grammarly', vendor: 'Grammarly', category: 'Office / Produktivitaet', icon: '\uD83D\uDCCE', typicalPurposes: ['Textkorrektur', 'Stiloptimierung', 'Tonalitaet'], dataWarning: 'Textanalyse, Datenverarbeitung in den USA.', processes_personal_data_likely: false },
|
|
],
|
|
},
|
|
{
|
|
category: 'Code-Assistenz',
|
|
icon: '\uD83D\uDCBB',
|
|
systems: [
|
|
{ id: 'github-copilot', name: 'GitHub Copilot', vendor: 'Microsoft/GitHub', category: 'Code-Assistenz', icon: '\uD83D\uDCBB', typicalPurposes: ['Code-Vorschlaege', 'Code-Generierung', 'Dokumentation'], dataWarning: 'Code-Vorschlaege basierend auf Kontext. Code-Snippets werden verarbeitet.', processes_personal_data_likely: false },
|
|
{ id: 'cursor', name: 'Cursor / Windsurf', vendor: 'Cursor Inc.', category: 'Code-Assistenz', icon: '\uD83D\uDCBB', typicalPurposes: ['Code-Generierung', 'Refactoring', 'Debugging'], dataWarning: 'KI-Code-Editor. Code wird an KI-Backend uebermittelt.', processes_personal_data_likely: false },
|
|
{ id: 'codewhisperer', name: 'Amazon CodeWhisperer', vendor: 'AWS', category: 'Code-Assistenz', icon: '\uD83D\uDCBB', typicalPurposes: ['Code-Vorschlaege', 'Sicherheits-Scans'], dataWarning: 'Code-Vorschlaege. Opt-out fuer Code-Sharing moeglich.', processes_personal_data_likely: false },
|
|
],
|
|
},
|
|
{
|
|
category: 'Bildgenerierung',
|
|
icon: '\uD83C\uDFA8',
|
|
systems: [
|
|
{ id: 'dalle', name: 'DALL-E / ChatGPT Bildgenerierung', vendor: 'OpenAI', category: 'Bildgenerierung', icon: '\uD83C\uDFA8', typicalPurposes: ['Bildgenerierung', 'Marketing-Material', 'Illustrationen'], dataWarning: 'Bildgenerierung. Prompts werden verarbeitet.', processes_personal_data_likely: false },
|
|
{ id: 'midjourney', name: 'Midjourney', vendor: 'Midjourney Inc.', category: 'Bildgenerierung', icon: '\uD83C\uDFA8', typicalPurposes: ['Bildgenerierung', 'Design-Konzepte', 'Illustrationen'], dataWarning: 'Bildgenerierung via Discord. Prompts sind oeffentlich sichtbar (ausser Pro-Plan).', processes_personal_data_likely: false },
|
|
{ id: 'firefly', name: 'Adobe Firefly', vendor: 'Adobe', category: 'Bildgenerierung', icon: '\uD83C\uDFA8', typicalPurposes: ['Bildgenerierung', 'Bildbearbeitung', 'Design'], dataWarning: 'In Creative Cloud integriert. Trainiert auf lizenzierten Inhalten.', processes_personal_data_likely: false },
|
|
],
|
|
},
|
|
{
|
|
category: 'Uebersetzung / Sprache',
|
|
icon: '\uD83C\uDF10',
|
|
systems: [
|
|
{ id: 'deepl', name: 'DeepL', vendor: 'DeepL SE', category: 'Uebersetzung / Sprache', icon: '\uD83C\uDF10', typicalPurposes: ['Uebersetzung', 'Dokumentenuebersetzung'], dataWarning: 'Deutscher Anbieter, Server in EU. DeepL Pro: Texte werden NICHT gespeichert.', processes_personal_data_likely: false },
|
|
{ id: 'deepl-write', name: 'DeepL Write', vendor: 'DeepL SE', category: 'Uebersetzung / Sprache', icon: '\uD83C\uDF10', typicalPurposes: ['Textoptimierung', 'Stilverbesserung'], dataWarning: 'Deutscher Anbieter, Server in EU. Gleiche Datenschutz-Bedingungen wie DeepL.', processes_personal_data_likely: false },
|
|
],
|
|
},
|
|
{
|
|
category: 'CRM / Sales KI',
|
|
icon: '\uD83D\uDCCA',
|
|
systems: [
|
|
{ id: 'salesforce-einstein', name: 'Salesforce Einstein', vendor: 'Salesforce', category: 'CRM / Sales KI', icon: '\uD83D\uDCCA', typicalPurposes: ['Lead-Scoring', 'Prognosen', 'Empfehlungen'], dataWarning: 'In Salesforce integriert. Verarbeitet CRM-Daten.', processes_personal_data_likely: true },
|
|
{ id: 'hubspot-ai', name: 'HubSpot AI', vendor: 'HubSpot', category: 'CRM / Sales KI', icon: '\uD83D\uDCCA', typicalPurposes: ['E-Mail-Generierung', 'Lead-Scoring', 'Content-Erstellung'], dataWarning: 'KI-Features in HubSpot CRM. Datenverarbeitung in USA/EU.', processes_personal_data_likely: true },
|
|
],
|
|
},
|
|
{
|
|
category: 'Interne / Eigene Systeme',
|
|
icon: '\uD83C\uDFE2',
|
|
systems: [
|
|
{ id: 'internal-ai', name: 'Eigenes KI-System', vendor: 'Intern', category: 'Interne / Eigene Systeme', icon: '\uD83C\uDFE2', typicalPurposes: ['Interne Analyse', 'Automatisierung', 'Prozessoptimierung'], dataWarning: undefined, processes_personal_data_likely: false },
|
|
],
|
|
},
|
|
]
|
|
|
|
function StepAISystems({
|
|
data,
|
|
onChange,
|
|
}: {
|
|
data: Partial<CompanyProfile> & { aiSystems?: AISystem[] }
|
|
onChange: (updates: Record<string, unknown>) => void
|
|
}) {
|
|
const aiSystems: AISystem[] = (data as any).aiSystems || []
|
|
const [expandedSystem, setExpandedSystem] = useState<string | null>(null)
|
|
const [collapsedCategories, setCollapsedCategories] = useState<Set<string>>(new Set())
|
|
|
|
const activeIds = new Set(aiSystems.map(a => a.id))
|
|
|
|
const toggleTemplateSystem = (template: AISystemTemplate) => {
|
|
if (activeIds.has(template.id)) {
|
|
onChange({ aiSystems: aiSystems.filter(a => a.id !== template.id) })
|
|
if (expandedSystem === template.id) setExpandedSystem(null)
|
|
} else {
|
|
const newSystem: AISystem = {
|
|
id: template.id,
|
|
name: template.name,
|
|
vendor: template.vendor,
|
|
purpose: template.typicalPurposes.join(', '),
|
|
purposes: [],
|
|
processes_personal_data: template.processes_personal_data_likely,
|
|
isCustom: false,
|
|
}
|
|
onChange({ aiSystems: [...aiSystems, newSystem] })
|
|
setExpandedSystem(template.id)
|
|
}
|
|
}
|
|
|
|
const updateAISystem = (id: string, updates: Partial<AISystem>) => {
|
|
onChange({
|
|
aiSystems: aiSystems.map(a => a.id === id ? { ...a, ...updates } : a),
|
|
})
|
|
}
|
|
|
|
const togglePurpose = (systemId: string, purpose: string) => {
|
|
const system = aiSystems.find(a => a.id === systemId)
|
|
if (!system) return
|
|
const purposes = system.purposes || []
|
|
const updated = purposes.includes(purpose)
|
|
? purposes.filter(p => p !== purpose)
|
|
: [...purposes, purpose]
|
|
updateAISystem(systemId, { purposes: updated, purpose: updated.join(', ') })
|
|
}
|
|
|
|
const addCustomSystem = () => {
|
|
const id = `custom_ai_${Date.now()}`
|
|
const newSystem: AISystem = {
|
|
id,
|
|
name: '',
|
|
vendor: '',
|
|
purpose: '',
|
|
processes_personal_data: false,
|
|
isCustom: true,
|
|
}
|
|
onChange({ aiSystems: [...aiSystems, newSystem] })
|
|
setExpandedSystem(id)
|
|
}
|
|
|
|
const removeSystem = (id: string) => {
|
|
onChange({ aiSystems: aiSystems.filter(a => a.id !== id) })
|
|
if (expandedSystem === id) setExpandedSystem(null)
|
|
}
|
|
|
|
const toggleCategoryCollapse = (category: string) => {
|
|
setCollapsedCategories(prev => {
|
|
const next = new Set(prev)
|
|
if (next.has(category)) next.delete(category); else next.add(category)
|
|
return next
|
|
})
|
|
}
|
|
|
|
const categoryActiveCount = (systems: AISystemTemplate[]) =>
|
|
systems.filter(s => activeIds.has(s.id)).length
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h3 className="text-sm font-medium text-gray-700 mb-1">KI-Systeme im Einsatz</h3>
|
|
<p className="text-xs text-gray-500 mb-4">
|
|
Waehlen Sie die KI-Systeme aus, die in Ihrem Unternehmen eingesetzt werden. Dies dient der Erfassung fuer den EU AI Act und die DSGVO-Dokumentation.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Template categories */}
|
|
<div className="space-y-4">
|
|
{AI_SYSTEM_TEMPLATES.map(group => {
|
|
const isCollapsed = collapsedCategories.has(group.category)
|
|
const activeCount = categoryActiveCount(group.systems)
|
|
|
|
return (
|
|
<div key={group.category} className="border border-gray-200 rounded-lg overflow-hidden">
|
|
{/* Category header */}
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleCategoryCollapse(group.category)}
|
|
className="w-full flex items-center gap-3 px-4 py-3 bg-gray-50 hover:bg-gray-100 transition-colors text-left"
|
|
>
|
|
<span className="text-base">{group.icon}</span>
|
|
<span className="text-sm font-medium text-gray-900 flex-1">{group.category}</span>
|
|
{activeCount > 0 && (
|
|
<span className="text-xs bg-purple-100 text-purple-700 px-2 py-0.5 rounded-full">
|
|
{activeCount} aktiv
|
|
</span>
|
|
)}
|
|
<svg className={`w-4 h-4 text-gray-400 transition-transform ${isCollapsed ? '' : 'rotate-180'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Systems in category */}
|
|
{!isCollapsed && (
|
|
<div className="p-3 space-y-2">
|
|
{group.systems.map(template => {
|
|
const isActive = activeIds.has(template.id)
|
|
const system = aiSystems.find(a => a.id === template.id)
|
|
const isExpanded = expandedSystem === template.id
|
|
|
|
return (
|
|
<div key={template.id}>
|
|
<div
|
|
className={`flex items-center gap-3 p-3 rounded-lg border-2 cursor-pointer transition-all ${
|
|
isActive ? 'border-purple-500 bg-purple-50' : 'border-gray-100 hover:border-purple-300'
|
|
}`}
|
|
onClick={() => {
|
|
if (!isActive) {
|
|
toggleTemplateSystem(template)
|
|
} else {
|
|
setExpandedSystem(isExpanded ? null : template.id)
|
|
}
|
|
}}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={isActive}
|
|
onChange={e => { e.stopPropagation(); toggleTemplateSystem(template) }}
|
|
className="w-4 h-4 text-purple-600 rounded focus:ring-purple-500 flex-shrink-0"
|
|
/>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-sm font-medium text-gray-900">{template.name}</div>
|
|
<p className="text-xs text-gray-500">{template.vendor}</p>
|
|
</div>
|
|
{isActive && (
|
|
<svg className={`w-4 h-4 text-gray-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
)}
|
|
</div>
|
|
|
|
{/* Detail panel */}
|
|
{isActive && isExpanded && system && (
|
|
<div className="ml-4 mt-2 p-4 bg-gray-50 rounded-lg border border-gray-200 space-y-4">
|
|
{/* Purposes as chips */}
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-600 mb-2">Einsatzzweck</label>
|
|
<div className="flex flex-wrap gap-2">
|
|
{template.typicalPurposes.map(purpose => (
|
|
<button
|
|
key={purpose}
|
|
type="button"
|
|
onClick={() => togglePurpose(template.id, purpose)}
|
|
className={`px-3 py-1.5 text-xs rounded-full border transition-all ${
|
|
(system.purposes || []).includes(purpose)
|
|
? 'bg-purple-100 border-purple-300 text-purple-700'
|
|
: 'bg-white border-gray-200 text-gray-600 hover:border-purple-200'
|
|
}`}
|
|
>
|
|
{purpose}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<input
|
|
type="text"
|
|
value={system.notes || ''}
|
|
onChange={e => updateAISystem(template.id, { notes: e.target.value })}
|
|
placeholder="Weitere Einsatzzwecke / Anmerkungen..."
|
|
className="mt-2 w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
|
|
{/* Data warning */}
|
|
{template.dataWarning && (
|
|
<div className={`flex items-start gap-2 px-3 py-2 rounded-lg ${
|
|
template.dataWarning.includes('EU') || template.dataWarning.includes('Deutscher Anbieter') || template.dataWarning.includes('NICHT')
|
|
? 'bg-blue-50 border border-blue-200'
|
|
: 'bg-amber-50 border border-amber-200'
|
|
}`}>
|
|
<span className="text-sm mt-0.5">{template.dataWarning.includes('EU') || template.dataWarning.includes('Deutscher Anbieter') ? '\u2139\uFE0F' : '\u26A0\uFE0F'}</span>
|
|
<span className="text-xs text-gray-800">{template.dataWarning}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Personal data checkbox */}
|
|
<label className="flex items-center gap-2 px-1 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={system.processes_personal_data}
|
|
onChange={e => updateAISystem(template.id, { processes_personal_data: e.target.checked })}
|
|
className="w-4 h-4 text-purple-600 rounded focus:ring-purple-500"
|
|
/>
|
|
<span className="text-sm text-gray-700">Verarbeitet personenbezogene Daten</span>
|
|
</label>
|
|
|
|
<button type="button" onClick={() => removeSystem(template.id)} className="text-xs text-red-500 hover:text-red-700">
|
|
KI-System entfernen
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{/* Custom AI systems */}
|
|
{aiSystems.filter(a => a.isCustom).map(system => (
|
|
<div key={system.id} className="mt-2">
|
|
<div
|
|
className="flex items-center gap-3 p-3 rounded-lg border-2 border-purple-500 bg-purple-50 cursor-pointer"
|
|
onClick={() => setExpandedSystem(expandedSystem === system.id ? null : system.id)}
|
|
>
|
|
<span className="w-4 h-4 flex items-center justify-center text-purple-600 flex-shrink-0 text-sm">+</span>
|
|
<div className="flex-1 min-w-0">
|
|
<span className="text-sm font-medium text-gray-900">{system.name || 'Neues KI-System'}</span>
|
|
{system.vendor && <span className="text-xs text-gray-500 ml-2">({system.vendor})</span>}
|
|
</div>
|
|
<svg className={`w-4 h-4 text-gray-400 transition-transform ${expandedSystem === system.id ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
{expandedSystem === system.id && (
|
|
<div className="ml-4 mt-2 p-4 bg-gray-50 rounded-lg border border-gray-200 space-y-3">
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<input type="text" value={system.name} onChange={e => updateAISystem(system.id, { name: e.target.value })} placeholder="Name (z.B. ChatGPT, Copilot)" className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
|
|
<input type="text" value={system.vendor} onChange={e => updateAISystem(system.id, { vendor: e.target.value })} placeholder="Anbieter (z.B. OpenAI, Microsoft)" className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
|
|
</div>
|
|
<input type="text" value={system.purpose} onChange={e => updateAISystem(system.id, { purpose: e.target.value })} placeholder="Einsatzzweck (z.B. Kundensupport, Code-Assistenz)" className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
|
|
<label className="flex items-center gap-2 px-1 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={system.processes_personal_data}
|
|
onChange={e => updateAISystem(system.id, { processes_personal_data: e.target.checked })}
|
|
className="w-4 h-4 text-purple-600 rounded focus:ring-purple-500"
|
|
/>
|
|
<span className="text-sm text-gray-700">Verarbeitet personenbezogene Daten</span>
|
|
</label>
|
|
<button type="button" onClick={() => removeSystem(system.id)} className="text-xs text-red-500 hover:text-red-700">
|
|
KI-System entfernen
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
|
|
{/* Add custom system button */}
|
|
<button
|
|
type="button"
|
|
onClick={addCustomSystem}
|
|
className="w-full mt-3 px-3 py-2 text-sm text-purple-700 bg-purple-50 border-2 border-dashed border-purple-200 rounded-lg hover:bg-purple-100 hover:border-purple-300 transition-colors"
|
|
>
|
|
+ Eigenes KI-System hinzufuegen
|
|
</button>
|
|
|
|
{/* AI Act module link */}
|
|
<div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
|
<div className="flex items-start gap-3">
|
|
<span className="text-lg">{'\u2139\uFE0F'}</span>
|
|
<div>
|
|
<h4 className="text-sm font-medium text-blue-900 mb-1">AI Act Risikoeinstufung</h4>
|
|
<p className="text-xs text-blue-800 mb-3">
|
|
Die detaillierte Risikoeinstufung Ihrer KI-Systeme nach EU AI Act (verboten / hochriskant / begrenzt / minimal) erfolgt automatisch im AI-Act-Modul.
|
|
</p>
|
|
<a
|
|
href="/sdk/ai-act"
|
|
className="inline-flex items-center gap-1 text-sm font-medium text-blue-700 hover:text-blue-900"
|
|
>
|
|
Zum AI-Act-Modul
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// STEP 6: RECHTLICHER RAHMEN (was Step 8, renumbered)
|
|
// =============================================================================
|
|
|
|
const CERTIFICATIONS = [
|
|
{ id: 'iso27001', label: 'ISO 27001', desc: 'Informationssicherheits-Managementsystem' },
|
|
{ id: 'iso27701', label: 'ISO 27701', desc: 'Datenschutz-Managementsystem' },
|
|
{ id: 'iso9001', label: 'ISO 9001', desc: 'Qualitaetsmanagement' },
|
|
{ id: 'iso14001', label: 'ISO 14001', desc: 'Umweltmanagement' },
|
|
{ id: 'iso22301', label: 'ISO 22301', desc: 'Business Continuity Management' },
|
|
{ id: 'iso42001', label: 'ISO 42001', desc: 'KI-Managementsystem' },
|
|
{ id: 'tisax', label: 'TISAX', desc: 'Trusted Information Security Assessment Exchange (Automotive)' },
|
|
{ id: 'soc2', label: 'SOC 2', desc: 'Service Organization Controls (Typ I/II)' },
|
|
{ id: 'c5', label: 'C5', desc: 'Cloud Computing Compliance Criteria Catalogue (BSI)' },
|
|
{ id: 'bsi_grundschutz', label: 'BSI IT-Grundschutz', desc: 'IT-Grundschutz-Zertifikat oder Testat' },
|
|
{ id: 'pci_dss', label: 'PCI DSS', desc: 'Payment Card Industry Data Security Standard' },
|
|
{ id: 'hipaa', label: 'HIPAA', desc: 'Health Insurance Portability and Accountability Act' },
|
|
{ id: 'other', label: 'Sonstige', desc: 'Andere Zertifizierungen' },
|
|
]
|
|
|
|
interface CertificationEntry {
|
|
certId: string
|
|
certifier?: string
|
|
lastDate?: string
|
|
customName?: string
|
|
}
|
|
|
|
function StepLegalFramework({
|
|
data,
|
|
onChange,
|
|
}: {
|
|
data: Partial<CompanyProfile>
|
|
onChange: (updates: Record<string, unknown>) => void
|
|
}) {
|
|
const contacts = (data as any).technicalContacts || []
|
|
const existingCerts: CertificationEntry[] = (data as any).existingCertifications || []
|
|
const targetCerts: string[] = (data as any).targetCertifications || []
|
|
const targetCertOther: string = (data as any).targetCertificationOther || ''
|
|
|
|
// Toggle existing certification
|
|
const toggleExistingCert = (certId: string) => {
|
|
const exists = existingCerts.find((c: CertificationEntry) => c.certId === certId)
|
|
if (exists) {
|
|
onChange({ existingCertifications: existingCerts.filter((c: CertificationEntry) => c.certId !== certId) })
|
|
} else {
|
|
onChange({ existingCertifications: [...existingCerts, { certId }] })
|
|
}
|
|
}
|
|
|
|
const updateExistingCert = (certId: string, updates: Partial<CertificationEntry>) => {
|
|
onChange({
|
|
existingCertifications: existingCerts.map((c: CertificationEntry) =>
|
|
c.certId === certId ? { ...c, ...updates } : c
|
|
),
|
|
})
|
|
}
|
|
|
|
// Toggle target certification
|
|
const toggleTargetCert = (certId: string) => {
|
|
if (targetCerts.includes(certId)) {
|
|
onChange({ targetCertifications: targetCerts.filter((c: string) => c !== certId) })
|
|
} else {
|
|
onChange({ targetCertifications: [...targetCerts, certId] })
|
|
}
|
|
}
|
|
|
|
const addContact = () => {
|
|
onChange({ technicalContacts: [...contacts, { name: '', role: '', email: '' }] })
|
|
}
|
|
const removeContact = (i: number) => {
|
|
onChange({ technicalContacts: contacts.filter((_: { name: string; role: string; email: string }, idx: number) => idx !== i) })
|
|
}
|
|
const updateContact = (i: number, updates: Partial<{ name: string; role: string; email: string }>) => {
|
|
const updated = [...contacts]
|
|
updated[i] = { ...updated[i], ...updates }
|
|
onChange({ technicalContacts: updated })
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
{/* Bestehende Zertifizierungen */}
|
|
<div>
|
|
<h3 className="text-sm font-medium text-gray-700 mb-1">Bestehende Zertifizierungen</h3>
|
|
<p className="text-sm text-gray-500 mb-3">Ueber welche Zertifizierungen verfuegt Ihr Unternehmen aktuell? Mehrfachauswahl moeglich.</p>
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
|
|
{CERTIFICATIONS.map(cert => {
|
|
const selected = existingCerts.some((c: CertificationEntry) => c.certId === cert.id)
|
|
return (
|
|
<button
|
|
key={cert.id}
|
|
type="button"
|
|
onClick={() => toggleExistingCert(cert.id)}
|
|
className={`p-3 rounded-lg border-2 text-left transition-all ${
|
|
selected
|
|
? 'border-purple-500 bg-purple-50 text-purple-700'
|
|
: 'border-gray-200 hover:border-purple-300 text-gray-700'
|
|
}`}
|
|
>
|
|
<div className="font-medium text-sm">{cert.label}</div>
|
|
<div className="text-xs text-gray-500 mt-0.5">{cert.desc}</div>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{/* Details fuer ausgewaehlte Zertifizierungen */}
|
|
{existingCerts.length > 0 && (
|
|
<div className="mt-4 space-y-3">
|
|
{existingCerts.map((entry: CertificationEntry) => {
|
|
const cert = CERTIFICATIONS.find(c => c.id === entry.certId)
|
|
const label = cert?.label || entry.certId
|
|
return (
|
|
<div key={entry.certId} className="p-4 bg-purple-50 border border-purple-200 rounded-lg">
|
|
<div className="font-medium text-sm text-purple-800 mb-2">
|
|
{entry.certId === 'other' ? 'Sonstige Zertifizierung' : label}
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
|
{entry.certId === 'other' && (
|
|
<input
|
|
type="text"
|
|
value={entry.customName || ''}
|
|
onChange={e => updateExistingCert(entry.certId, { customName: e.target.value })}
|
|
placeholder="Name der Zertifizierung"
|
|
className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
)}
|
|
<input
|
|
type="text"
|
|
value={entry.certifier || ''}
|
|
onChange={e => updateExistingCert(entry.certId, { certifier: e.target.value })}
|
|
placeholder="Zertifizierer (z.B. TÜV, DEKRA)"
|
|
className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
<input
|
|
type="date"
|
|
value={entry.lastDate || ''}
|
|
onChange={e => updateExistingCert(entry.certId, { lastDate: e.target.value })}
|
|
title="Datum der letzten Zertifizierung"
|
|
className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Angestrebte Zertifizierungen */}
|
|
<div className="border-t border-gray-200 pt-6">
|
|
<h3 className="text-sm font-medium text-gray-700 mb-1">Streben Sie eine Zertifizierung an?</h3>
|
|
<p className="text-sm text-gray-500 mb-3">Welche Zertifizierungen planen Sie? Mehrfachauswahl moeglich.</p>
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
|
|
{CERTIFICATIONS.map(cert => {
|
|
const selected = targetCerts.includes(cert.id)
|
|
// Bereits bestehende Zertifizierungen ausgrauen
|
|
const alreadyHas = existingCerts.some((c: CertificationEntry) => c.certId === cert.id)
|
|
return (
|
|
<button
|
|
key={cert.id}
|
|
type="button"
|
|
onClick={() => !alreadyHas && toggleTargetCert(cert.id)}
|
|
disabled={alreadyHas}
|
|
className={`p-3 rounded-lg border-2 text-left transition-all ${
|
|
alreadyHas
|
|
? 'border-gray-100 bg-gray-50 text-gray-400 cursor-not-allowed'
|
|
: selected
|
|
? 'border-green-500 bg-green-50 text-green-700'
|
|
: 'border-gray-200 hover:border-green-300 text-gray-700'
|
|
}`}
|
|
>
|
|
<div className="font-medium text-sm">{cert.label}</div>
|
|
{alreadyHas && <div className="text-xs mt-0.5">Bereits vorhanden</div>}
|
|
{!alreadyHas && <div className="text-xs text-gray-500 mt-0.5">{cert.desc}</div>}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
{targetCerts.includes('other') && (
|
|
<div className="mt-3">
|
|
<input
|
|
type="text"
|
|
value={targetCertOther}
|
|
onChange={e => onChange({ targetCertificationOther: e.target.value })}
|
|
placeholder="Name der angestrebten Zertifizierung"
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Technical Contacts */}
|
|
<div className="border-t border-gray-200 pt-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div>
|
|
<h3 className="text-sm font-medium text-gray-700">Technische Ansprechpartner</h3>
|
|
<p className="text-xs text-gray-500">CISO, IT-Manager, DSB etc.</p>
|
|
</div>
|
|
<button type="button" onClick={addContact} className="px-3 py-1.5 text-sm bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200">
|
|
+ Kontakt
|
|
</button>
|
|
</div>
|
|
{contacts.length === 0 && (
|
|
<div className="text-center py-4 text-gray-400 border-2 border-dashed rounded-lg text-sm">Noch keine Kontakte</div>
|
|
)}
|
|
<div className="space-y-3">
|
|
{contacts.map((c: { name: string; role: string; email: string }, i: number) => (
|
|
<div key={i} className="flex gap-3 items-center">
|
|
<input type="text" value={c.name} onChange={e => updateContact(i, { name: e.target.value })} placeholder="Name" className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
|
|
<input type="text" value={c.role} onChange={e => updateContact(i, { role: e.target.value })} placeholder="Rolle (z.B. CISO)" className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
|
|
<input type="email" value={c.email} onChange={e => updateContact(i, { email: e.target.value })} placeholder="E-Mail" className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
|
|
<button type="button" onClick={() => removeContact(i)} className="text-red-400 hover:text-red-600 text-sm">X</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// STEP 7: PRODUKT & MASCHINE (nur fuer Maschinenbauer, was Step 9)
|
|
// =============================================================================
|
|
|
|
const EMPTY_MACHINE_BUILDER: MachineBuilderProfile = {
|
|
productTypes: [],
|
|
productDescription: '',
|
|
productPride: '',
|
|
containsSoftware: false,
|
|
containsFirmware: false,
|
|
containsAI: false,
|
|
aiIntegrationType: [],
|
|
hasSafetyFunction: false,
|
|
safetyFunctionDescription: '',
|
|
autonomousBehavior: false,
|
|
humanOversightLevel: 'full',
|
|
isNetworked: false,
|
|
hasRemoteAccess: false,
|
|
hasOTAUpdates: false,
|
|
updateMechanism: '',
|
|
exportMarkets: [],
|
|
criticalSectorClients: false,
|
|
criticalSectors: [],
|
|
oemClients: false,
|
|
ceMarkingRequired: false,
|
|
existingCEProcess: false,
|
|
hasRiskAssessment: false,
|
|
}
|
|
|
|
function StepMachineBuilder({
|
|
data,
|
|
onChange,
|
|
}: {
|
|
data: Partial<CompanyProfile>
|
|
onChange: (updates: Partial<CompanyProfile>) => void
|
|
}) {
|
|
const mb = data.machineBuilder || EMPTY_MACHINE_BUILDER
|
|
|
|
const updateMB = (updates: Partial<MachineBuilderProfile>) => {
|
|
onChange({ machineBuilder: { ...mb, ...updates } })
|
|
}
|
|
|
|
const toggleProductType = (type: MachineProductType) => {
|
|
const current = mb.productTypes || []
|
|
if (current.includes(type)) {
|
|
updateMB({ productTypes: current.filter(t => t !== type) })
|
|
} else {
|
|
updateMB({ productTypes: [...current, type] })
|
|
}
|
|
}
|
|
|
|
const toggleAIType = (type: AIIntegrationType) => {
|
|
const current = mb.aiIntegrationType || []
|
|
if (current.includes(type)) {
|
|
updateMB({ aiIntegrationType: current.filter(t => t !== type) })
|
|
} else {
|
|
updateMB({ aiIntegrationType: [...current, type] })
|
|
}
|
|
}
|
|
|
|
const toggleCriticalSector = (sector: CriticalSector) => {
|
|
const current = mb.criticalSectors || []
|
|
if (current.includes(sector)) {
|
|
updateMB({ criticalSectors: current.filter(s => s !== sector) })
|
|
} else {
|
|
updateMB({ criticalSectors: [...current, sector] })
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
{/* Block 1: Erzaehlen Sie uns von Ihrer Anlage */}
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-1">Erzaehlen Sie uns von Ihrer Anlage</h3>
|
|
<p className="text-sm text-gray-500 mb-4">
|
|
Je besser wir Ihr Produkt verstehen, desto praeziser koennen wir die relevanten Vorschriften identifizieren.
|
|
</p>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Was baut Ihr Unternehmen? <span className="text-red-500">*</span>
|
|
</label>
|
|
<textarea
|
|
value={mb.productDescription}
|
|
onChange={e => updateMB({ productDescription: e.target.value })}
|
|
placeholder="z.B. Wir bauen automatisierte Pruefstaende fuer die Qualitaetskontrolle in der Automobilindustrie..."
|
|
rows={3}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Was macht Ihre Anlage besonders?
|
|
</label>
|
|
<textarea
|
|
value={mb.productPride}
|
|
onChange={e => updateMB({ productPride: e.target.value })}
|
|
placeholder="z.B. Unsere Anlage kann 500 Teile/Stunde mit 99.9% Erkennungsrate pruefen..."
|
|
rows={2}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-3">
|
|
Produkttyp <span className="text-gray-400">(Mehrfachauswahl)</span>
|
|
</label>
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
|
|
{Object.entries(MACHINE_PRODUCT_TYPE_LABELS).map(([value, label]) => (
|
|
<button
|
|
key={value}
|
|
type="button"
|
|
onClick={() => toggleProductType(value as MachineProductType)}
|
|
className={`px-4 py-3 rounded-lg border-2 text-sm font-medium transition-all ${
|
|
mb.productTypes.includes(value as MachineProductType)
|
|
? 'border-purple-500 bg-purple-50 text-purple-700'
|
|
: 'border-gray-200 hover:border-purple-300 text-gray-700'
|
|
}`}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Block 2: Software & KI */}
|
|
<div className="border-t border-gray-200 pt-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">Software & KI in Ihrem Produkt</h3>
|
|
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
{[
|
|
{ key: 'containsSoftware', label: 'Enthaelt Software', desc: 'Anwendungssoftware in der Maschine' },
|
|
{ key: 'containsFirmware', label: 'Enthaelt Firmware', desc: 'Embedded Software / Steuerung' },
|
|
{ key: 'containsAI', label: 'Enthaelt KI/ML', desc: 'Kuenstliche Intelligenz / Machine Learning' },
|
|
].map(item => (
|
|
<label
|
|
key={item.key}
|
|
className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
|
|
(mb as any)[item.key]
|
|
? 'border-purple-500 bg-purple-50'
|
|
: 'border-gray-200 hover:border-purple-300'
|
|
}`}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={(mb as any)[item.key] ?? false}
|
|
onChange={e => updateMB({ [item.key]: e.target.checked } as any)}
|
|
className="mt-1 w-5 h-5 text-purple-600 rounded focus:ring-purple-500"
|
|
/>
|
|
<div>
|
|
<div className="font-medium text-gray-900 text-sm">{item.label}</div>
|
|
<div className="text-xs text-gray-500">{item.desc}</div>
|
|
</div>
|
|
</label>
|
|
))}
|
|
</div>
|
|
|
|
{mb.containsAI && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-3">
|
|
Art der KI-Integration
|
|
</label>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{Object.entries(AI_INTEGRATION_TYPE_LABELS).map(([value, label]) => (
|
|
<button
|
|
key={value}
|
|
type="button"
|
|
onClick={() => toggleAIType(value as AIIntegrationType)}
|
|
className={`px-4 py-2 rounded-lg border text-sm transition-all ${
|
|
mb.aiIntegrationType.includes(value as AIIntegrationType)
|
|
? 'border-purple-500 bg-purple-50 text-purple-700'
|
|
: 'border-gray-200 hover:border-purple-300 text-gray-700'
|
|
}`}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<label className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
|
|
mb.hasSafetyFunction ? 'border-red-400 bg-red-50' : 'border-gray-200 hover:border-gray-300'
|
|
}`}>
|
|
<input
|
|
type="checkbox"
|
|
checked={mb.hasSafetyFunction}
|
|
onChange={e => updateMB({ hasSafetyFunction: e.target.checked })}
|
|
className="mt-1 w-5 h-5 text-red-600 rounded focus:ring-red-500"
|
|
/>
|
|
<div>
|
|
<div className="font-medium text-gray-900 text-sm">Sicherheitsrelevante Funktion</div>
|
|
<div className="text-xs text-gray-500">KI/SW hat sicherheitsrelevante Funktion</div>
|
|
</div>
|
|
</label>
|
|
|
|
<label className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
|
|
mb.autonomousBehavior ? 'border-amber-400 bg-amber-50' : 'border-gray-200 hover:border-gray-300'
|
|
}`}>
|
|
<input
|
|
type="checkbox"
|
|
checked={mb.autonomousBehavior}
|
|
onChange={e => updateMB({ autonomousBehavior: e.target.checked })}
|
|
className="mt-1 w-5 h-5 text-amber-600 rounded focus:ring-amber-500"
|
|
/>
|
|
<div>
|
|
<div className="font-medium text-gray-900 text-sm">Autonomes Verhalten</div>
|
|
<div className="text-xs text-gray-500">System lernt oder handelt eigenstaendig</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
{mb.hasSafetyFunction && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Beschreibung der Sicherheitsfunktion
|
|
</label>
|
|
<textarea
|
|
value={mb.safetyFunctionDescription}
|
|
onChange={e => updateMB({ safetyFunctionDescription: e.target.value })}
|
|
placeholder="z.B. KI-Vision ueberwacht den Schutzbereich und stoppt den Roboter bei Personenerkennung..."
|
|
rows={2}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Human Oversight Level
|
|
</label>
|
|
<select
|
|
value={mb.humanOversightLevel}
|
|
onChange={e => updateMB({ humanOversightLevel: e.target.value as HumanOversightLevel })}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
>
|
|
{Object.entries(HUMAN_OVERSIGHT_LABELS).map(([value, label]) => (
|
|
<option key={value} value={value}>{label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Block 3: Konnektivitaet & Updates */}
|
|
<div className="border-t border-gray-200 pt-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">Konnektivitaet & Updates</h3>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-4">
|
|
{[
|
|
{ key: 'isNetworked', label: 'Vernetzt', desc: 'Maschine ist mit Netzwerk verbunden' },
|
|
{ key: 'hasRemoteAccess', label: 'Remote-Zugriff', desc: 'Fernwartung / Remote-Zugang' },
|
|
{ key: 'hasOTAUpdates', label: 'OTA-Updates', desc: 'Drahtlose Software-/Firmware-Updates' },
|
|
].map(item => (
|
|
<label
|
|
key={item.key}
|
|
className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
|
|
(mb as any)[item.key]
|
|
? 'border-purple-500 bg-purple-50'
|
|
: 'border-gray-200 hover:border-purple-300'
|
|
}`}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={(mb as any)[item.key] ?? false}
|
|
onChange={e => updateMB({ [item.key]: e.target.checked } as any)}
|
|
className="mt-1 w-5 h-5 text-purple-600 rounded focus:ring-purple-500"
|
|
/>
|
|
<div>
|
|
<div className="font-medium text-gray-900 text-sm">{item.label}</div>
|
|
<div className="text-xs text-gray-500">{item.desc}</div>
|
|
</div>
|
|
</label>
|
|
))}
|
|
</div>
|
|
|
|
{(mb.hasOTAUpdates || mb.hasRemoteAccess) && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Wie werden Updates eingespielt?
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={mb.updateMechanism}
|
|
onChange={e => updateMB({ updateMechanism: e.target.value })}
|
|
placeholder="z.B. VPN-gesicherter Remote-Zugang mit manueller Freigabe..."
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Block 4: Markt & Kunden */}
|
|
<div className="border-t border-gray-200 pt-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">Markt & Kunden</h3>
|
|
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<label className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
|
|
mb.criticalSectorClients ? 'border-red-400 bg-red-50' : 'border-gray-200 hover:border-gray-300'
|
|
}`}>
|
|
<input
|
|
type="checkbox"
|
|
checked={mb.criticalSectorClients}
|
|
onChange={e => updateMB({ criticalSectorClients: e.target.checked })}
|
|
className="mt-1 w-5 h-5 text-red-600 rounded focus:ring-red-500"
|
|
/>
|
|
<div>
|
|
<div className="font-medium text-gray-900 text-sm">Liefert an KRITIS-Betreiber</div>
|
|
<div className="text-xs text-gray-500">Kunden in kritischer Infrastruktur</div>
|
|
</div>
|
|
</label>
|
|
|
|
<label className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
|
|
mb.oemClients ? 'border-purple-500 bg-purple-50' : 'border-gray-200 hover:border-gray-300'
|
|
}`}>
|
|
<input
|
|
type="checkbox"
|
|
checked={mb.oemClients}
|
|
onChange={e => updateMB({ oemClients: e.target.checked })}
|
|
className="mt-1 w-5 h-5 text-purple-600 rounded focus:ring-purple-500"
|
|
/>
|
|
<div>
|
|
<div className="font-medium text-gray-900 text-sm">OEM-Zulieferer</div>
|
|
<div className="text-xs text-gray-500">Liefern Komponenten an andere Hersteller</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
{mb.criticalSectorClients && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-3">
|
|
Kritische Sektoren Ihrer Kunden
|
|
</label>
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
|
|
{Object.entries(CRITICAL_SECTOR_LABELS).map(([value, label]) => (
|
|
<button
|
|
key={value}
|
|
type="button"
|
|
onClick={() => toggleCriticalSector(value as CriticalSector)}
|
|
className={`px-3 py-2 rounded-lg border text-sm transition-all ${
|
|
mb.criticalSectors.includes(value as CriticalSector)
|
|
? 'border-red-400 bg-red-50 text-red-700'
|
|
: 'border-gray-200 hover:border-gray-300 text-gray-700'
|
|
}`}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<label className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
|
|
mb.ceMarkingRequired ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300'
|
|
}`}>
|
|
<input
|
|
type="checkbox"
|
|
checked={mb.ceMarkingRequired}
|
|
onChange={e => updateMB({ ceMarkingRequired: e.target.checked })}
|
|
className="mt-1 w-5 h-5 text-blue-600 rounded focus:ring-blue-500"
|
|
/>
|
|
<div>
|
|
<div className="font-medium text-gray-900 text-sm">CE-Kennzeichnung erforderlich</div>
|
|
<div className="text-xs text-gray-500">Produkt benoetigt CE-Zertifizierung</div>
|
|
</div>
|
|
</label>
|
|
|
|
<label className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
|
|
mb.existingCEProcess ? 'border-green-400 bg-green-50' : 'border-gray-200 hover:border-gray-300'
|
|
}`}>
|
|
<input
|
|
type="checkbox"
|
|
checked={mb.existingCEProcess}
|
|
onChange={e => updateMB({ existingCEProcess: e.target.checked })}
|
|
className="mt-1 w-5 h-5 text-green-600 rounded focus:ring-green-500"
|
|
/>
|
|
<div>
|
|
<div className="font-medium text-gray-900 text-sm">Bestehender CE-Prozess</div>
|
|
<div className="text-xs text-gray-500">Bereits ein CE-Verfahren etabliert</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
{mb.ceMarkingRequired && (
|
|
<label className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
|
|
mb.hasRiskAssessment ? 'border-green-400 bg-green-50' : 'border-red-400 bg-red-50'
|
|
}`}>
|
|
<input
|
|
type="checkbox"
|
|
checked={mb.hasRiskAssessment}
|
|
onChange={e => updateMB({ hasRiskAssessment: e.target.checked })}
|
|
className="mt-1 w-5 h-5 text-green-600 rounded focus:ring-green-500"
|
|
/>
|
|
<div>
|
|
<div className="font-medium text-gray-900 text-sm">Bestehende Risikobeurteilung</div>
|
|
<div className="text-xs text-gray-500">
|
|
{mb.hasRiskAssessment
|
|
? 'Risikobeurteilung vorhanden'
|
|
: 'Keine bestehende Risikobeurteilung - IACE hilft Ihnen dabei!'}
|
|
</div>
|
|
</div>
|
|
</label>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// COVERAGE ASSESSMENT COMPONENT
|
|
// =============================================================================
|
|
|
|
// =============================================================================
|
|
// GENERATE DOCUMENTS BUTTON
|
|
// =============================================================================
|
|
|
|
// =============================================================================
|
|
// MAIN COMPONENT
|
|
// =============================================================================
|
|
|
|
export default function CompanyProfilePage() {
|
|
const { state, dispatch, setCompanyProfile, goToNextStep, projectId } = useSDK()
|
|
const [currentStep, setCurrentStep] = useState(1)
|
|
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
|
|
const [isDeleting, setIsDeleting] = useState(false)
|
|
const [formData, setFormData] = useState<Partial<CompanyProfile>>({
|
|
companyName: '',
|
|
legalForm: undefined,
|
|
industry: [],
|
|
industryOther: '',
|
|
foundedYear: null,
|
|
businessModel: undefined,
|
|
offerings: [],
|
|
offeringUrls: {},
|
|
companySize: undefined,
|
|
employeeCount: '',
|
|
annualRevenue: '',
|
|
headquartersCountry: 'DE',
|
|
headquartersCountryOther: '',
|
|
headquartersStreet: '',
|
|
headquartersZip: '',
|
|
headquartersCity: '',
|
|
headquartersState: '',
|
|
hasInternationalLocations: false,
|
|
internationalCountries: [],
|
|
targetMarkets: [],
|
|
primaryJurisdiction: 'DE',
|
|
isDataController: true,
|
|
isDataProcessor: false,
|
|
dpoName: null,
|
|
dpoEmail: null,
|
|
legalContactName: null,
|
|
legalContactEmail: null,
|
|
isComplete: false,
|
|
completedAt: null,
|
|
})
|
|
|
|
const showMachineBuilderStep = isMachineBuilderIndustry(formData.industry || [])
|
|
const wizardSteps = getWizardSteps(formData.industry || [])
|
|
const totalSteps = wizardSteps.length
|
|
const lastStep = wizardSteps[wizardSteps.length - 1].id
|
|
|
|
// API URL helper — includes project_id if available
|
|
const profileApiUrl = (extra?: string) => {
|
|
const params = new URLSearchParams()
|
|
if (projectId) params.set('project_id', projectId)
|
|
const qs = params.toString()
|
|
const base = '/api/sdk/v1/company-profile' + (extra || '')
|
|
return qs ? `${base}?${qs}` : base
|
|
}
|
|
|
|
// Load existing profile: first try backend, then SDK state as fallback
|
|
useEffect(() => {
|
|
let cancelled = false
|
|
|
|
async function loadFromBackend() {
|
|
try {
|
|
const apiUrl = '/api/sdk/v1/company-profile' + (projectId ? `?project_id=${encodeURIComponent(projectId)}` : '')
|
|
const response = await fetch(apiUrl)
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
if (data && !cancelled) {
|
|
const backendProfile: Partial<CompanyProfile> = {
|
|
companyName: data.company_name || '',
|
|
legalForm: data.legal_form || undefined,
|
|
industry: Array.isArray(data.industry) ? data.industry : (data.industry ? [data.industry] : []),
|
|
industryOther: data.industry_other || '',
|
|
foundedYear: data.founded_year || undefined,
|
|
businessModel: data.business_model || undefined,
|
|
offerings: data.offerings || [],
|
|
offeringUrls: data.offering_urls || {},
|
|
companySize: data.company_size || undefined,
|
|
employeeCount: data.employee_count || '',
|
|
annualRevenue: data.annual_revenue || '',
|
|
headquartersCountry: data.headquarters_country || 'DE',
|
|
headquartersCountryOther: data.headquarters_country_other || '',
|
|
headquartersStreet: data.headquarters_street || '',
|
|
headquartersZip: data.headquarters_zip || '',
|
|
headquartersCity: data.headquarters_city || '',
|
|
headquartersState: data.headquarters_state || '',
|
|
hasInternationalLocations: data.has_international_locations || false,
|
|
internationalCountries: data.international_countries || [],
|
|
targetMarkets: data.target_markets || [],
|
|
primaryJurisdiction: data.primary_jurisdiction || 'DE',
|
|
isDataController: data.is_data_controller ?? true,
|
|
isDataProcessor: data.is_data_processor ?? false,
|
|
dpoName: data.dpo_name || '',
|
|
dpoEmail: data.dpo_email || '',
|
|
isComplete: data.is_complete || false,
|
|
// Phase 2 extended fields
|
|
processingSystems: data.processing_systems || [],
|
|
aiSystems: data.ai_systems || [],
|
|
technicalContacts: data.technical_contacts || [],
|
|
existingCertifications: data.existing_certifications || [],
|
|
targetCertifications: data.target_certifications || [],
|
|
targetCertificationOther: data.target_certification_other || '',
|
|
reviewCycleMonths: data.review_cycle_months || 12,
|
|
repos: data.repos || [],
|
|
documentSources: data.document_sources || [],
|
|
} as any
|
|
setFormData(backendProfile)
|
|
setCompanyProfile(backendProfile as CompanyProfile)
|
|
if (backendProfile.isComplete) {
|
|
setCurrentStep(99)
|
|
dispatch({ type: 'COMPLETE_STEP', payload: 'company-profile' })
|
|
}
|
|
return
|
|
}
|
|
}
|
|
} catch {
|
|
// Backend not available, fall through to SDK state
|
|
}
|
|
|
|
// Fallback: use SDK state
|
|
if (!cancelled && state.companyProfile) {
|
|
setFormData(state.companyProfile)
|
|
if (state.companyProfile.isComplete) {
|
|
setCurrentStep(99)
|
|
}
|
|
}
|
|
}
|
|
|
|
loadFromBackend()
|
|
|
|
return () => { cancelled = true }
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [projectId])
|
|
|
|
const updateFormData = (updates: Partial<CompanyProfile>) => {
|
|
setFormData(prev => ({ ...prev, ...updates }))
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Auto-save: sync formData to SDK context (debounced) so data survives navigation.
|
|
// This mirrors the pattern used by compliance-scope/page.tsx.
|
|
// ---------------------------------------------------------------------------
|
|
const autoSaveRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
|
const initialLoadDone = useRef(false)
|
|
|
|
useEffect(() => {
|
|
// Skip the initial load — only auto-save after user has started editing
|
|
if (!initialLoadDone.current) {
|
|
// Mark initial load done after first formData update (from backend or SDK state)
|
|
if (formData.companyName !== undefined) {
|
|
initialLoadDone.current = true
|
|
}
|
|
return
|
|
}
|
|
|
|
// Don't auto-save drafts if profile is already completed (step 99)
|
|
if (currentStep === 99) return
|
|
|
|
// Debounce: sync to SDK context after 500ms of inactivity
|
|
if (autoSaveRef.current) clearTimeout(autoSaveRef.current)
|
|
autoSaveRef.current = setTimeout(() => {
|
|
// Only sync if there's meaningful data (not just defaults)
|
|
const hasData = formData.companyName || (formData.industry && formData.industry.length > 0)
|
|
if (hasData) {
|
|
setCompanyProfile({ ...formData, isComplete: false, completedAt: null } as CompanyProfile)
|
|
}
|
|
}, 500)
|
|
|
|
return () => {
|
|
if (autoSaveRef.current) clearTimeout(autoSaveRef.current)
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [formData, currentStep])
|
|
|
|
// Shared payload builder for draft saves and final save (DRY)
|
|
const buildProfilePayload = (isComplete: boolean) => ({
|
|
project_id: projectId || null,
|
|
company_name: formData.companyName || '',
|
|
legal_form: formData.legalForm || 'GmbH',
|
|
industry: formData.industry || [],
|
|
industry_other: formData.industryOther || '',
|
|
founded_year: formData.foundedYear || null,
|
|
business_model: formData.businessModel || 'B2B',
|
|
offerings: formData.offerings || [],
|
|
offering_urls: formData.offeringUrls || {},
|
|
company_size: formData.companySize || 'small',
|
|
employee_count: formData.employeeCount || '',
|
|
annual_revenue: formData.annualRevenue || '',
|
|
headquarters_country: formData.headquartersCountry || 'DE',
|
|
headquarters_country_other: formData.headquartersCountryOther || '',
|
|
headquarters_street: formData.headquartersStreet || '',
|
|
headquarters_zip: formData.headquartersZip || '',
|
|
headquarters_city: formData.headquartersCity || '',
|
|
headquarters_state: formData.headquartersState || '',
|
|
has_international_locations: formData.hasInternationalLocations || false,
|
|
international_countries: formData.internationalCountries || [],
|
|
target_markets: formData.targetMarkets || [],
|
|
primary_jurisdiction: formData.primaryJurisdiction || 'DE',
|
|
is_data_controller: formData.isDataController ?? true,
|
|
is_data_processor: formData.isDataProcessor ?? false,
|
|
dpo_name: formData.dpoName || '',
|
|
dpo_email: formData.dpoEmail || '',
|
|
is_complete: isComplete,
|
|
// Phase 2 extended fields
|
|
processing_systems: (formData as any).processingSystems || [],
|
|
ai_systems: (formData as any).aiSystems || [],
|
|
technical_contacts: (formData as any).technicalContacts || [],
|
|
existing_certifications: (formData as any).existingCertifications || [],
|
|
target_certifications: (formData as any).targetCertifications || [],
|
|
target_certification_other: (formData as any).targetCertificationOther || '',
|
|
review_cycle_months: (formData as any).reviewCycleMonths || 12,
|
|
repos: (formData as any).repos || [],
|
|
document_sources: (formData as any).documentSources || [],
|
|
// Machine builder fields (if applicable)
|
|
...(formData.machineBuilder ? {
|
|
machine_builder: {
|
|
product_types: formData.machineBuilder.productTypes || [],
|
|
product_description: formData.machineBuilder.productDescription || '',
|
|
product_pride: formData.machineBuilder.productPride || '',
|
|
contains_software: formData.machineBuilder.containsSoftware || false,
|
|
contains_firmware: formData.machineBuilder.containsFirmware || false,
|
|
contains_ai: formData.machineBuilder.containsAI || false,
|
|
ai_integration_type: formData.machineBuilder.aiIntegrationType || [],
|
|
has_safety_function: formData.machineBuilder.hasSafetyFunction || false,
|
|
safety_function_description: formData.machineBuilder.safetyFunctionDescription || '',
|
|
autonomous_behavior: formData.machineBuilder.autonomousBehavior || false,
|
|
human_oversight_level: formData.machineBuilder.humanOversightLevel || 'full',
|
|
is_networked: formData.machineBuilder.isNetworked || false,
|
|
has_remote_access: formData.machineBuilder.hasRemoteAccess || false,
|
|
has_ota_updates: formData.machineBuilder.hasOTAUpdates || false,
|
|
update_mechanism: formData.machineBuilder.updateMechanism || '',
|
|
export_markets: formData.machineBuilder.exportMarkets || [],
|
|
critical_sector_clients: formData.machineBuilder.criticalSectorClients || false,
|
|
critical_sectors: formData.machineBuilder.criticalSectors || [],
|
|
oem_clients: formData.machineBuilder.oemClients || false,
|
|
ce_marking_required: formData.machineBuilder.ceMarkingRequired || false,
|
|
existing_ce_process: formData.machineBuilder.existingCEProcess || false,
|
|
has_risk_assessment: formData.machineBuilder.hasRiskAssessment || false,
|
|
},
|
|
} : {}),
|
|
})
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Auto-save draft to backend (debounced, 2s after last change)
|
|
// ---------------------------------------------------------------------------
|
|
const backendAutoSaveRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
|
|
|
useEffect(() => {
|
|
if (!initialLoadDone.current) return
|
|
|
|
// Don't auto-save drafts if profile is already completed
|
|
if (currentStep === 99) return
|
|
|
|
const hasData = formData.companyName || (formData.industry && formData.industry.length > 0)
|
|
if (!hasData) return
|
|
|
|
if (backendAutoSaveRef.current) clearTimeout(backendAutoSaveRef.current)
|
|
backendAutoSaveRef.current = setTimeout(async () => {
|
|
try {
|
|
await fetch(profileApiUrl(), {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(buildProfilePayload(false)),
|
|
})
|
|
setDraftSaveStatus('saved')
|
|
if (draftSaveTimerRef.current) clearTimeout(draftSaveTimerRef.current)
|
|
draftSaveTimerRef.current = setTimeout(() => setDraftSaveStatus('idle'), 3000)
|
|
} catch {
|
|
// Silent fail for auto-save — user can still manually save via Next
|
|
}
|
|
}, 2000)
|
|
|
|
return () => {
|
|
if (backendAutoSaveRef.current) clearTimeout(backendAutoSaveRef.current)
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [formData, currentStep])
|
|
|
|
const [draftSaveStatus, setDraftSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle')
|
|
const draftSaveTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
|
|
|
|
const saveProfileDraft = async () => {
|
|
setDraftSaveStatus('saving')
|
|
try {
|
|
await fetch(profileApiUrl(), {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(buildProfilePayload(false)),
|
|
})
|
|
// Sync draft to Redux so it persists across navigation
|
|
setCompanyProfile({ ...formData, isComplete: false, completedAt: null } as CompanyProfile)
|
|
setDraftSaveStatus('saved')
|
|
// Reset status after 3 seconds
|
|
if (draftSaveTimerRef.current) clearTimeout(draftSaveTimerRef.current)
|
|
draftSaveTimerRef.current = setTimeout(() => setDraftSaveStatus('idle'), 3000)
|
|
} catch (err) {
|
|
console.error('Draft save failed:', err)
|
|
setDraftSaveStatus('error')
|
|
if (draftSaveTimerRef.current) clearTimeout(draftSaveTimerRef.current)
|
|
draftSaveTimerRef.current = setTimeout(() => setDraftSaveStatus('idle'), 5000)
|
|
}
|
|
}
|
|
|
|
const handleNext = () => {
|
|
if (currentStep < lastStep) {
|
|
// Skip step 7 if not a machine builder
|
|
const nextStep = currentStep + 1
|
|
if (nextStep === 7 && !showMachineBuilderStep) {
|
|
// Complete profile (was step 8, last step for non-machine-builders)
|
|
completeAndSaveProfile()
|
|
return
|
|
}
|
|
saveProfileDraft()
|
|
setCurrentStep(nextStep)
|
|
} else {
|
|
// Complete profile
|
|
completeAndSaveProfile()
|
|
}
|
|
}
|
|
|
|
const completeAndSaveProfile = async () => {
|
|
// Cancel any pending auto-save timers to prevent them from overwriting isComplete
|
|
if (autoSaveRef.current) clearTimeout(autoSaveRef.current)
|
|
if (backendAutoSaveRef.current) clearTimeout(backendAutoSaveRef.current)
|
|
|
|
const completeProfile: CompanyProfile = {
|
|
...formData,
|
|
isComplete: true,
|
|
completedAt: new Date(),
|
|
} as CompanyProfile
|
|
|
|
// Persist to backend FIRST (with isComplete=true)
|
|
try {
|
|
await fetch(profileApiUrl(), {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(buildProfilePayload(true)),
|
|
})
|
|
} catch (err) {
|
|
console.error('Failed to save company profile to backend:', err)
|
|
}
|
|
|
|
// Then update SDK context (after backend is done, no race condition)
|
|
setCompanyProfile(completeProfile)
|
|
dispatch({ type: 'COMPLETE_STEP', payload: 'company-profile' })
|
|
dispatch({ type: 'SET_STATE', payload: { projectVersion: (state.projectVersion || 0) + 1 } })
|
|
|
|
setCurrentStep(99) // Show summary
|
|
}
|
|
|
|
const handleBack = () => {
|
|
if (currentStep > 1) {
|
|
saveProfileDraft()
|
|
setCurrentStep(prev => prev - 1)
|
|
}
|
|
}
|
|
|
|
const handleDeleteProfile = async () => {
|
|
setIsDeleting(true)
|
|
try {
|
|
const response = await fetch(profileApiUrl(), {
|
|
method: 'DELETE',
|
|
})
|
|
if (response.ok) {
|
|
// Reset form and SDK state
|
|
setFormData({
|
|
companyName: '',
|
|
legalForm: undefined,
|
|
industry: [],
|
|
industryOther: '',
|
|
foundedYear: null,
|
|
businessModel: undefined,
|
|
offerings: [],
|
|
offeringUrls: {},
|
|
companySize: undefined,
|
|
employeeCount: '',
|
|
annualRevenue: '',
|
|
headquartersCountry: 'DE',
|
|
headquartersCity: '',
|
|
hasInternationalLocations: false,
|
|
internationalCountries: [],
|
|
targetMarkets: [],
|
|
primaryJurisdiction: 'DE',
|
|
isDataController: true,
|
|
isDataProcessor: false,
|
|
dpoName: null,
|
|
dpoEmail: null,
|
|
legalContactName: null,
|
|
legalContactEmail: null,
|
|
isComplete: false,
|
|
completedAt: null,
|
|
})
|
|
setCurrentStep(1)
|
|
dispatch({ type: 'SET_STATE', payload: { companyProfile: undefined } })
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to delete company profile:', err)
|
|
} finally {
|
|
setIsDeleting(false)
|
|
setShowDeleteConfirm(false)
|
|
}
|
|
}
|
|
|
|
const canProceed = () => {
|
|
switch (currentStep) {
|
|
case 1:
|
|
return formData.companyName && formData.legalForm
|
|
case 2:
|
|
return formData.businessModel && (formData.offerings?.length || 0) > 0
|
|
case 3:
|
|
return formData.companySize
|
|
case 4:
|
|
return formData.headquartersCountry && (formData.targetMarkets?.length || 0) > 0
|
|
case 5:
|
|
return true
|
|
case 6:
|
|
return true // Legal framework step is optional
|
|
case 7:
|
|
// Machine builder step: require at least product description
|
|
return (formData.machineBuilder?.productDescription?.length || 0) > 0
|
|
default:
|
|
return false
|
|
}
|
|
}
|
|
|
|
const isLastStep = currentStep === lastStep || (currentStep === 6 && !showMachineBuilderStep)
|
|
|
|
// =========================================================================
|
|
// SUMMARY VIEW (Step 99) — shown after profile completion
|
|
// =========================================================================
|
|
if (currentStep === 99) {
|
|
const summaryItems = [
|
|
{ label: 'Firmenname', value: formData.companyName },
|
|
{ label: 'Rechtsform', value: formData.legalForm ? LEGAL_FORM_LABELS[formData.legalForm] : undefined },
|
|
{ label: 'Branche', value: formData.industry?.join(', ') },
|
|
{ label: 'Geschaeftsmodell', value: formData.businessModel ? BUSINESS_MODEL_LABELS[formData.businessModel]?.short : undefined },
|
|
{ label: 'Unternehmensgroesse', value: formData.companySize ? COMPANY_SIZE_LABELS[formData.companySize] : undefined },
|
|
{ label: 'Mitarbeiter', value: formData.employeeCount },
|
|
{ label: 'Hauptsitz', value: [formData.headquartersZip, formData.headquartersCity, formData.headquartersCountry === 'DE' ? 'Deutschland' : formData.headquartersCountry].filter(Boolean).join(', ') },
|
|
{ label: 'Zielmaerkte', value: formData.targetMarkets?.map(m => TARGET_MARKET_LABELS[m] || m).join(', ') },
|
|
{ label: 'Verantwortlicher', value: formData.isDataController ? 'Ja' : 'Nein' },
|
|
{ label: 'Auftragsverarbeiter', value: formData.isDataProcessor ? 'Ja' : 'Nein' },
|
|
{ label: 'DSB', value: formData.dpoName || 'Nicht angegeben' },
|
|
].filter(item => item.value && item.value.length > 0)
|
|
|
|
const missingFields: string[] = []
|
|
if (!formData.companyName) missingFields.push('Firmenname')
|
|
if (!formData.legalForm) missingFields.push('Rechtsform')
|
|
if (!formData.industry || formData.industry.length === 0) missingFields.push('Branche')
|
|
if (!formData.businessModel) missingFields.push('Geschaeftsmodell')
|
|
if (!formData.companySize) missingFields.push('Unternehmensgroesse')
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 py-8">
|
|
<div className="max-w-4xl mx-auto px-4">
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900">Unternehmensprofil</h1>
|
|
</div>
|
|
|
|
{/* Success Banner */}
|
|
<div className={`rounded-xl border-2 p-6 mb-6 ${
|
|
formData.isComplete
|
|
? 'bg-green-50 border-green-300'
|
|
: 'bg-yellow-50 border-yellow-300'
|
|
}`}>
|
|
<div className="flex items-start gap-4">
|
|
<div className={`flex-shrink-0 w-12 h-12 rounded-full flex items-center justify-center ${
|
|
formData.isComplete ? 'bg-green-200' : 'bg-yellow-200'
|
|
}`}>
|
|
<span className="text-2xl">{formData.isComplete ? '\u2713' : '!'}</span>
|
|
</div>
|
|
<div>
|
|
<h2 className={`text-xl font-bold ${formData.isComplete ? 'text-green-800' : 'text-yellow-800'}`}>
|
|
{formData.isComplete
|
|
? 'Profil erfolgreich abgeschlossen'
|
|
: 'Profil unvollstaendig'
|
|
}
|
|
</h2>
|
|
<p className={`mt-1 ${formData.isComplete ? 'text-green-700' : 'text-yellow-700'}`}>
|
|
{formData.isComplete
|
|
? 'Alle Angaben wurden gespeichert. Sie koennen jetzt mit der Scope-Analyse fortfahren.'
|
|
: `Es fehlen noch Angaben: ${missingFields.join(', ')}.`
|
|
}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Profile Summary */}
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6 mb-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">Zusammenfassung</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{summaryItems.map(item => (
|
|
<div key={item.label} className="flex flex-col">
|
|
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">{item.label}</span>
|
|
<span className="text-sm text-gray-900 mt-0.5">{item.value}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex justify-between items-center">
|
|
<button
|
|
onClick={() => setCurrentStep(1)}
|
|
className="px-6 py-3 text-gray-600 hover:text-gray-900 border border-gray-300 rounded-lg hover:bg-gray-50"
|
|
>
|
|
Profil bearbeiten
|
|
</button>
|
|
|
|
{formData.isComplete ? (
|
|
<button
|
|
onClick={() => goToNextStep()}
|
|
className="px-8 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 font-medium"
|
|
>
|
|
Weiter zu Scope
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={() => setCurrentStep(1)}
|
|
className="px-8 py-3 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 font-medium"
|
|
>
|
|
Fehlende Angaben ergaenzen
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =========================================================================
|
|
// WIZARD VIEW (Steps 1-7)
|
|
// =========================================================================
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 py-8">
|
|
<div className="max-w-6xl mx-auto px-4">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900">Unternehmensprofil</h1>
|
|
<p className="text-gray-600 mt-2">
|
|
Helfen Sie uns, Ihr Unternehmen zu verstehen, damit wir die relevanten Regulierungen
|
|
identifizieren können.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Progress Steps */}
|
|
<div className="mb-8">
|
|
<div className="flex items-center justify-between">
|
|
{wizardSteps.map((step, index) => (
|
|
<React.Fragment key={step.id}>
|
|
<div className="flex items-center">
|
|
<div
|
|
className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium ${
|
|
step.id < currentStep
|
|
? 'bg-purple-600 text-white'
|
|
: step.id === currentStep
|
|
? 'bg-purple-100 text-purple-600 border-2 border-purple-600'
|
|
: 'bg-gray-100 text-gray-400'
|
|
}`}
|
|
>
|
|
{step.id < currentStep ? (
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
) : (
|
|
step.id
|
|
)}
|
|
</div>
|
|
<div className="ml-3 hidden sm:block">
|
|
<div
|
|
className={`text-sm font-medium ${
|
|
step.id <= currentStep ? 'text-gray-900' : 'text-gray-400'
|
|
}`}
|
|
>
|
|
{step.name}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{index < wizardSteps.length - 1 && (
|
|
<div
|
|
className={`flex-1 h-0.5 mx-4 ${
|
|
step.id < currentStep ? 'bg-purple-600' : 'bg-gray-200'
|
|
}`}
|
|
/>
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div>
|
|
{/* Form */}
|
|
<div>
|
|
<div className="bg-white rounded-xl border border-gray-200 p-8">
|
|
<div className="mb-6">
|
|
<h2 className="text-xl font-semibold text-gray-900">
|
|
{(wizardSteps.find(s => s.id === currentStep) || wizardSteps[0]).name}
|
|
</h2>
|
|
<p className="text-gray-500">{(wizardSteps.find(s => s.id === currentStep) || wizardSteps[0]).description}</p>
|
|
{STEP_EXPLANATIONS[currentStep] && (
|
|
<p className="text-sm text-blue-600 mt-2">{STEP_EXPLANATIONS[currentStep]}</p>
|
|
)}
|
|
</div>
|
|
|
|
{currentStep === 1 && <StepBasicInfo data={formData} onChange={updateFormData} />}
|
|
{currentStep === 2 && <StepBusinessModel data={formData} onChange={updateFormData} />}
|
|
{currentStep === 3 && <StepCompanySize data={formData} onChange={updateFormData} />}
|
|
{currentStep === 4 && <StepLocations data={formData} onChange={updateFormData} />}
|
|
{currentStep === 5 && <StepDataProtection data={formData} onChange={updateFormData} />}
|
|
{currentStep === 6 && <StepLegalFramework data={formData} onChange={updateFormData} />}
|
|
{currentStep === 7 && showMachineBuilderStep && <StepMachineBuilder data={formData} onChange={updateFormData} />}
|
|
|
|
{/* Navigation */}
|
|
<div className="flex justify-between items-center mt-8 pt-6 border-t border-gray-200">
|
|
<button
|
|
onClick={handleBack}
|
|
disabled={currentStep === 1}
|
|
className="px-6 py-3 text-gray-600 hover:text-gray-900 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
Zurück
|
|
</button>
|
|
{/* Draft save status */}
|
|
{draftSaveStatus !== 'idle' && (
|
|
<span className={`text-xs px-3 py-1 rounded-full ${
|
|
draftSaveStatus === 'saving' ? 'text-gray-500 bg-gray-100' :
|
|
draftSaveStatus === 'saved' ? 'text-green-600 bg-green-50' :
|
|
'text-red-600 bg-red-50'
|
|
}`}>
|
|
{draftSaveStatus === 'saving' && 'Speichern...'}
|
|
{draftSaveStatus === 'saved' && '✓ Gespeichert'}
|
|
{draftSaveStatus === 'error' && 'Speichern fehlgeschlagen'}
|
|
</span>
|
|
)}
|
|
<button
|
|
onClick={handleNext}
|
|
disabled={!canProceed()}
|
|
className="px-8 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{isLastStep ? 'Profil speichern & weiter' : 'Weiter'}
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* Delete Confirmation Modal */}
|
|
{showDeleteConfirm && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
|
<div className="bg-white rounded-xl p-6 w-full max-w-md shadow-2xl">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">Profil löschen?</h3>
|
|
<p className="text-sm text-gray-600 mb-6">
|
|
Alle gespeicherten Unternehmensdaten werden unwiderruflich gelöscht (DSGVO Art. 17).
|
|
Diese Aktion kann nicht rückgängig gemacht werden.
|
|
</p>
|
|
<div className="flex justify-end gap-3">
|
|
<button
|
|
onClick={() => setShowDeleteConfirm(false)}
|
|
className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
onClick={handleDeleteProfile}
|
|
disabled={isDeleting}
|
|
className="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50"
|
|
>
|
|
{isDeleting ? 'Lösche...' : 'Endgültig löschen'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|