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,138 @@
+"use client";
+
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { Package } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Progress } from "@/components/ui/progress";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+type ScoredItem = {
+  recipe: {
+    id: string;
+    title: string;
+    description: string | null;
+    photos: Array<{ url: string }>;
+  };
+  matched: number;
+  total: number;
+  pct: number;
+  missing: string[];
+};
+
+type Props = {
+  pantryCount: number;
+  scored: ScoredItem[];
+};
+
+function RecipeRow({ s }: { s: ScoredItem }) {
+  const t = useTranslations("canCook");
+  const cover = s.recipe.photos?.[0];
+  return (
+    <Link
+      href={`/recipes/${s.recipe.id}`}
+      className="flex items-center gap-4 rounded-xl border p-3 hover:bg-accent transition-colors"
+    >
+      {cover ? (
+        <img src={cover.url} alt="" className="h-14 w-14 rounded-lg object-cover shrink-0" />
+      ) : (
+        <div className="h-14 w-14 rounded-lg bg-muted shrink-0" />
+      )}
+      <div className="flex-1 min-w-0 space-y-1">
+        <p className="font-medium truncate">{s.recipe.title}</p>
+        <div className="flex items-center gap-2">
+          <Progress value={s.pct} className="h-1.5 flex-1 max-w-[120px]" />
+          <span className="text-xs text-muted-foreground">
+            {t("ingredientProgress", { matched: s.matched, total: s.total })}
+          </span>
+        </div>
+        {s.missing.length > 0 && (
+          <p className="text-xs text-muted-foreground truncate">
+            {t("missing")}: {s.missing.join(", ")}{s.missing.length < s.total - s.matched ? "…" : ""}
+          </p>
+        )}
+      </div>
+      <Badge variant={s.pct === 100 ? "default" : "secondary"} className="shrink-0">
+        {s.pct}%
+      </Badge>
+    </Link>
+  );
+}
+
+export function CanCookContent({ pantryCount, scored }: Props) {
+  const t = useTranslations("canCook");
+
+  if (pantryCount === 0) {
+    return (
+      <div className="space-y-6 max-w-2xl">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">{t("title")}</h1>
+          <p className="text-muted-foreground mt-1">{t("subtitle")}</p>
+        </div>
+        <div className="flex flex-col items-center justify-center h-64 border-2 border-dashed rounded-xl gap-4">
+          <Package className="h-8 w-8 text-muted-foreground" />
+          <p className="text-muted-foreground text-sm">{t("emptyPantry")}</p>
+          <Link href="/pantry" className={cn(buttonVariants({ size: "sm" }))}>
+            {t("addPantryItems")}
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  const canCook = scored.filter((s) => s.pct === 100);
+  const almostCook = scored.filter((s) => s.pct >= 70 && s.pct < 100);
+  const rest = scored.filter((s) => s.pct < 70 && s.pct > 0);
+
+  return (
+    <div className="space-y-8 max-w-2xl">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">{t("title")}</h1>
+        <p className="text-muted-foreground mt-1">{t("subtitle", { count: pantryCount })}</p>
+      </div>
+
+      {canCook.length > 0 && (
+        <section className="space-y-3">
+          <h2 className="text-lg font-semibold flex items-center gap-2">
+            {t("readyToCook")}
+            <Badge>{canCook.length}</Badge>
+          </h2>
+          <div className="space-y-2">
+            {canCook.map((s) => <RecipeRow key={s.recipe.id} s={s} />)}
+          </div>
+        </section>
+      )}
+
+      {almostCook.length > 0 && (
+        <section className="space-y-3">
+          <h2 className="text-lg font-semibold flex items-center gap-2">
+            {t("almostThere")} <span className="text-sm font-normal text-muted-foreground">(70–99%)</span>
+            <Badge variant="secondary">{almostCook.length}</Badge>
+          </h2>
+          <div className="space-y-2">
+            {almostCook.map((s) => <RecipeRow key={s.recipe.id} s={s} />)}
+          </div>
+        </section>
+      )}
+
+      {canCook.length === 0 && almostCook.length === 0 && (
+        <div className="flex flex-col items-center justify-center h-48 border-2 border-dashed rounded-xl gap-3">
+          <p className="text-muted-foreground text-sm">{t("noMatches")}</p>
+          <Link href="/pantry" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
+            {t("addPantryItems")}
+          </Link>
+        </div>
+      )}
+
+      {rest.length > 0 && (
+        <section className="space-y-3">
+          <h2 className="text-sm font-medium text-muted-foreground">{t("partialMatches")}</h2>
+          <div className="space-y-2">
+            {rest.slice(0, 5).map((s) => <RecipeRow key={s.recipe.id} s={s} />)}
+          </div>
+        </section>
+      )}
+    </div>
+  );
+}