From 3ffba9ef4f21cd6deef802cf76e16f079f2d1e86 Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.local>
Date: Thu, 26 Feb 2026 15:20:57 +0100
Subject: [PATCH] Fix Academy new course: use training module selector instead
 of topic input

The "generate course" feature now shows a list of available training modules
to select from, instead of a free-text topic field. This correctly sends the
module_id to the backend GenerateCourseFromTraining handler.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../app/(sdk)/sdk/academy/new/page.tsx        | 172 +++++++++---------
 1 file changed, 85 insertions(+), 87 deletions(-)

diff --git a/admin-compliance/app/(sdk)/sdk/academy/new/page.tsx b/admin-compliance/app/(sdk)/sdk/academy/new/page.tsx
index c76fee7..9dd03bb 100644
--- a/admin-compliance/app/(sdk)/sdk/academy/new/page.tsx
+++ b/admin-compliance/app/(sdk)/sdk/academy/new/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useRouter } from 'next/navigation'
 import Link from 'next/link'
 import { useSDK } from '@/lib/sdk'
@@ -11,6 +11,8 @@ import {
   GenerateCourseRequest
 } from '@/lib/sdk/academy/types'
 import { createCourse, generateCourse } from '@/lib/sdk/academy/api'
+import { getModules } from '@/lib/sdk/training/api'
+import type { TrainingModule } from '@/lib/sdk/training/types'
 
 type CreationMode = 'manual' | 'ai'
 
