462 lines
20 KiB
TypeScript
462 lines
20 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Plus, Search, Edit, Trash2, X } from 'lucide-react';
|
|
import { userService, User } from '../../services/api';
|
|
import { toast } from 'react-toastify';
|
|
import Loading from '../../components/common/Loading';
|
|
import Pagination from '../../components/common/Pagination';
|
|
import useAuthStore from '../../store/useAuthStore';
|
|
|
|
const UserManagementPage: React.FC = () => {
|
|
const { userInfo } = useAuthStore();
|
|
const [users, setUsers] = useState<User[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [editingUser, setEditingUser] = useState<User | null>(null);
|
|
const [filters, setFilters] = useState({
|
|
search: '',
|
|
role: '',
|
|
status: '',
|
|
});
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [totalPages, setTotalPages] = useState(1);
|
|
const [totalItems, setTotalItems] = useState(0);
|
|
const itemsPerPage = 5;
|
|
|
|
const [formData, setFormData] = useState({
|
|
full_name: '',
|
|
email: '',
|
|
phone_number: '',
|
|
password: '',
|
|
role: 'customer',
|
|
status: 'active',
|
|
});
|
|
|
|
useEffect(() => {
|
|
setCurrentPage(1);
|
|
}, [filters]);
|
|
|
|
useEffect(() => {
|
|
fetchUsers();
|
|
}, [filters, currentPage]);
|
|
|
|
const fetchUsers = async () => {
|
|
try {
|
|
setLoading(true);
|
|
console.log('Fetching users with filters:', filters, 'page:', currentPage);
|
|
const response = await userService.getUsers({
|
|
...filters,
|
|
page: currentPage,
|
|
limit: itemsPerPage,
|
|
});
|
|
console.log('Users response:', response);
|
|
setUsers(response.data.users);
|
|
if (response.data.pagination) {
|
|
setTotalPages(response.data.pagination.totalPages);
|
|
setTotalItems(response.data.pagination.total);
|
|
}
|
|
} catch (error: any) {
|
|
console.error('Error fetching users:', error);
|
|
toast.error(error.response?.data?.message || 'Unable to load users list');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
try {
|
|
if (editingUser) {
|
|
// When updating, only send password if changed
|
|
const updateData: any = {
|
|
full_name: formData.full_name,
|
|
email: formData.email,
|
|
phone_number: formData.phone_number,
|
|
role: formData.role,
|
|
status: formData.status,
|
|
};
|
|
|
|
// Only add password if user entered a new one
|
|
if (formData.password && formData.password.trim() !== '') {
|
|
updateData.password = formData.password;
|
|
}
|
|
|
|
console.log('Updating user:', editingUser.id, 'with data:', updateData);
|
|
const response = await userService.updateUser(editingUser.id, updateData);
|
|
console.log('Update response:', response);
|
|
toast.success('User updated successfully');
|
|
} else {
|
|
// When creating new, need complete information
|
|
if (!formData.password || formData.password.trim() === '') {
|
|
toast.error('Please enter password');
|
|
return;
|
|
}
|
|
console.log('Creating user with data:', formData);
|
|
const response = await userService.createUser(formData);
|
|
console.log('Create response:', response);
|
|
toast.success('User added successfully');
|
|
}
|
|
|
|
// Close modal and reset form first
|
|
setShowModal(false);
|
|
resetForm();
|
|
|
|
// Reload users list after a bit to ensure DB is updated
|
|
setTimeout(() => {
|
|
fetchUsers();
|
|
}, 300);
|
|
} catch (error: any) {
|
|
console.error('Error submitting user:', error);
|
|
toast.error(error.response?.data?.message || 'An error occurred');
|
|
}
|
|
};
|
|
|
|
const handleEdit = (user: User) => {
|
|
setEditingUser(user);
|
|
setFormData({
|
|
full_name: user.full_name,
|
|
email: user.email,
|
|
phone_number: user.phone_number || '',
|
|
password: '',
|
|
role: user.role,
|
|
status: user.status || 'active',
|
|
});
|
|
setShowModal(true);
|
|
};
|
|
|
|
const handleDelete = async (id: number) => {
|
|
// Prevent self-deletion
|
|
if (userInfo?.id === id) {
|
|
toast.error('You cannot delete your own account');
|
|
return;
|
|
}
|
|
|
|
if (!window.confirm('Are you sure you want to delete this user?')) return;
|
|
|
|
try {
|
|
console.log('Deleting user:', id);
|
|
await userService.deleteUser(id);
|
|
toast.success('User deleted successfully');
|
|
fetchUsers();
|
|
} catch (error: any) {
|
|
console.error('Error deleting user:', error);
|
|
toast.error(error.response?.data?.message || 'Unable to delete user');
|
|
}
|
|
};
|
|
|
|
const resetForm = () => {
|
|
setEditingUser(null);
|
|
setFormData({
|
|
full_name: '',
|
|
email: '',
|
|
phone_number: '',
|
|
password: '',
|
|
role: 'customer',
|
|
status: 'active',
|
|
});
|
|
};
|
|
|
|
const getRoleBadge = (role: string) => {
|
|
const badges: Record<string, { bg: string; text: string; label: string; border: string }> = {
|
|
admin: {
|
|
bg: 'bg-gradient-to-r from-rose-50 to-red-50',
|
|
text: 'text-rose-800',
|
|
label: 'Admin',
|
|
border: 'border-rose-200'
|
|
},
|
|
staff: {
|
|
bg: 'bg-gradient-to-r from-blue-50 to-indigo-50',
|
|
text: 'text-blue-800',
|
|
label: 'Staff',
|
|
border: 'border-blue-200'
|
|
},
|
|
customer: {
|
|
bg: 'bg-gradient-to-r from-emerald-50 to-green-50',
|
|
text: 'text-emerald-800',
|
|
label: 'Customer',
|
|
border: 'border-emerald-200'
|
|
},
|
|
};
|
|
const badge = badges[role] || badges.customer;
|
|
return (
|
|
<span className={`px-4 py-1.5 rounded-full text-xs font-semibold border shadow-sm ${badge.bg} ${badge.text} ${badge.border}`}>
|
|
{badge.label}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
if (loading) {
|
|
return <Loading />;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-8 bg-gradient-to-br from-slate-50 via-white to-slate-50 min-h-screen -m-6 p-8">
|
|
{/* Luxury Header */}
|
|
<div className="flex justify-between items-center animate-fade-in">
|
|
<div>
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<div className="h-1 w-16 bg-gradient-to-r from-amber-400 to-amber-600 rounded-full"></div>
|
|
<h1 className="text-4xl font-bold bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 bg-clip-text text-transparent tracking-tight">
|
|
User Management
|
|
</h1>
|
|
</div>
|
|
<p className="text-slate-600 mt-3 text-lg font-light">Manage accounts and permissions</p>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
resetForm();
|
|
setShowModal(true);
|
|
}}
|
|
className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-xl font-semibold hover:from-amber-600 hover:to-amber-700 transition-all duration-200 shadow-lg hover:shadow-xl"
|
|
>
|
|
<Plus className="w-5 h-5" />
|
|
Add User
|
|
</button>
|
|
</div>
|
|
|
|
{/* Luxury Filter Card */}
|
|
<div className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-slate-200/60 p-6 animate-fade-in" style={{ animationDelay: '0.1s' }}>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-5">
|
|
<div className="relative group">
|
|
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5 group-focus-within:text-amber-500 transition-colors" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search by name, email..."
|
|
value={filters.search}
|
|
onChange={(e) => setFilters({ ...filters, search: e.target.value })}
|
|
className="w-full pl-12 pr-4 py-3.5 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 placeholder-slate-400 font-medium shadow-sm hover:shadow-md"
|
|
/>
|
|
</div>
|
|
<select
|
|
value={filters.role}
|
|
onChange={(e) => setFilters({ ...filters, role: e.target.value })}
|
|
className="px-4 py-3.5 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm hover:shadow-md cursor-pointer"
|
|
>
|
|
<option value="">All roles</option>
|
|
<option value="admin">Admin</option>
|
|
<option value="staff">Staff</option>
|
|
<option value="customer">Customer</option>
|
|
</select>
|
|
<select
|
|
value={filters.status}
|
|
onChange={(e) => setFilters({ ...filters, status: e.target.value })}
|
|
className="px-4 py-3.5 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm hover:shadow-md cursor-pointer"
|
|
>
|
|
<option value="">All statuses</option>
|
|
<option value="active">Active</option>
|
|
<option value="inactive">Inactive</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Luxury Table Card */}
|
|
<div className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-slate-200/60 overflow-hidden animate-fade-in" style={{ animationDelay: '0.2s' }}>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900">
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">
|
|
Name
|
|
</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">
|
|
Email
|
|
</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">
|
|
Phone
|
|
</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">
|
|
Role
|
|
</th>
|
|
<th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">
|
|
Created Date
|
|
</th>
|
|
<th className="px-8 py-5 text-right text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-slate-100">
|
|
{users.map((user, index) => (
|
|
<tr
|
|
key={user.id}
|
|
className="hover:bg-gradient-to-r hover:from-amber-50/30 hover:to-yellow-50/30 transition-all duration-200 group border-b border-slate-100"
|
|
style={{ animationDelay: `${index * 0.05}s` }}
|
|
>
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
<div className="text-sm font-semibold text-slate-900">{user.full_name}</div>
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
<div className="text-sm text-slate-700">{user.email}</div>
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
<div className="text-sm text-slate-600">{user.phone_number || 'N/A'}</div>
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
{getRoleBadge(user.role)}
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap">
|
|
<div className="text-sm text-slate-500">
|
|
{user.created_at ? new Date(user.created_at).toLocaleDateString('en-US') : 'N/A'}
|
|
</div>
|
|
</td>
|
|
<td className="px-8 py-5 whitespace-nowrap text-right">
|
|
<div className="flex items-center justify-end gap-2">
|
|
<button
|
|
onClick={() => handleEdit(user)}
|
|
className="p-2 rounded-lg text-blue-600 hover:text-blue-700 hover:bg-blue-50 transition-all duration-200 shadow-sm hover:shadow-md border border-blue-200 hover:border-blue-300"
|
|
title="Edit"
|
|
>
|
|
<Edit className="w-5 h-5" />
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(user.id)}
|
|
className="p-2 rounded-lg text-rose-600 hover:text-rose-700 hover:bg-rose-50 transition-all duration-200 shadow-sm hover:shadow-md border border-rose-200 hover:border-rose-300 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
disabled={userInfo?.id === user.id}
|
|
title="Delete"
|
|
>
|
|
<Trash2 className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<Pagination
|
|
currentPage={currentPage}
|
|
totalPages={totalPages}
|
|
onPageChange={setCurrentPage}
|
|
totalItems={totalItems}
|
|
itemsPerPage={itemsPerPage}
|
|
/>
|
|
</div>
|
|
|
|
{/* Luxury Modal */}
|
|
{showModal && (
|
|
<div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-4 animate-fade-in">
|
|
<div className="bg-white rounded-3xl shadow-2xl w-full max-w-md max-h-[90vh] overflow-hidden border border-slate-200 animate-scale-in">
|
|
{/* Modal Header */}
|
|
<div className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-6 py-5 border-b border-slate-700">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-amber-100">
|
|
{editingUser ? 'Update User' : 'Add New User'}
|
|
</h2>
|
|
<p className="text-amber-200/80 text-sm font-light mt-1">
|
|
{editingUser ? 'Modify user information' : 'Create a new user account'}
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowModal(false)}
|
|
className="w-10 h-10 flex items-center justify-center rounded-xl text-amber-100 hover:text-white hover:bg-slate-700/50 transition-all duration-200 border border-slate-600 hover:border-amber-400"
|
|
>
|
|
<X className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Modal Content */}
|
|
<div className="p-6 overflow-y-auto max-h-[calc(90vh-120px)]">
|
|
<form onSubmit={handleSubmit} className="space-y-5">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.full_name}
|
|
onChange={(e) => setFormData({ ...formData, full_name: e.target.value })}
|
|
className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
Email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
value={formData.email}
|
|
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
|
className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
Phone Number
|
|
</label>
|
|
<input
|
|
type="tel"
|
|
value={formData.phone_number}
|
|
onChange={(e) => setFormData({ ...formData, phone_number: e.target.value })}
|
|
className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
Password {editingUser && <span className="text-slate-400 normal-case">(leave blank if not changing)</span>}
|
|
</label>
|
|
<input
|
|
type="password"
|
|
value={formData.password}
|
|
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
|
|
className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
|
|
required={!editingUser}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
Role
|
|
</label>
|
|
<select
|
|
value={formData.role}
|
|
onChange={(e) => setFormData({ ...formData, role: e.target.value })}
|
|
className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm cursor-pointer"
|
|
required
|
|
>
|
|
<option value="customer">Customer</option>
|
|
<option value="staff">Staff</option>
|
|
<option value="admin">Admin</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
|
Status
|
|
</label>
|
|
<select
|
|
value={formData.status}
|
|
onChange={(e) => setFormData({ ...formData, status: e.target.value })}
|
|
className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm cursor-pointer"
|
|
required
|
|
>
|
|
<option value="active">Active</option>
|
|
<option value="inactive">Inactive</option>
|
|
</select>
|
|
</div>
|
|
<div className="flex gap-3 pt-4 border-t border-slate-200">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowModal(false)}
|
|
className="flex-1 px-6 py-3 border-2 border-slate-300 rounded-xl text-slate-700 font-semibold hover:bg-slate-50 transition-all duration-200 shadow-sm hover:shadow-md"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="flex-1 px-6 py-3 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-xl font-semibold hover:from-amber-600 hover:to-amber-700 transition-all duration-200 shadow-lg hover:shadow-xl"
|
|
>
|
|
{editingUser ? 'Update' : 'Create'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UserManagementPage;
|