Fix order tracking desktop layout and gate settlement until invoice pricing.

Show sidebar labels on tablet, improve theme-safe UI, and keep Jalali dates on tracking.

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

src/components/orders/OrderTrackingTimeline.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import type { Order, OrderStatus } from '@/types'
 import { ORDER_TRACKING_STEPS } from '@/utils/constants'
 import { getStepTimestamp, getTrackingStepIndex } from '@/utils/orderTracking'
+import { formatDateTime } from '@/utils/format'
 
 const props = defineProps<{
   order: Order
@@ -16,24 +17,9 @@ function stepState(index: number): 'done' | 'current' | 'pending' {
   return 'pending'
 }
 
-function formatStepTime(date: string | null) {
-  if (!date) return null
-  const d = new Date(date)
-  const datePart = new Intl.DateTimeFormat('fa-IR-u-ca-persian', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-  }).format(d)
-  const timePart = new Intl.DateTimeFormat('fa-IR', {
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: false,
-  }).format(d)
-  return `${datePart} - ${timePart}`
-}
-
 function timestampFor(step: OrderStatus) {
-  return formatStepTime(getStepTimestamp(props.order, step))
+  const raw = getStepTimestamp(props.order, step)
+  return raw ? formatDateTime(raw) : null
 }
 </script>
 
@@ -46,13 +32,16 @@ function timestampFor(step: OrderStatus) {
       :class="`tracking-timeline__item--${stepState(index)}`"
     >
       <div class="tracking-timeline__marker-wrap">
-        <div class="tracking-timeline__line" />
+        <div class="tracking-timeline__line" aria-hidden="true" />
         <div class="tracking-timeline__marker">
           <span v-if="stepState(index) === 'done'" class="tracking-timeline__check">✓</span>
         </div>
       </div>
 
-      <div class="tracking-timeline__content">
+      <div
+        class="tracking-timeline__content"
+        :class="{ 'tracking-timeline__content--current': stepState(index) === 'current' }"
+      >
         <strong class="tracking-timeline__label">{{ step.label }}</strong>
         <span v-if="timestampFor(step.status)" class="tracking-timeline__time">
           {{ timestampFor(step.status) }}
@@ -66,36 +55,34 @@ function timestampFor(step: OrderStatus) {
 .tracking-timeline {
   display: flex;
   flex-direction: column;
-  gap: 0;
 }
 
 .tracking-timeline__item {
   display: grid;
-  grid-template-columns: 28px 1fr;
-  gap: 12px;
-  padding: 6px 0;
-}
-
-.tracking-timeline__item--current {
-  margin: 4px 0;
-  padding: 12px;
-  border-radius: 14px;
-  background: var(--color-primary-soft);
-  border: 1px solid var(--color-border);
+  grid-template-columns: 28px minmax(0, 1fr);
+  column-gap: 12px;
+  align-items: start;
+  /* Same vertical rhythm for every step so the connector stays continuous */
+  min-height: 44px;
 }
 
 .tracking-timeline__marker-wrap {
   position: relative;
   display: flex;
   justify-content: center;
+  align-self: stretch;
+  width: 28px;
 }
 
 .tracking-timeline__line {
   position: absolute;
   top: 22px;
-  bottom: -10px;
+  bottom: 0;
+  left: 50%;
   width: 2px;
+  transform: translateX(-50%);
   background: var(--color-border);
+  z-index: 0;
 }
 
 .tracking-timeline__item:last-child .tracking-timeline__line {
@@ -106,16 +93,22 @@ function timestampFor(step: OrderStatus) {
   background: var(--color-success);
 }
 
+.tracking-timeline__item--current .tracking-timeline__line {
+  background: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
+}
+
 .tracking-timeline__marker {
+  position: relative;
+  z-index: 1;
   width: 22px;
   height: 22px;
+  margin-top: 2px;
   border-radius: 50%;
   background: var(--color-border);
   border: 2px solid var(--color-border);
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1;
   flex-shrink: 0;
 }
 
@@ -127,7 +120,7 @@ function timestampFor(step: OrderStatus) {
 .tracking-timeline__item--current .tracking-timeline__marker {
   background: var(--color-primary);
   border-color: var(--color-primary);
-  box-shadow: 0 0 0 4px var(--color-primary-soft);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent);
 }
 
 .tracking-timeline__item--pending .tracking-timeline__marker {
@@ -136,7 +129,7 @@ function timestampFor(step: OrderStatus) {
 }
 
 .tracking-timeline__check {
-  color: #fff;
+  color: var(--color-surface);
   font-size: 0.75rem;
   font-weight: 700;
   line-height: 1;
@@ -144,7 +137,14 @@ function timestampFor(step: OrderStatus) {
 
 .tracking-timeline__content {
   min-width: 0;
-  padding-top: 1px;
+  padding: 2px 0 14px;
+}
+
+.tracking-timeline__content--current {
+  padding: 8px 12px 10px;
+  border-radius: 12px;
+  background: var(--color-primary-soft);
+  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
 }
 
 .tracking-timeline__label {