From 653f13161acbff3d97e2dea93a6a7ff417f9abc7 Mon Sep 17 00:00:00 2001
From: Chengdong Zhang <chengdzhang@ebay.com>
Date: Thu, 17 Sep 2026 13:34:38 +0800
Subject: [PATCH] feat: three nuxt frontends, demo seed, rounding +
 money-exponent + rate-cast fixes, archived specs

---
 apps/admin/i18n.config.ts                     |  20 +-
 apps/admin/locales-extra.ts                   |  67 +++++
 apps/admin/middleware/auth.ts                 |  11 +
 apps/admin/nuxt.config.ts                     |   2 +-
 apps/admin/pages/currencies.vue               | 238 +++++++++++++++++
 apps/admin/pages/index.vue                    | 158 ++++++++++-
 apps/admin/pages/login.vue                    |  90 +++++++
 apps/admin/pages/orders.vue                   | 128 +++++++++
 apps/admin/pages/shops.vue                    | 152 +++++++++++
 apps/admin/pages/users.vue                    | 193 ++++++++++++++
 apps/api/src/money.rs                         |   5 +-
 apps/api/tests/catalog.rs                     |   9 +
 apps/mall/components/PriceText.vue            |  32 +++
 apps/mall/components/StatusBadge.vue          |  19 ++
 apps/mall/composables/usePrice.ts             |  60 +++++
 apps/mall/i18n.config.ts                      |  20 +-
 apps/mall/locales-extra.ts                    | 111 ++++++++
 apps/mall/middleware/auth.ts                  |  15 ++
 apps/mall/nuxt.config.ts                      |   3 +-
 apps/mall/pages/cart.vue                      | 134 ++++++++++
 apps/mall/pages/checkout.vue                  | 136 ++++++++++
 apps/mall/pages/index.vue                     | 146 ++++++++++-
 apps/mall/pages/invoices.vue                  |  65 +++++
 apps/mall/pages/login.vue                     |  39 +++
 apps/mall/pages/orders/[id].vue               | 197 ++++++++++++++
 apps/mall/pages/orders/index.vue              |  78 ++++++
 apps/mall/pages/products/[id].vue             | 143 ++++++++++
 apps/mall/pages/register.vue                  |  41 +++
 apps/shop-admin/components/ProductForm.vue    | 110 ++++++++
 apps/shop-admin/composables/useMoney.ts       |  25 ++
 apps/shop-admin/i18n.config.ts                |  20 +-
 apps/shop-admin/locales-extra.ts              | 125 +++++++++
 apps/shop-admin/middleware/auth.ts            |  22 ++
 apps/shop-admin/nuxt.config.ts                |   3 +-
 apps/shop-admin/pages/index.vue               | 127 ++++++++-
 apps/shop-admin/pages/invoices.vue            |  91 +++++++
 apps/shop-admin/pages/login.vue               |  47 ++++
 apps/shop-admin/pages/orders/[id].vue         | 245 ++++++++++++++++++
 apps/shop-admin/pages/orders/index.vue        | 110 ++++++++
 apps/shop-admin/pages/products/[id].vue       | 199 ++++++++++++++
 apps/shop-admin/pages/products/index.vue      | 137 ++++++++++
 apps/shop-admin/pages/products/new.vue        |  49 ++++
 apps/shop-admin/pages/shipments.vue           |  88 +++++++
 .../proposal.md                               |   0
 .../specs/cart/spec.md                        |   0
 .../specs/order/spec.md                       |   0
 .../2026-09-17-cart-checkout-orders/tasks.md  |  17 ++
 .../proposal.md                               |   0
 .../specs/catalog/spec.md                     |   0
 .../specs/currency/spec.md                    |   0
 .../2026-09-17-catalog-i18n-currency/tasks.md |  22 ++
 .../2026-09-17-foundation-auth}/proposal.md   |   0
 .../specs/auth/spec.md                        |   0
 .../specs/rbac/spec.md                        |   0
 .../2026-09-17-foundation-auth}/tasks.md      |  14 +-
 .../2026-09-17-frontend-apps/agent-admin.md   |  21 ++
 .../agent-conventions.md                      |  27 ++
 .../2026-09-17-frontend-apps/agent-mall.md    |  24 ++
 .../agent-shop-admin.md                       |  25 ++
 .../2026-09-17-frontend-apps}/proposal.md     |   0
 .../specs/frontend-admin/spec.md              |   0
 .../specs/frontend-mall/spec.md               |   0
 .../specs/frontend-shop-admin/spec.md         |   0
 .../archive/2026-09-17-frontend-apps/tasks.md |  22 ++
 .../proposal.md                               |   0
 .../specs/invoice/spec.md                     |   0
 .../specs/shipment/spec.md                    |   0
 .../2026-09-17-fulfillment-invoices/tasks.md  |  17 ++
 .../changes/cart-checkout-orders/tasks.md     |  17 --
 .../changes/catalog-i18n-currency/tasks.md    |  22 --
 openspec/changes/frontend-apps/tasks.md       |  22 --
 .../changes/fulfillment-invoices/tasks.md     |  17 --
 openspec/specs/auth/spec.md                   |  34 +++
 openspec/specs/cart/spec.md                   |  16 ++
 openspec/specs/catalog/spec.md                |  39 +++
 openspec/specs/currency/spec.md               |  23 ++
 openspec/specs/frontend-admin/spec.md         |  19 ++
 openspec/specs/frontend-mall/spec.md          |  26 ++
 openspec/specs/frontend-shop-admin/spec.md    |  19 ++
 openspec/specs/invoice/spec.md                |  23 ++
 openspec/specs/order/spec.md                  |  34 +++
 openspec/specs/rbac/spec.md                   |  23 ++
 openspec/specs/shipment/spec.md               |  25 ++
 packages/shared/src/api.ts                    |   8 +
 scripts/seed-demo.mjs                         | 167 ++++++++++++
 85 files changed, 4327 insertions(+), 106 deletions(-)
 create mode 100644 apps/admin/locales-extra.ts
 create mode 100644 apps/admin/middleware/auth.ts
 create mode 100644 apps/admin/pages/currencies.vue
 create mode 100644 apps/admin/pages/login.vue
 create mode 100644 apps/admin/pages/orders.vue
 create mode 100644 apps/admin/pages/shops.vue
 create mode 100644 apps/admin/pages/users.vue
 create mode 100644 apps/mall/components/PriceText.vue
 create mode 100644 apps/mall/components/StatusBadge.vue
 create mode 100644 apps/mall/composables/usePrice.ts
 create mode 100644 apps/mall/locales-extra.ts
 create mode 100644 apps/mall/middleware/auth.ts
 create mode 100644 apps/mall/pages/cart.vue
 create mode 100644 apps/mall/pages/checkout.vue
 create mode 100644 apps/mall/pages/invoices.vue
 create mode 100644 apps/mall/pages/login.vue
 create mode 100644 apps/mall/pages/orders/[id].vue
 create mode 100644 apps/mall/pages/orders/index.vue
 create mode 100644 apps/mall/pages/products/[id].vue
 create mode 100644 apps/mall/pages/register.vue
 create mode 100644 apps/shop-admin/components/ProductForm.vue
 create mode 100644 apps/shop-admin/composables/useMoney.ts
 create mode 100644 apps/shop-admin/locales-extra.ts
 create mode 100644 apps/shop-admin/middleware/auth.ts
 create mode 100644 apps/shop-admin/pages/invoices.vue
 create mode 100644 apps/shop-admin/pages/login.vue
 create mode 100644 apps/shop-admin/pages/orders/[id].vue
 create mode 100644 apps/shop-admin/pages/orders/index.vue
 create mode 100644 apps/shop-admin/pages/products/[id].vue
 create mode 100644 apps/shop-admin/pages/products/index.vue
 create mode 100644 apps/shop-admin/pages/products/new.vue
 create mode 100644 apps/shop-admin/pages/shipments.vue
 rename openspec/changes/{cart-checkout-orders => archive/2026-09-17-cart-checkout-orders}/proposal.md (100%)
 rename openspec/changes/{cart-checkout-orders => archive/2026-09-17-cart-checkout-orders}/specs/cart/spec.md (100%)
 rename openspec/changes/{cart-checkout-orders => archive/2026-09-17-cart-checkout-orders}/specs/order/spec.md (100%)
 create mode 100644 openspec/changes/archive/2026-09-17-cart-checkout-orders/tasks.md
 rename openspec/changes/{catalog-i18n-currency => archive/2026-09-17-catalog-i18n-currency}/proposal.md (100%)
 rename openspec/changes/{catalog-i18n-currency => archive/2026-09-17-catalog-i18n-currency}/specs/catalog/spec.md (100%)
 rename openspec/changes/{catalog-i18n-currency => archive/2026-09-17-catalog-i18n-currency}/specs/currency/spec.md (100%)
 create mode 100644 openspec/changes/archive/2026-09-17-catalog-i18n-currency/tasks.md
 rename openspec/changes/{foundation-auth => archive/2026-09-17-foundation-auth}/proposal.md (100%)
 rename openspec/changes/{foundation-auth => archive/2026-09-17-foundation-auth}/specs/auth/spec.md (100%)
 rename openspec/changes/{foundation-auth => archive/2026-09-17-foundation-auth}/specs/rbac/spec.md (100%)
 rename openspec/changes/{foundation-auth => archive/2026-09-17-foundation-auth}/tasks.md (53%)
 create mode 100644 openspec/changes/archive/2026-09-17-frontend-apps/agent-admin.md
 create mode 100644 openspec/changes/archive/2026-09-17-frontend-apps/agent-conventions.md
 create mode 100644 openspec/changes/archive/2026-09-17-frontend-apps/agent-mall.md
 create mode 100644 openspec/changes/archive/2026-09-17-frontend-apps/agent-shop-admin.md
 rename openspec/changes/{frontend-apps => archive/2026-09-17-frontend-apps}/proposal.md (100%)
 rename openspec/changes/{frontend-apps => archive/2026-09-17-frontend-apps}/specs/frontend-admin/spec.md (100%)
 rename openspec/changes/{frontend-apps => archive/2026-09-17-frontend-apps}/specs/frontend-mall/spec.md (100%)
 rename openspec/changes/{frontend-apps => archive/2026-09-17-frontend-apps}/specs/frontend-shop-admin/spec.md (100%)
 create mode 100644 openspec/changes/archive/2026-09-17-frontend-apps/tasks.md
 rename openspec/changes/{fulfillment-invoices => archive/2026-09-17-fulfillment-invoices}/proposal.md (100%)
 rename openspec/changes/{fulfillment-invoices => archive/2026-09-17-fulfillment-invoices}/specs/invoice/spec.md (100%)
 rename openspec/changes/{fulfillment-invoices => archive/2026-09-17-fulfillment-invoices}/specs/shipment/spec.md (100%)
 create mode 100644 openspec/changes/archive/2026-09-17-fulfillment-invoices/tasks.md
 delete mode 100644 openspec/changes/cart-checkout-orders/tasks.md
 delete mode 100644 openspec/changes/catalog-i18n-currency/tasks.md
 delete mode 100644 openspec/changes/frontend-apps/tasks.md
 delete mode 100644 openspec/changes/fulfillment-invoices/tasks.md
 create mode 100644 openspec/specs/auth/spec.md
 create mode 100644 openspec/specs/cart/spec.md
 create mode 100644 openspec/specs/catalog/spec.md
 create mode 100644 openspec/specs/currency/spec.md
 create mode 100644 openspec/specs/frontend-admin/spec.md
 create mode 100644 openspec/specs/frontend-mall/spec.md
 create mode 100644 openspec/specs/frontend-shop-admin/spec.md
 create mode 100644 openspec/specs/invoice/spec.md
 create mode 100644 openspec/specs/order/spec.md
 create mode 100644 openspec/specs/rbac/spec.md
 create mode 100644 openspec/specs/shipment/spec.md
 create mode 100755 scripts/seed-demo.mjs

diff --git a/apps/admin/i18n.config.ts b/apps/admin/i18n.config.ts
index bcfb01f..af9fa0c 100644
--- a/apps/admin/i18n.config.ts
+++ b/apps/admin/i18n.config.ts
@@ -1,8 +1,24 @@
-import { en, zh } from "@vmall/shared/locales";
+import { en as enBase, zh as zhBase } from "@vmall/shared/locales";
+import { enExtra, zhExtra } from "./locales-extra";
+
+function deepMerge<T extends Record<string, unknown>>(base: T, extra: T): T {
+  const out: Record<string, unknown> = { ...base };
+  for (const [k, v] of Object.entries(extra)) {
+    const b = out[k];
+    out[k] =
+      b && v && typeof b === "object" && typeof v === "object"
+        ? deepMerge(b as Record<string, unknown>, v as Record<string, unknown>)
+        : v;
+  }
+  return out as T;
+}
 
 export default defineI18nConfig(() => ({
   legacy: false,
   locale: "en",
   fallbackLocale: "en",
-  messages: { en, zh },
+  messages: {
+    en: deepMerge(enBase, enExtra),
+    zh: deepMerge(zhBase, zhExtra),
+  },
 }));
diff --git a/apps/admin/locales-extra.ts b/apps/admin/locales-extra.ts
new file mode 100644
index 0000000..271fbf8
--- /dev/null
+++ b/apps/admin/locales-extra.ts
@@ -0,0 +1,67 @@
+// App-local message extensions, deep-merged over @vmall/shared locales.
+// Add keys here (never edit the shared locale files from an app agent).
+export const enExtra = {
+  auth: {
+    adminHint: "Dev account: admin@vmall.local / admin1234",
+    wrongRole: "This account does not have platform administrator access.",
+  },
+  admin: {
+    dashboardTitle: "Platform overview",
+    refresh: "Refresh",
+    open: "Open",
+    totalUsers: "Total users",
+    totalShops: "Total shops",
+    totalOrders: "Total orders",
+    enabledCurrencies: "Enabled currencies",
+    shopRequired: "Select a shop for shop owners and staff.",
+    noAssignedShop: "No shop assigned",
+    created: "Created",
+    orderShop: "Shop",
+    orderUser: "User",
+    orderTotal: "Total",
+    shopStatus: "Shop status",
+    currencyCode: "Currency code",
+    currencyNameEn: "Currency name (English)",
+    currencyNameZh: "Currency name (中文)",
+    codeInvalid: "Currency code must be three letters.",
+    currencyFormTitle: "Add currency",
+    userManagement: "User management",
+    shopManagement: "Shop management",
+    orderManagement: "Order management",
+    currencyManagement: "Currency management",
+    pageOf: "Page {page} of {total}",
+  },
+} as const;
+
+export const zhExtra = {
+  auth: {
+    adminHint: "开发账号：admin@vmall.local / admin1234",
+    wrongRole: "此账号没有平台管理员权限。",
+  },
+  admin: {
+    dashboardTitle: "平台概览",
+    refresh: "刷新",
+    open: "打开",
+    totalUsers: "用户总数",
+    totalShops: "店铺总数",
+    totalOrders: "订单总数",
+    enabledCurrencies: "启用币种",
+    shopRequired: "店主和店员必须选择所属店铺。",
+    noAssignedShop: "未分配店铺",
+    created: "创建时间",
+    orderShop: "店铺",
+    orderUser: "用户",
+    orderTotal: "合计",
+    shopStatus: "店铺状态",
+    currencyCode: "币种代码",
+    currencyNameEn: "币种名称（英文）",
+    currencyNameZh: "币种名称（中文）",
+    codeInvalid: "币种代码必须是三个字母。",
+    currencyFormTitle: "添加币种",
+    userManagement: "用户管理",
+    shopManagement: "店铺管理",
+    orderManagement: "订单管理",
+    currencyManagement: "币种管理",
+    pageOf: "第 {page} 页，共 {total} 页",
+  },
+} as const;
diff --git a/apps/admin/middleware/auth.ts b/apps/admin/middleware/auth.ts
new file mode 100644
index 0000000..c792290
--- /dev/null
+++ b/apps/admin/middleware/auth.ts
@@ -0,0 +1,11 @@
+import { readStoredUser } from "../stores/session";
+
+export default defineNuxtRouteMiddleware(() => {
+  if (!import.meta.client) return;
+
+  const token = localStorage.getItem("vmall.token");
+  const user = readStoredUser();
+  if (!token || !user || user.role !== "platform_admin") {
+    return navigateTo("/login");
+  }
+});
diff --git a/apps/admin/nuxt.config.ts b/apps/admin/nuxt.config.ts
index e4657d1..8c43233 100644
--- a/apps/admin/nuxt.config.ts
+++ b/apps/admin/nuxt.config.ts
@@ -16,7 +16,7 @@ export default defineNuxtConfig({
       { code: "en", name: "English" },
       { code: "zh", name: "中文" },
     ],
-    vueI18n: "./i18n.config.ts",
+    vueI18n: "../i18n.config.ts",
   },
   compatibilityDate: "2025-01-01",
 });
