From ee690e95c97fcd64198700ba4c013e376d4fbf34 Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Sat, 20 Dec 2025 22:34:55 +0100
Subject: [PATCH] fix: Letzshop page improvements - products, jobs, and tabs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. Products tab now shows Letzshop marketplace products instead of vendor products
   - Uses /admin/products endpoint with marketplace=Letzshop filter
   - Fixed field names (image_link, price_numeric, sku vs vendor_sku)
   - Search now works with title, GTIN, SKU, brand

2. Jobs section moved to a separate tab
   - New "Jobs" tab between Exceptions and Settings
   - Tab watcher reloads data when switching tabs
   - Updated filter dropdown (removed export, added historical_import)

3. Product stats endpoint now accepts marketplace and vendor_name filters

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/api/v1/admin/products.py                  |  6 +-
 app/services/marketplace_product_service.py   | 63 +++++++++++++------
 app/templates/admin/marketplace-letzshop.html | 13 ++--
 .../admin/partials/letzshop-jobs-table.html   | 10 +--
 .../admin/partials/letzshop-products-tab.html | 22 +++----
 static/admin/js/marketplace-letzshop.js       | 43 ++++++++-----
 6 files changed, 102 insertions(+), 55 deletions(-)

diff --git a/app/api/v1/admin/products.py b/app/api/v1/admin/products.py
index 0d64d4e1..6f54b14d 100644
--- a/app/api/v1/admin/products.py
+++ b/app/api/v1/admin/products.py
@@ -190,11 +190,15 @@ def get_products(
 
 @router.get("/stats", response_model=AdminProductStats)
 def get_product_stats(
+    marketplace: str | None = Query(None, description="Filter by marketplace"),
+    vendor_name: str | None = Query(None, description="Filter by vendor name"),
     db: Session = Depends(get_db),
     current_admin: User = Depends(get_current_admin_api),
 ):
     """Get product statistics for admin dashboard."""
-    stats = marketplace_product_service.get_admin_product_stats(db)
+    stats = marketplace_product_service.get_admin_product_stats(
+        db, marketplace=marketplace, vendor_name=vendor_name
+    )
     return AdminProductStats(**stats)
 
 
diff --git a/app/services/marketplace_product_service.py b/app/services/marketplace_product_service.py
index bf555e3c..7cc85fad 100644
--- a/app/services/marketplace_product_service.py
+++ b/app/services/marketplace_product_service.py
@@ -681,36 +681,59 @@ class MarketplaceProductService:
 
         return result, total
 
-    def get_admin_product_stats(self, db: Session) -> dict:
-        """Get product statistics for admin dashboard."""
+    def get_admin_product_stats(
+        self,
+        db: Session,
+        marketplace: str | None = None,
+        vendor_name: str | None = None,
+    ) -> dict:
+        """Get product statistics for admin dashboard.
+
+        Args:
+            db: Database session
+            marketplace: Optional filter by marketplace (e.g., 'Letzshop')
+            vendor_name: Optional filter by vendor name
+        """
         from sqlalchemy import func
 
-        total = db.query(func.count(MarketplaceProduct.id)).scalar() or 0
+        # Build base filter
+        base_filters = []
+        if marketplace:
+            base_filters.append(MarketplaceProduct.marketplace == marketplace)
+        if vendor_name:
+            base_filters.append(MarketplaceProduct.vendor_name == vendor_name)
 
-        active = (
-            db.query(func.count(MarketplaceProduct.id))
-            .filter(MarketplaceProduct.is_active == True)  # noqa: E712
-            .scalar()
-            or 0
+        base_query = db.query(func.count(MarketplaceProduct.id))
+        if base_filters:
+            base_query = base_query.filter(*base_filters)
+
+        total = base_query.scalar() or 0
+
+        active_query = db.query(func.count(MarketplaceProduct.id)).filter(
+            MarketplaceProduct.is_active == True  # noqa: E712
         )
+        if base_filters:
+            active_query = active_query.filter(*base_filters)
+        active = active_query.scalar() or 0
         inactive = total - active
 
-        digital = (
-            db.query(func.count(MarketplaceProduct.id))
-            .filter(MarketplaceProduct.is_digital == True)  # noqa: E712
-            .scalar()
-            or 0
+        digital_query = db.query(func.count(MarketplaceProduct.id)).filter(
+            MarketplaceProduct.is_digital == True  # noqa: E712
         )
+        if base_filters:
+            digital_query = digital_query.filter(*base_filters)
+        digital = digital_query.scalar() or 0
         physical = total - digital
 
-        marketplace_counts = (
-            db.query(
-                MarketplaceProduct.marketplace,
-                func.count(MarketplaceProduct.id),
-            )
-            .group_by(MarketplaceProduct.marketplace)
-            .all()
+        marketplace_query = db.query(
+            MarketplaceProduct.marketplace,
+            func.count(MarketplaceProduct.id),
         )
+        if base_filters:
+            marketplace_query = marketplace_query.filter(*base_filters)
+        marketplace_counts = marketplace_query.group_by(
+            MarketplaceProduct.marketplace
+        ).all()
         by_marketplace = {mp or "unknown": count for mp, count in marketplace_counts}
 
         return {
diff --git a/app/templates/admin/marketplace-letzshop.html b/app/templates/admin/marketplace-letzshop.html
index c3c2b7b7..37daeffb 100644
--- a/app/templates/admin/marketplace-letzshop.html
+++ b/app/templates/admin/marketplace-letzshop.html
@@ -127,6 +127,9 @@
         </template>
         {{ tab_button('orders', 'Orders', tab_var='activeTab', icon='shopping-cart', count_var='orderStats.pending') }}
         {{ tab_button('exceptions', 'Exceptions', tab_var='activeTab', icon='exclamation-circle', count_var='exceptionStats.pending') }}
+        <template x-if="selectedVendor">
+            <span>{{ tab_button('jobs', 'Jobs', tab_var='activeTab', icon='collection') }}</span>
+        </template>
         <template x-if="selectedVendor">
             <span>{{ tab_button('settings', 'Settings', tab_var='activeTab', icon='cog') }}</span>
         </template>
@@ -156,10 +159,12 @@
         {% include 'admin/partials/letzshop-exceptions-tab.html' %}
     {{ endtab_panel() }}
 
-    <!-- Unified Jobs Table (below all tabs) - Vendor only -->
-    <div x-show="selectedVendor" class="mt-8">
-        {% include 'admin/partials/letzshop-jobs-table.html' %}
-    </div>
+    <!-- Jobs Tab - Vendor only -->
+    <template x-if="selectedVendor">
+        {{ tab_panel('jobs', tab_var='activeTab') }}
+            {% include 'admin/partials/letzshop-jobs-table.html' %}
+        {{ endtab_panel() }}
+    </template>
 </div>
 
 <!-- Tracking Modal -->
diff --git a/app/templates/admin/partials/letzshop-jobs-table.html b/app/templates/admin/partials/letzshop-jobs-table.html
index 7fd77f18..094f9da6 100644
--- a/app/templates/admin/partials/letzshop-jobs-table.html
+++ b/app/templates/admin/partials/letzshop-jobs-table.html
@@ -28,7 +28,7 @@
             >
                 <option value="">All Types</option>
                 <option value="import">Product Import</option>
-                <option value="export">Product Export</option>
+                <option value="historical_import">Historical Order Import</option>
                 <option value="order_sync">Order Sync</option>
             </select>
             <select
@@ -87,14 +87,14 @@
                                     class="px-2 py-1 text-xs font-medium rounded-full"
                                     :class="{
                                         'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300': job.type === 'import',
-                                        'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300': job.type === 'export',
+                                        'bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300': job.type === 'historical_import',
                                         'bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300': job.type === 'order_sync'
                                     }"
                                 >
                                     <span x-show="job.type === 'import'" x-html="$icon('cloud-download', 'inline w-3 h-3 mr-1')"></span>
-                                    <span x-show="job.type === 'export'" x-html="$icon('upload', 'inline w-3 h-3 mr-1')"></span>
+                                    <span x-show="job.type === 'historical_import'" x-html="$icon('clock', 'inline w-3 h-3 mr-1')"></span>
                                     <span x-show="job.type === 'order_sync'" x-html="$icon('refresh', 'inline w-3 h-3 mr-1')"></span>
-                                    <span x-text="job.type === 'import' ? 'Import' : job.type === 'export' ? 'Export' : 'Order Sync'"></span>
+                                    <span x-text="job.type === 'import' ? 'Product Import' : job.type === 'historical_import' ? 'Historical Import' : 'Order Sync'"></span>
                                 </span>
                             </td>
                             <td class="px-4 py-3">
@@ -129,7 +129,7 @@
                             <td class="px-4 py-3">
                                 <div class="flex items-center space-x-2">
                                     <button
-                                        x-show="job.type === 'import' && (job.status === 'failed' || job.status === 'completed_with_errors')"
+                                        x-show="(job.type === 'import' || job.type === 'historical_import') && (job.status === 'failed' || job.status === 'completed_with_errors')"
                                         @click="viewJobErrors(job)"
                                         class="flex items-center justify-center px-2 py-1 text-sm text-red-600 transition-colors duration-150 rounded-md hover:bg-red-100 dark:hover:bg-red-900"
                                         title="View Errors"
diff --git a/app/templates/admin/partials/letzshop-products-tab.html b/app/templates/admin/partials/letzshop-products-tab.html
index a108e61b..4ebcf1d1 100644
--- a/app/templates/admin/partials/letzshop-products-tab.html
+++ b/app/templates/admin/partials/letzshop-products-tab.html
@@ -166,10 +166,10 @@
                         <div class="flex items-center">
                             <!-- Product Image -->
                             <div class="w-10 h-10 mr-3 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 flex-shrink-0">
-                                <template x-if="product.image_url">
-                                    <img :src="product.image_url" :alt="product.title" class="w-full h-full object-cover" loading="lazy" />
+                                <template x-if="product.image_link">
+                                    <img :src="product.image_link" :alt="product.title" class="w-full h-full object-cover" loading="lazy" />
                                 </template>
-                                <template x-if="!product.image_url">
+                                <template x-if="!product.image_link">
                                     <div class="w-full h-full flex items-center justify-center">
                                         <span x-html="$icon('photograph', 'w-5 h-5 text-gray-400')"></span>
                                     </div>
@@ -177,7 +177,7 @@
                             </div>
                             <!-- Product Details -->
                             <div class="min-w-0">
-                                <a :href="'/admin/vendor-products/' + product.id" class="font-semibold text-sm truncate max-w-xs hover:text-purple-600 dark:hover:text-purple-400" x-text="product.title || 'Untitled'"></a>
+                                <a :href="'/admin/marketplace-products/' + product.id" class="font-semibold text-sm truncate max-w-xs hover:text-purple-600 dark:hover:text-purple-400" x-text="product.title || 'Untitled'"></a>
                                 <p class="text-xs text-gray-500 dark:text-gray-400" x-text="product.brand || 'No brand'"></p>
                             </div>
                         </div>
@@ -189,10 +189,10 @@
                             <template x-if="product.gtin">
                                 <p class="text-xs"><span class="text-gray-500">GTIN:</span> <span x-text="product.gtin" class="font-mono"></span></p>
                             </template>
-                            <template x-if="product.vendor_sku">
-                                <p class="text-xs"><span class="text-gray-500">SKU:</span> <span x-text="product.vendor_sku" class="font-mono"></span></p>
+                            <template x-if="product.sku">
+                                <p class="text-xs"><span class="text-gray-500">SKU:</span> <span x-text="product.sku" class="font-mono"></span></p>
                             </template>
-                            <template x-if="!product.gtin && !product.vendor_sku">
+                            <template x-if="!product.gtin && !product.sku">
                                 <p class="text-xs text-gray-400">No identifiers</p>
                             </template>
                         </div>
@@ -200,10 +200,10 @@
 
                     <!-- Price -->
                     <td class="px-4 py-3 text-sm">
-                        <template x-if="product.effective_price">
-                            <p class="font-medium" x-text="formatPrice(product.effective_price, product.effective_currency || 'EUR')"></p>
+                        <template x-if="product.price_numeric">
+                            <p class="font-medium" x-text="formatPrice(product.price_numeric, product.currency || 'EUR')"></p>
                         </template>
-                        <template x-if="!product.effective_price">
+                        <template x-if="!product.price_numeric">
                             <p class="text-gray-400">-</p>
                         </template>
                     </td>
@@ -220,7 +220,7 @@
                     <td class="px-4 py-3 text-sm">
                         <div class="flex items-center space-x-2">
                             <a
-                                :href="'/admin/vendor-products/' + product.id"
+                                :href="'/admin/marketplace-products/' + product.id"
                                 class="flex items-center justify-center px-2 py-1 text-xs font-medium leading-5 text-purple-600 rounded-lg dark:text-purple-400 focus:outline-none hover:bg-gray-100 dark:hover:bg-gray-700"
                                 title="View Details"
                             >
diff --git a/static/admin/js/marketplace-letzshop.js b/static/admin/js/marketplace-letzshop.js
index bd494078..a2d095e3 100644
--- a/static/admin/js/marketplace-letzshop.js
+++ b/static/admin/js/marketplace-letzshop.js
@@ -153,6 +153,20 @@ function adminMarketplaceLetzshop() {
                 this.initTomSelect();
             });
 
+            // Watch for tab changes to reload relevant data
+            this.$watch('activeTab', async (newTab) => {
+                marketplaceLetzshopLog.info('Tab changed to:', newTab);
+                if (newTab === 'jobs' && this.selectedVendor) {
+                    await this.loadJobs();
+                } else if (newTab === 'products' && this.selectedVendor) {
+                    await this.loadProducts();
+                } else if (newTab === 'orders') {
+                    await this.loadOrders();
+                } else if (newTab === 'exceptions') {
+                    await Promise.all([this.loadExceptions(), this.loadExceptionStats()]);
+                }
+            });
+
             // Check localStorage for last selected vendor
             const savedVendorId = localStorage.getItem('letzshop_selected_vendor_id');
             if (savedVendorId) {
@@ -408,11 +422,12 @@ function adminMarketplaceLetzshop() {
         },
 
         // ═══════════════════════════════════════════════════════════════
-        // PRODUCTS TAB - LISTING
+        // PRODUCTS TAB - LISTING (Letzshop marketplace products)
         // ═══════════════════════════════════════════════════════════════
 
         /**
-         * Load products for selected vendor
+         * Load Letzshop products for selected vendor
+         * Uses /admin/products endpoint with marketplace=Letzshop filter
          */
         async loadProducts() {
             if (!this.selectedVendor) {
@@ -426,7 +441,8 @@ function adminMarketplaceLetzshop() {
 
             try {
                 const params = new URLSearchParams({
-                    vendor_id: this.selectedVendor.id.toString(),
+                    marketplace: 'Letzshop',
+                    vendor_name: this.selectedVendor.name,
                     skip: ((this.productsPage - 1) * this.productsLimit).toString(),
                     limit: this.productsLimit.toString()
                 });
@@ -439,17 +455,12 @@ function adminMarketplaceLetzshop() {
                     params.append('is_active', this.productFilters.is_active);
                 }
 
-                const response = await apiClient.get(`/admin/vendor-products?${params}`);
+                const response = await apiClient.get(`/admin/products?${params}`);
                 this.products = response.products || [];
                 this.totalProducts = response.total || 0;
 
-                // Update stats
-                if (response.stats) {
-                    this.productStats = response.stats;
-                } else {
-                    // Calculate from response if not provided
-                    await this.loadProductStats();
-                }
+                // Load stats separately
+                await this.loadProductStats();
             } catch (error) {
                 marketplaceLetzshopLog.error('Failed to load products:', error);
                 this.products = [];
@@ -460,18 +471,22 @@ function adminMarketplaceLetzshop() {
         },
 
         /**
-         * Load product statistics
+         * Load product statistics for Letzshop products
          */
         async loadProductStats() {
             if (!this.selectedVendor) return;
 
             try {
-                const response = await apiClient.get(`/admin/vendor-products/stats?vendor_id=${this.selectedVendor.id}`);
+                const params = new URLSearchParams({
+                    marketplace: 'Letzshop',
+                    vendor_name: this.selectedVendor.name
+                });
+                const response = await apiClient.get(`/admin/products/stats?${params}`);
                 this.productStats = {
                     total: response.total || 0,
                     active: response.active || 0,
                     inactive: response.inactive || 0,
-                    last_sync: response.last_sync || null
+                    last_sync: null  // TODO: Get from last import job
                 };
             } catch (error) {
                 marketplaceLetzshopLog.error('Failed to load product stats:', error);