September 26, 2022

Robotic Notes

All technology News

Creating a Responsive Admin Dashboard with React

6 min read


In today’s world, every online program interface (mainly e-commerce platforms) contains a page where information and data about customers, clients, and consumers is shown or monitored. This information / data could be based on purchases, financial transactions, or consumer service statistics. An Admin Dashboard is a visual representation of your whole data set. While it can be used in various ways, its primary function is to allow quick access to information, such as APIs. An Admin Dashboard is often shown on its own website and receives data from a linked database.

So, today, we’ll develop a responsive and interactive Admin Dashboard using the well-known React JavaScript framework, plus the Material UI and Rechart libraries

Getting Started

All we have to do here is create our React app and install the necessary dependencies for our project.

1npx create-react-app admin-dashboard

2cd admin-dashboard

3npm i recharts

4npm i @mui/material @emotion/react @emotion/styled

5npm i react-router-dom

Creating Components Folders

First, we’ll build our components folder, which will contain a few components to work with, such as Chart.jsx, FeaturedInfo.jsxand Sidebar.jsx.

Charts.jsx
The Chart.jsx is where we’ll build our chart component, based on the recharts library. We’ll use that library to build a responsive chart interface, which we’ll use in other components like the Home.jsx and Product.jsx.

1import '../css/component/chart.css'

2import {

3 LineChart,

4 Line,

5 XAxis,

6 CartesianGrid,

7 Tooltip,

8 ResponsiveContainer,

9} from "recharts";

10function Chart({ title, data, dataKey, grid }) {

11 return (

12 <div className="chart">

13 <h3 className="chartTitle"> {title}</h3>

14 <ResponsiveContainer width="100%" aspect={4 / 1}>

15 <LineChart data={data}>

16 <XAxis dataKey="name" stroke="#5550bd" />

17 <Line type="monotone" dataKey={dataKey} stroke="#5550bd" />

18 <Tooltip />

19 {grid && <CartesianGrid stroke="#e0dfdf" strokeDasharray="5 5" />}

20 </LineChart>

21 </ResponsiveContainer>

22 </div>

23 );

24}

25export default Chart;

Chart

FeaturedInfo.jsx
We’ll need a dialogue at the top of our dashboard that prints our monthly cost, the money generated, and the total sales for the month.

1import '../css/component/featuredInfo.css'

2import { ArrowDownward, ArrowUpward } from "@material-ui/icons";

3function FeaturedInfo() {

4 return (

5 <div className="featured">

6 <div className="featuredItem">

7 <span className="featuredTitle"> Revenue</span>

8 <div className="featuredMoneyContainer">

9 <span className="featuredMoney"> $2,415 </spa>

10 <span className="featuredMoneyRate">

11 -11.4 <ArrowDownward className="featuredIcon negative"/>

12 </span>

13 </div>

14 <span className="featuredSub"> Compared to last month</span>

15 </div>

16 <div className="featuredItem">

17 <span className="featuredTitle"> Sales</span>

18 <div className="featuredMoneyContainer">

19 <span className="featuredMoney"> $4,415</span>

20 <span className="featuredMoneyRate">

21 -1.4 <ArrowDownward className="featuredIcon negative"/>

22 </span>

23 </div>

24 <span className="featuredSub"> Compared to last month</span>

25 </div>

26 <div className="featuredItem">

27 <span className="featuredTitle"> Cost</span>

28 <div className="featuredMoneyContainer">

29 <span className="featuredMoney"> $2,225</spa>

30 <span className="featuredMoneyRate">

31 +2.4 <ArrowUpward className="featuredIcon">

32 </span>

33 </div>

34 <span className="featuredSub"> Compared to last month</span>

35 </div>

36 </div>

37 );

38}

39export default FeaturedInfo;

Featured info

Sidebar.jsx
We are creating a sidebar component with our home, analytics, product, and other routing buttons.

1import '../css/component/sidebar.css'

2import {

3 LineStyle,

4 Timeline,

5 TrendingUp,

6 PermIdentity,

7 Storefront,

8 AttachMoney,

9 BarChart,

10 MailOutline,

11 DynamicFeed,

12 ChatBubbleOutline,

13 WorkOutline,

14 Report,

15} from "@material-ui/icons";

16import { Link } from "react-router-dom";

