refactor: Admin-Layout komplett entfernt — SDK als einziges Layout
All checks were successful
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-ai-compliance (push) Successful in 32s
CI / test-python-backend-compliance (push) Successful in 31s
CI / test-python-document-crawler (push) Successful in 21s
CI / test-python-dsms-gateway (push) Successful in 19s
All checks were successful
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-ai-compliance (push) Successful in 32s
CI / test-python-backend-compliance (push) Successful in 31s
CI / test-python-document-crawler (push) Successful in 21s
CI / test-python-dsms-gateway (push) Successful in 19s
Kaputtes (admin) Layout geloescht (Role-Selection, 404-Sidebar, localhost-Dashboard). SDK-Flow nach /sdk/sdk-flow verschoben. Route-Gruppe (sdk) aufgeloest. Root-Seite redirected auf /sdk. ~25 ungenutzte Dateien/Verzeichnisse entfernt. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
248
admin-compliance/app/sdk/einwilligungen/catalog/page.tsx
Normal file
248
admin-compliance/app/sdk/einwilligungen/catalog/page.tsx
Normal file
@@ -0,0 +1,248 @@
|
||||
'use client'
|
||||
|
||||
/**
|
||||
* Datenpunktkatalog Seite
|
||||
*
|
||||
* Zeigt den vollstaendigen Katalog aller personenbezogenen Daten,
|
||||
* die vom Unternehmen verarbeitet werden.
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useSDK } from '@/lib/sdk'
|
||||
import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
|
||||
import { DataPointCatalog } from '@/components/sdk/einwilligungen'
|
||||
import {
|
||||
EinwilligungenProvider,
|
||||
useEinwilligungen,
|
||||
} from '@/lib/sdk/einwilligungen/context'
|
||||
import {
|
||||
PREDEFINED_DATA_POINTS,
|
||||
RETENTION_MATRIX,
|
||||
} from '@/lib/sdk/einwilligungen/catalog/loader'
|
||||
import {
|
||||
DataPoint,
|
||||
SupportedLanguage,
|
||||
CATEGORY_METADATA,
|
||||
RISK_LEVEL_STYLING,
|
||||
LEGAL_BASIS_INFO,
|
||||
} from '@/lib/sdk/einwilligungen/types'
|
||||
import {
|
||||
Plus,
|
||||
Download,
|
||||
Upload,
|
||||
Filter,
|
||||
BarChart3,
|
||||
Shield,
|
||||
FileText,
|
||||
Cookie,
|
||||
Clock,
|
||||
ChevronRight,
|
||||
} from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
|
||||
// =============================================================================
|
||||
// CATALOG CONTENT COMPONENT
|
||||
// =============================================================================
|
||||
|
||||
function CatalogContent() {
|
||||
const { state } = useSDK()
|
||||
const {
|
||||
allDataPoints,
|
||||
selectedDataPointsData,
|
||||
categoryStats,
|
||||
riskStats,
|
||||
legalBasisStats,
|
||||
toggleDataPoint,
|
||||
setActiveTab,
|
||||
state: einwilligungenState,
|
||||
} = useEinwilligungen()
|
||||
|
||||
const [language, setLanguage] = useState<SupportedLanguage>('de')
|
||||
const [selectedIds, setSelectedIds] = useState<string[]>(
|
||||
allDataPoints.map((dp) => dp.id)
|
||||
)
|
||||
|
||||
// Stats
|
||||
const totalDataPoints = allDataPoints.length
|
||||
const customDataPoints = allDataPoints.filter((dp) => dp.isCustom).length
|
||||
const highRiskCount = riskStats.HIGH || 0
|
||||
const consentRequiredCount = allDataPoints.filter((dp) => dp.requiresExplicitConsent).length
|
||||
|
||||
const handleToggle = (id: string) => {
|
||||
setSelectedIds((prev) =>
|
||||
prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]
|
||||
)
|
||||
}
|
||||
|
||||
const handleSelectAll = () => {
|
||||
setSelectedIds(allDataPoints.map((dp) => dp.id))
|
||||
}
|
||||
|
||||
const handleDeselectAll = () => {
|
||||
setSelectedIds([])
|
||||
}
|
||||
|
||||
const stepInfo = STEP_EXPLANATIONS['einwilligungen'] || {
|
||||
title: 'Datenpunktkatalog',
|
||||
description: 'Verwalten Sie alle personenbezogenen Daten, die Ihr Unternehmen verarbeitet.',
|
||||
explanation: 'Der Datenpunktkatalog ist die Grundlage fuer Ihre Datenschutzerklaerung, den Cookie-Banner und die Loeschfristen.',
|
||||
tips: [],
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Step Header */}
|
||||
<StepHeader
|
||||
stepId="einwilligungen"
|
||||
title="Datenpunktkatalog"
|
||||
description="Verwalten Sie alle personenbezogenen Daten, die Ihr Unternehmen verarbeitet."
|
||||
explanation={stepInfo.explanation}
|
||||
tips={stepInfo.tips}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<button className="flex items-center gap-2 px-4 py-2 border border-slate-300 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50">
|
||||
<Upload className="w-4 h-4" />
|
||||
Importieren
|
||||
</button>
|
||||
<button className="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700">
|
||||
<Download className="w-4 h-4" />
|
||||
Exportieren
|
||||
</button>
|
||||
</div>
|
||||
</StepHeader>
|
||||
|
||||
{/* Navigation Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<Link
|
||||
href="/sdk/einwilligungen/privacy-policy"
|
||||
className="bg-white rounded-xl border border-slate-200 p-4 hover:border-indigo-300 hover:shadow-md transition-all group"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="p-2 rounded-lg bg-indigo-100">
|
||||
<FileText className="w-5 h-5 text-indigo-600" />
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-slate-400 group-hover:text-indigo-600 transition-colors" />
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<div className="font-semibold text-slate-900">Datenschutzerklaerung</div>
|
||||
<div className="text-sm text-slate-500">DSI aus Katalog generieren</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/sdk/einwilligungen/cookie-banner"
|
||||
className="bg-white rounded-xl border border-slate-200 p-4 hover:border-indigo-300 hover:shadow-md transition-all group"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="p-2 rounded-lg bg-amber-100">
|
||||
<Cookie className="w-5 h-5 text-amber-600" />
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-slate-400 group-hover:text-indigo-600 transition-colors" />
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<div className="font-semibold text-slate-900">Cookie-Banner</div>
|
||||
<div className="text-sm text-slate-500">Banner konfigurieren</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/sdk/einwilligungen/retention"
|
||||
className="bg-white rounded-xl border border-slate-200 p-4 hover:border-indigo-300 hover:shadow-md transition-all group"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="p-2 rounded-lg bg-purple-100">
|
||||
<Clock className="w-5 h-5 text-purple-600" />
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-slate-400 group-hover:text-indigo-600 transition-colors" />
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<div className="font-semibold text-slate-900">Loeschfristen</div>
|
||||
<div className="text-sm text-slate-500">Retention Matrix anzeigen</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/sdk/einwilligungen"
|
||||
className="bg-white rounded-xl border border-slate-200 p-4 hover:border-indigo-300 hover:shadow-md transition-all group"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="p-2 rounded-lg bg-green-100">
|
||||
<Shield className="w-5 h-5 text-green-600" />
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-slate-400 group-hover:text-indigo-600 transition-colors" />
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<div className="font-semibold text-slate-900">Consent-Tracking</div>
|
||||
<div className="text-sm text-slate-500">Einwilligungen verwalten</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
||||
<div className="bg-white rounded-xl border border-slate-200 p-4">
|
||||
<div className="text-sm text-slate-500">Datenpunkte gesamt</div>
|
||||
<div className="text-2xl font-bold text-slate-900">{totalDataPoints}</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-slate-200 p-4">
|
||||
<div className="text-sm text-slate-500">Ausgewaehlt</div>
|
||||
<div className="text-2xl font-bold text-indigo-600">{selectedIds.length}</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-slate-200 p-4">
|
||||
<div className="text-sm text-slate-500">Benutzerdefiniert</div>
|
||||
<div className="text-2xl font-bold text-purple-600">{customDataPoints}</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-red-200 p-4">
|
||||
<div className="text-sm text-red-600">Hohes Risiko</div>
|
||||
<div className="text-2xl font-bold text-red-600">{highRiskCount}</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-amber-200 p-4">
|
||||
<div className="text-sm text-amber-600">Einwilligung erforderlich</div>
|
||||
<div className="text-2xl font-bold text-amber-600">{consentRequiredCount}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add Custom Data Point Button */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<select
|
||||
value={language}
|
||||
onChange={(e) => setLanguage(e.target.value as SupportedLanguage)}
|
||||
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="de">Deutsch</option>
|
||||
<option value="en">English</option>
|
||||
</select>
|
||||
</div>
|
||||
<button className="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700">
|
||||
<Plus className="w-4 h-4" />
|
||||
Datenpunkt hinzufuegen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Catalog */}
|
||||
<DataPointCatalog
|
||||
dataPoints={allDataPoints}
|
||||
selectedIds={selectedIds}
|
||||
onToggle={handleToggle}
|
||||
onSelectAll={handleSelectAll}
|
||||
onDeselectAll={handleDeselectAll}
|
||||
language={language}
|
||||
showFilters={true}
|
||||
readOnly={false}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// MAIN PAGE
|
||||
// =============================================================================
|
||||
|
||||
export default function CatalogPage() {
|
||||
return (
|
||||
<EinwilligungenProvider>
|
||||
<CatalogContent />
|
||||
</EinwilligungenProvider>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user