johannes.gasser/property-match
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: BerichtDialog, images, and add property number + floor/unit structure

Browse Source 
- BerichtDialog: conditionally mount instead of always-mounted with
  open prop; starts in 'generating' state immediately on open
- Images: fix all 6 wrong VERIFIED_PORTFOLIO and EXTERNAL_MARKET photos
  to match spec per assetType (OFFICE/RETAIL/LOGISTICS/PRODUCTION/MIXED)
- Domain: add PropertyUnit interface + propertyNumber field to Property
- Mock data: propertyNumber + units[] for prop-001/007/012/013
- UI: Stockwerkstruktur section in Übersicht tab (floor/unit table with
  availability, tenant, area); Objekt-Nr. shown below key metrics

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
2026-05-19 16:14:22 +02:00
parent 0651333030
commit 7800d127fe
4 changed files with 104 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/supply/PropertyDetailView.tsx
+40 -2
View File
@@ -20,7 +20,7 @@ import { useOfferWizardStore } from '../../stores/offerWizardStore'
import { PropertyMap } from '../shared'
import { NeedMatchCard } from './NeedMatchCard'
import { PropertyMarketSignalsTab } from './PropertyMarketSignalsTab'
import type { Property, UpdatePropertyInput } from '../../domain/property'
import type { Property, PropertyUnit, UpdatePropertyInput } from '../../domain/property'
import type { PropertyNeedMatch } from '../../domain/match'
import { usePropertyById } from '../../hooks/useProperties'
import { PropertyDetailSkeleton } from './PropertyDetailSkeleton'
@@ -90,7 +90,7 @@ function OverviewPanel({ p, editing, draft, onDraftChange }: OverviewPanelProps)
return (
<Box>
{/* Key metrics */}
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1.5, mb: 2.5 }}>
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1.5, mb: 0.75 }}>
{[
{ label: 'Fläche', value: `${p.areaSqm.toLocaleString('de-CH')} m²` },
{ label: 'CHF/m²/Jahr', value: rentLabel },
@@ -104,6 +104,11 @@ function OverviewPanel({ p, editing, draft, onDraftChange }: OverviewPanelProps)
</Box>
))}
</Box>
{p.propertyNumber && (
<Typography variant="caption" sx={{ color: '#94a3b8', mb: 2, display: 'block' }}>
Objekt-Nr. {p.propertyNumber}
</Typography>
)}
{/* Description */}
{editing ? (
@@ -177,11 +182,44 @@ function OverviewPanel({ p, editing, draft, onDraftChange }: OverviewPanelProps)
</FieldGrid>
)}
{/* Floor / unit structure */}
{p.units && p.units.length > 0 && (
<>
<Divider sx={{ my: 2 }} />
<SectionTitle title="Stockwerkstruktur" />
<Box sx={{ border: '1px solid #e2e8f0', borderRadius: 1.5, overflow: 'hidden', mb: 2 }}>
{/* header */}
<Box sx={{ display: 'grid', gridTemplateColumns: '80px 90px 1fr 90px', bgcolor: '#f8fafc', px: 1.5, py: 0.75, borderBottom: '1px solid #e2e8f0' }}>
{['Stockwerk', 'Einheit', 'Mieter / Status', 'Fläche'].map(h => (
<Typography key={h} variant="caption" sx={{ fontWeight: 600, color: '#64748b', fontSize: '0.65rem', textTransform: 'uppercase' }}>{h}</Typography>
))}
</Box>
{p.units.map((u: PropertyUnit, i: number) => (
<Box key={u.id} sx={{ display: 'grid', gridTemplateColumns: '80px 90px 1fr 90px', px: 1.5, py: 0.875, borderBottom: i < p.units!.length - 1 ? '1px solid #f1f5f9' : 'none', alignItems: 'center' }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#0f172a' }}>
{u.floorLevel === 0 ? 'EG' : u.floorLevel < 0 ? `UG${Math.abs(u.floorLevel)}` : `${u.floorLevel}.OG`}
</Typography>
<Typography variant="caption" sx={{ color: '#374151' }}>{u.unitLabel ?? '–'}</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
{u.available ? (
<Chip label="Frei" size="small" sx={{ height: 16, fontSize: '0.6rem', bgcolor: '#f0fdf4', color: '#166534', border: '1px solid #bbf7d0' }} />
) : (
<Typography variant="caption" sx={{ color: '#64748b' }} noWrap>{u.currentTenant ?? 'Vermietet'}</Typography>
)}
</Box>
<Typography variant="caption" sx={{ color: '#374151', textAlign: 'right' }}>{u.areaSqm.toLocaleString('de-CH')} m²</Typography>
</Box>
))}
</Box>
</>
)}
<Divider sx={{ my: 2 }} />
{/* Object details */}
<SectionTitle title="Objekt & Lage" />
<FieldGrid>
{p.propertyNumber && <Field label="Objekt-Nr." value={p.propertyNumber} />}
<Field label="Objekttyp" value={getAssetTypeLabel(p.assetType)} />
<Field label="Etage" value={p.hardFacts?.floor ?? p.floorLevel} />
<Field label="Ausbaustandard" value={p.hardFacts?.fitOut} />
src/components/supply/PropertyMarketSignalsTab.tsx
+12 -15
View File
@@ -98,33 +98,29 @@ function SignalCard({ signal }: { signal: PropertyMarketSignal }) {
type PdfState = 'idle' | 'generating' | 'ready'
interface BerichtDialogProps {
open: boolean
onClose: () => void
report: MarketReport | null
propertyId: string
}
function BerichtDialog({ open, onClose, report, propertyId }: BerichtDialogProps) {
const [state, setState] = useState<PdfState>('idle')
function BerichtDialog({ onClose, report, propertyId }: Omit<BerichtDialogProps, 'open'>) {
const [state, setState] = useState<PdfState>('generating')
const [progress, setProgress] = useState(0)
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
useEffect(() => {
if (!open) { setState('idle'); setProgress(0); return }
setState('generating')
setProgress(0)
let p = 0
timerRef.current = setInterval(() => {
p += Math.random() * 18 + 8
if (p >= 100) {
p = 100
clearInterval(timerRef.current!)
setTimeout(() => setState('ready'), 300)
setState('ready')
}
setProgress(Math.min(100, p))
}, 200)
return () => { if (timerRef.current) clearInterval(timerRef.current) }
}, [open])
}, [])
function handleDownload() {
const signals = report?.signals ?? []
@@ -152,7 +148,7 @@ function BerichtDialog({ open, onClose, report, propertyId }: BerichtDialogProps
}
return (
<Dialog open={open} onClose={state === 'generating' ? undefined : onClose} maxWidth="xs" fullWidth>
<Dialog open onClose={state === 'generating' ? undefined : onClose} maxWidth="xs" fullWidth>
<DialogTitle sx={{ fontWeight: 700, fontSize: '1rem', pb: 1 }}>
Bericht erstellen
</DialogTitle>
@@ -289,12 +285,13 @@ export function PropertyMarketSignalsTab({ propertyId }: Props) {
})
)}
<BerichtDialog
open={dialogOpen}
onClose={() => setDialogOpen(false)}
report={report}
propertyId={propertyId}
/>
{dialogOpen && (
<BerichtDialog
onClose={() => setDialogOpen(false)}
report={report}
propertyId={propertyId}
/>
)}
</Box>
)
}