feat(cmp): unified consent view — Website-Besucher + Login-Nutzer tabs

Merges two separate consent views into one unified page at /sdk/einwilligungen:
- Tab "Website-Besucher": device-based banner consents with site selector
- Tab "Login-Nutzer": user-based DSGVO consents (existing, unchanged)

Backend:
- New endpoint GET /admin/consents for paginated banner consent records
- Fix: categories JSON string parsing (was iterating chars instead of array)

CMP Dashboard:
- Dynamic site selector replacing hardcoded "preview-test-site"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-05-10 22:41:56 +02:00
parent 9c0d471277
commit bdbc30e47b
7 changed files with 478 additions and 52 deletions
+39 -10
View File
@@ -54,27 +54,41 @@ export default function CMPDashboardPage() {
const [consentStats, setConsentStats] = useState<ConsentStats | null>(null)
const [dsrStats, setDSRStats] = useState<DSRStats | null>(null)
const [sites, setSites] = useState<any[]>([])
const [selectedSite, setSelectedSite] = useState<string>('')
const [loading, setLoading] = useState(true)
const fb = (path: string) => fetch(`${BANNER_API}/${path}`, { headers: HEADERS }).then(r => r.ok ? r.json() : null).catch(() => null)
// Load sites + consent/dsr stats on mount
useEffect(() => {
async function load() {
const fb = (path: string) => fetch(`${BANNER_API}/${path}`, { headers: HEADERS }).then(r => r.ok ? r.json() : null).catch(() => null)
const fa = (path: string) => fetch(`/api/sdk/v1/compliance/${path}`, { headers: HEADERS }).then(r => r.ok ? r.json() : null).catch(() => null)
const [banner, consent, dsr, siteList] = await Promise.all([
fb('admin/stats/preview-test-site'),
const [consent, dsr, siteList] = await Promise.all([
fa('einwilligungen/consents/stats'),
fa('dsr/stats'),
fb('admin/sites'),
])
setBannerStats(banner)
setConsentStats(consent)
setDSRStats(dsr)
setSites(siteList || [])
const loadedSites = Array.isArray(siteList) ? siteList : []
setSites(loadedSites)
// Auto-select first site
if (loadedSites.length > 0) {
setSelectedSite(loadedSites[0].site_id || loadedSites[0].siteId || '')
}
setLoading(false)
}
load()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
// Load banner stats when selected site changes
useEffect(() => {
if (!selectedSite) return
fb(`admin/stats/${selectedSite}`).then(setBannerStats)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedSite])
const totalConsents = (bannerStats?.total_consents || 0) + (consentStats?.total_consents || 0)
const dsrOpen = dsrStats ? (dsrStats.by_status?.intake || 0) + (dsrStats.by_status?.processing || 0) + (dsrStats.by_status?.identity_verification || 0) : 0
const dsrOverdue = dsrStats?.overdue || 0
@@ -86,12 +100,27 @@ export default function CMPDashboardPage() {
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-gray-900">Consent Management Platform</h1>
<p className="text-gray-500 mt-1">Ueberblick ueber Einwilligungen, Betroffenenrechte und Vendor-Compliance</p>
<p className="text-gray-500 mt-1">Überblick über Einwilligungen, Betroffenenrechte und Vendor-Compliance</p>
</div>
<div className="flex items-center gap-3">
{sites.length > 0 && (
<select
value={selectedSite}
onChange={e => setSelectedSite(e.target.value)}
className="px-3 py-2 border border-gray-300 rounded-lg text-sm bg-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
>
{sites.map((s: any) => (
<option key={s.site_id || s.siteId} value={s.site_id || s.siteId}>
{s.site_name || s.siteName || s.site_id || s.siteId}
</option>
))}
</select>
)}
<Link href="/sdk/cookie-banner/preview"
className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm font-medium hover:bg-purple-700 transition-colors">
Banner testen
</Link>
</div>
<Link href="/sdk/cookie-banner/preview"
className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm font-medium hover:bg-purple-700 transition-colors">
Banner testen
</Link>
</div>
{/* KPI Cards */}