4435e7ea0a
Services: Admin-Compliance, Backend-Compliance, AI-Compliance-SDK, Consent-SDK, Developer-Portal, PCA-Platform, DSMS Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
659 lines
24 KiB
TypeScript
659 lines
24 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* DataPointCatalog Component
|
|
*
|
|
* Zeigt den vollstaendigen Datenpunktkatalog an.
|
|
* Ermoeglicht Filterung, Suche und Auswahl von Datenpunkten.
|
|
* Unterstützt 18 Kategorien (A-R) inkl. Art. 9 DSGVO Warnungen.
|
|
*/
|
|
|
|
import { useState, useMemo } from 'react'
|
|
import {
|
|
Search,
|
|
Filter,
|
|
CheckCircle,
|
|
Circle,
|
|
Shield,
|
|
AlertTriangle,
|
|
ChevronDown,
|
|
ChevronRight,
|
|
Key,
|
|
Megaphone,
|
|
MessageSquare,
|
|
CreditCard,
|
|
Users,
|
|
Bot,
|
|
Lock,
|
|
User,
|
|
Mail,
|
|
Activity,
|
|
MapPin,
|
|
Smartphone,
|
|
BarChart3,
|
|
Share2,
|
|
Heart,
|
|
Briefcase,
|
|
FileText,
|
|
FileCode,
|
|
Info,
|
|
X,
|
|
} from 'lucide-react'
|
|
import {
|
|
DataPoint,
|
|
DataPointCategory,
|
|
RiskLevel,
|
|
LegalBasis,
|
|
SupportedLanguage,
|
|
CATEGORY_METADATA,
|
|
RISK_LEVEL_STYLING,
|
|
LEGAL_BASIS_INFO,
|
|
RETENTION_PERIOD_INFO,
|
|
ARTICLE_9_WARNING,
|
|
EMPLOYEE_DATA_WARNING,
|
|
AI_DATA_WARNING,
|
|
} from '@/lib/sdk/einwilligungen/types'
|
|
import { searchDataPoints } from '@/lib/sdk/einwilligungen/catalog/loader'
|
|
|
|
// =============================================================================
|
|
// TYPES
|
|
// =============================================================================
|
|
|
|
interface DataPointCatalogProps {
|
|
dataPoints: DataPoint[]
|
|
selectedIds: string[]
|
|
onToggle: (id: string) => void
|
|
onSelectAll?: () => void
|
|
onDeselectAll?: () => void
|
|
language?: SupportedLanguage
|
|
showFilters?: boolean
|
|
readOnly?: boolean
|
|
}
|
|
|
|
// =============================================================================
|
|
// HELPER COMPONENTS
|
|
// =============================================================================
|
|
|
|
const CategoryIcon: React.FC<{ category: DataPointCategory; className?: string }> = ({
|
|
category,
|
|
className = 'w-5 h-5',
|
|
}) => {
|
|
const icons: Record<DataPointCategory, React.ReactNode> = {
|
|
// 18 Kategorien (A-R)
|
|
MASTER_DATA: <User className={className} />,
|
|
CONTACT_DATA: <Mail className={className} />,
|
|
AUTHENTICATION: <Key className={className} />,
|
|
CONSENT: <CheckCircle className={className} />,
|
|
COMMUNICATION: <MessageSquare className={className} />,
|
|
PAYMENT: <CreditCard className={className} />,
|
|
USAGE_DATA: <Activity className={className} />,
|
|
LOCATION: <MapPin className={className} />,
|
|
DEVICE_DATA: <Smartphone className={className} />,
|
|
MARKETING: <Megaphone className={className} />,
|
|
ANALYTICS: <BarChart3 className={className} />,
|
|
SOCIAL_MEDIA: <Share2 className={className} />,
|
|
HEALTH_DATA: <Heart className={className} />,
|
|
EMPLOYEE_DATA: <Briefcase className={className} />,
|
|
CONTRACT_DATA: <FileText className={className} />,
|
|
LOG_DATA: <FileCode className={className} />,
|
|
AI_DATA: <Bot className={className} />,
|
|
SECURITY: <Shield className={className} />,
|
|
}
|
|
return <>{icons[category] || <Circle className={className} />}</>
|
|
}
|
|
|
|
const RiskBadge: React.FC<{ level: RiskLevel; language: SupportedLanguage }> = ({
|
|
level,
|
|
language,
|
|
}) => {
|
|
const styling = RISK_LEVEL_STYLING[level]
|
|
return (
|
|
<span
|
|
className={`px-2 py-0.5 text-xs font-medium rounded-full ${styling.bgColor} ${styling.color}`}
|
|
>
|
|
{styling.label[language]}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
const LegalBasisBadge: React.FC<{ basis: LegalBasis; language: SupportedLanguage }> = ({
|
|
basis,
|
|
language,
|
|
}) => {
|
|
const info = LEGAL_BASIS_INFO[basis]
|
|
const colors: Record<LegalBasis, string> = {
|
|
CONTRACT: 'bg-blue-100 text-blue-700',
|
|
CONSENT: 'bg-purple-100 text-purple-700',
|
|
EXPLICIT_CONSENT: 'bg-rose-100 text-rose-700',
|
|
LEGITIMATE_INTEREST: 'bg-amber-100 text-amber-700',
|
|
LEGAL_OBLIGATION: 'bg-slate-100 text-slate-700',
|
|
VITAL_INTERESTS: 'bg-emerald-100 text-emerald-700',
|
|
PUBLIC_INTEREST: 'bg-cyan-100 text-cyan-700',
|
|
}
|
|
return (
|
|
<span className={`px-2 py-0.5 text-xs font-medium rounded-full ${colors[basis] || 'bg-gray-100 text-gray-700'}`}>
|
|
{info?.name[language] || basis}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Warnung fuer besondere Kategorien (Art. 9 DSGVO, BDSG § 26, AI Act)
|
|
*/
|
|
const SpecialCategoryWarning: React.FC<{
|
|
category: DataPointCategory
|
|
language: SupportedLanguage
|
|
onClose?: () => void
|
|
}> = ({ category, language, onClose }) => {
|
|
// Bestimme welche Warnung angezeigt werden soll
|
|
let warning = null
|
|
let bgColor = ''
|
|
let borderColor = ''
|
|
let iconColor = ''
|
|
|
|
if (category === 'HEALTH_DATA') {
|
|
warning = ARTICLE_9_WARNING
|
|
bgColor = 'bg-rose-50'
|
|
borderColor = 'border-rose-200'
|
|
iconColor = 'text-rose-600'
|
|
} else if (category === 'EMPLOYEE_DATA') {
|
|
warning = EMPLOYEE_DATA_WARNING
|
|
bgColor = 'bg-orange-50'
|
|
borderColor = 'border-orange-200'
|
|
iconColor = 'text-orange-600'
|
|
} else if (category === 'AI_DATA') {
|
|
warning = AI_DATA_WARNING
|
|
bgColor = 'bg-fuchsia-50'
|
|
borderColor = 'border-fuchsia-200'
|
|
iconColor = 'text-fuchsia-600'
|
|
}
|
|
|
|
if (!warning) return null
|
|
|
|
return (
|
|
<div className={`p-4 rounded-lg border ${bgColor} ${borderColor} mb-4`}>
|
|
<div className="flex items-start gap-3">
|
|
<AlertTriangle className={`w-5 h-5 ${iconColor} flex-shrink-0 mt-0.5`} />
|
|
<div className="flex-1">
|
|
<div className="flex items-center justify-between">
|
|
<h4 className={`font-semibold ${iconColor}`}>
|
|
{warning.title[language]}
|
|
</h4>
|
|
{onClose && (
|
|
<button
|
|
onClick={onClose}
|
|
className="text-slate-400 hover:text-slate-600 transition-colors"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-slate-600 mt-1">
|
|
{warning.description[language]}
|
|
</p>
|
|
<ul className="mt-3 space-y-1">
|
|
{warning.requirements.map((req, idx) => (
|
|
<li key={idx} className="text-sm text-slate-700 flex items-start gap-2">
|
|
<span className={`${iconColor} font-bold`}>•</span>
|
|
<span>{req[language]}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Inline-Hinweis fuer Art. 9 Datenpunkte
|
|
*/
|
|
const Article9Badge: React.FC<{ language: SupportedLanguage }> = ({ language }) => (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full bg-rose-100 text-rose-700 border border-rose-200">
|
|
<Heart className="w-3 h-3" />
|
|
{language === 'de' ? 'Art. 9 DSGVO' : 'Art. 9 GDPR'}
|
|
</span>
|
|
)
|
|
|
|
// =============================================================================
|
|
// MAIN COMPONENT
|
|
// =============================================================================
|
|
|
|
export function DataPointCatalog({
|
|
dataPoints,
|
|
selectedIds,
|
|
onToggle,
|
|
onSelectAll,
|
|
onDeselectAll,
|
|
language = 'de',
|
|
showFilters = true,
|
|
readOnly = false,
|
|
}: DataPointCatalogProps) {
|
|
// Alle 18 Kategorien in der richtigen Reihenfolge (A-R)
|
|
const ALL_CATEGORIES: DataPointCategory[] = [
|
|
'MASTER_DATA', // A
|
|
'CONTACT_DATA', // B
|
|
'AUTHENTICATION', // C
|
|
'CONSENT', // D
|
|
'COMMUNICATION', // E
|
|
'PAYMENT', // F
|
|
'USAGE_DATA', // G
|
|
'LOCATION', // H
|
|
'DEVICE_DATA', // I
|
|
'MARKETING', // J
|
|
'ANALYTICS', // K
|
|
'SOCIAL_MEDIA', // L
|
|
'HEALTH_DATA', // M - Art. 9 DSGVO
|
|
'EMPLOYEE_DATA', // N - BDSG § 26
|
|
'CONTRACT_DATA', // O
|
|
'LOG_DATA', // P
|
|
'AI_DATA', // Q - AI Act
|
|
'SECURITY', // R
|
|
]
|
|
|
|
// State
|
|
const [searchQuery, setSearchQuery] = useState('')
|
|
const [expandedCategories, setExpandedCategories] = useState<Set<DataPointCategory>>(
|
|
new Set(ALL_CATEGORIES)
|
|
)
|
|
const [filterCategory, setFilterCategory] = useState<DataPointCategory | 'ALL'>('ALL')
|
|
const [filterRisk, setFilterRisk] = useState<RiskLevel | 'ALL'>('ALL')
|
|
const [filterBasis, setFilterBasis] = useState<LegalBasis | 'ALL'>('ALL')
|
|
const [dismissedWarnings, setDismissedWarnings] = useState<Set<DataPointCategory>>(new Set())
|
|
|
|
// Filtered and searched data points
|
|
const filteredDataPoints = useMemo(() => {
|
|
let result = dataPoints
|
|
|
|
// Search
|
|
if (searchQuery.trim()) {
|
|
result = searchDataPoints(result, searchQuery, language)
|
|
}
|
|
|
|
// Filter by category
|
|
if (filterCategory !== 'ALL') {
|
|
result = result.filter((dp) => dp.category === filterCategory)
|
|
}
|
|
|
|
// Filter by risk
|
|
if (filterRisk !== 'ALL') {
|
|
result = result.filter((dp) => dp.riskLevel === filterRisk)
|
|
}
|
|
|
|
// Filter by legal basis
|
|
if (filterBasis !== 'ALL') {
|
|
result = result.filter((dp) => dp.legalBasis === filterBasis)
|
|
}
|
|
|
|
return result
|
|
}, [dataPoints, searchQuery, filterCategory, filterRisk, filterBasis, language])
|
|
|
|
// Group by category (18 Kategorien)
|
|
const groupedDataPoints = useMemo(() => {
|
|
const grouped = new Map<DataPointCategory, DataPoint[]>()
|
|
for (const cat of ALL_CATEGORIES) {
|
|
grouped.set(cat, [])
|
|
}
|
|
for (const dp of filteredDataPoints) {
|
|
const existing = grouped.get(dp.category) || []
|
|
grouped.set(dp.category, [...existing, dp])
|
|
}
|
|
return grouped
|
|
}, [filteredDataPoints])
|
|
|
|
// Zaehle ausgewaehlte spezielle Kategorien fuer Warnungen
|
|
const selectedSpecialCategories = useMemo(() => {
|
|
const special = new Set<DataPointCategory>()
|
|
for (const id of selectedIds) {
|
|
const dp = dataPoints.find(d => d.id === id)
|
|
if (dp) {
|
|
if (dp.category === 'HEALTH_DATA' || dp.isSpecialCategory) {
|
|
special.add('HEALTH_DATA')
|
|
}
|
|
if (dp.category === 'EMPLOYEE_DATA') {
|
|
special.add('EMPLOYEE_DATA')
|
|
}
|
|
if (dp.category === 'AI_DATA') {
|
|
special.add('AI_DATA')
|
|
}
|
|
}
|
|
}
|
|
return special
|
|
}, [selectedIds, dataPoints])
|
|
|
|
// Toggle category expansion
|
|
const toggleCategory = (category: DataPointCategory) => {
|
|
setExpandedCategories((prev) => {
|
|
const next = new Set(prev)
|
|
if (next.has(category)) {
|
|
next.delete(category)
|
|
} else {
|
|
next.add(category)
|
|
}
|
|
return next
|
|
})
|
|
}
|
|
|
|
// Stats
|
|
const totalSelected = selectedIds.length
|
|
const totalDataPoints = dataPoints.length
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Header with Stats */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<div className="text-sm text-slate-600">
|
|
<span className="font-semibold text-slate-900">{totalSelected}</span> von{' '}
|
|
<span className="font-semibold">{totalDataPoints}</span> Datenpunkte ausgewaehlt
|
|
</div>
|
|
</div>
|
|
{!readOnly && (
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={onSelectAll}
|
|
className="text-sm text-indigo-600 hover:text-indigo-700 font-medium"
|
|
>
|
|
Alle auswaehlen
|
|
</button>
|
|
<span className="text-slate-300">|</span>
|
|
<button
|
|
onClick={onDeselectAll}
|
|
className="text-sm text-slate-600 hover:text-slate-700 font-medium"
|
|
>
|
|
Auswahl aufheben
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Art. 9 DSGVO / BDSG § 26 / AI Act Warnungen */}
|
|
{selectedSpecialCategories.size > 0 && (
|
|
<div className="space-y-3">
|
|
{selectedSpecialCategories.has('HEALTH_DATA') && !dismissedWarnings.has('HEALTH_DATA') && (
|
|
<SpecialCategoryWarning
|
|
category="HEALTH_DATA"
|
|
language={language}
|
|
onClose={() => setDismissedWarnings(prev => new Set([...prev, 'HEALTH_DATA']))}
|
|
/>
|
|
)}
|
|
{selectedSpecialCategories.has('EMPLOYEE_DATA') && !dismissedWarnings.has('EMPLOYEE_DATA') && (
|
|
<SpecialCategoryWarning
|
|
category="EMPLOYEE_DATA"
|
|
language={language}
|
|
onClose={() => setDismissedWarnings(prev => new Set([...prev, 'EMPLOYEE_DATA']))}
|
|
/>
|
|
)}
|
|
{selectedSpecialCategories.has('AI_DATA') && !dismissedWarnings.has('AI_DATA') && (
|
|
<SpecialCategoryWarning
|
|
category="AI_DATA"
|
|
language={language}
|
|
onClose={() => setDismissedWarnings(prev => new Set([...prev, 'AI_DATA']))}
|
|
/>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Search and Filters */}
|
|
{showFilters && (
|
|
<div className="flex flex-wrap gap-3">
|
|
{/* Search */}
|
|
<div className="relative flex-1 min-w-[200px]">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Datenpunkte suchen..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
|
|
{/* Category Filter */}
|
|
<select
|
|
value={filterCategory}
|
|
onChange={(e) => setFilterCategory(e.target.value as DataPointCategory | 'ALL')}
|
|
className="px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
>
|
|
<option value="ALL">Alle Kategorien</option>
|
|
{Object.entries(CATEGORY_METADATA).map(([key, meta]) => (
|
|
<option key={key} value={key}>
|
|
{meta.name[language]}
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
{/* Risk Filter */}
|
|
<select
|
|
value={filterRisk}
|
|
onChange={(e) => setFilterRisk(e.target.value as RiskLevel | 'ALL')}
|
|
className="px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
>
|
|
<option value="ALL">Alle Risikostufen</option>
|
|
<option value="LOW">{RISK_LEVEL_STYLING.LOW.label[language]}</option>
|
|
<option value="MEDIUM">{RISK_LEVEL_STYLING.MEDIUM.label[language]}</option>
|
|
<option value="HIGH">{RISK_LEVEL_STYLING.HIGH.label[language]}</option>
|
|
</select>
|
|
|
|
{/* Legal Basis Filter */}
|
|
<select
|
|
value={filterBasis}
|
|
onChange={(e) => setFilterBasis(e.target.value as LegalBasis | 'ALL')}
|
|
className="px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
>
|
|
<option value="ALL">Alle Rechtsgrundlagen</option>
|
|
{Object.entries(LEGAL_BASIS_INFO).map(([key, info]) => (
|
|
<option key={key} value={key}>
|
|
{info.name[language]}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
)}
|
|
|
|
{/* Data Points by Category */}
|
|
<div className="space-y-3">
|
|
{Array.from(groupedDataPoints.entries()).map(([category, categoryDataPoints]) => {
|
|
if (categoryDataPoints.length === 0) return null
|
|
|
|
const meta = CATEGORY_METADATA[category]
|
|
const isExpanded = expandedCategories.has(category)
|
|
const selectedInCategory = categoryDataPoints.filter((dp) =>
|
|
selectedIds.includes(dp.id)
|
|
).length
|
|
|
|
return (
|
|
<div
|
|
key={category}
|
|
className="border border-slate-200 rounded-xl overflow-hidden bg-white"
|
|
>
|
|
{/* Category Header */}
|
|
<button
|
|
onClick={() => toggleCategory(category)}
|
|
className={`w-full flex items-center justify-between px-4 py-3 transition-colors ${
|
|
category === 'HEALTH_DATA'
|
|
? 'bg-rose-50 hover:bg-rose-100 border-l-4 border-rose-400'
|
|
: category === 'EMPLOYEE_DATA'
|
|
? 'bg-orange-50 hover:bg-orange-100 border-l-4 border-orange-400'
|
|
: category === 'AI_DATA'
|
|
? 'bg-fuchsia-50 hover:bg-fuchsia-100 border-l-4 border-fuchsia-400'
|
|
: 'bg-slate-50 hover:bg-slate-100'
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className={`p-2 rounded-lg ${
|
|
category === 'HEALTH_DATA' ? 'bg-rose-100' :
|
|
category === 'EMPLOYEE_DATA' ? 'bg-orange-100' :
|
|
category === 'AI_DATA' ? 'bg-fuchsia-100' :
|
|
`bg-${meta.color}-100`
|
|
}`}>
|
|
<CategoryIcon
|
|
category={category}
|
|
className={`w-5 h-5 ${
|
|
category === 'HEALTH_DATA' ? 'text-rose-600' :
|
|
category === 'EMPLOYEE_DATA' ? 'text-orange-600' :
|
|
category === 'AI_DATA' ? 'text-fuchsia-600' :
|
|
`text-${meta.color}-600`
|
|
}`}
|
|
/>
|
|
</div>
|
|
<div className="text-left">
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-semibold text-slate-900">
|
|
{meta.code}. {meta.name[language]}
|
|
</span>
|
|
{category === 'HEALTH_DATA' && (
|
|
<span className="text-xs bg-rose-200 text-rose-700 px-1.5 py-0.5 rounded font-medium">
|
|
Art. 9 DSGVO
|
|
</span>
|
|
)}
|
|
{category === 'EMPLOYEE_DATA' && (
|
|
<span className="text-xs bg-orange-200 text-orange-700 px-1.5 py-0.5 rounded font-medium">
|
|
BDSG § 26
|
|
</span>
|
|
)}
|
|
{category === 'AI_DATA' && (
|
|
<span className="text-xs bg-fuchsia-200 text-fuchsia-700 px-1.5 py-0.5 rounded font-medium">
|
|
AI Act
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="text-xs text-slate-500">{meta.description[language]}</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-sm text-slate-500">
|
|
{selectedInCategory}/{categoryDataPoints.length}
|
|
</span>
|
|
{isExpanded ? (
|
|
<ChevronDown className="w-5 h-5 text-slate-400" />
|
|
) : (
|
|
<ChevronRight className="w-5 h-5 text-slate-400" />
|
|
)}
|
|
</div>
|
|
</button>
|
|
|
|
{/* Data Points List */}
|
|
{isExpanded && (
|
|
<div className="divide-y divide-slate-100">
|
|
{categoryDataPoints.map((dp) => {
|
|
const isSelected = selectedIds.includes(dp.id)
|
|
return (
|
|
<div
|
|
key={dp.id}
|
|
className={`flex items-start gap-4 p-4 ${
|
|
readOnly ? '' : 'cursor-pointer hover:bg-slate-50'
|
|
} transition-colors ${isSelected ? 'bg-indigo-50/50' : ''}`}
|
|
onClick={() => !readOnly && onToggle(dp.id)}
|
|
>
|
|
{/* Checkbox */}
|
|
{!readOnly && (
|
|
<div className="flex-shrink-0 pt-0.5">
|
|
{isSelected ? (
|
|
<CheckCircle className="w-5 h-5 text-indigo-600" />
|
|
) : (
|
|
<Circle className="w-5 h-5 text-slate-300" />
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span className="text-xs font-mono text-slate-400 bg-slate-100 px-1.5 py-0.5 rounded">
|
|
{dp.code}
|
|
</span>
|
|
<span className="font-medium text-slate-900">
|
|
{dp.name[language]}
|
|
</span>
|
|
{dp.isSpecialCategory && (
|
|
<Article9Badge language={language} />
|
|
)}
|
|
{dp.isCustom && (
|
|
<span className="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">
|
|
{language === 'de' ? 'Benutzerdefiniert' : 'Custom'}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-slate-600 mt-1">
|
|
{dp.description[language]}
|
|
</p>
|
|
</div>
|
|
<div className="flex-shrink-0 flex flex-col items-end gap-1">
|
|
<RiskBadge level={dp.riskLevel} language={language} />
|
|
<LegalBasisBadge basis={dp.legalBasis} language={language} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Details */}
|
|
<div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-500">
|
|
<span>
|
|
<strong>{language === 'de' ? 'Zweck' : 'Purpose'}:</strong> {dp.purpose[language]}
|
|
</span>
|
|
<span>
|
|
<strong>{language === 'de' ? 'Loeschfrist' : 'Retention'}:</strong>{' '}
|
|
{RETENTION_PERIOD_INFO[dp.retentionPeriod]?.label[language] || dp.retentionPeriod}
|
|
</span>
|
|
{dp.cookieCategory && (
|
|
<span>
|
|
<strong>Cookie:</strong> {dp.cookieCategory}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{/* Spezielle Warnungen fuer Art. 9 / BDSG / AI Act */}
|
|
{(dp.requiresExplicitConsent || dp.isSpecialCategory) && (
|
|
<div className="mt-2 p-2 rounded-md bg-rose-50 border border-rose-200">
|
|
<div className="flex items-start gap-2 text-xs text-rose-700">
|
|
<AlertTriangle className="w-4 h-4 flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<strong>
|
|
{language === 'de'
|
|
? 'Ausdrueckliche Einwilligung erforderlich'
|
|
: 'Explicit consent required'}
|
|
</strong>
|
|
{dp.legalBasis === 'EXPLICIT_CONSENT' && (
|
|
<span className="block mt-1 text-rose-600">
|
|
{language === 'de'
|
|
? 'Art. 9 Abs. 2 lit. a DSGVO - Separate Einwilligungserklaerung notwendig'
|
|
: 'Art. 9(2)(a) GDPR - Separate consent declaration required'}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Third Party Recipients */}
|
|
{dp.thirdPartyRecipients.length > 0 && (
|
|
<div className="mt-2 text-xs text-slate-500">
|
|
<strong>Drittanbieter:</strong>{' '}
|
|
{dp.thirdPartyRecipients.join(', ')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{/* Empty State */}
|
|
{filteredDataPoints.length === 0 && (
|
|
<div className="text-center py-12 text-slate-500">
|
|
<Search className="w-12 h-12 mx-auto mb-4 text-slate-300" />
|
|
<p className="font-medium">Keine Datenpunkte gefunden</p>
|
|
<p className="text-sm mt-1">Versuchen Sie andere Suchbegriffe oder Filter</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DataPointCatalog
|