feat: Add catalog page idea

Reviewed-on: #25

src/components/AdminPurchase.vue

@@ -16,7 +16,7 @@
                 required
                 class="mr-4"
             ></v-autocomplete>
-            <v-btn color="primary" @click="openModal">Agregar Cliente</v-btn>
+            <!-- <v-btn color="primary" @click="openModal">Agregar Cliente</v-btn> -->
             <CreateCustomerModal ref="customerModal" @customerCreated="handleNewCustomer"/>
       </v-col>
       <v-col lg="4">

src/components/NavBar.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script>
- import trytonIcon from '/src/assets/icons/tryton-icon.svg';
+ import trytonIcon from '../assets/icons/tryton-icon.svg';
  export default {
      name: 'NavBar',
      data: () => ({
@@ -58,6 +58,7 @@
              { title: 'Compra adm', route: '/compra_admin', icon: 'mdi-cart'},
              { title: 'Actualizar Productos De Tryton', route: '/sincronizar_productos_tryton', icon: 'trytonIcon'},
              { title: 'Actualizar Clientes De Tryton', route: '/sincronizar_clientes_tryton', icon: 'trytonIcon'},
+             { title: 'Actualizar Ventas Tryton', route: '/sincronizar_ventas_tryton', icon: 'trytonIcon'}
          ],
      }),
      watch: {

src/components/Purchase.vue

@@ -16,7 +16,7 @@
                 required
                 class="mr-4"
             ></v-autocomplete>
-            <v-btn color="primary" @click="openModal">Agregar Cliente</v-btn>
+            <!--<v-btn color="primary" @click="openModal">Agregar Cliente</v-btn>-->
             <CreateCustomerModal ref="customerModal" @customerCreated="handleNewCustomer"/>
       </v-col>
       <v-col lg="4">

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>

src/pages/sincronizar_clientes_tryton.vue

@@ -1,4 +1,7 @@
 <template>
+  <div>
+    <CodeDialog @code-verified="(verified) => showComponent = verified"/>
+  </div>
   <v-container class="fill-height d-flex align-center justify-center">
     <v-card class="pa-6" max-width="600" elevation="4">
       <v-card-title class="text-h5 font-weight-bold text-center">
@@ -41,6 +44,7 @@
 </template>
 
 <script>
+  import CodeDialog from '../components/CodeDialog.vue'
   import { inject } from 'vue';
 
   export default {

src/pages/sincronizar_productos_tryton.vue

@@ -1,4 +1,7 @@
 <template>
+  <div>
+    <CodeDialog @code-verified="(verified) => showComponent = verified"/>
+  </div>
   <v-container class="fill-height d-flex align-center justify-center">
     <v-card class="pa-6" max-width="600" elevation="4">
       <v-card-title class="text-h5 font-weight-bold text-center">
@@ -36,6 +39,7 @@
 </template>
 
 <script>
+  import CodeDialog from '../components/CodeDialog.vue'
   import { inject } from 'vue';
 
   export default {
@@ -44,6 +48,7 @@
       return {
         api: inject('api'),
         productos_tryton: [{}],
+        showComponent: false,
       }
     },
     methods: {

src/pages/sincronizar_ventas_tryton.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <CodeDialog @code-verified="(verified) => showComponent = verified"/>
+  </div>
+  <v-container class="fill-height d-flex align-center justify-center">
+    <v-card class="pa-6" max-width="600" elevation="4">
+      <v-card-title class="text-h5 font-weight-bold text-center">
+        🔄 Sincronización de Ventas
+      </v-card-title>
+
+      <v-card-text>
+        <p>
+          Esta acción sincronizará las <strong>ventas</strong> desde el sistema
+          <strong>Tryton</strong> hacia la plataforma.
+        </p>
+        <v-alert type="warning" dense border="start" border-color="warning">
+          <strong>Advertencia:</strong> Este proceso podría tardar varios minutos
+          y reemplazar datos existentes en la plataforma.  
+          Asegúrese de que la información en Tryton esté actualizada antes de
+          continuar.
+        </v-alert>
+      </v-card-text>
+
+      <v-card-actions class="justify-center">
+        <v-btn color="primary" @click="startSync">
+          Iniciar Sincronización
+        </v-btn>
+        <v-btn text @click="$router.push('/')">
+          Cancelar
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+    <v-data-table :items="ventas_tryton_failed"></v-data-table>
+    <v-data-table :items="ventas_tryton_successful"></v-data-table>
+  </v-container>
+</template>
+<script>
+  import CodeDialog from '../components/CodeDialog.vue';
+  import { inject } from 'vue';
+
+  export default {
+    name: 'SalesToTryton',
+    data() {
+      return {
+        api: inject('api'),
+        ventas_tryton: [],
+        showComponent: false,
+      }
+    },
+    methods: {
+      startSync() {
+        this.api.sendSalesToTryton()
+          .then(response => {
+            this.ventas_tryton_failed = response.failed.map(id => ({ id }));
+            this.ventas_tryton_successful = response.successful.map(id => ({ id }));
+          })
+          .catch(error => {
+            console.error("Error al sincronizar las ventas", error);
+          });
+      }
+    }
+  }
+</script>

src/services/api.js

@@ -58,6 +58,10 @@ class Api {
   getCustomersFromTryton() {
     return this.apiImplementation.getCustomersFromTryton();
   }
+
+  sendSalesToTryton(){
+    return this.apiImplementation.sendSalesToTryton();
+  }
 }
 
 export default Api;

src/services/django-api.js

@@ -73,6 +73,11 @@ class DjangoApi {
     return this.postRequest(url, {});
   }
 
+  sendSalesToTryton(){
+    const url = this.base + '/don_confiao/api/enviar_ventas_a_tryton';
+    return this.postRequest(url, {});
+  }
+
   getRequest(url) {
     return new Promise ((resolve, reject) => {
       fetch(url)