Filter Distributions and Partners Table on Admin View

[dilanurbayraktar]

Filter Distributions and Partners Table on Admin View

Summary 💻

Welcome back from break! Hope you had an amazing Thanksgiving with delicious food 🦃🥧

We have one final task for you this semester: make the Filter buttons on the Admin View functional.

On src/app/admin/page.tsx, you’ll see Filter buttons for the Admin View. When a user clicks one of these buttons, we want a filter box to appear (as shown in the design below), allowing the user to:

1. Make several filter selections
2. Click Apply
3. See only the relevant data in the table

How Filtering Should Work

We have two main tabs/tables on the Admin View:

• Distributions Table (Diapers tab)
• Partners Table (Partners tab)

Each one should have its own Filter button and behavior.

For this ticket, we want you to implement front-end filtering using the data that is already being fetched from the existing APIs.

• Distributions are fetched from GET /api/distributions
• Partners are fetched from GET /api/partners

Your job is to:

• Add filter UI (modal) that allows Rachel to select filter options
• Store those filter options in React state
• Filter the already-loaded data

You don’t need to change the existing APIs for this ticket (phew).

Filter Options to Implement

For the Distributions Table (Diapers tab), consider filters like:

• Organization name
• City
• Month/year interval (from X to Y) - Mantine's MonthPickerInput. Specifically, consider the "Dates Range" (https://mantine.dev/dates/month-picker-input/#dates-range).

For the Partners Table (Partners tab), consider filters like:

• Time they started partnering with Beantown. Again, Mantine's YearPickerInput. Also consider the "Dates Range" (https://mantine.dev/dates/year-picker-input/#dates-range).
• Organization name and cities served in the form of a search bar. Consider using our already existing APIs for this!
• Status (All/Active/Waitlisted/Inactive)

While the month and year selections are represented as single-select boxes, you can use the Mantine Month and Year Picker Input instead of how it's represented on the Figma design.

Implementation Notes

Deliverables 🚀

• Schedule at least two meetings as a pair
• Create a new branch using the “Create a branch” button in GitHub
• Edit src/app/admin/page.tsx to:
  • Make the Filter buttons open a modal
  • Show appropriate filter options for each tab (Diapers vs Partners)
  • Apply front-end filtering to the corresponding table when the user clicks Apply
• Open a PR and request review from @coopergolemme

Tips 💡

• Check how other components handle modals or dialogs in the codebase and reuse patterns where possible.
• Keep your state well-organized (separate “all data” from “filtered data” to avoid confusion).
• Consider using Mantine's modal and drawer components.

Wireframe 🎨

Partner table filter.
Diapers table filter.

Tips for success 📈

Where to get help!

Reach out to @dilanurbayraktar and @coopergolemme .