From c3dc5961702f1d980645f00d183a9f815967680e Mon Sep 17 00:00:00 2001
From: Nick Szaunig <nick.szaunig@encry.de>
Date: Thu, 1 Oct 2026 18:37:37 +0200
Subject: [PATCH] feat(ui): honey batch page with one main action, traceability
 errors, confirmed removal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- DetailHeader: "Abfüllung anlegen" as the main action, PDF export in
  "Mehr", state as icon + word, retry and way back on load errors.
- Traceability says what it shows and offers a retry on errors instead
  of "Lädt…" forever.
- Removing a container allocation asks first and says what changes.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 ...honey-batch-container-allocations-card.tsx |  22 ++--
 .../src/app/(app)/honey-batches/[id]/page.tsx | 103 ++++++++++--------
 2 files changed, 69 insertions(+), 56 deletions(-)

diff --git a/ApiCore-Frontend/src/app/(app)/honey-batches/[id]/honey-batch-container-allocations-card.tsx b/ApiCore-Frontend/src/app/(app)/honey-batches/[id]/honey-batch-container-allocations-card.tsx
index bb79261..ee458a6 100644
--- a/ApiCore-Frontend/src/app/(app)/honey-batches/[id]/honey-batch-container-allocations-card.tsx
+++ b/ApiCore-Frontend/src/app/(app)/honey-batches/[id]/honey-batch-container-allocations-card.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { FormEvent, useState } from "react";
-import { Trash2 } from "lucide-react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 import {
@@ -15,6 +14,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { EmptyState } from "@/components/empty-state";
+import { ConfirmDialog } from "@/components/confirm-dialog";
 import { Boxes } from "lucide-react";
 import {
   Select,
@@ -132,16 +132,16 @@ export function HoneyBatchContainerAllocationsCard({ honeyBatch }: { honeyBatch:
               </p>
               <p className="text-muted-foreground">{allocation.amount} kg</p>
             </div>
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon"
-              disabled={removeMutation.isPending}
-              onClick={() => removeMutation.mutate(allocation.storageContainerId)}
-              aria-label="Zuweisung entfernen"
-            >
-              <Trash2 className="size-4" />
-            </Button>
+            <ConfirmDialog
+              triggerLabel="Entfernen"
+              triggerVariant="ghost"
+              triggerDisabled={removeMutation.isPending}
+              title="Zuweisung entfernen?"
+              description={`${allocation.amount} kg dieser Charge gelten danach nicht mehr als in Behälter ${allocation.storageContainer.code} gelagert. Der Honig selbst bleibt in der Charge.`}
+              confirmLabel="Entfernen"
+              isPending={removeMutation.isPending}
+              onConfirm={() => removeMutation.mutate(allocation.storageContainerId)}
+            />
           </div>
         ))}
 
diff --git a/ApiCore-Frontend/src/app/(app)/honey-batches/[id]/page.tsx b/ApiCore-Frontend/src/app/(app)/honey-batches/[id]/page.tsx
index 15bc12f..d982347 100644
--- a/ApiCore-Frontend/src/app/(app)/honey-batches/[id]/page.tsx
+++ b/ApiCore-Frontend/src/app/(app)/honey-batches/[id]/page.tsx
@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { Droplet, FlaskConical } from "lucide-react";
+import { Droplet, FileText, FlaskConical } from "lucide-react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { toast } from "sonner";
 import { fetchHoneyBatch, fetchHoneyBatchTraceability } from "@/lib/honey-batches/api";
@@ -11,9 +11,11 @@ import { exportHoneyBatchTraceabilityPdf } from "@/lib/export/api";
 import { QrCodeDialog } from "@/components/qr-code-dialog";
 import { DocumentUploadCard } from "@/components/document-upload-card";
 import { EmptyState } from "@/components/empty-state";
+import { ErrorState, LoadingState } from "@/components/query-state";
+import { DetailHeader, DetailQueryFallback, DetailStatus } from "@/components/detail-header";
+import { errorMessage } from "@/lib/forms/error-message";
 import { HoneyBatchStorageCard } from "./honey-batch-storage-card";
 import { HoneyBatchContainerAllocationsCard } from "./honey-batch-container-allocations-card";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { AddMeasurementDialog } from "./add-measurement-dialog";
@@ -21,50 +23,68 @@ import { EditMeasurementDialog } from "./edit-measurement-dialog";
 import { ExtractionEditDialog } from "./extraction-edit-dialog";
 import { HoneyBatchEditDialog } from "./honey-batch-edit-dialog";
 
