tehran_taj/apps/user-app-v2/src/views/user/OrdersView.vue

<!--
  Ported from legacy henza_pwa/src/views/user/src/components/Orders.vue,
  restyled into the redesigned design language (see components/home/* and
  HomeView).

  Adapted (unchanged from the previous version):
  - Status filter chips use our real OrderStatus enum values directly (see
    utils/orderStatus.ts) rather than legacy's own inconsistent tab labels.
    They are chips now instead of ant Tabs, which lets them scroll
    horizontally like every other filter rail in the redesign.
  - Fetches paginated order history via GET /customer/me/orders (page /
    status / q). Infinite-scroll like ReportView; filters run server-side
    so a status chip never misses rows on later pages.
  - Search matches against `orderNumber` (our real user-facing identifier)
    instead of legacy's numeric `id`.

  DROPPED, unchanged: "دریافت فاکتور" — legacy's handler opened a hardcoded
  link to the real legacy production domain. Not merely unimplemented; an
  external production URL that must never be carried into this port. No
  invoice-generation endpoint exists in the new API either.

  The detail view is a bottom Drawer rather than a full-screen ant Modal with
  hand-written overrides, matching how every other detail surface in the
  redesign opens (product detail, cart note, ledger entry).
-->
<template>
  <div class="ord">
    <PageBar title="سفارشات" :back="false">
      <template #below>
        <div class="ord__barExtra">
          <SearchInput @search="readSearch" place-holder="جستجوی شماره سفارش" />

          <div class="ord__chips no-scrollbar">
            <button
              v-for="item in tabs"
              :key="item.key"
              type="button"
              class="ord__chip"
              :class="{ 'is-on': activeTab === item.key }"
              @click="activeTab = item.key"
            >
              {{ item.title }}
            </button>
          </div>
        </div>
      </template>
    </PageBar>

    <Spinner :spinning="loading && !orders.length" tip="درحال دریافت اطلاعات">
      <AppPullRefresh v-model="refreshing" @refresh="onRefresh">
        <container class="ord__body">
        <template v-if="orders.length">
          <div class="ord__list">
            <OrderCard v-for="item in orders" :key="item.id" :value="item" @view="openDetail" />
          </div>
        </template>

        <section v-else-if="!loading && !failed" class="ord__empty">
          <Icon icon="vuesax-linear:box" size="26" />
          <p>سفارشی با این مشخصات پیدا نشد.</p>
        </section>

        <section v-if="failed" class="ord__empty">
          <Icon icon="vuesax-linear:danger" size="26" />
          <p>دریافت سفارش‌ها با خطا روبه‌رو شد.</p>
          <button type="button" class="ord__retry" @click="reload">تلاش دوباره</button>
        </section>

        <div v-if="loading && orders.length" class="ord__more">در حال دریافت…</div>
        <div ref="sentinel" class="ord__sentinel" />
      </container>
      </AppPullRefresh>
    </Spinner>

    <Drawer
      v-model:visible="viewData.model"
      placement="bottom"
      v-if="viewData.item"
      :closable="false"
      height="100vh"
      class="rtl"
      :bodyStyle="{ padding: 0, position: 'relative' }"
    >
      <div class="detail">
        <header class="detail__bar">
          <button type="button" class="detail__close" aria-label="بستن" @click="closeDetail">
            <Icon icon="vuesax-linear:arrow-right-1" size="20" />
          </button>
          <h2 class="detail__title">جزئیات سفارش</h2>
          <button
            type="button"
            class="detail__trail"
            aria-label="تاریخچه وضعیت"
            @click="timelineOpen = true"
          >
            <Icon icon="vuesax-linear:clock-1" size="18" />
          </button>
        </header>

        <div class="detail__scroll">
          <!-- Headline facts — order path lives in the timeline sheet (header clock). -->
          <section class="detail__block">
            <div class="detail__headline">
              <div class="detail__idBlock">
                <div class="detail__eyebrow">شماره سفارش</div>
                <div class="detail__number">{{ viewData.item.orderNumber }}</div>
              </div>
              <span
                class="detail__status"
                :style="{ background: modalColor.background, color: modalColor.font }"
              >
                {{ modalStatusLabel }}
              </span>
            </div>

            <dl class="detail__specs">
              <div class="detail__spec">
                <dt>تعداد کالاها</dt>
                <dd>{{ viewData.item.items.length }} آیتم</dd>
              </div>
              <div class="detail__spec">
                <dt>وزن سفارش</dt>
                <dd>{{ parseFloat(viewData.item.totalGoldWeightGrams).toFixed(2) }} گرم</dd>
              </div>
              <div class="detail__spec">
                <dt>تاریخ سفارش</dt>
                <dd>{{ jdate(viewData.item.createdAt) }}</dd>
              </div>
            </dl>
          </section>

          <!-- Items -->
          <section class="detail__block">
            <h3 class="detail__blockTitle">آیتم‌های سفارش</h3>
            <div class="detail__items">
              <OrderItemCard v-for="item in viewData.item.items" :key="item.id" :value="item" />
            </div>
          </section>
        </div>
      </div>
    </Drawer>

    <!-- Status history as an island action sheet (same pattern as cart note). -->
    <Drawer
      v-model:visible="timelineOpen"
      placement="bottom"
      :closable="false"
      :zIndex="1100"
      height="70%"
      class="rtl island-sheet"
      :bodyStyle="{ padding: 0 }"
    >
      <div class="tlSheet">
        <header class="tlSheet__banner">
          <span class="tlSheet__chip">وضعیت</span>
          <span class="tlSheet__dash" aria-hidden="true" />
          <span
            v-if="viewData.item"
            class="tlSheet__badge"
            :style="{
              background: modalColor.background,
              color: modalColor.font,
            }"
          >
            <Icon icon="vuesax-linear:tick-circle" size="14" />
            {{ modalStatusLabel }}
          </span>
        </header>

        <ol v-if="timelinePath.length" class="tlSheet__rail">
          <li
            v-for="(node, index) in timelinePath"
            :key="node.status"
            class="tlSheet__node"
            :class="[`is-${node.state}`]"
          >
            <div class="tlSheet__axis" aria-hidden="true">
              <span
                v-if="node.state === 'current'"
                class="tlSheet__halo"
                :style="{ color: orderStatusColor(node.status).font }"
              />
              <span class="tlSheet__marker" :style="markerStyle(node)">
                <Icon :icon="orderStatusIcon(node.status)" size="16" />
              </span>
              <span
                v-if="index < timelinePath.length - 1"
                class="tlSheet__stem"
                :style="node.state === 'pending' ? undefined : stemStyle(node.status)"
              />
            </div>

            <div class="tlSheet__main">
              <div class="tlSheet__row">
                <div class="tlSheet__copy">
                  <div class="tlSheet__status">{{ orderStatusLabel(node.status) }}</div>
                  <p class="tlSheet__blurb">{{ orderStatusBlurb(node.status) }}</p>
                </div>
                <time v-if="node.at" class="tlSheet__when" :datetime="node.at">
                  {{ jtimelineWhen(node.at) }}
                </time>
                <span v-else class="tlSheet__when is-wait">در انتظار</span>
              </div>
            </div>
          </li>
        </ol>

        <p v-else class="tlSheet__empty">مسیری برای این سفارش ثبت نشده است.</p>
      </div>
    </Drawer>
  </div>
</template>

<script setup lang="ts">
import { computed, nextTick, onActivated, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
import { Drawer } from 'ant-design-vue'
import AppPullRefresh from '../../components/ui/AppPullRefresh.vue'
import Icon from '../../components/icon/Icon.vue'
import PageBar from '../../components/ui/PageBar.vue'
import Spinner from '../../components/Spinner.vue'
import SearchInput from '../../components/search/SearchInput.vue'
import OrderCard from '../../components/product/OrderCard.vue'
import OrderItemCard from '../../components/product/OrderItemCard.vue'
import {
  ORDER_PIPELINE,
  ORDER_STATUS_LABELS,
  orderStatusBlurb,
  orderStatusColor,
  orderStatusIcon,
  orderStatusLabel,
} from '../../utils/orderStatus'
import { jdate, jtimelineWhen } from '../../utils/filters'
import { useSessionStore } from '../../stores/session'
import { api, type OrderDetail } from '../../api/client'
import { useQueryCache, KEYS } from '../../stores/queryCache'

type TimelineNode = {
  status: string
  at: string | null
  state: 'done' | 'current' | 'pending'
}

const session = useSessionStore()
const cache = useQueryCache()

const tabs = [
  { title: 'همه', key: 'ALL' },
  { title: ORDER_STATUS_LABELS.SUSPENDED, key: 'SUSPENDED' },
  { title: ORDER_STATUS_LABELS.PLACED, key: 'PLACED' },
  { title: ORDER_STATUS_LABELS.ADMIN_APPROVED, key: 'ADMIN_APPROVED' },
  { title: ORDER_STATUS_LABELS.SOURCING, key: 'SOURCING' },
  { title: ORDER_STATUS_LABELS.PREPARING, key: 'PREPARING' },
  { title: ORDER_STATUS_LABELS.DELIVERED_TO_AGENT, key: 'DELIVERED_TO_AGENT' },
  { title: ORDER_STATUS_LABELS.DELIVERED_TO_CUSTOMER, key: 'DELIVERED_TO_CUSTOMER' },
  { title: ORDER_STATUS_LABELS.CANCELLED, key: 'CANCELLED' },
]
const activeTab = ref('ALL')

const orders = ref<OrderDetail[]>([])
const page = ref(1)
const hasMore = ref(true)
const loading = ref(false)
const refreshing = ref(false)
const failed = ref(false)
const searchTerm = ref<string | undefined>(undefined)
const sentinel = ref<HTMLElement | null>(null)
let observer: IntersectionObserver | null = null
/** Bumped on every filter/reload so an in-flight page response is dropped. */
let fetchSeq = 0

function readSearch(value: string | undefined) {
  searchTerm.value = value
}

async function fetchPage() {
  if (!session.isLoggedIn) {
    orders.value = []
    hasMore.value = false
    return
  }
  if (loading.value || !hasMore.value) return
  const my = fetchSeq
  loading.value = true
  failed.value = false
  try {
    const data = await api.getMyOrders({
      page: page.value,
      status: activeTab.value,
      q: searchTerm.value,
    })
    if (my !== fetchSeq) return
    const batch = data.result ?? []
    orders.value = page.value === 1 ? batch : [...orders.value, ...batch]
    if (batch.length < (data.limit ?? 20)) hasMore.value = false
    else page.value += 1
  } catch (e) {
    if (my !== fetchSeq) return
    failed.value = true
    hasMore.value = false
    console.log(e)
  } finally {
    if (my === fetchSeq) loading.value = false
  }
}

function resetList() {
  orders.value = []
  page.value = 1
  hasMore.value = true
  failed.value = false
}

async function reload() {
  fetchSeq += 1
  loading.value = false
  resetList()
  await fetchPage()
}

const viewData = reactive<{ model: boolean; item: OrderDetail | null }>({ model: false, item: null })
const timelineOpen = ref(false)
const modalStatusLabel = computed(() =>
  viewData.item ? orderStatusLabel(viewData.item.status) : '',
)
const modalColor = computed(() =>
  viewData.item ? orderStatusColor(viewData.item.status) : orderStatusColor('PLACED'),
)

/** Pending stays grey. Reached steps colour the icon/border only — fill stays opaque so the halo never shows through. */
function markerStyle(node: TimelineNode) {
  if (node.state === 'pending') return undefined
  const c = orderStatusColor(node.status)
  return { color: c.font, borderColor: c.font }
}

function stemStyle(status: string) {
  return { background: orderStatusColor(status).font }
}

/**
 * Full order path for the timeline sheet (replaces the old detail stepper).
 * Past steps are dated from statusEvents; future ones stay «در انتظار».
 */
const timelinePath = computed((): TimelineNode[] => {
  const item = viewData.item
  if (!item) return []

  const times = new Map<string, string>()
  for (const ev of item.statusEvents ?? []) {
    if (!times.has(ev.toStatus)) times.set(ev.toStatus, ev.createdAt)
  }
  if (!times.has(item.status)) times.set(item.status, item.createdAt)

  if (item.status === 'SUSPENDED') {
    return [
      { status: 'SUSPENDED', at: times.get('SUSPENDED') ?? item.createdAt, state: 'current' },
      ...ORDER_PIPELINE.map((status) => ({ status, at: null, state: 'pending' as const })),
    ]
  }

  if (item.status === 'CANCELLED') {
    const prior = ORDER_PIPELINE.filter((status) => times.has(status)).map((status) => ({
      status,
      at: times.get(status) ?? null,
      state: 'done' as const,
    }))
    return [
      ...prior,
      { status: 'CANCELLED', at: times.get('CANCELLED') ?? item.createdAt, state: 'current' },
    ]
  }

  const idx = (ORDER_PIPELINE as readonly string[]).indexOf(item.status)
  const currentIdx = idx >= 0 ? idx : 0
  return ORDER_PIPELINE.map((status, i) => ({
    status,
    at: times.get(status) ?? (i === currentIdx ? item.createdAt : null),
    state: i < currentIdx ? 'done' : i === currentIdx ? 'current' : 'pending',
  }))
})

function openDetail(item: OrderDetail) {
  viewData.item = item
  viewData.model = true
  timelineOpen.value = false
}

function closeDetail() {
  timelineOpen.value = false
  viewData.model = false
}


async function onRefresh() {
  try {
    cache.invalidate(KEYS.orders)
    await reload()
  } finally {
    refreshing.value = false
  }
}

watch([activeTab, searchTerm], () => {
  void reload()
})

/**
 * Owner ruling 2026-10-12: fetch what the screen needs each time it is opened.
 * Status changes on the ADMIN side, so each visit reloads from page 1.
 *
 * `onActivated` as well as `onMounted`: this view is in MasterLayout's
 * keep-alive list. `activatedOnce` guards the first visit where Vue runs both.
 */
onMounted(async () => {
  await reload()
  await nextTick()
  if (typeof IntersectionObserver !== 'undefined') {
    observer = new IntersectionObserver((entries) => {
      if (entries.some((e) => e.isIntersecting)) void fetchPage()
    })
    if (sentinel.value) observer.observe(sentinel.value)
  }
})

let activatedOnce = false
onActivated(() => {
  if (activatedOnce) void reload()
  activatedOnce = true
})

onBeforeUnmount(() => observer?.disconnect())
</script>

<style scoped lang="less">
.ord {
  background: @page;
  min-height: 100vh;
}

.ord__barExtra {
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px 0;
}

.ord__chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 8px 0px 8px -16px;
  scroll-snap-type: x proximity;
}

