Remove duplicate TransactionPagination component and consolidate into one correct implementation

[portableDD]

📋 Description

There are currently two separate files that both export a component named TransactionPagination:

1. components/transactions/pagination.tsx — has a simplified implementation that hardcodes page numbers 1–5 regardless of the actual total pages
2. app/components/transactions/pagination.tsx — has a proper dynamic implementation with smart page number calculation, ellipsis for large ranges, and uses ChevronLeft/ChevronRight icons

The active transactions page (app/(dashboard)/transactions/page.tsx) imports from ../../components/transactions/pagination which resolves to the first (inferior) version with hardcoded page numbers. The better implementation in app/components/ is not being used.

This causes two problems:

• Users on pages beyond 5 cannot navigate to them (hardcoded list stops at 5)
• Having two files with the same component name in different locations creates confusion and import resolution bugs

🔍 Context

The app/components/ directory appears to be a leftover from a refactor attempt that created a parallel component tree. The canonical location for shared components in this Next.js project is components/ (at the root), not app/components/.

The better implementation in app/components/transactions/pagination.tsx features:

• Dynamic page number generation using a sliding window algorithm
• Ellipsis (...) for large page ranges
• ChevronLeft/ChevronRight icon buttons instead of text Previous/Next
• Returns null when totalPages <= 1 (correct behaviour)

📁 Key Files

• components/transactions/pagination.tsx — inferior hardcoded version; replace content with the better implementation
• app/components/transactions/pagination.tsx — better implementation; use this as the source, then delete this file
• app/(dashboard)/transactions/page.tsx — imports TransactionPagination; verify the import path resolves correctly after the fix

✅ Acceptance Criteria

• Only one TransactionPagination component exists in the codebase, located at components/transactions/pagination.tsx
• The remaining implementation uses dynamic page number calculation (not a hardcoded 1–5 list)
• Ellipsis (...) appears correctly when there are more than 5 pages
• app/components/transactions/pagination.tsx is deleted
• app/(dashboard)/transactions/page.tsx imports from the correct path and the pagination works end-to-end
• Navigating beyond page 5 works correctly when there are more than 5 pages of results
• No TypeScript errors introduced
• Tested on both desktop and mobile viewports

🛠️ Suggested Execution

1. Setup

git checkout -b <your-branch-name>

2. Implement changes

• Copy the full content of app/components/transactions/pagination.tsx (the better implementation)
• Replace the entire content of components/transactions/pagination.tsx with it
• Delete app/components/transactions/pagination.tsx
• Check if app/components/ directory becomes empty after deletion — if so, delete the empty directory too
• In app/(dashboard)/transactions/page.tsx, confirm the import path ../../components/transactions/pagination still resolves correctly (it should, since we kept the file at the same path)
• Run npm run build to confirm no broken imports

3. Validate

• Open the transactions page with enough data to have more than 5 pages
• Page numbers should display dynamically with ellipsis for out-of-range pages
• Clicking page numbers beyond 5 should work correctly
• Run npm run lint — no errors

4. Commit & PR

git commit -m "fix: consolidate duplicate TransactionPagination into single correct implementation"

📌 Guidelines

• PR description must include: Closes #[issue_number]
• PR must include a screenshot showing pagination with more than 5 pages working correctly
• Do not restructure other files in app/components/ unless they are also empty/unused — scope this to pagination only
• Follow existing code style — TypeScript strict, Tailwind for styling

🏆 Reward

This issue is worth 200 points in the Drips Wave program.