Support Request System
Relevant source files
The following files were used as context for generating this wiki page:
The Support Request System is an administrative feature designed for managing user-submitted support tickets. It provides a user interface for administrators to view, search, and filter support requests. The system is part of the admin-exclusive section of the application and is currently implemented on the frontend with mock data, indicating that backend integration for creating and managing requests is not yet complete.
The main interface is accessible via the /admin/request route and is visually integrated into the admin dashboard, which also presents a summary of support requests on its overview page.
Sources: frontend/src/pages/RequestSupport.jsx, frontend/src/App.js:43, frontend/src/pages/AdminOverview.jsx:17
Architecture and Routing
The RequestSupport page is a protected route within the React application, accessible only to administrators. The routing is defined in App.js and is nested within components that provide security and a consistent layout.
Sources: frontend/src/App.js:40-46
Routing Flow
The following diagram illustrates how a user accesses the Support Request page. Access is granted only if the RequireAdmin check passes. The page is then rendered within the standard LayoutAdmin.
Route Definition
The route is defined as part of the admin-protected routes:
// frontend/src/App.js
<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" element={<NotificationPage/>}/>
<Route path="setting" element={<AdminSetting/>}/>
</Route>
</Route>
Sources: frontend/src/App.js:40-46
The page is rendered inside the LayoutAdmin component, which provides the main structure including a sidebar and a top navigation bar.
Sources: frontend/src/components/common/LayoutAdmin.js
UI Components
The RequestPage component, located in RequestSupport.jsx, is the core of the support system's UI. It is composed of several key sections for managing and viewing requests.
Sources: frontend/src/pages/RequestSupport.jsx
Component Structure
This diagram shows the high-level structure of the RequestPage component.
Header and Filters
The header section contains controls for searching and filtering the list of support requests.
- Search Bar: A text input that allows admins to search for requests by the user's name or the request's subject.
- Filter Buttons: A set of buttons to filter requests by their status: "Tất cả" (All), "Chờ xử lý" (Pending), "Đang xử lý" (Processing), "Hoàn tất" (Done), and "Đã đóng" (Closed).
Sources: frontend/src/pages/RequestSupport.jsx:73-108
Statistics Cards
A set of four cards provides a quick overview of the support requests. These currently display static values.
| Card Title | Icon | Value |
|---|---|---|
| Tổng yêu cầu (Total Requests) | MessageSquare | 24 |
| Đang chờ (Pending) | Clock | 6 |
| Hoàn tất (Completed) | CheckCircle | 12 |
| Đã đóng (Closed) | XCircle | 6 |
Sources: frontend/src/pages/RequestSupport.jsx:111-138
Requests Table
A table displays the list of filtered support requests.
| Column | Description |
|---|---|
| Mã yêu cầu | The unique ID of the request. |
| Người gửi | The name of the user who submitted the request. |
| The email address of the user. | |
| Tiêu đề | The subject of the support request. |
| Thời gian | The date and time the request was submitted. |
| Trạng thái | The current status of the request (e.g., Pending, Processing). |
| Hành động | Actions that can be taken, currently a "View" button (Eye icon). |
Sources: frontend/src/pages/RequestSupport.jsx:142-162
Data Model and State
The component currently relies on hardcoded mock data and local state for its functionality.
Sources: frontend/src/pages/RequestSupport.jsx:10-58
Local State
The RequestPage component manages two state variables:
| State | Type | Description |
|---|---|---|
filter | string | Stores the currently selected status filter (e.g., 'all', 'pending'). |
search | string | Stores the current search query from the input field. |
Sources: frontend/src/pages/RequestSupport.jsx:49-50
Request Data Structure
The support requests are stored in a local array named requests. Each request object has the following structure:
| Field | Type | Example | Description |
|---|---|---|---|
id | string | "REQ-101" | Unique identifier for the request. |
user | string | "Lê Văn A" | Name of the user. |
email | string | "levana@example.com" | Email of the user. |
subject | string | "Thiết bị không hoạt động" | The subject line of the request. |
date | string | "2025-10-04 08:42" | Timestamp of the request. |
status | string | "pending" | The processing status of the request. |
Sources: frontend/src/pages/RequestSupport.jsx:11-42
Status Map
The statusMap object is used to define the display properties (label and color) for each request status.
// frontend/src/pages/RequestSupport.jsx:59-65
const statusMap = {
pending: { label: "Chờ xử lý", color: "bg-yellow-100 text-yellow-800" },
processing: { label: "Đang xử lý", color: "bg-blue-100 text-blue-800" },
done: { label: "Đã hoàn tất", color: "bg-green-100 text-green-800" },
closed: { label: "Đã đóng", color: "bg-gray-200 text-gray-700" },
};
Sources: frontend/src/pages/RequestSupport.jsx:59-65
Functionality
The core functionality of the page is to display and filter the list of support requests based on user interaction.
Filtering and Searching Logic
The filtered array is computed on each render by applying the filter and search state to the master requests list.
This flowchart shows the process of deriving the list of requests to be displayed.
The search is case-insensitive and checks for the search term within the user and subject fields of each request.
Sources: frontend/src/pages/RequestSupport.jsx:55-56
Integration with Admin Overview
The AdminOverview page includes a summary card for "Yêu cầu hỗ trợ" (Support Requests). This card displays a static value, but it establishes a conceptual link to the more detailed Support Request System.
// frontend/src/pages/AdminOverview.jsx:17
{ title: "Yêu cầu hỗ trợ", value: 8, icon: <MessageSquare size={22} />, color: "#f59e0b", gradient: "from-amber-400 to-orange-400" },