feat: F011 match card system

- MatchCardViewModel: typed view model decoupling card from raw API data - Sub-components: MatchCardHeader, MatchScoreDisplay, MatchReasonList, TradeoffList, MatchDataQualitySummary, MatchActionToolbar, MatchCardSkeleton, MatchCardRestrictedState - 4 variants: MatchCardCompact, MatchCardExpanded, MatchCardReview, MatchCardCompareMini - MatchCard: main entry point with variant prop - matchCardAdapter: buildMatchCardViewModel() converts UnifiedMatchResult -> ViewModel - UnifiedResultCard: now thin wrapper using MatchCardCompact via adapter - FUTURE_AVAILABILITY always shows non-dismissable disclaimer Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-16 13:39:35 +02:00
parent 307b450807
commit ea221def74
17 changed files with 972 additions and 147 deletions
@@ -0,0 +1,60 @@
+import { Box, Chip } from '@mui/material'
+import { MatchScoreDisplay } from './MatchScoreDisplay'
+import type { MatchCardViewModel } from './MatchCardViewModel'
+
+const RESULT_TYPE_META: Record<string, { label: string; color: string }> = {
+  VERIFIED_PORTFOLIO:  { label: 'Verified Portfolio', color: '#1e3a5f' },
+  EXTERNAL_MARKET:     { label: 'Marktinserat',       color: '#d97706' },
+  FUTURE_AVAILABILITY: { label: 'Zukunftssignal',     color: '#7c3aed' },
+}
+
+function confidenceColor(score: number): string {
+  if (score >= 0.75) return '#1a7a4a'
+  if (score >= 0.55) return '#d97706'
+  return '#c0392b'
+}
+
+interface Props {
+  vm: MatchCardViewModel
+  compact?: boolean
+}
+
+export function MatchCardHeader({ vm, compact }: Props) {
+  const rt = RESULT_TYPE_META[vm.resultType] ?? { label: vm.resultType, color: '#64748b' }
+  const confPct = Math.round(vm.confidenceScore * 100)
+
+  const topRisk = vm.risks.length > 0 ? vm.risks[0].level : undefined
+  const showRiskBadge = topRisk && topRisk !== 'LOW'
+  const riskLabel = topRisk === 'CRITICAL' ? 'Kritisch' : topRisk === 'HIGH' ? 'Hohes Risiko' : 'Mittleres Risiko'
+  const riskColor: 'error' | 'warning' = (topRisk === 'HIGH' || topRisk === 'CRITICAL') ? 'error' : 'warning'
+
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1, flexWrap: 'wrap' }}>
+      {/* Score — leftmost, most prominent */}
+      <MatchScoreDisplay score={vm.matchScore} size={compact ? 'sm' : 'md'} />
+
+      {/* Badges: resultType → assetType → confidence → availability → risk */}
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, alignItems: 'center' }}>
+        <Chip
+          label={rt.label}
+          size="small"
+          sx={{ bgcolor: rt.color, color: 'white', fontWeight: 600, fontSize: 11 }}
+        />
+        {vm.assetType && (
+          <Chip label={vm.assetType} size="small" variant="outlined" sx={{ fontSize: 11 }} />
+        )}
+        <Chip
+          label={`${confPct}% Konfidenz`}
+          size="small"
+          sx={{ bgcolor: confidenceColor(vm.confidenceScore), color: 'white', fontSize: 11 }}
+        />
+        {vm.availabilityLabel && (
+          <Chip label={vm.availabilityLabel} size="small" variant="outlined" sx={{ fontSize: 11 }} />
+        )}
+        {showRiskBadge && (
+          <Chip label={riskLabel} size="small" color={riskColor} variant="outlined" />
+        )}
+      </Box>
+    </Box>
+  )
+}