feat(sdk): Multi-Projekt-Architektur — mehrere Projekte pro Tenant

Jeder Tenant kann jetzt mehrere Compliance-Projekte anlegen (z.B. verschiedene
Produkte, Tochterunternehmen). CompanyProfile ist pro Projekt kopierbar und
danach unabhaengig editierbar. Multi-Tab-Support via separater BroadcastChannel
und localStorage Keys pro Projekt.

- Migration 039: compliance_projects Tabelle, sdk_states.project_id
- Backend: FastAPI CRUD-Routes fuer Projekte mit Tenant-Isolation
- Frontend: ProjectSelector UI, SDKProvider mit projectId, URL ?project=
- State API: UPSERT auf (tenant_id, project_id) mit Abwaertskompatibilitaet
- Tests: pytest fuer Model-Validierung, Row-Konvertierung, Tenant-Isolation
- Docs: MKDocs Seite, CLAUDE.md, Backend README

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

admin-compliance/components/sdk/ProjectSelector/ProjectSelector.tsx

@@ -0,0 +1,346 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { useSDK } from '@/lib/sdk'
+import type { ProjectInfo, CustomerType } from '@/lib/sdk/types'
+
+// =============================================================================
+// CREATE PROJECT DIALOG
+// =============================================================================
+
+interface CreateProjectDialogProps {
+  open: boolean
+  onClose: () => void
+  onCreated: (project: ProjectInfo) => void
+  existingProjects: ProjectInfo[]
+}
+
+function CreateProjectDialog({ open, onClose, onCreated, existingProjects }: CreateProjectDialogProps) {
+  const { createProject } = useSDK()
+  const [name, setName] = useState('')
+  const [customerType, setCustomerType] = useState<CustomerType>('new')
+  const [copyFromId, setCopyFromId] = useState<string>('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState('')
+
+  if (!open) return null
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!name.trim()) {
+      setError('Projektname ist erforderlich')
+      return
+    }
+
+    setIsSubmitting(true)
+    setError('')
+    try {
+      const project = await createProject(
+        name.trim(),
+        customerType,
+        copyFromId || undefined
+      )
+      onCreated(project)
+      setName('')
+      setCopyFromId('')
+      onClose()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Fehler beim Erstellen des Projekts')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
+      <div
+        className="bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4 p-6"
+        onClick={e => e.stopPropagation()}
+      >
+        <h2 className="text-xl font-bold text-gray-900 mb-6">Neues Projekt erstellen</h2>
+
+        <form onSubmit={handleSubmit} className="space-y-5">
+          {/* Project Name */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Projektname *
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={e => setName(e.target.value)}
+              placeholder="z.B. KI-Produkt X, SaaS API, Tochter GmbH..."
+              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none"
+              autoFocus
+            />
+          </div>
+
+          {/* Customer Type */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Projekttyp
+            </label>
+            <div className="grid grid-cols-2 gap-3">
+              <button
+                type="button"
+                onClick={() => setCustomerType('new')}
+                className={`p-3 rounded-lg border-2 text-left transition-all ${
+                  customerType === 'new'
+                    ? 'border-purple-500 bg-purple-50'
+                    : 'border-gray-200 hover:border-gray-300'
+                }`}
+              >
+                <div className="font-medium text-sm text-gray-900">Neukunde</div>
+                <div className="text-xs text-gray-500 mt-0.5">Compliance von Grund auf</div>
+              </button>
+              <button
+                type="button"
+                onClick={() => setCustomerType('existing')}
+                className={`p-3 rounded-lg border-2 text-left transition-all ${
+                  customerType === 'existing'
+                    ? 'border-purple-500 bg-purple-50'
+                    : 'border-gray-200 hover:border-gray-300'
+                }`}
+              >
+                <div className="font-medium text-sm text-gray-900">Bestandskunde</div>
+                <div className="text-xs text-gray-500 mt-0.5">Bestehende Dokumente erweitern</div>
+              </button>
+            </div>
+          </div>
+
+          {/* Copy from existing project */}
+          {existingProjects.length > 0 && (
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Stammdaten kopieren von (optional)
+              </label>
+              <select
+                value={copyFromId}
+                onChange={e => setCopyFromId(e.target.value)}
+                className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none bg-white"
+              >
+                <option value="">— Keine Kopie (leeres Projekt) —</option>
+                {existingProjects.map(p => (
+                  <option key={p.id} value={p.id}>
+                    {p.name} (V{String(p.projectVersion).padStart(3, '0')})
+                  </option>
+                ))}
+              </select>
+              <p className="mt-1 text-xs text-gray-500">
+                Firmenprofil wird kopiert und kann dann unabhaengig bearbeitet werden.
+              </p>
+            </div>
+          )}
+
+          {/* Error */}
+          {error && (
+            <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
+              {error}
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex gap-3 pt-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex-1 px-4 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
+            >
+              Abbrechen
+            </button>
+            <button
+              type="submit"
+              disabled={isSubmitting || !name.trim()}
+              className="flex-1 px-4 py-2.5 text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 disabled:bg-purple-300 rounded-lg transition-colors"
+            >
+              {isSubmitting ? 'Erstelle...' : 'Projekt erstellen'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+// =============================================================================
+// PROJECT CARD
+// =============================================================================
+
+function ProjectCard({ project, onClick }: { project: ProjectInfo; onClick: () => void }) {
+  const timeAgo = formatTimeAgo(project.updatedAt)
+
+  return (
+    <button
+      onClick={onClick}
+      className="block w-full text-left bg-white rounded-xl border-2 border-gray-200 hover:border-purple-300 hover:shadow-lg p-6 transition-all"
+    >
+      <div className="flex items-start justify-between mb-3">
+        <h3 className="font-semibold text-gray-900 text-lg truncate pr-2">{project.name}</h3>
+        <span className={`px-2 py-0.5 text-xs rounded-full flex-shrink-0 ${
+          project.status === 'active'
+            ? 'bg-green-100 text-green-700'
+            : 'bg-gray-100 text-gray-500'
+        }`}>
+          {project.status === 'active' ? 'Aktiv' : 'Archiviert'}
+        </span>
+      </div>
+
+      {project.description && (
+        <p className="text-sm text-gray-500 mb-3 line-clamp-2">{project.description}</p>
+      )}
+
+      <div className="flex items-center gap-4 text-sm text-gray-500">
+        <span className="font-mono">V{String(project.projectVersion).padStart(3, '0')}</span>
+        <span className="text-gray-300">|</span>
+        <div className="flex items-center gap-2 flex-1">
+          <div className="flex-1 h-1.5 bg-gray-100 rounded-full overflow-hidden">
+            <div
+              className={`h-full rounded-full transition-all ${
+                project.completionPercentage === 100 ? 'bg-green-500' : 'bg-purple-600'
+              }`}
+              style={{ width: `${project.completionPercentage}%` }}
+            />
+          </div>
+          <span className="font-medium text-gray-600">{project.completionPercentage}%</span>
+        </div>
+        <span className="text-gray-300">|</span>
+        <span>{timeAgo}</span>
+      </div>
+
+      <div className="mt-2 text-xs text-gray-400">
+        {project.customerType === 'new' ? 'Neukunde' : 'Bestandskunde'}
+      </div>
+    </button>
+  )
+}
+
+// =============================================================================
+// HELPER
+// =============================================================================
+
+function formatTimeAgo(dateStr: string): string {
+  const date = new Date(dateStr)
+  const now = Date.now()
+  const diff = now - date.getTime()
+  const seconds = Math.floor(diff / 1000)
+  if (seconds < 60) return 'Gerade eben'
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `vor ${minutes} Min`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `vor ${hours} Std`
+  const days = Math.floor(hours / 24)
+  return `vor ${days} Tag${days > 1 ? 'en' : ''}`
+}
+
+// =============================================================================
+// MAIN COMPONENT
+// =============================================================================
+
+export function ProjectSelector() {
+  const router = useRouter()
+  const { listProjects } = useSDK()
+  const [projects, setProjects] = useState<ProjectInfo[]>([])
+  const [loading, setLoading] = useState(true)
+  const [showCreateDialog, setShowCreateDialog] = useState(false)
+
+  useEffect(() => {
+    loadProjects()
+  }, [])
+
+  const loadProjects = async () => {
+    setLoading(true)
+    try {
+      const result = await listProjects()
+      setProjects(result)
+    } catch (error) {
+      console.error('Failed to load projects:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleProjectClick = (project: ProjectInfo) => {
+    router.push(`/sdk?project=${project.id}`)
+  }
+
+  const handleProjectCreated = (project: ProjectInfo) => {
+    router.push(`/sdk?project=${project.id}`)
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto py-12 px-4">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Ihre Projekte</h1>
+          <p className="mt-1 text-gray-500">
+            Waehlen Sie ein Compliance-Projekt oder erstellen Sie ein neues.
+          </p>
+        </div>
+        <button
+          onClick={() => setShowCreateDialog(true)}
+          className="flex items-center gap-2 px-4 py-2.5 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-medium text-sm"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+          </svg>
+          Neues Projekt
+        </button>
+      </div>
+
+      {/* Loading */}
+      {loading && (
+        <div className="flex items-center justify-center py-16">
+          <div className="w-8 h-8 border-4 border-purple-200 border-t-purple-600 rounded-full animate-spin" />
+        </div>
+      )}
+
+      {/* Empty State */}
+      {!loading && projects.length === 0 && (
+        <div className="text-center py-16">
+          <div className="w-16 h-16 mx-auto mb-4 bg-purple-100 rounded-2xl flex items-center justify-center">
+            <svg className="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+            </svg>
+          </div>
+          <h2 className="text-lg font-semibold text-gray-900">Noch keine Projekte</h2>
+          <p className="mt-2 text-gray-500 max-w-md mx-auto">
+            Erstellen Sie Ihr erstes Compliance-Projekt, um mit der DSGVO- und AI-Act-Konformitaet zu beginnen.
+          </p>
+          <button
+            onClick={() => setShowCreateDialog(true)}
+            className="mt-6 inline-flex items-center gap-2 px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-medium"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+            </svg>
+            Erstes Projekt erstellen
+          </button>
+        </div>
+      )}
+
+      {/* Project Grid */}
+      {!loading && projects.length > 0 && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {projects.map(project => (
+            <ProjectCard
+              key={project.id}
+              project={project}
+              onClick={() => handleProjectClick(project)}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Create Dialog */}
+      <CreateProjectDialog
+        open={showCreateDialog}
+        onClose={() => setShowCreateDialog(false)}
+        onCreated={handleProjectCreated}
+        existingProjects={projects}
+      />
+    </div>
+  )
+}