From e4f765fcfddaa88ba11527b1905be8b34727cfaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20P=C3=B6ttker?= <bjoern@poettker-holtrup.de>
Date: Sat, 9 May 2026 12:15:54 +0200
Subject: [PATCH] refactor: redesign summary view in MailImportWizard to
 improve readability and document information layout

---
 .../src/components/MailImportWizard.tsx       | 102 +++++++++---------
 1 file changed, 48 insertions(+), 54 deletions(-)

diff --git a/paperless-frontend/src/components/MailImportWizard.tsx b/paperless-frontend/src/components/MailImportWizard.tsx
index 6ed2f98..55921d1 100644
--- a/paperless-frontend/src/components/MailImportWizard.tsx
+++ b/paperless-frontend/src/components/MailImportWizard.tsx
@@ -1,20 +1,19 @@
 import { useState, useEffect } from 'react';
-import { 
+import {
   Modal, Steps, Button, Table, Radio, Select, Input, DatePicker,
-  Space, Row, Col, Typography, message, Spin, Result, Alert, Card, Tag 
+  Space, Row, Col, Typography, message, Spin, Result, Alert, Tag
 } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import { emailImportApi, type AttachmentImportData } from '../api/email-import';
 import { paperlessApi, type PaperlessCorrespondent } from '../api/paperless';
 import dayjs from 'dayjs';
-import { 
-  PrinterOutlined, FileTextOutlined, PaperClipOutlined, ArrowRightOutlined,
-  WarningOutlined
+import {
+  PrinterOutlined, PaperClipOutlined, ArrowRightOutlined, WarningOutlined
 } from '@ant-design/icons';
 import PdfSplitViewer from './PdfSplitViewer';
 import BarcodePositioner from './BarcodePositioner';
 
-const { Text, Title } = Typography;
+const { Text } = Typography;
 
 interface MailImportWizardProps {
   visible: boolean;
@@ -664,66 +663,61 @@ export default function MailImportWizard({ visible, onClose, email, attachments
     const attachmentsToImport = importData.filter(i => i.type === 'ATTACHMENT');
 
     return (
-      <div style={{ padding: '0 24px' }}>
-        <Title level={4} style={{ marginBottom: 24 }}>Zusammenfassung des Imports</Title>
-        <Text type="secondary" style={{ display: 'block', marginBottom: 24 }}>
-          Bitte überprüfe die folgende Struktur. Mit Klick auf "Import Ausführen" werden die Belegnummern reserviert und die Dokumente hochgeladen.
-        </Text>
-
-        {mainDocs.length === 0 && <Alert type="warning" message="Keine Hauptdokumente zum Importieren ausgewählt." />}
+      <div>
+        {mainDocs.length === 0 && (
+          <Alert type="warning" message="Keine Hauptdokumente zum Importieren ausgewählt." style={{ marginBottom: 16 }} />
+        )}
 
         {mainDocs.map(main => {
           const mainAttachments = attachmentsToImport.filter(a => a.parentVirtualId === main.virtualId);
-          const mode = belegnummerMode[main.virtualId] || 'neu';
           const num = belegnummern[main.virtualId] || '000000';
           const yr = barcodes[main.virtualId]?.jahr || dayjs(email.Date).format('YYYY');
-          
-          return (
-            <div key={main.virtualId} style={{ marginBottom: 24 }}>
-              <Card size="small" style={{ borderLeft: '4px solid #1890ff' }}>
-                <Row align="middle">
-                  <Col span={16}>
-                    <Space>
-                      <FileTextOutlined style={{ fontSize: 20, color: '#1890ff' }} />
-                      <div>
-                        <Text strong style={{ fontSize: 16 }}>{main.fileName}</Text>
-                        <br />
-                        <Text type="secondary" style={{ fontSize: 12 }}>Hauptdokument</Text>
-                      </div>
-                    </Space>
-                  </Col>
-                  <Col span={8} style={{ textAlign: 'right' }}>
-                    <Tag color="blue" style={{ fontSize: 14, padding: '4px 12px' }}>
-                      {mode === 'neu' ? `Belegnr.: ${yr}-${num}` : `Belegnr.: ${yr}-${num}`}
-                    </Tag>
-                  </Col>
-                </Row>
+          const datum = eingangsdaten[main.virtualId];
+          const belegnr = `${yr}-${String(num).padStart(6, '0')}`;
 
-                {mainAttachments.length > 0 && (
-                  <div style={{ marginTop: 12, paddingLeft: 32 }}>
-                    {mainAttachments.map(att => (
-                      <div key={att.virtualId} style={{ marginBottom: 8, padding: '8px 12px', background: '#fafafa', borderRadius: 4, display: 'flex', alignItems: 'center' }}>
-                        <ArrowRightOutlined style={{ marginRight: 12, color: '#8c8c8c' }} />
-                        <PaperClipOutlined style={{ marginRight: 8 }} />
-                        <Text style={{ flex: 1 }}>{att.fileName}</Text>
-                        <Tag>Anlage</Tag>
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </Card>
+          return (
+            <div key={main.virtualId} style={{ marginBottom: 24, padding: 16, border: '1px solid #f0f0f0', borderRadius: 8 }}>
+              <Text strong style={{ fontSize: 16, marginBottom: 12, display: 'block' }}>{main.fileName}</Text>
+              <Row gutter={24} align="middle">
+                <Col span={20}>
+                  <Space size={24}>
+                    <Text type="secondary">
+                      Eingangsdatum: <Text strong>{datum?.format('DD.MM.YYYY') ?? '—'}</Text>
+                    </Text>
+                    <Text type="secondary">
+                      Belegnummer: <Tag color="blue" style={{ fontSize: 13 }}>{belegnr}</Tag>
+                    </Text>
+                  </Space>
+                  {mainAttachments.length > 0 && (
+                    <div style={{ marginTop: 12, paddingLeft: 16 }}>
+                      {mainAttachments.map(att => (
+                        <div key={att.virtualId} style={{ marginBottom: 8, padding: '6px 12px', background: '#fafafa', borderRadius: 4, display: 'flex', alignItems: 'center' }}>
+                          <ArrowRightOutlined style={{ marginRight: 12, color: '#8c8c8c' }} />
+                          <PaperClipOutlined style={{ marginRight: 8 }} />
+                          <Text style={{ flex: 1 }}>{att.fileName}</Text>
+                          <Tag>Anlage</Tag>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </Col>
+                <Col span={4} style={{ textAlign: 'right' }}>
+                  <Button icon={<PrinterOutlined />} onClick={() => printDocument(main.virtualId, main.attachmentId)}>
+                    Drucken
+                  </Button>
+                </Col>
+              </Row>
             </div>
           );
         })}
 
-        {/* Orphans (Attachments without parent or parents ignored) */}
         {attachmentsToImport.filter(a => !mainDocs.find(m => m.virtualId === a.parentVirtualId)).map(orphan => (
           <div key={orphan.virtualId} style={{ marginBottom: 12 }}>
-             <Alert 
-               type="error" 
-               message={`Anlage ohne Hauptdokument: ${orphan.fileName}`} 
-               description="Bitte gehe zurück und ordne diese Anlage einem Hauptdokument zu oder ignoriere sie."
-             />
+            <Alert
+              type="error"
+              message={`Anlage ohne Hauptdokument: ${orphan.fileName}`}
+              description="Bitte gehe zurück und ordne diese Anlage einem Hauptdokument zu oder ignoriere sie."
+            />
           </div>
         ))}
       </div>