refactor(admin): split consent-management, control-library, incidents, training pages
Agent-completed splits committed after agents hit rate limits before committing their work. All 4 pages now under 500 LOC: - consent-management: 1303 -> 193 LOC (+ 7 _components, _hooks, _data, _types) - control-library: 1210 -> 298 LOC (+ _components, _types) - incidents: 1150 -> 373 LOC (+ _components) - training: 1127 -> 366 LOC (+ _components) Verification: next build clean (142 pages generated). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Sharang Parnerkar
@@ -0,0 +1,156 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { startAssignment, completeAssignment, updateAssignment } from '@/lib/sdk/training/api'
|
||||
import type { TrainingAssignment } from '@/lib/sdk/training/types'
|
||||
|
||||
export 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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
'use client'
|
||||
|
||||
import type { TrainingAssignment } from '@/lib/sdk/training/types'
|
||||
import { STATUS_LABELS, STATUS_COLORS } from '@/lib/sdk/training/types'
|
||||
|
||||
interface AssignmentsTabProps {
|
||||
assignments: TrainingAssignment[]
|
||||
statusFilter: string
|
||||
onStatusFilterChange: (value: string) => void
|
||||
onAssignmentClick: (a: TrainingAssignment) => void
|
||||
}
|
||||
|
||||
export function AssignmentsTab({ assignments, statusFilter, onStatusFilterChange, onAssignmentClick }: AssignmentsTabProps) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex gap-3">
|
||||
<select value={statusFilter} onChange={e => onStatusFilterChange(e.target.value)} className="px-3 py-1.5 text-sm border rounded-lg bg-white">
|
||||
<option value="">Alle Status</option>
|
||||
{Object.entries(STATUS_LABELS).map(([key, label]) => (
|
||||
<option key={key} value={key}>{label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-gray-50">
|
||||
<th className="text-left p-2 border font-medium text-gray-700">Modul</th>
|
||||
<th className="text-left p-2 border font-medium text-gray-700">Mitarbeiter</th>
|
||||
<th className="text-left p-2 border font-medium text-gray-700">Rolle</th>
|
||||
<th className="text-center p-2 border font-medium text-gray-700">Fortschritt</th>
|
||||
<th className="text-center p-2 border font-medium text-gray-700">Status</th>
|
||||
<th className="text-center p-2 border font-medium text-gray-700">Quiz</th>
|
||||
<th className="text-left p-2 border font-medium text-gray-700">Deadline</th>
|
||||
<th className="text-center p-2 border font-medium text-gray-700">Eskalation</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{assignments.map(a => (
|
||||
<tr
|
||||
key={a.id}
|
||||
onClick={() => onAssignmentClick(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>
|
||||
</td>
|
||||
<td className="p-2 border">
|
||||
<div>{a.user_name}</div>
|
||||
<div className="text-xs text-gray-500">{a.user_email}</div>
|
||||
</td>
|
||||
<td className="p-2 border text-xs">{a.role_code || '-'}</td>
|
||||
<td className="p-2 border text-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 bg-gray-200 rounded-full h-2">
|
||||
<div className="bg-blue-500 h-2 rounded-full" style={{ width: `${a.progress_percent}%` }} />
|
||||
</div>
|
||||
<span className="text-xs w-8">{a.progress_percent}%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-2 border text-center">
|
||||
<span className={`px-2 py-0.5 rounded text-xs ${STATUS_COLORS[a.status]?.bg || ''} ${STATUS_COLORS[a.status]?.text || ''}`}>
|
||||
{STATUS_LABELS[a.status] || a.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-2 border text-center text-xs">
|
||||
{a.quiz_score != null ? (
|
||||
<span className={`font-medium ${a.quiz_passed ? 'text-green-600' : 'text-red-600'}`}>{a.quiz_score.toFixed(0)}%</span>
|
||||
) : '-'}
|
||||
</td>
|
||||
<td className="p-2 border text-xs">{new Date(a.deadline).toLocaleDateString('de-DE')}</td>
|
||||
<td className="p-2 border text-center">
|
||||
{a.escalation_level > 0 ? <span className="px-2 py-0.5 rounded text-xs bg-red-100 text-red-700">L{a.escalation_level}</span> : '-'}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{assignments.length === 0 && <p className="text-center text-gray-500 py-8">Keine Zuweisungen</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
37
admin-compliance/app/sdk/training/_components/AuditTab.tsx
Normal file
37
admin-compliance/app/sdk/training/_components/AuditTab.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
'use client'
|
||||
|
||||
import type { AuditLogEntry } from '@/lib/sdk/training/types'
|
||||
|
||||
interface AuditTabProps {
|
||||
auditLog: AuditLogEntry[]
|
||||
}
|
||||
|
||||
export function AuditTab({ auditLog }: AuditTabProps) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-gray-50">
|
||||
<th className="text-left p-2 border font-medium text-gray-700">Zeitpunkt</th>
|
||||
<th className="text-left p-2 border font-medium text-gray-700">Aktion</th>
|
||||
<th className="text-left p-2 border font-medium text-gray-700">Entitaet</th>
|
||||
<th className="text-left p-2 border font-medium text-gray-700">Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{auditLog.map(entry => (
|
||||
<tr key={entry.id} className="border-b hover:bg-gray-50">
|
||||
<td className="p-2 border text-xs text-gray-600">{new Date(entry.created_at).toLocaleString('de-DE')}</td>
|
||||
<td className="p-2 border"><span className="px-2 py-0.5 rounded text-xs bg-gray-100 text-gray-700">{entry.action}</span></td>
|
||||
<td className="p-2 border text-xs">{entry.entity_type}</td>
|
||||
<td className="p-2 border text-xs text-gray-600">{JSON.stringify(entry.details).substring(0, 100)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{auditLog.length === 0 && <p className="text-center text-gray-500 py-8">Keine Audit-Eintraege</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
148
admin-compliance/app/sdk/training/_components/ContentTab.tsx
Normal file
148
admin-compliance/app/sdk/training/_components/ContentTab.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
'use client'
|
||||
|
||||
import type { TrainingModule, ModuleContent, TrainingMedia } from '@/lib/sdk/training/types'
|
||||
import AudioPlayer from '@/components/training/AudioPlayer'
|
||||
import VideoPlayer from '@/components/training/VideoPlayer'
|
||||
import ScriptPreview from '@/components/training/ScriptPreview'
|
||||
|
||||
interface ContentTabProps {
|
||||
modules: TrainingModule[]
|
||||
selectedModuleId: string
|
||||
onSelectModule: (id: string) => void
|
||||
generatedContent: ModuleContent | null
|
||||
generating: boolean
|
||||
bulkGenerating: boolean
|
||||
bulkResult: { generated: number; skipped: number; errors: string[] } | null
|
||||
moduleMedia: TrainingMedia[]
|
||||
onGenerateContent: () => void
|
||||
onGenerateQuiz: () => void
|
||||
onBulkContent: () => void
|
||||
onBulkQuiz: () => void
|
||||
onPublishContent: (contentId: string) => void
|
||||
onReloadMedia: () => void
|
||||
}
|
||||
|
||||
export function ContentTab({
|
||||
modules,
|
||||
selectedModuleId,
|
||||
onSelectModule,
|
||||
generatedContent,
|
||||
generating,
|
||||
bulkGenerating,
|
||||
bulkResult,
|
||||
moduleMedia,
|
||||
onGenerateContent,
|
||||
onGenerateQuiz,
|
||||
onBulkContent,
|
||||
onBulkQuiz,
|
||||
onPublishContent,
|
||||
onReloadMedia,
|
||||
}: ContentTabProps) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 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={onBulkContent}
|
||||
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={onBulkQuiz}
|
||||
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 => onSelectModule(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={onGenerateContent} 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={onGenerateQuiz} 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={() => onPublishContent(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={onReloadMedia}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Video Player */}
|
||||
{selectedModuleId && generatedContent?.is_published && (
|
||||
<VideoPlayer
|
||||
moduleId={selectedModuleId}
|
||||
video={moduleMedia.find(m => m.media_type === 'video') || null}
|
||||
onMediaUpdate={onReloadMedia}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Script Preview */}
|
||||
{selectedModuleId && generatedContent?.is_published && (
|
||||
<ScriptPreview moduleId={selectedModuleId} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
18
admin-compliance/app/sdk/training/_components/KPICard.tsx
Normal file
18
admin-compliance/app/sdk/training/_components/KPICard.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
export function KPICard({ label, value, color }: { label: string; value: string | number; color?: string }) {
|
||||
const colorMap: Record<string, string> = {
|
||||
green: 'bg-green-50 border-green-200',
|
||||
yellow: 'bg-yellow-50 border-yellow-200',
|
||||
red: 'bg-red-50 border-red-200',
|
||||
}
|
||||
const textMap: Record<string, string> = {
|
||||
green: 'text-green-700',
|
||||
yellow: 'text-yellow-700',
|
||||
red: 'text-red-700',
|
||||
}
|
||||
return (
|
||||
<div className={`border rounded-lg p-4 ${color ? colorMap[color] || 'bg-white border-gray-200' : 'bg-white border-gray-200'}`}>
|
||||
<p className="text-xs text-gray-500">{label}</p>
|
||||
<p className={`text-2xl font-bold mt-1 ${color ? textMap[color] || 'text-gray-900' : 'text-gray-900'}`}>{value}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { setMatrixEntry } from '@/lib/sdk/training/api'
|
||||
import type { TrainingModule } from '@/lib/sdk/training/types'
|
||||
|
||||
export 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>
|
||||
)
|
||||
}
|
||||
68
admin-compliance/app/sdk/training/_components/MatrixTab.tsx
Normal file
68
admin-compliance/app/sdk/training/_components/MatrixTab.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
'use client'
|
||||
|
||||
import type { MatrixResponse } from '@/lib/sdk/training/types'
|
||||
import { ROLE_LABELS, ALL_ROLES } from '@/lib/sdk/training/types'
|
||||
|
||||
interface MatrixTabProps {
|
||||
matrix: MatrixResponse
|
||||
onDeleteEntry: (roleCode: string, moduleId: string) => void
|
||||
onAddEntry: (roleCode: string) => void
|
||||
}
|
||||
|
||||
export function MatrixTab({ matrix, onDeleteEntry, onAddEntry }: MatrixTabProps) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-gray-600">Compliance Training Matrix (CTM): Welche Rollen benoetigen welche Schulungsmodule</p>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-gray-50">
|
||||
<th className="text-left p-2 border font-medium text-gray-700 w-48">Rolle</th>
|
||||
<th className="text-left p-2 border font-medium text-gray-700">Module</th>
|
||||
<th className="text-center p-2 border font-medium text-gray-700 w-20">Anzahl</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ALL_ROLES.map(role => {
|
||||
const entries = matrix.entries[role] || []
|
||||
return (
|
||||
<tr key={role} className="border-b hover:bg-gray-50">
|
||||
<td className="p-2 border font-medium">
|
||||
<span className="text-gray-900">{role}</span>
|
||||
<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-2 items-center">
|
||||
{entries.map(e => (
|
||||
<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={() => onDeleteEntry(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={() => onAddEntry(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>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { createModule } from '@/lib/sdk/training/api'
|
||||
import { REGULATION_LABELS, FREQUENCY_LABELS } from '@/lib/sdk/training/types'
|
||||
|
||||
export 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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { updateModule, deleteModule } from '@/lib/sdk/training/api'
|
||||
import type { TrainingModule } from '@/lib/sdk/training/types'
|
||||
import { REGULATION_LABELS, REGULATION_COLORS } from '@/lib/sdk/training/types'
|
||||
|
||||
export 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>
|
||||
)
|
||||
}
|
||||
68
admin-compliance/app/sdk/training/_components/ModulesTab.tsx
Normal file
68
admin-compliance/app/sdk/training/_components/ModulesTab.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
'use client'
|
||||
|
||||
import type { TrainingModule } from '@/lib/sdk/training/types'
|
||||
import { REGULATION_LABELS, REGULATION_COLORS, FREQUENCY_LABELS } from '@/lib/sdk/training/types'
|
||||
|
||||
interface ModulesTabProps {
|
||||
modules: TrainingModule[]
|
||||
regulationFilter: string
|
||||
onRegulationFilterChange: (value: string) => void
|
||||
onCreateClick: () => void
|
||||
onModuleClick: (m: TrainingModule) => void
|
||||
}
|
||||
|
||||
export function ModulesTab({ modules, regulationFilter, onRegulationFilterChange, onCreateClick, onModuleClick }: ModulesTabProps) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex gap-3 items-center">
|
||||
<select value={regulationFilter} onChange={e => onRegulationFilterChange(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={onCreateClick}
|
||||
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">
|
||||
{modules.map(m => (
|
||||
<div
|
||||
key={m.id}
|
||||
onClick={() => onModuleClick(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'}`}>
|
||||
{REGULATION_LABELS[m.regulation_area] || m.regulation_area}
|
||||
</span>
|
||||
<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>
|
||||
<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">
|
||||
<span>{m.duration_minutes} Min.</span>
|
||||
<span>{FREQUENCY_LABELS[m.frequency_type]}</span>
|
||||
<span>Quiz: {m.pass_threshold}%</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{modules.length === 0 && <p className="text-center text-gray-500 py-8">Keine Module gefunden</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
'use client'
|
||||
|
||||
import type { TrainingStats, DeadlineInfo } from '@/lib/sdk/training/types'
|
||||
import { KPICard } from './KPICard'
|
||||
|
||||
interface OverviewTabProps {
|
||||
stats: TrainingStats
|
||||
deadlines: DeadlineInfo[]
|
||||
escalationResult: { total_checked: number; escalated: number } | null
|
||||
onDismissEscalation: () => void
|
||||
}
|
||||
|
||||
export function OverviewTab({ stats, deadlines, escalationResult, onDismissEscalation }: OverviewTabProps) {
|
||||
return (
|
||||
<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={onDismissEscalation} 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} />
|
||||
<KPICard label="Abschlussrate" value={`${stats.completion_rate.toFixed(1)}%`} color={stats.completion_rate >= 80 ? 'green' : stats.completion_rate >= 50 ? 'yellow' : 'red'} />
|
||||
<KPICard label="Ueberfaellig" value={stats.overdue_count} color={stats.overdue_count > 0 ? 'red' : 'green'} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<KPICard label="Ausstehend" value={stats.pending_count} />
|
||||
<KPICard label="In Bearbeitung" value={stats.in_progress_count} />
|
||||
<KPICard label="Avg. Quiz-Score" value={`${stats.avg_quiz_score.toFixed(1)}%`} />
|
||||
<KPICard label="Deadlines (7d)" value={stats.upcoming_deadlines} color={stats.upcoming_deadlines > 5 ? 'yellow' : 'green'} />
|
||||
</div>
|
||||
|
||||
{/* Status Bar */}
|
||||
<div className="bg-white border rounded-lg p-4">
|
||||
<h3 className="text-sm font-medium text-gray-700 mb-3">Status-Verteilung</h3>
|
||||
{stats.total_assignments > 0 && (
|
||||
<div className="flex gap-1 h-6 rounded-full overflow-hidden bg-gray-100">
|
||||
{stats.completed_count > 0 && <div className="bg-green-500" style={{ width: `${(stats.completed_count / stats.total_assignments) * 100}%` }} title={`Abgeschlossen: ${stats.completed_count}`} />}
|
||||
{stats.in_progress_count > 0 && <div className="bg-blue-500" style={{ width: `${(stats.in_progress_count / stats.total_assignments) * 100}%` }} title={`In Bearbeitung: ${stats.in_progress_count}`} />}
|
||||
{stats.pending_count > 0 && <div className="bg-gray-400" style={{ width: `${(stats.pending_count / stats.total_assignments) * 100}%` }} title={`Ausstehend: ${stats.pending_count}`} />}
|
||||
{stats.overdue_count > 0 && <div className="bg-red-500" style={{ width: `${(stats.overdue_count / stats.total_assignments) * 100}%` }} title={`Ueberfaellig: ${stats.overdue_count}`} />}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-4 mt-2 text-xs text-gray-500">
|
||||
<span className="flex items-center gap-1"><span className="w-3 h-3 rounded-full bg-green-500 inline-block" /> Abgeschlossen</span>
|
||||
<span className="flex items-center gap-1"><span className="w-3 h-3 rounded-full bg-blue-500 inline-block" /> In Bearbeitung</span>
|
||||
<span className="flex items-center gap-1"><span className="w-3 h-3 rounded-full bg-gray-400 inline-block" /> Ausstehend</span>
|
||||
<span className="flex items-center gap-1"><span className="w-3 h-3 rounded-full bg-red-500 inline-block" /> Ueberfaellig</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Deadlines */}
|
||||
{deadlines.length > 0 && (
|
||||
<div className="bg-white border rounded-lg p-4">
|
||||
<h3 className="text-sm font-medium text-gray-700 mb-3">Naechste Deadlines</h3>
|
||||
<div className="space-y-2">
|
||||
{deadlines.slice(0, 5).map(d => (
|
||||
<div key={d.assignment_id} className="flex items-center justify-between text-sm">
|
||||
<div>
|
||||
<span className="font-medium">{d.module_title}</span>
|
||||
<span className="text-gray-500 ml-2">({d.user_name})</span>
|
||||
</div>
|
||||
<span className={`px-2 py-0.5 rounded text-xs ${
|
||||
d.days_left <= 0 ? 'bg-red-100 text-red-700' :
|
||||
d.days_left <= 7 ? 'bg-yellow-100 text-yellow-700' :
|
||||
'bg-gray-100 text-gray-600'
|
||||
}`}>
|
||||
{d.days_left <= 0 ? `${Math.abs(d.days_left)} Tage ueberfaellig` : `${d.days_left} Tage`}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user