feat: Tabellenkopf in Berichte-Seite fixiert und Scrollen verbessert

- 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

@@ -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)
 

.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

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

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",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.450",
+  "version": "1.6.451",
   "private": true,
   "scripts": {
     "dev": "next dev",

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>
   );
 }