fixing routes

Author: IMDADMI

public/styles/links.css

@@ -0,0 +1,4 @@
+.router-link{
+    text-decoration:none;
+    color:black;
+}

src/App.jsx

@@ -1,6 +1,14 @@
 import Inter from "../public/static/fonts/Inter.ttf";
 import { ThemeProvider, CssBaseline, createTheme } from "@mui/material";
 import RootComponent from "./components/RootComponent";
+import RootPage from "./components/RootPage";
+import {
+  Route,
+  createBrowserRouter,
+  createRoutesFromElements,
+  RouterProvider,
+} from "react-router-dom";
+import Home from "./components/bodyComponents/Home/Home";
 function App() {
   const theme = createTheme({
     spacing: 4,
@@ -40,9 +48,25 @@ function App() {
     },
     //here we customize our typographi and in the variant prop we can use out myVar value
   });
+  const router = createBrowserRouter(
+    createRoutesFromElements(
+      <Route path="/" element={<RootComponent />}>
+        <Route index element={<RootPage />}></Route>
+        <Route path="/home" element={<Home />}></Route>
+        <Route path="/inventory"></Route>
+        <Route path="/orders"></Route>
+        <Route path="/customers"></Route>
+        <Route path="/revenue"></Route>
+        <Route path="/growth"></Route>
+        <Route path="/reports"></Route>
+        <Route path="/settings"></Route>
+      </Route>
+    )
+  );
+
   return (
     <ThemeProvider theme={theme}>
-      <RootComponent />
+      <RouterProvider router={router} />
       <CssBaseline />
     </ThemeProvider>
   );

src/components/BodyComponent.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import NavBarComponent from "./NavBarComponent";
 import { Box, Grid } from "@mui/material";
 import SideBarComponent from "./SideBarComponent";
-import BodyComponent from "./BodyComponent";
+import { Outlet } from "react-router-dom";
 
 export default function RootComponent() {
   return (
@@ -15,7 +15,7 @@ export default function RootComponent() {
             <SideBarComponent />
           </Grid>
           <Grid item md={10}>
-            <BodyComponent />
+            <Outlet />
           </Grid>
         </Grid>
       </Box>

src/components/RootComponent.jsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function RootPage() {
+  return <div>RootPage</div>;
+}

src/components/RootPage.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import "../../public/styles/links.css";
 import {
   List,
   ListItem,
@@ -9,6 +10,7 @@ import {
   Box,
   Snackbar,
   Alert,
+  Button,
 } from "@mui/material";
 import {
   HomeOutlined,
@@ -20,8 +22,13 @@ import {
   TrendingUpOutlined,
   PeopleAltOutlined,
 } from "@mui/icons-material";
+import { Link, NavLink, useNavigate } from "react-router-dom";
 
 export default function SideBarComponent() {
+  const navigate = useNavigate();
+  const navigateTo = (to) => {
+    navigate(to);
+  };
   // const styles = theme => ({
   //     listItemText:{
   //         fontSize:'0.7em',//Insert your required size
@@ -41,7 +48,7 @@ export default function SideBarComponent() {
       component: <CardTravelOutlined fontSize="medium" color="primary" />,
     },
     {
-      title: "Customer",
+      title: "Customers",
       component: <PeopleAltOutlined fontSize="medium" color="primary" />,
     },
     {
@@ -53,7 +60,7 @@ export default function SideBarComponent() {
       component: <TrendingUpOutlined fontSize="medium" color="primary" />,
     },
     {
-      title: "Report",
+      title: "Reports",
       component: <DescriptionOutlined fontSize="medium" color="primary" />,
     },
     {
@@ -74,6 +81,7 @@ export default function SideBarComponent() {
               <ListItemButton
                 onClick={(event) => {
                   handlSelectedComponent(event, index);
+                  navigateTo(comp.title.toLocaleLowerCase());
                 }}
                 selected={index === selected}
                 sx={{
@@ -86,6 +94,10 @@ export default function SideBarComponent() {
                 <ListItemIcon>
                   <IconButton>{comp.component}</IconButton>
                 </ListItemIcon>
+                {/* <Link
+                  to={"" + comp.title.toLocaleLowerCase()}
+                  className="router-link"
+                > */}
                 <ListItemText
                   primary={comp.title}
                   primaryTypographyProps={{
@@ -94,6 +106,7 @@ export default function SideBarComponent() {
                     color: selected === index ? "primary.main" : "inherit",
                   }}
                 />
+                {/* </Link> */}
               </ListItemButton>
             </Box>
           </ListItem>

src/components/SideBarComponent.jsx

@@ -69,25 +69,25 @@ export default class Home extends Component {
           }}
         >
           {cardComponent.map((card, index) => (
-            <Grid item md={"3"} key={index}>
+            <Grid item md={3} key={index}>
               <InfoCard card={card} />
             </Grid>
           ))}
         </Grid>
         <Grid container sx={{ marginX: 3 }}>
-          <Grid item md={"8"}>
+          <Grid item md={8}>
             <TotalSales data={data} />
           </Grid>
-          <Grid item md={"4"}>
+          <Grid item md={4}>
             <SalesByCity data={data} />
           </Grid>
         </Grid>
 
         <Grid container sx={{ margin: 3 }}>
-          <Grid item md={"6"}>
+          <Grid item md={6}>
             <Channels />
           </Grid>
-          <Grid item md={"6"}>
+          <Grid item md={6}>
             <TopSellingProduct />
           </Grid>
         </Grid>

src/components/bodyComponents/Home/Home.jsx

@@ -46,9 +46,9 @@ export default function TopSellingProduct() {
             </TableRow>
           </TableHead>
           <TableBody>
-            {products.map((product) => {
+            {products.map((product, id) => {
               return (
-                <TableRow>
+                <TableRow key={id}>
                   <TableCell>{product.name}</TableCell>
                   <TableCell>{product.price}</TableCell>
                   <TableCell>{product.quantity}</TableCell>