From 59122c04d3e7eea82db4b38a9228a01e12bd0b0e Mon Sep 17 00:00:00 2001
From: mono <mono@desarrollo-mono.localhost>
Date: Sat, 14 Mar 2026 23:16:22 -0500
Subject: [PATCH 1/3] #29 feat: improve products sync UI with loading state and
 results

---
 src/pages/sincronizar_productos_tryton.vue | 152 ++++++++++++++++-----
 1 file changed, 121 insertions(+), 31 deletions(-)

diff --git a/src/pages/sincronizar_productos_tryton.vue b/src/pages/sincronizar_productos_tryton.vue
index fcd74b0..d091ee5 100644
--- a/src/pages/sincronizar_productos_tryton.vue
+++ b/src/pages/sincronizar_productos_tryton.vue
@@ -1,37 +1,113 @@
 <template>
-  <v-container v-if="authStore.isAdmin" 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 Productos
-      </v-card-title>
+  <v-container v-if="authStore.isAdmin" class="fill-height">
+    <v-row v-if="!result && !loading" justify="center">
+      <v-col cols="12" md="8">
+        <v-card class="pa-6" elevation="4">
+          <v-card-title class="text-h5 font-weight-bold text-center">
+            🔄 Sincronización de Productos
+          </v-card-title>
 
-      <v-card-text>
-        <p>
-          Esta acción sincronizará los <strong>productos</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-card-text>
+            <p>
+              Esta acción sincronizará los <strong>productos</strong> desde el sistema
+              <strong>Tryton</strong> hacia la plataforma.
+            </p>
+            <v-alert type="warning" dense border="start" border-color="warning" class="mt-4">
+              <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>
+            <p class="mt-4">
+              Durante la sincronización, no se podrán modificar productos en la
+              plataforma para evitar conflictos.
+            </p>
+          </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-col>
+    </v-row>
+
+    <v-row v-else-if="loading" justify="center" align="center">
+      <v-col cols="12" class="text-center">
+        <v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
+        <p class="mt-4 text-h6">Sincronizando productos...</p>
+      </v-col>
+    </v-row>
+
+    <v-row v-else>
+      <v-col cols="12">
+        <v-alert type="success" variant="tonal" class="mb-4">
+          <strong>Sincronización completada</strong>
         </v-alert>
-        <p class="mt-4">
-          Durante la sincronización, no se podrán modificar productos en la
-          plataforma para evitar conflictos.
-        </p>
-      </v-card-text>
+      </v-col>
 
-      <v-card-actions class="justify-center">
-        <v-btn color="primary" @click="startSync">
-          Iniciar Sincronización
+      <v-col cols="12" md="6">
+        <v-card elevation="2">
+          <v-card-title class="bg-error text-white">❌ Fallidos ({{ result.failed_products?.length || 0 }})</v-card-title>
+          <v-card-text>
+            <v-data-table
+              :items="formatItems(result.failed_products)"
+              density="compact"
+              :headers="[{ title: 'ID', key: 'id' }]"
+            ></v-data-table>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-card elevation="2">
+          <v-card-title class="bg-success text-white">✅ Creados ({{ result.created_products?.length || 0 }})</v-card-title>
+          <v-card-text>
+            <v-data-table
+              :items="formatItems(result.created_products)"
+              density="compact"
+              :headers="[{ title: 'ID', key: 'id' }]"
+            ></v-data-table>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-card elevation="2">
+          <v-card-title class="bg-info text-white">🔄 Actualizados ({{ result.updated_products?.length || 0 }})</v-card-title>
+          <v-card-text>
+            <v-data-table
+              :items="formatItems(result.updated_products)"
+              density="compact"
+              :headers="[{ title: 'ID', key: 'id' }]"
+            ></v-data-table>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-card elevation="2">
+          <v-card-title class="bg-grey-lighten-1">⏭️ Sin cambios ({{ result.untouched_products?.length || 0 }})</v-card-title>
+          <v-card-text>
+            <v-data-table
+              :items="formatItems(result.untouched_products)"
+              density="compact"
+              :headers="[{ title: 'ID', key: 'id' }]"
+            ></v-data-table>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" class="text-center mt-4">
+        <v-btn color="primary" @click="$router.push('/')">
+          Volver al inicio
         </v-btn>
-        <v-btn text @click="$router.push('/')">
-          Cancelar
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-    <v-data-table :items="productos_tryton"></v-data-table>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
@@ -48,7 +124,8 @@
     data() {
       return {
         api: inject('api'),
-        productos_tryton: [{}],
+        loading: false,
+        result: null,
       }
     },
     mounted() {
@@ -57,8 +134,21 @@
       }
     },
     methods: {
+      formatItems(ids) {
+        if (!ids || ids.length === 0) return [];
+        return ids.map(id => ({ id }));
+      },
       startSync() {
-        this.productos_tryton = this.api.getProductsFromTryton()
+        this.loading = true;
+        this.api.getProductsFromTryton()
+          .then(response => {
+            this.result = response;
+            this.loading = false;
+          })
+          .catch(error => {
+            console.error('Error al sincronizar productos:', error);
+            this.loading = false;
+          });
       }
     }
   }
