mirror of
https://github.com/YouXam/claude-code-usage-dashboard.git
synced 2026-02-04 23:22:38 +08:00
343 lines
13 KiB
TypeScript
343 lines
13 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { UsageProgressBar } from './UsageProgressBar';
|
|
|
|
interface ClaudeAccount {
|
|
id: string;
|
|
name: string;
|
|
status: string;
|
|
accountType: string;
|
|
lastUsedAt: string | null;
|
|
usage?: {
|
|
daily?: {
|
|
tokens: number;
|
|
requests: number;
|
|
cost: number;
|
|
};
|
|
};
|
|
claudeUsage?: {
|
|
fiveHour?: {
|
|
utilization: number;
|
|
resetsAt: string;
|
|
remainingSeconds: number;
|
|
};
|
|
sevenDay?: {
|
|
utilization: number;
|
|
resetsAt: string;
|
|
remainingSeconds: number;
|
|
};
|
|
sevenDayOpus?: {
|
|
utilization: number;
|
|
resetsAt: string;
|
|
remainingSeconds: number;
|
|
};
|
|
};
|
|
}
|
|
|
|
interface OpenAIAccount {
|
|
id: string;
|
|
name: string;
|
|
status: string;
|
|
accountType: string;
|
|
lastUsedAt: string | null;
|
|
usage?: {
|
|
daily?: {
|
|
tokens: number;
|
|
requests: number;
|
|
cost: number;
|
|
};
|
|
};
|
|
codexUsage?: {
|
|
primary?: {
|
|
usedPercent: number;
|
|
resetAfterSeconds: number;
|
|
resetAt: string;
|
|
};
|
|
secondary?: {
|
|
usedPercent: number;
|
|
resetAfterSeconds: number;
|
|
resetAt: string;
|
|
};
|
|
};
|
|
}
|
|
|
|
type UnifiedAccount = (ClaudeAccount | OpenAIAccount) & {
|
|
platform: 'claude' | 'openai';
|
|
};
|
|
|
|
interface AIAccountsProps {
|
|
apiKey: string;
|
|
}
|
|
|
|
export function AIAccounts({ apiKey }: AIAccountsProps) {
|
|
const [claudeAccounts, setClaudeAccounts] = useState<ClaudeAccount[]>([]);
|
|
const [openaiAccounts, setOpenaiAccounts] = useState<OpenAIAccount[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [isRefreshing, setIsRefreshing] = useState(false);
|
|
const [error, setError] = useState<string>('');
|
|
|
|
useEffect(() => {
|
|
fetchAccounts();
|
|
const interval = setInterval(fetchAccounts, 30000);
|
|
return () => clearInterval(interval);
|
|
}, [apiKey]);
|
|
|
|
const fetchAccounts = async (isRefresh = false) => {
|
|
if (isRefresh) {
|
|
setIsRefreshing(true);
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/ai-accounts', {
|
|
headers: {
|
|
'X-API-Key': apiKey,
|
|
},
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch AI accounts');
|
|
}
|
|
|
|
const data = await response.json();
|
|
setClaudeAccounts(data.claude || []);
|
|
setOpenaiAccounts(data.openai || []);
|
|
setError('');
|
|
} catch (err) {
|
|
console.error('Error fetching AI accounts:', err);
|
|
setError(err instanceof Error ? err.message : 'Failed to load AI accounts');
|
|
} finally {
|
|
setIsLoading(false);
|
|
if (isRefresh) {
|
|
setIsRefreshing(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
const formatLastUsed = (lastUsedAt: string | null) => {
|
|
if (!lastUsedAt) return 'Never';
|
|
const date = new Date(lastUsedAt);
|
|
const now = new Date();
|
|
const diffMs = now.getTime() - date.getTime();
|
|
const diffMins = Math.floor(diffMs / 60000);
|
|
|
|
if (diffMins < 1) return 'Just now';
|
|
if (diffMins < 60) return `${diffMins}m ago`;
|
|
const diffHours = Math.floor(diffMins / 60);
|
|
if (diffHours < 24) return `${diffHours}h ago`;
|
|
const diffDays = Math.floor(diffHours / 24);
|
|
return `${diffDays}d ago`;
|
|
};
|
|
|
|
const formatTime = (seconds: number) => {
|
|
if (seconds <= 0) return '0m';
|
|
const days = Math.floor(seconds / 86400);
|
|
const hours = Math.floor((seconds % 86400) / 3600);
|
|
const minutes = Math.floor((seconds % 3600) / 60);
|
|
|
|
if (days > 0) {
|
|
if (hours > 0) return `${days}d ${hours}h`;
|
|
return `${days}d`;
|
|
}
|
|
if (hours > 0) return `${hours}h ${minutes}m`;
|
|
return `${minutes}m`;
|
|
};
|
|
|
|
const getStatusColor = (status: string) => {
|
|
switch (status) {
|
|
case 'active':
|
|
return 'bg-chart-1 text-white';
|
|
case 'blocked':
|
|
return 'bg-chart-2 text-white';
|
|
case 'unauthorized':
|
|
return 'bg-chart-3 text-white';
|
|
case 'temp_error':
|
|
return 'bg-chart-4 text-white';
|
|
default:
|
|
return 'bg-chart-5 text-white';
|
|
}
|
|
};
|
|
|
|
const getAccountName = (account: UnifiedAccount, totalCount: number) => {
|
|
if (totalCount === 1) {
|
|
return account.platform === 'claude' ? 'Claude' : 'OpenAI';
|
|
}
|
|
return `${account.platform === 'claude' ? 'Claude' : 'OpenAI'} (${account.name})`;
|
|
};
|
|
|
|
// Merge accounts
|
|
const allAccounts: UnifiedAccount[] = [
|
|
...claudeAccounts.map(acc => ({ ...acc, platform: 'claude' as const })),
|
|
...openaiAccounts.map(acc => ({ ...acc, platform: 'openai' as const })),
|
|
];
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="bg-card rounded-lg shadow-sm border border-border overflow-hidden mb-6">
|
|
<div className="px-6 py-4 border-b border-border">
|
|
<h3 className="text-lg font-medium text-card-foreground">AI Accounts Status</h3>
|
|
</div>
|
|
<div className="flex items-center justify-center py-12">
|
|
<svg className="animate-spin h-6 w-6 text-muted-foreground" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<span className="ml-3 text-muted-foreground">Loading accounts...</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="bg-card rounded-lg shadow-sm border border-border overflow-hidden mb-6">
|
|
<div className="px-6 py-4 border-b border-border">
|
|
<h3 className="text-lg font-medium text-card-foreground">AI Accounts Status</h3>
|
|
</div>
|
|
<div className="text-center py-12">
|
|
<p className="text-destructive">{error}</p>
|
|
<button
|
|
onClick={() => fetchAccounts(true)}
|
|
className="mt-3 text-sm text-primary hover:underline"
|
|
>
|
|
Retry
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="bg-card rounded-lg shadow-sm border border-border overflow-hidden mb-6">
|
|
<div className="px-6 py-4 border-b border-border">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-medium text-card-foreground">AI Accounts Status</h3>
|
|
<button
|
|
onClick={() => fetchAccounts(true)}
|
|
disabled={isRefreshing}
|
|
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<svg
|
|
className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`}
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
{isRefreshing ? 'Refreshing...' : 'Refresh'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{allAccounts.length > 0 ? (
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-border">
|
|
<thead className="bg-muted/50">
|
|
<tr>
|
|
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Account</th>
|
|
<th scope="col" className="px-3 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Status</th>
|
|
<th scope="col" className="px-3 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Daily Usage</th>
|
|
<th scope="col" className="px-3 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Usage Windows</th>
|
|
<th scope="col" className="px-3 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Last Used</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-card divide-y divide-border">
|
|
{allAccounts.map((account) => {
|
|
const platformCount = account.platform === 'claude' ? claudeAccounts.length : openaiAccounts.length;
|
|
const isClaudeAccount = account.platform === 'claude';
|
|
const claudeAcc = isClaudeAccount ? (account as ClaudeAccount) : null;
|
|
const openaiAcc = !isClaudeAccount ? (account as OpenAIAccount) : null;
|
|
|
|
return (
|
|
<tr key={account.id} className="hover:bg-muted/50 transition-colors">
|
|
<td className="px-6 py-3 whitespace-nowrap">
|
|
<div className="text-sm font-medium text-card-foreground">
|
|
{getAccountName(account, platformCount)}
|
|
</div>
|
|
</td>
|
|
<td className="px-3 py-3 whitespace-nowrap">
|
|
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(account.status)}`}>
|
|
{account.status}
|
|
</span>
|
|
</td>
|
|
<td className="px-3 py-3">
|
|
{account.usage?.daily && (isClaudeAccount || account.usage.daily.requests > 0) ? (
|
|
<div className="text-xs">
|
|
<div className="text-muted-foreground">{account.usage.daily.requests} reqs</div>
|
|
<div className="text-muted-foreground">${account.usage.daily.cost.toFixed(2)} cost</div>
|
|
</div>
|
|
) : (
|
|
<span className="text-muted-foreground text-xs">{isClaudeAccount ? 'No data' : 'No usage today'}</span>
|
|
)}
|
|
</td>
|
|
<td className="px-3 py-3">
|
|
{claudeAcc?.claudeUsage ? (
|
|
<div className="space-y-1.5 min-w-[180px]">
|
|
{claudeAcc.claudeUsage.fiveHour && (
|
|
<UsageProgressBar
|
|
label="5h Window"
|
|
resetTime={formatTime(claudeAcc.claudeUsage.fiveHour.remainingSeconds)}
|
|
percentage={claudeAcc.claudeUsage.fiveHour.utilization}
|
|
resetAfterSeconds={claudeAcc.claudeUsage.fiveHour.remainingSeconds}
|
|
resetAt={claudeAcc.claudeUsage.fiveHour.resetsAt}
|
|
/>
|
|
)}
|
|
{claudeAcc.claudeUsage.sevenDay && (
|
|
<UsageProgressBar
|
|
label="7d Window"
|
|
resetTime={formatTime(claudeAcc.claudeUsage.sevenDay.remainingSeconds)}
|
|
percentage={claudeAcc.claudeUsage.sevenDay.utilization}
|
|
resetAfterSeconds={claudeAcc.claudeUsage.sevenDay.remainingSeconds}
|
|
resetAt={claudeAcc.claudeUsage.sevenDay.resetsAt}
|
|
/>
|
|
)}
|
|
{claudeAcc.claudeUsage.sevenDayOpus && (
|
|
<UsageProgressBar
|
|
label="Opus Window"
|
|
resetTime={formatTime(claudeAcc.claudeUsage.sevenDayOpus.remainingSeconds)}
|
|
percentage={claudeAcc.claudeUsage.sevenDayOpus.utilization}
|
|
resetAfterSeconds={claudeAcc.claudeUsage.sevenDayOpus.remainingSeconds}
|
|
resetAt={claudeAcc.claudeUsage.sevenDayOpus.resetsAt}
|
|
/>
|
|
)}
|
|
</div>
|
|
) : openaiAcc?.codexUsage ? (
|
|
<div className="space-y-1.5 min-w-[180px]">
|
|
{openaiAcc.codexUsage.primary && (
|
|
<UsageProgressBar
|
|
label="5h Window"
|
|
resetTime={formatTime(openaiAcc.codexUsage.primary.resetAfterSeconds)}
|
|
percentage={openaiAcc.codexUsage.primary.usedPercent}
|
|
resetAfterSeconds={openaiAcc.codexUsage.primary.resetAfterSeconds}
|
|
resetAt={openaiAcc.codexUsage.primary.resetAt}
|
|
/>
|
|
)}
|
|
{openaiAcc.codexUsage.secondary && (
|
|
<UsageProgressBar
|
|
label="7d Window"
|
|
resetTime={formatTime(openaiAcc.codexUsage.secondary.resetAfterSeconds)}
|
|
percentage={openaiAcc.codexUsage.secondary.usedPercent}
|
|
resetAfterSeconds={openaiAcc.codexUsage.secondary.resetAfterSeconds}
|
|
resetAt={openaiAcc.codexUsage.secondary.resetAt}
|
|
/>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<span className="text-muted-foreground text-xs">No data</span>
|
|
)}
|
|
</td>
|
|
<td className="px-3 py-3 text-muted-foreground text-xs text-left">{formatLastUsed(account.lastUsedAt)}</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
No shared AI accounts found
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|