215b95adfa
All checks were successful
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-ai-compliance (push) Successful in 32s
CI / test-python-backend-compliance (push) Successful in 31s
CI / test-python-document-crawler (push) Successful in 21s
CI / test-python-dsms-gateway (push) Successful in 19s
Kaputtes (admin) Layout geloescht (Role-Selection, 404-Sidebar, localhost-Dashboard). SDK-Flow nach /sdk/sdk-flow verschoben. Route-Gruppe (sdk) aufgeloest. Root-Seite redirected auf /sdk. ~25 ungenutzte Dateien/Verzeichnisse entfernt. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
382 lines
16 KiB
TypeScript
382 lines
16 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, useEffect } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import Link from 'next/link'
|
|
import { useSDK } from '@/lib/sdk'
|
|
import {
|
|
CourseCategory,
|
|
COURSE_CATEGORY_INFO,
|
|
CreateCourseRequest,
|
|
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'
|
|
|
|
export default function NewCoursePage() {
|
|
const router = useRouter()
|
|
const [mode, setMode] = useState<CreationMode>('ai')
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
// Manual form state
|
|
const [title, setTitle] = useState('')
|
|
const [description, setDescription] = useState('')
|
|
const [category, setCategory] = useState<CourseCategory>('dsgvo_basics')
|
|
const [duration, setDuration] = useState(60)
|
|
const [passingScore, setPassingScore] = useState(70)
|
|
|
|
// AI generation state - module selection
|
|
const [trainingModules, setTrainingModules] = useState<TrainingModule[]>([])
|
|
const [selectedModuleId, setSelectedModuleId] = useState('')
|
|
const [modulesLoading, setModulesLoading] = useState(true)
|
|
|
|
// Load training modules on mount
|
|
useEffect(() => {
|
|
async function loadModules() {
|
|
setModulesLoading(true)
|
|
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()) {
|
|
setError('Bitte geben Sie einen Kurstitel ein.')
|
|
return
|
|
}
|
|
setIsLoading(true)
|
|
setError(null)
|
|
|
|
try {
|
|
const tenantId = typeof window !== 'undefined'
|
|
? localStorage.getItem('bp_tenant_id') || 'default-tenant'
|
|
: 'default-tenant'
|
|
|
|
const result = await createCourse({
|
|
tenantId,
|
|
title: title.trim(),
|
|
description: description.trim(),
|
|
category,
|
|
durationMinutes: duration,
|
|
passingScore,
|
|
requiredForRoles: ['all']
|
|
} as any)
|
|
|
|
// Navigate to the new course
|
|
if (result && (result as any).id) {
|
|
router.push(`/sdk/academy/${(result as any).id}`)
|
|
} else {
|
|
router.push('/sdk/academy')
|
|
}
|
|
} catch (err: any) {
|
|
setError(err.message || 'Fehler beim Erstellen des Kurses')
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleAIGenerate = async () => {
|
|
if (!selectedModuleId) {
|
|
setError('Bitte waehlen Sie ein Training-Modul aus.')
|
|
return
|
|
}
|
|
setIsLoading(true)
|
|
setError(null)
|
|
|
|
try {
|
|
const result = await generateCourse({
|
|
moduleId: selectedModuleId,
|
|
})
|
|
|
|
if (result && result.course && result.course.id) {
|
|
router.push(`/sdk/academy/${result.course.id}`)
|
|
} else {
|
|
router.push('/sdk/academy')
|
|
}
|
|
} catch (err: any) {
|
|
setError(err.message || 'Fehler bei der KI-Generierung')
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-4">
|
|
<Link
|
|
href="/sdk/academy"
|
|
className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg 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="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</Link>
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">Neuen Kurs erstellen</h1>
|
|
<p className="text-sm text-gray-500 mt-1">
|
|
Erstellen Sie einen Compliance-Schulungskurs manuell oder lassen Sie ihn von der KI generieren.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mode Toggle */}
|
|
<div className="flex gap-2 bg-gray-100 p-1 rounded-xl w-fit">
|
|
<button
|
|
onClick={() => setMode('ai')}
|
|
className={`px-6 py-2.5 rounded-lg text-sm font-medium transition-all ${
|
|
mode === 'ai'
|
|
? 'bg-purple-600 text-white shadow-sm'
|
|
: 'text-gray-600 hover:text-gray-800'
|
|
}`}
|
|
>
|
|
<span className="flex items-center gap-2">
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
KI-Generierung
|
|
</span>
|
|
</button>
|
|
<button
|
|
onClick={() => setMode('manual')}
|
|
className={`px-6 py-2.5 rounded-lg text-sm font-medium transition-all ${
|
|
mode === 'manual'
|
|
? 'bg-purple-600 text-white shadow-sm'
|
|
: 'text-gray-600 hover:text-gray-800'
|
|
}`}
|
|
>
|
|
<span className="flex items-center gap-2">
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
|
</svg>
|
|
Manuell erstellen
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Error Message */}
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 rounded-xl p-4 flex items-center gap-3">
|
|
<svg className="w-5 h-5 text-red-600 flex-shrink-0" 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>
|
|
<p className="text-sm text-red-700">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* AI Generation Form */}
|
|
{mode === 'ai' && (
|
|
<div className="bg-white rounded-xl border border-gray-200 p-8 space-y-6">
|
|
<div className="flex items-start gap-3 p-4 bg-purple-50 rounded-xl">
|
|
<svg className="w-5 h-5 text-purple-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
<div>
|
|
<h3 className="font-medium text-purple-800">Kurs aus Training-Modul generieren</h3>
|
|
<p className="text-sm text-purple-600 mt-1">
|
|
Waehlen Sie ein bestehendes Training-Modul aus. Der Academy-Kurs wird automatisch mit den generierten Inhalten und Quizfragen erstellt.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 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>
|
|
) : trainingModules.length === 0 ? (
|
|
<div className="text-center py-8">
|
|
<p className="text-gray-500">Keine Training-Module gefunden.</p>
|
|
<p className="text-sm text-gray-400 mt-1">Bitte erstellen Sie zuerst Module unter Schulung > Module.</p>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">Training-Modul auswaehlen *</label>
|
|
<p className="text-xs text-gray-400 mb-3">Module mit bestehendem Kurs werden beim Generieren uebersprungen oder neu verknuepft.</p>
|
|
<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>
|
|
<div className="flex items-center gap-2">
|
|
{mod.academy_course_id && (
|
|
<span className="text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-700">Kurs vorhanden</span>
|
|
)}
|
|
<span className="text-xs px-2 py-1 rounded-full bg-gray-100 text-gray-600">
|
|
{mod.regulation_area}
|
|
</span>
|
|
</div>
|
|
</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>
|
|
)}
|
|
|
|
{/* Submit */}
|
|
<div className="flex justify-end gap-3 pt-4 border-t border-gray-200">
|
|
<Link
|
|
href="/sdk/academy"
|
|
className="px-6 py-2.5 text-gray-700 hover:bg-gray-100 rounded-xl transition-colors"
|
|
>
|
|
Abbrechen
|
|
</Link>
|
|
<button
|
|
onClick={handleAIGenerate}
|
|
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 ? (
|
|
<>
|
|
<svg className="animate-spin w-4 h-4" 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>
|
|
Kurs wird generiert...
|
|
</>
|
|
) : (
|
|
<>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
Kurs generieren
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Manual Creation Form */}
|
|
{mode === 'manual' && (
|
|
<div className="bg-white rounded-xl border border-gray-200 p-8 space-y-6">
|
|
{/* Title */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">Kurstitel *</label>
|
|
<input
|
|
type="text"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
placeholder="z.B. DSGVO-Grundlagen fuer 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>
|
|
|
|
{/* Description */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">Beschreibung</label>
|
|
<textarea
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
placeholder="Kurze Beschreibung des Kursinhalts..."
|
|
rows={3}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 resize-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* Category */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">Kategorie *</label>
|
|
<select
|
|
value={category}
|
|
onChange={(e) => setCategory(e.target.value as CourseCategory)}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
|
>
|
|
{Object.entries(COURSE_CATEGORY_INFO).map(([cat, info]) => (
|
|
<option key={cat} value={cat}>{info.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Duration & Passing Score */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">Dauer (Minuten)</label>
|
|
<input
|
|
type="number"
|
|
value={duration}
|
|
onChange={(e) => setDuration(parseInt(e.target.value) || 60)}
|
|
min={15}
|
|
max={480}
|
|
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>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">Bestehensgrenze (%)</label>
|
|
<input
|
|
type="number"
|
|
value={passingScore}
|
|
onChange={(e) => setPassingScore(parseInt(e.target.value) || 70)}
|
|
min={0}
|
|
max={100}
|
|
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>
|
|
</div>
|
|
|
|
{/* Submit */}
|
|
<div className="flex justify-end gap-3 pt-4 border-t border-gray-200">
|
|
<Link
|
|
href="/sdk/academy"
|
|
className="px-6 py-2.5 text-gray-700 hover:bg-gray-100 rounded-xl transition-colors"
|
|
>
|
|
Abbrechen
|
|
</Link>
|
|
<button
|
|
onClick={handleManualCreate}
|
|
disabled={isLoading || !title.trim()}
|
|
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 ? (
|
|
<>
|
|
<svg className="animate-spin w-4 h-4" 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>
|
|
Wird erstellt...
|
|
</>
|
|
) : (
|
|
'Kurs erstellen'
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|