feat: add Letzshop frontend for admin and vendor portals
Add complete frontend UI for Letzshop marketplace integration:
Admin portal (/admin/letzshop):
- Vendor overview with Letzshop status cards
- Vendor table with configuration state and sync info
- Configuration modal for API credentials
- Connection testing and manual sync triggers
- Orders modal for viewing vendor orders
Vendor portal (/vendor/{code}/letzshop):
- Orders tab with import, confirm, reject actions
- Settings tab for API credentials management
- Tracking modal for shipment updates
- Order details modal with line items
- Stats display for order status counts
Also includes:
- Routes for both admin and vendor Letzshop pages
- Sidebar navigation updates for both portals
- Alpine.js data functions for reactive UI state
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -538,6 +538,25 @@ async def admin_marketplace_page(
|
|||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
|
@router.get("/letzshop", response_class=HTMLResponse, include_in_schema=False)
|
||||||
|
async def admin_letzshop_page(
|
||||||
|
request: Request,
|
||||||
|
current_user: User = Depends(get_current_admin_from_cookie_or_header),
|
||||||
|
db: Session = Depends(get_db),
|
||||||
|
):
|
||||||
|
"""
|
||||||
|
Render Letzshop management page.
|
||||||
|
Admin overview of Letzshop integration for all vendors.
|
||||||
|
"""
|
||||||
|
return templates.TemplateResponse(
|
||||||
|
"admin/letzshop.html",
|
||||||
|
{
|
||||||
|
"request": request,
|
||||||
|
"user": current_user,
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
# ============================================================================
|
# ============================================================================
|
||||||
# PRODUCT CATALOG ROUTES
|
# PRODUCT CATALOG ROUTES
|
||||||
# ============================================================================
|
# ============================================================================
|
||||||
|
|||||||
@@ -273,6 +273,33 @@ async def vendor_marketplace_page(
|
|||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
|
# ============================================================================
|
||||||
|
# LETZSHOP INTEGRATION
|
||||||
|
# ============================================================================
|
||||||
|
|
||||||
|
|
||||||
|
@router.get(
|
||||||
|
"/{vendor_code}/letzshop", response_class=HTMLResponse, include_in_schema=False
|
||||||
|
)
|
||||||
|
async def vendor_letzshop_page(
|
||||||
|
request: Request,
|
||||||
|
vendor_code: str = Path(..., description="Vendor code"),
|
||||||
|
current_user: User = Depends(get_current_vendor_from_cookie_or_header),
|
||||||
|
):
|
||||||
|
"""
|
||||||
|
Render Letzshop integration page.
|
||||||
|
JavaScript loads orders, credentials status, and handles fulfillment operations.
|
||||||
|
"""
|
||||||
|
return templates.TemplateResponse(
|
||||||
|
"vendor/letzshop.html",
|
||||||
|
{
|
||||||
|
"request": request,
|
||||||
|
"user": current_user,
|
||||||
|
"vendor_code": vendor_code,
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
# ============================================================================
|
# ============================================================================
|
||||||
# TEAM MANAGEMENT
|
# TEAM MANAGEMENT
|
||||||
# ============================================================================
|
# ============================================================================
|
||||||
|
|||||||
452
app/templates/admin/letzshop.html
Normal file
452
app/templates/admin/letzshop.html
Normal file
@@ -0,0 +1,452 @@
|
|||||||
|
{# app/templates/admin/letzshop.html #}
|
||||||
|
{% extends "admin/base.html" %}
|
||||||
|
|
||||||
|
{% block title %}Letzshop Management{% endblock %}
|
||||||
|
|
||||||
|
{% block alpine_data %}adminLetzshop(){% endblock %}
|
||||||
|
|
||||||
|
{% block extra_scripts %}
|
||||||
|
<script src="/static/admin/js/letzshop.js"></script>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<!-- Page Header -->
|
||||||
|
<div class="flex items-center justify-between my-6">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
|
||||||
|
Letzshop Management
|
||||||
|
</h2>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||||
|
Manage Letzshop integration for all vendors
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
@click="refreshData()"
|
||||||
|
:disabled="loading"
|
||||||
|
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<span x-show="!loading" x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
|
||||||
|
<span x-show="loading" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
||||||
|
<span x-text="loading ? 'Loading...' : 'Refresh'"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Success Message -->
|
||||||
|
<div x-show="successMessage" x-transition class="mb-6 p-4 bg-green-100 dark:bg-green-900/30 border border-green-400 dark:border-green-600 text-green-700 dark:text-green-300 rounded-lg flex items-start">
|
||||||
|
<span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
|
||||||
|
<div>
|
||||||
|
<p class="font-semibold" x-text="successMessage"></p>
|
||||||
|
</div>
|
||||||
|
<button @click="successMessage = ''" class="ml-auto">
|
||||||
|
<span x-html="$icon('x', 'w-4 h-4')"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Error Message -->
|
||||||
|
<div x-show="error" x-transition class="mb-6 p-4 bg-red-100 dark:bg-red-900/30 border border-red-400 dark:border-red-600 text-red-700 dark:text-red-300 rounded-lg flex items-start">
|
||||||
|
<span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
|
||||||
|
<div>
|
||||||
|
<p class="font-semibold">Error</p>
|
||||||
|
<p class="text-sm" x-text="error"></p>
|
||||||
|
</div>
|
||||||
|
<button @click="error = ''" class="ml-auto">
|
||||||
|
<span x-html="$icon('x', 'w-4 h-4')"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Summary Cards -->
|
||||||
|
<div class="grid gap-6 mb-8 md:grid-cols-4">
|
||||||
|
<!-- Total Vendors -->
|
||||||
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:bg-purple-900">
|
||||||
|
<span x-html="$icon('office-building', 'w-5 h-5')"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Total Vendors</p>
|
||||||
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.total"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Configured -->
|
||||||
|
<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-2 text-sm font-medium text-gray-600 dark:text-gray-400">Configured</p>
|
||||||
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.configured"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Auto-Sync Enabled -->
|
||||||
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:bg-blue-900">
|
||||||
|
<span x-html="$icon('refresh', 'w-5 h-5')"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Auto-Sync</p>
|
||||||
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.autoSync"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pending 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-orange-500 bg-orange-100 rounded-full dark:bg-orange-900">
|
||||||
|
<span x-html="$icon('clock', 'w-5 h-5')"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Pending Orders</p>
|
||||||
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.pendingOrders"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Filters -->
|
||||||
|
<div class="mb-4 flex flex-wrap gap-4">
|
||||||
|
<label class="flex items-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
x-model="filters.configuredOnly"
|
||||||
|
@change="loadVendors()"
|
||||||
|
class="form-checkbox h-4 w-4 text-purple-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700"
|
||||||
|
/>
|
||||||
|
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Configured only</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Vendors Table -->
|
||||||
|
<div class="w-full overflow-hidden rounded-lg shadow-xs">
|
||||||
|
<div class="w-full overflow-x-auto">
|
||||||
|
<table class="w-full whitespace-no-wrap">
|
||||||
|
<thead>
|
||||||
|
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
|
||||||
|
<th class="px-4 py-3">Vendor</th>
|
||||||
|
<th class="px-4 py-3">Status</th>
|
||||||
|
<th class="px-4 py-3">Auto-Sync</th>
|
||||||
|
<th class="px-4 py-3">Last Sync</th>
|
||||||
|
<th class="px-4 py-3">Orders</th>
|
||||||
|
<th class="px-4 py-3">Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
|
||||||
|
<template x-if="loading && vendors.length === 0">
|
||||||
|
<tr>
|
||||||
|
<td colspan="6" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
||||||
|
<span x-html="$icon('spinner', 'w-6 h-6 mx-auto mb-2')"></span>
|
||||||
|
<p>Loading vendors...</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
<template x-if="!loading && vendors.length === 0">
|
||||||
|
<tr>
|
||||||
|
<td colspan="6" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
||||||
|
<span x-html="$icon('office-building', 'w-12 h-12 mx-auto mb-2 text-gray-300')"></span>
|
||||||
|
<p class="font-medium">No vendors found</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
<template x-for="vendor in vendors" :key="vendor.vendor_id">
|
||||||
|
<tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<div class="flex items-center text-sm">
|
||||||
|
<div class="relative hidden w-8 h-8 mr-3 rounded-full md:block">
|
||||||
|
<div class="absolute inset-0 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
|
||||||
|
<span class="text-sm font-semibold text-purple-600 dark:text-purple-300" x-text="vendor.vendor_name.charAt(0).toUpperCase()"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-semibold" x-text="vendor.vendor_name"></p>
|
||||||
|
<p class="text-xs text-gray-500" x-text="vendor.vendor_code"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 text-xs">
|
||||||
|
<span
|
||||||
|
class="px-2 py-1 font-semibold leading-tight rounded-full"
|
||||||
|
:class="vendor.is_configured ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-gray-700 bg-gray-100 dark:bg-gray-600 dark:text-gray-100'"
|
||||||
|
x-text="vendor.is_configured ? 'CONFIGURED' : 'NOT CONFIGURED'"
|
||||||
|
></span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 text-sm">
|
||||||
|
<span x-show="vendor.auto_sync_enabled" class="text-green-600 dark:text-green-400">
|
||||||
|
<span x-html="$icon('check', 'w-4 h-4 inline')"></span> Enabled
|
||||||
|
</span>
|
||||||
|
<span x-show="!vendor.auto_sync_enabled" class="text-gray-400">
|
||||||
|
<span x-html="$icon('x', 'w-4 h-4 inline')"></span> Disabled
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 text-sm">
|
||||||
|
<div x-show="vendor.last_sync_at">
|
||||||
|
<span
|
||||||
|
class="px-2 py-0.5 text-xs rounded-full"
|
||||||
|
:class="{
|
||||||
|
'bg-green-100 text-green-700': vendor.last_sync_status === 'success',
|
||||||
|
'bg-yellow-100 text-yellow-700': vendor.last_sync_status === 'partial',
|
||||||
|
'bg-red-100 text-red-700': vendor.last_sync_status === 'failed'
|
||||||
|
}"
|
||||||
|
x-text="vendor.last_sync_status"
|
||||||
|
></span>
|
||||||
|
<p class="text-xs text-gray-500 mt-1" x-text="formatDate(vendor.last_sync_at)"></p>
|
||||||
|
</div>
|
||||||
|
<span x-show="!vendor.last_sync_at" class="text-gray-400">Never</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 text-sm">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span
|
||||||
|
class="px-2 py-0.5 text-xs rounded-full bg-orange-100 text-orange-700"
|
||||||
|
x-show="vendor.pending_orders > 0"
|
||||||
|
x-text="vendor.pending_orders + ' pending'"
|
||||||
|
></span>
|
||||||
|
<span class="text-gray-500" x-text="vendor.total_orders + ' total'"></span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<div class="flex items-center space-x-2 text-sm">
|
||||||
|
<button
|
||||||
|
@click="openConfigModal(vendor)"
|
||||||
|
class="flex items-center justify-center px-2 py-1 text-sm text-purple-600 transition-colors duration-150 rounded-md hover:bg-purple-100 dark:hover:bg-purple-900"
|
||||||
|
title="Configure"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('cog', 'w-4 h-4')"></span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
x-show="vendor.is_configured"
|
||||||
|
@click="testConnection(vendor)"
|
||||||
|
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="Test Connection"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('lightning-bolt', 'w-4 h-4')"></span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
x-show="vendor.is_configured"
|
||||||
|
@click="triggerSync(vendor)"
|
||||||
|
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="Trigger Sync"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('download', 'w-4 h-4')"></span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
x-show="vendor.total_orders > 0"
|
||||||
|
@click="viewOrders(vendor)"
|
||||||
|
class="flex items-center justify-center px-2 py-1 text-sm text-gray-600 transition-colors duration-150 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||||
|
title="View Orders"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('eye', 'w-4 h-4')"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<!-- Pagination -->
|
||||||
|
<div x-show="totalVendors > limit" class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800">
|
||||||
|
<span class="flex items-center col-span-3">
|
||||||
|
Showing <span x-text="((page - 1) * limit) + 1"></span>-<span x-text="Math.min(page * limit, totalVendors)"></span> of <span x-text="totalVendors"></span>
|
||||||
|
</span>
|
||||||
|
<span class="col-span-2"></span>
|
||||||
|
<span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
|
||||||
|
<nav>
|
||||||
|
<ul class="inline-flex items-center">
|
||||||
|
<li>
|
||||||
|
<button @click="page--; loadVendors()" :disabled="page <= 1" class="px-3 py-1 rounded-md disabled:opacity-50">
|
||||||
|
<span x-html="$icon('chevron-left', 'w-4 h-4')"></span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<button @click="page++; loadVendors()" :disabled="page * limit >= totalVendors" class="px-3 py-1 rounded-md disabled:opacity-50">
|
||||||
|
<span x-html="$icon('chevron-right', 'w-4 h-4')"></span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Configuration Modal -->
|
||||||
|
<div
|
||||||
|
x-show="showConfigModal"
|
||||||
|
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-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
|
||||||
|
@click.self="showConfigModal = false"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
x-transition:enter="transition ease-out duration-150"
|
||||||
|
x-transition:enter-start="opacity-0 transform translate-y-1/2"
|
||||||
|
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 transform translate-y-1/2"
|
||||||
|
class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-lg"
|
||||||
|
@click.stop
|
||||||
|
>
|
||||||
|
<header class="flex justify-between items-center mb-4">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||||
|
Configure Letzshop - <span x-text="selectedVendor?.vendor_name"></span>
|
||||||
|
</h3>
|
||||||
|
<button @click="showConfigModal = false" class="text-gray-400 hover:text-gray-600">
|
||||||
|
<span x-html="$icon('x', 'w-5 h-5')"></span>
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<form @submit.prevent="saveVendorConfig()">
|
||||||
|
<div class="space-y-4 mb-6">
|
||||||
|
<!-- API Key -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||||
|
API Key <span x-show="!vendorCredentials" class="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input
|
||||||
|
:type="showApiKey ? 'text' : 'password'"
|
||||||
|
x-model="configForm.api_key"
|
||||||
|
:placeholder="vendorCredentials ? vendorCredentials.api_key_masked : 'Enter API key'"
|
||||||
|
class="block w-full px-3 py-2 pr-10 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"
|
||||||
|
/>
|
||||||
|
<button type="button" @click="showApiKey = !showApiKey" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400">
|
||||||
|
<span x-html="$icon(showApiKey ? 'eye-off' : 'eye', 'w-4 h-4')"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Auto Sync -->
|
||||||
|
<div>
|
||||||
|
<label class="flex items-center cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
x-model="configForm.auto_sync_enabled"
|
||||||
|
class="form-checkbox h-5 w-5 text-purple-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700"
|
||||||
|
/>
|
||||||
|
<span class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-400">Enable Auto-Sync</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sync Interval -->
|
||||||
|
<div x-show="configForm.auto_sync_enabled">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||||
|
Sync Interval
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
x-model="configForm.sync_interval_minutes"
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<option value="15">Every 15 minutes</option>
|
||||||
|
<option value="30">Every 30 minutes</option>
|
||||||
|
<option value="60">Every hour</option>
|
||||||
|
<option value="120">Every 2 hours</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
x-show="vendorCredentials"
|
||||||
|
@click="deleteVendorConfig()"
|
||||||
|
class="px-4 py-2 text-sm font-medium text-red-600 border border-red-300 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20"
|
||||||
|
>
|
||||||
|
Remove
|
||||||
|
</button>
|
||||||
|
<div class="flex gap-3 ml-auto">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
@click="showConfigModal = false"
|
||||||
|
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
:disabled="savingConfig"
|
||||||
|
class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<span x-show="savingConfig" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
||||||
|
<span x-text="savingConfig ? 'Saving...' : 'Save'"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Orders Modal -->
|
||||||
|
<div
|
||||||
|
x-show="showOrdersModal"
|
||||||
|
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-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
|
||||||
|
@click.self="showOrdersModal = false"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
x-transition:enter="transition ease-out duration-150"
|
||||||
|
x-transition:enter-start="opacity-0 transform translate-y-1/2"
|
||||||
|
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 transform translate-y-1/2"
|
||||||
|
class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-4xl max-h-[80vh] overflow-y-auto"
|
||||||
|
@click.stop
|
||||||
|
>
|
||||||
|
<header class="flex justify-between items-center mb-4">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||||
|
Orders - <span x-text="selectedVendor?.vendor_name"></span>
|
||||||
|
</h3>
|
||||||
|
<button @click="showOrdersModal = false" class="text-gray-400 hover:text-gray-600">
|
||||||
|
<span x-html="$icon('x', 'w-5 h-5')"></span>
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div x-show="loadingOrders" class="py-8 text-center">
|
||||||
|
<span x-html="$icon('spinner', 'w-6 h-6 mx-auto')"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div x-show="!loadingOrders">
|
||||||
|
<table class="w-full text-sm">
|
||||||
|
<thead>
|
||||||
|
<tr class="text-left text-gray-500 border-b dark:border-gray-700">
|
||||||
|
<th class="pb-2">Order</th>
|
||||||
|
<th class="pb-2">Customer</th>
|
||||||
|
<th class="pb-2">Total</th>
|
||||||
|
<th class="pb-2">Status</th>
|
||||||
|
<th class="pb-2">Date</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y dark:divide-gray-700">
|
||||||
|
<template x-for="order in vendorOrders" :key="order.id">
|
||||||
|
<tr class="text-gray-700 dark:text-gray-400">
|
||||||
|
<td class="py-2" x-text="order.letzshop_order_number || order.letzshop_order_id"></td>
|
||||||
|
<td class="py-2" x-text="order.customer_email || 'N/A'"></td>
|
||||||
|
<td class="py-2" x-text="order.total_amount ? order.total_amount + ' ' + order.currency : 'N/A'"></td>
|
||||||
|
<td class="py-2">
|
||||||
|
<span
|
||||||
|
class="px-2 py-0.5 text-xs rounded-full"
|
||||||
|
:class="{
|
||||||
|
'bg-orange-100 text-orange-700': order.sync_status === 'pending',
|
||||||
|
'bg-green-100 text-green-700': order.sync_status === 'confirmed',
|
||||||
|
'bg-red-100 text-red-700': order.sync_status === 'rejected',
|
||||||
|
'bg-blue-100 text-blue-700': order.sync_status === 'shipped'
|
||||||
|
}"
|
||||||
|
x-text="order.sync_status"
|
||||||
|
></span>
|
||||||
|
</td>
|
||||||
|
<td class="py-2" x-text="formatDate(order.created_at)"></td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p x-show="vendorOrders.length === 0" class="py-4 text-center text-gray-500">No orders found</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
@@ -81,6 +81,7 @@
|
|||||||
{{ menu_item('marketplace-products', '/admin/marketplace-products', 'database', 'Marketplace Products') }}
|
{{ menu_item('marketplace-products', '/admin/marketplace-products', 'database', 'Marketplace Products') }}
|
||||||
{{ menu_item('vendor-products', '/admin/vendor-products', 'cube', 'Vendor Products') }}
|
{{ menu_item('vendor-products', '/admin/vendor-products', 'cube', 'Vendor Products') }}
|
||||||
{{ menu_item('marketplace', '/admin/marketplace', 'cloud-download', 'Import') }}
|
{{ menu_item('marketplace', '/admin/marketplace', 'cloud-download', 'Import') }}
|
||||||
|
{{ menu_item('letzshop', '/admin/letzshop', 'shopping-cart', 'Letzshop Orders') }}
|
||||||
{% endcall %}
|
{% endcall %}
|
||||||
|
|
||||||
<!-- Content Management Section -->
|
<!-- Content Management Section -->
|
||||||
|
|||||||
599
app/templates/vendor/letzshop.html
vendored
Normal file
599
app/templates/vendor/letzshop.html
vendored
Normal file
@@ -0,0 +1,599 @@
|
|||||||
|
{# app/templates/vendor/letzshop.html #}
|
||||||
|
{% extends "vendor/base.html" %}
|
||||||
|
|
||||||
|
{% block title %}Letzshop Orders{% endblock %}
|
||||||
|
|
||||||
|
{% block alpine_data %}vendorLetzshop(){% endblock %}
|
||||||
|
|
||||||
|
{% block extra_scripts %}
|
||||||
|
<script src="/static/vendor/js/letzshop.js"></script>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<!-- Page Header -->
|
||||||
|
<div class="flex items-center justify-between my-6">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
|
||||||
|
Letzshop Orders
|
||||||
|
</h2>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||||
|
Manage orders from Letzshop marketplace
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button
|
||||||
|
@click="importOrders()"
|
||||||
|
:disabled="!status.is_configured || importing"
|
||||||
|
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
<span x-show="!importing" x-html="$icon('download', 'w-4 h-4 mr-2')"></span>
|
||||||
|
<span x-show="importing" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
||||||
|
<span x-text="importing ? 'Importing...' : 'Import Orders'"></span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="refreshData()"
|
||||||
|
:disabled="loading"
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<span x-show="!loading" x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
|
||||||
|
<span x-show="loading" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
||||||
|
Refresh
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Success Message -->
|
||||||
|
<div x-show="successMessage" x-transition class="mb-6 p-4 bg-green-100 dark:bg-green-900/30 border border-green-400 dark:border-green-600 text-green-700 dark:text-green-300 rounded-lg flex items-start">
|
||||||
|
<span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
|
||||||
|
<div>
|
||||||
|
<p class="font-semibold" x-text="successMessage"></p>
|
||||||
|
</div>
|
||||||
|
<button @click="successMessage = ''" class="ml-auto text-green-700 dark:text-green-300 hover:text-green-900">
|
||||||
|
<span x-html="$icon('x', 'w-4 h-4')"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Error Message -->
|
||||||
|
<div x-show="error" x-transition class="mb-6 p-4 bg-red-100 dark:bg-red-900/30 border border-red-400 dark:border-red-600 text-red-700 dark:text-red-300 rounded-lg flex items-start">
|
||||||
|
<span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
|
||||||
|
<div>
|
||||||
|
<p class="font-semibold">Error</p>
|
||||||
|
<p class="text-sm" x-text="error"></p>
|
||||||
|
</div>
|
||||||
|
<button @click="error = ''" class="ml-auto text-red-700 dark:text-red-300 hover:text-red-900">
|
||||||
|
<span x-html="$icon('x', 'w-4 h-4')"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tabs -->
|
||||||
|
<div class="mb-6">
|
||||||
|
<div class="flex border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<button
|
||||||
|
@click="activeTab = 'orders'"
|
||||||
|
:class="activeTab === 'orders' ? 'border-purple-600 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'"
|
||||||
|
class="px-4 py-2 text-sm font-medium border-b-2 transition-colors"
|
||||||
|
>
|
||||||
|
<span class="flex items-center">
|
||||||
|
<span x-html="$icon('shopping-cart', 'w-4 h-4 mr-2')"></span>
|
||||||
|
Orders
|
||||||
|
<span x-show="orders.length > 0" class="ml-2 px-2 py-0.5 text-xs bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300 rounded-full" x-text="totalOrders"></span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="activeTab = 'settings'"
|
||||||
|
:class="activeTab === 'settings' ? 'border-purple-600 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'"
|
||||||
|
class="px-4 py-2 text-sm font-medium border-b-2 transition-colors"
|
||||||
|
>
|
||||||
|
<span class="flex items-center">
|
||||||
|
<span x-html="$icon('cog', 'w-4 h-4 mr-2')"></span>
|
||||||
|
Settings
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Orders Tab -->
|
||||||
|
<div x-show="activeTab === 'orders'" x-transition>
|
||||||
|
<!-- Status Cards -->
|
||||||
|
<div class="grid gap-6 mb-8 md:grid-cols-4">
|
||||||
|
<!-- Connection Status -->
|
||||||
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div :class="status.is_configured ? 'bg-green-100 dark:bg-green-900' : 'bg-gray-100 dark:bg-gray-700'" class="p-3 mr-4 rounded-full">
|
||||||
|
<span x-html="$icon(status.is_configured ? 'check' : 'x', status.is_configured ? 'w-5 h-5 text-green-500' : 'w-5 h-5 text-gray-400')"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Connection</p>
|
||||||
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="status.is_configured ? 'Configured' : 'Not Configured'"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pending 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-orange-500 bg-orange-100 rounded-full dark:bg-orange-900">
|
||||||
|
<span x-html="$icon('clock', 'w-5 h-5')"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Pending</p>
|
||||||
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="orderStats.pending"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Confirmed 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-2 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Shipped 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-blue-500 bg-blue-100 rounded-full dark:bg-blue-900">
|
||||||
|
<span x-html="$icon('truck', 'w-5 h-5')"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Shipped</p>
|
||||||
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="orderStats.shipped"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Filters -->
|
||||||
|
<div class="mb-4 flex flex-wrap gap-4">
|
||||||
|
<select
|
||||||
|
x-model="filters.sync_status"
|
||||||
|
@change="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>
|
||||||
|
<option value="pending">Pending</option>
|
||||||
|
<option value="confirmed">Confirmed</option>
|
||||||
|
<option value="rejected">Rejected</option>
|
||||||
|
<option value="shipped">Shipped</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Orders Table -->
|
||||||
|
<div class="w-full overflow-hidden rounded-lg shadow-xs">
|
||||||
|
<div class="w-full overflow-x-auto">
|
||||||
|
<table class="w-full whitespace-no-wrap">
|
||||||
|
<thead>
|
||||||
|
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
|
||||||
|
<th class="px-4 py-3">Order</th>
|
||||||
|
<th class="px-4 py-3">Customer</th>
|
||||||
|
<th class="px-4 py-3">Total</th>
|
||||||
|
<th class="px-4 py-3">Status</th>
|
||||||
|
<th class="px-4 py-3">Date</th>
|
||||||
|
<th class="px-4 py-3">Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
|
||||||
|
<template x-if="loading && orders.length === 0">
|
||||||
|
<tr>
|
||||||
|
<td colspan="6" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
||||||
|
<span x-html="$icon('spinner', 'w-6 h-6 mx-auto mb-2')"></span>
|
||||||
|
<p>Loading orders...</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
<template x-if="!loading && orders.length === 0">
|
||||||
|
<tr>
|
||||||
|
<td colspan="6" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
||||||
|
<span x-html="$icon('inbox', 'w-12 h-12 mx-auto mb-2 text-gray-300')"></span>
|
||||||
|
<p class="font-medium">No orders found</p>
|
||||||
|
<p class="text-sm mt-1" x-show="status.is_configured">Click "Import Orders" to fetch orders from Letzshop</p>
|
||||||
|
<p class="text-sm mt-1" x-show="!status.is_configured">Configure your API key in Settings to get started</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
<template x-for="order in orders" :key="order.id">
|
||||||
|
<tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
|
||||||
|
<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="text-xs text-gray-500" x-text="'#' + order.id"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 text-sm">
|
||||||
|
<p x-text="order.customer_email || 'N/A'"></p>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 text-sm">
|
||||||
|
<span x-text="order.total_amount ? order.total_amount + ' ' + order.currency : 'N/A'"></span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 text-xs">
|
||||||
|
<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'
|
||||||
|
}"
|
||||||
|
x-text="order.sync_status.toUpperCase()"
|
||||||
|
></span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3 text-sm">
|
||||||
|
<span x-text="formatDate(order.created_at)"></span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<div class="flex items-center space-x-2 text-sm">
|
||||||
|
<button
|
||||||
|
x-show="order.sync_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"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('check', 'w-4 h-4')"></span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
x-show="order.sync_status === 'pending'"
|
||||||
|
@click="rejectOrder(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="Reject Order"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('x', 'w-4 h-4')"></span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
x-show="order.sync_status === 'confirmed'"
|
||||||
|
@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"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('truck', 'w-4 h-4')"></span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="viewOrderDetails(order)"
|
||||||
|
class="flex items-center justify-center px-2 py-1 text-sm text-gray-600 transition-colors duration-150 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||||
|
title="View Details"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('eye', 'w-4 h-4')"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<!-- Pagination -->
|
||||||
|
<div x-show="totalOrders > limit" class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800">
|
||||||
|
<span class="flex items-center col-span-3">
|
||||||
|
Showing <span x-text="((page - 1) * limit) + 1"></span>-<span x-text="Math.min(page * limit, totalOrders)"></span> of <span x-text="totalOrders"></span>
|
||||||
|
</span>
|
||||||
|
<span class="col-span-2"></span>
|
||||||
|
<span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
|
||||||
|
<nav aria-label="Table navigation">
|
||||||
|
<ul class="inline-flex items-center">
|
||||||
|
<li>
|
||||||
|
<button
|
||||||
|
@click="page--; loadOrders()"
|
||||||
|
:disabled="page <= 1"
|
||||||
|
class="px-3 py-1 rounded-md rounded-l-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('chevron-left', 'w-4 h-4')"></span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<button
|
||||||
|
@click="page++; loadOrders()"
|
||||||
|
:disabled="page * limit >= totalOrders"
|
||||||
|
class="px-3 py-1 rounded-md rounded-r-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('chevron-right', 'w-4 h-4')"></span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Settings Tab -->
|
||||||
|
<div x-show="activeTab === 'settings'" x-transition>
|
||||||
|
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||||
|
Letzshop API Configuration
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<form @submit.prevent="saveCredentials()">
|
||||||
|
<div class="grid gap-6 mb-6 md:grid-cols-2">
|
||||||
|
<!-- API Key -->
|
||||||
|
<div class="md:col-span-2">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||||
|
API Key <span class="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input
|
||||||
|
:type="showApiKey ? 'text' : 'password'"
|
||||||
|
x-model="credentialsForm.api_key"
|
||||||
|
:placeholder="credentials ? credentials.api_key_masked : 'Enter your Letzshop API key'"
|
||||||
|
class="block w-full px-3 py-2 pr-10 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 focus:shadow-outline-purple"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
@click="showApiKey = !showApiKey"
|
||||||
|
class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600"
|
||||||
|
>
|
||||||
|
<span x-html="$icon(showApiKey ? 'eye-off' : 'eye', 'w-4 h-4')"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||||
|
Get your API key from the Letzshop merchant portal
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Auto Sync -->
|
||||||
|
<div>
|
||||||
|
<label class="flex items-center cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
x-model="credentialsForm.auto_sync_enabled"
|
||||||
|
class="form-checkbox h-5 w-5 text-purple-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:ring-purple-500"
|
||||||
|
/>
|
||||||
|
<span class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-400">Enable Auto-Sync</span>
|
||||||
|
</label>
|
||||||
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400 ml-8">
|
||||||
|
Automatically import new orders periodically
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sync Interval -->
|
||||||
|
<div x-show="credentialsForm.auto_sync_enabled">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||||
|
Sync Interval (minutes)
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
x-model="credentialsForm.sync_interval_minutes"
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<option value="15">Every 15 minutes</option>
|
||||||
|
<option value="30">Every 30 minutes</option>
|
||||||
|
<option value="60">Every hour</option>
|
||||||
|
<option value="120">Every 2 hours</option>
|
||||||
|
<option value="360">Every 6 hours</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Last Sync Info -->
|
||||||
|
<div x-show="credentials" class="mb-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
||||||
|
<h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Last Sync</h4>
|
||||||
|
<div class="grid gap-2 text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
<p>
|
||||||
|
<span class="font-medium">Status:</span>
|
||||||
|
<span
|
||||||
|
class="ml-2 px-2 py-0.5 text-xs rounded-full"
|
||||||
|
:class="{
|
||||||
|
'bg-green-100 text-green-700': credentials?.last_sync_status === 'success',
|
||||||
|
'bg-yellow-100 text-yellow-700': credentials?.last_sync_status === 'partial',
|
||||||
|
'bg-red-100 text-red-700': credentials?.last_sync_status === 'failed',
|
||||||
|
'bg-gray-100 text-gray-700': !credentials?.last_sync_status
|
||||||
|
}"
|
||||||
|
x-text="credentials?.last_sync_status || 'Never'"
|
||||||
|
></span>
|
||||||
|
</p>
|
||||||
|
<p x-show="credentials?.last_sync_at">
|
||||||
|
<span class="font-medium">Time:</span>
|
||||||
|
<span x-text="formatDate(credentials?.last_sync_at)"></span>
|
||||||
|
</p>
|
||||||
|
<p x-show="credentials?.last_sync_error" class="text-red-600">
|
||||||
|
<span class="font-medium">Error:</span>
|
||||||
|
<span x-text="credentials?.last_sync_error"></span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Action Buttons -->
|
||||||
|
<div class="flex flex-wrap gap-3">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
:disabled="saving"
|
||||||
|
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<span x-show="!saving" x-html="$icon('save', 'w-4 h-4 mr-2')"></span>
|
||||||
|
<span x-show="saving" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
||||||
|
<span x-text="saving ? 'Saving...' : 'Save Credentials'"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
@click="testConnection()"
|
||||||
|
:disabled="testing || !status.is_configured"
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<span x-show="!testing" x-html="$icon('lightning-bolt', 'w-4 h-4 mr-2')"></span>
|
||||||
|
<span x-show="testing" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
||||||
|
<span x-text="testing ? 'Testing...' : 'Test Connection'"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
x-show="credentials"
|
||||||
|
@click="deleteCredentials()"
|
||||||
|
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-red-600 transition-colors duration-150 bg-white dark:bg-gray-800 border border-red-300 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 focus:outline-none"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('trash', 'w-4 h-4 mr-2')"></span>
|
||||||
|
Remove
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tracking Modal -->
|
||||||
|
<div
|
||||||
|
x-show="showTrackingModal"
|
||||||
|
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-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
|
||||||
|
@click.self="showTrackingModal = false"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
x-transition:enter="transition ease-out duration-150"
|
||||||
|
x-transition:enter-start="opacity-0 transform translate-y-1/2"
|
||||||
|
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 transform translate-y-1/2"
|
||||||
|
class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-md"
|
||||||
|
@click.stop
|
||||||
|
>
|
||||||
|
<header class="flex justify-between items-center mb-4">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Set Tracking Information</h3>
|
||||||
|
<button @click="showTrackingModal = false" class="text-gray-400 hover:text-gray-600">
|
||||||
|
<span x-html="$icon('x', 'w-5 h-5')"></span>
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<form @submit.prevent="submitTracking()">
|
||||||
|
<div class="mb-4">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||||
|
Tracking Number <span class="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
x-model="trackingForm.tracking_number"
|
||||||
|
required
|
||||||
|
placeholder="1Z999AA10123456784"
|
||||||
|
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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-6">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||||
|
Carrier <span class="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
x-model="trackingForm.tracking_carrier"
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<option value="">Select carrier...</option>
|
||||||
|
<option value="dhl">DHL</option>
|
||||||
|
<option value="ups">UPS</option>
|
||||||
|
<option value="fedex">FedEx</option>
|
||||||
|
<option value="post_lu">Post Luxembourg</option>
|
||||||
|
<option value="dpd">DPD</option>
|
||||||
|
<option value="gls">GLS</option>
|
||||||
|
<option value="other">Other</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-end gap-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
@click="showTrackingModal = false"
|
||||||
|
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
:disabled="submittingTracking"
|
||||||
|
class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<span x-show="submittingTracking" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
||||||
|
<span x-text="submittingTracking ? 'Saving...' : 'Save Tracking'"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Order Details Modal -->
|
||||||
|
<div
|
||||||
|
x-show="showOrderModal"
|
||||||
|
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-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
|
||||||
|
@click.self="showOrderModal = false"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
x-transition:enter="transition ease-out duration-150"
|
||||||
|
x-transition:enter-start="opacity-0 transform translate-y-1/2"
|
||||||
|
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 transform translate-y-1/2"
|
||||||
|
class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-2xl max-h-[80vh] overflow-y-auto"
|
||||||
|
@click.stop
|
||||||
|
>
|
||||||
|
<header class="flex justify-between items-center mb-4">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Order Details</h3>
|
||||||
|
<button @click="showOrderModal = false" class="text-gray-400 hover:text-gray-600">
|
||||||
|
<span x-html="$icon('x', 'w-5 h-5')"></span>
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div x-show="selectedOrder" class="space-y-4">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="font-medium text-gray-600 dark:text-gray-400">Status:</span>
|
||||||
|
<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'
|
||||||
|
}"
|
||||||
|
x-text="selectedOrder?.sync_status?.toUpperCase()"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="font-medium text-gray-600 dark:text-gray-400">Customer:</span>
|
||||||
|
<span class="ml-2 text-gray-700 dark:text-gray-300" x-text="selectedOrder?.customer_email"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="font-medium text-gray-600 dark:text-gray-400">Total:</span>
|
||||||
|
<span class="ml-2 text-gray-700 dark:text-gray-300" x-text="selectedOrder?.total_amount + ' ' + selectedOrder?.currency"></span>
|
||||||
|
</div>
|
||||||
|
<div x-show="selectedOrder?.tracking_number">
|
||||||
|
<span class="font-medium text-gray-600 dark:text-gray-400">Tracking:</span>
|
||||||
|
<span class="ml-2 text-gray-700 dark:text-gray-300" x-text="selectedOrder?.tracking_number + ' (' + selectedOrder?.tracking_carrier + ')'"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="font-medium text-gray-600 dark:text-gray-400">Created:</span>
|
||||||
|
<span class="ml-2 text-gray-700 dark:text-gray-300" x-text="formatDate(selectedOrder?.created_at)"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div x-show="selectedOrder?.inventory_units?.length > 0">
|
||||||
|
<h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Items</h4>
|
||||||
|
<div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
|
||||||
|
<template x-for="unit in selectedOrder?.inventory_units || []" :key="unit.id">
|
||||||
|
<div class="flex justify-between text-sm py-1 border-b border-gray-200 dark:border-gray-600 last:border-0">
|
||||||
|
<span class="text-gray-600 dark:text-gray-400" x-text="unit.id"></span>
|
||||||
|
<span
|
||||||
|
class="px-2 py-0.5 text-xs rounded-full"
|
||||||
|
:class="unit.state === 'confirmed' ? 'bg-green-100 text-green-700' : 'bg-orange-100 text-orange-700'"
|
||||||
|
x-text="unit.state"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
11
app/templates/vendor/partials/sidebar.html
vendored
11
app/templates/vendor/partials/sidebar.html
vendored
@@ -95,6 +95,17 @@ Follows same pattern as admin sidebar
|
|||||||
<span class="ml-4">Orders</span>
|
<span class="ml-4">Orders</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
<li class="relative px-6 py-3">
|
||||||
|
<span x-show="currentPage === 'letzshop'"
|
||||||
|
class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
|
||||||
|
aria-hidden="true"></span>
|
||||||
|
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
|
||||||
|
:class="currentPage === 'letzshop' ? 'text-gray-800 dark:text-gray-100' : ''"
|
||||||
|
:href="`/vendor/${vendorCode}/letzshop`">
|
||||||
|
<span x-html="$icon('external-link', 'w-5 h-5')"></span>
|
||||||
|
<span class="ml-4">Letzshop Orders</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
<li class="relative px-6 py-3">
|
<li class="relative px-6 py-3">
|
||||||
<span x-show="currentPage === 'customers'"
|
<span x-show="currentPage === 'customers'"
|
||||||
class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
|
class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
|
||||||
|
|||||||
276
static/admin/js/letzshop.js
Normal file
276
static/admin/js/letzshop.js
Normal file
@@ -0,0 +1,276 @@
|
|||||||
|
// static/admin/js/letzshop.js
|
||||||
|
/**
|
||||||
|
* Admin Letzshop management page logic
|
||||||
|
*/
|
||||||
|
|
||||||
|
console.log('[ADMIN LETZSHOP] Loading...');
|
||||||
|
|
||||||
|
function adminLetzshop() {
|
||||||
|
console.log('[ADMIN LETZSHOP] adminLetzshop() called');
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Inherit base layout state
|
||||||
|
...data(),
|
||||||
|
|
||||||
|
// Set page identifier
|
||||||
|
currentPage: 'letzshop',
|
||||||
|
|
||||||
|
// Loading states
|
||||||
|
loading: false,
|
||||||
|
savingConfig: false,
|
||||||
|
loadingOrders: false,
|
||||||
|
|
||||||
|
// Messages
|
||||||
|
error: '',
|
||||||
|
successMessage: '',
|
||||||
|
|
||||||
|
// Vendors data
|
||||||
|
vendors: [],
|
||||||
|
totalVendors: 0,
|
||||||
|
page: 1,
|
||||||
|
limit: 50,
|
||||||
|
|
||||||
|
// Filters
|
||||||
|
filters: {
|
||||||
|
configuredOnly: false
|
||||||
|
},
|
||||||
|
|
||||||
|
// Stats
|
||||||
|
stats: {
|
||||||
|
total: 0,
|
||||||
|
configured: 0,
|
||||||
|
autoSync: 0,
|
||||||
|
pendingOrders: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
// Configuration modal
|
||||||
|
showConfigModal: false,
|
||||||
|
selectedVendor: null,
|
||||||
|
vendorCredentials: null,
|
||||||
|
configForm: {
|
||||||
|
api_key: '',
|
||||||
|
auto_sync_enabled: false,
|
||||||
|
sync_interval_minutes: 15
|
||||||
|
},
|
||||||
|
showApiKey: false,
|
||||||
|
|
||||||
|
// Orders modal
|
||||||
|
showOrdersModal: false,
|
||||||
|
vendorOrders: [],
|
||||||
|
|
||||||
|
async init() {
|
||||||
|
// Guard against multiple initialization
|
||||||
|
if (window._adminLetzshopInitialized) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
window._adminLetzshopInitialized = true;
|
||||||
|
|
||||||
|
console.log('[ADMIN LETZSHOP] Initializing...');
|
||||||
|
await this.loadVendors();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load vendors with Letzshop status
|
||||||
|
*/
|
||||||
|
async loadVendors() {
|
||||||
|
this.loading = true;
|
||||||
|
this.error = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const params = new URLSearchParams({
|
||||||
|
skip: ((this.page - 1) * this.limit).toString(),
|
||||||
|
limit: this.limit.toString(),
|
||||||
|
configured_only: this.filters.configuredOnly.toString()
|
||||||
|
});
|
||||||
|
|
||||||
|
const response = await apiClient.get(`/admin/letzshop/vendors?${params}`);
|
||||||
|
this.vendors = response.vendors || [];
|
||||||
|
this.totalVendors = response.total || 0;
|
||||||
|
|
||||||
|
// Calculate stats
|
||||||
|
this.stats.total = this.totalVendors;
|
||||||
|
this.stats.configured = this.vendors.filter(v => v.is_configured).length;
|
||||||
|
this.stats.autoSync = this.vendors.filter(v => v.auto_sync_enabled).length;
|
||||||
|
this.stats.pendingOrders = this.vendors.reduce((sum, v) => sum + (v.pending_orders || 0), 0);
|
||||||
|
|
||||||
|
console.log('[ADMIN LETZSHOP] Loaded vendors:', this.vendors.length);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[ADMIN LETZSHOP] Failed to load vendors:', error);
|
||||||
|
this.error = error.message || 'Failed to load vendors';
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Refresh all data
|
||||||
|
*/
|
||||||
|
async refreshData() {
|
||||||
|
await this.loadVendors();
|
||||||
|
this.successMessage = 'Data refreshed';
|
||||||
|
setTimeout(() => this.successMessage = '', 3000);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Open configuration modal for a vendor
|
||||||
|
*/
|
||||||
|
async openConfigModal(vendor) {
|
||||||
|
this.selectedVendor = vendor;
|
||||||
|
this.vendorCredentials = null;
|
||||||
|
this.configForm = {
|
||||||
|
api_key: '',
|
||||||
|
auto_sync_enabled: vendor.auto_sync_enabled || false,
|
||||||
|
sync_interval_minutes: 15
|
||||||
|
};
|
||||||
|
this.showApiKey = false;
|
||||||
|
this.showConfigModal = true;
|
||||||
|
|
||||||
|
// Load existing credentials if configured
|
||||||
|
if (vendor.is_configured) {
|
||||||
|
try {
|
||||||
|
const response = await apiClient.get(`/admin/letzshop/vendors/${vendor.vendor_id}/credentials`);
|
||||||
|
this.vendorCredentials = response;
|
||||||
|
this.configForm.auto_sync_enabled = response.auto_sync_enabled;
|
||||||
|
this.configForm.sync_interval_minutes = response.sync_interval_minutes || 15;
|
||||||
|
} catch (error) {
|
||||||
|
if (error.status !== 404) {
|
||||||
|
console.error('[ADMIN LETZSHOP] Failed to load credentials:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Save vendor configuration
|
||||||
|
*/
|
||||||
|
async saveVendorConfig() {
|
||||||
|
if (!this.configForm.api_key && !this.vendorCredentials) {
|
||||||
|
this.error = 'Please enter an API key';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.savingConfig = true;
|
||||||
|
this.error = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const payload = {
|
||||||
|
auto_sync_enabled: this.configForm.auto_sync_enabled,
|
||||||
|
sync_interval_minutes: parseInt(this.configForm.sync_interval_minutes)
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.configForm.api_key) {
|
||||||
|
payload.api_key = this.configForm.api_key;
|
||||||
|
}
|
||||||
|
|
||||||
|
await apiClient.post(
|
||||||
|
`/admin/letzshop/vendors/${this.selectedVendor.vendor_id}/credentials`,
|
||||||
|
payload
|
||||||
|
);
|
||||||
|
|
||||||
|
this.showConfigModal = false;
|
||||||
|
this.successMessage = 'Configuration saved successfully';
|
||||||
|
await this.loadVendors();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[ADMIN LETZSHOP] Failed to save config:', error);
|
||||||
|
this.error = error.message || 'Failed to save configuration';
|
||||||
|
} finally {
|
||||||
|
this.savingConfig = false;
|
||||||
|
setTimeout(() => this.successMessage = '', 5000);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Delete vendor configuration
|
||||||
|
*/
|
||||||
|
async deleteVendorConfig() {
|
||||||
|
if (!confirm('Are you sure you want to remove Letzshop configuration for this vendor?')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await apiClient.delete(`/admin/letzshop/vendors/${this.selectedVendor.vendor_id}/credentials`);
|
||||||
|
this.showConfigModal = false;
|
||||||
|
this.successMessage = 'Configuration removed';
|
||||||
|
await this.loadVendors();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[ADMIN LETZSHOP] Failed to delete config:', error);
|
||||||
|
this.error = error.message || 'Failed to remove configuration';
|
||||||
|
}
|
||||||
|
setTimeout(() => this.successMessage = '', 5000);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Test connection for a vendor
|
||||||
|
*/
|
||||||
|
async testConnection(vendor) {
|
||||||
|
this.error = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await apiClient.post(`/admin/letzshop/vendors/${vendor.vendor_id}/test`);
|
||||||
|
|
||||||
|
if (response.success) {
|
||||||
|
this.successMessage = `Connection successful for ${vendor.vendor_name} (${response.response_time_ms?.toFixed(0)}ms)`;
|
||||||
|
} else {
|
||||||
|
this.error = response.error_details || 'Connection failed';
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[ADMIN LETZSHOP] Connection test failed:', error);
|
||||||
|
this.error = error.message || 'Connection test failed';
|
||||||
|
}
|
||||||
|
setTimeout(() => this.successMessage = '', 5000);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Trigger sync for a vendor
|
||||||
|
*/
|
||||||
|
async triggerSync(vendor) {
|
||||||
|
this.error = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await apiClient.post(`/admin/letzshop/vendors/${vendor.vendor_id}/sync`);
|
||||||
|
|
||||||
|
if (response.success) {
|
||||||
|
this.successMessage = response.message || 'Sync completed';
|
||||||
|
await this.loadVendors();
|
||||||
|
} else {
|
||||||
|
this.error = response.message || 'Sync failed';
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[ADMIN LETZSHOP] Sync failed:', error);
|
||||||
|
this.error = error.message || 'Sync failed';
|
||||||
|
}
|
||||||
|
setTimeout(() => this.successMessage = '', 5000);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* View orders for a vendor
|
||||||
|
*/
|
||||||
|
async viewOrders(vendor) {
|
||||||
|
this.selectedVendor = vendor;
|
||||||
|
this.vendorOrders = [];
|
||||||
|
this.loadingOrders = true;
|
||||||
|
this.showOrdersModal = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await apiClient.get(`/admin/letzshop/vendors/${vendor.vendor_id}/orders?limit=100`);
|
||||||
|
this.vendorOrders = response.orders || [];
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[ADMIN LETZSHOP] Failed to load orders:', error);
|
||||||
|
this.error = error.message || 'Failed to load orders';
|
||||||
|
} finally {
|
||||||
|
this.loadingOrders = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format date for display
|
||||||
|
*/
|
||||||
|
formatDate(dateStr) {
|
||||||
|
if (!dateStr) return 'N/A';
|
||||||
|
const date = new Date(dateStr);
|
||||||
|
return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('[ADMIN LETZSHOP] Module loaded');
|
||||||
415
static/vendor/js/letzshop.js
vendored
Normal file
415
static/vendor/js/letzshop.js
vendored
Normal file
@@ -0,0 +1,415 @@
|
|||||||
|
// static/vendor/js/letzshop.js
|
||||||
|
/**
|
||||||
|
* Vendor Letzshop orders management page logic
|
||||||
|
*/
|
||||||
|
|
||||||
|
console.log('[VENDOR LETZSHOP] Loading...');
|
||||||
|
|
||||||
|
function vendorLetzshop() {
|
||||||
|
console.log('[VENDOR LETZSHOP] vendorLetzshop() called');
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Inherit base layout state
|
||||||
|
...data(),
|
||||||
|
|
||||||
|
// Set page identifier
|
||||||
|
currentPage: 'letzshop',
|
||||||
|
|
||||||
|
// Tab state
|
||||||
|
activeTab: 'orders',
|
||||||
|
|
||||||
|
// Loading states
|
||||||
|
loading: false,
|
||||||
|
importing: false,
|
||||||
|
saving: false,
|
||||||
|
testing: false,
|
||||||
|
submittingTracking: false,
|
||||||
|
|
||||||
|
// Messages
|
||||||
|
error: '',
|
||||||
|
successMessage: '',
|
||||||
|
|
||||||
|
// Integration status
|
||||||
|
status: {
|
||||||
|
is_configured: false,
|
||||||
|
is_connected: false,
|
||||||
|
auto_sync_enabled: false,
|
||||||
|
last_sync_at: null,
|
||||||
|
last_sync_status: null
|
||||||
|
},
|
||||||
|
|
||||||
|
// Credentials
|
||||||
|
credentials: null,
|
||||||
|
credentialsForm: {
|
||||||
|
api_key: '',
|
||||||
|
auto_sync_enabled: false,
|
||||||
|
sync_interval_minutes: 15
|
||||||
|
},
|
||||||
|
showApiKey: false,
|
||||||
|
|
||||||
|
// Orders
|
||||||
|
orders: [],
|
||||||
|
totalOrders: 0,
|
||||||
|
page: 1,
|
||||||
|
limit: 20,
|
||||||
|
filters: {
|
||||||
|
sync_status: ''
|
||||||
|
},
|
||||||
|
|
||||||
|
// Order stats
|
||||||
|
orderStats: {
|
||||||
|
pending: 0,
|
||||||
|
confirmed: 0,
|
||||||
|
rejected: 0,
|
||||||
|
shipped: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
// Modals
|
||||||
|
showTrackingModal: false,
|
||||||
|
showOrderModal: false,
|
||||||
|
selectedOrder: null,
|
||||||
|
trackingForm: {
|
||||||
|
tracking_number: '',
|
||||||
|
tracking_carrier: ''
|
||||||
|
},
|
||||||
|
|
||||||
|
async init() {
|
||||||
|
// Guard against multiple initialization
|
||||||
|
if (window._vendorLetzshopInitialized) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
window._vendorLetzshopInitialized = true;
|
||||||
|
|
||||||
|
// Call parent init first to set vendorCode from URL
|
||||||
|
const parentInit = data().init;
|
||||||
|
if (parentInit) {
|
||||||
|
await parentInit.call(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
await this.loadStatus();
|
||||||
|
await this.loadOrders();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load integration status
|
||||||
|
*/
|
||||||
|
async loadStatus() {
|
||||||
|
try {
|
||||||
|
const response = await apiClient.get('/vendor/letzshop/status');
|
||||||
|
this.status = response;
|
||||||
|
|
||||||
|
if (this.status.is_configured) {
|
||||||
|
await this.loadCredentials();
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[VENDOR LETZSHOP] Failed to load status:', error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load credentials (masked)
|
||||||
|
*/
|
||||||
|
async loadCredentials() {
|
||||||
|
try {
|
||||||
|
const response = await apiClient.get('/vendor/letzshop/credentials');
|
||||||
|
this.credentials = response;
|
||||||
|
this.credentialsForm.auto_sync_enabled = response.auto_sync_enabled;
|
||||||
|
this.credentialsForm.sync_interval_minutes = response.sync_interval_minutes;
|
||||||
|
} catch (error) {
|
||||||
|
// 404 means not configured, which is fine
|
||||||
|
if (error.status !== 404) {
|
||||||
|
console.error('[VENDOR LETZSHOP] Failed to load credentials:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load orders
|
||||||
|
*/
|
||||||
|
async loadOrders() {
|
||||||
|
this.loading = true;
|
||||||
|
this.error = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const params = new URLSearchParams({
|
||||||
|
skip: ((this.page - 1) * this.limit).toString(),
|
||||||
|
limit: this.limit.toString()
|
||||||
|
});
|
||||||
|
|
||||||
|
if (this.filters.sync_status) {
|
||||||
|
params.append('sync_status', this.filters.sync_status);
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await apiClient.get(`/vendor/letzshop/orders?${params}`);
|
||||||
|
this.orders = response.orders;
|
||||||
|
this.totalOrders = response.total;
|
||||||
|
|
||||||
|
// Calculate stats
|
||||||
|
await this.loadOrderStats();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[VENDOR LETZSHOP] Failed to load orders:', error);
|
||||||
|
this.error = error.message || 'Failed to load orders';
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load order stats by fetching counts for each status
|
||||||
|
*/
|
||||||
|
async loadOrderStats() {
|
||||||
|
try {
|
||||||
|
// Get all orders without filter to calculate stats
|
||||||
|
const allResponse = await apiClient.get('/vendor/letzshop/orders?limit=1000');
|
||||||
|
const allOrders = allResponse.orders || [];
|
||||||
|
|
||||||
|
this.orderStats = {
|
||||||
|
pending: allOrders.filter(o => o.sync_status === 'pending').length,
|
||||||
|
confirmed: allOrders.filter(o => o.sync_status === 'confirmed').length,
|
||||||
|
rejected: allOrders.filter(o => o.sync_status === 'rejected').length,
|
||||||
|
shipped: allOrders.filter(o => o.sync_status === 'shipped').length
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[VENDOR LETZSHOP] Failed to load order stats:', error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Refresh all data
|
||||||
|
*/
|
||||||
|
async refreshData() {
|
||||||
|
await this.loadStatus();
|
||||||
|
await this.loadOrders();
|
||||||
|
this.successMessage = 'Data refreshed';
|
||||||
|
setTimeout(() => this.successMessage = '', 3000);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Import orders from Letzshop
|
||||||
|
*/
|
||||||
|
async importOrders() {
|
||||||
|
if (!this.status.is_configured) {
|
||||||
|
this.error = 'Please configure your API key first';
|
||||||
|
this.activeTab = 'settings';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.importing = true;
|
||||||
|
this.error = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await apiClient.post('/vendor/letzshop/orders/import', {
|
||||||
|
operation: 'order_import'
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.success) {
|
||||||
|
this.successMessage = response.message;
|
||||||
|
await this.loadOrders();
|
||||||
|
} else {
|
||||||
|
this.error = response.message || 'Import failed';
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[VENDOR LETZSHOP] Import failed:', error);
|
||||||
|
this.error = error.message || 'Failed to import orders';
|
||||||
|
} finally {
|
||||||
|
this.importing = false;
|
||||||
|
setTimeout(() => this.successMessage = '', 5000);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Save credentials
|
||||||
|
*/
|
||||||
|
async saveCredentials() {
|
||||||
|
if (!this.credentialsForm.api_key && !this.credentials) {
|
||||||
|
this.error = 'Please enter an API key';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.saving = true;
|
||||||
|
this.error = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const payload = {
|
||||||
|
auto_sync_enabled: this.credentialsForm.auto_sync_enabled,
|
||||||
|
sync_interval_minutes: parseInt(this.credentialsForm.sync_interval_minutes)
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.credentialsForm.api_key) {
|
||||||
|
payload.api_key = this.credentialsForm.api_key;
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await apiClient.post('/vendor/letzshop/credentials', payload);
|
||||||
|
this.credentials = response;
|
||||||
|
this.credentialsForm.api_key = '';
|
||||||
|
this.status.is_configured = true;
|
||||||
|
this.successMessage = 'Credentials saved successfully';
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[VENDOR LETZSHOP] Failed to save credentials:', error);
|
||||||
|
this.error = error.message || 'Failed to save credentials';
|
||||||
|
} finally {
|
||||||
|
this.saving = false;
|
||||||
|
setTimeout(() => this.successMessage = '', 5000);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Test connection
|
||||||
|
*/
|
||||||
|
async testConnection() {
|
||||||
|
this.testing = true;
|
||||||
|
this.error = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await apiClient.post('/vendor/letzshop/test');
|
||||||
|
|
||||||
|
if (response.success) {
|
||||||
|
this.successMessage = `Connection successful (${response.response_time_ms?.toFixed(0)}ms)`;
|
||||||
|
} else {
|
||||||
|
this.error = response.error_details || 'Connection failed';
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[VENDOR LETZSHOP] Connection test failed:', error);
|
||||||
|
this.error = error.message || 'Connection test failed';
|
||||||
|
} finally {
|
||||||
|
this.testing = false;
|
||||||
|
setTimeout(() => this.successMessage = '', 5000);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Delete credentials
|
||||||
|
*/
|
||||||
|
async deleteCredentials() {
|
||||||
|
if (!confirm('Are you sure you want to remove your Letzshop credentials?')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await apiClient.delete('/vendor/letzshop/credentials');
|
||||||
|
this.credentials = null;
|
||||||
|
this.status.is_configured = false;
|
||||||
|
this.credentialsForm = {
|
||||||
|
api_key: '',
|
||||||
|
auto_sync_enabled: false,
|
||||||
|
sync_interval_minutes: 15
|
||||||
|
};
|
||||||
|
this.successMessage = 'Credentials removed';
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[VENDOR LETZSHOP] Failed to delete credentials:', error);
|
||||||
|
this.error = error.message || 'Failed to remove credentials';
|
||||||
|
}
|
||||||
|
setTimeout(() => this.successMessage = '', 5000);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Confirm order
|
||||||
|
*/
|
||||||
|
async confirmOrder(order) {
|
||||||
|
if (!confirm('Confirm this order?')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await apiClient.post(`/vendor/letzshop/orders/${order.id}/confirm`);
|
||||||
|
|
||||||
|
if (response.success) {
|
||||||
|
this.successMessage = 'Order confirmed';
|
||||||
|
await this.loadOrders();
|
||||||
|
} else {
|
||||||
|
this.error = response.message || 'Failed to confirm order';
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[VENDOR LETZSHOP] Failed to confirm order:', error);
|
||||||
|
this.error = error.message || 'Failed to confirm order';
|
||||||
|
}
|
||||||
|
setTimeout(() => this.successMessage = '', 5000);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reject order
|
||||||
|
*/
|
||||||
|
async rejectOrder(order) {
|
||||||
|
if (!confirm('Reject this order? This action cannot be undone.')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await apiClient.post(`/vendor/letzshop/orders/${order.id}/reject`);
|
||||||
|
|
||||||
|
if (response.success) {
|
||||||
|
this.successMessage = 'Order rejected';
|
||||||
|
await this.loadOrders();
|
||||||
|
} else {
|
||||||
|
this.error = response.message || 'Failed to reject order';
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[VENDOR LETZSHOP] Failed to reject order:', error);
|
||||||
|
this.error = error.message || 'Failed to reject order';
|
||||||
|
}
|
||||||
|
setTimeout(() => this.successMessage = '', 5000);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Open tracking modal
|
||||||
|
*/
|
||||||
|
openTrackingModal(order) {
|
||||||
|
this.selectedOrder = order;
|
||||||
|
this.trackingForm = {
|
||||||
|
tracking_number: order.tracking_number || '',
|
||||||
|
tracking_carrier: order.tracking_carrier || ''
|
||||||
|
};
|
||||||
|
this.showTrackingModal = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Submit tracking
|
||||||
|
*/
|
||||||
|
async submitTracking() {
|
||||||
|
if (!this.trackingForm.tracking_number || !this.trackingForm.tracking_carrier) {
|
||||||
|
this.error = 'Please fill in all fields';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.submittingTracking = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await apiClient.post(
|
||||||
|
`/vendor/letzshop/orders/${this.selectedOrder.id}/tracking`,
|
||||||
|
this.trackingForm
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.success) {
|
||||||
|
this.showTrackingModal = false;
|
||||||
|
this.successMessage = 'Tracking information saved';
|
||||||
|
await this.loadOrders();
|
||||||
|
} else {
|
||||||
|
this.error = response.message || 'Failed to save tracking';
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[VENDOR LETZSHOP] Failed to set tracking:', error);
|
||||||
|
this.error = error.message || 'Failed to save tracking';
|
||||||
|
} finally {
|
||||||
|
this.submittingTracking = false;
|
||||||
|
}
|
||||||
|
setTimeout(() => this.successMessage = '', 5000);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* View order details
|
||||||
|
*/
|
||||||
|
viewOrderDetails(order) {
|
||||||
|
this.selectedOrder = order;
|
||||||
|
this.showOrderModal = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format date for display
|
||||||
|
*/
|
||||||
|
formatDate(dateStr) {
|
||||||
|
if (!dateStr) return 'N/A';
|
||||||
|
const date = new Date(dateStr);
|
||||||
|
return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user