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
203
admin-v2/app/(admin)/developers/getting-started/page.tsx
Normal file
203
admin-v2/app/(admin)/developers/getting-started/page.tsx
Normal file
@@ -0,0 +1,203 @@
|
||||
import Link from 'next/link'
|
||||
import { DevPortalLayout, CodeBlock, InfoBox, ParameterTable } from '@/components/developers/DevPortalLayout'
|
||||
|
||||
export default function GettingStartedPage() {
|
||||
return (
|
||||
<DevPortalLayout
|
||||
title="Quick Start"
|
||||
description="Starten Sie in 5 Minuten mit dem AI Compliance SDK"
|
||||
>
|
||||
<h2>1. Installation</h2>
|
||||
<p>
|
||||
Installieren Sie das SDK über Ihren bevorzugten Paketmanager:
|
||||
</p>
|
||||
<CodeBlock language="bash" filename="Terminal">
|
||||
{`npm install @breakpilot/compliance-sdk
|
||||
# oder
|
||||
yarn add @breakpilot/compliance-sdk
|
||||
# oder
|
||||
pnpm add @breakpilot/compliance-sdk`}
|
||||
</CodeBlock>
|
||||
|
||||
<h2>2. API Key erhalten</h2>
|
||||
<p>
|
||||
Nach dem Abo-Abschluss erhalten Sie Ihren API Key im{' '}
|
||||
<Link href="/settings" className="text-blue-600 hover:underline">
|
||||
Einstellungsbereich
|
||||
</Link>.
|
||||
</p>
|
||||
|
||||
<InfoBox type="warning" title="Sicherheitshinweis">
|
||||
Speichern Sie den API Key niemals im Frontend-Code. Verwenden Sie
|
||||
Umgebungsvariablen auf dem Server.
|
||||
</InfoBox>
|
||||
|
||||
<h2>3. Provider einrichten</h2>
|
||||
<p>
|
||||
Wrappen Sie Ihre App mit dem SDKProvider:
|
||||
</p>
|
||||
<CodeBlock language="typescript" filename="app/layout.tsx">
|
||||
{`import { SDKProvider } from '@breakpilot/compliance-sdk'
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="de">
|
||||
<body>
|
||||
<SDKProvider
|
||||
tenantId={process.env.TENANT_ID}
|
||||
apiKey={process.env.BREAKPILOT_API_KEY}
|
||||
enableBackendSync={true}
|
||||
>
|
||||
{children}
|
||||
</SDKProvider>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}`}
|
||||
</CodeBlock>
|
||||
|
||||
<h3>Provider Props</h3>
|
||||
<ParameterTable
|
||||
parameters={[
|
||||
{
|
||||
name: 'tenantId',
|
||||
type: 'string',
|
||||
required: true,
|
||||
description: 'Ihre eindeutige Tenant-ID',
|
||||
},
|
||||
{
|
||||
name: 'apiKey',
|
||||
type: 'string',
|
||||
required: false,
|
||||
description: 'API Key für Backend-Sync (serverseitig)',
|
||||
},
|
||||
{
|
||||
name: 'userId',
|
||||
type: 'string',
|
||||
required: false,
|
||||
description: 'Optional: Benutzer-ID für Audit-Trail',
|
||||
},
|
||||
{
|
||||
name: 'enableBackendSync',
|
||||
type: 'boolean',
|
||||
required: false,
|
||||
description: 'Aktiviert Synchronisation mit dem Backend (default: false)',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<h2>4. SDK verwenden</h2>
|
||||
<p>
|
||||
Nutzen Sie den useSDK Hook in Ihren Komponenten:
|
||||
</p>
|
||||
<CodeBlock language="typescript" filename="components/Dashboard.tsx">
|
||||
{`'use client'
|
||||
|
||||
import { useSDK } from '@breakpilot/compliance-sdk'
|
||||
|
||||
export function ComplianceDashboard() {
|
||||
const {
|
||||
state,
|
||||
completionPercentage,
|
||||
goToStep,
|
||||
currentStep,
|
||||
} = useSDK()
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<h1 className="text-2xl font-bold">
|
||||
Compliance Fortschritt: {completionPercentage}%
|
||||
</h1>
|
||||
|
||||
<div className="mt-4">
|
||||
<p>Aktueller Schritt: {currentStep?.name}</p>
|
||||
<p>Phase: {state.currentPhase}</p>
|
||||
<p>Use Cases: {state.useCases.length}</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex gap-4">
|
||||
<button
|
||||
onClick={() => goToStep('use-case-workshop')}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded"
|
||||
>
|
||||
Use Case Workshop
|
||||
</button>
|
||||
<button
|
||||
onClick={() => goToStep('risks')}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded"
|
||||
>
|
||||
Risikoanalyse
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}`}
|
||||
</CodeBlock>
|
||||
|
||||
<h2>5. Erste Schritte im Workflow</h2>
|
||||
<p>
|
||||
Das SDK führt Sie durch einen 19-Schritte-Workflow in 2 Phasen:
|
||||
</p>
|
||||
|
||||
<div className="my-6 not-prose">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="p-4 border border-gray-200 rounded-lg">
|
||||
<h4 className="font-semibold mb-2">Phase 1: Assessment</h4>
|
||||
<ol className="text-sm text-gray-600 space-y-1 list-decimal list-inside">
|
||||
<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>
|
||||
<div className="p-4 border border-gray-200 rounded-lg">
|
||||
<h4 className="font-semibold mb-2">Phase 2: Dokumentation</h4>
|
||||
<ol className="text-sm text-gray-600 space-y-1 list-decimal list-inside">
|
||||
<li>AI Act Klassifizierung</li>
|
||||
<li>Pflichtenübersicht</li>
|
||||
<li>DSFA</li>
|
||||
<li>TOMs</li>
|
||||
<li>Löschfristen</li>
|
||||
<li>VVT</li>
|
||||
<li>Rechtliche Vorlagen</li>
|
||||
<li>Cookie Banner</li>
|
||||
<li>Einwilligungen</li>
|
||||
<li>DSR Portal</li>
|
||||
<li>Escalations</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>6. Nächste Schritte</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/developers/sdk/configuration" className="text-blue-600 hover:underline">
|
||||
SDK Konfiguration
|
||||
</Link>
|
||||
{' '}- Alle Konfigurationsoptionen
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/developers/api/state" className="text-blue-600 hover:underline">
|
||||
State API
|
||||
</Link>
|
||||
{' '}- Verstehen Sie das State Management
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/developers/guides/phase1" className="text-blue-600 hover:underline">
|
||||
Phase 1 Guide
|
||||
</Link>
|
||||
{' '}- Kompletter Workflow für das Assessment
|
||||
</li>
|
||||
</ul>
|
||||
</DevPortalLayout>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user