v1.31: PDF-Lightbox mit Druck/E-Mail/Download, Mail-API Anhang-Support

mail-server/api/server.py

@@ -13,7 +13,8 @@ Endpunkte:
   GET  /outbox         → aktuelle Outbox (Demo/Debug)
   POST /send           → {"ok": true, "id": ..., "versandt": true/false}
        Body: {"to": "...", "subject": "...", "text": "...", "html": "...",
-              optional "cc": "a@b.de, c@d.de", "from_address"/"from_name" (nur @hocks.eu)}
+              optional "cc": "a@b.de, c@d.de", "from_address"/"from_name" (nur @hocks.eu),
+              optional "attachment_b64" (base64), "attachment_filename", "attachment_mime"}
        Auth: Header X-Api-Token oder Body-Feld "token" == MAIL_API_TOKEN
 """
 
@@ -87,6 +88,16 @@ def versenden(e: dict) -> bool:
     msg.set_content(e.get("text") or "")
     if e.get("html"):
         msg.add_alternative(e["html"], subtype="html")
+    # Optionaler Anhang (base64, v1.31) – z. B. erzeugte PDF-Abrechnungen
+    if e.get("anhang_b64"):
+        import base64
+        daten = base64.b64decode(e["anhang_b64"])
+        mime = e.get("anhang_mime") or "application/pdf"
+        haupt, _, unter = mime.partition("/")
+        msg.add_attachment(
+            daten, maintype=haupt or "application", subtype=unter or "octet-stream",
+            filename=e.get("anhang_dateiname") or "anhang.pdf",
+        )
     with smtplib.SMTP(RELAY_HOST, RELAY_PORT, timeout=20) as smtp:
         smtp.send_message(msg)
     return True
@@ -199,6 +210,16 @@ class Handler(BaseHTTPRequestHandler):
             "versandt": False,
             "angenommenAm": time.strftime("%d.%m.%Y %H:%M:%S"),
         }
+        # Optionaler Anhang (v1.31): base64 + Dateiname + MIME, max. ca. 20 MB
+        anhang_b64 = str(body.get("attachment_b64", ""))
+        if anhang_b64:
+            if len(anhang_b64) > 28_000_000:
+                self._antwort(413, {"fehler": "Anhang zu gross (max. ca. 20 MB)"})
+                return
+            dateiname = os.path.basename(str(body.get("attachment_filename", "anhang.pdf"))) or "anhang.pdf"
+            eintrag["anhang_b64"] = anhang_b64
+            eintrag["anhang_dateiname"] = dateiname
+            eintrag["anhang_mime"] = str(body.get("attachment_mime", "application/pdf"))
         try:
             versenden(eintrag)
             eintrag["versandt"] = True

server/src/index.js

@@ -797,18 +797,85 @@ app.post('/api/documents/:id/upload', auth, adminOnly, async (req, res, next) =>
   })
 })
 
+// Lädt Dokument samt Berechtigungs- und Dateiprüfung (Download/Preview/E-Mail).
+async function dokumentMitDatei(req, res) {
+  const { rows } = await pool.query('SELECT * FROM documents WHERE id = $1', [req.params.id])
+  if (!rows.length) { res.status(404).json({ fehler: 'Dokument nicht gefunden.' }); return null }
+  const d = rows[0]
+  const erlaubt = req.user.rolle === 'verwaltung' || d.unit_id === null || d.unit_id === req.user.einheit_id
+  if (!erlaubt) { res.status(403).json({ fehler: 'Kein Zugriff auf dieses Dokument.' }); return null }
+  if (!d.file_path) { res.status(404).json({ fehler: 'Zu diesem Eintrag ist noch keine Datei hinterlegt.' }); return null }
+  const vollerPfad = path.join(UPLOAD_DIR, path.basename(d.file_path))  // basename: Pfad-Traversal unterbinden
+  if (!fs.existsSync(vollerPfad)) { res.status(404).json({ fehler: 'Datei nicht gefunden.' }); return null }
+  return { dokument: d, pfad: vollerPfad }
+}
+
 // PDF-Download: Verwaltung immer, Mieter nur bei eigener Wohnung oder Hausdokument
 app.get('/api/documents/:id/download', auth, async (req, res, next) => {
   try {
-    const { rows } = await pool.query('SELECT * FROM documents WHERE id = $1', [req.params.id])
+    const gefunden = await dokumentMitDatei(req, res)
-    if (!rows.length) return res.status(404).json({ fehler: 'Dokument nicht gefunden.' })
+    if (!gefunden) return
-    const d = rows[0]
+    res.download(gefunden.pfad, gefunden.dokument.file_name || `${gefunden.dokument.title}.pdf`)
-    const erlaubt = req.user.rolle === 'verwaltung' || d.unit_id === null || d.unit_id === req.user.einheit_id
+  } catch (e) { next(e) }
-    if (!erlaubt) return res.status(403).json({ fehler: 'Kein Zugriff auf dieses Dokument.' })
+})
-    if (!d.file_path) return res.status(404).json({ fehler: 'Zu diesem Eintrag ist noch keine Datei hinterlegt.' })
+
-    const vollerPfad = path.join(UPLOAD_DIR, path.basename(d.file_path))  // basename: Pfad-Traversal unterbinden
+// PDF-Preview für die Lightbox: gleiche Rechte wie Download, aber inline (v1.31)
-    if (!fs.existsSync(vollerPfad)) return res.status(404).json({ fehler: 'Datei nicht gefunden.' })
+app.get('/api/documents/:id/preview', auth, async (req, res, next) => {
-    res.download(vollerPfad, d.file_name || `${d.title}.pdf`)
+  try {
+    const gefunden = await dokumentMitDatei(req, res)
+    if (!gefunden) return
+    res.setHeader('Content-Disposition', `inline; filename*=UTF-8''${encodeURIComponent(gefunden.dokument.file_name || gefunden.dokument.title)}`)
+    res.setHeader('Content-Type', 'application/pdf')
+    res.sendFile(gefunden.pfad)
+  } catch (e) { next(e) }
+})
+
+// PDF per E-Mail versenden: Empfänger frei wählbar oder Mieter der Wohnung,
+// immer mit CC an die Verwaltung (v1.31)
+app.post('/api/documents/:id/email', auth, adminOnly, async (req, res, next) => {
+  try {
+    const gefunden = await dokumentMitDatei(req, res)
+    if (!gefunden) return
+    const d = gefunden.dokument
+    const EMAIL_RE = /^[^@\s]+@[^@\s]+\.[^@\s]+$/
+    let empfaenger = String((req.body || {}).an || '').trim()
+    let empfaengerName = ''
+    if (!empfaenger && d.unit_id) {
+      const { rows: mieter } = await pool.query(
+        `SELECT name, email FROM users WHERE rolle = 'mieter' AND aktiv AND einheit_id = $1 AND email <> '' ORDER BY name LIMIT 1`,
+        [d.unit_id],
+      )
+      if (mieter.length) { empfaenger = mieter[0].email; empfaengerName = mieter[0].name }
+    }
+    if (!empfaenger || !EMAIL_RE.test(empfaenger)) {
+      return res.status(400).json({ fehler: 'Kein gültiger Empfänger – E-Mail-Adresse angeben oder Mieter-E-Mail hinterlegen.' })
+    }
+    const nachricht = String((req.body || {}).nachricht || '').trim()
+    const betreff = String((req.body || {}).betreff || '').trim() || `Dokument: ${d.title}`
+    const dateiname = d.file_name || `${d.title}.pdf`
+    const cc = await mail.verwaltungEmails()
+    const gruss = empfaengerName ? `Guten Tag ${empfaengerName},` : 'Guten Tag,'
+    const text = `${gruss}\n\nim Anhang finden Sie das Dokument „${d.title}" aus dem Mieterportal Hinterstein Immobilien.${nachricht ? `\n\n${nachricht}` : ''}\n\nMit freundlichen Grüßen\nHinterstein Immobilien`
+    const html = mail.baueHtmlMail({
+      titel: d.title,
+      untertitel: 'Dokument aus dem Mieterportal',
+      einleitung: gruss,
+      zeilen: [
+        ['Dokument', d.title],
+        ['Kategorie', d.category],
+        ...(d.unit_id ? [['Wohnung', mail.einheitLabel((await pool.query('SELECT * FROM units WHERE id = $1', [d.unit_id])).rows[0])]] : []),
+        ...(nachricht ? [['Nachricht', nachricht]] : []),
+      ],
+      statusBox: { text: 'Das PDF ist an diese E-Mail angehängt.', hintergrund: '#ecfdf5', farbe: '#047857' },
+      fussnote: 'Bei Rückfragen antworten Sie bitte direkt auf diese E-Mail oder nutzen Sie das Nachrichten-Modul im Portal.',
+    })
+    await mail.sendeMail(empfaenger, betreff, text, html, cc, {
+      dateiname,
+      inhaltB64: fs.readFileSync(gefunden.pfad).toString('base64'),
+      mime: 'application/pdf',
+    })
+    console.log(`[mail] Dokument „${d.title}" an ${empfaenger} versendet (CC: ${cc || '–'})`)
+    res.json({ ok: true, an: empfaenger })
   } catch (e) { next(e) }
 })
 

server/src/mail.js

@@ -108,7 +108,7 @@ function buttonHtml(text, url) {
   return `<p style="margin:24px 0 0;"><a href="${htmlEscape(url)}" style="display:inline-block;background:${FARBE_BUTTON};color:${FARBE_BUTTON_TEXT};text-decoration:none;font-size:14px;font-weight:700;padding:12px 22px;border-radius:10px;">${htmlEscape(text)}</a></p>`
 }
 
-async function sendeMail(an, betreff, text, html, cc) {
+async function sendeMail(an, betreff, text, html, cc, anhang) {
   if (!MAIL_API_URL || !MAIL_API_TOKEN || !an) return
   try {
     const res = await fetch(`${MAIL_API_URL}/send`, {
@@ -118,6 +118,12 @@ async function sendeMail(an, betreff, text, html, cc) {
         to: an, subject: betreff, text: `${text}\n\n${FUSSZEILE_TEXT}`,
         ...(html ? { html } : {}),
         ...(cc ? { cc } : {}),  // v1.22: Komma-getrennte CC-Empfänger
+        // v1.31: optionaler Anhang (z. B. PDF-Abrechnung)
+        ...(anhang ? {
+          attachment_b64: anhang.inhaltB64,
+          attachment_filename: anhang.dateiname,
+          attachment_mime: anhang.mime || 'application/pdf',
+        } : {}),
       }),
     })
     if (!res.ok) console.warn(`[mail] Versand an ${an} fehlgeschlagen: HTTP ${res.status}`)

src/components/PdfLightbox.tsx

@@ -0,0 +1,162 @@
+import { useRef, useState } from 'react'
+import { Printer, Mail, Download, Send, X } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { useStore } from '../store/store'
+import type { DocumentItem } from '../types'
+
+/** PDF-Lightbox (v1.31): Inline-Vorschau erzeugter/gespeicherter PDFs mit
+ * Drucken-, E-Mail- und Download-Option. Auth läuft über das Session-Cookie. */
+export default function PdfLightbox({ dokument, trigger }: {
+  dokument: DocumentItem
+  trigger: React.ReactNode
+}) {
+  const { role, sendeDokumentEmail } = useStore()
+  const [open, setOpen] = useState(false)
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+  const [zeigeEmail, setZeigeEmail] = useState(false)
+  const [an, setAn] = useState('')
+  const [betreff, setBetreff] = useState('')
+  const [nachricht, setNachricht] = useState('')
+  const [sende, setSende] = useState(false)
+  const [meldung, setMeldung] = useState<string | null>(null)
+
+  const drucken = () => {
+    try {
+      iframeRef.current?.contentWindow?.focus()
+      iframeRef.current?.contentWindow?.print()
+    } catch {
+      window.open(`/api/documents/${dokument.id}/preview`, '_blank')
+    }
+  }
+
+  const emailFormularOeffnen = () => {
+    setBetreff(`Dokument: ${dokument.title}`)
+    setMeldung(null)
+    setZeigeEmail(true)
+  }
+
+  const senden = async () => {
+    if (sende) return
+    setSende(true)
+    setMeldung(null)
+    const err = await sendeDokumentEmail(dokument.id, {
+      an: an.trim() || undefined,
+      betreff: betreff.trim(),
+      nachricht: nachricht.trim(),
+    })
+    setSende(false)
+    if (err) return setMeldung(err)
+    setMeldung('E-Mail wurde versendet.')
+    setZeigeEmail(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+      <DialogContent className="flex h-[90vh] max-w-4xl flex-col gap-0 p-0">
+        <DialogHeader className="border-b px-5 py-4">
+          <div className="flex items-center justify-between gap-3 pr-8">
+            <div className="min-w-0">
+              <DialogTitle className="truncate text-base">{dokument.title}</DialogTitle>
+              <p className="truncate text-xs text-slate-500 dark:text-slate-400">
+                {dokument.category} · {dokument.date}
+                {dokument.fileName && ` · ${dokument.fileName}`}
+              </p>
+            </div>
+            <div className="flex shrink-0 flex-wrap gap-2">
+              <Button variant="outline" size="sm" className="gap-1.5" onClick={drucken}>
+                <Printer className="h-3.5 w-3.5" /> Drucken
+              </Button>
+              {role === 'admin' && (
+                <Button
+                  variant={zeigeEmail ? 'default' : 'outline'}
+                  size="sm"
+                  className="gap-1.5"
+                  onClick={() => (zeigeEmail ? setZeigeEmail(false) : emailFormularOeffnen())}
+                >
+                  <Mail className="h-3.5 w-3.5" /> E-Mail
+                </Button>
+              )}
+              <Button variant="outline" size="sm" className="gap-1.5" asChild>
+                <a
+                  href={`/api/documents/${dokument.id}/download`}
+                  download={dokument.fileName || `${dokument.title}.pdf`}
+                >
+                  <Download className="h-3.5 w-3.5" /> Download
+                </a>
+              </Button>
+            </div>
+          </div>
+        </DialogHeader>
+
+        {zeigeEmail && (
+          <div className="space-y-3 border-b bg-slate-50 px-5 py-4 dark:border-slate-700 dark:bg-slate-800/60">
+            <div className="flex items-center justify-between">
+              <h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+                PDF per E-Mail versenden
+              </h4>
+              <Button variant="ghost" size="sm" onClick={() => setZeigeEmail(false)} aria-label="E-Mail-Formular schließen">
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+            <div className="grid gap-3 sm:grid-cols-2">
+              <div className="space-y-1.5">
+                <Label htmlFor="pl-an">Empfänger</Label>
+                <Input
+                  id="pl-an"
+                  type="email"
+                  placeholder="leer = Mieter der Wohnung"
+                  value={an}
+                  onChange={(e) => setAn(e.target.value)}
+                />
+              </div>
+              <div className="space-y-1.5">
+                <Label htmlFor="pl-betreff">Betreff</Label>
+                <Input id="pl-betreff" value={betreff} onChange={(e) => setBetreff(e.target.value)} />
+              </div>
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="pl-text">Nachricht (optional)</Label>
+              <textarea
+                id="pl-text"
+                className="min-h-16 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring dark:bg-slate-900"
+                placeholder="Persönliche Mitteilung zum Dokument …"
+                value={nachricht}
+                onChange={(e) => setNachricht(e.target.value)}
+              />
+            </div>
+            <p className="text-xs text-slate-400 dark:text-slate-500">
+              Das PDF wird als Anhang versendet; die Verwaltung erhält immer eine Kopie (CC).
+            </p>
+            <div className="flex items-center gap-2">
+              <Button size="sm" className="gap-1.5" onClick={senden} disabled={sende}>
+                <Send className="h-3.5 w-3.5" /> {sende ? 'Wird versendet …' : 'Senden'}
+              </Button>
+              {meldung && (
+                <span className={`text-xs ${meldung.startsWith('E-Mail') ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}`}>
+                  {meldung}
+                </span>
+              )}
+            </div>
+          </div>
+        )}
+
+        <iframe
+          ref={iframeRef}
+          src={`/api/documents/${dokument.id}/preview`}
+          title={`PDF-Vorschau: ${dokument.title}`}
+          className="min-h-0 w-full flex-1 border-0 bg-slate-100 dark:bg-slate-800"
+        />
+      </DialogContent>
+    </Dialog>
+  )
+}

src/pages/Documents.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useRef, useState } from 'react'
-import { Download, FileText, FolderOpen, Scale, ReceiptText, FileSignature, FileIcon, Plus, Pencil, Trash2, Upload } from 'lucide-react'
+import { Download, FileText, FolderOpen, Scale, ReceiptText, FileSignature, FileIcon, Plus, Pencil, Trash2, Upload, Eye } from 'lucide-react'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -28,6 +28,7 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { useStore } from '../store/store'
+import PdfLightbox from '../components/PdfLightbox'
 import { apiUpload, ApiFehler } from '../lib/api'
 import type { DocumentItem, Unit } from '../types'
 
@@ -347,13 +348,28 @@ export default function Documents() {
                   <TableCell className="text-right">
                     <div className="flex items-center justify-end gap-2">
                       {d.hasFile ? (
-                        <a
+                        <>
-                          href={`/api/documents/${d.id}/download`}
+                          <PdfLightbox
-                          title={d.fileName ? `${d.fileName} herunterladen` : 'PDF herunterladen'}
+                            dokument={d}
-                          className="inline-flex items-center gap-1 rounded-lg bg-teal-50 px-3 py-1.5 text-xs font-semibold text-teal-700 transition hover:bg-teal-100"
+                            trigger={
-                        >
+                              <Button
-                          <Download className="h-3.5 w-3.5" /> PDF
+                                variant="outline"
-                        </a>
+                                size="sm"
+                                className="gap-1.5"
+                                title={d.fileName ? `${d.fileName} anzeigen` : 'PDF anzeigen'}
+                              >
+                                <Eye className="h-3.5 w-3.5" /> Vorschau
+                              </Button>
+                            }
+                          />
+                          <a
+                            href={`/api/documents/${d.id}/download`}
+                            title={d.fileName ? `${d.fileName} herunterladen` : 'PDF herunterladen'}
+                            className="inline-flex items-center gap-1 rounded-lg bg-teal-50 px-3 py-1.5 text-xs font-semibold text-teal-700 transition hover:bg-teal-100"
+                          >
+                            <Download className="h-3.5 w-3.5" /> PDF
+                          </a>
+                        </>
                       ) : (
                         <span
                           title={role === 'admin' ? 'Noch keine Datei – über „Bearbeiten" hochladen' : 'Noch keine Datei hinterlegt'}

src/pages/Kosten.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react'
-import { Calculator, Receipt, ReceiptText, PiggyBank, Plus, Pencil, Trash2, Coins, FileScan, Check, ExternalLink, ScanSearch, FileDown, Landmark } from 'lucide-react'
+import { Calculator, Receipt, ReceiptText, PiggyBank, Plus, Pencil, Trash2, Coins, FileScan, Check, ExternalLink, ScanSearch, FileDown, Landmark, Eye } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Input } from '@/components/ui/input'
@@ -28,7 +28,8 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { useStore, fmtEUR } from '../store/store'
-import type { Beleg, KostenItem } from '../types'
+import type { Beleg, DocumentItem, KostenItem } from '../types'
+import PdfLightbox from '../components/PdfLightbox'
 
 const KOSTEN_ARTEN = [
   'Wasser/Abwasser', 'Müllabfuhr', 'Straßenreinigung/Winterdienst', 'Gartenpflege',
@@ -202,7 +203,7 @@ function AbrechnungDialog() {
   const [sende, setSende] = useState(false)
   const [fehler, setFehler] = useState<string | null>(null)
   const [ergebnis, setErgebnis] = useState<{
-    dokumentId: string
+    dokument: DocumentItem
     zusammenfassung: { summe: number; vorauszahlung: number; differenz: number }
   } | null>(null)
 
@@ -215,7 +216,7 @@ function AbrechnungDialog() {
     setSende(false)
     if (r.fehler) return setFehler(r.fehler)
     if (r.dokument && r.zusammenfassung) {
-      setErgebnis({ dokumentId: r.dokument.id, zusammenfassung: r.zusammenfassung })
+      setErgebnis({ dokument: r.dokument, zusammenfassung: r.zusammenfassung })
     }
   }
 
@@ -282,12 +283,22 @@ function AbrechnungDialog() {
                   </div>
                 </div>
               </div>
-              <a
+              <div className="mt-3 flex flex-wrap gap-3">
-                href={`/api/documents/${ergebnis.dokumentId}/download`}
+                <PdfLightbox
-                className="mt-3 inline-flex items-center gap-1.5 text-sm font-semibold text-emerald-700 underline-offset-2 hover:underline dark:text-emerald-300"
+                  dokument={ergebnis.dokument}
-              >
+                  trigger={
-                <Landmark className="h-4 w-4" /> PDF herunterladen
+                    <Button size="sm" variant="outline" className="gap-1.5">
-              </a>
+                      <Eye className="h-3.5 w-3.5" /> Vorschau
+                    </Button>
+                  }
+                />
+                <a
+                  href={`/api/documents/${ergebnis.dokument.id}/download`}
+                  className="inline-flex items-center gap-1.5 text-sm font-semibold text-emerald-700 underline-offset-2 hover:underline dark:text-emerald-300"
+                >
+                  <Landmark className="h-4 w-4" /> PDF herunterladen
+                </a>
+              </div>
             </div>
           )}
         </div>

src/store/store.tsx

@@ -191,6 +191,11 @@ interface Store extends Bootstrap {
     dokument?: DocumentItem
     zusammenfassung?: { summe: number; vorauszahlung: number; differenz: number }
   }>
+  /** Erzeugtes/gespeichertes PDF per E-Mail versenden (Verwaltung, v1.31). */
+  sendeDokumentEmail: (
+    id: string,
+    daten: { an?: string; betreff?: string; nachricht?: string },
+  ) => Promise<string | null>
   /** Beleg erneut per OCR analysieren und Zuordnung aktualisieren. */
   analysiereBeleg: (id: string) => Promise<string | null>
 }
@@ -567,6 +572,15 @@ export function StoreProvider({ children }: { children: ReactNode }) {
         return { fehler: fehlerNachricht(e) }
       }
     },
+    // ── Dokument per E-Mail versenden (v1.31) ──────────────────
+    async sendeDokumentEmail(id, daten) {
+      try {
+        await apiPost(`/api/documents/${id}/email`, daten)
+        return null
+      } catch (e) {
+        return fehlerNachricht(e)
+      }
+    },
   }), [daten, bereit, me, role, meineEinheit, ladeAlles])
 
   return <StoreContext.Provider value={value}>{children}</StoreContext.Provider>