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,63 @@
+"use client";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import { ShoppingCart } from "lucide-react";
+import { NewShoppingListButton } from "@/components/meal-plan/new-shopping-list-button";
+
+type ShoppingListItem = {
+  id: string;
+  name: string;
+  generatedAt: string | null;
+  totalItems: number;
+  checkedItems: number;
+};
+
+type Props = {
+  lists: ShoppingListItem[];
+};
+
+export function ShoppingListsPageContent({ lists }: Props) {
+  const t = useTranslations("shoppingLists");
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">{t("title")}</h1>
+          <p className="text-muted-foreground mt-1">{t("subtitle")}</p>
+        </div>
+        <NewShoppingListButton />
+      </div>
+
+      {lists.length === 0 ? (
+        <div className="flex flex-col items-center justify-center h-64 border-2 border-dashed rounded-xl gap-4">
+          <ShoppingCart className="h-12 w-12 text-muted-foreground/40" />
+          <p className="text-muted-foreground text-sm">{t("empty")}</p>
+        </div>
+      ) : (
+        <div className="space-y-3 max-w-lg">
+          {lists.map((list) => (
+            <Link
+              key={list.id}
+              href={`/shopping-lists/${list.id}`}
+              className="flex items-center justify-between rounded-xl border p-4 hover:shadow-sm transition-shadow"
+            >
+              <div className="space-y-1">
+                <h2 className="font-semibold">{list.name}</h2>
+                <p className="text-sm text-muted-foreground">
+                  {list.totalItems === 0
+                    ? t("listEmpty")
+                    : t("items", { checked: list.checkedItems, total: list.totalItems })}
+                  {list.generatedAt && ` · ${t("generated")}`}
+                </p>
+              </div>
+              <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center text-xs font-bold">
+                {list.totalItems === 0 ? "—" : `${Math.round((list.checkedItems / list.totalItems) * 100)}%`}
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}