feat: Use-Cases/UCCA Module auf 100% — Interface Fix, Search/Offset/Total, Explain/Export, Edit-Mode

Kritische Bug Fixes: - [id]/page.tsx: FullAssessment Interface repariert (nested result → flat fields) - resultForCard baut explizit aus flachen Assessment-Feldern (feasibility, risk_score etc.) - Use-Case-Text-Pfad: assessment.intake?.use_case_text statt assessment.use_case_text - rule_code/code Mapping beim Übergeben an AssessmentResultCard Backend (A2+A3): - store.go: AssessmentFilters um Search + Offset erweitert - ListAssessments: COUNT-Query (total), ILIKE-Search auf title, OFFSET-Pagination - ListAssessments Signatur: ([]Assessment, int, error) - Handler: search/offset aus Query-Params, total in Response - import "strconv" hinzugefügt Neue Features: - KI-Erklärung Button (POST /explain) mit lila Erklärungsbox - Export-Buttons Markdown + JSON (Download-Links) - Edit-Mode in new/page.tsx: useSearchParams(?edit=id), Form vorausfüllen - Bedingte PUT/POST Logik; nach Edit → Detail-Seite Redirect - Suspense-Wrapper für useSearchParams (Next.js 15 Requirement) Backend Edit: - store.go: UpdateAssessment() Methode (UPDATE-Query) - ucca_handlers.go: UpdateAssessment Handler (re-evaluiert Intake) - main.go: PUT /ucca/assessments/:id Route registriert Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-03 15:13:42 +01:00
parent d4845adea7
commit 312c2c9b60
5 changed files with 417 additions and 104 deletions
--- a/admin-compliance/app/(sdk)/sdk/use-cases/[id]/page.tsx
+++ b/admin-compliance/app/(sdk)/sdk/use-cases/[id]/page.tsx
@@ -5,44 +5,66 @@ import { useParams, useRouter } from 'next/navigation'
 import Link from 'next/link'
 import { AssessmentResultCard } from '@/components/sdk/use-case-assessment/AssessmentResultCard'

