Member Directory

[renatodellosso]

Intro

We're adding a place for admins to manage their organization's members.

Acceptance Criteria

• Add a new page, /members. If users are not authenticated or are not admins, they should be redirected.
• Add an organization config to enable or disable the members page. If it is disabled, redirect back to /.
• The member directory table should be paginated.
• The table should have the following columns: "Member," "Role" (use this in place of status and team on Figma, have it be either "Member" or "Admin"), "Contact", "Hours," and "Last Active" (see the bullet below for how to get "hours" and "last active").
• Create an API route, GET /members/activity that takes an array of user IDs in the body and returns the total duration of events they've signed up for (only count events in the past) and the date of the last event or shift they RSVP'd for (again, only in the past). Use the requireAdmin function from lib/authUtils here.
• Add the remove button from Figma. Don't worry about the other three buttons. Removing a member should call the corresponding BetterAuth function.
• Add a BetterAuth hook for beforeRemoveMember that deletes all RSVPs (event and shift) for the user that are in the future. Only remove the RSVPs for that organization.
• Don't worry about the "Add Member" button; that'll be a different ticket.

Resources

• See the Figma design here.
• Lucy Chen is your point of contact on the design team for this ticket.
• Use the table component from the BoG Design System. See here.
• Use BetterAuth's client to get the member data. See here.
• Don't manually specify Tailwind colors; add a variable to the CSS file instead. See here for how to do this with Tailwind.
• Use react-hot-toast for toasts if you need them.