From d56ebb229d031ec7e59eb98b8f59df1b2bf0d491 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Reinhard=20X=2E=20F=C3=BCrst?= <rexfue@gmail.com>
Date: Sun, 17 May 2026 16:46:38 +0200
Subject: [PATCH] feat: Anleitung-Button im Footer + Statistik-Effect-Fix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Footer: 3-Spalten-Layout mit 'Anleitung'-Button in der Mitte (Link auf /anleitung.html)
- anleitung.html: 'Zurück zum Logbuch'-Button oben (beim Drucken ausgeblendet)
- Statistik: synchrones setState im Effect durch abgeleiteten loading/error-State ersetzt; Fetch-Abbruch mit cancelled-Flag; as any durch ArtFuehrung-Cast ersetzt

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ACHTUNG.md               |  4 ++--
 app/MainClient.tsx       | 10 +++++++++-
 components/Statistik.tsx | 20 ++++++++++++--------
 public/anleitung.html    | 20 ++++++++++++++++++++
 4 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/ACHTUNG.md b/ACHTUNG.md
index 6c203ed..bc8c725 100644
--- a/ACHTUNG.md
+++ b/ACHTUNG.md
@@ -1,9 +1,9 @@
 ### Zugriff zur Datenbank:
 
 Die Remote-Datenbank auf logbuch.fuerst-.stuttgart.de wird zum lokalen entwickeln über einen SSH-Tunner erreicht:
-
+ssh -L 3336:localhost:3336 rxf@logbuch.fuerst-stuttgart.de -N 
 ~~~
-    ssh -L 3336:localhost:3336 rxf@logbuch.fuerst-stuttgart.de -N                                                                                                                                                   
+  ssh -L 3336:localhost:3336 rxf@logbuch.fuerst-stuttgart.de -N 
 ~~~
 
 Dieser ist vor dem Starten des Programme einmal einzurichten!!
diff --git a/app/MainClient.tsx b/app/MainClient.tsx
index 6165638..fb3a8a8 100644
--- a/app/MainClient.tsx
+++ b/app/MainClient.tsx
@@ -179,12 +179,20 @@ export default function MainClient({ kuerzel, beoId, beoName, role }: Props) {
           </div>
         )}
 
-        <footer className="mt-6 flex justify-between items-center text-xs sm:text-sm text-gray-600 px-1 sm:px-4 print:hidden">
+        <footer className="mt-6 grid grid-cols-3 items-center text-xs sm:text-sm text-gray-600 px-1 sm:px-4 print:hidden">
           <div>
             <a href="mailto:rxf@gmx.de" className="text-blue-600 hover:underline">
               rxf@gmx.de
             </a>
           </div>
+          <div className="flex justify-center">
+            <a
+              href="/anleitung.html"
+              className="px-3 py-1.5 bg-gray-200 hover:bg-gray-300 rounded-lg text-gray-700"
+            >
+              Anleitung
+            </a>
+          </div>
           <div className="text-right">
             v{version} — {buildDate}
           </div>
diff --git a/components/Statistik.tsx b/components/Statistik.tsx
index 0ecc4fc..97ebb0a 100644
--- a/components/Statistik.tsx
+++ b/components/Statistik.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useMemo, useState } from 'react';
-import type { Kuppel } from '@/types/logbuch';
+import type { ArtFuehrung, Kuppel } from '@/types/logbuch';
 import { artLabel } from '@/types/logbuch';
 
 interface MonthlyRow {
@@ -33,16 +33,20 @@ interface Props {
 export default function Statistik({ kuppel }: Props) {
   const [year, setYear] = useState(new Date().getFullYear());
   const [data, setData] = useState<StatsData | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
+  const [fetchError, setFetchError] = useState<{ year: number; kuppel: Kuppel } | null>(null);
+
+  const error = fetchError?.year === year && fetchError?.kuppel === kuppel
+    ? 'Fehler beim Laden der Statistik.'
+    : '';
+  const loading = !error && (!data || data.year !== year || data.kuppel !== kuppel);
 
   useEffect(() => {
-    setLoading(true);
-    setError('');
+    let cancelled = false;
     fetch(`/api/statistik?kuppel=${encodeURIComponent(kuppel)}&year=${year}`)
       .then((r) => { if (!r.ok) throw new Error(); return r.json(); })
-      .then((d: StatsData) => { setData(d); setLoading(false); })
-      .catch(() => { setError('Fehler beim Laden der Statistik.'); setLoading(false); });
+      .then((d: StatsData) => { if (!cancelled) { setData(d); setFetchError(null); } })
+      .catch(() => { if (!cancelled) setFetchError({ year, kuppel }); });
+    return () => { cancelled = true; };
   }, [kuppel, year]);
 
   const { arten, matrix, monatTotal, artTotal, grandTotal, anzahlTotal } = useMemo(() => {
@@ -111,7 +115,7 @@ export default function Statistik({ kuppel }: Props) {
               <th className={headCls}>Monat</th>
               <th className={headCls}>Führungen</th>
               {arten.map((art) => (
-                <th key={art} className={headCls}>{artLabel(art as any) || art}</th>
+                <th key={art} className={headCls}>{artLabel(art as ArtFuehrung)}</th>
               ))}
               <th className={headCls}>Gesamt</th>
             </tr>
diff --git a/public/anleitung.html b/public/anleitung.html
index d9d9d87..d3ac948 100644
--- a/public/anleitung.html
+++ b/public/anleitung.html
@@ -202,6 +202,23 @@
       section { padding: 1.2rem 1rem; }
     }
 
+    .back-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.4rem;
+      margin-bottom: 1.5rem;
+      padding: 0.5rem 1rem;
+      background: #fff;
+      border: 1px solid #d8e0f0;
+      border-radius: 8px;
+      color: #2e4e8a;
+      font-size: 0.9rem;
+      font-weight: 600;
+      text-decoration: none;
+      cursor: pointer;
+    }
+    .back-btn:hover { background: #eef2fa; }
+
     @media print {
       body { background: #fff; font-size: 12pt; }
       .page { max-width: none; padding: 0; }
@@ -209,12 +226,15 @@
       section { border: 1px solid #ccc; break-inside: avoid; }
       nav.toc { break-after: page; }
       a { color: inherit; text-decoration: none; }
+      .back-btn { display: none; }
     }
   </style>
 </head>
 <body>
 <div class="page">
 
+  <a href="/" class="back-btn">← Zurück zum Logbuch</a>
+
   <header>
     <div class="star">★</div>
     <div>