feat(frontend): Icon-Badges auf Honigcharge- und Inventar-Detailkarten
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.
This commit is contained in:
1 parent
5be352c4a0
commit
fc88c272ae
2 files changed
+20
-2
No files matched your search
@@ -1,6 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useParams } from "next/navigation";
|
import { useParams } from "next/navigation";
|
||||||
|
import { Wrench } from "lucide-react";
|
||||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||||
import { fetchEquipment, updateEquipment } from "@/lib/equipment/api";
|
import { fetchEquipment, updateEquipment } from "@/lib/equipment/api";
|
||||||
import { EquipmentCondition } from "@/lib/equipment/types";
|
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">
|
<main className="flex flex-col gap-4 p-4 sm:p-6">
|
||||||
<Card className="max-w-lg">
|
<Card className="max-w-lg">
|
||||||
<CardHeader className="flex flex-row items-center justify-between">
|
<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>
|
<Badge variant={statusTone(equipment.condition)}>{equipment.condition}</Badge>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="flex flex-col gap-3 text-sm">
|
<CardContent className="flex flex-col gap-3 text-sm">
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
|
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useParams } from "next/navigation";
|
import { useParams } from "next/navigation";
|
||||||
|
import { Droplet } from "lucide-react";
|
||||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||||
import { fetchHoneyBatch, fetchHoneyBatchTraceability } from "@/lib/honey-batches/api";
|
import { fetchHoneyBatch, fetchHoneyBatchTraceability } from "@/lib/honey-batches/api";
|
||||||
import { exportHoneyBatchTraceabilityPdf } from "@/lib/export/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">
|
<main className="flex flex-col gap-4 p-4 sm:p-6">
|
||||||
<Card className="max-w-lg">
|
<Card className="max-w-lg">
|
||||||
<CardHeader className="flex flex-row items-center justify-between">
|
<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">
|
<div className="flex items-center gap-2">
|
||||||
<Badge>{honeyBatch.status}</Badge>
|
<Badge>{honeyBatch.status}</Badge>
|
||||||
<QrCodeDialog entityType="honey-batches" id={honeyBatch.id} />
|
<QrCodeDialog entityType="honey-batches" id={honeyBatch.id} />
|
||||||
|
|||||||
Reference in new issue
Block a user