feat(frontend): Durchsichten-Modul (Modul 5)

Mobile-optimiertes Schnellformular unter /inspections/new sowie
"Durchsichten"-Ansicht auf der Volk-Detailseite.

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

@@ -0,0 +1,53 @@
+"use client";
+
+import Link from "next/link";
+import { useQuery } from "@tanstack/react-query";
+import { fetchColonyInspections } from "@/lib/inspections/api";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export function ColonyInspectionsCard({ colonyId }: { colonyId: string }) {
+  const { data: inspections, isLoading } = useQuery({
+    queryKey: ["colonies", colonyId, "inspections"],
+    queryFn: () => fetchColonyInspections(colonyId),
+  });
+
+  return (
+    <Card className="max-w-lg">
+      <CardHeader className="flex flex-row items-center justify-between">
+        <CardTitle>Durchsichten</CardTitle>
+        <Button
+          size="sm"
+          nativeButton={false}
+          render={<Link href={`/inspections/new?colonyId=${colonyId}`} />}
+        >
+          Neue Durchsicht
+        </Button>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3 text-sm">
+        {isLoading ? <p className="text-muted-foreground">Lädt…</p> : null}
+        {!isLoading && (!inspections || inspections.length === 0) ? (
+          <p className="text-muted-foreground">Noch keine Durchsicht dokumentiert.</p>
+        ) : null}
+        {inspections?.map((inspection) => (
+          <div key={inspection.id} className="rounded-md border p-3">
+            <p className="font-medium">
+              {new Date(inspection.date).toLocaleDateString("de-DE")}
+            </p>
+            <p className="text-muted-foreground">
+              {inspection.colonyStrength !== null
+                ? `${inspection.colonyStrength} Waben`
+                : "Stärke unbekannt"}
+              {inspection.queenSeen !== null
+                ? ` · Königin ${inspection.queenSeen ? "gesehen" : "nicht gesehen"}`
+                : ""}
+            </p>
+            {inspection.healthIssues ? <p>Gesundheit: {inspection.healthIssues}</p> : null}
+            {inspection.varroaIssues ? <p>Varroa: {inspection.varroaIssues}</p> : null}
+            {inspection.measures ? <p>Maßnahmen: {inspection.measures}</p> : null}
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -6,6 +6,7 @@ import { fetchColony } from "@/lib/colonies/api";
 import { ColonyEditCard } from "./colony-edit-card";
 import { ColonyActions } from "./colony-actions";
 import { ColonyHistoryCard } from "./colony-history";
+import { ColonyInspectionsCard } from "./colony-inspections";
 
 export default function ColonyDetailPage() {
   const params = useParams<{ id: string }>();
@@ -29,6 +30,7 @@ export default function ColonyDetailPage() {
     <main className="flex flex-col gap-4 p-4 sm:p-6">
       <ColonyEditCard key={colony.id} colony={colony} />
       <ColonyActions colony={colony} />
+      <ColonyInspectionsCard colonyId={colony.id} />
       <ColonyHistoryCard colonyId={colony.id} />
     </main>
   );