17function Sidebar() {

18 return (

19 <div className="sidebar">

20 <div className="sidebarWrapper">

21 <div className="sidebarMenu">

22 <h3 className="sidebarTitle">Dashboard</h3>

23 <ul className="sidebarList">

24 <Link to="/" className="link">

25 <li className="sidebarListItem active">

26 <LineStyle className="sidebarIcon" />

27 Home

28 </li>

29 </Link>

30 <li className="sidebarListItem">

31 <Timeline className="sidebarIcon" />

32 Analytics

33 </li>

34 <li className="sidebarListItem">

35 <TrendingUp className="sidebarIcon" />

36 Sales

37 </li>

38 </ul>

39 </div>

40 <div className="sidebarMenu">

41 <h3 className="sidebarTitle">Quick Menu</h3>

42 <ul className="sidebarList">

43 <Link to="/users" className="link">

44 <li className="sidebarListItem">

45 <PermIdentity className="sidebarIcon" />

46 Users

47 </li>

48 </Link>

49 <Link to="/products" className="link">

50 <li className="sidebarListItem">

51 <Storefront className="sidebarIcon" />

52 Products

53 </li>

54 </Link>

55 <li className="sidebarListItem">

56 <AttachMoney className="sidebarIcon" />

57 Transactions

58 </li>

59 <li className="sidebarListItem">

60 <BarChart className="sidebarIcon" />

61 Reports

62 </li>

63 </ul>

64 </div>

65 <div className="sidebarMenu">

66 <h3 className="sidebarTitle">Notifications</h3>

67 <ul className="sidebarList">

68 <li className="sidebarListItem">

69 <MailOutline className="sidebarIcon" />

70 Mail

71 </li>

72 <li className="sidebarListItem">

73 <DynamicFeed className="sidebarIcon" />

74 Feedback

75 </li>

76 <li className="sidebarListItem">

77 <ChatBubbleOutline className="sidebarIcon" />

78 Messages

79 </li>

80 </ul>

81 </div>

82 <div className="sidebarMenu">

83 <h3 className="sidebarTitle">Staff</h3>

84 <ul className="sidebarList">

85 <li className="sidebarListItem">

86 <WorkOutline className="sidebarIcon" />

87 Manage

88 </li>

89 <li className="sidebarListItem">

90 <Timeline className="sidebarIcon" />

91 Analytics

92 </li>

93 <li className="sidebarListItem">

94 <Report className="sidebarIcon" />

95 Reports

96 </li>

97 </ul>

98 </div>

99 </div>

100 </div>

101 );

102}

103export default Sidebar;

Sidebar

Topbar.jsx
The Topbar contains the company logo as an iconbadge that indicates notification, settings, and of course, user id.

1import React from "react";

2import '../css/component/topbar.css'

3

4import { NotificationsNone, Language, Settings } from "@material-ui/icons";

5function Topbar() {

6 return (

7 <div className="topbar">

8 <div className="topbarWrapper">

9 <div className="topLeft">

10 <span className="logo">OpenReplay</span>

11 </div>

12 <div className="topRight">

13 <div className="topbarIconContainer">

14 <NotificationsNone />

15 <span className="topIconBadge">2</span>

16 </div>

17 <div className="topbarIconContainer">

18 <Language />

19 <span className="topIconBadge">2</span>

20 </div>

21 <div className="topbarIconContainer">

22 <Settings />

23 </div>

24 <img src="https://images.pexels.com/photos/1526814/pexels-photo-1526814.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="" className="topAvatar" />

25 </div>

26 </div>

27 </div>

28 );

29}

30export default Topbar;

Topbar

WidgetLg.jsx
It contains a list of the latest transactions on the dashboard. It will also have a toggle icon to indicate if a transaction is approved or declined.

1import '../css/component/widgetLg.css'

2

