florian.wilde/Speisekarte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mehrsprachige Oberfläche + lokalisierte Gericht-/Bereichsnamen

Browse Source 
Alle Seiten und Komponenten (öffentliche Speisekarte, Login, Kantinen-
und Admin-Bereich, eigenes Konto) verwenden jetzt die Wörterbücher aus
lib/i18n statt fest codierter deutscher Texte. Gerichte/Bereiche/
Allergene/Zusatzstoffe zeigen den Namen zur aktuell gewählten Sprache;
Gerichte- und Kennzeichnungs-Formulare bekommen Englisch-/Polnisch-
Felder mit Übersetzen-Button (siehe vorherigen Commit). Datumsformat-
ierung (formatDateLong) nimmt jetzt ein locale-Argument statt fix
'de-DE'.
This commit is contained in:
florian.wilde
2026-07-18 02:08:03 +02:00
parent 30a02ba7b7
commit a6165de10c
14 changed files with 586 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/intern/kennzeichnung/page.tsx
+2 -10
View File
@@ -3,16 +3,8 @@ import CodeListManager from "@/components/CodeListManager";
export default function KennzeichnungPage() {
return (
<div className="grid gap-6 lg:grid-cols-2">
<CodeListManager
table="allergens"
title="Allergene"
codeLabel="Kürzel (z. B. A)"
/>
<CodeListManager
table="additives"
title="Zusatzstoffe"
codeLabel="Kürzel (z. B. 1)"
/>
<CodeListManager table="allergens" />
<CodeListManager table="additives" />
</div>
);
}
app/login/page.tsx
+25 -19
View File
@@ -4,20 +4,25 @@ import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { createClient } from "@/lib/supabase/client";
import { formatMessage } from "@/lib/i18n/shared";
import { useDict } from "@/components/i18n/LocaleProvider";
import LanguageSwitcher from "@/components/i18n/LanguageSwitcher";
import type { Dict } from "@/lib/i18n/shared";
function germanAuthError(message: string): string {
function authErrorMessage(dict: Dict, message: string): string {
if (/invalid login credentials/i.test(message))
return "E-Mail-Adresse oder Passwort ist falsch.";
return dict.login.errorInvalidCredentials;
if (/email not confirmed/i.test(message))
return "Die E-Mail-Adresse wurde noch nicht bestätigt.";
return dict.login.errorEmailNotConfirmed;
if (/cancelled|aborted|NotAllowedError/i.test(message))
return "Passkey-Anmeldung wurde abgebrochen.";
return `Anmeldung fehlgeschlagen: ${message}`;
return dict.login.errorPasskeyCancelled;
return formatMessage(dict.login.errorGeneric, { message });
}
export default function LoginPage() {
const router = useRouter();
const supabase = createClient();
const dict = useDict();
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState<string | null>(null);
@@ -42,7 +47,7 @@ export default function LoginPage() {
password,
});
if (error || !data.user) {
setError(germanAuthError(error?.message ?? "Unbekannter Fehler"));
setError(authErrorMessage(dict, error?.message ?? "Unbekannter Fehler"));
setBusy(false);
return;
}
@@ -54,9 +59,7 @@ export default function LoginPage() {
.single();
if (profile?.password_auth_enabled === false) {
await supabase.auth.signOut();
setError(
"Die Anmeldung mit Passwort ist für dieses Konto deaktiviert. Bitte mit Passkey anmelden."
);
setError(dict.login.errorPasswordDisabled);
setBusy(false);
return;
}
@@ -71,14 +74,14 @@ export default function LoginPage() {
const { data, error } = await supabase.auth.signInWithPasskey();
if (error || !data?.user) {
setError(
germanAuthError(error?.message ?? "Passkey-Anmeldung fehlgeschlagen")
authErrorMessage(dict, error?.message ?? "Passkey-Anmeldung fehlgeschlagen")
);
setBusy(false);
return;
}
await redirectByRole(data.user.id);
} catch (err) {
setError(germanAuthError(err instanceof Error ? err.message : String(err)));
setError(authErrorMessage(dict, err instanceof Error ? err.message : String(err)));
setBusy(false);
}
}
@@ -86,13 +89,16 @@ export default function LoginPage() {
return (
<div className="flex-1 flex items-center justify-center p-4">
<div className="card w-full max-w-sm">
<h1 className="text-xl font-bold text-[var(--c-primary)] mb-4">
Anmeldung
<div className="flex justify-between items-center mb-4">
<h1 className="text-xl font-bold text-[var(--c-primary)]">
{dict.login.title}
</h1>
<LanguageSwitcher variant="light" />
</div>
<form onSubmit={signInWithPassword} className="space-y-3">
<div>
<label className="label" htmlFor="email">
E-Mail-Adresse
{dict.common.email}
</label>
<input
id="email"
@@ -106,7 +112,7 @@ export default function LoginPage() {
</div>
<div>
<label className="label" htmlFor="password">
Passwort
{dict.common.password}
</label>
<input
id="password"
@@ -120,13 +126,13 @@ export default function LoginPage() {
</div>
{error && <p className="text-sm text-[var(--c-del)]">{error}</p>}
<button type="submit" className="btn btn-primary w-full" disabled={busy}>
Anmelden
{dict.login.submit}
</button>
</form>
<div className="my-4 flex items-center gap-3 text-xs text-gray-400">
<span className="h-px flex-1 bg-gray-200" />
oder
{dict.login.or}
<span className="h-px flex-1 bg-gray-200" />
</div>
@@ -136,12 +142,12 @@ export default function LoginPage() {
className="btn btn-neutral w-full"
disabled={busy}
>
Mit Passkey anmelden
{dict.login.passkeyButton}
</button>
<p className="mt-4 text-center text-sm">
<Link href="/" className="text-gray-500 hover:text-[var(--c-primary)]">
← Zur Speisekarte
{dict.login.backToMenu}
</Link>
</p>
</div>
app/page.tsx
+34 -20
View File
@@ -8,11 +8,12 @@ import {
formatPrice,
mondayOf,
todayISO,
WEEKDAYS,
} from "@/lib/menu";
import { logoUrl, SITE_TITLE } from "@/lib/types";
import { getDictionary, getLocale } from "@/lib/i18n";
import { localized, logoUrl, SITE_TITLE } from "@/lib/types";
import type { CodeItem, MenuEntry, Section } from "@/lib/types";
import PublicMobileMenu from "@/components/PublicMobileMenu";
import LanguageSwitcher from "@/components/i18n/LanguageSwitcher";
export default async function Home({
searchParams,
@@ -23,7 +24,9 @@ export default async function Home({
const monday = mondayOf(woche);
const friday = addDays(monday, 4);
const currentWeek = mondayOf(todayISO());
const days = WEEKDAYS.map((weekday, i) => ({
const locale = await getLocale();
const dict = getDictionary(locale);
const days = dict.weekdays.long.map((weekday, i) => ({
weekday,
iso: addDays(monday, i),
}));
@@ -35,7 +38,7 @@ export default async function Home({
supabase
.from("menu_entries")
.select(
"id, menu_date, section_key, position, dish:dishes(id, name, price, allergens, additives)"
"id, menu_date, section_key, position, dish:dishes(id, name, name_en, name_pl, price, allergens, additives)"
)
.gte("menu_date", monday)
.lte("menu_date", friday)
@@ -54,16 +57,18 @@ export default async function Home({
return (
<div className="flex-1 px-4 py-6 max-w-[1600px] mx-auto w-full">
{/* Kopfbereich: Login-Link eigene Zeile, Logo zentriert darunter.
Kein absolutes Positionieren mehr – ein breites Logo (z. B. ein
Banner-Format) konnte sonst mit dem Login-Link kollidieren. */}
{/* Kopfbereich: Sprache + Login-Link eigene Zeile, Logo zentriert
darunter. Kein absolutes Positionieren mehr – ein breites Logo
(z. B. ein Banner-Format) konnte sonst mit dem Login-Link
kollidieren. */}
<header className="mb-6">
<div className="flex justify-end mb-2">
<div className="flex justify-end items-center gap-3 mb-2">
<LanguageSwitcher variant="light" />
<Link
href="/login"
className="text-sm text-gray-500 hover:text-[var(--c-primary)]"
>
Anmelden
{dict.common.login}
</Link>
</div>
<div className="flex justify-center">
@@ -87,15 +92,18 @@ export default async function Home({
{/* Ab "sm": klassische Wochentabelle */}
<div className="hidden sm:block">
<div className="flex gap-3 mb-4">
<div className="flex flex-wrap items-center gap-3 mb-4">
<Link href={`/?woche=${addDays(monday, -7)}`} className="btn btn-add">
← Vorherige Woche
{dict.publicMenu.prevWeek}
</Link>
<Link href={`/?woche=${currentWeek}`} className="btn btn-primary">
Heute
{dict.publicMenu.today}
</Link>
<Link href={`/?woche=${addDays(monday, 7)}`} className="btn btn-add">
Nächste Woche →
{dict.publicMenu.nextWeek}
</Link>
<Link href="/vorschlag" className="btn btn-neutral ml-auto">
{dict.publicMenu.suggestDish}
</Link>
</div>
@@ -108,7 +116,7 @@ export default async function Home({
<th key={d.iso} className="day-head">
<span className="font-bold">{d.weekday}</span>
<br />
{formatDateLong(d.iso)}
{formatDateLong(d.iso, dict.dateLocale)}
</th>
))}
</tr>
@@ -117,7 +125,7 @@ export default async function Home({
{sections.map((s) => (
<tr key={s.key}>
<th className="section-head">
<div>{s.label}</div>
<div>{localized(s, locale)}</div>
<div className="time">{s.time_range}</div>
</th>
{days.map((d) => (
@@ -126,7 +134,9 @@ export default async function Home({
const codes = dishCodes(e.dish);
return (
<div key={e.id} className="dish">
<span className="font-bold">{e.dish.name}</span>
<span className="font-bold">
{localized(e.dish, locale)}
</span>
{codes && <sup className="dish-codes">{codes}</sup>}
{" – "}
{formatPrice(e.dish.price)}
@@ -145,23 +155,27 @@ export default async function Home({
{/* Allergene & Zusatzstoffe: Legende zu den Kürzeln bei den Gerichten */}
<section className="mt-8 grid gap-6 sm:grid-cols-2 text-sm text-gray-700">
<div>
<h2 className="font-bold text-[var(--c-primary)] mb-2">Allergene</h2>
<h2 className="font-bold text-[var(--c-primary)] mb-2">
{dict.publicMenu.allergens}
</h2>
<ul className="space-y-0.5">
{allergens.map((a) => (
<li key={a.code}>
<span className="font-semibold">{a.code}</span> – {a.name}
<span className="font-semibold">{a.code}</span> –{" "}
{localized(a, locale)}
</li>
))}
</ul>
</div>
<div>
<h2 className="font-bold text-[var(--c-primary)] mb-2">
Zusatzstoffe
{dict.publicMenu.additives}
</h2>
<ul className="space-y-0.5">
{additives.map((a) => (
<li key={a.code}>
<span className="font-semibold">{a.code}</span> – {a.name}
<span className="font-semibold">{a.code}</span> –{" "}
{localized(a, locale)}
</li>
))}
</ul>
components/AccountManager.tsx
+50 -54
View File
@@ -3,20 +3,17 @@
import { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { createClient } from "@/lib/supabase/client";
import { formatMessage } from "@/lib/i18n/shared";
import type { Dict } from "@/lib/i18n/shared";
import PasskeyManager from "@/components/PasskeyManager";
import { useDict } from "@/components/i18n/LocaleProvider";
const ROLE_LABELS: Record<string, string> = {
admin: "Administrator",
staff: "Kantinenmitarbeiter",
};
function germanAuthError(message: string): string {
function authErrorMessage(dict: Dict, message: string): string {
if (/invalid login credentials/i.test(message))
return "Das aktuelle Passwort ist falsch.";
if (/should be at least/i.test(message))
return "Das neue Passwort ist zu kurz (mindestens 8 Zeichen).";
return dict.account.wrongCurrentPassword;
if (/should be at least/i.test(message)) return dict.account.passwordTooShort;
if (/email.*already|already.*registered/i.test(message))
return "Diese E-Mail-Adresse wird bereits verwendet.";
return dict.account.emailAlreadyUsed;
return message;
}
@@ -33,6 +30,8 @@ export default function AccountManager({
}) {
const supabase = useMemo(() => createClient(), []);
const router = useRouter();
const dict = useDict();
const roleLabel = role === "admin" ? dict.common.roleAdmin : dict.common.roleStaff;
// Persönliche Daten
const [fullName, setFullName] = useState(initialFullName);
@@ -75,7 +74,7 @@ export default function AccountManager({
setNameInfo(null);
const name = fullName.trim();
if (!name) {
setNameError("Bitte einen Namen angeben.");
setNameError(dict.account.nameRequired);
return;
}
setNameBusy(true);
@@ -83,9 +82,10 @@ export default function AccountManager({
.from("profiles")
.update({ full_name: name })
.eq("id", (await supabase.auth.getUser()).data.user?.id ?? "");
if (error) setNameError(`Speichern fehlgeschlagen: ${error.message}`);
if (error)
setNameError(formatMessage(dict.account.saveError, { message: error.message }));
else {
setNameInfo("Name gespeichert.");
setNameInfo(dict.account.nameSaved);
router.refresh();
}
setNameBusy(false);
@@ -100,11 +100,13 @@ export default function AccountManager({
setEmailBusy(true);
const { error } = await supabase.auth.updateUser({ email: next });
if (error) {
setEmailError(`Ändern fehlgeschlagen: ${germanAuthError(error.message)}`);
} else {
setEmailInfo(
"Bestätigungs-E-Mails wurden verschickt. Die neue Adresse wird erst nach Bestätigung des Links aktiv."
setEmailError(
formatMessage(dict.account.changeError, {
message: authErrorMessage(dict, error.message),
})
);
} else {
setEmailInfo(dict.account.emailSent);
}
setEmailBusy(false);
}
@@ -114,11 +116,11 @@ export default function AccountManager({
setPwError(null);
setPwInfo(null);
if (newPassword.length < 8) {
setPwError("Das neue Passwort muss mindestens 8 Zeichen lang sein.");
setPwError(dict.account.passwordTooShort);
return;
}
if (newPassword !== newPasswordRepeat) {
setPwError("Die Passwörter stimmen nicht überein.");
setPwError(dict.account.passwordMismatch);
return;
}
setPwBusy(true);
@@ -129,16 +131,20 @@ export default function AccountManager({
password: currentPassword,
});
if (verifyError) {
setPwError(germanAuthError(verifyError.message));
setPwError(authErrorMessage(dict, verifyError.message));
setPwBusy(false);
return;
}
const { error } = await supabase.auth.updateUser({ password: newPassword });
if (error) {
setPwError(`Ändern fehlgeschlagen: ${germanAuthError(error.message)}`);
setPwError(
formatMessage(dict.account.changeError, {
message: authErrorMessage(dict, error.message),
})
);
} else {
setPwInfo("Passwort geändert.");
setPwInfo(dict.account.passwordChanged);
setCurrentPassword("");
setNewPassword("");
setNewPasswordRepeat("");
@@ -151,18 +157,10 @@ export default function AccountManager({
setAuthInfo(null);
const next = !passwordAuthEnabled;
if (!next && (passkeyCount ?? 0) === 0) {
setAuthError(
"Ohne registrierten Passkey kannst du die Passwort-Anmeldung nicht deaktivieren – sonst wärst du ausgesperrt. Registriere zuerst einen Passkey weiter unten."
);
setAuthError(dict.account.passwordAuthNeedsPasskey);
return;
}
if (
!next &&
!window.confirm(
"Anmeldung mit E-Mail und Passwort wirklich deaktivieren? Du kannst dich danach nur noch per Passkey anmelden."
)
)
return;
if (!next && !window.confirm(dict.account.confirmDisablePasswordAuth)) return;
setAuthBusy(true);
const { error } = await supabase
@@ -170,11 +168,11 @@ export default function AccountManager({
.update({ password_auth_enabled: next })
.eq("id", (await supabase.auth.getUser()).data.user?.id ?? "");
if (error) {
setAuthError(`Speichern fehlgeschlagen: ${error.message}`);
setAuthError(formatMessage(dict.account.saveError, { message: error.message }));
} else {
setPasswordAuthEnabled(next);
setAuthInfo(
next ? "Passwort-Anmeldung aktiviert." : "Passwort-Anmeldung deaktiviert."
next ? dict.account.passwordAuthEnabled : dict.account.passwordAuthDisabled
);
}
setAuthBusy(false);
@@ -183,18 +181,20 @@ export default function AccountManager({
return (
<div className="max-w-3xl space-y-6">
<div>
<h1 className="text-xl font-bold text-[var(--c-primary)]">Mein Konto</h1>
<h1 className="text-xl font-bold text-[var(--c-primary)]">
{dict.account.title}
</h1>
<p className="text-sm text-gray-500">
{initialEmail} – {ROLE_LABELS[role] ?? role}
{initialEmail} – {roleLabel}
</p>
</div>
<section className="card">
<h2 className="font-semibold mb-3">Persönliche Daten</h2>
<h2 className="font-semibold mb-3">{dict.account.personalTitle}</h2>
<form onSubmit={saveName} className="space-y-3">
<div className="max-w-80">
<label className="label" htmlFor="account-name">
Name
{dict.common.name}
</label>
<input
id="account-name"
@@ -211,17 +211,17 @@ export default function AccountManager({
)}
{nameInfo && <p className="text-sm text-green-700">{nameInfo}</p>}
<button type="submit" className="btn btn-add" disabled={nameBusy}>
Name speichern
{dict.account.saveName}
</button>
</form>
</section>
<section className="card">
<h2 className="font-semibold mb-3">E-Mail-Adresse</h2>
<h2 className="font-semibold mb-3">{dict.account.emailTitle}</h2>
<form onSubmit={saveEmail} className="space-y-3">
<div className="max-w-80">
<label className="label" htmlFor="account-email">
E-Mail-Adresse
{dict.common.email}
</label>
<input
id="account-email"
@@ -243,17 +243,17 @@ export default function AccountManager({
className="btn btn-add"
disabled={emailBusy || email.trim() === initialEmail}
>
E-Mail-Adresse ändern
{dict.account.changeEmail}
</button>
</form>
</section>
<section className="card">
<h2 className="font-semibold mb-3">Passwort ändern</h2>
<h2 className="font-semibold mb-3">{dict.account.passwordTitle}</h2>
<form onSubmit={savePassword} className="space-y-3">
<div className="max-w-80">
<label className="label" htmlFor="account-current-password">
Aktuelles Passwort (zur Verifizierung)
{dict.account.currentPassword}
</label>
<input
id="account-current-password"
@@ -267,7 +267,7 @@ export default function AccountManager({
</div>
<div className="max-w-80">
<label className="label" htmlFor="account-new-password">
Neues Passwort
{dict.account.newPassword}
</label>
<input
id="account-new-password"
@@ -282,7 +282,7 @@ export default function AccountManager({
</div>
<div className="max-w-80">
<label className="label" htmlFor="account-new-password-repeat">
Neues Passwort wiederholen
{dict.account.newPasswordRepeat}
</label>
<input
id="account-new-password-repeat"
@@ -302,18 +302,14 @@ export default function AccountManager({
)}
{pwInfo && <p className="text-sm text-green-700">{pwInfo}</p>}
<button type="submit" className="btn btn-add" disabled={pwBusy}>
Passwort ändern
{dict.account.changePassword}
</button>
</form>
</section>
<section className="card">
<h2 className="font-semibold mb-1">Anmeldung mit Passwort</h2>
<p className="text-sm text-gray-600 mb-3">
Du kannst die Anmeldung mit E-Mail und Passwort für dein Konto
deaktivieren und dich künftig ausschließlich per Passkey anmelden.
Dafür muss mindestens ein Passkey registriert sein.
</p>
<h2 className="font-semibold mb-1">{dict.account.passwordAuthTitle}</h2>
<p className="text-sm text-gray-600 mb-3">{dict.account.passwordAuthHint}</p>
{authError && (
<p className="mb-2 text-sm text-[var(--c-del)]" role="alert">
{authError}
@@ -327,7 +323,7 @@ export default function AccountManager({
onChange={togglePasswordAuth}
disabled={authBusy || passkeyCount === null}
/>
Anmeldung mit E-Mail und Passwort erlaubt
{dict.account.passwordAuthCheckbox}
</label>
</section>
components/AppHeader.tsx
+25 -21
View File
@@ -8,17 +8,8 @@
import Link from "next/link";
import { usePathname } from "next/navigation";
import type { Role } from "@/lib/types";
const MENU_LINKS = [
{ href: "/intern", label: "Wochenplan" },
{ href: "/intern/gerichte", label: "Gerichte" },
{ href: "/intern/kennzeichnung", label: "Allergene & Zusatzstoffe" },
];
const ADMIN_LINKS = [
{ href: "/admin", label: "Benutzer" },
{ href: "/admin/design", label: "Design" },
];
import { useDict } from "@/components/i18n/LocaleProvider";
import LanguageSwitcher from "@/components/i18n/LanguageSwitcher";
export default function AppHeader({
role,
@@ -28,6 +19,18 @@ export default function AppHeader({
displayName: string;
}) {
const pathname = usePathname();
const dict = useDict();
const menuLinks = [
{ href: "/intern", label: dict.header.weekPlan },
{ href: "/intern/gerichte", label: dict.header.dishes },
{ href: "/intern/kennzeichnung", label: dict.header.labels },
{ href: "/intern/vorschlaege", label: dict.header.suggestions },
];
const adminLinks = [
{ href: "/admin", label: dict.header.users },
{ href: "/admin/design", label: dict.header.design },
];
const linkClass = (href: string) =>
`rounded px-2 py-0.5 transition-colors hover:bg-white/10 ${
@@ -37,16 +40,16 @@ export default function AppHeader({
return (
<header className="bg-[var(--c-primary-dark)] text-white">
<div className="max-w-[1600px] mx-auto w-full px-4 py-3 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm">
<span className="font-bold text-base">Kantine</span>
<span className="font-bold text-base">{dict.header.canteen}</span>
<nav
className="flex flex-wrap items-center gap-x-1 gap-y-1"
aria-label="Speiseplan"
aria-label={dict.header.menuGroup}
>
<span className="mr-1 text-xs uppercase tracking-wider text-white/50">
Speiseplan
{dict.header.menuGroup}
</span>
{MENU_LINKS.map((l) => (
{menuLinks.map((l) => (
<Link key={l.href} href={l.href} className={linkClass(l.href)}>
{l.label}
</Link>
@@ -56,12 +59,12 @@ export default function AppHeader({
{role === "admin" && (
<nav
className="flex flex-wrap items-center gap-x-1 gap-y-1"
aria-label="Verwaltung"
aria-label={dict.header.adminGroup}
>
<span className="mr-1 text-xs uppercase tracking-wider text-white/50">
Verwaltung
{dict.header.adminGroup}
</span>
{ADMIN_LINKS.map((l) => (
{adminLinks.map((l) => (
<Link key={l.href} href={l.href} className={linkClass(l.href)}>
{l.label}
</Link>
@@ -73,13 +76,14 @@ export default function AppHeader({
href="/"
className="rounded px-2 py-0.5 text-white/70 hover:bg-white/10"
>
Speisekarte ansehen
{dict.header.viewMenu}
</Link>
<div className="ml-auto flex items-center gap-3">
<LanguageSwitcher />
<Link
href="/konto"
title="Mein Konto"
title={dict.header.myAccount}
className={`rounded px-2 py-0.5 hover:bg-white/10 ${
pathname === "/konto"
? "bg-white/20 font-semibold"
@@ -90,7 +94,7 @@ export default function AppHeader({
</Link>
<form action="/logout" method="post">
<button type="submit" className="btn btn-del">
Abmelden
{dict.common.logout}
</button>
</form>
</div>
components/ChipPicker.tsx
+9 -3
View File
@@ -1,6 +1,8 @@
"use client";
import type { CodeItem } from "@/lib/types";
import { localized } from "@/lib/types";
import { useDict, useLocale } from "@/components/i18n/LocaleProvider";
export default function ChipPicker({
items,
@@ -13,15 +15,19 @@ export default function ChipPicker({
onToggle: (code: string) => void;
label: string;
}) {
const dict = useDict();
const locale = useLocale();
return (
<div>
<label className="label">{label}</label>
{items.length === 0 ? (
<p className="text-sm text-gray-400">Keine Einträge vorhanden.</p>
<p className="text-sm text-gray-400">{dict.codeList.empty}</p>
) : (
<div className="flex flex-wrap gap-1.5">
{items.map((item) => {
const active = selected.includes(item.code);
const name = localized(item, locale);
return (
<button
key={item.code}
@@ -29,9 +35,9 @@ export default function ChipPicker({
onClick={() => onToggle(item.code)}
className={`chip ${active ? "chip-active" : ""}`}
aria-pressed={active}
title={item.name}
title={name}
>
<span className="font-semibold">{item.code}</span> {item.name}
<span className="font-semibold">{item.code}</span> {name}
</button>
);
})}
components/CodeListManager.tsx
+125 -24
View File
@@ -5,31 +5,44 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import { createClient } from "@/lib/supabase/client";
import { formatMessage } from "@/lib/i18n/shared";
import { localized } from "@/lib/types";
import type { CodeItem } from "@/lib/types";
import { useDict, useLocale } from "@/components/i18n/LocaleProvider";
export default function CodeListManager({
table,
title,
codeLabel,
}: {
table: "allergens" | "additives";
title: string;
codeLabel: string;
}) {
const supabase = useMemo(() => createClient(), []);
const dict = useDict();
const locale = useLocale();
const title =
table === "allergens" ? dict.codeList.allergensTitle : dict.codeList.additivesTitle;
const codeLabel =
table === "allergens"
? dict.codeList.allergenCodeLabel
: dict.codeList.additiveCodeLabel;
const [items, setItems] = useState<CodeItem[]>([]);
const [editing, setEditing] = useState<{
original: string | null; // code vor der Bearbeitung, null = neu
code: string;
name: string;
nameEn: string;
namePl: string;
} | null>(null);
const [error, setError] = useState<string | null>(null);
const [translateState, setTranslateState] = useState<
"idle" | "busy" | "done" | "unavailable"
>("idle");
const load = useCallback(async () => {
const { data, error } = await supabase.from(table).select("*").order("sort");
if (error) setError(`Laden fehlgeschlagen: ${error.message}`);
if (error) setError(formatMessage(dict.codeList.loadError, { message: error.message }));
else setItems(data as CodeItem[]);
}, [supabase, table]);
}, [supabase, table, dict]);
useEffect(() => {
load();
@@ -42,24 +55,30 @@ export default function CodeListManager({
const code = editing.code.trim();
const name = editing.name.trim();
if (!code || !name) return;
const payload = {
code,
name,
name_en: editing.nameEn.trim() || null,
name_pl: editing.namePl.trim() || null,
};
let dbError;
if (editing.original) {
({ error: dbError } = await supabase
.from(table)
.update({ code, name })
.update(payload)
.eq("code", editing.original));
} else {
const maxSort = items.reduce((m, i) => Math.max(m, i.sort), 0);
({ error: dbError } = await supabase
.from(table)
.insert({ code, name, sort: maxSort + 1 }));
.insert({ ...payload, sort: maxSort + 1 }));
}
if (dbError) {
setError(
/duplicate key/i.test(dbError.message)
? `Das Kürzel „${code}“ existiert bereits.`
: `Speichern fehlgeschlagen: ${dbError.message}`
? formatMessage(dict.codeList.duplicateCode, { code })
: formatMessage(dict.codeList.saveError, { message: dbError.message })
);
return;
}
@@ -68,13 +87,48 @@ export default function CodeListManager({
}
async function remove(item: CodeItem) {
if (!window.confirm(`„${item.code} – ${item.name}“ wirklich löschen?`))
if (
!window.confirm(
formatMessage(dict.codeList.confirmDelete, { code: item.code, name: item.name })
)
)
return;
const { error } = await supabase.from(table).delete().eq("code", item.code);
if (error) setError(`Löschen fehlgeschlagen: ${error.message}`);
if (error)
setError(formatMessage(dict.codeList.deleteError, { message: error.message }));
await load();
}
async function autoTranslate() {
if (!editing || !editing.name.trim()) return;
setTranslateState("busy");
setError(null);
try {
const res = await fetch("/api/translate", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
table,
id: editing.original,
text: editing.name.trim(),
}),
});
const data = await res.json();
if (!res.ok) throw new Error(data?.error ?? `Fehler (${res.status})`);
if (data.configured === false) {
setTranslateState("unavailable");
return;
}
setEditing((prev) =>
prev ? { ...prev, nameEn: data.en ?? prev.nameEn, namePl: data.pl ?? prev.namePl } : prev
);
setTranslateState("done");
} catch (err) {
setError(err instanceof Error ? err.message : String(err));
setTranslateState("idle");
}
}
return (
<section className="card">
<div className="flex items-center gap-3 mb-3">
@@ -84,9 +138,12 @@ export default function CodeListManager({
<button
type="button"
className="btn btn-add"
onClick={() => setEditing({ original: null, code: "", name: "" })}
onClick={() => {
setEditing({ original: null, code: "", name: "", nameEn: "", namePl: "" });
setTranslateState("idle");
}}
>
Hinzufügen
{dict.common.add}
</button>
</div>
@@ -108,7 +165,7 @@ export default function CodeListManager({
/>
</div>
<div>
<label className="label">Bezeichnung</label>
<label className="label">{dict.codeList.nameLabel}</label>
<input
className="input"
value={editing.name}
@@ -116,16 +173,56 @@ export default function CodeListManager({
required
/>
</div>
<div className="grid gap-2 sm:grid-cols-2">
<div>
<label className="label">{dict.dishManager.nameEnLabel}</label>
<input
className="input"
value={editing.nameEn}
onChange={(e) => setEditing({ ...editing, nameEn: e.target.value })}
/>
</div>
<div>
<label className="label">{dict.dishManager.namePlLabel}</label>
<input
className="input"
value={editing.namePl}
onChange={(e) => setEditing({ ...editing, namePl: e.target.value })}
/>
</div>
</div>
<div>
<button
type="button"
className="btn btn-neutral"
onClick={autoTranslate}
disabled={translateState === "busy" || !editing.name.trim()}
>
{translateState === "busy"
? dict.dishManager.translating
: dict.dishManager.autoTranslate}
</button>
{translateState === "done" && (
<span className="ml-2 text-sm text-green-700">
{dict.dishManager.translated}
</span>
)}
{translateState === "unavailable" && (
<span className="ml-2 text-sm text-gray-500">
{dict.dishManager.translateUnavailable}
</span>
)}
</div>
<div className="flex gap-2">
<button type="submit" className="btn btn-add">
Speichern
{dict.common.save}
</button>
<button
type="button"
className="btn btn-neutral"
onClick={() => setEditing(null)}
>
Abbrechen
{dict.common.cancel}
</button>
</div>
</form>
@@ -135,32 +232,36 @@ export default function CodeListManager({
{items.map((item) => (
<li key={item.code} className="flex items-center gap-2 py-1.5 text-sm">
<span className="mr-auto">
<span className="font-semibold">{item.code}</span> – {item.name}
<span className="font-semibold">{item.code}</span> –{" "}
{localized(item, locale)}
</span>
<button
type="button"
className="btn btn-primary"
onClick={() =>
onClick={() => {
setEditing({
original: item.code,
code: item.code,
name: item.name,
})
}
nameEn: item.name_en ?? "",
namePl: item.name_pl ?? "",
});
setTranslateState("idle");
}}
>
Bearbeiten
{dict.common.edit}
</button>
<button
type="button"
className="btn btn-del"
onClick={() => remove(item)}
>
Löschen
{dict.common.delete}
</button>
</li>
))}
{items.length === 0 && (
<li className="py-2 text-gray-500 text-sm">Keine Einträge.</li>
<li className="py-2 text-gray-500 text-sm">{dict.codeList.empty}</li>
)}
</ul>
</section>
components/DesignEditor.tsx
+47 -36
View File
@@ -3,7 +3,9 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { createClient } from "@/lib/supabase/client";
import { COLOR_LABELS, DEFAULT_COLORS, faviconUrl, logoUrl } from "@/lib/types";
import { formatMessage } from "@/lib/i18n/shared";
import { DEFAULT_COLORS, faviconUrl, logoUrl } from "@/lib/types";
import { useDict } from "@/components/i18n/LocaleProvider";
type AssetKind = "logo" | "favicon";
@@ -15,6 +17,17 @@ const ASSET_COLUMN: Record<AssetKind, "logo_path" | "favicon_path"> = {
export default function DesignEditor() {
const supabase = useMemo(() => createClient(), []);
const router = useRouter();
const dict = useDict();
const colorLabels: Record<string, string> = {
primary: dict.designEditor.colorPrimary,
primaryDark: dict.designEditor.colorPrimaryDark,
accent: dict.designEditor.colorAccent,
headerText: dict.designEditor.colorHeaderText,
rowBg: dict.designEditor.colorRowBg,
rowBgAlt: dict.designEditor.colorRowBgAlt,
addBtn: dict.designEditor.colorAddBtn,
deleteBtn: dict.designEditor.colorDeleteBtn,
};
const [colors, setColors] = useState<Record<string, string>>(DEFAULT_COLORS);
const [logoPath, setLogoPath] = useState<string | null>(null);
const [faviconPath, setFaviconPath] = useState<string | null>(null);
@@ -29,13 +42,13 @@ export default function DesignEditor() {
.eq("id", 1)
.maybeSingle();
if (error) {
setError(`Laden fehlgeschlagen: ${error.message}`);
setError(formatMessage(dict.designEditor.loadError, { message: error.message }));
return;
}
setColors({ ...DEFAULT_COLORS, ...(data?.colors ?? {}) });
setLogoPath(data?.logo_path ?? null);
setFaviconPath(data?.favicon_path ?? null);
}, [supabase]);
}, [supabase, dict]);
useEffect(() => {
load();
@@ -49,9 +62,10 @@ export default function DesignEditor() {
.from("settings")
.update({ colors })
.eq("id", 1);
if (error) setError(`Speichern fehlgeschlagen: ${error.message}`);
if (error)
setError(formatMessage(dict.designEditor.saveError, { message: error.message }));
else {
setInfo("Farben gespeichert.");
setInfo(dict.designEditor.colorsSaved);
router.refresh();
}
setBusy(false);
@@ -66,7 +80,7 @@ export default function DesignEditor() {
e.target.value = "";
if (!file) return;
if (!/^image\//.test(file.type)) {
setError("Bitte eine Bilddatei auswählen (PNG, JPG, SVG, WebP, ICO).");
setError(dict.designEditor.invalidImage);
return;
}
setBusy(true);
@@ -80,7 +94,7 @@ export default function DesignEditor() {
.from("branding")
.upload(path, file, { contentType: file.type });
if (uploadError) {
setError(`Upload fehlgeschlagen: ${uploadError.message}`);
setError(formatMessage(dict.designEditor.uploadError, { message: uploadError.message }));
setBusy(false);
return;
}
@@ -90,7 +104,7 @@ export default function DesignEditor() {
.update({ [ASSET_COLUMN[kind]]: path })
.eq("id", 1);
if (settingsError) {
setError(`Speichern fehlgeschlagen: ${settingsError.message}`);
setError(formatMessage(dict.designEditor.saveError, { message: settingsError.message }));
setBusy(false);
return;
}
@@ -98,7 +112,7 @@ export default function DesignEditor() {
if (kind === "logo") setLogoPath(path);
else setFaviconPath(path);
setInfo(kind === "logo" ? "Logo aktualisiert." : "Favicon aktualisiert.");
setInfo(kind === "logo" ? dict.designEditor.logoUpdated : dict.designEditor.faviconUpdated);
router.refresh();
setBusy(false);
}
@@ -108,7 +122,9 @@ export default function DesignEditor() {
if (!path) return;
if (
!window.confirm(
`${kind === "logo" ? "Logo" : "Favicon"} wirklich entfernen?`
kind === "logo"
? dict.designEditor.confirmRemoveLogo
: dict.designEditor.confirmRemoveFavicon
)
)
return;
@@ -119,12 +135,12 @@ export default function DesignEditor() {
.update({ [ASSET_COLUMN[kind]]: null })
.eq("id", 1);
if (error) {
setError(`Speichern fehlgeschlagen: ${error.message}`);
setError(formatMessage(dict.designEditor.saveError, { message: error.message }));
} else {
await supabase.storage.from("branding").remove([path]);
if (kind === "logo") setLogoPath(null);
else setFaviconPath(null);
setInfo(kind === "logo" ? "Logo entfernt." : "Favicon entfernt.");
setInfo(kind === "logo" ? dict.designEditor.logoRemoved : dict.designEditor.faviconRemoved);
router.refresh();
}
setBusy(false);
@@ -135,7 +151,9 @@ export default function DesignEditor() {
return (
<div className="max-w-3xl space-y-6">
<h1 className="text-xl font-bold text-[var(--c-primary)]">Design</h1>
<h1 className="text-xl font-bold text-[var(--c-primary)]">
{dict.designEditor.title}
</h1>
{error && (
<p className="text-sm text-[var(--c-del)]" role="alert">
@@ -145,23 +163,21 @@ export default function DesignEditor() {
{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>
<h2 className="font-semibold mb-3">{dict.designEditor.logoTitle}</h2>
<p className="text-sm text-gray-600 mb-3">{dict.designEditor.logoHint}</p>
{currentLogo ? (
// eslint-disable-next-line @next/next/no-img-element
<img
src={currentLogo}
alt="Aktuelles Logo"
alt="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>
<p className="text-sm text-gray-400 mb-3">{dict.designEditor.logoNone}</p>
)}
<div className="flex gap-2 items-center">
<label className="btn btn-primary cursor-pointer">
Logo hochladen
{dict.designEditor.logoUpload}
<input
type="file"
accept="image/*"
@@ -177,33 +193,28 @@ export default function DesignEditor() {
onClick={() => removeAsset("logo")}
disabled={busy}
>
Logo entfernen
{dict.designEditor.logoRemove}
</button>
)}
</div>
</section>
<section className="card">
<h2 className="font-semibold mb-3">Favicon</h2>
<p className="text-sm text-gray-600 mb-3">
Wird als Icon im Browser-Tab angezeigt. Ohne eigenes Favicon gilt
das Standard-Icon der Anwendung.
</p>
<h2 className="font-semibold mb-3">{dict.designEditor.faviconTitle}</h2>
<p className="text-sm text-gray-600 mb-3">{dict.designEditor.faviconHint}</p>
{currentFavicon ? (
// eslint-disable-next-line @next/next/no-img-element
<img
src={currentFavicon}
alt="Aktuelles Favicon"
alt="Favicon"
className="h-10 w-10 object-contain mb-3 border border-gray-200 rounded p-1"
/>
) : (
<p className="text-sm text-gray-400 mb-3">
Kein eigenes Favicon hinterlegt.
</p>
<p className="text-sm text-gray-400 mb-3">{dict.designEditor.faviconNone}</p>
)}
<div className="flex gap-2 items-center">
<label className="btn btn-primary cursor-pointer">
Favicon hochladen
{dict.designEditor.faviconUpload}
<input
type="file"
accept="image/*"
@@ -219,16 +230,16 @@ export default function DesignEditor() {
onClick={() => removeAsset("favicon")}
disabled={busy}
>
Favicon entfernen
{dict.designEditor.faviconRemove}
</button>
)}
</div>
</section>
<section className="card">
<h2 className="font-semibold mb-3">Farbgebung</h2>
<h2 className="font-semibold mb-3">{dict.designEditor.colorsTitle}</h2>
<div className="grid gap-3 sm:grid-cols-2">
{Object.entries(COLOR_LABELS).map(([key, label]) => (
{Object.entries(colorLabels).map(([key, label]) => (
<label key={key} className="flex items-center gap-3 text-sm">
<input
type="color"
@@ -249,7 +260,7 @@ export default function DesignEditor() {
onClick={saveColors}
disabled={busy}
>
Farben speichern
{dict.designEditor.colorsSave}
</button>
<button
type="button"
@@ -257,7 +268,7 @@ export default function DesignEditor() {
onClick={resetColors}
disabled={busy}
>
Auf Standard zurücksetzen
{dict.designEditor.colorsReset}
</button>
</div>
</section>
components/DishManager.tsx
+141 -36
View File
@@ -3,12 +3,17 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import { createClient } from "@/lib/supabase/client";
import { dishCodes, formatPrice } from "@/lib/menu";
import { formatMessage } from "@/lib/i18n/shared";
import { localized } from "@/lib/types";
import type { CodeItem, Dish } from "@/lib/types";
import ChipPicker from "@/components/ChipPicker";
import { useDict, useLocale } from "@/components/i18n/LocaleProvider";
interface DishForm {
id: string | null; // null = neues Gericht
name: string;
nameEn: string;
namePl: string;
price: string;
allergens: string[];
additives: string[];
@@ -17,6 +22,8 @@ interface DishForm {
const EMPTY_FORM: DishForm = {
id: null,
name: "",
nameEn: "",
namePl: "",
price: "",
allergens: [],
additives: [],
@@ -24,6 +31,8 @@ const EMPTY_FORM: DishForm = {
export default function DishManager() {
const supabase = useMemo(() => createClient(), []);
const dict = useDict();
const locale = useLocale();
const [dishes, setDishes] = useState<Dish[]>([]);
const [allergens, setAllergens] = useState<CodeItem[]>([]);
const [additives, setAdditives] = useState<CodeItem[]>([]);
@@ -33,6 +42,9 @@ export default function DishManager() {
const [selected, setSelected] = useState<Set<string>>(new Set());
const [bulkBusy, setBulkBusy] = useState(false);
const [search, setSearch] = useState("");
const [translateState, setTranslateState] = useState<
"idle" | "busy" | "done" | "unavailable"
>("idle");
// Live-Suche: filtert die Liste bereits während des Tippens
const visible = useMemo(() => {
@@ -47,14 +59,15 @@ export default function DishManager() {
supabase.from("additives").select("*").order("sort"),
]);
const problem = dishesRes.error ?? allergensRes.error ?? additivesRes.error;
if (problem) setError(`Laden fehlgeschlagen: ${problem.message}`);
if (problem)
setError(formatMessage(dict.dishManager.loadError, { message: problem.message }));
else {
setDishes(dishesRes.data as Dish[]);
setAllergens(allergensRes.data as CodeItem[]);
setAdditives(additivesRes.data as CodeItem[]);
}
setLoading(false);
}, [supabase]);
}, [supabase, dict]);
useEffect(() => {
load();
@@ -66,11 +79,13 @@ export default function DishManager() {
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");
setError(dict.dishManager.invalidPrice);
return;
}
const payload = {
name: form.name.trim(),
name_en: form.nameEn.trim() || null,
name_pl: form.namePl.trim() || null,
price,
allergens: form.allergens,
additives: form.additives,
@@ -79,7 +94,7 @@ export default function DishManager() {
? await supabase.from("dishes").update(payload).eq("id", form.id)
: await supabase.from("dishes").insert(payload);
if (error) {
setError(`Speichern fehlgeschlagen: ${error.message}`);
setError(formatMessage(dict.dishManager.saveError, { message: error.message }));
return;
}
setForm(null);
@@ -89,12 +104,13 @@ export default function DishManager() {
async function remove(dish: Dish) {
if (
!window.confirm(
`„${dish.name}“ wirklich löschen? Das Gericht wird auch aus allen Wochenplänen entfernt.`
formatMessage(dict.dishManager.confirmDelete, { name: dish.name })
)
)
return;
const { error } = await supabase.from("dishes").delete().eq("id", dish.id);
if (error) setError(`Löschen fehlgeschlagen: ${error.message}`);
if (error)
setError(formatMessage(dict.dishManager.deleteError, { message: error.message }));
setSelected((prev) => {
const next = new Set(prev);
next.delete(dish.id);
@@ -128,7 +144,9 @@ export default function DishManager() {
if (selected.size === 0) return;
if (
!window.confirm(
`${selected.size} Gericht(e) wirklich löschen? Sie werden auch aus allen Wochenplänen entfernt.`
formatMessage(dict.dishManager.confirmDeleteSelected, {
count: selected.size,
})
)
)
return;
@@ -138,7 +156,8 @@ export default function DishManager() {
.from("dishes")
.delete()
.in("id", Array.from(selected));
if (error) setError(`Löschen fehlgeschlagen: ${error.message}`);
if (error)
setError(formatMessage(dict.dishManager.deleteError, { message: error.message }));
setSelected(new Set());
setBulkBusy(false);
await load();
@@ -164,6 +183,36 @@ export default function DishManager() {
});
}
async function autoTranslate() {
if (!form || !form.name.trim()) return;
setTranslateState("busy");
setError(null);
try {
const res = await fetch("/api/translate", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
table: "dishes",
id: form.id,
text: form.name.trim(),
}),
});
const data = await res.json();
if (!res.ok) throw new Error(data?.error ?? `Fehler (${res.status})`);
if (data.configured === false) {
setTranslateState("unavailable");
return;
}
setForm((prev) =>
prev ? { ...prev, nameEn: data.en ?? prev.nameEn, namePl: data.pl ?? prev.namePl } : prev
);
setTranslateState("done");
} catch (err) {
setError(err instanceof Error ? err.message : String(err));
setTranslateState("idle");
}
}
const allSelected =
visible.length > 0 && visible.every((d) => selected.has(d.id));
@@ -171,14 +220,17 @@ export default function DishManager() {
<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
{dict.dishManager.title}
</h1>
<button
type="button"
className="btn btn-add"
onClick={() => setForm(EMPTY_FORM)}
onClick={() => {
setForm(EMPTY_FORM);
setTranslateState("idle");
}}
>
Neues Gericht
{dict.dishManager.newDish}
</button>
</div>
@@ -191,11 +243,11 @@ export default function DishManager() {
{form && (
<form onSubmit={save} className="card mb-4 space-y-4">
<h2 className="font-semibold">
{form.id ? "Gericht bearbeiten" : "Neues Gericht"}
{form.id ? dict.dishManager.editDish : dict.dishManager.newDish}
</h2>
<div>
<label className="label" htmlFor="dish-name">
Bezeichnung
{dict.dishManager.nameLabel}
</label>
<input
id="dish-name"
@@ -207,57 +259,105 @@ export default function DishManager() {
</div>
<div className="max-w-40">
<label className="label" htmlFor="dish-price">
Preis in €
{dict.dishManager.priceLabel}
</label>
<input
id="dish-price"
className="input"
inputMode="decimal"
placeholder="3,50"
placeholder={dict.dishManager.pricePlaceholder}
value={form.price}
onChange={(e) => setForm({ ...form, price: e.target.value })}
required
/>
</div>
<div className="grid gap-3 sm:grid-cols-2">
<div>
<label className="label" htmlFor="dish-name-en">
{dict.dishManager.nameEnLabel}
</label>
<input
id="dish-name-en"
className="input"
value={form.nameEn}
onChange={(e) => setForm({ ...form, nameEn: e.target.value })}
/>
</div>
<div>
<label className="label" htmlFor="dish-name-pl">
{dict.dishManager.namePlLabel}
</label>
<input
id="dish-name-pl"
className="input"
value={form.namePl}
onChange={(e) => setForm({ ...form, namePl: e.target.value })}
/>
</div>
</div>
<div>
<button
type="button"
className="btn btn-neutral"
onClick={autoTranslate}
disabled={translateState === "busy" || !form.name.trim()}
>
{translateState === "busy"
? dict.dishManager.translating
: dict.dishManager.autoTranslate}
</button>
{translateState === "done" && (
<span className="ml-2 text-sm text-green-700">
{dict.dishManager.translated}
</span>
)}
{translateState === "unavailable" && (
<span className="ml-2 text-sm text-gray-500">
{dict.dishManager.translateUnavailable}
</span>
)}
</div>
<ChipPicker
label="Allergene"
label={dict.codeList.allergensTitle}
items={allergens}
selected={form.allergens}
onToggle={toggleAllergen}
/>
<ChipPicker
label="Zusatzstoffe"
label={dict.codeList.additivesTitle}
items={additives}
selected={form.additives}
onToggle={toggleAdditive}
/>
<div className="flex gap-2">
<button type="submit" className="btn btn-add">
Speichern
{dict.common.save}
</button>
<button
type="button"
className="btn btn-neutral"
onClick={() => setForm(null)}
>
Abbrechen
{dict.common.cancel}
</button>
</div>
</form>
)}
{loading ? (
<p className="text-gray-500">Lade Gerichte…</p>
<p className="text-gray-500">{dict.common.loading}</p>
) : (
<>
{dishes.length > 0 && (
<input
type="search"
className="input mb-3"
placeholder="Gericht suchen…"
placeholder={dict.dishManager.searchPlaceholder}
value={search}
onChange={(e) => setSearch(e.target.value)}
aria-label="Gerichte durchsuchen"
aria-label={dict.dishManager.searchPlaceholder}
/>
)}
{dishes.length > 0 && (
@@ -268,10 +368,10 @@ export default function DishManager() {
checked={allSelected}
onChange={toggleAll}
/>
Alle auswählen
{dict.dishManager.selectAll}
</label>
<span className="text-gray-500">
{selected.size} ausgewählt
{formatMessage(dict.dishManager.selectedCount, { count: selected.size })}
</span>
<button
type="button"
@@ -279,7 +379,11 @@ export default function DishManager() {
onClick={removeSelected}
disabled={selected.size === 0 || bulkBusy}
>
Ausgewählte löschen{selected.size > 0 ? ` (${selected.size})` : ""}
{selected.size > 0
? formatMessage(dict.dishManager.deleteSelectedCount, {
count: selected.size,
})
: dict.dishManager.deleteSelected}
</button>
</div>
)}
@@ -292,10 +396,10 @@ export default function DishManager() {
type="checkbox"
checked={selected.has(dish.id)}
onChange={() => toggleOne(dish.id)}
aria-label={`${dish.name} auswählen`}
aria-label={dish.name}
/>
<span className="mr-auto">
<span className="font-semibold">{dish.name}</span>
<span className="font-semibold">{localized(dish, locale)}</span>
{codes && <sup className="dish-codes">{codes}</sup>}{" "}
<span className="text-gray-500">
– {formatPrice(dish.price)}
@@ -304,36 +408,37 @@ export default function DishManager() {
<button
type="button"
className="btn btn-primary"
onClick={() =>
onClick={() => {
setForm({
id: dish.id,
name: dish.name,
nameEn: dish.name_en ?? "",
namePl: dish.name_pl ?? "",
price: String(dish.price).replace(".", ","),
allergens: dish.allergens ?? [],
additives: dish.additives ?? [],
})
}
});
setTranslateState("idle");
}}
>
Bearbeiten
{dict.common.edit}
</button>
<button
type="button"
className="btn btn-del"
onClick={() => remove(dish)}
>
Löschen
{dict.common.delete}
</button>
</li>
);
})}
{dishes.length === 0 && (
<li className="px-4 py-3 text-gray-500">
Noch keine Gerichte angelegt.
</li>
<li className="px-4 py-3 text-gray-500">{dict.dishManager.empty}</li>
)}
{dishes.length > 0 && visible.length === 0 && (
<li className="px-4 py-3 text-gray-500">
Keine Treffer für „{search}“.
{formatMessage(dict.dishManager.noResults, { query: search })}
</li>
)}
</ul>
components/PasskeyManager.tsx
+23 -22
View File
@@ -2,6 +2,8 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import { createClient } from "@/lib/supabase/client";
import { formatMessage } from "@/lib/i18n/shared";
import { useDict } from "@/components/i18n/LocaleProvider";
interface PasskeyItem {
id: string;
@@ -12,6 +14,7 @@ interface PasskeyItem {
export default function PasskeyManager() {
const supabase = useMemo(() => createClient(), []);
const dict = useDict();
const [passkeys, setPasskeys] = useState<PasskeyItem[]>([]);
const [error, setError] = useState<string | null>(null);
const [info, setInfo] = useState<string | null>(null);
@@ -19,9 +22,10 @@ export default function PasskeyManager() {
const load = useCallback(async () => {
const { data, error } = await supabase.auth.passkey.list();
if (error) setError(`Passkeys konnten nicht geladen werden: ${error.message}`);
if (error)
setError(formatMessage(dict.passkeys.loadError, { message: error.message }));
else setPasskeys((data ?? []) as PasskeyItem[]);
}, [supabase]);
}, [supabase, dict]);
useEffect(() => {
load();
@@ -34,37 +38,35 @@ export default function PasskeyManager() {
try {
const { error } = await supabase.auth.registerPasskey();
if (error) {
setError(`Registrierung fehlgeschlagen: ${error.message}`);
setError(formatMessage(dict.passkeys.registerError, { message: error.message }));
} else {
setInfo("Passkey wurde erfolgreich registriert.");
setInfo(dict.passkeys.registered);
await load();
}
} catch (err) {
setError(
/NotAllowedError|abort/i.test(String(err))
? "Die Passkey-Registrierung wurde abgebrochen."
: `Registrierung fehlgeschlagen: ${err instanceof Error ? err.message : String(err)}`
? dict.passkeys.registerCancelled
: formatMessage(dict.passkeys.registerError, {
message: err instanceof Error ? err.message : String(err),
})
);
}
setBusy(false);
}
async function remove(pk: PasskeyItem) {
if (!window.confirm("Diesen Passkey wirklich löschen?")) return;
if (!window.confirm(dict.passkeys.confirmDelete)) return;
const { error } = await supabase.auth.passkey.delete({ passkeyId: pk.id });
if (error) setError(`Löschen fehlgeschlagen: ${error.message}`);
if (error)
setError(formatMessage(dict.passkeys.deleteError, { message: error.message }));
await load();
}
return (
<section className="card">
<h2 className="font-semibold mb-1">Passkeys</h2>
<p className="text-sm text-gray-600 mb-3">
Mit einem Passkey (Fingerabdruck, Gesichtserkennung oder
Sicherheitsschlüssel) kannst du dich künftig ohne Passwort anmelden.
Passkeys gelten pro Domain – für den Live-Betrieb muss die Domain in
der Supabase-Konfiguration hinterlegt sein.
</p>
<h2 className="font-semibold mb-1">{dict.passkeys.title}</h2>
<p className="text-sm text-gray-600 mb-3">{dict.passkeys.hint}</p>
{error && (
<p className="mb-2 text-sm text-[var(--c-del)]" role="alert">
@@ -79,7 +81,7 @@ export default function PasskeyManager() {
onClick={register}
disabled={busy}
>
Neuen Passkey registrieren
{dict.passkeys.register}
</button>
<ul className="divide-y divide-gray-100">
@@ -90,8 +92,9 @@ export default function PasskeyManager() {
{pk.friendly_name || "Passkey"}
</span>{" "}
<span className="text-gray-500">
– angelegt am{" "}
{new Date(pk.created_at).toLocaleDateString("de-DE")}
{formatMessage(dict.passkeys.createdOn, {
date: new Date(pk.created_at).toLocaleDateString(dict.dateLocale),
})}
</span>
</span>
<button
@@ -99,14 +102,12 @@ export default function PasskeyManager() {
className="btn btn-del"
onClick={() => remove(pk)}
>
Löschen
{dict.common.delete}
</button>
</li>
))}
{passkeys.length === 0 && (
<li className="py-2 text-gray-500 text-sm">
Noch keine Passkeys registriert.
</li>
<li className="py-2 text-gray-500 text-sm">{dict.passkeys.empty}</li>
)}
</ul>
</section>
components/PublicMobileMenu.tsx
+26 -13
View File
@@ -17,10 +17,11 @@ import {
mondayOf,
todayISO,
weekdayIndex,
WEEKDAYS,
WEEKDAYS_SHORT,
} from "@/lib/menu";
import { localized } from "@/lib/types";
import type { MenuEntry, Section } from "@/lib/types";
import { useDict, useLocale } from "@/components/i18n/LocaleProvider";
import LanguageSwitcher from "@/components/i18n/LanguageSwitcher";
export default function PublicMobileMenu({
monday,
@@ -32,9 +33,11 @@ export default function PublicMobileMenu({
entries: MenuEntry[];
}) {
const router = useRouter();
const days = WEEKDAYS.map((weekday, i) => ({
const dict = useDict();
const locale = useLocale();
const days = dict.weekdays.long.map((weekday, i) => ({
weekday,
short: WEEKDAYS_SHORT[i],
short: dict.weekdays.short[i],
iso: addDays(monday, i),
}));
const isCurrentWeek = monday === mondayOf(todayISO());
@@ -58,7 +61,7 @@ export default function PublicMobileMenu({
return (
<div key={day.iso} className="mb-4 last:mb-0">
<h3 className="font-bold text-[var(--c-primary)] mb-2">
{day.weekday} · {formatDateLong(day.iso)}
{day.weekday} · {formatDateLong(day.iso, dict.dateLocale)}
</h3>
<div className="space-y-3">
{sections.map((s) => {
@@ -69,18 +72,20 @@ export default function PublicMobileMenu({
className="rounded-md border border-gray-200 overflow-hidden"
>
<div className="bg-[var(--c-primary)] text-[var(--c-header-text)] px-3 py-1.5 text-sm">
<span className="font-semibold">{s.label}</span>{" "}
<span className="font-semibold">{localized(s, locale)}</span>{" "}
<span className="opacity-80">· {s.time_range}</span>
</div>
<div className="bg-[var(--c-row-bg)] px-3 py-2 text-sm">
{items.length === 0 ? (
<p className="text-gray-500">–</p>
<p className="text-gray-500">{dict.publicMenu.noEntry}</p>
) : (
items.map((e) => {
const codes = dishCodes(e.dish);
return (
<p key={e.id} className="mb-1 last:mb-0">
<span className="font-semibold">{e.dish.name}</span>
<span className="font-semibold">
{localized(e.dish, locale)}
</span>
{codes && <sup className="dish-codes">{codes}</sup>}{" "}
– {formatPrice(e.dish.price)}
</p>
@@ -98,25 +103,29 @@ export default function PublicMobileMenu({
return (
<div className="sm:hidden mb-6">
<div className="flex justify-end mb-3">
<LanguageSwitcher variant="light" />
</div>
<div className="flex gap-2 mb-3">
<Link
href={`/?woche=${addDays(monday, -7)}`}
className="btn btn-add flex-1 justify-center"
>
← Woche
{dict.publicMenu.prevWeekShort}
</Link>
<button
type="button"
onClick={goToday}
className="btn btn-primary flex-1"
>
Heute
{dict.publicMenu.today}
</button>
<Link
href={`/?woche=${addDays(monday, 7)}`}
className="btn btn-add flex-1 justify-center"
>
Woche →
{dict.publicMenu.nextWeekShort}
</Link>
</div>
@@ -128,7 +137,7 @@ export default function PublicMobileMenu({
onClick={() => setTab("tag")}
className={`btn flex-1 ${tab === "tag" ? "btn-primary" : "btn-neutral"}`}
>
Tag
{dict.publicMenu.dayTab}
</button>
<button
type="button"
@@ -137,7 +146,7 @@ export default function PublicMobileMenu({
onClick={() => setTab("woche")}
className={`btn flex-1 ${tab === "woche" ? "btn-primary" : "btn-neutral"}`}
>
Woche
{dict.publicMenu.weekTab}
</button>
</div>
@@ -164,6 +173,10 @@ export default function PublicMobileMenu({
) : (
<div>{days.map((d) => renderDay(d))}</div>
)}
<Link href="/vorschlag" className="btn btn-neutral w-full justify-center mt-2">
{dict.publicMenu.suggestDish}
</Link>
</div>
);
}
components/UserManager.tsx
+28 -25
View File
@@ -2,7 +2,9 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import { createClient } from "@/lib/supabase/client";
import { formatMessage } from "@/lib/i18n/shared";
import type { Profile, Role } from "@/lib/types";
import { useDict } from "@/components/i18n/LocaleProvider";
interface UserForm {
id: string | null; // null = neuer Benutzer
@@ -22,13 +24,13 @@ const EMPTY_FORM: UserForm = {
passwordRepeat: "",
};
const ROLE_LABELS: Record<Role, string> = {
admin: "Administrator",
staff: "Kantinenmitarbeiter",
};
export default function UserManager() {
const supabase = useMemo(() => createClient(), []);
const dict = useDict();
const roleLabels: Record<Role, string> = {
admin: dict.common.roleAdmin,
staff: dict.common.roleStaff,
};
const [profiles, setProfiles] = useState<Profile[]>([]);
const [me, setMe] = useState<string | null>(null);
const [form, setForm] = useState<UserForm | null>(null);
@@ -41,10 +43,11 @@ export default function UserManager() {
supabase.from("profiles").select("*").order("created_at"),
supabase.auth.getUser(),
]);
if (profileError) setError(`Laden fehlgeschlagen: ${profileError.message}`);
if (profileError)
setError(formatMessage(dict.userManager.loadError, { message: profileError.message }));
else setProfiles(profileData as Profile[]);
setMe(userData.user?.id ?? null);
}, [supabase]);
}, [supabase, dict]);
useEffect(() => {
load();
@@ -77,7 +80,7 @@ export default function UserManager() {
e.preventDefault();
if (!form) return;
if (form.password && form.password !== form.passwordRepeat) {
setError("Die Passwörter stimmen nicht überein.");
setError(dict.userManager.passwordMismatch);
return;
}
const ok = form.id
@@ -102,7 +105,7 @@ export default function UserManager() {
async function remove(profile: Profile) {
if (
!window.confirm(
`Benutzer „${profile.email}“ wirklich löschen? Der Zugang wird dauerhaft entfernt.`
formatMessage(dict.userManager.confirmDelete, { email: profile.email })
)
)
return;
@@ -113,14 +116,14 @@ export default function UserManager() {
<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">
Benutzer
{dict.userManager.title}
</h1>
<button
type="button"
className="btn btn-add"
onClick={() => setForm(EMPTY_FORM)}
>
Neuer Benutzer
{dict.userManager.newUser}
</button>
</div>
@@ -133,12 +136,12 @@ export default function UserManager() {
{form && (
<form onSubmit={save} className="card mb-4 space-y-3">
<h2 className="font-semibold">
{form.id ? "Benutzer bearbeiten" : "Neuer Benutzer"}
{form.id ? dict.userManager.editUser : dict.userManager.newUser}
</h2>
{!form.id && (
<div>
<label className="label" htmlFor="user-email">
E-Mail-Adresse
{dict.common.email}
</label>
<input
id="user-email"
@@ -152,7 +155,7 @@ export default function UserManager() {
)}
<div>
<label className="label" htmlFor="user-name">
Name
{dict.common.name}
</label>
<input
id="user-name"
@@ -163,7 +166,7 @@ export default function UserManager() {
</div>
<div className="max-w-60">
<label className="label" htmlFor="user-role">
Rolle
{dict.common.role}
</label>
<select
id="user-role"
@@ -173,13 +176,13 @@ export default function UserManager() {
setForm({ ...form, role: e.target.value as Role })
}
>
<option value="staff">Kantinenmitarbeiter</option>
<option value="admin">Administrator</option>
<option value="staff">{dict.common.roleStaff}</option>
<option value="admin">{dict.common.roleAdmin}</option>
</select>
</div>
<div className="max-w-60">
<label className="label" htmlFor="user-password">
{form.id ? "Neues Passwort (optional)" : "Passwort"}
{form.id ? dict.userManager.newPasswordLabel : dict.common.password}
</label>
<input
id="user-password"
@@ -194,7 +197,7 @@ export default function UserManager() {
</div>
<div className="max-w-60">
<label className="label" htmlFor="user-password-repeat">
Passwort wiederholen
{dict.userManager.repeatPasswordLabel}
</label>
<input
id="user-password-repeat"
@@ -211,14 +214,14 @@ export default function UserManager() {
</div>
<div className="flex gap-2">
<button type="submit" className="btn btn-add" disabled={busy}>
Speichern
{dict.common.save}
</button>
<button
type="button"
className="btn btn-neutral"
onClick={() => setForm(null)}
>
Abbrechen
{dict.common.cancel}
</button>
</div>
</form>
@@ -230,9 +233,9 @@ export default function UserManager() {
<span className="mr-auto">
<span className="font-semibold">{p.full_name || p.email}</span>{" "}
<span className="text-gray-500">
– {p.email} – {ROLE_LABELS[p.role]}
– {p.email} – {roleLabels[p.role]}
</span>
{p.id === me && <span className="text-gray-400"> (du)</span>}
{p.id === me && <span className="text-gray-400"> {dict.common.you}</span>}
</span>
<button
type="button"
@@ -248,7 +251,7 @@ export default function UserManager() {
})
}
>
Bearbeiten
{dict.common.edit}
</button>
{p.id !== me && (
<button
@@ -256,7 +259,7 @@ export default function UserManager() {
className="btn btn-del"
onClick={() => remove(p)}
>
Löschen
{dict.common.delete}
</button>
)}
</li>
components/WeekEditor.tsx
+35 -26
View File
@@ -11,14 +11,18 @@ import {
formatPrice,
mondayOf,
todayISO,
WEEKDAYS,
} from "@/lib/menu";
import { formatMessage } from "@/lib/i18n/shared";
import { localized } from "@/lib/types";
import type { Dish, MenuEntry, Section } from "@/lib/types";
import { useDict, useLocale } from "@/components/i18n/LocaleProvider";
export default function WeekEditor({ monday }: { monday: string }) {
const supabase = useMemo(() => createClient(), []);
const dict = useDict();
const locale = useLocale();
const friday = addDays(monday, 4);
const days = WEEKDAYS.map((weekday, i) => ({
const days = dict.weekdays.long.map((weekday, i) => ({
weekday,
iso: addDays(monday, i),
}));
@@ -42,7 +46,7 @@ export default function WeekEditor({ monday }: { monday: string }) {
supabase
.from("menu_entries")
.select(
"id, menu_date, section_key, position, dish:dishes(id, name, price, allergens, additives)"
"id, menu_date, section_key, position, dish:dishes(id, name, name_en, name_pl, price, allergens, additives)"
)
.gte("menu_date", monday)
.lte("menu_date", friday)
@@ -51,14 +55,14 @@ export default function WeekEditor({ monday }: { monday: string }) {
]);
const problem = se.error ?? di.error ?? en.error;
if (problem) {
setError(`Laden fehlgeschlagen: ${problem.message}`);
setError(formatMessage(dict.weekEditor.loadError, { message: problem.message }));
} else {
setSections(se.data as Section[]);
setDishes(di.data as Dish[]);
setEntries(en.data as unknown as MenuEntry[]);
}
setLoading(false);
}, [supabase, monday, friday]);
}, [supabase, monday, friday, dict]);
useEffect(() => {
setLoading(true);
@@ -75,8 +79,8 @@ export default function WeekEditor({ monday }: { monday: string }) {
if (error) {
setError(
/duplicate key/i.test(error.message)
? "Dieses Gericht ist an diesem Tag bereits zugewiesen."
: `Speichern fehlgeschlagen: ${error.message}`
? dict.weekEditor.duplicateEntry
: formatMessage(dict.weekEditor.saveError, { message: error.message })
);
}
setAdding(null);
@@ -86,27 +90,30 @@ export default function WeekEditor({ monday }: { monday: string }) {
async function removeEntry(id: string) {
const { error } = await supabase.from("menu_entries").delete().eq("id", id);
if (error) setError(`Löschen fehlgeschlagen: ${error.message}`);
if (error)
setError(formatMessage(dict.weekEditor.deleteError, { message: error.message }));
await load();
}
const [hintBefore, hintAfter] = dict.weekEditor.newDishesHint.split("{link}");
return (
<div>
<div className="flex flex-wrap items-center gap-3 mb-4">
<h1 className="text-xl font-bold text-[var(--c-primary)] mr-auto">
Wochenplan
{dict.weekEditor.title}
</h1>
<Link href={`/intern?woche=${addDays(monday, -7)}`} className="btn btn-add">
← Vorherige Woche
{dict.publicMenu.prevWeek}
</Link>
<Link
href={`/intern?woche=${mondayOf(todayISO())}`}
className="btn btn-primary"
>
Heute
{dict.publicMenu.today}
</Link>
<Link href={`/intern?woche=${addDays(monday, 7)}`} className="btn btn-add">
Nächste Woche →
{dict.publicMenu.nextWeek}
</Link>
</div>
@@ -116,7 +123,7 @@ export default function WeekEditor({ monday }: { monday: string }) {
</p>
)}
{loading ? (
<p className="text-gray-500">Lade Wochenplan…</p>
<p className="text-gray-500">{dict.weekEditor.loading}</p>
) : (
<table className="menu-table">
<thead>
@@ -126,7 +133,7 @@ export default function WeekEditor({ monday }: { monday: string }) {
<th key={d.iso} className="day-head">
<span className="font-bold">{d.weekday}</span>
<br />
{formatDateLong(d.iso)}
{formatDateLong(d.iso, dict.dateLocale)}
</th>
))}
</tr>
@@ -135,7 +142,7 @@ export default function WeekEditor({ monday }: { monday: string }) {
{sections.map((s) => (
<tr key={s.key}>
<th className="section-head">
<div>{s.label}</div>
<div>{localized(s, locale)}</div>
<div className="time">{s.time_range}</div>
</th>
{days.map((d) => {
@@ -147,7 +154,9 @@ export default function WeekEditor({ monday }: { monday: string }) {
const codes = dishCodes(e.dish);
return (
<div key={e.id} className="dish">
<span className="font-bold">{e.dish.name}</span>
<span className="font-bold">
{localized(e.dish, locale)}
</span>
{codes && <sup className="dish-codes">{codes}</sup>}
{" – "}
{formatPrice(e.dish.price)}
@@ -157,7 +166,7 @@ export default function WeekEditor({ monday }: { monday: string }) {
className="btn btn-del"
onClick={() => removeEntry(e.id)}
>
Löschen
{dict.common.delete}
</button>
</div>
</div>
@@ -170,10 +179,10 @@ export default function WeekEditor({ monday }: { monday: string }) {
value={selectedDish}
onChange={(e) => setSelectedDish(e.target.value)}
>
<option value="">– Gericht wählen –</option>
<option value="">{dict.weekEditor.selectDish}</option>
{dishes.map((dish) => (
<option key={dish.id} value={dish.id}>
{dish.name} ({formatPrice(dish.price)})
{localized(dish, locale)} ({formatPrice(dish.price)})
</option>
))}
</select>
@@ -184,7 +193,7 @@ export default function WeekEditor({ monday }: { monday: string }) {
onClick={addEntry}
disabled={!selectedDish}
>
Hinzufügen
{dict.common.add}
</button>
<button
type="button"
@@ -194,7 +203,7 @@ export default function WeekEditor({ monday }: { monday: string }) {
setSelectedDish("");
}}
>
Abbrechen
{dict.common.cancel}
</button>
</div>
</div>
@@ -207,7 +216,7 @@ export default function WeekEditor({ monday }: { monday: string }) {
setSelectedDish("");
}}
>
Mahlzeit hinzufügen
{dict.weekEditor.addMeal}
</button>
)}
</td>
@@ -219,11 +228,11 @@ export default function WeekEditor({ monday }: { monday: string }) {
</table>
)}
<p className="mt-4 text-sm text-gray-500">
Neue Gerichte legst du unter{" "}
{hintBefore}
<Link href="/intern/gerichte" className="underline">
Gerichte
</Link>{" "}
an.
{dict.weekEditor.newDishesLinkLabel}
</Link>
{hintAfter}
</p>
</div>
);
lib/menu.ts
+3 -6
View File
@@ -44,12 +44,9 @@ export function weekdayIndex(iso: string): number {
return day <= 4 ? day : -1;
}
export const WEEKDAYS = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag"];
export const WEEKDAYS_SHORT = ["Mo", "Di", "Mi", "Do", "Fr"];
/** z. B. "13. Juli 2026" */
export function formatDateLong(iso: string): string {
return toDate(iso).toLocaleDateString("de-DE", {
/** z. B. "13. Juli 2026" (dateLocale z. B. "de-DE", "en-GB", "pl-PL") */
export function formatDateLong(iso: string, dateLocale: string): string {
return toDate(iso).toLocaleDateString(dateLocale, {
day: "numeric",
month: "long",
year: "numeric",