feat: F010 unified result feed
Replace monolithic Results.tsx with decomposed component architecture: - 8 new components in src/components/results/ (ResultTypeBadge, ResultConfidenceSummary, FeedEmptyState, FeedSkeleton, ResultFeedHeader, ResultFilterBar, UnifiedResultCard, UnifiedResultFeed) - Reuses existing useUnifiedResults hook and compareStore - FUTURE_AVAILABILITY cards always display non-dismissable disclaimer - Filter by result type + sort by score/area/rent Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
@@ -0,0 +1,14 @@
|
||||
import { EmptyState } from '../ui'
|
||||
|
||||
export function FeedEmptyState({ filtered }: { filtered?: boolean }) {
|
||||
return (
|
||||
<EmptyState
|
||||
title={filtered ? 'Kein Treffer für diesen Filter' : 'Keine Treffer gefunden'}
|
||||
description={
|
||||
filtered
|
||||
? 'Wechseln Sie den Filter oder passen Sie die Suchkriterien an.'
|
||||
: 'Starten Sie eine neue Suche oder erweitern Sie die Suchkriterien.'
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Card, Skeleton, Stack } from '@mui/material'
|
||||
|
||||
export function FeedSkeleton() {
|
||||
return (
|
||||
<>
|
||||
{[1, 2, 3].map(i => (
|
||||
<Card key={i} sx={{ p: 2.5, mb: 1.5 }}>
|
||||
<Stack direction="row" sx={{ justifyContent: 'space-between', mb: 1.5 }}>
|
||||
<Stack direction="row" spacing={1.5} sx={{ alignItems: 'center' }}>
|
||||
<Skeleton variant="rounded" width={110} height={22} />
|
||||
<Skeleton variant="text" width={160} sx={{ fontSize: '1.25rem' }} />
|
||||
</Stack>
|
||||
<Skeleton variant="text" width={60} sx={{ fontSize: '2rem' }} />
|
||||
</Stack>
|
||||
<Skeleton variant="text" width="70%" />
|
||||
<Skeleton variant="text" width="50%" />
|
||||
<Skeleton variant="rounded" height={32} sx={{ mt: 1.5 }} />
|
||||
</Card>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import { Box, LinearProgress, Stack, Typography } from '@mui/material'
|
||||
|
||||
interface Props {
|
||||
confidenceLevel: number
|
||||
dataQualityScore?: number
|
||||
}
|
||||
|
||||
export function ResultConfidenceSummary({ confidenceLevel, dataQualityScore }: Props) {
|
||||
const confColor = confidenceLevel >= 0.8 ? '#1a7a4a' : confidenceLevel >= 0.6 ? '#d97706' : '#c0392b'
|
||||
return (
|
||||
<Stack direction="row" spacing={2.5} sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
|
||||
<Typography variant="caption">
|
||||
<span style={{ color: '#64748b' }}>Konfidenz </span>
|
||||
<strong style={{ color: confColor }}>{Math.round(confidenceLevel * 100)}%</strong>
|
||||
</Typography>
|
||||
{dataQualityScore !== undefined && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary">Datenqualität</Typography>
|
||||
<Box sx={{ width: 80 }}>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={dataQualityScore * 100}
|
||||
sx={{ height: 6, borderRadius: 3 }}
|
||||
/>
|
||||
</Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{Math.round(dataQualityScore * 100)}%
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { Box, Typography } from '@mui/material'
|
||||
|
||||
interface Props {
|
||||
total: number
|
||||
verifiedCount: number
|
||||
externalCount: number
|
||||
futureCount: number
|
||||
}
|
||||
|
||||
export function ResultFeedHeader({ total, verifiedCount, externalCount, futureCount }: Props) {
|
||||
return (
|
||||
<Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0', px: 3, py: 2 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700 }} color="text.primary">
|
||||
{total} Treffer gefunden
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{verifiedCount} Verified · {externalCount} Extern · {futureCount} Signale
|
||||
</Typography>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import { Box, Card, Chip, Stack, Typography } from '@mui/material'
|
||||
import type { ResultType } from '../../domain/enums'
|
||||
|
||||
type FilterSource = ResultType | 'ALL'
|
||||
type SortBy = 'score' | 'rent' | 'area'
|
||||
|
||||
interface Props {
|
||||
filterSource: FilterSource
|
||||
onFilterChange: (v: FilterSource) => void
|
||||
sortBy: SortBy
|
||||
onSortChange: (v: SortBy) => void
|
||||
}
|
||||
|
||||
const FILTER_OPTIONS: { value: FilterSource; label: string; color: string }[] = [
|
||||
{ value: 'ALL', label: 'Alle', color: '#1e3a5f' },
|
||||
{ value: 'VERIFIED_PORTFOLIO', label: 'Verified Portfolio', color: '#1e3a5f' },
|
||||
{ value: 'EXTERNAL_MARKET', label: 'Marktinserate', color: '#d97706' },
|
||||
{ value: 'FUTURE_AVAILABILITY', label: 'Zukunftssignale', color: '#7c3aed' },
|
||||
]
|
||||
|
||||
const SORT_OPTIONS: { value: SortBy; label: string }[] = [
|
||||
{ value: 'score', label: 'Relevanz' },
|
||||
{ value: 'area', label: 'Fläche' },
|
||||
{ value: 'rent', label: 'Mietpreis' },
|
||||
]
|
||||
|
||||
export function ResultFilterBar({ filterSource, onFilterChange, sortBy, onSortChange }: Props) {
|
||||
return (
|
||||
<Card sx={{ p: 1.5, mb: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 1 }}>
|
||||
<Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{FILTER_OPTIONS.map(({ value, label, color }) => {
|
||||
const active = filterSource === value
|
||||
return (
|
||||
<Chip
|
||||
key={value}
|
||||
label={label}
|
||||
size="small"
|
||||
clickable
|
||||
onClick={() => onFilterChange(value)}
|
||||
sx={{
|
||||
bgcolor: active ? color : 'transparent',
|
||||
color: active ? 'white' : 'text.secondary',
|
||||
border: `1px solid ${active ? color : '#e2e8f0'}`,
|
||||
fontWeight: active ? 600 : 400,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Stack>
|
||||
<Stack direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
|
||||
<Typography variant="caption" color="text.secondary">Sortierung:</Typography>
|
||||
{SORT_OPTIONS.map(({ value, label }) => (
|
||||
<Chip
|
||||
key={value}
|
||||
label={label}
|
||||
size="small"
|
||||
clickable
|
||||
onClick={() => onSortChange(value)}
|
||||
sx={{
|
||||
bgcolor: sortBy === value ? '#1e3a5f' : 'transparent',
|
||||
color: sortBy === value ? 'white' : 'text.secondary',
|
||||
border: `1px solid ${sortBy === value ? '#1e3a5f' : '#e2e8f0'}`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import type { ResultType } from '../../domain/enums'
|
||||
import { Chip } from '@mui/material'
|
||||
|
||||
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' },
|
||||
}
|
||||
|
||||
export function ResultTypeBadge({ resultType }: { resultType: ResultType }) {
|
||||
const meta = TYPE_META[resultType] ?? { label: resultType, color: '#64748b' }
|
||||
return (
|
||||
<Chip
|
||||
label={meta.label}
|
||||
size="small"
|
||||
sx={{ bgcolor: meta.color, color: 'white', fontWeight: 600, fontSize: 11 }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
import { Alert, Box, Button, Card, Chip, Divider, Stack, Typography } from '@mui/material'
|
||||
import { Banknote, Bookmark, Calendar, Columns2, MapPin, Maximize2 } from 'lucide-react'
|
||||
import type { UnifiedMatchResult } from '../../domain/unifiedResult'
|
||||
import type { Property } from '../../domain/property'
|
||||
import type { FutureSignal } from '../../domain/futureSignal'
|
||||
import { ResultConfidenceSummary } from './ResultConfidenceSummary'
|
||||
import { ResultTypeBadge } from './ResultTypeBadge'
|
||||
|
||||
function scoreColor(score: number): string {
|
||||
if (score >= 78) return '#1a7a4a'
|
||||
if (score >= 52) return '#d97706'
|
||||
return '#c0392b'
|
||||
}
|
||||
|
||||
interface Props {
|
||||
result: UnifiedMatchResult
|
||||
isInCompare: boolean
|
||||
onCompare: (propertyId: string) => void
|
||||
}
|
||||
|
||||
export function UnifiedResultCard({ result, isInCompare, onCompare }: Props) {
|
||||
const { match, matchScore, resultType } = result
|
||||
|
||||
const isFuture = resultType === 'FUTURE_AVAILABILITY'
|
||||
const property: Property | undefined = !isFuture ? (result as { property: Property }).property : undefined
|
||||
const signal: FutureSignal | undefined = isFuture ? (result as { signal: FutureSignal }).signal : undefined
|
||||
|
||||
const compareId = property?.id ?? ''
|
||||
|
||||
const title = property?.title ?? signal?.companyName ?? signal?.locationHint ?? '–'
|
||||
const city = property?.location?.city ?? signal?.locationHint ?? '–'
|
||||
const areaSqm = property?.areaSqm ?? signal?.areaSqmEstimate
|
||||
const rent = property?.rentPricePerSqm
|
||||
const available = property?.availabilityDate
|
||||
const dqScore = property?.dataQuality?.score
|
||||
|
||||
return (
|
||||
<Card sx={{ p: 2.5, mb: 1.5 }}>
|
||||
{/* FUTURE_AVAILABILITY disclaimer — always shown, non-dismissable */}
|
||||
{isFuture && (
|
||||
<Alert severity="warning" sx={{ mb: 1.5, py: 0.5 }}>
|
||||
{signal?.disclaimer ?? 'Probabilistisches Signal – kein bestätigtes Objekt'}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Header */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', mb: 1.5 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||||
<ResultTypeBadge resultType={resultType} />
|
||||
<Typography variant="h6" sx={{ fontWeight: 600 }}>{title}</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.5 }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 800, color: scoreColor(matchScore) }}>
|
||||
{matchScore}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">/100</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Key facts */}
|
||||
<Stack direction="row" spacing={2.5} sx={{ mb: 1.5, flexWrap: 'wrap' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<MapPin size={14} color="#64748b" />
|
||||
<Typography variant="body2" color="text.secondary">{city}</Typography>
|
||||
</Box>
|
||||
{areaSqm !== undefined && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Maximize2 size={14} color="#64748b" />
|
||||
<Typography variant="body2" color="text.secondary">{areaSqm} m²</Typography>
|
||||
</Box>
|
||||
)}
|
||||
{rent !== undefined && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Banknote size={14} color="#64748b" />
|
||||
<Typography variant="body2" color="text.secondary">CHF {rent}/m²</Typography>
|
||||
</Box>
|
||||
)}
|
||||
{available && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Calendar size={14} color="#64748b" />
|
||||
<Typography variant="body2" color="text.secondary">{available}</Typography>
|
||||
</Box>
|
||||
)}
|
||||
{isFuture && signal?.timeHorizonMonths && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Calendar size={14} color="#64748b" />
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
~{signal.timeHorizonMonths} Monate · {Math.round(signal.probability * 100)}% Wahrscheinlichkeit
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
<Divider sx={{ mb: 1.5 }} />
|
||||
|
||||
{/* Positive factors */}
|
||||
{match.positiveFactors.length > 0 && (
|
||||
<Box sx={{ mb: 1 }}>
|
||||
<Typography variant="caption" sx={{ fontWeight: 600, display: 'block', mb: 0.5 }} color="text.secondary">
|
||||
Positive Faktoren
|
||||
</Typography>
|
||||
<Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{match.positiveFactors.slice(0, 3).map((f, i) => (
|
||||
<Chip
|
||||
key={i}
|
||||
label={f.criterion}
|
||||
size="small"
|
||||
sx={{ bgcolor: '#f0fdf4', color: '#1a7a4a', border: '1px solid #bbf7d0', fontSize: 11 }}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Tradeoffs */}
|
||||
{(match.tradeoffs?.length ?? 0) > 0 && (
|
||||
<Alert severity="warning" sx={{ py: 0.5, px: 1.5, mb: 1, '& .MuiAlert-message': { fontSize: 12 } }}>
|
||||
<Typography variant="caption" sx={{ fontWeight: 600, display: 'block', mb: 0.5 }}>Abwägungen</Typography>
|
||||
{match.tradeoffs.slice(0, 2).map((t, i) => (
|
||||
<Typography key={i} variant="caption" sx={{ display: 'block' }}>
|
||||
{t.criterion}: {t.concern}
|
||||
</Typography>
|
||||
))}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Confidence + data quality */}
|
||||
<Box sx={{ mb: 1.5 }}>
|
||||
<ResultConfidenceSummary confidenceLevel={match.confidenceLevel} dataQualityScore={dqScore} />
|
||||
</Box>
|
||||
|
||||
{/* Actions */}
|
||||
<Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
|
||||
<Button variant="outlined" size="small" startIcon={<Bookmark size={14} />} disabled>
|
||||
Shortlist
|
||||
</Button>
|
||||
{!isFuture && (
|
||||
<Button
|
||||
variant={isInCompare ? 'contained' : 'outlined'}
|
||||
size="small"
|
||||
startIcon={<Columns2 size={14} />}
|
||||
onClick={() => onCompare(compareId)}
|
||||
sx={isInCompare ? { bgcolor: '#1e3a5f' } : {}}
|
||||
>
|
||||
Vergleichen
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="contained"
|
||||
size="small"
|
||||
disabled
|
||||
sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }}
|
||||
>
|
||||
Details
|
||||
</Button>
|
||||
</Box>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { UnifiedMatchResult } from '../../domain/unifiedResult'
|
||||
import { UnifiedResultCard } from './UnifiedResultCard'
|
||||
|
||||
interface Props {
|
||||
results: UnifiedMatchResult[]
|
||||
isInCompare: (id: string) => boolean
|
||||
onCompare: (propertyId: string) => void
|
||||
}
|
||||
|
||||
export function UnifiedResultFeed({ results, isInCompare, onCompare }: 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}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
export { ResultTypeBadge } from './ResultTypeBadge'
|
||||
export { ResultConfidenceSummary } from './ResultConfidenceSummary'
|
||||
export { FeedEmptyState } from './FeedEmptyState'
|
||||
export { FeedSkeleton } from './FeedSkeleton'
|
||||
export { ResultFeedHeader } from './ResultFeedHeader'
|
||||
export { ResultFilterBar } from './ResultFilterBar'
|
||||
export { UnifiedResultCard } from './UnifiedResultCard'
|
||||
export { UnifiedResultFeed } from './UnifiedResultFeed'
|
||||
+51
-369
@@ -1,331 +1,72 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Chip,
|
||||
Typography,
|
||||
LinearProgress,
|
||||
Stack,
|
||||
Alert,
|
||||
CircularProgress,
|
||||
Divider,
|
||||
} from '@mui/material'
|
||||
import {
|
||||
MapPin,
|
||||
Maximize2,
|
||||
Banknote,
|
||||
Calendar,
|
||||
Bookmark,
|
||||
Columns2,
|
||||
} from 'lucide-react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Box, Button, Card, Stack, Typography } from '@mui/material'
|
||||
import { useNavigate } from 'react-router'
|
||||
import { propertyService } from '../../services/propertyService'
|
||||
import { matchService } from '../../services/matchService'
|
||||
import { needService } from '../../services/needService'
|
||||
import { ResultType, MatchStrength, RiskLevel } from '../../domain/enums'
|
||||
import type { Property } from '../../domain/property'
|
||||
import type { Match } from '../../domain/match'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useUnifiedResults } from '../../hooks/useUnifiedResults'
|
||||
import { useCompareStore } from '../../stores/compareStore'
|
||||
import { EmptyState } from '../../components/ui'
|
||||
import { needService } from '../../services/needService'
|
||||
import {
|
||||
FeedEmptyState,
|
||||
FeedSkeleton,
|
||||
ResultFeedHeader,
|
||||
ResultFilterBar,
|
||||
UnifiedResultFeed,
|
||||
} from '../../components/results'
|
||||
import type { ResultType } from '../../domain/enums'
|
||||
import type { UnifiedMatchResult } from '../../domain/unifiedResult'
|
||||
|
||||
type FilterSource = ResultType | 'ALL'
|
||||
type SortBy = 'score' | 'rent' | 'area'
|
||||
|
||||
function getResultTypeLabel(type: ResultType): string {
|
||||
switch (type) {
|
||||
case ResultType.VERIFIED_PORTFOLIO: return 'Verified Portfolio'
|
||||
case ResultType.EXTERNAL_MARKET: return 'Marktinserat'
|
||||
case ResultType.FUTURE_AVAILABILITY: return 'Zukunftssignal'
|
||||
}
|
||||
}
|
||||
|
||||
function getResultTypeColor(type: ResultType): string {
|
||||
switch (type) {
|
||||
case ResultType.VERIFIED_PORTFOLIO: return '#1e3a5f'
|
||||
case ResultType.EXTERNAL_MARKET: return '#d97706'
|
||||
case ResultType.FUTURE_AVAILABILITY: return '#7c3aed'
|
||||
}
|
||||
}
|
||||
|
||||
function getMatchStrengthColor(strength: MatchStrength): string {
|
||||
switch (strength) {
|
||||
case MatchStrength.STRONG: return '#1a7a4a'
|
||||
case MatchStrength.MODERATE: return '#d97706'
|
||||
case MatchStrength.WEAK: return '#c0392b'
|
||||
}
|
||||
}
|
||||
|
||||
function getRiskChipColor(risk: RiskLevel): 'success' | 'warning' | 'error' {
|
||||
if (risk === RiskLevel.LOW) return 'success'
|
||||
if (risk === RiskLevel.MEDIUM) return 'warning'
|
||||
return 'error'
|
||||
}
|
||||
|
||||
function getRiskLabel(risk: RiskLevel): string {
|
||||
switch (risk) {
|
||||
case RiskLevel.LOW: return 'Niedriges Risiko'
|
||||
case RiskLevel.MEDIUM: return 'Mittleres Risiko'
|
||||
case RiskLevel.HIGH: return 'Hohes Risiko'
|
||||
case RiskLevel.CRITICAL: return 'Kritisches Risiko'
|
||||
}
|
||||
}
|
||||
|
||||
interface ResultCardProps {
|
||||
property: Property
|
||||
match: Match
|
||||
onCompare: (id: string) => void
|
||||
isInCompare: boolean
|
||||
}
|
||||
|
||||
function ResultCard({ property, match, onCompare, isInCompare }: ResultCardProps) {
|
||||
const scoreColor = getMatchStrengthColor(match.matchStrength)
|
||||
|
||||
return (
|
||||
<Card sx={{ p: 2.5, mb: 1.5 }}>
|
||||
{/* Future signal warning */}
|
||||
{property.resultType === ResultType.FUTURE_AVAILABILITY && (
|
||||
<Alert severity="warning" sx={{ mb: 1.5, py: 0.5 }}>
|
||||
Probabilistisches Signal – kein bestätigtes Objekt
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Header row */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', mb: 1.5 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||||
<Chip
|
||||
label={getResultTypeLabel(property.resultType)}
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: getResultTypeColor(property.resultType),
|
||||
color: 'white',
|
||||
fontWeight: 600,
|
||||
fontSize: 11,
|
||||
}}
|
||||
/>
|
||||
<Typography variant="h6" sx={{ fontWeight: 600 }}>
|
||||
{property.title}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.5 }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 800, color: scoreColor }}>
|
||||
{match.matchScore}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">/100</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Property details row */}
|
||||
<Stack direction="row" spacing={2.5} sx={{ mb: 1.5, flexWrap: 'wrap' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<MapPin size={14} color="#64748b" />
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{property.location.city}
|
||||
{property.location.district ? `, ${property.location.district}` : ''}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Maximize2 size={14} color="#64748b" />
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{property.areaSqm} m²
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Banknote size={14} color="#64748b" />
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
CHF {property.rentPricePerSqm}/m²
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Calendar size={14} color="#64748b" />
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{property.availabilityDate}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
{/* Match factors section */}
|
||||
<Divider sx={{ mb: 1.5 }} />
|
||||
|
||||
{match.positiveFactors.length > 0 && (
|
||||
<Box sx={{ mb: 1 }}>
|
||||
<Typography variant="caption" sx={{ fontWeight: 600, display: 'block', mb: 0.5 }} color="text.secondary">
|
||||
Positive Faktoren
|
||||
</Typography>
|
||||
<Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{match.positiveFactors.slice(0, 3).map((f, i) => (
|
||||
<Chip
|
||||
key={i}
|
||||
label={f.criterion}
|
||||
size="small"
|
||||
sx={{ bgcolor: '#f0fdf4', color: '#1a7a4a', border: '1px solid #bbf7d0', fontSize: 11 }}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{match.tradeoffs.length > 0 && (
|
||||
<Alert severity="warning" sx={{ py: 0.5, px: 1.5, mb: 1, '& .MuiAlert-message': { fontSize: 12 } }}>
|
||||
<Typography variant="caption" sx={{ fontWeight: 600, display: 'block', mb: 0.5 }}>Abwägungen</Typography>
|
||||
{match.tradeoffs.slice(0, 2).map((t, i) => (
|
||||
<Typography key={i} variant="caption" sx={{ display: 'block' }}>
|
||||
{t.criterion}: {t.concern}
|
||||
</Typography>
|
||||
))}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Confidence + Quality row */}
|
||||
<Stack direction="row" spacing={2.5} sx={{ alignItems: 'center', mb: 1.5, flexWrap: 'wrap' }}>
|
||||
<Typography variant="caption">
|
||||
<span style={{ color: '#64748b' }}>Konfidenz </span>
|
||||
<strong style={{ color: match.confidenceLevel >= 0.8 ? '#1a7a4a' : match.confidenceLevel >= 0.6 ? '#d97706' : '#c0392b' }}>
|
||||
{Math.round(match.confidenceLevel * 100)}%
|
||||
</strong>
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary">Datenqualität</Typography>
|
||||
<Box sx={{ width: 80 }}>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={property.dataQuality.score * 100}
|
||||
sx={{ height: 6, borderRadius: 3, color:
|
||||
property.dataQuality.score >= 0.8 ? 'success' :
|
||||
property.dataQuality.score >= 0.6 ? 'warning' : 'error' }}
|
||||
/>
|
||||
</Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{Math.round(property.dataQuality.score * 100)}%
|
||||
</Typography>
|
||||
</Box>
|
||||
{property.riskLevel && (
|
||||
<Chip label={getRiskLabel(property.riskLevel)}
|
||||
size="small"
|
||||
color={getRiskChipColor(property.riskLevel)}
|
||||
variant="outlined"
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
{/* Actions row */}
|
||||
<Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="small"
|
||||
startIcon={<Bookmark size={14} />}
|
||||
disabled
|
||||
>
|
||||
Shortlist
|
||||
</Button>
|
||||
<Button
|
||||
variant={isInCompare ? 'contained' : 'outlined'}
|
||||
size="small"
|
||||
startIcon={<Columns2 size={14} />}
|
||||
onClick={() => onCompare(property.id)}
|
||||
sx={isInCompare ? { bgcolor: '#1e3a5f' } : {}}
|
||||
>
|
||||
Vergleichen
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="small"
|
||||
disabled
|
||||
sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }}
|
||||
>
|
||||
Details
|
||||
</Button>
|
||||
</Box>
|
||||
</Card>
|
||||
)
|
||||
function sortResults(results: UnifiedMatchResult[], sortBy: SortBy): UnifiedMatchResult[] {
|
||||
return [...results].sort((a, b) => {
|
||||
if (sortBy === 'score') return b.matchScore - a.matchScore
|
||||
const propA = a.resultType !== 'FUTURE_AVAILABILITY' ? (a as { property: { rentPricePerSqm: number; areaSqm: number } }).property : null
|
||||
const propB = b.resultType !== 'FUTURE_AVAILABILITY' ? (b as { property: { rentPricePerSqm: number; areaSqm: number } }).property : null
|
||||
if (sortBy === 'rent') return (propA?.rentPricePerSqm ?? 0) - (propB?.rentPricePerSqm ?? 0)
|
||||
if (sortBy === 'area') return (propB?.areaSqm ?? 0) - (propA?.areaSqm ?? 0)
|
||||
return 0
|
||||
})
|
||||
}
|
||||
|
||||
export default function Results() {
|
||||
const navigate = useNavigate()
|
||||
|
||||
const [filterSource, setFilterSource] = useState<FilterSource>('ALL')
|
||||
const [sortBy, setSortBy] = useState<SortBy>('score')
|
||||
|
||||
const { data: propResp, isLoading: propLoading } = useQuery({
|
||||
queryKey: ['properties'],
|
||||
queryFn: () => propertyService.getAll(),
|
||||
})
|
||||
const { data: matchResp, isLoading: matchLoading } = useQuery({
|
||||
queryKey: ['matches'],
|
||||
queryFn: () => matchService.getAll(),
|
||||
})
|
||||
const { data: needResp, isLoading: needLoading } = useQuery({
|
||||
const { data: results = [], isLoading } = useUnifiedResults()
|
||||
const { data: needResp } = useQuery({
|
||||
queryKey: ['needs'],
|
||||
queryFn: () => needService.getAll(),
|
||||
})
|
||||
|
||||
const { addToCompare, removeFromCompare, clearCompare, isInCompare, compareTray } = useCompareStore()
|
||||
|
||||
const properties = propResp?.data ?? []
|
||||
const matches = matchResp?.data ?? []
|
||||
const needs = needResp?.data ?? []
|
||||
const activeNeed = needs[0]
|
||||
const activeNeed = needResp?.data?.[0]
|
||||
|
||||
const isLoading = propLoading || matchLoading || needLoading
|
||||
const filtered =
|
||||
filterSource === 'ALL' ? results : results.filter(r => r.resultType === filterSource)
|
||||
|
||||
// Join matches with properties
|
||||
const resultItems = matches
|
||||
.map(match => {
|
||||
const property = properties.find(p => p.id === match.propertyId)
|
||||
return property ? { match, property } : null
|
||||
})
|
||||
.filter((item): item is { match: Match; property: Property } => item !== null)
|
||||
const sorted = sortResults(filtered, sortBy)
|
||||
|
||||
// Filter by source
|
||||
const filtered = filterSource === 'ALL'
|
||||
? resultItems
|
||||
: resultItems.filter(item => item.property.resultType === filterSource)
|
||||
const verifiedCount = results.filter(r => r.resultType === 'VERIFIED_PORTFOLIO').length
|
||||
const externalCount = results.filter(r => r.resultType === 'EXTERNAL_MARKET').length
|
||||
const futureCount = results.filter(r => r.resultType === 'FUTURE_AVAILABILITY').length
|
||||
|
||||
// Sort
|
||||
const sorted = [...filtered].sort((a, b) => {
|
||||
if (sortBy === 'score') return b.match.matchScore - a.match.matchScore
|
||||
if (sortBy === 'rent') return a.property.rentPricePerSqm - b.property.rentPricePerSqm
|
||||
if (sortBy === 'area') return b.property.areaSqm - a.property.areaSqm
|
||||
return 0
|
||||
})
|
||||
|
||||
const verifiedCount = resultItems.filter(i => i.property.resultType === ResultType.VERIFIED_PORTFOLIO).length
|
||||
const externalCount = resultItems.filter(i => i.property.resultType === ResultType.EXTERNAL_MARKET).length
|
||||
const futureCount = resultItems.filter(i => i.property.resultType === ResultType.FUTURE_AVAILABILITY).length
|
||||
|
||||
const handleToggleCompare = (id: string) => {
|
||||
if (isInCompare(id)) {
|
||||
removeFromCompare(id)
|
||||
} else {
|
||||
addToCompare(id)
|
||||
}
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', py: 12 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
)
|
||||
const handleCompare = (propertyId: string) => {
|
||||
if (isInCompare(propertyId)) removeFromCompare(propertyId)
|
||||
else addToCompare(propertyId)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* Page Header */}
|
||||
<Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0', px: 3, py: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Box>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700 }} color="text.primary">
|
||||
{sorted.length} Treffer gefunden
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{verifiedCount} Verified · {externalCount} Extern · {futureCount} Signale
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<ResultFeedHeader
|
||||
total={sorted.length}
|
||||
verifiedCount={verifiedCount}
|
||||
externalCount={externalCount}
|
||||
futureCount={futureCount}
|
||||
/>
|
||||
|
||||
<Box sx={{ px: 3, py: 3 }}>
|
||||
{/* Active Need Banner */}
|
||||
{activeNeed && (
|
||||
<Card sx={{ bgcolor: '#eff6ff', p: 2, mb: 2, border: '1px solid #bfdbfe' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
@@ -350,81 +91,22 @@ export default function Results() {
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Filter/Sort bar */}
|
||||
<Card sx={{ p: 1.5, mb: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 1 }}>
|
||||
<Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{(['ALL', ResultType.VERIFIED_PORTFOLIO, ResultType.EXTERNAL_MARKET, ResultType.FUTURE_AVAILABILITY] as FilterSource[]).map(source => {
|
||||
const labels: Record<FilterSource, string> = {
|
||||
ALL: 'Alle',
|
||||
[ResultType.VERIFIED_PORTFOLIO]: 'Verified Portfolio',
|
||||
[ResultType.EXTERNAL_MARKET]: 'Marktinserate',
|
||||
[ResultType.FUTURE_AVAILABILITY]: 'Zukunftssignale',
|
||||
}
|
||||
const colors: Partial<Record<FilterSource, string>> = {
|
||||
[ResultType.VERIFIED_PORTFOLIO]: '#1e3a5f',
|
||||
[ResultType.EXTERNAL_MARKET]: '#d97706',
|
||||
[ResultType.FUTURE_AVAILABILITY]: '#7c3aed',
|
||||
}
|
||||
const isActive = filterSource === source
|
||||
return (
|
||||
<Chip
|
||||
key={source}
|
||||
label={labels[source]}
|
||||
size="small"
|
||||
clickable
|
||||
onClick={() => setFilterSource(source)}
|
||||
sx={{
|
||||
bgcolor: isActive ? (colors[source] ?? '#1e3a5f') : 'transparent',
|
||||
color: isActive ? 'white' : 'text.secondary',
|
||||
border: `1px solid ${isActive ? (colors[source] ?? '#1e3a5f') : '#e2e8f0'}`,
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Stack>
|
||||
<ResultFilterBar
|
||||
filterSource={filterSource}
|
||||
onFilterChange={setFilterSource}
|
||||
sortBy={sortBy}
|
||||
onSortChange={setSortBy}
|
||||
/>
|
||||
|
||||
<Stack direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
|
||||
<Typography variant="caption" color="text.secondary">Sortierung:</Typography>
|
||||
{([['score', 'Relevanz'], ['area', 'Fläche'], ['rent', 'Mietpreis']] as [SortBy, string][]).map(([val, label]) => (
|
||||
<Chip
|
||||
key={val}
|
||||
label={label}
|
||||
size="small"
|
||||
clickable
|
||||
onClick={() => setSortBy(val)}
|
||||
sx={{
|
||||
bgcolor: sortBy === val ? '#1e3a5f' : 'transparent',
|
||||
color: sortBy === val ? 'white' : 'text.secondary',
|
||||
border: `1px solid ${sortBy === val ? '#1e3a5f' : '#e2e8f0'}`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Card>
|
||||
|
||||
{/* Results */}
|
||||
{sorted.length === 0 ? (
|
||||
<EmptyState
|
||||
title="Keine Treffer gefunden"
|
||||
description="Passen Sie die Suchkriterien an oder wechseln Sie den Filter."
|
||||
/>
|
||||
{isLoading ? (
|
||||
<FeedSkeleton />
|
||||
) : sorted.length === 0 ? (
|
||||
<FeedEmptyState filtered={filterSource !== 'ALL'} />
|
||||
) : (
|
||||
sorted.map(({ match, property }) => (
|
||||
<ResultCard
|
||||
key={match.id}
|
||||
property={property}
|
||||
match={match}
|
||||
onCompare={handleToggleCompare}
|
||||
isInCompare={isInCompare(property.id)}
|
||||
/>
|
||||
))
|
||||
<UnifiedResultFeed results={sorted} isInCompare={isInCompare} onCompare={handleCompare} />
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Compare Tray */}
|
||||
{compareTray.length > 0 && (
|
||||
<Box
|
||||
sx={{
|
||||
|
||||
Reference in New Issue
Block a user