[split-required] Split remaining 500-680 LOC files (final batch)
website (17 pages + 3 components): - multiplayer/wizard, middleware/wizard+test-wizard, communication - builds/wizard, staff-search, voice, sbom/wizard - foerderantrag, mail/tasks, tools/communication, sbom - compliance/evidence, uni-crawler, brandbook (already done) - CollectionsTab, IngestionTab, RiskHeatmap backend-lehrer (5 files): - letters_api (641 → 2), certificates_api (636 → 2) - alerts_agent/db/models (636 → 3) - llm_gateway/communication_service (614 → 2) - game/database already done in prior batch klausur-service (2 files): - hybrid_vocab_extractor (664 → 2) - klausur-service/frontend: api.ts (620 → 3), EHUploadWizard (591 → 2) voice-service (3 files): - bqas/rag_judge (618 → 3), runner (529 → 2) - enhanced_task_orchestrator (519 → 2) studio-v2 (6 files): - korrektur/[klausurId] (578 → 4), fairness (569 → 2) - AlertsWizard (552 → 2), OnboardingWizard (513 → 2) - korrektur/api.ts (506 → 3), geo-lernwelt (501 → 2) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
113
studio-v2/app/geo-lernwelt/GeoSettings.tsx
Normal file
113
studio-v2/app/geo-lernwelt/GeoSettings.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
'use client'
|
||||
|
||||
import { AOITheme, AOIQuality, Difficulty, GeoJSONPolygon, AOIResponse } from './types'
|
||||
|
||||
const THEME_CONFIG: Record<AOITheme, { icon: string; color: string; label: string }> = {
|
||||
topographie: { icon: '🏔️', color: 'bg-amber-500', label: 'Topographie' },
|
||||
landnutzung: { icon: '🏘️', color: 'bg-green-500', label: 'Landnutzung' },
|
||||
orientierung: { icon: '🧭', color: 'bg-blue-500', label: 'Orientierung' },
|
||||
geologie: { icon: '🪨', color: 'bg-stone-500', label: 'Geologie' },
|
||||
hydrologie: { icon: '💧', color: 'bg-cyan-500', label: 'Hydrologie' },
|
||||
vegetation: { icon: '🌲', color: 'bg-emerald-500', label: 'Vegetation' },
|
||||
}
|
||||
|
||||
interface GeoSettingsProps {
|
||||
selectedTheme: AOITheme
|
||||
onThemeChange: (theme: AOITheme) => void
|
||||
quality: AOIQuality
|
||||
onQualityChange: (quality: AOIQuality) => void
|
||||
difficulty: Difficulty
|
||||
onDifficultyChange: (difficulty: Difficulty) => void
|
||||
drawnPolygon: GeoJSONPolygon | null
|
||||
currentAOI: AOIResponse | null
|
||||
isLoading: boolean
|
||||
onCreateAOI: () => void
|
||||
}
|
||||
|
||||
export function GeoSettings({
|
||||
selectedTheme, onThemeChange, quality, onQualityChange,
|
||||
difficulty, onDifficultyChange, drawnPolygon, currentAOI,
|
||||
isLoading, onCreateAOI,
|
||||
}: GeoSettingsProps) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Theme Selection */}
|
||||
<div className="bg-white/5 backdrop-blur-lg rounded-2xl border border-white/10 p-4">
|
||||
<h3 className="text-white font-medium mb-3">Lernthema</h3>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{(Object.keys(THEME_CONFIG) as AOITheme[]).map((theme) => {
|
||||
const config = THEME_CONFIG[theme]
|
||||
return (
|
||||
<button key={theme} onClick={() => onThemeChange(theme)}
|
||||
className={`p-3 rounded-xl text-left transition-all ${selectedTheme === theme ? 'bg-white/15 border border-white/30' : 'bg-white/5 border border-transparent hover:bg-white/10'}`}>
|
||||
<span className="text-2xl">{config.icon}</span>
|
||||
<div className="text-sm text-white mt-1">{config.label}</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quality Selection */}
|
||||
<div className="bg-white/5 backdrop-blur-lg rounded-2xl border border-white/10 p-4">
|
||||
<h3 className="text-white font-medium mb-3">Qualitaet</h3>
|
||||
<div className="flex gap-2">
|
||||
{(['low', 'medium', 'high'] as AOIQuality[]).map((q) => (
|
||||
<button key={q} onClick={() => onQualityChange(q)}
|
||||
className={`flex-1 py-2 rounded-lg text-sm transition-all ${quality === q ? 'bg-white/15 text-white border border-white/30' : 'bg-white/5 text-white/60 hover:bg-white/10'}`}>
|
||||
{q === 'low' ? 'Schnell' : q === 'medium' ? 'Standard' : 'Hoch'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Difficulty Selection */}
|
||||
<div className="bg-white/5 backdrop-blur-lg rounded-2xl border border-white/10 p-4">
|
||||
<h3 className="text-white font-medium mb-3">Schwierigkeitsgrad</h3>
|
||||
<div className="flex gap-2">
|
||||
{(['leicht', 'mittel', 'schwer'] as Difficulty[]).map((d) => (
|
||||
<button key={d} onClick={() => onDifficultyChange(d)}
|
||||
className={`flex-1 py-2 rounded-lg text-sm capitalize transition-all ${difficulty === d ? 'bg-white/15 text-white border border-white/30' : 'bg-white/5 text-white/60 hover:bg-white/10'}`}>
|
||||
{d}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Area Info */}
|
||||
{drawnPolygon && (
|
||||
<div className="bg-white/5 backdrop-blur-lg rounded-2xl border border-white/10 p-4">
|
||||
<h3 className="text-white font-medium mb-2">Ausgewaehltes Gebiet</h3>
|
||||
<div className="text-sm text-white/60">
|
||||
<p>Polygon gezeichnet ✓</p>
|
||||
<p className="text-white/40 text-xs mt-1">Klicke "Lernwelt erstellen" um fortzufahren</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create Button */}
|
||||
<button onClick={onCreateAOI} disabled={!drawnPolygon || isLoading}
|
||||
className={`w-full py-4 rounded-xl font-medium text-lg transition-all ${drawnPolygon && !isLoading ? 'bg-gradient-to-r from-blue-500 to-purple-500 text-white hover:from-blue-600 hover:to-purple-600' : 'bg-white/10 text-white/40 cursor-not-allowed'}`}>
|
||||
{isLoading ? (<span className="flex items-center justify-center gap-2"><span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />Wird erstellt...</span>) : '🚀 Lernwelt erstellen'}
|
||||
</button>
|
||||
|
||||
{/* AOI Status */}
|
||||
{currentAOI && (
|
||||
<div className="bg-white/5 backdrop-blur-lg rounded-2xl border border-white/10 p-4">
|
||||
<h3 className="text-white font-medium mb-2">Status</h3>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2 h-2 rounded-full ${currentAOI.status === 'completed' ? 'bg-green-500' : currentAOI.status === 'failed' ? 'bg-red-500' : 'bg-yellow-500 animate-pulse'}`} />
|
||||
<span className="text-sm text-white/80 capitalize">
|
||||
{currentAOI.status === 'queued' ? 'In Warteschlange...' : currentAOI.status === 'processing' ? 'Wird verarbeitet...' : currentAOI.status === 'completed' ? 'Fertig!' : 'Fehlgeschlagen'}
|
||||
</span>
|
||||
</div>
|
||||
{currentAOI.area_km2 > 0 && (<p className="text-xs text-white/50">Flaeche: {currentAOI.area_km2.toFixed(2)} km²</p>)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export { THEME_CONFIG }
|
||||
@@ -39,15 +39,7 @@ function MapLoadingPlaceholder() {
|
||||
)
|
||||
}
|
||||
|
||||
// Theme icons and colors
|
||||
const THEME_CONFIG: Record<AOITheme, { icon: string; color: string; label: string }> = {
|
||||
topographie: { icon: '🏔️', color: 'bg-amber-500', label: 'Topographie' },
|
||||
landnutzung: { icon: '🏘️', color: 'bg-green-500', label: 'Landnutzung' },
|
||||
orientierung: { icon: '🧭', color: 'bg-blue-500', label: 'Orientierung' },
|
||||
geologie: { icon: '🪨', color: 'bg-stone-500', label: 'Geologie' },
|
||||
hydrologie: { icon: '💧', color: 'bg-cyan-500', label: 'Hydrologie' },
|
||||
vegetation: { icon: '🌲', color: 'bg-emerald-500', label: 'Vegetation' },
|
||||
}
|
||||
import { GeoSettings } from './GeoSettings'
|
||||
|
||||
export default function GeoLernweltPage() {
|
||||
// State
|
||||
@@ -296,138 +288,18 @@ export default function GeoLernweltPage() {
|
||||
</div>
|
||||
|
||||
{/* Settings Panel (1/3) */}
|
||||
<div className="space-y-4">
|
||||
{/* Theme Selection */}
|
||||
<div className="bg-white/5 backdrop-blur-lg rounded-2xl border border-white/10 p-4">
|
||||
<h3 className="text-white font-medium mb-3">Lernthema</h3>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{(Object.keys(THEME_CONFIG) as AOITheme[]).map((theme) => {
|
||||
const config = THEME_CONFIG[theme]
|
||||
return (
|
||||
<button
|
||||
key={theme}
|
||||
onClick={() => setSelectedTheme(theme)}
|
||||
className={`p-3 rounded-xl text-left transition-all ${
|
||||
selectedTheme === theme
|
||||
? 'bg-white/15 border border-white/30'
|
||||
: 'bg-white/5 border border-transparent hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
<span className="text-2xl">{config.icon}</span>
|
||||
<div className="text-sm text-white mt-1">{config.label}</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quality Selection */}
|
||||
<div className="bg-white/5 backdrop-blur-lg rounded-2xl border border-white/10 p-4">
|
||||
<h3 className="text-white font-medium mb-3">Qualitaet</h3>
|
||||
<div className="flex gap-2">
|
||||
{(['low', 'medium', 'high'] as AOIQuality[]).map((q) => (
|
||||
<button
|
||||
key={q}
|
||||
onClick={() => setQuality(q)}
|
||||
className={`flex-1 py-2 rounded-lg text-sm transition-all ${
|
||||
quality === q
|
||||
? 'bg-white/15 text-white border border-white/30'
|
||||
: 'bg-white/5 text-white/60 hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
{q === 'low' ? 'Schnell' : q === 'medium' ? 'Standard' : 'Hoch'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Difficulty Selection */}
|
||||
<div className="bg-white/5 backdrop-blur-lg rounded-2xl border border-white/10 p-4">
|
||||
<h3 className="text-white font-medium mb-3">Schwierigkeitsgrad</h3>
|
||||
<div className="flex gap-2">
|
||||
{(['leicht', 'mittel', 'schwer'] as Difficulty[]).map((d) => (
|
||||
<button
|
||||
key={d}
|
||||
onClick={() => setDifficulty(d)}
|
||||
className={`flex-1 py-2 rounded-lg text-sm capitalize transition-all ${
|
||||
difficulty === d
|
||||
? 'bg-white/15 text-white border border-white/30'
|
||||
: 'bg-white/5 text-white/60 hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
{d}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Area Info */}
|
||||
{drawnPolygon && (
|
||||
<div className="bg-white/5 backdrop-blur-lg rounded-2xl border border-white/10 p-4">
|
||||
<h3 className="text-white font-medium mb-2">Ausgewaehltes Gebiet</h3>
|
||||
<div className="text-sm text-white/60">
|
||||
<p>Polygon gezeichnet ✓</p>
|
||||
<p className="text-white/40 text-xs mt-1">
|
||||
Klicke "Lernwelt erstellen" um fortzufahren
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create Button */}
|
||||
<button
|
||||
onClick={handleCreateAOI}
|
||||
disabled={!drawnPolygon || isLoading}
|
||||
className={`w-full py-4 rounded-xl font-medium text-lg transition-all ${
|
||||
drawnPolygon && !isLoading
|
||||
? 'bg-gradient-to-r from-blue-500 to-purple-500 text-white hover:from-blue-600 hover:to-purple-600'
|
||||
: 'bg-white/10 text-white/40 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
{isLoading ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
Wird erstellt...
|
||||
</span>
|
||||
) : (
|
||||
'🚀 Lernwelt erstellen'
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* AOI Status */}
|
||||
{currentAOI && (
|
||||
<div className="bg-white/5 backdrop-blur-lg rounded-2xl border border-white/10 p-4">
|
||||
<h3 className="text-white font-medium mb-2">Status</h3>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${
|
||||
currentAOI.status === 'completed'
|
||||
? 'bg-green-500'
|
||||
: currentAOI.status === 'failed'
|
||||
? 'bg-red-500'
|
||||
: 'bg-yellow-500 animate-pulse'
|
||||
}`}
|
||||
/>
|
||||
<span className="text-sm text-white/80 capitalize">
|
||||
{currentAOI.status === 'queued'
|
||||
? 'In Warteschlange...'
|
||||
: currentAOI.status === 'processing'
|
||||
? 'Wird verarbeitet...'
|
||||
: currentAOI.status === 'completed'
|
||||
? 'Fertig!'
|
||||
: 'Fehlgeschlagen'}
|
||||
</span>
|
||||
</div>
|
||||
{currentAOI.area_km2 > 0 && (
|
||||
<p className="text-xs text-white/50">
|
||||
Flaeche: {currentAOI.area_km2.toFixed(2)} km²
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<GeoSettings
|
||||
selectedTheme={selectedTheme}
|
||||
onThemeChange={setSelectedTheme}
|
||||
quality={quality}
|
||||
onQualityChange={setQuality}
|
||||
difficulty={difficulty}
|
||||
onDifficultyChange={setDifficulty}
|
||||
drawnPolygon={drawnPolygon}
|
||||
currentAOI={currentAOI}
|
||||
isLoading={isLoading}
|
||||
onCreateAOI={handleCreateAOI}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
/* Unity 3D Viewer Tab */
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
interface GlassCardProps {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
onClick?: () => void
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
delay?: number
|
||||
isDark?: boolean
|
||||
}
|
||||
|
||||
export function GlassCard({ children, className = '', onClick, size = 'md', delay = 0, isDark = true }: GlassCardProps) {
|
||||
const [isVisible, setIsVisible] = useState(false)
|
||||
const [isHovered, setIsHovered] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setIsVisible(true), delay)
|
||||
return () => clearTimeout(timer)
|
||||
}, [delay])
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'p-4',
|
||||
md: 'p-5',
|
||||
lg: 'p-6',
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
rounded-3xl
|
||||
${sizeClasses[size]}
|
||||
${onClick ? 'cursor-pointer' : ''}
|
||||
${className}
|
||||
`}
|
||||
style={{
|
||||
background: isDark
|
||||
? (isHovered ? 'rgba(255, 255, 255, 0.12)' : 'rgba(255, 255, 255, 0.08)')
|
||||
: (isHovered ? 'rgba(255, 255, 255, 0.9)' : 'rgba(255, 255, 255, 0.7)'),
|
||||
backdropFilter: 'blur(24px) saturate(180%)',
|
||||
WebkitBackdropFilter: 'blur(24px) saturate(180%)',
|
||||
border: isDark ? '1px solid rgba(255, 255, 255, 0.1)' : '1px solid rgba(0, 0, 0, 0.1)',
|
||||
boxShadow: isDark
|
||||
? '0 4px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05)'
|
||||
: '0 4px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5)',
|
||||
opacity: isVisible ? 1 : 0,
|
||||
transform: isVisible
|
||||
? `translateY(0) scale(${isHovered ? 1.01 : 1})`
|
||||
: 'translateY(20px)',
|
||||
transition: 'all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)',
|
||||
}}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
onClick={onClick}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
'use client'
|
||||
|
||||
import type { StudentWork } from '../../types'
|
||||
import { STATUS_COLORS, STATUS_LABELS, getGradeLabel } from '../../types'
|
||||
import { GlassCard } from './GlassCard'
|
||||
|
||||
interface StudentCardProps {
|
||||
student: StudentWork
|
||||
index: number
|
||||
onClick: () => void
|
||||
delay?: number
|
||||
isDark?: boolean
|
||||
}
|
||||
|
||||
export function StudentCard({ student, index, onClick, delay = 0, isDark = true }: StudentCardProps) {
|
||||
const statusColor = STATUS_COLORS[student.status] || '#6b7280'
|
||||
const statusLabel = STATUS_LABELS[student.status] || student.status
|
||||
|
||||
const hasGrade = student.status === 'COMPLETED' || student.status === 'FIRST_EXAMINER' || student.status === 'SECOND_EXAMINER'
|
||||
|
||||
return (
|
||||
<GlassCard onClick={onClick} delay={delay} size="sm" isDark={isDark}>
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Index/Number */}
|
||||
<div className={`w-10 h-10 rounded-xl flex items-center justify-center font-medium ${isDark ? 'bg-white/10 text-white/60' : 'bg-slate-200 text-slate-600'}`}>
|
||||
{index + 1}
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className={`font-medium truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>{student.anonym_id}</p>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span
|
||||
className="px-2 py-0.5 rounded-full text-xs font-medium"
|
||||
style={{ backgroundColor: `${statusColor}20`, color: statusColor }}
|
||||
>
|
||||
{statusLabel}
|
||||
</span>
|
||||
{hasGrade && student.grade_points > 0 && (
|
||||
<span className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
|
||||
{student.grade_points} P ({getGradeLabel(student.grade_points)})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow */}
|
||||
<svg className={`w-5 h-5 ${isDark ? 'text-white/40' : 'text-slate-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</GlassCard>
|
||||
)
|
||||
}
|
||||
152
studio-v2/app/korrektur/[klausurId]/_components/UploadModal.tsx
Normal file
152
studio-v2/app/korrektur/[klausurId]/_components/UploadModal.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useRef } from 'react'
|
||||
import { GlassCard } from './GlassCard'
|
||||
|
||||
interface UploadModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
onUpload: (files: File[], anonymIds: string[]) => void
|
||||
isUploading: boolean
|
||||
}
|
||||
|
||||
export function UploadModal({ isOpen, onClose, onUpload, isUploading }: UploadModalProps) {
|
||||
const [files, setFiles] = useState<File[]>([])
|
||||
const [anonymIds, setAnonymIds] = useState<string[]>([])
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
const handleFileSelect = (selectedFiles: FileList | null) => {
|
||||
if (!selectedFiles) return
|
||||
const newFiles = Array.from(selectedFiles)
|
||||
setFiles((prev) => [...prev, ...newFiles])
|
||||
setAnonymIds((prev) => [
|
||||
...prev,
|
||||
...newFiles.map((_, i) => `Arbeit-${prev.length + i + 1}`),
|
||||
])
|
||||
}
|
||||
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault()
|
||||
handleFileSelect(e.dataTransfer.files)
|
||||
}
|
||||
|
||||
const removeFile = (index: number) => {
|
||||
setFiles((prev) => prev.filter((_, i) => i !== index))
|
||||
setAnonymIds((prev) => prev.filter((_, i) => i !== index))
|
||||
}
|
||||
|
||||
const updateAnonymId = (index: number, value: string) => {
|
||||
setAnonymIds((prev) => {
|
||||
const updated = [...prev]
|
||||
updated[index] = value
|
||||
return updated
|
||||
})
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (files.length > 0) {
|
||||
onUpload(files, anonymIds)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
|
||||
<GlassCard className="relative w-full max-w-2xl max-h-[80vh] overflow-hidden" size="lg" delay={0}>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-bold text-white">Arbeiten hochladen</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 rounded-lg hover:bg-white/10 text-white/60 transition-colors"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Drop Zone */}
|
||||
<div
|
||||
className="border-2 border-dashed border-white/20 rounded-2xl p-8 text-center cursor-pointer transition-all hover:border-purple-400/50 hover:bg-white/5 mb-6"
|
||||
onDrop={handleDrop}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*,.pdf"
|
||||
multiple
|
||||
onChange={(e) => handleFileSelect(e.target.files)}
|
||||
className="hidden"
|
||||
/>
|
||||
<svg className="w-12 h-12 mx-auto mb-3 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||
</svg>
|
||||
<p className="text-white font-medium">Dateien hierher ziehen</p>
|
||||
<p className="text-white/50 text-sm mt-1">oder klicken zum Auswaehlen</p>
|
||||
</div>
|
||||
|
||||
{/* File List */}
|
||||
{files.length > 0 && (
|
||||
<div className="max-h-64 overflow-y-auto space-y-2 mb-6">
|
||||
{files.map((file, index) => (
|
||||
<div key={index} className="flex items-center gap-3 p-3 rounded-xl bg-white/5">
|
||||
<span className="text-lg">{file.type.startsWith('image/') ? '\uD83D\uDDBC\uFE0F' : '\uD83D\uDCC4'}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-white text-sm truncate">{file.name}</p>
|
||||
<input
|
||||
type="text"
|
||||
value={anonymIds[index] || ''}
|
||||
onChange={(e) => updateAnonymId(index, e.target.value)}
|
||||
placeholder="Anonym-ID"
|
||||
className="mt-1 w-full px-2 py-1 rounded bg-white/10 border border-white/10 text-white text-sm placeholder-white/40 focus:outline-none focus:border-purple-500"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => removeFile(index)}
|
||||
className="p-2 rounded-lg hover:bg-red-500/20 text-red-400 transition-colors"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="flex-1 px-4 py-3 rounded-xl bg-white/10 text-white hover:bg-white/20 transition-colors"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={isUploading || files.length === 0}
|
||||
className="flex-1 px-4 py-3 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold hover:shadow-lg hover:shadow-purple-500/30 transition-all disabled:opacity-50 flex items-center justify-center gap-2"
|
||||
>
|
||||
{isUploading ? (
|
||||
<>
|
||||
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
Hochladen...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
|
||||
</svg>
|
||||
{files.length} Dateien hochladen
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</GlassCard>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,202 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useMemo } from 'react'
|
||||
import type { StudentWork, FairnessAnalysis } from '../../../types'
|
||||
import { DEFAULT_CRITERIA, ANNOTATION_COLORS, getGradeLabel } from '../../../types'
|
||||
|
||||
// =============================================================================
|
||||
// GLASS CARD
|
||||
// =============================================================================
|
||||
|
||||
interface GlassCardProps {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
delay?: number
|
||||
isDark?: boolean
|
||||
}
|
||||
|
||||
export function GlassCard({ children, className = '', delay = 0, isDark = true }: GlassCardProps) {
|
||||
const [isVisible, setIsVisible] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setIsVisible(true), delay)
|
||||
return () => clearTimeout(timer)
|
||||
}, [delay])
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`rounded-3xl p-5 ${className}`}
|
||||
style={{
|
||||
background: isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(255, 255, 255, 0.7)',
|
||||
backdropFilter: 'blur(24px) saturate(180%)',
|
||||
WebkitBackdropFilter: 'blur(24px) saturate(180%)',
|
||||
border: isDark ? '1px solid rgba(255, 255, 255, 0.1)' : '1px solid rgba(0, 0, 0, 0.1)',
|
||||
boxShadow: isDark
|
||||
? '0 4px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05)'
|
||||
: '0 4px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5)',
|
||||
opacity: isVisible ? 1 : 0,
|
||||
transform: isVisible ? 'translateY(0)' : 'translateY(20px)',
|
||||
transition: 'all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// HISTOGRAM
|
||||
// =============================================================================
|
||||
|
||||
export function Histogram({ students, className = '', isDark = true }: { students: StudentWork[]; className?: string; isDark?: boolean }) {
|
||||
const distribution = useMemo(() => {
|
||||
const counts: Record<number, number> = {}
|
||||
for (let i = 0; i <= 15; i++) counts[i] = 0
|
||||
for (const student of students) {
|
||||
if (student.grade_points !== undefined) counts[student.grade_points] = (counts[student.grade_points] || 0) + 1
|
||||
}
|
||||
return counts
|
||||
}, [students])
|
||||
|
||||
const maxCount = Math.max(...Object.values(distribution), 1)
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<h3 className={`font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>Notenverteilung</h3>
|
||||
<div className="flex items-end gap-1 h-40">
|
||||
{Array.from({ length: 16 }, (_, i) => 15 - i).map((grade) => {
|
||||
const count = distribution[grade] || 0
|
||||
const height = (count / maxCount) * 100
|
||||
let color = '#22c55e'
|
||||
if (grade <= 4) color = '#ef4444'
|
||||
else if (grade <= 9) color = '#f97316'
|
||||
|
||||
return (
|
||||
<div key={grade} className="flex-1 flex flex-col items-center gap-1">
|
||||
<span className={`text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>{count || ''}</span>
|
||||
<div className="w-full rounded-t transition-all hover:opacity-80" style={{ height: `${height}%`, minHeight: count > 0 ? '8px' : '0', backgroundColor: color }} title={`${grade} Punkte (${getGradeLabel(grade)}): ${count} Schueler`} />
|
||||
<span className={`text-xs ${isDark ? 'text-white/50' : 'text-slate-500'}`}>{grade}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<p className={`text-xs text-center mt-2 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Punkte</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// CRITERIA HEATMAP
|
||||
// =============================================================================
|
||||
|
||||
export function CriteriaHeatmap({ students, className = '', isDark = true }: { students: StudentWork[]; className?: string; isDark?: boolean }) {
|
||||
const criteriaAverages = useMemo(() => {
|
||||
const sums: Record<string, { sum: number; count: number }> = {}
|
||||
for (const criterion of Object.keys(DEFAULT_CRITERIA)) sums[criterion] = { sum: 0, count: 0 }
|
||||
for (const student of students) {
|
||||
if (student.criteria_scores) {
|
||||
for (const [criterion, score] of Object.entries(student.criteria_scores)) {
|
||||
if (score !== undefined && sums[criterion]) { sums[criterion].sum += score; sums[criterion].count += 1 }
|
||||
}
|
||||
}
|
||||
}
|
||||
const averages: Record<string, number> = {}
|
||||
for (const [criterion, data] of Object.entries(sums)) averages[criterion] = data.count > 0 ? Math.round(data.sum / data.count) : 0
|
||||
return averages
|
||||
}, [students])
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<h3 className={`font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>Kriterien-Durchschnitt</h3>
|
||||
<div className="space-y-3">
|
||||
{Object.entries(DEFAULT_CRITERIA).map(([criterion, config]) => {
|
||||
const average = criteriaAverages[criterion] || 0
|
||||
const color = ANNOTATION_COLORS[criterion as keyof typeof ANNOTATION_COLORS] || '#6b7280'
|
||||
return (
|
||||
<div key={criterion} className="space-y-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2"><div className="w-3 h-3 rounded-full" style={{ backgroundColor: color }} /><span className={`text-sm ${isDark ? 'text-white/70' : 'text-slate-600'}`}>{config.name}</span></div>
|
||||
<span className={`text-sm font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{average}%</span>
|
||||
</div>
|
||||
<div className={`h-2 rounded-full overflow-hidden ${isDark ? 'bg-white/10' : 'bg-slate-200'}`}><div className="h-full rounded-full transition-all" style={{ width: `${average}%`, backgroundColor: color }} /></div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// OUTLIER LIST
|
||||
// =============================================================================
|
||||
|
||||
export function OutlierList({ fairness, onStudentClick, className = '', isDark = true }: { fairness: FairnessAnalysis | null; onStudentClick: (id: string) => void; className?: string; isDark?: boolean }) {
|
||||
if (!fairness || fairness.outliers.length === 0) {
|
||||
return (
|
||||
<div className={`text-center py-8 ${className}`}>
|
||||
<div className="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center mx-auto mb-3"><svg className="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg></div>
|
||||
<p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Keine Ausreisser erkannt</p>
|
||||
<p className={`text-xs mt-1 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Alle Bewertungen sind konsistent</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<h3 className={`font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>Ausreisser ({fairness.outliers.length})</h3>
|
||||
<div className="space-y-2 max-h-64 overflow-y-auto">
|
||||
{fairness.outliers.map((outlier) => (
|
||||
<button key={outlier.student_id} onClick={() => onStudentClick(outlier.student_id)} className={`w-full p-3 rounded-xl border transition-colors text-left ${isDark ? 'bg-white/5 border-white/10 hover:bg-white/10' : 'bg-slate-100 border-slate-200 hover:bg-slate-200'}`}>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{outlier.anonym_id}</span>
|
||||
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${outlier.deviation > 0 ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'}`}>{outlier.deviation > 0 ? '+' : ''}{outlier.deviation.toFixed(1)} Punkte</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>{outlier.grade_points} Punkte ({getGradeLabel(outlier.grade_points)})</span>
|
||||
<span className={`text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>{outlier.reason}</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// FAIRNESS SCORE
|
||||
// =============================================================================
|
||||
|
||||
export function FairnessScore({ fairness, className = '', isDark = true }: { fairness: FairnessAnalysis | null; className?: string; isDark?: boolean }) {
|
||||
const score = fairness?.fairness_score || 0
|
||||
const percentage = Math.round(score * 100)
|
||||
|
||||
let color = '#22c55e'
|
||||
let label = 'Ausgezeichnet'
|
||||
if (percentage < 70) { color = '#ef4444'; label = 'Ueberpruefung empfohlen' }
|
||||
else if (percentage < 85) { color = '#f97316'; label = 'Akzeptabel' }
|
||||
else if (percentage < 95) { color = '#22c55e'; label = 'Gut' }
|
||||
|
||||
const size = 120
|
||||
const strokeWidth = 10
|
||||
const radius = (size - strokeWidth) / 2
|
||||
const circumference = radius * 2 * Math.PI
|
||||
const offset = circumference - (percentage / 100) * circumference
|
||||
|
||||
return (
|
||||
<div className={`text-center ${className}`}>
|
||||
<div className="relative inline-block" style={{ width: size, height: size }}>
|
||||
<svg className="transform -rotate-90" width={size} height={size}>
|
||||
<circle cx={size / 2} cy={size / 2} r={radius} fill="none" stroke={isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'} strokeWidth={strokeWidth} />
|
||||
<circle cx={size / 2} cy={size / 2} r={radius} fill="none" stroke={color} strokeWidth={strokeWidth} strokeDasharray={circumference} strokeDashoffset={offset} strokeLinecap="round" style={{ transition: 'stroke-dashoffset 1s ease-out' }} />
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center">
|
||||
<span className={`text-3xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>{percentage}</span>
|
||||
<span className={`text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>%</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className={`font-medium mt-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>{label}</p>
|
||||
<p className={`text-xs mt-1 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Fairness-Score</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -8,324 +8,7 @@ import { ThemeToggle } from '@/components/ThemeToggle'
|
||||
import { LanguageDropdown } from '@/components/LanguageDropdown'
|
||||
import { korrekturApi } from '@/lib/korrektur/api'
|
||||
import type { Klausur, StudentWork, FairnessAnalysis } from '../../types'
|
||||
import { DEFAULT_CRITERIA, ANNOTATION_COLORS, getGradeLabel } from '../../types'
|
||||
|
||||
// =============================================================================
|
||||
// GLASS CARD
|
||||
// =============================================================================
|
||||
|
||||
interface GlassCardProps {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
delay?: number
|
||||
isDark?: boolean
|
||||
}
|
||||
|
||||
function GlassCard({ children, className = '', delay = 0, isDark = true }: GlassCardProps) {
|
||||
const [isVisible, setIsVisible] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setIsVisible(true), delay)
|
||||
return () => clearTimeout(timer)
|
||||
}, [delay])
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`rounded-3xl p-5 ${className}`}
|
||||
style={{
|
||||
background: isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(255, 255, 255, 0.7)',
|
||||
backdropFilter: 'blur(24px) saturate(180%)',
|
||||
WebkitBackdropFilter: 'blur(24px) saturate(180%)',
|
||||
border: isDark ? '1px solid rgba(255, 255, 255, 0.1)' : '1px solid rgba(0, 0, 0, 0.1)',
|
||||
boxShadow: isDark
|
||||
? '0 4px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05)'
|
||||
: '0 4px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5)',
|
||||
opacity: isVisible ? 1 : 0,
|
||||
transform: isVisible ? 'translateY(0)' : 'translateY(20px)',
|
||||
transition: 'all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// HISTOGRAM
|
||||
// =============================================================================
|
||||
|
||||
interface HistogramProps {
|
||||
students: StudentWork[]
|
||||
className?: string
|
||||
isDark?: boolean
|
||||
}
|
||||
|
||||
function Histogram({ students, className = '', isDark = true }: HistogramProps) {
|
||||
// Group students by grade points (0-15)
|
||||
const distribution = useMemo(() => {
|
||||
const counts: Record<number, number> = {}
|
||||
for (let i = 0; i <= 15; i++) {
|
||||
counts[i] = 0
|
||||
}
|
||||
for (const student of students) {
|
||||
if (student.grade_points !== undefined) {
|
||||
counts[student.grade_points] = (counts[student.grade_points] || 0) + 1
|
||||
}
|
||||
}
|
||||
return counts
|
||||
}, [students])
|
||||
|
||||
const maxCount = Math.max(...Object.values(distribution), 1)
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<h3 className={`font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>Notenverteilung</h3>
|
||||
<div className="flex items-end gap-1 h-40">
|
||||
{Array.from({ length: 16 }, (_, i) => 15 - i).map((grade) => {
|
||||
const count = distribution[grade] || 0
|
||||
const height = (count / maxCount) * 100
|
||||
|
||||
// Color based on grade
|
||||
let color = '#22c55e' // Green for good grades
|
||||
if (grade <= 4) color = '#ef4444' // Red for poor grades
|
||||
else if (grade <= 9) color = '#f97316' // Orange for medium grades
|
||||
|
||||
return (
|
||||
<div
|
||||
key={grade}
|
||||
className="flex-1 flex flex-col items-center gap-1"
|
||||
>
|
||||
<span className={`text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>{count || ''}</span>
|
||||
<div
|
||||
className="w-full rounded-t transition-all hover:opacity-80"
|
||||
style={{
|
||||
height: `${height}%`,
|
||||
minHeight: count > 0 ? '8px' : '0',
|
||||
backgroundColor: color,
|
||||
}}
|
||||
title={`${grade} Punkte (${getGradeLabel(grade)}): ${count} Schueler`}
|
||||
/>
|
||||
<span className={`text-xs ${isDark ? 'text-white/50' : 'text-slate-500'}`}>{grade}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<p className={`text-xs text-center mt-2 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Punkte</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// CRITERIA HEATMAP
|
||||
// =============================================================================
|
||||
|
||||
interface CriteriaHeatmapProps {
|
||||
students: StudentWork[]
|
||||
className?: string
|
||||
isDark?: boolean
|
||||
}
|
||||
|
||||
function CriteriaHeatmap({ students, className = '', isDark = true }: CriteriaHeatmapProps) {
|
||||
// Calculate average for each criterion
|
||||
const criteriaAverages = useMemo(() => {
|
||||
const sums: Record<string, { sum: number; count: number }> = {}
|
||||
|
||||
for (const criterion of Object.keys(DEFAULT_CRITERIA)) {
|
||||
sums[criterion] = { sum: 0, count: 0 }
|
||||
}
|
||||
|
||||
for (const student of students) {
|
||||
if (student.criteria_scores) {
|
||||
for (const [criterion, score] of Object.entries(student.criteria_scores)) {
|
||||
if (score !== undefined && sums[criterion]) {
|
||||
sums[criterion].sum += score
|
||||
sums[criterion].count += 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const averages: Record<string, number> = {}
|
||||
for (const [criterion, data] of Object.entries(sums)) {
|
||||
averages[criterion] = data.count > 0 ? Math.round(data.sum / data.count) : 0
|
||||
}
|
||||
|
||||
return averages
|
||||
}, [students])
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<h3 className={`font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>Kriterien-Durchschnitt</h3>
|
||||
<div className="space-y-3">
|
||||
{Object.entries(DEFAULT_CRITERIA).map(([criterion, config]) => {
|
||||
const average = criteriaAverages[criterion] || 0
|
||||
const color = ANNOTATION_COLORS[criterion as keyof typeof ANNOTATION_COLORS] || '#6b7280'
|
||||
|
||||
return (
|
||||
<div key={criterion} className="space-y-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-3 h-3 rounded-full"
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
<span className={`text-sm ${isDark ? 'text-white/70' : 'text-slate-600'}`}>{config.name}</span>
|
||||
</div>
|
||||
<span className={`text-sm font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{average}%</span>
|
||||
</div>
|
||||
<div className={`h-2 rounded-full overflow-hidden ${isDark ? 'bg-white/10' : 'bg-slate-200'}`}>
|
||||
<div
|
||||
className="h-full rounded-full transition-all"
|
||||
style={{
|
||||
width: `${average}%`,
|
||||
backgroundColor: color,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// OUTLIER LIST
|
||||
// =============================================================================
|
||||
|
||||
interface OutlierListProps {
|
||||
fairness: FairnessAnalysis | null
|
||||
onStudentClick: (studentId: string) => void
|
||||
className?: string
|
||||
isDark?: boolean
|
||||
}
|
||||
|
||||
function OutlierList({ fairness, onStudentClick, className = '', isDark = true }: OutlierListProps) {
|
||||
if (!fairness || fairness.outliers.length === 0) {
|
||||
return (
|
||||
<div className={`text-center py-8 ${className}`}>
|
||||
<div className="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center mx-auto mb-3">
|
||||
<svg className="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Keine Ausreisser erkannt</p>
|
||||
<p className={`text-xs mt-1 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Alle Bewertungen sind konsistent</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<h3 className={`font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||||
Ausreisser ({fairness.outliers.length})
|
||||
</h3>
|
||||
<div className="space-y-2 max-h-64 overflow-y-auto">
|
||||
{fairness.outliers.map((outlier) => (
|
||||
<button
|
||||
key={outlier.student_id}
|
||||
onClick={() => onStudentClick(outlier.student_id)}
|
||||
className={`w-full p-3 rounded-xl border transition-colors text-left ${isDark ? 'bg-white/5 border-white/10 hover:bg-white/10' : 'bg-slate-100 border-slate-200 hover:bg-slate-200'}`}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{outlier.anonym_id}</span>
|
||||
<span
|
||||
className={`px-2 py-0.5 rounded-full text-xs font-medium ${
|
||||
outlier.deviation > 0
|
||||
? 'bg-green-500/20 text-green-400'
|
||||
: 'bg-red-500/20 text-red-400'
|
||||
}`}
|
||||
>
|
||||
{outlier.deviation > 0 ? '+' : ''}{outlier.deviation.toFixed(1)} Punkte
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
|
||||
{outlier.grade_points} Punkte ({getGradeLabel(outlier.grade_points)})
|
||||
</span>
|
||||
<span className={`text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>{outlier.reason}</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// FAIRNESS SCORE
|
||||
// =============================================================================
|
||||
|
||||
interface FairnessScoreProps {
|
||||
fairness: FairnessAnalysis | null
|
||||
className?: string
|
||||
isDark?: boolean
|
||||
}
|
||||
|
||||
function FairnessScore({ fairness, className = '', isDark = true }: FairnessScoreProps) {
|
||||
const score = fairness?.fairness_score || 0
|
||||
const percentage = Math.round(score * 100)
|
||||
|
||||
let color = '#22c55e' // Green
|
||||
let label = 'Ausgezeichnet'
|
||||
if (percentage < 70) {
|
||||
color = '#ef4444'
|
||||
label = 'Ueberpruefung empfohlen'
|
||||
} else if (percentage < 85) {
|
||||
color = '#f97316'
|
||||
label = 'Akzeptabel'
|
||||
} else if (percentage < 95) {
|
||||
color = '#22c55e'
|
||||
label = 'Gut'
|
||||
}
|
||||
|
||||
// SVG ring
|
||||
const size = 120
|
||||
const strokeWidth = 10
|
||||
const radius = (size - strokeWidth) / 2
|
||||
const circumference = radius * 2 * Math.PI
|
||||
const offset = circumference - (percentage / 100) * circumference
|
||||
|
||||
return (
|
||||
<div className={`text-center ${className}`}>
|
||||
<div className="relative inline-block" style={{ width: size, height: size }}>
|
||||
<svg className="transform -rotate-90" width={size} height={size}>
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
fill="none"
|
||||
stroke={isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}
|
||||
strokeWidth={strokeWidth}
|
||||
/>
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeDasharray={circumference}
|
||||
strokeDashoffset={offset}
|
||||
strokeLinecap="round"
|
||||
style={{ transition: 'stroke-dashoffset 1s ease-out' }}
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center">
|
||||
<span className={`text-3xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>{percentage}</span>
|
||||
<span className={`text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>%</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className={`font-medium mt-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>{label}</p>
|
||||
<p className={`text-xs mt-1 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Fairness-Score</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// MAIN PAGE
|
||||
// =============================================================================
|
||||
import { GlassCard, Histogram, CriteriaHeatmap, OutlierList, FairnessScore } from './_components/FairnessCharts'
|
||||
|
||||
export default function FairnessPage() {
|
||||
const { isDark } = useTheme()
|
||||
@@ -333,27 +16,22 @@ export default function FairnessPage() {
|
||||
const params = useParams()
|
||||
const klausurId = params.klausurId as string
|
||||
|
||||
// State
|
||||
const [klausur, setKlausur] = useState<Klausur | null>(null)
|
||||
const [students, setStudents] = useState<StudentWork[]>([])
|
||||
const [fairness, setFairness] = useState<FairnessAnalysis | null>(null)
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// Load data
|
||||
const loadData = useCallback(async () => {
|
||||
if (!klausurId) return
|
||||
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const [klausurData, studentsData, fairnessData] = await Promise.all([
|
||||
korrekturApi.getKlausur(klausurId),
|
||||
korrekturApi.getStudents(klausurId),
|
||||
korrekturApi.getFairnessAnalysis(klausurId),
|
||||
])
|
||||
|
||||
setKlausur(klausurData)
|
||||
setStudents(studentsData)
|
||||
setFairness(fairnessData)
|
||||
@@ -365,52 +43,30 @@ export default function FairnessPage() {
|
||||
}
|
||||
}, [klausurId])
|
||||
|
||||
useEffect(() => {
|
||||
loadData()
|
||||
}, [loadData])
|
||||
useEffect(() => { loadData() }, [loadData])
|
||||
|
||||
// Calculated stats
|
||||
const stats = useMemo(() => {
|
||||
if (!fairness) return null
|
||||
|
||||
return {
|
||||
studentCount: fairness.student_count,
|
||||
average: fairness.average_grade,
|
||||
stdDev: fairness.std_deviation,
|
||||
spread: fairness.spread,
|
||||
outlierCount: fairness.outliers.length,
|
||||
warningCount: fairness.warnings.length,
|
||||
studentCount: fairness.student_count, average: fairness.average_grade,
|
||||
stdDev: fairness.std_deviation, spread: fairness.spread,
|
||||
outlierCount: fairness.outliers.length, warningCount: fairness.warnings.length,
|
||||
}
|
||||
}, [fairness])
|
||||
|
||||
return (
|
||||
<div className={`min-h-screen flex relative overflow-hidden ${
|
||||
isDark
|
||||
? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800'
|
||||
: 'bg-gradient-to-br from-slate-100 via-blue-50 to-indigo-100'
|
||||
}`}>
|
||||
{/* Animated Background Blobs */}
|
||||
<div className={`min-h-screen flex relative overflow-hidden ${isDark ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800' : 'bg-gradient-to-br from-slate-100 via-blue-50 to-indigo-100'}`}>
|
||||
<div className={`absolute -top-40 -right-40 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl animate-blob ${isDark ? 'bg-purple-500 opacity-30' : 'bg-purple-300 opacity-40'}`} />
|
||||
<div className={`absolute top-1/2 -left-40 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000 ${isDark ? 'bg-pink-500 opacity-30' : 'bg-pink-300 opacity-40'}`} />
|
||||
<div className={`absolute -bottom-40 right-1/3 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000 ${isDark ? 'bg-blue-500 opacity-30' : 'bg-blue-300 opacity-40'}`} />
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="relative z-10 p-4">
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div className="relative z-10 p-4"><Sidebar /></div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex flex-col relative z-10 p-6 overflow-y-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => router.push(`/korrektur/${klausurId}`)}
|
||||
className={`p-2 rounded-xl transition-colors ${isDark ? 'bg-white/10 hover:bg-white/20 text-white' : 'bg-slate-200 hover:bg-slate-300 text-slate-700'}`}
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
<button onClick={() => router.push(`/korrektur/${klausurId}`)} className={`p-2 rounded-xl transition-colors ${isDark ? 'bg-white/10 hover:bg-white/20 text-white' : 'bg-slate-200 hover:bg-slate-300 text-slate-700'}`}>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
|
||||
</button>
|
||||
<div>
|
||||
<h1 className={`text-3xl font-bold mb-1 ${isDark ? 'text-white' : 'text-slate-900'}`}>Fairness-Analyse</h1>
|
||||
@@ -418,149 +74,49 @@ export default function FairnessPage() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<a
|
||||
href={korrekturApi.getOverviewExportUrl(klausurId)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`px-4 py-2 rounded-xl transition-colors flex items-center gap-2 ${isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-200 text-slate-700 hover:bg-slate-300'}`}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||
</svg>
|
||||
PDF Export
|
||||
<a href={korrekturApi.getOverviewExportUrl(klausurId)} target="_blank" rel="noopener noreferrer" className={`px-4 py-2 rounded-xl transition-colors flex items-center gap-2 ${isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-200 text-slate-700 hover:bg-slate-300'}`}>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>PDF Export
|
||||
</a>
|
||||
<ThemeToggle />
|
||||
<LanguageDropdown />
|
||||
<ThemeToggle /><LanguageDropdown />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<GlassCard className="mb-6" isDark={isDark}>
|
||||
<div className="flex items-center gap-3 text-red-400">
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>{error}</span>
|
||||
<button
|
||||
onClick={loadData}
|
||||
className={`ml-auto px-3 py-1 rounded-lg transition-colors text-sm ${isDark ? 'bg-white/10 hover:bg-white/20' : 'bg-slate-200 hover:bg-slate-300'}`}
|
||||
>
|
||||
Erneut versuchen
|
||||
</button>
|
||||
</div>
|
||||
</GlassCard>
|
||||
)}
|
||||
{error && (<GlassCard className="mb-6" isDark={isDark}><div className="flex items-center gap-3 text-red-400"><svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg><span>{error}</span><button onClick={loadData} className={`ml-auto px-3 py-1 rounded-lg transition-colors text-sm ${isDark ? 'bg-white/10 hover:bg-white/20' : 'bg-slate-200 hover:bg-slate-300'}`}>Erneut versuchen</button></div></GlassCard>)}
|
||||
|
||||
{/* Loading */}
|
||||
{isLoading && (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="w-12 h-12 border-4 border-purple-500 border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
{isLoading && (<div className="flex-1 flex items-center justify-center"><div className="w-12 h-12 border-4 border-purple-500 border-t-transparent rounded-full animate-spin" /></div>)}
|
||||
|
||||
{/* Content */}
|
||||
{!isLoading && fairness && (
|
||||
<>
|
||||
{/* Stats Row */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-6">
|
||||
<GlassCard delay={100} isDark={isDark}>
|
||||
<p className={`text-xs mb-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Arbeiten</p>
|
||||
<p className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>{stats?.studentCount}</p>
|
||||
</GlassCard>
|
||||
<GlassCard delay={150} isDark={isDark}>
|
||||
<p className={`text-xs mb-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Durchschnitt</p>
|
||||
<p className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||||
{stats?.average.toFixed(1)} P
|
||||
</p>
|
||||
</GlassCard>
|
||||
<GlassCard delay={200} isDark={isDark}>
|
||||
<p className={`text-xs mb-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Standardabw.</p>
|
||||
<p className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||||
{stats?.stdDev.toFixed(2)}
|
||||
</p>
|
||||
</GlassCard>
|
||||
<GlassCard delay={250} isDark={isDark}>
|
||||
<p className={`text-xs mb-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Spannweite</p>
|
||||
<p className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>{stats?.spread} P</p>
|
||||
</GlassCard>
|
||||
<GlassCard delay={300} isDark={isDark}>
|
||||
<p className={`text-xs mb-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Ausreisser</p>
|
||||
<p className={`text-2xl font-bold ${stats?.outlierCount ? 'text-amber-400' : 'text-green-400'}`}>
|
||||
{stats?.outlierCount}
|
||||
</p>
|
||||
</GlassCard>
|
||||
<GlassCard delay={350} isDark={isDark}>
|
||||
<p className={`text-xs mb-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Warnungen</p>
|
||||
<p className={`text-2xl font-bold ${stats?.warningCount ? 'text-red-400' : 'text-green-400'}`}>
|
||||
{stats?.warningCount}
|
||||
</p>
|
||||
</GlassCard>
|
||||
<GlassCard delay={100} isDark={isDark}><p className={`text-xs mb-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Arbeiten</p><p className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>{stats?.studentCount}</p></GlassCard>
|
||||
<GlassCard delay={150} isDark={isDark}><p className={`text-xs mb-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Durchschnitt</p><p className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>{stats?.average.toFixed(1)} P</p></GlassCard>
|
||||
<GlassCard delay={200} isDark={isDark}><p className={`text-xs mb-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Standardabw.</p><p className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>{stats?.stdDev.toFixed(2)}</p></GlassCard>
|
||||
<GlassCard delay={250} isDark={isDark}><p className={`text-xs mb-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Spannweite</p><p className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>{stats?.spread} P</p></GlassCard>
|
||||
<GlassCard delay={300} isDark={isDark}><p className={`text-xs mb-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Ausreisser</p><p className={`text-2xl font-bold ${stats?.outlierCount ? 'text-amber-400' : 'text-green-400'}`}>{stats?.outlierCount}</p></GlassCard>
|
||||
<GlassCard delay={350} isDark={isDark}><p className={`text-xs mb-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Warnungen</p><p className={`text-2xl font-bold ${stats?.warningCount ? 'text-red-400' : 'text-green-400'}`}>{stats?.warningCount}</p></GlassCard>
|
||||
</div>
|
||||
|
||||
{/* Warnings */}
|
||||
{fairness.warnings.length > 0 && (
|
||||
<GlassCard className="mb-6" delay={400} isDark={isDark}>
|
||||
<h3 className={`font-semibold mb-3 flex items-center gap-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||||
<svg className="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
Warnungen
|
||||
</h3>
|
||||
<ul className="space-y-2">
|
||||
{fairness.warnings.map((warning, index) => (
|
||||
<li key={index} className={`text-sm flex items-start gap-2 ${isDark ? 'text-white/70' : 'text-slate-600'}`}>
|
||||
<span className="text-amber-400 mt-1">-</span>
|
||||
{warning}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<h3 className={`font-semibold mb-3 flex items-center gap-2 ${isDark ? 'text-white' : 'text-slate-900'}`}><svg className="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>Warnungen</h3>
|
||||
<ul className="space-y-2">{fairness.warnings.map((warning, index) => (<li key={index} className={`text-sm flex items-start gap-2 ${isDark ? 'text-white/70' : 'text-slate-600'}`}><span className="text-amber-400 mt-1">-</span>{warning}</li>))}</ul>
|
||||
</GlassCard>
|
||||
)}
|
||||
|
||||
{/* Main Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Fairness Score */}
|
||||
<GlassCard delay={450} isDark={isDark}>
|
||||
<FairnessScore fairness={fairness} isDark={isDark} />
|
||||
</GlassCard>
|
||||
|
||||
{/* Histogram */}
|
||||
<GlassCard className="lg:col-span-2" delay={500} isDark={isDark}>
|
||||
<Histogram students={students} isDark={isDark} />
|
||||
</GlassCard>
|
||||
|
||||
{/* Criteria Heatmap */}
|
||||
<GlassCard delay={550} isDark={isDark}>
|
||||
<CriteriaHeatmap students={students} isDark={isDark} />
|
||||
</GlassCard>
|
||||
|
||||
{/* Outlier List */}
|
||||
<GlassCard className="lg:col-span-2" delay={600} isDark={isDark}>
|
||||
<OutlierList
|
||||
fairness={fairness}
|
||||
onStudentClick={(studentId) =>
|
||||
router.push(`/korrektur/${klausurId}/${studentId}`)
|
||||
}
|
||||
isDark={isDark}
|
||||
/>
|
||||
</GlassCard>
|
||||
<GlassCard delay={450} isDark={isDark}><FairnessScore fairness={fairness} isDark={isDark} /></GlassCard>
|
||||
<GlassCard className="lg:col-span-2" delay={500} isDark={isDark}><Histogram students={students} isDark={isDark} /></GlassCard>
|
||||
<GlassCard delay={550} isDark={isDark}><CriteriaHeatmap students={students} isDark={isDark} /></GlassCard>
|
||||
<GlassCard className="lg:col-span-2" delay={600} isDark={isDark}><OutlierList fairness={fairness} onStudentClick={(studentId) => router.push(`/korrektur/${klausurId}/${studentId}`)} isDark={isDark} /></GlassCard>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* No Data */}
|
||||
{!isLoading && !fairness && !error && (
|
||||
<GlassCard className="text-center py-12" isDark={isDark}>
|
||||
<div className={`w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 ${isDark ? 'bg-white/10' : 'bg-slate-200'}`}>
|
||||
<svg className={`w-8 h-8 ${isDark ? 'text-white/30' : 'text-slate-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className={`w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 ${isDark ? 'bg-white/10' : 'bg-slate-200'}`}><svg className={`w-8 h-8 ${isDark ? 'text-white/30' : 'text-slate-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg></div>
|
||||
<h3 className={`text-xl font-semibold mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>Keine Daten verfuegbar</h3>
|
||||
<p className={isDark ? 'text-white/50' : 'text-slate-500'}>
|
||||
Die Fairness-Analyse erfordert korrigierte Arbeiten.
|
||||
</p>
|
||||
<p className={isDark ? 'text-white/50' : 'text-slate-500'}>Die Fairness-Analyse erfordert korrigierte Arbeiten.</p>
|
||||
</GlassCard>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,313 +1,35 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useCallback, useRef } from 'react'
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { useRouter, useParams } from 'next/navigation'
|
||||
import { useTheme } from '@/lib/ThemeContext'
|
||||
import { Sidebar } from '@/components/Sidebar'
|
||||
import { ThemeToggle } from '@/components/ThemeToggle'
|
||||
import { LanguageDropdown } from '@/components/LanguageDropdown'
|
||||
import { QRCodeUpload, UploadedFile } from '@/components/QRCodeUpload'
|
||||
import { QRCodeUpload } from '@/components/QRCodeUpload'
|
||||
import { korrekturApi } from '@/lib/korrektur/api'
|
||||
import type { Klausur, StudentWork, StudentStatus } from '../types'
|
||||
import { STATUS_COLORS, STATUS_LABELS, getGradeLabel } from '../types'
|
||||
import type { Klausur, StudentWork } from '../types'
|
||||
import { GlassCard } from './_components/GlassCard'
|
||||
import { StudentCard } from './_components/StudentCard'
|
||||
import { UploadModal } from './_components/UploadModal'
|
||||
|
||||
// LocalStorage Key for upload session
|
||||
const SESSION_ID_KEY = 'bp_korrektur_student_session'
|
||||
|
||||
// =============================================================================
|
||||
// GLASS CARD
|
||||
// =============================================================================
|
||||
|
||||
interface GlassCardProps {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
onClick?: () => void
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
delay?: number
|
||||
}
|
||||
|
||||
function GlassCard({ children, className = '', onClick, size = 'md', delay = 0, isDark = true }: GlassCardProps & { isDark?: boolean }) {
|
||||
const [isVisible, setIsVisible] = useState(false)
|
||||
const [isHovered, setIsHovered] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setIsVisible(true), delay)
|
||||
return () => clearTimeout(timer)
|
||||
}, [delay])
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'p-4',
|
||||
md: 'p-5',
|
||||
lg: 'p-6',
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
rounded-3xl
|
||||
${sizeClasses[size]}
|
||||
${onClick ? 'cursor-pointer' : ''}
|
||||
${className}
|
||||
`}
|
||||
style={{
|
||||
background: isDark
|
||||
? (isHovered ? 'rgba(255, 255, 255, 0.12)' : 'rgba(255, 255, 255, 0.08)')
|
||||
: (isHovered ? 'rgba(255, 255, 255, 0.9)' : 'rgba(255, 255, 255, 0.7)'),
|
||||
backdropFilter: 'blur(24px) saturate(180%)',
|
||||
WebkitBackdropFilter: 'blur(24px) saturate(180%)',
|
||||
border: isDark ? '1px solid rgba(255, 255, 255, 0.1)' : '1px solid rgba(0, 0, 0, 0.1)',
|
||||
boxShadow: isDark
|
||||
? '0 4px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05)'
|
||||
: '0 4px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5)',
|
||||
opacity: isVisible ? 1 : 0,
|
||||
transform: isVisible
|
||||
? `translateY(0) scale(${isHovered ? 1.01 : 1})`
|
||||
: 'translateY(20px)',
|
||||
transition: 'all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)',
|
||||
}}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
onClick={onClick}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// STUDENT CARD
|
||||
// =============================================================================
|
||||
|
||||
interface StudentCardProps {
|
||||
student: StudentWork
|
||||
index: number
|
||||
onClick: () => void
|
||||
delay?: number
|
||||
isDark?: boolean
|
||||
}
|
||||
|
||||
function StudentCard({ student, index, onClick, delay = 0, isDark = true }: StudentCardProps) {
|
||||
const statusColor = STATUS_COLORS[student.status] || '#6b7280'
|
||||
const statusLabel = STATUS_LABELS[student.status] || student.status
|
||||
|
||||
const hasGrade = student.status === 'COMPLETED' || student.status === 'FIRST_EXAMINER' || student.status === 'SECOND_EXAMINER'
|
||||
|
||||
return (
|
||||
<GlassCard onClick={onClick} delay={delay} size="sm" isDark={isDark}>
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Index/Number */}
|
||||
<div className={`w-10 h-10 rounded-xl flex items-center justify-center font-medium ${isDark ? 'bg-white/10 text-white/60' : 'bg-slate-200 text-slate-600'}`}>
|
||||
{index + 1}
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className={`font-medium truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>{student.anonym_id}</p>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span
|
||||
className="px-2 py-0.5 rounded-full text-xs font-medium"
|
||||
style={{ backgroundColor: `${statusColor}20`, color: statusColor }}
|
||||
>
|
||||
{statusLabel}
|
||||
</span>
|
||||
{hasGrade && student.grade_points > 0 && (
|
||||
<span className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
|
||||
{student.grade_points} P ({getGradeLabel(student.grade_points)})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow */}
|
||||
<svg className={`w-5 h-5 ${isDark ? 'text-white/40' : 'text-slate-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</GlassCard>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// UPLOAD MODAL
|
||||
// =============================================================================
|
||||
|
||||
interface UploadModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
onUpload: (files: File[], anonymIds: string[]) => void
|
||||
isUploading: boolean
|
||||
}
|
||||
|
||||
function UploadModal({ isOpen, onClose, onUpload, isUploading }: UploadModalProps) {
|
||||
const [files, setFiles] = useState<File[]>([])
|
||||
const [anonymIds, setAnonymIds] = useState<string[]>([])
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
const handleFileSelect = (selectedFiles: FileList | null) => {
|
||||
if (!selectedFiles) return
|
||||
const newFiles = Array.from(selectedFiles)
|
||||
setFiles((prev) => [...prev, ...newFiles])
|
||||
// Generate default anonym IDs
|
||||
setAnonymIds((prev) => [
|
||||
...prev,
|
||||
...newFiles.map((_, i) => `Arbeit-${prev.length + i + 1}`),
|
||||
])
|
||||
}
|
||||
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault()
|
||||
handleFileSelect(e.dataTransfer.files)
|
||||
}
|
||||
|
||||
const removeFile = (index: number) => {
|
||||
setFiles((prev) => prev.filter((_, i) => i !== index))
|
||||
setAnonymIds((prev) => prev.filter((_, i) => i !== index))
|
||||
}
|
||||
|
||||
const updateAnonymId = (index: number, value: string) => {
|
||||
setAnonymIds((prev) => {
|
||||
const updated = [...prev]
|
||||
updated[index] = value
|
||||
return updated
|
||||
})
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (files.length > 0) {
|
||||
onUpload(files, anonymIds)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
|
||||
<GlassCard className="relative w-full max-w-2xl max-h-[80vh] overflow-hidden" size="lg" delay={0}>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-bold text-white">Arbeiten hochladen</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 rounded-lg hover:bg-white/10 text-white/60 transition-colors"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Drop Zone */}
|
||||
<div
|
||||
className="border-2 border-dashed border-white/20 rounded-2xl p-8 text-center cursor-pointer transition-all hover:border-purple-400/50 hover:bg-white/5 mb-6"
|
||||
onDrop={handleDrop}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*,.pdf"
|
||||
multiple
|
||||
onChange={(e) => handleFileSelect(e.target.files)}
|
||||
className="hidden"
|
||||
/>
|
||||
<svg className="w-12 h-12 mx-auto mb-3 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||
</svg>
|
||||
<p className="text-white font-medium">Dateien hierher ziehen</p>
|
||||
<p className="text-white/50 text-sm mt-1">oder klicken zum Auswaehlen</p>
|
||||
</div>
|
||||
|
||||
{/* File List */}
|
||||
{files.length > 0 && (
|
||||
<div className="max-h-64 overflow-y-auto space-y-2 mb-6">
|
||||
{files.map((file, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center gap-3 p-3 rounded-xl bg-white/5"
|
||||
>
|
||||
<span className="text-lg">
|
||||
{file.type.startsWith('image/') ? '🖼️' : '📄'}
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-white text-sm truncate">{file.name}</p>
|
||||
<input
|
||||
type="text"
|
||||
value={anonymIds[index] || ''}
|
||||
onChange={(e) => updateAnonymId(index, e.target.value)}
|
||||
placeholder="Anonym-ID"
|
||||
className="mt-1 w-full px-2 py-1 rounded bg-white/10 border border-white/10 text-white text-sm placeholder-white/40 focus:outline-none focus:border-purple-500"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => removeFile(index)}
|
||||
className="p-2 rounded-lg hover:bg-red-500/20 text-red-400 transition-colors"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="flex-1 px-4 py-3 rounded-xl bg-white/10 text-white hover:bg-white/20 transition-colors"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={isUploading || files.length === 0}
|
||||
className="flex-1 px-4 py-3 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold hover:shadow-lg hover:shadow-purple-500/30 transition-all disabled:opacity-50 flex items-center justify-center gap-2"
|
||||
>
|
||||
{isUploading ? (
|
||||
<>
|
||||
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
Hochladen...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
|
||||
</svg>
|
||||
{files.length} Dateien hochladen
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</GlassCard>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// MAIN PAGE
|
||||
// =============================================================================
|
||||
|
||||
export default function KlausurDetailPage() {
|
||||
const { isDark } = useTheme()
|
||||
const router = useRouter()
|
||||
const params = useParams()
|
||||
const klausurId = params.klausurId as string
|
||||
|
||||
// State
|
||||
const [klausur, setKlausur] = useState<Klausur | null>(null)
|
||||
const [students, setStudents] = useState<StudentWork[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// Modal states
|
||||
const [showUploadModal, setShowUploadModal] = useState(false)
|
||||
const [showQRModal, setShowQRModal] = useState(false)
|
||||
const [isUploading, setIsUploading] = useState(false)
|
||||
const [uploadSessionId, setUploadSessionId] = useState('')
|
||||
|
||||
// Initialize session ID
|
||||
useEffect(() => {
|
||||
let storedSessionId = localStorage.getItem(SESSION_ID_KEY)
|
||||
if (!storedSessionId) {
|
||||
@@ -317,13 +39,10 @@ export default function KlausurDetailPage() {
|
||||
setUploadSessionId(storedSessionId)
|
||||
}, [])
|
||||
|
||||
// Load data
|
||||
const loadData = useCallback(async () => {
|
||||
if (!klausurId) return
|
||||
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const [klausurData, studentsData] = await Promise.all([
|
||||
korrekturApi.getKlausur(klausurId),
|
||||
@@ -339,11 +58,8 @@ export default function KlausurDetailPage() {
|
||||
}
|
||||
}, [klausurId])
|
||||
|
||||
useEffect(() => {
|
||||
loadData()
|
||||
}, [loadData])
|
||||
useEffect(() => { loadData() }, [loadData])
|
||||
|
||||
// Handle upload
|
||||
const handleUpload = async (files: File[], anonymIds: string[]) => {
|
||||
setIsUploading(true)
|
||||
try {
|
||||
@@ -351,7 +67,7 @@ export default function KlausurDetailPage() {
|
||||
await korrekturApi.uploadStudentWork(klausurId, files[i], anonymIds[i])
|
||||
}
|
||||
setShowUploadModal(false)
|
||||
loadData() // Refresh the list
|
||||
loadData()
|
||||
} catch (err) {
|
||||
console.error('Upload failed:', err)
|
||||
setError(err instanceof Error ? err.message : 'Upload fehlgeschlagen')
|
||||
@@ -360,85 +76,40 @@ export default function KlausurDetailPage() {
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate progress
|
||||
const completedCount = students.filter(s => s.status === 'COMPLETED').length
|
||||
const progress = students.length > 0 ? Math.round((completedCount / students.length) * 100) : 0
|
||||
|
||||
return (
|
||||
<div className={`min-h-screen flex relative overflow-hidden ${
|
||||
isDark
|
||||
? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800'
|
||||
: 'bg-gradient-to-br from-slate-100 via-blue-50 to-indigo-100'
|
||||
}`}>
|
||||
{/* Animated Background Blobs */}
|
||||
<div className={`min-h-screen flex relative overflow-hidden ${isDark ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800' : 'bg-gradient-to-br from-slate-100 via-blue-50 to-indigo-100'}`}>
|
||||
<div className={`absolute -top-40 -right-40 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl animate-blob ${isDark ? 'bg-purple-500 opacity-30' : 'bg-purple-300 opacity-40'}`} />
|
||||
<div className={`absolute top-1/2 -left-40 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000 ${isDark ? 'bg-pink-500 opacity-30' : 'bg-pink-300 opacity-40'}`} />
|
||||
<div className={`absolute -bottom-40 right-1/3 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000 ${isDark ? 'bg-blue-500 opacity-30' : 'bg-blue-300 opacity-40'}`} />
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="relative z-10 p-4">
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div className="relative z-10 p-4"><Sidebar /></div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex flex-col relative z-10 p-6 overflow-y-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => router.push('/korrektur')}
|
||||
className={`p-2 rounded-xl transition-colors ${isDark ? 'bg-white/10 hover:bg-white/20 text-white' : 'bg-slate-200 hover:bg-slate-300 text-slate-700'}`}
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
<button onClick={() => router.push('/korrektur')} className={`p-2 rounded-xl transition-colors ${isDark ? 'bg-white/10 hover:bg-white/20 text-white' : 'bg-slate-200 hover:bg-slate-300 text-slate-700'}`}>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
|
||||
</button>
|
||||
<div>
|
||||
<h1 className={`text-3xl font-bold mb-1 ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||||
{klausur?.title || 'Klausur'}
|
||||
</h1>
|
||||
<p className={isDark ? 'text-white/50' : 'text-slate-500'}>
|
||||
{klausur ? `${klausur.subject} ${klausur.semester} ${klausur.year}` : ''}
|
||||
</p>
|
||||
<h1 className={`text-3xl font-bold mb-1 ${isDark ? 'text-white' : 'text-slate-900'}`}>{klausur?.title || 'Klausur'}</h1>
|
||||
<p className={isDark ? 'text-white/50' : 'text-slate-500'}>{klausur ? `${klausur.subject} ${klausur.semester} ${klausur.year}` : ''}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<ThemeToggle />
|
||||
<LanguageDropdown />
|
||||
</div>
|
||||
<div className="flex items-center gap-3"><ThemeToggle /><LanguageDropdown /></div>
|
||||
</div>
|
||||
|
||||
{/* Stats Row */}
|
||||
{!isLoading && klausur && (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-4 gap-4 mb-8">
|
||||
<GlassCard size="sm" delay={100} isDark={isDark}>
|
||||
<div className="text-center">
|
||||
<p className={`text-3xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>{students.length}</p>
|
||||
<p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Arbeiten</p>
|
||||
</div>
|
||||
</GlassCard>
|
||||
<GlassCard size="sm" delay={150} isDark={isDark}>
|
||||
<div className="text-center">
|
||||
<p className="text-3xl font-bold text-green-400">{completedCount}</p>
|
||||
<p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Abgeschlossen</p>
|
||||
</div>
|
||||
</GlassCard>
|
||||
<GlassCard size="sm" delay={200} isDark={isDark}>
|
||||
<div className="text-center">
|
||||
<p className="text-3xl font-bold text-orange-400">{students.length - completedCount}</p>
|
||||
<p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Offen</p>
|
||||
</div>
|
||||
</GlassCard>
|
||||
<GlassCard size="sm" delay={250} isDark={isDark}>
|
||||
<div className="text-center">
|
||||
<p className="text-3xl font-bold text-purple-400">{progress}%</p>
|
||||
<p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Fortschritt</p>
|
||||
</div>
|
||||
</GlassCard>
|
||||
<GlassCard size="sm" delay={100} isDark={isDark}><div className="text-center"><p className={`text-3xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>{students.length}</p><p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Arbeiten</p></div></GlassCard>
|
||||
<GlassCard size="sm" delay={150} isDark={isDark}><div className="text-center"><p className="text-3xl font-bold text-green-400">{completedCount}</p><p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Abgeschlossen</p></div></GlassCard>
|
||||
<GlassCard size="sm" delay={200} isDark={isDark}><div className="text-center"><p className="text-3xl font-bold text-orange-400">{students.length - completedCount}</p><p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Offen</p></div></GlassCard>
|
||||
<GlassCard size="sm" delay={250} isDark={isDark}><div className="text-center"><p className="text-3xl font-bold text-purple-400">{progress}%</p><p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Fortschritt</p></div></GlassCard>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Progress Bar */}
|
||||
{!isLoading && students.length > 0 && (
|
||||
<GlassCard size="sm" className="mb-6" delay={300} isDark={isDark}>
|
||||
<div className="flex items-center justify-between text-sm mb-2">
|
||||
@@ -446,130 +117,68 @@ export default function KlausurDetailPage() {
|
||||
<span className={isDark ? 'text-white' : 'text-slate-900'}>{completedCount}/{students.length} korrigiert</span>
|
||||
</div>
|
||||
<div className={`h-3 rounded-full overflow-hidden ${isDark ? 'bg-white/10' : 'bg-slate-200'}`}>
|
||||
<div
|
||||
className="h-full rounded-full transition-all duration-500 bg-gradient-to-r from-green-500 to-emerald-400"
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
<div className="h-full rounded-full transition-all duration-500 bg-gradient-to-r from-green-500 to-emerald-400" style={{ width: `${progress}%` }} />
|
||||
</div>
|
||||
</GlassCard>
|
||||
)}
|
||||
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<GlassCard className="mb-6" size="sm" isDark={isDark}>
|
||||
<div className="flex items-center gap-3 text-red-400">
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
<span>{error}</span>
|
||||
<button
|
||||
onClick={loadData}
|
||||
className={`ml-auto px-3 py-1 rounded-lg transition-colors text-sm ${isDark ? 'bg-white/10 hover:bg-white/20' : 'bg-slate-200 hover:bg-slate-300'}`}
|
||||
>
|
||||
Erneut versuchen
|
||||
</button>
|
||||
<button onClick={loadData} className={`ml-auto px-3 py-1 rounded-lg transition-colors text-sm ${isDark ? 'bg-white/10 hover:bg-white/20' : 'bg-slate-200 hover:bg-slate-300'}`}>Erneut versuchen</button>
|
||||
</div>
|
||||
</GlassCard>
|
||||
)}
|
||||
|
||||
{/* Loading */}
|
||||
{isLoading && (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="w-12 h-12 border-4 border-purple-500 border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
{isLoading && (<div className="flex-1 flex items-center justify-center"><div className="w-12 h-12 border-4 border-purple-500 border-t-transparent rounded-full animate-spin" /></div>)}
|
||||
|
||||
{/* Action Buttons */}
|
||||
{!isLoading && (
|
||||
<div className="flex gap-3 mb-6">
|
||||
<button
|
||||
onClick={() => setShowUploadModal(true)}
|
||||
className="px-6 py-3 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold hover:shadow-lg hover:shadow-purple-500/30 transition-all flex items-center gap-2"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
|
||||
</svg>
|
||||
<button onClick={() => setShowUploadModal(true)} className="px-6 py-3 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold hover:shadow-lg hover:shadow-purple-500/30 transition-all flex items-center gap-2">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" /></svg>
|
||||
Arbeiten hochladen
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowQRModal(true)}
|
||||
className={`px-6 py-3 rounded-xl transition-colors flex items-center gap-2 ${isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-200 text-slate-700 hover:bg-slate-300'}`}
|
||||
>
|
||||
<span className="text-xl">📱</span>
|
||||
QR Upload
|
||||
<button onClick={() => setShowQRModal(true)} className={`px-6 py-3 rounded-xl transition-colors flex items-center gap-2 ${isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-200 text-slate-700 hover:bg-slate-300'}`}>
|
||||
<span className="text-xl">📱</span>QR Upload
|
||||
</button>
|
||||
{students.length > 0 && (
|
||||
<button
|
||||
onClick={() => router.push(`/korrektur/${klausurId}/fairness`)}
|
||||
className={`px-6 py-3 rounded-xl transition-colors flex items-center gap-2 ${isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-200 text-slate-700 hover:bg-slate-300'}`}
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
<button onClick={() => router.push(`/korrektur/${klausurId}/fairness`)} className={`px-6 py-3 rounded-xl transition-colors flex items-center gap-2 ${isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-200 text-slate-700 hover:bg-slate-300'}`}>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
|
||||
Fairness-Analyse
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Students List */}
|
||||
{!isLoading && students.length === 0 && (
|
||||
<GlassCard className="text-center py-12" delay={350} isDark={isDark}>
|
||||
<div className={`w-20 h-20 mx-auto mb-4 rounded-2xl flex items-center justify-center ${isDark ? 'bg-white/10' : 'bg-slate-200'}`}>
|
||||
<svg className={`w-10 h-10 ${isDark ? 'text-white/30' : 'text-slate-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
<svg className={`w-10 h-10 ${isDark ? 'text-white/30' : 'text-slate-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
|
||||
</div>
|
||||
<h3 className={`text-xl font-semibold mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>Keine Arbeiten vorhanden</h3>
|
||||
<p className={`mb-6 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Laden Sie Schuelerarbeiten hoch, um mit der Korrektur zu beginnen.</p>
|
||||
<button
|
||||
onClick={() => setShowUploadModal(true)}
|
||||
className="px-6 py-3 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold hover:shadow-lg hover:shadow-purple-500/30 transition-all"
|
||||
>
|
||||
Arbeiten hochladen
|
||||
</button>
|
||||
<button onClick={() => setShowUploadModal(true)} className="px-6 py-3 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold hover:shadow-lg hover:shadow-purple-500/30 transition-all">Arbeiten hochladen</button>
|
||||
</GlassCard>
|
||||
)}
|
||||
|
||||
{!isLoading && students.length > 0 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{students.map((student, index) => (
|
||||
<StudentCard
|
||||
key={student.id}
|
||||
student={student}
|
||||
index={index}
|
||||
onClick={() => router.push(`/korrektur/${klausurId}/${student.id}`)}
|
||||
delay={350 + index * 30}
|
||||
isDark={isDark}
|
||||
/>
|
||||
<StudentCard key={student.id} student={student} index={index} onClick={() => router.push(`/korrektur/${klausurId}/${student.id}`)} delay={350 + index * 30} isDark={isDark} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Upload Modal */}
|
||||
<UploadModal
|
||||
isOpen={showUploadModal}
|
||||
onClose={() => setShowUploadModal(false)}
|
||||
onUpload={handleUpload}
|
||||
isUploading={isUploading}
|
||||
/>
|
||||
<UploadModal isOpen={showUploadModal} onClose={() => setShowUploadModal(false)} onUpload={handleUpload} isUploading={isUploading} />
|
||||
|
||||
{/* QR Code Modal */}
|
||||
{showQRModal && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setShowQRModal(false)} />
|
||||
<div className={`relative w-full max-w-md rounded-3xl ${isDark ? 'bg-slate-900' : 'bg-white'}`}>
|
||||
<QRCodeUpload
|
||||
sessionId={uploadSessionId}
|
||||
onClose={() => setShowQRModal(false)}
|
||||
onFilesChanged={(files) => {
|
||||
// Handle mobile uploaded files
|
||||
if (files.length > 0) {
|
||||
// Could auto-process the files here
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<QRCodeUpload sessionId={uploadSessionId} onClose={() => setShowQRModal(false)} onFilesChanged={() => {}} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -2,9 +2,8 @@
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useTheme } from '@/lib/ThemeContext'
|
||||
import { useAlerts, lehrerThemen, Topic, AlertImportance } from '@/lib/AlertsContext'
|
||||
import { InfoBox, TipBox, StepBox } from './InfoBox'
|
||||
import { BPIcon } from './Logo'
|
||||
import { useAlerts, lehrerThemen, AlertImportance } from '@/lib/AlertsContext'
|
||||
import { Step1TopicSelection, Step2Instructions, Step3Forwarding, Step4Settings } from './alerts-wizard/AlertsWizardSteps'
|
||||
|
||||
interface AlertsWizardProps {
|
||||
onComplete: () => void
|
||||
@@ -13,7 +12,7 @@ interface AlertsWizardProps {
|
||||
|
||||
export function AlertsWizard({ onComplete, onSkip }: AlertsWizardProps) {
|
||||
const { isDark } = useTheme()
|
||||
const { addTopic, updateSettings, settings } = useAlerts()
|
||||
const { addTopic, updateSettings } = useAlerts()
|
||||
|
||||
const [step, setStep] = useState(1)
|
||||
const [selectedTopics, setSelectedTopics] = useState<string[]>([])
|
||||
@@ -24,528 +23,78 @@ export function AlertsWizard({ onComplete, onSkip }: AlertsWizardProps) {
|
||||
|
||||
const totalSteps = 4
|
||||
|
||||
const handleNext = () => {
|
||||
if (step < totalSteps) {
|
||||
setStep(step + 1)
|
||||
} else {
|
||||
// Wizard abschliessen
|
||||
completeWizard()
|
||||
}
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
if (step > 1) {
|
||||
setStep(step - 1)
|
||||
}
|
||||
}
|
||||
const handleNext = () => { if (step < totalSteps) setStep(step + 1); else completeWizard() }
|
||||
const handleBack = () => { if (step > 1) setStep(step - 1) }
|
||||
|
||||
const completeWizard = () => {
|
||||
// Ausgewaehlte vordefinierte Topics hinzufuegen
|
||||
selectedTopics.forEach(topicId => {
|
||||
const topic = lehrerThemen.find(t => t.name === topicId)
|
||||
if (topic) {
|
||||
addTopic({
|
||||
id: `topic-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
||||
name: topic.name,
|
||||
keywords: topic.keywords,
|
||||
icon: topic.icon,
|
||||
isActive: true,
|
||||
rssFeedUrl: rssFeedUrl || undefined
|
||||
})
|
||||
addTopic({ id: `topic-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, name: topic.name, keywords: topic.keywords, icon: topic.icon, isActive: true, rssFeedUrl: rssFeedUrl || undefined })
|
||||
}
|
||||
})
|
||||
|
||||
// Custom Topic hinzufuegen falls vorhanden
|
||||
if (customTopic.name.trim()) {
|
||||
addTopic({
|
||||
id: `topic-${Date.now()}-custom`,
|
||||
name: customTopic.name,
|
||||
keywords: customTopic.keywords.split(',').map(k => k.trim()).filter(k => k),
|
||||
icon: '📌',
|
||||
isActive: true,
|
||||
rssFeedUrl: rssFeedUrl || undefined
|
||||
})
|
||||
addTopic({ id: `topic-${Date.now()}-custom`, name: customTopic.name, keywords: customTopic.keywords.split(',').map(k => k.trim()).filter(k => k), icon: '📌', isActive: true, rssFeedUrl: rssFeedUrl || undefined })
|
||||
}
|
||||
|
||||
// Settings speichern
|
||||
updateSettings({
|
||||
notificationFrequency,
|
||||
minImportance,
|
||||
wizardCompleted: true
|
||||
})
|
||||
|
||||
updateSettings({ notificationFrequency, minImportance, wizardCompleted: true })
|
||||
onComplete()
|
||||
}
|
||||
|
||||
const toggleTopic = (topicName: string) => {
|
||||
setSelectedTopics(prev =>
|
||||
prev.includes(topicName)
|
||||
? prev.filter(t => t !== topicName)
|
||||
: [...prev, topicName]
|
||||
)
|
||||
setSelectedTopics(prev => prev.includes(topicName) ? prev.filter(t => t !== topicName) : [...prev, topicName])
|
||||
}
|
||||
|
||||
const canProceed = () => {
|
||||
switch (step) {
|
||||
case 1:
|
||||
return selectedTopics.length > 0 || customTopic.name.trim().length > 0
|
||||
case 2:
|
||||
return true // Info-Schritt, immer weiter
|
||||
case 3:
|
||||
return true // RSS optional
|
||||
case 4:
|
||||
return true // Einstellungen immer gueltig
|
||||
default:
|
||||
return false
|
||||
}
|
||||
if (step === 1) return selectedTopics.length > 0 || customTopic.name.trim().length > 0
|
||||
return true
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`min-h-screen flex flex-col ${
|
||||
isDark
|
||||
? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800'
|
||||
: 'bg-gradient-to-br from-slate-100 via-blue-50 to-indigo-100'
|
||||
}`}>
|
||||
{/* Animated Background */}
|
||||
<div className={`min-h-screen flex flex-col ${isDark ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800' : 'bg-gradient-to-br from-slate-100 via-blue-50 to-indigo-100'}`}>
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div className={`absolute -top-40 -right-40 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-pulse ${
|
||||
isDark ? 'bg-amber-500 opacity-50' : 'bg-amber-300 opacity-30'
|
||||
}`} />
|
||||
<div className={`absolute -bottom-40 -left-40 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-pulse ${
|
||||
isDark ? 'bg-orange-500 opacity-50' : 'bg-orange-300 opacity-30'
|
||||
}`} style={{ animationDelay: '1s' }} />
|
||||
<div className={`absolute -top-40 -right-40 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-pulse ${isDark ? 'bg-amber-500 opacity-50' : 'bg-amber-300 opacity-30'}`} />
|
||||
<div className={`absolute -bottom-40 -left-40 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-pulse ${isDark ? 'bg-orange-500 opacity-50' : 'bg-orange-300 opacity-30'}`} style={{ animationDelay: '1s' }} />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 flex-1 flex flex-col items-center justify-center p-8">
|
||||
{/* Logo & Titel */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex items-center justify-center gap-3 mb-4">
|
||||
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-3xl shadow-lg">
|
||||
🔔
|
||||
</div>
|
||||
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-3xl shadow-lg">🔔</div>
|
||||
<div className="text-left">
|
||||
<h1 className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||||
Google Alerts einrichten
|
||||
</h1>
|
||||
<p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
|
||||
Bleiben Sie informiert ueber Bildungsthemen
|
||||
</p>
|
||||
<h1 className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>Google Alerts einrichten</h1>
|
||||
<p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Bleiben Sie informiert ueber Bildungsthemen</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="w-full max-w-2xl mb-8">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
{[1, 2, 3, 4].map((s) => (
|
||||
<div
|
||||
key={s}
|
||||
className={`w-10 h-10 rounded-full flex items-center justify-center font-medium transition-all ${
|
||||
s === step
|
||||
? 'bg-gradient-to-br from-amber-400 to-orange-500 text-white scale-110 shadow-lg'
|
||||
: s < step
|
||||
? isDark
|
||||
? 'bg-green-500/30 text-green-300'
|
||||
: 'bg-green-100 text-green-700'
|
||||
: isDark
|
||||
? 'bg-white/10 text-white/40'
|
||||
: 'bg-slate-200 text-slate-400'
|
||||
}`}
|
||||
>
|
||||
<div key={s} className={`w-10 h-10 rounded-full flex items-center justify-center font-medium transition-all ${s === step ? 'bg-gradient-to-br from-amber-400 to-orange-500 text-white scale-110 shadow-lg' : s < step ? (isDark ? 'bg-green-500/30 text-green-300' : 'bg-green-100 text-green-700') : (isDark ? 'bg-white/10 text-white/40' : 'bg-slate-200 text-slate-400')}`}>
|
||||
{s < step ? '✓' : s}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={`h-2 rounded-full overflow-hidden ${isDark ? 'bg-white/10' : 'bg-slate-200'}`}>
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-amber-400 to-orange-500 transition-all duration-500"
|
||||
style={{ width: `${((step - 1) / (totalSteps - 1)) * 100}%` }}
|
||||
/>
|
||||
<div className="h-full bg-gradient-to-r from-amber-400 to-orange-500 transition-all duration-500" style={{ width: `${((step - 1) / (totalSteps - 1)) * 100}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Card */}
|
||||
<div className={`w-full max-w-2xl backdrop-blur-xl border rounded-3xl p-8 ${
|
||||
isDark
|
||||
? 'bg-white/10 border-white/20'
|
||||
: 'bg-white/80 border-black/10 shadow-xl'
|
||||
}`}>
|
||||
{/* Step 1: Themen waehlen */}
|
||||
{step === 1 && (
|
||||
<div>
|
||||
<h2 className={`text-2xl font-bold mb-2 text-center ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||||
Welche Themen interessieren Sie?
|
||||
</h2>
|
||||
<p className={`mb-6 text-center ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
|
||||
Waehlen Sie Themen, ueber die Sie informiert werden moechten
|
||||
</p>
|
||||
|
||||
{/* Vordefinierte Themen */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3 mb-6">
|
||||
{lehrerThemen.map((topic) => {
|
||||
const isSelected = selectedTopics.includes(topic.name)
|
||||
return (
|
||||
<button
|
||||
key={topic.name}
|
||||
onClick={() => toggleTopic(topic.name)}
|
||||
className={`p-4 rounded-xl border-2 transition-all hover:scale-105 text-left ${
|
||||
isSelected
|
||||
? 'border-amber-500 bg-amber-500/20 shadow-lg'
|
||||
: isDark
|
||||
? 'border-white/10 bg-white/5 hover:bg-white/10 hover:border-white/20'
|
||||
: 'border-slate-200 bg-white hover:bg-slate-50 hover:border-slate-300'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">{topic.icon}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className={`font-medium truncate ${
|
||||
isSelected
|
||||
? isDark ? 'text-amber-300' : 'text-amber-700'
|
||||
: isDark ? 'text-white' : 'text-slate-900'
|
||||
}`}>
|
||||
{topic.name}
|
||||
</p>
|
||||
<p className={`text-xs truncate ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
|
||||
{topic.keywords.slice(0, 2).join(', ')}
|
||||
</p>
|
||||
</div>
|
||||
{isSelected && (
|
||||
<div className="w-6 h-6 rounded-full bg-amber-500 flex items-center justify-center">
|
||||
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Custom Topic */}
|
||||
<div className={`p-4 rounded-xl border ${isDark ? 'bg-white/5 border-white/10' : 'bg-slate-50 border-slate-200'}`}>
|
||||
<h4 className={`font-medium mb-3 flex items-center gap-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||||
<span>📌</span> Eigenes Thema hinzufuegen
|
||||
</h4>
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Themenname (z.B. 'Mathematik Didaktik')"
|
||||
value={customTopic.name}
|
||||
onChange={(e) => setCustomTopic({ ...customTopic, name: e.target.value })}
|
||||
className={`w-full px-4 py-2 rounded-lg border ${
|
||||
isDark
|
||||
? 'bg-white/10 border-white/20 text-white placeholder-white/40'
|
||||
: 'bg-white border-slate-200 text-slate-900 placeholder-slate-400'
|
||||
}`}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Stichwoerter (kommagetrennt)"
|
||||
value={customTopic.keywords}
|
||||
onChange={(e) => setCustomTopic({ ...customTopic, keywords: e.target.value })}
|
||||
className={`w-full px-4 py-2 rounded-lg border ${
|
||||
isDark
|
||||
? 'bg-white/10 border-white/20 text-white placeholder-white/40'
|
||||
: 'bg-white border-slate-200 text-slate-900 placeholder-slate-400'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 2: Google Alerts Anleitung */}
|
||||
{step === 2 && (
|
||||
<div>
|
||||
<h2 className={`text-2xl font-bold mb-2 text-center ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||||
Google Alerts einrichten
|
||||
</h2>
|
||||
<p className={`mb-6 text-center ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
|
||||
Google sendet Alerts per E-Mail - wir verarbeiten sie fuer Sie
|
||||
</p>
|
||||
|
||||
<InfoBox variant="info" title="So funktioniert es" icon="💡" className="mb-6">
|
||||
<p>
|
||||
Google Alerts versendet Benachrichtigungen per E-Mail an Ihr Konto.
|
||||
Sie richten einfach eine Weiterleitung ein - wir uebernehmen die
|
||||
Auswertung, Filterung und Zusammenfassung.
|
||||
</p>
|
||||
</InfoBox>
|
||||
|
||||
<div className="space-y-4">
|
||||
<StepBox step={1} title="Google Alerts oeffnen" isActive>
|
||||
<p className="mb-2">
|
||||
Besuchen Sie <a
|
||||
href="https://www.google.de/alerts"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-amber-500 hover:underline font-medium"
|
||||
>
|
||||
google.de/alerts
|
||||
</a> und melden Sie sich mit Ihrem Google-Konto an.
|
||||
</p>
|
||||
</StepBox>
|
||||
|
||||
<StepBox step={2} title="Alerts erstellen">
|
||||
<p>
|
||||
Geben Sie Suchbegriffe ein (z.B. "{selectedTopics[0] || 'Bildungspolitik'}")
|
||||
und erstellen Sie Alerts. Die Alerts werden an Ihre E-Mail-Adresse gesendet.
|
||||
</p>
|
||||
</StepBox>
|
||||
|
||||
<StepBox step={3} title="E-Mail-Weiterleitung einrichten">
|
||||
<p>
|
||||
Im naechsten Schritt richten Sie eine automatische Weiterleitung
|
||||
der Google Alert E-Mails an uns ein. So verarbeiten wir Ihre Alerts
|
||||
automatisch.
|
||||
</p>
|
||||
</StepBox>
|
||||
</div>
|
||||
|
||||
<TipBox title="Tipp: Mehrere Alerts kombinieren" icon="💡" className="mt-6">
|
||||
<p>
|
||||
Sie koennen beliebig viele Google Alerts erstellen. Alle werden
|
||||
per E-Mail an Sie gesendet und durch die Weiterleitung automatisch
|
||||
verarbeitet - gefiltert, priorisiert und zusammengefasst.
|
||||
</p>
|
||||
</TipBox>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 3: E-Mail Weiterleitung einrichten */}
|
||||
{step === 3 && (
|
||||
<div>
|
||||
<h2 className={`text-2xl font-bold mb-2 text-center ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||||
E-Mail Weiterleitung einrichten
|
||||
</h2>
|
||||
<p className={`mb-6 text-center ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
|
||||
Leiten Sie Ihre Google Alert E-Mails automatisch an uns weiter
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Empfohlene Methode: E-Mail Weiterleitung */}
|
||||
<div className={`p-5 rounded-xl border-2 ${isDark ? 'border-green-500/50 bg-green-500/10' : 'border-green-500 bg-green-50'}`}>
|
||||
<div className="flex items-start gap-3 mb-4">
|
||||
<span className="text-2xl">📧</span>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h4 className={`font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||||
E-Mail Weiterleitung
|
||||
</h4>
|
||||
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-green-500/20 text-green-600">
|
||||
Empfohlen
|
||||
</span>
|
||||
</div>
|
||||
<p className={`text-sm ${isDark ? 'text-white/70' : 'text-slate-600'}`}>
|
||||
Richten Sie in Gmail einen Filter ein, der Google Alert E-Mails automatisch weiterleitet.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`p-3 rounded-lg ${isDark ? 'bg-white/10' : 'bg-white'}`}>
|
||||
<p className={`text-sm font-medium mb-2 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>
|
||||
Ihre Weiterleitungsadresse:
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<code className={`flex-1 px-3 py-2 rounded-lg text-sm font-mono ${
|
||||
isDark ? 'bg-white/10 text-amber-300' : 'bg-slate-100 text-amber-600'
|
||||
}`}>
|
||||
alerts@breakpilot.de
|
||||
</code>
|
||||
<button
|
||||
onClick={() => navigator.clipboard.writeText('alerts@breakpilot.de')}
|
||||
className="px-3 py-2 rounded-lg bg-amber-500 text-white text-sm hover:bg-amber-600 transition-all"
|
||||
>
|
||||
Kopieren
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 space-y-2">
|
||||
<p className={`text-sm font-medium ${isDark ? 'text-white/80' : 'text-slate-700'}`}>
|
||||
So richten Sie die Weiterleitung in Gmail ein:
|
||||
</p>
|
||||
<ol className={`text-sm space-y-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
|
||||
<li>1. Oeffnen Sie Gmail → Einstellungen → Filter</li>
|
||||
<li>2. Neuer Filter: Von "googlealerts-noreply@google.com"</li>
|
||||
<li>3. Aktion: Weiterleiten an "alerts@breakpilot.de"</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Alternative: RSS (mit Warnung) */}
|
||||
<div className={`p-4 rounded-xl border ${isDark ? 'border-white/10 bg-white/5' : 'border-slate-200 bg-slate-50'}`}>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-xl">📡</span>
|
||||
<div className="flex-1">
|
||||
<h4 className={`font-medium mb-1 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>
|
||||
Alternativ: RSS-Feed (eingeschraenkt verfuegbar)
|
||||
</h4>
|
||||
<p className={`text-sm mb-3 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
|
||||
Google hat die RSS-Option fuer viele Konten entfernt. Falls Sie RSS noch sehen,
|
||||
koennen Sie die Feed-URL hier eingeben:
|
||||
</p>
|
||||
<input
|
||||
type="url"
|
||||
placeholder="https://www.google.de/alerts/feeds/... (falls verfuegbar)"
|
||||
value={rssFeedUrl}
|
||||
onChange={(e) => setRssFeedUrl(e.target.value)}
|
||||
className={`w-full px-4 py-2 rounded-lg border text-sm ${
|
||||
isDark
|
||||
? 'bg-white/10 border-white/20 text-white placeholder-white/30'
|
||||
: 'bg-white border-slate-200 text-slate-900 placeholder-slate-400'
|
||||
}`}
|
||||
/>
|
||||
<p className={`text-xs mt-2 ${isDark ? 'text-amber-400/70' : 'text-amber-600'}`}>
|
||||
⚠️ Die meisten Nutzer sehen keine RSS-Option mehr in Google Alerts.
|
||||
Verwenden Sie in diesem Fall die E-Mail-Weiterleitung.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`p-4 rounded-xl ${isDark ? 'bg-white/5' : 'bg-slate-50'}`}>
|
||||
<p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
|
||||
Sie koennen diesen Schritt auch ueberspringen und die Weiterleitung spaeter einrichten.
|
||||
Die Demo-Alerts werden weiterhin angezeigt.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 4: Benachrichtigungs-Einstellungen */}
|
||||
{step === 4 && (
|
||||
<div>
|
||||
<h2 className={`text-2xl font-bold mb-2 text-center ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||||
Benachrichtigungen einstellen
|
||||
</h2>
|
||||
<p className={`mb-6 text-center ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
|
||||
Wie moechten Sie informiert werden?
|
||||
</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Frequenz */}
|
||||
<div>
|
||||
<label className={`block text-sm font-medium mb-3 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>
|
||||
Wie oft moechten Sie Alerts erhalten?
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{[
|
||||
{ id: 'realtime', label: 'Sofort', icon: '⚡', desc: 'Bei jedem neuen Alert' },
|
||||
{ id: 'hourly', label: 'Stuendlich', icon: '🕐', desc: 'Zusammenfassung pro Stunde' },
|
||||
{ id: 'daily', label: 'Taeglich', icon: '📅', desc: 'Einmal am Tag' },
|
||||
].map((freq) => (
|
||||
<button
|
||||
key={freq.id}
|
||||
onClick={() => setNotificationFrequency(freq.id as any)}
|
||||
className={`p-4 rounded-xl border-2 transition-all text-center ${
|
||||
notificationFrequency === freq.id
|
||||
? 'border-amber-500 bg-amber-500/20'
|
||||
: isDark
|
||||
? 'border-white/10 bg-white/5 hover:bg-white/10'
|
||||
: 'border-slate-200 bg-white hover:bg-slate-50'
|
||||
}`}
|
||||
>
|
||||
<span className="text-2xl block mb-1">{freq.icon}</span>
|
||||
<p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{freq.label}</p>
|
||||
<p className={`text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>{freq.desc}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mindest-Wichtigkeit */}
|
||||
<div>
|
||||
<label className={`block text-sm font-medium mb-3 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>
|
||||
Mindest-Wichtigkeit fuer Benachrichtigungen
|
||||
</label>
|
||||
<div className="grid grid-cols-5 gap-2">
|
||||
{[
|
||||
{ id: 'KRITISCH', label: 'Kritisch', color: 'red' },
|
||||
{ id: 'DRINGEND', label: 'Dringend', color: 'orange' },
|
||||
{ id: 'WICHTIG', label: 'Wichtig', color: 'yellow' },
|
||||
{ id: 'PRUEFEN', label: 'Pruefen', color: 'blue' },
|
||||
{ id: 'INFO', label: 'Info', color: 'slate' },
|
||||
].map((imp) => (
|
||||
<button
|
||||
key={imp.id}
|
||||
onClick={() => setMinImportance(imp.id as AlertImportance)}
|
||||
className={`p-2 rounded-lg border-2 transition-all text-center text-xs ${
|
||||
minImportance === imp.id
|
||||
? `border-${imp.color}-500 bg-${imp.color}-500/20`
|
||||
: isDark
|
||||
? 'border-white/10 bg-white/5 hover:bg-white/10'
|
||||
: 'border-slate-200 bg-white hover:bg-slate-50'
|
||||
}`}
|
||||
>
|
||||
<p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{imp.label}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className={`text-xs mt-2 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
|
||||
Sie erhalten nur Benachrichtigungen fuer Alerts mit dieser Wichtigkeit oder hoeher.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Zusammenfassung */}
|
||||
<div className={`p-4 rounded-xl ${isDark ? 'bg-white/5' : 'bg-slate-50'}`}>
|
||||
<h4 className={`font-medium mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||||
Ihre Einstellungen
|
||||
</h4>
|
||||
<ul className={`text-sm space-y-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
|
||||
<li>• {selectedTopics.length + (customTopic.name ? 1 : 0)} Themen ausgewaehlt</li>
|
||||
<li>• Benachrichtigungen: {notificationFrequency === 'realtime' ? 'Sofort' : notificationFrequency === 'hourly' ? 'Stuendlich' : 'Taeglich'}</li>
|
||||
<li>• Mindest-Wichtigkeit: {minImportance}</li>
|
||||
{rssFeedUrl && <li>• RSS-Feed verbunden</li>}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className={`w-full max-w-2xl backdrop-blur-xl border rounded-3xl p-8 ${isDark ? 'bg-white/10 border-white/20' : 'bg-white/80 border-black/10 shadow-xl'}`}>
|
||||
{step === 1 && <Step1TopicSelection selectedTopics={selectedTopics} onToggleTopic={toggleTopic} customTopic={customTopic} onCustomTopicChange={setCustomTopic} isDark={isDark} />}
|
||||
{step === 2 && <Step2Instructions selectedTopics={selectedTopics} isDark={isDark} />}
|
||||
{step === 3 && <Step3Forwarding rssFeedUrl={rssFeedUrl} onRssFeedUrlChange={setRssFeedUrl} isDark={isDark} />}
|
||||
{step === 4 && <Step4Settings notificationFrequency={notificationFrequency} onFrequencyChange={setNotificationFrequency} minImportance={minImportance} onMinImportanceChange={setMinImportance} selectedTopics={selectedTopics} customTopic={customTopic} rssFeedUrl={rssFeedUrl} isDark={isDark} />}
|
||||
</div>
|
||||
|
||||
{/* Navigation Buttons */}
|
||||
<div className="flex items-center gap-4 mt-8">
|
||||
{step > 1 && (
|
||||
<button
|
||||
onClick={handleBack}
|
||||
className={`px-6 py-3 rounded-xl font-medium transition-all ${
|
||||
isDark
|
||||
? 'bg-white/10 text-white hover:bg-white/20'
|
||||
: 'bg-slate-200 text-slate-700 hover:bg-slate-300'
|
||||
}`}
|
||||
>
|
||||
← Zurueck
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={handleNext}
|
||||
disabled={!canProceed()}
|
||||
className={`px-8 py-3 rounded-xl font-medium transition-all ${
|
||||
canProceed()
|
||||
? 'bg-gradient-to-r from-amber-400 to-orange-500 text-white hover:shadow-xl hover:shadow-orange-500/30 hover:scale-105'
|
||||
: isDark
|
||||
? 'bg-white/10 text-white/30 cursor-not-allowed'
|
||||
: 'bg-slate-200 text-slate-400 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
{step > 1 && (<button onClick={handleBack} className={`px-6 py-3 rounded-xl font-medium transition-all ${isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-200 text-slate-700 hover:bg-slate-300'}`}>← Zurueck</button>)}
|
||||
<button onClick={handleNext} disabled={!canProceed()} className={`px-8 py-3 rounded-xl font-medium transition-all ${canProceed() ? 'bg-gradient-to-r from-amber-400 to-orange-500 text-white hover:shadow-xl hover:shadow-orange-500/30 hover:scale-105' : isDark ? 'bg-white/10 text-white/30 cursor-not-allowed' : 'bg-slate-200 text-slate-400 cursor-not-allowed'}`}>
|
||||
{step === totalSteps ? 'Fertig! →' : 'Weiter →'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Skip Option */}
|
||||
{onSkip && (
|
||||
<button
|
||||
onClick={onSkip}
|
||||
className={`mt-4 text-sm ${isDark ? 'text-white/40 hover:text-white/60' : 'text-slate-400 hover:text-slate-600'}`}
|
||||
>
|
||||
Ueberspringen (spaeter einrichten)
|
||||
</button>
|
||||
)}
|
||||
{onSkip && (<button onClick={onSkip} className={`mt-4 text-sm ${isDark ? 'text-white/40 hover:text-white/60' : 'text-slate-400 hover:text-slate-600'}`}>Ueberspringen (spaeter einrichten)</button>)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -22,173 +22,7 @@ export interface OnboardingData {
|
||||
schoolType: string
|
||||
}
|
||||
|
||||
// Schulformen mit Icons und Beschreibungen
|
||||
const schulformen = [
|
||||
// Allgemeinbildende Schulen
|
||||
{
|
||||
id: 'gymnasium',
|
||||
name: 'Gymnasium',
|
||||
icon: '🎓',
|
||||
description: 'Allgemeinbildend bis Abitur',
|
||||
category: 'allgemein'
|
||||
},
|
||||
{
|
||||
id: 'gesamtschule',
|
||||
name: 'Gesamtschule',
|
||||
icon: '🏫',
|
||||
description: 'Integriert/kooperativ',
|
||||
category: 'allgemein'
|
||||
},
|
||||
{
|
||||
id: 'realschule',
|
||||
name: 'Realschule',
|
||||
icon: '📚',
|
||||
description: 'Mittlerer Abschluss',
|
||||
category: 'allgemein'
|
||||
},
|
||||
{
|
||||
id: 'hauptschule',
|
||||
name: 'Hauptschule',
|
||||
icon: '📖',
|
||||
description: 'Erster Abschluss',
|
||||
category: 'allgemein'
|
||||
},
|
||||
{
|
||||
id: 'mittelschule',
|
||||
name: 'Mittelschule',
|
||||
icon: '📝',
|
||||
description: 'Bayern/Sachsen',
|
||||
category: 'allgemein'
|
||||
},
|
||||
{
|
||||
id: 'oberschule',
|
||||
name: 'Oberschule',
|
||||
icon: '🏛️',
|
||||
description: 'Sachsen/Brandenburg',
|
||||
category: 'allgemein'
|
||||
},
|
||||
{
|
||||
id: 'stadtteilschule',
|
||||
name: 'Stadtteilschule',
|
||||
icon: '🌆',
|
||||
description: 'Hamburg',
|
||||
category: 'allgemein'
|
||||
},
|
||||
{
|
||||
id: 'gemeinschaftsschule',
|
||||
name: 'Gemeinschaftsschule',
|
||||
icon: '🤲',
|
||||
description: 'BW/SH/TH/SL/BE',
|
||||
category: 'allgemein'
|
||||
},
|
||||
// Berufliche Schulen
|
||||
{
|
||||
id: 'berufsschule',
|
||||
name: 'Berufsschule',
|
||||
icon: '🔧',
|
||||
description: 'Duale Ausbildung',
|
||||
category: 'beruflich'
|
||||
},
|
||||
{
|
||||
id: 'berufliches_gymnasium',
|
||||
name: 'Berufl. Gymnasium',
|
||||
icon: '💼',
|
||||
description: 'Fachgebundenes Abitur',
|
||||
category: 'beruflich'
|
||||
},
|
||||
{
|
||||
id: 'fachoberschule',
|
||||
name: 'Fachoberschule',
|
||||
icon: '📊',
|
||||
description: 'Fachhochschulreife',
|
||||
category: 'beruflich'
|
||||
},
|
||||
{
|
||||
id: 'berufsfachschule',
|
||||
name: 'Berufsfachschule',
|
||||
icon: '🛠️',
|
||||
description: 'Vollzeitberufliche Bildung',
|
||||
category: 'beruflich'
|
||||
},
|
||||
// Sonder- und Förderschulen
|
||||
{
|
||||
id: 'foerderschule',
|
||||
name: 'Förderschule',
|
||||
icon: '🤝',
|
||||
description: 'Sonderpädagogisch',
|
||||
category: 'foerder'
|
||||
},
|
||||
{
|
||||
id: 'foerderzentrum',
|
||||
name: 'Förderzentrum',
|
||||
icon: '💚',
|
||||
description: 'Inklusiv/integriert',
|
||||
category: 'foerder'
|
||||
},
|
||||
// Privatschulen & Besondere Formen
|
||||
{
|
||||
id: 'privatschule',
|
||||
name: 'Privatschule',
|
||||
icon: '🏰',
|
||||
description: 'Freier Träger',
|
||||
category: 'privat'
|
||||
},
|
||||
{
|
||||
id: 'internat',
|
||||
name: 'Internat',
|
||||
icon: '🛏️',
|
||||
description: 'Mit Unterbringung',
|
||||
category: 'privat'
|
||||
},
|
||||
{
|
||||
id: 'waldorfschule',
|
||||
name: 'Waldorfschule',
|
||||
icon: '🌿',
|
||||
description: 'Anthroposophisch',
|
||||
category: 'alternativ'
|
||||
},
|
||||
{
|
||||
id: 'montessori',
|
||||
name: 'Montessori-Schule',
|
||||
icon: '🧒',
|
||||
description: 'Montessori-Pädagogik',
|
||||
category: 'alternativ'
|
||||
},
|
||||
// Grundschulen
|
||||
{
|
||||
id: 'grundschule',
|
||||
name: 'Grundschule',
|
||||
icon: '🏠',
|
||||
description: 'Klasse 1-4',
|
||||
category: 'grund'
|
||||
},
|
||||
// Internationale
|
||||
{
|
||||
id: 'internationale_schule',
|
||||
name: 'Internationale Schule',
|
||||
icon: '🌍',
|
||||
description: 'IB/Cambridge',
|
||||
category: 'international'
|
||||
},
|
||||
{
|
||||
id: 'europaeische_schule',
|
||||
name: 'Europäische Schule',
|
||||
icon: '🇪🇺',
|
||||
description: 'EU-Curriculum',
|
||||
category: 'international'
|
||||
},
|
||||
]
|
||||
|
||||
// Kategorien für die Anzeige
|
||||
const schulformKategorien = [
|
||||
{ id: 'allgemein', name: 'Allgemeinbildend', icon: '📚' },
|
||||
{ id: 'beruflich', name: 'Berufsbildend', icon: '💼' },
|
||||
{ id: 'foerder', name: 'Förderschulen', icon: '💚' },
|
||||
{ id: 'privat', name: 'Privat & Internat', icon: '🏰' },
|
||||
{ id: 'alternativ', name: 'Alternative Pädagogik', icon: '🌿' },
|
||||
{ id: 'grund', name: 'Primarstufe', icon: '🏠' },
|
||||
{ id: 'international', name: 'International', icon: '🌍' },
|
||||
]
|
||||
import { schulformen, schulformKategorien } from './onboarding-wizard/schulformen'
|
||||
|
||||
export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
|
||||
const { t } = useLanguage()
|
||||
|
||||
199
studio-v2/components/alerts-wizard/AlertsWizardSteps.tsx
Normal file
199
studio-v2/components/alerts-wizard/AlertsWizardSteps.tsx
Normal file
@@ -0,0 +1,199 @@
|
||||
'use client'
|
||||
|
||||
import { useTheme } from '@/lib/ThemeContext'
|
||||
import { lehrerThemen, AlertImportance } from '@/lib/AlertsContext'
|
||||
import { InfoBox, TipBox, StepBox } from '../InfoBox'
|
||||
|
||||
// =============================================================================
|
||||
// Step 1: Topic Selection
|
||||
// =============================================================================
|
||||
|
||||
interface Step1Props {
|
||||
selectedTopics: string[]
|
||||
onToggleTopic: (name: string) => void
|
||||
customTopic: { name: string; keywords: string }
|
||||
onCustomTopicChange: (topic: { name: string; keywords: string }) => void
|
||||
isDark: boolean
|
||||
}
|
||||
|
||||
export function Step1TopicSelection({ selectedTopics, onToggleTopic, customTopic, onCustomTopicChange, isDark }: Step1Props) {
|
||||
return (
|
||||
<div>
|
||||
<h2 className={`text-2xl font-bold mb-2 text-center ${isDark ? 'text-white' : 'text-slate-900'}`}>Welche Themen interessieren Sie?</h2>
|
||||
<p className={`mb-6 text-center ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Waehlen Sie Themen, ueber die Sie informiert werden moechten</p>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3 mb-6">
|
||||
{lehrerThemen.map((topic) => {
|
||||
const isSelected = selectedTopics.includes(topic.name)
|
||||
return (
|
||||
<button key={topic.name} onClick={() => onToggleTopic(topic.name)}
|
||||
className={`p-4 rounded-xl border-2 transition-all hover:scale-105 text-left ${isSelected ? 'border-amber-500 bg-amber-500/20 shadow-lg' : isDark ? 'border-white/10 bg-white/5 hover:bg-white/10 hover:border-white/20' : 'border-slate-200 bg-white hover:bg-slate-50 hover:border-slate-300'}`}>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">{topic.icon}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className={`font-medium truncate ${isSelected ? (isDark ? 'text-amber-300' : 'text-amber-700') : (isDark ? 'text-white' : 'text-slate-900')}`}>{topic.name}</p>
|
||||
<p className={`text-xs truncate ${isDark ? 'text-white/40' : 'text-slate-400'}`}>{topic.keywords.slice(0, 2).join(', ')}</p>
|
||||
</div>
|
||||
{isSelected && (<div className="w-6 h-6 rounded-full bg-amber-500 flex items-center justify-center"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg></div>)}
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className={`p-4 rounded-xl border ${isDark ? 'bg-white/5 border-white/10' : 'bg-slate-50 border-slate-200'}`}>
|
||||
<h4 className={`font-medium mb-3 flex items-center gap-2 ${isDark ? 'text-white' : 'text-slate-900'}`}><span>📌</span> Eigenes Thema hinzufuegen</h4>
|
||||
<div className="space-y-3">
|
||||
<input type="text" placeholder="Themenname (z.B. 'Mathematik Didaktik')" value={customTopic.name} onChange={(e) => onCustomTopicChange({ ...customTopic, name: e.target.value })} className={`w-full px-4 py-2 rounded-lg border ${isDark ? 'bg-white/10 border-white/20 text-white placeholder-white/40' : 'bg-white border-slate-200 text-slate-900 placeholder-slate-400'}`} />
|
||||
<input type="text" placeholder="Stichwoerter (kommagetrennt)" value={customTopic.keywords} onChange={(e) => onCustomTopicChange({ ...customTopic, keywords: e.target.value })} className={`w-full px-4 py-2 rounded-lg border ${isDark ? 'bg-white/10 border-white/20 text-white placeholder-white/40' : 'bg-white border-slate-200 text-slate-900 placeholder-slate-400'}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Step 2: Google Alerts Instructions
|
||||
// =============================================================================
|
||||
|
||||
export function Step2Instructions({ selectedTopics, isDark }: { selectedTopics: string[]; isDark: boolean }) {
|
||||
return (
|
||||
<div>
|
||||
<h2 className={`text-2xl font-bold mb-2 text-center ${isDark ? 'text-white' : 'text-slate-900'}`}>Google Alerts einrichten</h2>
|
||||
<p className={`mb-6 text-center ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Google sendet Alerts per E-Mail - wir verarbeiten sie fuer Sie</p>
|
||||
|
||||
<InfoBox variant="info" title="So funktioniert es" icon="💡" className="mb-6">
|
||||
<p>Google Alerts versendet Benachrichtigungen per E-Mail an Ihr Konto. Sie richten einfach eine Weiterleitung ein - wir uebernehmen die Auswertung, Filterung und Zusammenfassung.</p>
|
||||
</InfoBox>
|
||||
|
||||
<div className="space-y-4">
|
||||
<StepBox step={1} title="Google Alerts oeffnen" isActive><p className="mb-2">Besuchen Sie <a href="https://www.google.de/alerts" target="_blank" rel="noopener noreferrer" className="text-amber-500 hover:underline font-medium">google.de/alerts</a> und melden Sie sich mit Ihrem Google-Konto an.</p></StepBox>
|
||||
<StepBox step={2} title="Alerts erstellen"><p>Geben Sie Suchbegriffe ein (z.B. "{selectedTopics[0] || 'Bildungspolitik'}") und erstellen Sie Alerts.</p></StepBox>
|
||||
<StepBox step={3} title="E-Mail-Weiterleitung einrichten"><p>Im naechsten Schritt richten Sie eine automatische Weiterleitung der Google Alert E-Mails an uns ein.</p></StepBox>
|
||||
</div>
|
||||
|
||||
<TipBox title="Tipp: Mehrere Alerts kombinieren" icon="💡" className="mt-6"><p>Sie koennen beliebig viele Google Alerts erstellen. Alle werden per E-Mail an Sie gesendet und durch die Weiterleitung automatisch verarbeitet.</p></TipBox>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Step 3: Email Forwarding
|
||||
// =============================================================================
|
||||
|
||||
export function Step3Forwarding({ rssFeedUrl, onRssFeedUrlChange, isDark }: { rssFeedUrl: string; onRssFeedUrlChange: (url: string) => void; isDark: boolean }) {
|
||||
return (
|
||||
<div>
|
||||
<h2 className={`text-2xl font-bold mb-2 text-center ${isDark ? 'text-white' : 'text-slate-900'}`}>E-Mail Weiterleitung einrichten</h2>
|
||||
<p className={`mb-6 text-center ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Leiten Sie Ihre Google Alert E-Mails automatisch an uns weiter</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className={`p-5 rounded-xl border-2 ${isDark ? 'border-green-500/50 bg-green-500/10' : 'border-green-500 bg-green-50'}`}>
|
||||
<div className="flex items-start gap-3 mb-4">
|
||||
<span className="text-2xl">📧</span>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h4 className={`font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>E-Mail Weiterleitung</h4>
|
||||
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-green-500/20 text-green-600">Empfohlen</span>
|
||||
</div>
|
||||
<p className={`text-sm ${isDark ? 'text-white/70' : 'text-slate-600'}`}>Richten Sie in Gmail einen Filter ein, der Google Alert E-Mails automatisch weiterleitet.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`p-3 rounded-lg ${isDark ? 'bg-white/10' : 'bg-white'}`}>
|
||||
<p className={`text-sm font-medium mb-2 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>Ihre Weiterleitungsadresse:</p>
|
||||
<div className="flex gap-2">
|
||||
<code className={`flex-1 px-3 py-2 rounded-lg text-sm font-mono ${isDark ? 'bg-white/10 text-amber-300' : 'bg-slate-100 text-amber-600'}`}>alerts@breakpilot.de</code>
|
||||
<button onClick={() => navigator.clipboard.writeText('alerts@breakpilot.de')} className="px-3 py-2 rounded-lg bg-amber-500 text-white text-sm hover:bg-amber-600 transition-all">Kopieren</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 space-y-2">
|
||||
<p className={`text-sm font-medium ${isDark ? 'text-white/80' : 'text-slate-700'}`}>So richten Sie die Weiterleitung in Gmail ein:</p>
|
||||
<ol className={`text-sm space-y-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
|
||||
<li>1. Oeffnen Sie Gmail → Einstellungen → Filter</li>
|
||||
<li>2. Neuer Filter: Von "googlealerts-noreply@google.com"</li>
|
||||
<li>3. Aktion: Weiterleiten an "alerts@breakpilot.de"</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`p-4 rounded-xl border ${isDark ? 'border-white/10 bg-white/5' : 'border-slate-200 bg-slate-50'}`}>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-xl">📡</span>
|
||||
<div className="flex-1">
|
||||
<h4 className={`font-medium mb-1 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>Alternativ: RSS-Feed (eingeschraenkt verfuegbar)</h4>
|
||||
<p className={`text-sm mb-3 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Google hat die RSS-Option fuer viele Konten entfernt. Falls verfuegbar:</p>
|
||||
<input type="url" placeholder="https://www.google.de/alerts/feeds/... (falls verfuegbar)" value={rssFeedUrl} onChange={(e) => onRssFeedUrlChange(e.target.value)} className={`w-full px-4 py-2 rounded-lg border text-sm ${isDark ? 'bg-white/10 border-white/20 text-white placeholder-white/30' : 'bg-white border-slate-200 text-slate-900 placeholder-slate-400'}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`p-4 rounded-xl ${isDark ? 'bg-white/5' : 'bg-slate-50'}`}>
|
||||
<p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Sie koennen diesen Schritt auch ueberspringen und die Weiterleitung spaeter einrichten.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Step 4: Notification Settings
|
||||
// =============================================================================
|
||||
|
||||
interface Step4Props {
|
||||
notificationFrequency: 'realtime' | 'hourly' | 'daily'
|
||||
onFrequencyChange: (freq: 'realtime' | 'hourly' | 'daily') => void
|
||||
minImportance: AlertImportance
|
||||
onMinImportanceChange: (imp: AlertImportance) => void
|
||||
selectedTopics: string[]
|
||||
customTopic: { name: string; keywords: string }
|
||||
rssFeedUrl: string
|
||||
isDark: boolean
|
||||
}
|
||||
|
||||
export function Step4Settings({ notificationFrequency, onFrequencyChange, minImportance, onMinImportanceChange, selectedTopics, customTopic, rssFeedUrl, isDark }: Step4Props) {
|
||||
return (
|
||||
<div>
|
||||
<h2 className={`text-2xl font-bold mb-2 text-center ${isDark ? 'text-white' : 'text-slate-900'}`}>Benachrichtigungen einstellen</h2>
|
||||
<p className={`mb-6 text-center ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Wie moechten Sie informiert werden?</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className={`block text-sm font-medium mb-3 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>Wie oft moechten Sie Alerts erhalten?</label>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{([{ id: 'realtime', label: 'Sofort', icon: '⚡', desc: 'Bei jedem neuen Alert' }, { id: 'hourly', label: 'Stuendlich', icon: '🕐', desc: 'Zusammenfassung pro Stunde' }, { id: 'daily', label: 'Taeglich', icon: '📅', desc: 'Einmal am Tag' }] as const).map((freq) => (
|
||||
<button key={freq.id} onClick={() => onFrequencyChange(freq.id)}
|
||||
className={`p-4 rounded-xl border-2 transition-all text-center ${notificationFrequency === freq.id ? 'border-amber-500 bg-amber-500/20' : isDark ? 'border-white/10 bg-white/5 hover:bg-white/10' : 'border-slate-200 bg-white hover:bg-slate-50'}`}>
|
||||
<span className="text-2xl block mb-1">{freq.icon}</span>
|
||||
<p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{freq.label}</p>
|
||||
<p className={`text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>{freq.desc}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className={`block text-sm font-medium mb-3 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>Mindest-Wichtigkeit fuer Benachrichtigungen</label>
|
||||
<div className="grid grid-cols-5 gap-2">
|
||||
{([{ id: 'KRITISCH', label: 'Kritisch' }, { id: 'DRINGEND', label: 'Dringend' }, { id: 'WICHTIG', label: 'Wichtig' }, { id: 'PRUEFEN', label: 'Pruefen' }, { id: 'INFO', label: 'Info' }] as const).map((imp) => (
|
||||
<button key={imp.id} onClick={() => onMinImportanceChange(imp.id as AlertImportance)}
|
||||
className={`p-2 rounded-lg border-2 transition-all text-center text-xs ${minImportance === imp.id ? 'border-amber-500 bg-amber-500/20' : isDark ? 'border-white/10 bg-white/5 hover:bg-white/10' : 'border-slate-200 bg-white hover:bg-slate-50'}`}>
|
||||
<p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{imp.label}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className={`text-xs mt-2 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Sie erhalten nur Benachrichtigungen fuer Alerts mit dieser Wichtigkeit oder hoeher.</p>
|
||||
</div>
|
||||
|
||||
<div className={`p-4 rounded-xl ${isDark ? 'bg-white/5' : 'bg-slate-50'}`}>
|
||||
<h4 className={`font-medium mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>Ihre Einstellungen</h4>
|
||||
<ul className={`text-sm space-y-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
|
||||
<li>- {selectedTopics.length + (customTopic.name ? 1 : 0)} Themen ausgewaehlt</li>
|
||||
<li>- Benachrichtigungen: {notificationFrequency === 'realtime' ? 'Sofort' : notificationFrequency === 'hourly' ? 'Stuendlich' : 'Taeglich'}</li>
|
||||
<li>- Mindest-Wichtigkeit: {minImportance}</li>
|
||||
{rssFeedUrl && <li>- RSS-Feed verbunden</li>}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
37
studio-v2/components/onboarding-wizard/schulformen.ts
Normal file
37
studio-v2/components/onboarding-wizard/schulformen.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* Schulformen und Kategorien fuer den Onboarding-Wizard.
|
||||
*/
|
||||
|
||||
export const schulformen = [
|
||||
{ id: 'gymnasium', name: 'Gymnasium', icon: '🎓', description: 'Allgemeinbildend bis Abitur', category: 'allgemein' },
|
||||
{ id: 'gesamtschule', name: 'Gesamtschule', icon: '🏫', description: 'Integriert/kooperativ', category: 'allgemein' },
|
||||
{ id: 'realschule', name: 'Realschule', icon: '📚', description: 'Mittlerer Abschluss', category: 'allgemein' },
|
||||
{ id: 'hauptschule', name: 'Hauptschule', icon: '📖', description: 'Erster Abschluss', category: 'allgemein' },
|
||||
{ id: 'mittelschule', name: 'Mittelschule', icon: '📝', description: 'Bayern/Sachsen', category: 'allgemein' },
|
||||
{ id: 'oberschule', name: 'Oberschule', icon: '🏛️', description: 'Sachsen/Brandenburg', category: 'allgemein' },
|
||||
{ id: 'stadtteilschule', name: 'Stadtteilschule', icon: '🌆', description: 'Hamburg', category: 'allgemein' },
|
||||
{ id: 'gemeinschaftsschule', name: 'Gemeinschaftsschule', icon: '🤲', description: 'BW/SH/TH/SL/BE', category: 'allgemein' },
|
||||
{ id: 'berufsschule', name: 'Berufsschule', icon: '🔧', description: 'Duale Ausbildung', category: 'beruflich' },
|
||||
{ id: 'berufliches_gymnasium', name: 'Berufl. Gymnasium', icon: '💼', description: 'Fachgebundenes Abitur', category: 'beruflich' },
|
||||
{ id: 'fachoberschule', name: 'Fachoberschule', icon: '📊', description: 'Fachhochschulreife', category: 'beruflich' },
|
||||
{ id: 'berufsfachschule', name: 'Berufsfachschule', icon: '🛠️', description: 'Vollzeitberufliche Bildung', category: 'beruflich' },
|
||||
{ id: 'foerderschule', name: 'Foerderschule', icon: '🤝', description: 'Sonderpaedagogisch', category: 'foerder' },
|
||||
{ id: 'foerderzentrum', name: 'Foerderzentrum', icon: '💚', description: 'Inklusiv/integriert', category: 'foerder' },
|
||||
{ id: 'privatschule', name: 'Privatschule', icon: '🏰', description: 'Freier Traeger', category: 'privat' },
|
||||
{ id: 'internat', name: 'Internat', icon: '🛏️', description: 'Mit Unterbringung', category: 'privat' },
|
||||
{ id: 'waldorfschule', name: 'Waldorfschule', icon: '🌿', description: 'Anthroposophisch', category: 'alternativ' },
|
||||
{ id: 'montessori', name: 'Montessori-Schule', icon: '🧒', description: 'Montessori-Paedagogik', category: 'alternativ' },
|
||||
{ id: 'grundschule', name: 'Grundschule', icon: '🏠', description: 'Klasse 1-4', category: 'grund' },
|
||||
{ id: 'internationale_schule', name: 'Internationale Schule', icon: '🌍', description: 'IB/Cambridge', category: 'international' },
|
||||
{ id: 'europaeische_schule', name: 'Europaeische Schule', icon: '🇪🇺', description: 'EU-Curriculum', category: 'international' },
|
||||
]
|
||||
|
||||
export const schulformKategorien = [
|
||||
{ id: 'allgemein', name: 'Allgemeinbildend', icon: '📚' },
|
||||
{ id: 'beruflich', name: 'Berufsbildend', icon: '💼' },
|
||||
{ id: 'foerder', name: 'Foerderschulen', icon: '💚' },
|
||||
{ id: 'privat', name: 'Privat & Internat', icon: '🏰' },
|
||||
{ id: 'alternativ', name: 'Alternative Paedagogik', icon: '🌿' },
|
||||
{ id: 'grund', name: 'Primarstufe', icon: '🏠' },
|
||||
{ id: 'international', name: 'International', icon: '🌍' },
|
||||
]
|
||||
137
studio-v2/lib/korrektur/api-archiv.ts
Normal file
137
studio-v2/lib/korrektur/api-archiv.ts
Normal file
@@ -0,0 +1,137 @@
|
||||
/**
|
||||
* Korrektur Archiv API - NiBiS Zentralabitur Documents and Stats
|
||||
*
|
||||
* Split from api.ts to stay under 500 LOC.
|
||||
*/
|
||||
|
||||
import { getApiBase, apiFetch, getFairnessAnalysis, getKlausuren } from './api-core'
|
||||
|
||||
// ============================================================================
|
||||
// ARCHIV API (NiBiS Zentralabitur Documents)
|
||||
// ============================================================================
|
||||
|
||||
export interface ArchivDokument {
|
||||
id: string
|
||||
title: string
|
||||
subject: string
|
||||
niveau: string
|
||||
year: number
|
||||
task_number?: number
|
||||
doc_type: string
|
||||
variant?: string
|
||||
bundesland: string
|
||||
minio_path?: string
|
||||
preview_url?: string
|
||||
}
|
||||
|
||||
export interface ArchivSearchResponse {
|
||||
total: number
|
||||
documents: ArchivDokument[]
|
||||
filters: {
|
||||
subjects: string[]
|
||||
years: number[]
|
||||
niveaus: string[]
|
||||
doc_types: string[]
|
||||
}
|
||||
}
|
||||
|
||||
export interface ArchivFilters {
|
||||
subject?: string
|
||||
year?: number
|
||||
bundesland?: string
|
||||
niveau?: string
|
||||
doc_type?: string
|
||||
search?: string
|
||||
limit?: number
|
||||
offset?: number
|
||||
}
|
||||
|
||||
export async function getArchivDocuments(filters: ArchivFilters = {}): Promise<ArchivSearchResponse> {
|
||||
const params = new URLSearchParams()
|
||||
if (filters.subject && filters.subject !== 'Alle') params.append('subject', filters.subject)
|
||||
if (filters.year) params.append('year', filters.year.toString())
|
||||
if (filters.bundesland && filters.bundesland !== 'Alle') params.append('bundesland', filters.bundesland)
|
||||
if (filters.niveau && filters.niveau !== 'Alle') params.append('niveau', filters.niveau)
|
||||
if (filters.doc_type && filters.doc_type !== 'Alle') params.append('doc_type', filters.doc_type)
|
||||
if (filters.search) params.append('search', filters.search)
|
||||
if (filters.limit) params.append('limit', filters.limit.toString())
|
||||
if (filters.offset) params.append('offset', filters.offset.toString())
|
||||
const queryString = params.toString()
|
||||
return apiFetch<ArchivSearchResponse>(`/api/v1/archiv${queryString ? `?${queryString}` : ''}`)
|
||||
}
|
||||
|
||||
export async function getArchivDocument(docId: string): Promise<ArchivDokument & { text_preview?: string }> {
|
||||
return apiFetch<ArchivDokument & { text_preview?: string }>(`/api/v1/archiv/${docId}`)
|
||||
}
|
||||
|
||||
export async function getArchivDocumentUrl(docId: string, expires: number = 3600): Promise<{ url: string; expires_in: number; filename: string }> {
|
||||
return apiFetch<{ url: string; expires_in: number; filename: string }>(`/api/v1/archiv/${docId}/url?expires=${expires}`)
|
||||
}
|
||||
|
||||
export async function searchArchivSemantic(
|
||||
query: string,
|
||||
options: { year?: number; subject?: string; niveau?: string; limit?: number } = {}
|
||||
): Promise<Array<{ id: string; score: number; text: string; year: number; subject: string; niveau: string; task_number?: number; doc_type: string }>> {
|
||||
const params = new URLSearchParams({ query })
|
||||
if (options.year) params.append('year', options.year.toString())
|
||||
if (options.subject) params.append('subject', options.subject)
|
||||
if (options.niveau) params.append('niveau', options.niveau)
|
||||
if (options.limit) params.append('limit', options.limit.toString())
|
||||
return apiFetch(`/api/v1/archiv/search/semantic?${params.toString()}`)
|
||||
}
|
||||
|
||||
export async function getArchivSuggestions(query: string): Promise<Array<{ label: string; type: string }>> {
|
||||
return apiFetch<Array<{ label: string; type: string }>>(`/api/v1/archiv/suggest?query=${encodeURIComponent(query)}`)
|
||||
}
|
||||
|
||||
export async function getArchivStats(): Promise<{
|
||||
total_documents: number; total_chunks: number;
|
||||
by_year: Record<string, number>; by_subject: Record<string, number>; by_niveau: Record<string, number>;
|
||||
}> {
|
||||
return apiFetch('/api/v1/archiv/stats')
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// STATS API (for Dashboard)
|
||||
// ============================================================================
|
||||
|
||||
export interface KorrekturStats {
|
||||
totalKlausuren: number
|
||||
totalStudents: number
|
||||
openCorrections: number
|
||||
completedThisWeek: number
|
||||
averageGrade: number
|
||||
timeSavedHours: number
|
||||
}
|
||||
|
||||
export async function getKorrekturStats(): Promise<KorrekturStats> {
|
||||
try {
|
||||
const klausuren = await getKlausuren()
|
||||
let totalStudents = 0, openCorrections = 0, completedCount = 0, gradeSum = 0, gradedCount = 0
|
||||
|
||||
for (const klausur of klausuren) {
|
||||
totalStudents += klausur.student_count || 0
|
||||
completedCount += klausur.completed_count || 0
|
||||
openCorrections += (klausur.student_count || 0) - (klausur.completed_count || 0)
|
||||
}
|
||||
|
||||
for (const klausur of klausuren) {
|
||||
if (klausur.status === 'completed' || klausur.status === 'in_progress') {
|
||||
try {
|
||||
const fairness = await getFairnessAnalysis(klausur.id)
|
||||
if (fairness.average_grade > 0) { gradeSum += fairness.average_grade; gradedCount++ }
|
||||
} catch { /* Skip */ }
|
||||
}
|
||||
}
|
||||
|
||||
const averageGrade = gradedCount > 0 ? gradeSum / gradedCount : 0
|
||||
return {
|
||||
totalKlausuren: klausuren.length, totalStudents, openCorrections,
|
||||
completedThisWeek: completedCount,
|
||||
averageGrade: Math.round(averageGrade * 10) / 10,
|
||||
timeSavedHours: Math.round(completedCount * 0.5),
|
||||
}
|
||||
} catch {
|
||||
return { totalKlausuren: 0, totalStudents: 0, openCorrections: 0, completedThisWeek: 0, averageGrade: 0, timeSavedHours: 0 }
|
||||
}
|
||||
}
|
||||
139
studio-v2/lib/korrektur/api-core.ts
Normal file
139
studio-v2/lib/korrektur/api-core.ts
Normal file
@@ -0,0 +1,139 @@
|
||||
/**
|
||||
* Korrektur Core API - Base functions and CRUD operations
|
||||
*
|
||||
* Split from api.ts. This module contains the base fetch wrapper
|
||||
* and all core Klausur/Student/Annotation/Fairness operations.
|
||||
*/
|
||||
|
||||
import type {
|
||||
Klausur, StudentWork, CriteriaScores, Annotation,
|
||||
AnnotationPosition, AnnotationType, FairnessAnalysis,
|
||||
EHSuggestion, GradeInfo, CreateKlausurData,
|
||||
} from '@/app/korrektur/types'
|
||||
|
||||
export const getApiBase = (): string => {
|
||||
if (typeof window === 'undefined') return 'http://localhost:8086'
|
||||
const { hostname } = window.location
|
||||
return hostname === 'localhost' ? 'http://localhost:8086' : '/klausur-api'
|
||||
}
|
||||
|
||||
export async function apiFetch<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
|
||||
const url = `${getApiBase()}${endpoint}`
|
||||
const response = await fetch(url, { ...options, headers: { 'Content-Type': 'application/json', ...options.headers } })
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({ detail: 'Unknown error' }))
|
||||
throw new Error(errorData.detail || `HTTP ${response.status}`)
|
||||
}
|
||||
return response.json()
|
||||
}
|
||||
|
||||
// Klausuren
|
||||
export async function getKlausuren(): Promise<Klausur[]> {
|
||||
const data = await apiFetch<{ klausuren: Klausur[] }>('/api/v1/klausuren')
|
||||
return data.klausuren || []
|
||||
}
|
||||
|
||||
export async function getKlausur(id: string): Promise<Klausur> {
|
||||
return apiFetch<Klausur>(`/api/v1/klausuren/${id}`)
|
||||
}
|
||||
|
||||
export async function createKlausur(data: CreateKlausurData): Promise<Klausur> {
|
||||
return apiFetch<Klausur>('/api/v1/klausuren', { method: 'POST', body: JSON.stringify(data) })
|
||||
}
|
||||
|
||||
export async function deleteKlausur(id: string): Promise<void> {
|
||||
await apiFetch(`/api/v1/klausuren/${id}`, { method: 'DELETE' })
|
||||
}
|
||||
|
||||
// Students
|
||||
export async function getStudents(klausurId: string): Promise<StudentWork[]> {
|
||||
const data = await apiFetch<{ students: StudentWork[] }>(`/api/v1/klausuren/${klausurId}/students`)
|
||||
return data.students || []
|
||||
}
|
||||
|
||||
export async function getStudent(studentId: string): Promise<StudentWork> {
|
||||
return apiFetch<StudentWork>(`/api/v1/students/${studentId}`)
|
||||
}
|
||||
|
||||
export async function uploadStudentWork(klausurId: string, file: File, anonymId: string): Promise<StudentWork> {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
formData.append('anonym_id', anonymId)
|
||||
const response = await fetch(`${getApiBase()}/api/v1/klausuren/${klausurId}/students`, { method: 'POST', body: formData })
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({ detail: 'Upload failed' }))
|
||||
throw new Error(errorData.detail || `HTTP ${response.status}`)
|
||||
}
|
||||
return response.json()
|
||||
}
|
||||
|
||||
export async function deleteStudent(studentId: string): Promise<void> {
|
||||
await apiFetch(`/api/v1/students/${studentId}`, { method: 'DELETE' })
|
||||
}
|
||||
|
||||
// Criteria & Gutachten
|
||||
export async function updateCriteria(studentId: string, criteria: CriteriaScores): Promise<StudentWork> {
|
||||
return apiFetch<StudentWork>(`/api/v1/students/${studentId}/criteria`, { method: 'PUT', body: JSON.stringify({ criteria_scores: criteria }) })
|
||||
}
|
||||
|
||||
export async function updateGutachten(studentId: string, gutachten: string): Promise<StudentWork> {
|
||||
return apiFetch<StudentWork>(`/api/v1/students/${studentId}/gutachten`, { method: 'PUT', body: JSON.stringify({ gutachten }) })
|
||||
}
|
||||
|
||||
export async function generateGutachten(studentId: string): Promise<{ gutachten: string }> {
|
||||
return apiFetch<{ gutachten: string }>(`/api/v1/students/${studentId}/gutachten/generate`, { method: 'POST' })
|
||||
}
|
||||
|
||||
// Annotations
|
||||
export async function getAnnotations(studentId: string): Promise<Annotation[]> {
|
||||
const data = await apiFetch<{ annotations: Annotation[] }>(`/api/v1/students/${studentId}/annotations`)
|
||||
return data.annotations || []
|
||||
}
|
||||
|
||||
export async function createAnnotation(studentId: string, annotation: { page: number; position: AnnotationPosition; type: AnnotationType; text: string; severity?: 'minor' | 'major' | 'critical'; suggestion?: string; linked_criterion?: string }): Promise<Annotation> {
|
||||
return apiFetch<Annotation>(`/api/v1/students/${studentId}/annotations`, { method: 'POST', body: JSON.stringify(annotation) })
|
||||
}
|
||||
|
||||
export async function updateAnnotation(annotationId: string, updates: Partial<{ text: string; severity: 'minor' | 'major' | 'critical'; suggestion: string }>): Promise<Annotation> {
|
||||
return apiFetch<Annotation>(`/api/v1/annotations/${annotationId}`, { method: 'PUT', body: JSON.stringify(updates) })
|
||||
}
|
||||
|
||||
export async function deleteAnnotation(annotationId: string): Promise<void> {
|
||||
await apiFetch(`/api/v1/annotations/${annotationId}`, { method: 'DELETE' })
|
||||
}
|
||||
|
||||
// EH/RAG
|
||||
export async function getEHSuggestions(studentId: string, criterion?: string): Promise<EHSuggestion[]> {
|
||||
const data = await apiFetch<{ suggestions: EHSuggestion[] }>(`/api/v1/students/${studentId}/eh-suggestions`, { method: 'POST', body: JSON.stringify({ criterion }) })
|
||||
return data.suggestions || []
|
||||
}
|
||||
|
||||
export async function queryRAG(query: string, topK: number = 5): Promise<{ results: Array<{ text: string; score: number; metadata: any }> }> {
|
||||
return apiFetch('/api/v1/eh/rag-query', { method: 'POST', body: JSON.stringify({ query, top_k: topK }) })
|
||||
}
|
||||
|
||||
export async function uploadEH(file: File): Promise<{ id: string; name: string }> {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
const response = await fetch(`${getApiBase()}/api/v1/eh/upload`, { method: 'POST', body: formData })
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({ detail: 'EH Upload failed' }))
|
||||
throw new Error(errorData.detail || `HTTP ${response.status}`)
|
||||
}
|
||||
return response.json()
|
||||
}
|
||||
|
||||
// Fairness & Export
|
||||
export async function getFairnessAnalysis(klausurId: string): Promise<FairnessAnalysis> {
|
||||
return apiFetch<FairnessAnalysis>(`/api/v1/klausuren/${klausurId}/fairness`)
|
||||
}
|
||||
|
||||
export async function getGradeInfo(): Promise<GradeInfo> {
|
||||
return apiFetch<GradeInfo>('/api/v1/grade-info')
|
||||
}
|
||||
|
||||
export function getGutachtenExportUrl(studentId: string): string { return `${getApiBase()}/api/v1/students/${studentId}/export/gutachten` }
|
||||
export function getAnnotationsExportUrl(studentId: string): string { return `${getApiBase()}/api/v1/students/${studentId}/export/annotations` }
|
||||
export function getOverviewExportUrl(klausurId: string): string { return `${getApiBase()}/api/v1/klausuren/${klausurId}/export/overview` }
|
||||
export function getAllGutachtenExportUrl(klausurId: string): string { return `${getApiBase()}/api/v1/klausuren/${klausurId}/export/all-gutachten` }
|
||||
export function getStudentFileUrl(studentId: string): string { return `${getApiBase()}/api/v1/students/${studentId}/file` }
|
||||
@@ -1,506 +1,76 @@
|
||||
/**
|
||||
* Korrekturplattform API Service Layer
|
||||
* Korrekturplattform API Service Layer - Barrel re-export
|
||||
*
|
||||
* Connects to klausur-service (Port 8086) for all correction-related operations.
|
||||
* Uses dynamic host detection for local network compatibility.
|
||||
* Split into:
|
||||
* - api-core.ts: Base functions, CRUD, annotations, fairness, export URLs
|
||||
* - api-archiv.ts: NiBiS archiv and dashboard stats
|
||||
* - api.ts (this file): Barrel re-export + korrekturApi namespace
|
||||
*/
|
||||
|
||||
import type {
|
||||
Klausur,
|
||||
StudentWork,
|
||||
CriteriaScores,
|
||||
Annotation,
|
||||
AnnotationPosition,
|
||||
AnnotationType,
|
||||
FairnessAnalysis,
|
||||
EHSuggestion,
|
||||
GradeInfo,
|
||||
CreateKlausurData,
|
||||
} from '@/app/korrektur/types'
|
||||
|
||||
// Get API base URL dynamically
|
||||
// On localhost: direct connection to port 8086
|
||||
// On macmini: use nginx proxy /klausur-api/ to avoid certificate issues
|
||||
const getApiBase = (): string => {
|
||||
if (typeof window === 'undefined') return 'http://localhost:8086'
|
||||
const { hostname } = window.location
|
||||
// Use nginx proxy on macmini to avoid cross-origin certificate issues
|
||||
return hostname === 'localhost' ? 'http://localhost:8086' : '/klausur-api'
|
||||
}
|
||||
|
||||
// Generic fetch wrapper with error handling
|
||||
async function apiFetch<T>(
|
||||
endpoint: string,
|
||||
options: RequestInit = {}
|
||||
): Promise<T> {
|
||||
const url = `${getApiBase()}${endpoint}`
|
||||
|
||||
const response = await fetch(url, {
|
||||
...options,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...options.headers,
|
||||
},
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({ detail: 'Unknown error' }))
|
||||
throw new Error(errorData.detail || `HTTP ${response.status}`)
|
||||
}
|
||||
|
||||
return response.json()
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// KLAUSUREN API
|
||||
// ============================================================================
|
||||
|
||||
export async function getKlausuren(): Promise<Klausur[]> {
|
||||
const data = await apiFetch<{ klausuren: Klausur[] }>('/api/v1/klausuren')
|
||||
return data.klausuren || []
|
||||
}
|
||||
|
||||
export async function getKlausur(id: string): Promise<Klausur> {
|
||||
return apiFetch<Klausur>(`/api/v1/klausuren/${id}`)
|
||||
}
|
||||
|
||||
export async function createKlausur(data: CreateKlausurData): Promise<Klausur> {
|
||||
return apiFetch<Klausur>('/api/v1/klausuren', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
})
|
||||
}
|
||||
|
||||
export async function deleteKlausur(id: string): Promise<void> {
|
||||
await apiFetch(`/api/v1/klausuren/${id}`, { method: 'DELETE' })
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// STUDENTS API
|
||||
// ============================================================================
|
||||
|
||||
export async function getStudents(klausurId: string): Promise<StudentWork[]> {
|
||||
const data = await apiFetch<{ students: StudentWork[] }>(
|
||||
`/api/v1/klausuren/${klausurId}/students`
|
||||
)
|
||||
return data.students || []
|
||||
}
|
||||
|
||||
export async function getStudent(studentId: string): Promise<StudentWork> {
|
||||
return apiFetch<StudentWork>(`/api/v1/students/${studentId}`)
|
||||
}
|
||||
|
||||
export async function uploadStudentWork(
|
||||
klausurId: string,
|
||||
file: File,
|
||||
anonymId: string
|
||||
): Promise<StudentWork> {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
formData.append('anonym_id', anonymId)
|
||||
|
||||
const response = await fetch(
|
||||
`${getApiBase()}/api/v1/klausuren/${klausurId}/students`,
|
||||
{
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
}
|
||||
)
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({ detail: 'Upload failed' }))
|
||||
throw new Error(errorData.detail || `HTTP ${response.status}`)
|
||||
}
|
||||
|
||||
return response.json()
|
||||
}
|
||||
|
||||
export async function deleteStudent(studentId: string): Promise<void> {
|
||||
await apiFetch(`/api/v1/students/${studentId}`, { method: 'DELETE' })
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// CRITERIA & GUTACHTEN API
|
||||
// ============================================================================
|
||||
|
||||
export async function updateCriteria(
|
||||
studentId: string,
|
||||
criteria: CriteriaScores
|
||||
): Promise<StudentWork> {
|
||||
return apiFetch<StudentWork>(`/api/v1/students/${studentId}/criteria`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ criteria_scores: criteria }),
|
||||
})
|
||||
}
|
||||
|
||||
export async function updateGutachten(
|
||||
studentId: string,
|
||||
gutachten: string
|
||||
): Promise<StudentWork> {
|
||||
return apiFetch<StudentWork>(`/api/v1/students/${studentId}/gutachten`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ gutachten }),
|
||||
})
|
||||
}
|
||||
|
||||
export async function generateGutachten(
|
||||
studentId: string
|
||||
): Promise<{ gutachten: string }> {
|
||||
return apiFetch<{ gutachten: string }>(
|
||||
`/api/v1/students/${studentId}/gutachten/generate`,
|
||||
{ method: 'POST' }
|
||||
)
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// ANNOTATIONS API
|
||||
// ============================================================================
|
||||
|
||||
export async function getAnnotations(studentId: string): Promise<Annotation[]> {
|
||||
const data = await apiFetch<{ annotations: Annotation[] }>(
|
||||
`/api/v1/students/${studentId}/annotations`
|
||||
)
|
||||
return data.annotations || []
|
||||
}
|
||||
|
||||
export async function createAnnotation(
|
||||
studentId: string,
|
||||
annotation: {
|
||||
page: number
|
||||
position: AnnotationPosition
|
||||
type: AnnotationType
|
||||
text: string
|
||||
severity?: 'minor' | 'major' | 'critical'
|
||||
suggestion?: string
|
||||
linked_criterion?: string
|
||||
}
|
||||
): Promise<Annotation> {
|
||||
return apiFetch<Annotation>(`/api/v1/students/${studentId}/annotations`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(annotation),
|
||||
})
|
||||
}
|
||||
|
||||
export async function updateAnnotation(
|
||||
annotationId: string,
|
||||
updates: Partial<{
|
||||
text: string
|
||||
severity: 'minor' | 'major' | 'critical'
|
||||
suggestion: string
|
||||
}>
|
||||
): Promise<Annotation> {
|
||||
return apiFetch<Annotation>(`/api/v1/annotations/${annotationId}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(updates),
|
||||
})
|
||||
}
|
||||
|
||||
export async function deleteAnnotation(annotationId: string): Promise<void> {
|
||||
await apiFetch(`/api/v1/annotations/${annotationId}`, { method: 'DELETE' })
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// EH/RAG API (500+ NiBiS Dokumente)
|
||||
// ============================================================================
|
||||
|
||||
export async function getEHSuggestions(
|
||||
studentId: string,
|
||||
criterion?: string
|
||||
): Promise<EHSuggestion[]> {
|
||||
const data = await apiFetch<{ suggestions: EHSuggestion[] }>(
|
||||
`/api/v1/students/${studentId}/eh-suggestions`,
|
||||
{
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ criterion }),
|
||||
}
|
||||
)
|
||||
return data.suggestions || []
|
||||
}
|
||||
|
||||
export async function queryRAG(
|
||||
query: string,
|
||||
topK: number = 5
|
||||
): Promise<{ results: Array<{ text: string; score: number; metadata: any }> }> {
|
||||
return apiFetch('/api/v1/eh/rag-query', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ query, top_k: topK }),
|
||||
})
|
||||
}
|
||||
|
||||
export async function uploadEH(file: File): Promise<{ id: string; name: string }> {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
|
||||
const response = await fetch(
|
||||
`${getApiBase()}/api/v1/eh/upload`,
|
||||
{
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
}
|
||||
)
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({ detail: 'EH Upload failed' }))
|
||||
throw new Error(errorData.detail || `HTTP ${response.status}`)
|
||||
}
|
||||
|
||||
return response.json()
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// FAIRNESS & EXPORT API
|
||||
// ============================================================================
|
||||
|
||||
export async function getFairnessAnalysis(
|
||||
klausurId: string
|
||||
): Promise<FairnessAnalysis> {
|
||||
return apiFetch<FairnessAnalysis>(`/api/v1/klausuren/${klausurId}/fairness`)
|
||||
}
|
||||
|
||||
export async function getGradeInfo(): Promise<GradeInfo> {
|
||||
return apiFetch<GradeInfo>('/api/v1/grade-info')
|
||||
}
|
||||
|
||||
// Export endpoints return file downloads
|
||||
export function getGutachtenExportUrl(studentId: string): string {
|
||||
return `${getApiBase()}/api/v1/students/${studentId}/export/gutachten`
|
||||
}
|
||||
|
||||
export function getAnnotationsExportUrl(studentId: string): string {
|
||||
return `${getApiBase()}/api/v1/students/${studentId}/export/annotations`
|
||||
}
|
||||
|
||||
export function getOverviewExportUrl(klausurId: string): string {
|
||||
return `${getApiBase()}/api/v1/klausuren/${klausurId}/export/overview`
|
||||
}
|
||||
|
||||
export function getAllGutachtenExportUrl(klausurId: string): string {
|
||||
return `${getApiBase()}/api/v1/klausuren/${klausurId}/export/all-gutachten`
|
||||
}
|
||||
|
||||
// Get student file URL (PDF/Image)
|
||||
export function getStudentFileUrl(studentId: string): string {
|
||||
return `${getApiBase()}/api/v1/students/${studentId}/file`
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// ARCHIV API (NiBiS Zentralabitur Documents)
|
||||
// ============================================================================
|
||||
|
||||
export interface ArchivDokument {
|
||||
id: string
|
||||
title: string
|
||||
subject: string
|
||||
niveau: string
|
||||
year: number
|
||||
task_number?: number
|
||||
doc_type: string
|
||||
variant?: string
|
||||
bundesland: string
|
||||
minio_path?: string
|
||||
preview_url?: string
|
||||
}
|
||||
|
||||
export interface ArchivSearchResponse {
|
||||
total: number
|
||||
documents: ArchivDokument[]
|
||||
filters: {
|
||||
subjects: string[]
|
||||
years: number[]
|
||||
niveaus: string[]
|
||||
doc_types: string[]
|
||||
}
|
||||
}
|
||||
|
||||
export interface ArchivFilters {
|
||||
subject?: string
|
||||
year?: number
|
||||
bundesland?: string
|
||||
niveau?: string
|
||||
doc_type?: string
|
||||
search?: string
|
||||
limit?: number
|
||||
offset?: number
|
||||
}
|
||||
|
||||
export async function getArchivDocuments(filters: ArchivFilters = {}): Promise<ArchivSearchResponse> {
|
||||
const params = new URLSearchParams()
|
||||
|
||||
if (filters.subject && filters.subject !== 'Alle') params.append('subject', filters.subject)
|
||||
if (filters.year) params.append('year', filters.year.toString())
|
||||
if (filters.bundesland && filters.bundesland !== 'Alle') params.append('bundesland', filters.bundesland)
|
||||
if (filters.niveau && filters.niveau !== 'Alle') params.append('niveau', filters.niveau)
|
||||
if (filters.doc_type && filters.doc_type !== 'Alle') params.append('doc_type', filters.doc_type)
|
||||
if (filters.search) params.append('search', filters.search)
|
||||
if (filters.limit) params.append('limit', filters.limit.toString())
|
||||
if (filters.offset) params.append('offset', filters.offset.toString())
|
||||
|
||||
const queryString = params.toString()
|
||||
const endpoint = `/api/v1/archiv${queryString ? `?${queryString}` : ''}`
|
||||
|
||||
return apiFetch<ArchivSearchResponse>(endpoint)
|
||||
}
|
||||
|
||||
export async function getArchivDocument(docId: string): Promise<ArchivDokument & { text_preview?: string }> {
|
||||
return apiFetch<ArchivDokument & { text_preview?: string }>(`/api/v1/archiv/${docId}`)
|
||||
}
|
||||
|
||||
export async function getArchivDocumentUrl(docId: string, expires: number = 3600): Promise<{ url: string; expires_in: number; filename: string }> {
|
||||
return apiFetch<{ url: string; expires_in: number; filename: string }>(`/api/v1/archiv/${docId}/url?expires=${expires}`)
|
||||
}
|
||||
|
||||
export async function searchArchivSemantic(
|
||||
query: string,
|
||||
options: { year?: number; subject?: string; niveau?: string; limit?: number } = {}
|
||||
): Promise<Array<{
|
||||
id: string
|
||||
score: number
|
||||
text: string
|
||||
year: number
|
||||
subject: string
|
||||
niveau: string
|
||||
task_number?: number
|
||||
doc_type: string
|
||||
}>> {
|
||||
const params = new URLSearchParams({ query })
|
||||
|
||||
if (options.year) params.append('year', options.year.toString())
|
||||
if (options.subject) params.append('subject', options.subject)
|
||||
if (options.niveau) params.append('niveau', options.niveau)
|
||||
if (options.limit) params.append('limit', options.limit.toString())
|
||||
|
||||
return apiFetch(`/api/v1/archiv/search/semantic?${params.toString()}`)
|
||||
}
|
||||
|
||||
export async function getArchivSuggestions(query: string): Promise<Array<{ label: string; type: string }>> {
|
||||
return apiFetch<Array<{ label: string; type: string }>>(`/api/v1/archiv/suggest?query=${encodeURIComponent(query)}`)
|
||||
}
|
||||
|
||||
export async function getArchivStats(): Promise<{
|
||||
total_documents: number
|
||||
total_chunks: number
|
||||
by_year: Record<string, number>
|
||||
by_subject: Record<string, number>
|
||||
by_niveau: Record<string, number>
|
||||
}> {
|
||||
return apiFetch('/api/v1/archiv/stats')
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// STATS API (for Dashboard)
|
||||
// ============================================================================
|
||||
|
||||
export interface KorrekturStats {
|
||||
totalKlausuren: number
|
||||
totalStudents: number
|
||||
openCorrections: number
|
||||
completedThisWeek: number
|
||||
averageGrade: number
|
||||
timeSavedHours: number
|
||||
}
|
||||
|
||||
export async function getKorrekturStats(): Promise<KorrekturStats> {
|
||||
try {
|
||||
const klausuren = await getKlausuren()
|
||||
|
||||
let totalStudents = 0
|
||||
let openCorrections = 0
|
||||
let completedCount = 0
|
||||
let gradeSum = 0
|
||||
let gradedCount = 0
|
||||
|
||||
for (const klausur of klausuren) {
|
||||
totalStudents += klausur.student_count || 0
|
||||
completedCount += klausur.completed_count || 0
|
||||
openCorrections += (klausur.student_count || 0) - (klausur.completed_count || 0)
|
||||
}
|
||||
|
||||
// Get average from all klausuren
|
||||
for (const klausur of klausuren) {
|
||||
if (klausur.status === 'completed' || klausur.status === 'in_progress') {
|
||||
try {
|
||||
const fairness = await getFairnessAnalysis(klausur.id)
|
||||
if (fairness.average_grade > 0) {
|
||||
gradeSum += fairness.average_grade
|
||||
gradedCount++
|
||||
}
|
||||
} catch {
|
||||
// Skip if fairness analysis not available
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const averageGrade = gradedCount > 0 ? gradeSum / gradedCount : 0
|
||||
// Estimate time saved: ~30 minutes per correction with AI assistance
|
||||
const timeSavedHours = Math.round(completedCount * 0.5)
|
||||
|
||||
return {
|
||||
totalKlausuren: klausuren.length,
|
||||
totalStudents,
|
||||
openCorrections,
|
||||
completedThisWeek: completedCount, // Simplified, would need date filtering
|
||||
averageGrade: Math.round(averageGrade * 10) / 10,
|
||||
timeSavedHours,
|
||||
}
|
||||
} catch {
|
||||
return {
|
||||
totalKlausuren: 0,
|
||||
totalStudents: 0,
|
||||
openCorrections: 0,
|
||||
completedThisWeek: 0,
|
||||
averageGrade: 0,
|
||||
timeSavedHours: 0,
|
||||
}
|
||||
}
|
||||
}
|
||||
// Re-export everything from core
|
||||
export {
|
||||
getApiBase, apiFetch,
|
||||
getKlausuren, getKlausur, createKlausur, deleteKlausur,
|
||||
getStudents, getStudent, uploadStudentWork, deleteStudent,
|
||||
updateCriteria, updateGutachten, generateGutachten,
|
||||
getAnnotations, createAnnotation, updateAnnotation, deleteAnnotation,
|
||||
getEHSuggestions, queryRAG, uploadEH,
|
||||
getFairnessAnalysis, getGradeInfo,
|
||||
getGutachtenExportUrl, getAnnotationsExportUrl, getOverviewExportUrl, getAllGutachtenExportUrl, getStudentFileUrl,
|
||||
} from './api-core'
|
||||
|
||||
// Re-export everything from archiv
|
||||
export type { ArchivDokument, ArchivSearchResponse, ArchivFilters, KorrekturStats } from './api-archiv'
|
||||
export {
|
||||
getArchivDocuments, getArchivDocument, getArchivDocumentUrl,
|
||||
searchArchivSemantic, getArchivSuggestions, getArchivStats,
|
||||
getKorrekturStats,
|
||||
} from './api-archiv'
|
||||
|
||||
// Import for namespace
|
||||
import * as core from './api-core'
|
||||
import * as archiv from './api-archiv'
|
||||
|
||||
// Export all functions as a namespace
|
||||
export const korrekturApi = {
|
||||
// Klausuren
|
||||
getKlausuren,
|
||||
getKlausur,
|
||||
createKlausur,
|
||||
deleteKlausur,
|
||||
|
||||
getKlausuren: core.getKlausuren,
|
||||
getKlausur: core.getKlausur,
|
||||
createKlausur: core.createKlausur,
|
||||
deleteKlausur: core.deleteKlausur,
|
||||
// Students
|
||||
getStudents,
|
||||
getStudent,
|
||||
uploadStudentWork,
|
||||
deleteStudent,
|
||||
|
||||
getStudents: core.getStudents,
|
||||
getStudent: core.getStudent,
|
||||
uploadStudentWork: core.uploadStudentWork,
|
||||
deleteStudent: core.deleteStudent,
|
||||
// Criteria & Gutachten
|
||||
updateCriteria,
|
||||
updateGutachten,
|
||||
generateGutachten,
|
||||
|
||||
updateCriteria: core.updateCriteria,
|
||||
updateGutachten: core.updateGutachten,
|
||||
generateGutachten: core.generateGutachten,
|
||||
// Annotations
|
||||
getAnnotations,
|
||||
createAnnotation,
|
||||
updateAnnotation,
|
||||
deleteAnnotation,
|
||||
|
||||
getAnnotations: core.getAnnotations,
|
||||
createAnnotation: core.createAnnotation,
|
||||
updateAnnotation: core.updateAnnotation,
|
||||
deleteAnnotation: core.deleteAnnotation,
|
||||
// EH/RAG
|
||||
getEHSuggestions,
|
||||
queryRAG,
|
||||
uploadEH,
|
||||
|
||||
getEHSuggestions: core.getEHSuggestions,
|
||||
queryRAG: core.queryRAG,
|
||||
uploadEH: core.uploadEH,
|
||||
// Fairness & Export
|
||||
getFairnessAnalysis,
|
||||
getGradeInfo,
|
||||
getGutachtenExportUrl,
|
||||
getAnnotationsExportUrl,
|
||||
getOverviewExportUrl,
|
||||
getAllGutachtenExportUrl,
|
||||
getStudentFileUrl,
|
||||
|
||||
getFairnessAnalysis: core.getFairnessAnalysis,
|
||||
getGradeInfo: core.getGradeInfo,
|
||||
getGutachtenExportUrl: core.getGutachtenExportUrl,
|
||||
getAnnotationsExportUrl: core.getAnnotationsExportUrl,
|
||||
getOverviewExportUrl: core.getOverviewExportUrl,
|
||||
getAllGutachtenExportUrl: core.getAllGutachtenExportUrl,
|
||||
getStudentFileUrl: core.getStudentFileUrl,
|
||||
// Archiv (NiBiS)
|
||||
getArchivDocuments,
|
||||
getArchivDocument,
|
||||
getArchivDocumentUrl,
|
||||
searchArchivSemantic,
|
||||
getArchivSuggestions,
|
||||
getArchivStats,
|
||||
|
||||
getArchivDocuments: archiv.getArchivDocuments,
|
||||
getArchivDocument: archiv.getArchivDocument,
|
||||
getArchivDocumentUrl: archiv.getArchivDocumentUrl,
|
||||
searchArchivSemantic: archiv.searchArchivSemantic,
|
||||
getArchivSuggestions: archiv.getArchivSuggestions,
|
||||
getArchivStats: archiv.getArchivStats,
|
||||
// Stats
|
||||
getKorrekturStats,
|
||||
getKorrekturStats: archiv.getKorrekturStats,
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user