fabric_trade_admin/src/views/checks/CheckManagementView.vue

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import AdminIcon from '@/components/icons/AdminIcon.vue'
import StatusBadge from '@/components/ui/StatusBadge.vue'
import { checks, orders } from '@/data/mockData'
import { formatCurrency, formatNumber } from '@/utils/format'

const route = useRoute()
const router = useRouter()

const activeTab = ref<'info' | 'images' | 'history'>('info')

const order = computed(() => orders.find((o) => o.id === route.params.id) ?? orders[0]!)

const orderChecks = computed(() => checks.filter((c) => c.orderId === order.value.id))

const totalCheckAmount = computed(() =>
  orderChecks.value.reduce((sum, c) => sum + c.amount, 0),
)

function goBack() {
  router.push('/orders')
}
</script>

<template>
  <div class="checks-page">
    <div class="admin-page-header">
      <div>
        <h1 class="admin-page-header__title">مدیریت چک‌ها</h1>
        <p class="admin-page-header__breadcrumb">سفارش‌ها / مدیریت سفارش</p>
      </div>
      <div class="checks-page__order-meta">
        <strong>{{ order.orderNumber }}</strong>
        <StatusBadge status="pending_check" />
      </div>
    </div>

    <div class="admin-tabs">
      <button
        type="button"
        class="admin-tab"
        :class="{ active: activeTab === 'info' }"
        @click="activeTab = 'info'"
      >
        اطلاعات چک‌ها ({{ orderChecks.length }})
      </button>
      <button
        type="button"
        class="admin-tab"
        :class="{ active: activeTab === 'images' }"
        @click="activeTab = 'images'"
      >
        تصاویر چک‌ها
      </button>
      <button
        type="button"
        class="admin-tab"
        :class="{ active: activeTab === 'history' }"
        @click="activeTab = 'history'"
      >
        تاریخچه بررسی
      </button>
    </div>

    <template v-if="activeTab === 'info'">
      <div class="admin-summary-grid">
        <div class="admin-summary-item">
          <p class="admin-summary-item__label">تعداد چک‌ها</p>
          <p class="admin-summary-item__value">{{ orderChecks.length }} فقره</p>
        </div>
        <div class="admin-summary-item">
          <p class="admin-summary-item__label">راس چک‌ها</p>
          <p class="admin-summary-item__value">
            <AdminIcon name="check" :size="14" />
            ۲ روز
          </p>
          <p class="checks-page__rass-date">تاریخ راس: ۱۴۰۳/۰۸/۰۶</p>
        </div>
        <div class="admin-summary-item">
          <p class="admin-summary-item__label">مجموع چک‌ها</p>
          <p class="admin-summary-item__value">{{ formatCurrency(totalCheckAmount) }}</p>
        </div>
        <div class="admin-summary-item">
          <p class="admin-summary-item__label">مبلغ کل سفارش</p>
          <p class="admin-summary-item__value">
            {{ order.totalAmount ? formatCurrency(order.totalAmount) : '—' }}
          </p>
        </div>
      </div>

      <div class="checks-page__table admin-card desktop-only">
        <div class="admin-table-wrap">
          <table class="admin-table">
            <thead>
              <tr>
                <th>ردیف</th>
                <th>مبلغ (تومان)</th>
                <th>بانک</th>
                <th>شناسه صیادی</th>
                <th>تاریخ سررسید</th>
                <th>وضعیت</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="check in orderChecks" :key="check.id">
                <td>{{ check.row }}</td>
                <td>{{ formatNumber(check.amount) }}</td>
                <td>{{ check.bankName }}</td>
                <td>{{ check.sayadId }}</td>
                <td>{{ check.dueDate }}</td>
                <td><StatusBadge status="pending_check_review" /></td>
                <td>
                  <div class="admin-action-group">
                    <button type="button" class="admin-btn admin-btn--outline-success admin-btn--xs">
                      تأیید
                      <AdminIcon name="chevron-down" :size="12" />
                    </button>
                    <button type="button" class="admin-btn admin-btn--outline admin-btn--xs">
                      مشاهده
                    </button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="compact-only admin-card-list">
        <article v-for="check in orderChecks" :key="check.id" class="admin-card-item">
          <div class="admin-card-item__header">
            <p class="admin-card-item__title">چک {{ check.row }} — {{ formatNumber(check.amount) }} تومان</p>
            <StatusBadge status="pending_check_review" />
          </div>
          <div class="admin-card-item__meta">
            <span>بانک {{ check.bankName }}</span>
            <span>سررسید {{ check.dueDate }}</span>
            <span dir="ltr">{{ check.sayadId }}</span>
          </div>
          <div class="admin-card-item__actions">
            <button type="button" class="admin-btn admin-btn--outline-success admin-btn--xs">
              تأیید
            </button>
            <button type="button" class="admin-btn admin-btn--outline admin-btn--xs">
              مشاهده
            </button>
          </div>
        </article>
      </div>

      <div class="checks-page__footer">
        <p class="checks-page__note">
          راس چک‌ها بر اساس تاریخ ثبت سفارش محاسبه شده است.
        </p>
        <div class="admin-action-group">
          <button type="button" class="admin-btn admin-btn--success">تأیید همه چک‌ها</button>
          <button type="button" class="admin-btn admin-btn--outline">
            <AdminIcon name="print" :size="16" />
            چاپ لیست‌ها
          </button>
          <button type="button" class="admin-btn admin-btn--outline admin-btn--sm" @click="goBack">
            بازگشت
          </button>
        </div>
      </div>
    </template>

    <div v-else class="admin-empty-placeholder admin-card">
      {{ activeTab === 'images' ? 'تصاویر چک‌ها' : 'تاریخچه بررسی' }} — به‌زودی
    </div>
  </div>
</template>

<style scoped>
.checks-page__order-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-size: 0.9375rem;
}

.checks-page__rass-date {
  margin: 4px 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

.checks-page__table {
  margin-top: 16px;
  overflow: hidden;
}

.checks-page__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  gap: 16px;
}

.checks-page__note {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
</style>