3function WidgetLg() {

4 const Button = ({ type }) => {

5 return <button className={"widgetLgButton " + type}>{type}</button>;

6 };

7 return (

8 <div className="widgetLg">

9 <h3 className="widgetLgTitle">Latest transactions</h3>

10 <table className="widgetLgTable">

11 <tr className="widgetLgTr">

12 <th className="widgetLgTh">Customer</th>

13 <th className="widgetLgTh">Date</th>

14 <th className="widgetLgTh">Amount</th>

15 <th className="widgetLgTh">Status</th>

16 </tr>

17 <tr className="widgetLgTr">

18 <td className="widgetLgUser">

19 <img

20 src="https://images.gr-assets.com/authors/1561336084p8/4123863.jpg"

21 alt=""

22 className="widgetLgImg"

23 />

24 <span className="widgetLgName">Federico Kereki</span>

25 </td>

26 <td className="widgetLgDate">14 May 2022</td>

27 <td className="widgetLgAmount">$2100.00</td>

28 <td className="widgetLgStatus">

29 <Button type="Approved" />

30 </td>

31 </tr>

32 <tr className="widgetLgTr">

33 <td className="widgetLgUser">

34 <img

35 src="https://media-exp1.licdn.com/dms/image/C4D03AQFsohsj7miS2w/profile-displayphoto-shrink_800_800/0/1651377283409?e=1657756800&v=beta&t=rHN6C2GAljYKMZKQkAhR5DZyXfGtPv2r3PCo0Zqw7aU"

36 alt=""

37 className="widgetLgImg"

38 />

39 <span className="widgetLgName">Ikechi Fortune</span>

40 </td>

41 <td className="widgetLgDate">12 May 2022</td>

42 <td className="widgetLgAmount">$1202.00</td>

43 <td className="widgetLgStatus">

44 <Button type="Declined" />

45 </td>

46 </tr>

47 </table>

48 </div>

49 );

50}

51export default WidgetLg;

Widget with transactions, large

WidgetSm.jsx

We need a small version of the same widget.

1import '../css/component/widgetSm.css'

2import { Visibility } from "@material-ui/icons";

3function WidgetSm() {

4 return (

5 <div className="widgetSm">

6 <span className="widgetSmTitle">New Join Members</span>

7 <ul className="widgetSmList">

8 <li className="widgetSmListItem">

9 <img

10 src="https://pps.whatsapp.net/v/t61.24694-24/145137748_979282972786108_6637272315922901895_n.jpg?ccb=11-4&oh=50b54050bfe01133a2dcd9016d7eb42f&oe=628F8D9A"

11 alt=""

12 className="widgetSmImg"

13 />

14 <div className="widgetSmUser">

15 <span className="widgetSmUsername">Saviour Blessing</span>

16 <span className="widgetSmUserTitle">Software Engineer</span>

17 </div>

18 <button className="widgetSmButton">

19 <Visibility className="widgetSmIcon" />

20 Display

21 </button>

22 </li>

23 <li className="widgetSmListItem">

24 <img

25 src="https://images.pexels.com/photos/3992656/pexels-photo-3992656.png?auto=compress&cs=tinysrgb&dpr=2&w=500"

26 alt=""

27 className="widgetSmImg"

28 />

29 <div className="widgetSmUser">

30 <span className="widgetSmUsername">Anna Keller</span>

31 <span className="widgetSmUserTitle">Software Engineer</span>

32 </div>

33 <button className="widgetSmButton">

34 <Visibility className="widgetSmIcon" />

35 Display

36 </button>

37 </li>

38 </ul>

39 </div>

40 );

41}

42export default WidgetSm;

Widget, small version

Creating Page Folder

We’ll create our page folder for thre routing to our pages such as Home.jsx, NewProduct.jsx, NwUser.jsxetc.

Home.jsx
To have a friendly dashboard interface, our Home.jsx component will consist of the chart, widget, and user (dummy) data.

1import Chart from '../component/Chart';

2import FeaturedInfo from '../components/FeaturedInfo'

3import '../css/page/home.css'

4import { userData } from "../dummyData";

5import WidgetSm from '..components/WidgetSm';

6import WidgetLg from '..components/WidgetLg';

7function Home() {

8 return (

9 <div className="home">

10 <FeaturedInfo />

11 <Chart data={userData} title="User Analytics" grid dataKey="Active User"/>

12 <div className="homeWidgets">

13 <WidgetSm/>

14 <WidgetLg/>

15 </div>

16 </div>

17 );

18}

19export default Home;

Home Page

Open Source Session Replay

OpenReplay is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data.

replayer.png

Start enjoying your debugging experience – start using OpenReplay for free.

Product.jsx

This is the info about products.

1import { Link } from "react-router-dom";

2import '../css/page/product.css'

3import Chart from '../components/Chart';

4import { productData } from "../dummyData";

5import {Publish} from '@material-ui/icons'

