refactor: extract CompareTableBody from Compare.tsx (441 → 147 lines)
Move 18 inline table row definitions into CompareTableBody component Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
@@ -0,0 +1,340 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import {
|
||||
Box,
|
||||
Chip,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableRow,
|
||||
Typography,
|
||||
} from '@mui/material'
|
||||
import { AlertOctagon, AlertTriangle, CheckCircle2, Trophy, XCircle, Zap } from 'lucide-react'
|
||||
import {
|
||||
HARD_CRITERIA,
|
||||
SCORE_COLOR,
|
||||
TYPE_META,
|
||||
RISK_LEVEL_ORDER,
|
||||
getProp,
|
||||
getSig,
|
||||
LABEL_SX,
|
||||
DATA_SX,
|
||||
scoreBar,
|
||||
} from './compareUtils'
|
||||
import { CompareCell, MissingDataCell } from './index'
|
||||
import type { UnifiedMatchResult } from '../../domain/unifiedResult'
|
||||
|
||||
// ── Local helper ──────────────────────────────────────────────────────────────
|
||||
|
||||
function row(label: string, cells: ReactNode[]) {
|
||||
return (
|
||||
<TableRow hover key={label}>
|
||||
<TableCell sx={LABEL_SX}>{label}</TableCell>
|
||||
{cells.map((cell, i) => (
|
||||
<TableCell key={i} sx={DATA_SX}>{cell}</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Props ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
interface CompareTableBodyProps {
|
||||
compareItems: UnifiedMatchResult[]
|
||||
bestScoreIdx: number
|
||||
worstConfIdx: number
|
||||
worstDQIdx: number
|
||||
missingCriticalCounts: number[]
|
||||
maxMissingCritical: number
|
||||
}
|
||||
|
||||
// ── Component ─────────────────────────────────────────────────────────────────
|
||||
|
||||
export function CompareTableBody({
|
||||
compareItems,
|
||||
bestScoreIdx,
|
||||
worstConfIdx,
|
||||
worstDQIdx,
|
||||
missingCriticalCounts,
|
||||
maxMissingCritical,
|
||||
}: CompareTableBodyProps) {
|
||||
return (
|
||||
<TableBody>
|
||||
|
||||
{/* 1. Result Type */}
|
||||
{row('1. Result-Typ', compareItems.map(item => {
|
||||
const m = TYPE_META[item.resultType] ?? { label: item.resultType, color: '#64748b' }
|
||||
return <Chip label={m.label} size="small" sx={{ bgcolor: m.color, color: 'white', fontWeight: 600, fontSize: 11 }} />
|
||||
}))}
|
||||
|
||||
{/* 2. Source / Provenance */}
|
||||
{row('2. Quelle / Provenienz', compareItems.map(item => {
|
||||
const prop = getProp(item)
|
||||
const sig = getSig(item)
|
||||
const label = prop?.sourceLabel ?? sig?.source?.type ?? null
|
||||
return label
|
||||
? <Typography variant="body2">{label}</Typography>
|
||||
: <MissingDataCell reason="Quellenangabe fehlt — Datenverlässlichkeit unklar" />
|
||||
}))}
|
||||
|
||||
{/* 3. Match Score */}
|
||||
{row('3. Match Score', compareItems.map((item, idx) => (
|
||||
<CompareCell
|
||||
highlight={idx === bestScoreIdx ? 'best' : 'none'}
|
||||
icon={idx === bestScoreIdx ? <Trophy size={14} color="#1a7a4a" /> : undefined}
|
||||
iconTooltip="Höchster Match Score"
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.5 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 800, color: SCORE_COLOR(item.matchScore), lineHeight: 1 }}>
|
||||
{item.matchScore}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">/100</Typography>
|
||||
</Box>
|
||||
</CompareCell>
|
||||
)))}
|
||||
|
||||
{/* 4. Confidence Score */}
|
||||
{row('4. Konfidenz', compareItems.map((item, idx) => (
|
||||
<CompareCell
|
||||
highlight={idx === worstConfIdx && item.match.confidenceLevel < 0.6 ? 'worst' : 'none'}
|
||||
icon={idx === worstConfIdx && item.match.confidenceLevel < 0.6 ? <AlertTriangle size={14} color="#d97706" /> : undefined}
|
||||
iconTooltip="Niedrigste Konfidenz"
|
||||
>
|
||||
{scoreBar(item.match.confidenceLevel)}
|
||||
</CompareCell>
|
||||
)))}
|
||||
|
||||
{/* 5. Data Quality Score */}
|
||||
{row('5. Datenqualität', compareItems.map((item, idx) => {
|
||||
const prop = getProp(item)
|
||||
const dq = prop?.dataQuality.score ?? null
|
||||
if (dq === null) return <MissingDataCell reason="Keine Datenqualitätsinformation verfügbar" />
|
||||
return (
|
||||
<CompareCell
|
||||
highlight={idx === worstDQIdx && dq < 0.6 ? 'worst' : 'none'}
|
||||
icon={idx === worstDQIdx && dq < 0.6 ? <AlertTriangle size={14} color="#d97706" /> : undefined}
|
||||
iconTooltip="Niedrigste Datenqualität"
|
||||
>
|
||||
{scoreBar(dq)}
|
||||
</CompareCell>
|
||||
)
|
||||
}))}
|
||||
|
||||
{/* 6. Asset Type */}
|
||||
{row('6. Nutzungstyp', compareItems.map(item => {
|
||||
const prop = getProp(item)
|
||||
const label = prop?.assetType ?? null
|
||||
return label
|
||||
? <Chip label={label} size="small" variant="outlined" />
|
||||
: <MissingDataCell />
|
||||
}))}
|
||||
|
||||
{/* 7. Location */}
|
||||
{row('7. Standort', compareItems.map(item => {
|
||||
const prop = getProp(item)
|
||||
const sig = getSig(item)
|
||||
const city = prop?.location?.city ?? sig?.locationHint ?? null
|
||||
const district = prop?.location?.district
|
||||
return city
|
||||
? <Typography variant="body2">{city}{district ? `, ${district}` : ''}</Typography>
|
||||
: <MissingDataCell />
|
||||
}))}
|
||||
|
||||
{/* 8. Area */}
|
||||
{row('8. Fläche', compareItems.map(item => {
|
||||
const prop = getProp(item)
|
||||
const sig = getSig(item)
|
||||
const area = prop?.areaSqm ?? sig?.areaSqmEstimate ?? null
|
||||
return area !== null
|
||||
? <Typography variant="body2">{area.toLocaleString('de-CH')} m²{sig ? ' (Schätzung)' : ''}</Typography>
|
||||
: <MissingDataCell />
|
||||
}))}
|
||||
|
||||
{/* 9. Rent / Budget Fit */}
|
||||
{row('9. Miete / Budget', compareItems.map(item => {
|
||||
const prop = getProp(item)
|
||||
if (!prop) return <MissingDataCell reason="Mietpreis nur für bestätigte Objekte verfügbar" />
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
CHF {prop.rentPricePerSqm}/m²
|
||||
</Typography>
|
||||
{prop.totalRentMonthly && (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{prop.totalRentMonthly.toLocaleString('de-CH')} CHF/Monat
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}))}
|
||||
|
||||
{/* 10. Availability / Time Horizon */}
|
||||
{row('10. Verfügbarkeit', compareItems.map(item => {
|
||||
const prop = getProp(item)
|
||||
const sig = getSig(item)
|
||||
if (prop) return <Typography variant="body2">{prop.availabilityDate}</Typography>
|
||||
if (sig) return (
|
||||
<CompareCell highlight="future" icon={<Zap size={14} color="#7c3aed" />} iconTooltip="Probabilistisches Signal — keine bestätigte Verfügbarkeit">
|
||||
<Typography variant="body2">~{sig.timeHorizonMonths} Monate</Typography>
|
||||
<Typography variant="caption" sx={{ color: '#7c3aed' }}>
|
||||
{Math.round(sig.probability * 100)}% Wahrscheinlichkeit
|
||||
</Typography>
|
||||
</CompareCell>
|
||||
)
|
||||
return <MissingDataCell />
|
||||
}))}
|
||||
|
||||
{/* 11. Hard Criteria Fit */}
|
||||
{row('11. Hardkriterien', compareItems.map(item => {
|
||||
const hardMatches = item.match.positiveFactors.filter(f => HARD_CRITERIA.has(f.criterion))
|
||||
const total = 4
|
||||
const count = hardMatches.length
|
||||
const color = count >= 3 ? '#1a7a4a' : count >= 2 ? '#d97706' : '#c0392b'
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="body2" sx={{ fontWeight: 700, color }}>
|
||||
{count}/{total} erfüllt
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mt: 0.5 }}>
|
||||
{hardMatches.map(f => (
|
||||
<Chip key={f.criterion} label={f.criterion} size="small"
|
||||
icon={<CheckCircle2 size={10} />}
|
||||
sx={{ fontSize: 10, bgcolor: '#f0fdf4', color: '#166534', '& .MuiChip-icon': { color: '#1a7a4a' } }} />
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}))}
|
||||
|
||||
{/* 12. Top Soft Factors */}
|
||||
{row('12. Soft Factors', compareItems.map(item => {
|
||||
const softFactors = item.match.positiveFactors
|
||||
.filter(f => !HARD_CRITERIA.has(f.criterion))
|
||||
.slice(0, 3)
|
||||
if (softFactors.length === 0) return <MissingDataCell />
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{softFactors.map(f => (
|
||||
<Chip key={f.criterion} label={f.criterion} size="small"
|
||||
sx={{ fontSize: 10, bgcolor: '#eff6ff', color: '#1e40af' }} />
|
||||
))}
|
||||
</Box>
|
||||
)
|
||||
}))}
|
||||
|
||||
{/* 13. Main Strengths */}
|
||||
{row('13. Stärken', compareItems.map(item => {
|
||||
const top = item.match.positiveFactors.slice(0, 2)
|
||||
if (top.length === 0) return <MissingDataCell />
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||||
{top.map((f, i) => (
|
||||
<Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.5 }}>
|
||||
<CheckCircle2 size={13} color="#1a7a4a" style={{ flexShrink: 0, marginTop: 2 }} />
|
||||
<Typography variant="caption" sx={{ lineHeight: 1.4 }}>{f.explanation}</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
)
|
||||
}))}
|
||||
|
||||
{/* 14. Main Tradeoffs */}
|
||||
{row('14. Abwägungen', compareItems.map(item => {
|
||||
const tradeoffs = item.match.tradeoffs?.slice(0, 2) ?? []
|
||||
if (tradeoffs.length === 0) return (
|
||||
<Typography variant="body2" color="text.secondary">Keine signifikanten Abwägungen</Typography>
|
||||
)
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||||
{tradeoffs.map((t, i) => (
|
||||
<Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.5 }}>
|
||||
<AlertTriangle size={13} color="#d97706" style={{ flexShrink: 0, marginTop: 2 }} />
|
||||
<Typography variant="caption" sx={{ lineHeight: 1.4 }}>{t.criterion}: {t.concern}</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
)
|
||||
}))}
|
||||
|
||||
{/* 15. Main Risks */}
|
||||
{row('15. Risiken', compareItems.map(item => {
|
||||
const risks = [...(item.match.risks ?? [])].sort(
|
||||
(a, b) => (RISK_LEVEL_ORDER[a.level] ?? 4) - (RISK_LEVEL_ORDER[b.level] ?? 4)
|
||||
).slice(0, 2)
|
||||
if (risks.length === 0) return (
|
||||
<Typography variant="body2" color="text.secondary">Keine identifizierten Risiken</Typography>
|
||||
)
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||||
{risks.map((r, i) => (
|
||||
<Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.5 }}>
|
||||
<XCircle size={13} color={r.level === 'CRITICAL' || r.level === 'HIGH' ? '#c0392b' : '#d97706'} style={{ flexShrink: 0, marginTop: 2 }} />
|
||||
<Typography variant="caption" sx={{ lineHeight: 1.4 }}>{r.description}</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
)
|
||||
}))}
|
||||
|
||||
{/* 16. Missing Data */}
|
||||
{row('16. Fehlende Daten', compareItems.map((item, idx) => {
|
||||
const total = item.match.missingData?.length ?? 0
|
||||
const critical = missingCriticalCounts[idx]
|
||||
if (total === 0) return (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<CheckCircle2 size={14} color="#1a7a4a" />
|
||||
<Typography variant="body2" sx={{ color: '#1a7a4a' }}>Vollständig</Typography>
|
||||
</Box>
|
||||
)
|
||||
return (
|
||||
<CompareCell
|
||||
highlight={critical > 0 && critical === maxMissingCritical ? 'critical' : critical > 0 ? 'worst' : 'none'}
|
||||
icon={critical > 0 ? <AlertOctagon size={14} color="#c0392b" /> : <AlertTriangle size={14} color="#d97706" />}
|
||||
iconTooltip={critical > 0 ? 'Kritische Pflichtfelder fehlen' : 'Optionale Felder fehlen'}
|
||||
>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>{total} fehlend</Typography>
|
||||
{critical > 0 && (
|
||||
<Typography variant="caption" color="error">{critical} kritisch</Typography>
|
||||
)}
|
||||
</CompareCell>
|
||||
)
|
||||
}))}
|
||||
|
||||
{/* 17. Future Availability Context */}
|
||||
{row('17. Zukunftskontext', compareItems.map(item => {
|
||||
const sig = getSig(item)
|
||||
if (!sig) return (
|
||||
<Typography variant="body2" color="text.secondary" sx={{ fontStyle: 'italic' }}>Nicht anwendbar</Typography>
|
||||
)
|
||||
return (
|
||||
<CompareCell highlight="future" icon={<Zap size={14} color="#7c3aed" />} iconTooltip="Probabilistisches Zukunftssignal">
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>
|
||||
<Typography variant="caption" sx={{ fontWeight: 600, color: '#7c3aed' }}>
|
||||
{Math.round(sig.probability * 100)}% Wahrscheinlichkeit
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Sensitivität: {sig.sensitivityLevel}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontStyle: 'italic' }}>
|
||||
{sig.disclaimer}
|
||||
</Typography>
|
||||
</Box>
|
||||
</CompareCell>
|
||||
)
|
||||
}))}
|
||||
|
||||
{/* 18. Recommended Next Action */}
|
||||
{row('18. Nächste Aktion', compareItems.map(item => {
|
||||
const action = item.match.nextBestActions?.[0]
|
||||
if (!action) return <MissingDataCell />
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>{action.label}</Typography>
|
||||
{action.description && (
|
||||
<Typography variant="caption" color="text.secondary">{action.description}</Typography>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}))}
|
||||
|
||||
</TableBody>
|
||||
)
|
||||
}
|
||||
@@ -3,3 +3,4 @@ export { CompareColumnHeader } from './CompareColumnHeader'
|
||||
export { CompareCell, MissingDataCell } from './CompareCell'
|
||||
export { AICompareSummary } from './AICompareSummary'
|
||||
export { CompareCriteriaCard } from './CompareCriteriaCard'
|
||||
export { CompareTableBody } from './CompareTableBody'
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import {
|
||||
Alert,
|
||||
Box,
|
||||
@@ -7,50 +6,27 @@ import {
|
||||
Chip,
|
||||
Stack,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Typography,
|
||||
} from '@mui/material'
|
||||
import { Trophy, AlertTriangle, AlertOctagon, Zap, CheckCircle2, XCircle } from 'lucide-react'
|
||||
import { useNavigate } from 'react-router'
|
||||
import { useCompareStore } from '../../stores/compareStore'
|
||||
import {
|
||||
CompareEmptyState,
|
||||
CompareColumnHeader,
|
||||
CompareCell,
|
||||
MissingDataCell,
|
||||
AICompareSummary,
|
||||
CompareCriteriaCard,
|
||||
CompareTableBody,
|
||||
} from '../../components/compare'
|
||||
import { AddToPipelineDialog } from '../../components/shortlist'
|
||||
import {
|
||||
HARD_CRITERIA,
|
||||
SCORE_COLOR,
|
||||
TYPE_META,
|
||||
RISK_LEVEL_ORDER,
|
||||
getProp,
|
||||
getSig,
|
||||
LABEL_SX,
|
||||
DATA_SX,
|
||||
scoreBar,
|
||||
} from '../../components/compare/compareUtils'
|
||||
import { useCompareData } from '../../hooks/useCompareData'
|
||||
|
||||
// ── Module-level helpers ──────────────────────────────────────────────────────
|
||||
|
||||
function row(label: string, cells: ReactNode[]) {
|
||||
return (
|
||||
<TableRow hover key={label}>
|
||||
<TableCell sx={LABEL_SX}>{label}</TableCell>
|
||||
{cells.map((cell, i) => (
|
||||
<TableCell key={i} sx={DATA_SX}>{cell}</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Main component ────────────────────────────────────────────────────────────
|
||||
|
||||
export default function Compare() {
|
||||
@@ -137,285 +113,15 @@ export default function Compare() {
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
<CompareTableBody
|
||||
compareItems={compareItems}
|
||||
bestScoreIdx={bestScoreIdx}
|
||||
worstConfIdx={worstConfIdx}
|
||||
worstDQIdx={worstDQIdx}
|
||||
missingCriticalCounts={missingCriticalCounts}
|
||||
maxMissingCritical={maxMissingCritical}
|
||||
/>
|
||||
|
||||
{/* 1. Result Type */}
|
||||
{row('1. Result-Typ', compareItems.map(item => {
|
||||
const m = TYPE_META[item.resultType] ?? { label: item.resultType, color: '#64748b' }
|
||||
return <Chip label={m.label} size="small" sx={{ bgcolor: m.color, color: 'white', fontWeight: 600, fontSize: 11 }} />
|
||||
}))}
|
||||
|
||||
{/* 2. Source / Provenance */}
|
||||
{row('2. Quelle / Provenienz', compareItems.map(item => {
|
||||
const prop = getProp(item)
|
||||
const sig = getSig(item)
|
||||
const label = prop?.sourceLabel ?? sig?.source?.type ?? null
|
||||
return label
|
||||
? <Typography variant="body2">{label}</Typography>
|
||||
: <MissingDataCell reason="Quellenangabe fehlt — Datenverlässlichkeit unklar" />
|
||||
}))}
|
||||
|
||||
{/* 3. Match Score */}
|
||||
{row('3. Match Score', compareItems.map((item, idx) => (
|
||||
<CompareCell
|
||||
highlight={idx === bestScoreIdx ? 'best' : 'none'}
|
||||
icon={idx === bestScoreIdx ? <Trophy size={14} color="#1a7a4a" /> : undefined}
|
||||
iconTooltip="Höchster Match Score"
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.5 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 800, color: SCORE_COLOR(item.matchScore), lineHeight: 1 }}>
|
||||
{item.matchScore}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">/100</Typography>
|
||||
</Box>
|
||||
</CompareCell>
|
||||
)))}
|
||||
|
||||
{/* 4. Confidence Score */}
|
||||
{row('4. Konfidenz', compareItems.map((item, idx) => (
|
||||
<CompareCell
|
||||
highlight={idx === worstConfIdx && item.match.confidenceLevel < 0.6 ? 'worst' : 'none'}
|
||||
icon={idx === worstConfIdx && item.match.confidenceLevel < 0.6 ? <AlertTriangle size={14} color="#d97706" /> : undefined}
|
||||
iconTooltip="Niedrigste Konfidenz"
|
||||
>
|
||||
{scoreBar(item.match.confidenceLevel)}
|
||||
</CompareCell>
|
||||
)))}
|
||||
|
||||
{/* 5. Data Quality Score */}
|
||||
{row('5. Datenqualität', compareItems.map((item, idx) => {
|
||||
const prop = getProp(item)
|
||||
const dq = prop?.dataQuality.score ?? null
|
||||
if (dq === null) return <MissingDataCell reason="Keine Datenqualitätsinformation verfügbar" />
|
||||
return (
|
||||
<CompareCell
|
||||
highlight={idx === worstDQIdx && dq < 0.6 ? 'worst' : 'none'}
|
||||
icon={idx === worstDQIdx && dq < 0.6 ? <AlertTriangle size={14} color="#d97706" /> : undefined}
|
||||
iconTooltip="Niedrigste Datenqualität"
|
||||
>
|
||||
{scoreBar(dq)}
|
||||
</CompareCell>
|
||||
)
|
||||
}))}
|
||||
|
||||
{/* 6. Asset Type */}
|
||||
{row('6. Nutzungstyp', compareItems.map(item => {
|
||||
const prop = getProp(item)
|
||||
const label = prop?.assetType ?? null
|
||||
return label
|
||||
? <Chip label={label} size="small" variant="outlined" />
|
||||
: <MissingDataCell />
|
||||
}))}
|
||||
|
||||
{/* 7. Location */}
|
||||
{row('7. Standort', compareItems.map(item => {
|
||||
const prop = getProp(item)
|
||||
const sig = getSig(item)
|
||||
const city = prop?.location?.city ?? sig?.locationHint ?? null
|
||||
const district = prop?.location?.district
|
||||
return city
|
||||
? <Typography variant="body2">{city}{district ? `, ${district}` : ''}</Typography>
|
||||
: <MissingDataCell />
|
||||
}))}
|
||||
|
||||
{/* 8. Area */}
|
||||
{row('8. Fläche', compareItems.map(item => {
|
||||
const prop = getProp(item)
|
||||
const sig = getSig(item)
|
||||
const area = prop?.areaSqm ?? sig?.areaSqmEstimate ?? null
|
||||
return area !== null
|
||||
? <Typography variant="body2">{area.toLocaleString('de-CH')} m²{sig ? ' (Schätzung)' : ''}</Typography>
|
||||
: <MissingDataCell />
|
||||
}))}
|
||||
|
||||
{/* 9. Rent / Budget Fit */}
|
||||
{row('9. Miete / Budget', compareItems.map(item => {
|
||||
const prop = getProp(item)
|
||||
if (!prop) return <MissingDataCell reason="Mietpreis nur für bestätigte Objekte verfügbar" />
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
CHF {prop.rentPricePerSqm}/m²
|
||||
</Typography>
|
||||
{prop.totalRentMonthly && (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{prop.totalRentMonthly.toLocaleString('de-CH')} CHF/Monat
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}))}
|
||||
|
||||
{/* 10. Availability / Time Horizon */}
|
||||
{row('10. Verfügbarkeit', compareItems.map(item => {
|
||||
const prop = getProp(item)
|
||||
const sig = getSig(item)
|
||||
if (prop) return <Typography variant="body2">{prop.availabilityDate}</Typography>
|
||||
if (sig) return (
|
||||
<CompareCell highlight="future" icon={<Zap size={14} color="#7c3aed" />} iconTooltip="Probabilistisches Signal — keine bestätigte Verfügbarkeit">
|
||||
<Typography variant="body2">~{sig.timeHorizonMonths} Monate</Typography>
|
||||
<Typography variant="caption" sx={{ color: '#7c3aed' }}>
|
||||
{Math.round(sig.probability * 100)}% Wahrscheinlichkeit
|
||||
</Typography>
|
||||
</CompareCell>
|
||||
)
|
||||
return <MissingDataCell />
|
||||
}))}
|
||||
|
||||
{/* 11. Hard Criteria Fit */}
|
||||
{row('11. Hardkriterien', compareItems.map(item => {
|
||||
const hardMatches = item.match.positiveFactors.filter(f => HARD_CRITERIA.has(f.criterion))
|
||||
const total = 4
|
||||
const count = hardMatches.length
|
||||
const color = count >= 3 ? '#1a7a4a' : count >= 2 ? '#d97706' : '#c0392b'
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="body2" sx={{ fontWeight: 700, color }}>
|
||||
{count}/{total} erfüllt
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mt: 0.5 }}>
|
||||
{hardMatches.map(f => (
|
||||
<Chip key={f.criterion} label={f.criterion} size="small"
|
||||
icon={<CheckCircle2 size={10} />}
|
||||
sx={{ fontSize: 10, bgcolor: '#f0fdf4', color: '#166534', '& .MuiChip-icon': { color: '#1a7a4a' } }} />
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}))}
|
||||
|
||||
{/* 12. Top Soft Factors */}
|
||||
{row('12. Soft Factors', compareItems.map(item => {
|
||||
const softFactors = item.match.positiveFactors
|
||||
.filter(f => !HARD_CRITERIA.has(f.criterion))
|
||||
.slice(0, 3)
|
||||
if (softFactors.length === 0) return <MissingDataCell />
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{softFactors.map(f => (
|
||||
<Chip key={f.criterion} label={f.criterion} size="small"
|
||||
sx={{ fontSize: 10, bgcolor: '#eff6ff', color: '#1e40af' }} />
|
||||
))}
|
||||
</Box>
|
||||
)
|
||||
}))}
|
||||
|
||||
{/* 13. Main Strengths */}
|
||||
{row('13. Stärken', compareItems.map(item => {
|
||||
const top = item.match.positiveFactors.slice(0, 2)
|
||||
if (top.length === 0) return <MissingDataCell />
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||||
{top.map((f, i) => (
|
||||
<Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.5 }}>
|
||||
<CheckCircle2 size={13} color="#1a7a4a" style={{ flexShrink: 0, marginTop: 2 }} />
|
||||
<Typography variant="caption" sx={{ lineHeight: 1.4 }}>{f.explanation}</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
)
|
||||
}))}
|
||||
|
||||
{/* 14. Main Tradeoffs */}
|
||||
{row('14. Abwägungen', compareItems.map(item => {
|
||||
const tradeoffs = item.match.tradeoffs?.slice(0, 2) ?? []
|
||||
if (tradeoffs.length === 0) return (
|
||||
<Typography variant="body2" color="text.secondary">Keine signifikanten Abwägungen</Typography>
|
||||
)
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||||
{tradeoffs.map((t, i) => (
|
||||
<Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.5 }}>
|
||||
<AlertTriangle size={13} color="#d97706" style={{ flexShrink: 0, marginTop: 2 }} />
|
||||
<Typography variant="caption" sx={{ lineHeight: 1.4 }}>{t.criterion}: {t.concern}</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
)
|
||||
}))}
|
||||
|
||||
{/* 15. Main Risks */}
|
||||
{row('15. Risiken', compareItems.map(item => {
|
||||
const risks = [...(item.match.risks ?? [])].sort(
|
||||
(a, b) => (RISK_LEVEL_ORDER[a.level] ?? 4) - (RISK_LEVEL_ORDER[b.level] ?? 4)
|
||||
).slice(0, 2)
|
||||
if (risks.length === 0) return (
|
||||
<Typography variant="body2" color="text.secondary">Keine identifizierten Risiken</Typography>
|
||||
)
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||||
{risks.map((r, i) => (
|
||||
<Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.5 }}>
|
||||
<XCircle size={13} color={r.level === 'CRITICAL' || r.level === 'HIGH' ? '#c0392b' : '#d97706'} style={{ flexShrink: 0, marginTop: 2 }} />
|
||||
<Typography variant="caption" sx={{ lineHeight: 1.4 }}>{r.description}</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
)
|
||||
}))}
|
||||
|
||||
{/* 16. Missing Data */}
|
||||
{row('16. Fehlende Daten', compareItems.map((item, idx) => {
|
||||
const total = item.match.missingData?.length ?? 0
|
||||
const critical = missingCriticalCounts[idx]
|
||||
if (total === 0) return (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<CheckCircle2 size={14} color="#1a7a4a" />
|
||||
<Typography variant="body2" sx={{ color: '#1a7a4a' }}>Vollständig</Typography>
|
||||
</Box>
|
||||
)
|
||||
return (
|
||||
<CompareCell
|
||||
highlight={critical > 0 && critical === maxMissingCritical ? 'critical' : critical > 0 ? 'worst' : 'none'}
|
||||
icon={critical > 0 ? <AlertOctagon size={14} color="#c0392b" /> : <AlertTriangle size={14} color="#d97706" />}
|
||||
iconTooltip={critical > 0 ? 'Kritische Pflichtfelder fehlen' : 'Optionale Felder fehlen'}
|
||||
>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>{total} fehlend</Typography>
|
||||
{critical > 0 && (
|
||||
<Typography variant="caption" color="error">{critical} kritisch</Typography>
|
||||
)}
|
||||
</CompareCell>
|
||||
)
|
||||
}))}
|
||||
|
||||
{/* 17. Future Availability Context */}
|
||||
{row('17. Zukunftskontext', compareItems.map(item => {
|
||||
const sig = getSig(item)
|
||||
if (!sig) return (
|
||||
<Typography variant="body2" color="text.secondary" sx={{ fontStyle: 'italic' }}>Nicht anwendbar</Typography>
|
||||
)
|
||||
return (
|
||||
<CompareCell highlight="future" icon={<Zap size={14} color="#7c3aed" />} iconTooltip="Probabilistisches Zukunftssignal">
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>
|
||||
<Typography variant="caption" sx={{ fontWeight: 600, color: '#7c3aed' }}>
|
||||
{Math.round(sig.probability * 100)}% Wahrscheinlichkeit
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Sensitivität: {sig.sensitivityLevel}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontStyle: 'italic' }}>
|
||||
{sig.disclaimer}
|
||||
</Typography>
|
||||
</Box>
|
||||
</CompareCell>
|
||||
)
|
||||
}))}
|
||||
|
||||
{/* 18. Recommended Next Action */}
|
||||
{row('18. Nächste Aktion', compareItems.map(item => {
|
||||
const action = item.match.nextBestActions?.[0]
|
||||
if (!action) return <MissingDataCell />
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>{action.label}</Typography>
|
||||
{action.description && (
|
||||
<Typography variant="caption" color="text.secondary">{action.description}</Typography>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}))}
|
||||
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user