feat: separar ventas de catálogo en tabs por estado de sincronización

- Agregar sistema de tabs: 'Sin Sincronizar' y 'Sincronizadas'
- Crear computeds pendingSales y syncedSales basados en external_id
- Implementar headers diferentes para cada tab con columna 'Estado'
- Agregar columna 'ID Tryton' (external_id) en tab de sincronizadas
- Refactorizar filtros comunes aplicables a ambas vistas
- Mover botón 'Sincronizar a Tryton' solo a tab Sin Sincronizar
- Agregar badges de estado: naranja 'Pendiente' y verde 'Sincronizada'
- Mostrar contadores en tiempo real en cada tab y en header
- Tab 'Sin Sincronizar' activo por defecto
- Deshabilitar botón de sincronización cuando no hay ventas pendientes

src/components/CatalogSalesManagement.vue

@@ -1,22 +1,42 @@
 <template>
   <v-container fluid>
-    <!-- Header -->
+    <!-- Header Principal -->
-    <v-row align="center">
+    <v-row align="center" class="mb-4">
-      <v-col cols="12" md="6">
+      <v-col cols="12">
         <h1 class="text-h4">Ventas por Catálogo</h1>
+        <div class="text-caption text-grey mt-1">
+          {{ totalPending }} sin sincronizar • {{ totalSynced }} sincronizadas
+        </div>
       </v-col>
-      <v-col cols="12" md="6" class="text-md-right">
+    </v-row>
+
+    <!-- Tabs -->
+    <v-tabs v-model="activeTab" class="mb-4" color="primary">
+      <v-tab value="pending">
+        Sin Sincronizar
+        <v-chip class="ml-2" size="small" color="orange" variant="flat">{{ totalPending }}</v-chip>
+      </v-tab>
+      <v-tab value="synced">
+        Sincronizadas
+        <v-chip class="ml-2" size="small" color="success" variant="flat">{{ totalSynced }}</v-chip>
+      </v-tab>
+    </v-tabs>
+
+    <!-- Window para contenido de tabs -->
+    <v-window v-model="activeTab">
+      <!-- Tab: Sin Sincronizar -->
+      <v-window-item value="pending">
+        <!-- Botón Sincronizar -->
+        <v-row align="center" class="mb-4">
+          <v-col>
             <v-btn
               color="primary"
               prepend-icon="mdi-sync"
               @click="$router.push('/sincronizar_catalog_sales_tryton')"
-          class="mr-2"
+              :disabled="totalPending === 0"
             >
               Sincronizar a Tryton
             </v-btn>
-        <v-chip color="primary" variant="flat">
-          {{ catalogSales.length }} venta(s)
-        </v-chip>
           </v-col>
         </v-row>
 
@@ -68,14 +88,14 @@
           </v-col>
         </v-row>
 
-    <!-- Tabla -->
+        <!-- Tabla de ventas sin sincronizar -->
         <v-row>
           <v-col cols="12">
             <v-card>
               <v-data-table
-            v-model:expanded="expanded"
+                v-model:expanded="expandedPending"
-            :headers="headers"
+                :headers="pendingHeaders"
-            :items="filteredSales"
+                :items="filteredPendingSales"
                 :loading="loading"
                 density="compact"
                 item-value="id"
@@ -101,6 +121,14 @@
                   </v-chip>
                 </template>
 
+                <!-- Estado -->
+                <template #item.status="{ item }">
+                  <v-chip size="small" color="orange" variant="flat">
+                    <v-icon start size="small">mdi-clock-outline</v-icon>
+                    Pendiente
+                  </v-chip>
+                </template>
+
                 <!-- Fila expandida: detalle de productos -->
                 <template #expanded-row="{ columns, item }">
                   <tr>
@@ -165,13 +193,186 @@
                 <!-- No data -->
                 <template #no-data>
                   <v-alert type="info" variant="tonal" class="my-4">
-                No hay ventas por catálogo para mostrar
+                    No hay ventas pendientes de sincronizar
                   </v-alert>
                 </template>
               </v-data-table>
             </v-card>
           </v-col>
         </v-row>
