Admin Dashboard
Relevant source files
The following files were used as context for generating this wiki page:The Admin Dashboard is a secure, centralized interface within the AirZen application designed for administrators. It provides a high-level, at-a-glance overview of critical system metrics, including user statistics, IoT device status, and recent system activities. This dashboard serves as the main landing page for the admin section, offering quick navigation to other management pages like User Management and Device Management.
The entire admin section, including the overview dashboard, is protected and accessible only to users with administrative privileges. It is built using a modular structure of React components, with data visualizations powered by the recharts library to present information clearly and effectively.
Architecture and Routing
The Admin Dashboard is part of a larger admin layout, protected by specific routing rules. The architecture ensures that only authenticated administrators can access the dashboard and that the UI is presented within a consistent layout.
Sources: frontend/src/App.js, frontend/src/components/common/LayoutAdmin.js, frontend/src/components/common/RequireAdmin.js
Component and Routing Flow
The following diagram illustrates how a request for the admin overview page is handled, from the main application router to the final rendered component.
This diagram shows the routing flow for the Admin Dashboard.
Sources: frontend/src/App.js:48-57, frontend/src/components/common/LayoutAdmin.js:9-37
Route Definition
Routing for the admin section is defined in App.js. The /admin/overview path is nested within a protected route structure that uses the RequireAdmin component to enforce access control and the LayoutAdmin component to provide a consistent UI shell.
// frontend/src/App.js:48-57
<Route element={<RequireAdmin />}>
<Route path="/admin" element={<LayoutAdmin />}>
<Route path="overview" element={<AdminOverview/>}/>
<Route path="users" element={<UserManagerment />} />
<Route path="devices" element={<DeviceManagerment />} />
<Route path="request" element={<RequestSupport/>}/>
<Route path="notification"={<NotificationPage/>}/>
<Route path="setting" element={<AdminSetting/>}/>
</Route>
</Route>
Sources: frontend/src/App.js:48-57
Layout Structure
The LayoutAdmin.js component establishes the main visual structure for all admin pages. It creates a two-column layout with a fixed sidebar on the left and a main content area on the right. The Outlet component from react-router-dom is used to render the specific page component, such as AdminOverview.
Key layout properties:
- Sidebar Width:
230px - Navbar Height:
70px - Max Container Width:
1385px
Sources: frontend/src/components/common/LayoutAdmin.js:5-8, 12-36
UI Components
The Admin Dashboard is composed of several key React components that handle navigation, layout, and data display.
AdminOverview Page
This is the main component for the dashboard, located at frontend/src/pages/AdminOverview.jsx. It is responsible for fetching and displaying all the summary data. The data is currently hardcoded within the component for demonstration purposes.
The page is structured into three main sections:
- Statistics Cards: A grid of cards showing key metrics.
- Charts: Visualizations for user growth and device status.
- Recent Activities: A list of the latest notable events in the system.
The following diagram shows the internal structure of the AdminOverview component.
Statistics Cards
A set of five cards at the top of the page provides a quick summary of the application's state. Each card displays a title, a value, and an icon.
| Title | Value | Icon | Color Gradient |
|---|---|---|---|
| Người dùng | 120 | Users | from-emerald-400 to-lime-300 |
| Thiết bị | 58 | Cpu | from-sky-400 to-blue-400 |
| Online | 46 | Wifi | from-green-400 to-emerald-500 |
| Offline | 12 | WifiOff | from-red-400 to-rose-500 |
| Yêu cầu hỗ trợ | 8 | MessageSquare | from-amber-400 to-orange-400 |
This data is defined in the stats array within the component.
Sources: frontend/src/pages/AdminOverview.jsx:17-23, 50-68
Data Charts
The dashboard features two charts for data visualization, built using the recharts library.
-
New Users by Month (
BarChart): This chart displays the number of new users registered over the last five months.- Data Source:
userStatsarray. - Data Structure:
[{ name: "T1", newUsers: 20 }, ...]
Sources: frontend/src/pages/AdminOverview.jsx:25-31, 74-93
- Data Source:
-
Device Status (
PieChart): This chart shows the proportion of devices that are currently online versus offline.- Data Source:
deviceStatusarray. - Data Structure:
[{ name: "Online", value: 46, color: "#22c55e" }, ...]
Sources: frontend/src/pages/AdminOverview.jsx:33-36, 97-116
- Data Source:
Recent Activities
A list at the bottom of the page displays recent system events.
| Activity Text | Time |
|---|---|
| 👤 Người dùng mới: Lê Văn A | 5 phút trước |
| ⚠️ Thiết bị D-102 mất kết nối | 30 phút trước |
| ⚙️ Admin thêm thiết bị AirZen-08 | 2 giờ trước |
| 📨 Yêu cầu hỗ trợ từ user 204 | 3 giờ trước |
| 🔒 User B-98 bị khóa do spam | 6 giờ trước |
This data is defined in the activities array.
Sources: frontend/src/pages/AdminOverview.jsx:38-44, 120-138
SidebarAdmin Component
The SidebarAdmin component provides the primary navigation for the entire admin section. It displays a list of links to different admin pages and visually highlights the active page.
The navigation items are defined in the menuItems array:
| Label | Path | Icon |
|---|---|---|
| Overview | /admin/overview | overview.png |
| Quản lý user | /admin/users | ic_user.png |
| Quản lý thiết bị | /admin/devices | ic_threshold.png |
| Yêu cầu hỗ trợ | /admin/request | ic_ycht.png |
| Quản lý thông báo | /admin/notification | ic_thongbao.png |
| Cài đặt | /admin/setting | CaiDat.png |
The component uses useEffect hooks to track the current location.pathname and dynamically calculate the position of a colored highlight element to indicate the active link.
Sources: frontend/src/components/common/SidebarAdmin.js:5-32, 40-56
Summary
The Admin Dashboard is a well-structured and visually informative feature that serves as the central hub for application administrators. It leverages a protected routing architecture with a consistent layout provided by LayoutAdmin and SidebarAdmin. The core AdminOverview component effectively uses statistics cards, charts, and an activity log to present a comprehensive summary of the system's health and user activity, making it a crucial tool for monitoring and management.