Admin Dashboard

Relevant source files

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

• frontend/src/pages/AdminDashboardPage.jsx
• frontend/src/components/Admin/AdminDashboardMain.jsx
• frontend/src/components/Admin/Layout/AdminSideBar.jsx
• frontend/src/components/Layout/AdminHeader.jsx
• backend/app.js
• frontend/src/pages/AdminDashboardUsers.jsx
• frontend/src/pages/AdminDashboardSellers.jsx
• README.md

The Admin Dashboard is a comprehensive, protected interface designed for platform administrators. It serves as the central control panel for managing all core aspects of the e-commerce application, including users, sellers, products, and orders. The dashboard provides a high-level overview of platform activity and gives administrators the tools necessary to maintain and moderate the system. Access is restricted to users with the "Admin" role.

Sources: README.md, backend/app.js:90-92

Architecture and Page Structure

The Admin Dashboard is built using a modular, component-based architecture in React. The main entry point is the AdminDashboardPage, which composes the overall layout by integrating three key components: AdminHeader, AdminSideBar, and AdminDashboardMain. This structure separates concerns, with the header handling top-level branding and user info, the sidebar managing navigation, and the main component displaying the relevant content for the selected section.

Sources: frontend/src/pages/AdminDashboardPage.jsx:5-18

The following diagram illustrates the component hierarchy for the main admin dashboard page.

Core Components

AdminHeader.jsx

This component provides a consistent header across all admin pages. It displays the application's title, which links back to the homepage, and a profile icon for the currently logged-in administrator.

Sources: frontend/src/components/Layout/AdminHeader.jsx:11-29

AdminSideBar.jsx

The AdminSideBar is the primary navigation element within the dashboard. It contains a vertical list of links to the various management sections. The active link is highlighted based on the active prop passed to it.

Sources: frontend/src/components/Admin/Layout/AdminSideBar.jsx:11-109

The sidebar provides navigation to the following sections:

Icon	Menu Item	Route	Description
RxDashboard	Dashboard	/admin/dashboard	The main overview page.
FiShoppingBag	Orders	/admin-orders	Manage all customer orders.
MdManageAccounts	Seller Management	/admin-sellers	View and manage all sellers on the platform.
FaUser	Users	/admin-users	View and manage all registered users.
BsHandbag	Products	/admin-products	View and manage all products.
MdOutlineLocalOffer	Events	/admin-events	Manage promotional events.
CiMoneyBill	Withdrawal Requests	/admin-withdraw-request	Process withdrawal requests from sellers.
AiOutlineSetting	Edit Information	/profile	Navigate to the admin's profile settings.

Sources: frontend/src/components/Admin/Layout/AdminSideBar.jsx:14-108

AdminDashboardMain.jsx

This component serves as the homepage of the Admin Dashboard. It presents an "Overview" of the platform's status through several key metrics and a list of the most recent orders.

Sources: frontend/src/components/Admin/AdminDashboardMain.jsx

The overview section contains three main cards:

1. Total Revenue: Displays the total earnings for the admin, calculated as 10% of the total price of all orders.
2. Seller Management: Shows the total number of registered sellers and provides a link to the seller management page.
3. Orders: Shows the total number of orders and provides a link to the order management page.

Below the overview, a DataGrid component displays the latest orders with key details.

Sources: frontend/src/components/Admin/AdminDashboardMain.jsx:68-120

The "Latest Orders" table has the following structure:

Field	Header Name	Type	Description
id	Order ID	String	The unique identifier for the order.
status	Status	String	The current status of the order (e.g., 'Delivered'). Cell color changes based on status.
itemsQty	Quantity	Number	The total number of items in the order.
total	Total	String	The total price of the order, formatted as currency (VND).
createdAt	Time	String	The date the order was created.

Sources: frontend/src/components/Admin/AdminDashboardMain.jsx:31-57

Data Flow and State Management

The AdminDashboardMain component fetches its data upon rendering using a useEffect hook. It dispatches Redux actions (getAllOrdersOfAdmin and getAllSellers) to retrieve data from the backend. The component then subscribes to the Redux store using the useSelector hook to get the adminOrders and sellers state, which are used to calculate metrics and populate the data grid.

Sources: frontend/src/components/Admin/AdminDashboardMain.jsx:15-22

This sequence diagram shows the data fetching process for the main dashboard view.

Security and Access Control

The Admin Dashboard and its associated API routes are protected to ensure only authorized administrators can access them.

On the backend, specific routes are guarded by a chain of middleware. For example, the endpoint to update a user's role first checks if the user is authenticated (isAuthenticated) and then verifies if their role is "Admin" (isAdmin("Admin")). This prevents unauthorized access to sensitive administrative functions.

Sources: backend/app.js:90-92

The following snippet from backend/app.js demonstrates this protection mechanism:

// backend/app.js
app.put(
  "/api/v2/user/update-role/:id",
  require("./middleware/auth").isAuthenticated,
  require("./middleware/auth").isAdmin("Admin"),
  // ... route handler
);

Sources: backend/app.js:89-93

This flowchart illustrates the backend authorization process for an admin-only route.

Conclusion

The Admin Dashboard is a critical feature of the application, providing a robust and secure interface for platform management. Its component-based React architecture allows for a clean separation of concerns, while its integration with Redux ensures efficient state management and data flow from the backend. Security is enforced at the API level with role-based access control, safeguarding administrative functions from unauthorized users.