fix(admin-v2): Restore complete admin-v2 application
The admin-v2 application was incomplete in the repository. This commit restores all missing components: - Admin pages (76 pages): dashboard, ai, compliance, dsgvo, education, infrastructure, communication, development, onboarding, rbac - SDK pages (45 pages): tom, dsfa, vvt, loeschfristen, einwilligungen, vendor-compliance, tom-generator, dsr, and more - Developer portal (25 pages): API docs, SDK guides, frameworks - All components, lib files, hooks, and types - Updated package.json with all dependencies The issue was caused by incomplete initial repository state - the full admin-v2 codebase existed in backend/admin-v2 and docs-src/admin-v2 but was never fully synced to the main admin-v2 directory. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
BreakPilot Dev
227
admin-v2/app/(admin)/developers/guides/page.tsx
Normal file
227
admin-v2/app/(admin)/developers/guides/page.tsx
Normal file
@@ -0,0 +1,227 @@
|
||||
import Link from 'next/link'
|
||||
import { DevPortalLayout, InfoBox } from '@/components/developers/DevPortalLayout'
|
||||
|
||||
export default function GuidesPage() {
|
||||
return (
|
||||
<DevPortalLayout
|
||||
title="Entwickler-Guides"
|
||||
description="Schritt-fuer-Schritt Anleitungen fuer die SDK-Integration"
|
||||
>
|
||||
<h2>Workflow-Guides</h2>
|
||||
<p>
|
||||
Das AI Compliance SDK fuehrt durch einen strukturierten 19-Schritte-Workflow
|
||||
in zwei Phasen. Diese Guides erklaeren jeden Schritt im Detail.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
|
||||
<Link
|
||||
href="/developers/guides/phase1"
|
||||
className="block p-6 bg-blue-50 border border-blue-200 rounded-xl hover:border-blue-400 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 bg-blue-600 text-white rounded-xl flex items-center justify-center text-xl font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-blue-900">Phase 1: Assessment</h3>
|
||||
<p className="text-sm text-blue-600">8 Schritte</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-blue-800 text-sm">
|
||||
Use Case Workshop, System Screening, Module-Auswahl, Requirements,
|
||||
Controls, Evidence, Checkliste, Risk Matrix.
|
||||
</p>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/developers/guides/phase2"
|
||||
className="block p-6 bg-green-50 border border-green-200 rounded-xl hover:border-green-400 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 bg-green-600 text-white rounded-xl flex items-center justify-center text-xl font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-green-900">Phase 2: Dokumentation</h3>
|
||||
<p className="text-sm text-green-600">11 Schritte</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-green-800 text-sm">
|
||||
AI Act Klassifizierung, Pflichten, DSFA, TOMs, Loeschfristen,
|
||||
VVT, Rechtliche Vorlagen, Cookie Banner, DSR Portal.
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<h2>Workflow-Uebersicht</h2>
|
||||
<div className="my-6 not-prose">
|
||||
<div className="bg-slate-50 rounded-xl p-6 border border-slate-200">
|
||||
<h4 className="font-semibold mb-4 text-slate-900">Phase 1: Assessment (8 Schritte)</h4>
|
||||
<ol className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
|
||||
<li className="p-3 bg-white rounded-lg border border-slate-200">
|
||||
<span className="text-blue-600 font-mono">01</span>
|
||||
<p className="font-medium">Use Case Workshop</p>
|
||||
</li>
|
||||
<li className="p-3 bg-white rounded-lg border border-slate-200">
|
||||
<span className="text-blue-600 font-mono">02</span>
|
||||
<p className="font-medium">System Screening</p>
|
||||
</li>
|
||||
<li className="p-3 bg-white rounded-lg border border-slate-200">
|
||||
<span className="text-blue-600 font-mono">03</span>
|
||||
<p className="font-medium">Compliance Modules</p>
|
||||
</li>
|
||||
<li className="p-3 bg-white rounded-lg border border-slate-200">
|
||||
<span className="text-blue-600 font-mono">04</span>
|
||||
<p className="font-medium">Requirements</p>
|
||||
</li>
|
||||
<li className="p-3 bg-white rounded-lg border border-slate-200">
|
||||
<span className="text-blue-600 font-mono">05</span>
|
||||
<p className="font-medium">Controls</p>
|
||||
</li>
|
||||
<li className="p-3 bg-white rounded-lg border border-slate-200">
|
||||
<span className="text-blue-600 font-mono">06</span>
|
||||
<p className="font-medium">Evidence</p>
|
||||
</li>
|
||||
<li className="p-3 bg-white rounded-lg border border-slate-200">
|
||||
<span className="text-blue-600 font-mono">07</span>
|
||||
<p className="font-medium">Audit Checklist</p>
|
||||
</li>
|
||||
<li className="p-3 bg-white rounded-lg border border-slate-200">
|
||||
<span className="text-blue-600 font-mono">08</span>
|
||||
<p className="font-medium">Risk Matrix</p>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-50 rounded-xl p-6 border border-slate-200 mt-4">
|
||||
<h4 className="font-semibold mb-4 text-slate-900">Phase 2: Dokumentation (11 Schritte)</h4>
|
||||
<ol className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
|
||||
<li className="p-3 bg-white rounded-lg border border-slate-200">
|
||||
<span className="text-green-600 font-mono">09</span>
|
||||
<p className="font-medium">AI Act Klassifizierung</p>
|
||||
</li>
|
||||
<li className="p-3 bg-white rounded-lg border border-slate-200">
|
||||
<span className="text-green-600 font-mono">10</span>
|
||||
<p className="font-medium">Pflichtenuebersicht</p>
|
||||
</li>
|
||||
<li className="p-3 bg-white rounded-lg border border-slate-200">
|
||||
<span className="text-green-600 font-mono">11</span>
|
||||
<p className="font-medium">DSFA</p>
|
||||
</li>
|
||||
<li className="p-3 bg-white rounded-lg border border-slate-200">
|
||||
<span className="text-green-600 font-mono">12</span>
|
||||
<p className="font-medium">TOMs</p>
|
||||
</li>
|
||||
<li className="p-3 bg-white rounded-lg border border-slate-200">
|
||||
<span className="text-green-600 font-mono">13</span>
|
||||
<p className="font-medium">Loeschfristen</p>
|
||||
</li>
|
||||
<li className="p-3 bg-white rounded-lg border border-slate-200">
|
||||
<span className="text-green-600 font-mono">14</span>
|
||||
<p className="font-medium">VVT</p>
|
||||
</li>
|
||||
<li className="p-3 bg-white rounded-lg border border-slate-200">
|
||||
<span className="text-green-600 font-mono">15</span>
|
||||
<p className="font-medium">Rechtliche Vorlagen</p>
|
||||
</li>
|
||||
<li className="p-3 bg-white rounded-lg border border-slate-200">
|
||||
<span className="text-green-600 font-mono">16</span>
|
||||
<p className="font-medium">Cookie Banner</p>
|
||||
</li>
|
||||
<li className="p-3 bg-white rounded-lg border border-slate-200">
|
||||
<span className="text-green-600 font-mono">17</span>
|
||||
<p className="font-medium">Einwilligungen</p>
|
||||
</li>
|
||||
<li className="p-3 bg-white rounded-lg border border-slate-200">
|
||||
<span className="text-green-600 font-mono">18</span>
|
||||
<p className="font-medium">DSR Portal</p>
|
||||
</li>
|
||||
<li className="p-3 bg-white rounded-lg border border-slate-200">
|
||||
<span className="text-green-600 font-mono">19</span>
|
||||
<p className="font-medium">Escalations</p>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Checkpoints</h2>
|
||||
<p>
|
||||
Das SDK validiert den Fortschritt an definierten Checkpoints:
|
||||
</p>
|
||||
<div className="my-4 overflow-x-auto not-prose">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Checkpoint</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nach Schritt</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Validierung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200 text-sm">
|
||||
<tr>
|
||||
<td className="px-4 py-3 font-mono text-blue-600">CP-UC</td>
|
||||
<td className="px-4 py-3">Use Case Workshop</td>
|
||||
<td className="px-4 py-3 text-gray-600">Mind. 1 Use Case angelegt</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-3 font-mono text-blue-600">CP-SCREEN</td>
|
||||
<td className="px-4 py-3">System Screening</td>
|
||||
<td className="px-4 py-3 text-gray-600">Screening abgeschlossen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-3 font-mono text-blue-600">CP-CTRL</td>
|
||||
<td className="px-4 py-3">Controls</td>
|
||||
<td className="px-4 py-3 text-gray-600">Alle Requirements haben Controls</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-3 font-mono text-blue-600">CP-RISK</td>
|
||||
<td className="px-4 py-3">Risk Matrix</td>
|
||||
<td className="px-4 py-3 text-gray-600">Alle Risiken bewertet</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-3 font-mono text-green-600">CP-DSFA</td>
|
||||
<td className="px-4 py-3">DSFA</td>
|
||||
<td className="px-4 py-3 text-gray-600">DSFA generiert (falls erforderlich)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-3 font-mono text-green-600">CP-TOM</td>
|
||||
<td className="px-4 py-3">TOMs</td>
|
||||
<td className="px-4 py-3 text-gray-600">Mind. 10 TOMs definiert</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-3 font-mono text-green-600">CP-VVT</td>
|
||||
<td className="px-4 py-3">VVT</td>
|
||||
<td className="px-4 py-3 text-gray-600">VVT vollstaendig</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<InfoBox type="info" title="Checkpoint-Navigation">
|
||||
Nicht bestandene Checkpoints blockieren den Fortschritt zu spaetere Schritte.
|
||||
Verwenden Sie <code>validateCheckpoint()</code> um den Status zu pruefen.
|
||||
</InfoBox>
|
||||
|
||||
<h2>Best Practices</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Speichern Sie regelmaessig:</strong> Der State wird automatisch
|
||||
im localStorage gespeichert, aber aktivieren Sie Backend-Sync fuer
|
||||
persistente Speicherung.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Nutzen Sie die Command Bar:</strong> Cmd+K oeffnet schnelle
|
||||
Navigation, Export und RAG-Suche.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Arbeiten Sie Use-Case-zentriert:</strong> Bearbeiten Sie
|
||||
einen Use Case vollstaendig, bevor Sie zum naechsten wechseln.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Validieren Sie Checkpoints:</strong> Pruefen Sie vor dem
|
||||
Phasenwechsel, ob alle Checkpoints bestanden sind.
|
||||
</li>
|
||||
</ul>
|
||||
</DevPortalLayout>
|
||||
)
|
||||
}
|
||||
391
admin-v2/app/(admin)/developers/guides/phase1/page.tsx
Normal file
391
admin-v2/app/(admin)/developers/guides/phase1/page.tsx
Normal file
@@ -0,0 +1,391 @@
|
||||
import { DevPortalLayout, CodeBlock, InfoBox } from '@/components/developers/DevPortalLayout'
|
||||
|
||||
export default function Phase1GuidePage() {
|
||||
return (
|
||||
<DevPortalLayout
|
||||
title="Phase 1: Assessment Guide"
|
||||
description="Schritt-fuer-Schritt durch die Assessment-Phase"
|
||||
>
|
||||
<h2>Uebersicht Phase 1</h2>
|
||||
<p>
|
||||
Phase 1 umfasst die Erfassung und Bewertung Ihrer KI-Anwendungsfaelle.
|
||||
Am Ende haben Sie eine vollstaendige Risikoanalyse und wissen, welche
|
||||
Compliance-Dokumente Sie benoetigen.
|
||||
</p>
|
||||
|
||||
<div className="my-6 p-4 bg-blue-50 border border-blue-200 rounded-xl">
|
||||
<h3 className="text-lg font-semibold text-blue-900 mb-2">Phase 1 Schritte</h3>
|
||||
<ol className="list-decimal list-inside text-blue-800 space-y-1">
|
||||
<li>Use Case Workshop</li>
|
||||
<li>System Screening</li>
|
||||
<li>Compliance Modules</li>
|
||||
<li>Requirements</li>
|
||||
<li>Controls</li>
|
||||
<li>Evidence</li>
|
||||
<li>Audit Checklist</li>
|
||||
<li>Risk Matrix</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<h2>Schritt 1: Use Case Workshop</h2>
|
||||
<p>
|
||||
Erfassen Sie alle KI-Anwendungsfaelle in Ihrem Unternehmen.
|
||||
</p>
|
||||
|
||||
<h3>Code-Beispiel</h3>
|
||||
<CodeBlock language="typescript" filename="use-case-workshop.tsx">
|
||||
{`import { useSDK } from '@breakpilot/compliance-sdk'
|
||||
|
||||
function UseCaseForm() {
|
||||
const { updateUseCase, state } = useSDK()
|
||||
|
||||
const handleCreateUseCase = async () => {
|
||||
await updateUseCase({
|
||||
id: \`uc-\${Date.now()}\`,
|
||||
name: 'KI-gestuetzte Kundenanalyse',
|
||||
description: 'Analyse von Kundenverhalten mittels ML',
|
||||
category: 'Marketing',
|
||||
department: 'Marketing & Sales',
|
||||
dataTypes: ['Kundendaten', 'Verhaltensdaten', 'Transaktionen'],
|
||||
aiCapabilities: ['Profiling', 'Vorhersage'],
|
||||
stepsCompleted: 0,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Use Cases: {state.useCases.length}</h2>
|
||||
<button onClick={handleCreateUseCase}>
|
||||
Use Case hinzufuegen
|
||||
</button>
|
||||
|
||||
{state.useCases.map(uc => (
|
||||
<div key={uc.id}>
|
||||
<h3>{uc.name}</h3>
|
||||
<p>{uc.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}`}
|
||||
</CodeBlock>
|
||||
|
||||
<InfoBox type="info" title="Checkpoint CP-UC">
|
||||
Nach dem Use Case Workshop muss mindestens ein Use Case angelegt sein,
|
||||
um zum naechsten Schritt zu gelangen.
|
||||
</InfoBox>
|
||||
|
||||
<h2>Schritt 2: System Screening</h2>
|
||||
<p>
|
||||
Das Screening bewertet jeden Use Case hinsichtlich Datenschutz und AI Act.
|
||||
</p>
|
||||
|
||||
<h3>Code-Beispiel</h3>
|
||||
<CodeBlock language="typescript" filename="screening.tsx">
|
||||
{`import { useSDK } from '@breakpilot/compliance-sdk'
|
||||
|
||||
function ScreeningView() {
|
||||
const { state, dispatch } = useSDK()
|
||||
|
||||
const completeScreening = (useCaseId: string, result: ScreeningResult) => {
|
||||
dispatch({
|
||||
type: 'UPDATE_USE_CASE',
|
||||
payload: {
|
||||
id: useCaseId,
|
||||
screeningResult: result,
|
||||
// Ergebnis bestimmt weitere Pflichten
|
||||
assessmentResult: {
|
||||
riskLevel: result.aiActRisk,
|
||||
dsfaRequired: result.dsfaRequired,
|
||||
aiActClassification: result.aiActClassification,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// Screening-Fragen beantworten
|
||||
const screeningQuestions = [
|
||||
'Werden personenbezogene Daten verarbeitet?',
|
||||
'Erfolgt automatisierte Entscheidungsfindung?',
|
||||
'Werden besondere Datenkategorien verarbeitet?',
|
||||
'Erfolgt Profiling?',
|
||||
'Werden Daten in Drittlaender uebermittelt?',
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
{screeningQuestions.map((question, i) => (
|
||||
<label key={i} className="block">
|
||||
<input type="checkbox" />
|
||||
{question}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}`}
|
||||
</CodeBlock>
|
||||
|
||||
<h2>Schritt 3: Compliance Modules</h2>
|
||||
<p>
|
||||
Basierend auf dem Screening werden relevante Compliance-Module aktiviert.
|
||||
</p>
|
||||
|
||||
<div className="my-4 overflow-x-auto not-prose">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Modul</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Aktiviert wenn</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200 text-sm">
|
||||
<tr>
|
||||
<td className="px-4 py-3 font-medium">DSGVO Basis</td>
|
||||
<td className="px-4 py-3 text-gray-600">Immer (personenbezogene Daten)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-3 font-medium">DSFA</td>
|
||||
<td className="px-4 py-3 text-gray-600">Hohes Risiko, Profiling, Art. 9 Daten</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-3 font-medium">AI Act</td>
|
||||
<td className="px-4 py-3 text-gray-600">KI-basierte Entscheidungen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-3 font-medium">NIS2</td>
|
||||
<td className="px-4 py-3 text-gray-600">Kritische Infrastruktur</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2>Schritt 4: Requirements</h2>
|
||||
<p>
|
||||
Fuer jedes aktivierte Modul werden spezifische Anforderungen generiert.
|
||||
</p>
|
||||
|
||||
<CodeBlock language="typescript" filename="requirements.tsx">
|
||||
{`import { useSDK } from '@breakpilot/compliance-sdk'
|
||||
|
||||
function RequirementsView() {
|
||||
const { state } = useSDK()
|
||||
|
||||
// Requirements nach Modul gruppieren
|
||||
const byModule = state.requirements.reduce((acc, req) => {
|
||||
const module = req.module || 'general'
|
||||
if (!acc[module]) acc[module] = []
|
||||
acc[module].push(req)
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
return (
|
||||
<div>
|
||||
{Object.entries(byModule).map(([module, reqs]) => (
|
||||
<div key={module}>
|
||||
<h3>{module}</h3>
|
||||
<ul>
|
||||
{reqs.map(req => (
|
||||
<li key={req.id}>
|
||||
<strong>{req.title}</strong>
|
||||
<p>{req.description}</p>
|
||||
<span>Status: {req.status}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}`}
|
||||
</CodeBlock>
|
||||
|
||||
<h2>Schritt 5: Controls</h2>
|
||||
<p>
|
||||
Definieren Sie Kontrollen fuer jede Anforderung.
|
||||
</p>
|
||||
|
||||
<CodeBlock language="typescript" filename="controls.tsx">
|
||||
{`import { useSDK } from '@breakpilot/compliance-sdk'
|
||||
|
||||
function ControlsView() {
|
||||
const { updateControl, state } = useSDK()
|
||||
|
||||
const addControl = (requirementId: string) => {
|
||||
updateControl({
|
||||
id: \`ctrl-\${Date.now()}\`,
|
||||
requirementId,
|
||||
title: 'Zugriffskontrolle implementieren',
|
||||
description: 'Role-based access control fuer alle Datenzugaenge',
|
||||
type: 'TECHNICAL',
|
||||
status: 'PLANNED',
|
||||
implementationDate: null,
|
||||
owner: 'IT-Abteilung',
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Controls: {state.controls.length}</h2>
|
||||
|
||||
{state.requirements.map(req => (
|
||||
<div key={req.id}>
|
||||
<h3>{req.title}</h3>
|
||||
<p>Controls: {state.controls.filter(c => c.requirementId === req.id).length}</p>
|
||||
<button onClick={() => addControl(req.id)}>
|
||||
Control hinzufuegen
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}`}
|
||||
</CodeBlock>
|
||||
|
||||
<InfoBox type="warning" title="Checkpoint CP-CTRL">
|
||||
Jede Requirement muss mindestens ein Control haben, bevor Sie
|
||||
zur Evidence-Phase uebergehen koennen.
|
||||
</InfoBox>
|
||||
|
||||
<h2>Schritt 6: Evidence</h2>
|
||||
<p>
|
||||
Dokumentieren Sie Nachweise fuer implementierte Controls.
|
||||
</p>
|
||||
|
||||
<CodeBlock language="typescript" filename="evidence.tsx">
|
||||
{`import { useSDK } from '@breakpilot/compliance-sdk'
|
||||
|
||||
function EvidenceUpload({ controlId }: { controlId: string }) {
|
||||
const { dispatch } = useSDK()
|
||||
|
||||
const addEvidence = (file: File) => {
|
||||
dispatch({
|
||||
type: 'ADD_EVIDENCE',
|
||||
payload: {
|
||||
id: \`ev-\${Date.now()}\`,
|
||||
controlId,
|
||||
title: file.name,
|
||||
type: 'DOCUMENT',
|
||||
uploadedAt: new Date().toISOString(),
|
||||
fileType: file.type,
|
||||
// In Produktion: Upload zu Storage
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<input
|
||||
type="file"
|
||||
onChange={(e) => e.target.files?.[0] && addEvidence(e.target.files[0])}
|
||||
/>
|
||||
)
|
||||
}`}
|
||||
</CodeBlock>
|
||||
|
||||
<h2>Schritt 7: Audit Checklist</h2>
|
||||
<p>
|
||||
Die Checkliste fasst alle Compliance-Punkte zusammen.
|
||||
</p>
|
||||
|
||||
<h2>Schritt 8: Risk Matrix</h2>
|
||||
<p>
|
||||
Bewerten Sie alle identifizierten Risiken nach Likelihood und Impact.
|
||||
</p>
|
||||
|
||||
<CodeBlock language="typescript" filename="risk-matrix.tsx">
|
||||
{`import { useSDK, calculateRiskScore, getRiskSeverityFromScore } from '@breakpilot/compliance-sdk'
|
||||
|
||||
function RiskMatrix() {
|
||||
const { addRisk, state } = useSDK()
|
||||
|
||||
const createRisk = () => {
|
||||
const likelihood = 3 // 1-5
|
||||
const impact = 4 // 1-5
|
||||
const score = calculateRiskScore(likelihood, impact) // 12
|
||||
const severity = getRiskSeverityFromScore(score) // 'HIGH'
|
||||
|
||||
addRisk({
|
||||
id: \`risk-\${Date.now()}\`,
|
||||
title: 'Unbefugter Datenzugriff',
|
||||
description: 'Risiko durch unzureichende Zugriffskontrolle',
|
||||
likelihood,
|
||||
impact,
|
||||
inherentScore: score,
|
||||
severity,
|
||||
category: 'Security',
|
||||
mitigations: [],
|
||||
residualScore: null,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Risiken: {state.risks.length}</h2>
|
||||
|
||||
{/* 5x5 Matrix Visualisierung */}
|
||||
<div className="grid grid-cols-5 gap-1">
|
||||
{[5,4,3,2,1].map(likelihood => (
|
||||
[1,2,3,4,5].map(impact => {
|
||||
const score = likelihood * impact
|
||||
const risksHere = state.risks.filter(
|
||||
r => r.likelihood === likelihood && r.impact === impact
|
||||
)
|
||||
return (
|
||||
<div
|
||||
key={\`\${likelihood}-\${impact}\`}
|
||||
className={\`p-2 \${score >= 15 ? 'bg-red-500' : score >= 8 ? 'bg-yellow-500' : 'bg-green-500'}\`}
|
||||
>
|
||||
{risksHere.length > 0 && (
|
||||
<span className="text-white">{risksHere.length}</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button onClick={createRisk}>Risiko hinzufuegen</button>
|
||||
</div>
|
||||
)
|
||||
}`}
|
||||
</CodeBlock>
|
||||
|
||||
<InfoBox type="success" title="Phase 1 abgeschlossen">
|
||||
Nach erfolgreicher Bewertung aller Risiken koennen Sie zu Phase 2
|
||||
uebergehen. Der Checkpoint CP-RISK validiert, dass alle Risiken
|
||||
eine Severity-Bewertung haben.
|
||||
</InfoBox>
|
||||
|
||||
<h2>Navigation nach Phase 2</h2>
|
||||
<CodeBlock language="typescript" filename="phase-transition.tsx">
|
||||
{`import { useSDK } from '@breakpilot/compliance-sdk'
|
||||
|
||||
function PhaseTransition() {
|
||||
const { validateCheckpoint, goToStep, phase1Completion } = useSDK()
|
||||
|
||||
const handleContinueToPhase2 = async () => {
|
||||
// Alle Phase-1-Checkpoints pruefen
|
||||
const cpRisk = await validateCheckpoint('CP-RISK')
|
||||
|
||||
if (cpRisk.passed) {
|
||||
goToStep('ai-act-classification') // Erster Schritt Phase 2
|
||||
} else {
|
||||
console.error('Checkpoint nicht bestanden:', cpRisk.errors)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>Phase 1 Fortschritt: {phase1Completion}%</p>
|
||||
|
||||
{phase1Completion === 100 && (
|
||||
<button onClick={handleContinueToPhase2}>
|
||||
Weiter zu Phase 2
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}`}
|
||||
</CodeBlock>
|
||||
</DevPortalLayout>
|
||||
)
|
||||
}
|
||||
377
admin-v2/app/(admin)/developers/guides/phase2/page.tsx
Normal file
377
admin-v2/app/(admin)/developers/guides/phase2/page.tsx
Normal file
@@ -0,0 +1,377 @@
|
||||
import { DevPortalLayout, CodeBlock, InfoBox } from '@/components/developers/DevPortalLayout'
|
||||
|
||||
export default function Phase2GuidePage() {
|
||||
return (
|
||||
<DevPortalLayout
|
||||
title="Phase 2: Dokumentation Guide"
|
||||
description="Schritt-fuer-Schritt durch die Dokumentations-Phase"
|
||||
>
|
||||
<h2>Uebersicht Phase 2</h2>
|
||||
<p>
|
||||
Phase 2 generiert alle erforderlichen Compliance-Dokumente basierend
|
||||
auf dem Assessment aus Phase 1. Die Dokumente koennen exportiert und
|
||||
fuer Audits verwendet werden.
|
||||
</p>
|
||||
|
||||
<div className="my-6 p-4 bg-green-50 border border-green-200 rounded-xl">
|
||||
<h3 className="text-lg font-semibold text-green-900 mb-2">Phase 2 Schritte</h3>
|
||||
<ol className="list-decimal list-inside text-green-800 space-y-1">
|
||||
<li>AI Act Klassifizierung</li>
|
||||
<li>Pflichtenuebersicht</li>
|
||||
<li>DSFA (Datenschutz-Folgenabschaetzung)</li>
|
||||
<li>TOMs (Technische/Organisatorische Massnahmen)</li>
|
||||
<li>Loeschfristen</li>
|
||||
<li>VVT (Verarbeitungsverzeichnis)</li>
|
||||
<li>Rechtliche Vorlagen</li>
|
||||
<li>Cookie Banner</li>
|
||||
<li>Einwilligungen</li>
|
||||
<li>DSR Portal</li>
|
||||
<li>Escalations</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<h2>Schritt 9: AI Act Klassifizierung</h2>
|
||||
<p>
|
||||
Klassifizieren Sie jeden Use Case nach dem EU AI Act Risikosystem.
|
||||
</p>
|
||||
|
||||
<div className="my-4 overflow-x-auto not-prose">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Risikostufe</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Beschreibung</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Pflichten</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200 text-sm">
|
||||
<tr>
|
||||
<td className="px-4 py-3 font-medium text-red-600">Verboten</td>
|
||||
<td className="px-4 py-3 text-gray-600">Social Scoring, Manipulative KI</td>
|
||||
<td className="px-4 py-3 text-gray-600">Nicht zulaessig</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-3 font-medium text-orange-600">Hochrisiko</td>
|
||||
<td className="px-4 py-3 text-gray-600">Biometrie, Medizin, kritische Infrastruktur</td>
|
||||
<td className="px-4 py-3 text-gray-600">Umfangreiche Dokumentation, Konformitaetsbewertung</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-3 font-medium text-yellow-600">Begrenzt</td>
|
||||
<td className="px-4 py-3 text-gray-600">Chatbots, Empfehlungssysteme</td>
|
||||
<td className="px-4 py-3 text-gray-600">Transparenzpflichten</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-3 font-medium text-green-600">Minimal</td>
|
||||
<td className="px-4 py-3 text-gray-600">Spam-Filter, Spiele</td>
|
||||
<td className="px-4 py-3 text-gray-600">Freiwillige Verhaltenskodizes</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<CodeBlock language="typescript" filename="ai-act-classification.tsx">
|
||||
{`import { useSDK } from '@breakpilot/compliance-sdk'
|
||||
import type { AIActRiskCategory } from '@breakpilot/compliance-sdk'
|
||||
|
||||
function AIActClassification() {
|
||||
const { state, dispatch } = useSDK()
|
||||
|
||||
const classifyUseCase = (useCaseId: string, classification: AIActRiskCategory) => {
|
||||
dispatch({
|
||||
type: 'UPDATE_USE_CASE',
|
||||
payload: {
|
||||
id: useCaseId,
|
||||
assessmentResult: {
|
||||
...state.useCases.find(uc => uc.id === useCaseId)?.assessmentResult,
|
||||
aiActClassification: classification,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
// Wenn Hochrisiko, zusaetzliche Pflichten aktivieren
|
||||
if (classification === 'HIGH_RISK') {
|
||||
dispatch({
|
||||
type: 'SET_AI_ACT_RESULT',
|
||||
payload: {
|
||||
classification,
|
||||
conformityRequired: true,
|
||||
documentationRequired: true,
|
||||
humanOversightRequired: true,
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{state.useCases.map(uc => (
|
||||
<div key={uc.id}>
|
||||
<h3>{uc.name}</h3>
|
||||
<select
|
||||
value={uc.assessmentResult?.aiActClassification || ''}
|
||||
onChange={(e) => classifyUseCase(uc.id, e.target.value as AIActRiskCategory)}
|
||||
>
|
||||
<option value="">Bitte waehlen...</option>
|
||||
<option value="PROHIBITED">Verboten</option>
|
||||
<option value="HIGH_RISK">Hochrisiko</option>
|
||||
<option value="LIMITED">Begrenzt</option>
|
||||
<option value="MINIMAL">Minimal</option>
|
||||
</select>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}`}
|
||||
</CodeBlock>
|
||||
|
||||
<h2>Schritt 10: Pflichtenuebersicht</h2>
|
||||
<p>
|
||||
Basierend auf der Klassifizierung werden alle anwendbaren Pflichten angezeigt.
|
||||
</p>
|
||||
|
||||
<h2>Schritt 11: DSFA</h2>
|
||||
<p>
|
||||
Die Datenschutz-Folgenabschaetzung wird automatisch generiert.
|
||||
</p>
|
||||
|
||||
<CodeBlock language="typescript" filename="dsfa.tsx">
|
||||
{`import { useSDK, getSDKBackendClient } from '@breakpilot/compliance-sdk'
|
||||
|
||||
function DSFAGeneration() {
|
||||
const { state, dispatch } = useSDK()
|
||||
const [generating, setGenerating] = useState(false)
|
||||
|
||||
const generateDSFA = async () => {
|
||||
setGenerating(true)
|
||||
|
||||
const client = getSDKBackendClient()
|
||||
const dsfa = await client.generateDSFA({
|
||||
useCases: state.useCases,
|
||||
risks: state.risks,
|
||||
controls: state.controls,
|
||||
})
|
||||
|
||||
dispatch({
|
||||
type: 'SET_DSFA',
|
||||
payload: dsfa,
|
||||
})
|
||||
|
||||
setGenerating(false)
|
||||
}
|
||||
|
||||
// DSFA nur anzeigen wenn erforderlich
|
||||
const dsfaRequired = state.useCases.some(
|
||||
uc => uc.assessmentResult?.dsfaRequired
|
||||
)
|
||||
|
||||
if (!dsfaRequired) {
|
||||
return <p>Keine DSFA erforderlich fuer die aktuellen Use Cases.</p>
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{state.dsfa ? (
|
||||
<div>
|
||||
<h3>DSFA generiert</h3>
|
||||
<p>Status: {state.dsfa.status}</p>
|
||||
<p>Gesamtrisiko: {state.dsfa.conclusion?.overallRisk}</p>
|
||||
|
||||
{/* DSFA-Sektionen anzeigen */}
|
||||
{Object.entries(state.dsfa.sections || {}).map(([key, section]) => (
|
||||
<div key={key}>
|
||||
<h4>{section.title}</h4>
|
||||
<p>{section.content}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<button onClick={generateDSFA} disabled={generating}>
|
||||
{generating ? 'Generiere DSFA...' : 'DSFA generieren'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}`}
|
||||
</CodeBlock>
|
||||
|
||||
<InfoBox type="info" title="Checkpoint CP-DSFA">
|
||||
Wenn eine DSFA erforderlich ist (basierend auf Screening), muss diese
|
||||
generiert werden, bevor Sie fortfahren koennen.
|
||||
</InfoBox>
|
||||
|
||||
<h2>Schritt 12: TOMs</h2>
|
||||
<p>
|
||||
Technische und Organisatorische Massnahmen nach Art. 32 DSGVO.
|
||||
</p>
|
||||
|
||||
<CodeBlock language="typescript" filename="toms.tsx">
|
||||
{`import { useSDK, getSDKBackendClient } from '@breakpilot/compliance-sdk'
|
||||
|
||||
function TOMsView() {
|
||||
const { state, dispatch } = useSDK()
|
||||
|
||||
const generateTOMs = async () => {
|
||||
const client = getSDKBackendClient()
|
||||
const toms = await client.generateTOM({
|
||||
risks: state.risks,
|
||||
controls: state.controls,
|
||||
})
|
||||
|
||||
dispatch({
|
||||
type: 'SET_TOMS',
|
||||
payload: toms,
|
||||
})
|
||||
}
|
||||
|
||||
const tomCategories = [
|
||||
{ id: 'access_control', label: 'Zugangskontrolle' },
|
||||
{ id: 'access_rights', label: 'Zugriffskontrolle' },
|
||||
{ id: 'transfer_control', label: 'Weitergabekontrolle' },
|
||||
{ id: 'input_control', label: 'Eingabekontrolle' },
|
||||
{ id: 'availability', label: 'Verfuegbarkeitskontrolle' },
|
||||
{ id: 'separation', label: 'Trennungsgebot' },
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>TOMs: {state.toms.length}</h2>
|
||||
|
||||
{tomCategories.map(cat => {
|
||||
const tomsInCategory = state.toms.filter(t => t.category === cat.id)
|
||||
return (
|
||||
<div key={cat.id}>
|
||||
<h3>{cat.label} ({tomsInCategory.length})</h3>
|
||||
<ul>
|
||||
{tomsInCategory.map(tom => (
|
||||
<li key={tom.id}>
|
||||
<strong>{tom.title}</strong>
|
||||
<p>{tom.description}</p>
|
||||
<span>Status: {tom.implementationStatus}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
<button onClick={generateTOMs}>TOMs generieren</button>
|
||||
</div>
|
||||
)
|
||||
}`}
|
||||
</CodeBlock>
|
||||
|
||||
<h2>Schritt 13: Loeschfristen</h2>
|
||||
<p>
|
||||
Definieren Sie Aufbewahrungsfristen fuer verschiedene Datenkategorien.
|
||||
</p>
|
||||
|
||||
<h2>Schritt 14: VVT</h2>
|
||||
<p>
|
||||
Das Verarbeitungsverzeichnis nach Art. 30 DSGVO.
|
||||
</p>
|
||||
|
||||
<CodeBlock language="typescript" filename="vvt.tsx">
|
||||
{`import { useSDK } from '@breakpilot/compliance-sdk'
|
||||
|
||||
function VVTView() {
|
||||
const { state, dispatch } = useSDK()
|
||||
|
||||
const addProcessingActivity = () => {
|
||||
dispatch({
|
||||
type: 'ADD_PROCESSING_ACTIVITY',
|
||||
payload: {
|
||||
id: \`pa-\${Date.now()}\`,
|
||||
name: 'Kundendatenverarbeitung',
|
||||
purpose: 'Vertragserfuellung',
|
||||
legalBasis: 'Art. 6 Abs. 1 lit. b DSGVO',
|
||||
dataCategories: ['Kontaktdaten', 'Vertragsdaten'],
|
||||
dataSubjects: ['Kunden'],
|
||||
recipients: [],
|
||||
retentionPeriod: '10 Jahre',
|
||||
technicalMeasures: ['Verschluesselung', 'Zugriffskontrolle'],
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Verarbeitungstaetigkeiten: {state.vvt.length}</h2>
|
||||
|
||||
{state.vvt.map(activity => (
|
||||
<div key={activity.id} className="border p-4 rounded mb-4">
|
||||
<h3>{activity.name}</h3>
|
||||
<p><strong>Zweck:</strong> {activity.purpose}</p>
|
||||
<p><strong>Rechtsgrundlage:</strong> {activity.legalBasis}</p>
|
||||
<p><strong>Datenkategorien:</strong> {activity.dataCategories.join(', ')}</p>
|
||||
<p><strong>Betroffene:</strong> {activity.dataSubjects.join(', ')}</p>
|
||||
<p><strong>Loeschfrist:</strong> {activity.retentionPeriod}</p>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<button onClick={addProcessingActivity}>
|
||||
Verarbeitungstaetigkeit hinzufuegen
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}`}
|
||||
</CodeBlock>
|
||||
|
||||
<h2>Schritt 15-19: Weitere Dokumentation</h2>
|
||||
<p>
|
||||
Die verbleibenden Schritte umfassen:
|
||||
</p>
|
||||
<ul>
|
||||
<li><strong>Rechtliche Vorlagen:</strong> AGB, Datenschutzerklaerung, etc.</li>
|
||||
<li><strong>Cookie Banner:</strong> Konfiguration fuer Cookie-Consent</li>
|
||||
<li><strong>Einwilligungen:</strong> Consent-Management fuer Betroffene</li>
|
||||
<li><strong>DSR Portal:</strong> Data Subject Request Handling</li>
|
||||
<li><strong>Escalations:</strong> Eskalationspfade fuer Datenschutzvorfaelle</li>
|
||||
</ul>
|
||||
|
||||
<h2>Export der Dokumentation</h2>
|
||||
<CodeBlock language="typescript" filename="export-all.tsx">
|
||||
{`import { useSDK } from '@breakpilot/compliance-sdk'
|
||||
|
||||
function ExportAll() {
|
||||
const { exportState, completionPercentage } = useSDK()
|
||||
|
||||
const handleExport = async (format: 'pdf' | 'zip' | 'json') => {
|
||||
const blob = await exportState(format)
|
||||
|
||||
// Download ausloesen
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = \`compliance-export.\${format === 'json' ? 'json' : format}\`
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Compliance Fortschritt: {completionPercentage}%</h2>
|
||||
|
||||
<div className="flex gap-4 mt-4">
|
||||
<button onClick={() => handleExport('pdf')}>
|
||||
PDF Export
|
||||
</button>
|
||||
<button onClick={() => handleExport('zip')}>
|
||||
ZIP Export (alle Dokumente)
|
||||
</button>
|
||||
<button onClick={() => handleExport('json')}>
|
||||
JSON Backup
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}`}
|
||||
</CodeBlock>
|
||||
|
||||
<InfoBox type="success" title="Workflow abgeschlossen">
|
||||
Nach Abschluss aller 19 Schritte haben Sie eine vollstaendige
|
||||
Compliance-Dokumentation, die Sie fuer Audits und regulatorische
|
||||
Anforderungen verwenden koennen.
|
||||
</InfoBox>
|
||||
</DevPortalLayout>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user