Icons,Add&Delete Product, Buttons,Color Indicator

src/routes/Products/AddProduct/AddProduct.tsx

@@ -1,41 +1,47 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { ProductType } from "../../../Components/ProductType/ProductType";
-import ProductsLists from "../../../Components/ProductsLists/ProductsLists";
-import styles from "../../../styles";
-import ProductsIcon from "../../../Components/Icons/ProductsIcon/ProductsIcon";
-
 import {
   Table,
   TableBody,
   TableCell,
   TableContainer,
+  TableHead,
   TableRow,
+  TextField,
 } from "@mui/material";
+import { ProductType } from "../../../Components/ProductType/ProductType";
+import ProductsLists from "../../../Components/ProductsLists/ProductsLists";
+import ProductsIcon from "../../../Components/Icons/ProductsIcon/ProductsIcon";
+import AddIcon from "../../../Components/Icons/AddIcon/AddIcon";
+import CancelIcon from "../../../Components/Icons/CancelIcon/CancelIcon";
+import styles from "../../../styles";
 
 export default function AddProduct() {
-  const [name, setName] = useState("");
-  const [stocks, setStocks] = useState("");
   const navigate = useNavigate();
 
-  const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setName(event.target.value);
-  };
+  const [name, setName] = useState("");
+  const [stocks, setStocks] = useState("");
 
-  const handleStocksChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setStocks(event.target.value);
+  const handleStocksChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const value = parseInt(event.target.value);
+    if (!isNaN(value) && value >= 0) {
+      setStocks(value.toString());
+    }
   };
 
   const handleAddProduct = () => {
-    if (name && stocks) {
-      const newProduct: ProductType = {
-        id: ProductsLists.length + 1,
-        name: name,
-        stocks: parseInt(stocks),
-        lastModified: new Date().toLocaleString(),
-      };
-      ProductsLists.push(newProduct);
-    }
+    const maxId = Math.max(...ProductsLists.map((product) => product.id));
+    const newProduct: ProductType = {
+      id: maxId + 1,
+      name: name,
+      stocks: parseInt(stocks),
+      lastModified: new Date().toLocaleString(),
+    };
+
+    ProductsLists.push(newProduct);
+
     navigate("/Products");
   };
 
@@ -50,26 +56,73 @@ export default function AddProduct() {
         <h1 style={styles.text_large}>Add Product</h1>
       </div>
       <TableContainer>
-        <Table>
+        <Table style={{ color: "white" }}>
+          <TableHead>
+            <TableRow>
+              <TableCell style={{ color: "white"}}>Product Name</TableCell>
+              <TableCell style={{ color: "white"}}>Stocks</TableCell>
+              <TableCell style={{ color: 'white' }}>Actions</TableCell>
+            </TableRow>
+          </TableHead>
           <TableBody>
             <TableRow>
-              <TableCell>Name:</TableCell>
-              <TableCell>
-                <input type="text" id="name" value={name} onChange={handleNameChange} />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>Stocks:</TableCell>
-              <TableCell>
-                <input type="text" id="stocks" value={stocks} onChange={handleStocksChange} />
+            <TableCell style={{ color: "white"}}>
+              <TextField
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                InputProps={{ style: { color: "white" } }}
+                style={{ border: "1px solid white" }}
+              />
+            </TableCell>
+              <TableCell style={{ color: "white" }}>
+                <TextField
+                  type="number"
+                  value={stocks}
+                  onChange={handleStocksChange}
+                  InputProps={{
+                    inputProps: { min: 0 },
+                    style: { color: "white" },
+                  }}
+                  style={{ color: "white", border: "1px solid white" }}
+                />
               </TableCell>
+              <TableCell style={{ color: 'white' }}>
+                <div style={{ display: "flex", gap: 8 }}>
+                <button onClick={handleAddProduct}
+                  style={{
+                  ...styles.button_primary,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  backgroundColor: "#1d3b33",
+                  borderRadius: 50,
+                  }}>
+                  <AddIcon size={3} color="white" />
+                  <span style={styles.text_medium}>Add</span>
+                </button>
+                <button onClick={handleCancel}
+                  style={{
+                  ...styles.button_primary,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  backgroundColor: "#1d3b33",
+                  borderRadius: 50,
+                  }}>
+                  <CancelIcon size={3} color="white" />
+                  <span style={styles.text_medium}>Cancel</span>
+                </button>
+                </div>
+                </TableCell>
             </TableRow>
           </TableBody>
         </Table>
       </TableContainer>
       <br />
-      <button onClick={handleAddProduct}>Add</button>
-      <button onClick={handleCancel}>Cancel</button>
+      <div style={{ display: 'flex', gap: 16,marginLeft: 395 }}>
+      
+      </div>
     </div>
   );
 }

src/routes/Products/EditProduct/EditProduct.tsx

