Dicken/dickendock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: Bestellungen nach gewähltem Zeitraum, Übersicht reagiert auf Zeitraum-Wechsel

Browse Source
This commit is contained in:
Dicken
2026-06-17 17:50:47 +02:00
parent d4fb2d7527
commit 19dbdbeea7
1 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/tools/statistik.jsx
View File

@@ -1,4 +1,4 @@
import { useState, useEffect, useCallback } from 'react'; import { useState, useEffect } from 'react';
import { BarChart, Bar, LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell, PieChart, Pie, Legend } from 'recharts'; import { BarChart, Bar, LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell, PieChart, Pie, Legend } from 'recharts';
const api = (path, opts={}) => { const api = (path, opts={}) => {
@@ -96,23 +96,23 @@ function KPI({ label, value, color, sub }) {
); );
} }
// Bestellungen diesen Monat – eigene Komponente mit eigenem Fetch // Bestellungen im gewählten Zeitraum
function MonthOrders({ currentMonth }) { function OrdersInPeriod({ period, custom }) {
const [orders, setOrders] = useState(null); const [orders, setOrders] = useState(null);
useEffect(() => { useEffect(() => {
const from = currentMonth + '-01'; const { from, to } = periodRange(period, custom);
const last = new Date(currentMonth.split('-')[0], currentMonth.split('-')[1], 0).getDate(); const q = from ? `?from=${from}&to=${to}` : '';
const to = currentMonth + '-' + String(last).padStart(2,'0'); api(`/tools/statistik/month-orders${q}`).then(setOrders).catch(()=>setOrders([]));
api(`/tools/statistik/month-orders?from=${from}&to=${to}`).then(setOrders).catch(()=>setOrders([])); }, [period, custom]);
}, [currentMonth]);
const statusColor = { warteliste:'#ffe66d', in_arbeit:'#4ecdc4', fertig:'#6bcb77' }; const statusColor = { warteliste:'#ffe66d', in_arbeit:'#4ecdc4', fertig:'#6bcb77' };
const periodLabel = period==='week'?'DIESER WOCHE':period==='month'?'DIESEM MONAT':period==='year'?'DIESEM JAHR':period==='all'?'GESAMT':'IM ZEITRAUM';
return ( return (
<div style={S.card}> <div style={S.card}>
<div style={S.head}> <div style={S.head}>
BESTELLUNGEN DIESEN MONAT {orders ? `(${orders.length})` : ''} BESTELLUNGEN {periodLabel} {orders ? `(${orders.length})` : ''}
</div> </div>
{!orders {!orders
? <div style={{color:'rgba(255,255,255,0.3)',fontFamily:'monospace',fontSize:12}}>Lädt…</div> ? <div style={{color:'rgba(255,255,255,0.3)',fontFamily:'monospace',fontSize:12}}>Lädt…</div>
@@ -152,12 +152,11 @@ export default function Statistik({ mobile }) {
const [data, setData] = useState(null); const [data, setData] = useState(null);
const [loading,setLoading] = useState(false); const [loading,setLoading] = useState(false);
const [tab, setTab] = useState('overview'); const [tab, setTab] = useState('overview');
// Bestellungen-Tab: immer aktueller Monat
const currentMonth = new Date().toISOString().slice(0,7);
const [expForm,setExpForm] = useState({ date: new Date().toISOString().slice(0,10), category:'Filament', description:'', amount:'' }); const [expForm,setExpForm] = useState({ date: new Date().toISOString().slice(0,10), category:'Filament', description:'', amount:'' });
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
const load = useCallback(() => { function load() {
setLoading(true); setLoading(true);
const { from, to } = periodRange(period, custom); const { from, to } = periodRange(period, custom);
const q = from ? `?from=${from}&to=${to}` : ''; const q = from ? `?from=${from}&to=${to}` : '';
@@ -165,9 +164,10 @@ export default function Statistik({ mobile }) {
.then(d => setData(d)) .then(d => setData(d))
.catch(()=>{}) .catch(()=>{})
.finally(()=>setLoading(false)); .finally(()=>setLoading(false));
}, [period, custom]); }
useEffect(() => { load(); }, [load]); // Neu laden wenn Zeitraum ändert
useEffect(() => { load(); }, [period, custom.type, custom.month, custom.year]);
async function addExpense() { async function addExpense() {
if (!expForm.description || !expForm.amount) return; if (!expForm.description || !expForm.amount) return;
@@ -470,7 +470,7 @@ export default function Statistik({ mobile }) {
{/* ══ BESTELLUNGEN (dieser Monat) ══ */} {/* ══ BESTELLUNGEN (dieser Monat) ══ */}
{tab==='orders' && ( {tab==='orders' && (
<MonthOrders currentMonth={currentMonth}/> <OrdersInPeriod period={period} custom={custom}/>
)} )}
</div> </div>
); );