feat: F013 match center decision workspace

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/match-card/MatchCardViewModel.ts

@@ -8,6 +8,7 @@ export type MatchCardActionType =
   | 'ADD_COMPARE'
   | 'SAVE_SHORTLIST'
   | 'SEND_REVIEW'
+  | 'APPROVE'
   | 'REJECT'
   | 'REQUEST_DATA'
 

src/components/match-center/MatchBriefingPanel.tsx

@@ -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>
+  )
+}

src/components/match-center/MatchCenterEmptyState.tsx

@@ -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>
+  )
+}

src/components/match-center/MatchCenterSkeleton.tsx

@@ -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>
+      ))}
+    </>
+  )
+}

src/components/match-center/MatchStatusBadge.tsx

@@ -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 }} />
+  )
+}

src/components/match-center/NeedSelectionPanel.tsx

@@ -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>
+  )
+}

src/components/match-center/PropertySelectionPanel.tsx

@@ -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>
+  )
+}

src/components/match-center/index.ts

@@ -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'

src/pages/supply/MatchCenter.tsx

@@ -1,283 +1,73 @@
+import { Box, Paper, Typography } from '@mui/material'
+import { useMatches } from '../../hooks/useMatches'
 import {
-  Box,
+  PropertySelectionPanel,
-  Button,
+  NeedSelectionPanel,
-  Card,
+  MatchBriefingPanel,
-  Chip,
+} from '../../components/match-center'
-  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 {
+const PANEL_HEADER_SX = {
-  switch (strength) {
+  px: 2,
-    case MatchStrength.STRONG: return 'Stark'
+  py: 1.5,
-    case MatchStrength.MODERATE: return 'Mittel'
+  borderBottom: '1px solid #e2e8f0',
-    case MatchStrength.WEAK: return 'Schwach'
+  bgcolor: 'white',
-  }
+  position: 'sticky' as const,
-}
+  top: 0,
-
+  zIndex: 1,
-function getMatchStrengthColor(strength: MatchStrength): 'success' | 'warning' | 'error' {
+  flexShrink: 0,
-  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 { data: matches = [] } = useMatches()
-
-  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>
+    <Box sx={{ display: 'flex', height: 'calc(100vh - 64px)', overflow: 'hidden' }}>
-      {/* Page Header */}
+      {/* Left: Properties */}
-      <Box sx={{ bgcolor: 'white', borderBottom: '1px solid', borderColor: 'divider', px: 3, py: 2 }} className="flex items-center justify-between">
+      <Paper elevation={0} sx={{
-        <Box>
+        width: 260,
-          <Box className="flex items-center gap-2">
+        flexShrink: 0,
-            <Typography variant="h5" sx={{ fontWeight: 700 }} color="text.primary">Match Center</Typography>
+        display: 'flex',
-            <Chip label={`${matches.length} Matches`} size="small" sx={{ bgcolor: '#1e3a5f', color: 'white', fontWeight: 700 }} />
+        flexDirection: 'column',
-          </Box>
+        borderRadius: 0,
-          <Typography variant="body2" color="text.secondary">KI-gestützte Objekt-Bedarfs-Analyse</Typography>
+        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 */}
+      {/* Right: Needs */}
-      <Box sx={{ px: 3, py: 3 }} className="flex flex-col gap-3">
+      <Paper elevation={0} sx={{
-
+        width: 260,
-        {/* Filter Chips */}
+        flexShrink: 0,
-        <Box className="flex items-center gap-2">
+        display: 'flex',
-          {strengthFilters.map(f => (
+        flexDirection: 'column',
-            <Chip
+        borderRadius: 0,
-              key={f.value}
+        borderLeft: '1px solid #e2e8f0',
-              label={f.label}
+        overflow: 'hidden',
-              variant={filterStrength === f.value ? 'filled' : 'outlined'}
+      }}>
-              size="small"
+        <Box sx={PANEL_HEADER_SX}>
-              onClick={() => setFilterStrength(f.value)}
+          <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>Bedarfe</Typography>
-              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>
-
+        <NeedSelectionPanel matches={matches} />
-        {/* Match Cards */}
+      </Paper>
-        {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>
     </Box>
   )
 }

src/stores/matchCenterStore.ts

@@ -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 }),
+}))