feat: F030 Anfragencenter — Aktive & Latente Anfragen + Angebot-Wizard

Neuer Menüpunkt «Anfragencenter» (ehemals «Eingehende Bedarfe»): Aktive Anfragen: - Split-View: Anfrageliste (Liste/Grid-Toggle) + Chat-Detailansicht - Chat-Verlauf mit Sender-Styling (Mieter links, Supply rechts) - Antwortformular mit Betreff, Nachricht, Anhänge, Statuswechsel - Zugehörige Property Card neben dem Chat Latente Anfragen: - Drei-Spalten-Layout: Need-Liste | Need-Detail | Eigene Objekte - Need Cards mit AI-Zusammenfassung, Must-Haves, Präferenzen - Eigene Portfolio-Objekte sortiert nach deterministischem Match-Score - Checkbox-Selektion für Angebotsauswahl Angebot-Wizard (4 Schritte): - Schritt 1: Objekte auswählen (mit Score-Vorschau) - Schritt 2: PDF-Vorschau + editierbare Textfelder - Schritt 3: Angebot prüfen & bestätigen - Schritt 4: Nachricht an Suchenden mit KI-generierter Mail Architektur: - Domain: Inquiry, LatentNeed, OfferDraft Types - Provider: IInquiryProvider, ILatentNeedProvider, IOfferProvider + Mockups - Services: inquiryService, latentNeedService, offerService - Hooks: useInquiries, useLatentNeeds, useOffers (TanStack Query) - Store: offerWizardStore (Zustand, lokaler Wizard-State) - 27 neue Komponenten, alle Loading/Empty/Error States Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-18 18:03:05 +02:00
parent 05ac0083b2
commit c4c29ef7d3
51 changed files with 4000 additions and 1 deletions
@@ -0,0 +1,115 @@
+import { useMemo } from 'react'
+import { Box, CircularProgress, Typography } from '@mui/material'
+import { Target } from 'lucide-react'
+import { useProperties } from '../../hooks/useProperties'
+import { ResultType } from '../../domain/enums'
+import { useOfferWizardStore } from '../../stores/offerWizardStore'
+import { deterministicMatchScore } from './latentNeedUtils'
+import { SelectablePropertyMatchCard } from './SelectablePropertyMatchCard'
+import { OfferCreationPanel } from './OfferCreationPanel'
+import type { LatentNeed } from '../../domain/latentNeed'
+
+interface OwnPropertyMatchListProps {
+  need: LatentNeed
+}
+
+function buildReason(propertyAssetType: string, needAssetType: string, city: string, location: string): string {
+  if (propertyAssetType === needAssetType) {
+    const cityMatch = location.toLowerCase().includes(city.toLowerCase()) || city.toLowerCase().includes(location.toLowerCase())
+    if (cityMatch) return 'Nutzungstyp und Standort passen sehr gut'
+    return 'Passender Nutzungstyp, alternative Lage'
+  }
+  return 'Alternatives Profil — Detailprüfung empfohlen'
+}
+
+export function OwnPropertyMatchList({ need }: OwnPropertyMatchListProps) {
+  const { data: properties = [], isLoading } = useProperties({ resultType: ResultType.VERIFIED_PORTFOLIO })
+
+  const selectedIds = useOfferWizardStore(s => s.selectedPropertyIds)
+  const toggle = useOfferWizardStore(s => s.toggleProperty)
+
+  const scored = useMemo(() => {
+    return properties
+      .map(p => ({
+        property: p,
+        score: deterministicMatchScore(p.id, need.id),
+        reason: buildReason(p.assetType, need.assetType, p.location.city, need.desiredLocation),
+      }))
+      .sort((a, b) => b.score - a.score)
+  }, [properties, need])
+
+  return (
+    <Box
+      sx={{
+        width: 360,
+        minWidth: 360,
+        flexShrink: 0,
+        borderLeft: '1px solid #e2e8f0',
+        bgcolor: 'white',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+      }}
+    >
+      <Box
+        sx={{
+          px: 2,
+          py: 1.25,
+          borderBottom: '1px solid #e2e8f0',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+          flexShrink: 0,
+        }}
+      >
+        <Target size={14} color="#1e3a5f" />
+        <Typography variant="body2" sx={{ fontWeight: 600, color: '#0f172a' }}>
+          Eigene Objekte
+        </Typography>
+        <Box
+          sx={{
+            ml: 'auto',
+            px: 1,
+            py: 0.125,
+            borderRadius: 1,
+            bgcolor: '#1e3a5f',
+            color: 'white',
+            fontWeight: 600,
+            fontSize: '0.7rem',
+          }}
+        >
+          {scored.length}
+        </Box>
+      </Box>
+
+      <Box sx={{ flex: 1, overflowY: 'auto', p: 1.25, display: 'flex', flexDirection: 'column', gap: 0.75 }}>
+        {isLoading && (
+          <Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>
+            <CircularProgress size={20} />
+          </Box>
+        )}
+        {!isLoading && scored.length === 0 && (
+          <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.8rem', textAlign: 'center', p: 2 }}>
+            Keine Portfolio-Objekte vorhanden
+          </Typography>
+        )}
+        {scored.map(({ property, score, reason }) => (
+          <SelectablePropertyMatchCard
+            key={property.id}
+            property={property}
+            matchScore={score}
+            selected={selectedIds.includes(property.id)}
+            onToggle={() => toggle(property.id)}
+            reason={reason}
+          />
+        ))}
+      </Box>
+
+      <OfferCreationPanel
+        selectedCount={selectedIds.length}
+        needId={need.id}
+        needTitle={need.title}
+      />
+    </Box>
+  )
+}