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

feat: Marktsignale KPI panel with adjustable radius (5/10/15/20 km)

Browse Source 
Adds MarketKpis domain type with formula-based radius scaling, a MarketKpiPanel
component (vacancy rate, platform searches, avg vacancy duration, demand/supply
ratio — color-coded with interpretation badges), and integrates it at the top of
PropertyMarketSignalsTab. Demand/supply section labels now update with the
selected radius. Mock data covers all 5 existing market reports.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
2026-05-24 22:28:04 +02:00
parent 61a26d00a7
commit a9e038a64f
4 changed files with 307 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/supply/PropertyMarketSignalsTab.tsx
+45 -22
View File
@@ -5,21 +5,33 @@ import { useMarketReport } from '../../hooks/useMarketReport'
import type { SignalCategory } from '../../domain/marketReport'
import { SignalCard } from './SignalCard'
import { BerichtDialog } from './BerichtDialog'
import { MarketKpiPanel } from './MarketKpiPanel'
interface Props {
propertyId: string
}
const SECTION_CONFIG: { category: SignalCategory; label: string; icon: React.ReactNode; color: string }[] = [
const STATIC_SECTIONS: { category: SignalCategory; label: string; icon: React.ReactNode; color: string }[] = [
{ category: 'development', label: 'Entwicklungsnews', icon: <Building2 size={16} />, color: '#1e3a5f' },
{ category: 'demand', label: 'Nachfrage 5 km', icon: <TrendingUp size={16} />, color: '#1a7a4a' },
{ category: 'supply', label: 'Angebot 5 km', icon: <BarChart2 size={16} />, color: '#b45309' },
{ category: 'negotiation', label: 'Verhandlungshinweise', icon: <Lightbulb size={16} />, color: '#7c3aed' },
]
export function PropertyMarketSignalsTab({ propertyId }: Props) {
const { data: report = null, isLoading: loading } = useMarketReport(propertyId)
const [dialogOpen, setDialogOpen] = useState(false)
const [radius, setRadius] = useState(5)
const dynamicSections: { category: SignalCategory; label: string; icon: React.ReactNode; color: string }[] = [
{ category: 'demand', label: `Nachfrage ${radius} km`, icon: <TrendingUp size={16} />, color: '#1a7a4a' },
{ category: 'supply', label: `Angebot ${radius} km`, icon: <BarChart2 size={16} />, color: '#b45309' },
]
const sectionConfig = [
STATIC_SECTIONS[0],
dynamicSections[0],
dynamicSections[1],
STATIC_SECTIONS[1],
]
if (loading) {
return (
@@ -58,26 +70,37 @@ export function PropertyMarketSignalsTab({ propertyId }: Props) {
Für dieses Objekt liegen noch keine KI-generierten Marktsignale vor.
</Alert>
) : (
SECTION_CONFIG.map(({ category, label, icon, color }) => {
const signals = report.signals.filter(s => s.category === category)
if (signals.length === 0) return null
return (
<Box key={category} sx={{ mb: 3 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1.25 }}>
<Box sx={{ color }}>{icon}</Box>
<Typography variant="body2" sx={{ fontWeight: 700, color }}>
{label}
</Typography>
<Chip
label={signals.length}
size="small"
sx={{ height: 18, fontSize: '0.65rem', bgcolor: '#f1f5f9', color: '#64748b' }}
/>
<>
{report.kpis && (
<MarketKpiPanel
baseKpis={report.kpis}
assetTypeLabel={report.assetTypeLabel}
radius={radius}
onRadiusChange={setRadius}
/>
)}
{sectionConfig.map(({ category, label, icon, color }) => {
const signals = report.signals.filter(s => s.category === category)
if (signals.length === 0) return null
return (
<Box key={category} sx={{ mb: 3 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1.25 }}>
<Box sx={{ color }}>{icon}</Box>
<Typography variant="body2" sx={{ fontWeight: 700, color }}>
{label}
</Typography>
<Chip
label={signals.length}
size="small"
sx={{ height: 18, fontSize: '0.65rem', bgcolor: '#f1f5f9', color: '#64748b' }}
/>
</Box>
{signals.map(s => <SignalCard key={s.id} signal={s} />)}
</Box>
{signals.map(s => <SignalCard key={s.id} signal={s} />)}
</Box>
)
})
)
})}
</>
)}
{dialogOpen && (