@@ -27,10 +29,34 @@ export default function NewCoursePage() {
   const [duration, setDuration] = useState(60)
   const [passingScore, setPassingScore] = useState(70)
 
-  // AI generation state
-  const [topic, setTopic] = useState('')
-  const [targetGroup, setTargetGroup] = useState('Alle Mitarbeiter')
-  const [useRag, setUseRag] = useState(true)
+  // AI generation state - module selection
+  const [trainingModules, setTrainingModules] = useState<TrainingModule[]>([])
+  const [selectedModuleId, setSelectedModuleId] = useState('')
+  const [modulesLoading, setModulesLoading] = useState(false)
+
+  // Load training modules on mount
+  useEffect(() => {
+    async function loadModules() {
+      setModulesLoading(true)
+      try {
+        const res = await getModules()
+        // Filter out modules that already have an academy_course_id
+        const available = (res.modules || []).filter(m => !m.academy_course_id)
+        setTrainingModules(available)
+      } catch {
+        // If loading fails, show all modules
+        try {
+          const res = await getModules()
+          setTrainingModules(res.modules || [])
+        } catch {
+          setError('Training-Module konnten nicht geladen werden.')
+        }
+      } finally {
+        setModulesLoading(false)
+      }
+    }
+    loadModules()
+  }, [])
 
   const handleManualCreate = async () => {
     if (!title.trim()) {
@@ -69,25 +95,16 @@ export default function NewCoursePage() {
   }
 
   const handleAIGenerate = async () => {
-    if (!topic.trim()) {
-      setError('Bitte geben Sie ein Thema fuer den Kurs ein.')
+    if (!selectedModuleId) {
+      setError('Bitte waehlen Sie ein Training-Modul aus.')
       return
     }
     setIsLoading(true)
     setError(null)
 
     try {
-      const tenantId = typeof window !== 'undefined'
-        ? localStorage.getItem('bp_tenant_id') || 'default-tenant'
-        : 'default-tenant'
-
       const result = await generateCourse({
-        tenantId,
-        topic: topic.trim(),
-        category,
-        targetGroup: targetGroup.trim(),
-        language: 'de',
-        useRag
+        moduleId: selectedModuleId,
       })
 
       if (result && result.course && result.course.id) {
@@ -174,82 +191,63 @@ export default function NewCoursePage() {
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
             </svg>
             <div>
-              <h3 className="font-medium text-purple-800">KI-generierter Kurs</h3>
+              <h3 className="font-medium text-purple-800">Kurs aus Training-Modul generieren</h3>
               <p className="text-sm text-purple-600 mt-1">
-                Die KI erstellt automatisch Lektionen, Inhalte und Quizfragen basierend auf dem gewaehlten Thema.
-                Optionaler RAG-Kontext aus relevanten Gesetzestexten wird einbezogen.
+                Waehlen Sie ein bestehendes Training-Modul aus. Der Academy-Kurs wird automatisch mit den generierten Inhalten und Quizfragen erstellt.
               </p>
             </div>
           </div>
 
-          {/* Topic */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">Schulungsthema *</label>
-            <input
-              type="text"
-              value={topic}
-              onChange={(e) => setTopic(e.target.value)}
-              placeholder="z.B. DSGVO-Grundlagen fuer neue Mitarbeiter"
-              className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-base"
-            />
-          </div>
-
-          {/* Category */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">Kategorie *</label>
-            <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
-              {Object.entries(COURSE_CATEGORY_INFO).map(([cat, info]) => (
-                <button
-                  key={cat}
-                  type="button"
-                  onClick={() => setCategory(cat as CourseCategory)}
-                  className={`p-4 rounded-xl border-2 text-left transition-all ${
-                    category === cat
-                      ? 'border-purple-500 bg-purple-50'
-                      : 'border-gray-200 hover:border-gray-300'
-                  }`}
-                >
-                  <div className={`text-sm font-medium ${category === cat ? 'text-purple-700' : 'text-gray-700'}`}>
-                    {info.label}
-                  </div>
-                  <div className="text-xs text-gray-500 mt-1 line-clamp-2">{info.description}</div>
-                </button>
-              ))}
+          {/* Module Selection */}
+          {modulesLoading ? (
+            <div className="flex items-center gap-3 py-8 justify-center text-gray-500">
+              <svg className="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+              </svg>
+              Training-Module werden geladen...
             </div>
-          </div>
-
-          {/* Target Group */}
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">Zielgruppe</label>
-            <input
-              type="text"
-              value={targetGroup}
-              onChange={(e) => setTargetGroup(e.target.value)}
-              placeholder="z.B. Alle Mitarbeiter, IT-Abteilung, Fuehrungskraefte"
-              className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-            />
-          </div>
-
-          {/* RAG Toggle */}
-          <div className="flex items-center gap-3">
-            <button
-              type="button"
-              onClick={() => setUseRag(!useRag)}
-              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-                useRag ? 'bg-purple-600' : 'bg-gray-300'
-              }`}
-            >
-              <span
-                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                  useRag ? 'translate-x-6' : 'translate-x-1'
-                }`}
-              />
-            </button>
+          ) : trainingModules.length === 0 ? (
+            <div className="text-center py-8">
+              <p className="text-gray-500">Keine verfuegbaren Training-Module gefunden.</p>
+              <p className="text-sm text-gray-400 mt-1">Alle Module haben bereits einen Academy-Kurs oder es existieren noch keine Module.</p>
+            </div>
+          ) : (
             <div>
-              <span className="text-sm font-medium text-gray-700">RAG-Kontext verwenden</span>
-              <p className="text-xs text-gray-500">Relevante Gesetzestexte (DSGVO, AI Act, NIS2) einbeziehen</p>
+              <label className="block text-sm font-medium text-gray-700 mb-2">Training-Modul auswählen *</label>
+              <div className="grid gap-3 max-h-[400px] overflow-y-auto pr-2">
+                {trainingModules.map((mod) => (
+                  <button
+                    key={mod.id}
+                    type="button"
+                    onClick={() => setSelectedModuleId(mod.id)}
+                    className={`p-4 rounded-xl border-2 text-left transition-all ${
+                      selectedModuleId === mod.id
+                        ? 'border-purple-500 bg-purple-50'
+                        : 'border-gray-200 hover:border-gray-300'
+                    }`}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div className={`text-sm font-medium ${selectedModuleId === mod.id ? 'text-purple-700' : 'text-gray-700'}`}>
+                        {mod.title}
+                      </div>
+                      <span className="text-xs px-2 py-1 rounded-full bg-gray-100 text-gray-600">
+                        {mod.regulation_area}
+                      </span>
+                    </div>
+                    {mod.description && (
+                      <div className="text-xs text-gray-500 mt-1 line-clamp-2">{mod.description}</div>
+                    )}
+                    <div className="flex gap-3 mt-2 text-xs text-gray-400">
+                      <span>{mod.duration_minutes} Min.</span>
+                      <span>{mod.frequency_type}</span>
+                      <span>{mod.module_code}</span>
+                    </div>
+                  </button>
+                ))}
+              </div>
             </div>
-          </div>
+          )}
 
           {/* Submit */}
           <div className="flex justify-end gap-3 pt-4 border-t border-gray-200">
@@ -261,7 +259,7 @@ export default function NewCoursePage() {
             </Link>
             <button
               onClick={handleAIGenerate}
-              disabled={isLoading || !topic.trim()}
+              disabled={isLoading || !selectedModuleId}
               className="px-6 py-2.5 bg-purple-600 text-white rounded-xl hover:bg-purple-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
             >
               {isLoading ? (
@@ -270,7 +268,7 @@ export default function NewCoursePage() {
                     <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                     <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                   </svg>
-                  KI generiert Kurs...
+                  Kurs wird generiert...
                 </>
               ) : (
                 <>