Benjamin Sutter
284 lines
11 KiB
TypeScript
284 lines
11 KiB
TypeScript
import {
|
|
Box,
|
|
Button,
|
|
Card,
|
|
Chip,
|
|
Divider,
|
|
LinearProgress,
|
|
Typography,
|
|
} from '@mui/material'
|
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
|
import { Building2 } from 'lucide-react'
|
|
import { useState } from 'react'
|
|
import { EmptyState, ErrorState, LoadingPage } from '../../components/ui'
|
|
import { matchService } from '../../services/matchService'
|
|
import { propertyService } from '../../services/propertyService'
|
|
import { needService } from '../../services/needService'
|
|
import { MatchStrength, RiskLevel } from '../../domain/enums'
|
|
|
|
function getMatchStrengthLabel(strength: MatchStrength): string {
|
|
switch (strength) {
|
|
case MatchStrength.STRONG: return 'Stark'
|
|
case MatchStrength.MODERATE: return 'Mittel'
|
|
case MatchStrength.WEAK: return 'Schwach'
|
|
}
|
|
}
|
|
|
|
function getMatchStrengthColor(strength: MatchStrength): 'success' | 'warning' | 'error' {
|
|
switch (strength) {
|
|
case MatchStrength.STRONG: return 'success'
|
|
case MatchStrength.MODERATE: return 'warning'
|
|
case MatchStrength.WEAK: return 'error'
|
|
}
|
|
}
|
|
|
|
function getScoreColor(strength: MatchStrength): string {
|
|
switch (strength) {
|
|
case MatchStrength.STRONG: return '#1a7a4a'
|
|
case MatchStrength.MODERATE: return '#d97706'
|
|
case MatchStrength.WEAK: return '#c0392b'
|
|
}
|
|
}
|
|
|
|
function getConfidenceColor(score: number): 'success' | 'primary' | 'warning' {
|
|
if (score >= 0.85) return 'success'
|
|
if (score >= 0.65) return 'primary'
|
|
return 'warning'
|
|
}
|
|
|
|
function getConfidenceLabel(score: number): string {
|
|
if (score >= 0.85) return 'Hoch'
|
|
if (score >= 0.65) return 'Mittel'
|
|
return 'Niedrig'
|
|
}
|
|
|
|
function getRiskLabel(level: RiskLevel): string {
|
|
switch (level) {
|
|
case RiskLevel.LOW: return 'Niedriges Risiko'
|
|
case RiskLevel.MEDIUM: return 'Mittleres Risiko'
|
|
case RiskLevel.HIGH: return 'Hohes Risiko'
|
|
case RiskLevel.CRITICAL: return 'Kritisches Risiko'
|
|
}
|
|
}
|
|
|
|
function getRiskColor(level: RiskLevel): 'success' | 'warning' | 'error' {
|
|
switch (level) {
|
|
case RiskLevel.LOW: return 'success'
|
|
case RiskLevel.MEDIUM: return 'warning'
|
|
case RiskLevel.HIGH: return 'error'
|
|
case RiskLevel.CRITICAL: return 'error'
|
|
}
|
|
}
|
|
|
|
export default function MatchCenter() {
|
|
const [filterStrength, setFilterStrength] = useState<MatchStrength | 'ALL'>('ALL')
|
|
|
|
const queryClient = useQueryClient()
|
|
|
|
const { data: matchResp, isLoading: matchLoading, error: matchError } = useQuery({
|
|
queryKey: ['matches'],
|
|
queryFn: () => matchService.getAll(),
|
|
})
|
|
const { data: propResp, isLoading: propLoading, error: propError } = useQuery({
|
|
queryKey: ['properties'],
|
|
queryFn: () => propertyService.getAll(),
|
|
})
|
|
const { data: needResp, isLoading: needLoading, error: needError } = useQuery({
|
|
queryKey: ['needs'],
|
|
queryFn: () => needService.getAll(),
|
|
})
|
|
|
|
const approveMutation = useMutation({
|
|
mutationFn: (matchId: string) => matchService.approve(matchId, 'admin@ideal-sharing.ch'),
|
|
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['matches'] }),
|
|
})
|
|
|
|
if (matchLoading || propLoading || needLoading) return <LoadingPage />
|
|
if (matchError || propError || needError) return <ErrorState />
|
|
|
|
const matches = matchResp?.data ?? []
|
|
const properties = propResp?.data ?? []
|
|
const needs = needResp?.data ?? []
|
|
|
|
const filtered = filterStrength === 'ALL'
|
|
? matches
|
|
: matches.filter(m => m.matchStrength === filterStrength)
|
|
|
|
const sortedFiltered = [...filtered].sort((a, b) => b.matchScore - a.matchScore)
|
|
|
|
const strengthFilters: { value: MatchStrength | 'ALL'; label: string }[] = [
|
|
{ value: 'ALL', label: 'Alle' },
|
|
{ value: MatchStrength.STRONG, label: 'Stark' },
|
|
{ value: MatchStrength.MODERATE, label: 'Mittel' },
|
|
{ value: MatchStrength.WEAK, label: 'Schwach' },
|
|
]
|
|
|
|
return (
|
|
<Box>
|
|
{/* Page Header */}
|
|
<Box sx={{ bgcolor: 'white', borderBottom: '1px solid', borderColor: 'divider', px: 3, py: 2 }} className="flex items-center justify-between">
|
|
<Box>
|
|
<Box className="flex items-center gap-2">
|
|
<Typography variant="h5" fontWeight={700} color="text.primary">Match Center</Typography>
|
|
<Chip label={`${matches.length} Matches`} size="small" sx={{ bgcolor: '#1e3a5f', color: 'white', fontWeight: 700 }} />
|
|
</Box>
|
|
<Typography variant="body2" color="text.secondary">KI-gestützte Objekt-Bedarfs-Analyse</Typography>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Content */}
|
|
<Box sx={{ px: 3, py: 3 }} className="flex flex-col gap-3">
|
|
|
|
{/* Filter Chips */}
|
|
<Box className="flex items-center gap-2">
|
|
{strengthFilters.map(f => (
|
|
<Chip
|
|
key={f.value}
|
|
label={f.label}
|
|
variant={filterStrength === f.value ? 'filled' : 'outlined'}
|
|
size="small"
|
|
onClick={() => setFilterStrength(f.value)}
|
|
color={
|
|
f.value === MatchStrength.STRONG ? 'success'
|
|
: f.value === MatchStrength.MODERATE ? 'warning'
|
|
: f.value === MatchStrength.WEAK ? 'error'
|
|
: 'default'
|
|
}
|
|
sx={{ cursor: 'pointer', fontWeight: filterStrength === f.value ? 700 : 400 }}
|
|
/>
|
|
))}
|
|
</Box>
|
|
|
|
{/* Match Cards */}
|
|
{sortedFiltered.length === 0 ? (
|
|
<EmptyState title="Keine Matches gefunden" description="Passen Sie den Filter an." />
|
|
) : (
|
|
<Box className="flex flex-col gap-4">
|
|
{sortedFiltered.map(match => {
|
|
const property = properties.find(p => p.id === match.propertyId)
|
|
const need = needs.find(n => n.id === match.needId)
|
|
|
|
return (
|
|
<Card key={match.id} sx={{ elevation: 1, p: 2.5 }}>
|
|
<Box className="flex gap-4">
|
|
{/* Left column: score */}
|
|
<Box sx={{ width: 80, flexShrink: 0, textAlign: 'center' }} className="flex flex-col items-center gap-1">
|
|
<Typography variant="h3" fontWeight={700} sx={{ color: getScoreColor(match.matchStrength) }}>
|
|
{match.matchScore}
|
|
</Typography>
|
|
<Typography variant="caption" color="text.secondary">/ 100</Typography>
|
|
<Chip
|
|
label={getMatchStrengthLabel(match.matchStrength)}
|
|
color={getMatchStrengthColor(match.matchStrength)}
|
|
size="small"
|
|
/>
|
|
</Box>
|
|
|
|
{/* Center column: details */}
|
|
<Box className="flex-1 flex flex-col gap-2">
|
|
{/* Property info */}
|
|
<Box className="flex items-center gap-1">
|
|
<Building2 size={16} color="#1e3a5f" />
|
|
<Typography variant="h6" fontWeight={600}>
|
|
{property?.title ?? match.propertyId}
|
|
</Typography>
|
|
</Box>
|
|
{need && (
|
|
<Typography variant="body2" color="text.secondary">
|
|
{need.companyName} — {need.assetType}
|
|
</Typography>
|
|
)}
|
|
|
|
<Divider />
|
|
|
|
{/* Positive factors */}
|
|
<Box className="flex flex-col gap-1">
|
|
{match.positiveFactors.slice(0, 3).map((f, i) => (
|
|
<Box key={i} className="flex items-center gap-2">
|
|
<Typography variant="caption" sx={{ color: '#1a7a4a', fontWeight: 600 }}>
|
|
✓ {f.criterion}: {Math.round(f.score)}%
|
|
</Typography>
|
|
<Box sx={{ width: 60 }}>
|
|
<LinearProgress
|
|
variant="determinate"
|
|
value={f.score}
|
|
color="success"
|
|
sx={{ height: 4, borderRadius: 2 }}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
|
|
{/* Negative factors */}
|
|
{match.negativeFactors.slice(0, 2).map((f, i) => (
|
|
<Typography key={i} variant="caption" sx={{ color: '#c0392b' }}>
|
|
✗ {f.criterion}
|
|
</Typography>
|
|
))}
|
|
|
|
{/* Tradeoffs */}
|
|
{match.tradeoffs.length > 0 && (
|
|
<Box>
|
|
{match.tradeoffs.slice(0, 2).map((t, i) => (
|
|
<Typography key={i} variant="caption" sx={{ color: '#d97706' }}>
|
|
⚠ {t.concern}
|
|
</Typography>
|
|
))}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
|
|
{/* Right column: actions */}
|
|
<Box sx={{ width: 160, flexShrink: 0, textAlign: 'right' }} className="flex flex-col gap-2 items-end">
|
|
<Chip
|
|
label={`Konfidenz: ${getConfidenceLabel(match.confidenceLevel)}`}
|
|
color={getConfidenceColor(match.confidenceLevel)}
|
|
size="small"
|
|
/>
|
|
<Chip
|
|
label={getRiskLabel(match.riskLevel)}
|
|
color={getRiskColor(match.riskLevel)}
|
|
size="small"
|
|
variant="outlined"
|
|
/>
|
|
<Button
|
|
variant="outlined"
|
|
size="small"
|
|
fullWidth
|
|
disabled
|
|
>
|
|
Details
|
|
</Button>
|
|
{match.isApproved ? (
|
|
<Chip
|
|
label="✓ Genehmigt"
|
|
color="success"
|
|
size="small"
|
|
sx={{ width: '100%', justifyContent: 'center' }}
|
|
/>
|
|
) : (
|
|
<Button
|
|
variant="contained"
|
|
size="small"
|
|
fullWidth
|
|
color="primary"
|
|
sx={{ bgcolor: '#1e3a5f' }}
|
|
onClick={() => approveMutation.mutate(match.id)}
|
|
disabled={approveMutation.isPending}
|
|
>
|
|
Genehmigen
|
|
</Button>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
</Card>
|
|
)
|
|
})}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|