feat: merge Merkliste into Pipeline (SAVED stage) + Anfragen chat page
- Remove standalone Merkliste/Shortlists nav item; pipeline now covers the full funnel - Add SAVED as first PipelineStage — 'Merken' on result cards lands here - pipelineStore (Zustand) holds shared items; AddToPipelineDialog replaces AddToShortlistDialog in demand workspace - New /demand/anfragen split-panel: searchable inquiry list + chat thread with compose - Pipeline detail panel: KI insight, stage actions, editable notes, mock documents - ShortlistItemCard: cards clickable → property detail, Anfrage button with inline dialog - Supply workspace (FutureAvailability, Anfragencenter) unchanged Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
@@ -0,0 +1,439 @@
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import {
|
||||
Box, Typography, TextField, Chip, Avatar, IconButton,
|
||||
InputAdornment, Paper,
|
||||
} from '@mui/material'
|
||||
import { Search, Send, Paperclip, ArrowLeft, FileText, Bot, Building2 } from 'lucide-react'
|
||||
import { mockInquiries } from '../../mock-data/inquiries'
|
||||
import type { InquiryMessage } from '../../domain/inquiry'
|
||||
|
||||
const STATUS_CONFIG: Record<string, { label: string; color: string; bgColor: string }> = {
|
||||
new: { label: 'Neu', color: '#dc2626', bgColor: '#fef2f2' },
|
||||
in_progress: { label: 'Aktiv', color: '#d97706', bgColor: '#fffbeb' },
|
||||
answered: { label: 'Beantwortet', color: '#1a7a4a', bgColor: '#f0fdf4' },
|
||||
archived: { label: 'Archiviert', color: '#64748b', bgColor: '#f8fafc' },
|
||||
}
|
||||
|
||||
const FILTER_TABS = [
|
||||
{ key: 'all', label: 'Alle' },
|
||||
{ key: 'new', label: 'Neu' },
|
||||
{ key: 'in_progress', label: 'Aktiv' },
|
||||
{ key: 'answered', label: 'Beantwortet' },
|
||||
]
|
||||
|
||||
function MessageBubble({ msg }: { msg: InquiryMessage }) {
|
||||
const isOwnMessage = msg.senderType === 'tenant'
|
||||
const isAI = msg.senderType === 'ai'
|
||||
const time = new Date(msg.createdAt).toLocaleTimeString('de-CH', { hour: '2-digit', minute: '2-digit' })
|
||||
const date = new Date(msg.createdAt).toLocaleDateString('de-CH', { day: '2-digit', month: '2-digit' })
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: isOwnMessage ? 'flex-end' : 'flex-start', mb: 0.5 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 0.375 }}>
|
||||
{!isOwnMessage && isAI && <Bot size={11} color="#7c3aed" />}
|
||||
{!isOwnMessage && msg.senderType === 'supply_user' && <Building2 size={11} color="#64748b" />}
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.7rem' }}>
|
||||
{msg.senderName} · {date} {time}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: { xs: '88%', md: '72%' },
|
||||
px: 2, py: 1.25,
|
||||
borderRadius: isOwnMessage ? '18px 18px 4px 18px' : '18px 18px 18px 4px',
|
||||
bgcolor: isOwnMessage ? '#1e3a5f' : isAI ? '#f5f3ff' : 'white',
|
||||
border: isOwnMessage ? 'none' : isAI ? '1px solid #ddd6fe' : '1px solid #e2e8f0',
|
||||
boxShadow: isOwnMessage ? '0 2px 6px rgba(30,58,95,0.2)' : '0 1px 2px rgba(0,0,0,0.06)',
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
color: isOwnMessage ? 'white' : isAI ? '#5b21b6' : '#1e293b',
|
||||
whiteSpace: 'pre-wrap',
|
||||
lineHeight: 1.65,
|
||||
fontSize: '0.875rem',
|
||||
}}
|
||||
>
|
||||
{msg.body}
|
||||
</Typography>
|
||||
|
||||
{msg.attachments.length > 0 && (
|
||||
<Box sx={{ mt: 1, display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||||
{msg.attachments.map(att => (
|
||||
<Box
|
||||
key={att.id}
|
||||
sx={{
|
||||
display: 'flex', alignItems: 'center', gap: 1,
|
||||
px: 1.5, py: 0.75,
|
||||
bgcolor: isOwnMessage ? 'rgba(255,255,255,0.12)' : '#f1f5f9',
|
||||
borderRadius: 1.5, cursor: 'pointer',
|
||||
'&:hover': { bgcolor: isOwnMessage ? 'rgba(255,255,255,0.2)' : '#e2e8f0' },
|
||||
}}
|
||||
>
|
||||
<FileText size={13} color={isOwnMessage ? 'rgba(255,255,255,0.75)' : '#64748b'} />
|
||||
<Typography variant="caption" sx={{ color: isOwnMessage ? 'rgba(255,255,255,0.9)' : '#475569', flex: 1 }} noWrap>
|
||||
{att.fileName}
|
||||
</Typography>
|
||||
{att.fileSize && (
|
||||
<Typography variant="caption" sx={{ color: isOwnMessage ? 'rgba(255,255,255,0.5)' : '#94a3b8', flexShrink: 0 }}>
|
||||
{att.fileSize < 1024 * 1024
|
||||
? `${Math.round(att.fileSize / 1024)} KB`
|
||||
: `${(att.fileSize / 1024 / 1024).toFixed(1)} MB`}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Anfragen() {
|
||||
const [inquiries, setInquiries] = useState(mockInquiries)
|
||||
const [selectedId, setSelectedId] = useState<string | null>(mockInquiries[0]?.id ?? null)
|
||||
const [search, setSearch] = useState('')
|
||||
const [statusFilter, setStatusFilter] = useState('all')
|
||||
const [replyText, setReplyText] = useState('')
|
||||
const [mobileShowChat, setMobileShowChat] = useState(false)
|
||||
const threadRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const filtered = inquiries.filter(inq => {
|
||||
const q = search.toLowerCase()
|
||||
const matchesSearch = !q ||
|
||||
inq.tenantName.toLowerCase().includes(q) ||
|
||||
inq.subject.toLowerCase().includes(q) ||
|
||||
(inq.tenantCompany?.toLowerCase().includes(q) ?? false)
|
||||
const matchesStatus = statusFilter === 'all' || inq.status === statusFilter
|
||||
return matchesSearch && matchesStatus
|
||||
})
|
||||
|
||||
const selected = inquiries.find(i => i.id === selectedId) ?? null
|
||||
const totalUnread = inquiries.reduce((sum, i) => sum + i.unreadCount, 0)
|
||||
|
||||
useEffect(() => {
|
||||
if (threadRef.current) {
|
||||
threadRef.current.scrollTop = threadRef.current.scrollHeight
|
||||
}
|
||||
}, [selected?.thread.length])
|
||||
|
||||
function handleSelect(id: string) {
|
||||
setSelectedId(id)
|
||||
setInquiries(prev => prev.map(i => i.id === id ? { ...i, isRead: true, unreadCount: 0 } : i))
|
||||
setMobileShowChat(true)
|
||||
}
|
||||
|
||||
function handleSend() {
|
||||
if (!replyText.trim() || !selectedId) return
|
||||
const msg: InquiryMessage = {
|
||||
id: `msg-${Date.now()}`,
|
||||
inquiryId: selectedId,
|
||||
senderType: 'tenant',
|
||||
senderName: 'Sie',
|
||||
body: replyText.trim(),
|
||||
attachments: [],
|
||||
createdAt: new Date().toISOString(),
|
||||
}
|
||||
setInquiries(prev => prev.map(i =>
|
||||
i.id === selectedId
|
||||
? { ...i, thread: [...i.thread, msg], status: 'in_progress', updatedAt: new Date().toISOString() }
|
||||
: i
|
||||
))
|
||||
setReplyText('')
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', height: '100%', overflow: 'hidden' }}>
|
||||
|
||||
{/* ── Left panel: inquiry list ── */}
|
||||
<Box
|
||||
sx={{
|
||||
width: { xs: mobileShowChat ? 0 : '100%', md: 320 },
|
||||
minWidth: { md: 320 },
|
||||
flexShrink: 0,
|
||||
display: 'flex', flexDirection: 'column',
|
||||
borderRight: '1px solid #e2e8f0',
|
||||
overflow: 'hidden',
|
||||
bgcolor: 'white',
|
||||
transition: 'width 0.2s ease',
|
||||
}}
|
||||
>
|
||||
{/* List header */}
|
||||
<Box sx={{ px: 2, py: 2, borderBottom: '1px solid #e2e8f0' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1.5 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, fontSize: '1rem' }}>Anfragen</Typography>
|
||||
{totalUnread > 0 && (
|
||||
<Chip
|
||||
label={`${totalUnread} neu`}
|
||||
size="small"
|
||||
sx={{ bgcolor: '#dc2626', color: 'white', fontWeight: 700, height: 20, fontSize: '0.7rem' }}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
<TextField
|
||||
size="small"
|
||||
placeholder="Suchen..."
|
||||
fullWidth
|
||||
value={search}
|
||||
onChange={e => setSearch(e.target.value)}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<Search size={14} color="#94a3b8" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
sx={{ mb: 1.25 }}
|
||||
/>
|
||||
<Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
|
||||
{FILTER_TABS.map(tab => (
|
||||
<Chip
|
||||
key={tab.key}
|
||||
label={tab.label}
|
||||
size="small"
|
||||
onClick={() => setStatusFilter(tab.key)}
|
||||
sx={{
|
||||
height: 22, fontSize: '0.7rem', cursor: 'pointer',
|
||||
bgcolor: statusFilter === tab.key ? '#1e3a5f' : '#f1f5f9',
|
||||
color: statusFilter === tab.key ? 'white' : '#475569',
|
||||
fontWeight: statusFilter === tab.key ? 700 : 400,
|
||||
'&:hover': { bgcolor: statusFilter === tab.key ? '#1a3050' : '#e2e8f0' },
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* List body */}
|
||||
<Box sx={{ flex: 1, overflowY: 'auto' }}>
|
||||
{filtered.length === 0 ? (
|
||||
<Box sx={{ p: 3, textAlign: 'center' }}>
|
||||
<Typography variant="body2" color="text.secondary">Keine Anfragen gefunden.</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
filtered.map(inq => {
|
||||
const cfg = STATUS_CONFIG[inq.status ?? 'new']
|
||||
const isSelected = inq.id === selectedId
|
||||
const displayDate = new Date(inq.updatedAt).toLocaleDateString('de-CH', { day: '2-digit', month: '2-digit' })
|
||||
const lastMsg = inq.thread[inq.thread.length - 1]
|
||||
|
||||
return (
|
||||
<Box
|
||||
key={inq.id}
|
||||
onClick={() => handleSelect(inq.id)}
|
||||
sx={{
|
||||
px: 2, py: 1.5,
|
||||
borderBottom: '1px solid #f1f5f9',
|
||||
cursor: 'pointer',
|
||||
bgcolor: isSelected ? '#eff6ff' : !inq.isRead ? 'rgba(220,38,38,0.03)' : 'transparent',
|
||||
borderLeft: isSelected ? '3px solid #1e3a5f' : '3px solid transparent',
|
||||
'&:hover': { bgcolor: isSelected ? '#eff6ff' : '#f8fafc' },
|
||||
transition: 'background-color 0.1s ease',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 0.375 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, minWidth: 0 }}>
|
||||
{!inq.isRead && (
|
||||
<Box sx={{ width: 7, height: 7, borderRadius: '50%', bgcolor: '#dc2626', flexShrink: 0 }} />
|
||||
)}
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontWeight: !inq.isRead ? 700 : 500, fontSize: '0.8125rem' }}
|
||||
noWrap
|
||||
>
|
||||
{inq.tenantName}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }}>
|
||||
{inq.unreadCount > 0 && (
|
||||
<Box sx={{
|
||||
width: 18, height: 18, borderRadius: '50%', bgcolor: '#dc2626',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
}}>
|
||||
<Typography sx={{ color: 'white', fontSize: '0.6rem', fontWeight: 700 }}>
|
||||
{inq.unreadCount}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.7rem' }}>
|
||||
{displayDate}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{inq.tenantCompany && (
|
||||
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', fontSize: '0.7rem', mb: 0.25 }} noWrap>
|
||||
{inq.tenantCompany}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ color: '#475569', display: 'block', mb: 0.5, fontWeight: !inq.isRead ? 600 : 400, fontSize: '0.75rem' }}
|
||||
noWrap
|
||||
>
|
||||
{inq.subject}
|
||||
</Typography>
|
||||
|
||||
{lastMsg && (
|
||||
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5, fontSize: '0.7rem' }} noWrap>
|
||||
{lastMsg.senderType === 'tenant' ? 'Sie: ' : `${lastMsg.senderName}: `}
|
||||
{lastMsg.body.split('\n')[0]}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Chip
|
||||
label={cfg?.label ?? inq.status}
|
||||
size="small"
|
||||
sx={{ height: 16, fontSize: '0.6rem', bgcolor: cfg?.bgColor, color: cfg?.color, fontWeight: 600 }}
|
||||
/>
|
||||
{inq.matchScore && (
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ color: inq.matchScore >= 80 ? '#1a7a4a' : '#d97706', fontWeight: 700, fontSize: '0.7rem' }}
|
||||
>
|
||||
Match {inq.matchScore}%
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* ── Right panel: chat thread ── */}
|
||||
<Box
|
||||
sx={{
|
||||
flex: 1,
|
||||
display: { xs: mobileShowChat ? 'flex' : 'none', md: 'flex' },
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
bgcolor: '#f8fafc',
|
||||
minWidth: 0,
|
||||
}}
|
||||
>
|
||||
{!selected ? (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body1" color="text.secondary" sx={{ fontWeight: 500 }}>
|
||||
Anfrage auswählen
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Wählen Sie links eine Anfrage aus, um die Konversation zu lesen.
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<>
|
||||
{/* Chat header */}
|
||||
<Box sx={{ px: 3, py: 1.75, bgcolor: 'white', borderBottom: '1px solid #e2e8f0', flexShrink: 0 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{ display: { md: 'none' }, mr: -0.5 }}
|
||||
onClick={() => setMobileShowChat(false)}
|
||||
>
|
||||
<ArrowLeft size={16} />
|
||||
</IconButton>
|
||||
<Avatar sx={{ width: 36, height: 36, bgcolor: '#1e3a5f', fontSize: '0.8rem', flexShrink: 0 }}>
|
||||
{selected.tenantName.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)}
|
||||
</Avatar>
|
||||
<Box sx={{ flex: 1, minWidth: 0 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 700, fontSize: '0.9rem' }}>
|
||||
{selected.tenantName}
|
||||
</Typography>
|
||||
{selected.tenantCompany && (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{selected.tenantCompany}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
<Typography variant="caption" color="text.secondary" noWrap sx={{ display: 'block' }}>
|
||||
{selected.subject}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }}>
|
||||
{selected.matchScore && (
|
||||
<Chip
|
||||
label={`${selected.matchScore}%`}
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: selected.matchScore >= 80 ? '#f0fdf4' : '#fffbeb',
|
||||
color: selected.matchScore >= 80 ? '#1a7a4a' : '#d97706',
|
||||
fontWeight: 700, height: 22, fontSize: '0.75rem',
|
||||
border: `1px solid ${selected.matchScore >= 80 ? '#86efac' : '#fde68a'}`,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Chip
|
||||
label={STATUS_CONFIG[selected.status ?? 'new']?.label ?? selected.status}
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: STATUS_CONFIG[selected.status ?? 'new']?.bgColor,
|
||||
color: STATUS_CONFIG[selected.status ?? 'new']?.color,
|
||||
fontWeight: 600, height: 22, fontSize: '0.75rem',
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Thread */}
|
||||
<Box
|
||||
ref={threadRef}
|
||||
sx={{ flex: 1, overflowY: 'auto', px: { xs: 2, md: 3 }, py: 2.5, display: 'flex', flexDirection: 'column', gap: 0.5 }}
|
||||
>
|
||||
{selected.thread.map(msg => (
|
||||
<MessageBubble key={msg.id} msg={msg} />
|
||||
))}
|
||||
</Box>
|
||||
|
||||
{/* Composer */}
|
||||
<Box sx={{ px: { xs: 2, md: 3 }, py: 2, bgcolor: 'white', borderTop: '1px solid #e2e8f0', flexShrink: 0 }}>
|
||||
<Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-end' }}>
|
||||
<TextField
|
||||
multiline
|
||||
minRows={2}
|
||||
maxRows={6}
|
||||
fullWidth
|
||||
size="small"
|
||||
placeholder="Antwort schreiben…"
|
||||
value={replyText}
|
||||
onChange={e => setReplyText(e.target.value)}
|
||||
onKeyDown={e => { if (e.key === 'Enter' && e.ctrlKey) handleSend() }}
|
||||
sx={{
|
||||
'& .MuiOutlinedInput-root': { borderRadius: 2 },
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||||
<IconButton size="small" sx={{ color: '#94a3b8' }}>
|
||||
<Paperclip size={16} />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={handleSend}
|
||||
disabled={!replyText.trim()}
|
||||
sx={{
|
||||
bgcolor: '#1e3a5f', color: 'white',
|
||||
'&:hover': { bgcolor: '#1a3050' },
|
||||
'&:disabled': { bgcolor: '#e2e8f0', color: '#94a3b8' },
|
||||
}}
|
||||
>
|
||||
<Send size={16} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ mt: 0.5, display: 'block' }}>
|
||||
Ctrl + Enter zum Senden
|
||||
</Typography>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -8,8 +8,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 { usePipelineStore } from '../../stores/pipelineStore'
|
||||
import { AddToPipelineDialog } from '../../components/shortlist'
|
||||
import { MatchReasonList } from '../../components/match-card/MatchReasonList'
|
||||
import { MatchScoreDisplay } from '../../components/match-card/MatchScoreDisplay'
|
||||
import { PropertyMap } from '../../components/shared'
|
||||
@@ -117,7 +117,7 @@ export default function MatchDetail() {
|
||||
const { matchId } = useParams<{ matchId: string }>()
|
||||
const navigate = useNavigate()
|
||||
const { addToCompare } = useCompareStore()
|
||||
const { openAddDialog } = useShortlistStore()
|
||||
const { openSavedDialog } = usePipelineStore()
|
||||
|
||||
const { data: match, isLoading } = useMatchDetail(matchId ?? '')
|
||||
const isFuture = match?.resultType === 'FUTURE_AVAILABILITY'
|
||||
@@ -191,15 +191,14 @@ export default function MatchDetail() {
|
||||
}
|
||||
|
||||
const handleShortlist = () => {
|
||||
openAddDialog({
|
||||
openSavedDialog({
|
||||
resultId: match.id,
|
||||
resultType: match.resultType ?? 'VERIFIED_PORTFOLIO',
|
||||
title: property?.title ?? signal?.companyName ?? signal?.locationHint ?? match.id,
|
||||
matchScore: match.matchScore,
|
||||
confidenceScore: match.confidenceLevel,
|
||||
sourceLabel: property?.sourceLabel ?? match.resultType ?? 'VERIFIED_PORTFOLIO',
|
||||
addedBy: 'admin@ideal-sharing.ch',
|
||||
propertyId: property?.id,
|
||||
location: property?.location?.city,
|
||||
areaLabel: property?.areaSqm ? `${property.areaSqm.toLocaleString('de-CH')} m²` : undefined,
|
||||
rentLabel: property?.rentPricePerSqm ? `CHF ${property.rentPricePerSqm}/m²` : undefined,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -217,7 +216,7 @@ export default function MatchDetail() {
|
||||
|
||||
return (
|
||||
<Box sx={{ bgcolor: '#f1f5f9', minHeight: '100vh' }}>
|
||||
<AddToShortlistDialog />
|
||||
<AddToPipelineDialog />
|
||||
|
||||
{/* Sticky back nav */}
|
||||
<Box sx={{
|
||||
|
||||
+408
-182
@@ -1,244 +1,470 @@
|
||||
import { useState } from 'react'
|
||||
import { Box, Typography, Chip, Paper, Button } from '@mui/material'
|
||||
import {
|
||||
Box, Typography, Chip, Paper, Button, IconButton,
|
||||
TextField, Divider,
|
||||
} from '@mui/material'
|
||||
import { X, Sparkles, FileText, StickyNote, ChevronRight, TrendingUp, AlertTriangle, CheckCircle, Bookmark } from 'lucide-react'
|
||||
import { usePipelineStore } from '../../stores/pipelineStore'
|
||||
import { AddToPipelineDialog } from '../../components/shortlist'
|
||||
import type { PipelineItem, PipelineStage } from '../../domain/pipeline'
|
||||
import { mockPipelineItems } from '../../mock-data/pipelineItems'
|
||||
|
||||
// ── Stage config ─────────────────────────────────────────────────────────────
|
||||
|
||||
const STAGES = [
|
||||
{ key: 'DISCOVERED' as PipelineStage, label: 'Entdeckt', color: '#475569', bgColor: '#f8fafc' },
|
||||
{ key: 'QUALIFIED' as PipelineStage, label: 'Qualifiziert', color: '#1e3a5f', bgColor: '#eff6ff' },
|
||||
{ key: 'VISITED' as PipelineStage, label: 'Besichtigt', color: '#d97706', bgColor: '#fffbeb' },
|
||||
{ key: 'NEGOTIATION' as PipelineStage, label: 'Verhandlung', color: '#7c3aed', bgColor: '#faf5ff' },
|
||||
{ key: 'CLOSED_WON' as PipelineStage, label: 'Gewonnen', color: '#1a7a4a', bgColor: '#f0fdf4' },
|
||||
{ key: 'CLOSED_LOST' as PipelineStage, label: 'Abgelehnt', color: '#c0392b', bgColor: '#fef2f2' },
|
||||
{ key: 'SAVED' as PipelineStage, label: 'Gemerkt', color: '#475569', bgColor: '#f8fafc', icon: Bookmark },
|
||||
{ key: 'DISCOVERED' as PipelineStage, label: 'Entdeckt', color: '#0369a1', bgColor: '#f0f9ff', icon: null },
|
||||
{ key: 'QUALIFIED' as PipelineStage, label: 'Qualifiziert', color: '#1e3a5f', bgColor: '#eff6ff', icon: null },
|
||||
{ key: 'VISITED' as PipelineStage, label: 'Besichtigt', color: '#d97706', bgColor: '#fffbeb', icon: null },
|
||||
{ key: 'NEGOTIATION' as PipelineStage, label: 'Verhandlung', color: '#7c3aed', bgColor: '#faf5ff', icon: null },
|
||||
{ key: 'CLOSED_WON' as PipelineStage, label: 'Gewonnen', color: '#1a7a4a', bgColor: '#f0fdf4', icon: null },
|
||||
{ key: 'CLOSED_LOST' as PipelineStage, label: 'Abgelehnt', color: '#c0392b', bgColor: '#fef2f2', icon: null },
|
||||
] as const
|
||||
|
||||
const NEXT_STAGE_LABEL: Partial<Record<PipelineStage, string>> = {
|
||||
DISCOVERED: 'Qualifizieren →',
|
||||
QUALIFIED: 'Besichtigung planen →',
|
||||
VISITED: 'Verhandlung →',
|
||||
NEGOTIATION: 'Als gewonnen markieren →',
|
||||
const NEXT_STAGE: Partial<Record<PipelineStage, { key: PipelineStage; label: string }>> = {
|
||||
SAVED: { key: 'DISCOVERED', label: 'Als entdeckt markieren' },
|
||||
DISCOVERED: { key: 'QUALIFIED', label: 'Qualifizieren' },
|
||||
QUALIFIED: { key: 'VISITED', label: 'Besichtigung planen' },
|
||||
VISITED: { key: 'NEGOTIATION', label: 'Verhandlung starten' },
|
||||
NEGOTIATION: { key: 'CLOSED_WON', label: 'Als gewonnen markieren' },
|
||||
}
|
||||
|
||||
const RESULT_TYPE_LABEL: Record<PipelineItem['resultType'], string> = {
|
||||
const RESULT_TYPE_LABEL: Record<string, string> = {
|
||||
VERIFIED_PORTFOLIO: 'Portfolio',
|
||||
EXTERNAL_MARKET: 'Direktinserat',
|
||||
MAISON_WORK: 'Maison Work',
|
||||
FUTURE_AVAILABILITY: 'Future Availability',
|
||||
FUTURE_AVAILABILITY: 'Future',
|
||||
}
|
||||
|
||||
const RESULT_TYPE_COLOR: Record<PipelineItem['resultType'], string> = {
|
||||
const RESULT_TYPE_COLOR: Record<string, string> = {
|
||||
VERIFIED_PORTFOLIO: '#1e3a5f',
|
||||
EXTERNAL_MARKET: '#d97706',
|
||||
MAISON_WORK: '#0369a1',
|
||||
FUTURE_AVAILABILITY: '#7c3aed',
|
||||
}
|
||||
|
||||
function scoreColor(score: number): string {
|
||||
if (score >= 80) return '#1a7a4a'
|
||||
if (score >= 65) return '#d97706'
|
||||
return '#c0392b'
|
||||
const MOCK_DOCS: Record<string, { name: string; date: string }[]> = {
|
||||
'pl-001': [
|
||||
{ name: 'Expose_Zollstrasse12.pdf', date: '05.05.2026' },
|
||||
{ name: 'Grundriss_EG.pdf', date: '08.05.2026' },
|
||||
{ name: 'Mietvertrag_Entwurf.docx', date: '14.05.2026' },
|
||||
],
|
||||
'pl-007': [
|
||||
{ name: 'Expose_Stadthaus_Bern.pdf', date: '12.04.2026' },
|
||||
{ name: 'Mietvertrag_unterschrieben.pdf', date: '02.05.2026' },
|
||||
],
|
||||
}
|
||||
|
||||
function scoreColor(score: number) {
|
||||
return score >= 80 ? '#1a7a4a' : score >= 65 ? '#d97706' : '#c0392b'
|
||||
}
|
||||
|
||||
function getKiInsight(item: PipelineItem): { summary: string; positives: string[]; risks: string[] } {
|
||||
if (item.stage === 'SAVED') {
|
||||
return {
|
||||
summary: `Merkliste-Eintrag mit ${item.matchScore}% Match. Prüfen Sie, ob dieses Objekt für die Qualifizierung geeignet ist.`,
|
||||
positives: [`Match-Score ${item.matchScore}%`],
|
||||
risks: ['Noch nicht qualifiziert — Eignung prüfen'],
|
||||
}
|
||||
}
|
||||
if (item.stage === 'CLOSED_WON') {
|
||||
return {
|
||||
summary: `Abschluss erfolgreich. ${item.title} wurde zu ${item.matchScore}% Match-Score abgeschlossen.`,
|
||||
positives: ['Vertraglich gesichert', `Match ${item.matchScore}%`, 'Alle Kriterien erfüllt'],
|
||||
risks: [],
|
||||
}
|
||||
}
|
||||
if (item.stage === 'CLOSED_LOST') {
|
||||
return {
|
||||
summary: item.notes ?? 'Objekt nicht realisiert.',
|
||||
positives: [],
|
||||
risks: ['Nicht verfügbar', 'Alternative Optionen prüfen'],
|
||||
}
|
||||
}
|
||||
const s = item.matchScore
|
||||
return {
|
||||
summary: s >= 80
|
||||
? `Starkes Objekt (${s}%) — deckt die wesentlichen Suchkriterien ab. Prozess aktiv weitertreiben.`
|
||||
: s >= 65
|
||||
? `Solides Objekt (${s}%) mit Potenzial. Gezielte Klärung offener Punkte empfohlen.`
|
||||
: `Schwächerer Match (${s}%). Kritisch prüfen bevor weitere Ressourcen investiert werden.`,
|
||||
positives: [
|
||||
...(s >= 80 ? [`Match ${s}% — hohe Übereinstimmung`] : []),
|
||||
...(item.areaLabel ? [`Fläche: ${item.areaLabel}`] : []),
|
||||
...(item.resultType === 'VERIFIED_PORTFOLIO' ? ['Geprüftes Portfolio-Objekt'] : []),
|
||||
...(item.stage === 'NEGOTIATION' ? ['Verhandlung läuft — kurz vor Abschluss'] : []),
|
||||
].slice(0, 3),
|
||||
risks: [
|
||||
...(s < 80 ? [`Match ${s}% — Abweichungen prüfen`] : []),
|
||||
...(item.notes?.includes('Budget') ? ['Budget-Diskrepanz erwähnt'] : []),
|
||||
...(item.resultType === 'FUTURE_AVAILABILITY' ? ['Verfügbarkeit noch nicht bestätigt'] : []),
|
||||
].slice(0, 2),
|
||||
}
|
||||
}
|
||||
|
||||
// ── PipelineCard ─────────────────────────────────────────────────────────────
|
||||
|
||||
function PipelineCard({
|
||||
item,
|
||||
onAdvance,
|
||||
isSelected,
|
||||
onSelect,
|
||||
}: {
|
||||
item: PipelineItem
|
||||
onAdvance: (id: string) => void
|
||||
isSelected: boolean
|
||||
onSelect: (item: PipelineItem) => void
|
||||
}) {
|
||||
const stageConfig = STAGES.find((s) => s.key === item.stage)!
|
||||
const showAdvance = item.stage !== 'CLOSED_WON' && item.stage !== 'CLOSED_LOST'
|
||||
|
||||
return (
|
||||
<Paper
|
||||
elevation={0}
|
||||
onClick={() => onSelect(item)}
|
||||
sx={{
|
||||
p: 1.5,
|
||||
borderRadius: 1.5,
|
||||
border: '1px solid #e2e8f0',
|
||||
cursor: 'default',
|
||||
bgcolor: 'white',
|
||||
p: 1.5, borderRadius: 1.5,
|
||||
border: isSelected ? '2px solid #1e3a5f' : '1px solid #e2e8f0',
|
||||
cursor: 'pointer',
|
||||
bgcolor: isSelected ? '#eff6ff' : 'white',
|
||||
'&:hover': { boxShadow: '0 2px 8px rgba(0,0,0,0.1)', borderColor: isSelected ? '#1e3a5f' : '#bfdbfe' },
|
||||
transition: 'box-shadow 0.15s, border-color 0.15s',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 1 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontWeight: 700, flex: 1, minWidth: 0 }}
|
||||
noWrap
|
||||
>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 1, mb: 0.5 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 700, flex: 1, minWidth: 0, lineHeight: 1.3 }} noWrap>
|
||||
{item.title}
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{ fontWeight: 900, fontSize: '1rem', color: scoreColor(item.matchScore), flexShrink: 0 }}
|
||||
>
|
||||
<Typography sx={{ fontWeight: 900, fontSize: '0.9rem', color: scoreColor(item.matchScore), flexShrink: 0 }}>
|
||||
{item.matchScore}%
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5 }}>
|
||||
{item.location}
|
||||
</Typography>
|
||||
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, flexWrap: 'wrap' }}>
|
||||
<Chip
|
||||
size="small"
|
||||
label={RESULT_TYPE_LABEL[item.resultType]}
|
||||
sx={{
|
||||
bgcolor: RESULT_TYPE_COLOR[item.resultType],
|
||||
color: 'white',
|
||||
fontSize: 10,
|
||||
height: 18,
|
||||
mt: 0.5,
|
||||
}}
|
||||
label={RESULT_TYPE_LABEL[item.resultType] ?? item.resultType}
|
||||
sx={{ bgcolor: RESULT_TYPE_COLOR[item.resultType] ?? '#475569', color: 'white', fontSize: 10, height: 18 }}
|
||||
/>
|
||||
{item.areaLabel && <Typography variant="caption" sx={{ color: '#475569' }}>{item.areaLabel}</Typography>}
|
||||
{item.rentLabel && <Typography variant="caption" sx={{ color: '#475569' }}>{item.rentLabel}</Typography>}
|
||||
</Box>
|
||||
|
||||
{(item.areaLabel || item.rentLabel) && (
|
||||
<Box sx={{ display: 'flex', gap: 1, mt: 0.5 }}>
|
||||
{item.areaLabel && (
|
||||
<Typography variant="caption" sx={{ color: '#475569' }}>
|
||||
{item.areaLabel}
|
||||
</Typography>
|
||||
)}
|
||||
{item.rentLabel && (
|
||||
<Typography variant="caption" sx={{ color: '#475569' }}>
|
||||
{item.rentLabel}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{item.notes && (
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ fontStyle: 'italic', color: 'text.secondary', mt: 0.5, display: 'block' }}
|
||||
>
|
||||
<Typography variant="caption" sx={{ fontStyle: 'italic', color: '#94a3b8', mt: 0.5, display: 'block' }} noWrap>
|
||||
{item.notes}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
{showAdvance && (
|
||||
<Button
|
||||
size="small"
|
||||
variant="text"
|
||||
onClick={() => onAdvance(item.id)}
|
||||
sx={{
|
||||
color: stageConfig.color,
|
||||
fontSize: '0.7rem',
|
||||
p: 0,
|
||||
mt: 0.75,
|
||||
minWidth: 0,
|
||||
textTransform: 'none',
|
||||
}}
|
||||
>
|
||||
{NEXT_STAGE_LABEL[item.stage]}
|
||||
</Button>
|
||||
)}
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Pipeline() {
|
||||
const [items, setItems] = useState<PipelineItem[]>(mockPipelineItems)
|
||||
// ── DetailPanel ───────────────────────────────────────────────────────────────
|
||||
|
||||
const activeCount = items.filter(
|
||||
(i) => i.stage !== 'CLOSED_WON' && i.stage !== 'CLOSED_LOST'
|
||||
).length
|
||||
function DetailPanel({
|
||||
item,
|
||||
onClose,
|
||||
}: {
|
||||
item: PipelineItem
|
||||
onClose: () => void
|
||||
}) {
|
||||
const { moveStage, updateNotes, loseItem } = usePipelineStore()
|
||||
const [notes, setNotes] = useState(item.notes ?? '')
|
||||
const stageConfig = STAGES.find(s => s.key === item.stage)!
|
||||
const stageIndex = STAGES.findIndex(s => s.key === item.stage)
|
||||
const nextStage = NEXT_STAGE[item.stage]
|
||||
const ki = getKiInsight(item)
|
||||
const docs = MOCK_DOCS[item.id] ?? []
|
||||
const isClosed = item.stage === 'CLOSED_WON' || item.stage === 'CLOSED_LOST'
|
||||
|
||||
function handleAdvance(id: string) {
|
||||
setItems((prev) =>
|
||||
prev.map((item) => {
|
||||
if (item.id !== id) return item
|
||||
const idx = STAGES.findIndex((s) => s.key === item.stage)
|
||||
if (idx === -1 || idx >= STAGES.length - 1) return item
|
||||
return { ...item, stage: STAGES[idx + 1].key }
|
||||
})
|
||||
)
|
||||
}
|
||||
// progress bar: SAVED=0, DISCOVERED=1, QUALIFIED=2, VISITED=3, NEGOTIATION=4
|
||||
const activeStages = STAGES.slice(0, 5)
|
||||
const progressIdx = Math.min(stageIndex, 4)
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: 'white',
|
||||
borderBottom: '1px solid #e2e8f0',
|
||||
px: 3,
|
||||
py: 2,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexShrink: 0,
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700 }}>
|
||||
Deal Pipeline
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Verfolgen Sie Objekte von der Entdeckung bis zum Abschluss
|
||||
</Typography>
|
||||
<Box sx={{
|
||||
width: { xs: '100%', md: 340 }, flexShrink: 0,
|
||||
display: 'flex', flexDirection: 'column',
|
||||
bgcolor: 'white', borderLeft: '1px solid #e2e8f0',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
{/* Header */}
|
||||
<Box sx={{ px: 2, py: 2, borderBottom: '1px solid #e2e8f0' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1 }}>
|
||||
<Box sx={{ flex: 1, minWidth: 0 }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 700, lineHeight: 1.3, mb: 0.25 }}>
|
||||
{item.title}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">{item.location}</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }}>
|
||||
<Typography sx={{ fontWeight: 900, fontSize: '1.1rem', color: scoreColor(item.matchScore) }}>
|
||||
{item.matchScore}%
|
||||
</Typography>
|
||||
<IconButton size="small" onClick={onClose} sx={{ color: '#94a3b8' }}>
|
||||
<X size={16} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Stage progress bar */}
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<Box sx={{ display: 'flex', gap: 0.25, mb: 1 }}>
|
||||
{activeStages.map((s, idx) => (
|
||||
<Box
|
||||
key={s.key}
|
||||
sx={{
|
||||
flex: 1, height: 4, borderRadius: 2,
|
||||
bgcolor: idx <= progressIdx ? stageConfig.color : '#e2e8f0',
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
<Chip
|
||||
label={stageConfig.label}
|
||||
size="small"
|
||||
sx={{ bgcolor: stageConfig.bgColor, color: stageConfig.color, fontWeight: 700, height: 22, fontSize: '0.75rem' }}
|
||||
/>
|
||||
</Box>
|
||||
<Chip label={`${activeCount} aktiv`} size="small" />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: 2,
|
||||
px: 3,
|
||||
py: 2,
|
||||
overflowX: 'auto',
|
||||
flex: 1,
|
||||
alignItems: 'flex-start',
|
||||
}}
|
||||
>
|
||||
{STAGES.map((stage) => {
|
||||
const columnItems = items.filter((i) => i.stage === stage.key)
|
||||
return (
|
||||
<Box
|
||||
key={stage.key}
|
||||
sx={{
|
||||
minWidth: 240,
|
||||
maxWidth: 280,
|
||||
flexShrink: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
py: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ fontWeight: 700, color: stage.color }}>
|
||||
{stage.label}
|
||||
</Typography>
|
||||
<Chip
|
||||
label={columnItems.length}
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: stage.bgColor,
|
||||
color: stage.color,
|
||||
border: `1px solid ${stage.color}30`,
|
||||
fontWeight: 600,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, overflowY: 'auto' }}>
|
||||
{columnItems.map((item) => (
|
||||
<PipelineCard key={item.id} item={item} onAdvance={handleAdvance} />
|
||||
))}
|
||||
</Box>
|
||||
<Box sx={{ flex: 1, overflowY: 'auto' }}>
|
||||
{/* KI insight */}
|
||||
<Box sx={{ px: 2, pt: 2, pb: 1.5 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1 }}>
|
||||
<Sparkles size={13} color="#7c3aed" />
|
||||
<Typography variant="caption" sx={{ fontWeight: 700, color: '#7c3aed', textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.7rem' }}>
|
||||
KI Einschätzung
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ bgcolor: '#faf5ff', border: '1px solid #ddd6fe', borderRadius: 2, p: 1.5, mb: 1 }}>
|
||||
<Typography variant="caption" sx={{ color: '#4c1d95', lineHeight: 1.6 }}>{ki.summary}</Typography>
|
||||
</Box>
|
||||
{ki.positives.map((p, i) => (
|
||||
<Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75, mb: 0.375 }}>
|
||||
<CheckCircle size={12} color="#1a7a4a" style={{ marginTop: 2, flexShrink: 0 }} />
|
||||
<Typography variant="caption" sx={{ color: '#166534', lineHeight: 1.4 }}>{p}</Typography>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
))}
|
||||
{ki.risks.map((r, i) => (
|
||||
<Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75, mb: 0.375 }}>
|
||||
<AlertTriangle size={12} color="#d97706" style={{ marginTop: 2, flexShrink: 0 }} />
|
||||
<Typography variant="caption" sx={{ color: '#92400e', lineHeight: 1.4 }}>{r}</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* Stage actions */}
|
||||
{!isClosed && (
|
||||
<Box sx={{ px: 2, py: 1.5 }}>
|
||||
<Typography variant="caption" sx={{ fontWeight: 700, color: '#475569', textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.7rem', display: 'block', mb: 1 }}>
|
||||
Nächste Aktion
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
|
||||
{nextStage && (
|
||||
<Button
|
||||
size="small"
|
||||
variant="contained"
|
||||
endIcon={<ChevronRight size={14} />}
|
||||
onClick={() => moveStage(item.id, nextStage.key)}
|
||||
sx={{ bgcolor: stageConfig.color, '&:hover': { filter: 'brightness(0.9)' }, fontSize: '0.75rem', py: 0.5 }}
|
||||
>
|
||||
{nextStage.label}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
onClick={() => loseItem(item.id)}
|
||||
sx={{ color: '#c0392b', borderColor: '#c0392b', fontSize: '0.75rem', py: 0.5 }}
|
||||
>
|
||||
Ablehnen
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* Notes */}
|
||||
<Box sx={{ px: 2, py: 1.5 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1 }}>
|
||||
<StickyNote size={13} color="#475569" />
|
||||
<Typography variant="caption" sx={{ fontWeight: 700, color: '#475569', textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.7rem' }}>
|
||||
Notizen
|
||||
</Typography>
|
||||
</Box>
|
||||
<TextField
|
||||
size="small"
|
||||
multiline
|
||||
minRows={3}
|
||||
fullWidth
|
||||
placeholder="Notiz hinzufügen…"
|
||||
value={notes}
|
||||
onChange={e => setNotes(e.target.value)}
|
||||
onBlur={() => updateNotes(item.id, notes)}
|
||||
sx={{ '& .MuiOutlinedInput-root': { fontSize: '0.8rem', borderRadius: 1.5 } }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* Documents */}
|
||||
<Box sx={{ px: 2, py: 1.5 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1 }}>
|
||||
<FileText size={13} color="#475569" />
|
||||
<Typography variant="caption" sx={{ fontWeight: 700, color: '#475569', textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.7rem' }}>
|
||||
Dokumente
|
||||
</Typography>
|
||||
</Box>
|
||||
{docs.length === 0 ? (
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontStyle: 'italic' }}>
|
||||
Noch keine Dokumente.
|
||||
</Typography>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||||
{docs.map((doc, i) => (
|
||||
<Box
|
||||
key={i}
|
||||
sx={{
|
||||
display: 'flex', alignItems: 'center', gap: 1,
|
||||
px: 1.5, py: 0.75, bgcolor: '#f8fafc',
|
||||
borderRadius: 1.5, border: '1px solid #e2e8f0',
|
||||
cursor: 'pointer', '&:hover': { bgcolor: '#f1f5f9' },
|
||||
}}
|
||||
>
|
||||
<FileText size={13} color="#475569" />
|
||||
<Typography variant="caption" sx={{ flex: 1, color: '#1e293b' }} noWrap>{doc.name}</Typography>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ flexShrink: 0 }}>{doc.date}</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
<Button size="small" variant="text" sx={{ mt: 0.75, color: '#1e3a5f', fontSize: '0.75rem', p: 0 }}>
|
||||
+ Dokument hochladen
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* Meta */}
|
||||
<Box sx={{ px: 2, pb: 2 }}>
|
||||
<Divider sx={{ mb: 1.5 }} />
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||||
{item.availabilityLabel && (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
<strong>Verfügbar:</strong> {item.availabilityLabel}
|
||||
</Typography>
|
||||
)}
|
||||
{item.assignedTo && (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
<strong>Verantwortlich:</strong> {item.assignedTo}
|
||||
</Typography>
|
||||
)}
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
<strong>Hinzugefügt:</strong> {new Date(item.addedAt).toLocaleDateString('de-CH')}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Pipeline page ─────────────────────────────────────────────────────────────
|
||||
|
||||
export default function Pipeline() {
|
||||
const { items } = usePipelineStore()
|
||||
const [selectedItem, setSelectedItem] = useState<PipelineItem | null>(null)
|
||||
|
||||
const activeCount = items.filter(i => i.stage !== 'CLOSED_WON' && i.stage !== 'CLOSED_LOST').length
|
||||
const wonCount = items.filter(i => i.stage === 'CLOSED_WON').length
|
||||
const wonScore = wonCount > 0
|
||||
? Math.round(items.filter(i => i.stage === 'CLOSED_WON').reduce((sum, i) => sum + i.matchScore, 0) / wonCount)
|
||||
: 0
|
||||
|
||||
function handleSelect(item: PipelineItem) {
|
||||
setSelectedItem(prev => prev?.id === item.id ? null : item)
|
||||
}
|
||||
|
||||
// Keep selected item in sync when store updates (stage change, notes, etc.)
|
||||
const syncedSelected = selectedItem
|
||||
? items.find(i => i.id === selectedItem.id) ?? null
|
||||
: null
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
|
||||
<AddToPipelineDialog />
|
||||
|
||||
{/* Header */}
|
||||
<Box sx={{
|
||||
bgcolor: 'white', borderBottom: '1px solid #e2e8f0',
|
||||
px: 3, py: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexShrink: 0,
|
||||
}}>
|
||||
<Box>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700 }}>Deal Pipeline</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Von der ersten Idee bis zum Abschluss — alles in einer Ansicht
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
|
||||
{wonCount > 0 && (
|
||||
<Chip
|
||||
icon={<TrendingUp size={12} />}
|
||||
label={`${wonCount} gewonnen · ø ${wonScore}%`}
|
||||
size="small"
|
||||
sx={{ bgcolor: '#f0fdf4', color: '#1a7a4a', fontWeight: 600, border: '1px solid #86efac' }}
|
||||
/>
|
||||
)}
|
||||
<Chip label={`${activeCount} aktiv`} size="small" sx={{ fontWeight: 600 }} />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Body */}
|
||||
<Box sx={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
|
||||
{/* Kanban */}
|
||||
<Box sx={{ flex: 1, display: 'flex', gap: 2, px: 3, py: 2, overflowX: 'auto', alignItems: 'flex-start' }}>
|
||||
{STAGES.map(stage => {
|
||||
const columnItems = items.filter(i => i.stage === stage.key)
|
||||
return (
|
||||
<Box
|
||||
key={stage.key}
|
||||
sx={{ minWidth: syncedSelected ? 190 : 230, maxWidth: syncedSelected ? 230 : 270, flexShrink: 0, display: 'flex', flexDirection: 'column' }}
|
||||
>
|
||||
<Box sx={{ py: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography sx={{ fontWeight: 700, color: stage.color, fontSize: '0.8125rem' }}>
|
||||
{stage.label}
|
||||
</Typography>
|
||||
<Chip
|
||||
label={columnItems.length}
|
||||
size="small"
|
||||
sx={{ bgcolor: stage.bgColor, color: stage.color, border: `1px solid ${stage.color}30`, fontWeight: 600, height: 20, fontSize: '0.7rem' }}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, overflowY: 'auto' }}>
|
||||
{columnItems.map(item => (
|
||||
<PipelineCard
|
||||
key={item.id}
|
||||
item={item}
|
||||
isSelected={syncedSelected?.id === item.id}
|
||||
onSelect={handleSelect}
|
||||
/>
|
||||
))}
|
||||
{columnItems.length === 0 && (
|
||||
<Box sx={{ py: 2, textAlign: 'center' }}>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontStyle: 'italic' }}>
|
||||
Leer
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
|
||||
{/* Detail panel */}
|
||||
{syncedSelected && (
|
||||
<DetailPanel
|
||||
item={syncedSelected}
|
||||
onClose={() => setSelectedItem(null)}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
ResultFilterBar,
|
||||
UnifiedResultFeed,
|
||||
} from '../../components/results'
|
||||
import { AddToShortlistDialog } from '../../components/shortlist'
|
||||
import { AddToPipelineDialog } from '../../components/shortlist'
|
||||
import { useSessionStore } from '../../stores/sessionStore'
|
||||
import type { ResultType } from '../../domain/enums'
|
||||
import type { UnifiedMatchResult } from '../../domain/unifiedResult'
|
||||
@@ -91,7 +91,7 @@ export default function Results() {
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
|
||||
<AddToShortlistDialog />
|
||||
<AddToPipelineDialog />
|
||||
<ResultFeedHeader
|
||||
total={sorted.length}
|
||||
verifiedCount={verifiedCount}
|
||||
|
||||
Reference in New Issue
Block a user