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

wip: update frontend templates for Letzshop order management

Browse Source 
- Add Letzshop order detail page template
- Update orders list template
- Update Letzshop orders tab with improved UI
- Add JavaScript for order confirmation flow

Note: Frontend needs alignment with new unified order schema.

🤖 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:18:48 +01:00
parent fceaba703e
commit 8e8d1d1ac0
6 changed files with 739 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
app/templates/admin/partials/letzshop-orders-tab.html
View File

@@ -12,11 +12,12 @@
@click="importHistoricalOrders()"
:disabled="!letzshopStatus.is_configured || importingHistorical"
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
title="Import all historical confirmed orders"
title="Import all historical confirmed and declined orders"
>
<span x-show="!importingHistorical" x-html="$icon('archive', 'w-4 h-4 mr-2')"></span>
<span x-show="importingHistorical" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
<span x-text="importingHistorical ? 'Importing...' : 'Import History'"></span>
<span x-show="!importingHistorical">Import History</span>
<span x-show="importingHistorical" x-text="historicalImportProgress?.message || 'Starting...'"></span>
</button>
<button
@click="importOrders()"
@@ -30,6 +31,28 @@
</div>
</div>
<!-- Historical Import Progress -->
<div x-show="historicalImportProgress && importingHistorical" x-transition class="mb-6 p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
<div class="flex items-center">
<span x-html="$icon('spinner', 'w-5 h-5 text-purple-500 mr-3')"></span>
<div class="flex-1">
<h4 class="font-medium text-purple-800 dark:text-purple-200">Historical Import in Progress</h4>
<p class="text-sm text-purple-700 dark:text-purple-300 mt-1" x-text="historicalImportProgress?.message"></p>
<div class="flex gap-4 mt-2 text-xs text-purple-600 dark:text-purple-400">
<span x-show="historicalImportProgress?.current_phase">
Phase: <strong x-text="historicalImportProgress?.current_phase"></strong>
</span>
<span x-show="historicalImportProgress?.shipments_fetched > 0">
Fetched: <strong x-text="historicalImportProgress?.shipments_fetched"></strong>
</span>
<span x-show="historicalImportProgress?.orders_processed > 0">
Processed: <strong x-text="historicalImportProgress?.orders_processed"></strong>
</span>
</div>
</div>
</div>
</div>
<!-- Historical Import Result -->
<div x-show="historicalImportResult" x-transition class="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
<div class="flex items-start justify-between">
@@ -113,10 +136,30 @@
</div>
<!-- Filters -->
<div class="mb-4 flex flex-wrap gap-4">
<div class="mb-4 flex flex-wrap gap-4 items-center">
<!-- Search input -->
<div class="relative flex-1 min-w-[200px] max-w-md">
<span x-html="$icon('search', 'w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400')"></span>
<input
type="text"
x-model="ordersSearch"
@input.debounce.300ms="ordersPage = 1; loadOrders()"
placeholder="Search by order #, name, or email..."
class="w-full pl-9 pr-8 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
/>
<button
x-show="ordersSearch"
@click="ordersSearch = ''; ordersPage = 1; loadOrders()"
class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
>
<span x-html="$icon('x', 'w-4 h-4')"></span>
</button>
</div>
<!-- Status filter -->
<select
x-model="ordersFilter"
@change="loadOrders()"
@change="ordersHasDeclinedItems = false; ordersPage = 1; loadOrders()"
class="px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
>
<option value="">All Status</option>
@@ -125,6 +168,18 @@
<option value="rejected">Declined</option>
<option value="shipped">Shipped</option>
</select>
<!-- Declined items filter -->
<button
@click="ordersFilter = ''; ordersHasDeclinedItems = !ordersHasDeclinedItems; ordersPage = 1; loadOrders()"
:class="ordersHasDeclinedItems ? 'bg-red-100 dark:bg-red-900 border-red-300 dark:border-red-700 text-red-700 dark:text-red-300' : 'bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300'"
class="px-3 py-2 text-sm border rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
:title="ordersHasDeclinedItems ? 'Showing orders with declined items' : 'Show only orders with declined items'"
>
<span x-html="$icon('x-circle', 'w-4 h-4 inline mr-1')"></span>
Has Declined Items
<span x-show="orderStats.has_declined_items > 0" class="ml-1 px-1.5 py-0.5 text-xs bg-red-200 dark:bg-red-800 rounded-full" x-text="orderStats.has_declined_items"></span>
</button>
</div>
<!-- Not Configured Warning -->
@@ -199,7 +254,7 @@
></span>
</td>
<td class="px-4 py-3 text-sm">
<span x-text="formatDate(order.created_at)"></span>
<span x-text="formatDate(order.order_date || order.created_at)"></span>
</td>
<td class="px-4 py-3">
<div class="flex items-center space-x-2 text-sm">