95 lines
3.5 KiB
TypeScript
95 lines
3.5 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import PageMeta from '../../components/common/PageMeta';
|
|
import { useToast } from '../../components/ui/toast/ToastContainer';
|
|
import { fetchCreditBalance, CreditBalance } from '../../services/api';
|
|
import { Card } from '../../components/ui/card';
|
|
import Badge from '../../components/ui/badge/Badge';
|
|
|
|
export default function Credits() {
|
|
const toast = useToast();
|
|
const [balance, setBalance] = useState<CreditBalance | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
loadBalance();
|
|
}, []);
|
|
|
|
const loadBalance = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const data = await fetchCreditBalance();
|
|
setBalance(data);
|
|
} catch (error: any) {
|
|
toast.error(`Failed to load credit balance: ${error.message}`);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="p-6">
|
|
<PageMeta title="Credits" />
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-gray-500">Loading...</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<PageMeta title="Credits" />
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Credit Balance</h1>
|
|
<p className="text-gray-600 dark:text-gray-400 mt-1">Manage your AI credits and usage</p>
|
|
</div>
|
|
|
|
{balance && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 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.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">Monthly Allocation</h3>
|
|
</div>
|
|
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
|
{balance.plan_credits_per_month.toLocaleString()}
|
|
</div>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Credits per month</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">Used This Month</h3>
|
|
</div>
|
|
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
|
{balance.credits_used_this_month.toLocaleString()}
|
|
</div>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Credits consumed</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">Remaining</h3>
|
|
</div>
|
|
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
|
{balance.credits_remaining.toLocaleString()}
|
|
</div>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Credits remaining</p>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|