feat(recipes): full recipe CRUD with photos, print, version history

List, detail, new, edit pages. Server-side pagination, dietary tags, difficulty. Photo upload to S3-compatible storage. Version history. Multi-select grid with bulk delete/visibility. Print view. Delete confirmation dialog.
2026-07-01 08:10:11 +02:00
parent fa2d797918
commit 84d6cfeb07
45 changed files with 5300 additions and 0 deletions
@@ -0,0 +1,145 @@
+"use client";
+
+import { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+type NutritionData = {
+  perServing: {
+    calories: number;
+    proteinG: number;
+    carbsG: number;
+    fatG: number;
+    fiberG: number;
+    sodiumMg: number;
+  };
+};
+
+interface NutritionPanelProps {
+  recipeId: string;
+  initialData?: NutritionData | null;
+}
+
+export function NutritionPanel({ recipeId, initialData }: NutritionPanelProps) {
+  const [nutrition, setNutrition] = useState<NutritionData | null>(initialData ?? null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleEstimate() {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`/api/v1/recipes/${recipeId}/nutrition`, {
+        method: "POST",
+      });
+      if (!res.ok) {
+        const body = await res.json() as { error?: string };
+        throw new Error(body.error ?? "Failed to estimate nutrition");
+      }
+      const data = await res.json() as { nutrition: NutritionData };
+      setNutrition(data.nutrition);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (!nutrition && !loading) {
+    return (
+      <div className="flex flex-col gap-2">
+        {error && <p className="text-sm text-destructive">{error}</p>}
+        <Button variant="outline" onClick={handleEstimate} disabled={loading}>
+          Estimate nutrition
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base">Nutrition per serving</CardTitle>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleEstimate}
+            disabled={loading}
+            className="text-xs text-muted-foreground"
+          >
+            {loading ? "Estimating…" : "Re-estimate"}
+          </Button>
+        </div>
+        {error && <p className="text-sm text-destructive">{error}</p>}
+      </CardHeader>
+      {nutrition && (
+        <CardContent>
+          <div className="grid grid-cols-3 gap-3 sm:grid-cols-6">
+            <div className="col-span-3 sm:col-span-6 flex items-baseline gap-1">
+              <span className="text-4xl font-bold tabular-nums">
+                {Math.round(nutrition.perServing.calories)}
+              </span>
+              <span className="text-sm text-muted-foreground">kcal</span>
+            </div>
+
+            <MacroCell
+              label="Protein"
+              value={nutrition.perServing.proteinG}
+              unit="g"
+            />
+            <MacroCell
+              label="Carbs"
+              value={nutrition.perServing.carbsG}
+              unit="g"
+            />
+            <MacroCell
+              label="Fat"
+              value={nutrition.perServing.fatG}
+              unit="g"
+            />
+            <MacroCell
+              label="Fiber"
+              value={nutrition.perServing.fiberG}
+              unit="g"
+            />
+            <MacroCell
+              label="Sodium"
+              value={nutrition.perServing.sodiumMg}
+              unit="mg"
+            />
+          </div>
+        </CardContent>
+      )}
+      {loading && !nutrition && (
+        <CardContent>
+          <p className="text-sm text-muted-foreground animate-pulse">
+            Estimating nutrition…
+          </p>
+        </CardContent>
+      )}
+    </Card>
+  );
+}
+
+function MacroCell({
+  label,
+  value,
+  unit,
+}: {
+  label: string;
+  value: number;
+  unit: string;
+}) {
+  return (
+    <div className="flex flex-col gap-0.5 rounded-md bg-muted p-2">
+      <span className="text-xs text-muted-foreground">{label}</span>
+      <span className="font-semibold tabular-nums">
+        {Math.round(value)}
+        <span className="text-xs font-normal text-muted-foreground ml-0.5">
+          {unit}
+        </span>
+      </span>
+    </div>
+  );
+}