From 1f8fdad2da3128726d20d8110a07ccb45b9d7e3c Mon Sep 17 00:00:00 2001
From: lethdat <imdat2999@gmail.com>
Date: Tue, 24 Mar 2026 21:54:54 +0700
Subject: [PATCH] feat: enhance billing components with top-up functionality
 and payment history table

---
 src/routes/settings/Billing/Billing.vue       |  49 +----
 .../Billing/components/BillingTopupDialog.vue |  89 ++++++---
 .../Billing/components/PaymentHistory.tsx     | 177 +++++++++++-------
 3 files changed, 175 insertions(+), 140 deletions(-)

diff --git a/src/routes/settings/Billing/Billing.vue b/src/routes/settings/Billing/Billing.vue
index 9fb553b..701ed87 100644
--- a/src/routes/settings/Billing/Billing.vue
+++ b/src/routes/settings/Billing/Billing.vue
@@ -1,31 +1,23 @@
 <script setup lang="ts">
-import { client as rpcClient } from '@/api/rpcclient';
 import AppButton from '@/components/ui/AppButton.vue';
-import { useAppToast } from '@/composables/useAppToast';
 import { useUsageQuery } from '@/composables/useUsageQuery';
-import { getApiErrorMessage } from '@/lib/utils';
 import BillingTopupDialog from '@/routes/settings/Billing/components/BillingTopupDialog.vue';
 import BillingUsageSection from '@/routes/settings/Billing/components/BillingUsageSection.vue';
 import SettingsSectionCard from '@/routes/settings/components/SettingsSectionCard.vue';
 import type { Plan as ModelPlan } from '@/server/gen/proto/app/v1/common';
 import { useAuthStore } from '@/stores/auth';
-import { useTranslation } from 'i18next-vue';
 import { computed, ref } from 'vue';
 import SettingsRow from '../components/SettingsRow.vue';
 import PaymentHistory from './components/PaymentHistory';
 import PlanSelection from './components/PlanSelection';
 import UpgradePlan from './components/UpgradePlan';
 
-const toast = useAppToast();
 const auth = useAuthStore();
-const { t } = useTranslation();
 
 const { refetch: refetchUsage } = useUsageQuery();
 
 const topupDialogVisible = ref(false);
 const topupAmount = ref<number | null>(null);
-const topupLoading = ref(false);
-const topupPresets = [10, 20, 50, 100];
 
 const upgradeDialogVisible = ref(false);
 const selectedPlan = ref<ModelPlan | null>(null);
@@ -63,41 +55,11 @@ const handleUpgradeSuccess = async () => {
     await refreshBillingState();
 };
 
-const handleTopup = async (amount: number) => {
-    topupLoading.value = true;
-    try {
-        await rpcClient.topupWallet({ amount });
-        await refreshBillingState();
-
-        toast.add({
-            severity: 'success',
-            summary: t('settings.billing.toast.topupSuccessSummary'),
-            detail: t('settings.billing.toast.topupSuccessDetail', { amount: auth.formatMoney(amount) }),
-            life: 3000,
-        });
-        topupDialogVisible.value = false;
-        topupAmount.value = null;
-    } catch (error) {
-        console.error(error);
-        toast.add({
-            severity: 'error',
-            summary: t('settings.billing.toast.topupFailedSummary'),
-            detail: getApiErrorMessage(error, t('settings.billing.toast.topupFailedDetail')),
-            life: 5000,
-        });
-    } finally {
-        topupLoading.value = false;
-    }
-};
-
 const openTopupDialog = () => {
     topupAmount.value = null;
     topupDialogVisible.value = true;
 };
 
-const selectPreset = (amount: number) => {
-    topupAmount.value = amount;
-};
 </script>
 
 <template>
