feat: Pre-Market Intelligence UX rework — institutional positioning
Redesign the Future Availability card system to clearly distinguish two classes: PRE-MARKET VERIFIED (Verwaltung-controlled): - Soft purple (#7c3aed) accent, institutional premium feel - Badge: "PRE-MARKET VERIFIED" with shield icon - "Direkte Verwaltungsquelle" attribution chip in header - Shows confirmed ERP facts with green checkmarks MARKET SIGNAL (crawler/probabilistic): - Slate blue (#1d4ed8) accent, analytical feel - Badge: "MARKET SIGNAL" - Amber notice box: "Probabilistischer Marktindikator — kein bestätigtes Objekt" - Shows market indicators and explicit probability % - Source attribution (press, job posting, etc.) Both cards answer: What? How reliable? Where from? Why relevant? Risks? Action? PropertyDetailView: rename SchattenmarktReleasePanel → PreMarketPanel, update toggle label to "Pre-Market Matching aktivieren", add Matching Demand Intelligence block showing active search profile counts and early matching opportunity. FutureAvailabilityContextPanel: update LEASE_EXPIRY signal type label and relevance bridge text to remove "Schattenmarkt" references. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
@@ -1,5 +1,6 @@
|
||||
import { Box, Button, Chip, Divider, Typography } from '@mui/material'
|
||||
import {
|
||||
AlertCircle,
|
||||
BarChart2,
|
||||
Briefcase,
|
||||
Building2,
|
||||
@@ -21,7 +22,7 @@ const RESULT_TYPE_META: Record<string, { label: string; color: string }> = {
|
||||
VERIFIED_PORTFOLIO: { label: 'Verified Portfolio', color: '#1e3a5f' },
|
||||
EXTERNAL_MARKET: { label: 'Direktinserat', color: '#d97706' },
|
||||
MAISON_WORK: { label: 'Maison Work', color: '#0369a1' },
|
||||
FUTURE_AVAILABILITY: { label: 'Schattenmarkt', color: '#7c3aed' },
|
||||
FUTURE_AVAILABILITY: { label: 'Future Availability', color: '#7c3aed' },
|
||||
}
|
||||
|
||||
const SOURCE_META: Record<string, { label: string; icon: React.ReactNode }> = {
|
||||
@@ -80,23 +81,26 @@ function SignalQualityDots({ quality }: { quality: 'HIGH' | 'MEDIUM' | 'LOW' | u
|
||||
|
||||
function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
|
||||
const isControlled = vm.signalIsControlled ?? false
|
||||
const accentColor = isControlled ? '#1a7a4a' : '#1d4ed8'
|
||||
const headerBg = isControlled ? '#f0fdf4' : '#f8fafc'
|
||||
const badge = isControlled ? 'Pre-Market' : 'Market Signal'
|
||||
const badgeBg = isControlled ? '#dcfce7' : '#dbeafe'
|
||||
const badgeColor = isControlled ? '#1a7a4a' : '#1d4ed8'
|
||||
|
||||
// PRE-MARKET VERIFIED: soft purple / institutional premium
|
||||
// MARKET SIGNAL: slate blue / analytical
|
||||
const accentColor = isControlled ? '#7c3aed' : '#1d4ed8'
|
||||
const headerBg = isControlled ? '#faf5ff' : '#eff6ff'
|
||||
const borderColor = isControlled ? '#e9d5ff' : '#bfdbfe'
|
||||
const badgeBg = isControlled ? '#ede9fe' : '#dbeafe'
|
||||
const badgeColor = isControlled ? '#5b21b6' : '#1e40af'
|
||||
|
||||
const assetLabel = vm.assetType ? (ASSET_TYPE_LABELS[vm.assetType] ?? vm.assetType) : 'Fläche'
|
||||
const headline = getOpportunityHeadline(vm.signalType, assetLabel)
|
||||
|
||||
const tier = getScoreTier(vm.matchScore)
|
||||
const headline = getOpportunityHeadline(vm.signalType, assetLabel)
|
||||
const sourceMeta = vm.signalSourceType ? (SOURCE_META[vm.signalSourceType] ?? null) : null
|
||||
const tier = getScoreTier(vm.matchScore)
|
||||
const theme = SCORE_THEME[tier]
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
borderRadius: 2,
|
||||
overflow: 'hidden',
|
||||
border: `1px solid ${isControlled ? '#bbf7d0' : '#bfdbfe'}`,
|
||||
border: `1px solid ${borderColor}`,
|
||||
borderLeft: `3px solid ${accentColor}`,
|
||||
background: 'white',
|
||||
display: 'flex', flexDirection: 'column',
|
||||
@@ -105,15 +109,19 @@ function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
|
||||
'&:hover': { boxShadow: '0 4px 20px rgba(0,0,0,0.10)', transform: 'translateY(-1px)' },
|
||||
}}>
|
||||
|
||||
{/* Data Header */}
|
||||
<Box sx={{ bgcolor: headerBg, px: 2, pt: 1.75, pb: 1.5, borderBottom: `1px solid ${isControlled ? '#bbf7d0' : '#bfdbfe'}` }}>
|
||||
{/* Asset type + location */}
|
||||
{/* ── Data header ─────────────────────────────────────────────────────── */}
|
||||
<Box sx={{ bgcolor: headerBg, px: 2, pt: 1.75, pb: 1.5, borderBottom: `1px solid ${borderColor}` }}>
|
||||
|
||||
{/* Asset type · location + badge */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 0.5 }}>
|
||||
<Typography sx={{ fontSize: '0.63rem', fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: 0.8 }}>
|
||||
{assetLabel.toUpperCase()} · {vm.locationLabel?.split(',')[0]?.toUpperCase() ?? ''}
|
||||
</Typography>
|
||||
<Box sx={{ bgcolor: badgeBg, color: badgeColor, px: 0.875, py: 0.2, borderRadius: 1, fontSize: '0.63rem', fontWeight: 700, letterSpacing: 0.3 }}>
|
||||
{badge}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.4, bgcolor: badgeBg, color: badgeColor, px: 0.875, py: 0.25, borderRadius: 1, flexShrink: 0 }}>
|
||||
{isControlled && <ShieldCheck size={9} />}
|
||||
<Typography sx={{ fontSize: '0.6rem', fontWeight: 800, letterSpacing: 0.5 }}>
|
||||
{isControlled ? 'PRE-MARKET VERIFIED' : 'MARKET SIGNAL'}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@@ -122,11 +130,11 @@ function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
|
||||
{headline}
|
||||
</Typography>
|
||||
|
||||
{/* Key facts row */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25, flexWrap: 'wrap' }}>
|
||||
{/* Key facts */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flexWrap: 'wrap', mb: 0.875 }}>
|
||||
{vm.signalAreaSqmEstimate ? (
|
||||
<Typography sx={{ fontSize: '0.72rem', color: '#475569' }}>
|
||||
~{vm.signalAreaSqmEstimate.toLocaleString('de-CH')} m²
|
||||
<Typography sx={{ fontSize: '0.75rem', fontWeight: 700, color: '#1e293b' }}>
|
||||
{isControlled ? '' : '~'}{vm.signalAreaSqmEstimate.toLocaleString('de-CH')} m²
|
||||
</Typography>
|
||||
) : null}
|
||||
{vm.availabilityLabel && (
|
||||
@@ -135,10 +143,23 @@ function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Source attribution */}
|
||||
{isControlled ? (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, bgcolor: '#f0fdf4', border: '1px solid #bbf7d0', borderRadius: 1, px: 0.875, py: 0.3, width: 'fit-content' }}>
|
||||
<ShieldCheck size={10} color="#1a7a4a" />
|
||||
<Typography sx={{ fontSize: '0.65rem', fontWeight: 700, color: '#1a7a4a' }}>Direkte Verwaltungsquelle</Typography>
|
||||
</Box>
|
||||
) : sourceMeta ? (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, width: 'fit-content' }}>
|
||||
<Box sx={{ color: '#64748b', display: 'flex' }}>{sourceMeta.icon}</Box>
|
||||
<Typography sx={{ fontSize: '0.65rem', color: '#64748b', fontWeight: 500 }}>{sourceMeta.label}</Typography>
|
||||
</Box>
|
||||
) : null}
|
||||
</Box>
|
||||
|
||||
{/* Score + signal quality strip */}
|
||||
<Box sx={{ px: 2, py: 1.25, display: 'flex', alignItems: 'center', gap: 1.5, borderBottom: '1px solid #f1f5f9', bgcolor: 'white' }}>
|
||||
{/* ── Score + signal quality strip ────────────────────────────────────── */}
|
||||
<Box sx={{ px: 2, py: 1, display: 'flex', alignItems: 'center', gap: 1.5, borderBottom: '1px solid #f1f5f9', bgcolor: 'white' }}>
|
||||
<Box sx={{
|
||||
background: theme.gradient, borderRadius: '8px',
|
||||
px: 1.25, py: 0.4, border: `1px solid ${theme.border}`,
|
||||
@@ -149,21 +170,35 @@ function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
|
||||
</Typography>
|
||||
</Box>
|
||||
<SignalQualityDots quality={vm.signalQuality} />
|
||||
{isControlled && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.35, ml: 'auto', bgcolor: '#f0fdf4', border: '1px solid #86efac', borderRadius: 1, px: 0.625, py: 0.2 }}>
|
||||
<ShieldCheck size={10} color="#1a7a4a" />
|
||||
<Typography sx={{ fontSize: '0.6rem', color: '#1a7a4a', fontWeight: 700 }}>Verifiziert</Typography>
|
||||
{!isControlled && vm.signalProbability !== undefined && (
|
||||
<Box sx={{ ml: 'auto', bgcolor: '#f8fafc', border: '1px solid #e2e8f0', borderRadius: 1, px: 0.75, py: 0.2 }}>
|
||||
<Typography sx={{ fontSize: '0.63rem', color: '#64748b', fontWeight: 600 }}>
|
||||
{Math.round(vm.signalProbability * 100)}% Signalw.
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Card body */}
|
||||
<Box sx={{ px: 2, pt: 1.25, pb: 1.5, flex: 1, display: 'flex', flexDirection: 'column', gap: 0 }}>
|
||||
{/* ── Card body ───────────────────────────────────────────────────────── */}
|
||||
<Box sx={{ px: 2, pt: 1.5, pb: 1.5, flex: 1, display: 'flex', flexDirection: 'column' }}>
|
||||
|
||||
{/* CONTROLLED: Confirmed facts */}
|
||||
{/* MARKET SIGNAL: probabilistic notice */}
|
||||
{!isControlled && (
|
||||
<Box sx={{
|
||||
display: 'flex', alignItems: 'flex-start', gap: 0.6, mb: 1.25,
|
||||
bgcolor: '#fefce8', border: '1px solid #fde68a', borderRadius: 1, px: 1, py: 0.625,
|
||||
}}>
|
||||
<AlertCircle size={11} color="#92400e" style={{ marginTop: 2, flexShrink: 0 }} />
|
||||
<Typography sx={{ fontSize: '0.67rem', color: '#78350f', lineHeight: 1.45 }}>
|
||||
Probabilistischer Marktindikator — kein bestätigtes Objekt. Dient als strategischer Frühindikator.
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* PRE-MARKET VERIFIED: confirmed facts */}
|
||||
{isControlled && (vm.signalConfirmedFacts?.length ?? 0) > 0 && (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.4, mb: 1.25 }}>
|
||||
{(vm.signalConfirmedFacts ?? []).slice(0, 2).map((fact, i) => (
|
||||
{(vm.signalConfirmedFacts ?? []).slice(0, 3).map((fact, i) => (
|
||||
<Box key={i} sx={{ display: 'flex', alignItems: 'center', gap: 0.6 }}>
|
||||
<CheckCircle2 size={12} color="#1a7a4a" style={{ flexShrink: 0 }} />
|
||||
<Typography sx={{ fontSize: '0.72rem', color: '#1a7a4a', fontWeight: 500 }}>{fact}</Typography>
|
||||
@@ -172,13 +207,13 @@ function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* MARKET SIGNAL: Market indicators */}
|
||||
{/* MARKET SIGNAL: market indicators */}
|
||||
{!isControlled && (vm.signalMarketIndicators?.length ?? 0) > 0 && (
|
||||
<>
|
||||
<Box sx={{ mb: 1.25 }}>
|
||||
<Typography sx={{ fontSize: '0.63rem', fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: 0.6, mb: 0.5 }}>
|
||||
Erkannte Marktindikatoren
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.35, mb: 1.25 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.35 }}>
|
||||
{(vm.signalMarketIndicators ?? []).slice(0, 3).map((ind, i) => (
|
||||
<Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.6 }}>
|
||||
<Box sx={{ width: 4, height: 4, borderRadius: '50%', bgcolor: '#1d4ed8', mt: '5px', flexShrink: 0 }} />
|
||||
@@ -186,17 +221,17 @@ function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Why relevant (match reasons) */}
|
||||
{/* Why relevant — match reasons */}
|
||||
{vm.reasons.length > 0 && (
|
||||
<>
|
||||
<Divider sx={{ mb: 1 }} />
|
||||
<Typography sx={{ fontSize: '0.63rem', fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: 0.6, mb: 0.6 }}>
|
||||
Warum relevant für Ihre Suche?
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5, mb: 1.25 }}>
|
||||
{vm.reasons.slice(0, 3).map((r, i) => (
|
||||
<Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.6 }}>
|
||||
<CheckCircle2 size={12} color="#1a7a4a" style={{ marginTop: 2, flexShrink: 0 }} />
|
||||
@@ -211,7 +246,7 @@ function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<Box sx={{ display: 'flex', gap: 0.75, mt: 1.5, pt: 1.25, borderTop: '1px solid rgba(0,0,0,0.06)' }}>
|
||||
<Box sx={{ display: 'flex', gap: 0.75, mt: 'auto', pt: 1.25, borderTop: '1px solid rgba(0,0,0,0.06)' }}>
|
||||
{vm.actions.map(a => (
|
||||
<Button
|
||||
key={a.id}
|
||||
@@ -223,7 +258,7 @@ function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
|
||||
textTransform: 'none', fontSize: '0.7rem', py: 0.375, px: 1,
|
||||
...(a.variant === 'primary' && {
|
||||
bgcolor: accentColor,
|
||||
'&:hover': { bgcolor: isControlled ? '#166534' : '#1e40af' },
|
||||
'&:hover': { bgcolor: isControlled ? '#6d28d9' : '#1e40af' },
|
||||
}),
|
||||
}}
|
||||
>
|
||||
@@ -234,7 +269,7 @@ function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
|
||||
|
||||
{/* Disclaimer footnote */}
|
||||
{vm.disclaimer && (
|
||||
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1, fontSize: '0.65rem', lineHeight: 1.4, borderTop: '1px solid #f1f5f9', pt: 0.75 }}>
|
||||
<Typography variant="caption" color="text.disabled" sx={{ display: 'block', mt: 1, fontSize: '0.63rem', lineHeight: 1.4, borderTop: '1px solid #f1f5f9', pt: 0.75 }}>
|
||||
{vm.disclaimer}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user