feat: Add cart store for catalog quantity sync

- Create Pinia cart store to manage cart state globally
- Sync quantity changes between catalog cards and cart sidebar
- Improve product card design with borders and hover effects
- Fix cart sync when updating quantity via minus button or input field

src/components/Purchase.vue

@@ -186,17 +186,17 @@
          clients: [],
          products: [],
      };
-   },
+    },
      created() {
-     this.fetchClients();
+       this.fetchClients();
-     this.fetchProducts();
+       this.fetchProducts();
-     this.fetchPaymentMethods();
+       this.fetchPaymentMethods();
-   },
-   watch: {
-     group () {
-       this.drawer = false
      },
-   },
+    watch: {
+      group () {
+        this.drawer = false
+      },
+    },
    beforeMount() {
       window.addEventListener('beforeunload', this.confirmLeave);
    },
@@ -228,8 +228,8 @@
        });
      },
    },
-   methods: {
+     methods: {
-     openModal() {
+       openModal() {
       this.$refs.customerModal.openModal();
      },
      onFormChange() {
@@ -307,25 +307,25 @@
      calculateSubtotal(line) {
        return line.unit_price * line.quantity;
      },
-     async submit() {
+      async submit() {
-       this.$refs.purchase.validate();
+        this.$refs.purchase.validate();
-         if (this.valid) {
+          if (this.valid) {
-           this.api.createPurchase(this.purchase)
+             this.api.createPurchase(this.purchase)
-               .then(data => {
+                 .then(data => {
-                 console.log('Compra enviada:', data);
+                   console.log('Compra enviada:', data);
-                 this.$router.push({
+                   this.$router.push({
-                   path: "/summary_purchase",
+                    path: "/summary_purchase",
-                   query : {id: parseInt(data.id)}
+                    query : {id: parseInt(data.id)}
-                 });
+                  });
-               })
+                })
-           .catch(error => console.error('Error al enviarl la compra:', error));
+            .catch(error => console.error('Error al enviarl la compra:', error));
-       } else {
+        } else {
-         this.show_alert_purchase = true;
+          this.show_alert_purchase = true;
-           setTimeout(() => {
+            setTimeout(() => {
-             this.show_alert_purchase = false;
+              this.show_alert_purchase = false;
-           }, 4000);
+            }, 4000);
-       }
+        }
-     },
+      },
      navigate(route) {
        this.$router.push(route);
      },

src/pages/catalog.vue

@@ -35,21 +35,32 @@ export default {
     Card,
     Cart
   },
+  setup() {
+    const cartStore = useCartStore();
+    return { cartStore };
+  },
   data() {
     return {
       api: inject('api'),
-      cartItems: [],
       items: [],
     };
   },
+  computed: {
+    cartItems: {
+      get() {
+        return this.cartStore.items;
+      },
+      set(value) {
+        this.cartStore.items = value;
+      }
+    },
+    cartCount() {
+      return this.cartStore.cartCount;
+    }
+  },
   created() {
     this.fetchProducts();
   },
-  computed: {
-    cartCount() {
-      return this.cartItems.reduce((sum, item) => sum + item.quantity, 0);
-    }
-  },
   methods: {
     fetchProducts() {
       this.api.getProducts()
@@ -85,35 +96,17 @@ export default {
     },
     addToCart(item) {
       if (item.quantity <= 0) return;
-      
+      this.cartStore.addItem(item);
-      const existingItem = this.cartItems.find(i => i.id === item.id);
-      if (existingItem) {
-        existingItem.quantity = item.quantity;
-      } else {
-        this.cartItems.push({
-          id: item.id,
-          name: item.name,
-          img: item.img,
-          price: item.price,
-          quantity: item.quantity
-        });
-      }
     },
     removeFromCart(itemId) {
-      const index = this.cartItems.findIndex(i => i.id === itemId);
+      this.cartStore.removeItem(itemId);
-      if (index > -1) {
-        this.cartItems.splice(index, 1);
-      }
       const item = this.items.find(i => i.id === itemId);
       if (item) {
         item.quantity = 0;
       }
     },
     updateCartQuantity({ itemId, quantity }) {
-      const cartItem = this.cartItems.find(i => i.id === itemId);
+      this.cartStore.updateQuantity({ itemId, quantity });
-      if (cartItem) {
-        cartItem.quantity = quantity;
-      }
       const productItem = this.items.find(i => i.id === itemId);
       if (productItem) {
         productItem.quantity = quantity;

src/stores/cart.js

@@ -0,0 +1,43 @@
+import { defineStore } from 'pinia'
+
+export const useCartStore = defineStore('cart', {
+  state: () => ({
+    items: []
+  }),
+  getters: {
+    cartCount: (state) => state.items.reduce((sum, item) => sum + item.quantity, 0),
+    cartTotal: (state) => state.items.reduce((sum, item) => sum + (item.price * item.quantity), 0)
+  },
+  actions: {
+    addItem(product) {
+      const existing = this.items.find(i => i.id === product.id)
+      if (existing) {
+        existing.quantity = product.quantity
+      } else {
+        this.items.push({
+          id: product.id,
+          name: product.name,
+          img: product.img,
+          price: product.price,
+          quantity: product.quantity,
+          measuring_unit: product.measuring_unit || 'Unidad'
+        })
+      }
+    },
+    removeItem(itemId) {
+      const index = this.items.findIndex(i => i.id === itemId)
+      if (index > -1) {
+        this.items.splice(index, 1)
+      }
+    },
+    updateQuantity({ itemId, quantity }) {
+      const item = this.items.find(i => i.id === itemId)
+      if (item) {
+        item.quantity = quantity
+      }
+    },
+    clearCart() {
+      this.items = []
+    }
+  }
+})