diff --git a/app/admin/members/page.tsx b/app/admin/members/page.tsx index 82e7011..ac4e962 100644 --- a/app/admin/members/page.tsx +++ b/app/admin/members/page.tsx @@ -138,6 +138,12 @@ function MembersPageContent() { const [searchTerm, setSearchTerm] = useState("") const [statusFilter, setStatusFilter] = useState("all") + // Pagination states + const [currentPage, setCurrentPage] = useState(1) + const [pageSize, setPageSize] = useState(10) + const [totalUsers, setTotalUsers] = useState(0) + const [paginationLoading, setPaginationLoading] = useState(false) + // Bulk upload states const [showBulkUpload, setShowBulkUpload] = useState(false) const [bulkUsers, setBulkUsers] = useState([]) @@ -153,19 +159,30 @@ function MembersPageContent() { useEffect(() => { if (user) { - fetchUsers() + fetchUsers(1, pageSize) // Always start from first page loadStoredJob() } }, [user]) - const fetchUsers = async () => { + // Reset to first page when filters change + useEffect(() => { + if (user && (searchTerm || statusFilter !== "all")) { + setCurrentPage(1) + fetchUsers(1, pageSize) + } + }, [searchTerm, statusFilter]) + + const fetchUsers = async (page: number = currentPage, size: number = pageSize) => { try { setLoading(true) - const response = await apiClient.get('/api/v1/users') + const response = await apiClient.get(`/api/v1/users?page=${page}&limit=${size}`) const data: ApiResponse = response.data if (data.success) { setUsers(data.data.users) + setTotalUsers(data.data.pagination.total_count) + setCurrentPage(page) + toast({ title: "Success", description: `Fetched ${data.data.users.length} users`, @@ -186,6 +203,7 @@ function MembersPageContent() { }) } finally { setLoading(false) + setPaginationLoading(false) } } @@ -352,7 +370,7 @@ function MembersPageContent() { // If job is completed, refresh users list if (jobResult.status === 'completed' || jobResult.status === 'failed') { - await fetchUsers() + await fetchUsers(currentPage, pageSize) // Show completion message if (jobResult.status === 'completed') { @@ -395,6 +413,24 @@ function MembersPageContent() { } } + // Pagination functions + const handlePageChange = (page: number) => { + setPaginationLoading(true) + setCurrentPage(page) + fetchUsers(page, pageSize) + } + + const handlePageSizeChange = (size: number) => { + setPaginationLoading(true) + setPageSize(size) + setCurrentPage(1) // Reset to first page when changing page size + fetchUsers(1, size) + } + + const totalPages = Math.ceil(totalUsers / pageSize) + const startIndex = (currentPage - 1) * pageSize + 1 + const endIndex = Math.min(currentPage * pageSize, totalUsers) + const filteredUsers = users.filter((user) => { const matchesSearch = user.name.toLowerCase().includes(searchTerm.toLowerCase()) || @@ -513,8 +549,30 @@ function MembersPageContent() { +
+ + +
+
-
)} + + {/* Pagination Controls */} + {totalPages > 1 && ( +
+ {paginationLoading && ( +
+ +
+ )} +
+ + Page {currentPage} of {totalPages} + + + + {startIndex}-{endIndex} of {totalUsers} results + +
+ +
+ {/* Previous Page */} + + + {/* Page Numbers */} +
+ {/* First Page */} + {currentPage > 3 && ( + <> + + {currentPage > 4 && ( + ... + )} + + )} + + {/* Page Range */} + {Array.from({ length: Math.min(5, totalPages) }, (_, i) => { + const page = Math.max(1, Math.min(totalPages - 4, currentPage - 2)) + i + if (page > totalPages) return null + + return ( + + ) + })} + + {/* Last Page */} + {currentPage < totalPages - 2 && ( + <> + {currentPage < totalPages - 3 && ( + ... + )} + + + )} +
+ + {/* Next Page */} + +
+
+ )}