fix: [BUG-002] add missing Daten tab to show nutrition entries
All checks were successful
Deploy Development / deploy (push) Successful in 34s
Build Test / lint-backend (push) Successful in 0s
Build Test / build-frontend (push) Successful in 13s

Problem: Imported nutrition data not visible in UI
Root Cause: NutritionPage only had analysis tabs, no raw data view
Solution: Added "Daten" tab with entries list showing date, kcal, macros
Tested: Entries now visible after CSV import

Closes: BUG-002

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lars 2026-03-21 08:06:01 +01:00
parent 4d9c59ccf7
commit d833a60ad4

View File

@ -322,9 +322,10 @@ function CalorieBalance({ data, profile }) {
// Main Page
export default function NutritionPage() {
const [tab, setTab] = useState('overview')
const [tab, setTab] = useState('data') // BUG-002 fix: show data first
const [corrData, setCorr] = useState([])
const [weekly, setWeekly] = useState([])
const [entries, setEntries]= useState([]) // BUG-002 fix: raw data
const [profile, setProf] = useState(null)
const [loading, setLoad] = useState(true)
const [hasData, setHasData]= useState(false)
@ -332,13 +333,15 @@ export default function NutritionPage() {
const load = async () => {
setLoad(true)
try {
const [corr, wkly, prof] = await Promise.all([
const [corr, wkly, ent, prof] = await Promise.all([
nutritionApi.nutritionCorrelations(),
nutritionApi.nutritionWeekly(16),
nutritionApi.listNutrition(365), // BUG-002 fix: load raw entries
api.getActiveProfile(),
])
setCorr(Array.isArray(corr)?corr:[])
setWeekly(Array.isArray(wkly)?wkly:[])
setEntries(Array.isArray(ent)?ent:[]) // BUG-002 fix
setProf(prof)
setHasData(Array.isArray(corr) && corr.some(d=>d.kcal))
} catch(e) { console.error('load error:', e) }
@ -367,12 +370,45 @@ export default function NutritionPage() {
<OverviewCards data={corrData}/>
<div className="tabs section-gap" style={{overflowX:'auto',flexWrap:'nowrap'}}>
<button className={'tab'+(tab==='data'?' active':'')} onClick={()=>setTab('data')}>Daten</button>
<button className={'tab'+(tab==='overview'?' active':'')} onClick={()=>setTab('overview')}>Übersicht</button>
<button className={'tab'+(tab==='weight'?' active':'')} onClick={()=>setTab('weight')}>Kcal vs. Gewicht</button>
<button className={'tab'+(tab==='protein'?' active':'')} onClick={()=>setTab('protein')}>Protein vs. Mager</button>
<button className={'tab'+(tab==='balance'?' active':'')} onClick={()=>setTab('balance')}>Bilanz</button>
</div>
{tab==='data' && (
<div className="card section-gap">
<div className="card-title">Alle Einträge ({entries.length})</div>
{entries.length === 0 && (
<p className="muted">Noch keine Ernährungsdaten. Importiere FDDB CSV oben.</p>
)}
{entries.map((e, i) => (
<div key={e.id || i} style={{
borderBottom: i < entries.length - 1 ? '1px solid var(--border)' : 'none',
padding: '10px 0'
}}>
<div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:4}}>
<strong style={{fontSize:14}}>{dayjs(e.date).format('dd, DD. MMMM YYYY')}</strong>
<div style={{fontSize:13, fontWeight:600, color:'#EF9F27'}}>
{Math.round(e.kcal || 0)} kcal
</div>
</div>
<div style={{display:'flex', gap:12, fontSize:12, color:'var(--text2)'}}>
<span>🥩 Protein: <strong>{Math.round(e.protein_g || 0)}g</strong></span>
<span>🫙 Fett: <strong>{Math.round(e.fat_g || 0)}g</strong></span>
<span>🍞 Kohlenhydrate: <strong>{Math.round(e.carbs_g || 0)}g</strong></span>
</div>
{e.source && (
<div style={{fontSize:10, color:'var(--text3)', marginTop:2}}>
Quelle: {e.source}
</div>
)}
</div>
))}
</div>
)}
{tab==='overview' && (
<div className="card section-gap">
<div className="card-title">Makro-Verteilung pro Woche (Ø g/Tag)</div>