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>
517 lines
21 KiB
TypeScript
517 lines
21 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* Abitur-Archiv - Hauptseite
|
|
* Zentralabitur-Materialien 2021-2025 mit erweiterter Themensuche
|
|
*/
|
|
|
|
import { useState, useEffect, useCallback } from 'react'
|
|
import {
|
|
FileText, Filter, ChevronLeft, ChevronRight, Eye, Download, Search,
|
|
X, Loader2, Grid, List, LayoutGrid, BarChart3, Archive
|
|
} from 'lucide-react'
|
|
import type { AbiturDokument, AbiturDocsResponse } from '@/lib/education/abitur-docs-types'
|
|
import {
|
|
formatFileSize,
|
|
FAECHER,
|
|
JAHRE,
|
|
BUNDESLAENDER,
|
|
NIVEAUS,
|
|
TYPEN,
|
|
} from '@/lib/education/abitur-docs-types'
|
|
import type { ViewMode, ThemaSuggestion } from '@/lib/education/abitur-archiv-types'
|
|
import { ThemenSuche } from './components/ThemenSuche'
|
|
import { DokumentCard } from './components/DokumentCard'
|
|
import { FullscreenViewer } from './components/FullscreenViewer'
|
|
|
|
export default function AbiturArchivPage() {
|
|
// Documents state
|
|
const [documents, setDocuments] = useState<AbiturDokument[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
// Pagination
|
|
const [page, setPage] = useState(1)
|
|
const [totalPages, setTotalPages] = useState(1)
|
|
const [total, setTotal] = useState(0)
|
|
const limit = 20
|
|
|
|
// View mode
|
|
const [viewMode, setViewMode] = useState<ViewMode>('grid')
|
|
|
|
// Filters
|
|
const [filterOpen, setFilterOpen] = useState(false)
|
|
const [filterFach, setFilterFach] = useState<string>('')
|
|
const [filterJahr, setFilterJahr] = useState<string>('')
|
|
const [filterBundesland, setFilterBundesland] = useState<string>('')
|
|
const [filterNiveau, setFilterNiveau] = useState<string>('')
|
|
const [filterTyp, setFilterTyp] = useState<string>('')
|
|
|
|
// Theme search
|
|
const [searchQuery, setSearchQuery] = useState<string>('')
|
|
const [themes, setThemes] = useState<ThemaSuggestion[]>([])
|
|
|
|
// Modal
|
|
const [selectedDocument, setSelectedDocument] = useState<AbiturDokument | null>(null)
|
|
|
|
// Stats
|
|
const [stats, setStats] = useState({ total: 0, indexed: 0, faecher: 0 })
|
|
|
|
// Fetch documents
|
|
const fetchDocuments = useCallback(async () => {
|
|
setLoading(true)
|
|
setError(null)
|
|
|
|
const params = new URLSearchParams()
|
|
params.set('page', page.toString())
|
|
params.set('limit', limit.toString())
|
|
if (filterFach) params.set('fach', filterFach)
|
|
if (filterJahr) params.set('jahr', filterJahr)
|
|
if (filterBundesland) params.set('bundesland', filterBundesland)
|
|
if (filterNiveau) params.set('niveau', filterNiveau)
|
|
if (filterTyp) params.set('typ', filterTyp)
|
|
if (searchQuery) params.set('thema', searchQuery)
|
|
|
|
try {
|
|
const response = await fetch(`/api/education/abitur-archiv?${params.toString()}`)
|
|
if (!response.ok) throw new Error('Fehler beim Laden der Dokumente')
|
|
|
|
const data = await response.json()
|
|
setDocuments(data.documents || [])
|
|
setTotalPages(data.total_pages || 1)
|
|
setTotal(data.total || 0)
|
|
setThemes(data.themes || [])
|
|
|
|
// Update stats
|
|
const indexed = (data.documents || []).filter((d: AbiturDokument) => d.status === 'indexed').length
|
|
const uniqueFaecher = new Set((data.documents || []).map((d: AbiturDokument) => d.fach)).size
|
|
setStats({ total: data.total || 0, indexed, faecher: uniqueFaecher })
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}, [page, filterFach, filterJahr, filterBundesland, filterNiveau, filterTyp, searchQuery])
|
|
|
|
useEffect(() => {
|
|
fetchDocuments()
|
|
}, [fetchDocuments])
|
|
|
|
const clearFilters = () => {
|
|
setFilterFach('')
|
|
setFilterJahr('')
|
|
setFilterBundesland('')
|
|
setFilterNiveau('')
|
|
setFilterTyp('')
|
|
setSearchQuery('')
|
|
setPage(1)
|
|
}
|
|
|
|
const handleSearch = (query: string) => {
|
|
setSearchQuery(query)
|
|
setPage(1)
|
|
}
|
|
|
|
const handleClearSearch = () => {
|
|
setSearchQuery('')
|
|
setPage(1)
|
|
}
|
|
|
|
const handleDownload = (doc: AbiturDokument) => {
|
|
const link = window.document.createElement('a')
|
|
link.href = doc.file_path
|
|
link.download = doc.dateiname
|
|
link.click()
|
|
}
|
|
|
|
const handleAddToKlausur = (doc: AbiturDokument) => {
|
|
// Navigate to klausur-korrektur with document reference
|
|
const params = new URLSearchParams()
|
|
params.set('archiv_doc_id', doc.id)
|
|
params.set('aufgabentyp', doc.typ === 'erwartungshorizont' ? 'vorlage' : 'aufgabe')
|
|
window.location.href = `/education/klausur-korrektur?${params.toString()}`
|
|
}
|
|
|
|
const hasActiveFilters = filterFach || filterJahr || filterBundesland || filterNiveau || filterTyp || searchQuery
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-50">
|
|
{/* Header */}
|
|
<div className="bg-white border-b border-slate-200">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
|
|
<Archive className="w-6 h-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-slate-900">Abitur-Archiv</h1>
|
|
<p className="text-sm text-slate-500">Zentralabitur-Materialien 2021-2025</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="hidden md:flex items-center gap-6">
|
|
<div className="text-center">
|
|
<div className="text-2xl font-bold text-slate-800">{stats.total}</div>
|
|
<div className="text-xs text-slate-500">Dokumente</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-2xl font-bold text-green-600">{stats.indexed}</div>
|
|
<div className="text-xs text-slate-500">Indexiert</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-2xl font-bold text-blue-600">{stats.faecher}</div>
|
|
<div className="text-xs text-slate-500">Faecher</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6">
|
|
{/* Theme Search */}
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<ThemenSuche
|
|
onSearch={handleSearch}
|
|
onClear={handleClearSearch}
|
|
/>
|
|
</div>
|
|
|
|
{/* Filter Bar */}
|
|
<div className="bg-white rounded-xl border border-slate-200 p-4">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={() => setFilterOpen(!filterOpen)}
|
|
className={`px-4 py-2 rounded-lg font-medium flex items-center gap-2 transition-colors ${
|
|
filterOpen || hasActiveFilters
|
|
? 'bg-purple-100 text-purple-700'
|
|
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
|
}`}
|
|
>
|
|
<Filter className="w-4 h-4" />
|
|
Filter
|
|
{hasActiveFilters && (
|
|
<span className="bg-purple-600 text-white text-xs px-1.5 py-0.5 rounded-full">
|
|
{[filterFach, filterJahr, filterBundesland, filterNiveau, filterTyp, searchQuery].filter(Boolean).length}
|
|
</span>
|
|
)}
|
|
</button>
|
|
|
|
{hasActiveFilters && (
|
|
<button
|
|
onClick={clearFilters}
|
|
className="text-sm text-slate-500 hover:text-slate-700 flex items-center gap-1"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
Filter zuruecksetzen
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
{/* Results count */}
|
|
<span className="text-sm text-slate-500">
|
|
{total} Treffer
|
|
</span>
|
|
|
|
{/* View Mode Toggle */}
|
|
<div className="flex bg-slate-100 rounded-lg p-1">
|
|
<button
|
|
onClick={() => setViewMode('grid')}
|
|
className={`p-2 rounded-md transition-colors ${
|
|
viewMode === 'grid' ? 'bg-white shadow-sm text-blue-600' : 'text-slate-500 hover:text-slate-700'
|
|
}`}
|
|
title="Raster-Ansicht"
|
|
>
|
|
<LayoutGrid className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => setViewMode('list')}
|
|
className={`p-2 rounded-md transition-colors ${
|
|
viewMode === 'list' ? 'bg-white shadow-sm text-blue-600' : 'text-slate-500 hover:text-slate-700'
|
|
}`}
|
|
title="Listen-Ansicht"
|
|
>
|
|
<List className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filter Dropdowns */}
|
|
{filterOpen && (
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-3 pt-4 border-t border-slate-200">
|
|
{/* Fach */}
|
|
<div>
|
|
<label className="block text-xs text-slate-500 mb-1">Fach</label>
|
|
<select
|
|
value={filterFach}
|
|
onChange={(e) => { setFilterFach(e.target.value); setPage(1) }}
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="">Alle Faecher</option>
|
|
{FAECHER.map(f => (
|
|
<option key={f.id} value={f.id}>{f.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Jahr */}
|
|
<div>
|
|
<label className="block text-xs text-slate-500 mb-1">Jahr</label>
|
|
<select
|
|
value={filterJahr}
|
|
onChange={(e) => { setFilterJahr(e.target.value); setPage(1) }}
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="">Alle Jahre</option>
|
|
{JAHRE.map(j => (
|
|
<option key={j} value={j}>{j}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Bundesland */}
|
|
<div>
|
|
<label className="block text-xs text-slate-500 mb-1">Bundesland</label>
|
|
<select
|
|
value={filterBundesland}
|
|
onChange={(e) => { setFilterBundesland(e.target.value); setPage(1) }}
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="">Alle Bundeslaender</option>
|
|
{BUNDESLAENDER.map(b => (
|
|
<option key={b.id} value={b.id}>{b.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Niveau */}
|
|
<div>
|
|
<label className="block text-xs text-slate-500 mb-1">Niveau</label>
|
|
<select
|
|
value={filterNiveau}
|
|
onChange={(e) => { setFilterNiveau(e.target.value); setPage(1) }}
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="">Alle Niveaus</option>
|
|
{NIVEAUS.map(n => (
|
|
<option key={n.id} value={n.id}>{n.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Typ */}
|
|
<div>
|
|
<label className="block text-xs text-slate-500 mb-1">Typ</label>
|
|
<select
|
|
value={filterTyp}
|
|
onChange={(e) => { setFilterTyp(e.target.value); setPage(1) }}
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="">Alle Typen</option>
|
|
{TYPEN.map(t => (
|
|
<option key={t.id} value={t.id}>{t.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Active Search Query Display */}
|
|
{searchQuery && (
|
|
<div className="flex items-center gap-2 px-4 py-2 bg-blue-50 border border-blue-200 rounded-lg">
|
|
<Search className="w-4 h-4 text-blue-600" />
|
|
<span className="text-sm text-blue-700">
|
|
Suche: <strong>{searchQuery}</strong>
|
|
</span>
|
|
<button
|
|
onClick={handleClearSearch}
|
|
className="ml-auto text-blue-600 hover:text-blue-800"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Document Display */}
|
|
<div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-16">
|
|
<Loader2 className="w-8 h-8 text-blue-600 animate-spin" />
|
|
</div>
|
|
) : error ? (
|
|
<div className="text-center py-16 text-red-600">
|
|
<p>{error}</p>
|
|
<button
|
|
onClick={() => fetchDocuments()}
|
|
className="mt-2 text-sm text-blue-600 hover:underline"
|
|
>
|
|
Erneut versuchen
|
|
</button>
|
|
</div>
|
|
) : documents.length === 0 ? (
|
|
<div className="text-center py-16 text-slate-500">
|
|
<FileText className="w-12 h-12 mx-auto mb-3 opacity-50" />
|
|
<p>Keine Dokumente gefunden</p>
|
|
{hasActiveFilters && (
|
|
<button
|
|
onClick={clearFilters}
|
|
className="mt-2 text-sm text-blue-600 hover:underline"
|
|
>
|
|
Filter zuruecksetzen
|
|
</button>
|
|
)}
|
|
</div>
|
|
) : viewMode === 'grid' ? (
|
|
/* Grid View */
|
|
<div className="p-4">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
{documents.map((doc) => (
|
|
<DokumentCard
|
|
key={doc.id}
|
|
document={doc}
|
|
onPreview={setSelectedDocument}
|
|
onDownload={handleDownload}
|
|
onAddToKlausur={handleAddToKlausur}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
/* List View */
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-slate-50 border-b border-slate-200">
|
|
<tr>
|
|
<th className="text-left px-4 py-3 font-medium text-slate-600">Dokument</th>
|
|
<th className="text-left px-4 py-3 font-medium text-slate-600">Fach</th>
|
|
<th className="text-center px-4 py-3 font-medium text-slate-600">Jahr</th>
|
|
<th className="text-center px-4 py-3 font-medium text-slate-600">Niveau</th>
|
|
<th className="text-center px-4 py-3 font-medium text-slate-600">Typ</th>
|
|
<th className="text-right px-4 py-3 font-medium text-slate-600">Groesse</th>
|
|
<th className="text-center px-4 py-3 font-medium text-slate-600">Status</th>
|
|
<th className="text-center px-4 py-3 font-medium text-slate-600">Aktion</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{documents.map((doc) => {
|
|
const fachLabel = FAECHER.find(f => f.id === doc.fach)?.label || doc.fach
|
|
return (
|
|
<tr
|
|
key={doc.id}
|
|
className="border-b border-slate-100 hover:bg-slate-50 cursor-pointer"
|
|
onClick={() => setSelectedDocument(doc)}
|
|
>
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center gap-2">
|
|
<FileText className="w-4 h-4 text-red-500" />
|
|
<span className="font-medium text-slate-900 truncate max-w-[200px]" title={doc.dateiname}>
|
|
{doc.dateiname}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<span className="capitalize">{fachLabel}</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-center">{doc.jahr}</td>
|
|
<td className="px-4 py-3 text-center">
|
|
<span className={`px-2 py-0.5 rounded-full text-xs ${
|
|
doc.niveau === 'eA'
|
|
? 'bg-blue-100 text-blue-700'
|
|
: 'bg-slate-100 text-slate-700'
|
|
}`}>
|
|
{doc.niveau}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-center">
|
|
<span className={`px-2 py-0.5 rounded-full text-xs ${
|
|
doc.typ === 'erwartungshorizont'
|
|
? 'bg-orange-100 text-orange-700'
|
|
: 'bg-purple-100 text-purple-700'
|
|
}`}>
|
|
{doc.typ === 'erwartungshorizont' ? 'EWH' : 'Aufgabe'}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-right text-slate-500">
|
|
{formatFileSize(doc.file_size)}
|
|
</td>
|
|
<td className="px-4 py-3 text-center">
|
|
<span className={`px-2 py-0.5 rounded-full text-xs ${
|
|
doc.status === 'indexed'
|
|
? 'bg-green-100 text-green-700'
|
|
: doc.status === 'error'
|
|
? 'bg-red-100 text-red-700'
|
|
: 'bg-yellow-100 text-yellow-700'
|
|
}`}>
|
|
{doc.status === 'indexed' ? 'Indexiert' : doc.status === 'error' ? 'Fehler' : 'Ausstehend'}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-center">
|
|
<div className="flex items-center justify-center gap-1" onClick={(e) => e.stopPropagation()}>
|
|
<button
|
|
onClick={() => setSelectedDocument(doc)}
|
|
className="p-1.5 text-blue-600 hover:bg-blue-50 rounded"
|
|
title="Vorschau"
|
|
>
|
|
<Eye className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => handleDownload(doc)}
|
|
className="p-1.5 text-slate-600 hover:bg-slate-100 rounded"
|
|
title="Download"
|
|
>
|
|
<Download className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
|
|
{/* Pagination */}
|
|
{documents.length > 0 && (
|
|
<div className="flex items-center justify-between px-4 py-3 border-t border-slate-200 bg-slate-50">
|
|
<div className="text-sm text-slate-500">
|
|
Zeige {(page - 1) * limit + 1}-{Math.min(page * limit, total)} von {total} Dokumenten
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => setPage(p => Math.max(1, p - 1))}
|
|
disabled={page === 1}
|
|
className="p-2 rounded-lg hover:bg-slate-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<ChevronLeft className="w-4 h-4" />
|
|
</button>
|
|
<span className="text-sm text-slate-600">
|
|
Seite {page} von {totalPages}
|
|
</span>
|
|
<button
|
|
onClick={() => setPage(p => Math.min(totalPages, p + 1))}
|
|
disabled={page === totalPages}
|
|
className="p-2 rounded-lg hover:bg-slate-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<ChevronRight className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Fullscreen Viewer Modal */}
|
|
<FullscreenViewer
|
|
document={selectedDocument}
|
|
onClose={() => setSelectedDocument(null)}
|
|
onAddToKlausur={handleAddToKlausur}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|