-- 
2.49.1


From 794e885b9d86910e6b9256aa3cb1c0fd11b8441c Mon Sep 17 00:00:00 2001
From: mono <mono@desarrollo-mono.localhost>
Date: Sat, 14 Mar 2026 23:19:14 -0500
Subject: [PATCH 2/3] #29 feat: improve sales sync UI with loading state and
 results

---
 src/pages/sincronizar_ventas_tryton.vue | 117 ++++++++++++++++++------
 1 file changed, 87 insertions(+), 30 deletions(-)

diff --git a/src/pages/sincronizar_ventas_tryton.vue b/src/pages/sincronizar_ventas_tryton.vue
index 35fc356..232c291 100644
--- a/src/pages/sincronizar_ventas_tryton.vue
+++ b/src/pages/sincronizar_ventas_tryton.vue
@@ -1,36 +1,86 @@
 <template>
-  <v-container v-if="authStore.isAdmin" 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-container v-if="authStore.isAdmin" class="fill-height">
+    <v-row v-if="!result && !loading" justify="center">
+      <v-col cols="12" md="8">
+        <v-card class="pa-6" 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-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" class="mt-4">
+              <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-col>
+    </v-row>
+
+    <v-row v-else-if="loading" justify="center" align="center">
+      <v-col cols="12" class="text-center">
+        <v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
+        <p class="mt-4 text-h6">Sincronizando ventas...</p>
+      </v-col>
+    </v-row>
+
+    <v-row v-else>
+      <v-col cols="12">
+        <v-alert type="success" variant="tonal" class="mb-4">
+          <strong>Sincronización completada</strong>
         </v-alert>
-      </v-card-text>
+      </v-col>
 
-      <v-card-actions class="justify-center">
-        <v-btn color="primary" @click="startSync">
-          Iniciar Sincronización
+      <v-col cols="12" md="6">
+        <v-card elevation="2">
+          <v-card-title class="bg-error text-white">❌ Fallidos ({{ result.failed?.length || 0 }})</v-card-title>
+          <v-card-text>
+            <v-data-table
+              :items="formatItems(result.failed)"
+              density="compact"
+              :headers="[{ title: 'ID', key: 'id' }]"
+            ></v-data-table>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-card elevation="2">
+          <v-card-title class="bg-success text-white">✅ Exitosos ({{ result.successful?.length || 0 }})</v-card-title>
+          <v-card-text>
+            <v-data-table
+              :items="formatItems(result.successful)"
+              density="compact"
+              :headers="[{ title: 'ID', key: 'id' }]"
+            ></v-data-table>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" class="text-center mt-4">
+        <v-btn color="primary" @click="$router.push('/')">
+          Volver al inicio
         </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-col>
+    </v-row>
   </v-container>
 </template>
+
 <script>
   import { useAuthStore } from '@/stores/auth';
   import { inject } from 'vue';
@@ -44,7 +94,8 @@
     data() {
       return {
         api: inject('api'),
-        ventas_tryton: [],
+        loading: false,
+        result: null,
       }
     },
     mounted() {
@@ -53,14 +104,20 @@
       }
     },
     methods: {
+      formatItems(ids) {
+        if (!ids || ids.length === 0) return [];
+        return ids.map(id => ({ id }));
+      },
       startSync() {
+        this.loading = true;
         this.api.sendSalesToTryton()
           .then(response => {
-            this.ventas_tryton_failed = response.failed.map(id => ({ id }));
-            this.ventas_tryton_successful = response.successful.map(id => ({ id }));
+            this.result = response;
+            this.loading = false;
           })
           .catch(error => {
-            console.error("Error al sincronizar las ventas", error);
+            console.error('Error al sincronizar ventas:', error);
+            this.loading = false;
           });
       }
     }
-- 
2.49.1


From 4cbe18708e2df4aa0a47c7dda6552e7d6ad9c5f3 Mon Sep 17 00:00:00 2001
From: mono <mono@desarrollo-mono.localhost>
Date: Sat, 14 Mar 2026 23:22:32 -0500
Subject: [PATCH 3/3] #29 feat: improve customers sync UI with loading state
 and results

---
 src/pages/sincronizar_clientes_tryton.vue | 173 ++++++++++++++++------
 1 file changed, 129 insertions(+), 44 deletions(-)

diff --git a/src/pages/sincronizar_clientes_tryton.vue b/src/pages/sincronizar_clientes_tryton.vue
index 625c874..6fee0e3 100644
--- a/src/pages/sincronizar_clientes_tryton.vue
+++ b/src/pages/sincronizar_clientes_tryton.vue
@@ -1,42 +1,126 @@
 <template>
-  <v-container v-if="authStore.isAdmin" 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 Clientes
-      </v-card-title>
+  <v-container v-if="authStore.isAdmin" class="fill-height">
+    <v-row v-if="!result && !loading" justify="center">
+      <v-col cols="12" md="8">
+        <v-card class="pa-6" elevation="4">
+          <v-card-title class="text-h5 font-weight-bold text-center">
+            🔄 Sincronización de Clientes
+          </v-card-title>
 
