feat: unit-level matching — each floor lettable independently or as bundle

- PropertyUnit: add isFlexible, minLettableSqm, offeredSqm fields
- New UnitBundle + UnitNeedMatch domain types
- unitMatchService: match individual units or bundles against LatentNeeds
  (exact, partial/Teilfläche, bundle match types with area scoring)
- Mock units updated: prop-001/007/012/013 free units flagged as flexible
  with minimum lettable areas
- UnitStructurePanel replaces old Stockwerkstruktur table:
  - Checkboxes on free units (when ≥2 exist) for bundle selection
  - Inline match pills per free unit (top need + score)
  - Expand row to see all matching needs with area details
  - 'Teilfläche möglich' chip for flexible units with min sqm
  - Bundle panel appears when 2+ units selected: shows combined sqm,
    bundle matches, and note about remaining area after contract

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/supply/PropertyDetailView.tsx

@@ -1,26 +1,30 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router'
 import {
   Alert,
   Box,
   Button,
+  Checkbox,
   Chip,
   CircularProgress,
+  Collapse,
   Divider,
   IconButton,
   LinearProgress,
   Tab,
   Tabs,
   TextField,
+  Tooltip,
   Typography,
 } from '@mui/material'
 import { useQueryClient } from '@tanstack/react-query'
-import { Edit2, Save, X } from 'lucide-react'
+import { ChevronDown, ChevronUp, Edit2, Layers, Save, Users, X } from 'lucide-react'
 import { useOfferWizardStore } from '../../stores/offerWizardStore'
 import { PropertyMap } from '../shared'
 import { NeedMatchCard } from './NeedMatchCard'
 import { PropertyMarketSignalsTab } from './PropertyMarketSignalsTab'
-import type { Property, PropertyUnit, UpdatePropertyInput } from '../../domain/property'
+import type { Property, PropertyUnit, UnitNeedMatch, UpdatePropertyInput } from '../../domain/property'
+import { unitMatchService } from '../../services/unitMatchService'
 import type { PropertyNeedMatch } from '../../domain/match'
 import { usePropertyById } from '../../hooks/useProperties'
 import { PropertyDetailSkeleton } from './PropertyDetailSkeleton'
@@ -75,6 +79,235 @@ function SectionTitle({ title }: { title: string }) {
   )
 }
 
