[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
@@ -2,9 +2,8 @@
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useTheme } from '@/lib/ThemeContext'
|
||||
import { useAlerts, lehrerThemen, Topic, AlertImportance } from '@/lib/AlertsContext'
|
||||
import { InfoBox, TipBox, StepBox } from './InfoBox'
|
||||
import { BPIcon } from './Logo'
|
||||
import { useAlerts, lehrerThemen, AlertImportance } from '@/lib/AlertsContext'
|
||||
import { Step1TopicSelection, Step2Instructions, Step3Forwarding, Step4Settings } from './alerts-wizard/AlertsWizardSteps'
|
||||
|
||||
interface AlertsWizardProps {
|
||||
onComplete: () => void
|
||||
@@ -13,7 +12,7 @@ interface AlertsWizardProps {
|
||||
|
||||
export function AlertsWizard({ onComplete, onSkip }: AlertsWizardProps) {
|
||||
const { isDark } = useTheme()
|
||||
const { addTopic, updateSettings, settings } = useAlerts()
|
||||
const { addTopic, updateSettings } = useAlerts()
|
||||
|
||||
const [step, setStep] = useState(1)
|
||||
const [selectedTopics, setSelectedTopics] = useState<string[]>([])
|
||||
@@ -24,528 +23,78 @@ export function AlertsWizard({ onComplete, onSkip }: AlertsWizardProps) {
|
||||
|
||||
const totalSteps = 4
|
||||
|
||||
const handleNext = () => {
|
||||
if (step < totalSteps) {
|
||||
setStep(step + 1)
|
||||
} else {
|
||||
// Wizard abschliessen
|
||||
completeWizard()
|
||||
}
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
if (step > 1) {
|
||||
setStep(step - 1)
|
||||
}
|
||||
}
|
||||
const handleNext = () => { if (step < totalSteps) setStep(step + 1); else completeWizard() }
|
||||
const handleBack = () => { if (step > 1) setStep(step - 1) }
|
||||
|
||||
const completeWizard = () => {
|
||||
// Ausgewaehlte vordefinierte Topics hinzufuegen
|
||||
selectedTopics.forEach(topicId => {
|
||||
const topic = lehrerThemen.find(t => t.name === topicId)
|
||||
if (topic) {
|
||||
addTopic({
|
||||
id: `topic-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
||||
name: topic.name,
|
||||
keywords: topic.keywords,
|
||||
icon: topic.icon,
|
||||
isActive: true,
|
||||
rssFeedUrl: rssFeedUrl || undefined
|
||||
})
|
||||
addTopic({ id: `topic-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, name: topic.name, keywords: topic.keywords, icon: topic.icon, isActive: true, rssFeedUrl: rssFeedUrl || undefined })
|
||||
}
|
||||
})
|
||||
|
||||
// Custom Topic hinzufuegen falls vorhanden
|
||||
if (customTopic.name.trim()) {
|
||||
addTopic({
|
||||
id: `topic-${Date.now()}-custom`,
|
||||
name: customTopic.name,
|
||||
keywords: customTopic.keywords.split(',').map(k => k.trim()).filter(k => k),
|
||||
icon: '📌',
|
||||
isActive: true,
|
||||
rssFeedUrl: rssFeedUrl || undefined
|
||||
})
|
||||
addTopic({ id: `topic-${Date.now()}-custom`, name: customTopic.name, keywords: customTopic.keywords.split(',').map(k => k.trim()).filter(k => k), icon: '📌', isActive: true, rssFeedUrl: rssFeedUrl || undefined })
|
||||
}
|
||||
|
||||
// Settings speichern
|
||||
updateSettings({
|
||||
notificationFrequency,
|
||||
minImportance,
|
||||
wizardCompleted: true
|
||||
})
|
||||
|
||||
updateSettings({ notificationFrequency, minImportance, wizardCompleted: true })
|
||||
onComplete()
|
||||
}
|
||||
|
||||
const toggleTopic = (topicName: string) => {
|
||||
setSelectedTopics(prev =>
|
||||
prev.includes(topicName)
|
||||
? prev.filter(t => t !== topicName)
|
||||
: [...prev, topicName]
|
||||
)
|
||||
setSelectedTopics(prev => prev.includes(topicName) ? prev.filter(t => t !== topicName) : [...prev, topicName])
|
||||
}
|
||||
|
||||
const canProceed = () => {
|
||||
switch (step) {
|
||||
case 1:
|
||||
return selectedTopics.length > 0 || customTopic.name.trim().length > 0
|
||||
case 2:
|
||||
return true // Info-Schritt, immer weiter
|
||||
case 3:
|
||||
return true // RSS optional
|
||||
case 4:
|
||||
return true // Einstellungen immer gueltig
|
||||
default:
|
||||
return false
|
||||
}
|
||||
if (step === 1) return selectedTopics.length > 0 || customTopic.name.trim().length > 0
|
||||
return true
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`min-h-screen flex flex-col ${
|
||||
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={`min-h-screen flex flex-col ${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'}`}>
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div className={`absolute -top-40 -right-40 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-pulse ${
|
||||
isDark ? 'bg-amber-500 opacity-50' : 'bg-amber-300 opacity-30'
|
||||
}`} />
|
||||
<div className={`absolute -bottom-40 -left-40 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-pulse ${
|
||||
isDark ? 'bg-orange-500 opacity-50' : 'bg-orange-300 opacity-30'
|
||||
}`} style={{ animationDelay: '1s' }} />
|
||||
<div className={`absolute -top-40 -right-40 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-pulse ${isDark ? 'bg-amber-500 opacity-50' : 'bg-amber-300 opacity-30'}`} />
|
||||
<div className={`absolute -bottom-40 -left-40 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-pulse ${isDark ? 'bg-orange-500 opacity-50' : 'bg-orange-300 opacity-30'}`} style={{ animationDelay: '1s' }} />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 flex-1 flex flex-col items-center justify-center p-8">
|
||||
{/* Logo & Titel */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex items-center justify-center gap-3 mb-4">
|
||||
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-3xl shadow-lg">
|
||||
🔔
|
||||
</div>
|
||||
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-3xl shadow-lg">🔔</div>
|
||||
<div className="text-left">
|
||||
<h1 className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||||
Google Alerts einrichten
|
||||
</h1>
|
||||
<p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
|
||||
Bleiben Sie informiert ueber Bildungsthemen
|
||||
</p>
|
||||
<h1 className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>Google Alerts einrichten</h1>
|
||||
<p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Bleiben Sie informiert ueber Bildungsthemen</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="w-full max-w-2xl mb-8">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
{[1, 2, 3, 4].map((s) => (
|
||||
<div
|
||||
key={s}
|
||||
className={`w-10 h-10 rounded-full flex items-center justify-center font-medium transition-all ${
|
||||
s === step
|
||||
? 'bg-gradient-to-br from-amber-400 to-orange-500 text-white scale-110 shadow-lg'
|
||||
: s < step
|
||||
? isDark
|
||||
? 'bg-green-500/30 text-green-300'
|
||||
: 'bg-green-100 text-green-700'
|
||||
: isDark
|
||||
? 'bg-white/10 text-white/40'
|
||||
: 'bg-slate-200 text-slate-400'
|
||||
}`}
|
||||
>
|
||||
<div key={s} className={`w-10 h-10 rounded-full flex items-center justify-center font-medium transition-all ${s === step ? 'bg-gradient-to-br from-amber-400 to-orange-500 text-white scale-110 shadow-lg' : s < step ? (isDark ? 'bg-green-500/30 text-green-300' : 'bg-green-100 text-green-700') : (isDark ? 'bg-white/10 text-white/40' : 'bg-slate-200 text-slate-400')}`}>
|
||||
{s < step ? '✓' : s}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={`h-2 rounded-full overflow-hidden ${isDark ? 'bg-white/10' : 'bg-slate-200'}`}>
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-amber-400 to-orange-500 transition-all duration-500"
|
||||
style={{ width: `${((step - 1) / (totalSteps - 1)) * 100}%` }}
|
||||
/>
|
||||
<div className="h-full bg-gradient-to-r from-amber-400 to-orange-500 transition-all duration-500" style={{ width: `${((step - 1) / (totalSteps - 1)) * 100}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Card */}
|
||||
<div className={`w-full max-w-2xl backdrop-blur-xl border rounded-3xl p-8 ${
|
||||
isDark
|
||||
? 'bg-white/10 border-white/20'
|
||||
: 'bg-white/80 border-black/10 shadow-xl'
|
||||
}`}>
|
||||
{/* Step 1: Themen waehlen */}
|
||||
{step === 1 && (
|
||||
<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>
|
||||
|
||||
{/* Vordefinierte Themen */}
|
||||
<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={() => toggleTopic(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>
|
||||
|
||||
{/* Custom Topic */}
|
||||
<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) => setCustomTopic({ ...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) => setCustomTopic({ ...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 Anleitung */}
|
||||
{step === 2 && (
|
||||
<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. Die Alerts werden an Ihre E-Mail-Adresse gesendet.
|
||||
</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. So verarbeiten wir Ihre Alerts
|
||||
automatisch.
|
||||
</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 - gefiltert, priorisiert und zusammengefasst.
|
||||
</p>
|
||||
</TipBox>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 3: E-Mail Weiterleitung einrichten */}
|
||||
{step === 3 && (
|
||||
<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">
|
||||
{/* Empfohlene Methode: E-Mail Weiterleitung */}
|
||||
<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>
|
||||
|
||||
{/* Alternative: RSS (mit Warnung) */}
|
||||
<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 Sie RSS noch sehen,
|
||||
koennen Sie die Feed-URL hier eingeben:
|
||||
</p>
|
||||
<input
|
||||
type="url"
|
||||
placeholder="https://www.google.de/alerts/feeds/... (falls verfuegbar)"
|
||||
value={rssFeedUrl}
|
||||
onChange={(e) => setRssFeedUrl(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'
|
||||
}`}
|
||||
/>
|
||||
<p className={`text-xs mt-2 ${isDark ? 'text-amber-400/70' : 'text-amber-600'}`}>
|
||||
⚠️ Die meisten Nutzer sehen keine RSS-Option mehr in Google Alerts.
|
||||
Verwenden Sie in diesem Fall die E-Mail-Weiterleitung.
|
||||
</p>
|
||||
</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.
|
||||
Die Demo-Alerts werden weiterhin angezeigt.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 4: Benachrichtigungs-Einstellungen */}
|
||||
{step === 4 && (
|
||||
<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">
|
||||
{/* Frequenz */}
|
||||
<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' },
|
||||
].map((freq) => (
|
||||
<button
|
||||
key={freq.id}
|
||||
onClick={() => setNotificationFrequency(freq.id as any)}
|
||||
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>
|
||||
|
||||
{/* Mindest-Wichtigkeit */}
|
||||
<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', color: 'red' },
|
||||
{ id: 'DRINGEND', label: 'Dringend', color: 'orange' },
|
||||
{ id: 'WICHTIG', label: 'Wichtig', color: 'yellow' },
|
||||
{ id: 'PRUEFEN', label: 'Pruefen', color: 'blue' },
|
||||
{ id: 'INFO', label: 'Info', color: 'slate' },
|
||||
].map((imp) => (
|
||||
<button
|
||||
key={imp.id}
|
||||
onClick={() => setMinImportance(imp.id as AlertImportance)}
|
||||
className={`p-2 rounded-lg border-2 transition-all text-center text-xs ${
|
||||
minImportance === imp.id
|
||||
? `border-${imp.color}-500 bg-${imp.color}-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>
|
||||
|
||||
{/* Zusammenfassung */}
|
||||
<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>
|
||||
)}
|
||||
<div className={`w-full max-w-2xl backdrop-blur-xl border rounded-3xl p-8 ${isDark ? 'bg-white/10 border-white/20' : 'bg-white/80 border-black/10 shadow-xl'}`}>
|
||||
{step === 1 && <Step1TopicSelection selectedTopics={selectedTopics} onToggleTopic={toggleTopic} customTopic={customTopic} onCustomTopicChange={setCustomTopic} isDark={isDark} />}
|
||||
{step === 2 && <Step2Instructions selectedTopics={selectedTopics} isDark={isDark} />}
|
||||
{step === 3 && <Step3Forwarding rssFeedUrl={rssFeedUrl} onRssFeedUrlChange={setRssFeedUrl} isDark={isDark} />}
|
||||
{step === 4 && <Step4Settings notificationFrequency={notificationFrequency} onFrequencyChange={setNotificationFrequency} minImportance={minImportance} onMinImportanceChange={setMinImportance} selectedTopics={selectedTopics} customTopic={customTopic} rssFeedUrl={rssFeedUrl} isDark={isDark} />}
|
||||
</div>
|
||||
|
||||
{/* Navigation Buttons */}
|
||||
<div className="flex items-center gap-4 mt-8">
|
||||
{step > 1 && (
|
||||
<button
|
||||
onClick={handleBack}
|
||||
className={`px-6 py-3 rounded-xl font-medium transition-all ${
|
||||
isDark
|
||||
? 'bg-white/10 text-white hover:bg-white/20'
|
||||
: 'bg-slate-200 text-slate-700 hover:bg-slate-300'
|
||||
}`}
|
||||
>
|
||||
← Zurueck
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={handleNext}
|
||||
disabled={!canProceed()}
|
||||
className={`px-8 py-3 rounded-xl font-medium transition-all ${
|
||||
canProceed()
|
||||
? 'bg-gradient-to-r from-amber-400 to-orange-500 text-white hover:shadow-xl hover:shadow-orange-500/30 hover:scale-105'
|
||||
: isDark
|
||||
? 'bg-white/10 text-white/30 cursor-not-allowed'
|
||||
: 'bg-slate-200 text-slate-400 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
{step > 1 && (<button onClick={handleBack} className={`px-6 py-3 rounded-xl font-medium transition-all ${isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-200 text-slate-700 hover:bg-slate-300'}`}>← Zurueck</button>)}
|
||||
<button onClick={handleNext} disabled={!canProceed()} className={`px-8 py-3 rounded-xl font-medium transition-all ${canProceed() ? 'bg-gradient-to-r from-amber-400 to-orange-500 text-white hover:shadow-xl hover:shadow-orange-500/30 hover:scale-105' : isDark ? 'bg-white/10 text-white/30 cursor-not-allowed' : 'bg-slate-200 text-slate-400 cursor-not-allowed'}`}>
|
||||
{step === totalSteps ? 'Fertig! →' : 'Weiter →'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Skip Option */}
|
||||
{onSkip && (
|
||||
<button
|
||||
onClick={onSkip}
|
||||
className={`mt-4 text-sm ${isDark ? 'text-white/40 hover:text-white/60' : 'text-slate-400 hover:text-slate-600'}`}
|
||||
>
|
||||
Ueberspringen (spaeter einrichten)
|
||||
</button>
|
||||
)}
|
||||
{onSkip && (<button onClick={onSkip} className={`mt-4 text-sm ${isDark ? 'text-white/40 hover:text-white/60' : 'text-slate-400 hover:text-slate-600'}`}>Ueberspringen (spaeter einrichten)</button>)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -22,173 +22,7 @@ export interface OnboardingData {
|
||||
schoolType: string
|
||||
}
|
||||
|
||||
// Schulformen mit Icons und Beschreibungen
|
||||
const schulformen = [
|
||||
// Allgemeinbildende Schulen
|
||||
{
|
||||
id: 'gymnasium',
|
||||
name: 'Gymnasium',
|
||||
icon: '🎓',
|
||||
description: 'Allgemeinbildend bis Abitur',
|
||||
category: 'allgemein'
|
||||
},
|
||||
{
|
||||
id: 'gesamtschule',
|
||||
name: 'Gesamtschule',
|
||||
icon: '🏫',
|
||||
description: 'Integriert/kooperativ',
|
||||
category: 'allgemein'
|
||||
},
|
||||
{
|
||||
id: 'realschule',
|
||||
name: 'Realschule',
|
||||
icon: '📚',
|
||||
description: 'Mittlerer Abschluss',
|
||||
category: 'allgemein'
|
||||
},
|
||||
{
|
||||
id: 'hauptschule',
|
||||
name: 'Hauptschule',
|
||||
icon: '📖',
|
||||
description: 'Erster Abschluss',
|
||||
category: 'allgemein'
|
||||
},
|
||||
{
|
||||
id: 'mittelschule',
|
||||
name: 'Mittelschule',
|
||||
icon: '📝',
|
||||
description: 'Bayern/Sachsen',
|
||||
category: 'allgemein'
|
||||
},
|
||||
{
|
||||
id: 'oberschule',
|
||||
name: 'Oberschule',
|
||||
icon: '🏛️',
|
||||
description: 'Sachsen/Brandenburg',
|
||||
category: 'allgemein'
|
||||
},
|
||||
{
|
||||
id: 'stadtteilschule',
|
||||
name: 'Stadtteilschule',
|
||||
icon: '🌆',
|
||||
description: 'Hamburg',
|
||||
category: 'allgemein'
|
||||
},
|
||||
{
|
||||
id: 'gemeinschaftsschule',
|
||||
name: 'Gemeinschaftsschule',
|
||||
icon: '🤲',
|
||||
description: 'BW/SH/TH/SL/BE',
|
||||
category: 'allgemein'
|
||||
},
|
||||
// Berufliche Schulen
|
||||
{
|
||||
id: 'berufsschule',
|
||||
name: 'Berufsschule',
|
||||
icon: '🔧',
|
||||
description: 'Duale Ausbildung',
|
||||
category: 'beruflich'
|
||||
},
|
||||
{
|
||||
id: 'berufliches_gymnasium',
|
||||
name: 'Berufl. Gymnasium',
|
||||
icon: '💼',
|
||||
description: 'Fachgebundenes Abitur',
|
||||
category: 'beruflich'
|
||||
},
|
||||
{
|
||||
id: 'fachoberschule',
|
||||
name: 'Fachoberschule',
|
||||
icon: '📊',
|
||||
description: 'Fachhochschulreife',
|
||||
category: 'beruflich'
|
||||
},
|
||||
{
|
||||
id: 'berufsfachschule',
|
||||
name: 'Berufsfachschule',
|
||||
icon: '🛠️',
|
||||
description: 'Vollzeitberufliche Bildung',
|
||||
category: 'beruflich'
|
||||
},
|
||||
// Sonder- und Förderschulen
|
||||
{
|
||||
id: 'foerderschule',
|
||||
name: 'Förderschule',
|
||||
icon: '🤝',
|
||||
description: 'Sonderpädagogisch',
|
||||
category: 'foerder'
|
||||
},
|
||||
{
|
||||
id: 'foerderzentrum',
|
||||
name: 'Förderzentrum',
|
||||
icon: '💚',
|
||||
description: 'Inklusiv/integriert',
|
||||
category: 'foerder'
|
||||
},
|
||||
// Privatschulen & Besondere Formen
|
||||
{
|
||||
id: 'privatschule',
|
||||
name: 'Privatschule',
|
||||
icon: '🏰',
|
||||
description: 'Freier Träger',
|
||||
category: 'privat'
|
||||
},
|
||||
{
|
||||
id: 'internat',
|
||||
name: 'Internat',
|
||||
icon: '🛏️',
|
||||
description: 'Mit Unterbringung',
|
||||
category: 'privat'
|
||||
},
|
||||
{
|
||||
id: 'waldorfschule',
|
||||
name: 'Waldorfschule',
|
||||
icon: '🌿',
|
||||
description: 'Anthroposophisch',
|
||||
category: 'alternativ'
|
||||
},
|
||||
{
|
||||
id: 'montessori',
|
||||
name: 'Montessori-Schule',
|
||||
icon: '🧒',
|
||||
description: 'Montessori-Pädagogik',
|
||||
category: 'alternativ'
|
||||
},
|
||||
// Grundschulen
|
||||
{
|
||||
id: 'grundschule',
|
||||
name: 'Grundschule',
|
||||
icon: '🏠',
|
||||
description: 'Klasse 1-4',
|
||||
category: 'grund'
|
||||
},
|
||||
// Internationale
|
||||
{
|
||||
id: 'internationale_schule',
|
||||
name: 'Internationale Schule',
|
||||
icon: '🌍',
|
||||
description: 'IB/Cambridge',
|
||||
category: 'international'
|
||||
},
|
||||
{
|
||||
id: 'europaeische_schule',
|
||||
name: 'Europäische Schule',
|
||||
icon: '🇪🇺',
|
||||
description: 'EU-Curriculum',
|
||||
category: 'international'
|
||||
},
|
||||
]
|
||||
|
||||
// Kategorien für die Anzeige
|
||||
const schulformKategorien = [
|
||||
{ id: 'allgemein', name: 'Allgemeinbildend', icon: '📚' },
|
||||
{ id: 'beruflich', name: 'Berufsbildend', icon: '💼' },
|
||||
{ id: 'foerder', name: 'Förderschulen', icon: '💚' },
|
||||
{ id: 'privat', name: 'Privat & Internat', icon: '🏰' },
|
||||
{ id: 'alternativ', name: 'Alternative Pädagogik', icon: '🌿' },
|
||||
{ id: 'grund', name: 'Primarstufe', icon: '🏠' },
|
||||
{ id: 'international', name: 'International', icon: '🌍' },
|
||||
]
|
||||
import { schulformen, schulformKategorien } from './onboarding-wizard/schulformen'
|
||||
|
||||
export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
|
||||
const { t } = useLanguage()
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
37
studio-v2/components/onboarding-wizard/schulformen.ts
Normal file
37
studio-v2/components/onboarding-wizard/schulformen.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* Schulformen und Kategorien fuer den Onboarding-Wizard.
|
||||
*/
|
||||
|
||||
export const schulformen = [
|
||||
{ id: 'gymnasium', name: 'Gymnasium', icon: '🎓', description: 'Allgemeinbildend bis Abitur', category: 'allgemein' },
|
||||
{ id: 'gesamtschule', name: 'Gesamtschule', icon: '🏫', description: 'Integriert/kooperativ', category: 'allgemein' },
|
||||
{ id: 'realschule', name: 'Realschule', icon: '📚', description: 'Mittlerer Abschluss', category: 'allgemein' },
|
||||
{ id: 'hauptschule', name: 'Hauptschule', icon: '📖', description: 'Erster Abschluss', category: 'allgemein' },
|
||||
{ id: 'mittelschule', name: 'Mittelschule', icon: '📝', description: 'Bayern/Sachsen', category: 'allgemein' },
|
||||
{ id: 'oberschule', name: 'Oberschule', icon: '🏛️', description: 'Sachsen/Brandenburg', category: 'allgemein' },
|
||||
{ id: 'stadtteilschule', name: 'Stadtteilschule', icon: '🌆', description: 'Hamburg', category: 'allgemein' },
|
||||
{ id: 'gemeinschaftsschule', name: 'Gemeinschaftsschule', icon: '🤲', description: 'BW/SH/TH/SL/BE', category: 'allgemein' },
|
||||
{ id: 'berufsschule', name: 'Berufsschule', icon: '🔧', description: 'Duale Ausbildung', category: 'beruflich' },
|
||||
{ id: 'berufliches_gymnasium', name: 'Berufl. Gymnasium', icon: '💼', description: 'Fachgebundenes Abitur', category: 'beruflich' },
|
||||
{ id: 'fachoberschule', name: 'Fachoberschule', icon: '📊', description: 'Fachhochschulreife', category: 'beruflich' },
|
||||
{ id: 'berufsfachschule', name: 'Berufsfachschule', icon: '🛠️', description: 'Vollzeitberufliche Bildung', category: 'beruflich' },
|
||||
{ id: 'foerderschule', name: 'Foerderschule', icon: '🤝', description: 'Sonderpaedagogisch', category: 'foerder' },
|
||||
{ id: 'foerderzentrum', name: 'Foerderzentrum', icon: '💚', description: 'Inklusiv/integriert', category: 'foerder' },
|
||||
{ id: 'privatschule', name: 'Privatschule', icon: '🏰', description: 'Freier Traeger', category: 'privat' },
|
||||
{ id: 'internat', name: 'Internat', icon: '🛏️', description: 'Mit Unterbringung', category: 'privat' },
|
||||
{ id: 'waldorfschule', name: 'Waldorfschule', icon: '🌿', description: 'Anthroposophisch', category: 'alternativ' },
|
||||
{ id: 'montessori', name: 'Montessori-Schule', icon: '🧒', description: 'Montessori-Paedagogik', category: 'alternativ' },
|
||||
{ id: 'grundschule', name: 'Grundschule', icon: '🏠', description: 'Klasse 1-4', category: 'grund' },
|
||||
{ id: 'internationale_schule', name: 'Internationale Schule', icon: '🌍', description: 'IB/Cambridge', category: 'international' },
|
||||
{ id: 'europaeische_schule', name: 'Europaeische Schule', icon: '🇪🇺', description: 'EU-Curriculum', category: 'international' },
|
||||
]
|
||||
|
||||
export const schulformKategorien = [
|
||||
{ id: 'allgemein', name: 'Allgemeinbildend', icon: '📚' },
|
||||
{ id: 'beruflich', name: 'Berufsbildend', icon: '💼' },
|
||||
{ id: 'foerder', name: 'Foerderschulen', icon: '💚' },
|
||||
{ id: 'privat', name: 'Privat & Internat', icon: '🏰' },
|
||||
{ id: 'alternativ', name: 'Alternative Paedagogik', icon: '🌿' },
|
||||
{ id: 'grund', name: 'Primarstufe', icon: '🏠' },
|
||||
{ id: 'international', name: 'International', icon: '🌍' },
|
||||
]
|
||||
Reference in New Issue
Block a user