feat: Wabenhain Honig-Shop Anwendung

Vollstaendige Next.js/Prisma-E-Commerce-Anwendung fuer eine Imkerei: Shop, Warenkorb, Stripe-Checkout, Kundenkonto mit 2FA, Admin-Bereich (Produkte, Ernten, Chargen, Bestellungen, Gutscheine, admin-editierbare Website-Inhalte), i18n (DE/EN), Rate-Limiting/CSP/Audit-Log-Haertung, PostgreSQL- und MySQL-Unterstuetzung ueber austauschbare Prisma- Treiber-Adapter, Unit-/Komponenten-/E2E-Tests.
2026-08-17 14:30:28 +02:00
1 parent 5c76fcc266
commit c7927f2883
@@ -0,0 +1,96 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { Container } from "@/components/ui";
+import { PlaceholderImage } from "@/components/placeholder-image";
+import { TrustBadges } from "@/components/trust-badges";
+import { ShieldIcon } from "@/components/account-ui";
+import { ProductTeaserLink } from "@/components/product-card";
+import { getBatchByCode } from "@/lib/data";
+import { formatDate } from "@/lib/format";
+import { getLocale } from "@/i18n/locale";
+import { getDictionary } from "@/i18n/get-dictionary";
+
+// Siehe Begruendung in app/honig/[slug]/page.tsx.
+export const dynamic = "force-dynamic";
+
+export async function generateMetadata(
+  props: PageProps<"/charge/[code]">
+): Promise<Metadata> {
+  const { code } = await props.params;
+  return { title: `Charge ${code}`, alternates: { canonical: `/charge/${code}` } };
+}
+
+/**
+ * Chargen-Seite, die ueber den QR-Code auf jedem Wabenhain-Glas erreichbar
+ * ist (wabenhain.com/charge/{code}). Zeigt Herkunft, Erntezeitraum und
+ * Abfuelldatum der konkreten Charge, aus der das Glas stammt — der Moment,
+ * in dem jemand mit dem Glas in der Hand die Herkunftsangaben nachprueft.
+ */
+export default async function BatchPage(props: PageProps<"/charge/[code]">) {
+  const t = getDictionary(await getLocale());
+  const { code } = await props.params;
+  const batch = await getBatchByCode(code);
+  if (!batch) notFound();
+
+  const steps = [
+    { label: t.chargePage.stepHarvest, value: formatDate(batch.harvest.harvestDate) },
+    { label: t.chargePage.stepFilling, value: formatDate(batch.fillDate) },
+    { label: t.chargePage.stepBestBefore, value: formatDate(batch.bestBeforeDate) },
+  ];
+
+  return (
+    <div className="py-20">
+      <Container className="max-w-3xl">
+        <div className="flex items-center gap-2 text-honey-dark">
+          <ShieldIcon />
+          <span className="tracking-wide-caps text-xs">{t.chargePage.verifiedBatch}</span>
+        </div>
+        <h1 className="mt-3 text-4xl md:text-5xl text-forest">
+          {batch.harvest.type} {batch.harvest.year}
+        </h1>
+        <p className="mt-4 text-sm text-ink/60">{t.chargePage.provenanceNote(batch.code)}</p>
+
+        <div className="mt-10 grid sm:grid-cols-2 gap-6">
+          <PlaceholderImage tone="honey" className="aspect-square" label={`${batch.harvest.type} ${batch.harvest.year}`} />
+          <PlaceholderImage tone="forest" className="aspect-square" label={batch.harvest.location} />
+        </div>
+
+        <div className="mt-14">
+          <div className="grid grid-cols-3 gap-4">
+            {steps.map((step, i) => (
+              <div key={step.label} className="relative">
+                <div className="flex items-center">
+                  <span className="flex-shrink-0 w-2 h-2 rounded-full bg-honey" />
+                  {i < steps.length - 1 ? (
+                    <span className="ml-1 h-px flex-1 bg-ink/15" aria-hidden="true" />
+                  ) : null}
+                </div>
+                <p className="mt-3 text-xs tracking-wide-caps text-ink/60">{step.label}</p>
+                <p className="mt-1 text-forest">{step.value}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="mt-10 border-t border-ink/10 pt-8">
+          <p className="text-sm tracking-wide-caps text-ink/60 mb-2">{t.chargePage.regionLabel}</p>
+          <p className="text-ink/80">{batch.harvest.location}</p>
+          <p className="mt-6 text-ink/70 leading-relaxed">{batch.harvest.description}</p>
+        </div>
+
+        <TrustBadges className="mt-10 pt-8 border-t border-ink/10" />
+
+        {batch.products.length > 0 ? (
+          <div className="mt-14 border-t border-ink/10 pt-10">
+            <p className="text-sm tracking-wide-caps text-ink/60 mb-6">{t.chargePage.fromThisBatch}</p>
+            <div className="grid sm:grid-cols-2 gap-6">
+              {batch.products.map((product) => (
+                <ProductTeaserLink key={product.id} slug={product.slug} name={product.name} />
+              ))}
+            </div>
+          </div>
+        ) : null}
+      </Container>
+    </div>
+  );
+}