Notifications Page Documentation

Overview

The Notifications Page in the Vantage platform serves as a central hub for users to receive, manage, and track notifications related to various activities and changes in the system. This page facilitates better awareness and response to critical issues, system updates, and user-specific tasks. Notifications are categorized and can be filtered according to user preferences, ensuring a streamlined user experience and prompt attention to urgent matters.

Purpose

The Notifications Page aims to:

1. Display a list of notifications for user awareness.
2. Allow users to filter notifications based on their status or severity.
3. Enable users to mark notifications as read or dismiss them altogether.
4. Present a loading state while notifications are being fetched for a seamless user experience.

How It Works

The Notifications Page leverages a notification store to fetch notifications upon component mount. The notifications are then filtered according to the selected criteria (all, unread, or critical). The component manages state and handles side effects internally. Moreover, it employs icons and color codes to provide a visual representation of notification severity, enhancing the user's ability to prioritize which notifications to address first.

Data Expectations

• Notifications Array: The main data source expects an array of notification objects, each containing:
  • id: Unique identifier for the notification.
  • title: Brief summary of the notification's purpose.
  • message: Detailed information about the notification.
  • created: Timestamp indicating when the notification was created.
  • status: Indicates whether the notification is 'unread' or 'read'.
  • severity: Defines the urgency of the notification (e.g., critical, warning, informational).
  • type: Categorizes the notification (e.g., workflow_failure, task_assignment, billing, system, ai_context).

Settings

The Notifications Page includes several settings, which determine its behavior and appearance:

1. activeFilter

   • Input Type: String
   • Description: This setting controls the current filter applied to the notification list. Possible values are 'all', 'unread', and 'critical'. Changing this setting will filter the notifications displayed to the user based on their status or urgency.
   • Default Value: 'all'

2. unreadCount

   • Input Type: Numeric
   • Description: This represents the total count of unread notifications. It is utilized to inform users about the volume of notifications that require their attention. When this count is greater than zero, it prompts the display of a "Mark all as read" button.
   • Default Value: 0 (this value automatically updates as notifications are marked as read).

3. total

   • Input Type: Numeric
   • Description: This indicates the total number of notifications available to the user. It provides essential context about the user's notification landscape.
   • Default Value: Depends on the initial state of notifications fetched from the notification store.

4. isLoading

   • Input Type: Boolean
   • Description: This indicates whether the notifications are currently being loaded from the data store. If true, it triggers the display of a loading spinner to inform users that the notifications are still being fetched.
   • Default Value: true (initially while fetching notifications).

5. fetchNotifications

   • Input Type: Function
   • Description: A function that is invoked on component mount to retrieve the user's notifications. It updates the notifications state in the store.
   • Default Value: Code-implemented function, no default value in the conventional sense.

6. markAs

   • Input Type: Function
   • Description: This function is used to mark notifications as read or dismissed based on the input parameters passed (notification IDs and the action type). It directly affects the notification's status.
   • Default Value: Code-implemented function, no default value in the conventional sense.

7. markAllAsRead

   • Input Type: Function
   • Description: This function is called when a user chooses to mark all unread notifications as read. It modifies the state of all notifications accordingly, ensuring users can clear their notification list efficiently.
   • Default Value: Code-implemented function, no default value in the conventional sense.

Use Cases & Examples

Use Case 1: Project Management Enhancement

In a project management context, users can receive notifications for newly assigned tasks, workflow failures, or updates to project statuses. The Notifications Page allows project managers to quickly view and address urgent task assignments or critical alerts, thus enhancing workflow efficiency.

Use Case 2: Monitoring System Health

IT administrators can utilize the Notifications Page to monitor the health of systems and applications actively. Critical notifications, such as system downtimes or severe errors, can trigger immediate attention, allowing IT staff to resolve issues swiftly.

Use Case 3: Billing Notifications

Finance teams can track billing-related notifications through the Notifications Page. Alerts for overdue invoices or confirmations of payments can be clearly presented, ensuring ongoing management of financial operations.

Example Configuration

Use Case: A project manager wants to stay updated on all notifications but is especially concerned with unread tasks and workflow failures.

Configuration Data:

{
  "activeFilter": "unread",
  "unreadCount": 5,
  "total": 25,
  "isLoading": false,
  "fetchNotifications": "function to fetch notifications",
  "markAs": "function to mark notifications",
  "markAllAsRead": "function to mark all as read"
}

In this setup, the project manager has set the active filter to 'unread' to prioritize notifications that need immediate action. The total of 25 notifications indicates that they should expect a busy inbox. The unreadCount of 5 alerts them to the specific notifications that require attention. As a result, the user experience is focused and effective, enabling quick responses to critical tasks.