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>
2026-05-24 00:55:55 +02:00
parent 4d4ea6d2ff
commit ae82d0e6a0
9 changed files with 663 additions and 689 deletions
@@ -0,0 +1,83 @@
+import { Box, Chip, Typography } from '@mui/material'
+import { Kanban } from 'lucide-react'
+import type { Inquiry } from '../../domain/inquiry'
+
+const STATUS_CONFIG: Record<string, { label: string; color: string; bgColor: string }> = {
+  new:         { label: 'Neu',          color: '#dc2626', bgColor: '#fef2f2' },
+  in_progress: { label: 'Aktiv',        color: '#d97706', bgColor: '#fffbeb' },
+  answered:    { label: 'Beantwortet',  color: '#1a7a4a', bgColor: '#f0fdf4' },
+  archived:    { label: 'Archiviert',   color: '#64748b', bgColor: '#f8fafc' },
+}
+
+interface AnfragenInquiryItemProps {
+  inq: Inquiry
+  isSelected: boolean
+  hasPipeline: boolean
+  onSelect: (id: string) => void
+}
+
+export function AnfragenInquiryItem({ inq, isSelected, hasPipeline, onSelect }: AnfragenInquiryItemProps) {
+  const cfg = STATUS_CONFIG[inq.status ?? 'new']
+  const displayDate = new Date(inq.updatedAt).toLocaleDateString('de-CH', { day: '2-digit', month: '2-digit' })
+  const lastMsg = inq.thread[inq.thread.length - 1]
+
+  return (
+    <Box onClick={() => onSelect(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>
+  )
+}