You will be building a small React app to show client and sales data. The user will be able to interact with this data by filtering and browsing through it based on basic criteria.
Use the following design mock up as a reference for the app look and feel:
- You must build this app with component re-usability in mind. Each functional component you build must be customizable by props with little to no hard-coded data or configurations beyond default values.
- You can use React Hooks or React Classes or both.
- Load the provided client data on the app's first load.
- Display the client data in standard table.
- Round sales figures to closest dollar amount
- Add a filter to search by Company Name.
- Add a filter to search by Minimum Sales amount.
- Add a Loading Spinner/Indicator that is shown while the client data is being fetched.
- Add a way to manually refresh the client data back from the API.
- Add a Pagination feature to browse through the list.
- Calculate and display total sales for all clients and current page.
- Find clients with sales higher than $800.
- From these clients, calculate the average sales figure.
- Find what percentage of total clients these high performers represent.
- Flag customers with the most monthly sales with an animated icon. Use an icon and animation pattern of your choice.
Keep the page as close to the design as you can. Feel free to use custom CSS or a CSS toolkit.