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,111 @@
+"use client";
+
+import { useState } from "react";
+import { Plus, Trash2, AlertTriangle } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+type PantryItem = {
+  id: string;
+  rawName: string;
+  quantity: string | null;
+  unit: string | null;
+  expiresAt: string | null;
+};
+
+function daysUntilExpiry(dateStr: string): number {
+  const diff = new Date(dateStr).getTime() - Date.now();
+  return Math.ceil(diff / (1000 * 60 * 60 * 24));
+}
+
+export function PantryManager({ initialItems }: { initialItems: PantryItem[] }) {
+  const [items, setItems] = useState<PantryItem[]>(initialItems);
+  const [name, setName] = useState("");
+  const [quantity, setQuantity] = useState("");
+  const [unit, setUnit] = useState("");
+  const [expiresAt, setExpiresAt] = useState("");
+  const [adding, setAdding] = useState(false);
+
+  async function add() {
+    if (!name.trim()) return;
+    setAdding(true);
+    try {
+      const res = await fetch("/api/v1/pantry", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          rawName: name.trim(),
+          quantity: quantity.trim() || undefined,
+          unit: unit.trim() || undefined,
+          expiresAt: expiresAt ? new Date(expiresAt).toISOString() : undefined,
+        }),
+      });
+      if (!res.ok) { toast.error("Failed to add"); return; }
+      const { id } = await res.json() as { id: string };
+      setItems((prev) => [...prev, { id, rawName: name.trim(), quantity: quantity || null, unit: unit || null, expiresAt: expiresAt ? new Date(expiresAt).toISOString() : null }]);
+      setName(""); setQuantity(""); setUnit(""); setExpiresAt("");
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  async function remove(id: string) {
+    const res = await fetch(`/api/v1/pantry/${id}`, { method: "DELETE" });
+    if (res.ok) setItems((prev) => prev.filter((i) => i.id !== id));
+    else toast.error("Failed to remove");
+  }
+
+  const sorted = [...items].sort((a, b) => {
+    if (a.expiresAt && b.expiresAt) return new Date(a.expiresAt).getTime() - new Date(b.expiresAt).getTime();
+    if (a.expiresAt) return -1;
+    if (b.expiresAt) return 1;
+    return a.rawName.localeCompare(b.rawName);
+  });
+
+  return (
+    <div className="space-y-6 max-w-2xl">
+      {/* Add form */}
+      <div className="flex gap-2 flex-wrap">
+        <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Item name" className="flex-1 min-w-[160px]" onKeyDown={(e) => e.key === "Enter" && add()} />
+        <Input value={quantity} onChange={(e) => setQuantity(e.target.value)} placeholder="Qty" className="w-20" />
+        <Input value={unit} onChange={(e) => setUnit(e.target.value)} placeholder="Unit" className="w-20" />
+        <Input type="date" value={expiresAt} onChange={(e) => setExpiresAt(e.target.value)} className="w-36" />
+        <Button onClick={add} disabled={!name.trim() || adding} size="sm">
+          <Plus className="h-4 w-4" /> Add
+        </Button>
+      </div>
+
+      {/* Item list */}
+      {items.length === 0 ? (
+        <p className="text-muted-foreground text-sm">No pantry items yet.</p>
+      ) : (
+        <div className="rounded-xl border divide-y">
+          {sorted.map((item) => {
+            const days = item.expiresAt ? daysUntilExpiry(item.expiresAt) : null;
+            const expiring = days !== null && days <= 3;
+            const expired = days !== null && days < 0;
+            return (
+              <div key={item.id} className="flex items-center gap-3 px-4 py-3 hover:bg-muted/30">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="font-medium text-sm">{item.rawName}</span>
+                    {item.quantity && <span className="text-xs text-muted-foreground">{item.quantity}{item.unit ? ` ${item.unit}` : ""}</span>}
+                    {expired && <span className="text-xs text-destructive flex items-center gap-1"><AlertTriangle className="h-3 w-3" />Expired</span>}
+                    {expiring && !expired && <span className="text-xs text-orange-500 flex items-center gap-1"><AlertTriangle className="h-3 w-3" />Expires in {days}d</span>}
+                  </div>
+                  {item.expiresAt && !expired && !expiring && (
+                    <p className="text-xs text-muted-foreground">Expires {new Date(item.expiresAt).toLocaleDateString()}</p>
+                  )}
+                </div>
+                <button onClick={() => remove(item.id)} className="text-muted-foreground hover:text-destructive transition-colors">
+                  <Trash2 className="h-4 w-4" />
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}