refactor: extract helpers from 3 match-detail/match-card components

- LocationIntelligencePanel (333→275): KpiTile + NEW_PROJECTS → own files
- FutureAvailabilityContextPanel (351→315): constants + utils → own files
- FutureAvailabilityCard (310→244): helpers + SignalQualityDots → own files

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/match-card/FutureAvailabilityCard.tsx

@@ -1,77 +1,11 @@
 import { Box, Button, Divider, Typography } from '@mui/material'
-import {
+import { AlertCircle, CheckCircle2, ShieldCheck } from 'lucide-react'
-  AlertCircle,
-  BarChart2,
-  Briefcase,
-  CheckCircle2,
-  FileCheck,
-  FileText,
-  Newspaper,
-  ShieldCheck,
-  User,
-} from 'lucide-react'
 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 type { MatchCardViewModel } from './MatchCardViewModel'
 
-function floorLabel(level: number): string {
-  if (level === 0) return 'EG'
-  if (level < 0) return `UG ${Math.abs(level)}`
-  return `${level}.OG`
-}
-
-const SOURCE_META: Record<string, { label: string; icon: React.ReactNode }> = {
-  JOB_POSTING:        { label: 'Stelleninserate',    icon: <Briefcase size={11} /> },
-  PRESS:              { label: 'Pressebericht',       icon: <Newspaper size={11} /> },
-  CONSTRUCTION_PERMIT:{ label: 'Baubewilligung',      icon: <FileCheck size={11} /> },
-  COMPANY_REPORT:     { label: 'Geschäftsbericht',    icon: <FileText size={11} /> },
-  MARKET_DATA:        { label: 'Marktdaten',          icon: <BarChart2 size={11} /> },
-  MANUAL:             { label: 'Analyst',             icon: <User size={11} /> },
-  LEASE_CONTRACT:     { label: 'Vertrag verifiziert', icon: <ShieldCheck size={11} /> },
-}
-
-const ASSET_TYPE_LABELS: Record<string, string> = {
-  OFFICE: 'Bürofläche',
-  LOGISTICS: 'Lagerfläche',
-  RETAIL: 'Retailfläche',
-  PRODUCTION: 'Produktionsfläche',
-  MIXED: 'Gewerbefläche',
-}
-
-// Signal type → opportunity headline (with asset type)
-function getOpportunityHeadline(signalType: string | undefined, assetTypeLabel: string): string {
-  switch (signalType) {
-    case 'LEASE_EXPIRY': return `${assetTypeLabel} wird verfügbar`
-    case 'POSSIBLE_MOVE_OUT': return `Mögliche ${assetTypeLabel} erkannt`
-    case 'EXPANSION': return `Unternehmen sucht ${assetTypeLabel}`
-    case 'CONSTRUCTION_PROJECT': return `Neubau: ${assetTypeLabel} in Planung`
-    case 'RESTRUCTURING': return `Mögliche Flächenfreigabe erkannt`
-    case 'SPACE_CONSOLIDATION': return `Mögliche Teilfläche erkannt`
-    case 'PROJECT_DEVELOPMENT': return `Neue Fläche in Projektentwicklung`
-    default: return `Potenzielle ${assetTypeLabel} erkannt`
-  }
-}
-
-// Signal quality dots display
-function SignalQualityDots({ quality }: { quality: 'HIGH' | 'MEDIUM' | 'LOW' | undefined }) {
-  const config = {
-    HIGH:   { dots: [1, 1, 1, 1], color: '#1a7a4a', label: 'Hohe Signalqualität' },
-    MEDIUM: { dots: [1, 1, 1, 0], color: '#d97706', label: 'Mittlere Signalqualität' },
-    LOW:    { dots: [1, 1, 0, 0], color: '#c0392b', label: 'Niedrige Signalqualität' },
-  }
-  const c = quality ? config[quality] : config.LOW
-  return (
-    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-      {c.dots.map((filled, i) => (
-        <Box key={i} sx={{ width: 7, height: 7, borderRadius: '50%', bgcolor: filled ? c.color : '#e2e8f0' }} />
-      ))}
-      <Typography sx={{ fontSize: '0.68rem', color: c.color, fontWeight: 600, ml: 0.25 }}>
-        {c.label}
-      </Typography>
-    </Box>
-  )
-}
-
 // ── Future Availability Card ──────────────────────────────────────────────────
 
 export function FutureAvailabilityCard({ vm }: { vm: MatchCardViewModel }) {

src/components/match-card/SignalQualityDots.tsx

@@ -0,0 +1,20 @@
+import { Box, Typography } from '@mui/material'
+
+export function SignalQualityDots({ quality }: { quality: 'HIGH' | 'MEDIUM' | 'LOW' | undefined }) {
+  const config = {
+    HIGH:   { dots: [1, 1, 1, 1], color: '#1a7a4a', label: 'Hohe Signalqualität' },
+    MEDIUM: { dots: [1, 1, 1, 0], color: '#d97706', label: 'Mittlere Signalqualität' },
+    LOW:    { dots: [1, 1, 0, 0], color: '#c0392b', label: 'Niedrige Signalqualität' },
+  }
+  const c = quality ? config[quality] : config.LOW
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+      {c.dots.map((filled, i) => (
+        <Box key={i} sx={{ width: 7, height: 7, borderRadius: '50%', bgcolor: filled ? c.color : '#e2e8f0' }} />
+      ))}
+      <Typography sx={{ fontSize: '0.68rem', color: c.color, fontWeight: 600, ml: 0.25 }}>
+        {c.label}
+      </Typography>
+    </Box>
+  )
+}

