feat(meal-plan): weekly planner, pantry, shopping lists, nutrition tracking

AI-generated weekly meal plans with pantry-awareness. Manual entry per slot. Pantry inventory management. Auto-generated shopping lists from meal plan. Weekly nutrition bar chart vs daily goals. Nutrition goals settings.
2026-07-01 08:10:39 +02:00
parent 9d02a69250
commit 3636ab27ae
23 changed files with 1791 additions and 0 deletions
@@ -0,0 +1,118 @@
+"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;
+  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 { totals, goals, coverage } = data;
+
+  const bars: BarItem[] = [
+    {
+      label: "Calories",
+      value: totals.calories,
+      goal: goals.caloriesKcal,
+      unit: "kcal",
+      percentage: coverage.calories,
+      colorClass: "bg-orange-500",
+    },
+    {
+      label: "Protein",
+      value: totals.protein,
+      goal: goals.proteinG,
+      unit: "g",
+      percentage: coverage.protein,
+      colorClass: "bg-blue-500",
+    },
+    {
+      label: "Carbs",
+      value: totals.carbs,
+      goal: goals.carbsG,
+      unit: "g",
+      percentage: coverage.carbs,
+      colorClass: "bg-green-500",
+    },
+    {
+      label: "Fat",
+      value: totals.fat,
+      goal: goals.fatG,
+      unit: "g",
+      percentage: coverage.fat,
+      colorClass: "bg-yellow-500",
+    },
+  ];
+
+  return (
+    <div className="space-y-3">
+      {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>
+        );
+      })}
+    </div>
+  );
+}