Benjamin Sutter
e1f4beb898
- DS token migration: Anfragen.tsx + child components (AnfragenInquiryItem, AnfragenMessageBubble) fully migrated; DS_TEXT.brandDark added; scoreTheme.ts moved to src/lib/ with re-export proxy - Hook boundary: Results.tsx no longer calls needService directly — routes through useNeeds() with optional refetchOnMount/gcTime overrides - NewListing.tsx (440L) split into useNewListingForm hook + 8 section components under src/components/new-listing/; page shell reduced to 121 lines - AI hardening: Zod .strict() on all schemas, AIProvenance extended with schemaVersion/ fallbackReason/traceId/latencyMs, AITraceStore stats with p50/p90/p99 + failure breakdowns, MockAIService buildFollowUpQuestions with priority ordering + area-ambiguity detection, prompt templates updated (LIGHT_INDUSTRIAL, budget unit, ambiguity detection, decimal precision) - Tests: all 154 passing; fixed test regression caused by OfferEmailResponseSchema body min(50) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
292 lines
12 KiB
TypeScript
292 lines
12 KiB
TypeScript
import {
|
||
Box,
|
||
Button,
|
||
Chip,
|
||
Paper,
|
||
Typography,
|
||
} from '@mui/material'
|
||
import {
|
||
Building2,
|
||
Clock,
|
||
ExternalLink,
|
||
Info,
|
||
Layers,
|
||
ShieldCheck,
|
||
Tag,
|
||
Train,
|
||
TrendingUp,
|
||
} from 'lucide-react'
|
||
import type { Property } from '../../domain/property'
|
||
import {
|
||
ASSET_LABELS,
|
||
FLOOR_LABEL,
|
||
KeyFactRow,
|
||
PASSERBY_LABELS,
|
||
RISK_LABELS,
|
||
SOURCE_LABELS,
|
||
UnitRow,
|
||
} from './MatchDetailPropertyDetails'
|
||
import { DS_TEXT, DS_BG, DS_SURFACE, DS_BORDER, DS_MARKET_SIGNAL } from '../../lib/ds'
|
||
|
||
interface PropertyDetailPublicSectionsProps {
|
||
property: Property
|
||
highlightUnitId?: string | null
|
||
}
|
||
|
||
export function PropertyDetailPublicSections({ property, highlightUnitId }: PropertyDetailPublicSectionsProps) {
|
||
const preMarketUnits = (property.units ?? []).filter(u => u.schattenmarktRelease?.enabled)
|
||
const otherUnits = (property.units ?? []).filter(u => !u.schattenmarktRelease?.enabled)
|
||
const flexibleUnits = (property.units ?? []).filter(u => u.isFlexible && u.minLettableSqm !== undefined)
|
||
|
||
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={{ mb: 2, 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={{ mb: 2, 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 && (
|
||
<KeyFactRow label="Stockwerk" value={FLOOR_LABEL(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²`} />
|
||
)}
|
||
</Paper>
|
||
|
||
{/* ── Eigenschaften ── */}
|
||
{property.softFactors && (
|
||
<Paper sx={{ mb: 2, 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="Hoher Talentzugang"
|
||
sx={{ bgcolor: DS_SURFACE.purple.bg, color: DS_TEXT.signalDark, border: `1px solid ${DS_SURFACE.purple.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={{ mb: 2, 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>
|
||
{property.softFactors.infrastructureNotes && (
|
||
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1, fontStyle: 'italic' }}>
|
||
{property.softFactors.infrastructureNotes}
|
||
</Typography>
|
||
)}
|
||
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1 }}>
|
||
Die Zeiten beziehen sich auf die Strecke zu Fuss.
|
||
</Typography>
|
||
</Paper>
|
||
)}
|
||
|
||
{/* ── Einheiten ── */}
|
||
{(property.units ?? []).length > 0 && (
|
||
<Paper sx={{ mb: 2, 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 === highlightUnitId || preMarketUnits.length === 1} />
|
||
))}
|
||
{otherUnits.map(u => (
|
||
<UnitRow key={u.id} unit={u} highlighted={u.id === highlightUnitId} />
|
||
))}
|
||
</Paper>
|
||
)}
|
||
|
||
{/* ── Beschreibung ── */}
|
||
{property.description && (
|
||
<Paper sx={{ mb: 2, 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={{ mb: 2, 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 && (
|
||
<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>
|
||
</>
|
||
)
|
||
}
|