src/components/match-card/futureAvailabilityCardHelpers.tsx

@@ -0,0 +1,38 @@
+import { Briefcase, BarChart2, FileCheck, FileText, User, ShieldCheck, Newspaper } from 'lucide-react'
+
+export function floorLabel(level: number): string {
+  if (level === 0) return 'EG'
+  if (level < 0) return `UG ${Math.abs(level)}`
+  return `${level}.OG`
+}
+
+export const SOURCE_META: Record<string, { label: string; icon: React.ReactNode }> = {
+  JOB_POSTING:        { label: 'Stelleninserate',    icon: <Briefcase size={11} /> },
+  PRESS:              { label: 'Pressebericht',       icon: <Newspaper size={11} /> },
+  CONSTRUCTION_PERMIT:{ label: 'Baubewilligung',      icon: <FileCheck size={11} /> },
+  COMPANY_REPORT:     { label: 'Geschäftsbericht',    icon: <FileText size={11} /> },
+  MARKET_DATA:        { label: 'Marktdaten',          icon: <BarChart2 size={11} /> },
+  MANUAL:             { label: 'Analyst',             icon: <User size={11} /> },
+  LEASE_CONTRACT:     { label: 'Vertrag verifiziert', icon: <ShieldCheck size={11} /> },
+}
+
+export const ASSET_TYPE_LABELS: Record<string, string> = {
+  OFFICE: 'Bürofläche',
+  LOGISTICS: 'Lagerfläche',
+  RETAIL: 'Retailfläche',
+  PRODUCTION: 'Produktionsfläche',
+  MIXED: 'Gewerbefläche',
+}
+
+export function getOpportunityHeadline(signalType: string | undefined, assetTypeLabel: string): string {
+  switch (signalType) {
+    case 'LEASE_EXPIRY': return `${assetTypeLabel} wird verfügbar`
+    case 'POSSIBLE_MOVE_OUT': return `Mögliche ${assetTypeLabel} erkannt`
+    case 'EXPANSION': return `Unternehmen sucht ${assetTypeLabel}`
+    case 'CONSTRUCTION_PROJECT': return `Neubau: ${assetTypeLabel} in Planung`
+    case 'RESTRUCTURING': return `Mögliche Flächenfreigabe erkannt`
+    case 'SPACE_CONSOLIDATION': return `Mögliche Teilfläche erkannt`
+    case 'PROJECT_DEVELOPMENT': return `Neue Fläche in Projektentwicklung`
+    default: return `Potenzielle ${assetTypeLabel} erkannt`
+  }
+}

src/components/match-detail/FutureAvailabilityContextPanel.tsx

