some-improvement
This commit is contained in:
@@ -75,7 +75,7 @@ export default function Credits() {
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Current Balance</h3>
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
{(balance.balance ?? 0).toLocaleString()}
|
||||
{(balance?.credits ?? 0).toLocaleString()}
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Available credits</p>
|
||||
</Card>
|
||||
@@ -85,10 +85,10 @@ export default function Credits() {
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Subscription Plan</h3>
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
{balance.subscription_plan || 'None'}
|
||||
{(balance as any)?.subscription_plan || 'None'}
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
|
||||
{balance.monthly_credits ? `${balance.monthly_credits.toLocaleString()} credits/month` : 'No subscription'}
|
||||
{(balance?.plan_credits_per_month ?? 0) ? `${(balance?.plan_credits_per_month ?? 0).toLocaleString()} credits/month` : 'No subscription'}
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
@@ -97,13 +97,9 @@ export default function Credits() {
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Status</h3>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<Badge
|
||||
variant="light"
|
||||
color={balance.subscription_status === 'active' ? 'success' : 'secondary'}
|
||||
className="text-base font-semibold"
|
||||
>
|
||||
{balance.subscription_status || 'No subscription'}
|
||||
</Badge>
|
||||
<Badge variant="light" color={(balance as any)?.subscription_status === 'active' ? 'success' : 'secondary'} className="text-base font-semibold">
|
||||
{(balance as any)?.subscription_status || 'No subscription'}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Subscription status</p>
|
||||
</Card>
|
||||
|
||||
@@ -69,7 +69,7 @@ export default function Usage() {
|
||||
<Card className="p-6">
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Current Balance</h3>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
{balance.balance.toLocaleString()}
|
||||
{(balance?.credits ?? 0).toLocaleString()}
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Available credits</p>
|
||||
</Card>
|
||||
@@ -77,22 +77,19 @@ export default function Usage() {
|
||||
<Card className="p-6">
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Monthly Allocation</h3>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
{(balance.monthly_credits || 0).toLocaleString()}
|
||||
{(balance?.plan_credits_per_month ?? 0).toLocaleString()}
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
{balance.subscription_plan || 'No plan'}
|
||||
{ (balance as any)?.subscription_plan || 'No plan' }
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Status</h3>
|
||||
<div className="mt-2">
|
||||
<Badge
|
||||
variant="light"
|
||||
className="text-lg"
|
||||
>
|
||||
{balance.subscription_status || 'No subscription'}
|
||||
</Badge>
|
||||
<Badge variant="light" className="text-lg">
|
||||
{(balance as any)?.subscription_status || 'No subscription'}
|
||||
</Badge>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user