375b34a0d8
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>
69 lines
3.0 KiB
TypeScript
69 lines
3.0 KiB
TypeScript
'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>
|
|
)
|
|
}
|