refactor(admin): split modules, security-backlog, consent pages

Extract components and hooks to _components/ and _hooks/ subdirectories
to bring all three page.tsx files under the 500-LOC hard cap.

modules/page.tsx:       595 → 239 LOC
security-backlog/page.tsx: 586 → 174 LOC
consent/page.tsx:       569 → 305 LOC

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sharang Parnerkar
2026-04-16 13:13:38 +02:00
parent 7907b3f25b
commit 8044ddb776
10 changed files with 1249 additions and 1114 deletions

View File

@@ -0,0 +1,117 @@
'use client'
import React from 'react'
import type { LegalDocument } from '../_hooks/useConsentDocuments'
export function DocumentCard({
document,
onDelete,
onEdit,
onPreview,
}: {
document: LegalDocument
onDelete: (id: string) => void
onEdit: (id: string) => void
onPreview: (doc: LegalDocument) => void
}) {
const typeColors = {
'privacy-policy': 'bg-blue-100 text-blue-700',
terms: 'bg-green-100 text-green-700',
'cookie-policy': 'bg-yellow-100 text-yellow-700',
imprint: 'bg-gray-100 text-gray-700',
dpa: 'bg-purple-100 text-purple-700',
}
const typeLabels = {
'privacy-policy': 'Datenschutz',
terms: 'AGB',
'cookie-policy': 'Cookie-Richtlinie',
imprint: 'Impressum',
dpa: 'AVV',
}
const statusColors = {
draft: 'bg-yellow-100 text-yellow-700',
active: 'bg-green-100 text-green-700',
archived: 'bg-gray-100 text-gray-500',
}
const statusLabels = {
draft: 'Entwurf',
active: 'Aktiv',
archived: 'Archiviert',
}
return (
<div className={`bg-white rounded-xl border-2 p-6 ${
document.status === 'draft' ? 'border-yellow-200' : 'border-gray-200'
}`}>
<div className="flex items-start justify-between">
<div className="flex-1">
<div className="flex items-center gap-2 mb-2">
<span className={`px-2 py-1 text-xs rounded-full ${typeColors[document.type]}`}>
{typeLabels[document.type]}
</span>
<span className={`px-2 py-1 text-xs rounded-full ${statusColors[document.status]}`}>
{statusLabels[document.status]}
</span>
<span className="px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded uppercase">
{document.language}
</span>
<span className="px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded">
v{document.version}
</span>
</div>
<h3 className="text-lg font-semibold text-gray-900">{document.name}</h3>
</div>
</div>
{document.changes.length > 0 && (
<div className="mt-3">
<span className="text-sm text-gray-500">Letzte Aenderungen:</span>
<ul className="mt-1 text-sm text-gray-600 list-disc list-inside">
{document.changes.slice(0, 2).map((change, i) => (
<li key={i}>{change}</li>
))}
</ul>
</div>
)}
<div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-sm">
<div className="text-gray-500">
<span>Autor: {document.author}</span>
<span className="mx-2">|</span>
<span>Aktualisiert: {document.lastUpdated.toLocaleDateString('de-DE')}</span>
</div>
<div className="flex items-center gap-2">
<button
onClick={() => onEdit(document.id)}
className="px-3 py-1 text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
>
Bearbeiten
</button>
<button
onClick={() => onPreview(document)}
className="px-3 py-1 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
>
Vorschau
</button>
{document.status === 'draft' && (
<button
onClick={() => onEdit(document.id)}
className="px-3 py-1 bg-green-50 text-green-700 hover:bg-green-100 rounded-lg transition-colors"
>
Veroeffentlichen
</button>
)}
<button
onClick={() => onDelete(document.id)}
className="px-3 py-1 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
>
Loeschen
</button>
</div>
</div>
</div>
)
}

View File