.ord__chip {
  scroll-snap-align: start;
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  color: @inkSoft;
  background: @canvas;
  border: 1px solid @hairline;
  transition: all 0.2s ease;
}

.ord__chip.is-on {
  color: #fff;
  background: @wine;
  border-color: @wine;
}

.ord__chip:active {
  transform: scale(0.97);
}

.ord__body {
  padding-top: 160px;
  padding-bottom: 90px;
}

.ord__list {
  display: flex;
  flex-direction: column;
  padding-top: 16px;
  gap: 11px;
}

.ord__empty {
  margin-top: 8px;
  padding: 34px 20px;
  border: 1px dashed @hairline;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: @inkFaint;
}
.ord__empty p {
  margin: 0;
  font-size: 12.5px;
}

.ord__retry {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid @hairline;
  background: @canvas;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.ord__more,
.ord__sentinel {
  padding: 12px 0;
  text-align: center;
  font-size: 12px;
  color: @inkMuted;
}

/* ── Detail drawer ─────────────────────────────────────────────────── */
.detail {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: @canvas;
}

.detail__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid @hairline;
  background: alpha(@canvas, 92%);
  backdrop-filter: blur(14px);
}

.detail__title {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: @ink;
}

.detail__close {
  width: 38px;
  height: 38px;
  border: 0;
  cursor: pointer;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: @ink;
  background: @hairlineSoft;
}

