some-improvement

frontend/src/pages/account/AccountBillingPage.tsx

@@ -27,6 +27,7 @@ import {
   type CreditBalance,
 } from '../../services/billing.api';
 import { Card } from '../../components/ui/card';
+import BillingRecentTransactions from '../../components/billing/BillingRecentTransactions';
 
 type TabType = 'overview' | 'invoices' | 'payments';
 
@@ -113,6 +114,11 @@ export default function AccountBillingPage() {
         <div className="flex items-center justify-between mb-6">
           <div>
             <h1 className="text-3xl font-bold">Plans & Billing</h1>
+            {/* Recent Transactions (moved from Credits & Billing overview) */}
+            <div>
+              <BillingRecentTransactions />
+            </div>
+
             <p className="text-gray-600">Manage your subscription, credits, and billing</p>
           </div>
           <Link

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>
         )}