From 03e6ac60e989613039e5b55dd11bce77ca01e152 Mon Sep 17 00:00:00 2001
From: jurenroy <jurenroyabragn91019@gmail.com>
Date: Sat, 25 Feb 2023 18:49:36 +0800
Subject: [PATCH] Inventory Route

---
 src/App.tsx                                   |  9 ++++
 .../InventoryInfo/InventoryInfo.tsx           | 41 +++++++++++++++++++
 src/components/ProductInfo/ProductInfo.tsx    |  2 -
 src/routes/Inventory/Inventory.tsx            | 17 ++++++++
 4 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 src/components/InventoryInfo/InventoryInfo.tsx
 create mode 100644 src/routes/Inventory/Inventory.tsx

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([
       </Container>
     ),
   },
+  {
+    path: "/Inventory",
+    element: (
+      <Container>
+        <Inventory />
+      </Container>
+    ),
+  },
 ]);
 
 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 (
+    <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>
+  );
+}
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) {
           <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>
           ))}
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 (
+    <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>
+  );
+}