Admin Panel Overview
Relevant source files
The following files were used as context for generating this wiki page:
The Admin Panel is a secure, role-protected section of the application designed for administrative tasks. It provides a centralized interface for managing core data entities such as users, products, and orders. The panel is built as a distinct module within the Next.js application, utilizing a consistent layout, dedicated navigation, and feature-specific management pages.
Access to the entire admin section is restricted to users with the ADMIN role. This is enforced by the ProtectedRoute component, which gates access based on the user's role retrieved from the useAuthStore. The panel's architecture is component-based, promoting reusability and separation of concerns for UI, state management, and API interactions.
Architecture and Layout
The admin panel's user interface is structured around a main layout component, AdminLayout, which provides a consistent look and feel across all admin pages. This layout is composed of a persistent sidebar for navigation and a main content area that renders the specific admin page.
Sources: app/admin/layout.tsx
Core Layout Components
The layout is constructed using several key components:
ProtectedRoute: A higher-order component that wraps the entire admin layout. It checks the current user's role via theuseAuthStoreand only renders its children if the user has theUserRole.ADMINrole.SidebarProvider: A context provider that manages the state of the sidebar (e.g., open/closed).AdminSidebar: The primary navigation component, displayed as a collapsible sidebar.SidebarInset: The main content area that is displayed to the right of the sidebar. It contains the page header and thechildren(the actual page content).- Header: A standard header within
SidebarInsetthat includes aSidebarTriggerto toggle the sidebar, breadcrumbs for navigation context, and a user dropdown menu for accessing the profile or logging out.
The following diagram illustrates the component hierarchy of the admin layout.
Sources: app/admin/layout.tsx:43-98
Authentication and Authorization
Access control is the primary security feature of the admin panel.
- The
AdminLayoutcomponent wraps all its children within a<ProtectedRoute requiredRole={UserRole.ADMIN}>. - The
ProtectedRoutecomponent retrieves the user's role by callinggetUserRole()from theuseAuthStore(a Zustand store). - If the role does not match
UserRole.ADMIN, the user is presumably redirected or shown an access-denied message, though the exact behavior ofProtectedRouteis not fully detailed in this file. - The user's role and initials are also used to populate the user dropdown menu in the header.
Sources: app/admin/layout.tsx:44, app/admin/layout.tsx:48, app/admin/layout.tsx:53
Navigation
Navigation within the admin panel is handled by the AdminSidebar component. It presents a list of links to the main management sections.
Sources: components/layout/admin-sidebar.tsx
Sidebar Items
The sidebar contains a static list of navigation items, each with an icon, title, and URL. The usePathname hook from next/navigation is used to determine which link is currently active and apply appropriate styling.
| Title | URL | Icon |
|---|---|---|
| Bảng điều khiển | /admin | LayoutDashboard |
| Người dùng | /admin/users | Users |
| Đơn hàng | /admin/orders | ShoppingCart |
| Sản phẩm | /admin/products | Package |
| Cài đặt | /admin/settings | Settings |
Sources: components/layout/admin-sidebar.tsx:25-47
Core Pages
The admin panel is organized into several key pages, each responsible for managing a specific data entity.
Dashboard (/admin)
This is the main landing page of the admin panel. It provides a high-level overview and quick access to the primary management sections. The dashboard consists of a grid of Card components, each representing a module. Currently, the data in these cards is static and displayed as "-".
| Card Title | Icon | Link | Description |
|---|---|---|---|
| Người dùng | Users | /admin/users | Tổng số người dùng |
| Đơn hàng | ShoppingCart | /admin/orders | Tổng số đơn hàng |
| Sản phẩm | Package | /admin/products | Tổng số sản phẩm |
| Cài đặt | Settings | /admin/settings | Cài đặt hệ thống |
Sources: app/admin/page.tsx:16-78
Management Pages
- User Management (
/admin/users): This page allows admins to manage users. It features a table (UsersListTable) to display users, filters (UsersFilters), and dialogs for editing (UserEditFormDialog) or deactivating (UserDeactivateDialog) user accounts. Data is fetched using theuseUsersListhook.
Sources: app/admin/users/page.tsx - Product Management (
/admin/products): This page is for managing products in the store. It includes product filtering, a list of products (ProductsListCard), and actions to create, edit, or delete products. Data is fetched via theuseAdminProductshook, which in turn uses theAdminProductsService.
Sources: app/admin/products/page.tsx
Data Flow and Services
The admin panel relies on a combination of React hooks (powered by TanStack Query) and a dedicated service layer to interact with the backend API.
Data Fetching and State
- React Query Hooks: Feature-specific hooks like
useAdminProductsanduseUsersListare used to fetch, cache, and manage server state. These hooks handle loading states, errors, and data fetching logic. - Zustand Store: Global client-side state, particularly authentication status and user information, is managed by
useAuthStore. - Local State: Component-level state, such as filter values or dialog visibility, is managed using React's
useStatehook.
The sequence diagram below shows the data flow for loading the product management page.
Admin Product Service
The AdminProductsService class encapsulates all API logic related to product management for admins. It defines a clear interface (IAdminProductsService) and handles the specifics of API requests, including the construction of multipart/form-data for creating and updating products with images.