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,119 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+import { Check, Package, Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+
+type Item = {
+  id: string;
+  rawName: string;
+  quantity: string | null;
+  unit: string | null;
+  aisle: string | null;
+  checked: boolean;
+};
+
+export function ShoppingListView({
+  listId,
+  initialItems,
+}: {
+  listId: string;
+  initialItems: Item[];
+}) {
+  const [items, setItems] = useState<Item[]>(initialItems);
+  const [movingToPantry, setMovingToPantry] = useState(false);
+
+  const checkedItems = items.filter((i) => i.checked);
+
+  async function moveToPantry() {
+    if (checkedItems.length === 0) return;
+    setMovingToPantry(true);
+    try {
+      const res = await fetch("/api/v1/pantry/bulk", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          items: checkedItems.map((i) => ({
+            rawName: i.rawName,
+            quantity: i.quantity ?? undefined,
+            unit: i.unit ?? undefined,
+          })),
+        }),
+      });
+      if (!res.ok) { toast.error("Failed to move items to pantry"); return; }
+      toast.success(`${checkedItems.length} item${checkedItems.length !== 1 ? "s" : ""} added to pantry`);
+    } finally {
+      setMovingToPantry(false);
+    }
+  }
+
+  async function toggleItem(item: Item) {
+    const next = !item.checked;
+    setItems((prev) => prev.map((i) => i.id === item.id ? { ...i, checked: next } : i));
+    await fetch(`/api/v1/shopping-lists/${listId}/items/${item.id}`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ checked: next }),
+    });
+  }
+
+  const grouped = items.reduce<Record<string, Item[]>>((acc, item) => {
+    const key = item.aisle ?? "Other";
+    (acc[key] ??= []).push(item);
+    return acc;
+  }, {});
+
+  const checkedCount = items.filter((i) => i.checked).length;
+
+  if (items.length === 0) {
+    return <p className="text-muted-foreground text-sm">This list is empty.</p>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-muted-foreground">{checkedCount}/{items.length} checked</p>
+        {checkedCount > 0 && (
+          <Button size="sm" variant="outline" onClick={moveToPantry} disabled={movingToPantry}>
+            {movingToPantry ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Package className="h-3.5 w-3.5" />}
+            Move {checkedCount} to pantry
+          </Button>
+        )}
+      </div>
+
+      {Object.entries(grouped).sort(([a], [b]) => a.localeCompare(b)).map(([aisle, aisleItems]) => (
+        <div key={aisle} className="space-y-2">
+          {Object.keys(grouped).length > 1 && (
+            <h2 className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">{aisle}</h2>
+          )}
+          <div className="rounded-xl border divide-y">
+            {aisleItems.map((item) => (
+              <button
+                key={item.id}
+                onClick={() => toggleItem(item)}
+                className="w-full flex items-center gap-3 px-4 py-3 hover:bg-muted/30 text-left transition-colors"
+              >
+                <div className={cn(
+                  "h-5 w-5 rounded border-2 flex items-center justify-center shrink-0 transition-colors",
+                  item.checked ? "bg-primary border-primary" : "border-input"
+                )}>
+                  {item.checked && <Check className="h-3 w-3 text-primary-foreground" />}
+                </div>
+                <span className={cn("flex-1 text-sm", item.checked && "line-through text-muted-foreground")}>
+                  {item.rawName}
+                </span>
+                {(item.quantity || item.unit) && (
+                  <span className={cn("text-xs text-muted-foreground tabular-nums shrink-0", item.checked && "opacity-50")}>
+                    {item.quantity}{item.unit ? ` ${item.unit}` : ""}
+                  </span>
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}