refactor: premium design polish — cards, results, grid view

- PropertyIntelligenceCard: aspect-ratio image, hover animation, compact data-completeness row, tighter body padding - Results: replace verbose Card with compact active-search strip, remove DecisionContextPanel - Properties: add 3/5/10 column toggle in grid view, persist to localStorage - NeedInput, UnifiedResultCard/Feed, MatchCardViewModel: cleanup from earlier session Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-11 00:06:23 +02:00
parent 6e67c698ce
commit beecf754d5
7 changed files with 94 additions and 177 deletions
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Box, Card, Chip, FormControlLabel, Slider, Stack, Switch, TextField, Typography } from '@mui/material'
+import { Box, Card, Chip, Slider, Stack, TextField, Typography } from '@mui/material'
 import type { ParsedNeedCriteria } from '../../domain/needBuilder'
 import { AssetType } from '../../domain/enums'
 import { NeedExtendedRequirements } from './NeedExtendedRequirements'
@@ -242,31 +242,7 @@ export function NeedInput({ criteria: c, onCriteriaChange: set }: Props) {
        </Stack>
      )}

-      {/* Anonymous search */}
-      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1, mt: 0.5, py: 1, px: 1.5, borderRadius: 1.5, bgcolor: c.isAnonymous ? 'rgba(124,58,237,0.07)' : '#f8fafc', border: `1px solid ${c.isAnonymous ? '#7c3aed' : '#e8e7e4'}` }}>
-        <Box>
-          <Typography variant="caption" sx={{ fontWeight: 700, color: c.isAnonymous ? '#7c3aed' : '#334155' }}>
-            Anonyme Suche
-          </Typography>
-          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', fontSize: '0.65rem' }}>
-            Firmenname wird nicht an Vermieter übermittelt
-          </Typography>
-        </Box>
-        <FormControlLabel
-          control={
-            <Switch
-              size="small"
-              checked={c.isAnonymous ?? false}
-              onChange={e => set({ ...c, isAnonymous: e.target.checked })}
-              sx={{ '& .MuiSwitch-thumb': { bgcolor: c.isAnonymous ? '#7c3aed' : undefined }, '& .Mui-checked + .MuiSwitch-track': { bgcolor: '#7c3aed' } }}
-            />
-          }
-          label=""
-          sx={{ m: 0 }}
-        />
-      </Box>
-
-      <NeedExtendedRequirements criteria={c} onChange={set} />
+<NeedExtendedRequirements criteria={c} onChange={set} />
    </Card>
  )
 }
