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

146
frontend/src/pages/account/UsageAnalyticsPage.tsx
View File

@@ -1,6 +1,6 @@
/**
* Usage & Analytics Page
* Tabs: Plan Limits, Credit Usage, API Usage, Cost Breakdown
* Tabs: Limits & Usage, API Usage
*/
import { useState, useEffect } from 'react';
@@ -15,7 +15,7 @@ import BillingBalancePanel from '../../components/billing/BillingBalancePanel';
import UsageLimitsPanel from '../../components/billing/UsageLimitsPanel';
import Button from '../../components/ui/button/Button';
type TabType = 'limits' | 'credits' | 'balance' | 'api' | 'costs';
type TabType = 'limits' | 'api' | 'activity';
export default function UsageAnalyticsPage() {
const toast = useToast();
@@ -52,11 +52,9 @@ export default function UsageAnalyticsPage() {
}
const tabs = [
{ id: 'limits' as TabType, label: 'Plan Limits', icon: <BarChart3 className="w-4 h-4" /> },
{ id: 'credits' as TabType, label: 'Credit Usage', icon: <TrendingUp className="w-4 h-4" /> },
{ id: 'balance' as TabType, label: 'Credit Balance', icon: <DollarSign className="w-4 h-4" /> },
{ id: 'limits' as TabType, label: 'Limits & Usage', icon: <BarChart3 className="w-4 h-4" /> },
{ id: 'activity' as TabType, label: 'Activity', icon: <TrendingUp className="w-4 h-4" /> },
{ id: 'api' as TabType, label: 'API Usage', icon: <Activity className="w-4 h-4" /> },
{ id: 'costs' as TabType, label: 'Cost Breakdown', icon: <DollarSign className="w-4 h-4" /> },
];
return (
@@ -67,7 +65,7 @@ export default function UsageAnalyticsPage() {
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Usage & Analytics</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1">
Monitor plan limits, credit usage, API calls, and cost breakdown
</p>
</p>and API calls
</div>
<div className="mb-6 flex items-center justify-between">
@@ -81,7 +79,7 @@ export default function UsageAnalyticsPage() {
className={`
flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm
${activeTab === tab.id
? 'border-blue-500 text-blue-600 dark:text-blue-400'
? 'border-[var(--color-brand-500)] text-[var(--color-brand-500)]'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400'
}
`}
@@ -114,79 +112,17 @@ export default function UsageAnalyticsPage() {
{/* Tab Content */}
<div className="mt-6">
{/* Plan Limits Tab */}
{/* Limits & Usage Tab */}
{activeTab === 'limits' && (
<UsageLimitsPanel />
)}
{/* Credit Usage Tab */}
{activeTab === 'credits' && (
<div className="space-y-6">
{/* Summary Cards */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<Card className="p-6">
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Total Credits Used</div>
<div className="text-3xl font-bold text-red-600 dark:text-red-400">
{analytics?.total_usage.toLocaleString() || 0}
</div>
</Card>
<Card className="p-6">
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Total Purchases</div>
<div className="text-3xl font-bold text-green-600 dark:text-green-400">
{analytics?.total_purchases.toLocaleString() || 0}
</div>
</Card>
<Card className="p-6">
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Current Balance</div>
<div className="text-3xl font-bold text-gray-900 dark:text-white">
{analytics?.current_balance.toLocaleString() || 0}
</div>
</Card>
</div>
{/* Usage by Type */}
<Card className="p-6">
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
Usage by Operation Type
</h2>
<div className="space-y-3">
{analytics?.usage_by_type.map((item, idx) => (
<div key={idx} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div className="flex-1">
<Badge variant="light" color="error">
{item.transaction_type}
</Badge>
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
{item.count} operations
</div>
</div>
<div className="text-right">
<div className="text-lg font-bold text-red-600 dark:text-red-400">
{item.total.toLocaleString()} credits
</div>
</div>
</div>
))}
{(!analytics?.usage_by_type || analytics.usage_by_type.length === 0) && (
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
No usage in this period
</div>
)}
</div>
</Card>
{/* Insert Billing usage panel below current credit-analytics content */}
<div className="mt-6">
<BillingUsagePanel />
</div>
<UsageLimitsPanel />
</div>
)}
{/* Credit Balance Tab (billing/credits moved here) */}
{activeTab === 'balance' && (
{/* Activity Tab */}
{activeTab === 'activity' && (
<div className="space-y-6">
<BillingBalancePanel />
<BillingUsagePanel showOnlyActivity={true} />
</div>
)}
@@ -196,7 +132,7 @@ export default function UsageAnalyticsPage() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<Card className="p-6">
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Total API Calls</div>
<div className="text-3xl font-bold text-blue-600 dark:text-blue-400">
<div className="text-3xl font-bold text-[var(--color-brand-500)]">
{analytics?.usage_by_type.reduce((sum, item) => sum + item.count, 0).toLocaleString() || 0}
</div>
</Card>
@@ -245,64 +181,6 @@ export default function UsageAnalyticsPage() {
</Card>
</div>
)}
{/* Cost Breakdown Tab */}
{activeTab === 'costs' && (
<div className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<Card className="p-6">
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Total Cost</div>
<div className="text-3xl font-bold text-gray-900 dark:text-white">
${((analytics?.total_usage || 0) * 0.01).toFixed(2)}
</div>
<div className="text-xs text-gray-500 mt-1">Estimated USD</div>
</Card>
<Card className="p-6">
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Avg Cost/Day</div>
<div className="text-3xl font-bold text-gray-900 dark:text-white">
${(((analytics?.total_usage || 0) * 0.01) / period).toFixed(2)}
</div>
<div className="text-xs text-gray-500 mt-1">Estimated USD</div>
</Card>
<Card className="p-6">
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Cost per Credit</div>
<div className="text-3xl font-bold text-gray-900 dark:text-white">
$0.01
</div>
<div className="text-xs text-gray-500 mt-1">Average rate</div>
</Card>
</div>
<Card className="p-6">
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
Cost by Operation
</h2>
<div className="space-y-3">
{analytics?.usage_by_type.map((item, idx) => (
<div key={idx} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div className="flex-1">
<div className="font-medium">{item.transaction_type}</div>
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
{item.total.toLocaleString()} credits used
</div>
</div>
<div className="text-right">
<div className="text-lg font-bold">${(item.total * 0.01).toFixed(2)}</div>
<div className="text-xs text-gray-500">USD</div>
</div>
</div>
))}
{(!analytics?.usage_by_type || analytics.usage_by_type.length === 0) && (
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
No cost data available
</div>
)}
</div>
</Card>
</div>
)}
</div>
{/* Summary Cards */}