feat: Verwaltungszugang refactor — lease data, 3-tab detail, market signals
- Dashboard: remove QuickActionPanel, StrongMatchOverview, FutureSignalWidget,
DataQualityWidget, header buttons, Marktchancen nav; KpiGrid → 4 cards
- Property domain: 9 new fields (leaseTerm, leaseStartDate/End, breakoutOption,
currentTenant, importedFrom, importedAt, lastUpdatedAt)
- Mock data: annual CHF/m²/Jahr prices (×12), Swiss images, tenant/lease data
for all 10 VERIFIED_PORTFOLIO properties; need budgets updated to annual
- PropertyTable: swap columns — add Aktueller Mieter, Mietlaufzeit,
Breakoutoption, Breakoutoption Zeitpunkt; remove Verfügbarkeit, Konfidenz, Quelle
- PropertyDetailView: 3 tabs (Übersicht, Matchability, Marktsignale) with
inline edit mode, NeedMatchCard list, PropertyMarketSignalsTab
- New: marketReport domain + mock data + service, NeedMatchCard,
PropertyMarketSignalsTab with 4 sections + PDF button
- matchService: getNeedMatchesForProperty(propertyId, {minScore})
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,171 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Alert, Box, Button, Chip, CircularProgress, LinearProgress, Typography } from '@mui/material'
|
||||
import { BarChart2, Building2, FileText, Lightbulb, TrendingUp } from 'lucide-react'
|
||||
import { marketReportService } from '../../services/marketReportService'
|
||||
import { useToastStore } from '../../stores/toastStore'
|
||||
import type { MarketReport, PropertyMarketSignal, SignalCategory } from '../../domain/marketReport'
|
||||
|
||||
interface Props {
|
||||
propertyId: string
|
||||
}
|
||||
|
||||
const SECTION_CONFIG: { 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' },
|
||||
]
|
||||
|
||||
function SignalCard({ signal }: { signal: PropertyMarketSignal }) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
p: 1.75,
|
||||
mb: 1.25,
|
||||
borderRadius: 1.5,
|
||||
border: '1px solid #e2e8f0',
|
||||
bgcolor: 'white',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1, mb: 0.75 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: '#0f172a', lineHeight: 1.35 }}>
|
||||
{signal.title}
|
||||
</Typography>
|
||||
{signal.confidence != null && (
|
||||
<Chip
|
||||
label={`${Math.round(signal.confidence * 100)}%`}
|
||||
size="small"
|
||||
sx={{ fontSize: '0.62rem', height: 18, flexShrink: 0, bgcolor: '#f0f9ff', color: '#0369a1', border: '1px solid #bae6fd' }}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Typography variant="caption" sx={{ color: '#374151', lineHeight: 1.5, display: 'block', mb: signal.source || signal.confidence ? 1 : 0 }}>
|
||||
{signal.body}
|
||||
</Typography>
|
||||
|
||||
{signal.confidence != null && (
|
||||
<Box sx={{ mb: 0.75 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.25 }}>
|
||||
<Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.62rem' }}>KI-Konfidenz</Typography>
|
||||
<Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.62rem' }}>{Math.round(signal.confidence * 100)}%</Typography>
|
||||
</Box>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={signal.confidence * 100}
|
||||
sx={{
|
||||
height: 3,
|
||||
borderRadius: 2,
|
||||
bgcolor: '#e2e8f0',
|
||||
'& .MuiLinearProgress-bar': { bgcolor: signal.confidence >= 0.8 ? '#1a7a4a' : signal.confidence >= 0.6 ? '#d97706' : '#64748b' },
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
{signal.date && (
|
||||
<Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.62rem' }}>
|
||||
{new Date(signal.date).toLocaleDateString('de-CH')}
|
||||
</Typography>
|
||||
)}
|
||||
{signal.source && (
|
||||
<Box
|
||||
component={signal.sourceUrl ? 'a' : 'span'}
|
||||
href={signal.sourceUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
sx={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 0.375,
|
||||
fontSize: '0.62rem',
|
||||
color: signal.sourceUrl ? '#1e3a5f' : '#94a3b8',
|
||||
textDecoration: 'none',
|
||||
'&:hover': signal.sourceUrl ? { textDecoration: 'underline' } : {},
|
||||
}}
|
||||
>
|
||||
<FileText size={10} />
|
||||
{signal.source}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export function PropertyMarketSignalsTab({ propertyId }: Props) {
|
||||
const [report, setReport] = useState<MarketReport | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const showToast = useToastStore(s => s.showToast)
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
setLoading(true)
|
||||
marketReportService.getByProperty(propertyId).then(r => {
|
||||
if (!cancelled) { setReport(r); setLoading(false) }
|
||||
})
|
||||
return () => { cancelled = true }
|
||||
}, [propertyId])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Box sx={{ p: 3, display: 'flex', justifyContent: 'center' }}>
|
||||
<CircularProgress size={24} />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ p: 2.5 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2.5 }}>
|
||||
<Box>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 700, color: '#0f172a' }}>
|
||||
Marktsignale & Standortintelligenz
|
||||
</Typography>
|
||||
{report?.generatedAt && (
|
||||
<Typography variant="caption" sx={{ color: '#94a3b8' }}>
|
||||
Generiert {new Date(report.generatedAt).toLocaleDateString('de-CH')}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="small"
|
||||
startIcon={<FileText size={14} />}
|
||||
onClick={() => showToast('PDF-Bericht wird generiert…', 'info')}
|
||||
sx={{ textTransform: 'none', fontSize: '0.8125rem' }}
|
||||
>
|
||||
Bericht erstellen
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{!report ? (
|
||||
<Alert severity="info" sx={{ fontSize: '0.8125rem' }}>
|
||||
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' }}
|
||||
/>
|
||||
</Box>
|
||||
{signals.map(s => <SignalCard key={s.id} signal={s} />)}
|
||||
</Box>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user