@@ -14,44 +14,7 @@ import {
 import type { Match } from '../../domain/match'
 import type { FutureSignal } from '../../domain/futureSignal'
 import { SIGNAL_TYPE_LABELS, SIGNAL_ACTION, SOURCE_META } from './futureAvailabilityConstants'
-
+import { CREDIBILITY_META, SENSITIVITY_META, RISK_META, ageLabel, domainLabel } from './futureAvailabilityContextUtils'
-const CREDIBILITY_META: Record<string, { label: string; color: string }> = {
-  HIGH:   { label: 'Hohe Quellenqualität',    color: '#1a7a4a' },
-  MEDIUM: { label: 'Mittlere Quellenqualität', color: '#d97706' },
-  LOW:    { label: 'Niedrige Quellenqualität', color: '#c0392b' },
-}
-
-const SENSITIVITY_META: Record<string, { label: string; color: 'error' | 'warning' | 'default' }> = {
-  CONFIDENTIAL: { label: 'Vertraulich', color: 'error' },
-  INTERNAL:     { label: 'Intern',      color: 'warning' },
-  PUBLIC:       { label: 'Öffentlich',  color: 'default' },
-}
-
-const RISK_META: Record<string, { label: string; color: string }> = {
-  LOW:      { label: 'Niedrig',   color: '#1a7a4a' },
-  MEDIUM:   { label: 'Mittel',    color: '#d97706' },
-  HIGH:     { label: 'Hoch',      color: '#c0392b' },
-  CRITICAL: { label: 'Kritisch',  color: '#7f1d1d' },
-}
-
-function ageLabel(isoDate: string): string {
-  const diffMs = Date.now() - new Date(isoDate).getTime()
-  const days = Math.floor(diffMs / 86400000)
-  if (days < 1)  return 'Heute erkannt'
-  if (days < 7)  return `Vor ${days} Tag${days === 1 ? '' : 'en'} erkannt`
-  if (days < 30) return `Vor ${Math.floor(days / 7)} Woche${Math.floor(days / 7) === 1 ? '' : 'n'} erkannt`
-  if (days < 365) return `Vor ${Math.floor(days / 30)} Monat${Math.floor(days / 30) === 1 ? '' : 'en'} erkannt`
-  return `Vor ${Math.floor(days / 365)} Jahr${Math.floor(days / 365) === 1 ? '' : 'en'} erkannt`
-}
-
-function domainLabel(url: string): string {
-  try {
-    const u = new URL(url)
-    return u.hostname.replace(/^www\./, '')
-  } catch {
-    return url.length > 60 ? url.slice(0, 57) + '…' : url
-  }
-}
 
 interface Props {
   match: Match

src/components/match-detail/KpiTile.tsx

@@ -0,0 +1,38 @@
+import { Box, Typography } from '@mui/material'
+
+export function KpiTile({
+  label,
+  value,
+  sub,
+  color,
+}: {
+  label: string
+  value: string
+  sub?: string
+  color?: string
+}) {
+  return (
+    <Box
+      sx={{
+        flex: 1,
+        p: 1.5,
+        bgcolor: '#f8fafc',
+        borderRadius: 1.5,
+        border: '1px solid #e2e8f0',
+        minWidth: 100,
+      }}
+    >
+      <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.25 }}>
+        {label}
+      </Typography>
+      <Typography variant="subtitle1" sx={{ fontWeight: 700, color: color ?? '#0f1923', lineHeight: 1.2 }}>
+        {value}
+      </Typography>
+      {sub && (
+        <Typography variant="caption" color="text.secondary">
+          {sub}
+        </Typography>
+      )}
+    </Box>
+  )
+}

src/components/match-detail/LocationIntelligencePanel.tsx

@@ -8,65 +8,8 @@ import { useProperties } from '../../hooks/useProperties'
 import { getCityIntelligence } from '../../lib/locationIntelligence'
 import type { Property } from '../../domain/property'
 import { SoftFactorBar } from './SoftFactorBar'
-
+import { KpiTile } from './KpiTile'
-// ── Sub-components ────────────────────────────────────────────────────────────
+import { NEW_PROJECTS } from './locationIntelligenceConstants'
-
-function KpiTile({
-  label,
-  value,
-  sub,
-  color,
-}: {
-  label: string
-  value: string
-  sub?: string
-  color?: string
-}) {
-  return (
-    <Box
-      sx={{
-        flex: 1,
-        p: 1.5,
-        bgcolor: '#f8fafc',
-        borderRadius: 1.5,
-        border: '1px solid #e2e8f0',
-        minWidth: 100,
-      }}
-    >
-      <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.25 }}>
-        {label}
-      </Typography>
-      <Typography variant="subtitle1" sx={{ fontWeight: 700, color: color ?? '#0f1923', lineHeight: 1.2 }}>
-        {value}
-      </Typography>
-      {sub && (
-        <Typography variant="caption" color="text.secondary">
-          {sub}
-        </Typography>
-      )}
-    </Box>
-  )
-}
-
-const NEW_PROJECTS: Record<string, { title: string; area: string; completion: string; note: string }[]> = {
-  'Zürich': [
-    { title: 'Ensemble Zürich-West', area: '500–2000 m²', completion: 'Q3 2026', note: 'Büroflächen im Neubauprojekt, Kreis 5' },
-    { title: 'The Circle Phase II', area: '1000–5000 m²', completion: 'Q1 2027', note: 'Premium-Büros, Flughafen Zürich' },
-  ],
-  'Basel': [
-    { title: 'Basel SBB Tower', area: '300–1500 m²', completion: 'Q4 2026', note: 'Gemischte Nutzung, zentrale Lage' },
-    { title: 'Erlenmatt Ost', area: '600–2500 m²', completion: 'Q2 2027', note: 'Modernes Stadtentwicklungsareal' },
-  ],
-  'Zug': [
-    { title: 'Zug Innovation Campus', area: '200–1000 m²', completion: 'Q1 2026', note: 'Steuerattraktiv, ÖV-optimal' },
-  ],
-  'Bern': [
-    { title: 'Bern West Business Park', area: '400–3000 m²', completion: 'Q2 2026', note: 'Modernes Gewerbeareal Ausserholligen' },
-  ],
-  'Winterthur': [
-    { title: 'Sulzerareal Phase 4', area: '800–4000 m²', completion: 'Q3 2027', note: 'Industrie-Loft-Flächen im Stadtentwicklungsgebiet' },
-  ],
-}
 
 // ── Main component ────────────────────────────────────────────────────────────
 

