feat: Future Availability Intelligence — rebrand & card redesign

Replaces "Schattenmarkt" branding with professional Future Availability
Intelligence throughout the UI. Two distinct card types: Pre-Market
(LEASE_EXPIRY + verified, green accent) and Market Signal (probabilistic,
blue accent). Professioneller Data-Header replaces dark purple gradient.
New detail panel sections: Erkannte Marktindikatoren, Strategische
Interpretation, Bestätigt/Nicht bestätigt. All 15 mock signals enriched
with concrete Swiss CRE market indicators and strategic interpretations.
Signal quality shown as 4-dot indicator (Hoch/Mittel/Niedrig).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
2026-05-20 13:06:16 +02:00
parent d5a4862a28
commit 5fe15bac62
12 changed files with 531 additions and 358 deletions
+13 -13
View File
@@ -10,8 +10,8 @@ interface Props {
onFilterChange: (v: FilterSource) => void
sortBy: SortBy
onSortChange: (v: SortBy) => void
showSchattenmarkt: boolean
onShowSchattenmarktChange: (v: boolean) => void
showFutureAvailability: boolean
onShowFutureAvailabilityChange: (v: boolean) => void
showOwnProperties?: boolean
onShowOwnPropertiesChange?: (v: boolean) => void
isPropertyManager?: boolean
@@ -34,8 +34,8 @@ export function ResultFilterBar({
onFilterChange,
sortBy,
onSortChange,
showSchattenmarkt,
onShowSchattenmarktChange,
showFutureAvailability,
onShowFutureAvailabilityChange,
showOwnProperties,
onShowOwnPropertiesChange,
isPropertyManager,
@@ -68,19 +68,19 @@ export function ResultFilterBar({
<Divider orientation="vertical" flexItem sx={{ mx: 0.5 }} />
{/* Schattenmarkt toggle */}
{/* Future Availability toggle */}
<Chip
size="small"
clickable
icon={<Zap size={11} color={showSchattenmarkt ? '#7c3aed' : '#94a3b8'} />}
label="Schattenmarkt"
onClick={() => onShowSchattenmarktChange(!showSchattenmarkt)}
icon={<Zap size={11} color={showFutureAvailability ? '#7c3aed' : '#94a3b8'} />}
label="Future Availability"
onClick={() => onShowFutureAvailabilityChange(!showFutureAvailability)}
sx={{
bgcolor: showSchattenmarkt ? '#f3e8ff' : 'transparent',
color: showSchattenmarkt ? '#6d28d9' : 'text.disabled',
border: `1px solid ${showSchattenmarkt ? '#c4b5fd' : '#e2e8f0'}`,
fontWeight: showSchattenmarkt ? 600 : 400,
textDecoration: showSchattenmarkt ? 'none' : 'line-through',
bgcolor: showFutureAvailability ? '#f3e8ff' : 'transparent',
color: showFutureAvailability ? '#6d28d9' : 'text.disabled',
border: `1px solid ${showFutureAvailability ? '#c4b5fd' : '#e2e8f0'}`,
fontWeight: showFutureAvailability ? 600 : 400,
textDecoration: showFutureAvailability ? 'none' : 'line-through',
'& .MuiChip-icon': { ml: 0.75 },
}}
/>