feat: role-aware UX, market intelligence, score fix & layout scroll

- Role-based workspace access: Property Manager gets Supply+Demand, Operations restricted to Super Admin + Reviewer only - Root redirect routes each persona to their first workspace - Match Center: replaced 3-panel with auto-sorted flat list + drawer - AI Search: unified form with dual-action (Jetzt suchen / Als Suchprofil speichern) - CompareTray hidden on non-Demand routes; Vergleichen removed from Supply - LocationIntelligencePanel: city KPIs, rent trends, soft factors, comparables - NegotiationInsightsPanel: price positioning, active demand, selling arguments - scoreCalculator: cap hardMatchScore and softFactorScore to max 100 - Layout: add display:flex to overflow:hidden wrappers so inner scroll works (MatchCenter drawer, MarketIntelligence, SourceMonitoring, SignalPipeline) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-17 00:58:10 +02:00
parent e13fe470fb
commit efc406ace9
37 changed files with 4871 additions and 459 deletions
@@ -1,108 +1,155 @@
-import { Box, Button, Card, Chip, TextField, Typography, Stack } from '@mui/material'
-import { Sparkles, RotateCcw } from 'lucide-react'
+import { useState } from 'react'
+import { Box, Card, Chip, Stack, TextField, Typography } from '@mui/material'
+import type { ParsedNeedCriteria } from '../../domain/needBuilder'
 import { AssetType } from '../../domain/enums'

 interface Props {
-  value: string
-  onChange: (v: string) => void
-  onSubmit: () => void
+  criteria: ParsedNeedCriteria
+  onCriteriaChange: (c: ParsedNeedCriteria) => void
 }

-const EXAMPLES: Record<string, string> = {
-  Büro: 'Wir suchen 800–1.000 m² Bürofläche in Zürich-West, verfügbar ab September 2025, Budget max. 45 CHF/m². Wichtig: gute ÖV-Anbindung, moderne Infrastruktur.',
-  Retail: 'Suche Ladenfläche 200–400 m² in Bern Innenstadt, hohe Passantenfrequenz, Erdgeschoss, max. CHF 150/m². Sofort verfügbar.',
-  Logistik: 'Lagerhalle 2.000–3.000 m² Basel Umgebung, Tiefgarage oder Aussenrampe, 12 m Deckenhöhe, sofort. Budget CHF 15/m².',
-}
-
-const ASSET_TYPE_OPTIONS: Array<{ label: string; value: string }> = [
+const ASSET_OPTIONS = [
  { label: 'Büro', value: AssetType.OFFICE },
  { label: 'Retail', value: AssetType.RETAIL },
  { label: 'Logistik', value: AssetType.LOGISTICS },
  { label: 'Produktion', value: AssetType.PRODUCTION },
  { label: 'Light Industrial', value: AssetType.LIGHT_INDUSTRIAL },
+  { label: 'Gemischt', value: AssetType.MIXED },
 ]

-export function NeedInput({ value, onChange, onSubmit }: Props) {
+function FieldLabel({ children }: { children: React.ReactNode }) {
  return (
-    <Box sx={{ maxWidth: 720, mx: 'auto' }}>
-      <Card sx={{ p: 3, mb: 2 }}>
-        <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 0.5 }}>
-          Flächenbedarf beschreiben
-        </Typography>
-        <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 2 }}>
-          Beschreiben Sie Typ, Fläche, Standort, Budget und Verfügbarkeit — die KI extrahiert die Kriterien automatisch.
-        </Typography>
+    <Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600, display: 'block', mb: 0.75 }}>
+      {children}
+    </Typography>
+  )
+}

