diff --git a/frontend/src/tools/statistik.jsx b/frontend/src/tools/statistik.jsx index a59ef5b..13a43fb 100644 --- a/frontend/src/tools/statistik.jsx +++ b/frontend/src/tools/statistik.jsx @@ -102,20 +102,19 @@ function KPI({ label, value, color, sub }) { } // Bestellungen im gewählten Zeitraum -function OrdersInPeriod({ period, custom }) { +function OrdersInPeriod({ fromDate, toDate }) { const [orders, setOrders] = useState(null); useEffect(() => { - const { from, to } = periodRange(period, custom); - const q = from ? `?from=${from}&to=${to}` : ''; + const q = (fromDate || toDate) ? `?from=${fromDate}&to=${toDate}` : ''; api(`/tools/statistik/month-orders${q}`).then(setOrders).catch(()=>setOrders([])); - }, [period, custom]); + }, [fromDate, toDate]); const STATUS_ORDER = ['warteliste','in_arbeit','fertig','bezahlt','abgeschlossen']; const STATUS_COLOR = { warteliste:'#ffe66d', in_arbeit:'#4ecdc4', fertig:'#6bcb77', bezahlt:'#c084fc', abgeschlossen:'#4ade80' }; const STATUS_LABEL = { warteliste:'Warteliste', in_arbeit:'In Arbeit', fertig:'Fertig', bezahlt:'Bezahlt', abgeschlossen:'Abgeschlossen' }; - const periodLabel = period==='week'?'DIESER WOCHE':period==='month'?'DIESEM MONAT':period==='year'?'DIESEM JAHR':period==='all'?'GESAMT':'IM ZEITRAUM'; + const periodLabel = (fromDate || toDate) ? 'IM ZEITRAUM' : 'GESAMT'; // Gruppieren nach Status const grouped = {}; @@ -184,8 +183,8 @@ function OrdersInPeriod({ period, custom }) { } export default function Statistik({ mobile }) { - const [period, setPeriod] = useState('month'); - const [custom, setCustom] = useState({ type:'month', month: new Date().toISOString().slice(0,7), year: new Date().getFullYear() }); + const [fromDate, setFromDate] = useState(''); + const [toDate, setToDate] = useState(''); const [data, setData] = useState(null); const [loading,setLoading] = useState(false); const [tab, setTab] = useState('overview'); @@ -195,16 +194,14 @@ export default function Statistik({ mobile }) { function load() { setLoading(true); - const { from, to } = periodRange(period, custom); - const q = from ? `?from=${from}&to=${to}` : ''; + const q = (fromDate || toDate) ? `?from=${fromDate}&to=${toDate}` : ''; api('/tools/statistik/overview'+q) .then(d => setData(d)) .catch(()=>{}) .finally(()=>setLoading(false)); } - // Neu laden wenn Zeitraum ändert - useEffect(() => { load(); }, [period, custom.type, custom.month, custom.year]); + useEffect(() => { load(); }, [fromDate, toDate]); async function addExpense() { if (!expForm.description || !expForm.amount) return; @@ -232,46 +229,26 @@ export default function Statistik({ mobile }) { 📊 3D-Druck Statistik {/* Zeitraum */} -
- {PERIODS.filter(p=>p.id!=='custom').map(p => ( - - ))} - {/* Eigener Zeitraum */} -
- setFromDate(e.target.value)} style={{background:'rgba(255,255,255,0.06)',border:'1px solid rgba(255,255,255,0.12)', - borderRadius:8,padding:'5px 8px',color:'rgba(255,255,255,0.6)',fontFamily:'monospace',fontSize:11,cursor:'pointer'}}> - - - - {custom.type==='month' && ( - - )} - {custom.type==='year' && ( - - )} + borderRadius:8,padding:'5px 10px',color:'#fff',fontFamily:'monospace',fontSize:11,cursor:'pointer'}}/>
+
+ Bis + setToDate(e.target.value)} + style={{background:'rgba(255,255,255,0.06)',border:'1px solid rgba(255,255,255,0.12)', + borderRadius:8,padding:'5px 10px',color:'#fff',fontFamily:'monospace',fontSize:11,cursor:'pointer'}}/> +
+ {(fromDate || toDate) && ( + + )}
@@ -510,7 +487,7 @@ export default function Statistik({ mobile }) { {/* ══ BESTELLUNGEN (dieser Monat) ══ */} {tab==='orders' && ( - + )} );