From 49905aa97e497c56a6dc96faa82695e273cb93c3 Mon Sep 17 00:00:00 2001
From: duffyduck <info@hacker-net.de>
Date: Fri, 1 May 2026 09:36:40 +0200
Subject: [PATCH] Monitoring: Pagination mit Seitenzahlen + Anfang/Ende-Buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Vorher: nur "Zurück / Weiter". Jetzt:
[«] [‹] [1] [2] [3] [4] [5*] [6] [7] [8] [9] [10] [›] [»]

10 Seitenzahlen-Buttons, current centered (clamped an Anfang/Ende).
Zusätzlich Doppelpfeile für erste/letzte Seite. Kompakt + verständlich
auch bei 50+ Seiten.

Helper paginationWindow() rechnet das Fenster aus, sodass bei
totalPages <= 10 alle gezeigt werden, sonst current ungefähr mittig
mit Clamp an die Ränder.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/pages/settings/Monitoring.tsx | 76 +++++++++++++++++++---
 1 file changed, 66 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/settings/Monitoring.tsx b/frontend/src/pages/settings/Monitoring.tsx
index e84d59d4..34ea3bf0 100644
--- a/frontend/src/pages/settings/Monitoring.tsx
+++ b/frontend/src/pages/settings/Monitoring.tsx
@@ -8,7 +8,22 @@ import Button from '../../components/ui/Button';
 import Input from '../../components/ui/Input';
 import Select from '../../components/ui/Select';
 import Modal from '../../components/ui/Modal';
-import { ArrowLeft, Send, RefreshCw, Mail, ShieldAlert, ChevronLeft, ChevronRight, Trash2 } from 'lucide-react';
+import { ArrowLeft, Send, RefreshCw, Mail, ShieldAlert, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Trash2 } from 'lucide-react';
+
+/**
+ * Liefert die anzuzeigenden Seitenzahlen für die Pagination.
+ * Bis zu 10 Seitenzahlen, current möglichst mittig.
+ */
+function paginationWindow(current: number, total: number, size = 10): number[] {
+  if (total <= size) return Array.from({ length: total }, (_, i) => i + 1);
+  let start = Math.max(1, current - Math.floor(size / 2));
+  let end = start + size - 1;
+  if (end > total) {
+    end = total;
+    start = end - size + 1;
+  }
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+}
 
 const TYPE_OPTIONS: { value: SecurityEventType | ''; label: string }[] = [
   { value: '', label: 'Alle Typen' },
@@ -305,15 +320,56 @@ export default function Monitoring() {
           </div>
         )}
         {pagination && pagination.totalPages > 1 && (
-          <div className="flex justify-between items-center mt-4 text-sm">
-            <span>Seite {pagination.page} von {pagination.totalPages} ({pagination.total} Einträge)</span>
-            <div className="flex gap-2">
-              <Button variant="secondary" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>
-                <ChevronLeft className="w-4 h-4" /> Zurück
-              </Button>
-              <Button variant="secondary" size="sm" onClick={() => setPage((p) => p + 1)} disabled={page >= pagination.totalPages}>
-                Weiter <ChevronRight className="w-4 h-4" />
-              </Button>
+          <div className="flex flex-wrap items-center justify-between gap-3 mt-4 text-sm">
+            <span className="text-gray-600">
+              Seite {pagination.page} von {pagination.totalPages} ({pagination.total} Einträge)
+            </span>
+            <div className="flex items-center gap-1">
+              <button
+                onClick={() => setPage(1)}
+                disabled={page <= 1}
+                title="Erste Seite"
+                className="px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100"
+              >
+                <ChevronsLeft className="w-4 h-4" />
+              </button>
+              <button
+                onClick={() => setPage((p) => Math.max(1, p - 1))}
+                disabled={page <= 1}
+                title="Vorherige Seite"
+                className="px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100"
+              >
+                <ChevronLeft className="w-4 h-4" />
+              </button>
+              {paginationWindow(page, pagination.totalPages, 10).map((p) => (
+                <button
+                  key={p}
+                  onClick={() => setPage(p)}
+                  className={`min-w-[32px] px-2 py-1 rounded border text-sm ${
+                    p === page
+                      ? 'bg-blue-600 text-white border-blue-600'
+                      : 'border-gray-300 hover:bg-gray-100'
+                  }`}
+                >
+                  {p}
+                </button>
+              ))}
+              <button
+                onClick={() => setPage((p) => Math.min(pagination.totalPages, p + 1))}
+                disabled={page >= pagination.totalPages}
+                title="Nächste Seite"
+                className="px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100"
+              >
+                <ChevronRight className="w-4 h-4" />
+              </button>
+              <button
+                onClick={() => setPage(pagination.totalPages)}
+                disabled={page >= pagination.totalPages}
+                title="Letzte Seite"
+                className="px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100"
+              >
+                <ChevronsRight className="w-4 h-4" />
+              </button>
             </div>
           </div>
         )}