vmall/apps/admin/pages/points-orders.vue

<script setup lang="ts">
import type { IntegralOrder, IntegralOrderStatus } from "@vmall/shared";

definePageMeta({ middleware: "auth" });

const { $api } = useNuxtApp();
const { locale, t } = useI18n();

const orders = ref<IntegralOrder[]>([]);
const loading = ref(true);
const actionId = ref("");
const error = ref("");
const notice = ref("");

function rewardName(order: IntegralOrder): string {
  return order.items.map((line) => line.name[locale.value] ?? line.name.en).join(", ");
}

function statusClass(status: IntegralOrderStatus): string {
  if (status === "fulfilled") return "green";
  if (status === "cancelled") return "red";
  return "orange";
}

async function load(): Promise<void> {
  loading.value = true;
  error.value = "";
  try {
    const page = await $api.admin.listPointsRedemptions();
    orders.value = page.items;
  } catch (err: unknown) {
    error.value = err instanceof Error ? err.message : t("common.error");
  } finally {
    loading.value = false;
  }
}

async function transition(
  order: IntegralOrder,
  action: "fulfill" | "cancel",
): Promise<void> {
  actionId.value = order.id;
  error.value = "";
  notice.value = "";
  try {
    if (action === "fulfill") await $api.admin.fulfillRedemption(order.id);
    else await $api.admin.cancelRedemption(order.id);
    notice.value =
      action === "fulfill"
        ? t("admin.redemptionFulfilled")
        : t("admin.redemptionCancelled");
    await load();
  } catch (err: unknown) {
    error.value = err instanceof Error ? err.message : t("common.error");
  } finally {
    actionId.value = "";
  }
}

onMounted(() => void load());
</script>

<template>
  <div class="page">
    <h1 class="page-title">{{ $t("admin.pointsOrderManagement") }}</h1>
    <p v-if="error" class="error-text" role="alert">{{ error }}</p>
    <p v-if="notice" class="muted" role="status">{{ notice }}</p>

    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
    <div v-else-if="orders.length === 0" class="card muted">{{ $t("common.empty") }}</div>
    <div v-else class="table-wrap card">
      <table class="table">
        <thead>
          <tr>
            <th>{{ $t("admin.redemptionNo") }}</th>
            <th>{{ $t("admin.redemptionCustomer") }}</th>
            <th>{{ $t("admin.redemptionReward") }}</th>
            <th>{{ $t("admin.redemptionPoints") }}</th>
            <th>{{ $t("admin.created") }}</th>
            <th>{{ $t("admin.redemptionStatus") }}</th>
            <th>{{ $t("common.actions") }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="order in orders" :key="order.id">
            <td>{{ order.order_no }}</td>
            <td class="muted">{{ order.user_id }}</td>
            <td>{{ rewardName(order) }}</td>
            <td>{{ order.total_points }}</td>
            <td>{{ order.created_at.slice(0, 10) }}</td>
            <td>
              <span class="badge" :class="statusClass(order.status)">
                {{ $t(`admin.redemptionStatuses.${order.status}`) }}
              </span>
            </td>
            <td class="action-row">
              <template v-if="order.status === 'pending_fulfillment'">
                <button
                  class="btn sm primary"
                  type="button"
                  :disabled="actionId === order.id"
                  @click="transition(order, 'fulfill')"
                >
                  {{ $t("admin.fulfillRedemption") }}
                </button>
                <button
                  class="btn sm"
                  type="button"
                  :disabled="actionId === order.id"
                  @click="transition(order, 'cancel')"
                >
                  {{ $t("admin.cancelRedemption") }}
                </button>
              </template>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped>
.table-wrap {
  overflow-x: auto;
  padding: 0;
}
.table {
  min-width: 980px;
}
.action-row {
  display: flex;
  gap: 8px;
}
</style>