Funcionalidad de reseñas y boton de eliminar pedido

frontend/package-lock.json

@@ -11,11 +11,12 @@
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
         "@mui/material": "^5.15.18",
-        "axios": "^1.6.8",
+        "axios": "^1.7.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^5.1.0",
         "react-router-dom": "^6.23.0",
+        "react-star-ratings": "^2.3.0",
         "sweetalert": "^2.1.2",
         "sweetalert2": "^11.11.0"
       },
@@ -1889,9 +1890,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.6.8",
+      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
-      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
@@ -2028,6 +2029,11 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/clsx": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
@@ -4230,6 +4236,29 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-star-ratings": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-star-ratings/-/react-star-ratings-2.3.0.tgz",
+      "integrity": "sha512-34Z/oFNDRRn4ZcX7F3t9ccnpo7SQ32gD/vsusQOBc6B6vlqaGR6tke1/Yx3jTDjemKRSmXqhKgpPTR7/JAXq6A==",
+      "dependencies": {
+        "classnames": "^2.2.1",
+        "prop-types": "^15.6.0",
+        "react": "^16.1.0"
+      }
+    },
+    "node_modules/react-star-ratings/node_modules/react": {
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

frontend/package.json

@@ -13,11 +13,12 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/material": "^5.15.18",
-    "axios": "^1.6.8",
+    "axios": "^1.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.1.0",
     "react-router-dom": "^6.23.0",
+    "react-star-ratings": "^2.3.0",
     "sweetalert": "^2.1.2",
     "sweetalert2": "^11.11.0"
   },

frontend/src/AdminPackages/AdminVista.css