@@ -0,0 +1,197 @@
'use client'
import { useState, useEffect } from 'react'
// =============================================================================
// TYPES
// =============================================================================
export interface LegalDocument {
id: string
type: 'privacy-policy' | 'terms' | 'cookie-policy' | 'imprint' | 'dpa'
name: string
version: string
language: string
status: 'draft' | 'active' | 'archived'
lastUpdated: Date
publishedAt: Date | null
author: string
changes: string[]
}
interface ApiDocument {
id: string
type: string
name: string
description: string
mandatory: boolean
created_at: string
updated_at: string
}
// =============================================================================
// HELPERS
// =============================================================================
function mapDocumentType(apiType: string): LegalDocument['type'] {
const mapping: Record<string, LegalDocument['type']> = {
'privacy_policy': 'privacy-policy',
'privacy-policy': 'privacy-policy',
'terms': 'terms',
'terms_of_service': 'terms',
'cookie_policy': 'cookie-policy',
'cookie-policy': 'cookie-policy',
'imprint': 'imprint',
'dpa': 'dpa',
'avv': 'dpa',
}
return mapping[apiType] || 'terms'
}
function transformApiDocument(doc: ApiDocument): LegalDocument {
return {
id: doc.id,
type: mapDocumentType(doc.type),
name: doc.name,
version: '1.0',
language: 'de',
status: 'active',
lastUpdated: new Date(doc.updated_at),
publishedAt: new Date(doc.created_at),
author: 'System',
changes: doc.description ? [doc.description] : [],
}
}
// =============================================================================
// HOOK
// =============================================================================
export function useConsentDocuments() {
const [documents, setDocuments] = useState<LegalDocument[]>([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
const [previewDoc, setPreviewDoc] = useState<{ name: string; content: string } | null>(null)
useEffect(() => {
loadDocuments()
}, [])
async function loadDocuments() {
setLoading(true)
setError(null)
try {
const token = localStorage.getItem('bp_admin_token')
const res = await fetch('/api/admin/consent/documents', {
headers: token ? { 'Authorization': `Bearer ${token}` } : {}
})
if (res.ok) {
const data = await res.json()
const apiDocs: ApiDocument[] = data.documents || []
setDocuments(apiDocs.map(transformApiDocument))
} else {
setError('Fehler beim Laden der Dokumente')
}
} catch {
setError('Verbindungsfehler zum Server')
} finally {
setLoading(false)
}
}
async function handleRagSuggest(docType: string, docName: string): Promise<string | null> {
const query = docType || docName || 'Datenschutzerklärung'
try {
const res = await fetch('/api/sdk/v1/rag/search', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query: `${query} DSGVO Vorlage`, limit: 1 }),
})
if (res.ok) {
const data = await res.json()
const first = data.results?.[0]
if (first?.text) return first.text
}
} catch { /* silently ignore */ }
return null
}
async function handleCreateDocument(form: {
type: string
name: string
description: string
content: string
}): Promise<boolean> {
if (!form.name.trim()) return false
try {
const token = localStorage.getItem('bp_admin_token')
const res = await fetch('/api/admin/consent/documents', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
...(token ? { 'Authorization': `Bearer ${token}` } : {}),
},
body: JSON.stringify(form),
})
if (res.ok) {
await loadDocuments()
return true
} else {
setError('Fehler beim Erstellen des Dokuments')
}
} catch {
setError('Verbindungsfehler beim Erstellen')
}
return false
}
async function handleDeleteDocument(id: string) {
if (!confirm('Dokument wirklich löschen?')) return
try {
const token = localStorage.getItem('bp_admin_token')
const res = await fetch(`/api/admin/consent/documents/${id}`, {
method: 'DELETE',
headers: token ? { 'Authorization': `Bearer ${token}` } : {},
})
if (res.ok || res.status === 204) {
setDocuments(prev => prev.filter(d => d.id !== id))
} else {
setError('Fehler beim Löschen des Dokuments')
}
} catch {
setError('Verbindungsfehler beim Löschen')
}
}
async function handlePreview(doc: LegalDocument) {
try {
const token = localStorage.getItem('bp_admin_token')
const res = await fetch(`/api/admin/consent/documents/${doc.id}/versions`, {
headers: token ? { 'Authorization': `Bearer ${token}` } : {}
})
if (res.ok) {
const data = await res.json()
const versions = Array.isArray(data) ? data : (data.versions || [])
const published = versions.find((v: { status: string; content?: string }) => v.status === 'published')
const latest = published || versions[0]
setPreviewDoc({ name: doc.name, content: latest?.content || '<p>Kein Inhalt verfügbar.</p>' })
} else {
setPreviewDoc({ name: doc.name, content: '<p>Vorschau nicht verfügbar.</p>' })
}
} catch {
setPreviewDoc({ name: doc.name, content: '<p>Fehler beim Laden der Vorschau.</p>' })
}
}
return {
documents,
loading,
error,
previewDoc,
setPreviewDoc,
handleRagSuggest,
handleCreateDocument,
handleDeleteDocument,
handlePreview,
}
}

View File

