refactor: split PropertyDetail, Anfragen, AISearch god components
PropertyDetail.tsx: 565→118 lines - Removed duplicate constants (import from MatchDetailPropertyDetails) - PropertyDetailPublicSections: Preis/Hauptangaben/Eigenschaften/Wegzeit/Einheiten/Beschreibung/Quelle sections - PropertyContactForm: Verwaltung kontaktieren form Anfragen.tsx: 481→320 lines - anfragenKiDetection.ts: STAGE_ORDER, STAGE_LABELS, KI_RULES, detectKiStage - AnfragenMessageBubble: chat message bubble component - AnfragenInquiryItem: inquiry list row component AISearch.tsx: 398→342 lines - needSearchMapper.ts: generateSummary + buildNeedInput pure functions Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
+14
-175
@@ -4,12 +4,14 @@ import {
|
||||
Box, Typography, TextField, Chip, Avatar, IconButton,
|
||||
InputAdornment, Alert,
|
||||
} from '@mui/material'
|
||||
import { Search, Send, Paperclip, ArrowLeft, FileText, Bot, Building2, Kanban } from 'lucide-react'
|
||||
import { Search, Send, Paperclip, ArrowLeft, 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'
|
||||
import { STAGE_ORDER, STAGE_LABELS, detectKiStage } from './anfragenKiDetection'
|
||||
import { AnfragenMessageBubble } from '../../components/demand/AnfragenMessageBubble'
|
||||
import { AnfragenInquiryItem } from '../../components/demand/AnfragenInquiryItem'
|
||||
|
||||
// ── Config ────────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -27,111 +29,6 @@ const FILTER_TABS = [
|
||||
{ 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'
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Anfragen page ─────────────────────────────────────────────────────────────
|
||||
|
||||
export default function Anfragen() {
|
||||
@@ -278,73 +175,15 @@ export default function Anfragen() {
|
||||
<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]
|
||||
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>
|
||||
</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>
|
||||
)
|
||||
})}
|
||||
) : filtered.map(inq => (
|
||||
<AnfragenInquiryItem
|
||||
key={inq.id}
|
||||
inq={inq}
|
||||
isSelected={inq.id === selectedId}
|
||||
hasPipeline={!!(inq.propertyId ? findByPropertyId(inq.propertyId) : findByInquiryId(inq.id))}
|
||||
onSelect={handleSelect}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@@ -446,7 +285,7 @@ export default function Anfragen() {
|
||||
{/* 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} />
|
||||
<AnfragenMessageBubble key={msg.id} msg={msg} />
|
||||
))}
|
||||
</Box>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user