feat(frontend): Fütterungen-Modul (Modul 9)

Mobile-optimiertes Erfassungsformular unter /feedings/new sowie
"Fütterung"-Ansicht mit Mengensumme auf der Volk-Detailseite.

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

@@ -0,0 +1,58 @@
+"use client";
+
+import Link from "next/link";
+import { useQuery } from "@tanstack/react-query";
+import { fetchColonyFeedings, fetchColonyFeedingsSummary } from "@/lib/feedings/api";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export function ColonyFeedingsCard({ colonyId }: { colonyId: string }) {
+  const { data: feedings, isLoading } = useQuery({
+    queryKey: ["colonies", colonyId, "feedings"],
+    queryFn: () => fetchColonyFeedings(colonyId),
+  });
+  const { data: summary } = useQuery({
+    queryKey: ["colonies", colonyId, "feedings", "summary"],
+    queryFn: () => fetchColonyFeedingsSummary(colonyId),
+  });
+
+  return (
+    <Card className="max-w-lg">
+      <CardHeader className="flex flex-row items-center justify-between">
+        <CardTitle>Fütterung</CardTitle>
+        <Button
+          size="sm"
+          nativeButton={false}
+          render={<Link href={`/feedings/new?colonyId=${colonyId}`} />}
+        >
+          Neue Fütterung
+        </Button>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3 text-sm">
+        {summary && summary.length > 0 ? (
+          <p className="text-muted-foreground">
+            Gesamt:{" "}
+            {summary
+              .map((entry) => `${entry.totalAmount.toFixed(1)} ${entry.unit}`)
+              .join(" · ")}
+          </p>
+        ) : null}
+        {isLoading ? <p className="text-muted-foreground">Lädt…</p> : null}
+        {!isLoading && (!feedings || feedings.length === 0) ? (
+          <p className="text-muted-foreground">Noch keine Fütterung dokumentiert.</p>
+        ) : null}
+        {feedings?.map((feeding) => (
+          <div key={feeding.id} className="rounded-md border p-3">
+            <p className="font-medium">
+              {new Date(feeding.date).toLocaleDateString("de-DE")} · {feeding.feedType}
+            </p>
+            <p className="text-muted-foreground">
+              {feeding.amount} {feeding.unit}
+              {feeding.product ? ` · ${feeding.product}` : ""}
+            </p>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}

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

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