This project is a web application built using React.js for managing orders and products. It provides functionalities for managing orders, products, and viewing statistics via a dashboard.
- Clone the repository.
- Navigate to the project directory.
- Run
npm installto install dependencies. - Run
npm run devto start the development server. - Access the application in your browser at
http://localhost:5173.
- After setting up the project, navigate to the dashboard to view overall statistics.
- Use the sidebar to navigate between different sections of the application.
- Explore the Orders Management section to manage orders.
- Explore the Products Management section to manage products.
The dashboard provides the following statistics:
- Total Orders
- Orders Cancelled
- Orders Shipped
- Orders Pending
- Orders Delivered
- Total Products
.png)
.png)
In the Orders Management section, you can:
- View a list of orders.
- Delete orders.
- Change the status of orders to Pending, Shipped, or Cancelled.
.png)
In the Products Management section, you can:
- Add new products.
- Delete existing products.
- Edit existing product details.
.png)
In the calender view section you can look at the upcoming orders
.png)
Screenshot 4: Calendar View
- assets: Contains project assets like images.
- components: Contains React components.
- content: Contains components related to content display.
- ContextApi: Contains context API related components.
- data: Contains static data files.
- reducers: Contains Redux reducers.
- store: Contains Redux store configuration.
| App.css
| App.jsx
| index.css
| main.jsx
|
+---assets
| react.svg
|
+---components
| | BodyContent.jsx
| | Navbar.jsx
| | SideBar.jsx
| |
| +---content
| | DashBoard.jsx
| | OrdersCalender.jsx
| | OrdersManagement.jsx
| | ProductsMangement.jsx
| |
| ---ContextApi
| SidebarContext.jsx
|
+---data
| ordersData.js
| productData.js
|
+---reducers
| ordersReducer.js
| productReducer.js
|
---Store
store.jsx