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

116
frontend/src/pages/account/AccountBillingPage.tsx
View File

@@ -14,6 +14,8 @@ import {
CheckCircle,
XCircle,
Clock,
DollarSign,
TrendingUp,
} from 'lucide-react';
import {
getInvoices,
@@ -24,6 +26,7 @@ import {
type Payment,
type CreditBalance,
} from '../../services/billing.api';
import { Card } from '../../components/ui/card';
type TabType = 'overview' | 'invoices' | 'payments';
@@ -53,6 +56,7 @@ export default function AccountBillingPage() {
setPayments(paymentsRes.results);
} catch (err: any) {
setError(err.message || 'Failed to load billing data');
console.error('Billing data load error:', err);
} finally {
setLoading(false);
}
@@ -153,65 +157,81 @@ export default function AccountBillingPage() {
{/* Overview Tab */}
{activeTab === 'overview' && creditBalance && (
<div className="space-y-6">
{/* Credit Balance Card */}
<div className="bg-gradient-to-r from-blue-600 to-blue-700 rounded-lg shadow-lg p-6 text-white">
<div className="flex items-center justify-between">
<div>
<div className="text-sm opacity-90 mb-1">Current Balance</div>
<div className="text-4xl font-bold">
{creditBalance.balance.toLocaleString()}
</div>
<div className="text-sm opacity-90">credits</div>
{/* Stats Cards */}
<div className="grid grid-cols-1 md: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>
<CreditCard className="w-5 h-5 text-blue-600" />
</div>
<CreditCard className="w-16 h-16 opacity-20" />
</div>
<div className="text-3xl font-bold text-gray-900 dark:text-white">
{creditBalance?.credits?.toLocaleString() || '0'}
</div>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">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>
<TrendingUp className="w-5 h-5 text-green-600" />
</div>
<div className="text-3xl font-bold text-gray-900 dark:text-white">
{creditBalance?.plan_credits_per_month?.toLocaleString() || '0'}
</div>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">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>
<DollarSign className="w-5 h-5 text-red-600" />
</div>
<div className="text-3xl font-bold text-red-600 dark:text-red-400">
{creditBalance?.credits_used_this_month?.toLocaleString() || '0'}
</div>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Credits consumed</p>
</Card>
</div>
{/* Plan Info */}
{/* Quick Actions */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="bg-white rounded-lg shadow p-6">
<h3 className="text-lg font-semibold mb-4">Current Plan</h3>
<div className="space-y-3">
<div className="flex justify-between">
<span className="text-gray-600">Plan:</span>
<span className="font-semibold">{creditBalance.subscription_plan}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Monthly Credits:</span>
<span className="font-semibold">
{creditBalance.monthly_credits.toLocaleString()}
</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Status:</span>
<span>
{getStatusBadge(creditBalance.subscription_status || 'active')}
</span>
</div>
<Card className="p-6">
<h3 className="text-lg font-semibold mb-4">Quick Actions</h3>
<div className="space-y-2">
<Link
to="/account/purchase-credits"
className="block w-full bg-blue-600 text-white text-center py-2 px-4 rounded hover:bg-blue-700 transition-colors"
>
Purchase Credits
</Link>
<Link
to="/account/usage"
className="block w-full bg-gray-100 text-gray-700 text-center py-2 px-4 rounded hover:bg-gray-200 transition-colors"
>
View Usage Analytics
</Link>
</div>
</div>
</Card>
<div className="bg-white rounded-lg shadow p-6">
<h3 className="text-lg font-semibold mb-4">Recent Activity</h3>
<Card className="p-6">
<h3 className="text-lg font-semibold mb-4">Account Summary</h3>
<div className="space-y-3">
<div className="text-sm">
<div className="text-gray-600">Total Invoices:</div>
<div className="text-2xl font-bold">{invoices.length}</div>
<div className="flex justify-between">
<span className="text-gray-600">Remaining Credits:</span>
<span className="font-semibold">{creditBalance?.credits_remaining?.toLocaleString() || '0'}</span>
</div>
<div className="text-sm">
<div className="text-gray-600">Paid Invoices:</div>
<div className="text-2xl font-bold text-green-600">
{invoices.filter((i) => i.status === 'paid').length}
</div>
<div className="flex justify-between">
<span className="text-gray-600">Total Invoices:</span>
<span className="font-semibold">{invoices.length}</span>
</div>
<div className="text-sm">
<div className="text-gray-600">Pending Payments:</div>
<div className="text-2xl font-bold text-yellow-600">
{payments.filter((p) => p.status === 'pending_approval').length}
</div>
<div className="flex justify-between">
<span className="text-gray-600">Paid Invoices:</span>
<span className="font-semibold text-green-600">
{invoices.filter(inv => inv.status === 'paid').length}
</span>
</div>
</div>
</div>
</Card>
</div>
</div>
)}