feat: F014 compare view — side-by-side decision table with AI summary

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-16 14:28:06 +02:00
parent 2cb29a1920
commit 2753d1717c
14 changed files with 884 additions and 350 deletions
@@ -0,0 +1,133 @@
+import { useState } from 'react'
+import { Alert, Box, Chip, CircularProgress, Collapse, Typography } from '@mui/material'
+import { ChevronDown, ChevronUp, Trophy, TrendingDown, ShieldCheck, AlertTriangle, Info, ArrowRight } from 'lucide-react'
+import type { ComparisonSummary } from '../../services/aiService'
+
+interface Props {
+  summary?: ComparisonSummary
+  isLoading: boolean
+}
+
+export function AICompareSummary({ summary, isLoading }: Props) {
+  const [open, setOpen] = useState(true)
+
+  return (
+    <Box sx={{ mb: 2, border: '1px solid #e2e8f0', borderRadius: 1, overflow: 'hidden' }}>
+      <Box
+        onClick={() => setOpen(v => !v)}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          px: 2,
+          py: 1.25,
+          bgcolor: '#f8fafc',
+          cursor: 'pointer',
+          '&:hover': { bgcolor: '#f1f5f9' },
+        }}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>AI Vergleichs-Zusammenfassung</Typography>
+          <Chip label="Beta" size="small" sx={{ fontSize: 10, bgcolor: '#ede9fe', color: '#6d28d9' }} />
+        </Box>
+        {open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+      </Box>
+
+      <Collapse in={open}>
+        <Box sx={{ p: 2 }}>
+          {isLoading && (
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 1 }}>
+              <CircularProgress size={16} />
+              <Typography variant="body2" color="text.secondary">Analyse wird erstellt…</Typography>
+            </Box>
+          )}
+
+          {!isLoading && summary && (
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+              {/* Strongest option */}
+              <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
+                <Trophy size={16} color="#1a7a4a" style={{ flexShrink: 0, marginTop: 2 }} />
+                <Box>
+                  <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Stärkstes Match</Typography>
+                  <Typography variant="body2" sx={{ fontWeight: 600 }}>{summary.strongestOption.label}</Typography>
+                  <Typography variant="caption" color="text.secondary">{summary.strongestOption.reason}</Typography>
+                </Box>
+              </Box>
+
+              {/* Best value */}
+              {summary.bestValue && (
+                <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
+                  <TrendingDown size={16} color="#1e3a5f" style={{ flexShrink: 0, marginTop: 2 }} />
+                  <Box>
+                    <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Bestes Preis-Leistungs-Verhältnis</Typography>
+                    <Typography variant="body2" sx={{ fontWeight: 600 }}>{summary.bestValue.label}</Typography>
+                    <Typography variant="caption" color="text.secondary">{summary.bestValue.reason}</Typography>
+                  </Box>
+                </Box>
+              )}
+
+              {/* Highest confidence */}
+              <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
+                <ShieldCheck size={16} color="#0891b2" style={{ flexShrink: 0, marginTop: 2 }} />
+                <Box>
+                  <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Höchste Datenkonfidenz</Typography>
+                  <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                    {summary.highestConfidence.label}
+                    <Typography component="span" variant="caption" color="text.secondary" sx={{ ml: 0.5 }}>
+                      ({Math.round(summary.highestConfidence.confidenceLevel * 100)}%)
+                    </Typography>
+                  </Typography>
+                </Box>
+              </Box>
+
+              {/* Tradeoffs */}
+              {summary.biggestTradeoffs.length > 0 && (
+                <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
+                  <AlertTriangle size={16} color="#d97706" style={{ flexShrink: 0, marginTop: 2 }} />
+                  <Box>
+                    <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Wichtigste Abwägungen</Typography>
+                    {summary.biggestTradeoffs.map((t, i) => (
+                      <Typography key={i} variant="caption" color="text.secondary" sx={{ display: 'block' }}>· {t}</Typography>
+                    ))}
+                  </Box>
+                </Box>
+              )}
+
+              {/* Missing data */}
+              {summary.missingDataWarnings.length > 0 && (
+                <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
+                  <Info size={16} color="#c0392b" style={{ flexShrink: 0, marginTop: 2 }} />
+                  <Box>
+                    <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Fehlende Informationen</Typography>
+                    {summary.missingDataWarnings.map((w, i) => (
+                      <Typography key={i} variant="caption" color="error" sx={{ display: 'block' }}>· {w}</Typography>
+                    ))}
+                  </Box>
+                </Box>
+              )}
+
+              {/* Next step */}
+              <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start', pt: 0.5, borderTop: '1px solid #f1f5f9', mt: 0.5 }}>
+                <ArrowRight size={16} color="#1e3a5f" style={{ flexShrink: 0, marginTop: 2 }} />
+                <Box>
+                  <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Empfohlener nächster Schritt</Typography>
+                  <Typography variant="body2">{summary.recommendedNextStep}</Typography>
+                </Box>
+              </Box>
+            </Box>
+          )}
+
+          {!isLoading && !summary && (
+            <Alert severity="info" sx={{ py: 0.5 }}>
+              Mindestens 2 Ergebnisse auswählen, um die Zusammenfassung zu generieren.
+            </Alert>
+          )}
+
+          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1.5, fontStyle: 'italic' }}>
+            Diese Zusammenfassung basiert ausschliesslich auf den vorliegenden Daten und trifft keine endgültige Entscheidung.
+          </Typography>
+        </Box>
+      </Collapse>
+    </Box>
+  )
+}
@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react'
+import { Box, Tooltip, Typography } from '@mui/material'
+import { Info } from 'lucide-react'
+
+export type CellHighlight = 'best' | 'worst' | 'critical' | 'future' | 'none'
+
+interface Props {
+  highlight?: CellHighlight
+  icon?: ReactNode
+  iconTooltip?: string
+  children: ReactNode
+}
+
+const HIGHLIGHT_SX: Record<CellHighlight, object> = {
+  best:     { bgcolor: '#f0fdf4', borderLeft: '3px solid #1a7a4a' },
+  worst:    { bgcolor: '#fef3c7', borderLeft: '3px solid #d97706' },
+  critical: { bgcolor: '#fef2f2', borderLeft: '3px solid #c0392b' },
+  future:   { bgcolor: '#faf5ff', borderLeft: '3px solid #7c3aed' },
+  none:     {},
+}
+
+export function CompareCell({ highlight = 'none', icon, iconTooltip, children }: Props) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75, ...HIGHLIGHT_SX[highlight] }}>
+      {icon && (
+        iconTooltip
+          ? <Tooltip title={iconTooltip}><Box sx={{ flexShrink: 0, display: 'flex', mt: 0.25 }}>{icon}</Box></Tooltip>
+          : <Box sx={{ flexShrink: 0, display: 'flex', mt: 0.25 }}>{icon}</Box>
+      )}
+      <Box sx={{ flex: 1, minWidth: 0 }}>{children}</Box>
+    </Box>
+  )
+}
+
+export function MissingDataCell({ reason }: { reason?: string }) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+      <Tooltip title={reason ?? 'Keine Daten vorhanden — kann Konfidenz beeinflussen'}>
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <Info size={12} color="#94a3b8" />
+        </Box>
+      </Tooltip>
+      <Typography variant="body2" sx={{ color: '#94a3b8', fontStyle: 'italic' }}>
+        Nicht verfügbar
+      </Typography>
+    </Box>
+  )
+}
@@ -0,0 +1,85 @@
+import { Box, Chip, IconButton, Tooltip, Typography } from '@mui/material'
+import { X, AlertTriangle } from 'lucide-react'
+import type { UnifiedMatchResult } from '../../domain/unifiedResult'
+
+const 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' },
+}
+
+const SCORE_COLOR = (s: number) => s >= 78 ? '#1a7a4a' : s >= 52 ? '#d97706' : '#c0392b'
+
+interface Props {
+  item: UnifiedMatchResult
+  onRemove: () => void
+}
+
+export function CompareColumnHeader({ item, onRemove }: Props) {
+  const meta = TYPE_META[item.resultType] ?? { label: item.resultType, color: '#64748b' }
+  const prop = item.resultType !== 'FUTURE_AVAILABILITY' ? (item as any).property : null
+  const sig  = item.resultType === 'FUTURE_AVAILABILITY' ? (item as any).signal  : null
+
+  const title       = prop?.title ?? sig?.companyName ?? sig?.locationHint ?? '–'
+  const subtitle    = prop?.location?.city ?? sig?.locationHint ?? '–'
+  const availability = prop?.availabilityDate ?? (sig ? `~${sig.timeHorizonMonths} Monate` : null)
+  const confidence  = Math.round(item.match.confidenceLevel * 100)
+  const source      = prop?.sourceLabel ?? sig?.source?.type ?? '–'
+
+  return (
+    <Box sx={{ p: 0.5 }}>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 1 }}>
+        <Chip label={meta.label} size="small" sx={{ bgcolor: meta.color, color: 'white', fontWeight: 600, fontSize: 10 }} />
+        <IconButton size="small" onClick={onRemove} sx={{ p: 0.25, ml: 1 }}>
+          <X size={14} />
+        </IconButton>
+      </Box>
+
+      <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 0.25, lineHeight: 1.3 }}>
+        {title}
+      </Typography>
+      <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1 }}>
+        {subtitle}
+      </Typography>
+
+      <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.5, mb: 0.5 }}>
+        <Typography variant="h4" sx={{ fontWeight: 800, color: SCORE_COLOR(item.matchScore), lineHeight: 1 }}>
+          {item.matchScore}
+        </Typography>
+        <Typography variant="caption" color="text.secondary">/100</Typography>
+      </Box>
+
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mt: 0.5 }}>
+        <Tooltip title="Konfidenz">
+          <Chip
+            label={`${confidence}% Konfidenz`}
+            size="small"
+            icon={confidence < 60 ? <AlertTriangle size={10} /> : undefined}
+            sx={{
+              fontSize: 10,
+              bgcolor: confidence < 60 ? '#fef3c7' : '#f0fdf4',
+              color: confidence < 60 ? '#92400e' : '#166534',
+            }}
+          />
+        </Tooltip>
+        {source && source !== '–' && (
+          <Chip label={source} size="small" sx={{ fontSize: 10 }} />
+        )}
+        {availability && (
+          <Chip label={availability} size="small" sx={{ fontSize: 10 }} />
+        )}
+      </Box>
+
+      {item.resultType === 'FUTURE_AVAILABILITY' && sig && (
+        <Box sx={{ mt: 1, p: 0.75, bgcolor: '#faf5ff', borderRadius: 1, border: '1px solid #e9d5ff' }}>
+          <Typography variant="caption" sx={{ color: '#7c3aed', fontWeight: 600, display: 'block' }}>
+            Probabilistisches Signal
+          </Typography>
+          <Typography variant="caption" color="text.secondary">
+            {Math.round(sig.probability * 100)}% Wahrscheinlichkeit
+          </Typography>
+        </Box>
+      )}
+    </Box>
+  )
+}
@@ -0,0 +1,24 @@
+import { Box, Button, Typography } from '@mui/material'
+import { Columns2 } from 'lucide-react'
+import { useNavigate } from 'react-router'
+
+export function CompareEmptyState() {
+  const navigate = useNavigate()
+  return (
+    <Box sx={{ px: 3, py: 4 }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, py: 8 }}>
+        <Columns2 size={40} color="#94a3b8" />
+        <Typography variant="h6" color="text.secondary" sx={{ fontWeight: 600 }}>
+          Keine Ergebnisse zum Vergleich
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center', maxWidth: 360 }}>
+          Fügen Sie 2–4 Ergebnisse aus dem Feed, Match Detail oder Match Center zum Vergleich hinzu.
+        </Typography>
+        <Button variant="contained" size="small" onClick={() => navigate('/demand/results')}
+          sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }}>
+          Zu den Suchergebnissen
+        </Button>
+      </Box>
+    </Box>
+  )
+}
@@ -0,0 +1,4 @@
+export { CompareEmptyState } from './CompareEmptyState'
+export { CompareColumnHeader } from './CompareColumnHeader'
+export { CompareCell, MissingDataCell } from './CompareCell'
+export { AICompareSummary } from './AICompareSummary'
@@ -1,17 +1,31 @@
 import { useEffect } from 'react'
 import { useNavigate } from 'react-router'
