admin/logbuch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Statistik komplett neu gestaltet — kuppelunabhängig, feste Spalten

Browse Source 
- Statistik gilt jetzt für alle Kuppeln gemeinsam (kein Kuppel-Filter mehr)
- Neue Tabellenstruktur: Besucher (RF/SF/SonF/PrF/ToT/Gesamt) | Anzahl (Führ./Beob./TD/Sonst./BEOS/ToT/Gesamt)
- Anzahl zählt Einträge (COUNT(*)) statt distinkte Tage
- Zusammenfassungskacheln auf 2 reduziert (Besucher + Führungen gesamt)
- Fix: Besucher-State wird zurückgesetzt wenn ArtFuehrung auf TD/BEOS wechselt

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Reinhard X. Fürst
2026-05-30 17:29:08 +02:00
parent 102bc441c6
commit d5bd359802
4 changed files with 141 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/LogbuchForm.tsx
+2 -1
View File
@@ -134,12 +134,13 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
}
}, [editEntry]);
// Objekte-Vorauswahl je nach Art der Führung
// Objekte-Vorauswahl je nach Art der Führung; Besucher zurücksetzen wenn nicht relevant
useEffect(() => {
if (artFuehrung === SONNE_ART) {
setObjekte([{ ID: null, Name: 'Sonne' }]);
} else if (NO_OBJEKTE_ARTEN.includes(artFuehrung)) {
setObjekte([]);
setBesucher('');
}
}, [artFuehrung]);
components/Statistik.tsx
+94 -101
View File
@@ -1,24 +1,29 @@
'use client';
import { useEffect, useMemo, useState } from 'react';
import type { ArtFuehrung, Kuppel } from '@/types/logbuch';
import { artLabel } from '@/types/logbuch';
import { useEffect, useState } from 'react';
interface MonthlyRow {
interface MonthRow {
monat: number;
ArtFuehrung: string;
besucher: number;
anzahl: number;
tageFuehrungen: number;
tageBeob: number;
tageTD: number;
tageSonst: number;
tageBEOS: number;
tagesToT: number;
tageGesamt: number;
besucherRF: number;
besucherSF: number;
besucherSonF: number;
besucherPrF: number;
besucherToT: number;
besucherGesamt: number;
}
interface StatsData {
monthly: MonthlyRow[];
monthly: MonthRow[];
cumulative: number;
tage: number;
allCumulative: number;
allTage: number;
year: number;
kuppel: Kuppel;
}
const MONATE = [
@@ -26,73 +31,44 @@ const MONATE = [
'Juli','August','September','Oktober','November','Dezember',
];
interface Props {
kuppel: Kuppel;
function n(v: number) {
return v > 0 ? v.toLocaleString('de-DE') : '';
}
export default function Statistik({ kuppel }: Props) {
export default function Statistik() {
const [year, setYear] = useState(new Date().getFullYear());
const [data, setData] = useState<StatsData | null>(null);
const [fetchError, setFetchError] = useState<{ year: number; kuppel: Kuppel } | null>(null);
const [fetchError, setFetchError] = useState<number | 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);
const error = fetchError === year ? 'Fehler beim Laden der Statistik.' : '';
const loading = !error && (!data || data.year !== year);
useEffect(() => {
let cancelled = false;
fetch(`/api/statistik?kuppel=${encodeURIComponent(kuppel)}&year=${year}`)
fetch(`/api/statistik?year=${year}`)
.then((r) => { if (!r.ok) throw new Error(); return r.json(); })
.then((d: StatsData) => { if (!cancelled) { setData(d); setFetchError(null); } })
.catch(() => { if (!cancelled) setFetchError({ year, kuppel }); });
.catch(() => { if (!cancelled) setFetchError(year); });
return () => { cancelled = true; };
}, [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]);
}, [year]);
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';
const rows = data!.monthly;
function col(key: keyof MonthRow): number {
return rows.reduce((s, r) => s + (r[key] as number), 0);
}
const thTop = 'px-3 py-2 border border-gray-300 text-xs font-semibold bg-gray-100 text-center';
const thSub = 'px-3 py-2 border border-gray-300 text-xs font-semibold bg-gray-50 whitespace-nowrap';
const thDiv = 'px-3 py-2 border border-gray-300 border-l-4 border-l-gray-400 text-xs font-semibold bg-gray-50 whitespace-nowrap';
const td = 'px-3 py-2 border border-gray-200 text-sm text-right tabular-nums';
const tdDiv = 'px-3 py-2 border border-gray-200 border-l-4 border-l-gray-400 text-sm text-right tabular-nums';
const tdL = 'px-3 py-2 border border-gray-200 text-sm text-left whitespace-nowrap';
const tdSum = 'px-3 py-2 border border-gray-200 text-sm text-right tabular-nums font-semibold bg-gray-50';
const tdSumDiv = 'px-3 py-2 border border-gray-200 border-l-4 border-l-gray-400 text-sm text-right tabular-nums font-semibold bg-gray-50';
return (
<div className="space-y-4">
@@ -112,63 +88,80 @@ export default function Statistik({ kuppel }: Props) {
<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 ArtFuehrung)}</th>
))}
<th className={headCls}>Gesamt</th>
<th className={thTop} rowSpan={2}>Monat</th>
<th className={thTop} colSpan={6}>Besucher</th>
<th className={`${thTop} border-l-4 border-l-gray-400`} colSpan={7}>Anzahl</th>
</tr>
<tr>
<th className={thSub}>RF</th>
<th className={thSub}>SF</th>
<th className={thSub}>SonF</th>
<th className={thSub}>PrF</th>
<th className={thSub}>ToT</th>
<th className={thSub}>Gesamt</th>
<th className={thDiv}>Führ.</th>
<th className={thSub}>Beob.</th>
<th className={thSub}>TD</th>
<th className={thSub}>Sonst.</th>
<th className={thSub}>BEOS</th>
<th className={thSub}>ToT</th>
<th className={thSub}>Gesamt</th>
</tr>
</thead>
<tbody>
{MONATE.map((name, idx) => {
const mSum = monatTotal[idx];
const aSum = anzahlTotal[idx];
const m = idx + 1;
const r = rows.find((row) => row.monat === m);
const hasData = r && r.tageGesamt > 0;
const cls = hasData ? '' : 'text-gray-400';
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 key={name} className={cls}>
<td className={tdL}>{name}</td>
<td className={td}>{r ? n(r.besucherRF) : ''}</td>
<td className={td}>{r ? n(r.besucherSF) : ''}</td>
<td className={td}>{r ? n(r.besucherSonF) : ''}</td>
<td className={td}>{r ? n(r.besucherPrF) : ''}</td>
<td className={td}>{r ? n(r.besucherToT) : ''}</td>
<td className={`${td} font-semibold`}>{r ? n(r.besucherGesamt) : ''}</td>
<td className={`${tdDiv} font-semibold`}>{r ? n(r.tageFuehrungen) : ''}</td>
<td className={td}>{r ? n(r.tageBeob) : ''}</td>
<td className={td}>{r ? n(r.tageTD) : ''}</td>
<td className={td}>{r ? n(r.tageSonst) : ''}</td>
<td className={td}>{r ? n(r.tageBEOS) : ''}</td>
<td className={td}>{r ? n(r.tagesToT) : ''}</td>
<td className={`${td} font-semibold`}>{r ? n(r.tageGesamt) : ''}</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>
<td className={tdL + ' font-semibold'}>Summe</td>
<td className={tdSum}>{n(col('besucherRF'))}</td>
<td className={tdSum}>{n(col('besucherSF'))}</td>
<td className={tdSum}>{n(col('besucherSonF'))}</td>
<td className={tdSum}>{n(col('besucherPrF'))}</td>
<td className={tdSum}>{n(col('besucherToT'))}</td>
<td className={tdSum}>{n(col('besucherGesamt'))}</td>
<td className={tdSumDiv}>{n(col('tageFuehrungen'))}</td>
<td className={tdSum}>{n(col('tageBeob'))}</td>
<td className={tdSum}>{n(col('tageTD'))}</td>
<td className={tdSum}>{n(col('tageSonst'))}</td>
<td className={tdSum}>{n(col('tageBEOS'))}</td>
<td className={tdSum}>{n(col('tagesToT'))}</td>
<td className={tdSum}>{n(col('tageGesamt'))}</td>
</tr>
</tbody>
</table>
</div>
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 w-full">
<div className="grid grid-cols-2 gap-4 w-full max-w-sm">
<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-xs text-gray-500 mb-1">Besucher {year}</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-xs text-gray-500 mb-1">Führungen {year}</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>
);