[FEAT] Develop the members page on Admin Dashboard and implement the Export Members functionality

[luqmonac56]

Develop the members page on the admin dashboard using the invite link generation component, a form for inviting members, the manage members component developed by other interns, and an export to CSV functionality. Ensure all components are functional, cohesive, and match the design specifications, including responsiveness.

Purpose
Admins should be able to go to the members page and invite members through different options such as filling a form or generating a link. They should also be able to manage their members and export the member list as a CSV file. This page will centralize member management and streamline the process of adding and managing members.

Requirements

• Invite Link Generation: Add the invite link generation component allowing admins to generate and copy invite links.
• Invite Members Form: Add the Developed a form for inviting members by filling out their details.
• Manage Members: Add the manage members component for viewing and managing member details.
• Export to CSV: Implement functionality to export the member list as a CSV file.
• Cohesiveness and Design: Ensure all components are cohesive, functional, and match the provided design.
• Responsiveness: Ensure the members page is fully responsive and works well on different devices.

Tasks

• Ensure the link can be generated, copied to the clipboard, and refreshed.
• Ensure the form for inviting members works
• Ensure functionalities like role assignment, deletion, and viewing details are working correctly.
• Implement the export to CSV functionality.
• Ensure the exported CSV file contains accurate and complete member data.
• Ensure all components are integrated cohesively and match the provided design mockups.
• Perform thorough testing to ensure functionality and usability.
• Ensure the members page is fully responsive.
• Write unit tests to cover different functionalities.

Note

• Ensure code quality and maintainability.
• Provide clear documentation and usage examples.
• Collaborate with other interns to ensure seamless integration of components.

Images and Figma Links

https://www.figma.com/design/VEItfX6St5NSAqqNHImcxD/HNG-Boilerplate-Designs?node-id=96-19490&m=dev

[raji-ayyub]

Hi, Can I get permission to work on this.