From 134ac84bb23c7a52589d9ae10e925208f22229bc Mon Sep 17 00:00:00 2001
From: fds2610-bot <felix-bot@schepmann.de>
Date: Fri, 15 May 2026 19:17:22 +0200
Subject: [PATCH] Feature: Split-View in Belegliste mit Vorschau-Panel rechts

---
 src/Views/belege/list.php | 188 +++++++++++++++++++++++++-------------
 1 file changed, 122 insertions(+), 66 deletions(-)

diff --git a/src/Views/belege/list.php b/src/Views/belege/list.php
index 268f264..2270713 100644
--- a/src/Views/belege/list.php
+++ b/src/Views/belege/list.php
@@ -126,74 +126,130 @@
     </div>
 </div>
 
-<div class="card">
-    <div class="table-wrap">
-        <table>
-            <thead>
-                <tr>
-                    <th>Belegnr.</th>
-                    <th>Belegdatum</th>
-                    <th>Lieferant</th>
-                    <th>Rechnungsnr.</th>
-                    <th>Dateiname</th>
-                    <th>Bewirtungsgrund / Teilnehmer</th>
-                    <th class="td-right">Brutto</th>
-                    <th>Status</th>
-                    <th></th>
-                </tr>
-            </thead>
-            <tbody>
-                <?php foreach ($rows as $b): ?>
-                <tr>
-                    <td><a href="/belege/<?= $h($b['id']) ?>" class="font-mono"><?= $h($b['beleg_nr']) ?></a></td>
-                    <td class="td-muted"><?= View::formatDate($b['beleg_datum']) ?></td>
-                    <td class="td-muted"><?= $h($b['supplier_name'] ?? '–') ?></td>
-                    <td class="td-muted"><?= $h($b['rechnungs_nr'] ?? '–') ?></td>
-                    <td class="text-sm text-muted"><?= $h(mb_strimwidth($b['filename'], 0, 35, '…')) ?></td>
-                    <td style="max-width:220px">
-                        <?php if (!empty($b['bewirtungsgrund'])): ?>
-                            <div style="font-size:.8em;white-space:pre-wrap;word-break:break-word"><?= $h($b['bewirtungsgrund']) ?></div>
+<div style="display:flex;gap:1rem;align-items:flex-start">
+
+    <!-- Linke Hälfte: Tabelle + Pagination -->
+    <div style="flex:1;min-width:0">
+        <div class="card">
+            <div class="table-wrap">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Belegnr.</th>
+                            <th>Belegdatum</th>
+                            <th>Lieferant</th>
+                            <th>Rechnungsnr.</th>
+                            <th>Dateiname</th>
+                            <th>Bewirtungsgrund / Teilnehmer</th>
+                            <th class="td-right">Brutto</th>
+                            <th>Status</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <?php foreach ($rows as $b): ?>
+                        <tr class="beleg-row"
+                            data-beleg-id="<?= (int)$b['id'] ?>"
+                            style="cursor:pointer"
+                            title="Klicken für Vorschau">
+                            <td onclick="event.stopPropagation()">
+                                <a href="/belege/<?= $h($b['id']) ?>" class="font-mono"><?= $h($b['beleg_nr']) ?></a>
+                            </td>
+                            <td class="td-muted"><?= View::formatDate($b['beleg_datum']) ?></td>
+                            <td class="td-muted"><?= $h($b['supplier_name'] ?? '–') ?></td>
+                            <td class="td-muted"><?= $h($b['rechnungs_nr'] ?? '–') ?></td>
+                            <td class="text-sm text-muted"><?= $h(mb_strimwidth($b['filename'], 0, 35, '…')) ?></td>
+                            <td style="max-width:220px">
+                                <?php if (!empty($b['bewirtungsgrund'])): ?>
+                                    <div style="font-size:.8em;white-space:pre-wrap;word-break:break-word"><?= $h($b['bewirtungsgrund']) ?></div>
+                                <?php endif; ?>
+                                <?php if (!empty($b['teilnehmerliste'])): ?>
+                                    <div style="font-size:.75em;color:var(--color-muted);white-space:pre-wrap;word-break:break-word;margin-top:.15em"><?= $h($b['teilnehmerliste']) ?></div>
+                                <?php endif; ?>
+                                <?php if (empty($b['bewirtungsgrund']) && empty($b['teilnehmerliste'])): ?>
+                                    <span class="text-muted">–</span>
+                                <?php endif; ?>
+                            </td>
+                            <td class="td-right td-mono"><?= $b['betrag_brutto'] !== null ? View::formatMoney($b['betrag_brutto']) : '–' ?></td>
+                            <td>
+                                <?php if ($b['locked']): ?>
+                                    <span class="badge badge-purple">Gesperrt</span>
+                                <?php elseif ($b['booked']): ?>
+                                    <span class="badge badge-green">Gebucht</span>
+                                <?php else: ?>
+                                    <span class="badge badge-yellow">Offen</span>
+                                <?php endif; ?>
+                            </td>
+                            <td onclick="event.stopPropagation()">
+                                <a href="/belege/<?= $h($b['id']) ?>" class="btn btn-secondary btn-sm">Öffnen</a>
+                            </td>
+                        </tr>
+                        <?php endforeach; ?>
+                        <?php if (empty($rows)): ?>
+                        <tr><td colspan="10" class="text-center text-muted" style="padding:2rem">Keine Belege gefunden.</td></tr>
                         <?php endif; ?>
