From 51f49a2b7d7df80482eb0b93205435c648940569 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Thu, 14 Aug 2025 15:26:33 +0200
Subject: [PATCH 01/21] edit password functionality and page

---
 example copy.env                   |  8 ++++++++
 pages/editar/perfil/contrasena.vue | 27 ++++++++++++++++++++++-----
 pages/editar/perfil/index.vue      |  5 ++---
 3 files changed, 32 insertions(+), 8 deletions(-)
 create mode 100644 example copy.env

diff --git a/example copy.env b/example copy.env
new file mode 100644
index 0000000..3941d42
--- /dev/null
+++ b/example copy.env	
@@ -0,0 +1,8 @@
+API = 'http://0.0.0.0:8000/'
+API_V1 = '/api/v1/'
+BASE_URL= $API$API_V1
+GOOGLE_CLIENT_ID='1076928279923-s6hdbpcpbeaeqnact5t5kmktrkaipndq.apps.googleusercontent.com'
+FACEBOOK_ID='751687992155393'
+
+GOOGLE_MAPS_API_KEY = 'AIzaSyDX_8JveVk4S5cnDcMHijmOO9HGj5OJHmQ'
+GOOGLE_ANALYTICS_ID = 'G-QT1WE1L619'
\ No newline at end of file
diff --git a/pages/editar/perfil/contrasena.vue b/pages/editar/perfil/contrasena.vue
index f8332e2..bc50380 100644
--- a/pages/editar/perfil/contrasena.vue
+++ b/pages/editar/perfil/contrasena.vue
@@ -9,18 +9,21 @@
             type="text"
             label-text="Contraseña actual"
             required
+            @input="form.old_password = $event"
           />
           <FormInput
             v-model="form.password"
             type="password"
             label-text="Nueva contraseña"
             required
+            @input="form.password = $event"
           />
           <FormInput
             v-model="form.password2"
             type="password"
             label-text="Nueva contraseña"
             required
+            @input="form.password2 = $event"
           />
           <small v-if="error" class="error">{{ error }}</small>
           <small v-if="success" class="success">{{ success }}</small>
@@ -28,12 +31,15 @@
             <SubmitButton text="Actualizar" image-url="" />
           </div>
         </form>
+        {{ form }}
       </BCol>
     </BRow>
   </BContainer>
 </template>
 
 <script>
