Workflow Guide

This guide walks through the key UI workflows for using the Notification System in the LiveHealth frontend. It assumes the backend, FCM, and frontend configuration are already completed as described in:

• Notification System Overview
• LiveHealth Frontend – Prerequisites

Accessing the Notification Inbox

1. Login to Organisation Portal
   • Log in to the LiveHealth organisation login as a lab user or admin.
2. Locate the Notification Icon
   • In the sidebar, find the notification bell/icon.
   • A badge on the icon shows the current unread notification count.
3. Open the Notification Center
   • Click the notification icon.
   • The Notification Center opens, showing a grid/list of notifications.

What You See in the Inbox

• Unread vs Read: Unread rows are visually highlighted; read rows use a normal style.
• Columns (may vary slightly per environment):
  • Notification type / category
  • Message title and short body
  • Created at timestamp
  • Read by / read on (where applicable)
• Pagination:
  • A Load more control is available when more results exist.
  • Older notifications are loaded in batches to keep the grid performant.

Viewing and Filtering Notifications

1. Initial Load
   • When the Notification Center opens, it calls getInitialData() which:
     • Fetches notification types
     • Fetches notifications within the default date range
     • Updates the unread badge count
2. Filter by Status
   • Use the status filter to switch between:
     • All
     • Unread
     • Read
3. Filter by Date Range
   • Use the date filter to limit notifications to a specific period.
   • The UI enforces a maximum range (e.g. up to 6 months / record cap) to keep responses efficient.
4. Search
   • Use the search box to filter by:
     • Title
     • Message body
     • Additional data fields (e.g. identifiers shown in the grid)

Acting on a Notification

1. Open a Notification
   • Click on a notification row in the grid.
   • onRowClickHandler() runs and:
     • If the notification is unread, it triggers handleReadUnread() which calls the read API.
     • Updates Redux state so the row becomes read and the unread badge count is decremented.
2. Navigate to the Related Screen
   • For report-related notifications (e.g. OrgReportReady, Critical Report):
     • The UI invokes openReportHandler() (or equivalent) to open:
       • The Report Review Modal; or
       • The relevant report / screen in a new view.
3. Bulk Mark as Read (if available)
   • Use the bulk selection options (where implemented) to:
     • Select multiple notifications.
     • Mark them all as read in a single action.

Organisation-Level Notifications (Lab Login)

Some notifications are organisation-scoped rather than user-only.

1. Open Organisation Notifications Screen
   • From the lab login, navigate to the Organisation Notification screen (implemented in OrganisationLogin/Notification module).
2. Review Organisation Messages
   • View notifications that apply to the organisation as a whole, such as:
     • Organisation report readiness
     • System or configuration announcements
3. Interact Similar to Personal Inbox
   • The UX is similar to the personal notification center:
     • Filter, search, and paginate
     • Click to open details / review modals
     • Mark as read/unread

Managing Notification Preferences

Depending on your role and environment, the following preference workflows may be available:

For Individual Users

1. Open User Notification Settings
   • Navigate to your profile/settings section.
   • Open the Notification Settings screen.
2. Configure Preferences
   • Enable or disable specific notification types (e.g. Critical Reports, Org Reports, Application Messages).
   • Choose delivery channels:
     • Browser push
     • In‑app
     • Both
3. Save Changes
   • Save your preferences; subsequent notifications will respect these settings.

For Lab Administrators

1. Open Lab Notification Settings
   • Navigate to the Lab / Organisation settings area.
   • Open the Lab Notification Settings or equivalent configuration screen.
2. Configure Lab-Level Types
   • Enable/disable notification types for the entire lab.
   • Optionally customise message templates for certain notifications.
3. Review Activity Logs
   • Use the notification history / activity log to:
     • Verify that notifications are being generated.
     • Check who received and read them.

Environment-Specific Notes

• UAT vs Production
  • UAT environments may:
    • Use test topics and restricted recipients.
    • Have lower thresholds or different rate limits.
  • Production environments:
    • Use real organisation topics and production Firebase projects.
    • Must be validated after rollout (see roadmap and deployment tasks).
• Permissions
  • Browser notification permission must be accepted for push notifications to appear.
  • If denied, users will still see in‑app notifications and the Notification Center, but no browser push.

Related Documentation

• LiveHealth Frontend – Overview
• LiveHealth Frontend – Prerequisites
• LiveHealth Frontend – Components