-        <TextField
-          multiline
-          rows={5}
-          fullWidth
-          placeholder="Beispiel: Wir suchen 800–1.000 m² Bürofläche in Zürich-West, verfügbar ab September 2025, Budget max. 45 CHF/m². Wichtig: gute ÖV-Anbindung, moderne Infrastruktur."
-          value={value}
-          onChange={e => onChange(e.target.value)}
-          slotProps={{ htmlInput: { maxLength: 2000 } }}
-          sx={{ mb: 1 }}
-        />
-        <Typography variant="caption" color="text.secondary" sx={{ display: 'block', textAlign: 'right', mb: 2 }}>
-          {value.length}/2000
-        </Typography>
+export function NeedInput({ criteria: c, onCriteriaChange: set }: Props) {
+  const [locationDraft, setLocationDraft] = useState('')
+  const [mustHaveDraft, setMustHaveDraft] = useState('')

-        <Box sx={{ display: 'flex', gap: 1 }}>
-          <Button
-            variant="contained"
-            fullWidth
-            disabled={value.length < 20}
-            onClick={onSubmit}
-            endIcon={<Sparkles size={16} />}
-            sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }}
-          >
-            KI-Analyse starten
-          </Button>
-          <Button
-            variant="outlined"
-            onClick={() => onChange('')}
-            startIcon={<RotateCcw size={16} />}
-            sx={{ flexShrink: 0 }}
-          >
-            Reset
-          </Button>
-        </Box>
-      </Card>
+  function addLocations(raw: string) {
+    const tokens = raw.split(',').map(x => x.trim()).filter(Boolean)
+    if (!tokens.length) return
+    set({ ...c, preferredLocations: [...new Set([...(c.preferredLocations ?? []), ...tokens])] })
+    setLocationDraft('')
+  }

-      {/* Asset-Type Quick Select */}
-      <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5 }}>
-        Schnellauswahl Nutzungstyp:
+  function addMustHaves(raw: string) {
+    const tokens = raw.split(',').map(x => x.trim()).filter(Boolean)
+    if (!tokens.length) return
+    set({ ...c, mustHaveCriteria: [...new Set([...(c.mustHaveCriteria ?? []), ...tokens])] })
+    setMustHaveDraft('')
+  }
+
+  return (
+    <Card elevation={0} sx={{ p: 3, border: '1px solid #e2e8f0', height: '100%' }}>
+      <Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 0.5 }}>Kriterien verfeinern</Typography>
+      <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 2.5 }}>
+        Ergänzen oder korrigieren Sie die extrahierten Felder.
      </Typography>
