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

feat: design token system — DS_TEXT/DS_SURFACE/DS_BORDER + 237 hex migrations

Browse Source 
Token infrastructure (src/lib/ds.ts):
- DS_TEXT: 16 semantic text color tokens (primary/secondary/muted/success/
  warning/error/info/brand/signal + dark variants successDark/warningDark/
  signalDark/infoDark for text on tinted surfaces)
- DS_BG: page/surface/subtle/muted background tokens
- DS_BORDER: default/muted/strong border tokens
- DS_SURFACE: 10 bg+border surface pairs (success/warning/error/info/indigo/
  purple/orange/blue/neutral/slate)
- DS_MATCH_TIER: score-tier surface aliases keyed by strong/moderate/weak
- DS_PRE_MARKET / DS_MARKET_SIGNAL: named aliases for futureCard tokens
- DS_SHADOW: card/panel/dialog elevation tokens
- BADGE_COLORS: 14 semantic presets for GenericBadge (confidenceHigh,
  riskMedium, preMarket, marketSignal, verified, gold, silver, bronze…)

GenericBadge (src/components/shared/GenericBadge.tsx):
- New semanticVariant prop (keyof BADGE_COLORS) — preferred over raw hex
- color prop becomes optional (fallback), type-documented as escape hatch

Priority file migrations — 237 hex literals replaced across 10 files:
  ScoreBreakdownPanel.tsx    −22  PipelineDetailPanel.tsx    −22
  FutureAvailabilityCard.tsx −26  AICompareSummary.tsx       −27
  LocationIntelligencePanel  −39  AssistantPromptSuggestions −18
  UnitStructurePanel.tsx     −25  BerichtDialog.tsx          −24
  PreMarketPanel.tsx         −24  PropertyActivityLogPanel   −10

ESLint (eslint.config.js):
- Updated rule message to reference new tokens (DS_TEXT, DS_SURFACE, etc.)
- Added 'stroke' to monitored property names
- Remains 'warn' for gradual migration; use check:tokens for CI gate

CI script (scripts/check-tokens.js + npm run check:tokens):
- Counts hex patterns in components/ + pages/
- Fails if count > THRESHOLD (ratchet: 1958 baseline, lower per sprint)
- Reports top 15 offenders for prioritizing next migration batch

