feat(agenten): Runde 4 — «Meine Agenten» mit fünf digitalen Mitarbeitenden

Setzt das Umsetzungsbriefing Runde 4 im bestehenden Frontend um. Informationsarchitektur - «Teamübersicht» heisst «Meine Agenten»; ihr bisheriger Inhalt (Kreisgrafik, Auswertung, Verbindungszusammenfassung) ist entfallen. - Personalverwaltung, Bearbeitungsverlauf und Kanäle & Systeme sind jetzt Reiter derselben Seite (?section=), gestaltet wie die Auswahl im Bearbeitungsverlauf. Es wird nur der gewählte Bereich gerendert. - Die alten Unterseitenpfade leiten um, damit Lesezeichen nicht brechen. Agentenbestand - Reto und Lea vollständig entfernt — aus Navigation, Dossiers, Protokoll, Verbindungen, Vorgängen und Porträtbestand. - Retos Aufgaben liegen bei Bruno: Nachbereitung, WhatsApp-Anruf, Protokoll und Kundennotiz, Ablage im CRM. - Livia ist «Exposé Master»: Lageberichte, Inserate, Angebotsbroschüren. - Sidebar führt Ferdi, Bruno, Livia, Nora, Sina mit Porträt und Funktion. Agentenseiten - Ein gemeinsamer AgentWorkspaceHero auf allen fünf Seiten. - Ferdi: Auswertungskarten, Priorität und Typfarben entfallen; Fälligkeit nur bei fünf Tagen oder weniger rot; Objektlinks nach «Meine Objekte»; neu die Terminplanung im verbundenen Kalender mit typgerechtem PDF-Ausschnitt. - Sina: reduzierte, filter- und sortierbare Objektübersicht; Detailansicht direkt editierbar, leere Pflichtfelder rot umrandet. - Nora: Signale ohne Prozentsätze und Konfidenzstufen, nur belegbare Angaben; Mehrfachauswahl leitet Objekte an Livia weiter. - Livia: aktive und archivierte Leads, Arbeitsbereich gleitet an den oberen Rand; dreistufiger Exposé-Prozess Hochladen → Exposé → Export. - Bruno: neue Seite mit Auftragsliste und Vor-/Nachbereitungs-Drawer; Glocke warnt bei Besichtigung unter 24 Stunden ohne Bericht. Datenschicht - Neu: Kalender, Exposé-Leads, Exposé-Entwürfe, Besichtigungsaufträge — je Domain, Provider, Service und Hook. - IAIService um generateExposeText erweitert; der Entwurf nutzt ausschliesslich erfasste Objektdaten und meldet Lücken, statt sie zu füllen. - Alle Objektverweise zeigen auf reale Einträge aus «Meine Objekte»; neue Detailroute /supply/properties/:propertyId. Offen: Chat, Kalender, CRM und DMS sind Frontend-Simulation ohne Anbindung. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-05 14:43:16 +02:00
1 parent cc5582b7fd
commit d200d4e930
@@ -0,0 +1,301 @@
+import { memo, useCallback, useMemo, useState } from 'react'
+import { Alert, Box, Button, Chip, Divider, TextField, Typography } from '@mui/material'
+import { Building2, CheckCircle2, Copy, MapPin, Ruler, Search } from 'lucide-react'
+import type { MarktHinweis } from '../../domain/marktHinweis'
+import type { Property } from '../../domain/property'
+import { useProperties } from '../../hooks/useProperties'
+import { ASSET_TYPE_LABELS } from '../../lib/constants'
+import { areaFitPct } from '../market-leads'
+import { OWN_VERWALTUNG_ID, QUELLE_LABELS, buildAnschreiben, formatDate } from './hinweisHelpers'
+import { DS_ACCENT, DS_NEUTRAL, DS_SLATE } from '../../lib/ds'
+
+/**
+ * Der Netzwerk-Bereich der Nora-Seite: menschlich erfasste Marktinformationen.
+ *
+ * Ausgezogen aus `MarketIntelligence.tsx`, die mit über 1100 Zeilen zwei
+ * eigenständige Funktionsbereiche in einer Datei führte — bei einem harten
+ * Limit von 300 Zeilen je Seite.
+ */
+
+// ── Netzwerk: HinweisPropertyCard ────────────────────────────────────────────
+
+const HinweisPropertyCard = memo(function HinweisPropertyCard({
+  p,
+  hinweis,
+}: {
+  p: Property
+  hinweis: MarktHinweis
+}) {
+  const [open, setOpen] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const companyName = hinweis.isAnonymized ? 'Interessent' : (hinweis.companyName ?? 'Interessent')
+  const areaEstimate = hinweis.areaSqmMax ?? hinweis.areaSqmMin
+  const [draft, setDraft] = useState(() =>
+    buildAnschreiben(companyName, hinweis.locationHint, p, areaEstimate)
+  )
+  const fit = areaEstimate != null ? areaFitPct(p.areaSqm, areaEstimate) : null
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(draft)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }, [draft])
+
+  return (
+    <Box sx={{ border: '1px solid #e2e8f0', borderRadius: 1.5, overflow: 'hidden', mb: 1 }}>
+      {/* Property header */}
+      <Box
+        sx={{
+          display: 'flex', alignItems: 'center', gap: 1.5,
+          px: 1.75, py: 1.25,
+          bgcolor: DS_SLATE[50],
+          cursor: 'default',
+        }}
+      >
+        <Building2 size={14} color="#152642" style={{ flexShrink: 0 }} />
+        <Box sx={{ flex: 1, minWidth: 0 }}>
+          <Typography variant="body2" sx={{ fontWeight: 600, color: DS_SLATE[900], overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {p.title}
+          </Typography>
+          <Typography variant="caption" sx={{ color: DS_SLATE[500] }}>
+            {p.location.city} · {p.areaSqm.toLocaleString('de-CH')} m² · CHF {p.rentPricePerSqm}/m²/J
+          </Typography>
+        </Box>
+        {fit !== null && (
+          <Chip
+            label={`${fit}% Flächenmatch`}
+            size="small"
+            sx={{
+              height: 20, fontSize: '0.65rem', fontWeight: 700, flexShrink: 0,
+              bgcolor: fit >= 75 ? '#dcfce7' : fit >= 50 ? '#fef9c3' : '#fee2e2',
+              color: fit >= 75 ? '#16a34a' : fit >= 50 ? '#92400e' : '#dc2626',
+            }}
+          />
+        )}
+      </Box>
+
+      {/* Anschreiben toggle */}
+      <Box sx={{ px: 1.75, py: 1, display: 'flex', alignItems: 'center', gap: 1, borderTop: '1px solid #f1f5f9' }}>
+        <Button
+          size="small"
+          variant={open ? 'contained' : 'outlined'}
+          onClick={() => setOpen(v => !v)}
+          sx={{
+            textTransform: 'none', fontSize: '0.75rem',
+            bgcolor: open ? '#152642' : undefined,
+            borderColor: open ? '#152642' : undefined,
+            '&:hover': { bgcolor: open ? '#162d4a' : undefined },
+          }}
+        >
+          {open ? 'Schliessen' : 'Anschreiben erstellen'}
+        </Button>
+      </Box>
+
+      {/* Anschreiben composer */}
+      {open && (
+        <Box sx={{ px: 1.75, pb: 1.75, pt: 0.5, borderTop: '1px solid #f1f5f9', bgcolor: DS_NEUTRAL.offWhite }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
+            <Typography variant="caption" sx={{ fontWeight: 700, color: DS_SLATE[600], textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.65rem' }}>
+              Anschreiben-Entwurf
+            </Typography>
+            <Button
+              size="small"
+              startIcon={copied ? <CheckCircle2 size={13} /> : <Copy size={13} />}
+              onClick={handleCopy}
+              sx={{ textTransform: 'none', fontSize: '0.72rem', color: copied ? '#16a34a' : '#152642' }}
+            >
+              {copied ? 'Kopiert!' : 'Kopieren'}
+            </Button>
+          </Box>
+          <TextField
+            multiline
+            minRows={8}
+            fullWidth
+            value={draft}
+            onChange={e => setDraft(e.target.value)}
+            sx={{
+              '& .MuiOutlinedInput-root': { fontSize: '0.8rem', bgcolor: 'white' },
+              '& textarea': { lineHeight: 1.6 },
+            }}
+          />
+          <Typography variant="caption" sx={{ color: DS_SLATE[400], display: 'block', mt: 0.75 }}>
+            Text bearbeitbar — dann kopieren und per E-Mail versenden
+          </Typography>
+        </Box>
+      )}
+    </Box>
+  )
+})
+
+// ── Netzwerk: HinweisListItem ────────────────────────────────────────────────
+
+const HinweisListItem = memo(function HinweisListItem({
+  hinweis, selected, onClick,
+}: {
+  hinweis: MarktHinweis
+  selected: boolean
+  onClick: () => void
+}) {
+  const displayName = !hinweis.isAnonymized && hinweis.companyName
+    ? hinweis.companyName
+    : `Anonym · ${ASSET_TYPE_LABELS[hinweis.assetType] ?? hinweis.assetType}`
+
+  const areaStr = useMemo(() => {
+    if (hinweis.areaSqmMin != null && hinweis.areaSqmMax != null && hinweis.areaSqmMin !== hinweis.areaSqmMax) {
+      return ` · ${hinweis.areaSqmMin}–${hinweis.areaSqmMax} m²`
+    }
+    if (hinweis.areaSqmMax != null) return ` · ${hinweis.areaSqmMax} m²`
+    if (hinweis.areaSqmMin != null) return ` · ${hinweis.areaSqmMin} m²`
+    return ''
+  }, [hinweis.areaSqmMin, hinweis.areaSqmMax])
+
+  const visibilityBadge = useMemo(() => {
+    if (hinweis.visibility === 'INTERN') {
+      return <Chip label="Intern" size="small" sx={{ bgcolor: DS_ACCENT.indigo.bg, color: DS_ACCENT.indigo.strong, height: 18, fontSize: '0.6rem' }} />
+    }
+    if (hinweis.verwaltungId === OWN_VERWALTUNG_ID) {
+      return <Chip label="Geteilt" size="small" sx={{ bgcolor: DS_ACCENT.violet.bg, color: DS_ACCENT.violet.main, height: 18, fontSize: '0.6rem' }} />
+    }
+    return <Chip label={hinweis.verwaltungName} size="small" sx={{ bgcolor: DS_SLATE[100], color: DS_SLATE[600], height: 18, fontSize: '0.6rem' }} />
+  }, [hinweis.visibility, hinweis.verwaltungId, hinweis.verwaltungName])
+
+  return (
+    <Box
+      onClick={onClick}
+      sx={{
+        px: 2, py: 1.5,
+        borderBottom: '1px solid #f1f5f9',
+        borderLeft: `3px solid ${selected ? '#152642' : 'transparent'}`,
+        bgcolor: selected ? '#f0f9ff' : 'white',
+        cursor: 'pointer',
+        '&:hover': { bgcolor: selected ? '#f0f9ff' : '#f8fafc' },
+        transition: 'background 0.1s',
+      }}
+    >
+      <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75, mb: 0.25 }}>
+        <Box sx={{ mt: 0.25, flexShrink: 0 }}>
+          {hinweis.direction === 'SUCHE'
+            ? <Search size={14} color="#152642" />
+            : <Building2 size={14} color="#7c3aed" />
+          }
+        </Box>
+        <Typography variant="body2" sx={{ fontWeight: 600, color: DS_SLATE[900], lineHeight: 1.3, flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {displayName}
+        </Typography>
+        <Box sx={{ flexShrink: 0 }}>{visibilityBadge}</Box>
+      </Box>
+      <Typography variant="caption" sx={{ color: DS_SLATE[400], fontSize: '0.65rem', display: 'block', mb: 0.5, pl: 2.75 }}>
+        {hinweis.locationHint}{areaStr}
+      </Typography>
+      <Box sx={{ pl: 2.75 }}>
+        {hinweis.direction === 'SUCHE'
+          ? <Chip label="Suche" size="small" sx={{ bgcolor: DS_ACCENT.blue.borderSoft, color: DS_ACCENT.blue.main, height: 16, fontSize: '0.6rem' }} />
+          : <Chip label="Wird frei" size="small" sx={{ bgcolor: DS_ACCENT.success.bgAlt, color: DS_ACCENT.success.bright, height: 16, fontSize: '0.6rem' }} />
+        }
+      </Box>
+    </Box>
+  )
+})
+
+// ── Netzwerk: HinweisDetail ──────────────────────────────────────────────────
+
+function HinweisDetail({ hinweis }: { hinweis: MarktHinweis }) {
+  const { data: properties = [] } = useProperties()
+
+  const matchingProperties = useMemo(
+    () => properties.filter(p => p.assetType === hinweis.assetType).slice(0, 3),
+    [properties, hinweis.assetType],
+  )
+
+  const displayName = !hinweis.isAnonymized && hinweis.companyName ? hinweis.companyName : 'Anonym'
+
+  const areaStr = useMemo(() => {
+    if (hinweis.areaSqmMin != null && hinweis.areaSqmMax != null && hinweis.areaSqmMin !== hinweis.areaSqmMax) {
+      return `${hinweis.areaSqmMin}–${hinweis.areaSqmMax} m²`
+    }
+    if (hinweis.areaSqmMax != null) return `${hinweis.areaSqmMax} m²`
+    if (hinweis.areaSqmMin != null) return `${hinweis.areaSqmMin} m²`
+    return null
+  }, [hinweis.areaSqmMin, hinweis.areaSqmMax])
+
+  return (
+    <Box sx={{ height: '100%', overflowY: 'auto' }}>
+      {/* Header */}
+      <Box sx={{ p: 3, borderBottom: '1px solid #e2e8f0' }}>
+        <Typography variant="h6" sx={{ fontWeight: 700, lineHeight: 1.3, mb: 1 }}>
+          {displayName}
+        </Typography>
+
+        {/* Badge row */}
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.75, mb: 1.25 }}>
+          {hinweis.direction === 'SUCHE'
+            ? <Chip label="Suche" size="small" sx={{ bgcolor: DS_ACCENT.blue.borderSoft, color: DS_ACCENT.blue.main, fontWeight: 600, fontSize: '0.75rem' }} />
+            : <Chip label="Wird verfügbar" size="small" sx={{ bgcolor: DS_ACCENT.success.bgAlt, color: DS_ACCENT.success.bright, fontWeight: 600, fontSize: '0.75rem' }} />
+          }
+          {hinweis.visibility === 'INTERN'
+            ? <Chip label="Intern" size="small" sx={{ bgcolor: DS_ACCENT.indigo.bg, color: DS_ACCENT.indigo.strong, fontWeight: 600, fontSize: '0.75rem' }} />
+            : hinweis.verwaltungId === OWN_VERWALTUNG_ID
+              ? <Chip label="Geteilt" size="small" sx={{ bgcolor: DS_ACCENT.violet.bg, color: DS_ACCENT.violet.main, fontWeight: 600, fontSize: '0.75rem' }} />
+              : <Chip label={hinweis.verwaltungName} size="small" sx={{ bgcolor: DS_SLATE[100], color: DS_SLATE[600], fontWeight: 600, fontSize: '0.75rem' }} />
+          }
+        </Box>
+
+        {/* Stat chips */}
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.75, mb: 1.25 }}>
+          <Chip icon={<MapPin size={11} />} label={hinweis.locationHint} size="small" sx={{ bgcolor: DS_SLATE[100], color: DS_SLATE[600], fontSize: '0.75rem' }} />
+          {areaStr && <Chip icon={<Ruler size={11} />} label={areaStr} size="small" sx={{ bgcolor: DS_SLATE[100], color: DS_SLATE[600], fontSize: '0.75rem' }} />}
+          <Chip label={ASSET_TYPE_LABELS[hinweis.assetType] ?? hinweis.assetType} size="small" sx={{ bgcolor: DS_SLATE[100], color: DS_SLATE[600], fontSize: '0.75rem' }} />
+        </Box>
+
+        {/* Quelle row */}
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, py: 0.75, px: 1.25, bgcolor: DS_SLATE[50], borderRadius: 1, border: '1px solid #e2e8f0' }}>
+          <Typography variant="caption" sx={{ color: DS_SLATE[500] }}>
+            Quelle: <strong>{QUELLE_LABELS[hinweis.quelle] ?? hinweis.quelle}</strong>
+            {' · '}{hinweis.createdBy}
+            {' · '}{formatDate(hinweis.createdAt)}
+          </Typography>
+        </Box>
+      </Box>
+
+      {/* Body */}
+      <Box sx={{ p: 3, display: 'flex', flexDirection: 'column', gap: 2 }}>
+        {hinweis.note && (
+          <Box sx={{ bgcolor: DS_SLATE[50], border: '1px solid #e2e8f0', borderRadius: 1.5, p: 2 }}>
+            <Typography variant="caption" sx={{ fontWeight: 700, color: DS_SLATE[500], textTransform: 'uppercase', letterSpacing: 0.5, display: 'block', mb: 0.5, fontSize: '0.65rem' }}>
+              Notiz
+            </Typography>
+            <Typography variant="body2" sx={{ color: DS_SLATE[800], lineHeight: 1.6 }}>
+              {hinweis.note}
+            </Typography>
+          </Box>
+        )}
+
+        <Divider />
+
+        {hinweis.direction === 'SUCHE' ? (
+          <Box>
+            <Typography variant="caption" sx={{ fontWeight: 700, color: DS_SLATE[500], textTransform: 'uppercase', letterSpacing: 0.5, display: 'block', mb: 1 }}>
+              Passende Objekte im Portfolio ({matchingProperties.length})
+            </Typography>
+            {matchingProperties.length === 0 ? (
+              <Alert severity="warning" sx={{ fontSize: '0.8rem', py: 0.5 }}>
+                Kein passendes Portfolioobjekt gefunden
+              </Alert>
+            ) : (
+              matchingProperties.map(p => (
+                <HinweisPropertyCard key={p.id} p={p} hinweis={hinweis} />
+              ))
+            )}
+          </Box>
+        ) : (
+          <Alert severity="info" sx={{ fontSize: '0.8rem' }}>
+            Verfügbarkeitssignal — wird auf der Plattform für andere Verwaltungen sichtbar gemacht
+          </Alert>
+        )}
+      </Box>
+    </Box>
+  )
+}
+
+
+export { HinweisPropertyCard, HinweisListItem, HinweisDetail }