6function Product() {

7 return (

8 <div className="product">

9 <div className="productTitleContainer">

10 <h1 className="productTitle">Product</h1>

11 <Link to="/newproduct">

12 <button className="productAddButton">Create</button>

13 </Link>

14 </div>

15 <div className="productTop">

16 <div className="productTopLeft">

17 <Chart data={productData} dataKey="Sales" title="Sales Performance"/>

18 </div>

19 <div className="productTopRight">

20 <div className="productInfoTop">

21 <img src="https://images.pexels.com/photos/7156886/pexels-photo-7156886.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="" className="productInfoImg" />

22 <span className="productName">Apple Airpods</span>

23 </div>

24 <div className="productInfoBottom">

25 <div className="productInfoItem">

26 <span className="productInfoKey">id:</span>

27 <span className="productInfoValue">123</span>

28 </div>

29 <div className="productInfoItem">

30 <span className="productInfoKey">sales:</span>

31 <span className="productInfoValue">5123</span>

32 </div>

33 <div className="productInfoItem">

34 <span className="productInfoKey">active:</span>

35 <span className="productInfoValue">yes</span>

36 </div>

37 <div className="productInfoItem">

38 <span className="productInfoKey">in stock:</span>

39 <span className="productInfoValue">no</span>

40 </div>

41 </div>

42 </div>

43 </div>

44 <div className="productBottom">

45 <form className="productForm">

46 <div className="productFormLeft">

47 <label>Product Name</label>

48 <input type="text" placeholder="Apple AirPod" />

49 <label>In Stock</label>

50 <select name="inStock" id="idStock">

51 <option value="yes">Yes</option>

52 <option value="no">No</option>

53 </select>

54 <label>Active</label>

55 <select name="active" id="active">

56 <option value="yes">Yes</option>

57 <option value="no">No</option>

58 </select>

59 </div>

60 <div className="productFormRight">

61 <div className="productUpload">

62 <img src="https://images.pexels.com/photos/7156886/pexels-photo-7156886.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="" className="productUploadImg" />

63 <label for="file">

64 <Publish/>

65 </label>

66 <input type="file" id="file" style={{display:"none"}} />

67 </div>

68 <button className="productButton">Update</button>

69 </div>

70 </form>

71 </div>

72 </div>

73 );

74}

75export default Product;

ProductList.jsx
The ProductList.jsx components will hold a list of all products being purchased, their id, status (whether active or not), price, and stock.

1import '../css/page/productList.css'

2import { DataGrid } from '@mui/x-data-grid';

3import { DeleteOutline } from "@material-ui/icons";

4import { productRows } from "../dummyData";

5import { Link } from "react-router-dom";

6import { useState } from "react";

7function ProductList() {

8 const [data, setData] = useState(productRows);

9 const handleDelete = (id) => {

10 setData(data.filter((item) => item.id !== id));

11 };

12 const columns = [

13 { field: "id", headerName: "ID", width: 90 },

14 {

15 field: "product",

16 headerName: "Product",

17 width: 200,

18 renderCell: (params) => {

19 return (

20 <div className="productListItem">

21 <img className="productListImg" src={params.row.img} alt="" />

22 {params.row.name}

23 </div>

24 );

25 },

26 },

27 { field: "stock", headerName: "Stock", width: 200 },

28 {

29 field: "status",

30 headerName: "Status",

31 width: 120,

32 },

33 {

34 field: "price",

35 headerName: "Price",

36 width: 160,

37 },

38 {

39 field: "action",

40 headerName: "Action",

41 width: 150,

42 renderCell: (params) => {

43 return (

44 <>

45 <Link to={"/product/" + params.row.id}>

46 <button className="productListEdit">Edit</button>

47 </Link>

48 <DeleteOutline

49 className="productListDelete"

50 onClick={() => handleDelete(params.row.id)}

51 />

52 </>

53 );

54 },

55 },

56 ];

57 return (

58 <div className="productList">

59 <DataGrid

60 rows={data}

61 disableSelectionOnClick

62 columns={columns}

63 pageSize={8}

64 checkboxSelection

65 />

66 </div>

67 );

68}

69export default ProductList;

Product List

User.jsx
The User.jsx component must contain the user’s essential information, such as name, occupation, account information, contact information, etc.

