Admin-Bereich: Benutzerverwaltung (Service-Role, serverseitig), Farben und Logo-Upload

2026-07-17 18:18:43 +02:00
parent 76f90d519c
commit 8a393dce1a
6 changed files with 636 additions and 0 deletions
@@ -0,0 +1,207 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+import { createClient } from "@/lib/supabase/client";
+import { COLOR_LABELS, DEFAULT_COLORS, logoUrl } from "@/lib/types";
+
+export default function DesignEditor() {
+  const supabase = useMemo(() => createClient(), []);
+  const router = useRouter();
+  const [colors, setColors] = useState<Record<string, string>>(DEFAULT_COLORS);
+  const [logoPath, setLogoPath] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [info, setInfo] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const load = useCallback(async () => {
+    const { data, error } = await supabase
+      .from("settings")
+      .select("colors, logo_path")
+      .eq("id", 1)
+      .maybeSingle();
+    if (error) {
+      setError(`Laden fehlgeschlagen: ${error.message}`);
+      return;
+    }
+    setColors({ ...DEFAULT_COLORS, ...(data?.colors ?? {}) });
+    setLogoPath(data?.logo_path ?? null);
+  }, [supabase]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  async function saveColors() {
+    setBusy(true);
+    setError(null);
+    setInfo(null);
+    const { error } = await supabase
+      .from("settings")
+      .update({ colors })
+      .eq("id", 1);
+    if (error) setError(`Speichern fehlgeschlagen: ${error.message}`);
+    else {
+      setInfo("Farben gespeichert.");
+      router.refresh();
+    }
+    setBusy(false);
+  }
+
+  async function resetColors() {
+    setColors(DEFAULT_COLORS);
+  }
+
+  async function uploadLogo(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    e.target.value = "";
+    if (!file) return;
+    if (!/^image\//.test(file.type)) {
+      setError("Bitte eine Bilddatei auswählen (PNG, JPG, SVG, WebP).");
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    setInfo(null);
+
+    const ext = file.name.split(".").pop()?.toLowerCase() ?? "png";
+    const path = `logo-${Date.now()}.${ext}`;
+    const { error: uploadError } = await supabase.storage
+      .from("branding")
+      .upload(path, file, { contentType: file.type });
+    if (uploadError) {
+      setError(`Upload fehlgeschlagen: ${uploadError.message}`);
+      setBusy(false);
+      return;
+    }
+
+    const oldPath = logoPath;
+    const { error: settingsError } = await supabase
+      .from("settings")
+      .update({ logo_path: path })
+      .eq("id", 1);
+    if (settingsError) {
+      setError(`Speichern fehlgeschlagen: ${settingsError.message}`);
+      setBusy(false);
+      return;
+    }
+    if (oldPath) {
+      await supabase.storage.from("branding").remove([oldPath]);
+    }
+    setLogoPath(path);
+    setInfo("Logo aktualisiert.");
+    router.refresh();
+    setBusy(false);
+  }
+
+  async function removeLogo() {
+    if (!logoPath) return;
+    if (!window.confirm("Logo wirklich entfernen?")) return;
+    setBusy(true);
+    setError(null);
+    const { error } = await supabase
+      .from("settings")
+      .update({ logo_path: null })
+      .eq("id", 1);
+    if (error) {
+      setError(`Speichern fehlgeschlagen: ${error.message}`);
+    } else {
+      await supabase.storage.from("branding").remove([logoPath]);
+      setLogoPath(null);
+      setInfo("Logo entfernt.");
+      router.refresh();
+    }
+    setBusy(false);
+  }
+
+  const currentLogo = logoUrl(logoPath);
+
+  return (
+    <div className="max-w-3xl space-y-6">
+      <h1 className="text-xl font-bold text-[var(--c-primary)]">Design</h1>
+
+      {error && (
+        <p className="text-sm text-[var(--c-del)]" role="alert">
+          {error}
+        </p>
+      )}
+      {info && <p className="text-sm text-green-700">{info}</p>}
+
+      <section className="card">
+        <h2 className="font-semibold mb-3">Logo</h2>
+        <p className="text-sm text-gray-600 mb-3">
+          Das Logo wird zentriert über der Speisekarte angezeigt.
+        </p>
+        {currentLogo ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={currentLogo}
+            alt="Aktuelles Logo"
+            className="h-20 object-contain mb-3 border border-gray-200 rounded p-2"
+          />
+        ) : (
+          <p className="text-sm text-gray-400 mb-3">Kein Logo hinterlegt.</p>
+        )}
+        <div className="flex gap-2 items-center">
+          <label className="btn btn-primary cursor-pointer">
+            Logo hochladen
+            <input
+              type="file"
+              accept="image/*"
+              className="hidden"
+              onChange={uploadLogo}
+              disabled={busy}
+            />
+          </label>
+          {currentLogo && (
+            <button
+              type="button"
+              className="btn btn-del"
+              onClick={removeLogo}
+              disabled={busy}
+            >
+              Logo entfernen
+            </button>
+          )}
+        </div>
+      </section>
+
+      <section className="card">
+        <h2 className="font-semibold mb-3">Farbgebung</h2>
+        <div className="grid gap-3 sm:grid-cols-2">
+          {Object.entries(COLOR_LABELS).map(([key, label]) => (
+            <label key={key} className="flex items-center gap-3 text-sm">
+              <input
+                type="color"
+                value={colors[key] ?? "#000000"}
+                onChange={(e) =>
+                  setColors({ ...colors, [key]: e.target.value })
+                }
+                className="h-9 w-14 cursor-pointer border border-gray-300 rounded"
+              />
+              {label}
+            </label>
+          ))}
+        </div>
+        <div className="flex gap-2 mt-4">
+          <button
+            type="button"
+            className="btn btn-add"
+            onClick={saveColors}
+            disabled={busy}
+          >
+            Farben speichern
+          </button>
+          <button
+            type="button"
+            className="btn btn-neutral"
+            onClick={resetColors}
+            disabled={busy}
+          >
+            Auf Standard zurücksetzen
+          </button>
+        </div>
+      </section>
+    </div>
+  );
+}