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

2026-10-04 18:30:42 +02:00
parent aa6f97df5f
commit a6ade223e1
7 changed files with 326 additions and 29 deletions
@@ -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>
+  )
+}
@@ -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`}
-                          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>
+                        <>
+                          <PdfLightbox
+                            dokument={d}
+                            trigger={
+                              <Button
+                                variant="outline"
+                                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'}
@@ -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
-                href={`/api/documents/${ergebnis.dokumentId}/download`}
-                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"
-              >
-                <Landmark className="h-4 w-4" /> PDF herunterladen
-              </a>
+              <div className="mt-3 flex flex-wrap gap-3">
+                <PdfLightbox
+                  dokument={ergebnis.dokument}
+                  trigger={
+                    <Button size="sm" variant="outline" className="gap-1.5">
+                      <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>
@@ -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>