[Admin] Pagination for Users List

[mehalyna]

As an Admin,
I want to navigate through pages of the users' list,
So that I can efficiently manage a large number of users without overloading a single page.

---

Acceptance Criteria:

Pagination Controls:

1. Pagination controls are available at both the top and bottom of the users' list for convenience.
2. Controls include:
   • Next: To move to the next page.
   • Previous: To go back to the previous page.
   • Direct Page Numbers: To jump to a specific page.
   • First: To go directly to the first page.
   • Last: To go directly to the last page.

Items Per Page:

1. The system displays a default of 10 users per page.
2. Admins can select how many users to display per page (e.g., 10, 20, or 50) using a dropdown.
3. The selection persists during the admin session.

Page Navigation:

1. The total number of pages is displayed, along with the current page (e.g., Page 1 of 22).
2. Admins can jump to a specific page by clicking the page number.
3. Navigation works without refreshing the entire page (AJAX-based or similar).

Persistent Filters and Sorting:

1. If the admin applies filters (e.g., by Статус) or sorts the list:
   • The filters and sorting persist when navigating between pages.
2. This ensures the admin’s context is not lost.

Performance Consideration:

1. The system dynamically loads users for the current page only.
2. This ensures smooth performance, especially when handling large datasets.

Visual Feedback:

1. The current page is highlighted in the pagination controls for clear identification.
2. Disabled states:
   • If the admin is on the first page, the Previous and First buttons are disabled.
   • If the admin is on the last page, the Next and Last buttons are disabled.

---

UI/UX Notes:

• Ensure clear spacing and alignment of pagination controls for intuitive use.
• Display a loading spinner or placeholder when switching pages, if data loading takes time.

---

Error Handling:

1. Invalid Page Number:
   • If an invalid page number is entered, show an error: "Invalid page number. Please enter a valid page."
2. Load Failure:
   • If users fail to load, display a message: "Failed to load users. Please refresh the page or try again."

---

Mockup

Epic link #821

[Andrewakiv]

[Andrewakiv]

[Andrewakiv]