From dbac3ecfb8d1b19aeb978468171687d6ac33375b Mon Sep 17 00:00:00 2001
From: Sergio Brenes <brenes93@hotmail.es>
Date: Mon, 17 Mar 2025 16:50:52 +0000
Subject: [PATCH 1/3] Seleccion por tipo de animal en home

---
 .../{3388104734f6_.py => feadc78f5875_.py}    |   6 +-
 src/front/js/component/navbar.js              |  38 ++---
 src/front/js/layout.js                        |  13 +-
 src/front/js/pages/home.js                    | 139 ++++++++++--------
 src/front/js/pages/perfilUsuario.js           |   9 +-
 5 files changed, 105 insertions(+), 100 deletions(-)
 rename migrations/versions/{3388104734f6_.py => feadc78f5875_.py} (97%)

diff --git a/migrations/versions/3388104734f6_.py b/migrations/versions/feadc78f5875_.py
similarity index 97%
rename from migrations/versions/3388104734f6_.py
rename to migrations/versions/feadc78f5875_.py
index 75a591d58f..9c5c3aa9d9 100644
--- a/migrations/versions/3388104734f6_.py
+++ b/migrations/versions/feadc78f5875_.py
@@ -1,8 +1,8 @@
 """empty message
 
-Revision ID: 3388104734f6
+Revision ID: feadc78f5875
 Revises: 
-Create Date: 2025-03-17 11:09:47.021713
+Create Date: 2025-03-17 15:57:34.280574
 
 """
 from alembic import op
@@ -10,7 +10,7 @@
 
 
 # revision identifiers, used by Alembic.
-revision = '3388104734f6'
+revision = 'feadc78f5875'
 down_revision = None
 branch_labels = None
 depends_on = None
diff --git a/src/front/js/component/navbar.js b/src/front/js/component/navbar.js
index 948de9caf6..dc7fb1488c 100755
--- a/src/front/js/component/navbar.js
+++ b/src/front/js/component/navbar.js
@@ -6,36 +6,27 @@ import { CiSearch } from "react-icons/ci";
 import { Context } from "../store/appContext";
 import { FaUserCircle, FaShoppingCart, FaSignOutAlt } from "react-icons/fa";
 
