don_confiao_frontend/src/pages/sincronizar_clientes_tryton.vue

<template>
  <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" 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>
      </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="formatResults(result.failed_parties)"
              density="compact"
              :headers="[
                { title: 'ID', key: 'id' },
                { title: 'Nombre', key: 'name' },
                { title: 'Detalle', key: 'detail' }
              ]"
            ></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="formatResults(result.created_customers)"
              density="compact"
              :headers="[
                { title: 'ID', key: 'id' },
                { title: 'Nombre', key: 'name' }
              ]"
            ></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="formatResults(result.updated_customers)"
              density="compact"
              :headers="[
                { title: 'ID', key: 'id' },
                { title: 'Nombre', key: 'name' },
                { title: 'Detalle', key: 'detail' }
              ]"
            ></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="formatResults(result.untouched_customers)"
              density="compact"
              :headers="[
                { title: 'ID', key: 'id' },
                { title: 'Nombre', key: 'name' }
              ]"
            ></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="formatResults(result.checked_tryton_parties)"
              density="compact"
              :headers="[
                { title: 'ID', key: 'id' },
                { title: 'Nombre', key: 'name' }
              ]"
            ></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>

<script>
  import { useAuthStore } from '@/stores/auth';
  import { inject } from 'vue';

  export default {
    name: 'CustomersFromTryton',
    setup() {
      const authStore = useAuthStore();
      return { authStore };
    },
    data() {
      return {
        api: inject('api'),
        loading: false,
        result: null,
      }
    },
    methods: {
      formatResults(items) {
        if (!items || items.length === 0) return [];
        return items.map(item =>
          typeof item === 'object'
            ? { id: item.id ?? item.external_id, name: item.name ?? '', detail: item.error ?? item.detail ?? '' }
            : { id: item, name: '', detail: '' }
        );
      },
      startSync() {
        this.loading = true;
        this.api.getCustomersFromTryton()
          .then(response => {
            this.result = response;
            this.loading = false;
          })
          .catch(error => {
            console.error('Error al sincronizar clientes:', error);
            this.loading = false;
          });
      }
    }
  }
</script>