feat: Cookie-Banner Verarbeiter-Tabelle + Multi-Site UI (F9 + F3)

F9: Verarbeiter-Tabelle - VendorTable.tsx: 82+ vendors grouped by category with expandable cookie details - EmbeddableVendorHTML.tsx: Copy-pasteable HTML table for privacy policy - Tab system: Konfiguration | Verarbeiter | Einbettung F3: Multi-Site UI - SiteSelector.tsx: Domain dropdown with "Neue Seite anlegen" dialog - useCookieBanner hook extended with sites management - Config/vendors reload per selected site Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-05-03 20:40:18 +02:00
parent 4c92b17617
commit 36d9f929c6
5 changed files with 395 additions and 2 deletions
@@ -0,0 +1,103 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+
+interface Vendor {
+  vendor_name: string
+  vendor_url: string | null
+  category_key: string
+  description_de: string | null
+  cookie_names: string[]
+  retention_days: number | null
+}
+
+const CAT_LABELS: Record<string, string> = {
+  necessary: 'Notwendig',
+  functional: 'Funktional',
+  statistics: 'Statistik',
+  marketing: 'Marketing',
+}
+
+function generateHTML(vendors: Vendor[]): string {
+  const grouped = vendors.reduce<Record<string, Vendor[]>>((acc, v) => {
+    const key = v.category_key || 'other'
+    if (!acc[key]) acc[key] = []
+    acc[key].push(v)
+    return acc
+  }, {})
+
+  let html = `<div style="font-family:system-ui,sans-serif;font-size:14px;color:#1f2937;">\n`
+  html += `<h3 style="margin:0 0 12px;font-size:16px;">Eingesetzte Dienste und Cookies</h3>\n`
+
+  for (const [catKey, catVendors] of Object.entries(grouped)) {
+    const label = CAT_LABELS[catKey] || catKey
+    html += `<h4 style="margin:16px 0 8px;font-size:14px;color:#6b21a8;">${label}</h4>\n`
+    html += `<table style="width:100%;border-collapse:collapse;margin-bottom:12px;font-size:13px;">\n`
+    html += `<tr style="background:#f9fafb;"><th style="text-align:left;padding:6px 8px;border:1px solid #e5e7eb;">Anbieter</th><th style="text-align:left;padding:6px 8px;border:1px solid #e5e7eb;">Zweck</th><th style="text-align:left;padding:6px 8px;border:1px solid #e5e7eb;">Cookies</th><th style="text-align:left;padding:6px 8px;border:1px solid #e5e7eb;">Speicherdauer</th></tr>\n`
+
+    for (const v of catVendors) {
+      const name = v.vendor_url
+        ? `<a href="${v.vendor_url}" target="_blank" rel="noopener">${v.vendor_name}</a>`
+        : v.vendor_name
+      const cookies = v.cookie_names?.join(', ') || '-'
+      const retention = v.retention_days ? `${v.retention_days} Tage` : '-'
+      html += `<tr><td style="padding:6px 8px;border:1px solid #e5e7eb;">${name}</td><td style="padding:6px 8px;border:1px solid #e5e7eb;">${v.description_de || '-'}</td><td style="padding:6px 8px;border:1px solid #e5e7eb;font-family:monospace;font-size:11px;">${cookies}</td><td style="padding:6px 8px;border:1px solid #e5e7eb;">${retention}</td></tr>\n`
+    }
+    html += `</table>\n`
+  }
+  html += `</div>`
+  return html
+}
+
+export function EmbeddableVendorHTML({ siteId }: { siteId?: string }) {
+  const [vendors, setVendors] = useState<Vendor[]>([])
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    const sid = siteId || 'preview-test-site'
+    fetch(`/api/sdk/v1/banner/admin/sites/${sid}/vendors`)
+      .then(r => r.ok ? r.json() : [])
+      .then(data => setVendors(Array.isArray(data) ? data : []))
+      .catch(() => {})
+  }, [siteId])
+
+  const html = generateHTML(vendors)
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(html)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="font-semibold text-gray-900">Einbettbarer HTML-Code</h3>
+          <p className="text-xs text-gray-500 mt-1">
+            Kopieren Sie diesen Code in Ihre Datenschutzerklaerung oder Cookie-Richtlinie.
+          </p>
+        </div>
+        <button onClick={handleCopy}
+          className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
+          {copied ? 'Kopiert!' : 'HTML kopieren'}
+        </button>
+      </div>
+
+      {/* Preview */}
+      <div className="border border-gray-200 rounded-lg p-4 bg-white">
+        <div dangerouslySetInnerHTML={{ __html: html }} />
+      </div>
+
+      {/* Raw HTML */}
+      <details className="group">
+        <summary className="text-xs text-gray-500 cursor-pointer hover:text-gray-700">
+          Quellcode anzeigen
+        </summary>
+        <pre className="mt-2 p-3 bg-gray-50 border border-gray-200 rounded-lg text-xs text-gray-700 overflow-x-auto max-h-[300px] overflow-y-auto">
+          {html}
+        </pre>
+      </details>
+    </div>
+  )
+}