@@ -12,8 +12,11 @@ import {
 import { ProductType } from "../../../Components/ProductType/ProductType";
 import ProductsLists from "../../../Components/ProductsLists/ProductsLists";
 import ProductsIcon from "../../../Components/Icons/ProductsIcon/ProductsIcon";
+import CancelIcon from "../../../Components/Icons/CancelIcon/CancelIcon";
+import EditIcon from "../../../Components/Icons/EditIcon/EditIcon";
 import styles from "../../../styles";
 
+
 type EditProductParams = {
   id?: string;
 };
@@ -26,15 +29,22 @@ export default function EditProduct() {
   const [stocks, setStocks] = useState("");
 
   useEffect(() => {
-    const product = ProductsLists.find((product) => product.id.toString().padStart(3, '0') === id);
+    const product = ProductsLists.find(
+      (product) => product.id.toString().padStart(3, "0") === id
+    );
     if (product) {
       setName(product.name);
       setStocks(product.stocks.toString());
     }
   }, [id]);
 
-  const handleStocksChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setStocks(event.target.value);
+  const handleStocksChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const value = parseInt(event.target.value);
+    if (!isNaN(value) && value >= 0) {
+      setStocks(value.toString());
+    }
   };
 
   const handleUpdateProduct = () => {
@@ -45,7 +55,9 @@ export default function EditProduct() {
       lastModified: new Date().toLocaleString(),
     };
 
-    const index = ProductsLists.findIndex((product) => product.id.toString().padStart(3, '0') === id);
+    const index = ProductsLists.findIndex(
+      (product) => product.id.toString().padStart(3, "0") === id
+    );
     ProductsLists.splice(index, 1, updatedProduct);
 
     navigate("/Products");
@@ -62,35 +74,64 @@ export default function EditProduct() {
         <h1 style={styles.text_large}>Edit Product</h1>
       </div>
       <TableContainer>
-        <Table>
+        <Table style={{ color: "white", textAlign: "center" }}>
           <TableHead>
             <TableRow>
-              <TableCell>Product ID</TableCell>
-              <TableCell>Product Name</TableCell>
-              <TableCell>Stocks</TableCell>
+              <TableCell style={{ color: "white" }}>Product ID</TableCell>
+              <TableCell style={{ color: "white" }}>Product Name</TableCell>
+              <TableCell style={{ color: "white" }}>Stocks</TableCell>
+              <TableCell style={{ color: 'white' }}>Actions</TableCell>
             </TableRow>
           </TableHead>
-          <TableBody>
+          <TableBody style={{ textAlign: "center" }}>
             <TableRow>
-              <TableCell>{id}</TableCell>
-              <TableCell>{name}</TableCell>
-              <TableCell>
+              <TableCell style={{ color: "white" }}>{id}</TableCell>
+              <TableCell style={{ color: "white" }}>{name}</TableCell>
+              <TableCell style={{ color: "white" }}>
                 <TextField
                   type="number"
                   value={stocks}
                   onChange={handleStocksChange}
                   InputProps={{
                     inputProps: { min: 0 },
+                    style: { color: "white" },
                   }}
+                  style={{ color: "white", border: "1px solid white" }}
                 />
               </TableCell>
+              <TableCell style={{ color: 'white' }}>
+                <div style={{ display: "flex", gap: 8 }}>
+                <button onClick={handleUpdateProduct}
+                  style={{
+                  ...styles.button_primary,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  backgroundColor: "#1d3b33",
+                  borderRadius: 50,
+                  }}>
+                  <EditIcon size={3} color="white" />
+                  <span style={styles.text_medium}>Update</span>
+                </button>
+                <button onClick={handleCancel}
+                  style={{
+                  ...styles.button_primary,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  backgroundColor: "#1d3b33",
+                  borderRadius: 50,
+                  }}>
+                  <CancelIcon size={3} color="white" />
+                  <span style={styles.text_medium}>Cancel</span>
+                </button>
+                </div>
+              </TableCell>
             </TableRow>
           </TableBody>
         </Table>
       </TableContainer>
       <br />
-      <button onClick={handleUpdateProduct}>Update</button>
-      <button onClick={handleCancel}>Cancel</button>
     </div>
   );
 }

src/routes/Products/Products.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import styles from "../../styles";
 import { useNavigate } from "react-router-dom";
 import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";
+import AddIcon from "../../Components/Icons/AddIcon/AddIcon";
 import ProductInfo from "../../Components/ProductInfo/ProductInfo";
 import ProductsLists from "../../Components/ProductsLists/ProductsLists";
 
@@ -10,12 +11,27 @@ export default function 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 style={{ ...styles.content_row, justifyContent: "space-between" }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+          <ProductsIcon size={8} color="white" />
+          <h1 style={styles.text_large}>Products</h1>
+        </div>
+        <button
+          onClick={() => navigate("/Products/AddProduct")}
+          style={{
+            ...styles.button_primary,
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            backgroundColor: "#1d3b33",
+            borderRadius: 50,
+          }}
+        >
+          <AddIcon size={7} color="white" />
+          <span style={styles.text_medium}>Add Product</span>
+        </button>
       </div>
       <ProductInfo products={ProductsLists} />
-      <button onClick={() => navigate("/Products/AddProduct")}>Add Product</button>
     </div>
   );
 }