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>
913 lines
48 KiB
TypeScript
913 lines
48 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* Alerts Monitoring Admin Page (migrated from website/admin/alerts)
|
|
*
|
|
* Google Alerts & Feed-Ueberwachung Dashboard
|
|
* Provides inbox management, topic configuration, rule builder, and relevance profiles
|
|
*/
|
|
|
|
import { useEffect, useState, useCallback } from 'react'
|
|
import { PagePurpose } from '@/components/common/PagePurpose'
|
|
|
|
// Types
|
|
interface AlertItem {
|
|
id: string
|
|
title: string
|
|
url: string
|
|
snippet: string
|
|
topic_name: string
|
|
relevance_score: number | null
|
|
relevance_decision: string | null
|
|
status: string
|
|
fetched_at: string
|
|
published_at: string | null
|
|
matched_rule: string | null
|
|
tags: string[]
|
|
}
|
|
|
|
interface Topic {
|
|
id: string
|
|
name: string
|
|
feed_url: string
|
|
feed_type: string
|
|
is_active: boolean
|
|
fetch_interval_minutes: number
|
|
last_fetched_at: string | null
|
|
alert_count: number
|
|
}
|
|
|
|
interface Rule {
|
|
id: string
|
|
name: string
|
|
topic_id: string | null
|
|
conditions: Array<{
|
|
field: string
|
|
operator: string
|
|
value: string | number
|
|
}>
|
|
action_type: string
|
|
action_config: Record<string, unknown>
|
|
priority: number
|
|
is_active: boolean
|
|
}
|
|
|
|
interface Profile {
|
|
priorities: string[]
|
|
exclusions: string[]
|
|
positive_examples: Array<{ title: string; url: string }>
|
|
negative_examples: Array<{ title: string; url: string }>
|
|
policies: {
|
|
keep_threshold: number
|
|
drop_threshold: number
|
|
}
|
|
}
|
|
|
|
interface Stats {
|
|
total_alerts: number
|
|
new_alerts: number
|
|
kept_alerts: number
|
|
review_alerts: number
|
|
dropped_alerts: number
|
|
total_topics: number
|
|
active_topics: number
|
|
total_rules: number
|
|
}
|
|
|
|
// Tab type
|
|
type TabId = 'dashboard' | 'inbox' | 'topics' | 'rules' | 'profile' | 'audit' | 'documentation'
|
|
|
|
export default function AlertsPage() {
|
|
const [activeTab, setActiveTab] = useState<TabId>('dashboard')
|
|
const [stats, setStats] = useState<Stats | null>(null)
|
|
const [alerts, setAlerts] = useState<AlertItem[]>([])
|
|
const [topics, setTopics] = useState<Topic[]>([])
|
|
const [rules, setRules] = useState<Rule[]>([])
|
|
const [profile, setProfile] = useState<Profile | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [inboxFilter, setInboxFilter] = useState<string>('all')
|
|
|
|
const API_BASE = '/api/alerts'
|
|
|
|
const fetchData = useCallback(async () => {
|
|
try {
|
|
const [statsRes, alertsRes, topicsRes, rulesRes, profileRes] = await Promise.all([
|
|
fetch(`${API_BASE}/stats`),
|
|
fetch(`${API_BASE}/inbox?limit=50`),
|
|
fetch(`${API_BASE}/topics`),
|
|
fetch(`${API_BASE}/rules`),
|
|
fetch(`${API_BASE}/profile`),
|
|
])
|
|
|
|
if (statsRes.ok) setStats(await statsRes.json())
|
|
if (alertsRes.ok) {
|
|
const data = await alertsRes.json()
|
|
setAlerts(data.items || [])
|
|
}
|
|
if (topicsRes.ok) {
|
|
const data = await topicsRes.json()
|
|
setTopics(data.topics || data.items || [])
|
|
}
|
|
if (rulesRes.ok) {
|
|
const data = await rulesRes.json()
|
|
setRules(data.rules || data.items || [])
|
|
}
|
|
if (profileRes.ok) setProfile(await profileRes.json())
|
|
|
|
setError(null)
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Verbindungsfehler')
|
|
// Set demo data
|
|
setStats({
|
|
total_alerts: 147,
|
|
new_alerts: 23,
|
|
kept_alerts: 89,
|
|
review_alerts: 12,
|
|
dropped_alerts: 23,
|
|
total_topics: 5,
|
|
active_topics: 4,
|
|
total_rules: 8,
|
|
})
|
|
setAlerts([
|
|
{
|
|
id: 'demo_1',
|
|
title: 'Neue Studie zur digitalen Bildung an Schulen',
|
|
url: 'https://example.com/artikel1',
|
|
snippet: 'Eine aktuelle Studie zeigt, dass digitale Lernmittel den Lernerfolg steigern koennen...',
|
|
topic_name: 'Digitale Bildung',
|
|
relevance_score: 0.85,
|
|
relevance_decision: 'KEEP',
|
|
status: 'new',
|
|
fetched_at: new Date().toISOString(),
|
|
published_at: null,
|
|
matched_rule: null,
|
|
tags: ['bildung', 'digital'],
|
|
},
|
|
{
|
|
id: 'demo_2',
|
|
title: 'Inklusion: Fortbildungen fuer Lehrkraefte',
|
|
url: 'https://example.com/artikel2',
|
|
snippet: 'Das Kultusministerium bietet neue Fortbildungsangebote zum Thema Inklusion an...',
|
|
topic_name: 'Inklusion',
|
|
relevance_score: 0.72,
|
|
relevance_decision: 'KEEP',
|
|
status: 'new',
|
|
fetched_at: new Date(Date.now() - 3600000).toISOString(),
|
|
published_at: null,
|
|
matched_rule: null,
|
|
tags: ['inklusion'],
|
|
},
|
|
])
|
|
setTopics([
|
|
{
|
|
id: 'topic_1',
|
|
name: 'Digitale Bildung',
|
|
feed_url: 'https://google.com/alerts/feeds/123',
|
|
feed_type: 'rss',
|
|
is_active: true,
|
|
fetch_interval_minutes: 60,
|
|
last_fetched_at: new Date().toISOString(),
|
|
alert_count: 47,
|
|
},
|
|
{
|
|
id: 'topic_2',
|
|
name: 'Inklusion',
|
|
feed_url: 'https://google.com/alerts/feeds/456',
|
|
feed_type: 'rss',
|
|
is_active: true,
|
|
fetch_interval_minutes: 60,
|
|
last_fetched_at: new Date(Date.now() - 1800000).toISOString(),
|
|
alert_count: 32,
|
|
},
|
|
])
|
|
setRules([
|
|
{
|
|
id: 'rule_1',
|
|
name: 'Stellenanzeigen ausschliessen',
|
|
topic_id: null,
|
|
conditions: [{ field: 'title', operator: 'contains', value: 'Stellenangebot' }],
|
|
action_type: 'drop',
|
|
action_config: {},
|
|
priority: 10,
|
|
is_active: true,
|
|
},
|
|
])
|
|
setProfile({
|
|
priorities: ['Inklusion', 'digitale Bildung'],
|
|
exclusions: ['Stellenanzeigen', 'Werbung'],
|
|
positive_examples: [],
|
|
negative_examples: [],
|
|
policies: { keep_threshold: 0.7, drop_threshold: 0.3 },
|
|
})
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
fetchData()
|
|
}, [fetchData])
|
|
|
|
const formatTimeAgo = (dateStr: string | null) => {
|
|
if (!dateStr) return '-'
|
|
const date = new Date(dateStr)
|
|
const now = new Date()
|
|
const diffMs = now.getTime() - date.getTime()
|
|
const diffMins = Math.floor(diffMs / 60000)
|
|
|
|
if (diffMins < 1) return 'gerade eben'
|
|
if (diffMins < 60) return `vor ${diffMins} Min.`
|
|
if (diffMins < 1440) return `vor ${Math.floor(diffMins / 60)} Std.`
|
|
return `vor ${Math.floor(diffMins / 1440)} Tagen`
|
|
}
|
|
|
|
const getScoreBadge = (score: number | null) => {
|
|
if (score === null) return null
|
|
const pct = Math.round(score * 100)
|
|
let cls = 'bg-slate-100 text-slate-600'
|
|
if (pct >= 70) cls = 'bg-green-100 text-green-800'
|
|
else if (pct >= 40) cls = 'bg-amber-100 text-amber-800'
|
|
else cls = 'bg-red-100 text-red-800'
|
|
return <span className={`px-2 py-0.5 rounded text-xs font-semibold ${cls}`}>{pct}%</span>
|
|
}
|
|
|
|
const getDecisionBadge = (decision: string | null) => {
|
|
if (!decision) return null
|
|
const styles: Record<string, string> = {
|
|
KEEP: 'bg-green-100 text-green-800',
|
|
REVIEW: 'bg-amber-100 text-amber-800',
|
|
DROP: 'bg-red-100 text-red-800',
|
|
}
|
|
return (
|
|
<span className={`px-2 py-0.5 rounded text-xs font-semibold uppercase ${styles[decision] || 'bg-slate-100'}`}>
|
|
{decision}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
const filteredAlerts = alerts.filter((alert) => {
|
|
if (inboxFilter === 'all') return true
|
|
if (inboxFilter === 'new') return alert.status === 'new'
|
|
if (inboxFilter === 'keep') return alert.relevance_decision === 'KEEP'
|
|
if (inboxFilter === 'review') return alert.relevance_decision === 'REVIEW'
|
|
return true
|
|
})
|
|
|
|
const tabs: { id: TabId; label: string; badge?: number }[] = [
|
|
{ id: 'dashboard', label: 'Dashboard' },
|
|
{ id: 'inbox', label: 'Inbox', badge: stats?.new_alerts || 0 },
|
|
{ id: 'topics', label: 'Topics' },
|
|
{ id: 'rules', label: 'Regeln' },
|
|
{ id: 'profile', label: 'Profil' },
|
|
{ id: 'audit', label: 'Audit' },
|
|
{ id: 'documentation', label: 'Dokumentation' },
|
|
]
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-600" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{/* Page Purpose */}
|
|
<PagePurpose
|
|
title="Alerts Monitoring"
|
|
purpose="Google Alerts & Feed-Ueberwachung mit KI-gestuetzter Relevanzpruefung. Verwalten Sie Topics, konfigurieren Sie Filterregeln und nutzen Sie LLM-basiertes Scoring fuer automatische Kategorisierung."
|
|
audience={['Marketing', 'Admins', 'DSB']}
|
|
architecture={{
|
|
services: ['backend (FastAPI)', 'APScheduler', 'LLM Gateway'],
|
|
databases: ['PostgreSQL', 'Valkey Cache'],
|
|
}}
|
|
relatedPages={[
|
|
{ name: 'Unified Inbox', href: '/communication/mail', description: 'E-Mail-Konten verwalten' },
|
|
{ name: 'Voice Service', href: '/communication/matrix', description: 'Voice-First Interface' },
|
|
]}
|
|
collapsible={true}
|
|
defaultCollapsed={false}
|
|
/>
|
|
|
|
{/* Stats Overview */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
|
<div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
|
|
<div className="text-3xl font-bold text-slate-900">{stats?.total_alerts || 0}</div>
|
|
<div className="text-sm text-slate-500">Alerts gesamt</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
|
|
<div className="text-3xl font-bold text-blue-600">{stats?.new_alerts || 0}</div>
|
|
<div className="text-sm text-slate-500">Neue Alerts</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
|
|
<div className="text-3xl font-bold text-green-600">{stats?.kept_alerts || 0}</div>
|
|
<div className="text-sm text-slate-500">Relevant</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
|
|
<div className="text-3xl font-bold text-amber-600">{stats?.review_alerts || 0}</div>
|
|
<div className="text-sm text-slate-500">Zur Pruefung</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tab Navigation */}
|
|
<div className="bg-white rounded-lg shadow mb-6">
|
|
<div className="border-b border-slate-200 px-4">
|
|
<nav className="flex gap-4 overflow-x-auto">
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`pb-3 pt-4 px-1 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 whitespace-nowrap ${
|
|
activeTab === tab.id
|
|
? 'border-green-600 text-green-600'
|
|
: 'border-transparent text-slate-500 hover:text-slate-700'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
{tab.badge !== undefined && tab.badge > 0 && (
|
|
<span className="px-2 py-0.5 rounded-full text-xs font-semibold bg-red-500 text-white">
|
|
{tab.badge}
|
|
</span>
|
|
)}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
{/* Dashboard Tab */}
|
|
{activeTab === 'dashboard' && (
|
|
<div className="space-y-6">
|
|
{/* Quick Actions */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="bg-slate-50 rounded-xl p-6">
|
|
<h3 className="font-semibold text-slate-900 mb-4">Aktive Topics</h3>
|
|
<div className="space-y-3">
|
|
{topics.slice(0, 5).map((topic) => (
|
|
<div key={topic.id} className="flex items-center justify-between p-3 bg-white rounded-lg border border-slate-200">
|
|
<div>
|
|
<div className="font-medium text-slate-900">{topic.name}</div>
|
|
<div className="text-xs text-slate-500">{topic.alert_count} Alerts</div>
|
|
</div>
|
|
<span className={`px-2 py-1 rounded text-xs font-semibold ${topic.is_active ? 'bg-green-100 text-green-800' : 'bg-slate-100 text-slate-600'}`}>
|
|
{topic.is_active ? 'Aktiv' : 'Pausiert'}
|
|
</span>
|
|
</div>
|
|
))}
|
|
{topics.length === 0 && (
|
|
<div className="text-sm text-slate-500 text-center py-4">Keine Topics konfiguriert</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-slate-50 rounded-xl p-6">
|
|
<h3 className="font-semibold text-slate-900 mb-4">Letzte Alerts</h3>
|
|
<div className="space-y-3">
|
|
{alerts.slice(0, 5).map((alert) => (
|
|
<div key={alert.id} className="p-3 bg-white rounded-lg border border-slate-200">
|
|
<div className="font-medium text-slate-900 text-sm truncate">{alert.title}</div>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<span className="text-xs text-slate-500">{alert.topic_name}</span>
|
|
{getScoreBadge(alert.relevance_score)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
{alerts.length === 0 && (
|
|
<div className="text-sm text-slate-500 text-center py-4">Keine Alerts vorhanden</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
|
|
<p className="text-sm text-amber-800">
|
|
<strong>Hinweis:</strong> API nicht erreichbar. Demo-Daten werden angezeigt.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Inbox Tab */}
|
|
{activeTab === 'inbox' && (
|
|
<div className="space-y-4">
|
|
{/* Filters */}
|
|
<div className="flex gap-2 flex-wrap">
|
|
{['all', 'new', 'keep', 'review'].map((filter) => (
|
|
<button
|
|
key={filter}
|
|
onClick={() => setInboxFilter(filter)}
|
|
className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
|
|
inboxFilter === filter
|
|
? 'bg-green-600 text-white'
|
|
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
|
}`}
|
|
>
|
|
{filter === 'all' && 'Alle'}
|
|
{filter === 'new' && 'Neu'}
|
|
{filter === 'keep' && 'Relevant'}
|
|
{filter === 'review' && 'Pruefung'}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Alerts Table */}
|
|
<div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
|
<table className="w-full">
|
|
<thead className="bg-slate-50 border-b border-slate-200">
|
|
<tr>
|
|
<th className="text-left p-4 text-xs font-semibold text-slate-500 uppercase">Alert</th>
|
|
<th className="text-left p-4 text-xs font-semibold text-slate-500 uppercase">Topic</th>
|
|
<th className="text-left p-4 text-xs font-semibold text-slate-500 uppercase">Score</th>
|
|
<th className="text-left p-4 text-xs font-semibold text-slate-500 uppercase">Decision</th>
|
|
<th className="text-left p-4 text-xs font-semibold text-slate-500 uppercase">Zeit</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{filteredAlerts.map((alert) => (
|
|
<tr key={alert.id} className="hover:bg-slate-50">
|
|
<td className="p-4">
|
|
<a href={alert.url} target="_blank" rel="noopener noreferrer" className="font-medium text-slate-900 hover:text-green-600">
|
|
{alert.title}
|
|
</a>
|
|
<p className="text-sm text-slate-500 truncate max-w-md">{alert.snippet}</p>
|
|
</td>
|
|
<td className="p-4 text-sm text-slate-600">{alert.topic_name}</td>
|
|
<td className="p-4">{getScoreBadge(alert.relevance_score)}</td>
|
|
<td className="p-4">{getDecisionBadge(alert.relevance_decision)}</td>
|
|
<td className="p-4 text-sm text-slate-500">{formatTimeAgo(alert.fetched_at)}</td>
|
|
</tr>
|
|
))}
|
|
{filteredAlerts.length === 0 && (
|
|
<tr>
|
|
<td colSpan={5} className="p-8 text-center text-slate-500">
|
|
Keine Alerts gefunden
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Topics Tab */}
|
|
{activeTab === 'topics' && (
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between items-center">
|
|
<h3 className="font-semibold text-slate-900">Feed Topics</h3>
|
|
<button className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700">
|
|
+ Topic hinzufuegen
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{topics.map((topic) => (
|
|
<div key={topic.id} className="bg-white rounded-xl border border-slate-200 p-4">
|
|
<div className="flex justify-between items-start mb-3">
|
|
<div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
|
|
<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="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-6 0a1 1 0 11-2 0 1 1 0 012 0z" />
|
|
</svg>
|
|
</div>
|
|
<span className={`px-2 py-1 rounded text-xs font-semibold ${topic.is_active ? 'bg-green-100 text-green-800' : 'bg-slate-100 text-slate-600'}`}>
|
|
{topic.is_active ? 'Aktiv' : 'Pausiert'}
|
|
</span>
|
|
</div>
|
|
<h4 className="font-semibold text-slate-900">{topic.name}</h4>
|
|
<p className="text-sm text-slate-500 truncate">{topic.feed_url}</p>
|
|
<div className="flex justify-between items-center mt-4 pt-4 border-t border-slate-100">
|
|
<div className="text-sm">
|
|
<span className="font-semibold text-slate-900">{topic.alert_count}</span>
|
|
<span className="text-slate-500"> Alerts</span>
|
|
</div>
|
|
<div className="text-xs text-slate-500">
|
|
{formatTimeAgo(topic.last_fetched_at)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{topics.length === 0 && (
|
|
<div className="col-span-full text-center py-8 text-slate-500">
|
|
Keine Topics konfiguriert
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Rules Tab */}
|
|
{activeTab === 'rules' && (
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between items-center">
|
|
<h3 className="font-semibold text-slate-900">Filterregeln</h3>
|
|
<button className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700">
|
|
+ Regel erstellen
|
|
</button>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl border border-slate-200 divide-y divide-slate-100">
|
|
{rules.map((rule) => (
|
|
<div key={rule.id} className="p-4 flex items-center gap-4">
|
|
<div className="text-slate-400 cursor-grab">
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="font-medium text-slate-900">{rule.name}</div>
|
|
<div className="text-sm text-slate-500">
|
|
Wenn: {rule.conditions[0]?.field} {rule.conditions[0]?.operator} "{rule.conditions[0]?.value}"
|
|
</div>
|
|
</div>
|
|
<span className={`px-3 py-1 rounded text-xs font-semibold uppercase ${
|
|
rule.action_type === 'keep' ? 'bg-green-100 text-green-800' :
|
|
rule.action_type === 'drop' ? 'bg-red-100 text-red-800' :
|
|
rule.action_type === 'email' ? 'bg-blue-100 text-blue-800' :
|
|
'bg-purple-100 text-purple-800'
|
|
}`}>
|
|
{rule.action_type}
|
|
</span>
|
|
<div
|
|
className={`w-12 h-6 rounded-full relative cursor-pointer transition-colors ${
|
|
rule.is_active ? 'bg-green-500' : 'bg-slate-300'
|
|
}`}
|
|
>
|
|
<div
|
|
className={`absolute w-5 h-5 bg-white rounded-full top-0.5 transition-all shadow ${
|
|
rule.is_active ? 'left-6' : 'left-0.5'
|
|
}`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{rules.length === 0 && (
|
|
<div className="p-8 text-center text-slate-500">
|
|
Keine Regeln konfiguriert
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Profile Tab */}
|
|
{activeTab === 'profile' && (
|
|
<div className="max-w-2xl space-y-6">
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<h3 className="font-semibold text-slate-900 mb-4">Relevanzprofil</h3>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-2">
|
|
Prioritaeten (wichtige Themen)
|
|
</label>
|
|
<textarea
|
|
className="w-full p-3 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500"
|
|
rows={4}
|
|
defaultValue={profile?.priorities?.join('\n') || ''}
|
|
placeholder="Ein Thema pro Zeile..."
|
|
/>
|
|
<p className="text-xs text-slate-500 mt-1">Alerts zu diesen Themen werden hoeher bewertet.</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-2">
|
|
Ausschluesse (unerwuenschte Themen)
|
|
</label>
|
|
<textarea
|
|
className="w-full p-3 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500"
|
|
rows={4}
|
|
defaultValue={profile?.exclusions?.join('\n') || ''}
|
|
placeholder="Ein Thema pro Zeile..."
|
|
/>
|
|
<p className="text-xs text-slate-500 mt-1">Alerts zu diesen Themen werden niedriger bewertet.</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-2">
|
|
Schwellenwert KEEP
|
|
</label>
|
|
<select
|
|
className="w-full p-3 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500"
|
|
defaultValue={profile?.policies?.keep_threshold || 0.7}
|
|
>
|
|
<option value={0.8}>80% (sehr streng)</option>
|
|
<option value={0.7}>70% (empfohlen)</option>
|
|
<option value={0.6}>60% (weniger streng)</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-2">
|
|
Schwellenwert DROP
|
|
</label>
|
|
<select
|
|
className="w-full p-3 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500"
|
|
defaultValue={profile?.policies?.drop_threshold || 0.3}
|
|
>
|
|
<option value={0.4}>40% (strenger)</option>
|
|
<option value={0.3}>30% (empfohlen)</option>
|
|
<option value={0.2}>20% (lockerer)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<button className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700">
|
|
Profil speichern
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Audit Tab */}
|
|
{activeTab === 'audit' && (
|
|
<div className="space-y-6">
|
|
<h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide">Audit-relevante Informationen</h3>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{/* Database Info */}
|
|
<div className="bg-white rounded-xl border border-slate-200 p-4">
|
|
<h4 className="font-semibold text-slate-900 mb-3 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="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
|
|
</svg>
|
|
Datenbank
|
|
</h4>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between py-2 border-b border-slate-100">
|
|
<span className="text-sm text-slate-600">Tabellen</span>
|
|
<span className="text-sm font-medium bg-green-100 text-green-800 px-2 py-0.5 rounded">4 (topics, items, rules, profiles)</span>
|
|
</div>
|
|
<div className="flex items-center justify-between py-2 border-b border-slate-100">
|
|
<span className="text-sm text-slate-600">Indizes</span>
|
|
<span className="text-sm font-medium bg-green-100 text-green-800 px-2 py-0.5 rounded">URL-Hash, Topic-ID, Status</span>
|
|
</div>
|
|
<div className="flex items-center justify-between py-2">
|
|
<span className="text-sm text-slate-600">Backups</span>
|
|
<span className="text-sm font-medium bg-green-100 text-green-800 px-2 py-0.5 rounded">PostgreSQL pg_dump</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* API Security */}
|
|
<div className="bg-white rounded-xl border border-slate-200 p-4">
|
|
<h4 className="font-semibold text-slate-900 mb-3 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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
|
</svg>
|
|
API Sicherheit
|
|
</h4>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between py-2 border-b border-slate-100">
|
|
<span className="text-sm text-slate-600">Authentifizierung</span>
|
|
<span className="text-sm font-medium bg-amber-100 text-amber-800 px-2 py-0.5 rounded">Bearer Token (geplant)</span>
|
|
</div>
|
|
<div className="flex items-center justify-between py-2 border-b border-slate-100">
|
|
<span className="text-sm text-slate-600">Rate Limiting</span>
|
|
<span className="text-sm font-medium bg-amber-100 text-amber-800 px-2 py-0.5 rounded">Nicht implementiert</span>
|
|
</div>
|
|
<div className="flex items-center justify-between py-2">
|
|
<span className="text-sm text-slate-600">Input Validation</span>
|
|
<span className="text-sm font-medium bg-green-100 text-green-800 px-2 py-0.5 rounded">Pydantic Models</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Logging */}
|
|
<div className="bg-white rounded-xl border border-slate-200 p-4">
|
|
<h4 className="font-semibold text-slate-900 mb-3 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="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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>
|
|
Logging & Monitoring
|
|
</h4>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between py-2 border-b border-slate-100">
|
|
<span className="text-sm text-slate-600">Structured Logging</span>
|
|
<span className="text-sm font-medium bg-green-100 text-green-800 px-2 py-0.5 rounded">Python logging</span>
|
|
</div>
|
|
<div className="flex items-center justify-between py-2 border-b border-slate-100">
|
|
<span className="text-sm text-slate-600">Metriken</span>
|
|
<span className="text-sm font-medium bg-green-100 text-green-800 px-2 py-0.5 rounded">Stats Endpoint</span>
|
|
</div>
|
|
<div className="flex items-center justify-between py-2">
|
|
<span className="text-sm text-slate-600">Health Checks</span>
|
|
<span className="text-sm font-medium bg-green-100 text-green-800 px-2 py-0.5 rounded">/api/alerts/health</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Privacy Notes */}
|
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
|
<h4 className="text-sm font-semibold text-blue-800 mb-2">Datenschutz-Hinweise</h4>
|
|
<ul className="space-y-1">
|
|
<li className="text-sm text-blue-700 flex items-start gap-2">
|
|
<svg className="w-4 h-4 mt-0.5 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Alle Daten werden in Deutschland gespeichert (PostgreSQL)
|
|
</li>
|
|
<li className="text-sm text-blue-700 flex items-start gap-2">
|
|
<svg className="w-4 h-4 mt-0.5 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Keine personenbezogenen Daten in Alerts (nur URLs und Snippets)
|
|
</li>
|
|
<li className="text-sm text-blue-700 flex items-start gap-2">
|
|
<svg className="w-4 h-4 mt-0.5 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
LLM-Verarbeitung kann on-premise mit Ollama/vLLM erfolgen
|
|
</li>
|
|
<li className="text-sm text-blue-700 flex items-start gap-2">
|
|
<svg className="w-4 h-4 mt-0.5 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
DSGVO-konforme Datenverarbeitung
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Documentation Tab */}
|
|
{activeTab === 'documentation' && (
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6 overflow-auto max-h-[calc(100vh-350px)]">
|
|
<div className="prose prose-slate max-w-none prose-headings:font-semibold prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg">
|
|
{/* Header */}
|
|
<div className="not-prose mb-8 pb-6 border-b border-slate-200">
|
|
<h1 className="text-2xl font-bold text-slate-900">BreakPilot Alerts Agent</h1>
|
|
<p className="text-sm text-slate-500 mt-1">Version: 1.0.0 | Stand: Januar 2026 | Autor: BreakPilot Development Team</p>
|
|
</div>
|
|
|
|
{/* Audit Box */}
|
|
<div className="not-prose bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
|
|
<h3 className="font-semibold text-blue-900 mb-2">Audit-Relevante Informationen</h3>
|
|
<p className="text-sm text-blue-800">
|
|
Dieses Dokument dient als technische Dokumentation fuer das Alert-Monitoring-System der BreakPilot Plattform.
|
|
Es ist fuer Audits durch Bildungstraeger und Datenschutzbeauftragte konzipiert.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Ziel des Systems */}
|
|
<h2>Ziel des Alert-Systems</h2>
|
|
<p>Das System ermoeglicht automatisierte Ueberwachung von Bildungsthemen mit:</p>
|
|
<ul>
|
|
<li><strong>Google Alerts Integration</strong>: RSS-Feeds von Google Alerts automatisch abrufen</li>
|
|
<li><strong>RSS/Atom Feeds</strong>: Beliebige Nachrichtenquellen einbinden</li>
|
|
<li><strong>KI-Relevanzpruefung</strong>: Automatische Bewertung der Relevanz durch LLM</li>
|
|
<li><strong>Regelbasierte Filterung</strong>: Flexible Regeln fuer automatische Sortierung</li>
|
|
<li><strong>Multi-Channel Actions</strong>: E-Mail, Webhook, Slack Benachrichtigungen</li>
|
|
<li><strong>Few-Shot Learning</strong>: Profil verbessert sich durch Nutzerfeedback</li>
|
|
</ul>
|
|
|
|
{/* Architecture Diagram */}
|
|
<h2>Systemarchitektur</h2>
|
|
<div className="not-prose bg-slate-900 rounded-lg p-4 overflow-x-auto">
|
|
<pre className="text-green-400 text-xs">{`
|
|
┌─────────────────────────────────────────────────────────────────────┐
|
|
│ BreakPilot Alerts Frontend │
|
|
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────┐│
|
|
│ │ Dashboard │ │ Inbox │ │ Topics │ │ Profile ││
|
|
│ └──────────────┘ └──────────────┘ └──────────────┘ └──────────┘│
|
|
└───────────────────────────────┬─────────────────────────────────────┘
|
|
│
|
|
v
|
|
┌─────────────────────────────────────────────────────────────────────┐
|
|
│ Ingestion Layer │
|
|
│ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ │
|
|
│ │ RSS Fetcher │ │ Email Parser │ │ APScheduler │ │
|
|
│ └───────┬────────┘ └───────┬────────┘ └───────┬────────┘ │
|
|
│ └───────────────────┼───────────────────┘ │
|
|
│ ┌──────────────────────────────────────────────────────┐ │
|
|
│ │ Deduplication (URL-Hash + SimHash) │ │
|
|
│ └──────────────────────────────────────────────────────┘ │
|
|
└─────────────────────────────────────────────────────────────────────┘
|
|
│
|
|
v
|
|
┌─────────────────────────────────────────────────────────────────────┐
|
|
│ Processing Layer │
|
|
│ ┌──────────────────────────────────────────────────────┐ │
|
|
│ │ Rule Engine │ │
|
|
│ └──────────────────────────────────────────────────────┘ │
|
|
│ ┌──────────────────────────────────────────────────────┐ │
|
|
│ │ LLM Relevance Scorer │ │
|
|
│ │ Output: { score, decision: KEEP/DROP/REVIEW } │ │
|
|
│ └──────────────────────────────────────────────────────┘ │
|
|
└─────────────────────────────────────────────────────────────────────┘
|
|
│
|
|
v
|
|
┌─────────────────────────────────────────────────────────────────────┐
|
|
│ Action Layer │
|
|
│ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ │
|
|
│ │ Email Action │ │ Webhook Action │ │ Slack Action │ │
|
|
│ └────────────────┘ └────────────────┘ └────────────────┘ │
|
|
└─────────────────────────────────────────────────────────────────────┘
|
|
│
|
|
v
|
|
┌─────────────────────────────────────────────────────────────────────┐
|
|
│ Storage Layer │
|
|
│ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ │
|
|
│ │ PostgreSQL │ │ Valkey │ │ LLM Gateway │ │
|
|
│ └────────────────┘ └────────────────┘ └────────────────┘ │
|
|
└─────────────────────────────────────────────────────────────────────┘`}</pre>
|
|
</div>
|
|
|
|
{/* API Endpoints */}
|
|
<h2>API Endpoints</h2>
|
|
<div className="not-prose overflow-x-auto">
|
|
<table className="min-w-full text-sm border border-slate-200 rounded-lg">
|
|
<thead className="bg-slate-50">
|
|
<tr>
|
|
<th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Endpoint</th>
|
|
<th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Methode</th>
|
|
<th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Beschreibung</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-200">
|
|
<tr><td className="px-4 py-2 font-mono text-xs">/api/alerts/inbox</td><td className="px-4 py-2">GET</td><td className="px-4 py-2 text-slate-600">Inbox Items abrufen</td></tr>
|
|
<tr><td className="px-4 py-2 font-mono text-xs">/api/alerts/ingest</td><td className="px-4 py-2">POST</td><td className="px-4 py-2 text-slate-600">Manuell Alert importieren</td></tr>
|
|
<tr><td className="px-4 py-2 font-mono text-xs">/api/alerts/topics</td><td className="px-4 py-2">GET/POST</td><td className="px-4 py-2 text-slate-600">Topics verwalten</td></tr>
|
|
<tr><td className="px-4 py-2 font-mono text-xs">/api/alerts/rules</td><td className="px-4 py-2">GET/POST</td><td className="px-4 py-2 text-slate-600">Regeln verwalten</td></tr>
|
|
<tr><td className="px-4 py-2 font-mono text-xs">/api/alerts/profile</td><td className="px-4 py-2">GET/PUT</td><td className="px-4 py-2 text-slate-600">Profil abrufen/aktualisieren</td></tr>
|
|
<tr><td className="px-4 py-2 font-mono text-xs">/api/alerts/stats</td><td className="px-4 py-2">GET</td><td className="px-4 py-2 text-slate-600">Statistiken abrufen</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Rule Engine */}
|
|
<h2>Rule Engine - Operatoren</h2>
|
|
<div className="not-prose overflow-x-auto">
|
|
<table className="min-w-full text-sm border border-slate-200 rounded-lg">
|
|
<thead className="bg-slate-50">
|
|
<tr>
|
|
<th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Operator</th>
|
|
<th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Beschreibung</th>
|
|
<th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Beispiel</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-200">
|
|
<tr><td className="px-4 py-2 font-mono text-xs">contains</td><td className="px-4 py-2">Text enthaelt</td><td className="px-4 py-2 text-slate-600">title contains "Inklusion"</td></tr>
|
|
<tr><td className="px-4 py-2 font-mono text-xs">not_contains</td><td className="px-4 py-2">Text enthaelt nicht</td><td className="px-4 py-2 text-slate-600">title not_contains "Werbung"</td></tr>
|
|
<tr><td className="px-4 py-2 font-mono text-xs">equals</td><td className="px-4 py-2">Exakte Uebereinstimmung</td><td className="px-4 py-2 text-slate-600">status equals "new"</td></tr>
|
|
<tr><td className="px-4 py-2 font-mono text-xs">regex</td><td className="px-4 py-2">Regulaerer Ausdruck</td><td className="px-4 py-2 text-slate-600">title regex "\d{4}"</td></tr>
|
|
<tr><td className="px-4 py-2 font-mono text-xs">gt / lt</td><td className="px-4 py-2">Groesser/Kleiner</td><td className="px-4 py-2 text-slate-600">relevance_score gt 0.8</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Scoring */}
|
|
<h2>LLM Relevanz-Scoring</h2>
|
|
<div className="not-prose overflow-x-auto">
|
|
<table className="min-w-full text-sm border border-slate-200 rounded-lg">
|
|
<thead className="bg-slate-50">
|
|
<tr>
|
|
<th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Entscheidung</th>
|
|
<th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Score-Bereich</th>
|
|
<th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Bedeutung</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-200">
|
|
<tr className="bg-green-50"><td className="px-4 py-2 font-semibold text-green-800">KEEP</td><td className="px-4 py-2">0.7 - 1.0</td><td className="px-4 py-2">Klar relevant, in Inbox anzeigen</td></tr>
|
|
<tr className="bg-amber-50"><td className="px-4 py-2 font-semibold text-amber-800">REVIEW</td><td className="px-4 py-2">0.4 - 0.7</td><td className="px-4 py-2">Unsicher, Nutzer entscheidet</td></tr>
|
|
<tr className="bg-red-50"><td className="px-4 py-2 font-semibold text-red-800">DROP</td><td className="px-4 py-2">0.0 - 0.4</td><td className="px-4 py-2">Irrelevant, automatisch archivieren</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Contact */}
|
|
<h2>Kontakt & Support</h2>
|
|
<div className="not-prose overflow-x-auto">
|
|
<table className="min-w-full text-sm border border-slate-200 rounded-lg">
|
|
<thead className="bg-slate-50">
|
|
<tr>
|
|
<th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Kontakt</th>
|
|
<th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Adresse</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-200">
|
|
<tr><td className="px-4 py-2">Technischer Support</td><td className="px-4 py-2">support@breakpilot.de</td></tr>
|
|
<tr><td className="px-4 py-2">Datenschutzbeauftragter</td><td className="px-4 py-2">dsb@breakpilot.de</td></tr>
|
|
<tr><td className="px-4 py-2">Dokumentation</td><td className="px-4 py-2">docs.breakpilot.de</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="not-prose mt-8 pt-6 border-t border-slate-200 text-sm text-slate-500">
|
|
<p>Dokumentation erstellt: Januar 2026 | Version: 1.0.0</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|