96 lines
3.7 KiB
TypeScript
96 lines
3.7 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import PageMeta from '../../components/common/PageMeta';
|
|
import { Card } from '../../components/ui/card';
|
|
import Badge from '../../components/ui/badge/Badge';
|
|
import Button from '../../components/ui/button/Button';
|
|
import { DollarLineIcon } from '../../icons';
|
|
import { useBillingStore } from '../../store/billingStore';
|
|
|
|
export default function BillingBalancePanel() {
|
|
const { balance, loading, error, loadBalance } = useBillingStore();
|
|
|
|
useEffect(() => {
|
|
loadBalance();
|
|
}, [loadBalance]);
|
|
|
|
if (loading && !balance) {
|
|
return (
|
|
<div className="p-4">
|
|
<div className="text-gray-500">Loading credit balance...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="p-4 space-y-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div>
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Credit Balance</h2>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">Manage your AI credits and subscription status</p>
|
|
</div>
|
|
<Link to="/account/purchase-credits">
|
|
<Button variant="primary" startIcon={<DollarLineIcon className="w-4 h-4" />}>
|
|
Purchase Credits
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
{error && !balance && (
|
|
<div className="p-4 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200">
|
|
Balance unavailable. {error}
|
|
<div className="mt-3">
|
|
<Button variant="outline" size="sm" onClick={loadBalance}>
|
|
Retry
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{balance && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<Card className="p-6">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<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?.credits ?? 0).toLocaleString()}
|
|
</div>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Available credits</p>
|
|
</Card>
|
|
|
|
<Card className="p-6">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<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 as any)?.subscription_plan || 'None'}
|
|
</div>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
|
|
{(balance?.plan_credits_per_month ?? 0) ? `${(balance?.plan_credits_per_month ?? 0).toLocaleString()} credits/month` : 'No subscription'}
|
|
</p>
|
|
</Card>
|
|
|
|
<Card className="p-6">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<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 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>
|
|
</div>
|
|
)}
|
|
|
|
{error && balance && (
|
|
<div className="text-sm text-amber-600 dark:text-amber-400">
|
|
Latest balance may be stale: {error}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|