Standardize pagination component for consistency and reusability

**Is your feature request related to a problem? Please describe.**
We currently have two different pagination implementations in the frontend, which leads to inconsistent UI/UX across the application.
- Most pages use a custom pagination component located at `frontend/src/components/pagination`, which looks consistent and matches our design system.
- However, `projects/dashboard/metrics` uses `Pagination` from `@heroui/react`, and its appearance and behavior do not align with the rest of the app.

**Describe the solution you'd like**
I’d like to standardize pagination across the application by reusing our existing custom pagination component everywhere, including `projects/dashboard/metrics`.
- Clear, minimal props (currentPage, totalPages, onPageChange)
- Centralized styling and behavior
- Easy customization without duplicating logic

**Are you going to work on implementing this?**

- [x] Yes
- [ ] No

### Pagination Component:

### @heroui/react: