From 7ec20199d3511035eb054e0d7a88dae7ea13d7eb Mon Sep 17 00:00:00 2001
From: Nick Szaunig <nick.szaunig@encry.de>
Date: Sat, 22 Aug 2026 05:12:23 +0200
Subject: [PATCH] feat(frontend): Lagerverwaltung-Ansicht (Modul 12)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

/storage mit Lagerbehälter- und Lagerartikelverwaltung inkl.
Bestandsbewegungen (Zugang/Abgang/Umlagerung/Korrektur).
---
 ApiCore-Frontend/src/app/(app)/layout.tsx     |   3 +
 .../storage/create-stock-item-dialog.tsx      | 131 ++++++++++++++++++
 .../create-storage-container-dialog.tsx       | 111 +++++++++++++++
 .../src/app/(app)/storage/page.tsx            | 104 ++++++++++++++
 .../(app)/storage/record-movement-dialog.tsx  | 110 +++++++++++++++
 ApiCore-Frontend/src/lib/storage/api.ts       |  42 ++++++
 ApiCore-Frontend/src/lib/storage/types.ts     |  57 ++++++++
 TASKS.md                                      |   2 +-
 8 files changed, 559 insertions(+), 1 deletion(-)
 create mode 100644 ApiCore-Frontend/src/app/(app)/storage/create-stock-item-dialog.tsx
 create mode 100644 ApiCore-Frontend/src/app/(app)/storage/create-storage-container-dialog.tsx
 create mode 100644 ApiCore-Frontend/src/app/(app)/storage/page.tsx
 create mode 100644 ApiCore-Frontend/src/app/(app)/storage/record-movement-dialog.tsx
 create mode 100644 ApiCore-Frontend/src/lib/storage/api.ts
 create mode 100644 ApiCore-Frontend/src/lib/storage/types.ts

