344 dev make the filter buttons work

[lyannne]

ℹ️ Issue

Closes #344

📝 Description

Write a short summary of what you added. Why is it important? Any member of C4C should be able to read this and understand your contribution -- not just your team members.

Briefly list the changes made to the code:

1. Added methods to ProcessGrantData to support new filtering features
2. Added new mutators & actions & fields to the store
3. Made edits to FilterCard component to accommodate for both amount and date
4. Made default null instead of increasing for date and amount filters
5. Changed StatusDropdown component to contain just the dropdown so the button would be in the FilterBar component and match the rest of the buttons
6. Small styling fixes.

✔️ Verification

What steps did you take to verify your changes work? These should be clear enough for someone to be able to clone the branch and follow the steps themselves.

Provide screenshots of any new components, styling changes, or pages.

Test Changes

If your new feature required some test to be changed or added to fit the new functionality or changes please document these changes here.

N/A

🏕️ (Optional) Future Work / Notes

Notes:

• Only one dropdown can show at a time! Clicking outside the dropdown will close it as well as clicking the button again.
• If a button has an active sorting/filtering, it will remain highlighted to show there is something active with that category.

Questions:

• The colors when clicking and unclicking the buttons are kind of ugly imo. If anyone has suggestions on what colors to make those, I'm more than happy to take it!
• Alphabetical sorting cycles through 3 clicks (ascending, descending, neither). Not sure if there's a better way to implement this, since ascending and descending look the same, as the button is highlighted for both.
• When grants are sorted/filtered should we change it so the the new grant on display is the first one in the new ordered/filtered list?
• Made it so clicking "BCAN Eligible" only shows ones BCAN qualifies for; I hope that was the intended functionality 😅
• I wish there were a way within the button to see if something is sorted ascending or descending, but it is one icon and having part of it be grey is kind of ugly; any thoughts?
• Also noticed in the design, the status dropdown should have a clear all, but is that necessary if it's single selection? should that be changed to multi select? lmk!
• Also, just to confirm, we don't care about filters/sorting persisting across reloads right?

[Copilot]

Pull request overview

This PR enhances the grants page UX by introducing a new filter/sort control bar (status dropdown, “my grants”, eligibility, amount/date ranges) and wiring those controls into the existing MobX/Satchel grant processing pipeline.

Changes:

• Replaced the old status/date filter UI with a new FilterBar that supports additional filters and sorting.
• Extended grant filtering logic (ProcessGrantData + grantFilters) to include eligibility, amount range, and “my grants” (user email) filtering.
• Added new Satchel store fields/actions/mutators to track the additional filter state.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
frontend/src/main-page/grants/GrantPage.tsx	Integrates new FilterBar, adds auth-based redirects, and adds a bell button in-page
frontend/src/main-page/grants/grant-list/GrantCard.tsx	Adjusts eligibility badge z-index class
frontend/src/main-page/grants/filter-bar/StatusDropdown.tsx	Adds a new status selection dropdown UI
frontend/src/main-page/grants/filter-bar/processGrantData.ts	Applies new filters (eligible, amount range, user email) to grant processing
frontend/src/main-page/grants/filter-bar/grantFilters.ts	Adds eligibleFilter, amountRangeFilter, and userEmailFilter predicates
frontend/src/main-page/grants/filter-bar/FilterBar.tsx	Implements the new filtering/sorting control bar UI and store wiring
frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx	Generalizes range filtering card to support date/number ranges + direction
frontend/src/external/bcanSatchel/store.ts	Adds new filter fields to the app store and persists emailFilter
frontend/src/external/bcanSatchel/mutators.ts	Adds mutators for the new filter actions
frontend/src/external/bcanSatchel/actions.ts	Adds actions for new filters and allows updateSort(null)

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[prooflesben]

The arrows when sorting alphabetically do not change depending on what direction we are sorting. Also we might want to have 3 clicks on that button to go from up alphabetical -> down alphabetical -> no alphabetical sort.

In regards to the arrows we might want to find a way to have the arrow direction reflect which way we are sorting for the other buttons as well such as due date and

I would also change the specific date to use the css built in date picker instead of having the user put in the number.

[lyannne]

The arrows when sorting alphabetically do not change depending on what direction we are sorting. Also we might want to have 3 clicks on that button to go from up alphabetical -> down alphabetical -> no alphabetical sort.

In regards to the arrows we might want to find a way to have the arrow direction reflect which way we are sorting for the other buttons as well such as due date and

I would also change the specific date to use the css built in date picker instead of having the user put in the number.

The current behavior of the alphabetical button is the 3 clicks, so i assume that needs no changes. The design has the icon on those buttons as the both the up & down triangles if ykwim, so unless we change that to have an up arrow if its ascending and down for descending, not sure if its possible. should i do that?