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

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

Co-authored-by: Cursor <cursoragent@cursor.com>

src/views/orders/components/CompactOrdersPage.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
 import AdminIcon from '@/components/icons/AdminIcon.vue'
 import StatusBadge from '@/components/ui/StatusBadge.vue'
+import BaseModal from '@/components/ui/BaseModal.vue'
 import OrderDetailContent from '@/views/orders/components/OrderDetailContent.vue'
 import OrderAddModal from '@/views/orders/components/OrderAddModal.vue'
 import { useOrdersPageContext } from '@/composables/useOrdersPage'
 import { ORDER_TABS } from '@/utils/orderStatus'
 import { formatCurrency, formatDateTime, formatMeterage } from '@/utils/format'
 
+const isMobile = useMediaQuery('(max-width: 767px)')
+
 const {
   activeTab,
   selectedOrderId,
@@ -14,8 +18,11 @@ const {
   filteredOrders,
   selectedOrder,
   showDetailPanel,
+  showDetailModal,
   selectOrder,
+  openOrderDetail,
   closeDetailPanel,
+  closeDetailModal,
   settlementLabel,
   goPricing,
   goChecks,
@@ -24,6 +31,35 @@ const {
   statusSaving,
   openAddModal,
 } = useOrdersPageContext()
+
+function openDetail(order: (typeof filteredOrders.value)[number]) {
+  if (isMobile.value) {
+    selectOrder(order, true)
+    return
+  }
+  openOrderDetail(order)
+}
+
+function handlePricing() {
+  if (!selectedOrder.value) return
+  closeDetailModal()
+  closeDetailPanel()
+  goPricing(selectedOrder.value)
+}
+
+function handleChecks() {
+  if (!selectedOrder.value) return
+  closeDetailModal()
+  closeDetailPanel()
+  goChecks(selectedOrder.value)
+}
+
+function handleCashReceipt() {
+  if (!selectedOrder.value) return
+  closeDetailModal()
+  closeDetailPanel()
+  goCashReceipt(selectedOrder.value)
+}
 </script>
 
 <template>
@@ -77,7 +113,7 @@ const {
         type="button"
         class="admin-card-item"
         :class="{ selected: selectedOrderId === order.id }"
-        @click="selectOrder(order, true)"
+        @click="openDetail(order)"
       >
         <div class="admin-card-item__header">
           <p class="admin-card-item__title">{{ order.orderNumber }}</p>
@@ -92,7 +128,11 @@ const {
       </button>
     </div>
 
-    <div class="admin-detail-panel" :class="{ open: showDetailPanel && selectedOrder }">
+    <!-- Mobile: full-screen slide panel -->
+    <div
+      class="admin-detail-panel compact-orders__mobile-panel"
+      :class="{ open: isMobile && showDetailPanel && selectedOrder }"
+    >
       <div v-if="selectedOrder" class="admin-detail-panel__inner">
         <div class="admin-detail-panel__header">
           <button
@@ -110,15 +150,36 @@ const {
             :order="selectedOrder"
             :settlement-label="settlementLabel"
             :status-saving="statusSaving"
-            @pricing="goPricing(selectedOrder)"
-            @checks="goChecks(selectedOrder)"
-            @cash-receipt="goCashReceipt(selectedOrder)"
+            @pricing="handlePricing"
+            @checks="handleChecks"
+            @cash-receipt="handleCashReceipt"
             @status="changeStatus"
           />
         </div>
       </div>
     </div>
 
+    <!-- Tablet / small desktop: modal -->
+    <BaseModal
+      :open="!isMobile && showDetailModal && !!selectedOrder"
+      title="جزئیات سفارش"
+      size="xl"
+      @close="closeDetailModal"
+    >
+      <template v-if="selectedOrder">
+        <p class="compact-orders__modal-breadcrumb">سفارش‌ها / جزئیات سفارش</p>
+        <OrderDetailContent
+          :order="selectedOrder"
+          :settlement-label="settlementLabel"
+          :status-saving="statusSaving"
+          @pricing="handlePricing"
+          @checks="handleChecks"
+          @cash-receipt="handleCashReceipt"
+          @status="changeStatus"
+        />
+      </template>
+    </BaseModal>
+
     <OrderAddModal />
   </div>
 </template>
@@ -149,6 +210,7 @@ const {
   background: transparent;
   font-size: 0.875rem;
   outline: none;
+  color: var(--color-text);
 }
 
 .admin-card-item {
@@ -162,4 +224,16 @@ const {
   height: 100%;
   background: var(--color-bg);
 }
+
+.compact-orders__modal-breadcrumb {
+  margin: 0 0 16px;
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+}
+
+@media (min-width: 768px) {
+  .compact-orders__mobile-panel {
+    display: none !important;
+  }
+}
 </style>

src/views/orders/components/OrderDetailContent.vue

@@ -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>