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] #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;
           });
       }
     }