src/components/match-detail/futureAvailabilityContextUtils.ts

@@ -0,0 +1,37 @@
+export const CREDIBILITY_META: Record<string, { label: string; color: string }> = {
+  HIGH:   { label: 'Hohe Quellenqualität',    color: '#1a7a4a' },
+  MEDIUM: { label: 'Mittlere Quellenqualität', color: '#d97706' },
+  LOW:    { label: 'Niedrige Quellenqualität', color: '#c0392b' },
+}
+
+export const SENSITIVITY_META: Record<string, { label: string; color: 'error' | 'warning' | 'default' }> = {
+  CONFIDENTIAL: { label: 'Vertraulich', color: 'error' },
+  INTERNAL:     { label: 'Intern',      color: 'warning' },
+  PUBLIC:       { label: 'Öffentlich',  color: 'default' },
+}
+
+export const RISK_META: Record<string, { label: string; color: string }> = {
+  LOW:      { label: 'Niedrig',   color: '#1a7a4a' },
+  MEDIUM:   { label: 'Mittel',    color: '#d97706' },
+  HIGH:     { label: 'Hoch',      color: '#c0392b' },
+  CRITICAL: { label: 'Kritisch',  color: '#7f1d1d' },
+}
+
+export function ageLabel(isoDate: string): string {
+  const diffMs = Date.now() - new Date(isoDate).getTime()
+  const days = Math.floor(diffMs / 86400000)
+  if (days < 1)  return 'Heute erkannt'
+  if (days < 7)  return `Vor ${days} Tag${days === 1 ? '' : 'en'} erkannt`
+  if (days < 30) return `Vor ${Math.floor(days / 7)} Woche${Math.floor(days / 7) === 1 ? '' : 'n'} erkannt`
+  if (days < 365) return `Vor ${Math.floor(days / 30)} Monat${Math.floor(days / 30) === 1 ? '' : 'en'} erkannt`
+  return `Vor ${Math.floor(days / 365)} Jahr${Math.floor(days / 365) === 1 ? '' : 'en'} erkannt`
+}
+
+export function domainLabel(url: string): string {
+  try {
+    const u = new URL(url)
+    return u.hostname.replace(/^www\./, '')
+  } catch {
+    return url.length > 60 ? url.slice(0, 57) + '…' : url
+  }
+}

src/components/match-detail/locationIntelligenceConstants.ts

@@ -0,0 +1,19 @@
+export const NEW_PROJECTS: Record<string, { title: string; area: string; completion: string; note: string }[]> = {
+  'Zürich': [
+    { title: 'Ensemble Zürich-West', area: '500–2000 m²', completion: 'Q3 2026', note: 'Büroflächen im Neubauprojekt, Kreis 5' },
+    { title: 'The Circle Phase II', area: '1000–5000 m²', completion: 'Q1 2027', note: 'Premium-Büros, Flughafen Zürich' },
+  ],
+  'Basel': [
+    { title: 'Basel SBB Tower', area: '300–1500 m²', completion: 'Q4 2026', note: 'Gemischte Nutzung, zentrale Lage' },
+    { title: 'Erlenmatt Ost', area: '600–2500 m²', completion: 'Q2 2027', note: 'Modernes Stadtentwicklungsareal' },
+  ],
+  'Zug': [
+    { title: 'Zug Innovation Campus', area: '200–1000 m²', completion: 'Q1 2026', note: 'Steuerattraktiv, ÖV-optimal' },
+  ],
+  'Bern': [
+    { title: 'Bern West Business Park', area: '400–3000 m²', completion: 'Q2 2026', note: 'Modernes Gewerbeareal Ausserholligen' },
+  ],
+  'Winterthur': [
+    { title: 'Sulzerareal Phase 4', area: '800–4000 m²', completion: 'Q3 2027', note: 'Industrie-Loft-Flächen im Stadtentwicklungsgebiet' },
+  ],
+}