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

many fixes

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-06 14:31:42 +00:00
parent 4a16a6a402
commit c455a5ad83
21 changed files with 1497 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/components/billing/BillingUsagePanel.tsx
View File

@@ -1,6 +1,7 @@
import { useState, useEffect } from 'react';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { getCreditTransactions, getCreditBalance, CreditTransaction as BillingTransaction, CreditBalance } from '../../services/billing.api';
import { getCreditTransactions, CreditTransaction as BillingTransaction } from '../../services/billing.api';
import { useBillingStore } from '../../store/billingStore';
import { Card } from '../../components/ui/card';
import Badge from '../../components/ui/badge/Badge';
import { CompactPagination } from '../ui/pagination';
@@ -21,24 +22,22 @@ const CREDIT_COSTS: Record<string, { cost: number | string; description: string
export default function BillingUsagePanel() {
const toast = useToast();
const [transactions, setTransactions] = useState<BillingTransaction[]>([]);
const [balance, setBalance] = useState<CreditBalance | null>(null);
const [loading, setLoading] = useState(true);
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const { balance, usageLimits, loadBalance, loadUsageLimits } = useBillingStore();
useEffect(() => {
loadUsage();
}, []);
loadBalance();
loadUsageLimits();
}, [loadBalance, loadUsageLimits]);
const loadUsage = async () => {
try {
setLoading(true);
const [txnData, balanceData] = await Promise.all([
getCreditTransactions(),
getCreditBalance()
]);
const txnData = await getCreditTransactions();
setTransactions(txnData.results || []);
setBalance(balanceData as any);
} catch (error: any) {
toast.error(`Failed to load credit usage: ${error.message}`);
} finally {
@@ -90,6 +89,38 @@ export default function BillingUsagePanel() {
</div>
)}
{usageLimits && (
<Card className="p-6">
<h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Plan Limits</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="p-4 rounded-lg border border-gray-200 dark:border-gray-700">
<div className="text-sm text-gray-600 dark:text-gray-400">Monthly Credits</div>
<div className="text-2xl font-bold text-gray-900 dark:text-white">
{usageLimits.plan_credits_per_month?.toLocaleString?.() || 0}
</div>
<div className="text-sm text-gray-500 dark:text-gray-400">
{usageLimits.credits_used_this_month?.toLocaleString?.() || 0} used
</div>
</div>
<div className="p-4 rounded-lg border border-gray-200 dark:border-gray-700">
<div className="text-sm text-gray-600 dark:text-gray-400">Remaining</div>
<div className="text-2xl font-bold text-gray-900 dark:text-white">
{usageLimits.credits_remaining?.toLocaleString?.() || 0}
</div>
{usageLimits.approaching_limit && (
<div className="text-sm text-amber-600 dark:text-amber-400 mt-1">Approaching limit</div>
)}
</div>
<div className="p-4 rounded-lg border border-gray-200 dark:border-gray-700">
<div className="text-sm text-gray-600 dark:text-gray-400">Usage %</div>
<div className="text-2xl font-bold text-gray-900 dark:text-white">
{usageLimits.percentage_used?.toFixed?.(0) || 0}%
</div>
</div>
</div>
</Card>
)}
<Card className="p-6">
<h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Credit Costs per Operation</h2>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Understanding how credits are consumed for each operation type</p>