From fc88c272ae96eb59641523dd22a1423572e9fc91 Mon Sep 17 00:00:00 2001
From: Nick Szaunig <nick.szaunig@encry.de>
Date: Sun, 23 Aug 2026 20:59:28 +0200
Subject: [PATCH] feat(frontend): Icon-Badges auf Honigcharge- und
 Inventar-Detailkarten
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Header von HoneyBatchDetailPage und EquipmentDetailPage um Icon-Badge
(Droplet im Honig-Gradient bzw. Wrench im Himmel-Gradient) ergänzt,
konsistent zum bereits überarbeiteten Look der übrigen Detailseiten.
---
 .../src/app/(app)/equipment/[id]/page.tsx             | 11 ++++++++++-
 .../src/app/(app)/honey-batches/[id]/page.tsx         | 11 ++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/ApiCore-Frontend/src/app/(app)/equipment/[id]/page.tsx b/ApiCore-Frontend/src/app/(app)/equipment/[id]/page.tsx
index c18bf8c..587baa6 100644
--- a/ApiCore-Frontend/src/app/(app)/equipment/[id]/page.tsx
+++ b/ApiCore-Frontend/src/app/(app)/equipment/[id]/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useParams } from "next/navigation";
+import { Wrench } from "lucide-react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { fetchEquipment, updateEquipment } from "@/lib/equipment/api";
 import { EquipmentCondition } from "@/lib/equipment/types";
@@ -49,7 +50,15 @@ export default function EquipmentDetailPage() {
     <main className="flex flex-col gap-4 p-4 sm:p-6">
       <Card className="max-w-lg">
         <CardHeader className="flex flex-row items-center justify-between">
-          <CardTitle>{equipment.name}</CardTitle>
+          <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-sky)" }}
+            >
+              <Wrench className="size-4" />
+            </span>
+            <CardTitle>{equipment.name}</CardTitle>
+          </div>
           <Badge variant={statusTone(equipment.condition)}>{equipment.condition}</Badge>
         </CardHeader>
         <CardContent className="flex flex-col gap-3 text-sm">
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 5e0b4ba..fb66004 100644
--- a/ApiCore-Frontend/src/app/(app)/honey-batches/[id]/page.tsx
+++ b/ApiCore-Frontend/src/app/(app)/honey-batches/[id]/page.tsx
@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { useParams } from "next/navigation";
+import { Droplet } from "lucide-react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { fetchHoneyBatch, fetchHoneyBatchTraceability } from "@/lib/honey-batches/api";
 import { exportHoneyBatchTraceabilityPdf } from "@/lib/export/api";
@@ -41,7 +42,15 @@ export default function HoneyBatchDetailPage() {
     <main className="flex flex-col gap-4 p-4 sm:p-6">
       <Card className="max-w-lg">
         <CardHeader className="flex flex-row items-center justify-between">
-          <CardTitle>{honeyBatch.batchNumber}</CardTitle>
+          <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>{honeyBatch.status}</Badge>
             <QrCodeDialog entityType="honey-batches" id={honeyBatch.id} />