-      <v-card-text>
-        <p>
-          Esta acción sincronizará los <strong>clientes</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-card-text>
+            <p>
+              Esta acción sincronizará los <strong>clientes</strong> desde el sistema
+              <strong>Tryton</strong> hacia la plataforma.
+            </p>
+            <v-alert type="warning" dense border="start" border-color="warning" class="mt-4">
+              <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>
+            <p class="mt-4">
+              Durante la sincronización, no se podrán modificar clientes en la
+              plataforma para evitar conflictos.
+            </p>
+          </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-col>
+    </v-row>
+
+    <v-row v-else-if="loading" justify="center" align="center">
+      <v-col cols="12" class="text-center">
+        <v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
+        <p class="mt-4 text-h6">Sincronizando clientes...</p>
+      </v-col>
+    </v-row>
+
+    <v-row v-else>
+      <v-col cols="12">
+        <v-alert type="success" variant="tonal" class="mb-4">
+          <strong>Sincronización completada</strong>
         </v-alert>
-        <p class="mt-4">
-          Durante la sincronización, no se podrán modificar productos en la
-          plataforma para evitar conflictos.
-        </p>
-      </v-card-text>
+      </v-col>
 
-      <v-card-actions class="justify-center">
-        <v-btn color="primary" @click="startSync">
-          Iniciar Sincronización
+      <v-col cols="12" md="6">
+        <v-card elevation="2">
+          <v-card-title class="bg-error text-white">❌ Fallidos ({{ result.failed_parties?.length || 0 }})</v-card-title>
+          <v-card-text>
+            <v-data-table
+              :items="formatItems(result.failed_parties)"
+              density="compact"
+              :headers="[{ title: 'ID', key: 'id' }]"
+            ></v-data-table>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-card elevation="2">
+          <v-card-title class="bg-success text-white">✅ Creados ({{ result.created_customers?.length || 0 }})</v-card-title>
+          <v-card-text>
+            <v-data-table
+              :items="formatItems(result.created_customers)"
+              density="compact"
+              :headers="[{ title: 'ID', key: 'id' }]"
+            ></v-data-table>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-card elevation="2">
+          <v-card-title class="bg-warning">🔄 Actualizados ({{ result.updated_customers?.length || 0 }})</v-card-title>
+          <v-card-text>
+            <v-data-table
+              :items="formatItems(result.updated_customers)"
+              density="compact"
+              :headers="[{ title: 'ID', key: 'id' }]"
+            ></v-data-table>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-card elevation="2">
+          <v-card-title class="bg-grey-lighten-1">⏭️ Sin cambios ({{ result.untouched_customers?.length || 0 }})</v-card-title>
+          <v-card-text>
+            <v-data-table
+              :items="formatItems(result.untouched_customers)"
+              density="compact"
+              :headers="[{ title: 'ID', key: 'id' }]"
+            ></v-data-table>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-card elevation="2">
+          <v-card-title class="bg-info text-white">🔍 Verificados ({{ result.checked_tryton_parties?.length || 0 }})</v-card-title>
+          <v-card-text>
+            <v-data-table
+              :items="formatItems(result.checked_tryton_parties)"
+              density="compact"
+              :headers="[{ title: 'ID', key: 'id' }]"
+            ></v-data-table>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" class="text-center mt-4">
+        <v-btn color="primary" @click="$router.push('/')">
+          Volver al inicio
         </v-btn>
-        <v-btn text @click="$router.push('/')">
-          Cancelar
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-
-
-    <v-data-table :items="checked_tryton_parties"></v-data-table>
-    <v-data-table :items="created_customers"></v-data-table>
-    <v-data-table :items="failed_parties"></v-data-table>
-    <v-data-table :items="untouched_customers"></v-data-table>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
@@ -53,11 +137,8 @@
     data() {
       return {
         api: inject('api'),
-        checked_tryton_parties: [],
-        created_customers: [],
-        failed_parties: [],
-        untouched_customers: [],
-        updated_customers: [],
+        loading: false,
+        result: null,
       }
     },
     mounted() {
@@ -66,16 +147,20 @@
       }
     },
     methods: {
+      formatItems(ids) {
+        if (!ids || ids.length === 0) return [];
+        return ids.map(id => ({ id }));
+      },
       startSync() {
+        this.loading = true;
         this.api.getCustomersFromTryton()
           .then(response => {
-            this.checked_tryton_parties = response.checked_tryton_parties.map(id => ({ id }));
-            this.created_customers = response.created_customers.map(id => ({ id }));
-            this.failed_parties = response.failed_parties.map(id => ({ id }));
-            this.untouched_customers = response.untouched_customers.map(id => ({ id }));
+            this.result = response;
+            this.loading = false;
           })
           .catch(error => {
-            console.error("Error al sincronizar clientes:", error);
+            console.error('Error al sincronizar clientes:', error);
+            this.loading = false;
           });
       }
     }
-- 
2.49.1