}
+ {questions.map(q => {
+ const deptConfig = DEPARTMENT_DATA_CATEGORIES[q.id]
+ const isDeptQuestion = q.type === 'boolean' && q.step === 2 && deptConfig
+ const isActive = answers[q.id] === true
+ const categoriesKey = `${q.id}_categories`
+ const selectedCategories = (answers[categoriesKey] as string[] | undefined) || []
- {q.type === 'boolean' && (
-
-
-
+ // Initialize typical categories when dept is activated
+ const handleDeptToggle = (value: boolean) => {
+ const updated = { ...answers, [q.id]: value }
+ if (value && deptConfig && !answers[categoriesKey]) {
+ // Prefill typical categories
+ updated[categoriesKey] = deptConfig.categories
+ .filter(c => c.isTypical)
+ .map(c => c.id)
+ }
+ setAnswers(updated)
+ }
+
+ const handleCategoryToggle = (catId: string) => {
+ const current = (answers[categoriesKey] as string[] | undefined) || []
+ const updated = current.includes(catId)
+ ? current.filter(id => id !== catId)
+ : [...current, catId]
+ setAnswers({ ...answers, [categoriesKey]: updated })
+ }
+
+ // Expandable department tile (Step 2)
+ if (isDeptQuestion) {
+ const hasArt9Selected = deptConfig.categories
+ .filter(c => c.isArt9)
+ .some(c => selectedCategories.includes(c.id))
+
+ return (
+
+ {/* Header row with Ja/Nein */}
+
+
+
{deptConfig.icon}
+
+
{deptConfig.label}
+ {q.helpText &&
{q.helpText}
}
+
+
+
+
+
+
+
+
+ {/* Expandable categories panel */}
+ {isActive && (
+
+
+ Typische Datenkategorien
+
+
+ {deptConfig.categories.map(cat => {
+ const isChecked = selectedCategories.includes(cat.id)
+ return (
+
+ )
+ })}
+
+
+ {/* Art. 9 warning */}
+ {hasArt9Selected && (
+
+
+ Art. 9 DSGVO: Sie verarbeiten besondere Kategorien
+ personenbezogener Daten. Eine zusaetzliche Rechtsgrundlage nach Art. 9 Abs. 2 DSGVO ist
+ erforderlich (z.B. § 26 Abs. 3 BDSG fuer Beschaeftigtendaten).
+
+
+ )}
+
+ )}
- )}
+ )
+ }
- {q.type === 'single_choice' && q.options && (
-
- ))}
+ {q.type === 'number' && (
+
setAnswers({ ...answers, [q.id]: parseInt(e.target.value) || 0 })}
+ className="w-40 px-3 py-2 border border-gray-300 rounded-lg"
+ placeholder="Anzahl" />
+ )}
+
+ {q.type === 'text' && (
+
setAnswers({ ...answers, [q.id]: e.target.value })}
+ className="w-full px-3 py-2 border border-gray-300 rounded-lg" />
+ )}
+