feat: collapsible filter bar, compact property cards, offer wizard field selection

- Properties page: collapsible decision/filter strip (localStorage state), slim single-row Datenpflege status bar (chips + button), 4-column card grid - PropertyIntelligenceCard: reduced image height (160→120px), tighter body padding - OfferWizard (latente Anfragen): new "Felder wählen" step between property selection and PDF preview; uses ReportObjectFieldSelector per property - MockPdfPreview: adds second PDF page showing selected properties side by side with photo, title, location and all chosen hard/soft fact fields - offerWizardStore: adds select_fields step type and fieldSelections state Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-26 15:36:32 +02:00
parent 36570c5bdc
commit a825672197
8 changed files with 486 additions and 141 deletions
@@ -1,18 +1,86 @@
-import { Box, Typography } from '@mui/material'
-import { FileText } from 'lucide-react'
+import { Box, Divider, Typography } from '@mui/material'
+import { Building2, FileText, MapPin } from 'lucide-react'
 import { useOfferWizardStore } from '../../stores/offerWizardStore'
 import { mockProperties } from '../../mock-data/properties'
+import type { ReportObjectFieldKey, ReportObjectFieldSelection } from '../../domain/inquiryReport'
+import type { Property } from '../../domain/property'

 interface MockPdfPreviewProps {
  fields: Record<string, string>
  fallbackFields: Record<string, string>
+  fieldSelections: ReportObjectFieldSelection[]
 }

-export function MockPdfPreview({ fields, fallbackFields }: MockPdfPreviewProps) {
+const FIELD_LABELS: Partial<Record<ReportObjectFieldKey, string>> = {
+  areaSqm: 'Fläche',
+  rentPricePerSqm: 'Mietpreis',
+  availabilityDate: 'Verfügbar ab',
+  leaseTerm: 'Mietlaufzeit',
+  breakoutOption: 'Breakout-Option',
+  currentTenant: 'Aktueller Mieter',
+  propertyNumber: 'Objektnummer',
+  assetType: 'Asset Type',
+  floor: 'Stockwerk',
+  parking: 'Parkplätze',
+  fitOut: 'Ausbaugrad',
+  isBarrierFree: 'Barrierefrei',
+  ceilingHeightM: 'Raumhöhe',
+  floorLoad: 'Bodenlast',
+  loadingDocksCount: 'Anlieferung',
+  goodsLift: 'Warenaufzug',
+  passengerLift: 'Personenaufzug',
+  powerSupplyKva: 'Stromanschluss',
+  hasServerRoom: 'Serverraum',
+  internet: 'Internet',
+  deliveryAccess: 'Zufahrt',
+  publicTransportScore: 'ÖV-Anbindung',
+  prestigeScore: 'Prestige',
+  visibilityScore: 'Sichtbarkeit',
+  footfallScore: 'Passantenfrequenz',
+  commuterAccessScore: 'Pendlererreichbarkeit',
+  talentAccessScore: 'Talent Access',
+  esgScore: 'ESG',
+  flexibilityScore: 'Flexibilität',
+  expansionPotentialScore: 'Expansionspotenzial',
+  taxEnvironmentScore: 'Steuerumfeld',
+  microLocation: 'Mikrostandort',
+  competitionEnvironment: 'Konkurrenzumfeld',
+  infrastructure: 'Infrastruktur',
+  description: 'Beschreibung',
+}
+
+function getFieldValue(property: Property, key: ReportObjectFieldKey): string | null {
+  switch (key) {
+    case 'areaSqm': return property.areaSqm ? `${property.areaSqm.toLocaleString('de-CH')} m²` : null
+    case 'rentPricePerSqm': return property.rentPricePerSqm ? `CHF ${property.rentPricePerSqm}/m²/J` : null
+    case 'availabilityDate': return property.availabilityDate ? new Date(property.availabilityDate).toLocaleDateString('de-CH') : null
+    case 'leaseTerm': return property.leaseTerm ?? null
+    case 'breakoutOption': return property.breakoutOption != null ? (property.breakoutOption ? 'Ja' : 'Nein') : null
+    case 'currentTenant': return property.currentTenant ?? null
+    case 'propertyNumber': return property.propertyNumber ?? null
+    case 'assetType': return property.assetType ?? null
+    case 'floor': return property.floorLevel != null ? String(property.floorLevel) : null
+    case 'parking': return property.softFactors?.parkingSpots != null ? `${property.softFactors.parkingSpots} Pl.` : null
+    case 'ceilingHeightM': return property.hardFacts?.ceilingHeightM != null ? `${property.hardFacts.ceilingHeightM} m` : null
+    case 'loadingDocksCount': return property.hardFacts?.loadingDocksCount != null ? String(property.hardFacts.loadingDocksCount) : null
+    case 'powerSupplyKva': return property.hardFacts?.powerSupplyKva != null ? `${property.hardFacts.powerSupplyKva} kVA` : null
+    case 'hasServerRoom': return property.hardFacts?.hasServerRoom != null ? (property.hardFacts.hasServerRoom ? 'Ja' : 'Nein') : null
+    case 'isBarrierFree': return property.hardFacts?.isBarrierFree != null ? (property.hardFacts.isBarrierFree ? 'Ja' : 'Nein') : null
+    case 'fitOut': return property.hardFacts?.fitOut ?? null
+    case 'publicTransportScore': return property.softFactors?.publicTransportMinutes != null ? `${property.softFactors.publicTransportMinutes} Min.` : null
+    case 'prestigeScore': return property.softFactors?.prestige != null ? `${property.softFactors.prestige}/100` : null
+    case 'visibilityScore': return property.softFactors?.visibilityScore != null ? `${property.softFactors.visibilityScore}/100` : null
+    case 'description': return property.description ?? null
+    default: return null
+  }
+}
+
+export function MockPdfPreview({ fields, fallbackFields, fieldSelections }: MockPdfPreviewProps) {
  const needTitle = useOfferWizardStore(s => s.needTitle)
  const propertyIds = useOfferWizardStore(s => s.selectedPropertyIds)

  const properties = mockProperties.filter(p => propertyIds.includes(p.id))
+  const hasPropertyPage = fieldSelections.length > 0 && properties.length > 0

  const v = (id: string) => fields[id] ?? fallbackFields[id] ?? ''

@@ -29,6 +97,7 @@ export function MockPdfPreview({ fields, fallbackFields }: MockPdfPreviewProps)
        fontFamily: '"Georgia", "Times New Roman", serif',
      }}
    >
