e0c1d21879
Reduce both page.tsx files below the 500-LOC hard cap by extracting all inline tab components and API helpers into colocated _components/. - loeschfristen/page.tsx: 2720 → 467 LOC - vvt/page.tsx: 2297 → 256 LOC New files: LoeschkonzeptTab, loeschfristen/api, TabDokument, TabProcessor Updated: TabVerzeichnis (template picker + badge), vvt/api (template helpers) Fixed: VVTLinkSection wrong field name (linkedVVTActivityIds), VendorLinkSection added Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
337 lines
19 KiB
TypeScript
337 lines
19 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import type { VVTOrganizationHeader } from '@/lib/sdk/vvt-types'
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Types
|
|
// ---------------------------------------------------------------------------
|
|
|
|
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
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Constants
|
|
// ---------------------------------------------------------------------------
|
|
|
|
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'
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// API
|
|
// ---------------------------------------------------------------------------
|
|
|
|
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 ?? '',
|
|
}))
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Component
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export function TabProcessor({ orgHeader }: { orgHeader: VVTOrganizationHeader }) {
|
|
const [vendors, setVendors] = useState<VendorForProcessor[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const loadVendors = () => {
|
|
setLoading(true)
|
|
setError(null)
|
|
apiListProcessorVendors()
|
|
.then(data => setVendors(data))
|
|
.catch(err => setError(err.message ?? 'Fehler beim Laden der Auftragsverarbeiter'))
|
|
.finally(() => setLoading(false))
|
|
}
|
|
|
|
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">
|
|
<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 && (
|
|
<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>
|
|
)}
|
|
|
|
{!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={loadVendors} className="text-sm text-red-600 underline hover:text-red-800">
|
|
Erneut versuchen
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{!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>
|
|
)}
|
|
|
|
{!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">
|
|
<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>
|
|
{v.serviceDescription && <p className="text-sm text-gray-600 mt-1">{v.serviceDescription}</p>}
|
|
<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>
|
|
<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>
|
|
{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>
|
|
)}
|
|
{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>
|
|
<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>
|
|
|
|
<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>
|
|
)
|
|
}
|