121 lines
4.0 KiB
TypeScript
121 lines
4.0 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useCallback } from 'react';
|
|
import { MonthlyStats } from '@/types/ausgaben';
|
|
import { Category } from '@/app/api/categories/route';
|
|
|
|
interface MonatsStatistikProps {
|
|
typ: number;
|
|
refreshKey?: number;
|
|
}
|
|
|
|
export default function MonatsStatistik({ typ, refreshKey }: MonatsStatistikProps) {
|
|
const [stats, setStats] = useState<MonthlyStats | null>(null);
|
|
const [month, setMonth] = useState('');
|
|
const [year, setYear] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [categories, setCategories] = useState<Category[]>([]);
|
|
|
|
// Initialize month/year
|
|
useEffect(() => {
|
|
const now = new Date();
|
|
setMonth(String(now.getMonth() + 1).padStart(2, '0'));
|
|
setYear(String(now.getFullYear()));
|
|
}, []);
|
|
|
|
// Fetch categories once
|
|
useEffect(() => {
|
|
fetch('/api/categories')
|
|
.then((r) => r.json())
|
|
.then((data) => { if (data.success) setCategories(data.data); })
|
|
.catch(() => {});
|
|
}, []);
|
|
|
|
const fetchStats = useCallback(async (y: string, m: string) => {
|
|
if (!y || !m) return;
|
|
setIsLoading(true);
|
|
try {
|
|
const response = await fetch(`/api/ausgaben/stats?year=${y}&month=${m}&typ=${typ}`);
|
|
const data = await response.json();
|
|
if (data.success) setStats(data.data);
|
|
} catch (error) {
|
|
console.error('Error fetching stats:', error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, [typ]);
|
|
|
|
useEffect(() => {
|
|
if (month && year) fetchStats(year, month);
|
|
}, [month, year, typ, refreshKey, fetchStats]);
|
|
|
|
const formatAmount = (amount: number) =>
|
|
new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(amount);
|
|
|
|
const getCatLabel = (code: string) => {
|
|
const cat = categories.find((c) => c.value === code);
|
|
return cat ? `${cat.label}` : code;
|
|
};
|
|
|
|
return (
|
|
<div className="mt-4 bg-[#E0E0FF] border border-black rounded-lg shadow-md p-4">
|
|
{/* Zeile 1: Monat/Jahr + Gesamtsumme */}
|
|
<div className="flex items-center justify-between flex-wrap gap-2">
|
|
<div className="flex gap-4 items-center">
|
|
<label className="font-semibold">Monat:</label>
|
|
<select
|
|
value={month}
|
|
onChange={(e) => setMonth(e.target.value)}
|
|
className="border border-gray-400 rounded px-3 py-1"
|
|
>
|
|
<option value="01">Januar</option>
|
|
<option value="02">Februar</option>
|
|
<option value="03">März</option>
|
|
<option value="04">April</option>
|
|
<option value="05">Mai</option>
|
|
<option value="06">Juni</option>
|
|
<option value="07">Juli</option>
|
|
<option value="08">August</option>
|
|
<option value="09">September</option>
|
|
<option value="10">Oktober</option>
|
|
<option value="11">November</option>
|
|
<option value="12">Dezember</option>
|
|
</select>
|
|
|
|
<label className="font-semibold">Jahr:</label>
|
|
<input
|
|
type="number"
|
|
value={year}
|
|
onChange={(e) => setYear(e.target.value)}
|
|
className="border border-gray-400 rounded px-3 py-1 w-24"
|
|
min="2013"
|
|
max="2099"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
{isLoading ? (
|
|
<span>Lade...</span>
|
|
) : stats ? (
|
|
<span className="font-bold text-lg">
|
|
Summe: {formatAmount(stats.totalAusgaben)}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Zeile 2+: Kategorien */}
|
|
{!isLoading && stats?.katStats && Object.keys(stats.katStats).length > 0 && (
|
|
<div className="mt-3 pt-3 border-t border-gray-400 flex flex-wrap gap-x-6 gap-y-1">
|
|
{Object.entries(stats.katStats).map(([code, total]) => (
|
|
<div key={code} className="flex gap-2 text-sm">
|
|
<span className="font-medium">{getCatLabel(code)}:</span>
|
|
<span>{formatAmount(total)}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|