+interface TriggeredRule {
+  code: string
+  category: string
+  title: string
+  description: string
+  severity: string
+  score_delta: number
+  gdpr_ref: string
+}
+
+interface RequiredControl {
+  id: string
+  title: string
+  description: string
+  severity: string
+  category: string
+  gdpr_ref: string
+}
+
+interface PatternRecommendation {
+  pattern_id: string
+  title: string
+  description: string
+  rationale: string
+  priority: number
+}
+
+interface ForbiddenPattern {
+  pattern_id: string
+  title: string
+  description: string
+  reason: string
+}
+
 interface FullAssessment {
  id: string
  title: string
  tenant_id: string
  domain: string
  created_at: string
-  use_case_text?: string
-  intake?: Record<string, unknown>
-  result?: {
-    feasibility: string
-    risk_level: string
-    risk_score: number
-    complexity: string
-    dsfa_recommended: boolean
-    art22_risk: boolean
-    training_allowed: string
-    summary: string
-    recommendation: string
-    alternative_approach?: string
-    triggered_rules?: Array<{
-      rule_code: string
-      title: string
-      severity: string
-      gdpr_ref: string
-    }>
-    required_controls?: Array<{
-      id: string
-      title: string
-      description: string
-      effort: string
-    }>
-    recommended_architecture?: Array<{
-      id: string
-      title: string
-      description: string
-      benefit: string
-    }>
+  intake?: {
+    use_case_text?: string
+    [key: string]: unknown
  }
+  // Flat result fields
+  feasibility: string
+  risk_level: string
+  risk_score: number
+  complexity: string
+  dsfa_recommended: boolean
+  art22_risk: boolean
+  training_allowed: string
+  triggered_rules?: TriggeredRule[]
+  required_controls?: RequiredControl[]
+  recommended_architecture?: PatternRecommendation[]
+  forbidden_patterns?: ForbiddenPattern[]
+  explanation_text?: string
+  explanation_model?: string
+  explanation_generated_at?: string
+  policy_version: string
 }

 export default function AssessmentDetailPage() {
@@ -53,26 +75,20 @@ export default function AssessmentDetailPage() {
  const [assessment, setAssessment] = useState<FullAssessment | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
+  const [explaining, setExplaining] = useState(false)
+  const [explanationError, setExplanationError] = useState<string | null>(null)
+
+  async function loadAssessment() {
+    const response = await fetch(`/api/sdk/v1/ucca/assessments/${assessmentId}`)
+    if (!response.ok) throw new Error('Assessment nicht gefunden')
+    return response.json()
+  }

  useEffect(() => {
-    async function load() {
-      try {
-        const response = await fetch(`/api/sdk/v1/ucca/assessments/${assessmentId}`)
-        if (!response.ok) {
-          throw new Error('Assessment nicht gefunden')
-        }
-        const data = await response.json()
-        setAssessment(data)
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Fehler beim Laden')
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    if (assessmentId) {
-      // Try the direct endpoint first; if it fails, try the list endpoint and filter
-      load().catch(() => {
+    if (!assessmentId) return
+    loadAssessment()
+      .then(data => setAssessment(data))
+      .catch(() => {
        // Fallback: fetch from list
        fetch('/api/sdk/v1/ucca/assessments')
          .then(r => r.json())
@@ -81,12 +97,13 @@ export default function AssessmentDetailPage() {
            if (found) {
              setAssessment(found)
              setError(null)
+            } else {
+              setError('Assessment nicht gefunden')
            }
          })
-          .catch(() => {})
-          .finally(() => setLoading(false))
+          .catch(() => setError('Fehler beim Laden'))
      })
-    }
+      .finally(() => setLoading(false))
  }, [assessmentId])

  const handleDelete = async () => {
@@ -99,6 +116,26 @@ export default function AssessmentDetailPage() {
    }
  }

+  const handleExplain = async () => {
+    setExplaining(true)
+    setExplanationError(null)
+    try {
+      const res = await fetch(`/api/sdk/v1/ucca/assessments/${assessmentId}/explain`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ language: 'de' }),
+      })
+      if (!res.ok) throw new Error('Fehler bei der Erklärung')
+      // Reload assessment to get updated explanation_text
+      const updated = await fetch(`/api/sdk/v1/ucca/assessments/${assessmentId}`)
+      setAssessment(await updated.json())
+    } catch (err) {
+      setExplanationError(err instanceof Error ? err.message : 'Fehler')
+    } finally {
+      setExplaining(false)
+    }
+  }
+
  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
@@ -121,6 +158,38 @@ export default function AssessmentDetailPage() {
    )
  }

+  // Build result object for AssessmentResultCard from flat assessment fields
+  const resultForCard = {
+    feasibility: assessment.feasibility,
+    risk_level: assessment.risk_level,
+    risk_score: assessment.risk_score,
+    complexity: assessment.complexity,
+    dsfa_recommended: assessment.dsfa_recommended,
+    art22_risk: assessment.art22_risk,
+    training_allowed: assessment.training_allowed,
+    // AssessmentResultCard expects rule_code; backend stores code — map here
+    triggered_rules: assessment.triggered_rules?.map(r => ({
+      rule_code: r.code,
+      title: r.title,
+      severity: r.severity,
+      gdpr_ref: r.gdpr_ref,
+    })),
+    required_controls: assessment.required_controls?.map(c => ({
+      id: c.id,
+      title: c.title,
+      description: c.description,
+      effort: c.category,
+    })),
+    recommended_architecture: assessment.recommended_architecture?.map(p => ({
+      id: p.pattern_id,
+      title: p.title,
+      description: p.description,
+      benefit: p.rationale,
+    })),
+    summary: '',
+    recommendation: '',
+  }
+
  return (
    <div className="space-y-6">
      {/* Breadcrumb */}
@@ -131,7 +200,7 @@ export default function AssessmentDetailPage() {
      </div>

      {/* Header */}
-      <div className="flex items-start justify-between">
+      <div className="flex items-start justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">{assessment.title || 'Assessment Detail'}</h1>
          <div className="flex items-center gap-4 mt-2 text-sm text-gray-500">
@@ -139,7 +208,28 @@ export default function AssessmentDetailPage() {
            <span>Erstellt: {new Date(assessment.created_at).toLocaleDateString('de-DE')}</span>
          </div>
        </div>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 flex-wrap justify-end">
+          <button
+            onClick={handleExplain}
+            disabled={explaining}
+            className="px-4 py-2 text-sm bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 transition-colors disabled:opacity-50"
+          >
+            {explaining ? 'Generiere...' : '✨ KI-Erklärung'}
+          </button>
+          <a
+            href={`/api/sdk/v1/ucca/export/${assessmentId}?format=md`}
+            download
+            className="px-4 py-2 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
+          >
+            ↓ Markdown
+          </a>
+          <a
+            href={`/api/sdk/v1/ucca/export/${assessmentId}?format=json`}
+            download
+            className="px-4 py-2 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
+          >
+            ↓ JSON
+          </a>
          <Link
            href={`/sdk/use-cases/new?edit=${assessmentId}`}
            className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
@@ -161,23 +251,37 @@ export default function AssessmentDetailPage() {
        </div>
      </div>

+      {/* Explanation error */}
+      {explanationError && (
+        <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-700 text-sm">
+          {explanationError}
+        </div>
+      )}
+
      {/* Use Case Text */}
-      {assessment.use_case_text && (
+      {assessment.intake?.use_case_text && (
        <div className="bg-gray-50 rounded-xl border border-gray-200 p-6">
          <h3 className="text-sm font-medium text-gray-500 mb-2">Beschreibung des Anwendungsfalls</h3>
-          <p className="text-gray-800 whitespace-pre-wrap">{assessment.use_case_text}</p>
+          <p className="text-gray-800 whitespace-pre-wrap">{assessment.intake.use_case_text as string}</p>
        </div>
      )}

      {/* Result */}
-      {assessment.result && (
-        <AssessmentResultCard result={assessment.result} />
-      )}
+      <AssessmentResultCard result={resultForCard as Parameters<typeof AssessmentResultCard>[0]['result']} />

-      {/* No Result */}
-      {!assessment.result && (
-        <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-6 text-center">
-          <p className="text-yellow-700">Dieses Assessment hat noch kein Ergebnis.</p>
+      {/* KI-Erklärung */}
+      {assessment.explanation_text && (
+        <div className="bg-purple-50 border border-purple-200 rounded-xl p-6">
+          <div className="flex items-center gap-2 mb-3">
+            <span className="text-lg">✨</span>
+            <h3 className="text-sm font-semibold text-purple-800">KI-Erklärung</h3>
+            {assessment.explanation_model && (
+              <span className="text-xs text-purple-500 ml-auto">via {assessment.explanation_model}</span>
+            )}
+          </div>
+          <p className="text-purple-900 whitespace-pre-wrap text-sm leading-relaxed">
+            {assessment.explanation_text}
+          </p>
        </div>
      )}
    </div>
--- a/admin-compliance/app/(sdk)/sdk/use-cases/new/page.tsx
+++ b/admin-compliance/app/(sdk)/sdk/use-cases/new/page.tsx
@@ -1,7 +1,7 @@
 'use client'

-import React, { useState } from 'react'
-import { useRouter } from 'next/navigation'
+import React, { useState, useEffect, Suspense } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { AssessmentResultCard } from '@/components/sdk/use-case-assessment/AssessmentResultCard'

 // =============================================================================
@@ -38,10 +38,15 @@ const DOMAINS = [
 // MAIN COMPONENT
 // =============================================================================

-export default function NewUseCasePage() {
+function NewUseCasePageInner() {
  const router = useRouter()
+  const searchParams = useSearchParams()
+  const editId = searchParams.get('edit')
+  const isEditMode = !!editId
+
  const [currentStep, setCurrentStep] = useState(1)
  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [editLoading, setEditLoading] = useState(false)
  const [result, setResult] = useState<unknown>(null)
  const [error, setError] = useState<string | null>(null)

@@ -93,6 +98,52 @@ export default function NewUseCasePage() {
    setForm(prev => ({ ...prev, ...updates }))
  }

+  // Pre-fill form when in edit mode
+  useEffect(() => {
+    if (!editId) return
+    setEditLoading(true)
+    fetch(`/api/sdk/v1/ucca/assessments/${editId}`)
+      .then(r => r.json())
+      .then(data => {
+        const intake = data.intake || {}
+        setForm({
+          title: data.title || '',
+          use_case_text: intake.use_case_text || '',
+          domain: data.domain || 'general',
+          personal_data: intake.data_types?.personal_data || false,
+          special_categories: intake.data_types?.article_9_data || false,
+          minors_data: intake.data_types?.minor_data || false,
+          health_data: intake.data_types?.health_data || false,
+          biometric_data: intake.data_types?.biometric_data || false,
+          financial_data: intake.data_types?.financial_data || false,
+          purpose_profiling: intake.purpose?.profiling || false,
+          purpose_automated_decision: intake.purpose?.automated_decision || intake.purpose?.decision_making || false,
+          purpose_marketing: intake.purpose?.marketing || false,
+          purpose_analytics: intake.purpose?.analytics || false,
+          purpose_service_delivery: intake.purpose?.service_delivery || intake.purpose?.customer_support || false,
+          automation: intake.automation || 'assistive',
+          hosting_provider: intake.hosting?.provider || 'self_hosted',
+          hosting_region: intake.hosting?.region || 'eu',
+          model_rag: intake.model_usage?.rag || false,
+          model_finetune: intake.model_usage?.finetune || false,
+          model_training: intake.model_usage?.training || false,
+          model_inference: intake.model_usage?.inference ?? true,
+          legal_basis: intake.legal_basis || 'consent',
+          international_transfer: intake.international_transfer?.enabled || false,
+          transfer_countries: intake.international_transfer?.countries || [],
+          transfer_mechanism: intake.international_transfer?.mechanism || 'none',
+          retention_days: intake.retention?.days || 90,
+          retention_purpose: intake.retention?.purpose || '',
+          has_dpa: intake.contracts?.has_dpa || false,
+          has_aia_documentation: intake.contracts?.has_aia_documentation || false,
+          has_risk_assessment: intake.contracts?.has_risk_assessment || false,
+          subprocessors: intake.contracts?.subprocessors || '',
+        })
+      })
+      .catch(() => {})
+      .finally(() => setEditLoading(false))
+  }, [editId])
+
  const handleSubmit = async () => {
    setIsSubmitting(true)
    setError(null)
@@ -146,8 +197,13 @@ export default function NewUseCasePage() {
        store_raw_text: true,
      }

-      const response = await fetch('/api/sdk/v1/ucca/assess', {
-        method: 'POST',
+      const url = isEditMode
+        ? `/api/sdk/v1/ucca/assessments/${editId}`
+        : '/api/sdk/v1/ucca/assess'
+      const method = isEditMode ? 'PUT' : 'POST'
+
+      const response = await fetch(url, {
+        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(intake),
      })
@@ -157,6 +213,11 @@ export default function NewUseCasePage() {
        throw new Error(errData?.error || `HTTP ${response.status}`)
      }

+      if (isEditMode) {
+        router.push(`/sdk/use-cases/${editId}`)
+        return
+      }
+
      const data = await response.json()
      setResult(data)
    } catch (err) {
@@ -201,12 +262,23 @@ export default function NewUseCasePage() {
    <div className="max-w-3xl mx-auto space-y-6">
      {/* Header */}
      <div>
-        <h1 className="text-2xl font-bold text-gray-900">Neues Use Case Assessment</h1>
+        <h1 className="text-2xl font-bold text-gray-900">
+          {isEditMode ? 'Assessment bearbeiten' : 'Neues Use Case Assessment'}
+        </h1>
        <p className="mt-1 text-gray-500">
-          Beschreiben Sie Ihren KI-Anwendungsfall Schritt fuer Schritt
+          {isEditMode
+            ? 'Angaben anpassen und Assessment neu bewerten'
+            : 'Beschreiben Sie Ihren KI-Anwendungsfall Schritt fuer Schritt'}
        </p>
      </div>

+      {/* Edit loading indicator */}
+      {editLoading && (
+        <div className="bg-purple-50 border border-purple-200 rounded-lg p-4 text-purple-700 text-sm">
+          Lade Assessment-Daten...
+        </div>
+      )}
+
      {/* Step Indicator */}
      <div className="flex items-center gap-2">
        {WIZARD_STEPS.map((step, idx) => (
@@ -591,7 +663,7 @@ export default function NewUseCasePage() {
                Bewerte...
              </>
            ) : (
-              'Assessment starten'
+              isEditMode ? 'Speichern & neu bewerten' : 'Assessment starten'
            )}
          </button>
        )}
@@ -599,3 +671,11 @@ export default function NewUseCasePage() {
    </div>
  )
 }
+
+export default function NewUseCasePage() {
+  return (
+    <Suspense fallback={<div className="flex items-center justify-center h-64 text-gray-500">Lade...</div>}>
+      <NewUseCasePageInner />
+    </Suspense>
+  )
+}