Benjamin Sutter
e20e0e9a2e
- Move system props (fontWeight, lineHeight, display, alignItems, etc.) into sx - Fix Lucide icon color prop (no sx support) - Merge duplicate sx attributes - Remove unused variables (location, _needId, v) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
380 lines
14 KiB
TypeScript
380 lines
14 KiB
TypeScript
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" sx={{ 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" sx={{ lineHeight: 1.4, display: 'block' }}>
|
||
Offene Reviews
|
||
</Typography>
|
||
<Typography variant="h3" sx={{ fontWeight: 700, 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" sx={{ lineHeight: 1.4, display: 'block' }}>
|
||
Signale zur Prüfung
|
||
</Typography>
|
||
<Typography variant="h3" sx={{ fontWeight: 700, 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" sx={{ 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" sx={{ fontWeight: 500 }} noWrap>
|
||
{item.title}
|
||
</Typography>
|
||
<Stack direction="row" spacing={0.5} sx={{ 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" sx={{ 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" sx={{ display: 'block' }}>Konfidenz</Typography>
|
||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||
{Math.round(selectedItem.confidence * 100)}%
|
||
</Typography>
|
||
</Box>
|
||
{selectedItem.probability != null && (
|
||
<Box>
|
||
<Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>Wahrscheinlichkeit</Typography>
|
||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||
{Math.round(selectedItem.probability * 100)}%
|
||
</Typography>
|
||
</Box>
|
||
)}
|
||
<Box>
|
||
<Typography variant="caption" color="text.secondary" sx={{ 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" sx={{ fontWeight: 600, display: 'block', mb: 1 }} color="text.secondary">
|
||
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>
|
||
)
|
||
}
|