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
.claude/settings.json
+2 -1
View File
@@ -10,7 +10,8 @@
"Bash(awk '{print $NF}')",
"Bash(start http://localhost:5173)",
"Bash(npm install *)",
"Bash(git pull *)"
"Bash(git pull *)",
"Bash(node scripts/check-tokens.js)"
]
}
}
eslint.config.js
+11 -5
View File
@@ -19,9 +19,15 @@ export default defineConfig([
globals: globals.browser,
},
},
// Discourage new hardcoded hex colors in components and pages.
// Use DS_COLORS, matchScoreHex(), RESULT_TYPE_META, or MUI theme tokens ("primary.main") instead.
// See src/lib/ds.ts and src/lib/utils.ts for available tokens.
// ── Design Token Enforcement ────────────────────────────────────────────────
// New hardcoded hex colors in components/pages are blocked (error).
// Existing violations are tracked by: npm run check:tokens
//
// Use instead:
// DS_TEXT.secondary, DS_SURFACE.success.bg (src/lib/ds.ts)
// matchScoreHex(score), criterionScoreTextColor(score) (src/lib/utils.ts)
// RESULT_TYPE_META[type].color (src/lib/ds.ts)
// MUI theme tokens: "primary.main", "text.secondary"
{
files: ['src/components/**/*.{ts,tsx}', 'src/pages/**/*.{ts,tsx}'],
rules: {
@@ -29,11 +35,11 @@ export default defineConfig([
'warn',
{
selector: [
'Property[key.name=/^(bgcolor|color|borderColor|background|fill)$/]',
'Property[key.name=/^(bgcolor|color|borderColor|background|fill|stroke)$/]',
' > Literal[value=/^#[0-9A-Fa-f]{3,8}$/]',
].join(''),
message:
'Avoid hardcoded hex colors in sx props. Use DS_COLORS, matchScoreHex(), RESULT_TYPE_META, or MUI theme tokens ("primary.main") from src/lib/ds.ts and src/lib/utils.ts.',
'No hardcoded hex colors in sx/style props. Use DS_TEXT, DS_SURFACE, DS_BORDER, DS_BG, BADGE_COLORS from src/lib/ds.ts, or helper functions from src/lib/utils.ts.',
},
],
},
package.json
+2 -1
View File
@@ -10,7 +10,8 @@
"preview": "vite preview",
"test": "vitest run",
"test:watch": "vitest",
"test:coverage": "vitest run --coverage"
"test:coverage": "vitest run --coverage",
"check:tokens": "node scripts/check-tokens.js"
},
"dependencies": {
"@dnd-kit/core": "^6.3.1",
scripts/check-tokens.js
+70
View File
@@ -0,0 +1,70 @@
#!/usr/bin/env node
/**
* check-tokens.js
*
* Counts hardcoded hex color literals in sx props / color attributes
* across src/components and src/pages. Fails (exit 1) if count exceeds THRESHOLD.
*
* Usage:
* node scripts/check-tokens.js — report + fail if > threshold
* node scripts/check-tokens.js --report — report only, always exits 0
*
* Run via: npm run check:tokens
*/
import { readdirSync, readFileSync, statSync } from 'node:fs'
import { join, extname } from 'node:path'
// Hex literals allowed before CI blocks the build.
// This is a ratchet — lower it as migration progresses. Never raise it.
// Baseline after initial token migration (2026-05-24): 1958
const THRESHOLD = 1958
const HEX_PATTERN = /#[0-9A-Fa-f]{3,8}\b/g
const SEARCH_DIRS = ['src/components', 'src/pages']
function walk(dir) {
const files = []
for (const entry of readdirSync(dir, { withFileTypes: true })) {
const full = join(dir, entry.name)
if (entry.isDirectory()) files.push(...walk(full))
else if (entry.isFile() && ['.ts', '.tsx'].includes(extname(entry.name))) files.push(full)
}
return files
}
const reportOnly = process.argv.includes('--report')
const cwd = process.cwd()
let totalViolations = 0
const fileViolations = []
for (const searchDir of SEARCH_DIRS) {
const dir = join(cwd, searchDir)
for (const file of walk(dir)) {
const content = readFileSync(file, 'utf8')
const matches = content.match(HEX_PATTERN)
if (matches && matches.length > 0) {
totalViolations += matches.length
fileViolations.push({ file: file.replace(cwd + '\\', '').replace(cwd + '/', ''), count: matches.length })
}
}
}
fileViolations.sort((a, b) => b.count - a.count)
console.log('\n── Token Compliance Check ───────────────────────────────────────────')
console.log(`Total hex violations: ${totalViolations} (threshold: ${THRESHOLD})`)
console.log(`Status: ${totalViolations <= THRESHOLD ? '✅ PASS' : '❌ FAIL'}`)
console.log('\nTop 15 offenders:')
fileViolations.slice(0, 15).forEach(({ file, count }) => {
console.log(` ${count.toString().padStart(3)} ${file}`)
})
console.log('─────────────────────────────────────────────────────────────────────\n')
if (!reportOnly && totalViolations > THRESHOLD) {
console.error(`Error: ${totalViolations} hex violations exceed threshold of ${THRESHOLD}.`)
console.error('Run `node scripts/check-tokens.js --report` to see the full list.')
process.exit(1)
}
src/components/assistant/AssistantPromptSuggestions.tsx
+20 -19
View File
@@ -1,5 +1,6 @@
import { Box, Chip, Typography } from '@mui/material'
import type { SuggestedQuestion } from '../../domain/assistant'
import { DS_TEXT, DS_BORDER, DS_SURFACE, BADGE_COLORS } from '../../lib/ds'
interface Props {
suggestions: SuggestedQuestion[]
@@ -9,26 +10,26 @@ interface Props {
const CATEGORY_COLORS: Record<string, string> = {
Match: '#4f46e5',
Datenqualität: '#d97706',
Priorisierung: '#1e3a5f',
Empfehlung: '#1a7a4a',
Risiko: '#c0392b',
Datenqualität: DS_TEXT.warning,
Priorisierung: DS_TEXT.brand,
Empfehlung: DS_TEXT.success,
Risiko: DS_TEXT.error,
Tradeoffs: '#ea580c',
Strategie: '#0891b2',
Analyse: '#7c3aed',
Analyse: BADGE_COLORS.preMarket,
Erklärung: '#0891b2',
Evidenz: '#64748b',
Review: '#7c3aed',
Konfidenz: '#d97706',
Fehler: '#c0392b',
Evidenz: DS_TEXT.muted,
Review: BADGE_COLORS.preMarket,
Konfidenz: DS_TEXT.warning,
Fehler: DS_TEXT.error,
Fehleranalyse: '#ea580c',
Eskalation: '#ea580c',
Prozess: '#64748b',
Kosten: '#1a7a4a',
Impact: '#d97706',
Optimierung: '#1a7a4a',
Aktion: '#1e3a5f',
Überblick: '#64748b',
Prozess: DS_TEXT.muted,
Kosten: DS_TEXT.success,
Impact: DS_TEXT.warning,
Optimierung: DS_TEXT.success,
Aktion: DS_TEXT.brand,
Überblick: DS_TEXT.muted,
Ranking: '#4f46e5',
}
@@ -37,12 +38,12 @@ export function AssistantPromptSuggestions({ suggestions, onSelect, disabled }:
return (
<Box sx={{ px: 2, py: 1.25 }}>
<Typography variant="caption" sx={{ fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5, color: '#94a3b8', display: 'block', mb: 0.75, fontSize: '0.65rem' }}>
<Typography variant="caption" sx={{ fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5, color: DS_TEXT.disabled, display: 'block', mb: 0.75, fontSize: '0.65rem' }}>
Vorschläge
</Typography>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.625 }}>
{suggestions.map(s => {
const catColor = CATEGORY_COLORS[s.category] ?? '#64748b'
const catColor = CATEGORY_COLORS[s.category] ?? DS_TEXT.muted
return (
<Box
key={s.id}
@@ -51,11 +52,11 @@ export function AssistantPromptSuggestions({ suggestions, onSelect, disabled }:
px: 1.25,
py: 0.875,
borderRadius: 1.5,
border: '1px solid #e2e8f0',
border: `1px solid ${DS_BORDER.default}`,
cursor: disabled ? 'default' : 'pointer',
bgcolor: 'white',
opacity: disabled ? 0.5 : 1,
'&:hover': disabled ? {} : { bgcolor: '#f8fafc', borderColor: '#cbd5e1' },
'&:hover': disabled ? {} : { bgcolor: DS_SURFACE.neutral.bg, borderColor: DS_BORDER.strong },
transition: 'all 0.1s ease',
display: 'flex',
alignItems: 'center',
src/components/compare/AICompareSummary.tsx
+27 -26
View File
@@ -2,6 +2,7 @@ import { useState } from 'react'
import { Alert, Box, Chip, CircularProgress, Collapse, Typography } from '@mui/material'
import { ChevronDown, ChevronUp, Trophy, TrendingDown, ShieldCheck, AlertTriangle, Info, ArrowRight, CheckCircle2, XCircle, Star } from 'lucide-react'
import type { ComparisonSummary } from '../../services/aiService'
import { DS_TEXT, DS_BG, DS_BORDER, DS_SURFACE } from '../../lib/ds'
interface Props {
summary?: ComparisonSummary
@@ -12,7 +13,7 @@ export function AICompareSummary({ summary, isLoading }: Props) {
const [open, setOpen] = useState(true)
return (
<Box sx={{ mb: 2, border: '1px solid #e2e8f0', borderRadius: 1, overflow: 'hidden' }}>
<Box sx={{ mb: 2, border: `1px solid ${DS_BORDER.default}`, borderRadius: 1, overflow: 'hidden' }}>
<Box
onClick={() => setOpen(v => !v)}
sx={{
@@ -21,14 +22,14 @@ export function AICompareSummary({ summary, isLoading }: Props) {
justifyContent: 'space-between',
px: 2,
py: 1.25,
bgcolor: '#f8fafc',
bgcolor: DS_SURFACE.neutral.bg,
cursor: 'pointer',
'&:hover': { bgcolor: '#f1f5f9' },
'&:hover': { bgcolor: DS_BG.subtle },
}}
>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Typography variant="subtitle2" sx={{ fontWeight: 700 }}>AI Vergleichs-Zusammenfassung</Typography>
<Chip label="Beta" size="small" sx={{ fontSize: 10, bgcolor: '#ede9fe', color: '#6d28d9' }} />
<Chip label="Beta" size="small" sx={{ fontSize: 10, bgcolor: DS_SURFACE.purple.bg, color: DS_TEXT.signal }} />
</Box>
{open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
</Box>
@@ -45,15 +46,15 @@ export function AICompareSummary({ summary, isLoading }: Props) {
{!isLoading && summary && (
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
{/* Overall assessment */}
<Box sx={{ bgcolor: '#f0f9ff', border: '1px solid #bae6fd', borderRadius: 1, p: 1.5 }}>
<Typography variant="body2" sx={{ color: '#0c4a6e', lineHeight: 1.5 }}>{summary.overallAssessment}</Typography>
<Box sx={{ bgcolor: DS_SURFACE.info.bg, border: `1px solid ${DS_SURFACE.info.border}`, borderRadius: 1, p: 1.5 }}>
<Typography variant="body2" sx={{ color: DS_TEXT.infoDark, lineHeight: 1.5 }}>{summary.overallAssessment}</Typography>
</Box>
{/* Strongest option */}
<Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
<Trophy size={16} color="#1a7a4a" style={{ flexShrink: 0, marginTop: 2 }} />
<Trophy size={16} color={DS_TEXT.success} style={{ flexShrink: 0, marginTop: 2 }} />
<Box>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Stärkstes Match</Typography>
<Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.muted, display: 'block' }}>Stärkstes Match</Typography>
<Typography variant="body2" sx={{ fontWeight: 600 }}>{summary.strongestOption.label}</Typography>
<Typography variant="caption" color="text.secondary">{summary.strongestOption.reason}</Typography>
</Box>
@@ -62,9 +63,9 @@ export function AICompareSummary({ summary, isLoading }: Props) {
{/* Best value */}
{summary.bestValue && (
<Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
<TrendingDown size={16} color="#1e3a5f" style={{ flexShrink: 0, marginTop: 2 }} />
<TrendingDown size={16} color={DS_TEXT.brand} style={{ flexShrink: 0, marginTop: 2 }} />
<Box>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Bestes Preis-Leistungs-Verhältnis</Typography>
<Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.muted, display: 'block' }}>Bestes Preis-Leistungs-Verhältnis</Typography>
<Typography variant="body2" sx={{ fontWeight: 600 }}>{summary.bestValue.label}</Typography>
<Typography variant="caption" color="text.secondary">{summary.bestValue.reason}</Typography>
</Box>
@@ -75,7 +76,7 @@ export function AICompareSummary({ summary, isLoading }: Props) {
<Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
<ShieldCheck size={16} color="#0891b2" style={{ flexShrink: 0, marginTop: 2 }} />
<Box>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Höchste Datenkonfidenz</Typography>
<Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.muted, display: 'block' }}>Höchste Datenkonfidenz</Typography>
<Typography variant="body2" sx={{ fontWeight: 600 }}>
{summary.highestConfidence.label}
<Typography component="span" variant="caption" color="text.secondary" sx={{ ml: 0.5 }}>
@@ -88,9 +89,9 @@ export function AICompareSummary({ summary, isLoading }: Props) {
{/* Tradeoffs */}
{summary.biggestTradeoffs.length > 0 && (
<Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
<AlertTriangle size={16} color="#d97706" style={{ flexShrink: 0, marginTop: 2 }} />
<AlertTriangle size={16} color={DS_TEXT.warning} style={{ flexShrink: 0, marginTop: 2 }} />
<Box>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Wichtigste Abwägungen</Typography>
<Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.muted, display: 'block' }}>Wichtigste Abwägungen</Typography>
{summary.biggestTradeoffs.map((t, i) => (
<Typography key={i} variant="caption" color="text.secondary" sx={{ display: 'block' }}>· {t}</Typography>
))}
@@ -101,9 +102,9 @@ export function AICompareSummary({ summary, isLoading }: Props) {
{/* Missing data */}
{summary.missingDataWarnings.length > 0 && (
<Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
<Info size={16} color="#c0392b" style={{ flexShrink: 0, marginTop: 2 }} />
<Info size={16} color={DS_TEXT.error} style={{ flexShrink: 0, marginTop: 2 }} />
<Box>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Fehlende Informationen</Typography>
<Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.muted, display: 'block' }}>Fehlende Informationen</Typography>
{summary.missingDataWarnings.map((w, i) => (
<Typography key={i} variant="caption" color="error" sx={{ display: 'block' }}>· {w}</Typography>
))}
@@ -114,14 +115,14 @@ export function AICompareSummary({ summary, isLoading }: Props) {
{/* Per-property assessment */}
{summary.perPropertyAssessment.length > 0 && (
<Box>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block', mb: 0.75 }}>Objektbewertung</Typography>
<Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.muted, display: 'block', mb: 0.75 }}>Objektbewertung</Typography>
<Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap' }}>
{summary.perPropertyAssessment.map(prop => (
<Box
key={prop.matchId}
sx={{
flex: '1 1 200px',
border: '1px solid #e2e8f0',
border: `1px solid ${DS_BORDER.default}`,
borderRadius: 1,
p: 1.25,
display: 'flex',
@@ -129,13 +130,13 @@ export function AICompareSummary({ summary, isLoading }: Props) {
gap: 0.75,
}}
>
<Typography variant="body2" sx={{ fontWeight: 700, color: '#1e3a5f' }}>{prop.label}</Typography>
<Typography variant="body2" sx={{ fontWeight: 700, color: DS_TEXT.brand }}>{prop.label}</Typography>
{/* Strengths */}
<Box>
{prop.strengths.map((s, i) => (
<Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.5, mb: 0.25 }}>
<CheckCircle2 size={12} color="#1a7a4a" style={{ flexShrink: 0, marginTop: 2 }} />
<CheckCircle2 size={12} color={DS_TEXT.success} style={{ flexShrink: 0, marginTop: 2 }} />
<Typography variant="caption" color="text.secondary" sx={{ lineHeight: 1.4 }}>{s}</Typography>
</Box>
))}
@@ -145,7 +146,7 @@ export function AICompareSummary({ summary, isLoading }: Props) {
<Box>
{prop.weaknesses.map((w, i) => (
<Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.5, mb: 0.25 }}>
<XCircle size={12} color="#dc2626" style={{ flexShrink: 0, marginTop: 2 }} />
<XCircle size={12} color={DS_TEXT.danger} style={{ flexShrink: 0, marginTop: 2 }} />
<Typography variant="caption" color="text.secondary" sx={{ lineHeight: 1.4 }}>{w}</Typography>
</Box>
))}
@@ -153,8 +154,8 @@ export function AICompareSummary({ summary, isLoading }: Props) {
{/* Best for */}
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.5 }}>
<Star size={12} color="#d97706" style={{ flexShrink: 0, marginTop: 2 }} />
<Typography variant="caption" sx={{ color: '#92400e', lineHeight: 1.4 }}>
<Star size={12} color={DS_TEXT.warning} style={{ flexShrink: 0, marginTop: 2 }} />
<Typography variant="caption" sx={{ color: DS_TEXT.warningDark, lineHeight: 1.4 }}>
<strong>Am besten für:</strong> {prop.bestFor}
</Typography>
</Box>
@@ -162,7 +163,7 @@ export function AICompareSummary({ summary, isLoading }: Props) {
{/* Key risk */}
{prop.keyRisk && (
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.5 }}>
<AlertTriangle size={12} color="#d97706" style={{ flexShrink: 0, marginTop: 2 }} />
<AlertTriangle size={12} color={DS_TEXT.warning} style={{ flexShrink: 0, marginTop: 2 }} />
<Typography variant="caption" color="text.secondary" sx={{ lineHeight: 1.4 }}>{prop.keyRisk}</Typography>
</Box>
)}
@@ -173,10 +174,10 @@ export function AICompareSummary({ summary, isLoading }: Props) {
)}
{/* Recommendation */}
<Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start', pt: 0.5, borderTop: '1px solid #f1f5f9', mt: 0.5 }}>
<ArrowRight size={16} color="#1e3a5f" style={{ flexShrink: 0, marginTop: 2 }} />
<Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start', pt: 0.5, borderTop: `1px solid ${DS_BORDER.muted}`, mt: 0.5 }}>
<ArrowRight size={16} color={DS_TEXT.brand} style={{ flexShrink: 0, marginTop: 2 }} />
<Box>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Empfehlung</Typography>
<Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.muted, display: 'block' }}>Empfehlung</Typography>
<Typography variant="body2">{summary.recommendation}</Typography>
</Box>
</Box>
src/components/match-card/FutureAvailabilityCard.tsx
+30 -30
View File
@@ -4,7 +4,7 @@ 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 } from '../../lib/ds'
import { DS_COLORS, DS_TEXT, DS_SURFACE, DS_BORDER } from '../../lib/ds'
import type { MatchCardViewModel } from './MatchCardViewModel'
// ── Future Availability Card ──────────────────────────────────────────────────
@@ -44,7 +44,7 @@ export function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
{/* 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 }}>
<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 }}>
@@ -56,19 +56,19 @@ export function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
</Box>
{/* Opportunity headline */}
<Typography variant="subtitle1" sx={{ fontWeight: 700, lineHeight: 1.3, color: '#1e293b', mb: 0.75 }}>
<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: '#1e293b' }}>
<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: '#475569' }}>
<Typography sx={{ fontSize: '0.72rem', color: DS_TEXT.secondary }}>
{vm.availabilityLabel}
</Typography>
)}
@@ -76,20 +76,20 @@ export function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
{/* 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 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: '#64748b', display: 'flex' }}>{sourceMeta.icon}</Box>
<Typography sx={{ fontSize: '0.65rem', color: '#64748b', fontWeight: 500 }}>{sourceMeta.label}</Typography>
<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 #f1f5f9', bgcolor: 'white' }}>
<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}`,
@@ -101,8 +101,8 @@ export function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
</Box>
<SignalQualityDots quality={vm.signalQuality} />
{!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 }}>
<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>
@@ -116,10 +116,10 @@ export function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
{!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,
bgcolor: DS_SURFACE.warning.bg, border: `1px solid ${DS_SURFACE.warning.border}`, 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 }}>
<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>
@@ -130,8 +130,8 @@ export function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
<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="#1a7a4a" style={{ flexShrink: 0 }} />
<Typography sx={{ fontSize: '0.72rem', color: '#1a7a4a', fontWeight: 500 }}>{fact}</Typography>
<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>
@@ -139,19 +139,19 @@ export function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
{/* PRE-MARKET VERIFIED: specific unit info */}
{isControlled && vm.preMarketUnit && (
<Box sx={{ bgcolor: '#f0fdf4', border: '1px solid #bbf7d0', borderRadius: 1, px: 1.25, py: 0.875, mb: 1.25 }}>
<Typography sx={{ fontSize: '0.63rem', fontWeight: 700, color: '#1a7a4a', textTransform: 'uppercase', letterSpacing: 0.5, mb: 0.4 }}>
<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: '#1e293b', fontWeight: 600 }}>
<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: '#475569' }}>
<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: '#475569' }}>
<Typography sx={{ fontSize: '0.72rem', color: DS_TEXT.secondary }}>
ab {new Date(vm.preMarketUnit.schattenmarktRelease.availableFrom).toLocaleDateString('de-CH', { month: 'short', year: 'numeric' })}
</Typography>
)}
@@ -162,14 +162,14 @@ export function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
{/* 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 }}>
<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: '#475569', lineHeight: 1.3 }}>{ind}</Typography>
<Typography sx={{ fontSize: '0.72rem', color: DS_TEXT.secondary, lineHeight: 1.3 }}>{ind}</Typography>
</Box>
))}
</Box>
@@ -180,16 +180,16 @@ export function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
{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 }}>
<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="#1a7a4a" style={{ marginTop: 2, flexShrink: 0 }} />
<CheckCircle2 size={12} color={DS_TEXT.success} style={{ marginTop: 2, flexShrink: 0 }} />
<Box>
<Typography sx={{ fontSize: '0.72rem', fontWeight: 600, color: '#1e293b', lineHeight: 1.3 }}>{r.label}</Typography>
<Typography sx={{ fontSize: '0.69rem', color: '#64748b', lineHeight: 1.3 }}>{r.explanation}</Typography>
<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>
))}
@@ -236,7 +236,7 @@ export function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {
{/* Disclaimer footnote */}
{vm.disclaimer && (
<Typography variant="caption" color="text.disabled" sx={{ display: 'block', mt: 1, fontSize: '0.63rem', 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 ${DS_BORDER.muted}`, pt: 0.75 }}>
{vm.disclaimer}
</Typography>
)}
src/components/match-detail/LocationIntelligencePanel.tsx
+21 -20
View File
@@ -7,6 +7,7 @@ import { useNavigate } from 'react-router'
import { useProperties } from '../../hooks/useProperties'
import { getCityIntelligence } from '../../lib/locationIntelligence'
import type { Property } from '../../domain/property'
import { DS_TEXT, DS_SURFACE, DS_BORDER } from '../../lib/ds'
import { SoftFactorBar } from './SoftFactorBar'
import { KpiTile } from './KpiTile'
import { NEW_PROJECTS } from './locationIntelligenceConstants'
@@ -63,31 +64,31 @@ export function LocationIntelligencePanel({ property }: Props) {
label="Leerstandsquote"
value={`${intel.vacancyRatePct}%`}
sub={intel.vacancyRatePct < 3 ? 'Angespannter Markt' : intel.vacancyRatePct < 5 ? 'Ausgeglichen' : 'Käufermarkt'}
color={intel.vacancyRatePct < 3 ? '#c0392b' : intel.vacancyRatePct < 5 ? '#d97706' : '#1a7a4a'}
color={intel.vacancyRatePct < 3 ? DS_TEXT.error : intel.vacancyRatePct < 5 ? DS_TEXT.warning : DS_TEXT.success}
/>
<KpiTile
label="Mietpreis-Trend"
value={`${rentTrendPositive ? '+' : ''}${intel.rentTrend12m}%`}
sub="letzte 12 Monate"
color={rentTrendPositive ? '#c0392b' : '#1a7a4a'}
color={rentTrendPositive ? DS_TEXT.error : DS_TEXT.success}
/>
<KpiTile
label="Kaufkraft-Index"
value={`${intel.purchasingPowerIndex}`}
sub="CH-Mittel = 100"
color={intel.purchasingPowerIndex >= 115 ? '#1a7a4a' : intel.purchasingPowerIndex >= 95 ? '#d97706' : '#c0392b'}
color={intel.purchasingPowerIndex >= 115 ? DS_TEXT.success : intel.purchasingPowerIndex >= 95 ? DS_TEXT.warning : DS_TEXT.error}
/>
<KpiTile
label="Ø Vermietungsdauer"
value={`${intel.avgDaysOnMarket}T`}
sub="Tage auf dem Markt"
color={intel.avgDaysOnMarket < 40 ? '#c0392b' : intel.avgDaysOnMarket < 65 ? '#d97706' : '#1a7a4a'}
color={intel.avgDaysOnMarket < 40 ? DS_TEXT.error : intel.avgDaysOnMarket < 65 ? DS_TEXT.warning : DS_TEXT.success}
/>
</Box>
{/* Rent trend interpretation */}
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1, p: 1.5, bgcolor: rentTrendPositive ? '#fff8f0' : '#f0fdf4', borderRadius: 1.5, mb: 2 }}>
<Box sx={{ color: rentTrendPositive ? '#d97706' : '#1a7a4a', mt: 0.1 }}>
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1, p: 1.5, bgcolor: rentTrendPositive ? '#fff8f0' : DS_SURFACE.success.bg, borderRadius: 1.5, mb: 2 }}>
<Box sx={{ color: rentTrendPositive ? DS_TEXT.warning : DS_TEXT.success, mt: 0.1 }}>
{rentTrendPositive ? <TrendingUp size={16} /> : <TrendingDown size={16} />}
</Box>
<Typography variant="body2" sx={{ color: rentTrendPositive ? '#92400e' : '#14532d' }}>
@@ -99,29 +100,29 @@ export function LocationIntelligencePanel({ property }: Props) {
{/* Tax + demand */}
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', mb: 2 }}>
<Box sx={{ flex: 1, p: 1.5, bgcolor: '#f8fafc', borderRadius: 1.5, border: '1px solid #e2e8f0', minWidth: 140 }}>
<Box sx={{ flex: 1, p: 1.5, bgcolor: DS_SURFACE.neutral.bg, borderRadius: 1.5, border: `1px solid ${DS_BORDER.default}`, minWidth: 140 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 0.5 }}>
<Percent size={13} color="#64748b" />
<Percent size={13} color={DS_TEXT.muted} />
<Typography variant="caption" color="text.secondary">Steuerindex Kanton</Typography>
</Box>
<Typography variant="subtitle2" sx={{ fontWeight: 700, color: intel.taxIndexCanton <= 80 ? '#1a7a4a' : intel.taxIndexCanton <= 105 ? '#d97706' : '#c0392b' }}>
<Typography variant="subtitle2" sx={{ fontWeight: 700, color: intel.taxIndexCanton <= 80 ? DS_TEXT.success : intel.taxIndexCanton <= 105 ? DS_TEXT.warning : DS_TEXT.error }}>
{intel.taxIndexCanton} <Typography component="span" variant="caption" color="text.secondary">(CH = 100)</Typography>
</Typography>
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.25 }}>
{intel.taxIndexCanton <= 75 ? 'Sehr steuerattraktiv' : intel.taxIndexCanton <= 95 ? 'Günstige Steuerlast' : intel.taxIndexCanton <= 110 ? 'Durchschnittlich' : 'Hohe Steuerlast'}
</Typography>
</Box>
<Box sx={{ flex: 1, p: 1.5, bgcolor: '#f8fafc', borderRadius: 1.5, border: '1px solid #e2e8f0', minWidth: 140 }}>
<Box sx={{ flex: 1, p: 1.5, bgcolor: DS_SURFACE.neutral.bg, borderRadius: 1.5, border: `1px solid ${DS_BORDER.default}`, minWidth: 140 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 0.5 }}>
<Activity size={13} color="#64748b" />
<Activity size={13} color={DS_TEXT.muted} />
<Typography variant="caption" color="text.secondary">Nachfragestärke</Typography>
</Box>
<Chip
label={{ LOW: 'Gering', MEDIUM: 'Mittel', HIGH: 'Hoch', VERY_HIGH: 'Sehr hoch' }[intel.demandStrength]}
size="small"
sx={{
bgcolor: { LOW: '#f1f5f9', MEDIUM: '#fef3c7', HIGH: '#dcfce7', VERY_HIGH: '#f0fdf4' }[intel.demandStrength],
color: { LOW: '#64748b', MEDIUM: '#d97706', HIGH: '#16a34a', VERY_HIGH: '#1a7a4a' }[intel.demandStrength],
bgcolor: { LOW: '#f1f5f9', MEDIUM: '#fef3c7', HIGH: '#dcfce7', VERY_HIGH: DS_SURFACE.success.bg }[intel.demandStrength],
color: { LOW: DS_TEXT.muted, MEDIUM: DS_TEXT.warning, HIGH: '#16a34a', VERY_HIGH: DS_TEXT.success }[intel.demandStrength],
fontWeight: 600, fontSize: 11,
}}
/>
@@ -133,12 +134,12 @@ export function LocationIntelligencePanel({ property }: Props) {
{/* Industry clusters */}
<Box sx={{ mb: 2 }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#475569', display: 'block', mb: 0.75 }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.secondary, display: 'block', mb: 0.75 }}>
Dominante Branchen-Cluster
</Typography>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
{intel.dominantIndustryClusters.map(c => (
<Chip key={c} label={c} size="small" sx={{ bgcolor: '#eff6ff', color: '#1e3a5f', fontSize: 11, height: 22 }} />
<Chip key={c} label={c} size="small" sx={{ bgcolor: '#eff6ff', color: DS_TEXT.brand, fontSize: 11, height: 22 }} />
))}
</Box>
</Box>
@@ -147,8 +148,8 @@ export function LocationIntelligencePanel({ property }: Props) {
{intel.plannedInfrastructure.length > 0 && (
<Box sx={{ mb: 2 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 0.75 }}>
<Train size={13} color="#64748b" />
<Typography variant="caption" sx={{ fontWeight: 600, color: '#475569' }}>
<Train size={13} color={DS_TEXT.muted} />
<Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.secondary }}>
Geplante Infrastruktur-Projekte
</Typography>
</Box>
@@ -173,7 +174,7 @@ export function LocationIntelligencePanel({ property }: Props) {
{/* ── Soft Factors ── */}
{hasSoftFactors && (
<Box sx={{ mb: 1.5 }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#475569', display: 'block', mb: 1 }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.secondary, display: 'block', mb: 1 }}>
KI-berechnete Standortqualität
</Typography>
<SoftFactorBar
@@ -221,7 +222,7 @@ export function LocationIntelligencePanel({ property }: Props) {
{comparables.length > 0 && (
<>
<Divider sx={{ my: 1.5 }} />
<Typography variant="caption" sx={{ fontWeight: 600, color: '#475569', display: 'block', mb: 0.75 }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.secondary, display: 'block', mb: 0.75 }}>
Vergleichbare Angebote in {city}
</Typography>
{comparables.map(p => (
@@ -231,7 +232,7 @@ export function LocationIntelligencePanel({ property }: Props) {
sx={{
display: 'flex', alignItems: 'center', gap: 1.5, py: 0.75,
borderBottom: '1px solid #f1f5f9', cursor: 'pointer',
'&:hover': { bgcolor: '#f8fafc', borderRadius: 0.5 },
'&:hover': { bgcolor: DS_SURFACE.neutral.bg, borderRadius: 0.5 },
}}
>
<Building2 size={13} color="#3b82f6" />
src/components/match-detail/ScoreBreakdownPanel.tsx
+36 -36
View File
@@ -6,7 +6,7 @@ import type { FutureSignal } from '../../domain/futureSignal'
import { CREDIBILITY_LABELS, HARD_KEYS, factorLabel } from './scoreBreakdownConstants'
import { CriterionRow } from './CriterionRow'
import { criterionScoreColor, criterionScoreTextColor } from '../../lib/utils'
import { DS_COLORS } from '../../lib/ds'
import { DS_COLORS, DS_TEXT, DS_SURFACE } from '../../lib/ds'
import { SCORE_STRONG, SCORE_MODERATE } from '../../lib/constants'
// ── Standard breakdown (VERIFIED_PORTFOLIO / EXTERNAL / MAISON) ──────────────
@@ -46,7 +46,7 @@ function StandardBreakdown({ match, taxCalculatorUrl }: StandardBreakdownProps)
{hardFactors.map((f, i) => <CriterionRow key={i} factor={f} maxWeight={maxHardWeight} />)}
<Box sx={{ display: 'flex', justifyContent: 'space-between', bgcolor: '#eef2ff', px: 1.25, py: 0.75, borderRadius: 1, mt: 0.25, mb: hasAllFactors && softFactors.length > 0 ? 2 : 1.5 }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', bgcolor: DS_SURFACE.indigo.bg, px: 1.25, py: 0.75, borderRadius: 1, mt: 0.25, mb: hasAllFactors && softFactors.length > 0 ? 2 : 1.5 }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: 'primary.main' }}>
Hart-Kriterien {sb.hardMatchScore}/100 × 60%
</Typography>
@@ -57,11 +57,11 @@ function StandardBreakdown({ match, taxCalculatorUrl }: StandardBreakdownProps)
{/* Soft factors: full list when allFactors present, otherwise summary row */}
{!hasAllFactors && (
<Box sx={{ display: 'flex', justifyContent: 'space-between', bgcolor: '#f8fafc', px: 1.25, py: 0.75, borderRadius: 1, mb: 1.5 }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#475569' }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', bgcolor: DS_SURFACE.neutral.bg, px: 1.25, py: 0.75, borderRadius: 1, mb: 1.5 }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.secondary }}>
Soft-Faktoren {sb.softFactorScore}/100 × 40%
</Typography>
<Typography variant="caption" sx={{ fontWeight: 800, color: '#475569' }}>
<Typography variant="caption" sx={{ fontWeight: 800, color: DS_TEXT.secondary }}>
{softContrib} Pkt
</Typography>
</Box>
@@ -70,15 +70,15 @@ function StandardBreakdown({ match, taxCalculatorUrl }: StandardBreakdownProps)
{hasAllFactors && softFactors.length > 0 && (
<>
<Divider sx={{ mb: 2 }} />
<Typography variant="caption" sx={{ fontWeight: 700, color: '#475569', textTransform: 'uppercase', letterSpacing: 0.6, display: 'block', mb: 1.25 }}>
<Typography variant="caption" sx={{ fontWeight: 700, color: DS_TEXT.secondary, textTransform: 'uppercase', letterSpacing: 0.6, display: 'block', mb: 1.25 }}>
Soft-Faktoren
</Typography>
{softFactors.map((f, i) => <CriterionRow key={i} factor={f} maxWeight={maxSoftWeight} />)}
<Box sx={{ display: 'flex', justifyContent: 'space-between', bgcolor: '#f8fafc', px: 1.25, py: 0.75, borderRadius: 1, mt: 0.25, mb: 1.5 }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#475569' }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', bgcolor: DS_SURFACE.neutral.bg, px: 1.25, py: 0.75, borderRadius: 1, mt: 0.25, mb: 1.5 }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.secondary }}>
Soft-Score {sb.softFactorScore}/100 × 40%
</Typography>
<Typography variant="caption" sx={{ fontWeight: 800, color: '#475569' }}>
<Typography variant="caption" sx={{ fontWeight: 800, color: DS_TEXT.secondary }}>
{softContrib} Pkt
</Typography>
</Box>
@@ -87,10 +87,10 @@ function StandardBreakdown({ match, taxCalculatorUrl }: StandardBreakdownProps)
{/* Tax link */}
{taxCalculatorUrl && (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5, p: 1.25, bgcolor: '#f0f9ff', borderRadius: 1, border: '1px solid #bae6fd' }}>
<ExternalLink size={13} color="#0369a1" style={{ flexShrink: 0 }} />
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5, p: 1.25, bgcolor: DS_SURFACE.info.bg, borderRadius: 1, border: `1px solid ${DS_SURFACE.info.border}` }}>
<ExternalLink size={13} color={DS_TEXT.info} style={{ flexShrink: 0 }} />
<Box>
<Typography variant="caption" sx={{ color: '#0369a1', fontWeight: 600, display: 'block', lineHeight: 1.2 }}>
<Typography variant="caption" sx={{ color: DS_TEXT.info, fontWeight: 600, display: 'block', lineHeight: 1.2 }}>
Steuerlast in Bewertung eingeflossen
</Typography>
<Link
@@ -98,7 +98,7 @@ function StandardBreakdown({ match, taxCalculatorUrl }: StandardBreakdownProps)
target="_blank"
rel="noopener noreferrer"
underline="hover"
sx={{ fontSize: '0.72rem', color: '#0369a1' }}
sx={{ fontSize: '0.72rem', color: DS_TEXT.info }}
>
Steuerrechner Gemeinde öffnen →
</Link>
@@ -109,11 +109,11 @@ function StandardBreakdown({ match, taxCalculatorUrl }: StandardBreakdownProps)
<Divider sx={{ mb: 1.5 }} />
{/* Formula row — always visible */}
<Box sx={{ bgcolor: '#f8fafc', px: 1.25, py: 0.75, borderRadius: 1, mb: 1.25 }}>
<Typography variant="caption" sx={{ color: '#64748b', display: 'block', mb: 0.4, fontWeight: 500 }}>
<Box sx={{ bgcolor: DS_SURFACE.neutral.bg, px: 1.25, py: 0.75, borderRadius: 1, mb: 1.25 }}>
<Typography variant="caption" sx={{ color: DS_TEXT.muted, display: 'block', mb: 0.4, fontWeight: 500 }}>
Berechnung
</Typography>
<Typography variant="caption" sx={{ fontFamily: 'monospace', color: '#1e293b', display: 'block', lineHeight: 1.6 }}>
<Typography variant="caption" sx={{ fontFamily: 'monospace', color: DS_TEXT.primary, display: 'block', lineHeight: 1.6 }}>
Hart {sb.hardMatchScore} × 60% + Soft {sb.softFactorScore} × 40%
{' = '}{hardContrib} + {softContrib} = {baseSum}
</Typography>
@@ -122,7 +122,7 @@ function StandardBreakdown({ match, taxCalculatorUrl }: StandardBreakdownProps)
{/* Total */}
<Box sx={{
display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
bgcolor: baseSum >= SCORE_STRONG ? '#f0fdf4' : baseSum >= SCORE_MODERATE ? '#fffbeb' : '#fef2f2',
bgcolor: baseSum >= SCORE_STRONG ? DS_SURFACE.success.bg : baseSum >= SCORE_MODERATE ? DS_SURFACE.warning.bg : DS_SURFACE.error.bg,
p: 1.5, borderRadius: 1,
}}>
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>Gesamt-Score</Typography>
@@ -176,11 +176,11 @@ function SignalScoreDerivation({ match, signal }: SignalScoreDerivationProps) {
<Box key={i} sx={{ mb: 1.25 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.6, mb: 0.4 }}>
{isPositive
? <CheckCircle2 size={12} color="#1a7a4a" style={{ flexShrink: 0 }} />
: <X size={12} color="#c0392b" style={{ flexShrink: 0 }} />
? <CheckCircle2 size={12} color={DS_TEXT.success} style={{ flexShrink: 0 }} />
: <X size={12} color={DS_TEXT.error} style={{ flexShrink: 0 }} />
}
<Box sx={{ flex: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#1e293b' }}>{factorLabel(f.criterion)}</Typography>
<Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.primary }}>{factorLabel(f.criterion)}</Typography>
<Typography variant="caption" sx={{ fontWeight: 700, color: criterionScoreTextColor(f.score), ml: 1 }}>{f.score}/100</Typography>
</Box>
</Box>
@@ -197,9 +197,9 @@ function SignalScoreDerivation({ match, signal }: SignalScoreDerivationProps) {
)
})}
<Box sx={{ display: 'flex', justifyContent: 'space-between', bgcolor: '#f8fafc', px: 1.25, py: 0.75, borderRadius: 1, mt: 0.5 }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#475569' }}>Basis-Score</Typography>
<Typography variant="caption" sx={{ fontWeight: 800, color: '#1e293b' }}>{sb.hardMatchScore}/100</Typography>
<Box sx={{ display: 'flex', justifyContent: 'space-between', bgcolor: DS_SURFACE.neutral.bg, px: 1.25, py: 0.75, borderRadius: 1, mt: 0.5 }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.secondary }}>Basis-Score</Typography>
<Typography variant="caption" sx={{ fontWeight: 800, color: DS_TEXT.primary }}>{sb.hardMatchScore}/100</Typography>
</Box>
</Box>
@@ -214,20 +214,20 @@ function SignalScoreDerivation({ match, signal }: SignalScoreDerivationProps) {
{isVerifiedContract ? (
<>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 0.75 }}>
<ShieldCheck size={13} color="#1a7a4a" style={{ flexShrink: 0 }} />
<Typography variant="caption" sx={{ color: '#1a7a4a', lineHeight: 1.3 }}>
<ShieldCheck size={13} color={DS_TEXT.success} style={{ flexShrink: 0 }} />
<Typography variant="caption" sx={{ color: DS_TEXT.success, lineHeight: 1.3 }}>
Vertragsende aus ERP verifiziert — keine Schätzung
</Typography>
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1 }}>
<ShieldCheck size={13} color="#1a7a4a" style={{ flexShrink: 0 }} />
<Typography variant="caption" sx={{ color: '#1a7a4a', lineHeight: 1.3 }}>
<ShieldCheck size={13} color={DS_TEXT.success} style={{ flexShrink: 0 }} />
<Typography variant="caption" sx={{ color: DS_TEXT.success, lineHeight: 1.3 }}>
Verwaltung hat Freigabe erteilt
</Typography>
</Box>
<Box sx={{ display: 'flex', justifyContent: 'space-between', bgcolor: '#f0fdf4', px: 1.25, py: 0.75, borderRadius: 1, border: '1px solid #bbf7d0' }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#1a7a4a' }}>Signal-Abschlag</Typography>
<Typography variant="caption" sx={{ fontWeight: 800, color: '#1a7a4a' }}>keiner</Typography>
<Box sx={{ display: 'flex', justifyContent: 'space-between', bgcolor: DS_SURFACE.success.bg, px: 1.25, py: 0.75, borderRadius: 1, border: `1px solid ${DS_SURFACE.success.border}` }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.success }}>Signal-Abschlag</Typography>
<Typography variant="caption" sx={{ fontWeight: 800, color: DS_TEXT.success }}>keiner</Typography>
</Box>
</>
) : (
@@ -235,18 +235,18 @@ function SignalScoreDerivation({ match, signal }: SignalScoreDerivationProps) {
{probPct !== null && (
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 0.5 }}>
<Typography variant="caption" color="text.secondary">Eintretenswahrscheinlichkeit: {probPct}%</Typography>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#c0392b' }}>–{Math.round(signalDeduction * 0.7)} Pkt.</Typography>
<Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.error }}>–{Math.round(signalDeduction * 0.7)} Pkt.</Typography>
</Box>
)}
{credLabel && (
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 1 }}>
<Typography variant="caption" color="text.secondary">Quellenqualität: {credLabel}</Typography>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#d97706' }}>–{Math.round(signalDeduction * 0.3)} Pkt.</Typography>
<Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.warning }}>–{Math.round(signalDeduction * 0.3)} Pkt.</Typography>
</Box>
)}
<Box sx={{ display: 'flex', justifyContent: 'space-between', bgcolor: '#fff7ed', px: 1.25, py: 0.75, borderRadius: 1, border: '1px solid #fed7aa' }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#d97706' }}>Signal-Abschlag</Typography>
<Typography variant="caption" sx={{ fontWeight: 800, color: '#d97706' }}>–{signalDeduction} Punkte</Typography>
<Box sx={{ display: 'flex', justifyContent: 'space-between', bgcolor: DS_SURFACE.orange.bg, px: 1.25, py: 0.75, borderRadius: 1, border: `1px solid ${DS_SURFACE.orange.border}` }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.warning }}>Signal-Abschlag</Typography>
<Typography variant="caption" sx={{ fontWeight: 800, color: DS_TEXT.warning }}>–{signalDeduction} Punkte</Typography>
</Box>
</>
)}
@@ -255,7 +255,7 @@ function SignalScoreDerivation({ match, signal }: SignalScoreDerivationProps) {
<Divider sx={{ mb: 1.5 }} />
{/* Gesamt */}
<Box sx={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', bgcolor: '#f8fafc', p: 1.5, borderRadius: 1 }}>
<Box sx={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', bgcolor: DS_SURFACE.neutral.bg, p: 1.5, borderRadius: 1 }}>
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>Gesamt-Score</Typography>
<Typography
variant="h4"
src/components/pipeline/PipelineDetailPanel.tsx
+30 -29
View File
@@ -11,6 +11,7 @@ import { useMoveStage, useUpdateNotes, useLoseItem } from '../../hooks/usePipeli
import type { PipelineItem } from '../../domain/pipeline'
import { STAGES, NEXT_STAGE, MOCK_DOCS } from './pipelineConstants'
import { scoreColor, detailPath, getKiInsight } from './pipelineUtils'
import { DS_TEXT, DS_SURFACE, DS_BORDER, DS_PRE_MARKET, DS_COLORS } from '../../lib/ds'
// ── DetailPanel ───────────────────────────────────────────────────────────────
@@ -33,10 +34,10 @@ export function DetailPanel({ item, onClose }: { item: PipelineItem; onClose: ()
<Box sx={{
width: { xs: '100%', md: 340 }, flexShrink: 0,
display: 'flex', flexDirection: 'column',
bgcolor: 'white', borderLeft: '1px solid #e2e8f0', overflow: 'hidden',
bgcolor: 'white', borderLeft: `1px solid ${DS_BORDER.default}`, overflow: 'hidden',
}}>
{/* Header */}
<Box sx={{ px: 2, py: 2, borderBottom: '1px solid #e2e8f0' }}>
<Box sx={{ px: 2, py: 2, borderBottom: `1px solid ${DS_BORDER.default}` }}>
<Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1 }}>
<Box sx={{ flex: 1, minWidth: 0 }}>
<Typography variant="body1" sx={{ fontWeight: 700, lineHeight: 1.3, mb: 0.25 }}>{item.title}</Typography>
@@ -48,12 +49,12 @@ export function DetailPanel({ item, onClose }: { item: PipelineItem; onClose: ()
</Typography>
{path && (
<Tooltip title="Vollständige Detailansicht öffnen">
<IconButton size="small" onClick={() => navigate(path)} sx={{ color: '#64748b', '&:hover': { color: '#1e3a5f' } }}>
<IconButton size="small" onClick={() => navigate(path)} sx={{ color: DS_TEXT.muted, '&:hover': { color: DS_TEXT.brand } }}>
<ExternalLink size={15} />
</IconButton>
</Tooltip>
)}
<IconButton size="small" onClick={onClose} sx={{ color: '#94a3b8' }}>
<IconButton size="small" onClick={onClose} sx={{ color: DS_TEXT.disabled }}>
<X size={16} />
</IconButton>
</Box>
@@ -61,7 +62,7 @@ export function DetailPanel({ item, onClose }: { item: PipelineItem; onClose: ()
<Box sx={{ mt: 2 }}>
<Box sx={{ display: 'flex', gap: 0.25, mb: 1 }}>
{STAGES.slice(0, 5).map((s, idx) => (
<Box key={s.key} sx={{ flex: 1, height: 4, borderRadius: 2, bgcolor: idx <= progressIdx ? stageConfig.color : '#e2e8f0' }} />
<Box key={s.key} sx={{ flex: 1, height: 4, borderRadius: 2, bgcolor: idx <= progressIdx ? stageConfig.color : DS_BORDER.default }} />
))}
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
@@ -74,10 +75,10 @@ export function DetailPanel({ item, onClose }: { item: PipelineItem; onClose: ()
onClick={() => navigate(`/demand/anfragen?inquiry=${item.inquiryId}`)}
sx={{
height: 22, fontSize: '0.75rem', cursor: 'pointer',
bgcolor: '#eff6ff', color: '#1e3a5f', fontWeight: 600,
border: '1px solid #bfdbfe',
'& .MuiChip-icon': { color: '#1e3a5f' },
'&:hover': { bgcolor: '#dbeafe' },
bgcolor: DS_SURFACE.blue.bg, color: DS_TEXT.brand, fontWeight: 600,
border: `1px solid ${DS_SURFACE.blue.border}`,
'& .MuiChip-icon': { color: DS_TEXT.brand },
'&:hover': { bgcolor: DS_COLORS.futureCard.signal.badgeBg },
}}
/>
)}
@@ -87,7 +88,7 @@ export function DetailPanel({ item, onClose }: { item: PipelineItem; onClose: ()
{/* Property / unit address */}
{item.propertyAddress && (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mt: 1.25 }}>
<MapPin size={12} color="#64748b" />
<MapPin size={12} color={DS_TEXT.muted} />
<Typography variant="caption" color="text.secondary">{item.propertyAddress}</Typography>
</Box>
)}
@@ -97,24 +98,24 @@ export function DetailPanel({ item, onClose }: { item: PipelineItem; onClose: ()
{/* KI */}
<Box sx={{ px: 2, pt: 2, pb: 1.5 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1 }}>
<Sparkles size={13} color="#7c3aed" />
<Typography variant="caption" sx={{ fontWeight: 700, color: '#7c3aed', textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.7rem' }}>
<Sparkles size={13} color={DS_PRE_MARKET.accent} />
<Typography variant="caption" sx={{ fontWeight: 700, color: DS_PRE_MARKET.accent, textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.7rem' }}>
KI Einschätzung
</Typography>
</Box>
<Box sx={{ bgcolor: '#faf5ff', border: '1px solid #ddd6fe', borderRadius: 2, p: 1.5, mb: 1 }}>
<Typography variant="caption" sx={{ color: '#4c1d95', lineHeight: 1.6 }}>{ki.summary}</Typography>
<Box sx={{ bgcolor: DS_SURFACE.purple.bg, border: `1px solid ${DS_PRE_MARKET.border}`, borderRadius: 2, p: 1.5, mb: 1 }}>
<Typography variant="caption" sx={{ color: DS_TEXT.signalDark, lineHeight: 1.6 }}>{ki.summary}</Typography>
</Box>
{ki.positives.map((p, i) => (
<Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75, mb: 0.375 }}>
<CheckCircle size={12} color="#1a7a4a" style={{ marginTop: 2, flexShrink: 0 }} />
<Typography variant="caption" sx={{ color: '#166534', lineHeight: 1.4 }}>{p}</Typography>
<CheckCircle size={12} color={DS_TEXT.success} style={{ marginTop: 2, flexShrink: 0 }} />
<Typography variant="caption" sx={{ color: DS_TEXT.successDark, lineHeight: 1.4 }}>{p}</Typography>
</Box>
))}
{ki.risks.map((r, i) => (
<Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75, mb: 0.375 }}>
<AlertTriangle size={12} color="#d97706" style={{ marginTop: 2, flexShrink: 0 }} />
<Typography variant="caption" sx={{ color: '#92400e', lineHeight: 1.4 }}>{r}</Typography>
<AlertTriangle size={12} color={DS_TEXT.warning} style={{ marginTop: 2, flexShrink: 0 }} />
<Typography variant="caption" sx={{ color: DS_TEXT.warningDark, lineHeight: 1.4 }}>{r}</Typography>
</Box>
))}
</Box>
@@ -124,7 +125,7 @@ export function DetailPanel({ item, onClose }: { item: PipelineItem; onClose: ()
{/* Stage actions */}
{!isClosed && (
<Box sx={{ px: 2, py: 1.5 }}>
<Typography variant="caption" sx={{ fontWeight: 700, color: '#475569', textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.7rem', display: 'block', mb: 1 }}>
<Typography variant="caption" sx={{ fontWeight: 700, color: DS_TEXT.secondary, textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.7rem', display: 'block', mb: 1 }}>
Nächste Aktion
</Typography>
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
@@ -137,7 +138,7 @@ export function DetailPanel({ item, onClose }: { item: PipelineItem; onClose: ()
</Button>
)}
<Button size="small" variant="outlined" onClick={() => loseItem(item.id)}
sx={{ color: '#c0392b', borderColor: '#c0392b', fontSize: '0.75rem', py: 0.5 }}>
sx={{ color: DS_TEXT.error, borderColor: DS_TEXT.error, fontSize: '0.75rem', py: 0.5 }}>
Ablehnen
</Button>
</Box>
@@ -149,8 +150,8 @@ export function DetailPanel({ item, onClose }: { item: PipelineItem; onClose: ()
{/* Notes */}
<Box sx={{ px: 2, py: 1.5 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1 }}>
<StickyNote size={13} color="#475569" />
<Typography variant="caption" sx={{ fontWeight: 700, color: '#475569', textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.7rem' }}>
<StickyNote size={13} color={DS_TEXT.secondary} />
<Typography variant="caption" sx={{ fontWeight: 700, color: DS_TEXT.secondary, textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.7rem' }}>
Notizen
</Typography>
</Box>
@@ -169,8 +170,8 @@ export function DetailPanel({ item, onClose }: { item: PipelineItem; onClose: ()
{/* Documents */}
<Box sx={{ px: 2, py: 1.5 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1 }}>
<FileText size={13} color="#475569" />
<Typography variant="caption" sx={{ fontWeight: 700, color: '#475569', textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.7rem' }}>
<FileText size={13} color={DS_TEXT.secondary} />
<Typography variant="caption" sx={{ fontWeight: 700, color: DS_TEXT.secondary, textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.7rem' }}>
Dokumente
</Typography>
</Box>
@@ -181,18 +182,18 @@ export function DetailPanel({ item, onClose }: { item: PipelineItem; onClose: ()
{docs.map((doc, i) => (
<Box key={i} sx={{
display: 'flex', alignItems: 'center', gap: 1,
px: 1.5, py: 0.75, bgcolor: '#f8fafc',
borderRadius: 1.5, border: '1px solid #e2e8f0',
px: 1.5, py: 0.75, bgcolor: DS_SURFACE.neutral.bg,
borderRadius: 1.5, border: `1px solid ${DS_BORDER.default}`,
cursor: 'pointer', '&:hover': { bgcolor: '#f1f5f9' },
}}>
<FileText size={13} color="#475569" />
<Typography variant="caption" sx={{ flex: 1, color: '#1e293b' }} noWrap>{doc.name}</Typography>
<FileText size={13} color={DS_TEXT.secondary} />
<Typography variant="caption" sx={{ flex: 1, color: DS_TEXT.primary }} noWrap>{doc.name}</Typography>
<Typography variant="caption" color="text.secondary" sx={{ flexShrink: 0 }}>{doc.date}</Typography>
</Box>
))}
</Box>
)}
<Button size="small" variant="text" sx={{ mt: 0.75, color: '#1e3a5f', fontSize: '0.75rem', p: 0 }}>
<Button size="small" variant="text" sx={{ mt: 0.75, color: DS_TEXT.brand, fontSize: '0.75rem', p: 0 }}>
+ Dokument hochladen
</Button>
</Box>
src/components/shared/GenericBadge.tsx
+17 -2
View File
@@ -1,9 +1,21 @@
import { Chip, Tooltip } from '@mui/material'
import type { ReactElement } from 'react'
import { BADGE_COLORS } from '../../lib/ds'
export type BadgeSemanticVariant = keyof typeof BADGE_COLORS
export interface GenericBadgeProps {
label: string
color: string
/**
* Semantic variant key from BADGE_COLORS (preferred).
* Example: semanticVariant="confidenceHigh" instead of color="#1a7a4a"
*/
semanticVariant?: BadgeSemanticVariant
/**
* Raw hex color — use only when no semantic variant fits.
* Prefer semanticVariant to avoid hardcoded colors.
*/
color?: string
/** transparent: semi-opaque bg (color + 18% opacity) | solid: filled bg, white text */
variant?: 'transparent' | 'solid'
/** Adds a 1px border at color 25% opacity (transparent variant only) */
@@ -20,7 +32,8 @@ export interface GenericBadgeProps {
export function GenericBadge({
label,
color,
semanticVariant,
color: colorProp,
variant = 'transparent',
showBorder = false,
bold = false,
@@ -29,6 +42,8 @@ export function GenericBadge({
tooltip,
ariaLabel,
}: GenericBadgeProps) {
const color = semanticVariant ? BADGE_COLORS[semanticVariant] : (colorProp ?? '#64748b')
const chip = (
<Chip
size={size}
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>
)}
src/lib/ds.ts
+101
View File
@@ -67,6 +67,107 @@ export const DS_COLORS = {
},
} as const
// ── Text color tokens ─────────────────────────────────────────────────────────
// For sx={{ color: DS_TEXT.secondary }} instead of hardcoded '#475569'
export const DS_TEXT = {
primary: '#1e293b',
secondary: '#475569',
muted: '#64748b',
disabled: '#94a3b8',
inverted: '#ffffff',
success: '#1a7a4a',
warning: '#d97706',
error: '#c0392b',
danger: '#dc2626',
info: '#0369a1',
brand: '#1e3a5f',
signal: '#6d28d9',
// Dark variants — use for text on light-tinted surface boxes
successDark: '#166534',
warningDark: '#92400e',
signalDark: '#4c1d95',
infoDark: '#0c4a6e',
} as const
// ── Background tokens ─────────────────────────────────────────────────────────
export const DS_BG = {
page: '#f8fafc',
surface: '#ffffff',
subtle: '#f1f5f9',
muted: '#e2e8f0',
} as const
// ── Border tokens ─────────────────────────────────────────────────────────────
export const DS_BORDER = {
default: '#e2e8f0',
muted: '#f1f5f9',
strong: '#cbd5e1',
} as const
// ── Surface tokens — bg + border pairs for highlighted/tinted boxes ───────────
// Use as: sx={{ bgcolor: DS_SURFACE.success.bg, border: `1px solid ${DS_SURFACE.success.border}` }}
export const DS_SURFACE = {
success: { bg: '#f0fdf4', border: '#bbf7d0' }, // green tint
warning: { bg: '#fffbeb', border: '#fde68a' }, // amber tint
error: { bg: '#fef2f2', border: '#fecaca' }, // red tint
info: { bg: '#f0f9ff', border: '#bae6fd' }, // sky tint
indigo: { bg: '#eef2ff', border: '#e0e7ff' }, // indigo tint (hard-criteria rows)
purple: { bg: '#faf5ff', border: '#e9d5ff' }, // purple tint (pre-market / future)
orange: { bg: '#fff7ed', border: '#fed7aa' }, // orange tint (HOT heat badge bg)
blue: { bg: '#eff6ff', border: '#bfdbfe' }, // blue tint (market signal)
neutral: { bg: '#f8fafc', border: '#e2e8f0' }, // neutral/slate tint (formula rows)
slate: { bg: '#f1f5f9', border: '#e2e8f0' }, // slightly darker neutral
} as const
// ── Match tier surface — bg tint keyed by score tier ─────────────────────────
// Use with SCORE_STRONG / SCORE_MODERATE thresholds from constants.ts
export const DS_MATCH_TIER = {
strong: DS_SURFACE.success,
moderate: DS_SURFACE.warning,
weak: DS_SURFACE.error,
} as const
// ── Pre-market & market signal shorthand aliases ──────────────────────────────
// DS_COLORS.futureCard.controlled / signal are the full token sets.
// These aliases make imports more readable in supply-side components.
export const DS_PRE_MARKET = DS_COLORS.futureCard.controlled
export const DS_MARKET_SIGNAL = DS_COLORS.futureCard.signal
// ── Badge color presets ───────────────────────────────────────────────────────
// Pass to GenericBadge.color instead of raw hex strings.
// BADGE_COLORS.confidenceHigh replaces '#1a7a4a' at call sites.
export const BADGE_COLORS = {
confidenceHigh: '#1a7a4a',
confidenceMedium: '#d97706',
confidenceLow: '#c0392b',
riskHigh: '#c0392b',
riskMedium: '#d97706',
riskLow: '#1a7a4a',
preMarket: '#7c3aed',
marketSignal: '#1d4ed8',
verified: '#1e3a5f',
info: '#0369a1',
muted: '#64748b',
gold: '#d97706',
silver: '#64748b',
bronze: '#b45309',
} as const
// ── Shadow tokens ─────────────────────────────────────────────────────────────
export const DS_SHADOW = {
card: '0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.04)',
panel: '0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.04)',
dialog: '0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.06)',
} as const
// ── Inquiry status metadata ───────────────────────────────────────────────────
export const INQUIRY_STATUS_META: Record<string, { label: string; fg: string; bg: string }> = {