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>
This commit is contained in:
Benjamin Sutter
+66
-160
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user