feat: Projekt-Verwaltung verbessern — Archivieren, Loeschen, Wiederherstellen

- Backend: Restore-Endpoint (POST /projects/{id}/restore) und
  Hard-Delete-Endpoint (DELETE /projects/{id}/permanent) hinzugefuegt
- Frontend: Dreistufiger Dialog (Archivieren / Endgueltig loeschen mit
  Bestaetigungsdialog) statt einfachem Loeschen
- Archivierte Projekte aufklappbar in der Projektliste mit
  Wiederherstellen-Button
- CustomerTypeSelector entfernt (redundant seit Multi-Projekt)
- Default tenantId von 'default' auf UUID geaendert (Backend-400-Fix)
- SQL-Cast :state::jsonb durch CAST(:state AS jsonb) ersetzt (SQLAlchemy-Fix)
- snake_case/camelCase-Mapping fuer Backend-Response (NaN-Datum-Fix)
- projectInfo wird beim Laden vom Backend geholt (Header zeigt Projektname)
- API-Client erzeugt sich on-demand (Race-Condition-Fix fuer Projektliste)

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

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

@@ -5,6 +5,41 @@ import { useRouter } from 'next/navigation'
 import { useSDK } from '@/lib/sdk'
 import type { ProjectInfo, CustomerType } from '@/lib/sdk/types'
 
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+/** Map snake_case backend response to camelCase ProjectInfo */
+function normalizeProject(p: any): ProjectInfo {
+  return {
+    id: p.id,
+    name: p.name,
+    description: p.description || '',
+    customerType: p.customerType || p.customer_type || 'new',
+    status: p.status || 'active',
+    projectVersion: p.projectVersion ?? p.project_version ?? 1,
+    completionPercentage: p.completionPercentage ?? p.completion_percentage ?? 0,
+    createdAt: p.createdAt || p.created_at || '',
+    updatedAt: p.updatedAt || p.updated_at || '',
+  }
+}
+
+function formatTimeAgo(dateStr: string): string {
+  if (!dateStr) return ''
+  const date = new Date(dateStr)
+  if (isNaN(date.getTime())) return ''
+  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' : ''}`
+}
+
 // =============================================================================
 // CREATE PROJECT DIALOG
 // =============================================================================
@@ -41,7 +76,7 @@ function CreateProjectDialog({ open, onClose, onCreated, existingProjects }: Cre
         customerType,
         copyFromId || undefined
       )
-      onCreated(project)
+      onCreated(normalizeProject(project))
       setName('')
       setCopyFromId('')
       onClose()
@@ -164,73 +199,253 @@ function CreateProjectDialog({ open, onClose, onCreated, existingProjects }: Cre
 }
 
 // =============================================================================
-// PROJECT CARD
+// PROJECT ACTION DIALOG (Archive / Permanent Delete)
 // =============================================================================
 
