erster Versuch mit Fahrkosten
This commit is contained in:
+22
-3
@@ -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">
|
||||
|
||||
@@ -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 });
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user