diff --git a/ipi-survey-platform/src/pages/Admin/configuration/AdminUsers/ListAdminUsers.jsx b/ipi-survey-platform/src/pages/Admin/configuration/AdminUsers/ListAdminUsers.jsx index 5915e3a..f39874a 100644 --- a/ipi-survey-platform/src/pages/Admin/configuration/AdminUsers/ListAdminUsers.jsx +++ b/ipi-survey-platform/src/pages/Admin/configuration/AdminUsers/ListAdminUsers.jsx @@ -123,68 +123,73 @@ const AdminUsers = () => { ); }, [users, searchTerm]); + // Get current page data + const getCurrentPageData = () => { + const dataSource = searchTerm ? filteredUsers : users; + const startIndex = (currentPage - 1) * pageSize; + return dataSource.slice(startIndex, startIndex + pageSize); + }; + // Fetch users with pagination - useEffect(() => { - const fetchUsers = async () => { - try { - setLoading(true); - // Pass currentPage and pageSize to the API if it supports pagination - // If not, we'll handle pagination client-side - const res = await getAdminUser(searchTerm); + const fetchUsers = React.useCallback(async (search = searchTerm) => { + try { + setLoading(true); + const res = await getAdminUser(search); - const usersData = Array.isArray(res) - ? res - : Array.isArray(res?.data) - ? res.data - : Array.isArray(res?.data?.data) - ? res.data.data - : []; + const usersData = Array.isArray(res) + ? res + : Array.isArray(res?.data) + ? res.data + : Array.isArray(res?.data?.data) + ? res.data.data + : []; - if (!usersData) { - showToast('Failed to load users', 'error'); - setUsers([]); - return; - } - - const mappedUsers = usersData.map((user) => { - const id = user.id ?? user._id ?? user.user_id ?? null; - const name = user.name ?? user.fullName ?? 'N/A'; - const email = user.email ?? 'N/A'; - const lastLoginRaw = user.updatedAt ?? user.last_login ?? user.lastLogin ?? null; - const lastLogin = lastLoginRaw - ? new Date(lastLoginRaw).toLocaleString('en-GB', { - day: '2-digit', - month: 'short', - year: 'numeric', - hour: '2-digit', - minute: '2-digit', - }) - : 'Never logged in'; - const is_active = - user.is_active !== undefined ? !!user.is_active : user.active ?? true; - return { - id, - name, - email, - lastLogin, - status: is_active ? 'Active' : 'Inactive', - is_active, - raw: user, - }; - }); - - setUsers(mappedUsers); - } catch (error) { - console.error('Error fetching admin users:', error); - showToast('Error fetching admin users', 'error'); + if (!usersData) { + showToast('Failed to load users', 'error'); setUsers([]); - } finally { - setLoading(false); + return; } - }; + const mappedUsers = usersData.map((user) => { + const id = user.id ?? user._id ?? user.user_id ?? null; + const name = user.name ?? user.fullName ?? 'N/A'; + const email = user.email ?? 'N/A'; + const lastLoginRaw = user.updatedAt ?? user.last_login ?? user.lastLogin ?? null; + const lastLogin = lastLoginRaw + ? new Date(lastLoginRaw).toLocaleString('en-GB', { + day: '2-digit', + month: 'short', + year: 'numeric', + hour: '2-digit', + minute: '2-digit', + }) + : 'Never logged in'; + const is_active = + user.is_active !== undefined ? !!user.is_active : user.active ?? true; + return { + id, + name, + email, + lastLogin, + status: is_active ? 'Active' : 'Inactive', + is_active, + raw: user, + }; + }); + + setUsers(mappedUsers); + } catch (error) { + console.error('Error fetching admin users:', error); + showToast('Error fetching admin users', 'error'); + setUsers([]); + } finally { + setLoading(false); + } + }, [searchTerm]); + + useEffect(() => { fetchUsers(); - }, [currentPage, searchTerm]); // Add currentPage and searchTerm as dependencies + }, [currentPage, fetchUsers]); const totalUsers = searchTerm ? filteredUsers.length : users.length; const activeUsers = (searchTerm ? filteredUsers : users).filter((user) => user.status === 'Active').length; @@ -356,7 +361,7 @@ const AdminUsers = () => { const success = res?.status === "success" || - res?.code === 200 || + res?.status === 200 || res?.data?.status === "success" || (!res.error && res); @@ -705,6 +710,32 @@ const AdminUsers = () => { } }; + const handlePageChange = (page) => { + setCurrentPage(page); + // Clear any row states when changing pages + setEditingRow(null); + setDeletingRow(null); + setResetUser(null); + }; + + const handleSearch = (e) => { + setSearchTerm(e.target.value); + setCurrentPage(1); // Reset to first page on search + // Clear any row states + setEditingRow(null); + setDeletingRow(null); + setResetUser(null); + }; + + const handlePageSizeChange = (size) => { + setPageSize(size); + setCurrentPage(1); + // Clear any row states when changing page size + setEditingRow(null); + setDeletingRow(null); + setResetUser(null); + }; + const tableToolbar = (

Admin Users

@@ -718,9 +749,9 @@ const AdminUsers = () => { setSearchTerm(e.target.value)} + onChange={handleSearch} placeholder="Search by name, email, or status" - className="h-10 w-[350px] rounded-lg border border-[#E6EAF5] pl-10 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" + className="h-10 w-[350px] rounded-lg border border-[#E6EAF5] pl-10 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-[#B68A35]" /> {searchTerm && (