refine(anfragencenter): property bar top, matches-only bottom, AI draft button
Layout: property context bar (44x44 thumbnail + title + key facts + Ansehen) sits between inquiry header and chat. Bottom strip now shows only the 2-card matches slider — no duplicate property info. Images use objectFit:cover via <img> for consistent non-distorted rendering. Match score shown as badge overlay on image. Reply composer gains KI-Entwurf button (Sparkles, purple) that fills a salutation-prefixed template; an inline label marks it as AI-generated until the user edits. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
@@ -56,6 +56,7 @@ export function InquiryChat({
|
||||
<InquiryReplyComposer
|
||||
inquiryId={inquiry.id}
|
||||
defaultSubject={inquiry.subject}
|
||||
tenantName={inquiry.tenantName}
|
||||
pendingAttachment={pendingAttachment}
|
||||
onPendingAttachmentConsumed={onPendingAttachmentConsumed}
|
||||
/>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Box, Button, CircularProgress, Typography } from '@mui/material'
|
||||
import { ClipboardList } from 'lucide-react'
|
||||
import { ArrowRight, Building2, ClipboardList, MapPin, Ruler } from 'lucide-react'
|
||||
import { useNavigate } from 'react-router'
|
||||
import { useInquiryById, useMarkThreadAsRead } from '../../hooks/useInquiries'
|
||||
import { usePropertyById } from '../../hooks/useProperties'
|
||||
import { InquiryChat } from './InquiryChat'
|
||||
import { RelatedPropertyCardPanel } from './RelatedPropertyCardPanel'
|
||||
import type { Attachment } from '../../domain/inquiry'
|
||||
@@ -12,7 +14,9 @@ interface InquiryDetailPanelProps {
|
||||
|
||||
export function InquiryDetailPanel({ inquiryId }: InquiryDetailPanelProps) {
|
||||
const { data: inquiry, isLoading } = useInquiryById(inquiryId)
|
||||
const { data: property } = usePropertyById(inquiry?.propertyId ?? '')
|
||||
const markRead = useMarkThreadAsRead()
|
||||
const navigate = useNavigate()
|
||||
const [preparationOpen, setPreparationOpen] = useState(false)
|
||||
const [offerWizardOpen, setOfferWizardOpen] = useState(false)
|
||||
const [pendingAttachment, setPendingAttachment] = useState<Attachment | null>(null)
|
||||
@@ -43,10 +47,13 @@ export function InquiryDetailPanel({ inquiryId }: InquiryDetailPanelProps) {
|
||||
}
|
||||
|
||||
const isLatentInquiry = !!inquiry.needId
|
||||
const propertyImage = property?.images?.[0]
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
|
||||
|
||||
{/* Header: tenant + subject + action */}
|
||||
<Box
|
||||
sx={{
|
||||
px: 2.5,
|
||||
@@ -92,20 +99,85 @@ export function InquiryDetailPanel({ inquiryId }: InquiryDetailPanelProps) {
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
||||
{/* Property context bar */}
|
||||
<Box
|
||||
sx={{
|
||||
px: 2,
|
||||
py: 1,
|
||||
borderBottom: '1px solid #e2e8f0',
|
||||
bgcolor: '#f8fafc',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1.5,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 1,
|
||||
overflow: 'hidden',
|
||||
flexShrink: 0,
|
||||
bgcolor: '#e8e7e4',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
{propertyImage ? (
|
||||
<Box
|
||||
component="img"
|
||||
src={propertyImage}
|
||||
alt={property?.title}
|
||||
sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
||||
/>
|
||||
) : (
|
||||
<Building2 size={18} color="#94a3b8" />
|
||||
)}
|
||||
</Box>
|
||||
<Box sx={{ flex: 1, minWidth: 0 }}>
|
||||
<Typography
|
||||
sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.85rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.3 }}
|
||||
>
|
||||
{property?.title ?? '—'}
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: '#64748b' }}>
|
||||
<MapPin size={11} style={{ flexShrink: 0 }} />
|
||||
<Typography variant="caption" sx={{ fontSize: '0.72rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{property?.location.city}
|
||||
{property?.areaSqm ? ` · ${property.areaSqm.toLocaleString('de-CH')} m²` : ''}
|
||||
{property?.rentPricePerSqm ? ` · CHF ${property.rentPricePerSqm}/m²/J.` : ''}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Button
|
||||
size="small"
|
||||
endIcon={<ArrowRight size={12} />}
|
||||
onClick={() => navigate('/supply/properties')}
|
||||
sx={{ textTransform: 'none', fontSize: '0.75rem', color: '#152642', whiteSpace: 'nowrap', flexShrink: 0 }}
|
||||
>
|
||||
Objekt ansehen
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* Chat (flex: 1) */}
|
||||
<Box sx={{ flex: 1, overflow: 'hidden' }}>
|
||||
<InquiryChat
|
||||
inquiry={inquiry}
|
||||
onCreateOffer={() => setOfferWizardOpen(true)}
|
||||
pendingAttachment={pendingAttachment}
|
||||
onPendingAttachmentConsumed={() => setPendingAttachment(null)}
|
||||
/>
|
||||
<Box sx={{ flexShrink: 0, maxHeight: 260, borderTop: '1px solid #e2e8f0' }}>
|
||||
<RelatedPropertyCardPanel
|
||||
propertyId={inquiry.propertyId}
|
||||
inquiryId={inquiry.id}
|
||||
compact
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Bottom: weitere passende Objekte */}
|
||||
<Box sx={{ flexShrink: 0, borderTop: '1px solid #e2e8f0' }}>
|
||||
<RelatedPropertyCardPanel
|
||||
propertyId={inquiry.propertyId}
|
||||
inquiryId={inquiry.id}
|
||||
compact
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
TextField,
|
||||
Typography,
|
||||
} from '@mui/material'
|
||||
import { Send, Paperclip, X } from 'lucide-react'
|
||||
import { Paperclip, Send, Sparkles, X } from 'lucide-react'
|
||||
import { useSendInquiryReply } from '../../hooks/useInquiries'
|
||||
import { useToastStore } from '../../stores/toastStore'
|
||||
import type { Attachment } from '../../domain/inquiry'
|
||||
@@ -16,6 +16,7 @@ import { formatFileSize } from './inquiryUtils'
|
||||
interface InquiryReplyComposerProps {
|
||||
inquiryId: string
|
||||
defaultSubject: string
|
||||
tenantName?: string
|
||||
onSent?: () => void
|
||||
pendingAttachment?: Attachment | null
|
||||
onPendingAttachmentConsumed?: () => void
|
||||
@@ -24,6 +25,7 @@ interface InquiryReplyComposerProps {
|
||||
export function InquiryReplyComposer({
|
||||
inquiryId,
|
||||
defaultSubject,
|
||||
tenantName,
|
||||
onSent,
|
||||
pendingAttachment,
|
||||
onPendingAttachmentConsumed,
|
||||
@@ -33,6 +35,7 @@ export function InquiryReplyComposer({
|
||||
)
|
||||
const [body, setBody] = useState('')
|
||||
const [attachments, setAttachments] = useState<Attachment[]>([])
|
||||
const [isAIDraft, setIsAIDraft] = useState(false)
|
||||
|
||||
const sendReply = useSendInquiryReply()
|
||||
const showToast = useToastStore(s => s.showToast)
|
||||
@@ -49,6 +52,14 @@ export function InquiryReplyComposer({
|
||||
|
||||
const sending = sendReply.isPending
|
||||
|
||||
function handleAIDraft() {
|
||||
const salutation = tenantName ? `Sehr geehrte/r ${tenantName}` : 'Sehr geehrte Damen und Herren'
|
||||
setBody(
|
||||
`${salutation},\n\nVielen Dank für Ihre Anfrage. Gerne bestätigen wir, dass das Objekt zum gewünschten Zeitpunkt verfügbar ist.\n\nWir würden Ihnen gerne einen Besichtigungstermin vorschlagen — bitte teilen Sie uns Ihre Verfügbarkeit mit, damit wir einen passenden Termin finden können.\n\nFür Rückfragen stehen wir Ihnen jederzeit gerne zur Verfügung.\n\nMit freundlichen Grüssen`
|
||||
)
|
||||
setIsAIDraft(true)
|
||||
}
|
||||
|
||||
const handleAddMockAttachment = () => {
|
||||
const name = `Anhang_${attachments.length + 1}.pdf`
|
||||
setAttachments(prev => [
|
||||
@@ -82,6 +93,7 @@ export function InquiryReplyComposer({
|
||||
showToast('Antwort gesendet', 'success')
|
||||
setBody('')
|
||||
setAttachments([])
|
||||
setIsAIDraft(false)
|
||||
onSent?.()
|
||||
}
|
||||
|
||||
@@ -103,15 +115,26 @@ export function InquiryReplyComposer({
|
||||
onChange={e => setSubject(e.target.value)}
|
||||
fullWidth
|
||||
/>
|
||||
|
||||
{isAIDraft && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
|
||||
<Sparkles size={12} color="#7c3aed" />
|
||||
<Typography variant="caption" sx={{ color: '#7c3aed', fontSize: '0.7rem', fontWeight: 500 }}>
|
||||
KI-Entwurf — bitte prüfen und anpassen
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<TextField
|
||||
size="small"
|
||||
label="Nachricht"
|
||||
value={body}
|
||||
onChange={e => setBody(e.target.value)}
|
||||
onChange={e => { setBody(e.target.value); setIsAIDraft(false) }}
|
||||
multiline
|
||||
rows={5}
|
||||
placeholder="Antwort verfassen..."
|
||||
fullWidth
|
||||
sx={isAIDraft ? { '& .MuiOutlinedInput-root': { borderColor: '#ddd6fe' }, '& fieldset': { borderColor: '#ddd6fe !important' } } : {}}
|
||||
/>
|
||||
|
||||
{attachments.length > 0 && (
|
||||
@@ -149,15 +172,32 @@ export function InquiryReplyComposer({
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, justifyContent: 'space-between' }}>
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={<Paperclip size={14} />}
|
||||
onClick={handleAddMockAttachment}
|
||||
sx={{ textTransform: 'none' }}
|
||||
>
|
||||
Anhang
|
||||
</Button>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, justifyContent: 'space-between' }}>
|
||||
<Box sx={{ display: 'flex', gap: 0.75 }}>
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={<Sparkles size={13} />}
|
||||
onClick={handleAIDraft}
|
||||
sx={{
|
||||
textTransform: 'none',
|
||||
fontSize: '0.75rem',
|
||||
color: '#7c3aed',
|
||||
borderColor: '#ddd6fe',
|
||||
'&:hover': { bgcolor: '#f5f3ff', borderColor: '#c4b5fd' },
|
||||
}}
|
||||
variant="outlined"
|
||||
>
|
||||
KI-Entwurf
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={<Paperclip size={13} />}
|
||||
onClick={handleAddMockAttachment}
|
||||
sx={{ textTransform: 'none', fontSize: '0.75rem' }}
|
||||
>
|
||||
Anhang
|
||||
</Button>
|
||||
</Box>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="small"
|
||||
|
||||
@@ -21,7 +21,7 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel
|
||||
isLoading: loadingMatches,
|
||||
} = useAdditionalMatchesForInquiry(inquiryId, { minScore: 80, excludePropertyId: propertyId })
|
||||
|
||||
if (isLoading) {
|
||||
if (isLoading && !compact) {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', p: 4 }}>
|
||||
<CircularProgress size={20} />
|
||||
@@ -29,6 +29,61 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel
|
||||
)
|
||||
}
|
||||
|
||||
if (compact) {
|
||||
const visibleMatches = additionalMatches.slice(sliderIndex, sliderIndex + 2)
|
||||
const canGoBack = sliderIndex > 0
|
||||
const canGoForward = sliderIndex + 2 < additionalMatches.length
|
||||
|
||||
return (
|
||||
<Box sx={{ p: 1.5, bgcolor: 'white' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ color: '#64748b', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.65rem' }}
|
||||
>
|
||||
Weitere passende Objekte
|
||||
</Typography>
|
||||
{additionalMatches.length > 2 && (
|
||||
<Box sx={{ display: 'flex', gap: 0.25 }}>
|
||||
<IconButton
|
||||
size="small"
|
||||
disabled={!canGoBack}
|
||||
onClick={() => setSliderIndex(i => i - 1)}
|
||||
sx={{ p: 0.25, color: canGoBack ? '#152642' : '#cbd5e1' }}
|
||||
>
|
||||
<ChevronLeft size={14} />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
size="small"
|
||||
disabled={!canGoForward}
|
||||
onClick={() => setSliderIndex(i => i + 1)}
|
||||
sx={{ p: 0.25, color: canGoForward ? '#152642' : '#cbd5e1' }}
|
||||
>
|
||||
<ChevronRight size={14} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{loadingMatches ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 1.5 }}>
|
||||
<CircularProgress size={16} />
|
||||
</Box>
|
||||
) : additionalMatches.length === 0 ? (
|
||||
<Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.72rem' }}>
|
||||
Keine weiteren Matches
|
||||
</Typography>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', gap: 1.5 }}>
|
||||
{visibleMatches.map(m => (
|
||||
<MatchSliderCard key={m.propertyId} match={m} />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
if (!property) {
|
||||
return (
|
||||
<Box sx={{ p: 2 }}>
|
||||
@@ -41,128 +96,6 @@ 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 (
|
||||
<Box sx={{ display: 'flex', bgcolor: 'white' }}>
|
||||
{/* Left: current property card */}
|
||||
<Box sx={{ width: '44%', flexShrink: 0, minWidth: 0, p: 1.5 }}>
|
||||
<Box
|
||||
sx={{
|
||||
border: '1px solid #e8e7e4',
|
||||
borderRadius: 2,
|
||||
overflow: 'hidden',
|
||||
bgcolor: 'white',
|
||||
cursor: 'pointer',
|
||||
transition: 'border-color 0.15s, box-shadow 0.15s',
|
||||
'&:hover': { borderColor: '#b0aead', boxShadow: '0 4px 14px rgba(0,0,0,0.09)' },
|
||||
}}
|
||||
onClick={() => navigate('/supply/properties')}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
height: 78,
|
||||
bgcolor: '#f4f3f0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundImage: image ? `url(${image})` : 'none',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
>
|
||||
{!image && <Building2 size={22} color="#94a3b8" />}
|
||||
</Box>
|
||||
<Box sx={{ p: 1 }}>
|
||||
<Typography
|
||||
sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.82rem', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', mb: 0.5 }}
|
||||
>
|
||||
{property.title}
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: '#475569', mb: 0.25 }}>
|
||||
<MapPin size={11} style={{ flexShrink: 0 }} />
|
||||
<Typography variant="caption" sx={{ fontSize: '0.7rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{property.location.city}{property.location.district ? `, ${property.location.district}` : ''}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: '#475569', mb: 0.25 }}>
|
||||
<Ruler size={11} style={{ flexShrink: 0 }} />
|
||||
<Typography variant="caption" sx={{ fontSize: '0.7rem' }}>
|
||||
{property.areaSqm.toLocaleString('de-CH')} m² · CHF {property.rentPricePerSqm}/m²/J.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: '#475569', mb: 0.75 }}>
|
||||
<Calendar size={11} style={{ flexShrink: 0 }} />
|
||||
<Typography variant="caption" sx={{ fontSize: '0.7rem' }}>
|
||||
ab {new Date(property.availabilityDate).toLocaleDateString('de-CH', { month: 'short', year: 'numeric' })}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Button
|
||||
size="small"
|
||||
endIcon={<ArrowRight size={11} />}
|
||||
onClick={e => { e.stopPropagation(); navigate('/supply/properties') }}
|
||||
sx={{ textTransform: 'none', fontSize: '0.7rem', p: 0, minWidth: 0, color: '#152642' }}
|
||||
>
|
||||
Ansehen
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Vertical divider */}
|
||||
<Box sx={{ width: '1px', bgcolor: '#e2e8f0', my: 1.5, flexShrink: 0 }} />
|
||||
|
||||
{/* Right: match slider showing 2 at a time */}
|
||||
<Box sx={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', p: 1.5, gap: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
|
||||
<Typography variant="caption" sx={{ color: '#64748b', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.65rem' }}>
|
||||
Weitere passende Objekte
|
||||
</Typography>
|
||||
{additionalMatches.length > 2 && (
|
||||
<Box sx={{ display: 'flex', gap: 0.25 }}>
|
||||
<IconButton
|
||||
size="small"
|
||||
disabled={!canGoBack}
|
||||
onClick={() => setSliderIndex(i => i - 1)}
|
||||
sx={{ p: 0.25, color: canGoBack ? '#152642' : '#cbd5e1' }}
|
||||
>
|
||||
<ChevronLeft size={14} />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
size="small"
|
||||
disabled={!canGoForward}
|
||||
onClick={() => setSliderIndex(i => i + 1)}
|
||||
sx={{ p: 0.25, color: canGoForward ? '#152642' : '#cbd5e1' }}
|
||||
>
|
||||
<ChevronRight size={14} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{loadingMatches ? (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 1 }}>
|
||||
<CircularProgress size={16} />
|
||||
</Box>
|
||||
) : additionalMatches.length === 0 ? (
|
||||
<Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.72rem' }}>
|
||||
Keine weiteren Matches
|
||||
</Typography>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', gap: 1, flex: 1 }}>
|
||||
{visibleMatches.map(m => (
|
||||
<MatchSliderCard key={m.propertyId} match={m} />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
@@ -185,12 +118,14 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundImage: image ? `url(${image})` : 'none',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
>
|
||||
{!image && <Building2 size={32} color="#94a3b8" />}
|
||||
{image ? (
|
||||
<Box component="img" src={image} alt={property.title}
|
||||
sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
|
||||
) : (
|
||||
<Building2 size={32} color="#94a3b8" />
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Typography variant="body1" sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.95rem' }}>
|
||||
@@ -277,36 +212,50 @@ function MatchSliderCard({ match }: { match: AdditionalPropertyMatch }) {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
height: 52,
|
||||
bgcolor: '#f4f3f0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundImage: match.imageUrl ? `url(${match.imageUrl})` : 'none',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
>
|
||||
{!match.imageUrl && <Building2 size={16} color="#94a3b8" />}
|
||||
{/* Image with consistent aspect ratio */}
|
||||
<Box sx={{ position: 'relative', height: 72, overflow: 'hidden', bgcolor: '#f4f3f0' }}>
|
||||
{match.imageUrl ? (
|
||||
<Box
|
||||
component="img"
|
||||
src={match.imageUrl}
|
||||
alt={match.title}
|
||||
sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
||||
/>
|
||||
) : (
|
||||
<Box sx={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Building2 size={20} color="#94a3b8" />
|
||||
</Box>
|
||||
)}
|
||||
{/* Score badge overlay */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 6,
|
||||
right: 6,
|
||||
bgcolor: 'rgba(15,23,42,0.72)',
|
||||
color: 'white',
|
||||
fontSize: '0.7rem',
|
||||
fontWeight: 700,
|
||||
px: 0.75,
|
||||
py: 0.25,
|
||||
borderRadius: '4px',
|
||||
lineHeight: 1.4,
|
||||
}}
|
||||
>
|
||||
{match.matchScore}%
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ p: 1 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 0.25 }}>
|
||||
<Typography
|
||||
sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.78rem', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1, mr: 0.5 }}
|
||||
>
|
||||
{match.title}
|
||||
</Typography>
|
||||
<Typography sx={{ fontSize: '0.72rem', fontWeight: 700, color: '#152642', flexShrink: 0 }}>
|
||||
{match.matchScore}%
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography
|
||||
sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.78rem', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', mb: 0.25 }}
|
||||
>
|
||||
{match.title}
|
||||
</Typography>
|
||||
<Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.7rem', display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{match.location}
|
||||
{match.location} · {match.areaSqm.toLocaleString('de-CH')} m²
|
||||
</Typography>
|
||||
{match.reasons[0] && (
|
||||
<Typography variant="caption" sx={{ color: '#15803d', fontSize: '0.68rem', display: 'block', lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
<Typography variant="caption" sx={{ color: '#15803d', fontSize: '0.68rem', display: 'block', lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', mt: 0.25 }}>
|
||||
+ {match.reasons[0]}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user