Icons,Add&Delete Product, Buttons,Color Indicator

src/components/Icons/AddIcon/AddIcon.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function AddIcon(props: props) {
+  return (
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" width={props.size + "vh"} height={props.size + "vh"} viewBox="0 0 24 24" fill="none" stroke={props.color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M12 5v14M5 12h14" />
+      </svg>
+    </div>
+  );
+}

src/components/Icons/CancelIcon/CancelIcon.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+
+export default function CancelIcon(props: props) {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={props.size + "vh"}
+        height={props.size + "vh"}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={props.color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <path d="M7.5 7.5l9 9M16.5 7.5l-9 9" />
+      </svg>
+    </div>
+  );
+}

src/components/Icons/DeleteIcon/DeleteIcon.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function DeleteIcon(props: props) {
+  return (
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" width={props.size + "vh"} height={props.size + "vh"} viewBox="0 0 24 24" fill="none" stroke={props.color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M4 7h16M5 10v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2V10" />
+        <path d="M10 10v-3a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v3" />
+        <path d="M9 7h6" />
+      </svg>
+    </div>
+  );
+}

src/components/Icons/EditIcon/EditIcon.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function EditIcon(props: props) {
+  return (
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" width={props.size + "vh"} height={props.size + "vh"} viewBox="0 0 24 24" fill="none" stroke={props.color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M3 17l-1.557 -4.386a2 2 0 0 1 1.923 -2.614h12.268a2 2 0 0 1 1.923 2.614l-1.558 4.386" />
+        <path d="M15 6h6v6" />
+        <path d="M10 21h5" />
+        <path d="M12 17v-5" />
+        <path d="M9 6h-6v15a2 2 0 0 0 2 2h15v-6" />
+      </svg>
+    </div>
+  );
+}

src/components/ProductInfo/ProductInfo.tsx

@@ -1,6 +1,10 @@
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
 import { ProductType } from '../ProductType/ProductType';
 import { useNavigate } from 'react-router-dom';
+import styles from '../../styles';
+import EditIcon from "../../Components/Icons/EditIcon/EditIcon";
+import DeleteIcon from "../../Components/Icons/DeleteIcon/DeleteIcon";
+import ProductsLists from "../../Components/ProductsLists/ProductsLists";
 
 type ProductInfoProps = {
   products: ProductType[];
@@ -15,7 +19,20 @@ export default function ProductInfo(props: ProductInfoProps) {
   };
 
   const handleDelete = (id: number) => {
+    const newProductsList = products.filter(product => product.id !== id);
     console.log(`Deleting product with ID ${id}`);
+    console.log(newProductsList); // optional, to check that the product was removed from the array
+    ProductsLists.splice(id-1, 1,);
+  };  
+
+  const getStocksColor = (stocks: number) => {
+    if (stocks >= 10) {
+      return 'green';
+    } else if (stocks >= 4) {
+      return 'orange';
+    } else {
+      return 'red';
+    }
   };
 
   return (
@@ -31,13 +48,40 @@ export default function ProductInfo(props: ProductInfoProps) {
         </TableHead>
         <TableBody>
           {products.map((product) => (
-            <TableRow key={product.id}>
+            <TableRow
+              key={product.id}
+              style={{
+                backgroundColor: getStocksColor(product.stocks),
+              }}
+            >
               <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>
+                <div style={{ display: "flex", gap: 8 }}>
-                <button onClick={() => handleDelete(product.id)}>Delete</button>
+                  <button onClick={() => handleEdit(product.id)}
+                    style={{
+                    ...styles.button_primary,
+                    display: "flex",
+                    alignItems: "center",
+                    backgroundColor: "transparent",
+                    borderRadius: 50,
+                  }}>
+                  <EditIcon size={3} color="white" />
+                  <span style={styles.text_medium}>Edit</span>
+                  </button>
+                  <button onClick={() => handleDelete(product.id)}
+                    style={{
+                    ...styles.button_primary,
+                    display: "flex",
+                    alignItems: "center",
+                    backgroundColor: "transparent",
+                    borderRadius: 50,
+                  }}>
+                  <DeleteIcon size={3} color="white" />
+                  <span style={styles.text_medium}>Delete</span>
+                  </button>
+                </div>
               </TableCell>
             </TableRow>
           ))}

src/components/ProductsLists/ProductsLists.tsx

@@ -3,19 +3,19 @@ const ProductsLists = [
       id: 1,
       name: 'Product 1',
       stocks: 10,
-      lastModified: '2022-02-24'
+      lastModified: '3/2/2023, 2:11:45 PM'
     },
     {
       id: 2,
       name: 'Product 2',
       stocks: 5,
-      lastModified: '2022-02-23'
+      lastModified: '3/2/2023, 2:21:23 PM'
     },
     {
       id: 3,
       name: 'Product 3',
       stocks: 15,
-      lastModified: '2022-02-25'
+      lastModified: '3/2/2023, 1:35:56 PM'
     },
     // add more products here
   ];

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>) => {
+  const [name, setName] = useState("");
-    setName(event.target.value);
+  const [stocks, setStocks] = useState("");
-  };
 
-  const handleStocksChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleStocksChange = (
-    setStocks(event.target.value);
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const value = parseInt(event.target.value);
+    if (!isNaN(value) && value >= 0) {
+      setStocks(value.toString());
+    }
   };
 
   const handleAddProduct = () => {
-    if (name && stocks) {
+    const maxId = Math.max(...ProductsLists.map((product) => product.id));
     const newProduct: ProductType = {
-        id: ProductsLists.length + 1,
+      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 style={{ color: "white"}}>
-              <TableCell>
+              <TextField
-                <input type="text" id="name" value={name} onChange={handleNameChange} />
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                InputProps={{ style: { color: "white" } }}
+                style={{ border: "1px solid white" }}
+              />
             </TableCell>
-            </TableRow>
+              <TableCell style={{ color: "white" }}>
-            <TableRow>
+                <TextField
-              <TableCell>Stocks:</TableCell>
+                  type="number"
-              <TableCell>
+                  value={stocks}
-                <input type="text" id="stocks" value={stocks} onChange={handleStocksChange} />
+                  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>
+      <div style={{ display: 'flex', gap: 16,marginLeft: 395 }}>
-      <button onClick={handleCancel}>Cancel</button>
+      
+      </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>) => {
+  const handleStocksChange = (
-    setStocks(event.target.value);
+    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 style={{ color: "white" }}>Product ID</TableCell>
-              <TableCell>Product Name</TableCell>
+              <TableCell style={{ color: "white" }}>Product Name</TableCell>
-              <TableCell>Stocks</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 style={{ color: "white" }}>{id}</TableCell>
-              <TableCell>{name}</TableCell>
+              <TableCell style={{ color: "white" }}>{name}</TableCell>
-              <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}>
+      <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>
   );
 }