From c51ef746f097e0283e4060e2e75f503b7d37c8e5 Mon Sep 17 00:00:00 2001
From: Juanpi92 <juan.urgelles92@gmail.com>
Date: Fri, 15 Sep 2023 15:03:22 -0300
Subject: [PATCH] feat(EditProduct.jsx) Creating edit product component and
 functionality

---
 src/components/AdminProductsList/index.jsx    |   8 +-
 src/components/CartCompras.css                |  65 -------
 src/components/CartComprasAdmin.css           |   6 -
 src/components/CartComprasAdmin.jsx           |  42 -----
 src/components/CartItemProductAdmin.jsx       |  54 ------
 src/components/CartModalComprasAdmin.jsx      |  19 --
 src/components/CartProductAdmin.css           |   8 -
 src/components/Footer/index.jsx               |  30 ++-
 src/components/Footer/styles.css              |  23 ++-
 src/components/FormAdminProductos.css         |  59 ------
 src/components/FormAdminProductos.jsx         | 113 ------------
 src/components/Modal/index.jsx                |  14 +-
 src/components/ModalComprasAdmin.css          |  26 ---
 src/components/ModalComprasAdmin.jsx          |  49 -----
 src/components/ModalProductAdmin.css          |  20 --
 src/components/ModalProductAdmin.jsx          |  29 ---
 src/pages/AdminCompras/styles.css             |   1 +
 src/pages/AdminProducts/EditProduct/index.jsx | 174 ++++++++++++++++++
 .../AdminProducts/EditProduct/styles.css      | 104 +++++++++++
 src/pages/AdminProducts/index.jsx             |   6 +-
 src/pages/LoginAdmin/index.jsx                |   2 +-
 src/pages/LoginAdmin/styles.css               |   2 +
 22 files changed, 332 insertions(+), 522 deletions(-)
 delete mode 100644 src/components/CartCompras.css
 delete mode 100644 src/components/CartComprasAdmin.css
 delete mode 100644 src/components/CartComprasAdmin.jsx
 delete mode 100644 src/components/CartItemProductAdmin.jsx
 delete mode 100644 src/components/CartModalComprasAdmin.jsx
 delete mode 100644 src/components/CartProductAdmin.css
 delete mode 100644 src/components/FormAdminProductos.css
 delete mode 100644 src/components/FormAdminProductos.jsx
 delete mode 100644 src/components/ModalComprasAdmin.css
 delete mode 100644 src/components/ModalComprasAdmin.jsx
 delete mode 100644 src/components/ModalProductAdmin.css
 delete mode 100644 src/components/ModalProductAdmin.jsx
 create mode 100644 src/pages/AdminProducts/EditProduct/index.jsx
 create mode 100644 src/pages/AdminProducts/EditProduct/styles.css

