diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index f90339d..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,184 +0,0 @@
-.counter {
- font-size: 16px;
- padding: 5px 10px;
- border-radius: 5px;
- color: var(--accent);
- background: var(--accent-bg);
- border: 2px solid transparent;
- transition: border-color 0.3s;
- margin-bottom: 24px;
-
- &:hover {
- border-color: var(--accent-border);
- }
- &:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
- }
-}
-
-.hero {
- position: relative;
-
- .base,
- .framework,
- .vite {
- inset-inline: 0;
- margin: 0 auto;
- }
-
- .base {
- width: 170px;
- position: relative;
- z-index: 0;
- }
-
- .framework,
- .vite {
- position: absolute;
- }
-
- .framework {
- z-index: 1;
- top: 34px;
- height: 28px;
- transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
- scale(1.4);
- }
-
- .vite {
- z-index: 0;
- top: 107px;
- height: 26px;
- width: auto;
- transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
- scale(0.8);
- }
-}
-
-#center {
- display: flex;
- flex-direction: column;
- gap: 25px;
- place-content: center;
- place-items: center;
- flex-grow: 1;
-
- @media (max-width: 1024px) {
- padding: 32px 20px 24px;
- gap: 18px;
- }
-}
-
-#next-steps {
- display: flex;
- border-top: 1px solid var(--border);
- text-align: left;
-
- & > div {
- flex: 1 1 0;
- padding: 32px;
- @media (max-width: 1024px) {
- padding: 24px 20px;
- }
- }
-
- .icon {
- margin-bottom: 16px;
- width: 22px;
- height: 22px;
- }
-
- @media (max-width: 1024px) {
- flex-direction: column;
- text-align: center;
- }
-}
-
-#docs {
- border-right: 1px solid var(--border);
-
- @media (max-width: 1024px) {
- border-right: none;
- border-bottom: 1px solid var(--border);
- }
-}
-
-#next-steps ul {
- list-style: none;
- padding: 0;
- display: flex;
- gap: 8px;
- margin: 32px 0 0;
-
- .logo {
- height: 18px;
- }
-
- a {
- color: var(--text-h);
- font-size: 16px;
- border-radius: 6px;
- background: var(--social-bg);
- display: flex;
- padding: 6px 12px;
- align-items: center;
- gap: 8px;
- text-decoration: none;
- transition: box-shadow 0.3s;
-
- &:hover {
- box-shadow: var(--shadow);
- }
- .button-icon {
- height: 18px;
- width: 18px;
- }
- }
-
- @media (max-width: 1024px) {
- margin-top: 20px;
- flex-wrap: wrap;
- justify-content: center;
-
- li {
- flex: 1 1 calc(50% - 8px);
- }
-
- a {
- width: 100%;
- justify-content: center;
- box-sizing: border-box;
- }
- }
-}
-
-#spacer {
- height: 88px;
- border-top: 1px solid var(--border);
- @media (max-width: 1024px) {
- height: 48px;
- }
-}
-
-.ticks {
- position: relative;
- width: 100%;
-
- &::before,
- &::after {
- content: '';
- position: absolute;
- top: -4.5px;
- border: 5px solid transparent;
- }
-
- &::before {
- left: 0;
- border-left-color: var(--border);
- }
- &::after {
- right: 0;
- border-right-color: var(--border);
- }
-}
diff --git a/src/App.jsx b/src/App.jsx
index 9d94387..d842a6f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,228 +1,35 @@
import { useState, useEffect, useCallback } from 'react'
+import { Dashboard } from './tabs/Dashboard.jsx'
+import { MealPlanner } from './tabs/MealPlanner.jsx'
+import { Projections } from './tabs/Projections.jsx'
+import { Recipes } from './tabs/Recipes.jsx'
-const API = 'http://localhost:4003'
-
-// Meal rotation: Mon=0, Sun=6
-const MEALS = [
- { day: 'Monday', meal: 'Thai Red Curry', icon: '🍛', desc: 'Chicken breast (160g) + Thai Red sauce + boil-in-bag rice + broccoli', protein: 45, cals: 520 },
- { day: 'Tuesday', meal: 'Rice Bowl', icon: '🍚', desc: 'Chicken breast (150g) + rice + broccoli + Nando\'s peri-peri', protein: 42, cals: 480 },
- { day: 'Wednesday', meal: 'Chow Mein', icon: '🍜', desc: 'Chicken breast (200g) + noodles + chow mein sauce + red pepper + sesame oil', protein: 50, cals: 530 },
- { day: 'Thursday', meal: 'Sweet & Sour', icon: '🍗', desc: 'Chicken breast (160g) + Ben\'s S&S sauce + boil-in-bag rice + broccoli', protein: 43, cals: 490 },
- { day: 'Friday', meal: 'Curry (Takeaway)', icon: '🥘', desc: 'Half butter chicken + half pilau rice', protein: 30, cals: 650 },
- { day: 'Saturday', meal: 'Curry (Takeaway)', icon: '🥘', desc: 'Half butter chicken + half pilau rice (+ half naan on run days)', protein: 30, cals: 650 },
- { day: 'Sunday', meal: 'Meatballs', icon: '🍝', desc: 'SuperValu meatballs + spaghetti (60g) + pizza sauce + cheddar + broccoli', protein: 38, cals: 510 },
+const TABS = [
+ { id: 'dash', label: '📊', name: 'Today' },
+ { id: 'meals', label: '🍽️', name: 'Meals' },
+ { id: 'project', label: '📈', name: 'Goals' },
+ { id: 'recipes', label: '📖', name: 'Recipes' },
]
-const DAILY_CONSTANTS = { breakfast: { cals: 348, protein: 10, fat: 12, fibre: 9 }, shakes: { cals: 330, protein: 81, fat: 0, fibre: 0 } }
-const TARGETS = { cals: [1800, 2000], protein: [140, 160], fat: [55, 70], fibre: [28, 35], sodium: 2300 }
-
-function useFetch(url) {
- const [data, setData] = useState(null)
- const [loading, setLoading] = useState(true)
- const refresh = useCallback(() => {
- setLoading(true)
- fetch(url).then(r => r.json()).then(d => { setData(d); setLoading(false) }).catch(() => setLoading(false))
- }, [url])
- useEffect(() => { refresh() }, [refresh])
- return { data, loading, refresh }
-}
-
-function MetricCard({ label, value, unit, target, icon, color }) {
- const pct = target ? Math.min((value / target) * 100, 100) : null
- const over = target && value > target
- return (
-
-
{icon}{label}
-
{value}{unit}
- {pct !== null && (
-
- )}
- {target &&
{over ? '⚠️ ' : ''}{value} / {target}{unit}
}
-
-
{meal.icon}Tonight's Dinner
{meal.day}'s rotation
-
{meal.meal}
-
{meal.desc}
-
~{meal.cals} cal{meal.protein}g protein
-
-
📊 Today's Budget
-
-
Breakfast (porridge+chia){DAILY_CONSTANTS.breakfast.cals} cal
-
3× NXR Shakes{DAILY_CONSTANTS.shakes.cals} cal
-
Dinner ({dinnerMeal.meal})~{dinnerMeal.cals} cal
-
Snack allowance~{snackBudget} cal
-
Day total (planned)~{alreadyPlanned + snackBudget} cal
-
- {eaten > 0 &&
Logged so far: {eaten} cal • {remaining} remaining
}
-
-
-
-
-
- 🏠 Home Hub
- {new Date().toLocaleDateString('en-IE', { weekday: 'long', day: 'numeric', month: 'long' })} • Day {daysIn}
-
-
-
-
-
-
-
Weight Journey
{latestWeight}kg • {pct}% to goal • {(current - paulTarget).toFixed(1)}kg remaining
-
{latestBf}% BF
-
-
-
-
-
-
-
-
-
-
-
-
{done}/{items.length} complete
- {items.map(it => (
-
- ))}
+
+ {tab === 'dash' &&
}
+ {tab === 'meals' &&
}
+ {tab === 'project' &&
}
+ {tab === 'recipes' &&
}
+
+
+
+
+ {Math.round(pct)}%
+
+
{value}{unit}
+
{label}
+
/ {target}{unit}
+
Loading...
+
+ const sum = (arr) => (arr || []).reduce((a, d) => a + (d.value || 0), 0)
+ const latest = (obj) => obj?.data?.[0]?.value
+
+ const steps = Math.round(sum(data?.steps?.data))
+ const calsKj = sum(data?.energy?.data)
+ const cals = Math.round(calsKj / 4.184)
+ const protein = Math.round(sum(data?.prot?.data))
+ const fat = Math.round(sum(data?.fat?.data))
+ const fibre = Math.round(sum(data?.fib?.data))
+ const sodium = Math.round(sum(data?.sod?.data))
+ const activeKj = sum(data?.active?.data)
+ const activeCals = Math.round(activeKj / 4.184)
+ const weight = latest(data?.wt)?.toFixed(1) || '—'
+ const bf = latest(data?.bf)?.toFixed(1) || '—'
+ const hr = latest(data?.hr) || '—'
+ const netCals = cals - activeCals
+
+ const daysIn = Math.floor((Date.now() - new Date('2026-04-27')) / 86400000)
+ const lost = (114.9 - parseFloat(weight || 114.9)).toFixed(1)
+
+ return (
+
+
+
+
+
{weight}kgWeight
+
{bf}%Body Fat
+
{lost}kgLost
+
{hr}bpmRHR
+
+
+
+
+
+
+
+
+
+
+
👣{steps.toLocaleString()} / {TARGETS.steps.toLocaleString()}
+
🔥{activeCals} burned
+
📉Net: {netCals} cal
+
🧂{sodium} / {TARGETS.sodium}mg
+
+
+
+
+
Daily Checklist
{done}/{items.length}
+ {items.map(it => (
+
+ ))}
+
+
+
🛒 Shopping List
+
+
+
Based on this week's plan
+
+ {Object.entries(ingredientCounts).sort().map(([item, count]) => (
+
+ {item}
+ {count > 1 && ×{count}}
+
+ ))}
+
+
+
Weekly Constants
+
Flahavan's oats
+
Chia seeds
+
Sunflower seeds
+
Honey
+
NXR Beef Protein (21 scoops)
+
Psyllium husk
+
Creatine
+
+
+
+
🍽️ Meal Planner
+
+
+
+
+ Week totals (dinners): {weekMacros.cals} cal • {weekMacros.protein}g protein • {weekMacros.fat}g fat
+
+
+
+ {DAYS.map((day, i) => {
+ const meal = getMeal(week[i])
+ const isToday = i === todayIdx
+ return (
+
setSelected(selected === i ? null : i)}>
+
{day}{isToday && ' ⭐'}
+
{meal?.icon}
+
{meal?.name}
+
{meal?.cals} cal • {meal?.protein}g P
+
+ )
+ })}
+
+
+ {selected !== null && (
+
+
Swap {DAYS[selected]}'s meal:
+
+ {ROTATION.map(m => (
+
+ ))}
+
+
+ )}
+
+
+
+
📈 Goal Projections
+
Model your path to goal weight
+
+
+
+
+
+ setRate(+e.target.value)} />
+ {rate} kg/wk
+
+
+ {rate < 0.5 ? '🐢 Conservative' : rate < 0.9 ? '👍 Sustainable' : rate < 1.2 ? '🔥 Aggressive' : '⚠️ Very aggressive'}
+ {' • '}Actual rate: {actualRate.toFixed(2)} kg/wk
+
+
+
+
+
+ setCustomTarget(+e.target.value)} />
+ {customTarget} kg
+
+
+
+
+
+
{remaining.toFixed(1)}kgto go
+
{weeksLeft}weeks
+
{goalDate.toLocaleDateString('en-IE', { month: 'short', year: 'numeric' })}ETA
+
{pct}%complete
+
+
+
+
+
+
+
+
📍 Milestone Estimates
+ {milestones.map(m => (
+
+ {m.reached ? '✅' : '⏳'}
+ {m.label}
+
+ {m.reached ? 'Done!' : m.date ? `${m.date.toLocaleDateString('en-IE', { day: 'numeric', month: 'short' })} (~${m.weeks} wks)` : '—'}
+
+
+ ))}
+
+
+
+
⚡ Quick Scenarios
+
+ {[{ label: 'Conservative (0.5)', r: 0.5 }, { label: 'Current pace', r: +actualRate.toFixed(1) }, { label: 'Aggressive (1.0)', r: 1.0 }].map(s => (
+
+ ))}
+
+
+
+
📖 Recipe Book
+
+ {categories.map(c => (
+
+ ))}
+
+
+
+ {filtered.map(r => (
+
+
setExpanded(expanded === r.id ? null : r.id)}>
+
{r.icon}
+
+
{r.name}
+
{r.macros.cals} cal • {r.macros.protein}g protein • {r.time}
+
+
{expanded === r.id ? '▼' : '▶'}
+
+ {expanded === r.id && (
+
+
+ 🔥 {r.macros.cals} cal
+ 🥩 {r.macros.protein}g protein
+ 🧈 {r.macros.fat}g fat
+ 🌾 {r.macros.carbs}g carbs
+ 🌿 {r.macros.fibre}g fibre
+
+
Ingredients
+
+ {r.ingredients.map((ing, i) => - {ing}
)}
+
+
Method
+
+ {r.method.map((step, i) => - {step}
)}
+
+ {r.servings > 1 &&
Makes {r.servings} servings (macros shown per serving)
}
+
+ )}
+
+ ))}
+
+