{/* Header */}

Consent-Details

{record.email}

{/* Content */}

{/* User Info */}

Benutzerinformationen

Name: {record.firstName} {record.lastName}

E-Mail: {record.email}

User-ID: {record.identifier}

Consent-Status

Typ: {typeLabels[record.consentType]}

Status: {statusLabels[record.status]}

Version: v{record.currentVersion}

{/* Technical Details */}

Technische Details (letzter Consent)

IP-Adresse

{record.ipAddress}

Quelle

{record.source ?? '—'}

User-Agent

{record.userAgent}

{/* History Timeline */}

Consent-Historie {record.history.length} Einträge

{/* Timeline line */}

{record.history.map((entry, index) => (

{/* Icon */}

{actionIcons[entry.action]}

{/* Content */}

{actionLabels[entry.action]}

{entry.documentTitle && (

{entry.documentTitle}

)}

v{entry.version}

{formatDateTime(entry.timestamp)}

{entry.ipAddress}

Quelle: {entry.source}

{entry.notes && (

{entry.notes}

)} {/* Expandable User-Agent */}

User-Agent anzeigen

{entry.userAgent}

))}

{/* Footer Actions */}

Consent-ID: {record.id}

{record.status === 'granted' && !showRevokeConfirm && ( )} {showRevokeConfirm && (

Wirklich widerrufen?

)}

) } // ============================================================================= // TABLE ROW COMPONENT // ============================================================================= interface ConsentRecordRowProps { record: ConsentRecord onShowDetails: (record: ConsentRecord) => void } function ConsentRecordRow({ record, onShowDetails }: ConsentRecordRowProps) { return (

{record.email}

{record.identifier}

{typeLabels[record.consentType]} {statusLabels[record.status]} {formatDate(record.grantedAt)} {formatDate(record.withdrawnAt)} v{record.currentVersion}

{record.history.length}

) } // ============================================================================= // MAIN PAGE // ============================================================================= export default function EinwilligungenPage() { const { state } = useSDK() const [records, setRecords] = useState([]) const [filter, setFilter] = useState('all') const [searchQuery, setSearchQuery] = useState('') const [selectedRecord, setSelectedRecord] = useState(null) const [isLoading, setIsLoading] = useState(true) React.useEffect(() => { const loadConsents = async () => { try { const response = await fetch('/api/sdk/v1/einwilligungen/consent?stats=true') if (response.ok) { const data = await response.json() // Backend returns stats; actual record list requires separate call const listResponse = await fetch('/api/sdk/v1/einwilligungen/consent') if (listResponse.ok) { const listData = await listResponse.json() // Map backend records to frontend ConsentRecord shape if any returned if (listData.consents && listData.consents.length > 0) { const mapped: ConsentRecord[] = listData.consents.map((c: { id: string user_id: string data_point_id: string granted: boolean granted_at: string revoked_at?: string consent_version?: string source?: string ip_address?: string user_agent?: string history?: ConsentHistoryEntry[] }) => ({ id: c.id, identifier: c.user_id, email: c.user_id, consentType: (c.data_point_id as ConsentType) || 'privacy', status: (c.revoked_at ? 'withdrawn' : 'granted') as ConsentStatus, currentVersion: c.consent_version || '1.0', grantedAt: c.granted_at ? new Date(c.granted_at) : null, withdrawnAt: c.revoked_at ? new Date(c.revoked_at) : null, source: c.source ?? null, ipAddress: c.ip_address ?? '', userAgent: c.user_agent ?? '', history: c.history ?? [], })) setRecords(mapped) } } } } catch { // Backend not reachable, start with empty list } finally { setIsLoading(false) } } loadConsents() }, []) const filteredRecords = records.filter(record => { const matchesFilter = filter === 'all' || record.consentType === filter || record.status === filter const matchesSearch = searchQuery === '' || record.email.toLowerCase().includes(searchQuery.toLowerCase()) || record.identifier.toLowerCase().includes(searchQuery.toLowerCase()) return matchesFilter && matchesSearch }) const grantedCount = records.filter(r => r.status === 'granted').length const withdrawnCount = records.filter(r => r.status === 'withdrawn').length const versionUpdates = records.reduce((acc, r) => acc + r.history.filter(h => h.action === 'version_update').length, 0) const handleRevoke = async (recordId: string) => { try { const response = await fetch('/api/sdk/v1/einwilligungen/consent', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ consentId: recordId, action: 'revoke' }), }) if (response.ok) { const now = new Date() setRecords(prev => prev.map(r => { if (r.id === recordId) { return { ...r, status: 'withdrawn' as ConsentStatus, withdrawnAt: now, history: [ ...r.history, { id: `h-${recordId}-${r.history.length + 1}`, action: 'withdrawn' as HistoryAction, timestamp: now, version: r.currentVersion, ipAddress: 'Admin-Portal', userAgent: 'Admin Action', source: 'Manueller Widerruf durch Admin', notes: 'Widerruf über Admin-Portal durchgeführt', }, ], } } return r })) } } catch { // Fallback: update local state even if API call fails const now = new Date() setRecords(prev => prev.map(r => { if (r.id === recordId) { return { ...r, status: 'withdrawn' as ConsentStatus, withdrawnAt: now } } return r })) } } const stepInfo = STEP_EXPLANATIONS['einwilligungen'] return (

{/* Step Header */} {/* Navigation Tabs */} {/* Stats */}

Gesamt

{records.length}

Aktive Einwilligungen

{grantedCount}

Widerrufen

{withdrawnCount}

Versions-Updates

{versionUpdates}

{/* Info Banner */}

Consent-Historie aktiviert

Alle Änderungen an Einwilligungen werden protokolliert, inkl. Zustimmungen zu neuen Versionen von AGB, DSI und anderen Dokumenten. Klicken Sie auf "Details" um die vollständige Historie eines Nutzers einzusehen.

{/* Search and Filter */}

setSearchQuery(e.target.value)} placeholder="E-Mail oder User-ID 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" />

{['all', 'granted', 'withdrawn', 'terms', 'privacy', 'cookies', 'marketing', 'analytics'].map(f => ( ))}

{/* Records Table */}

{filteredRecords.map(record => ( ))}

Nutzer	Typ	Status	Erteilt am	Widerrufen am	Version	Historie	Aktion

{filteredRecords.length === 0 && (

Keine Einträge gefunden

Passen Sie die Suche oder den Filter an.

)}

{/* Pagination placeholder */}

Zeige {filteredRecords.length} von {records.length} Einträgen

{/* Detail Modal */} {selectedRecord && ( setSelectedRecord(null)} onRevoke={handleRevoke} /> )}

) }