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/einwilligungen/DataPointCatalog.tsx

@@ -9,36 +9,7 @@
  */
 
 import { useState, useMemo } from 'react'
-import {
-  Search,
-  Filter,
-  CheckCircle,
-  Circle,
-  Shield,
-  AlertTriangle,
-  ChevronDown,
-  ChevronRight,
-  Key,
-  Megaphone,
-  MessageSquare,
-  CreditCard,
-  Users,
-  Bot,
-  Lock,
-  User,
-  Mail,
-  Activity,
-  MapPin,
-  Smartphone,
-  BarChart3,
-  Share2,
-  Heart,
-  Briefcase,
-  FileText,
-  FileCode,
-  Info,
-  X,
-} from 'lucide-react'
+import { Search } from 'lucide-react'
 import {
   DataPoint,
   DataPointCategory,
@@ -48,12 +19,10 @@ import {
   CATEGORY_METADATA,
   RISK_LEVEL_STYLING,
   LEGAL_BASIS_INFO,
-  RETENTION_PERIOD_INFO,
-  ARTICLE_9_WARNING,
-  EMPLOYEE_DATA_WARNING,
-  AI_DATA_WARNING,
 } from '@/lib/sdk/einwilligungen/types'
 import { searchDataPoints } from '@/lib/sdk/einwilligungen/catalog/loader'
+import { SpecialCategoryWarning } from './DataPointCatalogHelpers'
+import { DataPointCategoryGroup } from './DataPointCategoryGroup'
 
 // =============================================================================
 // TYPES
@@ -71,149 +40,29 @@ interface DataPointCatalogProps {
 }
 
 // =============================================================================
-// HELPER COMPONENTS
+// CATEGORY ORDER
 // =============================================================================
 
-const CategoryIcon: React.FC<{ category: DataPointCategory; className?: string }> = ({
-  category,
-  className = 'w-5 h-5',
-}) => {
-  const icons: Record<DataPointCategory, React.ReactNode> = {
-    // 18 Kategorien (A-R)
-    MASTER_DATA: <User className={className} />,
-    CONTACT_DATA: <Mail className={className} />,
-    AUTHENTICATION: <Key className={className} />,
-    CONSENT: <CheckCircle className={className} />,
-    COMMUNICATION: <MessageSquare className={className} />,
-    PAYMENT: <CreditCard className={className} />,
-    USAGE_DATA: <Activity className={className} />,
-    LOCATION: <MapPin className={className} />,
-    DEVICE_DATA: <Smartphone className={className} />,
-    MARKETING: <Megaphone className={className} />,
-    ANALYTICS: <BarChart3 className={className} />,
-    SOCIAL_MEDIA: <Share2 className={className} />,
-    HEALTH_DATA: <Heart className={className} />,
-    EMPLOYEE_DATA: <Briefcase className={className} />,
-    CONTRACT_DATA: <FileText className={className} />,
-    LOG_DATA: <FileCode className={className} />,
-    AI_DATA: <Bot className={className} />,
-    SECURITY: <Shield className={className} />,
-  }
-  return <>{icons[category] || <Circle className={className} />}</>
-}
-
-const RiskBadge: React.FC<{ level: RiskLevel; language: SupportedLanguage }> = ({
-  level,
-  language,
-}) => {
-  const styling = RISK_LEVEL_STYLING[level]
-  return (
-    <span
-      className={`px-2 py-0.5 text-xs font-medium rounded-full ${styling.bgColor} ${styling.color}`}
-    >
-      {styling.label[language]}
-    </span>
-  )
-}
-
-const LegalBasisBadge: React.FC<{ basis: LegalBasis; language: SupportedLanguage }> = ({
-  basis,
-  language,
-}) => {
-  const info = LEGAL_BASIS_INFO[basis]
-  const colors: Record<LegalBasis, string> = {
-    CONTRACT: 'bg-blue-100 text-blue-700',
-    CONSENT: 'bg-purple-100 text-purple-700',
-    EXPLICIT_CONSENT: 'bg-rose-100 text-rose-700',
-    LEGITIMATE_INTEREST: 'bg-amber-100 text-amber-700',
-    LEGAL_OBLIGATION: 'bg-slate-100 text-slate-700',
-    VITAL_INTERESTS: 'bg-emerald-100 text-emerald-700',
-    PUBLIC_INTEREST: 'bg-cyan-100 text-cyan-700',
-  }
-  return (
-    <span className={`px-2 py-0.5 text-xs font-medium rounded-full ${colors[basis] || 'bg-gray-100 text-gray-700'}`}>
-      {info?.name[language] || basis}
-    </span>
-  )
-}
-
-/**
- * Warnung fuer besondere Kategorien (Art. 9 DSGVO, BDSG § 26, AI Act)
- */
-const SpecialCategoryWarning: React.FC<{
-  category: DataPointCategory
-  language: SupportedLanguage
-  onClose?: () => void
-}> = ({ category, language, onClose }) => {
-  // Bestimme welche Warnung angezeigt werden soll
-  let warning = null
-  let bgColor = ''
-  let borderColor = ''
-  let iconColor = ''
-
-  if (category === 'HEALTH_DATA') {
-    warning = ARTICLE_9_WARNING
-    bgColor = 'bg-rose-50'
-    borderColor = 'border-rose-200'
-    iconColor = 'text-rose-600'
-  } else if (category === 'EMPLOYEE_DATA') {
-    warning = EMPLOYEE_DATA_WARNING
-    bgColor = 'bg-orange-50'
-    borderColor = 'border-orange-200'
-    iconColor = 'text-orange-600'
-  } else if (category === 'AI_DATA') {
-    warning = AI_DATA_WARNING
-    bgColor = 'bg-fuchsia-50'
-    borderColor = 'border-fuchsia-200'
-    iconColor = 'text-fuchsia-600'
-  }
-
-  if (!warning) return null
-
-  return (
-    <div className={`p-4 rounded-lg border ${bgColor} ${borderColor} mb-4`}>
-      <div className="flex items-start gap-3">
-        <AlertTriangle className={`w-5 h-5 ${iconColor} flex-shrink-0 mt-0.5`} />
-        <div className="flex-1">
-          <div className="flex items-center justify-between">
-            <h4 className={`font-semibold ${iconColor}`}>
-              {warning.title[language]}
-            </h4>
-            {onClose && (
-              <button
-                onClick={onClose}
-                className="text-slate-400 hover:text-slate-600 transition-colors"
-              >
-                <X className="w-4 h-4" />
-              </button>
-            )}
-          </div>
-          <p className="text-sm text-slate-600 mt-1">
-            {warning.description[language]}
-          </p>
-          <ul className="mt-3 space-y-1">
-            {warning.requirements.map((req, idx) => (
-              <li key={idx} className="text-sm text-slate-700 flex items-start gap-2">
-                <span className={`${iconColor} font-bold`}>•</span>
-                <span>{req[language]}</span>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-/**
- * Inline-Hinweis fuer Art. 9 Datenpunkte
- */
-const Article9Badge: React.FC<{ language: SupportedLanguage }> = ({ language }) => (
-  <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full bg-rose-100 text-rose-700 border border-rose-200">
-    <Heart className="w-3 h-3" />
-    {language === 'de' ? 'Art. 9 DSGVO' : 'Art. 9 GDPR'}
-  </span>
-)
+const ALL_CATEGORIES: DataPointCategory[] = [
+  'MASTER_DATA',       // A
+  'CONTACT_DATA',      // B
+  'AUTHENTICATION',    // C
+  'CONSENT',           // D
+  'COMMUNICATION',     // E
+  'PAYMENT',           // F
+  'USAGE_DATA',        // G
+  'LOCATION',          // H
+  'DEVICE_DATA',       // I
+  'MARKETING',         // J
+  'ANALYTICS',         // K
+  'SOCIAL_MEDIA',      // L
+  'HEALTH_DATA',       // M - Art. 9 DSGVO
+  'EMPLOYEE_DATA',     // N - BDSG § 26
+  'CONTRACT_DATA',     // O
+  'LOG_DATA',          // P
+  'AI_DATA',           // Q - AI Act
+  'SECURITY',          // R
+]
 
 // =============================================================================
 // MAIN COMPONENT
@@ -229,29 +78,6 @@ export function DataPointCatalog({
   showFilters = true,
   readOnly = false,
 }: DataPointCatalogProps) {
-  // Alle 18 Kategorien in der richtigen Reihenfolge (A-R)
-  const ALL_CATEGORIES: DataPointCategory[] = [
-    'MASTER_DATA',       // A
-    'CONTACT_DATA',      // B
-    'AUTHENTICATION',    // C
-    'CONSENT',           // D
-    'COMMUNICATION',     // E
-    'PAYMENT',           // F
-    'USAGE_DATA',        // G
-    'LOCATION',          // H
-    'DEVICE_DATA',       // I
-    'MARKETING',         // J
-    'ANALYTICS',         // K
-    'SOCIAL_MEDIA',      // L
-    'HEALTH_DATA',       // M - Art. 9 DSGVO
-    'EMPLOYEE_DATA',     // N - BDSG § 26
-    'CONTRACT_DATA',     // O
-    'LOG_DATA',          // P
-    'AI_DATA',           // Q - AI Act
-    'SECURITY',          // R
-  ]
-
-  // State
   const [searchQuery, setSearchQuery] = useState('')
   const [expandedCategories, setExpandedCategories] = useState<Set<DataPointCategory>>(
     new Set(ALL_CATEGORIES)
@@ -261,34 +87,23 @@ export function DataPointCatalog({
   const [filterBasis, setFilterBasis] = useState<LegalBasis | 'ALL'>('ALL')
   const [dismissedWarnings, setDismissedWarnings] = useState<Set<DataPointCategory>>(new Set())
 
-  // Filtered and searched data points
   const filteredDataPoints = useMemo(() => {
     let result = dataPoints
-
-    // Search
     if (searchQuery.trim()) {
       result = searchDataPoints(result, searchQuery, language)
     }
-
-    // Filter by category
     if (filterCategory !== 'ALL') {
       result = result.filter((dp) => dp.category === filterCategory)
     }
-
-    // Filter by risk
     if (filterRisk !== 'ALL') {
       result = result.filter((dp) => dp.riskLevel === filterRisk)
     }
-
-    // Filter by legal basis
     if (filterBasis !== 'ALL') {
       result = result.filter((dp) => dp.legalBasis === filterBasis)
     }
-
     return result
   }, [dataPoints, searchQuery, filterCategory, filterRisk, filterBasis, language])
 
-  // Group by category (18 Kategorien)
   const groupedDataPoints = useMemo(() => {
     const grouped = new Map<DataPointCategory, DataPoint[]>()
     for (const cat of ALL_CATEGORIES) {
@@ -301,7 +116,6 @@ export function DataPointCatalog({
     return grouped
   }, [filteredDataPoints])
 
-  // Zaehle ausgewaehlte spezielle Kategorien fuer Warnungen
   const selectedSpecialCategories = useMemo(() => {
     const special = new Set<DataPointCategory>()
     for (const id of selectedIds) {
@@ -321,7 +135,6 @@ export function DataPointCatalog({
     return special
   }, [selectedIds, dataPoints])
 
-  // Toggle category expansion
   const toggleCategory = (category: DataPointCategory) => {
     setExpandedCategories((prev) => {
       const next = new Set(prev)
@@ -334,7 +147,6 @@ export function DataPointCatalog({
     })
   }
 
-  // Stats
   const totalSelected = selectedIds.length
   const totalDataPoints = dataPoints.length
 
@@ -367,7 +179,7 @@ export function DataPointCatalog({
         )}
       </div>
 
-      {/* Art. 9 DSGVO / BDSG § 26 / AI Act Warnungen */}
+      {/* Art. 9 / BDSG § 26 / AI Act Warnungen */}
       {selectedSpecialCategories.size > 0 && (
         <div className="space-y-3">
           {selectedSpecialCategories.has('HEALTH_DATA') && !dismissedWarnings.has('HEALTH_DATA') && (
@@ -397,7 +209,6 @@ export function DataPointCatalog({
       {/* Search and Filters */}
       {showFilters && (
         <div className="flex flex-wrap gap-3">
-          {/* Search */}
           <div className="relative flex-1 min-w-[200px]">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
             <input
@@ -408,8 +219,6 @@ export function DataPointCatalog({
               className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
             />
           </div>
-
-          {/* Category Filter */}
           <select
             value={filterCategory}
             onChange={(e) => setFilterCategory(e.target.value as DataPointCategory | 'ALL')}
@@ -422,8 +231,6 @@ export function DataPointCatalog({
               </option>
             ))}
           </select>
-
-          {/* Risk Filter */}
           <select
             value={filterRisk}
             onChange={(e) => setFilterRisk(e.target.value as RiskLevel | 'ALL')}
@@ -434,8 +241,6 @@ export function DataPointCatalog({
             <option value="MEDIUM">{RISK_LEVEL_STYLING.MEDIUM.label[language]}</option>
             <option value="HIGH">{RISK_LEVEL_STYLING.HIGH.label[language]}</option>
           </select>
-
-          {/* Legal Basis Filter */}
           <select
             value={filterBasis}
             onChange={(e) => setFilterBasis(e.target.value as LegalBasis | 'ALL')}
@@ -455,190 +260,18 @@ export function DataPointCatalog({
       <div className="space-y-3">
         {Array.from(groupedDataPoints.entries()).map(([category, categoryDataPoints]) => {
           if (categoryDataPoints.length === 0) return null
-
-          const meta = CATEGORY_METADATA[category]
-          const isExpanded = expandedCategories.has(category)
-          const selectedInCategory = categoryDataPoints.filter((dp) =>
-            selectedIds.includes(dp.id)
-          ).length
-
           return (
-            <div
+            <DataPointCategoryGroup
               key={category}
-              className="border border-slate-200 rounded-xl overflow-hidden bg-white"
-            >
-              {/* Category Header */}
-              <button
-                onClick={() => toggleCategory(category)}
-                className={`w-full flex items-center justify-between px-4 py-3 transition-colors ${
-                  category === 'HEALTH_DATA'
-                    ? 'bg-rose-50 hover:bg-rose-100 border-l-4 border-rose-400'
-                    : category === 'EMPLOYEE_DATA'
-                    ? 'bg-orange-50 hover:bg-orange-100 border-l-4 border-orange-400'
-                    : category === 'AI_DATA'
-                    ? 'bg-fuchsia-50 hover:bg-fuchsia-100 border-l-4 border-fuchsia-400'
-                    : 'bg-slate-50 hover:bg-slate-100'
-                }`}
-              >
-                <div className="flex items-center gap-3">
-                  <div className={`p-2 rounded-lg ${
-                    category === 'HEALTH_DATA' ? 'bg-rose-100' :
-                    category === 'EMPLOYEE_DATA' ? 'bg-orange-100' :
-                    category === 'AI_DATA' ? 'bg-fuchsia-100' :
-                    `bg-${meta.color}-100`
-                  }`}>
-                    <CategoryIcon
-                      category={category}
-                      className={`w-5 h-5 ${
-                        category === 'HEALTH_DATA' ? 'text-rose-600' :
-                        category === 'EMPLOYEE_DATA' ? 'text-orange-600' :
-                        category === 'AI_DATA' ? 'text-fuchsia-600' :
-                        `text-${meta.color}-600`
-                      }`}
-                    />
-                  </div>
-                  <div className="text-left">
-                    <div className="flex items-center gap-2">
-                      <span className="font-semibold text-slate-900">
-                        {meta.code}. {meta.name[language]}
-                      </span>
-                      {category === 'HEALTH_DATA' && (
-                        <span className="text-xs bg-rose-200 text-rose-700 px-1.5 py-0.5 rounded font-medium">
-                          Art. 9 DSGVO
-                        </span>
-                      )}
-                      {category === 'EMPLOYEE_DATA' && (
-                        <span className="text-xs bg-orange-200 text-orange-700 px-1.5 py-0.5 rounded font-medium">
-                          BDSG § 26
-                        </span>
-                      )}
-                      {category === 'AI_DATA' && (
-                        <span className="text-xs bg-fuchsia-200 text-fuchsia-700 px-1.5 py-0.5 rounded font-medium">
-                          AI Act
-                        </span>
-                      )}
-                    </div>
-                    <div className="text-xs text-slate-500">{meta.description[language]}</div>
-                  </div>
-                </div>
-                <div className="flex items-center gap-3">
-                  <span className="text-sm text-slate-500">
-                    {selectedInCategory}/{categoryDataPoints.length}
-                  </span>
-                  {isExpanded ? (
-                    <ChevronDown className="w-5 h-5 text-slate-400" />
-                  ) : (
-                    <ChevronRight className="w-5 h-5 text-slate-400" />
-                  )}
-                </div>
-              </button>
-
-              {/* Data Points List */}
-              {isExpanded && (
-                <div className="divide-y divide-slate-100">
-                  {categoryDataPoints.map((dp) => {
-                    const isSelected = selectedIds.includes(dp.id)
-                    return (
-                      <div
-                        key={dp.id}
-                        className={`flex items-start gap-4 p-4 ${
-                          readOnly ? '' : 'cursor-pointer hover:bg-slate-50'
-                        } transition-colors ${isSelected ? 'bg-indigo-50/50' : ''}`}
-                        onClick={() => !readOnly && onToggle(dp.id)}
-                      >
-                        {/* Checkbox */}
-                        {!readOnly && (
-                          <div className="flex-shrink-0 pt-0.5">
-                            {isSelected ? (
-                              <CheckCircle className="w-5 h-5 text-indigo-600" />
-                            ) : (
-                              <Circle className="w-5 h-5 text-slate-300" />
-                            )}
-                          </div>
-                        )}
-
-                        {/* Content */}
-                        <div className="flex-1 min-w-0">
-                          <div className="flex items-start justify-between gap-4">
-                            <div>
-                              <div className="flex items-center gap-2 flex-wrap">
-                                <span className="text-xs font-mono text-slate-400 bg-slate-100 px-1.5 py-0.5 rounded">
-                                  {dp.code}
-                                </span>
-                                <span className="font-medium text-slate-900">
-                                  {dp.name[language]}
-                                </span>
-                                {dp.isSpecialCategory && (
-                                  <Article9Badge language={language} />
-                                )}
-                                {dp.isCustom && (
-                                  <span className="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">
-                                    {language === 'de' ? 'Benutzerdefiniert' : 'Custom'}
-                                  </span>
-                                )}
-                              </div>
-                              <p className="text-sm text-slate-600 mt-1">
-                                {dp.description[language]}
-                              </p>
-                            </div>
-                            <div className="flex-shrink-0 flex flex-col items-end gap-1">
-                              <RiskBadge level={dp.riskLevel} language={language} />
-                              <LegalBasisBadge basis={dp.legalBasis} language={language} />
-                            </div>
-                          </div>
-
-                          {/* Details */}
-                          <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-500">
-                            <span>
-                              <strong>{language === 'de' ? 'Zweck' : 'Purpose'}:</strong> {dp.purpose[language]}
-                            </span>
-                            <span>
-                              <strong>{language === 'de' ? 'Loeschfrist' : 'Retention'}:</strong>{' '}
-                              {RETENTION_PERIOD_INFO[dp.retentionPeriod]?.label[language] || dp.retentionPeriod}
-                            </span>
-                            {dp.cookieCategory && (
-                              <span>
-                                <strong>Cookie:</strong> {dp.cookieCategory}
-                              </span>
-                            )}
-                          </div>
-                          {/* Spezielle Warnungen fuer Art. 9 / BDSG / AI Act */}
-                          {(dp.requiresExplicitConsent || dp.isSpecialCategory) && (
-                            <div className="mt-2 p-2 rounded-md bg-rose-50 border border-rose-200">
-                              <div className="flex items-start gap-2 text-xs text-rose-700">
-                                <AlertTriangle className="w-4 h-4 flex-shrink-0 mt-0.5" />
-                                <div>
-                                  <strong>
-                                    {language === 'de'
-                                      ? 'Ausdrueckliche Einwilligung erforderlich'
-                                      : 'Explicit consent required'}
-                                  </strong>
-                                  {dp.legalBasis === 'EXPLICIT_CONSENT' && (
-                                    <span className="block mt-1 text-rose-600">
-                                      {language === 'de'
-                                        ? 'Art. 9 Abs. 2 lit. a DSGVO - Separate Einwilligungserklaerung notwendig'
-                                        : 'Art. 9(2)(a) GDPR - Separate consent declaration required'}
-                                    </span>
-                                  )}
-                                </div>
-                              </div>
-                            </div>
-                          )}
-
-                          {/* Third Party Recipients */}
-                          {dp.thirdPartyRecipients.length > 0 && (
-                            <div className="mt-2 text-xs text-slate-500">
-                              <strong>Drittanbieter:</strong>{' '}
-                              {dp.thirdPartyRecipients.join(', ')}
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                    )
-                  })}
-                </div>
-              )}
-            </div>
+              category={category}
+              categoryDataPoints={categoryDataPoints}
+              selectedIds={selectedIds}
+              isExpanded={expandedCategories.has(category)}
+              readOnly={readOnly}
+              language={language}
+              onToggleCategory={toggleCategory}
+              onToggleDataPoint={onToggle}
+            />
           )
         })}
       </div>