johannes.gasser/property-match
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: correct rent unit labels and monthly/annual calculation consistency

Browse Source 
- NeedAlignmentPanel: display budget row in monthly (CHF/m²/Mt.) to match
  the Preis section, use exact division (no Math.round) to avoid 13×12≠152
- MatchDetailPropertySections + PropertyDetailPublicSections: replace
  Math.round(rentPricePerSqm/12) with exact division; show 2 decimal places
  when monthly is not a whole number (e.g. CHF 12.67 instead of CHF 13)
- Add /Jahr suffix to all 15 displays showing rentPricePerSqm or maxPerSqm
  without a time unit across results, compare, match-detail, supply, and
  anfragencenter components

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
2026-05-24 14:35:20 +02:00
parent d4171fe9b5
commit f487435a94
16 changed files with 34 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/anfragencenter/MockPdfPreview.tsx
+1 -1
View File
@@ -73,7 +73,7 @@ export function MockPdfPreview({ fields, fallbackFields }: MockPdfPreviewProps)
variant="body2"
sx={{ fontSize: '0.875rem', mb: 0.5, lineHeight: 1.5 }}
>
<strong>{p.title}</strong> — {p.location.city}, {p.areaSqm.toLocaleString('de-CH')} m², CHF {p.rentPricePerSqm}/m²
<strong>{p.title}</strong> — {p.location.city}, {p.areaSqm.toLocaleString('de-CH')} m², CHF {p.rentPricePerSqm}/m²/Jahr
</Typography>
))}
{properties.length === 0 && (
src/components/anfragencenter/RelatedPropertyCardPanel.tsx
+2 -2
View File
@@ -94,7 +94,7 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId }: RelatedPrope
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: '#475569', fontSize: '0.8125rem' }}>
<Ruler size={14} />
<Typography variant="body2" sx={{ fontSize: '0.8125rem' }}>
{property.areaSqm.toLocaleString('de-CH')} m² · CHF {property.rentPricePerSqm}/m²
{property.areaSqm.toLocaleString('de-CH')} m² · CHF {property.rentPricePerSqm}/m²/Jahr
</Typography>
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: '#475569', fontSize: '0.8125rem' }}>
@@ -190,7 +190,7 @@ function AdditionalMatchCard({ match }: { match: AdditionalPropertyMatch }) {
</Box>
</Box>
<Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.7rem', display: 'block', mb: 0.5 }}>
{match.location} · {match.areaSqm.toLocaleString('de-CH')} m² · CHF {match.rentPricePerSqm}/m²
{match.location} · {match.areaSqm.toLocaleString('de-CH')} m² · CHF {match.rentPricePerSqm}/m²/Jahr
</Typography>
{match.reasons.length > 0 && (
<Box sx={{ mb: 0.5 }}>
src/components/compare/CompareColumnHeader.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ export function CompareColumnHeader({ item, onRemove }: Props) {
propertyId: prop?.id,
propertyAddress: prop ? `${title}, ${subtitle}${district ? `, ${district}` : ''}` : undefined,
areaLabel: prop?.areaSqm ? `${prop.areaSqm.toLocaleString('de-CH')} m²` : undefined,
rentLabel: prop?.rentPricePerSqm ? `CHF ${prop.rentPricePerSqm}/m²` : undefined,
rentLabel: prop?.rentPricePerSqm ? `CHF ${prop.rentPricePerSqm}/m²/Jahr` : undefined,
availabilityLabel: prop?.availabilityDate ?? undefined,
})
}
src/components/compare/CompareTableBody.tsx
+1 -1
View File
@@ -155,7 +155,7 @@ export function CompareTableBody({
return (
<Box>
<Typography variant="body2" sx={{ fontWeight: 600 }}>
CHF {prop.rentPricePerSqm}/m²
CHF {prop.rentPricePerSqm}/m²/Jahr
</Typography>
{prop.totalRentMonthly && (
<Typography variant="caption" color="text.secondary">
src/components/demand/CriteriaReviewPanel.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ function displayAreaRange(v: ParsedNeedCriteria['areaRange']): string {
return v ? `${v.min}–${v.max} m²` : ''
}
function displayBudget(v: ParsedNeedCriteria['budgetRange']): string {
return v ? `CHF ${v.maxPerSqm}/m²` : ''
return v ? `CHF ${v.maxPerSqm}/m²/Jahr` : ''
}
function displayTiming(v: ParsedNeedCriteria['timing']): string {
if (!v) return ''
src/components/demand/NeedCardPreview.tsx
+1 -1
View File
@@ -95,7 +95,7 @@ export function NeedCardPreview({ criteria: c, weights, confidenceByField, missi
<Wallet size={16} color="#64748b" style={{ flexShrink: 0, marginTop: 2 }} />
<Box>
<Typography variant="caption" color="text.secondary">Budget</Typography>
<Typography variant="body2">max. CHF {c.budgetRange.maxPerSqm}/m²</Typography>
<Typography variant="body2">max. CHF {c.budgetRange.maxPerSqm}/m²/Jahr</Typography>
</Box>
</Box>
)}
src/components/match-detail/LocationIntelligencePanel.tsx
+1 -1
View File
@@ -241,7 +241,7 @@ export function LocationIntelligencePanel({ property }: Props) {
{p.title}
</Typography>
<Typography variant="caption" color="text.secondary">
{p.areaSqm} m² · CHF {p.rentPricePerSqm}/m²
{p.areaSqm} m² · CHF {p.rentPricePerSqm}/m²/Jahr
{p.rentPricePerSqm < property.rentPricePerSqm && ' · günstiger'}
{p.rentPricePerSqm > property.rentPricePerSqm && ' · teurer'}
</Typography>
src/components/match-detail/MatchDetailPropertySections.tsx
+5 -2
View File
@@ -17,8 +17,11 @@ export function MatchDetailPropertySections({ property, match }: MatchDetailProp
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 monthlyPerSqm = Math.round(property.rentPricePerSqm / 12)
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
@@ -31,7 +34,7 @@ export function MatchDetailPropertySections({ property, match }: MatchDetailProp
<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={`CHF ${monthlyPerSqm.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)`} />
src/components/match-detail/NeedAlignmentPanel.tsx
+9 -3
View File
@@ -56,16 +56,22 @@ function buildRows(need: Need, property: Property): AlignmentRow[] {
fit: locationFit,
})
// Budget
// Budget — both values are annual CHF/m²; display as monthly for consistency with Preis section
const budgetFit: FitStatus = property.rentPricePerSqm <= need.budgetRange.maxPerSqm
? 'MATCH'
: property.rentPricePerSqm <= need.budgetRange.maxPerSqm * 1.1
? 'PARTIAL'
: 'NO_MATCH'
function fmtMt(annual: number): string {
const m = annual / 12
return Number.isInteger(m)
? `CHF ${m}.–/m²/Mt.`
: `CHF ${m.toLocaleString('de-CH', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}/m²/Mt.`
}
rows.push({
label: 'Budget',
needValue: `max. CHF ${need.budgetRange.maxPerSqm}/m²`,
resultValue: `CHF ${property.rentPricePerSqm}/m²`,
needValue: `max. ${fmtMt(need.budgetRange.maxPerSqm)}`,
resultValue: fmtMt(property.rentPricePerSqm),
fit: budgetFit,
})
src/components/match-detail/PropertyDetailPublicSections.tsx
+5 -2
View File
@@ -37,8 +37,11 @@ export function PropertyDetailPublicSections({ property, highlightUnitId }: Prop
const otherUnits = (property.units ?? []).filter(u => !u.schattenmarktRelease?.enabled)
const flexibleUnits = (property.units ?? []).filter(u => u.isFlexible && u.minLettableSqm !== undefined)
const monthlyPerSqm = Math.round(property.rentPricePerSqm / 12)
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!))
@@ -58,7 +61,7 @@ export function PropertyDetailPublicSections({ property, highlightUnitId }: Prop
<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={`CHF ${monthlyPerSqm.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
src/components/match-detail/PropertyOverviewPanel.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ export function PropertyOverviewPanel({ match, property, signal }: Props) {
] : [
{ 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²` : '–' },
{ 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 ?? '–' },
]
src/components/results/UnifiedResultCard.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ export function UnifiedResultCard({ result, view = 'list' }: Props) {
propertyId: prop?.id,
propertyAddress: prop ? `${prop.title}, ${prop.location?.city ?? ''}` : undefined,
areaLabel: prop?.areaSqm ? `${prop.areaSqm.toLocaleString('de-CH')} m²` : undefined,
rentLabel: prop?.rentPricePerSqm ? `CHF ${prop.rentPricePerSqm}/m²` : undefined,
rentLabel: prop?.rentPricePerSqm ? `CHF ${prop.rentPricePerSqm}/m²/Jahr` : undefined,
})
},
},
src/components/supply/NegotiationInsightsPanel.tsx
+2 -2
View File
@@ -50,7 +50,7 @@ export function NegotiationInsightsPanel({ property }: Props) {
<Box sx={{ flex: 1, p: 1.5, bgcolor: '#f8fafc', borderRadius: 1.5, border: '1px solid #e2e8f0', minWidth: 120 }}>
<Typography variant="caption" color="text.secondary">Ihr Preis</Typography>
<Typography variant="h6" sx={{ fontWeight: 700, color: '#0f1923' }}>
CHF {property.rentPricePerSqm}/m²
CHF {property.rentPricePerSqm}/m²/Jahr
</Typography>
</Box>
{marketRent && (
@@ -130,7 +130,7 @@ export function NegotiationInsightsPanel({ property }: Props) {
<Typography variant="caption" sx={{ fontWeight: 500 }}>{n.companyName}</Typography>
<Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
{n.requiredArea?.min ?? 0}–{n.requiredArea?.max ?? 0} m²
{n.budgetRange?.maxPerSqm ? ` · max. CHF ${n.budgetRange.maxPerSqm}/m²` : ''}
{n.budgetRange?.maxPerSqm ? ` · max. CHF ${n.budgetRange.maxPerSqm}/m²/Jahr` : ''}
</Typography>
</Box>
<Chip
src/components/supply/PropertyIntelligenceCard.tsx
+1 -1
View File
@@ -92,7 +92,7 @@ export const PropertyIntelligenceCard = memo(function PropertyIntelligenceCard({
{/* Key specs */}
<Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', mb: 1.25 }}>
<Chip label={`${p.areaSqm} m²`} size="small" sx={{ fontSize: 11, bgcolor: '#f1f5f9', height: 22 }} />
<Chip label={`CHF ${p.rentPricePerSqm}/m²`} size="small" sx={{ fontSize: 11, bgcolor: '#f1f5f9', height: 22 }} />
<Chip label={`CHF ${p.rentPricePerSqm}/m²/Jahr`} size="small" sx={{ fontSize: 11, bgcolor: '#f1f5f9', height: 22 }} />
{p.contractDurationMonths && (
<Chip label={`${p.contractDurationMonths}M Vertrag`} size="small" sx={{ fontSize: 11, bgcolor: '#f1f5f9', height: 22 }} />
)}
src/pages/demand/MatchDetail.tsx
+1 -1
View File
@@ -108,7 +108,7 @@ export default function MatchDetail() {
matchScore: match.matchScore,
location: property?.location?.city,
areaLabel: property?.areaSqm ? `${property.areaSqm.toLocaleString('de-CH')} m²` : undefined,
rentLabel: property?.rentPricePerSqm ? `CHF ${property.rentPricePerSqm}/m²` : undefined,
rentLabel: property?.rentPricePerSqm ? `CHF ${property.rentPricePerSqm}/m²/Jahr` : undefined,
})
}
src/pages/demand/Results.tsx
+1 -1
View File
@@ -155,7 +155,7 @@ export default function Results() {
</Typography>
{activeNeed.budgetRange && activeNeed.budgetRange.maxPerSqm > 0 && (
<Typography variant="caption" color="text.secondary">
<strong>Budget:</strong> max. CHF {activeNeed.budgetRange.maxPerSqm}/m²
<strong>Budget:</strong> max. CHF {activeNeed.budgetRange.maxPerSqm}/m²/Jahr
</Typography>
)}
{activeNeed.timing?.earliestMoveIn && !isNaN(new Date(activeNeed.timing.earliestMoveIn).getTime()) && (