refactor(admin): split AIUseCaseModuleEditor, DataPointCatalog, ProjectSelector components

AIUseCaseModuleEditor (698 LOC) → thin orchestrator (187) + constants (29) +
barrel tabs (4) + tabs implementation split into SystemData (261), PurposeAct
(149), RisksReview (219). DataPointCatalog (658 LOC) → main (291) + helpers
(190) + CategoryGroup (124) + Row (108). ProjectSelector (656 LOC) → main
(211) + CreateProjectDialog (169) + ProjectActionDialog (140) + ProjectCard
(128). All files now under 300 LOC soft target and 500 LOC hard cap.

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

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

@@ -0,0 +1,128 @@
+'use client'
+
+import React from 'react'
+import type { ProjectInfo } from '@/lib/sdk/types'
+
+export 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' : ''}`
+}
+
+interface ProjectCardProps {
+  project: ProjectInfo
+  onClick: () => void
+  onDelete?: () => void
+  onRestore?: () => void
+}
+
+export function ProjectCard({
+  project,
+  onClick,
+  onDelete,
+  onRestore,
+}: ProjectCardProps) {
+  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>
+  )
+}