Seller (Shop) Dashboard
Relevant source files
The following files were used as context for generating this wiki page:
The Seller (Shop) Dashboard is a comprehensive, secure interface designed for sellers to manage their e-commerce operations. It serves as a central hub for overseeing products, managing orders, tracking finances, and configuring shop settings. Access to the dashboard is restricted to authenticated users with a "Seller" role.
The dashboard provides sellers with key business insights at a glance, such as total earnings, order volume, and product counts. It also includes functionalities for creating new products and events, managing discount codes, handling customer messages, and processing withdrawal requests. This empowers sellers to run their online store efficiently and effectively within the platform.
Sources: README.md, frontend/src/components/Shop/Layout/DashboardSideBar.jsx
Architecture and Layout
The Seller Dashboard is built as a single-page application experience using React. The main page component orchestrates the overall layout, which is composed of a persistent header, a navigation sidebar, and a dynamic main content area where different management views are rendered based on the selected route.
Sources: frontend/src/components/Shop/Layout/DashboardHeader.jsx, frontend/src/components/Shop/Layout/DashboardSideBar.jsx
Component Structure
The dashboard's layout is composed of three main components: DashboardHeader, DashboardSideBar, and a dynamic content area that renders components like DashboardHero, CreateProduct, etc.
The diagram below illustrates the high-level component hierarchy for the dashboard page.
Dashboard Header
The DashboardHeader is a sticky component at the top of the page. It provides quick access to key management sections and the seller's public-facing shop page.
Key Features:
- Branding: Displays the "ECommerce" application name with a link to the homepage.
- Quick Links: Icons linking to sections for Coupons, Events, Products, Orders, and Messages.
- Profile/Shop Link: An avatar image that links to the seller's public shop page, using the seller's ID from the Redux state.
The avatar image is dynamically loaded using the backend_url and the seller's avatar path stored in the Redux state.
Sources: frontend/src/components/Shop/Layout/DashboardHeader.jsx:11-40
Dashboard Sidebar
The DashboardSideBar is the primary navigation element for the seller. It is a vertical menu on the left side of the screen, providing links to all available management pages within the dashboard. The active link is highlighted based on the active prop passed to the component.
The table below details the navigation items available in the sidebar.
| Icon | Link Text | Route | Active Prop Value |
|---|---|---|---|
RxDashboard | Dashboard | /dashboard | 1 |
FiShoppingBag | Orders | /dashboard-orders | 2 |
FiPackage | Products | /dashboard-products | 3 |
AiOutlineFolderAdd | Add Product | /dashboard-create-product | 4 |
MdOutlineLocalOffer | Promotions and Events | /dashboard-events | 5 |
VscNewFile | Create Event | /dashboard-create-event | 6 |
CiMoneyBill | Withdrawals | /dashboard-withdraw-money | 7 |
BiMessageSquareDetail | Messages | /dashboard-messages | 8 |
AiOutlineGift | Discount Codes | /dashboard-coupouns | 9 |
HiOutlineReceiptRefund | Refunds | /dashboard-refunds | 10 |
CiSettings | Edit Information | /settings | 11 |
Sources: frontend/src/components/Shop/Layout/DashboardSideBar.jsx:10-111
Core Features
The dashboard is composed of several key features that allow sellers to manage their store.
Overview (DashboardHero)
The DashboardHero component serves as the main landing page of the seller dashboard, providing a high-level overview of the shop's performance. It fetches and displays key metrics using data from the Redux store.
Key Metrics Displayed:
- Earnings: Shows the seller's available balance after a 10% service fee. Includes a link to request a withdrawal.
- Orders: Displays the total number of orders received by the shop. Includes a link to the detailed order list.
- Products: Shows the total number of products in the shop. Includes a link to the product list.
The component also features a "Latest Orders" section, which is a DataGrid from Material-UI displaying recent orders with their ID, status, quantity, and total price.
The data flow for this component is as follows:
- The component mounts.
useEffecthook dispatches Redux actionsgetAllOrdersOfShopandgetAllProductsShopwith the seller's ID.- Data is fetched from the backend and populated into the
orderandproductsslices of the Redux store. - The component re-renders with the updated data, displaying the metrics and the order grid.
Sources: frontend/src/components/Shop/DashboardHero.jsx:11-105
The following diagram shows the data flow for the DashboardHero component.
Product Creation (CreateProduct)
The CreateProduct component provides a form for sellers to add new products to their shop. It captures all necessary product details and dispatches an action to the backend to create the product.
Form Fields:
- Product Name (required)
- Description (required)
- Category (required, dropdown from
categoriesData) - Tags
- Original Price
- Discounted Price (required)
- Product Stock (required)
- Images (required, multiple file upload)
Upon submission, the component performs basic client-side validation. If validation passes, it constructs a FormData object with the product details and images, and dispatches the createProduct Redux action. The seller's ID is appended to the form data to associate the product with the correct shop.
Sources: frontend/src/components/Shop/CreateProduct.jsx:10-82
The sequence diagram below illustrates the product creation process.
Shop Settings (ShopSettings)
The ShopSettings component allows sellers to update their public-facing shop information and avatar.
The form allows editing the following fields:
- Store Name
- Description
- Store Address
- Phone Number
When the "Update Information" button is clicked, the component sends a PUT request to the /api/v2/shop/update-seller-info endpoint with the updated data. On success, it dispatches the loadSeller action to refresh the seller's data in the Redux store and displays a success toast.
Avatar updates are handled separately. When a new image is selected, the handleImage function is triggered. It immediately uploads the new image as multipart/form-data to the /api/v2/shop/update-shop-avatar endpoint. On success, it also dispatches loadSeller to reflect the change.
Sources: frontend/src/components/Shop/ShopSettings.jsx:19-70