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,166 @@
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { Box, Button, CircularProgress, Typography } from '@mui/material'
|
||||
import { ArrowLeft, ArrowRight } from 'lucide-react'
|
||||
import { useOfferWizardStore } from '../../stores/offerWizardStore'
|
||||
import { offerService } from '../../services/offerService'
|
||||
import { useUpdateOfferField, useGeneratePdfPreview } from '../../hooks/useOffers'
|
||||
import { useToastStore } from '../../stores/toastStore'
|
||||
import { MockPdfPreview } from './MockPdfPreview'
|
||||
import { EditableOfferFieldList } from './EditableOfferFieldList'
|
||||
import type { OfferDraft, OfferEditableField } from '../../domain/offer'
|
||||
|
||||
export function OfferPdfReviewStep() {
|
||||
const offerDraftId = useOfferWizardStore(s => s.offerDraftId)
|
||||
const editableFieldsStore = useOfferWizardStore(s => s.editableFields)
|
||||
const updateField = useOfferWizardStore(s => s.updateField)
|
||||
const setStep = useOfferWizardStore(s => s.setStep)
|
||||
const setPdfReady = useOfferWizardStore(s => s.setPdfReady)
|
||||
const pdfReady = useOfferWizardStore(s => s.pdfPreviewReady)
|
||||
|
||||
const [draft, setDraft] = useState<OfferDraft | null>(null)
|
||||
const [loadingDraft, setLoadingDraft] = useState(true)
|
||||
|
||||
const updateFieldMut = useUpdateOfferField()
|
||||
const genPreview = useGeneratePdfPreview()
|
||||
const showToast = useToastStore(s => s.showToast)
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
async function load() {
|
||||
if (!offerDraftId) return
|
||||
setLoadingDraft(true)
|
||||
const draftRes = await import('../../provider/MockupOfferProvider').then(m =>
|
||||
m.MockupOfferProvider.getById(offerDraftId),
|
||||
)
|
||||
if (cancelled) return
|
||||
setDraft(draftRes)
|
||||
setLoadingDraft(false)
|
||||
|
||||
// Trigger PDF generation once
|
||||
if (draftRes && !pdfReady) {
|
||||
const res = await genPreview.mutateAsync(offerDraftId)
|
||||
if (!cancelled && res.data) setPdfReady()
|
||||
}
|
||||
}
|
||||
void load()
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [offerDraftId])
|
||||
|
||||
const fallback: Record<string, string> = useMemo(() => {
|
||||
const out: Record<string, string> = {}
|
||||
if (draft) {
|
||||
for (const f of draft.editableFields) out[f.id] = f.value
|
||||
}
|
||||
return out
|
||||
}, [draft])
|
||||
|
||||
const fields: OfferEditableField[] = draft?.editableFields ?? []
|
||||
|
||||
const handleFieldChange = async (id: string, value: string) => {
|
||||
updateField(id, value)
|
||||
if (offerDraftId) {
|
||||
await updateFieldMut.mutateAsync({ offerDraftId, fieldId: id, value })
|
||||
}
|
||||
}
|
||||
|
||||
const handleNext = () => {
|
||||
if (!offerDraftId) return
|
||||
if (!pdfReady) {
|
||||
showToast('PDF-Vorschau wird noch generiert...', 'info')
|
||||
return
|
||||
}
|
||||
setStep('checked')
|
||||
}
|
||||
|
||||
if (loadingDraft || !draft) {
|
||||
return (
|
||||
<Box sx={{ p: 4, display: 'flex', justifyContent: 'center' }}>
|
||||
<CircularProgress size={24} />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
|
||||
<Box sx={{ flex: 1, display: 'flex', overflow: 'hidden', bgcolor: '#f1f5f9' }}>
|
||||
<Box sx={{ flex: 1.4, p: 2, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
|
||||
{!pdfReady ? (
|
||||
<Box
|
||||
sx={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 2,
|
||||
bgcolor: 'white',
|
||||
borderRadius: 1.5,
|
||||
border: '1px dashed #cbd5e1',
|
||||
}}
|
||||
>
|
||||
<CircularProgress size={24} />
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
PDF-Vorschau wird generiert...
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<MockPdfPreview fields={editableFieldsStore} fallbackFields={fallback} />
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
width: 360,
|
||||
minWidth: 360,
|
||||
flexShrink: 0,
|
||||
p: 2,
|
||||
bgcolor: 'white',
|
||||
borderLeft: '1px solid #e2e8f0',
|
||||
overflowY: 'auto',
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" sx={{ fontWeight: 700, color: '#0f172a', mb: 1.5, fontSize: '0.9rem' }}>
|
||||
Inhalte bearbeiten
|
||||
</Typography>
|
||||
<EditableOfferFieldList
|
||||
fields={fields}
|
||||
values={editableFieldsStore}
|
||||
onChange={handleFieldChange}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
p: 2,
|
||||
borderTop: '1px solid #e2e8f0',
|
||||
bgcolor: 'white',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
startIcon={<ArrowLeft size={14} />}
|
||||
onClick={() => setStep('select_properties')}
|
||||
sx={{ textTransform: 'none' }}
|
||||
>
|
||||
Zurück
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
endIcon={<ArrowRight size={14} />}
|
||||
onClick={handleNext}
|
||||
disabled={!pdfReady}
|
||||
sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
|
||||
>
|
||||
Angebot prüfen
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user