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

frontend/src/tools/statistik.jsx

@@ -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';
 
 const api = (path, opts={}) => {
@@ -96,23 +96,23 @@ function KPI({ label, value, color, sub }) {
   );
 }
 
-// Bestellungen diesen Monat – eigene Komponente mit eigenem Fetch
-function MonthOrders({ currentMonth }) {
+// Bestellungen im gewählten Zeitraum
+function OrdersInPeriod({ period, custom }) {
   const [orders, setOrders] = useState(null);
 
   useEffect(() => {
-    const from = currentMonth + '-01';
-    const last = new Date(currentMonth.split('-')[0], currentMonth.split('-')[1], 0).getDate();
-    const to   = currentMonth + '-' + String(last).padStart(2,'0');
-    api(`/tools/statistik/month-orders?from=${from}&to=${to}`).then(setOrders).catch(()=>setOrders([]));
-  }, [currentMonth]);
+    const { from, to } = periodRange(period, custom);
+    const q = from ? `?from=${from}&to=${to}` : '';
+    api(`/tools/statistik/month-orders${q}`).then(setOrders).catch(()=>setOrders([]));
+  }, [period, custom]);
 
   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 (
     <div style={S.card}>
       <div style={S.head}>
-        BESTELLUNGEN DIESEN MONAT {orders ? `(${orders.length})` : ''}
+        BESTELLUNGEN {periodLabel} {orders ? `(${orders.length})` : ''}
       </div>
       {!orders
         ? <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 [loading,setLoading]    = useState(false);
   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 [saving, setSaving]     = useState(false);
 
-  const load = useCallback(() => {
+  function load() {
     setLoading(true);
     const { from, to } = periodRange(period, custom);
     const q = from ? `?from=${from}&to=${to}` : '';
@@ -165,9 +164,10 @@ export default function Statistik({ mobile }) {
       .then(d => setData(d))
       .catch(()=>{})
       .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() {
     if (!expForm.description || !expForm.amount) return;
@@ -470,7 +470,7 @@ export default function Statistik({ mobile }) {
 
       {/* ══ BESTELLUNGEN (dieser Monat) ══ */}
       {tab==='orders' && (
-        <MonthOrders currentMonth={currentMonth}/>
+        <OrdersInPeriod period={period} custom={custom}/>
       )}
     </div>
   );