Merge pull request #4878 from StarryKira/codex/fix-payment-dashboard-currencies

fix(payment): group dashboard stats by currency

frontend/src/components/admin/payment/DailyRevenueChart.vue

@@ -33,31 +33,43 @@ import {
 } from 'chart.js'
 import { Line } from 'vue-chartjs'
 import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
+import type { DailyPaymentStats } from '@/types/payment'
 
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Tooltip, Legend, Filler)
 
 const { t } = useI18n()
 
 const props = defineProps<{
-  data: { date: string; amount: number; count: number }[]
+  data: DailyPaymentStats[]
   loading?: boolean
 }>()
 
+const colors = [
+  ['rgb(59, 130, 246)', 'rgba(59, 130, 246, 0.1)'],
+  ['rgb(168, 85, 247)', 'rgba(168, 85, 247, 0.1)'],
+  ['rgb(245, 158, 11)', 'rgba(245, 158, 11, 0.1)'],
+  ['rgb(239, 68, 68)', 'rgba(239, 68, 68, 0.1)'],
+]
+
 const chartData = computed(() => {
   if (!props.data || props.data.length === 0) return null
+  const currencies = [...new Set(props.data.flatMap(day => Object.keys(day.amount)))].sort()
   return {
     labels: props.data.map(d => d.date),
     datasets: [
-      {
-        label: t('payment.admin.revenue'),
-        data: props.data.map(d => d.amount),
-        borderColor: 'rgb(59, 130, 246)',
-        backgroundColor: 'rgba(59, 130, 246, 0.1)',
-        fill: true,
-        tension: 0.3,
-        pointRadius: 3,
-        pointHoverRadius: 5,
-      },
+      ...currencies.map((currency, index) => {
+        const [borderColor, backgroundColor] = colors[index % colors.length]
+        return {
+          label: `${currency} ${t('payment.admin.revenue')}`,
+          data: props.data.map(day => day.amount[currency] || 0),
+          borderColor,
+          backgroundColor,
+          fill: true,
+          tension: 0.3,
+          pointRadius: 3,
+          pointHoverRadius: 5,
+        }
+      }),
       {
         label: t('payment.admin.orderCount'),
         data: props.data.map(d => d.count),

frontend/src/components/admin/payment/OrderStatsCards.vue

@@ -8,7 +8,9 @@
         </div>
         <div>
           <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('payment.admin.todayRevenue') }}</p>
-          <p class="text-xl font-bold text-gray-900 dark:text-white">${{ formatMoney(stats.today_amount) }}</p>
+          <p v-for="[currency, amount] in sortedAmounts(stats.today_amount)" :key="currency" class="text-xl font-bold text-gray-900 dark:text-white">
+            {{ formatMoney(currency, amount) }}
+          </p>
           <p class="text-xs text-gray-500 dark:text-gray-400">
             {{ stats.today_count }} {{ t('payment.admin.orders') }}
           </p>
@@ -24,7 +26,9 @@
         </div>
         <div>
           <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('payment.admin.totalRevenue') }}</p>
-          <p class="text-xl font-bold text-gray-900 dark:text-white">${{ formatMoney(stats.total_amount) }}</p>
+          <p v-for="[currency, amount] in sortedAmounts(stats.total_amount)" :key="currency" class="text-xl font-bold text-gray-900 dark:text-white">
+            {{ formatMoney(currency, amount) }}
+          </p>
           <p class="text-xs text-gray-500 dark:text-gray-400">
             {{ stats.total_count }} {{ t('payment.admin.orders') }}
           </p>
@@ -53,7 +57,9 @@
         </div>
         <div>
           <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('payment.admin.avgAmount') }}</p>
-          <p class="text-xl font-bold text-gray-900 dark:text-white">${{ formatMoney(stats.avg_amount) }}</p>
+          <p v-for="[currency, amount] in sortedAmounts(stats.avg_amount)" :key="currency" class="text-xl font-bold text-gray-900 dark:text-white">
+            {{ formatMoney(currency, amount) }}
+          </p>
         </div>
       </div>
     </div>
