some-improvement

frontend/src/pages/account/UsageAnalyticsPage.tsx

@@ -10,6 +10,8 @@ import { useToast } from '../../components/ui/toast/ToastContainer';
 import { getUsageAnalytics, UsageAnalytics } from '../../services/billing.api';
 import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
+import BillingUsagePanel from '../../components/billing/BillingUsagePanel';
+import BillingBalancePanel from '../../components/billing/BillingBalancePanel';
 
 type TabType = 'credits' | 'api' | 'costs';
 
@@ -49,6 +51,7 @@ export default function UsageAnalyticsPage() {
 
   const tabs = [
     { id: 'credits' as TabType, label: 'Credit Usage', icon: <TrendingUp className="w-4 h-4" /> },
+    { id: 'balance' as TabType, label: 'Credit Balance', icon: <DollarSign className="w-4 h-4" /> },
     { id: 'api' as TabType, label: 'API Usage', icon: <Activity className="w-4 h-4" /> },
     { id: 'costs' as TabType, label: 'Cost Breakdown', icon: <DollarSign className="w-4 h-4" /> },
   ];
@@ -181,6 +184,17 @@ export default function UsageAnalyticsPage() {
                 )}
               </div>
             </Card>
+            {/* Insert Billing usage panel below current credit-analytics content */}
+            <div className="mt-6">
+              <BillingUsagePanel />
+            </div>
+          </div>
+        )}
+
+        {/* Credit Balance Tab (billing/credits moved here) */}
+        {activeTab === 'balance' && (
+          <div className="space-y-6">
+            <BillingBalancePanel />
           </div>
         )}