-import { Box, Button, Chip, Typography } from '@mui/material'
+import { Box, Button, IconButton, Typography } from '@mui/material'
+import { X } from 'lucide-react'
 import { useCompareStore } from '../../stores/compareStore'
 import { useLayoutStore } from '../../stores/layoutStore'

+const TYPE_DOT: Record<string, string> = {
+  VERIFIED_PORTFOLIO:  '#1e3a5f',
+  EXTERNAL_MARKET:     '#d97706',
+  FUTURE_AVAILABILITY: '#7c3aed',
+}
+
 export function CompareTray() {
-  const { compareTray, removeFromCompare, clearCompare } = useCompareStore()
+  const { compareItems, removeFromCompare, clearCompare } = useCompareStore()
  const { setCompareTrayVisible } = useLayoutStore()
  const navigate = useNavigate()

  useEffect(() => {
-    setCompareTrayVisible(compareTray.length > 0)
-  }, [compareTray.length, setCompareTrayVisible])
+    setCompareTrayVisible(compareItems.length > 0)
+  }, [compareItems.length, setCompareTrayVisible])
+
+  const getTitle = (item: (typeof compareItems)[number]) => {
+    if (item.resultType === 'FUTURE_AVAILABILITY') {
+      return (item as any).signal?.companyName ?? (item as any).signal?.locationHint ?? 'Signal'
+    }
+    return (item as any).property?.title ?? `Score ${item.matchScore}`
+  }

  return (
    <Box
@@ -27,27 +41,44 @@ export function CompareTray() {
        alignItems: 'center',
        px: 3,
        gap: 2,
-        transform: compareTray.length > 0 ? 'translateY(0)' : 'translateY(100%)',
+        transform: compareItems.length > 0 ? 'translateY(0)' : 'translateY(100%)',
        transition: 'transform 0.25s ease',
      }}
    >
      <Typography variant="caption" sx={{ color: '#fff', flexShrink: 0 }}>
