tehran_taj/apps/user-app/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 real order history via the already-existing GET
    /customers/:id/orders endpoint, filtered client-side by chip (that
    endpoint has no server-side status filter — small enough dataset that
    client-side filtering is reasonable, and apps/api stays untouched).
  - 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-to="home">
      <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" tip="درحال دریافت اطلاعات">
      <PullRefresh v-model="refreshing" @refresh="onRefresh">
      <container class="ord__body">
        <template v-if="filteredOrders.length">
          <div class="ord__list">
            <OrderCard v-for="item in filteredOrders" :key="item.id" :value="item" @view="openDetail" />
          </div>
        </template>

        <section v-else-if="!loading" class="ord__empty">
          <Icon icon="vuesax-linear:box" size="26" />
          <p>سفارشی با این مشخصات پیدا نشد.</p>
        </section>
      </container>
      </PullRefresh>
    </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="viewData.model = false">
            <Icon icon="vuesax-linear:arrow-right-1" size="20" />
          </button>
          <h2 class="detail__title">جزئیات سفارش</h2>
          <span class="detail__spacer" aria-hidden="true" />
        </header>

        <div class="detail__scroll">
          <!-- Progress -->
          <section class="detail__block">
            <div class="detail__steps">
              <div
                v-for="(step, index) in ORDER_STEPS"
                :key="step"
                class="detail__step"
                :class="{ 'is-done': index <= currentStep, 'is-active': index === currentStep }"
              >
                <span class="detail__stepDot">{{ index + 1 }}</span>
                <span class="detail__stepTitle">{{ step }}</span>
              </div>
            </div>
          </section>

          <!-- Headline facts -->
          <section class="detail__block">
            <div class="detail__headline">
              <div>
                <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>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { Drawer } from 'ant-design-vue'
import { PullRefresh } from 'vant'
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_STATUS_COLORS,
  ORDER_STATUS_LABELS,
  ORDER_STEPS,
  orderStepIndex,
} from '../../utils/orderStatus'
import { jdate } from '../../utils/filters'
import { useSessionStore } from '../../stores/session'
import { api, type OrderDetail } from '../../api/client'

const session = useSessionStore()

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 loading = ref(false)
const refreshing = ref(false)
const allOrders = ref<OrderDetail[]>([])
const searchTerm = ref<string | undefined>(undefined)

const filteredOrders = computed(() => {
  let list = allOrders.value
  if (activeTab.value !== 'ALL') list = list.filter((o) => o.status === activeTab.value)
  if (searchTerm.value) list = list.filter((o) => o.orderNumber.includes(searchTerm.value!))
  return list
})

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

async function loadOrders() {
  if (!session.isLoggedIn) return
  loading.value = true
  try {
    allOrders.value = await api.getMyOrders()
  } finally {
    loading.value = false
  }
}

const viewData = reactive<{ model: boolean; item: OrderDetail | null }>({ model: false, item: null })
const modalStatusLabel = computed(() =>
  viewData.item ? ORDER_STATUS_LABELS[viewData.item.status] ?? viewData.item.status : '',
)
const modalColor = computed(() => (viewData.item ? ORDER_STATUS_COLORS[viewData.item.status] : undefined))
const currentStep = computed(() => (viewData.item ? orderStepIndex(viewData.item.status) : 0))

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

async function onRefresh() {
  await loadOrders()
  refreshing.value = false
}

onMounted(loadOrders)
</script>

<style scoped lang="less">
.ord {
  background: @canvas;
  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: 600;
  white-space: nowrap;
  color: @inkSoft;
  background: @canvas;
  border: 1px solid @hairline;
  transition: all 0.2s ease;
}

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

.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;
}

/* ── 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: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
}

.detail__title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  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__spacer {
  display: block;
  width: 38px;
  height: 38px;
}

.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: 13px;
  font-weight: 800;
  color: @ink;
}

.detail__steps {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.detail__step {
  flex: 1 0 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  position: relative;
}

.detail__stepDot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 700;
  color: @inkFaint;
  background: @hairlineSoft;
  border: 1px solid @hairline;
  z-index: 1;
}

.detail__step.is-done .detail__stepDot {
  color: #fff;
  background: @ink;
  border-color: @ink;
}

.detail__step.is-active .detail__stepDot {
  color: #fff;
  background: @wine;
  border-color: @wine;
}

.detail__stepTitle {
  font-size: 10px;
  line-height: 1.5;
  color: @inkFaint;
}

.detail__step.is-done .detail__stepTitle {
  color: @inkSoft;
  font-weight: 600;
}

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

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

.detail__number {
  padding-top: 4px;
  font-size: 18px;
  font-weight: 800;
  color: @ink;
}

.detail__status {
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  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: 700;
  color: @ink;
}

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