edit product route

src/App.tsx

@@ -8,6 +8,7 @@ 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";
+import EditProduct from "./Routes/Products/EditProduct/EditProduct";
 
 const router = createBrowserRouter([
   {
@@ -47,6 +48,14 @@ const router = createBrowserRouter([
       </Container>
     ),
   },
+  {
+    path: "/Products/EditProduct/:id", // Updated route with dynamic id parameter
+    element: (
+      <Container>
+        <EditProduct />
+      </Container>
+    ),
+  },
 ]);
 
 export default function App() {

src/components/InventoryInfo/InventoryInfo.tsx

@@ -22,7 +22,7 @@ export default function InventoryInfo(props: ProductInfoProps) {
         <TableBody>
           {products.map((product) => (
             <TableRow key={product.id}>
-              <TableCell style={{ color: 'white' }}>{product.id}</TableCell>
+              <TableCell style={{ color: 'white' }}>{product.id.toString().padStart(3, '0')}</TableCell>
               <TableCell style={{ color: 'white' }}>{product.name}</TableCell>
               <TableCell style={{ color: 'white' }}>{product.stocks}</TableCell>
               <TableCell style={{ color: 'white' }}>{product.lastModified}</TableCell>

src/components/ProductInfo/ProductInfo.tsx

@@ -1,5 +1,6 @@
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
 import { ProductType } from '../ProductType/ProductType';
+import { useNavigate } from 'react-router-dom';
 
 type ProductInfoProps = {
   products: ProductType[];
@@ -7,6 +8,15 @@ type ProductInfoProps = {
 
 export default function ProductInfo(props: ProductInfoProps) {
   const { products } = props;
+  const navigate = useNavigate();
+
+  const handleEdit = (id: number) => {
+    navigate(`/Products/EditProduct/${id.toString().padStart(3, '0')}`);
+  };
+
+  const handleDelete = (id: number) => {
+    console.log(`Deleting product with ID ${id}`);
+  };
 
   return (
     <TableContainer>
@@ -16,14 +26,19 @@ export default function ProductInfo(props: ProductInfoProps) {
             <TableCell style={{ color: 'white' }}>Product ID</TableCell>
             <TableCell style={{ color: 'white' }}>Product Name</TableCell>
             <TableCell style={{ color: 'white' }}>Last Modified</TableCell>
+            <TableCell style={{ color: 'white' }}>Actions</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
           {products.map((product) => (
             <TableRow key={product.id}>
-              <TableCell style={{ color: 'white' }}>{product.id}</TableCell>
+              <TableCell style={{ color: 'white' }}>{product.id.toString().padStart(3, '0')}</TableCell>
               <TableCell style={{ color: 'white' }}>{product.name}</TableCell>
               <TableCell style={{ color: 'white' }}>{product.lastModified}</TableCell>
+              <TableCell style={{ color: 'white' }}>
+                <button onClick={() => handleEdit(product.id)}>Edit</button>
+                <button onClick={() => handleDelete(product.id)}>Delete</button>
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>

src/routes/Products/AddProduct/AddProduct.tsx

@@ -1,10 +1,17 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import ProductsLists from "../../../Components/ProductsLists/ProductsLists";
 import { ProductType } from "../../../Components/ProductType/ProductType";
+import ProductsLists from "../../../Components/ProductsLists/ProductsLists";
 import styles from "../../../styles";
 import ProductsIcon from "../../../Components/Icons/ProductsIcon/ProductsIcon";
-import ProductInfo from "../../../Components/ProductInfo/ProductInfo";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+} from "@mui/material";
 
 export default function AddProduct() {
   const [name, setName] = useState("");
@@ -43,16 +50,24 @@ export default function AddProduct() {
         <h1 style={styles.text_large}>Products</h1>
       </div>
       <h1>Add Product</h1>
-      <label htmlFor="name">Name:</label>
+      <TableContainer>
+        <Table>
+          <TableBody>
+            <TableRow>
+              <TableCell>Name:</TableCell>
+              <TableCell>
                 <input type="text" id="name" value={name} onChange={handleNameChange} />
-      <br />
+              </TableCell>
-      <label htmlFor="stocks">Stocks:</label>
+            </TableRow>
-      <input
+            <TableRow>
-        type="text"
+              <TableCell>Stocks:</TableCell>
-        id="stocks"
+              <TableCell>
-        value={stocks}
+                <input type="text" id="stocks" value={stocks} onChange={handleStocksChange} />
-        onChange={handleStocksChange}
+              </TableCell>
-      />
+            </TableRow>
+          </TableBody>
+        </Table>
+      </TableContainer>
       <br />
       <button onClick={handleAddProduct}>Add</button>
       <button onClick={handleCancel}>Cancel</button>

src/routes/Products/EditProduct/EditProduct.tsx

@@ -0,0 +1,99 @@
+import React, { useState, useEffect } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  IconButton,
+} from "@mui/material";
+import { ProductType } from "../../../Components/ProductType/ProductType";
+import ProductsLists from "../../../Components/ProductsLists/ProductsLists";
+import styles from "../../../styles";
+
+type EditProductParams = {
+  id?: string;
+};
+
+export default function EditProduct() {
+  const { id } = useParams<EditProductParams>();
+  const navigate = useNavigate();
+
+  const [name, setName] = useState("");
+  const [stocks, setStocks] = useState("");
+
+  useEffect(() => {
+    const product = ProductsLists.find((product) => product.id.toString() === id);
+    if (product) {
+      setName(product.name);
+      setStocks(product.stocks.toString());
+    }
+  }, [id]);
+
+  const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setName(event.target.value);
+  };
+
+  const handleStocksChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setStocks(event.target.value);
+  };
+
+  const handleUpdateProduct = () => {
+    const updatedProduct: ProductType = {
+      id: parseInt(id || "0"), // add a default value of "0" for id if it's undefined
+      name: name,
+      stocks: parseInt(stocks),
+      lastModified: new Date().toLocaleString(),
+    };
+
+    const index = ProductsLists.findIndex((product) => product.id.toString() === id);
+    ProductsLists.splice(index, 1, updatedProduct);
+
+    navigate("/Products");
+  };
+
+  const handleCancel = () => {
+    navigate("/Products");
+  };
+
+  return (
+    <div style={{ margin: 32 }}>
+      <div style={styles.content_row}>
+        <h1 style={styles.text_large}>Edit Product</h1>
+      </div>
+      <TableContainer>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Product ID</TableCell>
+              <TableCell>Product Name</TableCell>
+              <TableCell>Stocks</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <TableRow>
+              <TableCell>{id}</TableCell>
+              <TableCell>{name}</TableCell>
+              <TableCell>
+                <TextField
+                  type="number"
+                  value={stocks}
+                  onChange={handleStocksChange}
+                  InputProps={{
+                    inputProps: { min: 0 },
+                  }}
+                />
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <br />
+      <button onClick={handleUpdateProduct}>Update</button>
+      <button onClick={handleCancel}>Cancel</button>
+    </div>
+  );
+}