+      </v-window-item>
+
+      <!-- Tab: Sincronizadas -->
+      <v-window-item value="synced">
+        <!-- Filtros -->
+        <v-row class="mt-4">
+          <v-col cols="12" md="4">
+            <v-text-field
+              v-model="searchQuery"
+              label="Buscar por ID o cliente"
+              prepend-inner-icon="mdi-magnify"
+              clearable
+              density="compact"
+              variant="outlined"
+              hide-details
+            ></v-text-field>
+          </v-col>
+          <v-col cols="6" md="3">
+            <v-text-field
+              v-model="dateFrom"
+              label="Fecha desde"
+              type="date"
+              density="compact"
+              variant="outlined"
+              hide-details
+              clearable
+            ></v-text-field>
+          </v-col>
+          <v-col cols="6" md="3">
+            <v-text-field
+              v-model="dateTo"
+              label="Fecha hasta"
+              type="date"
+              density="compact"
+              variant="outlined"
+              hide-details
+              clearable
+            ></v-text-field>
+          </v-col>
+          <v-col cols="12" md="2" class="d-flex align-center">
+            <v-btn
+              @click="clearFilters"
+              variant="text"
+              color="grey"
+              size="small"
+              prepend-icon="mdi-filter-remove"
+            >
+              Limpiar filtros
+            </v-btn>
+          </v-col>
+        </v-row>
+
+        <!-- Tabla de ventas sincronizadas -->
+        <v-row>
+          <v-col cols="12">
+            <v-card>
+              <v-data-table
+                v-model:expanded="expandedSynced"
+                :headers="syncedHeaders"
+                :items="filteredSyncedSales"
+                :loading="loading"
+                density="compact"
+                item-value="id"
+                items-per-page="25"
+                :items-per-page-options="[10, 25, 50, 100]"
+                show-expand
+              >
+                <!-- Fecha formateada -->
+                <template #item.date="{ item }">
+                  {{ formatDate(item.date) }}
+                </template>
+
+                <!-- Total formateado -->
+                <template #item.total="{ item }">
+                  ${{ Number(item.total).toLocaleString('es-CO') }}
+                </template>
+
+                <!-- Cliente -->
+                <template #item.customer="{ item }">
+                  <span v-if="item.customer_name">{{ item.customer_name }}</span>
+                  <v-chip v-else size="small" color="grey" variant="flat">
+                    ID: {{ item.customer }}
+                  </v-chip>
+                </template>
+
+                <!-- Estado -->
+                <template #item.status="{ item }">
+                  <v-chip size="small" color="success" variant="flat">
+                    <v-icon start size="small">mdi-check-circle</v-icon>
+                    Sincronizada
+                  </v-chip>
+                </template>
+
+                <!-- ID Tryton -->
+                <template #item.external_id="{ item }">
+                  <v-chip size="small" variant="outlined" color="primary">
+                    {{ item.external_id }}
+                  </v-chip>
+                </template>
+
+                <!-- Fila expandida: detalle de productos -->
+                <template #expanded-row="{ columns, item }">
+                  <tr>
+                    <td :colspan="columns.length" class="pa-4 bg-grey-lighten-4">
+                      <v-row>
+                        <v-col cols="12" md="6">
+                          <strong>Datos de envío</strong>
+                          <v-list density="compact">
+                            <v-list-item v-if="item.customer_name">
+                              <template #prepend><v-icon>mdi-account</v-icon></template>
+                              <v-list-item-title>{{ item.customer_name }}</v-list-item-title>
+                            </v-list-item>
+                            <v-list-item v-if="item.customer_address">
+                              <template #prepend><v-icon>mdi-map-marker</v-icon></template>
+                              <v-list-item-title>{{ item.customer_address }}</v-list-item-title>
+                            </v-list-item>
+                            <v-list-item v-if="item.customer_phone">
+                              <template #prepend><v-icon>mdi-phone</v-icon></template>
+                              <v-list-item-title>{{ item.customer_phone }}</v-list-item-title>
+                            </v-list-item>
+                            <v-list-item v-if="item.pickup_method">
+                              <template #prepend><v-icon>mdi-truck</v-icon></template>
+                              <v-list-item-title>
+                                {{ item.pickup_method === 'DELIVERY' ? 'Domicilio' : 'Recoge en tienda' }}
+                              </v-list-item-title>
+                            </v-list-item>
+                          </v-list>
+                        </v-col>
+                        <v-col cols="12" md="6">
+                          <strong>Productos</strong>
+                          <v-table density="compact">
+                            <thead>
+                              <tr>
+                                <th class="text-left">Producto ID</th>
+                                <th class="text-right">Precio</th>
+                                <th class="text-right">Cantidad</th>
+                                <th class="text-right">Subtotal</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr v-for="line in item.catalogsaleline_set" :key="line.id">
+                                <td>{{ line.product }}</td>
+                                <td class="text-right">${{ Number(line.unit_price).toLocaleString('es-CO') }}</td>
+                                <td class="text-right">{{ line.quantity }}</td>
+                                <td class="text-right">
+                                  ${{ (Number(line.unit_price) * Number(line.quantity)).toLocaleString('es-CO') }}
+                                </td>
+                              </tr>
+                            </tbody>
+                          </v-table>
+                        </v-col>
+                      </v-row>
+                    </td>
+                  </tr>
+                </template>
+
+                <!-- Loading -->
+                <template #loading>
+                  <v-skeleton-loader type="table-row@10"></v-skeleton-loader>
+                </template>
+
+                <!-- No data -->
+                <template #no-data>
+                  <v-alert type="info" variant="tonal" class="my-4">
+                    No hay ventas sincronizadas
+                  </v-alert>
+                </template>
+              </v-data-table>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-window-item>
+    </v-window>
 
     <!-- Snackbar -->
     <v-snackbar
