From 0eb754b1e14ac9e40a791339d59c096c92ea4db7 Mon Sep 17 00:00:00 2001
From: chenchen <chenchen@xinghanlab.com>
Date: Wed, 3 Jun 2026 11:08:45 +0800
Subject: [PATCH] =?UTF-8?q?refactor(web):=20Overview=20usage=20reuses=20Wa?=
 =?UTF-8?q?lletStatsCard=20(same=20as=20=E6=A8=A1=E5=9E=8B=E4=B8=8E?=
 =?UTF-8?q?=E4=BD=99=E9=A2=9D)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The wallet page already renders Current Balance / Total Usage / API Requests
from /api/user/self. Reuse that exact component (WalletStatsCard) on the
Overview instead of a hand-written block — DRY, identical numbers
($160.47 / $39.53 / 521 for the current user).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../dashboard/components/cockpit/index.tsx    | 44 +++++--------------
 1 file changed, 11 insertions(+), 33 deletions(-)

diff --git a/heicode/web/default/src/features/dashboard/components/cockpit/index.tsx b/heicode/web/default/src/features/dashboard/components/cockpit/index.tsx
index b6b5eed..67b0584 100644
--- a/heicode/web/default/src/features/dashboard/components/cockpit/index.tsx
+++ b/heicode/web/default/src/features/dashboard/components/cockpit/index.tsx
@@ -3,32 +3,30 @@ import { useQuery } from '@tanstack/react-query'
 import { Link } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
 import {
-  Activity,
   AlertTriangle,
   ArrowUpRight,
   Building2,
   CheckCircle2,
   CircleDashed,
-  Coins,
   PlayCircle,
   Rocket,
   ScrollText,
-  Wallet,
 } from 'lucide-react'
 import { api } from '@/lib/api'
-import { formatQuota } from '@/lib/format'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import {
   listAgentDeployments,
   type AgentDeployment,
 } from '@/features/agent-console/api'
+import { WalletStatsCard } from '@/features/wallet/components/wallet-stats-card'
+import type { UserWalletData } from '@/features/wallet/types'
 
-// Current user's own lifetime usage (NOT the admin-global aggregate).
-type SelfUsage = { quota?: number; used_quota?: number; request_count?: number }
-async function getSelfUsage(): Promise<SelfUsage> {
-  const res = await api.get<{ data?: SelfUsage }>('/api/user/self')
-  return res.data?.data ?? {}
+// Current user's OWN balance/usage (NOT the admin-global aggregate) — same
+// source the 模型与余额 page uses.
+async function getSelfUsage(): Promise<UserWalletData> {
+  const res = await api.get<{ data?: UserWalletData }>('/api/user/self')
+  return res.data?.data ?? ({} as UserWalletData)
 }
 
 type StatusKey = 'running' | 'success' | 'failed' | 'pending'
@@ -162,7 +160,6 @@ export function CockpitView() {
     refetchInterval: 60_000,
     retry: false,
   })
-  const self = selfQuery.data ?? {}
 
   const stats = useMemo(() => {
     const list: AgentDeployment[] = deploymentsQuery.data ?? []
@@ -238,29 +235,10 @@ export function CockpitView() {
         <p className='text-muted-foreground mb-2 text-[11px] font-semibold tracking-[0.16em] uppercase'>
           {t('Usage & cost')}
         </p>
-        <div className='grid grid-cols-2 gap-3 lg:grid-cols-3'>
-          <StatCard
-            label={t('Used')}
-            value={formatQuota(self.used_quota ?? 0)}
-            hint={t('Your total spend so far')}
-            icon={Coins}
-            tone='primary'
-          />
-          <StatCard
-            label={t('Remaining quota')}
-            value={formatQuota(self.quota ?? 0)}
-            hint={t('Balance available')}
-            icon={Wallet}
-            tone='success'
-          />
-          <StatCard
-            label={t('Requests')}
-            value={String(self.request_count ?? 0)}
-            hint={t('Your total requests')}
-            icon={Activity}
-            tone='warn'
-          />
-        </div>
+        <WalletStatsCard
+          user={selfQuery.data ?? null}
+          loading={selfQuery.isLoading}
+        />
       </div>
 
       {/* Tier 2: Stream */}