Creating a Responsive Admin Dashboard with React
Tags: webdev, javascript, react
Published: 2022-06-07 23:26:23

by [Godwin Chinda](https://blog.openreplay.com/authors/godwin-chinda)

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.

```
npx create-react-app admin-dashboard
cd admin-dashboard
npm i recharts
npm i @mui/material @emotion/react @emotion/styled
npm 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.jsx`, and `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`.

```javascript
import '../css/component/chart.css' 
import { 
  LineChart, 
  Line, 
  XAxis, 
  CartesianGrid, 
  Tooltip, 
  ResponsiveContainer, 
} from "recharts"; 
function Chart({ title, data, dataKey, grid }) { 
  return ( 
    <div className="chart"> 
      <h3 className="chartTitle"> {title}</h3> 
      <ResponsiveContainer width="100%" aspect={4 / 1}> 
        <LineChart data={data}> 
          <XAxis dataKey="name" stroke="#5550bd" /> 
          <Line type="monotone" dataKey={dataKey} stroke="#5550bd" /> 
          <Tooltip /> 
          {grid && <CartesianGrid stroke="#e0dfdf" strokeDasharray="5 5" />} 
        </LineChart> 
      </ResponsiveContainer> 
    </div> 
  ); 
} 
export default Chart;
```

![Chart](https://blog.openreplay.com/static/00f4e5639f5fee287d853491dc8e4f96/a14bb/image01.png)


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

```javascript
import '../css/component/featuredInfo.css' 
import { ArrowDownward, ArrowUpward } from "@material-ui/icons"; 
function FeaturedInfo() { 
  return ( 
    <div className="featured"> 
      <div className="featuredItem"> 
        <span className="featuredTitle"> Revenue</span> 
        <div className="featuredMoneyContainer"> 
          <span className="featuredMoney"> $2,415 </spa> 
          <span className="featuredMoneyRate"> 
            -11.4 <ArrowDownward className="featuredIcon negative"/> 
          </span> 
        </div> 
        <span className="featuredSub"> Compared to last month</span> 
      </div> 
      <div className="featuredItem"> 
        <span className="featuredTitle"> Sales</span> 
        <div className="featuredMoneyContainer"> 
          <span className="featuredMoney"> $4,415</span>
          <span className="featuredMoneyRate"> 
            -1.4 <ArrowDownward className="featuredIcon negative"/> 
          </span> 
        </div> 
        <span className="featuredSub"> Compared to last month</span> 
        </div> 
        <div className="featuredItem"> 
          <span className="featuredTitle"> Cost</span> 
          <div className="featuredMoneyContainer"> 
            <span className="featuredMoney"> $2,225</spa> 
            <span className="featuredMoneyRate"> 
              +2.4 <ArrowUpward className="featuredIcon"> 
            </span> 
          </div> 
          <span className="featuredSub"> Compared to last month</span> 
        </div> 
      </div> 
    ); 
} 
export default FeaturedInfo;
```

![Featured info](https://blog.openreplay.com/static/2d99369e08db1d76ed690cb9bbe17de8/4c961/image02.png)


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

```javascript
import '../css/component/sidebar.css'
import {
  LineStyle,
  Timeline,
  TrendingUp,
  PermIdentity,
  Storefront,
  AttachMoney, 
  BarChart,
  MailOutline,
  DynamicFeed,
  ChatBubbleOutline,
  WorkOutline,
  Report,
} from "@material-ui/icons";
import { Link } from "react-router-dom";
function Sidebar() {
  return (
    <div className="sidebar">
      <div className="sidebarWrapper">
        <div className="sidebarMenu">
          <h3 className="sidebarTitle">Dashboard</h3>
          <ul className="sidebarList">
            <Link to="/" className="link">
            <li className="sidebarListItem active">
              <LineStyle className="sidebarIcon" />
              Home
            </li>
            </Link>
            <li className="sidebarListItem">
              <Timeline className="sidebarIcon" />
              Analytics
            </li>
            <li className="sidebarListItem">
              <TrendingUp className="sidebarIcon" />
              Sales
            </li>
          </ul>
        </div>
        <div className="sidebarMenu">
          <h3 className="sidebarTitle">Quick Menu</h3>
          <ul className="sidebarList">
            <Link to="/users" className="link">
              <li className="sidebarListItem">
                <PermIdentity className="sidebarIcon" />
                Users
              </li>
            </Link>
            <Link to="/products" className="link">
              <li className="sidebarListItem">
                <Storefront className="sidebarIcon" />
                Products
              </li>
            </Link>
            <li className="sidebarListItem">
              <AttachMoney className="sidebarIcon" />
              Transactions
            </li>
            <li className="sidebarListItem">
              <BarChart className="sidebarIcon" />
              Reports
            </li>
          </ul>
        </div>
        <div className="sidebarMenu">
          <h3 className="sidebarTitle">Notifications</h3>
          <ul className="sidebarList">
            <li className="sidebarListItem">
              <MailOutline className="sidebarIcon" />
              Mail
            </li>
            <li className="sidebarListItem">
              <DynamicFeed className="sidebarIcon" />
              Feedback
            </li>
            <li className="sidebarListItem">
              <ChatBubbleOutline className="sidebarIcon" />
              Messages
            </li>
          </ul>
        </div>
        <div className="sidebarMenu">
          <h3 className="sidebarTitle">Staff</h3>
          <ul className="sidebarList">
            <li className="sidebarListItem">
              <WorkOutline className="sidebarIcon" />
              Manage
            </li>
            <li className="sidebarListItem">
              <Timeline className="sidebarIcon" />
              Analytics
            </li>
            <li className="sidebarListItem">
              <Report className="sidebarIcon" />
              Reports
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
}
export default Sidebar;
```

![Sidebar](https://blog.openreplay.com/static/54a1e938a07d69c2dfff10df34f4beb0/ac7f0/image03.png)


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

```javascript
import React from "react";
import '../css/component/topbar.css'
// import "./topbar.css";
import { NotificationsNone, Language, Settings } from "@material-ui/icons";
function Topbar() {
  return (
    <div className="topbar">
      <div className="topbarWrapper">
        <div className="topLeft">
          <span className="logo">OpenReplay</span>
        </div>
        <div className="topRight">
          <div className="topbarIconContainer">
            <NotificationsNone />
            <span className="topIconBadge">2</span>
          </div>
          <div className="topbarIconContainer">
            <Language />
            <span className="topIconBadge">2</span>
          </div>
          <div className="topbarIconContainer">
            <Settings />
          </div>
          <img src="https://images.pexels.com/photos/1526814/pexels-photo-1526814.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="" className="topAvatar" />
        </div>
      </div>
    </div>
  );
}
export default Topbar;
```

![Topbar](https://blog.openreplay.com/static/3a8e1454b3a417f8f1f11488b9aaf2e2/506c9/image03b.png)


**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.

```javascript
import '../css/component/widgetLg.css'

function WidgetLg() {
  const Button = ({ type }) => {
    return <button className={"widgetLgButton " + type}>{type}</button>;
  };
  return (
    <div className="widgetLg">
      <h3 className="widgetLgTitle">Latest transactions</h3>
      <table className="widgetLgTable">
        <tr className="widgetLgTr">
          <th className="widgetLgTh">Customer</th>
          <th className="widgetLgTh">Date</th>
          <th className="widgetLgTh">Amount</th>
          <th className="widgetLgTh">Status</th>
        </tr>
        <tr className="widgetLgTr">
          <td className="widgetLgUser">
            <img
              src="https://images.gr-assets.com/authors/1561336084p8/4123863.jpg"
              alt=""
              className="widgetLgImg"
            />
            <span className="widgetLgName">Federico Kereki</span>
          </td>
          <td className="widgetLgDate">14 May 2022</td>
          <td className="widgetLgAmount">$2100.00</td>
          <td className="widgetLgStatus">
            <Button type="Approved" />
          </td>
        </tr>
        <tr className="widgetLgTr">
          <td className="widgetLgUser">
            <img
              src="https://media-exp1.licdn.com/dms/image/C4D03AQFsohsj7miS2w/profile-displayphoto-shrink_800_800/0/1651377283409?e=1657756800&v=beta&t=rHN6C2GAljYKMZKQkAhR5DZyXfGtPv2r3PCo0Zqw7aU"
              alt=""
              className="widgetLgImg"
            />
            <span className="widgetLgName">Ikechi Fortune</span>
          </td>
          <td className="widgetLgDate">12 May 2022</td>
          <td className="widgetLgAmount">$1202.00</td>
          <td className="widgetLgStatus">
            <Button type="Declined" />
          </td>
        </tr>
        </table>
    </div>
  );
}
export default WidgetLg;
```

![Widget with transactions, large](https://blog.openreplay.com/static/90f12b5f7ea5e7421108a9f8dca9d21e/e302d/image04.png)

**WidgetSm.jsx**

We need a small version of the same widget.

```javascript
import '../css/component/widgetSm.css'
import { Visibility } from "@material-ui/icons";
function WidgetSm() {
  return (
    <div className="widgetSm">
      <span className="widgetSmTitle">New Join Members</span>
      <ul className="widgetSmList">
        <li className="widgetSmListItem">
          <img
            src="https://pps.whatsapp.net/v/t61.24694-24/145137748_979282972786108_6637272315922901895_n.jpg?ccb=11-4&oh=50b54050bfe01133a2dcd9016d7eb42f&oe=628F8D9A"
            alt=""
            className="widgetSmImg"
          />
          <div className="widgetSmUser">
            <span className="widgetSmUsername">Saviour Blessing</span>
            <span className="widgetSmUserTitle">Software Engineer</span>
          </div>
          <button className="widgetSmButton">
            <Visibility className="widgetSmIcon" />
            Display
          </button>
        </li>
        <li className="widgetSmListItem">
          <img
            src="https://images.pexels.com/photos/3992656/pexels-photo-3992656.png?auto=compress&cs=tinysrgb&dpr=2&w=500"
            alt=""
            className="widgetSmImg"
          />
          <div className="widgetSmUser">
            <span className="widgetSmUsername">Anna Keller</span>
            <span className="widgetSmUserTitle">Software Engineer</span>
          </div>
          <button className="widgetSmButton">
            <Visibility className="widgetSmIcon" />
            Display
          </button>
        </li>
      </ul>
    </div>
  );
}
export default WidgetSm;
```

![Widget, small version](https://blog.openreplay.com/static/e64531ee980b7b7bf7fe866437d03899/10731/image05.png)

## Creating Page Folder

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

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

```javascript
import Chart from '../component/Chart';
import FeaturedInfo from '../components/FeaturedInfo'
import '../css/page/home.css'
import { userData } from "../dummyData";
import WidgetSm from '..components/WidgetSm';
import WidgetLg from '..components/WidgetLg';
function Home() {
  return (
    <div className="home">
      <FeaturedInfo />
      <Chart data={userData} title="User Analytics" grid dataKey="Active User"/>
      <div className="homeWidgets">
        <WidgetSm/>
        <WidgetLg/>
      </div>
    </div>
  );
}
export default Home;
```

![Home Page](https://blog.openreplay.com/static/3960852a639885d5114bfad3e1a3b2c6/1840d/image06.png)


## Open Source Session Replay

_[OpenReplay](https://github.com/openreplay/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](https://raw.githubusercontent.com/openreplay/openreplay/main/static/replayer.png)

_Start enjoying your debugging experience - [start using OpenReplay for free](https://github.com/openreplay/openreplay)._



**Product.jsx**

This is the info about products.

```javascript
import { Link } from "react-router-dom";
import '../css/page/product.css'
import Chart from '../components/Chart';
import { productData } from "../dummyData";
import {Publish} from '@material-ui/icons'
function Product() {
  return (
    <div className="product">
      <div className="productTitleContainer">
        <h1 className="productTitle">Product</h1>
        <Link to="/newproduct">
          <button className="productAddButton">Create</button>
        </Link>
      </div>
      <div className="productTop">
          <div className="productTopLeft">
              <Chart data={productData} dataKey="Sales" title="Sales Performance"/>
          </div>
          <div className="productTopRight">
              <div className="productInfoTop">
                  <img src="https://images.pexels.com/photos/7156886/pexels-photo-7156886.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="" className="productInfoImg" />
                  <span className="productName">Apple Airpods</span>
              </div>
              <div className="productInfoBottom">
                  <div className="productInfoItem">
                      <span className="productInfoKey">id:</span>
                      <span className="productInfoValue">123</span>
                  </div>
                  <div className="productInfoItem">
                      <span className="productInfoKey">sales:</span>
                      <span className="productInfoValue">5123</span>
                  </div>
                  <div className="productInfoItem">
                      <span className="productInfoKey">active:</span>
                      <span className="productInfoValue">yes</span>
                  </div>
                  <div className="productInfoItem">
                      <span className="productInfoKey">in stock:</span>
                      <span className="productInfoValue">no</span>
                  </div>
              </div>
          </div>
      </div>
      <div className="productBottom">
          <form className="productForm">
              <div className="productFormLeft">
                  <label>Product Name</label>
                  <input type="text" placeholder="Apple AirPod" />
                  <label>In Stock</label>
                  <select name="inStock" id="idStock">
                      <option value="yes">Yes</option>
                      <option value="no">No</option>
                  </select>
                  <label>Active</label>
                  <select name="active" id="active">
                      <option value="yes">Yes</option>
                      <option value="no">No</option>
                  </select>
              </div>
              <div className="productFormRight">
                  <div className="productUpload">
                      <img src="https://images.pexels.com/photos/7156886/pexels-photo-7156886.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="" className="productUploadImg" />
                      <label for="file">
                          <Publish/>
                      </label>
                      <input type="file" id="file" style={{display:"none"}} />
                  </div>
                  <button className="productButton">Update</button>
              </div>
          </form>
      </div>
    </div>
  );
}
export 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.

```javascript
import '../css/page/productList.css'
import { DataGrid } from '@mui/x-data-grid';
import { DeleteOutline } from "@material-ui/icons";
import { productRows } from "../dummyData";
import { Link } from "react-router-dom";
import { useState } from "react";
function ProductList() {
  const [data, setData] = useState(productRows);
  const handleDelete = (id) => {
    setData(data.filter((item) => item.id !== id));
  };
  const columns = [
    { field: "id", headerName: "ID", width: 90 },
    {
      field: "product",
      headerName: "Product",
      width: 200,
      renderCell: (params) => {
        return (
          <div className="productListItem">
            <img className="productListImg" src={params.row.img} alt="" />
            {params.row.name}
          </div>
        );
      },
    },
    { field: "stock", headerName: "Stock", width: 200 },
    {
      field: "status",
      headerName: "Status",
      width: 120,
    },
    {
      field: "price",
      headerName: "Price",
      width: 160,
    },
    {
      field: "action",
      headerName: "Action",
      width: 150,
      renderCell: (params) => {
        return (
          <>
            <Link to={"/product/" + params.row.id}>
              <button className="productListEdit">Edit</button>
            </Link>
            <DeleteOutline
              className="productListDelete"
              onClick={() => handleDelete(params.row.id)}
            />
          </>
        );
      },
    },
  ];
  return (
    <div className="productList">
      <DataGrid
        rows={data}
        disableSelectionOnClick
        columns={columns}
        pageSize={8}
        checkboxSelection
      />
    </div>
  );
}
export default ProductList;
```

![Product List](https://blog.openreplay.com/static/234c2ad83fb3054b0b35ba88004fe980/cf7e4/image07.png)


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

```javascript
import {
    CalendarToday,
    LocationSearching,
    MailOutline,
    PermIdentity,
    PhoneAndroid,
    Publish,
  } from "@material-ui/icons";
import { Link } from "react-router-dom";
import '../css/page/user.css'

function User() {
  return (
    <div className="user">
      <div className="userTitleContainer">
        <h1 className="userTitle">Edit User</h1>
        <Link to="/newUser">
          <button className="userAddButton">Create</button>
        </Link>
      </div>
      <div className="userContainer">
        <div className="userShow">
          <div className="userShowTop">
            <img
              src="https://images.pexels.com/photos/1152994/pexels-photo-1152994.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
              alt=""
              className="userShowImg"
            />
            <div className="userShowTopTitle">
              <span className="userShowUsername">Anna Becker</span>
              <span className="userShowUserTitle">Software Engineer</span>
            </div>
          </div>
          <div className="userShowBottom">
            <span className="userShowTitle">Account Details</span>
            <div className="userShowInfo">
              <PermIdentity className="userShowIcon" />
              <span className="userShowInfoTitle">annabeck99</span>
            </div>
            <div className="userShowInfo">
              <CalendarToday className="userShowIcon" />
              <span className="userShowInfoTitle">10.12.1999</span>
            </div>
            <span className="userShowTitle">Contact Details</span>
            <div className="userShowInfo">
              <PhoneAndroid className="userShowIcon" />
              <span className="userShowInfoTitle">+1 123 456 67</span>
            </div>
            <div className="userShowInfo">
              <MailOutline className="userShowIcon" />
              <span className="userShowInfoTitle">annabeck99@gmail.com</span>
            </div>
            <div className="userShowInfo">
              <LocationSearching className="userShowIcon" />
              <span className="userShowInfoTitle">New York | USA</span>
            </div>
          </div>
        </div>
        <div className="userUpdate">
          <span className="userUpdateTitle">Edit</span>
          <form className="userUpdateForm">
            <div className="userUpdateLeft">
              <div className="userUpdateItem">
                <label>Username</label>
                <input
                  type="text"
                  placeholder="annabeck99"
                  className="userUpdateInput"
                />
              </div>
              <div className="userUpdateItem">
                <label>Full Name</label>
                <input
                  type="text"
                  placeholder="Anna Becker"
                  className="userUpdateInput"
                />
              </div>
              <div className="userUpdateItem">
                <label>Email</label>
                <input
                  type="text"
                  placeholder="annabeck99@gmail.com"
                  className="userUpdateInput"
                />
              </div>
              <div className="userUpdateItem">
                <label>Phone</label>
                <input
                  type="text"
                  placeholder="+1 123 456 67"
                  className="userUpdateInput"
                />
              </div>
              <div className="userUpdateItem">
                <label>Address</label>
                <input
                  type="text"
                  placeholder="New York | USA"
                  className="userUpdateInput"
                />
              </div>
            </div>
            <div className="userUpdateRight">
              <div className="userUpdateUpload">
                <img
                  className="userUpdateImg"
                  src="https://images.pexels.com/photos/1152994/pexels-photo-1152994.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
                  alt=""
                />
                <label htmlFor="file">
                  <Publish className="userUpdateIcon" />
                </label>
                <input type="file" id="file" style={{ display: "none" }} />
              </div>
              <button className="userUpdateButton">Update</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}
export 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.

```javascript
// import "./userList.css";
import '../css/page/userList.css'
import { DataGrid } from '@mui/x-data-grid';
import { DeleteOutline } from "@material-ui/icons";
import { userRows } from "../dummyData";
import { Link } from "react-router-dom";
import { useState } from "react";
function UserList() {
  const [data, setData] = useState(userRows);
  const handleDelete = (id) => {
    setData(data.filter((item) => item.id !== id));
  };
  
  const columns = [
    { field: "id", headerName: "ID", width: 90 },
    {
      field: "user",
      headerName: "User",
      width: 200,
      renderCell: (params) => {
        return (
          <div className="userListUser">
            <img className="userListImg" src={params.row.avatar} alt="" />
            {params.row.username}
          </div>
        );
      },
    },
    { field: "email", headerName: "Email", width: 200 },
    {
      field: "status",
      headerName: "Status",
      width: 120,
    },
    {
      field: "transaction",
      headerName: "Transaction Volume",
      width: 160,
    },
    {
      field: "action",
      headerName: "Action",
      width: 150,
      renderCell: (params) => {
        return (
          <>
            <Link to={"/user/" + params.row.id}>
              <button className="userListEdit">Edit</button>
            </Link>
            <DeleteOutline
              className="userListDelete"
              onClick={() => handleDelete(params.row.id)}
            />
          </>
        );
      },
    },
  ];
  return (
    <div className="userList">
      <DataGrid
        rows={data}
        disableSelectionOnClick
        columns={columns}
        pageSize={8}
        checkboxSelection
      />
    </div>
  );
}
export default UserList;
```

![User List](https://blog.openreplay.com/static/15b32a0afe179012e291f945dc81bf83/020a7/image08.png)


**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.

```javascript
export const userData = [
  {
    name: "Jan",
    "Active User": 4000,
  },
  {
    name: "Feb",
    "Active User": 3000,
  },
];
export const productData = [
  {
    name: "Jan",
    "Sales": 4000,
  },
  {
    name: "Feb",
    "Sales": 3000,
  },
];
export const userRows = [
  {
    id: 1,
    username: "Federico Kereki",
    avatar:
      "https://images.gr-assets.com/authors/1561336084p8/4123863.jpg",
    email: "federico@gmail.com",
    status: "active",
    transaction: "$950.00",
  },
  {
    id: 2,
    username: "Chinda Great",
    avatar:
      "https://images.gr-fb.com/fb/1561349084p8/4123868.jpg",
    email: "chinda@gmail.com",
    status: "active",
    transaction: "$320.00",
  },
];
export const productRows = [
  {
    id: 1,
    name: "Apple Airpods",
    img:
      "https://images.pexels.com/photos/7156886/pexels-photo-7156886.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
    stock: 123,
    status: "active",
    price: "$120.00",
  },
  {
    id: 2,
    name: "Apple Watch Series 6",
    img:
      "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",
    stock: 123,
    status: "active",
    price: "$270.00",
  },
];
```

**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.

```javascript
import Sidebar from './components/Sidebar'
import Topbar from "./components/Topbar";
import "./App.css";
import Home from "./pages/Home";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import UserList from "./pages/UserList";
import User from "./pages/User";
import NewUser from "./pages/NewUser";
import ProductList from "./pages/ProductList";
import Product from "./pages/Product";
import NewProduct from "./pages/NewProduct";
function App() {
  return (
    <Router>
      <Topbar />
      <div className="container">
        <Sidebar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/users" element={<UserList />} />
          <Route path="/user/:userId" element={<User />} />
          <Route path="/newUser" element={<NewUser />} />
          <Route path="/products" element={<ProductList />} />
          <Route path="/product/:productId" element={<Product />} />
          <Route path="/newproduct" element={<NewProduct />} />
        </Routes>
      </div>
    </Router>
  );
}
export 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](https://github.com/EJINEROZ/dashboard/tree/main/src/css).


![Our dashboard, running](https://blog.openreplay.com/0b55159ddfe5719e5cac050b6c485cb1/image09.gif)

## 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 attempting to construct our administrative dashboard. For the live app, click [here](https://openreplay-dashboard.netlify.app/). For the source code on GitHub, kindly click [here](https://github.com/EJINEROZ/dashboard).

## Resources
- [React Admin Dashboard Tutorial](https://www.youtube.com/watch?v=aTPkos3LKi8)
- [Material UI](https://mui.com/material-ui/getting-started/installation/)
- [ReChart](https://recharts.org/en-US/)

[![newsletter](https://blog.openreplay.com/static/e6b18eda7a327511296a2f27692f9c70/e9957/newsletter.png)](https://newsletter.openreplay.com/)