refactor: restructure nutrition page with two-level tabs
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>
This commit is contained in:
parent
02ca9772d6
commit
1f1100c289
|
|
@ -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}/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user