660295e218
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>
349 lines
14 KiB
TypeScript
349 lines
14 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, useCallback } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { useSDK } from '@/lib/sdk'
|
|
import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
|
|
import { DocumentUploadSection, type UploadedDocument } from '@/components/sdk'
|
|
|
|
// =============================================================================
|
|
// TYPES
|
|
// =============================================================================
|
|
|
|
interface ProcessingActivity {
|
|
id: string
|
|
name: string
|
|
description: string
|
|
purpose: string
|
|
legalBasis: string
|
|
dataCategories: string[]
|
|
dataSubjects: string[]
|
|
recipients: string[]
|
|
thirdCountryTransfers: boolean
|
|
retentionPeriod: string
|
|
toms: string[]
|
|
status: 'active' | 'draft' | 'archived'
|
|
lastUpdated: Date
|
|
responsible: string
|
|
}
|
|
|
|
// =============================================================================
|
|
// MOCK DATA
|
|
// =============================================================================
|
|
|
|
const mockActivities: ProcessingActivity[] = [
|
|
{
|
|
id: 'vvt-1',
|
|
name: 'Personalverwaltung',
|
|
description: 'Verarbeitung von Mitarbeiterdaten fuer HR-Zwecke',
|
|
purpose: 'Durchfuehrung des Beschaeftigungsverhaeltnisses',
|
|
legalBasis: 'Art. 6 Abs. 1 lit. b, Art. 88 DSGVO i.V.m. BDSG',
|
|
dataCategories: ['Stammdaten', 'Kontaktdaten', 'Gehaltsdaten', 'Bankverbindung'],
|
|
dataSubjects: ['Mitarbeiter', 'Bewerber'],
|
|
recipients: ['Lohnbuero', 'Finanzamt', 'Sozialversicherungstraeger'],
|
|
thirdCountryTransfers: false,
|
|
retentionPeriod: '10 Jahre nach Ende des Beschaeftigungsverhaeltnisses',
|
|
toms: ['Zugriffskontrolle', 'Verschluesselung', 'Protokollierung'],
|
|
status: 'active',
|
|
lastUpdated: new Date('2024-01-15'),
|
|
responsible: 'HR-Abteilung',
|
|
},
|
|
{
|
|
id: 'vvt-2',
|
|
name: 'Kundenverwaltung (CRM)',
|
|
description: 'Verwaltung von Kundenbeziehungen und Vertriebsaktivitaeten',
|
|
purpose: 'Vertragserfuellung und Kundenbetreuung',
|
|
legalBasis: 'Art. 6 Abs. 1 lit. b DSGVO',
|
|
dataCategories: ['Kontaktdaten', 'Kaufhistorie', 'Kommunikationsverlauf'],
|
|
dataSubjects: ['Kunden', 'Interessenten'],
|
|
recipients: ['Vertrieb', 'Kundenservice'],
|
|
thirdCountryTransfers: true,
|
|
retentionPeriod: '3 Jahre nach letzter Interaktion',
|
|
toms: ['Zugriffskontrolle', 'Backups', 'Verschluesselung'],
|
|
status: 'active',
|
|
lastUpdated: new Date('2024-01-10'),
|
|
responsible: 'Vertriebsleitung',
|
|
},
|
|
{
|
|
id: 'vvt-3',
|
|
name: 'Newsletter-Marketing',
|
|
description: 'Versand von Marketing-E-Mails und Newslettern',
|
|
purpose: 'Direktmarketing und Kundenbindung',
|
|
legalBasis: 'Art. 6 Abs. 1 lit. a DSGVO (Einwilligung)',
|
|
dataCategories: ['E-Mail-Adresse', 'Name', 'Interaktionsdaten'],
|
|
dataSubjects: ['Newsletter-Abonnenten'],
|
|
recipients: ['Marketing-Abteilung', 'E-Mail-Dienstleister'],
|
|
thirdCountryTransfers: true,
|
|
retentionPeriod: 'Bis zum Widerruf der Einwilligung',
|
|
toms: ['Double-Opt-In', 'Abmeldelink', 'Protokollierung'],
|
|
status: 'active',
|
|
lastUpdated: new Date('2024-01-20'),
|
|
responsible: 'Marketing',
|
|
},
|
|
{
|
|
id: 'vvt-4',
|
|
name: 'KI-gestuetztes Recruiting',
|
|
description: 'Automatisierte Vorauswahl von Bewerbungen',
|
|
purpose: 'Effiziente Bewerberauswahl',
|
|
legalBasis: 'Art. 6 Abs. 1 lit. b, Art. 22 Abs. 2 lit. a DSGVO',
|
|
dataCategories: ['Bewerbungsunterlagen', 'Qualifikationen', 'Berufserfahrung'],
|
|
dataSubjects: ['Bewerber'],
|
|
recipients: ['HR-Abteilung', 'Fachabteilungen'],
|
|
thirdCountryTransfers: false,
|
|
retentionPeriod: '6 Monate nach Absage',
|
|
toms: ['Menschliche Aufsicht', 'Erklaerbarkeit', 'Bias-Pruefung'],
|
|
status: 'draft',
|
|
lastUpdated: new Date('2024-01-22'),
|
|
responsible: 'HR-Abteilung',
|
|
},
|
|
{
|
|
id: 'vvt-5',
|
|
name: 'Website-Analyse',
|
|
description: 'Analyse des Nutzerverhaltens auf der Website',
|
|
purpose: 'Verbesserung der Website und Nutzererfahrung',
|
|
legalBasis: 'Art. 6 Abs. 1 lit. a DSGVO (Einwilligung via Cookie-Banner)',
|
|
dataCategories: ['IP-Adresse', 'Seitenaufrufe', 'Verweildauer', 'Geraetedaten'],
|
|
dataSubjects: ['Website-Besucher'],
|
|
recipients: ['Marketing', 'Webentwicklung'],
|
|
thirdCountryTransfers: true,
|
|
retentionPeriod: '14 Monate',
|
|
toms: ['IP-Anonymisierung', 'Cookie-Einwilligung', 'Opt-Out'],
|
|
status: 'active',
|
|
lastUpdated: new Date('2024-01-05'),
|
|
responsible: 'Webmaster',
|
|
},
|
|
]
|
|
|
|
// =============================================================================
|
|
// COMPONENTS
|
|
// =============================================================================
|
|
|
|
function ActivityCard({ activity }: { activity: ProcessingActivity }) {
|
|
const statusColors = {
|
|
active: 'bg-green-100 text-green-700',
|
|
draft: 'bg-yellow-100 text-yellow-700',
|
|
archived: 'bg-gray-100 text-gray-500',
|
|
}
|
|
|
|
const statusLabels = {
|
|
active: 'Aktiv',
|
|
draft: 'Entwurf',
|
|
archived: 'Archiviert',
|
|
}
|
|
|
|
return (
|
|
<div className={`bg-white rounded-xl border-2 p-6 ${
|
|
activity.status === 'active' ? 'border-gray-200' :
|
|
activity.status === 'draft' ? 'border-yellow-200' : 'border-gray-300'
|
|
}`}>
|
|
<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 ${statusColors[activity.status]}`}>
|
|
{statusLabels[activity.status]}
|
|
</span>
|
|
{activity.thirdCountryTransfers && (
|
|
<span className="px-2 py-1 text-xs bg-orange-100 text-orange-700 rounded-full">
|
|
Drittlandtransfer
|
|
</span>
|
|
)}
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-900">{activity.name}</h3>
|
|
<p className="text-sm text-gray-500 mt-1">{activity.description}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 space-y-2 text-sm">
|
|
<div>
|
|
<span className="text-gray-500">Zweck: </span>
|
|
<span className="text-gray-700">{activity.purpose}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-gray-500">Rechtsgrundlage: </span>
|
|
<span className="text-gray-700">{activity.legalBasis}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-gray-500">Aufbewahrung: </span>
|
|
<span className="text-gray-700">{activity.retentionPeriod}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-3">
|
|
<span className="text-sm text-gray-500">Datenkategorien:</span>
|
|
<div className="flex flex-wrap gap-1 mt-1">
|
|
{activity.dataCategories.map(cat => (
|
|
<span key={cat} className="px-2 py-0.5 text-xs bg-blue-50 text-blue-600 rounded">
|
|
{cat}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-3">
|
|
<span className="text-sm text-gray-500">Betroffene:</span>
|
|
<div className="flex flex-wrap gap-1 mt-1">
|
|
{activity.dataSubjects.map(subj => (
|
|
<span key={subj} className="px-2 py-0.5 text-xs bg-purple-50 text-purple-600 rounded">
|
|
{subj}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-sm">
|
|
<div className="text-gray-500">
|
|
Verantwortlich: {activity.responsible} | Aktualisiert: {activity.lastUpdated.toLocaleDateString('de-DE')}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button className="px-3 py-1 text-purple-600 hover:bg-purple-50 rounded-lg transition-colors">
|
|
Bearbeiten
|
|
</button>
|
|
<button className="px-3 py-1 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
|
|
Exportieren
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// MAIN PAGE
|
|
// =============================================================================
|
|
|
|
export default function VVTPage() {
|
|
const router = useRouter()
|
|
const { state } = useSDK()
|
|
const [activities] = useState<ProcessingActivity[]>(mockActivities)
|
|
const [filter, setFilter] = useState<string>('all')
|
|
const [searchQuery, setSearchQuery] = useState('')
|
|
|
|
// Handle uploaded document
|
|
const handleDocumentProcessed = useCallback((doc: UploadedDocument) => {
|
|
console.log('[VVT Page] Document processed:', doc)
|
|
}, [])
|
|
|
|
// Open document in workflow editor
|
|
const handleOpenInEditor = useCallback((doc: UploadedDocument) => {
|
|
router.push(`/compliance/workflow?documentType=vvt&documentId=${doc.id}&mode=change`)
|
|
}, [router])
|
|
|
|
const filteredActivities = activities.filter(activity => {
|
|
const matchesFilter = filter === 'all' || activity.status === filter
|
|
const matchesSearch = searchQuery === '' ||
|
|
activity.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
activity.purpose.toLowerCase().includes(searchQuery.toLowerCase())
|
|
return matchesFilter && matchesSearch
|
|
})
|
|
|
|
const activeCount = activities.filter(a => a.status === 'active').length
|
|
const thirdCountryCount = activities.filter(a => a.thirdCountryTransfers).length
|
|
const totalDataCategories = [...new Set(activities.flatMap(a => a.dataCategories))].length
|
|
|
|
const stepInfo = STEP_EXPLANATIONS['vvt']
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Step Header */}
|
|
<StepHeader
|
|
stepId="vvt"
|
|
title={stepInfo.title}
|
|
description={stepInfo.description}
|
|
explanation={stepInfo.explanation}
|
|
tips={stepInfo.tips}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<button className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
|
|
Exportieren
|
|
</button>
|
|
<button className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
Neue Verarbeitung
|
|
</button>
|
|
</div>
|
|
</StepHeader>
|
|
|
|
{/* Document Upload Section */}
|
|
<DocumentUploadSection
|
|
documentType="vvt"
|
|
onDocumentProcessed={handleDocumentProcessed}
|
|
onOpenInEditor={handleOpenInEditor}
|
|
/>
|
|
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<div className="text-sm text-gray-500">Verarbeitungen</div>
|
|
<div className="text-3xl font-bold text-gray-900">{activities.length}</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-green-200 p-6">
|
|
<div className="text-sm text-green-600">Aktiv</div>
|
|
<div className="text-3xl font-bold text-green-600">{activeCount}</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-orange-200 p-6">
|
|
<div className="text-sm text-orange-600">Mit Drittlandtransfer</div>
|
|
<div className="text-3xl font-bold text-orange-600">{thirdCountryCount}</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-blue-200 p-6">
|
|
<div className="text-sm text-blue-600">Datenkategorien</div>
|
|
<div className="text-3xl font-bold text-blue-600">{totalDataCategories}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Search and Filter */}
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex-1 relative">
|
|
<svg className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
<input
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
placeholder="Verarbeitungen durchsuchen..."
|
|
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{['all', 'active', 'draft', 'archived'].map(f => (
|
|
<button
|
|
key={f}
|
|
onClick={() => setFilter(f)}
|
|
className={`px-3 py-1 text-sm rounded-full transition-colors ${
|
|
filter === f
|
|
? 'bg-purple-600 text-white'
|
|
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
{f === 'all' ? 'Alle' :
|
|
f === 'active' ? 'Aktiv' :
|
|
f === 'draft' ? 'Entwurf' : 'Archiviert'}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Activities List */}
|
|
<div className="space-y-4">
|
|
{filteredActivities.map(activity => (
|
|
<ActivityCard key={activity.id} activity={activity} />
|
|
))}
|
|
</div>
|
|
|
|
{filteredActivities.length === 0 && (
|
|
<div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
|
|
<div className="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
|
|
<svg className="w-8 h-8 text-gray-400" 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>
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-900">Keine Verarbeitungen gefunden</h3>
|
|
<p className="mt-2 text-gray-500">Passen Sie die Suche oder den Filter an.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|