feat(frontend): Behandlungen-Modul (Modul 8)

Mobile-optimiertes Erfassungsformular unter /treatments/new sowie
"Behandlungen"-Ansicht auf der Volk-Detailseite.

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

@@ -0,0 +1,47 @@
+"use client";
+
+import Link from "next/link";
+import { useQuery } from "@tanstack/react-query";
+import { fetchColonyTreatments } from "@/lib/treatments/api";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export function ColonyTreatmentsCard({ colonyId }: { colonyId: string }) {
+  const { data: treatments, isLoading } = useQuery({
+    queryKey: ["colonies", colonyId, "treatments"],
+    queryFn: () => fetchColonyTreatments(colonyId),
+  });
+
+  return (
+    <Card className="max-w-lg">
+      <CardHeader className="flex flex-row items-center justify-between">
+        <CardTitle>Behandlungen</CardTitle>
+        <Button
+          size="sm"
+          nativeButton={false}
+          render={<Link href={`/treatments/new?colonyId=${colonyId}`} />}
+        >
+          Neue Behandlung
+        </Button>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3 text-sm">
+        {isLoading ? <p className="text-muted-foreground">Lädt…</p> : null}
+        {!isLoading && (!treatments || treatments.length === 0) ? (
+          <p className="text-muted-foreground">Noch keine Behandlung dokumentiert.</p>
+        ) : null}
+        {treatments?.map((treatment) => (
+          <div key={treatment.id} className="rounded-md border p-3">
+            <p className="font-medium">
+              {new Date(treatment.date).toLocaleDateString("de-DE")} · {treatment.product}
+            </p>
+            <p className="text-muted-foreground">
+              {treatment.amount ?? "—"}
+              {treatment.method ? ` · ${treatment.method}` : ""}
+            </p>
+            {treatment.reason ? <p>Grund: {treatment.reason}</p> : null}
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -8,6 +8,7 @@ import { ColonyActions } from "./colony-actions";
 import { ColonyHistoryCard } from "./colony-history";
 import { ColonyInspectionsCard } from "./colony-inspections";
 import { ColonyVarroaCard } from "./colony-varroa";
+import { ColonyTreatmentsCard } from "./colony-treatments";
 
 export default function ColonyDetailPage() {
   const params = useParams<{ id: string }>();
@@ -33,6 +34,7 @@ export default function ColonyDetailPage() {
       <ColonyActions colony={colony} />
       <ColonyInspectionsCard colonyId={colony.id} />
       <ColonyVarroaCard colonyId={colony.id} />
+      <ColonyTreatmentsCard colonyId={colony.id} />
       <ColonyHistoryCard colonyId={colony.id} />
     </main>
   );