feat: Fahrkosten 'Bis Datum' Filter (Default heute) — Version 1.11.0

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-10 15:42:28 +02:00
parent 7c11683515
commit ba869e373d
4 changed files with 68 additions and 18 deletions
+5 -1
View File
@@ -13,9 +13,13 @@ export async function GET(req: Request) {
if (!ab || !/^\d{4}-\d{2}-\d{2}$/.test(ab)) {
return NextResponse.json({ error: 'Parameter ab (YYYY-MM-DD) fehlt' }, { status: 400 });
}
const bis = searchParams.get('bis') ?? new Date().toISOString().slice(0, 10);
if (!/^\d{4}-\d{2}-\d{2}$/.test(bis)) {
return NextResponse.json({ error: 'Parameter bis (YYYY-MM-DD) ungültig' }, { status: 400 });
}
try {
const rows = await phpdb.getFahrkosten(ab);
const rows = await phpdb.getFahrkosten(ab, bis);
return NextResponse.json(rows);
} catch (error) {
console.error('GET /api/fahrkosten:', error);
+59 -14
View File
@@ -1,53 +1,76 @@
'use client';
import { useEffect, useState } from 'react';
import { useEffect, useRef, useState } from 'react';
interface FahrkostenRow {
ID: number;
Kuerzel: string;
Name: string;
Km: number;
Anzahl: number;
}
const SATZ = Number(process.env.NEXT_PUBLIC_FAHRKOSTEN_SATZ ?? 15);
// Der in der DB gespeicherte km-Wert gilt für die einfache Fahrt — für Hin- und Rückfahrt verdoppeln.
const FAHRTEN_PRO_TERMIN = 2;
function defaultAb(): string {
const d = new Date();
return `${d.getFullYear()}-01-01`;
}
function defaultBis(): string {
const d = new Date();
const mm = String(d.getMonth() + 1).padStart(2, '0');
const dd = String(d.getDate()).padStart(2, '0');
return `${d.getFullYear()}-${mm}-${dd}`;
}
export default function Fahrkosten() {
const [ab, setAb] = useState(defaultAb);
const [rows, setRows] = useState<FahrkostenRow[] | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
// Leeres `bis` bedeutet „bis heute“ — das Backend setzt dann den heutigen Tag ein.
const [bis, setBis] = useState('');
const [data, setData] = useState<{ ab: string; bis: string; rows: FahrkostenRow[] } | null>(null);
const [errorKey, setErrorKey] = useState<string | null>(null);
const bisRef = useRef<HTMLInputElement>(null);
const key = `${ab}|${bis}`;
useEffect(() => {
let cancelled = false;
setLoading(true);
setError('');
fetch(`/api/fahrkosten?ab=${ab}`)
fetch(`/api/fahrkosten?ab=${ab}${bis ? `&bis=${bis}` : ''}`)
.then((r) => { if (!r.ok) throw new Error(); return r.json(); })
.then((d: FahrkostenRow[]) => { if (!cancelled) { setRows(d); setLoading(false); } })
.catch(() => { if (!cancelled) { setError('Fehler beim Laden.'); setLoading(false); } });
.then((d: FahrkostenRow[]) => { if (!cancelled) setData({ ab, bis, rows: d }); })
.catch(() => { if (!cancelled) setErrorKey(key); });
return () => { cancelled = true; };
}, [ab]);
}, [ab, bis, key]);
// Derive status from state tagged with the `ab|bis` it belongs to, so that
// changing the range shows the loading state without a synchronous setState.
const rows = data && data.ab === ab && data.bis === bis ? data.rows : null;
const error = errorKey === key;
const loading = !rows && !error;
const gesamt = rows ? rows.reduce((s, r) => s + r.Anzahl * SATZ, 0) : 0;
const gesamtKm = rows ? rows.reduce((s, r) => s + r.Anzahl * r.Km * FAHRTEN_PRO_TERMIN, 0) : 0;
const thCls = 'px-3 py-2 border border-gray-300 text-xs font-semibold bg-gray-100 text-left whitespace-nowrap text-gray-900';
const thNarrowCls = `${thCls} w-16`;
const tdCls = 'px-3 py-2 border border-gray-200 text-sm text-gray-900';
const tdNarrowCls = `${tdCls} w-16`;
const tdNumCls = 'px-3 py-2 border border-gray-200 text-sm text-right tabular-nums w-20 text-gray-900';
const tdKmCls = 'px-3 py-2 border border-gray-200 text-sm text-right tabular-nums w-28 whitespace-nowrap text-gray-900';
const abFormatted = new Date(ab + 'T00:00:00').toLocaleDateString('de-DE', {
day: '2-digit', month: '2-digit', year: 'numeric',
});
const bisFormatted = new Date((bis || defaultBis()) + 'T00:00:00').toLocaleDateString('de-DE', {
day: '2-digit', month: '2-digit', year: 'numeric',
});
return (
<div className="space-y-4 print:pl-[1.5cm]">
<div className="flex items-center gap-3 print:hidden">
<div className="flex flex-wrap items-center gap-x-3 gap-y-2 print:hidden">
<label className="text-sm font-medium text-gray-700 whitespace-nowrap">Ab Datum</label>
<input
type="date"
@@ -55,17 +78,36 @@ export default function Fahrkosten() {
onChange={(e) => setAb(e.target.value)}
className="px-2 py-1 border-2 border-gray-400 rounded-lg bg-white text-gray-900 text-sm focus:border-blue-500 focus:outline-none"
/>
<label className="text-sm font-medium text-gray-700 whitespace-nowrap">Bis Datum</label>
<div className="relative">
<input
ref={bisRef}
type="date"
value={bis}
onChange={(e) => setBis(e.target.value)}
className="px-2 py-1 border-2 border-gray-400 rounded-lg bg-white text-gray-900 text-sm focus:border-blue-500 focus:outline-none"
/>
{!bis && (
<button
type="button"
onClick={() => bisRef.current?.showPicker?.()}
className="absolute inset-0.5 flex items-center rounded-md bg-white pl-2 text-left text-sm text-gray-900"
>
heute
</button>
)}
</div>
</div>
{/* Druckkopf */}
<div className="hidden print:block mb-2">
<div className="text-lg font-bold">Sternwarte Welzheim Fahrkostenabrechnung</div>
<div className="text-sm text-gray-600">Führungen ab <strong>{abFormatted}</strong> · {SATZ} pro Führung</div>
<div className="text-sm text-gray-600">Führungen von <strong>{abFormatted}</strong> bis <strong>{bisFormatted}</strong> · {SATZ} pro Führung</div>
<div className="text-xs text-gray-400 mt-0.5">Ausdruck vom {new Date().toLocaleDateString('de-DE')}</div>
</div>
{loading && <div className="text-gray-500 text-sm py-4">Lade...</div>}
{error && <div className="text-red-600 text-sm py-4">{error}</div>}
{error && <div className="text-red-600 text-sm py-4">Fehler beim Laden.</div>}
{!loading && !error && rows && (
<>
@@ -78,8 +120,9 @@ export default function Fahrkosten() {
<tr>
<th className={thCls}>Name</th>
<th className={thNarrowCls}>Kürzel</th>
<th className={`${thNarrowCls} text-right`}>Führungen</th>
<th className={`${thNarrowCls} text-right`}>Fahrten</th>
<th className={`${thCls} text-right`}>Fahrkosten</th>
<th className={`${thCls} text-right`}>Kilometer</th>
</tr>
</thead>
<tbody>
@@ -89,6 +132,7 @@ export default function Fahrkosten() {
<td className={tdNarrowCls}>{r.Kuerzel}</td>
<td className={tdNumCls}>{r.Anzahl}</td>
<td className={tdNumCls}>{(r.Anzahl * SATZ).toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}</td>
<td className={tdKmCls}>{(r.Anzahl * r.Km * FAHRTEN_PRO_TERMIN).toLocaleString('de-DE')} km</td>
</tr>
))}
</tbody>
@@ -97,6 +141,7 @@ export default function Fahrkosten() {
<td className={`${tdCls} font-semibold`} colSpan={2}>Gesamt</td>
<td className={`${tdNumCls} font-semibold`}>{rows.reduce((s, r) => s + r.Anzahl, 0)}</td>
<td className={`${tdNumCls} font-semibold`}>{gesamt.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}</td>
<td className={`${tdKmCls} font-semibold`}>{gesamtKm.toLocaleString('de-DE')} km</td>
</tr>
</tfoot>
</table>
+3 -2
View File
@@ -148,11 +148,12 @@ export interface FahrkostenRow {
ID: number;
Kuerzel: string;
Name: string;
Km: number;
Anzahl: number;
}
export async function getFahrkosten(ab: string): Promise<FahrkostenRow[]> {
return call('LB_FAHRKOSTEN', { ab });
export async function getFahrkosten(ab: string, bis: string): Promise<FahrkostenRow[]> {
return call('LB_FAHRKOSTEN', { ab, bis });
}
export interface StatistikResult {
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "logbuch",
"version": "1.10.3",
"version": "1.11.0",
"private": true,
"scripts": {
"dev": "next dev",