fabric_trade_admin/src/views/orders/components/DesktopOrdersPage.vue

<script setup lang="ts">
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 {
  activeTab,
  selectedOrderId,
  searchQuery,
  filteredOrders,
  selectedOrder,
  showDetailModal,
  openOrderDetail,
  closeDetailModal,
  settlementLabel,
  goPricing,
  goChecks,
  openAddModal,
} = useOrdersPageContext()

function handlePricing() {
  if (!selectedOrder.value) return
  closeDetailModal()
  goPricing(selectedOrder.value)
}

function handleChecks() {
  if (!selectedOrder.value) return
  closeDetailModal()
  goChecks(selectedOrder.value)
}
</script>

<template>
  <div class="orders-page">
    <div class="orders-page__list-panel admin-card">
      <div class="orders-page__list-header">
        <div>
          <h2 class="orders-page__list-title">سفارش‌ها</h2>
          <p class="orders-page__breadcrumb">داشبورد / سفارش‌ها</p>
        </div>
        <div class="orders-page__list-actions">
          <button type="button" class="admin-btn admin-btn--outline admin-btn--sm">
            <AdminIcon name="filter" :size="16" />
            فیلتر
          </button>
          <button type="button" class="admin-btn admin-btn--primary admin-btn--sm" @click="openAddModal">
            سفارش جدید
          </button>
        </div>
      </div>

      <div class="orders-page__search">
        <AdminIcon name="search" :size="18" />
        <input
          v-model="searchQuery"
          type="search"
          placeholder="جستجو در شماره سفارش، مشتری..."
          class="orders-page__search-input"
        />
      </div>

      <div class="admin-tabs">
        <button
          v-for="tab in ORDER_TABS"
          :key="tab.key"
          type="button"
          class="admin-tab"
          :class="{ active: activeTab === tab.key }"
          @click="activeTab = tab.key"
        >
          {{ tab.label }}
          <template v-if="'count' in tab && tab.count"> ({{ tab.count }})</template>
        </button>
      </div>

      <div class="admin-table-wrap">
        <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>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="order in filteredOrders"
              :key="order.id"
              :class="{ 'is-selected': selectedOrderId === order.id }"
              @click="openOrderDetail(order)"
            >
              <td>{{ order.orderNumber }}</td>
              <td>{{ order.customerName }}</td>
              <td>{{ settlementLabel(order.settlementMethod) }}</td>
              <td>{{ order.totalAmount ? formatCurrency(order.totalAmount) : '—' }}</td>
              <td>{{ formatMeterage(order.meterage) }}</td>
              <td><StatusBadge :status="order.status" /></td>
              <td>{{ formatDateTime(order.createdAt) }}</td>
              <td>
                <button type="button" class="orders-page__more-btn" @click.stop>
                  <AdminIcon name="more" :size="18" />
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="admin-pagination">
        <span>نمایش ۱ تا ۷ از ۱۰۳ سفارش</span>
        <div class="admin-pagination__pages">
          <button type="button" class="admin-pagination__page active">۱</button>
          <button type="button" class="admin-pagination__page">۲</button>
          <button type="button" class="admin-pagination__page">۳</button>
          <span>...</span>
          <button type="button" class="admin-pagination__page">۱۲</button>
        </div>
      </div>
    </div>

    <BaseModal
      :open="showDetailModal && !!selectedOrder"
      title="جزئیات سفارش"
      size="xl"
      @close="closeDetailModal"
    >
      <template v-if="selectedOrder">
        <p class="orders-page__breadcrumb orders-page__modal-breadcrumb">
          سفارش‌ها / جزئیات سفارش
        </p>
        <OrderDetailContent
          :order="selectedOrder"
          layout="desktop"
          :settlement-label="settlementLabel"
          @pricing="handlePricing"
          @checks="handleChecks"
        />
      </template>

      <template #footer>
        <button type="button" class="admin-btn admin-btn--outline admin-btn--sm">
          <AdminIcon name="sms" :size="16" />
          ارسال پیامک
        </button>
        <button type="button" class="admin-btn admin-btn--outline admin-btn--sm">
          <AdminIcon name="print" :size="16" />
          چاپ
        </button>
      </template>
    </BaseModal>

    <OrderAddModal />
  </div>
</template>

<style scoped>
.orders-page {
  min-height: calc(100dvh - var(--header-height) - 48px);
}

.orders-page__list-panel {
  padding: 20px;
  min-width: 0;
}

.orders-page__list-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.orders-page__list-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}

.orders-page__breadcrumb {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.orders-page__list-actions {
  display: flex;
  gap: 8px;
}

.orders-page__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-border-light);
  margin-bottom: 16px;
  color: var(--color-text-muted);
}

.orders-page__search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  outline: none;
}

.orders-page__more-btn {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  padding: 4px;
  border-radius: var(--radius-sm);
}

.admin-table tbody tr {
  cursor: pointer;
}

.admin-table tbody tr.is-selected {
  background: var(--color-primary-soft);
}

.orders-page__modal-breadcrumb {
  margin: 0 0 16px;
}
</style>