sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update frontend for unified order model

Browse Source 
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:
Samir Boulahtit
2025-12-19 21:38:02 +01:00
parent c49b80ce41
commit 2e6f8fdb8a
5 changed files with 126 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
app/templates/admin/marketplace-letzshop.html
View File

@@ -192,7 +192,7 @@
Carrier <span class="text-red-500">*</span>
</label>
<select
x-model="trackingForm.tracking_carrier"
x-model="trackingForm.tracking_provider"
required
class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
>
@@ -273,7 +273,7 @@
<div class="grid grid-cols-2 gap-4 text-sm">
<div>
<span class="font-medium text-gray-600 dark:text-gray-400">Order Number:</span>
<span class="ml-2 text-gray-700 dark:text-gray-300" x-text="selectedOrder?.letzshop_order_number"></span>
<span class="ml-2 text-gray-700 dark:text-gray-300" x-text="selectedOrder?.external_order_number || selectedOrder?.order_number"></span>
</div>
<div>
<span class="font-medium text-gray-600 dark:text-gray-400">Order Date:</span>
@@ -284,12 +284,12 @@
<span
class="ml-2 px-2 py-0.5 text-xs rounded-full"
:class="{
'bg-orange-100 text-orange-700': selectedOrder?.sync_status === 'pending',
'bg-green-100 text-green-700': selectedOrder?.sync_status === 'confirmed',
'bg-red-100 text-red-700': selectedOrder?.sync_status === 'rejected',
'bg-blue-100 text-blue-700': selectedOrder?.sync_status === 'shipped'
'bg-orange-100 text-orange-700': selectedOrder?.status === 'pending',
'bg-green-100 text-green-700': selectedOrder?.status === 'processing',
'bg-red-100 text-red-700': selectedOrder?.status === 'cancelled',
'bg-blue-100 text-blue-700': selectedOrder?.status === 'shipped'
}"
x-text="selectedOrder?.sync_status === 'rejected' ? 'DECLINED' : selectedOrder?.sync_status?.toUpperCase()"
x-text="selectedOrder?.status === 'cancelled' ? 'DECLINED' : (selectedOrder?.status === 'processing' ? 'CONFIRMED' : selectedOrder?.status?.toUpperCase())"
></span>
</div>
<div>
@@ -337,7 +337,7 @@
<div class="text-sm bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3">
<p class="text-gray-700 dark:text-gray-300">
<span class="font-medium">Carrier:</span>
<span class="ml-1" x-text="selectedOrder?.tracking_carrier"></span>
<span class="ml-1" x-text="selectedOrder?.tracking_provider"></span>
</p>
<p class="text-gray-700 dark:text-gray-300">
<span class="font-medium">Tracking #:</span>
@@ -347,28 +347,28 @@
</div>
<!-- Order Items -->
<div x-show="selectedOrder?.inventory_units?.length > 0" class="border-t border-gray-200 dark:border-gray-600 pt-4">
<div x-show="selectedOrder?.items?.length > 0" class="border-t border-gray-200 dark:border-gray-600 pt-4">
<h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center gap-2">
<span x-html="$icon('shopping-bag', 'w-4 h-4')"></span>
Items
<span class="text-xs font-normal text-gray-500">
(<span x-text="selectedOrder?.inventory_units?.length"></span> item<span x-show="selectedOrder?.inventory_units?.length > 1">s</span>)
(<span x-text="selectedOrder?.items?.length"></span> item<span x-show="selectedOrder?.items?.length > 1">s</span>)
</span>
</h4>
<div class="space-y-2">
<template x-for="(unit, index) in selectedOrder?.inventory_units || []" :key="unit.id">
<template x-for="(item, index) in selectedOrder?.items || []" :key="item.id">
<div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
<div class="flex justify-between items-start">
<div class="flex-1">
<p class="font-medium text-gray-700 dark:text-gray-200 text-sm" x-text="unit.product_name || 'Unknown Product'"></p>
<p class="font-medium text-gray-700 dark:text-gray-200 text-sm" x-text="item.product_name || 'Unknown Product'"></p>
<div class="text-xs text-gray-500 dark:text-gray-400 mt-1 space-y-0.5">
<p x-show="unit.ean">
<span class="font-medium">EAN:</span> <span x-text="unit.ean"></span>
<span x-show="unit.ean_type" class="text-gray-400" x-text="'(' + unit.ean_type + ')'"></span>
<p x-show="item.gtin">
<span class="font-medium">GTIN:</span> <span x-text="item.gtin"></span>
<span x-show="item.gtin_type" class="text-gray-400" x-text="'(' + item.gtin_type + ')'"></span>
</p>
<p x-show="unit.sku"><span class="font-medium">SKU:</span> <span x-text="unit.sku"></span></p>
<p x-show="unit.mpn"><span class="font-medium">MPN:</span> <span x-text="unit.mpn"></span></p>
<p x-show="unit.price"><span class="font-medium">Price:</span> <span x-text="unit.price + ' EUR'"></span></p>
<p x-show="item.product_sku"><span class="font-medium">SKU:</span> <span x-text="item.product_sku"></span></p>
<p><span class="font-medium">Qty:</span> <span x-text="item.quantity"></span></p>
<p x-show="item.unit_price"><span class="font-medium">Price:</span> <span x-text="item.unit_price + ' ' + selectedOrder?.currency"></span></p>
</div>
</div>
<div class="flex items-center gap-2 ml-4">
@@ -376,25 +376,25 @@
<span
class="px-2 py-0.5 text-xs rounded-full whitespace-nowrap"
:class="{
'bg-orange-100 text-orange-700': unit.state === 'unconfirmed',
'bg-green-100 text-green-700': unit.state === 'confirmed_available' || unit.state === 'confirmed',
'bg-red-100 text-red-700': unit.state === 'confirmed_unavailable',
'bg-gray-100 text-gray-700': unit.state === 'returned'
'bg-orange-100 text-orange-700': !item.item_state,
'bg-green-100 text-green-700': item.item_state === 'confirmed_available',
'bg-red-100 text-red-700': item.item_state === 'confirmed_unavailable',
'bg-gray-100 text-gray-700': item.item_state === 'returned'
}"
x-text="unit.state === 'confirmed_unavailable' ? 'DECLINED' : (unit.state === 'confirmed_available' ? 'CONFIRMED' : unit.state?.toUpperCase())"
x-text="item.item_state === 'confirmed_unavailable' ? 'DECLINED' : (item.item_state === 'confirmed_available' ? 'CONFIRMED' : (item.item_state ? item.item_state.toUpperCase() : 'PENDING'))"
></span>
<!-- Item Actions (only for unconfirmed items) -->
<template x-if="unit.state === 'unconfirmed' && selectedOrder?.sync_status === 'pending'">
<template x-if="!item.item_state && selectedOrder?.status === 'pending'">
<div class="flex gap-1">
<button
@click="confirmInventoryUnit(selectedOrder, unit, index)"
@click="confirmInventoryUnit(selectedOrder, item, index)"
class="p-1 text-green-600 hover:bg-green-100 rounded"
title="Confirm this item"
>
<span x-html="$icon('check', 'w-4 h-4')"></span>
</button>
<button
@click="declineInventoryUnit(selectedOrder, unit, index)"
@click="declineInventoryUnit(selectedOrder, item, index)"
class="p-1 text-red-600 hover:bg-red-100 rounded"
title="Decline this item"
>
@@ -408,7 +408,7 @@
</template>
</div>
<!-- Bulk Actions -->
<div x-show="selectedOrder?.sync_status === 'pending'" class="mt-4 flex gap-2 justify-end">
<div x-show="selectedOrder?.status === 'pending'" class="mt-4 flex gap-2 justify-end">
<button
@click="confirmAllItems(selectedOrder)"
class="px-3 py-1.5 text-sm text-white bg-green-600 hover:bg-green-700 rounded-lg"