feat(frontend): QR-Code-Dialog auf Objekt-Detailseiten (Modul 22)

Wiederverwendbarer QrCodeDialog (authentifizierter Blob-Fetch)
auf Volk-, Bienenstand-, Koenigin-, Honigcharge-Detailseiten und
je Lagerbehaelter-Zeile eingebunden.

ApiCore-Frontend/src/app/(app)/apiaries/[id]/page.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { useParams } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
 import { fetchApiary } from "@/lib/apiaries/api";
+import { QrCodeDialog } from "@/components/qr-code-dialog";
 import { Button } from "@/components/ui/button";
 import { ApiaryEditCard } from "./apiary-edit-card";
 
@@ -27,6 +28,9 @@ export default function ApiaryDetailPage() {
 
   return (
     <main className="flex flex-col gap-4 p-4 sm:p-6">
+      <div className="flex justify-end">
+        <QrCodeDialog entityType="apiaries" id={apiary.id} />
+      </div>
       <ApiaryEditCard key={apiary.id} apiary={apiary} />
       <Button
         className="w-fit"

ApiCore-Frontend/src/app/(app)/colonies/[id]/page.tsx

@@ -3,6 +3,7 @@
 import { useParams } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
 import { fetchColony } from "@/lib/colonies/api";
+import { QrCodeDialog } from "@/components/qr-code-dialog";
 import { ColonyEditCard } from "./colony-edit-card";
 import { ColonyActions } from "./colony-actions";
 import { ColonyHistoryCard } from "./colony-history";
@@ -31,6 +32,9 @@ export default function ColonyDetailPage() {
 
   return (
     <main className="flex flex-col gap-4 p-4 sm:p-6">
+      <div className="flex justify-end">
+        <QrCodeDialog entityType="colonies" id={colony.id} label="QR-Code für Durchsicht" />
+      </div>
       <ColonyEditCard key={colony.id} colony={colony} />
       <ColonyActions colony={colony} />
       <ColonyInspectionsCard colonyId={colony.id} />

ApiCore-Frontend/src/app/(app)/honey-batches/[id]/page.tsx

@@ -4,6 +4,7 @@ import { useParams } from "next/navigation";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { fetchHoneyBatch, fetchHoneyBatchTraceability } from "@/lib/honey-batches/api";
 import { exportHoneyBatchTraceabilityPdf } from "@/lib/export/api";
+import { QrCodeDialog } from "@/components/qr-code-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -40,7 +41,10 @@ export default function HoneyBatchDetailPage() {
       <Card className="max-w-lg">
         <CardHeader className="flex flex-row items-center justify-between">
           <CardTitle>{honeyBatch.batchNumber}</CardTitle>
-          <Badge>{honeyBatch.status}</Badge>
+          <div className="flex items-center gap-2">
+            <Badge>{honeyBatch.status}</Badge>
+            <QrCodeDialog entityType="honey-batches" id={honeyBatch.id} />
+          </div>
         </CardHeader>
         <CardContent className="flex flex-col gap-3 text-sm">
           {honeyBatch.honeyType ? <p>Sorte: {honeyBatch.honeyType}</p> : null}

ApiCore-Frontend/src/app/(app)/queens/[id]/page.tsx

@@ -3,6 +3,7 @@
 import { useParams } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
 import { fetchQueen } from "@/lib/queens/api";
+import { QrCodeDialog } from "@/components/qr-code-dialog";
 import { QueenEditCard } from "./queen-edit-card";
 import { AssignColonyDialog } from "./assign-colony-dialog";
 import { QueenHistoryCard } from "./queen-history";
@@ -27,6 +28,9 @@ export default function QueenDetailPage() {
 
   return (
     <main className="flex flex-col gap-4 p-4 sm:p-6">
+      <div className="flex justify-end">
+        <QrCodeDialog entityType="queens" id={queen.id} />
+      </div>
       <QueenEditCard key={queen.id} queen={queen} />
       <AssignColonyDialog queenId={queen.id} />
       <QueenHistoryCard queenId={queen.id} />

ApiCore-Frontend/src/app/(app)/storage/page.tsx

@@ -2,6 +2,7 @@
 
 import { useQuery } from "@tanstack/react-query";
 import { fetchStockItems, fetchStorageContainers } from "@/lib/storage/api";
+import { QrCodeDialog } from "@/components/qr-code-dialog";
 import { Badge } from "@/components/ui/badge";
 import {
   Table,
@@ -41,12 +42,13 @@ export default function StoragePage() {
                 <TableHead>Typ</TableHead>
                 <TableHead>Standort</TableHead>
                 <TableHead>Status</TableHead>
+                <TableHead className="text-right">QR-Code</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {containers.map((container) => (
                 <TableRow key={container.id}>
-                  <TableCell>{container.code}</TableCell>
+                  <TableCell className="font-mono font-medium">{container.code}</TableCell>
                   <TableCell>{container.containerType ?? "—"}</TableCell>
                   <TableCell>{container.location ?? "—"}</TableCell>
                   <TableCell>
@@ -54,6 +56,9 @@ export default function StoragePage() {
                       {container.status}
                     </Badge>
                   </TableCell>
+                  <TableCell className="text-right">
+                    <QrCodeDialog entityType="storage-containers" id={container.id} label="QR" />
+                  </TableCell>
                 </TableRow>
               ))}
             </TableBody>