155 lines
6.7 KiB
TypeScript
155 lines
6.7 KiB
TypeScript
'use client';
|
|
|
|
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);
|
|
// 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;
|
|
fetch(`/api/fahrkosten?ab=${ab}${bis ? `&bis=${bis}` : ''}`)
|
|
.then((r) => { if (!r.ok) throw new Error(); return r.json(); })
|
|
.then((d: FahrkostenRow[]) => { if (!cancelled) setData({ ab, bis, rows: d }); })
|
|
.catch(() => { if (!cancelled) setErrorKey(key); });
|
|
return () => { cancelled = true; };
|
|
}, [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 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"
|
|
value={ab}
|
|
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 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">Fehler beim Laden.</div>}
|
|
|
|
{!loading && !error && rows && (
|
|
<>
|
|
{rows.length === 0 ? (
|
|
<div className="text-gray-500 text-sm py-4">Keine Führungen in diesem Zeitraum gefunden.</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full border-collapse text-sm">
|
|
<thead>
|
|
<tr>
|
|
<th className={thCls}>Name</th>
|
|
<th className={thNarrowCls}>Kürzel</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>
|
|
{rows.map((r) => (
|
|
<tr key={r.ID} className="hover:bg-gray-50 print:hover:bg-transparent">
|
|
<td className={tdCls}>{r.Name}</td>
|
|
<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>
|
|
<tfoot>
|
|
<tr className="bg-gray-100 font-semibold">
|
|
<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>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|