filter functional, fixed a bug as well

[GinaCastromonte]

Description

This component is integrated into the "trends" page to allow users to select a date range for updating charts dynamically based on the selected date range.

Feature update/change/addition, bug fix, styling update, etc.

• [ ] The date range picker component should be functional and display correctly.

• [ ] The selected date range should be displayed in the button as per the user's selection.

• [ ] Toggling the button should show/hide the date range picker.

• [ ] Charts on the "trends" page should update dynamically based on the selected date range.

Update Screenshot

Testing Instructions

1. Open the "trends" page in the application.
2. Ensure that there is a select button to choose a custom date range or predefined buttons for week, month, and last month for comparison.
3. Click on the select button to display the date range picker.
4. Select a custom date range using the calendar interface or click on one of the predefined buttons for week, month, or last month.
5. Verify that the selected date range is displayed in the button.
6. Click on the button again to hide the date range picker.
7. Verify that the charts on the "trends" page update dynamically based on the selected date range.
8. Add moods, logs, wins, favorites, and frequented words to the application.
9. Keep an eye on the changes in all trend charts corresponding to the added data.

Learnings (Optional)

react-date-range library

[netlify[bot]]

✅ Deploy Preview for uncloud ready!

Name	Link
🔨 Latest commit	cfcadc7d0a1e214850b82764f52879b08e096a6e
🔍 Latest deploy log	https://app.netlify.com/sites/uncloud/deploys/6661c677d2b135000837b025
😎 Deploy Preview	https://deploy-preview-79--uncloud.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.