Benjamin Admin
c5c168592b
Per project_sdk_module_attribution_matrix.md the Stufe-3 rollout is
prioritized by audit visibility. This batch covers Schritte 2-9 in one
sweep:
New reusable component:
components/sdk/LicenseModuleBanner.tsx — single-line license banner
placed at the top of an SDK module page. Renders rule pill (R1/R2/R3),
source label, descriptor and link to /sdk/licenses. Replaces the
copy-paste banner blocks I inlined in the earlier modules.
Integration points (per cluster):
Cluster B (DSGVO/EU-Recht, R1):
- vvt: existing "Vorlage" pill upgraded with R1 marker + tooltip
explaining Bundeslaender-DSGVO provenance
- dsfa: inline R1 banner citing DSGVO Art. 35
Cluster C (EU AI Act / CRA, R1):
- ai-act: inline R1 banner citing EU 2024/1689
- cra: inline R1 banner citing EU 2024/2847 + ENISA-Guidance
Cluster D (Mix R2/R3):
- isms: R3 banner + ISO/IEC 27001 reference disclaimer
- security-backlog: R2 banner with OWASP CC-BY-SA attribution
Cluster A (Eigenwerk, R3):
- tom-generator: R1 source (DSGVO Art. 32) + R3 own-work disclaimer
- audit-checklist: R3 banner for own audit methodology
- document-generator: own templates R3 + cited rights R1
Cluster E (Direct controls listing):
- catalog-manager: System/User tag upgraded with rule classification
- iace hazards: pattern_id pill upgraded with R3 + tooltip explaining
BreakPilot Pattern-Engine provenance
The 11-module sweep brings audit transparency to the modules a paying
customer encounters most often. Stufe 3 of the attribution renderer
is now actually visible across the platform — previously it shipped
only the reusable <SourceBadge> component without integration points.
Pre-existing TS errors (drafting-engine constraint-enforcer, dsfa
types tests) untouched — not in scope for this licensing rollout.
225 lines
9.6 KiB
TypeScript
225 lines
9.6 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { useTOMGenerator } from '@/lib/sdk/tom-generator'
|
|
import { TOM_GENERATOR_STEPS } from '@/lib/sdk/tom-generator/types'
|
|
import { LicenseModuleBanner } from '@/components/sdk/LicenseModuleBanner'
|
|
|
|
/**
|
|
* TOM Generator Landing Page
|
|
*
|
|
* Shows overview of the wizard and allows starting or resuming.
|
|
*/
|
|
export default function TOMGeneratorPage() {
|
|
const router = useRouter()
|
|
const { state, resetState } = useTOMGenerator()
|
|
|
|
// Calculate progress
|
|
const completedSteps = state.steps.filter((s) => s.completed).length
|
|
const totalSteps = state.steps.length
|
|
const progressPercent = totalSteps > 0 ? Math.round((completedSteps / totalSteps) * 100) : 0
|
|
|
|
// Determine the current step URL
|
|
const currentStepConfig = TOM_GENERATOR_STEPS.find((s) => s.id === state.currentStep)
|
|
const currentStepUrl = currentStepConfig?.url || '/sdk/tom-generator/scope'
|
|
|
|
const handleStartNew = () => {
|
|
resetState()
|
|
router.push('/sdk/tom-generator/scope')
|
|
}
|
|
|
|
const handleResume = () => {
|
|
router.push(currentStepUrl)
|
|
}
|
|
|
|
const hasProgress = completedSteps > 0
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto px-4 py-8">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900">TOM Generator</h1>
|
|
<p className="mt-2 text-gray-600">
|
|
Leiten Sie Ihre Technischen und Organisatorischen Massnahmen (TOMs) nach Art. 32 DSGVO
|
|
systematisch ab und dokumentieren Sie diese.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mb-6">
|
|
<LicenseModuleBanner
|
|
rule={1}
|
|
sourceLabel="DSGVO Art. 32 (EU 2016/679) — TOM-Anforderungen"
|
|
detail="Generator-Logik und Vorlagen sind BreakPilot-Eigenwerk (R3); zitierte Rechtsquelle EU_LAW (R1)."
|
|
/>
|
|
</div>
|
|
|
|
{/* Progress Card */}
|
|
{hasProgress && (
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6 mb-8">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-lg font-semibold text-gray-900">Ihr Fortschritt</h2>
|
|
<span className="text-sm text-gray-500">
|
|
{completedSteps} von {totalSteps} Schritten abgeschlossen
|
|
</span>
|
|
</div>
|
|
|
|
{/* Progress Bar */}
|
|
<div className="h-3 bg-gray-100 rounded-full overflow-hidden mb-4">
|
|
<div
|
|
className="h-full bg-gradient-to-r from-blue-500 to-purple-500 transition-all duration-500"
|
|
style={{ width: `${progressPercent}%` }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Steps Overview */}
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
|
{TOM_GENERATOR_STEPS.map((step, index) => {
|
|
const stepState = state.steps.find((s) => s.id === step.id)
|
|
const isCompleted = stepState?.completed
|
|
const isCurrent = state.currentStep === step.id
|
|
|
|
return (
|
|
<button
|
|
key={step.id}
|
|
onClick={() => router.push(step.url)}
|
|
className={`flex items-center gap-3 p-3 rounded-lg border transition-all ${
|
|
isCompleted
|
|
? 'bg-green-50 border-green-200 text-green-700'
|
|
: isCurrent
|
|
? 'bg-blue-50 border-blue-200 text-blue-700'
|
|
: 'bg-gray-50 border-gray-200 text-gray-500 hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
<div
|
|
className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${
|
|
isCompleted
|
|
? 'bg-green-500 text-white'
|
|
: isCurrent
|
|
? 'bg-blue-500 text-white'
|
|
: 'bg-gray-200 text-gray-500'
|
|
}`}
|
|
>
|
|
{isCompleted ? (
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
) : (
|
|
index + 1
|
|
)}
|
|
</div>
|
|
<span className="text-sm font-medium">{step.name}</span>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex gap-3 mt-6">
|
|
<button
|
|
onClick={handleResume}
|
|
className="flex-1 px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
|
|
>
|
|
Fortfahren
|
|
</button>
|
|
<button
|
|
onClick={handleStartNew}
|
|
className="px-4 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
|
|
>
|
|
Neu starten
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Introduction Card */}
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6 mb-8">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">Was ist der TOM Generator?</h2>
|
|
<p className="text-gray-600 mb-4">
|
|
Der TOM Generator fuehrt Sie in 6 Schritten durch die Erstellung Ihrer DSGVO-konformen
|
|
Technischen und Organisatorischen Massnahmen:
|
|
</p>
|
|
|
|
<div className="space-y-3">
|
|
{TOM_GENERATOR_STEPS.map((step, index) => (
|
|
<div key={step.id} className="flex items-start gap-3">
|
|
<div className="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-sm font-medium flex-shrink-0">
|
|
{index + 1}
|
|
</div>
|
|
<div>
|
|
<div className="font-medium text-gray-900">{step.name}</div>
|
|
<div className="text-sm text-gray-500">{step.description.de}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{!hasProgress && (
|
|
<button
|
|
onClick={handleStartNew}
|
|
className="w-full mt-6 px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
|
|
>
|
|
Jetzt starten
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Features */}
|
|
<div className="grid md:grid-cols-3 gap-4">
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<div className="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center mb-4">
|
|
<svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="font-semibold text-gray-900 mb-2">60+ Kontrollen</h3>
|
|
<p className="text-sm text-gray-500">
|
|
Vordefinierte Kontrollen mit Mapping zu DSGVO, ISO 27001 und BSI-Grundschutz
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<div className="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center mb-4">
|
|
<svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="font-semibold text-gray-900 mb-2">Lueckenanalyse</h3>
|
|
<p className="text-sm text-gray-500">
|
|
Automatische Identifikation fehlender Massnahmen mit Handlungsempfehlungen
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center mb-4">
|
|
<svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="font-semibold text-gray-900 mb-2">Export</h3>
|
|
<p className="text-sm text-gray-500">
|
|
Generieren Sie Ihre TOM-Dokumentation als Word, PDF oder strukturiertes JSON
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Legal Note */}
|
|
<div className="mt-8 p-4 bg-blue-50 rounded-lg border border-blue-200">
|
|
<div className="flex gap-3">
|
|
<svg className="w-5 h-5 text-blue-600 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>
|
|
<div>
|
|
<div className="font-medium text-blue-900">Hinweis zur Rechtsgrundlage</div>
|
|
<p className="text-sm text-blue-700 mt-1">
|
|
Die generierten TOMs basieren auf Art. 32 DSGVO. Die Auswahl der konkreten Massnahmen
|
|
sollte immer unter Beruecksichtigung des Stands der Technik, der Implementierungskosten
|
|
und der Art, des Umfangs und der Zwecke der Verarbeitung erfolgen.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|