Benjamin Sutter
b2530f9e20
Reale Jahresbelastung (Change 6): - FitOutCostPanel zeigt Jahresmiete + amortisierte Ausbaukosten für alle fitOut-Werte - FULL/PREMIUM: Ausbau CHF 0 (bezugsfertig), SHELL/BASIC: CRB/BKP-Richtwerte amortisiert über 5 J. - Match-Card-Chip zeigt geschätzte Investition (orange wenn >100k) - FitOutInvestment-Typ + calcFitOutInvestment() in fitOutUtils.ts - BackendAIService + MockAIService mit generateFitOutAdvice (IAIService-Interface) Must-have Kriterien (Nicht prüfbar Fix): - ÖV-Anbindung: Minutengrenze aus Freitext extrahiert, gegen publicTransportMinutes geprüft - Mindestfläche: m²-Wert aus Freitext extrahiert, gegen areaSqm geprüft - Ausbaugrad: neues Keyword-Rule für FULL/PREMIUM fitOut-Datenpflege: - fitOut-Werte zu 32 fehlenden Properties ergänzt (Logistik=SHELL, Standard=BASIC, Modern=FULL) - MAB-Werte (200/150/250 CHF/m²) zu 3 BASIC-Objekten hinzugefügt Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
197 lines
12 KiB
TypeScript
197 lines
12 KiB
TypeScript
import { Box, Button, Chip, Paper, Typography } from '@mui/material'
|
||
import { Building2, Clock, ExternalLink, HardHat, Info, Layers, Tag, Train, TrendingUp } from 'lucide-react'
|
||
import { useMatchDetail } from '../../hooks/useMatches'
|
||
import { ResultType } from '../../domain/enums'
|
||
import type { Property } from '../../domain/property'
|
||
import { FLOOR_LABEL, ASSET_LABELS, RISK_LABELS, SOURCE_LABELS, PASSERBY_LABELS, KeyFactRow, UnitRow } from './MatchDetailPropertyDetails'
|
||
import { FloorPlanSection } from './FloorPlanSection'
|
||
import { DS_TEXT, DS_BG, DS_SURFACE, DS_BORDER, DS_MARKET_SIGNAL } from '../../lib/ds'
|
||
|
||
type Match = NonNullable<ReturnType<typeof useMatchDetail>['data']>
|
||
|
||
interface MatchDetailPropertySectionsProps {
|
||
property: Property
|
||
match: Match
|
||
}
|
||
|
||
export function MatchDetailPropertySections({ property, match }: MatchDetailPropertySectionsProps) {
|
||
const units = property.units ?? []
|
||
const matchedUnit = units.find(u => u.id === match.unitId)
|
||
const flexibleUnits = units.filter(u => u.isFlexible && u.minLettableSqm != null)
|
||
const preMarketUnits = units.filter(u => u.schattenmarktRelease?.enabled)
|
||
const otherUnits = units.filter(u => !u.schattenmarktRelease?.enabled)
|
||
const totalMonthly = Math.round(property.areaSqm * property.rentPricePerSqm / 12)
|
||
const rawMonthlyPerSqm = property.rentPricePerSqm / 12
|
||
const monthlyPerSqmLabel = Number.isInteger(rawMonthlyPerSqm)
|
||
? `CHF ${rawMonthlyPerSqm}.–`
|
||
: `CHF ${rawMonthlyPerSqm.toLocaleString('de-CH', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
|
||
const minLettable = property.areaSqmMin ?? (flexibleUnits.length > 0 ? Math.min(...flexibleUnits.map(u => u.minLettableSqm!)) : undefined)
|
||
const sourceLabel = property.sourceLabel ?? property.sourceMeta?.sourceLabel ?? SOURCE_LABELS[property.sourceType] ?? property.sourceType
|
||
|
||
return (
|
||
<>
|
||
{/* Preis */}
|
||
<Paper sx={{ p: 2.5 }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
|
||
<Tag size={15} color={DS_TEXT.secondary} />
|
||
<Typography variant="h6" sx={{ fontWeight: 700 }}>Preis</Typography>
|
||
</Box>
|
||
<KeyFactRow label="Monatliche Miete" value={`CHF ${totalMonthly.toLocaleString('de-CH')}.–`} />
|
||
<KeyFactRow label="Pro m²/Monat" value={monthlyPerSqmLabel} />
|
||
<KeyFactRow label="Pro m²/Jahr" value={`CHF ${property.rentPricePerSqm.toLocaleString('de-CH')}.–`} />
|
||
{property.ancillaryCosts != null && (
|
||
<KeyFactRow label="Nebenkosten" value={`CHF ${Math.round(property.areaSqm * property.ancillaryCosts / 12).toLocaleString('de-CH')}/Mt. (CHF ${property.ancillaryCosts}/m²/a)`} />
|
||
)}
|
||
</Paper>
|
||
|
||
{/* Hauptangaben */}
|
||
<Paper sx={{ p: 2.5 }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
|
||
<Info size={15} color={DS_TEXT.secondary} />
|
||
<Typography variant="h6" sx={{ fontWeight: 700 }}>Hauptangaben</Typography>
|
||
</Box>
|
||
<KeyFactRow label="Verfügbarkeit" value={property.availabilityDate ? new Date(property.availabilityDate).toLocaleDateString('de-CH', { day: 'numeric', month: 'long', year: 'numeric' }) : 'Auf Anfrage'} />
|
||
<KeyFactRow label="Objekttyp" value={ASSET_LABELS[property.assetType] ?? property.assetType} />
|
||
<KeyFactRow label="Nutzfläche" value={`${property.areaSqm.toLocaleString('de-CH')} m²`} />
|
||
{minLettable != null && <KeyFactRow label="Mindestnutzfläche" value={`${minLettable.toLocaleString('de-CH')} m²`} />}
|
||
{property.contractDurationMonths != null && <KeyFactRow label="Mietdauer" value={`${property.contractDurationMonths} Monate`} />}
|
||
{(property.floorLevel != null || matchedUnit) && (
|
||
<KeyFactRow label="Stockwerk" value={FLOOR_LABEL((matchedUnit?.floorLevel ?? property.floorLevel)!)} />
|
||
)}
|
||
{property.currentTenant && <KeyFactRow label="Aktueller Mieter" value={property.currentTenant} />}
|
||
{property.leaseEndDate && <KeyFactRow label="Mietvertragsende" value={new Date(property.leaseEndDate).toLocaleDateString('de-CH', { month: 'long', year: 'numeric' })} />}
|
||
{property.breakoutOption && <KeyFactRow label="Break-out Option" value={property.breakoutOptionDate ? new Date(property.breakoutOptionDate).toLocaleDateString('de-CH', { month: 'long', year: 'numeric' }) : 'Ja'} />}
|
||
{property.riskLevel && <KeyFactRow label="Risikoeinschätzung" value={RISK_LABELS[property.riskLevel] ?? property.riskLevel} />}
|
||
{property.expansionPotentialSqm != null && <KeyFactRow label="Ausbaupotenzial" value={`+${property.expansionPotentialSqm.toLocaleString('de-CH')} m²`} />}
|
||
{property.hardFacts?.fitOut && (() => {
|
||
const LABELS: Record<string, string> = { SHELL: 'Rohbau', BASIC: 'Basisausbau', FULL: 'Vollausbau', PREMIUM: 'Premiumausbau' }
|
||
const base = LABELS[property.hardFacts!.fitOut!] ?? property.hardFacts!.fitOut!
|
||
const mab = property.hardFacts!.mieterausbaubeitragPerSqm
|
||
return <KeyFactRow label="Ausbaustandard" value={mab ? `${base} + CHF ${mab}/m² MAB` : base} />
|
||
})()}
|
||
</Paper>
|
||
|
||
{/* Eigenschaften */}
|
||
{property.softFactors && (
|
||
<Paper sx={{ p: 2.5 }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
|
||
<TrendingUp size={15} color={DS_TEXT.secondary} />
|
||
<Typography variant="h6" sx={{ fontWeight: 700 }}>Eigenschaften</Typography>
|
||
</Box>
|
||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
||
{property.softFactors.publicTransportMinutes != null && (
|
||
<Chip size="small" icon={<Train size={11} />} label={`ÖV: ${property.softFactors.publicTransportMinutes} Min. zu Fuss`} sx={{ bgcolor: DS_SURFACE.blue.bg, color: DS_MARKET_SIGNAL.accent, border: `1px solid ${DS_SURFACE.blue.border}`, fontWeight: 500 }} />
|
||
)}
|
||
{property.softFactors.parkingSpots != null && property.softFactors.parkingSpots > 0 && (
|
||
<Chip size="small" label={`${property.softFactors.parkingSpots} Parkplätze`} sx={{ bgcolor: DS_BG.page, color: DS_TEXT.primary, border: `1px solid ${DS_BORDER.default}`, fontWeight: 500 }} />
|
||
)}
|
||
{property.softFactors.prestige != null && property.softFactors.prestige >= 80 && (
|
||
<Chip size="small" label="Prestigestandort" sx={{ bgcolor: DS_SURFACE.warning.bg, color: DS_TEXT.warningDark, border: `1px solid ${DS_SURFACE.warning.border}`, fontWeight: 500 }} />
|
||
)}
|
||
{property.softFactors.visibilityScore != null && property.softFactors.visibilityScore >= 80 && (
|
||
<Chip size="small" label="Hohe Sichtbarkeit" sx={{ bgcolor: DS_SURFACE.warning.bg, color: DS_TEXT.warningDark, border: `1px solid ${DS_SURFACE.warning.border}`, fontWeight: 500 }} />
|
||
)}
|
||
{property.softFactors.passerbyFrequency && (
|
||
<Chip size="small" label={`Laufkundschaft: ${PASSERBY_LABELS[property.softFactors.passerbyFrequency]}`} sx={{ bgcolor: DS_SURFACE.success.bg, color: DS_TEXT.success, border: `1px solid ${DS_SURFACE.success.border}`, fontWeight: 500 }} />
|
||
)}
|
||
{property.softFactors.talentAccess != null && property.softFactors.talentAccess >= 80 && (
|
||
<Chip size="small" label={`Talentindex: ${property.softFactors.talentAccess}`} sx={{ bgcolor: DS_SURFACE.purple.bg, color: DS_TEXT.signalDark, border: `1px solid ${DS_SURFACE.purple.border}`, fontWeight: 500 }} />
|
||
)}
|
||
</Box>
|
||
</Paper>
|
||
)}
|
||
|
||
{/* Wegzeit */}
|
||
{property.softFactors?.publicTransportMinutes != null && (
|
||
<Paper sx={{ p: 2.5 }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
|
||
<Clock size={15} color={DS_TEXT.secondary} />
|
||
<Typography variant="h6" sx={{ fontWeight: 700 }}>Wegzeit</Typography>
|
||
</Box>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: '50%', bgcolor: DS_SURFACE.blue.bg, border: `1px solid ${DS_SURFACE.blue.border}`, flexShrink: 0 }}>
|
||
<Train size={18} color={DS_MARKET_SIGNAL.accent} />
|
||
</Box>
|
||
<Box>
|
||
<Typography variant="body2" sx={{ fontWeight: 600 }}>{property.softFactors.publicTransportMinutes} Min. zu Fuss</Typography>
|
||
<Typography variant="caption" color="text.secondary">Nächster ÖV-Anschluss — {property.location.city}</Typography>
|
||
</Box>
|
||
</Box>
|
||
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1 }}>
|
||
Die Zeiten beziehen sich auf die Strecke zu Fuss.
|
||
</Typography>
|
||
</Paper>
|
||
)}
|
||
|
||
{/* Einheiten */}
|
||
{units.length > 0 && (
|
||
<Paper sx={{ p: 2.5 }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
|
||
<Layers size={15} color={DS_TEXT.secondary} />
|
||
<Typography variant="h6" sx={{ fontWeight: 700 }}>Einheiten</Typography>
|
||
</Box>
|
||
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 80px 110px 120px auto', gap: 1.5, px: 2, mb: 0.75 }}>
|
||
{['Einheit', 'Fläche', 'Miete', 'Verfügbar ab', 'Status'].map(h => (
|
||
<Typography key={h} variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>{h}</Typography>
|
||
))}
|
||
</Box>
|
||
{preMarketUnits.map(u => <UnitRow key={u.id} unit={u} highlighted={u.id === match.unitId || preMarketUnits.length === 1} />)}
|
||
{otherUnits.map(u => <UnitRow key={u.id} unit={u} highlighted={u.id === match.unitId} />)}
|
||
</Paper>
|
||
)}
|
||
|
||
{/* Grundriss */}
|
||
{(() => {
|
||
const plans: Array<{ url: string; label?: string }> = []
|
||
if (matchedUnit?.floorPlanUrl) {
|
||
const lbl = matchedUnit.unitLabel
|
||
? `${FLOOR_LABEL(matchedUnit.floorLevel)} ${matchedUnit.unitLabel}`
|
||
: FLOOR_LABEL(matchedUnit.floorLevel)
|
||
plans.push({ url: matchedUnit.floorPlanUrl, label: units.length > 1 ? lbl : undefined })
|
||
} else {
|
||
units.filter(u => u.floorPlanUrl).forEach(u => {
|
||
const lbl = u.unitLabel ? `${FLOOR_LABEL(u.floorLevel)} ${u.unitLabel}` : FLOOR_LABEL(u.floorLevel)
|
||
plans.push({ url: u.floorPlanUrl!, label: plans.length > 0 || units.filter(x => x.floorPlanUrl).length > 1 ? lbl : undefined })
|
||
})
|
||
}
|
||
if (plans.length === 0 && property.floorPlanUrl) plans.push({ url: property.floorPlanUrl })
|
||
return <FloorPlanSection plans={plans} />
|
||
})()}
|
||
|
||
{/* Beschreibung */}
|
||
{property.description && (
|
||
<Paper sx={{ p: 2.5 }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
|
||
<Building2 size={15} color={DS_TEXT.secondary} />
|
||
<Typography variant="h6" sx={{ fontWeight: 700 }}>Beschreibung</Typography>
|
||
</Box>
|
||
<Typography variant="body2" sx={{ lineHeight: 1.75, color: DS_TEXT.primary, whiteSpace: 'pre-wrap' }}>
|
||
{property.description}
|
||
</Typography>
|
||
</Paper>
|
||
)}
|
||
|
||
{/* Quelle & Referenz */}
|
||
<Paper sx={{ p: 2.5 }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
|
||
<Info size={15} color={DS_TEXT.secondary} />
|
||
<Typography variant="h6" sx={{ fontWeight: 700 }}>Quelle & Referenz</Typography>
|
||
</Box>
|
||
<KeyFactRow label="Datenquelle" value={sourceLabel} />
|
||
{property.propertyNumber && <KeyFactRow label="Objektnummer" value={property.propertyNumber} />}
|
||
{property.importedFrom && <KeyFactRow label="Importiert aus" value={property.importedFrom} />}
|
||
{property.dataQuality.lastVerifiedAt && (
|
||
<KeyFactRow label="Zuletzt verifiziert" value={new Date(property.dataQuality.lastVerifiedAt).toLocaleDateString('de-CH', { day: 'numeric', month: 'long', year: 'numeric' })} />
|
||
)}
|
||
{property.sourceUrl && property.resultType === ResultType.MAISON_WORK && (
|
||
<Box sx={{ mt: 1.25 }}>
|
||
<Button size="small" variant="outlined" endIcon={<ExternalLink size={12} />} href={property.sourceUrl} target="_blank" rel="noopener noreferrer" sx={{ textTransform: 'none', fontSize: '0.8rem', borderColor: DS_BORDER.strong, color: DS_TEXT.primary }}>
|
||
Zum Originalinserat
|
||
</Button>
|
||
</Box>
|
||
)}
|
||
</Paper>
|
||
</>
|
||
)
|
||
}
|