24f02b52ed
- obligations: unused vendors state/fetch, unreachable filter==='ai' path - tom: unused vendorControlsLoading state, unused bulkUpdateTOMs import - loeschfristen: unused BASELINE_TEMPLATES imports, sdk hook, managingLegalHolds state - vvt: unused apiGetCompleteness/apiGetLibrary, 7 unused VVTLib* interfaces - vendor-compliance: 11 unused context methods, 6 unused selector hooks, ContractUploadData type Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2306 lines
108 KiB
TypeScript
2306 lines
108 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* VVT — Verarbeitungsverzeichnis (Art. 30 DSGVO)
|
|
*
|
|
* 3 Tabs:
|
|
* 1. Verzeichnis (Uebersicht + "Aus Scope generieren")
|
|
* 2. Verarbeitung bearbeiten (Detail-Editor)
|
|
* 3. Export & Compliance
|
|
*/
|
|
|
|
import { useState, useEffect, useCallback } from 'react'
|
|
import { useSDK } from '@/lib/sdk'
|
|
import StepHeader, { STEP_EXPLANATIONS } from '@/components/sdk/StepHeader/StepHeader'
|
|
import {
|
|
DATA_SUBJECT_CATEGORY_META,
|
|
PERSONAL_DATA_CATEGORY_META,
|
|
LEGAL_BASIS_META,
|
|
TRANSFER_MECHANISM_META,
|
|
ART9_CATEGORIES,
|
|
BUSINESS_FUNCTION_LABELS,
|
|
STATUS_LABELS,
|
|
STATUS_COLORS,
|
|
PROTECTION_LEVEL_LABELS,
|
|
DEPLOYMENT_LABELS,
|
|
REVIEW_INTERVAL_LABELS,
|
|
createEmptyActivity,
|
|
createDefaultOrgHeader,
|
|
generateVVTId,
|
|
isSpecialCategory,
|
|
} from '@/lib/sdk/vvt-types'
|
|
import type { VVTActivity, VVTOrganizationHeader, BusinessFunction } from '@/lib/sdk/vvt-types'
|
|
import {
|
|
generateActivities,
|
|
prefillFromScopeAnswers,
|
|
} from '@/lib/sdk/vvt-profiling'
|
|
|
|
// =============================================================================
|
|
// CONSTANTS
|
|
// =============================================================================
|
|
|
|
type Tab = 'verzeichnis' | 'editor' | 'export' | 'dokument' | 'processor'
|
|
|
|
// =============================================================================
|
|
// API CLIENT
|
|
// =============================================================================
|
|
|
|
const VVT_API_BASE = '/api/sdk/v1/compliance/vvt'
|
|
|
|
function activityFromApi(raw: any): VVTActivity {
|
|
return {
|
|
id: raw.id,
|
|
vvtId: raw.vvt_id,
|
|
name: raw.name || '',
|
|
description: raw.description || '',
|
|
purposes: raw.purposes || [],
|
|
legalBases: raw.legal_bases || [],
|
|
dataSubjectCategories: raw.data_subject_categories || [],
|
|
personalDataCategories: raw.personal_data_categories || [],
|
|
recipientCategories: raw.recipient_categories || [],
|
|
thirdCountryTransfers: raw.third_country_transfers || [],
|
|
retentionPeriod: raw.retention_period || { description: '' },
|
|
tomDescription: raw.tom_description || '',
|
|
businessFunction: raw.business_function || 'other',
|
|
systems: raw.systems || [],
|
|
deploymentModel: raw.deployment_model || 'cloud',
|
|
dataSources: raw.data_sources || [],
|
|
dataFlows: raw.data_flows || [],
|
|
protectionLevel: raw.protection_level || 'MEDIUM',
|
|
dpiaRequired: raw.dpia_required || false,
|
|
structuredToms: raw.structured_toms || { accessControl: [], confidentiality: [], integrity: [], availability: [], separation: [] },
|
|
status: raw.status || 'DRAFT',
|
|
responsible: raw.responsible || '',
|
|
owner: raw.owner || '',
|
|
createdAt: raw.created_at || new Date().toISOString(),
|
|
updatedAt: raw.updated_at || raw.created_at || new Date().toISOString(),
|
|
// Library refs
|
|
purposeRefs: raw.purpose_refs || undefined,
|
|
legalBasisRefs: raw.legal_basis_refs || undefined,
|
|
dataSubjectRefs: raw.data_subject_refs || undefined,
|
|
dataCategoryRefs: raw.data_category_refs || undefined,
|
|
recipientRefs: raw.recipient_refs || undefined,
|
|
retentionRuleRef: raw.retention_rule_ref || undefined,
|
|
transferMechanismRefs: raw.transfer_mechanism_refs || undefined,
|
|
tomRefs: raw.tom_refs || undefined,
|
|
linkedLoeschfristenIds: raw.linked_loeschfristen_ids || undefined,
|
|
linkedTomMeasureIds: raw.linked_tom_measure_ids || undefined,
|
|
sourceTemplateId: raw.source_template_id || undefined,
|
|
riskScore: raw.risk_score ?? undefined,
|
|
art30Completeness: raw.art30_completeness || undefined,
|
|
}
|
|
}
|
|
|
|
function activityToApi(act: VVTActivity): Record<string, unknown> {
|
|
return {
|
|
vvt_id: act.vvtId,
|
|
name: act.name,
|
|
description: act.description,
|
|
purposes: act.purposes,
|
|
legal_bases: act.legalBases,
|
|
data_subject_categories: act.dataSubjectCategories,
|
|
personal_data_categories: act.personalDataCategories,
|
|
recipient_categories: act.recipientCategories,
|
|
third_country_transfers: act.thirdCountryTransfers,
|
|
retention_period: act.retentionPeriod,
|
|
tom_description: act.tomDescription,
|
|
business_function: act.businessFunction,
|
|
systems: act.systems,
|
|
deployment_model: act.deploymentModel,
|
|
data_sources: act.dataSources,
|
|
data_flows: act.dataFlows,
|
|
protection_level: act.protectionLevel,
|
|
dpia_required: act.dpiaRequired,
|
|
structured_toms: act.structuredToms,
|
|
status: act.status,
|
|
responsible: act.responsible,
|
|
owner: act.owner,
|
|
// Library refs
|
|
purpose_refs: act.purposeRefs || null,
|
|
legal_basis_refs: act.legalBasisRefs || null,
|
|
data_subject_refs: act.dataSubjectRefs || null,
|
|
data_category_refs: act.dataCategoryRefs || null,
|
|
recipient_refs: act.recipientRefs || null,
|
|
retention_rule_ref: act.retentionRuleRef || null,
|
|
transfer_mechanism_refs: act.transferMechanismRefs || null,
|
|
tom_refs: act.tomRefs || null,
|
|
source_template_id: act.sourceTemplateId || null,
|
|
risk_score: act.riskScore ?? null,
|
|
linked_loeschfristen_ids: act.linkedLoeschfristenIds || null,
|
|
linked_tom_measure_ids: act.linkedTomMeasureIds || null,
|
|
art30_completeness: act.art30Completeness || null,
|
|
}
|
|
}
|
|
|
|
function orgHeaderFromApi(raw: any): VVTOrganizationHeader {
|
|
return {
|
|
organizationName: raw.organization_name || '',
|
|
industry: raw.industry || '',
|
|
locations: raw.locations || [],
|
|
employeeCount: raw.employee_count || 0,
|
|
dpoName: raw.dpo_name || '',
|
|
dpoContact: raw.dpo_contact || '',
|
|
vvtVersion: raw.vvt_version || '1.0',
|
|
lastReviewDate: raw.last_review_date || '',
|
|
nextReviewDate: raw.next_review_date || '',
|
|
reviewInterval: raw.review_interval || 'annual',
|
|
}
|
|
}
|
|
|
|
function orgHeaderToApi(org: VVTOrganizationHeader): Record<string, unknown> {
|
|
return {
|
|
organization_name: org.organizationName,
|
|
industry: org.industry,
|
|
locations: org.locations,
|
|
employee_count: org.employeeCount,
|
|
dpo_name: org.dpoName,
|
|
dpo_contact: org.dpoContact,
|
|
vvt_version: org.vvtVersion,
|
|
last_review_date: org.lastReviewDate || null,
|
|
next_review_date: org.nextReviewDate || null,
|
|
review_interval: org.reviewInterval,
|
|
}
|
|
}
|
|
|
|
async function apiListActivities(): Promise<VVTActivity[]> {
|
|
const res = await fetch(`${VVT_API_BASE}/activities`)
|
|
if (!res.ok) throw new Error(`GET activities failed: ${res.status}`)
|
|
const data = await res.json()
|
|
return data.map(activityFromApi)
|
|
}
|
|
|
|
async function apiGetOrganization(): Promise<VVTOrganizationHeader | null> {
|
|
const res = await fetch(`${VVT_API_BASE}/organization`)
|
|
if (!res.ok) return null
|
|
const data = await res.json()
|
|
if (!data) return null
|
|
return orgHeaderFromApi(data)
|
|
}
|
|
|
|
async function apiCreateActivity(act: VVTActivity): Promise<VVTActivity> {
|
|
const res = await fetch(`${VVT_API_BASE}/activities`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(activityToApi(act)),
|
|
})
|
|
if (!res.ok) throw new Error(`POST activity failed: ${res.status}`)
|
|
return activityFromApi(await res.json())
|
|
}
|
|
|
|
async function apiUpdateActivity(id: string, act: VVTActivity): Promise<VVTActivity> {
|
|
const res = await fetch(`${VVT_API_BASE}/activities/${id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(activityToApi(act)),
|
|
})
|
|
if (!res.ok) throw new Error(`PUT activity failed: ${res.status}`)
|
|
return activityFromApi(await res.json())
|
|
}
|
|
|
|
async function apiDeleteActivity(id: string): Promise<void> {
|
|
const res = await fetch(`${VVT_API_BASE}/activities/${id}`, { method: 'DELETE' })
|
|
if (!res.ok) throw new Error(`DELETE activity failed: ${res.status}`)
|
|
}
|
|
|
|
async function apiUpsertOrganization(org: VVTOrganizationHeader): Promise<VVTOrganizationHeader> {
|
|
const res = await fetch(`${VVT_API_BASE}/organization`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(orgHeaderToApi(org)),
|
|
})
|
|
if (!res.ok) throw new Error(`PUT organization failed: ${res.status}`)
|
|
return orgHeaderFromApi(await res.json())
|
|
}
|
|
|
|
// Library + Template API
|
|
interface ProcessTemplate {
|
|
id: string; name: string; description?: string; business_function: string
|
|
purpose_refs: string[]; legal_basis_refs: string[]; data_subject_refs: string[]
|
|
data_category_refs: string[]; recipient_refs: string[]; tom_refs: string[]
|
|
retention_rule_ref?: string; typical_systems: string[]
|
|
protection_level: string; dpia_required: boolean; risk_score?: number
|
|
tags: string[]; sort_order: number
|
|
}
|
|
|
|
async function apiListTemplates(businessFunction?: string): Promise<ProcessTemplate[]> {
|
|
const params = businessFunction ? `?business_function=${businessFunction}` : ''
|
|
const res = await fetch(`${VVT_API_BASE}/templates${params}`)
|
|
if (!res.ok) return []
|
|
return res.json()
|
|
}
|
|
|
|
async function apiInstantiateTemplate(templateId: string): Promise<VVTActivity> {
|
|
const res = await fetch(`${VVT_API_BASE}/templates/${templateId}/instantiate`, { method: 'POST' })
|
|
if (!res.ok) throw new Error(`POST instantiate failed: ${res.status}`)
|
|
return activityFromApi(await res.json())
|
|
}
|
|
|
|
// =============================================================================
|
|
// MAIN PAGE
|
|
// =============================================================================
|
|
|
|
export default function VVTPage() {
|
|
const { state } = useSDK()
|
|
const [tab, setTab] = useState<Tab>('verzeichnis')
|
|
const [activities, setActivities] = useState<VVTActivity[]>([])
|
|
const [orgHeader, setOrgHeader] = useState<VVTOrganizationHeader>(createDefaultOrgHeader())
|
|
const [editingId, setEditingId] = useState<string | null>(null)
|
|
const [filter, setFilter] = useState('all')
|
|
const [searchQuery, setSearchQuery] = useState('')
|
|
const [sortBy, setSortBy] = useState<'name' | 'date' | 'status'>('name')
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [apiError, setApiError] = useState<string | null>(null)
|
|
|
|
// Load activities + org header from API
|
|
useEffect(() => {
|
|
async function loadFromApi() {
|
|
setIsLoading(true)
|
|
setApiError(null)
|
|
try {
|
|
const [acts, org] = await Promise.all([
|
|
apiListActivities(),
|
|
apiGetOrganization(),
|
|
])
|
|
setActivities(acts)
|
|
if (org) setOrgHeader(org)
|
|
} catch (err) {
|
|
setApiError('Fehler beim Laden der VVT-Daten. Bitte Verbindung prüfen.')
|
|
console.error('VVT API load error:', err)
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
loadFromApi()
|
|
}, [])
|
|
|
|
// Computed stats
|
|
const activeCount = activities.filter(a => a.status === 'APPROVED').length
|
|
const draftCount = activities.filter(a => a.status === 'DRAFT').length
|
|
const thirdCountryCount = activities.filter(a => a.thirdCountryTransfers.length > 0).length
|
|
const art9Count = activities.filter(a => a.personalDataCategories.some(c => ART9_CATEGORIES.includes(c))).length
|
|
|
|
// Filtered & sorted activities
|
|
const filteredActivities = activities
|
|
.filter(a => {
|
|
const matchesFilter = filter === 'all' || a.status === filter || (filter === 'thirdcountry' && a.thirdCountryTransfers.length > 0) || (filter === 'art9' && a.personalDataCategories.some(c => ART9_CATEGORIES.includes(c)))
|
|
const matchesSearch = searchQuery === '' ||
|
|
a.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
a.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
a.vvtId.toLowerCase().includes(searchQuery.toLowerCase())
|
|
return matchesFilter && matchesSearch
|
|
})
|
|
.sort((a, b) => {
|
|
if (sortBy === 'name') return a.name.localeCompare(b.name)
|
|
if (sortBy === 'date') return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
|
|
return a.status.localeCompare(b.status)
|
|
})
|
|
|
|
const editingActivity = editingId ? activities.find(a => a.id === editingId) : null
|
|
|
|
const stepInfo = STEP_EXPLANATIONS['vvt']
|
|
|
|
// Tab buttons
|
|
const tabs: { id: Tab; label: string; count?: number }[] = [
|
|
{ id: 'verzeichnis', label: 'Verzeichnis', count: activities.length },
|
|
{ id: 'editor', label: 'Verarbeitung bearbeiten' },
|
|
{ id: 'dokument', label: 'VVT-Dokument' },
|
|
{ id: 'processor', label: 'Auftragsverarbeiter (Abs. 2)' },
|
|
{ id: 'export', label: 'Export & Compliance' },
|
|
]
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<StepHeader
|
|
stepId="vvt"
|
|
title={stepInfo.title}
|
|
description={stepInfo.description}
|
|
explanation={stepInfo.explanation}
|
|
tips={stepInfo.tips}
|
|
/>
|
|
|
|
{apiError && (
|
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4 text-sm text-red-700">
|
|
{apiError}
|
|
</div>
|
|
)}
|
|
|
|
{/* Tab Navigation */}
|
|
<div className="flex items-center gap-1 bg-gray-100 p-1 rounded-lg">
|
|
{tabs.map(t => (
|
|
<button
|
|
key={t.id}
|
|
onClick={() => setTab(t.id)}
|
|
className={`flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md transition-colors ${
|
|
tab === t.id ? 'bg-white text-purple-700 shadow-sm' : 'text-gray-600 hover:text-gray-900'
|
|
}`}
|
|
>
|
|
{t.label}
|
|
{t.count !== undefined && (
|
|
<span className={`px-1.5 py-0.5 text-xs rounded-full ${tab === t.id ? 'bg-purple-100 text-purple-700' : 'bg-gray-200 text-gray-500'}`}>
|
|
{t.count}
|
|
</span>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Tab Content */}
|
|
{tab === 'verzeichnis' && (
|
|
<TabVerzeichnis
|
|
activities={filteredActivities}
|
|
allActivities={activities}
|
|
activeCount={activeCount}
|
|
draftCount={draftCount}
|
|
thirdCountryCount={thirdCountryCount}
|
|
art9Count={art9Count}
|
|
filter={filter}
|
|
setFilter={setFilter}
|
|
searchQuery={searchQuery}
|
|
setSearchQuery={setSearchQuery}
|
|
sortBy={sortBy}
|
|
setSortBy={setSortBy}
|
|
scopeAnswers={state.complianceScope?.answers}
|
|
onEdit={(id) => { setEditingId(id); setTab('editor') }}
|
|
onNew={async () => {
|
|
const vvtId = generateVVTId(activities.map(a => a.vvtId))
|
|
const newAct = createEmptyActivity(vvtId)
|
|
try {
|
|
const created = await apiCreateActivity(newAct)
|
|
setActivities(prev => [...prev, created])
|
|
setEditingId(created.id)
|
|
setTab('editor')
|
|
} catch (err) {
|
|
setApiError('Fehler beim Anlegen der Verarbeitung.')
|
|
console.error(err)
|
|
}
|
|
}}
|
|
onDelete={async (id) => {
|
|
try {
|
|
await apiDeleteActivity(id)
|
|
setActivities(prev => prev.filter(a => a.id !== id))
|
|
} catch (err) {
|
|
setApiError('Fehler beim Löschen der Verarbeitung.')
|
|
console.error(err)
|
|
}
|
|
}}
|
|
onAdoptGenerated={async (newActivities) => {
|
|
const created: VVTActivity[] = []
|
|
for (const act of newActivities) {
|
|
try {
|
|
const saved = await apiCreateActivity(act)
|
|
created.push(saved)
|
|
} catch (err) {
|
|
console.error('Failed to create activity from scope:', err)
|
|
}
|
|
}
|
|
if (created.length > 0) setActivities(prev => [...prev, ...created])
|
|
}}
|
|
onNewFromTemplate={async (templateId) => {
|
|
try {
|
|
const created = await apiInstantiateTemplate(templateId)
|
|
setActivities(prev => [...prev, created])
|
|
setEditingId(created.id)
|
|
setTab('editor')
|
|
} catch (err) {
|
|
setApiError('Fehler beim Erstellen aus Vorlage.')
|
|
console.error(err)
|
|
}
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{tab === 'editor' && (
|
|
<TabEditor
|
|
activity={editingActivity}
|
|
activities={activities}
|
|
onSave={async (updated) => {
|
|
try {
|
|
const saved = await apiUpdateActivity(updated.id, updated)
|
|
setActivities(prev => prev.map(a => a.id === saved.id ? saved : a))
|
|
} catch (err) {
|
|
setApiError('Fehler beim Speichern der Verarbeitung.')
|
|
console.error(err)
|
|
}
|
|
}}
|
|
onBack={() => setTab('verzeichnis')}
|
|
onSelectActivity={(id) => setEditingId(id)}
|
|
/>
|
|
)}
|
|
|
|
{tab === 'dokument' && (
|
|
<TabDokument activities={activities} orgHeader={orgHeader} />
|
|
)}
|
|
|
|
{tab === 'processor' && (
|
|
<TabProcessor orgHeader={orgHeader} />
|
|
)}
|
|
|
|
{tab === 'export' && (
|
|
<TabExport
|
|
activities={activities}
|
|
orgHeader={orgHeader}
|
|
onUpdateOrgHeader={async (org) => {
|
|
try {
|
|
const saved = await apiUpsertOrganization(org)
|
|
setOrgHeader(saved)
|
|
} catch (err) {
|
|
setApiError('Fehler beim Speichern der Organisationsdaten.')
|
|
console.error(err)
|
|
}
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// TAB 1: VERZEICHNIS
|
|
// =============================================================================
|
|
|
|
function TabVerzeichnis({
|
|
activities, allActivities, activeCount, draftCount, thirdCountryCount, art9Count,
|
|
filter, setFilter, searchQuery, setSearchQuery, sortBy, setSortBy,
|
|
scopeAnswers, onEdit, onNew, onDelete, onAdoptGenerated, onNewFromTemplate,
|
|
}: {
|
|
activities: VVTActivity[]
|
|
allActivities: VVTActivity[]
|
|
activeCount: number
|
|
draftCount: number
|
|
thirdCountryCount: number
|
|
art9Count: number
|
|
filter: string
|
|
setFilter: (f: string) => void
|
|
searchQuery: string
|
|
setSearchQuery: (q: string) => void
|
|
sortBy: string
|
|
setSortBy: (s: 'name' | 'date' | 'status') => void
|
|
scopeAnswers?: import('@/lib/sdk/compliance-scope-types').ScopeProfilingAnswer[]
|
|
onEdit: (id: string) => void
|
|
onNew: () => void
|
|
onDelete: (id: string) => void
|
|
onAdoptGenerated: (activities: VVTActivity[]) => void
|
|
onNewFromTemplate: (templateId: string) => void
|
|
}) {
|
|
const [scopePreview, setScopePreview] = useState<VVTActivity[] | null>(null)
|
|
const [isGenerating, setIsGenerating] = useState(false)
|
|
const [showTemplatePicker, setShowTemplatePicker] = useState(false)
|
|
const [templates, setTemplates] = useState<ProcessTemplate[]>([])
|
|
const [templateFilter, setTemplateFilter] = useState<string>('all')
|
|
const [templatesLoading, setTemplatesLoading] = useState(false)
|
|
|
|
const handleGenerateFromScope = useCallback(() => {
|
|
if (!scopeAnswers) return
|
|
setIsGenerating(true)
|
|
try {
|
|
const profilingAnswers = prefillFromScopeAnswers(scopeAnswers)
|
|
const result = generateActivities(profilingAnswers)
|
|
setScopePreview(result.generatedActivities)
|
|
} finally {
|
|
setIsGenerating(false)
|
|
}
|
|
}, [scopeAnswers])
|
|
|
|
const handleAdoptPreview = useCallback(() => {
|
|
if (!scopePreview) return
|
|
onAdoptGenerated(scopePreview)
|
|
setScopePreview(null)
|
|
}, [scopePreview, onAdoptGenerated])
|
|
|
|
// Preview mode for generated activities
|
|
if (scopePreview) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">Generierte Verarbeitungen</h3>
|
|
<p className="text-sm text-gray-500 mb-4">
|
|
Basierend auf Ihrer Scope-Analyse wurden {scopePreview.length} Verarbeitungstaetigkeiten generiert.
|
|
Sie koennen einzelne Eintraege abwaehlen, bevor Sie diese uebernehmen.
|
|
</p>
|
|
<div className="space-y-2">
|
|
{scopePreview.map((a, i) => (
|
|
<div key={a.id} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
|
|
<input type="checkbox" defaultChecked className="w-4 h-4 text-purple-600 rounded"
|
|
onChange={(e) => {
|
|
if (!e.target.checked) {
|
|
setScopePreview(scopePreview.filter((_, j) => j !== i))
|
|
}
|
|
}} />
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-mono text-xs text-gray-400">{a.vvtId}</span>
|
|
<span className="text-sm font-medium text-gray-900">{a.name}</span>
|
|
<span className="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">{BUSINESS_FUNCTION_LABELS[a.businessFunction]}</span>
|
|
</div>
|
|
<p className="text-xs text-gray-500 truncate">{a.description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<button onClick={() => setScopePreview(null)} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg">
|
|
Abbrechen
|
|
</button>
|
|
<button onClick={handleAdoptPreview} className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
|
|
Alle {scopePreview.length} uebernehmen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Scope Generate Button */}
|
|
{scopeAnswers && scopeAnswers.length > 0 && (
|
|
<div className="bg-blue-50 border border-blue-200 rounded-xl p-4 flex items-center justify-between">
|
|
<div>
|
|
<h4 className="text-sm font-medium text-blue-900">Aus Scope-Analyse generieren</h4>
|
|
<p className="text-xs text-blue-700 mt-0.5">
|
|
Erstellen Sie automatisch Verarbeitungstaetigkeiten basierend auf Ihren Scope-Profiling-Antworten.
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={handleGenerateFromScope}
|
|
disabled={isGenerating}
|
|
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm whitespace-nowrap disabled:opacity-50"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
{isGenerating ? 'Generiere...' : 'Generieren'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-3">
|
|
<StatCard label="Gesamt" value={allActivities.length} color="gray" />
|
|
<StatCard label="Genehmigt" value={activeCount} color="green" />
|
|
<StatCard label="Entwurf" value={draftCount} color="yellow" />
|
|
<StatCard label="Drittland" value={thirdCountryCount} color="orange" />
|
|
<StatCard label="Art. 9 Daten" value={art9Count} color="red" />
|
|
</div>
|
|
|
|
{/* Search + Filter + New */}
|
|
<div className="flex flex-col md:flex-row items-start md:items-center gap-3">
|
|
<div className="flex-1 relative w-full">
|
|
<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="VVT-ID, Name oder Beschreibung suchen..."
|
|
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 flex-wrap">
|
|
{[
|
|
{ key: 'all', label: 'Alle' },
|
|
{ key: 'DRAFT', label: 'Entwurf' },
|
|
{ key: 'REVIEW', label: 'Pruefung' },
|
|
{ key: 'APPROVED', label: 'Genehmigt' },
|
|
{ key: 'thirdcountry', label: 'Drittland' },
|
|
{ key: 'art9', label: 'Art. 9' },
|
|
].map(f => (
|
|
<button
|
|
key={f.key}
|
|
onClick={() => setFilter(f.key)}
|
|
className={`px-3 py-1 text-sm rounded-full transition-colors ${
|
|
filter === f.key ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
{f.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<select
|
|
value={sortBy}
|
|
onChange={(e) => setSortBy(e.target.value as 'name' | 'date' | 'status')}
|
|
className="px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
|
>
|
|
<option value="name">Name</option>
|
|
<option value="date">Datum</option>
|
|
<option value="status">Status</option>
|
|
</select>
|
|
<button
|
|
onClick={async () => {
|
|
setShowTemplatePicker(true)
|
|
if (templates.length === 0) {
|
|
setTemplatesLoading(true)
|
|
try {
|
|
const t = await apiListTemplates()
|
|
setTemplates(t)
|
|
} finally {
|
|
setTemplatesLoading(false)
|
|
}
|
|
}
|
|
}}
|
|
className="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors text-sm whitespace-nowrap"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2" />
|
|
</svg>
|
|
Aus Vorlage erstellen
|
|
</button>
|
|
<button
|
|
onClick={onNew}
|
|
className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm whitespace-nowrap"
|
|
>
|
|
<svg className="w-4 h-4" 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>
|
|
|
|
{/* Activity Cards */}
|
|
<div className="space-y-3">
|
|
{activities.map(activity => (
|
|
<ActivityCard key={activity.id} activity={activity} onEdit={onEdit} onDelete={onDelete} />
|
|
))}
|
|
</div>
|
|
|
|
{activities.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 max-w-md mx-auto">
|
|
Erstellen Sie eine neue Verarbeitung manuell oder generieren Sie Eintraege automatisch aus Ihrer Scope-Analyse.
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Template Picker Modal */}
|
|
{showTemplatePicker && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={() => setShowTemplatePicker(false)}>
|
|
<div className="bg-white rounded-2xl shadow-xl w-full max-w-3xl max-h-[80vh] overflow-hidden" onClick={e => e.stopPropagation()}>
|
|
<div className="p-6 border-b border-gray-200">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-gray-900">Vorlage auswaehlen</h3>
|
|
<p className="text-sm text-gray-500 mt-0.5">Waehlen Sie eine Standard-Vorlage fuer die neue Verarbeitungstaetigkeit</p>
|
|
</div>
|
|
<button onClick={() => setShowTemplatePicker(false)} className="p-2 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100">
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div className="flex items-center gap-2 mt-4 flex-wrap">
|
|
{[
|
|
{ key: 'all', label: 'Alle' },
|
|
{ key: 'hr', label: 'Personal' },
|
|
{ key: 'finance', label: 'Finanzen' },
|
|
{ key: 'sales_crm', label: 'Vertrieb' },
|
|
{ key: 'marketing', label: 'Marketing' },
|
|
{ key: 'support', label: 'Support' },
|
|
{ key: 'it_operations', label: 'IT' },
|
|
{ key: 'other', label: 'Sonstiges' },
|
|
].map(f => (
|
|
<button
|
|
key={f.key}
|
|
onClick={() => setTemplateFilter(f.key)}
|
|
className={`px-3 py-1 text-xs rounded-full transition-colors ${
|
|
templateFilter === f.key ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
{f.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="overflow-y-auto p-6 max-h-[calc(80vh-180px)]">
|
|
{templatesLoading ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{templates
|
|
.filter(t => templateFilter === 'all' || t.business_function === templateFilter)
|
|
.map(t => (
|
|
<button
|
|
key={t.id}
|
|
onClick={() => {
|
|
setShowTemplatePicker(false)
|
|
onNewFromTemplate(t.id)
|
|
}}
|
|
className="w-full text-left p-4 bg-gray-50 rounded-xl hover:bg-indigo-50 hover:border-indigo-200 border border-transparent transition-colors"
|
|
>
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<span className="text-sm font-semibold text-gray-900">{t.name}</span>
|
|
<span className="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">
|
|
{BUSINESS_FUNCTION_LABELS[t.business_function as BusinessFunction] || t.business_function}
|
|
</span>
|
|
{t.dpia_required && (
|
|
<span className="px-2 py-0.5 text-xs bg-purple-100 text-purple-700 rounded-full">DSFA</span>
|
|
)}
|
|
<span className="px-2 py-0.5 text-xs bg-gray-100 text-gray-500 rounded-full">{PROTECTION_LEVEL_LABELS[t.protection_level] || t.protection_level}</span>
|
|
</div>
|
|
{t.description && <p className="text-xs text-gray-500 line-clamp-2">{t.description}</p>}
|
|
<div className="flex items-center gap-3 mt-2 text-xs text-gray-400">
|
|
<span>{t.data_subject_refs?.length || 0} Betroffene</span>
|
|
<span>{t.data_category_refs?.length || 0} Datenkategorien</span>
|
|
<span>{t.tom_refs?.length || 0} TOMs</span>
|
|
{t.retention_rule_ref && <span>Loeschfrist: {t.retention_rule_ref}</span>}
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function StatCard({ label, value, color }: { label: string; value: number; color: string }) {
|
|
const borderColors: Record<string, string> = {
|
|
gray: 'border-gray-200', green: 'border-green-200', yellow: 'border-yellow-200', orange: 'border-orange-200', red: 'border-red-200',
|
|
}
|
|
const textColors: Record<string, string> = {
|
|
gray: 'text-gray-600', green: 'text-green-600', yellow: 'text-yellow-600', orange: 'text-orange-600', red: 'text-red-600',
|
|
}
|
|
return (
|
|
<div className={`bg-white rounded-xl border ${borderColors[color]} p-4`}>
|
|
<div className={`text-sm ${textColors[color]}`}>{label}</div>
|
|
<div className={`text-2xl font-bold ${textColors[color]}`}>{value}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ActivityCard({ activity, onEdit, onDelete }: { activity: VVTActivity; onEdit: (id: string) => void; onDelete: (id: string) => void }) {
|
|
const hasArt9 = activity.personalDataCategories.some(c => ART9_CATEGORIES.includes(c))
|
|
const hasThirdCountry = activity.thirdCountryTransfers.length > 0
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl border border-gray-200 p-5 hover:border-purple-200 transition-colors">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
|
<span className="text-xs font-mono text-gray-400">{activity.vvtId}</span>
|
|
<span className={`px-2 py-0.5 text-xs rounded-full ${STATUS_COLORS[activity.status] || 'bg-gray-100 text-gray-600'}`}>
|
|
{STATUS_LABELS[activity.status] || activity.status}
|
|
</span>
|
|
{hasArt9 && (
|
|
<span className="px-2 py-0.5 text-xs bg-red-100 text-red-700 rounded-full">Art. 9</span>
|
|
)}
|
|
{hasThirdCountry && (
|
|
<span className="px-2 py-0.5 text-xs bg-orange-100 text-orange-700 rounded-full">Drittland</span>
|
|
)}
|
|
{activity.dpiaRequired && (
|
|
<span className="px-2 py-0.5 text-xs bg-purple-100 text-purple-700 rounded-full">DSFA</span>
|
|
)}
|
|
{activity.sourceTemplateId && (
|
|
<span className="px-2 py-0.5 text-xs bg-indigo-100 text-indigo-700 rounded-full">Vorlage</span>
|
|
)}
|
|
</div>
|
|
<h3 className="text-base font-semibold text-gray-900 truncate">{activity.name || '(Ohne Namen)'}</h3>
|
|
{activity.description && (
|
|
<p className="text-sm text-gray-500 mt-0.5 line-clamp-1">{activity.description}</p>
|
|
)}
|
|
<div className="flex items-center gap-4 mt-2 text-xs text-gray-400">
|
|
<span>{BUSINESS_FUNCTION_LABELS[activity.businessFunction]}</span>
|
|
<span>{activity.responsible || 'Kein Verantwortlicher'}</span>
|
|
<span>Aktualisiert: {new Date(activity.updatedAt).toLocaleDateString('de-DE')}</span>
|
|
{activity.art30Completeness && (
|
|
<span className={`font-medium ${activity.art30Completeness.score >= 80 ? 'text-green-600' : activity.art30Completeness.score >= 50 ? 'text-yellow-600' : 'text-red-600'}`}>
|
|
Art. 30: {activity.art30Completeness.score}%
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-1 ml-4">
|
|
<button
|
|
onClick={() => onEdit(activity.id)}
|
|
className="px-3 py-1.5 text-sm text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
|
|
>
|
|
Bearbeiten
|
|
</button>
|
|
<button
|
|
onClick={() => { if (confirm('Verarbeitung loeschen?')) onDelete(activity.id) }}
|
|
className="px-2 py-1.5 text-sm text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// TAB 2: EDITOR
|
|
// =============================================================================
|
|
|
|
function TabEditor({
|
|
activity, activities, onSave, onBack, onSelectActivity,
|
|
}: {
|
|
activity: VVTActivity | null | undefined
|
|
activities: VVTActivity[]
|
|
onSave: (updated: VVTActivity) => void
|
|
onBack: () => void
|
|
onSelectActivity: (id: string) => void
|
|
}) {
|
|
const [local, setLocal] = useState<VVTActivity | null>(null)
|
|
const [showAdvanced, setShowAdvanced] = useState(false)
|
|
|
|
useEffect(() => {
|
|
setLocal(activity ? { ...activity } : null)
|
|
}, [activity])
|
|
|
|
if (!local) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="bg-white rounded-xl border border-gray-200 p-8 text-center">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">Keine Verarbeitung ausgewaehlt</h3>
|
|
<p className="text-gray-500 mb-4">Waehlen Sie eine Verarbeitung aus dem Verzeichnis oder erstellen Sie eine neue.</p>
|
|
<button onClick={onBack} className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
|
|
Zum Verzeichnis
|
|
</button>
|
|
</div>
|
|
{activities.length > 0 && (
|
|
<div className="bg-white rounded-xl border border-gray-200 p-4">
|
|
<h4 className="font-medium text-gray-700 mb-3">Verarbeitungen zum Bearbeiten:</h4>
|
|
<div className="space-y-1">
|
|
{activities.map(a => (
|
|
<button
|
|
key={a.id}
|
|
onClick={() => onSelectActivity(a.id)}
|
|
className="w-full text-left px-3 py-2 rounded-lg hover:bg-purple-50 text-sm flex items-center justify-between"
|
|
>
|
|
<span><span className="font-mono text-gray-400 mr-2">{a.vvtId}</span>{a.name || '(Ohne Namen)'}</span>
|
|
<span className={`px-2 py-0.5 text-xs rounded-full ${STATUS_COLORS[a.status]}`}>{STATUS_LABELS[a.status]}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const update = (patch: Partial<VVTActivity>) => setLocal(prev => prev ? { ...prev, ...patch } : prev)
|
|
|
|
const handleSave = () => {
|
|
if (local) onSave(local)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<button onClick={onBack} className="p-2 hover:bg-gray-100 rounded-lg">
|
|
<svg className="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
</button>
|
|
<div>
|
|
<span className="text-sm font-mono text-gray-400">{local.vvtId}</span>
|
|
<h2 className="text-lg font-bold text-gray-900">{local.name || 'Neue Verarbeitung'}</h2>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<select
|
|
value={local.status}
|
|
onChange={(e) => update({ status: e.target.value as VVTActivity['status'] })}
|
|
className="px-3 py-1.5 border border-gray-300 rounded-lg text-sm"
|
|
>
|
|
<option value="DRAFT">Entwurf</option>
|
|
<option value="REVIEW">In Pruefung</option>
|
|
<option value="APPROVED">Genehmigt</option>
|
|
<option value="ARCHIVED">Archiviert</option>
|
|
</select>
|
|
<button onClick={handleSave} className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm">
|
|
Speichern
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Form */}
|
|
<div className="bg-white rounded-xl border border-gray-200 divide-y divide-gray-100">
|
|
{/* Bezeichnung + Beschreibung */}
|
|
<FormSection title="Grunddaten">
|
|
<FormField label="Bezeichnung *">
|
|
<input type="text" value={local.name} onChange={(e) => update({ name: e.target.value })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
placeholder="z.B. Mitarbeiterverwaltung" />
|
|
</FormField>
|
|
<FormField label="Beschreibung">
|
|
<textarea value={local.description} onChange={(e) => update({ description: e.target.value })}
|
|
rows={2} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
placeholder="Kurze Beschreibung der Verarbeitung" />
|
|
</FormField>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<FormField label="Verantwortlich">
|
|
<input type="text" value={local.responsible} onChange={(e) => update({ responsible: e.target.value })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="z.B. HR-Abteilung" />
|
|
</FormField>
|
|
<FormField label="Geschaeftsbereich">
|
|
<select value={local.businessFunction} onChange={(e) => update({ businessFunction: e.target.value as BusinessFunction })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg">
|
|
{Object.entries(BUSINESS_FUNCTION_LABELS).map(([k, v]) => (
|
|
<option key={k} value={k}>{v}</option>
|
|
))}
|
|
</select>
|
|
</FormField>
|
|
</div>
|
|
</FormSection>
|
|
|
|
{/* Zwecke */}
|
|
<FormSection title="Zwecke der Verarbeitung *">
|
|
<MultiTextInput
|
|
values={local.purposes}
|
|
onChange={(purposes) => update({ purposes })}
|
|
placeholder="Zweck eingeben und Enter druecken"
|
|
/>
|
|
</FormSection>
|
|
|
|
{/* Rechtsgrundlagen */}
|
|
<FormSection title="Rechtsgrundlagen *">
|
|
<div className="space-y-2">
|
|
{local.legalBases.map((lb, i) => (
|
|
<div key={i} className="flex items-center gap-2">
|
|
<select
|
|
value={lb.type}
|
|
onChange={(e) => {
|
|
const copy = [...local.legalBases]
|
|
copy[i] = { ...copy[i], type: e.target.value }
|
|
update({ legalBases: copy })
|
|
}}
|
|
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
|
>
|
|
<option value="">-- Rechtsgrundlage waehlen --</option>
|
|
{Object.entries(LEGAL_BASIS_META).map(([k, v]) => (
|
|
<option key={k} value={k}>{v.label.de} ({v.article})</option>
|
|
))}
|
|
</select>
|
|
<input
|
|
type="text"
|
|
value={lb.reference || ''}
|
|
onChange={(e) => {
|
|
const copy = [...local.legalBases]
|
|
copy[i] = { ...copy[i], reference: e.target.value }
|
|
update({ legalBases: copy })
|
|
}}
|
|
className="w-48 px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
|
placeholder="Referenz"
|
|
/>
|
|
<button onClick={() => update({ legalBases: local.legalBases.filter((_, j) => j !== i) })}
|
|
className="p-2 text-gray-400 hover:text-red-500">
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
))}
|
|
<button onClick={() => update({ legalBases: [...local.legalBases, { type: '', description: '', reference: '' }] })}
|
|
className="text-sm text-purple-600 hover:text-purple-700">
|
|
+ Rechtsgrundlage hinzufuegen
|
|
</button>
|
|
</div>
|
|
</FormSection>
|
|
|
|
{/* Betroffenenkategorien */}
|
|
<FormSection title="Betroffenenkategorien *">
|
|
<CheckboxGrid
|
|
options={Object.entries(DATA_SUBJECT_CATEGORY_META).map(([k, v]) => ({ value: k, label: v.de }))}
|
|
selected={local.dataSubjectCategories}
|
|
onChange={(dataSubjectCategories) => update({ dataSubjectCategories })}
|
|
/>
|
|
</FormSection>
|
|
|
|
{/* Datenkategorien */}
|
|
<FormSection title="Datenkategorien *">
|
|
<CheckboxGrid
|
|
options={Object.entries(PERSONAL_DATA_CATEGORY_META).map(([k, v]) => ({
|
|
value: k,
|
|
label: v.label.de,
|
|
highlight: v.isSpecial,
|
|
}))}
|
|
selected={local.personalDataCategories}
|
|
onChange={(personalDataCategories) => update({ personalDataCategories })}
|
|
/>
|
|
{local.personalDataCategories.some(c => ART9_CATEGORIES.includes(c)) && (
|
|
<div className="mt-2 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
|
|
<strong>Hinweis:</strong> Sie verarbeiten besondere Datenkategorien nach Art. 9 DSGVO. Stellen Sie sicher, dass eine Art.-9-Rechtsgrundlage vorliegt.
|
|
</div>
|
|
)}
|
|
</FormSection>
|
|
|
|
{/* Empfaenger */}
|
|
<FormSection title="Empfaengerkategorien">
|
|
<div className="space-y-2">
|
|
{local.recipientCategories.map((rc, i) => (
|
|
<div key={i} className="flex items-center gap-2">
|
|
<select
|
|
value={rc.type}
|
|
onChange={(e) => {
|
|
const copy = [...local.recipientCategories]
|
|
copy[i] = { ...copy[i], type: e.target.value }
|
|
update({ recipientCategories: copy })
|
|
}}
|
|
className="w-40 px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
|
>
|
|
<option value="INTERNAL">Intern</option>
|
|
<option value="PROCESSOR">Auftragsverarbeiter</option>
|
|
<option value="CONTROLLER">Verantwortlicher</option>
|
|
<option value="AUTHORITY">Behoerde</option>
|
|
<option value="GROUP_COMPANY">Konzern</option>
|
|
<option value="OTHER">Sonstige</option>
|
|
</select>
|
|
<input type="text" value={rc.name}
|
|
onChange={(e) => {
|
|
const copy = [...local.recipientCategories]
|
|
copy[i] = { ...copy[i], name: e.target.value }
|
|
update({ recipientCategories: copy })
|
|
}}
|
|
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm" placeholder="Name des Empfaengers" />
|
|
<button onClick={() => update({ recipientCategories: local.recipientCategories.filter((_, j) => j !== i) })}
|
|
className="p-2 text-gray-400 hover:text-red-500">
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
))}
|
|
<button onClick={() => update({ recipientCategories: [...local.recipientCategories, { type: 'INTERNAL', name: '' }] })}
|
|
className="text-sm text-purple-600 hover:text-purple-700">
|
|
+ Empfaenger hinzufuegen
|
|
</button>
|
|
</div>
|
|
</FormSection>
|
|
|
|
{/* Drittlandtransfers */}
|
|
<FormSection title="Drittlandtransfers">
|
|
<div className="space-y-2">
|
|
{local.thirdCountryTransfers.map((tc, i) => (
|
|
<div key={i} className="flex items-center gap-2 flex-wrap">
|
|
<input type="text" value={tc.country}
|
|
onChange={(e) => {
|
|
const copy = [...local.thirdCountryTransfers]
|
|
copy[i] = { ...copy[i], country: e.target.value }
|
|
update({ thirdCountryTransfers: copy })
|
|
}}
|
|
className="w-20 px-3 py-2 border border-gray-300 rounded-lg text-sm" placeholder="Land" />
|
|
<input type="text" value={tc.recipient}
|
|
onChange={(e) => {
|
|
const copy = [...local.thirdCountryTransfers]
|
|
copy[i] = { ...copy[i], recipient: e.target.value }
|
|
update({ thirdCountryTransfers: copy })
|
|
}}
|
|
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm" placeholder="Empfaenger" />
|
|
<select value={tc.transferMechanism}
|
|
onChange={(e) => {
|
|
const copy = [...local.thirdCountryTransfers]
|
|
copy[i] = { ...copy[i], transferMechanism: e.target.value }
|
|
update({ thirdCountryTransfers: copy })
|
|
}}
|
|
className="w-56 px-3 py-2 border border-gray-300 rounded-lg text-sm">
|
|
<option value="">-- Mechanismus --</option>
|
|
{Object.entries(TRANSFER_MECHANISM_META).map(([k, v]) => (
|
|
<option key={k} value={k}>{v.de}</option>
|
|
))}
|
|
</select>
|
|
<button onClick={() => update({ thirdCountryTransfers: local.thirdCountryTransfers.filter((_, j) => j !== i) })}
|
|
className="p-2 text-gray-400 hover:text-red-500">
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
))}
|
|
<button onClick={() => update({ thirdCountryTransfers: [...local.thirdCountryTransfers, { country: '', recipient: '', transferMechanism: '' }] })}
|
|
className="text-sm text-purple-600 hover:text-purple-700">
|
|
+ Drittlandtransfer hinzufuegen
|
|
</button>
|
|
</div>
|
|
</FormSection>
|
|
|
|
{/* Aufbewahrungsfristen */}
|
|
<FormSection title="Aufbewahrungsfristen *">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<FormField label="Dauer">
|
|
<div className="flex gap-2">
|
|
<input type="number" value={local.retentionPeriod.duration || ''}
|
|
onChange={(e) => update({ retentionPeriod: { ...local.retentionPeriod, duration: parseInt(e.target.value) || undefined } })}
|
|
className="w-20 px-3 py-2 border border-gray-300 rounded-lg" placeholder="z.B. 10" />
|
|
<select value={local.retentionPeriod.durationUnit || 'YEARS'}
|
|
onChange={(e) => update({ retentionPeriod: { ...local.retentionPeriod, durationUnit: e.target.value } })}
|
|
className="px-3 py-2 border border-gray-300 rounded-lg">
|
|
<option value="DAYS">Tage</option>
|
|
<option value="MONTHS">Monate</option>
|
|
<option value="YEARS">Jahre</option>
|
|
</select>
|
|
</div>
|
|
</FormField>
|
|
<FormField label="Rechtsgrundlage">
|
|
<input type="text" value={local.retentionPeriod.legalBasis || ''}
|
|
onChange={(e) => update({ retentionPeriod: { ...local.retentionPeriod, legalBasis: e.target.value } })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="z.B. HGB § 257" />
|
|
</FormField>
|
|
<FormField label="Loeschverfahren">
|
|
<input type="text" value={local.retentionPeriod.deletionProcedure || ''}
|
|
onChange={(e) => update({ retentionPeriod: { ...local.retentionPeriod, deletionProcedure: e.target.value } })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="z.B. Automatische Loeschung" />
|
|
</FormField>
|
|
</div>
|
|
<FormField label="Beschreibung">
|
|
<input type="text" value={local.retentionPeriod.description}
|
|
onChange={(e) => update({ retentionPeriod: { ...local.retentionPeriod, description: e.target.value } })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="Freitextbeschreibung der Aufbewahrungsfrist" />
|
|
</FormField>
|
|
</FormSection>
|
|
|
|
{/* TOM-Beschreibung */}
|
|
<FormSection title="TOM-Beschreibung (Art. 32)">
|
|
<textarea value={local.tomDescription} onChange={(e) => update({ tomDescription: e.target.value })}
|
|
rows={3} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
placeholder="Beschreiben Sie die technischen und organisatorischen Massnahmen zum Schutz der Daten" />
|
|
</FormSection>
|
|
|
|
{/* Advanced (collapsible) */}
|
|
<div className="p-4">
|
|
<button
|
|
onClick={() => setShowAdvanced(!showAdvanced)}
|
|
className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900"
|
|
>
|
|
<svg className={`w-4 h-4 transition-transform ${showAdvanced ? 'rotate-90' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
Generator-Felder (Schutzniveau, Systeme, DSFA)
|
|
</button>
|
|
|
|
{showAdvanced && (
|
|
<div className="mt-4 space-y-4">
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<FormField label="Schutzniveau">
|
|
<select value={local.protectionLevel} onChange={(e) => update({ protectionLevel: e.target.value as VVTActivity['protectionLevel'] })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg">
|
|
{Object.entries(PROTECTION_LEVEL_LABELS).map(([k, v]) => (
|
|
<option key={k} value={k}>{v}</option>
|
|
))}
|
|
</select>
|
|
</FormField>
|
|
<FormField label="Deployment">
|
|
<select value={local.deploymentModel} onChange={(e) => update({ deploymentModel: e.target.value as VVTActivity['deploymentModel'] })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg">
|
|
{Object.entries(DEPLOYMENT_LABELS).map(([k, v]) => (
|
|
<option key={k} value={k}>{v}</option>
|
|
))}
|
|
</select>
|
|
</FormField>
|
|
<FormField label="DSFA erforderlich">
|
|
<label className="flex items-center gap-2 mt-2">
|
|
<input type="checkbox" checked={local.dpiaRequired}
|
|
onChange={(e) => update({ dpiaRequired: e.target.checked })}
|
|
className="w-4 h-4 text-purple-600 rounded" />
|
|
<span className="text-sm text-gray-700">Ja, DSFA nach Art. 35 DSGVO erforderlich</span>
|
|
</label>
|
|
</FormField>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Save button at bottom */}
|
|
<div className="flex items-center justify-end gap-3">
|
|
<button onClick={onBack} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg">
|
|
Zurueck zum Verzeichnis
|
|
</button>
|
|
<button onClick={handleSave} className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
|
|
Speichern
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// TAB 3: EXPORT & COMPLIANCE
|
|
// =============================================================================
|
|
|
|
function TabExport({
|
|
activities, orgHeader, onUpdateOrgHeader,
|
|
}: {
|
|
activities: VVTActivity[]
|
|
orgHeader: VVTOrganizationHeader
|
|
onUpdateOrgHeader: (org: VVTOrganizationHeader) => void
|
|
}) {
|
|
// Compliance check
|
|
const issues: { activityId: string; vvtId: string; name: string; issues: string[] }[] = []
|
|
for (const a of activities) {
|
|
const actIssues: string[] = []
|
|
if (!a.name) actIssues.push('Bezeichnung fehlt')
|
|
if (a.purposes.length === 0) actIssues.push('Zweck(e) fehlen')
|
|
if (a.legalBases.length === 0) actIssues.push('Rechtsgrundlage fehlt')
|
|
if (a.dataSubjectCategories.length === 0) actIssues.push('Betroffenenkategorien fehlen')
|
|
if (a.personalDataCategories.length === 0) actIssues.push('Datenkategorien fehlen')
|
|
if (!a.retentionPeriod.description) actIssues.push('Aufbewahrungsfrist fehlt')
|
|
if (!a.tomDescription && a.structuredToms.accessControl.length === 0) actIssues.push('TOM-Beschreibung fehlt')
|
|
|
|
// Art. 9 without Art. 9 legal basis
|
|
const hasArt9Data = a.personalDataCategories.some(c => ART9_CATEGORIES.includes(c))
|
|
const hasArt9Basis = a.legalBases.some(lb => lb.type.startsWith('ART9_'))
|
|
if (hasArt9Data && !hasArt9Basis) actIssues.push('Art.-9-Daten ohne Art.-9-Rechtsgrundlage')
|
|
|
|
// Third country without mechanism
|
|
for (const tc of a.thirdCountryTransfers) {
|
|
if (!tc.transferMechanism) actIssues.push(`Drittland ${tc.country}: Transfer-Mechanismus fehlt`)
|
|
}
|
|
|
|
if (actIssues.length > 0) {
|
|
issues.push({ activityId: a.id, vvtId: a.vvtId, name: a.name || '(Ohne Namen)', issues: actIssues })
|
|
}
|
|
}
|
|
|
|
const compliantCount = activities.length - issues.length
|
|
const compliancePercent = activities.length > 0 ? Math.round((compliantCount / activities.length) * 100) : 0
|
|
|
|
const handleExportJSON = () => {
|
|
const data = {
|
|
version: '1.0',
|
|
exportDate: new Date().toISOString(),
|
|
organization: orgHeader,
|
|
activities: activities,
|
|
}
|
|
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
|
|
const url = URL.createObjectURL(blob)
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = `vvt-export-${new Date().toISOString().split('T')[0]}.json`
|
|
a.click()
|
|
URL.revokeObjectURL(url)
|
|
}
|
|
|
|
const handleExportCSV = () => {
|
|
const headers = ['VVT-ID', 'Name', 'Beschreibung', 'Zwecke', 'Rechtsgrundlagen', 'Betroffene', 'Datenkategorien', 'Empfaenger', 'Drittlandtransfers', 'Aufbewahrungsfrist', 'TOM', 'Status', 'Verantwortlich']
|
|
const rows = activities.map(a => [
|
|
a.vvtId,
|
|
a.name,
|
|
a.description,
|
|
a.purposes.join('; '),
|
|
a.legalBases.map(lb => `${lb.type}${lb.reference ? ' (' + lb.reference + ')' : ''}`).join('; '),
|
|
a.dataSubjectCategories.map(c => DATA_SUBJECT_CATEGORY_META[c as keyof typeof DATA_SUBJECT_CATEGORY_META]?.de || c).join('; '),
|
|
a.personalDataCategories.map(c => PERSONAL_DATA_CATEGORY_META[c as keyof typeof PERSONAL_DATA_CATEGORY_META]?.label?.de || c).join('; '),
|
|
a.recipientCategories.map(r => `${r.name} (${r.type})`).join('; '),
|
|
a.thirdCountryTransfers.map(t => `${t.country}: ${t.recipient}`).join('; '),
|
|
a.retentionPeriod.description,
|
|
a.tomDescription,
|
|
STATUS_LABELS[a.status],
|
|
a.responsible,
|
|
])
|
|
|
|
const csvContent = [headers, ...rows].map(row =>
|
|
row.map(cell => `"${String(cell || '').replace(/"/g, '""')}"`).join(',')
|
|
).join('\n')
|
|
|
|
const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8' })
|
|
const url = URL.createObjectURL(blob)
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = `vvt-export-${new Date().toISOString().split('T')[0]}.csv`
|
|
a.click()
|
|
URL.revokeObjectURL(url)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Compliance Overview */}
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">Compliance-Check</h3>
|
|
<div className="flex items-center gap-6 mb-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`w-16 h-16 rounded-full flex items-center justify-center text-xl font-bold ${
|
|
compliancePercent === 100 ? 'bg-green-100 text-green-700' :
|
|
compliancePercent >= 70 ? 'bg-yellow-100 text-yellow-700' : 'bg-red-100 text-red-700'
|
|
}`}>
|
|
{compliancePercent}%
|
|
</div>
|
|
<div>
|
|
<div className="font-medium text-gray-900">{compliantCount} von {activities.length} vollstaendig</div>
|
|
<div className="text-sm text-gray-500">{issues.length} Eintraege mit Maengeln</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{issues.length > 0 && (
|
|
<div className="space-y-2 mt-4">
|
|
{issues.map(issue => (
|
|
<div key={issue.activityId} className="p-3 bg-amber-50 border border-amber-200 rounded-lg">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<span className="font-mono text-xs text-amber-600">{issue.vvtId}</span>
|
|
<span className="text-sm font-medium text-amber-800">{issue.name}</span>
|
|
</div>
|
|
<ul className="text-sm text-amber-700 space-y-0.5">
|
|
{issue.issues.map((iss, i) => (
|
|
<li key={i} className="flex items-center gap-1">
|
|
<svg className="w-3 h-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01" />
|
|
</svg>
|
|
{iss}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{issues.length === 0 && activities.length > 0 && (
|
|
<div className="p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
|
|
Alle Verarbeitungen enthalten die erforderlichen Pflichtangaben nach Art. 30 DSGVO.
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Art. 30 Completeness per Activity */}
|
|
{activities.length > 0 && (
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">Art. 30 Vollstaendigkeit (Detail)</h3>
|
|
<div className="space-y-2">
|
|
{activities.map(a => {
|
|
const c = a.art30Completeness
|
|
const score = c?.score ?? null
|
|
return (
|
|
<div key={a.id} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
|
|
<span className="font-mono text-xs text-gray-400 w-20">{a.vvtId}</span>
|
|
<span className="text-sm font-medium text-gray-900 flex-1 truncate">{a.name || '(Ohne Namen)'}</span>
|
|
{score !== null ? (
|
|
<>
|
|
<div className="w-24 bg-gray-200 rounded-full h-2">
|
|
<div className={`h-2 rounded-full ${score >= 80 ? 'bg-green-500' : score >= 50 ? 'bg-yellow-500' : 'bg-red-500'}`} style={{ width: `${score}%` }} />
|
|
</div>
|
|
<span className={`text-xs font-medium w-10 text-right ${score >= 80 ? 'text-green-600' : score >= 50 ? 'text-yellow-600' : 'text-red-600'}`}>{score}%</span>
|
|
</>
|
|
) : (
|
|
<span className="text-xs text-gray-400">Nicht berechnet</span>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Organisation Header */}
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">VVT-Metadaten (Organisation)</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<FormField label="Organisationsname">
|
|
<input type="text" value={orgHeader.organizationName}
|
|
onChange={(e) => onUpdateOrgHeader({ ...orgHeader, organizationName: e.target.value })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="Firma GmbH" />
|
|
</FormField>
|
|
<FormField label="Branche">
|
|
<input type="text" value={orgHeader.industry}
|
|
onChange={(e) => onUpdateOrgHeader({ ...orgHeader, industry: e.target.value })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="z.B. IT & Software" />
|
|
</FormField>
|
|
<FormField label="DSB Name">
|
|
<input type="text" value={orgHeader.dpoName}
|
|
onChange={(e) => onUpdateOrgHeader({ ...orgHeader, dpoName: e.target.value })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="Name des Datenschutzbeauftragten" />
|
|
</FormField>
|
|
<FormField label="DSB Kontakt">
|
|
<input type="text" value={orgHeader.dpoContact}
|
|
onChange={(e) => onUpdateOrgHeader({ ...orgHeader, dpoContact: e.target.value })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="E-Mail oder Telefon" />
|
|
</FormField>
|
|
<FormField label="Mitarbeiterzahl">
|
|
<input type="number" value={orgHeader.employeeCount || ''}
|
|
onChange={(e) => onUpdateOrgHeader({ ...orgHeader, employeeCount: parseInt(e.target.value) || 0 })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg" />
|
|
</FormField>
|
|
<FormField label="Pruefintervall">
|
|
<select value={orgHeader.reviewInterval}
|
|
onChange={(e) => onUpdateOrgHeader({ ...orgHeader, reviewInterval: e.target.value as VVTOrganizationHeader['reviewInterval'] })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg">
|
|
{Object.entries(REVIEW_INTERVAL_LABELS).map(([k, v]) => (
|
|
<option key={k} value={k}>{v}</option>
|
|
))}
|
|
</select>
|
|
</FormField>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Export */}
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">Export</h3>
|
|
<div className="flex items-center gap-3">
|
|
<button onClick={handleExportJSON} disabled={activities.length === 0}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm">
|
|
JSON exportieren
|
|
</button>
|
|
<button onClick={handleExportCSV} disabled={activities.length === 0}
|
|
className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm">
|
|
CSV (Excel) exportieren
|
|
</button>
|
|
</div>
|
|
<p className="text-xs text-gray-400 mt-2">
|
|
Der Export enthaelt alle {activities.length} Verarbeitungstaetigkeiten inkl. Organisations-Metadaten.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">Statistik</h3>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<div>
|
|
<div className="text-2xl font-bold text-gray-900">{activities.length}</div>
|
|
<div className="text-sm text-gray-500">Verarbeitungen</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-2xl font-bold text-gray-900">{[...new Set(activities.map(a => a.businessFunction))].length}</div>
|
|
<div className="text-sm text-gray-500">Geschaeftsbereiche</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-2xl font-bold text-gray-900">{[...new Set(activities.flatMap(a => a.dataSubjectCategories))].length}</div>
|
|
<div className="text-sm text-gray-500">Betroffenenkategorien</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-2xl font-bold text-gray-900">{[...new Set(activities.flatMap(a => a.personalDataCategories))].length}</div>
|
|
<div className="text-sm text-gray-500">Datenkategorien</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// TAB 4: VVT-DOKUMENT (Druckbare Ansicht + PDF)
|
|
// =============================================================================
|
|
|
|
function TabDokument({ activities, orgHeader }: { activities: VVTActivity[]; orgHeader: VVTOrganizationHeader }) {
|
|
const today = new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })
|
|
|
|
const resolveDataSubjects = (cats: string[]) =>
|
|
cats.map(c => DATA_SUBJECT_CATEGORY_META[c as keyof typeof DATA_SUBJECT_CATEGORY_META]?.de || c).join(', ')
|
|
|
|
const resolveDataCategories = (cats: string[]) =>
|
|
cats.map(c => PERSONAL_DATA_CATEGORY_META[c as keyof typeof PERSONAL_DATA_CATEGORY_META]?.label?.de || c).join(', ')
|
|
|
|
const resolveLegalBasis = (lb: { type: string; description?: string; reference?: string }) => {
|
|
const meta = LEGAL_BASIS_META[lb.type as keyof typeof LEGAL_BASIS_META]
|
|
const label = meta ? `${meta.label.de} (${meta.article})` : lb.type
|
|
return lb.reference ? `${label} — ${lb.reference}` : label
|
|
}
|
|
|
|
const resolveTransferMechanism = (m: string) => {
|
|
const meta = TRANSFER_MECHANISM_META[m as keyof typeof TRANSFER_MECHANISM_META]
|
|
return meta?.de || m
|
|
}
|
|
|
|
const buildDocumentHtml = () => {
|
|
const approvedActivities = activities.filter(a => a.status !== 'ARCHIVED')
|
|
|
|
let html = `
|
|
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Verzeichnis von Verarbeitungstaetigkeiten — ${orgHeader.organizationName || 'Organisation'}</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
max-width: 900px; margin: 0 auto; padding: 40px 30px;
|
|
line-height: 1.6; color: #1a202c; font-size: 11pt;
|
|
}
|
|
/* Cover page */
|
|
.cover { text-align: center; padding: 80px 0 60px; page-break-after: always; }
|
|
.cover h1 { font-size: 24pt; color: #5b21b6; margin-bottom: 8px; }
|
|
.cover .subtitle { font-size: 14pt; color: #6b7280; margin-bottom: 40px; }
|
|
.cover .org-info { font-size: 11pt; color: #374151; line-height: 2; }
|
|
.cover .legal-ref { margin-top: 40px; padding: 16px; background: #f5f3ff; border-radius: 8px; font-size: 10pt; color: #5b21b6; }
|
|
/* TOC */
|
|
.toc { page-break-after: always; }
|
|
.toc h2 { font-size: 16pt; color: #5b21b6; border-bottom: 2px solid #5b21b6; padding-bottom: 6px; margin-bottom: 16px; }
|
|
.toc-entry { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dotted #d1d5db; font-size: 10pt; }
|
|
.toc-entry .toc-id { color: #6b7280; font-family: monospace; }
|
|
/* Activity sections */
|
|
.activity { page-break-inside: avoid; margin-bottom: 30px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; }
|
|
.activity-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #7c3aed; }
|
|
.activity-header .vvt-id { font-family: monospace; font-size: 10pt; color: #6b7280; background: #f3f4f6; padding: 2px 8px; border-radius: 4px; }
|
|
.activity-header h3 { font-size: 14pt; color: #1f2937; }
|
|
.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 8pt; font-weight: 600; margin-left: 6px; }
|
|
.badge-status { background: #dbeafe; color: #1e40af; }
|
|
.badge-art9 { background: #fee2e2; color: #991b1b; }
|
|
.badge-dpia { background: #f3e8ff; color: #6b21a8; }
|
|
.badge-thirdcountry { background: #ffedd5; color: #9a3412; }
|
|
/* Field rows */
|
|
.field-group { margin-bottom: 12px; }
|
|
.field-label { font-size: 9pt; font-weight: 600; color: #5b21b6; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
|
|
.field-value { font-size: 10pt; color: #374151; }
|
|
.field-value.empty { color: #9ca3af; font-style: italic; }
|
|
/* Tables */
|
|
table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 10pt; }
|
|
th { background: #f5f3ff; color: #5b21b6; font-weight: 600; text-align: left; padding: 8px 10px; border: 1px solid #e5e7eb; }
|
|
td { padding: 6px 10px; border: 1px solid #e5e7eb; vertical-align: top; }
|
|
/* Footer */
|
|
.page-footer { margin-top: 40px; padding-top: 16px; border-top: 2px solid #e5e7eb; font-size: 9pt; color: #9ca3af; display: flex; justify-content: space-between; }
|
|
/* Print */
|
|
@media print {
|
|
body { margin: 15mm; padding: 0; max-width: none; }
|
|
.activity { page-break-inside: avoid; }
|
|
.cover { page-break-after: always; }
|
|
.toc { page-break-after: always; }
|
|
h2, h3 { page-break-after: avoid; }
|
|
table { page-break-inside: avoid; }
|
|
.no-print { display: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- COVER PAGE -->
|
|
<div class="cover">
|
|
<h1>Verzeichnis von Verarbeitungstaetigkeiten</h1>
|
|
<div class="subtitle">gemaess Art. 30 Abs. 1 DSGVO</div>
|
|
<div class="org-info">
|
|
<strong>${orgHeader.organizationName || '(Organisation eintragen)'}</strong><br/>
|
|
${orgHeader.industry ? `Branche: ${orgHeader.industry}<br/>` : ''}
|
|
${orgHeader.employeeCount ? `Mitarbeiter: ${orgHeader.employeeCount}<br/>` : ''}
|
|
${orgHeader.locations && orgHeader.locations.length > 0 ? `Standorte: ${orgHeader.locations.join(', ')}<br/>` : ''}
|
|
${orgHeader.dpoName ? `<br/>Datenschutzbeauftragter: ${orgHeader.dpoName}<br/>` : ''}
|
|
${orgHeader.dpoContact ? `Kontakt DSB: ${orgHeader.dpoContact}<br/>` : ''}
|
|
</div>
|
|
<div class="legal-ref">
|
|
VVT-Version: ${orgHeader.vvtVersion} | Stand: ${today}
|
|
${orgHeader.lastReviewDate ? ` | Letzte Pruefung: ${new Date(orgHeader.lastReviewDate).toLocaleDateString('de-DE')}` : ''}
|
|
${orgHeader.nextReviewDate ? ` | Naechste Pruefung: ${new Date(orgHeader.nextReviewDate).toLocaleDateString('de-DE')}` : ''}
|
|
| Pruefintervall: ${REVIEW_INTERVAL_LABELS[orgHeader.reviewInterval] || orgHeader.reviewInterval}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TABLE OF CONTENTS -->
|
|
<div class="toc">
|
|
<h2>Inhaltsverzeichnis</h2>
|
|
<p style="margin-bottom:12px;font-size:10pt;color:#6b7280;">
|
|
${approvedActivities.length} Verarbeitungstaetigkeiten in ${[...new Set(approvedActivities.map(a => a.businessFunction))].length} Geschaeftsbereichen
|
|
</p>
|
|
${approvedActivities.map((a, i) => `
|
|
<div class="toc-entry">
|
|
<span><span class="toc-id">${a.vvtId}</span> ${a.name || '(Ohne Namen)'}</span>
|
|
<span style="color:#6b7280;">${BUSINESS_FUNCTION_LABELS[a.businessFunction]} — ${STATUS_LABELS[a.status]}</span>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
|
|
<!-- ACTIVITIES -->
|
|
`
|
|
|
|
for (const a of approvedActivities) {
|
|
const hasArt9 = a.personalDataCategories.some(c => ART9_CATEGORIES.includes(c))
|
|
const hasThirdCountry = a.thirdCountryTransfers.length > 0
|
|
|
|
html += `
|
|
<div class="activity">
|
|
<div class="activity-header">
|
|
<span class="vvt-id">${a.vvtId}</span>
|
|
<h3>${a.name || '(Ohne Namen)'}</h3>
|
|
<span class="badge badge-status">${STATUS_LABELS[a.status]}</span>
|
|
${hasArt9 ? '<span class="badge badge-art9">Art. 9</span>' : ''}
|
|
${a.dpiaRequired ? '<span class="badge badge-dpia">DSFA</span>' : ''}
|
|
${hasThirdCountry ? '<span class="badge badge-thirdcountry">Drittland</span>' : ''}
|
|
</div>
|
|
|
|
${a.description ? `<div class="field-group"><div class="field-label">Beschreibung</div><div class="field-value">${a.description}</div></div>` : ''}
|
|
|
|
<table>
|
|
<tr><th style="width:35%">Pflichtfeld (Art. 30)</th><th>Inhalt</th></tr>
|
|
<tr><td><strong>Verantwortlicher</strong></td><td>${a.responsible || `<span class="field-value empty">nicht angegeben</span>`}</td></tr>
|
|
<tr><td><strong>Geschaeftsbereich</strong></td><td>${BUSINESS_FUNCTION_LABELS[a.businessFunction]}</td></tr>
|
|
<tr><td><strong>Zwecke der Verarbeitung</strong></td><td>${a.purposes.length > 0 ? a.purposes.join('; ') : `<span class="field-value empty">nicht angegeben</span>`}</td></tr>
|
|
<tr><td><strong>Rechtsgrundlage(n)</strong></td><td>${a.legalBases.length > 0 ? a.legalBases.map(resolveLegalBasis).join('<br/>') : `<span class="field-value empty">nicht angegeben</span>`}</td></tr>
|
|
<tr><td><strong>Kategorien betroffener Personen</strong></td><td>${a.dataSubjectCategories.length > 0 ? resolveDataSubjects(a.dataSubjectCategories) : `<span class="field-value empty">nicht angegeben</span>`}</td></tr>
|
|
<tr><td><strong>Kategorien personenbezogener Daten</strong></td><td>${a.personalDataCategories.length > 0 ? resolveDataCategories(a.personalDataCategories) : `<span class="field-value empty">nicht angegeben</span>`}${hasArt9 ? '<br/><em style="color:#991b1b;">Enthalt besondere Kategorien nach Art. 9 DSGVO</em>' : ''}</td></tr>
|
|
<tr><td><strong>Empfaengerkategorien</strong></td><td>${a.recipientCategories.length > 0 ? a.recipientCategories.map(r => `${r.name} (${r.type})`).join('; ') : `<span class="field-value empty">keine</span>`}</td></tr>
|
|
<tr><td><strong>Uebermittlung an Drittlaender</strong></td><td>${hasThirdCountry ? a.thirdCountryTransfers.map(t => `${t.country}: ${t.recipient} — ${resolveTransferMechanism(t.transferMechanism)}`).join('<br/>') : 'Keine Drittlanduebermittlung'}</td></tr>
|
|
<tr><td><strong>Loeschfristen</strong></td><td>${a.retentionPeriod.description || `<span class="field-value empty">nicht angegeben</span>`}${a.retentionPeriod.legalBasis ? `<br/><em>Rechtsgrundlage: ${a.retentionPeriod.legalBasis}</em>` : ''}${a.retentionPeriod.deletionProcedure ? `<br/><em>Verfahren: ${a.retentionPeriod.deletionProcedure}</em>` : ''}</td></tr>
|
|
<tr><td><strong>TOM (Art. 32 DSGVO)</strong></td><td>${a.tomDescription || `<span class="field-value empty">nicht beschrieben</span>`}</td></tr>
|
|
</table>
|
|
|
|
${a.structuredToms && (a.structuredToms.accessControl.length > 0 || a.structuredToms.confidentiality.length > 0 || a.structuredToms.integrity.length > 0 || a.structuredToms.availability.length > 0 || a.structuredToms.separation.length > 0) ? `
|
|
<div class="field-group" style="margin-top:10px;">
|
|
<div class="field-label">Strukturierte TOMs</div>
|
|
<table>
|
|
<tr><th>Kategorie</th><th>Massnahmen</th></tr>
|
|
${a.structuredToms.accessControl.length > 0 ? `<tr><td>Zugriffskontrolle</td><td>${a.structuredToms.accessControl.join(', ')}</td></tr>` : ''}
|
|
${a.structuredToms.confidentiality.length > 0 ? `<tr><td>Vertraulichkeit</td><td>${a.structuredToms.confidentiality.join(', ')}</td></tr>` : ''}
|
|
${a.structuredToms.integrity.length > 0 ? `<tr><td>Integritaet</td><td>${a.structuredToms.integrity.join(', ')}</td></tr>` : ''}
|
|
${a.structuredToms.availability.length > 0 ? `<tr><td>Verfuegbarkeit</td><td>${a.structuredToms.availability.join(', ')}</td></tr>` : ''}
|
|
${a.structuredToms.separation.length > 0 ? `<tr><td>Trennbarkeit</td><td>${a.structuredToms.separation.join(', ')}</td></tr>` : ''}
|
|
</table>
|
|
</div>
|
|
` : ''}
|
|
|
|
<div style="margin-top:8px;font-size:9pt;color:#9ca3af;">
|
|
Erstellt: ${new Date(a.createdAt).toLocaleDateString('de-DE')} | Aktualisiert: ${new Date(a.updatedAt).toLocaleDateString('de-DE')}
|
|
${a.dpiaRequired ? ' | DSFA erforderlich' : ''}
|
|
| Schutzniveau: ${PROTECTION_LEVEL_LABELS[a.protectionLevel]}
|
|
| Deployment: ${DEPLOYMENT_LABELS[a.deploymentModel]}
|
|
</div>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
html += `
|
|
<!-- FOOTER -->
|
|
<div class="page-footer">
|
|
<span>Verzeichnis von Verarbeitungstaetigkeiten — ${orgHeader.organizationName}</span>
|
|
<span>Stand: ${today} | Version ${orgHeader.vvtVersion}</span>
|
|
</div>
|
|
|
|
</body>
|
|
</html>`
|
|
|
|
return html
|
|
}
|
|
|
|
const handlePrintDocument = () => {
|
|
const htmlContent = buildDocumentHtml()
|
|
const printWindow = window.open('', '_blank')
|
|
if (printWindow) {
|
|
printWindow.document.write(htmlContent)
|
|
printWindow.document.close()
|
|
printWindow.focus()
|
|
setTimeout(() => printWindow.print(), 300)
|
|
}
|
|
}
|
|
|
|
const handleDownloadHtml = () => {
|
|
const htmlContent = buildDocumentHtml()
|
|
const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' })
|
|
const url = URL.createObjectURL(blob)
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = `vvt-dokument-${new Date().toISOString().split('T')[0]}.html`
|
|
a.click()
|
|
URL.revokeObjectURL(url)
|
|
}
|
|
|
|
const nonArchivedActivities = activities.filter(a => a.status !== 'ARCHIVED')
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Actions */}
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-gray-900">VVT-Dokument (Art. 30 DSGVO)</h3>
|
|
<p className="text-sm text-gray-500 mt-0.5">
|
|
Druckfertiges Verarbeitungsverzeichnis mit Deckblatt, Inhaltsverzeichnis und allen {nonArchivedActivities.length} Verarbeitungstaetigkeiten.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={handleDownloadHtml}
|
|
disabled={nonArchivedActivities.length === 0}
|
|
className="flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
|
|
>
|
|
<svg className="w-4 h-4" 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-4l-4 4m0 0l-4-4m4 4V4" />
|
|
</svg>
|
|
HTML herunterladen
|
|
</button>
|
|
<button
|
|
onClick={handlePrintDocument}
|
|
disabled={nonArchivedActivities.length === 0}
|
|
className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
|
|
</svg>
|
|
Als PDF drucken
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{nonArchivedActivities.length === 0 && (
|
|
<div className="p-6 bg-gray-50 rounded-lg text-center text-gray-500">
|
|
Keine Verarbeitungstaetigkeiten vorhanden. Erstellen Sie zuerst Eintraege im Tab "Verzeichnis".
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Preview */}
|
|
{nonArchivedActivities.length > 0 && (
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<h4 className="text-sm font-medium text-gray-700 mb-4">Vorschau — Inhalt des Dokuments</h4>
|
|
|
|
{/* Cover preview */}
|
|
<div className="border border-purple-200 rounded-lg p-6 mb-4 text-center bg-purple-50/30">
|
|
<div className="text-xs text-purple-500 uppercase tracking-widest mb-2">Deckblatt</div>
|
|
<div className="text-xl font-bold text-purple-800 mb-1">Verzeichnis von Verarbeitungstaetigkeiten</div>
|
|
<div className="text-sm text-gray-500 mb-3">gemaess Art. 30 Abs. 1 DSGVO</div>
|
|
<div className="text-sm text-gray-700">
|
|
<strong>{orgHeader.organizationName || '(Organisation eintragen)'}</strong>
|
|
{orgHeader.dpoName && <><br />DSB: {orgHeader.dpoName}</>}
|
|
{orgHeader.dpoContact && <> ({orgHeader.dpoContact})</>}
|
|
</div>
|
|
<div className="text-xs text-gray-400 mt-3">
|
|
Version {orgHeader.vvtVersion} | Stand: {today}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Activity list preview */}
|
|
<div className="space-y-3">
|
|
{nonArchivedActivities.map((a) => {
|
|
const hasArt9 = a.personalDataCategories.some(c => ART9_CATEGORIES.includes(c))
|
|
return (
|
|
<div key={a.id} className="border border-gray-200 rounded-lg p-4">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<span className="font-mono text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded">{a.vvtId}</span>
|
|
<span className="text-sm font-semibold text-gray-900">{a.name || '(Ohne Namen)'}</span>
|
|
<span className={`px-2 py-0.5 text-xs rounded-full ${STATUS_COLORS[a.status]}`}>{STATUS_LABELS[a.status]}</span>
|
|
{hasArt9 && <span className="px-2 py-0.5 text-xs bg-red-100 text-red-700 rounded-full">Art. 9</span>}
|
|
</div>
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-x-4 gap-y-1 text-xs text-gray-600">
|
|
<div><span className="font-medium text-gray-500">Zweck:</span> {a.purposes.join(', ') || '—'}</div>
|
|
<div><span className="font-medium text-gray-500">Rechtsgrundlage:</span> {a.legalBases.map(lb => lb.type).join(', ') || '—'}</div>
|
|
<div><span className="font-medium text-gray-500">Betroffene:</span> {a.dataSubjectCategories.length || 0} Kategorien</div>
|
|
<div><span className="font-medium text-gray-500">Datenkategorien:</span> {a.personalDataCategories.length || 0}</div>
|
|
<div><span className="font-medium text-gray-500">Empfaenger:</span> {a.recipientCategories.length || 0}</div>
|
|
<div><span className="font-medium text-gray-500">Loeschfrist:</span> {a.retentionPeriod.description || '—'}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
<div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-700">
|
|
<strong>Tipp:</strong> Klicken Sie auf "Als PDF drucken" fuer das vollstaendige, formatierte Dokument mit allen
|
|
Pflichtfeldern nach Art. 30 DSGVO — inklusive Deckblatt und Inhaltsverzeichnis.
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// TAB 5: AUFTRAGSVERARBEITER (Art. 30 Abs. 2)
|
|
// =============================================================================
|
|
|
|
interface VendorForProcessor {
|
|
id: string
|
|
name: string
|
|
role: string
|
|
serviceDescription: string
|
|
country: string
|
|
processingLocations: { country: string; region?: string; isEU: boolean; isAdequate: boolean }[]
|
|
transferMechanisms: string[]
|
|
certifications: { type: string; expirationDate?: string }[]
|
|
status: string
|
|
primaryContact: { name: string; email: string; phone?: string }
|
|
dpoContact?: { name: string; email: string }
|
|
contractTypes: string[]
|
|
inherentRiskScore: number
|
|
residualRiskScore: number
|
|
nextReviewDate?: string
|
|
processingActivityIds: string[]
|
|
notes?: string
|
|
createdAt: string
|
|
updatedAt: string
|
|
}
|
|
|
|
async function apiListProcessorVendors(): Promise<VendorForProcessor[]> {
|
|
const res = await fetch('/api/sdk/v1/vendor-compliance/vendors?limit=500')
|
|
if (!res.ok) throw new Error(`Vendor API error: ${res.status}`)
|
|
const data = await res.json()
|
|
const items: any[] = data?.data?.items ?? []
|
|
return items
|
|
.filter((v: any) => v.role === 'PROCESSOR' || v.role === 'SUB_PROCESSOR')
|
|
.map((v: any) => ({
|
|
id: v.id,
|
|
name: v.name ?? '',
|
|
role: v.role ?? '',
|
|
serviceDescription: v.serviceDescription ?? v.service_description ?? '',
|
|
country: v.country ?? '',
|
|
processingLocations: (v.processingLocations ?? v.processing_locations ?? []).map((l: any) => ({
|
|
country: l.country ?? '',
|
|
region: l.region,
|
|
isEU: l.isEU ?? l.is_eu ?? false,
|
|
isAdequate: l.isAdequate ?? l.is_adequate ?? false,
|
|
})),
|
|
transferMechanisms: v.transferMechanisms ?? v.transfer_mechanisms ?? [],
|
|
certifications: (v.certifications ?? []).map((c: any) => ({
|
|
type: c.type ?? '',
|
|
expirationDate: c.expirationDate ?? c.expiration_date,
|
|
})),
|
|
status: v.status ?? 'ACTIVE',
|
|
primaryContact: {
|
|
name: v.primaryContact?.name ?? v.primary_contact?.name ?? '',
|
|
email: v.primaryContact?.email ?? v.primary_contact?.email ?? '',
|
|
phone: v.primaryContact?.phone ?? v.primary_contact?.phone,
|
|
},
|
|
dpoContact: (v.dpoContact ?? v.dpo_contact) ? {
|
|
name: (v.dpoContact ?? v.dpo_contact).name ?? '',
|
|
email: (v.dpoContact ?? v.dpo_contact).email ?? '',
|
|
} : undefined,
|
|
contractTypes: v.contractTypes ?? v.contract_types ?? [],
|
|
inherentRiskScore: v.inherentRiskScore ?? v.inherent_risk_score ?? 0,
|
|
residualRiskScore: v.residualRiskScore ?? v.residual_risk_score ?? 0,
|
|
nextReviewDate: v.nextReviewDate ?? v.next_review_date,
|
|
processingActivityIds: v.processingActivityIds ?? v.processing_activity_ids ?? [],
|
|
notes: v.notes,
|
|
createdAt: v.createdAt ?? v.created_at ?? '',
|
|
updatedAt: v.updatedAt ?? v.updated_at ?? '',
|
|
}))
|
|
}
|
|
|
|
const VENDOR_STATUS_LABELS: Record<string, string> = {
|
|
ACTIVE: 'Aktiv',
|
|
PENDING_REVIEW: 'In Pruefung',
|
|
APPROVED: 'Genehmigt',
|
|
SUSPENDED: 'Ausgesetzt',
|
|
ARCHIVED: 'Archiviert',
|
|
DRAFT: 'Entwurf',
|
|
REVIEW: 'In Pruefung',
|
|
}
|
|
|
|
const VENDOR_STATUS_COLORS: Record<string, string> = {
|
|
ACTIVE: 'bg-green-100 text-green-700',
|
|
PENDING_REVIEW: 'bg-yellow-100 text-yellow-700',
|
|
APPROVED: 'bg-green-100 text-green-800',
|
|
SUSPENDED: 'bg-red-100 text-red-700',
|
|
ARCHIVED: 'bg-gray-100 text-gray-600',
|
|
DRAFT: 'bg-gray-100 text-gray-600',
|
|
REVIEW: 'bg-yellow-100 text-yellow-700',
|
|
}
|
|
|
|
const ROLE_LABELS: Record<string, string> = {
|
|
PROCESSOR: 'Auftragsverarbeiter',
|
|
SUB_PROCESSOR: 'Unterauftragsverarbeiter',
|
|
}
|
|
|
|
function riskColor(score: number): string {
|
|
if (score <= 3) return 'bg-green-100 text-green-700'
|
|
if (score <= 6) return 'bg-yellow-100 text-yellow-700'
|
|
return 'bg-red-100 text-red-700'
|
|
}
|
|
|
|
function TabProcessor({ orgHeader }: { orgHeader: VVTOrganizationHeader }) {
|
|
const [vendors, setVendors] = useState<VendorForProcessor[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
useEffect(() => {
|
|
let cancelled = false
|
|
setLoading(true)
|
|
setError(null)
|
|
apiListProcessorVendors()
|
|
.then(data => { if (!cancelled) setVendors(data) })
|
|
.catch(err => { if (!cancelled) setError(err.message ?? 'Fehler beim Laden der Auftragsverarbeiter') })
|
|
.finally(() => { if (!cancelled) setLoading(false) })
|
|
return () => { cancelled = true }
|
|
}, [])
|
|
|
|
const handlePrintProcessorDoc = () => {
|
|
const today = new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })
|
|
const activeVendors = vendors.filter(v => v.status !== 'ARCHIVED')
|
|
const subProcessors = vendors.filter(v => v.role === 'SUB_PROCESSOR')
|
|
|
|
let html = `
|
|
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Verzeichnis Auftragsverarbeiter — Art. 30 Abs. 2 DSGVO</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; max-width: 900px; margin: 0 auto; padding: 40px 30px; line-height: 1.6; color: #1a202c; font-size: 11pt; }
|
|
.cover { text-align: center; padding: 80px 0 60px; page-break-after: always; }
|
|
.cover h1 { font-size: 22pt; color: #5b21b6; margin-bottom: 8px; }
|
|
.cover .subtitle { font-size: 13pt; color: #6b7280; margin-bottom: 40px; }
|
|
.cover .org-info { font-size: 11pt; color: #374151; line-height: 2; }
|
|
.record { page-break-inside: avoid; margin-bottom: 30px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; }
|
|
.record-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #7c3aed; }
|
|
.record-header .vvt-id { font-family: monospace; font-size: 10pt; color: #6b7280; background: #f3f4f6; padding: 2px 8px; border-radius: 4px; }
|
|
.record-header h3 { font-size: 13pt; color: #1f2937; }
|
|
table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 10pt; }
|
|
th { background: #f5f3ff; color: #5b21b6; font-weight: 600; text-align: left; padding: 8px 10px; border: 1px solid #e5e7eb; }
|
|
td { padding: 6px 10px; border: 1px solid #e5e7eb; vertical-align: top; }
|
|
.page-footer { margin-top: 40px; padding-top: 16px; border-top: 2px solid #e5e7eb; font-size: 9pt; color: #9ca3af; display: flex; justify-content: space-between; }
|
|
@media print { body { margin: 15mm; padding: 0; max-width: none; } .record { page-break-inside: avoid; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="cover">
|
|
<h1>Verzeichnis aller Verarbeitungstaetigkeiten</h1>
|
|
<div class="subtitle">als Auftragsverarbeiter gemaess Art. 30 Abs. 2 DSGVO</div>
|
|
<div class="org-info">
|
|
<strong>${orgHeader.organizationName || '(Organisation eintragen)'}</strong><br/>
|
|
${orgHeader.dpoName ? `Datenschutzbeauftragter: ${orgHeader.dpoName}<br/>` : ''}
|
|
Stand: ${today}
|
|
</div>
|
|
</div>
|
|
`
|
|
|
|
for (const v of activeVendors) {
|
|
const thirdCountryLocations = v.processingLocations.filter(l => !l.isEU && !l.isAdequate)
|
|
const thirdCountryHtml = thirdCountryLocations.length > 0
|
|
? thirdCountryLocations.map(l => `${l.country}${l.region ? ` (${l.region})` : ''}`).join(', ') +
|
|
(v.transferMechanisms.length > 0 ? `<br/>Garantien: ${v.transferMechanisms.join(', ')}` : '')
|
|
: 'Keine Drittlanduebermittlung'
|
|
const subProcessorHtml = subProcessors.length > 0
|
|
? subProcessors.map(s => `${s.name} — ${s.serviceDescription || s.country}`).join('<br/>')
|
|
: 'Keine'
|
|
|
|
html += `
|
|
<div class="record">
|
|
<div class="record-header">
|
|
<span class="vvt-id">${ROLE_LABELS[v.role] ?? v.role}</span>
|
|
<h3>${v.name}</h3>
|
|
</div>
|
|
<table>
|
|
<tr><th style="width:35%">Pflichtfeld (Art. 30 Abs. 2)</th><th>Inhalt</th></tr>
|
|
<tr><td><strong>Name/Kontaktdaten des Auftragsverarbeiters</strong></td><td>${orgHeader.organizationName}${orgHeader.dpoContact ? `<br/>Kontakt: ${orgHeader.dpoContact}` : ''}</td></tr>
|
|
<tr><td><strong>Name/Kontaktdaten des Verantwortlichen</strong></td><td>${v.name}${v.primaryContact.email ? `<br/>Kontakt: ${v.primaryContact.email}` : ''}</td></tr>
|
|
<tr><td><strong>Kategorien von Verarbeitungen</strong></td><td>${v.serviceDescription || '<em style="color:#9ca3af;">nicht angegeben</em>'}</td></tr>
|
|
<tr><td><strong>Unterauftragsverarbeiter</strong></td><td>${subProcessorHtml}</td></tr>
|
|
<tr><td><strong>Uebermittlung an Drittlaender</strong></td><td>${thirdCountryHtml}</td></tr>
|
|
<tr><td><strong>TOM (Art. 32 DSGVO)</strong></td><td>Siehe TOM-Dokumentation im Vendor-Compliance-Modul</td></tr>
|
|
</table>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
html += `
|
|
<div class="page-footer">
|
|
<span>Auftragsverarbeiter-Verzeichnis — ${orgHeader.organizationName}</span>
|
|
<span>Stand: ${today}</span>
|
|
</div>
|
|
</body></html>`
|
|
|
|
const printWindow = window.open('', '_blank')
|
|
if (printWindow) {
|
|
printWindow.document.write(html)
|
|
printWindow.document.close()
|
|
printWindow.focus()
|
|
setTimeout(() => printWindow.print(), 300)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Info banner */}
|
|
<div className="bg-purple-50 border border-purple-200 rounded-xl p-4 flex items-start gap-3">
|
|
<svg className="w-5 h-5 text-purple-500 mt-0.5 flex-shrink-0" 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 className="flex-1">
|
|
<p className="text-sm text-purple-800">
|
|
Dieses Verzeichnis zeigt alle Auftragsverarbeiter aus dem Vendor Register.
|
|
Neue Auftragsverarbeiter hinzufuegen oder bestehende bearbeiten:
|
|
</p>
|
|
<a href="/sdk/vendor-compliance"
|
|
className="inline-flex items-center gap-1.5 mt-2 px-3 py-1.5 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 transition-colors">
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
Zum Vendor Register
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-gray-900">Auftragsverarbeiter-Verzeichnis (Art. 30 Abs. 2)</h3>
|
|
<p className="text-sm text-gray-500 mt-0.5">
|
|
Auftragsverarbeiter und Unterauftragsverarbeiter aus dem Vendor-Compliance-Modul (nur lesen).
|
|
</p>
|
|
</div>
|
|
{vendors.length > 0 && (
|
|
<button
|
|
onClick={handlePrintProcessorDoc}
|
|
className="flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
|
|
</svg>
|
|
Als PDF drucken
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Loading state */}
|
|
{loading && (
|
|
<div className="p-8 text-center">
|
|
<div className="w-8 h-8 mx-auto border-2 border-purple-200 border-t-purple-600 rounded-full animate-spin mb-3" />
|
|
<p className="text-sm text-gray-500">Auftragsverarbeiter werden geladen...</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Error state */}
|
|
{!loading && error && (
|
|
<div className="p-6 bg-red-50 border border-red-200 rounded-lg text-center">
|
|
<p className="text-sm text-red-700 mb-2">{error}</p>
|
|
<button onClick={() => {
|
|
setLoading(true)
|
|
setError(null)
|
|
apiListProcessorVendors()
|
|
.then(setVendors)
|
|
.catch(err => setError(err.message))
|
|
.finally(() => setLoading(false))
|
|
}} className="text-sm text-red-600 underline hover:text-red-800">
|
|
Erneut versuchen
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Empty state */}
|
|
{!loading && !error && vendors.length === 0 && (
|
|
<div className="p-8 bg-gray-50 rounded-lg text-center">
|
|
<div className="w-12 h-12 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-3">
|
|
<svg className="w-6 h-6 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>
|
|
<h4 className="font-medium text-gray-700 mb-1">Keine Auftragsverarbeiter im Vendor Register</h4>
|
|
<p className="text-sm text-gray-500 max-w-md mx-auto">
|
|
Legen Sie Auftragsverarbeiter im Vendor Register an, damit sie hier automatisch erscheinen.
|
|
</p>
|
|
<a href="/sdk/vendor-compliance"
|
|
className="inline-flex items-center gap-1.5 mt-3 px-4 py-2 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 transition-colors">
|
|
Zum Vendor Register
|
|
</a>
|
|
</div>
|
|
)}
|
|
|
|
{/* Vendor cards (read-only) */}
|
|
{!loading && !error && vendors.length > 0 && (
|
|
<div className="space-y-3">
|
|
{vendors.map(v => {
|
|
const thirdCountryLocations = v.processingLocations.filter(l => !l.isEU && !l.isAdequate)
|
|
return (
|
|
<div key={v.id} className="bg-white rounded-xl border border-gray-200 p-5 hover:border-purple-200 transition-colors">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1 min-w-0">
|
|
{/* Header: Name + Role + Status */}
|
|
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
|
<h4 className="text-base font-semibold text-gray-900">{v.name}</h4>
|
|
<span className="px-2 py-0.5 text-xs rounded-full bg-purple-100 text-purple-700">
|
|
{ROLE_LABELS[v.role] ?? v.role}
|
|
</span>
|
|
<span className={`px-2 py-0.5 text-xs rounded-full ${VENDOR_STATUS_COLORS[v.status] ?? 'bg-gray-100 text-gray-600'}`}>
|
|
{VENDOR_STATUS_LABELS[v.status] ?? v.status}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Service description */}
|
|
{v.serviceDescription && (
|
|
<p className="text-sm text-gray-600 mt-1">{v.serviceDescription}</p>
|
|
)}
|
|
|
|
{/* Contact */}
|
|
<div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
|
|
{v.primaryContact.name && (
|
|
<span className="flex items-center gap-1">
|
|
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
</svg>
|
|
{v.primaryContact.name}
|
|
</span>
|
|
)}
|
|
{v.primaryContact.email && (
|
|
<span className="flex items-center gap-1">
|
|
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
{v.primaryContact.email}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Risk + Meta row */}
|
|
<div className="flex items-center gap-3 mt-2 flex-wrap">
|
|
<span className={`px-2 py-0.5 text-xs rounded-full ${riskColor(v.inherentRiskScore)}`}>
|
|
Inherent: {v.inherentRiskScore}
|
|
</span>
|
|
<span className={`px-2 py-0.5 text-xs rounded-full ${riskColor(v.residualRiskScore)}`}>
|
|
Residual: {v.residualRiskScore}
|
|
</span>
|
|
{v.updatedAt && (
|
|
<span className="text-xs text-gray-400">
|
|
Aktualisiert: {new Date(v.updatedAt).toLocaleDateString('de-DE')}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Third-country transfers */}
|
|
{thirdCountryLocations.length > 0 && (
|
|
<div className="mt-2">
|
|
<span className="text-xs font-medium text-amber-700 bg-amber-50 px-2 py-0.5 rounded">Drittlandtransfers:</span>
|
|
<span className="text-xs text-gray-600 ml-1">
|
|
{thirdCountryLocations.map(l => `${l.country}${l.region ? ` (${l.region})` : ''}`).join(', ')}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Certifications */}
|
|
{v.certifications.length > 0 && (
|
|
<div className="flex items-center gap-2 mt-2 flex-wrap">
|
|
{v.certifications.map((c, i) => (
|
|
<span key={i} className="px-2 py-0.5 text-xs rounded-full bg-blue-50 text-blue-700 border border-blue-200">
|
|
{c.type}{c.expirationDate ? ` (bis ${new Date(c.expirationDate).toLocaleDateString('de-DE')})` : ''}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Link to vendor register */}
|
|
<div className="ml-4 flex-shrink-0">
|
|
<a href="/sdk/vendor-compliance"
|
|
className="px-3 py-1.5 text-sm text-purple-600 hover:bg-purple-50 rounded-lg transition-colors inline-flex items-center gap-1">
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
Im Vendor Register oeffnen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Legal info */}
|
|
<div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
|
|
<h4 className="text-sm font-medium text-amber-800 mb-1">Art. 30 Abs. 2 DSGVO — Pflichtangaben</h4>
|
|
<ul className="text-sm text-amber-700 space-y-1 ml-4 list-disc">
|
|
<li>Name und Kontaktdaten des/der Auftragsverarbeiter(s) und jedes Verantwortlichen</li>
|
|
<li>Kategorien von Verarbeitungen, die im Auftrag jedes Verantwortlichen durchgefuehrt werden</li>
|
|
<li>Uebermittlungen an Drittlaender einschliesslich Dokumentierung geeigneter Garantien</li>
|
|
<li>Allgemeine Beschreibung der technischen und organisatorischen Massnahmen (Art. 32 Abs. 1)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// SHARED FORM COMPONENTS
|
|
// =============================================================================
|
|
|
|
function FormSection({ title, children }: { title: string; children: React.ReactNode }) {
|
|
return (
|
|
<div className="p-4 space-y-3">
|
|
<h4 className="font-medium text-gray-800 text-sm">{title}</h4>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function FormField({ label, children }: { label: string; children: React.ReactNode }) {
|
|
return (
|
|
<div>
|
|
<label className="block text-xs text-gray-500 mb-1">{label}</label>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function MultiTextInput({ values, onChange, placeholder }: { values: string[]; onChange: (v: string[]) => void; placeholder?: string }) {
|
|
const [input, setInput] = useState('')
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (e.key === 'Enter' && input.trim()) {
|
|
e.preventDefault()
|
|
onChange([...values, input.trim()])
|
|
setInput('')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex flex-wrap gap-1 mb-2">
|
|
{values.map((v, i) => (
|
|
<span key={i} className="flex items-center gap-1 px-2 py-1 bg-purple-100 text-purple-700 rounded text-sm">
|
|
{v}
|
|
<button onClick={() => onChange(values.filter((_, j) => j !== i))} className="text-purple-400 hover:text-purple-600">
|
|
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</span>
|
|
))}
|
|
</div>
|
|
<input
|
|
type="text"
|
|
value={input}
|
|
onChange={(e) => setInput(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
placeholder={placeholder}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function CheckboxGrid({ options, selected, onChange }: {
|
|
options: { value: string; label: string; highlight?: boolean }[]
|
|
selected: string[]
|
|
onChange: (v: string[]) => void
|
|
}) {
|
|
const toggle = (value: string) => {
|
|
if (selected.includes(value)) {
|
|
onChange(selected.filter(v => v !== value))
|
|
} else {
|
|
onChange([...selected, value])
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-1.5">
|
|
{options.map(opt => (
|
|
<label
|
|
key={opt.value}
|
|
className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer text-sm transition-colors ${
|
|
selected.includes(opt.value)
|
|
? opt.highlight ? 'bg-red-50 border border-red-300' : 'bg-purple-50 border border-purple-300'
|
|
: opt.highlight ? 'bg-red-50/30 border border-gray-200' : 'border border-gray-200 hover:bg-gray-50'
|
|
}`}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={selected.includes(opt.value)}
|
|
onChange={() => toggle(opt.value)}
|
|
className="w-3.5 h-3.5 text-purple-600 rounded"
|
|
/>
|
|
<span className={opt.highlight ? 'text-red-700' : 'text-gray-700'}>{opt.label}</span>
|
|
{opt.highlight && <span className="text-xs text-red-400">Art.9</span>}
|
|
</label>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|