.detail__trail {
  width: 38px;
  height: 38px;
  border: 0;
  cursor: pointer;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: @ink;
  background: @hairlineSoft;
}

.detail__trail:active {
  transform: scale(0.96);
}

.detail__scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 40px;
}

.detail__block {
  margin-bottom: 22px;
}

.detail__blockTitle {
  margin: 0 0 11px;
  font-size: 12.5px;
  font-weight: 500;
  color: @ink;
}

.tlSheet {
  padding: 4px 18px 22px;
  max-height: 100%;
  overflow-y: auto;
}

.tlSheet__banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.tlSheet__chip {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid @hairline;
  background: @canvas;
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04);
  font-size: 11px;
  font-weight: 500;
  color: @inkSoft;
}

.tlSheet__dash {
  flex: 1 1 auto;
  height: 0;
  border-top: 1.5px dashed @hairline;
  min-width: 16px;
}

.tlSheet__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.tlSheet__rail {
  list-style: none;
  margin: 0;
  padding: 0 2px;
}

.tlSheet__node {
  display: flex;
  gap: 12px;
  align-items: stretch;
  min-height: 64px;
}

.tlSheet__axis {
  flex: 0 0 40px;
  width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Soft shadow-like halo — sits behind the opaque marker disc. */
.tlSheet__halo {
  position: absolute;
  top: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.tlSheet__halo::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, currentColor 32%, transparent) 0%,
    color-mix(in srgb, currentColor 12%, transparent) 38%,
    transparent 70%
  );
  filter: blur(1.5px);
  opacity: 0;
  animation: tlSheetHalo 4.8s ease-in-out infinite;
}

