Arnaud
9566e19cd0
userNutritionGoals are daily targets (the nutrition diary already compares a single day's totals against them directly) — but the weekly meal-plan route summed an entire week's entries and compared that raw total straight against the same daily number, so coverage read roughly 7x too high. Now computes a daily average (across days that actually have planned meals) and compares that against the goal instead, adds a per-day breakdown (byDay) for a future day-view, and tracks unknownCount for entries whose recipe has no nutrition data yet, matching the diary route. Also fixed a real bug this surfaced: meal-plan/page.tsx and print/meal-plan parsed the ?week= date via new Date(dateStr) (UTC midnight) then read .getDay() (local time) — in positive-UTC-offset timezones this resolves to the wrong Monday, and the reverse (Date -> string via toISOString()) has the same mismatch in the other direction. Both now do local y/m/d math throughout. Verified locally: correct daily-average math end to end (recipe entry + batch-dish entry, which already attributed nutrition correctly via its required parent recipeId — no separate fix needed there), and confirmed the meal-plan page now resolves the right week and renders real coverage bars against actual planned entries.
127 lines
3.1 KiB
TypeScript
127 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
type NutritionTotals = {
|
|
calories: number;
|
|
protein: number;
|
|
carbs: number;
|
|
fat: number;
|
|
};
|
|
|
|
type NutritionGoals = {
|
|
caloriesKcal: number | null;
|
|
proteinG: number | null;
|
|
carbsG: number | null;
|
|
fatG: number | null;
|
|
} | null;
|
|
|
|
type NutritionCoverage = {
|
|
calories: number;
|
|
protein: number;
|
|
carbs: number;
|
|
fat: number;
|
|
};
|
|
|
|
type NutritionResponse = {
|
|
totals: NutritionTotals;
|
|
dailyAverage: NutritionTotals;
|
|
unknownCount: number;
|
|
goals: NutritionGoals;
|
|
coverage: NutritionCoverage;
|
|
};
|
|
|
|
interface WeeklyNutritionBarProps {
|
|
weekStart: string;
|
|
}
|
|
|
|
type BarItem = {
|
|
label: string;
|
|
value: number;
|
|
goal: number | null;
|
|
unit: string;
|
|
percentage: number;
|
|
colorClass: string;
|
|
};
|
|
|
|
export function WeeklyNutritionBar({ weekStart }: WeeklyNutritionBarProps) {
|
|
const [data, setData] = useState<NutritionResponse | null>(null);
|
|
|
|
useEffect(() => {
|
|
fetch(`/api/v1/meal-plans/${weekStart}/nutrition`)
|
|
.then((res) => (res.ok ? res.json() : null))
|
|
.then((json) => setData(json))
|
|
.catch(() => setData(null));
|
|
}, [weekStart]);
|
|
|
|
if (!data || !data.goals) return null;
|
|
|
|
const { dailyAverage, goals, coverage, unknownCount } = data;
|
|
|
|
const bars: BarItem[] = [
|
|
{
|
|
label: "Calories",
|
|
value: dailyAverage.calories,
|
|
goal: goals.caloriesKcal,
|
|
unit: "kcal",
|
|
percentage: coverage.calories,
|
|
colorClass: "bg-orange-500",
|
|
},
|
|
{
|
|
label: "Protein",
|
|
value: dailyAverage.protein,
|
|
goal: goals.proteinG,
|
|
unit: "g",
|
|
percentage: coverage.protein,
|
|
colorClass: "bg-blue-500",
|
|
},
|
|
{
|
|
label: "Carbs",
|
|
value: dailyAverage.carbs,
|
|
goal: goals.carbsG,
|
|
unit: "g",
|
|
percentage: coverage.carbs,
|
|
colorClass: "bg-green-500",
|
|
},
|
|
{
|
|
label: "Fat",
|
|
value: dailyAverage.fat,
|
|
goal: goals.fatG,
|
|
unit: "g",
|
|
percentage: coverage.fat,
|
|
colorClass: "bg-yellow-500",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
<p className="text-xs text-muted-foreground">Daily average vs. your goals</p>
|
|
{bars.map((bar) => {
|
|
if (bar.goal == null) return null;
|
|
const width = Math.min(bar.percentage, 100);
|
|
return (
|
|
<div key={bar.label} className="space-y-1">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="font-medium">{bar.label}</span>
|
|
<span className="text-muted-foreground">
|
|
{bar.value} / {bar.goal} {bar.unit}
|
|
</span>
|
|
</div>
|
|
<div className="h-2 w-full rounded bg-muted overflow-hidden">
|
|
<div
|
|
className={`h-full rounded ${bar.colorClass}`}
|
|
style={{ width: `${width}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
{unknownCount > 0 && (
|
|
<p className="text-xs text-muted-foreground">
|
|
{unknownCount} planned {unknownCount === 1 ? "meal" : "meals"} missing nutrition data — estimate it from the recipe page for a more accurate picture.
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|