Benjamin_Boenisch/breakpilot-compliance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Academy & Training Module auf 100% — vollständige Implementierung
All checks were successful
CI / go-lint (push) Has been skipped
Details
CI / python-lint (push) Has been skipped
Details
CI / nodejs-lint (push) Has been skipped
Details
CI / test-go-ai-compliance (push) Successful in 38s
Details
CI / test-python-backend-compliance (push) Successful in 36s
Details
CI / test-python-document-crawler (push) Successful in 22s
Details
CI / test-python-dsms-gateway (push) Successful in 19s
Details

Browse Source 
Paket A — Type Fixes:
- Course Interface: passingScore, isActive, status ergänzt
- BackendCourse: passing_score, status Mapping
- CourseUpdateRequest: passingScore, status ergänzt
- fetchAcademyStatistics: by_category/by_status Felder gemappt

Paket B — Academy Zertifikate-Tab:
- fetchCertificates() API Funktion
- Vollständiger Tab: Stats (Gesamt/Gültig/Abgelaufen), Suche, Tabelle mit Status-Badges, PDF-Download

Paket C — Academy Enrollment + Course Edit + Settings:
- deleteEnrollment(), updateEnrollment() API
- EnrollmentCard: Abschließen/Bearbeiten/Löschen Buttons
- EnrollmentEditModal: Deadline bearbeiten
- CourseCard: Stift-Icon (group-hover) → CourseEditModal
- CourseEditModal: Titel/Beschreibung/Kategorie/Dauer/Bestehensgrenze/Status
- SettingsTab: localStorage-basiert mit Toggles und Zahlen-Inputs + grüne Bestätigung

Paket D — Training Modul-CRUD:
- deleteModule() API Funktion
- "+ Neues Modul" Button im Modules Tab Header
- ModuleCreateModal: module_code, title, description, regulation_area, frequency_type, duration, pass_threshold
- ModuleEditDrawer (Right-Slide): Edit + Aktiv-Toggle + Löschen

Paket E — Training Matrix-Editor:
- Matrix-Tabelle interaktiv: × Button je Badge zum Entfernen
- "+ Hinzufügen" Button je Rolle
- MatrixAddModal: Modul wählen, Pflicht-Toggle, Priorität

Paket F — Training Assignments + UX-Fixes:
- updateAssignment() API Funktion
- AssignmentDetailDrawer (Right-Slide): Details, Status-Aktionen, Deadline-Edit
- handleCheckEscalation: alert() → escalationResult State + blauer Banner (schließbar)
- Media auto-sync useEffect: selectedModuleId → loadModuleMedia

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-03-03 14:24:13 +01:00
parent 232997deb6
commit d4845adea7
5 changed files with 1203 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

542
admin-compliance/app/(sdk)/sdk/training/page.tsx
View File

