feat: F013 match center decision workspace

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-16 14:11:28 +02:00
parent 7cf8d8ba72
commit 2cb29a1920
10 changed files with 348 additions and 269 deletions
@@ -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'