@keyframes tlSheetHalo {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tlSheet__halo::before {
    animation: none;
    opacity: 0.35;
  }
}

.tlSheet__marker {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: @canvas;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}

.tlSheet__node.is-pending .tlSheet__marker {
  /* Tailwind gray-400 — clearer than hairline for inactive dashed rings */
  color: #9ca3af;
  background: @canvas;
  border-color: #9ca3af;
  border-style: dashed;
}

.tlSheet__node.is-done .tlSheet__marker,
.tlSheet__node.is-current .tlSheet__marker {
  background: @canvas;
}

.tlSheet__node.is-pending .tlSheet__status,
.tlSheet__node.is-pending .tlSheet__blurb,
.tlSheet__node.is-pending .tlSheet__when {
  color: @inkFaint;
}

.tlSheet__stem {
  flex: 1 1 auto;
  width: 1.5px;
  margin: 4px 0;
  background: @hairline;
  min-height: 16px;
}

.tlSheet__node.is-pending .tlSheet__stem {
  background: @hairlineSoft;
  border-inline-start: 0;
  background-image: repeating-linear-gradient(
    180deg,
    @hairline 0 4px,
    transparent 4px 8px
  );
  width: 2px;
}

.tlSheet__main {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
  padding-bottom: 18px;
}

