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
705
admin-v2/app/(admin)/compliance/audit-report/page.tsx
Normal file
705
admin-v2/app/(admin)/compliance/audit-report/page.tsx
Normal file
@@ -0,0 +1,705 @@
|
||||
'use client'
|
||||
|
||||
/**
|
||||
* Audit Report Management Page
|
||||
*
|
||||
* Create and manage GDPR audit sessions with PDF report generation.
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { PagePurpose } from '@/components/common/PagePurpose'
|
||||
|
||||
interface AuditSession {
|
||||
id: string
|
||||
name: string
|
||||
description?: string
|
||||
auditor_name: string
|
||||
auditor_email?: string
|
||||
auditor_organization?: string
|
||||
status: 'draft' | 'in_progress' | 'completed' | 'archived'
|
||||
regulation_ids?: string[]
|
||||
total_items: number
|
||||
completed_items: number
|
||||
compliant_count: number
|
||||
non_compliant_count: number
|
||||
completion_percentage: number
|
||||
created_at: string
|
||||
started_at?: string
|
||||
completed_at?: string
|
||||
}
|
||||
|
||||
// Available regulations for filtering
|
||||
const REGULATIONS = [
|
||||
{ code: 'GDPR', name: 'DSGVO / GDPR', description: 'EU-Datenschutzgrundverordnung' },
|
||||
{ code: 'BDSG', name: 'BDSG', description: 'Bundesdatenschutzgesetz' },
|
||||
{ code: 'TTDSG', name: 'TTDSG', description: 'Telekommunikation-Telemedien-Datenschutz' },
|
||||
]
|
||||
|
||||
export default function AuditReportPage() {
|
||||
const [sessions, setSessions] = useState<AuditSession[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [activeTab, setActiveTab] = useState<'sessions' | 'new' | 'export'>('sessions')
|
||||
|
||||
// New session form
|
||||
const [newSession, setNewSession] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
auditor_name: '',
|
||||
auditor_email: '',
|
||||
auditor_organization: '',
|
||||
regulation_codes: [] as string[],
|
||||
})
|
||||
const [creating, setCreating] = useState(false)
|
||||
|
||||
// PDF generation
|
||||
const [generatingPdf, setGeneratingPdf] = useState<string | null>(null)
|
||||
const [pdfLanguage, setPdfLanguage] = useState<'de' | 'en'>('de')
|
||||
|
||||
// Status filter
|
||||
const [statusFilter, setStatusFilter] = useState<string>('all')
|
||||
|
||||
useEffect(() => {
|
||||
fetchSessions()
|
||||
}, [statusFilter])
|
||||
|
||||
const fetchSessions = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const params = statusFilter !== 'all' ? `?status=${statusFilter}` : ''
|
||||
const res = await fetch(`/api/admin/audit/sessions${params}`)
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error('Fehler beim Laden der Audit-Sessions')
|
||||
}
|
||||
|
||||
const data = await res.json()
|
||||
setSessions(data.sessions || [])
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const createSession = async () => {
|
||||
if (!newSession.name || !newSession.auditor_name) {
|
||||
setError('Name und Auditor-Name sind Pflichtfelder')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
setCreating(true)
|
||||
const res = await fetch('/api/admin/audit/sessions', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(newSession),
|
||||
})
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error('Fehler beim Erstellen der Session')
|
||||
}
|
||||
|
||||
// Reset form and refresh
|
||||
setNewSession({
|
||||
name: '',
|
||||
description: '',
|
||||
auditor_name: '',
|
||||
auditor_email: '',
|
||||
auditor_organization: '',
|
||||
regulation_codes: [],
|
||||
})
|
||||
setActiveTab('sessions')
|
||||
fetchSessions()
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
|
||||
} finally {
|
||||
setCreating(false)
|
||||
}
|
||||
}
|
||||
|
||||
const startSession = async (sessionId: string) => {
|
||||
try {
|
||||
const res = await fetch(`/api/admin/audit/sessions/${sessionId}/start`, {
|
||||
method: 'PUT',
|
||||
})
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error('Fehler beim Starten der Session')
|
||||
}
|
||||
|
||||
fetchSessions()
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
|
||||
}
|
||||
}
|
||||
|
||||
const completeSession = async (sessionId: string) => {
|
||||
try {
|
||||
const res = await fetch(`/api/admin/audit/sessions/${sessionId}/complete`, {
|
||||
method: 'PUT',
|
||||
})
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error('Fehler beim Abschliessen der Session')
|
||||
}
|
||||
|
||||
fetchSessions()
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
|
||||
}
|
||||
}
|
||||
|
||||
const deleteSession = async (sessionId: string) => {
|
||||
if (!confirm('Session wirklich loeschen?')) return
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/admin/audit/sessions/${sessionId}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error('Fehler beim Loeschen der Session')
|
||||
}
|
||||
|
||||
fetchSessions()
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
|
||||
}
|
||||
}
|
||||
|
||||
const downloadPdf = async (sessionId: string) => {
|
||||
try {
|
||||
setGeneratingPdf(sessionId)
|
||||
const res = await fetch(
|
||||
`/api/admin/audit/sessions/${sessionId}/pdf?language=${pdfLanguage}`
|
||||
)
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error('Fehler bei der PDF-Generierung')
|
||||
}
|
||||
|
||||
// Download the PDF
|
||||
const blob = await res.blob()
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `audit-report-${sessionId}.pdf`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
window.URL.revokeObjectURL(url)
|
||||
document.body.removeChild(a)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
|
||||
} finally {
|
||||
setGeneratingPdf(null)
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
const styles: Record<string, string> = {
|
||||
draft: 'bg-slate-100 text-slate-700',
|
||||
in_progress: 'bg-blue-100 text-blue-700',
|
||||
completed: 'bg-green-100 text-green-700',
|
||||
archived: 'bg-purple-100 text-purple-700',
|
||||
}
|
||||
const labels: Record<string, string> = {
|
||||
draft: 'Entwurf',
|
||||
in_progress: 'In Bearbeitung',
|
||||
completed: 'Abgeschlossen',
|
||||
archived: 'Archiviert',
|
||||
}
|
||||
return (
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${styles[status] || ''}`}>
|
||||
{labels[status] || status}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
const getComplianceColor = (percentage: number) => {
|
||||
if (percentage >= 80) return 'text-green-600'
|
||||
if (percentage >= 50) return 'text-yellow-600'
|
||||
return 'text-red-600'
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Page Purpose */}
|
||||
<PagePurpose
|
||||
title="Audit Report"
|
||||
purpose="Erstellen und verwalten Sie DSGVO-Audit-Sessions. Generieren Sie PDF-Berichte fuer Auditoren und Aufsichtsbehoerden mit vollstaendiger Checkliste, Sign-Off-Status und digitalen Signaturen."
|
||||
audience={['DSB', 'Auditor', 'Compliance Officer']}
|
||||
gdprArticles={[
|
||||
'Art. 5 (Rechenschaftspflicht)',
|
||||
'Art. 24 (Verantwortung des Verantwortlichen)',
|
||||
'Art. 39 (Aufgaben des DSB)',
|
||||
]}
|
||||
architecture={{
|
||||
services: ['backend (Python)', 'ReportLab PDF'],
|
||||
databases: ['PostgreSQL'],
|
||||
}}
|
||||
relatedPages={[
|
||||
{ name: 'DSMS', href: '/compliance/dsms', description: 'Uebersicht Datenschutz-Management' },
|
||||
{ name: 'Einwilligungen', href: '/compliance/einwilligungen', description: 'Consent-Tracking' },
|
||||
{ name: 'VVT', href: '/compliance/vvt', description: 'Verarbeitungsverzeichnis' },
|
||||
]}
|
||||
collapsible={true}
|
||||
defaultCollapsed={true}
|
||||
/>
|
||||
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex items-center justify-between">
|
||||
<span>{error}</span>
|
||||
<button onClick={() => setError(null)} className="text-red-500 hover:text-red-700">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-2 mb-6">
|
||||
<button
|
||||
onClick={() => setActiveTab('sessions')}
|
||||
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
||||
activeTab === 'sessions'
|
||||
? 'bg-purple-600 text-white'
|
||||
: 'bg-slate-100 text-slate-700 hover:bg-slate-200'
|
||||
}`}
|
||||
>
|
||||
Audit-Sessions
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('new')}
|
||||
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
||||
activeTab === 'new'
|
||||
? 'bg-purple-600 text-white'
|
||||
: 'bg-slate-100 text-slate-700 hover:bg-slate-200'
|
||||
}`}
|
||||
>
|
||||
+ Neues Audit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('export')}
|
||||
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
||||
activeTab === 'export'
|
||||
? 'bg-purple-600 text-white'
|
||||
: 'bg-slate-100 text-slate-700 hover:bg-slate-200'
|
||||
}`}
|
||||
>
|
||||
Export-Optionen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Sessions Tab */}
|
||||
{activeTab === 'sessions' && (
|
||||
<div>
|
||||
{/* Filter */}
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<label className="text-sm text-slate-600">Status:</label>
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value)}
|
||||
className="px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
>
|
||||
<option value="all">Alle</option>
|
||||
<option value="draft">Entwurf</option>
|
||||
<option value="in_progress">In Bearbeitung</option>
|
||||
<option value="completed">Abgeschlossen</option>
|
||||
<option value="archived">Archiviert</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={fetchSessions}
|
||||
className="px-3 py-2 text-sm text-purple-600 hover:text-purple-700"
|
||||
>
|
||||
Aktualisieren
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Sessions List */}
|
||||
{loading ? (
|
||||
<div className="text-center py-12 text-slate-500">Lade Audit-Sessions...</div>
|
||||
) : sessions.length === 0 ? (
|
||||
<div className="bg-white rounded-xl border border-slate-200 p-8 text-center">
|
||||
<svg className="w-12 h-12 mx-auto text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 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>
|
||||
<h3 className="text-lg font-medium text-slate-700 mb-2">Keine Audit-Sessions vorhanden</h3>
|
||||
<p className="text-sm text-slate-500 mb-4">
|
||||
Erstellen Sie ein neues Audit, um mit der DSGVO-Pruefung zu beginnen.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setActiveTab('new')}
|
||||
className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
|
||||
>
|
||||
Neues Audit erstellen
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{sessions.map((session) => (
|
||||
<div
|
||||
key={session.id}
|
||||
className="bg-white rounded-xl border border-slate-200 p-6"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<h3 className="font-semibold text-slate-900">{session.name}</h3>
|
||||
{getStatusBadge(session.status)}
|
||||
</div>
|
||||
{session.description && (
|
||||
<p className="text-sm text-slate-500 mt-1">{session.description}</p>
|
||||
)}
|
||||
<div className="flex items-center gap-4 mt-2 text-xs text-slate-500">
|
||||
<span>Auditor: {session.auditor_name}</span>
|
||||
{session.auditor_organization && (
|
||||
<span>| {session.auditor_organization}</span>
|
||||
)}
|
||||
<span>| Erstellt: {new Date(session.created_at).toLocaleDateString('de-DE')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className={`text-2xl font-bold ${getComplianceColor(session.completion_percentage)}`}>
|
||||
{session.completion_percentage}%
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">
|
||||
{session.completed_items} / {session.total_items} Punkte
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="h-2 bg-slate-100 rounded-full overflow-hidden mb-4">
|
||||
<div
|
||||
className={`h-full transition-all ${
|
||||
session.completion_percentage >= 80
|
||||
? 'bg-green-500'
|
||||
: session.completion_percentage >= 50
|
||||
? 'bg-yellow-500'
|
||||
: 'bg-red-500'
|
||||
}`}
|
||||
style={{ width: `${session.completion_percentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Statistics */}
|
||||
<div className="grid grid-cols-3 gap-4 mb-4 text-sm">
|
||||
<div className="text-center p-3 bg-green-50 rounded-lg">
|
||||
<div className="font-semibold text-green-700">{session.compliant_count}</div>
|
||||
<div className="text-xs text-green-600">Konform</div>
|
||||
</div>
|
||||
<div className="text-center p-3 bg-red-50 rounded-lg">
|
||||
<div className="font-semibold text-red-700">{session.non_compliant_count}</div>
|
||||
<div className="text-xs text-red-600">Nicht Konform</div>
|
||||
</div>
|
||||
<div className="text-center p-3 bg-slate-50 rounded-lg">
|
||||
<div className="font-semibold text-slate-700">
|
||||
{session.total_items - session.completed_items}
|
||||
</div>
|
||||
<div className="text-xs text-slate-600">Ausstehend</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-2 pt-4 border-t border-slate-100">
|
||||
{session.status === 'draft' && (
|
||||
<button
|
||||
onClick={() => startSession(session.id)}
|
||||
className="px-3 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700"
|
||||
>
|
||||
Audit starten
|
||||
</button>
|
||||
)}
|
||||
{session.status === 'in_progress' && (
|
||||
<button
|
||||
onClick={() => completeSession(session.id)}
|
||||
className="px-3 py-2 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700"
|
||||
>
|
||||
Abschliessen
|
||||
</button>
|
||||
)}
|
||||
{(session.status === 'completed' || session.status === 'in_progress') && (
|
||||
<button
|
||||
onClick={() => downloadPdf(session.id)}
|
||||
disabled={generatingPdf === session.id}
|
||||
className="px-3 py-2 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 disabled:opacity-50 flex items-center gap-2"
|
||||
>
|
||||
{generatingPdf === session.id ? (
|
||||
<>
|
||||
<svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||
</svg>
|
||||
Generiere PDF...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-4 h-4" 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>
|
||||
PDF-Report
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
{(session.status === 'draft' || session.status === 'archived') && (
|
||||
<button
|
||||
onClick={() => deleteSession(session.id)}
|
||||
className="px-3 py-2 text-red-600 text-sm hover:text-red-700"
|
||||
>
|
||||
Loeschen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* New Session Tab */}
|
||||
{activeTab === 'new' && (
|
||||
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-slate-900 mb-4">Neues Audit erstellen</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Name */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">
|
||||
Audit-Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newSession.name}
|
||||
onChange={(e) => setNewSession({ ...newSession, name: e.target.value })}
|
||||
placeholder="z.B. DSGVO Jahresaudit 2026"
|
||||
className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">
|
||||
Beschreibung
|
||||
</label>
|
||||
<textarea
|
||||
value={newSession.description}
|
||||
onChange={(e) => setNewSession({ ...newSession, description: e.target.value })}
|
||||
rows={3}
|
||||
placeholder="Optionale Beschreibung des Audit-Umfangs"
|
||||
className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Auditor Info */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">
|
||||
Auditor Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newSession.auditor_name}
|
||||
onChange={(e) => setNewSession({ ...newSession, auditor_name: e.target.value })}
|
||||
placeholder="Name des Auditors"
|
||||
className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">
|
||||
E-Mail
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={newSession.auditor_email}
|
||||
onChange={(e) => setNewSession({ ...newSession, auditor_email: e.target.value })}
|
||||
placeholder="auditor@example.com"
|
||||
className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">
|
||||
Organisation
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newSession.auditor_organization}
|
||||
onChange={(e) => setNewSession({ ...newSession, auditor_organization: e.target.value })}
|
||||
placeholder="z.B. TUeV, Aufsichtsbehoerde"
|
||||
className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Regulations */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">
|
||||
Zu pruefende Regelwerke
|
||||
</label>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
{REGULATIONS.map((reg) => (
|
||||
<label
|
||||
key={reg.code}
|
||||
className={`flex items-center gap-3 p-3 border rounded-lg cursor-pointer transition-colors ${
|
||||
newSession.regulation_codes.includes(reg.code)
|
||||
? 'border-purple-500 bg-purple-50'
|
||||
: 'border-slate-200 hover:border-slate-300'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={newSession.regulation_codes.includes(reg.code)}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setNewSession({
|
||||
...newSession,
|
||||
regulation_codes: [...newSession.regulation_codes, reg.code],
|
||||
})
|
||||
} else {
|
||||
setNewSession({
|
||||
...newSession,
|
||||
regulation_codes: newSession.regulation_codes.filter((c) => c !== reg.code),
|
||||
})
|
||||
}
|
||||
}}
|
||||
className="w-4 h-4 text-purple-600"
|
||||
/>
|
||||
<div>
|
||||
<div className="font-medium text-slate-800">{reg.name}</div>
|
||||
<div className="text-xs text-slate-500">{reg.description}</div>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit */}
|
||||
<div className="pt-4 border-t border-slate-100">
|
||||
<button
|
||||
onClick={createSession}
|
||||
disabled={creating}
|
||||
className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 flex items-center gap-2"
|
||||
>
|
||||
{creating ? (
|
||||
<>
|
||||
<svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||
</svg>
|
||||
Erstelle...
|
||||
</>
|
||||
) : (
|
||||
'Audit-Session erstellen'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Export Options Tab */}
|
||||
{activeTab === 'export' && (
|
||||
<div className="space-y-6">
|
||||
{/* PDF Language Settings */}
|
||||
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
||||
<h3 className="font-semibold text-slate-900 mb-4">PDF-Export Einstellungen</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Sprache</label>
|
||||
<div className="flex gap-3">
|
||||
<label className={`flex items-center gap-2 px-4 py-2 border rounded-lg cursor-pointer ${pdfLanguage === 'de' ? 'border-purple-500 bg-purple-50' : 'border-slate-200'}`}>
|
||||
<input
|
||||
type="radio"
|
||||
checked={pdfLanguage === 'de'}
|
||||
onChange={() => setPdfLanguage('de')}
|
||||
className="w-4 h-4 text-purple-600"
|
||||
/>
|
||||
<span>Deutsch</span>
|
||||
</label>
|
||||
<label className={`flex items-center gap-2 px-4 py-2 border rounded-lg cursor-pointer ${pdfLanguage === 'en' ? 'border-purple-500 bg-purple-50' : 'border-slate-200'}`}>
|
||||
<input
|
||||
type="radio"
|
||||
checked={pdfLanguage === 'en'}
|
||||
onChange={() => setPdfLanguage('en')}
|
||||
className="w-4 h-4 text-purple-600"
|
||||
/>
|
||||
<span>English</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Export Types Info */}
|
||||
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
||||
<h3 className="font-semibold text-slate-900 mb-4">Verfuegbare Export-Formate</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-4 p-4 bg-slate-50 rounded-lg">
|
||||
<div className="w-10 h-10 rounded-lg bg-red-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-slate-800">PDF Audit Report</h4>
|
||||
<p className="text-sm text-slate-600 mt-1">
|
||||
Vollstaendiger Audit-Bericht mit Deckblatt, Executive Summary, Checkliste und digitalen Signaturen.
|
||||
Ideal fuer Aufsichtsbehoerden und offizielle Dokumentation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-4 bg-slate-50 rounded-lg">
|
||||
<div className="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-slate-800">ZIP Export-Paket</h4>
|
||||
<p className="text-sm text-slate-600 mt-1">
|
||||
Komplettes Export-Paket mit Regelwerken, Controls, Nachweisen und interaktivem HTML-Index.
|
||||
Fuer externe Auditoren zur detaillierten Pruefung.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-4 bg-slate-50 rounded-lg">
|
||||
<div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
|
||||
<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="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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>
|
||||
<div>
|
||||
<h4 className="font-medium text-slate-800">Compliance Report (JSON)</h4>
|
||||
<p className="text-sm text-slate-600 mt-1">
|
||||
Strukturierter Bericht mit Statistiken, Trends und Empfehlungen.
|
||||
Fuer Integration in andere Systeme und Dashboards.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tip */}
|
||||
<div className="bg-purple-50 border border-purple-200 rounded-xl p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<svg className="w-5 h-5 text-purple-600 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>
|
||||
<h4 className="font-medium text-purple-800">Tipp</h4>
|
||||
<p className="text-sm text-purple-700 mt-1">
|
||||
Der PDF-Report enthaelt SHA-256-Signaturen fuer alle Sign-Offs. Diese koennen zur Integritaetspruefung
|
||||
verwendet werden und belegen, dass die Bewertungen nicht nachtraeglich veraendert wurden.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user