Kantinen-Bereich: Wochenplan-Editor, Gerichte, Kennzeichnungen, Passkey-Verwaltung

2026-07-17 18:18:41 +02:00
parent d2bb39d815
commit 76f90d519c
9 changed files with 780 additions and 0 deletions
@@ -0,0 +1,178 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createClient } from "@/lib/supabase/client";
+import { formatPrice } from "@/lib/menu";
+import type { Dish } from "@/lib/types";
+
+interface DishForm {
+  id: string | null; // null = neues Gericht
+  name: string;
+  price: string;
+}
+
+const EMPTY_FORM: DishForm = { id: null, name: "", price: "" };
+
+export default function DishManager() {
+  const supabase = useMemo(() => createClient(), []);
+  const [dishes, setDishes] = useState<Dish[]>([]);
+  const [form, setForm] = useState<DishForm | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const load = useCallback(async () => {
+    const { data, error } = await supabase
+      .from("dishes")
+      .select("*")
+      .order("name");
+    if (error) setError(`Laden fehlgeschlagen: ${error.message}`);
+    else setDishes(data as Dish[]);
+    setLoading(false);
+  }, [supabase]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  async function save(e: React.FormEvent) {
+    e.preventDefault();
+    if (!form) return;
+    setError(null);
+    const price = Number.parseFloat(form.price.replace(",", "."));
+    if (Number.isNaN(price) || price < 0) {
+      setError("Bitte einen gültigen Preis angeben, z. B. 3,50");
+      return;
+    }
+    const payload = { name: form.name.trim(), price };
+    const { error } = form.id
+      ? await supabase.from("dishes").update(payload).eq("id", form.id)
+      : await supabase.from("dishes").insert(payload);
+    if (error) {
+      setError(`Speichern fehlgeschlagen: ${error.message}`);
+      return;
+    }
+    setForm(null);
+    await load();
+  }
+
+  async function remove(dish: Dish) {
+    if (
+      !window.confirm(
+        `„${dish.name}“ wirklich löschen? Das Gericht wird auch aus allen Wochenplänen entfernt.`
+      )
+    )
+      return;
+    const { error } = await supabase.from("dishes").delete().eq("id", dish.id);
+    if (error) setError(`Löschen fehlgeschlagen: ${error.message}`);
+    await load();
+  }
+
+  return (
+    <div className="max-w-3xl">
+      <div className="flex items-center gap-3 mb-4">
+        <h1 className="text-xl font-bold text-[var(--c-primary)] mr-auto">
+          Gerichte
+        </h1>
+        <button
+          type="button"
+          className="btn btn-add"
+          onClick={() => setForm(EMPTY_FORM)}
+        >
+          Neues Gericht
+        </button>
+      </div>
+
+      {error && (
+        <p className="mb-3 text-sm text-[var(--c-del)]" role="alert">
+          {error}
+        </p>
+      )}
+
+      {form && (
+        <form onSubmit={save} className="card mb-4 space-y-3">
+          <h2 className="font-semibold">
+            {form.id ? "Gericht bearbeiten" : "Neues Gericht"}
+          </h2>
+          <div>
+            <label className="label" htmlFor="dish-name">
+              Bezeichnung
+            </label>
+            <input
+              id="dish-name"
+              className="input"
+              value={form.name}
+              onChange={(e) => setForm({ ...form, name: e.target.value })}
+              required
+            />
+          </div>
+          <div className="max-w-40">
+            <label className="label" htmlFor="dish-price">
+              Preis in €
+            </label>
+            <input
+              id="dish-price"
+              className="input"
+              inputMode="decimal"
+              placeholder="3,50"
+              value={form.price}
+              onChange={(e) => setForm({ ...form, price: e.target.value })}
+              required
+            />
+          </div>
+          <div className="flex gap-2">
+            <button type="submit" className="btn btn-add">
+              Speichern
+            </button>
+            <button
+              type="button"
+              className="btn btn-neutral"
+              onClick={() => setForm(null)}
+            >
+              Abbrechen
+            </button>
+          </div>
+        </form>
+      )}
+
+      {loading ? (
+        <p className="text-gray-500">Lade Gerichte…</p>
+      ) : (
+        <ul className="divide-y divide-gray-200 border border-gray-200 rounded-md bg-white">
+          {dishes.map((dish) => (
+            <li key={dish.id} className="flex items-center gap-3 px-4 py-2">
+              <span className="mr-auto">
+                <span className="font-semibold">{dish.name}</span>{" "}
+                <span className="text-gray-500">– {formatPrice(dish.price)}</span>
+              </span>
+              <button
+                type="button"
+                className="btn btn-primary"
+                onClick={() =>
+                  setForm({
+                    id: dish.id,
+                    name: dish.name,
+                    price: String(dish.price).replace(".", ","),
+                  })
+                }
+              >
+                Bearbeiten
+              </button>
+              <button
+                type="button"
+                className="btn btn-del"
+                onClick={() => remove(dish)}
+              >
+                Löschen
+              </button>
+            </li>
+          ))}
+          {dishes.length === 0 && (
+            <li className="px-4 py-3 text-gray-500">
+              Noch keine Gerichte angelegt.
+            </li>
+          )}
+        </ul>
+      )}
+    </div>
+  );
+}