feat: add date filter to nutrition data tab
All checks were successful
Deploy Development / deploy (push) Successful in 33s
Build Test / lint-backend (push) Successful in 1s
Build Test / build-frontend (push) Successful in 13s

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>
This commit is contained in:
Lars 2026-03-21 08:33:03 +01:00
parent 0f072f4735
commit 873f08042e

View File

@ -24,6 +24,7 @@ function DataTab({ entries, onUpdate }) {
const [editValues, setEditValues] = useState({}) const [editValues, setEditValues] = useState({})
const [saving, setSaving] = useState(false) const [saving, setSaving] = useState(false)
const [error, setError] = useState(null) const [error, setError] = useState(null)
const [filter, setFilter] = useState('30') // days to show (7, 30, 90, 'all')
const startEdit = (e) => { const startEdit = (e) => {
setEditId(e.id) 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) { if (entries.length === 0) {
return ( return (
<div className="card section-gap"> <div className="card section-gap">
@ -83,17 +92,34 @@ function DataTab({ entries, onUpdate }) {
return ( return (
<div className="card section-gap"> <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 && ( {error && (
<div style={{padding:'8px 12px',background:'#FCEBEB',borderRadius:8,fontSize:13,color:'#D85A30',marginBottom:12}}> <div style={{padding:'8px 12px',background:'#FCEBEB',borderRadius:8,fontSize:13,color:'#D85A30',marginBottom:12}}>
{error} {error}
</div> </div>
)} )}
{entries.map((e, i) => { {filteredEntries.map((e, i) => {
const isEditing = editId === e.id const isEditing = editId === e.id
return ( return (
<div key={e.id || i} style={{ <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' padding: '12px 0'
}}> }}>
{!isEditing ? ( {!isEditing ? (