Implement Volunteer Table Filter Modal

[a1-su]

Implements the Filter Modal for the Volunteer Table, related to issue #73. It is currently a draft as it depends on the Volunteer Table itself. Also closes the opt_in_communication ticket.

Screenshots

Description / Notes

• The filtering is debounced by 400ms as to avoid excessive calls to the backend
• When you filter by a non-option value, i.e. one that does not have tags such as Full Name and Pseudonym, you must enter the exact text of what you are filtering for (in accordance to the endpoint used); I assumed fuzzier searching should be done through the search bar
• It currently uses the getVolunteersTable endpoint to get the initial table data, and implements the filtering by using the getVolunteersByMultipleColumns endpoint, the latter of which was modified to account for the different types of roles including prior, current and future interest
• getVolunteersTable itself was slightly modified as well to return the rows in order of the ids, for the demonstration
• From the Figma, when using the modal, the background is dimmed by 25%, and when you click outside the modal, it applies the changes you've made to the filter
• The filter modal appears when you press the filter button to add a new filter, and so long as there is at least a single filter added, the filter bar will appear with the "+ New Filter" button as well, according to the Figma
• Some of the colours, particularly the purples, have been changed from the volunteer table PR to better match the Figma
• It limits the height of a row so that if a single volunteer has a cell with, for example, many tags (i.e. they might be a part of many cohorts), the row has a max height and the user can scroll through the cell individually to see the values
• It moves some variables around to different files, such as the icons used to represent the columns of the table
• Since I've removed the sample data for demonstration purposes in the original volunteer table PR, I've modified the Supabase sample data so that it's easier to visualize how the filtering works when testing in development
• If you press "Enter" in the either of the text boxes in the filter modal, it will automatically either move you to the next step in the modal or create the filter (i.e. you don't have to manually click every time)
• There is a global operation to the side of the filter bar, and for multi-tag attributes such as cohort and prior role, the user is able to specify the mini-op; for single-tag attributes, it defaults to "OR" / Any matches
• Setting a filter now resets the search and sort to their default (empty) states

Questions and Comments

• The type of each role is specified in the Roles table itself in the Supabase, which seems unintuitive when the type attribute is supposed to specify whether an individual volunteer has had that role in the past, has it currently, or is interested in it in the future, i.e. type is in relation to each volunteer themselves
  • For example, if we have a 2 volunteers, one that was a prior "Chat Counsellor" and the other who is a current "Chat Counsellor," we would need 2 separate rows in the Supabase Roles table to represent the 2 "Chat Counsellor" roles, one that is of a prior type and the other that is of a current type
  • If the type is instead in VolunteerRoles, we would only need a single role to represent this scenario and the type attribute could instead be in the relation between volunteer and role
• Currently in the backend, functions like getVolunteersByMultipleColumns only return the rows in the Volunteers table, and not any of the associated cohorts or roles of each individual volunteer which means instead of directly using their return values for the table, we are filtering the ids of the volunteers that are returned and using the data returned by getVolunteersTable to show the data from the filtered volunteer's ids
  • This means we are returning redundant information in the getVolunteersByMultipleColumns endpoint, when we could simply be returning only the ids of the filtered volunteers
• The roles themselves also have an activity indicator, is_active; if a role is not active, should the tag colouring behave differently, such as being greyed out?
• The check constraints for the position attribute in the Volunteers table only allows lowercase versions of "member," "volunteer," and "staff"; in addition, the column itself is nullable, but the check does not allow that either
  • I believe Supabase also allows the use of enums instead of a manual check condition
• Since endpoints getRoles and getCohorts have not been merged yet, the current implementation searches for possible roles and cohorts in the returned data from getVolunteersTable instead
• It's been implemented in accordance to the issue description, which says to implement it such that when a filter is added, the search and sort are cleared; however, the page is perfectly capable of handling searches and sorts not being reset after each filter, and it would probably seem more intuitive to the user if the searches and sorts they had before their filter wasn't cleared, but maybe I'm misunderstanding

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
trcc	Ignored		Mar 16, 2026 11:36pm

[LeandroHamaguchi]

Hi @a1-su! I was just testing the filtering logic, and I noticed something:

• Make sure that the filtering fields are the same as the table columns. For example, the field "position" is not supposed to be in the filter dropdown.

[Copilot]

Pull request overview

Implements the Volunteer Table filtering UI (modal + filter bar) and wires it into backend-driven filtering, including the default opt_in_communication filter.

Changes:

• Added filter modal + filter bar UI and integrated debounced filter application into VolunteersTable.
• Updated backend filtering to support role-type-specific fields (current_roles, prior_roles, future_interests) and return filtered volunteer IDs.
• Added the opt_in_communication column/tag handling and adjusted styling/theme variables.

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
tests/lib/api/getVolunteersByMultipleColumns.test.ts	Updates tests for new role field names + new return shape (IDs)
src/styles/variables.css	Tweaks purple palette values
src/lib/api/getVolunteersTable.ts	Orders volunteer rows by id
src/lib/api/getVolunteersByMultipleColumns.ts	Adds role-type-specific filtering and returns volunteer IDs
src/hooks/useDebounce.ts	New debounce hook (default 400ms)
src/components/volunteers/volunteerColumns.tsx	New centralized column + filterable-column config
src/components/volunteers/utils.ts	Tag color mapping updated (incl. Yes/No)
src/components/volunteers/useCellSelection.ts	Makes CellCoords internal-only
src/components/volunteers/types.ts	Changes opt_in_communication presentation type for UI tags
src/components/volunteers/VolunteersTable.tsx	Integrates filtering UI/state + debounced backend filtering
src/components/volunteers/FilterModal.tsx	New modal component for creating/editing a filter
src/components/volunteers/FilterBar.tsx	New “Matches All/Any” bar + per-filter editing entry points

---

💡 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.

[Copilot]

Pull request overview

Implements the Volunteers Table filter modal + filter bar UI (per Figma/issues), adds a default opt_in_communication filter, and updates backend filtering to support role type–specific filters (prior/current/future interest).

Changes:

• Add FilterModal + FilterBar components and wire them into VolunteersTable with debounced backend filtering.
• Refactor volunteer table columns into a shared config (volunteerColumns.tsx) and add a reusable useDebounce hook.
• Update getVolunteersByMultipleColumns to handle role types and return filtered volunteer ids; update tests accordingly.

Reviewed changes

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

Show a summary per file

File	Description
tests/lib/api/getVolunteersByMultipleColumns.test.ts	Updates unit/integration tests for new role field names + ids-only return shape.
src/styles/variables.css	Tweaks purple theme variables to better match Figma.
src/lib/api/getVolunteersTable.ts	Adds deterministic ordering to table fetch results.
src/lib/api/getVolunteersByMultipleColumns.ts	Adds server action directive, role-type aware filtering, returns volunteer ids, updates validation.
src/hooks/useDebounce.ts	New debounce hook used to reduce backend calls.
src/components/volunteers/volunteerColumns.tsx	Centralizes column definitions + filterable column metadata.
src/components/volunteers/utils.ts	Updates tag coloring logic (including Yes/No coloring).
src/components/volunteers/useCellSelection.ts	Minor type visibility change (internalizes CellCoords).
src/components/volunteers/types.ts	Adjusts UI Volunteer type to support table display fields (incl. opt-in display).
src/components/volunteers/VolunteersTable.tsx	Integrates filter modal/bar, default opt-in filter, and debounced backend-driven filtering.
src/components/volunteers/FilterModal.tsx	New modal for selecting filter column + values (with outside-click apply behavior).
src/components/volunteers/FilterBar.tsx	New bar showing active filters with edit/add interactions.

---

💡 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.