refactor(admin): split academy page.tsx into colocated components

Split 1257-LOC client page into _types.ts plus nine components under
_components/ (TabNavigation/StatCard/FilterBar in shared, CourseCard,
EnrollmentCard, CertificatesTab, EnrollmentEditModal, CourseEditModal,
SettingsTab, and PageSections for header actions and empty states).
Behavior preserved exactly; page.tsx is now a thin wiring shell.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

admin-compliance/app/sdk/academy/_components/EnrollmentCard.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import React from 'react'
+import {
+  Enrollment,
+  ENROLLMENT_STATUS_INFO,
+  isEnrollmentOverdue,
+  getDaysUntilDeadline
+} from '@/lib/sdk/academy/types'
+
+export function EnrollmentCard({ enrollment, courseName, onEdit, onComplete, onDelete }: {
+  enrollment: Enrollment
+  courseName: string
+  onEdit?: (enrollment: Enrollment) => void
+  onComplete?: (id: string) => void
+  onDelete?: (id: string) => void
+}) {
+  const statusInfo = ENROLLMENT_STATUS_INFO[enrollment.status]
+  const overdue = isEnrollmentOverdue(enrollment)
+  const daysUntil = getDaysUntilDeadline(enrollment.deadline)
+
+  return (
+    <div className={`
+      bg-white rounded-xl border-2 p-6
+      ${overdue ? 'border-red-300' :
+        enrollment.status === 'completed' ? 'border-green-200' :
+        enrollment.status === 'in_progress' ? 'border-yellow-200' :
+        'border-gray-200'
+      }
+    `}>
+      <div className="flex items-start justify-between">
+        <div className="flex-1 min-w-0">
+          {/* Status Badge */}
+          <div className="flex items-center gap-2 mb-2 flex-wrap">
+            <span className={`px-2 py-1 text-xs rounded-full ${statusInfo.bgColor} ${statusInfo.color}`}>
+              {statusInfo.label}
+            </span>
+            {overdue && (
+              <span className="px-2 py-1 text-xs bg-red-100 text-red-700 rounded-full flex items-center gap-1">
+                <svg className="w-3 h-3" 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>
+                Ueberfaellig
+              </span>
+            )}
+          </div>
+
+          {/* User Info */}
+          <h3 className="text-lg font-semibold text-gray-900 truncate">
+            {enrollment.userName}
+          </h3>
+          <p className="text-sm text-gray-500">{enrollment.userEmail}</p>
+          <p className="text-sm text-gray-600 mt-1 font-medium">{courseName}</p>
+
+          {/* Progress Bar */}
+          <div className="mt-3">
+            <div className="flex items-center justify-between text-sm mb-1">
+              <span className="text-gray-500">Fortschritt</span>
+              <span className="font-medium text-gray-700">{enrollment.progress}%</span>
+            </div>
+            <div className="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
+              <div
+                className={`h-full rounded-full transition-all ${
+                  enrollment.progress === 100 ? 'bg-green-500' :
+                  overdue ? 'bg-red-500' :
+                  'bg-purple-500'
+                }`}
+                style={{ width: `${enrollment.progress}%` }}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Right Side - Deadline */}
+        <div className={`text-right ml-4 ${
+          overdue ? 'text-red-600' :
+          daysUntil <= 7 ? 'text-orange-600' :
+          'text-gray-500'
+        }`}>
+          <div className="text-sm font-medium">
+            {enrollment.status === 'completed'
+              ? 'Abgeschlossen'
+              : overdue
+                ? `${Math.abs(daysUntil)} Tage ueberfaellig`
+                : `${daysUntil} Tage verbleibend`
+            }
+          </div>
+          <div className="text-xs mt-0.5">
+            Frist: {new Date(enrollment.deadline).toLocaleDateString('de-DE')}
+          </div>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between">
+        <div className="text-sm text-gray-500">
+          Gestartet: {new Date(enrollment.startedAt).toLocaleDateString('de-DE')}
+          {enrollment.completedAt && (
+            <span className="ml-3 text-green-600">
+              Abgeschlossen: {new Date(enrollment.completedAt).toLocaleDateString('de-DE')}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {enrollment.status === 'in_progress' && onComplete && (
+            <button
+              onClick={() => onComplete(enrollment.id)}
+              className="px-3 py-1 text-xs bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
+            >
+              Abschliessen
+            </button>
+          )}
+          {onEdit && (
+            <button
+              onClick={() => onEdit(enrollment)}
+              className="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
+            >
+              Bearbeiten
+            </button>
+          )}
+          {onDelete && (
+            <button
+              onClick={() => onDelete(enrollment.id)}
+              className="px-3 py-1 text-xs bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors"
+            >
+              Loeschen
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}