[split-required] Split 500-850 LOC files (batch 2)
backend-lehrer (10 files): - game/database.py (785 → 5), correction_api.py (683 → 4) - classroom_engine/antizipation.py (676 → 5) - llm_gateway schools/edu_search already done in prior batch klausur-service (12 files): - orientation_crop_api.py (694 → 5), pdf_export.py (677 → 4) - zeugnis_crawler.py (676 → 5), grid_editor_api.py (671 → 5) - eh_templates.py (658 → 5), mail/api.py (651 → 5) - qdrant_service.py (638 → 5), training_api.py (625 → 4) website (6 pages): - middleware (696 → 8), mail (733 → 6), consent (628 → 8) - compliance/risks (622 → 5), export (502 → 5), brandbook (629 → 7) studio-v2 (3 components): - B2BMigrationWizard (848 → 3), CleanupPanel (765 → 2) - dashboard-experimental (739 → 2) admin-lehrer (4 files): - uebersetzungen (769 → 4), manager (670 → 2) - ChunkBrowserQA (675 → 6), dsfa/page (674 → 5) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
257
website/app/mail/_components/EmailDetail.tsx
Normal file
257
website/app/mail/_components/EmailDetail.tsx
Normal file
@@ -0,0 +1,257 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import type { Email } from './types'
|
||||
import { SENDER_TYPE_LABELS, CATEGORY_LABELS } from './types'
|
||||
|
||||
interface EmailDetailProps {
|
||||
email: Email
|
||||
onAnalyze: () => void
|
||||
}
|
||||
|
||||
export default function EmailDetail({ email, onAnalyze }: EmailDetailProps) {
|
||||
const [showAIPanel, setShowAIPanel] = useState(true)
|
||||
|
||||
return (
|
||||
<div className="flex h-full">
|
||||
{/* Email Content */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="p-6 border-b border-slate-200">
|
||||
<h1 className="text-xl font-semibold text-slate-900 mb-4">
|
||||
{email.subject || '(Kein Betreff)'}
|
||||
</h1>
|
||||
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-primary-700 font-medium">
|
||||
{(email.senderName || email.senderEmail)[0].toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-slate-900">
|
||||
{email.senderName || email.senderEmail}
|
||||
</p>
|
||||
<p className="text-sm text-slate-500">{email.senderEmail}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-slate-500">
|
||||
{new Date(email.date).toLocaleDateString('de-DE', {
|
||||
weekday: 'long',
|
||||
day: '2-digit',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</p>
|
||||
<p className="text-xs text-slate-400 mt-1">An: {email.recipients.join(', ')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center gap-2 mt-4">
|
||||
<button className="px-3 py-1.5 text-sm font-medium text-primary-600 bg-primary-50 rounded-lg hover:bg-primary-100">
|
||||
Antworten
|
||||
</button>
|
||||
<button className="px-3 py-1.5 text-sm font-medium text-slate-600 bg-slate-100 rounded-lg hover:bg-slate-200">
|
||||
Weiterleiten
|
||||
</button>
|
||||
<button className="px-3 py-1.5 text-sm font-medium text-slate-600 bg-slate-100 rounded-lg hover:bg-slate-200">
|
||||
Aufgabe erstellen
|
||||
</button>
|
||||
{!email.aiAnalyzed && (
|
||||
<button
|
||||
onClick={onAnalyze}
|
||||
className="px-3 py-1.5 text-sm font-medium text-purple-600 bg-purple-50 rounded-lg hover:bg-purple-100 flex items-center gap-1"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
Mit KI analysieren
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 p-6 overflow-y-auto">
|
||||
{email.bodyHtml ? (
|
||||
<div
|
||||
className="prose prose-slate max-w-none"
|
||||
dangerouslySetInnerHTML={{ __html: email.bodyHtml }}
|
||||
/>
|
||||
) : (
|
||||
<pre className="whitespace-pre-wrap text-slate-700 font-sans">
|
||||
{email.bodyText || email.bodyPreview}
|
||||
</pre>
|
||||
)}
|
||||
|
||||
{/* Attachments */}
|
||||
{email.hasAttachments && (
|
||||
<div className="mt-6 pt-6 border-t border-slate-200">
|
||||
<h3 className="text-sm font-medium text-slate-700 mb-3">
|
||||
Anhänge ({email.attachmentCount})
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<div className="flex items-center gap-2 px-3 py-2 bg-slate-100 rounded-lg">
|
||||
<svg className="w-5 h-5 text-slate-500" 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 text-slate-700">Anhang herunterladen</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AI Panel */}
|
||||
{showAIPanel && (
|
||||
<AIPanel
|
||||
email={email}
|
||||
onAnalyze={onAnalyze}
|
||||
onClose={() => setShowAIPanel(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function AIPanel({
|
||||
email,
|
||||
onAnalyze,
|
||||
onClose,
|
||||
}: {
|
||||
email: Email
|
||||
onAnalyze: () => void
|
||||
onClose: () => void
|
||||
}) {
|
||||
return (
|
||||
<div className="w-80 border-l border-slate-200 bg-slate-50 overflow-y-auto">
|
||||
<div className="p-4 border-b border-slate-200 bg-white flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
<h2 className="font-semibold text-slate-900">KI-Analyse</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 text-slate-400 hover:text-slate-600"
|
||||
>
|
||||
<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>
|
||||
|
||||
{email.aiAnalyzed ? (
|
||||
<div className="p-4 space-y-6">
|
||||
{/* Sender Classification */}
|
||||
{email.senderType && SENDER_TYPE_LABELS[email.senderType] && (
|
||||
<div>
|
||||
<h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">
|
||||
Absender-Typ
|
||||
</h3>
|
||||
<span className={`px-3 py-1.5 rounded-lg text-sm font-medium ${SENDER_TYPE_LABELS[email.senderType].color}`}>
|
||||
{SENDER_TYPE_LABELS[email.senderType].label}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Category */}
|
||||
{email.category && (
|
||||
<div>
|
||||
<h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">
|
||||
Kategorie
|
||||
</h3>
|
||||
<span className="px-3 py-1.5 bg-slate-200 text-slate-700 rounded-lg text-sm font-medium">
|
||||
{CATEGORY_LABELS[email.category] || email.category}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Deadlines */}
|
||||
{email.deadlines && email.deadlines.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">
|
||||
Erkannte Fristen
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{email.deadlines.map((deadline, idx) => (
|
||||
<div key={idx} className="p-3 bg-white rounded-lg border border-slate-200">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<svg className="w-4 h-4 text-red-500" 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>
|
||||
<span className="font-medium text-slate-900">
|
||||
{new Date(deadline.date).toLocaleDateString('de-DE', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
})}
|
||||
</span>
|
||||
{deadline.isFirm && (
|
||||
<span className="px-1.5 py-0.5 bg-red-100 text-red-700 text-xs rounded">
|
||||
verbindlich
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-slate-600">{deadline.description}</p>
|
||||
<p className="text-xs text-slate-400 mt-1">
|
||||
Konfidenz: {Math.round(deadline.confidence * 100)}%
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div>
|
||||
<h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">
|
||||
Schnellaktionen
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
<button className="w-full p-3 bg-white rounded-lg border border-slate-200 text-left hover:bg-slate-50 transition-colors">
|
||||
<div className="flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-primary-600" 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>
|
||||
<span className="text-sm font-medium text-slate-700">Als Aufgabe speichern</span>
|
||||
</div>
|
||||
</button>
|
||||
<button className="w-full p-3 bg-white rounded-lg border border-slate-200 text-left hover:bg-slate-50 transition-colors">
|
||||
<div className="flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-slate-700">In Kalender eintragen</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-4 text-center">
|
||||
<div className="py-8">
|
||||
<svg className="w-12 h-12 text-slate-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
<p className="text-slate-500 mb-4">Diese E-Mail wurde noch nicht analysiert.</p>
|
||||
<button
|
||||
onClick={onAnalyze}
|
||||
className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
|
||||
>
|
||||
Jetzt analysieren
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user