b6983ab1dc
backend-lehrer (5 files): - alerts_agent/db/repository.py (992 → 5), abitur_docs_api.py (956 → 3) - teacher_dashboard_api.py (951 → 3), services/pdf_service.py (916 → 3) - mail/mail_db.py (987 → 6) klausur-service (5 files): - legal_templates_ingestion.py (942 → 3), ocr_pipeline_postprocess.py (929 → 4) - ocr_pipeline_words.py (876 → 3), ocr_pipeline_ocr_merge.py (616 → 2) - KorrekturPage.tsx (956 → 6) website (5 pages): - mail (985 → 9), edu-search (958 → 8), mac-mini (950 → 7) - ocr-labeling (946 → 7), audit-workspace (871 → 4) studio-v2 (5 files + 1 deleted): - page.tsx (946 → 5), MessagesContext.tsx (925 → 4) - korrektur (914 → 6), worksheet-cleanup (899 → 6) - useVocabWorksheet.ts (888 → 3) - Deleted dead page-original.tsx (934 LOC) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
386 lines
17 KiB
TypeScript
386 lines
17 KiB
TypeScript
'use client'
|
||
|
||
import { useRouter } from 'next/navigation'
|
||
import { useLanguage } from '@/lib/LanguageContext'
|
||
import { useTheme } from '@/lib/ThemeContext'
|
||
import { useAlerts } from '@/lib/AlertsContext'
|
||
import { useMessages, formatMessageTime, getContactInitials } from '@/lib/MessagesContext'
|
||
import { useActivity, formatDurationCompact } from '@/lib/ActivityContext'
|
||
|
||
interface StatsItem {
|
||
labelKey: string
|
||
value: string
|
||
icon: string
|
||
color: string
|
||
}
|
||
|
||
interface RecentKlausur {
|
||
id: number
|
||
title: string
|
||
students: number
|
||
completed: number
|
||
statusKey: string
|
||
}
|
||
|
||
interface DashboardContentProps {
|
||
documents: { id: string }[]
|
||
setShowUploadModal: (show: boolean) => void
|
||
setSelectedTab: (tab: string) => void
|
||
}
|
||
|
||
export function DashboardContent({ documents, setShowUploadModal, setSelectedTab }: DashboardContentProps) {
|
||
const router = useRouter()
|
||
const { t } = useLanguage()
|
||
const { isDark } = useTheme()
|
||
const { alerts, unreadCount: alertsUnreadCount, markAsRead } = useAlerts()
|
||
const { conversations, unreadCount: messagesUnreadCount, contacts, markAsRead: markMessageAsRead } = useMessages()
|
||
const { stats: activityStats } = useActivity()
|
||
|
||
const timeSaved = formatDurationCompact(activityStats.weekSavedSeconds)
|
||
const timeSavedDisplay = activityStats.weekSavedSeconds > 0
|
||
? `${timeSaved.value}${timeSaved.unit}`
|
||
: '0min'
|
||
|
||
const stats: StatsItem[] = [
|
||
{ labelKey: 'stat_open_corrections', value: '12', icon: '📋', color: 'from-blue-400 to-blue-600' },
|
||
{ labelKey: 'stat_completed_week', value: String(activityStats.activityCount), icon: '✅', color: 'from-green-400 to-green-600' },
|
||
{ labelKey: 'stat_average', value: '2.3', icon: '📈', color: 'from-purple-400 to-purple-600' },
|
||
{ labelKey: 'stat_time_saved', value: timeSavedDisplay, icon: '⏱', color: 'from-orange-400 to-orange-600' },
|
||
]
|
||
|
||
const recentKlausuren: RecentKlausur[] = [
|
||
{ id: 1, title: 'Deutsch LK - Textanalyse', students: 24, completed: 18, statusKey: 'status_in_progress' },
|
||
{ id: 2, title: 'Deutsch GK - Erörterung', students: 28, completed: 28, statusKey: 'status_completed' },
|
||
{ id: 3, title: 'Vorabitur - Gedichtanalyse', students: 22, completed: 10, statusKey: 'status_in_progress' },
|
||
]
|
||
|
||
return (
|
||
<>
|
||
{/* Stats Kacheln */}
|
||
<div className="grid grid-cols-4 gap-6 mb-8">
|
||
{stats.map((stat, index) => (
|
||
<div
|
||
key={index}
|
||
className={`backdrop-blur-xl border rounded-3xl p-6 transition-all hover:scale-105 hover:shadow-xl cursor-pointer ${
|
||
isDark
|
||
? 'bg-white/10 border-white/20 hover:bg-white/15'
|
||
: 'bg-white/70 border-black/10 hover:bg-white/90 shadow-lg'
|
||
}`}
|
||
>
|
||
<div className="flex items-center justify-between mb-4">
|
||
<div className={`w-12 h-12 bg-gradient-to-br ${stat.color} rounded-2xl flex items-center justify-center text-2xl shadow-lg`}>
|
||
{stat.icon}
|
||
</div>
|
||
<svg className={`w-5 h-5 ${isDark ? 'text-white/40' : 'text-slate-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</div>
|
||
<p className={`text-sm mb-1 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>{t(stat.labelKey)}</p>
|
||
<p className={`text-3xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>{stat.value}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Dashboard Grid */}
|
||
<div className="grid grid-cols-3 gap-6">
|
||
{/* Aktuelle Klausuren Kachel */}
|
||
<div className={`col-span-2 backdrop-blur-xl border rounded-3xl p-6 ${
|
||
isDark
|
||
? 'bg-white/10 border-white/20'
|
||
: 'bg-white/70 border-black/10 shadow-lg'
|
||
}`}>
|
||
<div className="flex items-center justify-between mb-6">
|
||
<h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>{t('recent_klausuren')}</h2>
|
||
<button className={`text-sm transition-colors ${
|
||
isDark ? 'text-white/60 hover:text-white' : 'text-slate-500 hover:text-slate-900'
|
||
}`}>
|
||
{t('show_all')} →
|
||
</button>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
{recentKlausuren.map((klausur) => (
|
||
<div
|
||
key={klausur.id}
|
||
className={`flex items-center gap-4 p-4 rounded-2xl transition-all cursor-pointer group ${
|
||
isDark
|
||
? 'bg-white/5 hover:bg-white/10'
|
||
: 'bg-slate-50 hover:bg-slate-100'
|
||
}`}
|
||
>
|
||
<div className="w-14 h-14 bg-gradient-to-br from-blue-400 to-purple-500 rounded-2xl flex items-center justify-center">
|
||
<span className="text-2xl">📝</span>
|
||
</div>
|
||
<div className="flex-1">
|
||
<h3 className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{klausur.title}</h3>
|
||
<p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>{klausur.students} {t('students')}</p>
|
||
</div>
|
||
<div className="text-right">
|
||
<span className={`px-3 py-1 rounded-full text-xs font-medium ${
|
||
klausur.statusKey === 'status_completed'
|
||
? isDark ? 'bg-green-500/20 text-green-300' : 'bg-green-100 text-green-700'
|
||
: isDark ? 'bg-yellow-500/20 text-yellow-300' : 'bg-yellow-100 text-yellow-700'
|
||
}`}>
|
||
{t(klausur.statusKey)}
|
||
</span>
|
||
<div className="flex items-center gap-2 mt-2">
|
||
<div className={`w-24 h-1.5 rounded-full overflow-hidden ${isDark ? 'bg-white/10' : 'bg-slate-200'}`}>
|
||
<div
|
||
className="h-full bg-gradient-to-r from-cyan-400 to-blue-500 rounded-full"
|
||
style={{ width: `${(klausur.completed / klausur.students) * 100}%` }}
|
||
/>
|
||
</div>
|
||
<span className={`text-xs ${isDark ? 'text-white/50' : 'text-slate-500'}`}>{klausur.completed}/{klausur.students}</span>
|
||
</div>
|
||
</div>
|
||
<svg className={`w-5 h-5 transition-colors ${
|
||
isDark ? 'text-white/30 group-hover:text-white/60' : 'text-slate-300 group-hover:text-slate-600'
|
||
}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Schnellaktionen Kachel */}
|
||
<div className={`backdrop-blur-xl border rounded-3xl p-6 ${
|
||
isDark
|
||
? 'bg-white/10 border-white/20'
|
||
: 'bg-white/70 border-black/10 shadow-lg'
|
||
}`}>
|
||
<h2 className={`text-xl font-semibold mb-6 ${isDark ? 'text-white' : 'text-slate-900'}`}>{t('quick_actions')}</h2>
|
||
|
||
<div className="space-y-3">
|
||
<button className="w-full flex items-center gap-4 p-4 bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl text-white hover:shadow-xl hover:shadow-purple-500/30 transition-all hover:scale-105">
|
||
<span className="text-2xl">➕</span>
|
||
<span className="font-medium">{t('create_klausur')}</span>
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => setShowUploadModal(true)}
|
||
className={`w-full flex items-center gap-4 p-4 rounded-2xl transition-all ${
|
||
isDark
|
||
? 'bg-white/10 text-white hover:bg-white/20'
|
||
: 'bg-slate-100 text-slate-800 hover:bg-slate-200'
|
||
}`}>
|
||
<span className="text-2xl">📤</span>
|
||
<span className="font-medium">{t('upload_work')}</span>
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => setSelectedTab('dokumente')}
|
||
className={`w-full flex items-center justify-between p-4 rounded-2xl transition-all ${
|
||
isDark
|
||
? 'bg-white/10 text-white hover:bg-white/20'
|
||
: 'bg-slate-100 text-slate-800 hover:bg-slate-200'
|
||
}`}>
|
||
<div className="flex items-center gap-4">
|
||
<span className="text-2xl">📁</span>
|
||
<span className="font-medium">{t('nav_dokumente')}</span>
|
||
</div>
|
||
{documents.length > 0 && (
|
||
<span className={`px-2 py-1 text-xs font-medium rounded-full ${
|
||
isDark ? 'bg-white/20' : 'bg-slate-200'
|
||
}`}>
|
||
{documents.length}
|
||
</span>
|
||
)}
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => router.push('/worksheet-editor')}
|
||
className={`w-full flex items-center gap-4 p-4 rounded-2xl transition-all ${
|
||
isDark
|
||
? 'bg-gradient-to-r from-purple-500/20 to-pink-500/20 text-white hover:from-purple-500/30 hover:to-pink-500/30 border border-purple-500/30'
|
||
: 'bg-gradient-to-r from-purple-50 to-pink-50 text-slate-800 hover:from-purple-100 hover:to-pink-100 border border-purple-200'
|
||
}`}>
|
||
<span className="text-2xl">🎨</span>
|
||
<span className="font-medium">{t('nav_worksheet_editor')}</span>
|
||
</button>
|
||
|
||
<button className={`w-full flex items-center gap-4 p-4 rounded-2xl transition-all ${
|
||
isDark
|
||
? 'bg-white/10 text-white hover:bg-white/20'
|
||
: 'bg-slate-100 text-slate-800 hover:bg-slate-200'
|
||
}`}>
|
||
<span className="text-2xl">✨</span>
|
||
<span className="font-medium">{t('magic_help')}</span>
|
||
</button>
|
||
|
||
<button className={`w-full flex items-center gap-4 p-4 rounded-2xl transition-all ${
|
||
isDark
|
||
? 'bg-white/10 text-white hover:bg-white/20'
|
||
: 'bg-slate-100 text-slate-800 hover:bg-slate-200'
|
||
}`}>
|
||
<span className="text-2xl">📊</span>
|
||
<span className="font-medium">{t('fairness_check')}</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* AI Insight mini */}
|
||
<div className={`mt-6 p-4 rounded-2xl border ${
|
||
isDark
|
||
? 'bg-gradient-to-r from-pink-500/20 to-purple-500/20 border-pink-500/30'
|
||
: 'bg-gradient-to-r from-pink-50 to-purple-50 border-pink-200'
|
||
}`}>
|
||
<div className="flex items-center gap-3 mb-2">
|
||
<span className="text-lg">🤖</span>
|
||
<span className={`text-sm font-medium ${isDark ? 'text-white/80' : 'text-slate-700'}`}>{t('ai_tip')}</span>
|
||
</div>
|
||
<p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
|
||
{t('ai_tip_text')}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Alerts Kachel */}
|
||
<div className={`mt-6 backdrop-blur-xl border rounded-2xl p-4 ${
|
||
isDark
|
||
? 'bg-gradient-to-r from-amber-500/10 to-orange-500/10 border-amber-500/30'
|
||
: 'bg-gradient-to-r from-amber-50 to-orange-50 border-amber-200'
|
||
}`}>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h3 className={`font-semibold flex items-center gap-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
<span>🔔</span> Aktuelle Alerts
|
||
</h3>
|
||
{alertsUnreadCount > 0 && (
|
||
<span className="text-xs px-2 py-1 rounded-full bg-amber-500/20 text-amber-500 font-medium">
|
||
{alertsUnreadCount} neu
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
{alerts.slice(0, 3).map(alert => (
|
||
<button
|
||
key={alert.id}
|
||
onClick={() => {
|
||
markAsRead(alert.id)
|
||
router.push('/alerts')
|
||
}}
|
||
className={`w-full text-left p-2 rounded-lg transition-all text-sm ${
|
||
isDark
|
||
? `hover:bg-white/10 ${!alert.isRead ? 'bg-white/5' : ''}`
|
||
: `hover:bg-white ${!alert.isRead ? 'bg-white/50' : ''}`
|
||
}`}
|
||
>
|
||
<div className="flex items-start gap-2">
|
||
{!alert.isRead && (
|
||
<span className="w-1.5 h-1.5 rounded-full bg-amber-500 mt-1.5 flex-shrink-0" />
|
||
)}
|
||
<p className={`truncate ${isDark ? 'text-white/80' : 'text-slate-700'}`}>
|
||
{alert.title}
|
||
</p>
|
||
</div>
|
||
</button>
|
||
))}
|
||
{alerts.length === 0 && (
|
||
<p className={`text-sm ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
|
||
Keine Alerts vorhanden
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => router.push('/alerts')}
|
||
className={`w-full mt-3 text-sm font-medium ${
|
||
isDark ? 'text-amber-400 hover:text-amber-300' : 'text-amber-600 hover:text-amber-700'
|
||
}`}
|
||
>
|
||
Alle Alerts anzeigen →
|
||
</button>
|
||
</div>
|
||
|
||
{/* Nachrichten Kachel */}
|
||
<div className={`mt-6 backdrop-blur-xl border rounded-2xl p-4 ${
|
||
isDark
|
||
? 'bg-gradient-to-r from-green-500/10 to-emerald-500/10 border-green-500/30'
|
||
: 'bg-gradient-to-r from-green-50 to-emerald-50 border-green-200'
|
||
}`}>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h3 className={`font-semibold flex items-center gap-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
<span>💬</span> {t('nav_messages')}
|
||
</h3>
|
||
{messagesUnreadCount > 0 && (
|
||
<span className="text-xs px-2 py-1 rounded-full bg-green-500/20 text-green-500 font-medium">
|
||
{messagesUnreadCount} neu
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
{conversations.slice(0, 3).map(conv => {
|
||
const contact = contacts.find(c => conv.participant_ids.includes(c.id))
|
||
return (
|
||
<button
|
||
key={conv.id}
|
||
onClick={() => {
|
||
if (conv.unread_count > 0) {
|
||
markMessageAsRead(conv.id)
|
||
}
|
||
router.push('/messages')
|
||
}}
|
||
className={`w-full text-left p-2 rounded-lg transition-all text-sm ${
|
||
isDark
|
||
? `hover:bg-white/10 ${conv.unread_count > 0 ? 'bg-white/5' : ''}`
|
||
: `hover:bg-white ${conv.unread_count > 0 ? 'bg-white/50' : ''}`
|
||
}`}
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-medium flex-shrink-0 ${
|
||
contact?.online
|
||
? isDark
|
||
? 'bg-green-500/30 text-green-300'
|
||
: 'bg-green-200 text-green-700'
|
||
: isDark
|
||
? 'bg-slate-600 text-slate-300'
|
||
: 'bg-slate-200 text-slate-600'
|
||
}`}>
|
||
{conv.title ? getContactInitials(conv.title) : '?'}
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2">
|
||
{conv.unread_count > 0 && (
|
||
<span className="w-1.5 h-1.5 rounded-full bg-green-500 flex-shrink-0" />
|
||
)}
|
||
<span className={`font-medium truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
{conv.title || 'Unbenannt'}
|
||
</span>
|
||
</div>
|
||
{conv.last_message && (
|
||
<p className={`text-xs truncate ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
|
||
{conv.last_message}
|
||
</p>
|
||
)}
|
||
</div>
|
||
{conv.last_message_time && (
|
||
<span className={`text-xs flex-shrink-0 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
|
||
{formatMessageTime(conv.last_message_time)}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</button>
|
||
)
|
||
})}
|
||
{conversations.length === 0 && (
|
||
<p className={`text-sm ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
|
||
Keine Nachrichten vorhanden
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => router.push('/messages')}
|
||
className={`w-full mt-3 text-sm font-medium ${
|
||
isDark ? 'text-green-400 hover:text-green-300' : 'text-green-600 hover:text-green-700'
|
||
}`}
|
||
>
|
||
Alle Nachrichten anzeigen →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|