refactor: split PropertyDetail, Anfragen, AISearch god components

PropertyDetail.tsx: 565→118 lines - Removed duplicate constants (import from MatchDetailPropertyDetails) - PropertyDetailPublicSections: Preis/Hauptangaben/Eigenschaften/Wegzeit/Einheiten/Beschreibung/Quelle sections - PropertyContactForm: Verwaltung kontaktieren form Anfragen.tsx: 481→320 lines - anfragenKiDetection.ts: STAGE_ORDER, STAGE_LABELS, KI_RULES, detectKiStage - AnfragenMessageBubble: chat message bubble component - AnfragenInquiryItem: inquiry list row component AISearch.tsx: 398→342 lines - needSearchMapper.ts: generateSummary + buildNeedInput pure functions Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-24 00:55:55 +02:00
parent 4d4ea6d2ff
commit ae82d0e6a0
9 changed files with 663 additions and 689 deletions
@@ -0,0 +1,287 @@
+import {
+  Box,
+  Button,
+  Chip,
+  Paper,
+  Typography,
+} from '@mui/material'
+import {
+  Building2,
+  Clock,
+  ExternalLink,
+  Info,
+  Layers,
+  ShieldCheck,
+  Tag,
+  Train,
+  TrendingUp,
+} from 'lucide-react'
+import type { Property } from '../../domain/property'
+import {
+  ASSET_LABELS,
+  FLOOR_LABEL,
+  KeyFactRow,
+  PASSERBY_LABELS,
+  RISK_LABELS,
+  SOURCE_LABELS,
+  UnitRow,
+} from './MatchDetailPropertyDetails'
+
+interface PropertyDetailPublicSectionsProps {
+  property: Property
+  highlightUnitId?: string | null
+}
+
+export function PropertyDetailPublicSections({ property, highlightUnitId }: PropertyDetailPublicSectionsProps) {
+  const preMarketUnits = (property.units ?? []).filter(u => u.schattenmarktRelease?.enabled)
+  const otherUnits = (property.units ?? []).filter(u => !u.schattenmarktRelease?.enabled)
+  const flexibleUnits = (property.units ?? []).filter(u => u.isFlexible && u.minLettableSqm !== undefined)
+
+  const monthlyPerSqm = Math.round(property.rentPricePerSqm / 12)
+  const totalMonthly = Math.round(property.areaSqm * property.rentPricePerSqm / 12)
+  const minLettable = property.areaSqmMin
+    ?? (flexibleUnits.length > 0
+      ? Math.min(...flexibleUnits.map(u => u.minLettableSqm!))
+      : undefined)
+
+  const sourceLabel = property.sourceLabel
+    ?? property.sourceMeta?.sourceLabel
+    ?? SOURCE_LABELS[property.sourceType]
+    ?? property.sourceType
+
+  return (
+    <>
+      {/* ── Preis ── */}
+      <Paper sx={{ mb: 2, p: 2.5 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
+          <Tag size={15} color="#374151" />
+          <Typography variant="h6" sx={{ fontWeight: 700 }}>Preis</Typography>
+        </Box>
+        <KeyFactRow label="Monatliche Miete" value={`CHF ${totalMonthly.toLocaleString('de-CH')}.–`} />
+        <KeyFactRow label="Pro m²/Monat" value={`CHF ${monthlyPerSqm.toLocaleString('de-CH')}.–`} />
+        <KeyFactRow label="Pro m²/Jahr" value={`CHF ${property.rentPricePerSqm.toLocaleString('de-CH')}.–`} />
+        {property.ancillaryCosts != null && (
+          <KeyFactRow
+            label="Nebenkosten"
+            value={`CHF ${Math.round(property.areaSqm * property.ancillaryCosts / 12).toLocaleString('de-CH')}/Mt. (CHF ${property.ancillaryCosts}/m²/a)`}
+          />
+        )}
+      </Paper>
+
+      {/* ── Hauptangaben ── */}
+      <Paper sx={{ mb: 2, p: 2.5 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
+          <Info size={15} color="#374151" />
+          <Typography variant="h6" sx={{ fontWeight: 700 }}>Hauptangaben</Typography>
+        </Box>
+        <KeyFactRow
+          label="Verfügbarkeit"
+          value={
+            property.availabilityDate
+              ? new Date(property.availabilityDate).toLocaleDateString('de-CH', { day: 'numeric', month: 'long', year: 'numeric' })
+              : 'Auf Anfrage'
+          }
+        />
+        <KeyFactRow label="Objekttyp" value={ASSET_LABELS[property.assetType] ?? property.assetType} />
+        <KeyFactRow label="Nutzfläche" value={`${property.areaSqm.toLocaleString('de-CH')} m²`} />
+        {minLettable != null && (
+          <KeyFactRow label="Mindestnutzfläche" value={`${minLettable.toLocaleString('de-CH')} m²`} />
+        )}
+        {property.contractDurationMonths != null && (
+          <KeyFactRow label="Mietdauer" value={`${property.contractDurationMonths} Monate`} />
+        )}
+        {property.floorLevel != null && (
+          <KeyFactRow label="Stockwerk" value={FLOOR_LABEL(property.floorLevel)} />
+        )}
+        {property.currentTenant && (
+          <KeyFactRow label="Aktueller Mieter" value={property.currentTenant} />
+        )}
+        {property.leaseEndDate && (
+          <KeyFactRow
+            label="Mietvertragsende"
+            value={new Date(property.leaseEndDate).toLocaleDateString('de-CH', { month: 'long', year: 'numeric' })}
+          />
+        )}
+        {property.breakoutOption && (
+          <KeyFactRow
+            label="Break-out Option"
+            value={
+              property.breakoutOptionDate
+                ? new Date(property.breakoutOptionDate).toLocaleDateString('de-CH', { month: 'long', year: 'numeric' })
+                : 'Ja'
+            }
+          />
+        )}
+        {property.riskLevel && (
+          <KeyFactRow label="Risikoeinschätzung" value={RISK_LABELS[property.riskLevel] ?? property.riskLevel} />
+        )}
+        {property.expansionPotentialSqm != null && (
+          <KeyFactRow label="Ausbaupotenzial" value={`+${property.expansionPotentialSqm.toLocaleString('de-CH')} m²`} />
+        )}
+      </Paper>
+
+      {/* ── Eigenschaften ── */}
+      {property.softFactors && (
+        <Paper sx={{ mb: 2, p: 2.5 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
+            <TrendingUp size={15} color="#374151" />
+            <Typography variant="h6" sx={{ fontWeight: 700 }}>Eigenschaften</Typography>
+          </Box>
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+            {property.softFactors.publicTransportMinutes != null && (
+              <Chip
+                size="small"
+                icon={<Train size={11} />}
+                label={`ÖV: ${property.softFactors.publicTransportMinutes} Min. zu Fuss`}
+                sx={{ bgcolor: '#eff6ff', color: '#1d4ed8', border: '1px solid #bfdbfe', fontWeight: 500 }}
+              />
+            )}
+            {property.softFactors.parkingSpots != null && property.softFactors.parkingSpots > 0 && (
+              <Chip
+                size="small"
+                label={`${property.softFactors.parkingSpots} Parkplätze`}
+                sx={{ bgcolor: '#f8fafc', color: '#374151', border: '1px solid #e2e8f0', fontWeight: 500 }}
+              />
+            )}
+            {property.softFactors.prestige != null && property.softFactors.prestige >= 80 && (
+              <Chip
+                size="small"
+                label="Prestigestandort"
+                sx={{ bgcolor: '#fef9c3', color: '#92400e', border: '1px solid #fde68a', fontWeight: 500 }}
+              />
+            )}
+            {property.softFactors.visibilityScore != null && property.softFactors.visibilityScore >= 80 && (
+              <Chip
+                size="small"
+                label="Hohe Sichtbarkeit"
+                sx={{ bgcolor: '#fef9c3', color: '#92400e', border: '1px solid #fde68a', fontWeight: 500 }}
+              />
+            )}
+            {property.softFactors.passerbyFrequency && (
+              <Chip
+                size="small"
+                label={`Laufkundschaft: ${PASSERBY_LABELS[property.softFactors.passerbyFrequency]}`}
+                sx={{ bgcolor: '#f0fdf4', color: '#1a7a4a', border: '1px solid #bbf7d0', fontWeight: 500 }}
+              />
+            )}
+            {property.softFactors.talentAccess != null && property.softFactors.talentAccess >= 80 && (
+              <Chip
+                size="small"
+                label="Hoher Talentzugang"
+                sx={{ bgcolor: '#faf5ff', color: '#5b21b6', border: '1px solid #e9d5ff', fontWeight: 500 }}
+              />
+            )}
+            {property.softFactors.talentAccess != null && property.softFactors.talentAccess >= 80 && (
+              <Chip
+                size="small"
+                label={`Talentindex: ${property.softFactors.talentAccess}`}
+                sx={{ bgcolor: '#faf5ff', color: '#5b21b6', border: '1px solid #e9d5ff', fontWeight: 500 }}
+              />
+            )}
+          </Box>
+        </Paper>
+      )}
+
+      {/* ── Wegzeit ── */}
+      {property.softFactors?.publicTransportMinutes != null && (
+        <Paper sx={{ mb: 2, p: 2.5 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
+            <Clock size={15} color="#374151" />
+            <Typography variant="h6" sx={{ fontWeight: 700 }}>Wegzeit</Typography>
+          </Box>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: '50%', bgcolor: '#eff6ff', border: '1px solid #bfdbfe', flexShrink: 0 }}>
+              <Train size={18} color="#1d4ed8" />
+            </Box>
+            <Box>
+              <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                {property.softFactors.publicTransportMinutes} Min. zu Fuss
+              </Typography>
+              <Typography variant="caption" color="text.secondary">
+                Nächster ÖV-Anschluss — {property.location.city}
+              </Typography>
+            </Box>
+          </Box>
+          {property.softFactors.infrastructureNotes && (
+            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1, fontStyle: 'italic' }}>
+              {property.softFactors.infrastructureNotes}
+            </Typography>
+          )}
+          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1 }}>
+            Die Zeiten beziehen sich auf die Strecke zu Fuss.
+          </Typography>
+        </Paper>
+      )}
+
+      {/* ── Einheiten ── */}
+      {(property.units ?? []).length > 0 && (
+        <Paper sx={{ mb: 2, p: 2.5 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
+            <Layers size={15} color="#374151" />
+            <Typography variant="h6" sx={{ fontWeight: 700 }}>Einheiten</Typography>
+          </Box>
+          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 80px 110px 120px auto', gap: 1.5, px: 2, mb: 0.75 }}>
+            {['Einheit', 'Fläche', 'Miete', 'Verfügbar ab', 'Status'].map(h => (
+              <Typography key={h} variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>{h}</Typography>
+            ))}
+          </Box>
+          {preMarketUnits.map(u => (
+            <UnitRow key={u.id} unit={u} highlighted={u.id === highlightUnitId || preMarketUnits.length === 1} />
+          ))}
+          {otherUnits.map(u => (
+            <UnitRow key={u.id} unit={u} highlighted={u.id === highlightUnitId} />
+          ))}
+        </Paper>
+      )}
+
+      {/* ── Beschreibung ── */}
+      {property.description && (
+        <Paper sx={{ mb: 2, p: 2.5 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
+            <Building2 size={15} color="#374151" />
+            <Typography variant="h6" sx={{ fontWeight: 700 }}>Beschreibung</Typography>
+          </Box>
+          <Typography variant="body2" sx={{ lineHeight: 1.75, color: '#374151', whiteSpace: 'pre-wrap' }}>
+            {property.description}
+          </Typography>
+        </Paper>
+      )}
+
+      {/* ── Quelle & Referenz ── */}
+      <Paper sx={{ mb: 2, p: 2.5 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
+          <Info size={15} color="#374151" />
+          <Typography variant="h6" sx={{ fontWeight: 700 }}>Quelle & Referenz</Typography>
+        </Box>
+        <KeyFactRow label="Datenquelle" value={sourceLabel} />
+        {property.propertyNumber && (
+          <KeyFactRow label="Objektnummer" value={property.propertyNumber} />
+        )}
+        {property.importedFrom && (
+          <KeyFactRow label="Importiert aus" value={property.importedFrom} />
+        )}
+        {property.dataQuality.lastVerifiedAt && (
+          <KeyFactRow
+            label="Zuletzt verifiziert"
+            value={new Date(property.dataQuality.lastVerifiedAt).toLocaleDateString('de-CH', { day: 'numeric', month: 'long', year: 'numeric' })}
+          />
+        )}
+        {property.sourceUrl && (
+          <Box sx={{ mt: 1.25 }}>
+            <Button
+              size="small"
+              variant="outlined"
+              endIcon={<ExternalLink size={12} />}
+              href={property.sourceUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              sx={{ textTransform: 'none', fontSize: '0.8rem', borderColor: '#cbd5e1', color: '#374151' }}
+            >
+              Zum Originalinserat
+            </Button>
+          </Box>
+        )}
+      </Paper>
+    </>
+  )
+}