c43d9da6d0
# Conflicts: # admin-compliance/lib/sdk/types.ts # admin-compliance/lib/sdk/vendor-compliance/types.ts
781 lines
35 KiB
TypeScript
781 lines
35 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import {
|
|
getModules, getMatrix, getAssignments, getStats, getDeadlines, getModuleMedia,
|
|
getAuditLog, generateContent, generateQuiz,
|
|
publishContent, checkEscalation, getContent,
|
|
generateAllContent, generateAllQuizzes,
|
|
createModule, updateModule, deleteModule,
|
|
deleteMatrixEntry, setMatrixEntry,
|
|
startAssignment, completeAssignment, updateAssignment,
|
|
listBlockConfigs, createBlockConfig, deleteBlockConfig,
|
|
previewBlock, generateBlock, getCanonicalMeta,
|
|
generateInteractiveVideo,
|
|
} from '@/lib/sdk/training/api'
|
|
import type {
|
|
TrainingModule, TrainingAssignment,
|
|
MatrixResponse, TrainingStats, DeadlineInfo, AuditLogEntry, ModuleContent, TrainingMedia,
|
|
TrainingBlockConfig, CanonicalControlMeta, BlockPreview, BlockGenerateResult,
|
|
} from '@/lib/sdk/training/types'
|
|
import {
|
|
REGULATION_LABELS, REGULATION_COLORS, FREQUENCY_LABELS,
|
|
STATUS_LABELS, STATUS_COLORS, ROLE_LABELS, ALL_ROLES, TARGET_AUDIENCE_LABELS,
|
|
} from '@/lib/sdk/training/types'
|
|
import AudioPlayer from '@/components/training/AudioPlayer'
|
|
import VideoPlayer from '@/components/training/VideoPlayer'
|
|
import ScriptPreview from '@/components/training/ScriptPreview'
|
|
type Tab = 'overview' | 'modules' | 'matrix' | 'assignments' | 'content' | 'audit'
|
|
|
|
export default function TrainingPage() {
|
|
const [activeTab, setActiveTab] = useState<Tab>('overview')
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const [stats, setStats] = useState<TrainingStats | null>(null)
|
|
const [modules, setModules] = useState<TrainingModule[]>([])
|
|
const [matrix, setMatrix] = useState<MatrixResponse | null>(null)
|
|
const [assignments, setAssignments] = useState<TrainingAssignment[]>([])
|
|
const [deadlines, setDeadlines] = useState<DeadlineInfo[]>([])
|
|
const [auditLog, setAuditLog] = useState<AuditLogEntry[]>([])
|
|
|
|
const [selectedModuleId, setSelectedModuleId] = useState<string>('')
|
|
const [generatedContent, setGeneratedContent] = useState<ModuleContent | null>(null)
|
|
const [generating, setGenerating] = useState(false)
|
|
const [bulkGenerating, setBulkGenerating] = useState(false)
|
|
const [bulkResult, setBulkResult] = useState<{ generated: number; skipped: number; errors: string[] } | null>(null)
|
|
const [moduleMedia, setModuleMedia] = useState<TrainingMedia[]>([])
|
|
const [interactiveGenerating, setInteractiveGenerating] = useState(false)
|
|
|
|
const [statusFilter, setStatusFilter] = useState<string>('')
|
|
const [regulationFilter, setRegulationFilter] = useState<string>('')
|
|
|
|
// Modal/Drawer states
|
|
const [showModuleCreate, setShowModuleCreate] = useState(false)
|
|
const [selectedModule, setSelectedModule] = useState<TrainingModule | null>(null)
|
|
const [matrixAddRole, setMatrixAddRole] = useState<string | null>(null)
|
|
const [selectedAssignment, setSelectedAssignment] = useState<TrainingAssignment | null>(null)
|
|
const [escalationResult, setEscalationResult] = useState<{ total_checked: number; escalated: number } | null>(null)
|
|
|
|
// Block (Controls → Module) state
|
|
const [blocks, setBlocks] = useState<TrainingBlockConfig[]>([])
|
|
const [canonicalMeta, setCanonicalMeta] = useState<CanonicalControlMeta | null>(null)
|
|
const [showBlockCreate, setShowBlockCreate] = useState(false)
|
|
const [blockPreview, setBlockPreview] = useState<BlockPreview | null>(null)
|
|
const [blockPreviewId, setBlockPreviewId] = useState<string>('')
|
|
const [blockGenerating, setBlockGenerating] = useState(false)
|
|
const [blockResult, setBlockResult] = useState<BlockGenerateResult | null>(null)
|
|
|
|
useEffect(() => {
|
|
loadData()
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (selectedModuleId) {
|
|
loadModuleMedia(selectedModuleId)
|
|
}
|
|
}, [selectedModuleId])
|
|
|
|
async function loadData() {
|
|
setLoading(true)
|
|
setError(null)
|
|
try {
|
|
const [statsRes, modulesRes, matrixRes, assignmentsRes, deadlinesRes, auditRes, blocksRes, metaRes] = await Promise.allSettled([
|
|
getStats(),
|
|
getModules(),
|
|
getMatrix(),
|
|
getAssignments({ limit: 50 }),
|
|
getDeadlines(10),
|
|
getAuditLog({ limit: 30 }),
|
|
listBlockConfigs(),
|
|
getCanonicalMeta(),
|
|
])
|
|
|
|
if (statsRes.status === 'fulfilled') setStats(statsRes.value)
|
|
if (modulesRes.status === 'fulfilled') setModules(modulesRes.value.modules)
|
|
if (matrixRes.status === 'fulfilled') setMatrix(matrixRes.value)
|
|
if (assignmentsRes.status === 'fulfilled') setAssignments(assignmentsRes.value.assignments)
|
|
if (deadlinesRes.status === 'fulfilled') setDeadlines(deadlinesRes.value.deadlines)
|
|
if (auditRes.status === 'fulfilled') setAuditLog(auditRes.value.entries)
|
|
if (blocksRes.status === 'fulfilled') setBlocks(blocksRes.value.blocks)
|
|
if (metaRes.status === 'fulfilled') setCanonicalMeta(metaRes.value)
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Fehler beim Laden')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
async function handleGenerateContent() {
|
|
if (!selectedModuleId) return
|
|
setGenerating(true)
|
|
try {
|
|
const content = await generateContent(selectedModuleId)
|
|
setGeneratedContent(content)
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Fehler bei der Content-Generierung')
|
|
} finally {
|
|
setGenerating(false)
|
|
}
|
|
}
|
|
|
|
async function handleGenerateQuiz() {
|
|
if (!selectedModuleId) return
|
|
setGenerating(true)
|
|
try {
|
|
await generateQuiz(selectedModuleId, 5)
|
|
await loadData()
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Fehler bei der Quiz-Generierung')
|
|
} finally {
|
|
setGenerating(false)
|
|
}
|
|
}
|
|
|
|
async function handleGenerateInteractiveVideo() {
|
|
if (!selectedModuleId) return
|
|
setInteractiveGenerating(true)
|
|
try {
|
|
await generateInteractiveVideo(selectedModuleId)
|
|
await loadModuleMedia(selectedModuleId)
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Fehler bei der interaktiven Video-Generierung')
|
|
} finally {
|
|
setInteractiveGenerating(false)
|
|
}
|
|
}
|
|
|
|
async function handlePublishContent(contentId: string) {
|
|
try {
|
|
await publishContent(contentId)
|
|
setGeneratedContent(null)
|
|
await loadData()
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Fehler beim Veroeffentlichen')
|
|
}
|
|
}
|
|
|
|
async function handleCheckEscalation() {
|
|
try {
|
|
const result = await checkEscalation()
|
|
setEscalationResult({ total_checked: result.total_checked, escalated: result.escalated })
|
|
await loadData()
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Fehler bei der Eskalationspruefung')
|
|
}
|
|
}
|
|
|
|
async function handleDeleteMatrixEntry(roleCode: string, moduleId: string) {
|
|
if (!window.confirm('Modulzuordnung entfernen?')) return
|
|
try {
|
|
await deleteMatrixEntry(roleCode, moduleId)
|
|
await loadData()
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Fehler beim Entfernen')
|
|
}
|
|
}
|
|
|
|
async function handleLoadContent(moduleId: string) {
|
|
try {
|
|
const content = await getContent(moduleId)
|
|
setGeneratedContent(content)
|
|
} catch {
|
|
setGeneratedContent(null)
|
|
}
|
|
}
|
|
|
|
async function handleBulkContent() {
|
|
setBulkGenerating(true)
|
|
setBulkResult(null)
|
|
try {
|
|
const result = await generateAllContent('de')
|
|
setBulkResult({ generated: result.generated ?? 0, skipped: result.skipped ?? 0, errors: result.errors ?? [] })
|
|
await loadData()
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Fehler bei der Bulk-Generierung')
|
|
} finally {
|
|
setBulkGenerating(false)
|
|
}
|
|
}
|
|
|
|
async function loadModuleMedia(moduleId: string) {
|
|
try {
|
|
const result = await getModuleMedia(moduleId)
|
|
setModuleMedia(result.media)
|
|
} catch {
|
|
setModuleMedia([])
|
|
}
|
|
}
|
|
|
|
async function handleBulkQuiz() {
|
|
setBulkGenerating(true)
|
|
setBulkResult(null)
|
|
try {
|
|
const result = await generateAllQuizzes()
|
|
setBulkResult({ generated: result.generated ?? 0, skipped: result.skipped ?? 0, errors: result.errors ?? [] })
|
|
await loadData()
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Fehler bei der Bulk-Quiz-Generierung')
|
|
} finally {
|
|
setBulkGenerating(false)
|
|
}
|
|
}
|
|
|
|
// Block handlers
|
|
async function handleCreateBlock(data: {
|
|
name: string; description?: string; domain_filter?: string; category_filter?: string;
|
|
severity_filter?: string; target_audience_filter?: string; regulation_area: string;
|
|
module_code_prefix: string; max_controls_per_module?: number;
|
|
}) {
|
|
try {
|
|
await createBlockConfig(data)
|
|
setShowBlockCreate(false)
|
|
const res = await listBlockConfigs()
|
|
setBlocks(res.blocks)
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Fehler beim Erstellen')
|
|
}
|
|
}
|
|
|
|
async function handleDeleteBlock(id: string) {
|
|
if (!confirm('Block-Konfiguration wirklich loeschen?')) return
|
|
try {
|
|
await deleteBlockConfig(id)
|
|
const res = await listBlockConfigs()
|
|
setBlocks(res.blocks)
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Fehler beim Loeschen')
|
|
}
|
|
}
|
|
|
|
async function handlePreviewBlock(id: string) {
|
|
setBlockPreviewId(id)
|
|
setBlockPreview(null)
|
|
setBlockResult(null)
|
|
try {
|
|
const preview = await previewBlock(id)
|
|
setBlockPreview(preview)
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Fehler beim Preview')
|
|
}
|
|
}
|
|
|
|
async function handleGenerateBlock(id: string) {
|
|
setBlockGenerating(true)
|
|
setBlockResult(null)
|
|
try {
|
|
const result = await generateBlock(id, { language: 'de', auto_matrix: true })
|
|
setBlockResult(result)
|
|
await loadData()
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Fehler bei der Block-Generierung')
|
|
} finally {
|
|
setBlockGenerating(false)
|
|
}
|
|
}
|
|
|
|
const tabs: { id: Tab; label: string }[] = [
|
|
{ id: 'overview', label: 'Uebersicht' },
|
|
{ id: 'modules', label: 'Modulkatalog' },
|
|
{ id: 'matrix', label: 'Training Matrix' },
|
|
{ id: 'assignments', label: 'Zuweisungen' },
|
|
{ id: 'content', label: 'Content-Generator' },
|
|
{ id: 'audit', label: 'Audit Trail' },
|
|
]
|
|
|
|
const filteredModules = modules.filter(m =>
|
|
(!regulationFilter || m.regulation_area === regulationFilter)
|
|
)
|
|
|
|
const filteredAssignments = assignments.filter(a =>
|
|
(!statusFilter || a.status === statusFilter)
|
|
)
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="p-6">
|
|
<div className="animate-pulse space-y-4">
|
|
<div className="h-8 bg-gray-200 rounded w-1/3"></div>
|
|
<div className="grid grid-cols-4 gap-4">
|
|
{[1,2,3,4].map(i => <div key={i} className="h-24 bg-gray-200 rounded"></div>)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="p-6 space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">Compliance Training Engine</h1>
|
|
<p className="text-sm text-gray-500 mt-1">
|
|
Training-Module, Zuweisungen und Compliance-Schulungen verwalten
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={handleCheckEscalation}
|
|
className="px-4 py-2 text-sm bg-orange-50 text-orange-700 border border-orange-200 rounded-lg hover:bg-orange-100"
|
|
>
|
|
Eskalation pruefen
|
|
</button>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
|
|
{error}
|
|
<button onClick={() => setError(null)} className="ml-2 underline">Schliessen</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Tabs */}
|
|
<div className="border-b border-gray-200">
|
|
<nav className="flex -mb-px space-x-6">
|
|
{tabs.map(tab => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`pb-3 px-1 text-sm font-medium border-b-2 transition-colors ${
|
|
activeTab === tab.id
|
|
? 'border-blue-500 text-blue-600'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Tab Content */}
|
|
{activeTab === 'overview' && stats && (
|
|
<OverviewTab
|
|
stats={stats}
|
|
deadlines={deadlines}
|
|
escalationResult={escalationResult}
|
|
onDismissEscalation={() => setEscalationResult(null)}
|
|
/>
|
|
)}
|
|
|
|
{activeTab === 'modules' && (
|
|
<ModulesTab
|
|
modules={filteredModules}
|
|
regulationFilter={regulationFilter}
|
|
onRegulationFilterChange={setRegulationFilter}
|
|
onCreateClick={() => setShowModuleCreate(true)}
|
|
onModuleClick={setSelectedModule}
|
|
/>
|
|
)}
|
|
|
|
{activeTab === 'matrix' && matrix && (
|
|
<MatrixTab
|
|
matrix={matrix}
|
|
onDeleteEntry={handleDeleteMatrixEntry}
|
|
onAddEntry={setMatrixAddRole}
|
|
/>
|
|
)}
|
|
|
|
{activeTab === 'assignments' && (
|
|
<AssignmentsTab
|
|
assignments={filteredAssignments}
|
|
statusFilter={statusFilter}
|
|
onStatusFilterChange={setStatusFilter}
|
|
onAssignmentClick={setSelectedAssignment}
|
|
/>
|
|
)}
|
|
|
|
{activeTab === 'content' && (
|
|
<div className="space-y-6">
|
|
|
|
{/* Training Blocks — Controls → Schulungsmodule */}
|
|
<div className="bg-white border rounded-lg p-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div>
|
|
<h3 className="text-sm font-medium text-gray-700">Schulungsbloecke aus Controls</h3>
|
|
<p className="text-xs text-gray-500">
|
|
Canonical Controls nach Kriterien filtern und automatisch Schulungsmodule generieren
|
|
{canonicalMeta && <span className="ml-2 text-gray-400">({canonicalMeta.total} Controls verfuegbar)</span>}
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowBlockCreate(true)}
|
|
className="px-3 py-1.5 text-xs bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
|
>
|
|
+ Neuen Block erstellen
|
|
</button>
|
|
</div>
|
|
|
|
{/* Block list */}
|
|
{blocks.length > 0 ? (
|
|
<div className="border rounded-lg overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-3 py-2 text-left font-medium text-gray-600">Name</th>
|
|
<th className="px-3 py-2 text-left font-medium text-gray-600">Domain</th>
|
|
<th className="px-3 py-2 text-left font-medium text-gray-600">Zielgruppe</th>
|
|
<th className="px-3 py-2 text-left font-medium text-gray-600">Severity</th>
|
|
<th className="px-3 py-2 text-left font-medium text-gray-600">Prefix</th>
|
|
<th className="px-3 py-2 text-left font-medium text-gray-600">Letzte Generierung</th>
|
|
<th className="px-3 py-2 text-right font-medium text-gray-600">Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y">
|
|
{blocks.map(block => (
|
|
<tr key={block.id} className="hover:bg-gray-50">
|
|
<td className="px-3 py-2">
|
|
<div className="font-medium text-gray-900">{block.name}</div>
|
|
{block.description && <div className="text-xs text-gray-500">{block.description}</div>}
|
|
</td>
|
|
<td className="px-3 py-2 text-gray-600">{block.domain_filter || 'Alle'}</td>
|
|
<td className="px-3 py-2 text-gray-600">{block.target_audience_filter ? (TARGET_AUDIENCE_LABELS[block.target_audience_filter] || block.target_audience_filter) : 'Alle'}</td>
|
|
<td className="px-3 py-2 text-gray-600">{block.severity_filter || 'Alle'}</td>
|
|
<td className="px-3 py-2"><code className="text-xs bg-gray-100 px-1.5 py-0.5 rounded">{block.module_code_prefix}</code></td>
|
|
<td className="px-3 py-2 text-gray-500 text-xs">{block.last_generated_at ? new Date(block.last_generated_at).toLocaleString('de-DE') : 'Noch nie'}</td>
|
|
<td className="px-3 py-2 text-right">
|
|
<div className="flex gap-1 justify-end">
|
|
<button
|
|
onClick={() => handlePreviewBlock(block.id)}
|
|
className="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200"
|
|
>
|
|
Preview
|
|
</button>
|
|
<button
|
|
onClick={() => handleGenerateBlock(block.id)}
|
|
disabled={blockGenerating}
|
|
className="px-2 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50"
|
|
>
|
|
{blockGenerating ? 'Generiert...' : 'Generieren'}
|
|
</button>
|
|
<button
|
|
onClick={() => handleDeleteBlock(block.id)}
|
|
className="px-2 py-1 text-xs bg-red-100 text-red-700 rounded hover:bg-red-200"
|
|
>
|
|
Loeschen
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-8 text-gray-500 text-sm">
|
|
Noch keine Schulungsbloecke konfiguriert. Erstelle einen Block, um Controls automatisch in Module umzuwandeln.
|
|
</div>
|
|
)}
|
|
|
|
{/* Preview result */}
|
|
{blockPreview && blockPreviewId && (
|
|
<div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
|
<h4 className="text-sm font-medium text-blue-800 mb-2">Preview: {blocks.find(b => b.id === blockPreviewId)?.name}</h4>
|
|
<div className="flex gap-6 text-sm mb-3">
|
|
<span className="text-blue-700">Controls: <strong>{blockPreview.control_count}</strong></span>
|
|
<span className="text-blue-700">Module: <strong>{blockPreview.module_count}</strong></span>
|
|
<span className="text-blue-700">Rollen: <strong>{blockPreview.proposed_roles.map(r => ROLE_LABELS[r] || r).join(', ')}</strong></span>
|
|
</div>
|
|
{blockPreview.controls.length > 0 && (
|
|
<details className="text-xs">
|
|
<summary className="cursor-pointer text-blue-600 hover:text-blue-800">Passende Controls anzeigen ({blockPreview.control_count})</summary>
|
|
<div className="mt-2 max-h-48 overflow-y-auto">
|
|
{blockPreview.controls.slice(0, 50).map(ctrl => (
|
|
<div key={ctrl.control_id} className="flex gap-2 py-1 border-b border-blue-100">
|
|
<code className="text-xs bg-blue-100 px-1 rounded shrink-0">{ctrl.control_id}</code>
|
|
<span className="text-gray-700 truncate">{ctrl.title}</span>
|
|
<span className={`text-xs px-1.5 rounded shrink-0 ${ctrl.severity === 'critical' ? 'bg-red-100 text-red-700' : ctrl.severity === 'high' ? 'bg-orange-100 text-orange-700' : 'bg-gray-100 text-gray-600'}`}>{ctrl.severity}</span>
|
|
</div>
|
|
))}
|
|
{blockPreview.control_count > 50 && <div className="text-gray-500 py-1">... und {blockPreview.control_count - 50} weitere</div>}
|
|
</div>
|
|
</details>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Generate result */}
|
|
{blockResult && (
|
|
<div className="mt-4 p-4 bg-green-50 border border-green-200 rounded-lg">
|
|
<h4 className="text-sm font-medium text-green-800 mb-2">Generierung abgeschlossen</h4>
|
|
<div className="flex gap-6 text-sm">
|
|
<span className="text-green-700">Module erstellt: <strong>{blockResult.modules_created}</strong></span>
|
|
<span className="text-green-700">Controls verknuepft: <strong>{blockResult.controls_linked}</strong></span>
|
|
<span className="text-green-700">Matrix-Eintraege: <strong>{blockResult.matrix_entries_created}</strong></span>
|
|
<span className="text-green-700">Content generiert: <strong>{blockResult.content_generated}</strong></span>
|
|
</div>
|
|
{blockResult.errors && blockResult.errors.length > 0 && (
|
|
<div className="mt-2 text-xs text-red-600">
|
|
{blockResult.errors.map((err, i) => <div key={i}>{err}</div>)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Block Create Modal */}
|
|
{showBlockCreate && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
|
|
<div className="bg-white rounded-xl shadow-xl w-full max-w-lg p-6">
|
|
<h3 className="text-lg font-semibold mb-4">Neuen Schulungsblock erstellen</h3>
|
|
<form onSubmit={e => {
|
|
e.preventDefault()
|
|
const fd = new FormData(e.currentTarget)
|
|
handleCreateBlock({
|
|
name: fd.get('name') as string,
|
|
description: fd.get('description') as string || undefined,
|
|
domain_filter: fd.get('domain_filter') as string || undefined,
|
|
category_filter: fd.get('category_filter') as string || undefined,
|
|
severity_filter: fd.get('severity_filter') as string || undefined,
|
|
target_audience_filter: fd.get('target_audience_filter') as string || undefined,
|
|
regulation_area: fd.get('regulation_area') as string,
|
|
module_code_prefix: fd.get('module_code_prefix') as string,
|
|
max_controls_per_module: parseInt(fd.get('max_controls_per_module') as string) || 20,
|
|
})
|
|
}} className="space-y-3">
|
|
<div>
|
|
<label className="text-xs text-gray-600 block mb-1">Name *</label>
|
|
<input name="name" required className="w-full px-3 py-2 text-sm border rounded-lg" placeholder="z.B. Authentifizierung fuer Geschaeftsfuehrung" />
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-gray-600 block mb-1">Beschreibung</label>
|
|
<textarea name="description" className="w-full px-3 py-2 text-sm border rounded-lg" rows={2} />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="text-xs text-gray-600 block mb-1">Domain-Filter</label>
|
|
<select name="domain_filter" className="w-full px-3 py-2 text-sm border rounded-lg bg-white">
|
|
<option value="">Alle Domains</option>
|
|
{canonicalMeta?.domains.map(d => (
|
|
<option key={d.domain} value={d.domain}>{d.domain} ({d.count})</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-gray-600 block mb-1">Kategorie-Filter</label>
|
|
<select name="category_filter" className="w-full px-3 py-2 text-sm border rounded-lg bg-white">
|
|
<option value="">Alle Kategorien</option>
|
|
{canonicalMeta?.categories.filter(c => c.category !== 'uncategorized').map(c => (
|
|
<option key={c.category} value={c.category}>{c.category} ({c.count})</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="text-xs text-gray-600 block mb-1">Zielgruppe</label>
|
|
<select name="target_audience_filter" className="w-full px-3 py-2 text-sm border rounded-lg bg-white">
|
|
<option value="">Alle Zielgruppen</option>
|
|
{canonicalMeta?.audiences.filter(a => a.audience !== 'unset').map(a => (
|
|
<option key={a.audience} value={a.audience}>{TARGET_AUDIENCE_LABELS[a.audience] || a.audience} ({a.count})</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-gray-600 block mb-1">Severity</label>
|
|
<select name="severity_filter" className="w-full px-3 py-2 text-sm border rounded-lg bg-white">
|
|
<option value="">Alle</option>
|
|
<option value="critical">Critical</option>
|
|
<option value="high">High</option>
|
|
<option value="medium">Medium</option>
|
|
<option value="low">Low</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="text-xs text-gray-600 block mb-1">Regulierungsbereich *</label>
|
|
<select name="regulation_area" required className="w-full px-3 py-2 text-sm border rounded-lg bg-white">
|
|
{Object.entries(REGULATION_LABELS).map(([k, v]) => (
|
|
<option key={k} value={k}>{v}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-gray-600 block mb-1">Modul-Code-Prefix *</label>
|
|
<input name="module_code_prefix" required className="w-full px-3 py-2 text-sm border rounded-lg" placeholder="z.B. CB-AUTH" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-gray-600 block mb-1">Max. Controls pro Modul</label>
|
|
<input name="max_controls_per_module" type="number" defaultValue={20} min={1} max={50} className="w-full px-3 py-2 text-sm border rounded-lg" />
|
|
</div>
|
|
<div className="flex gap-3 pt-2">
|
|
<button type="submit" className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700">Erstellen</button>
|
|
<button type="button" onClick={() => setShowBlockCreate(false)} className="px-4 py-2 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">Abbrechen</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Bulk Generation */}
|
|
<div className="bg-white border rounded-lg p-4">
|
|
<h3 className="text-sm font-medium text-gray-700 mb-3">Bulk-Generierung</h3>
|
|
<p className="text-xs text-gray-500 mb-4">Generiere Inhalte und Quiz-Fragen fuer alle Module auf einmal</p>
|
|
<div className="flex gap-3">
|
|
<button
|
|
onClick={handleBulkContent}
|
|
disabled={bulkGenerating}
|
|
className="px-4 py-2 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50"
|
|
>
|
|
{bulkGenerating ? 'Generiere...' : 'Alle Inhalte generieren'}
|
|
</button>
|
|
<button
|
|
onClick={handleBulkQuiz}
|
|
disabled={bulkGenerating}
|
|
className="px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50"
|
|
>
|
|
{bulkGenerating ? 'Generiere...' : 'Alle Quizfragen generieren'}
|
|
</button>
|
|
</div>
|
|
{bulkResult && (
|
|
<div className="mt-4 p-3 bg-gray-50 rounded-lg text-sm">
|
|
<div className="flex gap-6">
|
|
<span className="text-green-700">Generiert: {bulkResult.generated}</span>
|
|
<span className="text-gray-500">Uebersprungen: {bulkResult.skipped}</span>
|
|
{bulkResult.errors?.length > 0 && (
|
|
<span className="text-red-600">Fehler: {bulkResult.errors.length}</span>
|
|
)}
|
|
</div>
|
|
{bulkResult.errors?.length > 0 && (
|
|
<div className="mt-2 text-xs text-red-600">
|
|
{bulkResult.errors.map((err, i) => <div key={i}>{err}</div>)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="bg-white border rounded-lg p-4">
|
|
<h3 className="text-sm font-medium text-gray-700 mb-3">LLM-Content-Generator</h3>
|
|
<p className="text-xs text-gray-500 mb-4">Generiere Schulungsinhalte und Quiz-Fragen automatisch via KI</p>
|
|
<div className="flex gap-3 items-end">
|
|
<div className="flex-1">
|
|
<label className="text-xs text-gray-600 block mb-1">Modul auswaehlen</label>
|
|
<select
|
|
value={selectedModuleId}
|
|
onChange={e => { setSelectedModuleId(e.target.value); setGeneratedContent(null); setModuleMedia([]); if (e.target.value) { handleLoadContent(e.target.value); loadModuleMedia(e.target.value); } }}
|
|
className="w-full px-3 py-2 text-sm border rounded-lg bg-white"
|
|
>
|
|
<option value="">Modul waehlen...</option>
|
|
{modules.map(m => <option key={m.id} value={m.id}>{m.module_code} - {m.title}</option>)}
|
|
</select>
|
|
</div>
|
|
<button onClick={handleGenerateContent} disabled={!selectedModuleId || generating} className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50">
|
|
{generating ? 'Generiere...' : 'Inhalt generieren'}
|
|
</button>
|
|
<button onClick={handleGenerateQuiz} disabled={!selectedModuleId || generating} className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50">
|
|
{generating ? 'Generiere...' : 'Quiz generieren'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{generatedContent && (
|
|
<div className="bg-white border rounded-lg p-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div>
|
|
<h3 className="text-sm font-medium text-gray-700">Generierter Inhalt (v{generatedContent.version})</h3>
|
|
<p className="text-xs text-gray-500">Generiert von: {generatedContent.generated_by} ({generatedContent.llm_model})</p>
|
|
</div>
|
|
{!generatedContent.is_published ? (
|
|
<button onClick={() => handlePublishContent(generatedContent.id)} className="px-3 py-1.5 text-xs bg-green-600 text-white rounded hover:bg-green-700">Veroeffentlichen</button>
|
|
) : (
|
|
<span className="px-3 py-1.5 text-xs bg-green-100 text-green-700 rounded">Veroeffentlicht</span>
|
|
)}
|
|
</div>
|
|
<div className="prose prose-sm max-w-none border rounded p-4 bg-gray-50 max-h-96 overflow-y-auto">
|
|
<pre className="whitespace-pre-wrap text-sm text-gray-800">{generatedContent.content_body}</pre>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Audio Player */}
|
|
{selectedModuleId && generatedContent?.is_published && (
|
|
<AudioPlayer
|
|
moduleId={selectedModuleId}
|
|
audio={moduleMedia.find(m => m.media_type === 'audio') || null}
|
|
onMediaUpdate={() => loadModuleMedia(selectedModuleId)}
|
|
/>
|
|
)}
|
|
|
|
{/* Video Player */}
|
|
{selectedModuleId && generatedContent?.is_published && (
|
|
<VideoPlayer
|
|
moduleId={selectedModuleId}
|
|
video={moduleMedia.find(m => m.media_type === 'video') || null}
|
|
onMediaUpdate={() => loadModuleMedia(selectedModuleId)}
|
|
/>
|
|
)}
|
|
|
|
{/* Interactive Video */}
|
|
{selectedModuleId && generatedContent?.is_published && (
|
|
<div className="bg-white border rounded-lg p-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div>
|
|
<h3 className="text-sm font-medium text-gray-700">Interaktives Video</h3>
|
|
<p className="text-xs text-gray-500">Video mit Narrator-Persona und Checkpoint-Quizzes</p>
|
|
</div>
|
|
{moduleMedia.some(m => m.media_type === 'interactive_video' && m.status === 'completed') ? (
|
|
<span className="px-3 py-1.5 text-xs bg-purple-100 text-purple-700 rounded-full">Interaktiv erstellt</span>
|
|
) : (
|
|
<button
|
|
onClick={handleGenerateInteractiveVideo}
|
|
disabled={interactiveGenerating}
|
|
className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
|
>
|
|
{interactiveGenerating ? 'Generiere interaktives Video...' : 'Interaktives Video generieren'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
{moduleMedia.filter(m => m.media_type === 'interactive_video' && m.status === 'completed').map(m => (
|
|
<div key={m.id} className="text-xs text-gray-500 space-y-1 bg-gray-50 rounded p-3">
|
|
<p>Dauer: {Math.round(m.duration_seconds / 60)} Min | Groesse: {(m.file_size_bytes / 1024 / 1024).toFixed(1)} MB</p>
|
|
<p>Generiert: {new Date(m.created_at).toLocaleString('de-DE')}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Script Preview */}
|
|
{selectedModuleId && generatedContent?.is_published && (
|
|
<ScriptPreview moduleId={selectedModuleId} />
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'audit' && <AuditTab auditLog={auditLog} />}
|
|
|
|
{/* Modals & Drawers */}
|
|
{showModuleCreate && (
|
|
<ModuleCreateModal
|
|
onClose={() => setShowModuleCreate(false)}
|
|
onSaved={() => { setShowModuleCreate(false); loadData() }}
|
|
/>
|
|
)}
|
|
{selectedModule && (
|
|
<ModuleEditDrawer
|
|
module={selectedModule}
|
|
onClose={() => setSelectedModule(null)}
|
|
onSaved={() => { setSelectedModule(null); loadData() }}
|
|
/>
|
|
)}
|
|
{matrixAddRole && (
|
|
<MatrixAddModal
|
|
roleCode={matrixAddRole}
|
|
modules={modules}
|
|
onClose={() => setMatrixAddRole(null)}
|
|
onSaved={() => { setMatrixAddRole(null); loadData() }}
|
|
/>
|
|
)}
|
|
{selectedAssignment && (
|
|
<AssignmentDetailDrawer
|
|
assignment={selectedAssignment}
|
|
onClose={() => setSelectedAssignment(null)}
|
|
onSaved={() => { setSelectedAssignment(null); loadData() }}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|