-function ProjectCard({ project, onClick }: { project: ProjectInfo; onClick: () => void }) {
-  const timeAgo = formatTimeAgo(project.updatedAt)
+type ActionStep = 'choose' | 'confirm-delete'
+
+function ProjectActionDialog({
+  project,
+  onArchive,
+  onPermanentDelete,
+  onCancel,
+  isProcessing,
+}: {
+  project: ProjectInfo
+  onArchive: () => void
+  onPermanentDelete: () => void
+  onCancel: () => void
+  isProcessing: boolean
+}) {
+  const [step, setStep] = useState<ActionStep>('choose')
+
+  if (step === 'confirm-delete') {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onCancel}>
+        <div
+          className="bg-white rounded-2xl shadow-xl w-full max-w-md mx-4 p-6"
+          onClick={e => e.stopPropagation()}
+        >
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
+              <svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              </svg>
+            </div>
+            <h2 className="text-lg font-bold text-red-700">Endgueltig loeschen</h2>
+          </div>
+
+          <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
+            <p className="text-sm text-red-800 font-medium mb-2">
+              Sind Sie sicher, dass Sie <strong>{project.name}</strong> unwiderruflich loeschen moechten?
+            </p>
+            <p className="text-sm text-red-700">
+              Alle Projektdaten, SDK-States und Dokumente werden permanent geloescht. Diese Aktion kann nicht rueckgaengig gemacht werden.
+            </p>
+          </div>
+
+          <div className="flex gap-3">
+            <button
+              onClick={() => setStep('choose')}
+              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"
+            >
+              Zurueck
+            </button>
+            <button
+              onClick={onPermanentDelete}
+              disabled={isProcessing}
+              className="flex-1 px-4 py-2.5 text-sm font-medium text-white bg-red-700 hover:bg-red-800 disabled:bg-red-300 rounded-lg transition-colors"
+            >
+              {isProcessing ? 'Loesche...' : 'Endgueltig loeschen'}
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
 
   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 className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onCancel}>
+      <div
+        className="bg-white rounded-2xl shadow-xl w-full max-w-md mx-4 p-6"
+        onClick={e => e.stopPropagation()}
+      >
+        <div className="flex items-center gap-3 mb-4">
+          <div className="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
+            <svg className="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+            </svg>
           </div>
-          <span className="font-medium text-gray-600">{project.completionPercentage}%</span>
+          <h2 className="text-lg font-bold text-gray-900">Projekt entfernen</h2>
         </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'}
+        <p className="text-gray-600 mb-6">
+          Was moechten Sie mit dem Projekt <strong>{project.name}</strong> tun?
+        </p>
+
+        <div className="space-y-3 mb-6">
+          {/* Archive option */}
+          <button
+            onClick={onArchive}
+            disabled={isProcessing}
+            className="w-full flex items-start gap-4 p-4 rounded-xl border-2 border-gray-200 hover:border-orange-300 hover:bg-orange-50 transition-all text-left disabled:opacity-50"
+          >
+            <div className="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
+              <svg className="w-4 h-4 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                  d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
+              </svg>
+            </div>
+            <div>
+              <div className="font-medium text-gray-900">Archivieren</div>
+              <div className="text-sm text-gray-500">
+                Projekt wird ausgeblendet, Daten bleiben erhalten. Kann jederzeit wiederhergestellt werden.
+              </div>
+            </div>
+          </button>
+
+          {/* Permanent delete option */}
+          <button
+            onClick={() => setStep('confirm-delete')}
+            disabled={isProcessing}
+            className="w-full flex items-start gap-4 p-4 rounded-xl border-2 border-gray-200 hover:border-red-300 hover:bg-red-50 transition-all text-left disabled:opacity-50"
+          >
+            <div className="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
+              <svg className="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              </svg>
+            </div>
+            <div>
+              <div className="font-medium text-red-700">Endgueltig loeschen</div>
+              <div className="text-sm text-gray-500">
+                Alle Daten werden unwiderruflich geloescht. Diese Aktion kann nicht rueckgaengig gemacht werden.
+              </div>
+            </div>
+          </button>
+        </div>
+
+        <button
+          onClick={onCancel}
+          className="w-full 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>
       </div>
-    </button>
+    </div>
   )
 }
 
 // =============================================================================
-// HELPER
+// PROJECT CARD
 // =============================================================================
 