+const BACK = { backHref: "/honey-batches", backLabel: "Alle Honigchargen" };
+
 export default function HoneyBatchDetailPage() {
   const params = useParams<{ id: string }>();
-  const { data: honeyBatch, isLoading, isError } = useQuery({
+  const honeyBatchQuery = useQuery({
     queryKey: ["honey-batches", params.id],
     queryFn: () => fetchHoneyBatch(params.id),
   });
-  const { data: traceability } = useQuery({
+  const honeyBatch = honeyBatchQuery.data;
+  const traceabilityQuery = useQuery({
     queryKey: ["honey-batches", params.id, "traceability"],
     queryFn: () => fetchHoneyBatchTraceability(params.id),
   });
+  const traceability = traceabilityQuery.data;
 
   const exportPdfMutation = useMutation({
     mutationFn: () => exportHoneyBatchTraceabilityPdf(params.id),
-    onError: () => toast.error("PDF-Bericht konnte nicht exportiert werden"),
+    onError: (error) =>
+      toast.error(errorMessage(error, "PDF-Bericht konnte nicht exportiert werden")),
   });
 
-  if (isLoading) {
-    return <p className="p-4 text-sm text-muted-foreground sm:p-6">Lädt…</p>;
-  }
-  if (isError || !honeyBatch) {
-    return (
-      <p role="alert" className="p-4 text-sm text-destructive sm:p-6">
-        Honigcharge konnte nicht geladen werden.
-      </p>
-    );
+  if (honeyBatchQuery.isLoading || honeyBatchQuery.isError || !honeyBatch) {
+    return <DetailQueryFallback query={honeyBatchQuery} what="Daten der Honigcharge" {...BACK} />;
   }
 
   return (
     <main className="flex flex-col gap-4 p-4 sm:p-6">
+      <DetailHeader
+        icon={Droplet}
+        title={honeyBatch.batchNumber}
+        subtitle={honeyBatch.honeyType ?? undefined}
+        status={
+          <DetailStatus
+            status={honeyBatch.status}
+            label={HONEY_BATCH_STATUS_LABELS[honeyBatch.status]}
+          />
+        }
+        primaryAction={
+          <Button
+            size="touch"
+            nativeButton={false}
+            render={<Link href={`/bottling/new?honeyBatchId=${honeyBatch.id}`} />}
+          >
+            Abfüllung anlegen
+          </Button>
+        }
+        moreActions={[
+          {
+            label: "Rückverfolgung als PDF",
+            icon: FileText,
+            onSelect: () => exportPdfMutation.mutate(),
+            disabled: exportPdfMutation.isPending,
+          },
+        ]}
+        {...BACK}
+      />
       <div className="grid grid-cols-1 items-start gap-4 lg:grid-cols-3">
         <div className="flex flex-col gap-4 lg:col-span-1">
           <Card>
-            <CardHeader className="flex flex-row items-center justify-between">
-              <div className="flex items-center gap-2.5">
-                <span
-                  className="flex size-8 items-center justify-center rounded-lg text-white shadow-[var(--shadow-soft)]"
-                  style={{ background: "var(--gradient-honey)" }}
-                >
-                  <Droplet className="size-4" />
-                </span>
-                <CardTitle className="font-mono">{honeyBatch.batchNumber}</CardTitle>
-              </div>
-              <div className="flex items-center gap-2">
-                <Badge>{HONEY_BATCH_STATUS_LABELS[honeyBatch.status]}</Badge>
+            <CardHeader className="flex flex-row flex-wrap items-center justify-between gap-2">
+              <CardTitle>Angaben</CardTitle>
+              <div className="flex flex-wrap items-center gap-2">
                 <HoneyBatchEditDialog honeyBatch={honeyBatch} />
                 <QrCodeDialog entityType="honey-batches" id={honeyBatch.id} />
               </div>
@@ -75,15 +95,6 @@ export default function HoneyBatchDetailPage() {
               {honeyBatch.waterContent !== null ? (
                 <p>Wassergehalt: {honeyBatch.waterContent}%</p>
               ) : null}
-              <Button
-                variant="outline"
-                size="sm"
-                className="w-fit"
-                nativeButton={false}
-                render={<Link href={`/bottling/new?honeyBatchId=${honeyBatch.id}`} />}
-              >
-                Neue Abfüllung
-              </Button>
             </CardContent>
           </Card>
           <HoneyBatchStorageCard honeyBatch={honeyBatch} />
@@ -133,17 +144,19 @@ export default function HoneyBatchDetailPage() {
           <Card>
             <CardHeader className="flex flex-row items-center justify-between">
               <CardTitle>Rückverfolgbarkeit</CardTitle>
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={exportPdfMutation.isPending}
-                onClick={() => exportPdfMutation.mutate()}
-              >
-                PDF-Bericht
-              </Button>
             </CardHeader>
             <CardContent className="flex flex-col gap-3 text-sm">
-              {!traceability ? <p className="text-muted-foreground">Lädt…</p> : null}
+              <p className="text-muted-foreground">
+                Woher der Honig dieser Charge stammt: Schleuderung, Ernten und Völker.
+              </p>
+              {traceabilityQuery.isLoading ? <LoadingState what="Herkunftsangaben" /> : null}
+              {traceabilityQuery.isError ? (
+                <ErrorState
+                  what="Herkunftsangaben"
+                  onRetry={() => void traceabilityQuery.refetch()}
+                  isRetrying={traceabilityQuery.isFetching}
+                />
+              ) : null}
               {traceability ? (
                 <>
                   <div className="flex items-center justify-between">
@@ -162,7 +175,7 @@ export default function HoneyBatchDetailPage() {
                       <Link
                         key={harvest.id}
                         href={`/harvests/${harvest.id}`}
-                        className="rounded-md border p-3 hover:bg-muted"
+                        className="min-h-11 rounded-md border p-3 hover:bg-muted"
                       >
                         <p className="font-medium">
                           Ernte am {new Date(harvest.date).toLocaleDateString("de-DE")}