Inventory Route

src/App.tsx

@@ -6,6 +6,7 @@ import Container from "./Components/Container/Container";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Store from "./Plugins/Redux/Store/Store";
 import { Provider } from "react-redux";
+import Inventory from "./Routes/Inventory/Inventory";
 
 const router = createBrowserRouter([
   {
@@ -29,6 +30,14 @@ const router = createBrowserRouter([
       </Container>
     ),
   },
+  {
+    path: "/Inventory",
+    element: (
+      <Container>
+        <Inventory />
+      </Container>
+    ),
+  },
 ]);
 
 export default function App() {

src/components/InventoryInfo/InventoryInfo.tsx

@@ -0,0 +1,41 @@
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
+
+type Product = {
+  id: number;
+  name: string;
+  stocks: number;
+  lastModified: string;
+};
+
+type ProductInfoProps = {
+  products: Product[];
+};
+
+export default function InventoryInfo(props: ProductInfoProps) {
+  const { products } = props;
+
+  return (
+    <TableContainer>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell style={{ color: 'white' }}>Product ID</TableCell>
+            <TableCell style={{ color: 'white' }}>Product Name</TableCell>
+            <TableCell style={{ color: 'white' }}>Stocks</TableCell>
+            <TableCell style={{ color: 'white' }}>Last Modified</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {products.map((product) => (
+            <TableRow key={product.id}>
+              <TableCell style={{ color: 'white' }}>{product.id}</TableCell>
+              <TableCell style={{ color: 'white' }}>{product.name}</TableCell>
+              <TableCell style={{ color: 'white' }}>{product.stocks}</TableCell>
+              <TableCell style={{ color: 'white' }}>{product.lastModified}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

src/components/ProductInfo/ProductInfo.tsx

@@ -21,7 +21,6 @@ export default function ProductInfo(props: ProductInfoProps) {
           <TableRow>
             <TableCell style={{ color: 'white' }}>Product ID</TableCell>
             <TableCell style={{ color: 'white' }}>Product Name</TableCell>
-            <TableCell style={{ color: 'white' }}>Stocks</TableCell>
             <TableCell style={{ color: 'white' }}>Last Modified</TableCell>
           </TableRow>
         </TableHead>
@@ -30,7 +29,6 @@ export default function ProductInfo(props: ProductInfoProps) {
             <TableRow key={product.id}>
               <TableCell style={{ color: 'white' }}>{product.id}</TableCell>
               <TableCell style={{ color: 'white' }}>{product.name}</TableCell>
-              <TableCell style={{ color: 'white' }}>{product.stocks}</TableCell>
               <TableCell style={{ color: 'white' }}>{product.lastModified}</TableCell>
             </TableRow>
           ))}

src/routes/Inventory/Inventory.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import styles from "../../styles";
+import InventoryIcon from "../../Components/Icons/InventoryIcon/InventoryIcon";
+import InventoryInfo from "../../Components/InventoryInfo/InventoryInfo";
+import ProductsLists from "../../Components/ProductsLists/ProductsLists";
+
+export default function Inventory() {
+  return (
+    <div style={{ margin: 32, height: "100%" }}>
+      <div style={styles.content_row}>
+        <InventoryIcon size={8} color="white" />
+        <h1 style={styles.text_large}>Inventory</h1>
+      </div>
+      <InventoryInfo products={ProductsLists} />
+    </div>
+  );
+}