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
2026-05-22 21:42:21 +02:00
parent a002597f5b
commit 6a6ff7f2e2
8 changed files with 505 additions and 233 deletions
+50 -9
View File
@@ -1,5 +1,6 @@
import { Box, Chip, IconButton, Tooltip, Typography } from '@mui/material' import { Box, Chip, IconButton, Tooltip, Typography } from '@mui/material'
import { X, AlertTriangle } from 'lucide-react' import { X, AlertTriangle, Bookmark, BookmarkCheck } from 'lucide-react'
import { usePipelineStore } from '../../stores/pipelineStore'
import type { UnifiedMatchResult } from '../../domain/unifiedResult' import type { UnifiedMatchResult } from '../../domain/unifiedResult'
const TYPE_META: Record<string, { label: string; color: string }> = { const TYPE_META: Record<string, { label: string; color: string }> = {
@@ -17,30 +18,70 @@ interface Props {
} }
export function CompareColumnHeader({ item, onRemove }: Props) { export function CompareColumnHeader({ item, onRemove }: Props) {
const { items: pipelineItems, openSavedDialog } = usePipelineStore()
const meta = TYPE_META[item.resultType] ?? { label: item.resultType, color: '#64748b' } const meta = TYPE_META[item.resultType] ?? { label: item.resultType, color: '#64748b' }
const prop = item.resultType !== 'FUTURE_AVAILABILITY' ? (item as any).property : null const prop = item.resultType !== 'FUTURE_AVAILABILITY' ? (item as any).property : null
const sig = item.resultType === 'FUTURE_AVAILABILITY' ? (item as any).signal : null const sig = item.resultType === 'FUTURE_AVAILABILITY' ? (item as any).signal : null
const title = prop?.title ?? sig?.companyName ?? sig?.locationHint ?? '' const title = prop?.title ?? sig?.companyName ?? sig?.locationHint ?? ''
const subtitle = prop?.location?.city ?? sig?.locationHint ?? '' const subtitle = prop?.location?.city ?? sig?.locationHint ?? ''
const district = prop?.location?.district
const availability = prop?.availabilityDate ?? (sig ? `~${sig.timeHorizonMonths} Monate` : null) const availability = prop?.availabilityDate ?? (sig ? `~${sig.timeHorizonMonths} Monate` : null)
const confidence = Math.round(item.match.confidenceLevel * 100) const confidence = Math.round(item.match.confidenceLevel * 100)
const source = prop?.sourceLabel ?? sig?.source?.type ?? '' const source = prop?.sourceLabel ?? sig?.source?.type ?? ''
const isInPipeline = pipelineItems.some(
pi => pi.id === item.matchId || (prop?.id && pi.propertyId === prop.id)
)
function handleSave() {
if (isInPipeline) return
openSavedDialog({
resultId: item.matchId,
resultType: item.resultType,
title,
location: prop?.location?.city ?? sig?.locationHint,
matchScore: item.matchScore,
propertyId: prop?.id,
propertyAddress: prop ? `${title}, ${subtitle}${district ? `, ${district}` : ''}` : undefined,
areaLabel: prop?.areaSqm ? `${prop.areaSqm.toLocaleString('de-CH')}` : undefined,
rentLabel: prop?.rentPricePerSqm ? `CHF ${prop.rentPricePerSqm}/m²` : undefined,
availabilityLabel: prop?.availabilityDate ?? undefined,
})
}
return ( return (
<Box sx={{ p: 0.5 }}> <Box sx={{ p: 0.5 }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 1 }}> <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 1 }}>
<Chip label={meta.label} size="small" sx={{ bgcolor: meta.color, color: 'white', fontWeight: 600, fontSize: 10 }} /> <Chip label={meta.label} size="small" sx={{ bgcolor: meta.color, color: 'white', fontWeight: 600, fontSize: 10 }} />
<IconButton size="small" onClick={onRemove} sx={{ p: 0.25, ml: 1 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25 }}>
<X size={14} /> <Tooltip title={isInPipeline ? 'Bereits in Pipeline' : 'In Pipeline merken'}>
</IconButton> <IconButton
size="small"
onClick={handleSave}
sx={{
p: 0.25,
color: isInPipeline ? '#1a7a4a' : '#94a3b8',
'&:hover': { color: isInPipeline ? '#1a7a4a' : '#1e3a5f' },
}}
>
{isInPipeline
? <BookmarkCheck size={14} />
: <Bookmark size={14} />}
</IconButton>
</Tooltip>
<IconButton size="small" onClick={onRemove} sx={{ p: 0.25, ml: 0.25 }}>
<X size={14} />
</IconButton>
</Box>
</Box> </Box>
<Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 0.25, lineHeight: 1.3 }}> <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 0.25, lineHeight: 1.3 }}>
{title} {title}
</Typography> </Typography>
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1 }}> <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1 }}>
{subtitle} {subtitle}{district ? `, ${district}` : ''}
</Typography> </Typography>
<Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.5, mb: 0.5 }}> <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.5, mb: 0.5 }}>
+1 -1
View File
@@ -103,8 +103,8 @@ const WORKSPACE_CONFIG: Record<WorkspaceType, WorkspaceConfig> = {
{ path: '/demand/ai-search', label: 'Flächensuche', icon: Search }, { path: '/demand/ai-search', label: 'Flächensuche', icon: Search },
{ path: '/demand/results', label: 'Ergebnisse', icon: List }, { path: '/demand/results', label: 'Ergebnisse', icon: List },
{ path: '/demand/compare', label: 'Vergleich', icon: Columns2 }, { path: '/demand/compare', label: 'Vergleich', icon: Columns2 },
{ path: '/demand/anfragen', label: 'Anfragen', icon: MessageSquare },
{ path: '/demand/pipeline', label: 'Deal Pipeline', icon: Kanban }, { path: '/demand/pipeline', label: 'Deal Pipeline', icon: Kanban },
{ path: '/demand/anfragen', label: 'Anfragen', icon: MessageSquare },
], ],
}, },
} }
+14 -7
View File
@@ -33,13 +33,20 @@ export function UnifiedResultCard({ result, view = 'list' }: Props) {
label: 'Merken', label: 'Merken',
actionType: 'SAVE_SHORTLIST', actionType: 'SAVE_SHORTLIST',
variant: 'secondary', variant: 'secondary',
onClick: () => openSavedDialog({ onClick: () => {
resultId: result.matchId, const prop = result.resultType !== 'FUTURE_AVAILABILITY' ? (result as any).property : null
resultType: result.resultType, openSavedDialog({
title: getResultTitle(result), resultId: result.matchId,
matchScore: result.matchScore, resultType: result.resultType,
location: result.resultType !== 'FUTURE_AVAILABILITY' ? result.property.location?.city : undefined, title: getResultTitle(result),
}), matchScore: result.matchScore,
location: prop?.location?.city,
propertyId: prop?.id,
propertyAddress: prop ? `${prop.title}, ${prop.location?.city ?? ''}` : undefined,
areaLabel: prop?.areaSqm ? `${prop.areaSqm.toLocaleString('de-CH')}` : undefined,
rentLabel: prop?.rentPricePerSqm ? `CHF ${prop.rentPricePerSqm}/m²` : undefined,
})
},
}, },
{ {
id: 'compare', id: 'compare',
+7
View File
@@ -7,6 +7,13 @@ export interface PipelineItem {
matchScore: number matchScore: number
resultType: 'VERIFIED_PORTFOLIO' | 'EXTERNAL_MARKET' | 'MAISON_WORK' | 'FUTURE_AVAILABILITY' resultType: 'VERIFIED_PORTFOLIO' | 'EXTERNAL_MARKET' | 'MAISON_WORK' | 'FUTURE_AVAILABILITY'
stage: PipelineStage stage: PipelineStage
// Property / unit reference — always set for unit-level tracking
propertyId?: string
unitId?: string
propertyAddress?: string
// Linked inquiry (chat thread)
inquiryId?: string
// Display labels
areaLabel?: string areaLabel?: string
rentLabel?: string rentLabel?: string
availabilityLabel?: string availabilityLabel?: string
+118 -8
View File
@@ -1,12 +1,122 @@
import type { PipelineItem } from '../domain/pipeline' import type { PipelineItem } from '../domain/pipeline'
export const mockPipelineItems: PipelineItem[] = [ export const mockPipelineItems: PipelineItem[] = [
{ id: 'pl-001', title: 'Bürofläche Zollstrasse 12', location: 'Zürich, Zürich-West', matchScore: 91, resultType: 'VERIFIED_PORTFOLIO', stage: 'NEGOTIATION', areaLabel: '850 m²', rentLabel: 'CHF 42/m²', availabilityLabel: '2025-09-01', addedAt: '2025-05-01T10:00:00Z', updatedAt: '2025-05-15T14:00:00Z', assignedTo: 'B. Sutter' }, {
{ id: 'pl-002', title: 'Gewerbe Hardturmstrasse', location: 'Zürich-West', matchScore: 87, resultType: 'VERIFIED_PORTFOLIO', stage: 'VISITED', areaLabel: '1200 m²', rentLabel: 'CHF 38/m²', availabilityLabel: '2025-10-01', addedAt: '2025-05-03T10:00:00Z', updatedAt: '2025-05-14T09:00:00Z' }, id: 'pl-001',
{ id: 'pl-003', title: 'Büro Binzstrasse 23', location: 'Zürich, Binz', matchScore: 83, resultType: 'MAISON_WORK', stage: 'VISITED', areaLabel: '720 m²', rentLabel: 'CHF 47/m²', addedAt: '2025-05-04T10:00:00Z', updatedAt: '2025-05-13T10:00:00Z' }, propertyId: 'prop-001',
{ id: 'pl-004', title: 'Bürofläche Bahnhofstrasse', location: 'Zürich, Innenstadt', matchScore: 79, resultType: 'MAISON_WORK', stage: 'QUALIFIED', areaLabel: '950 m²', rentLabel: 'CHF 85/m²', addedAt: '2025-05-05T10:00:00Z', updatedAt: '2025-05-12T10:00:00Z', notes: 'Budget zu hoch — prüfen' }, inquiryId: 'inq-001',
{ id: 'pl-005', title: 'DataCloud Systems AG', location: 'Zürich-West / Technopark', matchScore: 76, resultType: 'FUTURE_AVAILABILITY', stage: 'QUALIFIED', areaLabel: '~600 m²', availabilityLabel: '~10 Monate', addedAt: '2025-05-06T10:00:00Z', updatedAt: '2025-05-11T10:00:00Z' }, propertyAddress: 'Zollstrasse 12, Zürich-West',
{ id: 'pl-006', title: 'Neubau Wankdorf Business', location: 'Bern, Wankdorf', matchScore: 72, resultType: 'FUTURE_AVAILABILITY', stage: 'DISCOVERED', areaLabel: '~4500 m²', availabilityLabel: '~24 Monate', addedAt: '2025-05-07T10:00:00Z', updatedAt: '2025-05-10T10:00:00Z' }, title: 'Bürofläche Zollstrasse 12',
{ id: 'pl-007', title: 'Bürofläche Stadthaus Bern', location: 'Bern Innenstadt', matchScore: 88, resultType: 'VERIFIED_PORTFOLIO', stage: 'CLOSED_WON', areaLabel: '650 m²', rentLabel: 'CHF 52/m²', availabilityLabel: '2025-07-01', addedAt: '2025-04-10T10:00:00Z', updatedAt: '2025-05-08T10:00:00Z', assignedTo: 'B. Sutter', notes: 'Vertrag unterschrieben' }, location: 'Zürich, Zürich-West',
{ id: 'pl-008', title: 'Gewerbe Güterstrasse', location: 'Basel', matchScore: 68, resultType: 'EXTERNAL_MARKET', stage: 'CLOSED_LOST', areaLabel: '800 m²', rentLabel: 'CHF 28/m²', addedAt: '2025-04-15T10:00:00Z', updatedAt: '2025-05-05T10:00:00Z', notes: 'Vermieter hat anderes Unternehmen bevorzugt' }, matchScore: 91,
resultType: 'VERIFIED_PORTFOLIO',
stage: 'NEGOTIATION',
areaLabel: '850 m²',
rentLabel: 'CHF 42/m²',
availabilityLabel: '2026-09-01',
addedAt: '2026-05-01T10:00:00Z',
updatedAt: '2026-05-15T14:00:00Z',
assignedTo: 'B. Sutter',
},
{
id: 'pl-002',
propertyId: 'prop-007',
inquiryId: 'inq-005',
propertyAddress: 'Thurgauerstrasse 40, Zürich-Oerlikon',
title: 'Büro Oerlikon Thurgauerstrasse',
location: 'Zürich-Oerlikon',
matchScore: 87,
resultType: 'VERIFIED_PORTFOLIO',
stage: 'QUALIFIED',
areaLabel: '1200 m²',
rentLabel: 'CHF 38/m²',
availabilityLabel: '2026-10-01',
addedAt: '2026-05-03T10:00:00Z',
updatedAt: '2026-05-14T09:00:00Z',
},
{
id: 'pl-003',
propertyAddress: 'Binzstrasse 23, Zürich-Binz',
title: 'Büro Binzstrasse 23',
location: 'Zürich, Binz',
matchScore: 83,
resultType: 'MAISON_WORK',
stage: 'VISITED',
areaLabel: '720 m²',
rentLabel: 'CHF 47/m²',
addedAt: '2026-05-04T10:00:00Z',
updatedAt: '2026-05-13T10:00:00Z',
},
{
id: 'pl-004',
propertyId: 'prop-012',
inquiryId: 'inq-004',
propertyAddress: 'Baarerstrasse 14, Zug',
title: 'Bürofläche Zug Baarerstrasse',
location: 'Zug',
matchScore: 93,
resultType: 'VERIFIED_PORTFOLIO',
stage: 'VISITED',
areaLabel: '950 m²',
rentLabel: 'CHF 56/m²',
addedAt: '2026-05-05T10:00:00Z',
updatedAt: '2026-05-12T10:00:00Z',
notes: 'Besichtigungstermin 22.05. bestätigt',
},
{
id: 'pl-005',
propertyAddress: 'Technopark, Zürich-West',
title: 'DataCloud Systems AG',
location: 'Zürich-West / Technopark',
matchScore: 76,
resultType: 'FUTURE_AVAILABILITY',
stage: 'QUALIFIED',
areaLabel: '~600 m²',
availabilityLabel: '~10 Monate',
addedAt: '2026-05-06T10:00:00Z',
updatedAt: '2026-05-11T10:00:00Z',
},
{
id: 'pl-006',
propertyAddress: 'Wankdorf Business Park, Bern',
title: 'Neubau Wankdorf Business',
location: 'Bern, Wankdorf',
matchScore: 72,
resultType: 'FUTURE_AVAILABILITY',
stage: 'SAVED',
areaLabel: '~4500 m²',
availabilityLabel: '~24 Monate',
addedAt: '2026-05-07T10:00:00Z',
updatedAt: '2026-05-10T10:00:00Z',
},
{
id: 'pl-007',
propertyAddress: 'Stadthaus-Gasse 1, Bern Innenstadt',
title: 'Bürofläche Stadthaus Bern',
location: 'Bern Innenstadt',
matchScore: 88,
resultType: 'VERIFIED_PORTFOLIO',
stage: 'CLOSED_WON',
areaLabel: '650 m²',
rentLabel: 'CHF 52/m²',
availabilityLabel: '2026-07-01',
addedAt: '2026-04-10T10:00:00Z',
updatedAt: '2026-05-08T10:00:00Z',
assignedTo: 'B. Sutter',
notes: 'Vertrag unterschrieben',
},
{
id: 'pl-008',
propertyAddress: 'Güterstrasse 22, Basel',
title: 'Gewerbe Güterstrasse Basel',
location: 'Basel',
matchScore: 68,
resultType: 'EXTERNAL_MARKET',
stage: 'CLOSED_LOST',
areaLabel: '800 m²',
rentLabel: 'CHF 28/m²',
addedAt: '2026-04-15T10:00:00Z',
updatedAt: '2026-05-05T10:00:00Z',
notes: 'Vermieter hat anderes Unternehmen bevorzugt',
},
] ]
+240 -198
View File
@@ -1,26 +1,70 @@
import { useState, useEffect, useRef } from 'react' import { useState, useEffect, useRef } from 'react'
import { useNavigate, useSearchParams } from 'react-router'
import { import {
Box, Typography, TextField, Chip, Avatar, IconButton, Box, Typography, TextField, Chip, Avatar, IconButton,
InputAdornment, Paper, InputAdornment, Alert,
} from '@mui/material' } 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 { mockInquiries } from '../../mock-data/inquiries'
import { usePipelineStore } from '../../stores/pipelineStore'
import { useToastStore } from '../../stores/toastStore'
import type { InquiryMessage } from '../../domain/inquiry' import type { InquiryMessage } from '../../domain/inquiry'
import type { PipelineStage } from '../../domain/pipeline'
// ── Config ────────────────────────────────────────────────────────────────────
const STATUS_CONFIG: Record<string, { label: string; color: string; bgColor: string }> = { const STATUS_CONFIG: Record<string, { label: string; color: string; bgColor: string }> = {
new: { label: 'Neu', color: '#dc2626', bgColor: '#fef2f2' }, new: { label: 'Neu', color: '#dc2626', bgColor: '#fef2f2' },
in_progress: { label: 'Aktiv', color: '#d97706', bgColor: '#fffbeb' }, in_progress:{ label: 'Aktiv', color: '#d97706', bgColor: '#fffbeb' },
answered: { label: 'Beantwortet', color: '#1a7a4a', bgColor: '#f0fdf4' }, answered: { label: 'Beantwortet', color: '#1a7a4a', bgColor: '#f0fdf4' },
archived: { label: 'Archiviert', color: '#64748b', bgColor: '#f8fafc' }, archived: { label: 'Archiviert', color: '#64748b', bgColor: '#f8fafc' },
} }
const FILTER_TABS = [ const FILTER_TABS = [
{ key: 'all', label: 'Alle' }, { key: 'all', label: 'Alle' },
{ key: 'new', label: 'Neu' }, { key: 'new', label: 'Neu' },
{ key: 'in_progress', label: 'Aktiv' }, { 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 }) { function MessageBubble({ msg }: { msg: InquiryMessage }) {
const isOwnMessage = msg.senderType === 'tenant' const isOwnMessage = msg.senderType === 'tenant'
const isAI = msg.senderType === 'ai' const isAI = msg.senderType === 'ai'
@@ -50,14 +94,11 @@ function MessageBubble({ msg }: { msg: InquiryMessage }) {
variant="body2" variant="body2"
sx={{ sx={{
color: isOwnMessage ? 'white' : isAI ? '#5b21b6' : '#1e293b', color: isOwnMessage ? 'white' : isAI ? '#5b21b6' : '#1e293b',
whiteSpace: 'pre-wrap', whiteSpace: 'pre-wrap', lineHeight: 1.65, fontSize: '0.875rem',
lineHeight: 1.65,
fontSize: '0.875rem',
}} }}
> >
{msg.body} {msg.body}
</Typography> </Typography>
{msg.attachments.length > 0 && ( {msg.attachments.length > 0 && (
<Box sx={{ mt: 1, display: 'flex', flexDirection: 'column', gap: 0.5 }}> <Box sx={{ mt: 1, display: 'flex', flexDirection: 'column', gap: 0.5 }}>
{msg.attachments.map(att => ( {msg.attachments.map(att => (
@@ -91,13 +132,25 @@ function MessageBubble({ msg }: { msg: InquiryMessage }) {
) )
} }
// ── Anfragen page ─────────────────────────────────────────────────────────────
export default function Anfragen() { 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 [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 [search, setSearch] = useState('')
const [statusFilter, setStatusFilter] = useState('all') const [statusFilter, setStatusFilter] = useState('all')
const [replyText, setReplyText] = useState('') 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 threadRef = useRef<HTMLDivElement>(null)
const filtered = inquiries.filter(inq => { const filtered = inquiries.filter(inq => {
@@ -113,26 +166,41 @@ export default function Anfragen() {
const selected = inquiries.find(i => i.id === selectedId) ?? null const selected = inquiries.find(i => i.id === selectedId) ?? null
const totalUnread = inquiries.reduce((sum, i) => sum + i.unreadCount, 0) 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(() => { useEffect(() => {
if (threadRef.current) { if (threadRef.current) {
threadRef.current.scrollTop = threadRef.current.scrollHeight threadRef.current.scrollTop = threadRef.current.scrollHeight
} }
}, [selected?.thread.length]) }, [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) { function handleSelect(id: string) {
setSelectedId(id) setSelectedId(id)
setInquiries(prev => prev.map(i => i.id === id ? { ...i, isRead: true, unreadCount: 0 } : i)) setInquiries(prev => prev.map(i => i.id === id ? { ...i, isRead: true, unreadCount: 0 } : i))
setMobileShowChat(true) setMobileShowChat(true)
setKiAlert(null)
} }
function handleSend() { function handleSend() {
if (!replyText.trim() || !selectedId) return if (!replyText.trim() || !selectedId) return
const text = replyText.trim()
const msg: InquiryMessage = { const msg: InquiryMessage = {
id: `msg-${Date.now()}`, id: `msg-${Date.now()}`,
inquiryId: selectedId, inquiryId: selectedId,
senderType: 'tenant', senderType: 'tenant',
senderName: 'Sie', senderName: 'Sie',
body: replyText.trim(), body: text,
attachments: [], attachments: [],
createdAt: new Date().toISOString(), createdAt: new Date().toISOString(),
} }
@@ -142,12 +210,28 @@ export default function Anfragen() {
: i : i
)) ))
setReplyText('') 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 ( return (
<Box sx={{ display: 'flex', height: '100%', overflow: 'hidden' }}> <Box sx={{ display: 'flex', height: '100%', overflow: 'hidden' }}>
{/* ── Left panel: inquiry list ── */} {/* ── Left panel ── */}
<Box <Box
sx={{ sx={{
width: { xs: mobileShowChat ? 0 : '100%', md: 320 }, width: { xs: mobileShowChat ? 0 : '100%', md: 320 },
@@ -160,40 +244,23 @@ export default function Anfragen() {
transition: 'width 0.2s ease', transition: 'width 0.2s ease',
}} }}
> >
{/* List header */}
<Box sx={{ px: 2, py: 2, borderBottom: '1px solid #e2e8f0' }}> <Box sx={{ px: 2, py: 2, borderBottom: '1px solid #e2e8f0' }}>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1.5 }}> <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1.5 }}>
<Typography variant="h6" sx={{ fontWeight: 700, fontSize: '1rem' }}>Anfragen</Typography> <Typography variant="h6" sx={{ fontWeight: 700, fontSize: '1rem' }}>Anfragen</Typography>
{totalUnread > 0 && ( {totalUnread > 0 && (
<Chip <Chip label={`${totalUnread} neu`} size="small"
label={`${totalUnread} neu`} sx={{ bgcolor: '#dc2626', color: 'white', fontWeight: 700, height: 20, fontSize: '0.7rem' }} />
size="small"
sx={{ bgcolor: '#dc2626', color: 'white', fontWeight: 700, height: 20, fontSize: '0.7rem' }}
/>
)} )}
</Box> </Box>
<TextField <TextField
size="small" size="small" placeholder="Suchen..." fullWidth
placeholder="Suchen..." value={search} onChange={e => setSearch(e.target.value)}
fullWidth InputProps={{ startAdornment: <InputAdornment position="start"><Search size={14} color="#94a3b8" /></InputAdornment> }}
value={search}
onChange={e => setSearch(e.target.value)}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search size={14} color="#94a3b8" />
</InputAdornment>
),
}}
sx={{ mb: 1.25 }} sx={{ mb: 1.25 }}
/> />
<Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}> <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
{FILTER_TABS.map(tab => ( {FILTER_TABS.map(tab => (
<Chip <Chip key={tab.key} label={tab.label} size="small" onClick={() => setStatusFilter(tab.key)}
key={tab.key}
label={tab.label}
size="small"
onClick={() => setStatusFilter(tab.key)}
sx={{ sx={{
height: 22, fontSize: '0.7rem', cursor: 'pointer', height: 22, fontSize: '0.7rem', cursor: 'pointer',
bgcolor: statusFilter === tab.key ? '#1e3a5f' : '#f1f5f9', bgcolor: statusFilter === tab.key ? '#1e3a5f' : '#f1f5f9',
@@ -206,136 +273,101 @@ export default function Anfragen() {
</Box> </Box>
</Box> </Box>
{/* List body */}
<Box sx={{ flex: 1, overflowY: 'auto' }}> <Box sx={{ flex: 1, overflowY: 'auto' }}>
{filtered.length === 0 ? ( {filtered.length === 0 ? (
<Box sx={{ p: 3, textAlign: 'center' }}> <Box sx={{ p: 3, textAlign: 'center' }}>
<Typography variant="body2" color="text.secondary">Keine Anfragen gefunden.</Typography> <Typography variant="body2" color="text.secondary">Keine Anfragen gefunden.</Typography>
</Box> </Box>
) : ( ) : filtered.map(inq => {
filtered.map(inq => { const cfg = STATUS_CONFIG[inq.status ?? 'new']
const cfg = STATUS_CONFIG[inq.status ?? 'new'] const isSelected = inq.id === selectedId
const isSelected = inq.id === selectedId const displayDate = new Date(inq.updatedAt).toLocaleDateString('de-CH', { day: '2-digit', month: '2-digit' })
const displayDate = new Date(inq.updatedAt).toLocaleDateString('de-CH', { day: '2-digit', month: '2-digit' }) const lastMsg = inq.thread[inq.thread.length - 1]
const lastMsg = inq.thread[inq.thread.length - 1] const hasPipeline = !!(inq.propertyId ? findByPropertyId(inq.propertyId) : findByInquiryId(inq.id))
return ( return (
<Box <Box key={inq.id} onClick={() => handleSelect(inq.id)} sx={{
key={inq.id} px: 2, py: 1.5,
onClick={() => handleSelect(inq.id)} borderBottom: '1px solid #f1f5f9',
sx={{ cursor: 'pointer',
px: 2, py: 1.5, bgcolor: isSelected ? '#eff6ff' : !inq.isRead ? 'rgba(220,38,38,0.03)' : 'transparent',
borderBottom: '1px solid #f1f5f9', borderLeft: isSelected ? '3px solid #1e3a5f' : '3px solid transparent',
cursor: 'pointer', '&:hover': { bgcolor: isSelected ? '#eff6ff' : '#f8fafc' },
bgcolor: isSelected ? '#eff6ff' : !inq.isRead ? 'rgba(220,38,38,0.03)' : 'transparent', transition: 'background-color 0.1s ease',
borderLeft: isSelected ? '3px solid #1e3a5f' : '3px solid transparent', }}>
'&:hover': { bgcolor: isSelected ? '#eff6ff' : '#f8fafc' }, <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 0.375 }}>
transition: 'background-color 0.1s ease', <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>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 0.375 }}> {inq.tenantName}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, minWidth: 0 }}> </Typography>
{!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> </Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }}>
{inq.tenantCompany && ( {inq.unreadCount > 0 && (
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', fontSize: '0.7rem', mb: 0.25 }} noWrap> <Box sx={{ width: 18, height: 18, borderRadius: '50%', bgcolor: '#dc2626', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
{inq.tenantCompany} <Typography sx={{ color: 'white', fontSize: '0.6rem', fontWeight: 700 }}>{inq.unreadCount}</Typography>
</Typography> </Box>
)}
<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>
)} )}
<Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.7rem' }}>{displayDate}</Typography>
</Box> </Box>
</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>
</Box> </Box>
{/* ── Right panel: chat thread ── */} {/* ── Right panel: chat ── */}
<Box <Box sx={{
sx={{ flex: 1,
flex: 1, display: { xs: mobileShowChat ? 'flex' : 'none', md: 'flex' },
display: { xs: mobileShowChat ? 'flex' : 'none', md: 'flex' }, flexDirection: 'column',
flexDirection: 'column', overflow: 'hidden',
overflow: 'hidden', bgcolor: '#f8fafc',
bgcolor: '#f8fafc', minWidth: 0,
minWidth: 0, }}>
}}
>
{!selected ? ( {!selected ? (
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', flexDirection: 'column', gap: 1 }}> <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', flexDirection: 'column', gap: 1 }}>
<Typography variant="body1" color="text.secondary" sx={{ fontWeight: 500 }}> <Typography variant="body1" color="text.secondary" sx={{ fontWeight: 500 }}>Anfrage auswählen</Typography>
Anfrage auswählen <Typography variant="caption" color="text.secondary">Wählen Sie links eine Anfrage aus.</Typography>
</Typography>
<Typography variant="caption" color="text.secondary">
Wählen Sie links eine Anfrage aus, um die Konversation zu lesen.
</Typography>
</Box> </Box>
) : ( ) : (
<> <>
{/* Chat header */} {/* Chat header */}
<Box sx={{ px: 3, py: 1.75, bgcolor: 'white', borderBottom: '1px solid #e2e8f0', flexShrink: 0 }}> <Box sx={{ px: 3, py: 1.75, bgcolor: 'white', borderBottom: '1px solid #e2e8f0', flexShrink: 0 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
<IconButton <IconButton size="small" sx={{ display: { md: 'none' }, mr: -0.5 }} onClick={() => setMobileShowChat(false)}>
size="small"
sx={{ display: { md: 'none' }, mr: -0.5 }}
onClick={() => setMobileShowChat(false)}
>
<ArrowLeft size={16} /> <ArrowLeft size={16} />
</IconButton> </IconButton>
<Avatar sx={{ width: 36, height: 36, bgcolor: '#1e3a5f', fontSize: '0.8rem', flexShrink: 0 }}> <Avatar sx={{ width: 36, height: 36, bgcolor: '#1e3a5f', fontSize: '0.8rem', flexShrink: 0 }}>
@@ -343,14 +375,8 @@ export default function Anfragen() {
</Avatar> </Avatar>
<Box sx={{ flex: 1, minWidth: 0 }}> <Box sx={{ flex: 1, minWidth: 0 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
<Typography variant="body2" sx={{ fontWeight: 700, fontSize: '0.9rem' }}> <Typography variant="body2" sx={{ fontWeight: 700, fontSize: '0.9rem' }}>{selected.tenantName}</Typography>
{selected.tenantName} {selected.tenantCompany && <Typography variant="caption" color="text.secondary">{selected.tenantCompany}</Typography>}
</Typography>
{selected.tenantCompany && (
<Typography variant="caption" color="text.secondary">
{selected.tenantCompany}
</Typography>
)}
</Box> </Box>
<Typography variant="caption" color="text.secondary" noWrap sx={{ display: 'block' }}> <Typography variant="caption" color="text.secondary" noWrap sx={{ display: 'block' }}>
{selected.subject} {selected.subject}
@@ -358,35 +384,67 @@ export default function Anfragen() {
</Box> </Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }}>
{selected.matchScore && ( {selected.matchScore && (
<Chip <Chip label={`${selected.matchScore}%`} size="small" sx={{
label={`${selected.matchScore}%`} bgcolor: selected.matchScore >= 80 ? '#f0fdf4' : '#fffbeb',
size="small" color: selected.matchScore >= 80 ? '#1a7a4a' : '#d97706',
sx={{ fontWeight: 700, height: 22, fontSize: '0.75rem',
bgcolor: selected.matchScore >= 80 ? '#f0fdf4' : '#fffbeb', border: `1px solid ${selected.matchScore >= 80 ? '#86efac' : '#fde68a'}`,
color: selected.matchScore >= 80 ? '#1a7a4a' : '#d97706', }} />
fontWeight: 700, height: 22, fontSize: '0.75rem',
border: `1px solid ${selected.matchScore >= 80 ? '#86efac' : '#fde68a'}`,
}}
/>
)} )}
<Chip <Chip
label={STATUS_CONFIG[selected.status ?? 'new']?.label ?? selected.status} label={STATUS_CONFIG[selected.status ?? 'new']?.label ?? selected.status}
size="small" size="small"
sx={{ sx={{ bgcolor: STATUS_CONFIG[selected.status ?? 'new']?.bgColor, color: STATUS_CONFIG[selected.status ?? 'new']?.color, fontWeight: 600, height: 22, fontSize: '0.75rem' }}
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>
</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> </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 */} {/* Thread */}
<Box <Box ref={threadRef} sx={{ flex: 1, overflowY: 'auto', px: { xs: 2, md: 3 }, py: 2.5, display: 'flex', flexDirection: 'column', gap: 0.5 }}>
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 => ( {selected.thread.map(msg => (
<MessageBubble key={msg.id} msg={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={{ px: { xs: 2, md: 3 }, py: 2, bgcolor: 'white', borderTop: '1px solid #e2e8f0', flexShrink: 0 }}>
<Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-end' }}> <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-end' }}>
<TextField <TextField
multiline multiline minRows={2} maxRows={6} fullWidth size="small"
minRows={2}
maxRows={6}
fullWidth
size="small"
placeholder="Antwort schreiben" placeholder="Antwort schreiben"
value={replyText} value={replyText}
onChange={e => setReplyText(e.target.value)} onChange={e => setReplyText(e.target.value)}
onKeyDown={e => { if (e.key === 'Enter' && e.ctrlKey) handleSend() }} onKeyDown={e => { if (e.key === 'Enter' && e.ctrlKey) handleSend() }}
sx={{ sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
'& .MuiOutlinedInput-root': { borderRadius: 2 },
}}
/> />
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}> <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
<IconButton size="small" sx={{ color: '#94a3b8' }}> <IconButton size="small" sx={{ color: '#94a3b8' }}><Paperclip size={16} /></IconButton>
<Paperclip size={16} /> <IconButton size="small" onClick={handleSend} disabled={!replyText.trim()}
</IconButton> sx={{ bgcolor: '#1e3a5f', color: 'white', '&:hover': { bgcolor: '#1a3050' }, '&:disabled': { bgcolor: '#e2e8f0', color: '#94a3b8' } }}>
<IconButton
size="small"
onClick={handleSend}
disabled={!replyText.trim()}
sx={{
bgcolor: '#1e3a5f', color: 'white',
'&:hover': { bgcolor: '#1a3050' },
'&:disabled': { bgcolor: '#e2e8f0', color: '#94a3b8' },
}}
>
<Send size={16} /> <Send size={16} />
</IconButton> </IconButton>
</Box> </Box>
</Box> </Box>
<Typography variant="caption" color="text.secondary" sx={{ mt: 0.5, display: 'block' }}> <Typography variant="caption" color="text.secondary" sx={{ mt: 0.5, display: 'block' }}>
Ctrl + Enter zum Senden Ctrl + Enter · KI erkennt Terminvereinbarungen automatisch
</Typography> </Typography>
</Box> </Box>
</> </>
+55 -9
View File
@@ -1,6 +1,7 @@
import { useState } from 'react' import { useState } from 'react'
import { useNavigate } from 'react-router'
import { import {
Box, Typography, Chip, Paper, Button, IconButton, TextField, Divider, Box, Typography, Chip, Paper, Button, IconButton, TextField, Divider, Tooltip,
} from '@mui/material' } from '@mui/material'
import { import {
DndContext, DragOverlay, PointerSensor, useSensor, useSensors, DndContext, DragOverlay, PointerSensor, useSensor, useSensors,
@@ -8,7 +9,7 @@ import {
} from '@dnd-kit/core' } from '@dnd-kit/core'
import type { DragEndEvent, DragStartEvent } from '@dnd-kit/core' import type { DragEndEvent, DragStartEvent } from '@dnd-kit/core'
import { CSS } from '@dnd-kit/utilities' 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 { usePipelineStore } from '../../stores/pipelineStore'
import { AddToPipelineDialog } from '../../components/shortlist' import { AddToPipelineDialog } from '../../components/shortlist'
import type { PipelineItem, PipelineStage } from '../../domain/pipeline' import type { PipelineItem, PipelineStage } from '../../domain/pipeline'
@@ -107,11 +108,13 @@ function DraggableCard({
isSelected, isSelected,
onSelect, onSelect,
isDragOverlay = false, isDragOverlay = false,
onChatClick,
}: { }: {
item: PipelineItem item: PipelineItem
isSelected: boolean isSelected: boolean
onSelect: (item: PipelineItem) => void onSelect: (item: PipelineItem) => void
isDragOverlay?: boolean isDragOverlay?: boolean
onChatClick?: (e: React.MouseEvent) => void
}) { }) {
const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({ id: item.id }) const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({ id: item.id })
@@ -144,17 +147,29 @@ function DraggableCard({
}} }}
{...(isDragOverlay ? {} : { ...attributes, ...listeners })} {...(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> <Typography variant="body2" sx={{ fontWeight: 700, flex: 1, minWidth: 0, lineHeight: 1.3 }} noWrap>
{item.title} {item.title}
</Typography> </Typography>
<Typography sx={{ fontWeight: 900, fontSize: '0.9rem', color: scoreColor(item.matchScore), flexShrink: 0 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, flexShrink: 0 }}>
{item.matchScore}% {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> </Typography>
</Box> </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' }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, flexWrap: 'wrap' }}>
<Chip <Chip
size="small" size="small"
@@ -180,12 +195,14 @@ function DroppableColumn({
items, items,
selectedId, selectedId,
onSelect, onSelect,
onChatClick,
isOver, isOver,
}: { }: {
stage: typeof STAGES[number] stage: typeof STAGES[number]
items: PipelineItem[] items: PipelineItem[]
selectedId: string | null selectedId: string | null
onSelect: (item: PipelineItem) => void onSelect: (item: PipelineItem) => void
onChatClick: (inquiryId: string) => void
isOver: boolean isOver: boolean
}) { }) {
const { setNodeRef } = useDroppable({ id: stage.key }) const { setNodeRef } = useDroppable({ id: stage.key })
@@ -211,6 +228,7 @@ function DroppableColumn({
item={item} item={item}
isSelected={item.id === selectedId} isSelected={item.id === selectedId}
onSelect={onSelect} onSelect={onSelect}
onChatClick={item.inquiryId ? (e) => { e.stopPropagation(); onChatClick(item.inquiryId!) } : undefined}
/> />
))} ))}
{items.length === 0 && ( {items.length === 0 && (
@@ -227,6 +245,7 @@ function DroppableColumn({
// ── DetailPanel ─────────────────────────────────────────────────────────────── // ── DetailPanel ───────────────────────────────────────────────────────────────
function DetailPanel({ item, onClose }: { item: PipelineItem; onClose: () => void }) { function DetailPanel({ item, onClose }: { item: PipelineItem; onClose: () => void }) {
const navigate = useNavigate()
const { moveStage, updateNotes, loseItem } = usePipelineStore() const { moveStage, updateNotes, loseItem } = usePipelineStore()
const [notes, setNotes] = useState(item.notes ?? '') const [notes, setNotes] = useState(item.notes ?? '')
const stageConfig = STAGES.find(s => s.key === item.stage)! 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 key={s.key} sx={{ flex: 1, height: 4, borderRadius: 2, bgcolor: idx <= progressIdx ? stageConfig.color : '#e2e8f0' }} />
))} ))}
</Box> </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> </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>
<Box sx={{ flex: 1, overflowY: 'auto' }}> <Box sx={{ flex: 1, overflowY: 'auto' }}>
@@ -391,6 +435,7 @@ function DetailPanel({ item, onClose }: { item: PipelineItem; onClose: () => voi
// ── Pipeline page ───────────────────────────────────────────────────────────── // ── Pipeline page ─────────────────────────────────────────────────────────────
export default function Pipeline() { export default function Pipeline() {
const navigate = useNavigate()
const { items, moveStage } = usePipelineStore() const { items, moveStage } = usePipelineStore()
const [selectedItem, setSelectedItem] = useState<PipelineItem | null>(null) const [selectedItem, setSelectedItem] = useState<PipelineItem | null>(null)
const [activeId, setActiveId] = useState<string | null>(null) const [activeId, setActiveId] = useState<string | null>(null)
@@ -492,6 +537,7 @@ export default function Pipeline() {
items={columnItems} items={columnItems}
selectedId={syncedSelected?.id ?? null} selectedId={syncedSelected?.id ?? null}
onSelect={handleSelect} onSelect={handleSelect}
onChatClick={(inquiryId) => navigate(`/demand/anfragen?inquiry=${inquiryId}`)}
isOver={isOver} isOver={isOver}
/> />
</Box> </Box>
+20 -1
View File
@@ -8,6 +8,9 @@ export interface PendingPipelineItem {
title: string title: string
location?: string location?: string
matchScore: number matchScore: number
propertyId?: string
unitId?: string
propertyAddress?: string
areaLabel?: string areaLabel?: string
rentLabel?: string rentLabel?: string
availabilityLabel?: string availabilityLabel?: string
@@ -23,6 +26,9 @@ interface PipelineStore {
moveStage: (id: string, stage: PipelineStage) => void moveStage: (id: string, stage: PipelineStage) => void
updateNotes: (id: string, notes: string) => void updateNotes: (id: string, notes: string) => void
loseItem: (id: string) => void loseItem: (id: string) => void
linkInquiry: (id: string, inquiryId: string) => void
findByPropertyId: (propertyId: string) => PipelineItem | undefined
findByInquiryId: (inquiryId: string) => PipelineItem | undefined
} }
export const usePipelineStore = create<PipelineStore>((set, get) => ({ export const usePipelineStore = create<PipelineStore>((set, get) => ({
@@ -36,7 +42,10 @@ export const usePipelineStore = create<PipelineStore>((set, get) => ({
confirmSaved: (notes) => { confirmSaved: (notes) => {
const { pendingItem, items } = get() const { pendingItem, items } = get()
if (!pendingItem) return 'duplicate' if (!pendingItem) return 'duplicate'
const alreadyExists = items.some(i => i.id === pendingItem.resultId) const alreadyExists = items.some(
i => i.id === pendingItem.resultId ||
(pendingItem.propertyId && i.propertyId === pendingItem.propertyId)
)
if (!alreadyExists) { if (!alreadyExists) {
const newItem: PipelineItem = { const newItem: PipelineItem = {
id: pendingItem.resultId, id: pendingItem.resultId,
@@ -45,6 +54,9 @@ export const usePipelineStore = create<PipelineStore>((set, get) => ({
matchScore: pendingItem.matchScore, matchScore: pendingItem.matchScore,
resultType: pendingItem.resultType, resultType: pendingItem.resultType,
stage: 'SAVED', stage: 'SAVED',
propertyId: pendingItem.propertyId,
unitId: pendingItem.unitId,
propertyAddress: pendingItem.propertyAddress,
areaLabel: pendingItem.areaLabel, areaLabel: pendingItem.areaLabel,
rentLabel: pendingItem.rentLabel, rentLabel: pendingItem.rentLabel,
availabilityLabel: pendingItem.availabilityLabel, availabilityLabel: pendingItem.availabilityLabel,
@@ -74,4 +86,11 @@ export const usePipelineStore = create<PipelineStore>((set, get) => ({
i.id === id ? { ...i, stage: 'CLOSED_LOST' as PipelineStage, updatedAt: new Date().toISOString() } : i i.id === id ? { ...i, stage: 'CLOSED_LOST' as PipelineStage, updatedAt: new Date().toISOString() } : i
), ),
})), })),
linkInquiry: (id, inquiryId) => set(state => ({
items: state.items.map(i => i.id === id ? { ...i, inquiryId } : i),
})),
findByPropertyId: (propertyId) => get().items.find(i => i.propertyId === propertyId),
findByInquiryId: (inquiryId) => get().items.find(i => i.inquiryId === inquiryId),
})) }))