@@ -1,312 +1,29 @@
'use client'
import React, { useState, useEffect } from 'react'
import React, { useState } from 'react'
import { useRouter } from 'next/navigation'
import { useSDK } from '@/lib/sdk'
import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
// =============================================================================
// TYPES
// =============================================================================
interface LegalDocument {
id: string
type: 'privacy-policy' | 'terms' | 'cookie-policy' | 'imprint' | 'dpa'
name: string
version: string
language: string
status: 'draft' | 'active' | 'archived'
lastUpdated: Date
publishedAt: Date | null
author: string
changes: string[]
}
interface ApiDocument {
id: string
type: string
name: string
description: string
mandatory: boolean
created_at: string
updated_at: string
}
// Map API document type to UI type
function mapDocumentType(apiType: string): LegalDocument['type'] {
const mapping: Record<string, LegalDocument['type']> = {
'privacy_policy': 'privacy-policy',
'privacy-policy': 'privacy-policy',
'terms': 'terms',
'terms_of_service': 'terms',
'cookie_policy': 'cookie-policy',
'cookie-policy': 'cookie-policy',
'imprint': 'imprint',
'dpa': 'dpa',
'avv': 'dpa',
}
return mapping[apiType] || 'terms'
}
// Transform API response to UI format
function transformApiDocument(doc: ApiDocument): LegalDocument {
return {
id: doc.id,
type: mapDocumentType(doc.type),
name: doc.name,
version: '1.0',
language: 'de',
status: 'active',
lastUpdated: new Date(doc.updated_at),
publishedAt: new Date(doc.created_at),
author: 'System',
changes: doc.description ? [doc.description] : [],
}
}
// =============================================================================
// COMPONENTS
// =============================================================================
function DocumentCard({
document,
onDelete,
onEdit,
onPreview,
}: {
document: LegalDocument
onDelete: (id: string) => void
onEdit: (id: string) => void
onPreview: (doc: LegalDocument) => void
}) {
const typeColors = {
'privacy-policy': 'bg-blue-100 text-blue-700',
terms: 'bg-green-100 text-green-700',
'cookie-policy': 'bg-yellow-100 text-yellow-700',
imprint: 'bg-gray-100 text-gray-700',
dpa: 'bg-purple-100 text-purple-700',
}
const typeLabels = {
'privacy-policy': 'Datenschutz',
terms: 'AGB',
'cookie-policy': 'Cookie-Richtlinie',
imprint: 'Impressum',
dpa: 'AVV',
}
const statusColors = {
draft: 'bg-yellow-100 text-yellow-700',
active: 'bg-green-100 text-green-700',
archived: 'bg-gray-100 text-gray-500',
}
const statusLabels = {
draft: 'Entwurf',
active: 'Aktiv',
archived: 'Archiviert',
}
return (
<div className={`bg-white rounded-xl border-2 p-6 ${
document.status === 'draft' ? 'border-yellow-200' : 'border-gray-200'
}`}>
<div className="flex items-start justify-between">
<div className="flex-1">
<div className="flex items-center gap-2 mb-2">
<span className={`px-2 py-1 text-xs rounded-full ${typeColors[document.type]}`}>
{typeLabels[document.type]}
</span>
<span className={`px-2 py-1 text-xs rounded-full ${statusColors[document.status]}`}>
{statusLabels[document.status]}
</span>
<span className="px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded uppercase">
{document.language}
</span>
<span className="px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded">
v{document.version}
</span>
</div>
<h3 className="text-lg font-semibold text-gray-900">{document.name}</h3>
</div>
</div>
{document.changes.length > 0 && (
<div className="mt-3">
<span className="text-sm text-gray-500">Letzte Aenderungen:</span>
<ul className="mt-1 text-sm text-gray-600 list-disc list-inside">
{document.changes.slice(0, 2).map((change, i) => (
<li key={i}>{change}</li>
))}
</ul>
</div>
)}
<div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-sm">
<div className="text-gray-500">
<span>Autor: {document.author}</span>
<span className="mx-2">|</span>
<span>Aktualisiert: {document.lastUpdated.toLocaleDateString('de-DE')}</span>
</div>
<div className="flex items-center gap-2">
<button
onClick={() => onEdit(document.id)}
className="px-3 py-1 text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
>
Bearbeiten
</button>
<button
onClick={() => onPreview(document)}
className="px-3 py-1 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
>
Vorschau
</button>
{document.status === 'draft' && (
<button
onClick={() => onEdit(document.id)}
className="px-3 py-1 bg-green-50 text-green-700 hover:bg-green-100 rounded-lg transition-colors"
>
Veroeffentlichen
</button>
)}
<button
onClick={() => onDelete(document.id)}
className="px-3 py-1 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
>
Loeschen
</button>
</div>
</div>
</div>
)
}
// =============================================================================
// MAIN PAGE
// =============================================================================
import { DocumentCard } from './_components/DocumentCard'
import { useConsentDocuments } from './_hooks/useConsentDocuments'
export default function ConsentPage() {
const { state } = useSDK()
const router = useRouter()
const [documents, setDocuments] = useState<LegalDocument[]>([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
const [filter, setFilter] = useState<string>('all')
const [showCreateModal, setShowCreateModal] = useState(false)
const [newDocForm, setNewDocForm] = useState({ type: 'privacy_policy', name: '', description: '', content: '' })
const [creating, setCreating] = useState(false)
const [previewDoc, setPreviewDoc] = useState<{ name: string; content: string } | null>(null)
useEffect(() => {
loadDocuments()
}, [])
async function loadDocuments() {
setLoading(true)
setError(null)
try {
const token = localStorage.getItem('bp_admin_token')
const res = await fetch('/api/admin/consent/documents', {
headers: token ? { 'Authorization': `Bearer ${token}` } : {}
})
if (res.ok) {
const data = await res.json()
const apiDocs: ApiDocument[] = data.documents || []
setDocuments(apiDocs.map(transformApiDocument))
} else {
setError('Fehler beim Laden der Dokumente')
}
} catch {
setError('Verbindungsfehler zum Server')
} finally {
setLoading(false)
}
}
async function handleRagSuggest() {
const docType = newDocForm.type || newDocForm.name || 'Datenschutzerklärung'
try {
const res = await fetch('/api/sdk/v1/rag/search', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query: `${docType} DSGVO Vorlage`, limit: 1 }),
})
if (res.ok) {
const data = await res.json()
const first = data.results?.[0]
if (first?.text) setNewDocForm(d => ({ ...d, content: first.text }))
}
} catch { /* silently ignore */ }
}
async function handleCreateDocument() {
if (!newDocForm.name.trim()) return
setCreating(true)
try {
const token = localStorage.getItem('bp_admin_token')
const res = await fetch('/api/admin/consent/documents', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
...(token ? { 'Authorization': `Bearer ${token}` } : {}),
},
body: JSON.stringify(newDocForm),
})
if (res.ok) {
setShowCreateModal(false)
setNewDocForm({ type: 'privacy_policy', name: '', description: '', content: '' })
await loadDocuments()
} else {
setError('Fehler beim Erstellen des Dokuments')
}
} catch {
setError('Verbindungsfehler beim Erstellen')
} finally {
setCreating(false)
}
}
async function handleDeleteDocument(id: string) {
if (!confirm('Dokument wirklich löschen?')) return
try {
const token = localStorage.getItem('bp_admin_token')
const res = await fetch(`/api/admin/consent/documents/${id}`, {
method: 'DELETE',
headers: token ? { 'Authorization': `Bearer ${token}` } : {},
})
if (res.ok || res.status === 204) {
setDocuments(prev => prev.filter(d => d.id !== id))
} else {
setError('Fehler beim Löschen des Dokuments')
}
} catch {
setError('Verbindungsfehler beim Löschen')
}
}
function handleEdit(id: string) {
router.push('/sdk/workflow')
}
async function handlePreview(doc: LegalDocument) {
try {
const token = localStorage.getItem('bp_admin_token')
const res = await fetch(`/api/admin/consent/documents/${doc.id}/versions`, {
headers: token ? { 'Authorization': `Bearer ${token}` } : {}
})
if (res.ok) {
const data = await res.json()
const versions = Array.isArray(data) ? data : (data.versions || [])
const published = versions.find((v: { status: string; content?: string }) => v.status === 'published')
const latest = published || versions[0]
setPreviewDoc({ name: doc.name, content: latest?.content || '<p>Kein Inhalt verfügbar.</p>' })
} else {
setPreviewDoc({ name: doc.name, content: '<p>Vorschau nicht verfügbar.</p>' })
}
} catch {
setPreviewDoc({ name: doc.name, content: '<p>Fehler beim Laden der Vorschau.</p>' })
}
}
const {
documents,
loading,
error,
previewDoc,
setPreviewDoc,
handleRagSuggest,
handleCreateDocument,
handleDeleteDocument,
handlePreview,
} = useConsentDocuments()
const filteredDocuments = filter === 'all'
? documents
@@ -315,6 +32,25 @@ export default function ConsentPage() {
const activeCount = documents.filter(d => d.status === 'active').length
const draftCount = documents.filter(d => d.status === 'draft').length
async function onRagSuggest() {
const text = await handleRagSuggest(newDocForm.type, newDocForm.name)
if (text) setNewDocForm(d => ({ ...d, content: text }))
}
async function onCreateDocument() {
setCreating(true)
const ok = await handleCreateDocument(newDocForm)
if (ok) {
setShowCreateModal(false)
setNewDocForm({ type: 'privacy_policy', name: '', description: '', content: '' })
}
setCreating(false)
}
function handleEdit(id: string) {
router.push('/sdk/workflow')
}
const stepInfo = STEP_EXPLANATIONS['consent']
return (
@@ -531,7 +267,7 @@ export default function ConsentPage() {
<label className="text-sm font-medium text-gray-700">Inhalt (optional)</label>
<button
type="button"
onClick={handleRagSuggest}
onClick={onRagSuggest}
className="text-xs text-blue-600 hover:underline"
>
Aus RAG-Vorlagen laden
@@ -554,7 +290,7 @@ export default function ConsentPage() {
Abbrechen
</button>
<button
onClick={handleCreateDocument}
onClick={onCreateDocument}
disabled={creating || !newDocForm.name.trim()}
className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
>