@@ -6,10 +6,13 @@ import {
getAuditLog, generateContent, generateQuiz,
publishContent, checkEscalation, getContent,
generateAllContent, generateAllQuizzes,
createModule, updateModule, deleteModule,
deleteMatrixEntry, setMatrixEntry,
startAssignment, completeAssignment, updateAssignment,
} from '@/lib/sdk/training/api'
import type {
TrainingModule, TrainingAssignment,
MatrixResponse, TrainingStats, DeadlineInfo, AuditLogEntry, ModuleContent, TrainingMedia, VideoScript,
MatrixResponse, TrainingStats, DeadlineInfo, AuditLogEntry, ModuleContent, TrainingMedia,
} from '@/lib/sdk/training/types'
import {
REGULATION_LABELS, REGULATION_COLORS, FREQUENCY_LABELS,
@@ -42,10 +45,23 @@ export default function TrainingPage() {
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)
useEffect(() => {
loadData()
}, [])
useEffect(() => {
if (selectedModuleId) {
loadModuleMedia(selectedModuleId)
}
}, [selectedModuleId])
async function loadData() {
setLoading(true)
setError(null)
@@ -111,13 +127,23 @@ export default function TrainingPage() {
async function handleCheckEscalation() {
try {
const result = await checkEscalation()
alert(`Eskalation geprueft: ${result.total_checked} geprueft, ${result.escalated} eskaliert`)
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)
@@ -241,6 +267,17 @@ export default function TrainingPage() {
{/* Tab Content */}
{activeTab === 'overview' && stats && (
<div className="space-y-6">
{escalationResult && (
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-center justify-between">
<div>
<span className="font-medium text-blue-900">Eskalation abgeschlossen: </span>
<span className="text-blue-700">
{escalationResult.total_checked} Zuweisungen geprueft, {escalationResult.escalated} eskaliert
</span>
</div>
<button onClick={() => setEscalationResult(null)} className="text-blue-400 hover:text-blue-600 text-lg font-bold">×</button>
</div>
)}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<KPICard label="Module" value={stats.total_modules} />
<KPICard label="Zuweisungen" value={stats.total_assignments} />
@@ -302,18 +339,28 @@ export default function TrainingPage() {
{activeTab === 'modules' && (
<div className="space-y-4">
<div className="flex gap-3">
<div className="flex gap-3 items-center">
<select value={regulationFilter} onChange={e => setRegulationFilter(e.target.value)} className="px-3 py-1.5 text-sm border rounded-lg bg-white">
<option value="">Alle Bereiche</option>
{Object.entries(REGULATION_LABELS).map(([key, label]) => (
<option key={key} value={key}>{label}</option>
))}
</select>
<button
onClick={() => setShowModuleCreate(true)}
className="ml-auto px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors"
>
+ Neues Modul
</button>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{filteredModules.map(m => (
<div key={m.id} className="bg-white border rounded-lg p-4 hover:shadow-sm transition-shadow">
<div
key={m.id}
onClick={() => setSelectedModule(m)}
className="bg-white border rounded-lg p-4 hover:shadow-md cursor-pointer transition-shadow"
>
<div className="flex items-start justify-between">
<div>
<span className={`inline-block px-2 py-0.5 rounded text-xs font-medium ${REGULATION_COLORS[m.regulation_area]?.bg || 'bg-gray-100'} ${REGULATION_COLORS[m.regulation_area]?.text || 'text-gray-700'}`}>
@@ -322,9 +369,14 @@ export default function TrainingPage() {
<h3 className="mt-2 font-medium text-gray-900">{m.title}</h3>
<p className="text-xs text-gray-500 mt-0.5">{m.module_code}</p>
</div>
{m.nis2_relevant && (
<span className="text-xs px-1.5 py-0.5 bg-purple-100 text-purple-700 rounded">NIS2</span>
)}
<div className="flex flex-col items-end gap-1">
{m.nis2_relevant && (
<span className="text-xs px-1.5 py-0.5 bg-purple-100 text-purple-700 rounded">NIS2</span>
)}
{!m.is_active && (
<span className="text-xs px-1.5 py-0.5 bg-gray-100 text-gray-500 rounded">Inaktiv</span>
)}
</div>
</div>
{m.description && <p className="text-sm text-gray-600 mt-2 line-clamp-2">{m.description}</p>}
<div className="flex items-center gap-3 mt-3 text-xs text-gray-500">
@@ -361,13 +413,28 @@ export default function TrainingPage() {
<span className="text-gray-500 ml-1 text-xs">{ROLE_LABELS[role]}</span>
</td>
<td className="p-2 border">
<div className="flex flex-wrap gap-1">
<div className="flex flex-wrap gap-2 items-center">
{entries.map(e => (
<span key={e.id || e.module_id} className={`inline-block px-2 py-0.5 rounded text-xs ${e.is_mandatory ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-600'}`} title={`${e.module_title} (${e.is_mandatory ? 'Pflicht' : 'Optional'})`}>
{e.module_code}
<span
key={e.id || e.module_id}
className={`inline-flex items-center gap-1 px-2 py-1 text-xs rounded-full ${e.is_mandatory ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-600'}`}
title={`${e.module_title} (${e.is_mandatory ? 'Pflicht' : 'Optional'})`}
>
{e.is_mandatory ? '🔴' : '🔵'} {e.module_code}
<button
onClick={() => handleDeleteMatrixEntry(role, e.module_id)}
className="ml-1 text-gray-400 hover:text-red-500 font-bold leading-none"
title="Zuordnung entfernen"
>×</button>
</span>
))}
{entries.length === 0 && <span className="text-gray-400 text-xs">Keine Module</span>}
<button
onClick={() => setMatrixAddRole(role)}
className="px-2 py-1 text-xs text-blue-600 border border-blue-300 rounded-full hover:bg-blue-50 transition-colors"
>
+ Hinzufuegen
</button>
</div>
</td>
<td className="p-2 border text-center">{entries.length}</td>
@@ -407,7 +474,11 @@ export default function TrainingPage() {
</thead>
<tbody>
{filteredAssignments.map(a => (
<tr key={a.id} className="border-b hover:bg-gray-50">
<tr
key={a.id}
onClick={() => setSelectedAssignment(a)}
className="border-b hover:bg-gray-50 cursor-pointer"
>
<td className="p-2 border">
<div className="font-medium">{a.module_title || a.module_code}</div>
<div className="text-xs text-gray-500">{a.module_code}</div>
@@ -583,6 +654,455 @@ export default function TrainingPage() {
{auditLog.length === 0 && <p className="text-center text-gray-500 py-8">Keine Audit-Eintraege</p>}
</div>
)}
{/* 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>
)
}
// =============================================================================
// MODULE CREATE MODAL
// =============================================================================
function ModuleCreateModal({ onClose, onSaved }: { onClose: () => void; onSaved: () => void }) {
const [moduleCode, setModuleCode] = useState('')
const [title, setTitle] = useState('')
const [description, setDescription] = useState('')
const [regulationArea, setRegulationArea] = useState('dsgvo')
const [frequencyType, setFrequencyType] = useState('annual')
const [durationMinutes, setDurationMinutes] = useState(45)
const [passThreshold, setPassThreshold] = useState(70)
const [saving, setSaving] = useState(false)
const [error, setError] = useState<string | null>(null)
const handleSave = async () => {
if (!moduleCode || !title) return
setSaving(true)
setError(null)
try {
await createModule({ module_code: moduleCode, title, description, regulation_area: regulationArea, frequency_type: frequencyType, duration_minutes: durationMinutes, pass_threshold: passThreshold })
onSaved()
} catch (e) {
setError(e instanceof Error ? e.message : 'Fehler beim Erstellen')
} finally {
setSaving(false)
}
}
return (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-xl shadow-xl w-full max-w-lg">
<div className="flex items-center justify-between p-6 border-b border-gray-200">
<h2 className="text-lg font-semibold text-gray-900">Neues Trainingsmodul</h2>
<button onClick={onClose} className="text-gray-400 hover:text-gray-600">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div className="p-6 space-y-4">
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Modul-Code *</label>
<input type="text" value={moduleCode} onChange={e => setModuleCode(e.target.value.toUpperCase())} placeholder="DSGVO-BASICS" className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Regelungsbereich</label>
<select value={regulationArea} onChange={e => setRegulationArea(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
{Object.entries(REGULATION_LABELS).map(([k, l]) => <option key={k} value={k}>{l}</option>)}
</select>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
<input type="text" value={title} onChange={e => setTitle(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
<textarea value={description} onChange={e => setDescription(e.target.value)} rows={2} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
</div>
<div className="grid grid-cols-3 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Frequenz</label>
<select value={frequencyType} onChange={e => setFrequencyType(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
{Object.entries(FREQUENCY_LABELS).map(([k, l]) => <option key={k} value={k}>{l}</option>)}
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Dauer (Min.)</label>
<input type="number" min={1} value={durationMinutes} onChange={e => setDurationMinutes(Number(e.target.value))} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Bestehensgrenze (%)</label>
<input type="number" min={0} max={100} value={passThreshold} onChange={e => setPassThreshold(Number(e.target.value))} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
</div>
</div>
{error && <p className="text-sm text-red-600">{error}</p>}
</div>
<div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200">
<button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">Abbrechen</button>
<button onClick={handleSave} disabled={saving || !moduleCode || !title} className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors">
{saving ? 'Erstelle...' : 'Modul erstellen'}
</button>
</div>
</div>
</div>
)
}
// =============================================================================
// MODULE EDIT DRAWER
// =============================================================================
function ModuleEditDrawer({ module, onClose, onSaved }: { module: TrainingModule; onClose: () => void; onSaved: () => void }) {
const [title, setTitle] = useState(module.title)
const [description, setDescription] = useState(module.description || '')
const [durationMinutes, setDurationMinutes] = useState(module.duration_minutes)
const [passThreshold, setPassThreshold] = useState(module.pass_threshold)
const [isActive, setIsActive] = useState(module.is_active)
const [saving, setSaving] = useState(false)
const [deleting, setDeleting] = useState(false)
const [error, setError] = useState<string | null>(null)
const handleSave = async () => {
setSaving(true)
setError(null)
try {
await updateModule(module.id, { title, description, duration_minutes: durationMinutes, pass_threshold: passThreshold, is_active: isActive })
onSaved()
} catch (e) {
setError(e instanceof Error ? e.message : 'Fehler beim Speichern')
} finally {
setSaving(false)
}
}
const handleDelete = async () => {
if (!window.confirm(`Modul "${module.title}" wirklich loeschen?`)) return
setDeleting(true)
try {
await deleteModule(module.id)
onSaved()
} catch (e) {
setError(e instanceof Error ? e.message : 'Fehler beim Loeschen')
setDeleting(false)
}
}
return (
<div className="fixed inset-0 bg-black/50 z-50 flex items-start justify-end">
<div className="h-full w-full max-w-lg bg-white shadow-xl flex flex-col">
<div className="flex items-center justify-between p-6 border-b border-gray-200">
<div>
<div className="flex items-center gap-2">
<span className={`px-2 py-0.5 rounded text-xs font-medium ${REGULATION_COLORS[module.regulation_area]?.bg || 'bg-gray-100'} ${REGULATION_COLORS[module.regulation_area]?.text || 'text-gray-700'}`}>
{REGULATION_LABELS[module.regulation_area] || module.regulation_area}
</span>
{module.nis2_relevant && <span className="text-xs px-1.5 py-0.5 bg-purple-100 text-purple-700 rounded">NIS2</span>}
</div>
<h2 className="text-lg font-semibold text-gray-900 mt-1">{module.module_code}</h2>
</div>
<button onClick={onClose} className="text-gray-400 hover:text-gray-600">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div className="flex-1 overflow-y-auto p-6 space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Titel</label>
<input type="text" value={title} onChange={e => setTitle(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
<textarea value={description} onChange={e => setDescription(e.target.value)} rows={3} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Dauer (Minuten)</label>
<input type="number" min={1} value={durationMinutes} onChange={e => setDurationMinutes(Number(e.target.value))} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Bestehensgrenze (%)</label>
<input type="number" min={0} max={100} value={passThreshold} onChange={e => setPassThreshold(Number(e.target.value))} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
</div>
</div>
<div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
<span className="text-sm font-medium text-gray-700">Modul aktiv</span>
<button
onClick={() => setIsActive(!isActive)}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${isActive ? 'bg-blue-600' : 'bg-gray-200'}`}
>
<span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${isActive ? 'translate-x-6' : 'translate-x-1'}`} />
</button>
</div>
{error && <p className="text-sm text-red-600">{error}</p>}
</div>
<div className="p-6 border-t border-gray-200 space-y-3">
<button onClick={handleSave} disabled={saving} className="w-full px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors">
{saving ? 'Speichern...' : 'Aenderungen speichern'}
</button>
<button onClick={handleDelete} disabled={deleting} className="w-full px-4 py-2 text-sm bg-red-50 text-red-600 border border-red-200 rounded-lg hover:bg-red-100 disabled:opacity-50 transition-colors">
{deleting ? 'Loeschen...' : 'Modul loeschen'}
</button>
</div>
</div>
</div>
)
}
// =============================================================================
// MATRIX ADD MODAL
// =============================================================================
function MatrixAddModal({ roleCode, modules, onClose, onSaved }: {
roleCode: string
modules: TrainingModule[]
onClose: () => void
onSaved: () => void
}) {
const activeModules = modules.filter(m => m.is_active).sort((a, b) => a.module_code.localeCompare(b.module_code))
const [moduleId, setModuleId] = useState(activeModules[0]?.id || '')
const [isMandatory, setIsMandatory] = useState(true)
const [priority, setPriority] = useState(1)
const [saving, setSaving] = useState(false)
const [error, setError] = useState<string | null>(null)
const handleSave = async () => {
if (!moduleId) return
setSaving(true)
setError(null)
try {
await setMatrixEntry({ role_code: roleCode, module_id: moduleId, is_mandatory: isMandatory, priority })
onSaved()
} catch (e) {
setError(e instanceof Error ? e.message : 'Fehler beim Hinzufuegen')
} finally {
setSaving(false)
}
}
return (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-xl shadow-xl w-full max-w-md">
<div className="flex items-center justify-between p-6 border-b border-gray-200">
<h2 className="text-lg font-semibold text-gray-900">Modul zu Rolle hinzufuegen</h2>
<button onClick={onClose} className="text-gray-400 hover:text-gray-600">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div className="p-6 space-y-4">
<p className="text-sm text-gray-500">Rolle: <span className="font-medium text-gray-900">{roleCode}</span></p>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Modul</label>
<select value={moduleId} onChange={e => setModuleId(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
{activeModules.map(m => <option key={m.id} value={m.id}>{m.module_code} — {m.title}</option>)}
</select>
</div>
<div className="flex items-center justify-between">
<label className="text-sm font-medium text-gray-700">Pflichtmodul</label>
<button onClick={() => setIsMandatory(!isMandatory)} className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${isMandatory ? 'bg-blue-600' : 'bg-gray-200'}`}>
<span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${isMandatory ? 'translate-x-6' : 'translate-x-1'}`} />
</button>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Prioritaet</label>
<input type="number" min={1} value={priority} onChange={e => setPriority(Number(e.target.value))} className="w-24 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
</div>
{error && <p className="text-sm text-red-600">{error}</p>}
</div>
<div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200">
<button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">Abbrechen</button>
<button onClick={handleSave} disabled={saving || !moduleId} className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors">
{saving ? 'Hinzufuegen...' : 'Hinzufuegen'}
</button>
</div>
</div>
</div>
)
}
// =============================================================================
// ASSIGNMENT DETAIL DRAWER
// =============================================================================
function AssignmentDetailDrawer({ assignment, onClose, onSaved }: {
assignment: TrainingAssignment
onClose: () => void
onSaved: () => void
}) {
const [deadline, setDeadline] = useState(assignment.deadline ? assignment.deadline.split('T')[0] : '')
const [savingDeadline, setSavingDeadline] = useState(false)
const [actionLoading, setActionLoading] = useState(false)
const [error, setError] = useState<string | null>(null)
const handleAction = async (action: () => Promise<unknown>) => {
setActionLoading(true)
setError(null)
try {
await action()
onSaved()
} catch (e) {
setError(e instanceof Error ? e.message : 'Fehler')
setActionLoading(false)
}
}
const handleSaveDeadline = async () => {
setSavingDeadline(true)
setError(null)
try {
await updateAssignment(assignment.id, { deadline: new Date(deadline).toISOString() })
onSaved()
} catch (e) {
setError(e instanceof Error ? e.message : 'Fehler beim Speichern')
setSavingDeadline(false)
}
}
const statusActions: Record<string, { label: string; action: () => Promise<unknown> } | null> = {
pending: { label: 'Starten', action: () => startAssignment(assignment.id) },
in_progress: { label: 'Als abgeschlossen markieren', action: () => completeAssignment(assignment.id) },
overdue: { label: 'Als erledigt markieren', action: () => completeAssignment(assignment.id) },
completed: null,
expired: null,
}
const currentAction = statusActions[assignment.status] || null
return (
<div className="fixed inset-0 bg-black/50 z-50 flex items-start justify-end">
<div className="h-full w-full max-w-lg bg-white shadow-xl flex flex-col">
<div className="flex items-center justify-between p-6 border-b border-gray-200">
<div>
<h2 className="text-lg font-semibold text-gray-900">{assignment.module_title || assignment.module_code}</h2>
<p className="text-sm text-gray-500 mt-0.5">{assignment.module_code}</p>
</div>
<button onClick={onClose} className="text-gray-400 hover:text-gray-600">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div className="flex-1 overflow-y-auto p-6 space-y-5">
{/* Employee */}
<div className="bg-gray-50 rounded-lg p-4">
<div className="font-medium text-gray-900">{assignment.user_name}</div>
<div className="text-sm text-gray-500">{assignment.user_email}</div>
{assignment.role_code && <div className="text-xs text-gray-400 mt-1">Rolle: {assignment.role_code}</div>}
</div>
{/* Timestamps */}
<div className="space-y-1 text-sm">
<div className="flex justify-between"><span className="text-gray-500">Erstellt:</span><span>{new Date(assignment.created_at).toLocaleString('de-DE')}</span></div>
{assignment.started_at && <div className="flex justify-between"><span className="text-gray-500">Gestartet:</span><span>{new Date(assignment.started_at).toLocaleString('de-DE')}</span></div>}
{assignment.completed_at && <div className="flex justify-between"><span className="text-gray-500">Abgeschlossen:</span><span className="text-green-600">{new Date(assignment.completed_at).toLocaleString('de-DE')}</span></div>}
</div>
{/* Progress */}
<div>
<div className="flex justify-between text-sm mb-1">
<span className="text-gray-500">Fortschritt</span>
<span className="font-medium">{assignment.progress_percent}%</span>
</div>
<div className="w-full h-3 bg-gray-200 rounded-full overflow-hidden">
<div className="bg-blue-500 h-full rounded-full transition-all" style={{ width: `${assignment.progress_percent}%` }} />
</div>
</div>
{/* Quiz Score */}
<div className="flex items-center justify-between">
<span className="text-sm text-gray-500">Quiz-Score</span>
{assignment.quiz_score != null ? (
<span className={`px-2 py-1 rounded text-sm font-medium ${assignment.quiz_passed ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
{assignment.quiz_score.toFixed(0)}% {assignment.quiz_passed ? '(Bestanden)' : '(Nicht bestanden)'}
</span>
) : (
<span className="px-2 py-1 rounded text-sm bg-gray-100 text-gray-500">Noch kein Quiz</span>
)}
</div>
{/* Escalation */}
{assignment.escalation_level > 0 && (
<div className="flex items-center justify-between">
<span className="text-sm text-gray-500">Eskalationslevel</span>
<span className="px-2 py-1 rounded text-sm font-medium bg-orange-100 text-orange-700">
Level {assignment.escalation_level}
</span>
</div>
)}
{/* Certificate */}
{assignment.certificate_id && (
<div className="flex items-center justify-between">
<span className="text-sm text-gray-500">Zertifikat</span>
<span className="text-sm text-blue-600">Zertifikat vorhanden</span>
</div>
)}
{/* Status Action */}
{currentAction && (
<button
onClick={() => handleAction(currentAction.action)}
disabled={actionLoading}
className="w-full px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
>
{actionLoading ? 'Bitte warten...' : currentAction.label}
</button>
)}
{/* Deadline Edit */}
<div className="border-t border-gray-200 pt-4">
<label className="block text-sm font-medium text-gray-700 mb-1">Deadline bearbeiten</label>
<div className="flex gap-2">
<input
type="date"
value={deadline}
onChange={e => setDeadline(e.target.value)}
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
<button
onClick={handleSaveDeadline}
disabled={savingDeadline || !deadline}
className="px-4 py-2 text-sm bg-gray-800 text-white rounded-lg hover:bg-gray-900 disabled:opacity-50 transition-colors"
>
{savingDeadline ? 'Speichern...' : 'Deadline speichern'}
</button>
</div>
</div>
{error && <p className="text-sm text-red-600">{error}</p>}
</div>
</div>
</div>
)
}