FE 2 - Implement volunteer table design and functionalities

[notjackl3]

Create the volunteer tracking list table UI and connect it to the API. Here are some resources:

• Figma design
• How to create React components
• We're using this React library to implement the table

Notes:

• Components should be created in src/components/volunteers/
• Ensure proper loading and empty states
• Include a description of the ticket and the implementation in the PR (with screenshots!)
• Make the table interactive (i.e. we can select one cell, multiple cells, copy information from cells, etc.)

Table state:

• We will create a state in the frontend to hold the data about the table to be displayed quicker.
• Every time the user applies a new filter, the results from sort, search, and the past filters are undone, and the app fetches the new filtered table data from the backend through the filtering functions.
• When the user applies search or sort, the action is applied on top of the current state of the table (this is why we need to keep track of the state of the table in the frontend).
• This will help us implement search, filter, and sort in a way that they can work together.
• On initial rendering of the page, set initial states by getting the table data with the get_table function (Check BE 1.5 - Implement get_volunteers_table function #75 with instructions on how the get_table function works as it might not have been created by the time this ticket is picked up).

The goal is to:

• Create the volunteers table page layout based on the Figma design
• Build a data table with columns: full name, pseudonym, pronouns, email, phone, position, cohort, prior role, current role, future interest, notes
• Display multi-value fields (cohort, prior role, current role, future interest) as tags/chips
• Call get_table to fetch initial table state
• Show loading skeleton while data is fetching
• Show empty state when the table state is empty and data is not being fetched