104 lines
5.4 KiB
TypeScript
104 lines
5.4 KiB
TypeScript
export const dynamic = 'force-dynamic';
|
|
import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
|
|
import { cookies } from 'next/headers';
|
|
import { redirect } from 'next/navigation';
|
|
import { checkIsAdmin } from '@/services/track-api-usage';
|
|
import { getAllUsersWithCredits } from '@/services/admin-credit-service';
|
|
import { getAllPlans } from '@/services/subscription-service';
|
|
import Link from 'next/link';
|
|
import { ChevronLeft, Users, Coins, TrendingUp, TrendingDown } from 'lucide-react';
|
|
import UserManagementClient from '@/components/UserManagementClient';
|
|
|
|
export default async function AdminUsersPage() {
|
|
const supabase = createServerComponentClient({ cookies });
|
|
const { data: { user } } = await supabase.auth.getUser();
|
|
|
|
if (!user) {
|
|
redirect('/');
|
|
}
|
|
|
|
const isAdmin = await checkIsAdmin(user.id);
|
|
if (!isAdmin) {
|
|
redirect('/');
|
|
}
|
|
|
|
// Fetch all users with credits
|
|
const users = await getAllUsersWithCredits();
|
|
|
|
// Fetch all plans
|
|
const plans = await getAllPlans();
|
|
|
|
// Calculate statistics
|
|
const totalUsers = users.length;
|
|
const totalCreditsInCirculation = users.reduce((sum, u) => sum + u.balance, 0);
|
|
const totalCreditsPurchased = users.reduce((sum, u) => sum + u.total_purchased, 0);
|
|
const totalCreditsUsed = users.reduce((sum, u) => sum + u.total_used, 0);
|
|
|
|
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>
|
|
<Link
|
|
href="/admin"
|
|
className="inline-flex items-center gap-2 text-zinc-500 hover:text-amber-600 transition-colors font-medium mb-2"
|
|
>
|
|
<ChevronLeft size={20} />
|
|
Back to Dashboard
|
|
</Link>
|
|
<h1 className="text-3xl font-black text-zinc-900 dark:text-white tracking-tight">User Management</h1>
|
|
<p className="text-zinc-500 mt-1">Manage user credits and limits</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Statistics Cards */}
|
|
<div className="grid grid-cols-1 md: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">
|
|
<Users size={20} className="text-blue-600 dark:text-blue-400" />
|
|
</div>
|
|
<span className="text-xs font-black uppercase text-zinc-400">Total Users</span>
|
|
</div>
|
|
<div className="text-3xl font-black text-zinc-900 dark:text-white">{totalUsers}</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">
|
|
<Coins size={20} className="text-green-600 dark:text-green-400" />
|
|
</div>
|
|
<span className="text-xs font-black uppercase text-zinc-400">Credits in Circulation</span>
|
|
</div>
|
|
<div className="text-3xl font-black text-zinc-900 dark:text-white">{totalCreditsInCirculation.toLocaleString()}</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">Total Purchased</span>
|
|
</div>
|
|
<div className="text-3xl font-black text-zinc-900 dark:text-white">{totalCreditsPurchased.toLocaleString()}</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">
|
|
<TrendingDown size={20} className="text-purple-600 dark:text-purple-400" />
|
|
</div>
|
|
<span className="text-xs font-black uppercase text-zinc-400">Total Used</span>
|
|
</div>
|
|
<div className="text-3xl font-black text-zinc-900 dark:text-white">{totalCreditsUsed.toLocaleString()}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* User Management Table */}
|
|
<UserManagementClient initialUsers={users} plans={plans} />
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|