johannes.gasser/property-match
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Pre-Market Intelligence UX rework — institutional positioning

Browse Source 
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
2026-05-20 17:50:37 +02:00
parent 67c0701bfe
commit 8f7372157c
3 changed files with 127 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/match-card/IntelligenceMatchCard.tsx
+73 -38
View File
@@ -1,5 +1,6 @@
import { Box, Button, Chip, Divider, Typography } from '@mui/material' import { Box, Button, Chip, Divider, Typography } from '@mui/material'
import { import {
AlertCircle,
BarChart2, BarChart2,
Briefcase, Briefcase,
Building2, Building2,
@@ -21,7 +22,7 @@ const RESULT_TYPE_META: Record<string, { label: string; color: string }> = {
VERIFIED_PORTFOLIO: { label: 'Verified Portfolio', color: '#1e3a5f' }, VERIFIED_PORTFOLIO: { label: 'Verified Portfolio', color: '#1e3a5f' },
EXTERNAL_MARKET: { label: 'Direktinserat', color: '#d97706' }, EXTERNAL_MARKET: { label: 'Direktinserat', color: '#d97706' },
MAISON_WORK: { label: 'Maison Work', color: '#0369a1' }, 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 }> = { 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 }) { function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
const isControlled = vm.signalIsControlled ?? false const isControlled = vm.signalIsControlled ?? false
const accentColor = isControlled ? '#1a7a4a' : '#1d4ed8'
const headerBg = isControlled ? '#f0fdf4' : '#f8fafc' // PRE-MARKET VERIFIED: soft purple / institutional premium
const badge = isControlled ? 'Pre-Market' : 'Market Signal' // MARKET SIGNAL: slate blue / analytical
const badgeBg = isControlled ? '#dcfce7' : '#dbeafe' const accentColor = isControlled ? '#7c3aed' : '#1d4ed8'
const badgeColor = isControlled ? '#1a7a4a' : '#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 assetLabel = vm.assetType ? (ASSET_TYPE_LABELS[vm.assetType] ?? vm.assetType) : 'Fläche'
const headline = getOpportunityHeadline(vm.signalType, assetLabel) const headline = getOpportunityHeadline(vm.signalType, assetLabel)
const sourceMeta = vm.signalSourceType ? (SOURCE_META[vm.signalSourceType] ?? null) : null
const tier = getScoreTier(vm.matchScore) const tier = getScoreTier(vm.matchScore)
const theme = SCORE_THEME[tier] const theme = SCORE_THEME[tier]
return ( return (
<Box sx={{ <Box sx={{
borderRadius: 2, borderRadius: 2,
overflow: 'hidden', overflow: 'hidden',
border: `1px solid ${isControlled ? '#bbf7d0' : '#bfdbfe'}`, border: `1px solid ${borderColor}`,
borderLeft: `3px solid ${accentColor}`, borderLeft: `3px solid ${accentColor}`,
background: 'white', background: 'white',
display: 'flex', flexDirection: 'column', 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)' }, '&:hover': { boxShadow: '0 4px 20px rgba(0,0,0,0.10)', transform: 'translateY(-1px)' },
}}> }}>
{/* Data Header */} {/* ── Data header ─────────────────────────────────────────────────────── */}
<Box sx={{ bgcolor: headerBg, px: 2, pt: 1.75, pb: 1.5, borderBottom: `1px solid ${isControlled ? '#bbf7d0' : '#bfdbfe'}` }}> <Box sx={{ bgcolor: headerBg, px: 2, pt: 1.75, pb: 1.5, borderBottom: `1px solid ${borderColor}` }}>
{/* Asset type + location */}
{/* Asset type · location + badge */}
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 0.5 }}> <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 }}> <Typography sx={{ fontSize: '0.63rem', fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: 0.8 }}>
{assetLabel.toUpperCase()} · {vm.locationLabel?.split(',')[0]?.toUpperCase() ?? ''} {assetLabel.toUpperCase()} · {vm.locationLabel?.split(',')[0]?.toUpperCase() ?? ''}
</Typography> </Typography>
<Box sx={{ bgcolor: badgeBg, color: badgeColor, px: 0.875, py: 0.2, borderRadius: 1, fontSize: '0.63rem', fontWeight: 700, letterSpacing: 0.3 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.4, bgcolor: badgeBg, color: badgeColor, px: 0.875, py: 0.25, borderRadius: 1, flexShrink: 0 }}>
{badge} {isControlled && <ShieldCheck size={9} />}
<Typography sx={{ fontSize: '0.6rem', fontWeight: 800, letterSpacing: 0.5 }}>
{isControlled ? 'PRE-MARKET VERIFIED' : 'MARKET SIGNAL'}
</Typography>
</Box> </Box>
</Box> </Box>
@@ -122,11 +130,11 @@ function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
{headline} {headline}
</Typography> </Typography>
{/* Key facts row */} {/* Key facts */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25, flexWrap: 'wrap' }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flexWrap: 'wrap', mb: 0.875 }}>
{vm.signalAreaSqmEstimate ? ( {vm.signalAreaSqmEstimate ? (
<Typography sx={{ fontSize: '0.72rem', color: '#475569' }}> <Typography sx={{ fontSize: '0.75rem', fontWeight: 700, color: '#1e293b' }}>
~{vm.signalAreaSqmEstimate.toLocaleString('de-CH')} m² {isControlled ? '' : '~'}{vm.signalAreaSqmEstimate.toLocaleString('de-CH')} m²
</Typography> </Typography>
) : null} ) : null}
{vm.availabilityLabel && ( {vm.availabilityLabel && (
@@ -135,10 +143,23 @@ function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
</Typography> </Typography>
)} )}
</Box> </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> </Box>
{/* Score + signal quality strip */} {/* ── Score + signal quality strip ────────────────────────────────────── */}
<Box sx={{ px: 2, py: 1.25, display: 'flex', alignItems: 'center', gap: 1.5, borderBottom: '1px solid #f1f5f9', bgcolor: 'white' }}> <Box sx={{ px: 2, py: 1, display: 'flex', alignItems: 'center', gap: 1.5, borderBottom: '1px solid #f1f5f9', bgcolor: 'white' }}>
<Box sx={{ <Box sx={{
background: theme.gradient, borderRadius: '8px', background: theme.gradient, borderRadius: '8px',
px: 1.25, py: 0.4, border: `1px solid ${theme.border}`, px: 1.25, py: 0.4, border: `1px solid ${theme.border}`,
@@ -149,21 +170,35 @@ function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
</Typography> </Typography>
</Box> </Box>
<SignalQualityDots quality={vm.signalQuality} /> <SignalQualityDots quality={vm.signalQuality} />
{isControlled && ( {!isControlled && vm.signalProbability !== undefined && (
<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 }}> <Box sx={{ ml: 'auto', bgcolor: '#f8fafc', border: '1px solid #e2e8f0', borderRadius: 1, px: 0.75, py: 0.2 }}>
<ShieldCheck size={10} color="#1a7a4a" /> <Typography sx={{ fontSize: '0.63rem', color: '#64748b', fontWeight: 600 }}>
<Typography sx={{ fontSize: '0.6rem', color: '#1a7a4a', fontWeight: 700 }}>Verifiziert</Typography> {Math.round(vm.signalProbability * 100)}% Signalw.
</Typography>
</Box> </Box>
)} )}
</Box> </Box>
{/* Card body */} {/* ── Card body ───────────────────────────────────────────────────────── */}
<Box sx={{ px: 2, pt: 1.25, pb: 1.5, flex: 1, display: 'flex', flexDirection: 'column', gap: 0 }}> <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 && ( {isControlled && (vm.signalConfirmedFacts?.length ?? 0) > 0 && (
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.4, mb: 1.25 }}> <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 }}> <Box key={i} sx={{ display: 'flex', alignItems: 'center', gap: 0.6 }}>
<CheckCircle2 size={12} color="#1a7a4a" style={{ flexShrink: 0 }} /> <CheckCircle2 size={12} color="#1a7a4a" style={{ flexShrink: 0 }} />
<Typography sx={{ fontSize: '0.72rem', color: '#1a7a4a', fontWeight: 500 }}>{fact}</Typography> <Typography sx={{ fontSize: '0.72rem', color: '#1a7a4a', fontWeight: 500 }}>{fact}</Typography>
@@ -172,13 +207,13 @@ function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
</Box> </Box>
)} )}
{/* MARKET SIGNAL: Market indicators */} {/* MARKET SIGNAL: market indicators */}
{!isControlled && (vm.signalMarketIndicators?.length ?? 0) > 0 && ( {!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 }}> <Typography sx={{ fontSize: '0.63rem', fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: 0.6, mb: 0.5 }}>
Erkannte Marktindikatoren Erkannte Marktindikatoren
</Typography> </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) => ( {(vm.signalMarketIndicators ?? []).slice(0, 3).map((ind, i) => (
<Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.6 }}> <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 }} /> <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> </Box>
</> </Box>
)} )}
{/* Why relevant (match reasons) */} {/* Why relevant — match reasons */}
{vm.reasons.length > 0 && ( {vm.reasons.length > 0 && (
<> <>
<Divider sx={{ mb: 1 }} /> <Divider sx={{ mb: 1 }} />
<Typography sx={{ fontSize: '0.63rem', fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: 0.6, mb: 0.6 }}> <Typography sx={{ fontSize: '0.63rem', fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: 0.6, mb: 0.6 }}>
Warum relevant für Ihre Suche? Warum relevant für Ihre Suche?
</Typography> </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) => ( {vm.reasons.slice(0, 3).map((r, i) => (
<Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.6 }}> <Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.6 }}>
<CheckCircle2 size={12} color="#1a7a4a" style={{ marginTop: 2, flexShrink: 0 }} /> <CheckCircle2 size={12} color="#1a7a4a" style={{ marginTop: 2, flexShrink: 0 }} />
@@ -211,7 +246,7 @@ function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
)} )}
{/* Actions */} {/* 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 => ( {vm.actions.map(a => (
<Button <Button
key={a.id} key={a.id}
@@ -223,7 +258,7 @@ function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
textTransform: 'none', fontSize: '0.7rem', py: 0.375, px: 1, textTransform: 'none', fontSize: '0.7rem', py: 0.375, px: 1,
...(a.variant === 'primary' && { ...(a.variant === 'primary' && {
bgcolor: accentColor, bgcolor: accentColor,
'&:hover': { bgcolor: isControlled ? '#166534' : '#1e40af' }, '&:hover': { bgcolor: isControlled ? '#6d28d9' : '#1e40af' },
}), }),
}} }}
> >
@@ -234,7 +269,7 @@ function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
{/* Disclaimer footnote */} {/* Disclaimer footnote */}
{vm.disclaimer && ( {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} {vm.disclaimer}
</Typography> </Typography>
)} )}
src/components/match-detail/FutureAvailabilityContextPanel.tsx
+2 -2
View File
@@ -22,7 +22,7 @@ const SIGNAL_TYPE_LABELS: Record<string, string> = {
RESTRUCTURING: 'Restrukturierung', RESTRUCTURING: 'Restrukturierung',
PROJECT_DEVELOPMENT: 'Projektentwicklung', PROJECT_DEVELOPMENT: 'Projektentwicklung',
SPACE_CONSOLIDATION: 'Flächenkonsolidierung', SPACE_CONSOLIDATION: 'Flächenkonsolidierung',
LEASE_EXPIRY: 'Vertragsende (Schattenmarkt)', LEASE_EXPIRY: 'Vertragsende (Pre-Market)',
} }
const SIGNAL_RELEVANCE_BRIDGE: Record<string, string> = { const SIGNAL_RELEVANCE_BRIDGE: Record<string, string> = {
@@ -32,7 +32,7 @@ const SIGNAL_RELEVANCE_BRIDGE: Record<string, string> = {
RESTRUCTURING: 'Restrukturierung deutet auf Flächenänderungen hin.', RESTRUCTURING: 'Restrukturierung deutet auf Flächenänderungen hin.',
PROJECT_DEVELOPMENT: 'Projektentwicklung könnte neue Gewerbeflächen schaffen.', PROJECT_DEVELOPMENT: 'Projektentwicklung könnte neue Gewerbeflächen schaffen.',
SPACE_CONSOLIDATION: 'Konsolidierung — Teilflächen könnten frei werden.', SPACE_CONSOLIDATION: 'Konsolidierung — Teilflächen könnten frei werden.',
LEASE_EXPIRY: 'Die Verwaltung hat dieses Objekt für den Markt freigegeben — Vertragsende bekannt und bestätigt.', LEASE_EXPIRY: 'Die Verwaltung hat diese Fläche für kontrolliertes Pre-Market Matching freigegeben — Vertragsende aus internem ERP bestätigt.',
} }
const SOURCE_META: Record<string, { label: string; icon: React.ReactNode }> = { const SOURCE_META: Record<string, { label: string; icon: React.ReactNode }> = {
src/components/supply/PropertyDetailView.tsx
+52 -14
View File
@@ -19,7 +19,7 @@ import {
Typography, Typography,
} from '@mui/material' } from '@mui/material'
import { useQueryClient } from '@tanstack/react-query' import { useQueryClient } from '@tanstack/react-query'
import { ChevronDown, ChevronUp, Clock, Edit2, Layers, Save, ShieldCheck, Users, X, Zap } from 'lucide-react' import { ChevronDown, ChevronUp, Clock, Edit2, Layers, Save, ShieldCheck, Target, TrendingUp, Users, X, Zap } from 'lucide-react'
import { useOfferWizardStore } from '../../stores/offerWizardStore' import { useOfferWizardStore } from '../../stores/offerWizardStore'
import { PropertyMap } from '../shared' import { PropertyMap } from '../shared'
import { NeedMatchCard } from './NeedMatchCard' import { NeedMatchCard } from './NeedMatchCard'
@@ -309,11 +309,11 @@ function UnitStructurePanel({ p }: { p: Property }) {
) )
} }
// ── Pre-Market release panel ────────────────────────────────────────────────── // ── Pre-Market Matching panel ─────────────────────────────────────────────────
const MOCK_TODAY = new Date('2026-05-20') const MOCK_TODAY = new Date('2026-05-20')
function SchattenmarktReleasePanel({ p }: { p: Property }) { function PreMarketPanel({ p }: { p: Property }) {
const [enabled, setEnabled] = useState(p.schattenmarktRelease?.enabled ?? false) const [enabled, setEnabled] = useState(p.schattenmarktRelease?.enabled ?? false)
const [leadTimeMonths, setLeadTimeMonths] = useState(p.schattenmarktRelease?.leadTimeMonths ?? 6) const [leadTimeMonths, setLeadTimeMonths] = useState(p.schattenmarktRelease?.leadTimeMonths ?? 6)
const [saving, setSaving] = useState(false) const [saving, setSaving] = useState(false)
@@ -340,13 +340,18 @@ function SchattenmarktReleasePanel({ p }: { p: Property }) {
? Math.max(0, Math.round((targetDate.getTime() - MOCK_TODAY.getTime()) / (1000 * 60 * 60 * 24 * 30))) ? Math.max(0, Math.round((targetDate.getTime() - MOCK_TODAY.getTime()) / (1000 * 60 * 60 * 24 * 30)))
: null : null
// Mock demand intelligence (derived deterministically from property characteristics)
const demandProfiles = Math.min(14, (p.areaSqm >= 1000 ? 5 : p.areaSqm >= 500 ? 8 : 4) +
(['Zürich', 'Basel', 'Bern', 'Zug'].some(c => (p.location?.city ?? '').includes(c)) ? 4 : 1))
const highQualityLeads = Math.max(1, Math.floor(demandProfiles * 0.38))
async function save(nextEnabled: boolean, nextLeadTime: number) { async function save(nextEnabled: boolean, nextLeadTime: number) {
setSaving(true) setSaving(true)
try { try {
await propertyService.update(p.id, { schattenmarktRelease: { enabled: nextEnabled, leadTimeMonths: nextLeadTime } }) await propertyService.update(p.id, { schattenmarktRelease: { enabled: nextEnabled, leadTimeMonths: nextLeadTime } })
await queryClient.invalidateQueries({ queryKey: ['property', p.id] }) await queryClient.invalidateQueries({ queryKey: ['property', p.id] })
await queryClient.invalidateQueries({ queryKey: ['properties'] }) await queryClient.invalidateQueries({ queryKey: ['properties'] })
showToast(nextEnabled ? 'Pre-Market Freigabe aktiviert.' : 'Pre-Market Freigabe deaktiviert.', 'success') showToast(nextEnabled ? 'Pre-Market Matching aktiviert.' : 'Pre-Market Matching deaktiviert.', 'success')
} catch { } catch {
showToast('Fehler beim Speichern.', 'error') showToast('Fehler beim Speichern.', 'error')
} finally { } finally {
@@ -367,7 +372,7 @@ function SchattenmarktReleasePanel({ p }: { p: Property }) {
return ( return (
<> <>
<Divider sx={{ my: 2 }} /> <Divider sx={{ my: 2 }} />
<SectionTitle title="Pre-Market Freigabe" /> <SectionTitle title="Pre-Market Matching" />
<Box <Box
sx={{ sx={{
border: '1px solid', border: '1px solid',
@@ -378,15 +383,16 @@ function SchattenmarktReleasePanel({ p }: { p: Property }) {
transition: 'background 0.2s, border-color 0.2s', transition: 'background 0.2s, border-color 0.2s',
}} }}
> >
{/* Toggle row */}
<Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}> <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}> <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}>
<Zap size={15} color={enabled ? '#7c3aed' : '#94a3b8'} style={{ marginTop: 2 }} /> <Zap size={15} color={enabled ? '#7c3aed' : '#94a3b8'} style={{ marginTop: 2 }} />
<Box> <Box>
<Typography variant="body2" sx={{ fontWeight: 600, lineHeight: 1.3 }}> <Typography variant="body2" sx={{ fontWeight: 600, lineHeight: 1.3 }}>
Pre-Market freigeben Pre-Market Matching aktivieren
</Typography> </Typography>
<Typography variant="caption" color="text.secondary"> <Typography variant="caption" color="text.secondary">
Fläche vor offizieller Vermarktung im Markt sichtbar machen Kontrollierte Freigabe für qualifizierte Suchanfragen — vor offizieller Insertion
</Typography> </Typography>
</Box> </Box>
</Box> </Box>
@@ -404,8 +410,10 @@ function SchattenmarktReleasePanel({ p }: { p: Property }) {
</Box> </Box>
</Box> </Box>
{/* Active: lead time + status + demand intelligence */}
{enabled && ( {enabled && (
<Box sx={{ mt: 1.5 }}> <Box sx={{ mt: 1.5 }}>
{/* Lead time selector */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.25 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.25 }}>
<Typography variant="caption" sx={{ color: '#374151', fontWeight: 500, minWidth: 72 }}> <Typography variant="caption" sx={{ color: '#374151', fontWeight: 500, minWidth: 72 }}>
Lead Time Lead Time
@@ -428,6 +436,7 @@ function SchattenmarktReleasePanel({ p }: { p: Property }) {
</Box> </Box>
</Box> </Box>
{/* Activation status */}
<Box <Box
sx={{ sx={{
display: 'flex', alignItems: 'flex-start', gap: 0.75, p: 1, display: 'flex', alignItems: 'flex-start', gap: 0.75, p: 1,
@@ -442,20 +451,49 @@ function SchattenmarktReleasePanel({ p }: { p: Property }) {
} }
<Typography variant="caption" sx={{ color: isActive ? '#166534' : '#92400e', fontWeight: 500, lineHeight: 1.4 }}> <Typography variant="caption" sx={{ color: isActive ? '#166534' : '#92400e', fontWeight: 500, lineHeight: 1.4 }}>
{isActive {isActive
? `Signal aktiv seit ${triggerDate?.toLocaleDateString('de-CH')} — Objekt im Nachfrage-Feed sichtbar` ? `PRE-MARKET VERIFIED aktiv seit ${triggerDate?.toLocaleDateString('de-CH')} — Fläche im Matching-Feed sichtbar`
: triggerDate : triggerDate
? `Signal aktiv ab ${triggerDate.toLocaleDateString('de-CH')} — noch ${monthsUntil} Monate bis Vertragsende` ? `Freigabe startet ${triggerDate.toLocaleDateString('de-CH')} — noch ${monthsUntil} Monate bis Vertragsende`
: 'Kein Vertragsende hinterlegt' : 'Kein Vertragsende hinterlegt'
} }
</Typography> </Typography>
</Box> </Box>
{/* Demand Intelligence */}
<Box sx={{ mt: 1.25, pt: 1.25, borderTop: '1px solid #e9d5ff' }}>
<Typography variant="caption" sx={{ fontWeight: 700, color: '#4c1d95', textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.63rem', display: 'block', mb: 0.875 }}>
Matching Demand Intelligence
</Typography>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
<Users size={11} color="#7c3aed" style={{ flexShrink: 0 }} />
<Typography variant="caption" sx={{ color: '#374151', lineHeight: 1.3 }}>
<strong>{demandProfiles} aktive Suchprofile</strong> im System erkannt
</Typography>
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
<Target size={11} color="#7c3aed" style={{ flexShrink: 0 }} />
<Typography variant="caption" sx={{ color: '#374151', lineHeight: 1.3 }}>
<strong>{highQualityLeads} hochwertige Suchanfragen</strong> mit passendem Flächenbedarf
</Typography>
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
<TrendingUp size={11} color="#7c3aed" style={{ flexShrink: 0 }} />
<Typography variant="caption" sx={{ color: '#374151', lineHeight: 1.3 }}>
Frühzeitige Matchgelegenheit — vor offizieller Vermarktung exklusiv verfügbar
</Typography>
</Box>
</Box>
</Box>
</Box> </Box>
)} )}
{/* Inactive: explain value proposition */}
{!enabled && ( {!enabled && (
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1 }}> <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1, lineHeight: 1.5 }}>
Wenn aktiviert, erscheint dieses Objekt {leadTimeMonths} Monate vor Vertragsende als Wenn aktiviert, erscheint diese Fläche {leadTimeMonths} Monate vor Vertragsende als
verifiziertes Pre-Market Signal im Nachfrage-Feed. verifiziertes <strong>PRE-MARKET VERIFIED</strong> Signal für qualifizierte Suchanfragen —
kein öffentliches Inserat, kontrolliertes Early Matching.
</Typography> </Typography>
)} )}
</Box> </Box>
@@ -573,8 +611,8 @@ function OverviewPanel({ p, editing, draft, onDraftChange }: OverviewPanelProps)
{/* Floor / unit structure */} {/* Floor / unit structure */}
<UnitStructurePanel p={p} /> <UnitStructurePanel p={p} />
{/* Schattenmarkt release */} {/* Pre-Market Matching */}
<SchattenmarktReleasePanel p={p} /> <PreMarketPanel p={p} />
<Divider sx={{ my: 2 }} /> <Divider sx={{ my: 2 }} />