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

asdsadsad

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-12 15:11:17 +00:00
parent f163a2e07d
commit 9cb0e05618
6 changed files with 722 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
frontend/src/components/billing/CreditCostBreakdownPanel.tsx
View File

@@ -7,12 +7,25 @@ import { useState, useEffect } from 'react';
import { Card } from '../ui/card';
import { DollarSign, TrendingUp, AlertCircle } from 'lucide-react';
import Badge from '../ui/badge/Badge';
import { getUsageAnalytics, type UsageAnalytics } from '../../services/billing.api';
import { getCreditUsageSummary } from '../../services/billing.api';
import { useToast } from '../ui/toast/ToastContainer';
interface OperationData {
credits: number;
cost: number;
count: number;
}
interface CreditUsageSummary {
total_credits_used: number;
total_cost_usd: string;
by_operation: Record<string, OperationData>;
by_model: Record<string, { credits: number; cost: number }>;
}
export default function CreditCostBreakdownPanel() {
const toast = useToast();
const [analytics, setAnalytics] = useState<UsageAnalytics | null>(null);
const [summary, setSummary] = useState<CreditUsageSummary | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string>('');
const [period] = useState(30); // Last 30 days
@@ -25,8 +38,17 @@ export default function CreditCostBreakdownPanel() {
try {
setLoading(true);
setError('');
const data = await getUsageAnalytics(period);
setAnalytics(data);
// Calculate date range for last N days
const endDate = new Date();
const startDate = new Date();
startDate.setDate(startDate.getDate() - period);
const data = await getCreditUsageSummary({
start_date: startDate.toISOString(),
end_date: endDate.toISOString(),
});
setSummary(data);
} catch (err: any) {
const message = err?.message || 'Failed to load cost analytics';
setError(message);
@@ -47,7 +69,7 @@ export default function CreditCostBreakdownPanel() {
);
}
if (error || !analytics) {
if (error || !summary) {
return (
<Card className="p-6 text-center">
<AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
@@ -65,63 +87,92 @@ export default function CreditCostBreakdownPanel() {
);
}
// Calculate metrics
const totalCost = parseFloat(summary.total_cost_usd) || 0;
const totalCredits = summary.total_credits_used || 0;
const totalOperations = Object.values(summary.by_operation).reduce((sum, op) => sum + op.count, 0);
const avgCostPerDay = totalCost / period;
// Convert by_operation to array and sort by cost
const operationsList = Object.entries(summary.by_operation)
.map(([type, data]) => ({
operation_type: type,
total: data.credits,
count: data.count,
cost_usd: data.cost,
}))
.sort((a, b) => b.cost_usd - a.cost_usd);
// Color palette for different operation types
const operationColors = [
{ bg: 'bg-[var(--color-brand-50)]', text: 'text-[var(--color-brand-500)]', border: 'border-[var(--color-brand-200)]' },
{ bg: 'bg-[var(--color-success-50)]', text: 'text-[var(--color-success-500)]', border: 'border-[var(--color-success-200)]' },
{ bg: 'bg-[var(--color-info-50)]', text: 'text-[var(--color-info-500)]', border: 'border-[var(--color-info-200)]' },
{ bg: 'bg-[var(--color-purple-50)]', text: 'text-[var(--color-purple-500)]', border: 'border-[var(--color-purple-200)]' },
{ bg: 'bg-[var(--color-warning-50)]', text: 'text-[var(--color-warning-500)]', border: 'border-[var(--color-warning-200)]' },
{ bg: 'bg-[var(--color-teal-50)]', text: 'text-[var(--color-teal-500)]', border: 'border-[var(--color-teal-200)]' },
{ bg: 'bg-brand-50 dark:bg-brand-900/20', text: 'text-brand-600 dark:text-brand-400', border: 'border-brand-500 dark:border-brand-400' },
{ bg: 'bg-success-50 dark:bg-success-900/20', text: 'text-success-600 dark:text-success-400', border: 'border-success-500 dark:border-success-400' },
{ bg: 'bg-info-50 dark:bg-info-900/20', text: 'text-info-600 dark:text-info-400', border: 'border-info-500 dark:border-info-400' },
{ bg: 'bg-purple-50 dark:bg-purple-900/20', text: 'text-purple-600 dark:text-purple-400', border: 'border-purple-500 dark:border-purple-400' },
{ bg: 'bg-warning-50 dark:bg-warning-900/20', text: 'text-warning-600 dark:text-warning-400', border: 'border-warning-500 dark:border-warning-400' },
{ bg: 'bg-teal-50 dark:bg-teal-900/20', text: 'text-teal-600 dark:text-teal-400', border: 'border-teal-500 dark:border-teal-400' },
];
return (
<div className="space-y-6">
{/* Summary Cards */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Card className="p-6 border-l-4 border-[var(--color-brand-500)]">
{/* Summary Cards - 4 columns */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<Card className="p-6 border-l-4 border-brand-500 dark:border-brand-400">
<div className="flex items-center gap-3 mb-2">
<div className="p-2 bg-[var(--color-brand-50)] dark:bg-[var(--color-brand-900)]/20 rounded-lg">
<DollarSign className="w-5 h-5 text-[var(--color-brand-500)]" />
<div className="p-2 bg-brand-50 dark:bg-brand-900/20 rounded-lg">
<DollarSign className="w-5 h-5 text-brand-500 dark:text-brand-400" />
</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Total Cost</div>
</div>
<div className="text-3xl font-bold text-gray-900 dark:text-white">
${((analytics.total_usage || 0) * 0.01).toFixed(2)}
${totalCost.toFixed(2)}
</div>
<div className="text-xs text-gray-500 mt-1">Last {period} days</div>
</Card>
<Card className="p-6 border-l-4 border-[var(--color-success-500)]">
<Card className="p-6 border-l-4 border-success-500 dark:border-success-400">
<div className="flex items-center gap-3 mb-2">
<div className="p-2 bg-[var(--color-success-50)] dark:bg-[var(--color-success-900)]/20 rounded-lg">
<TrendingUp className="w-5 h-5 text-[var(--color-success-500)]" />
<div className="p-2 bg-success-50 dark:bg-success-900/20 rounded-lg">
<TrendingUp className="w-5 h-5 text-success-500 dark:text-success-400" />
</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Avg Cost/Day</div>
</div>
<div className="text-3xl font-bold text-gray-900 dark:text-white">
${(((analytics.total_usage || 0) * 0.01) / period).toFixed(2)}
${avgCostPerDay.toFixed(2)}
</div>
<div className="text-xs text-gray-500 mt-1">Daily average</div>
</Card>
<Card className="p-6 border-l-4 border-[var(--color-info-500)]">
<Card className="p-6 border-l-4 border-purple-500 dark:border-purple-400">
<div className="flex items-center gap-3 mb-2">
<div className="p-2 bg-[var(--color-info-50)] dark:bg-[var(--color-info-900)]/20 rounded-lg">
<DollarSign className="w-5 h-5 text-[var(--color-info-500)]" />
<div className="p-2 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
<TrendingUp className="w-5 h-5 text-purple-500 dark:text-purple-400" />
</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Cost per Credit</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Total Operations</div>
</div>
<div className="text-3xl font-bold text-gray-900 dark:text-white">
$0.01
{totalOperations.toLocaleString()}
</div>
<div className="text-xs text-gray-500 mt-1">Standard rate</div>
<div className="text-xs text-gray-500 mt-1">API calls</div>
</Card>
<Card className="p-6 border-l-4 border-info-500 dark:border-info-400">
<div className="flex items-center gap-3 mb-2">
<div className="p-2 bg-info-50 dark:bg-info-900/20 rounded-lg">
<DollarSign className="w-5 h-5 text-info-500 dark:text-info-400" />
</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Total Credits</div>
</div>
<div className="text-3xl font-bold text-gray-900 dark:text-white">
{totalCredits.toLocaleString()}
</div>
<div className="text-xs text-gray-500 mt-1">Credits used</div>
</Card>
</div>
{/* Cost by Operation */}
<Card className="p-6">
<div className="flex items-center justify-between mb-6">
{/* Cost by Operation - 4 columns */}
<div>
<div className="flex items-center justify-between mb-4">
<div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
Cost by Operation Type
@@ -135,53 +186,51 @@ export default function CreditCostBreakdownPanel() {
</Badge>
</div>
<div className="space-y-3">
{analytics.usage_by_type.map((item: { transaction_type: string; total: number; count: number }, idx: number) => {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{operationsList.map((item, idx) => {
const colorScheme = operationColors[idx % operationColors.length];
const costUSD = (item.total * 0.01).toFixed(2);
const costUSD = item.cost_usd.toFixed(2);
const avgPerOperation = item.count > 0 ? (item.total / item.count).toFixed(0) : '0';
return (
<div
key={idx}
className={`flex items-center justify-between p-4 rounded-lg border-l-4 ${colorScheme.border} ${colorScheme.bg} dark:bg-opacity-10 transition-all hover:shadow-md`}
<Card
key={item.operation_type}
className={`p-4 border-l-4 ${colorScheme.border} hover:shadow-lg transition-all`}
>
<div className="flex-1">
<div className="flex items-center gap-3 mb-2">
<h4 className={`font-semibold ${colorScheme.text}`}>
{item.transaction_type}
</h4>
<Badge variant="soft" tone="neutral" size="xs">
{item.count} ops
</Badge>
<div className="mb-3">
<h4 className={`font-semibold ${colorScheme.text} mb-1`}>
{item.operation_type}
</h4>
<Badge variant="soft" tone="neutral" size="xs">
{item.count} ops
</Badge>
</div>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-gray-500 dark:text-gray-400">Credits:</span>
<span className="font-medium text-gray-900 dark:text-white">
{item.total.toLocaleString()}
</span>
</div>
<div className="flex items-center gap-4 text-sm">
<div>
<span className="text-gray-500 dark:text-gray-400">Credits: </span>
<span className="font-medium text-gray-900 dark:text-white">
{item.total.toLocaleString()}
</span>
</div>
<div>
<span className="text-gray-500 dark:text-gray-400">Avg/op: </span>
<span className="font-medium text-gray-900 dark:text-white">
{avgPerOperation} credits
</span>
<div className="flex justify-between">
<span className="text-gray-500 dark:text-gray-400">Avg/op:</span>
<span className="font-medium text-gray-900 dark:text-white">
{avgPerOperation}
</span>
</div>
<div className="pt-2 mt-2 border-t border-gray-200 dark:border-gray-700">
<div className={`text-2xl font-bold ${colorScheme.text}`}>
${costUSD}
</div>
<div className="text-xs text-gray-500">USD</div>
</div>
</div>
<div className="text-right ml-4">
<div className={`text-2xl font-bold ${colorScheme.text}`}>
${costUSD}
</div>
<div className="text-xs text-gray-500 mt-1">USD</div>
</div>
</div>
</Card>
);
})}
{(!analytics.usage_by_type || analytics.usage_by_type.length === 0) && (
<div className="text-center py-12">
{operationsList.length === 0 && (
<div className="col-span-4 text-center py-12">
<DollarSign className="w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto mb-3" />
<p className="text-gray-500 dark:text-gray-400">
No cost data available for this period
@@ -189,7 +238,7 @@ export default function CreditCostBreakdownPanel() {
</div>
)}
</div>
</Card>
</div>
</div>
);
}

20
frontend/src/components/billing/CreditCostsPanel.tsx
View File

@@ -7,7 +7,7 @@ import { Card } from '../ui/card';
import Badge from '../ui/badge/Badge';
// Credit costs per operation
const CREDIT_COSTS: Record<string, { cost: number | string; description: string; color: string }> = {
const CREDIT_COSTS: Record<string, { cost: number | string; description: string; color: 'brand' | 'success' | 'info' | 'warning' | 'purple' | 'indigo' | 'pink' | 'teal' | 'cyan' }> = {
clustering: {
cost: 10,
description: 'Per clustering request',
@@ -16,42 +16,42 @@ const CREDIT_COSTS: Record<string, { cost: number | string; description: string;
idea_generation: {
cost: 15,
description: 'Per cluster → ideas request',
color: 'brand'
color: 'success'
},
content_generation: {
cost: '1 per 100 words',
description: 'Per 100 words generated',
color: 'brand'
color: 'purple'
},
image_prompt_extraction: {
cost: 2,
description: 'Per content piece',
color: 'brand'
color: 'info'
},
image_generation: {
cost: 5,
description: 'Per image generated',
color: 'brand'
color: 'indigo'
},
linking: {
cost: 8,
description: 'Per content piece',
color: 'brand'
color: 'teal'
},
optimization: {
cost: '1 per 200 words',
description: 'Per 200 words optimized',
color: 'brand'
color: 'warning'
},
site_structure_generation: {
cost: 50,
description: 'Per site blueprint',
color: 'brand'
color: 'pink'
},
site_page_generation: {
cost: 20,
description: 'Per page generated',
color: 'brand'
color: 'cyan'
},
};
@@ -80,7 +80,7 @@ export default function CreditCostsPanel() {
</div>
</div>
<div className="ml-4 text-right flex-shrink-0">
<Badge variant="soft" tone="brand" className="font-semibold">
<Badge variant="soft" tone={info.color} className="font-semibold">
{typeof info.cost === 'number' ? `${info.cost} credits` : info.cost}
</Badge>
</div>

51
frontend/src/components/billing/UsageLimitsPanel.tsx
View File

@@ -24,24 +24,46 @@ function LimitCard({ title, icon, usage, type, daysUntilReset, accentColor = 'br
const isWarning = percentage >= 80;
const isDanger = percentage >= 95;
// Determine progress bar color
let barColor = `bg-[var(--color-${accentColor}-500)]`;
// Determine progress bar color - use inline styles for dynamic colors
let barColor = 'var(--color-brand-500)';
let badgeVariant: 'soft' = 'soft';
let badgeTone: 'brand' | 'warning' | 'danger' | 'success' | 'info' | 'purple' | 'indigo' | 'pink' | 'teal' | 'cyan' = accentColor;
// Color mapping for progress bars
const colorMap: Record<string, string> = {
brand: '#0693e3',
success: '#0bbf87',
info: '#3b82f6',
warning: '#ff7a00',
danger: '#ef4444',
purple: '#8b5cf6',
indigo: '#6366f1',
pink: '#ec4899',
teal: '#14b8a6',
cyan: '#06b6d4',
};
if (isDanger) {
barColor = 'bg-[var(--color-danger)]';
barColor = colorMap.danger;
badgeTone = 'danger';
} else if (isWarning) {
barColor = 'bg-[var(--color-warning)]';
barColor = colorMap.warning;
badgeTone = 'warning';
} else {
barColor = colorMap[accentColor] || colorMap.brand;
}
return (
<Card className="p-4 hover:shadow-md transition-shadow">
<div className="flex items-start justify-between mb-3">
<div className="flex items-center gap-3">
<div className={`p-2 bg-[var(--color-${accentColor}-50)] dark:bg-[var(--color-${accentColor}-900)]/20 rounded-lg text-[var(--color-${accentColor}-500)]`}>
<div
className="p-2 rounded-lg"
style={{
backgroundColor: isDanger ? 'rgba(239, 68, 68, 0.1)' : isWarning ? 'rgba(255, 122, 0, 0.1)' : `${barColor}15`,
color: barColor
}}
>
{icon}
</div>
<div>
@@ -58,10 +80,13 @@ function LimitCard({ title, icon, usage, type, daysUntilReset, accentColor = 'br
{/* Progress Bar */}
<div className="mb-3">
<div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
<div className="h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
<div
className={`h-full ${barColor} transition-all duration-300`}
style={{ width: `${Math.min(percentage, 100)}%` }}
className="h-full transition-all duration-300 ease-out"
style={{
width: `${Math.min(percentage, 100)}%`,
backgroundColor: barColor
}}
/>
</div>
</div>
@@ -228,9 +253,9 @@ export default function UsageLimitsPanel() {
{/* Upgrade CTA if approaching limits */}
{(Object.values(summary.hard_limits).some(u => u.percentage_used >= 80) ||
Object.values(summary.monthly_limits).some(u => u.percentage_used >= 80)) && (
<Card className="p-6 bg-gradient-to-r from-[var(--color-brand-50)] to-[var(--color-brand-100)] dark:from-[var(--color-brand-900)]/20 dark:to-[var(--color-brand-900)]/10 border-[var(--color-brand-200)] dark:border-[var(--color-brand-700)]">
<Card className="p-6 bg-gradient-to-r from-brand-50 to-brand-100 dark:from-brand-900/20 dark:to-brand-800/10 border-brand-200 dark:border-brand-700">
<div className="flex items-start gap-4">
<div className="p-3 bg-[var(--color-brand-500)] rounded-lg text-white">
<div className="p-3 bg-brand-500 rounded-lg text-white">
<TrendingUp className="w-6 h-6" />
</div>
<div className="flex-1">
@@ -242,10 +267,10 @@ export default function UsageLimitsPanel() {
and avoid interruptions.
</p>
<a
href="/account/plans-and-billing?tab=purchase"
className="inline-flex items-center px-4 py-2 bg-[var(--color-brand-500)] text-white rounded-lg hover:bg-[var(--color-brand-600)] transition-colors"
href="/account/plans?tab=upgrade"
className="inline-flex items-center px-4 py-2 bg-brand-500 text-white rounded-lg hover:bg-brand-600 transition-colors"
>
Purchase Credits
Upgrade Plan
</a>
</div>
</div>

10
frontend/src/layout/AppSidebar.tsx
View File

@@ -198,16 +198,16 @@ const AppSidebar: React.FC = () => {
name: "Account Settings",
path: "/account/settings",
},
{
icon: <DollarLineIcon />,
name: "Plans & Billing",
path: "/account/plans",
},
{
icon: <UserIcon />,
name: "Team Management",
path: "/account/team",
},
{
icon: <DollarLineIcon />,
name: "Plans & Billing",
path: "/account/plans",
},
{
icon: <PieChartIcon />,
name: "Usage & Analytics",

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

@@ -1,20 +1,21 @@
/**
* Plans & Billing Page - Consolidated
* Tabs: Current Plan, Credits Overview, Billing History
* Plans & Billing Page - Refactored for Better UX
* Organized tabs: Current Plan, Plan Limits, Credits, Purchase Credits, Billing History
*/
import { useState, useEffect, useRef } from 'react';
import {
CreditCard, Package, TrendingUp, FileText, Wallet, ArrowUpCircle,
Loader2, AlertCircle, CheckCircle, Download
Loader2, AlertCircle, CheckCircle, Download, BarChart3, Zap, Globe, Users
} from 'lucide-react';
import { Card } from '../../components/ui/card';
import Badge from '../../components/ui/badge/Badge';
import Button from '../../components/ui/button/Button';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { PricingTable, PricingPlan } from '../../components/ui/pricing-table';
import { PricingTable } from '../../components/ui/pricing-table';
import CreditCostBreakdownPanel from '../../components/billing/CreditCostBreakdownPanel';
import CreditCostsPanel from '../../components/billing/CreditCostsPanel';
import UsageLimitsPanel from '../../components/billing/UsageLimitsPanel';
import {
getCreditBalance,
getCreditPackages,
@@ -41,7 +42,7 @@ import {
} from '../../services/billing.api';
import { useAuthStore } from '../../store/authStore';
type TabType = 'plan' | 'credits' | 'purchase' | 'invoices';
type TabType = 'plan' | 'limits' | 'credits' | 'upgrade' | 'invoices';
export default function PlansAndBillingPage() {
const [activeTab, setActiveTab] = useState<TabType>('plan');
@@ -342,9 +343,10 @@ export default function PlansAndBillingPage() {
const tabs = [
{ id: 'plan' as TabType, label: 'Current Plan', icon: <Package className="w-4 h-4" /> },
{ id: 'credits' as TabType, label: 'Credits Overview', icon: <TrendingUp className="w-4 h-4" /> },
{ id: 'purchase' as TabType, label: 'Purchase Credits', icon: <Wallet className="w-4 h-4" /> },
{ id: 'invoices' as TabType, label: 'Billing History', icon: <FileText className="w-4 h-4" /> },
{ id: 'limits' as TabType, label: 'Plan Limits', icon: <BarChart3 className="w-4 h-4" /> },
{ id: 'credits' as TabType, label: 'Credits', icon: <TrendingUp className="w-4 h-4" /> },
{ id: 'upgrade' as TabType, label: 'Purchase/Upgrade', icon: <Wallet className="w-4 h-4" /> },
{ id: 'invoices' as TabType, label: 'History', icon: <FileText className="w-4 h-4" /> },
];
return (
@@ -403,14 +405,18 @@ export default function PlansAndBillingPage() {
{/* Current Plan Tab */}
{activeTab === 'plan' && (
<div className="space-y-6">
{/* 2/3 Current Plan + 1/3 Plan Features Layout */}
{/* Current Plan Overview */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Current Plan Card - 2/3 width */}
{/* Main Plan Card */}
<Card className="p-6 lg:col-span-2">
<h2 className="text-lg font-semibold mb-4">Your Current Plan</h2>
<h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Your Current Plan</h2>
{!hasActivePlan && (
<div className="p-4 mb-4 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200">
No active plan found. Please choose a plan to activate your account.
<div className="p-4 mb-4 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200 flex items-start gap-3">
<AlertCircle className="w-5 h-5 mt-0.5 flex-shrink-0" />
<div>
<p className="font-medium">No Active Plan</p>
<p className="text-sm mt-1">Choose a plan below to activate your account and unlock all features.</p>
</div>
</div>
)}
<div className="space-y-4">
@@ -419,40 +425,65 @@ export default function PlansAndBillingPage() {
<div className="text-2xl font-bold text-gray-900 dark:text-white">
{currentPlan?.name || 'No Plan Selected'}
</div>
<div className="text-gray-600 dark:text-gray-400">
<div className="text-gray-600 dark:text-gray-400 mt-1">
{currentPlan?.description || 'Select a plan to unlock full access.'}
</div>
</div>
<Badge variant="light" color={hasActivePlan ? 'success' : 'warning'}>
{hasActivePlan ? subscriptionStatus : 'plan required'}
<Badge variant="soft" tone={hasActivePlan ? 'success' : 'warning'} className="text-sm px-3 py-1">
{hasActivePlan ? subscriptionStatus : 'Inactive'}
</Badge>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div className="text-sm text-gray-600 dark:text-gray-400">Monthly Credits</div>
<div className="text-2xl font-bold text-gray-900 dark:text-white">
{/* Quick Stats Grid */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
<div className="p-4 bg-gradient-to-br from-brand-50 to-brand-100 dark:from-brand-900/20 dark:to-brand-800/10 rounded-lg border border-brand-200 dark:border-brand-700">
<div className="flex items-center gap-2 text-sm text-brand-700 dark:text-brand-300 mb-1">
<Zap className="w-4 h-4" />
Monthly Credits
</div>
<div className="text-2xl font-bold text-brand-600 dark:text-brand-400">
{creditBalance?.plan_credits_per_month?.toLocaleString?.() || 0}
</div>
</div>
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div className="text-sm text-gray-600 dark:text-gray-400">Current Balance</div>
<div className="text-2xl font-bold text-gray-900 dark:text-white">
<div className="p-4 bg-gradient-to-br from-success-50 to-success-100 dark:from-success-900/20 dark:to-success-800/10 rounded-lg border border-success-200 dark:border-success-700">
<div className="flex items-center gap-2 text-sm text-success-700 dark:text-success-300 mb-1">
<Wallet className="w-4 h-4" />
Current Balance
</div>
<div className="text-2xl font-bold text-success-600 dark:text-success-400">
{creditBalance?.credits?.toLocaleString?.() || 0}
</div>
</div>
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div className="text-sm text-gray-600 dark:text-gray-400">Period Ends</div>
<div className="text-lg font-bold text-gray-900 dark:text-white">
<div className="p-4 bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/10 rounded-lg border border-purple-200 dark:border-purple-700">
<div className="flex items-center gap-2 text-sm text-purple-700 dark:text-purple-300 mb-1">
<Package className="w-4 h-4" />
Renewal Date
</div>
<div className="text-lg font-bold text-purple-600 dark:text-purple-400">
{currentSubscription?.current_period_end
? new Date(currentSubscription.current_period_end).toLocaleDateString()
? new Date(currentSubscription.current_period_end).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
: '—'}
</div>
</div>
</div>
<div className="mt-6 flex gap-3">
<Button variant="outline" tone="neutral" onClick={() => setActiveTab('purchase')}>
{/* Action Buttons */}
<div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700 flex gap-3">
<Button
variant="primary"
tone="brand"
onClick={() => setActiveTab('upgrade')}
startIcon={<ArrowUpCircle className="w-4 h-4" />}
>
Purchase Credits
</Button>
<Button
variant="outline"
tone="neutral"
onClick={() => setActiveTab('limits')}
>
View Limits
</Button>
{hasActivePlan && (
<Button
variant="outline"
@@ -460,23 +491,30 @@ export default function PlansAndBillingPage() {
disabled={planLoadingId === currentSubscription?.id}
onClick={handleCancelSubscription}
>
{planLoadingId === currentSubscription?.id ? 'Cancelling...' : 'Cancel Subscription'}
{planLoadingId === currentSubscription?.id ? (
<>
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
Cancelling...
</>
) : (
'Cancel Plan'
)}
</Button>
)}
</div>
</div>
</Card>
{/* Plan Features Card - 1/3 width with 2-column layout */}
{/* Plan Features Card */}
<Card className="p-6">
<h2 className="text-lg font-semibold mb-4">Plan Features</h2>
<div className="grid grid-cols-2 gap-3">
<h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Included Features</h2>
<div className="space-y-2">
{(currentPlan?.features && currentPlan.features.length > 0
? currentPlan.features
: ['ai_writer', 'image_gen', 'auto_publish', 'custom_prompts', 'email_support', 'api_access'])
.map((feature: string) => (
<div key={feature} className="flex items-start gap-2 text-sm">
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
: ['AI Content Writer', 'Image Generation', 'Auto Publishing', 'Custom Prompts', 'Email Support', 'API Access'])
.map((feature: string, index: number) => (
<div key={index} className="flex items-start gap-2 text-sm">
<CheckCircle className="w-4 h-4 text-success-600 dark:text-success-400 mt-0.5 flex-shrink-0" />
<span className="text-gray-700 dark:text-gray-300">{feature}</span>
</div>
))}
@@ -484,100 +522,167 @@ export default function PlansAndBillingPage() {
</Card>
</div>
{/* Upgrade/Downgrade Section with Pricing Table */}
<div className="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
<div className="mx-auto" style={{ maxWidth: '1200px' }}>
<PricingTable
variant="1"
plans={plans.map(plan => {
const discount = plan.annual_discount_percent || 15;
return {
id: plan.id,
name: plan.name,
monthlyPrice: plan.price || 0,
price: plan.price || 0,
annualDiscountPercent: discount,
period: `/${plan.interval || 'month'}`,
description: plan.description || 'Standard plan',
features: plan.features && plan.features.length > 0
? plan.features
: ['Monthly credits included', 'Module access', 'Email support'],
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}
onPlanSelect={(plan) => plan.id && handleSelectPlan(plan.id)}
/>
</div>
<Card className="p-6 bg-[var(--color-brand-50)] dark:bg-[var(--color-brand-900)]/20 border-[var(--color-brand-200)] dark:border-[var(--color-brand-800)] mt-6">
<h3 className="font-semibold text-[var(--color-brand-900)] dark:text-[var(--color-brand-100)] mb-2">Plan Change Policy</h3>
<ul className="space-y-2 text-sm text-[var(--color-brand-800)] dark:text-[var(--color-brand-200)]">
<li>• Upgrades take effect immediately and you'll be charged a prorated amount</li>
<li>• Downgrades take effect at the end of your current billing period</li>
<li>• Unused credits from your current plan will carry over</li>
<li>• You can cancel your subscription at any time</li>
</ul>
{/* Plan Limits Overview */}
{hasActivePlan && (
<Card className="p-6">
<div className="flex items-center justify-between mb-6">
<div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">Quick Limits Overview</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
Key plan limits at a glance
</p>
</div>
<Button
variant="outline"
tone="brand"
size="sm"
onClick={() => setActiveTab('limits')}
>
View All Limits
</Button>
</div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
<Globe className="w-4 h-4" />
Sites
</div>
<div className="text-2xl font-bold text-gray-900 dark:text-white">
{currentPlan?.max_sites === 9999 ? '∞' : currentPlan?.max_sites || 0}
</div>
</div>
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
<Users className="w-4 h-4" />
Team Members
</div>
<div className="text-2xl font-bold text-gray-900 dark:text-white">
{currentPlan?.max_users === 9999 ? '∞' : currentPlan?.max_users || 0}
</div>
</div>
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
<FileText className="w-4 h-4" />
Content Words/mo
</div>
<div className="text-2xl font-bold text-gray-900 dark:text-white">
{currentPlan?.max_content_words === 9999999
? '∞'
: currentPlan?.max_content_words
? `${(currentPlan.max_content_words / 1000).toFixed(0)}K`
: 0}
</div>
</div>
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
<Zap className="w-4 h-4" />
Monthly Credits
</div>
<div className="text-2xl font-bold text-gray-900 dark:text-white">
{currentPlan?.included_credits?.toLocaleString?.() || 0}
</div>
</div>
</div>
</Card>
</div>
)}
</div>
)}
{/* Plan Limits Tab */}
{activeTab === 'limits' && (
<div className="space-y-6">
<UsageLimitsPanel />
</div>
)}
{/* Credits Overview Tab */}
{activeTab === 'credits' && (
<div className="space-y-6">
{/* Credit Balance 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">Current Balance</div>
<div className="text-3xl font-bold text-[var(--color-brand-500)]">
<Card className="p-6 bg-gradient-to-br from-brand-50 to-brand-100 dark:from-brand-900/20 dark:to-brand-800/10 border-brand-200 dark:border-brand-700">
<div className="flex items-center gap-3 mb-3">
<div className="p-2 bg-brand-500 rounded-lg">
<Wallet className="w-5 h-5 text-white" />
</div>
<div className="text-sm font-medium text-brand-700 dark:text-brand-300">Current Balance</div>
</div>
<div className="text-4xl font-bold text-brand-600 dark:text-brand-400">
{creditBalance?.credits.toLocaleString() || 0}
</div>
<div className="text-sm text-gray-500 mt-2">credits available</div>
<div className="text-sm text-brand-600 dark:text-brand-400 mt-2">credits available</div>
</Card>
<Card className="p-6">
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Used This Month</div>
<div className="text-3xl font-bold text-red-600 dark:text-red-400">
<Card className="p-6 bg-gradient-to-br from-red-50 to-red-100 dark:from-red-900/20 dark:to-red-800/10 border-red-200 dark:border-red-700">
<div className="flex items-center gap-3 mb-3">
<div className="p-2 bg-red-500 rounded-lg">
<TrendingUp className="w-5 h-5 text-white" />
</div>
<div className="text-sm font-medium text-red-700 dark:text-red-300">Used This Month</div>
</div>
<div className="text-4xl font-bold text-red-600 dark:text-red-400">
{creditBalance?.credits_used_this_month.toLocaleString() || 0}
</div>
<div className="text-sm text-gray-500 mt-2">credits consumed</div>
<div className="text-sm text-red-600 dark:text-red-400 mt-2">credits consumed</div>
</Card>
<Card className="p-6">
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Monthly Included</div>
<div className="text-3xl font-bold text-green-600 dark:text-green-400">
<Card className="p-6 bg-gradient-to-br from-success-50 to-success-100 dark:from-success-900/20 dark:to-success-800/10 border-success-200 dark:border-success-700">
<div className="flex items-center gap-3 mb-3">
<div className="p-2 bg-success-500 rounded-lg">
<Package className="w-5 h-5 text-white" />
</div>
<div className="text-sm font-medium text-success-700 dark:text-success-300">Monthly Included</div>
</div>
<div className="text-4xl font-bold text-success-600 dark:text-success-400">
{creditBalance?.plan_credits_per_month.toLocaleString() || 0}
</div>
<div className="text-sm text-gray-500 mt-2">from your plan</div>
<div className="text-sm text-success-600 dark:text-success-400 mt-2">from your plan</div>
</Card>
</div>
{/* Usage Summary with Progress Bar */}
<Card className="p-6">
<h2 className="text-lg font-semibold mb-4">Credit Usage Summary</h2>
<div className="space-y-2">
<div className="flex justify-between items-center">
<span className="text-gray-700 dark:text-gray-300">Remaining Credits</span>
<span className="font-semibold">{creditBalance?.credits_remaining.toLocaleString() || 0}</span>
<h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Credit Usage Summary</h2>
<div className="space-y-4">
<div className="flex justify-between items-center text-sm">
<span className="text-gray-700 dark:text-gray-300">Monthly Allocation</span>
<span className="font-semibold text-gray-900 dark:text-white">
{creditBalance?.plan_credits_per_month.toLocaleString() || 0} credits
</span>
</div>
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
<div
className="bg-[var(--color-brand-500)] h-2 rounded-full"
style={{
width: creditBalance?.credits
? `${Math.min((creditBalance.credits / (creditBalance.plan_credits_per_month || 1)) * 100, 100)}%`
: '0%'
}}
></div>
<div className="flex justify-between items-center text-sm">
<span className="text-gray-700 dark:text-gray-300">Used This Month</span>
<span className="font-semibold text-red-600 dark:text-red-400">
{creditBalance?.credits_used_this_month.toLocaleString() || 0} credits
</span>
</div>
<div className="flex justify-between items-center text-sm">
<span className="text-gray-700 dark:text-gray-300">Remaining Balance</span>
<span className="font-semibold text-success-600 dark:text-success-400">
{creditBalance?.credits_remaining.toLocaleString() || 0} credits
</span>
</div>
{/* Progress Bar */}
<div className="pt-2">
<div className="flex justify-between items-center text-xs text-gray-600 dark:text-gray-400 mb-2">
<span>Usage Progress</span>
<span>
{creditBalance?.credits_used_this_month && creditBalance?.plan_credits_per_month
? `${Math.round((creditBalance.credits_used_this_month / creditBalance.plan_credits_per_month) * 100)}%`
: '0%'}
</span>
</div>
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
<div
className="bg-gradient-to-r from-brand-500 to-brand-600 h-3 rounded-full transition-all duration-300"
style={{
width: creditBalance?.credits_used_this_month && creditBalance?.plan_credits_per_month
? `${Math.min((creditBalance.credits_used_this_month / creditBalance.plan_credits_per_month) * 100, 100)}%`
: '0%'
}}
></div>
</div>
</div>
</div>
</Card>
@@ -585,8 +690,8 @@ export default function PlansAndBillingPage() {
{/* Credit Cost Breakdown */}
<div className="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
<div className="mb-6">
<h2 className="text-xl font-semibold">Credit Cost Analytics</h2>
<p className="text-gray-600 dark:text-gray-400">Cost breakdown by operation type</p>
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">Credit Cost Analytics</h2>
<p className="text-gray-600 dark:text-gray-400">Detailed breakdown of credit usage by operation type</p>
</div>
<CreditCostBreakdownPanel />
</div>
@@ -598,78 +703,190 @@ export default function PlansAndBillingPage() {
</div>
)}
{/* Purchase Credits Tab */}
{activeTab === 'purchase' && (
{/* Purchase/Upgrade Tab */}
{activeTab === 'upgrade' && (
<div className="space-y-6">
<div className="mb-6">
<h2 className="text-xl font-semibold mb-2">Purchase Additional Credits</h2>
<p className="text-gray-600 dark:text-gray-400">Top up your credit balance with our packages</p>
</div>
<div className="overflow-x-auto">
<div className="flex gap-4 pb-4">
{packages.map((pkg) => (
<article key={pkg.id} className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/3 hover:border-[var(--color-brand-500)] dark:hover:border-[var(--color-brand-500)] transition-colors flex-shrink-0" style={{ minWidth: '280px' }}>
<div className="relative p-5 pb-6">
<div className="mb-3 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--color-brand-50)] dark:bg-[var(--color-brand-500)]/10">
<svg className="w-6 h-6 text-[var(--color-brand-500)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 className="mb-2 text-lg font-semibold text-gray-800 dark:text-white/90">
{pkg.name}
</h3>
<div className="flex items-baseline gap-2 mb-1">
<span className="text-3xl font-bold text-[var(--color-brand-500)]">{pkg.credits.toLocaleString()}</span>
<span className="text-sm text-gray-500 dark:text-gray-400">credits</span>
</div>
<div className="text-2xl font-semibold text-gray-900 dark:text-white mb-2">
${pkg.price}
</div>
{pkg.description && (
<p className="text-sm text-gray-500 dark:text-gray-400">
{pkg.description}
</p>
)}
</div>
<div className="border-t border-gray-200 p-4 dark:border-gray-800">
<Button
variant="primary"
tone="brand"
onClick={() => handlePurchase(pkg.id)}
fullWidth
size="md"
disabled={purchaseLoadingId === pkg.id || (!hasPaymentMethods && paymentMethods.length > 0)}
>
{purchaseLoadingId === pkg.id ? 'Processing...' : 'Purchase'}
</Button>
</div>
</article>
))}
{packages.length === 0 && (
<div className="col-span-3 text-center py-12 text-gray-500">
No credit packages available at this time
</div>
)}
{/* Upgrade Plans Section */}
<div>
<div className="mb-6">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
{hasActivePlan ? 'Upgrade or Change Your Plan' : 'Choose Your Plan'}
</h2>
<p className="text-gray-600 dark:text-gray-400 mt-1">
Select the plan that best fits your needs
</p>
</div>
<div className="mx-auto" style={{ maxWidth: '1200px' }}>
<PricingTable
variant="1"
plans={plans
.filter(plan => {
// Only show paid plans (exclude Free Plan)
const planName = (plan.name || '').toLowerCase();
const planPrice = plan.price || 0;
return planPrice > 0 && !planName.includes('free');
})
.map(plan => {
const discount = plan.annual_discount_percent || 15;
return {
id: plan.id,
name: plan.name,
monthlyPrice: plan.price || 0,
price: plan.price || 0,
annualDiscountPercent: discount,
period: `/${plan.interval || 'month'}`,
description: plan.description || 'Standard plan',
features: plan.features && plan.features.length > 0
? plan.features
: ['Monthly credits included', 'Module access', 'Email support'],
buttonText: plan.id === currentPlanId ? 'Current Plan' : 'Select Plan',
highlighted: plan.is_featured || false,
disabled: plan.id === currentPlanId || planLoadingId === plan.id,
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}
onPlanSelect={(plan) => plan.id && handleSelectPlan(plan.id)}
/>
</div>
{/* Plan Change Policy */}
<Card className="p-6 bg-brand-50 dark:bg-brand-900/20 border-brand-200 dark:border-brand-800 mt-6">
<h3 className="font-semibold text-brand-900 dark:text-brand-100 mb-2 flex items-center gap-2">
<AlertCircle className="w-5 h-5" />
Plan Change Policy
</h3>
<ul className="space-y-2 text-sm text-brand-800 dark:text-brand-200">
<li className="flex items-start gap-2">
<CheckCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
Upgrades take effect immediately with prorated billing
</li>
<li className="flex items-start gap-2">
<CheckCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
Downgrades take effect at the end of your current billing period
</li>
<li className="flex items-start gap-2">
<CheckCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
Unused credits carry over when changing plans
</li>
<li className="flex items-start gap-2">
<CheckCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
Cancel anytime - no long-term commitments
</li>
</ul>
</Card>
</div>
{/* Payment Methods Info */}
{!hasPaymentMethods && paymentMethods.length === 0 && (
<Card className="p-6 bg-[var(--color-warning-50)] dark:bg-[var(--color-warning-900)]/20 border-[var(--color-warning-200)] dark:border-[var(--color-warning-700)]">
<div className="flex items-start gap-3">
<AlertCircle className="w-5 h-5 text-[var(--color-warning-600)] mt-0.5" />
<div>
<h3 className="font-semibold text-[var(--color-warning-900)] dark:text-[var(--color-warning-100)] mb-1">
Payment Method Required
</h3>
<p className="text-sm text-[var(--color-warning-800)] dark:text-[var(--color-warning-200)]">
Please contact support to set up a payment method before purchasing credits.
</p>
{/* Purchase Additional Credits Section */}
<div className="mt-12 pt-8 border-t-2 border-gray-200 dark:border-gray-700">
<div className="mb-6">
<h2 className="text-xl font-semibold mb-2 text-gray-900 dark:text-white">Purchase Additional Credits</h2>
<p className="text-gray-600 dark:text-gray-400">Top up your credit balance with our credit packages</p>
</div>
{/* Current Balance Quick View */}
<Card className="p-6 bg-gradient-to-r from-brand-50 to-purple-50 dark:from-brand-900/20 dark:to-purple-900/20 border-brand-200 dark:border-brand-700">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="p-3 bg-brand-500 rounded-lg">
<Wallet className="w-6 h-6 text-white" />
</div>
<div>
<div className="text-sm text-gray-600 dark:text-gray-400">Current Credit Balance</div>
<div className="text-3xl font-bold text-gray-900 dark:text-white">
{creditBalance?.credits.toLocaleString() || 0}
</div>
</div>
</div>
<div className="text-right">
<div className="text-sm text-gray-600 dark:text-gray-400">Monthly Allocation</div>
<div className="text-xl font-bold text-brand-600 dark:text-brand-400">
{creditBalance?.plan_credits_per_month.toLocaleString() || 0}
</div>
</div>
</div>
</Card>
)}
{/* Credit Packages Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
{packages.map((pkg) => (
<Card
key={pkg.id}
className="p-6 hover:shadow-lg transition-all duration-200 hover:border-brand-300 dark:hover:border-brand-600"
>
<div className="mb-4">
<div className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-brand-500 to-brand-600 shadow-md">
<Zap className="w-6 h-6 text-white" />
</div>
</div>
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
{pkg.name}
</h3>
{pkg.description && (
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
{pkg.description}
</p>
)}
<div className="flex items-baseline gap-2 mb-1">
<span className="text-4xl font-bold text-brand-600 dark:text-brand-400">
{pkg.credits.toLocaleString()}
</span>
<span className="text-sm text-gray-500 dark:text-gray-400">credits</span>
</div>
<div className="text-2xl font-semibold text-gray-900 dark:text-white mb-6">
${pkg.price}
</div>
<Button
variant="primary"
tone="brand"
onClick={() => handlePurchase(pkg.id)}
fullWidth
size="md"
disabled={purchaseLoadingId === pkg.id || (!hasPaymentMethods && paymentMethods.length > 0)}
startIcon={purchaseLoadingId === pkg.id ? <Loader2 className="w-4 h-4 animate-spin" /> : undefined}
>
{purchaseLoadingId === pkg.id ? 'Processing...' : 'Purchase Now'}
</Button>
</Card>
))}
{packages.length === 0 && (
<div className="col-span-3 text-center py-16">
<div className="inline-flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 mb-4">
<Package className="w-8 h-8 text-gray-400" />
</div>
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">No Packages Available</h3>
<p className="text-gray-500 dark:text-gray-400">Credit packages will be available soon</p>
</div>
)}
</div>
{/* Payment Methods Info */}
{!hasPaymentMethods && paymentMethods.length === 0 && (
<Card className="p-6 bg-warning-50 dark:bg-warning-900/20 border-warning-200 dark:border-warning-700 mt-6">
<div className="flex items-start gap-3">
<div className="p-2 bg-warning-100 dark:bg-warning-800/50 rounded-lg">
<AlertCircle className="w-5 h-5 text-warning-600 dark:text-warning-400" />
</div>
<div>
<h3 className="font-semibold text-warning-900 dark:text-warning-100 mb-1">
Payment Method Required
</h3>
<p className="text-sm text-warning-800 dark:text-warning-200">
Please contact support to set up a payment method before purchasing credits.
</p>
</div>
</div>
</Card>
)}
</div>
</div>
)}

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

@@ -1,40 +1,44 @@
/**
* Usage & Analytics Page
* Tabs: Limits & Usage, API Usage
* Usage & Analytics Page - Refactored
* Organized tabs: Plan Limits & Usage, Credit Activity, API Usage
*/
import { useState, useEffect } from 'react';
import { TrendingUp, Activity, DollarSign, BarChart3 } from 'lucide-react';
import { TrendingUp, Activity, BarChart3, Zap, Calendar } from 'lucide-react';
import PageMeta from '../../components/common/PageMeta';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { getUsageAnalytics, UsageAnalytics } from '../../services/billing.api';
import { getUsageAnalytics, UsageAnalytics, getCreditBalance, type CreditBalance } from '../../services/billing.api';
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 = 'limits' | 'api' | 'activity';
type TabType = 'limits' | 'activity' | 'api';
export default function UsageAnalyticsPage() {
const toast = useToast();
const [activeTab, setActiveTab] = useState<TabType>('limits');
const [analytics, setAnalytics] = useState<UsageAnalytics | null>(null);
const [creditBalance, setCreditBalance] = useState<CreditBalance | null>(null);
const [loading, setLoading] = useState(true);
const [period, setPeriod] = useState(30);
useEffect(() => {
loadAnalytics();
loadData();
}, [period]);
const loadAnalytics = async () => {
const loadData = async () => {
try {
setLoading(true);
const data = await getUsageAnalytics(period);
setAnalytics(data);
const [analyticsData, balanceData] = await Promise.all([
getUsageAnalytics(period),
getCreditBalance(),
]);
setAnalytics(analyticsData);
setCreditBalance(balanceData);
} catch (error: any) {
toast.error(`Failed to load usage analytics: ${error.message}`);
toast.error(`Failed to load usage data: ${error.message}`);
} finally {
setLoading(false);
}
@@ -43,44 +47,112 @@ export default function UsageAnalyticsPage() {
if (loading) {
return (
<div className="p-6">
<PageMeta title="Usage & Analytics" description="Analyze your usage patterns" />
<PageMeta title="Usage & Analytics" description="Monitor your plan limits and usage" />
<div className="flex items-center justify-center h-64">
<div className="text-gray-500">Loading...</div>
<div className="flex flex-col items-center gap-3">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-500"></div>
<div className="text-gray-500 dark:text-gray-400">Loading usage data...</div>
</div>
</div>
</div>
);
}
const tabs = [
{ 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: '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" /> },
];
return (
<div className="p-6">
<PageMeta title="Usage & Analytics" description="Analyze your usage patterns" />
<PageMeta title="Usage & Analytics" description="Monitor your plan limits and usage" />
{/* Page Header */}
<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 plan limits, credit usage, API calls, and cost breakdown
</p>and API calls
Track plan limits, credit consumption, and API usage patterns
</p>
</div>
<div className="mb-6 flex items-center justify-between">
{/* Quick Stats Overview */}
{creditBalance && (
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
<Card className="p-4 bg-gradient-to-br from-brand-50 to-brand-100 dark:from-brand-900/20 dark:to-brand-800/10 border-brand-200 dark:border-brand-700">
<div className="flex items-center gap-3">
<div className="p-2 bg-brand-500 rounded-lg">
<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-2xl font-bold text-brand-600 dark:text-brand-400">
{creditBalance.credits.toLocaleString()}
</div>
</div>
</div>
</Card>
<Card className="p-4 bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/10 border-purple-200 dark:border-purple-700">
<div className="flex items-center gap-3">
<div className="p-2 bg-purple-500 rounded-lg">
<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-2xl font-bold text-purple-600 dark:text-purple-400">
{creditBalance.credits_used_this_month.toLocaleString()}
</div>
</div>
</div>
</Card>
<Card className="p-4 bg-gradient-to-br from-success-50 to-success-100 dark:from-success-900/20 dark:to-success-800/10 border-success-200 dark:border-success-700">
<div className="flex items-center gap-3">
<div className="p-2 bg-success-500 rounded-lg">
<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-2xl font-bold text-success-600 dark:text-success-400">
{creditBalance.plan_credits_per_month.toLocaleString()}
</div>
</div>
</div>
</Card>
<Card className="p-4 bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-indigo-900/20 dark:to-indigo-800/10 border-indigo-200 dark:border-indigo-700">
<div className="flex items-center gap-3">
<div className="p-2 bg-indigo-500 rounded-lg">
<Calendar className="w-5 h-5 text-white" />
</div>
<div>
<div className="text-xs text-indigo-700 dark:text-indigo-300">Usage %</div>
<div className="text-2xl font-bold text-indigo-600 dark:text-indigo-400">
{creditBalance.plan_credits_per_month > 0
? Math.round((creditBalance.credits_used_this_month / creditBalance.plan_credits_per_month) * 100)
: 0}%
</div>
</div>
</div>
</Card>
</div>
)}
{/* Tabs and Period Selector */}
<div className="mb-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
{/* Tabs */}
<div className="border-b border-gray-200 dark:border-gray-700">
<nav className="-mb-px flex space-x-8">
<div className="border-b border-gray-200 dark:border-gray-700 w-full sm:w-auto">
<nav className="-mb-px flex space-x-8 overflow-x-auto">
{tabs.map((tab) => (
<button
key={tab.id}
onClick={() => setActiveTab(tab.id)}
className={`
flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm
flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm whitespace-nowrap
${activeTab === tab.id
? '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'
? 'border-brand-500 text-brand-600 dark:text-brand-400'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
}
`}
>
@@ -91,35 +163,37 @@ export default function UsageAnalyticsPage() {
</nav>
</div>
{/* Period Selector */}
<div className="flex gap-2">
{[7, 30, 90].map((value) => {
const isActive = period === value;
return (
<Button
key={value}
size="sm"
variant={isActive ? 'primary' : 'secondary'}
tone={isActive ? 'brand' : 'neutral'}
onClick={() => setPeriod(value)}
>
{value} Days
</Button>
);
})}
</div>
{/* Period Selector (only show on activity and api tabs) */}
{(activeTab === 'activity' || activeTab === 'api') && (
<div className="flex gap-2">
{[7, 30, 90].map((value) => {
const isActive = period === value;
return (
<Button
key={value}
size="sm"
variant={isActive ? 'primary' : 'outline'}
tone={isActive ? 'brand' : 'neutral'}
onClick={() => setPeriod(value)}
>
{value} Days
</Button>
);
})}
</div>
)}
</div>
{/* Tab Content */}
<div className="mt-6">
{/* Limits & Usage Tab */}
{/* Plan Limits & Usage Tab */}
{activeTab === 'limits' && (
<div className="space-y-6">
<UsageLimitsPanel />
</div>
)}
{/* Activity Tab */}
{/* Credit Activity Tab */}
{activeTab === 'activity' && (
<div className="space-y-6">
<BillingUsagePanel showOnlyActivity={true} />
@@ -129,52 +203,82 @@ export default function UsageAnalyticsPage() {
{/* API Usage Tab */}
{activeTab === 'api' && (
<div className="space-y-6">
{/* API Stats 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 API Calls</div>
<div className="text-3xl font-bold text-[var(--color-brand-500)]">
<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>
<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}
</div>
<div className="text-sm text-gray-500 dark:text-gray-400 mt-1">in last {period} days</div>
</Card>
<Card className="p-6">
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Avg Calls/Day</div>
<div className="flex items-center gap-3 mb-3">
<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>
<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)}
</div>
<div className="text-sm text-gray-500 dark:text-gray-400 mt-1">daily average</div>
</Card>
<Card className="p-6">
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Success Rate</div>
<div className="text-3xl font-bold text-green-600 dark:text-green-400">
<div className="flex items-center gap-3 mb-3">
<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>
<div className="text-3xl font-bold text-success-600 dark:text-success-400">
98.5%
</div>
<div className="text-sm text-gray-500 dark:text-gray-400 mt-1">successful requests</div>
</Card>
</div>
{/* API Calls by Endpoint */}
<Card className="p-6">
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
API Calls by Endpoint
</h2>
<div className="space-y-3">
<div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
<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">/api/v1/content/generate</div>
<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-lg font-bold">1,234</div>
<div className="text-xs text-gray-500">calls</div>
<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>
</div>
<div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
<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">/api/v1/keywords/cluster</div>
<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-lg font-bold">567</div>
<div className="text-xs text-gray-500">calls</div>
<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>
<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>
@@ -182,30 +286,6 @@ export default function UsageAnalyticsPage() {
</div>
)}
</div>
{/* Summary Cards */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6 hidden">
<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>
</div>
);
}