feat(notifications): add unified multi-channel notification system

Introduces a fully featured notification system with three delivery
channels (in-app, email, webhook), normalized per-user/per-event/
per-channel preferences, admin-scoped notifications, scheduled trip
reminders and version update alerts.

- New notificationService.send() as the single orchestration entry point
- In-app notifications with simple/boolean/navigate types and WebSocket push
- Per-user preference matrix with normalized notification_channel_preferences table
- Admin notification preferences stored globally in app_settings
- Migration 69 normalizes legacy notification_preferences table
- Scheduler hooks for daily trip reminders and version checks
- DevNotificationsPanel for testing in dev mode
- All new tests passing, covering dispatch, preferences, migration, boolean
  responses, resilience, and full API integration (NSVC, NPREF, INOTIF,
  MIGR, VNOTIF, NROUTE series)
 - Previous tests passing

client/src/App.tsx

@@ -43,7 +43,8 @@ function ProtectedRoute({ children, adminRequired = false }: ProtectedRouteProps
   }
 
   if (!isAuthenticated) {
-    return <Navigate to="/login" replace />
+    const redirectParam = encodeURIComponent(location.pathname + location.search)
+    return <Navigate to={`/login?redirect=${redirectParam}`} replace />
   }
 
   if (

client/src/api/client.ts

@@ -27,7 +27,8 @@ apiClient.interceptors.response.use(
   (error) => {
     if (error.response?.status === 401 && (error.response?.data as { code?: string } | undefined)?.code === 'AUTH_REQUIRED') {
       if (!window.location.pathname.includes('/login') && !window.location.pathname.includes('/register') && !window.location.pathname.startsWith('/shared/')) {
-        window.location.href = '/login'
+        const currentPath = window.location.pathname + window.location.search
+        window.location.href = '/login?redirect=' + encodeURIComponent(currentPath)
       }
     }
     if (
@@ -197,6 +198,8 @@ export const adminApi = {
   rotateJwtSecret: () => apiClient.post('/admin/rotate-jwt-secret').then(r => r.data),
   sendTestNotification: (data: Record<string, unknown>) =>
     apiClient.post('/admin/dev/test-notification', data).then(r => r.data),
+  getNotificationPreferences: () => apiClient.get('/admin/notification-preferences').then(r => r.data),
+  updateNotificationPreferences: (prefs: Record<string, Record<string, boolean>>) => apiClient.put('/admin/notification-preferences', prefs).then(r => r.data),
 }
 
 export const addonsApi = {
@@ -326,9 +329,9 @@ export const shareApi = {
 
 export const notificationsApi = {
   getPreferences: () => apiClient.get('/notifications/preferences').then(r => r.data),
-  updatePreferences: (prefs: Record<string, boolean>) => apiClient.put('/notifications/preferences', prefs).then(r => r.data),
+  updatePreferences: (prefs: Record<string, Record<string, boolean>>) => apiClient.put('/notifications/preferences', prefs).then(r => r.data),
   testSmtp: (email?: string) => apiClient.post('/notifications/test-smtp', { email }).then(r => r.data),
-  testWebhook: () => apiClient.post('/notifications/test-webhook').then(r => r.data),
+  testWebhook: (url: string) => apiClient.post('/notifications/test-webhook', { url }).then(r => r.data),
 }
 
 export const inAppNotificationsApi = {

client/src/components/Admin/DevNotificationsPanel.tsx

@@ -2,7 +2,11 @@ import React, { useState, useEffect } from 'react'
 import { adminApi, tripsApi } from '../../api/client'
 import { useAuthStore } from '../../store/authStore'
 import { useToast } from '../shared/Toast'
-import { Bell, Send, Zap, ArrowRight, CheckCircle, XCircle, Navigation, User } from 'lucide-react'
+import {
+  Bell, Zap, ArrowRight, CheckCircle, Navigation, User,
+  Calendar, Clock, Image, MessageSquare, Tag, UserPlus,
+  Download, MapPin,
+} from 'lucide-react'
 
 interface Trip {
   id: number
@@ -37,7 +41,7 @@ export default function DevNotificationsPanel(): React.ReactElement {
     }).catch(() => {})
   }, [])
 
-  const send = async (label: string, payload: Record<string, unknown>) => {
+  const fire = async (label: string, payload: Record<string, unknown>) => {
     setSending(label)
     try {
       await adminApi.sendTestNotification(payload)
@@ -49,74 +53,69 @@ export default function DevNotificationsPanel(): React.ReactElement {
     }
   }
 
-  const buttons = [
-    {
-      label: 'Simple → Me',
-      icon: Bell,
-      color: '#6366f1',
-      payload: {
-        type: 'simple',
-        scope: 'user',
-        target: user?.id,
-        title_key: 'notifications.test.title',
-        title_params: { actor: user?.username || 'Admin' },
-        text_key: 'notifications.test.text',
-        text_params: {},
-      },
-    },
-    {
-      label: 'Boolean → Me',
-      icon: CheckCircle,
-      color: '#10b981',
-      payload: {
-        type: 'boolean',
-        scope: 'user',
-        target: user?.id,
-        title_key: 'notifications.test.booleanTitle',
-        title_params: { actor: user?.username || 'Admin' },
-        text_key: 'notifications.test.booleanText',
-        text_params: {},
-        positive_text_key: 'notifications.test.accept',
-        negative_text_key: 'notifications.test.decline',
-        positive_callback: { action: 'test_approve', payload: {} },
-        negative_callback: { action: 'test_deny', payload: {} },
-      },
-    },
-    {
-      label: 'Navigate → Me',
-      icon: Navigation,
-      color: '#f59e0b',
-      payload: {
-        type: 'navigate',
-        scope: 'user',
-        target: user?.id,
-        title_key: 'notifications.test.navigateTitle',
-        title_params: {},
-        text_key: 'notifications.test.navigateText',
-        text_params: {},
-        navigate_text_key: 'notifications.test.goThere',
-        navigate_target: '/dashboard',
-      },
-    },
-    {
-      label: 'Simple → Admins',
-      icon: Zap,
-      color: '#ef4444',
-      payload: {
-        type: 'simple',
-        scope: 'admin',
-        target: 0,
-        title_key: 'notifications.test.adminTitle',
-        title_params: {},
-        text_key: 'notifications.test.adminText',
-        text_params: { actor: user?.username || 'Admin' },
-      },
-    },
-  ]
+  const selectedTrip = trips.find(t => t.id === selectedTripId)
+  const selectedUser = users.find(u => u.id === selectedUserId)
+  const username = user?.username || 'Admin'
+  const tripTitle = selectedTrip?.title || 'Test Trip'
+
+  // ── Helpers ──────────────────────────────────────────────────────────────
+
+  const Btn = ({
+    id, label, sub, icon: Icon, color, onClick,
+  }: {
+    id: string; label: string; sub: string; icon: React.ElementType; color: string; onClick: () => void
+  }) => (
+    <button
+      onClick={onClick}
+      disabled={sending !== null}
+      className="flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors text-left w-full"
+      style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}
+      onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)' }}
+      onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-card)' }}
+    >
+      <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
+        style={{ background: `${color}20`, color }}>
+        <Icon className="w-4 h-4" />
+      </div>
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>{label}</p>
+        <p className="text-xs truncate" style={{ color: 'var(--text-faint)' }}>{sub}</p>
+      </div>
+      {sending === id && (
+        <div className="w-4 h-4 border-2 border-slate-200 border-t-indigo-500 rounded-full animate-spin flex-shrink-0" />
+      )}
+    </button>
+  )
+
+  const SectionTitle = ({ children }: { children: React.ReactNode }) => (
+    <h3 className="text-sm font-semibold mb-3" style={{ color: 'var(--text-secondary)' }}>{children}</h3>
+  )
+
+  const TripSelector = () => (
+    <select
+      value={selectedTripId ?? ''}
+      onChange={e => setSelectedTripId(Number(e.target.value))}
+      className="w-full px-3 py-2 rounded-lg border text-sm mb-3"
+      style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)' }}
+    >
+      {trips.map(trip => <option key={trip.id} value={trip.id}>{trip.title}</option>)}
+    </select>
+  )
+
+  const UserSelector = () => (
+    <select
+      value={selectedUserId ?? ''}
+      onChange={e => setSelectedUserId(Number(e.target.value))}
+      className="w-full px-3 py-2 rounded-lg border text-sm mb-3"
+      style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)' }}
+    >
+      {users.map(u => <option key={u.id} value={u.id}>{u.username} ({u.email})</option>)}
+    </select>
+  )
 
   return (
-    <div className="space-y-6">
-      <div className="flex items-center gap-2 mb-2">
+    <div className="space-y-8">
+      <div className="flex items-center gap-2">
         <div className="px-2 py-0.5 rounded text-xs font-mono font-bold" style={{ background: '#fbbf24', color: '#000' }}>
           DEV ONLY
         </div>
@@ -125,219 +124,162 @@ export default function DevNotificationsPanel(): React.ReactElement {
         </span>
       </div>
 
-      <p className="text-xs" style={{ color: 'var(--text-muted)' }}>
-        Send test notifications to yourself, all admins, or trip members. These use test i18n keys.
-      </p>
-
-      {/* Quick-fire buttons */}
+      {/* ── Type Testing ─────────────────────────────────────────────────── */}
       <div>
-        <h3 className="text-sm font-semibold mb-3" style={{ color: 'var(--text-secondary)' }}>Quick Send</h3>
+        <SectionTitle>Type Testing</SectionTitle>
+        <p className="text-xs mb-3" style={{ color: 'var(--text-muted)' }}>
+          Test how each in-app notification type renders, sent to yourself.
+        </p>
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-          {buttons.map(btn => {
-            const Icon = btn.icon
-            return (
-              <button
-                key={btn.label}
-                onClick={() => send(btn.label, btn.payload)}
-                disabled={sending !== null}
-                className="flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors text-left"
-                style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}
-                onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-card)'}
-              >
-                <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
-                  style={{ background: `${btn.color}20`, color: btn.color }}>
-                  <Icon className="w-4 h-4" />
-                </div>
-                <div className="min-w-0">
-                  <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>{btn.label}</p>
-                  <p className="text-xs truncate" style={{ color: 'var(--text-faint)' }}>
-                    {btn.payload.type} · {btn.payload.scope}
-                  </p>
-                </div>
-                {sending === btn.label && (
-                  <div className="ml-auto w-4 h-4 border-2 border-slate-200 border-t-indigo-500 rounded-full animate-spin" />
-                )}
-              </button>
-            )
-          })}
+          <Btn id="simple-me" label="Simple → Me" sub="test_simple · user" icon={Bell} color="#6366f1"
+            onClick={() => fire('simple-me', {
+              event: 'test_simple',
+              scope: 'user',
+              targetId: user?.id,
+              params: {},
+            })}
+          />
+          <Btn id="boolean-me" label="Boolean → Me" sub="test_boolean · user" icon={CheckCircle} color="#10b981"
+            onClick={() => fire('boolean-me', {
+              event: 'test_boolean',
+              scope: 'user',
+              targetId: user?.id,
+              params: {},
+              inApp: {
+                type: 'boolean',
+                positiveCallback: { action: 'test_approve', payload: {} },
+                negativeCallback: { action: 'test_deny', payload: {} },
+              },
+            })}
+          />
+          <Btn id="navigate-me" label="Navigate → Me" sub="test_navigate · user" icon={Navigation} color="#f59e0b"
+            onClick={() => fire('navigate-me', {
+              event: 'test_navigate',
+              scope: 'user',
+              targetId: user?.id,
+              params: {},
+            })}
+          />
+          <Btn id="simple-admins" label="Simple → All Admins" sub="test_simple · admin" icon={Zap} color="#ef4444"
+            onClick={() => fire('simple-admins', {
+              event: 'test_simple',
+              scope: 'admin',
+              targetId: 0,
+              params: {},
+            })}
+          />
         </div>
       </div>
 
-      {/* Trip-scoped notifications */}
+      {/* ── Trip-Scoped Events ───────────────────────────────────────────── */}
       {trips.length > 0 && (
         <div>
-          <h3 className="text-sm font-semibold mb-3" style={{ color: 'var(--text-secondary)' }}>Trip-Scoped</h3>
-          <div className="flex gap-2 mb-2">
-            <select
-              value={selectedTripId ?? ''}
-              onChange={e => setSelectedTripId(Number(e.target.value))}
-              className="flex-1 px-3 py-2 rounded-lg border text-sm"
-              style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)' }}
-            >
-              {trips.map(trip => (
-                <option key={trip.id} value={trip.id}>{trip.title}</option>
-              ))}
-            </select>
-          </div>
+          <SectionTitle>Trip-Scoped Events</SectionTitle>
+          <p className="text-xs mb-3" style={{ color: 'var(--text-muted)' }}>
+            Fires each trip event to all members of the selected trip (excluding yourself).
+          </p>
+          <TripSelector />
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-            <button
-              onClick={() => selectedTripId && send('Simple → Trip', {
-                type: 'simple',
+            <Btn id="booking_change" label="booking_change" sub="navigate · trip" icon={Calendar} color="#6366f1"
+              onClick={() => selectedTripId && fire('booking_change', {
+                event: 'booking_change',
                 scope: 'trip',
-                target: selectedTripId,
-                title_key: 'notifications.test.tripTitle',
-                title_params: { actor: user?.username || 'Admin' },
-                text_key: 'notifications.test.tripText',
-                text_params: { trip: trips.find(t => t.id === selectedTripId)?.title || 'Trip' },
+                targetId: selectedTripId,
+                params: { actor: username, trip: tripTitle, booking: 'Test Hotel', type: 'hotel', tripId: String(selectedTripId) },
               })}
-              disabled={sending !== null || !selectedTripId}
-              className="flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors text-left"
-              style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-card)'}
-            >
-              <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
-                style={{ background: '#8b5cf620', color: '#8b5cf6' }}>
-                <Send className="w-4 h-4" />
-              </div>
-              <div>
-                <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>Simple → Trip Members</p>
-                <p className="text-xs" style={{ color: 'var(--text-faint)' }}>simple · trip</p>
-              </div>
-            </button>
-            <button
-              onClick={() => selectedTripId && send('Navigate → Trip', {
-                type: 'navigate',
+            />
+            <Btn id="trip_reminder" label="trip_reminder" sub="navigate · trip" icon={Clock} color="#10b981"
+              onClick={() => selectedTripId && fire('trip_reminder', {
+                event: 'trip_reminder',
                 scope: 'trip',
-                target: selectedTripId,
-                title_key: 'notifications.test.tripTitle',
-                title_params: { actor: user?.username || 'Admin' },
-                text_key: 'notifications.test.tripText',
-                text_params: { trip: trips.find(t => t.id === selectedTripId)?.title || 'Trip' },
-                navigate_text_key: 'notifications.test.goThere',
-                navigate_target: `/trips/${selectedTripId}`,
+                targetId: selectedTripId,
+                params: { trip: tripTitle, tripId: String(selectedTripId) },
               })}
-              disabled={sending !== null || !selectedTripId}
-              className="flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors text-left"
-              style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-card)'}
-            >
-              <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
-                style={{ background: '#f59e0b20', color: '#f59e0b' }}>
-                <ArrowRight className="w-4 h-4" />
-              </div>
-              <div>
-                <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>Navigate → Trip Members</p>
-                <p className="text-xs" style={{ color: 'var(--text-faint)' }}>navigate · trip</p>
-              </div>
-            </button>
+            />
+            <Btn id="photos_shared" label="photos_shared" sub="navigate · trip" icon={Image} color="#f59e0b"
+              onClick={() => selectedTripId && fire('photos_shared', {
+                event: 'photos_shared',
+                scope: 'trip',
+                targetId: selectedTripId,
+                params: { actor: username, trip: tripTitle, count: '5', tripId: String(selectedTripId) },
+              })}
+            />
+            <Btn id="collab_message" label="collab_message" sub="navigate · trip" icon={MessageSquare} color="#8b5cf6"
+              onClick={() => selectedTripId && fire('collab_message', {
+                event: 'collab_message',
+                scope: 'trip',
+                targetId: selectedTripId,
+                params: { actor: username, trip: tripTitle, preview: 'This is a test message preview.', tripId: String(selectedTripId) },
+              })}
+            />
+            <Btn id="packing_tagged" label="packing_tagged" sub="navigate · trip" icon={Tag} color="#ec4899"
+              onClick={() => selectedTripId && fire('packing_tagged', {
+                event: 'packing_tagged',
+                scope: 'trip',
+                targetId: selectedTripId,
+                params: { actor: username, trip: tripTitle, category: 'Clothing', tripId: String(selectedTripId) },
+              })}
+            />
           </div>
         </div>
       )}
 
-      {/* User-scoped notifications */}
+      {/* ── User-Scoped Events ───────────────────────────────────────────── */}
       {users.length > 0 && (
         <div>
-          <h3 className="text-sm font-semibold mb-3" style={{ color: 'var(--text-secondary)' }}>User-Scoped</h3>
-          <div className="flex gap-2 mb-2">
-            <select
-              value={selectedUserId ?? ''}
-              onChange={e => setSelectedUserId(Number(e.target.value))}
-              className="flex-1 px-3 py-2 rounded-lg border text-sm"
-              style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)' }}
-            >
-              {users.map(u => (
-                <option key={u.id} value={u.id}>{u.username} ({u.email})</option>
-              ))}
-            </select>
-          </div>
+          <SectionTitle>User-Scoped Events</SectionTitle>
+          <p className="text-xs mb-3" style={{ color: 'var(--text-muted)' }}>
+            Fires each user event to the selected recipient.
+          </p>
+          <UserSelector />
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-            <button
-              onClick={() => selectedUserId && send(`Simple → ${users.find(u => u.id === selectedUserId)?.username}`, {
-                type: 'simple',
+            <Btn
+              id={`trip_invite-${selectedUserId}`}
+              label="trip_invite"
+              sub="navigate · user"
+              icon={UserPlus}
+              color="#06b6d4"
+              onClick={() => selectedUserId && fire(`trip_invite-${selectedUserId}`, {
+                event: 'trip_invite',
                 scope: 'user',
-                target: selectedUserId,
-                title_key: 'notifications.test.title',
-                title_params: { actor: user?.username || 'Admin' },
-                text_key: 'notifications.test.text',
-                text_params: {},
+                targetId: selectedUserId,
+                params: { actor: username, trip: tripTitle, invitee: selectedUser?.email || '', tripId: String(selectedTripId ?? 0) },
               })}
-              disabled={sending !== null || !selectedUserId}
-              className="flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors text-left"
-              style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-card)'}
-            >
-              <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
-                style={{ background: '#06b6d420', color: '#06b6d4' }}>
-                <User className="w-4 h-4" />
-              </div>
-              <div>
-                <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>Simple → User</p>
-                <p className="text-xs" style={{ color: 'var(--text-faint)' }}>simple · user</p>
-              </div>
-            </button>
-            <button
-              onClick={() => selectedUserId && send(`Boolean → ${users.find(u => u.id === selectedUserId)?.username}`, {
-                type: 'boolean',
+            />
+            <Btn
+              id={`vacay_invite-${selectedUserId}`}
+              label="vacay_invite"
+              sub="navigate · user"
+              icon={MapPin}
+              color="#f97316"
+              onClick={() => selectedUserId && fire(`vacay_invite-${selectedUserId}`, {
+                event: 'vacay_invite',
                 scope: 'user',
-                target: selectedUserId,
-                title_key: 'notifications.test.booleanTitle',
-                title_params: { actor: user?.username || 'Admin' },
-                text_key: 'notifications.test.booleanText',
-                text_params: {},
-                positive_text_key: 'notifications.test.accept',
-                negative_text_key: 'notifications.test.decline',
-                positive_callback: { action: 'test_approve', payload: {} },
-                negative_callback: { action: 'test_deny', payload: {} },
+                targetId: selectedUserId,
+                params: { actor: username, planId: '1' },
               })}
-              disabled={sending !== null || !selectedUserId}
-              className="flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors text-left"
-              style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-card)'}
-            >
-              <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
-                style={{ background: '#10b98120', color: '#10b981' }}>
-                <CheckCircle className="w-4 h-4" />
-              </div>
-              <div>
-                <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>Boolean → User</p>
-                <p className="text-xs" style={{ color: 'var(--text-faint)' }}>boolean · user</p>
-              </div>
-            </button>
-            <button
-              onClick={() => selectedUserId && send(`Navigate → ${users.find(u => u.id === selectedUserId)?.username}`, {
-                type: 'navigate',
-                scope: 'user',
-                target: selectedUserId,
-                title_key: 'notifications.test.navigateTitle',
-                title_params: {},
-                text_key: 'notifications.test.navigateText',
-                text_params: {},
-                navigate_text_key: 'notifications.test.goThere',
-                navigate_target: '/dashboard',
-              })}
-              disabled={sending !== null || !selectedUserId}
-              className="flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors text-left"
-              style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-card)'}
-            >
-              <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
-                style={{ background: '#f59e0b20', color: '#f59e0b' }}>
-                <ArrowRight className="w-4 h-4" />
-              </div>
-              <div>
-                <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>Navigate → User</p>
-                <p className="text-xs" style={{ color: 'var(--text-faint)' }}>navigate · user</p>
-              </div>
-            </button>
+            />
           </div>
         </div>
       )}
+
+      {/* ── Admin-Scoped Events ──────────────────────────────────────────── */}
+      <div>
+        <SectionTitle>Admin-Scoped Events</SectionTitle>
+        <p className="text-xs mb-3" style={{ color: 'var(--text-muted)' }}>
+          Fires to all admin users.
+        </p>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+          <Btn id="version_available" label="version_available" sub="navigate · admin" icon={Download} color="#64748b"
+            onClick={() => fire('version_available', {
+              event: 'version_available',
+              scope: 'admin',
+              targetId: 0,
+              params: { version: '9.9.9-test' },
+            })}
+          />
+        </div>
+      </div>
     </div>
   )
 }

client/src/i18n/translations/en.ts

@@ -163,23 +163,44 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'settings.notifyCollabMessage': 'Chat messages (Collab)',
   'settings.notifyPackingTagged': 'Packing list: assignments',
   'settings.notifyWebhook': 'Webhook notifications',
+  'settings.notifyVersionAvailable': 'New version available',
+  'settings.notificationPreferences.email': 'Email',
+  'settings.notificationPreferences.webhook': 'Webhook',
+  'settings.notificationPreferences.inapp': 'In-App',
+  'settings.notificationPreferences.noChannels': 'No notification channels are configured. Ask an admin to set up email or webhook notifications.',
+  'settings.webhookUrl.label': 'Webhook URL',
+  'settings.webhookUrl.placeholder': 'https://discord.com/api/webhooks/...',
+  'settings.webhookUrl.hint': 'Enter your Discord, Slack, or custom webhook URL to receive notifications.',
+  'settings.webhookUrl.save': 'Save',
+  'settings.webhookUrl.saved': 'Webhook URL saved',
+  'settings.webhookUrl.test': 'Test',
+  'settings.webhookUrl.testSuccess': 'Test webhook sent successfully',
+  'settings.webhookUrl.testFailed': 'Test webhook failed',
   'admin.notifications.title': 'Notifications',
   'admin.notifications.hint': 'Choose one notification channel. Only one can be active at a time.',
   'admin.notifications.none': 'Disabled',
   'admin.notifications.email': 'Email (SMTP)',
   'admin.notifications.webhook': 'Webhook',
-  'admin.notifications.events': 'Notification Events',
-  'admin.notifications.eventsHint': 'Choose which events trigger notifications for all users.',
-  'admin.notifications.configureFirst': 'Configure the SMTP or webhook settings below first, then enable events.',
   'admin.notifications.save': 'Save notification settings',
   'admin.notifications.saved': 'Notification settings saved',
   'admin.notifications.testWebhook': 'Send test webhook',
   'admin.notifications.testWebhookSuccess': 'Test webhook sent successfully',
   'admin.notifications.testWebhookFailed': 'Test webhook failed',
+  'admin.notifications.emailPanel.title': 'Email (SMTP)',
+  'admin.notifications.webhookPanel.title': 'Webhook',
+  'admin.notifications.inappPanel.title': 'In-App',
+  'admin.notifications.inappPanel.hint': 'In-app notifications are always active and cannot be disabled globally.',
+  'admin.notifications.adminWebhookPanel.title': 'Admin Webhook',
+  'admin.notifications.adminWebhookPanel.hint': 'This webhook is used exclusively for admin notifications (e.g. version alerts). It is separate from per-user webhooks and always fires when set.',
+  'admin.notifications.adminWebhookPanel.saved': 'Admin webhook URL saved',
+  'admin.notifications.adminWebhookPanel.testSuccess': 'Test webhook sent successfully',
+  'admin.notifications.adminWebhookPanel.testFailed': 'Test webhook failed',
+  'admin.notifications.adminWebhookPanel.alwaysOnHint': 'Admin webhook always fires when a URL is configured',
+  'admin.notifications.adminNotificationsHint': 'Configure which channels deliver admin-only notifications (e.g. version alerts).',
   'admin.smtp.title': 'Email & Notifications',
   'admin.smtp.hint': 'SMTP configuration for sending email notifications.',
   'admin.smtp.testButton': 'Send test email',
-  'admin.webhook.hint': 'Send notifications to an external webhook (Discord, Slack, etc.).',
+  'admin.webhook.hint': 'Allow users to configure their own webhook URLs for notifications (Discord, Slack, etc.).',
   'admin.smtp.testSuccess': 'Test email sent successfully',
   'admin.smtp.testFailed': 'Test email failed',
   'settings.notificationsDisabled': 'Notifications are not configured. Ask an admin to enable email or webhook notifications.',
@@ -383,6 +404,9 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'admin.tabs.users': 'Users',
   'admin.tabs.categories': 'Categories',
   'admin.tabs.backup': 'Backup',
+  'admin.tabs.notifications': 'Notifications',
+  'admin.tabs.notificationChannels': 'Notification Channels',
+  'admin.tabs.adminNotifications': 'Admin Notifications',
   'admin.tabs.audit': 'Audit log',
   'admin.stats.users': 'Users',
   'admin.stats.trips': 'Trips',
@@ -1551,6 +1575,9 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'notifications.system': 'System',
 
   // Notification test keys (dev only)
+  'notifications.versionAvailable.title': 'Update Available',
+  'notifications.versionAvailable.text': 'TREK {version} is now available.',
+  'notifications.versionAvailable.button': 'View Details',
   'notifications.test.title': 'Test notification from {actor}',
   'notifications.test.text': 'This is a simple test notification.',
   'notifications.test.booleanTitle': '{actor} asks for your approval',
@@ -1598,6 +1625,43 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'todo.detail.priority': 'Priority',
   'todo.detail.noPriority': 'None',
   'todo.detail.create': 'Create task',
+
+  // Notifications — dev test events
+  'notif.test.title': '[Test] Notification',
+  'notif.test.simple.text': 'This is a simple test notification.',
+  'notif.test.boolean.text': 'Do you accept this test notification?',
+  'notif.test.navigate.text': 'Click below to navigate to the dashboard.',
+
+  // Notifications
+  'notif.trip_invite.title': 'Trip Invitation',
+  'notif.trip_invite.text': '{actor} invited you to {trip}',
+  'notif.booking_change.title': 'Booking Updated',
+  'notif.booking_change.text': '{actor} updated a booking in {trip}',
+  'notif.trip_reminder.title': 'Trip Reminder',
+  'notif.trip_reminder.text': 'Your trip {trip} is coming up soon!',
+  'notif.vacay_invite.title': 'Vacay Fusion Invite',
+  'notif.vacay_invite.text': '{actor} invited you to fuse vacation plans',
+  'notif.photos_shared.title': 'Photos Shared',
+  'notif.photos_shared.text': '{actor} shared {count} photo(s) in {trip}',
+  'notif.collab_message.title': 'New Message',
+  'notif.collab_message.text': '{actor} sent a message in {trip}',
+  'notif.packing_tagged.title': 'Packing Assignment',
+  'notif.packing_tagged.text': '{actor} assigned you to {category} in {trip}',
+  'notif.version_available.title': 'New Version Available',
+  'notif.version_available.text': 'TREK {version} is now available',
+  'notif.action.view_trip': 'View Trip',
+  'notif.action.view_collab': 'View Messages',
+  'notif.action.view_packing': 'View Packing',
+  'notif.action.view_photos': 'View Photos',
+  'notif.action.view_vacay': 'View Vacay',
+  'notif.action.view_admin': 'Go to Admin',
+  'notif.action.view': 'View',
+  'notif.action.accept': 'Accept',
+  'notif.action.decline': 'Decline',
+  'notif.generic.title': 'Notification',
+  'notif.generic.text': 'You have a new notification',
+  'notif.dev.unknown_event.title': '[DEV] Unknown Event',
+  'notif.dev.unknown_event.text': 'Event type "{event}" is not registered in EVENT_NOTIFICATION_CONFIG',
 }
 
 export default en

client/src/i18n/translations/pl.ts

@@ -149,6 +149,7 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'settings.notifyCollabMessage': 'Wiadomości czatu (Collab)',
   'settings.notifyPackingTagged': 'Lista pakowania: przypisania',
   'settings.notifyWebhook': 'Powiadomienia Webhook',
+  'settings.notifyVersionAvailable': 'New version available',
   'admin.smtp.title': 'E-maile i powiadomienia',
   'admin.smtp.hint': 'Konfiguracja SMTP dla powiadomień e-mail. Opcjonalnie: URL Webhooka dla Discorda, Slacka, itp.',
   'admin.smtp.testButton': 'Wyślij testowego e-maila',
@@ -349,6 +350,9 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'admin.tabs.users': 'Użytkownicy',
   'admin.tabs.categories': 'Kategorie',
   'admin.tabs.backup': 'Backupy',
+  'admin.tabs.notifications': 'Notifications',
+  'admin.tabs.notificationChannels': 'Kanały powiadomień',
+  'admin.tabs.adminNotifications': 'Powiadomienia admina',
   'admin.tabs.audit': 'Aktywność',
   'admin.stats.users': 'Użytkownicy',
   'admin.stats.trips': 'Podróże',
@@ -1438,8 +1442,31 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'admin.notifications.testWebhook': 'Wyślij testowy webhook',
   'admin.notifications.testWebhookSuccess': 'Testowy webhook wysłany pomyślnie',
   'admin.notifications.testWebhookFailed': 'Testowy webhook nie powiódł się',
-  'admin.webhook.hint': 'Wysyłaj powiadomienia do zewnętrznego webhooka.',
+  'admin.notifications.emailPanel.title': 'Email (SMTP)',
+  'admin.notifications.webhookPanel.title': 'Webhook',
+  'admin.notifications.inappPanel.title': 'In-App',
+  'admin.notifications.inappPanel.hint': 'In-app notifications are always active and cannot be disabled globally.',
+  'admin.notifications.adminWebhookPanel.title': 'Webhook admina',
+  'admin.notifications.adminWebhookPanel.hint': 'Ten webhook służy wyłącznie do powiadomień admina (np. alertów o nowych wersjach). Jest niezależny od webhooków użytkowników i wysyła automatycznie, gdy URL jest skonfigurowany.',
+  'admin.notifications.adminWebhookPanel.saved': 'URL webhooka admina zapisany',
+  'admin.notifications.adminWebhookPanel.testSuccess': 'Testowy webhook wysłany pomyślnie',
+  'admin.notifications.adminWebhookPanel.testFailed': 'Wysyłanie testowego webhooka nie powiodło się',
+  'admin.notifications.adminWebhookPanel.alwaysOnHint': 'Webhook admina wysyła automatycznie, gdy URL jest skonfigurowany',
+  'admin.notifications.adminNotificationsHint': 'Skonfiguruj, które kanały dostarczają powiadomienia admina (np. alerty o wersjach). Webhook wysyła automatycznie, gdy ustawiony jest URL webhooka admina.',
+  'admin.webhook.hint': 'Pozwól użytkownikom konfigurować własne adresy URL webhooka dla powiadomień (Discord, Slack itp.).',
   'settings.notificationsDisabled': 'Powiadomienia nie są skonfigurowane.',
+  'settings.notificationPreferences.noChannels': 'No notification channels are configured. Ask an admin to set up email or webhook notifications.',
+  'settings.webhookUrl.label': 'URL webhooka',
+  'settings.webhookUrl.placeholder': 'https://discord.com/api/webhooks/...',
+  'settings.webhookUrl.hint': 'Wprowadź adres URL webhooka Discord, Slack lub własnego, aby otrzymywać powiadomienia.',
+  'settings.webhookUrl.save': 'Zapisz',
+  'settings.webhookUrl.saved': 'URL webhooka zapisany',
+  'settings.webhookUrl.test': 'Test',
+  'settings.webhookUrl.testSuccess': 'Testowy webhook wysłany pomyślnie',
+  'settings.webhookUrl.testFailed': 'Wysyłanie testowego webhooka nie powiodło się',
+  'settings.notificationPreferences.inapp': 'In-App',
+  'settings.notificationPreferences.webhook': 'Webhook',
+  'settings.notificationPreferences.email': 'Email',
   'settings.notificationsActive': 'Aktywny kanał',
   'settings.notificationsManagedByAdmin': 'Zdarzenia konfigurowane przez administratora.',
   'settings.mustChangePassword': 'Musisz zmienić hasło przed kontynuowaniem.',
@@ -1543,6 +1570,9 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'notifications.markUnread': 'Oznacz jako nieprzeczytane',
   'notifications.delete': 'Usuń',
   'notifications.system': 'System',
+  'notifications.versionAvailable.title': 'Update Available',
+  'notifications.versionAvailable.text': 'TREK {version} is now available.',
+  'notifications.versionAvailable.button': 'View Details',
   'notifications.test.title': 'Testowe powiadomienie od {actor}',
   'notifications.test.text': 'To jest powiadomienie testowe.',
   'notifications.test.booleanTitle': '{actor} prosi o akceptację',
@@ -1590,6 +1620,43 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'todo.detail.priority': 'Priority',
   'todo.detail.noPriority': 'None',
   'todo.sortByPrio': 'Priority',
+
+  // Notifications — dev test events
+  'notif.test.title': '[Test] Notification',
+  'notif.test.simple.text': 'This is a simple test notification.',
+  'notif.test.boolean.text': 'Do you accept this test notification?',
+  'notif.test.navigate.text': 'Click below to navigate to the dashboard.',
+
+  // Notifications
+  'notif.trip_invite.title': 'Zaproszenie do podróży',
+  'notif.trip_invite.text': '{actor} zaprosił Cię do {trip}',
+  'notif.booking_change.title': 'Rezerwacja zaktualizowana',
+  'notif.booking_change.text': '{actor} zaktualizował rezerwację w {trip}',
+  'notif.trip_reminder.title': 'Przypomnienie o podróży',
+  'notif.trip_reminder.text': 'Twoja podróż {trip} zbliża się!',
+  'notif.vacay_invite.title': 'Zaproszenie Vacay Fusion',
+  'notif.vacay_invite.text': '{actor} zaprosił Cię do połączenia planów urlopowych',
+  'notif.photos_shared.title': 'Zdjęcia udostępnione',
+  'notif.photos_shared.text': '{actor} udostępnił {count} zdjęcie/zdjęcia w {trip}',
+  'notif.collab_message.title': 'Nowa wiadomość',
+  'notif.collab_message.text': '{actor} wysłał wiadomość w {trip}',
+  'notif.packing_tagged.title': 'Zadanie pakowania',
+  'notif.packing_tagged.text': '{actor} przypisał Cię do {category} w {trip}',
+  'notif.version_available.title': 'Nowa wersja dostępna',
+  'notif.version_available.text': 'TREK {version} jest teraz dostępny',
+  'notif.action.view_trip': 'Zobacz podróż',
+  'notif.action.view_collab': 'Zobacz wiadomości',
+  'notif.action.view_packing': 'Zobacz pakowanie',
+  'notif.action.view_photos': 'Zobacz zdjęcia',
+  'notif.action.view_vacay': 'Zobacz Vacay',
+  'notif.action.view_admin': 'Przejdź do admina',
+  'notif.action.view': 'Zobacz',
+  'notif.action.accept': 'Akceptuj',
+  'notif.action.decline': 'Odrzuć',
+  'notif.generic.title': 'Powiadomienie',
+  'notif.generic.text': 'Masz nowe powiadomienie',
+  'notif.dev.unknown_event.title': '[DEV] Unknown Event',
+  'notif.dev.unknown_event.text': 'Event type "{event}" is not registered in EVENT_NOTIFICATION_CONFIG',
 }
 
 export default pl

client/src/pages/AdminPage.tsx

@@ -57,6 +57,107 @@ interface UpdateInfo {
   is_docker?: boolean
 }
 
+const ADMIN_EVENT_LABEL_KEYS: Record<string, string> = {
+  version_available: 'settings.notifyVersionAvailable',
+}
+
+const ADMIN_CHANNEL_LABEL_KEYS: Record<string, string> = {
+  inapp: 'settings.notificationPreferences.inapp',
+  email: 'settings.notificationPreferences.email',
+  webhook: 'settings.notificationPreferences.webhook',
+}
+
+function AdminNotificationsPanel({ t, toast }: { t: (k: string) => string; toast: ReturnType<typeof useToast> }) {
+  const [matrix, setMatrix] = useState<any>(null)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    adminApi.getNotificationPreferences().then((data: any) => setMatrix(data)).catch(() => {})
+  }, [])
+
+  if (!matrix) return <p style={{ fontSize: 12, color: 'var(--text-faint)', fontStyle: 'italic', padding: 16 }}>Loading…</p>
+
+  const visibleChannels = (['inapp', 'email', 'webhook'] as const).filter(ch => {
+    if (!matrix.available_channels[ch]) return false
+    return matrix.event_types.some((evt: string) => matrix.implemented_combos[evt]?.includes(ch))
+  })
+
+  const toggle = async (eventType: string, channel: string) => {
+    const current = matrix.preferences[eventType]?.[channel] ?? true
+    const updated = { ...matrix.preferences, [eventType]: { ...matrix.preferences[eventType], [channel]: !current } }
+    setMatrix((m: any) => m ? { ...m, preferences: updated } : m)
+    setSaving(true)
+    try {
+      await adminApi.updateNotificationPreferences(updated)
+    } catch {
+      setMatrix((m: any) => m ? { ...m, preferences: matrix.preferences } : m)
+      toast.error(t('common.error'))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (matrix.event_types.length === 0) {
+    return (
+      <div className="bg-white rounded-xl border border-slate-200 p-6">
+        <p style={{ fontSize: 13, color: 'var(--text-faint)' }}>{t('settings.notificationPreferences.noChannels')}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+        <div className="px-6 py-4 border-b border-slate-100">
+          <h2 className="font-semibold text-slate-900">{t('admin.tabs.adminNotifications')}</h2>
+          <p className="text-xs text-slate-400 mt-1">{t('admin.notifications.adminNotificationsHint')}</p>
+        </div>
+        <div className="p-6">
+          {saving && <p style={{ fontSize: 11, color: 'var(--text-faint)', marginBottom: 8 }}>Saving…</p>}
+          {/* Header row */}
+          <div style={{ display: 'grid', gridTemplateColumns: `1fr ${visibleChannels.map(() => '80px').join(' ')}`, gap: 4, paddingBottom: 6, marginBottom: 4, borderBottom: '1px solid var(--border-primary)' }}>
+            <span />
+            {visibleChannels.map(ch => (
+              <span key={ch} style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textAlign: 'center', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+                {t(ADMIN_CHANNEL_LABEL_KEYS[ch]) || ch}
+              </span>
+            ))}
+          </div>
+          {/* Event rows */}
+          {matrix.event_types.map((eventType: string) => {
+            const implementedForEvent = matrix.implemented_combos[eventType] ?? []
+            return (
+              <div key={eventType} style={{ display: 'grid', gridTemplateColumns: `1fr ${visibleChannels.map(() => '80px').join(' ')}`, gap: 4, alignItems: 'center', padding: '8px 0', borderBottom: '1px solid var(--border-primary)' }}>
+                <span style={{ fontSize: 13, color: 'var(--text-primary)' }}>
+                  {t(ADMIN_EVENT_LABEL_KEYS[eventType]) || eventType}
+                </span>
+                {visibleChannels.map(ch => {
+                  if (!implementedForEvent.includes(ch)) {
+                    return <span key={ch} style={{ textAlign: 'center', color: 'var(--text-faint)', fontSize: 14 }}>—</span>
+                  }
+                  const isOn = matrix.preferences[eventType]?.[ch] ?? true
+                  return (
+                    <div key={ch} style={{ display: 'flex', justifyContent: 'center' }}>
+                      <button
+                        onClick={() => toggle(eventType, ch)}
+                        className="relative inline-flex h-5 w-9 items-center rounded-full transition-colors flex-shrink-0"
+                        style={{ background: isOn ? 'var(--text-primary)' : 'var(--border-primary)' }}
+                      >
+                        <span className="absolute left-0.5 h-4 w-4 rounded-full bg-white transition-transform duration-200"
+                          style={{ transform: isOn ? 'translateX(16px)' : 'translateX(0)' }} />
+                      </button>
+                    </div>
+                  )
+                })}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
 export default function AdminPage(): React.ReactElement {
   const { demoMode, serverTimezone } = useAuthStore()
   const { t, locale } = useTranslation()
@@ -68,6 +169,8 @@ export default function AdminPage(): React.ReactElement {
     { id: 'config', label: t('admin.tabs.config') },
     { id: 'addons', label: t('admin.tabs.addons') },
     { id: 'settings', label: t('admin.tabs.settings') },
+    { id: 'notification-channels', label: t('admin.tabs.notificationChannels') },
+    { id: 'admin-notifications', label: t('admin.tabs.adminNotifications') },
     { id: 'backup', label: t('admin.tabs.backup') },
     { id: 'audit', label: t('admin.tabs.audit') },
     ...(mcpEnabled ? [{ id: 'mcp-tokens', label: t('admin.tabs.mcpTokens') }] : []),
@@ -969,189 +1072,6 @@ export default function AdminPage(): React.ReactElement {
                   </button>
                 </div>
               </div>
-              {/* Notifications — exclusive channel selector */}
-              <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
-                <div className="px-6 py-4 border-b border-slate-100">
-                  <h2 className="font-semibold text-slate-900">{t('admin.notifications.title')}</h2>
-                  <p className="text-xs text-slate-400 mt-1">{t('admin.notifications.hint')}</p>
-                </div>
-                <div className="p-6 space-y-4">
-                  {/* Channel selector */}
-                  <div className="flex gap-2">
-                    {(['none', 'email', 'webhook'] as const).map(ch => {
-                      const active = (smtpValues.notification_channel || 'none') === ch
-                      const labels: Record<string, string> = { none: t('admin.notifications.none'), email: t('admin.notifications.email'), webhook: t('admin.notifications.webhook') }
-                      return (
-                        <button
-                          key={ch}
-                          onClick={() => setSmtpValues(prev => ({ ...prev, notification_channel: ch }))}
-                          className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium transition-colors border ${active ? 'bg-slate-900 text-white border-slate-900' : 'bg-white text-slate-600 border-slate-300 hover:bg-slate-50'}`}
-                        >
-                          {labels[ch]}
-                        </button>
-                      )
-                    })}
-                  </div>
-
-                  {/* Notification event toggles — shown when any channel is active */}
-                  {(smtpValues.notification_channel || 'none') !== 'none' && (() => {
-                    const ch = smtpValues.notification_channel || 'none'
-                    const configValid = ch === 'email' ? !!(smtpValues.smtp_host?.trim()) : ch === 'webhook' ? !!(smtpValues.notification_webhook_url?.trim()) : false
-                    return (
-                    <div className={`space-y-2 pt-2 border-t border-slate-100 ${!configValid ? 'opacity-50 pointer-events-none' : ''}`}>
-                      <p className="text-xs font-medium text-slate-500 uppercase tracking-wider mb-2">{t('admin.notifications.events')}</p>
-                      {!configValid && (
-                        <p className="text-[10px] text-amber-600 mb-3">{t('admin.notifications.configureFirst')}</p>
-                      )}
-                      <p className="text-[10px] text-slate-400 mb-3">{t('admin.notifications.eventsHint')}</p>
-                      {[
-                        { key: 'notify_trip_invite', label: t('settings.notifyTripInvite') },
-                        { key: 'notify_booking_change', label: t('settings.notifyBookingChange') },
-                        { key: 'notify_trip_reminder', label: t('settings.notifyTripReminder') },
-                        { key: 'notify_vacay_invite', label: t('settings.notifyVacayInvite') },
-                        { key: 'notify_photos_shared', label: t('settings.notifyPhotosShared') },
-                        { key: 'notify_collab_message', label: t('settings.notifyCollabMessage') },
-                        { key: 'notify_packing_tagged', label: t('settings.notifyPackingTagged') },
-                      ].map(opt => {
-                        const isOn = (smtpValues[opt.key] ?? 'true') !== 'false'
-                        return (
-                          <div key={opt.key} className="flex items-center justify-between py-1">
-                            <span className="text-sm text-slate-700">{opt.label}</span>
-                            <button
-                              onClick={() => {
-                                const newVal = isOn ? 'false' : 'true'
-                                setSmtpValues(prev => ({ ...prev, [opt.key]: newVal }))
-                              }}
-                              className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
-                              style={{ background: isOn ? 'var(--text-primary)' : 'var(--border-primary)' }}
-                            >
-                              <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
-                                style={{ transform: isOn ? 'translateX(20px)' : 'translateX(0)' }} />
-                            </button>
-                          </div>
-                        )
-                      })}
-                    </div>
-                    )
-                  })()}
-
-                  {/* Email (SMTP) settings — shown when email channel is active */}
-                  {(smtpValues.notification_channel || 'none') === 'email' && (
-                    <div className="space-y-3 pt-2 border-t border-slate-100">
-                      <p className="text-xs text-slate-400">{t('admin.smtp.hint')}</p>
-                      {smtpLoaded && [
-                        { key: 'smtp_host', label: 'SMTP Host', placeholder: 'mail.example.com' },
-                        { key: 'smtp_port', label: 'SMTP Port', placeholder: '587' },
-                        { key: 'smtp_user', label: 'SMTP User', placeholder: 'trek@example.com' },
-                        { key: 'smtp_pass', label: 'SMTP Password', placeholder: '••••••••', type: 'password' },
-                        { key: 'smtp_from', label: 'From Address', placeholder: 'trek@example.com' },
-                      ].map(field => (
-                        <div key={field.key}>
-                          <label className="block text-xs font-medium text-slate-500 mb-1">{field.label}</label>
-                          <input
-                            type={field.type || 'text'}
-                            value={smtpValues[field.key] || ''}
-                            onChange={e => setSmtpValues(prev => ({ ...prev, [field.key]: e.target.value }))}
-                            placeholder={field.placeholder}
-                            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
-                          />
-                        </div>
-                      ))}
-                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '4px 0' }}>
-                        <div>
-                          <span className="text-xs font-medium text-slate-500">Skip TLS certificate check</span>
-                          <p className="text-[10px] text-slate-400 mt-0.5">Enable for self-signed certificates on local mail servers</p>
-                        </div>
-                        <button onClick={() => {
-                          const newVal = smtpValues.smtp_skip_tls_verify === 'true' ? 'false' : 'true'
-                          setSmtpValues(prev => ({ ...prev, smtp_skip_tls_verify: newVal }))
-                        }}
-                          className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
-                          style={{ background: smtpValues.smtp_skip_tls_verify === 'true' ? 'var(--text-primary)' : 'var(--border-primary)' }}>
-                          <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
-                            style={{ transform: smtpValues.smtp_skip_tls_verify === 'true' ? 'translateX(20px)' : 'translateX(0)' }} />
-                        </button>
-                      </div>
-                    </div>
-                  )}
-
-                  {/* Webhook settings — shown when webhook channel is active */}
-                  {(smtpValues.notification_channel || 'none') === 'webhook' && (
-                    <div className="space-y-3 pt-2 border-t border-slate-100">
-                      <p className="text-xs text-slate-400">{t('admin.webhook.hint')}</p>
-                      <div>
-                        <label className="block text-xs font-medium text-slate-500 mb-1">Webhook URL</label>
-                        <input
-                          type="text"
-                          value={smtpValues.notification_webhook_url || ''}
-                          onChange={e => setSmtpValues(prev => ({ ...prev, notification_webhook_url: e.target.value }))}
-                          placeholder="https://discord.com/api/webhooks/..."
-                          className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
-                        />
-                        <p className="text-[10px] text-slate-400 mt-1">TREK will POST JSON with event, title, body, and timestamp to this URL.</p>
-                      </div>
-                    </div>
-                  )}
-
-                  {/* Save + Test buttons */}
-                  <div className="flex items-center gap-2 pt-2 border-t border-slate-100">
-                    <button
-                      onClick={async () => {
-                        const notifKeys = ['notification_channel', 'notification_webhook_url', 'smtp_host', 'smtp_port', 'smtp_user', 'smtp_pass', 'smtp_from', 'smtp_skip_tls_verify', 'notify_trip_invite', 'notify_booking_change', 'notify_trip_reminder', 'notify_vacay_invite', 'notify_photos_shared', 'notify_collab_message', 'notify_packing_tagged']
-                        const payload: Record<string, string> = {}
-                        for (const k of notifKeys) { if (smtpValues[k] !== undefined) payload[k] = smtpValues[k] }
-                        try {
-                          await authApi.updateAppSettings(payload)
-                          toast.success(t('admin.notifications.saved'))
-                          authApi.getAppConfig().then((c: { trip_reminders_enabled?: boolean }) => {
-                            if (c?.trip_reminders_enabled !== undefined) setTripRemindersEnabled(c.trip_reminders_enabled)
-                          }).catch(() => {})
-                        } catch { toast.error(t('common.error')) }
-                      }}
-                      className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm font-medium hover:bg-slate-800 transition-colors"
-                    >
-                      <Save className="w-4 h-4" />
-                      {t('common.save')}
-                    </button>
-                    {(smtpValues.notification_channel || 'none') === 'email' && (
-                      <button
-                        onClick={async () => {
-                          const smtpKeys = ['smtp_host', 'smtp_port', 'smtp_user', 'smtp_pass', 'smtp_from', 'smtp_skip_tls_verify']
-                          const payload: Record<string, string> = {}
-                          for (const k of smtpKeys) { if (smtpValues[k] !== undefined) payload[k] = smtpValues[k] }
-                          await authApi.updateAppSettings(payload).catch(() => {})
-                          try {
-                            const result = await notificationsApi.testSmtp()
-                            if (result.success) toast.success(t('admin.smtp.testSuccess'))
-                            else toast.error(result.error || t('admin.smtp.testFailed'))
-                          } catch { toast.error(t('admin.smtp.testFailed')) }
-                        }}
-                        className="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors"
-                      >
-                        {t('admin.smtp.testButton')}
-                      </button>
-                    )}
-                    {(smtpValues.notification_channel || 'none') === 'webhook' && (
-                      <button
-                        onClick={async () => {
-                          if (smtpValues.notification_webhook_url) {
-                            await authApi.updateAppSettings({ notification_webhook_url: smtpValues.notification_webhook_url }).catch(() => {})
-                          }
-                          try {
-                            const result = await notificationsApi.testWebhook()
-                            if (result.success) toast.success(t('admin.notifications.testWebhookSuccess'))
-                            else toast.error(result.error || t('admin.notifications.testWebhookFailed'))
-                          } catch { toast.error(t('admin.notifications.testWebhookFailed')) }
-                        }}
-                        className="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors"
-                      >
-                        {t('admin.notifications.testWebhook')}
-                      </button>
-                    )}
-                  </div>
-                </div>
-              </div>
-
               {/* Danger Zone */}
               <div className="bg-white rounded-xl border border-red-200 overflow-hidden">
                 <div className="px-6 py-4 border-b border-red-100 bg-red-50">
@@ -1179,6 +1099,208 @@ export default function AdminPage(): React.ReactElement {
             </div>
           )}
 
+          {activeTab === 'notification-channels' && (() => {
+            // Derive active channels from smtpValues.notification_channels (plural)
+            // with fallback to notification_channel (singular) for existing installs
+            const rawChannels = smtpValues.notification_channels ?? smtpValues.notification_channel ?? 'none'
+            const activeChans = rawChannels === 'none' ? [] : rawChannels.split(',').map((c: string) => c.trim())
+            const emailActive = activeChans.includes('email')
+            const webhookActive = activeChans.includes('webhook')
+
+            const setChannels = async (email: boolean, webhook: boolean) => {
+              const chans = [email && 'email', webhook && 'webhook'].filter(Boolean).join(',') || 'none'
+              setSmtpValues(prev => ({ ...prev, notification_channels: chans }))
+              try {
+                await authApi.updateAppSettings({ notification_channels: chans })
+              } catch {
+                // Revert state on failure
+                const reverted = [emailActive && 'email', webhookActive && 'webhook'].filter(Boolean).join(',') || 'none'
+                setSmtpValues(prev => ({ ...prev, notification_channels: reverted }))
+                toast.error(t('common.error'))
+              }
+            }
+
+            const smtpConfigured = !!(smtpValues.smtp_host?.trim())
+            const saveNotifications = async () => {
+              // Saves credentials only — channel activation is auto-saved by the toggle
+              const notifKeys = ['smtp_host', 'smtp_port', 'smtp_user', 'smtp_pass', 'smtp_from', 'smtp_skip_tls_verify']
+              const payload: Record<string, string> = {}
+              for (const k of notifKeys) { if (smtpValues[k] !== undefined) payload[k] = smtpValues[k] }
+              try {
+                await authApi.updateAppSettings(payload)
+                toast.success(t('admin.notifications.saved'))
+                authApi.getAppConfig().then((c: { trip_reminders_enabled?: boolean }) => {
+                  if (c?.trip_reminders_enabled !== undefined) setTripRemindersEnabled(c.trip_reminders_enabled)
+                }).catch(() => {})
+              } catch { toast.error(t('common.error')) }
+            }
+
+            return (
+              <div className="space-y-4">
+                {/* Email Panel */}
+                <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+                  <div className="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
+                    <div>
+                      <h2 className="font-semibold text-slate-900">{t('admin.notifications.emailPanel.title')}</h2>
+                      <p className="text-xs text-slate-400 mt-1">{t('admin.smtp.hint')}</p>
+                    </div>
+                    <button
+                      onClick={() => setChannels(!emailActive, webhookActive)}
+                      className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0"
+                      style={{ background: emailActive ? 'var(--text-primary)' : 'var(--border-primary)' }}
+                    >
+                      <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
+                        style={{ transform: emailActive ? 'translateX(20px)' : 'translateX(0)' }} />
+                    </button>
+                  </div>
+                  <div className={`p-6 space-y-3 ${!emailActive ? 'opacity-50 pointer-events-none' : ''}`}>
+                    {smtpLoaded && [
+                      { key: 'smtp_host', label: 'SMTP Host', placeholder: 'mail.example.com' },
+                      { key: 'smtp_port', label: 'SMTP Port', placeholder: '587' },
+                      { key: 'smtp_user', label: 'SMTP User', placeholder: 'trek@example.com' },
+                      { key: 'smtp_pass', label: 'SMTP Password', placeholder: '••••••••', type: 'password' },
+                      { key: 'smtp_from', label: 'From Address', placeholder: 'trek@example.com' },
+                    ].map(field => (
+                      <div key={field.key}>
+                        <label className="block text-xs font-medium text-slate-500 mb-1">{field.label}</label>
+                        <input
+                          type={field.type || 'text'}
+                          value={smtpValues[field.key] || ''}
+                          onChange={e => setSmtpValues(prev => ({ ...prev, [field.key]: e.target.value }))}
+                          placeholder={field.placeholder}
+                          className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+                        />
+                      </div>
+                    ))}
+                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '4px 0' }}>
+                      <div>
+                        <span className="text-xs font-medium text-slate-500">Skip TLS certificate check</span>
+                        <p className="text-[10px] text-slate-400 mt-0.5">Enable for self-signed certificates on local mail servers</p>
+                      </div>
+                      <button onClick={() => {
+                        const newVal = smtpValues.smtp_skip_tls_verify === 'true' ? 'false' : 'true'
+                        setSmtpValues(prev => ({ ...prev, smtp_skip_tls_verify: newVal }))
+                      }}
+                        className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+                        style={{ background: smtpValues.smtp_skip_tls_verify === 'true' ? 'var(--text-primary)' : 'var(--border-primary)' }}>
+                        <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
+                          style={{ transform: smtpValues.smtp_skip_tls_verify === 'true' ? 'translateX(20px)' : 'translateX(0)' }} />
+                      </button>
+                    </div>
+                  </div>
+                  <div className="px-6 pb-4 flex items-center gap-2 border-t border-slate-100 pt-4">
+                    <button onClick={saveNotifications}
+                      className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm font-medium hover:bg-slate-800 transition-colors">
+                      <Save className="w-4 h-4" />{t('common.save')}
+                    </button>
+                    <button
+                      onClick={async () => {
+                        const smtpKeys = ['smtp_host', 'smtp_port', 'smtp_user', 'smtp_pass', 'smtp_from', 'smtp_skip_tls_verify']
+                        const payload: Record<string, string> = {}
+                        for (const k of smtpKeys) { if (smtpValues[k] !== undefined) payload[k] = smtpValues[k] }
+                        await authApi.updateAppSettings(payload).catch(() => {})
+                        try {
+                          const result = await notificationsApi.testSmtp()
+                          if (result.success) toast.success(t('admin.smtp.testSuccess'))
+                          else toast.error(result.error || t('admin.smtp.testFailed'))
+                        } catch { toast.error(t('admin.smtp.testFailed')) }
+                      }}
+                      disabled={!smtpConfigured}
+                      className="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors disabled:opacity-40"
+                    >
+                      {t('admin.smtp.testButton')}
+                    </button>
+                  </div>
+                </div>
+
+                {/* Webhook Panel */}
+                <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+                  <div className="px-6 py-4 flex items-center justify-between">
+                    <div>
+                      <h2 className="font-semibold text-slate-900">{t('admin.notifications.webhookPanel.title')}</h2>
+                      <p className="text-xs text-slate-400 mt-1">{t('admin.webhook.hint')}</p>
+                    </div>
+                    <button
+                      onClick={() => setChannels(emailActive, !webhookActive)}
+                      className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0"
+                      style={{ background: webhookActive ? 'var(--text-primary)' : 'var(--border-primary)' }}
+                    >
+                      <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
+                        style={{ transform: webhookActive ? 'translateX(20px)' : 'translateX(0)' }} />
+                    </button>
+                  </div>
+                </div>
+
+                {/* In-App Panel */}
+                <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+                  <div className="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
+                    <div>
+                      <h2 className="font-semibold text-slate-900">{t('admin.notifications.inappPanel.title')}</h2>
+                      <p className="text-xs text-slate-400 mt-1">{t('admin.notifications.inappPanel.hint')}</p>
+                    </div>
+                    <div className="relative inline-flex h-6 w-11 items-center rounded-full flex-shrink-0"
+                      style={{ background: 'var(--text-primary)', opacity: 0.5, cursor: 'not-allowed' }}>
+                      <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
+                        style={{ transform: 'translateX(20px)' }} />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Admin Webhook Panel */}
+                <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+                  <div className="px-6 py-4 border-b border-slate-100">
+                    <h2 className="font-semibold text-slate-900">{t('admin.notifications.adminWebhookPanel.title')}</h2>
+                    <p className="text-xs text-slate-400 mt-1">{t('admin.notifications.adminWebhookPanel.hint')}</p>
+                  </div>
+                  <div className="p-6 space-y-3">
+                    {smtpLoaded && (
+                      <div>
+                        <label className="block text-xs font-medium text-slate-500 mb-1">{t('admin.notifications.adminWebhookPanel.title')}</label>
+                        <input
+                          type="text"
+                          value={smtpValues.admin_webhook_url || ''}
+                          onChange={e => setSmtpValues(prev => ({ ...prev, admin_webhook_url: e.target.value }))}
+                          placeholder="https://discord.com/api/webhooks/..."
+                          className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+                        />
+                      </div>
+                    )}
+                  </div>
+                  <div className="px-6 pb-4 flex items-center gap-2 border-t border-slate-100 pt-4">
+                    <button
+                      onClick={async () => {
+                        try {
+                          await authApi.updateAppSettings({ admin_webhook_url: smtpValues.admin_webhook_url || '' })
+                          toast.success(t('admin.notifications.adminWebhookPanel.saved'))
+                        } catch { toast.error(t('common.error')) }
+                      }}
+                      className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm font-medium hover:bg-slate-800 transition-colors">
+                      <Save className="w-4 h-4" />{t('common.save')}
+                    </button>
+                    <button
+                      onClick={async () => {
+                        if (!smtpValues.admin_webhook_url) return
+                        try {
+                          await authApi.updateAppSettings({ admin_webhook_url: smtpValues.admin_webhook_url }).catch(() => {})
+                          const result = await notificationsApi.testWebhook(smtpValues.admin_webhook_url)
+                          if (result.success) toast.success(t('admin.notifications.adminWebhookPanel.testSuccess'))
+                          else toast.error(result.error || t('admin.notifications.adminWebhookPanel.testFailed'))
+                        } catch { toast.error(t('admin.notifications.adminWebhookPanel.testFailed')) }
+                      }}
+                      disabled={!smtpValues.admin_webhook_url?.trim()}
+                      className="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors disabled:opacity-40"
+                    >
+                      {t('admin.smtp.testButton')}
+                    </button>
+                  </div>
+                </div>
+
+              </div>
+            )
+          })()}
+
+          {activeTab === 'admin-notifications' && <AdminNotificationsPanel t={t} toast={toast} />}
+
           {activeTab === 'backup' && <BackupPanel />}
 
           {activeTab === 'audit' && <AuditLogPanel serverTimezone={serverTimezone} />}

client/src/pages/LoginPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useAuthStore } from '../store/authStore'
 import { useSettingsStore } from '../store/settingsStore'
@@ -34,6 +34,16 @@ export default function LoginPage(): React.ReactElement {
   const { setLanguageLocal } = useSettingsStore()
   const navigate = useNavigate()
 
+  const redirectTarget = useMemo(() => {
+    const params = new URLSearchParams(window.location.search)
+    const redirect = params.get('redirect')
+    // Only allow relative paths starting with / to prevent open redirect attacks
+    if (redirect && redirect.startsWith('/') && !redirect.startsWith('//') && !redirect.startsWith('/\\')) {
+      return redirect
+    }
+    return '/dashboard'
+  }, [])
+
   useEffect(() => {
     const params = new URLSearchParams(window.location.search)
 
@@ -99,7 +109,7 @@ export default function LoginPage(): React.ReactElement {
     try {
       await demoLogin()
       setShowTakeoff(true)
-      setTimeout(() => navigate('/dashboard'), 2600)
+      setTimeout(() => navigate(redirectTarget), 2600)
     } catch (err: unknown) {
       setError(err instanceof Error ? err.message : t('login.demoFailed'))
     } finally {
@@ -128,7 +138,7 @@ export default function LoginPage(): React.ReactElement {
         await authApi.changePassword({ current_password: savedLoginPassword, new_password: newPassword })
         await loadUser({ silent: true })
         setShowTakeoff(true)
-        setTimeout(() => navigate('/dashboard'), 2600)
+        setTimeout(() => navigate(redirectTarget), 2600)
         return
       }
       if (mode === 'login' && mfaStep) {
@@ -145,7 +155,7 @@ export default function LoginPage(): React.ReactElement {
           return
         }
         setShowTakeoff(true)
-        setTimeout(() => navigate('/dashboard'), 2600)
+        setTimeout(() => navigate(redirectTarget), 2600)
         return
       }
       if (mode === 'register') {
@@ -169,7 +179,7 @@ export default function LoginPage(): React.ReactElement {
         }
       }
       setShowTakeoff(true)
-      setTimeout(() => navigate('/dashboard'), 2600)
+      setTimeout(() => navigate(redirectTarget), 2600)
     } catch (err: unknown) {
       setError(getApiErrorMessage(err, t('login.error')))
       setIsLoading(false)

client/src/pages/SettingsPage.tsx

@@ -7,7 +7,7 @@ import Navbar from '../components/Layout/Navbar'
 import CustomSelect from '../components/shared/CustomSelect'
 import { useToast } from '../components/shared/Toast'
 import { Save, Map, Palette, User, Moon, Sun, Monitor, Shield, Camera, Trash2, Lock, KeyRound, AlertTriangle, Copy, Download, Printer, Terminal, Plus, Check, Info } from 'lucide-react'
-import { authApi, adminApi } from '../api/client'
+import { authApi, adminApi, notificationsApi, settingsApi } from '../api/client'
 import apiClient from '../api/client'
 import { useAddonStore } from '../store/addonStore'
 import type { LucideIcon } from 'lucide-react'
@@ -75,37 +75,173 @@ function ToggleSwitch({ on, onToggle }: { on: boolean; onToggle: () => void }) {
   )
 }
 
+interface PreferencesMatrix {
+  preferences: Record<string, Record<string, boolean>>
+  available_channels: { email: boolean; webhook: boolean; inapp: boolean }
+  event_types: string[]
+  implemented_combos: Record<string, string[]>
+}
+
+const CHANNEL_LABEL_KEYS: Record<string, string> = {
+  email: 'settings.notificationPreferences.email',
+  webhook: 'settings.notificationPreferences.webhook',
+  inapp: 'settings.notificationPreferences.inapp',
+}
+
+const EVENT_LABEL_KEYS: Record<string, string> = {
+  trip_invite: 'settings.notifyTripInvite',
+  booking_change: 'settings.notifyBookingChange',
+  trip_reminder: 'settings.notifyTripReminder',
+  vacay_invite: 'settings.notifyVacayInvite',
+  photos_shared: 'settings.notifyPhotosShared',
+  collab_message: 'settings.notifyCollabMessage',
+  packing_tagged: 'settings.notifyPackingTagged',
+  version_available: 'settings.notifyVersionAvailable',
+}
+
 function NotificationPreferences({ t }: { t: any; memoriesEnabled: boolean }) {
-  const [notifChannel, setNotifChannel] = useState<string>('none')
+  const [matrix, setMatrix] = useState<PreferencesMatrix | null>(null)
+  const [saving, setSaving] = useState(false)
+  const [webhookUrl, setWebhookUrl] = useState('')
+  const [webhookSaving, setWebhookSaving] = useState(false)
+  const [webhookTesting, setWebhookTesting] = useState(false)
+  const toast = useToast()
+
   useEffect(() => {
-    authApi.getAppConfig?.().then((cfg: any) => {
-      if (cfg?.notification_channel) setNotifChannel(cfg.notification_channel)
+    notificationsApi.getPreferences().then((data: PreferencesMatrix) => setMatrix(data)).catch(() => {})
+    settingsApi.get().then((data: { settings: Record<string, unknown> }) => {
+      setWebhookUrl((data.settings?.webhook_url as string) || '')
     }).catch(() => {})
   }, [])
 
-  if (notifChannel === 'none') {
+  if (!matrix) return <p style={{ fontSize: 12, color: 'var(--text-faint)', fontStyle: 'italic' }}>Loading…</p>
+
+  // Which channels are both available AND have at least one implemented event
+  const visibleChannels = (['email', 'webhook', 'inapp'] as const).filter(ch => {
+    if (!matrix.available_channels[ch]) return false
+    return matrix.event_types.some(evt => matrix.implemented_combos[evt]?.includes(ch))
+  })
+
+  if (visibleChannels.length === 0) {
     return (
       <p style={{ fontSize: 12, color: 'var(--text-faint)', fontStyle: 'italic' }}>
-        {t('settings.notificationsDisabled')}
+        {t('settings.notificationPreferences.noChannels')}
       </p>
     )
   }
 
-  const channelLabel = notifChannel === 'email'
-    ? (t('admin.notifications.email') || 'Email (SMTP)')
-    : (t('admin.notifications.webhook') || 'Webhook')
+  const toggle = async (eventType: string, channel: string) => {
+    const current = matrix.preferences[eventType]?.[channel] ?? true
+    const updated = {
+      ...matrix.preferences,
+      [eventType]: { ...matrix.preferences[eventType], [channel]: !current },
+    }
+    setMatrix(m => m ? { ...m, preferences: updated } : m)
+    setSaving(true)
+    try {
+      await notificationsApi.updatePreferences(updated)
+    } catch {
+      // Revert on failure
+      setMatrix(m => m ? { ...m, preferences: matrix.preferences } : m)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const saveWebhookUrl = async () => {
+    setWebhookSaving(true)
+    try {
+      await settingsApi.set('webhook_url', webhookUrl)
+      toast.success(t('settings.webhookUrl.saved'))
+    } catch {
+      toast.error(t('common.error'))
+    } finally {
+      setWebhookSaving(false)
+    }
+  }
+
+  const testWebhookUrl = async () => {
+    if (!webhookUrl) return
+    setWebhookTesting(true)
+    try {
+      const result = await notificationsApi.testWebhook(webhookUrl)
+      if (result.success) toast.success(t('settings.webhookUrl.testSuccess'))
+      else toast.error(result.error || t('settings.webhookUrl.testFailed'))
+    } catch {
+      toast.error(t('settings.webhookUrl.testFailed'))
+    } finally {
+      setWebhookTesting(false)
+    }
+  }
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-        <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#22c55e', flexShrink: 0 }} />
-        <span style={{ fontSize: 13, color: 'var(--text-primary)', fontWeight: 500 }}>
-          {t('settings.notificationsActive')}: {channelLabel}
-        </span>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
+      {saving && <p style={{ fontSize: 11, color: 'var(--text-faint)', marginBottom: 8 }}>Saving…</p>}
+      {/* Webhook URL configuration */}
+      {matrix.available_channels.webhook && (
+        <div style={{ marginBottom: 16, padding: '12px', background: 'var(--bg-secondary)', borderRadius: 8, border: '1px solid var(--border-primary)' }}>
+          <label style={{ display: 'block', fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 }}>
+            {t('settings.webhookUrl.label')}
+          </label>
+          <p style={{ fontSize: 11, color: 'var(--text-faint)', marginBottom: 8 }}>{t('settings.webhookUrl.hint')}</p>
+          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+            <input
+              type="text"
+              value={webhookUrl}
+              onChange={e => setWebhookUrl(e.target.value)}
+              placeholder={t('settings.webhookUrl.placeholder')}
+              style={{ flex: 1, fontSize: 13, padding: '6px 10px', border: '1px solid var(--border-primary)', borderRadius: 6, background: 'var(--bg-primary)', color: 'var(--text-primary)' }}
+            />
+            <button
+              onClick={saveWebhookUrl}
+              disabled={webhookSaving}
+              style={{ fontSize: 12, padding: '6px 12px', background: 'var(--text-primary)', color: 'var(--bg-primary)', border: 'none', borderRadius: 6, cursor: webhookSaving ? 'not-allowed' : 'pointer', opacity: webhookSaving ? 0.6 : 1 }}
+            >
+              {t('settings.webhookUrl.save')}
+            </button>
+            <button
+              onClick={testWebhookUrl}
+              disabled={!webhookUrl || webhookTesting}
+              style={{ fontSize: 12, padding: '6px 12px', background: 'transparent', color: 'var(--text-secondary)', border: '1px solid var(--border-primary)', borderRadius: 6, cursor: (!webhookUrl || webhookTesting) ? 'not-allowed' : 'pointer', opacity: (!webhookUrl || webhookTesting) ? 0.5 : 1 }}
+            >
+              {t('settings.webhookUrl.test')}
+            </button>
+          </div>
+        </div>
+      )}
+      {/* Header row */}
+      <div style={{ display: 'grid', gridTemplateColumns: `1fr ${visibleChannels.map(() => '64px').join(' ')}`, gap: 4, paddingBottom: 6, marginBottom: 4, borderBottom: '1px solid var(--border-primary)' }}>
+        <span />
+        {visibleChannels.map(ch => (
+          <span key={ch} style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textAlign: 'center', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+            {t(CHANNEL_LABEL_KEYS[ch]) || ch}
+          </span>
+        ))}
       </div>
-      <p style={{ fontSize: 12, color: 'var(--text-faint)', margin: 0, lineHeight: 1.5 }}>
-        {t('settings.notificationsManagedByAdmin')}
-      </p>
+      {/* Event rows */}
+      {matrix.event_types.map(eventType => {
+        const implementedForEvent = matrix.implemented_combos[eventType] ?? []
+        const relevantChannels = visibleChannels.filter(ch => implementedForEvent.includes(ch))
+        if (relevantChannels.length === 0) return null
+        return (
+          <div key={eventType} style={{ display: 'grid', gridTemplateColumns: `1fr ${visibleChannels.map(() => '64px').join(' ')}`, gap: 4, alignItems: 'center', padding: '6px 0', borderBottom: '1px solid var(--border-primary)' }}>
+            <span style={{ fontSize: 13, color: 'var(--text-primary)' }}>
+              {t(EVENT_LABEL_KEYS[eventType]) || eventType}
+            </span>
+            {visibleChannels.map(ch => {
+              if (!implementedForEvent.includes(ch)) {
+                return <span key={ch} style={{ textAlign: 'center', color: 'var(--text-faint)', fontSize: 14 }}>—</span>
+              }
+              const isOn = matrix.preferences[eventType]?.[ch] ?? true
+              return (
+                <div key={ch} style={{ display: 'flex', justifyContent: 'center' }}>
+                  <ToggleSwitch on={isOn} onToggle={() => toggle(eventType, ch)} />
+                </div>
+              )
+            })}
+          </div>
+        )
+      })}
     </div>
   )
 }