5a31f52310
Services: Admin-Lehrer, Backend-Lehrer, Studio v2, Website, Klausur-Service, School-Service, Voice-Service, Geo-Service, BreakPilot Drive, Agent-Core Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
498 lines
20 KiB
TypeScript
498 lines
20 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* Fairness-Dashboard
|
|
*
|
|
* Visualizes grading consistency and identifies outliers for review.
|
|
* Features:
|
|
* - Grade distribution histogram
|
|
* - Criteria heatmap
|
|
* - Outlier list with quick navigation
|
|
* - Fairness score gauge
|
|
*/
|
|
|
|
import { useState, useEffect, useCallback } from 'react'
|
|
import { useParams, useRouter } from 'next/navigation'
|
|
import AdminLayout from '@/components/admin/AdminLayout'
|
|
import Link from 'next/link'
|
|
|
|
const API_BASE = process.env.NEXT_PUBLIC_KLAUSUR_SERVICE_URL || 'http://localhost:8086'
|
|
|
|
// Grade labels
|
|
const GRADE_LABELS: Record<number, string> = {
|
|
15: '1+', 14: '1', 13: '1-', 12: '2+', 11: '2', 10: '2-',
|
|
9: '3+', 8: '3', 7: '3-', 6: '4+', 5: '4', 4: '4-',
|
|
3: '5+', 2: '5', 1: '5-', 0: '6'
|
|
}
|
|
|
|
// Criterion colors
|
|
const CRITERION_COLORS: Record<string, string> = {
|
|
rechtschreibung: '#dc2626',
|
|
grammatik: '#2563eb',
|
|
inhalt: '#16a34a',
|
|
struktur: '#9333ea',
|
|
stil: '#ea580c',
|
|
}
|
|
|
|
interface FairnessData {
|
|
klausur_id: string
|
|
students_count: number
|
|
graded_count: number
|
|
statistics: {
|
|
average_grade: number
|
|
average_raw_points: number
|
|
min_grade: number
|
|
max_grade: number
|
|
spread: number
|
|
standard_deviation: number
|
|
}
|
|
criteria_breakdown: Record<string, {
|
|
average: number
|
|
min: number
|
|
max: number
|
|
count: number
|
|
}>
|
|
outliers: Array<{
|
|
student_id: string
|
|
student_name: string
|
|
grade_points: number
|
|
deviation: number
|
|
direction: 'above' | 'below'
|
|
}>
|
|
fairness_score: number
|
|
warnings: string[]
|
|
recommendation: string
|
|
}
|
|
|
|
interface Klausur {
|
|
id: string
|
|
title: string
|
|
subject: string
|
|
students: Array<{
|
|
id: string
|
|
student_name: string
|
|
anonym_id: string
|
|
grade_points: number
|
|
criteria_scores: Record<string, { score: number }>
|
|
}>
|
|
}
|
|
|
|
export default function FairnessDashboardPage() {
|
|
const params = useParams()
|
|
const router = useRouter()
|
|
const klausurId = params.klausurId as string
|
|
|
|
const [klausur, setKlausur] = useState<Klausur | null>(null)
|
|
const [fairnessData, setFairnessData] = useState<FairnessData | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
// Fetch data
|
|
const fetchData = useCallback(async () => {
|
|
try {
|
|
setLoading(true)
|
|
|
|
// Fetch klausur
|
|
const klausurRes = await fetch(`${API_BASE}/api/v1/klausuren/${klausurId}`)
|
|
if (klausurRes.ok) {
|
|
setKlausur(await klausurRes.json())
|
|
}
|
|
|
|
// Fetch fairness analysis
|
|
const fairnessRes = await fetch(`${API_BASE}/api/v1/klausuren/${klausurId}/fairness`)
|
|
if (fairnessRes.ok) {
|
|
setFairnessData(await fairnessRes.json())
|
|
} else {
|
|
const errData = await fairnessRes.json()
|
|
setError(errData.detail || 'Fehler beim Laden der Fairness-Analyse')
|
|
}
|
|
|
|
setError(null)
|
|
} catch (err) {
|
|
console.error('Failed to fetch data:', err)
|
|
setError('Fehler beim Laden der Daten')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}, [klausurId])
|
|
|
|
useEffect(() => {
|
|
fetchData()
|
|
}, [fetchData])
|
|
|
|
// Calculate grade distribution for histogram
|
|
const getGradeDistribution = () => {
|
|
if (!klausur?.students) return []
|
|
|
|
const distribution: Record<number, number> = {}
|
|
for (let i = 0; i <= 15; i++) {
|
|
distribution[i] = 0
|
|
}
|
|
|
|
klausur.students.forEach(s => {
|
|
if (s.grade_points >= 0 && s.grade_points <= 15) {
|
|
distribution[s.grade_points]++
|
|
}
|
|
})
|
|
|
|
return Object.entries(distribution).map(([grade, count]) => ({
|
|
grade: parseInt(grade),
|
|
count,
|
|
label: GRADE_LABELS[parseInt(grade)] || grade
|
|
}))
|
|
}
|
|
|
|
const gradeDistribution = getGradeDistribution()
|
|
const maxCount = Math.max(...gradeDistribution.map(d => d.count), 1)
|
|
|
|
if (loading) {
|
|
return (
|
|
<AdminLayout title="Lade Fairness-Analyse..." description="">
|
|
<div className="flex items-center justify-center h-[calc(100vh-200px)]">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
|
|
</div>
|
|
</AdminLayout>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<AdminLayout
|
|
title="Fairness-Analyse"
|
|
description={klausur?.title || ''}
|
|
>
|
|
{/* Header */}
|
|
<div className="bg-white border-b border-slate-200 -mx-6 -mt-6 px-6 py-4 mb-6">
|
|
<div className="flex items-center justify-between">
|
|
<Link
|
|
href={`/admin/klausur-korrektur/${klausurId}`}
|
|
className="text-primary-600 hover:text-primary-800 flex items-center gap-1 text-sm"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
Zurueck zur Klausur
|
|
</Link>
|
|
|
|
<div className="text-sm text-slate-500">
|
|
{fairnessData?.graded_count || 0} von {fairnessData?.students_count || 0} Arbeiten bewertet
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Error display */}
|
|
{error && (
|
|
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-800">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{fairnessData && (
|
|
<div className="space-y-6">
|
|
{/* Top Row: Fairness Score + Statistics */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{/* Fairness Score Gauge */}
|
|
<div className="bg-white rounded-lg border border-slate-200 p-6">
|
|
<h3 className="text-sm font-medium text-slate-500 mb-4">Fairness-Score</h3>
|
|
<div className="flex items-center justify-center">
|
|
<div className="relative w-32 h-32">
|
|
{/* Background circle */}
|
|
<svg className="w-32 h-32 transform -rotate-90">
|
|
<circle
|
|
cx="64"
|
|
cy="64"
|
|
r="56"
|
|
fill="none"
|
|
stroke="#e2e8f0"
|
|
strokeWidth="12"
|
|
/>
|
|
{/* Progress circle */}
|
|
<circle
|
|
cx="64"
|
|
cy="64"
|
|
r="56"
|
|
fill="none"
|
|
stroke={
|
|
fairnessData.fairness_score >= 70 ? '#16a34a' :
|
|
fairnessData.fairness_score >= 40 ? '#eab308' : '#dc2626'
|
|
}
|
|
strokeWidth="12"
|
|
strokeLinecap="round"
|
|
strokeDasharray={`${(fairnessData.fairness_score / 100) * 352} 352`}
|
|
/>
|
|
</svg>
|
|
{/* Score text */}
|
|
<div className="absolute inset-0 flex flex-col items-center justify-center">
|
|
<span className="text-3xl font-bold">{fairnessData.fairness_score}</span>
|
|
<span className="text-xs text-slate-500">von 100</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={`mt-4 text-center text-sm font-medium ${
|
|
fairnessData.fairness_score >= 70 ? 'text-green-600' :
|
|
fairnessData.fairness_score >= 40 ? 'text-yellow-600' : 'text-red-600'
|
|
}`}>
|
|
{fairnessData.recommendation}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Statistics */}
|
|
<div className="bg-white rounded-lg border border-slate-200 p-6">
|
|
<h3 className="text-sm font-medium text-slate-500 mb-4">Statistik</h3>
|
|
<div className="space-y-3">
|
|
<div className="flex justify-between">
|
|
<span className="text-slate-600">Durchschnitt</span>
|
|
<span className="font-semibold">
|
|
{fairnessData.statistics.average_grade} P ({GRADE_LABELS[Math.round(fairnessData.statistics.average_grade)]})
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-slate-600">Minimum</span>
|
|
<span className="font-semibold">
|
|
{fairnessData.statistics.min_grade} P ({GRADE_LABELS[fairnessData.statistics.min_grade]})
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-slate-600">Maximum</span>
|
|
<span className="font-semibold">
|
|
{fairnessData.statistics.max_grade} P ({GRADE_LABELS[fairnessData.statistics.max_grade]})
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-slate-600">Spreizung</span>
|
|
<span className="font-semibold">{fairnessData.statistics.spread} P</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-slate-600">Standardabweichung</span>
|
|
<span className="font-semibold">{fairnessData.statistics.standard_deviation}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Warnings */}
|
|
<div className="bg-white rounded-lg border border-slate-200 p-6">
|
|
<h3 className="text-sm font-medium text-slate-500 mb-4">Hinweise</h3>
|
|
{fairnessData.warnings.length > 0 ? (
|
|
<div className="space-y-2">
|
|
{fairnessData.warnings.map((warning, i) => (
|
|
<div key={i} className="flex items-start gap-2 text-sm">
|
|
<svg className="w-5 h-5 text-amber-500 flex-shrink-0 mt-0.5" 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>
|
|
<span className="text-slate-700">{warning}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-2 text-green-600">
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
<span className="text-sm">Keine Auffaelligkeiten erkannt</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Grade Distribution Histogram */}
|
|
<div className="bg-white rounded-lg border border-slate-200 p-6">
|
|
<h3 className="text-sm font-medium text-slate-500 mb-4">Notenverteilung</h3>
|
|
<div className="flex items-end gap-1 h-48">
|
|
{gradeDistribution.map(({ grade, count, label }) => (
|
|
<div key={grade} className="flex-1 flex flex-col items-center">
|
|
<div
|
|
className={`w-full rounded-t transition-all ${
|
|
count > 0 ? 'bg-primary-500' : 'bg-slate-200'
|
|
}`}
|
|
style={{ height: `${(count / maxCount) * 160}px`, minHeight: count > 0 ? '8px' : '2px' }}
|
|
title={`${count} Arbeiten`}
|
|
/>
|
|
<div className="text-xs text-slate-500 mt-1 transform -rotate-45 origin-top-left w-6 text-center">
|
|
{label}
|
|
</div>
|
|
{count > 0 && (
|
|
<div className="text-xs font-medium text-slate-700 mt-1">{count}</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="flex justify-between text-xs text-slate-400 mt-6">
|
|
<span>6 (0 Punkte)</span>
|
|
<span>1+ (15 Punkte)</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Criteria Breakdown Heatmap */}
|
|
<div className="bg-white rounded-lg border border-slate-200 p-6">
|
|
<h3 className="text-sm font-medium text-slate-500 mb-4">Kriterien-Vergleich</h3>
|
|
<div className="space-y-3">
|
|
{Object.entries(fairnessData.criteria_breakdown).map(([criterion, data]) => {
|
|
const color = CRITERION_COLORS[criterion] || '#6b7280'
|
|
const range = data.max - data.min
|
|
|
|
return (
|
|
<div key={criterion} className="flex items-center gap-4">
|
|
<div className="w-32 flex items-center gap-2">
|
|
<div className="w-3 h-3 rounded-full" style={{ backgroundColor: color }} />
|
|
<span className="text-sm font-medium capitalize">{criterion}</span>
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="relative h-6 bg-slate-100 rounded-full overflow-hidden">
|
|
{/* Range bar */}
|
|
<div
|
|
className="absolute h-full opacity-30"
|
|
style={{
|
|
backgroundColor: color,
|
|
left: `${data.min}%`,
|
|
width: `${range}%`
|
|
}}
|
|
/>
|
|
{/* Average marker */}
|
|
<div
|
|
className="absolute top-0 bottom-0 w-1 rounded"
|
|
style={{
|
|
backgroundColor: color,
|
|
left: `${data.average}%`
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="w-24 text-right">
|
|
<span className="text-sm font-semibold">{data.average}%</span>
|
|
<span className="text-xs text-slate-400 ml-1">avg</span>
|
|
</div>
|
|
<div className="w-20 text-right text-xs text-slate-500">
|
|
{data.min}% - {data.max}%
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Outliers List */}
|
|
{fairnessData.outliers.length > 0 && (
|
|
<div className="bg-white rounded-lg border border-slate-200 p-6">
|
|
<h3 className="text-sm font-medium text-slate-500 mb-4">
|
|
Ausreisser ({fairnessData.outliers.length})
|
|
</h3>
|
|
<div className="space-y-2">
|
|
{fairnessData.outliers.map((outlier) => (
|
|
<div
|
|
key={outlier.student_id}
|
|
className={`flex items-center justify-between p-3 rounded-lg border ${
|
|
outlier.direction === 'above'
|
|
? 'bg-green-50 border-green-200'
|
|
: 'bg-red-50 border-red-200'
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-white font-bold ${
|
|
outlier.direction === 'above' ? 'bg-green-500' : 'bg-red-500'
|
|
}`}>
|
|
{outlier.direction === 'above' ? '↑' : '↓'}
|
|
</div>
|
|
<div>
|
|
<div className="font-medium">{outlier.student_name}</div>
|
|
<div className="text-sm text-slate-500">
|
|
{outlier.grade_points} Punkte ({GRADE_LABELS[outlier.grade_points]}) -
|
|
Abweichung: {outlier.deviation} Punkte {outlier.direction === 'above' ? 'ueber' : 'unter'} Durchschnitt
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Link
|
|
href={`/admin/klausur-korrektur/${klausurId}/${outlier.student_id}`}
|
|
className="px-4 py-2 bg-white border border-slate-300 rounded-lg text-sm hover:bg-slate-50 flex items-center gap-2"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
Pruefen
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* All Students Table */}
|
|
<div className="bg-white rounded-lg border border-slate-200 p-6">
|
|
<h3 className="text-sm font-medium text-slate-500 mb-4">
|
|
Alle Arbeiten ({klausur?.students.length || 0})
|
|
</h3>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-slate-200">
|
|
<th className="text-left py-2 px-3 font-medium text-slate-600">Student</th>
|
|
<th className="text-center py-2 px-3 font-medium text-slate-600">Note</th>
|
|
<th className="text-center py-2 px-3 font-medium text-slate-600">RS</th>
|
|
<th className="text-center py-2 px-3 font-medium text-slate-600">Gram</th>
|
|
<th className="text-center py-2 px-3 font-medium text-slate-600">Inhalt</th>
|
|
<th className="text-center py-2 px-3 font-medium text-slate-600">Struktur</th>
|
|
<th className="text-center py-2 px-3 font-medium text-slate-600">Stil</th>
|
|
<th className="text-right py-2 px-3 font-medium text-slate-600">Aktion</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{klausur?.students
|
|
.sort((a, b) => b.grade_points - a.grade_points)
|
|
.map((student) => {
|
|
const isOutlier = fairnessData.outliers.some(o => o.student_id === student.id)
|
|
const outlierInfo = fairnessData.outliers.find(o => o.student_id === student.id)
|
|
|
|
return (
|
|
<tr
|
|
key={student.id}
|
|
className={`border-b border-slate-100 ${
|
|
isOutlier
|
|
? outlierInfo?.direction === 'above'
|
|
? 'bg-green-50'
|
|
: 'bg-red-50'
|
|
: ''
|
|
}`}
|
|
>
|
|
<td className="py-2 px-3">
|
|
<div className="font-medium">{student.anonym_id}</div>
|
|
</td>
|
|
<td className="py-2 px-3 text-center">
|
|
<span className="font-bold">
|
|
{student.grade_points} ({GRADE_LABELS[student.grade_points] || '-'})
|
|
</span>
|
|
</td>
|
|
<td className="py-2 px-3 text-center">
|
|
{student.criteria_scores?.rechtschreibung?.score ?? '-'}%
|
|
</td>
|
|
<td className="py-2 px-3 text-center">
|
|
{student.criteria_scores?.grammatik?.score ?? '-'}%
|
|
</td>
|
|
<td className="py-2 px-3 text-center">
|
|
{student.criteria_scores?.inhalt?.score ?? '-'}%
|
|
</td>
|
|
<td className="py-2 px-3 text-center">
|
|
{student.criteria_scores?.struktur?.score ?? '-'}%
|
|
</td>
|
|
<td className="py-2 px-3 text-center">
|
|
{student.criteria_scores?.stil?.score ?? '-'}%
|
|
</td>
|
|
<td className="py-2 px-3 text-right">
|
|
<Link
|
|
href={`/admin/klausur-korrektur/${klausurId}/${student.id}`}
|
|
className="text-primary-600 hover:text-primary-800 text-sm"
|
|
>
|
|
Bearbeiten
|
|
</Link>
|
|
</td>
|
|
</tr>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</AdminLayout>
|
|
)
|
|
}
|