feat(inventory): add spare parts management

frontend/athena/components/inventory/MasterDataSection.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { useState } from "react";
+import { Edit, Plus, Trash2 } from "lucide-react";
+
+import ConfirmDialog from "@/components/common/ConfirmDialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useToast } from "@/components/common/ToastProvider";
+import { api } from "@/lib/api";
+import type { InventoryCategory, InventoryLocation, InventorySupplier } from "@/types/inventory";
+import { getErrorMessage } from "./inventory-utils";
+
+type MasterKind = "categories" | "locations" | "suppliers";
+type MasterEntry = InventoryCategory | InventoryLocation | InventorySupplier;
+
+type Props = {
+  title: string;
+  kind: MasterKind;
+  entries: MasterEntry[];
+  canManage: boolean;
+  onChanged: () => void;
+};
+
+export default function MasterDataSection({ title, kind, entries, canManage, onChanged }: Props) {
+  const { showToast } = useToast();
+  const [editing, setEditing] = useState<MasterEntry | null>(null);
+  const [deleteEntry, setDeleteEntry] = useState<MasterEntry | null>(null);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState("");
+
+  function startCreate() {
+    setEditing({ id: 0, name: "", description: null, created_at: "", updated_at: "" } as MasterEntry);
+    setName("");
+    setDescription("");
+    setError("");
+  }
+
+  function startEdit(entry: MasterEntry) {
+    setEditing(entry);
+    setName(entry.name);
+    setDescription("description" in entry && entry.description ? entry.description : "");
+    setError("");
+  }
+
+  async function save() {
+    if (!editing) {
+      return;
+    }
+    if (!name.trim()) {
+      setError("Bitte einen Namen angeben.");
+      return;
+    }
+    setPending(true);
+    setError("");
+    const payload = kind === "suppliers"
+      ? { name: name.trim(), notes: description.trim() || null }
+      : { name: name.trim(), description: description.trim() || null };
+    try {
+      if (editing.id) {
+        await api.put(`/inventory/${kind}/${editing.id}`, payload);
+      } else {
+        await api.post(`/inventory/${kind}`, payload);
+      }
+      showToast({ type: "success", title: `${title} gespeichert` });
+      setEditing(null);
+      onChanged();
+    } catch (err) {
+      const message = getErrorMessage(err);
+      setError(message);
+      showToast({ type: "error", title: `${title} konnte nicht gespeichert werden`, description: message });
+    } finally {
+      setPending(false);
+    }
+  }
+
+  async function confirmDelete() {
+    if (!deleteEntry) {
+      return;
+    }
+    setPending(true);
+    try {
+      await api.delete(`/inventory/${kind}/${deleteEntry.id}`);
+      showToast({ type: "success", title: `${title} gelöscht`, description: deleteEntry.name });
+      setDeleteEntry(null);
+      onChanged();
+    } catch (err) {
+      const message = getErrorMessage(err);
+      showToast({ type: "error", title: `${title} konnte nicht gelöscht werden`, description: message });
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <section className="rounded-lg border bg-white p-5">
+      <div className="mb-4 flex items-center justify-between gap-3">
+        <h2 className="font-semibold text-slate-950">{title}</h2>
+        {canManage && <Button type="button" size="sm" onClick={startCreate}><Plus size={14} />Neu</Button>}
+      </div>
+
+      <div className="divide-y">
+        {entries.length === 0 ? (
+          <p className="py-4 text-sm text-slate-500">Noch keine Einträge vorhanden.</p>
+        ) : entries.map((entry) => (
+          <div key={entry.id} className="flex items-center justify-between gap-3 py-3">
+            <div>
+              <p className="font-medium text-slate-950">{entry.name}</p>
+              {"description" in entry && entry.description && <p className="text-sm text-slate-500">{entry.description}</p>}
+              {"notes" in entry && entry.notes && <p className="text-sm text-slate-500">{entry.notes}</p>}
+            </div>
+            {canManage && (
+              <div className="flex gap-2">
+                <Button type="button" variant="ghost" size="icon-sm" onClick={() => startEdit(entry)} title="Bearbeiten"><Edit size={16} /></Button>
+                <Button type="button" variant="destructive" size="icon-sm" onClick={() => setDeleteEntry(entry)} title="Löschen"><Trash2 size={16} /></Button>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {editing && (
+        <div className="mt-4 grid gap-3 rounded-lg border bg-slate-50 p-4">
+          <Input value={name} placeholder="Name" onChange={(event) => setName(event.target.value)} />
+          <textarea className="min-h-20 rounded-lg border p-2 text-sm" value={description} placeholder={kind === "suppliers" ? "Notizen" : "Beschreibung"} onChange={(event) => setDescription(event.target.value)} />
+          {error && <p className="text-sm text-red-600">{error}</p>}
+          <div className="flex gap-2">
+            <Button type="button" onClick={save} disabled={pending}>{pending ? "Speichert..." : "Speichern"}</Button>
+            <Button type="button" variant="outline" onClick={() => setEditing(null)} disabled={pending}>Abbrechen</Button>
+          </div>
+        </div>
+      )}
+
+      <ConfirmDialog
+        open={Boolean(deleteEntry)}
+        title={`${title} löschen`}
+        description="Der Eintrag wird entfernt. Verknüpfte Artikel behalten ihre sonstigen Daten."
+        pending={pending}
+        onOpenChange={(open) => !open && setDeleteEntry(null)}
+        onConfirm={confirmDelete}
+      >
+        {deleteEntry?.name}
+      </ConfirmDialog>
+    </section>
+  );
+}