@@ -86,6 +86,10 @@ export interface MatchCardViewModel {
  preMarketUnit?: PropertyUnit   // specific unit being released pre-market
  preMarketAllUnits?: PropertyUnit[] // all units of the backing property

+  // Key metrics for compact display (Ginesta-style metric line)
+  areaSqm?: number
+  rentPerSqm?: number
+
  // Score transparency
  scoreBreakdown?: {
    hardMatchScore: number
@@ -125,16 +125,6 @@ export function UnifiedResultCard({ result, view = 'list' }: Props) {
  const listImageUrl = result.resultType !== 'FUTURE_AVAILABILITY'
    ? result.property.images?.[0]
    : undefined
-  const listOverlay = result.resultType !== 'FUTURE_AVAILABILITY'
-    ? resolveImageLabel({
-        assetType: result.property.assetType,
-        city: result.property.location.city,
-        district: result.property.location.district,
-        prestige: result.property.softFactors?.prestige,
-        floorLevel: result.property.floorLevel,
-        propertyId: result.property.id,
-      })
-    : null

-  return <MatchCardCompact vm={vm} imageUrl={listImageUrl} overlayTypeLabel={listOverlay?.type} />
+  return <MatchCardCompact vm={vm} imageUrl={listImageUrl} />
 }
@@ -86,7 +86,7 @@ export function UnifiedResultFeed({ results, view = 'list' }: Props) {
        ))}
      </Box>
    ) : (
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        {items.map(result => (
          <UnifiedResultCard key={result.matchId} result={result} view="list" />
        ))}
@@ -43,19 +43,26 @@ export const PropertyIntelligenceCard = memo(function PropertyIntelligenceCard({
    <Box
      onClick={() => onSelect(p.id)}
      sx={{
-        borderRadius: 1,
+        borderRadius: 2,
        overflow: 'hidden',
        border: `1px solid ${DS_BORDER.default}`,
        bgcolor: '#ffffff',
        display: 'flex',
        flexDirection: 'column',
        cursor: 'pointer',
-        transition: 'border-color 0.15s',
-        '&:hover': { borderColor: '#c8c7c4' },
+        position: 'relative',
+        zIndex: 0,
+        transition: 'transform 0.18s ease, box-shadow 0.18s ease, border-color 0.15s',
+        '&:hover': {
+          borderColor: '#b0aead',
+          transform: 'scale(1.025)',
+          boxShadow: '0 10px 32px rgba(0,0,0,0.13)',
+          zIndex: 1,
+        },
      }}
    >
      {/* ── Image — clean, no text overlay ── */}
-      <Box sx={{ position: 'relative', height: 150, flexShrink: 0, bgcolor: '#f4f3f0', overflow: 'hidden' }}>
+      <Box sx={{ position: 'relative', aspectRatio: '3/2', flexShrink: 0, bgcolor: '#f4f3f0', overflow: 'hidden' }}>
        {hasImage ? (
          <Box component="img" src={p.images![0]} alt={p.title}
            sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
@@ -78,7 +85,7 @@ export const PropertyIntelligenceCard = memo(function PropertyIntelligenceCard({
      </Box>

      {/* ── Body ── */}
-      <Box sx={{ px: 1.75, pt: 1.5, pb: 1.75, display: 'flex', flexDirection: 'column', gap: 1.125, flex: 1 }}>
+      <Box sx={{ px: 2.25, pt: 1.75, pb: 2, display: 'flex', flexDirection: 'column', gap: 1.5, flex: 1 }}>

        {/* Title + location + status inline */}
        <Box>
@@ -130,36 +137,32 @@ export const PropertyIntelligenceCard = memo(function PropertyIntelligenceCard({
          </Tooltip>
        </Box>

-        {/* Property spec chips */}
-        <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
-          {p.hardFacts?.fitOut && (() => {
-            const meta = FIT_OUT_META[p.hardFacts!.fitOut!] ?? { label: p.hardFacts!.fitOut!, tip: '' }
-            return (
-              <Tooltip title={meta.tip} placement="top" arrow>
-                <Chip label={meta.label} size="small"
-                  sx={{ height: 20, fontSize: '0.68rem', bgcolor: '#f4f3f0', color: DS_TEXT.secondary, border: `1px solid ${DS_BORDER.default}`, cursor: 'help' }} />
-              </Tooltip>
-            )
-          })()}
-          {p.contractDurationMonths && (
-            <Chip label={`${p.contractDurationMonths}M Vertrag`} size="small"
-              sx={{ height: 20, fontSize: '0.68rem', bgcolor: '#f4f3f0', color: DS_TEXT.secondary, border: `1px solid ${DS_BORDER.default}` }} />
-          )}
-        </Box>
-
-        {/* Data completeness */}
-        <Box sx={{ mt: 'auto' }}>
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 0.5 }}>
-            <Typography sx={{ fontSize: '0.62rem', color: DS_TEXT.disabled, letterSpacing: '0.03em' }}>
-              Datenvollständigkeit
-            </Typography>
-            <Typography sx={{ fontSize: '0.75rem', fontWeight: 700, color: p.confidenceScore >= 0.75 ? '#b8975a' : DS_TEXT.muted }}>
+        {/* Chips + Datenvollständigkeit in einer Zeile */}
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1, mt: 'auto' }}>
+          <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', alignItems: 'center' }}>
+            {p.hardFacts?.fitOut && (() => {
+              const meta = FIT_OUT_META[p.hardFacts!.fitOut!] ?? { label: p.hardFacts!.fitOut!, tip: '' }
+              return (
+                <Tooltip title={meta.tip} placement="top" arrow>
+                  <Chip label={meta.label} size="small"
+                    sx={{ height: 20, fontSize: '0.68rem', bgcolor: '#f4f3f0', color: DS_TEXT.secondary, border: `1px solid ${DS_BORDER.default}`, cursor: 'help' }} />
+                </Tooltip>
+              )
+            })()}
+            {p.contractDurationMonths && (
+              <Chip label={`${p.contractDurationMonths}M Vertrag`} size="small"
+                sx={{ height: 20, fontSize: '0.68rem', bgcolor: '#f4f3f0', color: DS_TEXT.secondary, border: `1px solid ${DS_BORDER.default}` }} />
+            )}
+          </Box>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, flexShrink: 0 }}>
+            <Typography sx={{ fontSize: '0.62rem', color: DS_TEXT.disabled }}>Daten</Typography>
+            <LinearProgress variant="determinate" value={confPct}
+              sx={{ width: 40, height: 3, borderRadius: 1, bgcolor: '#f4f3f0',
+                '& .MuiLinearProgress-bar': { bgcolor: '#152642', borderRadius: 1 } }} />
+            <Typography sx={{ fontSize: '0.72rem', fontWeight: 700, color: p.confidenceScore >= 0.75 ? '#b8975a' : DS_TEXT.muted }}>
              {confPct}%
            </Typography>
          </Box>
-          <LinearProgress variant="determinate" value={confPct}
-            sx={{ height: 3, borderRadius: 1, bgcolor: '#f4f3f0',
-              '& .MuiLinearProgress-bar': { bgcolor: '#152642', borderRadius: 1 } }} />
        </Box>
      </Box>
    </Box>
@@ -1,11 +1,10 @@
 import { useState, useMemo, useEffect } from 'react'
-import { Box, Button, Card, Chip, Typography } from '@mui/material'
+import { Box, Button, Typography } from '@mui/material'
 import { Zap } from 'lucide-react'
 import { useNavigate, useLocation } from 'react-router'
 import { useQueryClient } from '@tanstack/react-query'
 import { useUnifiedResults } from '../../hooks/useUnifiedResults'
 import { useNeeds } from '../../hooks/useNeeds'
-import { DecisionContextPanel } from '../../components/ui'
 import {
  FeedEmptyState,
  FeedSkeleton,
@@ -72,16 +71,14 @@ export default function Results() {
  const isStaff = currentUser?.role === 'PROPERTY_MANAGER' || currentUser?.role === 'ORGANIZATION_ADMIN'

  // Counts over the full result set — single pass, stable across filter changes
-  const { platformCount, maisonWorkCount, futureCount, missingDataCount } = useMemo(() => {
-    let platform = 0, maison = 0, future = 0, missing = 0
+  const { platformCount, maisonWorkCount, futureCount } = useMemo(() => {
+    let platform = 0, maison = 0, future = 0
    for (const r of results) {
      if (r.resultType === 'VERIFIED_PORTFOLIO') platform++
      else if (r.resultType === 'MAISON_WORK') maison++
      else if (r.resultType === 'FUTURE_AVAILABILITY') future++
-      if ('match' in r && Array.isArray((r as { match?: { missingData?: unknown[] } }).match?.missingData) &&
-          ((r as { match?: { missingData?: unknown[] } }).match?.missingData?.length ?? 0) > 0) missing++
    }
-    return { platformCount: platform, maisonWorkCount: maison, futureCount: future, missingDataCount: missing }
+    return { platformCount: platform, maisonWorkCount: maison, futureCount: future }
  }, [results])

  // Filter + sort in one memo — only reruns when inputs change
@@ -98,7 +95,6 @@ export default function Results() {
    return sortResults(filtered, sortBy)
  }, [results, filterSource, sortBy, showFutureAvailability, showOwnProperties])

-  const strongCount = useMemo(() => sorted.filter(r => r.matchScore >= 80).length, [sorted])

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
@@ -113,103 +109,27 @@ export default function Results() {
        onViewChange={v => { setView(v); localStorage.setItem('view-results', v) }}
      />

-      {!isLoading && results.length > 0 && (
-        <DecisionContextPanel
-          decision="Welche Treffer lohnen sich für die Shortlist — und welche tragen Risiken, die zuerst geprüft werden müssen?"
-          context={activeNeed ? `Suche: ${activeNeed.assetType} · ${activeNeed.requiredArea.min}–${activeNeed.requiredArea.max} m² · ${activeNeed.preferredLocations.join(', ')}` : undefined}
-          metrics={[
-            ...(strongCount > 0 ? [{ label: 'starke Treffer (≥80)', value: strongCount, severity: 'positive' as const }] : []),
-            ...(maisonWorkCount > 0 ? [{ label: 'Maison Work', value: maisonWorkCount, severity: 'neutral' as const }] : []),
-            ...(futureCount > 0 ? [{ label: 'Zukunftssignale', value: futureCount, severity: 'neutral' as const }] : []),
-            ...(missingDataCount > 0 ? [{ label: 'mit Datenlücken', value: missingDataCount, severity: 'warning' as const }] : []),
-          ]}
-          risks={[
-            ...(missingDataCount > 0 ? [`${missingDataCount} Treffer mit fehlenden Daten — Einschätzung eingeschränkt`] : []),
-          ]}
-          actions={[
-            { label: 'Vergleich öffnen', onClick: () => navigate('/demand/compare') },
-            { label: 'Suche anpassen', onClick: () => navigate('/demand/ai-search') },
-          ]}
-        />
-      )}
-
      <Box sx={{ flex: 1, overflowY: 'auto', px: 3, py: 3, pb: 10 }}>
+
+        {/* Aktive Suche */}
        {activeNeed && (
-          <Card sx={{ bgcolor: '#eff6ff', p: 2, mb: 2, border: '1px solid #bfdbfe' }}>
-            <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2 }}>
-              <Box>
-                <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 0.5 }} color="#152642">
-                  Aktive Suche: {activeNeed.companyName}
-                </Typography>
-                <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: '4px 16px' }}>
-                  <Typography variant="caption" color="text.secondary">
-                    <strong>Typ:</strong> {activeNeed.assetType}
-                  </Typography>
-                  <Typography variant="caption" color="text.secondary">
-                    <strong>Fläche:</strong> {activeNeed.requiredArea.min}–{activeNeed.requiredArea.max} m²
-                  </Typography>
-                  <Typography variant="caption" color="text.secondary">
-                    <strong>Standort:</strong> {activeNeed.preferredLocations.join(', ')}
-                  </Typography>
-                  {activeNeed.budgetRange && activeNeed.budgetRange.maxPerSqm > 0 && (
-                    <Typography variant="caption" color="text.secondary">
-                      <strong>Budget:</strong> max. CHF {activeNeed.budgetRange.maxPerSqm}/m²/Jahr
-                    </Typography>
-                  )}
-                  {activeNeed.timing?.earliestMoveIn && !isNaN(new Date(activeNeed.timing.earliestMoveIn).getTime()) && (
-                    <Typography variant="caption" color="text.secondary">
-                      <strong>Bezug ab:</strong> {new Date(activeNeed.timing.earliestMoveIn).toLocaleDateString('de-CH', { month: 'long', year: 'numeric' })}
-                    </Typography>
-                  )}
-                  {activeNeed.searchRadius && (
-                    <Typography variant="caption" color="text.secondary">
-                      <strong>Radius:</strong> {activeNeed.searchRadius} km
-                    </Typography>
-                  )}
-                  {activeNeed.requiresDivisibility && activeNeed.minDivisibleUnit && (
-                    <Typography variant="caption" color="text.secondary">
-                      <strong>Teilbar ab:</strong> {activeNeed.minDivisibleUnit} m²
-                    </Typography>
-                  )}
-                  {activeNeed.requiredFitOut && (
-                    <Typography variant="caption" color="text.secondary">
-                      <strong>Ausbaustandard:</strong> min. {
-                        activeNeed.requiredFitOut === 'BASIC' ? 'Basisausbau' :
-                        activeNeed.requiredFitOut === 'FULL' ? 'Vollausbau' : 'Premiumausbau'
-                      }
-                    </Typography>
-                  )}
-                  {activeNeed.fitOutBudgetMaxPerSqm && (
-                    <Typography variant="caption" color="text.secondary">
-                      <strong>Ausbaubudget:</strong> max. CHF {activeNeed.fitOutBudgetMaxPerSqm}/m²
-                    </Typography>
-                  )}
-                  {activeNeed.mustCriteriaText && activeNeed.mustCriteriaText.length > 0 && (
-                    <Typography variant="caption" color="text.secondary">
-                      <strong>Must-haves:</strong> {activeNeed.mustCriteriaText.slice(0, 3).join(' · ')}
-                    </Typography>
-                  )}
-                </Box>
-              </Box>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }}>
-                {activeNeed.isAnonymous && (
-                  <Chip
-                    label="Anonyme Suche"
-                    size="small"
-                    sx={{ bgcolor: '#7c3aed', color: 'white', fontWeight: 700, fontSize: 10, height: 20 }}
-                  />
-                )}
-              <Button
-                size="small"
-                variant="text"
-                onClick={() => navigate('/demand/ai-search')}
-                sx={{ color: '#152642', flexShrink: 0 }}
-              >
-                Suche ändern
-              </Button>
-              </Box>
+          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2, bgcolor: '#eff6ff', border: '1px solid #bfdbfe', borderRadius: 1.5, px: 2, py: 1.25, mb: 2 }}>
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: '4px 16px', alignItems: 'center' }}>
+              <Typography variant="caption" sx={{ fontWeight: 700, color: '#152642' }}>
+                {activeNeed.companyName}
+              </Typography>
+              <Typography variant="caption" color="text.secondary">{activeNeed.assetType}</Typography>
+              <Typography variant="caption" color="text.secondary">{activeNeed.requiredArea.min}–{activeNeed.requiredArea.max} m²</Typography>
+              <Typography variant="caption" color="text.secondary">{activeNeed.preferredLocations.join(', ')}</Typography>
+              {activeNeed.budgetRange?.maxPerSqm > 0 && (
+                <Typography variant="caption" color="text.secondary">max. CHF {activeNeed.budgetRange.maxPerSqm}/m²/J</Typography>
+              )}
            </Box>
