212 lines
8.0 KiB
TypeScript
212 lines
8.0 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useAuth } from '@/context/AuthContext';
|
|
import { useRouter } from 'next/navigation';
|
|
import api, { ApiResponse, getErrorMessage } from '@/services/api';
|
|
|
|
interface AdminUser {
|
|
id: string;
|
|
email: string;
|
|
role: string;
|
|
status: string;
|
|
createdAt: string;
|
|
lastLoginAt: string | null;
|
|
}
|
|
|
|
export default function AdminUsersPage() {
|
|
const { user, isSuperAdmin } = useAuth();
|
|
const router = useRouter();
|
|
const [admins, setAdmins] = useState<AdminUser[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState('');
|
|
const [showCreate, setShowCreate] = useState(false);
|
|
const [newEmail, setNewEmail] = useState('');
|
|
const [newPassword, setNewPassword] = useState('');
|
|
const [creating, setCreating] = useState(false);
|
|
const [deletingId, setDeletingId] = useState<string | null>(null);
|
|
|
|
// Redirect non-super-admins
|
|
useEffect(() => {
|
|
if (!isSuperAdmin) {
|
|
router.push('/dashboard');
|
|
}
|
|
}, [isSuperAdmin, router]);
|
|
|
|
const fetchAdmins = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await api.get<ApiResponse<AdminUser[]>>('/users/admin/admins');
|
|
setAdmins(response.data.data);
|
|
} catch (err) {
|
|
setError(getErrorMessage(err));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => { if (isSuperAdmin) fetchAdmins(); }, [isSuperAdmin]);
|
|
|
|
const handleCreate = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!newEmail.trim() || !newPassword.trim()) return;
|
|
setCreating(true);
|
|
setError('');
|
|
try {
|
|
await api.put('/users/admin/admins', { email: newEmail.trim(), password: newPassword });
|
|
setShowCreate(false);
|
|
setNewEmail('');
|
|
setNewPassword('');
|
|
fetchAdmins();
|
|
} catch (err) {
|
|
setError(getErrorMessage(err));
|
|
} finally {
|
|
setCreating(false);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (!confirm('Are you sure you want to delete this admin?')) return;
|
|
setDeletingId(id);
|
|
try {
|
|
await api.delete(`/users/admin/admins/${id}`);
|
|
setAdmins(prev => prev.filter(a => a.id !== id));
|
|
} catch (err) {
|
|
setError(getErrorMessage(err));
|
|
} finally {
|
|
setDeletingId(null);
|
|
}
|
|
};
|
|
|
|
if (!isSuperAdmin) return null;
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h1 className="text-2xl font-bold text-gray-900">Admin Users</h1>
|
|
<button
|
|
onClick={() => setShowCreate(true)}
|
|
className="px-4 py-2 bg-[#f5a623] text-white text-sm font-medium rounded-lg hover:bg-[#e09520] transition-colors"
|
|
>
|
|
+ Create Admin
|
|
</button>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="p-3 bg-red-50 border border-red-200 rounded-lg mb-4">
|
|
<p className="text-red-700 text-sm">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{loading ? (
|
|
<div className="flex justify-center py-12">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#f5a623]"></div>
|
|
</div>
|
|
) : (
|
|
<div className="bg-white rounded-lg shadow overflow-hidden">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Role</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Created</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-200">
|
|
{admins.map(admin => (
|
|
<tr key={admin.id} className="hover:bg-gray-50">
|
|
<td className="px-4 py-3 text-sm text-gray-900">{admin.email}</td>
|
|
<td className="px-4 py-3">
|
|
<span className={`px-2 py-1 text-xs font-semibold rounded-full ${
|
|
admin.role === 'SUPER_ADMIN' ? 'bg-purple-100 text-purple-800' : 'bg-blue-100 text-blue-800'
|
|
}`}>
|
|
{admin.role === 'SUPER_ADMIN' ? 'Super Admin' : 'Admin'}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<span className="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
|
|
{admin.status}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-sm text-gray-500">
|
|
{new Date(admin.createdAt).toLocaleDateString()}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
{admin.role === 'ADMIN' && admin.id !== user?.id ? (
|
|
<button
|
|
onClick={() => handleDelete(admin.id)}
|
|
disabled={deletingId === admin.id}
|
|
className="text-sm text-red-600 hover:text-red-800 disabled:opacity-50"
|
|
>
|
|
{deletingId === admin.id ? 'Deleting...' : 'Delete'}
|
|
</button>
|
|
) : (
|
|
<span className="text-sm text-gray-400">—</span>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
{/* Create Admin Modal */}
|
|
{showCreate && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
|
|
<div className="px-6 py-4 border-b border-gray-200">
|
|
<h3 className="text-lg font-semibold text-gray-900">Create Admin User</h3>
|
|
</div>
|
|
<form onSubmit={handleCreate}>
|
|
<div className="px-6 py-4 space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
|
|
<input
|
|
type="email"
|
|
value={newEmail}
|
|
onChange={e => setNewEmail(e.target.value)}
|
|
required
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-gray-900 bg-white placeholder:text-gray-500"
|
|
placeholder="admin@example.com"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
|
|
<input
|
|
type="password"
|
|
value={newPassword}
|
|
onChange={e => setNewPassword(e.target.value)}
|
|
required
|
|
minLength={8}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-gray-900 bg-white placeholder:text-gray-500"
|
|
placeholder="Min 8 characters"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => { setShowCreate(false); setNewEmail(''); setNewPassword(''); }}
|
|
className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={creating}
|
|
className="px-4 py-2 bg-[#f5a623] text-white rounded-lg hover:bg-[#e09520] text-sm disabled:opacity-50"
|
|
>
|
|
{creating ? 'Creating...' : 'Create Admin'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|