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>
2026-05-24 01:16:32 +02:00
parent c6055f0611
commit 01c0f8b06f
8 changed files with 158 additions and 166 deletions
@@ -1,77 +1,11 @@
 import { Box, Button, Divider, Typography } from '@mui/material'
-import {
-  AlertCircle,
-  BarChart2,
-  Briefcase,
-  CheckCircle2,
-  FileCheck,
-  FileText,
-  Newspaper,
-  ShieldCheck,
-  User,
-} from 'lucide-react'
+import { AlertCircle, CheckCircle2, ShieldCheck } 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 }) {
@@ -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>
+  )
+}
@@ -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`
+  }
+}