From d833a60ad4398de65f395e832e18523e8512825b Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Sat, 21 Mar 2026 08:06:01 +0100
Subject: [PATCH] fix: [BUG-002] add missing Daten tab to show nutrition
 entries

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>
---
 frontend/src/pages/NutritionPage.jsx | 40 ++++++++++++++++++++++++++--
 1 file changed, 38 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/NutritionPage.jsx b/frontend/src/pages/NutritionPage.jsx
index 04281c8..c2531fa 100644
--- a/frontend/src/pages/NutritionPage.jsx
+++ b/frontend/src/pages/NutritionPage.jsx
@@ -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>