Add a jump-to-page input to the Pagination component for large result sets

[mikewheeleer]

Add a direct page-jump control to Pagination

Description

src/components/Pagination.tsx only exposes Previous/Next buttons, so reaching page 40 of a large services or events list means 39 clicks. The component is the shared paging primitive across the dashboard, so adding an optional "jump to page" number input here benefits every list at once. This issue adds an opt-in jump input while keeping the Prev/Next behaviour and the self-hide-at-one-page rule.

Requirements and context

• Repository scope: Agentpay-Org/Agentpay-frontend only.
• Add an optional showJump?: boolean (default false) that renders a small <input type="number"> + "Go" control clamping to [1, pageCount] and calling onChange.
• Keep the existing Previous/Next buttons, the aria-live="polite" "Page x of y" indicator, the disabled boundaries, and the pageCount <= 1 early return.
• The jump control needs an accessible label and must be keyboard operable (Enter submits).
• Keep the public Props backward compatible so current callers are unaffected.

Suggested execution

• Fork the repo and create a branch
• git checkout -b enhancement/components-pagination-jump
• Implement changes
  • Write code in: src/components/Pagination.tsx.
  • Write comprehensive tests in: extend src/components/__tests__/Pagination.test.tsx — assert the jump input is hidden by default, clamps out-of-range values, and calls onChange on submit.
  • Add documentation: document showJump in the component JSDoc and docs/components.md.
  • Validate the input has a label and Enter triggers the jump.
• Test and commit

Test and commit

• Run npm run lint, npm run typecheck, npm test, and npm run build.
• Cover edge cases: value above pageCount, value below 1, non-numeric input, and showJump omitted.
• Include the npm test output.

Example commit message

feat(components): add optional jump-to-page input to Pagination

Guidelines

• Minimum 95 percent test coverage for the component.
• Clear, reviewer-focused documentation.
• Timeframe: 96 hours.

Community & contribution rewards

• 💬 Join the AgentPay community on Discord for questions, reviews, and faster merges: https://discord.gg/eXvRKkgcv
• ⭐ This is a GrantFox OSS / Official Campaign task and may be rewarded. When your PR is merged you'll be prompted to rate the project — if this issue and the maintainers helped you ship, we'd be grateful for a 5-star rating. Clear questions in Discord and tidy, well-tested PRs are the fastest path to a merge and a reward.

[gloskull]

Hello, I have 4 years of experience delivering solutions for projects like this, covering backend, frontend, and smart contract development. After carefully reviewing your requirements, I have a clear understanding of the task and am confident in my ability to deliver a clean, efficient, and thoroughly tested solution on time. I prioritize code quality, maintainability, and industry best practices throughout the development process.
My PR will be submitted in under 10hours.

[TochukwuJustice]

Hi! I’m interested in working on this issue. I have solid experience with React, Next.js, TypeScript, and Tailwind CSS, and I enjoy building fast, responsive, and maintainable frontend applications. I pay close attention to UI quality, performance, and clean integrations, and I’m confident I can deliver a smooth and reliable solution for this task.