fabric_trade/fabric_trade_admin
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve order detail UX, confirm check actions, and fix notification deep links.

Browse Source 
Normalize inbox /orders/:id links, open related admin pages on click, and keep Jalali dates consistent.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
safavimohadeseh78
2026-08-09 14:32:09 +02:00
co-authored by Cursor
parent 120c62bdca
commit 1c3c494a43
14 changed files with 737 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/orders/components/OrderDetailContent.vue
+246 -123
View File
@@ -6,12 +6,15 @@ import { formatCurrency, formatMeterage, formatNumber } from '@/utils/format'
import { RAW_ORDER_STATUS_LABELS, rawStatusLabel } from '@/utils/orderStatus'
import type { Order, RawOrderStatus } from '@/types'
const props = defineProps<{
order: Order
settlementLabel: (method?: string | null) => string
layout?: 'desktop' | 'compact'
statusSaving?: boolean
}>()
const props = withDefaults(
defineProps<{
order: Order
settlementLabel: (method?: string | null) => string
layout?: 'desktop' | 'compact'
statusSaving?: boolean
}>(),
{ layout: 'compact' },
)
const emit = defineEmits<{
pricing: []
@@ -47,6 +50,8 @@ const canSubmitStatus = computed(
() => !!nextStatus.value && (!noteRequired.value || statusNote.value.trim().length > 0),
)
const useTable = computed(() => props.layout === 'desktop')
watch([() => props.order.id, manualMode], () => {
nextStatus.value = ''
statusNote.value = ''
@@ -68,78 +73,104 @@ function submitStatus() {
</script>
<template>
<div class="order-detail">
<div class="order-detail__id">
<strong>{{ order.orderNumber }}</strong>
<StatusBadge :status="order.status" />
<span class="order-detail__raw-status">{{ rawStatusLabel(order.rawStatus) }}</span>
</div>
<div class="order-detail__section">
<h3 class="order-detail__section-title">اطلاعات مشتری</h3>
<div class="admin-info-grid">
<div class="admin-info-row">
<AdminIcon name="building" :size="16" />
<span class="admin-info-row__label">شرکت:</span>
<span class="admin-info-row__value">{{ order.customerName }}</span>
</div>
<div class="admin-info-row">
<AdminIcon name="phone" :size="16" />
<span class="admin-info-row__label">تلفن:</span>
<span class="admin-info-row__value">{{ order.customerPhone ?? '—' }}</span>
</div>
<div class="admin-info-row">
<AdminIcon name="id-card" :size="16" />
<span class="admin-info-row__label">شناسه ملی:</span>
<span class="admin-info-row__value">{{ order.customerNationalId ?? '—' }}</span>
</div>
<div class="admin-info-row">
<AdminIcon name="user" :size="16" />
<span class="admin-info-row__label">نوع مشتری:</span>
<span class="admin-info-row__value">{{ order.customerType ?? '—' }}</span>
<div class="order-detail" :class="`order-detail--${layout}`">
<header class="order-detail__hero">
<div class="order-detail__hero-text">
<div class="order-detail__id">
<strong>{{ order.orderNumber }}</strong>
<StatusBadge :status="order.status" />
</div>
<p class="order-detail__raw-status">{{ rawStatusLabel(order.rawStatus) }}</p>
</div>
</div>
<div class="order-detail__section">
<h3 class="order-detail__section-title">اطلاعات سفارش</h3>
<div class="admin-info-grid">
<div class="admin-info-row">
<span class="admin-info-row__label">شرکت:</span>
<span class="admin-info-row__value">{{ order.companyName }}</span>
</div>
<div class="admin-info-row">
<span class="admin-info-row__label">روش تسویه:</span>
<span class="admin-info-row__value">
{{ settlementLabel(order.settlementMethod) }}
</span>
</div>
<div class="admin-info-row">
<span class="admin-info-row__label">متراژ کل:</span>
<span class="admin-info-row__value">{{ formatMeterage(order.meterage) }}</span>
</div>
<div class="admin-info-row">
<span class="admin-info-row__label">مبلغ کل:</span>
<span class="admin-info-row__value">
{{ order.totalAmount != null ? formatCurrency(order.totalAmount) : 'پس از قیمت‌گذاری' }}
</span>
</div>
<div class="order-detail__actions">
<button type="button" class="admin-btn admin-btn--primary admin-btn--sm" @click="emit('pricing')">
قیمت‌گذاری سفارش
</button>
<button
v-if="order.settlementMethod === 'check'"
type="button"
class="admin-btn admin-btn--outline admin-btn--sm"
@click="emit('checks')"
>
مدیریت چک‌ها
</button>
<button
v-if="order.settlementMethod === 'cash'"
type="button"
class="admin-btn admin-btn--outline admin-btn--sm"
@click="emit('cashReceipt')"
>
رسید پرداخت
</button>
</div>
</header>
<div class="order-detail__panels">
<section class="order-detail__section">
<h3 class="order-detail__section-title">اطلاعات مشتری</h3>
<div class="order-detail__info">
<div class="order-detail__info-row">
<AdminIcon name="building" :size="16" />
<span class="order-detail__info-label">مشتری</span>
<span class="order-detail__info-value">{{ order.customerName }}</span>
</div>
<div class="order-detail__info-row">
<AdminIcon name="phone" :size="16" />
<span class="order-detail__info-label">تلفن</span>
<span class="order-detail__info-value" dir="ltr">{{ order.customerPhone ?? '—' }}</span>
</div>
<div class="order-detail__info-row">
<AdminIcon name="id-card" :size="16" />
<span class="order-detail__info-label">شناسه ملی</span>
<span class="order-detail__info-value">{{ order.customerNationalId ?? '—' }}</span>
</div>
<div class="order-detail__info-row">
<AdminIcon name="user" :size="16" />
<span class="order-detail__info-label">نوع مشتری</span>
<span class="order-detail__info-value">{{ order.customerType ?? '—' }}</span>
</div>
</div>
</section>
<section class="order-detail__section">
<h3 class="order-detail__section-title">اطلاعات سفارش</h3>
<div class="order-detail__info">
<div class="order-detail__info-row">
<span class="order-detail__info-label">شرکت</span>
<span class="order-detail__info-value">{{ order.companyName }}</span>
</div>
<div class="order-detail__info-row">
<span class="order-detail__info-label">روش تسویه</span>
<span class="order-detail__info-value">{{ settlementLabel(order.settlementMethod) }}</span>
</div>
<div class="order-detail__info-row">
<span class="order-detail__info-label">متراژ کل</span>
<span class="order-detail__info-value">{{ formatMeterage(order.meterage) }}</span>
</div>
<div class="order-detail__info-row">
<span class="order-detail__info-label">مبلغ کل</span>
<span class="order-detail__info-value">
{{ order.totalAmount != null ? formatCurrency(order.totalAmount) : 'پس از قیمت‌گذاری' }}
</span>
</div>
</div>
</section>
</div>
<div v-if="order.items?.length" class="order-detail__section">
<section v-if="order.items?.length" class="order-detail__section">
<h3 class="order-detail__section-title">محصولات سفارش</h3>
<div v-if="layout === 'desktop'" class="admin-table-wrap">
<div v-if="useTable" class="admin-table-wrap order-detail__table">
<table class="admin-table admin-table--compact">
<thead>
<tr>
<th>کالیته</th>
<th>محصول</th>
<th>رنگ / نوع</th>
<th>رنگ</th>
<th>متراژ</th>
<th>قیمت تأیید شده</th>
<th>مبلغ کل</th>
<th>وضعیت</th>
<th>قیمت</th>
<th>مبلغ</th>
</tr>
</thead>
<tbody>
@@ -150,23 +181,30 @@ function submitStatus() {
<td>{{ formatNumber(item.confirmedMeterage ?? item.requestedMeterage) }}</td>
<td>{{ item.supplyPrice != null ? formatCurrency(item.supplyPrice) : '—' }}</td>
<td>{{ item.totalAmount != null ? formatCurrency(item.totalAmount) : '—' }}</td>
<td><StatusBadge status="pending_review" /></td>
</tr>
</tbody>
</table>
</div>
<ul v-else class="order-detail__items">
<li v-for="item in order.items" :key="item.id" class="order-detail__item">
<strong>{{ item.productName }}</strong>
<span>{{ item.catalogCode }} · {{ item.color }}</span>
<span>{{ formatMeterage(item.confirmedMeterage ?? item.requestedMeterage) }}</span>
<span v-if="item.supplyPrice != null">قیمت: {{ formatCurrency(item.supplyPrice) }}</span>
<span v-if="item.totalAmount != null">مبلغ: {{ formatCurrency(item.totalAmount) }}</span>
<div class="order-detail__item-head">
<strong>{{ item.productName }}</strong>
<span>{{ item.catalogCode }}</span>
</div>
<div class="order-detail__item-meta">
<span>{{ item.color }}</span>
<span>{{ formatMeterage(item.confirmedMeterage ?? item.requestedMeterage) }}</span>
<span v-if="item.supplyPrice != null">{{ formatCurrency(item.supplyPrice) }}</span>
<span v-if="item.totalAmount != null" class="order-detail__item-total">
{{ formatCurrency(item.totalAmount) }}
</span>
</div>
</li>
</ul>
</div>
</section>
<div class="order-detail__section order-detail__status">
<section class="order-detail__section order-detail__status">
<div class="order-detail__status-head">
<h3 class="order-detail__section-title">تغییر وضعیت</h3>
<label class="order-detail__manual">
@@ -176,13 +214,13 @@ function submitStatus() {
</div>
<p v-if="manualMode" class="order-detail__status-hint">
این گذر خارج از روال استاندارد است؛ ثبت یادداشت اجباری است و در تاریخچهٔ سفارش ذخیره می‌شود.
این گذر خارج از روال استاندارد است؛ ثبت یادداشت اجباری است.
</p>
<p v-else-if="!statusOptions.length" class="order-detail__status-hint">
در این وضعیت گذر خودکاری وجود ندارد. برای تغییر، حالت دستی را فعال کنید.
</p>
<template v-if="statusOptions.length">
<div v-if="statusOptions.length" class="order-detail__status-form">
<div class="admin-form__field">
<label for="next-status">وضعیت بعدی</label>
<select id="next-status" v-model="nextStatus" class="admin-input">
@@ -214,91 +252,160 @@ function submitStatus() {
>
{{ statusSaving ? 'در حال ثبت…' : 'ثبت وضعیت' }}
</button>
</template>
</div>
<div class="order-detail__footer">
<button type="button" class="admin-btn admin-btn--primary admin-btn--sm" @click="$emit('pricing')">
قیمت‌گذاری سفارش
</button>
<button
v-if="order.settlementMethod === 'check'"
type="button"
class="admin-btn admin-btn--outline admin-btn--sm"
@click="$emit('checks')"
>
مدیریت چک‌ها
</button>
<button
v-if="order.settlementMethod === 'cash'"
type="button"
class="admin-btn admin-btn--outline admin-btn--sm"
@click="$emit('cashReceipt')"
>
رسید پرداخت این سفارش
</button>
</div>
</div>
</section>
</div>
</template>
<style scoped>
.order-detail {
display: flex;
flex-direction: column;
gap: 16px;
}
.order-detail__hero {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-elevated, var(--color-bg));
}
.order-detail__id {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 20px;
font-size: 0.9375rem;
gap: 8px;
margin-bottom: 4px;
font-size: 1rem;
}
.order-detail__raw-status {
margin: 0;
font-size: 0.75rem;
color: var(--color-text-muted);
}
.order-detail__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.order-detail__actions .admin-btn {
min-height: 40px;
}
.order-detail__panels {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.order-detail__section {
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-border-light);
margin: 0;
padding: 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.order-detail__section-title {
margin: 0 0 12px;
font-size: 0.875rem;
font-size: 0.8125rem;
font-weight: 700;
color: var(--color-text);
}
.order-detail__info {
display: grid;
gap: 10px;
}
.order-detail__info-row {
display: grid;
grid-template-columns: auto minmax(72px, auto) 1fr;
align-items: center;
gap: 8px;
font-size: 0.8125rem;
}
.order-detail__info-row:not(:has(svg)) {
grid-template-columns: minmax(72px, auto) 1fr;
}
.order-detail__info-label {
color: var(--color-text-muted);
}
.order-detail__info-value {
font-weight: 600;
color: var(--color-text);
word-break: break-word;
}
.order-detail__table {
overflow-x: auto;
}
.order-detail__items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
display: grid;
gap: 8px;
}
.order-detail__item {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 12px;
background: var(--color-border-light);
padding: 12px;
border-radius: var(--radius-sm);
font-size: 0.8125rem;
background: var(--color-elevated, var(--color-bg));
border: 1px solid var(--color-border);
}
.order-detail__item strong {
.order-detail__item-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
font-size: 0.875rem;
}
.order-detail__item span {
.order-detail__item-head span {
font-size: 0.75rem;
color: var(--color-text-muted);
}
.order-detail__raw-status {
.order-detail__item-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
font-size: 0.75rem;
color: var(--color-text-muted);
}
.order-detail__item-total {
margin-inline-start: auto;
font-weight: 700;
color: var(--color-text);
}
.order-detail__status-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.order-detail__status-head .order-detail__section-title {
margin: 0;
}
.order-detail__manual {
@@ -323,10 +430,26 @@ function submitStatus() {
color: var(--color-text-muted);
}
.order-detail__footer {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px;
.order-detail__status-form {
display: grid;
gap: 12px;
}
@media (max-width: 639px) {
.order-detail__panels {
grid-template-columns: 1fr;
}
.order-detail__hero {
flex-direction: column;
}
.order-detail__actions {
width: 100%;
}
.order-detail__actions .admin-btn {
flex: 1;
}
}
</style>