diff --git a/src/components/anfragencenter/InquiryDetailPanel.tsx b/src/components/anfragencenter/InquiryDetailPanel.tsx index 03ee75e..c87b2a4 100644 --- a/src/components/anfragencenter/InquiryDetailPanel.tsx +++ b/src/components/anfragencenter/InquiryDetailPanel.tsx @@ -99,7 +99,7 @@ export function InquiryDetailPanel({ inquiryId }: InquiryDetailPanelProps) { pendingAttachment={pendingAttachment} onPendingAttachmentConsumed={() => setPendingAttachment(null)} /> - + {inquiry.tenantName} {inquiry.tenantCompany ? ` · ${inquiry.tenantCompany}` : ''} diff --git a/src/components/anfragencenter/InquiryReplyComposer.tsx b/src/components/anfragencenter/InquiryReplyComposer.tsx index 774f763..38615a9 100644 --- a/src/components/anfragencenter/InquiryReplyComposer.tsx +++ b/src/components/anfragencenter/InquiryReplyComposer.tsx @@ -109,7 +109,7 @@ export function InquiryReplyComposer({ value={body} onChange={e => setBody(e.target.value)} multiline - rows={4} + rows={5} placeholder="Antwort verfassen..." fullWidth /> diff --git a/src/components/anfragencenter/RelatedPropertyCardPanel.tsx b/src/components/anfragencenter/RelatedPropertyCardPanel.tsx index 696abf7..b7e92c4 100644 --- a/src/components/anfragencenter/RelatedPropertyCardPanel.tsx +++ b/src/components/anfragencenter/RelatedPropertyCardPanel.tsx @@ -1,5 +1,6 @@ -import { Box, Button, CircularProgress, Divider, Typography } from '@mui/material' -import { ArrowRight, Building2, Calendar, MapPin, Ruler } from 'lucide-react' +import { useState } from 'react' +import { Box, Button, CircularProgress, Divider, IconButton, Typography } from '@mui/material' +import { ArrowRight, Building2, Calendar, ChevronLeft, ChevronRight, MapPin, Ruler } from 'lucide-react' import { useNavigate } from 'react-router' import { usePropertyById } from '../../hooks/useProperties' import { useAdditionalMatchesForInquiry } from '../../hooks/useMatches' @@ -14,6 +15,7 @@ interface RelatedPropertyCardPanelProps { export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: RelatedPropertyCardPanelProps) { const { data: property, isLoading } = usePropertyById(propertyId) const navigate = useNavigate() + const [sliderIndex, setSliderIndex] = useState(0) const { data: additionalMatches = [], isLoading: loadingMatches, @@ -40,93 +42,119 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel const image = property.images?.[0] if (compact) { + const visibleMatches = additionalMatches.slice(sliderIndex, sliderIndex + 2) + const canGoBack = sliderIndex > 0 + const canGoForward = sliderIndex + 2 < additionalMatches.length + return ( - - {/* Left: current property with thumbnail */} - + + {/* Left: current property card */} + navigate('/supply/properties')} > - {!image && } - - - - {property.title} - - - - - {property.location.city}{property.location.district ? `, ${property.location.district}` : ''} - + {!image && } - - - - {property.areaSqm.toLocaleString('de-CH')} m² · CHF {property.rentPricePerSqm}/m²/J. + + + {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' })} + + + - - - - ab {new Date(property.availabilityDate).toLocaleDateString('de-CH', { month: 'short', year: 'numeric' })} - - - {/* Vertical divider */} - {/* Right: horizontal scroll rail */} - - - Weitere passende Objekte - + {/* Right: match slider showing 2 at a time */} + + + + Weitere passende Objekte + + {additionalMatches.length > 2 && ( + + setSliderIndex(i => i - 1)} + sx={{ p: 0.25, color: canGoBack ? '#152642' : '#cbd5e1' }} + > + + + setSliderIndex(i => i + 1)} + sx={{ p: 0.25, color: canGoForward ? '#152642' : '#cbd5e1' }} + > + + + + )} + + {loadingMatches ? ( - + + + ) : additionalMatches.length === 0 ? ( Keine weiteren Matches ) : ( - - {additionalMatches.map(m => ( - + + {visibleMatches.map(m => ( + ))} )} @@ -170,20 +198,20 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel - + {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')} @@ -229,28 +257,33 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel ) } -function MatchRailCard({ match }: { match: AdditionalPropertyMatch }) { +function MatchSliderCard({ match }: { match: AdditionalPropertyMatch }) { const navigate = useNavigate() return ( navigate('/supply/properties')} sx={{ - flexShrink: 0, - width: 148, + flex: '1 1 0', + minWidth: 0, + border: '1px solid #e8e7e4', + borderRadius: 2, + overflow: 'hidden', cursor: 'pointer', - '&:hover .rail-title': { color: '#2563eb' }, + bgcolor: 'white', + transition: 'border-color 0.15s, box-shadow 0.15s', + '&:hover': { + borderColor: '#b0aead', + boxShadow: '0 4px 14px rgba(0,0,0,0.09)', + }, }} > {!match.imageUrl && } - - - {match.title} - - - {match.matchScore}% + + + + {match.title} + + + {match.matchScore}% + + + + {match.location} + {match.reasons[0] && ( + + + {match.reasons[0]} + + )} - - {match.location} · {match.areaSqm.toLocaleString('de-CH')} m² - - {match.reasons[0] && ( - - + {match.reasons[0]} - - )} ) }