-export const Navbar = () => {
+export const Navbar = ({ setActiveCategory }) => {  // Recibimos setActiveCategory como prop
     const { store, actions } = useContext(Context);
-    const { user, cart } = store; // Obtenemos el usuario del store
+    const { user, cart } = store;
+    const cartItemCount = cart.length;
 
-	useEffect(() => {
-		console.log("Usuario en navbar:", user);
-	}, [user, cart]);
-
-     // Contar la cantidad de productos en el carrito
-     const cartItemCount = cart.length; 
+    if (typeof setActiveCategory !== "function") {
+        console.error("⚠️ Error: setActiveCategory no es una función en Navbar.js.");
+        return null; // Evitamos que falle si `setActiveCategory` no es válida
+    }
 
     return (
         <nav className="navbar navbar-expand-lg shadow-lg" style={{ 
             background: "linear-gradient(180deg, #FBD989 5%, #F4C4A4 40%, #EC955B 95%)",
             padding: "15px 30px",
-            borderRadius: "0px"
         }}>
             <div className="container-fluid">
-                <Link to="/" className="navbar-brand d-flex align-items-center">
-                    <img src={logo} alt="Logo" style={{ 
-                        height: "60px", 
-                        border: "3px solid #000", 
-                        borderRadius: "10px", 
-                        padding: "3px" 
-                    }} />
+                <Link to="/" className="navbar-brand d-flex align-items-center" onClick={() => setActiveCategory(null)}>
+                    <img src={logo} alt="Logo" style={{ height: "60px", border: "3px solid #000", borderRadius: "10px", padding: "3px" }} />
                     <span className="fw-bold text-dark" style={{ fontSize: "1.5rem", marginLeft: "10px" }}>Pupper Eats</span>
                 </Link>
-                <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-                    <span className="navbar-toggler-icon"></span>
-                </button>
+
                 <div className="collapse navbar-collapse" id="navbarSupportedContent">
                     <form className="d-flex me-auto" role="search">
                         <input className="form-control me-2" type="search" placeholder="Buscar comida..." aria-label="Search" style={{ borderRadius: "8px", height: "30px", width: "250px", fontSize: "1.1rem" }} />
@@ -43,20 +34,21 @@ export const Navbar = () => {
                             <CiSearch size={12} />
                         </button>
                     </form>
+
                     <ul className="navbar-nav mx-auto mb-2 mb-lg-0">
                         <li className="nav-item m-2">
-                            <a className="nav-link fw-semibold" href="#">Caninos</a>
+                            <button className="nav-link fw-semibold btn btn-link text-dark" onClick={() => setActiveCategory("dogFood")}>Caninos</button>
                         </li>
                         <li className="nav-item m-2">
-                            <a className="nav-link fw-semibold" href="#">Felinos</a>
+                            <button className="nav-link fw-semibold btn btn-link text-dark" onClick={() => setActiveCategory("catFood")}>Felinos</button>
                         </li>
                         <li className="nav-item m-2">
-                            <a className="nav-link fw-semibold" href="#">Exóticos</a>
+                            <button className="nav-link fw-semibold btn btn-link text-dark" onClick={() => setActiveCategory("exoticFood")}>Exóticos</button>
                         </li>
                     </ul>
+
                     <ul className="navbar-nav d-flex align-items-center gap-2">
                         {user ? (
-                            // Si el usuario está autenticado, mostramos Perfil y Cesta
                             <>
                                 <Link to="/perfilUsuario" className="text-dark text-decoration-none d-flex align-items-center">
                                     <FaUserCircle size={24} className="me-1" />
diff --git a/src/front/js/layout.js b/src/front/js/layout.js
index 31ab008d86..5af00d21a4 100755
--- a/src/front/js/layout.js
+++ b/src/front/js/layout.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
 import ScrollToTop from "./component/scrollToTop";
 import { BackendURL } from "./component/backendURL";
@@ -24,6 +24,7 @@ import { CarritoPago } from "./pages/CarritoPago";
 //create your first component
 const Layout = () => {
     const basename = process.env.BASENAME || "";
+    const [activeCategory, setActiveCategory] = useState(null);
 
     if (!process.env.BACKEND_URL || process.env.BACKEND_URL === "") return <BackendURL />;
 
@@ -32,7 +33,7 @@ const Layout = () => {
             <ScrollToTop>
                 <Routes>
                     {/* Colocamos useLocation dentro de Routes */}
-                    <Route path="*" element={<PageWithNavbar />} />
+                    <Route path="*" element={<PageWithNavbar activeCategory={activeCategory} setActiveCategory={setActiveCategory} />} />
                 </Routes>
                 <Footer />
             </ScrollToTop>
@@ -41,15 +42,15 @@ const Layout = () => {
 };
 
 // Nuevo componente para manejar el Navbar
-const PageWithNavbar = () => {
+const PageWithNavbar = ({ activeCategory, setActiveCategory }) => {
     const location = useLocation(); 
-    const hideNavbarRoutes = ["/perfilUsuario","/loginSignup"];  // Rutas donde ocultamos el Navbar
+    const hideNavbarRoutes = ["/perfilUsuario", "/loginSignup"];   // Rutas donde ocultamos el Navbar
 
     return (
         <>
-            {!hideNavbarRoutes.includes(location.pathname) && <Navbar />}
+            {!hideNavbarRoutes.includes(location.pathname)  && <Navbar setActiveCategory={setActiveCategory} />}
             <Routes>
-                <Route element={<Home />} path="/" />
+                <Route element={<Home activeCategory={activeCategory} />} path="/" />
                 <Route element={<VistaProducto />} path="/vista-producto/:id" />
                 <Route element={<LoginSignup />} path="/loginSignup" />
                 <Route element={<VistaMascota />} path="/pets/:id" />
diff --git a/src/front/js/pages/home.js b/src/front/js/pages/home.js
index 232ce0747f..f475928f6e 100755
--- a/src/front/js/pages/home.js
+++ b/src/front/js/pages/home.js
@@ -4,7 +4,7 @@ import { Context } from "../store/appContext";
 import { Card } from "../component/card";
 import "../../styles/home.css";
 
-export const Home = () => {
+export const Home = ({ activeCategory }) => { 
 	const { store, actions } = useContext(Context);
 
 	useEffect(() => {
@@ -14,69 +14,86 @@ export const Home = () => {
 	}, []);
 
 	return (
-		<div className="container-fluid p-0" style={{ 
-			background: "linear-gradient(to bottom, #FCE5CD, #FFFFFF)", 
-			minHeight: "100vh", 
-			paddingBottom: "50px" 
-		}}>
-			<div className="text-center mb-4" style={{ boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)" }}> 
-				<img 
-					src={logo} 
-					alt="Banner" 
-					style={{ maxHeight: "350px", width: "80%", objectFit: "cover" }} 
-				/>
-			</div>
-
-			<div className="sección perros m-5 p-4 rounded" style={{ backgroundColor: "#FDF3E7", boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)" }}>
-				<h3 className="text-primary border-bottom pb-2">Productos top para perros</h3>
-				<div className="row">
-					{store.dogFood.map((dogFood, index) => (
-						<Card 
-							name={dogFood.name} 
-							category={"dogFood"} 
-							id={dogFood.id} 
-							description={dogFood.description}
-							price={dogFood.price}
-							url={dogFood.url}
-							key={index}
-						/>
-					))}
+		<>
+			<div className="container-fluid p-0" style={{ 
+				background: "linear-gradient(to bottom, #FCE5CD, #FFFFFF)", 
+				minHeight: "100vh", 
+				paddingBottom: "50px" 
+			}}>
+				<div className="text-center mb-4">
+					<img 
+						src={logo} 
+						alt="Banner" 
+						style={{ maxHeight: "350px", width: "80%", objectFit: "cover" }} 
+					/>
 				</div>
-			</div>
 
-			<div className="sección gatos m-5 p-4 rounded" style={{ backgroundColor: "#FAE0C3", boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)" }}>
-				<h3 className="text-warning border-bottom pb-2">Productos top para gatos</h3>
-				<div className="row">
-					{store.catFood.map((catFood, index) => (
-						<Card 
-							name={catFood.name} 
-							category={"catFood"} 
-							id={catFood.id} 
-							description={catFood.description}
-							price={catFood.price}
-							url={catFood.url}
-							key={index}
-						/>
-					))}
-				</div>
-			</div>
+				{/* 📌 Si no hay categoría activa, mostramos todos los productos */}
+				{activeCategory === null && (
+					<>
+						<div className="sección perros m-5 p-4 rounded" style={{ backgroundColor: "#FDF3E7" }}>
+							<h3 className="text-primary border-bottom pb-2">Productos top para perros</h3>
+							<div className="row">
+								{store.dogFood.map((dogFood, index) => (
+									<Card key={index} {...dogFood} />
+								))}
+							</div>
+						</div>
 
-			<div className="sección exóticos m-5 p-4 rounded" style={{ backgroundColor: "#E0F7E7", boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)" }}>
-				<h3 className="text-success border-bottom pb-2">Productos top para animales exóticos</h3>
-				<div className="row">
-					{store.exoticFood.map((exoticFood, index) => (
-						<Card 
-							name={exoticFood.name} 
-							category={"exoticFood"} 
-							id={exoticFood.id} 
-							description={exoticFood.description}
-							price={exoticFood.price}
-							url={exoticFood.url}
-							key={index}
-						/>
-					))}
-				</div>
+						<div className="sección gatos m-5 p-4 rounded" style={{ backgroundColor: "#FAE0C3" }}>
+							<h3 className="text-warning border-bottom pb-2">Productos top para gatos</h3>
+							<div className="row">
+								{store.catFood.map((catFood, index) => (
+									<Card key={index} {...catFood} />
+								))}
+							</div>
+						</div>
+
+						<div className="sección exóticos m-5 p-4 rounded" style={{ backgroundColor: "#E0F7E7" }}>
+							<h3 className="text-success border-bottom pb-2">Productos top para animales exóticos</h3>
+							<div className="row">
+								{store.exoticFood.map((exoticFood, index) => (
+									<Card key={index} {...exoticFood} />
+								))}
+							</div>
+						</div>
+					</>
+				)}
+
+				{/* 📌 Si el usuario selecciona una categoría, solo mostramos esa */}
+				{activeCategory === "dogFood" && (
+					<div className="sección perros m-5 p-4 rounded" style={{ backgroundColor: "#FDF3E7" }}>
+						<h3 className="text-primary border-bottom pb-2">Productos top para perros</h3>
+						<div className="row">
+							{store.dogFood.map((dogFood, index) => (
+								<Card key={index} {...dogFood} />
+							))}
+						</div>
+					</div>
+				)}
+
+				{activeCategory === "catFood" && (
+					<div className="sección gatos m-5 p-4 rounded" style={{ backgroundColor: "#FAE0C3" }}>
+						<h3 className="text-warning border-bottom pb-2">Productos top para gatos</h3>
+						<div className="row">
+							{store.catFood.map((catFood, index) => (
+								<Card key={index} {...catFood} />
+							))}
+						</div>
+					</div>
+				)}
+
+				{activeCategory === "exoticFood" && (
+					<div className="sección exóticos m-5 p-4 rounded" style={{ backgroundColor: "#E0F7E7" }}>
+						<h3 className="text-success border-bottom pb-2">Productos top para animales exóticos</h3>
+						<div className="row">
+							{store.exoticFood.map((exoticFood, index) => (
+								<Card key={index} {...exoticFood} />
+							))}
+						</div>
+					</div>
+				)}
 			</div>
-		</div>
+		</>
 	);
 };
\ No newline at end of file
diff --git a/src/front/js/pages/perfilUsuario.js b/src/front/js/pages/perfilUsuario.js
index 6f0a4580b1..70cff7e134 100644
--- a/src/front/js/pages/perfilUsuario.js
+++ b/src/front/js/pages/perfilUsuario.js
@@ -30,13 +30,8 @@ export const PerfilUsuario = () => {
       {/* Header */}
       <div className="d-flex justify-content-between align-items-center mb-4">
         <div>
-          <Link to="/" className="navbar-brand d-flex align-items-center">
-                              <img src={logo} alt="Logo" style={{ 
-                                  height: "60px", 
-                                  border: "3px solid #000", 
-                                  borderRadius: "10px", 
-                                  padding: "3px" 
-                              }} />
+          <Link to="/" className="navbar-brand d-flex align-items-center" onClick={() => setActiveCategory(null)}>
+                              <img src={logo} alt="Logo" style={{ height: "60px", border: "3px solid #000", borderRadius: "10px", padding: "3px" }} />
                               <span className="fw-bold text-dark" style={{ fontSize: "1.5rem", marginLeft: "10px" }}>Pupper Eats</span>
                           </Link>
           <button className="btn btn-warning me-2">🛒 Carrito</button>

From 32d98197b2e54d13893a3e2e9ed6a9aaaa95df4d Mon Sep 17 00:00:00 2001
From: BeaNovo <168178819+BeaNovo@users.noreply.github.com>
Date: Tue, 18 Mar 2025 16:35:33 +0000
Subject: [PATCH 2/3] =?UTF-8?q?accesorios=20a=C3=B1adidos=20en=20home?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{feadc78f5875_.py => 9c4144458f3c_.py}    |  6 +--
 src/api/commands.py                           | 54 ++++++++++++++-----
 src/front/js/pages/home.js                    | 18 +++++++
 src/front/js/store/flux.js                    | 25 +++++++++
 4 files changed, 87 insertions(+), 16 deletions(-)
 rename migrations/versions/{feadc78f5875_.py => 9c4144458f3c_.py} (97%)

diff --git a/migrations/versions/feadc78f5875_.py b/migrations/versions/9c4144458f3c_.py
similarity index 97%
rename from migrations/versions/feadc78f5875_.py
rename to migrations/versions/9c4144458f3c_.py
index 9c5c3aa9d9..56ba2e607b 100644
--- a/migrations/versions/feadc78f5875_.py
+++ b/migrations/versions/9c4144458f3c_.py
@@ -1,8 +1,8 @@
 """empty message
 
-Revision ID: feadc78f5875
+Revision ID: 9c4144458f3c
 Revises: 
-Create Date: 2025-03-17 15:57:34.280574
+Create Date: 2025-03-18 16:22:26.061631
 
 """
 from alembic import op
@@ -10,7 +10,7 @@
 
 
 # revision identifiers, used by Alembic.
-revision = 'feadc78f5875'
+revision = '9c4144458f3c'
 down_revision = None
 branch_labels = None
 depends_on = None
diff --git a/src/api/commands.py b/src/api/commands.py
index 5a1a270ccf..3023075155 100644
--- a/src/api/commands.py
+++ b/src/api/commands.py
@@ -1,4 +1,6 @@
 
+
+
 import click
 from api.models import db, User, Food, Accessories, Pet
 from flask_bcrypt import Bcrypt 
@@ -47,7 +49,7 @@ def insert_data_catfood():
         catfood.animal_type = "gato"
         catfood.age = "adulto"
         catfood.pathologies = "hipoalergénico"
-        catfood.url = ""
+        catfood.url = "https://era2vrmzk5n.exactdn.com/wp-content/uploads/2022/09/Pienso-15K-croqPEZ-Ayurveda-gato-kasaludintegral-1080x1080pix.jpg?strip=all&lossy=1&w=648&ssl=1"
         db.session.add(catfood)
         db.session.commit()
 
@@ -61,6 +63,7 @@ def insert_data_catfood():
         catfood.animal_type = "gato"
         catfood.age = "adulto"
         catfood.pathologies = "diabético"
+        catfood.url = "https://bixoto.com/media/catalog/product/cache/2e45ba69d70625e0fc47dbc2d34862e1/M/Y/MYNKvuY-920-2042_webp.png"
         db.session.add(catfood)
         db.session.commit()
 
@@ -74,6 +77,7 @@ def insert_data_catfood():
         catfood.animal_type = "gato"
         catfood.age = "cachorro"
         catfood.pathologies = ""
+        catfood.url = "https://www.tiendanimal.es/dw/image/v2/BDLQ_PRD/on/demandware.static/-/Sites-kiwoko-master-catalog/default/dw55de3cf2/images/ownat_prime_gf_kitten_OWN31463.jpg?sw=780&sh=780&sm=fit&q=85"
         db.session.add(catfood)
         db.session.commit()
 
@@ -87,6 +91,7 @@ def insert_data_catfood():
         catfood.animal_type = "gato"
         catfood.age = "senior"
         catfood.pathologies = "renal"
+        catfood.url = "https://media.zooplus.com/bilder/2/400/279797_pla_natural_greatness_diet_vet_renal_oxalate_5kg_hs_01_2.jpg"
         db.session.add(catfood)
         db.session.commit()
 
@@ -100,6 +105,7 @@ def insert_data_catfood():
         catfood.animal_type = "gato"
         catfood.age = "adulto"
         catfood.pathologies = "obesidad"
+        catfood.url = "https://www.tiendanimal.es/dw/image/v2/BDLQ_PRD/on/demandware.static/-/Sites-kiwoko-master-catalog/default/dwfc3b7ec1/images/pienso_gato_criadores_dietetic_obesity_CRD8967_M.jpg?sw=780&sh=780&sm=fit&q=85"
         db.session.add(catfood)
         db.session.commit()
         
@@ -109,16 +115,17 @@ def insert_data_catfood():
     @app.cli.command("insert_data_dogfood")
     def insert_data_food():
         dogfood = Food()
-        dogfood.name = "Special Care hepatic/renal"
-        dogfood.brand="nfnatcane"
-        dogfood.description = "asd"
-        dogfood.ingredients = "ads"
-        dogfood.price = 1.
+        dogfood.name = " Veterinary Diet Renal pienso para perros"
+        dogfood.brand="Concept for Life "
+        dogfood.description = "Pienso dietético para perros adultos con insuficiencia renal crónica. Bajo en fósforo y proteína para reducir la formación de cálculos de oxalato y de urato. Con propiedades alcalinizantes de la orina"
+        dogfood.ingredients = "Arroz, 31,5 % maíz, grasa de ave, 4,7 % proteína de ave (rica en pollo, en parte deshidratada e hidrolizada), proteína de maíz, pulpa de remolacha deshidratada (desazucarada), gelatina (hidrolizada, HDP*), linaza, aceite de pescado, 1,5 % hígado de pollo (en parte deshidratado e hidrolizado, HDP*), aceite de girasol, carbonato de calcio, cloruro sódico, cloruro potásico, huevo (deshidratado), lignocelulosa, 0,3 % paredes celulares de levadura (ricas en manano-oligosacáridos y en beta-glucanos), 0,2 % citrato de potasio, inulina de achicoria, harina de algas (rica en DHA**)."
+        dogfood.price = 7.99
         dogfood.pathologies = "renal"
         dogfood.animal_type = "perro"
         dogfood.age = "senior"
         dogfood.size = "medium"
-        dogfood.weight = 12.
+        dogfood.weight = 1.
+        dogfood.url = "https://media.zooplus.com/bilder/9/400/cfl_dog_renal_1kg_1000x1000_9.jpg"
         db.session.add(dogfood)
         db.session.commit()
 
@@ -133,6 +140,7 @@ def insert_data_food():
         dogfood.age = "cachorro"
         dogfood.size = "grande"
         dogfood.weight = 1.
+        dogfood.url = "https://www.tiendanimal.es/dw/image/v2/BDLQ_PRD/on/demandware.static/-/Sites-kiwoko-master-catalog/default/dw9b40881f/images/pienso_perros_ownat_care_digestive_OWN031569.jpg.jpg?sw=780&sh=780&sm=fit&q=85"
         db.session.add(dogfood)
         db.session.commit()
 
@@ -142,12 +150,13 @@ def insert_data_food():
         dogfood.brand="Virbac W1 Veterinary HPM"
         dogfood.description = "El alimento dietético para perros tiene un bajo contenido energético y de azúcares totales. Es bajo en hidratos de carbono y se caracteriza por un índice glucémico bajo. En cambio, Virbac Veterinary HPM Dog Weight Loss & Diabetes W1 proporciona a su mascota abundante fibra bruta, que favorece una agradable sensación de saciedad. La receta no contiene trigo, gluten, soja ni carne de vacuno, por lo que es bien tolerada por muchos perros."
         dogfood.ingredients = "Proteínas deshidratadas de cerdo y de ave, fécula de patata, lignocelulosa, hidrolizado de proteínas de cerdo y de ave, cáscaras de judías, grasa animal, minerales, linaza, pulpa de remolacha deshidratada, fibra de psyllium"
-        dogfood.price = 12.
+        dogfood.price = 12.99
         dogfood.pathologies = "diabetes"
         dogfood.animal_type = "perro"
         dogfood.age = "adulto"
         dogfood.size = ""
-        dogfood.weight = 12.
+        dogfood.weight = 1.5
+        dogfood.url = "https://www.tiendanimal.es/dw/image/v2/BDLQ_PRD/on/demandware.static/-/Sites-kiwoko-master-catalog/default/dw6af74272/images/virbac_pienso_perros_hpm_weight_loss_diabetes_VIRAD360106.jpg?sw=780&sh=780&sm=fit&q=85"
         db.session.add(dogfood)
         db.session.commit()
 
@@ -177,6 +186,7 @@ def insert_data_food():
         dogfood.age = "adulto"
         dogfood.size = "pequeño"
         dogfood.weight = 1.
+        dogfood.url = "https://media.zooplus.com/bilder/7/400/pla_163496_cfl_dog_sterilised_mini_1kg_7.jpg"
         db.session.add(dogfood)
         db.session.commit()
       
@@ -196,6 +206,7 @@ def insert_data_exoticfood():
         exoticfood.animal_type = "exótico"
         exoticfood.age = "adulto"
         exoticfood.weight = 1.5
+        exoticfood.url = "https://media.zooplus.com/bilder/7/400/547507_pla_bunny_kaninchentraum_special_edition_harmony_1_5k_hs_01_7.jpg"
         db.session.add(exoticfood)
         db.session.commit()
 
@@ -209,6 +220,7 @@ def insert_data_exoticfood():
         exoticfood.animal_type = "exótico"
         exoticfood.age = "senior"
         exoticfood.weight = 5.
+        exoticfood.url = "https://media.zooplus.com/bilder/0/400/73777_pla_beaphar_care_kaninchen_5kg_hs_1_2_0.jpg"
         db.session.add(exoticfood)
         db.session.commit()
 
@@ -222,6 +234,7 @@ def insert_data_exoticfood():
         exoticfood.animal_type = "exótico"
         exoticfood.age = "cachorro"
         exoticfood.weight = 2.3
+        exoticfood.url = "https://d7rh5s3nxmpy4.cloudfront.net/CMP9365/8/18407_347074-D.jpg"
         db.session.add(exoticfood)
         db.session.commit()
         
@@ -235,6 +248,7 @@ def insert_data_exoticfood():
         exoticfood.animal_type = "exótico"
         exoticfood.age = "senior"
         exoticfood.weight = 2.3
+        exoticfood.url = "https://media.zooplus.com/bilder/5/400/28140_pla_jrfarm_grainless_complete_zwergkaninchen_5.jpg"
         db.session.add(exoticfood)
         db.session.commit()
     
@@ -247,7 +261,7 @@ def insert_data_accessories():
         accessories.price = 7.99
         accessories.animal_type = "perro"
         accessories.pathologies = ""
-        accessories.url = ""
+        accessories.url = "https://media.zooplus.com/bilder/4/400/518156_pla_tiaki_security_collar_s_fg_5107_4.jpg"
         db.session.add(accessories)
         db.session.commit()
 
@@ -258,7 +272,7 @@ def insert_data_accessories():
         accessories.price = 35.99
         accessories.animal_type = "gato"
         accessories.pathologies = ""
-        accessories.url = ""
+        accessories.url = "https://media.zooplus.com/bilder/3/400/modern_living_kratzm_bel_f_r_katzen_zur_wandmontage_hs_01_3.jpg"
         db.session.add(accessories)
         db.session.commit()
 
@@ -269,7 +283,7 @@ def insert_data_accessories():
         accessories.price = 199.99
         accessories.animal_type = "perro"
         accessories.pathologies = ""
-        accessories.url = ""
+        accessories.url = "https://www.ferplast.es/cdn/shop/files/1-0180017573_x620.jpg?v=1728917798"
         db.session.add(accessories)
         db.session.commit()
 
@@ -280,7 +294,7 @@ def insert_data_accessories():
         accessories.price = 7.99
         accessories.animal_type = "exótico"
         accessories.pathologies = ""
-        accessories.url = ""
+        accessories.url = "https://media.zooplus.com/bilder/7/400/451140_pla_tiaki_intelligence_toy_carrot_patch_fg_9772_7.jpg"
         db.session.add(accessories)
         db.session.commit()
     
@@ -358,3 +372,17 @@ def insert_data_pet():
 
     
 
+
+
+
+    
+
+    
+
+
+
+
+    
+
+    
+
diff --git a/src/front/js/pages/home.js b/src/front/js/pages/home.js
index f475928f6e..0a62cf18af 100755
--- a/src/front/js/pages/home.js
+++ b/src/front/js/pages/home.js
@@ -11,6 +11,7 @@ export const Home = ({ activeCategory }) => {
 		actions.getDogFood();
 		actions.getCatFood();
 		actions.getExoticFood();
+		actions.getAccessories();
 	}, []);
 
 	return (
@@ -93,6 +94,23 @@ export const Home = ({ activeCategory }) => {
 						</div>
 					</div>
 				)}
+
+				{/* <div className="sección accesorios m-5 p-4 rounded" style={{ backgroundColor: "#E0F7E7", boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)" }}>
+				<h3 className="text-success border-bottom pb-2">Acesorios top para tu mascota</h3>
+				<div className="row">
+					{store.accessories.map((accessories, index) => (
+						<Card 
+							name={accessories.name} 
+							category={"accessories"} 
+							id={accessories.id} 
+							description={accessories.description}
+							price={accessories.price}
+							url={accessories.url}
+							key={index}
+						/>
+					))}
+				</div>
+			</div> */}
 			</div>
 		</>
 	);
diff --git a/src/front/js/store/flux.js b/src/front/js/store/flux.js
index 4d65162df0..ddab9bdac8 100755
--- a/src/front/js/store/flux.js
+++ b/src/front/js/store/flux.js
@@ -204,6 +204,31 @@ const getState = ({ getStore, getActions, setStore }) => {
 			}
 			,
 
+			getAccessories: async () => {
+				const myHeaders = new Headers();
+				myHeaders.append("Cookie", ".Tunnels.Relay.WebForwarding.Cookies=CfDJ8Cs4yarcs6pKkdu0hlKHsZuqp5-e7T1vVCCdEQ0C1wStd1vPjajnZKjnPSA5Hq6rqD8KnBNHzrxCrSBqwnlunA0rkm36DsRzpvbpKLHVNklCfX8GBsMZKstrANOENBUzsSi1PBxW5_TibtPeRePzgNe5pBHuYx5F-1zm7-FoplLOZKZUFeRu1ua1DgiPeOiqvYSnKMQISiWoLb64DlQlSfXIGkFzVDFsFNPJ5lN-NHmI9dQ4O8b8EtoLAvXug1GQ5WkthHTcarTf_lXY5fcoEJbvhObGkUw7LC07jfKn2BTk27bZGx_F2kXNKq2N32CJ_46MMiulhV3sVpuuBUenZ-P7eLMcyMYuz6LcVrybPlrmHBiCnIbgcmgn-jnL-P3rcWL49L8RpPU84Ul4CaOZTFZ7eFCUqa1m1YKjX21YEdJlEm8fyYpFYcFp_9mGziKaxChcel7DevH4J4NV-E1mEUnQP-wDBMVq1IH0wdb4_HSnZ8aBhyyb8GvuEuLIhlH4soY8xtKNlaM73kynXCEhJ2OH-eKM6XIkWQHVIENwRoWzjj8G-8jQcJjz1Clyo9lMuFB98AWfsJgqe_PO7PgIw_Ms8_hRKyGG_aej9UuBo8rS-u4vTGaj5v_1vp6_PrZ-qEp8iyGGK_0OERl5OH0S3_mcXOd1wQcpFQ76RR6qtXqju2G8WkN9e3xC9XvP3SWVDIc5195fVj_1gRGLUCC20Uu5uPC0yzuE2X_TrcjKq0-SeWiyVIphc1T7AoJ2PvAu74js-66UPPcjXqoQvGXCzwrwhPdzXAp8n6sVwGcfRthrk2AOD4U8XJz68aBA5aRx77sqsMKKFIbCRXjRfOcAoa214qR5Oz7-nnKj1dII9Rx_g9ZD7SS_Mjm5Sk3M_Mr0zZNDzN7YWd_j3WhN9Gvr1MOeU6aFKssi2wzLgyNAVHNaXxjKms7cV1bDDwVzfYcHa6L-oLvvPk1FRmoRsD4J_3I7TgE1iO2LOtWD4ZLYilAcmmiHh3OPqNpQrKkl5uK2zg");
+
+				const requestOptions = {
+					method: "GET",
+					headers: myHeaders,
+					redirect: "follow"
+				};
+
+				try {
+					const response = await fetch(process.env.BACKEND_URL + "/api/accessories", requestOptions);
+					if (!response.ok) {
+						throw new Error('Network response was not ok');
+					}
+
+					const data = await response.json();
+					setStore({ accessories: data });
+				} catch (error) {
+					console.error('Error fetching accessories:', error);
+				}
+			}
+			,
+
+
 			getUser: async () => {
 				try {
 					const token = localStorage.getItem("token");

From 3a6faa6583d57ff9e5ce5ac4adcdc951ede65532 Mon Sep 17 00:00:00 2001
From: Sergio Brenes <brenes93@hotmail.es>
Date: Tue, 18 Mar 2025 17:03:27 +0000
Subject: [PATCH 3/3] =?UTF-8?q?categoria=20accesorio=20a=C3=B1adida?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{9c4144458f3c_.py => 3839ad7a9bb7_.py}    |  6 ++--
 src/front/js/component/navbar.js              |  3 ++
 src/front/js/pages/home.js                    | 35 +++++++++++--------
 src/front/js/store/flux.js                    |  1 +
 4 files changed, 27 insertions(+), 18 deletions(-)
 rename migrations/versions/{9c4144458f3c_.py => 3839ad7a9bb7_.py} (97%)

diff --git a/migrations/versions/9c4144458f3c_.py b/migrations/versions/3839ad7a9bb7_.py
similarity index 97%
rename from migrations/versions/9c4144458f3c_.py
rename to migrations/versions/3839ad7a9bb7_.py
index 56ba2e607b..afc3f4b4e0 100644
--- a/migrations/versions/9c4144458f3c_.py
+++ b/migrations/versions/3839ad7a9bb7_.py
@@ -1,8 +1,8 @@
 """empty message
 
-Revision ID: 9c4144458f3c
+Revision ID: 3839ad7a9bb7
 Revises: 
-Create Date: 2025-03-18 16:22:26.061631
+Create Date: 2025-03-18 16:41:27.351809
 
 """
 from alembic import op
@@ -10,7 +10,7 @@
 
 
 # revision identifiers, used by Alembic.
-revision = '9c4144458f3c'
+revision = '3839ad7a9bb7'
 down_revision = None
 branch_labels = None
 depends_on = None
diff --git a/src/front/js/component/navbar.js b/src/front/js/component/navbar.js
index dc7fb1488c..0e013c1fa0 100755
--- a/src/front/js/component/navbar.js
+++ b/src/front/js/component/navbar.js
@@ -45,6 +45,9 @@ export const Navbar = ({ setActiveCategory }) => {  // Recibimos setActiveCatego
                         <li className="nav-item m-2">
                             <button className="nav-link fw-semibold btn btn-link text-dark" onClick={() => setActiveCategory("exoticFood")}>Exóticos</button>
                         </li>
+                        <li className="nav-item m-2">
+                            <button className="nav-link fw-semibold btn btn-link text-dark" onClick={() => setActiveCategory("accesories")}>Accesorios</button>
+                        </li>
                     </ul>
 
                     <ul className="navbar-nav d-flex align-items-center gap-2">
diff --git a/src/front/js/pages/home.js b/src/front/js/pages/home.js
index 0a62cf18af..9863bfe6d1 100755
--- a/src/front/js/pages/home.js
+++ b/src/front/js/pages/home.js
@@ -58,6 +58,15 @@ export const Home = ({ activeCategory }) => {
 								))}
 							</div>
 						</div>
+						<div className="sección accesorios m-5 p-4 rounded" style={{ backgroundColor: "#E0F7E7", boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)" }}>
+							<h3 className="text-success border-bottom pb-2">Acesorios top para tu mascota</h3>
+						<div className="row">
+							{store.accessories.map((accessories, index) => (
+								<Card key={index} {...accessories} />
+						
+							))}
+						</div>	
+						</div>
 					</>
 				)}
 
@@ -95,22 +104,18 @@ export const Home = ({ activeCategory }) => {
 					</div>
 				)}
 
-				{/* <div className="sección accesorios m-5 p-4 rounded" style={{ backgroundColor: "#E0F7E7", boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)" }}>
-				<h3 className="text-success border-bottom pb-2">Acesorios top para tu mascota</h3>
-				<div className="row">
-					{store.accessories.map((accessories, index) => (
-						<Card 
-							name={accessories.name} 
-							category={"accessories"} 
-							id={accessories.id} 
-							description={accessories.description}
-							price={accessories.price}
-							url={accessories.url}
-							key={index}
-						/>
-					))}
+				{activeCategory === "accesories" && (
+				<div className="sección accesorios m-5 p-4 rounded" style={{ backgroundColor: "#E0F7E7", boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)" }}>
+					<h3 className="text-success border-bottom pb-2">Acesorios top para tu mascota</h3>
+					<div className="row">
+						{store.accessories.map((accessories, index) => (
+						<Card key={index} {...accessories} />
+				
+						))}
+					</div>	
 				</div>
-			</div> */}
+				)}
+
 			</div>
 		</>
 	);
diff --git a/src/front/js/store/flux.js b/src/front/js/store/flux.js
index ddab9bdac8..b547140c77 100755
--- a/src/front/js/store/flux.js
+++ b/src/front/js/store/flux.js
@@ -19,6 +19,7 @@ const getState = ({ getStore, getActions, setStore }) => {
 			dogFood: [],
 			catFood: [],
 			exoticFood: [],
+			accessories: [],
 			productos:[],
 			cart:[],
 			pets: []