feat(notifications): add per-tenant notification preferences

frontend/components/NotificationPreferences.vue

@@ -0,0 +1,67 @@
+<script setup>
+const { $api } = useNuxtApp()
+const auth = useAuthStore()
+const events = ref([])
+const loading = ref(true)
+const saving = ref(false)
+const error = ref('')
+const success = ref('')
+let generation = 0
+watch(() => auth.activeTenant, async () => {
+  const current = ++generation
+  events.value = []
+  loading.value = true
+  error.value = ''
+  success.value = ''
+  try {
+    const result = await $api('/api/notifications/preferences')
+    if (current === generation) events.value = result.events
+  } catch (err) {
+    if (current === generation) error.value = err?.data?.error || err.message || 'Einstellungen konnten nicht geladen werden.'
+  } finally {
+    if (current === generation) loading.value = false
+  }
+}, { immediate: true })
+async function save() {
+  const current = generation
+  saving.value = true
+  error.value = ''
+  success.value = ''
+  try {
+    await $api('/api/notifications/preferences', { method: 'PUT', body: events.value.flatMap(event =>
+      Object.entries(event.channels).map(([channel, enabled]) => ({ eventType: event.eventKey, channel, enabled }))) })
+    if (current === generation) success.value = 'Einstellungen gespeichert.'
+  } catch (err) {
+    if (current === generation) error.value = err?.data?.error || err.message || 'Speichern fehlgeschlagen.'
+  } finally { saving.value = false }
+}
+</script>
+
+<template>
+  <section class="space-y-4">
+    <h2 class="text-lg font-semibold">Meine Benachrichtigungen</h2>
+    <p>Diese Einstellungen gelten nur für dein Profil im aktuellen Mandanten {{ auth.activeTenantData?.name || '' }}. Für andere Mandanten wechsle zuerst das Profil.</p>
+    <p class="text-sm text-gray-500">E-Mail geht an deine Konto-Adresse. Push erreicht deine registrierten Geräte und Browser. Testnachrichten bleiben unabhängig davon möglich.</p>
+    <p v-if="loading" role="status">Einstellungen werden geladen …</p>
+    <p v-if="error" role="alert" class="text-red-600">{{ error }}</p>
+    <p v-if="success" role="status" class="text-green-600">{{ success }}</p>
+    <template v-if="!loading && events.length">
+      <div class="overflow-x-auto">
+        <table class="w-full text-left">
+          <thead><tr><th class="p-2">Auslöser</th><th class="p-2">E-Mail</th><th class="p-2">Push</th></tr></thead>
+          <tbody>
+            <tr v-for="event in events" :key="event.eventKey" class="border-t border-gray-200">
+              <td class="p-2"><strong>{{ event.displayName }}</strong><p class="text-sm text-gray-500">{{ event.description }}</p></td>
+              <td v-for="channel in ['email', 'push']" :key="channel" class="p-2">
+                <input v-if="channel in event.channels" v-model="event.channels[channel]" type="checkbox" :disabled="saving"
+                  :aria-label="`${event.displayName}: ${channel === 'email' ? 'E-Mail' : 'Push'}`" class="h-5 w-5" />
+                <span v-else>–</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <UButton :loading="saving" :disabled="saving" @click="save">Speichern</UButton>
+    </template>
+  </section>
+</template>

frontend/pages/settings/index.vue

@@ -6,6 +6,8 @@ const router = useRouter()
 
 const items = [{
   label: 'Profil',
+},{
+  label: 'Benachrichtigungen',
 },{
   label: 'Projekte',
   content: 'This is the content shown for Tab1'
@@ -57,6 +59,7 @@ const isLight = computed({
           </InputGroup>
 
         </div>
+        <NotificationPreferences v-else-if="item.label === 'Benachrichtigungen'" />
         <div v-else-if="item.label === 'Projekte'">
           <USeparator
             label="Phasenvorlagen"