UI Component Library
Relevant source files
The following files were used as context for generating this wiki page:
frontend/src/components/common/Layout.jsfrontend/src/components/common/LayoutAdmin.jsfrontend/src/components/common/Sidebar.jsfrontend/src/components/common/SidebarAdmin.jsfrontend/src/components/common/Footer.jsfrontend/src/App.jsfrontend/src/pages/Dashboard.jsxfrontend/src/pages/Public_page.jsfrontend/src/pages/AirQualityIndexPage.jsxfrontend/src/styles/App.cssfrontend/src/styles/index.css
The AirZen frontend is built using a library of reusable React components, primarily located in the frontend/src/components/common/ directory. These components are designed to create a consistent and maintainable user interface across the application's different sections, including the public landing page, the authenticated user dashboard, and the admin panel. The library encompasses structural layout components, dynamic navigation elements, and specialized data display widgets.
The overall application structure leverages these common components to create distinct layouts for public, user, and admin routes, as defined in App.js.
Sources: frontend/src/App.js
Layout System
The application employs a sophisticated layout system to maintain a consistent structure for authenticated users and administrators. This is primarily managed by Layout.js and LayoutAdmin.js.
Core Layout Components
The main layouts for authenticated sections are composed of a fixed sidebar, a top navigation bar, and a main content area that renders the specific page content via React Router's <Outlet />.
| Component | Description | Source File |
|---|---|---|
Layout | The standard layout for regular authenticated users. It combines the Sidebar and Navbar components. | frontend/src/components/common/Layout.js |
LayoutAdmin | The layout for administrative users. It uses the SidebarAdmin component instead of the standard Sidebar. | frontend/src/components/common/LayoutAdmin.js |
Footer | A standard footer component with project information, quick links, and tech stack details. It is used on the public-facing page. | frontend/src/components/common/Footer.js |
The diagram below illustrates how routes in App.js map to different layout structures.
The layouts use hardcoded pixel values for the sidebar width and navbar height to create a precise and stable structure.
// frontend/src/components/common/Layout.js:8-9
const SIDEBAR_W = 230; // px -> đúng theo Figma
const NAVBAR_H = 70; // px -> chiều cao navbar theo Figma
Sources: frontend/src/components/common/Layout.js:8-9, frontend/src/components/common/LayoutAdmin.js:7-8
Navigation Components
Navigation within the authenticated areas is handled by two specialized sidebar components, Sidebar.js and SidebarAdmin.js. They provide vertical navigation links and a dynamic visual indicator for the active page.
Sidebar Structure
Both Sidebar and SidebarAdmin are built around a menuItems array that defines the navigation links, including their path, label, and icon.
User Sidebar Menu (Sidebar.js)
| Label | Path | Icon Source |
|---|---|---|
| Dashboard | /dashboard | ../../image/overview.png |
| Chỉ số không khí | /air-quality | ../../image/Chisokk.png |
| Ngưỡng an toàn | /threshold | ../../image/NguongAnToan.png |
| Lịch sử | /history | ../../image/LichSu.png |
| Cài đặt | /settings | ../../image/CaiDat.png |
Sources: frontend/src/components/common/Sidebar.js:5-11
Admin Sidebar Menu (SidebarAdmin.js)
| Label | Path | Icon Source |
|---|---|---|
| Overview | /admin/overview | ../../image/overview.png |
| Quản lý user | /admin/users | ../../image/ic_user.png |
| Quản lý thiết bị | /admin/devices | ../../image/ic_threshold.png |
| Yêu cầu hỗ trợ | /admin/request | ../../image/ic_ycht.png |
| Quản lý thông báo | /admin/notification | ../../image/ic_thongbao.png |
| Cài đặt | /admin/setting | ../../image/CaiDat.png |
Sources: frontend/src/components/common/SidebarAdmin.js:5-34
Active Link Highlighting
The sidebars feature a dynamic highlight bar that moves to indicate the currently active navigation link. This is achieved using a combination of React hooks.
The following diagram shows the logic flow for updating the highlight's position.
This logic relies on useLocation to track route changes and useRef to measure the DOM element positions to calculate the top property for the highlight element.
Sources: frontend/src/components/common/Sidebar.js:19-45, frontend/src/components/common/SidebarAdmin.js:39-65
Data Display & UI Widgets
The application includes several components for displaying data and providing user interaction, found both in the common directory and defined within specific pages.
Dashboard Widgets
The Dashboard.jsx page is composed of several data visualization components.
CardData: A component that displays a single sensor metric. It takestitle,value,unit, andpercentas props to render a data card.OverviewChart&QualityChart: Charting components used to provide a visual overview of sensor data and air quality.
Sources: frontend/src/pages/Dashboard.jsx:5-30
In-Page Components
The AirQualityIndexPage.jsx defines several self-contained, reusable components for its UI.
Select: A simple styled<select>dropdown component for choosing metrics and time ranges.StatusBadge: Displays the current value of a metric along with a "Lành mạnh" (Healthy) or "Không lành mạnh" (Unhealthy) status. The status is determined by ahealthyfunction passed as a prop.DotTooltip: A custom tooltip for therechartsline chart, displaying the point's value in a styled badge.
Sources: frontend/src/pages/AirQualityIndexPage.jsx:93-109, 163-181, 184-193
Styling and Theming
The project's styling is a hybrid of global CSS, utility classes, and Tailwind CSS.
- Global Styles: The file
frontend/src/styles/index.cssprovides a CSS reset and defines global styles for common elements like buttons (.btn), forms (.form-control), cards (.card), and alerts. - Layout Styles:
frontend/src/styles/App.csscontains styles for the main application layout (.App), page containers, and responsive grid layouts (.grid-2,.grid-3). - Tailwind CSS: The project is configured to use Tailwind CSS, as seen in
frontend/src/index.css, which imports Tailwind's base, components, and utilities. - Theming: A dark mode is implemented by adding a
.darkclass to thebodyelement, which then triggers dark-theme-specific styles defined using Tailwind'sdark:variant or custom CSS.
/* frontend/src/index.css:7-11 */
/* Khi bật dark mode, tự đổi nền và màu chữ toàn ứng dụng */
.dark body {
@apply bg-zinc-900 text-zinc-100 transition-colors duration-300;
}
Sources: frontend/src/styles/index.css, frontend/src/styles/App.css, frontend/src/index.css:7-11