Allergene/Zusatzstoffe je Gericht auswählbar, klein angezeigt

Chip-Auswahl im Gericht-Formular (Klick zum An-/Abwählen) statt Checkbox-Liste; Kürzel erscheinen hochgestellt neben dem Gerichtnamen in Speisekarte, mobiler Ansicht und Wochenplan-Editor. Editor bekommt außerdem einen Heute-Button.
2026-07-18 00:46:39 +02:00
parent 1db89a54bf
commit 675503e1f4
4 changed files with 202 additions and 52 deletions
@@ -108,3 +108,31 @@ body {
  color: #4b5563;
  margin-left: 0.15rem;
 }
+
+/* ---------- Chip-Auswahl (Allergene/Zusatzstoffe je Gericht) ---------- */
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 9999px;
+  padding: 0.2rem 0.65rem;
+  font-size: 0.75rem;
+  line-height: 1.2;
+  border: 1px solid #d1d5db;
+  background: #f9fafb;
+  color: #374151;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+.chip:hover { border-color: var(--c-primary); }
+.chip-active {
+  background: var(--c-primary);
+  border-color: var(--c-primary);
+  color: #ffffff;
+}
+.dish-codes {
+  font-size: 0.65rem;
+  color: #6b7280;
+  vertical-align: super;
+  margin-left: 0.15rem;
+}
@@ -0,0 +1,42 @@
+"use client";
+
+import type { CodeItem } from "@/lib/types";
+
+export default function ChipPicker({
+  items,
+  selected,
+  onToggle,
+  label,
+}: {
+  items: CodeItem[];
+  selected: string[];
+  onToggle: (code: string) => void;
+  label: string;
+}) {
+  return (
+    <div>
+      <label className="label">{label}</label>
+      {items.length === 0 ? (
+        <p className="text-sm text-gray-400">Keine Einträge vorhanden.</p>
+      ) : (
+        <div className="flex flex-wrap gap-1.5">
+          {items.map((item) => {
+            const active = selected.includes(item.code);
+            return (
+              <button
+                key={item.code}
+                type="button"
+                onClick={() => onToggle(item.code)}
+                className={`chip ${active ? "chip-active" : ""}`}
+                aria-pressed={active}
+                title={item.name}
+              >
+                <span className="font-semibold">{item.code}</span> {item.name}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -2,20 +2,31 @@

 import { useCallback, useEffect, useMemo, useState } from "react";
 import { createClient } from "@/lib/supabase/client";
-import { formatPrice } from "@/lib/menu";
-import type { Dish } from "@/lib/types";
+import { dishCodes, formatPrice } from "@/lib/menu";
+import type { CodeItem, Dish } from "@/lib/types";
+import ChipPicker from "@/components/ChipPicker";

 interface DishForm {
  id: string | null; // null = neues Gericht
  name: string;
  price: string;
+  allergens: string[];
+  additives: string[];
 }

-const EMPTY_FORM: DishForm = { id: null, name: "", price: "" };
+const EMPTY_FORM: DishForm = {
+  id: null,
+  name: "",
+  price: "",
+  allergens: [],
+  additives: [],
+};

 export default function DishManager() {
  const supabase = useMemo(() => createClient(), []);
  const [dishes, setDishes] = useState<Dish[]>([]);
+  const [allergens, setAllergens] = useState<CodeItem[]>([]);
+  const [additives, setAdditives] = useState<CodeItem[]>([]);
  const [form, setForm] = useState<DishForm | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
@@ -30,12 +41,18 @@ export default function DishManager() {
  }, [dishes, search]);

  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[]);
+    const [dishesRes, allergensRes, additivesRes] = await Promise.all([
+      supabase.from("dishes").select("*").order("name"),
+      supabase.from("allergens").select("*").order("sort"),
+      supabase.from("additives").select("*").order("sort"),
+    ]);
+    const problem = dishesRes.error ?? allergensRes.error ?? additivesRes.error;
+    if (problem) setError(`Laden fehlgeschlagen: ${problem.message}`);
+    else {
+      setDishes(dishesRes.data as Dish[]);
+      setAllergens(allergensRes.data as CodeItem[]);
+      setAdditives(additivesRes.data as CodeItem[]);
+    }
    setLoading(false);
  }, [supabase]);

@@ -52,7 +69,12 @@ export default function DishManager() {
      setError("Bitte einen gültigen Preis angeben, z. B. 3,50");
      return;
    }
-    const payload = { name: form.name.trim(), price };
+    const payload = {
+      name: form.name.trim(),
+      price,
+      allergens: form.allergens,
+      additives: form.additives,
+    };
    const { error } = form.id
      ? await supabase.from("dishes").update(payload).eq("id", form.id)
      : await supabase.from("dishes").insert(payload);
@@ -122,6 +144,26 @@ export default function DishManager() {
    await load();
  }

+  function toggleAllergen(code: string) {
+    if (!form) return;
+    setForm({
+      ...form,
+      allergens: form.allergens.includes(code)
+        ? form.allergens.filter((c) => c !== code)
+        : [...form.allergens, code],
+    });
+  }
+
+  function toggleAdditive(code: string) {
+    if (!form) return;
+    setForm({
+      ...form,
+      additives: form.additives.includes(code)
+        ? form.additives.filter((c) => c !== code)
+        : [...form.additives, code],
+    });
+  }
+
  const allSelected =
    visible.length > 0 && visible.every((d) => selected.has(d.id));

@@ -147,7 +189,7 @@ export default function DishManager() {
      )}

      {form && (
-        <form onSubmit={save} className="card mb-4 space-y-3">
+        <form onSubmit={save} className="card mb-4 space-y-4">
          <h2 className="font-semibold">
            {form.id ? "Gericht bearbeiten" : "Neues Gericht"}
          </h2>
@@ -177,6 +219,18 @@ export default function DishManager() {
              required
            />
          </div>
+          <ChipPicker
+            label="Allergene"
+            items={allergens}
+            selected={form.allergens}
+            onToggle={toggleAllergen}
+          />
+          <ChipPicker
+            label="Zusatzstoffe"
+            items={additives}
+            selected={form.additives}
+            onToggle={toggleAdditive}
+          />
          <div className="flex gap-2">
            <button type="submit" className="btn btn-add">
              Speichern
@@ -230,40 +284,48 @@ export default function DishManager() {
            </div>
          )}
          <ul className="divide-y divide-gray-200 border border-gray-200 rounded-md bg-white">
-            {visible.map((dish) => (
-              <li key={dish.id} className="flex items-center gap-3 px-4 py-2">
-                <input
-                  type="checkbox"
-                  checked={selected.has(dish.id)}
-                  onChange={() => toggleOne(dish.id)}
-                  aria-label={`${dish.name} auswählen`}
-                />
-                <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>
-            ))}
+            {visible.map((dish) => {
+              const codes = dishCodes(dish);
+              return (
+                <li key={dish.id} className="flex items-center gap-3 px-4 py-2">
+                  <input
+                    type="checkbox"
+                    checked={selected.has(dish.id)}
+                    onChange={() => toggleOne(dish.id)}
+                    aria-label={`${dish.name} auswählen`}
+                  />
+                  <span className="mr-auto">
+                    <span className="font-semibold">{dish.name}</span>
+                    {codes && <sup className="dish-codes">{codes}</sup>}{" "}
+                    <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(".", ","),
+                        allergens: dish.allergens ?? [],
+                        additives: dish.additives ?? [],
+                      })
+                    }
+                  >
+                    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.
@@ -3,7 +3,16 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { createClient } from "@/lib/supabase/client";
-import { addDays, formatDateLong, formatPrice, WEEKDAYS } from "@/lib/menu";
+import {
+  addDays,
+  dishCodes,
+  entriesFor,
+  formatDateLong,
+  formatPrice,
+  mondayOf,
+  todayISO,
+  WEEKDAYS,
+} from "@/lib/menu";
 import type { Dish, MenuEntry, Section } from "@/lib/types";

 export default function WeekEditor({ monday }: { monday: string }) {
@@ -32,7 +41,9 @@ export default function WeekEditor({ monday }: { monday: string }) {
      supabase.from("dishes").select("*").order("name"),
      supabase
        .from("menu_entries")
-        .select("id, menu_date, section_key, position, dish:dishes(id, name, price)")
+        .select(
+          "id, menu_date, section_key, position, dish:dishes(id, name, price, allergens, additives)"
+        )
        .gte("menu_date", monday)
        .lte("menu_date", friday)
        .order("position")
@@ -79,9 +90,6 @@ export default function WeekEditor({ monday }: { monday: string }) {
    await load();
  }

-  const cell = (iso: string, sectionKey: string) =>
-    entries.filter((e) => e.menu_date === iso && e.section_key === sectionKey);
-
  return (
    <div>
      <div className="flex flex-wrap items-center gap-3 mb-4">
@@ -91,6 +99,12 @@ export default function WeekEditor({ monday }: { monday: string }) {
        <Link href={`/intern?woche=${addDays(monday, -7)}`} className="btn btn-add">
          ← Vorherige Woche
        </Link>
+        <Link
+          href={`/intern?woche=${mondayOf(todayISO())}`}
+          className="btn btn-primary"
+        >
+          Heute
+        </Link>
        <Link href={`/intern?woche=${addDays(monday, 7)}`} className="btn btn-add">
          Nächste Woche →
        </Link>
@@ -129,9 +143,12 @@ export default function WeekEditor({ monday }: { monday: string }) {
                    adding?.iso === d.iso && adding?.section === s.key;
                  return (
                    <td key={d.iso} className="cell">
-                      {cell(d.iso, s.key).map((e) => (
+                      {entriesFor(entries, d.iso, s.key).map((e) => {
+                        const codes = dishCodes(e.dish);
+                        return (
                        <div key={e.id} className="dish">
                          <span className="font-bold">{e.dish.name}</span>
+                          {codes && <sup className="dish-codes">{codes}</sup>}
                          {" – "}
                          {formatPrice(e.dish.price)}
                          <div className="mt-1">
@@ -144,7 +161,8 @@ export default function WeekEditor({ monday }: { monday: string }) {
                            </button>
                          </div>
                        </div>
-                      ))}
+                        );
+                      })}
                      {isAdding ? (
                        <div className="mt-2 space-y-1 text-left">
                          <select