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>
915 lines
38 KiB
TypeScript
915 lines
38 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, useCallback } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { useTheme } from '@/lib/ThemeContext'
|
|
import { useLanguage } from '@/lib/LanguageContext'
|
|
import { Sidebar } from '@/components/Sidebar'
|
|
import { ThemeToggle } from '@/components/ThemeToggle'
|
|
import { LanguageDropdown } from '@/components/LanguageDropdown'
|
|
import { QRCodeUpload, UploadedFile } from '@/components/QRCodeUpload'
|
|
import {
|
|
korrekturApi,
|
|
getKorrekturStats,
|
|
type KorrekturStats,
|
|
} from '@/lib/korrektur/api'
|
|
import type { Klausur, CreateKlausurData } from './types'
|
|
|
|
// LocalStorage Key for upload session
|
|
const SESSION_ID_KEY = 'bp_korrektur_session'
|
|
|
|
// =============================================================================
|
|
// GLASS CARD - Ultra Transparent (Apple Weather Style)
|
|
// =============================================================================
|
|
|
|
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>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// STAT CARD
|
|
// =============================================================================
|
|
|
|
interface StatCardProps {
|
|
label: string
|
|
value: string | number
|
|
icon: React.ReactNode
|
|
color?: string
|
|
delay?: number
|
|
isDark?: boolean
|
|
}
|
|
|
|
function StatCard({ label, value, icon, color = '#a78bfa', delay = 0, isDark = true }: StatCardProps) {
|
|
return (
|
|
<GlassCard size="sm" delay={delay} isDark={isDark}>
|
|
<div className="flex items-center gap-4">
|
|
<div
|
|
className="w-12 h-12 rounded-2xl flex items-center justify-center"
|
|
style={{ backgroundColor: `${color}20` }}
|
|
>
|
|
<span style={{ color }}>{icon}</span>
|
|
</div>
|
|
<div>
|
|
<p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>{label}</p>
|
|
<p className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>{value}</p>
|
|
</div>
|
|
</div>
|
|
</GlassCard>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// KLAUSUR CARD
|
|
// =============================================================================
|
|
|
|
interface KlausurCardProps {
|
|
klausur: Klausur
|
|
onClick: () => void
|
|
delay?: number
|
|
isDark?: boolean
|
|
}
|
|
|
|
function KlausurCard({ klausur, onClick, delay = 0, isDark = true }: KlausurCardProps) {
|
|
const progress = klausur.student_count
|
|
? Math.round(((klausur.completed_count || 0) / klausur.student_count) * 100)
|
|
: 0
|
|
|
|
const statusColor = klausur.status === 'completed'
|
|
? '#22c55e'
|
|
: klausur.status === 'in_progress'
|
|
? '#f97316'
|
|
: '#6b7280'
|
|
|
|
return (
|
|
<GlassCard onClick={onClick} delay={delay} className="min-h-[180px]" isDark={isDark}>
|
|
<div className="flex flex-col h-full">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<h3 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>{klausur.title}</h3>
|
|
<span
|
|
className="px-2 py-1 rounded-full text-xs font-medium"
|
|
style={{ backgroundColor: `${statusColor}20`, color: statusColor }}
|
|
>
|
|
{klausur.status === 'completed' ? 'Fertig' : klausur.status === 'in_progress' ? 'In Arbeit' : 'Entwurf'}
|
|
</span>
|
|
</div>
|
|
|
|
<p className={`text-sm mb-4 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
|
|
{klausur.subject} {klausur.semester} {klausur.year}
|
|
</p>
|
|
|
|
<div className="mt-auto">
|
|
<div className="flex justify-between text-sm mb-2">
|
|
<span className={isDark ? 'text-white/50' : 'text-slate-500'}>{klausur.student_count || 0} Arbeiten</span>
|
|
<span className={isDark ? 'text-white' : 'text-slate-900'}>{progress}%</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 duration-500"
|
|
style={{
|
|
width: `${progress}%`,
|
|
background: `linear-gradient(90deg, ${statusColor}, ${statusColor}80)`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</GlassCard>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// CREATE KLAUSUR MODAL
|
|
// =============================================================================
|
|
|
|
interface CreateKlausurModalProps {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
onSubmit: (data: CreateKlausurData) => void
|
|
isLoading: boolean
|
|
isDark?: boolean
|
|
}
|
|
|
|
function CreateKlausurModal({ isOpen, onClose, onSubmit, isLoading, isDark = true }: CreateKlausurModalProps) {
|
|
const [title, setTitle] = useState('')
|
|
const [subject, setSubject] = useState('Deutsch')
|
|
const [year, setYear] = useState(new Date().getFullYear())
|
|
const [semester, setSemester] = useState('Abitur')
|
|
const [modus, setModus] = useState<'landes_abitur' | 'vorabitur'>('landes_abitur')
|
|
|
|
if (!isOpen) return null
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
onSubmit({ title, subject, year, semester, modus })
|
|
}
|
|
|
|
const inputClasses = isDark
|
|
? 'bg-white/10 border-white/20 text-white placeholder-white/40'
|
|
: 'bg-slate-100 border-slate-300 text-slate-900 placeholder-slate-400'
|
|
|
|
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-md" size="lg" delay={0} isDark={isDark}>
|
|
<h2 className={`text-xl font-bold mb-6 ${isDark ? 'text-white' : 'text-slate-900'}`}>Neue Klausur erstellen</h2>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label htmlFor="klausur-titel" className={`block text-sm mb-2 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Titel</label>
|
|
<input
|
|
id="klausur-titel"
|
|
type="text"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
placeholder="z.B. Deutsch LK Q4"
|
|
className={`w-full p-3 rounded-xl border focus:ring-2 focus:ring-purple-500 focus:border-transparent ${inputClasses}`}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label htmlFor="klausur-fach" className={`block text-sm mb-2 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Fach</label>
|
|
<select
|
|
id="klausur-fach"
|
|
value={subject}
|
|
onChange={(e) => setSubject(e.target.value)}
|
|
className={`w-full p-3 rounded-xl border focus:ring-2 focus:ring-purple-500 ${inputClasses}`}
|
|
>
|
|
<option value="Deutsch">Deutsch</option>
|
|
<option value="Englisch">Englisch</option>
|
|
<option value="Mathematik">Mathematik</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="klausur-jahr" className={`block text-sm mb-2 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Jahr</label>
|
|
<input
|
|
id="klausur-jahr"
|
|
type="number"
|
|
value={year}
|
|
onChange={(e) => setYear(Number(e.target.value))}
|
|
className={`w-full p-3 rounded-xl border focus:ring-2 focus:ring-purple-500 ${inputClasses}`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label htmlFor="klausur-semester" className={`block text-sm mb-2 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Semester</label>
|
|
<select
|
|
id="klausur-semester"
|
|
value={semester}
|
|
onChange={(e) => setSemester(e.target.value)}
|
|
className={`w-full p-3 rounded-xl border focus:ring-2 focus:ring-purple-500 ${inputClasses}`}
|
|
>
|
|
<option value="Abitur">Abitur</option>
|
|
<option value="Q1">Q1</option>
|
|
<option value="Q2">Q2</option>
|
|
<option value="Q3">Q3</option>
|
|
<option value="Q4">Q4</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="klausur-modus" className={`block text-sm mb-2 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Modus</label>
|
|
<select
|
|
id="klausur-modus"
|
|
value={modus}
|
|
onChange={(e) => setModus(e.target.value as 'landes_abitur' | 'vorabitur')}
|
|
className={`w-full p-3 rounded-xl border focus:ring-2 focus:ring-purple-500 ${inputClasses}`}
|
|
>
|
|
<option value="landes_abitur">Landes-Abitur (NiBiS EH)</option>
|
|
<option value="vorabitur">Vorabitur (Eigener EH)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-3 pt-4">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className={`flex-1 px-4 py-3 rounded-xl transition-colors ${isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-200 text-slate-700 hover:bg-slate-300'}`}
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading || !title.trim()}
|
|
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"
|
|
>
|
|
{isLoading ? 'Erstelle...' : 'Erstellen'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</GlassCard>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// MAIN PAGE
|
|
// =============================================================================
|
|
|
|
export default function KorrekturPage() {
|
|
const { isDark } = useTheme()
|
|
const { t } = useLanguage()
|
|
const router = useRouter()
|
|
|
|
// State
|
|
const [klausuren, setKlausuren] = useState<Klausur[]>([])
|
|
const [stats, setStats] = useState<KorrekturStats | null>(null)
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
// Modal states
|
|
const [showCreateModal, setShowCreateModal] = useState(false)
|
|
const [isCreating, setIsCreating] = useState(false)
|
|
const [showQRModal, setShowQRModal] = useState(false)
|
|
const [uploadSessionId, setUploadSessionId] = useState('')
|
|
const [showDirectUpload, setShowDirectUpload] = useState(false)
|
|
const [showEHUpload, setShowEHUpload] = useState(false)
|
|
const [isDragging, setIsDragging] = useState(false)
|
|
const [uploadedFiles, setUploadedFiles] = useState<File[]>([])
|
|
const [ehFile, setEhFile] = useState<File | null>(null)
|
|
const [isUploading, setIsUploading] = useState(false)
|
|
|
|
// Initialize session ID
|
|
useEffect(() => {
|
|
let storedSessionId = localStorage.getItem(SESSION_ID_KEY)
|
|
if (!storedSessionId) {
|
|
storedSessionId = `korrektur-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
|
|
localStorage.setItem(SESSION_ID_KEY, storedSessionId)
|
|
}
|
|
setUploadSessionId(storedSessionId)
|
|
}, [])
|
|
|
|
// Load data
|
|
const loadData = useCallback(async () => {
|
|
setIsLoading(true)
|
|
setError(null)
|
|
|
|
try {
|
|
const [klausurenData, statsData] = await Promise.all([
|
|
korrekturApi.getKlausuren(),
|
|
getKorrekturStats(),
|
|
])
|
|
setKlausuren(klausurenData)
|
|
setStats(statsData)
|
|
} catch (err) {
|
|
console.error('Failed to load data:', err)
|
|
setError(err instanceof Error ? err.message : 'Laden fehlgeschlagen')
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
loadData()
|
|
}, [loadData])
|
|
|
|
// Create klausur
|
|
const handleCreateKlausur = async (data: CreateKlausurData) => {
|
|
setIsCreating(true)
|
|
try {
|
|
const newKlausur = await korrekturApi.createKlausur(data)
|
|
setKlausuren((prev) => [newKlausur, ...prev])
|
|
setShowCreateModal(false)
|
|
// Navigate to the new klausur
|
|
router.push(`/korrektur/${newKlausur.id}`)
|
|
} catch (err) {
|
|
console.error('Failed to create klausur:', err)
|
|
setError(err instanceof Error ? err.message : 'Erstellung fehlgeschlagen')
|
|
} finally {
|
|
setIsCreating(false)
|
|
}
|
|
}
|
|
|
|
// Handle QR uploaded files
|
|
const handleMobileFileSelect = async (uploadedFile: UploadedFile) => {
|
|
// For now, just close the modal - in production this would create a quick-start klausur
|
|
setShowQRModal(false)
|
|
// Could auto-create a klausur and navigate
|
|
}
|
|
|
|
// Handle direct file upload with drag & drop
|
|
const handleDragOver = (e: React.DragEvent) => {
|
|
e.preventDefault()
|
|
setIsDragging(true)
|
|
}
|
|
|
|
const handleDragLeave = (e: React.DragEvent) => {
|
|
e.preventDefault()
|
|
setIsDragging(false)
|
|
}
|
|
|
|
const handleDrop = (e: React.DragEvent, isEH = false) => {
|
|
e.preventDefault()
|
|
setIsDragging(false)
|
|
const files = Array.from(e.dataTransfer.files).filter(
|
|
f => f.type === 'application/pdf' || f.type.startsWith('image/')
|
|
)
|
|
if (isEH && files.length > 0) {
|
|
setEhFile(files[0])
|
|
} else {
|
|
setUploadedFiles(prev => [...prev, ...files])
|
|
}
|
|
}
|
|
|
|
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>, isEH = false) => {
|
|
if (!e.target.files) return
|
|
const files = Array.from(e.target.files)
|
|
if (isEH && files.length > 0) {
|
|
setEhFile(files[0])
|
|
} else {
|
|
setUploadedFiles(prev => [...prev, ...files])
|
|
}
|
|
}
|
|
|
|
const handleDirectUpload = async () => {
|
|
if (uploadedFiles.length === 0) return
|
|
setIsUploading(true)
|
|
try {
|
|
// Create a quick-start klausur
|
|
const newKlausur = await korrekturApi.createKlausur({
|
|
title: `Schnellstart ${new Date().toLocaleDateString('de-DE')}`,
|
|
subject: 'Deutsch',
|
|
year: new Date().getFullYear(),
|
|
semester: 'Abitur',
|
|
modus: 'landes_abitur'
|
|
})
|
|
|
|
// Upload each file
|
|
for (let i = 0; i < uploadedFiles.length; i++) {
|
|
await korrekturApi.uploadStudentWork(newKlausur.id, uploadedFiles[i], `Arbeit-${i + 1}`)
|
|
}
|
|
|
|
setShowDirectUpload(false)
|
|
setUploadedFiles([])
|
|
router.push(`/korrektur/${newKlausur.id}`)
|
|
} catch (err) {
|
|
console.error('Upload failed:', err)
|
|
setError(err instanceof Error ? err.message : 'Upload fehlgeschlagen')
|
|
} finally {
|
|
setIsUploading(false)
|
|
}
|
|
}
|
|
|
|
const handleEHUpload = async () => {
|
|
if (!ehFile) return
|
|
setIsUploading(true)
|
|
try {
|
|
// Upload EH to backend
|
|
await korrekturApi.uploadEH(ehFile)
|
|
setShowEHUpload(false)
|
|
setEhFile(null)
|
|
loadData() // Refresh to show new EH
|
|
} catch (err) {
|
|
console.error('EH Upload failed:', err)
|
|
setError(err instanceof Error ? err.message : 'EH Upload fehlgeschlagen')
|
|
} finally {
|
|
setIsUploading(false)
|
|
}
|
|
}
|
|
|
|
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={`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>
|
|
|
|
{/* 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>
|
|
<h1 className={`text-3xl font-bold mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>Korrekturplattform</h1>
|
|
<p className={isDark ? 'text-white/50' : 'text-slate-500'}>KI-gestuetzte Abiturklausur-Korrektur</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<ThemeToggle />
|
|
<LanguageDropdown />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Cards */}
|
|
{stats && (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
|
<StatCard
|
|
label="Offene Korrekturen"
|
|
value={stats.openCorrections}
|
|
icon={
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
|
</svg>
|
|
}
|
|
color="#f97316"
|
|
delay={100}
|
|
isDark={isDark}
|
|
/>
|
|
<StatCard
|
|
label="Erledigt (Woche)"
|
|
value={stats.completedThisWeek}
|
|
icon={
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
}
|
|
color="#22c55e"
|
|
delay={200}
|
|
isDark={isDark}
|
|
/>
|
|
<StatCard
|
|
label="Durchschnitt"
|
|
value={stats.averageGrade > 0 ? `${stats.averageGrade} P` : '-'}
|
|
icon={
|
|
<svg className="w-6 h-6" 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>
|
|
}
|
|
color="#3b82f6"
|
|
delay={300}
|
|
isDark={isDark}
|
|
/>
|
|
<StatCard
|
|
label="Zeit gespart"
|
|
value={`${stats.timeSavedHours}h`}
|
|
icon={
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
}
|
|
color="#a78bfa"
|
|
delay={400}
|
|
isDark={isDark}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* 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>
|
|
<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>
|
|
)}
|
|
|
|
{/* Klausuren Grid */}
|
|
{!isLoading && (
|
|
<>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>Klausuren</h2>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
|
|
{klausuren.map((klausur, index) => (
|
|
<KlausurCard
|
|
key={klausur.id}
|
|
klausur={klausur}
|
|
onClick={() => router.push(`/korrektur/${klausur.id}`)}
|
|
delay={500 + index * 50}
|
|
isDark={isDark}
|
|
/>
|
|
))}
|
|
|
|
{/* New Klausur Card */}
|
|
<GlassCard
|
|
onClick={() => setShowCreateModal(true)}
|
|
delay={500 + klausuren.length * 50}
|
|
className={`min-h-[180px] border-2 border-dashed ${isDark ? 'border-white/20 hover:border-purple-400/50' : 'border-slate-300 hover:border-purple-400'}`}
|
|
isDark={isDark}
|
|
>
|
|
<div className="flex flex-col items-center justify-center h-full text-center">
|
|
<div className="w-16 h-16 rounded-2xl bg-purple-500/20 flex items-center justify-center mb-4">
|
|
<svg className="w-8 h-8 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
</div>
|
|
<p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>Neue Klausur</p>
|
|
<p className={`text-sm mt-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Klausur erstellen</p>
|
|
</div>
|
|
</GlassCard>
|
|
</div>
|
|
|
|
{/* Quick Actions */}
|
|
<h2 className={`text-xl font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>Schnellaktionen</h2>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<GlassCard
|
|
onClick={() => setShowQRModal(true)}
|
|
delay={700}
|
|
className="cursor-pointer"
|
|
isDark={isDark}
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-2xl bg-blue-500/20 flex items-center justify-center">
|
|
<span className="text-2xl">📱</span>
|
|
</div>
|
|
<div>
|
|
<p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>QR Upload</p>
|
|
<p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Mit Handy scannen</p>
|
|
</div>
|
|
</div>
|
|
</GlassCard>
|
|
|
|
<GlassCard
|
|
onClick={() => setShowDirectUpload(true)}
|
|
delay={750}
|
|
className="cursor-pointer"
|
|
isDark={isDark}
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-2xl bg-green-500/20 flex items-center justify-center">
|
|
<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="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>
|
|
</div>
|
|
<div>
|
|
<p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>Direkt hochladen</p>
|
|
<p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Drag & Drop</p>
|
|
</div>
|
|
</div>
|
|
</GlassCard>
|
|
|
|
<GlassCard
|
|
onClick={() => setShowCreateModal(true)}
|
|
delay={800}
|
|
className="cursor-pointer"
|
|
isDark={isDark}
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-2xl bg-purple-500/20 flex items-center justify-center">
|
|
<svg className="w-6 h-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>Schnellstart</p>
|
|
<p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Direkt loslegen</p>
|
|
</div>
|
|
</div>
|
|
</GlassCard>
|
|
|
|
<GlassCard
|
|
onClick={() => setShowEHUpload(true)}
|
|
delay={850}
|
|
className="cursor-pointer"
|
|
isDark={isDark}
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-2xl bg-orange-500/20 flex items-center justify-center">
|
|
<svg className="w-6 h-6 text-orange-400" 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>
|
|
</div>
|
|
<div>
|
|
<p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>EH hochladen</p>
|
|
<p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Erwartungshorizont</p>
|
|
</div>
|
|
</div>
|
|
</GlassCard>
|
|
|
|
<GlassCard
|
|
onClick={() => router.push('/korrektur/archiv')}
|
|
delay={900}
|
|
className="cursor-pointer"
|
|
isDark={isDark}
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-2xl bg-indigo-500/20 flex items-center justify-center">
|
|
<svg className="w-6 h-6 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>Abitur-Archiv</p>
|
|
<p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>EH durchsuchen</p>
|
|
</div>
|
|
</div>
|
|
</GlassCard>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Create Klausur Modal */}
|
|
<CreateKlausurModal
|
|
isOpen={showCreateModal}
|
|
onClose={() => setShowCreateModal(false)}
|
|
onSubmit={handleCreateKlausur}
|
|
isLoading={isCreating}
|
|
isDark={isDark}
|
|
/>
|
|
|
|
{/* 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)}
|
|
onFileUploaded={handleMobileFileSelect}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Direct Upload Modal */}
|
|
{showDirectUpload && (
|
|
<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={() => setShowDirectUpload(false)} />
|
|
<GlassCard className="relative w-full max-w-lg" size="lg" delay={0} isDark={isDark}>
|
|
<h2 className={`text-xl font-bold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>Arbeiten hochladen</h2>
|
|
<p className={`mb-4 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
|
|
Ziehen Sie eingescannte Klausuren hierher oder klicken Sie zum Auswaehlen.
|
|
</p>
|
|
|
|
{/* Error Display in Modal */}
|
|
{error && (
|
|
<div className="mb-4 p-3 rounded-lg bg-red-500/20 border border-red-500/30 text-red-300 text-sm">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* Drag & Drop Zone */}
|
|
<div
|
|
onDragOver={handleDragOver}
|
|
onDragLeave={handleDragLeave}
|
|
onDrop={(e) => handleDrop(e, false)}
|
|
className={`relative p-8 rounded-2xl border-2 border-dashed transition-colors ${
|
|
isDragging
|
|
? 'border-purple-400 bg-purple-500/10'
|
|
: isDark
|
|
? 'border-white/20 hover:border-white/40'
|
|
: 'border-slate-300 hover:border-slate-400'
|
|
}`}
|
|
>
|
|
<input
|
|
type="file"
|
|
accept=".pdf,image/*"
|
|
multiple
|
|
onChange={(e) => handleFileSelect(e, false)}
|
|
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
|
/>
|
|
<div className="text-center">
|
|
<svg className={`w-12 h-12 mx-auto mb-4 ${isDark ? 'text-white/40' : 'text-slate-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
|
{isDragging ? 'Dateien hier ablegen' : 'Dateien hierher ziehen'}
|
|
</p>
|
|
<p className={`text-sm mt-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
|
|
PDF oder Bilder (JPG, PNG)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Uploaded Files List */}
|
|
{uploadedFiles.length > 0 && (
|
|
<div className="mt-4 space-y-2">
|
|
<p className={`text-sm font-medium ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
|
|
{uploadedFiles.length} Datei(en) ausgewaehlt:
|
|
</p>
|
|
<div className="max-h-32 overflow-y-auto space-y-1">
|
|
{uploadedFiles.map((file, idx) => (
|
|
<div key={idx} className={`flex items-center justify-between p-2 rounded-lg ${isDark ? 'bg-white/5' : 'bg-slate-100'}`}>
|
|
<span className={`text-sm truncate ${isDark ? 'text-white/80' : 'text-slate-700'}`}>{file.name}</span>
|
|
<button
|
|
onClick={() => setUploadedFiles(prev => prev.filter((_, i) => i !== idx))}
|
|
className="text-red-400 hover:text-red-300"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div className="flex gap-3 mt-6">
|
|
<button
|
|
onClick={() => { setShowDirectUpload(false); setUploadedFiles([]) }}
|
|
className={`flex-1 px-4 py-3 rounded-xl transition-colors ${isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-200 text-slate-700 hover:bg-slate-300'}`}
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
onClick={handleDirectUpload}
|
|
disabled={uploadedFiles.length === 0 || isUploading}
|
|
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"
|
|
>
|
|
{isUploading ? 'Hochladen...' : `${uploadedFiles.length} Arbeiten hochladen`}
|
|
</button>
|
|
</div>
|
|
</GlassCard>
|
|
</div>
|
|
)}
|
|
|
|
{/* EH Upload Modal */}
|
|
{showEHUpload && (
|
|
<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={() => setShowEHUpload(false)} />
|
|
<GlassCard className="relative w-full max-w-lg" size="lg" delay={0} isDark={isDark}>
|
|
<h2 className={`text-xl font-bold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>Erwartungshorizont hochladen</h2>
|
|
<p className={`mb-6 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
|
|
Laden Sie einen eigenen Erwartungshorizont fuer Vorabitur-Klausuren hoch.
|
|
</p>
|
|
|
|
{/* Drag & Drop Zone */}
|
|
<div
|
|
onDragOver={handleDragOver}
|
|
onDragLeave={handleDragLeave}
|
|
onDrop={(e) => handleDrop(e, true)}
|
|
className={`relative p-8 rounded-2xl border-2 border-dashed transition-colors ${
|
|
isDragging
|
|
? 'border-orange-400 bg-orange-500/10'
|
|
: isDark
|
|
? 'border-white/20 hover:border-white/40'
|
|
: 'border-slate-300 hover:border-slate-400'
|
|
}`}
|
|
>
|
|
<input
|
|
type="file"
|
|
accept=".pdf,.docx,.doc"
|
|
onChange={(e) => handleFileSelect(e, true)}
|
|
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
|
/>
|
|
<div className="text-center">
|
|
<svg className={`w-12 h-12 mx-auto mb-4 ${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 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>
|
|
<p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
|
{ehFile ? ehFile.name : 'EH-Datei hierher ziehen'}
|
|
</p>
|
|
<p className={`text-sm mt-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
|
|
PDF oder Word-Dokument
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Selected File */}
|
|
{ehFile && (
|
|
<div className={`mt-4 flex items-center justify-between p-3 rounded-lg ${isDark ? 'bg-white/5' : 'bg-slate-100'}`}>
|
|
<div className="flex items-center gap-3">
|
|
<svg className="w-6 h-6 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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>
|
|
<span className={`text-sm truncate ${isDark ? 'text-white/80' : 'text-slate-700'}`}>{ehFile.name}</span>
|
|
</div>
|
|
<button
|
|
onClick={() => setEhFile(null)}
|
|
className="text-red-400 hover:text-red-300"
|
|
>
|
|
<svg className="w-4 h-4" 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>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div className="flex gap-3 mt-6">
|
|
<button
|
|
onClick={() => { setShowEHUpload(false); setEhFile(null) }}
|
|
className={`flex-1 px-4 py-3 rounded-xl transition-colors ${isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-200 text-slate-700 hover:bg-slate-300'}`}
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
onClick={handleEHUpload}
|
|
disabled={!ehFile || isUploading}
|
|
className="flex-1 px-4 py-3 rounded-xl bg-gradient-to-r from-orange-500 to-red-500 text-white font-semibold hover:shadow-lg hover:shadow-orange-500/30 transition-all disabled:opacity-50"
|
|
>
|
|
{isUploading ? 'Hochladen...' : 'EH hochladen'}
|
|
</button>
|
|
</div>
|
|
</GlassCard>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|