Initial commit
This commit is contained in:
Benjamin Sutter
@@ -0,0 +1,280 @@
|
||||
import {
|
||||
Box,
|
||||
Card,
|
||||
Chip,
|
||||
Typography,
|
||||
LinearProgress,
|
||||
Stack,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Alert,
|
||||
CircularProgress,
|
||||
} from '@mui/material'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { propertyService } from '../../services/propertyService'
|
||||
|
||||
interface MetricCard {
|
||||
label: string
|
||||
value: string
|
||||
color: string
|
||||
note: string
|
||||
}
|
||||
|
||||
const HEALTH_METRICS: MetricCard[] = [
|
||||
{ label: 'Extraktionsgenauigkeit', value: '94%', color: '#1a7a4a', note: 'Ø letzte 30 Tage' },
|
||||
{ label: 'Konfidenz-Ø', value: '73%', color: '#d97706', note: 'Alle Objekte' },
|
||||
{ label: 'Validierungsrate', value: '88%', color: '#1a7a4a', note: 'Menschliche Bestätigung' },
|
||||
{ label: 'Fehlerrate', value: '2.1%', color: '#1a7a4a', note: 'Kritische Fehler' },
|
||||
]
|
||||
|
||||
interface AIDecision {
|
||||
timestamp: string
|
||||
type: string
|
||||
confidence: string
|
||||
result: string
|
||||
impact: string
|
||||
}
|
||||
|
||||
const RECENT_DECISIONS: AIDecision[] = [
|
||||
{
|
||||
timestamp: '15.05.2025 14:32',
|
||||
type: 'Bedarfsextraktion',
|
||||
confidence: '91%',
|
||||
result: 'Kriterien extrahiert',
|
||||
impact: 'Suche ausgelöst',
|
||||
},
|
||||
{
|
||||
timestamp: '15.05.2025 11:15',
|
||||
type: 'Match-Scoring',
|
||||
confidence: '88%',
|
||||
result: '3 Matches berechnet',
|
||||
impact: 'Review ausgelöst',
|
||||
},
|
||||
{
|
||||
timestamp: '14.05.2025 16:40',
|
||||
type: 'Signal-Erkennung',
|
||||
confidence: '72%',
|
||||
result: 'Expansion erkannt',
|
||||
impact: 'Signal erstellt',
|
||||
},
|
||||
{
|
||||
timestamp: '14.05.2025 09:00',
|
||||
type: 'Datenqualitätsprüfung',
|
||||
confidence: '95%',
|
||||
result: '2 Warnungen erkannt',
|
||||
impact: 'Meldung erstellt',
|
||||
},
|
||||
{
|
||||
timestamp: '13.05.2025 15:22',
|
||||
type: 'Match-Scoring',
|
||||
confidence: '84%',
|
||||
result: '2 Matches berechnet',
|
||||
impact: 'Review ausgelöst',
|
||||
},
|
||||
{
|
||||
timestamp: '12.05.2025 10:11',
|
||||
type: 'Signal-Erkennung',
|
||||
confidence: '65%',
|
||||
result: 'Möglicher Auszug erkannt',
|
||||
impact: 'Signal erstellt',
|
||||
},
|
||||
]
|
||||
|
||||
function getConfidenceBadge(pct: string) {
|
||||
const n = parseInt(pct)
|
||||
const color = n >= 85 ? '#1a7a4a' : n >= 70 ? '#d97706' : '#c0392b'
|
||||
return (
|
||||
<Chip
|
||||
label={pct}
|
||||
size="small"
|
||||
sx={{ bgcolor: color, color: 'white', fontWeight: 700, fontSize: 11 }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default function AIMonitoring() {
|
||||
const { data: propResp, isLoading } = useQuery({
|
||||
queryKey: ['properties'],
|
||||
queryFn: () => propertyService.getAll(),
|
||||
})
|
||||
|
||||
const properties = propResp?.data ?? []
|
||||
|
||||
const highConf = properties.filter(p => p.confidenceScore > 0.85).length
|
||||
const midConf = properties.filter(p => p.confidenceScore >= 0.65 && p.confidenceScore <= 0.85).length
|
||||
const lowConf = properties.filter(p => p.confidenceScore < 0.65).length
|
||||
const total = properties.length || 1
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* Page Header */}
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: 'white',
|
||||
borderBottom: '1px solid #e2e8f0',
|
||||
px: 3,
|
||||
py: 2,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||||
<Typography variant="h5" fontWeight={700} color="text.primary">
|
||||
AI Monitoring
|
||||
</Typography>
|
||||
<Chip
|
||||
label="Live"
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: '#1a7a4a',
|
||||
color: 'white',
|
||||
fontWeight: 700,
|
||||
fontSize: 11,
|
||||
animation: 'pulse 2s ease-in-out infinite',
|
||||
'@keyframes pulse': {
|
||||
'0%, 100%': { opacity: 1 },
|
||||
'50%': { opacity: 0.6 },
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
AI-Layer Gesundheit und Entscheidungsqualität
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ px: 3, py: 3 }}>
|
||||
{/* Health Metrics */}
|
||||
<Box className="grid grid-cols-4 gap-4" sx={{ mb: 3 }}>
|
||||
{HEALTH_METRICS.map(m => (
|
||||
<Card key={m.label} sx={{ p: 2.5 }}>
|
||||
<Typography variant="overline" color="text.secondary" lineHeight={1.4} display="block">
|
||||
{m.label}
|
||||
</Typography>
|
||||
<Typography variant="h3" fontWeight={800} sx={{ color: m.color }}>
|
||||
{m.value}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{m.note}
|
||||
</Typography>
|
||||
</Card>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Box className="grid grid-cols-2 gap-4" sx={{ mb: 3 }}>
|
||||
{/* Confidence Distribution */}
|
||||
<Card sx={{ p: 2.5 }}>
|
||||
<Typography variant="subtitle1" fontWeight={600} mb={2}>
|
||||
Konfidenzverteilung
|
||||
</Typography>
|
||||
|
||||
{isLoading ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
|
||||
<CircularProgress size={32} />
|
||||
</Box>
|
||||
) : (
|
||||
<Stack spacing={2}>
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
|
||||
<Typography variant="body2" fontWeight={500}>Hoch (>85%)</Typography>
|
||||
<Typography variant="body2" color="text.secondary">{highConf} Objekte</Typography>
|
||||
</Box>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={(highConf / total) * 100}
|
||||
color="success"
|
||||
sx={{ height: 10, borderRadius: 5 }}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
|
||||
<Typography variant="body2" fontWeight={500}>Mittel (65–85%)</Typography>
|
||||
<Typography variant="body2" color="text.secondary">{midConf} Objekte</Typography>
|
||||
</Box>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={(midConf / total) * 100}
|
||||
color="warning"
|
||||
sx={{ height: 10, borderRadius: 5 }}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
|
||||
<Typography variant="body2" fontWeight={500}>Niedrig (<65%)</Typography>
|
||||
<Typography variant="body2" color="text.secondary">{lowConf} Objekte</Typography>
|
||||
</Box>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={(lowConf / total) * 100}
|
||||
color="error"
|
||||
sx={{ height: 10, borderRadius: 5 }}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Anomaly Alerts */}
|
||||
<Card sx={{ p: 2.5 }}>
|
||||
<Typography variant="subtitle1" fontWeight={600} mb={2}>
|
||||
Anomalien
|
||||
</Typography>
|
||||
<Stack spacing={1.5}>
|
||||
<Alert severity="warning">
|
||||
Mietpreisangaben für prop-004 weichen von Marktdurchschnitt ab (±31%). Manuelle Prüfung empfohlen.
|
||||
</Alert>
|
||||
<Alert severity="success">
|
||||
Keine kritischen Anomalien erkannt. System läuft stabil.
|
||||
</Alert>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Box>
|
||||
|
||||
{/* Recent AI Decisions */}
|
||||
<Card>
|
||||
<Box sx={{ px: 2.5, py: 2, borderBottom: '1px solid #f1f5f9' }}>
|
||||
<Typography variant="subtitle1" fontWeight={600}>
|
||||
Letzte KI-Entscheidungen
|
||||
</Typography>
|
||||
</Box>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow sx={{ bgcolor: '#f8fafc' }}>
|
||||
<TableCell sx={{ fontSize: 12, fontWeight: 600, color: '#64748b' }}>Zeitpunkt</TableCell>
|
||||
<TableCell sx={{ fontSize: 12, fontWeight: 600, color: '#64748b' }}>Entscheidungstyp</TableCell>
|
||||
<TableCell sx={{ fontSize: 12, fontWeight: 600, color: '#64748b' }}>Konfidenz</TableCell>
|
||||
<TableCell sx={{ fontSize: 12, fontWeight: 600, color: '#64748b' }}>Ergebnis</TableCell>
|
||||
<TableCell sx={{ fontSize: 12, fontWeight: 600, color: '#64748b' }}>Einfluss</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{RECENT_DECISIONS.map((d, i) => (
|
||||
<TableRow key={i} hover>
|
||||
<TableCell>
|
||||
<Typography variant="caption" color="text.secondary">{d.timestamp}</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography variant="body2" fontWeight={500}>{d.type}</Typography>
|
||||
</TableCell>
|
||||
<TableCell>{getConfidenceBadge(d.confidence)}</TableCell>
|
||||
<TableCell>
|
||||
<Typography variant="body2">{d.result}</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography variant="body2" color="text.secondary">{d.impact}</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,311 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Chip,
|
||||
Typography,
|
||||
Stack,
|
||||
CircularProgress,
|
||||
} from '@mui/material'
|
||||
import {
|
||||
Building2,
|
||||
Edit,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
TrendingUp,
|
||||
Search,
|
||||
ClipboardList,
|
||||
} from 'lucide-react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { governanceService, type ActivityEventType, type ActivityEvent } from '../../services/governanceService'
|
||||
import { EmptyState } from '../../components/ui'
|
||||
|
||||
function getEventLabel(type: ActivityEventType): string {
|
||||
switch (type) {
|
||||
case 'PROPERTY_CREATED': return 'Objekt erstellt'
|
||||
case 'PROPERTY_UPDATED': return 'Objekt aktualisiert'
|
||||
case 'MATCH_APPROVED': return 'Match genehmigt'
|
||||
case 'MATCH_REJECTED': return 'Match abgelehnt'
|
||||
case 'SIGNAL_VERIFIED': return 'Signal verifiziert'
|
||||
case 'NEED_CREATED': return 'Bedarf erstellt'
|
||||
case 'REVIEW_REQUESTED': return 'Überprüfung angefordert'
|
||||
}
|
||||
}
|
||||
|
||||
function getEventDescription(event: ActivityEvent): string {
|
||||
const actor = event.performedBy
|
||||
const action = getEventLabel(event.type)
|
||||
const entity = `${event.entityType} ${event.entityId}`
|
||||
return `${actor} hat ${entity} — ${action}`
|
||||
}
|
||||
|
||||
function getEventColor(type: ActivityEventType): string {
|
||||
switch (type) {
|
||||
case 'PROPERTY_CREATED': return '#1e3a5f'
|
||||
case 'PROPERTY_UPDATED': return '#1e3a5f'
|
||||
case 'MATCH_APPROVED': return '#1a7a4a'
|
||||
case 'MATCH_REJECTED': return '#c0392b'
|
||||
case 'SIGNAL_VERIFIED': return '#7c3aed'
|
||||
case 'NEED_CREATED': return '#0891b2'
|
||||
case 'REVIEW_REQUESTED': return '#d97706'
|
||||
}
|
||||
}
|
||||
|
||||
function getEventIcon(type: ActivityEventType) {
|
||||
const size = 14
|
||||
switch (type) {
|
||||
case 'PROPERTY_CREATED': return <Building2 size={size} color="white" />
|
||||
case 'PROPERTY_UPDATED': return <Edit size={size} color="white" />
|
||||
case 'MATCH_APPROVED': return <CheckCircle size={size} color="white" />
|
||||
case 'MATCH_REJECTED': return <XCircle size={size} color="white" />
|
||||
case 'SIGNAL_VERIFIED': return <TrendingUp size={size} color="white" />
|
||||
case 'NEED_CREATED': return <Search size={size} color="white" />
|
||||
case 'REVIEW_REQUESTED': return <ClipboardList size={size} color="white" />
|
||||
}
|
||||
}
|
||||
|
||||
const ALL_EVENT_TYPES: ActivityEventType[] = [
|
||||
'PROPERTY_CREATED',
|
||||
'PROPERTY_UPDATED',
|
||||
'MATCH_APPROVED',
|
||||
'MATCH_REJECTED',
|
||||
'SIGNAL_VERIFIED',
|
||||
'NEED_CREATED',
|
||||
'REVIEW_REQUESTED',
|
||||
]
|
||||
|
||||
function formatDateTime(dateStr: string): string {
|
||||
const d = new Date(dateStr)
|
||||
return d.toLocaleDateString('de-CH', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
}) + ', ' + d.toLocaleTimeString('de-CH', { hour: '2-digit', minute: '2-digit' })
|
||||
}
|
||||
|
||||
function isToday(dateStr: string): boolean {
|
||||
const d = new Date(dateStr)
|
||||
const now = new Date()
|
||||
return d.getFullYear() === now.getFullYear() &&
|
||||
d.getMonth() === now.getMonth() &&
|
||||
d.getDate() === now.getDate()
|
||||
}
|
||||
|
||||
export default function Governance() {
|
||||
const [filterType, setFilterType] = useState<ActivityEventType | 'ALL'>('ALL')
|
||||
|
||||
const { data: activityResp, isLoading, error } = useQuery({
|
||||
queryKey: ['activity', 'org-wincasa'],
|
||||
queryFn: () => governanceService.getActivityLog('org-wincasa'),
|
||||
})
|
||||
|
||||
const events = activityResp?.data ?? []
|
||||
|
||||
const presentTypes = [...new Set(events.map(e => e.type))]
|
||||
const todayCount = events.filter(e => isToday(e.createdAt)).length
|
||||
const uniqueUsers = new Set(events.map(e => e.performedBy)).size
|
||||
|
||||
const filtered = filterType === 'ALL'
|
||||
? events
|
||||
: events.filter(e => e.type === filterType)
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', py: 12 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Box sx={{ px: 3, py: 4 }}>
|
||||
<Typography color="error">Fehler beim Laden des Aktivitätslogs.</Typography>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* Page Header */}
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: 'white',
|
||||
borderBottom: '1px solid #e2e8f0',
|
||||
px: 3,
|
||||
py: 2,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="h5" fontWeight={700} color="text.primary">
|
||||
Governance & Aktivitätslog
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Vollständiger Audit-Trail aller Plattformaktionen
|
||||
</Typography>
|
||||
</Box>
|
||||
<Button variant="outlined" size="small" disabled>
|
||||
Exportieren
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ px: 3, py: 3 }}>
|
||||
{/* Stats row */}
|
||||
<Box className="grid grid-cols-3 gap-4" sx={{ mb: 3 }}>
|
||||
<Card sx={{ p: 2.5 }}>
|
||||
<Typography variant="overline" color="text.secondary" lineHeight={1.4} display="block">
|
||||
Ereignisse gesamt
|
||||
</Typography>
|
||||
<Typography variant="h3" fontWeight={700}>
|
||||
{events.length}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">Alle Aktivitäten</Typography>
|
||||
</Card>
|
||||
<Card sx={{ p: 2.5 }}>
|
||||
<Typography variant="overline" color="text.secondary" lineHeight={1.4} display="block">
|
||||
Ereignisse heute
|
||||
</Typography>
|
||||
<Typography variant="h3" fontWeight={700}>
|
||||
{todayCount}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">Heutige Aktivitäten</Typography>
|
||||
</Card>
|
||||
<Card sx={{ p: 2.5 }}>
|
||||
<Typography variant="overline" color="text.secondary" lineHeight={1.4} display="block">
|
||||
Aktive Benutzer
|
||||
</Typography>
|
||||
<Typography variant="h3" fontWeight={700}>
|
||||
{uniqueUsers}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">Unterschiedliche Nutzer</Typography>
|
||||
</Card>
|
||||
</Box>
|
||||
|
||||
{/* Filter chips */}
|
||||
<Stack direction="row" spacing={0.5} flexWrap="wrap" gap={0.5} sx={{ mb: 2 }}>
|
||||
<Chip
|
||||
label="Alle"
|
||||
size="small"
|
||||
clickable
|
||||
onClick={() => setFilterType('ALL')}
|
||||
sx={{
|
||||
bgcolor: filterType === 'ALL' ? '#1e3a5f' : 'transparent',
|
||||
color: filterType === 'ALL' ? 'white' : 'text.secondary',
|
||||
border: `1px solid ${filterType === 'ALL' ? '#1e3a5f' : '#e2e8f0'}`,
|
||||
fontWeight: filterType === 'ALL' ? 600 : 400,
|
||||
}}
|
||||
/>
|
||||
{ALL_EVENT_TYPES.filter(t => presentTypes.includes(t)).map(t => (
|
||||
<Chip
|
||||
key={t}
|
||||
label={getEventLabel(t)}
|
||||
size="small"
|
||||
clickable
|
||||
onClick={() => setFilterType(t)}
|
||||
sx={{
|
||||
bgcolor: filterType === t ? getEventColor(t) : 'transparent',
|
||||
color: filterType === t ? 'white' : 'text.secondary',
|
||||
border: `1px solid ${filterType === t ? getEventColor(t) : '#e2e8f0'}`,
|
||||
fontWeight: filterType === t ? 600 : 400,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
{/* Activity Timeline */}
|
||||
<Card sx={{ p: 2.5 }}>
|
||||
<Typography variant="subtitle1" fontWeight={600} mb={2}>
|
||||
Aktivitätslog
|
||||
</Typography>
|
||||
|
||||
{filtered.length === 0 ? (
|
||||
<EmptyState
|
||||
title="Keine Ereignisse"
|
||||
description="Für diesen Filter wurden keine Aktivitäten gefunden."
|
||||
/>
|
||||
) : (
|
||||
<Box sx={{ position: 'relative' }}>
|
||||
{/* Vertical line */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
left: 15,
|
||||
top: 16,
|
||||
bottom: 16,
|
||||
width: 2,
|
||||
bgcolor: '#e2e8f0',
|
||||
zIndex: 0,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Stack spacing={0}>
|
||||
{filtered.map((event, idx) => (
|
||||
<Box
|
||||
key={event.id}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: 2,
|
||||
py: 1.5,
|
||||
borderBottom: idx < filtered.length - 1 ? '1px solid #f8fafc' : 'none',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{/* Icon dot */}
|
||||
<Box
|
||||
sx={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: '50%',
|
||||
bgcolor: getEventColor(event.type),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
zIndex: 1,
|
||||
boxShadow: '0 0 0 3px white',
|
||||
}}
|
||||
>
|
||||
{getEventIcon(event.type)}
|
||||
</Box>
|
||||
|
||||
{/* Content */}
|
||||
<Box sx={{ flex: 1, minWidth: 0, pt: 0.5 }}>
|
||||
<Typography variant="body2">
|
||||
{getEventDescription(event)}
|
||||
</Typography>
|
||||
{event.notes && (
|
||||
<Typography variant="caption" color="text.secondary" display="block" mt={0.25}>
|
||||
{event.notes}
|
||||
</Typography>
|
||||
)}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 0.5 }}>
|
||||
<Chip
|
||||
label={event.organizationId}
|
||||
size="small"
|
||||
sx={{ fontSize: 10, height: 18, bgcolor: '#f1f5f9', color: '#475569' }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Timestamp */}
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="text.secondary"
|
||||
sx={{ flexShrink: 0, pt: 0.5, textAlign: 'right', minWidth: 110 }}
|
||||
>
|
||||
{formatDateTime(event.createdAt)}
|
||||
</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
)}
|
||||
</Card>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,380 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Chip,
|
||||
Typography,
|
||||
TextField,
|
||||
Stack,
|
||||
CircularProgress,
|
||||
Divider,
|
||||
Alert,
|
||||
} from '@mui/material'
|
||||
import { Target, TrendingUp } from 'lucide-react'
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { matchService } from '../../services/matchService'
|
||||
import { futureSignalService } from '../../services/futureSignalService'
|
||||
import { RiskLevel } from '../../domain/enums'
|
||||
import { EmptyState } from '../../components/ui'
|
||||
|
||||
type ReviewItemType = 'MATCH' | 'SIGNAL'
|
||||
|
||||
interface ReviewItem {
|
||||
id: string
|
||||
type: ReviewItemType
|
||||
title: string
|
||||
confidence: number
|
||||
risk?: RiskLevel
|
||||
summary?: string
|
||||
probability?: number
|
||||
}
|
||||
|
||||
function getPriorityLabel(confidence: number): string {
|
||||
return confidence > 0.8 ? 'Kritisch' : 'Normal'
|
||||
}
|
||||
|
||||
function getPriorityColor(confidence: number): 'error' | 'primary' {
|
||||
return confidence > 0.8 ? 'error' : 'primary'
|
||||
}
|
||||
|
||||
function getRiskLabel(risk?: RiskLevel): string {
|
||||
if (!risk) return '–'
|
||||
switch (risk) {
|
||||
case RiskLevel.LOW: return 'Niedrig'
|
||||
case RiskLevel.MEDIUM: return 'Mittel'
|
||||
case RiskLevel.HIGH: return 'Hoch'
|
||||
case RiskLevel.CRITICAL: return 'Kritisch'
|
||||
}
|
||||
}
|
||||
|
||||
function getRiskColor(risk?: RiskLevel): 'success' | 'warning' | 'error' | 'default' {
|
||||
if (!risk) return 'default'
|
||||
if (risk === RiskLevel.LOW) return 'success'
|
||||
if (risk === RiskLevel.MEDIUM) return 'warning'
|
||||
return 'error'
|
||||
}
|
||||
|
||||
export default function ReviewQueue() {
|
||||
const queryClient = useQueryClient()
|
||||
const [activeItem, setActiveItem] = useState<string | null>(null)
|
||||
const [reviewNotes, setReviewNotes] = useState('')
|
||||
const [approvedIds, setApprovedIds] = useState<Set<string>>(new Set())
|
||||
const [rejectedIds, setRejectedIds] = useState<Set<string>>(new Set())
|
||||
|
||||
const { data: matchResp, isLoading: matchLoading } = useQuery({
|
||||
queryKey: ['matches'],
|
||||
queryFn: () => matchService.getAll(),
|
||||
})
|
||||
const { data: signalResp, isLoading: signalLoading } = useQuery({
|
||||
queryKey: ['futureSignals'],
|
||||
queryFn: () => futureSignalService.getAll(),
|
||||
})
|
||||
|
||||
const matches = matchResp?.data ?? []
|
||||
const signals = signalResp?.data ?? []
|
||||
|
||||
// Review items = matches NOT approved + future signals NOT verified
|
||||
const matchItems: ReviewItem[] = matches
|
||||
.filter(m => !m.isApproved && !approvedIds.has(m.id) && !rejectedIds.has(m.id))
|
||||
.map(m => ({
|
||||
id: m.id,
|
||||
type: 'MATCH' as ReviewItemType,
|
||||
title: `Match: ${m.propertyId} / ${m.needId}`,
|
||||
confidence: m.confidenceLevel,
|
||||
risk: m.riskLevel,
|
||||
summary: m.explainabilitySummary,
|
||||
}))
|
||||
|
||||
const signalItems: ReviewItem[] = signals
|
||||
.filter(s => !s.isVerified && !approvedIds.has(s.id) && !rejectedIds.has(s.id))
|
||||
.map(s => ({
|
||||
id: s.id,
|
||||
type: 'SIGNAL' as ReviewItemType,
|
||||
title: `${s.signalType}: ${s.locationHint}`,
|
||||
confidence: s.confidenceScore,
|
||||
risk: s.riskLevel,
|
||||
probability: s.probability,
|
||||
summary: s.disclaimer,
|
||||
}))
|
||||
|
||||
const allItems = [...matchItems, ...signalItems]
|
||||
const selectedItem = allItems.find(i => i.id === activeItem)
|
||||
|
||||
const isLoading = matchLoading || signalLoading
|
||||
|
||||
const handleApprove = async () => {
|
||||
if (!activeItem) return
|
||||
const item = allItems.find(i => i.id === activeItem)
|
||||
if (item?.type === 'MATCH') {
|
||||
await matchService.approve(activeItem, 'admin@ideal-sharing.ch')
|
||||
await queryClient.invalidateQueries({ queryKey: ['matches'] })
|
||||
} else if (item?.type === 'SIGNAL') {
|
||||
await futureSignalService.verify(activeItem, 'admin@ideal-sharing.ch')
|
||||
await queryClient.invalidateQueries({ queryKey: ['futureSignals'] })
|
||||
}
|
||||
setApprovedIds(prev => new Set([...prev, activeItem]))
|
||||
setActiveItem(null)
|
||||
setReviewNotes('')
|
||||
}
|
||||
|
||||
const handleReject = () => {
|
||||
if (!activeItem) return
|
||||
setRejectedIds(prev => new Set([...prev, activeItem]))
|
||||
setActiveItem(null)
|
||||
setReviewNotes('')
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', py: 12 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
const totalPending = matchItems.length + signalItems.length
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* Page Header */}
|
||||
<Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0', px: 3, py: 2, display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||||
<Typography variant="h5" fontWeight={700} color="text.primary">
|
||||
Review Queue
|
||||
</Typography>
|
||||
{totalPending > 0 && (
|
||||
<Chip
|
||||
label={totalPending}
|
||||
size="small"
|
||||
sx={{ bgcolor: '#d97706', color: 'white', fontWeight: 700 }}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Human-in-the-loop Prüfung
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ px: 3, py: 3 }}>
|
||||
{/* Stats row */}
|
||||
<Box className="grid grid-cols-2 gap-4" sx={{ mb: 3 }}>
|
||||
<Card sx={{ p: 2.5 }}>
|
||||
<Typography variant="overline" color="text.secondary" lineHeight={1.4} display="block">
|
||||
Offene Reviews
|
||||
</Typography>
|
||||
<Typography variant="h3" fontWeight={700} sx={{ color: totalPending > 0 ? 'warning.main' : 'text.primary' }}>
|
||||
{totalPending}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Ausstehende Prüfungen
|
||||
</Typography>
|
||||
</Card>
|
||||
<Card sx={{ p: 2.5 }}>
|
||||
<Typography variant="overline" color="text.secondary" lineHeight={1.4} display="block">
|
||||
Signale zur Prüfung
|
||||
</Typography>
|
||||
<Typography variant="h3" fontWeight={700} sx={{ color: signalItems.length > 0 ? 'warning.main' : 'text.primary' }}>
|
||||
{signalItems.length}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Unverifizierte Signale
|
||||
</Typography>
|
||||
</Card>
|
||||
</Box>
|
||||
|
||||
{/* Two-column layout */}
|
||||
<Box className="grid grid-cols-2 gap-4" sx={{ alignItems: 'start' }}>
|
||||
{/* Left: Item List */}
|
||||
<Card sx={{ p: 0, overflow: 'hidden' }}>
|
||||
<Box sx={{ px: 2, py: 1.5, borderBottom: '1px solid #f1f5f9' }}>
|
||||
<Typography variant="subtitle2" fontWeight={600}>
|
||||
Ausstehende Elemente
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{allItems.length === 0 ? (
|
||||
<EmptyState
|
||||
title="Keine ausstehenden Reviews"
|
||||
description="Alle Elemente wurden geprüft."
|
||||
/>
|
||||
) : (
|
||||
<Box>
|
||||
{allItems.map(item => (
|
||||
<Box
|
||||
key={item.id}
|
||||
onClick={() => {
|
||||
setActiveItem(item.id)
|
||||
setReviewNotes('')
|
||||
}}
|
||||
sx={{
|
||||
px: 2,
|
||||
py: 1.5,
|
||||
cursor: 'pointer',
|
||||
borderBottom: '1px solid #f8fafc',
|
||||
bgcolor: activeItem === item.id ? '#eff6ff' : 'white',
|
||||
'&:hover': { bgcolor: activeItem === item.id ? '#eff6ff' : '#fafafa' },
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
gap: 1.5,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: '50%',
|
||||
bgcolor: item.type === 'MATCH' ? '#eff6ff' : '#faf5ff',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
mt: 0.25,
|
||||
}}
|
||||
>
|
||||
{item.type === 'MATCH'
|
||||
? <Target size={16} color="#1e3a5f" />
|
||||
: <TrendingUp size={16} color="#7c3aed" />
|
||||
}
|
||||
</Box>
|
||||
<Box sx={{ flex: 1, minWidth: 0 }}>
|
||||
<Typography variant="body2" fontWeight={500} noWrap>
|
||||
{item.title}
|
||||
</Typography>
|
||||
<Stack direction="row" spacing={0.5} mt={0.5} flexWrap="wrap">
|
||||
<Chip
|
||||
label={getPriorityLabel(item.confidence)}
|
||||
size="small"
|
||||
color={getPriorityColor(item.confidence)}
|
||||
variant="outlined"
|
||||
sx={{ fontSize: 10 }}
|
||||
/>
|
||||
<Chip
|
||||
label="Ausstehend"
|
||||
size="small"
|
||||
sx={{ bgcolor: '#fef3c7', color: '#92400e', fontSize: 10 }}
|
||||
/>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Right: Review Panel */}
|
||||
<Card sx={{ p: 0, overflow: 'hidden' }}>
|
||||
{!selectedItem ? (
|
||||
<EmptyState
|
||||
title="Wählen Sie ein Element zur Prüfung"
|
||||
description="Klicken Sie auf ein Element in der Liste, um es zu prüfen."
|
||||
/>
|
||||
) : (
|
||||
<Box>
|
||||
<Box sx={{ px: 2.5, py: 2, borderBottom: '1px solid #f1f5f9' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
|
||||
<Chip
|
||||
label={selectedItem.type === 'MATCH' ? 'Match' : 'Signal'}
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: selectedItem.type === 'MATCH' ? '#eff6ff' : '#faf5ff',
|
||||
color: selectedItem.type === 'MATCH' ? '#1e3a5f' : '#7c3aed',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
/>
|
||||
<Typography variant="subtitle2" fontWeight={600}>
|
||||
{selectedItem.title}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ px: 2.5, py: 2 }}>
|
||||
{/* Key facts */}
|
||||
<Stack spacing={1} sx={{ mb: 2 }}>
|
||||
<Box sx={{ display: 'flex', gap: 3 }}>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary" display="block">Konfidenz</Typography>
|
||||
<Typography variant="body2" fontWeight={600}>
|
||||
{Math.round(selectedItem.confidence * 100)}%
|
||||
</Typography>
|
||||
</Box>
|
||||
{selectedItem.probability != null && (
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary" display="block">Wahrscheinlichkeit</Typography>
|
||||
<Typography variant="body2" fontWeight={600}>
|
||||
{Math.round(selectedItem.probability * 100)}%
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary" display="block">Risiko</Typography>
|
||||
<Chip
|
||||
label={getRiskLabel(selectedItem.risk)}
|
||||
size="small"
|
||||
color={getRiskColor(selectedItem.risk)}
|
||||
variant="outlined"
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
{selectedItem.summary && (
|
||||
<Alert severity="info" sx={{ mb: 2, '& .MuiAlert-message': { fontSize: 13 } }}>
|
||||
{selectedItem.summary}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Divider sx={{ mb: 2 }} />
|
||||
|
||||
{/* Notes */}
|
||||
<Typography variant="caption" fontWeight={600} color="text.secondary" display="block" mb={1}>
|
||||
Notizen
|
||||
</Typography>
|
||||
<TextField
|
||||
multiline
|
||||
rows={3}
|
||||
fullWidth
|
||||
placeholder="Optionale Anmerkungen zur Entscheidung..."
|
||||
value={reviewNotes}
|
||||
onChange={e => setReviewNotes(e.target.value)}
|
||||
size="small"
|
||||
sx={{ mb: 2 }}
|
||||
/>
|
||||
|
||||
{/* Decision buttons */}
|
||||
<Stack spacing={1}>
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={handleApprove}
|
||||
sx={{ bgcolor: '#1a7a4a', '&:hover': { bgcolor: '#155f3a' } }}
|
||||
>
|
||||
Genehmigen
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
color="error"
|
||||
onClick={handleReject}
|
||||
>
|
||||
Ablehnen
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{ color: '#64748b', borderColor: '#e2e8f0' }}
|
||||
>
|
||||
Weiterleiten
|
||||
</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Card>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user