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

SEction 4 completeed

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-27 02:59:27 +00:00
parent 178b7c23ce
commit 74a3441ee4
6 changed files with 326 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -206,14 +206,14 @@ export default function UsageAnalyticsPage() {
{/* API Usage Tab */}
{activeTab === 'api' && (
<div className="space-y-6">
{/* API Stats Cards */}
{/* API Stats Cards - Using real analytics data */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<Card className="p-6">
<div className="flex items-center gap-3 mb-3">
<div className="p-2 bg-brand-100 dark:bg-brand-900/30 rounded-lg">
<Activity className="w-5 h-5 text-brand-600 dark:text-brand-400" />
</div>
<div className="text-sm font-medium text-gray-600 dark:text-gray-400">Total API Calls</div>
<div className="text-sm font-medium text-gray-600 dark:text-gray-400">Total Operations</div>
</div>
<div className="text-3xl font-bold text-brand-600 dark:text-brand-400">
{analytics?.usage_by_type.reduce((sum, item) => sum + item.count, 0).toLocaleString() || 0}
@@ -226,7 +226,7 @@ export default function UsageAnalyticsPage() {
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<BarChart3 className="w-5 h-5 text-purple-600 dark:text-purple-400" />
</div>
<div className="text-sm font-medium text-gray-600 dark:text-gray-400">Avg Calls/Day</div>
<div className="text-sm font-medium text-gray-600 dark:text-gray-400">Avg Operations/Day</div>
</div>
<div className="text-3xl font-bold text-purple-600 dark:text-purple-400">
{Math.round((analytics?.usage_by_type.reduce((sum, item) => sum + item.count, 0) || 0) / period)}
@@ -239,52 +239,45 @@ export default function UsageAnalyticsPage() {
<div className="p-2 bg-success-100 dark:bg-success-900/30 rounded-lg">
<TrendingUp className="w-5 h-5 text-success-600 dark:text-success-400" />
</div>
<div className="text-sm font-medium text-gray-600 dark:text-gray-400">Success Rate</div>
<div className="text-sm font-medium text-gray-600 dark:text-gray-400">Credits Used</div>
</div>
<div className="text-3xl font-bold text-success-600 dark:text-success-400">
98.5%
{analytics?.total_usage?.toLocaleString() || 0}
</div>
<div className="text-sm text-gray-500 dark:text-gray-400 mt-1">successful requests</div>
<div className="text-sm text-gray-500 dark:text-gray-400 mt-1">in last {period} days</div>
</Card>
</div>
{/* API Calls by Endpoint */}
{/* Operations by Type */}
<Card className="p-6">
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
API Calls by Endpoint
Operations by Type
</h2>
<div className="space-y-3">
<div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-750 transition-colors">
<div className="flex-1">
<div className="font-medium text-gray-900 dark:text-white">/api/v1/content/generate</div>
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">Content generation</div>
</div>
<div className="text-right">
<div className="text-xl font-bold text-gray-900 dark:text-white">1,234</div>
<div className="text-xs text-gray-500 dark:text-gray-400">calls</div>
</div>
{analytics?.usage_by_type && analytics.usage_by_type.length > 0 ? (
<div className="space-y-3">
{analytics.usage_by_type.map((item, index) => (
<div key={index} className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-750 transition-colors">
<div className="flex-1">
<div className="font-medium text-gray-900 dark:text-white capitalize">
{item.transaction_type.replace(/_/g, ' ')}
</div>
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
{Math.abs(item.total).toLocaleString()} credits
</div>
</div>
<div className="text-right">
<div className="text-xl font-bold text-gray-900 dark:text-white">{item.count}</div>
<div className="text-xs text-gray-500 dark:text-gray-400">operations</div>
</div>
</div>
))}
</div>
<div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-750 transition-colors">
<div className="flex-1">
<div className="font-medium text-gray-900 dark:text-white">/api/v1/keywords/cluster</div>
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">Keyword clustering</div>
</div>
<div className="text-right">
<div className="text-xl font-bold text-gray-900 dark:text-white">567</div>
<div className="text-xs text-gray-500 dark:text-gray-400">calls</div>
</div>
) : (
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
<Activity className="w-12 h-12 mx-auto mb-3 opacity-30" />
<p>No operations recorded in the selected period</p>
</div>
<div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-750 transition-colors">
<div className="flex-1">
<div className="font-medium text-gray-900 dark:text-white">/api/v1/images/generate</div>
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">Image generation</div>
</div>
<div className="text-right">
<div className="text-xl font-bold text-gray-900 dark:text-white">342</div>
<div className="text-xs text-gray-500 dark:text-gray-400">calls</div>
</div>
</div>
</div>
)}
</Card>
</div>
)}