09dd1487b4
SDK customers can now access the documentation publicly without login. The portal runs independently from admin-v2 on https://macmini:3006/. - New developer-portal/ app with 26 pages, 2 components - Docker service + nginx SSL reverse proxy on port 3006 - All /developers/* routes remapped to /* in the new app - admin-v2 developer pages remain unchanged Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
228 lines
10 KiB
TypeScript
228 lines
10 KiB
TypeScript
import Link from 'next/link'
|
|
import { DevPortalLayout, InfoBox } from '@/components/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="/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="/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>
|
|
)
|
|
}
|