@@ -211,13 +211,7 @@ html {
 /* ********************************** */
 /*               BANNER               */
 /* ********************************** */
-.banner {
+
-	background-image: linear-gradient(100deg, #000000, #00000020),
-		url('assets/pastel-fondo.jpg');
-	height: 60rem;
-	background-size: cover;
-	background-position: center;
-}
 
 .content-banner {
 	max-width: 90rem;
@@ -327,29 +321,6 @@ html {
 	gap: 2rem;
 }
 
-.category-moca {
-	background-image: linear-gradient(#00000080, #00000080),
-		url('assets/pastel-4-leches.jpg');
-	background-size: cover;
-	background-position: bottom;
-	background-repeat: no-repeat;
-}
-
-.category-capuchino {
-	background-image: linear-gradient(#00000080, #00000080),
-		url('assets/pastel-zarza.jpg');
-	background-size: cover;
-	background-position: center;
-	background-repeat: no-repeat;
-}
-
-.category-expreso {
-	background-image: linear-gradient(#00000080, #00000080),
-		url('assets/pastel-moka.jpg');
-	background-size: cover;
-	background-position: center;
-	background-repeat: no-repeat;
-}
 
 .card-category p {
 	font-size: 2.5rem;
@@ -1319,6 +1290,25 @@ html {
     background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */
   }
   
+  .modificar-btn {
+	margin-left: 2rem;
+	background-color: #8B374A;
+    color: #fff;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.modificar-btn:hover {
+    background-color: #ff4646;
+}
+
+
+.modificar-btn:hover {
+    background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */
+  }
+
 
 .IniSesReserva{
     padding-top: 2rem;

frontend/src/AdminPackages/AdminVista.jsx

@@ -25,7 +25,9 @@ import pastel_fresa_arcoiris from "/src/assets/Pastel-fresas-arcoiris.png";
 import pastel_fresa_oreo from "/src/assets/Pastel-fresas-oreo.png";
 import pastel_fresa_vainilla from "/src/assets/Pastel-fresas-vainilla.png";
 
-import pastelZarza from "/src/assets/pastel-zarza.jpg"
+import pastelZarza from "/src/assets/pastel-zarza.jpg";
+
+import Swal from 'sweetalert2';
 
 
 function AdminVista() {
@@ -121,6 +123,85 @@ const mostrarAlertaLogOut = () => {
 		}
 	};
 
+	const mostrarAlertaEliminarPedido = (idPedido, nombPastel) => {
+		Swal.fire({
+		  title: "Eliminar Pedido",
+		  text: `¿Seguro que quieres eliminar tu pedido del ${nombPastel}?`,
+		  icon: "warning",
+		  showCancelButton: true, // Mostrar el botón de cancelar
+		  confirmButtonColor: "#3085d6", // Color del botón de confirmar
+		  cancelButtonColor: "#d33", // Color del botón de cancelar
+		  confirmButtonText: "Sí", // Texto del botón de confirmar
+		  cancelButtonText: "No", // Texto del botón de cancelar
+		}).then((result) => {
+		  if (result.isConfirmed) {
+			Swal.fire({
+			  text: "Pedido eliminado correctamente.",
+			  icon: "success",
+			});
+			eliminarPedido(idPedido);
+		  }
+		});
+	  };
+	
+
+	  const eliminarPedido = async (idPedido) => {
+		console.log(idPedido);
+		try {
+		  if (idPedido) {
+			const response = await axios.post('http://localhost:4567/frontend/eliminarPedido', { datosId: { idPedido } });
+			console.log(response.data);
+			// Lógica adicional si es necesario
+			obtenerPedidosDePasteles(); // Asumiendo que tienes una función para obtener pedidos, similar a obtenerReservaciones
+		  } else {
+			console.log("El ID del pedido es obligatorio para eliminar.");
+			// Lógica adicional si es necesario
+		  }
+		} catch (error) {
+		  throw error;
+		}
+	  };
+
+	  const mostrarAlertaActualizarEstatusPedido = (idPedido, nombPastel) => {
+		Swal.fire({
+		  title: "Actualizar Estado del Pedido",
+		  text: `¿Seguro que quieres marcar el pedido del ${nombPastel} como listo para entregar?`,
+		  icon: "warning",
+		  showCancelButton: true, // Mostrar el botón de cancelar
+		  confirmButtonColor: "#3085d6", // Color del botón de confirmar
+		  cancelButtonColor: "#d33", // Color del botón de cancelar
+		  confirmButtonText: "Sí", // Texto del botón de confirmar
+		  cancelButtonText: "No", // Texto del botón de cancelar
+		}).then((result) => {
+		  if (result.isConfirmed) {
+			Swal.fire({
+			  text: "Estado del pedido actualizado a listo para entregar.",
+			  icon: "success",
+			});
+			actualizarEstatusPedido(idPedido, "listo para entregar");
+		  }
+		});
+	  };
+
+
+	  const actualizarEstatusPedido = async (idPedido, nuevoEstatus) => {
+		console.log(idPedido, nuevoEstatus);
+		try {
+		  if (idPedido) {
+			const response = await axios.post('http://localhost:4567/frontend/actualizarEstatusPedido', { datosId: { idPedido, nuevoEstatus } });
+			console.log(response.data);
+			// Lógica adicional si es necesario
+			obtenerPedidosDePasteles(); // Asumiendo que tienes una función para obtener pedidos
+		  } else {
+			console.log("El ID del pedido es obligatorio para actualizar.");
+			// Lógica adicional si es necesario
+		  }
+		} catch (error) {
+		  throw error;
+		}
+	  };
+	  
+
 
 
 	  
@@ -193,8 +274,11 @@ const mostrarAlertaLogOut = () => {
 					  <p>Estatus: {pedido.estatus}</p>
 					  <p>Inscripción: {pedido.inscripcion}</p>
 					  <p>Relleno: {pedido.relleno}</p>
-					  <button className="eliminar-btn" onClick={() => mostrarAlertaEliminarRes(pedido.id_pedido, pedido.nombre_pastel)}>
+					  <button className="eliminar-btn" onClick={() => mostrarAlertaEliminarPedido(pedido.id_pedido, pedido.nombre_pastel)}>
-						Eliminar Pedido
+					  Eliminar Pedido
+					  </button>
+					  <button className="modificar-btn" onClick={() => mostrarAlertaActualizarEstatusPedido(pedido.id_pedido, pedido.nombre_pastel)}>
+					  Modificar Pedido
 					  </button>
 					</div>
 				  </div>

frontend/src/Pasteles/ChocolateBlanco.jsx

@@ -13,6 +13,10 @@ import Swal from 'sweetalert2'
 import axios from 'axios';
 
 
+import StarRatings from 'react-star-ratings';
+
+
+
 function ChocolateBlanco() {
   const navigate = useNavigate();
 
@@ -86,6 +90,8 @@ function ChocolateBlanco() {
       useEffect(() => {
       // Llamar a la función al cargar la página
       obtenerNombreUsuario();
+      obtenerReseñasPorPastel();
+      mostrarReseñas();
       }, []); 
     
       const cerrarSesion = async () => {
@@ -156,6 +162,120 @@ function ChocolateBlanco() {
 
       };
 
+
+
+
+      const [reseñas, setReseñas] = useState([]);
+      const [datosFormularioReseña, setDatosFormularioReseña] = useState(
+          {contenido: '',
+          estrellas: 5
+      });
+
+
+      const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setDatosFormularioReseña({
+          ...datosFormularioReseña,
+          [name]: value,
+        });
+      };
+
+      const enviarReseña = async (e) => {
+        e.preventDefault();
+        await agregarReseña();
+        await obtenerReseñasPorPastel("2"); // Obtener las reseñas nuevamente para actualizar la lista
+      };
+
+
+      const agregarReseña = async () => {  
+        console.log("Agregando reseña"); 
+        console.log(datosFormularioReseña.contenido);
+        console.log(datosFormularioReseña.estrellas);
+        console.log(nombreUsuario)
+    
+        try{
+            if(nombreUsuario==null){
+                mostrarAlertaReseñaFallidaLogin();
+            }else{
+                const response = await axios.post('http://localhost:4567/frontend/agregarResenia', {
+                    nombreUsuario: nombreUsuario,
+                    idPastel: "2", // Asegúrate de tener el id del pastel
+                    contenido: datosFormularioReseña.contenido,
+                    estrellas: datosFormularioReseña.estrellas,
+                });
+    
+                console.log(response.data);
+                //mostrarAlertaReseñaExitosa();
+                console.log("reseña exitosa");
+                console.log("")    
+                // Limpiar los estados después de agregar la reseña
+                setDatosFormularioReseña({ contenido: "", estrellas: 0 });
+            }
+        }catch(error){
+            console.error("Error al agregar la reseña");
+            throw error;
+        }
+
+             
+    };
+
+
+    const obtenerReseñasPorPastel = async (idPastel) => {
+      try {
+        const response = await axios.post('http://localhost:4567/frontend/obtenerReseniasPorPastel', {
+          idPastel: "2",
+        });
+        console.log("Reseñas obtenidas:", response.data.reseñas);
+        const reseñasTransformadas = response.data.reseñas.map(reseña => ({
+          idReseña: reseña.id_reseña,
+          nombreUsuario: reseña.nombre_usuario,
+          idPastel: reseña.id_pastel,
+          contenido: reseña.contenido,
+          estrellas: reseña.estrellas,
+        }));
+    
+        setReseñas(reseñasTransformadas);
+      } catch (error) {
+        console.error("Error al obtener reseñas:", error);
+      }
+    };
+    
+    const mostrarReseñas = () => {
+      if (!nombreUsuario) {
+        return (
+          <h1 className="IniSesReserva">Inicia Sesión para poder ver las reseñas.</h1>
+        );
+      } else {
+        if (reseñas.length === 0) {
+          return (
+            <h1 className="ReseñaNull">No hay reseñas para este pastel en este momento.</h1>
+          );
+        } else {
+          return (
+            <div className="flex justify-center space-x-4">
+              {reseñas.map(reseña => (
+                <div key={reseña.idReseña} className="customer-review-card">
+                  <div className="customer-review-info">
+                    <img className="customer-review-avatar" src="https://placehold.co/100x100" />
+                    <div>
+                      <div className="customer-review-name">{reseña.nombreUsuario}</div>
+                    </div>
+                  </div>
+                  <div className="customer-review-rating">
+                    {"★".repeat(reseña.estrellas)}{"☆".repeat(5 - reseña.estrellas)}
+                  </div>
+                  <p className="customer-review-content">
+                    {reseña.contenido}
+                  </p>
+                </div>
+              ))}
+            </div>
+          );
+        }
+      }
+    };
+
+
   return (
     <>
 
@@ -302,6 +422,49 @@ function ChocolateBlanco() {
         </div>
       </main>
 
+
+
+      <div className="Reseñas">
+
+        <h2 className="customer-reviews-title">Reseñas</h2>
+
+        <div className="estrellas-reviews-container"> 
+        <h1>Calificación:</h1>
+        <StarRatings
+              rating={datosFormularioReseña.estrellas}
+              starRatedColor="#4b1e29"
+              starHoverColor="#8B374A"
+              changeRating={(newRating) => setDatosFormularioReseña({...datosFormularioReseña, estrellas: newRating})}
+              numberOfStars={5}
+              name='rating'
+              starDimension="30px"
+          />
+        </div>
+        <div className="customer-reviews-container">    
+        <div className="reseñas-conteiner">
+            <input className="input-reseñas"
+            type="text"
+            name="contenido"
+            value={datosFormularioReseña.contenido}
+            onChange={handleInputChange}
+            placeholder="Escribe tu reseña aquí"></input>
+
+
+          
+
+            <button className="boton-reseñas" onClick={enviarReseña}>Enviar</button>
+          </div>  
+          {mostrarReseñas()}
+
+        </div>
+
+        </div>      
+
+
+
+
+
+
       <footer className="footer">
 			<div className="container container-footer">
 				<div className="menu-footer">

frontend/src/Pasteles/PastelCajeta.jsx

@@ -11,6 +11,7 @@ import { useNavigate } from "react-router-dom";
 import './ChocolateBlanco.css';
 import Swal from 'sweetalert2'
 import axios from 'axios';
+import StarRatings from 'react-star-ratings';
 
 function PastelCajeta() {
   const navigate = useNavigate();
@@ -83,6 +84,8 @@ function PastelCajeta() {
       useEffect(() => {
       // Llamar a la función al cargar la página
       obtenerNombreUsuario();
+      obtenerReseñasPorPastel();
+      mostrarReseñas();
       }, []); 
     
       const cerrarSesion = async () => {
@@ -155,6 +158,121 @@ function PastelCajeta() {
 
 
       };
+
+      
+
+      const [reseñas, setReseñas] = useState([]);
+      const [datosFormularioReseña, setDatosFormularioReseña] = useState(
+          {contenido: '',
+          estrellas: 5
+      });
+
+
+      const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setDatosFormularioReseña({
+          ...datosFormularioReseña,
+          [name]: value,
+        });
+      };
+
+      const enviarReseña = async (e) => {
+        e.preventDefault();
+        await agregarReseña();
+        await obtenerReseñasPorPastel("3"); // Obtener las reseñas nuevamente para actualizar la lista
+      };
+
+
+      const agregarReseña = async () => {  
+        console.log("Agregando reseña"); 
+        console.log(datosFormularioReseña.contenido);
+        console.log(datosFormularioReseña.estrellas);
+        console.log(nombreUsuario)
+    
+        try{
+            if(nombreUsuario==null){
+                mostrarAlertaReseñaFallidaLogin();
+            }else{
+                const response = await axios.post('http://localhost:4567/frontend/agregarResenia', {
+                    nombreUsuario: nombreUsuario,
+                    idPastel: "3", // Asegúrate de tener el id del pastel
+                    contenido: datosFormularioReseña.contenido,
+                    estrellas: datosFormularioReseña.estrellas,
+                });
+    
+                console.log(response.data);
+                //mostrarAlertaReseñaExitosa();
+                console.log("reseña exitosa");
+                console.log("")    
+                // Limpiar los estados después de agregar la reseña
+                setDatosFormularioReseña({ contenido: "", estrellas: 0 });
+            }
+        }catch(error){
+            console.error("Error al agregar la reseña");
+            throw error;
+        }
+
+             
+    };
+
+
+    const obtenerReseñasPorPastel = async (idPastel) => {
+      try {
+        const response = await axios.post('http://localhost:4567/frontend/obtenerReseniasPorPastel', {
+          idPastel: "3",
+        });
+        console.log("Reseñas obtenidas:", response.data.reseñas);
+        const reseñasTransformadas = response.data.reseñas.map(reseña => ({
+          idReseña: reseña.id_reseña,
+          nombreUsuario: reseña.nombre_usuario,
+          idPastel: reseña.id_pastel,
+          contenido: reseña.contenido,
+          estrellas: reseña.estrellas,
+        }));
+    
+        setReseñas(reseñasTransformadas);
+      } catch (error) {
+        console.error("Error al obtener reseñas:", error);
+      }
+    };
+    
+    const mostrarReseñas = () => {
+      if (!nombreUsuario) {
+        return (
+          <h1 className="IniSesReserva">Inicia Sesión para poder ver las reseñas.</h1>
+        );
+      } else {
+        if (reseñas.length === 0) {
+          return (
+            <h1 className="ReseñaNull">No hay reseñas para este pastel en este momento.</h1>
+          );
+        } else {
+          return (
+            <div className="flex justify-center space-x-4">
+              {reseñas.map(reseña => (
+                <div key={reseña.idReseña} className="customer-review-card">
+                  <div className="customer-review-info">
+                    <img className="customer-review-avatar" src="https://placehold.co/100x100" />
+                    <div>
+                      <div className="customer-review-name">{reseña.nombreUsuario}</div>
+                    </div>
+                  </div>
+                  <div className="customer-review-rating">
+                    {"★".repeat(reseña.estrellas)}{"☆".repeat(5 - reseña.estrellas)}
+                  </div>
+                  <p className="customer-review-content">
+                    {reseña.contenido}
+                  </p>
+                </div>
+              ))}
+            </div>
+          );
+        }
+      }
+    };
+
+
+
   return (
     <>
 
@@ -292,6 +410,42 @@ function PastelCajeta() {
         </div>
       </main>
 
+      <div className="Reseñas">
+
+      <h2 className="customer-reviews-title">Reseñas</h2>
+
+      <div className="estrellas-reviews-container"> 
+      <h1>Calificación:</h1>
+      <StarRatings
+            rating={datosFormularioReseña.estrellas}
+            starRatedColor="#4b1e29"
+            starHoverColor="#8B374A"
+            changeRating={(newRating) => setDatosFormularioReseña({...datosFormularioReseña, estrellas: newRating})}
+            numberOfStars={5}
+            name='rating'
+            starDimension="30px"
+        />
+      </div>
+      <div className="customer-reviews-container">    
+      <div className="reseñas-conteiner">
+          <input className="input-reseñas"
+          type="text"
+          name="contenido"
+          value={datosFormularioReseña.contenido}
+          onChange={handleInputChange}
+          placeholder="Escribe tu reseña aquí"></input>
+
+
+        
+
+          <button className="boton-reseñas" onClick={enviarReseña}>Enviar</button>
+        </div>  
+        {mostrarReseñas()}
+      
+      </div>
+
+      </div>
+
       <footer className="footer">
 			<div className="container container-footer">
 				<div className="menu-footer">

frontend/src/Pasteles/PastelChocolate.jsx

@@ -11,6 +11,7 @@ import { useNavigate } from "react-router-dom";
 import './ChocolateBlanco.css';
 import Swal from 'sweetalert2'
 import axios from 'axios';
+import StarRatings from 'react-star-ratings';
 
 
 function PastelChocolate() {
@@ -88,6 +89,8 @@ function PastelChocolate() {
       useEffect(() => {
       // Llamar a la función al cargar la página
       obtenerNombreUsuario();
+      obtenerReseñasPorPastel();
+      mostrarReseñas();
       }, []); 
     
       const cerrarSesion = async () => {
@@ -158,6 +161,118 @@ function PastelChocolate() {
 
       };
 
+      
+
+      const [reseñas, setReseñas] = useState([]);
+      const [datosFormularioReseña, setDatosFormularioReseña] = useState(
+          {contenido: '',
+          estrellas: 5
+      });
+
+
+      const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setDatosFormularioReseña({
+          ...datosFormularioReseña,
+          [name]: value,
+        });
+      };
+
+      const enviarReseña = async (e) => {
+        e.preventDefault();
+        await agregarReseña();
+        await obtenerReseñasPorPastel("5"); // Obtener las reseñas nuevamente para actualizar la lista
+      };
+
+
+      const agregarReseña = async () => {  
+        console.log("Agregando reseña"); 
+        console.log(datosFormularioReseña.contenido);
+        console.log(datosFormularioReseña.estrellas);
+        console.log(nombreUsuario)
+    
+        try{
+            if(nombreUsuario==null){
+                mostrarAlertaReseñaFallidaLogin();
+            }else{
+                const response = await axios.post('http://localhost:4567/frontend/agregarResenia', {
+                    nombreUsuario: nombreUsuario,
+                    idPastel: "5", // Asegúrate de tener el id del pastel
+                    contenido: datosFormularioReseña.contenido,
+                    estrellas: datosFormularioReseña.estrellas,
+                });
+    
+                console.log(response.data);
+                //mostrarAlertaReseñaExitosa();
+                console.log("reseña exitosa");
+                console.log("")    
+                // Limpiar los estados después de agregar la reseña
+                setDatosFormularioReseña({ contenido: "", estrellas: 0 });
+            }
+        }catch(error){
+            console.error("Error al agregar la reseña");
+            throw error;
+        }
+
+             
+    };
+
+
+    const obtenerReseñasPorPastel = async (idPastel) => {
+      try {
+        const response = await axios.post('http://localhost:4567/frontend/obtenerReseniasPorPastel', {
+          idPastel: "5",
+        });
+        console.log("Reseñas obtenidas:", response.data.reseñas);
+        const reseñasTransformadas = response.data.reseñas.map(reseña => ({
+          idReseña: reseña.id_reseña,
+          nombreUsuario: reseña.nombre_usuario,
+          idPastel: reseña.id_pastel,
+          contenido: reseña.contenido,
+          estrellas: reseña.estrellas,
+        }));
+    
+        setReseñas(reseñasTransformadas);
+      } catch (error) {
+        console.error("Error al obtener reseñas:", error);
+      }
+    };
+    
+    const mostrarReseñas = () => {
+      if (!nombreUsuario) {
+        return (
+          <h1 className="IniSesReserva">Inicia Sesión para poder ver las reseñas.</h1>
+        );
+      } else {
+        if (reseñas.length === 0) {
+          return (
+            <h1 className="ReseñaNull">No hay reseñas para este pastel en este momento.</h1>
+          );
+        } else {
+          return (
+            <div className="flex justify-center space-x-4">
+              {reseñas.map(reseña => (
+                <div key={reseña.idReseña} className="customer-review-card">
+                  <div className="customer-review-info">
+                    <img className="customer-review-avatar" src="https://placehold.co/100x100" />
+                    <div>
+                      <div className="customer-review-name">{reseña.nombreUsuario}</div>
+                    </div>
+                  </div>
+                  <div className="customer-review-rating">
+                    {"★".repeat(reseña.estrellas)}{"☆".repeat(5 - reseña.estrellas)}
+                  </div>
+                  <p className="customer-review-content">
+                    {reseña.contenido}
+                  </p>
+                </div>
+              ))}
+            </div>
+          );
+        }
+      }
+    };
+
   return (
     <>
 
@@ -297,6 +412,46 @@ function PastelChocolate() {
         </div>
       </main>
 
+
+
+      <div className="Reseñas">
+
+      <h2 className="customer-reviews-title">Reseñas</h2>
+
+      <div className="estrellas-reviews-container"> 
+      <h1>Calificación:</h1>
+      <StarRatings
+            rating={datosFormularioReseña.estrellas}
+            starRatedColor="#4b1e29"
+            starHoverColor="#8B374A"
+            changeRating={(newRating) => setDatosFormularioReseña({...datosFormularioReseña, estrellas: newRating})}
+            numberOfStars={5}
+            name='rating'
+            starDimension="30px"
+        />
+      </div>
+      <div className="customer-reviews-container">    
+      <div className="reseñas-conteiner">
+          <input className="input-reseñas"
+          type="text"
+          name="contenido"
+          value={datosFormularioReseña.contenido}
+          onChange={handleInputChange}
+          placeholder="Escribe tu reseña aquí"></input>
+
+
+        
+
+          <button className="boton-reseñas" onClick={enviarReseña}>Enviar</button>
+        </div>  
+        {mostrarReseñas()}
+      
+      </div>
+
+      </div>
+
+      
+
       <footer className="footer">
 			<div className="container container-footer">
 				<div className="menu-footer">

frontend/src/Pasteles/PastelFrambuesa.jsx

@@ -11,6 +11,7 @@ import { useNavigate } from "react-router-dom";
 import './ChocolateBlanco.css';
 import Swal from 'sweetalert2'
 import axios from 'axios';
+import StarRatings from 'react-star-ratings';
 
 function PastelFrambuesa() {
   const navigate = useNavigate();
@@ -84,6 +85,8 @@ function PastelFrambuesa() {
       useEffect(() => {
       // Llamar a la función al cargar la página
       obtenerNombreUsuario();
+      obtenerReseñasPorPastel();
+      mostrarReseñas();
       }, []); 
     
       const cerrarSesion = async () => {
@@ -154,6 +157,120 @@ function PastelFrambuesa() {
 
 
       };
+
+      
+
+      const [reseñas, setReseñas] = useState([]);
+      const [datosFormularioReseña, setDatosFormularioReseña] = useState(
+          {contenido: '',
+          estrellas: 5
+      });
+
+
+      const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setDatosFormularioReseña({
+          ...datosFormularioReseña,
+          [name]: value,
+        });
+      };
+
+      const enviarReseña = async (e) => {
+        e.preventDefault();
+        await agregarReseña();
+        await obtenerReseñasPorPastel("7"); // Obtener las reseñas nuevamente para actualizar la lista
+      };
+
+
+      const agregarReseña = async () => {  
+        console.log("Agregando reseña"); 
+        console.log(datosFormularioReseña.contenido);
+        console.log(datosFormularioReseña.estrellas);
+        console.log(nombreUsuario)
+    
+        try{
+            if(nombreUsuario==null){
+                mostrarAlertaReseñaFallidaLogin();
+            }else{
+                const response = await axios.post('http://localhost:4567/frontend/agregarResenia', {
+                    nombreUsuario: nombreUsuario,
+                    idPastel: "7", // Asegúrate de tener el id del pastel
+                    contenido: datosFormularioReseña.contenido,
+                    estrellas: datosFormularioReseña.estrellas,
+                });
+    
+                console.log(response.data);
+                //mostrarAlertaReseñaExitosa();
+                console.log("reseña exitosa");
+                console.log("")    
+                // Limpiar los estados después de agregar la reseña
+                setDatosFormularioReseña({ contenido: "", estrellas: 0 });
+            }
+        }catch(error){
+            console.error("Error al agregar la reseña");
+            throw error;
+        }
+
+             
+    };
+
+
+    const obtenerReseñasPorPastel = async (idPastel) => {
+      try {
+        const response = await axios.post('http://localhost:4567/frontend/obtenerReseniasPorPastel', {
+          idPastel: "7",
+        });
+        console.log("Reseñas obtenidas:", response.data.reseñas);
+        const reseñasTransformadas = response.data.reseñas.map(reseña => ({
+          idReseña: reseña.id_reseña,
+          nombreUsuario: reseña.nombre_usuario,
+          idPastel: reseña.id_pastel,
+          contenido: reseña.contenido,
+          estrellas: reseña.estrellas,
+        }));
+    
+        setReseñas(reseñasTransformadas);
+      } catch (error) {
+        console.error("Error al obtener reseñas:", error);
+      }
+    };
+    
+    const mostrarReseñas = () => {
+      if (!nombreUsuario) {
+        return (
+          <h1 className="IniSesReserva">Inicia Sesión para poder ver las reseñas.</h1>
+        );
+      } else {
+        if (reseñas.length === 0) {
+          return (
+            <h1 className="ReseñaNull">No hay reseñas para este pastel en este momento.</h1>
+          );
+        } else {
+          return (
+            <div className="flex justify-center space-x-4">
+              {reseñas.map(reseña => (
+                <div key={reseña.idReseña} className="customer-review-card">
+                  <div className="customer-review-info">
+                    <img className="customer-review-avatar" src="https://placehold.co/100x100" />
+                    <div>
+                      <div className="customer-review-name">{reseña.nombreUsuario}</div>
+                    </div>
+                  </div>
+                  <div className="customer-review-rating">
+                    {"★".repeat(reseña.estrellas)}{"☆".repeat(5 - reseña.estrellas)}
+                  </div>
+                  <p className="customer-review-content">
+                    {reseña.contenido}
+                  </p>
+                </div>
+              ))}
+            </div>
+          );
+        }
+      }
+    };
+
+
   return (
     <>
 
@@ -291,6 +408,50 @@ function PastelFrambuesa() {
         </div>
       </main>
 
+
+
+
+
+      <div className="Reseñas">
+
+      <h2 className="customer-reviews-title">Reseñas</h2>
+
+      <div className="estrellas-reviews-container"> 
+      <h1>Calificación:</h1>
+      <StarRatings
+            rating={datosFormularioReseña.estrellas}
+            starRatedColor="#4b1e29"
+            starHoverColor="#8B374A"
+            changeRating={(newRating) => setDatosFormularioReseña({...datosFormularioReseña, estrellas: newRating})}
+            numberOfStars={5}
+            name='rating'
+            starDimension="30px"
+        />
+      </div>
+      <div className="customer-reviews-container">    
+      <div className="reseñas-conteiner">
+          <input className="input-reseñas"
+          type="text"
+          name="contenido"
+          value={datosFormularioReseña.contenido}
+          onChange={handleInputChange}
+          placeholder="Escribe tu reseña aquí"></input>
+
+
+        
+
+          <button className="boton-reseñas" onClick={enviarReseña}>Enviar</button>
+        </div>  
+        {mostrarReseñas()}
+      
+      </div>
+
+      </div>
+
+
+
+      
+
       <footer className="footer">
 			<div className="container container-footer">
 				<div className="menu-footer">

frontend/src/Pasteles/PastelMoka.jsx

@@ -10,6 +10,7 @@ import { CiShare2 } from "react-icons/ci";
 import { useNavigate } from "react-router-dom";
 import Swal from 'sweetalert2'
 import axios from 'axios';
+import StarRatings from 'react-star-ratings';
 
 
 function PastelMoka() {
@@ -85,6 +86,8 @@ function PastelMoka() {
       useEffect(() => {
       // Llamar a la función al cargar la página
       obtenerNombreUsuario();
+      obtenerReseñasPorPastel();
+      mostrarReseñas();
       }, []); 
     
       const cerrarSesion = async () => {
@@ -156,6 +159,118 @@ function PastelMoka() {
 
       };
 
+      
+
+      const [reseñas, setReseñas] = useState([]);
+      const [datosFormularioReseña, setDatosFormularioReseña] = useState(
+          {contenido: '',
+          estrellas: 5
+      });
+
+
+      const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setDatosFormularioReseña({
+          ...datosFormularioReseña,
+          [name]: value,
+        });
+      };
+
+      const enviarReseña = async (e) => {
+        e.preventDefault();
+        await agregarReseña();
+        await obtenerReseñasPorPastel("4"); // Obtener las reseñas nuevamente para actualizar la lista
+      };
+
+
+      const agregarReseña = async () => {  
+        console.log("Agregando reseña"); 
+        console.log(datosFormularioReseña.contenido);
+        console.log(datosFormularioReseña.estrellas);
+        console.log(nombreUsuario)
+    
+        try{
+            if(nombreUsuario==null){
+                mostrarAlertaReseñaFallidaLogin();
+            }else{
+                const response = await axios.post('http://localhost:4567/frontend/agregarResenia', {
+                    nombreUsuario: nombreUsuario,
+                    idPastel: "4", // Asegúrate de tener el id del pastel
+                    contenido: datosFormularioReseña.contenido,
+                    estrellas: datosFormularioReseña.estrellas,
+                });
+    
+                console.log(response.data);
+                //mostrarAlertaReseñaExitosa();
+                console.log("reseña exitosa");
+                console.log("")    
+                // Limpiar los estados después de agregar la reseña
+                setDatosFormularioReseña({ contenido: "", estrellas: 0 });
+            }
+        }catch(error){
+            console.error("Error al agregar la reseña");
+            throw error;
+        }
+
+             
+    };
+
+
+    const obtenerReseñasPorPastel = async (idPastel) => {
+      try {
+        const response = await axios.post('http://localhost:4567/frontend/obtenerReseniasPorPastel', {
+          idPastel: "4",
+        });
+        console.log("Reseñas obtenidas:", response.data.reseñas);
+        const reseñasTransformadas = response.data.reseñas.map(reseña => ({
+          idReseña: reseña.id_reseña,
+          nombreUsuario: reseña.nombre_usuario,
+          idPastel: reseña.id_pastel,
+          contenido: reseña.contenido,
+          estrellas: reseña.estrellas,
+        }));
+    
+        setReseñas(reseñasTransformadas);
+      } catch (error) {
+        console.error("Error al obtener reseñas:", error);
+      }
+    };
+    
+    const mostrarReseñas = () => {
+      if (!nombreUsuario) {
+        return (
+          <h1 className="IniSesReserva">Inicia Sesión para poder ver las reseñas.</h1>
+        );
+      } else {
+        if (reseñas.length === 0) {
+          return (
+            <h1 className="ReseñaNull">No hay reseñas para este pastel en este momento.</h1>
+          );
+        } else {
+          return (
+            <div className="flex justify-center space-x-4">
+              {reseñas.map(reseña => (
+                <div key={reseña.idReseña} className="customer-review-card">
+                  <div className="customer-review-info">
+                    <img className="customer-review-avatar" src="https://placehold.co/100x100" />
+                    <div>
+                      <div className="customer-review-name">{reseña.nombreUsuario}</div>
+                    </div>
+                  </div>
+                  <div className="customer-review-rating">
+                    {"★".repeat(reseña.estrellas)}{"☆".repeat(5 - reseña.estrellas)}
+                  </div>
+                  <p className="customer-review-content">
+                    {reseña.contenido}
+                  </p>
+                </div>
+              ))}
+            </div>
+          );
+        }
+      }
+    };
+
   return (
     <>
 
@@ -295,6 +410,42 @@ function PastelMoka() {
         </div>
       </main>
 
+      <div className="Reseñas">
+
+      <h2 className="customer-reviews-title">Reseñas</h2>
+
+      <div className="estrellas-reviews-container"> 
+      <h1>Calificación:</h1>
+      <StarRatings
+            rating={datosFormularioReseña.estrellas}
+            starRatedColor="#4b1e29"
+            starHoverColor="#8B374A"
+            changeRating={(newRating) => setDatosFormularioReseña({...datosFormularioReseña, estrellas: newRating})}
+            numberOfStars={5}
+            name='rating'
+            starDimension="30px"
+        />
+      </div>
+      <div className="customer-reviews-container">    
+      <div className="reseñas-conteiner">
+          <input className="input-reseñas"
+          type="text"
+          name="contenido"
+          value={datosFormularioReseña.contenido}
+          onChange={handleInputChange}
+          placeholder="Escribe tu reseña aquí"></input>
+
+
+        
+
+          <button className="boton-reseñas" onClick={enviarReseña}>Enviar</button>
+        </div>  
+        {mostrarReseñas()}
+      
+      </div>
+
+      </div>
+
       <footer className="footer">
 			<div className="container container-footer">
 				<div className="menu-footer">

frontend/src/Pasteles/PastelZanahoria.jsx

@@ -11,7 +11,7 @@ import { useNavigate } from "react-router-dom";
 import './ChocolateBlanco.css';
 import Swal from 'sweetalert2'
 import axios from 'axios';
-
+import StarRatings from 'react-star-ratings';
 
 function PastelZanahoria() {
   const navigate = useNavigate();
@@ -85,6 +85,8 @@ function PastelZanahoria() {
       useEffect(() => {
       // Llamar a la función al cargar la página
       obtenerNombreUsuario();
+      obtenerReseñasPorPastel();
+      mostrarReseñas();
       }, []); 
     
       const cerrarSesion = async () => {
@@ -156,6 +158,119 @@ function PastelZanahoria() {
 
       };
 
+
+      
+
+      const [reseñas, setReseñas] = useState([]);
+      const [datosFormularioReseña, setDatosFormularioReseña] = useState(
+          {contenido: '',
+          estrellas: 5
+      });
+
+
+      const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setDatosFormularioReseña({
+          ...datosFormularioReseña,
+          [name]: value,
+        });
+      };
+
+      const enviarReseña = async (e) => {
+        e.preventDefault();
+        await agregarReseña();
+        await obtenerReseñasPorPastel("6"); // Obtener las reseñas nuevamente para actualizar la lista
+      };
+
+
+      const agregarReseña = async () => {  
+        console.log("Agregando reseña"); 
+        console.log(datosFormularioReseña.contenido);
+        console.log(datosFormularioReseña.estrellas);
+        console.log(nombreUsuario)
+    
+        try{
+            if(nombreUsuario==null){
+                mostrarAlertaReseñaFallidaLogin();
+            }else{
+                const response = await axios.post('http://localhost:4567/frontend/agregarResenia', {
+                    nombreUsuario: nombreUsuario,
+                    idPastel: "6", // Asegúrate de tener el id del pastel
+                    contenido: datosFormularioReseña.contenido,
+                    estrellas: datosFormularioReseña.estrellas,
+                });
+    
+                console.log(response.data);
+                //mostrarAlertaReseñaExitosa();
+                console.log("reseña exitosa");
+                console.log("")    
+                // Limpiar los estados después de agregar la reseña
+                setDatosFormularioReseña({ contenido: "", estrellas: 0 });
+            }
+        }catch(error){
+            console.error("Error al agregar la reseña");
+            throw error;
+        }
+
+             
+    };
+
+
+    const obtenerReseñasPorPastel = async (idPastel) => {
+      try {
+        const response = await axios.post('http://localhost:4567/frontend/obtenerReseniasPorPastel', {
+          idPastel: "6",
+        });
+        console.log("Reseñas obtenidas:", response.data.reseñas);
+        const reseñasTransformadas = response.data.reseñas.map(reseña => ({
+          idReseña: reseña.id_reseña,
+          nombreUsuario: reseña.nombre_usuario,
+          idPastel: reseña.id_pastel,
+          contenido: reseña.contenido,
+          estrellas: reseña.estrellas,
+        }));
+    
+        setReseñas(reseñasTransformadas);
+      } catch (error) {
+        console.error("Error al obtener reseñas:", error);
+      }
+    };
+    
+    const mostrarReseñas = () => {
+      if (!nombreUsuario) {
+        return (
+          <h1 className="IniSesReserva">Inicia Sesión para poder ver las reseñas.</h1>
+        );
+      } else {
+        if (reseñas.length === 0) {
+          return (
+            <h1 className="ReseñaNull">No hay reseñas para este pastel en este momento.</h1>
+          );
+        } else {
+          return (
+            <div className="flex justify-center space-x-4">
+              {reseñas.map(reseña => (
+                <div key={reseña.idReseña} className="customer-review-card">
+                  <div className="customer-review-info">
+                    <img className="customer-review-avatar" src="https://placehold.co/100x100" />
+                    <div>
+                      <div className="customer-review-name">{reseña.nombreUsuario}</div>
+                    </div>
+                  </div>
+                  <div className="customer-review-rating">
+                    {"★".repeat(reseña.estrellas)}{"☆".repeat(5 - reseña.estrellas)}
+                  </div>
+                  <p className="customer-review-content">
+                    {reseña.contenido}
+                  </p>
+                </div>
+              ))}
+            </div>
+          );
+        }
+      }
+    };
+  
   return (
     <>
 
@@ -294,6 +409,48 @@ function PastelZanahoria() {
         </div>
       </main>
 
+
+
+
+      <div className="Reseñas">
+
+      <h2 className="customer-reviews-title">Reseñas</h2>
+
+      <div className="estrellas-reviews-container"> 
+      <h1>Calificación:</h1>
+      <StarRatings
+            rating={datosFormularioReseña.estrellas}
+            starRatedColor="#4b1e29"
+            starHoverColor="#8B374A"
+            changeRating={(newRating) => setDatosFormularioReseña({...datosFormularioReseña, estrellas: newRating})}
+            numberOfStars={5}
+            name='rating'
+            starDimension="30px"
+        />
+      </div>
+      <div className="customer-reviews-container">    
+      <div className="reseñas-conteiner">
+          <input className="input-reseñas"
+          type="text"
+          name="contenido"
+          value={datosFormularioReseña.contenido}
+          onChange={handleInputChange}
+          placeholder="Escribe tu reseña aquí"></input>
+
+
+        
+
+          <button className="boton-reseñas" onClick={enviarReseña}>Enviar</button>
+        </div>  
+        {mostrarReseñas()}
+      
+      </div>
+
+      </div>
+
+
+      
+
       <footer className="footer">
 			<div className="container container-footer">
 				<div className="menu-footer">

frontend/src/Pedidos.jsx

@@ -25,6 +25,8 @@ import pastel_fresa_arcoiris from "./assets/Pastel-fresas-arcoiris.png";
 import pastel_fresa_oreo from "./assets/Pastel-fresas-oreo.png";
 import pastel_fresa_vainilla from "./assets/Pastel-fresas-vainilla.png";
 
+import Swal from 'sweetalert2';
+
 import pastelZarza from "./assets/pastel-zarza.jpg"
 
 
@@ -145,6 +147,54 @@ const mostrarAlertaLogOut = () => {
 		  navigate("/Pasteles");
 		  };
 
+		  const mostrarAlertaEliminarPedido = (idPedido, nombPastel, status) => {
+			if (status === "listo para entregar") {
+			  Swal.fire({
+				title: "No se puede eliminar",
+				text: `El pedido del ${nombPastel} ya está listo para entregar y no se puede eliminar.`,
+				icon: "info",
+				confirmButtonText: "Entendido",
+			  });
+			} else {
+			  Swal.fire({
+				title: "Eliminar Pedido",
+				text: `¿Seguro que quieres eliminar tu pedido del ${nombPastel}?`,
+				icon: "warning",
+				showCancelButton: true, // Mostrar el botón de cancelar
+				confirmButtonColor: "#3085d6", // Color del botón de confirmar
+				cancelButtonColor: "#d33", // Color del botón de cancelar
+				confirmButtonText: "Sí", // Texto del botón de confirmar
+				cancelButtonText: "No", // Texto del botón de cancelar
+			  }).then((result) => {
+				if (result.isConfirmed) {
+				  Swal.fire({
+					text: "Pedido eliminado correctamente.",
+					icon: "success",
+				  });
+				  eliminarPedido(idPedido);
+				}
+			  });
+			}
+		  };
+		  
+
+		  const eliminarPedido = async (idPedido) => {
+			console.log(idPedido);
+			try {
+			  if (idPedido) {
+				const response = await axios.post('http://localhost:4567/frontend/eliminarPedido', { datosId: { idPedido } });
+				console.log(response.data);
+				// Lógica adicional si es necesario
+				obtenerPedidosDePasteles(); // Asumiendo que tienes una función para obtener pedidos, similar a obtenerReservaciones
+			  } else {
+				console.log("El ID del pedido es obligatorio para eliminar.");
+				// Lógica adicional si es necesario
+			  }
+			} catch (error) {
+			  throw error;
+			}
+		  };
+
 	  const [pedidos, setPedidos] = useState([]);
 
 	  const generarPedidos = () => {
@@ -202,7 +252,7 @@ const mostrarAlertaLogOut = () => {
 					  <p>Estatus: {pedido.estatus}</p>
 					  <p>Inscripción: {pedido.inscripcion}</p>
 					  <p>Relleno: {pedido.relleno}</p>
-					  <button className="eliminar-btn" onClick={() => mostrarAlertaEliminarRes(pedido.id_pedido, pedido.nombre_pastel)}>
+					  <button className="eliminar-btn" onClick={() => mostrarAlertaEliminarPedido(pedido.id_pedido, pedido.nombre_pastel,pedido.estatus)}>
 						Eliminar Pedido
 					  </button>
 					</div>

frontend/src/PersPastel1.jsx

@@ -3,6 +3,8 @@ import './PersPastelStyle.css';
 
 import { Button, Select, MenuItem, TextField, Box } from '@mui/material';
 
+import StarRatings from 'react-star-ratings';
+
 import { RiCustomerService2Fill } from "react-icons/ri";
 import { FaUser } from "react-icons/fa";
 import { LuShoppingBasket } from "react-icons/lu";
@@ -32,6 +34,8 @@ function Pastel() {
 
   const [textoTipo, setTextoTipo] = useState("");
 
+  const [textoPrecio, setTextoPrecio] = useState("");
+
 
 
 
@@ -127,16 +131,6 @@ const [datosFormulario, setDatosFormulario] = useState(
       }
     };
 
-    React.useEffect(() => {
-
-      setTextoRelleno("Original");
-      document.addEventListener("click", handleDocumentClick);
-      return () => {
-        document.removeEventListener("click", handleDocumentClick);
-      };
-    }, []);
-
-
     const mostrarAlertaLogOut = () => {
       Swal.fire({
         title: "Cerrar Sesión",
@@ -176,6 +170,13 @@ const [datosFormulario, setDatosFormulario] = useState(
       useEffect(() => {
       // Llamar a la función al cargar la página
       obtenerNombreUsuario();
+      obtenerReseñasPorPastel();
+      mostrarReseñas();
+      setTextoRelleno("Original");
+      document.addEventListener("click", handleDocumentClick);
+      return () => {
+        document.removeEventListener("click", handleDocumentClick);
+      };
       }, []); 
     
       const cerrarSesion = async () => {
@@ -222,7 +223,7 @@ const [datosFormulario, setDatosFormulario] = useState(
 
       const mostrarAlertaReservaExitosa=()=>{
         Swal.fire({
-          title: "Pedido Exitosa",
+          title: "Pedido Exitoso",
           text: "Tu Pedido se ha realizado correctamente.",
           icon: "success",
           button: "Aceptar"
@@ -272,6 +273,8 @@ const [datosFormulario, setDatosFormulario] = useState(
         console.log(textoEncima);
         console.log(textoRelleno);
 
+        
+
         try{
 
           if(nombreUsuario==null){
@@ -280,12 +283,13 @@ const [datosFormulario, setDatosFormulario] = useState(
           }else{
 
             const response = await axios.post('http://localhost:4567/frontend/hacerPedidoPastel1', {
-              textoEncima: textoEncima,
+            textoEncima: textoEncima,
-              textoCantidad: datosPastel.quantity,
+            textoCantidad: datosPastel.quantity,
-              textoRelleno: textoRelleno,
+            textoRelleno: textoRelleno,
-              textoTipo: "Pastel de Fresas",
+            textoTipo: "Pastel de Fresas",
-              textoPrecio:"1000",
+            textoPrecio:"1000",
-            });
+            idPastel: "1"
+          });
 
           console.log(response.data);
           mostrarAlertaReservaExitosa();
@@ -314,6 +318,118 @@ const [datosFormulario, setDatosFormulario] = useState(
       };
 
 
+      const [reseñas, setReseñas] = useState([]);
+      const [datosFormularioReseña, setDatosFormularioReseña] = useState(
+          {contenido: '',
+          estrellas: 5
+      });
+
+
+      const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setDatosFormularioReseña({
+          ...datosFormularioReseña,
+          [name]: value,
+        });
+      };
+
+      const enviarReseña = async (e) => {
+        e.preventDefault();
+        await agregarReseña();
+        await obtenerReseñasPorPastel("1"); // Obtener las reseñas nuevamente para actualizar la lista
+      };
+
+
+      const agregarReseña = async () => {  
+        console.log("Agregando reseña"); 
+        console.log(datosFormularioReseña.contenido);
+        console.log(datosFormularioReseña.estrellas);
+        console.log(nombreUsuario)
+    
+        try{
+            if(nombreUsuario==null){
+                mostrarAlertaReseñaFallidaLogin();
+            }else{
+                const response = await axios.post('http://localhost:4567/frontend/agregarResenia', {
+                    nombreUsuario: nombreUsuario,
+                    idPastel: "1", // Asegúrate de tener el id del pastel
+                    contenido: datosFormularioReseña.contenido,
+                    estrellas: datosFormularioReseña.estrellas,
+                });
+    
+                console.log(response.data);
+                //mostrarAlertaReseñaExitosa();
+                console.log("reseña exitosa");
+                console.log("")    
+                // Limpiar los estados después de agregar la reseña
+                setDatosFormularioReseña({ contenido: "", estrellas: 0 });
+            }
+        }catch(error){
+            console.error("Error al agregar la reseña");
+            throw error;
+        }
+
+             
+    };
+
+
+    const obtenerReseñasPorPastel = async (idPastel) => {
+      try {
+        const response = await axios.post('http://localhost:4567/frontend/obtenerReseniasPorPastel', {
+          idPastel: "1",
+        });
+        console.log("Reseñas obtenidas:", response.data.reseñas);
+        const reseñasTransformadas = response.data.reseñas.map(reseña => ({
+          idReseña: reseña.id_reseña,
+          nombreUsuario: reseña.nombre_usuario,
+          idPastel: reseña.id_pastel,
+          contenido: reseña.contenido,
+          estrellas: reseña.estrellas,
+        }));
+    
+        setReseñas(reseñasTransformadas);
+      } catch (error) {
+        console.error("Error al obtener reseñas:", error);
+      }
+    };
+    
+    const mostrarReseñas = () => {
+      if (!nombreUsuario) {
+        return (
+          <h1 className="IniSesReserva">Inicia Sesión para poder ver las reseñas.</h1>
+        );
+      } else {
+        if (reseñas.length === 0) {
+          return (
+            <h1 className="ReseñaNull">No hay reseñas para este pastel en este momento.</h1>
+          );
+        } else {
+          return (
+            <div className="flex justify-center space-x-4">
+              {reseñas.map(reseña => (
+                <div key={reseña.idReseña} className="customer-review-card">
+                  <div className="customer-review-info">
+                    <img className="customer-review-avatar" src="https://placehold.co/100x100" />
+                    <div>
+                      <div className="customer-review-name">{reseña.nombreUsuario}</div>
+                    </div>
+                  </div>
+                  <div className="customer-review-rating">
+                    {"★".repeat(reseña.estrellas)}{"☆".repeat(5 - reseña.estrellas)}
+                  </div>
+                  <p className="customer-review-content">
+                    {reseña.contenido}
+                  </p>
+                </div>
+              ))}
+            </div>
+          );
+        }
+      }
+    };
+
+
+
 
 
   return (
@@ -459,7 +575,7 @@ const [datosFormulario, setDatosFormulario] = useState(
 
           <div className="container-add-cart">
             <button className="btn-add-to-cart" onClick={hacerPedidoPastel1}>
-              Añadir al carrito
+              Comprar
             </button>
           </div>
 
@@ -477,36 +593,13 @@ const [datosFormulario, setDatosFormulario] = useState(
                 ipsum dolor sit amet consectetur adipisicing elit. Sint autem
                 magni earum est dolorem saepe perferendis repellat ipsam
                 laudantium cum assumenda quidem quam, vero similique? Iusto
-                officiis quod blanditiis iste?
+                officiis quod blanditiis iste?, ipsum dolor sit amet consectetur 
+                adipisicing elit. Sint autem magni earum est dolorem saepe 
+                perferendis repellat ipsa laudantium cum assumenda quidem 
+                quam, vero similique? Iustoofficiis
               </p>
             </div>
           </div>
-
-          <div className="container-additional-information">
-            <div className="title-additional-information">
-              <h4>Información adicional</h4>
-              <i className="fa-solid fa-chevron-down"></i>
-            </div>
-            <div className="text-additional-information hidden">
-              <p>-----------</p>
-            </div>
-          </div>
-
-          <div className="container-reviews">
-            <div className="title-reviews">
-              <h4>Reseñas</h4>
-              <i className="fa-solid fa-chevron-down"></i>
-            </div>
-            <div className="text-reviews hidden">
-              <p>-----------</p>
-            </div>
-          </div>
-
-          <div className="container-social">
-            <span>Compartir</span>
-            
-          </div>
-
         </div>
 
       </main>
@@ -515,24 +608,34 @@ const [datosFormulario, setDatosFormulario] = useState(
 
       <h2 className="customer-reviews-title">Reseñas</h2>
 
-      <div className="customer-reviews-container">
+      <div className="estrellas-reviews-container"> 
-
+      <h1>Calificación:</h1>
-      <div className="flex justify-center space-x-4">
+      <StarRatings
-        <div className="customer-review-card">
+            rating={datosFormularioReseña.estrellas}
-            <div className="customer-review-info">
+            starRatedColor="#4b1e29"
-                <img className="customer-review-avatar" src="https://placehold.co/100x100" alt="John Deo"/>
+            starHoverColor="#8B374A"
-                <div>
+            changeRating={(newRating) => setDatosFormularioReseña({...datosFormularioReseña, estrellas: newRating})}
-                    <div className="customer-review-name">John Deo</div>
+            numberOfStars={5}
-                </div>
+            name='rating'
-            </div>
+            starDimension="30px"
-            <div className="customer-review-rating">
+        />
-                ★★★★★
-            </div>
-            <p className="customer-review-content">
-                Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Asperiores Sint Corporis Voluptate Non Error Obc adhajkhajkdahdjkhsdjkakjas jkdhasjdahdjkadhasj aecati Adipisci A Autem? Similique Animi Quae Impedit Vel Dicta Placeat Ad Temporibus Illo Distinctio. Tenetur!
-            </p>
-        </div>
       </div>
+      <div className="customer-reviews-container">    
+      <div className="reseñas-conteiner">
+          <input className="input-reseñas"
+          type="text"
+          name="contenido"
+          value={datosFormularioReseña.contenido}
+          onChange={handleInputChange}
+          placeholder="Escribe tu reseña aquí"></input>
+
+
+        
+
+          <button className="boton-reseñas" onClick={enviarReseña}>Enviar</button>
+        </div>  
+        {mostrarReseñas()}
+      
       </div>
 
       </div>

frontend/src/PersPastelStyle.css

@@ -203,9 +203,9 @@
 
 .texto-encima {
 	position: absolute;
-	top: 60%;
+	top: 54%;
 	left:34%;
-	max-width: 200px;
+	max-width: 220px;
 	word-wrap: break-word; /* Esta propiedad permite que las palabras se rompan cuando no caben en el contenedor */
     overflow-wrap: break-word;
 	transform: translate(-50%, -50%);
@@ -656,6 +656,12 @@ footer {
  	align-items: center;
 }
 
+.reseñas-conteiner{
+	
+	display: flex;
+	align-items: center;
+}
+
 
 
 /* Estilos para el contenedor principal */
@@ -680,12 +686,14 @@ footer {
 .customer-review-card {/* ajustar según sea necesario */
 	
     border-radius: 1rem;
-	width: 100%;
+	max-width: 100%;
     overflow: hidden;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     padding: 1.5rem;
     background-color: #f9fafb; /* bg-zinc-50 */
 
+	margin-bottom: 3rem ;
+	
 }
 
 /* Estilos para la sección de la imagen y la información del cliente */
@@ -793,3 +801,53 @@ footer {
 }
 
 
+/* ********************************** */
+/*               Reseñas              */
+/* ********************************** */
+
+.boton-reseñas{
+    border: none;
+    color: white;
+    padding: 14px 28px;
+    cursor: pointer;
+	width: 200px;
+    border-radius: 5px;
+    background-color: #8B374A;
+	
+}
+
+.boton-reseñas:hover {
+    background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */
+  }
+  
+  .boton-reseñas:active {
+    transform: scale(0.90); /* Reduce ligeramente el tamaño del botón cuando se hace clic */
+  }
+
+  .input-reseñas{
+    margin-top: 10px;
+    font-size: 16px;
+    margin-bottom: 10px;
+	margin-right: 20px;
+    text-indent: 5px; 
+    width: 100%;
+    height: 40px;    
+}
+
+.reseñas-conteiner{
+	margin-bottom: 5rem;
+}
+
+.star-ratings {
+	margin-top: 1rem;
+	margin-bottom: 1rem;
+   width:335px;
+}
+
+
+.estrellas-reviews-container{
+	background-color: #fff;
+	margin-left: 35.5rem;
+	margin-right: 35.5rem;
+	position: relative;
+}