Client Specifics Querying Functionality + More Cols

[benson-fm]

Quote

• “I'VE PLAYED THESE GAMES BEFORE!!!” - Seong Gi Hun

Description

• Your task is to make the Client Specifics Querying Functionality. You'll be adding an extra functionality to querying data on the clients list

Instructions

Setup

Be sure to add the secrets to the Frontend .env if you haven't already.

Copy-paste the secrets in this doc into a new .env file and place it in /client

Task

Create the following Frontend component:

• Client Statistics Filtering

THERE SHOULD BE NO CSS OR STYLING DONE FOR THIS TASK

Steps

1. Add a filter button to the client statistics page
2. When clicked this button should create a popup that allows a user to add filters see this
3. Each filter works on a single column. These filters should have different options based on the data type for strings we have the options contains and equals, for dates and numeric values we should have less than, greater than, and equal to. (this will implicitly allow the user to create range filters by using a greater than and less than).
4. Adding each filter gives the user to select AND or OR for how they want multiple filters to be interpreted. AND operations should be interpreted before OR options (i.e. condition1 && condition2 || condition 3 && condition4 would be interpreted as (condition1 && condition 2) || (condition 3 && condition4)) This should be how SQL already evaluates it, so it shouldn't be necessary to add any parentheses to enforce this order of operations
5. All actual filtering should be done by the backend, so these filters must be passed to the backend through query parameters which have already been built into the route, however you will need to update the backend route to incorporate filtering.
   1. If it makes it easier you can add a "save filter" button to the popup in the frontend and only update the data according to the filter when this button is clicked

Notes

Be sure to thoroughly test your implementation.

Resources

• Secrets .env
• Figma