[split-required] Split remaining 500-680 LOC files (final batch)
website (17 pages + 3 components): - multiplayer/wizard, middleware/wizard+test-wizard, communication - builds/wizard, staff-search, voice, sbom/wizard - foerderantrag, mail/tasks, tools/communication, sbom - compliance/evidence, uni-crawler, brandbook (already done) - CollectionsTab, IngestionTab, RiskHeatmap backend-lehrer (5 files): - letters_api (641 → 2), certificates_api (636 → 2) - alerts_agent/db/models (636 → 3) - llm_gateway/communication_service (614 → 2) - game/database already done in prior batch klausur-service (2 files): - hybrid_vocab_extractor (664 → 2) - klausur-service/frontend: api.ts (620 → 3), EHUploadWizard (591 → 2) voice-service (3 files): - bqas/rag_judge (618 → 3), runner (529 → 2) - enhanced_task_orchestrator (519 → 2) studio-v2 (6 files): - korrektur/[klausurId] (578 → 4), fairness (569 → 2) - AlertsWizard (552 → 2), OnboardingWizard (513 → 2) - korrektur/api.ts (506 → 3), geo-lernwelt (501 → 2) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
199
studio-v2/components/alerts-wizard/AlertsWizardSteps.tsx
Normal file
199
studio-v2/components/alerts-wizard/AlertsWizardSteps.tsx
Normal file
@@ -0,0 +1,199 @@
|
||||
'use client'
|
||||
|
||||
import { useTheme } from '@/lib/ThemeContext'
|
||||
import { lehrerThemen, AlertImportance } from '@/lib/AlertsContext'
|
||||
import { InfoBox, TipBox, StepBox } from '../InfoBox'
|
||||
|
||||
// =============================================================================
|
||||
// Step 1: Topic Selection
|
||||
// =============================================================================
|
||||
|
||||
interface Step1Props {
|
||||
selectedTopics: string[]
|
||||
onToggleTopic: (name: string) => void
|
||||
customTopic: { name: string; keywords: string }
|
||||
onCustomTopicChange: (topic: { name: string; keywords: string }) => void
|
||||
isDark: boolean
|
||||
}
|
||||
|
||||
export function Step1TopicSelection({ selectedTopics, onToggleTopic, customTopic, onCustomTopicChange, isDark }: Step1Props) {
|
||||
return (
|
||||
<div>
|
||||
<h2 className={`text-2xl font-bold mb-2 text-center ${isDark ? 'text-white' : 'text-slate-900'}`}>Welche Themen interessieren Sie?</h2>
|
||||
<p className={`mb-6 text-center ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Waehlen Sie Themen, ueber die Sie informiert werden moechten</p>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3 mb-6">
|
||||
{lehrerThemen.map((topic) => {
|
||||
const isSelected = selectedTopics.includes(topic.name)
|
||||
return (
|
||||
<button key={topic.name} onClick={() => onToggleTopic(topic.name)}
|
||||
className={`p-4 rounded-xl border-2 transition-all hover:scale-105 text-left ${isSelected ? 'border-amber-500 bg-amber-500/20 shadow-lg' : isDark ? 'border-white/10 bg-white/5 hover:bg-white/10 hover:border-white/20' : 'border-slate-200 bg-white hover:bg-slate-50 hover:border-slate-300'}`}>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">{topic.icon}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className={`font-medium truncate ${isSelected ? (isDark ? 'text-amber-300' : 'text-amber-700') : (isDark ? 'text-white' : 'text-slate-900')}`}>{topic.name}</p>
|
||||
<p className={`text-xs truncate ${isDark ? 'text-white/40' : 'text-slate-400'}`}>{topic.keywords.slice(0, 2).join(', ')}</p>
|
||||
</div>
|
||||
{isSelected && (<div className="w-6 h-6 rounded-full bg-amber-500 flex items-center justify-center"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg></div>)}
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className={`p-4 rounded-xl border ${isDark ? 'bg-white/5 border-white/10' : 'bg-slate-50 border-slate-200'}`}>
|
||||
<h4 className={`font-medium mb-3 flex items-center gap-2 ${isDark ? 'text-white' : 'text-slate-900'}`}><span>📌</span> Eigenes Thema hinzufuegen</h4>
|
||||
<div className="space-y-3">
|
||||
<input type="text" placeholder="Themenname (z.B. 'Mathematik Didaktik')" value={customTopic.name} onChange={(e) => onCustomTopicChange({ ...customTopic, name: e.target.value })} className={`w-full px-4 py-2 rounded-lg border ${isDark ? 'bg-white/10 border-white/20 text-white placeholder-white/40' : 'bg-white border-slate-200 text-slate-900 placeholder-slate-400'}`} />
|
||||
<input type="text" placeholder="Stichwoerter (kommagetrennt)" value={customTopic.keywords} onChange={(e) => onCustomTopicChange({ ...customTopic, keywords: e.target.value })} className={`w-full px-4 py-2 rounded-lg border ${isDark ? 'bg-white/10 border-white/20 text-white placeholder-white/40' : 'bg-white border-slate-200 text-slate-900 placeholder-slate-400'}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Step 2: Google Alerts Instructions
|
||||
// =============================================================================
|
||||
|
||||
export function Step2Instructions({ selectedTopics, isDark }: { selectedTopics: string[]; isDark: boolean }) {
|
||||
return (
|
||||
<div>
|
||||
<h2 className={`text-2xl font-bold mb-2 text-center ${isDark ? 'text-white' : 'text-slate-900'}`}>Google Alerts einrichten</h2>
|
||||
<p className={`mb-6 text-center ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Google sendet Alerts per E-Mail - wir verarbeiten sie fuer Sie</p>
|
||||
|
||||
<InfoBox variant="info" title="So funktioniert es" icon="💡" className="mb-6">
|
||||
<p>Google Alerts versendet Benachrichtigungen per E-Mail an Ihr Konto. Sie richten einfach eine Weiterleitung ein - wir uebernehmen die Auswertung, Filterung und Zusammenfassung.</p>
|
||||
</InfoBox>
|
||||
|
||||
<div className="space-y-4">
|
||||
<StepBox step={1} title="Google Alerts oeffnen" isActive><p className="mb-2">Besuchen Sie <a href="https://www.google.de/alerts" target="_blank" rel="noopener noreferrer" className="text-amber-500 hover:underline font-medium">google.de/alerts</a> und melden Sie sich mit Ihrem Google-Konto an.</p></StepBox>
|
||||
<StepBox step={2} title="Alerts erstellen"><p>Geben Sie Suchbegriffe ein (z.B. "{selectedTopics[0] || 'Bildungspolitik'}") und erstellen Sie Alerts.</p></StepBox>
|
||||
<StepBox step={3} title="E-Mail-Weiterleitung einrichten"><p>Im naechsten Schritt richten Sie eine automatische Weiterleitung der Google Alert E-Mails an uns ein.</p></StepBox>
|
||||
</div>
|
||||
|
||||
<TipBox title="Tipp: Mehrere Alerts kombinieren" icon="💡" className="mt-6"><p>Sie koennen beliebig viele Google Alerts erstellen. Alle werden per E-Mail an Sie gesendet und durch die Weiterleitung automatisch verarbeitet.</p></TipBox>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Step 3: Email Forwarding
|
||||
// =============================================================================
|
||||
|
||||
export function Step3Forwarding({ rssFeedUrl, onRssFeedUrlChange, isDark }: { rssFeedUrl: string; onRssFeedUrlChange: (url: string) => void; isDark: boolean }) {
|
||||
return (
|
||||
<div>
|
||||
<h2 className={`text-2xl font-bold mb-2 text-center ${isDark ? 'text-white' : 'text-slate-900'}`}>E-Mail Weiterleitung einrichten</h2>
|
||||
<p className={`mb-6 text-center ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Leiten Sie Ihre Google Alert E-Mails automatisch an uns weiter</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className={`p-5 rounded-xl border-2 ${isDark ? 'border-green-500/50 bg-green-500/10' : 'border-green-500 bg-green-50'}`}>
|
||||
<div className="flex items-start gap-3 mb-4">
|
||||
<span className="text-2xl">📧</span>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h4 className={`font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>E-Mail Weiterleitung</h4>
|
||||
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-green-500/20 text-green-600">Empfohlen</span>
|
||||
</div>
|
||||
<p className={`text-sm ${isDark ? 'text-white/70' : 'text-slate-600'}`}>Richten Sie in Gmail einen Filter ein, der Google Alert E-Mails automatisch weiterleitet.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`p-3 rounded-lg ${isDark ? 'bg-white/10' : 'bg-white'}`}>
|
||||
<p className={`text-sm font-medium mb-2 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>Ihre Weiterleitungsadresse:</p>
|
||||
<div className="flex gap-2">
|
||||
<code className={`flex-1 px-3 py-2 rounded-lg text-sm font-mono ${isDark ? 'bg-white/10 text-amber-300' : 'bg-slate-100 text-amber-600'}`}>alerts@breakpilot.de</code>
|
||||
<button onClick={() => navigator.clipboard.writeText('alerts@breakpilot.de')} className="px-3 py-2 rounded-lg bg-amber-500 text-white text-sm hover:bg-amber-600 transition-all">Kopieren</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 space-y-2">
|
||||
<p className={`text-sm font-medium ${isDark ? 'text-white/80' : 'text-slate-700'}`}>So richten Sie die Weiterleitung in Gmail ein:</p>
|
||||
<ol className={`text-sm space-y-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
|
||||
<li>1. Oeffnen Sie Gmail → Einstellungen → Filter</li>
|
||||
<li>2. Neuer Filter: Von "googlealerts-noreply@google.com"</li>
|
||||
<li>3. Aktion: Weiterleiten an "alerts@breakpilot.de"</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`p-4 rounded-xl border ${isDark ? 'border-white/10 bg-white/5' : 'border-slate-200 bg-slate-50'}`}>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-xl">📡</span>
|
||||
<div className="flex-1">
|
||||
<h4 className={`font-medium mb-1 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>Alternativ: RSS-Feed (eingeschraenkt verfuegbar)</h4>
|
||||
<p className={`text-sm mb-3 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Google hat die RSS-Option fuer viele Konten entfernt. Falls verfuegbar:</p>
|
||||
<input type="url" placeholder="https://www.google.de/alerts/feeds/... (falls verfuegbar)" value={rssFeedUrl} onChange={(e) => onRssFeedUrlChange(e.target.value)} className={`w-full px-4 py-2 rounded-lg border text-sm ${isDark ? 'bg-white/10 border-white/20 text-white placeholder-white/30' : 'bg-white border-slate-200 text-slate-900 placeholder-slate-400'}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`p-4 rounded-xl ${isDark ? 'bg-white/5' : 'bg-slate-50'}`}>
|
||||
<p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Sie koennen diesen Schritt auch ueberspringen und die Weiterleitung spaeter einrichten.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Step 4: Notification Settings
|
||||
// =============================================================================
|
||||
|
||||
interface Step4Props {
|
||||
notificationFrequency: 'realtime' | 'hourly' | 'daily'
|
||||
onFrequencyChange: (freq: 'realtime' | 'hourly' | 'daily') => void
|
||||
minImportance: AlertImportance
|
||||
onMinImportanceChange: (imp: AlertImportance) => void
|
||||
selectedTopics: string[]
|
||||
customTopic: { name: string; keywords: string }
|
||||
rssFeedUrl: string
|
||||
isDark: boolean
|
||||
}
|
||||
|
||||
export function Step4Settings({ notificationFrequency, onFrequencyChange, minImportance, onMinImportanceChange, selectedTopics, customTopic, rssFeedUrl, isDark }: Step4Props) {
|
||||
return (
|
||||
<div>
|
||||
<h2 className={`text-2xl font-bold mb-2 text-center ${isDark ? 'text-white' : 'text-slate-900'}`}>Benachrichtigungen einstellen</h2>
|
||||
<p className={`mb-6 text-center ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Wie moechten Sie informiert werden?</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className={`block text-sm font-medium mb-3 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>Wie oft moechten Sie Alerts erhalten?</label>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{([{ id: 'realtime', label: 'Sofort', icon: '⚡', desc: 'Bei jedem neuen Alert' }, { id: 'hourly', label: 'Stuendlich', icon: '🕐', desc: 'Zusammenfassung pro Stunde' }, { id: 'daily', label: 'Taeglich', icon: '📅', desc: 'Einmal am Tag' }] as const).map((freq) => (
|
||||
<button key={freq.id} onClick={() => onFrequencyChange(freq.id)}
|
||||
className={`p-4 rounded-xl border-2 transition-all text-center ${notificationFrequency === freq.id ? 'border-amber-500 bg-amber-500/20' : isDark ? 'border-white/10 bg-white/5 hover:bg-white/10' : 'border-slate-200 bg-white hover:bg-slate-50'}`}>
|
||||
<span className="text-2xl block mb-1">{freq.icon}</span>
|
||||
<p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{freq.label}</p>
|
||||
<p className={`text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>{freq.desc}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className={`block text-sm font-medium mb-3 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>Mindest-Wichtigkeit fuer Benachrichtigungen</label>
|
||||
<div className="grid grid-cols-5 gap-2">
|
||||
{([{ id: 'KRITISCH', label: 'Kritisch' }, { id: 'DRINGEND', label: 'Dringend' }, { id: 'WICHTIG', label: 'Wichtig' }, { id: 'PRUEFEN', label: 'Pruefen' }, { id: 'INFO', label: 'Info' }] as const).map((imp) => (
|
||||
<button key={imp.id} onClick={() => onMinImportanceChange(imp.id as AlertImportance)}
|
||||
className={`p-2 rounded-lg border-2 transition-all text-center text-xs ${minImportance === imp.id ? 'border-amber-500 bg-amber-500/20' : isDark ? 'border-white/10 bg-white/5 hover:bg-white/10' : 'border-slate-200 bg-white hover:bg-slate-50'}`}>
|
||||
<p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{imp.label}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className={`text-xs mt-2 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Sie erhalten nur Benachrichtigungen fuer Alerts mit dieser Wichtigkeit oder hoeher.</p>
|
||||
</div>
|
||||
|
||||
<div className={`p-4 rounded-xl ${isDark ? 'bg-white/5' : 'bg-slate-50'}`}>
|
||||
<h4 className={`font-medium mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>Ihre Einstellungen</h4>
|
||||
<ul className={`text-sm space-y-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
|
||||
<li>- {selectedTopics.length + (customTopic.name ? 1 : 0)} Themen ausgewaehlt</li>
|
||||
<li>- Benachrichtigungen: {notificationFrequency === 'realtime' ? 'Sofort' : notificationFrequency === 'hourly' ? 'Stuendlich' : 'Taeglich'}</li>
|
||||
<li>- Mindest-Wichtigkeit: {minImportance}</li>
|
||||
{rssFeedUrl && <li>- RSS-Feed verbunden</li>}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user