Implementing Members Breakdown Table (Inactive members)

[mehdi-torabiv]

Description:

Based on a specific Figma URL, we need to implement a table in the UI repository to display a list of users with various columns. The table should include functionality such as searching by name and filters based on tags, Becoming disengaged type, and Returned. The goal is to create an interactive and user-friendly interface that allows efficient browsing and analysis of member data.

Tasks to Implement:

1. Analyze Figma Design: Review the provided Figma URL and analyze the design for the member's breakdown table. Please take note of the required columns, their arrangement, and any specific UI interactions.

2. Define Table Structure: Determine the structure of the table, including the columns and their corresponding data. Based on the requirements, identify the necessary columns such as Name, Tags, Becoming disengaged, and Returned. Consider any additional columns or data points that might be relevant.

3. Implement Table Component: Create a reusable table component in the UI repository. Use a suitable UI framework or library, such as React, to build the component. Ensure that the table supports features like sorting, searching by name, and filtering based on tags, Becoming disengaged, and Returned.

4. Fetch and Populate Data: Integrate the table component with the necessary data source, such as an API endpoint or database. Implement the logic to fetch and populate the member data into the table rows dynamically.

5. Implement Search Functionality: Add a search input field to the table interface, allowing users to search for specific members by name. Implement the necessary logic to filter and update the table rows based on the search query in real time.

6. Implement Filter Functionality: Create filter options for tags, activity type, and DOA. Users should be able to select or toggle the filters to display members matching the selected criteria. Update the table rows accordingly based on the selected filters.

7. Enhance User Experience: Implement additional features to enhance the user experience, such as pagination for large datasets, responsive design for different screen sizes, and sorting options for columns. Consider usability best practices to make the table intuitive and easy to navigate.

8. Test and Debug: Thoroughly test the implemented members breakdown table component. Perform unit tests to ensure the functionality of search, filtering, and sorting. Conduct integration tests to verify the interaction with the data source. Identify and debug any issues or inconsistencies that arise during testing.

9. Documentation: Document the integration process and provide code examples for future maintenance and understanding. Include instructions on how to use the table component, configure filters, and handle data updates. Update the UI repository's documentation with relevant information about the new component.

10. Deployment and Monitoring: Deploy the updated UI repository to a suitable environment and ensure the table component functions as expected. Set up appropriate monitoring and error-handling mechanisms to capture any issues that may occur in production. Monitor the performance of the table, including data fetching and rendering, and optimize if necessary.

11. Collaboration and Feedback: Collaborate with the stakeholders, designers, and other team members to gather feedback on the implemented member's breakdown table. Incorporate the feedback and iterate on the component as required.

References:

• Figma Design: [Click here!]

[cyri113]

Waiting for API. Not a big change.

@Behzad-rabiei will create mock API.

[cyri113]

• Components is ready.
• Max. 1 day per table.
• 2 tables.
• Should be unblocked in next 48.

[cyri113]

Blocked, ETA: Friday

[cyri113]

@Behzad-rabiei to add mock data in db.

[cyri113]

Due to the returned members. We will review this feature after launch.