.tlSheet__node:last-child .tlSheet__main {
  padding-bottom: 4px;
}

.tlSheet__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tlSheet__copy {
  min-width: 0;
  flex: 1;
}

.tlSheet__status {
  font-size: 13px;
  font-weight: 500;
  color: @ink;
  line-height: 1.35;
}

.tlSheet__blurb {
  margin: 3px 0 0;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
  color: @inkFaint;
}

.tlSheet__when {
  flex: 0 0 auto;
  padding-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: @inkFaint;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tlSheet__when.is-wait {
  font-weight: 500;
  opacity: 0.85;
}

.tlSheet__empty {
  margin: 4px 0 0;
  padding: 20px 12px;
  font-size: 12px;
  color: @inkFaint;
  text-align: center;
  border: 1px dashed @hairline;
  border-radius: 14px;
}

.detail__headline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
}

.detail__idBlock {
  min-width: 0;
  flex: 1;
}

.detail__eyebrow {
  font-size: 11px;
  color: @inkFaint;
}

.detail__number {
  padding-top: 3px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: @inkSoft;
  word-break: break-all;
}

.detail__status {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
}

.detail__specs {
  margin: 0;
  border: 1px solid @hairline;
  border-radius: 16px;
  overflow: hidden;
}

.detail__spec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid @hairlineSoft;
}

.detail__spec:last-child {
  border-bottom: 0;
}

.detail__spec dt {
  margin: 0;
  font-size: 12px;
  color: @inkFaint;
}

.detail__spec dd {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: @ink;
}

.detail__items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>