286 lines
11 KiB
TypeScript
286 lines
11 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import PageMeta from '../../components/common/PageMeta';
|
|
import { useToast } from '../../components/ui/toast/ToastContainer';
|
|
import { fetchCreditUsage, CreditUsageLog, fetchUsageLimits, LimitCard } from '../../services/api';
|
|
import { Card } from '../../components/ui/card';
|
|
import Badge from '../../components/ui/badge/Badge';
|
|
|
|
export default function Usage() {
|
|
const toast = useToast();
|
|
const [usageLogs, setUsageLogs] = useState<CreditUsageLog[]>([]);
|
|
const [limits, setLimits] = useState<LimitCard[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [limitsLoading, setLimitsLoading] = useState(true);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
|
|
useEffect(() => {
|
|
loadUsage();
|
|
loadLimits();
|
|
}, [currentPage]);
|
|
|
|
const loadUsage = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await fetchCreditUsage({ page: currentPage });
|
|
setUsageLogs(response.results || []);
|
|
} catch (error: any) {
|
|
toast.error(`Failed to load usage logs: ${error.message}`);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const loadLimits = async () => {
|
|
try {
|
|
setLimitsLoading(true);
|
|
const response = await fetchUsageLimits();
|
|
console.log('Usage limits response:', response);
|
|
setLimits(response.limits || []);
|
|
if (!response.limits || response.limits.length === 0) {
|
|
console.warn('No limits data received from API');
|
|
}
|
|
} catch (error: any) {
|
|
console.error('Error loading usage limits:', error);
|
|
toast.error(`Failed to load usage limits: ${error.message}`);
|
|
setLimits([]);
|
|
} finally {
|
|
setLimitsLoading(false);
|
|
}
|
|
};
|
|
|
|
const groupedLimits = {
|
|
planner: limits.filter(l => l.category === 'planner'),
|
|
writer: limits.filter(l => l.category === 'writer'),
|
|
images: limits.filter(l => l.category === 'images'),
|
|
ai: limits.filter(l => l.category === 'ai'),
|
|
general: limits.filter(l => l.category === 'general'),
|
|
};
|
|
|
|
// Debug info
|
|
console.log('[Usage Component] Render state:', {
|
|
limitsLoading,
|
|
limitsCount: limits.length,
|
|
groupedLimits,
|
|
plannerCount: groupedLimits.planner.length,
|
|
writerCount: groupedLimits.writer.length,
|
|
imagesCount: groupedLimits.images.length,
|
|
aiCount: groupedLimits.ai.length,
|
|
generalCount: groupedLimits.general.length,
|
|
});
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<PageMeta title="Usage" description="Monitor your plan limits and usage statistics" />
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Acoount Limits & Usage</h1>
|
|
<p className="text-gray-600 dark:text-gray-400 mt-1">Monitor your plan limits and usage statistics</p>
|
|
</div>
|
|
|
|
{/* Debug Info - Remove in production */}
|
|
{import.meta.env.DEV && (
|
|
<Card className="p-4 mb-4 bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800">
|
|
<div className="text-xs text-gray-600 dark:text-gray-400">
|
|
<strong>Debug:</strong> Loading={limitsLoading ? 'Yes' : 'No'}, Limits={limits.length},
|
|
Planner={groupedLimits.planner.length}, Writer={groupedLimits.writer.length},
|
|
Images={groupedLimits.images.length}, AI={groupedLimits.ai.length}, General={groupedLimits.general.length}
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Limit Cards by Category */}
|
|
{limitsLoading ? (
|
|
<Card className="p-6 mb-8">
|
|
<div className="flex items-center justify-center h-32">
|
|
<div className="text-gray-500">Loading limits...</div>
|
|
</div>
|
|
</Card>
|
|
) : limits.length === 0 ? (
|
|
<Card className="p-6 mb-8">
|
|
<div className="text-center text-gray-500 dark:text-gray-400">
|
|
<p className="mb-2 font-medium">No usage limits data available.</p>
|
|
<p className="text-sm">The API endpoint may not be responding or your account may not have a plan configured.</p>
|
|
<p className="text-xs mt-2 text-gray-400">Check browser console for errors. Endpoint: /v1/billing/credits/usage/limits/</p>
|
|
</div>
|
|
</Card>
|
|
) : (
|
|
<div className="space-y-6 mb-8">
|
|
{/* Planner Limits */}
|
|
{groupedLimits.planner.length > 0 && (
|
|
<div>
|
|
<h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Planner Limits</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{groupedLimits.planner.map((limit, idx) => (
|
|
<LimitCardComponent key={idx} limit={limit} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Writer Limits */}
|
|
{groupedLimits.writer.length > 0 && (
|
|
<div>
|
|
<h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Writer Limits</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{groupedLimits.writer.map((limit, idx) => (
|
|
<LimitCardComponent key={idx} limit={limit} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Image Limits */}
|
|
{groupedLimits.images.length > 0 && (
|
|
<div>
|
|
<h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Image Generation Limits</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{groupedLimits.images.map((limit, idx) => (
|
|
<LimitCardComponent key={idx} limit={limit} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* AI Credits */}
|
|
{groupedLimits.ai.length > 0 && (
|
|
<div>
|
|
<h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">AI Credits</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{groupedLimits.ai.map((limit, idx) => (
|
|
<LimitCardComponent key={idx} limit={limit} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* General Limits */}
|
|
{groupedLimits.general.length > 0 && (
|
|
<div>
|
|
<h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">General Limits</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{groupedLimits.general.map((limit, idx) => (
|
|
<LimitCardComponent key={idx} limit={limit} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Usage Logs Table */}
|
|
<div className="mb-6">
|
|
<h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Usage Logs</h2>
|
|
{loading ? (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-gray-500">Loading...</div>
|
|
</div>
|
|
) : (
|
|
<Card className="p-6">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200 dark:border-gray-700">
|
|
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Date</th>
|
|
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Operation</th>
|
|
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Credits Used</th>
|
|
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Model</th>
|
|
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Cost (USD)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{usageLogs.map((log) => (
|
|
<tr key={log.id} className="border-b border-gray-100 dark:border-gray-800">
|
|
<td className="py-3 px-4 text-sm text-gray-900 dark:text-white">
|
|
{new Date(log.created_at).toLocaleString()}
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<Badge variant="light" color="primary">{log.operation_type_display}</Badge>
|
|
</td>
|
|
<td className="py-3 px-4 text-sm font-medium text-gray-900 dark:text-white">
|
|
{log.credits_used}
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">
|
|
{log.model_used || 'N/A'}
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">
|
|
{log.cost_usd ? `$${parseFloat(log.cost_usd).toFixed(4)}` : 'N/A'}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Limit Card Component
|
|
function LimitCardComponent({ limit }: { limit: LimitCard }) {
|
|
const getCategoryColor = (category: string) => {
|
|
switch (category) {
|
|
case 'planner': return 'blue';
|
|
case 'writer': return 'green';
|
|
case 'images': return 'purple';
|
|
case 'ai': return 'orange';
|
|
case 'general': return 'gray';
|
|
default: return 'gray';
|
|
}
|
|
};
|
|
|
|
const getUsageStatus = (percentage: number) => {
|
|
if (percentage >= 90) return 'danger';
|
|
if (percentage >= 75) return 'warning';
|
|
return 'success';
|
|
};
|
|
|
|
const percentage = Math.min(limit.percentage, 100);
|
|
const status = getUsageStatus(percentage);
|
|
const color = getCategoryColor(limit.category);
|
|
|
|
const statusColorClass = status === 'danger'
|
|
? 'bg-red-500'
|
|
: status === 'warning'
|
|
? 'bg-yellow-500'
|
|
: 'bg-green-500';
|
|
|
|
const statusTextColor = status === 'danger'
|
|
? 'text-red-600 dark:text-red-400'
|
|
: status === 'warning'
|
|
? 'text-yellow-600 dark:text-yellow-400'
|
|
: 'text-green-600 dark:text-green-400';
|
|
|
|
return (
|
|
<Card className="p-4">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">{limit.title}</h3>
|
|
<Badge variant="light" color={color as any}>{limit.category}</Badge>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="flex items-baseline gap-2">
|
|
<span className="text-2xl font-bold text-gray-900 dark:text-white">{limit.used.toLocaleString()}</span>
|
|
<span className="text-sm text-gray-500 dark:text-gray-400">/ {limit.limit.toLocaleString()}</span>
|
|
<span className="text-xs text-gray-400 dark:text-gray-500">{limit.unit}</span>
|
|
</div>
|
|
<div className="mt-2">
|
|
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
|
<div
|
|
className={`h-2 rounded-full ${statusColorClass}`}
|
|
style={{ width: `${percentage}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between text-xs">
|
|
<span className={statusTextColor}>
|
|
{limit.available.toLocaleString()} available
|
|
</span>
|
|
<span className="text-gray-500 dark:text-gray-400">
|
|
{percentage.toFixed(1)}% used
|
|
</span>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|