1import {

2 CalendarToday,

3 LocationSearching,

4 MailOutline,

5 PermIdentity,

6 PhoneAndroid,

7 Publish,

8 } from "@material-ui/icons";

9import { Link } from "react-router-dom";

10import '../css/page/user.css'

11

12function User() {

13 return (

14 <div className="user">

15 <div className="userTitleContainer">

16 <h1 className="userTitle">Edit User</h1>

17 <Link to="/newUser">

18 <button className="userAddButton">Create</button>

19 </Link>

20 </div>

21 <div className="userContainer">

22 <div className="userShow">

23 <div className="userShowTop">

24 <img

25 src="https://images.pexels.com/photos/1152994/pexels-photo-1152994.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"

26 alt=""

27 className="userShowImg"

28 />

29 <div className="userShowTopTitle">

30 <span className="userShowUsername">Anna Becker</span>

31 <span className="userShowUserTitle">Software Engineer</span>

32 </div>

33 </div>

34 <div className="userShowBottom">

35 <span className="userShowTitle">Account Details</span>

36 <div className="userShowInfo">

37 <PermIdentity className="userShowIcon" />

38 <span className="userShowInfoTitle">annabeck99</span>

39 </div>

40 <div className="userShowInfo">

41 <CalendarToday className="userShowIcon" />

42 <span className="userShowInfoTitle">10.12.1999</span>

43 </div>

44 <span className="userShowTitle">Contact Details</span>

45 <div className="userShowInfo">

46 <PhoneAndroid className="userShowIcon" />

47 <span className="userShowInfoTitle">+1 123 456 67</span>

48 </div>

49 <div className="userShowInfo">

50 <MailOutline className="userShowIcon" />

51 <span className="userShowInfoTitle">annabeck99@gmail.com</span>

52 </div>

53 <div className="userShowInfo">

54 <LocationSearching className="userShowIcon" />

55 <span className="userShowInfoTitle">New York | USA</span>

56 </div>

57 </div>

58 </div>

59 <div className="userUpdate">

60 <span className="userUpdateTitle">Edit</span>

61 <form className="userUpdateForm">

62 <div className="userUpdateLeft">

63 <div className="userUpdateItem">

64 <label>Username</label>

65 <input

66 type="text"

67 placeholder="annabeck99"

68 className="userUpdateInput"

69 />

70 </div>

71 <div className="userUpdateItem">

72 <label>Full Name</label>

73 <input

74 type="text"

75 placeholder="Anna Becker"

76 className="userUpdateInput"

77 />

78 </div>

79 <div className="userUpdateItem">

80 <label>Email</label>

81 <input

82 type="text"

83 placeholder="annabeck99@gmail.com"

84 className="userUpdateInput"

85 />

86 </div>

87 <div className="userUpdateItem">

88 <label>Phone</label>

89 <input

90 type="text"

91 placeholder="+1 123 456 67"

92 className="userUpdateInput"

93 />

94 </div>

95 <div className="userUpdateItem">

96 <label>Address</label>

97 <input

98 type="text"

99 placeholder="New York | USA"

100 className="userUpdateInput"

101 />

102 </div>

103 </div>

104 <div className="userUpdateRight">

105 <div className="userUpdateUpload">

106 <img

107 className="userUpdateImg"

108 src="https://images.pexels.com/photos/1152994/pexels-photo-1152994.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"

109 alt=""

110 />

111 <label htmlFor="file">

112 <Publish className="userUpdateIcon" />

113 </label>

114 <input type="file" id="file" style={{ display: "none" }} />

115 </div>

116 <button className="userUpdateButton">Update</button>

117 </div>

118 </form>

119 </div>

120 </div>

121 </div>

122 );

123}

124export default User;

UserList.jsx
We’ll create a UserList.jsx containing details of clients and customers with purchase items and other transaction details. We will also have a function whereby we can edit and delete any user on the user page.

1

2import '../css/page/userList.css'

3import { DataGrid } from '@mui/x-data-grid';

4import { DeleteOutline } from "@material-ui/icons";

5import { userRows } from "../dummyData";

6import { Link } from "react-router-dom";

7import { useState } from "react";

