From 279b55d70e4234a60a96b4cab36dcb8b4038a96e Mon Sep 17 00:00:00 2001
From: Benjamin Sutter <beni_sutter@hotmail.com>
Date: Tue, 19 May 2026 16:17:00 +0200
Subject: [PATCH] feat: Bericht erstellen shows full PDF preview before
 download

Dialog now opens at md size (88vh), shows a progress bar while
generating, then reveals the full report document: header, all 4
signal sections with colour-coded separators, confidence scores,
sources, dates. Document is blurred during generation and sharpens
when ready. Herunterladen button stays disabled until preview is ready.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../supply/PropertyMarketSignalsTab.tsx       | 241 +++++++++++++-----
 1 file changed, 180 insertions(+), 61 deletions(-)

diff --git a/src/components/supply/PropertyMarketSignalsTab.tsx b/src/components/supply/PropertyMarketSignalsTab.tsx
index dbc2970..f5903aa 100644
--- a/src/components/supply/PropertyMarketSignalsTab.tsx
+++ b/src/components/supply/PropertyMarketSignalsTab.tsx
@@ -93,9 +93,20 @@ function SignalCard({ signal }: { signal: PropertyMarketSignal }) {
   )
 }
 
-// ── PDF generation dialog ─────────────────────────────────────────────────────
+// ── PDF preview dialog ────────────────────────────────────────────────────────
 
