some-improvement

This commit is contained in:
IGNY8 VPS (Salman)
2025-12-05 05:38:58 +00:00
parent 6cf786b03f
commit d92a99ecc3
20 changed files with 376 additions and 3719 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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

View File

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