@@ -131,16 +93,7 @@ const selectPreset = (amount: number) => {
         <PaymentHistory />
     </SettingsSectionCard>
 
-    <BillingTopupDialog
-        :visible="topupDialogVisible"
-        :presets="topupPresets"
-        :amount="topupAmount"
-        :loading="topupLoading"
-        @update:visible="topupDialogVisible = $event"
-        @update:amount="topupAmount = $event"
-        @selectPreset="selectPreset"
-        @submit="handleTopup(topupAmount || 0)"
-    />
+    <BillingTopupDialog v-model="topupDialogVisible" />
 
     <UpgradePlan
         :visible="upgradeDialogVisible"
diff --git a/src/routes/settings/Billing/components/BillingTopupDialog.vue b/src/routes/settings/Billing/components/BillingTopupDialog.vue
index f06ce6c..8828762 100644
--- a/src/routes/settings/Billing/components/BillingTopupDialog.vue
+++ b/src/routes/settings/Billing/components/BillingTopupDialog.vue
@@ -1,28 +1,67 @@
 <script setup lang="ts">
+import { client } from '@/api/rpcclient';
 import CheckIcon from '@/components/icons/CheckIcon.vue';
 import AppButton from '@/components/ui/AppButton.vue';
 import AppDialog from '@/components/ui/AppDialog.vue';
 import AppInput from '@/components/ui/AppInput.vue';
+import { useAppToast } from '@/composables/useAppToast';
+import { useUsageQuery } from '@/composables/useUsageQuery';
+import { getApiErrorMessage } from '@/lib/utils';
+import { useAuthStore } from '@/stores/auth';
+import { useTranslation } from 'i18next-vue';
 
-defineProps<{
-    visible: boolean;
-    presets: number[];
-    amount: number | null;
-    loading: boolean;
-}>();
+const visible = defineModel<boolean>();
+const toast = useAppToast();
+const auth = useAuthStore();
+const { t } = useTranslation();
+const { refetch: refetchUsage } = useUsageQuery();
+
+const topupDialogVisible = ref(false);
+const topupAmount = ref<number | null>(null);
+const topupLoading = ref(false);
+const topupPresets = [10, 20, 50, 100];
+
+const refreshBillingState = async () => {
+    await Promise.allSettled([
+        auth.fetchMe(),
+        refetchUsage(),
+    ]);
+};
+
+const handleTopup = async (amount: number) => {
+    topupLoading.value = true;
+    try {
+        await client.topupWallet({ amount });
+        await refreshBillingState();
+
+        toast.add({
+            severity: 'success',
+            summary: t('settings.billing.toast.topupSuccessSummary'),
+            detail: t('settings.billing.toast.topupSuccessDetail', { amount: auth.formatMoney(amount) }),
+            life: 3000,
+        });
+        topupDialogVisible.value = false;
+        topupAmount.value = null;
+    } catch (error) {
+        console.error(error);
+        toast.add({
+            severity: 'error',
+            summary: t('settings.billing.toast.topupFailedSummary'),
+            detail: getApiErrorMessage(error, t('settings.billing.toast.topupFailedDetail')),
+            life: 5000,
+        });
+    } finally {
+        topupLoading.value = false;
+        visible.value = false;
+    }
+};
 
-const emit = defineEmits<{
-    (e: 'update:visible', value: boolean): void;
-    (e: 'update:amount', value: number | null): void;
-    (e: 'selectPreset', amount: number): void;
-    (e: 'submit'): void;
-}>();
 </script>
 
 <template>
     <AppDialog
-        :visible="visible"
-        @update:visible="emit('update:visible', $event)"
+        :visible="visible!"
+        @update:visible="visible = $event"
         :title="$t('settings.billing.topupDialog.title')"
         maxWidthClass="max-w-md"
     >
@@ -33,15 +72,15 @@ const emit = defineEmits<{
 
             <div class="grid grid-cols-4 gap-3">
                 <button
-                    v-for="preset in presets"
+                    v-for="preset in topupPresets"
                     :key="preset"
                     :class="[
                         'py-2 px-3 rounded-md bg-header text-sm font-medium transition-all hover:bg-gray-500',
-                        amount === preset
+                        topupAmount === preset
                             ? 'bg-primary text-white'
                             : 'bg-muted/50 text-foreground hover:bg-muted'
                     ]"
-                    @click="emit('selectPreset', preset)"
+                    @click="topupAmount = preset"
                 >
                     ${{ preset }}
                 </button>
@@ -52,15 +91,15 @@ const emit = defineEmits<{
                 <div class="flex items-center gap-2">
                     <span class="text-lg font-semibold text-foreground">$</span>
                     <AppInput
-                        :model-value="amount"
+                        :model-value="topupAmount"
                         type="number"
                         :placeholder="$t('settings.billing.topupDialog.enterAmount')"
                         inputClass="flex-1"
                         min="1"
                         step="1"
-                        @update:model-value="emit('update:amount', typeof $event === 'number' || $event === null
+                        @update:model-value="topupAmount = typeof $event === 'number' || $event === null
                             ? $event
-                            : ($event === '' ? null : Number($event)))"
+                            : ($event === '' ? null : Number($event))"
                     />
                 </div>
             </div>
@@ -75,16 +114,16 @@ const emit = defineEmits<{
                 <AppButton
                     variant="secondary"
                     size="sm"
-                    :disabled="loading"
-                    @click="emit('update:visible', false)"
+                    :disabled="topupLoading"
+                    @click="visible = false; topupAmount = null"
                 >
                     {{ $t('common.cancel') }}
                 </AppButton>
                 <AppButton
                     size="sm"
-                    :loading="loading"
-                    :disabled="!amount || amount < 1 || loading"
-                    @click="emit('submit')"
+                    :loading="topupLoading"
+                    :disabled="!topupAmount || topupAmount < 1 || topupLoading"
+                    @click="handleTopup(topupAmount!)"
                 >
                     <template #icon>
                         <CheckIcon class="w-4 h-4" />
diff --git a/src/routes/settings/Billing/components/PaymentHistory.tsx b/src/routes/settings/Billing/components/PaymentHistory.tsx
index a14fb26..d573a6b 100644
--- a/src/routes/settings/Billing/components/PaymentHistory.tsx
+++ b/src/routes/settings/Billing/components/PaymentHistory.tsx
@@ -1,12 +1,14 @@
 import { client } from "@/api/rpcclient";
 import DownloadIcon from "@/components/icons/DownloadIcon.vue";
 import ListIcon from "@/components/icons/ListIcon.vue";
+import BaseTable from "@/components/ui/BaseTable.vue";
 import { useAppToast } from "@/composables/useAppToast";
 import { getApiErrorMessage, getStatusStyles } from "@/lib/utils";
 import { PaymentHistoryItem } from "@/server/gen/proto/app/v1/common";
 import { useAuthStore } from "@/stores/auth";
 import { useQuery } from "@pinia/colada";
 import { useTranslation } from "i18next-vue";
+import type { ColumnDef } from "@tanstack/vue-table";
 
 const normalizeHistoryStatus = (status?: string) => {
     switch ((status || '').toLowerCase()) {
@@ -28,7 +30,7 @@ const normalizeHistoryStatus = (status?: string) => {
 
 const PaymentHistory = defineComponent({
     name: 'PaymentHistory',
-    setup(props, ctx) {
+    setup() {
         const auth = useAuthStore();
         const { t } = useTranslation();
         const toast = useAppToast();
@@ -75,7 +77,7 @@ const PaymentHistory = defineComponent({
             key: ['paymentHistory'],
             query: () => client.listPaymentHistory().then(res => (res.payments || []).map(mapHistoryItem)),
         });
-        
+
         const handleDownloadInvoice = async (item: PaymentHistoryItem) => {
             if (!item.id) return;
 
@@ -120,11 +122,87 @@ const PaymentHistory = defineComponent({
                 downloadingInvoiceId.value = null;
             }
         };
+
+        const columns: ColumnDef<ReturnType<typeof mapHistoryItem>>[] = [
+            {
+                accessorKey: 'date',
+                header:  t('settings.billing.table.date'),
+                cell: ({ getValue }) => (
+                    <p class="text-sm font-medium text-foreground">{getValue<string>()}</p>
+                ),
+                meta: {
+                    headerClass: 'col-span-3',
+                    cellClass: 'col-span-3',
+                },
+            },
+            {
+                accessorKey: 'amount',
+                header:  t('settings.billing.table.amount'),
+                cell: ({ row }) => (
+                    <p class="text-sm text-foreground">{auth.formatMoney(row.original.amount)}</p>
+                ),
+                meta: {
+                    headerClass: 'col-span-2',
+                    cellClass: 'col-span-2',
+                },
+            },
+            {
+                accessorKey: 'plan',
+                header:  t('settings.billing.table.plan'),
+                cell: ({ row }) => (
+                    <>
+                        <p class="text-sm text-foreground">{row.original.plan}</p>
+                        {row.original.details?.length ? (
+                            <p class="mt-1 text-xs text-foreground/60">
+                                {row.original.details.join(' · ')}
+                            </p>
+                        ) : null}
+                    </>
+                ),
+                meta: {
+                    headerClass: 'col-span-3',
+                    cellClass: 'col-span-3',
+                },
+            },
+            {
+                accessorKey: 'status',
+                header:  t('settings.billing.table.status'),
+                cell: ({ row }) => (
+                    <span class={`inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium ${getStatusStyles(row.original.status)}`}>
+                        {t('settings.billing.status.' + row.original.status)}
+                    </span>
+                ),
+                meta: {
+                    headerClass: 'col-span-2',
+                    cellClass: 'col-span-2',
+                },
+            },
+            {
+                accessorKey: 'invoice',
+                enableSorting: false,
+                header:  t('settings.billing.table.invoice'),
+                cell: ({ row }) => (
+                    <button
+                        class="flex items-center gap-2 px-3 py-1.5 text-sm text-foreground/70 hover:text-foreground hover:bg-muted/50 rounded-md transition-all disabled:opacity-60 disabled:cursor-wait"
+                        disabled={downloadingInvoiceId.value === row.original.id}
+                        onClick={() => handleDownloadInvoice(row.original as PaymentHistoryItem)}
+                    >
+                        <DownloadIcon class="w-4 h-4" />
+                        <span>{downloadingInvoiceId.value === row.original.id ? '...' : t('settings.billing.download')}</span>
+                    </button>
+                ),
+                meta: {
+                    headerClass: 'col-span-2 flex justify-center',
+                    cellClass: 'col-span-2 justify-center',
+                },
+            },
+        ];
+
         return () => (
             <div class="px-6 py-4">
                 <div class="flex items-center gap-4 mb-4">
-                    <div class="w-10 h-10 rounded-md bg-info/10 flex items-center justify-center shrink-0">
-                        <ListIcon class="w-6 h-6 text-info" />
+                    <div class="w-10 h-10 rounded-md bg-accent/10 flex items-center justify-center shrink-0">
+                        <ListIcon class="w-6 h-6 text-primary" />
                     </div>
                     <div>
                         <p class="text-sm font-medium text-foreground">{t('settings.billing.paymentHistory')}</p>
@@ -132,71 +210,36 @@ const PaymentHistory = defineComponent({
                     </div>
                 </div>
 
-                <div class="border border-border rounded-lg overflow-hidden">
-                    <div class="grid grid-cols-12 gap-4 px-4 py-3 text-xs font-medium text-foreground/60 uppercase tracking-wider bg-muted/30">
-                        <div class="col-span-3">{t('settings.billing.table.date')}</div>
-                        <div class="col-span-2">{t('settings.billing.table.amount')}</div>
-                        <div class="col-span-3">{t('settings.billing.table.plan')}</div>
-                        <div class="col-span-2">{t('settings.billing.table.status')}</div>
-                        <div class="col-span-2 text-right">{t('settings.billing.table.invoice')}</div>
-                    </div>
-                    {isLoading.value && (<div class="px-4 py-6 space-y-3">
-                        {Array.from({ length: 3 }).map((_, index) => (
-                            <div key={index} class="grid grid-cols-12 gap-4 items-center animate-pulse">
-                                <div class="col-span-3 h-4 rounded bg-muted/50" />
-                                <div class="col-span-2 h-4 rounded bg-muted/50" />
-                                <div class="col-span-3 h-4 rounded bg-muted/50" />
-                                <div class="col-span-2 h-6 rounded bg-muted/50" />
-                                <div class="col-span-2 h-8 rounded bg-muted/50" />
+                <BaseTable
+                    data={data.value || []}
+                    columns={columns}
+                    loading={isLoading.value}
+                    emptyText={t('settings.billing.noPaymentHistory')}
+                >
+                    {{
+                        loading: () => (
+                            <div class="px-4 py-6 space-y-3">
+                                {Array.from({ length: 3 }).map((_, index) => (
+                                    <div key={index} class="grid grid-cols-12 gap-4 items-center animate-pulse">
+                                        <div class="col-span-3 h-4 rounded bg-muted/50" />
+                                        <div class="col-span-2 h-4 rounded bg-muted/50" />
+                                        <div class="col-span-3 h-4 rounded bg-muted/50" />
+                                        <div class="col-span-2 h-6 rounded bg-muted/50" />
+                                        <div class="col-span-2 h-8 rounded bg-muted/50" />
+                                    </div>
+                                ))}
                             </div>
-                        ))}
-                    </div>)}
-                    {data.value?.length === 0 && !isLoading.value && (<div class="text-center py-12 text-foreground/60">
-                        <div class="w-16 h-16 rounded-full bg-muted/50 flex items-center justify-center mx-auto mb-4">
-                            <DownloadIcon class="w-8 h-8 text-foreground/40" />
-                        </div>
-                        <p>{t('settings.billing.noPaymentHistory')}</p>
-                    </div>)}
-
-                    {data.value?.map((item) => (
-                        <div
-                            key={item.id}
-                            class="grid grid-cols-12 gap-4 px-4 py-3 items-center hover:bg-muted/30 transition-all border-t border-border"
-                        >
-                            <div class="col-span-3">
-                                <p class="text-sm font-medium text-foreground">{item.date}</p>
+                        ),
+                        empty: () => (
+                            <div class="text-center py-12 text-foreground/60">
+                                <div class="w-16 h-16 rounded-full bg-muted/50 flex items-center justify-center mx-auto mb-4">
+                                    <DownloadIcon class="w-8 h-8 text-foreground/40" />
+                                </div>
+                                <p>{t('settings.billing.noPaymentHistory')}</p>
                             </div>
-                            <div class="col-span-2">
-                                <p class="text-sm text-foreground">{auth.formatMoney(item.amount)}</p>
-                            </div>
-                            <div class="col-span-3">
-                                <p class="text-sm text-foreground">{item.plan}</p>
-                                {
-                                    item.details?.length ? (
-                                        <p class="mt-1 text-xs text-foreground/60">
-                                            {item.details.join(' · ')}
-                                        </p>
-                                    ) : null
-                                }
-                            </div>
-                            <div class="col-span-2">
-                                <span class={`inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium ${getStatusStyles(item.status)}`}>
-                                    {t('settings.billing.status.' + item.status)}
-                                </span>
-                            </div>
-                            <div class="col-span-2 flex justify-end">
-                                <button
-                                    class="flex items-center gap-2 px-3 py-1.5 text-sm text-foreground/70 hover:text-foreground hover:bg-muted/50 rounded-md transition-all disabled:opacity-60 disabled:cursor-wait"
-                                    disabled={downloadingInvoiceId.value === item.id}
-                                    onClick={() => handleDownloadInvoice(item)}
-                                >
-                                    <DownloadIcon class="w-4 h-4" />
-                                    <span>{downloadingInvoiceId.value === item.id ? '...' : t('settings.billing.download')}</span>
-                                </button>
-                            </div>
-                        </div>
-                    ))}
-                </div>
+                        )
+                    }}
+                </BaseTable>
             </div>
         );
     }