refactor: split large page components + taxonomy/HeatBadge/FutureAvailability improvements

- Taxonomy: merge VERIFIED_PORTFOLIO + EXTERNAL_MARKET display → 'Plattform' (dark blue) across all surfaces - HeatBadge: new flame indicator for hot properties (grid, list, pipeline views) - FutureAvailabilityContextPanel: richer detail page with AI summary, strategic assessment, sources - Refactor Pipeline.tsx (630→152 lines) → pipeline/PipelineCard, PipelineColumn, PipelineDetailPanel, pipelineConstants, pipelineUtils - Refactor IntelligenceMatchCard.tsx (483→179 lines) → FutureAvailabilityCard extracted - Refactor MatchDetail.tsx (559→464 lines) → useMatchDetailData hook, MatchDetailPropertyDetails - Refactor Compare.tsx (638→485 lines) → compareUtils, CompareCriteriaCard extracted Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-23 23:36:03 +02:00
parent 72e4f08900
commit 22c195b4a5
28 changed files with 1615 additions and 1282 deletions
@@ -0,0 +1,68 @@
+import { Box, Chip, Typography } from '@mui/material'
+import { ShieldCheck } from 'lucide-react'
+import type { PropertyUnit } from '../../domain/property'
+
+// ── Property detail helpers ────────────────────────────────────────────────────
+
+export const FLOOR_LABEL = (level: number) =>
+  level === 0 ? 'EG' : level < 0 ? `UG ${Math.abs(level)}` : `${level}.OG`
+
+export const ASSET_LABELS: Record<string, string> = {
+  OFFICE: 'Büro', LOGISTICS: 'Lager / Logistik', RETAIL: 'Retail / Laden',
+  PRODUCTION: 'Produktion', MIXED: 'Gewerbe (gemischt)',
+}
+export const RISK_LABELS: Record<string, string> = { LOW: 'Niedrig', MEDIUM: 'Mittel', HIGH: 'Hoch' }
+export const SOURCE_LABELS: Record<string, string> = {
+  ERP_IMPORT: 'ERP-Import (intern)', IMMOSCOUT_SCRAPE: 'ImmoScout24',
+  HOMEGATE_SCRAPE: 'Homegate', MATCHOFFICE_SCRAPE: 'MatchOffice',
+  NEWHOME_SCRAPE: 'newhome.ch', AI_SIGNAL: 'KI-Signal', MANUAL: 'Manuell erfasst',
+}
+export const PASSERBY_LABELS: Record<string, string> = {
+  LOW: 'Gering', MEDIUM: 'Mittel', HIGH: 'Hoch', VERY_HIGH: 'Sehr hoch',
+}
+
+export function KeyFactRow({ label, value }: { label: string; value?: string | null }) {
+  if (!value) return null
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', py: 0.875, borderBottom: '1px solid #f1f5f9', '&:last-of-type': { borderBottom: 0 } }}>
+      <Typography variant="body2" color="text.secondary" sx={{ flexShrink: 0, mr: 2 }}>{label}</Typography>
+      <Typography variant="body2" sx={{ fontWeight: 600, textAlign: 'right' }}>{value}</Typography>
+    </Box>
+  )
+}
+
+export function UnitStatusChip({ unit }: { unit: PropertyUnit }) {
+  if (unit.schattenmarktRelease?.enabled) {
+    return <Chip size="small" icon={<ShieldCheck size={11} />} label="PRE-MARKET" sx={{ bgcolor: '#f0fdf4', color: '#1a7a4a', border: '1px solid #86efac', fontWeight: 700, fontSize: '0.68rem', height: 20 }} />
+  }
+  if (unit.available) {
+    return <Chip size="small" label="Verfügbar" sx={{ bgcolor: '#eff6ff', color: '#1d4ed8', fontWeight: 600, fontSize: '0.68rem', height: 20 }} />
+  }
+  return <Chip size="small" label="Belegt" sx={{ bgcolor: '#f8fafc', color: '#64748b', fontWeight: 500, fontSize: '0.68rem', height: 20 }} />
+}
+
+export function UnitRow({ unit, highlighted }: { unit: PropertyUnit; highlighted: boolean }) {
+  const availableFrom = unit.schattenmarktRelease?.availableFrom ?? unit.leaseEndDate
+  const monthlyRent = unit.rentPricePerSqm ? Math.round(unit.rentPricePerSqm / 12) : undefined
+  return (
+    <Box sx={{
+      display: 'grid', gridTemplateColumns: '1fr 80px 110px 120px auto',
+      gap: 1.5, alignItems: 'center', px: 2, py: 1.5, borderRadius: 1, mb: 1,
+      bgcolor: highlighted ? '#faf5ff' : '#f8fafc',
+      border: highlighted ? '1px solid #e9d5ff' : '1px solid #e2e8f0',
+    }}>
+      <Box>
+        <Typography variant="body2" sx={{ fontWeight: 600 }}>
+          {FLOOR_LABEL(unit.floorLevel)}{unit.unitLabel ? ` · ${unit.unitLabel}` : ''}
+        </Typography>
+        {unit.currentTenant && <Typography variant="caption" color="text.secondary">{unit.currentTenant}</Typography>}
+      </Box>
+      <Typography variant="body2" sx={{ fontWeight: 600 }}>{unit.areaSqm.toLocaleString('de-CH')} m²</Typography>
+      <Typography variant="body2" color="text.secondary">{monthlyRent ? `CHF ${monthlyRent}/m²/Mt.` : '–'}</Typography>
+      <Typography variant="body2" color="text.secondary">
+        {availableFrom ? new Date(availableFrom).toLocaleDateString('de-CH', { month: 'long', year: 'numeric' }) : '–'}
+      </Typography>
+      <UnitStatusChip unit={unit} />
+    </Box>
+  )
+}