From 1f1100c289aa5f2181b7f6bdb5e42aa649b74c00 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Sat, 21 Mar 2026 08:43:55 +0100
Subject: [PATCH] refactor: restructure nutrition page with two-level tabs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Layout changes:
- Input tabs at top: ✏️ Einzelerfassung (default) | 📥 Import
- Single entry form shown by default (was hidden in data tab)
- Import panel + history only visible in Import tab
- Analysis section below (unchanged): OverviewCards + Analysis tabs

Benefits:
- Cleaner separation of input methods vs analysis
- Manual entry more discoverable (was buried in data tab)
- Import history only shown when relevant
- Reduces clutter on initial view

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

diff --git a/frontend/src/pages/NutritionPage.jsx b/frontend/src/pages/NutritionPage.jsx
index fa0ef30..ba48643 100644
--- a/frontend/src/pages/NutritionPage.jsx
+++ b/frontend/src/pages/NutritionPage.jsx
@@ -735,10 +735,11 @@ function CalorieBalance({ data, profile }) {
 
 // ── Main Page ─────────────────────────────────────────────────────────────────
 export default function NutritionPage() {
-  const [tab,        setTab]    = useState('data')  // BUG-002 fix: show data first
+  const [inputTab,   setInputTab] = useState('entry')  // 'entry' or 'import'
+  const [analysisTab,setAnalysisTab] = useState('data')
   const [corrData,   setCorr]   = useState([])
   const [weekly,     setWeekly] = useState([])
-  const [entries,    setEntries]= useState([])  // BUG-002 fix: raw data
+  const [entries,    setEntries]= useState([])
   const [profile,    setProf]   = useState(null)
   const [loading,    setLoad]   = useState(true)
   const [hasData,    setHasData]= useState(false)
@@ -767,38 +768,52 @@ export default function NutritionPage() {
     <div>
       <h1 className="page-title">Ernährung</h1>
 
-      <ImportPanel onImported={load}/>
-      <ImportHistory/>
+      {/* Input Method Tabs */}
+      <div className="tabs section-gap" style={{marginBottom:0}}>
+        <button className={'tab'+(inputTab==='entry'?' active':'')} onClick={()=>setInputTab('entry')}>
+          ✏️ Einzelerfassung
+        </button>
+        <button className={'tab'+(inputTab==='import'?' active':'')} onClick={()=>setInputTab('import')}>
+          📥 Import
+        </button>
+      </div>
+
+      {/* Entry Form */}
+      {inputTab==='entry' && <EntryForm onSaved={load}/>}
+
+      {/* Import Panel + History */}
+      {inputTab==='import' && (
+        <>
+          <ImportPanel onImported={load}/>
+          <ImportHistory/>
+        </>
+      )}
 
       {loading && <div className="empty-state"><div className="spinner"/></div>}
 
       {!loading && !hasData && (
         <div className="empty-state">
           <h3>Noch keine Ernährungsdaten</h3>
-          <p>Importiere deinen FDDB-Export oben um Auswertungen zu sehen.</p>
+          <p>Erfasse Daten über Einzelerfassung oder importiere deinen FDDB-Export.</p>
         </div>
       )}
 
+      {/* Analysis Section */}
       {!loading && hasData && (
         <>
           <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>
+            <button className={'tab'+(analysisTab==='data'?' active':'')}     onClick={()=>setAnalysisTab('data')}>Daten</button>
+            <button className={'tab'+(analysisTab==='overview'?' active':'')} onClick={()=>setAnalysisTab('overview')}>Übersicht</button>
+            <button className={'tab'+(analysisTab==='weight'?' active':'')}   onClick={()=>setAnalysisTab('weight')}>Kcal vs. Gewicht</button>
+            <button className={'tab'+(analysisTab==='protein'?' active':'')}  onClick={()=>setAnalysisTab('protein')}>Protein vs. Mager</button>
+            <button className={'tab'+(analysisTab==='balance'?' active':'')}  onClick={()=>setAnalysisTab('balance')}>Bilanz</button>
           </div>
 
-          {tab==='data' && (
-            <>
-              <EntryForm onSaved={load}/>
-              <DataTab entries={entries} onUpdate={load}/>
-            </>
-          )}
+          {analysisTab==='data' && <DataTab entries={entries} onUpdate={load}/>}
 
-          {tab==='overview' && (
+          {analysisTab==='overview' && (
             <div className="card section-gap">
               <div className="card-title">Makro-Verteilung pro Woche (Ø g/Tag)</div>
               <WeeklyMacros weekly={weekly}/>
@@ -810,7 +825,7 @@ export default function NutritionPage() {
             </div>
           )}
 
-          {tab==='weight' && (
+          {analysisTab==='weight' && (
             <div className="card section-gap">
               <div className="card-title">Kalorien vs. Gewichtsverlauf</div>
               <div style={{fontSize:11,color:'var(--text3)',marginBottom:8}}>
@@ -826,7 +841,7 @@ export default function NutritionPage() {
             </div>
           )}
 
-          {tab==='protein' && (
+          {analysisTab==='protein' && (
             <div className="card section-gap">
               <div className="card-title">Protein vs. Magermasse</div>
               <div style={{fontSize:11,color:'var(--text3)',marginBottom:8}}>
@@ -842,7 +857,7 @@ export default function NutritionPage() {
             </div>
           )}
 
-          {tab==='balance' && (
+          {analysisTab==='balance' && (
             <div className="card section-gap">
               <div className="card-title">Kaloriendefizit / -überschuss</div>
               <CalorieBalance data={corrData} profile={profile}/>