add Statistik component and API route

app/MainClient.tsx

@@ -5,6 +5,7 @@ import { KUPPELN } from '@/types/logbuch';
 import type { Kuppel, LogbuchEintrag } from '@/types/logbuch';
 import LogbuchForm from '@/components/LogbuchForm';
 import LogbuchList from '@/components/LogbuchList';
+import Statistik from '@/components/Statistik';
 import packageJson from '@/package.json';
 
 interface Props {
@@ -15,7 +16,7 @@ interface Props {
 
 export default function MainClient({ kuerzel, beoId, beoName }: Props) {
   const [activeKuppel, setActiveKuppel] = useState<Kuppel>('West');
-  const [activeTab, setActiveTab] = useState<'eingabe' | 'liste'>('eingabe');
+  const [activeTab, setActiveTab] = useState<'eingabe' | 'liste' | 'statistik'>('eingabe');
   const [refreshKey, setRefreshKey] = useState(0);
   const [editEntry, setEditEntry] = useState<LogbuchEintrag | null>(null);
 
@@ -80,9 +81,9 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
           ))}
         </div>
 
-        {/* Eingabe/Liste-Tabs */}
+        {/* Eingabe/Liste/Statistik-Tabs */}
         <div className="flex gap-1 mb-3 border-b border-gray-200 print:hidden">
-          {(['eingabe', 'liste'] as const).map((tab) => (
+          {(['eingabe', 'liste', 'statistik'] as const).map((tab) => (
             <button
               key={tab}
               onClick={() => { setActiveTab(tab); if (tab === 'eingabe') setEditEntry(null); }}
@@ -92,7 +93,7 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
                   : 'border-transparent text-gray-500 hover:text-gray-700'
               }`}
             >
-              {tab === 'eingabe' ? 'Eingabe' : 'Liste'}
+              {tab === 'eingabe' ? 'Eingabe' : tab === 'liste' ? 'Liste' : 'Statistik'}
             </button>
           ))}
         </div>
@@ -162,6 +163,22 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
           </div>
         )}
 
+        {/* Statistik-Tab */}
+        {activeTab === 'statistik' && (
+          <div className="border-2 border-gray-400 rounded-xl bg-white p-3 print:border-0 print:rounded-none print:p-0">
+            <div className="flex justify-between items-center mb-2 print:hidden">
+              <span className="text-sm font-semibold text-gray-600">Statistik {activeKuppel}-Kuppel</span>
+              <button
+                onClick={() => window.print()}
+                className="text-sm px-3 py-1.5 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg"
+              >
+                🖨 Drucken
+              </button>
+            </div>
+            <Statistik kuppel={activeKuppel} />
+          </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">
           <div>
             <a href="mailto:rxf@gmx.de" className="text-blue-600 hover:underline">

app/api/statistik/route.ts

@@ -0,0 +1,66 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { query } from '@/lib/db';
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const kuppel = searchParams.get('kuppel') || 'West';
+  const year = parseInt(searchParams.get('year') || String(new Date().getFullYear()), 10);
+
+  try {
+    // 1) Monatliche Besucherzahlen nach ArtFuehrung
+    const monthlyRows = await query(
+      `SELECT
+         MONTH(Beginn) AS monat,
+         ArtFuehrung,
+         SUM(Besucher) AS besucher,
+         COUNT(*) AS anzahl
+       FROM logbuch
+       WHERE Kuppel = ? AND YEAR(Beginn) = ?
+       GROUP BY MONTH(Beginn), ArtFuehrung
+       ORDER BY monat, ArtFuehrung`,
+      [kuppel, year]
+    ) as { monat: number; ArtFuehrung: string; besucher: number; anzahl: number }[];
+
+    // 2) Kumulierte Besucher im Jahr
+    const cumulativeRows = await query(
+      `SELECT SUM(Besucher) AS total FROM logbuch WHERE Kuppel = ? AND YEAR(Beginn) = ?`,
+      [kuppel, year]
+    ) as { total: number | null }[];
+
+    // 3) Anzahl Führungstage (distinct Datum)
+    const tageRows = await query(
+      `SELECT COUNT(DISTINCT DATE(Beginn)) AS tage FROM logbuch WHERE Kuppel = ? AND YEAR(Beginn) = ?`,
+      [kuppel, year]
+    ) as { tage: number }[];
+
+    // 4) Kumulierte Besucher über alle Kuppeln
+    const allCumulativeRows = await query(
+      `SELECT SUM(Besucher) AS total FROM logbuch WHERE YEAR(Beginn) = ?`,
+      [year]
+    ) as { total: number | null }[];
+
+    // 5) Führungstage über alle Kuppeln
+    const allTageRows = await query(
+      `SELECT COUNT(DISTINCT DATE(Beginn)) AS tage FROM logbuch WHERE YEAR(Beginn) = ?`,
+      [year]
+    ) as { tage: number }[];
+
+    return NextResponse.json({
+      monthly: monthlyRows.map((r) => ({
+        monat: Number(r.monat),
+        ArtFuehrung: r.ArtFuehrung,
+        besucher: Number(r.besucher),
+        anzahl: Number(r.anzahl),
+      })),
+      cumulative: Number(cumulativeRows[0]?.total ?? 0),
+      tage: Number(tageRows[0]?.tage ?? 0),
+      allCumulative: Number(allCumulativeRows[0]?.total ?? 0),
+      allTage: Number(allTageRows[0]?.tage ?? 0),
+      year,
+      kuppel,
+    });
+  } catch (error) {
+    console.error('GET /api/statistik:', error);
+    return NextResponse.json({ error: 'Datenbankfehler' }, { status: 500 });
+  }
+}