-type PdfState = 'idle' | 'generating' | 'ready'
+const SECTION_COLORS: Record<string, string> = {
+  development: '#1e3a5f',
+  demand: '#1a7a4a',
+  supply: '#b45309',
+  negotiation: '#7c3aed',
+}
+const SECTION_LABELS: Record<string, string> = {
+  development: 'Entwicklungsnews',
+  demand: 'Nachfrage 5 km',
+  supply: 'Angebot 5 km',
+  negotiation: 'Verhandlungshinweise',
+}
 
 interface BerichtDialogProps {
   onClose: () => void
@@ -103,8 +114,8 @@ interface BerichtDialogProps {
   propertyId: string
 }
 
-function BerichtDialog({ onClose, report, propertyId }: Omit<BerichtDialogProps, 'open'>) {
-  const [state, setState] = useState<PdfState>('generating')
+function BerichtDialog({ onClose, report, propertyId }: BerichtDialogProps) {
+  const [ready, setReady] = useState(false)
   const [progress, setProgress] = useState(0)
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
 
@@ -113,11 +124,12 @@ function BerichtDialog({ onClose, report, propertyId }: Omit<BerichtDialogProps,
     timerRef.current = setInterval(() => {
       p += Math.random() * 18 + 8
       if (p >= 100) {
-        p = 100
         clearInterval(timerRef.current!)
-        setState('ready')
+        setProgress(100)
+        setReady(true)
+      } else {
+        setProgress(Math.min(100, p))
       }
-      setProgress(Math.min(100, p))
     }, 200)
     return () => { if (timerRef.current) clearInterval(timerRef.current) }
   }, [])
@@ -132,7 +144,8 @@ function BerichtDialog({ onClose, report, propertyId }: Omit<BerichtDialogProps,
       '',
     ]
     for (const s of signals) {
-      lines.push(`[${s.category.toUpperCase()}] ${s.title}`)
+      lines.push(`[${SECTION_LABELS[s.category] ?? s.category}]`)
+      lines.push(s.title)
       lines.push(s.body)
       if (s.source) lines.push(`Quelle: ${s.source}`)
       lines.push('')
@@ -147,65 +160,171 @@ function BerichtDialog({ onClose, report, propertyId }: Omit<BerichtDialogProps,
     onClose()
   }
 
+  const signals = report?.signals ?? []
+  const categories = ['development', 'demand', 'supply', 'negotiation'] as const
+
   return (
-    <Dialog open onClose={state === 'generating' ? undefined : onClose} maxWidth="xs" fullWidth>
-      <DialogTitle sx={{ fontWeight: 700, fontSize: '1rem', pb: 1 }}>
-        Bericht erstellen
-      </DialogTitle>
-      <DialogContent>
-        {state === 'generating' && (
-          <Box sx={{ py: 2 }}>
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 2 }}>
-              <CircularProgress size={20} />
-              <Typography variant="body2" sx={{ color: '#374151' }}>
-                PDF-Bericht wird generiert…
+    <Dialog
+      open
+      onClose={ready ? onClose : undefined}
+      maxWidth="md"
+      fullWidth
+      PaperProps={{ sx: { height: '88vh', display: 'flex', flexDirection: 'column', overflow: 'hidden' } }}
+    >
+      {/* Header */}
+      <Box sx={{ px: 3, py: 1.5, borderBottom: '1px solid #e2e8f0', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
+        <Box>
+          <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.7rem', textTransform: 'uppercase', fontWeight: 600, letterSpacing: 0.5 }}>
+            Bericht erstellen
+          </Typography>
+          <Typography variant="body1" sx={{ fontWeight: 700, color: '#0f172a', fontSize: '0.95rem' }}>
+            Marktsignal-Bericht · {propertyId}
+          </Typography>
+        </Box>
+        {ready && (
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+            <CheckCircle size={14} color="#1a7a4a" />
+            <Typography variant="caption" sx={{ color: '#166534', fontWeight: 600 }}>Bereit</Typography>
+          </Box>
+        )}
+      </Box>
+
+      {/* Generating state */}
+      {!ready && (
+        <Box sx={{ px: 3, py: 1.5, borderBottom: '1px solid #e2e8f0', bgcolor: '#f8fafc', flexShrink: 0 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 1 }}>
+            <CircularProgress size={16} />
+            <Typography variant="caption" sx={{ color: '#374151' }}>
+              PDF-Bericht wird generiert…
+            </Typography>
+            <Typography variant="caption" sx={{ color: '#94a3b8', ml: 'auto' }}>{Math.round(progress)}%</Typography>
+          </Box>
+          <LinearProgress
+            variant="determinate"
+            value={progress}
+            sx={{ height: 4, borderRadius: 2, bgcolor: '#e2e8f0', '& .MuiLinearProgress-bar': { bgcolor: '#1e3a5f' } }}
+          />
+        </Box>
+      )}
+
+      {/* PDF Preview */}
+      <Box sx={{ flex: 1, overflow: 'auto', bgcolor: '#f1f5f9', p: 3 }}>
+        <Box
+          sx={{
+            bgcolor: 'white',
+            borderRadius: 1.5,
+            border: '1px solid #cbd5e1',
+            boxShadow: '0 4px 16px rgba(15,23,42,0.08)',
+            p: 4,
+            fontFamily: '"Georgia", "Times New Roman", serif',
+            filter: ready ? 'none' : 'blur(1px)',
+            transition: 'filter 0.3s ease',
+            pointerEvents: ready ? 'auto' : 'none',
+          }}
+        >
+          {/* Document header */}
+          <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', mb: 3 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <FileText size={18} color="#1e3a5f" />
+              <Typography sx={{ fontFamily: 'inherit', fontWeight: 700, color: '#1e3a5f', fontSize: '0.75rem', letterSpacing: 1, textTransform: 'uppercase' }}>
+                Marktsignal-Bericht
               </Typography>
             </Box>
-            <LinearProgress
-              variant="determinate"
-              value={progress}
-              sx={{ height: 6, borderRadius: 3, bgcolor: '#e2e8f0', '& .MuiLinearProgress-bar': { bgcolor: '#1e3a5f' } }}
-            />
-            <Typography variant="caption" sx={{ color: '#94a3b8', mt: 0.75, display: 'block' }}>
-              {Math.round(progress)}% — Marktsignale werden aufbereitet
+            <Box sx={{ textAlign: 'right' }}>
+              <Typography variant="caption" sx={{ display: 'block', color: '#94a3b8', fontFamily: 'inherit' }}>Wincasa AG · Zürich</Typography>
+              <Typography variant="caption" sx={{ display: 'block', color: '#94a3b8', fontFamily: 'inherit' }}>{new Date().toLocaleDateString('de-CH')}</Typography>
+            </Box>
+          </Box>
+
+          <Box sx={{ borderBottom: '2px solid #1e3a5f', mb: 2.5 }} />
+
+          <Typography sx={{ fontFamily: 'inherit', fontWeight: 700, color: '#0f172a', fontSize: '1.1rem', mb: 0.5 }}>
+            Standortintelligenz & Marktsignale
+          </Typography>
+          <Typography sx={{ fontFamily: 'inherit', color: '#64748b', fontSize: '0.825rem', mb: 3 }}>
+            Objekt-ID: {propertyId} · Generiert: {report?.generatedAt ? new Date(report.generatedAt).toLocaleDateString('de-CH') : new Date().toLocaleDateString('de-CH')} · {signals.length} Signale
+          </Typography>
+
+          {/* Sections */}
+          {categories.map(cat => {
+            const catSignals = signals.filter(s => s.category === cat)
+            if (catSignals.length === 0) return null
+            const color = SECTION_COLORS[cat]
+            const label = SECTION_LABELS[cat]
+            return (
+              <Box key={cat} sx={{ mb: 3.5 }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1.5, pb: 0.75, borderBottom: `1px solid ${color}22` }}>
+                  <Box sx={{ width: 3, height: 16, bgcolor: color, borderRadius: 1, flexShrink: 0 }} />
+                  <Typography sx={{ fontFamily: 'inherit', fontWeight: 700, color, fontSize: '0.875rem', textTransform: 'uppercase', letterSpacing: 0.5 }}>
+                    {label}
+                  </Typography>
+                  <Typography sx={{ fontFamily: 'inherit', color: '#94a3b8', fontSize: '0.75rem', ml: 0.5 }}>
+                    ({catSignals.length})
+                  </Typography>
+                </Box>
+                {catSignals.map((s, i) => (
+                  <Box key={s.id} sx={{ mb: i < catSignals.length - 1 ? 2 : 0, pl: 1.5, borderLeft: `2px solid #e2e8f0` }}>
+                    <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1, mb: 0.5 }}>
+                      <Typography sx={{ fontFamily: 'inherit', fontWeight: 700, color: '#0f172a', fontSize: '0.875rem', lineHeight: 1.4 }}>
+                        {s.title}
+                      </Typography>
+                      {s.confidence != null && (
+                        <Typography sx={{ fontFamily: 'inherit', color: '#64748b', fontSize: '0.75rem', flexShrink: 0 }}>
+                          KI-Konfidenz: {Math.round(s.confidence * 100)}%
+                        </Typography>
+                      )}
+                    </Box>
+                    <Typography sx={{ fontFamily: 'inherit', color: '#374151', fontSize: '0.825rem', lineHeight: 1.6, mb: 0.5 }}>
+                      {s.body}
+                    </Typography>
+                    <Box sx={{ display: 'flex', gap: 2 }}>
+                      {s.date && (
+                        <Typography sx={{ fontFamily: 'inherit', color: '#94a3b8', fontSize: '0.75rem' }}>
+                          {new Date(s.date).toLocaleDateString('de-CH')}
+                        </Typography>
+                      )}
+                      {s.source && (
+                        <Typography sx={{ fontFamily: 'inherit', color: '#94a3b8', fontSize: '0.75rem' }}>
+                          Quelle: {s.source}
+                        </Typography>
+                      )}
+                    </Box>
+                  </Box>
+                ))}
+              </Box>
+            )
+          })}
+
+          {signals.length === 0 && (
+            <Typography sx={{ fontFamily: 'inherit', color: '#94a3b8', fontSize: '0.875rem', fontStyle: 'italic', textAlign: 'center', py: 4 }}>
+              Keine Marktsignale für dieses Objekt verfügbar.
+            </Typography>
+          )}
+
+          {/* Footer */}
+          <Box sx={{ borderTop: '1px solid #e2e8f0', mt: 3, pt: 2 }}>
+            <Typography sx={{ fontFamily: 'inherit', color: '#94a3b8', fontSize: '0.75rem', textAlign: 'center' }}>
+              Dieser Bericht wurde automatisch auf Basis von KI-generierten Marktsignalen erstellt. · Wincasa AG
             </Typography>
           </Box>
-        )}
+        </Box>
+      </Box>
 
-        {state === 'ready' && (
-          <Box sx={{ py: 2 }}>
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 2 }}>
-              <CheckCircle size={20} color="#1a7a4a" />
-              <Typography variant="body2" sx={{ color: '#166534', fontWeight: 600 }}>
-                Bericht ist bereit
-              </Typography>
-            </Box>
-            <Box sx={{ p: 2, bgcolor: '#f8fafc', borderRadius: 1.5, border: '1px solid #e2e8f0', mb: 2 }}>
-              <Typography variant="caption" sx={{ color: '#64748b', display: 'block' }}>Dateiname</Typography>
-              <Typography variant="body2" sx={{ fontWeight: 500 }}>
-                Marktsignal-Bericht_{propertyId}.pdf
-              </Typography>
-              <Typography variant="caption" sx={{ color: '#94a3b8', display: 'block', mt: 0.5 }}>
-                {report?.signals.length ?? 0} Signale · {new Date().toLocaleDateString('de-CH')}
-              </Typography>
-            </Box>
-            <Box sx={{ display: 'flex', gap: 1 }}>
-              <Button
-                fullWidth
-                variant="contained"
-                startIcon={<Download size={15} />}
-                onClick={handleDownload}
-                sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
-              >
-                Herunterladen
-              </Button>
-              <Button fullWidth variant="outlined" onClick={onClose} sx={{ textTransform: 'none' }}>
-                Schliessen
-              </Button>
-            </Box>
-          </Box>
-        )}
-      </DialogContent>
+      {/* Footer actions */}
+      <Box sx={{ px: 3, py: 1.5, borderTop: '1px solid #e2e8f0', bgcolor: 'white', display: 'flex', justifyContent: 'flex-end', gap: 1, flexShrink: 0 }}>
+        <Button variant="outlined" onClick={onClose} sx={{ textTransform: 'none' }}>
+          Schliessen
+        </Button>
+        <Button
+          variant="contained"
+          startIcon={<Download size={15} />}
+          onClick={handleDownload}
+          disabled={!ready}
+          sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+        >
+          Herunterladen
+        </Button>
+      </Box>
     </Dialog>
   )
 }