feat: F013 match center decision workspace
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
@@ -8,6 +8,7 @@ export type MatchCardActionType =
|
||||
| 'ADD_COMPARE'
|
||||
| 'SAVE_SHORTLIST'
|
||||
| 'SEND_REVIEW'
|
||||
| 'APPROVE'
|
||||
| 'REJECT'
|
||||
| 'REQUEST_DATA'
|
||||
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
import { Box, CircularProgress, Typography } from '@mui/material'
|
||||
import { useNavigate } from 'react-router'
|
||||
import { useMatchesByProperty, useApproveMatch } from '../../hooks/useMatches'
|
||||
import { usePropertyById } from '../../hooks/useProperties'
|
||||
import { useMatchCenterStore } from '../../stores/matchCenterStore'
|
||||
import { useCompareStore } from '../../stores/compareStore'
|
||||
import { MatchCardExpanded } from '../match-card/MatchCardExpanded'
|
||||
import { buildMatchCardViewModel } from '../../features/matching/matchCardAdapter'
|
||||
import { reviewService } from '../../services/reviewService'
|
||||
import { MatchCenterEmptyState } from './MatchCenterEmptyState'
|
||||
import { MatchStatusBadge } from './MatchStatusBadge'
|
||||
import type { MatchCardAction } from '../match-card/MatchCardViewModel'
|
||||
import type { VerifiedPortfolioResult } from '../../domain/unifiedResult'
|
||||
|
||||
export function MatchBriefingPanel() {
|
||||
const navigate = useNavigate()
|
||||
const { selectedPropertyId, selectedNeedId } = useMatchCenterStore()
|
||||
const { addToCompare } = useCompareStore()
|
||||
const approveMatch = useApproveMatch()
|
||||
|
||||
const { data: matches = [], isLoading: matchesLoading } = useMatchesByProperty(selectedPropertyId ?? '')
|
||||
const { data: property = null, isLoading: propLoading } = usePropertyById(selectedPropertyId)
|
||||
|
||||
if (!selectedPropertyId && !selectedNeedId) return <MatchCenterEmptyState context="select-both" />
|
||||
if (selectedPropertyId && !selectedNeedId) return <MatchCenterEmptyState context="no-need" />
|
||||
if (!selectedPropertyId && selectedNeedId) return <MatchCenterEmptyState context="no-property" />
|
||||
|
||||
if (matchesLoading || propLoading) {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
const match = matches.find(m => m.needId === selectedNeedId) ?? null
|
||||
|
||||
if (!match || !property) return <MatchCenterEmptyState context="no-match" />
|
||||
|
||||
const result: VerifiedPortfolioResult = {
|
||||
resultType: 'VERIFIED_PORTFOLIO',
|
||||
matchId: match.id,
|
||||
needId: match.needId,
|
||||
matchScore: match.matchScore,
|
||||
match,
|
||||
property,
|
||||
}
|
||||
|
||||
const actions: MatchCardAction[] = [
|
||||
{
|
||||
id: 'approve',
|
||||
label: 'Genehmigen',
|
||||
actionType: 'APPROVE',
|
||||
variant: 'primary',
|
||||
onClick: () => approveMatch.mutate(match.id),
|
||||
},
|
||||
{
|
||||
id: 'review',
|
||||
label: 'Zur Prüfung',
|
||||
actionType: 'SEND_REVIEW',
|
||||
variant: 'secondary',
|
||||
onClick: () => { reviewService.createReviewTask(match.id) },
|
||||
},
|
||||
{
|
||||
id: 'compare',
|
||||
label: 'Vergleichen',
|
||||
actionType: 'ADD_COMPARE',
|
||||
variant: 'secondary',
|
||||
onClick: () => { addToCompare(property.id); navigate('/demand/compare') },
|
||||
},
|
||||
{
|
||||
id: 'details',
|
||||
label: 'Details',
|
||||
actionType: 'OPEN_DETAIL',
|
||||
variant: 'secondary',
|
||||
onClick: () => navigate(`/demand/results/${match.id}`),
|
||||
},
|
||||
]
|
||||
|
||||
const vm = buildMatchCardViewModel(result, actions)
|
||||
|
||||
return (
|
||||
<Box sx={{ overflowY: 'auto', flex: 1, p: 2.5 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>Match-Briefing</Typography>
|
||||
<MatchStatusBadge status={match.status} />
|
||||
</Box>
|
||||
<MatchCardExpanded vm={vm} />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import { Box, Typography } from '@mui/material'
|
||||
import { Building2, Users, ArrowLeftRight } from 'lucide-react'
|
||||
|
||||
type EmptyContext = 'select-both' | 'no-need' | 'no-property' | 'no-match'
|
||||
|
||||
const META = {
|
||||
'select-both': {
|
||||
icon: <ArrowLeftRight size={32} color="#94a3b8" />,
|
||||
title: 'Objekt und Bedarf wählen',
|
||||
desc: 'Wählen Sie ein Objekt links und einen Bedarf rechts, um das Match-Briefing zu sehen.',
|
||||
},
|
||||
'no-need': {
|
||||
icon: <Users size={32} color="#94a3b8" />,
|
||||
title: 'Keinen Bedarf ausgewählt',
|
||||
desc: 'Wählen Sie rechts einen Bedarf aus.',
|
||||
},
|
||||
'no-property': {
|
||||
icon: <Building2 size={32} color="#94a3b8" />,
|
||||
title: 'Kein Objekt ausgewählt',
|
||||
desc: 'Wählen Sie links ein Objekt aus.',
|
||||
},
|
||||
'no-match': {
|
||||
icon: <ArrowLeftRight size={32} color="#94a3b8" />,
|
||||
title: 'Kein Match gefunden',
|
||||
desc: 'Zwischen diesem Objekt und Bedarf existiert kein berechnetes Match.',
|
||||
},
|
||||
}
|
||||
|
||||
export function MatchCenterEmptyState({ context }: { context: EmptyContext }) {
|
||||
const { icon, title, desc } = META[context]
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1.5, py: 8, px: 3 }}>
|
||||
{icon}
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 600 }} color="text.secondary">{title}</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center' }}>{desc}</Typography>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { Box, Skeleton } from '@mui/material'
|
||||
|
||||
export function MatchCenterSkeleton({ count = 4 }: { count?: number }) {
|
||||
return (
|
||||
<>
|
||||
{Array.from({ length: count }).map((_, i) => (
|
||||
<Box key={i} sx={{ p: 1.5, borderBottom: '1px solid #f1f5f9' }}>
|
||||
<Skeleton variant="text" width="60%" sx={{ fontSize: '1rem', mb: 0.5 }} />
|
||||
<Skeleton variant="text" width="40%" sx={{ fontSize: '0.75rem' }} />
|
||||
<Skeleton variant="rounded" width={50} height={18} sx={{ mt: 0.5 }} />
|
||||
</Box>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Chip } from '@mui/material'
|
||||
import type { MatchStatus } from '../../domain/enums'
|
||||
|
||||
const STATUS_META: Record<string, { label: string; color: string }> = {
|
||||
PENDING_REVIEW: { label: 'Ausstehend', color: '#d97706' },
|
||||
APPROVED: { label: 'Genehmigt', color: '#1a7a4a' },
|
||||
REJECTED: { label: 'Abgelehnt', color: '#c0392b' },
|
||||
SHORTLISTED: { label: 'Shortlist', color: '#1e3a5f' },
|
||||
}
|
||||
|
||||
export function MatchStatusBadge({ status }: { status?: MatchStatus }) {
|
||||
if (!status) return null
|
||||
const meta = STATUS_META[status] ?? { label: status, color: '#64748b' }
|
||||
return (
|
||||
<Chip label={meta.label} size="small"
|
||||
sx={{ bgcolor: meta.color, color: 'white', fontWeight: 600, fontSize: 11 }} />
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { Box, Chip, Typography } from '@mui/material'
|
||||
import { useNeeds } from '../../hooks/useNeeds'
|
||||
import { useMatchCenterStore } from '../../stores/matchCenterStore'
|
||||
import { MatchCenterSkeleton } from './MatchCenterSkeleton'
|
||||
import type { Match } from '../../domain/match'
|
||||
import type { Need } from '../../domain/need'
|
||||
|
||||
interface Props { matches: Match[] }
|
||||
|
||||
export function NeedSelectionPanel({ matches }: Props) {
|
||||
const { data: needs = [], isLoading } = useNeeds()
|
||||
const { selectedNeedId, setSelectedNeed } = useMatchCenterStore()
|
||||
|
||||
if (isLoading) return <MatchCenterSkeleton />
|
||||
|
||||
return (
|
||||
<Box sx={{ overflowY: 'auto', flex: 1 }}>
|
||||
{needs.map((need: Need) => {
|
||||
const pendingCount = matches.filter(m => m.needId === need.id && m.status === 'PENDING_REVIEW').length
|
||||
const isSelected = selectedNeedId === need.id
|
||||
return (
|
||||
<Box
|
||||
key={need.id}
|
||||
onClick={() => setSelectedNeed(isSelected ? null : need.id)}
|
||||
sx={{
|
||||
p: 1.5,
|
||||
cursor: 'pointer',
|
||||
borderBottom: '1px solid #f1f5f9',
|
||||
borderRight: isSelected ? '3px solid #d97706' : '3px solid transparent',
|
||||
bgcolor: isSelected ? '#fef3c7' : 'transparent',
|
||||
'&:hover': { bgcolor: isSelected ? '#fef3c7' : '#f8fafc' },
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 0.5 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, lineHeight: 1.3, flex: 1, mr: 0.5 }}>
|
||||
{need.companyName}
|
||||
</Typography>
|
||||
{pendingCount > 0 && (
|
||||
<Chip label={pendingCount} size="small"
|
||||
sx={{ bgcolor: '#d97706', color: 'white', fontSize: 10, height: 18, minWidth: 22 }} />
|
||||
)}
|
||||
</Box>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
|
||||
{need.requiredArea.min}–{need.requiredArea.max} m² · {need.preferredLocations.slice(0, 2).join(', ')}
|
||||
</Typography>
|
||||
<Chip label={need.assetType} size="small" sx={{ mt: 0.5, fontSize: 10, height: 18 }} />
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import { Box, Chip, Typography } from '@mui/material'
|
||||
import { useProperties } from '../../hooks/useProperties'
|
||||
import { useMatchCenterStore } from '../../stores/matchCenterStore'
|
||||
import { MatchCenterSkeleton } from './MatchCenterSkeleton'
|
||||
import type { Match } from '../../domain/match'
|
||||
|
||||
interface Props { matches: Match[] }
|
||||
|
||||
export function PropertySelectionPanel({ matches }: Props) {
|
||||
const { data: properties = [], isLoading } = useProperties()
|
||||
const { selectedPropertyId, setSelectedProperty } = useMatchCenterStore()
|
||||
|
||||
if (isLoading) return <MatchCenterSkeleton />
|
||||
|
||||
return (
|
||||
<Box sx={{ overflowY: 'auto', flex: 1 }}>
|
||||
{properties.map(prop => {
|
||||
const pendingCount = matches.filter(m => m.propertyId === prop.id && m.status === 'PENDING_REVIEW').length
|
||||
const isSelected = selectedPropertyId === prop.id
|
||||
return (
|
||||
<Box
|
||||
key={prop.id}
|
||||
onClick={() => setSelectedProperty(isSelected ? null : prop.id)}
|
||||
sx={{
|
||||
p: 1.5,
|
||||
cursor: 'pointer',
|
||||
borderBottom: '1px solid #f1f5f9',
|
||||
borderLeft: isSelected ? '3px solid #1e3a5f' : '3px solid transparent',
|
||||
bgcolor: isSelected ? '#eff6ff' : 'transparent',
|
||||
'&:hover': { bgcolor: isSelected ? '#eff6ff' : '#f8fafc' },
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 0.5 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, lineHeight: 1.3, flex: 1, mr: 0.5 }}>
|
||||
{prop.title}
|
||||
</Typography>
|
||||
{pendingCount > 0 && (
|
||||
<Chip label={pendingCount} size="small"
|
||||
sx={{ bgcolor: '#d97706', color: 'white', fontSize: 10, height: 18, minWidth: 22 }} />
|
||||
)}
|
||||
</Box>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
|
||||
{prop.location.city} · {prop.areaSqm} m²
|
||||
</Typography>
|
||||
<Chip label={prop.assetType} size="small" sx={{ mt: 0.5, fontSize: 10, height: 18 }} />
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export { MatchStatusBadge } from './MatchStatusBadge'
|
||||
export { MatchCenterEmptyState } from './MatchCenterEmptyState'
|
||||
export { MatchCenterSkeleton } from './MatchCenterSkeleton'
|
||||
export { PropertySelectionPanel } from './PropertySelectionPanel'
|
||||
export { NeedSelectionPanel } from './NeedSelectionPanel'
|
||||
export { MatchBriefingPanel } from './MatchBriefingPanel'
|
||||
@@ -1,283 +1,73 @@
|
||||
import { Box, Paper, Typography } from '@mui/material'
|
||||
import { useMatches } from '../../hooks/useMatches'
|
||||
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'
|
||||
PropertySelectionPanel,
|
||||
NeedSelectionPanel,
|
||||
MatchBriefingPanel,
|
||||
} from '../../components/match-center'
|
||||
|
||||
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'
|
||||
}
|
||||
const PANEL_HEADER_SX = {
|
||||
px: 2,
|
||||
py: 1.5,
|
||||
borderBottom: '1px solid #e2e8f0',
|
||||
bgcolor: 'white',
|
||||
position: 'sticky' as const,
|
||||
top: 0,
|
||||
zIndex: 1,
|
||||
flexShrink: 0,
|
||||
}
|
||||
|
||||
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' },
|
||||
]
|
||||
const { data: matches = [] } = useMatches()
|
||||
|
||||
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" sx={{ 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 sx={{ display: 'flex', height: 'calc(100vh - 64px)', overflow: 'hidden' }}>
|
||||
{/* Left: Properties */}
|
||||
<Paper elevation={0} sx={{
|
||||
width: 260,
|
||||
flexShrink: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
borderRadius: 0,
|
||||
borderRight: '1px solid #e2e8f0',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<Box sx={PANEL_HEADER_SX}>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 700 }}>Objekte</Typography>
|
||||
<Typography variant="caption" color="text.secondary">{matches.length} Matches gesamt</Typography>
|
||||
</Box>
|
||||
<PropertySelectionPanel matches={matches} />
|
||||
</Paper>
|
||||
|
||||
{/* Center: Match Briefing */}
|
||||
<Box sx={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
bgcolor: '#f8fafc',
|
||||
}}>
|
||||
<Box sx={PANEL_HEADER_SX}>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 700 }}>Match-Briefing</Typography>
|
||||
</Box>
|
||||
<MatchBriefingPanel />
|
||||
</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 }}
|
||||
/>
|
||||
))}
|
||||
{/* Right: Needs */}
|
||||
<Paper elevation={0} sx={{
|
||||
width: 260,
|
||||
flexShrink: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
borderRadius: 0,
|
||||
borderLeft: '1px solid #e2e8f0',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<Box sx={PANEL_HEADER_SX}>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 700 }}>Bedarfe</Typography>
|
||||
</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" sx={{ fontWeight: 700, color: getScoreColor(match.matchStrength) }}>
|
||||
{match.matchScore}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">/ 100</Typography>
|
||||
<Chip
|
||||
label={getMatchStrengthLabel(match.matchStrength)}
|
||||
sx={{ 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" sx={{ 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)}`}
|
||||
sx={{ color: getConfidenceColor(match.confidenceLevel) }}
|
||||
size="small"
|
||||
/>
|
||||
<Chip
|
||||
label={getRiskLabel(match.riskLevel)}
|
||||
sx={{ 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>
|
||||
<NeedSelectionPanel matches={matches} />
|
||||
</Paper>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
import { create } from 'zustand'
|
||||
|
||||
interface MatchCenterState {
|
||||
selectedPropertyId: string | null
|
||||
selectedNeedId: string | null
|
||||
setSelectedProperty: (id: string | null) => void
|
||||
setSelectedNeed: (id: string | null) => void
|
||||
clearSelection: () => void
|
||||
}
|
||||
|
||||
export const useMatchCenterStore = create<MatchCenterState>((set) => ({
|
||||
selectedPropertyId: null,
|
||||
selectedNeedId: null,
|
||||
setSelectedProperty: (id) => set({ selectedPropertyId: id }),
|
||||
setSelectedNeed: (id) => set({ selectedNeedId: id }),
|
||||
clearSelection: () => set({ selectedPropertyId: null, selectedNeedId: null }),
|
||||
}))
|
||||
Reference in New Issue
Block a user