+// ── Unit structure panel ──────────────────────────────────────────────────────
+
+function floorLabel(u: PropertyUnit): string {
+  if (u.floorLevel === 0) return 'EG'
+  if (u.floorLevel < 0) return `UG${Math.abs(u.floorLevel)}`
+  return `${u.floorLevel}.OG`
+}
+
+function MatchPill({ m }: { m: UnitNeedMatch }) {
+  const bg = m.matchScore >= 85 ? '#fef3c7' : '#e0e7ff'
+  const color = m.matchScore >= 85 ? '#92400e' : '#3730a3'
+  return (
+    <Tooltip title={`${m.requiredSqmMin}–${m.requiredSqmMax} m² · ${m.matchType === 'partial' ? `Teilfläche ~${m.suggestedSqm} m²` : m.matchType === 'bundle' ? 'Kombination' : 'Passt'}`}>
+      <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5, px: 0.75, py: 0.125, borderRadius: 1, bgcolor: bg, cursor: 'default' }}>
+        <Users size={10} color={color} />
+        <Typography sx={{ fontSize: '0.63rem', fontWeight: 700, color, lineHeight: 1 }}>
+          {m.tenantCompany ?? m.tenantName}
+        </Typography>
+        <Typography sx={{ fontSize: '0.63rem', color, lineHeight: 1 }}>{m.matchScore}%</Typography>
+      </Box>
+    </Tooltip>
+  )
+}
+
+function UnitStructurePanel({ p }: { p: Property }) {
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
+  const [expandedUnit, setExpandedUnit] = useState<string | null>(null)
+
+  const freeUnits = useMemo(() => (p.units ?? []).filter(u => u.available), [p.units])
+
+  const unitMatches = useMemo(() =>
+    Object.fromEntries(freeUnits.map(u => [u.id, unitMatchService.getMatchesForUnit(u, p)])),
+    [freeUnits, p],
+  )
+
+  const selectedFreeUnits = freeUnits.filter(u => selectedIds.has(u.id))
+  const bundle = selectedFreeUnits.length >= 2 ? unitMatchService.buildBundle(selectedFreeUnits) : null
+  const bundleMatches = useMemo(() =>
+    selectedFreeUnits.length >= 2 ? unitMatchService.getMatchesForBundle(selectedFreeUnits, p) : [],
+    [selectedFreeUnits, p],
+  )
+
+  const toggleUnit = (id: string) => {
+    setSelectedIds(prev => {
+      const next = new Set(prev)
+      next.has(id) ? next.delete(id) : next.add(id)
+      return next
+    })
+  }
+
+  if (!p.units || p.units.length === 0) return null
+
+  return (
+    <>
+      <Divider sx={{ my: 2 }} />
+      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
+        <Typography variant="body2" sx={{ fontWeight: 700, color: '#0f172a', fontSize: '0.8125rem' }}>
+          Stockwerkstruktur
+        </Typography>
+        {freeUnits.length >= 2 && (
+          <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.7rem' }}>
+            Freie Einheiten auswählen zum Kombinieren
+          </Typography>
+        )}
+      </Box>
+
+      <Box sx={{ border: '1px solid #e2e8f0', borderRadius: 1.5, overflow: 'hidden', mb: 1.5 }}>
+        {/* Header */}
+        <Box sx={{ display: 'grid', gridTemplateColumns: '28px 72px 88px 1fr auto 80px', bgcolor: '#f8fafc', px: 1.5, py: 0.75, borderBottom: '1px solid #e2e8f0', alignItems: 'center' }}>
+          {['', 'Stockwerk', 'Einheit', 'Mieter / Status', 'Matches', 'Fläche'].map(h => (
+            <Typography key={h} variant="caption" sx={{ fontWeight: 600, color: '#64748b', fontSize: '0.63rem', textTransform: 'uppercase' }}>{h}</Typography>
+          ))}
+        </Box>
+
+        {p.units!.map((u: PropertyUnit, i: number) => {
+          const matches = u.available ? (unitMatches[u.id] ?? []) : []
+          const topMatch = matches[0]
+          const isExpanded = expandedUnit === u.id
+          const isSelected = selectedIds.has(u.id)
+          const isLastRow = i === p.units!.length - 1 && !isExpanded
+
+          return (
+            <Box key={u.id}>
+              <Box
+                sx={{
+                  display: 'grid',
+                  gridTemplateColumns: '28px 72px 88px 1fr auto 80px',
+                  px: 1.5,
+                  py: 0.875,
+                  borderBottom: isLastRow ? 'none' : '1px solid #f1f5f9',
+                  alignItems: 'center',
+                  bgcolor: isSelected ? '#eff6ff' : 'transparent',
+                  transition: 'background 0.15s',
+                }}
+              >
+                {/* Checkbox — only for free units */}
+                <Box>
+                  {u.available && freeUnits.length >= 2 && (
+                    <Checkbox
+                      size="small"
+                      checked={isSelected}
+                      onChange={() => toggleUnit(u.id)}
+                      sx={{ p: 0, color: '#94a3b8', '&.Mui-checked': { color: '#2563eb' } }}
+                    />
+                  )}
+                </Box>
+
+                {/* Floor */}
+                <Typography variant="caption" sx={{ fontWeight: 600, color: '#0f172a' }}>
+                  {floorLabel(u)}
+                </Typography>
+
+                {/* Unit label */}
+                <Typography variant="caption" sx={{ color: '#374151' }}>{u.unitLabel ?? '–'}</Typography>
+
+                {/* Status */}
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, flexWrap: 'wrap' }}>
+                  {u.available ? (
+                    <>
+                      <Chip label="Frei" size="small" sx={{ height: 16, fontSize: '0.6rem', bgcolor: '#f0fdf4', color: '#166534', border: '1px solid #bbf7d0' }} />
+                      {u.isFlexible && (
+                        <Chip label="Teilfläche möglich" size="small" sx={{ height: 16, fontSize: '0.58rem', bgcolor: '#eff6ff', color: '#1d4ed8', border: '1px solid #bfdbfe' }} />
+                      )}
+                    </>
+                  ) : (
+                    <Typography variant="caption" sx={{ color: '#64748b' }} noWrap>{u.currentTenant ?? 'Vermietet'}</Typography>
+                  )}
+                </Box>
+
+                {/* Top match pill + expand */}
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                  {topMatch && <MatchPill m={topMatch} />}
+                  {matches.length > 1 && (
+                    <IconButton
+                      size="small"
+                      onClick={() => setExpandedUnit(isExpanded ? null : u.id)}
+                      sx={{ p: 0.25, color: '#94a3b8' }}
+                    >
+                      {isExpanded ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
+                    </IconButton>
+                  )}
+                </Box>
+
+                {/* Area */}
+                <Box sx={{ textAlign: 'right' }}>
+                  <Typography variant="caption" sx={{ color: '#374151', fontWeight: u.available ? 600 : 400 }}>
+                    {(u.offeredSqm ?? u.areaSqm).toLocaleString('de-CH')} m²
+                  </Typography>
+                  {u.isFlexible && u.minLettableSqm && (
+                    <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.6rem', display: 'block' }}>
+                      ab {u.minLettableSqm} m²
+                    </Typography>
+                  )}
+                </Box>
+              </Box>
+
+              {/* Expanded: show all matches for this unit */}
+              <Collapse in={isExpanded}>
+                <Box sx={{ px: 2, py: 1, bgcolor: '#f8fafc', borderBottom: i < p.units!.length - 1 ? '1px solid #e2e8f0' : 'none' }}>
+                  <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', fontSize: '0.65rem', textTransform: 'uppercase', display: 'block', mb: 0.75 }}>
+                    Passende Suchanfragen für diese Einheit
+                  </Typography>
+                  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+                    {matches.map(m => (
+                      <Box key={m.needId} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                        <MatchPill m={m} />
+                        <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.68rem' }}>
+                          {m.requiredSqmMin}–{m.requiredSqmMax} m²
+                          {m.matchType === 'partial' && m.suggestedSqm && ` · Teilfläche ~${m.suggestedSqm} m² anbieten`}
+                        </Typography>
+                      </Box>
+                    ))}
+                    {matches.length === 0 && (
+                      <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.7rem' }}>Keine passenden Suchanfragen</Typography>
+                    )}
+                  </Box>
+                </Box>
+              </Collapse>
+            </Box>
+          )
+        })}
+      </Box>
+
+      {/* Bundle panel */}
+      {bundle && (
+        <Box
+          sx={{
+            border: '1px solid #bfdbfe',
+            borderRadius: 1.5,
+            bgcolor: '#eff6ff',
+            p: 1.5,
+            mb: 1.5,
+          }}
+        >
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
+            <Layers size={14} color="#1d4ed8" />
+            <Typography variant="body2" sx={{ fontWeight: 700, color: '#1d4ed8', fontSize: '0.8125rem' }}>
+              Kombination: {bundle.label}
+            </Typography>
+            <Chip
+              label={`${bundle.combinedSqm.toLocaleString('de-CH')} m² gesamt`}
+              size="small"
+              sx={{ bgcolor: '#dbeafe', color: '#1e40af', border: '1px solid #93c5fd', height: 18, fontSize: '0.65rem', ml: 'auto' }}
+            />
+          </Box>
+          <Typography variant="caption" sx={{ color: '#1e40af', fontSize: '0.72rem', display: 'block', mb: 1 }}>
+            Diese Einheiten können gemeinsam oder separat vermietet werden.
+            {selectedFreeUnits.some(u => u.isFlexible) && ' Flexible Teilflächen möglich — Restfläche bleibt nach Vertragsabschluss verfügbar.'}
+          </Typography>
+          {bundleMatches.length > 0 ? (
+            <Box>
+              <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', fontSize: '0.63rem', textTransform: 'uppercase', display: 'block', mb: 0.5 }}>
+                Passende Suchanfragen für Kombination
+              </Typography>
+              <Box sx={{ display: 'flex', gap: 0.75, flexWrap: 'wrap' }}>
+                {bundleMatches.map(m => <MatchPill key={m.needId} m={m} />)}
+              </Box>
+            </Box>
+          ) : (
+            <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.7rem' }}>
+              Keine direkt passenden Suchanfragen für diese Kombination
+            </Typography>
+          )}
+        </Box>
+      )}
+    </>
+  )
+}
+
 // ── Übersicht tab ─────────────────────────────────────────────────────────────
 
 interface OverviewPanelProps {
@@ -183,36 +416,7 @@ function OverviewPanel({ p, editing, draft, onDraftChange }: OverviewPanelProps)
       )}
 
       {/* 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>
-        </>
-      )}
+      <UnitStructurePanel p={p} />
 
       <Divider sx={{ my: 2 }} />