From 9a32c6c11de8b067a835d15fecfdcb26020fa66e Mon Sep 17 00:00:00 2001
From: Nick Szaunig <nick.szaunig@encry.de>
Date: Mon, 24 Aug 2026 14:50:34 +0200
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20Icon-Badges=20auf=20Abf=C3=BC?=
 =?UTF-8?q?llungs-=20und=20Ernte-Detailkarten?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Header von BottlingBatchDetailPage und HarvestDetailPage um Icon-Badge
(Package bzw. Boxes im Honig-Gradient) ergänzt, konsistent zum bereits
überarbeiteten Look aller anderen Detailseiten. Schließt die letzten
beiden verbliebenen Detailseiten ohne Icon-Badge ab.
---
 ApiCore-Frontend/src/app/(app)/bottling/[id]/page.tsx | 11 +++++++++--
 ApiCore-Frontend/src/app/(app)/harvests/[id]/page.tsx |  9 ++++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/ApiCore-Frontend/src/app/(app)/bottling/[id]/page.tsx b/ApiCore-Frontend/src/app/(app)/bottling/[id]/page.tsx
index 070ca61..bce1c3f 100644
--- a/ApiCore-Frontend/src/app/(app)/bottling/[id]/page.tsx
+++ b/ApiCore-Frontend/src/app/(app)/bottling/[id]/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useParams } from "next/navigation";
+import { Package } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
 import { fetchBottlingBatch } from "@/lib/bottling/api";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -26,8 +27,14 @@ export default function BottlingBatchDetailPage() {
   return (
     <main className="flex flex-col gap-4 p-4 sm:p-6">
       <Card className="max-w-lg">
-        <CardHeader>
-          <CardTitle>Abfüllung {bottlingBatch.lotNumber}</CardTitle>
+        <CardHeader className="flex flex-row 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)" }}
+          >
+            <Package className="size-4" />
+          </span>
+          <CardTitle className="font-mono">Abfüllung {bottlingBatch.lotNumber}</CardTitle>
         </CardHeader>
         <CardContent className="flex flex-col gap-2 text-sm">
           <p>Honigcharge: {bottlingBatch.honeyBatch.batchNumber}</p>
diff --git a/ApiCore-Frontend/src/app/(app)/harvests/[id]/page.tsx b/ApiCore-Frontend/src/app/(app)/harvests/[id]/page.tsx
index 0063825..38a38cd 100644
--- a/ApiCore-Frontend/src/app/(app)/harvests/[id]/page.tsx
+++ b/ApiCore-Frontend/src/app/(app)/harvests/[id]/page.tsx
@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { useParams } from "next/navigation";
+import { Boxes } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
 import { fetchHarvest } from "@/lib/harvests/api";
 import { Button } from "@/components/ui/button";
@@ -28,7 +29,13 @@ export default function HarvestDetailPage() {
   return (
     <main className="flex flex-col gap-4 p-4 sm:p-6">
       <Card className="max-w-lg">
-        <CardHeader>
+        <CardHeader className="flex flex-row 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)" }}
+          >
+            <Boxes className="size-4" />
+          </span>
           <CardTitle>Ernte vom {new Date(harvest.date).toLocaleDateString("de-DE")}</CardTitle>
         </CardHeader>
         <CardContent className="flex flex-col gap-3 text-sm">