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,114 @@
+import {
+  Box,
+  Dialog,
+  IconButton,
+  Step,
+  StepLabel,
+  Stepper,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material'
+import { X } from 'lucide-react'
+import { useOfferWizardStore, type OfferStep } from '../../stores/offerWizardStore'
+import { OfferPropertySelectionStep } from './OfferPropertySelectionStep'
+import { OfferPdfReviewStep } from './OfferPdfReviewStep'
+import { OfferCheckedAction } from './OfferCheckedAction'
+import { OfferChatComposer } from './OfferChatComposer'
+
+const STEPS: { key: OfferStep; label: string }[] = [
+  { key: 'select_properties', label: 'Objekte wählen' },
+  { key: 'pdf_review', label: 'PDF-Vorschau' },
+  { key: 'checked', label: 'Prüfen' },
+  { key: 'send', label: 'Senden' },
+]
+
+export function OfferWizard() {
+  const theme = useTheme()
+  const fullScreen = useMediaQuery(theme.breakpoints.down('md'))
+
+  const isOpen = useOfferWizardStore(s => s.isOpen)
+  const close = useOfferWizardStore(s => s.close)
+  const currentStep = useOfferWizardStore(s => s.currentStep)
+  const needTitle = useOfferWizardStore(s => s.needTitle)
+
+  const activeIndex = STEPS.findIndex(s => s.key === currentStep)
+
+  return (
+    <Dialog
+      open={isOpen}
+      onClose={close}
+      fullScreen={fullScreen}
+      maxWidth="lg"
+      fullWidth
+      PaperProps={{
+        sx: {
+          height: fullScreen ? '100vh' : '85vh',
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+        },
+      }}
+    >
+      {/* Header */}
+      <Box
+        sx={{
+          px: 3,
+          py: 1.5,
+          borderBottom: '1px solid #e2e8f0',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexShrink: 0,
+        }}
+      >
+        <Box sx={{ minWidth: 0 }}>
+          <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.7rem', textTransform: 'uppercase', fontWeight: 600, letterSpacing: 0.5 }}>
+            Angebot erstellen
+          </Typography>
+          <Typography
+            variant="body1"
+            sx={{
+              fontWeight: 700,
+              color: '#0f172a',
+              fontSize: '0.95rem',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {needTitle}
+          </Typography>
+        </Box>
+        <IconButton onClick={close} size="small">
+          <X size={18} />
+        </IconButton>
+      </Box>
+
+      {/* Stepper */}
+      <Box sx={{ px: 3, py: 1.5, borderBottom: '1px solid #e2e8f0', bgcolor: '#f8fafc', flexShrink: 0 }}>
+        <Stepper activeStep={activeIndex} alternativeLabel>
+          {STEPS.map(s => (
+            <Step key={s.key}>
+              <StepLabel
+                slotProps={{
+                  label: { sx: { fontSize: '0.8rem', fontWeight: 500 } },
+                }}
+              >
+                {s.label}
+              </StepLabel>
+            </Step>
+          ))}
+        </Stepper>
+      </Box>
+
+      {/* Step content */}
+      <Box sx={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+        {currentStep === 'select_properties' && <OfferPropertySelectionStep />}
+        {currentStep === 'pdf_review' && <OfferPdfReviewStep />}
+        {currentStep === 'checked' && <OfferCheckedAction />}
+        {currentStep === 'send' && <OfferChatComposer />}
+      </Box>
+    </Dialog>
+  )
+}