[Frontend] Create Chapter Management Page

[johannesq23]

Context

BEI wants to have a chapter management page to view chapters, and associated volunteers in the chapters.

Requirements

• Similar to the PatientGrid.tsx and VolunteerGrid.tsx components, create one more table component (using the DataGrid.tsx and Pagination.tsx components) as below. When you click in, you are redirected to the individual chapter page.
• This is what each component of the chapter should look like.

• The backend routes associated with the actions will implemented in a separate ticket
• For the time being, use dummy data to test and preview

ChapterGrid component

• Props:

interface ChapterGridProps {
  data: IChapter[];
  sortField: SortField | undefined;
  setSortField: React.Dispatch<React.SetStateAction<SortField | undefined>>;
  setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
  pageCount: number;
  currentPage: number;
}

• Here is the design, the chaptergrid should be populated with the items shown.
• The table should also include pagination
• All columns should be sortable except for "View Chapter"

ChapterSearch component

Implement the chapter search component on the same page as the chapterGridComponent. We do NOT need the advanced filter. We should only filter by name.

MyChapter component

Implement the MyChapter page, which looks like this. This is what happens when you click on a chapter component in the grid:

• Search bar only searched by name- no need for advanced filtering.
• Populate with dummy data for now but in a way that makes it easy to update when the backend is completed.

NavBar

Implement the Changes to the Navigation Bar. Scroll around the figma here.

• Role == ChapterPresident, then show MyChapter
• Role != Volunteer or Role != Chapter President, then show SearchChapter Component

Acceptance Criteria

• Implement ChapterGrid component
• Implement ChapterSearch component
• Implement MyChapter component
• Implement NavBar Changes