salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

billing accoutn with all the mess here

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-05 03:59:54 +00:00
parent 6b291671bd
commit 6cf786b03f
41 changed files with 7257 additions and 685 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/pages/Billing/Credits.tsx
View File

@@ -1,9 +1,12 @@
import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import PageMeta from '../../components/common/PageMeta';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { fetchCreditBalance, CreditBalance } from '../../services/api';
import { getCreditBalance, CreditBalance } from '../../services/billing.api';
import { Card } from '../../components/ui/card';
import Badge from '../../components/ui/badge/Badge';
import Button from '../../components/ui/button/Button';
import { DollarLineIcon } from '../../icons';
// Credit costs per operation (Phase 0: Credit-only system)
const CREDIT_COSTS: Record<string, { cost: number | string; description: string }> = {
@@ -30,7 +33,7 @@ export default function Credits() {
const loadBalance = async () => {
try {
setLoading(true);
const data = await fetchCreditBalance();
const data = await getCreditBalance();
setBalance(data);
} catch (error: any) {
toast.error(`Failed to load credit balance: ${error.message}`);
@@ -53,51 +56,56 @@ export default function Credits() {
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 className="flex items-center justify-between mb-6">
<div>
<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>
<Link to="/account/purchase-credits">
<Button variant="primary" startIcon={<DollarLineIcon className="w-4 h-4" />}>
Purchase Credits
</Button>
</Link>
</div>
{balance && (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<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()}
{(balance.balance ?? 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">Monthly Allocation</h3>
<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.plan_credits_per_month ?? 0).toLocaleString()}
{balance.subscription_plan || 'None'}
</div>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Credits per month</p>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
{balance.monthly_credits ? `${balance.monthly_credits.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">Used This Month</h3>
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Status</h3>
</div>
<div className="text-3xl font-bold text-gray-900 dark:text-white">
{(balance.credits_used_this_month ?? 0).toLocaleString()}
<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>
</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 ?? 0).toLocaleString()}
</div>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Credits remaining</p>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Subscription status</p>
</Card>
</div>
)}