Nurfog
995065df4f
- Fix localStorage token key from 'token' to 'studio_token' - Add debug logging for token authentication - Add automatic redirect to login on 401 - Add error messages for missing/expired tokens Affected pages: - /admin/token-usage - /admin/users - /admin Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
524 lines
31 KiB
TypeScript
524 lines
31 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { ShieldCheck, TrendingUp, Users, AlertTriangle, DollarSign, Activity, Edit2, Save, X, Gauge } from 'lucide-react';
|
|
import { cmsApi } from '@/lib/api';
|
|
|
|
interface TokenUsage {
|
|
user_id: string;
|
|
email: string;
|
|
full_name: string;
|
|
role: string;
|
|
total_tokens: number;
|
|
input_tokens: number;
|
|
output_tokens: number;
|
|
ai_requests: number;
|
|
last_used: string;
|
|
estimated_cost_usd: number;
|
|
monthly_token_limit?: number;
|
|
token_limit_reset_day?: number;
|
|
}
|
|
|
|
interface TokenStats {
|
|
total_tokens: number;
|
|
total_input: number;
|
|
total_output: number;
|
|
total_requests: number;
|
|
total_cost_usd: number;
|
|
top_user_tokens: number;
|
|
avg_tokens_per_user: number;
|
|
}
|
|
|
|
interface UserLimit {
|
|
user_id: string;
|
|
monthly_limit: number;
|
|
used_tokens: number;
|
|
remaining_tokens: number;
|
|
percentage_used: number;
|
|
reset_day: number;
|
|
}
|
|
|
|
export default function AdminTokenTracking() {
|
|
const [usage, setUsage] = useState<TokenUsage[]>([]);
|
|
const [stats, setStats] = useState<TokenStats | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [filterRole, setFilterRole] = useState<string>('');
|
|
const [sortBy, setSortBy] = useState<'total_tokens' | 'ai_requests' | 'estimated_cost_usd' | 'percentage_used'>('total_tokens');
|
|
const [editingLimit, setEditingLimit] = useState<string | null>(null);
|
|
const [editValue, setEditValue] = useState<number>(0);
|
|
const [userLimits, setUserLimits] = useState<Record<string, UserLimit>>({});
|
|
|
|
useEffect(() => {
|
|
loadTokenUsage();
|
|
}, []);
|
|
|
|
const loadTokenUsage = async () => {
|
|
try {
|
|
const token = localStorage.getItem('studio_token');
|
|
console.log('[TokenUsage] Token from localStorage:', token ? 'Present (studio_token)' : 'Missing');
|
|
|
|
if (!token) {
|
|
console.error('[TokenUsage] No authentication token found!');
|
|
alert('No authentication token found. Please login again.');
|
|
window.location.href = '/auth/login';
|
|
return;
|
|
}
|
|
|
|
const response = await fetch(`${process.env.NEXT_PUBLIC_CMS_API_URL || 'http://localhost:3001'}/admin/token-usage`, {
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
});
|
|
|
|
console.log('[TokenUsage] API Response status:', response.status);
|
|
|
|
if (response.status === 401) {
|
|
console.error('[TokenUsage] Unauthorized - Token may be expired');
|
|
alert('Session expired. Please login again.');
|
|
window.location.href = '/auth/login';
|
|
return;
|
|
}
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setUsage(data.usage || []);
|
|
setStats(data.stats);
|
|
|
|
// Load limits for each user
|
|
const limits: Record<string, UserLimit> = {};
|
|
for (const user of data.usage || []) {
|
|
try {
|
|
const limitResp = await fetch(
|
|
`${process.env.NEXT_PUBLIC_CMS_API_URL || 'http://localhost:3001'}/admin/users/${user.user_id}/token-limit/check`,
|
|
{
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('studio_token')}`,
|
|
},
|
|
}
|
|
);
|
|
if (limitResp.ok) {
|
|
const limitData = await limitResp.json();
|
|
limits[user.user_id] = {
|
|
user_id: user.user_id,
|
|
monthly_limit: limitData.monthly_limit,
|
|
used_tokens: limitData.used_tokens,
|
|
remaining_tokens: limitData.remaining_tokens,
|
|
percentage_used: limitData.monthly_limit > 0
|
|
? Math.round((limitData.used_tokens / limitData.monthly_limit) * 100)
|
|
: 0,
|
|
reset_day: 1,
|
|
};
|
|
}
|
|
} catch (err) {
|
|
console.error(`Failed to load limit for user ${user.user_id}:`, err);
|
|
}
|
|
}
|
|
setUserLimits(limits);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load token usage:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleUpdateLimit = async (userId: string) => {
|
|
try {
|
|
const response = await fetch(
|
|
`${process.env.NEXT_PUBLIC_CMS_API_URL || 'http://localhost:3001'}/admin/users/${userId}/token-limit`,
|
|
{
|
|
method: 'PUT',
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('studio_token')}`,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
monthly_token_limit: editValue,
|
|
token_limit_reset_day: 1,
|
|
}),
|
|
}
|
|
);
|
|
|
|
if (response.ok) {
|
|
// Reload limits
|
|
const limitResp = await fetch(
|
|
`${process.env.NEXT_PUBLIC_CMS_API_URL || 'http://localhost:3001'}/admin/users/${userId}/token-limit/check`,
|
|
{
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('studio_token')}`,
|
|
},
|
|
}
|
|
);
|
|
if (limitResp.ok) {
|
|
const limitData = await limitResp.json();
|
|
setUserLimits(prev => ({
|
|
...prev,
|
|
[userId]: {
|
|
user_id: userId,
|
|
monthly_limit: limitData.monthly_limit,
|
|
used_tokens: limitData.used_tokens,
|
|
remaining_tokens: limitData.remaining_tokens,
|
|
percentage_used: limitData.monthly_limit > 0
|
|
? Math.round((limitData.used_tokens / limitData.monthly_limit) * 100)
|
|
: 0,
|
|
reset_day: 1,
|
|
},
|
|
}));
|
|
}
|
|
setEditingLimit(null);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to update limit:', error);
|
|
alert('Failed to update token limit');
|
|
}
|
|
};
|
|
|
|
const getLimitColor = (percentage: number) => {
|
|
if (percentage >= 100) return 'text-red-600 bg-red-50 dark:bg-red-900/20';
|
|
if (percentage >= 90) return 'text-orange-600 bg-orange-50 dark:bg-orange-900/20';
|
|
if (percentage >= 80) return 'text-yellow-600 bg-yellow-50 dark:bg-yellow-900/20';
|
|
return 'text-green-600 bg-green-50 dark:bg-green-900/20';
|
|
};
|
|
|
|
const getProgressBarColor = (percentage: number) => {
|
|
if (percentage >= 100) return 'bg-red-600';
|
|
if (percentage >= 90) return 'bg-orange-600';
|
|
if (percentage >= 80) return 'bg-yellow-600';
|
|
return 'bg-green-600';
|
|
};
|
|
|
|
const filteredUsage = usage
|
|
.filter(u => !filterRole || u.role === filterRole)
|
|
.sort((a, b) => {
|
|
if (sortBy === 'percentage_used') {
|
|
const aPct = userLimits[a.user_id]?.percentage_used || 0;
|
|
const bPct = userLimits[b.user_id]?.percentage_used || 0;
|
|
return bPct - aPct;
|
|
}
|
|
return b[sortBy] - a[sortBy];
|
|
});
|
|
|
|
const formatNumber = (num: number) => new Intl.NumberFormat('en-US').format(num);
|
|
const formatCurrency = (num: number) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(num);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
|
|
{/* Header */}
|
|
<div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<ShieldCheck className="w-8 h-8 text-indigo-600" />
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
|
Control Global - Token Usage
|
|
</h1>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
|
Monitoreo de tokens de IA, límites mensuales y costos del sistema
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Cards */}
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
{stats && (
|
|
<>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">Total Tokens</p>
|
|
<p className="text-2xl font-bold text-gray-900 dark:text-white">
|
|
{formatNumber(stats.total_tokens)}
|
|
</p>
|
|
</div>
|
|
<TrendingUp className="w-8 h-8 text-blue-600" />
|
|
</div>
|
|
<div className="mt-2 text-xs text-gray-500">
|
|
Input: {formatNumber(stats.total_input)} | Output: {formatNumber(stats.total_output)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">Requests IA</p>
|
|
<p className="text-2xl font-bold text-gray-900 dark:text-white">
|
|
{formatNumber(stats.total_requests)}
|
|
</p>
|
|
</div>
|
|
<Activity className="w-8 h-8 text-green-600" />
|
|
</div>
|
|
<div className="mt-2 text-xs text-gray-500">
|
|
Avg: {formatNumber(stats.avg_tokens_per_user)} tokens/user
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">Costo Estimado</p>
|
|
<p className="text-2xl font-bold text-gray-900 dark:text-white">
|
|
{formatCurrency(stats.total_cost_usd)}
|
|
</p>
|
|
</div>
|
|
<DollarSign className="w-8 h-8 text-green-600" />
|
|
</div>
|
|
<div className="mt-2 text-xs text-gray-500">
|
|
Top user: {formatNumber(stats.top_user_tokens)} tokens
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">Usuarios Activos</p>
|
|
<p className="text-2xl font-bold text-gray-900 dark:text-white">
|
|
{usage.length}
|
|
</p>
|
|
</div>
|
|
<Users className="w-8 h-8 text-purple-600" />
|
|
</div>
|
|
<div className="mt-2 text-xs text-gray-500">
|
|
Monitoreando uso de IA
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Alerts */}
|
|
{Object.values(userLimits).some(ul => ul.percentage_used >= 80) && (
|
|
<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 mb-6 flex items-start gap-3">
|
|
<AlertTriangle className="w-5 h-5 text-yellow-600 shrink-0 mt-0.5" />
|
|
<div>
|
|
<h4 className="font-semibold text-yellow-900 dark:text-yellow-100 text-sm">
|
|
Usuarios cerca del límite
|
|
</h4>
|
|
<p className="text-xs text-yellow-700 dark:text-yellow-300 mt-1">
|
|
{Object.values(userLimits).filter(ul => ul.percentage_used >= 80 && ul.percentage_used < 100).length} usuario(s) han usado ≥80% de su límite mensual.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{Object.values(userLimits).some(ul => ul.percentage_used >= 100) && (
|
|
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6 flex items-start gap-3">
|
|
<AlertTriangle className="w-5 h-5 text-red-600 shrink-0 mt-0.5" />
|
|
<div>
|
|
<h4 className="font-semibold text-red-900 dark:text-red-100 text-sm">
|
|
Límite excedido
|
|
</h4>
|
|
<p className="text-xs text-red-700 dark:text-red-300 mt-1">
|
|
{Object.values(userLimits).filter(ul => ul.percentage_used >= 100).length} usuario(s) han excedido su límite mensual.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Filters */}
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 mb-6">
|
|
<div className="flex items-center gap-4 flex-wrap">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
|
|
Filtrar por Rol
|
|
</label>
|
|
<select
|
|
value={filterRole}
|
|
onChange={(e) => setFilterRole(e.target.value)}
|
|
className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm dark:bg-gray-700 dark:text-white"
|
|
>
|
|
<option value="">Todos</option>
|
|
<option value="student">Estudiantes</option>
|
|
<option value="instructor">Instructores</option>
|
|
<option value="admin">Admins</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
|
|
Ordenar por
|
|
</label>
|
|
<select
|
|
value={sortBy}
|
|
onChange={(e) => setSortBy(e.target.value as any)}
|
|
className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm dark:bg-gray-700 dark:text-white"
|
|
>
|
|
<option value="total_tokens">Total Tokens</option>
|
|
<option value="ai_requests">Requests IA</option>
|
|
<option value="estimated_cost_usd">Costo USD</option>
|
|
<option value="percentage_used">% Usado</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Usage Table */}
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
|
|
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
|
<h3 className="font-semibold text-gray-900 dark:text-white">
|
|
Uso por Usuario
|
|
</h3>
|
|
<div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
|
|
<Gauge className="w-4 h-4" />
|
|
<span>Límites mensuales configurables</span>
|
|
</div>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-gray-50 dark:bg-gray-700">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
Usuario
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
Rol
|
|
</th>
|
|
<th className="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
Límite Mensual
|
|
</th>
|
|
<th className="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
% Usado
|
|
</th>
|
|
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
Total Tokens
|
|
</th>
|
|
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
Requests
|
|
</th>
|
|
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
Costo USD
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
|
|
{filteredUsage.map((user) => {
|
|
const limit = userLimits[user.user_id];
|
|
const percentage = limit?.percentage_used || 0;
|
|
const isUnlimited = limit?.monthly_limit === 0;
|
|
|
|
return (
|
|
<tr key={user.user_id} className="hover:bg-gray-50 dark:hover:bg-gray-700/50">
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div>
|
|
<div className="text-sm font-medium text-gray-900 dark:text-white">
|
|
{user.full_name}
|
|
</div>
|
|
<div className="text-xs text-gray-500 dark:text-gray-400">
|
|
{user.email}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<span className={`px-2 py-1 text-xs font-medium rounded capitalize ${
|
|
user.role === 'admin' ? 'bg-purple-100 text-purple-800' :
|
|
user.role === 'instructor' ? 'bg-blue-100 text-blue-800' :
|
|
'bg-green-100 text-green-800'
|
|
}`}>
|
|
{user.role}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-center">
|
|
{editingLimit === user.user_id ? (
|
|
<div className="flex items-center justify-center gap-2">
|
|
<input
|
|
type="number"
|
|
value={editValue}
|
|
onChange={(e) => setEditValue(parseInt(e.target.value) || 0)}
|
|
className="w-24 px-2 py-1 border border-gray-300 dark:border-gray-600 rounded text-sm dark:bg-gray-700 dark:text-white"
|
|
placeholder="0 = unlimited"
|
|
autoFocus
|
|
/>
|
|
<button
|
|
onClick={() => handleUpdateLimit(user.user_id)}
|
|
className="p-1 text-green-600 hover:bg-green-50 rounded"
|
|
>
|
|
<Save className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => setEditingLimit(null)}
|
|
className="p-1 text-gray-600 hover:bg-gray-100 rounded"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center justify-center gap-2">
|
|
<span className={`text-sm font-medium ${
|
|
isUnlimited ? 'text-gray-400' :
|
|
percentage >= 100 ? 'text-red-600' :
|
|
percentage >= 80 ? 'text-yellow-600' :
|
|
'text-gray-900 dark:text-white'
|
|
}`}>
|
|
{isUnlimited ? '∞' : formatNumber(limit?.monthly_limit || 0)}
|
|
</span>
|
|
{!isUnlimited && limit && (
|
|
<button
|
|
onClick={() => {
|
|
setEditingLimit(user.user_id);
|
|
setEditValue(limit.monthly_limit);
|
|
}}
|
|
className="p-1 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors"
|
|
title="Edit limit"
|
|
>
|
|
<Edit2 className="w-3 h-3" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-center">
|
|
{isUnlimited ? (
|
|
<span className="text-xs text-gray-400">Unlimited</span>
|
|
) : (
|
|
<div className="flex flex-col items-center gap-1">
|
|
<span className={`text-xs font-bold px-2 py-1 rounded ${getLimitColor(percentage)}`}>
|
|
{percentage}%
|
|
</span>
|
|
<div className="w-24 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
|
<div
|
|
className={`h-full ${getProgressBarColor(percentage)} transition-all duration-500`}
|
|
style={{ width: `${Math.min(percentage, 100)}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-right">
|
|
<span className={`text-sm font-medium ${
|
|
user.total_tokens > 1000000 ? 'text-red-600' :
|
|
user.total_tokens > 500000 ? 'text-yellow-600' :
|
|
'text-gray-900 dark:text-white'
|
|
}`}>
|
|
{formatNumber(user.total_tokens)}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-500 dark:text-gray-400">
|
|
{formatNumber(user.ai_requests)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium text-gray-900 dark:text-white">
|
|
{formatCurrency(user.estimated_cost_usd)}
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{loading && (
|
|
<div className="text-center py-12">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
|
|
<p className="mt-4 text-gray-600 dark:text-gray-400">Cargando estadísticas de tokens...</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|