#29 feat: improve customers sync UI with loading state and results

src/pages/sincronizar_clientes_tryton.vue

@@ -1,6 +1,8 @@
 <template>
-  <v-container v-if="authStore.isAdmin" class="fill-height d-flex align-center justify-center">
+  <v-container v-if="authStore.isAdmin" class="fill-height">
-    <v-card class="pa-6" max-width="600" elevation="4">
+    <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>
@@ -10,14 +12,14 @@
               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">
+            <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
+              Durante la sincronización, no se podrán modificar clientes en la
               plataforma para evitar conflictos.
             </p>
           </v-card-text>
@@ -31,12 +33,94 @@
             </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-data-table :items="checked_tryton_parties"></v-data-table>
+    <v-row v-else>
-    <v-data-table :items="created_customers"></v-data-table>
+      <v-col cols="12">
-    <v-data-table :items="failed_parties"></v-data-table>
+        <v-alert type="success" variant="tonal" class="mb-4">
-    <v-data-table :items="untouched_customers"></v-data-table>
+          <strong>Sincronización completada</strong>
+        </v-alert>
+      </v-col>
+
+      <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-col>
+    </v-row>
   </v-container>
 </template>
 
@@ -53,11 +137,8 @@
     data() {
       return {
         api: inject('api'),
-        checked_tryton_parties: [],
+        loading: false,
-        created_customers: [],
+        result: null,
-        failed_parties: [],
-        untouched_customers: [],
-        updated_customers: [],
       }
     },
     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.result = response;
-            this.created_customers = response.created_customers.map(id => ({ id }));
+            this.loading = false;
-            this.failed_parties = response.failed_parties.map(id => ({ id }));
-            this.untouched_customers = response.untouched_customers.map(id => ({ id }));
           })
           .catch(error => {
-            console.error("Error al sincronizar clientes:", error);
+            console.error('Error al sincronizar clientes:', error);
+            this.loading = false;
           });
       }
     }