-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' : ''}`
+function ProjectCard({
+  project,
+  onClick,
+  onDelete,
+  onRestore,
+}: {
+  project: ProjectInfo
+  onClick: () => void
+  onDelete?: () => void
+  onRestore?: () => void
+}) {
+  const timeAgo = formatTimeAgo(project.updatedAt)
+  const isArchived = project.status === 'archived'
+
+  return (
+    <div className={`relative bg-white rounded-xl border-2 transition-all ${
+      isArchived
+        ? 'border-gray-200 opacity-75'
+        : 'border-gray-200 hover:border-purple-300 hover:shadow-lg'
+    }`}>
+      {/* Action buttons */}
+      <div className="absolute top-3 right-3 flex items-center gap-1 z-10">
+        {isArchived && onRestore && (
+          <button
+            onClick={e => {
+              e.stopPropagation()
+              onRestore()
+            }}
+            className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors"
+            title="Wiederherstellen"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+          </button>
+        )}
+        {onDelete && (
+          <button
+            onClick={e => {
+              e.stopPropagation()
+              onDelete()
+            }}
+            className="p-1.5 text-gray-300 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+            title="Entfernen"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+            </svg>
+          </button>
+        )}
+      </div>
+
+      {/* Card content */}
+      <button
+        onClick={onClick}
+        className="block w-full text-left p-6"
+      >
+        <div className="flex items-start justify-between mb-3 pr-16">
+          <h3 className={`font-semibold text-lg truncate pr-2 ${isArchived ? 'text-gray-500' : 'text-gray-900'}`}>
+            {project.name}
+          </h3>
+          <span className={`px-2 py-0.5 text-xs rounded-full flex-shrink-0 ${
+            isArchived
+              ? 'bg-gray-100 text-gray-500'
+              : 'bg-green-100 text-green-700'
+          }`}>
+            {isArchived ? 'Archiviert' : 'Aktiv'}
+          </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' : isArchived ? 'bg-gray-400' : 'bg-purple-600'
+                }`}
+                style={{ width: `${project.completionPercentage}%` }}
+              />
+            </div>
+            <span className="font-medium text-gray-600">{project.completionPercentage}%</span>
+          </div>
+          {timeAgo && (
+            <>
+              <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>
+    </div>
+  )
 }
 
 // =============================================================================
@@ -239,10 +454,14 @@ function formatTimeAgo(dateStr: string): string {
 
 export function ProjectSelector() {
   const router = useRouter()
-  const { listProjects } = useSDK()
+  const { listProjects, archiveProject, restoreProject, permanentlyDeleteProject } = useSDK()
   const [projects, setProjects] = useState<ProjectInfo[]>([])
+  const [archivedProjects, setArchivedProjects] = useState<ProjectInfo[]>([])
   const [loading, setLoading] = useState(true)
   const [showCreateDialog, setShowCreateDialog] = useState(false)
+  const [actionTarget, setActionTarget] = useState<ProjectInfo | null>(null)
+  const [isProcessing, setIsProcessing] = useState(false)
+  const [showArchived, setShowArchived] = useState(false)
 
   useEffect(() => {
     loadProjects()
@@ -252,7 +471,9 @@ export function ProjectSelector() {
     setLoading(true)
     try {
       const result = await listProjects()
-      setProjects(result)
+      const all = result.map(normalizeProject)
+      setProjects(all.filter(p => p.status === 'active'))
+      setArchivedProjects(all.filter(p => p.status === 'archived'))
     } catch (error) {
       console.error('Failed to load projects:', error)
     } finally {
@@ -261,6 +482,7 @@ export function ProjectSelector() {
   }
 
   const handleProjectClick = (project: ProjectInfo) => {
+    if (project.status === 'archived') return // archived projects are read-only in list
     router.push(`/sdk?project=${project.id}`)
   }
 
@@ -268,6 +490,47 @@ export function ProjectSelector() {
     router.push(`/sdk?project=${project.id}`)
   }
 
+  const handleArchive = async () => {
+    if (!actionTarget) return
+    setIsProcessing(true)
+    try {
+      await archiveProject(actionTarget.id)
+      // Move from active to archived
+      setProjects(prev => prev.filter(p => p.id !== actionTarget.id))
+      setArchivedProjects(prev => [...prev, { ...actionTarget, status: 'archived' as const }])
+      setActionTarget(null)
+    } catch (error) {
+      console.error('Failed to archive project:', error)
+    } finally {
+      setIsProcessing(false)
+    }
+  }
+
+  const handlePermanentDelete = async () => {
+    if (!actionTarget) return
+    setIsProcessing(true)
+    try {
+      await permanentlyDeleteProject(actionTarget.id)
+      setProjects(prev => prev.filter(p => p.id !== actionTarget.id))
+      setArchivedProjects(prev => prev.filter(p => p.id !== actionTarget.id))
+      setActionTarget(null)
+    } catch (error) {
+      console.error('Failed to delete project:', error)
+    } finally {
+      setIsProcessing(false)
+    }
+  }
+
+  const handleRestore = async (project: ProjectInfo) => {
+    try {
+      await restoreProject(project.id)
+      setArchivedProjects(prev => prev.filter(p => p.id !== project.id))
+      setProjects(prev => [...prev, { ...project, status: 'active' as const }])
+    } catch (error) {
+      console.error('Failed to restore project:', error)
+    }
+  }
+
   return (
     <div className="max-w-4xl mx-auto py-12 px-4">
       {/* Header */}
@@ -297,7 +560,7 @@ export function ProjectSelector() {
       )}
 
       {/* Empty State */}
-      {!loading && projects.length === 0 && (
+      {!loading && projects.length === 0 && archivedProjects.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">
@@ -321,7 +584,7 @@ export function ProjectSelector() {
         </div>
       )}
 
-      {/* Project Grid */}
+      {/* Active Projects */}
       {!loading && projects.length > 0 && (
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           {projects.map(project => (
@@ -329,11 +592,68 @@ export function ProjectSelector() {
               key={project.id}
               project={project}
               onClick={() => handleProjectClick(project)}
+              onDelete={() => setActionTarget(project)}
             />
           ))}
         </div>
       )}
 
+      {/* No active but has archived */}
+      {!loading && projects.length === 0 && archivedProjects.length > 0 && (
+        <div className="text-center py-12 mb-6">
+          <h2 className="text-lg font-semibold text-gray-900">Keine aktiven Projekte</h2>
+          <p className="mt-2 text-gray-500">
+            Sie haben {archivedProjects.length} archivierte{archivedProjects.length === 1 ? 's' : ''} Projekt{archivedProjects.length === 1 ? '' : 'e'}.
+            Stellen Sie ein Projekt wieder her oder erstellen Sie ein neues.
+          </p>
+          <button
+            onClick={() => setShowCreateDialog(true)}
+            className="mt-4 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>
+            Neues Projekt erstellen
+          </button>
+        </div>
+      )}
+
+      {/* Archived Projects Section */}
+      {!loading && archivedProjects.length > 0 && (
+        <div className="mt-8">
+          <button
+            onClick={() => setShowArchived(!showArchived)}
+            className="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-700 transition-colors mb-4"
+          >
+            <svg
+              className={`w-4 h-4 transition-transform ${showArchived ? 'rotate-90' : ''}`}
+              fill="none" stroke="currentColor" viewBox="0 0 24 24"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
+            </svg>
+            Archivierte Projekte ({archivedProjects.length})
+          </button>
+
+          {showArchived && (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {archivedProjects.map(project => (
+                <ProjectCard
+                  key={project.id}
+                  project={project}
+                  onClick={() => handleProjectClick(project)}
+                  onRestore={() => handleRestore(project)}
+                  onDelete={() => setActionTarget(project)}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
       {/* Create Dialog */}
       <CreateProjectDialog
         open={showCreateDialog}
@@ -341,6 +661,17 @@ export function ProjectSelector() {
         onCreated={handleProjectCreated}
         existingProjects={projects}
       />
+
+      {/* Action Dialog (Archive / Delete) */}
+      {actionTarget && (
+        <ProjectActionDialog
+          project={actionTarget}
+          onArchive={handleArchive}
+          onPermanentDelete={handlePermanentDelete}
+          onCancel={() => setActionTarget(null)}
+          isProcessing={isProcessing}
+        />
+      )}
     </div>
   )
 }