Benjamin Sutter
da50f3b5ea
- Design tokens (ds.ts, theme.ts, scoreTheme.ts): new warm palette (#152642 navy, #f9f8f6 warm white, #e8e7e4 borders, #b8975a gold accent), flat score tier badges replacing CSS gradients, Inter + DM Serif Display typography - Card components: white-background cards, DM Serif score numbers, max-2 badge chips with +N overflow tooltip, editorial score badge positioning - Layout shell: gold left-accent nav active state, 64px top bar, outlined workspace chip, DM Serif page titles - Shared atoms: GenericBadge (outlined/solid variants), ResultFilterBar (simplified chip styles), DecisionContextPanel (dot metrics, no left accent) - Global replacement (118 files): #1e3a5f→#152642, #e2e8f0→#e8e7e4, #f4f6f9→#f9f8f6 — all handled via Node.js for proper UTF-8 safety Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
247 lines
13 KiB
TypeScript
247 lines
13 KiB
TypeScript
import { memo } from 'react'
|
|
import { Box, Button, Divider, Typography } from '@mui/material'
|
|
import { AlertCircle, CheckCircle2, ShieldCheck } from 'lucide-react'
|
|
import { useNavigate } from 'react-router'
|
|
import { getScoreTier, SCORE_THEME } from '../shared/scoreTheme'
|
|
import { floorLabel, SOURCE_META, ASSET_TYPE_LABELS, getOpportunityHeadline } from './futureAvailabilityCardHelpers'
|
|
import { SignalQualityDots } from './SignalQualityDots'
|
|
import { DS_COLORS, DS_TEXT, DS_SURFACE, DS_BORDER } from '../../lib/ds'
|
|
import type { MatchCardViewModel } from './MatchCardViewModel'
|
|
|
|
// ── Future Availability Card ──────────────────────────────────────────────────
|
|
|
|
export const FutureAvailabilityCard = memo(function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
|
|
const isControlled = vm.signalIsControlled ?? false
|
|
const navigate = useNavigate()
|
|
|
|
const cardColors = isControlled ? DS_COLORS.futureCard.controlled : DS_COLORS.futureCard.signal
|
|
const accentColor = cardColors.accent
|
|
const headerBg = cardColors.headerBg
|
|
const borderColor = cardColors.border
|
|
const badgeBg = cardColors.badgeBg
|
|
const badgeColor = cardColors.badgeText
|
|
|
|
const assetLabel = vm.assetType ? (ASSET_TYPE_LABELS[vm.assetType] ?? vm.assetType) : 'Fläche'
|
|
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 ${borderColor}`,
|
|
background: 'white',
|
|
display: 'flex', flexDirection: 'column',
|
|
boxShadow: '0 1px 8px rgba(0,0,0,0.06)',
|
|
transition: 'box-shadow 0.15s, transform 0.1s',
|
|
'&: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 ${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: DS_TEXT.muted, textTransform: 'uppercase', letterSpacing: 0.8 }}>
|
|
{assetLabel.toUpperCase()} · {vm.locationLabel?.split(',')[0]?.toUpperCase() ?? ''}
|
|
</Typography>
|
|
<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>
|
|
|
|
{/* Opportunity headline */}
|
|
<Typography variant="subtitle1" sx={{ fontWeight: 700, lineHeight: 1.3, color: DS_TEXT.primary, mb: 0.75 }}>
|
|
{headline}
|
|
</Typography>
|
|
|
|
{/* Key facts */}
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flexWrap: 'wrap', mb: 0.875 }}>
|
|
{vm.signalAreaSqmEstimate ? (
|
|
<Typography sx={{ fontSize: '0.75rem', fontWeight: 700, color: DS_TEXT.primary }}>
|
|
{isControlled ? '' : '~'}{vm.signalAreaSqmEstimate.toLocaleString('de-CH')} m²
|
|
</Typography>
|
|
) : null}
|
|
{vm.availabilityLabel && (
|
|
<Typography sx={{ fontSize: '0.72rem', color: DS_TEXT.secondary }}>
|
|
{vm.availabilityLabel}
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
|
|
{/* Source attribution */}
|
|
{isControlled ? (
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, bgcolor: DS_SURFACE.success.bg, border: `1px solid ${DS_SURFACE.success.border}`, borderRadius: 1, px: 0.875, py: 0.3, width: 'fit-content' }}>
|
|
<ShieldCheck size={10} color={DS_TEXT.success} />
|
|
<Typography sx={{ fontSize: '0.65rem', fontWeight: 700, color: DS_TEXT.success }}>Direkte Verwaltungsquelle</Typography>
|
|
</Box>
|
|
) : sourceMeta ? (
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, width: 'fit-content' }}>
|
|
<Box sx={{ color: DS_TEXT.muted, display: 'flex' }}>{sourceMeta.icon}</Box>
|
|
<Typography sx={{ fontSize: '0.65rem', color: DS_TEXT.muted, fontWeight: 500 }}>{sourceMeta.label}</Typography>
|
|
</Box>
|
|
) : null}
|
|
</Box>
|
|
|
|
{/* ── Score + signal quality strip ────────────────────────────────────── */}
|
|
<Box sx={{ px: 2, py: 1, display: 'flex', alignItems: 'center', gap: 1.5, borderBottom: `1px solid ${DS_BORDER.muted}`, bgcolor: 'white' }}>
|
|
<Box sx={{
|
|
background: theme.gradient, borderRadius: '8px',
|
|
px: 1.25, py: 0.4, border: `1px solid ${theme.border}`,
|
|
boxShadow: `0 2px 8px ${theme.glow}`,
|
|
}}>
|
|
<Typography sx={{ fontWeight: 900, fontSize: '1.25rem', color: theme.text, lineHeight: 1 }}>
|
|
{vm.matchScore}%
|
|
</Typography>
|
|
</Box>
|
|
<SignalQualityDots quality={vm.signalQuality} />
|
|
{!isControlled && vm.signalProbability !== undefined && (
|
|
<Box sx={{ ml: 'auto', bgcolor: DS_SURFACE.neutral.bg, border: `1px solid ${DS_BORDER.default}`, borderRadius: 1, px: 0.75, py: 0.2 }}>
|
|
<Typography sx={{ fontSize: '0.63rem', color: DS_TEXT.muted, fontWeight: 600 }}>
|
|
{Math.round(vm.signalProbability * 100)}% Signalw.
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
|
|
{/* ── Card body ───────────────────────────────────────────────────────── */}
|
|
<Box sx={{ px: 2, pt: 1.5, pb: 1.5, flex: 1, display: 'flex', flexDirection: 'column' }}>
|
|
|
|
{/* MARKET SIGNAL: probabilistic notice */}
|
|
{!isControlled && (
|
|
<Box sx={{
|
|
display: 'flex', alignItems: 'flex-start', gap: 0.6, mb: 1.25,
|
|
bgcolor: DS_SURFACE.warning.bg, border: `1px solid ${DS_SURFACE.warning.border}`, borderRadius: 1, px: 1, py: 0.625,
|
|
}}>
|
|
<AlertCircle size={11} color={DS_COLORS.heat.VERY_HOT.text} style={{ marginTop: 2, flexShrink: 0 }} />
|
|
<Typography sx={{ fontSize: '0.67rem', color: DS_COLORS.heat.VERY_HOT.text, 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, 3).map((fact, i) => (
|
|
<Box key={i} sx={{ display: 'flex', alignItems: 'center', gap: 0.6 }}>
|
|
<CheckCircle2 size={12} color={DS_TEXT.success} style={{ flexShrink: 0 }} />
|
|
<Typography sx={{ fontSize: '0.72rem', color: DS_TEXT.success, fontWeight: 500 }}>{fact}</Typography>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
)}
|
|
|
|
{/* PRE-MARKET VERIFIED: specific unit info */}
|
|
{isControlled && vm.preMarketUnit && (
|
|
<Box sx={{ bgcolor: DS_SURFACE.success.bg, border: `1px solid ${DS_SURFACE.success.border}`, borderRadius: 1, px: 1.25, py: 0.875, mb: 1.25 }}>
|
|
<Typography sx={{ fontSize: '0.63rem', fontWeight: 700, color: DS_TEXT.success, textTransform: 'uppercase', letterSpacing: 0.5, mb: 0.4 }}>
|
|
Freigegebene Einheit
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap' }}>
|
|
<Typography sx={{ fontSize: '0.72rem', color: DS_TEXT.primary, fontWeight: 600 }}>
|
|
{floorLabel(vm.preMarketUnit.floorLevel)}{vm.preMarketUnit.unitLabel ? ` · ${vm.preMarketUnit.unitLabel}` : ''}
|
|
</Typography>
|
|
<Typography sx={{ fontSize: '0.72rem', color: DS_TEXT.secondary }}>
|
|
{vm.preMarketUnit.areaSqm.toLocaleString('de-CH')} m²
|
|
</Typography>
|
|
{vm.preMarketUnit.schattenmarktRelease?.availableFrom && (
|
|
<Typography sx={{ fontSize: '0.72rem', color: DS_TEXT.secondary }}>
|
|
ab {new Date(vm.preMarketUnit.schattenmarktRelease.availableFrom).toLocaleDateString('de-CH', { month: 'short', year: 'numeric' })}
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
|
|
{/* MARKET SIGNAL: market indicators */}
|
|
{!isControlled && (vm.signalMarketIndicators?.length ?? 0) > 0 && (
|
|
<Box sx={{ mb: 1.25 }}>
|
|
<Typography sx={{ fontSize: '0.63rem', fontWeight: 700, color: DS_TEXT.muted, textTransform: 'uppercase', letterSpacing: 0.6, mb: 0.5 }}>
|
|
Erkannte Marktindikatoren
|
|
</Typography>
|
|
<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: DS_COLORS.futureCard.signal.indicator, mt: '5px', flexShrink: 0 }} />
|
|
<Typography sx={{ fontSize: '0.72rem', color: DS_TEXT.secondary, lineHeight: 1.3 }}>{ind}</Typography>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
|
|
{/* Why relevant — match reasons */}
|
|
{vm.reasons.length > 0 && (
|
|
<>
|
|
<Divider sx={{ mb: 1 }} />
|
|
<Typography sx={{ fontSize: '0.63rem', fontWeight: 700, color: DS_TEXT.muted, textTransform: 'uppercase', letterSpacing: 0.6, mb: 0.6 }}>
|
|
Warum relevant für Ihre Suche?
|
|
</Typography>
|
|
<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={DS_TEXT.success} style={{ marginTop: 2, flexShrink: 0 }} />
|
|
<Box>
|
|
<Typography sx={{ fontSize: '0.72rem', fontWeight: 600, color: DS_TEXT.primary, lineHeight: 1.3 }}>{r.label}</Typography>
|
|
<Typography sx={{ fontSize: '0.69rem', color: DS_TEXT.muted, lineHeight: 1.3 }}>{r.explanation}</Typography>
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<Box sx={{ display: 'flex', gap: 0.75, mt: 'auto', pt: 1.25, borderTop: '1px solid rgba(0,0,0,0.06)', flexWrap: 'wrap' }}>
|
|
{vm.actions.map(a => (
|
|
<Button
|
|
key={a.id}
|
|
size="small"
|
|
variant={a.variant === 'primary' ? 'contained' : 'outlined'}
|
|
onClick={a.onClick}
|
|
disabled={a.disabled}
|
|
sx={{
|
|
textTransform: 'none', fontSize: '0.7rem', py: 0.375, px: 1,
|
|
...(a.variant === 'primary' && {
|
|
bgcolor: accentColor,
|
|
'&:hover': { bgcolor: cardColors.accentHover },
|
|
}),
|
|
}}
|
|
>
|
|
{a.label}
|
|
</Button>
|
|
))}
|
|
{isControlled && vm.propertyId && (
|
|
<Button
|
|
size="small"
|
|
variant="contained"
|
|
onClick={() => navigate(`/demand/property/${vm.propertyId}${vm.unitId ? `?unit=${vm.unitId}` : ''}`)}
|
|
sx={{
|
|
textTransform: 'none', fontSize: '0.7rem', py: 0.375, px: 1,
|
|
bgcolor: DS_COLORS.futureCard.controlled.accent,
|
|
'&:hover': { bgcolor: DS_COLORS.futureCard.controlled.accentHover },
|
|
ml: 'auto',
|
|
}}
|
|
>
|
|
Zur Einheit →
|
|
</Button>
|
|
)}
|
|
</Box>
|
|
|
|
{/* Disclaimer footnote */}
|
|
{vm.disclaimer && (
|
|
<Typography variant="caption" color="text.disabled" sx={{ display: 'block', mt: 1, fontSize: '0.63rem', lineHeight: 1.4, borderTop: `1px solid ${DS_BORDER.muted}`, pt: 0.75 }}>
|
|
{vm.disclaimer}
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
)
|
|
})
|