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>
2026-05-19 15:43:52 +02:00
parent 52a2693cad
commit 920ce8eb09
17 changed files with 1036 additions and 476 deletions
@@ -0,0 +1,124 @@
+import { Box, Card, Chip, Stack, Typography } from '@mui/material'
+import { MapPin, Ruler, Wallet, Calendar, CheckCircle } from 'lucide-react'
+import type { PropertyNeedMatch } from '../../domain/match'
+
+interface Props {
+  match: PropertyNeedMatch
+}
+
+function ScoreBadge({ score }: { score: number }) {
+  const isGold = score >= 90
+  const bg = isGold ? '#fef3c7' : '#f1f5f9'
+  const color = isGold ? '#d97706' : '#64748b'
+  const borderColor = isGold ? '#fde68a' : '#e2e8f0'
+
+  return (
+    <Box
+      sx={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 48,
+        height: 48,
+        borderRadius: '50%',
+        bgcolor: bg,
+        border: `2px solid ${borderColor}`,
+        flexShrink: 0,
+      }}
+    >
+      <Typography variant="body2" sx={{ fontWeight: 700, color, fontSize: '0.95rem' }}>
+        {score}
+      </Typography>
+    </Box>
+  )
+}
+
+function InfoRow({ icon, label, value }: { icon: React.ReactNode; label: string; value: string }) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
+      <Box sx={{ color: '#94a3b8', display: 'flex', alignItems: 'center' }}>{icon}</Box>
+      <Typography variant="caption" sx={{ color: '#64748b', minWidth: 70 }}>{label}</Typography>
+      <Typography variant="caption" sx={{ color: '#0f172a', fontWeight: 500 }}>{value}</Typography>
+    </Box>
+  )
+}
+
+export function NeedMatchCard({ match }: Props) {
+  return (
+    <Card
+      elevation={0}
+      sx={{
+        p: 2,
+        mb: 1.5,
+        border: '1px solid #e2e8f0',
+        borderRadius: 1.5,
+        '&:hover': { borderColor: '#cbd5e1', bgcolor: '#fafafa' },
+        transition: 'border-color 0.15s, background-color 0.15s',
+      }}
+    >
+      <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1.5 }}>
+        <ScoreBadge score={match.score} />
+
+        <Box sx={{ flex: 1, minWidth: 0 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 0.5 }}>
+            <Typography variant="body2" sx={{ fontWeight: 700, color: '#0f172a' }}>
+              {match.company}
+            </Typography>
+            <Chip
+              label={match.score >= 90 ? 'Gold Match' : 'Starker Match'}
+              size="small"
+              sx={{
+                fontSize: '0.65rem',
+                height: 18,
+                bgcolor: match.score >= 90 ? '#fef3c7' : '#f1f5f9',
+                color: match.score >= 90 ? '#92400e' : '#475569',
+                border: '1px solid',
+                borderColor: match.score >= 90 ? '#fde68a' : '#e2e8f0',
+              }}
+            />
+          </Box>
+
+          <Stack spacing={0.4} sx={{ mb: 1 }}>
+            <InfoRow icon={<Ruler size={12} />} label="Fläche" value={match.areaRequired} />
+            <InfoRow icon={<Wallet size={12} />} label="Budget" value={match.budget} />
+            <InfoRow
+              icon={<MapPin size={12} />}
+              label="Standorte"
+              value={match.locations.slice(0, 3).join(', ') + (match.locations.length > 3 ? ' …' : '')}
+            />
+            <InfoRow icon={<Calendar size={12} />} label="Einzug ab" value={match.timing} />
+          </Stack>
+
+          {match.matchHighlights.length > 0 && (
+            <Box sx={{ mb: 1 }}>
+              {match.matchHighlights.slice(0, 2).map((h, i) => (
+                <Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.5, mb: 0.25 }}>
+                  <CheckCircle size={11} color="#1a7a4a" style={{ marginTop: 2, flexShrink: 0 }} />
+                  <Typography variant="caption" sx={{ color: '#374151', lineHeight: 1.4 }}>{h}</Typography>
+                </Box>
+              ))}
+            </Box>
+          )}
+
+          {match.mustHaves.length > 0 && (
+            <Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5 }}>
+              {match.mustHaves.slice(0, 3).map(mh => (
+                <Chip
+                  key={mh}
+                  label={mh}
+                  size="small"
+                  sx={{ fontSize: '0.62rem', height: 18, bgcolor: '#f0fdf4', color: '#166534', border: '1px solid #bbf7d0' }}
+                />
+              ))}
+              {match.mustHaves.length > 3 && (
+                <Typography variant="caption" sx={{ color: '#94a3b8', alignSelf: 'center' }}>
+                  +{match.mustHaves.length - 3}
+                </Typography>
+              )}
+            </Stack>
+          )}
+        </Box>
+      </Box>
+    </Card>
+  )
+}