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

feat: add Usage Limits Panel component with usage tracking and visual indicators for limits

Browse Source 
style: implement custom color schemes and gradients for account section, enhancing visual hierarchy
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-12 13:15:15 +00:00
parent 12956ec64a
commit 6e2101d019
29 changed files with 3622 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/pages/account/PlansAndBillingPage.tsx
View File

@@ -502,6 +502,16 @@ export default function PlansAndBillingPage() {
buttonText: plan.id === currentPlanId ? 'Current Plan' : 'Select Plan',
highlighted: plan.is_featured || false,
disabled: plan.id === currentPlanId || planLoadingId === plan.id,
// Plan limits
max_sites: plan.max_sites,
max_users: plan.max_users,
max_keywords: plan.max_keywords,
max_clusters: plan.max_clusters,
max_content_ideas: plan.max_content_ideas,
max_content_words: plan.max_content_words,
max_images_basic: plan.max_images_basic,
max_images_premium: plan.max_images_premium,
included_credits: plan.included_credits,
};
})}
showToggle={true}

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

@@ -1,10 +1,10 @@
/**
* Usage & Analytics Page
* Tabs: Credit Usage, API Usage, Cost Breakdown
* Tabs: Plan Limits, Credit Usage, API Usage, Cost Breakdown
*/
import { useState, useEffect } from 'react';
import { TrendingUp, Activity, DollarSign } from 'lucide-react';
import { TrendingUp, Activity, DollarSign, BarChart3 } from 'lucide-react';
import PageMeta from '../../components/common/PageMeta';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { getUsageAnalytics, UsageAnalytics } from '../../services/billing.api';
@@ -12,13 +12,14 @@ import { Card } from '../../components/ui/card';
import Badge from '../../components/ui/badge/Badge';
import BillingUsagePanel from '../../components/billing/BillingUsagePanel';
import BillingBalancePanel from '../../components/billing/BillingBalancePanel';
import UsageLimitsPanel from '../../components/billing/UsageLimitsPanel';
import Button from '../../components/ui/button/Button';
type TabType = 'credits' | 'api' | 'costs';
type TabType = 'limits' | 'credits' | 'balance' | 'api' | 'costs';
export default function UsageAnalyticsPage() {
const toast = useToast();
const [activeTab, setActiveTab] = useState<TabType>('credits');
const [activeTab, setActiveTab] = useState<TabType>('limits');
const [analytics, setAnalytics] = useState<UsageAnalytics | null>(null);
const [loading, setLoading] = useState(true);
const [period, setPeriod] = useState(30);
@@ -51,6 +52,7 @@ 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: 'api' as TabType, label: 'API Usage', icon: <Activity className="w-4 h-4" /> },
@@ -64,7 +66,7 @@ export default function UsageAnalyticsPage() {
<div className="mb-6">
<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 credit usage, API calls, and cost breakdown
Monitor plan limits, credit usage, API calls, and cost breakdown
</p>
</div>
@@ -112,6 +114,11 @@ export default function UsageAnalyticsPage() {
{/* Tab Content */}
<div className="mt-6">
{/* Plan Limits Tab */}
{activeTab === 'limits' && (
<UsageLimitsPanel />
)}
{/* Credit Usage Tab */}
{activeTab === 'credits' && (
<div className="space-y-6">