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

text udpates ux

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-25 11:51:44 +00:00
parent d21b5b1363
commit e736697d6d
23 changed files with 199 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -59,9 +59,9 @@ export default function UsageAnalyticsPage() {
}
const tabs = [
{ id: 'limits' as TabType, label: 'Plan Limits & Usage', icon: <BarChart3 className="w-4 h-4" /> },
{ id: 'activity' as TabType, label: 'Credit Activity', icon: <TrendingUp className="w-4 h-4" /> },
{ id: 'api' as TabType, label: 'API Usage', icon: <Activity className="w-4 h-4" /> },
{ id: 'limits' as TabType, label: 'Your Limits & Usage (What you\'re using)', icon: <BarChart3 className="w-4 h-4" /> },
{ id: 'activity' as TabType, label: 'Credit History (Where credits go)', icon: <TrendingUp className="w-4 h-4" /> },
{ id: 'api' as TabType, label: 'API Activity (Technical requests)', icon: <Activity className="w-4 h-4" /> },
];
return (
@@ -70,9 +70,9 @@ export default function UsageAnalyticsPage() {
{/* Page Header */}
<div className="mb-6">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Usage & Analytics</h1>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Your Usage</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1">
Track plan limits, credit consumption, and API usage patterns
See how much you're using - Track your credits, content limits, and API activity
</p>
</div>
@@ -85,10 +85,11 @@ export default function UsageAnalyticsPage() {
<Zap className="w-5 h-5 text-white" />
</div>
<div>
<div className="text-xs text-brand-700 dark:text-brand-300">Current Balance</div>
<div className="text-xs text-brand-700 dark:text-brand-300">Credits Left</div>
<div className="text-2xl font-bold text-brand-600 dark:text-brand-400">
{creditBalance.credits.toLocaleString()}
</div>
<div className="text-xs text-brand-600 dark:text-brand-400 mt-1">available</div>
</div>
</div>
</Card>
@@ -99,10 +100,11 @@ export default function UsageAnalyticsPage() {
<TrendingUp className="w-5 h-5 text-white" />
</div>
<div>
<div className="text-xs text-purple-700 dark:text-purple-300">Used This Month</div>
<div className="text-xs text-purple-700 dark:text-purple-300">Credits Used This Month</div>
<div className="text-2xl font-bold text-purple-600 dark:text-purple-400">
{creditBalance.credits_used_this_month.toLocaleString()}
</div>
<div className="text-xs text-purple-600 dark:text-purple-400 mt-1">spent so far</div>
</div>
</div>
</Card>
@@ -113,10 +115,11 @@ export default function UsageAnalyticsPage() {
<BarChart3 className="w-5 h-5 text-white" />
</div>
<div>
<div className="text-xs text-success-700 dark:text-success-300">Monthly Allocation</div>
<div className="text-xs text-success-700 dark:text-success-300">Your Monthly Limit</div>
<div className="text-2xl font-bold text-success-600 dark:text-success-400">
{creditBalance.plan_credits_per_month.toLocaleString()}
</div>
<div className="text-xs text-success-600 dark:text-success-400 mt-1">total each month</div>
</div>
</div>
</Card>