-        Vergleich ({compareTray.length}/3)
+        Vergleich ({compareItems.length}/4)
      </Typography>

      <Box sx={{ flex: 1, display: 'flex', gap: 1, overflow: 'hidden' }}>
-        {compareTray.map((id, i) => (
-          <Chip
-            key={id}
-            label={`Objekt ${i + 1}`}
-            size="small"
-            onDelete={() => removeFromCompare(id)}
+        {compareItems.map((item) => (
+          <Box
+            key={item.matchId}
            sx={{
-              bgcolor: 'rgba(255,255,255,0.15)',
-              color: '#fff',
-              '& .MuiChip-deleteIcon': { color: 'rgba(255,255,255,0.6)' },
+              display: 'flex',
+              alignItems: 'center',
+              gap: 0.75,
+              bgcolor: 'rgba(255,255,255,0.1)',
+              borderRadius: 1,
+              px: 1,
+              py: 0.25,
+              flexShrink: 0,
            }}
-          />
+          >
+            <Box sx={{ width: 6, height: 6, borderRadius: '50%', bgcolor: TYPE_DOT[item.resultType] ?? '#64748b', flexShrink: 0 }} />
+            <Typography variant="caption" sx={{ color: '#fff', maxWidth: 110, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              {getTitle(item)}
+            </Typography>
+            <Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.5)', flexShrink: 0 }}>
+              {item.matchScore}
+            </Typography>
+            <IconButton
+              size="small"
+              onClick={() => removeFromCompare(item.matchId)}
+              sx={{ p: 0.25, color: 'rgba(255,255,255,0.5)', '&:hover': { color: '#fff' } }}
+            >
+              <X size={12} />
+            </IconButton>
+          </Box>
        ))}
      </Box>

@@ -66,7 +66,7 @@ export function MatchBriefingPanel() {
      label: 'Vergleichen',
      actionType: 'ADD_COMPARE',
      variant: 'secondary',
-      onClick: () => { addToCompare(property.id); navigate('/demand/compare') },
+      onClick: () => { addToCompare(result); navigate('/demand/compare') },
    },
    {
      id: 'details',
@@ -1,21 +1,18 @@
 import { useNavigate } from 'react-router'
 import { MatchCardCompact } from '../match-card/MatchCardCompact'
 import { buildMatchCardViewModel } from '../../features/matching/matchCardAdapter'
+import { useCompareStore } from '../../stores/compareStore'
 import type { UnifiedMatchResult } from '../../domain/unifiedResult'
 import type { MatchCardAction } from '../match-card/MatchCardViewModel'

 interface Props {
  result: UnifiedMatchResult
-  isInCompare: boolean
-  onCompare: (propertyId: string) => void
 }

-export function UnifiedResultCard({ result, isInCompare, onCompare }: Props) {
+export function UnifiedResultCard({ result }: Props) {
  const navigate = useNavigate()
-  const isFuture = result.resultType === 'FUTURE_AVAILABILITY'
-  const compareId = !isFuture
-    ? (result as { property: { id: string } }).property.id
-    : ''
+  const { addToCompare, removeFromCompare, isInCompare, isFull } = useCompareStore()
+  const inCompare = isInCompare(result.matchId)

  const actions: MatchCardAction[] = [
    {
@@ -26,17 +23,17 @@ export function UnifiedResultCard({ result, isInCompare, onCompare }: Props) {
      disabled: true,
      onClick: () => {},
    },
-    ...(!isFuture
-      ? [
-          {
-            id: 'compare',
-            label: 'Vergleichen',
-            actionType: 'ADD_COMPARE' as const,
-            variant: (isInCompare ? 'primary' : 'secondary') as 'primary' | 'secondary',
-            onClick: () => onCompare(compareId),
-          },
-        ]
-      : []),
+    {
+      id: 'compare',
+      label: inCompare ? 'Im Vergleich' : 'Vergleichen',
+      actionType: 'ADD_COMPARE',
+      variant: inCompare ? 'primary' : 'secondary',
+      disabled: !inCompare && isFull(),
+      onClick: () => {
+        if (inCompare) removeFromCompare(result.matchId)
+        else addToCompare(result)
+      },
+    },
    {
      id: 'details',
      label: 'Details',
@@ -3,27 +3,14 @@ import { UnifiedResultCard } from './UnifiedResultCard'

 interface Props {
  results: UnifiedMatchResult[]
-  isInCompare: (id: string) => boolean
-  onCompare: (propertyId: string) => void
 }

-export function UnifiedResultFeed({ results, isInCompare, onCompare }: Props) {
+export function UnifiedResultFeed({ results }: Props) {
  return (
    <>
-      {results.map(result => {
-        const compareId =
-          result.resultType !== 'FUTURE_AVAILABILITY'
-            ? (result as { property: { id: string } }).property.id
-            : ''
-        return (
-          <UnifiedResultCard
-            key={result.matchId}
-            result={result}
-            isInCompare={compareId ? isInCompare(compareId) : false}
-            onCompare={onCompare}
-          />
-        )
-      })}
+      {results.map(result => (
+        <UnifiedResultCard key={result.matchId} result={result} />
+      ))}
    </>
  )
 }