robin
7d307ac253
- Added common.all translation key to de.ts and en.ts - Added debug logging to admin page for troubleshooting access issues
223 lines
12 KiB
TypeScript
223 lines
12 KiB
TypeScript
import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
|
|
import { cookies } from 'next/headers';
|
|
import { redirect } from 'next/navigation';
|
|
import { checkIsAdmin, getGlobalApiStats } from '@/services/track-api-usage';
|
|
import { BarChart3, TrendingUp, Users, Calendar, AlertCircle } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
|
|
export default async function AdminPage() {
|
|
const supabase = createServerComponentClient({ cookies });
|
|
const { data: { user } } = await supabase.auth.getUser();
|
|
|
|
console.log('[Admin Page] User:', user?.id, user?.email);
|
|
|
|
if (!user) {
|
|
console.log('[Admin Page] No user found, redirecting to home');
|
|
redirect('/');
|
|
}
|
|
|
|
const isAdmin = await checkIsAdmin(user.id);
|
|
console.log('[Admin Page] Is admin check result:', isAdmin);
|
|
|
|
if (!isAdmin) {
|
|
console.log('[Admin Page] User is not admin, redirecting to home');
|
|
redirect('/');
|
|
}
|
|
|
|
console.log('[Admin Page] Access granted, loading dashboard');
|
|
|
|
// Fetch global API stats
|
|
const stats = await getGlobalApiStats();
|
|
|
|
// Fetch recent API usage
|
|
const { data: recentUsage } = await supabase
|
|
.from('api_usage')
|
|
.select(`
|
|
*,
|
|
profiles:user_id (
|
|
username
|
|
)
|
|
`)
|
|
.order('created_at', { ascending: false })
|
|
.limit(50);
|
|
|
|
// Fetch per-user statistics
|
|
const { data: userStats } = await supabase
|
|
.from('api_usage')
|
|
.select('user_id, api_type')
|
|
.order('created_at', { ascending: false });
|
|
|
|
// Group by user
|
|
const userStatsMap = new Map<string, { googleSearch: number; geminiAi: number; total: number }>();
|
|
userStats?.forEach(item => {
|
|
const current = userStatsMap.get(item.user_id) || { googleSearch: 0, geminiAi: 0, total: 0 };
|
|
if (item.api_type === 'google_search') current.googleSearch++;
|
|
if (item.api_type === 'gemini_ai') current.geminiAi++;
|
|
current.total++;
|
|
userStatsMap.set(item.user_id, current);
|
|
});
|
|
|
|
// Get user details for top users
|
|
const topUserIds = Array.from(userStatsMap.entries())
|
|
.sort((a, b) => b[1].total - a[1].total)
|
|
.slice(0, 10)
|
|
.map(([userId]) => userId);
|
|
|
|
const { data: topUsers } = await supabase
|
|
.from('profiles')
|
|
.select('id, username')
|
|
.in('id', topUserIds);
|
|
|
|
const topUsersWithStats = topUsers?.map(user => ({
|
|
...user,
|
|
stats: userStatsMap.get(user.id)!
|
|
})) || [];
|
|
|
|
return (
|
|
<main className="min-h-screen bg-zinc-50 dark:bg-black p-4 md:p-12">
|
|
<div className="max-w-7xl mx-auto space-y-8">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-black text-zinc-900 dark:text-white tracking-tight">Admin Dashboard</h1>
|
|
<p className="text-zinc-500 mt-1">API Usage Monitoring & Statistics</p>
|
|
</div>
|
|
<Link
|
|
href="/"
|
|
className="px-4 py-2 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 rounded-xl font-bold hover:bg-zinc-800 transition-colors"
|
|
>
|
|
Back to App
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Global Stats Cards */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-sm">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
|
|
<BarChart3 size={20} className="text-blue-600 dark:text-blue-400" />
|
|
</div>
|
|
<span className="text-xs font-black uppercase text-zinc-400">Total Calls</span>
|
|
</div>
|
|
<div className="text-3xl font-black text-zinc-900 dark:text-white">{stats?.totalCalls || 0}</div>
|
|
<div className="text-xs text-zinc-500 mt-1">All time</div>
|
|
</div>
|
|
|
|
<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-sm">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg">
|
|
<Calendar size={20} className="text-green-600 dark:text-green-400" />
|
|
</div>
|
|
<span className="text-xs font-black uppercase text-zinc-400">Today</span>
|
|
</div>
|
|
<div className="text-3xl font-black text-zinc-900 dark:text-white">{stats?.todayCalls || 0}</div>
|
|
<div className="text-xs text-zinc-500 mt-1">
|
|
{stats?.todayCalls && stats.todayCalls >= 80 ? (
|
|
<span className="text-red-500 font-bold flex items-center gap-1">
|
|
<AlertCircle size={12} /> Limit reached
|
|
</span>
|
|
) : (
|
|
`${80 - (stats?.todayCalls || 0)} remaining`
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-sm">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<div className="p-2 bg-amber-100 dark:bg-amber-900/30 rounded-lg">
|
|
<TrendingUp size={20} className="text-amber-600 dark:text-amber-400" />
|
|
</div>
|
|
<span className="text-xs font-black uppercase text-zinc-400">Google Search</span>
|
|
</div>
|
|
<div className="text-3xl font-black text-zinc-900 dark:text-white">{stats?.googleSearchCalls || 0}</div>
|
|
<div className="text-xs text-zinc-500 mt-1">Whiskybase searches</div>
|
|
</div>
|
|
|
|
<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-sm">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
|
|
<Users size={20} className="text-purple-600 dark:text-purple-400" />
|
|
</div>
|
|
<span className="text-xs font-black uppercase text-zinc-400">Gemini AI</span>
|
|
</div>
|
|
<div className="text-3xl font-black text-zinc-900 dark:text-white">{stats?.geminiAiCalls || 0}</div>
|
|
<div className="text-xs text-zinc-500 mt-1">Bottle analyses</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Top Users */}
|
|
<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-sm">
|
|
<h2 className="text-xl font-black text-zinc-900 dark:text-white mb-4">Top Users by API Usage</h2>
|
|
<div className="space-y-3">
|
|
{topUsersWithStats.map((user, index) => (
|
|
<div key={user.id} className="flex items-center justify-between p-3 bg-zinc-50 dark:bg-zinc-800/50 rounded-xl">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 rounded-full bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center text-amber-700 dark:text-amber-500 font-black text-sm">
|
|
{index + 1}
|
|
</div>
|
|
<div>
|
|
<div className="font-bold text-zinc-900 dark:text-white">{user.username}</div>
|
|
<div className="text-xs text-zinc-500">
|
|
{user.stats.googleSearch} searches · {user.stats.geminiAi} analyses
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-2xl font-black text-zinc-900 dark:text-white">{user.stats.total}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Recent Activity */}
|
|
<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-sm">
|
|
<h2 className="text-xl font-black text-zinc-900 dark:text-white mb-4">Recent API Calls</h2>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-zinc-200 dark:border-zinc-800">
|
|
<th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">Time</th>
|
|
<th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">User</th>
|
|
<th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">API Type</th>
|
|
<th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">Status</th>
|
|
<th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">Error</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{recentUsage?.map((item) => (
|
|
<tr key={item.id} className="border-b border-zinc-100 dark:border-zinc-800/50">
|
|
<td className="py-3 px-4 text-sm text-zinc-600 dark:text-zinc-400">
|
|
{new Date(item.created_at).toLocaleString('de-DE')}
|
|
</td>
|
|
<td className="py-3 px-4 text-sm font-semibold text-zinc-900 dark:text-white">
|
|
{(item.profiles as any)?.username || 'Unknown'}
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<span className={`text-xs font-black uppercase px-2 py-1 rounded ${item.api_type === 'google_search'
|
|
? 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-500'
|
|
: 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-500'
|
|
}`}>
|
|
{item.api_type === 'google_search' ? 'Search' : 'AI'}
|
|
</span>
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<span className={`text-xs font-black uppercase px-2 py-1 rounded ${item.success
|
|
? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-500'
|
|
: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-500'
|
|
}`}>
|
|
{item.success ? 'Success' : 'Failed'}
|
|
</span>
|
|
</td>
|
|
<td className="py-3 px-4 text-xs text-zinc-500 max-w-xs truncate">
|
|
{item.error_message || '-'}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|