From 873f08042e31fe2a0145d6345e3b6edab182c1ab Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Sat, 21 Mar 2026 08:33:03 +0100
Subject: [PATCH] feat: add date filter to nutrition data tab

Added dropdown filter with options:
- Letzte 7 Tage
- Letzte 30 Tage (default)
- Letzte 90 Tage
- Letztes Jahr
- Alle anzeigen

Shows filtered count vs total count in title.
Handles large datasets (7+ years) efficiently.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/NutritionPage.jsx | 32 +++++++++++++++++++++++++---
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/NutritionPage.jsx b/frontend/src/pages/NutritionPage.jsx
index 7ab28e9..4a75ee9 100644
--- a/frontend/src/pages/NutritionPage.jsx
+++ b/frontend/src/pages/NutritionPage.jsx
@@ -24,6 +24,7 @@ function DataTab({ entries, onUpdate }) {
   const [editValues, setEditValues] = useState({})
   const [saving, setSaving] = useState(false)
   const [error, setError] = useState(null)
+  const [filter, setFilter] = useState('30') // days to show (7, 30, 90, 'all')
 
   const startEdit = (e) => {
     setEditId(e.id)
@@ -72,6 +73,14 @@ function DataTab({ entries, onUpdate }) {
     }
   }
 
+  // Filter entries by date range
+  const filteredEntries = filter === 'all'
+    ? entries
+    : entries.filter(e => {
+        const daysDiff = dayjs().diff(dayjs(e.date), 'day')
+        return daysDiff <= parseInt(filter)
+      })
+
   if (entries.length === 0) {
     return (
       <div className="card section-gap">
@@ -83,17 +92,34 @@ function DataTab({ entries, onUpdate }) {
 
   return (
     <div className="card section-gap">
-      <div className="card-title">Alle Einträge ({entries.length})</div>
+      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:16}}>
+        <div className="card-title" style={{margin:0}}>
+          Alle Einträge ({filteredEntries.length}{filteredEntries.length !== entries.length ? ` von ${entries.length}` : ''})
+        </div>
+        <select
+          value={filter}
+          onChange={e => setFilter(e.target.value)}
+          style={{
+            padding:'6px 10px',fontSize:12,borderRadius:8,border:'1.5px solid var(--border2)',
+            background:'var(--surface)',color:'var(--text2)',cursor:'pointer',fontFamily:'var(--font)'
+          }}>
+          <option value="7">Letzte 7 Tage</option>
+          <option value="30">Letzte 30 Tage</option>
+          <option value="90">Letzte 90 Tage</option>
+          <option value="365">Letztes Jahr</option>
+          <option value="all">Alle anzeigen</option>
+        </select>
+      </div>
       {error && (
         <div style={{padding:'8px 12px',background:'#FCEBEB',borderRadius:8,fontSize:13,color:'#D85A30',marginBottom:12}}>
           {error}
         </div>
       )}
-      {entries.map((e, i) => {
+      {filteredEntries.map((e, i) => {
         const isEditing = editId === e.id
         return (
           <div key={e.id || i} style={{
-            borderBottom: i < entries.length - 1 ? '1px solid var(--border)' : 'none',
+            borderBottom: i < filteredEntries.length - 1 ? '1px solid var(--border)' : 'none',
             padding: '12px 0'
           }}>
             {!isEditing ? (