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

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`}
-                          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'}