Results: ESLint targeted sx-prop violations: 1752 → 1030 (−41%)
0 TypeScript errors, 154 tests green

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
2026-05-24 14:05:52 +02:00
parent e62391af66
commit 7934da7669
16 changed files with 445 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/supply/BerichtDialog.tsx
+25 -24
View File
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react'
import { Box, Button, CircularProgress, Dialog, LinearProgress, Typography } from '@mui/material'
import { CheckCircle, Download, FileText } from 'lucide-react'
import type { MarketReport } from '../../domain/marketReport'
import { DS_TEXT, DS_BG, DS_BORDER, DS_SURFACE } from '../../lib/ds'
const SECTION_COLORS: Record<string, string> = {
development: '#1e3a5f',
@@ -80,9 +81,9 @@ export function BerichtDialog({ onClose, report, propertyId }: BerichtDialogProp
PaperProps={{ sx: { height: '88vh', display: 'flex', flexDirection: 'column', overflow: 'hidden' } }}
>
{/* Header */}
<Box sx={{ px: 3, py: 1.5, borderBottom: '1px solid #e2e8f0', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
<Box sx={{ px: 3, py: 1.5, borderBottom: `1px solid ${DS_BORDER.default}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
<Box>
<Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.7rem', textTransform: 'uppercase', fontWeight: 600, letterSpacing: 0.5 }}>
<Typography variant="caption" sx={{ color: DS_TEXT.muted, fontSize: '0.7rem', textTransform: 'uppercase', fontWeight: 600, letterSpacing: 0.5 }}>
Bericht erstellen
</Typography>
<Typography variant="body1" sx={{ fontWeight: 700, color: '#0f172a', fontSize: '0.95rem' }}>
@@ -91,7 +92,7 @@ export function BerichtDialog({ onClose, report, propertyId }: BerichtDialogProp
</Box>
{ready && (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
<CheckCircle size={14} color="#1a7a4a" />
<CheckCircle size={14} color={DS_TEXT.success} />
<Typography variant="caption" sx={{ color: '#166534', fontWeight: 600 }}>Bereit</Typography>
</Box>
)}
@@ -99,29 +100,29 @@ export function BerichtDialog({ onClose, report, propertyId }: BerichtDialogProp
{/* Generating state */}
{!ready && (
<Box sx={{ px: 3, py: 1.5, borderBottom: '1px solid #e2e8f0', bgcolor: '#f8fafc', flexShrink: 0 }}>
<Box sx={{ px: 3, py: 1.5, borderBottom: `1px solid ${DS_BORDER.default}`, bgcolor: DS_SURFACE.neutral.bg, flexShrink: 0 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 1 }}>
<CircularProgress size={16} />
<Typography variant="caption" sx={{ color: '#374151' }}>
PDF-Bericht wird generiert…
</Typography>
<Typography variant="caption" sx={{ color: '#94a3b8', ml: 'auto' }}>{Math.round(progress)}%</Typography>
<Typography variant="caption" sx={{ color: DS_TEXT.disabled, ml: 'auto' }}>{Math.round(progress)}%</Typography>
</Box>
<LinearProgress
variant="determinate"
value={progress}
sx={{ height: 4, borderRadius: 2, bgcolor: '#e2e8f0', '& .MuiLinearProgress-bar': { bgcolor: '#1e3a5f' } }}
sx={{ height: 4, borderRadius: 2, bgcolor: DS_BORDER.default, '& .MuiLinearProgress-bar': { bgcolor: DS_TEXT.brand } }}
/>
</Box>
)}
{/* PDF Preview */}
<Box sx={{ flex: 1, overflow: 'auto', bgcolor: '#f1f5f9', p: 3 }}>
<Box sx={{ flex: 1, overflow: 'auto', bgcolor: DS_BG.subtle, p: 3 }}>
<Box
sx={{
bgcolor: 'white',
borderRadius: 1.5,
border: '1px solid #cbd5e1',
border: `1px solid ${DS_BORDER.strong}`,
boxShadow: '0 4px 16px rgba(15,23,42,0.08)',
p: 4,
fontFamily: '"Georgia", "Times New Roman", serif',
@@ -133,23 +134,23 @@ export function BerichtDialog({ onClose, report, propertyId }: BerichtDialogProp
{/* Document header */}
<Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', mb: 3 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<FileText size={18} color="#1e3a5f" />
<Typography sx={{ fontFamily: 'inherit', fontWeight: 700, color: '#1e3a5f', fontSize: '0.75rem', letterSpacing: 1, textTransform: 'uppercase' }}>
<FileText size={18} color={DS_TEXT.brand} />
<Typography sx={{ fontFamily: 'inherit', fontWeight: 700, color: DS_TEXT.brand, fontSize: '0.75rem', letterSpacing: 1, textTransform: 'uppercase' }}>
Marktsignal-Bericht
</Typography>
</Box>
<Box sx={{ textAlign: 'right' }}>
<Typography variant="caption" sx={{ display: 'block', color: '#94a3b8', fontFamily: 'inherit' }}>Wincasa AG · Zürich</Typography>
<Typography variant="caption" sx={{ display: 'block', color: '#94a3b8', fontFamily: 'inherit' }}>{new Date().toLocaleDateString('de-CH')}</Typography>
<Typography variant="caption" sx={{ display: 'block', color: DS_TEXT.disabled, fontFamily: 'inherit' }}>Wincasa AG · Zürich</Typography>
<Typography variant="caption" sx={{ display: 'block', color: DS_TEXT.disabled, fontFamily: 'inherit' }}>{new Date().toLocaleDateString('de-CH')}</Typography>
</Box>
</Box>
<Box sx={{ borderBottom: '2px solid #1e3a5f', mb: 2.5 }} />
<Box sx={{ borderBottom: `2px solid ${DS_TEXT.brand}`, mb: 2.5 }} />
<Typography sx={{ fontFamily: 'inherit', fontWeight: 700, color: '#0f172a', fontSize: '1.1rem', mb: 0.5 }}>
Standortintelligenz & Marktsignale
</Typography>
<Typography sx={{ fontFamily: 'inherit', color: '#64748b', fontSize: '0.825rem', mb: 3 }}>
<Typography sx={{ fontFamily: 'inherit', color: DS_TEXT.muted, fontSize: '0.825rem', mb: 3 }}>
Objekt-ID: {propertyId} · Generiert: {report?.generatedAt ? new Date(report.generatedAt).toLocaleDateString('de-CH') : new Date().toLocaleDateString('de-CH')} · {signals.length} Signale
</Typography>
@@ -166,18 +167,18 @@ export function BerichtDialog({ onClose, report, propertyId }: BerichtDialogProp
<Typography sx={{ fontFamily: 'inherit', fontWeight: 700, color, fontSize: '0.875rem', textTransform: 'uppercase', letterSpacing: 0.5 }}>
{label}
</Typography>
<Typography sx={{ fontFamily: 'inherit', color: '#94a3b8', fontSize: '0.75rem', ml: 0.5 }}>
<Typography sx={{ fontFamily: 'inherit', color: DS_TEXT.disabled, fontSize: '0.75rem', ml: 0.5 }}>
({catSignals.length})
</Typography>
</Box>
{catSignals.map((s, i) => (
<Box key={s.id} sx={{ mb: i < catSignals.length - 1 ? 2 : 0, pl: 1.5, borderLeft: `2px solid #e2e8f0` }}>
<Box key={s.id} sx={{ mb: i < catSignals.length - 1 ? 2 : 0, pl: 1.5, borderLeft: `2px solid ${DS_BORDER.default}` }}>
<Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1, mb: 0.5 }}>
<Typography sx={{ fontFamily: 'inherit', fontWeight: 700, color: '#0f172a', fontSize: '0.875rem', lineHeight: 1.4 }}>
{s.title}
</Typography>
{s.confidence != null && (
<Typography sx={{ fontFamily: 'inherit', color: '#64748b', fontSize: '0.75rem', flexShrink: 0 }}>
<Typography sx={{ fontFamily: 'inherit', color: DS_TEXT.muted, fontSize: '0.75rem', flexShrink: 0 }}>
KI-Konfidenz: {Math.round(s.confidence * 100)}%
</Typography>
)}
@@ -187,12 +188,12 @@ export function BerichtDialog({ onClose, report, propertyId }: BerichtDialogProp
</Typography>
<Box sx={{ display: 'flex', gap: 2 }}>
{s.date && (
<Typography sx={{ fontFamily: 'inherit', color: '#94a3b8', fontSize: '0.75rem' }}>
<Typography sx={{ fontFamily: 'inherit', color: DS_TEXT.disabled, fontSize: '0.75rem' }}>
{new Date(s.date).toLocaleDateString('de-CH')}
</Typography>
)}
{s.source && (
<Typography sx={{ fontFamily: 'inherit', color: '#94a3b8', fontSize: '0.75rem' }}>
<Typography sx={{ fontFamily: 'inherit', color: DS_TEXT.disabled, fontSize: '0.75rem' }}>
Quelle: {s.source}
</Typography>
)}
@@ -204,14 +205,14 @@ export function BerichtDialog({ onClose, report, propertyId }: BerichtDialogProp
})}
{signals.length === 0 && (
<Typography sx={{ fontFamily: 'inherit', color: '#94a3b8', fontSize: '0.875rem', fontStyle: 'italic', textAlign: 'center', py: 4 }}>
<Typography sx={{ fontFamily: 'inherit', color: DS_TEXT.disabled, fontSize: '0.875rem', fontStyle: 'italic', textAlign: 'center', py: 4 }}>
Keine Marktsignale für dieses Objekt verfügbar.
</Typography>
)}
{/* Footer */}
<Box sx={{ borderTop: '1px solid #e2e8f0', mt: 3, pt: 2 }}>
<Typography sx={{ fontFamily: 'inherit', color: '#94a3b8', fontSize: '0.75rem', textAlign: 'center' }}>
<Box sx={{ borderTop: `1px solid ${DS_BORDER.default}`, mt: 3, pt: 2 }}>
<Typography sx={{ fontFamily: 'inherit', color: DS_TEXT.disabled, fontSize: '0.75rem', textAlign: 'center' }}>
Dieser Bericht wurde automatisch auf Basis von KI-generierten Marktsignalen erstellt. · Wincasa AG
</Typography>
</Box>
@@ -219,7 +220,7 @@ export function BerichtDialog({ onClose, report, propertyId }: BerichtDialogProp
</Box>
{/* Footer actions */}
<Box sx={{ px: 3, py: 1.5, borderTop: '1px solid #e2e8f0', bgcolor: 'white', display: 'flex', justifyContent: 'flex-end', gap: 1, flexShrink: 0 }}>
<Box sx={{ px: 3, py: 1.5, borderTop: `1px solid ${DS_BORDER.default}`, bgcolor: 'white', display: 'flex', justifyContent: 'flex-end', gap: 1, flexShrink: 0 }}>
<Button variant="outlined" onClick={onClose} sx={{ textTransform: 'none' }}>
Schliessen
</Button>
@@ -228,7 +229,7 @@ export function BerichtDialog({ onClose, report, propertyId }: BerichtDialogProp
startIcon={<Download size={15} />}
onClick={handleDownload}
disabled={!ready}
sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
sx={{ textTransform: 'none', bgcolor: DS_TEXT.brand, '&:hover': { bgcolor: '#16304d' } }}
>
Herunterladen
</Button>
src/components/supply/PreMarketPanel.tsx
+20 -19
View File
@@ -6,6 +6,7 @@ import type { Property } from '../../domain/property'
import { MockupUnitProvider } from '../../provider/MockupUnitProvider'
import { propertyService } from '../../services/propertyService'
import { useToastStore } from '../../stores/toastStore'
import { DS_BORDER, DS_PRE_MARKET, DS_SURFACE, DS_TEXT } from '../../lib/ds'
import { floorLabel, SectionTitle } from './PropertyDetailHelpers'
export const MOCK_TODAY = new Date('2026-05-20')
@@ -99,17 +100,17 @@ export function PreMarketPanel({ p }: { p: Property }) {
<Box
sx={{
border: '1px solid',
borderColor: enabled ? '#8b5cf6' : '#e2e8f0',
borderColor: enabled ? '#8b5cf6' : DS_BORDER.default,
borderRadius: 1.5,
p: 1.75,
bgcolor: enabled ? '#faf5ff' : 'transparent',
bgcolor: enabled ? DS_PRE_MARKET.headerBg : 'transparent',
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', gap: 1 }}>
<Zap size={15} color={enabled ? '#7c3aed' : '#94a3b8'} style={{ marginTop: 2 }} />
<Zap size={15} color={enabled ? DS_PRE_MARKET.accent : DS_TEXT.disabled} style={{ marginTop: 2 }} />
<Box>
<Typography variant="body2" sx={{ fontWeight: 600, lineHeight: 1.3 }}>
Pre-Market Matching aktivieren
@@ -120,13 +121,13 @@ export function PreMarketPanel({ p }: { p: Property }) {
</Box>
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, ml: 1, flexShrink: 0 }}>
{saving && <CircularProgress size={12} sx={{ color: '#7c3aed' }} />}
{saving && <CircularProgress size={12} sx={{ color: DS_PRE_MARKET.accent }} />}
<Switch
checked={enabled}
onChange={handleToggle}
size="small"
sx={{
'& .MuiSwitch-switchBase.Mui-checked': { color: '#7c3aed' },
'& .MuiSwitch-switchBase.Mui-checked': { color: DS_PRE_MARKET.accent },
'& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: '#8b5cf6' },
}}
/>
@@ -150,9 +151,9 @@ export function PreMarketPanel({ p }: { p: Property }) {
onClick={() => handleLeadTime(m)}
sx={{
height: 20, fontSize: '0.68rem', cursor: 'pointer',
bgcolor: leadTimeMonths === m ? '#7c3aed' : '#f1f5f9',
color: leadTimeMonths === m ? 'white' : '#374151',
'&:hover': { bgcolor: leadTimeMonths === m ? '#6d28d9' : '#e2e8f0' },
bgcolor: leadTimeMonths === m ? DS_PRE_MARKET.accent : DS_SURFACE.slate.bg,
color: leadTimeMonths === m ? DS_TEXT.inverted : '#374151',
'&:hover': { bgcolor: leadTimeMonths === m ? DS_PRE_MARKET.accentHover : DS_BORDER.default },
}}
/>
))}
@@ -164,8 +165,8 @@ export function PreMarketPanel({ p }: { p: Property }) {
sx={{
display: 'flex', alignItems: 'flex-start', gap: 0.75, p: 1,
borderRadius: 1, border: '1px solid',
bgcolor: isActive ? '#f0fdf4' : '#fff7ed',
borderColor: isActive ? '#bbf7d0' : '#fed7aa',
bgcolor: isActive ? DS_SURFACE.success.bg : DS_SURFACE.orange.bg,
borderColor: isActive ? DS_SURFACE.success.border : DS_SURFACE.orange.border,
}}
>
{isActive
@@ -184,7 +185,7 @@ export function PreMarketPanel({ p }: { p: Property }) {
{/* Unit-level release controls */}
{(p.units?.length ?? 0) > 0 && (
<Box sx={{ mt: 1.25, pt: 1.25, borderTop: '1px solid #e9d5ff' }}>
<Box sx={{ mt: 1.25, pt: 1.25, borderTop: `1px solid ${DS_PRE_MARKET.border}` }}>
<Typography variant="caption" sx={{ fontWeight: 700, color: '#4c1d95', textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.63rem', display: 'block', mb: 0.875 }}>
Einheiten freigeben
</Typography>
@@ -201,10 +202,10 @@ export function PreMarketPanel({ p }: { p: Property }) {
}}
>
<Box>
<Typography sx={{ fontSize: '0.72rem', fontWeight: 600, color: '#1e293b' }}>
<Typography sx={{ fontSize: '0.72rem', fontWeight: 600, color: DS_TEXT.primary }}>
{floorLabel(u)}{u.unitLabel ? ` · ${u.unitLabel}` : ''}
</Typography>
<Typography sx={{ fontSize: '0.65rem', color: '#64748b' }}>
<Typography sx={{ fontSize: '0.65rem', color: DS_TEXT.muted }}>
{u.areaSqm.toLocaleString('de-CH')} m²
{u.currentTenant ? ` · ${u.currentTenant}` : ''}
</Typography>
@@ -223,7 +224,7 @@ export function PreMarketPanel({ p }: { p: Property }) {
}}
/>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
{unitSaving[u.id] && <CircularProgress size={10} sx={{ color: '#7c3aed' }} />}
{unitSaving[u.id] && <CircularProgress size={10} sx={{ color: DS_PRE_MARKET.accent }} />}
<Switch
size="small"
checked={us.enabled}
@@ -233,7 +234,7 @@ export function PreMarketPanel({ p }: { p: Property }) {
saveUnit(u.id, checked, us.availableFrom)
}}
sx={{
'& .MuiSwitch-switchBase.Mui-checked': { color: '#7c3aed' },
'& .MuiSwitch-switchBase.Mui-checked': { color: DS_PRE_MARKET.accent },
'& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: '#8b5cf6' },
}}
/>
@@ -245,25 +246,25 @@ export function PreMarketPanel({ p }: { p: Property }) {
)}
{/* Demand Intelligence */}
<Box sx={{ mt: 1.25, pt: 1.25, borderTop: '1px solid #e9d5ff' }}>
<Box sx={{ mt: 1.25, pt: 1.25, borderTop: `1px solid ${DS_PRE_MARKET.border}` }}>
<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 }} />
<Users size={11} color={DS_PRE_MARKET.accent} 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 }} />
<Target size={11} color={DS_PRE_MARKET.accent} 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 }} />
<TrendingUp size={11} color={DS_PRE_MARKET.accent} style={{ flexShrink: 0 }} />
<Typography variant="caption" sx={{ color: '#374151', lineHeight: 1.3 }}>
Frühzeitige Matchgelegenheit — vor offizieller Vermarktung exklusiv verfügbar
</Typography>
src/components/supply/PropertyActivityLogPanel.tsx
+11 -10
View File
@@ -19,6 +19,7 @@ import {
} from 'lucide-react'
import { usePropertyActivityLog } from '../../hooks/useActivityLog'
import type { ActivityCategory, ActivityEventType } from '../../services/governanceService'
import { DS_TEXT, DS_BG, DS_BORDER } from '../../lib/ds'
const EVENT_LABELS: Record<ActivityEventType, string> = {
PROPERTY_CREATED: 'Objekt erstellt',
@@ -134,13 +135,13 @@ function groupByDate(events: ActivityEvent[]) {
}
function EventRow({ event, isLast }: { event: ActivityEvent; isLast: boolean }) {
const color = EVENT_COLORS[event.type] ?? '#64748b'
const color = EVENT_COLORS[event.type] ?? DS_TEXT.muted
const catMeta = CATEGORY_META[event.category]
return (
<Box sx={{ display: 'flex', gap: 1.25, position: 'relative' }}>
{!isLast && (
<Box sx={{ position: 'absolute', left: 12, top: 28, bottom: -4, width: 2, bgcolor: '#e2e8f0', zIndex: 0 }} />
<Box sx={{ position: 'absolute', left: 12, top: 28, bottom: -4, width: 2, bgcolor: DS_BORDER.default, zIndex: 0 }} />
)}
<Box
sx={{
@@ -168,7 +169,7 @@ function EventRow({ event, isLast }: { event: ActivityEvent; isLast: boolean })
<Chip
label="KI"
size="small"
sx={{ height: 14, fontSize: '0.6rem', bgcolor: '#f1f5f9', color: '#6366f1', fontWeight: 700, cursor: 'default' }}
sx={{ height: 14, fontSize: '0.6rem', bgcolor: DS_BG.subtle, color: '#6366f1', fontWeight: 700, cursor: 'default' }}
/>
</Tooltip>
)}
@@ -181,14 +182,14 @@ function EventRow({ event, isLast }: { event: ActivityEvent; isLast: boolean })
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.4, mt: 0.4 }}>
{event.isAiAction
? <Bot size={10} color="#6366f1" />
: <User size={10} color="#94a3b8" />
: <User size={10} color={DS_TEXT.disabled} />
}
<Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.68rem' }}>
<Typography variant="caption" sx={{ color: DS_TEXT.disabled, fontSize: '0.68rem' }}>
{event.isAiAction ? 'KI-System' : event.performedBy}
</Typography>
</Box>
</Box>
<Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.68rem', flexShrink: 0, pt: 0.25 }}>
<Typography variant="caption" sx={{ color: DS_TEXT.disabled, fontSize: '0.68rem', flexShrink: 0, pt: 0.25 }}>
{formatTime(event.createdAt)}
</Typography>
</Box>
@@ -227,7 +228,7 @@ export function PropertyActivityLogPanel({ propertyId }: PropertyActivityLogPane
return (
<Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
<Typography variant="caption" sx={{ color: '#64748b', fontWeight: 600, fontSize: '0.72rem', textTransform: 'uppercase', letterSpacing: 0.4 }}>
<Typography variant="caption" sx={{ color: DS_TEXT.muted, fontWeight: 600, fontSize: '0.72rem', textTransform: 'uppercase', letterSpacing: 0.4 }}>
{events.length} Ereignisse · Nur für Verwaltung
</Typography>
</Box>
@@ -237,12 +238,12 @@ export function PropertyActivityLogPanel({ propertyId }: PropertyActivityLogPane
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.25 }}>
<Typography
variant="caption"
sx={{ fontWeight: 700, fontSize: '0.7rem', color: '#64748b', textTransform: 'uppercase', letterSpacing: 0.4, whiteSpace: 'nowrap' }}
sx={{ fontWeight: 700, fontSize: '0.7rem', color: DS_TEXT.muted, textTransform: 'uppercase', letterSpacing: 0.4, whiteSpace: 'nowrap' }}
>
{label}
</Typography>
<Box sx={{ flex: 1, height: 1, bgcolor: '#e2e8f0' }} />
<Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.65rem', whiteSpace: 'nowrap' }}>
<Box sx={{ flex: 1, height: 1, bgcolor: DS_BORDER.default }} />
<Typography variant="caption" sx={{ color: DS_TEXT.disabled, fontSize: '0.65rem', whiteSpace: 'nowrap' }}>
{dayEvents.length}×
</Typography>
</Box>
src/components/supply/UnitStructurePanel.tsx
+22 -21
View File
@@ -4,6 +4,7 @@ import { ChevronDown, ChevronUp, Layers, Users } from 'lucide-react'
import { useNavigate } from 'react-router'
import type { Property, PropertyUnit, UnitNeedMatch } from '../../domain/property'
import { unitMatchService } from '../../services/unitMatchService'
import { DS_BORDER, DS_PRE_MARKET, DS_SURFACE, DS_TEXT } from '../../lib/ds'
import { floorLabel } from './PropertyDetailHelpers'
function MatchPill({ m }: { m: UnitNeedMatch }) {
@@ -59,17 +60,17 @@ export function UnitStructurePanel({ p }: { p: Property }) {
Stockwerkstruktur
</Typography>
{freeUnits.length >= 2 && (
<Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.7rem' }}>
<Typography variant="caption" sx={{ color: DS_TEXT.muted, fontSize: '0.7rem' }}>
Freie Einheiten auswählen zum Kombinieren
</Typography>
)}
</Box>
<Box sx={{ border: '1px solid #e2e8f0', borderRadius: 1.5, overflow: 'hidden', mb: 1.5 }}>
<Box sx={{ border: `1px solid ${DS_BORDER.default}`, borderRadius: 1.5, overflow: 'hidden', mb: 1.5 }}>
{/* Header */}
<Box sx={{ display: 'grid', gridTemplateColumns: '28px 72px 88px 1fr auto 80px', bgcolor: '#f8fafc', px: 1.5, py: 0.75, borderBottom: '1px solid #e2e8f0', alignItems: 'center' }}>
<Box sx={{ display: 'grid', gridTemplateColumns: '28px 72px 88px 1fr auto 80px', bgcolor: DS_SURFACE.neutral.bg, px: 1.5, py: 0.75, borderBottom: `1px solid ${DS_BORDER.default}`, alignItems: 'center' }}>
{['', 'Stockwerk', 'Einheit', 'Mieter / Status', 'Matches', 'Fläche'].map(h => (
<Typography key={h} variant="caption" sx={{ fontWeight: 600, color: '#64748b', fontSize: '0.63rem', textTransform: 'uppercase' }}>{h}</Typography>
<Typography key={h} variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.muted, fontSize: '0.63rem', textTransform: 'uppercase' }}>{h}</Typography>
))}
</Box>
@@ -88,9 +89,9 @@ export function UnitStructurePanel({ p }: { p: Property }) {
gridTemplateColumns: '28px 72px 88px 1fr auto 80px',
px: 1.5,
py: 0.875,
borderBottom: isLastRow ? 'none' : '1px solid #f1f5f9',
borderBottom: isLastRow ? 'none' : `1px solid ${DS_BORDER.muted}`,
alignItems: 'center',
bgcolor: isSelected ? '#eff6ff' : 'transparent',
bgcolor: isSelected ? DS_SURFACE.blue.bg : 'transparent',
transition: 'background 0.15s',
}}
>
@@ -101,7 +102,7 @@ export function UnitStructurePanel({ p }: { p: Property }) {
size="small"
checked={isSelected}
onChange={() => toggleUnit(u.id)}
sx={{ p: 0, color: '#94a3b8', '&.Mui-checked': { color: '#2563eb' } }}
sx={{ p: 0, color: DS_TEXT.disabled, '&.Mui-checked': { color: '#2563eb' } }}
/>
)}
</Box>
@@ -118,14 +119,14 @@ export function UnitStructurePanel({ p }: { p: Property }) {
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, flexWrap: 'wrap' }}>
{u.available ? (
<>
<Chip label="Frei" size="small" sx={{ height: 16, fontSize: '0.6rem', bgcolor: '#f0fdf4', color: '#166534', border: '1px solid #bbf7d0' }} />
<Chip label="Frei" size="small" sx={{ height: 16, fontSize: '0.6rem', bgcolor: DS_SURFACE.success.bg, color: '#166534', border: `1px solid ${DS_SURFACE.success.border}` }} />
{u.isFlexible && (
<Chip label="Teilfläche möglich" size="small" sx={{ height: 16, fontSize: '0.58rem', bgcolor: '#eff6ff', color: '#1d4ed8', border: '1px solid #bfdbfe' }} />
<Chip label="Teilfläche möglich" size="small" sx={{ height: 16, fontSize: '0.58rem', bgcolor: DS_SURFACE.blue.bg, color: '#1d4ed8', border: `1px solid ${DS_SURFACE.blue.border}` }} />
)}
<Button
size="small"
variant="text"
sx={{ height: 16, fontSize: '0.58rem', p: 0, minWidth: 0, color: '#7c3aed', textTransform: 'none', lineHeight: 1 }}
sx={{ height: 16, fontSize: '0.58rem', p: 0, minWidth: 0, color: DS_PRE_MARKET.accent, textTransform: 'none', lineHeight: 1 }}
onClick={() => navigate('/supply/new-listing', {
state: {
prefill: {
@@ -146,7 +147,7 @@ export function UnitStructurePanel({ p }: { p: Property }) {
</Button>
</>
) : (
<Typography variant="caption" sx={{ color: '#64748b' }} noWrap>{u.currentTenant ?? 'Vermietet'}</Typography>
<Typography variant="caption" sx={{ color: DS_TEXT.muted }} noWrap>{u.currentTenant ?? 'Vermietet'}</Typography>
)}
</Box>
@@ -157,7 +158,7 @@ export function UnitStructurePanel({ p }: { p: Property }) {
<IconButton
size="small"
onClick={() => setExpandedUnit(isExpanded ? null : u.id)}
sx={{ p: 0.25, color: '#94a3b8' }}
sx={{ p: 0.25, color: DS_TEXT.disabled }}
>
{isExpanded ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
</IconButton>
@@ -170,7 +171,7 @@ export function UnitStructurePanel({ p }: { p: Property }) {
{(u.offeredSqm ?? u.areaSqm).toLocaleString('de-CH')} m²
</Typography>
{u.isFlexible && u.minLettableSqm && (
<Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.6rem', display: 'block' }}>
<Typography variant="caption" sx={{ color: DS_TEXT.disabled, fontSize: '0.6rem', display: 'block' }}>
ab {u.minLettableSqm} m²
</Typography>
)}
@@ -179,22 +180,22 @@ export function UnitStructurePanel({ p }: { p: Property }) {
{/* Expanded: show all matches for this unit */}
<Collapse in={isExpanded}>
<Box sx={{ px: 2, py: 1, bgcolor: '#f8fafc', borderBottom: i < p.units!.length - 1 ? '1px solid #e2e8f0' : 'none' }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', fontSize: '0.65rem', textTransform: 'uppercase', display: 'block', mb: 0.75 }}>
<Box sx={{ px: 2, py: 1, bgcolor: DS_SURFACE.neutral.bg, borderBottom: i < p.units!.length - 1 ? `1px solid ${DS_BORDER.default}` : 'none' }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.muted, fontSize: '0.65rem', textTransform: 'uppercase', display: 'block', mb: 0.75 }}>
Passende Suchanfragen für diese Einheit
</Typography>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
{matches.map(m => (
<Box key={m.needId} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<MatchPill m={m} />
<Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.68rem' }}>
<Typography variant="caption" sx={{ color: DS_TEXT.muted, fontSize: '0.68rem' }}>
{m.requiredSqmMin}–{m.requiredSqmMax} m²
{m.matchType === 'partial' && m.suggestedSqm && ` · Teilfläche ~${m.suggestedSqm} m² anbieten`}
</Typography>
</Box>
))}
{matches.length === 0 && (
<Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.7rem' }}>Keine passenden Suchanfragen</Typography>
<Typography variant="caption" sx={{ color: DS_TEXT.disabled, fontSize: '0.7rem' }}>Keine passenden Suchanfragen</Typography>
)}
</Box>
</Box>
@@ -208,9 +209,9 @@ export function UnitStructurePanel({ p }: { p: Property }) {
{bundle && (
<Box
sx={{
border: '1px solid #bfdbfe',
border: `1px solid ${DS_SURFACE.blue.border}`,
borderRadius: 1.5,
bgcolor: '#eff6ff',
bgcolor: DS_SURFACE.blue.bg,
p: 1.5,
mb: 1.5,
}}
@@ -232,7 +233,7 @@ export function UnitStructurePanel({ p }: { p: Property }) {
</Typography>
{bundleMatches.length > 0 ? (
<Box>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', fontSize: '0.63rem', textTransform: 'uppercase', display: 'block', mb: 0.5 }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.muted, fontSize: '0.63rem', textTransform: 'uppercase', display: 'block', mb: 0.5 }}>
Passende Suchanfragen für Kombination
</Typography>
<Box sx={{ display: 'flex', gap: 0.75, flexWrap: 'wrap' }}>
@@ -240,7 +241,7 @@ export function UnitStructurePanel({ p }: { p: Property }) {
</Box>
</Box>
) : (
<Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.7rem' }}>
<Typography variant="caption" sx={{ color: DS_TEXT.disabled, fontSize: '0.7rem' }}>
Keine direkt passenden Suchanfragen für diese Kombination
</Typography>
)}