diff --git a/src/components/anfragencenter/RelatedPropertyCardPanel.tsx b/src/components/anfragencenter/RelatedPropertyCardPanel.tsx index 6c61a8e..696abf7 100644 --- a/src/components/anfragencenter/RelatedPropertyCardPanel.tsx +++ b/src/components/anfragencenter/RelatedPropertyCardPanel.tsx @@ -39,71 +39,97 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel const image = property.images?.[0] - const detailRows = ( - - - - - {property.location.city} - {property.location.district ? `, ${property.location.district}` : ''} - - - - - - {property.areaSqm.toLocaleString('de-CH')} m² · CHF {property.rentPricePerSqm}/m²/Jahr - - - - - - Verfügbar ab {new Date(property.availabilityDate).toLocaleDateString('de-CH')} - - - - ) - - const matchesSection = ( - <> - - Weitere passende Objekte - - {loadingMatches ? ( - - ) : additionalMatches.length === 0 ? ( - - Keine weiteren Matches - - ) : ( - - {additionalMatches.map(m => ( - - ))} - - )} - - ) - if (compact) { return ( - - - - {property.title} - - {detailRows} - + {!image && } + + + + {property.title} + + + + + {property.location.city}{property.location.district ? `, ${property.location.district}` : ''} + + + + + + {property.areaSqm.toLocaleString('de-CH')} m² · CHF {property.rentPricePerSqm}/m²/J. + + + + + + ab {new Date(property.availabilityDate).toLocaleDateString('de-CH', { month: 'short', year: 'numeric' })} + + + + - - {matchesSection} + + {/* Vertical divider */} + + + {/* Right: horizontal scroll rail */} + + + Weitere passende Objekte + + {loadingMatches ? ( + + ) : additionalMatches.length === 0 ? ( + + Keine weiteren Matches + + ) : ( + + {additionalMatches.map(m => ( + + ))} + + )} ) @@ -143,7 +169,27 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel {property.title} - {detailRows} + + + + + {property.location.city} + {property.location.district ? `, ${property.location.district}` : ''} + + + + + + {property.areaSqm.toLocaleString('de-CH')} m² · CHF {property.rentPricePerSqm}/m²/Jahr + + + + + + Verfügbar ab {new Date(property.availabilityDate).toLocaleDateString('de-CH')} + + + {property.description && ( @@ -162,9 +208,75 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel - - {matchesSection} + + Weitere passende Objekte + + + {loadingMatches ? ( + + ) : additionalMatches.length === 0 ? ( + + Keine weiteren Matches + + ) : ( + + {additionalMatches.map(m => ( + + ))} + + )} + + ) +} + +function MatchRailCard({ match }: { match: AdditionalPropertyMatch }) { + const navigate = useNavigate() + return ( + navigate('/supply/properties')} + sx={{ + flexShrink: 0, + width: 148, + cursor: 'pointer', + '&:hover .rail-title': { color: '#2563eb' }, + }} + > + + {!match.imageUrl && } + + + {match.title} + + + {match.matchScore}% + + + + {match.location} · {match.areaSqm.toLocaleString('de-CH')} m² + + {match.reasons[0] && ( + + + {match.reasons[0]} + + )} ) }