diff --git a/src/App.tsx b/src/App.tsx index 1e70851..d37fc07 100644 --- a/src/App.tsx +++ b/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([ ), }, + { + path: "/Inventory", + element: ( + + + + ), + }, ]); export default function App() { diff --git a/src/components/InventoryInfo/InventoryInfo.tsx b/src/components/InventoryInfo/InventoryInfo.tsx new file mode 100644 index 0000000..d301cc9 --- /dev/null +++ b/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 ( + + + + + Product ID + Product Name + Stocks + Last Modified + + + + {products.map((product) => ( + + {product.id} + {product.name} + {product.stocks} + {product.lastModified} + + ))} + +
+
+ ); +} diff --git a/src/components/ProductInfo/ProductInfo.tsx b/src/components/ProductInfo/ProductInfo.tsx index cd3895a..6afacda 100644 --- a/src/components/ProductInfo/ProductInfo.tsx +++ b/src/components/ProductInfo/ProductInfo.tsx @@ -21,7 +21,6 @@ export default function ProductInfo(props: ProductInfoProps) { Product ID Product Name - Stocks Last Modified @@ -30,7 +29,6 @@ export default function ProductInfo(props: ProductInfoProps) { {product.id} {product.name} - {product.stocks} {product.lastModified} ))} diff --git a/src/routes/Inventory/Inventory.tsx b/src/routes/Inventory/Inventory.tsx new file mode 100644 index 0000000..a8c217a --- /dev/null +++ b/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 ( +
+
+ +

Inventory

+
+ +
+ ); +}