+      {/* ── Page 1 — Offer letter ── */}
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3, color: '#64748b' }}>
        <FileText size={16} />
        <Typography variant="caption" sx={{ textTransform: 'uppercase', letterSpacing: 1, fontSize: '0.7rem' }}>
@@ -90,6 +159,93 @@ export function MockPdfPreview({ fields, fallbackFields }: MockPdfPreviewProps)
      <Typography variant="body2" sx={{ fontSize: '0.875rem', whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>
        {v('closing')}
      </Typography>
+
+      {/* ── Page 2 — Property details side by side ── */}
+      {hasPropertyPage && (
+        <>
+          <Box sx={{ my: 3, display: 'flex', alignItems: 'center', gap: 1.5 }}>
+            <Divider sx={{ flex: 1, borderColor: '#1e3a5f', borderWidth: 1 }} />
+            <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.68rem', whiteSpace: 'nowrap', letterSpacing: 0.5, textTransform: 'uppercase' }}>
+              Seite 2 — Objektdetails
+            </Typography>
+            <Divider sx={{ flex: 1, borderColor: '#1e3a5f', borderWidth: 1 }} />
+          </Box>
+
+          <Box
+            sx={{
+              display: 'grid',
+              gridTemplateColumns: `repeat(${Math.min(properties.length, 3)}, 1fr)`,
+              gap: 1.5,
+            }}
+          >
+            {properties.map(p => {
+              const selection = fieldSelections.find(fs => fs.propertyId === p.id)
+              const optionalFields = selection?.selectedOptionalFields ?? []
+              const image = p.images?.[0]
+
+              return (
+                <Box
+                  key={p.id}
+                  sx={{
+                    border: '1px solid #e2e8f0',
+                    borderRadius: 1,
+                    overflow: 'hidden',
+                    display: 'flex',
+                    flexDirection: 'column',
+                  }}
+                >
+                  {/* Photo */}
+                  {image ? (
+                    <Box
+                      component="img"
+                      src={image}
+                      alt={p.title}
+                      sx={{ width: '100%', height: 90, objectFit: 'cover', display: 'block' }}
+                    />
+                  ) : (
+                    <Box sx={{ height: 90, bgcolor: '#f1f5f9', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                      <Building2 size={22} color="#94a3b8" />
+                    </Box>
+                  )}
+
+                  {/* Info */}
+                  <Box sx={{ p: 1.25, flex: 1 }}>
+                    <Typography sx={{ fontWeight: 700, fontSize: '0.78rem', color: '#0f172a', lineHeight: 1.3, mb: 0.4 }}>
+                      {p.title}
+                    </Typography>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.3, mb: 1 }}>
+                      <MapPin size={10} color="#94a3b8" />
+                      <Typography sx={{ fontSize: '0.68rem', color: '#64748b' }}>
+                        {p.location.city}{p.location.district ? ` · ${p.location.district}` : ''}
+                      </Typography>
+                    </Box>
+
+                    {/* Selected fields */}
+                    {optionalFields.length > 0 && (
+                      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.4 }}>
+                        {optionalFields.map(key => {
+                          const val = getFieldValue(p, key)
+                          if (!val) return null
+                          return (
+                            <Box key={key} sx={{ display: 'flex', justifyContent: 'space-between', gap: 0.5 }}>
+                              <Typography sx={{ fontSize: '0.62rem', color: '#94a3b8' }}>
+                                {FIELD_LABELS[key] ?? key}
+                              </Typography>
+                              <Typography sx={{ fontSize: '0.68rem', fontWeight: 600, color: '#0f172a', textAlign: 'right' }}>
+                                {val}
+                              </Typography>
+                            </Box>
+                          )
+                        })}
+                      </Box>
+                    )}
+                  </Box>
+                </Box>
+              )
+            })}
+          </Box>
+        </>
+      )}
    </Box>
  )
 }