-      <Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5, mb: 2 }}>
-        {ASSET_TYPE_OPTIONS.map(opt => (
+
+      {/* Asset Type */}
+      <FieldLabel>Nutzungstyp</FieldLabel>
+      <Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5, mb: 2.5 }}>
+        {ASSET_OPTIONS.map(opt => (
          <Chip
            key={opt.value}
            label={opt.label}
            size="small"
-            variant="outlined"
+            variant={c.assetType === opt.value ? 'filled' : 'outlined'}
            clickable
-            onClick={() => onChange(EXAMPLES[opt.label] ?? value)}
+            onClick={() => set({ ...c, assetType: c.assetType === opt.value ? undefined : opt.value })}
+            sx={c.assetType === opt.value
+              ? { bgcolor: '#1e3a5f', color: 'white', '& .MuiChip-label': { color: 'white' } }
+              : {}}
          />
        ))}
      </Stack>

-      {/* Example prompts */}
-      <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5 }}>
-        Beispiele:
-      </Typography>
-      <Stack spacing={0.5}>
-        {Object.entries(EXAMPLES).map(([label, text]) => (
-          <Chip
-            key={label}
-            label={`${label}: ${text.slice(0, 60)}…`}
-            size="small"
-            variant="outlined"
-            clickable
-            onClick={() => onChange(text)}
-            sx={{ height: 'auto', py: 0.5, '& .MuiChip-label': { whiteSpace: 'normal' } }}
-          />
-        ))}
-      </Stack>
-    </Box>
+      {/* Area */}
+      <FieldLabel>Fläche (m²)</FieldLabel>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2.5 }}>
+        <TextField
+          size="small" type="number" placeholder="Min"
+          value={c.areaRange?.min || ''}
+          onChange={e => set({ ...c, areaRange: { min: parseInt(e.target.value) || 0, max: c.areaRange?.max ?? 0 } })}
+          sx={{ width: 100 }}
+          slotProps={{ htmlInput: { min: 0 } }}
+        />
+        <Typography variant="body2" color="text.secondary">–</Typography>
+        <TextField
+          size="small" type="number" placeholder="Max"
+          value={c.areaRange?.max || ''}
+          onChange={e => set({ ...c, areaRange: { min: c.areaRange?.min ?? 0, max: parseInt(e.target.value) || 0 } })}
+          sx={{ width: 100 }}
+          slotProps={{ htmlInput: { min: 0 } }}
+        />
+        <Typography variant="caption" color="text.secondary">m²</Typography>
+      </Box>
+
+      {/* Location */}
+      <FieldLabel>Standort</FieldLabel>
+      <TextField
+        size="small" fullWidth
+        placeholder="Stadt oder Region — Enter zum Hinzufügen"
+        value={locationDraft}
+        onChange={e => setLocationDraft(e.target.value)}
+        onKeyDown={e => { if (e.key === 'Enter' && locationDraft.trim()) addLocations(locationDraft) }}
+        onBlur={() => { if (locationDraft.trim()) addLocations(locationDraft) }}
+        sx={{ mb: 0.75 }}
+      />
+      {(c.preferredLocations?.length ?? 0) > 0 ? (
+        <Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5, mb: 2.5 }}>
+          {c.preferredLocations!.map(loc => (
+            <Chip key={loc} label={loc} size="small"
+              onDelete={() => set({ ...c, preferredLocations: c.preferredLocations!.filter(l => l !== loc) })}
+            />
+          ))}
+        </Stack>
+      ) : <Box sx={{ mb: 2.5 }} />}
+
+      {/* Budget */}
+      <FieldLabel>Budget (max CHF/m²)</FieldLabel>
+      <TextField
+        size="small" type="number" placeholder="z.B. 45"
+        value={c.budgetRange?.maxPerSqm || ''}
+        onChange={e => set({ ...c, budgetRange: { maxPerSqm: parseInt(e.target.value) || 0, currency: 'CHF' } })}
+        sx={{ width: 160, mb: 2.5 }}
+        slotProps={{ htmlInput: { min: 0 } }}
+      />
+
+      {/* Timing */}
+      <FieldLabel>Verfügbar ab</FieldLabel>
+      <TextField
+        size="small"
+        placeholder="z.B. Q3 2025 oder 01.09.2025"
+        value={c.timing?.earliestMoveIn ?? ''}
+        onChange={e => set({ ...c, timing: { earliestMoveIn: e.target.value, latestMoveIn: e.target.value, flexibleTiming: true } })}
+        sx={{ width: 220, mb: 2.5 }}
+      />
+
+      {/* Must-haves */}
+      <FieldLabel>Must-haves</FieldLabel>
+      <TextField
+        size="small" fullWidth
+        placeholder="z.B. ÖV-Anbindung, Parkplätze — Enter zum Hinzufügen"
+        value={mustHaveDraft}
+        onChange={e => setMustHaveDraft(e.target.value)}
+        onKeyDown={e => { if (e.key === 'Enter' && mustHaveDraft.trim()) addMustHaves(mustHaveDraft) }}
+        onBlur={() => { if (mustHaveDraft.trim()) addMustHaves(mustHaveDraft) }}
+        sx={{ mb: 0.75 }}
+      />
+      {(c.mustHaveCriteria?.length ?? 0) > 0 && (
+        <Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5 }}>
+          {c.mustHaveCriteria!.map(item => (
+            <Chip key={item} label={item} size="small"
+              onDelete={() => set({ ...c, mustHaveCriteria: c.mustHaveCriteria!.filter(m => m !== item) })}
+            />
+          ))}
+        </Stack>
+      )}
+    </Card>
  )
 }