feat: update frontend for unified order model

Update all frontend templates and JavaScript to use new unified Order model:
- Orders tab: use status field, processing/cancelled values, items array
- Order detail: use snapshot fields, items array, tracking_provider
- JavaScript: update API params (status vs sync_status), orderStats fields
- Tracking modal: use tracking_provider instead of tracking_carrier
- Order items modal: use items array with item_state field

All status mappings:
- pending → pending (unconfirmed)
- processing → confirmed (at least one item available)
- cancelled → declined (all items unavailable)
- shipped → shipped (with tracking)

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2025-12-19 21:38:02 +01:00
parent c49b80ce41
commit 2e6f8fdb8a
5 changed files with 126 additions and 110 deletions

View File

@@ -101,25 +101,25 @@
</div>
</div>
<!-- Confirmed Orders -->
<!-- Confirmed/Processing Orders -->
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
<div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:bg-green-900">
<span x-html="$icon('check-circle', 'w-5 h-5')"></span>
</div>
<div>
<p class="mb-1 text-sm font-medium text-gray-600 dark:text-gray-400">Confirmed</p>
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="orderStats.confirmed"></p>
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="orderStats.processing"></p>
</div>
</div>
<!-- Declined Orders -->
<!-- Declined/Cancelled Orders -->
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
<div class="p-3 mr-4 text-red-500 bg-red-100 rounded-full dark:bg-red-900">
<span x-html="$icon('x-circle', 'w-5 h-5')"></span>
</div>
<div>
<p class="mb-1 text-sm font-medium text-gray-600 dark:text-gray-400">Declined</p>
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="orderStats.rejected"></p>
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="orderStats.cancelled"></p>
</div>
</div>
@@ -164,8 +164,8 @@
>
<option value="">All Status</option>
<option value="pending">Pending</option>
<option value="confirmed">Confirmed</option>
<option value="rejected">Declined</option>
<option value="processing">Confirmed</option>
<option value="cancelled">Declined</option>
<option value="shipped">Shipped</option>
</select>
@@ -230,7 +230,7 @@
<td class="px-4 py-3">
<div class="flex items-center text-sm">
<div>
<p class="font-semibold" x-text="order.letzshop_order_number || order.letzshop_order_id"></p>
<p class="font-semibold" x-text="order.external_order_number || order.order_number"></p>
<p class="text-xs text-gray-500" x-text="'#' + order.id"></p>
</div>
</div>
@@ -245,12 +245,12 @@
<span
class="px-2 py-1 font-semibold leading-tight rounded-full"
:class="{
'text-orange-700 bg-orange-100 dark:bg-orange-700 dark:text-orange-100': order.sync_status === 'pending',
'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': order.sync_status === 'confirmed',
'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100': order.sync_status === 'rejected',
'text-blue-700 bg-blue-100 dark:bg-blue-700 dark:text-blue-100': order.sync_status === 'shipped'
'text-orange-700 bg-orange-100 dark:bg-orange-700 dark:text-orange-100': order.status === 'pending',
'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': order.status === 'processing',
'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100': order.status === 'cancelled',
'text-blue-700 bg-blue-100 dark:bg-blue-700 dark:text-blue-100': order.status === 'shipped'
}"
x-text="order.sync_status === 'rejected' ? 'DECLINED' : order.sync_status.toUpperCase()"
x-text="order.status === 'cancelled' ? 'DECLINED' : (order.status === 'processing' ? 'CONFIRMED' : order.status.toUpperCase())"
></span>
</td>
<td class="px-4 py-3 text-sm">
@@ -259,7 +259,7 @@
<td class="px-4 py-3">
<div class="flex items-center space-x-2 text-sm">
<button
x-show="order.sync_status === 'pending'"
x-show="order.status === 'pending'"
@click="confirmOrder(order)"
class="flex items-center justify-center px-2 py-1 text-sm text-green-600 transition-colors duration-150 rounded-md hover:bg-green-100 dark:hover:bg-green-900"
title="Confirm Order"
@@ -267,7 +267,7 @@
<span x-html="$icon('check', 'w-4 h-4')"></span>
</button>
<button
x-show="order.sync_status === 'pending'"
x-show="order.status === 'pending'"
@click="declineOrder(order)"
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="Decline Order"
@@ -275,7 +275,7 @@
<span x-html="$icon('x', 'w-4 h-4')"></span>
</button>
<button
x-show="order.sync_status === 'confirmed'"
x-show="order.status === 'processing'"
@click="openTrackingModal(order)"
class="flex items-center justify-center px-2 py-1 text-sm text-blue-600 transition-colors duration-150 rounded-md hover:bg-blue-100 dark:hover:bg-blue-900"
title="Set Tracking"