@@ -0,0 +1,87 @@
+import { useEffect } from 'react'
+import { Box, Button, Stack, Typography } from '@mui/material'
+import { ArrowLeft } from 'lucide-react'
+import { useOfferWizardStore } from '../../stores/offerWizardStore'
+import { useProperties } from '../../hooks/useProperties'
+import { ReportObjectFieldSelector } from './ReportObjectFieldSelector'
+import type { ReportObjectFieldKey, ReportObjectFieldSelection } from '../../domain/inquiryReport'
+
+const DEFAULT_FIELDS: ReportObjectFieldKey[] = ['areaSqm', 'rentPricePerSqm', 'availabilityDate']
+const MANDATORY_FIELDS: ReportObjectFieldKey[] = ['title', 'location', 'mapImageUrl', 'images']
+
+export function OfferFieldSelectionStep() {
+  const propertyIds = useOfferWizardStore(s => s.selectedPropertyIds)
+  const fieldSelections = useOfferWizardStore(s => s.fieldSelections)
+  const setFieldSelections = useOfferWizardStore(s => s.setFieldSelections)
+  const updateFieldSelection = useOfferWizardStore(s => s.updateFieldSelection)
+  const setStep = useOfferWizardStore(s => s.setStep)
+
+  const { data: allProperties = [] } = useProperties()
+  const selectedProperties = allProperties.filter(p => propertyIds.includes(p.id))
+
+  // Initialise selections when properties are loaded or change
+  useEffect(() => {
+    if (selectedProperties.length === 0) return
+    const existing = new Set(fieldSelections.map(fs => fs.propertyId))
+    const missing = selectedProperties.filter(p => !existing.has(p.id))
+    if (missing.length > 0) {
+      setFieldSelections([
+        ...fieldSelections,
+        ...missing.map(p => ({
+          propertyId: p.id,
+          mandatoryFields: MANDATORY_FIELDS,
+          selectedOptionalFields: DEFAULT_FIELDS,
+        })),
+      ])
+    }
+  // run only when property list or selections change length
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedProperties.length, fieldSelections.length])
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
+      <Box sx={{ flex: 1, overflowY: 'auto', p: 3 }}>
+        <Typography variant="body2" sx={{ color: '#64748b', mb: 2.5 }}>
+          Wählen Sie die Datenfelder, die auf der Objektseite des Angebots angezeigt werden sollen.
+          Pflichtfelder (Titel, Standort, Foto) sind immer enthalten.
+        </Typography>
+
+        <Stack spacing={2}>
+          {selectedProperties.map(p => {
+            const selection: ReportObjectFieldSelection =
+              fieldSelections.find(fs => fs.propertyId === p.id) ?? {
+                propertyId: p.id,
+                mandatoryFields: MANDATORY_FIELDS,
+                selectedOptionalFields: DEFAULT_FIELDS,
+              }
+            return (
+              <ReportObjectFieldSelector
+                key={p.id}
+                propertyTitle={p.title}
+                value={selection}
+                onChange={v => updateFieldSelection(p.id, v)}
+              />
+            )
+          })}
+        </Stack>
+      </Box>
+
+      <Box sx={{ px: 3, py: 2, borderTop: '1px solid #e2e8f0', bgcolor: 'white', display: 'flex', justifyContent: 'space-between', flexShrink: 0 }}>
+        <Button
+          startIcon={<ArrowLeft size={14} />}
+          onClick={() => setStep('select_properties')}
+          sx={{ textTransform: 'none' }}
+        >
+          Zurück
+        </Button>
+        <Button
+          variant="contained"
+          onClick={() => setStep('pdf_review')}
+          sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+        >
+          Weiter
+        </Button>
+      </Box>
+    </Box>
+  )
+}
@@ -66,6 +66,8 @@ export function OfferPdfReviewStep() {
    }
  }

