From 8b3280da0aa8507cfff61d09e437488a7e0134ef Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Thu, 26 Jun 2025 07:58:59 +0200
Subject: [PATCH] feat: Tabellenkopf in Berichte-Seite fixiert und Scrollen
 verbessert
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- thead mit sticky top-0 versehen für festen Header beim Scrollen
- vertikales Scrollen durch max-h-[80vh] und overflow-auto aktiviert
- optimiert für Desktop- und Mobilgeräte (iOS, iPad, etc.)
- Pagination entfernt für besseres Nutzererlebnis beim Scrollen
---
 .env.development    |  2 +-
 .env.production     |  2 +-
 CHANGELOG.md        |  9 +++++++++
 package-lock.json   |  4 ++--
 package.json        |  2 +-
 pages/meldungen.tsx | 39 ++++-----------------------------------
 6 files changed, 18 insertions(+), 40 deletions(-)

diff --git a/.env.development b/.env.development
index fd5960a..a303805 100644
--- a/.env.development
+++ b/.env.development
@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
 NEXT_PUBLIC_EXPORT_STATIC=false
 NEXT_PUBLIC_USE_CGI=false
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.450
+NEXT_PUBLIC_APP_VERSION=1.6.451
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 
diff --git a/.env.production b/.env.production
index b80fe05..a11fcb8 100644
--- a/.env.production
+++ b/.env.production
@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
 NEXT_PUBLIC_EXPORT_STATIC=true
 NEXT_PUBLIC_USE_CGI=true
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.450
+NEXT_PUBLIC_APP_VERSION=1.6.451
 NEXT_PUBLIC_CPL_MODE=production
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c40e8a4..c646cf9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,12 @@
+## [1.6.451] – 2025-06-26
+
+- feat: zeige die neuesten 20 Meldungen in Last20MessagesTable
+
+- Daten aus API chronologisch absteigend sortiert (neueste zuerst)
+- Anzeige auf die ersten 20 Einträge begrenzt
+- Verhalten nun konsistent mit Seite /meldungen
+
+---
 ## [1.6.450] – 2025-06-26
 
 - feat: Filter für Quelle
diff --git a/package-lock.json b/package-lock.json
index 421b765..65e4b36 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.450",
+  "version": "1.6.451",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.450",
+      "version": "1.6.451",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
         "@iconify-icons/ri": "^1.2.10",
diff --git a/package.json b/package.json
index a03812b..3436dcf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.450",
+  "version": "1.6.451",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/pages/meldungen.tsx b/pages/meldungen.tsx
index 5f30d27..96f5758 100644
--- a/pages/meldungen.tsx
+++ b/pages/meldungen.tsx
@@ -11,11 +11,9 @@ type Meldung = {
   i: string;
 };
 
-const ITEMS_PER_PAGE = 10;
-
 export default function Messages() {
   const [messages, setMessages] = useState<Meldung[]>([]);
-  const [currentPage, setCurrentPage] = useState(1);
+
   const [sourceFilter, setSourceFilter] = useState<string>("Alle");
 
   // Datum initialisieren: von = heute - 30 Tage, bis = heute
@@ -55,7 +53,6 @@ export default function Messages() {
         return;
       }
       setMessages(data);
-      setCurrentPage(1);
     } catch (err) {
       console.error("Fehler beim Laden der Meldungen:", err);
     }
@@ -66,12 +63,6 @@ export default function Messages() {
       ? messages
       : messages.filter((m) => m.i === sourceFilter);
 
-  const totalPages = Math.ceil(filteredMessages.length / ITEMS_PER_PAGE);
-  const currentMessages = filteredMessages.slice(
-    (currentPage - 1) * ITEMS_PER_PAGE,
-    currentPage * ITEMS_PER_PAGE
-  );
-
   const allSources = Array.from(new Set(messages.map((m) => m.i))).sort();
   // einmal beim laden de Seite die Meldungen abrufen
   useEffect(() => {
@@ -109,9 +100,9 @@ export default function Messages() {
         </select>
       </div>
 
-      <div className="overflow-x-auto">
+      <div className="overflow-auto max-h-[80vh]">
         <table className="min-w-full border">
-          <thead className="bg-gray-100 text-left">
+          <thead className="bg-gray-100 text-left sticky top-0 z-10">
             <tr>
               <th className="p-2 border">Prio</th>
               <th className="p-2 border">Zeitstempel</th>
@@ -121,7 +112,7 @@ export default function Messages() {
             </tr>
           </thead>
           <tbody>
-            {currentMessages.map((msg, index) => (
+            {filteredMessages.map((msg, index) => (
               <tr key={index} className="hover:bg-gray-50">
                 <td className="border p-2">
                   <div
@@ -143,28 +134,6 @@ export default function Messages() {
           </div>
         )}
       </div>
-
-      <div className="flex justify-between items-center mt-4">
-        <button
-          onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
-          disabled={currentPage === 1}
-          className="bg-littwin-blue text-white px-4 py-2 rounded"
-        >
-          Zurück
-        </button>
-        <span>
-          Seite {currentPage} von {totalPages}
-        </span>
-        <button
-          onClick={() =>
-            setCurrentPage((prev) => Math.min(prev + 1, totalPages))
-          }
-          disabled={currentPage === totalPages}
-          className="bg-littwin-blue text-white px-4 py-2 rounded"
-        >
-          Weiter
-        </button>
-      </div>
     </div>
   );
 }