From 9e78646d20422aa88a658ec6099ebb87ad1ecb9c Mon Sep 17 00:00:00 2001
From: aserrador <alejandro.ayala@onecluster.org>
Date: Sat, 21 Feb 2026 17:10:30 -0500
Subject: [PATCH] feat: Add catalog page idea

---
 src/pages/catalog.vue | 130 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 130 insertions(+)
 create mode 100644 src/pages/catalog.vue

diff --git a/src/pages/catalog.vue b/src/pages/catalog.vue
new file mode 100644
index 0000000..a7ad18f
--- /dev/null
+++ b/src/pages/catalog.vue
@@ -0,0 +1,130 @@
+<template>
+  <v-container>
+    <v-card>
+      <v-card-title>
+        <span class="headline">Catálogo</span>
+      </v-card-title>
+      <v-card-text>
+        <v-list two-line>
+          <v-list-item v-for="item in items" :key="item.id" class="catalog-item">
+            <v-row no-gutters align="center" class="w-100">
+              <v-col cols="12" md="3" class="d-flex">
+                <v-img :src="item.img" class="product-img" contain></v-img>
+              </v-col>
+
+              <v-col cols="12" md="6">
+                <v-list-item-title class="title">{{ item.name }}</v-list-item-title>
+                <v-list-item-subtitle class="subtitle">{{ item.description }}</v-list-item-subtitle>
+                <div class="prices mt-2">
+                  <div class="price-line">Precio unitario: <strong>{{ currency(item.price) }}</strong></div>
+                  <div class="price-line">Precio total: <strong>{{ currency(item.price * item.quantity) }}</strong></div>
+                </div>
+              </v-col>
+
+              <v-col cols="12" md="3" class="d-flex align-center justify-end">
+                <div class="quantity-controls">
+                  <v-btn small text class="qty-btn" @click="decrease(item)"><v-icon small>mdi-minus</v-icon></v-btn>
+                  <v-text-field
+                    v-model.number="item.quantity"
+                    type="number"
+                    min="0"
+                    class="quantity-input"
+                    dense
+                    outlined
+                    hide-details
+                    aria-label="Cantidad"
+                  />
+                  <v-btn small text class="qty-btn" @click="increase(item)"><v-icon small>mdi-plus</v-icon></v-btn>
+                </div>
+              </v-col>
+            </v-row>
+          </v-list-item>
+        </v-list>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn color="primary">Ver más</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      items: [
+        { id: 1, name: 'Producto 1', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 2', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 3', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 4', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 5', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 6', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 7', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 8', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 9', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 10', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 11', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 12', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 13', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 14', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 15', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 16', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+      ],
+    };
+  },
+  methods: {
+    increase(item) {
+      item.quantity = Number(item.quantity) + 1;
+    },
+    decrease(item) {
+      item.quantity = Math.max(0, Number(item.quantity) - 1);
+    },
+    currency(val) {
+      if (val == null) return '-';
+      return new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP', minimumFractionDigits: 0 }).format(val);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.headline {
+  font-weight: bold;
+}
+.catalog-item {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.product-img {
+  width: 150px;
+  height: 100px;
+  border-radius: 6px;
+  object-fit: cover;
+}
+.quantity-controls {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.prices .price-line {
+  margin-bottom: 4px;
+}
+.quantity-input {
+  max-width: 90px;
+}
+.quantity-input input {
+  text-align: center;
+}
+.qty-btn {
+  min-width: 36px !important;
+  height: 36px !important;
+  border-radius: 18px !important;
+}
+@media (max-width: 600px) {
+  .product-img {
+    width: 120px;
+    height: 80px;
+  }
+}
+</style>
\ No newline at end of file