@@ -194,22 +395,52 @@ import { ref, computed, inject, onMounted } from 'vue';
 const api = inject('api');
 const catalogSales = ref([]);
 const loading = ref(false);
-const expanded = ref([]);
+const expandedPending = ref([]);
+const expandedSynced = ref([]);
 const searchQuery = ref('');
 const dateFrom = ref('');
 const dateTo = ref('');
 const snackbar = ref({ show: false, message: '', color: 'success' });
+const activeTab = ref('pending'); // Tab activo por defecto
 
-const headers = [
+// Headers para tabla de ventas sin sincronizar
+const pendingHeaders = [
   { title: 'ID', key: 'id', sortable: true },
   { title: 'Fecha', key: 'date', sortable: true },
   { title: 'Cliente', key: 'customer_name', sortable: true },
   { title: 'Total', key: 'total', sortable: true },
+  { title: 'Estado', key: 'status', sortable: false },
   { title: '', key: 'data-table-expand' },
 ];
 
-const filteredSales = computed(() => {
+// Headers para tabla de ventas sincronizadas
-  let result = catalogSales.value;
+const syncedHeaders = [
+  { title: 'ID', key: 'id', sortable: true },
+  { title: 'Fecha', key: 'date', sortable: true },
+  { title: 'Cliente', key: 'customer_name', sortable: true },
+  { title: 'Total', key: 'total', sortable: true },
+  { title: 'Estado', key: 'status', sortable: false },
+  { title: 'ID Tryton', key: 'external_id', sortable: true },
+  { title: '', key: 'data-table-expand' },
+];
+
+// Ventas sin sincronizar (sin external_id)
+const pendingSales = computed(() => {
+  return catalogSales.value.filter(sale => !sale.external_id);
+});
+
+// Ventas sincronizadas (con external_id)
+const syncedSales = computed(() => {
+  return catalogSales.value.filter(sale => sale.external_id);
+});
+
+// Contadores
+const totalPending = computed(() => pendingSales.value.length);
+const totalSynced = computed(() => syncedSales.value.length);
+
+// Función común para aplicar filtros
+function applyFilters(sales) {
+  let result = sales;
 
   // Filtro por texto (ID o nombre de cliente)
   if (searchQuery.value) {
@@ -235,6 +466,16 @@ const filteredSales = computed(() => {
   }
 
   return result;
+}
+
+// Ventas pendientes filtradas
+const filteredPendingSales = computed(() => {
+  return applyFilters(pendingSales.value);
+});
+
+// Ventas sincronizadas filtradas
+const filteredSyncedSales = computed(() => {
+  return applyFilters(syncedSales.value);
 });
 
 async function loadCatalogSales() {