Coders Packet

React Admin Dashboard

By Umang Mundhra

The React "Admin Dashboard" is an admin panel component that can be easily integrated with any project to provide it a dashboard functionality.

The React "Admin Dashboard" is an admin panel component that can be easily integrated with any project to provide it a dashboard functionality where the admin can see all its Revenue, Sales, Cost.

Moreover various charts such as Sales-Analytics, Product-Sales Performance are also provided within the component, columns of Latest Transactions, as well as newly Joined members, are also displayed beneath the chart. There is a sidebar that comprises various options and functionality. All these components and functionality can easily be removed and customized as per the current demand of the user's project. Going to the structure of the project, the project comprises mainly various components and pages.

The App.js file contains mainly the following components:

The Sidebar and the Topbar, The Home Component which further comprises of Four more components namely FeaturedInfo(Component for the revenue, the sales, and the cost tabs on the top ), Chart(component for the Sales-Analytics chart), WidgetSm(Component for the user list displayed on the Home Page) and the last WidgetLg(Component for the Transactions list displayed on the Home Page).

There is a separate option in the Sidebar named "Users" using which you can view the list of Users, Edit them using the Edit button and also Delete the user using the Delete Button. All the front-end working is provided in the project, the developer has the only work to integrate it to the database and fetch the data from there. For our convenience, we have kept all the data in the file "dummyData.js". So, the User List Page has the link to the Individual User Page fetched by the URL "/user/:id" as well as new User Page "/newUser".
The newer route directs you to a form to create a new user.

Same as Users we also have a Products Page which can be used to display your range of products, view their sales performance, Edit them or delete them. The ProductList Page has a link to the product page as well as the new Product Page.

The Delete functionality in the User and Product List is being implemented by the function "handle delete" which finds and deletes an item on the basis of its id.

The Data from the Dummy Data is being imported to Charts and Tables wherever needed and passed to the component.
All the charts in the app are made using the "ReCharts" library which is a composable charting library built on React components.
We have used MaterialUI for providing the design such as a table, data grid, buttons, etc.

All the links to the pages and the components with the URLs are made using the "React-Router-Dom, which provides declarative Routing for reacting Js.

Download Complete Code


No comments yet