-          </Card>
+            <Button size="small" variant="text" onClick={() => navigate('/demand/ai-search')}
+              sx={{ color: '#152642', flexShrink: 0, textTransform: 'none', fontSize: '0.75rem' }}>
+              Suche ändern
+            </Button>
+          </Box>
        )}

        <ResultFilterBar
@@ -57,6 +57,9 @@ export default function Properties() {
  const [view, setView] = useState<'list' | 'grid'>(() =>
    (localStorage.getItem('view-properties') as 'list' | 'grid') ?? 'list'
  )
+  const [columns, setColumns] = useState<3 | 5 | 10>(() =>
+    (Number(localStorage.getItem('view-properties-cols')) as 3 | 5 | 10) || 3
+  )
  const [headerOpen, setHeaderOpen] = useState(() =>
    localStorage.getItem('props-header-open') !== 'false'
  )
@@ -109,10 +112,31 @@ export default function Properties() {
        title="Objektverwaltung"
        subtitle={`${filtered.length} von ${properties.length} Objekten`}
        secondaryActions={
-          <ViewToggle
-            view={view}
-            onChange={v => { setView(v); localStorage.setItem('view-properties', v) }}
-          />
+          <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+            {view === 'grid' && (
+              <Box sx={{ display: 'flex', border: '1px solid #e2e8f0', borderRadius: 1, overflow: 'hidden' }}>
+                {([3, 5, 10] as const).map(n => (
+                  <Box
+                    key={n}
+                    onClick={() => { setColumns(n); localStorage.setItem('view-properties-cols', String(n)) }}
+                    sx={{
+                      width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center',
+                      cursor: 'pointer', fontSize: '0.72rem', fontWeight: 600,
+                      bgcolor: columns === n ? '#152642' : 'transparent',
+                      color: columns === n ? 'white' : '#64748b',
+                      '&:hover': { bgcolor: columns === n ? '#162d4a' : '#f1f5f9' },
+                    }}
+                  >
+                    {n}
+                  </Box>
+                ))}
+              </Box>
+            )}
+            <ViewToggle
+              view={view}
+              onChange={v => { setView(v); localStorage.setItem('view-properties', v) }}
+            />
+          </Box>
        }
      />

@@ -201,7 +225,7 @@ export default function Properties() {

      <Box sx={{ flex: 1, overflowY: 'auto' }}>
        {view === 'grid' ? (
-          <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 2, p: 2.5 }}>
+          <Box sx={{ display: 'grid', gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: 3, p: 3 }}>
            {filtered.map(p => (
              <PropertyIntelligenceCard key={p.id} property={p} onSelect={setSelectedId} inquiryCount={inquiryCountByProperty.get(p.id) ?? 0} />
            ))}