diff --git a/src/components/anfragencenter/InquiryCard.tsx b/src/components/anfragencenter/InquiryCard.tsx index 348100d..46776fd 100644 --- a/src/components/anfragencenter/InquiryCard.tsx +++ b/src/components/anfragencenter/InquiryCard.tsx @@ -96,19 +96,9 @@ export function InquiryCard({ inquiry, selected, onClick }: InquiryCardProps) { {formatInquiryDate(inquiry.createdAt)} {inquiry.matchScore !== undefined && ( - - Match {inquiry.matchScore}% - + + {inquiry.matchScore}% + )} diff --git a/src/components/anfragencenter/InquiryDetailPanel.tsx b/src/components/anfragencenter/InquiryDetailPanel.tsx index 7336ea5..03ee75e 100644 --- a/src/components/anfragencenter/InquiryDetailPanel.tsx +++ b/src/components/anfragencenter/InquiryDetailPanel.tsx @@ -92,17 +92,18 @@ export function InquiryDetailPanel({ inquiryId }: InquiryDetailPanelProps) { )} - + setOfferWizardOpen(true)} pendingAttachment={pendingAttachment} onPendingAttachmentConsumed={() => setPendingAttachment(null)} /> - + diff --git a/src/components/anfragencenter/InquiryListRow.tsx b/src/components/anfragencenter/InquiryListRow.tsx index d462237..e80aac4 100644 --- a/src/components/anfragencenter/InquiryListRow.tsx +++ b/src/components/anfragencenter/InquiryListRow.tsx @@ -17,11 +17,11 @@ export function InquiryListRow({ inquiry, selected, onClick }: InquiryListRowPro onClick={onClick} sx={{ px: 2, - py: 1.5, + py: 1, borderBottom: '1px solid #e2e8f0', borderLeft: '3px solid', borderLeftColor: selected ? '#152642' : hasUnread ? '#2563eb' : 'transparent', - bgcolor: selected ? '#f1f5f9' : 'white', + bgcolor: selected ? '#eef2f8' : 'white', cursor: 'pointer', transition: 'background-color 0.15s, border-color 0.15s', '&:hover': { bgcolor: selected ? '#f1f5f9' : '#f8fafc' }, @@ -76,20 +76,9 @@ export function InquiryListRow({ inquiry, selected, onClick }: InquiryListRowPro {propertyLabelFromId(inquiry.propertyId)} {inquiry.matchScore !== undefined && ( - + {inquiry.matchScore}% - + )} diff --git a/src/components/anfragencenter/RelatedPropertyCardPanel.tsx b/src/components/anfragencenter/RelatedPropertyCardPanel.tsx index 572bdaf..6c61a8e 100644 --- a/src/components/anfragencenter/RelatedPropertyCardPanel.tsx +++ b/src/components/anfragencenter/RelatedPropertyCardPanel.tsx @@ -1,5 +1,5 @@ import { Box, Button, CircularProgress, Divider, Typography } from '@mui/material' -import { ArrowRight, Building2, Calendar, MapPin, Ruler, Trophy } from 'lucide-react' +import { ArrowRight, Building2, Calendar, MapPin, Ruler } from 'lucide-react' import { useNavigate } from 'react-router' import { usePropertyById } from '../../hooks/useProperties' import { useAdditionalMatchesForInquiry } from '../../hooks/useMatches' @@ -8,9 +8,10 @@ import type { AdditionalPropertyMatch } from '../../domain/additionalMatch' interface RelatedPropertyCardPanelProps { propertyId: string inquiryId: string + compact?: boolean } -export function RelatedPropertyCardPanel({ propertyId, inquiryId }: RelatedPropertyCardPanelProps) { +export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: RelatedPropertyCardPanelProps) { const { data: property, isLoading } = usePropertyById(propertyId) const navigate = useNavigate() const { @@ -38,6 +39,76 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId }: RelatedPrope 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} + + + + {matchesSection} + + + ) + } + return ( - - Bezogenes Objekt - - - - - - - {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')} - - - + {detailRows} {property.description && ( @@ -114,28 +161,10 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId }: RelatedPrope Objekt ansehen - {/* Weitere Matches */} - - - - Weitere passende Objekte - + + {matchesSection} - - {loadingMatches ? ( - - ) : additionalMatches.length === 0 ? ( - - Keine weiteren Matches - - ) : ( - - {additionalMatches.map(m => ( - - ))} - - )} ) } @@ -145,69 +174,35 @@ function AdditionalMatchCard({ match }: { match: AdditionalPropertyMatch }) { return ( - {match.imageUrl && ( - - )} - - - - {match.title} - - = 90 ? '#fef3c7' : '#e0e7ff', - color: match.matchScore >= 90 ? '#92400e' : '#3730a3', - fontWeight: 700, - fontSize: '0.65rem', - flexShrink: 0, - ml: 0.5, - }} - > - {match.matchScore}% - - - - {match.location} · {match.areaSqm.toLocaleString('de-CH')} m² · CHF {match.rentPricePerSqm}/m²/Jahr + + + {match.title} + + + {match.matchScore}% - {match.reasons.length > 0 && ( - - {match.reasons.map((r, i) => ( - - + {r} - - ))} - - )} - {match.topUncertainty && ( - - ⚠ {match.topUncertainty} - - )} - + + {match.location} · {match.areaSqm.toLocaleString('de-CH')} m² + + {match.reasons[0] && ( + + + {match.reasons[0]} + + )} + ) }