chore: some ui fixes

Author: BolverBlitz

config/locales/de/Settings.json

@@ -21,6 +21,9 @@
         "TableStatus": "Status",
         "CurrentSession": "Aktuelle Sitzung"
     },
+    "Notifications": {
+        "Headline": "Benachrichtigungen"
+    },
     "DiscountEmails": {
         "Headline": "E-Mails zu Angeboten",
         "Description": "Erhalte eine E-Mail, wenn die Administration neue Rabatte ankündigt.",

test/foodorders.test.js

@@ -0,0 +1,21 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+require('module-alias/register');
+
+const { canTransitionOrderItemStatus } = require('@lib/sqlite/foodorders');
+
+test('food order item statuses only move forward', () => {
+    assert.equal(canTransitionOrderItemStatus('requested', 'ordered'), true);
+    assert.equal(canTransitionOrderItemStatus('requested', 'completed'), false);
+    assert.equal(canTransitionOrderItemStatus('ordered', 'requested'), false);
+    assert.equal(canTransitionOrderItemStatus('ordered', 'completed'), true);
+});
+
+test('terminal and charged food order items cannot change status', () => {
+    assert.equal(canTransitionOrderItemStatus('completed', 'ordered'), false);
+    assert.equal(canTransitionOrderItemStatus('completed', 'missing'), false);
+    assert.equal(canTransitionOrderItemStatus('missing', 'ordered'), false);
+    assert.equal(canTransitionOrderItemStatus('cancelled', 'requested'), false);
+    assert.equal(canTransitionOrderItemStatus('ordered', 'completed', '2026-06-23 00:00:00'), false);
+});

views/settings.ejs

@@ -105,7 +105,12 @@
         </div>
         <% } %>
 
-        <div id="notification-settings-container" class="space-y-8"></div>
+        <div class="w-full max-w-2xl mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-3xl">
+          <div class="p-8 md:p-12">
+            <h2 class="text-2xl font-bold text-gray-900 mb-6" data-translate="Settings.Notifications.Headline"></h2>
+            <div id="notification-settings-container" class="divide-y divide-gray-200"></div>
+          </div>
+        </div>
 
         <div class="w-full max-w-2xl mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-3xl">
           <div class="p-8 md:p-12">
@@ -146,26 +151,19 @@
 
       function renderNotificationSettings(settings) {
         notificationSettingsContainer.innerHTML = settings.map((notification) => `
-          <div class="w-full max-w-2xl mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-3xl">
-            <div class="p-8 md:p-12">
-              <div class="flex items-center justify-between gap-6">
-                <div>
-                  <h2 class="text-2xl font-bold text-gray-900 mb-2">${t(`${notification.translationKeyBase}.Headline`)}</h2>
-                  <p class="text-gray-500">${t(`${notification.translationKeyBase}.Description`)}</p>
-                </div>
-                <label class="relative inline-flex flex-shrink-0 cursor-pointer items-center">
-                  <input
-                    type="checkbox"
-                    class="notification-toggle peer sr-only"
-                    data-notification-key="${notification.key}"
-                    data-notification-channel="${notification.channel}"
-                    data-translation-key-base="${notification.translationKeyBase}"
-                    ${notification.enabled ? "checked" : ""}
-                  >
-                  <div class="h-6 w-11 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-indigo-600 peer-checked:after:translate-x-full peer-checked:after:border-white"></div>
-                </label>
-              </div>
-            </div>
+          <div class="flex items-center justify-between gap-6 py-4 first:pt-0 last:pb-0">
+            <span class="font-medium text-gray-900">${t(`${notification.translationKeyBase}.Headline`)}</span>
+            <label class="relative inline-flex flex-shrink-0 cursor-pointer items-center">
+              <input
+                type="checkbox"
+                class="notification-toggle peer sr-only"
+                data-notification-key="${notification.key}"
+                data-notification-channel="${notification.channel}"
+                data-translation-key-base="${notification.translationKeyBase}"
+                ${notification.enabled ? "checked" : ""}
+              >
+              <div class="h-6 w-11 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-indigo-600 peer-checked:after:translate-x-full peer-checked:after:border-white"></div>
+            </label>
           </div>
         `).join("");