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>
1002 lines
39 KiB
TypeScript
1002 lines
39 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, useCallback, useMemo } 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 { korrekturApi } from '@/lib/korrektur/api'
|
|
|
|
// =============================================================================
|
|
// TYPES
|
|
// =============================================================================
|
|
|
|
interface AbiturDokument {
|
|
id: string
|
|
dateiname: string
|
|
fach: string
|
|
jahr: number
|
|
bundesland: string
|
|
niveau: string
|
|
dokumenttyp: string
|
|
aufgabentyp?: string
|
|
thema?: string
|
|
download_url: string
|
|
preview_url?: string
|
|
file_size?: number
|
|
page_count?: number
|
|
}
|
|
|
|
interface ThemaSuggestion {
|
|
label: string
|
|
count: number
|
|
aufgabentyp: string
|
|
kategorie?: string
|
|
}
|
|
|
|
// =============================================================================
|
|
// CONSTANTS
|
|
// =============================================================================
|
|
|
|
// Default filter options (will be updated from API)
|
|
const DEFAULT_FAECHER = ['Alle', 'Deutsch', 'Englisch', 'Mathematik', 'Geschichte', 'Politik']
|
|
const DEFAULT_JAHRE = ['Alle', '2025', '2024', '2023', '2022', '2021']
|
|
const BUNDESLAENDER = ['Alle', 'Niedersachsen', 'NRW', 'Bayern', 'Baden-Wuerttemberg', 'Hessen']
|
|
const DEFAULT_NIVEAUS = ['Alle', 'eA', 'gA']
|
|
const DEFAULT_DOKUMENTTYPEN = ['Alle', 'Aufgabe', 'Erwartungshorizont', 'Loesungshinweise']
|
|
|
|
const POPULAR_THEMES = [
|
|
'Textanalyse',
|
|
'Gedichtanalyse',
|
|
'Eroerterung',
|
|
'Dramenanalyse',
|
|
'Sprachreflexion',
|
|
'Romantik',
|
|
'Expressionismus',
|
|
]
|
|
|
|
// =============================================================================
|
|
// GLASS CARD COMPONENT
|
|
// =============================================================================
|
|
|
|
interface GlassCardProps {
|
|
children: React.ReactNode
|
|
className?: string
|
|
onClick?: () => void
|
|
size?: 'sm' | 'md' | 'lg'
|
|
delay?: number
|
|
isDark?: boolean
|
|
}
|
|
|
|
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>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// FILTER DROPDOWN
|
|
// =============================================================================
|
|
|
|
interface FilterDropdownProps {
|
|
label: string
|
|
value: string
|
|
options: string[]
|
|
onChange: (value: string) => void
|
|
isDark: boolean
|
|
}
|
|
|
|
function FilterDropdown({ label, value, options, onChange, isDark }: FilterDropdownProps) {
|
|
const inputId = `filter-${label.toLowerCase().replace(/\s+/g, '-')}`
|
|
return (
|
|
<div className="flex flex-col gap-1">
|
|
<label htmlFor={inputId} className={`text-xs ${isDark ? 'text-white/50' : 'text-slate-500'}`}>{label}</label>
|
|
<select
|
|
id={inputId}
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
className={`px-3 py-2 rounded-xl text-sm transition-colors ${
|
|
isDark
|
|
? 'bg-white/10 border-white/20 text-white'
|
|
: 'bg-white border-slate-200 text-slate-900'
|
|
} border focus:ring-2 focus:ring-purple-500 focus:border-transparent`}
|
|
>
|
|
{options.map((opt) => (
|
|
<option key={opt} value={opt} className="bg-slate-800 text-white">
|
|
{opt}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// DOCUMENT CARD
|
|
// =============================================================================
|
|
|
|
interface DokumentCardProps {
|
|
dokument: AbiturDokument
|
|
onPreview: () => void
|
|
onUseAsTemplate: () => void
|
|
delay?: number
|
|
isDark: boolean
|
|
}
|
|
|
|
function DokumentCard({ dokument, onPreview, onUseAsTemplate, delay = 0, isDark }: DokumentCardProps) {
|
|
const typeColor = dokument.dokumenttyp === 'Erwartungshorizont' ? '#22c55e' : '#3b82f6'
|
|
|
|
return (
|
|
<GlassCard delay={delay} isDark={isDark}>
|
|
<div className="flex flex-col h-full">
|
|
{/* Header */}
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className={`font-semibold truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
|
{dokument.fach} {dokument.jahr} {dokument.niveau}
|
|
</h3>
|
|
<p className={`text-sm truncate ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
|
|
{dokument.thema || dokument.aufgabentyp || dokument.dateiname}
|
|
</p>
|
|
</div>
|
|
<span
|
|
className="px-2 py-1 rounded-full text-xs font-medium flex-shrink-0 ml-2"
|
|
style={{ backgroundColor: `${typeColor}20`, color: typeColor }}
|
|
>
|
|
{dokument.dokumenttyp === 'Erwartungshorizont' ? 'EH' : 'Aufgabe'}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Meta */}
|
|
<div className={`flex items-center gap-3 text-xs mb-4 ${isDark ? 'text-white/40' : 'text-slate-500'}`}>
|
|
<span>{dokument.bundesland}</span>
|
|
{dokument.page_count && <span>{dokument.page_count} Seiten</span>}
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex gap-2 mt-auto">
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); onPreview() }}
|
|
className={`flex-1 px-3 py-2 rounded-xl text-sm font-medium transition-colors ${
|
|
isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
|
|
}`}
|
|
>
|
|
Vorschau
|
|
</button>
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); onUseAsTemplate() }}
|
|
className="flex-1 px-3 py-2 rounded-xl text-sm font-medium bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:shadow-lg hover:shadow-purple-500/30 transition-all"
|
|
>
|
|
Verwenden
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</GlassCard>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// PREVIEW MODAL
|
|
// =============================================================================
|
|
|
|
interface PreviewModalProps {
|
|
dokument: AbiturDokument | null
|
|
onClose: () => void
|
|
onUseAsTemplate: () => void
|
|
isDark: boolean
|
|
}
|
|
|
|
function PreviewModal({ dokument, onClose, onUseAsTemplate, isDark }: PreviewModalProps) {
|
|
const [zoom, setZoom] = useState(100)
|
|
|
|
if (!dokument) return null
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex">
|
|
{/* Backdrop */}
|
|
<div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} />
|
|
|
|
{/* Content */}
|
|
<div className="relative flex-1 flex m-4 gap-4">
|
|
{/* PDF Viewer */}
|
|
<div className="flex-1 flex flex-col">
|
|
<GlassCard className="flex-1 flex flex-col overflow-hidden" size="sm" isDark={isDark}>
|
|
{/* Toolbar */}
|
|
<div className={`flex items-center justify-between p-3 border-b ${isDark ? 'border-white/10' : 'border-slate-200'}`}>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => setZoom(z => Math.max(50, z - 25))}
|
|
className={`p-2 rounded-lg ${isDark ? 'hover:bg-white/10' : 'hover:bg-slate-100'}`}
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
|
|
</svg>
|
|
</button>
|
|
<span className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-600'}`}>{zoom}%</span>
|
|
<button
|
|
onClick={() => setZoom(z => Math.min(200, z + 25))}
|
|
className={`p-2 rounded-lg ${isDark ? 'hover:bg-white/10' : 'hover:bg-slate-100'}`}
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className={`p-2 rounded-lg ${isDark ? 'hover:bg-white/10' : 'hover:bg-slate-100'}`}
|
|
>
|
|
<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>
|
|
|
|
{/* PDF Content */}
|
|
<div className="flex-1 overflow-auto p-4">
|
|
<div
|
|
className="mx-auto bg-white rounded-lg shadow-xl"
|
|
style={{ width: `${zoom}%`, minHeight: '800px' }}
|
|
>
|
|
{dokument.preview_url ? (
|
|
<iframe
|
|
src={dokument.preview_url}
|
|
className="w-full h-full min-h-[800px]"
|
|
title={dokument.dateiname}
|
|
/>
|
|
) : (
|
|
<div className="flex items-center justify-center h-full text-slate-400">
|
|
<div className="text-center">
|
|
<svg className="w-16 h-16 mx-auto mb-4" 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>
|
|
<p>Vorschau nicht verfuegbar</p>
|
|
<a
|
|
href={dokument.download_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-purple-400 hover:underline mt-2 inline-block"
|
|
>
|
|
PDF herunterladen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</GlassCard>
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div className="w-80 flex flex-col gap-4">
|
|
{/* Close Button - prominent */}
|
|
<button
|
|
onClick={onClose}
|
|
className={`flex items-center gap-2 px-4 py-3 rounded-2xl font-medium transition-colors ${
|
|
isDark
|
|
? 'bg-white/10 text-white hover:bg-white/20'
|
|
: 'bg-white/70 text-slate-700 hover:bg-white/90'
|
|
}`}
|
|
style={{
|
|
backdropFilter: 'blur(24px)',
|
|
border: isDark ? '1px solid rgba(255,255,255,0.1)' : '1px solid rgba(0,0,0,0.1)',
|
|
}}
|
|
>
|
|
<svg className="w-5 h-5" 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 zum Archiv
|
|
</button>
|
|
|
|
<GlassCard size="md" isDark={isDark}>
|
|
<h3 className={`font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>Details</h3>
|
|
<div className="space-y-3">
|
|
<div>
|
|
<span className={`text-xs ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Fach</span>
|
|
<p className={isDark ? 'text-white' : 'text-slate-900'}>{dokument.fach}</p>
|
|
</div>
|
|
<div>
|
|
<span className={`text-xs ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Jahr</span>
|
|
<p className={isDark ? 'text-white' : 'text-slate-900'}>{dokument.jahr}</p>
|
|
</div>
|
|
<div>
|
|
<span className={`text-xs ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Bundesland</span>
|
|
<p className={isDark ? 'text-white' : 'text-slate-900'}>{dokument.bundesland}</p>
|
|
</div>
|
|
<div>
|
|
<span className={`text-xs ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Niveau</span>
|
|
<p className={isDark ? 'text-white' : 'text-slate-900'}>{dokument.niveau}</p>
|
|
</div>
|
|
{dokument.thema && (
|
|
<div>
|
|
<span className={`text-xs ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Thema</span>
|
|
<p className={isDark ? 'text-white' : 'text-slate-900'}>{dokument.thema}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</GlassCard>
|
|
|
|
<GlassCard size="md" isDark={isDark}>
|
|
<h3 className={`font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>Aktionen</h3>
|
|
<div className="space-y-2">
|
|
<button
|
|
onClick={onUseAsTemplate}
|
|
className="w-full 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"
|
|
>
|
|
Als Vorlage verwenden
|
|
</button>
|
|
<a
|
|
href={dokument.download_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={`block w-full px-4 py-3 rounded-xl text-center font-medium transition-colors ${
|
|
isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
|
|
}`}
|
|
>
|
|
Herunterladen
|
|
</a>
|
|
</div>
|
|
</GlassCard>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// CREATE KLAUSUR FROM TEMPLATE MODAL
|
|
// =============================================================================
|
|
|
|
interface CreateKlausurFromTemplateModalProps {
|
|
template: AbiturDokument
|
|
onClose: () => void
|
|
onCreate: (title: string) => void
|
|
onFallback: () => void
|
|
isLoading: boolean
|
|
error: string | null
|
|
isDark: boolean
|
|
}
|
|
|
|
function CreateKlausurFromTemplateModal({
|
|
template,
|
|
onClose,
|
|
onCreate,
|
|
onFallback,
|
|
isLoading,
|
|
error,
|
|
isDark,
|
|
}: CreateKlausurFromTemplateModalProps) {
|
|
const [title, setTitle] = useState(
|
|
`${template.fach} ${template.aufgabentyp || ''} ${template.jahr}`.trim()
|
|
)
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
onCreate(title)
|
|
}
|
|
|
|
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-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
|
Klausur aus Vorlage erstellen
|
|
</h2>
|
|
<p className={`text-sm mb-6 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
|
|
Basierend auf: {template.thema || template.dateiname}
|
|
</p>
|
|
|
|
{error && (
|
|
<div className="mb-4 p-3 rounded-lg bg-red-500/20 border border-red-500/30 text-sm">
|
|
<p className="text-red-300 mb-2">{error}</p>
|
|
<button
|
|
onClick={onFallback}
|
|
className="text-purple-400 hover:text-purple-300 underline text-xs"
|
|
>
|
|
Zur Korrektur-Uebersicht (ohne Klausur erstellen)
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label className={`block text-sm mb-2 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
|
|
Klausur-Titel
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
placeholder="z.B. Deutsch LK Q4 - Kafka"
|
|
className={`w-full p-3 rounded-xl border focus:ring-2 focus:ring-purple-500 focus:border-transparent ${
|
|
isDark
|
|
? 'bg-white/10 border-white/20 text-white placeholder-white/40'
|
|
: 'bg-slate-100 border-slate-300 text-slate-900 placeholder-slate-400'
|
|
}`}
|
|
required
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
|
|
{/* Template Info */}
|
|
<div className={`p-4 rounded-xl ${isDark ? 'bg-white/5' : 'bg-slate-100'}`}>
|
|
<div className="grid grid-cols-2 gap-3 text-sm">
|
|
<div>
|
|
<span className={isDark ? 'text-white/50' : 'text-slate-500'}>Fach:</span>
|
|
<span className={`ml-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>{template.fach}</span>
|
|
</div>
|
|
<div>
|
|
<span className={isDark ? 'text-white/50' : 'text-slate-500'}>Jahr:</span>
|
|
<span className={`ml-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>{template.jahr}</span>
|
|
</div>
|
|
<div>
|
|
<span className={isDark ? 'text-white/50' : 'text-slate-500'}>Niveau:</span>
|
|
<span className={`ml-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>{template.niveau}</span>
|
|
</div>
|
|
<div>
|
|
<span className={isDark ? 'text-white/50' : 'text-slate-500'}>Typ:</span>
|
|
<span className={`ml-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>{template.aufgabentyp}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-3 pt-2">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
disabled={isLoading}
|
|
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'
|
|
} disabled:opacity-50`}
|
|
>
|
|
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 ? (
|
|
<span className="flex items-center justify-center gap-2">
|
|
<svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
|
</svg>
|
|
Erstelle...
|
|
</span>
|
|
) : (
|
|
'Klausur erstellen'
|
|
)}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</GlassCard>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// MAIN PAGE
|
|
// =============================================================================
|
|
|
|
export default function ArchivPage() {
|
|
const { isDark } = useTheme()
|
|
const { t } = useLanguage()
|
|
const router = useRouter()
|
|
|
|
// State
|
|
const [searchQuery, setSearchQuery] = useState('')
|
|
const [suggestions, setSuggestions] = useState<ThemaSuggestion[]>([])
|
|
const [showSuggestions, setShowSuggestions] = useState(false)
|
|
const [dokumente, setDokumente] = useState<AbiturDokument[]>([])
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
// Filters
|
|
const [fach, setFach] = useState('Alle')
|
|
const [jahr, setJahr] = useState('Alle')
|
|
const [bundesland, setBundesland] = useState('Alle')
|
|
const [niveau, setNiveau] = useState('Alle')
|
|
const [dokumenttyp, setDokumenttyp] = useState('Alle')
|
|
|
|
// Preview
|
|
const [previewDokument, setPreviewDokument] = useState<AbiturDokument | null>(null)
|
|
|
|
// Create Klausur Modal
|
|
const [showCreateModal, setShowCreateModal] = useState(false)
|
|
const [selectedTemplate, setSelectedTemplate] = useState<AbiturDokument | null>(null)
|
|
const [isCreating, setIsCreating] = useState(false)
|
|
const [createError, setCreateError] = useState<string | null>(null)
|
|
|
|
// Example PDF URL (Mozilla public sample) - fallback when API fails
|
|
const SAMPLE_PDF = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf'
|
|
|
|
// Available filter options (updated from API response)
|
|
const [availableFilters, setAvailableFilters] = useState<{
|
|
subjects: string[]
|
|
years: number[]
|
|
niveaus: string[]
|
|
doc_types: string[]
|
|
}>({
|
|
subjects: ['Deutsch', 'Englisch', 'Mathematik'],
|
|
years: [2025, 2024, 2023, 2022, 2021],
|
|
niveaus: ['eA', 'gA'],
|
|
doc_types: ['EWH', 'Aufgabe']
|
|
})
|
|
|
|
// Load data from API with fallback to mock
|
|
useEffect(() => {
|
|
const loadDocuments = async () => {
|
|
setIsLoading(true)
|
|
setError(null)
|
|
|
|
try {
|
|
// Build filter params
|
|
const filters: {
|
|
subject?: string
|
|
year?: number
|
|
niveau?: string
|
|
doc_type?: string
|
|
search?: string
|
|
} = {}
|
|
|
|
if (fach !== 'Alle') filters.subject = fach
|
|
if (jahr !== 'Alle') filters.year = parseInt(jahr)
|
|
if (niveau !== 'Alle') filters.niveau = niveau
|
|
if (dokumenttyp !== 'Alle') {
|
|
// Map frontend names to API names
|
|
const docTypeMap: Record<string, string> = {
|
|
'Erwartungshorizont': 'EWH',
|
|
'Aufgabe': 'Aufgabe',
|
|
'Loesungshinweise': 'Material'
|
|
}
|
|
filters.doc_type = docTypeMap[dokumenttyp] || dokumenttyp
|
|
}
|
|
if (searchQuery) filters.search = searchQuery
|
|
|
|
const response = await korrekturApi.getArchivDocuments(filters)
|
|
|
|
// Map API response to frontend interface
|
|
const mappedDokumente: AbiturDokument[] = response.documents.map((doc) => ({
|
|
id: doc.id,
|
|
dateiname: `${doc.subject}_${doc.niveau}_${doc.year}_${doc.doc_type}.pdf`,
|
|
fach: doc.subject,
|
|
jahr: doc.year,
|
|
bundesland: doc.bundesland === 'NI' ? 'Niedersachsen' : doc.bundesland,
|
|
niveau: doc.niveau,
|
|
dokumenttyp: doc.doc_type === 'EWH' ? 'Erwartungshorizont' : doc.doc_type,
|
|
aufgabentyp: doc.doc_type,
|
|
thema: doc.title,
|
|
download_url: doc.preview_url || SAMPLE_PDF,
|
|
preview_url: doc.preview_url || SAMPLE_PDF,
|
|
}))
|
|
|
|
// Update available filters from API
|
|
if (response.filters) {
|
|
setAvailableFilters({
|
|
subjects: response.filters.subjects || ['Deutsch', 'Englisch', 'Mathematik'],
|
|
years: response.filters.years || [2025, 2024, 2023, 2022, 2021],
|
|
niveaus: response.filters.niveaus || ['eA', 'gA'],
|
|
doc_types: response.filters.doc_types || ['EWH', 'Aufgabe']
|
|
})
|
|
}
|
|
|
|
// If API returns documents, use them
|
|
if (mappedDokumente.length > 0) {
|
|
setDokumente(mappedDokumente)
|
|
} else {
|
|
// API returned empty, use fallback mock data
|
|
console.warn('API returned empty documents, using fallback data')
|
|
throw new Error('Empty response')
|
|
}
|
|
|
|
} catch (err) {
|
|
console.warn('Failed to load from API, using fallback data:', err)
|
|
// Fallback to mock data
|
|
const mockDokumente: AbiturDokument[] = [
|
|
{
|
|
id: '1',
|
|
dateiname: 'Deutsch_eA_2024_Aufgabe1.pdf',
|
|
fach: 'Deutsch',
|
|
jahr: 2024,
|
|
bundesland: 'Niedersachsen',
|
|
niveau: 'eA',
|
|
dokumenttyp: 'Aufgabe',
|
|
aufgabentyp: 'Textanalyse',
|
|
thema: 'Textanalyse: "Der Prozess" - Kafka',
|
|
download_url: SAMPLE_PDF,
|
|
preview_url: SAMPLE_PDF,
|
|
page_count: 4,
|
|
},
|
|
{
|
|
id: '2',
|
|
dateiname: 'Deutsch_eA_2024_EH1.pdf',
|
|
fach: 'Deutsch',
|
|
jahr: 2024,
|
|
bundesland: 'Niedersachsen',
|
|
niveau: 'eA',
|
|
dokumenttyp: 'Erwartungshorizont',
|
|
aufgabentyp: 'Textanalyse',
|
|
thema: 'EH zu Kafka-Analyse',
|
|
download_url: SAMPLE_PDF,
|
|
preview_url: SAMPLE_PDF,
|
|
page_count: 8,
|
|
},
|
|
{
|
|
id: '3',
|
|
dateiname: 'Deutsch_gA_2024_Aufgabe2.pdf',
|
|
fach: 'Deutsch',
|
|
jahr: 2024,
|
|
bundesland: 'Niedersachsen',
|
|
niveau: 'gA',
|
|
dokumenttyp: 'Aufgabe',
|
|
aufgabentyp: 'Gedichtanalyse',
|
|
thema: 'Gedichtvergleich Romantik',
|
|
download_url: SAMPLE_PDF,
|
|
preview_url: SAMPLE_PDF,
|
|
page_count: 3,
|
|
},
|
|
{
|
|
id: '4',
|
|
dateiname: 'Deutsch_eA_2023_Aufgabe1.pdf',
|
|
fach: 'Deutsch',
|
|
jahr: 2023,
|
|
bundesland: 'Niedersachsen',
|
|
niveau: 'eA',
|
|
dokumenttyp: 'Aufgabe',
|
|
aufgabentyp: 'Eroerterung',
|
|
thema: 'Materialgestuetzte Eroerterung: Digitalisierung',
|
|
download_url: SAMPLE_PDF,
|
|
preview_url: SAMPLE_PDF,
|
|
page_count: 5,
|
|
},
|
|
{
|
|
id: '5',
|
|
dateiname: 'Deutsch_eA_2023_EH1.pdf',
|
|
fach: 'Deutsch',
|
|
jahr: 2023,
|
|
bundesland: 'Niedersachsen',
|
|
niveau: 'eA',
|
|
dokumenttyp: 'Erwartungshorizont',
|
|
aufgabentyp: 'Eroerterung',
|
|
thema: 'EH zu Digitalisierungs-Eroerterung',
|
|
download_url: SAMPLE_PDF,
|
|
preview_url: SAMPLE_PDF,
|
|
page_count: 10,
|
|
},
|
|
{
|
|
id: '6',
|
|
dateiname: 'Deutsch_gA_2023_Aufgabe3.pdf',
|
|
fach: 'Deutsch',
|
|
jahr: 2023,
|
|
bundesland: 'Niedersachsen',
|
|
niveau: 'gA',
|
|
dokumenttyp: 'Aufgabe',
|
|
aufgabentyp: 'Dramenanalyse',
|
|
thema: 'Szenenanalyse: "Faust I"',
|
|
download_url: SAMPLE_PDF,
|
|
preview_url: SAMPLE_PDF,
|
|
page_count: 4,
|
|
},
|
|
]
|
|
setDokumente(mockDokumente)
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
|
|
loadDocuments()
|
|
}, [fach, jahr, bundesland, niveau, dokumenttyp, searchQuery])
|
|
|
|
// Documents are now filtered by API, but keep local filtering for bundesland (API only filters NI)
|
|
// and for fallback mock data, also apply search filter locally for mock data
|
|
const filteredDokumente = useMemo(() => {
|
|
return dokumente.filter((dok) => {
|
|
// Bundesland filter (not yet supported by API)
|
|
if (bundesland !== 'Alle' && dok.bundesland !== bundesland) return false
|
|
// Search filter (for local mock data - API handles this server-side)
|
|
if (searchQuery) {
|
|
const query = searchQuery.toLowerCase()
|
|
const matchesSearch =
|
|
dok.thema?.toLowerCase().includes(query) ||
|
|
dok.fach.toLowerCase().includes(query) ||
|
|
dok.aufgabentyp?.toLowerCase().includes(query) ||
|
|
dok.dateiname.toLowerCase().includes(query)
|
|
if (!matchesSearch) return false
|
|
}
|
|
return true
|
|
})
|
|
}, [dokumente, bundesland, searchQuery])
|
|
|
|
// Handle theme search
|
|
const handleThemeClick = (theme: string) => {
|
|
setSearchQuery(theme)
|
|
setShowSuggestions(false)
|
|
}
|
|
|
|
// Handle use as template
|
|
const handleUseAsTemplate = (dokument: AbiturDokument) => {
|
|
setSelectedTemplate(dokument)
|
|
setShowCreateModal(true)
|
|
setCreateError(null)
|
|
}
|
|
|
|
// Create Klausur with template
|
|
const handleCreateKlausur = async (title: string) => {
|
|
if (!selectedTemplate) return
|
|
setIsCreating(true)
|
|
setCreateError(null)
|
|
|
|
try {
|
|
const newKlausur = await korrekturApi.createKlausur({
|
|
title: title || `${selectedTemplate.fach} ${selectedTemplate.aufgabentyp || ''} ${selectedTemplate.jahr}`,
|
|
subject: selectedTemplate.fach,
|
|
year: selectedTemplate.jahr,
|
|
semester: 'Abitur',
|
|
modus: 'landes_abitur',
|
|
})
|
|
|
|
setShowCreateModal(false)
|
|
setSelectedTemplate(null)
|
|
router.push(`/korrektur/${newKlausur.id}`)
|
|
} catch (err) {
|
|
console.error('Failed to create klausur:', err)
|
|
const errorMsg = err instanceof Error ? err.message : 'Unbekannter Fehler'
|
|
if (errorMsg.includes('fetch') || errorMsg.includes('Load') || errorMsg.includes('network')) {
|
|
setCreateError('Verbindung zum Server fehlgeschlagen. Bitte pruefen Sie, ob der Klausur-Service laeuft.')
|
|
} else {
|
|
setCreateError(`Klausur konnte nicht erstellt werden: ${errorMsg}`)
|
|
}
|
|
} finally {
|
|
setIsCreating(false)
|
|
}
|
|
}
|
|
|
|
// Navigate to korrektur page without creating (fallback)
|
|
const handleGoToKorrektur = () => {
|
|
setShowCreateModal(false)
|
|
setSelectedTemplate(null)
|
|
router.push('/korrektur')
|
|
}
|
|
|
|
const activeFilters = [fach, jahr, bundesland, niveau, dokumenttyp].filter(f => f !== 'Alle').length
|
|
|
|
// Computed filter options with "Alle" prefix
|
|
const FAECHER = useMemo(() => ['Alle', ...availableFilters.subjects], [availableFilters.subjects])
|
|
const JAHRE = useMemo(() => ['Alle', ...availableFilters.years.map(String)], [availableFilters.years])
|
|
const NIVEAUS = useMemo(() => ['Alle', ...availableFilters.niveaus], [availableFilters.niveaus])
|
|
const DOKUMENTTYPEN = useMemo(() => ['Alle', ...availableFilters.doc_types.map(t => t === 'EWH' ? 'Erwartungshorizont' : t)], [availableFilters.doc_types])
|
|
|
|
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 */}
|
|
<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-6">
|
|
<div>
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<button
|
|
onClick={() => router.push('/korrektur')}
|
|
className={`p-2 rounded-xl transition-colors ${isDark ? 'hover:bg-white/10' : 'hover:bg-slate-200'}`}
|
|
>
|
|
<svg className={`w-5 h-5 ${isDark ? 'text-white/60' : 'text-slate-600'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</button>
|
|
<h1 className={`text-3xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>Abitur-Archiv</h1>
|
|
</div>
|
|
<p className={isDark ? 'text-white/50' : 'text-slate-500'}>
|
|
Zentralabitur-Materialien 2021-2025 durchsuchen
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<ThemeToggle />
|
|
<LanguageDropdown />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Search Bar */}
|
|
<GlassCard className="mb-6" size="md" delay={100} isDark={isDark}>
|
|
<div className="relative">
|
|
<div className="flex items-center gap-3">
|
|
<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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
<input
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
onFocus={() => setShowSuggestions(true)}
|
|
onBlur={() => setTimeout(() => setShowSuggestions(false), 200)}
|
|
placeholder="Thema suchen... z.B. Gedichtanalyse, Romantik, Kafka"
|
|
className={`flex-1 bg-transparent border-none outline-none text-lg ${
|
|
isDark ? 'text-white placeholder-white/40' : 'text-slate-900 placeholder-slate-400'
|
|
}`}
|
|
/>
|
|
{searchQuery && (
|
|
<button
|
|
onClick={() => setSearchQuery('')}
|
|
className={`p-1 rounded-lg ${isDark ? 'hover:bg-white/10' : 'hover:bg-slate-200'}`}
|
|
>
|
|
<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>
|
|
|
|
{/* Popular Themes */}
|
|
<div className="flex flex-wrap gap-2 mt-4">
|
|
{POPULAR_THEMES.map((theme) => (
|
|
<button
|
|
key={theme}
|
|
onClick={() => handleThemeClick(theme)}
|
|
className={`px-3 py-1.5 rounded-full text-sm transition-colors ${
|
|
searchQuery === theme
|
|
? 'bg-purple-500 text-white'
|
|
: isDark
|
|
? 'bg-white/10 text-white/70 hover:bg-white/20'
|
|
: 'bg-slate-200 text-slate-600 hover:bg-slate-300'
|
|
}`}
|
|
>
|
|
{theme}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</GlassCard>
|
|
|
|
{/* Filters */}
|
|
<GlassCard className="mb-6" size="sm" delay={150} isDark={isDark}>
|
|
<div className="flex items-end gap-4 flex-wrap">
|
|
<FilterDropdown label="Fach" value={fach} options={FAECHER} onChange={setFach} isDark={isDark} />
|
|
<FilterDropdown label="Jahr" value={jahr} options={JAHRE} onChange={setJahr} isDark={isDark} />
|
|
<FilterDropdown label="Bundesland" value={bundesland} options={BUNDESLAENDER} onChange={setBundesland} isDark={isDark} />
|
|
<FilterDropdown label="Niveau" value={niveau} options={NIVEAUS} onChange={setNiveau} isDark={isDark} />
|
|
<FilterDropdown label="Typ" value={dokumenttyp} options={DOKUMENTTYPEN} onChange={setDokumenttyp} isDark={isDark} />
|
|
|
|
{activeFilters > 0 && (
|
|
<button
|
|
onClick={() => {
|
|
setFach('Alle')
|
|
setJahr('Alle')
|
|
setBundesland('Alle')
|
|
setNiveau('Alle')
|
|
setDokumenttyp('Alle')
|
|
}}
|
|
className={`px-3 py-2 rounded-xl text-sm transition-colors ${
|
|
isDark ? 'text-purple-400 hover:bg-purple-500/20' : 'text-purple-600 hover:bg-purple-100'
|
|
}`}
|
|
>
|
|
Filter zuruecksetzen ({activeFilters})
|
|
</button>
|
|
)}
|
|
|
|
<div className={`ml-auto text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
|
|
{filteredDokumente.length} Dokumente
|
|
</div>
|
|
</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>
|
|
)}
|
|
|
|
{/* Error */}
|
|
{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>
|
|
</div>
|
|
</GlassCard>
|
|
)}
|
|
|
|
{/* Documents Grid */}
|
|
{!isLoading && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{filteredDokumente.map((dok, index) => (
|
|
<DokumentCard
|
|
key={dok.id}
|
|
dokument={dok}
|
|
onPreview={() => setPreviewDokument(dok)}
|
|
onUseAsTemplate={() => handleUseAsTemplate(dok)}
|
|
delay={200 + index * 50}
|
|
isDark={isDark}
|
|
/>
|
|
))}
|
|
|
|
{filteredDokumente.length === 0 && !isLoading && (
|
|
<div className={`col-span-full text-center py-12 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
|
|
<svg className="w-16 h-16 mx-auto mb-4 opacity-50" 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>
|
|
<p className="text-lg">Keine Dokumente gefunden</p>
|
|
<p className="text-sm mt-1">Versuchen Sie andere Filtereinstellungen</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Preview Modal */}
|
|
<PreviewModal
|
|
dokument={previewDokument}
|
|
onClose={() => setPreviewDokument(null)}
|
|
onUseAsTemplate={() => {
|
|
if (previewDokument) handleUseAsTemplate(previewDokument)
|
|
setPreviewDokument(null)
|
|
}}
|
|
isDark={isDark}
|
|
/>
|
|
|
|
{/* Create Klausur Modal */}
|
|
{showCreateModal && selectedTemplate && (
|
|
<CreateKlausurFromTemplateModal
|
|
template={selectedTemplate}
|
|
onClose={() => { setShowCreateModal(false); setSelectedTemplate(null); setCreateError(null) }}
|
|
onCreate={handleCreateKlausur}
|
|
onFallback={handleGoToKorrektur}
|
|
isLoading={isCreating}
|
|
error={createError}
|
|
isDark={isDark}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|