Paginated Profits Table on User Homepage

[yuanchenmeng]

Overview

In this PR, I implemented a profits table component with pagination feature by utilizing bootstrap Pagination component and Ourtable component. Column headers are amount, date, health, and the number of cows. Most recent record appears at the top. Default pagesize = 7. User can navigate through the profit data pages by controls.

Minor Fix

• PlayPage.js
  • CommonOverview.js: Added additional handling for the button that redirects user to the leader-board page.
  • FarmStats.js: parseMoney function is used for displaying wealth better.
  • Removed background image. Personally, I don't like it. No background picture seems neat.
• util Introduced a parseMoney function that handles value formatting with SI prefixes. The function accepts a double numeric value and scales it using SI prefixes like "K", "M", "B", and so on, to improve readability for large numbers. The previous function uses responses.toFixed(2). The length of integer part may be very long, which hinders future UI design.

Screenshots

Tests

Front end Coverage & Mutation Testing 100 % Dynamic contents are rendered as expected. Current Main branch has some issues when deploying on dokku. Demo branch: Yuanchen-dev-PagedProfitTable Or view storybook component.

Linked Issues

Closes #40 Closes #6

[pconrad]

Closing without merging since the PR feedback was ignored.