346 lines
12 KiB
TypeScript
346 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import Link from "next/link";
|
|
|
|
interface WebinarRegistration {
|
|
id: string;
|
|
status: string;
|
|
webinar: {
|
|
id: string;
|
|
title: string;
|
|
startAt: string;
|
|
};
|
|
}
|
|
|
|
interface User {
|
|
id: string;
|
|
email: string;
|
|
firstName: string;
|
|
lastName: string;
|
|
role: string;
|
|
isActive: boolean;
|
|
emailVerified: boolean;
|
|
createdAt: string;
|
|
gender?: string;
|
|
dob?: string;
|
|
address?: string;
|
|
image?: string;
|
|
_count: {
|
|
webinarRegistrations: number;
|
|
};
|
|
registeredWebinars: WebinarRegistration[];
|
|
}
|
|
|
|
interface PaginationInfo {
|
|
page: number;
|
|
pageSize: number;
|
|
total: number;
|
|
pages: number;
|
|
hasMore: boolean;
|
|
}
|
|
|
|
export default function AdminUsersPage() {
|
|
const [users, setUsers] = useState<User[]>([]);
|
|
const [pagination, setPagination] = useState<PaginationInfo>({
|
|
page: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
pages: 1,
|
|
hasMore: false,
|
|
});
|
|
const [loading, setLoading] = useState(true);
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [message, setMessage] = useState("");
|
|
const [updatingUserId, setUpdatingUserId] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
fetchUsers(1);
|
|
}, [searchQuery]);
|
|
|
|
const fetchUsers = async (page: number) => {
|
|
setLoading(true);
|
|
try {
|
|
const params = new URLSearchParams({ page: String(page) });
|
|
if (searchQuery) params.append("search", searchQuery);
|
|
|
|
const response = await fetch(`/api/admin/users?${params}`);
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
if (data.ok) {
|
|
setUsers(data.users);
|
|
setPagination(data.pagination);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to fetch users:", error);
|
|
setMessage("❌ Failed to load users");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleBlockUnblock = async (userId: string, currentlyActive: boolean) => {
|
|
setUpdatingUserId(userId);
|
|
try {
|
|
const response = await fetch("/api/admin/users", {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
userId,
|
|
isActive: !currentlyActive,
|
|
}),
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.ok) {
|
|
setMessage(`✅ ${data.message}`);
|
|
fetchUsers(pagination.page);
|
|
setTimeout(() => setMessage(""), 3000);
|
|
} else {
|
|
setMessage(`❌ ${data.message}`);
|
|
}
|
|
} catch (error) {
|
|
setMessage("❌ Failed to update user");
|
|
} finally {
|
|
setUpdatingUserId(null);
|
|
}
|
|
};
|
|
|
|
const handleRoleChange = async (userId: string, newRole: "USER" | "ADMIN") => {
|
|
setUpdatingUserId(userId);
|
|
try {
|
|
const response = await fetch("/api/admin/users", {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
userId,
|
|
role: newRole,
|
|
}),
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.ok) {
|
|
setMessage(`✅ ${data.message}`);
|
|
fetchUsers(pagination.page);
|
|
setTimeout(() => setMessage(""), 3000);
|
|
} else {
|
|
setMessage(`❌ ${data.message}`);
|
|
}
|
|
} catch (error) {
|
|
setMessage("❌ Failed to update user role");
|
|
} finally {
|
|
setUpdatingUserId(null);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<main className="max-w-7xl mx-auto px-6 py-16">
|
|
<div className="mb-8">
|
|
<div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary/10 text-primary text-xs font-semibold mb-4">
|
|
👥 User Management
|
|
</div>
|
|
<h1 className="text-4xl font-bold text-slate-900 dark:text-white">
|
|
Users
|
|
</h1>
|
|
<p className="text-lg text-gray-600 dark:text-gray-400">
|
|
Manage user accounts, roles, and permissions ({pagination.total} total)
|
|
</p>
|
|
</div>
|
|
|
|
{message && (
|
|
<div
|
|
className={`mb-4 px-4 py-3 rounded-lg font-semibold ${
|
|
message.includes("✅")
|
|
? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
|
|
: "bg-red-500/10 text-red-600 dark:text-red-400"
|
|
}`}
|
|
>
|
|
{message}
|
|
</div>
|
|
)}
|
|
|
|
<div className="card p-6 mb-6">
|
|
<input
|
|
type="text"
|
|
placeholder="🔍 Search by name or email..."
|
|
className="input-field"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="text-center py-12">
|
|
<div className="inline-block w-8 h-8 border-4 border-primary border-r-transparent rounded-full animate-spin"></div>
|
|
<p className="mt-4 text-gray-600 dark:text-gray-400">Loading users...</p>
|
|
</div>
|
|
) : users.length === 0 ? (
|
|
<div className="card p-12 text-center">
|
|
<p className="text-gray-500 dark:text-gray-400">No users found</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="space-y-4">
|
|
{users.map((user) => (
|
|
<div
|
|
key={user.id}
|
|
className="card p-6 border border-slate-200/60 dark:border-slate-700/60 hover:border-primary/50 transition-colors"
|
|
>
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div className="flex items-start gap-4">
|
|
{user.image ? (
|
|
<img
|
|
src={user.image}
|
|
alt={user.firstName}
|
|
className="w-12 h-12 rounded-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white font-bold">
|
|
{user.firstName[0]}{user.lastName[0]}
|
|
</div>
|
|
)}
|
|
<div>
|
|
<h3 className="font-bold text-lg text-gray-900 dark:text-white">
|
|
{user.firstName} {user.lastName}
|
|
</h3>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
{user.email}
|
|
</p>
|
|
<div className="flex gap-2 mt-2">
|
|
{!user.isActive && (
|
|
<span className="px-2 py-1 bg-red-500/10 text-red-600 dark:text-red-400 text-xs font-semibold rounded">
|
|
🚫 BLOCKED
|
|
</span>
|
|
)}
|
|
{user.emailVerified && (
|
|
<span className="px-2 py-1 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 text-xs font-semibold rounded">
|
|
✅ Verified
|
|
</span>
|
|
)}
|
|
{user.role === "ADMIN" && (
|
|
<span className="px-2 py-1 bg-blue-500/10 text-blue-600 dark:text-blue-400 text-xs font-semibold rounded">
|
|
👑 Admin
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-right text-sm text-gray-500 dark:text-gray-400">
|
|
<p>Joined: {new Date(user.createdAt).toLocaleDateString()}</p>
|
|
<p>Registrations: {user._count.webinarRegistrations}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Registered Webinars */}
|
|
{user.registeredWebinars.length > 0 && (
|
|
<div className="mb-4 pb-4 border-b border-slate-200 dark:border-slate-700">
|
|
<p className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
|
|
📚 Recent Webinars ({user.registeredWebinars.length})
|
|
</p>
|
|
<div className="space-y-1">
|
|
{user.registeredWebinars.map((reg) => (
|
|
<div
|
|
key={reg.id}
|
|
className="text-sm text-gray-600 dark:text-gray-400 flex items-center gap-2"
|
|
>
|
|
<span className="w-2 h-2 rounded-full bg-primary"></span>
|
|
<Link
|
|
href={`/admin/webinars#${reg.webinar.id}`}
|
|
className="hover:text-primary hover:underline"
|
|
>
|
|
{reg.webinar.title}
|
|
</Link>
|
|
<span className="text-xs">
|
|
({new Date(reg.webinar.startAt).toLocaleDateString()})
|
|
</span>
|
|
<span
|
|
className={`px-2 py-0.5 text-xs font-semibold rounded ${
|
|
reg.status === "CONFIRMED"
|
|
? "bg-emerald-500/10 text-emerald-600"
|
|
: reg.status === "PAID"
|
|
? "bg-blue-500/10 text-blue-600"
|
|
: "bg-yellow-500/10 text-yellow-600"
|
|
}`}
|
|
>
|
|
{reg.status}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex gap-2">
|
|
<select
|
|
value={user.role}
|
|
onChange={(e) => handleRoleChange(user.id, e.target.value as "USER" | "ADMIN")}
|
|
disabled={updatingUserId === user.id}
|
|
className="px-3 py-2 rounded-lg bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-sm font-semibold text-gray-900 dark:text-white disabled:opacity-50"
|
|
>
|
|
<option value="USER">👤 User</option>
|
|
<option value="ADMIN">👑 Admin</option>
|
|
</select>
|
|
</div>
|
|
<button
|
|
onClick={() => handleBlockUnblock(user.id, user.isActive)}
|
|
disabled={updatingUserId === user.id}
|
|
className={`px-4 py-2 rounded-lg font-semibold text-sm transition-colors disabled:opacity-50 ${
|
|
user.isActive
|
|
? "bg-red-500/10 text-red-600 dark:text-red-400 hover:bg-red-500/20"
|
|
: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/20"
|
|
}`}
|
|
>
|
|
{updatingUserId === user.id
|
|
? "⏳"
|
|
: user.isActive
|
|
? "🚫 Block"
|
|
: "✅ Unblock"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Pagination */}
|
|
{pagination.pages > 1 && (
|
|
<div className="mt-8 flex items-center justify-center gap-2">
|
|
<button
|
|
onClick={() => fetchUsers(pagination.page - 1)}
|
|
disabled={pagination.page === 1}
|
|
className="px-4 py-2 rounded-lg bg-slate-100 dark:bg-slate-800 text-gray-900 dark:text-white font-semibold disabled:opacity-50"
|
|
>
|
|
← Previous
|
|
</button>
|
|
<div className="flex gap-1">
|
|
{Array.from({ length: pagination.pages }, (_, i) => i + 1).map((page) => (
|
|
<button
|
|
key={page}
|
|
onClick={() => fetchUsers(page)}
|
|
className={`w-10 h-10 rounded-lg font-semibold transition-colors ${
|
|
pagination.page === page
|
|
? "bg-primary text-white"
|
|
: "bg-slate-100 dark:bg-slate-800 text-gray-900 dark:text-white hover:bg-slate-200 dark:hover:bg-slate-700"
|
|
}`}
|
|
>
|
|
{page}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<button
|
|
onClick={() => fetchUsers(pagination.page + 1)}
|
|
disabled={!pagination.hasMore}
|
|
className="px-4 py-2 rounded-lg bg-slate-100 dark:bg-slate-800 text-gray-900 dark:text-white font-semibold disabled:opacity-50"
|
|
>
|
|
Next →
|
|
</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</main>
|
|
);
|
|
}
|