Initial commit: breakpilot-compliance - Compliance SDK Platform

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>

breakpilot-compliance-sdk/apps/admin-dashboard/src/app/dsgvo/consent/page.tsx

@@ -0,0 +1,209 @@
+'use client';
+
+import { useState } from 'react';
+import { useDSGVO } from '@breakpilot/compliance-sdk-react';
+import Link from 'next/link';
+import {
+  ArrowLeft,
+  ClipboardCheck,
+  Plus,
+  Search,
+  Filter,
+  MoreVertical,
+  CheckCircle,
+  XCircle,
+  Clock,
+} from 'lucide-react';
+
+export default function ConsentManagementPage() {
+  const { consents, grantConsent, revokeConsent, isLoading } = useDSGVO();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filterPurpose, setFilterPurpose] = useState<string>('all');
+
+  const purposes = [
+    { id: 'analytics', name: 'Analytics', description: 'Website usage tracking' },
+    { id: 'marketing', name: 'Marketing', description: 'Marketing communications' },
+    { id: 'functional', name: 'Functional', description: 'Enhanced features' },
+    { id: 'necessary', name: 'Necessary', description: 'Essential cookies' },
+  ];
+
+  const filteredConsents = consents?.filter((consent) => {
+    const matchesSearch =
+      consent.userId.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      consent.purpose.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesPurpose =
+      filterPurpose === 'all' || consent.purpose === filterPurpose;
+    return matchesSearch && matchesPurpose;
+  });
+
+  const stats = {
+    total: consents?.length ?? 0,
+    granted: consents?.filter((c) => c.granted).length ?? 0,
+    revoked: consents?.filter((c) => !c.granted).length ?? 0,
+    pending: consents?.filter((c) => c.granted === null).length ?? 0,
+  };
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="border-b bg-card">
+        <div className="container mx-auto px-6 py-4">
+          <div className="flex items-center gap-4">
+            <Link
+              href="/dsgvo"
+              className="p-2 hover:bg-muted rounded-lg transition-colors"
+            >
+              <ArrowLeft className="h-5 w-5" />
+            </Link>
+            <div className="flex items-center gap-3">
+              <div className="p-2 rounded-lg bg-blue-500/10">
+                <ClipboardCheck className="h-6 w-6 text-blue-500" />
+              </div>
+              <div>
+                <h1 className="text-xl font-semibold">Einwilligungen</h1>
+                <p className="text-sm text-muted-foreground">
+                  Art. 6, 7 DSGVO - Consent Management
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main className="container mx-auto px-6 py-8">
+        {/* Stats */}
+        <div className="grid grid-cols-4 gap-4 mb-8">
+          <div className="bg-card border rounded-lg p-4">
+            <div className="text-2xl font-bold">{stats.total}</div>
+            <div className="text-sm text-muted-foreground">Total</div>
+          </div>
+          <div className="bg-card border rounded-lg p-4">
+            <div className="text-2xl font-bold text-green-500">
+              {stats.granted}
+            </div>
+            <div className="text-sm text-muted-foreground">Granted</div>
+          </div>
+          <div className="bg-card border rounded-lg p-4">
+            <div className="text-2xl font-bold text-red-500">
+              {stats.revoked}
+            </div>
+            <div className="text-sm text-muted-foreground">Revoked</div>
+          </div>
+          <div className="bg-card border rounded-lg p-4">
+            <div className="text-2xl font-bold text-yellow-500">
+              {stats.pending}
+            </div>
+            <div className="text-sm text-muted-foreground">Pending</div>
+          </div>
+        </div>
+
+        {/* Filters */}
+        <div className="flex items-center gap-4 mb-6">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <input
+              type="text"
+              placeholder="Search by user or purpose..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-10 pr-4 py-2 border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary"
+            />
+          </div>
+          <select
+            value={filterPurpose}
+            onChange={(e) => setFilterPurpose(e.target.value)}
+            className="px-4 py-2 border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary"
+          >
+            <option value="all">All Purposes</option>
+            {purposes.map((p) => (
+              <option key={p.id} value={p.id}>
+                {p.name}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* Consent List */}
+        <div className="bg-card border rounded-xl overflow-hidden">
+          <table className="w-full">
+            <thead className="bg-muted/50 border-b">
+              <tr>
+                <th className="text-left px-6 py-3 text-sm font-medium">
+                  User ID
+                </th>
+                <th className="text-left px-6 py-3 text-sm font-medium">
+                  Purpose
+                </th>
+                <th className="text-left px-6 py-3 text-sm font-medium">
+                  Status
+                </th>
+                <th className="text-left px-6 py-3 text-sm font-medium">
+                  Source
+                </th>
+                <th className="text-left px-6 py-3 text-sm font-medium">
+                  Created
+                </th>
+                <th className="text-right px-6 py-3 text-sm font-medium">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              {filteredConsents?.map((consent) => (
+                <tr key={consent.id} className="hover:bg-muted/30">
+                  <td className="px-6 py-4">
+                    <span className="font-mono text-sm">{consent.userId}</span>
+                  </td>
+                  <td className="px-6 py-4">
+                    <span className="capitalize">{consent.purpose}</span>
+                  </td>
+                  <td className="px-6 py-4">
+                    {consent.granted ? (
+                      <span className="inline-flex items-center gap-1 text-green-500">
+                        <CheckCircle className="h-4 w-4" />
+                        Granted
+                      </span>
+                    ) : consent.granted === false ? (
+                      <span className="inline-flex items-center gap-1 text-red-500">
+                        <XCircle className="h-4 w-4" />
+                        Revoked
+                      </span>
+                    ) : (
+                      <span className="inline-flex items-center gap-1 text-yellow-500">
+                        <Clock className="h-4 w-4" />
+                        Pending
+                      </span>
+                    )}
+                  </td>
+                  <td className="px-6 py-4 text-sm text-muted-foreground">
+                    {consent.source || 'Website'}
+                  </td>
+                  <td className="px-6 py-4 text-sm text-muted-foreground">
+                    {consent.createdAt
+                      ? new Date(consent.createdAt).toLocaleDateString('de-DE')
+                      : '-'}
+                  </td>
+                  <td className="px-6 py-4 text-right">
+                    <button className="p-2 hover:bg-muted rounded-lg">
+                      <MoreVertical className="h-4 w-4" />
+                    </button>
+                  </td>
+                </tr>
+              ))}
+              {(!filteredConsents || filteredConsents.length === 0) && (
+                <tr>
+                  <td
+                    colSpan={6}
+                    className="px-6 py-12 text-center text-muted-foreground"
+                  >
+                    No consents found
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </main>
+    </div>
+  );
+}

breakpilot-compliance-sdk/apps/admin-dashboard/src/app/dsgvo/page.tsx

@@ -0,0 +1,188 @@
+'use client';
+
+import { useDSGVO } from '@breakpilot/compliance-sdk-react';
+import Link from 'next/link';
+import {
+  Shield,
+  Users,
+  FileCheck,
+  FileText,
+  Lock,
+  Trash2,
+  ClipboardCheck,
+  AlertCircle,
+  ArrowRight,
+  ArrowLeft,
+} from 'lucide-react';
+
+export default function DSGVOPage() {
+  const { consents, dsrRequests, vvtActivities, toms, isLoading } = useDSGVO();
+
+  const modules = [
+    {
+      id: 'consent',
+      title: 'Einwilligungen',
+      description: 'Consent-Tracking Multi-Channel',
+      icon: ClipboardCheck,
+      href: '/dsgvo/consent',
+      articles: 'Art. 6, 7',
+      count: consents?.length ?? 0,
+      color: 'bg-blue-500',
+    },
+    {
+      id: 'dsr',
+      title: 'Betroffenenrechte (DSR)',
+      description: 'Auskunft, Loeschung, Berichtigung',
+      icon: Users,
+      href: '/dsgvo/dsr',
+      articles: 'Art. 15-21',
+      count: dsrRequests?.length ?? 0,
+      color: 'bg-green-500',
+    },
+    {
+      id: 'vvt',
+      title: 'Verarbeitungsverzeichnis',
+      description: 'Dokumentation aller Verarbeitungstaetigkeiten',
+      icon: FileText,
+      href: '/dsgvo/vvt',
+      articles: 'Art. 30',
+      count: vvtActivities?.length ?? 0,
+      color: 'bg-purple-500',
+    },
+    {
+      id: 'dsfa',
+      title: 'Datenschutz-Folgenabschaetzung',
+      description: 'Risk Assessment fuer Verarbeitungen',
+      icon: AlertCircle,
+      href: '/dsgvo/dsfa',
+      articles: 'Art. 35, 36',
+      count: 0,
+      color: 'bg-yellow-500',
+    },
+    {
+      id: 'tom',
+      title: 'TOM',
+      description: 'Technische & Organisatorische Massnahmen',
+      icon: Lock,
+      href: '/dsgvo/tom',
+      articles: 'Art. 32',
+      count: toms?.length ?? 0,
+      color: 'bg-red-500',
+    },
+    {
+      id: 'retention',
+      title: 'Loeschfristen',
+      description: 'Retention Policies & Automations',
+      icon: Trash2,
+      href: '/dsgvo/retention',
+      articles: 'Art. 5, 17',
+      count: 0,
+      color: 'bg-orange-500',
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="border-b bg-card">
+        <div className="container mx-auto px-6 py-4">
+          <div className="flex items-center gap-4">
+            <Link
+              href="/"
+              className="p-2 hover:bg-muted rounded-lg transition-colors"
+            >
+              <ArrowLeft className="h-5 w-5" />
+            </Link>
+            <div className="flex items-center gap-3">
+              <div className="p-2 rounded-lg bg-blue-500/10">
+                <Shield className="h-6 w-6 text-blue-500" />
+              </div>
+              <div>
+                <h1 className="text-xl font-semibold">DSGVO Modul</h1>
+                <p className="text-sm text-muted-foreground">
+                  Datenschutz-Grundverordnung Compliance
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main className="container mx-auto px-6 py-8">
+        {/* Progress Overview */}
+        <div className="bg-card border rounded-xl p-6 mb-8">
+          <h2 className="text-lg font-medium mb-4">DSGVO Compliance Status</h2>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+            <div className="text-center">
+              <div className="text-3xl font-bold text-blue-500">
+                {consents?.length ?? 0}
+              </div>
+              <div className="text-sm text-muted-foreground">
+                Active Consents
+              </div>
+            </div>
+            <div className="text-center">
+              <div className="text-3xl font-bold text-green-500">
+                {dsrRequests?.filter((r) => r.status === 'PENDING').length ?? 0}
+              </div>
+              <div className="text-sm text-muted-foreground">Pending DSRs</div>
+            </div>
+            <div className="text-center">
+              <div className="text-3xl font-bold text-purple-500">
+                {vvtActivities?.length ?? 0}
+              </div>
+              <div className="text-sm text-muted-foreground">
+                Processing Activities
+              </div>
+            </div>
+            <div className="text-center">
+              <div className="text-3xl font-bold text-red-500">
+                {toms?.filter((t) => t.implementationStatus === 'IMPLEMENTED').length ??
+                  0}
+              </div>
+              <div className="text-sm text-muted-foreground">
+                Implemented TOMs
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Module Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {modules.map((module) => {
+            const Icon = module.icon;
+            return (
+              <Link
+                key={module.id}
+                href={module.href}
+                className="group bg-card border rounded-xl p-6 hover:shadow-lg transition-all duration-200 hover:border-primary/50"
+              >
+                <div className="flex items-start justify-between mb-4">
+                  <div className={`p-3 rounded-lg ${module.color}/10`}>
+                    <Icon className={`h-6 w-6 ${module.color.replace('bg-', 'text-')}`} />
+                  </div>
+                  <span className="text-xs font-mono text-muted-foreground bg-muted px-2 py-1 rounded">
+                    {module.articles}
+                  </span>
+                </div>
+                <h3 className="text-lg font-semibold mb-1">{module.title}</h3>
+                <p className="text-sm text-muted-foreground mb-4">
+                  {module.description}
+                </p>
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-muted-foreground">
+                    <span className="font-medium text-foreground">
+                      {module.count}
+                    </span>{' '}
+                    Eintraege
+                  </span>
+                  <ArrowRight className="h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors" />
+                </div>
+              </Link>
+            );
+          })}
+        </div>
+      </main>
+    </div>
+  );
+}