ADMIN REDESIGN: redesign the Event Management's Registrant tab for the talawa Admin portal

[aashimawadhwa]

Is your feature request related to a problem? Please describe.
we are planning redesigning the admin portal, this issue is a part of that redesigning flow.

Describe the solution you'd like
we want to redesign the Event Management Registrant Tab for the talawa Admin portal

• we want to club show registrant and check-ins registrant in a single parent tab i.e registrant
• The show registrant is ready for now please leave check-in registrant button non functional for now.
• After clicking on the add registrant button , the registrant should dissapper from this screen after a react toast with success message.

Screenshots

• Attaching the screenshots for reference.

Current Situation:

Desired Result:

Related Issues:

#1748

Please refer the figma file for a detailed understanding :
https://www.figma.com/file/WksD4uIa5sQJMIk3pR4l0c/Talawa-Design-System-(Official)?type=design&node-id=3447%3A59&mode=design&t=fkgMPaaz67qLwmMz-1

Potential internship candidates
Please read this if you are planning to apply for a Palisadoes Foundation internship PalisadoesFoundation/talawa#359

[Sahi1l-Kumar]

Can I get this issue assigned? I currently have 2 pull requests under review. I know the policy is to have only 2 issues assigned but since this issue is not getting traction I can work on it.

[Cioppolo14]

@Sahi1l-Kumar Thank you for your enthusiasm. We do our best to stick with the 2 issue policy unless there is an important exception. I will work on getting your PRs reviewed soon. Thank you for understanding.

[MahendraDani]

@Cioppolo14 Should I work on this?

[palisadoes]

We are tracking this issue with one of our projects, and we'd like to track its progress especially as the GSoC announcement dates draw near.

1. When you create your PR, please link it back to this project:
   1. https://github.com/orgs/PalisadoesFoundation/projects/27/views/1
2. The process is simple. It can be found here:
   1. https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue#manually-linking-a-pull-request-to-an-issue-using-the-pull-request-sidebar

[MahendraDani]

@aashimawadhwa @palisadoes would you please explain the following:

Current Situation:

The above screen is shown when we click on Show Registrants button in the event dashbaord.

The above screen is shown when we click on Check-In Registrants button in the event dashboard.

Expected Situation:

As I have understood the scope of this issue, we have to update the screens(modals) mentioned in Current Situation section above with the new design screens (tables).
Furthermore, we have to combine Show Registrants and Check-In Registrants button into one single button named Registrants.(This is to be displayed in top navbar)

• Please refer to the highlighted section in red color

And below the top navbar, we have to provider two buttons Check-In Registrants and All Registrants which will change the list of registrants based on their check-in status.

• Please refer to the highlighted section in yellow color

Please let me know if I am missing any detail.
Thank you

[palisadoes]

Go ahead

[MahendraDani]

ok

[palisadoes]

Unassigning. 12 days without activity or PR

[Sahi1l-Kumar]

Please assign this issue to me

[Sahi1l-Kumar]

Will be working on this passively as I have my exams. Apologies for the delay.

[github-actions]

This issue did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.

[Sahi1l-Kumar]

I think the Add Registrant column should be in a different Non-Registrants table.
The All Registrants table should have Remove Registrant option instead. What are your thoughts @palisadoes ?

[palisadoes]

Please work with @aashimawadhwa on this.

[AnshulKahar2729]

@palisadoes I would like to work on this issue.

[github-actions]

This issue did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.

[syedali237]

Can I be assigned this issue?

[duplixx]

@syedali237, what's the update on this issue? It's an important functionality that needs to be done for the MVP functionality to be working fine.

[syedali237]

Working on it, would need some more time.

[duplixx]

@syedali237 what's the update on this, if you facing any blockers please share it here

[syedali237]

@duplixx wanted to clarify a few things. Do I need to redesign the entire event management portal or simply add sections for "Check-in" and "All Registrants"? Here’s the current layout of the event management portal for reference: (if am looking at the wrong place, please can you correct me and guide me through it)

[duplixx]

@syedali237, you don't need to redesign the whole thing. You just need to add check-in, all registrations, and a table of registrants to this tab. Refer to the existing people screen or attendance screen, or you can directly refer to the Figma design that was shared earlier.

[syedali237]

@duplixx I’ve created the basic structure of the EventRegistrants component for now. I have a couple of questions regarding the implementation:
Since there is no separate collection for event registrations, and the data comes from the eventAttendance collection, should I filter users with isRegistered = true to display them as All Registrants? Similarly, for "Check-In Registrants," should I filter users with isCheckedIn = true?
Could you guide me on what the AddRegistrants button should direct to?

[duplixx]

@syedali237
Great, the design looks good.
Check-in registrants should open up a modal where the volunteer can check in participants by searching for their names.(the modal is already built see addRegistrantWrapper.tsx)
The functionality of the Add Registrants button is similar to the Check-in button, as it will essentially add registrants to the attendees list.

[duplixx]

@syedali237 whats the update, if its done please raise the PR

[syedali237]

@duplixx Still working on it and need a bit more time. I’ll have it completed and raise the PR within this week.

[syedali237]

@duplixx I have implemented the "Add Registrant" functionality by adding EventRegistrationWrapper.tsx. However, I am currently encountering an issue while working on the "Check-In" functionality. Specifically, I am trying to add CheckInWrapper.tsx so that it is triggered when the "Check-In Registrant" button is clicked. Unfortunately, when I attempt to implement this, the web app crashes. Could you please assist me in identifying and resolving the issue?

This particular line of code is causing issue . Removing this line, the code works perfectly fine.

1733422095619389.mp4

[duplixx]

@syedali237 Check-In registrant and Add Registrants should work separately, you can go with custom function for add registrants

[syedali237]

I have implemented all the functionality and features for this component. Will raise the PR after writing tests for the component.

1733829955762569.mp4

[duplixx]

@syedali237 looks good

[palisadoes]

1. Please use the new universal stylesheet when creating the PR.
2. We are moving towards a color blind friendly design that the CSS supports