From ba869e373db7f070159c38eaf3749ed21c13e9cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Reinhard=20X=2E=20F=C3=BCrst?= <rexfue@gmail.com>
Date: Fri, 10 Jul 2026 15:42:28 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20Fahrkosten=20'Bis=20Datum'=20Filter=20(?=
 =?UTF-8?q?Default=20heute)=20=E2=80=94=20Version=201.11.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/api/fahrkosten/route.ts |  6 ++-
 components/Fahrkosten.tsx   | 73 ++++++++++++++++++++++++++++++-------
 lib/phpdb.ts                |  5 ++-
 package.json                |  2 +-
 4 files changed, 68 insertions(+), 18 deletions(-)

diff --git a/app/api/fahrkosten/route.ts b/app/api/fahrkosten/route.ts
index a765d3c..3325b9f 100644
--- a/app/api/fahrkosten/route.ts
+++ b/app/api/fahrkosten/route.ts
@@ -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);
diff --git a/components/Fahrkosten.tsx b/components/Fahrkosten.tsx
index 6a6e234..bdaf853 100644
--- a/components/Fahrkosten.tsx
+++ b/components/Fahrkosten.tsx
@@ -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>
diff --git a/lib/phpdb.ts b/lib/phpdb.ts
index 838a4a0..8616c69 100644
--- a/lib/phpdb.ts
+++ b/lib/phpdb.ts
@@ -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 {
diff --git a/package.json b/package.json
index 5deac96..3147f38 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "logbuch",
-  "version": "1.10.3",
+  "version": "1.11.0",
   "private": true,
   "scripts": {
     "dev": "next dev",