diff --git a/src/components/supply/PropertyIntelligenceCard.tsx b/src/components/supply/PropertyIntelligenceCard.tsx index 9a4b27f..ca14334 100644 --- a/src/components/supply/PropertyIntelligenceCard.tsx +++ b/src/components/supply/PropertyIntelligenceCard.tsx @@ -11,36 +11,12 @@ interface Props { inquiryCount?: number } -// Occupancy status — the property manager's primary lens +// Occupancy status — colour only for actionable exceptions; occupied = expected, no signal needed const STATUS_CONFIG = { - AVAILABLE_NOW: { - dot: '#b91c1c', - bg: '#fef2f2', - border:'#fecaca', - text: '#b91c1c', - label: 'Verfügbar', - }, - AVAILABLE_SOON: { - dot: '#a16207', - bg: '#fffbeb', - border:'#fde68a', - text: '#a16207', - label: 'Bald frei', - }, - OCCUPIED: { - dot: '#1d6342', - bg: '#f0fdf4', - border:'#bbf7d0', - text: '#1d6342', - label: 'Vermietet', - }, - FUTURE_SIGNAL: { - dot: '#5b3f8a', - bg: '#faf7ff', - border:'#e9d5ff', - text: '#5b3f8a', - label: 'Geplante Verfügbarkeit', - }, + AVAILABLE_NOW: { dot: '#b91c1c', text: '#b91c1c', label: 'Verfügbar' }, + AVAILABLE_SOON: { dot: '#a16207', text: '#a16207', label: 'Bald frei' }, + OCCUPIED: { dot: '#9a9a9a', text: '#9a9a9a', label: 'Vermietet' }, + FUTURE_SIGNAL: { dot: '#5b3f8a', text: '#5b3f8a', label: 'Geplante Verf.' }, } as const const FIT_OUT_META: Record = { @@ -67,7 +43,7 @@ export const PropertyIntelligenceCard = memo(function PropertyIntelligenceCard({ onSelect(p.id)} sx={{ - borderRadius: 2, + borderRadius: 1, overflow: 'hidden', border: `1px solid ${DS_BORDER.default}`, bgcolor: '#ffffff', @@ -94,7 +70,7 @@ export const PropertyIntelligenceCard = memo(function PropertyIntelligenceCard({ )} {/* Single neutral asset-type label */} - + {getAssetTypeLabel(p.assetType)} @@ -104,62 +80,50 @@ export const PropertyIntelligenceCard = memo(function PropertyIntelligenceCard({ {/* ── Body ── */} - {/* ── Occupancy status — primary decision indicator ── */} - - - - {status.label} - {p.availabilityStatus === 'AVAILABLE_SOON' && availDate ? ` · ab ${availDate}` : ''} - - - - {/* Title + location */} + {/* Title + location + status inline */} {p.title} - - - - {p.location.city}{p.location.district ? ` · ${p.location.district}` : ''} - + + + + + {p.location.city}{p.location.district ? ` · ${p.location.district}` : ''} + + + {/* Status — plain dot + text, no pill container */} + + + + {status.label} + {p.availabilityStatus === 'AVAILABLE_SOON' && availDate ? ` · ab ${availDate}` : ''} + + - {/* 3 key metrics: Fläche · Miete/m² · Anfragen */} - - - - Fläche - - + {/* 3 key metrics — no boxes, whitespace only */} + + + Fläche + {p.areaSqm.toLocaleString('de-CH')} m² - - - Miete - - - {p.rentPricePerSqm} CHF/m²/J + + Miete + + {p.rentPricePerSqm} + CHF/m²/J - - - Anfragen - - + + Anfragen + {inquiryCount ?? 0} @@ -173,20 +137,20 @@ export const PropertyIntelligenceCard = memo(function PropertyIntelligenceCard({ return ( + sx={{ height: 20, fontSize: '0.68rem', bgcolor: '#f4f3f0', color: DS_TEXT.secondary, border: `1px solid ${DS_BORDER.default}`, cursor: 'help' }} /> ) })()} {p.contractDurationMonths && ( + sx={{ height: 20, fontSize: '0.68rem', bgcolor: '#f4f3f0', color: DS_TEXT.secondary, border: `1px solid ${DS_BORDER.default}` }} /> )} - {/* Data completeness — tells manager if listing is visible to matching */} + {/* Data completeness */} - + Datenvollständigkeit = 0.75 ? '#b8975a' : DS_TEXT.muted }}> @@ -194,8 +158,8 @@ export const PropertyIntelligenceCard = memo(function PropertyIntelligenceCard({ + sx={{ height: 3, borderRadius: 1, bgcolor: '#f4f3f0', + '& .MuiLinearProgress-bar': { bgcolor: '#152642', borderRadius: 1 } }} /> diff --git a/src/lib/theme.ts b/src/lib/theme.ts index a167138..572cee7 100644 --- a/src/lib/theme.ts +++ b/src/lib/theme.ts @@ -45,7 +45,7 @@ export const theme = createTheme({ overline: { fontSize: '0.6875rem', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' }, button: { fontSize: '0.8125rem', fontWeight: 600, textTransform: 'none' }, }, - shape: { borderRadius: 8 }, + shape: { borderRadius: 4 }, shadows: [ 'none', '0 1px 2px rgba(0,0,0,0.05)', @@ -78,7 +78,7 @@ export const theme = createTheme({ MuiButton: { defaultProps: { disableElevation: true }, styleOverrides: { - root: { borderRadius: 6, padding: '6px 16px' }, + root: { borderRadius: 4, padding: '6px 16px' }, contained: { '&.MuiButton-containedPrimary': { background: '#152642', @@ -89,7 +89,7 @@ export const theme = createTheme({ }, MuiChip: { styleOverrides: { - root: { borderRadius: 6, fontSize: '0.75rem', fontWeight: 500, height: 22 }, + root: { borderRadius: 4, fontSize: '0.75rem', fontWeight: 500, height: 22 }, }, }, MuiTableCell: {