fixed notification system and added a new tenant notifications receipt table to track read status and filter messages by scope.

resources/js/admin/mobile/NotificationsPage.tsx

@@ -7,7 +7,7 @@ import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
 import { MobileShell } from './components/MobileShell';
 import { MobileCard, PillBadge } from './components/Primitives';
-import { GuestNotificationSummary, listGuestNotifications } from '../api';
+import { listNotificationLogs, markNotificationLogs, NotificationLogEntry } from '../api';
 import { isAuthError } from '../auth/tokens';
 import { getApiErrorMessage } from '../lib/apiError';
 import toast from 'react-hot-toast';
@@ -21,18 +21,184 @@ type NotificationItem = {
   body: string;
   time: string;
   tone: 'info' | 'warning';
+  eventId?: number | null;
+  is_read?: boolean;
+  scope: 'photos' | 'guests' | 'gallery' | 'events' | 'package' | 'general';
 };
 
-async function loadNotifications(slug?: string): Promise<NotificationItem[]> {
+function formatLog(
+  log: NotificationLogEntry,
+  t: (key: string, defaultValue?: string, options?: Record<string, unknown>) => string,
+  eventName?: string | null
+): NotificationItem {
+  const ctx = log.context ?? {};
+  const limit = typeof ctx.limit === 'number' ? ctx.limit : null;
+  const used = typeof ctx.used === 'number' ? ctx.used : null;
+  const remaining = typeof ctx.remaining === 'number' ? ctx.remaining : null;
+  const days = typeof ctx.day === 'number' ? ctx.day : null;
+  const ctxEventId = ctx.event_id ?? ctx.eventId;
+  const eventId = typeof ctxEventId === 'string' ? Number(ctxEventId) : (typeof ctxEventId === 'number' ? ctxEventId : null);
+  const name = eventName ?? t('mobileNotifications.unknownEvent', 'Event');
+  const isRead = log.is_read === true;
+  const scope = (() => {
+    switch (log.type) {
+      case 'photo_limit':
+      case 'photo_threshold':
+        return 'photos';
+      case 'guest_limit':
+      case 'guest_threshold':
+        return 'guests';
+      case 'gallery_warning':
+      case 'gallery_expired':
+        return 'gallery';
+      case 'event_limit':
+      case 'event_threshold':
+        return 'events';
+      case 'package_expiring':
+      case 'package_expired':
+        return 'package';
+      default:
+        return 'general';
+    }
+  })();
+
+  switch (log.type) {
+    case 'photo_limit':
+      return {
+        id: String(log.id),
+        title: t('notificationLogs.photoLimit.title', 'Photo limit reached'),
+        body: t('notificationLogs.photoLimit.body', '{{event}} reached its photo limit of {{limit}}.', {
+          event: name,
+          limit: limit ?? '—',
+        }),
+        time: log.sent_at ?? log.failed_at ?? '',
+        tone: 'warning',
+        eventId,
+        is_read: isRead,
+        scope,
+      };
+    case 'guest_limit':
+      return {
+        id: String(log.id),
+        title: t('notificationLogs.guestLimit.title', 'Guest limit reached'),
+        body: t('notificationLogs.guestLimit.body', '{{event}} reached its guest limit of {{limit}}.', {
+          event: name,
+          limit: limit ?? '—',
+        }),
+        time: log.sent_at ?? log.failed_at ?? '',
+        tone: 'warning',
+        eventId,
+        is_read: isRead,
+        scope,
+      };
+    case 'event_limit':
+      return {
+        id: String(log.id),
+        title: t('notificationLogs.eventLimit.title', 'Event quota reached'),
+        body: t('notificationLogs.eventLimit.body', 'Your package allows no more events. Limit: {{limit}}.', {
+          limit: limit ?? '—',
+        }),
+        time: log.sent_at ?? log.failed_at ?? '',
+        tone: 'warning',
+        eventId,
+        is_read: isRead,
+        scope,
+      };
+    case 'gallery_warning':
+      return {
+        id: String(log.id),
+        title: t('notificationLogs.galleryWarning.title', 'Gallery expiring soon'),
+        body: t('notificationLogs.galleryWarning.body', '{{event}} expires in {{days}} days.', {
+          event: name,
+          days: days ?? ctx.threshold ?? '—',
+        }),
+        time: log.sent_at ?? log.failed_at ?? '',
+        tone: 'warning',
+        eventId,
+        is_read: isRead,
+        scope,
+      };
+    case 'gallery_expired':
+      return {
+        id: String(log.id),
+        title: t('notificationLogs.galleryExpired.title', 'Gallery expired'),
+        body: t('notificationLogs.galleryExpired.body', '{{event}} gallery is offline. Extend to reactivate.', {
+          event: name,
+        }),
+        time: log.sent_at ?? log.failed_at ?? '',
+        tone: 'warning',
+        eventId,
+        is_read: isRead,
+        scope,
+      };
+    case 'photo_threshold':
+      return {
+        id: String(log.id),
+        title: t('notificationLogs.photoThreshold.title', 'Photo usage warning'),
+        body: t('notificationLogs.photoThreshold.body', '{{event}} is at {{used}} / {{limit}} photos.', {
+          event: name,
+          used: used ?? '—',
+          limit: limit ?? '—',
+        }),
+        time: log.sent_at ?? log.failed_at ?? '',
+        tone: 'info',
+        eventId,
+        is_read: isRead,
+        scope,
+      };
+    case 'guest_threshold':
+      return {
+        id: String(log.id),
+        title: t('notificationLogs.guestThreshold.title', 'Guest usage warning'),
+        body: t('notificationLogs.guestThreshold.body', '{{event}} is at {{used}} / {{limit}} guests.', {
+          event: name,
+          used: used ?? '—',
+          limit: limit ?? '—',
+        }),
+        time: log.sent_at ?? log.failed_at ?? '',
+        tone: 'info',
+        eventId,
+        is_read: isRead,
+        scope,
+      };
+    default:
+      return {
+        id: String(log.id),
+        title: log.type,
+        body: t('notificationLogs.generic.body', 'Notification sent via {{channel}}.', { channel: log.channel }),
+        time: log.sent_at ?? log.failed_at ?? '',
+        tone: 'info',
+        eventId,
+        is_read: isRead,
+        scope,
+      };
+  }
+}
+
+async function loadNotifications(
+  t: (key: string, defaultValue?: string, options?: Record<string, unknown>) => string,
+  events?: TenantEvent[],
+  filters?: { scope?: string; status?: string; eventSlug?: string }
+): Promise<NotificationItem[]> {
   try {
-    const result = slug ? await listGuestNotifications(slug) : [];
-    return (result ?? []).map((item: GuestNotificationSummary) => ({
-      id: String(item.id),
-      title: item.title || 'Notification',
-      body: item.body ?? '',
-      time: item.created_at ?? '',
-      tone: item.type === 'support_tip' ? 'warning' : 'info',
-    }));
+    const eventId = filters?.eventSlug ? (events ?? []).find((ev) => ev.slug === filters.eventSlug)?.id ?? undefined : undefined;
+    const response = await listNotificationLogs({
+      perPage: 50,
+      scope: filters?.scope && filters.scope !== 'all' ? filters.scope : undefined,
+      status: filters?.status === 'all' ? undefined : filters?.status,
+      eventId: eventId,
+    });
+    const lookup = new Map<number, string>();
+    (events ?? []).forEach((event) => {
+      lookup.set(event.id, typeof event.name === 'string' ? event.name : (event.name as Record<string, string>)?.en ?? '');
+    });
+
+    return (response.data ?? [])
+      .map((log) => {
+        const ctxEventId = log.context?.event_id ?? log.context?.eventId;
+        const parsed = typeof ctxEventId === 'string' ? Number(ctxEventId) : ctxEventId;
+        return formatLog(log, t, lookup.get(parsed as number));
+      });
   } catch (err) {
     throw err;
   }
@@ -43,6 +209,8 @@ export default function MobileNotificationsPage() {
   const { t } = useTranslation('management');
   const search = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : '');
   const slug = search.get('event') ?? undefined;
+  const scopeParam = search.get('scope') ?? 'all';
+  const statusParam = search.get('status') ?? 'unread';
   const [notifications, setNotifications] = React.useState<NotificationItem[]>([]);
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState<string | null>(null);
@@ -62,7 +230,7 @@ export default function MobileNotificationsPage() {
   const reload = React.useCallback(async () => {
     setLoading(true);
     try {
-      const data = await loadNotifications(slug ?? undefined);
+      const data = await loadNotifications(t, events, { scope: scopeParam, status: statusParam, eventSlug: slug });
       setNotifications(data);
       setError(null);
     } catch (err) {
@@ -74,7 +242,7 @@ export default function MobileNotificationsPage() {
     } finally {
       setLoading(false);
     }
-  }, [slug, t]);
+  }, [slug, t, events]);
 
   React.useEffect(() => {
     void reload();
@@ -91,6 +259,31 @@ export default function MobileNotificationsPage() {
     })();
   }, []);
 
+  const filtered = React.useMemo(() => {
+    if (!slug) return notifications;
+    const target = events.find((ev) => ev.slug === slug);
+    if (!target) return notifications;
+    return notifications.filter((item) => item.eventId === target.id || item.body.includes(String(target.name)) || item.title.includes(String(target.name)));
+  }, [notifications, slug, events]);
+
+  const scoped = React.useMemo(() => {
+    if (scopeParam === 'all') return filtered;
+    return filtered.filter((item) => item.scope === scopeParam);
+  }, [filtered, scopeParam]);
+
+  const statusFiltered = React.useMemo(() => {
+    if (statusParam === 'all') return scoped;
+    if (statusParam === 'read') return scoped.filter((item) => item.is_read);
+    return scoped.filter((item) => !item.is_read);
+  }, [scoped, statusParam]);
+
+  const unreadIds = React.useMemo(
+    () => scoped.filter((item) => !item.is_read).map((item) => Number(item.id)).filter((id) => Number.isFinite(id)),
+    [scoped]
+  );
+
+  const showFilterNotice = Boolean(slug) && filtered.length === 0 && notifications.length > 0;
+
   return (
     <MobileShell
       activeTab="home"
@@ -110,13 +303,69 @@ export default function MobileNotificationsPage() {
         </MobileCard>
       ) : null}
 
+      {showFilterNotice ? (
+        <MobileCard space="$2">
+          <Text fontSize="$sm" fontWeight="700" color={text}>
+            {t('notificationLogs.filterEmpty', 'No notifications for this event.')}
+          </Text>
+          <Pressable
+            onPress={() => {
+              navigate('/admin/mobile/notifications', { replace: true });
+            }}
+          >
+            <Text fontSize="$sm" color={primary} fontWeight="700">
+              {t('notificationLogs.clearFilter', 'Show all notifications')}
+            </Text>
+          </Pressable>
+        </MobileCard>
+      ) : null}
+
+      <XStack space="$2" marginBottom="$2">
+        <select
+          value={statusParam}
+          onChange={(e) => navigate(`/admin/mobile/notifications?${new URLSearchParams({ status: e.target.value, scope: scopeParam, event: slug ?? '' }).toString()}`)}
+          style={{ border: `1px solid ${border}`, borderRadius: 10, padding: '6px 10px', fontSize: 13 }}
+        >
+          <option value="unread">{t('notificationLogs.filter.unread', 'Unread')}</option>
+          <option value="read">{t('notificationLogs.filter.read', 'Read')}</option>
+          <option value="all">{t('notificationLogs.filter.all', 'All')}</option>
+        </select>
+        <select
+          value={scopeParam}
+          onChange={(e) => navigate(`/admin/mobile/notifications?${new URLSearchParams({ scope: e.target.value, status: statusParam, event: slug ?? '' }).toString()}`)}
+          style={{ border: `1px solid ${border}`, borderRadius: 10, padding: '6px 10px', fontSize: 13 }}
+        >
+          <option value="all">{t('notificationLogs.scope.all', 'All scopes')}</option>
+          <option value="photos">{t('notificationLogs.scope.photos', 'Photos')}</option>
+          <option value="guests">{t('notificationLogs.scope.guests', 'Guests')}</option>
+          <option value="gallery">{t('notificationLogs.scope.gallery', 'Gallery')}</option>
+          <option value="events">{t('notificationLogs.scope.events', 'Events')}</option>
+          <option value="package">{t('notificationLogs.scope.package', 'Package')}</option>
+          <option value="general">{t('notificationLogs.scope.general', 'General')}</option>
+        </select>
+        {unreadIds.length ? (
+          <CTAButton
+            label={t('notificationLogs.markAllRead', 'Mark all read')}
+            onPress={async () => {
+              try {
+                await markNotificationLogs(unreadIds, 'read');
+                void reload();
+              } catch {
+                toast.error(t('notificationLogs.markFailed', 'Could not update notifications.'));
+              }
+            }}
+            tone="ghost"
+          />
+        ) : null}
+      </XStack>
+
       {loading ? (
         <YStack space="$2">
           {Array.from({ length: 4 }).map((_, idx) => (
             <MobileCard key={`al-${idx}`} height={70} opacity={0.6} />
           ))}
         </YStack>
-      ) : notifications.length === 0 ? (
+      ) : statusFiltered.length === 0 ? (
         <MobileCard alignItems="center" justifyContent="center" space="$2">
           <Bell size={24} color={String(theme.gray9?.val ?? '#9ca3af')} />
           <Text fontSize="$sm" color={muted}>
@@ -132,8 +381,8 @@ export default function MobileNotificationsPage() {
               </Text>
             </Pressable>
           ) : null}
-          {notifications.map((item) => (
-            <MobileCard key={item.id} space="$2">
+          {statusFiltered.map((item) => (
+            <MobileCard key={item.id} space="$2" borderColor={item.is_read ? border : primary}>
               <XStack alignItems="center" space="$2">
                 <XStack
                   width={36}
@@ -153,6 +402,7 @@ export default function MobileNotificationsPage() {
                     {item.body}
                   </Text>
                 </YStack>
+                {!item.is_read ? <PillBadge tone="warning">{t('notificationLogs.unread', 'Unread')}</PillBadge> : null}
                 <PillBadge tone={item.tone === 'warning' ? 'warning' : 'muted'}>{item.time}</PillBadge>
               </XStack>
             </MobileCard>