feat(frontend): Icon-Badges auf Abfüllungs- und Ernte-Detailkarten

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.
This commit is contained in:
Nick Szaunig committed 2026-08-24 14:50:34 +02:00
1 parent c0922387fd
commit 9a32c6c11d
2 files changed
+17 -3

No files matched your search

@@ -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>
@@ -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">