feat: add vendor order detail page with invoice integration
- Add new route /vendor/{code}/orders/{order_id} for order details
- Create order-detail.html template with:
- Order summary with status and totals
- Order items with per-item shipment status and ship buttons
- Customer and shipping address display
- Invoice section (create invoice or view existing)
- Quick actions (confirm, ship all, mark delivered, cancel)
- Status update modal with tracking info fields
- Ship all modal for bulk shipment with tracking
- Create order-detail.js with full functionality:
- Load order details, shipment status, and linked invoice
- Individual item shipping with partial shipment support
- Ship all remaining items with tracking info
- Create invoice from order
- Download invoice PDF
- Status management with automatic shipment handling
- Update orders list to navigate to detail page instead of modal
- Add partially_shipped status (orange) to orders list
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -243,6 +243,40 @@ async def vendor_orders_page(
|
|||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
|
@router.get(
|
||||||
|
"/{vendor_code}/orders/{order_id}",
|
||||||
|
response_class=HTMLResponse,
|
||||||
|
include_in_schema=False,
|
||||||
|
)
|
||||||
|
async def vendor_order_detail_page(
|
||||||
|
request: Request,
|
||||||
|
vendor_code: str = Path(..., description="Vendor code"),
|
||||||
|
order_id: int = Path(..., description="Order ID"),
|
||||||
|
current_user: User = Depends(get_current_vendor_from_cookie_or_header),
|
||||||
|
):
|
||||||
|
"""
|
||||||
|
Render order detail page.
|
||||||
|
|
||||||
|
Shows comprehensive order information including:
|
||||||
|
- Order header and status
|
||||||
|
- Customer and shipping details
|
||||||
|
- Order items with shipment status
|
||||||
|
- Invoice creation/viewing
|
||||||
|
- Partial shipment controls
|
||||||
|
|
||||||
|
JavaScript loads order details via API.
|
||||||
|
"""
|
||||||
|
return templates.TemplateResponse(
|
||||||
|
"vendor/order-detail.html",
|
||||||
|
{
|
||||||
|
"request": request,
|
||||||
|
"user": current_user,
|
||||||
|
"vendor_code": vendor_code,
|
||||||
|
"order_id": order_id,
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
# ============================================================================
|
# ============================================================================
|
||||||
# CUSTOMER MANAGEMENT
|
# CUSTOMER MANAGEMENT
|
||||||
# ============================================================================
|
# ============================================================================
|
||||||
|
|||||||
451
app/templates/vendor/order-detail.html
vendored
Normal file
451
app/templates/vendor/order-detail.html
vendored
Normal file
@@ -0,0 +1,451 @@
|
|||||||
|
{# app/templates/vendor/order-detail.html #}
|
||||||
|
{% extends "vendor/base.html" %}
|
||||||
|
{% from 'shared/macros/headers.html' import page_header_flex %}
|
||||||
|
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
||||||
|
{% from 'shared/macros/modals.html' import modal_simple %}
|
||||||
|
|
||||||
|
{% block title %}Order Details{% endblock %}
|
||||||
|
|
||||||
|
{% block alpine_data %}vendorOrderDetail(){% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<!-- Back Button and Header -->
|
||||||
|
<div class="mb-6">
|
||||||
|
<a :href="`/vendor/${vendorCode}/orders`"
|
||||||
|
class="inline-flex items-center text-sm text-gray-600 hover:text-purple-600 dark:text-gray-400 dark:hover:text-purple-400 mb-4">
|
||||||
|
<span x-html="$icon('arrow-left', 'w-4 h-4 mr-1')"></span>
|
||||||
|
Back to Orders
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% call page_header_flex(title='Order Details', subtitle='View and manage order') %}
|
||||||
|
<div class="flex items-center gap-2" x-show="!loading && order">
|
||||||
|
<!-- Status Badge -->
|
||||||
|
<span
|
||||||
|
:class="{
|
||||||
|
'px-3 py-1 text-sm font-semibold rounded-full': true,
|
||||||
|
'text-yellow-700 bg-yellow-100 dark:bg-yellow-700 dark:text-yellow-100': getStatusColor(order?.status) === 'yellow',
|
||||||
|
'text-blue-700 bg-blue-100 dark:bg-blue-700 dark:text-blue-100': getStatusColor(order?.status) === 'blue',
|
||||||
|
'text-orange-700 bg-orange-100 dark:bg-orange-700 dark:text-orange-100': getStatusColor(order?.status) === 'orange',
|
||||||
|
'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': getStatusColor(order?.status) === 'green',
|
||||||
|
'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100': getStatusColor(order?.status) === 'red',
|
||||||
|
'text-indigo-700 bg-indigo-100 dark:bg-indigo-700 dark:text-indigo-100': getStatusColor(order?.status) === 'indigo',
|
||||||
|
'text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-100': getStatusColor(order?.status) === 'gray'
|
||||||
|
}"
|
||||||
|
x-text="getStatusLabel(order?.status)"
|
||||||
|
></span>
|
||||||
|
|
||||||
|
<!-- Update Status Button -->
|
||||||
|
<button
|
||||||
|
@click="showStatusModal = true"
|
||||||
|
class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('pencil-square', 'w-4 h-4 inline mr-1')"></span>
|
||||||
|
Update Status
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{% endcall %}
|
||||||
|
|
||||||
|
{{ loading_state('Loading order details...') }}
|
||||||
|
{{ error_state('Error loading order') }}
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div x-show="!loading && !error && order" class="grid gap-6 lg:grid-cols-3">
|
||||||
|
<!-- Left Column: Order Info -->
|
||||||
|
<div class="lg:col-span-2 space-y-6">
|
||||||
|
<!-- Order Summary Card -->
|
||||||
|
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800 overflow-hidden">
|
||||||
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||||
|
Order <span x-text="order?.order_number"></span>
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
Placed on <span x-text="formatDateTime(order?.order_date)"></span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
<div>
|
||||||
|
<p class="text-xs text-gray-500 dark:text-gray-400 uppercase">Channel</p>
|
||||||
|
<p class="text-sm font-medium text-gray-700 dark:text-gray-200 capitalize" x-text="order?.channel || 'direct'"></p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-xs text-gray-500 dark:text-gray-400 uppercase">Items</p>
|
||||||
|
<p class="text-sm font-medium text-gray-700 dark:text-gray-200" x-text="order?.items?.length || 0"></p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-xs text-gray-500 dark:text-gray-400 uppercase">Subtotal</p>
|
||||||
|
<p class="text-sm font-medium text-gray-700 dark:text-gray-200" x-text="formatPrice(order?.subtotal_cents)"></p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-xs text-gray-500 dark:text-gray-400 uppercase">Total</p>
|
||||||
|
<p class="text-lg font-bold text-purple-600 dark:text-purple-400" x-text="formatPrice(order?.total_amount_cents)"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Order Items -->
|
||||||
|
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800 overflow-hidden">
|
||||||
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Order Items</h3>
|
||||||
|
<template x-if="shipmentStatus">
|
||||||
|
<span class="text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
<span x-text="shipmentStatus.total_shipped_units"></span>/<span x-text="shipmentStatus.total_ordered_units"></span> units shipped
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div class="divide-y divide-gray-200 dark:divide-gray-700">
|
||||||
|
<template x-for="item in order?.items || []" :key="item.id">
|
||||||
|
<div class="p-4 flex items-start gap-4">
|
||||||
|
<!-- Product Info -->
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="font-medium text-gray-700 dark:text-gray-200" x-text="item.product_name"></p>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
<span x-show="item.product_sku">SKU: <span x-text="item.product_sku"></span></span>
|
||||||
|
<span x-show="item.gtin"> | GTIN: <span x-text="item.gtin"></span></span>
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">
|
||||||
|
<span x-text="formatPrice(item.unit_price_cents)"></span> x <span x-text="item.quantity"></span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Shipment Status -->
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="font-semibold text-gray-700 dark:text-gray-200" x-text="formatPrice(item.total_price_cents)"></p>
|
||||||
|
<template x-if="getItemShipmentStatus(item.id)">
|
||||||
|
<div class="mt-1">
|
||||||
|
<template x-if="getItemShipmentStatus(item.id).is_fully_shipped">
|
||||||
|
<span class="px-2 py-0.5 text-xs font-medium text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
|
||||||
|
Shipped
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<template x-if="getItemShipmentStatus(item.id).is_partially_shipped">
|
||||||
|
<span class="px-2 py-0.5 text-xs font-medium text-orange-700 bg-orange-100 rounded-full dark:bg-orange-700 dark:text-orange-100">
|
||||||
|
<span x-text="getItemShipmentStatus(item.id).shipped_quantity"></span>/<span x-text="getItemShipmentStatus(item.id).quantity"></span> shipped
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<template x-if="!getItemShipmentStatus(item.id).is_fully_shipped && !getItemShipmentStatus(item.id).is_partially_shipped">
|
||||||
|
<span class="px-2 py-0.5 text-xs font-medium text-gray-700 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-100">
|
||||||
|
Pending
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- Ship Item Button -->
|
||||||
|
<template x-if="canShipItem(item.id) && order?.status !== 'shipped'">
|
||||||
|
<button
|
||||||
|
@click="shipItem(item.id)"
|
||||||
|
:disabled="saving"
|
||||||
|
class="mt-2 px-3 py-1 text-xs font-medium text-white bg-indigo-600 rounded hover:bg-indigo-700 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('truck', 'w-3 h-3 inline mr-1')"></span>
|
||||||
|
Ship
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Totals -->
|
||||||
|
<div class="px-6 py-4 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-600">
|
||||||
|
<div class="space-y-2 text-sm">
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span class="text-gray-600 dark:text-gray-400">Subtotal</span>
|
||||||
|
<span class="text-gray-700 dark:text-gray-200" x-text="formatPrice(order?.subtotal_cents)"></span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between" x-show="order?.tax_amount_cents">
|
||||||
|
<span class="text-gray-600 dark:text-gray-400">Tax</span>
|
||||||
|
<span class="text-gray-700 dark:text-gray-200" x-text="formatPrice(order?.tax_amount_cents)"></span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between" x-show="order?.shipping_amount_cents">
|
||||||
|
<span class="text-gray-600 dark:text-gray-400">Shipping</span>
|
||||||
|
<span class="text-gray-700 dark:text-gray-200" x-text="formatPrice(order?.shipping_amount_cents)"></span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between" x-show="order?.discount_amount_cents">
|
||||||
|
<span class="text-gray-600 dark:text-gray-400">Discount</span>
|
||||||
|
<span class="text-green-600 dark:text-green-400">-<span x-text="formatPrice(order?.discount_amount_cents)"></span></span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between pt-2 border-t border-gray-200 dark:border-gray-600 font-semibold">
|
||||||
|
<span class="text-gray-700 dark:text-gray-200">Total</span>
|
||||||
|
<span class="text-purple-600 dark:text-purple-400" x-text="formatPrice(order?.total_amount_cents)"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tracking Info -->
|
||||||
|
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800 overflow-hidden" x-show="order?.tracking_number || order?.shipped_at">
|
||||||
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Shipping & Tracking</h3>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 grid grid-cols-2 gap-4">
|
||||||
|
<div x-show="order?.tracking_provider">
|
||||||
|
<p class="text-xs text-gray-500 dark:text-gray-400 uppercase">Carrier</p>
|
||||||
|
<p class="text-sm font-medium text-gray-700 dark:text-gray-200" x-text="order?.tracking_provider"></p>
|
||||||
|
</div>
|
||||||
|
<div x-show="order?.tracking_number">
|
||||||
|
<p class="text-xs text-gray-500 dark:text-gray-400 uppercase">Tracking Number</p>
|
||||||
|
<p class="text-sm font-medium text-gray-700 dark:text-gray-200" x-text="order?.tracking_number"></p>
|
||||||
|
</div>
|
||||||
|
<div x-show="order?.shipped_at">
|
||||||
|
<p class="text-xs text-gray-500 dark:text-gray-400 uppercase">Shipped At</p>
|
||||||
|
<p class="text-sm font-medium text-gray-700 dark:text-gray-200" x-text="formatDateTime(order?.shipped_at)"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right Column: Customer & Actions -->
|
||||||
|
<div class="space-y-6">
|
||||||
|
<!-- Customer Info -->
|
||||||
|
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800 overflow-hidden">
|
||||||
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Customer</h3>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 space-y-4">
|
||||||
|
<div>
|
||||||
|
<p class="font-medium text-gray-700 dark:text-gray-200" x-text="`${order?.customer_first_name || ''} ${order?.customer_last_name || ''}`"></p>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400" x-text="order?.customer_email"></p>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400" x-text="order?.customer_phone" x-show="order?.customer_phone"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Shipping Address -->
|
||||||
|
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800 overflow-hidden">
|
||||||
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Shipping Address</h3>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<p class="text-sm text-gray-700 dark:text-gray-200" x-text="`${order?.ship_first_name || ''} ${order?.ship_last_name || ''}`"></p>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400" x-text="order?.ship_company" x-show="order?.ship_company"></p>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400" x-text="order?.ship_address_line_1"></p>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400" x-text="order?.ship_address_line_2" x-show="order?.ship_address_line_2"></p>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
<span x-text="order?.ship_postal_code"></span> <span x-text="order?.ship_city"></span>
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400" x-text="order?.ship_country_iso"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Invoice Section -->
|
||||||
|
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800 overflow-hidden">
|
||||||
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Invoice</h3>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<template x-if="invoice">
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-gray-700 dark:text-gray-200">
|
||||||
|
<span x-text="invoice.invoice_number"></span>
|
||||||
|
</p>
|
||||||
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
|
||||||
|
Status: <span class="capitalize" x-text="invoice.status"></span>
|
||||||
|
</p>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<a
|
||||||
|
:href="`/vendor/${vendorCode}/invoices?invoice_id=${invoice.id}`"
|
||||||
|
class="px-3 py-1.5 text-xs font-medium text-purple-600 bg-purple-100 rounded hover:bg-purple-200 dark:bg-purple-900 dark:text-purple-300"
|
||||||
|
>
|
||||||
|
View Invoice
|
||||||
|
</a>
|
||||||
|
<button
|
||||||
|
@click="downloadInvoicePdf()"
|
||||||
|
:disabled="downloadingPdf"
|
||||||
|
class="px-3 py-1.5 text-xs font-medium text-gray-600 bg-gray-100 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<span x-show="!downloadingPdf">Download PDF</span>
|
||||||
|
<span x-show="downloadingPdf">Downloading...</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template x-if="!invoice && order?.status !== 'pending'">
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-3">No invoice created yet</p>
|
||||||
|
<button
|
||||||
|
@click="createInvoice()"
|
||||||
|
:disabled="creatingInvoice"
|
||||||
|
class="w-full 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="!creatingInvoice">
|
||||||
|
<span x-html="$icon('document-plus', 'w-4 h-4 inline mr-1')"></span>
|
||||||
|
Create Invoice
|
||||||
|
</span>
|
||||||
|
<span x-show="creatingInvoice">Creating...</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template x-if="!invoice && order?.status === 'pending'">
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
Confirm the order first before creating an invoice
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Quick Actions -->
|
||||||
|
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800 overflow-hidden">
|
||||||
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Quick Actions</h3>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 space-y-2">
|
||||||
|
<template x-if="order?.status === 'pending'">
|
||||||
|
<button
|
||||||
|
@click="updateOrderStatus('processing')"
|
||||||
|
:disabled="saving"
|
||||||
|
class="w-full px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('check-circle', 'w-4 h-4 inline mr-1')"></span>
|
||||||
|
Confirm Order
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
<template x-if="order?.status === 'processing' || order?.status === 'partially_shipped'">
|
||||||
|
<button
|
||||||
|
@click="showShipAllModal = true"
|
||||||
|
:disabled="saving"
|
||||||
|
class="w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('truck', 'w-4 h-4 inline mr-1')"></span>
|
||||||
|
Ship All Remaining
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
<template x-if="order?.status === 'shipped'">
|
||||||
|
<button
|
||||||
|
@click="updateOrderStatus('delivered')"
|
||||||
|
:disabled="saving"
|
||||||
|
class="w-full px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('check', 'w-4 h-4 inline mr-1')"></span>
|
||||||
|
Mark as Delivered
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
<template x-if="!['cancelled', 'refunded', 'delivered'].includes(order?.status)">
|
||||||
|
<button
|
||||||
|
@click="updateOrderStatus('cancelled')"
|
||||||
|
:disabled="saving"
|
||||||
|
class="w-full px-4 py-2 text-sm font-medium text-red-600 bg-red-100 rounded-lg hover:bg-red-200 disabled:opacity-50 dark:bg-red-900 dark:text-red-300 dark:hover:bg-red-800"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('x-circle', 'w-4 h-4 inline mr-1')"></span>
|
||||||
|
Cancel Order
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Notes -->
|
||||||
|
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800 overflow-hidden" x-show="order?.customer_notes || order?.internal_notes">
|
||||||
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Notes</h3>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 space-y-4">
|
||||||
|
<div x-show="order?.customer_notes">
|
||||||
|
<p class="text-xs text-gray-500 dark:text-gray-400 uppercase mb-1">Customer Notes</p>
|
||||||
|
<p class="text-sm text-gray-700 dark:text-gray-200" x-text="order?.customer_notes"></p>
|
||||||
|
</div>
|
||||||
|
<div x-show="order?.internal_notes">
|
||||||
|
<p class="text-xs text-gray-500 dark:text-gray-400 uppercase mb-1">Internal Notes</p>
|
||||||
|
<p class="text-sm text-gray-700 dark:text-gray-200" x-text="order?.internal_notes"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Status Update Modal -->
|
||||||
|
{{ modal_simple(
|
||||||
|
show_var='showStatusModal',
|
||||||
|
title='Update Order Status',
|
||||||
|
icon='pencil-square',
|
||||||
|
icon_color='blue',
|
||||||
|
confirm_text='Update',
|
||||||
|
confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
|
||||||
|
confirm_fn='confirmStatusUpdate()',
|
||||||
|
loading_var='saving'
|
||||||
|
) }}
|
||||||
|
<template x-if="showStatusModal">
|
||||||
|
<div class="mb-4">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Status</label>
|
||||||
|
<select
|
||||||
|
x-model="newStatus"
|
||||||
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
>
|
||||||
|
<template x-for="status in statuses" :key="status.value">
|
||||||
|
<option :value="status.value" x-text="status.label"></option>
|
||||||
|
</template>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<!-- Tracking Info (shown when shipping) -->
|
||||||
|
<template x-if="newStatus === 'shipped'">
|
||||||
|
<div class="mt-4 space-y-3">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tracking Number</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
x-model="trackingNumber"
|
||||||
|
placeholder="Enter tracking number"
|
||||||
|
class="w-full px-3 py-2 text-sm border rounded-lg focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Carrier</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
x-model="trackingProvider"
|
||||||
|
placeholder="e.g., DHL, PostNL"
|
||||||
|
class="w-full px-3 py-2 text-sm border rounded-lg focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- Ship All Modal -->
|
||||||
|
{{ modal_simple(
|
||||||
|
show_var='showShipAllModal',
|
||||||
|
title='Ship All Items',
|
||||||
|
icon='truck',
|
||||||
|
icon_color='indigo',
|
||||||
|
confirm_text='Ship All',
|
||||||
|
confirm_class='bg-indigo-600 hover:bg-indigo-700 focus:shadow-outline-indigo',
|
||||||
|
confirm_fn='shipAllItems()',
|
||||||
|
loading_var='saving'
|
||||||
|
) }}
|
||||||
|
<template x-if="showShipAllModal">
|
||||||
|
<div class="mb-4 space-y-3">
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
This will ship all remaining items and mark the order as shipped.
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tracking Number</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
x-model="trackingNumber"
|
||||||
|
placeholder="Enter tracking number"
|
||||||
|
class="w-full px-3 py-2 text-sm border rounded-lg focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Carrier</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
x-model="trackingProvider"
|
||||||
|
placeholder="e.g., DHL, PostNL"
|
||||||
|
class="w-full px-3 py-2 text-sm border rounded-lg focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block extra_scripts %}
|
||||||
|
<script>
|
||||||
|
// Pass order ID to JavaScript
|
||||||
|
window.orderDetailData = {
|
||||||
|
orderId: {{ order_id }}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<script src="{{ url_for('static', path='vendor/js/order-detail.js') }}"></script>
|
||||||
|
{% endblock %}
|
||||||
1
app/templates/vendor/orders.html
vendored
1
app/templates/vendor/orders.html
vendored
@@ -216,6 +216,7 @@
|
|||||||
'px-2 py-1 font-semibold leading-tight rounded-full': true,
|
'px-2 py-1 font-semibold leading-tight rounded-full': true,
|
||||||
'text-yellow-700 bg-yellow-100 dark:bg-yellow-700 dark:text-yellow-100': getStatusColor(order.status) === 'yellow',
|
'text-yellow-700 bg-yellow-100 dark:bg-yellow-700 dark:text-yellow-100': getStatusColor(order.status) === 'yellow',
|
||||||
'text-blue-700 bg-blue-100 dark:bg-blue-700 dark:text-blue-100': getStatusColor(order.status) === 'blue',
|
'text-blue-700 bg-blue-100 dark:bg-blue-700 dark:text-blue-100': getStatusColor(order.status) === 'blue',
|
||||||
|
'text-orange-700 bg-orange-100 dark:bg-orange-700 dark:text-orange-100': getStatusColor(order.status) === 'orange',
|
||||||
'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': getStatusColor(order.status) === 'green',
|
'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': getStatusColor(order.status) === 'green',
|
||||||
'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100': getStatusColor(order.status) === 'red',
|
'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100': getStatusColor(order.status) === 'red',
|
||||||
'text-indigo-700 bg-indigo-100 dark:bg-indigo-700 dark:text-indigo-100': getStatusColor(order.status) === 'indigo',
|
'text-indigo-700 bg-indigo-100 dark:bg-indigo-700 dark:text-indigo-100': getStatusColor(order.status) === 'indigo',
|
||||||
|
|||||||
372
static/vendor/js/order-detail.js
vendored
Normal file
372
static/vendor/js/order-detail.js
vendored
Normal file
@@ -0,0 +1,372 @@
|
|||||||
|
// static/vendor/js/order-detail.js
|
||||||
|
/**
|
||||||
|
* Vendor order detail page logic
|
||||||
|
* View order details, manage status, handle shipments, and invoice integration
|
||||||
|
*/
|
||||||
|
|
||||||
|
const orderDetailLog = window.LogConfig.loggers.orderDetail ||
|
||||||
|
window.LogConfig.createLogger('orderDetail', false);
|
||||||
|
|
||||||
|
orderDetailLog.info('Loading...');
|
||||||
|
|
||||||
|
function vendorOrderDetail() {
|
||||||
|
orderDetailLog.info('vendorOrderDetail() called');
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Inherit base layout state
|
||||||
|
...data(),
|
||||||
|
|
||||||
|
// Set page identifier
|
||||||
|
currentPage: 'orders',
|
||||||
|
|
||||||
|
// Order ID from URL
|
||||||
|
orderId: window.orderDetailData?.orderId || null,
|
||||||
|
|
||||||
|
// Loading states
|
||||||
|
loading: true,
|
||||||
|
error: '',
|
||||||
|
saving: false,
|
||||||
|
creatingInvoice: false,
|
||||||
|
downloadingPdf: false,
|
||||||
|
|
||||||
|
// Order data
|
||||||
|
order: null,
|
||||||
|
shipmentStatus: null,
|
||||||
|
invoice: null,
|
||||||
|
|
||||||
|
// Modal states
|
||||||
|
showStatusModal: false,
|
||||||
|
showShipAllModal: false,
|
||||||
|
newStatus: '',
|
||||||
|
trackingNumber: '',
|
||||||
|
trackingProvider: '',
|
||||||
|
|
||||||
|
// Order statuses
|
||||||
|
statuses: [
|
||||||
|
{ value: 'pending', label: 'Pending', color: 'yellow' },
|
||||||
|
{ value: 'processing', label: 'Processing', color: 'blue' },
|
||||||
|
{ value: 'partially_shipped', label: 'Partially Shipped', color: 'orange' },
|
||||||
|
{ value: 'shipped', label: 'Shipped', color: 'indigo' },
|
||||||
|
{ value: 'delivered', label: 'Delivered', color: 'green' },
|
||||||
|
{ value: 'cancelled', label: 'Cancelled', color: 'red' },
|
||||||
|
{ value: 'refunded', label: 'Refunded', color: 'gray' }
|
||||||
|
],
|
||||||
|
|
||||||
|
async init() {
|
||||||
|
orderDetailLog.info('Order detail init() called, orderId:', this.orderId);
|
||||||
|
|
||||||
|
// Guard against multiple initialization
|
||||||
|
if (window._orderDetailInitialized) {
|
||||||
|
orderDetailLog.warn('Already initialized, skipping');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
window._orderDetailInitialized = true;
|
||||||
|
|
||||||
|
if (!this.orderId) {
|
||||||
|
this.error = 'Order ID not provided';
|
||||||
|
this.loading = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await this.loadOrderDetails();
|
||||||
|
} catch (error) {
|
||||||
|
orderDetailLog.error('Init failed:', error);
|
||||||
|
this.error = 'Failed to load order details';
|
||||||
|
}
|
||||||
|
|
||||||
|
orderDetailLog.info('Order detail initialization complete');
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load order details from API
|
||||||
|
*/
|
||||||
|
async loadOrderDetails() {
|
||||||
|
this.loading = true;
|
||||||
|
this.error = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Load order details
|
||||||
|
const orderResponse = await apiClient.get(
|
||||||
|
`/vendor/${this.vendorCode}/orders/${this.orderId}`
|
||||||
|
);
|
||||||
|
this.order = orderResponse;
|
||||||
|
this.newStatus = this.order.status;
|
||||||
|
|
||||||
|
orderDetailLog.info('Loaded order:', this.order.order_number);
|
||||||
|
|
||||||
|
// Load shipment status
|
||||||
|
await this.loadShipmentStatus();
|
||||||
|
|
||||||
|
// Load invoice if exists
|
||||||
|
await this.loadInvoice();
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
orderDetailLog.error('Failed to load order details:', error);
|
||||||
|
this.error = error.message || 'Failed to load order details';
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load shipment status for partial shipment tracking
|
||||||
|
*/
|
||||||
|
async loadShipmentStatus() {
|
||||||
|
try {
|
||||||
|
const response = await apiClient.get(
|
||||||
|
`/vendor/${this.vendorCode}/orders/${this.orderId}/shipment-status`
|
||||||
|
);
|
||||||
|
this.shipmentStatus = response;
|
||||||
|
orderDetailLog.info('Loaded shipment status:', response);
|
||||||
|
} catch (error) {
|
||||||
|
orderDetailLog.warn('Failed to load shipment status:', error);
|
||||||
|
// Not critical - continue without shipment status
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load invoice for this order
|
||||||
|
*/
|
||||||
|
async loadInvoice() {
|
||||||
|
try {
|
||||||
|
// Search for invoices linked to this order
|
||||||
|
const response = await apiClient.get(
|
||||||
|
`/vendor/${this.vendorCode}/invoices?order_id=${this.orderId}&limit=1`
|
||||||
|
);
|
||||||
|
if (response.invoices && response.invoices.length > 0) {
|
||||||
|
this.invoice = response.invoices[0];
|
||||||
|
orderDetailLog.info('Loaded invoice:', this.invoice.invoice_number);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
orderDetailLog.warn('Failed to load invoice:', error);
|
||||||
|
// Not critical - continue without invoice
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get status color class
|
||||||
|
*/
|
||||||
|
getStatusColor(status) {
|
||||||
|
const statusObj = this.statuses.find(s => s.value === status);
|
||||||
|
return statusObj ? statusObj.color : 'gray';
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get status label
|
||||||
|
*/
|
||||||
|
getStatusLabel(status) {
|
||||||
|
const statusObj = this.statuses.find(s => s.value === status);
|
||||||
|
return statusObj ? statusObj.label : status;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get item shipment status
|
||||||
|
*/
|
||||||
|
getItemShipmentStatus(itemId) {
|
||||||
|
if (!this.shipmentStatus?.items) return null;
|
||||||
|
return this.shipmentStatus.items.find(i => i.item_id === itemId);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if item can be shipped
|
||||||
|
*/
|
||||||
|
canShipItem(itemId) {
|
||||||
|
const status = this.getItemShipmentStatus(itemId);
|
||||||
|
if (!status) return true; // Assume can ship if no status
|
||||||
|
return !status.is_fully_shipped;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format price for display
|
||||||
|
*/
|
||||||
|
formatPrice(cents) {
|
||||||
|
if (cents === null || cents === undefined) return '-';
|
||||||
|
return new Intl.NumberFormat('de-DE', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'EUR'
|
||||||
|
}).format(cents / 100);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format date/time for display
|
||||||
|
*/
|
||||||
|
formatDateTime(dateStr) {
|
||||||
|
if (!dateStr) return '-';
|
||||||
|
return new Date(dateStr).toLocaleDateString('de-DE', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update order status
|
||||||
|
*/
|
||||||
|
async updateOrderStatus(status) {
|
||||||
|
this.saving = true;
|
||||||
|
try {
|
||||||
|
const payload = { status };
|
||||||
|
|
||||||
|
// Add tracking info if shipping
|
||||||
|
if (status === 'shipped' && this.trackingNumber) {
|
||||||
|
payload.tracking_number = this.trackingNumber;
|
||||||
|
payload.tracking_provider = this.trackingProvider;
|
||||||
|
}
|
||||||
|
|
||||||
|
await apiClient.put(
|
||||||
|
`/vendor/${this.vendorCode}/orders/${this.orderId}/status`,
|
||||||
|
payload
|
||||||
|
);
|
||||||
|
|
||||||
|
Utils.showToast(`Order status updated to ${this.getStatusLabel(status)}`, 'success');
|
||||||
|
await this.loadOrderDetails();
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
orderDetailLog.error('Failed to update status:', error);
|
||||||
|
Utils.showToast(error.message || 'Failed to update status', 'error');
|
||||||
|
} finally {
|
||||||
|
this.saving = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Confirm status update from modal
|
||||||
|
*/
|
||||||
|
async confirmStatusUpdate() {
|
||||||
|
await this.updateOrderStatus(this.newStatus);
|
||||||
|
this.showStatusModal = false;
|
||||||
|
this.trackingNumber = '';
|
||||||
|
this.trackingProvider = '';
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ship a single item
|
||||||
|
*/
|
||||||
|
async shipItem(itemId) {
|
||||||
|
this.saving = true;
|
||||||
|
try {
|
||||||
|
await apiClient.post(
|
||||||
|
`/vendor/${this.vendorCode}/orders/${this.orderId}/items/${itemId}/ship`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
|
||||||
|
Utils.showToast('Item shipped successfully', 'success');
|
||||||
|
await this.loadOrderDetails();
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
orderDetailLog.error('Failed to ship item:', error);
|
||||||
|
Utils.showToast(error.message || 'Failed to ship item', 'error');
|
||||||
|
} finally {
|
||||||
|
this.saving = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ship all remaining items
|
||||||
|
*/
|
||||||
|
async shipAllItems() {
|
||||||
|
this.saving = true;
|
||||||
|
try {
|
||||||
|
// Ship each unshipped item
|
||||||
|
const unshippedItems = this.shipmentStatus?.items?.filter(i => !i.is_fully_shipped) || [];
|
||||||
|
|
||||||
|
for (const item of unshippedItems) {
|
||||||
|
await apiClient.post(
|
||||||
|
`/vendor/${this.vendorCode}/orders/${this.orderId}/items/${item.item_id}/ship`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update order status to shipped with tracking
|
||||||
|
const payload = { status: 'shipped' };
|
||||||
|
if (this.trackingNumber) {
|
||||||
|
payload.tracking_number = this.trackingNumber;
|
||||||
|
payload.tracking_provider = this.trackingProvider;
|
||||||
|
}
|
||||||
|
|
||||||
|
await apiClient.put(
|
||||||
|
`/vendor/${this.vendorCode}/orders/${this.orderId}/status`,
|
||||||
|
payload
|
||||||
|
);
|
||||||
|
|
||||||
|
Utils.showToast('All items shipped', 'success');
|
||||||
|
this.showShipAllModal = false;
|
||||||
|
this.trackingNumber = '';
|
||||||
|
this.trackingProvider = '';
|
||||||
|
await this.loadOrderDetails();
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
orderDetailLog.error('Failed to ship all items:', error);
|
||||||
|
Utils.showToast(error.message || 'Failed to ship items', 'error');
|
||||||
|
} finally {
|
||||||
|
this.saving = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create invoice for this order
|
||||||
|
*/
|
||||||
|
async createInvoice() {
|
||||||
|
this.creatingInvoice = true;
|
||||||
|
try {
|
||||||
|
const response = await apiClient.post(
|
||||||
|
`/vendor/${this.vendorCode}/invoices`,
|
||||||
|
{ order_id: this.orderId }
|
||||||
|
);
|
||||||
|
|
||||||
|
this.invoice = response;
|
||||||
|
Utils.showToast(`Invoice ${response.invoice_number} created`, 'success');
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
orderDetailLog.error('Failed to create invoice:', error);
|
||||||
|
Utils.showToast(error.message || 'Failed to create invoice', 'error');
|
||||||
|
} finally {
|
||||||
|
this.creatingInvoice = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Download invoice PDF
|
||||||
|
*/
|
||||||
|
async downloadInvoicePdf() {
|
||||||
|
if (!this.invoice) return;
|
||||||
|
|
||||||
|
this.downloadingPdf = true;
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`/api/v1/vendor/${this.vendorCode}/invoices/${this.invoice.id}/pdf`,
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${window.Auth?.getToken()}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to download PDF');
|
||||||
|
}
|
||||||
|
|
||||||
|
const blob = await response.blob();
|
||||||
|
const url = window.URL.createObjectURL(blob);
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
a.download = `${this.invoice.invoice_number}.pdf`;
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
window.URL.revokeObjectURL(url);
|
||||||
|
a.remove();
|
||||||
|
|
||||||
|
Utils.showToast('Invoice downloaded', 'success');
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
orderDetailLog.error('Failed to download invoice PDF:', error);
|
||||||
|
Utils.showToast(error.message || 'Failed to download PDF', 'error');
|
||||||
|
} finally {
|
||||||
|
this.downloadingPdf = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
18
static/vendor/js/orders.js
vendored
18
static/vendor/js/orders.js
vendored
@@ -38,6 +38,7 @@ function vendorOrders() {
|
|||||||
statuses: [
|
statuses: [
|
||||||
{ value: 'pending', label: 'Pending', color: 'yellow' },
|
{ value: 'pending', label: 'Pending', color: 'yellow' },
|
||||||
{ value: 'processing', label: 'Processing', color: 'blue' },
|
{ value: 'processing', label: 'Processing', color: 'blue' },
|
||||||
|
{ value: 'partially_shipped', label: 'Partially Shipped', color: 'orange' },
|
||||||
{ value: 'shipped', label: 'Shipped', color: 'indigo' },
|
{ value: 'shipped', label: 'Shipped', color: 'indigo' },
|
||||||
{ value: 'delivered', label: 'Delivered', color: 'green' },
|
{ value: 'delivered', label: 'Delivered', color: 'green' },
|
||||||
{ value: 'completed', label: 'Completed', color: 'green' },
|
{ value: 'completed', label: 'Completed', color: 'green' },
|
||||||
@@ -243,21 +244,10 @@ function vendorOrders() {
|
|||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* View order details
|
* View order details - navigates to detail page
|
||||||
*/
|
*/
|
||||||
async viewOrder(order) {
|
viewOrder(order) {
|
||||||
this.loading = true;
|
window.location.href = `/vendor/${this.vendorCode}/orders/${order.id}`;
|
||||||
try {
|
|
||||||
const response = await apiClient.get(`/vendor/${this.vendorCode}/orders/${order.id}`);
|
|
||||||
this.selectedOrder = response;
|
|
||||||
this.showDetailModal = true;
|
|
||||||
vendorOrdersLog.info('Loaded order details:', order.id);
|
|
||||||
} catch (error) {
|
|
||||||
vendorOrdersLog.error('Failed to load order details:', error);
|
|
||||||
Utils.showToast(error.message || 'Failed to load order details', 'error');
|
|
||||||
} finally {
|
|
||||||
this.loading = false;
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user