Notification System

Relevant source files

The following files were used as context for generating this wiki page:

• frontend/src/pages/NotificationManagerment.jsx
• frontend/src/App.js
• frontend/src/components/common/LayoutAdmin.js
• frontend/src/pages/Public_page.js
• frontend/src/pages/AdminOverview.jsx
• backend/src/server.js

The Notification System is an administrative feature designed for managing and dispatching communications to users of the AirZen application. It provides a centralized interface for creating, viewing, and organizing notifications related to system maintenance, new features, and device alerts. This system is a core part of the admin-facing functionality, enabling administrators to keep users informed and manage system-wide announcements.

The public-facing marketing page highlights "Cảnh báo thông minh" (Smart alerts) as a key feature, which is directly supported by this notification management backend.

Sources: frontend/src/pages/NotificationManagerment.jsx, frontend/src/pages/Public_page.js:342-348

Architecture and Integration

The notification management page is a frontend component that is integrated into the admin section of the application. Access is controlled through protected routes that require administrator privileges.

Sources: frontend/src/App.js:46-53

Routing

The NotificationPage component is rendered under the /admin/notification path. It is nested within the LayoutAdmin component, which provides the standard administrative sidebar and navigation bar.

// frontend/src/App.js

<Route element={<RequireAdmin />}>
  <Route path="/admin" element={<LayoutAdmin />}>
    {/* ... other admin routes */}
    <Route path="notification" element={<NotificationPage/>}/>
    {/* ... other admin routes */}
  </Route>
</Route>

Sources: frontend/src/App.js:46-53, frontend/src/components/common/LayoutAdmin.js

Component Flow

The following diagram illustrates how an admin user navigates to and interacts with the Notification System.

This diagram shows the navigation flow from login to the NotificationPage being rendered within the admin layout.

Sources: frontend/src/App.js:46-53, frontend/src/components/common/LayoutAdmin.js:13-33

Notification Management UI

The primary interface for the Notification System is the NotificationPage component. It is a React component that provides a comprehensive view and control over all notifications. The current implementation uses static mock data for demonstration.

Sources: frontend/src/pages/NotificationManagerment.jsx:12-45

UI Components

The page is composed of several key sections:

Section	Description	Source File
Controls	Contains a search input and status filter buttons (All, Sent, Scheduled, Draft).	frontend/src/pages/NotificationManagerment.jsx:70-112
Create Button	A button labeled "+ Tạo thông báo" for creating new notifications.	frontend/src/pages/NotificationManagerment.jsx:115-120
Quick Statistics	A set of cards displaying summary counts for total, sent, scheduled, and draft notifications.	frontend/src/pages/NotificationManagerment.jsx:123-148
Notification List	A table displaying all notifications, which can be filtered and searched. Each row has action buttons.	frontend/src/pages/NotificationManagerment.jsx:151-218

User Interaction Flow

The diagram below shows the flow of an admin user filtering notifications on the page.

Data Model

The system operates on a defined data structure for notifications. The frontend currently uses a mock data array that represents this structure.

Sources: frontend/src/pages/NotificationManagerment.jsx:12-45

Notification Object Properties

Field	Type	Description	Example
id	String	A unique identifier for the notification.	"NTF-001"
title	String	The subject or title of the notification.	"Bảo trì hệ thống"
message	String	The main content of the notification.	"Hệ thống sẽ bảo trì vào 22:00 tối nay trong 30 phút."
audience	String	The target group for the notification.	"Tất cả người dùng", "Người dùng Premium", "Admin"
status	String	The current state of the notification (sent, scheduled, draft).	"sent"
date	String	The timestamp for when the notification was sent or is scheduled to be sent.	"2025-10-04 09:15"

Notification Status

The status field is crucial for managing the lifecycle of a notification.

Status	Label	UI Color Class (BG / Text)	Description
sent	Đã gửi	bg-green-100 / text-green-800	The notification has been successfully sent.
scheduled	Đã hẹn giờ	bg-blue-100 / text-blue-800	The notification is scheduled for future delivery.
draft	Bản nháp	bg-gray-200 / text-gray-700	The notification is saved but not yet sent or scheduled.

Sources: frontend/src/pages/NotificationManagerment.jsx:47-51

Features and Functionality

Filtering and Searching

Administrators can quickly find notifications using two main controls:

1. Status Filters: Buttons allow filtering the list by all, sent, scheduled, or draft status.
2. Search Input: A text input filters notifications where the title or message includes the search term.

The filtering logic is handled client-side within the NotificationPage component.

// frontend/src/pages/NotificationManagerment.jsx:59-65
const filtered = notifications.filter(
    (n) =>
      (filter === "all" || n.status === filter) &&
      (n.title.toLowerCase().includes(search.toLowerCase()) ||
        n.message.toLowerCase().includes(search.toLowerCase()))
);

Sources: frontend/src/pages/NotificationManagerment.jsx:59-65

Quick Statistics

The page displays four summary cards that provide an at-a-glance overview of the notification statuses. These cards use icons from the lucide-react library to visually represent each category.

• Tổng thông báo (Total Notifications)
• Đã gửi (Sent)
• Hẹn giờ (Scheduled)
• Bản nháp (Drafts)

Sources: frontend/src/pages/NotificationManagerment.jsx:123-148

User Actions

For each notification in the list, administrators can perform the following actions:

• View (Eye icon): Intended to show the full details of a notification.
• Delete (Trash2 icon): Intended to remove a notification.

The buttons for these actions are present in the UI, but their implementation logic is not defined in the provided file.

Sources: frontend/src/pages/NotificationManagerment.jsx:198-203

Backend Integration

The frontend NotificationPage is currently built with static mock data. There are no explicit API endpoints for notifications defined in the provided backend/src/server.js file. A complete implementation would require creating REST API endpoints for creating, reading, updating, and deleting notifications, which would then be consumed by the frontend component.

Sources: frontend/src/pages/NotificationManagerment.jsx:12-45, backend/src/server.js