From 5be352c4a075f28be36ec5af85e49d6695e4c1ba Mon Sep 17 00:00:00 2001
From: Nick Szaunig <nick.szaunig@encry.de>
Date: Sun, 23 Aug 2026 20:57:01 +0200
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20Icon-Badges=20auf=20Detailsei?=
 =?UTF-8?q?ten-Karten=20(Volk/Bienenstand/K=C3=B6nigin)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Header von ColonyEditCard, ApiaryEditCard und QueenEditCard um Icon-Badge
im Honig-/Salbei-Gradient ergänzt, passend zum bereits überarbeiteten
Look der Listen- und Übersichtsseiten.

Zusätzlich Bug behoben: ColonyEditCard und QueenEditCard nutzten bislang
ein hartcodiertes ACTIVE-Ternary statt der gemeinsamen statusTone()-Hilfsfunktion,
wodurch z. B. WEAK/CONSPICUOUS/DISSOLVED-Völker und LOST/DECEASED-Königinnen
auf der eigenen Detailseite nur als neutrales "secondary"-Badge statt in
Warn-/Fehlerfarbe erschienen.
---
 .../app/(app)/apiaries/[id]/apiary-edit-card.tsx | 11 ++++++++++-
 .../app/(app)/colonies/[id]/colony-edit-card.tsx | 16 ++++++++++++----
 .../app/(app)/queens/[id]/queen-edit-card.tsx    | 16 ++++++++++++----
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/ApiCore-Frontend/src/app/(app)/apiaries/[id]/apiary-edit-card.tsx b/ApiCore-Frontend/src/app/(app)/apiaries/[id]/apiary-edit-card.tsx
index 9394424..f27489e 100644
--- a/ApiCore-Frontend/src/app/(app)/apiaries/[id]/apiary-edit-card.tsx
+++ b/ApiCore-Frontend/src/app/(app)/apiaries/[id]/apiary-edit-card.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { FormEvent, useState } from "react";
+import { MapPin } from "lucide-react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 import { deactivateApiary, reactivateApiary, updateApiary } from "@/lib/apiaries/api";
@@ -66,7 +67,15 @@ export function ApiaryEditCard({ apiary }: { apiary: Apiary }) {
   return (
     <Card className="max-w-lg">
       <CardHeader className="flex flex-row items-center justify-between">
-        <CardTitle>{apiary.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-honey)" }}
+          >
+            <MapPin className="size-4" />
+          </span>
+          <CardTitle>{apiary.name}</CardTitle>
+        </div>
         <Badge variant={apiary.status === "ACTIVE" ? "default" : "secondary"}>
           {apiary.status === "ACTIVE" ? "Aktiv" : "Inaktiv"}
         </Badge>
diff --git a/ApiCore-Frontend/src/app/(app)/colonies/[id]/colony-edit-card.tsx b/ApiCore-Frontend/src/app/(app)/colonies/[id]/colony-edit-card.tsx
index c7c858b..b3a4aaa 100644
--- a/ApiCore-Frontend/src/app/(app)/colonies/[id]/colony-edit-card.tsx
+++ b/ApiCore-Frontend/src/app/(app)/colonies/[id]/colony-edit-card.tsx
@@ -1,9 +1,11 @@
 "use client";
 
 import { FormEvent, useState } from "react";
+import { Layers } from "lucide-react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { updateColony } from "@/lib/colonies/api";
 import { Colony } from "@/lib/colonies/types";
+import { statusTone } from "@/lib/status-tone";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
@@ -47,10 +49,16 @@ export function ColonyEditCard({ colony }: { colony: Colony }) {
   return (
     <Card className="max-w-lg">
       <CardHeader className="flex flex-row items-center justify-between">
-        <CardTitle>{colony.code}</CardTitle>
-        <Badge variant={colony.status === "ACTIVE" ? "default" : "secondary"}>
-          {colony.status}
-        </Badge>
+        <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)" }}
+          >
+            <Layers className="size-4" />
+          </span>
+          <CardTitle className="font-mono">{colony.code}</CardTitle>
+        </div>
+        <Badge variant={statusTone(colony.status)}>{colony.status}</Badge>
       </CardHeader>
       <CardContent>
         <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
diff --git a/ApiCore-Frontend/src/app/(app)/queens/[id]/queen-edit-card.tsx b/ApiCore-Frontend/src/app/(app)/queens/[id]/queen-edit-card.tsx
index 25627ba..7a1f9b7 100644
--- a/ApiCore-Frontend/src/app/(app)/queens/[id]/queen-edit-card.tsx
+++ b/ApiCore-Frontend/src/app/(app)/queens/[id]/queen-edit-card.tsx
@@ -1,9 +1,11 @@
 "use client";
 
 import { FormEvent, useState } from "react";
+import { Crown } from "lucide-react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { updateQueen } from "@/lib/queens/api";
 import { Queen, QueenStatus } from "@/lib/queens/types";
+import { statusTone } from "@/lib/status-tone";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
@@ -63,10 +65,16 @@ export function QueenEditCard({ queen }: { queen: Queen }) {
   return (
     <Card className="max-w-lg">
       <CardHeader className="flex flex-row items-center justify-between">
-        <CardTitle>{queen.code}</CardTitle>
-        <Badge variant={queen.status === "ACTIVE" ? "default" : "secondary"}>
-          {queen.status}
-        </Badge>
+        <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-sage)" }}
+          >
+            <Crown className="size-4" />
+          </span>
+          <CardTitle className="font-mono">{queen.code}</CardTitle>
+        </div>
+        <Badge variant={statusTone(queen.status)}>{queen.status}</Badge>
       </CardHeader>
       <CardContent>
         <form className="flex flex-col gap-4" onSubmit={handleSubmit}>