+  const fieldSelections = useOfferWizardStore(s => s.fieldSelections)
+
  const needTitle = useOfferWizardStore(s => s.needTitle)
  const addAttachment = useOfferWizardStore(s => s.addAttachment)
  const setMessageDraft = useOfferWizardStore(s => s.setMessageDraft)
@@ -128,7 +130,7 @@ export function OfferPdfReviewStep() {
              </Typography>
            </Box>
          ) : (
-            <MockPdfPreview fields={editableFieldsStore} fallbackFields={fallback} />
+            <MockPdfPreview fields={editableFieldsStore} fallbackFields={fallback} fieldSelections={fieldSelections} />
          )}
        </Box>

@@ -70,7 +70,7 @@ export function OfferPropertySelectionStep() {
      return
    }
    setOfferDraftId(res.data.id)
-    setStep('pdf_review')
+    setStep('select_fields')
  }

  if (!need) {
@@ -12,22 +12,25 @@ import {
 import { X } from 'lucide-react'
 import { useOfferWizardStore, type OfferStep } from '../../stores/offerWizardStore'
 import { OfferPropertySelectionStep } from './OfferPropertySelectionStep'
+import { OfferFieldSelectionStep } from './OfferFieldSelectionStep'
 import { OfferPdfReviewStep } from './OfferPdfReviewStep'
 import { OfferCheckedAction } from './OfferCheckedAction'
 import { OfferChatComposer } from './OfferChatComposer'

-// 'checked' is internal — merged into pdf_review step; only 3 steps shown
+// 'checked' is internal — merged into pdf_review step; 4 visible steps
 const STEPS: { key: OfferStep; label: string }[] = [
  { key: 'select_properties', label: 'Objekte wählen' },
+  { key: 'select_fields',     label: 'Felder wählen' },
  { key: 'pdf_review',        label: 'Vorschau & Prüfen' },
  { key: 'send',              label: 'Senden' },
 ]

 const STEP_DISPLAY_INDEX: Record<OfferStep, number> = {
  select_properties: 0,
-  pdf_review: 1,
-  checked: 1, // same visual step as pdf_review
-  send: 2,
+  select_fields: 1,
+  pdf_review: 2,
+  checked: 2, // same visual step as pdf_review
+  send: 3,
 }

 export function OfferWizard() {
@@ -114,6 +117,7 @@ export function OfferWizard() {
      {/* Step content */}
      <Box sx={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
        {currentStep === 'select_properties' && <OfferPropertySelectionStep />}
+        {currentStep === 'select_fields' && <OfferFieldSelectionStep />}
        {currentStep === 'pdf_review' && <OfferPdfReviewStep />}
        {currentStep === 'checked' && <OfferCheckedAction />}
        {currentStep === 'send' && <OfferChatComposer />}