feat(admin): manage points products and redemptions

Platform operators get a points catalog screen (create, edit, publish and unpublish products with localized names, points price, stock, and ordering) and a redemption screen that lists orders and moves pending ones to fulfilled or cancelled. Both are reachable from the console navigation.
2026-09-18 12:43:00 +00:00
parent 059572f6f3
commit 68317c2040
4 changed files with 478 additions and 0 deletions
@@ -0,0 +1,135 @@
+<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>