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

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

Browse Source 
- 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>
This commit is contained in:
Benjamin Sutter
2026-05-24 01:16:32 +02:00
parent c6055f0611
commit 01c0f8b06f
8 changed files with 158 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/match-card/FutureAvailabilityCard.tsx
+3 -69
View File
@@ -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 }) {
src/components/match-card/SignalQualityDots.tsx
+20
View File
@@ -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
+38
View File
@@ -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
+1 -38
View File
@@ -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'
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
}
}
import { CREDIBILITY_META, SENSITIVITY_META, RISK_META, ageLabel, domainLabel } from './futureAvailabilityContextUtils'
interface Props {
match: Match
src/components/match-detail/KpiTile.tsx
+38
View File
@@ -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
+2 -59
View File
@@ -8,65 +8,8 @@ import { useProperties } from '../../hooks/useProperties'
import { getCityIntelligence } from '../../lib/locationIntelligence'
import type { Property } from '../../domain/property'
import { SoftFactorBar } from './SoftFactorBar'
// ── Sub-components ────────────────────────────────────────────────────────────
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' },
],
}
import { KpiTile } from './KpiTile'
import { NEW_PROJECTS } from './locationIntelligenceConstants'
// ── Main component ────────────────────────────────────────────────────────────
src/components/match-detail/futureAvailabilityContextUtils.ts
+37
View File
@@ -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
+19
View File
@@ -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' },
],
}