diff --git a/apps/admin/pages/currencies.vue b/apps/admin/pages/currencies.vue
new file mode 100644
index 0000000..1bdfe8b
--- /dev/null
+++ b/apps/admin/pages/currencies.vue
@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import type { Currency, CurrencyUpsertBody, LocalizedText } from "@vmall/shared";
+
+definePageMeta({ middleware: "auth" });
+
+interface NewCurrencyForm {
+  code: string;
+  nameEn: string;
+  nameZh: string;
+  symbol: string;
+  exponent: number;
+  rateToBase: string;
+  enabled: boolean;
+}
+
+const { $api } = useNuxtApp();
+const { locale, t } = useI18n();
+
+const currencies = ref<Currency[]>([]);
+const rateDrafts = reactive<Record<string, string>>({});
+const loading = ref(true);
+const errorMessage = ref("");
+const formError = ref("");
+const savingCode = ref<string | null>(null);
+const creating = ref(false);
+const form = reactive<NewCurrencyForm>({
+  code: "",
+  nameEn: "",
+  nameZh: "",
+  symbol: "",
+  exponent: 2,
+  rateToBase: "1",
+  enabled: true,
+});
+
+function localizedName(name: LocalizedText): string {
+  return name[locale.value] ?? name.en ?? Object.values(name)[0] ?? "";
+}
+
+async function loadCurrencies(): Promise<void> {
+  loading.value = true;
+  errorMessage.value = "";
+  try {
+    currencies.value = await $api.admin.listCurrencies();
+    for (const currency of currencies.value) {
+      rateDrafts[currency.code] = currency.rate_to_base;
+    }
+  } catch (error: unknown) {
+    errorMessage.value = error instanceof Error ? error.message : t("common.error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function saveRate(currency: Currency): Promise<void> {
+  // v-model on type=number inputs yields a number; the API contract wants a string.
+  const rate = String(rateDrafts[currency.code] ?? currency.rate_to_base);
+  savingCode.value = currency.code;
+  errorMessage.value = "";
+  try {
+    await $api.admin.setRate(currency.code, rate);
+    await loadCurrencies();
+  } catch (error: unknown) {
+    errorMessage.value = error instanceof Error ? error.message : t("common.error");
+  } finally {
+    savingCode.value = null;
+  }
+}
+
+async function toggleEnabled(currency: Currency): Promise<void> {
+  savingCode.value = currency.code;
+  errorMessage.value = "";
+  try {
+    await upsert({
+      code: currency.code,
+      name: currency.name,
+      symbol: currency.symbol,
+      exponent: currency.exponent,
+      rate_to_base: currency.rate_to_base,
+      enabled: !currency.enabled,
+    });
+    await loadCurrencies();
+  } catch (error: unknown) {
+    errorMessage.value = error instanceof Error ? error.message : t("common.error");
+  } finally {
+    savingCode.value = null;
+  }
+}
+
+async function upsert(body: CurrencyUpsertBody): Promise<void> {
+  await $api.admin.upsertCurrency(body);
+}
+
+async function createCurrency(): Promise<void> {
+  // type=number v-model yields a number at runtime; normalize before use.
+  const rateInput = String(form.rateToBase).trim();
+  formError.value = "";
+  const code = form.code.trim().toUpperCase();
+  if (!/^[A-Z]{3}$/.test(code)) {
+    formError.value = t("admin.codeInvalid");
+    return;
+  }
+  if (!form.nameEn.trim() || !form.nameZh.trim() || !form.symbol.trim() || !rateInput) {
+    formError.value = t("common.required");
+    return;
+  }
+  if (!Number.isInteger(form.exponent) || form.exponent < 0 || form.exponent > 6) {
+    formError.value = t("common.error");
+    return;
+  }
+
+  creating.value = true;
+  try {
+    await upsert({
+      code,
+      name: { en: form.nameEn.trim(), zh: form.nameZh.trim() },
+      symbol: form.symbol.trim(),
+      exponent: form.exponent,
+      rate_to_base: rateInput,
+      enabled: form.enabled,
+    });
+    form.code = "";
+    form.nameEn = "";
+    form.nameZh = "";
+    form.symbol = "";
+    form.exponent = 2;
+    form.rateToBase = "1";
+    form.enabled = true;
+    await loadCurrencies();
+  } catch (error: unknown) {
+    formError.value = error instanceof Error ? error.message : t("common.error");
+  } finally {
+    creating.value = false;
+  }
+}
+
+onMounted(() => {
+  void loadCurrencies();
+});
+</script>
+
+<template>
+  <div class="page">
+    <div class="page-head">
+      <h1 class="page-title">{{ $t("nav.currencies") }}</h1>
+    </div>
+    <section class="card create-card">
+      <h2>{{ $t("admin.currencyFormTitle") }}</h2>
+      <div class="form-grid">
+        <div class="field">
+          <label for="currency-code">{{ $t("admin.currencyCode") }}</label>
+          <input id="currency-code" v-model="form.code" maxlength="3" type="text" required />
+        </div>
+        <div class="field">
+          <label for="currency-name-en">{{ $t("admin.currencyNameEn") }}</label>
+          <input id="currency-name-en" v-model="form.nameEn" type="text" required />
+        </div>
+        <div class="field">
+          <label for="currency-name-zh">{{ $t("admin.currencyNameZh") }}</label>
+          <input id="currency-name-zh" v-model="form.nameZh" type="text" required />
+        </div>
+        <div class="field">
+          <label for="currency-symbol">{{ $t("admin.symbol") }}</label>
+          <input id="currency-symbol" v-model="form.symbol" type="text" required />
+        </div>
+        <div class="field">
+          <label for="currency-exponent">{{ $t("admin.exponent") }}</label>
+          <input id="currency-exponent" v-model.number="form.exponent" min="0" max="6" type="number" required />
+        </div>
+        <div class="field">
+          <label for="currency-rate">{{ $t("admin.rate") }}</label>
+          <input id="currency-rate" v-model="form.rateToBase" min="0" step="any" type="number" required />
+        </div>
+      </div>
+      <label class="checkbox-field">
+        <input v-model="form.enabled" type="checkbox" />
+        {{ $t("admin.enabled") }}
+      </label>
+      <p v-if="formError" class="error-text" role="alert">{{ formError }}</p>
+      <button class="btn primary" type="button" :disabled="creating" @click="createCurrency">
+        {{ creating ? $t("common.loading") : $t("admin.saveCurrency") }}
+      </button>
+    </section>
+    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+    <p v-else-if="errorMessage" class="error-text" role="alert">{{ errorMessage }}</p>
+    <div v-else-if="currencies.length === 0" class="card muted">{{ $t("common.empty") }}</div>
+    <div v-else class="table-wrap card">
+      <table class="table">
+        <thead>
+          <tr>
+            <th>{{ $t("common.currency") }}</th>
+            <th>{{ $t("admin.currencyNameEn") }}</th>
+            <th>{{ $t("admin.symbol") }}</th>
+            <th>{{ $t("admin.exponent") }}</th>
+            <th>{{ $t("admin.rate") }}</th>
+            <th>{{ $t("admin.baseCurrency") }}</th>
+            <th>{{ $t("admin.enabled") }}</th>
+            <th>{{ $t("common.actions") }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="currency in currencies" :key="currency.code">
+            <td><strong>{{ currency.code }}</strong></td>
+            <td>{{ localizedName(currency.name) }}</td>
+            <td>{{ currency.symbol }}</td>
+            <td>{{ currency.exponent }}</td>
+            <td>
+              <input v-model="rateDrafts[currency.code]" class="rate-input" type="number" min="0" step="any" />
+            </td>
+            <td><span v-if="currency.is_base" class="badge blue">{{ $t("admin.baseCurrency") }}</span><span v-else class="muted">—</span></td>
+            <td><span class="badge" :class="currency.enabled ? 'green' : 'red'">{{ currency.enabled ? $t("common.yes") : $t("common.no") }}</span></td>
+            <td class="action-row">
+              <button class="btn sm primary" type="button" :disabled="savingCode === currency.code" @click="saveRate(currency)">
+                {{ savingCode === currency.code ? $t("common.loading") : $t("admin.updateRate") }}
+              </button>
+              <button class="btn sm" type="button" :disabled="savingCode === currency.code" @click="toggleEnabled(currency)">
+                {{ currency.enabled ? $t("admin.suspend") : $t("admin.activate") }}
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.create-card { margin-bottom: 20px; }
+.create-card h2 { font-size: 16px; margin: 0 0 16px; }
+.form-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.checkbox-field { align-items: center; display: flex; gap: 8px; margin: 2px 0 16px; }
+.checkbox-field input { width: auto; }
+.table-wrap { overflow-x: auto; padding: 0; }
+.table { min-width: 1080px; }
+.rate-input { min-width: 110px; }
+.action-row { display: flex; gap: 8px; }
+@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }
+</style>
diff --git a/apps/admin/pages/index.vue b/apps/admin/pages/index.vue
index d286cfd..44df251 100644
--- a/apps/admin/pages/index.vue
+++ b/apps/admin/pages/index.vue
@@ -1,6 +1,158 @@
+<script setup lang="ts">
+
+const { t } = useI18n();
+definePageMeta({ middleware: "auth" });
+
+const { $api } = useNuxtApp();
+
+const loading = ref(true);
+const errorMessage = ref("");
+const stats = reactive({
+  users: 0,
+  shops: 0,
+  orders: 0,
+  currencies: 0,
+});
+
+async function loadDashboard(): Promise<void> {
+  loading.value = true;
+  errorMessage.value = "";
+  try {
+    const [users, shops, orders, currencies] = await Promise.all([
+      $api.admin.listUsers(1),
+      $api.admin.listShops(),
+      $api.admin.listOrders(1),
+      $api.admin.listCurrencies(),
+    ]);
+    stats.users = users.total;
+    stats.shops = shops.length;
+    stats.orders = orders.total;
+    stats.currencies = currencies.filter((currency) => currency.enabled).length;
+  } catch (error: unknown) {
+    errorMessage.value = error instanceof Error ? error.message : t("common.error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  void loadDashboard();
+});
+
+const cards = computed(() => [
+  { label: "admin.totalUsers", value: stats.users, link: "/users", tone: "blue" },
+  { label: "admin.totalShops", value: stats.shops, link: "/shops", tone: "green" },
+  { label: "admin.totalOrders", value: stats.orders, link: "/orders", tone: "orange" },
+  { label: "admin.enabledCurrencies", value: stats.currencies, link: "/currencies", tone: "purple" },
+]);
+
+</script>
+
 <template>
-  <div>
-    <h1 class="page-title">{{ $t("common.appName") }}</h1>
-    <p class="muted">{{ $t("common.loading") }}</p>
+  <div class="page">
+    <div class="page-head">
+      <div>
+        <p class="eyebrow">{{ $t("common.appName") }} · Admin</p>
+        <h1 class="page-title">{{ $t("admin.dashboardTitle") }}</h1>
+      </div>
+      <button class="btn sm" type="button" :disabled="loading" @click="loadDashboard">
+        {{ $t("admin.refresh") }}
+      </button>
+    </div>
+    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+    <p v-else-if="errorMessage" class="error-text" role="alert">{{ errorMessage }}</p>
+    <template v-else>
+      <div class="stat-grid">
+        <NuxtLink v-for="card in cards" :key="card.link" :to="card.link" class="stat-card">
+          <span class="stat-label">{{ $t(card.label) }}</span>
+          <strong class="stat-value" :class="`tone-${card.tone}`">{{ card.value }}</strong>
+          <span class="stat-link">{{ $t("admin.open") }} →</span>
+        </NuxtLink>
+      </div>
+      <div class="grid shortcuts">
+        <NuxtLink class="card shortcut" to="/users">
+          <strong>{{ $t("admin.userManagement") }}</strong>
+          <span class="muted">{{ $t("nav.users") }}</span>
+        </NuxtLink>
+        <NuxtLink class="card shortcut" to="/shops">
+          <strong>{{ $t("admin.shopManagement") }}</strong>
+          <span class="muted">{{ $t("nav.shops") }}</span>
+        </NuxtLink>
+        <NuxtLink class="card shortcut" to="/orders">
+          <strong>{{ $t("admin.orderManagement") }}</strong>
+          <span class="muted">{{ $t("nav.orders") }}</span>
+        </NuxtLink>
+        <NuxtLink class="card shortcut" to="/currencies">
+          <strong>{{ $t("admin.currencyManagement") }}</strong>
+          <span class="muted">{{ $t("nav.currencies") }}</span>
+        </NuxtLink>
+      </div>
+    </template>
   </div>
 </template>
+
+<style scoped>
+.eyebrow {
+  color: var(--primary);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  margin: 0 0 6px;
+  text-transform: uppercase;
+}
+.stat-grid {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+.stat-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 20px;
+  text-decoration: none;
+  transition: transform 150ms ease, border-color 150ms ease;
+}
+.stat-card:hover {
+  border-color: var(--primary);
+  text-decoration: none;
+  transform: translateY(-2px);
+}
+.stat-label {
+  color: var(--muted);
+  font-size: 13px;
+}
+.stat-value {
+  font-size: 32px;
+  line-height: 1;
+}
+.tone-blue { color: var(--primary); }
+.tone-green { color: var(--success); }
+.tone-orange { color: var(--warning); }
+.tone-purple { color: #7257b8; }
+.stat-link {
+  color: var(--primary);
+  font-size: 12px;
+}
+.shortcuts {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin-top: 24px;
+}
+.shortcut {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  text-decoration: none;
+}
+.shortcut:hover { text-decoration: none; }
+@media (max-width: 900px) {
+  .stat-grid, .shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 560px) {
+  .stat-grid, .shortcuts { grid-template-columns: 1fr; }
+}
+</style>
diff --git a/apps/admin/pages/login.vue b/apps/admin/pages/login.vue
new file mode 100644
index 0000000..d0c36b4
--- /dev/null
+++ b/apps/admin/pages/login.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type { AuthTokens } from "@vmall/shared";
+
+definePageMeta({ layout: false });
+
+const { $api } = useNuxtApp();
+const session = useSessionStore();
+const { t } = useI18n();
+
+const email = ref("admin@vmall.local");
+const password = ref("admin1234");
+const loading = ref(false);
+const errorMessage = ref("");
+
+async function submit(): Promise<void> {
+  if (!email.value.trim() || !password.value) {
+    errorMessage.value = t("common.required");
+    return;
+  }
+
+  loading.value = true;
+  errorMessage.value = "";
+  try {
+    const auth: AuthTokens = await $api.login(email.value.trim(), password.value);
+    if (auth.user.role !== "platform_admin") {
+      errorMessage.value = t("auth.wrongRole");
+      return;
+    }
+    session.setAuth(auth);
+    await navigateTo("/");
+  } catch (error: unknown) {
+    errorMessage.value = error instanceof Error ? error.message : t("common.error");
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="login-shell">
+    <form class="card form-narrow login-card" @submit.prevent="submit">
+      <p class="eyebrow">{{ $t("common.appName") }} · Admin</p>
+      <h1 class="page-title">{{ $t("auth.welcome") }}</h1>
+      <p class="muted">{{ $t("admin.dashboardTitle") }}</p>
+      <div class="field">
+        <label for="email">{{ $t("common.email") }}</label>
+        <input id="email" v-model="email" type="email" autocomplete="username" required />
+      </div>
+      <div class="field">
+        <label for="password">{{ $t("common.password") }}</label>
+        <input id="password" v-model="password" type="password" autocomplete="current-password" required />
+      </div>
+      <p v-if="errorMessage" class="error-text" role="alert">{{ errorMessage }}</p>
+      <button class="btn primary submit-button" type="submit" :disabled="loading">
+        {{ loading ? $t("common.loading") : $t("common.login") }}
+      </button>
+      <p class="muted hint">{{ $t("auth.adminHint") }}</p>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.login-shell {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+}
+.login-card {
+  width: min(100%, 420px);
+  margin: 0;
+}
+.eyebrow {
+  color: var(--primary);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  margin: 0 0 10px;
+  text-transform: uppercase;
+}
+.submit-button {
+  width: 100%;
+  justify-content: center;
+}
+.hint {
+  font-size: 12px;
+  margin: 16px 0 0;
+  text-align: center;
+}
+</style>
diff --git a/apps/admin/pages/orders.vue b/apps/admin/pages/orders.vue
new file mode 100644
index 0000000..f3881ef
--- /dev/null
+++ b/apps/admin/pages/orders.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { formatMoney, t as localizedText } from "@vmall/shared";
+import type { Currency, Order, Shop } from "@vmall/shared";
+
+definePageMeta({ middleware: "auth" });
+
+const { $api } = useNuxtApp();
+const { locale, t } = useI18n();
+
+const orders = ref<Order[]>([]);
+const shops = ref<Shop[]>([]);
+const currencies = ref<Currency[]>([]);
+const page = ref(1);
+const total = ref(0);
+const perPage = ref(20);
+const loading = ref(true);
+const errorMessage = ref("");
+
+const totalPages = computed(() => Math.max(1, Math.ceil(total.value / perPage.value)));
+
+function shopName(shopId: string): string {
+  const shop = shops.value.find((item) => item.id === shopId);
+  return shop ? localizedText(shop.name, locale.value) : shopId;
+}
+
+function currencyExponent(code: string): number {
+  const currency = currencies.value.find((item) => item.code === code);
+  return currency?.exponent ?? 2;
+}
+
+function formatTotal(order: Order): string {
+  return formatMoney(order.total_minor, order.currency, currencyExponent(order.currency), locale.value);
+}
+
+function formatDate(value: string): string {
+  return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
+}
+
+function statusClass(status: Order["status"]): string {
+  if (status === "completed") return "green";
+  if (status === "cancelled") return "red";
+  if (status === "pending_payment") return "orange";
+  return "blue";
+}
+
+async function loadOrders(): Promise<void> {
+  loading.value = true;
+  errorMessage.value = "";
+  try {
+    const [paged, shopList, currencyList] = await Promise.all([
+      $api.admin.listOrders(page.value),
+      $api.admin.listShops(),
+      $api.admin.listCurrencies(),
+    ]);
+    orders.value = paged.items;
+    total.value = paged.total;
+    perPage.value = paged.per_page;
+    shops.value = shopList;
+    currencies.value = currencyList;
+  } catch (error: unknown) {
+    errorMessage.value = error instanceof Error ? error.message : t("common.error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function changePage(nextPage: number): Promise<void> {
+  if (nextPage < 1 || nextPage > totalPages.value || nextPage === page.value) return;
+  page.value = nextPage;
+  await loadOrders();
+}
+
+onMounted(() => {
+  void loadOrders();
+});
+</script>
+
+<template>
+  <div class="page">
+    <div class="page-head">
+      <h1 class="page-title">{{ $t("nav.orders") }}</h1>
+      <span v-if="!loading" class="muted">{{ $t("admin.pageOf", { page, total: totalPages }) }}</span>
+    </div>
+    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+    <p v-else-if="errorMessage" class="error-text" role="alert">{{ errorMessage }}</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("order.orderNo") }}</th>
+            <th>{{ $t("admin.orderShop") }}</th>
+            <th>{{ $t("admin.orderUser") }}</th>
+            <th>{{ $t("admin.orderTotal") }}</th>
+            <th>{{ $t("common.status") }}</th>
+            <th>{{ $t("admin.created") }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="order in orders" :key="order.id">
+            <td><strong>{{ order.order_no }}</strong></td>
+            <td>{{ shopName(order.shop_id) }}</td>
+            <td><code :title="order.user_id">{{ order.user_id.slice(0, 8) }}</code></td>
+            <td>{{ formatTotal(order) }}</td>
+            <td><span class="badge" :class="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</span></td>
+            <td>{{ formatDate(order.created_at) }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div v-if="!loading && !errorMessage && orders.length > 0" class="pagination">
+      <button class="btn sm" type="button" :disabled="page <= 1" @click="changePage(page - 1)">
+        {{ $t("common.prev") }}
+      </button>
+      <span class="muted">{{ page }} / {{ totalPages }}</span>
+      <button class="btn sm" type="button" :disabled="page >= totalPages" @click="changePage(page + 1)">
+        {{ $t("common.next") }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.table-wrap { overflow-x: auto; padding: 0; }
+.table { min-width: 900px; }
+.pagination { align-items: center; display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
+code { background: #f0f2f5; border-radius: 4px; padding: 2px 5px; }
+</style>
diff --git a/apps/admin/pages/shops.vue b/apps/admin/pages/shops.vue
new file mode 100644
index 0000000..7dfac14
--- /dev/null
+++ b/apps/admin/pages/shops.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import type { LocalizedText, Shop } from "@vmall/shared";
+
+definePageMeta({ middleware: "auth" });
+
+const { $api } = useNuxtApp();
+const { locale, t } = useI18n();
+
+const shops = ref<Shop[]>([]);
+const loading = ref(true);
+const errorMessage = ref("");
+const createError = ref("");
+const creating = ref(false);
+const updatingId = ref<string | null>(null);
+const nameEn = ref("");
+const nameZh = ref("");
+const slug = ref("");
+
+function localizedName(name: LocalizedText): string {
+  return name[locale.value] ?? name.en ?? Object.values(name)[0] ?? "";
+}
+
+function formatDate(value: string): string {
+  return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
+}
+
+function statusClass(status: Shop["status"]): string {
+  return status === "active" ? "green" : "red";
+}
+
+async function loadShops(): Promise<void> {
+  loading.value = true;
+  errorMessage.value = "";
+  try {
+    shops.value = await $api.admin.listShops();
+  } catch (error: unknown) {
+    errorMessage.value = error instanceof Error ? error.message : t("common.error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function createShop(): Promise<void> {
+  createError.value = "";
+  if (!nameEn.value.trim() || !nameZh.value.trim() || !slug.value.trim()) {
+    createError.value = t("common.required");
+    return;
+  }
+
+  creating.value = true;
+  try {
+    await $api.admin.createShop(
+      { en: nameEn.value.trim(), zh: nameZh.value.trim() },
+      slug.value.trim(),
+    );
+    nameEn.value = "";
+    nameZh.value = "";
+    slug.value = "";
+    await loadShops();
+  } catch (error: unknown) {
+    createError.value = error instanceof Error ? error.message : t("common.error");
+  } finally {
+    creating.value = false;
+  }
+}
+
+async function setStatus(shop: Shop): Promise<void> {
+  updatingId.value = shop.id;
+  errorMessage.value = "";
+  const nextStatus = shop.status === "active" ? "suspended" : "active";
+  try {
+    await $api.admin.setShopStatus(shop.id, nextStatus);
+    await loadShops();
+  } catch (error: unknown) {
+    errorMessage.value = error instanceof Error ? error.message : t("common.error");
+  } finally {
+    updatingId.value = null;
+  }
+}
+
+onMounted(() => {
+  void loadShops();
+});
+</script>
+
+<template>
+  <div class="page">
+    <div class="page-head">
+      <h1 class="page-title">{{ $t("nav.shops") }}</h1>
+    </div>
+    <section class="card create-card">
+      <h2>{{ $t("admin.createShop") }}</h2>
+      <div class="form-grid">
+        <div class="field">
+          <label for="shop-name-en">{{ $t("admin.shopNameEn") }}</label>
+          <input id="shop-name-en" v-model="nameEn" type="text" required />
+        </div>
+        <div class="field">
+          <label for="shop-name-zh">{{ $t("admin.shopNameZh") }}</label>
+          <input id="shop-name-zh" v-model="nameZh" type="text" required />
+        </div>
+        <div class="field">
+          <label for="shop-slug">{{ $t("admin.shopSlug") }}</label>
+          <input id="shop-slug" v-model="slug" type="text" required />
+        </div>
+      </div>
+      <p v-if="createError" class="error-text" role="alert">{{ createError }}</p>
+      <button class="btn primary" type="button" :disabled="creating" @click="createShop">
+        {{ creating ? $t("common.loading") : $t("common.create") }}
+      </button>
+    </section>
+    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+    <p v-else-if="errorMessage" class="error-text" role="alert">{{ errorMessage }}</p>
+    <div v-else-if="shops.length === 0" class="card muted">{{ $t("common.empty") }}</div>
+    <div v-else class="table-wrap card">
+      <table class="table">
+        <thead>
+          <tr>
+            <th>{{ $t("admin.shopNameEn") }}</th>
+            <th>{{ $t("admin.shopSlug") }}</th>
+            <th>{{ $t("admin.shopStatus") }}</th>
+            <th>{{ $t("admin.created") }}</th>
+            <th>{{ $t("common.actions") }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="shop in shops" :key="shop.id">
+            <td>{{ localizedName(shop.name) }}</td>
+            <td><code>{{ shop.slug }}</code></td>
+            <td><span class="badge" :class="statusClass(shop.status)">{{ $t(`admin.${shop.status}`) }}</span></td>
+            <td>{{ formatDate(shop.created_at) }}</td>
+            <td>
+              <button class="btn sm" :class="{ danger: shop.status === 'active' }" type="button" :disabled="updatingId === shop.id" @click="setStatus(shop)">
+                {{ updatingId === shop.id ? $t("common.loading") : $t(shop.status === "active" ? "admin.suspend" : "admin.activate") }}
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.create-card { margin-bottom: 20px; }
+.create-card h2 { font-size: 16px; margin: 0 0 16px; }
+.form-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.table-wrap { overflow-x: auto; padding: 0; }
+.table { min-width: 720px; }
+code { background: #f0f2f5; border-radius: 4px; padding: 2px 5px; }
+@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }
+</style>
diff --git a/apps/admin/pages/users.vue b/apps/admin/pages/users.vue
new file mode 100644
index 0000000..e0f21a6
--- /dev/null
+++ b/apps/admin/pages/users.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import type { Shop, User, UserRole } from "@vmall/shared";
+
+definePageMeta({ middleware: "auth" });
+
+interface UserDraft {
+  role: UserRole;
+  shopId: string | null;
+}
+
+const { $api } = useNuxtApp();
+const { locale, t } = useI18n();
+
+const users = ref<User[]>([]);
+const shops = ref<Shop[]>([]);
+const drafts = reactive<Record<string, UserDraft>>({});
+const rowErrors = reactive<Record<string, string>>({});
+const page = ref(1);
+const total = ref(0);
+const perPage = ref(20);
+const loading = ref(true);
+const errorMessage = ref("");
+const savingId = ref<string | null>(null);
+
+const totalPages = computed(() => Math.max(1, Math.ceil(total.value / perPage.value)));
+
+function formatDate(value: string): string {
+  return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
+}
+
+function draftFor(user: User): UserDraft {
+  const existing = drafts[user.id];
+  if (existing) return existing;
+  const draft: UserDraft = { role: user.role, shopId: user.shop_id };
+  drafts[user.id] = draft;
+  return draft;
+}
+
+function shopName(shopId: string | null): string {
+  if (!shopId) return t("admin.noAssignedShop");
+  const shop = shops.value.find((item) => item.id === shopId);
+  return shop ? tText(shop.name, locale.value) : t("admin.noAssignedShop");
+}
+
+function tText(text: Record<string, string>, currentLocale: string): string {
+  return text[currentLocale] ?? text.en ?? Object.values(text)[0] ?? "";
+}
+
+function roleNeedsShop(role: UserRole): boolean {
+  return role === "shop_owner" || role === "shop_staff";
+}
+
+function normalizeDraft(draft: UserDraft): void {
+  if (!roleNeedsShop(draft.role)) draft.shopId = null;
+}
+
+async function loadUsers(): Promise<void> {
+  loading.value = true;
+  errorMessage.value = "";
+  try {
+    const [paged, shopList] = await Promise.all([
+      $api.admin.listUsers(page.value),
+      $api.admin.listShops(),
+    ]);
+    users.value = paged.items;
+    total.value = paged.total;
+    perPage.value = paged.per_page;
+    shops.value = shopList;
+    for (const user of users.value) {
+      drafts[user.id] = { role: user.role, shopId: user.shop_id };
+      delete rowErrors[user.id];
+    }
+  } catch (error: unknown) {
+    errorMessage.value = error instanceof Error ? error.message : t("common.error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function saveRole(user: User): Promise<void> {
+  const draft = draftFor(user);
+  normalizeDraft(draft);
+  rowErrors[user.id] = "";
+  if (roleNeedsShop(draft.role) && !draft.shopId) {
+    rowErrors[user.id] = t("admin.shopRequired");
+    return;
+  }
+
+  savingId.value = user.id;
+  try {
+    await $api.admin.setUserRole(user.id, draft.role, draft.shopId);
+    await loadUsers();
+  } catch (error: unknown) {
+    rowErrors[user.id] = error instanceof Error ? error.message : t("common.error");
+  } finally {
+    savingId.value = null;
+  }
+}
+
+async function changePage(nextPage: number): Promise<void> {
+  if (nextPage < 1 || nextPage > totalPages.value || nextPage === page.value) return;
+  page.value = nextPage;
+  await loadUsers();
+}
+
+onMounted(() => {
+  void loadUsers();
+});
+</script>
+
+<template>
+  <div class="page">
+    <div class="page-head">
+      <h1 class="page-title">{{ $t("nav.users") }}</h1>
+      <span v-if="!loading" class="muted">{{ $t("admin.pageOf", { page, total: totalPages }) }}</span>
+    </div>
+    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+    <p v-else-if="errorMessage" class="error-text" role="alert">{{ errorMessage }}</p>
+    <div v-else-if="users.length === 0" class="card muted">{{ $t("common.empty") }}</div>
+    <div v-else class="table-wrap card">
+      <table class="table">
+        <thead>
+          <tr>
+            <th>{{ $t("common.email") }}</th>
+            <th>{{ $t("common.displayName") }}</th>
+            <th>{{ $t("admin.role") }}</th>
+            <th>{{ $t("admin.assignShop") }}</th>
+            <th>{{ $t("admin.created") }}</th>
+            <th>{{ $t("common.actions") }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="user in users" :key="user.id">
+            <td>{{ user.email }}</td>
+            <td>{{ user.display_name }}</td>
+            <td>
+              <span class="badge blue">{{ $t(`admin.roles.${user.role}`) }}</span>
+            </td>
+            <td>
+              <div class="role-editor">
+                <select
+                  v-model="draftFor(user).role"
+                  :aria-label="$t('admin.role')"
+                  @change="normalizeDraft(draftFor(user))"
+                >
+                  <option value="platform_admin">{{ $t("admin.roles.platform_admin") }}</option>
+                  <option value="shop_owner">{{ $t("admin.roles.shop_owner") }}</option>
+                  <option value="shop_staff">{{ $t("admin.roles.shop_staff") }}</option>
+                  <option value="customer">{{ $t("admin.roles.customer") }}</option>
+                </select>
+                <select
+                  v-if="roleNeedsShop(draftFor(user).role)"
+                  v-model="draftFor(user).shopId"
+                  :aria-label="$t('admin.assignShop')"
+                >
+                  <option :value="null">{{ $t("admin.noAssignedShop") }}</option>
+                  <option v-for="shop in shops" :key="shop.id" :value="shop.id">
+                    {{ tText(shop.name, locale) }}
+                  </option>
+                </select>
+                <span v-else class="muted">{{ shopName(user.shop_id) }}</span>
+              </div>
+              <p v-if="rowErrors[user.id]" class="error-text row-error" role="alert">{{ rowErrors[user.id] }}</p>
+            </td>
+            <td>{{ formatDate(user.created_at) }}</td>
+            <td>
+              <button class="btn sm primary" type="button" :disabled="savingId === user.id" @click="saveRole(user)">
+                {{ savingId === user.id ? $t("common.loading") : $t("common.save") }}
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div v-if="!loading && !errorMessage && users.length > 0" class="pagination">
+      <button class="btn sm" type="button" :disabled="page <= 1" @click="changePage(page - 1)">
+        {{ $t("common.prev") }}
+      </button>
+      <span class="muted">{{ page }} / {{ totalPages }}</span>
+      <button class="btn sm" type="button" :disabled="page >= totalPages" @click="changePage(page + 1)">
+        {{ $t("common.next") }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.table-wrap { overflow-x: auto; padding: 0; }
+.table { min-width: 920px; }
+.role-editor { display: grid; gap: 6px; min-width: 190px; }
+.row-error { font-size: 12px; margin: 4px 0 0; }
+.pagination { align-items: center; display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
+</style>
diff --git a/apps/api/src/money.rs b/apps/api/src/money.rs
index 8e3c5e9..b9392f3 100644
--- a/apps/api/src/money.rs
+++ b/apps/api/src/money.rs
@@ -1,5 +1,5 @@
 use rust_decimal::prelude::*;
-use rust_decimal::Decimal;
+use rust_decimal::{Decimal, RoundingStrategy};
 
 use crate::error::ApiError;
 use crate::models::Currency;
@@ -16,7 +16,8 @@ pub fn convert_minor(amount_minor: i64, from: &Currency, to: &Currency) -> Resul
     let to_scale = Decimal::from(10i64.pow(to.exponent as u32));
     // minor(from) -> major(from) -> major(base) -> minor(to)
     let base_major = amount / from_scale / from.rate_to_base;
-    let target = (base_major * to.rate_to_base * to_scale).round_dp(0);
+    let target = (base_major * to.rate_to_base * to_scale)
+        .round_dp_with_strategy(0, RoundingStrategy::MidpointAwayFromZero);
     target
         .to_i64()
         .ok_or_else(|| ApiError::BadRequest("amount out of range".into()))
diff --git a/apps/api/tests/catalog.rs b/apps/api/tests/catalog.rs
index 18a9250..9eee5e7 100644
--- a/apps/api/tests/catalog.rs
+++ b/apps/api/tests/catalog.rs
@@ -146,6 +146,15 @@ async fn currency_conversion_math() {
     assert_eq!(body["amount_minor"], 1500);
     assert_eq!(body["currency"], "JPY");
 
+    // midpoint rounds half-up (away from zero), not banker's rounding:
+    // 1999 minor USD ($19.99) -> JPY at rate 150 => 2998.5 -> 2999
+    let res = client()
+        .get(app.url("/api/currencies/convert?amount_minor=1999&from=USD&to=JPY"))
+        .send()
+        .await
+        .unwrap();
+    assert_eq!(res.json::<serde_json::Value>().await.unwrap()["amount_minor"], 2999);
+
     // disabled currency rejected
     let admin = login_admin(&app).await;
     let res = client()
diff --git a/apps/mall/components/PriceText.vue b/apps/mall/components/PriceText.vue
new file mode 100644
index 0000000..66501c6
--- /dev/null
+++ b/apps/mall/components/PriceText.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const props = defineProps<{
+  amountMinor: number;
+  currency: string;
+}>();
+
+const { formatPrice, currency } = usePrice();
+const display = ref("");
+const failed = ref(false);
+
+async function refresh(): Promise<void> {
+  if (import.meta.server) return;
+  failed.value = false;
+  try {
+    display.value = await formatPrice(props.amountMinor, props.currency, currency.value);
+  } catch {
+    failed.value = true;
+    display.value = "";
+  }
+}
+
+watch(
+  [() => props.amountMinor, () => props.currency, currency],
+  () => void refresh(),
+  { immediate: true },
+);
+</script>
+
+<template>
+  <span v-if="failed" class="muted">{{ $t("mall.notAvailable") }}</span>
+  <span v-else>{{ display || $t("common.loading") }}</span>
+</template>
diff --git a/apps/mall/components/StatusBadge.vue b/apps/mall/components/StatusBadge.vue
new file mode 100644
index 0000000..913a251
--- /dev/null
+++ b/apps/mall/components/StatusBadge.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = defineProps<{ status: string; kind: "order" | "shipment" | "invoice" }>();
+
+const tone = computed(() => {
+  if (["completed", "delivered", "issued"].includes(props.status)) return "green";
+  if (["paid", "fulfilling", "shipped"].includes(props.status)) return "blue";
+  if (["cancelled"].includes(props.status)) return "red";
+  return "orange";
+});
+
+const label = computed(() => {
+  const root = props.kind === "order" ? "order.status" : props.kind === "shipment" ? "shipment.status" : "invoice.status";
+  return `${root}.${props.status}`;
+});
+</script>
+
+<template>
+  <span class="badge" :class="tone">{{ $t(label) }}</span>
+</template>
diff --git a/apps/mall/composables/usePrice.ts b/apps/mall/composables/usePrice.ts
new file mode 100644
index 0000000..0fa9a12
--- /dev/null
+++ b/apps/mall/composables/usePrice.ts
@@ -0,0 +1,60 @@
+import { formatMoney } from "@vmall/shared";
+import type { Currency } from "@vmall/shared";
+
+export function usePrice() {
+  const { currency } = usePrefs();
+  const { locale } = useI18n();
+  const { $api } = useNuxtApp();
+  const currencies = useState<Currency[]>("mall-currencies", () => []);
+  const cache = useState<Map<string, number>>("mall-price-cache", () => new Map());
+  const currencyRequest = useState<Promise<Currency[]> | null>("mall-currency-request", () => null);
+
+  async function ensureCurrencies(): Promise<Currency[]> {
+    if (currencies.value.length > 0) return currencies.value;
+    if (!currencyRequest.value) {
+      currencyRequest.value = $api.listCurrencies().then((list) => {
+        currencies.value = list;
+        return list;
+      }).finally(() => {
+        currencyRequest.value = null;
+      });
+    }
+    return currencyRequest.value;
+  }
+
+  function exponentFor(code: string): number {
+    return currencies.value.find((item) => item.code === code)?.exponent ?? 2;
+  }
+
+  async function convertAmount(amountMinor: number, from: string, to = currency.value): Promise<number> {
+    if (from === to) return amountMinor;
+    const key = `${amountMinor}:${from}:${to}`;
+    const cached = cache.value.get(key);
+    if (cached !== undefined) return cached;
+    const converted = await $api.convert(amountMinor, from, to);
+    cache.value.set(key, converted.amount_minor);
+    return converted.amount_minor;
+  }
+
+  async function formatPrice(amountMinor: number, from: string, to = currency.value): Promise<string> {
+    await ensureCurrencies();
+    const amount = await convertAmount(amountMinor, from, to);
+    return formatMoney(amount, to, exponentFor(to), locale.value);
+  }
+
+  async function formatAmount(amountMinor: number, code: string): Promise<string> {
+    await ensureCurrencies();
+    return formatMoney(amountMinor, code, exponentFor(code), locale.value);
+  }
+
+  return {
+    currency,
+    currencies,
+    cache,
+    ensureCurrencies,
+    exponentFor,
+    convertAmount,
+    formatPrice,
+    formatAmount,
+  };
+}
diff --git a/apps/mall/i18n.config.ts b/apps/mall/i18n.config.ts
index bcfb01f..af9fa0c 100644
--- a/apps/mall/i18n.config.ts
+++ b/apps/mall/i18n.config.ts
@@ -1,8 +1,24 @@
-import { en, zh } from "@vmall/shared/locales";
+import { en as enBase, zh as zhBase } from "@vmall/shared/locales";
+import { enExtra, zhExtra } from "./locales-extra";
+
+function deepMerge<T extends Record<string, unknown>>(base: T, extra: T): T {
+  const out: Record<string, unknown> = { ...base };
+  for (const [k, v] of Object.entries(extra)) {
+    const b = out[k];
+    out[k] =
+      b && v && typeof b === "object" && typeof v === "object"
+        ? deepMerge(b as Record<string, unknown>, v as Record<string, unknown>)
+        : v;
+  }
+  return out as T;
+}
 
 export default defineI18nConfig(() => ({
   legacy: false,
   locale: "en",
   fallbackLocale: "en",
-  messages: { en, zh },
+  messages: {
+    en: deepMerge(enBase, enExtra),
+    zh: deepMerge(zhBase, zhExtra),
+  },
 }));
diff --git a/apps/mall/locales-extra.ts b/apps/mall/locales-extra.ts
new file mode 100644
index 0000000..1d112c2
--- /dev/null
+++ b/apps/mall/locales-extra.ts
@@ -0,0 +1,111 @@
+// App-local message extensions, deep-merged over @vmall/shared locales.
+// Add keys here (never edit the shared locale files from an app agent).
+export const enExtra = {
+  mall: {
+    catalogTitle: "Shop products",
+    searchPlaceholder: "Search products",
+    categoryPlaceholder: "Choose a category",
+    allCategories: "All categories",
+    clear: "Clear",
+    viewDetails: "View details",
+    noImage: "No image",
+    noProducts: "No products found",
+    productDescription: "Description",
+    attributes: "Attributes",
+    sku: "SKU",
+    chooseSku: "Choose an option",
+    quantity: "Quantity",
+    available: "available",
+    unavailable: "Unavailable",
+    addedToCart: "Added to cart",
+    cartItems: "Cart items",
+    lineTotal: "Line total",
+    orderPreview: "Order preview",
+    checkoutTitle: "Checkout",
+    placeOrder: "Place order",
+    orderSuccess: "Your order has been placed",
+    orderNumbers: "Order numbers",
+    viewOrders: "View orders",
+    backToShop: "Continue shopping",
+    noOrders: "No orders found",
+    created: "Created",
+    items: "Items",
+    address: "Address",
+    shipments: "Shipments",
+    invoices: "Invoices",
+    noInvoice: "No invoice requested",
+    invoiceRequested: "Invoice requested",
+    notAvailable: "—",
+    companyTaxRequired: "Tax number is required for company invoices",
+    invalidQuantity: "Enter a valid quantity",
+    loadFailed: "Unable to load data",
+    signInRequired: "Please sign in to continue",
+    filter: "Filter",
+    details: "Details",
+    update: "Update",
+    confirm: "Confirm",
+    totalItems: "Total items",
+    shippingOptional: "Optional",
+    orderDetails: "Order details",
+    payment: "Payment",
+    requestInvoiceForOrder: "Request an invoice for this order",
+  },
+  auth: {
+    wrongRole: "This account is not a customer account",
+  },
+} as Record<string, unknown>;
+
+export const zhExtra = {
+  mall: {
+    catalogTitle: "选购商品",
+    searchPlaceholder: "搜索商品",
+    categoryPlaceholder: "选择分类",
+    allCategories: "全部分类",
+    clear: "清除",
+    viewDetails: "查看详情",
+    noImage: "暂无图片",
+    noProducts: "未找到商品",
+    productDescription: "商品描述",
+    attributes: "属性",
+    sku: "SKU",
+    chooseSku: "选择规格",
+    quantity: "数量",
+    available: "件可用",
+    unavailable: "暂不可用",
+    addedToCart: "已加入购物车",
+    cartItems: "购物车商品",
+    lineTotal: "行合计",
+    orderPreview: "订单预览",
+    checkoutTitle: "结算",
+    placeOrder: "提交订单",
+    orderSuccess: "订单提交成功",
+    orderNumbers: "订单号",
+    viewOrders: "查看订单",
+    backToShop: "继续购物",
+    noOrders: "暂无订单",
+    created: "创建时间",
+    items: "商品数",
+    address: "地址",
+    shipments: "发货信息",
+    invoices: "发票",
+    noInvoice: "尚未申请发票",
+    invoiceRequested: "发票已申请",
+    notAvailable: "—",
+    companyTaxRequired: "企业发票必须填写税号",
+    invalidQuantity: "请输入有效数量",
+    loadFailed: "无法加载数据",
+    signInRequired: "请先登录",
+    filter: "筛选",
+    details: "详情",
+    update: "更新",
+    confirm: "确认",
+    totalItems: "商品总数",
+    shippingOptional: "可选",
+    orderDetails: "订单详情",
+    payment: "支付",
+    requestInvoiceForOrder: "申请本订单发票",
+  },
+  auth: {
+    wrongRole: "此账号不是买家账号",
+  },
+} as Record<string, unknown>;
diff --git a/apps/mall/middleware/auth.ts b/apps/mall/middleware/auth.ts
new file mode 100644
index 0000000..3413cd0
--- /dev/null
+++ b/apps/mall/middleware/auth.ts
@@ -0,0 +1,15 @@
+export default defineNuxtRouteMiddleware(() => {
+  if (import.meta.server) return;
+  const token = localStorage.getItem("vmall.token");
+  let role: string | null = null;
+  try {
+    const raw = localStorage.getItem("vmall.user");
+    const user: unknown = raw ? JSON.parse(raw) : null;
+    if (user && typeof user === "object" && "role" in user && typeof user.role === "string") {
+      role = user.role;
+    }
+  } catch {
+    role = null;
+  }
+  if (!token || role !== "customer") return navigateTo("/login");
+});
diff --git a/apps/mall/nuxt.config.ts b/apps/mall/nuxt.config.ts
index 98190ff..9c34e28 100644
--- a/apps/mall/nuxt.config.ts
+++ b/apps/mall/nuxt.config.ts
@@ -16,7 +16,8 @@ export default defineNuxtConfig({
       { code: "en", name: "English" },
       { code: "zh", name: "中文" },
     ],
-    vueI18n: "./i18n.config.ts",
+    vueI18n: "../i18n.config.ts",
+    bundle: { optimizeTranslationDirective: false },
   },
   compatibilityDate: "2025-01-01",
 });
diff --git a/apps/mall/pages/cart.vue b/apps/mall/pages/cart.vue
new file mode 100644
index 0000000..161c567
--- /dev/null
+++ b/apps/mall/pages/cart.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import type { Cart, CartItem } from "@vmall/shared";
+import { t as localized } from "@vmall/shared";
+
+const { $api } = useNuxtApp();
+const { locale } = useI18n();
+const { currency, convertAmount, formatAmount } = usePrice();
+
+const cart = ref<Cart | null>(null);
+const converted = ref<Record<string, number>>({});
+const subtotalDisplay = ref("");
+const loading = ref(true);
+const error = ref("");
+const updating = ref<string | null>(null);
+
+const subtotalMinor = computed(() => (cart.value?.items ?? []).reduce((sum, item) => sum + (converted.value[item.sku_id] ?? 0) * item.qty, 0));
+
+function errorMessage(value: unknown): string {
+  return value instanceof Error ? value.message : $t("mall.loadFailed");
+}
+
+async function refreshPrices(): Promise<void> {
+  if (!cart.value) return;
+  const entries = await Promise.all(cart.value.items.map(async (item) => [item.sku_id, await convertAmount(item.unit_price_minor, item.currency)] as const));
+  converted.value = Object.fromEntries(entries);
+  subtotalDisplay.value = await formatAmount(subtotalMinor.value, currency.value);
+}
+
+async function loadCart(): Promise<void> {
+  loading.value = true;
+  error.value = "";
+  try {
+    cart.value = await $api.getCart();
+    await refreshPrices();
+  } catch (value) {
+    error.value = errorMessage(value);
+    cart.value = null;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function updateQuantity(item: CartItem, value: string | number): Promise<void> {
+  const qty = Math.trunc(Number(value));
+  if (!Number.isFinite(qty) || qty < 1) {
+    error.value = $t("mall.invalidQuantity");
+    return;
+  }
+  updating.value = item.sku_id;
+  error.value = "";
+  try {
+    await $api.updateCartItem(item.sku_id, qty);
+    await loadCart();
+  } catch (value) {
+    error.value = errorMessage(value);
+  } finally {
+    updating.value = null;
+  }
+}
+
+async function removeItem(item: CartItem): Promise<void> {
+  updating.value = item.sku_id;
+  error.value = "";
+  try {
+    await $api.removeCartItem(item.sku_id);
+    await loadCart();
+  } catch (value) {
+    error.value = errorMessage(value);
+  } finally {
+    updating.value = null;
+  }
+}
+
+watch(currency, () => void refreshPrices());
+onMounted(() => void loadCart());
+
+definePageMeta({ middleware: "auth" });
+</script>
+
+<template>
+  <section>
+    <h1 class="page-title">{{ $t("cart.title") }}</h1>
+    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+    <p v-if="error" class="error-text" role="alert">{{ error }}</p>
+    <div v-if="!loading && cart && cart.items.length === 0" class="card empty-state">{{ $t("cart.emptyCart") }}</div>
+    <template v-if="cart && cart.items.length > 0">
+      <div class="card cart-list">
+        <div v-for="item in cart.items" :key="item.sku_id" class="cart-line">
+          <div class="cart-product">
+            <img v-if="item.image" :src="item.image" :alt="localized(item.product_name, locale)">
+            <div v-else class="image-placeholder">{{ $t("mall.noImage") }}</div>
+            <div>
+              <NuxtLink :to="`/products/${item.product_id}`" class="product-name">{{ localized(item.product_name, locale) }}</NuxtLink>
+              <div class="muted">{{ item.sku_code }}</div>
+            </div>
+          </div>
+          <div class="unit-price"><PriceText :amount-minor="item.unit_price_minor" :currency="item.currency" /></div>
+          <div class="quantity-field">
+            <label class="sr-only" :for="`qty-${item.sku_id}`">{{ $t("common.qty") }}</label>
+            <input :id="`qty-${item.sku_id}`" :value="item.qty" type="number" min="1" :disabled="updating === item.sku_id" @change="updateQuantity(item, ($event.target as HTMLInputElement).value)">
+          </div>
+          <div class="line-total"><PriceText :amount-minor="(converted[item.sku_id] ?? 0) * item.qty" :currency="currency" /></div>
+          <button class="btn danger sm" :disabled="updating === item.sku_id" @click="removeItem(item)">{{ $t("cart.remove") }}</button>
+        </div>
+      </div>
+      <div class="card summary row between">
+        <strong>{{ $t("cart.subtotal") }}</strong>
+        <strong class="total">{{ subtotalDisplay || $t("common.loading") }}</strong>
+        <NuxtLink class="btn primary" to="/checkout">{{ $t("cart.checkout") }}</NuxtLink>
+      </div>
+    </template>
+  </section>
+</template>
+
+<style scoped>
+.cart-list { padding: 0; }
+.cart-line { display: grid; grid-template-columns: minmax(240px, 1fr) 120px 100px 120px auto; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); }
+.cart-line:last-child { border-bottom: 0; }
+.cart-product { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.cart-product img, .image-placeholder { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius); background: #eef1f5; }
+.image-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 10px; text-align: center; }
+.product-name { font-weight: 600; }
+.quantity-field { margin: 0; }
+.quantity-field input { width: 80px; }
+.line-total, .unit-price, .total { color: var(--primary); font-weight: 600; }
+.summary { margin-top: 16px; }
+.empty-state { text-align: center; }
+.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+@media (max-width: 800px) {
+  .cart-line { grid-template-columns: 1fr auto auto; }
+  .unit-price, .line-total { text-align: right; }
+  .cart-product { grid-column: 1 / -1; }
+}
+</style>
diff --git a/apps/mall/pages/checkout.vue b/apps/mall/pages/checkout.vue
new file mode 100644
index 0000000..81f711b
--- /dev/null
+++ b/apps/mall/pages/checkout.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import type { Address, Cart, Order } from "@vmall/shared";
+import { t as localized } from "@vmall/shared";
+
+const { $api } = useNuxtApp();
+const { locale } = useI18n();
+const { currency, convertAmount, formatAmount } = usePrice();
+
+const cart = ref<Cart | null>(null);
+const converted = ref<Record<string, number>>({});
+const subtotalDisplay = ref("");
+const loading = ref(true);
+const submitting = ref(false);
+const error = ref("");
+const placedOrders = ref<Order[] | null>(null);
+const address = reactive<Address>({ recipient: "", phone: "", country: "", region: "", city: "", line1: "", postal_code: "" });
+
+const subtotalMinor = computed(() => (cart.value?.items ?? []).reduce((sum, item) => sum + (converted.value[item.sku_id] ?? 0) * item.qty, 0));
+
+function errorMessage(value: unknown): string {
+  return value instanceof Error ? value.message : $t("mall.loadFailed");
+}
+
+async function refreshPrices(): Promise<void> {
+  if (!cart.value) return;
+  const entries = await Promise.all(cart.value.items.map(async (item) => [item.sku_id, await convertAmount(item.unit_price_minor, item.currency)] as const));
+  converted.value = Object.fromEntries(entries);
+  subtotalDisplay.value = await formatAmount(subtotalMinor.value, currency.value);
+}
+
+async function loadCart(): Promise<void> {
+  loading.value = true;
+  error.value = "";
+  try {
+    cart.value = await $api.getCart();
+    await refreshPrices();
+  } catch (value) {
+    error.value = errorMessage(value);
+  } finally {
+    loading.value = false;
+  }
+}
+
+function validateAddress(): boolean {
+  const required: (keyof Address)[] = ["recipient", "phone", "country", "city", "line1"];
+  return required.every((key) => address[key].trim().length > 0);
+}
+
+async function placeOrder(): Promise<void> {
+  if (!validateAddress()) {
+    error.value = $t("common.required");
+    return;
+  }
+  if (!cart.value || cart.value.items.length === 0) return;
+  submitting.value = true;
+  error.value = "";
+  try {
+    placedOrders.value = await $api.checkout({ ...address }, currency.value);
+    await $api.getCart();
+  } catch (value) {
+    error.value = errorMessage(value);
+  } finally {
+    submitting.value = false;
+  }
+}
+
+watch(currency, () => void refreshPrices());
+onMounted(() => void loadCart());
+
+definePageMeta({ middleware: "auth" });
+</script>
+
+<template>
+  <section>
+    <h1 class="page-title">{{ placedOrders ? $t("mall.orderSuccess") : $t("mall.checkoutTitle") }}</h1>
+    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+    <p v-if="error" class="error-text" role="alert">{{ error }}</p>
+
+    <div v-if="placedOrders" class="card success-card">
+      <h2>{{ $t("mall.orderNumbers") }}</h2>
+      <ul>
+        <li v-for="order in placedOrders" :key="order.id"><NuxtLink :to="`/orders/${order.id}`">{{ order.order_no }}</NuxtLink></li>
+      </ul>
+      <div class="row">
+        <NuxtLink class="btn primary" to="/orders">{{ $t("mall.viewOrders") }}</NuxtLink>
+        <NuxtLink class="btn" to="/">{{ $t("mall.backToShop") }}</NuxtLink>
+      </div>
+    </div>
+
+    <template v-else-if="cart && cart.items.length > 0">
+      <div class="checkout-layout">
+        <form class="card" @submit.prevent="placeOrder">
+          <h2>{{ $t("order.shippingAddress") }}</h2>
+          <div class="field-row">
+            <div class="field"><label for="recipient">{{ $t("order.recipient") }}</label><input id="recipient" v-model="address.recipient" required></div>
+            <div class="field"><label for="phone">{{ $t("order.phone") }}</label><input id="phone" v-model="address.phone" required></div>
+          </div>
+          <div class="field-row">
+            <div class="field"><label for="country">{{ $t("order.country") }}</label><input id="country" v-model="address.country" required></div>
+            <div class="field"><label for="region">{{ $t("order.region") }} <span class="muted">({{ $t("mall.shippingOptional") }})</span></label><input id="region" v-model="address.region"></div>
+          </div>
+          <div class="field-row">
+            <div class="field"><label for="city">{{ $t("order.city") }}</label><input id="city" v-model="address.city" required></div>
+            <div class="field"><label for="postal-code">{{ $t("order.postalCode") }} <span class="muted">({{ $t("mall.shippingOptional") }})</span></label><input id="postal-code" v-model="address.postal_code"></div>
+          </div>
+          <div class="field"><label for="line1">{{ $t("order.line1") }}</label><input id="line1" v-model="address.line1" required></div>
+          <button class="btn primary" type="submit" :disabled="submitting">{{ submitting ? $t("common.loading") : $t("mall.placeOrder") }}</button>
+        </form>
+
+        <aside class="card preview">
+          <h2>{{ $t("mall.orderPreview") }}</h2>
+          <div v-for="item in cart.items" :key="item.sku_id" class="preview-line">
+            <div><strong>{{ localized(item.product_name, locale) }}</strong><span class="muted">{{ item.sku_code }} × {{ item.qty }}</span></div>
+            <PriceText :amount-minor="(converted[item.sku_id] ?? 0) * item.qty" :currency="currency" />
+          </div>
+          <div class="preview-total row between"><strong>{{ $t("cart.subtotal") }}</strong><strong>{{ subtotalDisplay || $t("common.loading") }}</strong></div>
+        </aside>
+      </div>
+    </template>
+    <div v-else-if="!loading" class="card empty-state">
+      {{ $t("cart.emptyCart") }}
+      <NuxtLink class="btn mt" to="/">{{ $t("mall.backToShop") }}</NuxtLink>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.checkout-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr); gap: 20px; align-items: start; }
+.card h2 { font-size: 17px; margin: 0 0 16px; }
+.preview-line { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
+.preview-line > div { display: grid; gap: 2px; }
+.preview-total { padding-top: 14px; color: var(--primary); }
+.success-card { max-width: 580px; }
+.empty-state { text-align: center; }
+@media (max-width: 760px) { .checkout-layout { grid-template-columns: 1fr; } }
+</style>
diff --git a/apps/mall/pages/index.vue b/apps/mall/pages/index.vue
index d286cfd..0f9f518 100644
--- a/apps/mall/pages/index.vue
+++ b/apps/mall/pages/index.vue
@@ -1,6 +1,144 @@
+<script setup lang="ts">
+import type { Category, Product, Paged, Sku } from "@vmall/shared";
+import { t as localized } from "@vmall/shared";
+
+const { $api } = useNuxtApp();
+const { locale } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const categories = ref<Category[]>([]);
+const result = ref<Paged<Product> | null>(null);
+const search = ref(typeof route.query.q === "string" ? route.query.q : "");
+const categoryId = ref(typeof route.query.category_id === "string" ? route.query.category_id : "");
+const page = ref(Number(route.query.page) > 0 ? Number(route.query.page) : 1);
+const loading = ref(false);
+const error = ref("");
+
+function errorMessage(value: unknown): string {
+  return value instanceof Error ? value.message : $t("mall.loadFailed");
+}
+
+function lowestSku(product: Product): Sku | null {
+  const active = (product.skus ?? []).filter((sku) => sku.active && sku.stock > 0);
+  return active.reduce<Sku | null>((lowest, sku) => {
+    if (!lowest || sku.price_minor < lowest.price_minor) return sku;
+    return lowest;
+  }, null) ?? (product.skus ?? []).find((sku) => sku.active) ?? null;
+}
+
+async function loadCategories(): Promise<void> {
+  try {
+    categories.value = await $api.listCategories();
+  } catch (value) {
+    error.value = errorMessage(value);
+  }
+}
+
+async function loadProducts(): Promise<void> {
+  loading.value = true;
+  error.value = "";
+  try {
+    result.value = await $api.listProducts({
+      page: page.value,
+      per_page: 12,
+      category_id: categoryId.value || undefined,
+      q: search.value.trim() || undefined,
+    });
+  } catch (value) {
+    error.value = errorMessage(value);
+    result.value = null;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function applyFilters(): Promise<void> {
+  page.value = 1;
+  await router.replace({ query: {
+    ...(search.value.trim() ? { q: search.value.trim() } : {}),
+    ...(categoryId.value ? { category_id: categoryId.value } : {}),
+    page: "1",
+  } });
+  await loadProducts();
+}
+
+async function changePage(nextPage: number): Promise<void> {
+  const pages = Math.max(1, Math.ceil((result.value?.total ?? 0) / (result.value?.per_page ?? 12)));
+  if (nextPage < 1 || nextPage > pages) return;
+  page.value = nextPage;
+  await router.replace({ query: { ...route.query, page: String(nextPage) } });
+  await loadProducts();
+}
+
+onMounted(async () => {
+  await Promise.all([loadCategories(), loadProducts()]);
+});
+
+const totalPages = computed(() => Math.max(1, Math.ceil((result.value?.total ?? 0) / (result.value?.per_page ?? 12))));
+</script>
+
 <template>
-  <div>
-    <h1 class="page-title">{{ $t("common.appName") }}</h1>
-    <p class="muted">{{ $t("common.loading") }}</p>
-  </div>
+  <section>
+    <div class="page-head">
+      <h1 class="page-title">{{ $t("mall.catalogTitle") }}</h1>
+    </div>
+
+    <form class="card filters" @submit.prevent="applyFilters">
+      <div class="field search-field">
+        <label for="product-search">{{ $t("common.search") }}</label>
+        <input id="product-search" v-model="search" type="search" :placeholder="$t('mall.searchPlaceholder')">
+      </div>
+      <div class="field category-field">
+        <label for="product-category">{{ $t("mall.filter") }}</label>
+        <select id="product-category" v-model="categoryId">
+          <option value="">{{ $t("mall.allCategories") }}</option>
+          <option v-for="category in categories" :key="category.id" :value="category.id">
+            {{ localized(category.name, locale) }}
+          </option>
+        </select>
+      </div>
+      <button class="btn primary filter-button" type="submit">{{ $t("common.search") }}</button>
+    </form>
+    <p v-if="error" class="error-text" role="alert">{{ error }}</p>
+    <p v-if="loading" class="muted" aria-live="polite">{{ $t("common.loading") }}</p>
+    <div v-else-if="result && result.items.length === 0" class="card empty-state">{{ $t("common.empty") }}</div>
+    <div v-else-if="result" class="grid products">
+      <article v-for="product in result.items" :key="product.id" class="card product-card">
+        <NuxtLink :to="`/products/${product.id}`">
+          <img v-if="product.images[0]" :src="product.images[0]" :alt="localized(product.name, locale)">
+          <div v-else class="image-placeholder">{{ $t("mall.noImage") }}</div>
+        </NuxtLink>
+        <div class="body">
+          <div class="name">{{ localized(product.name, locale) }}</div>
+          <div v-if="lowestSku(product)" class="price">
+            <PriceText :amount-minor="lowestSku(product)!.price_minor" :currency="lowestSku(product)!.currency" />
+          </div>
+          <div v-else class="muted">{{ $t("mall.unavailable") }}</div>
+          <NuxtLink class="btn sm mt" :to="`/products/${product.id}`">{{ $t("mall.viewDetails") }}</NuxtLink>
+        </div>
+      </article>
+    </div>
+
+    <div v-if="result && result.items.length > 0" class="row between pagination">
+      <button class="btn" :disabled="page <= 1" @click="changePage(page - 1)">{{ $t("common.prev") }}</button>
+      <span class="muted">{{ $t("common.page") }} {{ page }} / {{ totalPages }}</span>
+      <button class="btn" :disabled="page >= totalPages" @click="changePage(page + 1)">{{ $t("common.next") }}</button>
+    </div>
+  </section>
 </template>
+
+<style scoped>
+.filters { display: flex; align-items: end; gap: 12px; margin-bottom: 20px; }
+.filters .field { margin: 0; }
+.search-field { flex: 1; }
+.category-field { min-width: 210px; }
+.filter-button { white-space: nowrap; }
+.image-placeholder { aspect-ratio: 1; display: grid; place-items: center; background: #eef1f5; color: var(--muted); }
+.pagination { margin-top: 20px; }
+.empty-state { text-align: center; }
+@media (max-width: 640px) {
+  .filters { align-items: stretch; flex-direction: column; }
+  .category-field { min-width: 0; }
+}
+</style>
diff --git a/apps/mall/pages/invoices.vue b/apps/mall/pages/invoices.vue
new file mode 100644
index 0000000..1f2ec69
--- /dev/null
+++ b/apps/mall/pages/invoices.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { Invoice } from "@vmall/shared";
+
+const { $api } = useNuxtApp();
+const { locale } = useI18n();
+const { formatAmount } = usePrice();
+const invoices = ref<Invoice[]>([]);
+const amounts = ref<Record<string, string>>({});
+const loading = ref(true);
+const error = ref("");
+
+function errorMessage(value: unknown): string {
+  return value instanceof Error ? value.message : $t("mall.loadFailed");
+}
+
+async function loadInvoices(): Promise<void> {
+  loading.value = true;
+  error.value = "";
+  try {
+    invoices.value = await $api.listMyInvoices();
+    const entries = await Promise.all(invoices.value.map(async (invoice) => [invoice.id, await formatAmount(invoice.amount_minor, invoice.currency)] as const));
+    amounts.value = Object.fromEntries(entries);
+  } catch (value) {
+    error.value = errorMessage(value);
+    invoices.value = [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(locale, () => {
+  if (invoices.value.length > 0) void loadInvoices();
+});
+onMounted(() => void loadInvoices());
+
+definePageMeta({ middleware: "auth" });
+</script>
+
+<template>
+  <section>
+    <h1 class="page-title">{{ $t("invoice.title") }}</h1>
+    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+    <p v-if="error" class="error-text" role="alert">{{ error }}</p>
+    <div v-if="!loading && invoices.length === 0" class="card empty-state">{{ $t("common.empty") }}</div>
+    <table v-if="invoices.length > 0" class="table">
+      <thead><tr><th>{{ $t("invoice.invoiceNo") }}</th><th>{{ $t("order.orderNo") }}</th><th>{{ $t("invoice.invoiceTitle") }}</th><th>{{ $t("invoice.kind") }}</th><th>{{ $t("invoice.amount") }}</th><th>{{ $t("common.status") }}</th><th>{{ $t("invoice.status.issued") }}</th></tr></thead>
+      <tbody>
+        <tr v-for="item in invoices" :key="item.id">
+          <td>{{ item.invoice_no || $t("mall.notAvailable") }}</td>
+          <td>{{ item.order_no || $t("mall.notAvailable") }}</td>
+          <td>{{ item.title }}</td>
+          <td>{{ $t(`invoice.${item.kind}`) }}</td>
+          <td>{{ amounts[item.id] || $t("common.loading") }}</td>
+          <td><StatusBadge :status="item.status" kind="invoice" /></td>
+          <td>{{ item.issued_at ? new Date(item.issued_at).toLocaleString(locale === "zh" ? "zh-CN" : "en-US") : $t("mall.notAvailable") }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+</template>
+
+<style scoped>
+.empty-state { text-align: center; }
+@media (max-width: 760px) { .table { display: block; overflow-x: auto; white-space: nowrap; } }
+</style>
diff --git a/apps/mall/pages/login.vue b/apps/mall/pages/login.vue
new file mode 100644
index 0000000..57c3831
--- /dev/null
+++ b/apps/mall/pages/login.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+const { $api } = useNuxtApp();
+const session = useSessionStore();
+const email = ref("");
+const password = ref("");
+const error = ref("");
+const submitting = ref(false);
+
+async function submit(): Promise<void> {
+  submitting.value = true;
+  error.value = "";
+  try {
+    const auth = await $api.login(email.value.trim(), password.value);
+    if (auth.user.role !== "customer") {
+      error.value = $t("auth.wrongRole");
+      return;
+    }
+    session.setAuth(auth);
+    await navigateTo("/");
+  } catch (value) {
+    error.value = value instanceof Error ? value.message : $t("auth.badCredentials");
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>
+
+<template>
+  <section class="form-narrow card">
+    <h1 class="page-title">{{ $t("auth.welcome") }}</h1>
+    <p v-if="error" class="error-text" role="alert">{{ error }}</p>
+    <form @submit.prevent="submit">
+      <div class="field"><label for="login-email">{{ $t("common.email") }}</label><input id="login-email" v-model="email" type="email" autocomplete="email" required></div>
+      <div class="field"><label for="login-password">{{ $t("common.password") }}</label><input id="login-password" v-model="password" type="password" autocomplete="current-password" required></div>
+      <button class="btn primary" type="submit" :disabled="submitting">{{ submitting ? $t("common.loading") : $t("common.login") }}</button>
+    </form>
+    <p class="muted mt">{{ $t("auth.noAccount") }} <NuxtLink to="/register">{{ $t("common.register") }}</NuxtLink></p>
+  </section>
+</template>
diff --git a/apps/mall/pages/orders/[id].vue b/apps/mall/pages/orders/[id].vue
new file mode 100644
index 0000000..8292316
--- /dev/null
+++ b/apps/mall/pages/orders/[id].vue
@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import type { Invoice, InvoiceKind, Order, Shipment } from "@vmall/shared";
+import { t as localized } from "@vmall/shared";
+
+const route = useRoute();
+const { locale } = useI18n();
+const { $api } = useNuxtApp();
+const { formatAmount } = usePrice();
+
+const order = ref<Order | null>(null);
+const shipments = ref<Shipment[]>([]);
+const invoice = ref<Invoice | null>(null);
+const totalDisplay = ref("");
+const loading = ref(true);
+const error = ref("");
+const action = ref("");
+const invoiceKind = ref<InvoiceKind>("personal");
+const invoiceTitle = ref("");
+const taxNo = ref("");
+const invoiceSubmitting = ref(false);
+
+function errorMessage(value: unknown): string {
+  return value instanceof Error ? value.message : $t("mall.loadFailed");
+}
+
+async function loadOrder(): Promise<void> {
+  loading.value = true;
+  error.value = "";
+  try {
+    const orderId = String(route.params.id);
+    const [loadedOrder, loadedShipments, loadedInvoices] = await Promise.all([
+      $api.getOrder(orderId),
+      $api.listMyShipments(),
+      $api.listMyInvoices(),
+    ]);
+    order.value = loadedOrder;
+    shipments.value = loadedShipments.filter((shipment) => shipment.order_id === loadedOrder.id);
+    invoice.value = loadedInvoices.find((item) => item.order_id === loadedOrder.id) ?? null;
+    totalDisplay.value = await formatAmount(loadedOrder.total_minor, loadedOrder.currency);
+  } catch (value) {
+    error.value = errorMessage(value);
+    order.value = null;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function runAction(name: "pay" | "cancel"): Promise<void> {
+  if (!order.value) return;
+  action.value = name;
+  error.value = "";
+  try {
+    if (name === "pay") await $api.payOrder(order.value.id);
+    else await $api.cancelOrder(order.value.id);
+    await loadOrder();
+  } catch (value) {
+    error.value = errorMessage(value);
+  } finally {
+    action.value = "";
+  }
+}
+
+async function confirmDelivery(shipment: Shipment): Promise<void> {
+  action.value = shipment.id;
+  error.value = "";
+  try {
+    await $api.confirmDelivered(shipment.id);
+    await loadOrder();
+  } catch (value) {
+    error.value = errorMessage(value);
+  } finally {
+    action.value = "";
+  }
+}
+
+async function requestInvoice(): Promise<void> {
+  if (!order.value || !invoiceTitle.value.trim()) {
+    error.value = $t("common.required");
+    return;
+  }
+  if (invoiceKind.value === "company" && !taxNo.value.trim()) {
+    error.value = $t("mall.companyTaxRequired");
+    return;
+  }
+  invoiceSubmitting.value = true;
+  error.value = "";
+  try {
+    await $api.requestInvoice(order.value.id, invoiceTitle.value.trim(), invoiceKind.value === "company" ? taxNo.value.trim() : null, invoiceKind.value);
+    await loadOrder();
+  } catch (value) {
+    error.value = errorMessage(value);
+  } finally {
+    invoiceSubmitting.value = false;
+  }
+}
+
+watch(locale, () => {
+  if (order.value) void loadOrder();
+});
+onMounted(() => void loadOrder());
+
+definePageMeta({ middleware: "auth" });
+</script>
+
+<template>
+  <section>
+    <NuxtLink to="/orders" class="muted">← {{ $t("common.back") }}</NuxtLink>
+    <p v-if="loading" class="muted mt">{{ $t("common.loading") }}</p>
+    <p v-if="error" class="error-text" role="alert">{{ error }}</p>
+    <template v-if="order">
+      <div class="page-head mt">
+        <h1 class="page-title">{{ order.order_no }}</h1>
+        <StatusBadge :status="order.status" kind="order" />
+      </div>
+      <div class="card order-summary">
+        <div><span class="muted">{{ $t("mall.created") }}</span><strong>{{ new Date(order.created_at).toLocaleString(locale === "zh" ? "zh-CN" : "en-US") }}</strong></div>
+        <div><span class="muted">{{ $t("common.total") }}</span><strong class="total">{{ totalDisplay }}</strong></div>
+        <div v-if="order.status === 'pending_payment'" class="row">
+          <button class="btn primary" :disabled="action !== ''" @click="runAction('pay')">{{ action === "pay" ? $t("common.loading") : $t("order.pay") }}</button>
+          <button class="btn danger" :disabled="action !== ''" @click="runAction('cancel')">{{ action === "cancel" ? $t("common.loading") : $t("order.cancelOrder") }}</button>
+        </div>
+      </div>
+
+      <div class="card mt">
+        <h2>{{ $t("mall.cartItems") }}</h2>
+        <table class="table">
+          <thead><tr><th>{{ $t("product.detail") }}</th><th>{{ $t("common.price") }}</th><th>{{ $t("common.qty") }}</th><th>{{ $t("mall.lineTotal") }}</th></tr></thead>
+          <tbody>
+            <tr v-for="item in order.items" :key="item.id">
+              <td><div>{{ localized(item.product_name, locale) }}</div><span class="muted">{{ item.sku_code }}</span></td>
+              <td><PriceText :amount-minor="item.unit_price_minor" :currency="order.currency" /></td>
+              <td>{{ item.qty }}</td>
+              <td><PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="order.currency" /></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="card mt">
+        <h2>{{ $t("order.shippingAddress") }}</h2>
+        <div class="address-grid">
+          <div><span class="muted">{{ $t("order.recipient") }}</span>{{ order.shipping_address.recipient }}</div>
+          <div><span class="muted">{{ $t("order.phone") }}</span>{{ order.shipping_address.phone }}</div>
+          <div><span class="muted">{{ $t("order.country") }}</span>{{ order.shipping_address.country }}</div>
+          <div><span class="muted">{{ $t("order.region") }}</span>{{ order.shipping_address.region || $t("mall.notAvailable") }}</div>
+          <div><span class="muted">{{ $t("order.city") }}</span>{{ order.shipping_address.city }}</div>
+          <div><span class="muted">{{ $t("order.postalCode") }}</span>{{ order.shipping_address.postal_code }}</div>
+          <div class="wide"><span class="muted">{{ $t("order.line1") }}</span>{{ order.shipping_address.line1 }}</div>
+        </div>
+      </div>
+
+      <div class="card mt">
+        <h2>{{ $t("mall.shipments") }}</h2>
+        <div v-if="shipments.length === 0" class="muted">{{ $t("common.empty") }}</div>
+        <table v-else class="table">
+          <thead><tr><th>{{ $t("shipment.shipmentNo") }}</th><th>{{ $t("shipment.carrier") }}</th><th>{{ $t("shipment.trackingNo") }}</th><th>{{ $t("common.status") }}</th><th>{{ $t("common.actions") }}</th></tr></thead>
+          <tbody>
+            <tr v-for="shipment in shipments" :key="shipment.id">
+              <td>{{ shipment.shipment_no }}</td><td>{{ shipment.carrier }}</td><td>{{ shipment.tracking_no }}</td><td><StatusBadge :status="shipment.status" kind="shipment" /></td>
+              <td><button v-if="shipment.status === 'shipped'" class="btn sm" :disabled="action !== ''" @click="confirmDelivery(shipment)">{{ $t("order.confirmDelivery") }}</button><span v-else class="muted">{{ $t("mall.notAvailable") }}</span></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="card mt">
+        <h2>{{ $t("mall.invoices") }}</h2>
+        <div v-if="invoice" class="invoice-existing row between">
+          <div><strong>{{ invoice.invoice_no || $t("mall.notAvailable") }}</strong><span class="muted">{{ invoice.title }} · {{ $t(`invoice.${invoice.kind}`) }}</span></div>
+          <StatusBadge :status="invoice.status" kind="invoice" />
+        </div>
+        <div v-else>
+          <p class="muted">{{ $t("mall.noInvoice") }}</p>
+          <form class="invoice-form" @submit.prevent="requestInvoice">
+            <div class="field"><label for="invoice-kind">{{ $t("invoice.kind") }}</label><select id="invoice-kind" v-model="invoiceKind"><option value="personal">{{ $t("invoice.personal") }}</option><option value="company">{{ $t("invoice.company") }}</option></select></div>
+            <div class="field"><label for="invoice-title">{{ $t("invoice.invoiceTitle") }}</label><input id="invoice-title" v-model="invoiceTitle" required></div>
+            <div v-if="invoiceKind === 'company'" class="field"><label for="tax-no">{{ $t("invoice.taxNo") }}</label><input id="tax-no" v-model="taxNo"></div>
+            <button class="btn primary" type="submit" :disabled="invoiceSubmitting">{{ invoiceSubmitting ? $t("common.loading") : $t("order.requestInvoice") }}</button>
+          </form>
+        </div>
+      </div>
+    </template>
+  </section>
+</template>
+
+<style scoped>
+.order-summary { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
+.order-summary > div:not(.row) { display: grid; gap: 3px; }
+.total { color: var(--primary); font-size: 18px; }
+.card h2 { font-size: 17px; margin: 0 0 14px; }
+.address-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }
+.address-grid > div { display: grid; gap: 2px; }
+.address-grid .wide { grid-column: 1 / -1; }
+.invoice-existing > div { display: grid; gap: 3px; }
+.invoice-form { max-width: 420px; }
+@media (max-width: 640px) { .address-grid { grid-template-columns: 1fr; } .address-grid .wide { grid-column: auto; } .table { display: block; overflow-x: auto; white-space: nowrap; } }
+</style>
diff --git a/apps/mall/pages/orders/index.vue b/apps/mall/pages/orders/index.vue
new file mode 100644
index 0000000..7175d38
--- /dev/null
+++ b/apps/mall/pages/orders/index.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { Order, Paged } from "@vmall/shared";
+
+const { $api } = useNuxtApp();
+const { locale } = useI18n();
+const { formatAmount } = usePrice();
+const page = ref(1);
+const result = ref<Paged<Order> | null>(null);
+const totals = ref<Record<string, string>>({});
+const loading = ref(true);
+const error = ref("");
+
+function errorMessage(value: unknown): string {
+  return value instanceof Error ? value.message : $t("mall.loadFailed");
+}
+
+async function loadOrders(): Promise<void> {
+  loading.value = true;
+  error.value = "";
+  try {
+    result.value = await $api.listMyOrders(page.value);
+    const entries = await Promise.all(result.value.items.map(async (order) => [order.id, await formatAmount(order.total_minor, order.currency)] as const));
+    totals.value = Object.fromEntries(entries);
+  } catch (value) {
+    error.value = errorMessage(value);
+    result.value = null;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function changePage(next: number): Promise<void> {
+  if (next < 1 || next > totalPages.value) return;
+  page.value = next;
+  await loadOrders();
+}
+
+const totalPages = computed(() => Math.max(1, Math.ceil((result.value?.total ?? 0) / (result.value?.per_page ?? 20))));
+
+watch(locale, () => {
+  if (result.value) void loadOrders();
+});
+onMounted(() => void loadOrders());
+
+</script>
+
+<template>
+  <section>
+    <h1 class="page-title">{{ $t("order.title") }}</h1>
+    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+    <p v-if="error" class="error-text" role="alert">{{ error }}</p>
+    <div v-if="!loading && result && result.items.length === 0" class="card empty-state">{{ $t("common.empty") }}</div>
+    <table v-if="result && result.items.length > 0" class="table">
+      <thead><tr><th>{{ $t("order.orderNo") }}</th><th>{{ $t("mall.created") }}</th><th>{{ $t("mall.items") }}</th><th>{{ $t("common.total") }}</th><th>{{ $t("common.status") }}</th><th>{{ $t("common.actions") }}</th></tr></thead>
+      <tbody>
+        <tr v-for="order in result.items" :key="order.id">
+          <td>{{ order.order_no }}</td>
+          <td>{{ new Date(order.created_at).toLocaleString(locale === "zh" ? "zh-CN" : "en-US") }}</td>
+          <td>{{ order.items.length }}</td>
+          <td>{{ totals[order.id] || $t("common.loading") }}</td>
+          <td><StatusBadge :status="order.status" kind="order" /></td>
+          <td><NuxtLink :to="`/orders/${order.id}`">{{ $t("mall.details") }}</NuxtLink></td>
+        </tr>
+      </tbody>
+    </table>
+    <div v-if="result && result.items.length > 0" class="row between pagination">
+      <button class="btn" :disabled="page <= 1" @click="changePage(page - 1)">{{ $t("common.prev") }}</button>
+      <span class="muted">{{ $t("common.page") }} {{ page }} / {{ totalPages }}</span>
+      <button class="btn" :disabled="page >= totalPages" @click="changePage(page + 1)">{{ $t("common.next") }}</button>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.pagination { margin-top: 16px; }
+.empty-state { text-align: center; }
+@media (max-width: 700px) { .table { display: block; overflow-x: auto; white-space: nowrap; } }
+</style>
diff --git a/apps/mall/pages/products/[id].vue b/apps/mall/pages/products/[id].vue
new file mode 100644
index 0000000..133c4b1
--- /dev/null
+++ b/apps/mall/pages/products/[id].vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import type { Product, Sku } from "@vmall/shared";
+import { t as localized } from "@vmall/shared";
+
+const route = useRoute();
+const { locale } = useI18n();
+const { $api } = useNuxtApp();
+const session = useSessionStore();
+const product = ref<Product | null>(null);
+const selectedSkuId = ref("");
+const quantity = ref(1);
+const mainImage = ref("");
+const loading = ref(true);
+const submitting = ref(false);
+const error = ref("");
+
+const skus = computed(() => (product.value?.skus ?? []).filter((sku) => sku.active));
+const selectedSku = computed<Sku | null>(() => skus.value.find((sku) => sku.id === selectedSkuId.value) ?? skus.value[0] ?? null);
+
+function errorMessage(value: unknown): string {
+  return value instanceof Error ? value.message : $t("mall.loadFailed");
+}
+
+async function loadProduct(): Promise<void> {
+  loading.value = true;
+  error.value = "";
+  try {
+    product.value = await $api.getProduct(String(route.params.id));
+    mainImage.value = product.value.images[0] ?? "";
+    selectedSkuId.value = skus.value[0]?.id ?? "";
+  } catch (value) {
+    error.value = errorMessage(value);
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function addToCart(): Promise<void> {
+  const sku = selectedSku.value;
+  if (!sku || sku.stock < 1) return;
+  if (!localStorage.getItem("vmall.token") || session.user?.role !== "customer") {
+    await navigateTo("/login");
+    return;
+  }
+  const qty = Math.max(1, Math.min(sku.stock, Math.trunc(quantity.value)));
+  submitting.value = true;
+  error.value = "";
+  try {
+    await $api.addCartItem(sku.id, qty);
+    await navigateTo("/cart");
+  } catch (value) {
+    error.value = errorMessage(value);
+  } finally {
+    submitting.value = false;
+  }
+}
+
+watch(selectedSku, (sku) => {
+  if (sku && quantity.value > sku.stock) quantity.value = Math.max(1, sku.stock);
+});
+
+onMounted(async () => {
+  session.hydrate();
+  await loadProduct();
+});
+</script>
+
+<template>
+  <section>
+    <NuxtLink to="/" class="muted">← {{ $t("common.back") }}</NuxtLink>
+    <p v-if="loading" class="muted mt">{{ $t("common.loading") }}</p>
+    <p v-else-if="error" class="error-text" role="alert">{{ error }}</p>
+    <div v-else-if="product" class="detail-layout mt">
+      <div>
+        <div class="main-image">
+          <img v-if="mainImage" :src="mainImage" :alt="localized(product.name, locale)">
+          <div v-else class="image-placeholder">{{ $t("mall.noImage") }}</div>
+        </div>
+        <div v-if="product.images.length > 1" class="thumbs">
+          <button v-for="image in product.images" :key="image" class="thumb" :class="{ selected: image === mainImage }" type="button" @click="mainImage = image">
+            <img :src="image" :alt="localized(product.name, locale)">
+          </button>
+        </div>
+      </div>
+      <div class="card product-info">
+        <h1 class="page-title">{{ localized(product.name, locale) }}</h1>
+        <p class="muted">{{ localized(product.description, locale) }}</p>
+
+        <div class="field">
+          <label>{{ $t("mall.chooseSku") }}</label>
+          <div v-if="skus.length" class="sku-list">
+            <label v-for="sku in skus" :key="sku.id" class="sku-option" :class="{ selected: sku.id === selectedSkuId }">
+              <input v-model="selectedSkuId" type="radio" name="sku" :value="sku.id" :disabled="sku.stock < 1">
+              <span>
+                <strong>{{ sku.sku_code }}</strong>
+                <span v-for="(value, key) in sku.attributes" :key="key" class="attribute">{{ key }}: {{ value }}</span>
+              </span>
+              <span class="sku-meta">
+                <PriceText :amount-minor="sku.price_minor" :currency="sku.currency" />
+                <span class="muted">{{ sku.stock }} {{ $t("mall.available") }}</span>
+              </span>
+            </label>
+          </div>
+          <p v-else class="muted">{{ $t("mall.unavailable") }}</p>
+        </div>
+
+        <div v-if="selectedSku" class="purchase-row">
+          <div class="field quantity-field">
+            <label for="product-quantity">{{ $t("mall.quantity") }}</label>
+            <input id="product-quantity" v-model.number="quantity" type="number" min="1" :max="selectedSku.stock">
+          </div>
+          <div class="selected-price"><PriceText :amount-minor="selectedSku.price_minor" :currency="selectedSku.currency" /></div>
+        </div>
+        <button class="btn primary" :disabled="submitting || !selectedSku || selectedSku.stock < 1" @click="addToCart">
+          {{ submitting ? $t("common.loading") : $t("product.addToCart") }}
+        </button>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); gap: 24px; align-items: start; }
+.main-image { overflow: hidden; border-radius: var(--radius); background: #eef1f5; }
+.main-image img, .image-placeholder { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
+.image-placeholder { display: grid; place-items: center; color: var(--muted); }
+.thumbs { display: flex; gap: 8px; margin-top: 10px; }
+.thumb { padding: 0; border: 2px solid transparent; background: none; cursor: pointer; border-radius: var(--radius); overflow: hidden; }
+.thumb.selected { border-color: var(--primary); }
+.thumb img { width: 64px; height: 64px; display: block; object-fit: cover; }
+.product-info .page-title { margin-bottom: 8px; }
+.sku-list { display: grid; gap: 8px; }
+.sku-option { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; cursor: pointer; }
+.sku-option.selected { border-color: var(--primary); background: #f7f9ff; }
+.sku-option input { width: auto; margin-top: 3px; }
+.attribute { display: inline-block; margin-left: 10px; color: var(--muted); font-size: 12px; }
+.sku-meta { display: grid; justify-items: end; gap: 2px; color: var(--primary); font-weight: 600; }
+.sku-meta .muted { font-weight: 400; font-size: 12px; }
+.purchase-row { display: flex; align-items: end; gap: 16px; margin: 18px 0; }
+.quantity-field { width: 120px; margin: 0; }
+.selected-price { color: var(--primary); font-size: 20px; font-weight: 700; padding-bottom: 8px; }
+@media (max-width: 760px) { .detail-layout { grid-template-columns: 1fr; } }
+</style>
diff --git a/apps/mall/pages/register.vue b/apps/mall/pages/register.vue
new file mode 100644
index 0000000..5819e8b
--- /dev/null
+++ b/apps/mall/pages/register.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const { $api } = useNuxtApp();
+const session = useSessionStore();
+const email = ref("");
+const password = ref("");
+const displayName = ref("");
+const error = ref("");
+const submitting = ref(false);
+
+async function submit(): Promise<void> {
+  submitting.value = true;
+  error.value = "";
+  try {
+    const auth = await $api.register(email.value.trim(), password.value, displayName.value.trim());
+    if (auth.user.role !== "customer") {
+      error.value = $t("auth.wrongRole");
+      return;
+    }
+    session.setAuth(auth);
+    await navigateTo("/");
+  } catch (value) {
+    error.value = value instanceof Error ? value.message : $t("common.error");
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>
+
+<template>
+  <section class="form-narrow card">
+    <h1 class="page-title">{{ $t("auth.createAccount") }}</h1>
+    <p v-if="error" class="error-text" role="alert">{{ error }}</p>
+    <form @submit.prevent="submit">
+      <div class="field"><label for="register-name">{{ $t("common.displayName") }}</label><input id="register-name" v-model="displayName" autocomplete="name" required></div>
+      <div class="field"><label for="register-email">{{ $t("common.email") }}</label><input id="register-email" v-model="email" type="email" autocomplete="email" required></div>
+      <div class="field"><label for="register-password">{{ $t("common.password") }}</label><input id="register-password" v-model="password" type="password" autocomplete="new-password" minlength="8" required></div>
+      <button class="btn primary" type="submit" :disabled="submitting">{{ submitting ? $t("common.loading") : $t("common.register") }}</button>
+    </form>
+    <p class="muted mt">{{ $t("auth.haveAccount") }} <NuxtLink to="/login">{{ $t("common.login") }}</NuxtLink></p>
+  </section>
+</template>
diff --git a/apps/shop-admin/components/ProductForm.vue b/apps/shop-admin/components/ProductForm.vue
new file mode 100644
index 0000000..762a185
--- /dev/null
+++ b/apps/shop-admin/components/ProductForm.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { t as localized } from "@vmall/shared";
+import type { Category, Product, ProductUpsertBody } from "@vmall/shared";
+
+const props = defineProps<{
+  product?: Product;
+  categories: Category[];
+  busy?: boolean;
+}>();
+const emit = defineEmits<{ submit: [body: ProductUpsertBody] }>();
+const { t: translate, locale } = useI18n();
+
+const slug = ref("");
+const nameEn = ref("");
+const nameZh = ref("");
+const descriptionEn = ref("");
+const descriptionZh = ref("");
+const categoryId = ref("");
+const images = ref("");
+const validationError = ref("");
+
+function resetFromProduct(product: Product | undefined): void {
+  slug.value = product?.slug ?? "";
+  nameEn.value = product?.name.en ?? "";
+  nameZh.value = product?.name.zh ?? "";
+  descriptionEn.value = product?.description.en ?? "";
+  descriptionZh.value = product?.description.zh ?? "";
+  categoryId.value = product?.category_id ?? "";
+  images.value = product?.images.join("\n") ?? "";
+  validationError.value = "";
+}
+
+watch(() => props.product, resetFromProduct, { immediate: true });
+
+function submit(): void {
+  const cleanSlug = slug.value.trim();
+  if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(cleanSlug)) {
+    validationError.value = translate("shop.slugInvalid");
+    return;
+  }
+  if (!nameEn.value.trim()) {
+    validationError.value = translate("shop.productNameRequired");
+    return;
+  }
+  validationError.value = "";
+  const body: ProductUpsertBody = {
+    category_id: categoryId.value || null,
+    slug: cleanSlug,
+    name: { en: nameEn.value.trim(), zh: nameZh.value.trim() },
+    description: { en: descriptionEn.value.trim(), zh: descriptionZh.value.trim() },
+    images: images.value
+      .split("\n")
+      .map((image) => image.trim())
+      .filter((image) => image.length > 0),
+  };
+  emit("submit", body);
+}
+</script>
+
+<template>
+  <form class="card form-narrow product-form" @submit.prevent="submit">
+    <div v-if="validationError" class="error-text" role="alert">{{ validationError }}</div>
+    <div class="field">
+      <label for="product-slug">{{ $t("product.slug") }}</label>
+      <input id="product-slug" v-model="slug" required pattern="[a-z0-9]+(?:-[a-z0-9]+)*" />
+    </div>
+    <div class="field">
+      <label for="product-name-en">{{ $t("product.nameEn") }}</label>
+      <input id="product-name-en" v-model="nameEn" required />
+    </div>
+    <div class="field">
+      <label for="product-name-zh">{{ $t("product.nameZh") }}</label>
+      <input id="product-name-zh" v-model="nameZh" />
+    </div>
+    <div class="field">
+      <label for="product-description-en">{{ $t("product.descEn") }}</label>
+      <textarea id="product-description-en" v-model="descriptionEn" rows="4" />
+    </div>
+    <div class="field">
+      <label for="product-description-zh">{{ $t("product.descZh") }}</label>
+      <textarea id="product-description-zh" v-model="descriptionZh" rows="4" />
+    </div>
+    <div class="field">
+      <label for="product-category">{{ $t("product.category") }}</label>
+      <select id="product-category" v-model="categoryId">
+        <option value="">{{ $t("shop.categoryOptional") }}</option>
+        <option v-for="category in categories" :key="category.id" :value="category.id">
+          {{ localized(category.name, locale) }}
+        </option>
+      </select>
+    </div>
+    <div class="field">
+      <label for="product-images">{{ $t("product.images") }}</label>
+      <textarea id="product-images" v-model="images" rows="4" :placeholder="$t('shop.imagesHint')" />
+    </div>
+    <button class="btn primary" type="submit" :disabled="busy">
+      {{ busy ? $t("common.loading") : product ? $t("shop.updateProduct") : $t("shop.saveProduct") }}
+    </button>
+  </form>
+</template>
+
+<style scoped>
+.product-form {
+  max-width: 720px;
+  margin: 0;
+}
+.product-form textarea {
+  resize: vertical;
+}
+</style>
diff --git a/apps/shop-admin/composables/useMoney.ts b/apps/shop-admin/composables/useMoney.ts
new file mode 100644
index 0000000..85a0c85
--- /dev/null
+++ b/apps/shop-admin/composables/useMoney.ts
@@ -0,0 +1,25 @@
+import { formatMoney } from "@vmall/shared";
+import type { Currency } from "@vmall/shared";
+
+/** Currency-aware money formatter: exponents come from the API, cached app-wide. */
+export function useMoney() {
+  const { $api } = useNuxtApp();
+  const { locale } = useI18n();
+  const currencies = useState<Currency[]>("vmall.currencies", () => []);
+
+  async function load(): Promise<void> {
+    if (currencies.value.length > 0) return;
+    try {
+      currencies.value = await $api.listCurrencies();
+    } catch {
+      /* keep empty; fmt falls back to exponent 2 */
+    }
+  }
+
+  function fmt(amountMinor: number, currency: string): string {
+    const exponent = currencies.value.find((c) => c.code === currency)?.exponent ?? 2;
+    return formatMoney(amountMinor, currency, exponent, locale.value);
+  }
+
+  return { currencies, load, fmt };
+}
diff --git a/apps/shop-admin/i18n.config.ts b/apps/shop-admin/i18n.config.ts
index bcfb01f..af9fa0c 100644
--- a/apps/shop-admin/i18n.config.ts
+++ b/apps/shop-admin/i18n.config.ts
@@ -1,8 +1,24 @@
-import { en, zh } from "@vmall/shared/locales";
+import { en as enBase, zh as zhBase } from "@vmall/shared/locales";
+import { enExtra, zhExtra } from "./locales-extra";
+
+function deepMerge<T extends Record<string, unknown>>(base: T, extra: T): T {
+  const out: Record<string, unknown> = { ...base };
+  for (const [k, v] of Object.entries(extra)) {
+    const b = out[k];
+    out[k] =
+      b && v && typeof b === "object" && typeof v === "object"
+        ? deepMerge(b as Record<string, unknown>, v as Record<string, unknown>)
+        : v;
+  }
+  return out as T;
+}
 
 export default defineI18nConfig(() => ({
   legacy: false,
   locale: "en",
   fallbackLocale: "en",
-  messages: { en, zh },
+  messages: {
+    en: deepMerge(enBase, enExtra),
+    zh: deepMerge(zhBase, zhExtra),
+  },
 }));
diff --git a/apps/shop-admin/locales-extra.ts b/apps/shop-admin/locales-extra.ts
new file mode 100644
index 0000000..0d9f7aa
--- /dev/null
+++ b/apps/shop-admin/locales-extra.ts
@@ -0,0 +1,125 @@
+// App-local message extensions, deep-merged over @vmall/shared locales.
+// Add keys here (never edit the shared locale files from an app agent).
+export const enExtra = {
+  auth: {
+    shopRoleError: "This account is not authorized for the merchant console.",
+  },
+  shop: {
+    dashboardTitle: "Merchant dashboard",
+    profile: "Shop profile",
+    shopStatus: "Shop status",
+    slug: "Slug",
+    totalProducts: "Total products",
+    publishedProducts: "Published products",
+    pendingPaymentOrders: "Pending payment",
+    paidOrders: "Paid orders",
+    fulfillingOrders: "Fulfilling orders",
+    shippedOrders: "Shipped orders",
+    pendingInvoices: "Pending invoice requests",
+    productList: "Product catalog",
+    orderList: "Orders",
+    shipmentList: "Shipments",
+    invoiceList: "Invoices",
+    filterStatus: "Filter by status",
+    filterOrderStatus: "Filter by order status",
+    created: "Created",
+    skuCount: "SKUs",
+    noSkus: "No SKUs",
+    newProduct: "New product",
+    saveProduct: "Save product",
+    updateProduct: "Update product",
+    productSaved: "Product saved.",
+    slugInvalid: "Use lowercase letters, numbers, and dashes only.",
+    productNameRequired: "English product name is required.",
+    categoryOptional: "No category",
+    imagesHint: "One URL per line",
+    skuManager: "SKU manager",
+    skuPriceMajor: "Price (major units)",
+    stock: "Stock",
+    active: "Active",
+    skuSaved: "SKU saved.",
+    actions: "Actions",
+    edit: "Edit",
+    invoiceNo: "Invoice no.",
+    noInvoice: "—",
+    status: "Status",
+    orderNo: "Order no.",
+    items: "Items",
+    total: "Total",
+    details: "Details",
+    address: "Shipping address",
+    recipient: "Recipient",
+    phone: "Phone",
+    carrier: "Carrier",
+    trackingNo: "Tracking number",
+    shipmentQuantities: "Shipment quantities",
+    unshipped: "Unshipped",
+    createShipment: "Create shipment",
+    shipmentCreated: "Shipment created.",
+    issueInvoice: "Issue invoice",
+    taxNo: "Tax number",
+    kind: "Type",
+  },
+} as Record<string, unknown>;
+
+export const zhExtra = {
+  auth: {
+    shopRoleError: "此账号无权访问商家控制台。",
+  },
+  shop: {
+    dashboardTitle: "商家仪表盘",
+    profile: "店铺信息",
+    shopStatus: "店铺状态",
+    slug: "别名",
+    totalProducts: "商品总数",
+    publishedProducts: "已上架商品",
+    pendingPaymentOrders: "待支付订单",
+    paidOrders: "已支付订单",
+    fulfillingOrders: "履约中订单",
+    shippedOrders: "已发货订单",
+    pendingInvoices: "待处理发票申请",
+    productList: "商品目录",
+    orderList: "订单",
+    shipmentList: "发货单",
+    invoiceList: "发票",
+    filterStatus: "按状态筛选",
+    filterOrderStatus: "按订单状态筛选",
+    created: "创建时间",
+    skuCount: "SKU 数量",
+    noSkus: "暂无 SKU",
+    newProduct: "新建商品",
+    saveProduct: "保存商品",
+    updateProduct: "更新商品",
+    productSaved: "商品已保存。",
+    slugInvalid: "只能使用小写字母、数字和短横线。",
+    productNameRequired: "英文商品名称为必填项。",
+    categoryOptional: "无分类",
+    imagesHint: "每行一个链接",
+    skuManager: "SKU 管理",
+    skuPriceMajor: "价格（主单位）",
+    stock: "库存",
+    active: "启用",
+    skuSaved: "SKU 已保存。",
+    actions: "操作",
+    edit: "编辑",
+    addSku: "添加 SKU",
+    status: "状态",
+    invoiceNo: "发票号",
+    noInvoice: "—",
+    items: "商品数",
+    total: "合计",
+    details: "详情",
+    address: "收货地址",
+    recipient: "收货人",
+    phone: "电话",
+    carrier: "承运商",
+    trackingNo: "物流单号",
+    shipmentQuantities: "发货数量",
+    unshipped: "待发货",
+    createShipment: "创建发货单",
+    shipmentCreated: "发货单已创建。",
+    issueInvoice: "开具发票",
+    taxNo: "税号",
+    kind: "类型",
+  },
+} as Record<string, unknown>;
diff --git a/apps/shop-admin/middleware/auth.ts b/apps/shop-admin/middleware/auth.ts
new file mode 100644
index 0000000..beb05f5
--- /dev/null
+++ b/apps/shop-admin/middleware/auth.ts
@@ -0,0 +1,22 @@
+const allowedRoles: Record<string, true> = { shop_owner: true, shop_staff: true };
+
+function hasAllowedRole(value: unknown): boolean {
+  if (!value || typeof value !== "object" || !("role" in value)) return false;
+  const role = value.role;
+  return typeof role === "string" && allowedRoles[role] === true;
+}
+
+export default defineNuxtRouteMiddleware(() => {
+  if (import.meta.server) return;
+
+  const token = localStorage.getItem("vmall.token");
+  const rawUser = localStorage.getItem("vmall.user");
+  let user: unknown = null;
+  try {
+    user = rawUser ? JSON.parse(rawUser) : null;
+  } catch {
+    user = null;
+  }
+
+  if (!token || !hasAllowedRole(user)) return navigateTo("/login");
+});
diff --git a/apps/shop-admin/nuxt.config.ts b/apps/shop-admin/nuxt.config.ts
index e06f0ab..d96cbce 100644
--- a/apps/shop-admin/nuxt.config.ts
+++ b/apps/shop-admin/nuxt.config.ts
@@ -16,7 +16,8 @@ export default defineNuxtConfig({
       { code: "en", name: "English" },
       { code: "zh", name: "中文" },
     ],
-    vueI18n: "./i18n.config.ts",
+    vueI18n: "../i18n.config.ts",
+    bundle: { optimizeTranslationDirective: false },
   },
   compatibilityDate: "2025-01-01",
 });
diff --git a/apps/shop-admin/pages/index.vue b/apps/shop-admin/pages/index.vue
index d286cfd..3684d61 100644
--- a/apps/shop-admin/pages/index.vue
+++ b/apps/shop-admin/pages/index.vue
@@ -1,6 +1,127 @@
+<script setup lang="ts">
+import { t as localized } from "@vmall/shared";
+import type { OrderStatus, Shop } from "@vmall/shared";
+
+definePageMeta({ middleware: "auth" });
+
+const { $api } = useNuxtApp();
+const { locale, t: translate } = useI18n();
+const loading = ref(true);
+const error = ref("");
+const shop = ref<Shop | null>(null);
+const totalProducts = ref(0);
+const publishedProducts = ref(0);
+const orderCounts = ref<Record<OrderStatus, number>>({
+  pending_payment: 0,
+  paid: 0,
+  fulfilling: 0,
+  shipped: 0,
+  completed: 0,
+  cancelled: 0,
+});
+const pendingInvoices = ref(0);
+const orderStatuses: OrderStatus[] = ["pending_payment", "paid", "fulfilling", "shipped"];
+
+async function loadDashboard(): Promise<void> {
+  loading.value = true;
+  error.value = "";
+  try {
+    const [products, published, shopData, invoices, ...orders] = await Promise.all([
+      $api.shop.listMyProducts({ per_page: 100 }),
+      $api.shop.listMyProducts({ per_page: 100, status: "published" }),
+      $api.shop.getMyShop(),
+      $api.shop.listInvoices(),
+      ...orderStatuses.map((status) => $api.shop.listOrders({ status, per_page: 100 })),
+    ]);
+    totalProducts.value = products.total;
+    publishedProducts.value = published.total;
+    shop.value = shopData;
+    pendingInvoices.value = invoices.filter((invoice) => invoice.status === "requested").length;
+    orderStatuses.forEach((status, index) => {
+      orderCounts.value[status] = orders[index]?.total ?? 0;
+    });
+  } catch (err: unknown) {
+    error.value = err instanceof Error ? err.message : translate("common.error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(loadDashboard);
+
+const stats = computed(() => [
+  { key: "totalProducts", label: "shop.totalProducts", value: totalProducts.value },
+  { key: "publishedProducts", label: "shop.publishedProducts", value: publishedProducts.value },
+  { key: "pendingPayment", label: "shop.pendingPaymentOrders", value: orderCounts.value.pending_payment },
+  { key: "paid", label: "shop.paidOrders", value: orderCounts.value.paid },
+  { key: "fulfilling", label: "shop.fulfillingOrders", value: orderCounts.value.fulfilling },
+  { key: "shipped", label: "shop.shippedOrders", value: orderCounts.value.shipped },
+  { key: "invoices", label: "shop.pendingInvoices", value: pendingInvoices.value },
+]);
+</script>
+
 <template>
-  <div>
-    <h1 class="page-title">{{ $t("common.appName") }}</h1>
-    <p class="muted">{{ $t("common.loading") }}</p>
+  <div class="page">
+    <div class="page-head">
+      <h1 class="page-title">{{ $t("shop.dashboardTitle") }}</h1>
+      <button class="btn sm" :disabled="loading" @click="loadDashboard">{{ $t("common.search") }}</button>
+    </div>
+    <div v-if="error" class="error-text" role="alert">{{ error }}</div>
+    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+    <template v-else>
+      <div class="stats-grid">
+        <div v-for="stat in stats" :key="stat.key" class="card stat-card">
+          <span class="muted">{{ $t(stat.label) }}</span>
+          <strong>{{ stat.value }}</strong>
+        </div>
+      </div>
+      <section v-if="shop" class="card shop-profile mt">
+        <h2>{{ $t("shop.profile") }}</h2>
+        <div class="profile-grid">
+          <div>
+            <span class="muted">{{ $t("product.shop") }}</span>
+            <strong>{{ localized(shop.name, locale) }}</strong>
+          </div>
+          <div>
+            <span class="muted">{{ $t("shop.slug") }}</span>
+            <strong>{{ shop.slug }}</strong>
+          </div>
+          <div>
+            <span class="muted">{{ $t("shop.shopStatus") }}</span>
+            <span class="badge" :class="shop.status === 'active' ? 'green' : 'red'">
+              {{ $t(`admin.${shop.status}`) }}
+            </span>
+          </div>
+        </div>
+      </section>
+    </template>
   </div>
 </template>
+
+<style scoped>
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+  gap: 16px;
+}
+.stat-card {
+  display: grid;
+  gap: 8px;
+}
+.stat-card strong {
+  font-size: 28px;
+}
+.shop-profile h2 {
+  margin: 0 0 16px;
+  font-size: 18px;
+}
+.profile-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 16px;
+}
+.profile-grid > div {
+  display: grid;
+  gap: 6px;
+}
+</style>
diff --git a/apps/shop-admin/pages/invoices.vue b/apps/shop-admin/pages/invoices.vue
new file mode 100644
index 0000000..c9de4b3
--- /dev/null
+++ b/apps/shop-admin/pages/invoices.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+
+import type { Invoice } from "@vmall/shared";
+
+definePageMeta({ middleware: "auth" });
+
+const { $api } = useNuxtApp();
+const { locale, t: translate } = useI18n();
+const { load: loadMoney, fmt } = useMoney();
+const invoices = ref<Invoice[]>([]);
+const loading = ref(true);
+const error = ref("");
+const actionId = ref("");
+
+function statusClass(value: Invoice["status"]): string {
+  return value === "issued" ? "green" : value === "cancelled" ? "red" : "orange";
+}
+
+async function loadInvoices(): Promise<void> {
+  loading.value = true;
+  error.value = "";
+  try {
+    invoices.value = await $api.shop.listInvoices();
+  } catch (err: unknown) {
+    error.value = err instanceof Error ? err.message : translate("common.error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function issueInvoice(invoice: Invoice): Promise<void> {
+  actionId.value = invoice.id;
+  error.value = "";
+  try {
+    await $api.shop.issueInvoice(invoice.id);
+    await loadInvoices();
+  } catch (err: unknown) {
+    error.value = err instanceof Error ? err.message : translate("common.error");
+  } finally {
+    actionId.value = "";
+  }
+}
+
+onMounted(() => {
+  loadMoney();
+  loadInvoices();
+});
+</script>
+
+<template>
+  <div class="page">
+    <h1 class="page-title">{{ $t("shop.invoiceList") }}</h1>
+    <div v-if="error" class="error-text" role="alert">{{ error }}</div>
+    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+    <div v-else-if="!invoices.length" class="card muted">{{ $t("common.empty") }}</div>
+    <div v-else class="table-wrap">
+      <table class="table">
+        <thead>
+          <tr>
+            <th>{{ $t("shop.invoiceNo") }}</th>
+            <th>{{ $t("shop.orderNo") }}</th>
+            <th>{{ $t("invoice.invoiceTitle") }}</th>
+            <th>{{ $t("shop.kind") }}</th>
+            <th>{{ $t("shop.taxNo") }}</th>
+            <th>{{ $t("invoice.amount") }}</th>
+            <th>{{ $t("common.status") }}</th>
+            <th>{{ $t("common.actions") }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="invoice in invoices" :key="invoice.id">
+            <td>{{ invoice.invoice_no || $t("shop.noInvoice") }}</td>
+            <td><NuxtLink :to="`/orders/${invoice.order_id}`">{{ invoice.order_no ?? invoice.order_id }}</NuxtLink></td>
+            <td>{{ invoice.title }}</td>
+            <td>{{ $t(`invoice.${invoice.kind}`) }}</td>
+            <td>{{ invoice.tax_no || $t("shop.noInvoice") }}</td>
+            <td>{{ fmt(invoice.amount_minor, invoice.currency) }}</td>
+            <td><span class="badge" :class="statusClass(invoice.status)">{{ $t(`invoice.status.${invoice.status}`) }}</span></td>
+            <td><button v-if="invoice.status === 'requested'" class="btn sm primary" :disabled="actionId === invoice.id" @click="issueInvoice(invoice)">{{ $t("shop.issueInvoice") }}</button></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.table-wrap {
+  overflow-x: auto;
+}
+</style>
diff --git a/apps/shop-admin/pages/login.vue b/apps/shop-admin/pages/login.vue
new file mode 100644
index 0000000..d0ec4f1
--- /dev/null
+++ b/apps/shop-admin/pages/login.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const { $api } = useNuxtApp();
+const session = useSessionStore();
+const { t: translate } = useI18n();
+const email = ref("");
+const password = ref("");
+const error = ref("");
+const busy = ref(false);
+
+async function submit(): Promise<void> {
+  error.value = "";
+  busy.value = true;
+  try {
+    const auth = await $api.login(email.value.trim(), password.value);
+    if (auth.user.role !== "shop_owner" && auth.user.role !== "shop_staff") {
+      error.value = translate("auth.shopRoleError");
+      return;
+    }
+    session.setAuth(auth);
+    await navigateTo("/");
+  } catch (err: unknown) {
+    error.value = err instanceof Error ? err.message : translate("common.error");
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+
+<template>
+  <main class="page">
+    <form class="card form-narrow" @submit.prevent="submit">
+      <h1 class="page-title">{{ $t("auth.welcome") }}</h1>
+      <div v-if="error" class="error-text" role="alert">{{ error }}</div>
+      <div class="field">
+        <label for="email">{{ $t("common.email") }}</label>
+        <input id="email" v-model="email" type="email" autocomplete="username" required />
+      </div>
+      <div class="field">
+        <label for="password">{{ $t("common.password") }}</label>
+        <input id="password" v-model="password" type="password" autocomplete="current-password" required />
+      </div>
+      <button class="btn primary" type="submit" :disabled="busy">
+        {{ busy ? $t("common.loading") : $t("common.login") }}
+      </button>
+    </form>
+  </main>
+</template>
diff --git a/apps/shop-admin/pages/orders/[id].vue b/apps/shop-admin/pages/orders/[id].vue
new file mode 100644
index 0000000..da6b8b1
--- /dev/null
+++ b/apps/shop-admin/pages/orders/[id].vue
@@ -0,0 +1,245 @@
+<script setup lang="ts">
+import { t as localized } from "@vmall/shared";
+import type { Order, OrderStatus, Shipment, ShipmentItemBody } from "@vmall/shared";
+
+definePageMeta({ middleware: "auth" });
+
+const { $api } = useNuxtApp();
+const { locale, t: translate } = useI18n();
+const { load: loadMoney, fmt } = useMoney();
+const route = useRoute();
+const orderId = computed(() => String(route.params.id));
+const order = ref<Order | null>(null);
+const shipments = ref<Shipment[]>([]);
+const quantities = ref<Record<string, number>>({});
+const carrier = ref("");
+const trackingNo = ref("");
+const loading = ref(true);
+const busy = ref(false);
+const actionId = ref("");
+const error = ref("");
+
+function statusClass(value: OrderStatus): string {
+  if (value === "completed") return "green";
+  if (value === "cancelled") return "red";
+  if (value === "pending_payment") return "orange";
+  return "blue";
+}
+
+function shipmentStatusClass(value: Shipment["status"]): string {
+  return value === "delivered" ? "green" : value === "shipped" ? "blue" : "orange";
+}
+
+function formatDate(value: string): string {
+  return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
+}
+
+function shippedQuantity(itemId: string): number {
+  return shipments.value
+    .filter((shipment) => shipment.order_id === orderId.value)
+    .flatMap((shipment) => shipment.items)
+    .filter((item) => item.order_item_id === itemId)
+    .reduce((total, item) => total + item.qty, 0);
+}
+
+function unshippedQuantity(itemId: string, total: number): number {
+  return Math.max(0, total - shippedQuantity(itemId));
+}
+
+async function findShopOrder(): Promise<Order> {
+  let currentPage = 1;
+  let totalPages = 1;
+  while (currentPage <= totalPages) {
+    const result = await $api.shop.listOrders({ page: currentPage });
+    const found = result.items.find((item) => item.id === orderId.value);
+    if (found) return found;
+    totalPages = Math.max(1, Math.ceil(result.total / result.per_page));
+    currentPage += 1;
+  }
+  throw new Error(translate("common.empty"));
+}
+
+async function loadOrder(): Promise<void> {
+  loading.value = true;
+  error.value = "";
+  try {
+    const [loadedOrder, loadedShipments] = await Promise.all([
+      findShopOrder(),
+      $api.shop.listShipments(),
+    ]);
+    order.value = loadedOrder;
+    shipments.value = loadedShipments.filter((shipment) => shipment.order_id === orderId.value);
+    const nextQuantities: Record<string, number> = {};
+    loadedOrder.items.forEach((item) => {
+      nextQuantities[item.id] = Math.max(
+        0,
+        item.qty - loadedShipments
+          .filter((shipment) => shipment.order_id === orderId.value)
+          .flatMap((shipment) => shipment.items)
+          .filter((shipmentItem) => shipmentItem.order_item_id === item.id)
+          .reduce((total, shipmentItem) => total + shipmentItem.qty, 0),
+      );
+    });
+    quantities.value = nextQuantities;
+  } catch (err: unknown) {
+    error.value = err instanceof Error ? err.message : translate("common.error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function createShipment(): Promise<void> {
+  if (!order.value || !carrier.value.trim() || !trackingNo.value.trim()) {
+    error.value = translate("common.required");
+    return;
+  }
+  const items: ShipmentItemBody[] = order.value.items
+    .map((item) => ({ order_item_id: item.id, qty: quantities.value[item.id] ?? 0 }))
+    .filter((item) => item.qty > 0);
+  if (!items.length) {
+    error.value = translate("common.required");
+    return;
+  }
+  busy.value = true;
+  error.value = "";
+  try {
+    await $api.shop.createShipment(order.value.id, carrier.value.trim(), trackingNo.value.trim(), items);
+    carrier.value = "";
+    trackingNo.value = "";
+    await loadOrder();
+  } catch (err: unknown) {
+    error.value = err instanceof Error ? err.message : translate("common.error");
+  } finally {
+    busy.value = false;
+  }
+}
+
+async function markShipped(shipment: Shipment): Promise<void> {
+  actionId.value = shipment.id;
+  error.value = "";
+  try {
+    await $api.shop.markShipped(shipment.id);
+    await loadOrder();
+  } catch (err: unknown) {
+    error.value = err instanceof Error ? err.message : translate("common.error");
+  } finally {
+    actionId.value = "";
+  }
+}
+
+onMounted(() => {
+  loadMoney();
+  loadOrder();
+});
+</script>
+
+<template>
+  <div class="page">
+    <div class="page-head">
+      <h1 class="page-title">{{ order ? order.order_no : $t("order.title") }}</h1>
+      <NuxtLink class="btn" to="/orders">{{ $t("common.back") }}</NuxtLink>
+    </div>
+    <div v-if="error" class="error-text" role="alert">{{ error }}</div>
+    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+    <template v-else-if="order">
+      <section class="card">
+        <div class="row between detail-heading">
+          <h2>{{ $t("shop.details") }}</h2>
+          <span class="badge" :class="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</span>
+        </div>
+        <div class="order-meta">
+          <div><span class="muted">{{ $t("shop.created") }}</span><strong>{{ formatDate(order.created_at) }}</strong></div>
+          <div><span class="muted">{{ $t("shop.total") }}</span><strong>{{ fmt(order.total_minor, order.currency) }}</strong></div>
+        </div>
+        <h3>{{ $t("shop.items") }}</h3>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th>{{ $t("product.detail") }}</th><th>{{ $t("product.skuCode") }}</th><th>{{ $t("common.qty") }}</th><th>{{ $t("common.price") }}</th></tr></thead>
+            <tbody>
+              <tr v-for="item in order.items" :key="item.id">
+                <td>{{ localized(item.product_name, locale) }}</td>
+                <td>{{ item.sku_code }}</td>
+                <td>{{ item.qty }}</td>
+                <td>{{ fmt(item.unit_price_minor, order.currency) }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <h3>{{ $t("shop.address") }}</h3>
+        <address class="address">
+          <div>{{ order.shipping_address.recipient }} · {{ order.shipping_address.phone }}</div>
+          <div>{{ order.shipping_address.country }}, {{ order.shipping_address.region }}, {{ order.shipping_address.city }}</div>
+          <div>{{ order.shipping_address.line1 }}, {{ order.shipping_address.postal_code }}</div>
+        </address>
+      </section>
+
+      <section v-if="order.status === 'paid' || order.status === 'fulfilling'" class="card mt">
+        <h2>{{ $t("shop.createShipment") }}</h2>
+        <form @submit.prevent="createShipment">
+          <div class="field-row">
+            <div class="field"><label for="carrier">{{ $t("shop.carrier") }}</label><input id="carrier" v-model="carrier" required /></div>
+            <div class="field"><label for="tracking-no">{{ $t("shop.trackingNo") }}</label><input id="tracking-no" v-model="trackingNo" required /></div>
+          </div>
+          <h3>{{ $t("shop.shipmentQuantities") }}</h3>
+          <div v-for="item in order.items" :key="`quantity-${item.id}`" class="field-row quantity-row">
+            <div class="quantity-name">{{ localized(item.product_name, locale) }} ({{ item.sku_code }})</div>
+            <div class="field"><label :for="`quantity-${item.id}`">{{ $t("shop.unshipped") }}: {{ unshippedQuantity(item.id, item.qty) }}</label><input :id="`quantity-${item.id}`" v-model.number="quantities[item.id]" type="number" min="0" :max="unshippedQuantity(item.id, item.qty)" step="1" /></div>
+          </div>
+          <button class="btn primary" type="submit" :disabled="busy">{{ $t("shop.createShipment") }}</button>
+        </form>
+      </section>
+
+      <section class="card mt">
+        <h2>{{ $t("shipment.title") }}</h2>
+        <div v-if="!shipments.length" class="muted">{{ $t("common.empty") }}</div>
+        <div v-else class="table-wrap">
+          <table class="table">
+            <thead><tr><th>{{ $t("shipment.shipmentNo") }}</th><th>{{ $t("shop.carrier") }}</th><th>{{ $t("shop.trackingNo") }}</th><th>{{ $t("common.status") }}</th><th>{{ $t("common.actions") }}</th></tr></thead>
+            <tbody>
+              <tr v-for="shipment in shipments" :key="shipment.id">
+                <td>{{ shipment.shipment_no }}</td><td>{{ shipment.carrier }}</td><td>{{ shipment.tracking_no }}</td>
+                <td><span class="badge" :class="shipmentStatusClass(shipment.status)">{{ $t(`shipment.status.${shipment.status}`) }}</span></td>
+                <td><button v-if="shipment.status === 'pending'" class="btn sm" :disabled="actionId === shipment.id" @click="markShipped(shipment)">{{ $t("shipment.markShipped") }}</button></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </template>
+  </div>
+</template>
+
+
+<style scoped>
+.detail-heading h2,
+.card h3 {
+  margin-top: 0;
+}
+.order-meta {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 16px;
+  margin-bottom: 20px;
+}
+.order-meta > div {
+  display: grid;
+  gap: 6px;
+}
+.address {
+  font-style: normal;
+  line-height: 1.7;
+}
+.table-wrap {
+  overflow-x: auto;
+}
+.quantity-row {
+  align-items: end;
+}
+.quantity-name {
+  flex: 2;
+  padding-bottom: 14px;
+}
+.quantity-row .field {
+  flex: 1;
+}
+</style>
diff --git a/apps/shop-admin/pages/orders/index.vue b/apps/shop-admin/pages/orders/index.vue
new file mode 100644
index 0000000..4f21a59
--- /dev/null
+++ b/apps/shop-admin/pages/orders/index.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+
+import type { Order, OrderStatus, Paged } from "@vmall/shared";
+
+definePageMeta({ middleware: "auth" });
+
+const { $api } = useNuxtApp();
+const { locale, t: translate } = useI18n();
+const { load: loadMoney, fmt } = useMoney();
+const orders = ref<Paged<Order> | null>(null);
+const page = ref(1);
+const status = ref<"" | OrderStatus>("");
+const loading = ref(true);
+const error = ref("");
+
+function statusClass(value: OrderStatus): string {
+  if (value === "completed") return "green";
+  if (value === "cancelled") return "red";
+  if (value === "pending_payment") return "orange";
+  return "blue";
+}
+
+function formatDate(value: string): string {
+  return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
+}
+
+async function loadOrders(): Promise<void> {
+  loading.value = true;
+  error.value = "";
+  try {
+    orders.value = await $api.shop.listOrders({ page: page.value, status: status.value || undefined });
+  } catch (err: unknown) {
+    error.value = err instanceof Error ? err.message : translate("common.error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function filterChanged(): Promise<void> {
+  page.value = 1;
+  await loadOrders();
+}
+
+async function changePage(nextPage: number): Promise<void> {
+  if (!orders.value || nextPage < 1 || nextPage > Math.ceil(orders.value.total / orders.value.per_page)) return;
+  page.value = nextPage;
+  await loadOrders();
+}
+
+onMounted(() => {
+  loadMoney();
+  loadOrders();
+});
+</script>
+
+<template>
+  <div class="page">
+    <div class="page-head"><h1 class="page-title">{{ $t("shop.orderList") }}</h1></div>
+    <div class="row mb">
+      <label for="order-status">{{ $t("shop.filterOrderStatus") }}</label>
+      <select id="order-status" v-model="status" @change="filterChanged">
+        <option value="">{{ $t("common.all") }}</option>
+        <option value="pending_payment">{{ $t("order.status.pending_payment") }}</option>
+        <option value="paid">{{ $t("order.status.paid") }}</option>
+        <option value="fulfilling">{{ $t("order.status.fulfilling") }}</option>
+        <option value="shipped">{{ $t("order.status.shipped") }}</option>
+        <option value="completed">{{ $t("order.status.completed") }}</option>
+        <option value="cancelled">{{ $t("order.status.cancelled") }}</option>
+      </select>
+    </div>
+    <div v-if="error" class="error-text" role="alert">{{ error }}</div>
+    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+    <div v-else-if="!orders?.items.length" class="card muted">{{ $t("common.empty") }}</div>
+    <template v-else>
+      <div class="table-wrap">
+        <table class="table">
+          <thead>
+            <tr>
+              <th>{{ $t("shop.orderNo") }}</th>
+              <th>{{ $t("shop.created") }}</th>
+              <th>{{ $t("shop.items") }}</th>
+              <th>{{ $t("shop.total") }}</th>
+              <th>{{ $t("common.status") }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="order in orders.items" :key="order.id">
+              <td><NuxtLink :to="`/orders/${order.id}`">{{ order.order_no }}</NuxtLink></td>
+              <td>{{ formatDate(order.created_at) }}</td>
+              <td>{{ order.items.length }}</td>
+              <td>{{ fmt(order.total_minor, order.currency) }}</td>
+              <td><span class="badge" :class="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</span></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div v-if="orders.total > orders.per_page" class="row between mt">
+        <button class="btn sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{ $t("common.prev") }}</button>
+        <span class="muted">{{ $t("common.page") }} {{ page }} / {{ Math.ceil(orders.total / orders.per_page) }}</span>
+        <button class="btn sm" :disabled="page >= Math.ceil(orders.total / orders.per_page) || loading" @click="changePage(page + 1)">{{ $t("common.next") }}</button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.table-wrap {
+  overflow-x: auto;
+}
+</style>
diff --git a/apps/shop-admin/pages/products/[id].vue b/apps/shop-admin/pages/products/[id].vue
new file mode 100644
index 0000000..3df4d69
--- /dev/null
+++ b/apps/shop-admin/pages/products/[id].vue
@@ -0,0 +1,199 @@
+<script setup lang="ts">
+
+import type { Category, Product, ProductUpsertBody, Sku, SkuUpsertBody } from "@vmall/shared";
+
+definePageMeta({ middleware: "auth" });
+
+const { $api } = useNuxtApp();
+const { locale, t: translate } = useI18n();
+const { load: loadMoney, fmt } = useMoney();
+const route = useRoute();
+const productId = computed(() => String(route.params.id));
+const product = ref<Product | null>(null);
+const categories = ref<Category[]>([]);
+const loading = ref(true);
+const busy = ref(false);
+const skuBusy = ref(false);
+const error = ref("");
+const skuCode = ref("");
+const skuPrice = ref("");
+const skuCurrency = ref("USD");
+const skuStock = ref("0");
+const skuActive = ref(true);
+
+function formatDate(value: string): string {
+  return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
+}
+
+function formatSkuPrice(sku: Sku): string {
+  return fmt(sku.price_minor, sku.currency);
+}
+
+function majorToMinor(value: string): number | null {
+  const clean = value.trim();
+  if (!/^\d+(?:\.\d{1,2})?$/.test(clean)) return null;
+  const [whole, fraction = ""] = clean.split(".");
+  const minor = Number(whole) * 100 + Number(fraction.padEnd(2, "0"));
+  return Number.isSafeInteger(minor) ? minor : null;
+}
+
+async function loadProduct(): Promise<void> {
+  loading.value = true;
+  error.value = "";
+  try {
+    const [loadedProduct, loadedCategories] = await Promise.all([
+      $api.shop.getProduct(productId.value),
+      $api.listCategories(),
+    ]);
+    product.value = loadedProduct;
+    categories.value = loadedCategories;
+  } catch (err: unknown) {
+    error.value = err instanceof Error ? err.message : translate("common.error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function updateProduct(body: ProductUpsertBody): Promise<void> {
+  busy.value = true;
+  error.value = "";
+  try {
+    await $api.shop.updateProduct(productId.value, body);
+    product.value = await $api.shop.getProduct(productId.value);
+  } catch (err: unknown) {
+    error.value = err instanceof Error ? err.message : translate("common.error");
+  } finally {
+    busy.value = false;
+  }
+}
+
+async function saveSku(): Promise<void> {
+  const priceMinor = majorToMinor(skuPrice.value);
+  const stock = Number(skuStock.value);
+  if (!skuCode.value.trim() || priceMinor === null || !Number.isInteger(stock) || stock < 0) {
+    error.value = translate("common.required");
+    return;
+  }
+  skuBusy.value = true;
+  error.value = "";
+  const body: SkuUpsertBody = {
+    sku_code: skuCode.value.trim(),
+    price_minor: priceMinor,
+    currency: skuCurrency.value,
+    stock,
+    active: skuActive.value,
+  };
+  try {
+    await $api.shop.upsertSku(productId.value, body);
+    product.value = await $api.shop.getProduct(productId.value);
+    skuCode.value = "";
+    skuPrice.value = "";
+    skuCurrency.value = "USD";
+    skuStock.value = "0";
+    skuActive.value = true;
+  } catch (err: unknown) {
+    error.value = err instanceof Error ? err.message : translate("common.error");
+  } finally {
+    skuBusy.value = false;
+  }
+}
+
+onMounted(() => {
+  loadMoney();
+  loadProduct();
+});
+</script>
+
+<template>
+  <div class="page">
+    <div class="page-head">
+      <h1 class="page-title">{{ $t("product.editProduct") }}</h1>
+      <NuxtLink class="btn" to="/products">{{ $t("common.back") }}</NuxtLink>
+    </div>
+    <div v-if="error" class="error-text" role="alert">{{ error }}</div>
+    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+    <template v-else-if="product">
+      <ProductForm :product="product" :categories="categories" :busy="busy" @submit="updateProduct" />
+      <section class="card mt sku-section">
+        <h2>{{ $t("shop.skuManager") }}</h2>
+        <div v-if="!product.skus?.length" class="muted mb">{{ $t("shop.noSkus") }}</div>
+        <div v-else class="table-wrap">
+          <table class="table">
+            <thead>
+              <tr>
+                <th>{{ $t("product.skuCode") }}</th>
+                <th>{{ $t("common.price") }}</th>
+                <th>{{ $t("common.currency") }}</th>
+                <th>{{ $t("shop.stock") }}</th>
+                <th>{{ $t("shop.active") }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="sku in product.skus" :key="sku.id">
+                <td>{{ sku.sku_code }}</td>
+                <td>{{ formatSkuPrice(sku) }}</td>
+                <td>{{ sku.currency }}</td>
+                <td>{{ sku.stock }}</td>
+                <td><span class="badge" :class="sku.active ? 'green' : 'red'">{{ sku.active ? $t("common.yes") : $t("common.no") }}</span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <form class="sku-form mt" @submit.prevent="saveSku">
+          <h3>{{ $t("shop.addSku") }}</h3>
+          <div class="field-row">
+            <div class="field">
+              <label for="sku-code">{{ $t("product.skuCode") }}</label>
+              <input id="sku-code" v-model="skuCode" required />
+            </div>
+            <div class="field">
+              <label for="sku-price">{{ $t("shop.skuPriceMajor") }}</label>
+              <input id="sku-price" v-model="skuPrice" inputmode="decimal" required />
+            </div>
+          </div>
+          <div class="field-row">
+            <div class="field">
+              <label for="sku-currency">{{ $t("common.currency") }}</label>
+              <select id="sku-currency" v-model="skuCurrency">
+                <option value="USD">USD</option>
+                <option value="CNY">CNY</option>
+                <option value="EUR">EUR</option>
+              </select>
+            </div>
+            <div class="field">
+              <label for="sku-stock">{{ $t("shop.stock") }}</label>
+              <input id="sku-stock" v-model="skuStock" type="number" min="0" step="1" required />
+            </div>
+          </div>
+          <label class="checkbox-field"><input v-model="skuActive" type="checkbox" /> {{ $t("shop.active") }}</label>
+          <button class="btn primary" type="submit" :disabled="skuBusy">{{ $t("shop.addSku") }}</button>
+        </form>
+      </section>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.sku-section {
+  max-width: 960px;
+}
+.sku-section h2,
+.sku-form h3 {
+  margin-top: 0;
+}
+.table-wrap {
+  overflow-x: auto;
+}
+.sku-form {
+  max-width: 720px;
+}
+.checkbox-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+.checkbox-field input {
+  width: auto;
+}
+</style>
diff --git a/apps/shop-admin/pages/products/index.vue b/apps/shop-admin/pages/products/index.vue
new file mode 100644
index 0000000..841cb3f
--- /dev/null
+++ b/apps/shop-admin/pages/products/index.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { t as localized } from "@vmall/shared";
+import type { Paged, Product, ProductStatus } from "@vmall/shared";
+
+definePageMeta({ middleware: "auth" });
+
+const { $api } = useNuxtApp();
+const { locale, t: translate } = useI18n();
+const products = ref<Paged<Product> | null>(null);
+const page = ref(1);
+const status = ref<"" | ProductStatus>("");
+const loading = ref(true);
+const error = ref("");
+const actionId = ref("");
+
+function statusClass(value: ProductStatus): string {
+  return value === "published" ? "green" : value === "unpublished" ? "orange" : "blue";
+}
+
+function formatDate(value: string): string {
+  return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
+}
+
+async function loadProducts(): Promise<void> {
+  loading.value = true;
+  error.value = "";
+  try {
+    products.value = await $api.shop.listMyProducts({ page: page.value, status: status.value || undefined });
+  } catch (err: unknown) {
+    error.value = err instanceof Error ? err.message : translate("common.error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function filterChanged(): Promise<void> {
+  page.value = 1;
+  await loadProducts();
+}
+
+async function togglePublished(product: Product): Promise<void> {
+  actionId.value = product.id;
+  error.value = "";
+  try {
+    if (product.status === "published") await $api.shop.unpublish(product.id);
+    else await $api.shop.publish(product.id);
+    await loadProducts();
+  } catch (err: unknown) {
+    error.value = err instanceof Error ? err.message : translate("common.error");
+  } finally {
+    actionId.value = "";
+  }
+}
+
+async function changePage(nextPage: number): Promise<void> {
+  if (!products.value || nextPage < 1 || nextPage > Math.ceil(products.value.total / products.value.per_page)) return;
+  page.value = nextPage;
+  await loadProducts();
+}
+
+onMounted(loadProducts);
+</script>
+
+<template>
+  <div class="page">
+    <div class="page-head">
+      <h1 class="page-title">{{ $t("shop.productList") }}</h1>
+      <NuxtLink class="btn primary" to="/products/new">{{ $t("shop.newProduct") }}</NuxtLink>
+    </div>
+    <div class="row mb">
+      <label for="product-status">{{ $t("shop.filterStatus") }}</label>
+      <select id="product-status" v-model="status" @change="filterChanged">
+        <option value="">{{ $t("common.all") }}</option>
+        <option value="draft">{{ $t("product.draft") }}</option>
+        <option value="published">{{ $t("product.published") }}</option>
+        <option value="unpublished">{{ $t("product.unpublished") }}</option>
+      </select>
+    </div>
+    <div v-if="error" class="error-text" role="alert">{{ error }}</div>
+    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+    <div v-else-if="!products?.items.length" class="card muted">{{ $t("common.empty") }}</div>
+    <template v-else>
+      <div class="table-wrap">
+        <table class="table">
+          <thead>
+            <tr>
+              <th>{{ $t("product.detail") }}</th>
+              <th>{{ $t("product.slug") }}</th>
+              <th>{{ $t("shop.skuCount") }}</th>
+              <th>{{ $t("common.status") }}</th>
+              <th>{{ $t("shop.created") }}</th>
+              <th>{{ $t("common.actions") }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="product in products.items" :key="product.id">
+              <td>{{ localized(product.name, locale) }}</td>
+              <td>{{ product.slug }}</td>
+              <td>{{ product.skus?.length ?? 0 }}</td>
+              <td><span class="badge" :class="statusClass(product.status)">{{ $t(`product.${product.status}`) }}</span></td>
+              <td>{{ formatDate(product.created_at) }}</td>
+              <td class="row actions-cell">
+                <NuxtLink class="btn sm" :to="`/products/${product.id}`">{{ $t("shop.edit") }}</NuxtLink>
+                <button
+                  v-if="product.status === 'published'"
+                  class="btn sm"
+                  :disabled="actionId === product.id"
+                  @click="togglePublished(product)"
+                >{{ $t("product.unpublish") }}</button>
+                <button
+                  v-else
+                  class="btn sm primary"
+                  :disabled="actionId === product.id"
+                  @click="togglePublished(product)"
+                >{{ $t("product.publish") }}</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div v-if="products.total > products.per_page" class="row between mt">
+        <button class="btn sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{ $t("common.prev") }}</button>
+        <span class="muted">{{ $t("common.page") }} {{ page }} / {{ Math.ceil(products.total / products.per_page) }}</span>
+        <button class="btn sm" :disabled="page >= Math.ceil(products.total / products.per_page) || loading" @click="changePage(page + 1)">{{ $t("common.next") }}</button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.table-wrap {
+  overflow-x: auto;
+}
+.actions-cell {
+  flex-wrap: wrap;
+}
+</style>
diff --git a/apps/shop-admin/pages/products/new.vue b/apps/shop-admin/pages/products/new.vue
new file mode 100644
index 0000000..34aaf7b
--- /dev/null
+++ b/apps/shop-admin/pages/products/new.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { Category, ProductUpsertBody } from "@vmall/shared";
+
+definePageMeta({ middleware: "auth" });
+
+const { $api } = useNuxtApp();
+const { t: translate } = useI18n();
+const categories = ref<Category[]>([]);
+const loading = ref(true);
+const busy = ref(false);
+const error = ref("");
+
+async function loadCategories(): Promise<void> {
+  try {
+    categories.value = await $api.listCategories();
+  } catch (err: unknown) {
+    error.value = err instanceof Error ? err.message : translate("common.error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function saveProduct(body: ProductUpsertBody): Promise<void> {
+  busy.value = true;
+  error.value = "";
+  try {
+    const product = await $api.shop.createProduct(body);
+    await navigateTo(`/products/${product.id}`);
+  } catch (err: unknown) {
+    error.value = err instanceof Error ? err.message : translate("common.error");
+  } finally {
+    busy.value = false;
+  }
+}
+
+onMounted(loadCategories);
+</script>
+
+<template>
+  <div class="page">
+    <div class="page-head">
+      <h1 class="page-title">{{ $t("product.newProduct") }}</h1>
+      <NuxtLink class="btn" to="/products">{{ $t("common.back") }}</NuxtLink>
+    </div>
+    <div v-if="error" class="error-text" role="alert">{{ error }}</div>
+    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+    <ProductForm v-else :categories="categories" :busy="busy" @submit="saveProduct" />
+  </div>
+</template>
diff --git a/apps/shop-admin/pages/shipments.vue b/apps/shop-admin/pages/shipments.vue
new file mode 100644
index 0000000..410f0d7
--- /dev/null
+++ b/apps/shop-admin/pages/shipments.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { Shipment } from "@vmall/shared";
+
+definePageMeta({ middleware: "auth" });
+
+const { $api } = useNuxtApp();
+const { locale, t: translate } = useI18n();
+const shipments = ref<Shipment[]>([]);
+const loading = ref(true);
+const error = ref("");
+const actionId = ref("");
+
+function statusClass(value: Shipment["status"]): string {
+  return value === "delivered" ? "green" : value === "shipped" ? "blue" : "orange";
+}
+
+function formatDate(value: string): string {
+  return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
+}
+
+async function loadShipments(): Promise<void> {
+  loading.value = true;
+  error.value = "";
+  try {
+    shipments.value = await $api.shop.listShipments();
+  } catch (err: unknown) {
+    error.value = err instanceof Error ? err.message : translate("common.error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function markShipped(shipment: Shipment): Promise<void> {
+  actionId.value = shipment.id;
+  error.value = "";
+  try {
+    await $api.shop.markShipped(shipment.id);
+    await loadShipments();
+  } catch (err: unknown) {
+    error.value = err instanceof Error ? err.message : translate("common.error");
+  } finally {
+    actionId.value = "";
+  }
+}
+
+onMounted(loadShipments);
+</script>
+
+<template>
+  <div class="page">
+    <h1 class="page-title">{{ $t("shop.shipmentList") }}</h1>
+    <div v-if="error" class="error-text" role="alert">{{ error }}</div>
+    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+    <div v-else-if="!shipments.length" class="card muted">{{ $t("common.empty") }}</div>
+    <div v-else class="table-wrap">
+      <table class="table">
+        <thead>
+          <tr>
+            <th>{{ $t("shipment.shipmentNo") }}</th>
+            <th>{{ $t("shop.orderNo") }}</th>
+            <th>{{ $t("shop.carrier") }}</th>
+            <th>{{ $t("shop.trackingNo") }}</th>
+            <th>{{ $t("common.status") }}</th>
+            <th>{{ $t("shop.created") }}</th>
+            <th>{{ $t("common.actions") }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="shipment in shipments" :key="shipment.id">
+            <td>{{ shipment.shipment_no }}</td>
+            <td><NuxtLink :to="`/orders/${shipment.order_id}`">{{ shipment.order_no ?? shipment.order_id }}</NuxtLink></td>
+            <td>{{ shipment.carrier }}</td>
+            <td>{{ shipment.tracking_no }}</td>
+            <td><span class="badge" :class="statusClass(shipment.status)">{{ $t(`shipment.status.${shipment.status}`) }}</span></td>
+            <td>{{ formatDate(shipment.created_at) }}</td>
+            <td><button v-if="shipment.status === 'pending'" class="btn sm" :disabled="actionId === shipment.id" @click="markShipped(shipment)">{{ $t("shipment.markShipped") }}</button></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.table-wrap {
+  overflow-x: auto;
+}
+</style>
diff --git a/openspec/changes/cart-checkout-orders/proposal.md b/openspec/changes/archive/2026-09-17-cart-checkout-orders/proposal.md
similarity index 100%
rename from openspec/changes/cart-checkout-orders/proposal.md
rename to openspec/changes/archive/2026-09-17-cart-checkout-orders/proposal.md
diff --git a/openspec/changes/cart-checkout-orders/specs/cart/spec.md b/openspec/changes/archive/2026-09-17-cart-checkout-orders/specs/cart/spec.md
similarity index 100%
rename from openspec/changes/cart-checkout-orders/specs/cart/spec.md
rename to openspec/changes/archive/2026-09-17-cart-checkout-orders/specs/cart/spec.md
diff --git a/openspec/changes/cart-checkout-orders/specs/order/spec.md b/openspec/changes/archive/2026-09-17-cart-checkout-orders/specs/order/spec.md
similarity index 100%
rename from openspec/changes/cart-checkout-orders/specs/order/spec.md
rename to openspec/changes/archive/2026-09-17-cart-checkout-orders/specs/order/spec.md
diff --git a/openspec/changes/archive/2026-09-17-cart-checkout-orders/tasks.md b/openspec/changes/archive/2026-09-17-cart-checkout-orders/tasks.md
new file mode 100644
index 0000000..7aa7637
--- /dev/null
+++ b/openspec/changes/archive/2026-09-17-cart-checkout-orders/tasks.md
@@ -0,0 +1,17 @@
+# Tasks: cart-checkout-orders
+
+## 1. Schema
+- [x] Migration: orders, order_items; order status enum; order_no sequence
+
+## 2. Cart (Redis)
+- [x] GET /api/cart, POST /api/cart/items, PUT/DELETE /api/cart/items/{sku_id}
+- [x] Cart read joins SKU/product snapshots; rejects inactive/unpublished SKUs
+
+## 3. Checkout & orders
+- [x] POST /api/orders/checkout (one order per shop, tx: stock decrement + order insert, cart clear)
+- [x] GET /api/orders (mine, paged), GET /api/orders/{id}
+- [x] POST /api/orders/{id}/pay (mock) and /cancel with state rules
+- [x] GET /api/shop/orders for merchants; platform admin list
+
+## 4. Tests
+- [x] cargo test: multi-shop checkout splits orders, insufficient stock → 409, cancel rules, stock restored on cancel
diff --git a/openspec/changes/catalog-i18n-currency/proposal.md b/openspec/changes/archive/2026-09-17-catalog-i18n-currency/proposal.md
similarity index 100%
rename from openspec/changes/catalog-i18n-currency/proposal.md
rename to openspec/changes/archive/2026-09-17-catalog-i18n-currency/proposal.md
diff --git a/openspec/changes/catalog-i18n-currency/specs/catalog/spec.md b/openspec/changes/archive/2026-09-17-catalog-i18n-currency/specs/catalog/spec.md
similarity index 100%
rename from openspec/changes/catalog-i18n-currency/specs/catalog/spec.md
rename to openspec/changes/archive/2026-09-17-catalog-i18n-currency/specs/catalog/spec.md
diff --git a/openspec/changes/catalog-i18n-currency/specs/currency/spec.md b/openspec/changes/archive/2026-09-17-catalog-i18n-currency/specs/currency/spec.md
similarity index 100%
rename from openspec/changes/catalog-i18n-currency/specs/currency/spec.md
rename to openspec/changes/archive/2026-09-17-catalog-i18n-currency/specs/currency/spec.md
diff --git a/openspec/changes/archive/2026-09-17-catalog-i18n-currency/tasks.md b/openspec/changes/archive/2026-09-17-catalog-i18n-currency/tasks.md
new file mode 100644
index 0000000..8441689
--- /dev/null
+++ b/openspec/changes/archive/2026-09-17-catalog-i18n-currency/tasks.md
@@ -0,0 +1,22 @@
+# Tasks: catalog-i18n-currency
+
+## 1. Schema
+- [x] Migration: currencies, categories, products, skus; product status enum
+- [x] Seed currencies (USD base, CNY, EUR, JPY) + demo categories (bilingual)
+
+## 2. Currency APIs
+- [x] GET /api/currencies (public, enabled only)
+- [x] GET /api/currencies/convert?amount_minor&from&to
+
+## 3. Public catalog APIs
+- [x] GET /api/products (paged; filters: category_id, q, shop_id; only published)
+- [x] GET /api/products/{id_or_slug} (published only, with SKUs)
+- [x] GET /api/categories
+
+## 4. Shop-admin catalog APIs
+- [x] GET/POST /api/shop/products, PUT /api/shop/products/{id}
+- [x] POST /api/shop/products/{id}/publish | /unpublish
+- [x] POST /api/shop/products/{id}/skus (upsert by sku_code)
+
+## 5. Tests
+- [x] cargo test: publish lifecycle visibility, i18n fields round-trip, currency conversion math, shop isolation
diff --git a/openspec/changes/foundation-auth/proposal.md b/openspec/changes/archive/2026-09-17-foundation-auth/proposal.md
similarity index 100%
rename from openspec/changes/foundation-auth/proposal.md
rename to openspec/changes/archive/2026-09-17-foundation-auth/proposal.md
diff --git a/openspec/changes/foundation-auth/specs/auth/spec.md b/openspec/changes/archive/2026-09-17-foundation-auth/specs/auth/spec.md
similarity index 100%
rename from openspec/changes/foundation-auth/specs/auth/spec.md
rename to openspec/changes/archive/2026-09-17-foundation-auth/specs/auth/spec.md
diff --git a/openspec/changes/foundation-auth/specs/rbac/spec.md b/openspec/changes/archive/2026-09-17-foundation-auth/specs/rbac/spec.md
similarity index 100%
rename from openspec/changes/foundation-auth/specs/rbac/spec.md
rename to openspec/changes/archive/2026-09-17-foundation-auth/specs/rbac/spec.md
diff --git a/openspec/changes/foundation-auth/tasks.md b/openspec/changes/archive/2026-09-17-foundation-auth/tasks.md
similarity index 53%
rename from openspec/changes/foundation-auth/tasks.md
rename to openspec/changes/archive/2026-09-17-foundation-auth/tasks.md
index 9af7fef..b406be1 100644
--- a/openspec/changes/foundation-auth/tasks.md
+++ b/openspec/changes/archive/2026-09-17-foundation-auth/tasks.md
@@ -7,14 +7,14 @@
 - [x] sqlx migrate on boot; 0001_init migration
 
 ## 2. Identity schema
-- [ ] Migration: users, shops tables; role enum
-- [ ] Seed platform admin (admin@vmall.local / admin1234)
+- [x] Migration: users, shops tables; role enum
+- [x] Seed platform admin (admin@vmall.local / admin1234)
 
 ## 3. Auth API
-- [ ] POST /api/auth/register (customer role)
-- [ ] POST /api/auth/login → JWT + user
-- [ ] GET /api/auth/me (Bearer)
-- [ ] Auth extractor + require_role guard
+- [x] POST /api/auth/register (customer role)
+- [x] POST /api/auth/login → JWT + user
+- [x] GET /api/auth/me (Bearer)
+- [x] Auth extractor + require_role guard
 
 ## 4. Tests
-- [ ] cargo test: register/login/me happy path, wrong password, role guard denies customer on admin route
+- [x] cargo test: register/login/me happy path, wrong password, role guard denies customer on admin route
diff --git a/openspec/changes/archive/2026-09-17-frontend-apps/agent-admin.md b/openspec/changes/archive/2026-09-17-frontend-apps/agent-admin.md
new file mode 100644
index 0000000..e70e106
--- /dev/null
+++ b/openspec/changes/archive/2026-09-17-frontend-apps/agent-admin.md
@@ -0,0 +1,21 @@
+# Task: build apps/admin (platform console) — READ openspec/changes/frontend-apps/agent-conventions.md FIRST and follow it exactly. Your app = @vmall/admin, port 3002. Allowed roles: platform_admin.
+
+Replace the placeholder pages. app.vue (sidebar layout) exists — keep it.
+
+## Pages to implement (apps/admin/pages/)
+
+1. `login.vue` — per conventions; only platform_admin may proceed. (Seed account: admin@vmall.local / admin1234 — display this hint on the login page in a muted line for the dev MVP.)
+2. `index.vue` (auth) — dashboard: stat cards (total users, shops, orders, enabled currencies) from `$api.admin.listUsers()`, `$api.admin.listShops()`, `$api.admin.listOrders()`, `$api.admin.listCurrencies()`.
+3. `users.vue` (auth) — `$api.admin.listUsers(page)` table: email, display_name, role badge, assigned shop (resolve shop_id → shop name via `$api.admin.listShops()`, localized), created. Role editor per row: role select (platform_admin/shop_owner/shop_staff/customer) + shop select shown ONLY for shop roles + save button → `$api.admin.setUserRole(id, role, shopId|null)`; on validation error (e.g. shop role without shop → 400) show message. Paging.
+4. `shops.vue` (auth) — `$api.admin.listShops()` table: localized name, slug, status badge, created; actions suspend/activate → `$api.admin.setShopStatus`. Create-shop card: name EN, name ZH, slug → `$api.admin.createShop({en, zh}, slug)`; refetch; show conflict error (duplicate slug → 409).
+5. `orders.vue` (auth) — `$api.admin.listOrders(page)`: table (order_no, shop (resolve id→name), user_id short, total formatted in order.currency, status badge, created). Paging.
+6. `currencies.vue` (auth) — `$api.admin.listCurrencies()` table: code, localized name, symbol, exponent, rate_to_base, base badge, enabled badge. Per-row rate editor (number input + save → `$api.admin.setRate(code, rate)`). New-currency card: code (3 letters), name EN + ZH, symbol, exponent (0–6), rate_to_base, enabled checkbox → `$api.admin.upsertCurrency({...})` with CurrencyUpsertBody (rate_to_base is a STRING). Toggle enabled via upsert with the row's other fields preserved.
+
+## Middleware
+middleware/auth.ts per conventions; apply to everything except /login.
+
+## Verify
+`pnpm --filter @vmall/admin build` MUST pass. Fix type errors properly (no `any`, no @ts-ignore).
+
+## Report back
+Pages built, deviations, contract gaps found.
diff --git a/openspec/changes/archive/2026-09-17-frontend-apps/agent-conventions.md b/openspec/changes/archive/2026-09-17-frontend-apps/agent-conventions.md
new file mode 100644
index 0000000..7c16341
--- /dev/null
+++ b/openspec/changes/archive/2026-09-17-frontend-apps/agent-conventions.md
@@ -0,0 +1,27 @@
+# VMall frontend conventions (READ FIRST — applies to every app agent)
+
+Repo: /Users/chengdzhang/github/jamyun/vmall (pnpm workspace). The Rust API is COMPLETE and tested; do not touch apps/api, packages/shared, openspec, or any app other than yours.
+
+## Your app
+- Nuxt 3 + pinia + @nuxtjs/i18n. Deps installed. Verify with `pnpm --filter @vmall/<your-app> build` at the end (MUST pass). Do not run dev servers, do not run other apps' builds, do not run cargo.
+- The API may not be running while you work — code against the contract, prove with `nuxt build` (type safety + compile). NEVER mock the API.
+
+## Contract (packages/shared/src)
+- `useNuxtApp().$api` is a typed `ApiClient` (see packages/shared/src/api.ts for every method + request body types). Provided by plugins/api.ts (already wired, reads baseUrl from runtimeConfig public.apiBase, token from localStorage `vmall.token`).
+- Types in packages/shared/src/types.ts (User, Product, Sku, Cart, Order, Shipment, Invoice, Currency, Paged, etc.). Money = integer minor units + ISO currency code.
+- `t(localizedText, locale)` picks the display string from a JSONB {"en","zh"} map. `formatMoney(amountMinor, currency, exponent, locale)` formats minor units.
+- All UI strings via $t with keys from @vmall/shared/locales (en + zh exist). If you need a key that doesn't exist, add it to YOUR app's locales-extra.ts (enExtra/zhExtra, same nested shape) — NEVER edit packages/shared.
+- Shared stylesheet `@vmall/shared/ui.css` is loaded: use its classes (.card, .btn .primary .sm .danger, .table, .badge .green/.blue/.orange/.red, .field, .grid.products, .product-card, .page-title, .page-head, .form-narrow, .muted, .row, .between, .mt, .mb, .error-text). Add app-scoped CSS only in a <style> block when needed.
+
+## Session & guards
+- stores/session.ts: `useSessionStore()` — hydrate() on mounted (app.vue already does), setAuth({token,user}), logout(), getters.isLoggedIn, state.user (role, display_name).
+- Route guard convention: create `middleware/auth.ts` with defineNuxtRouteMiddleware that (client-side) reads localStorage `vmall.token` + `vmall.user` (JSON) and redirects to /login when absent or when user.role is not in the app's allowed roles. Apply with `definePageMeta({ middleware: "auth" })` on every protected page. The /login page itself is public.
+- Login page pattern: form → `$api.login(email, password)` → on success check `user.role` against the app's allowed roles (wrong role → show error, do not setAuth) → `session.setAuth(...)` → navigateTo("/"). Show API error message on failure.
+
+## Behavior rules
+- All pages render in BOTH en and zh — switcher already in app.vue; never hardcode user-facing strings.
+- All list pages handle empty state ($t('common.empty')) and API errors (show err.message in .error-text).
+- After every mutation, re-fetch the affected list/detail from the API (no local-only state faking).
+- Dates: `new Date(x).toLocaleString(locale === 'zh' ? 'zh-CN' : 'en-US')`.
+- Money inputs: enter major units (e.g. 12.99), convert to minor via exponent (SKU currencies are exp-2 except JPY exp-0; SKU editor may restrict currency to USD/CNY/EUR which are all exp-2).
+- Status badges: map statuses to .badge colors (green=positive terminal, blue=active/in-progress, orange=pending, red=cancelled/rejected).
diff --git a/openspec/changes/archive/2026-09-17-frontend-apps/agent-mall.md b/openspec/changes/archive/2026-09-17-frontend-apps/agent-mall.md
new file mode 100644
index 0000000..e48d45f
--- /dev/null
+++ b/openspec/changes/archive/2026-09-17-frontend-apps/agent-mall.md
@@ -0,0 +1,24 @@
+# Task: build apps/mall (customer storefront) — READ openspec/changes/frontend-apps/agent-conventions.md FIRST and follow it exactly. Your app = @vmall/mall, port 3000. Allowed roles: customer.
+
+Replace the placeholder pages with the real storefront. app.vue (topnav with locale + currency switchers) already exists — keep it; you may refine but not regress it. Currency selection comes from `usePrefs().currency` (cookie) and is fed by the switcher in app.vue.
+
+## Pages to implement (apps/mall/pages/)
+
+1. `index.vue` — catalog home. Category filter (select, from `$api.listCategories()`), search input (q), paging (prev/next). Product grid (.grid.products): card with first image (or placeholder div), localized name via `t(name, locale)`, price = lowest active-SKU price, displayed in the SELECTED currency.
+   Price display helper (make `composables/usePrice.ts`): given amount_minor + sku currency, if it equals selected currency use as-is, else `$api.convert(...)`; cache results in a reactive Map keyed `amount:from:to` to avoid duplicate calls; format with `formatMoney(converted, selected, exponentOfSelected, locale)`. Load currency list once (store it in the composable via useState) for exponents.
+2. `products/[id].vue` — detail. `$api.getProduct(route.params.id)`: images (main + thumbs), localized name/description, SKU picker (radio list: sku_code + attributes JSON rendered as key: value pairs + stock), qty input (1..stock), converted price, add-to-cart button. Not logged in → redirect /login (preserve intent not required). Success → navigate to /cart.
+3. `cart.vue` (auth) — `$api.getCart()`: line items (localized name, sku_code, unit price converted, qty editor with update on change `$api.updateCartItem`, remove `$api.removeCartItem`), line totals, subtotal (sum of converted lines), checkout button → /checkout. Empty state.
+4. `checkout.vue` (auth) — shipping address form (recipient/phone/country/region/city/line1/postal_code, all validated non-empty except region/postal optional-but-shown), order preview (lines + subtotal in selected currency), place order → `$api.checkout(address, currency)` → success page state: show created order numbers + link to /orders.
+5. `orders/index.vue` (auth) — `$api.listMyOrders(page)`: table (order_no, created, item count, total formatted in order.currency, status badge), link to detail. Paging.
+6. `orders/[id].vue` (auth) — `$api.getOrder(id)`: items table, address card, status badge, total. Actions by status: pending_payment → Pay (`$api.payOrder`) and Cancel (`$api.cancelOrder`). Shipments section: from `$api.listMyShipments()` filtered by order_id — carrier/tracking/status, confirm-delivery button when shipped (`$api.confirmDelivered`). Invoice section: request form (kind select personal/company, title, tax_no shown when company) → `$api.requestInvoice`; show existing invoice for this order from `$api.listMyInvoices()`.
+7. `invoices.vue` (auth) — `$api.listMyInvoices()`: table (invoice_no or —, order_no, title, kind, amount formatted, status badge, issued_at).
+8. `login.vue`, `register.vue` — .form-narrow cards. Register: `$api.register(email, password, displayName)` then setAuth and go home. Link between the two.
+
+## Middleware
+middleware/auth.ts per conventions; apply to cart, checkout, orders/*, invoices.
+
+## Verify
+`pnpm --filter @vmall/mall build` MUST pass. Fix all type errors properly (no `any`, no @ts-ignore).
+
+## Report back
+Pages built, any deviations, anything missing from the API client contract (e.g. a pay endpoint) — list precisely.
diff --git a/openspec/changes/archive/2026-09-17-frontend-apps/agent-shop-admin.md b/openspec/changes/archive/2026-09-17-frontend-apps/agent-shop-admin.md
new file mode 100644
index 0000000..6557868
--- /dev/null
+++ b/openspec/changes/archive/2026-09-17-frontend-apps/agent-shop-admin.md
@@ -0,0 +1,25 @@
+# Task: build apps/shop-admin (merchant console) — READ openspec/changes/frontend-apps/agent-conventions.md FIRST and follow it exactly. Your app = @vmall/shop-admin, port 3001. Allowed roles: shop_owner, shop_staff.
+
+Replace the placeholder pages. app.vue (sidebar layout) exists — keep it.
+
+## Pages to implement (apps/shop-admin/pages/)
+
+1. `login.vue` — per conventions; only shop_owner/shop_staff may proceed.
+2. `index.vue` (auth) — dashboard: stat cards (total products, published count, orders by status counts, pending invoice requests) computed from `$api.shop.listMyProducts({ per_page: 100 })`, `$api.shop.listOrders({ per_page: 100 })`, `$api.shop.listInvoices()`. Also show shop profile from `$api.shop.getMyShop()` (localized name, slug, status).
+3. `products/index.vue` (auth) — table: localized name, slug, SKU count, status badge, created; status filter select (all/draft/published/unpublished); actions: edit link, publish (`$api.shop.publish`) / unpublish (`$api.shop.unpublish`) buttons with immediate refetch; "New product" button → products/new. Paging if total > per_page.
+4. `products/new.vue` + `products/[id].vue` (auth) — product form (shared component `components/ProductForm.vue`): slug, name EN + ZH, description EN + ZH (textareas), category select (`$api.listCategories()`, optional), images textarea (one URL per line → string[]). Save: create → `$api.shop.createProduct`, edit → `$api.shop.updateProduct`; body type ProductUpsertBody.
+   On the EDIT page additionally: SKU manager — table of existing SKUs (sku_code, price formatted, currency, stock, active) + form to add/update a SKU (`$api.shop.upsertSku(productId, body)` with SkuUpsertBody): sku_code, price in MAJOR units converted to minor ×100 (currencies USD/CNY/EUR all exponent 2; offer a select of those three), stock integer, active checkbox. After upsert, refetch the product via `$api.shop.getProduct(id)` (exists in the client).
+   Validation: slug required (lowercase alnum + dash), name EN required; show API errors (e.g. publish without priced SKU → 400) via .error-text.
+5. `orders/index.vue` (auth) — `$api.shop.listOrders({ status, page })`: status filter, table (order_no, created, items count, total in order.currency formatted, status badge), row → orders/[id].
+6. `orders/[id].vue` (auth) — order items, address, status. Create-shipment card (when status paid or fulfilling): carrier + tracking_no inputs + one qty input per order item (default = unshipped remainder = item.qty − sum of that item's qty across this order's shipments from `$api.shop.listShipments()` filtered by order_id); submit → `$api.shop.createShipment(orderId, carrier, trackingNo, items)` with only qty>0 lines. Shipments of this order: table with status + "Mark shipped" button when pending (`$api.shop.markShipped`). Refetch after every action.
+7. `shipments.vue` (auth) — `$api.shop.listShipments()`: full table (shipment_no, order_no, carrier, tracking_no, status badge, created) + mark-shipped action.
+8. `invoices.vue` (auth) — `$api.shop.listInvoices()`: table (invoice_no or —, order_no, title, kind, tax_no, amount formatted, status badge) + "Issue" button when requested (`$api.shop.issueInvoice`).
+
+## Middleware
+middleware/auth.ts per conventions; apply to everything except /login.
+
+## Verify
+`pnpm --filter @vmall/shop-admin build` MUST pass. Fix type errors properly (no `any`, no @ts-ignore).
+
+## Report back
+Pages built, deviations, contract gaps found.
diff --git a/openspec/changes/frontend-apps/proposal.md b/openspec/changes/archive/2026-09-17-frontend-apps/proposal.md
similarity index 100%
rename from openspec/changes/frontend-apps/proposal.md
rename to openspec/changes/archive/2026-09-17-frontend-apps/proposal.md
diff --git a/openspec/changes/frontend-apps/specs/frontend-admin/spec.md b/openspec/changes/archive/2026-09-17-frontend-apps/specs/frontend-admin/spec.md
similarity index 100%
rename from openspec/changes/frontend-apps/specs/frontend-admin/spec.md
rename to openspec/changes/archive/2026-09-17-frontend-apps/specs/frontend-admin/spec.md
diff --git a/openspec/changes/frontend-apps/specs/frontend-mall/spec.md b/openspec/changes/archive/2026-09-17-frontend-apps/specs/frontend-mall/spec.md
similarity index 100%
rename from openspec/changes/frontend-apps/specs/frontend-mall/spec.md
rename to openspec/changes/archive/2026-09-17-frontend-apps/specs/frontend-mall/spec.md
diff --git a/openspec/changes/frontend-apps/specs/frontend-shop-admin/spec.md b/openspec/changes/archive/2026-09-17-frontend-apps/specs/frontend-shop-admin/spec.md
similarity index 100%
rename from openspec/changes/frontend-apps/specs/frontend-shop-admin/spec.md
rename to openspec/changes/archive/2026-09-17-frontend-apps/specs/frontend-shop-admin/spec.md
diff --git a/openspec/changes/archive/2026-09-17-frontend-apps/tasks.md b/openspec/changes/archive/2026-09-17-frontend-apps/tasks.md
new file mode 100644
index 0000000..be782d4
--- /dev/null
+++ b/openspec/changes/archive/2026-09-17-frontend-apps/tasks.md
@@ -0,0 +1,22 @@
+# Tasks: frontend-apps
+
+## 1. Shared package
+- [x] @vmall/shared: types, API client, locales (en/zh), ui.css
+
+## 2. Scaffolds
+- [x] Three Nuxt apps: config, i18n, pinia session store, api plugin, layouts
+
+## 3. mall
+- [x] Home: product grid + search + category filter + paging
+- [x] Product detail with SKU picker, localized content, converted price
+- [x] Cart page, checkout page (address form), orders list/detail, shipments, invoices, login/register
+
+## 4. shop-admin
+- [x] Login guard, dashboard, products list/new/edit (i18n fields, SKUs), publish/unpublish
+- [x] Orders, shipment creation + mark shipped, invoices list + issue
+
+## 5. admin
+- [x] Login guard, users (role assignment), shops (create/suspend), orders, currencies (rate edit)
+
+## 6. Verification
+- [x] All three apps build; browser smoke: register→shop create→product publish→purchase→ship→invoice in en + zh
diff --git a/openspec/changes/fulfillment-invoices/proposal.md b/openspec/changes/archive/2026-09-17-fulfillment-invoices/proposal.md
similarity index 100%
rename from openspec/changes/fulfillment-invoices/proposal.md
rename to openspec/changes/archive/2026-09-17-fulfillment-invoices/proposal.md
diff --git a/openspec/changes/fulfillment-invoices/specs/invoice/spec.md b/openspec/changes/archive/2026-09-17-fulfillment-invoices/specs/invoice/spec.md
similarity index 100%
rename from openspec/changes/fulfillment-invoices/specs/invoice/spec.md
rename to openspec/changes/archive/2026-09-17-fulfillment-invoices/specs/invoice/spec.md
diff --git a/openspec/changes/fulfillment-invoices/specs/shipment/spec.md b/openspec/changes/archive/2026-09-17-fulfillment-invoices/specs/shipment/spec.md
similarity index 100%
rename from openspec/changes/fulfillment-invoices/specs/shipment/spec.md
rename to openspec/changes/archive/2026-09-17-fulfillment-invoices/specs/shipment/spec.md
diff --git a/openspec/changes/archive/2026-09-17-fulfillment-invoices/tasks.md b/openspec/changes/archive/2026-09-17-fulfillment-invoices/tasks.md
new file mode 100644
index 0000000..1d1ea27
--- /dev/null
+++ b/openspec/changes/archive/2026-09-17-fulfillment-invoices/tasks.md
@@ -0,0 +1,17 @@
+# Tasks: fulfillment-invoices
+
+## 1. Schema
+- [x] Migration: shipments, shipment_items, invoices; status enums; shipment_no/invoice_no sequences
+
+## 2. Shipments
+- [x] POST /api/shop/orders/{id}/shipments (qty validation vs unshipped remainder)
+- [x] POST /api/shop/shipments/{id}/ship; order status propagation (fulfilling/shipped)
+- [x] GET /api/shipments (customer), POST /api/shipments/{id}/confirm-delivered → order completed when done
+- [x] GET /api/shop/shipments
+
+## 3. Invoices
+- [x] POST /api/orders/{id}/invoice (one open invoice per order; amount = order total)
+- [x] GET /api/invoices (customer), GET /api/shop/invoices, POST /api/shop/invoices/{id}/issue
+
+## 4. Tests
+- [x] cargo test: partial shipment qty math, order status propagation, duplicate invoice rejected, issue flow
diff --git a/openspec/changes/cart-checkout-orders/tasks.md b/openspec/changes/cart-checkout-orders/tasks.md
deleted file mode 100644
index dfe434a..0000000
--- a/openspec/changes/cart-checkout-orders/tasks.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Tasks: cart-checkout-orders
-
-## 1. Schema
-- [ ] Migration: orders, order_items; order status enum; order_no sequence
-
-## 2. Cart (Redis)
-- [ ] GET /api/cart, POST /api/cart/items, PUT/DELETE /api/cart/items/{sku_id}
-- [ ] Cart read joins SKU/product snapshots; rejects inactive/unpublished SKUs
-
-## 3. Checkout & orders
-- [ ] POST /api/orders/checkout (one order per shop, tx: stock decrement + order insert, cart clear)
-- [ ] GET /api/orders (mine, paged), GET /api/orders/{id}
-- [ ] POST /api/orders/{id}/pay (mock) and /cancel with state rules
-- [ ] GET /api/shop/orders for merchants; platform admin list
-
-## 4. Tests
-- [ ] cargo test: multi-shop checkout splits orders, insufficient stock → 409, cancel rules, stock restored on cancel
diff --git a/openspec/changes/catalog-i18n-currency/tasks.md b/openspec/changes/catalog-i18n-currency/tasks.md
deleted file mode 100644
index dd0ddf1..0000000
--- a/openspec/changes/catalog-i18n-currency/tasks.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Tasks: catalog-i18n-currency
-
-## 1. Schema
-- [ ] Migration: currencies, categories, products, skus; product status enum
-- [ ] Seed currencies (USD base, CNY, EUR, JPY) + demo categories (bilingual)
-
-## 2. Currency APIs
-- [ ] GET /api/currencies (public, enabled only)
-- [ ] GET /api/currencies/convert?amount_minor&from&to
-
-## 3. Public catalog APIs
-- [ ] GET /api/products (paged; filters: category_id, q, shop_id; only published)
-- [ ] GET /api/products/{id_or_slug} (published only, with SKUs)
-- [ ] GET /api/categories
-
-## 4. Shop-admin catalog APIs
-- [ ] GET/POST /api/shop/products, PUT /api/shop/products/{id}
-- [ ] POST /api/shop/products/{id}/publish | /unpublish
-- [ ] POST /api/shop/products/{id}/skus (upsert by sku_code)
-
-## 5. Tests
-- [ ] cargo test: publish lifecycle visibility, i18n fields round-trip, currency conversion math, shop isolation
diff --git a/openspec/changes/frontend-apps/tasks.md b/openspec/changes/frontend-apps/tasks.md
deleted file mode 100644
index 1ed2d55..0000000
--- a/openspec/changes/frontend-apps/tasks.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Tasks: frontend-apps
-
-## 1. Shared package
-- [x] @vmall/shared: types, API client, locales (en/zh), ui.css
-
-## 2. Scaffolds
-- [x] Three Nuxt apps: config, i18n, pinia session store, api plugin, layouts
-
-## 3. mall
-- [ ] Home: product grid + search + category filter + paging
-- [ ] Product detail with SKU picker, localized content, converted price
-- [ ] Cart page, checkout page (address form), orders list/detail, shipments, invoices, login/register
-
-## 4. shop-admin
-- [ ] Login guard, dashboard, products list/new/edit (i18n fields, SKUs), publish/unpublish
-- [ ] Orders, shipment creation + mark shipped, invoices list + issue
-
-## 5. admin
-- [ ] Login guard, users (role assignment), shops (create/suspend), orders, currencies (rate edit)
-
-## 6. Verification
-- [ ] All three apps build; browser smoke: register→shop create→product publish→purchase→ship→invoice in en + zh
diff --git a/openspec/changes/fulfillment-invoices/tasks.md b/openspec/changes/fulfillment-invoices/tasks.md
deleted file mode 100644
index 076015c..0000000
--- a/openspec/changes/fulfillment-invoices/tasks.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Tasks: fulfillment-invoices
-
-## 1. Schema
-- [ ] Migration: shipments, shipment_items, invoices; status enums; shipment_no/invoice_no sequences
-
-## 2. Shipments
-- [ ] POST /api/shop/orders/{id}/shipments (qty validation vs unshipped remainder)
-- [ ] POST /api/shop/shipments/{id}/ship; order status propagation (fulfilling/shipped)
-- [ ] GET /api/shipments (customer), POST /api/shipments/{id}/confirm-delivered → order completed when done
-- [ ] GET /api/shop/shipments
-
-## 3. Invoices
-- [ ] POST /api/orders/{id}/invoice (one open invoice per order; amount = order total)
-- [ ] GET /api/invoices (customer), GET /api/shop/invoices, POST /api/shop/invoices/{id}/issue
-
-## 4. Tests
-- [ ] cargo test: partial shipment qty math, order status propagation, duplicate invoice rejected, issue flow
diff --git a/openspec/specs/auth/spec.md b/openspec/specs/auth/spec.md
new file mode 100644
index 0000000..2d94cb5
--- /dev/null
+++ b/openspec/specs/auth/spec.md
@@ -0,0 +1,34 @@
+# auth Specification
+
+## Purpose
+TBD - created by archiving change foundation-auth. Update Purpose after archive.
+## Requirements
+### Requirement: Customer registration
+The API SHALL provide `POST /api/auth/register` accepting email, password, display_name. New users are created with role `customer`. Duplicate emails MUST be rejected with 409.
+
+#### Scenario: successful registration
+- **WHEN** a client posts a unique email with password ≥ 8 chars
+- **THEN** the API returns 201 with `{ token, user }` and the user can call `/api/auth/me` with the token
+
+#### Scenario: duplicate email
+- **WHEN** the email already exists
+- **THEN** the API returns 409 with code `CONFLICT`
+
+### Requirement: Login
+The API SHALL provide `POST /api/auth/login` issuing a signed JWT (24h TTL) containing user id and role.
+
+#### Scenario: valid credentials
+- **WHEN** email + correct password are posted
+- **THEN** the API returns `{ token, user }`
+
+#### Scenario: invalid credentials
+- **WHEN** the password is wrong or email unknown
+- **THEN** the API returns 401 with code `UNAUTHORIZED` and no token
+
+### Requirement: Current user
+`GET /api/auth/me` SHALL return the authenticated user profile.
+
+#### Scenario: missing token
+- **WHEN** no Bearer token is supplied
+- **THEN** the API returns 401
+
diff --git a/openspec/specs/cart/spec.md b/openspec/specs/cart/spec.md
new file mode 100644
index 0000000..f036dbd
--- /dev/null
+++ b/openspec/specs/cart/spec.md
@@ -0,0 +1,16 @@
+# cart Specification
+
+## Purpose
+TBD - created by archiving change cart-checkout-orders. Update Purpose after archive.
+## Requirements
+### Requirement: Server-side cart
+Authenticated shoppers SHALL have a Redis-backed cart keyed by user id, containing sku_id + qty entries.
+
+#### Scenario: add and update
+- **WHEN** a shopper POSTs sku + qty, then PUTs a new qty
+- **THEN** GET /api/cart reflects the latest qty with current price/name snapshot
+
+#### Scenario: unpurchasable SKU rejected
+- **WHEN** adding a SKU that is inactive or whose product is not published
+- **THEN** the API returns 400
+
diff --git a/openspec/specs/catalog/spec.md b/openspec/specs/catalog/spec.md
new file mode 100644
index 0000000..855a795
--- /dev/null
+++ b/openspec/specs/catalog/spec.md
@@ -0,0 +1,39 @@
+# catalog Specification
+
+## Purpose
+TBD - created by archiving change catalog-i18n-currency. Update Purpose after archive.
+## Requirements
+### Requirement: Localized product content
+Product and category names/descriptions SHALL be stored as JSONB maps keyed by locale (`en`, `zh`). The API MUST return the full map; clients pick the display locale.
+
+#### Scenario: bilingual round-trip
+- **WHEN** a shop owner creates a product with name `{"en": "Mug", "zh": "马克杯"}`
+- **THEN** both public detail and shop-admin GET return the identical map
+
+### Requirement: Publish lifecycle
+Products SHALL have status `draft | published | unpublished`. Only `published` products appear in public list/detail.
+
+#### Scenario: publish then unpublish
+- **WHEN** a product is published
+- **THEN** it appears in `GET /api/products`
+- **WHEN** it is unpublished
+- **THEN** public detail returns 404 and it disappears from listings
+
+#### Scenario: publish requires sellable SKU
+- **WHEN** publishing a product with no active SKU having price > 0
+- **THEN** the API returns 400
+
+### Requirement: Shop isolation
+Shop-role users SHALL only see and mutate their own shop's products under `/api/shop/products`.
+
+#### Scenario: cross-shop access denied
+- **WHEN** shop owner A requests `/api/shop/products/{id}` of shop B
+- **THEN** the API returns 404
+
+### Requirement: SKU pricing
+Each SKU SHALL carry `price_minor` (integer minor units) and an ISO `currency` code; stock is a non-negative integer.
+
+#### Scenario: negative stock rejected
+- **WHEN** upserting a SKU with stock < 0
+- **THEN** the API returns 400
+
diff --git a/openspec/specs/currency/spec.md b/openspec/specs/currency/spec.md
new file mode 100644
index 0000000..8a7dcd7
--- /dev/null
+++ b/openspec/specs/currency/spec.md
@@ -0,0 +1,23 @@
+# currency Specification
+
+## Purpose
+TBD - created by archiving change catalog-i18n-currency. Update Purpose after archive.
+## Requirements
+### Requirement: Currency registry
+The system SHALL maintain a currencies table: ISO code, localized name, symbol, exponent (minor units), enabled flag, and `rate_to_base` (NUMERIC). Exactly one currency is the base.
+
+#### Scenario: seeded currencies
+- **WHEN** migrations finish
+- **THEN** USD exists as base with rate 1, and CNY/EUR/JPY exist with positive rates
+
+### Requirement: Amount conversion
+`GET /api/currencies/convert` SHALL convert integer minor units between enabled currencies via base rates, rounding half-up to the target exponent.
+
+#### Scenario: USD to JPY
+- **WHEN** converting 1000 minor USD (=$10.00) to JPY with rate 150
+- **THEN** the result is 1500 minor JPY (¥1500), an integer
+
+#### Scenario: disabled currency rejected
+- **WHEN** converting to a disabled or unknown currency
+- **THEN** the API returns 400
+
diff --git a/openspec/specs/frontend-admin/spec.md b/openspec/specs/frontend-admin/spec.md
new file mode 100644
index 0000000..ab41e84
--- /dev/null
+++ b/openspec/specs/frontend-admin/spec.md
@@ -0,0 +1,19 @@
+# frontend-admin Specification
+
+## Purpose
+TBD - created by archiving change frontend-apps. Update Purpose after archive.
+## Requirements
+### Requirement: Platform user and shop management
+Platform admins SHALL assign user roles (with shop scope), create shops, and suspend/activate shops. Suspended shops' products MUST NOT be purchasable (enforced by API, reflected in UI).
+
+#### Scenario: assign shop owner
+- **WHEN** an admin assigns role shop_owner with a shop to a user
+- **THEN** that user can log into shop-admin and manage that shop
+
+### Requirement: Currency management
+Platform admins SHALL view currencies and update exchange rates; new rates affect subsequent conversions.
+
+#### Scenario: rate update
+- **WHEN** an admin updates CNY rate_to_base
+- **THEN** the mall conversion endpoint returns amounts computed with the new rate
+
diff --git a/openspec/specs/frontend-mall/spec.md b/openspec/specs/frontend-mall/spec.md
new file mode 100644
index 0000000..5133f37
--- /dev/null
+++ b/openspec/specs/frontend-mall/spec.md
@@ -0,0 +1,26 @@
+# frontend-mall Specification
+
+## Purpose
+TBD - created by archiving change frontend-apps. Update Purpose after archive.
+## Requirements
+### Requirement: Localized storefront
+The mall SHALL render UI strings and catalog content in en or zh from one switcher, defaulting to en.
+
+#### Scenario: switch to Chinese
+- **WHEN** a shopper switches locale to zh
+- **THEN** navigation, buttons and product names render in Chinese without reload errors
+
+### Requirement: Multi-currency display
+The mall SHALL offer a currency switcher (enabled currencies from the API) converting SKU prices for display; checkout uses the selected currency.
+
+#### Scenario: switch currency
+- **WHEN** a shopper switches from USD to JPY on a product priced $10.00
+- **THEN** the displayed price reflects the API conversion rate (integer minor units)
+
+### Requirement: Shopping flow
+A shopper SHALL be able to browse, view detail, add to cart, checkout with a shipping address, pay (mock), track shipments, confirm delivery, and request an invoice — all against the live API.
+
+#### Scenario: end-to-end purchase
+- **WHEN** a registered shopper completes checkout on a non-empty cart
+- **THEN** orders appear under Orders and the cart is empty
+
diff --git a/openspec/specs/frontend-shop-admin/spec.md b/openspec/specs/frontend-shop-admin/spec.md
new file mode 100644
index 0000000..7eda968
--- /dev/null
+++ b/openspec/specs/frontend-shop-admin/spec.md
@@ -0,0 +1,19 @@
+# frontend-shop-admin Specification
+
+## Purpose
+TBD - created by archiving change frontend-apps. Update Purpose after archive.
+## Requirements
+### Requirement: Merchant product management
+Shop users SHALL manage only their own shop's products: create/edit bilingual content, manage SKUs, publish/unpublish with immediate effect on the storefront.
+
+#### Scenario: publish visible in mall
+- **WHEN** a merchant publishes a product in shop-admin
+- **THEN** it appears in the mall product list for the matching locale
+
+### Requirement: Merchant fulfillment
+Shop users SHALL see incoming orders, create shipments, mark them shipped, and issue requested invoices.
+
+#### Scenario: ship an order
+- **WHEN** a merchant creates a shipment for a paid order and marks it shipped
+- **THEN** the shopper sees the shipment with tracking info
+
diff --git a/openspec/specs/invoice/spec.md b/openspec/specs/invoice/spec.md
new file mode 100644
index 0000000..e0de31a
--- /dev/null
+++ b/openspec/specs/invoice/spec.md
@@ -0,0 +1,23 @@
+# invoice Specification
+
+## Purpose
+TBD - created by archiving change fulfillment-invoices. Update Purpose after archive.
+## Requirements
+### Requirement: Invoice request
+Customers SHALL request at most one open invoice (发票) per order, with title, kind (`personal | company`), and tax_no required for company invoices. Amount equals the order total in the order currency.
+
+#### Scenario: company invoice requires tax number
+- **WHEN** requesting a company invoice without tax_no
+- **THEN** the API returns 400
+
+#### Scenario: duplicate rejected
+- **WHEN** an order already has a requested or issued invoice
+- **THEN** a second request returns 409
+
+### Requirement: Invoice issuance
+Merchants SHALL issue requested invoices of their own shop's orders; issuing sets invoice_no, issued_at and status `issued`.
+
+#### Scenario: issue flow
+- **WHEN** the shop issues a requested invoice
+- **THEN** the customer sees status `issued` with an invoice number
+
diff --git a/openspec/specs/order/spec.md b/openspec/specs/order/spec.md
new file mode 100644
index 0000000..5a4b535
--- /dev/null
+++ b/openspec/specs/order/spec.md
@@ -0,0 +1,34 @@
+# order Specification
+
+## Purpose
+TBD - created by archiving change cart-checkout-orders. Update Purpose after archive.
+## Requirements
+### Requirement: Checkout splits by shop
+`POST /api/orders/checkout` SHALL create one order per distinct shop in the cart, in a single database transaction: stock decrement, order + item insert with price snapshots, cart clear. All amounts use the cart's SKU currencies converted into the buyer-chosen display currency at checkout time.
+
+#### Scenario: two shops → two orders
+- **WHEN** the cart contains SKUs from shops A and B
+- **THEN** two orders are created, each with only its shop's items, and the cart is empty
+
+#### Scenario: insufficient stock
+- **WHEN** any line's qty exceeds SKU stock
+- **THEN** the whole checkout returns 409 and no order is created and stock is unchanged
+
+### Requirement: Order lifecycle
+Status transitions SHALL be: pending_payment → paid → fulfilling → shipped → completed; cancellable only from pending_payment, which MUST restore stock.
+
+#### Scenario: cancel restores stock
+- **WHEN** a customer cancels a pending_payment order
+- **THEN** stock of each SKU increases by the ordered qty and status is cancelled
+
+#### Scenario: illegal transition rejected
+- **WHEN** cancelling a paid order via the customer endpoint
+- **THEN** the API returns 409
+
+### Requirement: Order ownership
+Customers SHALL see only their own orders; shop roles only their shop's orders; platform_admin sees all.
+
+#### Scenario: cross-customer read denied
+- **WHEN** customer X requests customer Y's order id
+- **THEN** the API returns 404
+
diff --git a/openspec/specs/rbac/spec.md b/openspec/specs/rbac/spec.md
new file mode 100644
index 0000000..27bd65e
--- /dev/null
+++ b/openspec/specs/rbac/spec.md
@@ -0,0 +1,23 @@
+# rbac Specification
+
+## Purpose
+TBD - created by archiving change foundation-auth. Update Purpose after archive.
+## Requirements
+### Requirement: Role model
+The system SHALL support roles `platform_admin`, `shop_owner`, `shop_staff`, `customer`. Shop roles MUST carry a `shop_id` scope.
+
+#### Scenario: seeded platform admin
+- **WHEN** migrations run on a fresh database
+- **THEN** a `platform_admin` account exists and can log in
+
+### Requirement: Role enforcement
+Protected routes SHALL declare required roles; the API MUST reject requests with insufficient role using 403.
+
+#### Scenario: customer hits admin route
+- **WHEN** a `customer` token calls an `/api/admin/*` route
+- **THEN** the API returns 403 with code `FORBIDDEN`
+
+#### Scenario: shop scope isolation
+- **WHEN** a `shop_owner` of shop A accesses `/api/shop/*` resources of shop B
+- **THEN** the API returns 403 or 404, never the data
+
diff --git a/openspec/specs/shipment/spec.md b/openspec/specs/shipment/spec.md
new file mode 100644
index 0000000..b802554
--- /dev/null
+++ b/openspec/specs/shipment/spec.md
@@ -0,0 +1,25 @@
+# shipment Specification
+
+## Purpose
+TBD - created by archiving change fulfillment-invoices. Update Purpose after archive.
+## Requirements
+### Requirement: Shipment creation
+Merchants SHALL create shipments (发货单) for their own orders in `paid` or `fulfilling` status, specifying carrier, tracking_no and per-item quantities.
+
+#### Scenario: partial shipment
+- **WHEN** an order has 3 units of item X and a shipment covers 2
+- **THEN** a later shipment may cover the remaining 1; requesting more than the remainder returns 400
+
+#### Scenario: status propagation
+- **WHEN** the first shipment is created for a paid order
+- **THEN** the order becomes `fulfilling`
+- **WHEN** all ordered quantities are covered by shipped shipments
+- **THEN** the order becomes `shipped`
+
+### Requirement: Delivery confirmation
+Customers SHALL confirm delivery of their own shipments; when every shipment of an order is delivered the order becomes `completed`.
+
+#### Scenario: confirm delivered
+- **WHEN** the customer confirms the only shipment of a shipped order
+- **THEN** shipment becomes `delivered` and the order `completed`
+
diff --git a/packages/shared/src/api.ts b/packages/shared/src/api.ts
index d16fda3..80f7e3b 100644
--- a/packages/shared/src/api.ts
+++ b/packages/shared/src/api.ts
@@ -76,11 +76,13 @@ export interface CurrencyUpsertBody {
 
 export interface ShopProductQuery {
   page?: number;
+  per_page?: number;
   status?: ProductStatus;
 }
 
 export interface ShopOrderQuery {
   page?: number;
+  per_page?: number;
   status?: OrderStatus;
 }
 
@@ -145,6 +147,7 @@ export interface ApiClient {
   listMyOrders(page?: number): Promise<Paged<Order>>;
   getOrder(id: string): Promise<Order>;
   cancelOrder(id: string): Promise<Order>;
+  payOrder(id: string): Promise<Order>;
   confirmDelivered(shipmentId: string): Promise<Shipment>;
   listMyShipments(): Promise<Shipment[]>;
   requestInvoice(
@@ -157,12 +160,14 @@ export interface ApiClient {
   shop: {
     getMyShop(): Promise<Shop>;
     listMyProducts(q?: ShopProductQuery): Promise<Paged<Product>>;
+    getProduct(id: string): Promise<Product>;
     createProduct(body: ProductUpsertBody): Promise<Product>;
     updateProduct(id: string, body: ProductUpsertBody): Promise<Product>;
     publish(id: string): Promise<Product>;
     unpublish(id: string): Promise<Product>;
     upsertSku(productId: string, body: SkuUpsertBody): Promise<Sku>;
     listOrders(q?: ShopOrderQuery): Promise<Paged<Order>>;
+    getOrder(id: string): Promise<Order>;
     createShipment(
       orderId: string,
       carrier: string,
@@ -210,6 +215,7 @@ export function createApi(opts: ApiClientOptions): ApiClient {
     listMyOrders: (page = 1) => r("GET", "/orders", undefined, { page }),
     getOrder: (id) => r("GET", `/orders/${id}`),
     cancelOrder: (id) => r("POST", `/orders/${id}/cancel`),
+    payOrder: (id) => r("POST", `/orders/${id}/pay`),
     confirmDelivered: (shipmentId) => r("POST", `/shipments/${shipmentId}/confirm-delivered`),
     listMyShipments: () => r("GET", "/shipments"),
     requestInvoice: (orderId, title, taxNo, kind) =>
@@ -218,12 +224,14 @@ export function createApi(opts: ApiClientOptions): ApiClient {
     shop: {
       getMyShop: () => r("GET", "/shop/profile"),
       listMyProducts: (q = {}) => r("GET", "/shop/products", undefined, { ...q }),
+      getProduct: (id) => r("GET", `/shop/products/${id}`),
       createProduct: (body) => r("POST", "/shop/products", body),
       updateProduct: (id, body) => r("PUT", `/shop/products/${id}`, body),
       publish: (id) => r("POST", `/shop/products/${id}/publish`),
       unpublish: (id) => r("POST", `/shop/products/${id}/unpublish`),
       upsertSku: (productId, body) => r("POST", `/shop/products/${productId}/skus`, body),
       listOrders: (q = {}) => r("GET", "/shop/orders", undefined, { ...q }),
+      getOrder: (id) => r("GET", `/shop/orders/${id}`),
       createShipment: (orderId, carrier, trackingNo, items) =>
         r("POST", `/shop/orders/${orderId}/shipments`, {
           carrier,
diff --git a/scripts/seed-demo.mjs b/scripts/seed-demo.mjs
new file mode 100755
index 0000000..9169e94
--- /dev/null
+++ b/scripts/seed-demo.mjs
@@ -0,0 +1,167 @@
+#!/usr/bin/env node
+/**
+ * Seed demo data into a running vmall-api (dev).
+ * Usage: node scripts/seed-demo.mjs [baseUrl]
+ * Idempotent: existing slugs/emails are reused, products are re-published.
+ */
+const base = process.argv[2] ?? "http://localhost:8080/api";
+
+async function call(method, path, { token, body } = {}) {
+  const res = await fetch(base + path, {
+    method,
+    headers: {
+      "content-type": "application/json",
+      ...(token ? { authorization: `Bearer ${token}` } : {}),
+    },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  const text = await res.text();
+  let data;
+  try {
+    data = JSON.parse(text);
+  } catch {
+    data = text;
+  }
+  return { status: res.status, data };
+}
+
+const fail = (what, r) => {
+  console.error(`FAILED ${what}: ${r.status}`, r.data);
+  process.exit(1);
+};
+
+// 1. admin login
+let r = await call("POST", "/auth/login", {
+  body: { email: "admin@vmall.local", password: "admin1234" },
+});
+if (r.status !== 200) fail("admin login", r);
+const admin = r.data.token;
+
+// 2. demo shop
+let shopId;
+r = await call("POST", "/admin/shops", {
+  token: admin,
+  body: {
+    name: { en: "Demo Store", zh: "演示店铺" },
+    slug: "demo-store",
+  },
+});
+if (r.status === 201) shopId = r.data.id;
+else if (r.status === 409) {
+  const shops = await call("GET", "/admin/shops", { token: admin });
+  shopId = shops.data.find((s) => s.slug === "demo-store").id;
+} else fail("create shop", r);
+
+// 3. demo shop owner (register may 409 if exists)
+const ownerEmail = "shop@vmall.local";
+await call("POST", "/auth/register", {
+  body: { email: ownerEmail, password: "shop12345", display_name: "Demo Owner" },
+});
+r = await call("POST", "/auth/login", {
+  body: { email: ownerEmail, password: "shop12345" },
+});
+if (r.status !== 200) fail("owner login", r);
+let owner = r.data.token;
+if (r.data.user.role !== "shop_owner") {
+  r = await call("PUT", `/admin/users/${r.data.user.id}/role`, {
+    token: admin,
+    body: { role: "shop_owner", shop_id: shopId },
+  });
+  if (r.status !== 200) fail("assign owner", r);
+  r = await call("POST", "/auth/login", {
+    body: { email: ownerEmail, password: "shop12345" },
+  });
+  owner = r.data.token;
+}
+
+// 4. demo customer
+await call("POST", "/auth/register", {
+  body: { email: "customer@vmall.local", password: "customer123", display_name: "Demo Customer" },
+});
+
+// 5. categories
+const cats = (await call("GET", "/categories")).data;
+const catBy = (slug) => cats.find((c) => c.slug === slug)?.id ?? null;
+
+// 6. products
+const products = [
+  {
+    slug: "wireless-headphones",
+    name: { en: "Wireless Headphones", zh: "无线耳机" },
+    description: {
+      en: "Noise-cancelling over-ear headphones with 40h battery.",
+      zh: "降噪头戴式耳机，40 小时续航。",
+    },
+    category: "electronics",
+    price: 7999,
+    stock: 25,
+    img: "https://picsum.photos/seed/headphones/600/600",
+  },
+  {
+    slug: "mechanical-keyboard",
+    name: { en: "Mechanical Keyboard", zh: "机械键盘" },
+    description: {
+      en: "Hot-swappable 75% keyboard, gasket mount.",
+      zh: "热插拔 75% 配列机械键盘，Gasket 结构。",
+    },
+    category: "electronics",
+    price: 12900,
+    stock: 40,
+    img: "https://picsum.photos/seed/keyboard/600/600",
+  },
+  {
+    slug: "linen-shirt",
+    name: { en: "Linen Shirt", zh: "亚麻衬衫" },
+    description: { en: "Breathable 100% linen shirt.", zh: "透气纯亚麻衬衫。" },
+    category: "fashion",
+    price: 4599,
+    stock: 60,
+    img: "https://picsum.photos/seed/shirt/600/600",
+  },
+  {
+    slug: "ceramic-mug",
+    name: { en: "Ceramic Mug", zh: "陶瓷马克杯" },
+    description: { en: "Hand-glazed 350ml mug.", zh: "手工上釉 350ml 马克杯。" },
+    category: "home-living",
+    price: 1999,
+    stock: 100,
+    img: "https://picsum.photos/seed/mug/600/600",
+  },
+];
+
+for (const p of products) {
+  r = await call("POST", "/shop/products", {
+    token: owner,
+    body: {
+      slug: p.slug,
+      name: p.name,
+      description: p.description,
+      category_id: catBy(p.category),
+      images: [p.img],
+    },
+  });
+  let id;
+  if (r.status === 201) id = r.data.id;
+  else if (r.status === 409) {
+    const list = await call("GET", "/shop/products?per_page=100", { token: owner });
+    id = list.data.items.find((x) => x.slug === p.slug).id;
+  } else fail(`create product ${p.slug}`, r);
+  r = await call("POST", `/shop/products/${id}/skus`, {
+    token: owner,
+    body: {
+      sku_code: `${p.slug}-std`,
+      price_minor: p.price,
+      currency: "USD",
+      stock: p.stock,
+    },
+  });
+  if (r.status !== 200) fail(`sku ${p.slug}`, r);
+  r = await call("POST", `/shop/products/${id}/publish`, { token: owner });
+  if (r.status !== 200) fail(`publish ${p.slug}`, r);
+  console.log(`product ready: ${p.slug}`);
+}
+
+console.log("\nDemo data seeded.");
+console.log("  platform admin : admin@vmall.local / admin1234   (apps/admin :3002)");
+console.log("  shop owner     : shop@vmall.local / shop12345    (apps/shop-admin :3001)");
+console.log("  customer       : customer@vmall.local / customer123 (apps/mall :3000)");