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

udpates

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-12 14:08:27 +00:00
parent 6e2101d019
commit f163a2e07d
14 changed files with 1324 additions and 677 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,11 @@ const CREDIT_COSTS: Record<string, { cost: number | string; description: string
site_page_generation: { cost: 20, description: 'Per page generated' },
};
export default function BillingUsagePanel() {
interface BillingUsagePanelProps {
showOnlyActivity?: boolean;
}
export default function BillingUsagePanel({ showOnlyActivity = false }: BillingUsagePanelProps) {
const toast = useToast();
const [transactions, setTransactions] = useState<BillingTransaction[]>([]);
const [loading, setLoading] = useState(true);
@@ -56,6 +60,72 @@ export default function BillingUsagePanel() {
);
}
// If only showing activity table, render just that
if (showOnlyActivity) {
return (
<div>
<Card className="p-6">
<div className="mb-6">
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Credit Activity</h2>
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
Complete history of credit transactions
</p>
</div>
<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>
{paginated.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="soft" tone={txn.amount >= 0 ? 'success' : 'danger'}>{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>
{transactions.length > 0 && (
<div className="mt-4 flex justify-between items-center">
<div className="text-sm text-gray-500 dark:text-gray-400">
Showing {(page - 1) * pageSize + 1}-{Math.min(page * pageSize, transactions.length)} of {transactions.length}
</div>
<CompactPagination
currentPage={page}
totalPages={totalPages}
pageSize={pageSize}
onPageChange={(p) => setPage(p)}
onPageSizeChange={(size) => {
setPageSize(size);
setPage(1);
}}
/>
</div>
)}
</Card>
</div>
);
}
return (
<div className="space-y-6">
{balance && (