Add Product Partial

src/App.tsx

@@ -7,6 +7,7 @@ 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";
+import AddProduct from "./Routes/Products/AddProduct/AddProduct";
 
 const router = createBrowserRouter([
   {
@@ -38,6 +39,14 @@ const router = createBrowserRouter([
       </Container>
     ),
   },
+  {
+    path: "/Products/AddProduct",
+    element: (
+      <Container>
+        <AddProduct />
+      </Container>
+    ),
+  },
 ]);
 
 export default function App() {

src/components/InventoryInfo/InventoryInfo.tsx

@@ -1,14 +1,8 @@
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
-
-type Product = {
-  id: number;
-  name: string;
-  stocks: number;
-  lastModified: string;
-};
+import { ProductType } from '../ProductType/ProductType';
 
 type ProductInfoProps = {
-  products: Product[];
+  products: ProductType[];
 };
 
 export default function InventoryInfo(props: ProductInfoProps) {

src/components/ProductInfo/ProductInfo.tsx

@@ -1,14 +1,8 @@
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
-
-type Product = {
-  id: number;
-  name: string;
-  stocks: number;
-  lastModified: string;
-};
+import { ProductType } from '../ProductType/ProductType';
 
 type ProductInfoProps = {
-  products: Product[];
+  products: ProductType[];
 };
 
 export default function ProductInfo(props: ProductInfoProps) {

src/components/ProductType/ProductType.tsx

@@ -0,0 +1,7 @@
+export type ProductType = {
+    id: number;
+    name: string;
+    stocks: number;
+    lastModified: string;
+  };
+

src/routes/Products/AddProduct/AddProduct.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import ProductsLists from "../../../Components/ProductsLists/ProductsLists";
+import { ProductType } from "../../../Components/ProductType/ProductType";
+import styles from "../../../styles";
+import ProductsIcon from "../../../Components/Icons/ProductsIcon/ProductsIcon";
+import ProductInfo from "../../../Components/ProductInfo/ProductInfo";
+
+
+export default function AddProduct() {
+  const [name, setName] = useState("");
+  const [stocks, setStocks] = useState("");
+
+  const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setName(event.target.value);
+  };
+
+  const handleStocksChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setStocks(event.target.value);
+  };
+
+  const handleAddProduct = () => {
+    if (name && stocks) {
+      const newProduct: ProductType = {
+        id: ProductsLists.length + 1,
+        name: name,
+        stocks: parseInt(stocks),
+        lastModified: new Date().toLocaleString(),
+      };
+      ProductsLists.push(newProduct);
+    }
+    //window.location.href = "/Products";
+  };
+
+  const handleCancel = () => {
+    window.location.href = "/Products";
+  };
+
+  return (
+    <div style={{ margin: 32, height: "100%" }}>
+      <div style={styles.content_row}>
+        <ProductsIcon size={8} color="white" />
+        <h1 style={styles.text_large}>Products</h1>
+      </div>
+      <h1>Add Product</h1>
+      <label htmlFor="name">Name:</label>
+      <input type="text" id="name" value={name} onChange={handleNameChange} />
+      <br />
+      <label htmlFor="stocks">Stocks:</label>
+      <input
+        type="text"
+        id="stocks"
+        value={stocks}
+        onChange={handleStocksChange}
+      />
+      <br />
+      <button onClick={handleAddProduct}>Add</button>
+      <button onClick={handleCancel}>Cancel</button>
+      <ProductInfo products={ProductsLists} />
+    </div>
+  );
+}

src/routes/Products/Products.tsx

@@ -5,6 +5,10 @@ import ProductInfo from "../../Components/ProductInfo/ProductInfo";
 import ProductsLists from "../../Components/ProductsLists/ProductsLists";
 
 export default function Products() {
+  const handleAddProduct = () => {
+    window.location.href = "/Products/AddProduct";
+  };
+
   return (
     <div style={{ margin: 32, height: "100%" }}>
       <div style={styles.content_row}>
@@ -12,6 +16,7 @@ export default function Products() {
         <h1 style={styles.text_large}>Products</h1>
       </div>
       <ProductInfo products={ProductsLists} />
+      <button onClick={handleAddProduct}>Add Product</button>
     </div>
   );
 }