From 82565f248278fef85765845d3e1e8fce171bb0fd Mon Sep 17 00:00:00 2001
From: Dicken <webmaster@sermerpartydorf.de>
Date: Fri, 19 Jun 2026 01:06:08 +0200
Subject: [PATCH] fix: Tooltip zeigt vollen Wochenbereich (15.06.-21.06.) statt
 nur Wochenanfang

---
 frontend/src/tools/statistik.jsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/tools/statistik.jsx b/frontend/src/tools/statistik.jsx
index ab7fa22..c8e2370 100644
--- a/frontend/src/tools/statistik.jsx
+++ b/frontend/src/tools/statistik.jsx
@@ -24,12 +24,10 @@ const CAT_COLORS = { Filament:'#4ecdc4', Zubehör:'#ffe66d', Ersatzteile:'#ff6b9
 const fmt = v => `${(v||0).toFixed(2)} €`;
 const fmtMonth = m => {
   if (!m) return '';
-  // YYYY-MM → "Jan 26"
   if (/^\d{4}-\d{2}$/.test(m)) {
     const [y,mo] = m.split('-');
     return ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'][parseInt(mo)-1]+' '+y.slice(2);
   }
-  // YYYY-MM-DD → "15.06."
   if (/^\d{4}-\d{2}-\d{2}$/.test(m)) {
     const [,mo,d] = m.split('-');
     return `${d}.${mo}.`;
@@ -37,6 +35,16 @@ const fmtMonth = m => {
   return m;
 };
 
+// Bei Wochen-Granularität: zeigt "15.06. – 21.06." statt nur den Montag
+const fmtMonthRange = (m, granularity) => {
+  if (!m || granularity !== 'week' || !/^\d{4}-\d{2}-\d{2}$/.test(m)) return fmtMonth(m);
+  const [y,mo,d] = m.split('-').map(Number);
+  const start = new Date(y, mo-1, d);
+  const end = new Date(y, mo-1, d+6);
+  const f = dt => `${String(dt.getDate()).padStart(2,'0')}.${String(dt.getMonth()+1).padStart(2,'0')}.`;
+  return `${f(start)} – ${f(end)}`;
+};
+
 const PERIODS = [
   { id:'week',   label:'Diese Woche' },
   { id:'month',  label:'Dieser Monat' },
@@ -317,7 +325,7 @@ export default function Statistik({ mobile }) {
                   <Tooltip contentStyle={{background:'#1a1d2e',border:'1px solid rgba(255,255,255,0.1)',borderRadius:8,fontFamily:'monospace',fontSize:11,color:'#fff'}}
                     labelStyle={{color:'rgba(255,255,255,0.6)'}} itemStyle={{color:'#fff'}}
                     formatter={(v,n)=>[`${v.toFixed(2)} €`, n==='revenue'?'Einnahmen':'Ausgaben']}
-                    labelFormatter={fmtMonth}/>
+                    labelFormatter={m => fmtMonthRange(m, data.granularity)}/>
                   <Bar dataKey="revenue"  fill="#4ade80" radius={[4,4,0,0]} maxBarSize={28}/>
                   <Bar dataKey="expenses" fill="#f87171" radius={[4,4,0,0]} maxBarSize={28}/>
                 </BarChart>
@@ -336,7 +344,7 @@ export default function Statistik({ mobile }) {
                     <YAxis tick={{fill:'rgba(255,255,255,0.3)',fontSize:9}} axisLine={false} tickLine={false} tickFormatter={v=>`${v}€`} width={42}/>
                     <Tooltip contentStyle={{background:'#1a1d2e',border:'1px solid rgba(255,255,255,0.1)',borderRadius:8,fontFamily:'monospace',fontSize:11,color:'#fff'}}
                       labelStyle={{color:'rgba(255,255,255,0.6)'}} itemStyle={{color:'#4ecdc4'}}
-                      formatter={v=>[`${v.toFixed(2)} €`, 'Gewinn kumuliert']} labelFormatter={fmtMonth}/>
+                      formatter={v=>[`${v.toFixed(2)} €`, 'Gewinn kumuliert']} labelFormatter={m => fmtMonthRange(m, data.granularity)}/>
                     <Line type="monotone" dataKey="value" stroke="#4ecdc4" strokeWidth={2} dot={false}/>
                   </LineChart>
                 </ResponsiveContainer>