+import { mapState } from 'pinia'
+import { useAuthStore } from '@/stores/auth'
 export default {
   setup() {
     definePageMeta({
@@ -53,18 +59,29 @@ export default {
       success: null,
     }
   },
+  computed: {
+    ...mapState(useAuthStore, ['id', 'access']),
+  },
   methods: {
     async submitUser() {
       this.error = null
       this.success = null
       if (this.form.password === this.form.password2) {
         try {
-          await this.$api.put(
-            `/user/change_password/${this.$store.state.auth.id}/`,
-            this.form
-          )
+          const config = useRuntimeConfig()
+          const userId = this.id
+          const access = this.access
+          await $fetch(`/user/change_password/${userId}/`, {
+            baseURL: config.public.baseURL,
+            method: 'PUT',
+            body: this.form,
+            headers: {
+              Authorization: `Bearer ${access}`
+            }
+          })
           this.success = 'Contraseña cambiada correctamente'
-        } catch {
+        } catch (error) {
+          console.error('Error cambiando la contraseña:', error)
           this.error = 'La contraseña actual no es correcta'
         }
       } else {
diff --git a/pages/editar/perfil/index.vue b/pages/editar/perfil/index.vue
index c7a57b2..b292fcc 100644
--- a/pages/editar/perfil/index.vue
+++ b/pages/editar/perfil/index.vue
@@ -58,12 +58,12 @@ export default {
   async fetch() {
     const config = useRuntimeConfig()
     try {
-      const response = await $fetch(`/my_user/`, {
+      await $fetch(`/my_user/`, {
         baseURL: config.public.baseURL,
         method: 'GET',
         body: JSON.stringify(this.form),
       })
-      console.log('User data fetched successfully:', response)
+      //console.log('User data fetched successfully:', response)
     } catch (err) {
       console.error('Error fetching user data:', err)
       this.error = true
@@ -79,7 +79,6 @@ export default {
   methods: {
     ...mapActions( useAuthStore, ['setUser']),
     async submitUser() {
-      // TODO: configurar primero el estar logeado (estados, getters) para que peuda coger esa info y actualizarla
       this.error = false
       const config = useRuntimeConfig()
       try {

From f33da4af80c7cac3644095c685a4d973d9cd87dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Mon, 18 Aug 2025 13:07:36 +0200
Subject: [PATCH 02/21] product page

---
 components/ProductCardDetails.vue  | 445 +++++++++++++++++++++++++++++
 components/ProductModal.vue        | 310 ++++++++++++++++++++
 components/ProductsRelated.vue     |  86 ++++++
 package-lock.json                  |  17 ++
 package.json                       |   1 +
 pages/editar/perfil/contrasena.vue |   1 -
 pages/productos/[id].vue           |  89 +++++-
 7 files changed, 942 insertions(+), 7 deletions(-)
 create mode 100644 components/ProductCardDetails.vue
 create mode 100644 components/ProductModal.vue
 create mode 100644 components/ProductsRelated.vue

diff --git a/components/ProductCardDetails.vue b/components/ProductCardDetails.vue
new file mode 100644
index 0000000..8956f92
--- /dev/null
+++ b/components/ProductCardDetails.vue
@@ -0,0 +1,445 @@
+<template>
+  <div class="productcard_container">
+    <div class="row productcard_container-basic">
+      <div class="image_container col-md-5">
+        <img :src="getProductImg(product)" class="image" alt="" />
+      </div>
+      <div class="info_container col-md-5">
+        <h2 variant="primary">
+          {{ product?.name }}
+        </h2>
+        <span v-if="product?.price" class="price">{{
+          `${product?.price}€`
+        }}</span>
+        <span v-else class="price">Precio a consultar</span>
+        <span v-if="Number(product?.shipping_cost)"
+          >| {{ `Gastos de envío ${product?.shipping_cost}€` }}</span
+        >
+        <span v-else>| Sin gastos de envío</span>
+
+        <span v-if="product?.stock">| {{ `Stock ${product?.stock}€` }} </span>
+        <p
+          v-if="product?.description"
+          class="description"
+          v-html="sanitize(product?.description)"
+        ></p>
+        <span v-if="product?.shipping_terms">{{ product?.shipping_terms }}</span>
+        <BCollapse visible accordion="my-accordion">
+          <div class="tags_container">
+            <NuxtLink
+              v-for="n in product?.tags"
+              :key="n"
+              :to="tagRoute(n)"
+              class="tag_container"
+            >
+              <img
+                class="tag_img"
+                alt="tag image"
+                src="@/assets/img/latienda-tag.svg"
+              />
+              <span>{{ n }}</span>
+            </NuxtLink>
+          </div>
+          <div class="smlogos_container">
+            <p class="share-text">Comparte:</p>
+            <div class="smlogo_container">
+              <a @click="shareFacebook">
+                <img
+                  alt="facebook logo"
+                  class="smlogo_img"
+                  src="@/assets/img/latienda-smlogo-facebook.svg"
+                />
+              </a>
+            </div>
+            <a :href="shareTwitter()">
+              <div class="smlogo_container">
+                <img
+                  alt="twitter logo"
+                  class="smlogo_img"
+                  src="@/assets/img/latienda-smlogo-twitter.svg"
+                />
+              </div>
+            </a>
+            <a
+              :href="shareWhatsApp()"
+              data-action="share/whatsapp/share"
+              target="_blank"
+              title="latiendacoop"
+            >
+              <div class="smlogo_container">
+                <img
+                  alt="whatsapp logo"
+                  class="smlogo_img"
+                  src="@/assets/img/latienda-smlogo-whatsapp.svg"
+                />
+              </div>
+            </a>
+          </div>
+          <div class="coop_info">
+            <NuxtLink :to="`/c/${company?.id}`">
+              <h2>{{ company?.company_name }}</h2>
+            </NuxtLink>
+            <p class="description">{{ company?.description }}</p>
+            <a href="#">{{ company?.web_link }}</a>
+          </div>
+        </BCollapse>
+      </div>
+      <div class="col-md-2 button_container-detail" align="center">
+        <button class="button_buy-simple" @click="buyIntent">
+          <img
+            class="button_cart_img"
+            alt="cart"
+            src="@/assets/img/latienda-carrito.svg"
+          />
+        </button>
+        <div
+          v-if="product?.discount && product?.discount > 0"
+          class="discount-tag"
+        >
+          {{ `Descuento ${product?.discount}%` }}
+        </div>
+      </div>
+    </div>
+    <div class="related_products">
+      <h2 v-if="related">Productos relacionados</h2>
+      <h2 v-else>Otros productos</h2>
+      <ProductsRelated :related-products="relatedProducts" />
+    </div>
+    <ProductModal v-if="modal" :product="product" @close-modal="closeModal" />
+  </div>
+</template>
+
+<script>
+import DOMPurify from 'dompurify'
+import socialShare from '~/utils/socialShare'
+export default {
+  props: {
+    product: {
+      type: Object,
+      default: () => ({}),
+    },
+    company: {
+      type: Object,
+      default: () => ({}),
+    },
+    relatedProducts: {
+      type: Array,
+      default: () => [],
+    },
+    related: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      modal: true,
+      productUrl: null,
+      geolocation: null,
+    }
+  },
+
+  mounted() {
+    this.productUrl = window.location.href
+    this.sendLog('view')
+  },
+
+  methods: {
+    getProductImg(product) {
+      if (product && product.image) 
+        return product.image
+      return `@/assets/img/latienda-product-default.svg`
+    },
+    tagRoute(tag) {
+      return `/busqueda?tags=${tag}`
+    },
+    openUrl(url) {
+      window.open(url)
+    },
+    closeModal(value) {
+      this.modal = false
+      if (value === 200) {
+        this.$bvToast.toast(`Email enviado correctamente`, {
+          title: 'latienda.coop',
+          autoHideDelay: 5000,
+          appendToast: true,
+        })
+      } else if (value) {
+        this.$bvToast.toast(`Se ha producido un error en el envío`, {
+          title: 'latienda.coop',
+          autoHideDelay: 5000,
+          appendToast: true,
+          variant: 'danger',
+        })
+      }
+    },
+    buyIntent() {
+      this.sendLog('shop')
+      return this.product.url
+        ? this.openUrl(this.product.url)
+        : (this.modal = true)
+    },
+
+    async getPosition() {
+      const geoLocation = () =>
+        new Promise((resolve, reject) =>
+          navigator.geolocation.getCurrentPosition(
+            (posData) => {
+              resolve(posData)
+            },
+            (error) => {
+              reject(error)
+            }
+          )
+        )
+      try {
+        const position = await geoLocation()
+        const geo = {
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+        }
+        return geo
+      } catch {
+        const geo = null
+        return geo
+      }
+    },
+
+    async sendLog(action) {
+      const geo = await this.getPosition()
+      try {
+        const { data } = await this.$axios.get(
+          'https://api.ipify.org?format=json'
+        )
+        const ip = data.ip
+        const object = {
+          action: action,
+          action_object: {
+            model: 'product',
+            id: this.product.id,
+          },
+        }
+        if (ip) object.ip = ip
+        if (geo) object.geo = geo
+        await this.$api.post(`/stats/me/`, object)
+      } catch {}
+    },
+
+    shareFacebook() {
+      const url = socialShare.facebook(this.productUrl)
+      window.open(url, '_blank')
+    },
+    shareTwitter() {
+      return socialShare.twitter(this.productUrl)
+    },
+    shareWhatsApp() {
+      return socialShare.whatsApp(this.productUrl)
+    },
+
+    sanitize(dirtyHtml) {
+      return DOMPurify.sanitize(dirtyHtml, {
+        ALLOWED_TAGS: [
+          'b',
+          'i',
+          'em',
+          'strong',
+          'a',
+          'p',
+          'br',
+          'ul',
+          'li',
+          'ol',
+          'span',
+          'h1',
+          'h2',
+          'h3',
+        ],
+        ALLOWED_ATTR: ['href', 'target', 'rel', 'class'],
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.productcard_container {
+  border: 3px solid $color-grey-nav;
+  border-radius: 5px;
+  margin-bottom: 12px;
+}
+.productcard_container-basic {
+  padding: 25px 20px;
+}
+
+.image_container {
+  height: 100%;
+  overflow: hidden;
+  margin: auto;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.info_container {
+  h2 {
+    outline: none;
+    font-weight: medium;
+    color: $color-navy;
+    font-size: $m;
+  }
+  .price {
+    font-weight: bold;
+    color: $color-navy;
+    font-size: $m;
+  }
+  span {
+    color: $color-greytext;
+  }
+  .description {
+    margin-top: 8px;
+    font-family: $font-secondary;
+    font-size: $s;
+    color: $color-greytext;
+  }
+}
+
+.button_container {
+  display: flex;
+  flex-direction: column;
+  font-size: $m;
+
+  span {
+    margin-top: 15px;
+    text-align: center;
+    font-weight: medium;
+    font-size: $m;
+    color: $color-navy;
+  }
+
+  .button_buy {
+    border: 3px solid $color-orange;
+    border-radius: 5px;
+    background-color: $color-light;
+
+    &:hover {
+      box-shadow: 0 4px 16px rgba(99, 99, 99, 0.2);
+      transition: all 0.2s ease;
+    }
+
+    span {
+      color: $color-orange;
+      font-weight: $bold;
+      display: inline-block;
+      margin-bottom: 15px;
+    }
+  }
+}
+
+.button_buy-simple {
+  border: 3px solid $color-orange;
+  border-radius: 8px;
+  background-color: $color-light;
+  padding: 10px 20px;
+
+  &:hover {
+    box-shadow: 0 4px 16px rgba(99, 99, 99, 0.2);
+    transition: all 0.2s ease;
+  }
+
+  .button_cart_img {
+    margin-right: 0;
+  }
+}
+
+.tag_container {
+  margin: 25px 6px 0 0;
+  border: 2px solid $color-greylayout;
+  border-radius: 5px;
+  padding: 6px 10px;
+  display: inline-block;
+  font-family: $font-secondary;
+  font-size: $xs;
+  color: $color-greytext;
+
+  .tag_img {
+    width: 18px;
+  }
+}
+
+.share-text {
+  color: $color-navy;
+  font-size: $m;
+  margin-top: 2rem;
+  padding-bottom: 0.2em;
+}
+
+.smlogo_container {
+  cursor: pointer;
+  display: inline-block;
+  margin-bottom: 0.5rem;
+
+  .smlogo_img {
+    cursor: pointer;
+    width: 40px;
+    fill: $color-greylayout;
+  }
+  img:hover {
+    transform: scale(1.1);
+    transition: all 0.2s ease;
+  }
+}
+
+.button_cart_img {
+  width: 20px;
+  margin-right: 10px;
+}
+
+.coop_info {
+  margin-top: 25px;
+  p,
+  a {
+    margin-top: 8px;
+    font-family: $font-secondary;
+    font-size: $s;
+    color: $color-greytext;
+  }
+  a {
+    text-decoration: underline;
+  }
+}
+
+.related_products {
+  background-color: $color-lighter-green;
+  text-align: center;
+  padding: 0 15px;
+
+  h2 {
+    margin: 35px auto;
+    font-weight: medium;
+    color: $color-navy;
+    font-size: $m;
+    display: inline-block;
+  }
+}
+
+.discount-tag {
+  margin: 5px;
+  border: none;
+  background-color: $color-green;
+  border-radius: 5px;
+  padding: 6px 10px;
+  display: inline-block;
+  font-family: $font-secondary;
+  font-size: $xs;
+  color: $color-greytext;
+}
+
+.content > h2,
+h3,
+p {
+  margin: 0;
+}
+</style>
diff --git a/components/ProductModal.vue b/components/ProductModal.vue
new file mode 100644
index 0000000..04011c2
--- /dev/null
+++ b/components/ProductModal.vue
@@ -0,0 +1,310 @@
+<template>
+  <transition name="modal">
+    <div v-if="product" class="mask">
+      <div class="wrapper" @click.self="handleEmit">
+        <div class="container">
+          <div class="element header">
+            <h2>Interesado en comprar el producto</h2>
+            <img src="@/assets/img/latienda-lineapuntos-2.svg" alt="" />
+          </div>
+
+          <div class="modal-body">
+            <form @submit.prevent="sendForm">
+              <div>
+                <BFormGroup class="element">
+                  <BFormInput
+                    v-model="form.email"
+                    required
+                    class="input"
+                    size="lg"
+                    placeholder="Email"
+                  />
+                </BFormGroup>
+              </div>
+
+              <div>
+                <BFormGroup class="element">
+                  <BFormInput
+                    v-model="form.telephone"
+                    required
+                    class="input"
+                    size="lg"
+                    placeholder="Teléfono"
+                  />
+                </BFormGroup>
+              </div>
+              <div v-if="!isAuthenticated" class="element">
+                <BButton
+                  class="input"
+                  size="lg"
+                  variant="outline-primary w-100"
+                  @click="redirectToLogin"
+                  >Login</BButton
+                >
+              </div>
+              <div class="element coop">
+                <!-- <BCard
+                  img-src="https://placekitten.com/1000/300"
+                  img-alt="Card image"
+                  img-left
+                >
+                  <BCardText>
+                    <h3>Cooperativa</h3>
+                    <p>Dirección</p>
+                  </BCardText>
+                </BCard> -->
+                <div class="content">
+                  <img :src="getImgUrl(product.company.logo)" alt="" />
+                  <div class="text">
+                    <h3>{{ product?.company?.company_name }}</h3>
+                    <p>{{ product?.company?.address }}</p>
+                    <br />
+                  </div>
+                </div>
+              </div>
+
+              <div class="element coop">
+                <!-- <BCard
+                  img-src="https://placekitten.com/1000/300"
+                  img-alt="Card image"
+                  img-left
+                >
+                  <BCardText>
+                    <h3>Cooperativa</h3>
+                    <p>Dirección</p>
+                  </BCardText>
+                </BCard> -->
+                <div class="content">
+                  <img :src="getImgUrl(product.image)" alt="" />
+                  <div class="text">
+                    <h3>{{ product?.name }}</h3>
+                    <p>{{ product?.price }} €</p>
+                    <p class="text-muted">
+                      {{ product?.shipping_cost || 'Sin gastos de envío' }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div class="element">
+                <BFormTextarea
+                  id="textarea-no-resize"
+                  v-model="form.comment"
+                  class="input"
+                  placeholder="Comentarios"
+                  rows="3"
+                  no-resize
+                />
+              </div>
+              <div>
+                <BButton type="submit" class="enviar-button">
+                  <v-progress-circular
+                    v-if="loading"
+                    :size="15"
+                    :width="2"
+                    indeterminate
+                  />
+                  <span v-else>Enviar</span>
+                </BButton>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { useAuthStore } from '@/stores/auth'
+export default {
+  props: {
+    product: { type: Object, default: () => ({}) },
+  },
+  emits: ['closeModal'],
+  setup() {
+    const authStore = useAuthStore()
+    return {
+      authStore
+    }
+  },
+  data() {
+    return {
+      isAuthenticated: true,
+      form: {
+        email: undefined,
+        telephone: undefined,
+        company: undefined,
+        product: undefined,
+        comment: '',
+      },
+      loading: false,
+    }
+  },
+
+  mounted() {
+    this.isAuthenticated = this.authStore.isAuthenticated
+    if (this.isAuthenticated) {
+      const email = this.authStore.email
+      this.form.email = email
+    }
+  },
+
+  methods: {
+    async sendForm() {
+      this.form.company = this.product.company.id
+      this.form.product = this.product.id
+      this.loading = true
+
+      let response
+      let status
+      const config = useRuntimeConfig()
+      try { //TODO: review if its working
+        response = await $fetch(`/purchase_email/`, {
+          baseURL: config.public.baseURL,
+          method: 'POST',
+          body: { ...this.form }
+        })
+        status = response.status
+      } catch {
+        status = 500
+      }
+
+      this.loading = false
+      this.$emit('closeModal', status)
+    },
+    getImgUrl(image) {
+      if (image) return image
+      return `@/assets/img/latienda-product-default.svg`
+    },
+    redirectToLogin() {
+      this.$router.push({
+        name: 'login',
+      })
+    },
+    handleEmit() {
+      this.$emit('closeModal')
+    },
+  },
+}
+</script>
+
+<style lang="css" scoped>
+.mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: table;
+  transition: opacity 0.3s ease;
+}
+
+.wrapper {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 500px;
+  margin: 0px auto;
+  padding: 20px 40px;
+  background-color: #fff;
+  border-radius: 7px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+  transition: all 0.3s ease;
+}
+
+.element {
+  margin-bottom: 10px;
+}
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.header > h2 {
+  margin-bottom: 20px;
+  text-align: center;
+  font-size: 1.125rem;
+  font-weight: 500;
+  color: #374493;
+}
+
+.header > img {
+  width: 50px;
+}
+
+.modal-body {
+  width: 300px;
+}
+
+.input {
+  font-size: 0.75rem;
+  margin: 0;
+}
+
+.input-group-text {
+  width: 48px;
+  border-right: none;
+  background-color: #ffffff;
+}
+
+.coop {
+  border: 1px lightgray solid;
+  border-radius: 5px;
+}
+
+.coop > .content {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  margin: 5px 10px;
+}
+.coop > .content > img {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  margin-right: 5px;
+}
+.coop > .content > .text > h3,
+p {
+  font-size: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.enviar-button {
+  width: 100%;
+  background: #fd6871;
+  border-color: #fd6871;
+  color: white;
+}
+
+/*
+ * The following styles are auto-applied to elements with
+ * transition="modal" when their visibility is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the modal transition by editing
+ * these styles.
+ */
+
+.modal-enter {
+  opacity: 0;
+}
+
+.modal-leave-active {
+  opacity: 0;
+}
+
+.modal-enter .modal-container,
+.modal-leave-active .modal-container {
+  -webkit-transform: scale(1.1);
+  transform: scale(0.8);
+}
+</style>
diff --git a/components/ProductsRelated.vue b/components/ProductsRelated.vue
new file mode 100644
index 0000000..bf4e84c
--- /dev/null
+++ b/components/ProductsRelated.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="row related_products-cards">
+    <NuxtLink
+      v-for="(product, key) in relatedProducts"
+      :key="`related-${key}`"
+      :to="`/productos/${product.id}`"
+      class="col mx-2 related_product-card"
+    >
+      <img
+        v-if="product.image"
+        :src="product.image"
+        alt=""
+        class="related_product-image"
+      />
+      <img
+        v-else
+        class="image-default"
+        src="@/assets/img/latienda-product-default.svg"
+        alt=""
+      />
+      <h3>{{ product.name }}</h3>
+      <span v-if="product.price" class="price">{{ `${product.price}€` }}</span>
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    relatedProducts: {
+      type: Array,
+      default: () => [],
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.related_products {
+  background-color: $color-lighter-green;
+  text-align: center;
+  padding: 0 15px;
+
+  img {
+    margin-top: 12px;
+  }
+
+  .image-default {
+    object-fit: cover;
+  }
+
+  .star {
+    width: 12px;
+    margin-right: 1px;
+  }
+
+  .related_product-card {
+    border: 3px solid $color-grey-nav;
+    border-radius: 5px;
+    margin-bottom: 35px;
+
+    .related_product-image {
+      width: 100px;
+      height: 100px;
+      object-fit: cover;
+    }
+
+    h3 {
+      font-weight: $regular;
+      color: $color-navy;
+      font-size: $m;
+      display: inline-block;
+      margin-bottom: 0;
+    }
+
+    span {
+      font-weight: $regular;
+      color: $color-navy;
+      font-size: $m;
+      display: block;
+      font-weight: bolder;
+      margin-bottom: 5px;
+    }
+  }
+}
+</style>
diff --git a/package-lock.json b/package-lock.json
index 1914c5e..48d8e98 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@nuxt/eslint": "^1.8.0",
         "@nuxtjs/sitemap": "^7.4.3",
         "@pinia/nuxt": "^0.11.2",
+        "dompurify": "^3.2.6",
         "eslint": "^9.32.0",
         "nuxt": "^3.17.7",
         "pinia": "^3.0.3",
@@ -4321,6 +4322,13 @@
       "integrity": "sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==",
       "license": "MIT"
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/yauzl": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@@ -7027,6 +7035,15 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.6.tgz",
+      "integrity": "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/domutils": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
diff --git a/package.json b/package.json
index b0adf2a..a2471ca 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@nuxt/eslint": "^1.8.0",
     "@nuxtjs/sitemap": "^7.4.3",
     "@pinia/nuxt": "^0.11.2",
+    "dompurify": "^3.2.6",
     "eslint": "^9.32.0",
     "nuxt": "^3.17.7",
     "pinia": "^3.0.3",
diff --git a/pages/editar/perfil/contrasena.vue b/pages/editar/perfil/contrasena.vue
index bc50380..30a5f0e 100644
--- a/pages/editar/perfil/contrasena.vue
+++ b/pages/editar/perfil/contrasena.vue
@@ -31,7 +31,6 @@
             <SubmitButton text="Actualizar" image-url="" />
           </div>
         </form>
-        {{ form }}
       </BCol>
     </BRow>
   </BContainer>
diff --git a/pages/productos/[id].vue b/pages/productos/[id].vue
index 24fee24..29afb45 100644
--- a/pages/productos/[id].vue
+++ b/pages/productos/[id].vue
@@ -1,15 +1,92 @@
 <template>
-  <div>
-    Producto 1
+  <div class="container">
+    <h1 class="title">Detalles del producto</h1>
+    <ProductCardDetails
+      :product="product"
+      :related="related"
+      :related-products="relatedProducts"
+      :company="company"
+    />
   </div>
 </template>
 
 <script>
-  export default {
-    
-  }
+import { useRoute } from 'vue-router'
+export default {
+  setup() {
+    definePageMeta({
+      layout: 'mainbanner'
+    })
+  },
+  data() {
+    return {
+      product: null,
+      company: null,
+      relatedProducts: null,
+      related: false,
+    }
+  },
+  async mounted() {
+    try {
+      const config = useRuntimeConfig()
+      const $route = useRoute()
+      this.product = await $fetch(`/products/${$route.params.id}/`, {
+        baseURL: config.public.baseURL,
+        method: 'GET',
+      })
+
+      if (this.product.company) {
+        this.company = await $fetch(`/companies/${this.product.company.id}/`, {
+          baseURL: config.public.baseURL,
+          method: 'GET',
+        })
+      }
+
+      this.relatedProducts = await $fetch(`/products/${this.product.id}/related/`, {
+        baseURL: config.public.baseURL,
+        method: 'GET',
+      })
+      this.related = this.relatedProducts.length > 0
+
+      //return { product, company, relatedProducts, related }
+    } catch (error) {
+      console.error('Error fetching product details:', error)
+    }
+  },
+  //TODO: meta data
+  // mounted() {
+  //   useHead({
+  //     title: `latienda.coop | ${this.product.id}`,
+  //     meta: [
+  //       {
+  //         hid: 'description',
+  //         name: 'description',
+  //         content: this.product.description,
+  //       },
+  //       { property: 'og:title', content: this.product.id },
+  //       { property: 'og:description', content: this.product.description },
+  //       { property: 'og:image', content: this.product.image },
+  //       { property: 'og:url', content: this.product.url },
+  //       { name: 'twitter:card', content: 'summary_large_image' },
+  //     ],
+  //   })
+  // },
+  
+}
 </script>
 
 <style lang="scss" scoped>
+.container {
+  margin-top: 40px;
+  margin-bottom: 80px;
+  @include mobile {
+    margin-top: 80px;
+  }
+}
 
-</style>
\ No newline at end of file
+.title {
+  margin-bottom: 40px;
+  font-size: $xl;
+  color: $color-navy;
+}
+</style>

From 8fedf544704d48c81098daa478c379124d56403d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Mon, 18 Aug 2025 14:45:18 +0200
Subject: [PATCH 03/21] wip coop/[id] page

---
 components/CoopCard.vue           | 237 ++++++++++++++
 components/NavMenu copy.vue       | 276 ----------------
 components/ProductCard.vue        | 506 ++++++++++++++++++++++++++++++
 components/ProductCardDetails.vue |  32 +-
 pages/c/[id].vue                  | 423 ++++++++++++++++++++++++-
 pages/c/index.vue                 | 189 ++++++++++-
 stores/auth.ts                    |   7 +-
 7 files changed, 1374 insertions(+), 296 deletions(-)
 create mode 100644 components/CoopCard.vue
 delete mode 100644 components/NavMenu copy.vue
 create mode 100644 components/ProductCard.vue

diff --git a/components/CoopCard.vue b/components/CoopCard.vue
new file mode 100644
index 0000000..8f5389c
--- /dev/null
+++ b/components/CoopCard.vue
@@ -0,0 +1,237 @@
+<template>
+  <div class="productcard_container">
+    <div class="row productcard_container-basic">
+      <div class="image_container col-md-2">
+        <img
+          v-if="coop.logo"
+          class="image"
+          :src="coop.logo"
+          :alt="coop.company_name"
+        />
+        <img
+          v-else
+          class="image"
+          src="@/assets/img/latienda-product-default.svg"
+          :alt="coop.company_name"
+        />
+      </div>
+      <div class="info_container col-md-6" align="left">
+        <NuxtLink :to="`/c/${this.coop.id}`">
+          <h2>{{ coop.company_name }}</h2>
+        </NuxtLink>
+        <p class="description">{{ coop.description }}</p>
+        <div class="tags_container">
+          <NuxtLink
+            :to="tagRoute(n)"
+            class="tag_container"
+            v-for="n in coop.tags"
+            :key="n"
+          >
+            <img class="tag_img" src="@/assets/img/latienda-tag.svg" />
+            <span>{{ n }}</span>
+          </NuxtLink>
+        </div>
+      </div>
+      <div class="col-md-4 button_container" align="center">
+        <a v-if="coop.shop_link" :href="coop.shop_link" class="button_buy">
+          <img
+            alt="tienda"
+            class="button_cart_img"
+            src="@/assets/img/latienda-tienda.svg"
+          />
+          <span>Tienda online</span>
+        </a>
+        <a v-if="coop.web_link" :href="coop.web_link" class="button_buy">
+          <img
+            alt="web"
+            class="button_cart_img"
+            src="@/assets/img/latienda-web.svg"
+          />
+          <span>Página web</span>
+        </a>
+        <div class="smlogos_container">
+          <div class="smlogo_container">
+            <a @click="shareFacebook">
+              <img
+                class="smlogo_img"
+                alt="facebook logo"
+                src="@/assets/img/latienda-smlogo-facebook.svg"
+              />
+            </a>
+          </div>
+          <a @click="shareTwitter">
+            <div class="smlogo_container">
+              <img
+                class="smlogo_img"
+                alt="twitter logo"
+                src="@/assets/img/latienda-smlogo-twitter.svg"
+              />
+            </div>
+          </a>
+          <a
+            :href="shareWhatsApp()"
+            data-action="share/whatsapp/share"
+            target="_blank"
+            title="latiendacoop"
+          >
+            <div class="smlogo_container">
+              <img
+                alt="whatsapp logo"
+                class="smlogo_img"
+                src="@/assets/img/latienda-smlogo-whatsapp.svg"
+              />
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import socialShare from '~/utils/socialShare'
+export default {
+  name: 'CoopCard',
+  props: ['coop'],
+
+  computed: {
+    coopUrl() {
+      return `${window.location.origin}/c/${this.coop.id}`
+    },
+  },
+  methods: {
+    tagRoute(tag) {
+      return `/busqueda?tags=${tag}`
+    },
+
+    shareFacebook() {
+      const url = socialShare.facebook(this.coopUrl)
+      window.open(url, '_blank')
+    },
+    shareTwitter() {
+      const url = socialShare.twitter(this.coopUrl)
+      window.open(url, '_blank')
+    },
+    shareWhatsApp() {
+      return socialShare.whatsApp(this.coopUrl)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.productcard_container {
+  border: 3px #e9e9e9 solid;
+  border-radius: 5px;
+  margin-bottom: 25px;
+}
+.productcard_container-basic {
+  padding: 25px 20px;
+}
+
+.image_container {
+  height: 100%;
+  overflow: hidden;
+  margin: auto;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.info_container {
+  h2 {
+    outline: none;
+    font-weight: $medium;
+    color: $color-navy;
+    font-size: $m;
+  }
+  .price {
+    font-weight: $bold;
+    color: $color-navy;
+    font-size: $m;
+  }
+  span {
+    color: #808080;
+  }
+  .description {
+    margin-top: 8px;
+    font-family: $font-secondary;
+    font-size: $s;
+    color: $color-greytext;
+    display: -webkit-box;
+    -webkit-line-clamp: 5;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+
+.button_container {
+  display: flex;
+  flex-direction: column;
+  font-size: $s;
+
+  .button_buy {
+    width: 100%;
+    color: $color-orange;
+    font-weight: $bold;
+    padding: 10px 0;
+    margin-bottom: 5px;
+    border: 3px solid $color-orange;
+    border-radius: 5px;
+    background-color: $color-light;
+
+    &:hover {
+      box-shadow: 0 4px 16px rgba(99, 99, 99, 0.2);
+      transition: all 0.2s ease;
+    }
+
+    span {
+      display: inline-block;
+    }
+  }
+}
+
+.tag_container {
+  margin: 25px 6px 0 0;
+  border: 2px solid $color-greylayout;
+  border-radius: 5px;
+  padding: 6px 10px;
+  display: inline-block;
+  font-family: $font-secondary;
+  font-size: $xs;
+  color: $color-greytext;
+
+  .tag_img {
+    width: 18px;
+  }
+}
+
+.smlogo_container {
+  display: inline-block;
+  margin-top: 15px;
+
+  .smlogo_img {
+    width: 35px;
+    fill: $color-greytext;
+    margin: 2px;
+  }
+  img:hover {
+    transform: scale(1.1);
+    transition: all 0.2s ease;
+  }
+}
+
+.button_cart_img {
+  width: 20px;
+  margin-right: 10px;
+}
+
+.content > h2,
+h3,
+p {
+  margin: 0;
+}
+</style>
diff --git a/components/NavMenu copy.vue b/components/NavMenu copy.vue
deleted file mode 100644
index fd624a8..0000000
--- a/components/NavMenu copy.vue	
+++ /dev/null
@@ -1,276 +0,0 @@
-<template>
-  <div class="nav-menu-container">
-    <img
-      class="burger"
-      src="@/assets/img/latienda-burger-nav.svg"
-      alt=""
-      @click="isMenuOpen = !isMenuOpen"
-    />
-    <div :class="isMenuOpen ? `shadow` : ''">
-      <transition name="slider" mode="out-in">
-        <div v-if="isMenuOpen" class="nav-menu">
-          <img
-            class="close-icon"
-            src="@/assets/img/latienda-close-nav.svg"
-            alt=""
-            @click="isMenuOpen = !isMenuOpen"
-          />
-          <nav class="nav">
-            <ul class="section-list">
-              <NuxtLink to="/">
-                <li class="section" @click="isMenuOpen = !isMenuOpen">
-                  <img
-                    class="section-img"
-                    src="@/assets/img/latienda-ubicacion.svg"
-                    alt=""
-                  />
-                  <span class="section-text">Inicio</span>
-                </li>
-              </NuxtLink>
-              <NuxtLink to="/c">
-                <li class="section" @click="isMenuOpen = !isMenuOpen">
-                  <img
-                    class="section-img"
-                    src="@/assets/img/latienda-tienda-nav.svg"
-                    alt=""
-                  />
-                  <span class="section-text">Cooperativas</span>
-                </li>
-              </NuxtLink>
-              <NuxtLink to="/page/info">
-                <li class="section" @click="isMenuOpen = !isMenuOpen">
-                  <img
-                    class="section-img"
-                    src="@/assets/img/latienda-bag.svg"
-                    alt=""
-                  />
-                  <span class="section-text">Sobre nosotros</span>
-                </li>
-              </NuxtLink>
-              <li class="section" @click="isMenuOpen = !isMenuOpen">
-                <a href="mailto:info@latienda.coop">
-                  <img
-                    class="section-img"
-                    src="@/assets/img/envelope-simple.svg"
-                    alt=""
-                  />
-                  <span class="section-text">Contacto</span>
-                </a>
-              </li>
-            </ul>
-          </nav>
-          <ul class="login-list">
-            <NuxtLink v-if="!isAuthenticated" to="/login">
-              <li class="section" @click="isMenuOpen = !isMenuOpen">
-                <img
-                  class="section-img"
-                  src="@/assets/img/latienda-lock.svg"
-                  alt=""
-                />
-                <span class="section-text">Acceder</span>
-              </li>
-            </NuxtLink>
-            <NuxtLink v-if="isManager" to="/editar/perfil">
-              <li class="section" @click="isMenuOpen = !isMenuOpen">
-                <img
-                  class="section-img"
-                  src="@/assets/img/latienda-user.svg"
-                  alt=""
-                />
-                <span class="section-text">Perfil</span>
-              </li>
-            </NuxtLink>
-            <NuxtLink v-if="isManager" to="/editar/cooperativa">
-              <li class="section" @click="isMenuOpen = !isMenuOpen">
-                <span class="section-text login">Cooperativa</span>
-              </li>
-            </NuxtLink>
-            <NuxtLink v-if="isManager" to="/editar/productos">
-              <li class="section" @click="isMenuOpen = !isMenuOpen">
-                <span class="section-text login">Productos</span>
-              </li>
-            </NuxtLink>
-            <NuxtLink v-if="isManager" to="/editar/productos/importar">
-              <li class="section" @click="isMenuOpen = !isMenuOpen">
-                <span class="section-text login">Importar</span>
-              </li>
-            </NuxtLink>
-            <NuxtLink v-if="isAuthenticated" @click.native="logout" to="/">
-              <li class="section" @click="isMenuOpen = !isMenuOpen">
-                <img
-                  class="section-img"
-                  src="@/assets/img/latienda-sign-out.svg"
-                  alt=""
-                />
-                <span class="section-text">Cerrar sesión</span>
-              </li>
-            </NuxtLink>
-          </ul>
-          <ul class="link-list">
-            <li class="link">
-              <a href="https://coceta.coop/" target="_blank">
-                <span class="link-text">Coceta</span>
-              </a>
-            </li>
-            <NuxtLink to="/page/terminos">
-              <li class="link" @click="isMenuOpen = !isMenuOpen">
-                <span class="link-text">Términos y condiciones</span>
-              </li>
-            </NuxtLink>
-            <NuxtLink to="/page/legal">
-              <li class="link" @click="isMenuOpen = !isMenuOpen">
-                <span class="link-text">Política de privacidad</span>
-              </li>
-            </NuxtLink>
-            <NuxtLink to="/page/cookies">
-              <li class="link" @click="isMenuOpen = !isMenuOpen">
-                <span class="link-text">Cookies</span>
-              </li>
-            </NuxtLink>
-          </ul>
-          <div class="credits">
-            <span>2021 La Tienda.Coop</span>
-            <a href="http://enreda.coop/" target="_blank"
-              >Sitio desarrollado por Enreda</a
-            >
-          </div>
-        </div>
-      </transition>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      isMenuOpen: false,
-    }
-  },
-  computed: {
-    isAuthenticated() {
-      return this.$store.getters['auth/isAuthenticated']
-    },
-    isManager() {
-      return this.$store.getters['auth/isManager']
-    },
-  },
-  methods: {
-    async logout() {
-      this.isMenuOpen = false
-      await this.$store.dispatch('auth/logout')
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.slider-enter-active,
-.slider-leave-active {
-  transition: all 0.5s ease;
-}
-.slider-enter,
-.slider-leave-to {
-  transform: translateX(-100%);
-}
-
-.nav-menu-container {
-  @include tablet {
-    display: none;
-  }
-}
-
-.nav-menu {
-  font-family: $font-primary;
-  padding: 30px 0 0 20px;
-  background-color: $color-green;
-  height: 100vh;
-  top: 0;
-  left: 0;
-  position: fixed;
-  z-index: 9999999999;
-  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
-  overflow: scroll;
-  @include mobile {
-    width: 70%;
-  }
-  @include tablet {
-    width: 30%;
-  }
-}
-
-.shadow {
-  width: 100%;
-  height: 100vh;
-  background-color: rgba(0, 0, 0, 0.2);
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 999999;
-}
-
-.burger,
-.close-icon {
-  width: 1.8rem;
-  cursor: pointer;
-}
-
-.close-icon {
-  margin-bottom: 3rem;
-}
-
-.section {
-  padding: 0.4em 0;
-}
-
-.section-list {
-  padding-bottom: 1rem;
-  border-bottom: 1px solid $color-navy;
-}
-
-.section-text {
-  font-weight: $medium;
-  font-size: $s;
-}
-
-.section-img {
-  width: 1.2rem;
-  margin-right: 0.8rem;
-}
-
-ul {
-  list-style: none;
-}
-
-a {
-  text-decoration: none;
-  cursor: pointer;
-  color: $color-navy;
-}
-
-.link-list,
-.credits {
-  margin-top: 1rem;
-  margin-left: 1rem;
-  padding: 0.1em;
-}
-.link {
-  padding: 0.3em 0;
-  font-size: $xs;
-}
-.credits {
-  margin-top: 1.5rem;
-  span,
-  a {
-    display: block;
-    color: $color-navy;
-    font-size: $xs;
-    padding: 0.3em 0;
-  }
-  margin-bottom: 4rem;
-}
-.login {
-  padding-left: 2rem;
-  font-weight: $regular;
-}
-</style>
diff --git a/components/ProductCard.vue b/components/ProductCard.vue
new file mode 100644
index 0000000..2fc0964
--- /dev/null
+++ b/components/ProductCard.vue
@@ -0,0 +1,506 @@
+<template>
+  <div class="productcard_container">
+    <div class="row productcard_container-basic">
+      <div class="image_container" :class="expanded ? 'col-md-5' : 'col-md-2'">
+        <img
+          v-if="product.image"
+          class="image"
+          :src="product.image"
+          :alt="product.name"
+        />
+        <img
+          v-else
+          class="image"
+          src="@/assets/img/latienda-product-default.svg"
+          :alt="product.name"
+        />
+      </div>
+      <div class="info_container" :class="expanded ? 'col-md-5' : 'col-md-6'">
+        <h2 v-b-toggle="'collapse-' + product.id" variant="primary">
+          {{ product.name }}
+        </h2>
+        <span v-if="product.price" class="price">{{
+          `${product.price}€`
+        }}</span>
+        <span v-else class="price">Precio a consultar</span>
+        <span v-if="Number(product.shipping_cost)"
+          >| {{ `Gastos de envío ${product.shipping_cost}€` }}</span
+        >
+        <span v-else>| Sin gastos de envío</span>
+
+        <span v-if="product.stock">| {{ `Stock ${product.stock}` }} </span>
+
+        <div
+          class="description"
+          :class="{ 'not-expanded-description': !expanded }"
+        >
+          <p
+            v-if="product.description"
+            v-sanitize="[
+              {
+                allowedTags: ['p'],
+                allowedAttributes: {},
+              },
+              product.description,
+            ]"
+          >
+            <span v-if="product.shipping_terms">{{
+              product.shipping_terms
+            }}</span>
+          </p>
+        </div>
+        <b-collapse :id="'collapse-' + product.id" accordion="my-accordion">
+          <div class="tags_container">
+            <NuxtLink
+              :to="tagRoute(n)"
+              class="tag_container"
+              v-for="n in product.tags"
+              :key="n"
+            >
+              <img
+                alt="tag image"
+                class="tag_img"
+                src="@/assets/img/latienda-tag.svg"
+              />
+              <span>{{ n }}</span>
+            </NuxtLink>
+          </div>
+          <div class="smlogos_container">
+            <p class="share-text">Comparte:</p>
+            <div class="smlogo_container">
+              <a class="smlogo_link" @click="shareFacebook">
+                <img
+                  class="smlogo_img"
+                  alt="facebook logo"
+                  src="@/assets/img/latienda-smlogo-facebook.svg"
+                />
+              </a>
+            </div>
+            <!-- <a @click="shareTwitter"> -->
+            <a :href="shareTwitter()">
+              <div class="smlogo_container">
+                <img
+                  class="smlogo_img"
+                  alt="twitter logo"
+                  src="@/assets/img/latienda-smlogo-twitter.svg"
+                />
+              </div>
+            </a>
+            <a
+              :href="shareWhatsApp()"
+              data-action="share/whatsapp/share"
+              target="_blank"
+              title="latiendacoop"
+            >
+              <div class="smlogo_container">
+                <img
+                  alt="whatsapp logo"
+                  class="smlogo_img"
+                  src="@/assets/img/latienda-smlogo-whatsapp.svg"
+                />
+              </div>
+            </a>
+          </div>
+          <div v-if="product.company" class="coop_info">
+            <NuxtLink :to="`c/${product.company.id}`">
+              <h2>{{ product.company.company_name }}</h2>
+            </NuxtLink>
+            <p>{{ product.company.description }}</p>
+            <a :href="product.company.web_link">{{
+              product.company.web_link
+            }}</a>
+          </div>
+        </b-collapse>
+      </div>
+      <div
+        :class="
+          expanded
+            ? 'col-md-2 button_container-detail'
+            : 'col-md-4 button_container'
+        "
+        align="center"
+      >
+        <button
+          @click="buyIntent"
+          :class="expanded ? 'button_buy-simple' : 'button_buy'"
+        >
+          <img
+            class="button_cart_img"
+            alt="cart"
+            src="@/assets/img/latienda-carrito.svg"
+          />
+          <span v-show="!expanded">Comprar</span>
+        </button>
+        <div
+          v-if="product.discount && product.discount > 0"
+          class="discount-tag"
+        >
+          {{ `Descuento ${product.discount}%` }}
+        </div>
+        <span v-if="product.company" v-show="!expanded">{{
+          product.company.company_name
+        }}</span>
+      </div>
+    </div>
+
+    <div v-if="expanded && relatedProducts" class="related_products">
+      <h2>Productos relacionados</h2>
+      <ProductsRelated :relatedProducts="relatedProducts" />
+    </div>
+    <ProductModal v-if="modal" :product="product" @close="closeModal" />
+  </div>
+</template>
+
+<script>
+import { mapState } from 'pinia'
+import ProductModal from './ProductModal.vue'
+import ProductsRelated from './ProductsRelated.vue'
+import socialShare from '~/utils/socialShare'
+export default {
+  components: { ProductsRelated, ProductModal },
+  props: {
+    product: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      expanded: false,
+      modal: false,
+      productUrl: null,
+      relatedProducts: null,
+    }
+  },
+  computed: {
+    ...mapState(useAuthStore, ['access']),
+  },
+  mounted() {
+    this.productUrl = window.location.origin + `/productos/${this.product.id}`
+
+    this.$root.$on('bv::collapse::state', async (collapseId, isJustShown) => {
+      if (collapseId === `collapse-${this.product.id}`) {
+        this.expanded = isJustShown
+        if (this.expanded) {
+          await this.getRelatedProducts()
+          await this.sendLog('view')
+        }
+      }
+    })
+  },
+
+  methods: {
+    tagRoute(tag) {
+      return `/busqueda?tags=${tag}`
+    },
+    async getRelatedProducts() {
+      try {
+        const { data } = await this.$api.get(
+          `/products/${this.product.id}/related/`
+        )
+        this.relatedProducts = data
+      } catch {
+        this.relatedProducts = null
+      }
+    },
+
+    openUrl(url) {
+      window.open(url)
+    },
+
+    buyIntent() {
+      this.sendLog('shop')
+      return this.product.url
+        ? this.openUrl(this.product.url)
+        : (this.modal = true)
+    },
+
+    async getPosition() {
+      const geoLocation = () =>
+        new Promise((resolve, reject) =>
+          navigator.geolocation.getCurrentPosition(
+            (posData) => {
+              resolve(posData)
+            },
+            (error) => {
+              reject(error)
+            }
+          )
+        )
+      try {
+        const position = await geoLocation()
+        const geo = {
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+        }
+        return geo
+      } catch {
+        const geo = null
+        return geo
+      }
+    },
+
+    async sendLog(action) {
+      const geo = await this.getPosition()
+      try {
+        const config = useRuntimeConfig()
+        const accessToken = this.access
+        const data = await $fetch('https://api.ipify.org?format=json', {
+          baseURL: config.public.baseURL,
+          method: 'GET'
+        })
+        const ip = data.ip
+        const object = {
+          action: action,
+          action_object: {
+            model: 'product',
+            id: this.product.id,
+          },
+        }
+        if (ip) object.ip = ip
+        if (geo) object.geo = geo
+        //TODO: review problems with 406 error backend
+        await $fetch(`/stats/me/`, {
+          baseURL: config.public.baseURL,
+          method: 'POST',
+          body: object,
+          headers: {
+              Authorization: `Bearer ${accessToken}`
+            }
+        })
+      } catch (error) {
+        console.error('Error sending log:', error)
+      }
+    },
+
+    closeModal(value) {
+      this.modal = false
+      if (value === 200) {
+        this.$bvToast.toast(`Email enviado correctamente`, {
+          title: 'latienda.coop',
+          autoHideDelay: 5000,
+          appendToast: true,
+          variant: 'success',
+        })
+      } else if (value) {
+        this.$bvToast.toast(`Se ha producido un error en el envío`, {
+          title: 'latienda.coop',
+          autoHideDelay: 5000,
+          appendToast: true,
+          variant: 'danger',
+        })
+      }
+    },
+
+    shareFacebook() {
+      const url = socialShare.facebook(this.productUrl)
+      window.open(url, '_blank')
+    },
+    shareTwitter() {
+      return socialShare.twitter(this.productUrl)
+    },
+    shareWhatsApp() {
+      return socialShare.whatsApp(this.productUrl)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.productcard_container {
+  border: 3px $color-grey-nav solid;
+  border-radius: 5px;
+  margin-bottom: 12px;
+}
+.productcard_container-basic {
+  padding: 25px 20px;
+}
+
+.image_container {
+  height: 100%;
+  overflow: hidden;
+  margin: auto;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.info_container {
+  h2 {
+    outline: none;
+    font-weight: $regular;
+    color: $color-navy;
+    font-size: $m;
+  }
+  .price {
+    font-weight: $bold;
+    color: $color-navy;
+    font-size: $m;
+  }
+  span {
+    color: $color-greytext;
+  }
+  .description {
+    margin-top: 8px;
+    font-family: $font-secondary;
+    font-size: $s;
+    color: $color-greytext;
+  }
+}
+
+.not-expanded-description {
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  @include mobile {
+    -webkit-line-clamp: 3;
+  }
+}
+
+.button_container {
+  display: flex;
+  flex-direction: column;
+  font-size: $m;
+
+  span {
+    margin-top: 15px;
+    text-align: center;
+    font-weight: medium;
+    font-size: $m;
+    color: $color-navy;
+  }
+
+  .button_buy {
+    border: 3px solid $color-orange;
+    border-radius: 5px;
+    background-color: $color-light;
+
+    &:hover {
+      box-shadow: 0 4px 16px rgba(99, 99, 99, 0.2);
+      transition: all 0.2s ease;
+    }
+
+    span {
+      color: $color-orange;
+      font-weight: $bold;
+      display: inline-block;
+      margin-bottom: 15px;
+    }
+  }
+}
+
+.button_buy-simple {
+  border: 3px solid $color-orange;
+  border-radius: 8px;
+  background-color: $color-light;
+  padding: 10px 20px;
+
+  &:hover {
+    box-shadow: 0 4px 16px rgba(99, 99, 99, 0.2);
+    transition: all 0.2s ease;
+  }
+
+  .button_cart_img {
+    margin-right: 0;
+  }
+}
+
+.tag_container {
+  margin: 25px 6px 0 0;
+  border: 2px solid $color-greylayout;
+  border-radius: 5px;
+  padding: 6px 10px;
+  display: inline-block;
+  font-family: $font-secondary;
+  font-size: $xs;
+  color: $color-greytext;
+
+  .tag_img {
+    width: 18px;
+  }
+}
+
+.discount-tag {
+  margin: 5px;
+  border: none;
+  background-color: $color-green;
+  border-radius: 5px;
+  padding: 6px 10px;
+  display: inline-block;
+  font-family: $font-secondary;
+  font-size: $xs;
+  color: $color-greytext;
+}
+
+.share-text {
+  color: $color-navy;
+  font-size: $m;
+  margin-top: 2rem;
+  padding-bottom: 0.2em;
+}
+
+.smlogo_container {
+  cursor: pointer;
+  display: inline-block;
+  margin-bottom: 0.5rem;
+
+  .smlogo_img {
+    width: 40px;
+    fill: $color-greytext;
+  }
+
+  img:hover {
+    transform: scale(1.1);
+    transition: all 0.2s ease;
+  }
+}
+
+.button_cart_img {
+  width: 20px;
+  margin-right: 10px;
+}
+
+.coop_info {
+  margin-top: 25px;
+  p,
+  a {
+    margin-top: 8px;
+    font-family: $font-secondary;
+    font-size: $s;
+    color: $color-greytext;
+  }
+  a {
+    text-decoration: underline;
+  }
+  p {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+
+.related_products {
+  background-color: $color-lighter-green;
+  text-align: center;
+  padding: 0 15px;
+
+  h2 {
+    margin: 35px auto;
+    font-weight: $regular;
+    color: $color-navy;
+    font-size: $m;
+    display: inline-block;
+  }
+}
+
+.content > h2,
+h3,
+p {
+  margin: 0;
+}
+</style>
diff --git a/components/ProductCardDetails.vue b/components/ProductCardDetails.vue
index 8956f92..2970577 100644
--- a/components/ProductCardDetails.vue
+++ b/components/ProductCardDetails.vue
@@ -110,6 +110,7 @@
 </template>
 
 <script>
+import { mapState } from 'pinia'
 import DOMPurify from 'dompurify'
 import socialShare from '~/utils/socialShare'
 export default {
@@ -138,7 +139,9 @@ export default {
       geolocation: null,
     }
   },
-
+  computed: {
+    ...mapState(useAuthStore, ['id', 'access']),
+  },
   mounted() {
     this.productUrl = window.location.href
     this.sendLog('view')
@@ -173,6 +176,7 @@ export default {
         })
       }
     },
+    // TODO: implement buyIntent (review functionality)
     buyIntent() {
       this.sendLog('shop')
       return this.product.url
@@ -208,10 +212,13 @@ export default {
     async sendLog(action) {
       const geo = await this.getPosition()
       try {
-        const { data } = await this.$axios.get(
-          'https://api.ipify.org?format=json'
-        )
-        const ip = data.ip
+        const config = useRuntimeConfig()
+        const accessToken = this.access
+        const response = await $fetch('https://api.ipify.org?format=json', {
+          baseURL: config.public.baseURL,
+          method: 'GET'
+        })
+        const ip = response.ip
         const object = {
           action: action,
           action_object: {
@@ -219,10 +226,21 @@ export default {
             id: this.product.id,
           },
         }
+        console.log('Sending log OBJECT:', object)
         if (ip) object.ip = ip
         if (geo) object.geo = geo
-        await this.$api.post(`/stats/me/`, object)
-      } catch {}
+        //TODO: review problems with 406 error backend
+        await $fetch(`/stats/me/`, {
+          baseURL: config.public.baseURL,
+          method: 'POST',
+          body: object,
+          headers: {
+              Authorization: `Bearer ${accessToken}`
+            }
+        })
+      } catch (error) {
+        console.error('Error sending log:', error)
+      }
     },
 
     shareFacebook() {
diff --git a/pages/c/[id].vue b/pages/c/[id].vue
index b2428ea..cbfec08 100644
--- a/pages/c/[id].vue
+++ b/pages/c/[id].vue
@@ -1,15 +1,426 @@
 <template>
-  <div>
-    c/id page
+  <div class="container">
+    <div class="row c-description">
+      <div class="col-md-4">
+        <div class="c-image-container">
+          <img v-if="coop?.logo" :src="coop?.logo" alt="" />
+          <img v-else src="@/assets/img/latienda-product-default.svg" alt="" />
+        </div>
+      </div>
+      <div class="col-md-6">
+        <h1 class="coop-name">{{ coop?.company_name }}</h1>
+        <p class="coop-text">
+          {{ coop?.description }}
+        </p>
+        <div class="tags_container">
+          <NuxtLink
+            v-for="n in coop?.tags"
+            :key="n"
+            :to="tagRoute(n)"
+            class="tag_container"
+          >
+            <img class="tag_img" src="@/assets/img/latienda-tag.svg" />
+            <span>{{ n }}</span>
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+    <div class="row coop-links">
+      <div class="col-md-4">
+        <BButton
+          v-if="coop?.shop_link"
+          class="div-link"
+          align="center"
+          :href="coop?.shop_link"
+          target="_blank"
+        >
+          <img class="div-link-img" src="@/assets/img/latienda-tienda.svg" />
+          <span>Tienda online</span>
+        </BButton>
+        <BButton
+          v-if="coop?.web_link"
+          class="div-link"
+          align="center"
+          :href="coop?.web_link"
+          target="_blank"
+        >
+          <img class="div-link-img" src="@/assets/img/latienda-web.svg" />
+          <span>Página web</span>
+        </BButton>
+      </div>
+      <div class="col-md-4">
+        <div v-if="coop?.mobile || coop?.phone" class="div-action tel">
+          <img
+            class="div-action-img"
+            src="@/assets/img/latienda-telefono.svg"
+          />
+          <span
+            >{{ coop?.phone }} <br />
+            {{ coop?.mobile }}</span
+          >
+        </div>
+        <div v-if="coop?.email" class="div-action mail">
+          <img class="div-action-img" src="@/assets/img/latienda-email.svg" />
+          <span>{{ coop?.email }}</span>
+        </div>
+      </div>
+      <div class="col-md-4">
+        <div v-if="coop?.address" class="div-action address">
+          <img class="div-action-img" src="@/assets/img/latienda-casa.svg" />
+          <span>{{ coop?.address }}</span>
+        </div>
+        <div v-if="coop?.city" class="div-action location">
+          <img
+            class="div-action-img"
+            src="@/assets/img/latienda-ubicacion.svg"
+          />
+          <span>{{ coop?.city }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12 c-tabs">
+        <div>
+          <BCard no-body>
+            <BTabs card>
+              <BTab title="Devoluciones, garantías y reembolsos" active>
+                <BCardText>
+                  {{
+                    coop?.sale_terms ||
+                    'Consultar con la cooperativa para más información'
+                  }}
+                </BCardText>
+              </BTab>
+              <BTab title="Envío">
+                <BCardText>
+                  {{
+                    coop?.shipping_terms ||
+                    'Consultar con la cooperativa para más información'
+                  }}
+                </BCardText>
+              </BTab>
+            </BTabs>
+          </BCard>
+        </div>
+      </div>
+    </div>
+    <div v-if="slicedProducts.length !== 0">
+      {{ slicedProducts }} productos encontrados
+      <div v-for="product in slicedProducts" :key="product.id">
+        <ProductCard :key="product.key" :product="product" />
+      </div>
+      <BPagination
+        v-model="currentPage"
+        :v-if="products"
+        class="pagination"
+        :total-rows="rows"
+        :per-page="perPage"
+      />
+    </div>
   </div>
 </template>
 
 <script>
-  export default {
-    
-  }
+import { mapState } from 'pinia'
+export default {
+  setup(){
+    definePageMeta({
+      layout: 'main',
+    })
+  },
+  //TODO: implement head() method
+  // head() {
+  //   return {
+  //     title: `latienda.coop | ${this.coop?.company_name}`,
+  //     meta: [
+  //       {
+  //         hid: 'description',
+  //         name: 'description',
+  //         content: this.coop?.description,
+  //       },
+  //       { property: 'og:title', content: this.coop?.company_name },
+  //       { property: 'og:description', content: this.coop?.description },
+  //       { property: 'og:image', content: this.coop?.logo },
+  //       { property: 'og:url', content: this.coop?.web_link },
+  //       { name: 'twitter:card', content: 'summary_large_image' },
+  //     ],
+  //   }
+  // },
+  data() {
+    return {
+      coop: null,
+      products: null,
+      currentPage: 1,
+      perPage: 10,
+    }
+  },
+  computed: {
+    ...mapState(useAuthStore, ['id', 'access']),
+    rows() {
+      return this.products?.length
+    },
+    slicedProducts() {
+      const initial = (this.currentPage - 1) * this.perPage
+      const final = this.currentPage * this.perPage
+      const items = this.products ? this.products?.slice(initial, final) : []
+      return items
+    },
+  },
+
+  async created() {
+    try {
+      const config = useRuntimeConfig()
+      const $route = useRoute()
+      this.coop  = await $fetch(`/companies/${$route.params.id}/`,
+        {
+          baseURL: config.public.baseURL,
+          method: 'GET',
+        }
+      )
+      this.products = await $fetch(
+        `/products?company=${route.params.id}`,
+        {
+          baseURL: config.public.baseURL,
+          method: 'GET',
+        }
+      )
+
+    } catch (error) {
+      console.error(error)
+    }
+  },
+
+  mounted() {
+    this.sendLog('view')
+  },
+
+  methods: {
+    tagRoute(tag) {
+      return `/busqueda?tags=${tag}`
+    },
+    async getPosition() {
+      const geoLocation = () =>
+        new Promise((resolve, reject) =>
+          navigator.geolocation.getCurrentPosition(
+            (posData) => {
+              resolve(posData)
+            },
+            (error) => {
+              reject(error)
+            }
+          )
+        )
+      try {
+        const position = await geoLocation()
+        const geo = {
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+        }
+        return geo
+      } catch {
+        const geo = null
+        return geo
+      }
+    },
+
+    async sendLog(action) {
+      const geo = await this.getPosition()
+      try {
+        const config = useRuntimeConfig()
+        const accessToken = this.access
+        const data = await $fetch('https://api.ipify.org?format=json', {
+          baseURL: config.public.baseURL,
+          method: 'GET'
+        })
+        const ip = data.ip
+        const object = {
+          action: action,
+          action_object: {
+            model: 'company',
+            id: this.coop?.id,
+          },
+        }
+        //console.log('Sending log OBJECT:', object)
+        if (ip) object.ip = ip
+        if (geo) object.geo = geo
+        try {
+          //TODO: review problems with 406 error backend
+          await $fetch(`/stats/me/`, {
+            baseURL: config.public.baseURL,
+            method: 'POST',
+            body: object,
+            headers: {
+              Authorization: `Bearer ${accessToken}`
+            }
+          })
+        } catch (error) {
+          console.error('Error /stats:', error)
+        }
+      } catch (error) {
+        console.error('Error sending log:', error)
+      }
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>
+//global classes for Bootstrap styling
+ul.nav > li.nav-item {
+  font-weight: bolder;
+  :hover {
+    color: $color-navy;
+  }
+  .active {
+    border-top: 4px solid $color-navy;
+    color: $color-navy;
+  }
+}
+</style>
 
-</style>
\ No newline at end of file
+<style lang="scss" scoped>
+.container {
+  margin-top: 80px;
+  margin-bottom: 80px;
+
+  @include mobile {
+    padding: 0.4em 2em;
+  }
+}
+
+.c-description {
+  margin-top: 40px;
+  margin-bottom: 40px;
+  @include mobile {
+    margin-bottom: 0;
+  }
+}
+
+.coop-links {
+  margin-bottom: 40px;
+
+  .div-action {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding-left: 8px;
+    overflow: hidden;
+
+    .img-tel {
+      width: 16px;
+    }
+  }
+
+  .div-link-img,
+  .div-action-img {
+    width: 20px;
+    margin-right: 8px;
+  }
+
+  .div-action-img {
+    margin-left: 5px;
+  }
+}
+
+.c-image-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  img {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+  }
+}
+
+.coop-name {
+  font-size: $xl;
+  color: $color-navy;
+  text-transform: capitalize;
+}
+.coop-text {
+  margin-top: 8px;
+  font-family: $font-secondary;
+  font-size: $s;
+  color: $color-greytext;
+}
+
+.div-link:hover {
+  box-shadow: 0 4px 16px rgba(99, 99, 99, 0.2);
+  transition: all 0.2s ease;
+}
+
+.div-link {
+  width: 100%;
+  border: 3px solid $color-orange;
+  border-radius: 5px;
+  background-color: $color-light;
+  font-weight: $bold;
+  padding: 15px 0;
+  margin-bottom: 5px;
+
+  span {
+    color: $color-orange;
+  }
+}
+
+.div-action {
+  width: 100%;
+  background-color: $color-grey-nav;
+  border: none;
+  color: $color-greytext;
+  font-family: $font-secondary;
+  font-size: $s;
+  padding: 20px 0;
+  margin-bottom: 5px;
+}
+
+.tag_container {
+  margin: 5px 6px 0 0;
+  border: 2px solid $color-greylayout;
+  border-radius: 5px;
+  padding: 6px 10px;
+  display: inline-block;
+  font-family: $font-secondary;
+  font-size: $xs;
+  color: $color-greytext;
+
+  .tag_img {
+    width: 18px;
+  }
+}
+
+.c-tabs {
+  margin-bottom: 40px;
+
+  .b-tabs {
+    font-weight: $bold;
+    color: $color-navy;
+    font-size: $m;
+  }
+
+  h2 {
+    font-weight: 700;
+    color: $color-navy;
+    font-size: $l;
+    margin: 20px auto;
+  }
+
+  p {
+    margin-top: 8px;
+    font-family: Noto Sans, sans-serif;
+    font-size: $s;
+    color: $color-greytext;
+  }
+}
+
+.pagination {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/pages/c/index.vue b/pages/c/index.vue
index 9ee4414..12caead 100644
--- a/pages/c/index.vue
+++ b/pages/c/index.vue
@@ -1,15 +1,192 @@
 <template>
-  <div>
-    pagina cooperativas c/index
+  <div class="container mt-5">
+    <div class="row justify-content-center">
+      <div class="col-10 coopcard-list">
+        <h1 class="title">Últimas cooperativas añadidas</h1>
+        <p class="help">
+          Si quieres que tu cooperativa forme parte de este gran proyecto
+          registrate en el siguiente
+          <NuxtLink to="/registro/cooperativa"><b>formulario</b></NuxtLink
+          >.
+        </p>
+        <div class="form-container">
+          <form class="search-container" @submit.prevent="search">
+            <input
+              v-model="searchText"
+              class="search-text"
+              type="text"
+              autocomplete="off"
+              placeholder="Buscar cooperativas"
+            />
+            <img
+              class="search-icon"
+              src="@/assets/img/latienda-search-blue.svg"
+              alt="latienda.coop-search"
+              @click="search"
+            />
+          </form>
+        </div>
+        <div v-for="coop in companyList" :key="coop.id">
+          <CoopCard :coop="coop" />
+        </div>
+      </div>
+    </div>
+    <!-- <BPagination
+      v-model="currentPage"
+      class="pagination"
+      :total-rows="rows"
+      :per-page="perPage"
+    /> -->
   </div>
 </template>
 
 <script>
-  export default {
-    
-  }
+export default {
+  setup(){
+    definePageMeta({
+      layout: 'mainbanner',
+    })
+  },
+
+  data() {
+    return {
+      currentPage: 1,
+      perPage: 10,
+      searchText: '',
+      companyList: null
+    }
+  },
+  // computed: {
+  //   rows() {
+  //     return this.companyList?.length
+  //   },
+  //   slicedCompanies() {
+  //     const initial = (this.currentPage - 1) * this.perPage
+  //     const final = this.currentPage * this.perPage
+  //     const items = this.companyList ? this.companyList.slice(initial, final) : []
+  //     return items
+  //   },
+  // },
+  mounted() {
+    this.getCompanies()
+  },
+  methods: {
+    async getCompanies() {
+      const config = useRuntimeConfig()
+      try {
+        const response = await $fetch(`/companies/sample/`, {
+          baseURL: config.public.baseURL,
+          method: 'GET'
+        })
+        this.companyList = response
+      } catch (error) {
+        console.error('Error fetching companies:', error)
+      }
+    },
+    async search() {
+      const config = useRuntimeConfig()
+      if (this.searchText) {
+        const response = await $fetch(`/search/companies/?search=${this.searchText}`, {
+          baseURL: config.public.baseURL,
+          method: 'GET'
+        })
+        this.companyList = response
+      } else {
+        const response = await $fetch(`/companies/sample/`, {
+          baseURL: config.public.baseURL,
+          method: 'GET'
+        })
+        this.companyList = response
+      }
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>
+.container {
+  margin-top: 80px;
+  margin-bottom: 80px;
+}
 
-</style>
\ No newline at end of file
+.title {
+  margin-top: 60px;
+  margin-bottom: 40px;
+  font-size: $xxl;
+  color: $color-navy;
+}
+
+.form-container {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.coopcard-list {
+  margin-bottom: 40px;
+}
+
+.pagination {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.help {
+  color: $color-navy;
+  margin-bottom: 0px;
+  font-size: $s;
+}
+
+.search-container {
+  border: none;
+  border-radius: 5px;
+  background: $color-light-green;
+  width: 50%;
+  height: 32px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 50px;
+  margin-bottom: 50px;
+
+  @include mobile {
+    width: 100%;
+  }
+}
+
+.search-container img,
+input,
+select {
+  padding: 6px 10px;
+  margin-right: 16px;
+  background: transparent;
+  font-size: $xl;
+  border: none;
+}
+
+.search-icon {
+  float: right;
+  height: 90%;
+}
+
+.search-text {
+  outline: none;
+  width: 100%;
+  text-align: center;
+  color: $color-navy;
+  font-size: $s;
+  font-weight: $regular;
+}
+
+::placeholder {
+  color: $color-navy;
+  font-size: $s;
+}
+
+select {
+  --webkit-appearance: auto;
+}
+</style>
diff --git a/stores/auth.ts b/stores/auth.ts
index 2d04e03..043935a 100644
--- a/stores/auth.ts
+++ b/stores/auth.ts
@@ -29,6 +29,7 @@ export const useAuthStore = defineStore('auth', {
         method: 'POST',
         body: { email, password }
       })
+      console.log('Login payload:', payload)
       this.setPayload(payload)
     },
 
@@ -41,7 +42,11 @@ export const useAuthStore = defineStore('auth', {
           Authorization: `Bearer ${this.access}`
         }
       })
-      this.setUserData(data)
+      try {
+        this.setUserData(data)
+      } catch (error) {
+        console.error('Error setting user data:', error)
+      }
     },
 
     async refresh() {

From d609660dde2e2c57594fde5b6317292f7f3ab81b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Wed, 20 Aug 2025 12:37:20 +0200
Subject: [PATCH 04/21] edit cooperative page and functionality

---
 components/CompanyForm.vue         | 441 +++++++++++++++++++++++++++++
 components/FormInput.vue           |   1 +
 components/FormInputImage.vue      | 110 +++++++
 components/NavBarEditar.vue        |   8 +-
 package-lock.json                  |  37 +++
 package.json                       |   1 +
 pages/editar/cooperativa/index.vue |  59 ++++
 pages/editar/perfil/index.vue      |  22 +-
 pages/index.vue                    |   3 +-
 stores/auth.ts                     |   2 +-
 10 files changed, 671 insertions(+), 13 deletions(-)
 create mode 100644 components/CompanyForm.vue
 create mode 100644 components/FormInputImage.vue
 create mode 100644 pages/editar/cooperativa/index.vue

diff --git a/components/CompanyForm.vue b/components/CompanyForm.vue
new file mode 100644
index 0000000..69b2383
--- /dev/null
+++ b/components/CompanyForm.vue
@@ -0,0 +1,441 @@
+<template>
+  <BModal 
+      id="modal-center" 
+      v-model="activeModal" 
+      centered 
+      title="latienda.coop" 
+      :ok-variant="modalColor"> {{ modalText }}
+  </BModal>
+  <form class="form" @submit.prevent="submitCompany">
+    <FormHeader title="general" />
+    <p class="help-text">
+      Estos son los datos básicos de la cooperativa. Procura completar el mayor
+      número de campos posible.
+    </p>
+    <fieldset class="fieldset fieldset-general">
+      <div class="cont">
+        <FormInput 
+          v-model="form.cif" 
+          :value="form.cif ? form.cif : ''"
+          type="text" 
+          label-text="C.I.F." 
+          @input="form.cif = $event" 
+          />
+        <FormInput
+          v-model="form.company_name"
+          :value="form.company_name ? form.company_name : ''"
+          type="text"
+          label-text="Nombre de la cooperativa"
+          @input="form.company_name = $event"
+        />
+      </div>
+      <div class="cont">
+        <FormInput
+          v-model="form.short_name"
+          :value="form.short_name ? form.short_name : ''"
+          type="text"
+          label-text="Nombre corto"
+          @input="form.short_name = $event"
+        />
+        <FormInput
+          v-model="form.web_link"
+          :value="form.web_link ? form.web_link : ''"
+          type="text"
+          label-text="Sitio web"
+          @input="form.web_link = $event"
+        />
+        <small v-if="!isValid(form.shop_link)" class="error"
+          >La url no es válida</small
+        >
+      </div>
+      <div class="cont">
+        <FormInput
+          v-model="form.email"
+          :value="form.email ? form.email : ''"
+          type="text"
+          label-text="Email"
+          @input="form.email = $event"
+        />
+        <FormInput
+          v-model="form.phone"
+          :value="form.phone ? form.phone : ''"
+          type="text"
+          label-text="Teléfono"
+          @input="form.phone = $event"
+        />
+      </div>
+      <div class="cont">
+        <FormInput
+          v-model="form.mobile"
+          :value="form.mobile ? form.mobile : ''"
+          type="text"
+          label-text="Móvil"
+          @input="form.mobile = $event"
+        />
+        <FormInput
+          v-model="form.other_phone"
+          :value="form.other_phone ? form.other_phone : ''"
+          type="text"
+          label-text="Otro teléfono"
+          @input="form.other_phone = $event"
+        />
+      </div>
+      <div class="cont-col">
+        <label for="imagen">Logo</label>
+        <ClientOnly>
+          <FormInputImage :image-url="form.logo" @change="handleImage($event)" />
+        </ClientOnly>
+      </div>
+      <div class="cont-col">
+        <label for="tags-basic">Palabras clave</label>
+        <BFormTags
+          v-model="form.tags"
+          placeholder="Añade palabras clave"
+          input-id="tags-basic"
+        />
+      </div>
+      <div class="cont-col">
+        <label for="">Descripción</label>
+        <textarea v-model="form.description" class="textarea" type="text" />
+      </div>
+    </fieldset>
+
+    <FormHeader title="tienda online" />
+    <p class="help-text">
+      Indica si la cooperativa dispone de tienda online. En caso afirmativo,
+      indica su url y la plataforma utilizada en el seleccionable. Si utilizas
+      WooCommerce, puedes indicar su API para sincronizar automáticamente todos
+      los productos.
+      <a href="#">Sigue estos pasos para obtener la API.</a>
+    </p>
+    <fieldset class="fieldset">
+      <div class="cont">
+        <div>
+          <BFormCheckbox
+            v-model="form.shop"
+            label="¿Tiene tienda online?"
+            class="label"
+            :value="form.shop"
+          >Tienda online</BFormCheckbox>
+        </div>
+        <FormInput
+          v-model="form.shop_link"
+          :value="form.shop_link ? form.shop_link : ''"
+          type="text"
+          label-text="Enlace a tienda online"
+          @input="form.shop_link = $event"
+        />
+        <small v-if="!isValid(form.shop_link)" class="error" 
+          >La url no es válida</small
+        >
+      </div>
+      <div class="cont-col">
+        <label for="select-shop">Plataforma</label>
+        <BFormSelect id="select-shop" v-model="form.platform"  name="" >
+          <option selected disabled value="">Plataforma</option>
+          <option
+            v-for="(category, key) in categories"
+            :key="key"
+            :value="category.value"
+          >
+            {{ category.text }}
+          </option>
+        </BFormSelect>
+      </div>
+      <div v-if="form.platform === 'WOO_COMMERCE'" class="cont-col">
+        <h3>Configuración de WooCommerce</h3>
+        <div class="cont">
+          <FormInput
+            v-model="form.credentials.secret"
+            :value="form.credentials.secret ? form.credentials.secret : ''"
+            type="text"
+            label-text="API WooCoomerce clave secreta"
+            @input="form.credentials.secret = $event"
+          />
+          <FormInput
+            v-model="form.credentials.key"
+            :value="form.credentials.key ? form.credentials.key : ''"
+            type="text"
+            label-text="API WooCoomerce clave pública"
+            @input="form.credentials.key = $event"
+          />
+        </div>
+      </div>
+    </fieldset>
+
+    <FormHeader title="localización" />
+    <p class="help-text">
+      La geolocalización nos ayudará a mostrar los productos a aquellos usuarios
+      que estén cerca de tu posición.
+    </p>
+    <fieldset class="fieldset">
+    <!-- TODO: Arreglar este componente: -->
+      <!-- <GoogleAddress :value="form.address" @added-data="getPlace" /> -->
+      <br />
+      <div class="cont">
+        <FormInput
+          v-model="form.shop_rss_feed"
+          :value="form.shop_rss_feed ? form.shop_rss_feed : ''"
+          type="text"
+          label-text="Enlace RSS"
+          @input="form.shop_rss_feed = $event"
+        />
+      </div>
+    </fieldset>
+
+    <FormHeader title="términos y condiciones" />
+    <p class="help-text help-text-terms">
+      En estos textos podrás indicar las condiciones de venta o condiciones de
+      envío de la cooperativa. Si no tienes claro qué texto añadir, puedes hacer
+      <a @click="loadText">click aquí para cargar un texto predefinido</a>
+      que podrás editar. Ten en cuenta que al clicar se borrará el contenido de
+      ambos campos.
+    </p>
+
+    <fieldset class="fieldset">
+      <div class="cont-col">
+        <label for="">Condiciones de venta</label>
+        <textarea v-model="form.sale_terms" class="textarea" type="text" />
+        <label for="">Condiciones de envío</label>
+        <textarea v-model="form.shipping_terms" class="textarea" type="text" />
+        <FormInput
+          v-model="form.shipping_cost"
+          :value="form.shipping_cost ? form.shipping_cost : ''"
+          type="text"
+          label-text="Gastos de envío"
+          @input="form.shipping_cost = $event"
+        />
+      </div>
+    </fieldset>
+    <div align="center">
+      <SubmitButton text="guardar" image-url="" />
+    </div>
+  </form>
+</template>
+
+<script>
+import { useAuthStore } from '@/stores/auth'
+export default {
+  setup() {
+    const auth = useAuthStore();
+    return {
+      auth,
+    }
+  },
+  data() {
+    return {
+      categories: [
+        { text: 'WooCommerce', value: 'WOO_COMMERCE' },
+        { text: 'Prestashop', value: 'PRESTASHOP' },
+        { text: 'Shopify', value: 'SHOPIFY' },
+      ],
+      form: {
+        id: null,
+        cif: '',
+        company_name: '',
+        short_name: '',
+        web_link: '',
+        shop: false,
+        shop_link: '',
+        platform: '',
+        email: '',
+        logo: null,
+        city: null,
+        address: '',
+        tags: [],
+        geo: null,
+        phone: '',
+        credentials: { secret: '', key: '' },
+        mobile: '',
+        other_phone: '',
+        description: '',
+        shop_rss_feed: '',
+        sale_terms: '',
+        shipping_cost: '',
+        sync: false,
+      },
+
+      default_text: {
+        sale_terms: `Devoluciones - derecho de desistimiento
+  
+  Puedes devolver un pedido comprado a través del vendedor en el plazo de 14 días desde que se efectuó la entrega ejerciendo el derecho de desistimiento. Para cualquier otra duda puede consultar a la cooperativa que le ha vendido el producto.
+  
+  Garantía Legal
+  
+  Si el producto recibido no concuerda con la descripción o es defectuoso dentro de los 24 meses siguientes a su recepción, tiene derecho de manera gratuita a la reparación, reemplazo o reembolso del producto por parte del vendedor.`,
+
+        shipping_terms: `Salvo que se indique lo contrario los pedidos gestionados por esta cooperativa se envían en un plazo de dos a cinco días desde la recepción del pedido. Se le avisará si su pedido sufre algún retraso o se cancela.`,
+      },
+
+      activeModal: false,
+      modalText: '',
+      modalColor: '',
+    }
+  },
+  
+  async mounted() {
+    await this.getCompany()
+  },
+
+  methods: {
+    isValid(url) {
+      if (url) return /^(ftp|http|https):\/\/[^ "]+\.+[^ "]+$/.test(url)
+      else return true
+    },
+    loadText() {
+      this.form.sale_terms = this.default_text.sale_terms
+      this.form.shipping_terms = this.default_text.shipping_terms
+    },
+    getPlace(value) {
+      if (value) {
+        this.form.address = value.address
+        this.form.geo = value.geo
+        this.form.city = value.city
+      }
+    },
+    async getCompany() {
+      const config = useRuntimeConfig()
+      const data = await $fetch('my_company/', {
+        baseURL: config.public.baseURL,
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${this.auth.access}`
+        }
+      })
+      if (data) {
+        this.form = data.company
+        if (this.form.credentials === null)
+          this.form.credentials = { secret: '', key: '' }
+      }
+    },
+    async handleImage(e) {
+      this.form.logo = e
+    },
+
+    parseForm() {
+      const formData = new FormData()
+      Object.keys(this.form).forEach((key) => {
+        if ((key === 'geo') | (key === 'tags') | (key === 'credentials'))
+          formData.append(key, JSON.stringify(this.form[key]))
+        else if (key === 'city') formData.append(key, this.form[key])
+        else if (this.form[key] || this.form[key] === '')
+          formData.append(key, this.form[key])
+      })
+
+      if (typeof formData.get('logo') === 'string') {
+        formData.delete('logo')
+      }
+
+      return formData
+    },
+
+    async submitCompany() {
+      const formData = this.parseForm()
+      console.log('Submitting company data:', formData)
+      try {
+        const config = useRuntimeConfig()
+        await $fetch(`/companies/${this.form.id}/`, {
+          baseURL: config.public.baseURL,
+          method: 'PATCH',
+          //TODO: review with Diego. I changed formaData with this.form
+          body: this.form,
+          headers: {
+          Authorization: `Bearer ${this.auth.access}`
+        }
+        })
+        this.modalText = 'Actualizado correctamente'
+        this.modalColor = 'success'
+        this.activeModal = true
+      } catch (error) {
+        this.modalText = 'Ha habido un error'
+        this.modalColor = 'danger'
+        this.activeModal = true
+        console.error('Error al actualizar la cooperativa:', error)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.form {
+  @include desktop {
+    width: 40%;
+  }
+  @include tablet {
+    width: 60%;
+  }
+  @include mobile {
+    width: 90%;
+  }
+
+  .imagenInput {
+    font-size: $s;
+  }
+
+  label, .label {
+    text-align: left;
+    color: $color-navy;
+    font-weight: $bold;
+    font-size: $xs;
+  }
+
+  .textarea {
+    width: 100%;
+    background-color: $color-grey-inputs;
+    border: 1px solid $color-grey-inputs-border;
+    border-radius: 4px;
+    padding: 10px 5px;
+    display: block;
+    margin-bottom: 10px;
+  }
+}
+.fieldset {
+  margin-bottom: 70px;
+  align-items: left;
+}
+.cont {
+  display: flex;
+  justify-content: space-between;
+
+  @include mobile {
+    flex-direction: column;
+  }
+}
+
+.cont-col {
+  margin: 15px 0;
+  display: flex;
+  flex-direction: column;
+
+  h3 {
+    color: $color-navy;
+    font-size: $m;
+    margin: 20px 0 15px 0;
+  }
+}
+.help-text {
+  text-align: left;
+  font-size: $xs;
+  text-align: justify;
+  font-weight: $regular;
+  color: $color-greylayout;
+  font-family: $font-secondary;
+  background-color: $color-light;
+  margin-bottom: 20px;
+  margin-top: -10px;
+
+  a {
+    cursor: pointer;
+    text-decoration: underline;
+    color: $color-greytext;
+  }
+
+  @include mobile {
+    text-align: left;
+  }
+}
+.error {
+  color: crimson;
+}
+</style>
diff --git a/components/FormInput.vue b/components/FormInput.vue
index e05ba91..caa6a42 100644
--- a/components/FormInput.vue
+++ b/components/FormInput.vue
@@ -4,6 +4,7 @@
       >{{ labelText + (required ? '*' : '') }}
       <input
         v-model="inputValue"
+        :value="value ? value : inputValue"
         :required="required"
         :type="type"
         :step="step"
diff --git a/components/FormInputImage.vue b/components/FormInputImage.vue
new file mode 100644
index 0000000..5c1b8b2
--- /dev/null
+++ b/components/FormInputImage.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="form-container">
+    <input class="input" type="file" @change="loadImage" />
+
+    <!-- Editor -->
+    <div v-show="edit">
+      <cropper
+        ref="cropperRef"
+        class="cropper"
+        :src="croppieImage"
+        :stencil-props="{ aspectRatio: 1 }"
+      />
+      <div>
+        <button class="filter-button" @click.prevent="crop">Aplicar</button>
+        <button @click.prevent="cancel">Cancelar</button>
+      </div>
+    </div>
+
+    <!-- Result -->
+    <div v-show="cropped && !edit">
+      <img :src="cropped" @click.prevent="editImage" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Cropper } from "vue-advanced-cropper";
+import "vue-advanced-cropper/dist/style.css";
+
+export default {
+  components: { Cropper },
+  props: {
+    imageUrl: {
+      type: String,
+      default: null,
+    },
+  },
+  emits: ["change"],
+  data() {
+    return {
+      croppieImage: "",
+      cropped: null,
+      edit: false,
+    };
+  },
+  mounted() {
+    if (typeof this.imageUrl === "string") {
+      this.croppieImage = this.imageUrl;
+      this.cropped = this.imageUrl;
+    }
+  },
+  methods: {
+    editImage() {
+      this.edit = true;
+    },
+    cancel() {
+      this.edit = false;
+    },
+    loadImage(e) {
+      const file = e.target.files?.[0];
+      if (!file) return;
+
+      const reader = new FileReader();
+      reader.onload = (evt) => {
+        this.croppieImage = evt.target.result;
+        this.edit = true;
+      };
+      reader.readAsDataURL(file);
+    },
+    crop() {
+      const canvas = this.$refs.cropperRef.getResult().canvas;
+      if (canvas) {
+        const base64 = canvas.toDataURL("image/png");
+        this.cropped = base64;
+
+        // Emitir como File
+        canvas.toBlob((blob) => {
+          if (blob) {
+            const fileName =
+              Math.random().toString(36).substring(2, 15) + ".png";
+            const file = new File([blob], fileName, { type: "image/png" });
+            this.$emit("change", file);
+          }
+        }, "image/png");
+      }
+      this.edit = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+}
+.cropper {
+  width: 500px;
+  height: 500px;
+}
+.filter-button {
+  background-color: $color-navy;
+  color: $color-light;
+  font-size: $xs;
+  padding: 0.5em 0.8em;
+  border-radius: 5px;
+}
+.input {
+  max-width: 100%;
+}
+</style>
diff --git a/components/NavBarEditar.vue b/components/NavBarEditar.vue
index 37160ac..8668c74 100644
--- a/components/NavBarEditar.vue
+++ b/components/NavBarEditar.vue
@@ -38,13 +38,17 @@ export default {
     async logout() {
       await this.auth.logout()
     },
-    //TODO: check if cooperative is validated is working
     async checkIfCoopValidated() {
+      const config = useRuntimeConfig()
+      const accessToken = this.auth.access
       const result = await $fetch('my_company/', {
         baseURL: config.public.baseURL,
         method: 'GET',
+        headers: {
+          Authorization: `Bearer ${accessToken}`
+        }
       })
-      this.coopIsValidated = result.data.company.is_validated
+      this.coopIsValidated = result.company.is_validated
     },
   },
 }
diff --git a/package-lock.json b/package-lock.json
index 48d8e98..426efc1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "pinia": "^3.0.3",
         "pinia-plugin-persistedstate": "^4.4.1",
         "vue": "^3.5.18",
+        "vue-advanced-cropper": "^2.8.9",
         "vue-router": "^4.5.1",
         "vue3-carousel": "^0.16.0"
       },
@@ -6043,6 +6044,12 @@
         "consola": "^3.2.3"
       }
     },
+    "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==",
+      "license": "MIT"
+    },
     "node_modules/clean-regexp": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/clean-regexp/-/clean-regexp-1.0.0.tgz",
@@ -6721,6 +6728,12 @@
       "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
       "license": "MIT"
     },
+    "node_modules/debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
@@ -7111,6 +7124,12 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "license": "MIT"
     },
+    "node_modules/easy-bem": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.1.1.tgz",
+      "integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A==",
+      "license": "MIT"
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -14031,6 +14050,24 @@
         }
       }
     },
+    "node_modules/vue-advanced-cropper": {
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/vue-advanced-cropper/-/vue-advanced-cropper-2.8.9.tgz",
+      "integrity": "sha512-1jc5gO674kVGpJKekoaol6ZlwaF5VYDLSBwBOUpViW0IOrrRsyLw6XNszjEqgbavvqinlKNS6Kqlom3B5M72Tw==",
+      "license": "MIT",
+      "dependencies": {
+        "classnames": "^2.2.6",
+        "debounce": "^1.2.0",
+        "easy-bem": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-bundle-renderer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/vue-bundle-renderer/-/vue-bundle-renderer-2.1.2.tgz",
diff --git a/package.json b/package.json
index a2471ca..77deeaa 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "pinia": "^3.0.3",
     "pinia-plugin-persistedstate": "^4.4.1",
     "vue": "^3.5.18",
+    "vue-advanced-cropper": "^2.8.9",
     "vue-router": "^4.5.1",
     "vue3-carousel": "^0.16.0"
   },
diff --git a/pages/editar/cooperativa/index.vue b/pages/editar/cooperativa/index.vue
new file mode 100644
index 0000000..36aa7eb
--- /dev/null
+++ b/pages/editar/cooperativa/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <BContainer class="container">
+    <BRow align-h="center">
+      <BCol class="edit-coop">
+        <h1 class="title">Editar Cooperativa</h1>
+        <div class="form-container">
+          <CompanyForm />
+        </div>
+      </BCol>
+    </BRow>
+  </BContainer>
+</template>
+
+<script>
+export default {
+  setup (){
+    definePageMeta({
+      layout: 'editar',
+      middleware: 'auth',
+      auth: { authority: 'COOP_MANAGER' }
+    })
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  margin-top: 40px;
+  margin-bottom: 80px;
+}
+.edit-coop {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.title {
+  color: $color-navy;
+  font-size: $xxl;
+  margin-bottom: 50px;
+  text-align: left;
+  @include desktop {
+    width: 40%;
+  }
+  @include tablet {
+    width: 60%;
+  }
+  @include mobile {
+    width: 90%;
+    margin-top: 70px;
+  }
+}
+
+.form-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>
diff --git a/pages/editar/perfil/index.vue b/pages/editar/perfil/index.vue
index b292fcc..64bc9e7 100644
--- a/pages/editar/perfil/index.vue
+++ b/pages/editar/perfil/index.vue
@@ -6,12 +6,14 @@
           <h1 class="title">Editar perfil</h1>
           <FormInput
             v-model="form.full_name"
+            :value="form.full_name ? form.full_name : ''"
             type="text"
             label-text="Nombre de usuario"
             @input="form.full_name = $event"
           />
           <FormInput
             v-model="form.email"
+            :value="form.email ? form.email : ''"
             type="text"
             label-text="Email"
             @input="form.email = $event"
@@ -55,26 +57,28 @@ export default {
       success: false,
     }
   },
-  async fetch() {
+  computed: {
+    ...mapState(useAuthStore, ['id', 'access']),
+  },
+  async created() {
     const config = useRuntimeConfig()
     try {
-      await $fetch(`/my_user/`, {
+      const response = await $fetch(`/my_user/`, {
         baseURL: config.public.baseURL,
         method: 'GET',
-        body: JSON.stringify(this.form),
+        headers: {
+          Authorization: `Bearer ${this.access}`
+        }
       })
       //console.log('User data fetched successfully:', response)
+      this.form.full_name = response.full_name
+      this.form.email = response.email
+      this.form.notify = response.notify
     } catch (err) {
       console.error('Error fetching user data:', err)
       this.error = true
       return
     }
-    this.form.full_name = response.full_name
-    this.form.email = response.email
-    this.form.notify = response.notify
-  },
-  computed: {
-    ...mapState(useAuthStore, ['id', 'access']),
   },
   methods: {
     ...mapActions( useAuthStore, ['setUser']),
diff --git a/pages/index.vue b/pages/index.vue
index ccf59b6..b3ca961 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -79,8 +79,9 @@ export default {
   },
   async mounted() {
     try {
+      const config = useRuntimeConfig()
       const response = await $fetch('/initial', { 
-        baseURL: this.$config.public.baseURL,
+        baseURL: config.public.baseURL,
         method: 'GET'
       })
       this.cards = response.cards
diff --git a/stores/auth.ts b/stores/auth.ts
index 043935a..26b7428 100644
--- a/stores/auth.ts
+++ b/stores/auth.ts
@@ -29,7 +29,7 @@ export const useAuthStore = defineStore('auth', {
         method: 'POST',
         body: { email, password }
       })
-      console.log('Login payload:', payload)
+      //console.log('Login payload:', payload)
       this.setPayload(payload)
     },
 

From 7d5b635f675b74ebc81f8c89883d8fe4326e2355 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Wed, 20 Aug 2025 14:08:18 +0200
Subject: [PATCH 05/21] active/inactive product functionality

---
 pages/editar/productos/[id].vue     |  15 ++
 pages/editar/productos/crear.vue    |  15 ++
 pages/editar/productos/importar.vue |  15 ++
 pages/editar/productos/index.vue    | 262 ++++++++++++++++++++++++++++
 4 files changed, 307 insertions(+)
 create mode 100644 pages/editar/productos/[id].vue
 create mode 100644 pages/editar/productos/crear.vue
 create mode 100644 pages/editar/productos/importar.vue
 create mode 100644 pages/editar/productos/index.vue

diff --git a/pages/editar/productos/[id].vue b/pages/editar/productos/[id].vue
new file mode 100644
index 0000000..72aa402
--- /dev/null
+++ b/pages/editar/productos/[id].vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>Editar producto /editar/productos/:id</h1>
+  </div>
+</template>
+
+<script>
+  export default {
+    
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/editar/productos/crear.vue b/pages/editar/productos/crear.vue
new file mode 100644
index 0000000..4c84228
--- /dev/null
+++ b/pages/editar/productos/crear.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>Crear producto /editar/productos/crear</h1>
+  </div>
+</template>
+
+<script>
+  export default {
+    
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/editar/productos/importar.vue b/pages/editar/productos/importar.vue
new file mode 100644
index 0000000..524ba20
--- /dev/null
+++ b/pages/editar/productos/importar.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>Importar producto /editar/productos/importar</h1>
+  </div>
+</template>
+
+<script>
+  export default {
+    
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/editar/productos/index.vue b/pages/editar/productos/index.vue
new file mode 100644
index 0000000..9b97fb4
--- /dev/null
+++ b/pages/editar/productos/index.vue
@@ -0,0 +1,262 @@
+<template>
+  <BContainer class="container">
+    <BRow>
+      <BCol>
+        <h1 class="title">
+          Productos
+          <button
+            class="ml-4 mb-1 btn btn-outline-primary btn-sm"
+            @click="redirectToNewProduct"
+          >
+            +
+          </button>
+        </h1>
+      </BCol>
+    </BRow>
+    <BRow>
+      <BCol class="d-flex flex-row-reverse">
+        <button class="btn btn-secondary" @click="desactivateProducts">
+          Desactivar
+        </button>
+        <button class="btn btn-primary mr-3" @click="activateProducts">
+          Activar
+        </button>
+        <div v-show="selectedItemsIndexes.length !== 0" class="selected-products mr-3">
+          {{ selectedItemsIndexes.length }} productos seleccionados
+        </div>
+      </BCol>
+    </BRow>
+    <BRow>
+      <template v-if="products">
+        <v-data-table
+          v-model="selectedItemsIndexes"
+          show-select
+          :single-select="singleSelect"
+          :headers="headers"
+          :items="products"
+          :search="search"
+          :loading="loading"
+          loading-text="Cargando productos..."
+        >
+          <template #top>
+            <v-toolbar flat color="white">
+              <!-- Search -->
+              <v-text-field
+                v-model="search"
+                append-icon="mdi-magnify"
+                label="Buscar producto"
+                single-line
+                hide-details
+              />
+              <!-- . Search -->
+            </v-toolbar>
+          </template>
+          <template #[`item.active`]="item">
+            <v-icon v-if="item.item.active" small class="mr-2">
+              mdi-check
+            </v-icon>
+            <v-icon v-else small class="mr-2"> mdi-close </v-icon>
+          </template>
+          <template #[`item.actions`]="item">
+            <NuxtLink :to="`/editar/productos/${item.item.id}`">
+              <v-icon small class="mr-2"> mdi-pencil </v-icon>
+            </NuxtLink>
+            <v-icon small class="mr-2" @click="deleteItem(item)">
+              mdi-delete
+            </v-icon>
+          </template>
+        </v-data-table>
+      </template>
+    </BRow>
+    <BModal 
+        id="modal-center" 
+        v-model="activeModal" 
+        centered 
+        title="latienda.coop" 
+        :ok-variant="modalColor"> {{ modalText }}
+      </BModal>
+  </BContainer>
+</template>
+
+<script>
+export default {
+  setup() {
+    definePageMeta({
+      layout: 'editar',
+      middleware: 'auth',
+      auth: { authority: 'COOP_MANAGER' },
+    })
+    const auth = useAuthStore();
+    return {
+      auth
+    }
+  },
+
+  data() {
+    return {
+      products: [],
+      totalProducts: 0,
+      loading: true,
+      singleSelect: false,
+      selectedItemsIndexes: [],
+      search: '',
+      options: {},
+      headers: [
+        { title: 'ID', value: 'id' },
+        { title: 'Nombre', value: 'name' },
+        { title: 'Categoría', value: 'category' },
+        { title: 'Activo', value: 'active' },
+        { title: 'Precio', value: 'price' },
+        { title: 'Fuente', value: 'source' },
+        { title: 'Stock', value: 'stock' },
+        { title: 'Acción', value: 'actions' },
+      ],
+      activeModal: false,
+      modalText: '',
+      modalColor: '',
+    }
+  },
+
+  computed: {
+    selectedItems() {
+      const itemsArr = []
+      this.selectedItemsIndexes.forEach(index => {
+        this.products.forEach(item => {
+          if (item.id === index) {
+            itemsArr.push(item)
+          }
+        })
+      })
+      return itemsArr
+    }
+  },
+
+  async created() {
+    if (this.$route.params.action === 'created') {
+      this.$bvToast.toast(`Producto creado`, {
+        title: 'latienda.coop',
+        autoHideDelay: 5000,
+        appendToast: true,
+        variant: 'success',
+      })
+    }
+    await this.getDataFromApi()
+  },
+
+  methods: {
+    async getDataFromApi() {
+      this.loading = true
+      const config = useRuntimeConfig()
+      const data = await $fetch(`/my_products/`, {
+        baseURL: config.public.baseURL,
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${this.auth.access}`,
+        },
+      })
+      this.products = data
+      this.loading = false
+    },
+
+    async deleteItem(item) {
+      if (confirm('Confirma que quieres eliminar este producto')) {
+        await this.$api.delete(`/my_products/${item.item.id}`)
+        const index = this.products.indexOf(item.item)
+        this.products.splice(index, 1)
+      }
+    },
+
+    async activateProducts() {
+      try {
+        const config = useRuntimeConfig()
+        await this.selectedItems.forEach(async (item) => {
+          await $fetch(`/my_products/${item.id}/`, {
+            baseURL: config.public.baseURL,
+            method: 'PATCH',
+            body: {
+              active: true
+            },
+            headers: {
+              Authorization: `Bearer ${this.auth.access}`
+            }
+          })
+          const index = this.products.indexOf(item)
+          this.products[index].active = true
+        })
+        this.selectedItemsIndexes = []
+        this.modalText = 'Los productos han sido activados correctamente.'
+        this.modalColor = 'success'
+        this.activeModal = true
+      } catch (error) {
+        console.error(error)
+        this.modalText = 'Ha habido un error'
+        this.modalColor = 'danger'
+        this.activeModal = true
+      }
+    },
+    async desactivateProducts() {
+      try {
+        const config = useRuntimeConfig()
+        await this.selectedItems.forEach(async (item) => {
+          await $fetch(`/my_products/${item.id}/`, {
+            baseURL: config.public.baseURL,
+            method: 'PATCH',
+            body: {
+              active: false
+            },
+            headers: {
+              Authorization: `Bearer ${this.auth.access}`
+            }
+          })
+          const index = this.products.indexOf(item)
+          this.products[index].active = false
+        })
+        this.selectedItemsIndexes = []
+        this.modalText = 'Los productos han sido desactivados correctamente.'
+        this.modalColor = 'success'
+        this.activeModal = true
+      } catch (error) {
+        console.error(error)
+        this.modalText = 'Ha habido un error'
+        this.modalColor = 'danger'
+        this.activeModal = true
+      }
+    },
+
+    redirectToNewProduct() {
+      this.$router.push({
+        name: 'editar-productos-crear',
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.container {
+  margin-top: 40px;
+  margin-bottom: 80px;
+}
+.title {
+  color: $color-navy;
+  font-size: $xxl;
+  margin-bottom: 60px;
+  @include mobile {
+    margin-top: 70px;
+  }
+}
+v-toolbar {
+  padding: 0;
+}
+.selected-products {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-items: center;
+}
+</style>

From a4f454d57771a1cc99dcc2aac323891184e0ffb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Wed, 20 Aug 2025 14:42:36 +0200
Subject: [PATCH 06/21] delete product functionality

---
 pages/editar/productos/index.vue | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/pages/editar/productos/index.vue b/pages/editar/productos/index.vue
index 9b97fb4..1c221fa 100644
--- a/pages/editar/productos/index.vue
+++ b/pages/editar/productos/index.vue
@@ -15,10 +15,10 @@
     </BRow>
     <BRow>
       <BCol class="d-flex flex-row-reverse">
-        <button class="btn btn-secondary" @click="desactivateProducts">
+        <button class="btn btn-secondary" :disabled="selectedItemsIndexes.length === 0" @click="desactivateProducts">
           Desactivar
         </button>
-        <button class="btn btn-primary mr-3" @click="activateProducts">
+        <button class="btn btn-primary mr-3" :disabled="selectedItemsIndexes.length === 0" @click="activateProducts">
           Activar
         </button>
         <div v-show="selectedItemsIndexes.length !== 0" class="selected-products mr-3">
@@ -160,9 +160,27 @@ export default {
 
     async deleteItem(item) {
       if (confirm('Confirma que quieres eliminar este producto')) {
-        await this.$api.delete(`/my_products/${item.item.id}`)
-        const index = this.products.indexOf(item.item)
-        this.products.splice(index, 1)
+        const config = useRuntimeConfig()
+        try {
+          await $fetch(`/my_products/${item.item.id}`, {
+            baseURL: config.public.baseURL,
+            method: 'DELETE',
+            headers: {
+              Authorization: `Bearer ${this.auth.access}`,
+            },
+          })
+          const index = this.products.indexOf(item.item)
+          this.products.splice(index, 1)
+          this.selectedItemsIndexes = []
+          this.modalText = 'Los productos han sido eliminados correctamente.'
+          this.modalColor = 'success'
+          this.activeModal = true
+        } catch (error) {
+          console.error(error)
+          this.modalText = 'Ha habido un error'
+          this.modalColor = 'danger'
+          this.activeModal = true
+        }
       }
     },
 

From 2633959ce8afbd0f74062c91c24b4110df36ddff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Wed, 20 Aug 2025 15:08:53 +0200
Subject: [PATCH 07/21] wip editar producto page

---
 components/ProductForm.vue      | 346 ++++++++++++++++++++++++++++++++
 pages/editar/productos/[id].vue | 153 +++++++++++++-
 2 files changed, 492 insertions(+), 7 deletions(-)
 create mode 100644 components/ProductForm.vue

diff --git a/components/ProductForm.vue b/components/ProductForm.vue
new file mode 100644
index 0000000..22c3781
--- /dev/null
+++ b/components/ProductForm.vue
@@ -0,0 +1,346 @@
+<template>
+  <form class="form" @submit.prevent="sendProduct">
+    {{ form }}
+    <div class="cont-col">
+      <BFormCheckbox
+          id="customSwitch1"
+          v-model="form.active"
+          class="label"
+          :value="form.active"
+        >Activo
+          <span class="help-text"
+          >Desactiva el producto si quieres paralizar temporalmente su
+          venta</span
+        >
+      </BFormCheckbox>
+    </div>
+    <br />
+    <FormHeader title="general" />
+    <p class="help-text">
+      Estos son los datos básicos de un producto. Procura completar el mayor
+      número de campos posible. Los campos señalados con asterisco (*) son
+      obligatorios, los demás son opcionales. Si el producto o servicio no tiene
+      precio asignado, aparecerá "Consultar precio".
+    </p>
+    <fieldset class="fieldset">
+      <div class="cont">
+        <FormInput
+          v-model="form.name"
+          :value="form.name ? form.name : ''"
+          type="text"
+          label-text="Nombre"
+          required
+          @input="form.name = $event"
+        />
+        <FormInput
+          v-model="form.price"
+          min="0"
+          step="0.01"
+          type="number"
+          label-text="Precio"
+          placeholder="precio + iva"
+        />
+      </div>
+      <div class="cont">
+        <FormInput
+          v-model="form.url"
+          type="text"
+          label-text="Url"
+          placeholder="enlace directo al producto en tu tienda o web"
+        />
+        <small class="error" v-if="form.url && !isValidUrl(form.url)"
+          >La url no es válida</small
+        >
+        <br />
+        <FormInput
+          v-model="form.sku"
+          type="text"
+          label-text="SKU o identificador"
+        />
+      </div>
+      <div class="cont-col">
+        <label for="imagen">Imagen</label>
+        <client-only>
+          <FormInputImage :imageUrl="form.image" @change="handleImage" />
+        </client-only>
+      </div>
+      <!-- <div class="cont-col">
+        <input
+          id="imagen"
+          type="file"
+          accept="image/*"
+          class="imagenInput"
+          placeholder="Elige una imagen"
+          @change="handleImage"
+        />
+      </div> -->
+      <div class="cont-col">
+        <label for="">Descripción del producto</label>
+        <textarea v-model="form.description" class="textarea" type="text" />
+      </div>
+      <div class="cont">
+        <FormInput v-model="form.stock" type="number" label-text="Stock" />
+        <FormInput
+          v-model="form.discount"
+          step="0.01"
+          type="number"
+          label-text="Descuento"
+        />
+      </div>
+      <div class="cont-col">
+        <FormInput v-model="form.identifiers" label-text="Identificador único" />
+      </div>
+    </fieldset>
+    <fieldset class="fieldset">
+      <FormHeader title="categorías" />
+      <p class="help-text">
+        Estos datos ayudan a que tu producto sea encontrado por los clientes.
+        Procura completar el mayor número de campos posibles. Los campos
+        señalados con asterisco (*) son obligatorios, los demás son opcionales.
+      </p>
+
+      <div class="cont-col">
+        <label for="category">Categoría*</label>
+        <b-form-input
+          v-model="form.category"
+          autocomplete="off"
+          list="my-list-id"
+          id="category"
+        ></b-form-input>
+
+        <datalist id="my-list-id">
+          <option v-for="(choice, index) in categories" :key="index">
+            {{ choice }}
+          </option>
+        </datalist>
+        <!-- <b-form-select required v-model="form.category" name="" id="category">
+          <option disabled value="">Categoría</option>
+          <option
+            v-for="(category, key) in categories"
+            :key="key"
+            :value="category"
+          >
+            {{ category }}
+          </option>
+        </b-form-select> -->
+      </div>
+      <div class="cont-col">
+        <label for="tags-basic">Palabras clave</label>
+        <b-form-tags
+          v-model="form.tags"
+          placeholder="Añade palabras clave (moda, complementos...)"
+          input-id="tags-basic"
+        ></b-form-tags>
+      </div>
+      <div class="cont-col">
+        <label for="tags-basic">Atributos</label>
+        <b-form-tags
+          v-model="form.attributes"
+          placeholder="Añade características del producto (talla, color...)"
+          input-id="tags-basic"
+        ></b-form-tags>
+      </div>
+    </fieldset>
+    <FormHeader title="envío" />
+    <fieldset class="fieldset">
+      <div class="cont-col">
+        <label for="">Condiciones de envío</label>
+        <p class="help-text">
+          Aquí podrás indicar las condiciones de envío específicas para este
+          producto. Si no lo rellenas se mostrarán las opciones por defecto que
+          puedes editar en tu formulario de edición de la Cooperativa en el
+          apartado condiciones de envío.
+        </p>
+        <textarea v-model="form.shipping_terms" class="textarea" type="text" />
+      </div>
+      <div class="cont-col">
+        <FormInput
+          v-model="form.shipping_cost"
+          step="0.01"
+          type="number"
+          label-text="Gastos de envío"
+          placeholder="ej. 4,50"
+        />
+      </div>
+    </fieldset>
+    <div class="submit-btn" align="center">
+      <SubmitButton text="guardar" imageUrl="" />
+    </div>
+  </form>
+</template>
+
+<script>
+import FormInputImage from './FormInputImage.vue'
+import dataProcessing from '~/utils/dataProcessing'
+export default {
+  components: { FormInputImage },
+  props: ['productForm'],
+  data() {
+    return {
+      form: {
+        sku: '',
+        name: '',
+        description: '',
+        image: null,
+        url: '',
+        price: '',
+        shipping_cost: '',
+        shipping_terms: '',
+        source: 'MANUAL',
+        active: true,
+        discount: '',
+        stock: null,
+        category: '',
+        tags: [],
+        attributes: [],
+        identifiers: '',
+      },
+      // tagsArray: ['tag1', 'tag2', 'tag3', 'tag33'],
+      categories: [
+        'Alimentación, bebida y tabaco',
+        'Arte y ocio',
+        'Bebés y niños pequeños',
+        'Bricolaje',
+        'Cámaras y ópticas',
+        'Casa y jardín',
+        'Economía e industria',
+        'Electrónica',
+        'Elementos religiosos y ceremoniales',
+        'Equipamiento deportivo',
+        'Juegos y juguetes',
+        'Maletas y bolsos de viaje',
+        'Material de oficina',
+        'Mobiliario',
+        'Multimedia',
+        'Productos para adultos',
+        'Productos para mascotas y animales',
+        'Ropa y accesorios',
+        'Salud y belleza',
+        'Software',
+        'Vehículos y recambios',
+      ],
+    }
+  },
+
+  mounted() {
+    if (this.productForm) {
+      Object.keys(this.form).forEach((key) => {
+        this.form[key] = this.productForm[key]
+      })
+    }
+    this.getAllCategories()
+  },
+
+  methods: {
+    isValidUrl: dataProcessing.isValidUrl,
+    async getAllCategories() {
+      const { data } = await this.$api.get(`/products/all_categories/`)
+      this.categories = data
+    },
+    parseForm() {
+      const formData = new FormData()
+
+      Object.keys(this.form).forEach((key) => {
+        if ((key === 'tags') | (key === 'attributes')) {
+          formData.append(key, JSON.stringify(this.form[key]))
+        } else if (this.form[key] || this.form[key] === '')
+          formData.append(key, this.form[key])
+      })
+      if (typeof formData.get('image') === 'string') {
+        formData.delete('image')
+      }
+
+      return formData
+    },
+
+    async handleImage(e) {
+      this.form.image = e
+    },
+
+    sendProduct() {
+      const formData = this.parseForm()
+      this.$emit('send', formData)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.form {
+  @include desktop {
+    width: 40%;
+  }
+  @include tablet {
+    width: 60%;
+  }
+  @include mobile {
+    width: 90%;
+  }
+
+  .imagenInput {
+    font-size: $s;
+  }
+
+  label, .label {
+    text-align: left;
+    color: $color-navy;
+    font-weight: $bold;
+    font-size: $xs;
+  }
+
+  .textarea {
+    width: 100%;
+    background-color: $color-grey-inputs;
+    border: 1px solid $color-grey-inputs-border;
+    border-radius: 4px;
+    padding: 10px 5px;
+    display: block;
+    margin-bottom: 10px;
+  }
+}
+.fieldset {
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+.cont {
+  display: flex;
+  justify-content: space-between;
+  @include mobile {
+    flex-direction: column;
+  }
+}
+
+.cont-col {
+  margin: 15px 0;
+  display: flex;
+  flex-direction: column;
+
+  h3 {
+    color: $color-navy;
+    font-size: $m;
+    margin: 10px 0 15px 0;
+  }
+}
+.submit-btn {
+  margin-top: 20px;
+}
+.help-text {
+  text-align: left;
+  font-size: $xs;
+  text-align: justify;
+  font-weight: $regular;
+  color: $color-greylayout;
+  font-family: $font-secondary;
+  background-color: $color-light;
+  margin-bottom: 20px;
+  margin-top: -10px;
+
+  a {
+    text-decoration: underline;
+    color: $color-greytext;
+  }
+}
+.error {
+  color: $color-error;
+}
+</style>
diff --git a/pages/editar/productos/[id].vue b/pages/editar/productos/[id].vue
index 72aa402..2ad8a48 100644
--- a/pages/editar/productos/[id].vue
+++ b/pages/editar/productos/[id].vue
@@ -1,15 +1,154 @@
 <template>
-  <div>
-    <h1>Editar producto /editar/productos/:id</h1>
-  </div>
+  <BContainer class="container">
+    <BRow align-h="center">
+      <BCol class="edit-product">
+        <h1 class="title">Editar producto</h1>
+        <ProductForm :product-form="form" @send="submitProduct" />
+        <div v-if="form.source !== 'MANUAL'" class="data">
+          <dl class="creation-data">
+            <dt>Fecha de creación:</dt>
+            <dd>{{ formatDatetime(form.created) }}</dd>
+
+            <dt>Fecha de actualización:</dt>
+            <dd>{{ formatDatetime(form.updated) }}</dd>
+          </dl>
+          <dl class="import-data">
+            <dt>Fecha de importación:</dt>
+            <dd>{{ formatDatetime(form.sync_date) }}</dd>
+
+            <dt>Importado desde:</dt>
+            <dd>{{ form.source }}</dd>
+          </dl>
+        </div>
+      </BCol>
+    </BRow>
+  </BContainer>
 </template>
 
 <script>
-  export default {
-    
-  }
+import dataProcessing from '~/utils/dataProcessing'
+export default {
+  setup() {
+    definePageMeta({
+      layout: 'editar',
+      middleware: 'auth',
+      auth: { authority: 'COOP_MANAGER' },
+    })
+    const auth = useAuthStore();
+    return {
+      auth
+    }
+  },
+
+  data() {
+    return {
+      form: {},
+    }
+  },
+
+  async created() {
+    try {
+      const config = useRuntimeConfig()
+      const form = await $fetch(`my_products/${this.$route.params.id}/`, {
+        baseURL: config.public.baseURL,
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${this.auth.access}`,
+        },
+      })
+      if (form.source !== 'MANUAL') {
+        try {
+          const result = await $fetch(`history/${form.history}/`, {
+            baseURL: config.public.baseURL,
+            method: 'GET',
+            headers: {
+              Authorization: `Bearer ${this.auth.access}`,
+            },
+          })
+          form.sync_date = result.data.sync_date
+        } catch (error) {
+          console.error(error)
+          form.sync_date = null
+        }
+      }
+      return { form }
+    } catch (error) {
+      console.error(error)
+    }
+  },
+
+  methods: {
+    formatDatetime: dataProcessing.formatDatetime,
+
+    async submitProduct(value) {
+      try {
+        await this.$api.put(`/my_products/${this.$route.params.id}/`, value, {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+          },
+        })
+        this.$bvToast.toast(`Producto actualizado correctamente`, {
+          title: 'latienda.coop',
+          autoHideDelay: 5000,
+          appendToast: true,
+        })
+      } catch {
+        this.$bvToast.toast(`Ha habido un error`, {
+          title: 'latienda.coop',
+          autoHideDelay: 5000,
+          appendToast: true,
+          variant: 'danger',
+        })
+      }
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>
+.container {
+  margin-top: 40px;
+  margin-bottom: 80px;
+}
+.edit-product {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.title {
+  color: $color-navy;
+  font-size: $xxl;
+  margin-bottom: 60px;
+  width: 60%;
+}
+.help-text {
+  border: 1px solid $color-greylayout;
+  border-radius: 8px;
+  padding: 12px;
+  text-align: justify;
+  hyphens: auto;
+  font-size: $xs;
+  font-weight: $regular;
+  color: $color-greylayout;
+  font-family: $font-secondary;
+  background-color: $color-light;
 
-</style>
\ No newline at end of file
+  a {
+    text-decoration: underline;
+    color: $color-greytext;
+  }
+}
+
+.data {
+  margin: 0 100px;
+  margin-top: 80px;
+  font-size: $xs;
+  display: flex;
+  justify-content: space-between;
+  color: $color-greytext;
+}
+.creation-data,
+.import-data {
+  padding: 20px;
+}
+</style>

From 4a05f8915ba9fca0c8e7a32ba88f36f9ce7652c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Thu, 21 Aug 2025 11:55:20 +0200
Subject: [PATCH 08/21] create product functionality and page

---
 components/FormInputImage.vue    |   9 ++-
 components/ProductForm.vue       |  94 +++++++++++++++++--------
 pages/editar/productos/[id].vue  |  50 ++++++++-----
 pages/editar/productos/crear.vue | 117 +++++++++++++++++++++++++++++--
 4 files changed, 212 insertions(+), 58 deletions(-)

diff --git a/components/FormInputImage.vue b/components/FormInputImage.vue
index 5c1b8b2..fb17c8a 100644
--- a/components/FormInputImage.vue
+++ b/components/FormInputImage.vue
@@ -10,7 +10,7 @@
         :src="croppieImage"
         :stencil-props="{ aspectRatio: 1 }"
       />
-      <div>
+      <div class="buttons">
         <button class="filter-button" @click.prevent="crop">Aplicar</button>
         <button @click.prevent="cancel">Cancelar</button>
       </div>
@@ -31,7 +31,7 @@ export default {
   components: { Cropper },
   props: {
     imageUrl: {
-      type: String,
+      type: [String, Object],
       default: null,
     },
   },
@@ -106,5 +106,10 @@ export default {
 }
 .input {
   max-width: 100%;
+  margin-bottom: 1em;
+}
+
+.buttons {
+  margin-top: 1em;
 }
 </style>
diff --git a/components/ProductForm.vue b/components/ProductForm.vue
index 22c3781..2dbdefe 100644
--- a/components/ProductForm.vue
+++ b/components/ProductForm.vue
@@ -1,12 +1,10 @@
 <template>
   <form class="form" @submit.prevent="sendProduct">
-    {{ form }}
     <div class="cont-col">
       <BFormCheckbox
           id="customSwitch1"
           v-model="form.active"
           class="label"
-          :value="form.active"
         >Activo
           <span class="help-text"
           >Desactiva el producto si quieres paralizar temporalmente su
@@ -15,7 +13,7 @@
       </BFormCheckbox>
     </div>
     <br />
-    <FormHeader title="general" />
+    <FormHeader title="General" />
     <p class="help-text">
       Estos son los datos básicos de un producto. Procura completar el mayor
       número de campos posible. Los campos señalados con asterisco (*) son
@@ -34,35 +32,41 @@
         />
         <FormInput
           v-model="form.price"
+          :value="form.price ? form.price : ''"
           min="0"
           step="0.01"
           type="number"
           label-text="Precio"
           placeholder="precio + iva"
+          @input="form.price = $event"
         />
       </div>
       <div class="cont">
         <FormInput
           v-model="form.url"
+          :value="form.url ? form.url : ''"
           type="text"
           label-text="Url"
           placeholder="enlace directo al producto en tu tienda o web"
+          @input="form.url = $event"
         />
-        <small class="error" v-if="form.url && !isValidUrl(form.url)"
-          >La url no es válida</small
-        >
+        <small v-if="form.url && !isValidUrl(form.url)" class="error">
+          La url no es válida
+        </small>
         <br />
         <FormInput
           v-model="form.sku"
+          :value="form.sku ? form.sku : ''"
           type="text"
           label-text="SKU o identificador"
+          @input="form.sku = $event"
         />
       </div>
       <div class="cont-col">
         <label for="imagen">Imagen</label>
-        <client-only>
-          <FormInputImage :imageUrl="form.image" @change="handleImage" />
-        </client-only>
+        <ClientOnly>
+          <FormInputImage :image-url="form.image" @change="handleImage" />
+        </ClientOnly>
       </div>
       <!-- <div class="cont-col">
         <input
@@ -79,20 +83,33 @@
         <textarea v-model="form.description" class="textarea" type="text" />
       </div>
       <div class="cont">
-        <FormInput v-model="form.stock" type="number" label-text="Stock" />
+        <FormInput 
+          v-model="form.stock"
+          :value="form.stock ? form.stock : ''"
+          type="number" 
+          label-text="Stock"
+          @input="form.stock = $event"
+          />
         <FormInput
           v-model="form.discount"
+          :value="form.discount ? form.discount : ''"
           step="0.01"
           type="number"
           label-text="Descuento"
+          @input="form.discount = $event"
         />
       </div>
       <div class="cont-col">
-        <FormInput v-model="form.identifiers" label-text="Identificador único" />
+        <FormInput 
+          v-model="form.identifiers" 
+          :value="form.identifiers ? form.identifiers : ''"
+          label-text="Identificador único"
+          @input="form.identifiers = $event"
+        />
       </div>
     </fieldset>
     <fieldset class="fieldset">
-      <FormHeader title="categorías" />
+      <FormHeader title="Categorías" />
       <p class="help-text">
         Estos datos ayudan a que tu producto sea encontrado por los clientes.
         Procura completar el mayor número de campos posibles. Los campos
@@ -101,15 +118,14 @@
 
       <div class="cont-col">
         <label for="category">Categoría*</label>
-        <b-form-input
+        <BFormInput
+          id="category"
           v-model="form.category"
           autocomplete="off"
           list="my-list-id"
-          id="category"
-        ></b-form-input>
-
+        />
         <datalist id="my-list-id">
-          <option v-for="(choice, index) in categories" :key="index">
+          <option v-for="(choice, index) in categories" :key="`category-${index}`">
             {{ choice }}
           </option>
         </datalist>
@@ -126,22 +142,22 @@
       </div>
       <div class="cont-col">
         <label for="tags-basic">Palabras clave</label>
-        <b-form-tags
+        <BFormTags
           v-model="form.tags"
           placeholder="Añade palabras clave (moda, complementos...)"
           input-id="tags-basic"
-        ></b-form-tags>
+        />
       </div>
       <div class="cont-col">
         <label for="tags-basic">Atributos</label>
-        <b-form-tags
+        <BFormTags
           v-model="form.attributes"
           placeholder="Añade características del producto (talla, color...)"
           input-id="tags-basic"
-        ></b-form-tags>
+        />
       </div>
     </fieldset>
-    <FormHeader title="envío" />
+    <FormHeader title="Envío" />
     <fieldset class="fieldset">
       <div class="cont-col">
         <label for="">Condiciones de envío</label>
@@ -156,16 +172,20 @@
       <div class="cont-col">
         <FormInput
           v-model="form.shipping_cost"
+          :value="form.shipping_cost ? form.shipping_cost : ''"
           step="0.01"
           type="number"
           label-text="Gastos de envío"
           placeholder="ej. 4,50"
+          @input="form.shipping_cost = $event"
         />
       </div>
     </fieldset>
     <div class="submit-btn" align="center">
-      <SubmitButton text="guardar" imageUrl="" />
+      <SubmitButton text="guardar" image-url="" />
     </div>
+    PRODUCT FORM: {{ productForm }} <br><br><br>
+    FORM: {{ form }}
   </form>
 </template>
 
@@ -174,7 +194,13 @@ import FormInputImage from './FormInputImage.vue'
 import dataProcessing from '~/utils/dataProcessing'
 export default {
   components: { FormInputImage },
-  props: ['productForm'],
+  props: {
+    productForm: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  emits: ['send'],
   data() {
     return {
       form: {
@@ -222,19 +248,24 @@ export default {
     }
   },
 
-  mounted() {
-    if (this.productForm) {
+  async mounted() {
+    await this.getAllCategories()
+    if (this.productForm && Object.keys(this.productForm).length > 0) {
       Object.keys(this.form).forEach((key) => {
         this.form[key] = this.productForm[key]
       })
     }
-    this.getAllCategories()
   },
-
+  
   methods: {
     isValidUrl: dataProcessing.isValidUrl,
     async getAllCategories() {
-      const { data } = await this.$api.get(`/products/all_categories/`)
+      const config = useRuntimeConfig()
+      const data = await $fetch(`/products/all_categories/`,{
+        baseURL: config.public.baseURL,
+        method: 'GET',
+        
+      })
       this.categories = data
     },
     parseForm() {
@@ -249,7 +280,7 @@ export default {
       if (typeof formData.get('image') === 'string') {
         formData.delete('image')
       }
-
+      //console.log('FormData:', formData)
       return formData
     },
 
@@ -259,6 +290,7 @@ export default {
 
     sendProduct() {
       const formData = this.parseForm()
+      //TODO: review with Diego. I changed formaData with this.form
       this.$emit('send', formData)
     },
   },
@@ -333,7 +365,7 @@ export default {
   font-family: $font-secondary;
   background-color: $color-light;
   margin-bottom: 20px;
-  margin-top: -10px;
+  margin-top: 6px;
 
   a {
     text-decoration: underline;
diff --git a/pages/editar/productos/[id].vue b/pages/editar/productos/[id].vue
index 2ad8a48..07d0b18 100644
--- a/pages/editar/productos/[id].vue
+++ b/pages/editar/productos/[id].vue
@@ -1,5 +1,12 @@
 <template>
   <BContainer class="container">
+    <BModal 
+        id="modal-center" 
+        v-model="activeModal" 
+        centered 
+        title="latienda.coop" 
+        :ok-variant="modalColor"> {{ modalText }}
+    </BModal>
     <BRow align-h="center">
       <BCol class="edit-product">
         <h1 class="title">Editar producto</h1>
@@ -27,6 +34,7 @@
 
 <script>
 import dataProcessing from '~/utils/dataProcessing'
+import { useAuthStore } from '@/stores/auth'
 export default {
   setup() {
     definePageMeta({
@@ -43,22 +51,26 @@ export default {
   data() {
     return {
       form: {},
+      activeModal: false,
+      modalText: '',
+      modalColor: '',
     }
   },
 
   async created() {
     try {
       const config = useRuntimeConfig()
-      const form = await $fetch(`my_products/${this.$route.params.id}/`, {
+      const route = useRoute()
+      this.form = await $fetch(`my_products/${route.params.id}/`, {
         baseURL: config.public.baseURL,
         method: 'GET',
         headers: {
           Authorization: `Bearer ${this.auth.access}`,
         },
       })
-      if (form.source !== 'MANUAL') {
+      if (this.form.source !== 'MANUAL' && this.form.history) {
         try {
-          const result = await $fetch(`history/${form.history}/`, {
+          const result = await $fetch(`history/${this.form.history}/`, {
             baseURL: config.public.baseURL,
             method: 'GET',
             headers: {
@@ -71,7 +83,6 @@ export default {
           form.sync_date = null
         }
       }
-      return { form }
     } catch (error) {
       console.error(error)
     }
@@ -81,24 +92,27 @@ export default {
     formatDatetime: dataProcessing.formatDatetime,
 
     async submitProduct(value) {
+      console.log('Submitting product:', value)
+      const config = useRuntimeConfig()
+      const route = useRoute()
+      //TODO: review PUT method, its sending 200 status but not updating the product
       try {
-        await this.$api.put(`/my_products/${this.$route.params.id}/`, value, {
+        await $fetch(`/my_products/${route.params.id}/`, {
+          baseURL: config.public.baseURL,
+          method: 'PUT',
+          body: value,
           headers: {
-            'Content-Type': 'multipart/form-data',
+            Authorization: `Bearer ${this.auth.access}`,
           },
         })
-        this.$bvToast.toast(`Producto actualizado correctamente`, {
-          title: 'latienda.coop',
-          autoHideDelay: 5000,
-          appendToast: true,
-        })
-      } catch {
-        this.$bvToast.toast(`Ha habido un error`, {
-          title: 'latienda.coop',
-          autoHideDelay: 5000,
-          appendToast: true,
-          variant: 'danger',
-        })
+        this.modalText = 'Producto actualizado correctamente'
+        this.modalColor = 'success'
+        this.activeModal = true
+      } catch (error) {
+        this.modalText = 'Ha habido un error'
+        this.modalColor = 'danger'
+        this.activeModal = true
+        console.error('Error updating product:', error)
       }
     },
   },
diff --git a/pages/editar/productos/crear.vue b/pages/editar/productos/crear.vue
index 4c84228..392e7a1 100644
--- a/pages/editar/productos/crear.vue
+++ b/pages/editar/productos/crear.vue
@@ -1,15 +1,118 @@
 <template>
-  <div>
-    <h1>Crear producto /editar/productos/crear</h1>
-  </div>
+  <BContainer class="container">
+    <BModal 
+        id="modal-center" 
+        v-model="activeModal" 
+        centered 
+        title="latienda.coop" 
+        ok-variant="danger"> {{ modalText }}
+    </BModal>
+    <BRow align-h="center">
+      <BCol class="add-product">
+        <h1 class="title">Añadir producto</h1>
+        <ProductForm @send="submitProduct" />
+      </BCol>
+    </BRow>
+  </BContainer>
 </template>
 
 <script>
-  export default {
-    
-  }
+import { useAuthStore } from '@/stores/auth'
+export default {
+  setup() {
+    definePageMeta({
+      layout: 'editar',
+      middleware: 'auth',
+      auth: { authority: 'COOP_MANAGER' },
+    })
+    const auth = useAuthStore();
+    return {
+      auth
+    }
+  },
+  data() {
+    return {
+      activeModal: false,
+      modalText: '',
+    }
+  },
+  methods: {
+    async submitProduct(value) {
+      console.log('Creating product:', value)
+      const config = useRuntimeConfig()
+      try {
+        await $fetch(`/products/`, {
+          baseURL: config.public.baseURL,
+          method: 'POST',
+          body: value,
+          headers: {
+            Authorization: `Bearer ${this.auth.access}`,
+          },
+        })
+        this.$router.push({
+          name: 'editar-productos',
+          params: { action: 'created' },
+        })
+      } catch (error) {
+        this.modalText = 'Ha habido un error'
+        this.activeModal = true
+        console.error('Error updating product:', error)
+      }
+    }
+  },
+}
 </script>
 
 <style lang="scss" scoped>
+.container {
+  margin-top: 40px;
+  margin-bottom: 80px;
+}
+.add-product {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.title {
+  color: $color-navy;
+  font-size: $xxl;
+  margin-bottom: 60px;
+  text-align: left;
+  @include desktop {
+    width: 40%;
+  }
+  @include tablet {
+    width: 60%;
+  }
+  @include mobile {
+    width: 90%;
+    margin-top: 70px;
+  }
+}
+.help-text {
+  border: 1px solid $color-greylayout;
+  border-radius: 8px;
+  padding: 12px;
+  text-align: justify;
+  hyphens: auto;
+  font-size: $xs;
+  font-weight: $regular;
+  color: $color-greylayout;
+  font-family: $font-secondary;
+  background-color: $color-light;
 
-</style>
\ No newline at end of file
+  a {
+    text-decoration: underline;
+    color: $color-greytext;
+  }
+}
+
+.data {
+  margin: 0 100px;
+  margin-top: 80px;
+  font-size: $xs;
+  display: flex;
+  justify-content: space-evenly;
+  color: $color-greytext;
+}
+</style>

From f0fdc71fa78e80c59e19567e7433435b196a7f0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Thu, 21 Aug 2025 13:40:01 +0200
Subject: [PATCH 09/21] wip import product functionality and page

---
 components/ProductForm.vue          |   2 -
 pages/editar/productos/[id].vue     |   1 +
 pages/editar/productos/importar.vue | 403 +++++++++++++++++++++++++++-
 public/README.md                    |  11 +
 public/favicon.ico                  | Bin 4286 -> 15086 bytes
 public/plantilla-latienda.csv       |   1 +
 6 files changed, 411 insertions(+), 7 deletions(-)
 create mode 100644 public/README.md
 create mode 100644 public/plantilla-latienda.csv

diff --git a/components/ProductForm.vue b/components/ProductForm.vue
index 2dbdefe..cc6efcd 100644
--- a/components/ProductForm.vue
+++ b/components/ProductForm.vue
@@ -184,8 +184,6 @@
     <div class="submit-btn" align="center">
       <SubmitButton text="guardar" image-url="" />
     </div>
-    PRODUCT FORM: {{ productForm }} <br><br><br>
-    FORM: {{ form }}
   </form>
 </template>
 
diff --git a/pages/editar/productos/[id].vue b/pages/editar/productos/[id].vue
index 07d0b18..54d031e 100644
--- a/pages/editar/productos/[id].vue
+++ b/pages/editar/productos/[id].vue
@@ -70,6 +70,7 @@ export default {
       })
       if (this.form.source !== 'MANUAL' && this.form.history) {
         try {
+          //TODO: Review Fetching the sync date from the history endpoint
           const result = await $fetch(`history/${this.form.history}/`, {
             baseURL: config.public.baseURL,
             method: 'GET',
diff --git a/pages/editar/productos/importar.vue b/pages/editar/productos/importar.vue
index 524ba20..018acb8 100644
--- a/pages/editar/productos/importar.vue
+++ b/pages/editar/productos/importar.vue
@@ -1,15 +1,408 @@
 <template>
-  <div>
-    <h1>Importar producto /editar/productos/importar</h1>
+  <div class="container">
+    <BModal 
+        id="modal-center" 
+        v-model="activeModal" 
+        centered 
+        title="latienda.coop" 
+        :ok-variant="modalColor"> {{ modalText }}
+    </BModal>
+    <BContainer class="container">
+      <BRow align-h="start">
+        <div class="import-products">
+          <div
+            class="header"
+            @click="importOpen = !importOpen"
+          >
+            <h4 class="title">
+              Importar productos desde CSV &nbsp;
+              <img
+                src="@/assets/img/latienda-arrow-down.svg"
+                alt=""
+                class="arrow"
+                :class="{ 
+                  'close': !importOpen, 
+                  'open': importOpen }"
+              />
+            </h4>
+          </div>
+          <BCollapse id="collapse-import" v-model="importOpen">
+            <div class="description">
+              <p>
+                La función <strong>Importar CSV</strong> te permite subir tus
+                productos a Latienda.coop sin tener que hacerlo manualmente.
+                Puedes ponerles nombres a las columnas en tu hoja de cálculo con
+                las siguientes etiquetas para que los campos se asocien
+                automáticamente en tus productos:
+              </p>
+              <ol>
+                <li>
+                  <strong>SKU: </strong>usa esta columna para proporcionar un
+                  identificador único a tu producto.
+                </li>
+                <li>
+                  <strong>Nombre de producto: </strong>asigna un nombre. Es el
+                  texto que se ve primero al listar el producto.
+                </li>
+                <li>
+                  <strong>Descripción: </strong>proporciona los detalles del
+                  producto.
+                </li>
+                <li><strong>Imagen: </strong>url de la imagen del producto.</li>
+                <li>
+                  <strong>URL: </strong>enlace a la página del producto si
+                  existe.
+                </li>
+                <li>
+                  <strong>Precio: </strong>precio en euros con IVA incluido. Si
+                  se deja en blanco aparecerá el texto "Consultar precio".
+                </li>
+                <li>
+                  <strong>Gastos de envío: </strong>importe adicional por los
+                  gastos de envío. Si se deja en blanco, o nulo, aparecerá el
+                  texto "Sin gastos de envío".
+                </li>
+                <li>
+                  <strong>Condiciones de envío: </strong>aquí se puede indicar
+                  las condiciones de envío específicas para cada producto. Si se
+                  deja en blanco se mostrarán las opciones por defecto de tu
+                  cooperativa.
+                </li>
+                <li>
+                  <strong>Descuento: </strong>porcentaje de descuento sobre el
+                  precio del producto.
+                </li>
+                <li><strong>Stock: </strong>número de unidades disponibles.</li>
+                <li>
+                  <strong>Tags: </strong>etiquetas libres que describen al
+                  producto. Usa el carácter "/" para separar cada tag.
+                </li>
+                <li>
+                  <strong>Categoría: </strong>clasificación principal del
+                  producto. el Latienda.coop usamos la taxonomía de Google.
+                  Puedes ver todas las categorías disponibles
+                  <a 
+                  href="https://www.google.com/basepages/producttype/taxonomy-with-ids.es-ES.txt"
+                  target="_blank"
+                    >aquí</a
+                  >. Elige la categoría o subcategoría de cualquier nivel que
+                  mejor defina a tu producto.
+                </li>
+                <li>
+                  <strong>Identificadores: </strong>identificador único
+                  opcional.
+                </li>
+              </ol>
+              <br />
+              <p>
+                Descarga la
+                <a href="/plantilla-latienda.csv" download="plantilla.csv" type="text/csv">plantilla</a>
+                de referencia.
+              </p>
+              <form @submit.prevent="submitFile">
+                <div>
+                  <label for="file"
+                    >Archivo .csv
+                    <input
+                      id="file"
+                      type="file"
+                      accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+                      placeholder="Elige un archivo"
+                      required
+                      @change="handleFile"
+                    />
+                  </label>
+                </div>
+                <SubmitButton text="Importar" image-url="" />
+              </form>
+            </div>
+          </BCollapse>
+        </div>
+      </BRow>
+    </BContainer>
+
+    <BContainer class="container">
+      <BRow align-h="start">
+        <div class="import-products">
+          <div
+            class="header"
+            @click="syncOpen = !syncOpen"
+          >
+            <h4 class="title">
+              Sincronización con tu tienda online &nbsp;
+              <img
+                src="@/assets/img/latienda-arrow-down.svg"
+                alt=""
+                class="arrow"
+                :class="{ 'close': !syncOpen, 'open': syncOpen }"
+              />
+            </h4>
+          </div>
+          <BCollapse id="collapse-sync" v-model="syncOpen">
+            <div v-if="platform" class="description">
+              <div class="platform">
+                <BFormInput v-model="platform" type="text" disabled />
+              </div>
+              <br />
+              <div class="credentials">
+                <BFormTextarea
+                  v-model="credentials"
+                  type="text"
+                  rows="4"
+                  disabled
+                />
+              </div>
+              <br />
+              <p>
+                Si los datos no son correctos puedes editarlos en tu
+                <NuxtLink to="/editar/cooperativa">cooperativa</NuxtLink>
+              </p>
+            </div>
+            <div v-else class="description">
+              <p>
+                No tienes configurada tu tienda online. <br /><br />
+                <NuxtLink to="/editar/cooperativa">Edita</NuxtLink> la
+                información de tu cooperativa y añade la información necesaría
+                para la sincronización con Woocommerce
+              </p>
+            </div>
+            <form @submit.prevent="syncWebsite">
+              <SubmitButton
+                text="Lanzar sincronización"
+                image-url=""
+              />
+            </form>
+          </BCollapse>
+        </div>
+      </BRow>
+    </BContainer>
   </div>
 </template>
 
 <script>
-  export default {
+import { useAuthStore } from '@/stores/auth'
+export default {
+  setup() {
+    definePageMeta({
+      layout: 'editar',
+      middleware: 'auth',
+      auth: { authority: 'COOP_MANAGER' },
+    })
+    const auth = useAuthStore();
+    return {
+      auth
+    }
+  },
+
+  data() {
+    return {
+      file: null,
+      importOpen: false,
+      syncOpen: false,
+      platform: null,
+      credentials: null,
+      syncForm: null,
+      activeModal: false,
+      modalText: '',
+      modalColor: '',
+    }
+  },
+
+  async mounted() {
+    try{
+      const config = useRuntimeConfig()
+      const data = await $fetch('my_company/', {
+        baseURL: config.public.baseURL,
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${this.auth.access}`
+        }
+      })
+      if (data.company.platform === 'WOO_COMMERCE') 
+        this.platform = 'Woocommerce'
+      this.credentials = JSON.stringify(data.company.credentials, undefined, 2)
+      this.syncForm = {
+        key: data.company.credentials['key'],
+        secret: data.company.credentials['secret'],
+        url: data.company.shop_link
+      }
+      // const historyResults = await $fetch(`/history/`, {
+      //   baseURL: config.public.baseURL,
+      //   method: 'GET',
+      //   headers: {
+      //     Authorization: `Bearer ${this.auth.access}`
+      //   }
+      // })
+      // console.log(historyResults.data)
+
+    } catch (error) {
+      console.error(error)
+    }
+  },
+
+  methods: {
+    async handleFile(e) {
+      const selectedFile = await e.target.files[0]
+      this.file = selectedFile
+    },
+
+    async submitFile() {
+      const config = useRuntimeConfig()
+      //TODO: Review functionality
+      try {
+        const formData = new FormData()
+        formData.append('csv_file', this.file)
+        console.log('Form data to submit:', formData)
+        await $fetch('/load_products/',{
+          baseURL: config.public.baseURL,
+          method: 'POST',
+          body: this.file,
+          headers: {
+            Authorization: `Bearer ${this.auth.access}`,
+          },
+        })
+        this.modalText = 'Productos importados correctamente'
+        this.modalColor = 'success'
+        this.activeModal = true
+      } catch {
+        this.modalText = 'Ha habido un error'
+        this.modalColor = 'danger'
+        this.activeModal = true
+      }
+      // Clear the file input
+      this.file = null
+    },
     
-  }
+    async syncWebsite() {
+      const config = useRuntimeConfig()
+      //TODO: Error 500, its seems to be backend issue
+      try {
+        console.log('Sync form data:', this.syncForm)
+        await $fetch('/sync_shop/',{
+          baseURL: config.public.baseURL,
+          method: 'POST',
+          body: {
+            url: this.syncForm.url,
+            key: this.syncForm.key,
+            secret: this.syncForm.secret
+          },
+          headers: {
+            Authorization: `Bearer ${this.auth.access}`,
+          },
+        })
+        this.modalText = 'Sincronización iniciada'
+        this.modalColor = 'success'
+        this.activeModal = true
+      } catch {
+        this.modalText = 'Ha habido un error'
+        this.modalColor = 'danger'
+        this.activeModal = true
+      }
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>
+.container {
+  margin-top: 40px;
+  margin-bottom: 80px;
+}
 
-</style>
\ No newline at end of file
+.header {
+  width: 100%;
+  outline: none;
+}
+.title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+.arrow {
+  width: 20px;
+  height: 20px;
+}
+
+.description {
+  margin-top: 30px;
+}
+
+.close {
+  transform: rotate(-90deg);
+  opacity: 1;
+  transition: all 0.5s;
+}
+.open {
+  transition: all 0.5s;
+}
+
+.import-products {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+.title {
+  color: $color-navy;
+  @include mobile {
+    margin-top: 70px;
+  }
+}
+.subtitle {
+  color: $color-navy;
+  font-size: $l;
+}
+
+ol {
+  list-style-type: none;
+  counter-reset: a;
+}
+ol > li {
+  counter-increment: a;
+  position: relative;
+  list-style: none;
+  margin-top: 18px;
+  margin-left: 35px;
+}
+ol > li:before {
+  color: #fff;
+  background: $color-navy;
+  width: 18px;
+  height: 18px;
+  top: 2px;
+  left: -35px;
+  position: absolute;
+  line-height: 20px;
+  font-size: 12px;
+  content: counter(a);
+  text-align: center;
+  font-weight: 400;
+  -webkit-text-stroke: 0.04em;
+}
+
+.error {
+  color: $color-error;
+}
+
+label {
+  text-align: left;
+  color: $color-navy;
+  font-weight: $bold;
+  font-size: $xs;
+}
+
+.cont-col {
+  margin: 15px 0;
+  display: flex;
+  flex-direction: column;
+
+  @include mobile {
+    margin: 15px 80px;
+  }
+}
+
+.input {
+  font-size: $s;
+}
+</style>
diff --git a/public/README.md b/public/README.md
new file mode 100644
index 0000000..cf00435
--- /dev/null
+++ b/public/README.md
@@ -0,0 +1,11 @@
+# STATIC
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your static files.
+Each file inside this directory is mapped to `/`.
+Thus you'd want to delete this README.md before deploying to production.
+
+Example: `/static/robots.txt` is mapped as `/robots.txt`.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
diff --git a/public/favicon.ico b/public/favicon.ico
index 18993ad91cfd43e03b074dd0b5cc3f37ab38e49c..9cfc1197d80645285707ec68baf6d9de5c4afed5 100644
GIT binary patch
literal 15086
zcmeHOd3;n=maZNZ0)!-$jSx^#qpdwLsO=J+nP1!XuXS|9Rz^{ro*vtoR$E7KSCpR(
zxco%HePNTZCuFHgQhV0Qp2|iRLP!W9EETp?LW;$t0-X8IeeYGhq$&$E-G5E=<Gp(I
z-aX&B=f3;SyWc5|=4YDAG`HNM!FHA=<$8_gPK`!0YnJ>uOrz<*u`q1;`xh?PXg<aX
zH{u*zqIm}3<Kiz)+KlvXR`#UJw{4z~xMjnH7lBuRg?|fdM!Uc(@^(Bnn9GaIjX93Q
ze{<4=|4CYX#o_foTz>AyOAKF|SD@|j;_`FKb-ZP6%rOxEl;lZQZP_@nbyLzr+O*+s
z1a4cw#n`~L%rPZp(pAHK*q%1|E}##fOODjZlmaBDPQf++(r`@1c5HnJ$b~uHHJrcR
zIQ4FwajF}jOO1@|sg#}t@HRU{Aj1$sUKm4QGY|rDaf55(aQ=qekVHdHh#R0wf?TPc
zOiL)~%%P-bU_a9;!xl<e3UaUyWHWMy!hp{{pv_!x1lQsG&4r<ffE%Do1?J@CYzqTN
zAU6ygfxIv><jW`sBO{|wf(ctM>|tb9fa4O!FhBm*;?P9E4bWc;OOe!<qTiK1m-(x?
zOPsaf3V@@jNK0lJmSQbgio*bDYsJ0{aP;S&1O9*;po>OHDA~Y0%OZ_;9^X8!_2v-b
zag>Fzql^(lUMLyS|Lg<zwbI9yB5(%0d`rT}HWY4KNvL1{=inIN2IykJ-1Wv_+MYgz
zQgu@(Ei+i$vpV*}B>Mp$c-*rek`M4h_CfJO_#pZoet<he<pcQp_dojtux~i`!eIsX
zjO<`aPQg66eG=xwAljZ0M5+2ol$JFab4{?n4}7m84u*Wm2Oj@CjzlaF1GDUdMfO4V
z#f`0B|6er!Qrs`#o~8?;&6_7sN=g{%v#ukv^-jvo|25?m-bc3lL^9fLAiXJyGK^C&
z9|enfNW{VGgYO;|J}`g27nJ*;L@UQa3;tSv{-t4ww$d;+Ko<f_(Nu7sN?H0}lEd*P
z?d{Of(WCX$)4PvO^f?83dOPXp@p|e!kVQM1-le?ad%!=O^j2JlIZ4c!@_gjIr|t5+
z4F19g@VBrJrQlzBDfoxtJ_{jR?(Njr@C|i$@1awt`{?xPli0ce-m2l2zw3i<d#P>j
zTFNi^XZR5!-47xT(tJ9G4}tr?Oq*yc)4Bl~6Bsi&Wzkeq{}LTL)=a0*oCG(8UoZ9c
z?W1F^D(X6xFTne~eI4+pSNI^##Wk*;R;p`y9nYi~%EWV1%&q)P5YGZF84&~ToLU@C
z=8|y4Alz*!4fh{E<K`bmd6idEYsX4Dd9qvLe&!UpPadIzhcjtM%b%&F?jFi_#8Ga=
zOv(ca9M|F4-BiE(c{<pYfpfcX-6?VHsZ%}F+WsAx@~@J7z&OelK7c=-3tk_19DzUJ
zh7T9XKMb6vQ~Um}VY`pcaK8hGkJ-u5I1h1)Mf)LS!98R}92Iapt!22+%R+E{3{^GF
zMO<=mty^xxO>G^kF`v$m@(4d4!Vw2>mtx?C5B~hi!xL@g;ckFNLv#Bg*zKh=KXL!{
z(cS~=(Z@HD3C}$d-%`Z5ECO7CatStUeQip<6ja?ndk_AAHcoikYHV487-*#&L-?S@
zSmHQ@lM(!7A1;bN_g_WB1Jrl2lYaW?w6NK}e+{1RS0cukx8?C^E{Q<@5B0&v-PbqP
za>TN72DKmf25p@bZMsh$q7ug(X<o|JiX16Bf0z%&;cnRS@BfO3L|a9K8z4U*CT#2A
zkqqkZ?+1P&=Mfv8@o|)0fM<_g?jOa6QuYCmW8iI%W2<hzTub>?*O2pQmS~gPKG<c%
z{XBy*IX4wPzz@X0AnpZW2mB*0h(GsL)y~Hd>*K->_fv7zgOrIJS@aLbSNITtI7DC^
z0pQQ$$5s(Jl(U*Y_POoyhTo9;RHtbB^qC$itDZ+X<WSOB0)NCn@<G^fV=P?|f99~y
zxt0b71_avotw;YvNbToI?Hh*qU@24cR__OhFWT=o^n=vC$3uHNHzM!m=UZ4HAKV6e
z0REMciMGl}H$X!XPK7l$QBPk3c{~Fct36a)`6y)|2hiKJhym_5_Cds$<I8;?NmlN6
zzqSG&vsP%yv2zaE?iMzBdYdty-iSN{IiH^o;coPmfB%obpWCi%dQfV6&_mrl^<=PJ
zM;XW`br$40ULV5Y1Lg>f9p-MWh$5@tAEoj`y|4Bqf(mM`C)bHu@E;U?WG{P=(vizb
zHsm-+v38@cE`Wa+)wex|c7LM5!LzjgU<PtxEu|ZfZ<@k}_+Z4?w=i!nf3*(^cV(;Q
zA4xfmX>{mVy0GE#^pm6ZPn4ED1vc>hsq_=it$8E#zauKq=7@3wq=vOpOS|^Hi*^U;
z?Add)yX|}0t`9~|jQ4OOd@#cYE9M8g#9iXgyj2+1rn-IKegy67S|w}@o*ksR#<wUH
zdAHXFeBk>T@x>UA^6&pq`0w7o6z!g+v**rJbIa$Hl0F%EJ@QW32Oc-(@+h*DM~eQx
z7$2;a5wzF&wcyXT>KhlMpYZO$>lNrHjseeY@R$48pMO<!qOB_04UigEM>w_aUq<K7
zoddvs*XOh?brRl9f`t!!|C-C91b^WJ#t-wiR7N8PG91{-uwg6UXD5O>oZko=Y-<Pj
zr=(A!)J(jKVyyDKAoF657r;M)S`RS)^K||^QFHU>v^6=1lG8B%VBDB6*O-{U;zLEW
zm%rBs6@T_a-9O5{wF+}+*SD}k!q$$4#pow~f14`Crg9#(0r^|u6W|6&4Ga3erE{6!
z&ir@o{G7II4HEaRu{e^9rBUz!0Ds{J#*rC5nB^F-4+7wAQTyR%Cz9F^e&e-Mw}bgl
z5_6iGkId1p|E<;25&<_rYMAiMZ)#ma%HPhWm9#x8m<&acWGDguk|^PWQRZ(dk0z7g
z4<EptVZq!Y0sB?hm!Y;}#Phm!?^lW$s;gg2db|^;&yn|;;|1`Kpi;-<c((Ji#Z48}
z&ypVR+}X?@{cm9YvJXlOM)$$TpZ!qy8Ibc;);=q2u&uJ1$KgAkCBym?pD&0%U!Pq#
zjq;0sO9dql;(0ZVvI-+8+a5X82aF+ODf*t{fHCCrVVV>NZw!X=x5)h1m#q94DlB`5
z3M(E!pTq>>&c_1tuZc;t*2K608V(-g8CbVrWadYJe<WpLzULT7afp)Q0RBe2S27g-
zrV8dSgMFxqk%9ec?8{)A?1K?GtC8Ou0`QQJF-QOLGXj6+uFpX(#mGa>2L71^WBXvb
zNFPSwt@sp}f9>={YwdJ5Kne^c(dhGV0i6x}bJac|1|kkp46=)*7#KJPavan#FmVhV
zF#xvS82I{M#6k2q?AORpaZxzQ9R2%W#ovPKm`@sVgEZtg=@#TW><4_vfDbyvL611-
z3nD3#eZaFN8}HWHm_rPRzX8u-BXS^y2|1j}!N5IHg}JpFb5b>)Z#Bp-6x1T$tHo!)
zRyPbg@R?DEaV`17eeBP_PU?To+lvdMsm>ZpwU$`1t+URcI@=7|ks~8_Ce<_YW>Q1`
zOsdNMIT=5Dgt9-GONQk#KK*wx07k}VGFD&<7*@`sb*tZ|@7669`2NSG6cFoiTwodI
z?0cp6X&xisI(+@#S{s{aDb%`+`XFjBMNq#zZd@2Bx|WV5{|njXtR~a_8-WdDBI{qb
z(O>>}oL+f>=+!a6=e+Vf(dsW3kU8^mVvfvpIDd0aXrd`I$ZbrYKn=(X1}d+n{&8Ty
zaU~ts{}UC=TTiw}wo%TQ*h-ei(rCqkZhHSMqQAU3J|uk){<_PEIhu3**UwG5iFcba
zCW8M&YQS3FK>Z9F*fBOd4b!RHbQk43x{8eVCjsk6g^9m^cq^@1)J<P}Nc6=A<HOc<
zGJkLcSHJ$pv75pF81ru|oJyYE(d20v8-uM;)SYu1S%3Gv;LrTVg5lpb)0Pj8QPS5$
zNk|#S!Umj|zG(rOGSL6v2(IzN$B#)L6ol_Kc=<QPj=%q{cTnErYsvcXmN8*_cr#fa
zOQAK3j?+i)5q<RT==c!dFMppXHObrm8<^{G{`}db3yLwMPguM=KfH0E>M9x+YGzV*
z_B~{uzmf9hrUKi?gza%1E&G#;7V^D07I5$KIp3}LxY3fSS<D;*aaSMfua8|gP>=o}
z2YCFui{lTMKC`*b{-nOk{-n-12D)<R8|yw?c>3_-*NGOtHa@)nhG(Ig<7oSyUDICn
zG{?{dpr-B11#$K#O>xCfXI(!UO6Ke1QeSL}!<eYyaWP(e`WJe6G|uYpJbNOa_OwOy
z1Lwy9!Z|ivGg;lnX#3xNLX*E=PBwsm^W#82&Y3@2o9gcdJ0i5eGlL!BuLG}*fmd+u
z9qQ}Hv%mgJx&wG+{a5tb7<e7$Jp*V1wJW{wXf!AI%TSG`leZK9fBV<=LqGT9)f&xN
z-u{ZWzrz2%t<vvYr!@<>7x30;p_Xf;zfJ3}xO>CeD^_h-bHz4b>m|Wjzjn5<4YsA`
zk(?Y9y?MjLij6-`po_%@T&u=t?XWG_j8ZtHWlTv(&6v^+(8YjteF?1b1H1<1MZh+@
zVe@9iezq-SHsAv2Lcui<Ttgt%l)0uusq2vI3B0v5TwCC4pKZ-n>|5-ivjG=C;|15!
zaIJ!#-+fgzBuedzq}58gzgPQLY5?qEuoae|*tZpjCIBvg#)MJ}0)1H2fxvfB1H%3x
zzf@`thSyApx({EygbTG2Ui+x)NI;zdj*VU)!Sx@^Ppaj>8lY|x>aS1(f%R~XgHneg
z>NiyNCraIhs%B$|eb^n_KD24B2}sYx8t3+K$};?%EID_QE$=Qe<@^G*G1KJwg{e|M
za2<@oLDXDuy$&=+sb0YaE?)mpmyiIsMy^kgG<~z}7gSmCI_=wMq+`dMskiq4^`1CD
z$GdmY{zGQeAiP61`)rH{^o59pT!*8oIS{o5C0ZA14Se>?v?JJuX7APHU!WsL>Y$aK
zg5G|DdQP;_(QbzT?+Xq7%xQ3Gq?(48q19pChilEa7D&`F`RX3P!38aIsQogn%fCK=
zb?I1Y-S-)tJmrFo9y-vaqnhSFkiF(sXzAAq6k)%%`S<uP9p~_Qz0|Vj3o^3qtn`Dz
zLDC{!(8_)G%fl0(rMiadsqh`^JuMwepk=$M&%K}OTNXk;o&g;Y@ldpIXqDD7*2P%^
zkEMpzm*|9hpU}T|wtfWrSVQ0%5TO@y-GR`%UC^XQwQnsCB}daE@Vg5*Le-7WN_sHY
zzHq$))+D?-s#hBa7wC?)yZ%$Y?kJU3&&7Dan1n_oI6%(?2N$$npZ$u61n93Wp9agi
zZY&)-s)zRHp_cX)&?>`8XsxVwvlc4b_g$mthmw}t+WCpl4G%aCxF4oNBjMUSF9#R2
z&JpdiwpQM7AI92I)OYNmoTA%sy-Jf6TA-w-NjfYvCzbxn*B8~@ia6{>UC42)J^ltd
z2WoPlNyxgc3tFFd{)L{H0Js!g(OMBkJNLdJG^>uzEx50>l3pmTm$XQsg^j91M$!Jm
zn?xIRjc-u8iFHk`QxqIr&~`?&Z^Qa-hx2=AHs_&tEP~#|dKolDXqK!Au^uGph?15C
z-D!w6#-Am9>^;#&>z;3+m7wMn>t3u&B9`d?2w(p@q7tC}xO|#d6dgFSMO^Es{xhXu
zo@Kp=buKg3p@fdZdZ41E1<=vhe$(CsLi1?v*dS?I&}%YbA8T1ITUC_LepPe=^bZ{K
zX($JeZWEeGh2wdlm#|)Fgf0+JOOo{qwSL6<lw_Y!yR`{9!Bn9+GJo0Di1u06ICwN!
zXddO|&kO%qmr(Q+=D=EtT0;>!mP$KeeWtN}foP+B?<VL~AwpA<ePmy~_ObSz0JwNf
zp1~ST2kKY&uiPQ&3PMldwRmM6UZsV2br6;QVRl4NP1AFtjXfRfpsNhg4A|C)_AQ8K
zVdbx>zUe*G4BiM$0QbJoWmKAsqQ?j=25aVG4PDj%;Dd!@S#}dO>{?7kHTQ|nihtM+
zwO<pHfc0sYvPR8ozL^;38OSj*G4Jqt@(^8R$U3rm4PUV@uOEX0ui2Y9E<@Mt*_O}$
z+UW^cdv)<TtYkYvtO@Isb#1H%dpTeX8ss<_5hoM;H(~sl8QlL^2WD7n5KBhwaESF@
zw&iEv#_Qkt=wqyt8Z8)aHjMXNtSRT=UMoPm&`}JgYk=#>V7`uw);Ix^Ee<)z^<>Ju
z0qfQYq_^K9kXdvK2^3>nd@FDZG>@x!y?Lm8^o6+~%vFwg?s)zza^+t`t^ySbuc03M
zEIOERJK3K3fQ(PAAQNN08lO?te|$|Jy;@K2zTHXhy|vE|i{IIU-x)ka*21Yn`rm8{
zo^8}kbUBbq_B#TvFL|o3q#om)l>fw9vOKhvtPf#LY#5BcOQ#jD_R_L<h&~twact2b
zZToR9ne~^s*rt;IVtwu=tj`^(vIWz?&S?SHR|a=QQ%~M(%9;Bu8GjpiJ=E~<HrlYX
zht{klf2<%{yK;~+w#+4y?jMe@O|N}jP>>;g;y2Z{sVDpEur^ya(+{2<vD9PxB^5li
z25aKmu%^6q2y*6N{djIVeg0Z6y+6X*@v?UYDJ5y%NwZ$_4c5zsto41lP7~xTi&{8P
zH{&b-`@;bHeT50`(my8cDR?5|P~p6EKUkkK?pgZ3r`+!>BnpH@3(ueZY?*bzu6oT7
z+e$xpTBgkbJOI{s17KH7Q`=WB$J^(buf<x{5R}f>U7Pw+Q~b)M=bKh8B^m)99G|1u
z8@?TEkGvLGJ=h+R0wfQ^c6|3HFk$$0%I8&|(gei*&9#uSf#hLG!ROVhSJ1V}`MmAK
zs*GKux$N%=tO<pl;Qy}f59M_VUY3{zc-JWc{1R*1)}V0w#%RmN^%L5FmVo$?k55#8
z*T&cIwK_xaKkBlB4{<GfAaG578rO8lzo+5f)-d=Qz81CQ@qm+S%GI#g`MnRh73X(c
zyN~ycA@80=VYntN9`ASzr}`b!T7-H7ytf%G@t9*1@cWurv@sR$ZKxT=yE6aI0`F-~
zyqCqx;C=5qQFZ-)Q^&qcI@Fa*hYshWhANAyc07mQKSU$fMjOc0@vh^vlxpMgZo_c$
zJ5CPrhus|?qP{Vgs(1dL3af7>J5byFG<6-#p`EQC!w)<M_?@LV+=+ZY9{DZ9$@zVC
z^AmLBSP>Oe+=2R+5ai;V_cKDMxbAj3(p^O5HS>^bhH(9&6Zw8Ta$AOzbKK6ZB&y%J
z2)Q8Fph)?oI``exv549`lSHnD8ayX*<#^<VK%_IT`YN<<BYWu_QLAUd^H9kHIe+B5
zuexO}IS*U#P96j8U+YB96_0!eh;ruDT!R|!0xBp%oh5#sAmwwuIv@-3ma3LVsq07{
z-Wz6cuIaQ@N5>;)U|@eH?QC00xutia&H}kO=R=$eDfJ-GV(mNbq2@hHQCl>V^C_pe
zwl*f-S{vguB5%>>Mhcxbi*p**^;ypach+yc+HDQ;7ihM84Rq&tQ)N_qL2;C`J|FLR
zd9l=301eg>N0t?H$@s~9GA*A^*(?4)YgR)WUAG*%>2g|?v=lk>&CZ<a;CQ_*=%zAL
z@PX6SvE;%0?tun(BIg!7&%Pt`{hP`Bz$VI`lSW^?-6z)GKgAmS%B8)OzWLq*HnZl&
zZ`W#q8uCJyoT-cTu!iS>j?`z5A1MB>Rr_-v-QJn^XmY3NiLCvfymo3}3G_q82a8U7
zHm-VUNllqF-$FOL5pV#l(9zlknx|V^mcM;l;S;8~lBY7_GG3^=?Te-7tkCY-fY#5K
UkpuH3PZ63WKf8F8lxQ^n2hjIky#N3J

literal 4286
zcmeHLOKuuL5PjK%MHWVi6lD<!mRb4$mdFuu1m7S&L72}0%nh7nb{xS*IY7K-1~WG>
zOGiR<sv2rs-P1h`ut*jRDypfj@9U}_3E&NVhC}c-e)fS606r6u2w#X;ZXeov|87fL
z!TI})z`sQxSz?%$m}Cpw?WF=YNnu;Mk#t%h*=w(2a7>EbCw`xmFozJ^aNatJY>w+g
ze6a2@u~m#^BZm@8wco9#Crlli0uLb^3E$t2-WIc^#(?t)*@`UpuofJ(Uyh@F>b3Ph
z$D^m8Xq~pTkGJ4Q`Q2)te3mgkWYZ^Ijq|hkiP^9`De={bQQ%heZC$QU2UpP(-tbl8
zPWD2abEew;oat@w`uP3J^YpsgT%~jT(Dk%oU}sa$7|n6hBjDj`+I;RX(>)%<Y^V1u
zxpEJLVzZ2NFGX+1TXChn89VxczG?Ja<o=SJ8n{y5$ezyw`8sz3-<3{&C8oX)|94kh
z+0M_EV^O^m@tH21JEPN_ux%Gy1GUw?U~8Zr)3xvGXUSPO+3I<5aAh6uT<iYgm~_ug
ziEA0#JM$)SV%(oc@>lm_7N{+B7Mu%H?422lE%MBJH!!YTN2oT7xr>>N-8OF$C&qU^
z>vLsa{$0X%q1fjOe3P1mCv#lN{xQ4_*HCSAZjTb1`}mlc+9rl8$B3OP%VT@mch_~G
z7Y+4b{r>9e=M+7vSI;BgB?ryZDY4m>&w<W+!o=%S{hjU42>cHSn81VH1N~`0gvwH{
z8dv#hG|OK`>1;j7tM#B)Z7zDN?{6=dUal}$e<J#b(FPcAa6L9y8G}E@q!eIA^eYgE
GM1KL3x?{8e

diff --git a/public/plantilla-latienda.csv b/public/plantilla-latienda.csv
new file mode 100644
index 0000000..85d603f
--- /dev/null
+++ b/public/plantilla-latienda.csv
@@ -0,0 +1 @@
+sku,nombre-producto,descripcion,imagen,url,precio,gastos-envio,cond-envio,descuento,stock,tags,categoria,identificadores
\ No newline at end of file

From 0a271ea4697b3eecb13bc84fa35a4431349c1b98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Thu, 21 Aug 2025 14:21:18 +0200
Subject: [PATCH 10/21] admin/cooperativas page and functionality

---
 pages/admin/cooperativas.vue | 180 +++++++++++++++++++++++++++++++++++
 pages/admin/estadisticas.vue |  80 ++++++++++++++++
 pages/admin/importar.vue     |  90 ++++++++++++++++++
 pages/admin/index.vue        |  29 ++++++
 4 files changed, 379 insertions(+)
 create mode 100644 pages/admin/cooperativas.vue
 create mode 100644 pages/admin/estadisticas.vue
 create mode 100644 pages/admin/importar.vue
 create mode 100644 pages/admin/index.vue

diff --git a/pages/admin/cooperativas.vue b/pages/admin/cooperativas.vue
new file mode 100644
index 0000000..faefddf
--- /dev/null
+++ b/pages/admin/cooperativas.vue
@@ -0,0 +1,180 @@
+<template>
+  <div v-if="!loading" class="container" >
+    <BModal 
+        id="modal-center" 
+        v-model="activeModal" 
+        centered 
+        title="latienda.coop" 
+        :ok-variant="modalColor"> {{ modalText }}
+      </BModal>
+    <div class="row">
+      <div class="col-10">
+        <h1 class="title">Administrar cooperativas</h1>
+      </div>
+    </div>
+    <template v-if="companies">
+      <v-data-table
+        v-model="selectedItemsIndexes"
+        show-select
+        :single-select="false"
+        :headers="headers"
+        :search="search"
+        :items="companies"
+        :loading="loading"
+        loading-text="Cargando cooperativas..."
+      >
+        <template #top>
+          <v-toolbar flat color="white">
+            <!-- Search -->
+            <v-text-field
+              v-model="search"
+              append-icon="mdi-magnify"
+              label="Buscar cooperativa"
+              single-line
+              hide-details
+            />
+            <!-- . Search -->
+          </v-toolbar>
+        </template>
+        <template #[`item.company_name`]="item">
+          <a :href="`/c/${item.item.id}`" target="_blank" class="mr-2">
+            {{ item.item.company_name }}
+          </a>
+        </template>
+        <template #[`item.is_validated`]="item">
+          <v-icon v-if="item.item.is_validated" small class="mr-2 validated">
+            mdi-check
+          </v-icon>
+          <v-icon v-else small class="mr-2 not-validated"> mdi-close </v-icon>
+        </template>
+      </v-data-table>
+    </template>
+    <div>
+      <button class="submit-btn" @click="validateCompanies">Validar</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { useAuthStore } from '@/stores/auth'
+export default {
+  setup() {
+    definePageMeta({
+      layout: 'admin',
+      middleware: 'auth',
+      auth: { authority: 'SITE_ADMIN' },
+    })
+    const auth = useAuthStore();
+    return {
+      auth
+    }
+  },
+  data() {
+    return {
+      search: '',
+      companies: [],
+      selectedItemsIndexes: [],
+      loading: true,
+      headers: [
+        { text: 'Nombre', value: 'company_name' },
+        { text: 'C.I.F', value: 'cif' },
+        { text: 'Ciudad', value: 'city' },
+        { text: 'Email', value: 'email' },
+        { text: 'Validada', value: 'is_validated' },
+      ],
+      modalText: '',
+      modalColor: '',
+      activeModal: false
+    }
+  },
+
+  computed: {
+    selectedItems() {
+      const itemsArr = []
+      this.selectedItemsIndexes.forEach(index => {
+        this.companies.forEach(item => {
+          if (item.id === index) {
+            itemsArr.push(item)
+          }
+        })
+      })
+      return itemsArr
+    }
+  },
+
+  async mounted() {
+    try{
+      const config = useRuntimeConfig()
+      const data = await $fetch('admin_companies/', {
+        baseURL: config.public.baseURL,
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${this.auth.access}`
+        }
+      })
+      this.companies = data
+      this.loading = false
+    } catch (error) {
+      console.error('Error fetching companies:', error)
+      this.loading = false
+    }
+  },
+
+  methods: {
+    async validateCompanies() {
+      const config = useRuntimeConfig()
+      try {
+        await this.selectedItems.forEach(async (item) => {
+          await $fetch(`admin_companies/${item.id}/`, {
+            baseURL: config.public.baseURL,
+            method: 'PATCH',
+            body: {
+              is_validated: true,
+            },
+            headers: {
+              Authorization: `Bearer ${this.auth.access}`
+            },
+          })
+          const index = this.companies.indexOf(item)
+          this.companies[index].is_validated = true
+          this.selectedItemsIndexes = []
+          this.modalText = 'Los productos han sido eliminados correctamente.'
+          this.modalColor = 'success'
+          this.activeModal = true
+        })
+      } catch (error) {
+        console.error('Error validating companies:', error)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  margin-top: 40px;
+  margin-bottom: 80px;
+}
+.title {
+  color: $color-navy;
+  font-size: $xxl;
+  margin-bottom: 2.5rem;
+}
+
+.submit-btn {
+  background-color: $color-orange;
+  color: $color-light;
+  border: none;
+  border-radius: 5px;
+  text-transform: uppercase;
+  padding: 10px 15px;
+  margin-top: 15px;
+}
+
+.validated {
+  color: green;
+}
+.not-validated {
+  color: red;
+}
+</style>
diff --git a/pages/admin/estadisticas.vue b/pages/admin/estadisticas.vue
new file mode 100644
index 0000000..c4b69f9
--- /dev/null
+++ b/pages/admin/estadisticas.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="container">
+    <div class="row general">
+      <div class="text-center col-6">
+        <h2>Cooperativas</h2>
+        <p class="general-value">
+          <strong>{{ companiesCount }}</strong>
+        </p>
+      </div>
+      <div class="text-center col-6">
+        <h2>Productos</h2>
+        <p class="general-value">
+          <strong>{{ productsCount }}</strong>
+        </p>
+      </div>
+    </div>
+    <hr />
+    <trend-stats
+      :color="`#39af77`"
+      :name="`Nuevas cooperativas`"
+      :values="companiesTimeline"
+    />
+    <trend-stats
+      :color="`red`"
+      :name="`Nuevos productos`"
+      :values="productsTimeline"
+    />
+    <trend-stats
+      :color="`purple`"
+      :name="`Nuevos usuarios`"
+      :values="usersTimeline"
+    />
+    <trend-stats
+      :color="`blue`"
+      :name="`Contactados`"
+      :values="contactTimeline"
+    />
+    <trend-stats
+      :color="`orange`"
+      :name="`Redirecciones a producto`"
+      :values="shoppingTimeline"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  layout: 'admin',
+  middleware: 'auth',
+  meta: {
+    auth: { authority: 'SITE_ADMIN' },
+  },
+  async asyncData(context) {
+    const { data } = await context.$api.get(`/admin_stats/`)
+    const companiesCount = data.company_count
+    const productsCount = data.product_count
+    const companiesTimeline = data.companies_timeline
+    const productsTimeline = data.products_timeline
+    const usersTimeline = data.users_timeline
+    const contactTimeline = data.contact_timeline
+    const shoppingTimeline = data.shopping_timeline
+
+    return {
+      companiesCount,
+      productsCount,
+      companiesTimeline,
+      productsTimeline,
+      usersTimeline,
+      contactTimeline,
+      shoppingTimeline,
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.general-value {
+  font-size: 50px;
+}
+</style>
diff --git a/pages/admin/importar.vue b/pages/admin/importar.vue
new file mode 100644
index 0000000..7a60c20
--- /dev/null
+++ b/pages/admin/importar.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col-10"></div>
+      <h1 class="title">Importar productos desde CSV</h1>
+    </div>
+    <form @submit.prevent="submitFile">
+      <div class="cont-col">
+        <label for="file"> Archivo .csv</label>
+        <input
+          id="file"
+          type="file"
+          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+          placeholder="Elige un archivo"
+          required
+          @change="handleFile"
+        />
+      </div>
+      <p v-if="error" class="error">{{ error }}</p>
+      <SubmitButton text="Importar"></SubmitButton>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  layout: 'admin',
+  middleware: 'auth',
+  meta: {
+    auth: { authority: 'SITE_ADMIN' },
+  },
+  data() {
+    return {
+      file: null,
+      error: null,
+    }
+  },
+
+  methods: {
+    async handleFile(e) {
+      const selectedFile = await e.target.files[0]
+      this.file = selectedFile
+    },
+
+    async submitFile() {
+      this.error = null
+      const formData = new FormData()
+      formData.append('csv_file', this.file)
+
+      try {
+        await this.$api.post('/load_coops/', formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+          },
+        })
+      } catch {
+        this.error = 'Ha habido un error'
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  margin-top: 40px;
+  margin-bottom: 80px;
+}
+.title {
+  color: $color-navy;
+  font-size: $xxl;
+  margin-bottom: 2.5rem;
+}
+.cont-col {
+  margin: 15px 0;
+  display: flex;
+  flex-direction: column;
+}
+
+label {
+  text-align: left;
+  color: $color-navy;
+  font-weight: $bold;
+  font-size: $xs;
+}
+
+.error {
+  color: $color-error;
+}
+</style>
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
new file mode 100644
index 0000000..78b124d
--- /dev/null
+++ b/pages/admin/index.vue
@@ -0,0 +1,29 @@
+<template>
+  <BContainer class="admin-dashboard">
+    <h1>Panel de Administración</h1>
+    <p>Bienvenido al panel de administración. Aquí puedes gestionar la configuración del sitio y los permisos de los usuarios.</p>
+  </BContainer>
+</template>
+
+<script>
+export default {
+  setup() {
+    definePageMeta({
+      layout: 'admin',
+      middleware: 'auth',
+      auth: { authority: 'SITE_ADMIN' },
+    })
+  }
+}
+</script>
+
+<style>
+.admin-dashboard {
+  padding: 20px;
+}
+
+.admin-dashboard h1 {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+</style>
\ No newline at end of file

From a8f9e33dcdce8f2753dad1987c6ccdadd5aee5fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Thu, 21 Aug 2025 14:30:09 +0200
Subject: [PATCH 11/21] admin/import page and functionality

---
 pages/admin/importar.vue | 42 +++++++++++++++++++++++++++++++---------
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/pages/admin/importar.vue b/pages/admin/importar.vue
index 7a60c20..8b68da0 100644
--- a/pages/admin/importar.vue
+++ b/pages/admin/importar.vue
@@ -1,5 +1,12 @@
 <template>
   <div class="container">
+    <BModal 
+        id="modal-center" 
+        v-model="activeModal" 
+        centered 
+        title="latienda.coop" 
+        :ok-variant="modalColor"> {{ modalText }}
+    </BModal>
     <div class="row">
       <div class="col-10"></div>
       <h1 class="title">Importar productos desde CSV</h1>
@@ -17,22 +24,32 @@
         />
       </div>
       <p v-if="error" class="error">{{ error }}</p>
-      <SubmitButton text="Importar"></SubmitButton>
+      <SubmitButton text="Importar" />
     </form>
   </div>
 </template>
 
 <script>
+import { useAuthStore } from '@/stores/auth'
 export default {
-  layout: 'admin',
-  middleware: 'auth',
-  meta: {
-    auth: { authority: 'SITE_ADMIN' },
+  setup() {
+    definePageMeta({
+      layout: 'admin',
+      middleware: 'auth',
+      auth: { authority: 'SITE_ADMIN' },
+    })
+    const auth = useAuthStore();
+    return {
+      auth
+    }
   },
   data() {
     return {
       file: null,
       error: null,
+      modalText: '',
+      modalColor: '',
+      activeModal: false
     }
   },
 
@@ -46,15 +63,22 @@ export default {
       this.error = null
       const formData = new FormData()
       formData.append('csv_file', this.file)
-
+      //TODO: Review functionality
       try {
-        await this.$api.post('/load_coops/', formData, {
+        await $fetch('/load_coops/',{
+          baseURL: config.public.baseURL,
+          method: 'POST',
+          body: formData,
           headers: {
-            'Content-Type': 'multipart/form-data',
+            Authorization: `Bearer ${this.auth.access}`,
           },
         })
-      } catch {
+        this.modalText = 'Productos importados correctamente'
+        this.modalColor = 'success'
+        this.activeModal = true
+      } catch (error) {
         this.error = 'Ha habido un error'
+        console.error('Error importing products:', error)
       }
     },
   },

From 4cf42687ef84ce300ccb5c75c50ede956f849091 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Thu, 21 Aug 2025 15:32:08 +0200
Subject: [PATCH 12/21] wip admin/estadisticas

---
 components/TrendStats.vue    | 141 +++++++++++++++++++++++++++++++++++
 pages/admin/estadisticas.vue |  74 ++++++++++++------
 2 files changed, 193 insertions(+), 22 deletions(-)
 create mode 100644 components/TrendStats.vue

diff --git a/components/TrendStats.vue b/components/TrendStats.vue
new file mode 100644
index 0000000..e4cb9bc
--- /dev/null
+++ b/components/TrendStats.vue
@@ -0,0 +1,141 @@
+<template>
+  <div v-if="values" :style="cssProps" class="trendChart">
+    <div class="data">
+      <div class="data-info">
+        <header>
+          <strong class="title">{{ name }}</strong>
+        </header>
+        <div class="period">
+          <span class="period-text">{{ info.month }}</span>
+        </div>
+        <strong class="value">{{ info.value }}</strong>
+      </div>
+      <div class="chart">
+        <ClientOnly>
+          <TrendChart
+            :datasets="[dataset]"
+            padding="5 0 0 5"
+            :min="0"
+            :interactive="true"
+            @mouse-move="onMouseMove"
+          />
+        </ClientOnly>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+    values: {
+      type: Array,
+      default: () => [],
+    },
+    color: {
+      type: String,
+      default: 'inherit',
+      required: false,
+    },
+  },
+
+  data() {
+    return {
+      currentInfo: null,
+      months: [
+        'Enero',
+        'Febrero',
+        'Marzo',
+        'Abril',
+        'Mayo',
+        'Junio',
+        'Julio',
+        'Agosto',
+        'Septiembre',
+        'Octubre',
+        'Noviembre',
+        'Diciembre',
+      ],
+    }
+  },
+  computed: {
+    dataset() {
+      return {
+        data: this.values,
+        showPoints: true,
+        fill: true,
+        smooth: true,
+      }
+    },
+    cssProps() {
+      return {
+        '--color': this.color,
+      }
+    },
+    info() {
+      return {
+        month: this.currentInfo ? this.currentInfo.month : 'Este mes',
+        value: this.currentInfo
+          ? this.currentInfo.value
+          : this.values[11].value,
+      }
+    },
+  },
+  methods: {
+    onMouseMove(params) {
+      if (params) {
+        this.currentInfo = {
+          month: this.months[params.data[0].month - 1],
+          value: params.data[0].value,
+        }
+      } else {
+        this.currentInfo = null
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.trendChart {
+  border-bottom: 2px solid rgba(var(--color), 0.2);
+  .title {
+    color: var(--color);
+  }
+  .data {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    .value {
+      font-size: 30px;
+    }
+    .chart {
+      width: 40%;
+    }
+  }
+  .stroke {
+    stroke-width: 2;
+    stroke: var(--color);
+  }
+  .fill {
+    opacity: 0.2;
+    fill: var(--color);
+  }
+  .active-line {
+    stroke: rgba(0, 0, 0, 0.2);
+  }
+  .point {
+    display: none;
+    fill: var(--color);
+    stroke: var(--color);
+  }
+  .point.is-active {
+    display: block;
+  }
+}
+</style>
diff --git a/pages/admin/estadisticas.vue b/pages/admin/estadisticas.vue
index c4b69f9..16dd448 100644
--- a/pages/admin/estadisticas.vue
+++ b/pages/admin/estadisticas.vue
@@ -14,6 +14,11 @@
         </p>
       </div>
     </div>
+    {{ companiesTimeline }}
+      {{ productsTimeline }}
+      {{ usersTimeline }}
+      {{ contactTimeline }}
+      {{ shoppingTimeline }}
     <hr />
     <trend-stats
       :color="`#39af77`"
@@ -44,35 +49,60 @@
 </template>
 
 <script>
-export default {
-  layout: 'admin',
-  middleware: 'auth',
-  meta: {
-    auth: { authority: 'SITE_ADMIN' },
-  },
-  async asyncData(context) {
-    const { data } = await context.$api.get(`/admin_stats/`)
-    const companiesCount = data.company_count
-    const productsCount = data.product_count
-    const companiesTimeline = data.companies_timeline
-    const productsTimeline = data.products_timeline
-    const usersTimeline = data.users_timeline
-    const contactTimeline = data.contact_timeline
-    const shoppingTimeline = data.shopping_timeline
+import { useAuthStore } from '@/stores/auth'
 
+export default {
+  setup() {
+    definePageMeta({
+      layout: 'admin',
+      middleware: 'auth',
+      auth: { authority: 'SITE_ADMIN' },
+    })
+
+    const auth = useAuthStore()
+    return { auth }
+  },
+
+  data() {
     return {
-      companiesCount,
-      productsCount,
-      companiesTimeline,
-      productsTimeline,
-      usersTimeline,
-      contactTimeline,
-      shoppingTimeline,
+      companiesCount: 0,
+      productsCount: 0,
+      companiesTimeline: [],
+      productsTimeline: [],
+      usersTimeline: [],
+      contactTimeline: [],
+      shoppingTimeline: [],
     }
   },
+  async created() {
+    const config = useRuntimeConfig()
+    try {
+      const stats = await $fetch('/admin_stats/', {
+        baseURL: config.public.baseURL,
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${this.auth.access}`,
+        },
+      })
+      if (stats) {
+        this.companiesCount = stats.company_count
+        this.productsCount = stats.product_count
+        this.companiesTimeline = stats.companies_timeline
+        this.productsTimeline = stats.products_timeline
+        this.usersTimeline = stats.users_timeline
+        this.contactTimeline = stats.contact_timeline
+        this.shoppingTimeline = stats.shopping_timeline
+      }
+    } catch (error) {
+      console.error('Error fetching admin stats:', error)
+    }
+
+  },
+
 }
 </script>
 
+
 <style lang="scss" scoped>
 .general-value {
   font-size: 50px;

From 500dd1efbe5620be1c0a40b6f31dcb4802272787 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Fri, 22 Aug 2025 10:27:48 +0200
Subject: [PATCH 13/21] wip busqueda page

---
 components/FacebookSignIn.vue |  60 ++++++
 components/GoogleSignIn.vue   |  92 +++++++++
 components/ProductFilter.vue  | 338 ++++++++++++++++++++++++++++++
 components/SearchHeader.vue   |  12 +-
 pages/busqueda.vue            | 377 +++++++++++++++++++++++++++++++++-
 pages/test/admin.vue          |  17 --
 6 files changed, 865 insertions(+), 31 deletions(-)
 create mode 100644 components/FacebookSignIn.vue
 create mode 100644 components/GoogleSignIn.vue
 create mode 100644 components/ProductFilter.vue
 delete mode 100644 pages/test/admin.vue

diff --git a/components/FacebookSignIn.vue b/components/FacebookSignIn.vue
new file mode 100644
index 0000000..f6eac37
--- /dev/null
+++ b/components/FacebookSignIn.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <button class="button f-signin-btn" @click="logInWithFacebook">
+      Login with Facebook
+    </button>
+  </div>
+</template>
+<script>
+export default {
+  head() {
+    return {
+      script: [
+        {
+          src: 'https://connect.facebook.net/es_ES/sdk.js',
+          defer: true,
+          async: true,
+        },
+      ],
+    }
+  },
+
+  mounted() {
+    window.fbAsyncInit = async function () {
+      await window.FB.init({
+        appId: process.env.facebookId,
+        cookie: true,
+        version: 'v13.0',
+      })
+    }
+  },
+
+  methods: {
+    async logInWithFacebook() {
+      await window.FB.login(function (response) {
+        if (response.authResponse) {
+          console.log(response)
+          alert('You are logged in &amp; cookie set!')
+          // Now you can redirect the user or do an AJAX request to
+          // a PHP script that grabs the signed request from the cookie.
+        } else {
+          alert('User cancelled login or did not fully authorize.')
+        }
+      })
+      return false
+    },
+  },
+}
+</script>
+<style lang="scss" scooped>
+.f-signin-btn {
+  align-self: center;
+  background-color: $color-facebook;
+  color: $color-light;
+  border: none;
+  border-radius: 5px;
+  text-transform: uppercase;
+  padding: 15px 20px;
+  margin-top: 15px;
+}
+</style>
diff --git a/components/GoogleSignIn.vue b/components/GoogleSignIn.vue
new file mode 100644
index 0000000..bba2f64
--- /dev/null
+++ b/components/GoogleSignIn.vue
@@ -0,0 +1,92 @@
+<template>
+  <button class="g-signin-btn" id="googleSignIn" type="button">
+    Login with Google
+  </button>
+  <!-- id="google-signin-button"
+    class="g-signin2"
+    data-onsuccess="onGoogleSignIn" -->
+</template>
+<script>
+/* eslint-disable */
+// function onGoogleSignIn(googleUser) {
+//   // Useful data for your client-side scripts:
+//   var profile = googleUser.getBasicProfile()
+//   console.log('ID: ' + profile.getId()) // Don't send this directly to your server!
+//   console.log('Full Name: ' + profile.getName())
+//   console.log('Given Name: ' + profile.getGivenName())
+//   console.log('Family Name: ' + profile.getFamilyName())
+//   console.log('Image URL: ' + profile.getImageUrl())
+//   console.log('Email: ' + profile.getEmail())
+
+//   // The ID token you need to pass to your backend:
+//   var id_token = googleUser.getAuthResponse().id_token
+//   console.log('ID Token: ' + id_token)
+// }
+
+function onLoadGoogleCallback() {
+  gapi.load('auth2', function () {
+    const auth2 = gapi.auth2.init({
+      client_id: process.env.googleId,
+      cookiepolicy: 'single_host_origin',
+      scope: 'profile',
+    })
+
+    const element = document.getElementById('googleSignIn')
+    auth2.attachClickHandler(
+      element,
+      {},
+      function (googleUser) {
+        console.log('Signed in: ' + googleUser.getBasicProfile().getName())
+      },
+      function (error) {
+        console.log('Sign-in error', error)
+      }
+    )
+  })
+}
+
+export default {
+  head() {
+    return {
+      meta: [
+        {
+          name: 'google-signin-scope',
+          content: 'profile email',
+        },
+        {
+          name: 'google-signin-client_id',
+          content: process.env.googleId,
+        },
+      ],
+      script: [
+        {
+          src: 'https://apis.google.com/js/platform.js',
+          defer: true,
+          async: true,
+        },
+        // {
+        //   src: 'https://apis.google.com/js/api:client.js',
+        // },
+      ],
+    }
+  },
+  mounted() {
+    window.onload = onLoadGoogleCallback
+  },
+
+  methods: {},
+}
+</script>
+
+<style lang="scss" scoped>
+.g-signin-btn {
+  align-self: center;
+  background-color: $color-google;
+  color: $color-light;
+  border: none;
+  border-radius: 5px;
+  text-transform: uppercase;
+  padding: 15px 20px;
+  margin-top: 15px;
+}
+</style>
diff --git a/components/ProductFilter.vue b/components/ProductFilter.vue
new file mode 100644
index 0000000..6dd42ef
--- /dev/null
+++ b/components/ProductFilter.vue
@@ -0,0 +1,338 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col-12">
+        <div v-b-toggle.collapse-all class="filters-header">
+          <img
+            class="image"
+            src="@/assets/img/product-filter-filtrar.svg"
+            alt=""
+          />
+          <h2 class="text">FILTRAR POR</h2>
+        </div>
+        <BCollapse id="collapse-all" visible>
+          <!-- Location -->
+          <div class="row">
+            <div class="col-12">
+              <div class="location">
+                <div class="googleaddress-container">
+                  <!-- TODO: Revisar componente -->
+                  <!-- <GoogleAddress
+                    @addedData="getPlace"
+                    :geo="geo"
+                    :label="'Cercanía'"
+                  /> -->
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="collapsible collapsible-range">
+            <hr />
+            <div v-b-toggle.collapse-price class="m-1 filter-header">
+              <h2 class="title">Precio</h2>
+              <img
+                src="../assets/img/latienda-arrow-down.svg"
+                alt=""
+                class="arrow"
+              />
+            </div>
+            <BCollapse id="collapse-price" visible>
+              <!-- Price -->
+              <div class="filter-range-container">
+                <ClientOnly>
+                    <v-range-slider
+                      v-model="priceRange"
+                      :min="0"
+                      :max="500"
+                      step="10"
+                      thumb-label="always"
+                      color="#8cead8"
+                      track-color="#d6d5d5"
+                    >
+                      <template #prepend>
+                        <span>{{ priceRange[0] }} €</span>
+                      </template>
+                      <template #append>
+                        <span>{{ priceRange[1] }} €</span>
+                      </template>
+                    </v-range-slider>
+                </ClientOnly>
+              </div>
+              <hr class="dotted-hr" />
+              <div class="form-check">
+                <input
+                  id="checkbox-shipped"
+                  v-model="filterForm.shipping_cost"
+                  class="form-check-input"
+                  type="checkbox"
+                />
+                <label class="form-check-label" for="checkbox-shipped">
+                  Sin gastos de envío
+                </label>
+              </div>
+              <hr class="dotted-hr" />
+              <div class="form-check">
+                <input
+                  id="checkbox-discount"
+                  v-model="filterForm.discount"
+                  class="form-check-input"
+                  type="checkbox"
+                  value=""
+                />
+                <label class="form-check-label" for="checkbox-discount">
+                  Descuentos
+                </label>
+              </div>
+            </BCollapse>
+          </div>
+          <div class="collapsible collapsible-checkboxes">
+            <hr />
+            <div v-b-toggle.collapse-categories class="m-1 filter-header">
+              <h2 class="title">Categorías</h2>
+              <img
+                src="../assets/img/latienda-arrow-down.svg"
+                alt=""
+                class="arrow"
+              />
+            </div>
+            <BCollapse id="collapse-categories" visible>
+              <div class="checkboxes">
+                <div
+                  v-for="(n, index) in categories"
+                  :key="index"
+                  class="form-check"
+                >
+                  <input
+                    :id="'checkbox-' + index"
+                    v-model="checkedCategories"
+                    class="form-check-input"
+                    type="checkbox"
+                    :value="n"
+                  />
+                  <label class="form-check-label" :for="'checkbox-' + index">
+                    {{ n }}
+                  </label>
+                </div>
+              </div>
+              <div>
+                <button class="filter-button" @click="applyFilters">
+                  Aplicar
+                </button>
+              </div>
+            </BCollapse>
+          </div>
+        </BCollapse>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    filters: {
+      type: Object,
+      default: () => ({})
+    },
+    prices: {
+      type: Object,
+      default: () => ({})
+    },
+    currentFilters: {
+      type: Object,
+      default: () => ({})
+    },
+    geo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+
+  emits: ['applyFilters'],
+
+  data() {
+    return {
+      filterForm: {
+        shipping_cost: false,
+        discount: false,
+      },
+      visible: true,
+      checkedCategories: [],
+      categories: [
+        'Alimentación, bebida y tabaco',
+        'Arte y ocio',
+        'Bebés y niños pequeños',
+        'Bricolaje',
+        'Cámaras y ópticas',
+        'Casa y jardín',
+        'Economía e industria',
+        'Electrónica',
+        'Elementos religiosos y ceremoniales',
+        'Equipamiento deportivo',
+        'Juegos y juguetes',
+        'Maletas y bolsos de viaje',
+        'Material de oficina',
+        'Mobiliario',
+        'Multimedia',
+        'Productos para adultos',
+        'Productos para mascotas y animales',
+        'Ropa y accesorios',
+        'Salud y belleza',
+        'Software',
+        'Vehículos y recambios',
+      ],
+      priceRange: [0, 500],
+      priceRangeFilter: {},
+      place: null,
+      coordinates: null,
+    }
+  },
+
+  watch: {
+    currentFilters(newCurrentFilters) {
+      if (newCurrentFilters) {
+        if (newCurrentFilters['category']) {
+          this.checkedCategories = newCurrentFilters['category']
+        } else {
+          this.checkedCategories = []
+        }
+        if (Object.keys(newCurrentFilters).includes('shipping_cost')) {
+          this.filterForm.shipping_cost = true
+        } else {
+          this.filterForm.shipping_cost = false
+        }
+      }
+      this.filterForm.discount = this.$route.query.hasOwnProperty('discount')
+    },
+    prices(newPrices) {
+      if (newPrices.min && newPrices.max) {
+        this.priceRange = [newPrices.min, newPrices.max]
+      }
+    },
+  },
+
+  mounted() {
+    if (this.prices.min && this.prices.max) {
+      this.priceRange = [this.prices.min, this.prices.max]
+    }
+  },
+
+  methods: {
+    getPlace(value) {
+      this.place = value
+    },
+
+    applyFilters() {
+      const filters = {}
+      filters.price_min = this.priceRange[0]
+      filters.price_max = this.priceRange[1]
+      if (this.filterForm.shipping_cost) filters.shipping_cost = false
+      if (this.filterForm.discount) filters.discount = true
+      filters.category = this.checkedCategories
+      if (this.place) {
+        filters.latitude = this.place.geo.latitude
+        filters.longitude = this.place.geo.longitude
+      }
+      this.$emit('applyFilters', filters)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.filter-button {
+  margin-top: 30px;
+  background-color: $color-navy;
+  color: $color-light;
+  font-size: $xs;
+  padding: 0.5em 0.8em;
+  border-radius: 5px;
+}
+.filter-range-container {
+  margin-top: 60px;
+}
+.filters-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 20px;
+  outline: none;
+  @include mobile {
+    margin-top: 2rem;
+  }
+  .text {
+    font-size: $s;
+    margin: 0;
+    margin-left: 10px;
+    color: $color-navy;
+    font-weight: $bold;
+  }
+  .image {
+    height: 20px;
+  }
+}
+
+.location {
+  label {
+    font-size: $s;
+    color: $color-navy;
+    font-weight: $bold;
+    position: relative;
+  }
+
+  label:before {
+    content: '';
+    position: absolute;
+    left: 10px;
+    top: 0;
+    bottom: 0;
+    width: 20px;
+    background: url('../assets/img/product-filter-ubicacion.svg') center /
+      contain no-repeat;
+  }
+
+  .location-input {
+    background-color: $color-grey-nav;
+    border: none;
+    border-radius: 5px;
+    padding-top: 40px;
+    padding-bottom: 1px;
+  }
+}
+
+.collapsible {
+  .filter-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    outline: none;
+
+    h2 {
+      font-size: $s;
+      color: $color-navy;
+      font-weight: $bold;
+    }
+    img {
+      width: 12px;
+    }
+  }
+  label {
+    display: inline-block;
+    font-family: Noto Sans Regular, sans-serif;
+    font-size: $s;
+    color: $color-greytext;
+  }
+}
+
+.checkboxes {
+  height: 6rem;
+  overflow-y: scroll;
+}
+
+.dotted-hr {
+  border-top: 2px dotted $color-greylighter;
+  margin: 8px 0;
+}
+</style>
diff --git a/components/SearchHeader.vue b/components/SearchHeader.vue
index 7cd15d5..dd87971 100644
--- a/components/SearchHeader.vue
+++ b/components/SearchHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container wrapper">
-    <form @submit.prevent="search" class="search-container">
+    <form class="search-container" @submit.prevent="search" >
       <div class="categorias-wrapper">
         <select v-model="selectedCategory" class="categorias">
           <option selected value="">Todas las categorías</option>
@@ -15,13 +15,13 @@
       </div>
       <input
         id="searchbox"
-        @focus="focused"
-        @blur="focusedOut"
         v-model="searchText"
         class="search-text"
         type="text"
         autocomplete="off"
         placeholder=""
+        @focus="focused"
+        @blur="focusedOut"
       />
       <div class="search-link">
         <img
@@ -76,7 +76,7 @@ export default {
     this.startTyping()
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.stopTyping()
   },
 
@@ -96,8 +96,8 @@ export default {
       let i = 0
       let word = 0
       let step = 0
-      let input = document.querySelector('#searchbox')
-      let placeholderTexts = [
+      const input = document.querySelector('#searchbox')
+      const placeholderTexts = [
         'Jabón sólido',
         'Huertos de libertad',
         'Hierbabuena',
diff --git a/pages/busqueda.vue b/pages/busqueda.vue
index 5b45506..43bde35 100644
--- a/pages/busqueda.vue
+++ b/pages/busqueda.vue
@@ -1,18 +1,379 @@
 <template>
-  <div>
-pagina busqueda
-    <h1>Busqueda</h1>
-    <p>Esta es la página de búsqueda.</p>
-    <p>Utiliza el componente NavBarSearch para navegar.</p>
+  <div class="container mt-5">
+    <div class="row">
+      <div class="col-md-3">
+        <ProductFilter
+        :filters="filters"
+        :current-filters="currentFilters"
+        :prices="prices"
+        :geo="coordinates"
+        @apply-filters="updateData"
+        />
+      </div>
+      <div class="col-md-9">
+        <div class="carousel">
+          <h2 class="title">Últimos productos</h2>
+          <ItemsRow class="items" :type="`product`" :items="carouselProducts" />
+        </div>
+        <div v-if="hasFilterTags" class="applied-filters">
+          <h2 class="title">FILTROS APLICADOS</h2>
+          <div class="filter-buttons">
+            <button
+              v-if="appliedFilters.hasOwnProperty('shipping_cost')"
+              type="button"
+              class="btn-tag"
+              @click="removeFilter('shipping_cost')"
+            >
+              <span>Sin gastos de envío</span>
+              <img src="@/assets/img/latienda-close.svg" alt="" />
+            </button>
+            <button
+              v-if="appliedFilters.hasOwnProperty('discount')"
+              type="button"
+              class="btn-tag"
+              @click="removeFilter('discount')"
+            >
+              <span>Descuentos</span>
+              <img src="@/assets/img/latienda-close.svg" alt="" />
+            </button>
+            <div v-if="appliedFilters.hasOwnProperty('category')">
+              <button
+                v-for="(cat, key) in appliedFilters.category"
+                :key="key"
+                type="button"
+                class="btn-delete-all"
+                @click="removeCategory(cat)"
+              >
+                <span>{{ cat }}</span>
+                <img src="@/assets/img/latienda-close.svg" alt="" />
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="results">
+          <h2 class="title"></h2>
+          <p class="count">Hay {{ count }} productos</p>
+        </div>
+        <div v-if="products.length !== 0">
+          <div v-for="product in products" :key="product.id">
+            <ProductCard :key="product.key" :product="product" />
+          </div>
+          <BPagination
+          v-model="currentPage"
+            class="pagination"
+            :total-rows="count"
+            :per-page="perPage"
+            @change="handlePageChange"
+          />
+        </div>
+        <div v-else class="no-results">
+          <p>
+            No hemos encontrado resultados para su búsqueda... pero puede buscar
+            otro o consultar estos productos.
+          </p>
+          <div v-for="product in defaultProducts" :key="product.id">
+            <ProductCard :key="product.key" :product="product" />
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-  export default {
+import { useAuthStore } from '@/stores/auth'
+//import { useRoute, useRouter } from 'vue-router'
+import serverSearch from '~/utils/serverSearch'
+import clientSearch from '~/utils/clientSearch'
+
+export default {
+  setup(){
+    definePageMeta({
+      layout: 'mainbanner',
+    })
+
+    const auth = useAuthStore()
+    return { auth }
+  },
+
+  data() {
+    return {
+      searchText: '',
+      currentPage: 1,
+      perPage: 10,
+      filterTags: {
+        shipping_cost: undefined,
+      },
+      previousParams: null,
+      currentFilters: null,
+      mountedProducts: [],
+      appliedFilters: {},
+      filters: {},
+      prices: { min: null, max: null },
+      coordinates: null,
+      products: [],
+      defaultProducts: [],
+      carouselProducts: [],
+      count: 0,
+    }
+  },
+
+  computed: {
+    hasFilterTags() {
+      if (!this.appliedFilters) return false
+      return (
+        Object.keys(this.appliedFilters).includes('shipping_cost') ||
+        Object.keys(this.appliedFilters).includes('discount') ||
+        (Array.isArray(this.appliedFilters.category) &&
+          this.appliedFilters.category.length > 0)
+      )
+    },
+  },
+
+  watch: {
+    $route() {
+      Object.assign(this.$data, this.$options.data())
+    },
+  },
+  
+  async beforeCreate() {
+    const config = useRuntimeConfig()
+    const params = import.meta.client ? clientSearch(this.$route.query) : serverSearch(this.$route.query)
+    console.log('Params', this.$route.query)
     
-  }
+    const data = await $fetch(`/search_products/?limit=10&offset=0`, {
+      baseURL: config.public.apiBaseUrl,
+      method: 'GET',
+      params,
+      headers: {
+        Authorization: `Bearer ${this.auth.access}`,
+      },
+    })
+    console.log('data', data)
+
+    const products = data.products
+    let defaultProducts = []
+    if (products.length === 0) {
+      const data = await $fetch(`/search_products/?q=&order=newest&limit=10&offset=0`, {
+        baseURL: config.public.apiBaseUrl,
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${this.auth.access}`,
+        },
+      })
+      defaultProducts = data.products
+    }
+
+    const carouselProducts = await $fetch(`/products/?limit=12&offset=0`, {
+      baseURL: config.public.apiBaseUrl,
+      method: 'GET',
+      headers: {
+        Authorization: `Bearer ${this.auth.access}`,
+      },
+    })
+
+    let coordinates
+    if (params.latitude && params.longitude) {
+      coordinates = {
+        lat: Number(params.latitude),
+        lng: Number(params.longitude),
+      }
+    }
+
+    let prices
+    if (params.price_min || params.price_max) {
+      prices = { max: params.price_max, min: params.price_min }
+    } else if (data.prices.min || data.prices.max) {
+      prices = data.prices
+    } else {
+      prices = { max: null, min: null }
+    }
+
+    return {
+      appliedFilters: params,
+      filters: data.filters,
+      prices: prices,
+      coordinates: coordinates,
+      products: products,
+      defaultProducts: defaultProducts,
+      carouselProducts: carouselProducts.data.results,
+      count: data.count,
+    }
+  },
+  
+  mounted() {
+    this.currentFilters = this.appliedFilters
+  },
+
+  methods: {
+    async handlePageChange(value) {
+      const offset = (value - 1) * this.perPage
+      this.products = await this.getMoreProducts(offset)
+    },
+
+    async getMoreProducts(offset) {
+      const data = await this.$api.get(`/search_products/?limit=10&offset=${offset}`, {
+        baseURL: config.public.apiBaseUrl,
+        method: 'GET',
+        body: { params: this.appliedFilters },
+      })
+      return data.products
+    },
+    
+    updateData(value) {
+      const filters = { q: this.appliedFilters.q }
+
+      if (Object.keys(value).length === 0) { //Review this condition
+        return this.$router.push({
+          name: 'busqueda',
+          query: { ...filters },
+        })
+      } else {
+        return this.$router.push({
+          name: 'busqueda',
+          query: { ...value, ...filters },
+        })
+      }
+    },
+
+    removeCategory(cat) {
+      this.currentFilters = this.appliedFilters
+      const categoryArray = this.currentFilters.category
+      const newCats = []
+      categoryArray.forEach((element) => {
+        if (element !== cat) {
+          newCats.push(element)
+        }
+      })
+      this.currentFilters.category = newCats
+      const noCategory = {}
+      Object.entries(this.currentFilters).forEach(([key, value]) => {
+        if (key !== 'category') {
+          noCategory[key] = value
+        }
+      })
+      if (newCats.length === 0) {
+        return this.$router.push({
+          path: this.$route.path,
+          query: { ...noCategory },
+        })
+      } else {
+        return this.$router.push({
+          path: this.$route.path,
+          query: { category: newCats, ...noCategory },
+        })
+      }
+    },
+
+    removeFilter(filter) {
+      this.currentFilters = { ...this.appliedFilters }
+      this.currentFilters = Object.fromEntries(
+        Object.entries(this.currentFilters).filter(([key]) => key !== filter)
+      )
+
+      return this.$router.push({
+        name: 'busqueda',
+        query: { ...this.currentFilters },
+      })
+    },
+
+
+    search() {
+      if (this.searchText) {
+        return this.$router.push({
+          name: 'busqueda',
+          query: { q: this.searchText },
+        })
+      }
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>
+.ad {
+  margin: 40px auto;
+  width: 100%;
+  height: 100px;
+  background-color: $color-grey-nav;
+  border-radius: 5px;
+}
 
-</style>
\ No newline at end of file
+.applied-filters {
+  @include mobile {
+    display: none;
+  }
+  .title {
+    font-size: $xl;
+    color: $color-navy;
+  }
+}
+
+.filter-buttons {
+  margin-bottom: 30px;
+
+  button {
+    margin-right: 5px;
+    margin-bottom: 5px;
+    border: none;
+    border-radius: 5px;
+    padding: 8px 10px;
+    color: $color-light;
+    background-color: $color-dark-green;
+
+    img {
+      width: 18px;
+      margin-left: 5px;
+      position: relative;
+      bottom: 1px;
+    }
+  }
+
+  .btn-delete-all {
+    background-color: $color-darker-green;
+  }
+}
+
+.carousel {
+  @include mobile {
+    display: none;
+  }
+  .title {
+    font-size: $xl;
+    color: $color-navy;
+    @include tablet {
+      margin-top: 3rem;
+    }
+  }
+  .items {
+    margin: auto;
+  }
+}
+.results {
+  .title {
+    font-size: $xl;
+    color: $color-navy;
+  }
+  .count {
+    font-size: $xs;
+    color: $color-greytext;
+  }
+}
+.pagination {
+  margin-top: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.no-results {
+  p {
+    text-align: center;
+    font-size: $xl;
+    color: $color-navy;
+    margin-top: 100px;
+    margin-bottom: 100px;
+  }
+}
+</style>
diff --git a/pages/test/admin.vue b/pages/test/admin.vue
deleted file mode 100644
index a9dbfdc..0000000
--- a/pages/test/admin.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script>
-export default {
-  layout: 'admin',
-}
-
-// Esto debe estar fuera del export default
-definePageMeta({
-  middleware: 'auth',
-  auth: {
-    authority: 'SITE_ADMIN',
-  },
-})
-</script>
-
-<template>
-  <h1>Solo para admins</h1>
-</template>
\ No newline at end of file

From 541e922ff54822f03b5667c6946aae9cc30dddd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Fri, 22 Aug 2025 13:02:48 +0200
Subject: [PATCH 14/21] google-analytics plugin and plugin review

---
 middleware/auth.ts                 | 27 ++++++++---------
 nuxt.config.ts                     |  7 ++++-
 package-lock.json                  | 34 ++++++++++++++++++---
 package.json                       |  4 ++-
 plugins/api.ts                     | 48 ------------------------------
 plugins/google-analytics.client.ts | 19 ++++++++++++
 stores/auth.ts                     |  1 +
 7 files changed, 72 insertions(+), 68 deletions(-)
 delete mode 100644 plugins/api.ts
 create mode 100644 plugins/google-analytics.client.ts

diff --git a/middleware/auth.ts b/middleware/auth.ts
index e8b09c3..2a0db26 100644
--- a/middleware/auth.ts
+++ b/middleware/auth.ts
@@ -1,8 +1,7 @@
 import { useAuthStore } from '@/stores/auth'
 export default defineNuxtRouteMiddleware((to, from) => {
-  //TODO: remove logs
-  console.log('🔍 Middleware ejecutado')
-  console.log('📦 to.meta:', to.meta)
+  // console.log('🔍 Middleware ejecutado')
+  // console.log('📦 to.meta:', to.meta)
   const AUTH_ROLES = {
     ANON: 0,
     SHOP_USER: 1,
@@ -11,12 +10,12 @@ export default defineNuxtRouteMiddleware((to, from) => {
   }
   const authStore = useAuthStore()
   const userRole = authStore.role
-  console.log('👤 Rol actual:', userRole)
+  //console.log('👤 Rol actual:', userRole)
 
   const authority = to.meta?.auth?.authority as keyof typeof AUTH_ROLES
   const requiredLevel = AUTH_ROLES[authority]
   //const required = to.meta.auth?.authority
-  console.log('⚠️ Autoridad requerida:', authority, requiredLevel)
+  //console.log('⚠️ Autoridad requerida:', authority, requiredLevel)
 
   
   // Check if user is connected first
@@ -25,18 +24,18 @@ export default defineNuxtRouteMiddleware((to, from) => {
   // Get authorizations for matched routes (with children routes too)
 
   const userLevel = AUTH_ROLES[userRole as keyof typeof AUTH_ROLES]
-  console.log('🧮 userLevel:', userLevel, 'requiredLevel:', requiredLevel)
+  //console.log('🧮 userLevel:', userLevel, 'requiredLevel:', requiredLevel)
 
-  console.log('[Auth Middleware]', {
-    to: to.path,
-    meta: to.meta,
-    userRole: authStore.role,
-    requiredLevel,
-    userLevel,
-  })
+  // console.log('[Auth Middleware]', {
+  //   to: to.path,
+  //   meta: to.meta,
+  //   userRole: authStore.role,
+  //   requiredLevel,
+  //   userLevel,
+  // })
   
   if (userLevel < requiredLevel) {
-    console.log('🚫 Bloqueando acceso - redirigiendo a /login')
+    // console.log('🚫 Bloqueando acceso - redirigiendo a /login')
     return navigateTo('/login')
   }
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index ce2711d..3a2d425 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -5,6 +5,7 @@ import { $fetch } from 'ofetch'
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   components: true,
+  ssr: true,
   devtools: { enabled: true },
   modules: [
     '@nuxt/eslint',
@@ -37,7 +38,11 @@ export default defineNuxtConfig({
       },
     },
   },
-  
+
+  plugins: [
+    '~/plugins/google-analytics.client.ts',
+  ],
+
   sitemap: {
     exclude: ['/admin', '/admin/**', '/editar', '/editar/**'],
     urls: async () => {
diff --git a/package-lock.json b/package-lock.json
index 426efc1..dbc3f0d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,11 +14,13 @@
         "@pinia/nuxt": "^0.11.2",
         "dompurify": "^3.2.6",
         "eslint": "^9.32.0",
+        "js-cookie": "^3.0.5",
         "nuxt": "^3.17.7",
         "pinia": "^3.0.3",
-        "pinia-plugin-persistedstate": "^4.4.1",
+        "pinia-plugin-persistedstate": "^4.5.0",
         "vue": "^3.5.18",
         "vue-advanced-cropper": "^2.8.9",
+        "vue-gtag": "^3.5.2",
         "vue-router": "^4.5.1",
         "vue3-carousel": "^0.16.0"
       },
@@ -9283,6 +9285,15 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -11069,9 +11080,9 @@
       }
     },
     "node_modules/pinia-plugin-persistedstate": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-4.4.1.tgz",
-      "integrity": "sha512-lmuMPpXla2zJKjxEq34e1E9P9jxkWEhcVwwioCCE0izG45kkTOvQfCzvwhW3i38cvnaWC7T1eRdkd15Re59ldw==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-4.5.0.tgz",
+      "integrity": "sha512-QTkP1xJVyCdr2I2p3AKUZM84/e+IS+HktRxKGAIuDzkyaKKV48mQcYkJFVVDuvTxlI5j6X3oZObpqoVB8JnWpw==",
       "license": "MIT",
       "dependencies": {
         "deep-pick-omit": "^1.2.1",
@@ -14106,6 +14117,21 @@
         "eslint": "^8.57.0 || ^9.0.0"
       }
     },
+    "node_modules/vue-gtag": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/vue-gtag/-/vue-gtag-3.5.2.tgz",
+      "integrity": "sha512-efTY4yrkNraFSu6CZqhFZLX5LggqCr44d6kcPnPPtzYhvu5ywrTFUnuvM2Vm238QC+YT43HkVEXV/L1OYnHvNg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.5.13",
+        "vue-router": "^4.5.0"
+      },
+      "peerDependenciesMeta": {
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.5.1",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
diff --git a/package.json b/package.json
index 77deeaa..c1b8ac4 100644
--- a/package.json
+++ b/package.json
@@ -17,11 +17,13 @@
     "@pinia/nuxt": "^0.11.2",
     "dompurify": "^3.2.6",
     "eslint": "^9.32.0",
+    "js-cookie": "^3.0.5",
     "nuxt": "^3.17.7",
     "pinia": "^3.0.3",
-    "pinia-plugin-persistedstate": "^4.4.1",
+    "pinia-plugin-persistedstate": "^4.5.0",
     "vue": "^3.5.18",
     "vue-advanced-cropper": "^2.8.9",
+    "vue-gtag": "^3.5.2",
     "vue-router": "^4.5.1",
     "vue3-carousel": "^0.16.0"
   },
diff --git a/plugins/api.ts b/plugins/api.ts
deleted file mode 100644
index 9eb70f9..0000000
--- a/plugins/api.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-// plugins/api.ts
-import { useAuthStore } from '~/stores/auth'
-
-export default defineNuxtPlugin((nuxtApp) => {
-  const auth = useAuthStore()
-
-  // Función personalizada para hacer requests
-  const apiFetch = async (url: string, options: any = {}) => {
-    try {
-      const res = await $fetch(url, {
-        baseURL: useRuntimeConfig().public.apiBase,
-        credentials: 'include', // para enviar cookies si es necesario
-        headers: {
-          ...(options.headers || {}),
-          ...(auth.access ? { Authorization: `Bearer ${auth.access}` } : {}),
-        },
-        ...options,
-      })
-      return res
-    } catch (error: any) {
-      // Si no es 401, relanzamos el error
-      if (error?.status !== 401) throw error
-
-      // Si es el endpoint de refresh, cerramos sesión
-      if (url.includes('refresh')) {
-        auth.logout()
-        return navigateTo('/login')
-      }
-
-      // Usuario inactivo
-      if (error?.data?.code === 'user_inactive') {
-        auth.logout()
-        return navigateTo('/login')
-      }
-
-      // Intentar refresh
-      try {
-        await auth.refresh()
-        return await apiFetch(url, options) // reintentar la petición original
-      } catch {
-        return navigateTo({ name: 'index', query: { redirected: 'true' } })
-      }
-    }
-  }
-
-  // Inyectar como $api
-  nuxtApp.provide('api', apiFetch)
-})
diff --git a/plugins/google-analytics.client.ts b/plugins/google-analytics.client.ts
new file mode 100644
index 0000000..2da6843
--- /dev/null
+++ b/plugins/google-analytics.client.ts
@@ -0,0 +1,19 @@
+// TODO: Review if its OK. https://matteo-gabriele.gitbook.io/vue-gtag/migration-v2-to-v3
+import { configure } from 'vue-gtag'
+import { useRouter } from 'vue-router'
+
+export default defineNuxtPlugin(() => {
+  const config = useRuntimeConfig()
+  const router = useRouter()
+
+  if (config.public.googleAnalyticsId) {
+    configure({
+      tagId: config.public.googleAnalyticsId,
+      appName: 'latienda.coop',
+      pageTracker: {
+        router,
+        useScreenview: true,
+      },
+    })
+  }
+})
\ No newline at end of file
diff --git a/stores/auth.ts b/stores/auth.ts
index 26b7428..e3988b3 100644
--- a/stores/auth.ts
+++ b/stores/auth.ts
@@ -11,6 +11,7 @@ export const useAuthStore = defineStore('auth', {
     role: 'ANON' as string,
     cookiesAreAccepted: false,
   }),
+  persist: true, // Enable persistence. Cookies will be stored 'auth'
   getters: {
     isAuthenticated: (state) => !!state.access,
     isUser: (state) => state.role === 'SHOP_USER',

From d7aeb1e98c080abca88804b2d3e1e80fbc1c1fe5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Fri, 22 Aug 2025 13:03:14 +0200
Subject: [PATCH 15/21] add some comments

---
 components/ProductCard.vue        | 7 ++-----
 components/ProductCardDetails.vue | 2 +-
 components/ProductModal.vue       | 2 +-
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/components/ProductCard.vue b/components/ProductCard.vue
index 2fc0964..58220f0 100644
--- a/components/ProductCard.vue
+++ b/components/ProductCard.vue
@@ -145,19 +145,16 @@
 
     <div v-if="expanded && relatedProducts" class="related_products">
       <h2>Productos relacionados</h2>
-      <ProductsRelated :relatedProducts="relatedProducts" />
+      <ProductsRelated :related-products="relatedProducts" />
     </div>
-    <ProductModal v-if="modal" :product="product" @close="closeModal" />
+    <ProductModal :product="product" @close="closeModal" />
   </div>
 </template>
 
 <script>
 import { mapState } from 'pinia'
-import ProductModal from './ProductModal.vue'
-import ProductsRelated from './ProductsRelated.vue'
 import socialShare from '~/utils/socialShare'
 export default {
-  components: { ProductsRelated, ProductModal },
   props: {
     product: {
       type: Object,
diff --git a/components/ProductCardDetails.vue b/components/ProductCardDetails.vue
index 2970577..42f001e 100644
--- a/components/ProductCardDetails.vue
+++ b/components/ProductCardDetails.vue
@@ -176,7 +176,7 @@ export default {
         })
       }
     },
-    // TODO: implement buyIntent (review functionality)
+    // TODO: implement buyIntent (review functionality, because sendLog is not working)
     buyIntent() {
       this.sendLog('shop')
       return this.product.url
diff --git a/components/ProductModal.vue b/components/ProductModal.vue
index 04011c2..85a8fcd 100644
--- a/components/ProductModal.vue
+++ b/components/ProductModal.vue
@@ -158,7 +158,7 @@ export default {
       let response
       let status
       const config = useRuntimeConfig()
-      try { //TODO: review if its working
+      try {
         response = await $fetch(`/purchase_email/`, {
           baseURL: config.public.baseURL,
           method: 'POST',

From 4462fe0a4d36febb3680f67b9ae870e98f127a9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Fri, 22 Aug 2025 16:09:27 +0200
Subject: [PATCH 16/21] echarts added to estadisticas page

---
 components/LineChart.vue     | 117 +++++++++++++++++++++++++++++++++++
 components/TrendStats.vue    | 102 ++++++++++++++++++++----------
 package-lock.json            |  32 ++++++++++
 package.json                 |   1 +
 pages/admin/estadisticas.vue |  10 +--
 stores/auth.ts               |   2 +-
 6 files changed, 227 insertions(+), 37 deletions(-)
 create mode 100644 components/LineChart.vue

diff --git a/components/LineChart.vue b/components/LineChart.vue
new file mode 100644
index 0000000..5969567
--- /dev/null
+++ b/components/LineChart.vue
@@ -0,0 +1,117 @@
+<template>
+  <!-- <section> -->
+  <div :id="chartId" class="chart-container ">
+    <div v-show="dialog && dialog.dataIndex !== -1" class="chart-dialog">
+      <p>this is a test</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts/core';
+import { LineChart } from 'echarts/charts';
+import { nextTick } from 'vue';
+
+// Import the tooltip, title, rectangular coordinate system, dataset and transform components
+import {
+  DatasetComponent,
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  TransformComponent
+} from 'echarts/components';
+
+// Features like Universal Transition and Label Layout
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
+
+// Register the required components
+echarts.use([
+  DatasetComponent,
+  DataZoomComponent,
+  GridComponent,
+  LabelLayout,
+  LegendComponent,
+  LineChart,
+  SVGRenderer,
+  TitleComponent,
+  TooltipComponent,
+  TransformComponent,
+  UniversalTransition,
+  CanvasRenderer
+]);
+export default {
+  props: {
+    chartId: {
+      type: String,
+      default: ''
+    },
+    lineChartData: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      showDataDialog: false,
+      dialog: {
+        top: 0,
+        left: 0,
+        dataIndex: -1,
+      }
+    }
+  },
+  computed: {
+    chartContainer() {
+      return document.getElementById(this.chartId)
+    }
+  },
+  watch: {
+    lineChartData: {
+      immediate: true,
+      deep: true,
+      handler(newVal) {
+        if (newVal && newVal.xAxis && newVal.series) {
+          this.$nextTick(() => {
+            const el = document.getElementById(this.chartId);
+            if (el && el.clientWidth > 0 && el.clientHeight > 0) {
+              this.initChart();
+            }
+          });
+        }
+      }
+    }
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.chartContainer, {
+        renderer: 'svg',
+        useDirtyRect: false,
+        decalPattern: true,
+      });
+      this.chart.setOption(this.lineChartData)
+      this.chart.resize();
+    },
+  },
+}
+</script>
+
+<style>
+.chart-container {
+  position: relative; 
+  width: 100%; 
+  height: 24rem; 
+  color: #000000; 
+}
+
+.chart-dialog {
+  position: absolute; 
+  z-index: 10; 
+  width: 6rem; 
+  height: 6rem; 
+  background-color: #ffffff; 
+}
+</style>
\ No newline at end of file
diff --git a/components/TrendStats.vue b/components/TrendStats.vue
index e4cb9bc..1c52f5d 100644
--- a/components/TrendStats.vue
+++ b/components/TrendStats.vue
@@ -5,20 +5,14 @@
         <header>
           <strong class="title">{{ name }}</strong>
         </header>
-        <div class="period">
-          <span class="period-text">{{ info.month }}</span>
+        <div v-if="info" class="period">
+          <span class="period-text">{{ info?.month }}</span>
+          <strong class="value">{{ info?.value }}</strong>
         </div>
-        <strong class="value">{{ info.value }}</strong>
       </div>
       <div class="chart">
         <ClientOnly>
-          <TrendChart
-            :datasets="[dataset]"
-            padding="5 0 0 5"
-            :min="0"
-            :interactive="true"
-            @mouse-move="onMouseMove"
-          />
+          <LineChart :chart-id="chartId" :line-chart-data="dataset" />
         </ClientOnly>
       </div>
     </div>
@@ -32,6 +26,10 @@ export default {
       type: String,
       default: '',
     },
+    chartId: {
+      type: String,
+      default: '',
+    },
     values: {
       type: Array,
       default: () => [],
@@ -60,15 +58,41 @@ export default {
         'Noviembre',
         'Diciembre',
       ],
+      abrevMonths: [
+        'Ene',
+        'Feb',
+        'Mar',
+        'Abr',
+        'May',
+        'Jun',
+        'Jul',
+        'Ago',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dic',
+      ]
     }
   },
+
   computed: {
     dataset() {
       return {
-        data: this.values,
-        showPoints: true,
-        fill: true,
-        smooth: true,
+        xAxis: {
+          type: 'category',
+          data: this.abrevMonths
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: this.yAxisValues,
+            type: 'line',
+            smooth: true,
+            color: this.color
+          }
+        ]
       }
     },
     cssProps() {
@@ -77,26 +101,37 @@ export default {
       }
     },
     info() {
-      return {
-        month: this.currentInfo ? this.currentInfo.month : 'Este mes',
-        value: this.currentInfo
-          ? this.currentInfo.value
-          : this.values[11].value,
-      }
+      const actualMonth = new Date().getMonth();
+      const currentMonthInfo = this.values.sort((a, b) => a.month - b.month)[actualMonth];
+      const res = {
+        month: currentMonthInfo?.month ? this.months[actualMonth] : 'Este mes',
+        value: currentMonthInfo?.value ? currentMonthInfo?.value : 0,
+      };
+      return res;
+    },
+    yAxisValues(){
+      const ArrValues = [...this.values]
+      const res = [];
+      ArrValues.sort((a, b) => a.month - b.month)
+      ArrValues.forEach(item => {
+        res.push(item.value)
+      })
+      return res
     },
   },
+
   methods: {
-    onMouseMove(params) {
-      if (params) {
-        this.currentInfo = {
-          month: this.months[params.data[0].month - 1],
-          value: params.data[0].value,
-        }
-      } else {
-        this.currentInfo = null
-      }
-    },
-  },
+    // onMouseMove(params) {
+    //   if (params) {
+    //     this.currentInfo = {
+    //       month: this.months[params.data[0].month - 1],
+    //       value: params.data[0].value,
+  //       }
+  //     } else {
+  //       this.currentInfo = null
+  //     }
+  //   },
+},
 }
 </script>
 
@@ -111,11 +146,16 @@ export default {
     justify-content: space-between;
     align-items: center;
     width: 100%;
+    .period {
+      display: flex;
+      flex-direction: column-reverse;
+    }
     .value {
       font-size: 30px;
     }
     .chart {
       width: 40%;
+      
     }
   }
   .stroke {
diff --git a/package-lock.json b/package-lock.json
index dbc3f0d..a123584 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@nuxtjs/sitemap": "^7.4.3",
         "@pinia/nuxt": "^0.11.2",
         "dompurify": "^3.2.6",
+        "echarts": "^6.0.0",
         "eslint": "^9.32.0",
         "js-cookie": "^3.0.5",
         "nuxt": "^3.17.7",
@@ -7132,6 +7133,22 @@
       "integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A==",
       "license": "MIT"
     },
+    "node_modules/echarts": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
+      "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "6.0.0"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -14656,6 +14673,21 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
+    },
+    "node_modules/zrender": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz",
+      "integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
     }
   }
 }
diff --git a/package.json b/package.json
index c1b8ac4..31b52e8 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@nuxtjs/sitemap": "^7.4.3",
     "@pinia/nuxt": "^0.11.2",
     "dompurify": "^3.2.6",
+    "echarts": "^6.0.0",
     "eslint": "^9.32.0",
     "js-cookie": "^3.0.5",
     "nuxt": "^3.17.7",
diff --git a/pages/admin/estadisticas.vue b/pages/admin/estadisticas.vue
index 16dd448..d0b9312 100644
--- a/pages/admin/estadisticas.vue
+++ b/pages/admin/estadisticas.vue
@@ -14,33 +14,33 @@
         </p>
       </div>
     </div>
-    {{ companiesTimeline }}
-      {{ productsTimeline }}
-      {{ usersTimeline }}
-      {{ contactTimeline }}
-      {{ shoppingTimeline }}
     <hr />
     <trend-stats
+      :chart-id="`1`"
       :color="`#39af77`"
       :name="`Nuevas cooperativas`"
       :values="companiesTimeline"
     />
     <trend-stats
+      :chart-id="`2`"
       :color="`red`"
       :name="`Nuevos productos`"
       :values="productsTimeline"
     />
     <trend-stats
+      :chart-id="`3`"
       :color="`purple`"
       :name="`Nuevos usuarios`"
       :values="usersTimeline"
     />
     <trend-stats
+      :chart-id="`4`"
       :color="`blue`"
       :name="`Contactados`"
       :values="contactTimeline"
     />
     <trend-stats
+      :chart-id="`5`"
       :color="`orange`"
       :name="`Redirecciones a producto`"
       :values="shoppingTimeline"
diff --git a/stores/auth.ts b/stores/auth.ts
index e3988b3..ff8b6f7 100644
--- a/stores/auth.ts
+++ b/stores/auth.ts
@@ -11,7 +11,7 @@ export const useAuthStore = defineStore('auth', {
     role: 'ANON' as string,
     cookiesAreAccepted: false,
   }),
-  persist: true, // Enable persistence. Cookies will be stored 'auth'
+  //persist: true, // TODO: Enable persistence. Cookies will be stored 'auth'
   getters: {
     isAuthenticated: (state) => !!state.access,
     isUser: (state) => state.role === 'SHOP_USER',

From a9a525d85897aad260af9df5a9fa7a0c3404d0bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Tue, 26 Aug 2025 15:01:13 +0200
Subject: [PATCH 17/21] busqueda page: loading products spinner & endopoints
 tests

---
 pages/busqueda.vue | 83 +++++++++++++++++++++++++++++++---------------
 stores/auth.ts     | 22 ++++++++++--
 2 files changed, 77 insertions(+), 28 deletions(-)

diff --git a/pages/busqueda.vue b/pages/busqueda.vue
index 43bde35..4c74f59 100644
--- a/pages/busqueda.vue
+++ b/pages/busqueda.vue
@@ -10,7 +10,11 @@
         @apply-filters="updateData"
         />
       </div>
-      <div class="col-md-9">
+      <div v-if="loadingProducts" class="col-md-9 loading-spinner">
+        <BSpinner />
+        <span>Cargando productos...</span>
+      </div>
+      <div v-if="!loadingProducts" class="col-md-9">
         <div class="carousel">
           <h2 class="title">Últimos productos</h2>
           <ItemsRow class="items" :type="`product`" :items="carouselProducts" />
@@ -78,11 +82,18 @@
       </div>
     </div>
   </div>
+  appliedFilters: {{appliedFilters}} <br>
+    filters: {{filters}} <br>
+    prices: {{prices}} <br>
+    coordinates: {{coordinates}} <br>
+    products: {{products}} <br>
+    defaultProducts: {{defaultProducts}} <br>
+    <!-- carouselProducts: {{carouselProducts}} <br> -->
+    count: {{count}}
 </template>
 
 <script>
 import { useAuthStore } from '@/stores/auth'
-//import { useRoute, useRouter } from 'vue-router'
 import serverSearch from '~/utils/serverSearch'
 import clientSearch from '~/utils/clientSearch'
 
@@ -115,6 +126,7 @@ export default {
       defaultProducts: [],
       carouselProducts: [],
       count: 0,
+      loadingProducts: true
     }
   },
 
@@ -139,14 +151,17 @@ export default {
   async beforeCreate() {
     const config = useRuntimeConfig()
     const params = import.meta.client ? clientSearch(this.$route.query) : serverSearch(this.$route.query)
-    console.log('Params', this.$route.query)
-    
-    const data = await $fetch(`/search_products/?limit=10&offset=0`, {
-      baseURL: config.public.apiBaseUrl,
+
+    const data = await $fetch(`/search_products/?`, {
+      baseURL: config.public.baseURL,
       method: 'GET',
-      params,
+      query: {
+        q: params.q || '',
+        limit: 10,
+        offset: 0
+      },
       headers: {
-        Authorization: `Bearer ${this.auth.access}`,
+        Authorization: '/',
       },
     })
     console.log('data', data)
@@ -154,23 +169,30 @@ export default {
     const products = data.products
     let defaultProducts = []
     if (products.length === 0) {
-      const data = await $fetch(`/search_products/?q=&order=newest&limit=10&offset=0`, {
-        baseURL: config.public.apiBaseUrl,
+      console.log('no products, fetching default')
+      const data = await $fetch(`/search_products/?q=${params.q}`, {
+        baseURL: config.public.baseURL,
         method: 'GET',
+        query: {
+          order: 'newest',
+          limit: 10,
+          offset: 0
+        },
         headers: {
-          Authorization: `Bearer ${this.auth.access}`,
+          Authorization: '/',
         },
       })
       defaultProducts = data.products
     }
 
-    const carouselProducts = await $fetch(`/products/?limit=12&offset=0`, {
-      baseURL: config.public.apiBaseUrl,
+    const carouselProducts = await $fetch(`/products/`, {
+      baseURL: config.public.baseURL,
       method: 'GET',
       headers: {
-        Authorization: `Bearer ${this.auth.access}`,
+        Authorization: '/',
       },
     })
+    console.log('carouselProducts', carouselProducts)
 
     let coordinates
     if (params.latitude && params.longitude) {
@@ -188,19 +210,19 @@ export default {
     } else {
       prices = { max: null, min: null }
     }
-
-    return {
-      appliedFilters: params,
-      filters: data.filters,
-      prices: prices,
-      coordinates: coordinates,
-      products: products,
-      defaultProducts: defaultProducts,
-      carouselProducts: carouselProducts.data.results,
-      count: data.count,
-    }
+    //TODO: Implement filtering logic
+    this.appliedFilters = params.q
+    this.filters = data.filters
+    this.prices = prices
+    this.coordinates = coordinates
+    this.products = products
+    this.defaultProducts = defaultProducts
+    this.carouselProducts = carouselProducts
+    this.count = data.count
+    this.loadingProducts = false
   },
   
+
   mounted() {
     this.currentFilters = this.appliedFilters
   },
@@ -213,7 +235,7 @@ export default {
 
     async getMoreProducts(offset) {
       const data = await this.$api.get(`/search_products/?limit=10&offset=${offset}`, {
-        baseURL: config.public.apiBaseUrl,
+        baseURL: config.public.baseURL,
         method: 'GET',
         body: { params: this.appliedFilters },
       })
@@ -376,4 +398,13 @@ export default {
     margin-bottom: 100px;
   }
 }
+
+.loading-spinner {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
 </style>
diff --git a/stores/auth.ts b/stores/auth.ts
index ff8b6f7..0932460 100644
--- a/stores/auth.ts
+++ b/stores/auth.ts
@@ -1,5 +1,5 @@
-// stores/auth.ts
 import { defineStore } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 export const useAuthStore = defineStore('auth', {
   state: () => ({
@@ -11,7 +11,25 @@ export const useAuthStore = defineStore('auth', {
     role: 'ANON' as string,
     cookiesAreAccepted: false,
   }),
-  //persist: true, // TODO: Enable persistence. Cookies will be stored 'auth'
+  //persist: true, // TODO: Enable persistence. Cookies will be stored 'auth' 👉🏻 https://prazdevs.github.io/pinia-plugin-persistedstate/frameworks/nuxt
+  // persist: {
+  //   key: 'authentication-cookie',
+  //   storage: piniaPluginPersistedstate.cookies({
+  //     expires: 14, 
+  //     sameSite: 'strict',
+  //     secure: !import.meta.dev,
+  //   }),
+  //   paths: [
+  //     'id',
+  //     'name',
+  //     'email',
+  //     'role',
+  //     'access',
+  //     'refresh',
+  //     'cookiesAreAccepted',
+  //   ],
+  // },
+
   getters: {
     isAuthenticated: (state) => !!state.access,
     isUser: (state) => state.role === 'SHOP_USER',

From 5577628c56942e17abca7c2ed08b4067593093f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Wed, 27 Aug 2025 10:55:25 +0200
Subject: [PATCH 18/21] fix logout action

---
 components/NavBar.vue           |  8 +++-----
 components/NavBarEditar.vue     | 13 ++++++++++---
 components/NavBarEditarUser.vue | 14 +++++++++++---
 components/NavMenu.vue          | 11 ++++++-----
 layouts/admin.vue               | 22 +++++++++++++++++-----
 stores/auth.ts                  | 23 ++++++++++++-----------
 6 files changed, 59 insertions(+), 32 deletions(-)

diff --git a/components/NavBar.vue b/components/NavBar.vue
index 473dd3c..daca11c 100644
--- a/components/NavBar.vue
+++ b/components/NavBar.vue
@@ -2,7 +2,7 @@
   <header class="header">
     <div class="container wrapper">
       <div class="navmenu-container">
-        <NavMenu @logout="logout" />
+        <NavMenu @handle-logout="handleLogout" />
       </div>
       <!-- isAdmin: {{ isAdmin }} <br>
       isAuthenticated: {{ isAuthenticated }} <br> -->
@@ -71,7 +71,6 @@
 import { mapActions } from 'pinia'
 import { useAuthStore } from '@/stores/auth'
 export default {
-
   setup() {
     const auth = useAuthStore();
     return {
@@ -89,10 +88,9 @@ export default {
       return this.auth.getName
     },
   },
-
   methods: {
-    ...mapActions('auth', ['logout']),
-    async logout() {
+    ...mapActions(useAuthStore, ['logout']),
+    async handleLogout() {
       try {
         await this.logout()
         this.$router.push('/login')
diff --git a/components/NavBarEditar.vue b/components/NavBarEditar.vue
index 8668c74..e03e48f 100644
--- a/components/NavBarEditar.vue
+++ b/components/NavBarEditar.vue
@@ -13,12 +13,13 @@
       to="/editar/productos/importar"
       >Importar</NuxtLink
     >
-    <NuxtLink to="/" @click="logout" >Cerrar sesión</NuxtLink>
+    <NuxtLink to="/" @click="handleLogout" >Cerrar sesión</NuxtLink>
   </div>
 </template>
 
 <script>
 import { useAuthStore } from '@/stores/auth'
+import { mapActions } from 'pinia'
 export default {
   setup() {
     const auth = useAuthStore();
@@ -35,8 +36,14 @@ export default {
     await this.checkIfCoopValidated()
   },
   methods: {
-    async logout() {
-      await this.auth.logout()
+    ...mapActions(useAuthStore, ['logout']),
+    async handleLogout() {
+      try {
+        await this.logout()
+        this.$router.push('/')
+      } catch (error) {
+        console.error('Error logging out:', error)
+      }
     },
     async checkIfCoopValidated() {
       const config = useRuntimeConfig()
diff --git a/components/NavBarEditarUser.vue b/components/NavBarEditarUser.vue
index 0f79d44..c66fa6f 100644
--- a/components/NavBarEditarUser.vue
+++ b/components/NavBarEditarUser.vue
@@ -1,12 +1,14 @@
 <template>
   <div class="navsearch_container container-fluid">
     <NuxtLink to="/editar/perfil">Mi perfil</NuxtLink>
-    <NuxtLink to="/" @click="logout" >Cerrar sesión</NuxtLink>
+    <NuxtLink to="/" @click="handleLogout" >Cerrar sesión</NuxtLink>
   </div>
 </template>
 
 <script>
 import { useAuthStore } from '@/stores/auth'
+import { mapActions } from 'pinia'
+
 export default {
   setup() {
     const auth = useAuthStore();
@@ -15,8 +17,14 @@ export default {
     }
   },
   methods: {
-    async logout() {
-      await this.auth.logout()
+    ...mapActions(useAuthStore, ['logout']),
+    async handleLogout() {
+      try {
+        await this.logout()
+        this.$router.push('/')
+      } catch (error) {
+        console.error('Error logging out:', error)
+      }
     },
   },
 }
diff --git a/components/NavMenu.vue b/components/NavMenu.vue
index 41ee580..1aa6cea 100644
--- a/components/NavMenu.vue
+++ b/components/NavMenu.vue
@@ -95,7 +95,7 @@
                 <span class="section-text login">Importar</span>
               </li>
             </NuxtLink>
-            <NuxtLink v-if="isAuthenticated" @click="logout" to="/">
+            <NuxtLink v-if="isAuthenticated" @click="handleLogout" to="/">
               <li class="section" @click="isMenuOpen = !isMenuOpen">
                 <img
                   class="section-img"
@@ -145,6 +145,7 @@ import { mapActions } from 'pinia'
 import { useAuthStore } from '@/stores/auth'
 
 export default {
+  emits: ['handleLogout'],
   setup() {
     const auth = useAuthStore();
     return {
@@ -165,11 +166,11 @@ export default {
     },
   },
   methods: {
-    ...mapActions('auth', ['logout']),
-    async logout() {
+    ...mapActions(useAuthStore, ['logout']),
+    async handleLogout() {
       this.isMenuOpen = false
-      this.$emit('logout')
-      await this.logout()
+      this.$emit('handleLogout')
+      //await this.logout()
     },
   },
 }
diff --git a/layouts/admin.vue b/layouts/admin.vue
index 67c09f2..d92c3dc 100644
--- a/layouts/admin.vue
+++ b/layouts/admin.vue
@@ -5,20 +5,32 @@
       <NuxtLink to="/admin/cooperativas"> Administrar cooperativas </NuxtLink>
       <NuxtLink to="/admin/importar"> Alta de cooperativas por .csv </NuxtLink>
       <NuxtLink to="/admin/estadisticas"> Estadísticas </NuxtLink>
-      <NuxtLink to="/" @click="logout">Cerrar sesión</NuxtLink>
+      <button @click="handleLogout" class="logout-link">Cerrar sesión</button>
+      <!-- <NuxtLink to="/" @click="handleLogout">Cerrar sesión</NuxtLink> -->
     </div>
     <NuxtPage />
   </div>
 </template>
 
 <script>
+import { useAuthStore } from '@/stores/auth'
 import { mapActions } from 'pinia'
 export default {
-
+  setup() {
+    const auth = useAuthStore();
+    return {
+      auth,
+    }
+  },
   methods: {
-    ...mapActions('auth', ['logout']),
-    async logout() {
-      await this.logout()
+    ...mapActions(useAuthStore, ['logout']),
+    async handleLogout() {
+      try {
+        await this.logout()
+        this.$router.push('/')
+      } catch (error) {
+        console.error('Error logging out:', error)
+      }
     },
   },
 }
diff --git a/stores/auth.ts b/stores/auth.ts
index 0932460..d395e9a 100644
--- a/stores/auth.ts
+++ b/stores/auth.ts
@@ -4,14 +4,15 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 export const useAuthStore = defineStore('auth', {
   state: () => ({
     access: null as string | null,
-    refresh: null as string | null,
+    refreshTokens: null as string | null,
     id: null as number | null,
     name: null as string | null,
     email: null as string | null,
     role: 'ANON' as string,
     cookiesAreAccepted: false,
   }),
-  //persist: true, // TODO: Enable persistence. Cookies will be stored 'auth' 👉🏻 https://prazdevs.github.io/pinia-plugin-persistedstate/frameworks/nuxt
+  
+  persist: true, // TODO: Enable persistence. Cookies will be stored 'auth' 👉🏻 https://prazdevs.github.io/pinia-plugin-persistedstate/frameworks/nuxt
   // persist: {
   //   key: 'authentication-cookie',
   //   storage: piniaPluginPersistedstate.cookies({
@@ -25,7 +26,7 @@ export const useAuthStore = defineStore('auth', {
   //     'email',
   //     'role',
   //     'access',
-  //     'refresh',
+  //     'refreshTokens',
   //     'cookiesAreAccepted',
   //   ],
   // },
@@ -68,22 +69,22 @@ export const useAuthStore = defineStore('auth', {
       }
     },
 
-    async refresh() {
+    async refreshAccessToken() {
       const config = useRuntimeConfig()
-      if (!this.refresh) return
+      if (!this.refreshTokens) return
       const data = await $fetch('/token/refresh/', {
         baseURL: config.public.baseURL,
         method: 'POST',
-        body: { refresh: this.refresh }
+        body: { refresh: this.refreshTokens }
       })
       this.setPayload(data)
     },
 
-    // Mutations migration
-    logout() {
-      this.$reset() // Reset the store state
+    async logout() {
+      this.$reset()
     },
-
+    
+    // Mutations migration
     acceptCookies() {
       this.cookiesAreAccepted = true
     },
@@ -98,7 +99,7 @@ export const useAuthStore = defineStore('auth', {
     setPayload(payload: any) {
       this.access = payload.access
       if (payload.refresh) {
-        this.refresh = payload.refresh
+        this.refreshTokens = payload.refresh
       }
     }
   }

From 49855b11fd1c32ae880b7d408b940368ce8c6c9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Wed, 27 Aug 2025 14:14:49 +0200
Subject: [PATCH 19/21] busqueda functionality amend

---
 components/NavBarSearch.vue | 25 +++++++++++++----
 components/ProductCard.vue  | 55 +++++++++++++++++++------------------
 layouts/admin.vue           |  8 ++++--
 pages/busqueda.vue          | 42 ++++++++++++++++------------
 4 files changed, 79 insertions(+), 51 deletions(-)

diff --git a/components/NavBarSearch.vue b/components/NavBarSearch.vue
index b2db1e9..c5ddf3f 100644
--- a/components/NavBarSearch.vue
+++ b/components/NavBarSearch.vue
@@ -1,16 +1,25 @@
 <template>
   <div class="navsearch_container container-fluid">
     <NuxtLink to="/busqueda"> Todos</NuxtLink>
-    <NuxtLink :to="{ name: 'busqueda', query: { order: 'newest' } }">
-      Últimos productos</NuxtLink
-    >
+    <button  @click="searchLastestProducts"> Últimos productos</button>
     <NuxtLink to="/busqueda"> Más buscados</NuxtLink>
     <NuxtLink to="/c"> Cooperativas</NuxtLink>
     <NuxtLink to="/registro"> Regístrate</NuxtLink>
   </div>
 </template>
 
-<script></script>
+<script>
+export default {
+  methods: {
+    searchLastestProducts() {
+      return navigateTo({
+        name: 'busqueda',
+        query: { order: 'newest' }
+      })
+    }
+  }
+}
+</script>
 
 <style lang="scss" scoped>
 .navsearch_container {
@@ -22,7 +31,7 @@
     display: none;
   }
 
-  a {
+  a, button {
     font-size: $m;
     font-weight: $bold;
     color: $color-navy;
@@ -31,7 +40,11 @@
   a:nth-child(1):after,
   a:nth-child(2):after,
   a:nth-child(3):after,
-  a:nth-child(4):after {
+  a:nth-child(4):after,
+  button:nth-child(1):after,
+  button:nth-child(2):after,
+  button:nth-child(3):after,
+  button:nth-child(4):after {
     color: $color-navy;
     content: '\22EE';
     margin: 0.5rem;
diff --git a/components/ProductCard.vue b/components/ProductCard.vue
index 58220f0..0496a13 100644
--- a/components/ProductCard.vue
+++ b/components/ProductCard.vue
@@ -34,22 +34,15 @@
           class="description"
           :class="{ 'not-expanded-description': !expanded }"
         >
-          <p
+          <p 
             v-if="product.description"
-            v-sanitize="[
-              {
-                allowedTags: ['p'],
-                allowedAttributes: {},
-              },
-              product.description,
-            ]"
-          >
+            v-html="sanitizedDescription"
+          ></p>
             <span v-if="product.shipping_terms">{{
               product.shipping_terms
             }}</span>
-          </p>
         </div>
-        <b-collapse :id="'collapse-' + product.id" accordion="my-accordion">
+        <b-collapse :id="'collapse-' + product.id" accordion="my-accordion" @show="onOpen" @hide="onClose">
           <div class="tags_container">
             <NuxtLink
               :to="tagRoute(n)"
@@ -142,16 +135,16 @@
         }}</span>
       </div>
     </div>
-
     <div v-if="expanded && relatedProducts" class="related_products">
       <h2>Productos relacionados</h2>
       <ProductsRelated :related-products="relatedProducts" />
     </div>
-    <ProductModal :product="product" @close="closeModal" />
+    <ProductModal v-if="modal" :product="product" @close-modal="closeModal" />
   </div>
 </template>
 
 <script>
+import DOMPurify from 'dompurify'
 import { mapState } from 'pinia'
 import socialShare from '~/utils/socialShare'
 export default {
@@ -171,30 +164,40 @@ export default {
   },
   computed: {
     ...mapState(useAuthStore, ['access']),
+    sanitizedDescription() {
+      return DOMPurify.sanitize(this.product.description, {
+        ALLOWED_TAGS: ['p'],
+        ALLOWED_ATTR: [],
+      })
+    }
   },
   mounted() {
     this.productUrl = window.location.origin + `/productos/${this.product.id}`
-
-    this.$root.$on('bv::collapse::state', async (collapseId, isJustShown) => {
-      if (collapseId === `collapse-${this.product.id}`) {
-        this.expanded = isJustShown
-        if (this.expanded) {
-          await this.getRelatedProducts()
-          await this.sendLog('view')
-        }
-      }
-    })
+    this.getRelatedProducts()
   },
 
   methods: {
+    async onOpen() {
+      this.expanded = true
+      await this.getRelatedProducts()
+      await this.sendLog('view')
+    },
+    onClose() {
+      this.expanded = false
+    },
     tagRoute(tag) {
       return `/busqueda?tags=${tag}`
     },
     async getRelatedProducts() {
       try {
-        const { data } = await this.$api.get(
-          `/products/${this.product.id}/related/`
-        )
+        const config = useRuntimeConfig()
+        const data = await $fetch(`/products/${this.product.id}/related/`, {
+          baseURL: config.public.baseURL,
+          method: 'GET',
+          headers: {
+            Authorization: '/',
+          },
+        })
         this.relatedProducts = data
       } catch {
         this.relatedProducts = null
diff --git a/layouts/admin.vue b/layouts/admin.vue
index d92c3dc..aa5ebd0 100644
--- a/layouts/admin.vue
+++ b/layouts/admin.vue
@@ -42,7 +42,7 @@ export default {
   text-align: center;
   padding: 20px 20px;
 
-  a {
+  a, button {
     font-size: $m;
     font-weight: $bold;
     color: $color-navy;
@@ -50,7 +50,11 @@ export default {
   }
   a:nth-child(1):after,
   a:nth-child(2):after,
-  a:nth-child(3):after {
+  a:nth-child(3):after,
+  button:nth-child(1):after,
+  button:nth-child(2):after,
+  button:nth-child(3):after,
+  button:nth-child(4):after {
     color: $color-navy;
     content: '\22EE';
     margin: 0.5rem;
diff --git a/pages/busqueda.vue b/pages/busqueda.vue
index 4c74f59..2b8f329 100644
--- a/pages/busqueda.vue
+++ b/pages/busqueda.vue
@@ -17,7 +17,7 @@
       <div v-if="!loadingProducts" class="col-md-9">
         <div class="carousel">
           <h2 class="title">Últimos productos</h2>
-          <ItemsRow class="items" :type="`product`" :items="carouselProducts" />
+          <ItemsRow class="items" :type="`product`" :items="carouselProducts.results" />
         </div>
         <div v-if="hasFilterTags" class="applied-filters">
           <h2 class="title">FILTROS APLICADOS</h2>
@@ -82,14 +82,14 @@
       </div>
     </div>
   </div>
-  appliedFilters: {{appliedFilters}} <br>
+  <!-- appliedFilters: {{appliedFilters}} <br>
     filters: {{filters}} <br>
     prices: {{prices}} <br>
     coordinates: {{coordinates}} <br>
     products: {{products}} <br>
     defaultProducts: {{defaultProducts}} <br>
-    <!-- carouselProducts: {{carouselProducts}} <br> -->
-    count: {{count}}
+     carouselProducts: {{carouselProducts}} <br>
+    count: {{count}} -->
 </template>
 
 <script>
@@ -151,29 +151,25 @@ export default {
   async beforeCreate() {
     const config = useRuntimeConfig()
     const params = import.meta.client ? clientSearch(this.$route.query) : serverSearch(this.$route.query)
-
     const data = await $fetch(`/search_products/?`, {
       baseURL: config.public.baseURL,
       method: 'GET',
-      query: {
-        q: params.q || '',
-        limit: 10,
-        offset: 0
-      },
+      params: params,
       headers: {
         Authorization: '/',
       },
     })
-    console.log('data', data)
+    //console.log('data', data)
 
     const products = data.products
+    //console.log('products', products)
     let defaultProducts = []
     if (products.length === 0) {
-      console.log('no products, fetching default')
+      //console.log('no products, fetching default')
       const data = await $fetch(`/search_products/?q=${params.q}`, {
         baseURL: config.public.baseURL,
         method: 'GET',
-        query: {
+        params: {
           order: 'newest',
           limit: 10,
           offset: 0
@@ -188,11 +184,15 @@ export default {
     const carouselProducts = await $fetch(`/products/`, {
       baseURL: config.public.baseURL,
       method: 'GET',
+      params: {
+          limit: 10,
+          offset: 0
+        },
       headers: {
         Authorization: '/',
       },
     })
-    console.log('carouselProducts', carouselProducts)
+    //console.log('carouselProducts', carouselProducts)
 
     let coordinates
     if (params.latitude && params.longitude) {
@@ -210,7 +210,7 @@ export default {
     } else {
       prices = { max: null, min: null }
     }
-    //TODO: Implement filtering logic
+
     this.appliedFilters = params.q
     this.filters = data.filters
     this.prices = prices
@@ -234,10 +234,18 @@ export default {
     },
 
     async getMoreProducts(offset) {
-      const data = await this.$api.get(`/search_products/?limit=10&offset=${offset}`, {
+      const config = useRuntimeConfig()
+      const data = await $fetch(`/search_products/`, {
         baseURL: config.public.baseURL,
         method: 'GET',
-        body: { params: this.appliedFilters },
+        params: {
+          ...this.appliedFilters,
+          limit: 10,
+          offset: offset
+        },
+        headers: {
+          Authorization: '/',
+        },
       })
       return data.products
     },

From 71274defb2dce6c467e354ac2deb7ff60174e024 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Thu, 28 Aug 2025 13:53:06 +0200
Subject: [PATCH 20/21] toast replace by modals, and product filters working

---
 components/ProductCard.vue        | 31 ++++++++++++---------
 components/ProductCardDetails.vue | 28 ++++++++++---------
 components/ProductModal.vue       |  2 +-
 pages/busqueda.vue                | 45 +++++++++++++++++++------------
 pages/editar/productos/index.vue  |  9 +++----
 5 files changed, 66 insertions(+), 49 deletions(-)

diff --git a/components/ProductCard.vue b/components/ProductCard.vue
index 0496a13..837fa34 100644
--- a/components/ProductCard.vue
+++ b/components/ProductCard.vue
@@ -140,6 +140,13 @@
       <ProductsRelated :related-products="relatedProducts" />
     </div>
     <ProductModal v-if="modal" :product="product" @close-modal="closeModal" />
+    <BModal 
+        id="modal-center" 
+        v-model="active" 
+        centered 
+        title="latienda.coop" 
+        :ok-variant="modalColor"> {{ modalText }}
+    </BModal>
   </div>
 </template>
 
@@ -160,6 +167,9 @@ export default {
       modal: false,
       productUrl: null,
       relatedProducts: null,
+      active: false,
+      modalText: '',
+      modalColor: 'info',
     }
   },
   computed: {
@@ -274,21 +284,16 @@ export default {
     },
 
     closeModal(value) {
+      console.log(value)
       this.modal = false
-      if (value === 200) {
-        this.$bvToast.toast(`Email enviado correctamente`, {
-          title: 'latienda.coop',
-          autoHideDelay: 5000,
-          appendToast: true,
-          variant: 'success',
-        })
+      this.active = true
+      if (value === 200 || value === 201) {
+        this.modalText = 'Actualizado correctamente'
+        this.modalColor = 'success'
       } else if (value) {
-        this.$bvToast.toast(`Se ha producido un error en el envío`, {
-          title: 'latienda.coop',
-          autoHideDelay: 5000,
-          appendToast: true,
-          variant: 'danger',
-        })
+        this.modalText = 'Se ha producido un error en el envío'
+        this.modalColor = 'danger'
+      
       }
     },
 
diff --git a/components/ProductCardDetails.vue b/components/ProductCardDetails.vue
index 42f001e..15ac2e0 100644
--- a/components/ProductCardDetails.vue
+++ b/components/ProductCardDetails.vue
@@ -106,6 +106,13 @@
       <ProductsRelated :related-products="relatedProducts" />
     </div>
     <ProductModal v-if="modal" :product="product" @close-modal="closeModal" />
+    <BModal 
+      id="modal-center" 
+      v-model="active" 
+      centered 
+      title="latienda.coop" 
+      :ok-variant="modalColor"> {{ modalText }}
+  </BModal>
   </div>
 </template>
 
@@ -137,6 +144,9 @@ export default {
       modal: true,
       productUrl: null,
       geolocation: null,
+      active: false,
+      modalText: '',
+      modalColor: 'info',
     }
   },
   computed: {
@@ -161,19 +171,13 @@ export default {
     },
     closeModal(value) {
       this.modal = false
-      if (value === 200) {
-        this.$bvToast.toast(`Email enviado correctamente`, {
-          title: 'latienda.coop',
-          autoHideDelay: 5000,
-          appendToast: true,
-        })
+      if (value === 200 || value === 201) {
+        this.modalText = 'Actualizado correctamente'
+        this.modalColor = 'success'
       } else if (value) {
-        this.$bvToast.toast(`Se ha producido un error en el envío`, {
-          title: 'latienda.coop',
-          autoHideDelay: 5000,
-          appendToast: true,
-          variant: 'danger',
-        })
+        this.modalText = 'Se ha producido un error en el envío'
+        this.modalColor = 'danger'
+      
       }
     },
     // TODO: implement buyIntent (review functionality, because sendLog is not working)
diff --git a/components/ProductModal.vue b/components/ProductModal.vue
index 85a8fcd..7666445 100644
--- a/components/ProductModal.vue
+++ b/components/ProductModal.vue
@@ -182,7 +182,7 @@ export default {
       })
     },
     handleEmit() {
-      this.$emit('closeModal')
+      this.$emit('closeModal', null)
     },
   },
 }
diff --git a/pages/busqueda.vue b/pages/busqueda.vue
index 2b8f329..1b45ad7 100644
--- a/pages/busqueda.vue
+++ b/pages/busqueda.vue
@@ -58,12 +58,13 @@
           <h2 class="title"></h2>
           <p class="count">Hay {{ count }} productos</p>
         </div>
+        
         <div v-if="products.length !== 0">
           <div v-for="product in products" :key="product.id">
             <ProductCard :key="product.key" :product="product" />
           </div>
           <BPagination
-          v-model="currentPage"
+            v-model="currentPage"
             class="pagination"
             :total-rows="count"
             :per-page="perPage"
@@ -82,6 +83,7 @@
       </div>
     </div>
   </div>
+  
   <!-- appliedFilters: {{appliedFilters}} <br>
     filters: {{filters}} <br>
     prices: {{prices}} <br>
@@ -126,7 +128,7 @@ export default {
       defaultProducts: [],
       carouselProducts: [],
       count: 0,
-      loadingProducts: true
+      loadingProducts: true,
     }
   },
 
@@ -139,14 +141,20 @@ export default {
         (Array.isArray(this.appliedFilters.category) &&
           this.appliedFilters.category.length > 0)
       )
-    },
+    }
   },
 
   watch: {
-    $route() {
+    '$route.query'(newValue) {
+      console.log('New Value:', newValue)
+      console.log('Route changed:', this.$route.fullPath)
+      console.log('Current params:', this.$route.query)
+      this.updateData(newValue)
       Object.assign(this.$data, this.$options.data())
-    },
+      
+    }
   },
+
   
   async beforeCreate() {
     const config = useRuntimeConfig()
@@ -250,20 +258,23 @@ export default {
       return data.products
     },
     
-    updateData(value) {
+    async updateData(value) {
+      console.log('updateData called with:', value)
       const filters = { q: this.appliedFilters.q }
+      const query = Object.keys(value).length === 0 ? { ...filters } : { ...value, ...filters }
 
-      if (Object.keys(value).length === 0) { //Review this condition
-        return this.$router.push({
-          name: 'busqueda',
-          query: { ...filters },
-        })
-      } else {
-        return this.$router.push({
-          name: 'busqueda',
-          query: { ...value, ...filters },
-        })
-      }
+      this.$router.push({ name: 'busqueda', query })
+
+      const config = useRuntimeConfig()
+      const data = await $fetch('/search_products/', {
+        baseURL: config.public.baseURL,
+        method: 'GET',
+        params: query,
+        headers: { Authorization: '/' },
+      })
+      this.products = data.products
+      this.count = data.count
+      this.loadingProducts = false
     },
 
     removeCategory(cat) {
diff --git a/pages/editar/productos/index.vue b/pages/editar/productos/index.vue
index 1c221fa..e42681e 100644
--- a/pages/editar/productos/index.vue
+++ b/pages/editar/productos/index.vue
@@ -133,12 +133,9 @@ export default {
 
   async created() {
     if (this.$route.params.action === 'created') {
-      this.$bvToast.toast(`Producto creado`, {
-        title: 'latienda.coop',
-        autoHideDelay: 5000,
-        appendToast: true,
-        variant: 'success',
-      })
+      this.modalText = 'Producto creado correctamente'
+      this.modalColor = 'success'
+      this.activeModal = true
     }
     await this.getDataFromApi()
   },

From b8a05b0d0580b412566ac504b824ad0e7bab2a37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Thu, 28 Aug 2025 14:26:40 +0200
Subject: [PATCH 21/21] comment logs

---
 pages/busqueda.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/pages/busqueda.vue b/pages/busqueda.vue
index 1b45ad7..40193f6 100644
--- a/pages/busqueda.vue
+++ b/pages/busqueda.vue
@@ -146,9 +146,9 @@ export default {
 
   watch: {
     '$route.query'(newValue) {
-      console.log('New Value:', newValue)
-      console.log('Route changed:', this.$route.fullPath)
-      console.log('Current params:', this.$route.query)
+      //console.log('New Value:', newValue)
+      //console.log('Route changed:', this.$route.fullPath)
+      //console.log('Current params:', this.$route.query)
       this.updateData(newValue)
       Object.assign(this.$data, this.$options.data())
       
@@ -259,10 +259,11 @@ export default {
     },
     
     async updateData(value) {
-      console.log('updateData called with:', value)
+      //console.log('updateData called with:', value)
       const filters = { q: this.appliedFilters.q }
       const query = Object.keys(value).length === 0 ? { ...filters } : { ...value, ...filters }
 
+      //console.log('Navigating to busqueda with query:', query)
       this.$router.push({ name: 'busqueda', query })
 
       const config = useRuntimeConfig()