From 1451f45711d302397e039661dac361c039904474 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Reinhard=20X=2E=20F=C3=BCrst?= <rexfue@gmail.com>
Date: Sun, 10 May 2026 14:55:27 +0200
Subject: [PATCH] add Statistik component and API route

---
 app/MainClient.tsx         |  25 +++++-
 app/api/statistik/route.ts |  66 ++++++++++++++
 components/Statistik.tsx   | 171 +++++++++++++++++++++++++++++++++++++
 3 files changed, 258 insertions(+), 4 deletions(-)
 create mode 100644 app/api/statistik/route.ts
 create mode 100644 components/Statistik.tsx

diff --git a/app/MainClient.tsx b/app/MainClient.tsx
index 9d1b38c..764302c 100644
--- a/app/MainClient.tsx
+++ b/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">
diff --git a/app/api/statistik/route.ts b/app/api/statistik/route.ts
new file mode 100644
index 0000000..3993cec
--- /dev/null
+++ b/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 });
+  }
+}
diff --git a/components/Statistik.tsx b/components/Statistik.tsx
new file mode 100644
index 0000000..0ecc4fc
--- /dev/null
+++ b/components/Statistik.tsx
@@ -0,0 +1,171 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import type { Kuppel } from '@/types/logbuch';
+import { artLabel } from '@/types/logbuch';
+
+interface MonthlyRow {
+  monat: number;
+  ArtFuehrung: string;
+  besucher: number;
+  anzahl: number;
+}
+
+interface StatsData {
+  monthly: MonthlyRow[];
+  cumulative: number;
+  tage: number;
+  allCumulative: number;
+  allTage: number;
+  year: number;
+  kuppel: Kuppel;
+}
+
+const MONATE = [
+  'Januar','Februar','März','April','Mai','Juni',
+  'Juli','August','September','Oktober','November','Dezember',
+];
+
+interface Props {
+  kuppel: Kuppel;
+}
+
+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('');
+
+  useEffect(() => {
+    setLoading(true);
+    setError('');
+    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); });
+  }, [kuppel, year]);
+
+  const { arten, matrix, monatTotal, artTotal, grandTotal, anzahlTotal } = useMemo(() => {
+    if (!data) {
+      return { arten: [] as string[], matrix: [] as (number | null)[][], monatTotal: [] as number[], artTotal: [] as number[], grandTotal: 0, anzahlTotal: [] as number[] };
+    }
+
+    const artenSet = new Set<string>();
+    data.monthly.forEach((r) => artenSet.add(r.ArtFuehrung));
+    const arten = Array.from(artenSet).sort();
+
+    const matrix: (number | null)[][] = [];
+    const monatTotal: number[] = [];
+    const anzahlTotal: number[] = [];
+    const artTotal: number[] = new Array(arten.length).fill(0);
+    let grandTotal = 0;
+
+    for (let m = 1; m <= 12; m++) {
+      const row: (number | null)[] = [];
+      let mSum = 0;
+      let aSum = 0;
+      arten.forEach((art, idx) => {
+        const found = data.monthly.find((r) => r.monat === m && r.ArtFuehrung === art);
+        const val = found ? found.besucher : null;
+        row.push(val);
+        if (val !== null) {
+          mSum += val;
+          artTotal[idx] += val;
+          aSum += found!.anzahl;
+        }
+      });
+      matrix.push(row);
+      monatTotal.push(mSum);
+      anzahlTotal.push(aSum);
+      grandTotal += mSum;
+    }
+
+    return { arten, matrix, monatTotal, artTotal, grandTotal, anzahlTotal };
+  }, [data]);
+
+  if (loading) return <div className="text-gray-500 text-sm py-4">Lade Statistik...</div>;
+  if (error)   return <div className="text-red-600 text-sm py-4">{error}</div>;
+
+  const headCls = 'px-3 py-2 border border-gray-300 text-xs font-semibold bg-gray-100 whitespace-nowrap';
+  const cellCls = 'px-3 py-2 border border-gray-200 text-sm text-right tabular-nums';
+  const labelCls = 'px-3 py-2 border border-gray-200 text-sm text-left whitespace-nowrap';
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3 print:hidden">
+        <label className="text-sm font-medium text-gray-700">Jahr</label>
+        <input
+          type="number"
+          value={year}
+          onChange={(e) => setYear(parseInt(e.target.value, 10) || new Date().getFullYear())}
+          min={2000}
+          max={2100}
+          className="w-24 px-2 py-1 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none"
+        />
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="w-full border-collapse text-sm">
+          <thead>
+            <tr>
+              <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 className={headCls}>Gesamt</th>
+            </tr>
+          </thead>
+          <tbody>
+            {MONATE.map((name, idx) => {
+              const mSum = monatTotal[idx];
+              const aSum = anzahlTotal[idx];
+              return (
+                <tr key={name} className={mSum > 0 ? '' : 'text-gray-400'}>
+                  <td className={labelCls}>{name}</td>
+                  <td className={cellCls}>{aSum > 0 ? aSum : ''}</td>
+                  {arten.map((_, aIdx) => {
+                    const val = matrix[idx][aIdx];
+                    return (
+                      <td key={aIdx} className={cellCls}>
+                        {val !== null && val > 0 ? val.toLocaleString('de-DE') : ''}
+                      </td>
+                    );
+                  })}
+                  <td className={`${cellCls} font-semibold`}>{mSum > 0 ? mSum.toLocaleString('de-DE') : ''}</td>
+                </tr>
+              );
+            })}
+            <tr className="bg-gray-50 font-semibold">
+              <td className={labelCls}>Summe</td>
+              <td className={cellCls}>{anzahlTotal.reduce((s, v) => s + v, 0) > 0 ? anzahlTotal.reduce((s, v) => s + v, 0).toLocaleString('de-DE') : ''}</td>
+              {artTotal.map((t, i) => (
+                <td key={i} className={cellCls}>{t > 0 ? t.toLocaleString('de-DE') : ''}</td>
+              ))}
+              <td className={cellCls}>{grandTotal > 0 ? grandTotal.toLocaleString('de-DE') : ''}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 w-full">
+        <div className="border-2 border-gray-300 rounded-xl p-4 bg-white">
+          <div className="text-xs text-gray-500 mb-1">Kumulierte Besucher {year} ({data?.kuppel})</div>
+          <div className="text-2xl font-bold">{data?.cumulative.toLocaleString('de-DE') ?? 0}</div>
+        </div>
+        <div className="border-2 border-gray-300 rounded-xl p-4 bg-white">
+          <div className="text-xs text-gray-500 mb-1">Führungstage {year} ({data?.kuppel})</div>
+          <div className="text-2xl font-bold">{data?.tage ?? 0}</div>
+        </div>
+        <div className="border-2 border-green-600 rounded-xl p-4 bg-green-50">
+          <div className="text-xs text-green-700 mb-1">Kumulierte Besucher {year} (Sternwarte gesamt)</div>
+          <div className="text-2xl font-bold text-green-800">{data?.allCumulative.toLocaleString('de-DE') ?? 0}</div>
+        </div>
+        <div className="border-2 border-green-600 rounded-xl p-4 bg-green-50">
+          <div className="text-xs text-green-700 mb-1">Führungstage {year} (Sternwarte gesamt)</div>
+          <div className="text-2xl font-bold text-green-800">{data?.allTage ?? 0}</div>
+        </div>
+      </div>
+    </div>
+  );
+}