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>
This commit is contained in:
Benjamin Sutter
@@ -0,0 +1,151 @@
|
||||
import { useEffect, useMemo } from 'react'
|
||||
import { Box, Button, CircularProgress, Typography } from '@mui/material'
|
||||
import { ArrowRight } from 'lucide-react'
|
||||
import { useProperties } from '../../hooks/useProperties'
|
||||
import { ResultType } from '../../domain/enums'
|
||||
import { useOfferWizardStore } from '../../stores/offerWizardStore'
|
||||
import { useLatentNeedById } from '../../hooks/useLatentNeeds'
|
||||
import { useCreateOfferDraft } from '../../hooks/useOffers'
|
||||
import { useToastStore } from '../../stores/toastStore'
|
||||
import { SelectablePropertyMatchCard } from './SelectablePropertyMatchCard'
|
||||
import { deterministicMatchScore, assetTypeLabel } from './latentNeedUtils'
|
||||
|
||||
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 OfferPropertySelectionStep() {
|
||||
const needId = useOfferWizardStore(s => s.selectedNeedId)
|
||||
const selectedIds = useOfferWizardStore(s => s.selectedPropertyIds)
|
||||
const toggle = useOfferWizardStore(s => s.toggleProperty)
|
||||
const setSelected = useOfferWizardStore(s => s.setSelectedProperties)
|
||||
const setOfferDraftId = useOfferWizardStore(s => s.setOfferDraftId)
|
||||
const setStep = useOfferWizardStore(s => s.setStep)
|
||||
|
||||
const { data: need } = useLatentNeedById(needId)
|
||||
const { data: properties = [], isLoading } = useProperties({ resultType: ResultType.VERIFIED_PORTFOLIO })
|
||||
|
||||
const createDraft = useCreateOfferDraft()
|
||||
const showToast = useToastStore(s => s.showToast)
|
||||
|
||||
const scored = useMemo(() => {
|
||||
if (!need) return []
|
||||
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])
|
||||
|
||||
// Pre-select top 2 if nothing selected
|
||||
useEffect(() => {
|
||||
if (scored.length > 0 && selectedIds.length === 0) {
|
||||
setSelected(scored.slice(0, 2).map(s => s.property.id))
|
||||
}
|
||||
}, [scored, selectedIds.length, setSelected])
|
||||
|
||||
const handleNext = async () => {
|
||||
if (!need) return
|
||||
if (selectedIds.length === 0) {
|
||||
showToast('Bitte mindestens ein Objekt auswählen', 'warning')
|
||||
return
|
||||
}
|
||||
const res = await createDraft.mutateAsync({
|
||||
needId: need.id,
|
||||
selectedPropertyIds: selectedIds,
|
||||
needTitle: need.title,
|
||||
location: need.desiredLocation,
|
||||
assetType: need.assetType,
|
||||
sizeRange: need.sizeRange,
|
||||
})
|
||||
if (res.error || !res.data) {
|
||||
showToast(`Fehler: ${res.error}`, 'error')
|
||||
return
|
||||
}
|
||||
setOfferDraftId(res.data.id)
|
||||
setStep('pdf_review')
|
||||
}
|
||||
|
||||
if (!need) {
|
||||
return (
|
||||
<Box sx={{ p: 4, display: 'flex', justifyContent: 'center' }}>
|
||||
<CircularProgress size={24} />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
|
||||
{/* Need summary header */}
|
||||
<Box
|
||||
sx={{
|
||||
p: 2.5,
|
||||
bgcolor: '#f8fafc',
|
||||
borderBottom: '1px solid #e2e8f0',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption" sx={{ color: '#64748b', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5 }}>
|
||||
Bedarf
|
||||
</Typography>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: '#0f172a', fontSize: '1.1rem', mt: 0.25 }}>
|
||||
{need.title}
|
||||
</Typography>
|
||||
<Typography variant="caption" sx={{ color: '#475569', fontSize: '0.8rem', mt: 0.5, display: 'block' }}>
|
||||
{assetTypeLabel(need.assetType)} · {need.desiredLocation} · {need.sizeRange.min}–{need.sizeRange.max} m²
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ flex: 1, overflowY: 'auto', p: 2 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: '#0f172a', mb: 1.5 }}>
|
||||
Wählen Sie passende Objekte aus Ihrem Portfolio
|
||||
</Typography>
|
||||
{isLoading && <CircularProgress size={20} />}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
{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>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
p: 2,
|
||||
borderTop: '1px solid #e2e8f0',
|
||||
bgcolor: 'white',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" sx={{ color: '#64748b' }}>
|
||||
{selectedIds.length} Objekt{selectedIds.length === 1 ? '' : 'e'} ausgewählt
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
endIcon={createDraft.isPending ? <CircularProgress size={14} sx={{ color: 'white' }} /> : <ArrowRight size={14} />}
|
||||
onClick={handleNext}
|
||||
disabled={selectedIds.length === 0 || createDraft.isPending}
|
||||
sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
|
||||
>
|
||||
Weiter
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user