feat: add job details modal for Letzshop jobs tab

- Replace browser alert with proper modal for job details view
- Show job info, status, records, timestamps in modal
- Display export file details (languages, file sizes) for export jobs
- Include error_details in API response for export and order_sync jobs
- Add selectedJobDetails state and showJobDetailsModal flag

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app/services/letzshop/order_service.py

@@ -705,6 +705,7 @@ class LetzshopOrderService:
                         "records_processed": log.records_processed or 0,
                         "records_succeeded": log.records_succeeded or 0,
                         "records_failed": log.records_failed or 0,
+                        "error_details": log.error_details,
                     }
                 )
 
@@ -733,6 +734,7 @@ class LetzshopOrderService:
                         "records_processed": log.records_processed or 0,
                         "records_succeeded": log.records_succeeded or 0,
                         "records_failed": log.records_failed or 0,
+                        "error_details": log.error_details,  # Include export file details
                     }
                 )
 

app/templates/admin/partials/letzshop-jobs-table.html

@@ -178,3 +178,162 @@
         </div>
     </div>
 </div>
+
+<!-- Job Details Modal -->
+<div
+    x-show="showJobDetailsModal"
+    x-transition:enter="transition ease-out duration-150"
+    x-transition:enter-start="opacity-0"
+    x-transition:enter-end="opacity-100"
+    x-transition:leave="transition ease-in duration-150"
+    x-transition:leave-start="opacity-100"
+    x-transition:leave-end="opacity-0"
+    class="fixed inset-0 z-30 flex items-center justify-center bg-black bg-opacity-50"
+    @click.self="showJobDetailsModal = false"
+    x-cloak
+>
+    <div
+        x-show="showJobDetailsModal"
+        x-transition:enter="transition ease-out duration-150"
+        x-transition:enter-start="opacity-0 transform scale-95"
+        x-transition:enter-end="opacity-100 transform scale-100"
+        x-transition:leave="transition ease-in duration-150"
+        x-transition:leave-start="opacity-100 transform scale-100"
+        x-transition:leave-end="opacity-0 transform scale-95"
+        class="w-full max-w-lg bg-white dark:bg-gray-800 rounded-lg shadow-xl"
+    >
+        <!-- Header -->
+        <header class="flex justify-between items-center px-6 py-4 border-b dark:border-gray-700">
+            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Job Details</h3>
+            <button
+                @click="showJobDetailsModal = false"
+                class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+            >
+                <span x-html="$icon('close', 'w-5 h-5')"></span>
+            </button>
+        </header>
+
+        <!-- Body -->
+        <div class="px-6 py-4 space-y-4">
+            <!-- Job Info Grid -->
+            <div class="grid grid-cols-2 gap-4 text-sm">
+                <div>
+                    <span class="font-medium text-gray-600 dark:text-gray-400">Job ID:</span>
+                    <span class="ml-2 text-gray-900 dark:text-gray-100">#<span x-text="selectedJobDetails?.id"></span></span>
+                </div>
+                <div>
+                    <span class="font-medium text-gray-600 dark:text-gray-400">Type:</span>
+                    <span class="ml-2">
+                        <span
+                            class="px-2 py-0.5 text-xs font-medium rounded-full"
+                            :class="{
+                                'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300': selectedJobDetails?.type === 'import',
+                                'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300': selectedJobDetails?.type === 'export',
+                                'bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300': selectedJobDetails?.type === 'historical_import',
+                                'bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300': selectedJobDetails?.type === 'order_sync'
+                            }"
+                            x-text="selectedJobDetails?.type === 'import' ? 'Product Import' : selectedJobDetails?.type === 'export' ? 'Product Export' : selectedJobDetails?.type === 'historical_import' ? 'Historical Import' : 'Order Sync'"
+                        ></span>
+                    </span>
+                </div>
+                <div>
+                    <span class="font-medium text-gray-600 dark:text-gray-400">Status:</span>
+                    <span class="ml-2">
+                        <span
+                            class="px-2 py-0.5 text-xs font-semibold rounded-full"
+                            :class="{
+                                'text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-300': selectedJobDetails?.status === 'pending',
+                                'text-blue-700 bg-blue-100 dark:bg-blue-700 dark:text-blue-100': selectedJobDetails?.status === 'processing',
+                                'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': selectedJobDetails?.status === 'completed' || selectedJobDetails?.status === 'success',
+                                'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100': selectedJobDetails?.status === 'failed',
+                                'text-orange-700 bg-orange-100 dark:bg-orange-700 dark:text-orange-100': selectedJobDetails?.status === 'completed_with_errors' || selectedJobDetails?.status === 'partial'
+                            }"
+                            x-text="selectedJobDetails?.status?.replace(/_/g, ' ').toUpperCase()"
+                        ></span>
+                    </span>
+                </div>
+                <div>
+                    <span class="font-medium text-gray-600 dark:text-gray-400">Vendor:</span>
+                    <span class="ml-2 text-gray-900 dark:text-gray-100" x-text="selectedJobDetails?.vendor_code || selectedJobDetails?.vendor_name || selectedVendor?.name || '-'"></span>
+                </div>
+            </div>
+
+            <!-- Records Info -->
+            <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
+                <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Records</h4>
+                <div class="grid grid-cols-3 gap-4 text-center">
+                    <div>
+                        <div class="text-2xl font-bold text-green-600 dark:text-green-400" x-text="selectedJobDetails?.records_succeeded || 0"></div>
+                        <div class="text-xs text-gray-500 dark:text-gray-400">Succeeded</div>
+                    </div>
+                    <div>
+                        <div class="text-2xl font-bold text-gray-600 dark:text-gray-300" x-text="selectedJobDetails?.records_processed || 0"></div>
+                        <div class="text-xs text-gray-500 dark:text-gray-400">Processed</div>
+                    </div>
+                    <div>
+                        <div class="text-2xl font-bold text-red-600 dark:text-red-400" x-text="selectedJobDetails?.records_failed || 0"></div>
+                        <div class="text-xs text-gray-500 dark:text-gray-400">Failed</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Timestamps -->
+            <div class="text-sm space-y-2">
+                <div class="flex justify-between">
+                    <span class="font-medium text-gray-600 dark:text-gray-400">Started:</span>
+                    <span class="text-gray-900 dark:text-gray-100" x-text="formatDate(selectedJobDetails?.started_at || selectedJobDetails?.created_at)"></span>
+                </div>
+                <div class="flex justify-between">
+                    <span class="font-medium text-gray-600 dark:text-gray-400">Completed:</span>
+                    <span class="text-gray-900 dark:text-gray-100" x-text="selectedJobDetails?.completed_at ? formatDate(selectedJobDetails?.completed_at) : 'In progress...'"></span>
+                </div>
+                <div class="flex justify-between">
+                    <span class="font-medium text-gray-600 dark:text-gray-400">Duration:</span>
+                    <span class="text-gray-900 dark:text-gray-100" x-text="formatDuration(selectedJobDetails?.started_at || selectedJobDetails?.created_at, selectedJobDetails?.completed_at)"></span>
+                </div>
+            </div>
+
+            <!-- Export Details (for export jobs) -->
+            <template x-if="selectedJobDetails?.type === 'export' && selectedJobDetails?.error_details">
+                <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
+                    <h4 class="font-medium text-blue-700 dark:text-blue-300 mb-2">Export Details</h4>
+                    <p class="text-sm text-blue-600 dark:text-blue-400 mb-2">
+                        Products exported: <span class="font-medium" x-text="selectedJobDetails?.error_details?.products_exported || 0"></span>
+                    </p>
+                    <template x-if="selectedJobDetails?.error_details?.files">
+                        <div class="space-y-1">
+                            <template x-for="file in selectedJobDetails.error_details.files" :key="file.language">
+                                <div class="text-xs flex justify-between items-center py-1 border-b border-blue-100 dark:border-blue-800 last:border-0">
+                                    <span class="font-medium text-blue-700 dark:text-blue-300" x-text="file.language?.toUpperCase()"></span>
+                                    <span x-show="file.error" class="text-red-600 dark:text-red-400" x-text="'Failed: ' + file.error"></span>
+                                    <span x-show="!file.error" class="text-blue-600 dark:text-blue-400">
+                                        <span x-text="file.filename"></span>
+                                        <span class="text-gray-400 ml-1">(<span x-text="(file.size_bytes / 1024).toFixed(1)"></span> KB)</span>
+                                    </span>
+                                </div>
+                            </template>
+                        </div>
+                    </template>
+                </div>
+            </template>
+
+            <!-- Error Details -->
+            <template x-if="selectedJobDetails?.error_message || (selectedJobDetails?.error_details?.error && selectedJobDetails?.type !== 'export')">
+                <div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-4">
+                    <h4 class="font-medium text-red-700 dark:text-red-300 mb-2">Error</h4>
+                    <p class="text-sm text-red-600 dark:text-red-400" x-text="selectedJobDetails?.error_message || selectedJobDetails?.error_details?.error"></p>
+                </div>
+            </template>
+        </div>
+
+        <!-- Footer -->
+        <footer class="px-6 py-4 border-t dark:border-gray-700 flex justify-end">
+            <button
+                @click="showJobDetailsModal = false"
+                class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none"
+            >
+                Close
+            </button>
+        </footer>
+    </div>
+</div>

static/admin/js/marketplace-letzshop.js

@@ -129,7 +129,9 @@ function adminMarketplaceLetzshop() {
         showTrackingModal: false,
         showOrderModal: false,
         showResolveModal: false,
+        showJobDetailsModal: false,
         selectedOrder: null,
+        selectedJobDetails: null,
         selectedExceptionForResolve: null,
         trackingForm: { tracking_number: '', tracking_provider: '' },
         resolveForm: { product_id: null, product_name: '', notes: '', bulk_resolve: false },
@@ -1412,12 +1414,12 @@ function adminMarketplaceLetzshop() {
         },
 
         /**
-         * View job details
+         * View job details in modal
          */
         viewJobDetails(job) {
-            // For now, just log - could open a modal
             marketplaceLetzshopLog.info('View job details:', job);
-            alert(`Job #${job.id}\nType: ${job.type}\nStatus: ${job.status}\nRecords: ${job.records_succeeded}/${job.records_processed}`);
+            this.selectedJobDetails = job;
+            this.showJobDetailsModal = true;
         },
 
         /**