Overview
High-level architecture and notification flow in LiveHealth frontend
👤 Development Team📅 Updated: Mar 13, 2026📁 Services🏷️ notifications🏷️ frontend🏷️ architecture🏷️ fcm
Overview
Architecture Diagram
The LiveHealth notification system follows a layered architecture:
Data Flow Diagram
Key Features
1. Notification Inbox
- Location: Accessible from sidebar navigation
- Features:
- Unread count badge
- Filter by read/unread/all
- Search functionality
- Date range filtering
- Pagination (load more)
- Mark individual notifications as read/unread
2. Background Notifications
- FCM Integration: Receives push notifications via Firebase Cloud Messaging
- Service Worker: Background notification handling
- Badge Updates: Automatic unread count updates
3. Notification Types
- Report Ready (Type 1): Lab report is ready for review
- Critical Report (Type 2): Urgent alert requiring attention
4. User Actions
- Click notification to view details
- Mark as read/unread
- Filter and search
- Open associated report
- Close/dismiss notifications
Component Structure
OrganisationLogin/Notification/
├── Container/
│ └── index.tsx # Main container component
├── Components/
│ ├── Filters/
│ │ └── index.tsx # Filter controls
│ ├── List/
│ │ └── index.tsx # Notification list grid
│ ├── ShowNotificationAlert/
│ │ └── index.tsx # Alert display
│ └── CriticalNotification/
│ └── CriticalNotificationForm.tsx
├── Utils/
│ ├── helpers.ts # API calls
│ ├── constant.ts # Constants
│ └── interface.ts # TypeScript interfaces
├── styles.module.scss # Styling
└── index.tsx # Component exportRedux State Structure
interface NotificationState {
loader: boolean; // Loading state
notificationList: JsonObject[]; // List of notifications
notificationTypeMaster: JsonObject[]; // Available notification types
userNotificationPreferences: JsonObject[]; // User preferences
unreadNotificationCount: number; // Unread count
pushNotificationData: JsonObject | null; // Current push notification
fcmToken: string | null; // FCM token
orgNotificationList: JsonObject[]; // Organization notifications
orgNotificationLimitReached: boolean; // Pagination limit
}API Endpoints
Fetch Notifications
GET /api-v3/notifications/all?from={date}&to={date}&page={number}&limit={number}
Response: {
data: [
{
id: number,
notification_type_id: number,
message: { title, body, data },
created_at: number,
read_on: number | null,
notification_activities: [],
read_by_username: string
}
]
}Update Notification Status
POST /api-v3/notifications/notification/{id}/read
Response: {
success: boolean,
message: string,
notification_data: { ...notification }
}Fetch Notification Types
GET / api - v3 / notifications / notification - type / all;
Response: {
data: {
notification_types: [
{
id: number,
category: string,
name: string,
description: string,
is_disabled: number,
},
];
}
}User Journey
1. Login and Setup
- User logs in to the application
- registerFcmServiceWorker() is called
- FCM token is generated
- Token is stored in Redux (setFcmToken)
- User subscribes to relevant topics
2. View Notifications
- User clicks notification icon in sidebar
- Notification container fetches initial data
- getInitialData() calls getNotificationList()
- Notifications are displayed in a grid
- Unread count badge is updated
3. Interact with Notification
- User clicks on a notification
- onRowClickHandler() is triggered
- If notification is unread, handleReadUnread() marks it as read
- openReportHandler() opens the associated report
- Notification status is updated in Redux
4. Filter and Search
- User applies filters (read/unread, date range)
- filterNotifications() filters the list
- Search text filters by title, body, or data
- UI updates to show filtered results
Technology Stack
| Technology | Purpose | Version |
|---|---|---|
| React | UI Framework | 16.13+ |
| Redux | State Management | 4.0+ |
| Redux-Thunk | Async Actions | 2.3+ |
| Axios | HTTP Client | 0.21+ |
| Firebase | Push Notifications (FCM) | 9.0+ |
| Moment.js | Date Handling | 2.29+ |
| AG-Grid | Data Grid | 26.0+ |
| React-i18next | Internationalization | 11.0+ |
Best Practices
Performance
- ✅ Lazy load notification components
- ✅ Paginate large notification lists
- ✅ Memoize components to prevent re-renders
- ✅ Debounce search/filter inputs
UX
- ✅ Show loading states during API calls
- ✅ Display error messages for failed operations
- ✅ Update unread count in real-time
- ✅ Provide clear visual feedback for user actions
Code Quality
- ✅ Use TypeScript for type safety
- ✅ Follow Redux best practices
- ✅ Separate concerns (components, services, utils)
- ✅ Write unit tests for critical functions
Next Steps:
- Review Prerequisites to confirm setup.
- Then follow the Workflow Guide for step-by-step UI flows.