8function UserList() {

9 const [data, setData] = useState(userRows);

10 const handleDelete = (id) => {

11 setData(data.filter((item) => item.id !== id));

12 };

13

14 const columns = [

15 { field: "id", headerName: "ID", width: 90 },

16 {

17 field: "user",

18 headerName: "User",

19 width: 200,

20 renderCell: (params) => {

21 return (

22 <div className="userListUser">

23 <img className="userListImg" src={params.row.avatar} alt="" />

24 {params.row.username}

25 </div>

26 );

27 },

28 },

29 { field: "email", headerName: "Email", width: 200 },

30 {

31 field: "status",

32 headerName: "Status",

33 width: 120,

34 },

35 {

36 field: "transaction",

37 headerName: "Transaction Volume",

38 width: 160,

39 },

40 {

41 field: "action",

42 headerName: "Action",

43 width: 150,

44 renderCell: (params) => {

45 return (

46 <>

47 <Link to={"/user/" + params.row.id}>

48 <button className="userListEdit">Edit</button>

49 </Link>

50 <DeleteOutline

51 className="userListDelete"

52 onClick={() => handleDelete(params.row.id)}

53 />

54 </>

55 );

56 },

57 },

58 ];

59 return (

60 <div className="userList">

61 <DataGrid

62 rows={data}

63 disableSelectionOnClick

64 columns={columns}

65 pageSize={8}

66 checkboxSelection

67 />

68 </div>

69 );

70}

71export default UserList;

User List

DummyData.js
It contains all the dummy data used in this project since we are not using a client / server side yet on the project.

1export const userData = [

2 {

3 name: "Jan",

4 "Active User": 4000,

5 },

6 {

7 name: "Feb",

8 "Active User": 3000,

9 },

10];

11export const productData = [

12 {

13 name: "Jan",

14 "Sales": 4000,

15 },

16 {

17 name: "Feb",

18 "Sales": 3000,

19 },

20];

21export const userRows = [

22 {

23 id: 1,

24 username: "Federico Kereki",

25 avatar:

26 "https://images.gr-assets.com/authors/1561336084p8/4123863.jpg",

27 email: "federico@gmail.com",

28 status: "active",

29 transaction: "$950.00",

30 },

31 {

32 id: 2,

33 username: "Chinda Great",

34 avatar:

35 "https://images.gr-fb.com/fb/1561349084p8/4123868.jpg",

36 email: "chinda@gmail.com",

37 status: "active",

38 transaction: "$320.00",

39 },

40];

41export const productRows = [

42 {

43 id: 1,

44 name: "Apple Airpods",

45 img:

46 "https://images.pexels.com/photos/7156886/pexels-photo-7156886.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",

47 stock: 123,

48 status: "active",

49 price: "$120.00",

50 },

51 {

52 id: 2,

53 name: "Apple Watch Series 6",

54 img:

55 "https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/G/I/174379_1610801608.jpg",

56 stock: 123,

57 status: "active",

58 price: "$270.00",

59 },

60];

App.js
All we have to do now is import all of the components, followed by the router from react-router-dom, which will be used to route the home page and other pages.

1import Sidebar from './components/Sidebar'

2import Topbar from "./components/Topbar";

3import "./App.css";

4import Home from "./pages/Home";

5import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

6import UserList from "./pages/UserList";

7import User from "./pages/User";

8import NewUser from "./pages/NewUser";

9import ProductList from "./pages/ProductList";

10import Product from "./pages/Product";

11import NewProduct from "./pages/NewProduct";

12function App() {

13 return (

14 <Router>

15 <Topbar />

16 <div className="container">

17 <Sidebar />

18 <Routes>

19 <Route path="/" element={<Home />} />

20 <Route path="/users" element={<UserList />} />

21 <Route path="/user/:userId" element={<User />} />

22 <Route path="/newUser" element={<NewUser />} />

23 <Route path="/products" element={<ProductList />} />

24 <Route path="/product/:productId" element={<Product />} />

25 <Route path="/newproduct" element={<NewProduct />} />

26 </Routes>

27 </div>

28 </Router>

29 );

30}

31export default App;

Configuring CSS File

Now we’ll both configure and implement our CSS file. Although we used Material UI to style most of our components, we still need to apply our CSS. So now we need to style all of our components, pages, and dummy data. Note: For the full CSS code block, click here.

Our dashboard, running

Conclusion

In this article, we covered the use of Material UI for a dashboard interface and Recharts for a composable chart for our dashboard – all while trying to construct our administrative dashboard. For the live app, click here. For the source code on GitHub, kindly click here.

Resources

newsletter



Source link