-                        <?php if (!empty($b['teilnehmerliste'])): ?>
-                            <div style="font-size:.75em;color:var(--color-muted);white-space:pre-wrap;word-break:break-word;margin-top:.15em"><?= $h($b['teilnehmerliste']) ?></div>
-                        <?php endif; ?>
-                        <?php if (empty($b['bewirtungsgrund']) && empty($b['teilnehmerliste'])): ?>
-                            <span class="text-muted">–</span>
-                        <?php endif; ?>
-                    </td>
-                    <td class="td-right td-mono"><?= $b['betrag_brutto'] !== null ? View::formatMoney($b['betrag_brutto']) : '–' ?></td>
-                    <td>
-                        <?php if ($b['locked']): ?>
-                            <span class="badge badge-purple">Gesperrt</span>
-                        <?php elseif ($b['booked']): ?>
-                            <span class="badge badge-green">Gebucht</span>
-                        <?php else: ?>
-                            <span class="badge badge-yellow">Offen</span>
-                        <?php endif; ?>
-                    </td>
-                    <td>
-                        <a href="/belege/<?= $h($b['id']) ?>" class="btn btn-secondary btn-sm">Öffnen</a>
-                    </td>
-                </tr>
-                <?php endforeach; ?>
-                <?php if (empty($rows)): ?>
-                <tr><td colspan="10" class="text-center text-muted" style="padding:2rem">Keine Belege gefunden.</td></tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <?php if ($pages > 1): ?>
+        <div class="pagination">
+            <?php if ($page > 1): ?><a href="?<?= http_build_query(array_merge($filter, ['page' => $page-1])) ?>">‹</a><?php endif; ?>
+            <?php for ($p = max(1,$page-3); $p <= min($pages,$page+3); $p++): ?>
+                <?php if ($p === $page): ?>
+                    <span class="active"><?= $p ?></span>
+                <?php else: ?>
+                    <a href="?<?= http_build_query(array_merge($filter, ['page' => $p])) ?>"><?= $p ?></a>
                 <?php endif; ?>
-            </tbody>
-        </table>
+            <?php endfor; ?>
+            <?php if ($page < $pages): ?><a href="?<?= http_build_query(array_merge($filter, ['page' => $page+1])) ?>">›</a><?php endif; ?>
+        </div>
+        <?php endif; ?>
     </div>
+
+    <!-- Rechte Hälfte: Vorschau-Panel -->
+    <div id="beleg-preview-panel" style="
+        flex:1;
+        min-width:0;
+        position:sticky;
+        top:1rem;
+        border:1px solid var(--color-border,#e2e8f0);
+        border-radius:var(--radius,6px);
+        background:var(--color-surface,#f8fafc);
+        overflow:hidden;
+        height:calc(100vh - 6rem);
+        display:flex;
+        align-items:center;
+        justify-content:center;
+    ">
+        <span class="text-muted text-sm" id="beleg-preview-hint">Zeile anklicken für Vorschau</span>
+        <iframe id="beleg-preview-frame"
+                style="display:none;width:100%;height:100%;border:none"
+                src=""></iframe>
+    </div>
+
 </div>
 
-<?php if ($pages > 1): ?>
-<div class="pagination">
-    <?php if ($page > 1): ?><a href="?<?= http_build_query(array_merge($filter, ['page' => $page-1])) ?>">‹</a><?php endif; ?>
-    <?php for ($p = max(1,$page-3); $p <= min($pages,$page+3); $p++): ?>
-        <?php if ($p === $page): ?>
-            <span class="active"><?= $p ?></span>
-        <?php else: ?>
-            <a href="?<?= http_build_query(array_merge($filter, ['page' => $p])) ?>"><?= $p ?></a>
-        <?php endif; ?>
-    <?php endfor; ?>
-    <?php if ($page < $pages): ?><a href="?<?= http_build_query(array_merge($filter, ['page' => $page+1])) ?>">›</a><?php endif; ?>
-</div>
-<?php endif; ?>
+<script>
+(function () {
+    const frame   = document.getElementById('beleg-preview-frame');
+    const hint    = document.getElementById('beleg-preview-hint');
+    let activeRow = null;
+
+    document.querySelectorAll('.beleg-row').forEach(function (row) {
+        row.addEventListener('click', function () {
+            const id = row.dataset.belegId;
+            if (!id) return;
+
+            if (activeRow) activeRow.style.background = '';
+            activeRow = row;
+            row.style.background = 'var(--color-primary-light, #eff6ff)';
+
+            hint.style.display  = 'none';
+            frame.style.display = 'block';
+            frame.src = '/belege/' + id + '/file';
+        });
+    });
+})();
+</script>