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>
78 lines
3.5 KiB
TypeScript
78 lines
3.5 KiB
TypeScript
import { Box, Chip, Paper, Typography } from '@mui/material'
|
||
import { Banknote, Calendar, HardHat, MapPin, Maximize2, Tag } from 'lucide-react'
|
||
import type { Match } from '../../domain/match'
|
||
import type { Property } from '../../domain/property'
|
||
import type { FutureSignal } from '../../domain/futureSignal'
|
||
|
||
interface FactRowProps {
|
||
icon: React.ReactNode
|
||
label: string
|
||
value: string
|
||
}
|
||
|
||
function FactRow({ icon, label, value }: FactRowProps) {
|
||
return (
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, py: 1, borderBottom: '1px solid #f1f5f9' }}>
|
||
<Box sx={{ color: '#64748b', flexShrink: 0 }}>{icon}</Box>
|
||
<Typography variant="body2" color="text.secondary" sx={{ minWidth: 140 }}>{label}</Typography>
|
||
<Typography variant="body2" sx={{ fontWeight: 500 }}>{value}</Typography>
|
||
</Box>
|
||
)
|
||
}
|
||
|
||
interface Props {
|
||
match: Match
|
||
property: Property | null
|
||
signal: FutureSignal | null
|
||
}
|
||
|
||
export function PropertyOverviewPanel({ match, property, signal }: Props) {
|
||
if (!property && !signal) return null
|
||
|
||
const isFuture = match.resultType === 'FUTURE_AVAILABILITY'
|
||
|
||
const rows: FactRowProps[] = isFuture ? [
|
||
{ icon: <MapPin size={15} />, label: 'Standorthinweis', value: signal?.locationHint ?? '–' },
|
||
{ icon: <Maximize2 size={15} />, label: 'Flächenschätzung', value: signal?.areaSqmEstimate ? `~${signal.areaSqmEstimate} m²` : 'unbekannt' },
|
||
{ icon: <Calendar size={15} />, label: 'Zeithorizont', value: signal?.timeHorizonMonths ? `~${signal.timeHorizonMonths} Monate` : '–' },
|
||
{ icon: <Tag size={15} />, label: 'Wahrscheinlichkeit', value: signal?.probability ? `${Math.round(signal.probability * 100)}%` : '–' },
|
||
] : [
|
||
{ icon: <MapPin size={15} />, label: 'Standort', value: property ? `${property.location.city}${property.location.district ? `, ${property.location.district}` : ''}` : '–' },
|
||
{ icon: <Maximize2 size={15} />, label: 'Nutzfläche', value: property ? `${property.areaSqm} m²` : '–' },
|
||
{ icon: <Banknote size={15} />, label: 'Mietpreis', value: property?.rentPricePerSqm ? `CHF ${property.rentPricePerSqm}/m²/Jahr` : '–' },
|
||
{ icon: <Calendar size={15} />, label: 'Verfügbar ab', value: property?.availabilityDate ?? '–' },
|
||
{ icon: <Tag size={15} />, label: 'Objekttyp', value: property?.assetType ?? '–' },
|
||
...(property?.hardFacts?.fitOut ? [{
|
||
icon: <HardHat size={15} />,
|
||
label: 'Ausbaustandard',
|
||
value: (() => {
|
||
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 mab ? `${base} + CHF ${mab}/m² MAB` : base
|
||
})(),
|
||
}] : []),
|
||
]
|
||
|
||
return (
|
||
<Paper sx={{ p: 2.5, mb: 2 }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1.5 }}>
|
||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||
{isFuture ? 'Signal-Übersicht' : 'Objekt-Übersicht'}
|
||
</Typography>
|
||
{property?.status && (
|
||
<Chip label={property.status} size="small" variant="outlined" />
|
||
)}
|
||
</Box>
|
||
{rows.map((row, i) => (
|
||
<FactRow key={i} {...row} />
|
||
))}
|
||
{property?.description && (
|
||
<Typography variant="body2" color="text.secondary" sx={{ mt: 1.5, fontStyle: 'italic' }}>
|
||
{property.description}
|
||
</Typography>
|
||
)}
|
||
</Paper>
|
||
)
|
||
}
|