erster Versuch mit Fahrkosten

app/MainClient.tsx

@@ -6,6 +6,7 @@ import type { Kuppel, LogbuchEintrag } from '@/types/logbuch';
 import LogbuchForm from '@/components/LogbuchForm';
 import LogbuchList from '@/components/LogbuchList';
 import Statistik from '@/components/Statistik';
+import Fahrkosten from '@/components/Fahrkosten';
 import packageJson from '@/package.json';
 
 interface Props {
@@ -17,7 +18,7 @@ interface Props {
 
 export default function MainClient({ kuerzel, beoId, beoName, role }: Props) {
   const [activeKuppel, setActiveKuppel] = useState<Kuppel>('West');
-  const [activeTab, setActiveTab] = useState<'eingabe' | 'liste' | 'statistik'>('eingabe');
+  const [activeTab, setActiveTab] = useState<'eingabe' | 'liste' | 'statistik' | 'fahrkosten'>('eingabe');
   const [refreshKey, setRefreshKey] = useState(0);
   const [editEntry, setEditEntry] = useState<LogbuchEintrag | null>(null);
 
@@ -92,7 +93,9 @@ export default function MainClient({ kuerzel, beoId, beoName, role }: Props) {
 
         {/* Eingabe/Liste/Statistik-Tabs */}
         <div className="flex gap-1 mb-3 border-b border-gray-200 print:hidden">
-          {(['eingabe', 'liste', 'statistik'] as const).map((tab) => (
+          {(['eingabe', 'liste', 'statistik', 'fahrkosten'] as const)
+            .filter((tab) => tab !== 'fahrkosten' || role?.includes('admin') || role?.includes('master'))
+            .map((tab) => (
             <button
               key={tab}
               onClick={() => { setActiveTab(tab); if (tab === 'eingabe') setEditEntry(null); }}
@@ -102,7 +105,7 @@ export default function MainClient({ kuerzel, beoId, beoName, role }: Props) {
                   : 'border-transparent text-gray-500 hover:text-gray-700'
               }`}
             >
-              {tab === 'eingabe' ? 'Eingabe' : tab === 'liste' ? 'Liste' : 'Statistik'}
+              {tab === 'eingabe' ? 'Eingabe' : tab === 'liste' ? 'Liste' : tab === 'statistik' ? 'Statistik' : 'Fahrkosten'}
             </button>
           ))}
         </div>
@@ -183,6 +186,22 @@ export default function MainClient({ kuerzel, beoId, beoName, role }: Props) {
           </div>
         )}
 
+        {/* Fahrkosten-Tab */}
+        {activeTab === 'fahrkosten' && (role?.includes('admin') || role?.includes('master')) && (
+          <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">Fahrkostenabrechnung</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>
+            <Fahrkosten />
+          </div>
+        )}
+
         <footer className="mt-6 grid grid-cols-3 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">

app/api/fahrkosten/route.ts

@@ -0,0 +1,42 @@
+import { NextResponse } from 'next/server';
+import { query } from '@/lib/db';
+import { getSession } from '@/lib/session';
+
+export interface FahrkostenRow {
+  ID: number;
+  Kuerzel: string;
+  Name: string;
+  Anzahl: number;
+}
+
+const EXCLUDED = "'PrF','Beob','BEOS','TD','ToT'";
+
+export async function GET(req: Request) {
+  const session = await getSession();
+  if (!session) return NextResponse.json({ error: 'Nicht angemeldet' }, { status: 401 });
+
+  const { searchParams } = new URL(req.url);
+  const ab = searchParams.get('ab');
+  if (!ab || !/^\d{4}-\d{2}-\d{2}$/.test(ab)) {
+    return NextResponse.json({ error: 'Parameter ab (YYYY-MM-DD) fehlt' }, { status: 400 });
+  }
+
+  try {
+    const rows = await query(
+      'SELECT b.id AS ID, b.`kürzel` AS Kuerzel,' +
+      ' CONCAT(IFNULL(b.vorname, \'\'), IF(b.vorname IS NOT NULL, \' \', \'\'), b.name) AS Name,' +
+      ' COUNT(DISTINCT l.ID) AS Anzahl' +
+      ' FROM beos b' +
+      ' JOIN logbuch_beos lb ON lb.BeoID = b.id' +
+      ' JOIN logbuch l ON l.ID = lb.LogbuchID' +
+      ' WHERE l.Beginn >= ? AND l.ArtFuehrung NOT IN (' + EXCLUDED + ')' +
+      ' GROUP BY b.id, b.`kürzel`, b.name, b.vorname' +
+      ' ORDER BY b.name ASC',
+      [ab + ' 00:00:00']
+    ) as FahrkostenRow[];
+    return NextResponse.json(rows);
+  } catch (error) {
+    console.error('GET /api/fahrkosten:', error);
+    return NextResponse.json({ error: 'Datenbankfehler' }, { status: 500 });
+  }
+}

components/Fahrkosten.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface FahrkostenRow {
+  ID: number;
+  Kuerzel: string;
+  Name: string;
+  Anzahl: number;
+}
+
+const SATZ = Number(process.env.NEXT_PUBLIC_FAHRKOSTEN_SATZ ?? 15);
+
+function defaultAb(): string {
+  const d = new Date();
+  return `${d.getFullYear()}-01-01`;
+}
+
+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('');
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError('');
+    fetch(`/api/fahrkosten?ab=${ab}`)
+      .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); } });
+    return () => { cancelled = true; };
+  }, [ab]);
+
+  const gesamt = rows ? rows.reduce((s, r) => s + r.Anzahl * SATZ, 0) : 0;
+
+  const thCls = 'px-3 py-2 border border-gray-300 text-xs font-semibold bg-gray-100 text-left whitespace-nowrap';
+  const thNarrowCls = `${thCls} w-16`;
+  const tdCls = 'px-3 py-2 border border-gray-200 text-sm';
+  const tdNarrowCls = `${tdCls} w-16`;
+  const tdNumCls = 'px-3 py-2 border border-gray-200 text-sm text-right tabular-nums w-20';
+
+  const abFormatted = new Date(ab + '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">
+        <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-sm focus:border-blue-500 focus:outline-none"
+        />
+      </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-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>}
+
+      {!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`}>Führungen</th>
+                    <th className={`${thCls} text-right`}>Fahrkosten</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>
+                    </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>
+                  </tr>
+                </tfoot>
+              </table>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}