@@ -63,7 +69,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import Icon from '@/components/icons/Icon.vue'
-import type { DashboardStats } from '@/types/payment'
+import type { CurrencyAmounts, DashboardStats } from '@/types/payment'
 
 const { t } = useI18n()
 
@@ -71,7 +77,11 @@ defineProps<{
   stats: DashboardStats
 }>()
 
-function formatMoney(value: number): string {
-  return value.toFixed(2)
+function sortedAmounts(amounts: CurrencyAmounts): [string, number][] {
+  return Object.entries(amounts).sort(([left], [right]) => left.localeCompare(right))
+}
+
+function formatMoney(currency: string, amount: number): string {
+  return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(amount)
 }
 </script>

frontend/src/components/admin/payment/PaymentMethodChart.vue

@@ -18,20 +18,23 @@
               {{ t('payment.methods.' + method.type, method.type) }}
             </span>
           </div>
-          <div class="text-right">
-            <span class="text-sm font-medium text-gray-900 dark:text-white">
-              ${{ method.amount.toFixed(2) }}
+          <div class="space-y-1 text-right">
+            <span v-for="[currency, amount] in sortedAmounts(method.amount)" :key="currency" class="block text-sm font-medium text-gray-900 dark:text-white">
+              {{ formatMoney(currency, amount) }}
             </span>
             <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">
               ({{ method.count }})
             </span>
           </div>
         </div>
-        <div class="h-2 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-dark-700">
-          <div
-            :class="['h-full rounded-full transition-all', barColorMap[method.type] || 'bg-gray-400']"
-            :style="{ width: barWidth(method.amount) + '%' }"
-          ></div>
+        <div v-for="[currency, amount] in sortedAmounts(method.amount)" :key="currency" class="flex items-center gap-2">
+          <span class="w-10 text-xs text-gray-500 dark:text-gray-400">{{ currency }}</span>
+          <div class="h-2 flex-1 overflow-hidden rounded-full bg-gray-100 dark:bg-dark-700">
+            <div
+              :class="['h-full rounded-full transition-all', barColorMap[method.type] || 'bg-gray-400']"
+              :style="{ width: barWidth(currency, amount) + '%' }"
+            ></div>
+          </div>
         </div>
       </div>
     </div>
@@ -41,11 +44,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import type { CurrencyAmounts, PaymentMethodStats } from '@/types/payment'
 
 const { t } = useI18n()
 
 const props = defineProps<{
-  methods: { type: string; amount: number; count: number }[]
+  methods: PaymentMethodStats[]
 }>()
 
 const colorMap: Record<string, string> = {
@@ -64,12 +68,24 @@ const barColorMap: Record<string, string> = {
   stripe: 'bg-purple-500',
 }
 
-const maxAmount = computed(() => {
-  if (!props.methods?.length) return 1
-  return Math.max(...props.methods.map(m => m.amount), 1)
+const maxAmounts = computed<CurrencyAmounts>(() => {
+  return props.methods.reduce<CurrencyAmounts>((maximums, method) => {
+    for (const [currency, amount] of Object.entries(method.amount)) {
+      maximums[currency] = Math.max(maximums[currency] || 0, amount)
+    }
+    return maximums
+  }, {})
 })
 
-function barWidth(amount: number): number {
-  return Math.min((amount / maxAmount.value) * 100, 100)
+function sortedAmounts(amounts: CurrencyAmounts): [string, number][] {
+  return Object.entries(amounts).sort(([left], [right]) => left.localeCompare(right))
+}
+
+function barWidth(currency: string, amount: number): number {
+  return Math.min((amount / (maxAmounts.value[currency] || 1)) * 100, 100)
+}
+
+function formatMoney(currency: string, amount: number): string {
+  return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(amount)
 }
 </script>

frontend/src/components/admin/payment/TopUsersLeaderboard.vue

@@ -4,31 +4,34 @@
       {{ t('payment.admin.topUsers') }}
     </h3>
     <div
-      v-if="!users?.length"
+      v-if="!hasUsers(props.users)"
       class="flex h-32 items-center justify-center text-sm text-gray-500 dark:text-gray-400"
     >
       {{ t('payment.admin.noData') }}
     </div>
     <div v-else class="space-y-2">
-      <div
-        v-for="(user, idx) in users"
-        :key="user.user_id"
-        class="flex items-center justify-between rounded-lg px-3 py-2 hover:bg-gray-50 dark:hover:bg-dark-700"
-      >
-        <div class="flex items-center gap-3">
-          <span
-            :class="[
-              'flex h-6 w-6 items-center justify-center rounded-full text-xs font-bold',
-              rankClass(idx),
-            ]"
-          >
-            {{ idx + 1 }}
+      <div v-for="[currency, currencyUsers] in sortedUsers(props.users)" :key="currency" class="space-y-2">
+        <p class="text-xs font-semibold text-gray-500 dark:text-gray-400">{{ currency }}</p>
+        <div
+          v-for="(user, idx) in currencyUsers"
+          :key="user.user_id"
+          class="flex items-center justify-between rounded-lg px-3 py-2 hover:bg-gray-50 dark:hover:bg-dark-700"
+        >
+          <div class="flex items-center gap-3">
+            <span
+              :class="[
+                'flex h-6 w-6 items-center justify-center rounded-full text-xs font-bold',
+                rankClass(idx),
+              ]"
+            >
+              {{ idx + 1 }}
+            </span>
+            <span class="text-sm text-gray-700 dark:text-gray-300">{{ user.email }}</span>
+          </div>
+          <span class="text-sm font-medium text-gray-900 dark:text-white">
+            {{ formatMoney(currency, user.amount) }}
           </span>
-          <span class="text-sm text-gray-700 dark:text-gray-300">{{ user.email }}</span>
         </div>
-        <span class="text-sm font-medium text-gray-900 dark:text-white">
-          ${{ user.amount.toFixed(2) }}
-        </span>
       </div>
     </div>
   </div>
@@ -36,11 +39,12 @@
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import type { TopUserPaymentStats } from '@/types/payment'
 
 const { t } = useI18n()
 
-defineProps<{
-  users: { user_id: number; email: string; amount: number }[]
+const props = defineProps<{
+  users: Record<string, TopUserPaymentStats[]>
 }>()
 
 function rankClass(idx: number): string {
@@ -49,4 +53,16 @@ function rankClass(idx: number): string {
   if (idx === 2) return 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'
   return 'bg-gray-100 text-gray-500 dark:bg-dark-700 dark:text-gray-400'
 }
+
+function hasUsers(usersByCurrency: Record<string, TopUserPaymentStats[]>): boolean {
+  return Object.values(usersByCurrency).some(users => users.length > 0)
+}
+
+function sortedUsers(usersByCurrency: Record<string, TopUserPaymentStats[]>): [string, TopUserPaymentStats[]][] {
+  return Object.entries(usersByCurrency).sort(([left], [right]) => left.localeCompare(right))
+}
+
+function formatMoney(currency: string, amount: number): string {
+  return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(amount)
+}
 </script>

frontend/src/types/payment.ts

@@ -222,13 +222,33 @@ export interface CreateOrderResult {
   jsapi_payload?: WechatJSAPIPayload
 }
 
+export type CurrencyAmounts = Record<string, number>
+
+export interface DailyPaymentStats {
+  date: string
+  amount: CurrencyAmounts
+  count: number
+}
+
+export interface PaymentMethodStats {
+  type: string
+  amount: CurrencyAmounts
+  count: number
+}
+
+export interface TopUserPaymentStats {
+  user_id: number
+  email: string
+  amount: number
+}
+
 export interface DashboardStats {
-  today_amount: number
-  total_amount: number
+  today_amount: CurrencyAmounts
+  total_amount: CurrencyAmounts
   today_count: number
   total_count: number
-  avg_amount: number
-  daily_series: { date: string; amount: number; count: number }[]
-  payment_methods: { type: string; amount: number; count: number }[]
-  top_users: { user_id: number; email: string; amount: number }[]
+  avg_amount: CurrencyAmounts
+  daily_series: DailyPaymentStats[]
+  payment_methods: PaymentMethodStats[]
+  top_users: Record<string, TopUserPaymentStats[]>
 }

frontend/src/views/admin/orders/AdminPaymentDashboardView.vue

@@ -41,8 +41,8 @@
                   <span :class="['inline-block h-3 w-3 rounded-full', methodColor(method.type)]"></span>
                   <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('payment.methods.' + method.type, method.type) }}</span>
                 </div>
-                <div class="text-right">
-                  <span class="text-sm font-medium text-gray-900 dark:text-white">&yen;{{ method.amount.toFixed(2) }}</span>
+                <div class="space-y-1 text-right">
+                  <span v-for="[currency, amount] in sortedAmounts(method.amount)" :key="currency" class="block text-sm font-medium text-gray-900 dark:text-white">{{ formatMoney(currency, amount) }}</span>
                   <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">({{ method.count }})</span>
                 </div>
               </div>
@@ -50,14 +50,17 @@
           </div>
           <div class="card p-4">
             <h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">{{ t('payment.admin.topUsers') }}</h3>
-            <div v-if="!stats.top_users?.length" class="flex h-32 items-center justify-center text-sm text-gray-500 dark:text-gray-400">{{ t('payment.admin.noData') }}</div>
+            <div v-if="!hasTopUsers(stats.top_users)" class="flex h-32 items-center justify-center text-sm text-gray-500 dark:text-gray-400">{{ t('payment.admin.noData') }}</div>
             <div v-else class="space-y-2">
-              <div v-for="(user, idx) in stats.top_users" :key="user.user_id" class="flex items-center justify-between rounded-lg px-3 py-2 hover:bg-gray-50 dark:hover:bg-dark-700">
-                <div class="flex items-center gap-3">
-                  <span :class="['flex h-6 w-6 items-center justify-center rounded-full text-xs font-bold', rankClass(idx)]">{{ idx + 1 }}</span>
-                  <span class="text-sm text-gray-700 dark:text-gray-300">{{ user.email }}</span>
+              <div v-for="[currency, users] in sortedTopUsers(stats.top_users)" :key="currency" class="space-y-2">
+                <p class="text-xs font-semibold text-gray-500 dark:text-gray-400">{{ currency }}</p>
+                <div v-for="(user, idx) in users" :key="user.user_id" class="flex items-center justify-between rounded-lg px-3 py-2 hover:bg-gray-50 dark:hover:bg-dark-700">
+                  <div class="flex items-center gap-3">
+                    <span :class="['flex h-6 w-6 items-center justify-center rounded-full text-xs font-bold', rankClass(idx)]">{{ idx + 1 }}</span>
+                    <span class="text-sm text-gray-700 dark:text-gray-300">{{ user.email }}</span>
+                  </div>
+                  <span class="text-sm font-medium text-gray-900 dark:text-white">{{ formatMoney(currency, user.amount) }}</span>
                 </div>
-                <span class="text-sm font-medium text-gray-900 dark:text-white">&yen;{{ user.amount.toFixed(2) }}</span>
               </div>
             </div>
           </div>
@@ -73,7 +76,7 @@ import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
 import { adminPaymentAPI } from '@/api/admin/payment'
 import { extractI18nErrorMessage } from '@/utils/apiError'
-import type { DashboardStats } from '@/types/payment'
+import type { CurrencyAmounts, DashboardStats, TopUserPaymentStats } from '@/types/payment'
 import AppLayout from '@/components/layout/AppLayout.vue'
 import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
 import Icon from '@/components/icons/Icon.vue'
@@ -104,6 +107,22 @@ function rankClass(idx: number): string {
   return 'bg-gray-100 text-gray-500 dark:bg-dark-700 dark:text-gray-400'
 }
 
+function sortedAmounts(amounts: CurrencyAmounts): [string, number][] {
+  return Object.entries(amounts).sort(([left], [right]) => left.localeCompare(right))
+}
+
+function sortedTopUsers(usersByCurrency: Record<string, TopUserPaymentStats[]>): [string, TopUserPaymentStats[]][] {
+  return Object.entries(usersByCurrency).sort(([left], [right]) => left.localeCompare(right))
+}
+
+function hasTopUsers(usersByCurrency: Record<string, TopUserPaymentStats[]>): boolean {
+  return Object.values(usersByCurrency).some(users => users.length > 0)
+}
+
+function formatMoney(currency: string, amount: number): string {
+  return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(amount)
+}
+
 async function loadDashboard() {
   loading.value = true
   try {