[Frontend] Redesign date range picker

[glenflorendo]

User Story

As a user, I want an intuitive interface to select date ranges, so that I can properly filter the dataset to retrieve the information I need.

Descriptions

Some people have expressed difficulty with the UX of our current date picker. This ticket attempts to create a new UI for the date range picker to propose as alternative to Design and Product.

This new design comes from various data dashboards. In the attached examples, these come from AWS CloudWatch.

You will still need to adhere to our design system, but the layout and experience itself will be different.

First, you will need to focus on the main UI for this, namely the two calendars side-by-side, the boxes for datatimes, etc. Afterwards, we can discuss on how to include presets. I have few ideas.

Acceptance Criteria

• [ ] Build a new, alternative date range picker
• [ ] Present to Design and Product

Design References

Relative Presets:

• Days - 1, 2, 3, 4, 5, 6
• Weeks - 1, 2, 3, 4
• Months - 3, 6, 9, 12

Additional Notes

[glenflorendo]

@gibsonliketheguitar Updated with an image of the Relative tab and the presets we should have in the UI.