feat: F015 shortlist management

3-panel Shortlists page with left list, center detail, right decision brief panel. AddToShortlistDialog wired into result feed cards and match detail. Full DRAFT→REVIEW_READY→FINALIZED workflow, AI-generated decision brief draft, duplicate prevention, and compare-view integration.

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

src/pages/demand/MatchDetail.tsx

@@ -6,6 +6,8 @@ import { propertyService } from '../../services/propertyService'
 import { needService } from '../../services/needService'
 import { futureSignalService } from '../../services/futureSignalService'
 import { useCompareStore } from '../../stores/compareStore'
+import { useShortlistStore } from '../../stores/shortlistStore'
+import { AddToShortlistDialog } from '../../components/shortlist'
 import { MatchReasonList } from '../../components/match-card/MatchReasonList'
 import {
   MatchDetailHeader,
@@ -37,6 +39,7 @@ export default function MatchDetail() {
   const { matchId } = useParams<{ matchId: string }>()
   const navigate = useNavigate()
   const { addToCompare } = useCompareStore()
+  const { openAddDialog } = useShortlistStore()
 
   const { data: match, isLoading } = useMatchDetail(matchId ?? '')
 
@@ -112,15 +115,30 @@ export default function MatchDetail() {
 
   const handleBack = () => navigate(-1)
 
+  const handleShortlist = () => {
+    const title = property?.title ?? signal?.companyName ?? signal?.locationHint ?? match.id
+    openAddDialog({
+      resultId: match.id,
+      resultType: match.resultType ?? 'VERIFIED_PORTFOLIO',
+      title,
+      matchScore: match.matchScore,
+      confidenceScore: match.confidenceLevel,
+      sourceLabel: property?.sourceLabel ?? match.resultType ?? 'VERIFIED_PORTFOLIO',
+      addedBy: 'admin@ideal-sharing.ch',
+      propertyId: property?.id,
+    })
+  }
+
   return (
     <Box sx={{ px: 3, py: 2 }}>
+      <AddToShortlistDialog />
       <MatchDetailHeader
         match={match}
         property={property}
         signal={signal}
         onBack={handleBack}
         onCompare={handleCompare}
-        onShortlist={() => {}}
+        onShortlist={handleShortlist}
       />
 
       <Box sx={{ display: 'flex', gap: 3, alignItems: 'flex-start' }}>
@@ -165,7 +183,7 @@ export default function MatchDetail() {
           <NextActionsPanel
             match={match}
             onCompare={handleCompare}
-            onShortlist={() => {}}
+            onShortlist={handleShortlist}
             onReview={() => {}}
             onReject={() => {}}
           />

src/pages/demand/Results.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Box, Button, Card, Typography } from '@mui/material'
-import { useNavigate } from 'react-router'
-import { useQuery } from '@tanstack/react-query'
+import { useNavigate, useLocation } from 'react-router'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useUnifiedResults } from '../../hooks/useUnifiedResults'
 import { needService } from '../../services/needService'
 import {
@@ -11,6 +11,7 @@ import {
   ResultFilterBar,
   UnifiedResultFeed,
 } from '../../components/results'
+import { AddToShortlistDialog } from '../../components/shortlist'
 import type { ResultType } from '../../domain/enums'
 import type { UnifiedMatchResult } from '../../domain/unifiedResult'
 
@@ -30,16 +31,37 @@ function sortResults(results: UnifiedMatchResult[], sortBy: SortBy): UnifiedMatc
 
 export default function Results() {
   const navigate = useNavigate()
+  const location = useLocation()
+  const queryClient = useQueryClient()
   const [filterSource, setFilterSource] = useState<FilterSource>('ALL')
   const [sortBy, setSortBy] = useState<SortBy>('score')
 
-  const { data: results = [], isLoading } = useUnifiedResults()
+  // When coming from NeedBuilder, invalidate so the freshly created need is included
+  const activeNeedIdFromNav = (location.state as { activeNeedId?: string } | null)?.activeNeedId
+
   const { data: needResp } = useQuery({
     queryKey: ['needs'],
     queryFn: () => needService.getAll(),
+    // Refetch on mount when navigating from NeedBuilder to pick up the new need
+    refetchOnMount: activeNeedIdFromNav ? 'always' : true,
+    gcTime: 0,
   })
 
-  const activeNeed = needResp?.data?.[0]
+  // Prefer the ID passed from NeedBuilder; fall back to most-recently-created
+  const activeNeed = needResp?.data
+    ? activeNeedIdFromNav
+      ? (needResp.data.find(n => n.id === activeNeedIdFromNav) ?? needResp.data[0])
+      : [...needResp.data].sort((a, b) =>
+          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+        )[0]
+    : undefined
+
+  // Ensure query cache is invalidated when a new need was just created
+  if (activeNeedIdFromNav) {
+    queryClient.invalidateQueries({ queryKey: ['needs'] })
+  }
+
+  const { data: results = [], isLoading } = useUnifiedResults(activeNeed?.id)
 
   const filtered =
     filterSource === 'ALL' ? results : results.filter(r => r.resultType === filterSource)
@@ -52,6 +74,7 @@ export default function Results() {
 
   return (
     <Box>
+      <AddToShortlistDialog />
       <ResultFeedHeader
         total={sorted.length}
         verifiedCount={verifiedCount}
@@ -62,21 +85,43 @@ export default function Results() {
       <Box sx={{ px: 3, py: 3 }}>
         {activeNeed && (
           <Card sx={{ bgcolor: '#eff6ff', p: 2, mb: 2, border: '1px solid #bfdbfe' }}>
-            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2 }}>
               <Box>
-                <Typography variant="subtitle2" sx={{ fontWeight: 600 }} color="#1e3a5f">
+                <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 0.5 }} color="#1e3a5f">
                   Aktive Suche: {activeNeed.companyName}
                 </Typography>
-                <Typography variant="caption" color="text.secondary">
-                  {activeNeed.assetType} · {activeNeed.requiredArea.min}–{activeNeed.requiredArea.max} m² ·{' '}
-                  {activeNeed.preferredLocations.join(', ')}
-                </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 && (
+                    <Typography variant="caption" color="text.secondary">
+                      <strong>Budget:</strong> max. CHF {activeNeed.budgetRange.maxPerSqm}/m²
+                    </Typography>
+                  )}
+                  {activeNeed.timing && (
+                    <Typography variant="caption" color="text.secondary">
+                      <strong>Bezug ab:</strong> {new Date(activeNeed.timing.earliestMoveIn).toLocaleDateString('de-CH', { month: 'long', year: 'numeric' })}
+                    </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>
               <Button
                 size="small"
                 variant="text"
                 onClick={() => navigate('/demand/ai-search')}
-                sx={{ color: '#1e3a5f' }}
+                sx={{ color: '#1e3a5f', flexShrink: 0 }}
               >
                 Suche ändern
               </Button>

src/pages/demand/Shortlists.tsx

@@ -1,173 +1,79 @@
+import { Box, Paper, Typography } from '@mui/material'
+import { useShortlists } from '../../hooks/useShortlists'
+import { useShortlistStore } from '../../stores/shortlistStore'
 import {
-  Box,
-  Button,
-  Card,
-  Chip,
-  Typography,
-  Stack,
-  Divider,
-  List,
-  ListItem,
-  ListItemText,
-} from '@mui/material'
-import { Bookmark } from 'lucide-react'
+  ShortlistList,
+  ShortlistDetail,
+  DecisionBriefDraftPanel,
+  AddToShortlistDialog,
+} from '../../components/shortlist'
 
-interface MockShortlist {
-  id: string
-  title: string
-  company: string
-  assetType: string
-  objectCount: number
-  createdAt: string
-  updatedAt: string
-  properties: string[]
+const PANEL_HEADER_SX = {
+  px: 2,
+  py: 1.5,
+  borderBottom: '1px solid #e2e8f0',
+  bgcolor: 'white',
+  position: 'sticky' as const,
+  top: 0,
+  zIndex: 1,
+  flexShrink: 0,
 }
 
-const MOCK_SHORTLISTS: MockShortlist[] = [
-  {
-    id: 'sl-001',
-    title: 'Bürosuche Innovatech AG',
-    company: 'Innovatech AG',
-    assetType: 'Büro',
-    objectCount: 2,
-    createdAt: '01.05.2025',
-    updatedAt: '08.05.2025',
-    properties: ['Bürofläche Zollstrasse 12', 'Gemischte Gewerbeeinheit Europaallee'],
-  },
-  {
-    id: 'sl-002',
-    title: 'Logistik Basel — Schweizer Logistik',
-    company: 'Schweizer Logistik GmbH',
-    assetType: 'Logistik',
-    objectCount: 1,
-    createdAt: '03.05.2025',
-    updatedAt: '03.05.2025',
-    properties: ['Lagerfläche Hardstrasse 44'],
-  },
-]
-
 export default function Shortlists() {
+  const { data: shortlists = [], isLoading } = useShortlists()
+  const { selectedShortlistId } = useShortlistStore()
+
+  const selectedShortlist = shortlists.find(s => s.id === selectedShortlistId) ?? null
+
   return (
-    <Box>
-      {/* Page Header */}
-      <Box
-        sx={{
-          bgcolor: 'white',
-          borderBottom: '1px solid #e2e8f0',
-          px: 3,
-          py: 2,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-      >
-        <Box>
-          <Typography variant="h5" sx={{ fontWeight: 700 }} color="text.primary">
-            Shortlists
-          </Typography>
-          <Typography variant="body2" color="text.secondary">
-            Gespeicherte Objektlisten und Entscheidungsvorlagen
-          </Typography>
+    <Box sx={{ display: 'flex', height: 'calc(100vh - 64px)', overflow: 'hidden' }}>
+
+      {/* Left: shortlist list */}
+      <Paper elevation={0} sx={{
+        width: 260,
+        flexShrink: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        borderRadius: 0,
+        borderRight: '1px solid #e2e8f0',
+        overflow: 'hidden',
+      }}>
+        <Box sx={PANEL_HEADER_SX}>
+          <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>Shortlists</Typography>
+          <Typography variant="caption" color="text.secondary">{shortlists.length} gespeichert</Typography>
         </Box>
-        <Button
-          variant="contained"
-          size="small"
-          startIcon={<Bookmark size={14} />}
-          disabled
-          sx={{ bgcolor: '#1e3a5f' }}
-        >
-          Neue Shortlist
-        </Button>
-      </Box>
+        <ShortlistList shortlists={shortlists} isLoading={isLoading} />
+      </Paper>
 
-      <Box sx={{ px: 3, py: 3 }}>
-        <Stack spacing={2}>
-          {MOCK_SHORTLISTS.map(sl => (
-            <Card key={sl.id} sx={{ p: 2.5 }}>
-              {/* Card header */}
-              <Box
-                sx={{
-                  display: 'flex',
-                  alignItems: 'flex-start',
-                  justifyContent: 'space-between',
-                  mb: 1.5,
-                }}
-              >
-                <Box>
-                  <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-                    {sl.title}
-                  </Typography>
-                  <Typography variant="body2" color="text.secondary">
-                    {sl.company} · {sl.assetType}
-                  </Typography>
-                </Box>
-                <Chip
-                  label={`${sl.objectCount} Objekte`}
-                  size="small"
-                  sx={{ bgcolor: '#eff6ff', color: '#1e3a5f', fontWeight: 600 }}
-                />
-              </Box>
-
-              {/* Dates */}
-              <Stack direction="row" spacing={2} sx={{ mb: 1.5 }}>
-                <Typography variant="caption" color="text.secondary">
-                  Erstellt: {sl.createdAt}
-                </Typography>
-                <Typography variant="caption" color="text.secondary">
-                  Zuletzt aktualisiert: {sl.updatedAt}
-                </Typography>
-              </Stack>
-
-              <Divider sx={{ mb: 1.5 }} />
-
-              {/* Property list */}
-              <List dense disablePadding sx={{ mb: 1.5 }}>
-                {sl.properties.map((prop, i) => (
-                  <ListItem key={i} disableGutters sx={{ py: 0.25 }}>
-                    <Box
-                      sx={{
-                        width: 6,
-                        height: 6,
-                        borderRadius: '50%',
-                        bgcolor: '#1e3a5f',
-                        mr: 1.5,
-                        flexShrink: 0,
-                      }}
-                    />
-                    <ListItemText
-                      primary={<Typography variant="body2">{prop}</Typography>}
-                    />
-                  </ListItem>
-                ))}
-              </List>
-
-              {/* Actions */}
-              <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
-                <Button variant="outlined" size="small" disabled>
-                  Teilen
-                </Button>
-                <Button variant="outlined" size="small" disabled>
-                  Öffnen
-                </Button>
-              </Box>
-            </Card>
-          ))}
-
-          {/* Empty shortlist prompt */}
-          <Card
-            sx={{
-              p: 2,
-              border: '2px dashed #e2e8f0',
-              boxShadow: 'none',
-              bgcolor: '#fafafa',
-            }}
-          >
-            <Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center' }}>
-              Objekte aus den Suchergebnissen zur Shortlist hinzufügen
+      {/* Center: detail */}
+      <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', bgcolor: '#f8fafc' }}>
+        {selectedShortlist ? (
+          <ShortlistDetail shortlist={selectedShortlist} />
+        ) : (
+          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+            <Typography variant="body2" color="text.secondary">
+              Shortlist aus der Liste wählen
             </Typography>
-          </Card>
-        </Stack>
+          </Box>
+        )}
       </Box>
+
+      {/* Right: decision brief — only when a shortlist is selected */}
+      {selectedShortlist && (
+        <Paper elevation={0} sx={{
+          width: 280,
+          flexShrink: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          borderRadius: 0,
+          borderLeft: '1px solid #e2e8f0',
+          overflow: 'hidden',
+        }}>
+          <DecisionBriefDraftPanel shortlistId={selectedShortlist.id} />
+        </Paper>
+      )}
+
+      <AddToShortlistDialog />
     </Box>
   )
 }