diff --git a/ApiCore-Frontend/src/app/(app)/layout.tsx b/ApiCore-Frontend/src/app/(app)/layout.tsx
index be666f0..829f3d3 100644
--- a/ApiCore-Frontend/src/app/(app)/layout.tsx
+++ b/ApiCore-Frontend/src/app/(app)/layout.tsx
@@ -43,6 +43,9 @@ export default function AppLayout({ children }: { children: ReactNode }) {
           >
             Honigchargen
           </Link>
+          <Link className="text-sm text-muted-foreground hover:text-foreground" href="/storage">
+            Lager
+          </Link>
           {user.role === "ADMIN" ? (
             <Link
               className="text-sm text-muted-foreground hover:text-foreground"
diff --git a/ApiCore-Frontend/src/app/(app)/storage/create-stock-item-dialog.tsx b/ApiCore-Frontend/src/app/(app)/storage/create-stock-item-dialog.tsx
new file mode 100644
index 0000000..197d2e7
--- /dev/null
+++ b/ApiCore-Frontend/src/app/(app)/storage/create-stock-item-dialog.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import { FormEvent, useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { createStockItem } from "@/lib/storage/api";
+import { StockCategory } from "@/lib/storage/types";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+const CATEGORY_OPTIONS: StockCategory[] = ["HONEY", "CONSUMABLE", "EQUIPMENT_MATERIAL"];
+
+export function CreateStockItemDialog() {
+  const queryClient = useQueryClient();
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [category, setCategory] = useState<StockCategory>("CONSUMABLE");
+  const [unit, setUnit] = useState("");
+  const [quantity, setQuantity] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  const mutation = useMutation({
+    mutationFn: createStockItem,
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["stock-items"] });
+      setOpen(false);
+      setName("");
+      setUnit("");
+      setQuantity("");
+      setError(null);
+    },
+    onError: () => {
+      setError("Lagerartikel konnte nicht angelegt werden.");
+    },
+  });
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+    mutation.mutate({
+      name,
+      category,
+      unit,
+      quantity: quantity ? Number(quantity) : undefined,
+    });
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger render={<Button size="sm">+ Neuer Artikel</Button>} />
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Neuer Lagerartikel</DialogTitle>
+        </DialogHeader>
+        <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="item-name">Name</Label>
+            <Input
+              id="item-name"
+              required
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="item-category">Kategorie</Label>
+            <Select
+              value={category}
+              onValueChange={(value) => setCategory((value ?? "CONSUMABLE") as StockCategory)}
+            >
+              <SelectTrigger id="item-category">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {CATEGORY_OPTIONS.map((option) => (
+                  <SelectItem key={option} value={option}>
+                    {option}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="item-unit">Einheit</Label>
+            <Input
+              id="item-unit"
+              required
+              value={unit}
+              onChange={(event) => setUnit(event.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="item-quantity">Anfangsbestand</Label>
+            <Input
+              id="item-quantity"
+              type="number"
+              inputMode="decimal"
+              value={quantity}
+              onChange={(event) => setQuantity(event.target.value)}
+            />
+          </div>
+          {error ? (
+            <p role="alert" className="text-sm text-red-600">
+              {error}
+            </p>
+          ) : null}
+          <DialogFooter>
+            <Button type="submit" disabled={mutation.isPending}>
+              {mutation.isPending ? "Wird angelegt…" : "Anlegen"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/ApiCore-Frontend/src/app/(app)/storage/create-storage-container-dialog.tsx b/ApiCore-Frontend/src/app/(app)/storage/create-storage-container-dialog.tsx
new file mode 100644
index 0000000..777d161
--- /dev/null
+++ b/ApiCore-Frontend/src/app/(app)/storage/create-storage-container-dialog.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import { FormEvent, useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { createStorageContainer } from "@/lib/storage/api";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+export function CreateStorageContainerDialog() {
+  const queryClient = useQueryClient();
+  const [open, setOpen] = useState(false);
+  const [code, setCode] = useState("");
+  const [containerType, setContainerType] = useState("");
+  const [capacity, setCapacity] = useState("");
+  const [location, setLocation] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  const mutation = useMutation({
+    mutationFn: createStorageContainer,
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["storage-containers"] });
+      setOpen(false);
+      setCode("");
+      setContainerType("");
+      setCapacity("");
+      setLocation("");
+      setError(null);
+    },
+    onError: () => {
+      setError("Lagerbehälter konnte nicht angelegt werden.");
+    },
+  });
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+    mutation.mutate({
+      code,
+      containerType: containerType || undefined,
+      capacity: capacity ? Number(capacity) : undefined,
+      location: location || undefined,
+    });
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger render={<Button size="sm">+ Neuer Behälter</Button>} />
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Neuer Lagerbehälter</DialogTitle>
+        </DialogHeader>
+        <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="container-code">Code</Label>
+            <Input
+              id="container-code"
+              required
+              value={code}
+              onChange={(event) => setCode(event.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="container-type">Typ</Label>
+            <Input
+              id="container-type"
+              value={containerType}
+              onChange={(event) => setContainerType(event.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="container-capacity">Kapazität (kg)</Label>
+            <Input
+              id="container-capacity"
+              type="number"
+              inputMode="decimal"
+              value={capacity}
+              onChange={(event) => setCapacity(event.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="container-location">Standort</Label>
+            <Input
+              id="container-location"
+              value={location}
+              onChange={(event) => setLocation(event.target.value)}
+            />
+          </div>
+          {error ? (
+            <p role="alert" className="text-sm text-red-600">
+              {error}
+            </p>
+          ) : null}
+          <DialogFooter>
+            <Button type="submit" disabled={mutation.isPending}>
+              {mutation.isPending ? "Wird angelegt…" : "Anlegen"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/ApiCore-Frontend/src/app/(app)/storage/page.tsx b/ApiCore-Frontend/src/app/(app)/storage/page.tsx
new file mode 100644
index 0000000..2e922e0
--- /dev/null
+++ b/ApiCore-Frontend/src/app/(app)/storage/page.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { fetchStockItems, fetchStorageContainers } from "@/lib/storage/api";
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { CreateStorageContainerDialog } from "./create-storage-container-dialog";
+import { CreateStockItemDialog } from "./create-stock-item-dialog";
+import { RecordMovementDialog } from "./record-movement-dialog";
+
+export default function StoragePage() {
+  const { data: containers, isLoading: containersLoading } = useQuery({
+    queryKey: ["storage-containers"],
+    queryFn: fetchStorageContainers,
+  });
+  const { data: stockItems, isLoading: itemsLoading } = useQuery({
+    queryKey: ["stock-items"],
+    queryFn: fetchStockItems,
+  });
+
+  return (
+    <main className="flex flex-col gap-8 p-4 sm:p-6">
+      <section className="flex flex-col gap-4">
+        <div className="flex items-center justify-between">
+          <h1 className="text-xl font-semibold">Lagerbehälter</h1>
+          <CreateStorageContainerDialog />
+        </div>
+        {containersLoading ? <p className="text-sm text-muted-foreground">Lädt…</p> : null}
+        {containers ? (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Code</TableHead>
+                <TableHead>Typ</TableHead>
+                <TableHead>Standort</TableHead>
+                <TableHead>Status</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {containers.map((container) => (
+                <TableRow key={container.id}>
+                  <TableCell>{container.code}</TableCell>
+                  <TableCell>{container.containerType ?? "—"}</TableCell>
+                  <TableCell>{container.location ?? "—"}</TableCell>
+                  <TableCell>
+                    <Badge variant={container.status === "FILLED" ? "default" : "secondary"}>
+                      {container.status}
+                    </Badge>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        ) : null}
+      </section>
+
+      <section className="flex flex-col gap-4">
+        <div className="flex items-center justify-between">
+          <h2 className="text-xl font-semibold">Lagerartikel</h2>
+          <CreateStockItemDialog />
+        </div>
+        {itemsLoading ? <p className="text-sm text-muted-foreground">Lädt…</p> : null}
+        {stockItems ? (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Kategorie</TableHead>
+                <TableHead>Bestand</TableHead>
+                <TableHead>Aktion</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {stockItems.map((item) => (
+                <TableRow key={item.id}>
+                  <TableCell>{item.name}</TableCell>
+                  <TableCell>{item.category}</TableCell>
+                  <TableCell>
+                    {item.quantity} {item.unit}
+                    {item.minThreshold !== null && item.quantity < item.minThreshold ? (
+                      <Badge variant="destructive" className="ml-2">
+                        Niedrig
+                      </Badge>
+                    ) : null}
+                  </TableCell>
+                  <TableCell>
+                    <RecordMovementDialog stockItemId={item.id} />
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        ) : null}
+      </section>
+    </main>
+  );
+}
diff --git a/ApiCore-Frontend/src/app/(app)/storage/record-movement-dialog.tsx b/ApiCore-Frontend/src/app/(app)/storage/record-movement-dialog.tsx
new file mode 100644
index 0000000..2fc18d1
--- /dev/null
+++ b/ApiCore-Frontend/src/app/(app)/storage/record-movement-dialog.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { FormEvent, useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { addStockMovement } from "@/lib/storage/api";
+import { StockMovementType } from "@/lib/storage/types";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+const TYPE_OPTIONS: StockMovementType[] = ["IN", "OUT", "TRANSFER", "ADJUSTMENT"];
+
+export function RecordMovementDialog({ stockItemId }: { stockItemId: string }) {
+  const queryClient = useQueryClient();
+  const [open, setOpen] = useState(false);
+  const [type, setType] = useState<StockMovementType>("IN");
+  const [quantity, setQuantity] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  const mutation = useMutation({
+    mutationFn: (input: { type: StockMovementType; quantity: number }) =>
+      addStockMovement(stockItemId, input),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["stock-items"] });
+      setOpen(false);
+      setQuantity("");
+      setError(null);
+    },
+    onError: () => {
+      setError("Bewegung konnte nicht gespeichert werden.");
+    },
+  });
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+    if (!quantity) {
+      setError("Bitte eine Menge angeben.");
+      return;
+    }
+    mutation.mutate({ type, quantity: Number(quantity) });
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger render={<Button size="sm" variant="outline">Bewegung buchen</Button>} />
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Bestandsbewegung</DialogTitle>
+        </DialogHeader>
+        <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="movement-type">Art</Label>
+            <Select
+              value={type}
+              onValueChange={(value) => setType((value ?? "IN") as StockMovementType)}
+            >
+              <SelectTrigger id="movement-type">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {TYPE_OPTIONS.map((option) => (
+                  <SelectItem key={option} value={option}>
+                    {option}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="movement-quantity">Menge</Label>
+            <Input
+              id="movement-quantity"
+              type="number"
+              inputMode="decimal"
+              required
+              value={quantity}
+              onChange={(event) => setQuantity(event.target.value)}
+            />
+          </div>
+          {error ? (
+            <p role="alert" className="text-sm text-red-600">
+              {error}
+            </p>
+          ) : null}
+          <DialogFooter>
+            <Button type="submit" disabled={mutation.isPending}>
+              {mutation.isPending ? "Wird gespeichert…" : "Buchen"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/ApiCore-Frontend/src/lib/storage/api.ts b/ApiCore-Frontend/src/lib/storage/api.ts
new file mode 100644
index 0000000..52d4293
--- /dev/null
+++ b/ApiCore-Frontend/src/lib/storage/api.ts
@@ -0,0 +1,42 @@
+import { apiFetch } from "@/lib/auth/api-client";
+import {
+  CreateStockItemInput,
+  CreateStockMovementInput,
+  CreateStorageContainerInput,
+  StockItem,
+  StorageContainer,
+} from "./types";
+
+export function fetchStorageContainers(): Promise<StorageContainer[]> {
+  return apiFetch<StorageContainer[]>("/storage-containers");
+}
+
+export function createStorageContainer(
+  input: CreateStorageContainerInput,
+): Promise<StorageContainer> {
+  return apiFetch<StorageContainer>("/storage-containers", {
+    method: "POST",
+    body: JSON.stringify(input),
+  });
+}
+
+export function fetchStockItems(): Promise<StockItem[]> {
+  return apiFetch<StockItem[]>("/stock-items");
+}
+
+export function createStockItem(input: CreateStockItemInput): Promise<StockItem> {
+  return apiFetch<StockItem>("/stock-items", {
+    method: "POST",
+    body: JSON.stringify(input),
+  });
+}
+
+export function addStockMovement(
+  id: string,
+  input: CreateStockMovementInput,
+): Promise<StockItem> {
+  return apiFetch<StockItem>(`/stock-items/${id}/movements`, {
+    method: "POST",
+    body: JSON.stringify(input),
+  });
+}
diff --git a/ApiCore-Frontend/src/lib/storage/types.ts b/ApiCore-Frontend/src/lib/storage/types.ts
new file mode 100644
index 0000000..51f1bc1
--- /dev/null
+++ b/ApiCore-Frontend/src/lib/storage/types.ts
@@ -0,0 +1,57 @@
+export type StockCategory = "HONEY" | "CONSUMABLE" | "EQUIPMENT_MATERIAL";
+export type StockMovementType = "IN" | "OUT" | "TRANSFER" | "ADJUSTMENT";
+export type StorageContainerStatus = "EMPTY" | "FILLED" | "CLEANING" | "OUT_OF_SERVICE";
+
+export interface StorageContainer {
+  id: string;
+  code: string;
+  containerType: string | null;
+  capacity: number | null;
+  currentAmount: number | null;
+  location: string | null;
+  status: StorageContainerStatus;
+}
+
+export interface StockMovement {
+  id: string;
+  stockItemId: string;
+  type: StockMovementType;
+  quantity: number;
+  date: string;
+  relatedType: string | null;
+  relatedId: string | null;
+  notes: string | null;
+}
+
+export interface StockItem {
+  id: string;
+  name: string;
+  category: StockCategory;
+  unit: string;
+  quantity: number;
+  minThreshold: number | null;
+  notes: string | null;
+  movements?: StockMovement[];
+}
+
+export interface CreateStorageContainerInput {
+  code: string;
+  containerType?: string;
+  capacity?: number;
+  location?: string;
+}
+
+export interface CreateStockItemInput {
+  name: string;
+  category: StockCategory;
+  unit: string;
+  quantity?: number;
+  minThreshold?: number;
+  notes?: string;
+}
+
+export interface CreateStockMovementInput {
+  type: StockMovementType;
+  quantity: number;
+  notes?: string;
+}
diff --git a/TASKS.md b/TASKS.md
index b1744e8..30f72e2 100644
--- a/TASKS.md
+++ b/TASKS.md
@@ -107,7 +107,7 @@ Abgeleitet aus [`docs/lastenheft.md`](docs/lastenheft.md) Abschnitt 26. Reihenfo
 - Endpunkte: `GET/POST /api/v1/storage-containers`, `GET/POST /api/v1/stock-items`, `POST /api/v1/stock-items/:id/movements`
 - Frontend: `/storage`
 - [x] Backend-Modul fertig, getestet, grün, committet
-- [ ] Frontend-Views fertig, getestet, grün, committet
+- [x] Frontend-Views fertig, getestet, grün, committet
 
 ### 13. Dashboard