some-improvement
This commit is contained in:
IGNY8 VPS (Salman)
94
frontend/src/components/billing/BillingBalancePanel.tsx
Normal file
94
frontend/src/components/billing/BillingBalancePanel.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
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 { getCreditBalance } 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';
|
||||
|
||||
export default function BillingBalancePanel() {
|
||||
const toast = useToast();
|
||||
const [balance, setBalance] = useState<any | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
loadBalance();
|
||||
}, []);
|
||||
|
||||
const loadBalance = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await getCreditBalance();
|
||||
setBalance(data as any);
|
||||
} catch (error: any) {
|
||||
toast.error(`Failed to load credit balance: ${error?.message || error}`);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
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>
|
||||
|
||||
{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>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import ComponentCard from '../../components/common/ComponentCard';
|
||||
import Badge from '../../components/ui/badge/Badge';
|
||||
import { useToast } from '../../components/ui/toast/ToastContainer';
|
||||
import { getCreditTransactions, type CreditTransaction } from '../../services/billing.api';
|
||||
|
||||
export default function BillingRecentTransactions({ limit = 10 }: { limit?: number }) {
|
||||
const toast = useToast();
|
||||
const [transactions, setTransactions] = useState<CreditTransaction[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, []);
|
||||
|
||||
const load = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await getCreditTransactions();
|
||||
setTransactions(res.results || []);
|
||||
} catch (err: any) {
|
||||
toast?.error(err?.message || 'Failed to load transactions');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getTransactionTypeColor = (type: string) => {
|
||||
switch (type) {
|
||||
case 'purchase': return 'success';
|
||||
case 'grant': return 'info';
|
||||
case 'deduction': return 'warning';
|
||||
case 'usage': return 'error';
|
||||
case 'refund': return 'primary';
|
||||
case 'adjustment': return 'secondary';
|
||||
default: return 'default';
|
||||
}
|
||||
};
|
||||
|
||||
const formatOperationType = (type: string) => {
|
||||
return type.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<ComponentCard title="Recent Transactions">
|
||||
<div className="text-center py-8 text-gray-500">Loading...</div>
|
||||
</ComponentCard>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ComponentCard title="Recent Transactions">
|
||||
<div className="space-y-3">
|
||||
{transactions.slice(0, limit).map((transaction) => (
|
||||
<div key={transaction.id} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge tone={getTransactionTypeColor(transaction.transaction_type) as any}>
|
||||
{formatOperationType(transaction.transaction_type)}
|
||||
</Badge>
|
||||
<span className="text-sm text-gray-900 dark:text-white">
|
||||
{transaction.description}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
{new Date(transaction.created_at).toLocaleString()}
|
||||
{transaction.reference_id && ` • Ref: ${transaction.reference_id}`}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className={`font-bold ${transaction.amount > 0 ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{transaction.amount > 0 ? '+' : ''}{transaction.amount}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{transactions.length === 0 && (
|
||||
<div className="text-center py-8 text-gray-500 dark:text-gray-400">No transactions yet</div>
|
||||
)}
|
||||
</div>
|
||||
</ComponentCard>
|
||||
);
|
||||
}
|
||||
151
frontend/src/components/billing/BillingUsagePanel.tsx
Normal file
151
frontend/src/components/billing/BillingUsagePanel.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useToast } from '../../components/ui/toast/ToastContainer';
|
||||
import { getCreditTransactions, getCreditBalance, CreditTransaction as BillingTransaction, CreditBalance } from '../../services/billing.api';
|
||||
import { Card } from '../../components/ui/card';
|
||||
import Badge from '../../components/ui/badge/Badge';
|
||||
|
||||
// Credit costs per operation (copied from Billing usage page)
|
||||
const CREDIT_COSTS: Record<string, { cost: number | string; description: string }> = {
|
||||
clustering: { cost: 10, description: 'Per clustering request' },
|
||||
idea_generation: { cost: 15, description: 'Per cluster → ideas request' },
|
||||
content_generation: { cost: '1 per 100 words', description: 'Per 100 words generated' },
|
||||
image_prompt_extraction: { cost: 2, description: 'Per content piece' },
|
||||
image_generation: { cost: 5, description: 'Per image generated' },
|
||||
linking: { cost: 8, description: 'Per content piece' },
|
||||
optimization: { cost: '1 per 200 words', description: 'Per 200 words optimized' },
|
||||
site_structure_generation: { cost: 50, description: 'Per site blueprint' },
|
||||
site_page_generation: { cost: 20, description: 'Per page generated' },
|
||||
};
|
||||
|
||||
export default function BillingUsagePanel() {
|
||||
const toast = useToast();
|
||||
const [transactions, setTransactions] = useState<BillingTransaction[]>([]);
|
||||
const [balance, setBalance] = useState<CreditBalance | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
loadUsage();
|
||||
}, []);
|
||||
|
||||
const loadUsage = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const [txnData, balanceData] = await Promise.all([
|
||||
getCreditTransactions(),
|
||||
getCreditBalance()
|
||||
]);
|
||||
setTransactions(txnData.results || []);
|
||||
setBalance(balanceData as any);
|
||||
} catch (error: any) {
|
||||
toast.error(`Failed to load credit usage: ${error.message}`);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="p-4">
|
||||
<div className="text-gray-500">Loading credit usage...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{balance && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||||
<Card className="p-6">
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Current Balance</h3>
|
||||
<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-1">Available credits</p>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Monthly Allocation</h3>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
{(balance?.plan_credits_per_month ?? 0).toLocaleString()}
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
{(balance as any)?.subscription_plan || 'No plan'}
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Status</h3>
|
||||
<div className="mt-2">
|
||||
<Badge variant="light" className="text-lg">
|
||||
{(balance as any)?.subscription_status || 'No subscription'}
|
||||
</Badge>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{Object.entries(CREDIT_COSTS).map(([operation, info]) => (
|
||||
<div key={operation} className="flex items-start justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-gray-900 dark:text-white capitalize">
|
||||
{operation.replace(/_/g, ' ')}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||
{info.description}
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-4 text-right">
|
||||
<Badge variant="light" color="primary" className="font-semibold">
|
||||
{typeof info.cost === 'number' ? `${info.cost} credits` : info.cost}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Credit Activity</h2>
|
||||
<Card className="p-6">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-200 dark:border-gray-700">
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Date</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Type</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Amount</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Description</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Reference</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{transactions.map((txn) => (
|
||||
<tr key={txn.id} className="border-b border-gray-100 dark:border-gray-800">
|
||||
<td className="py-3 px-4 text-sm text-gray-900 dark:text-white">{new Date(txn.created_at).toLocaleString()}</td>
|
||||
<td className="py-3 px-4">
|
||||
<Badge variant="light" color={txn.amount >= 0 ? 'success' : 'error'}>{txn.transaction_type}</Badge>
|
||||
</td>
|
||||
<td className={`py-3 px-4 text-sm font-medium ${txn.amount >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
|
||||
{txn.amount >= 0 ? '+' : ''}{txn.amount}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">{txn.description}</td>
|
||||
<td className="py-3 px-4 text-sm text-gray-500 dark:text-gray-500">{txn.reference_id || '-'}</td>
|
||||
</tr>
|
||||
))}
|
||||
{transactions.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={5} className="py-8 text-center text-gray-500 dark:text-gray-400">No transactions yet</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user