diff --git a/src/components/AdminProductsList/index.jsx b/src/components/AdminProductsList/index.jsx
index a09cabb..bf80022 100644
--- a/src/components/AdminProductsList/index.jsx
+++ b/src/components/AdminProductsList/index.jsx
@@ -92,11 +92,13 @@ const ProductsActionBar = ({ product, setProductToShow }) => {
 };
 
 const ProductListItem = ({ product, setDataToEdit }) => {
-  const { setLoader } = useContext(AppContext);
+  const { setShowProductModal, setIsAddProduct, setLoader } =
+    useContext(AppContext);
   let { id, name, type, portion, price, src } = product;
   const state = useSelector((state) => state);
   const userAdmin = state.user;
   const dispatch = useDispatch();
+
   const handleDelete = async (id) => {
     try {
       const options = {
@@ -113,7 +115,7 @@ const ProductListItem = ({ product, setDataToEdit }) => {
       setLoader(false);
     } catch (error) {
       setLoader(false);
-      console.log(error);
+      alert("Ocurreu um error");
     }
   };
   return (
@@ -127,6 +129,8 @@ const ProductListItem = ({ product, setDataToEdit }) => {
           className="option_icon"
           onClick={() => {
             setDataToEdit(product);
+            setShowProductModal(true);
+            setIsAddProduct(false);
           }}
         />
         <ClearOutlined
diff --git a/src/components/CartCompras.css b/src/components/CartCompras.css
deleted file mode 100644
index d05b16d..0000000
--- a/src/components/CartCompras.css
+++ /dev/null
@@ -1,65 +0,0 @@
-.container_cart_left {
-  position: absolute;
-  transition: left 1s ease;
-  top: -100%;
-}
-.container_cart {
-  width: 100%;
-  transition: left 1s ease;
-  background-color: rgba(0, 0, 0, 0.75);
-  border-radius: 5px;
-  padding: 5px;
-  margin: 0px;
-  padding-bottom: 30px;
-  min-width: 340px;
-  box-sizing: border-box;
-}
-.container_confirm_right {
-  position: absolute;
-  top: -100vh;
-  width: 100%;
-}
-
-.table {
-  width: 100%;
-  margin: 0 auto;
-}
-.table_cart tr {
-  text-align: center;
-}
-.table_cart th {
-  font-size: 1rem;
-}
-.table_cart {
-  width: 95%;
-}
-.info_cart {
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-}
-.info_cart span {
-  margin: 10px 60px;
-  font-family: Raleway;
-  font-size: 1rem;
-  font-weight: bold;
-}
-
-@media only screen and (min-width: 600px) {
-  .table {
-    width: 90%;
-  }
-  .info_cart {
-    text-align: right;
-    flex-direction: row;
-    justify-content: flex-end;
-  }
-  .table_cart th {
-    font-size: 1.2rem;
-  }
-  .info_cart span {
-    font-size: 1.1rem;
-  }
-}
diff --git a/src/components/CartComprasAdmin.css b/src/components/CartComprasAdmin.css
deleted file mode 100644
index 073e946..0000000
--- a/src/components/CartComprasAdmin.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.botones {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: flex-start;
-}
diff --git a/src/components/CartComprasAdmin.jsx b/src/components/CartComprasAdmin.jsx
deleted file mode 100644
index df90ade..0000000
--- a/src/components/CartComprasAdmin.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { useRef } from "react";
-import { useDispatch } from "react-redux";
-import { delFromCompras } from "../reducer/comprasReducer";
-import "./CartComprasAdmin.css";
-
-const CartComprasAdmin = ({ data, setComprasModal, $modalCompra }) => {
-  const dispatch = useDispatch();
-  let { id, usuario, cpf, address, totalCart, cart } = data;
-  return (
-    <>
-      <tr className="cart_item">
-        <td>{usuario}</td>
-        <td>{cpf}</td>
-        <td>{address}</td>
-        <td>R$ {totalCart.toFixed(2)}</td>
-        <td>
-          <div className="botones">
-            <button
-              className="del_button"
-              onClick={() => {
-                dispatch(delFromCompras(id));
-              }}
-            >
-              <i className="fa-solid fa-trash"></i>
-            </button>
-            <button
-              className="see_button"
-              onClick={() => {
-                setComprasModal({ usuario, totalCart, cart });
-                $modalCompra.current.classList.remove("arriba");
-              }}
-            >
-              <i className="fa-solid fa-eye"></i>
-            </button>
-          </div>
-        </td>
-      </tr>
-    </>
-  );
-};
-
-export default CartComprasAdmin;
diff --git a/src/components/CartItemProductAdmin.jsx b/src/components/CartItemProductAdmin.jsx
deleted file mode 100644
index 022b2db..0000000
--- a/src/components/CartItemProductAdmin.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from "react";
-import { useDispatch } from "react-redux";
-import { delProduct } from "../reducer/shoopingReducer";
-
-const CartItemProductAdmin = ({
-  product,
-  $ModalProductAdmin,
-  SetSrcImagen,
-  setDataToEdit,
-}) => {
-  let { id, name, portion, price, src } = product;
-  const dispatch = useDispatch();
-  return (
-    <>
-      <tr className="cart_item">
-        <td>{name}</td>
-        <td>{portion}</td>
-        <td>R$ {price}</td>
-        <td>
-          <div className="botones">
-            <button
-              className="see_button"
-              onClick={() => {
-                SetSrcImagen(src);
-                $ModalProductAdmin.current.classList.remove("arriba");
-              }}
-            >
-              <i className="fa-solid fa-eye"></i>
-            </button>
-            <button
-              className="del_button"
-              onClick={() => {
-                dispatch(delProduct(id));
-              }}
-            >
-              <i className="fa-solid fa-trash"></i>
-            </button>
-
-            <button
-              className="edit_button"
-              onClick={() => {
-                setDataToEdit(product);
-              }}
-            >
-              <i className="fa-solid fa-pen-to-square"></i>
-            </button>
-          </div>
-        </td>
-      </tr>
-    </>
-  );
-};
-
-export default CartItemProductAdmin;
diff --git a/src/components/CartModalComprasAdmin.jsx b/src/components/CartModalComprasAdmin.jsx
deleted file mode 100644
index 3594cf2..0000000
--- a/src/components/CartModalComprasAdmin.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-import "./CartCompras.css";
-
-const CartModalComprasAdmin = ({ compra }) => {
-  let { name, quantity, price } = compra;
-  return (
-    <>
-      <tr className="cart_item">
-        <td>{name}</td>
-        <td>{quantity}</td>
-        <td>
-          R$ {price.toFixed(2)} x {quantity} = R$ {(price * quantity).toFixed(2)}
-        </td>
-      </tr>
-    </>
-  );
-};
-
-export default CartModalComprasAdmin;
diff --git a/src/components/CartProductAdmin.css b/src/components/CartProductAdmin.css
deleted file mode 100644
index aad4f63..0000000
--- a/src/components/CartProductAdmin.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.cart_admin_product {
-  margin: 71px 20px;
-  margin-bottom: 20px;
-  background-color: rgba(0, 0, 0, 0.75);
-  border-radius: 5px;
-  padding: 10px;
-  width: 50%;
-}
diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
index 150b4fe..a28e589 100644
--- a/src/components/Footer/index.jsx
+++ b/src/components/Footer/index.jsx
@@ -1,16 +1,22 @@
 import React from "react";
 import "./styles.css";
 import { FacebookOutlined, Instagram, Twitter } from "@mui/icons-material";
+import { useNavigate } from "react-router-dom";
 
 function Footer() {
+  const navigate = useNavigate();
   return (
-    <footer className="footer" style={{ backgroundColor: '#046a38' }}>
+    <footer className="footer" style={{ backgroundColor: "#046a38" }}>
       <div className="container">
         <div className="footer-content">
           <div className="footer-about">
-            <h1 className='header-logo-title'>
+            <h1 className="header-logo-title">
               VEGETANIZAND
-              <img src={'./imagenes/new-logo.png'} alt="Vegetanizando logo" className="app-logo" />
+              <img
+                src={"./imagenes/new-logo.png"}
+                alt="Vegetanizando logo"
+                className="app-logo"
+              />
             </h1>
           </div>
           <div className="social-links">
@@ -30,20 +36,26 @@ function Footer() {
           <div className="contact-links">
             <p className="description">Contato</p>
             <ul>
-              <li><i className="fa-solid fa-house"></i> Coliseo 18. Maracanã. Rio de Janeiro. RJ. CEP: 105682-21</li>
-              <li><i className="fa-solid fa-phone"></i> 21 970657890</li>
-              <li><i className="fa-solid fa-envelope"></i> vegetanizando@gmail.com</li>
+              <li>
+                <i className="fa-solid fa-house"></i> Coliseo 18. Maracanã. Rio
+                de Janeiro. RJ. CEP: 105682-21
+              </li>
+              <li>
+                <i className="fa-solid fa-phone"></i> 21 970657890
+              </li>
+              <li>
+                <i className="fa-solid fa-envelope"></i> vegetanizando@gmail.com
+              </li>
             </ul>
           </div>
         </div>
-
       </div>
       <div className="footer-bar">
         <div className="container">
           <div className="copyright">
             Vegetanizando © 2023. All Rights Reserved.
           </div>
-          <div className="developed-by">
+          <div className="developed-by" onClick={() => navigate("/admin")}>
             Desenvolvido por Label Soluções em TI
           </div>
         </div>
@@ -52,4 +64,4 @@ function Footer() {
   );
 }
 
-export default Footer;
\ No newline at end of file
+export default Footer;
diff --git a/src/components/Footer/styles.css b/src/components/Footer/styles.css
index 8ac986e..908614c 100644
--- a/src/components/Footer/styles.css
+++ b/src/components/Footer/styles.css
@@ -1,4 +1,3 @@
-
 .footer {
   background-color: #046a38;
   color: #fff;
@@ -24,7 +23,7 @@
 .social-links,
 .contact-links {
   flex: 1;
-  text-align: center; 
+  text-align: center;
 }
 
 .header-logo-title {
@@ -41,7 +40,7 @@
 .social-icons {
   display: flex;
   gap: 10px;
-  justify-content: center; 
+  justify-content: center;
 }
 
 .social-icons a {
@@ -53,8 +52,8 @@
 .description {
   font-weight: bold;
   font-size: 18px;
-  margin: 0; 
-  padding: 10px 0; 
+  margin: 0;
+  padding: 10px 0;
 }
 
 ul {
@@ -67,20 +66,20 @@ li {
 }
 
 .fa-solid {
-  font-family: 'Font Awesome 5 Free';
+  font-family: "Font Awesome 5 Free";
   font-weight: 900;
 }
 
 .fa-house::before {
-  content: '\f015';
+  content: "\f015";
 }
 
 .fa-phone::before {
-  content: '\f095';
+  content: "\f095";
 }
 
 .fa-envelope::before {
-  content: '\f0e0';
+  content: "\f0e0";
 }
 
 .footer-bar {
@@ -103,9 +102,9 @@ li {
 .developed-by {
   font-size: 14px;
   text-align: right;
+  cursor: pointer;
 }
 
-
 @media (max-width: 768px) {
   .footer {
     padding-bottom: 4rem;
@@ -113,7 +112,7 @@ li {
 
   .footer-content {
     flex-direction: column;
-    align-items: center; 
+    align-items: center;
   }
 
   .header-logo-title {
@@ -124,4 +123,4 @@ li {
   .app-logo {
     margin-left: 0;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/FormAdminProductos.css b/src/components/FormAdminProductos.css
deleted file mode 100644
index 37eb4dc..0000000
--- a/src/components/FormAdminProductos.css
+++ /dev/null
@@ -1,59 +0,0 @@
-.div_admin_product {
-  margin: 71px 20px;
-  margin-bottom: 20px;
-  background-color: rgba(0, 0, 0, 0.75);
-  border-radius: 5px;
-  padding: 10px;
-  width: fit-content;
-}
-.figure_product {
-  width: 240px;
-  height: 280px;
-  background-color: black;
-  margin: 0px auto;
-  padding: 0px;
-}
-
-.figure_product img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border: 1px solid var(--second-color);
-}
-.form_product {
-  margin-top: 10px;
-}
-.form_product label {
-  margin: 10px 0px;
-}
-.form_product input {
-  margin: 10px 0px;
-  height: 35px;
-  font-size: 16px;
-  border-radius: 5px;
-  outline: none;
-  border: 1px solid var(--second-color);
-}
-
-.form_product input[type="file"] {
-  display: inline-block;
-  background: linear-gradient(top, #f9f9f9, #e3e3e3);
-  outline: none;
-  white-space: nowrap;
-  cursor: pointer;
-  font-weight: 800;
-  font-size: 10pt;
-}
-.form_product input::file-selector-button {
-  height: 35px;
-  font-weight: bold;
-  color: black;
-  background-color: var(--second-color);
-  border: 1px solid var(--second-color);
-  border-radius: 5px 0px 5px 0px;
-}
-.form_product input::file-selector-button:hover {
-  border-color: #646cff;
-  opacity: 0.8;
-  color: white;
-}
diff --git a/src/components/FormAdminProductos.jsx b/src/components/FormAdminProductos.jsx
deleted file mode 100644
index 211bfad..0000000
--- a/src/components/FormAdminProductos.jsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { useDispatch } from "react-redux";
-import { actualizarItemProduct } from "../reducer/shoopingReducer";
-import "./FormAdminProductos.css";
-
-const FormAdminProductos = ({ dataToEdit, setDataToEdit }) => {
-  const $src_img = useRef();
-  const $form = useRef();
-  const [imagenFile, setImagenFile] = useState();
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    if (dataToEdit) {
-      setImagenFile(dataToEdit.src);
-      $src_img.current.src = `.${dataToEdit.src}`;
-      $form.current.name_product.value = dataToEdit.name;
-      $form.current.portion_product.value = dataToEdit.portion;
-      $form.current.price_product.value = dataToEdit.price;
-    }
-  }, [dataToEdit]);
-
-  const handleSubmit = (event) => {
-    event.preventDefault();
-    // es editar
-    if (dataToEdit) {
-      let id = dataToEdit.id;
-      let src = dataToEdit.src;
-      let name = $form.current.name_product.value;
-      let portion = $form.current.portion_product.value;
-      let price = Number($form.current.price_product.value);
-      //Actualizo
-      dispatch(
-        actualizarItemProduct({
-          id: id,
-          src: src,
-          name: name,
-          portion: portion,
-          price: price,
-        })
-      );
-
-      //Reseteo
-      $form.current.reset();
-      $src_img.current.src = "";
-    }
-    //es Insertar
-  };
-
-  return (
-    <div className="div_admin_product">
-      <figure className="figure_product">
-        <img src="" alt="" ref={$src_img} />
-      </figure>
-      <form className="form_product" ref={$form} onSubmit={handleSubmit}>
-        <label htmlFor="imagen">Escolha a Imagen</label>
-        <br />
-        <input
-          type="file"
-          accept="image/png, image/jpeg, image/webp"
-          id="imagen"
-          name="form_file"
-        ></input>
-        <br />
-        <label htmlFor="name_product">Nome do Produto</label>
-        <br />
-        <input
-          type="text"
-          placeholder="nome do produto"
-          id="name_product"
-          required
-        />
-        <br />
-        <label htmlFor="portion_product">Porcion</label>
-        <br />
-        <input
-          type="text"
-          id="portion_product"
-          placeholder="cantidade"
-          required
-        />
-        <br />
-        <label htmlFor="price_product">Preço</label>
-        <br />
-        <input
-          type="number"
-          id="price_product"
-          placeholder="preço do produto"
-          required
-          min="0"
-        />
-        <br />
-        <input
-          type="button"
-          className="button_principal"
-          value="Cancelar"
-          style={{ marginRight: "10px", backgroundColor: "red" }}
-          onClick={() => {
-            $form.current.reset();
-            $src_img.current.src = "";
-            setDataToEdit(null);
-          }}
-        />
-        <input
-          type="submit"
-          className="button_principal"
-          value={dataToEdit ? "Editar" : "Adicionar"}
-        />
-      </form>
-    </div>
-  );
-};
-
-export default FormAdminProductos;
diff --git a/src/components/Modal/index.jsx b/src/components/Modal/index.jsx
index 025ae3c..1abcf6e 100644
--- a/src/components/Modal/index.jsx
+++ b/src/components/Modal/index.jsx
@@ -2,9 +2,11 @@ import React, { useContext } from "react";
 import { AppContext } from "../../contexts/AppContext";
 import "./styles.css";
 import AddProduct from "../../pages/AdminProducts/AddProduct";
+import EditProduct from "../../pages/AdminProducts/EditProduct";
 
-export default function Modal() {
-  const { showProductModal, setShowProductModal, isAddProduct } = useContext(AppContext);
+export default function Modal({ dataToEdit }) {
+  const { showProductModal, setShowProductModal, isAddProduct } =
+    useContext(AppContext);
 
   return (
     <>
@@ -15,10 +17,14 @@ export default function Modal() {
             className="modal-overlay"
           ></div>
           <div className="modal-content">
-               {isAddProduct ? <AddProduct /> : null}
+            {isAddProduct ? (
+              <AddProduct />
+            ) : (
+              <EditProduct dataToEdit={dataToEdit} />
+            )}
           </div>
         </div>
       )}
     </>
   );
-};
+}
diff --git a/src/components/ModalComprasAdmin.css b/src/components/ModalComprasAdmin.css
deleted file mode 100644
index a62ed1f..0000000
--- a/src/components/ModalComprasAdmin.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.modal_product {
-  background-color: rgba(0, 0, 0, 0.81);
-  position: fixed;
-  z-index: 600;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100vw;
-  height: 100vh;
-}
-.arriba {
-  top: -100vh;
-}
-.contenedor_product {
-  width: 100%;
-  position: relative;
-}
-.button_close {
-  font-size: 1.3rem;
-  font-weight: bold;
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  cursor: pointer;
-}
diff --git a/src/components/ModalComprasAdmin.jsx b/src/components/ModalComprasAdmin.jsx
deleted file mode 100644
index 1be6cb2..0000000
--- a/src/components/ModalComprasAdmin.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { useRef } from "react";
-import CartModalComprasAdmin from "./CartModalComprasAdmin";
-import "./ModalComprasAdmin.css";
-
-const ModalComprasAdmin = ({ comprasModal, $modalCompra }) => {
-  let { usuario, totalCart, cart } = comprasModal;
-  return (
-    <>
-      <div className="modal_product arriba" ref={$modalCompra}>
-        <div className="contenedor_product">
-          <span
-            className="button_close"
-            onClick={() => {
-              $modalCompra.current.classList.add("arriba");
-            }}
-          >
-            X
-          </span>
-          <div className="container_cart">
-            <div className="title_principal">
-              <p>Compras de {usuario}</p>
-            </div>
-            <div className="table">
-              <table className="table_cart">
-                <thead>
-                  <tr>
-                    <th>Produto</th>
-                    <th>Cantidade</th>
-                    <th>Preço</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {cart.map((compra) => (
-                    <CartModalComprasAdmin compra={compra} key={compra.id} />
-                  ))}
-                </tbody>
-              </table>
-              <div className="info_cart">
-                <span>Total: R$ {totalCart.toFixed(2)}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default ModalComprasAdmin;
diff --git a/src/components/ModalProductAdmin.css b/src/components/ModalProductAdmin.css
deleted file mode 100644
index 8a42ea0..0000000
--- a/src/components/ModalProductAdmin.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.container_figure {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.container_figure figure {
-  margin: 20px;
-  margin-top: 80px;
-  width: 300px;
-  height: 449px;
-  padding: 0px;
-  border: none;
-}
-.container_figure img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border: 1px solid var(--second-color);
-  border-radius: 5px;
-}
diff --git a/src/components/ModalProductAdmin.jsx b/src/components/ModalProductAdmin.jsx
deleted file mode 100644
index 2652df0..0000000
--- a/src/components/ModalProductAdmin.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { useRef } from "react";
-import "./ModalComprasAdmin.css";
-import "./ModalProductAdmin.css";
-
-const ModalProductAdmin = ({ srcImagen, $ModalProductAdmin }) => {
-  return (
-    <>
-      <div className="modal_product arriba" ref={$ModalProductAdmin}>
-        <div className="contenedor_product">
-          <span
-            className="button_close"
-            onClick={() => {
-              $ModalProductAdmin.current.classList.add("arriba");
-            }}
-          >
-            X
-          </span>
-          <div className="container_figure">
-            <figure>
-              <img src={`.${srcImagen}`} alt="" />
-            </figure>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default ModalProductAdmin;
diff --git a/src/pages/AdminCompras/styles.css b/src/pages/AdminCompras/styles.css
index 31a5441..6f07cd7 100644
--- a/src/pages/AdminCompras/styles.css
+++ b/src/pages/AdminCompras/styles.css
@@ -13,6 +13,7 @@
   height: 85vh;
   padding-top: 2vh;
   margin-top: 12vh;
+  overflow-y: scroll;
 }
 .table-compras-content {
   width: 98%; /* La tabla ocupa el 90% del ancho del elemento padre */
diff --git a/src/pages/AdminProducts/EditProduct/index.jsx b/src/pages/AdminProducts/EditProduct/index.jsx
new file mode 100644
index 0000000..26e449a
--- /dev/null
+++ b/src/pages/AdminProducts/EditProduct/index.jsx
@@ -0,0 +1,174 @@
+import React, { useContext, useEffect, useRef, useState } from "react";
+import "./styles.css";
+import { AddAPhotoSharp } from "@mui/icons-material";
+import { AppContext } from "../../../contexts/AppContext";
+import axios from "axios";
+import { useDispatch, useSelector } from "react-redux";
+import { actualizarItemProduct } from "../../../reducer/shoopingReducer";
+
+export default function EditProduct({ dataToEdit }) {
+  const [imagePreview, setImagePreview] = useState(null);
+  const state = useSelector((state) => state);
+  const { user } = state.user;
+  const dispatch = useDispatch();
+  const { setShowProductModal, setIsAddProduct, setLoader } =
+    useContext(AppContext);
+  const productForm = useRef(null);
+  useEffect(() => {
+    setImagePreview(dataToEdit.url);
+    productForm.current.name.value = dataToEdit.name;
+    productForm.current.portion.value = dataToEdit.portion;
+    productForm.current.price.value = dataToEdit.price;
+    productForm.current.type.value = dataToEdit.type;
+  }, []);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    // e.target.file.parentElement.firstElementChild.style.border = "none";
+    e.target.name.style.borderColor = "#000000";
+    e.target.portion.style.borderColor = "#000000";
+    e.target.price.style.borderColor = "#000000";
+    e.target.type.style.borderColor = "#000000";
+    if (e.target.name.value === "") {
+      e.target.name.style.borderColor = "red";
+      return;
+    }
+    if (e.target.portion.value === "") {
+      e.target.portion.style.borderColor = "red";
+      return;
+    }
+    if (e.target.price.value === "") {
+      e.target.price.style.borderColor = "red";
+      return;
+    }
+
+    if (e.target.type.value === "") {
+      e.target.type.style.borderColor = "red";
+      return;
+    }
+    //here we do the form data and send to the backend
+    try {
+      let options;
+      if (e.target.file.files.length === 0) {
+        options = {
+          method: "PATCH",
+          url: `https://vegetanizando-api.vercel.app/product/${dataToEdit.id}`,
+          headers: {
+            "Content-Type": "application/json",
+            "auth-token": user.token,
+          },
+          data: {
+            name: e.target.name.value,
+            portion: e.target.portion.value,
+            price: e.target.price.value,
+            type: e.target.type.value,
+          },
+        };
+      } else {
+        const product = new FormData();
+        product.append("image", e.target.file.files[0]);
+        product.append("name", e.target.name.value);
+        product.append("portion", e.target.portion.value);
+        product.append("price", e.target.price.value);
+        product.append("type", e.target.type.value);
+        options = {
+          method: "PUT",
+          url: `https://vegetanizando-api.vercel.app/product/${dataToEdit.id}`,
+          headers: {
+            "Content-Type":
+              "multipart/form-data; boundary=---011000010111000001101001",
+            "auth-token": user.token,
+          },
+          data: product,
+        };
+      }
+      setShowProductModal(false);
+      setIsAddProduct(false);
+      setLoader(true);
+      let newProduct = await axios.request(options);
+      dispatch(
+        actualizarItemProduct({ id: dataToEdit.id, ...newProduct.data })
+      );
+      setLoader(true);
+      setLoader(false);
+    } catch (error) {
+      setLoader(false);
+      alert("ocorreu um error");
+      console.log(error);
+    }
+  };
+
+  const handleImageChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      const imageUrl = URL.createObjectURL(file);
+      setImagePreview(imageUrl);
+    }
+  };
+
+  const handleCancel = () => {
+    setShowProductModal(false);
+  };
+
+  return (
+    <form
+      onSubmit={(e) => handleSubmit(e)}
+      className="form-add-container"
+      ref={productForm}
+    >
+      <div className="form-align-content">
+        <img className="form-img-item" src={imagePreview} alt="" />
+        <input
+          accept="image/*"
+          onChange={(e) => handleImageChange(e)}
+          className="form-file-item"
+          name="file"
+          type="file"
+        />
+        <AddAPhotoSharp style={{ fontSize: 42 }} className="form-add-icon" />
+      </div>
+      <label htmlFor="name" className="form-label">
+        Nome do Produto
+        <input className="form-name-item" type="text" name="name" />
+      </label>
+      <label htmlFor="portion" className="form-label">
+        Porção
+        <input className="form-portion-item" type="text" name="portion" />
+      </label>
+      <div className="form-align-content">
+        <label htmlFor="price" className="form-label">
+          Preço
+          <input
+            className="form-price-item"
+            name="price"
+            type="number"
+            step="0.01"
+          />
+        </label>
+        <label htmlFor="" className="form-label">
+          Tipo
+          <select className="form-select-content" name="type" id="type">
+            <option className="form-select-option" default value="">
+              Selecione
+            </option>
+            <option className="form-select-option" value="food">
+              Comida
+            </option>
+            <option className="form-select-option" value="drink">
+              Bebida
+            </option>
+          </select>
+        </label>
+      </div>
+      <div className="form-align-content">
+        <input
+          onClick={() => handleCancel()}
+          className="form-btn"
+          type="button"
+          value="Cancelar"
+        />
+        <input className="form-btn" type="submit" value="Atualizar" />
+      </div>
+    </form>
+  );
+}
diff --git a/src/pages/AdminProducts/EditProduct/styles.css b/src/pages/AdminProducts/EditProduct/styles.css
new file mode 100644
index 0000000..501f6ce
--- /dev/null
+++ b/src/pages/AdminProducts/EditProduct/styles.css
@@ -0,0 +1,104 @@
+.form-add-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.form-align-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.form-align-content:first-of-type {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.form-img-item {
+  width: 400px;
+  height: 400px;
+  object-fit: cover;
+  background: #c1c1c1;
+  position: relative;
+}
+
+.form-file-item {
+  width: 400px;
+  height: 500px;
+  position: absolute;
+  z-index: 999;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.form-add-icon {
+  font-size: 42px;
+  position: absolute;
+  opacity: 0;
+}
+
+.form-file-item:hover {
+  background-color: #333;
+  transition: all 200ms ease-in-out;
+  opacity: 0.3;
+}
+
+.form-file-item:hover~.form-add-icon {
+  opacity: 1;
+  color: #fff;
+  transition: all 200ms ease-in-out;
+}
+
+.form-label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  font-size: 12px;
+}
+
+.form-label input,
+.form-label select {
+  height: 30px;
+  font-size: 16px;
+}
+
+.form-label select {
+  width: 200px;
+  text-align: center;
+}
+
+.form-select-option {
+  text-align-last: center;
+}
+
+.form-btn {
+  padding: 0.8rem 1rem;
+  color: var(--primary-color);
+  background-color: red;
+  font-weight: 600;
+  font-size: 18px;
+  border-radius: 5px;
+  border: none;
+  opacity: 0.9;
+  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px;
+  cursor: pointer;
+}
+
+.form-btn:hover {
+  opacity: 1;
+}
+
+.form-btn:last-of-type {
+  background-color: var(--third-color);
+  flex-grow: 4;
+}
+
+.form-align-content:last-of-type {
+  display: flex;
+  gap: 1rem;
+}
\ No newline at end of file
diff --git a/src/pages/AdminProducts/index.jsx b/src/pages/AdminProducts/index.jsx
index c674905..7ce17a9 100644
--- a/src/pages/AdminProducts/index.jsx
+++ b/src/pages/AdminProducts/index.jsx
@@ -16,12 +16,10 @@ const AdminProducts = () => {
       navigate("/");
     }
   }, []);
-  useEffect(() => {
-    console.log(dataToEdit);
-  }, [dataToEdit]);
+
   return (
     <>
-      <Modal />
+      <Modal dataToEdit={dataToEdit} />
       <div className="container_admin_product">
         <AdminProductsList setDataToEdit={setDataToEdit} />
       </div>
diff --git a/src/pages/LoginAdmin/index.jsx b/src/pages/LoginAdmin/index.jsx
index b4101cd..846ff0f 100644
--- a/src/pages/LoginAdmin/index.jsx
+++ b/src/pages/LoginAdmin/index.jsx
@@ -72,7 +72,7 @@ export const LoginAdmin = () => {
             id="email"
             className="login__email"
             placeholder="Digite o seu Email"
-            pattern="^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$"
+            //pattern="^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$"
             required
           />
         </div>
diff --git a/src/pages/LoginAdmin/styles.css b/src/pages/LoginAdmin/styles.css
index 5389ca7..b6e9773 100644
--- a/src/pages/LoginAdmin/styles.css
+++ b/src/pages/LoginAdmin/styles.css
@@ -23,6 +23,8 @@
   color: #ffff;
   text-align: center;
   padding: 10px;
+  min-height: 65px;
+  font-size: 37px;
 }
 .input-container {
   height: 40px;