560 lines
22 KiB
JavaScript
560 lines
22 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import {
|
|
UsersIcon,
|
|
MagnifyingGlassIcon,
|
|
UserPlusIcon,
|
|
TrashIcon,
|
|
CogIcon,
|
|
PencilIcon,
|
|
EnvelopeIcon,
|
|
KeyIcon,
|
|
ExclamationTriangleIcon
|
|
} from '@heroicons/react/24/outline';
|
|
import { adminAPI } from '../../services/api';
|
|
import LoadingSpinner from '../../components/UI/LoadingSpinner';
|
|
import toast from 'react-hot-toast';
|
|
|
|
const AdminUsers = () => {
|
|
const [users, setUsers] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [roleFilter, setRoleFilter] = useState('all');
|
|
const [pagination, setPagination] = useState(null);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [selectedUser, setSelectedUser] = useState(null);
|
|
const [showRoleModal, setShowRoleModal] = useState(false);
|
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
|
const [showInviteModal, setShowInviteModal] = useState(false);
|
|
const [showEditModal, setShowEditModal] = useState(false);
|
|
const [editFormData, setEditFormData] = useState({
|
|
firstName: '',
|
|
lastName: '',
|
|
email: '',
|
|
role: '',
|
|
newPassword: '',
|
|
confirmPassword: ''
|
|
});
|
|
|
|
const fetchUsers = async (page = 1) => {
|
|
try {
|
|
setLoading(true);
|
|
const params = {
|
|
page,
|
|
limit: 20,
|
|
...(searchTerm && { search: searchTerm }),
|
|
...(roleFilter !== 'all' && { role: roleFilter })
|
|
};
|
|
|
|
const response = await adminAPI.getUsers(params);
|
|
setUsers(response.data.data.users);
|
|
setPagination(response.data.data.pagination);
|
|
setCurrentPage(page);
|
|
} catch (error) {
|
|
console.error('Failed to fetch users:', error);
|
|
toast.error('Failed to load users');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchUsers(1);
|
|
}, [searchTerm, roleFilter]);
|
|
|
|
const handleRoleChange = async (newRole) => {
|
|
try {
|
|
await adminAPI.updateUserRole(selectedUser.id, newRole);
|
|
toast.success(`User role updated to ${newRole}`);
|
|
setShowRoleModal(false);
|
|
setSelectedUser(null);
|
|
fetchUsers(currentPage);
|
|
} catch (error) {
|
|
console.error('Failed to update role:', error);
|
|
toast.error('Failed to update user role');
|
|
}
|
|
};
|
|
|
|
const handleDeleteUser = async () => {
|
|
try {
|
|
await adminAPI.deleteUser(selectedUser.id);
|
|
toast.success('User deleted successfully');
|
|
setShowDeleteModal(false);
|
|
setSelectedUser(null);
|
|
fetchUsers(currentPage);
|
|
} catch (error) {
|
|
console.error('Failed to delete user:', error);
|
|
toast.error('Failed to delete user');
|
|
}
|
|
};
|
|
|
|
const handleEditUser = async (e) => {
|
|
e.preventDefault();
|
|
|
|
// Validate password match if password is being changed
|
|
if (editFormData.newPassword || editFormData.confirmPassword) {
|
|
if (editFormData.newPassword !== editFormData.confirmPassword) {
|
|
toast.error('Passwords do not match');
|
|
return;
|
|
}
|
|
if (editFormData.newPassword.length < 6) {
|
|
toast.error('Password must be at least 6 characters long');
|
|
return;
|
|
}
|
|
}
|
|
|
|
try {
|
|
const updateData = {
|
|
firstName: editFormData.firstName,
|
|
lastName: editFormData.lastName,
|
|
email: editFormData.email,
|
|
role: editFormData.role,
|
|
...(editFormData.newPassword && { password: editFormData.newPassword })
|
|
};
|
|
|
|
await adminAPI.updateUser(selectedUser.id, updateData);
|
|
toast.success('User updated successfully');
|
|
setShowEditModal(false);
|
|
setSelectedUser(null);
|
|
setEditFormData({
|
|
firstName: '',
|
|
lastName: '',
|
|
email: '',
|
|
role: '',
|
|
newPassword: '',
|
|
confirmPassword: ''
|
|
});
|
|
fetchUsers(currentPage);
|
|
} catch (error) {
|
|
console.error('Failed to update user:', error);
|
|
toast.error('Failed to update user');
|
|
}
|
|
};
|
|
|
|
const formatDate = (dateString) => {
|
|
return new Date(dateString).toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric'
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<div className="mb-6">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">Manage Users</h1>
|
|
<p className="text-gray-600">Add, edit, and manage user accounts</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowInviteModal(true)}
|
|
className="btn-primary flex items-center"
|
|
>
|
|
<UserPlusIcon className="h-5 w-5 mr-2" />
|
|
Invite User
|
|
</button>
|
|
</div>
|
|
|
|
{/* Search and Filters */}
|
|
<div className="flex flex-col sm:flex-row gap-4 mb-6">
|
|
<div className="flex-1 relative">
|
|
<MagnifyingGlassIcon className="h-5 w-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search users..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"
|
|
/>
|
|
</div>
|
|
<select
|
|
value={roleFilter}
|
|
onChange={(e) => setRoleFilter(e.target.value)}
|
|
className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="all">All Roles</option>
|
|
<option value="admin">Admins</option>
|
|
<option value="user">Users</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="flex justify-center items-center h-64">
|
|
<LoadingSpinner size="lg" />
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Users Table */}
|
|
<div className="card overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
User
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Role
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Properties
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Applications
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Joined
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{users.map((user) => (
|
|
<tr key={user.id} className="hover:bg-gray-50">
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="flex items-center">
|
|
<div className="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
|
|
<UsersIcon className="h-6 w-6 text-blue-600" />
|
|
</div>
|
|
<div className="ml-4">
|
|
<div className="text-sm font-medium text-gray-900">
|
|
{user.firstName} {user.lastName}
|
|
</div>
|
|
<div className="text-sm text-gray-500">{user.email}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<span className={`px-2 py-1 text-xs font-medium rounded-full ${
|
|
user.role === 'admin'
|
|
? 'bg-purple-100 text-purple-800'
|
|
: 'bg-gray-100 text-gray-800'
|
|
}`}>
|
|
{user.role}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{user.propertyCount}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="text-sm text-gray-900">{user.applicationCount}</div>
|
|
{user.lastApplication && (
|
|
<div className="text-xs text-gray-500">
|
|
Last: {formatDate(user.lastApplication)}
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{formatDate(user.createdAt)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
|
<div className="flex items-center space-x-2">
|
|
<button
|
|
onClick={() => {
|
|
setSelectedUser(user);
|
|
setEditFormData({
|
|
firstName: user.firstName,
|
|
lastName: user.lastName,
|
|
email: user.email,
|
|
role: user.role,
|
|
newPassword: '',
|
|
confirmPassword: ''
|
|
});
|
|
setShowEditModal(true);
|
|
}}
|
|
className="text-green-600 hover:text-green-900"
|
|
title="Edit User"
|
|
>
|
|
<PencilIcon className="h-4 w-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
setSelectedUser(user);
|
|
setShowRoleModal(true);
|
|
}}
|
|
className="text-indigo-600 hover:text-indigo-900"
|
|
title="Change Role"
|
|
>
|
|
<CogIcon className="h-4 w-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
setSelectedUser(user);
|
|
setShowDeleteModal(true);
|
|
}}
|
|
className="text-red-600 hover:text-red-900"
|
|
title="Delete User"
|
|
>
|
|
<TrashIcon className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pagination */}
|
|
{pagination && pagination.totalPages > 1 && (
|
|
<div className="flex items-center justify-between mt-6">
|
|
<div className="text-sm text-gray-700">
|
|
Showing page {pagination.currentPage} of {pagination.totalPages}
|
|
({pagination.totalUsers} total users)
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<button
|
|
onClick={() => fetchUsers(currentPage - 1)}
|
|
disabled={!pagination.hasPrev}
|
|
className="px-3 py-2 text-sm bg-white border border-gray-300 rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
|
|
>
|
|
Previous
|
|
</button>
|
|
<button
|
|
onClick={() => fetchUsers(currentPage + 1)}
|
|
disabled={!pagination.hasNext}
|
|
className="px-3 py-2 text-sm bg-white border border-gray-300 rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* Role Change Modal */}
|
|
{showRoleModal && selectedUser && (
|
|
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
|
<div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
|
|
<div className="mt-3">
|
|
<h3 className="text-lg font-medium text-gray-900 mb-4">
|
|
Change Role for {selectedUser.firstName} {selectedUser.lastName}
|
|
</h3>
|
|
<p className="text-sm text-gray-600 mb-6">
|
|
Current role: <span className="font-medium">{selectedUser.role}</span>
|
|
</p>
|
|
<div className="flex justify-end space-x-3">
|
|
<button
|
|
onClick={() => setShowRoleModal(false)}
|
|
className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
|
|
>
|
|
Cancel
|
|
</button>
|
|
{selectedUser.role !== 'user' && (
|
|
<button
|
|
onClick={() => handleRoleChange('user')}
|
|
className="px-4 py-2 text-sm text-white bg-blue-600 rounded hover:bg-blue-700"
|
|
>
|
|
Make User
|
|
</button>
|
|
)}
|
|
{selectedUser.role !== 'admin' && (
|
|
<button
|
|
onClick={() => handleRoleChange('admin')}
|
|
className="px-4 py-2 text-sm text-white bg-purple-600 rounded hover:bg-purple-700"
|
|
>
|
|
Make Admin
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Delete Modal */}
|
|
{showDeleteModal && selectedUser && (
|
|
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
|
<div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
|
|
<div className="mt-3">
|
|
<div className="flex items-center mb-4">
|
|
<ExclamationTriangleIcon className="h-6 w-6 text-red-600 mr-2" />
|
|
<h3 className="text-lg font-medium text-gray-900">
|
|
Delete User
|
|
</h3>
|
|
</div>
|
|
<p className="text-sm text-gray-600 mb-6">
|
|
Are you sure you want to delete {selectedUser.firstName} {selectedUser.lastName}?
|
|
This action cannot be undone and will permanently remove all their data.
|
|
</p>
|
|
<div className="flex justify-end space-x-3">
|
|
<button
|
|
onClick={() => setShowDeleteModal(false)}
|
|
className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleDeleteUser}
|
|
className="px-4 py-2 text-sm text-white bg-red-600 rounded hover:bg-red-700"
|
|
>
|
|
Delete User
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Edit User Modal */}
|
|
{showEditModal && selectedUser && (
|
|
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
|
<div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
|
|
<div className="mt-3">
|
|
<h3 className="text-lg font-medium text-gray-900 mb-4">
|
|
Edit User: {selectedUser.firstName} {selectedUser.lastName}
|
|
</h3>
|
|
<form onSubmit={handleEditUser}>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
First Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={editFormData.firstName}
|
|
onChange={(e) => setEditFormData({ ...editFormData, firstName: e.target.value })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Last Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={editFormData.lastName}
|
|
onChange={(e) => setEditFormData({ ...editFormData, lastName: e.target.value })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
value={editFormData.email}
|
|
onChange={(e) => setEditFormData({ ...editFormData, email: e.target.value })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Role
|
|
</label>
|
|
<select
|
|
value={editFormData.role}
|
|
onChange={(e) => setEditFormData({ ...editFormData, role: e.target.value })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
required
|
|
>
|
|
<option value="user">User</option>
|
|
<option value="admin">Admin</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="border-t pt-4">
|
|
<h4 className="text-sm font-medium text-gray-900 mb-3">
|
|
Password Reset (Optional)
|
|
</h4>
|
|
<div className="space-y-3">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
New Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
value={editFormData.newPassword}
|
|
onChange={(e) => setEditFormData({ ...editFormData, newPassword: e.target.value })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
placeholder="Leave blank to keep current password"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Confirm New Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
value={editFormData.confirmPassword}
|
|
onChange={(e) => setEditFormData({ ...editFormData, confirmPassword: e.target.value })}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
placeholder="Confirm new password"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end space-x-3 mt-6">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setShowEditModal(false);
|
|
setEditFormData({
|
|
firstName: '',
|
|
lastName: '',
|
|
email: '',
|
|
role: '',
|
|
newPassword: '',
|
|
confirmPassword: ''
|
|
});
|
|
}}
|
|
className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="px-4 py-2 text-sm text-white bg-green-600 rounded hover:bg-green-700"
|
|
>
|
|
Update User
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Invite User Modal */}
|
|
{showInviteModal && (
|
|
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
|
<div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
|
|
<div className="mt-3">
|
|
<h3 className="text-lg font-medium text-gray-900 mb-4">
|
|
Invite User
|
|
</h3>
|
|
<p className="text-sm text-gray-600 mb-6">
|
|
Feature coming soon: Send email invitations to new users.
|
|
</p>
|
|
<div className="flex justify-end">
|
|
<button
|
|
onClick={() => setShowInviteModal(false)}
|
|
className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AdminUsers; |