admin stuff
This commit is contained in:
Jake Kasper
@@ -1,12 +1,358 @@
|
||||
import React from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
UsersIcon,
|
||||
MagnifyingGlassIcon,
|
||||
UserPlusIcon,
|
||||
TrashIcon,
|
||||
CogIcon,
|
||||
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 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 formatDate = (dateString) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-6">Manage Users</h1>
|
||||
<div className="card">
|
||||
<p className="text-gray-600">User management coming soon...</p>
|
||||
<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);
|
||||
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>
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user