feat: Analyse-Module auf 100% Runde 2 — CREATE-Forms, Button-Handler, Persistenz

Requirements: ADD-Form + Details-Panel mit Controls/Status-Anzeige
Controls: ADD-Form + Effectiveness-Persistenz via PUT
Evidence: Anzeigen/Herunterladen-Buttons mit fileUrl + disabled-State
Risks: RiskMatrix Cell-Click filtert Risiko-Liste mit Badge + Reset
AI Act: Mock-Daten entfernt, Loading-Skeleton, Edit/Delete-Handler
Audit Checklist: JSON-Export, debounced Notes-Persistenz, Neue Checkliste
Audit Report: Animiertes Skeleton statt Loading-Text

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

admin-compliance/app/(sdk)/sdk/audit-checklist/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef, useCallback } from 'react'
+import { useRouter } from 'next/navigation'
 import { useSDK, ChecklistItem as SDKChecklistItem } from '@/lib/sdk'
 import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
 
@@ -141,10 +142,12 @@ function ChecklistItemCard({
   item,
   onStatusChange,
   onNotesChange,
+  onAddEvidence,
 }: {
   item: DisplayChecklistItem
   onStatusChange: (status: DisplayStatus) => void
   onNotesChange: (notes: string) => void
+  onAddEvidence: () => void
 }) {
   const [showNotes, setShowNotes] = useState(false)
 
@@ -225,7 +228,10 @@ function ChecklistItemCard({
         >
           {showNotes ? 'Notizen ausblenden' : 'Notizen bearbeiten'}
         </button>
-        <button className="text-sm text-gray-500 hover:text-gray-700">
+        <button
+          onClick={onAddEvidence}
+          className="text-sm text-gray-500 hover:text-gray-700"
+        >
           Nachweis hinzufuegen
         </button>
       </div>
@@ -267,10 +273,12 @@ function LoadingSkeleton() {
 
 export default function AuditChecklistPage() {
   const { state, dispatch } = useSDK()
+  const router = useRouter()
   const [filter, setFilter] = useState<string>('all')
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [activeSessionId, setActiveSessionId] = useState<string | null>(null)
+  const notesTimerRef = useRef<Record<string, ReturnType<typeof setTimeout>>>({})
 
   // Fetch checklist from backend on mount
   useEffect(() => {
@@ -411,11 +419,76 @@ export default function AuditChecklistPage() {
     }
   }
 
-  const handleNotesChange = async (itemId: string, notes: string) => {
+  const handleNotesChange = useCallback((itemId: string, notes: string) => {
     const updatedChecklist = state.checklist.map(item =>
       item.id === itemId ? { ...item, notes } : item
     )
     dispatch({ type: 'SET_STATE', payload: { checklist: updatedChecklist } })
+
+    // Debounced persistence to backend
+    if (notesTimerRef.current[itemId]) {
+      clearTimeout(notesTimerRef.current[itemId])
+    }
+    notesTimerRef.current[itemId] = setTimeout(async () => {
+      if (activeSessionId) {
+        const item = state.checklist.find(i => i.id === itemId)
+        try {
+          await fetch(`/api/sdk/v1/compliance/audit/checklist/${activeSessionId}/items/${item?.requirementId || itemId}/sign-off`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ notes }),
+          })
+        } catch {
+          // Silently fail
+        }
+      }
+    }, 1000)
+  }, [state.checklist, activeSessionId, dispatch])
+
+  const handleExport = () => {
+    const exportData = displayItems.map(item => ({
+      id: item.id,
+      requirementId: item.requirementId,
+      question: item.question,
+      category: item.category,
+      status: item.status,
+      notes: item.notes,
+      priority: item.priority,
+      verifiedBy: item.verifiedBy,
+      verifiedAt: item.verifiedAt?.toISOString() || null,
+    }))
+    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `audit-checklist-${new Date().toISOString().split('T')[0]}.json`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }
+
+  const handleNewChecklist = async () => {
+    try {
+      setError(null)
+      const res = await fetch('/api/sdk/v1/compliance/audit/sessions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: `Compliance Audit ${new Date().toLocaleDateString('de-DE')}`,
+          auditor_name: 'Aktueller Benutzer',
+          regulation_codes: ['GDPR'],
+        }),
+      })
+      if (res.ok) {
+        // Reload data
+        window.location.reload()
+      } else {
+        setError('Fehler beim Erstellen der neuen Checkliste')
+      }
+    } catch {
+      setError('Verbindung zum Backend fehlgeschlagen')
+    }
   }
 
   const stepInfo = STEP_EXPLANATIONS['audit-checklist']
@@ -431,10 +504,16 @@ export default function AuditChecklistPage() {
         tips={stepInfo.tips}
       >
         <div className="flex items-center gap-2">
-          <button className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
+          <button
+            onClick={handleExport}
+            className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+          >
             Exportieren
           </button>
-          <button className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
+          <button
+            onClick={handleNewChecklist}
+            className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
+          >
             <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>
@@ -550,6 +629,7 @@ export default function AuditChecklistPage() {
               item={item}
               onStatusChange={(status) => handleStatusChange(item.id, status)}
               onNotesChange={(notes) => handleNotesChange(item.id, notes)}
+              onAddEvidence={() => router.push('/sdk/evidence')}
             />
           ))}
         </div>