Create Profile Database Page

[hnadrian]

• Install MUI (from Getting Started Documentation linked below)
• Fetch all Volunteers from the database (all the data including roles and entries).
• Follow MUI documentation for Pagination, Search, Sorting by Column, and filtering. Pagination and Searching are the most important features. Select “Show Code” in MUI documentation to see the example tables’ codes.
• Populate the table with fetched volunteer data: https://mui.com/x/react-data-grid, https://mui.com/x/react-data-grid/getting-started/
  • Note that there are premium documentation so don’t waste time on reading those, we are following examples that work on the Community version.
• Searching: https://mui.com/x/react-data-grid/filtering/quick-filter/
  • The search bar is referred to as Quick Filter in MUI documentation.
  • Try to match the placement of the Figma design but if you can’t, follow what works for MUI.
• Sorting: https://mui.com/x/react-data-grid/sorting/
  • No need to have a separate “Sort by” drop-down like in Figma, follow MUI examples, and have columns sorted by clicking on the column title.
• Filtering: https://mui.com/x/react-data-grid/filtering/
  • Filtering allows admins to look up users based on tags. But MUI offers a Filter button that can be used to filter much more details
  • Try to match the placement of the Figma design but if you can’t, follow what works for MUI.
• Bonus: CSV Export https://mui.com/x/react-data-grid/export/
• Columns: Volunteer name, Volunteer email, Tags (not in Volunteer schema yet), Event type (not in Event schema yet)
• Design notes: We want to prioritize functionality over following Figma design. Do not worry about matching Figma design exactly, it’s best to have the functions work, even if that means following MUI’s way of styling and placements.