328 lines
13 KiB
TypeScript
328 lines
13 KiB
TypeScript
/**
|
|
* Usage & Analytics Page
|
|
* Tabs: Credit Usage, API Usage, Cost Breakdown
|
|
*/
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { TrendingUp, Activity, DollarSign } from 'lucide-react';
|
|
import PageMeta from '../../components/common/PageMeta';
|
|
import { useToast } from '../../components/ui/toast/ToastContainer';
|
|
import { getUsageAnalytics, UsageAnalytics } from '../../services/billing.api';
|
|
import { Card } from '../../components/ui/card';
|
|
import Badge from '../../components/ui/badge/Badge';
|
|
|
|
type TabType = 'credits' | 'api' | 'costs';
|
|
|
|
export default function UsageAnalyticsPage() {
|
|
const toast = useToast();
|
|
const [activeTab, setActiveTab] = useState<TabType>('credits');
|
|
const [analytics, setAnalytics] = useState<UsageAnalytics | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [period, setPeriod] = useState(30);
|
|
|
|
useEffect(() => {
|
|
loadAnalytics();
|
|
}, [period]);
|
|
|
|
const loadAnalytics = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const data = await getUsageAnalytics(period);
|
|
setAnalytics(data);
|
|
} catch (error: any) {
|
|
toast.error(`Failed to load usage analytics: ${error.message}`);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="p-6">
|
|
<PageMeta title="Usage & Analytics" description="Analyze your usage patterns" />
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-gray-500">Loading...</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const tabs = [
|
|
{ id: 'credits' as TabType, label: 'Credit Usage', 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 (
|
|
<div className="p-6">
|
|
<PageMeta title="Usage & Analytics" description="Analyze your usage patterns" />
|
|
|
|
<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
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mb-6 flex items-center justify-between">
|
|
{/* Tabs */}
|
|
<div className="border-b border-gray-200 dark:border-gray-700">
|
|
<nav className="-mb-px flex space-x-8">
|
|
{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
|
|
${activeTab === tab.id
|
|
? 'border-blue-500 text-blue-600 dark:text-blue-400'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400'
|
|
}
|
|
`}
|
|
>
|
|
{tab.icon}
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Period Selector */}
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => setPeriod(7)}
|
|
className={`px-4 py-2 rounded-md text-sm font-medium ${
|
|
period === 7
|
|
? 'bg-primary-600 text-white'
|
|
: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
|
|
}`}
|
|
>
|
|
7 Days
|
|
</button>
|
|
<button
|
|
onClick={() => setPeriod(30)}
|
|
className={`px-4 py-2 rounded-md text-sm font-medium ${
|
|
period === 30
|
|
? 'bg-primary-600 text-white'
|
|
: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
|
|
}`}
|
|
>
|
|
30 Days
|
|
</button>
|
|
<button
|
|
onClick={() => setPeriod(90)}
|
|
className={`px-4 py-2 rounded-md text-sm font-medium ${
|
|
period === 90
|
|
? 'bg-primary-600 text-white'
|
|
: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
|
|
}`}
|
|
>
|
|
90 Days
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tab Content */}
|
|
<div className="mt-6">
|
|
{/* 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>
|
|
</div>
|
|
)}
|
|
|
|
{/* API Usage Tab */}
|
|
{activeTab === 'api' && (
|
|
<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 API Calls</div>
|
|
<div className="text-3xl font-bold text-blue-600 dark:text-blue-400">
|
|
{analytics?.usage_by_type.reduce((sum, item) => sum + item.count, 0).toLocaleString() || 0}
|
|
</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="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>
|
|
</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">
|
|
98.5%
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<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-1">
|
|
<div className="font-medium">/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>
|
|
</div>
|
|
<div 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">/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>
|
|
</div>
|
|
</div>
|
|
</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 */}
|
|
<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>
|
|
);
|
|
}
|