feat: Pipeline↔Anfragen integration + Compare→Pipeline + KI stage detection
Navigation: Deal Pipeline moved after Vergleich (before Anfragen) Compare → Pipeline: - Bookmark icon per column header; BookmarkCheck when already in pipeline - Passes propertyId, propertyAddress, area/rent labels on save Pipeline cards now unit-level: - propertyAddress shown with MapPin on every card - Chat icon (MessageSquare) on cards with linked inquiry → navigates to /demand/anfragen?inquiry=xxx - Detail panel: Chat chip links to specific inquiry thread, propertyAddress displayed Anfragen → Pipeline KI detection: - Keyword scan on every sent message (besichtigung → VISITED, mietvertrag → NEGOTIATION, unterschrieben → CLOSED_WON) - Only advances stage, never goes back - Purple KI alert banner with direct Pipeline link, auto-dismisses after 6s - Pipeline badge in inquiry list + stage chip in chat header with nav link - URL param ?inquiry=xxx pre-selects inquiry (used from Pipeline chat button) Domain: PipelineItem gains propertyId, unitId, propertyAddress, inquiryId Mock data: pl-001/pl-002/pl-004 linked to inq-001/inq-005/inq-004 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
+240
-198
@@ -1,26 +1,70 @@
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { useNavigate, useSearchParams } from 'react-router'
|
||||
import {
|
||||
Box, Typography, TextField, Chip, Avatar, IconButton,
|
||||
InputAdornment, Paper,
|
||||
InputAdornment, Alert,
|
||||
} from '@mui/material'
|
||||
import { Search, Send, Paperclip, ArrowLeft, FileText, Bot, Building2 } from 'lucide-react'
|
||||
import { Search, Send, Paperclip, ArrowLeft, FileText, Bot, Building2, Kanban } from 'lucide-react'
|
||||
import { mockInquiries } from '../../mock-data/inquiries'
|
||||
import { usePipelineStore } from '../../stores/pipelineStore'
|
||||
import { useToastStore } from '../../stores/toastStore'
|
||||
import type { InquiryMessage } from '../../domain/inquiry'
|
||||
import type { PipelineStage } from '../../domain/pipeline'
|
||||
|
||||
// ── Config ────────────────────────────────────────────────────────────────────
|
||||
|
||||
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' },
|
||||
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: 'all', label: 'Alle' },
|
||||
{ key: 'new', label: 'Neu' },
|
||||
{ key: 'in_progress', label: 'Aktiv' },
|
||||
{ key: 'answered', label: 'Beantwortet' },
|
||||
{ key: 'answered', label: 'Beantwortet' },
|
||||
]
|
||||
|
||||
// Stage order for auto-advance (KI only advances, never goes back)
|
||||
const STAGE_ORDER: PipelineStage[] = ['SAVED', 'DISCOVERED', 'QUALIFIED', 'VISITED', 'NEGOTIATION', 'CLOSED_WON', 'CLOSED_LOST']
|
||||
const STAGE_LABELS: Record<string, string> = {
|
||||
SAVED: 'Gemerkt', DISCOVERED: 'Entdeckt', QUALIFIED: 'Qualifiziert',
|
||||
VISITED: 'Besichtigt', NEGOTIATION: 'Verhandlung', CLOSED_WON: 'Gewonnen', CLOSED_LOST: 'Abgelehnt',
|
||||
}
|
||||
|
||||
// KI keyword detection
|
||||
const KI_RULES: { keywords: string[]; stage: PipelineStage; label: string }[] = [
|
||||
{
|
||||
keywords: ['vertrag unterschrieben', 'unterschrieben', 'deal abgeschlossen', 'abgeschlossen und fix', 'mietbeginn bestätigt'],
|
||||
stage: 'CLOSED_WON',
|
||||
label: 'Abschluss erkannt',
|
||||
},
|
||||
{
|
||||
keywords: ['mietvertrag', 'vertragsvorlage', 'anbiet', 'konditionen verhandl', 'preisvorstellung'],
|
||||
stage: 'NEGOTIATION',
|
||||
label: 'Verhandlung erkannt',
|
||||
},
|
||||
{
|
||||
keywords: ['besichtigungstermin', 'besichtigung', 'besichtigen', 'vorort termin', 'vor ort', 'terminvorschlag', 'termin bestätigt', 'termin vereinbart'],
|
||||
stage: 'VISITED',
|
||||
label: 'Besichtigungstermin erkannt',
|
||||
},
|
||||
]
|
||||
|
||||
function detectKiStage(text: string): { stage: PipelineStage; label: string } | null {
|
||||
const lower = text.toLowerCase()
|
||||
for (const rule of KI_RULES) {
|
||||
if (rule.keywords.some(kw => lower.includes(kw))) {
|
||||
return { stage: rule.stage, label: rule.label }
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// ── MessageBubble ─────────────────────────────────────────────────────────────
|
||||
|
||||
function MessageBubble({ msg }: { msg: InquiryMessage }) {
|
||||
const isOwnMessage = msg.senderType === 'tenant'
|
||||
const isAI = msg.senderType === 'ai'
|
||||
@@ -50,14 +94,11 @@ function MessageBubble({ msg }: { msg: InquiryMessage }) {
|
||||
variant="body2"
|
||||
sx={{
|
||||
color: isOwnMessage ? 'white' : isAI ? '#5b21b6' : '#1e293b',
|
||||
whiteSpace: 'pre-wrap',
|
||||
lineHeight: 1.65,
|
||||
fontSize: '0.875rem',
|
||||
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 => (
|
||||
@@ -91,13 +132,25 @@ function MessageBubble({ msg }: { msg: InquiryMessage }) {
|
||||
)
|
||||
}
|
||||
|
||||
// ── Anfragen page ─────────────────────────────────────────────────────────────
|
||||
|
||||
export default function Anfragen() {
|
||||
const navigate = useNavigate()
|
||||
const [searchParams] = useSearchParams()
|
||||
const { findByPropertyId, findByInquiryId, moveStage } = usePipelineStore()
|
||||
const showToast = useToastStore(s => s.showToast)
|
||||
|
||||
const preselectedId = searchParams.get('inquiry')
|
||||
|
||||
const [inquiries, setInquiries] = useState(mockInquiries)
|
||||
const [selectedId, setSelectedId] = useState<string | null>(mockInquiries[0]?.id ?? null)
|
||||
const [selectedId, setSelectedId] = useState<string | null>(
|
||||
preselectedId ?? mockInquiries[0]?.id ?? null
|
||||
)
|
||||
const [search, setSearch] = useState('')
|
||||
const [statusFilter, setStatusFilter] = useState('all')
|
||||
const [replyText, setReplyText] = useState('')
|
||||
const [mobileShowChat, setMobileShowChat] = useState(false)
|
||||
const [mobileShowChat, setMobileShowChat] = useState(!!preselectedId)
|
||||
const [kiAlert, setKiAlert] = useState<{ title: string; stage: string } | null>(null)
|
||||
const threadRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const filtered = inquiries.filter(inq => {
|
||||
@@ -113,26 +166,41 @@ export default function Anfragen() {
|
||||
const selected = inquiries.find(i => i.id === selectedId) ?? null
|
||||
const totalUnread = inquiries.reduce((sum, i) => sum + i.unreadCount, 0)
|
||||
|
||||
// Pipeline link for currently selected inquiry
|
||||
const linkedPipelineItem = selected?.propertyId
|
||||
? findByPropertyId(selected.propertyId)
|
||||
: (selected ? findByInquiryId(selected.id) : undefined)
|
||||
|
||||
useEffect(() => {
|
||||
if (threadRef.current) {
|
||||
threadRef.current.scrollTop = threadRef.current.scrollHeight
|
||||
}
|
||||
}, [selected?.thread.length])
|
||||
|
||||
// Auto-dismiss KI alert after 6s
|
||||
useEffect(() => {
|
||||
if (!kiAlert) return
|
||||
const t = setTimeout(() => setKiAlert(null), 6000)
|
||||
return () => clearTimeout(t)
|
||||
}, [kiAlert])
|
||||
|
||||
function handleSelect(id: string) {
|
||||
setSelectedId(id)
|
||||
setInquiries(prev => prev.map(i => i.id === id ? { ...i, isRead: true, unreadCount: 0 } : i))
|
||||
setMobileShowChat(true)
|
||||
setKiAlert(null)
|
||||
}
|
||||
|
||||
function handleSend() {
|
||||
if (!replyText.trim() || !selectedId) return
|
||||
const text = replyText.trim()
|
||||
|
||||
const msg: InquiryMessage = {
|
||||
id: `msg-${Date.now()}`,
|
||||
inquiryId: selectedId,
|
||||
senderType: 'tenant',
|
||||
senderName: 'Sie',
|
||||
body: replyText.trim(),
|
||||
body: text,
|
||||
attachments: [],
|
||||
createdAt: new Date().toISOString(),
|
||||
}
|
||||
@@ -142,12 +210,28 @@ export default function Anfragen() {
|
||||
: i
|
||||
))
|
||||
setReplyText('')
|
||||
|
||||
// KI: detect stage transition from message content
|
||||
const ki = detectKiStage(text)
|
||||
if (ki && selected) {
|
||||
const pipelineItem = selected.propertyId
|
||||
? findByPropertyId(selected.propertyId)
|
||||
: findByInquiryId(selectedId)
|
||||
if (pipelineItem) {
|
||||
const currentIdx = STAGE_ORDER.indexOf(pipelineItem.stage)
|
||||
const targetIdx = STAGE_ORDER.indexOf(ki.stage)
|
||||
if (targetIdx > currentIdx) {
|
||||
moveStage(pipelineItem.id, ki.stage)
|
||||
setKiAlert({ title: pipelineItem.title, stage: STAGE_LABELS[ki.stage] })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', height: '100%', overflow: 'hidden' }}>
|
||||
|
||||
{/* ── Left panel: inquiry list ── */}
|
||||
{/* ── Left panel ── */}
|
||||
<Box
|
||||
sx={{
|
||||
width: { xs: mobileShowChat ? 0 : '100%', md: 320 },
|
||||
@@ -160,40 +244,23 @@ export default function Anfragen() {
|
||||
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' }}
|
||||
/>
|
||||
<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>
|
||||
),
|
||||
}}
|
||||
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)}
|
||||
<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',
|
||||
@@ -206,136 +273,101 @@ export default function Anfragen() {
|
||||
</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]
|
||||
) : 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]
|
||||
const hasPipeline = !!(inq.propertyId ? findByPropertyId(inq.propertyId) : findByInquiryId(inq.id))
|
||||
|
||||
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>
|
||||
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>
|
||||
|
||||
{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 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' }}>
|
||||
{inq.matchScore}%
|
||||
</Typography>
|
||||
)}
|
||||
{hasPipeline && (
|
||||
<Chip
|
||||
icon={<Kanban size={9} />}
|
||||
label="Pipeline"
|
||||
size="small"
|
||||
sx={{ height: 16, fontSize: '0.6rem', bgcolor: '#eff6ff', color: '#1e3a5f', fontWeight: 600, '& .MuiChip-icon': { color: '#1e3a5f' } }}
|
||||
/>
|
||||
)}
|
||||
</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,
|
||||
}}
|
||||
>
|
||||
{/* ── Right panel: chat ── */}
|
||||
<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>
|
||||
<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.</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)}
|
||||
>
|
||||
<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 }}>
|
||||
@@ -343,14 +375,8 @@ export default function Anfragen() {
|
||||
</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>
|
||||
)}
|
||||
<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}
|
||||
@@ -358,35 +384,67 @@ export default function Anfragen() {
|
||||
</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={`${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',
|
||||
}}
|
||||
sx={{ bgcolor: STATUS_CONFIG[selected.status ?? 'new']?.bgColor, color: STATUS_CONFIG[selected.status ?? 'new']?.color, fontWeight: 600, height: 22, fontSize: '0.75rem' }}
|
||||
/>
|
||||
{/* Pipeline link */}
|
||||
{linkedPipelineItem && (
|
||||
<Chip
|
||||
icon={<Kanban size={11} />}
|
||||
label={STAGE_LABELS[linkedPipelineItem.stage] ?? linkedPipelineItem.stage}
|
||||
size="small"
|
||||
onClick={() => navigate('/demand/pipeline')}
|
||||
sx={{
|
||||
height: 22, fontSize: '0.75rem', cursor: 'pointer',
|
||||
bgcolor: '#eff6ff', color: '#1e3a5f', fontWeight: 600,
|
||||
border: '1px solid #bfdbfe',
|
||||
'& .MuiChip-icon': { color: '#1e3a5f' },
|
||||
'&:hover': { bgcolor: '#dbeafe' },
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Property reference */}
|
||||
{(linkedPipelineItem?.propertyAddress ?? selected.subject) && (
|
||||
<Box sx={{ mt: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Building2 size={12} color="#64748b" />
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{linkedPipelineItem?.propertyAddress ?? selected.subject}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* KI stage-change alert */}
|
||||
{kiAlert && (
|
||||
<Box sx={{ px: 3, pt: 1.5, flexShrink: 0 }}>
|
||||
<Alert
|
||||
severity="info"
|
||||
icon={<Bot size={16} />}
|
||||
onClose={() => setKiAlert(null)}
|
||||
sx={{ py: 0.5, bgcolor: '#faf5ff', color: '#4c1d95', border: '1px solid #ddd6fe', '& .MuiAlert-icon': { color: '#7c3aed' } }}
|
||||
>
|
||||
<strong>KI erkannt:</strong> „{kiAlert.title}" wurde in der Pipeline auf <strong>{kiAlert.stage}</strong> verschoben.{' '}
|
||||
<Box component="span" sx={{ cursor: 'pointer', textDecoration: 'underline' }} onClick={() => navigate('/demand/pipeline')}>
|
||||
Pipeline öffnen
|
||||
</Box>
|
||||
</Alert>
|
||||
</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 }}
|
||||
>
|
||||
<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} />
|
||||
))}
|
||||
@@ -396,39 +454,23 @@ export default function Anfragen() {
|
||||
<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"
|
||||
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 },
|
||||
}}
|
||||
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' },
|
||||
}}
|
||||
>
|
||||
<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
|
||||
Ctrl + Enter · KI erkennt Terminvereinbarungen automatisch
|
||||
</Typography>
|
||||
</Box>
|
||||
</>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useState } from 'react'
|
||||
import { useNavigate } from 'react-router'
|
||||
import {
|
||||
Box, Typography, Chip, Paper, Button, IconButton, TextField, Divider,
|
||||
Box, Typography, Chip, Paper, Button, IconButton, TextField, Divider, Tooltip,
|
||||
} from '@mui/material'
|
||||
import {
|
||||
DndContext, DragOverlay, PointerSensor, useSensor, useSensors,
|
||||
@@ -8,7 +9,7 @@ import {
|
||||
} from '@dnd-kit/core'
|
||||
import type { DragEndEvent, DragStartEvent } from '@dnd-kit/core'
|
||||
import { CSS } from '@dnd-kit/utilities'
|
||||
import { X, Sparkles, FileText, StickyNote, ChevronRight, TrendingUp, AlertTriangle, CheckCircle, Bookmark } from 'lucide-react'
|
||||
import { X, Sparkles, FileText, StickyNote, ChevronRight, TrendingUp, AlertTriangle, CheckCircle, MessageSquare, MapPin } from 'lucide-react'
|
||||
import { usePipelineStore } from '../../stores/pipelineStore'
|
||||
import { AddToPipelineDialog } from '../../components/shortlist'
|
||||
import type { PipelineItem, PipelineStage } from '../../domain/pipeline'
|
||||
@@ -107,11 +108,13 @@ function DraggableCard({
|
||||
isSelected,
|
||||
onSelect,
|
||||
isDragOverlay = false,
|
||||
onChatClick,
|
||||
}: {
|
||||
item: PipelineItem
|
||||
isSelected: boolean
|
||||
onSelect: (item: PipelineItem) => void
|
||||
isDragOverlay?: boolean
|
||||
onChatClick?: (e: React.MouseEvent) => void
|
||||
}) {
|
||||
const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({ id: item.id })
|
||||
|
||||
@@ -144,17 +147,29 @@ function DraggableCard({
|
||||
}}
|
||||
{...(isDragOverlay ? {} : { ...attributes, ...listeners })}
|
||||
>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 1, mb: 0.5 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 1, mb: 0.375 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 700, flex: 1, minWidth: 0, lineHeight: 1.3 }} noWrap>
|
||||
{item.title}
|
||||
</Typography>
|
||||
<Typography sx={{ fontWeight: 900, fontSize: '0.9rem', color: scoreColor(item.matchScore), flexShrink: 0 }}>
|
||||
{item.matchScore}%
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, flexShrink: 0 }}>
|
||||
{item.inquiryId && onChatClick && !isDragOverlay && (
|
||||
<Tooltip title="Chat öffnen">
|
||||
<IconButton size="small" onClick={onChatClick} sx={{ p: 0.25, color: '#1e3a5f', '&:hover': { bgcolor: '#eff6ff' } }}>
|
||||
<MessageSquare size={13} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Typography sx={{ fontWeight: 900, fontSize: '0.9rem', color: scoreColor(item.matchScore) }}>
|
||||
{item.matchScore}%
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 0.5 }}>
|
||||
<MapPin size={10} color="#94a3b8" />
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.7rem' }}>
|
||||
{item.propertyAddress ?? item.location}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5 }}>
|
||||
{item.location}
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, flexWrap: 'wrap' }}>
|
||||
<Chip
|
||||
size="small"
|
||||
@@ -180,12 +195,14 @@ function DroppableColumn({
|
||||
items,
|
||||
selectedId,
|
||||
onSelect,
|
||||
onChatClick,
|
||||
isOver,
|
||||
}: {
|
||||
stage: typeof STAGES[number]
|
||||
items: PipelineItem[]
|
||||
selectedId: string | null
|
||||
onSelect: (item: PipelineItem) => void
|
||||
onChatClick: (inquiryId: string) => void
|
||||
isOver: boolean
|
||||
}) {
|
||||
const { setNodeRef } = useDroppable({ id: stage.key })
|
||||
@@ -211,6 +228,7 @@ function DroppableColumn({
|
||||
item={item}
|
||||
isSelected={item.id === selectedId}
|
||||
onSelect={onSelect}
|
||||
onChatClick={item.inquiryId ? (e) => { e.stopPropagation(); onChatClick(item.inquiryId!) } : undefined}
|
||||
/>
|
||||
))}
|
||||
{items.length === 0 && (
|
||||
@@ -227,6 +245,7 @@ function DroppableColumn({
|
||||
// ── DetailPanel ───────────────────────────────────────────────────────────────
|
||||
|
||||
function DetailPanel({ item, onClose }: { item: PipelineItem; onClose: () => void }) {
|
||||
const navigate = useNavigate()
|
||||
const { moveStage, updateNotes, loseItem } = usePipelineStore()
|
||||
const [notes, setNotes] = useState(item.notes ?? '')
|
||||
const stageConfig = STAGES.find(s => s.key === item.stage)!
|
||||
@@ -265,8 +284,33 @@ function DetailPanel({ item, onClose }: { item: PipelineItem; onClose: () => voi
|
||||
<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 sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Chip label={stageConfig.label} size="small" sx={{ bgcolor: stageConfig.bgColor, color: stageConfig.color, fontWeight: 700, height: 22, fontSize: '0.75rem' }} />
|
||||
{item.inquiryId && (
|
||||
<Chip
|
||||
icon={<MessageSquare size={11} />}
|
||||
label="Chat"
|
||||
size="small"
|
||||
onClick={() => navigate(`/demand/anfragen?inquiry=${item.inquiryId}`)}
|
||||
sx={{
|
||||
height: 22, fontSize: '0.75rem', cursor: 'pointer',
|
||||
bgcolor: '#eff6ff', color: '#1e3a5f', fontWeight: 600,
|
||||
border: '1px solid #bfdbfe',
|
||||
'& .MuiChip-icon': { color: '#1e3a5f' },
|
||||
'&:hover': { bgcolor: '#dbeafe' },
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Property / unit address */}
|
||||
{item.propertyAddress && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mt: 1.25 }}>
|
||||
<MapPin size={12} color="#64748b" />
|
||||
<Typography variant="caption" color="text.secondary">{item.propertyAddress}</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ flex: 1, overflowY: 'auto' }}>
|
||||
@@ -391,6 +435,7 @@ function DetailPanel({ item, onClose }: { item: PipelineItem; onClose: () => voi
|
||||
// ── Pipeline page ─────────────────────────────────────────────────────────────
|
||||
|
||||
export default function Pipeline() {
|
||||
const navigate = useNavigate()
|
||||
const { items, moveStage } = usePipelineStore()
|
||||
const [selectedItem, setSelectedItem] = useState<PipelineItem | null>(null)
|
||||
const [activeId, setActiveId] = useState<string | null>(null)
|
||||
@@ -492,6 +537,7 @@ export default function Pipeline() {
|
||||
items={columnItems}
|
||||
selectedId={syncedSelected?.id ?? null}
|
||||
onSelect={handleSelect}
|
||||
onChatClick={(inquiryId) => navigate(`/demand/anfragen?inquiry=${inquiryId}`)}
|
||||
isOver={isOver}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
Reference in New Issue
Block a user