ADMIN REDESIGN: Standardized User Management - Admins & Super Admins

[palisadoes]

Is your feature request related to a problem? Please describe.

The User management screens for Admin and Super Admin are very different

1. Admin

   

2. Super Admin

   

Describe the solution you'd like

1. Refer to our official figma design for the items below:

   1. https://www.figma.com/file/WksD4uIa5sQJMIk3pR4l0c/Talawa-Design-System-(Official)?type=design&node-id=307-212&mode=design&t=qM7o7OZKjp59AX7Z-0

2. We need both to resemble the desired design in our official Figma. Where organization specific modifications are specified in the Organizations tab

   

3. The Organization People and Community Users screen must match that of the existing Organization People screen:

   1. with the Action column removed

   2. clicking on a row must invoke the User design

      

4. When the Organization tab is selected:

   1. The sort, search, and filtering options must be removed
   2. The only options should be for changing:
      1. the blocking status
      2. roles
   3. In the Admin screen, only the current organization must be visible to prevent confusion
   4. In the Super Admin screen, all organizations must be visible

   

5. You will also need to standardize the titles.

   1. In the Admin screens we should only be referring to members, not people and users. The word Talawa should be removed
   2. In the Super Admin screens we should only be referring to users.

   

   

Describe alternatives you've considered

• N/A

Approach to be followed (optional)

• See above

Additional context

Assistance:

1. Please work with the following for guidance
   1. @aashimawadhwa
   2. @rishav-jha-mech

Related Issues:

1. https://github.com/PalisadoesFoundation/talawa-admin/issues/1615

Potential internship candidates

• Please read this if you are planning to apply for a Palisadoes Foundation internship https://github.com/PalisadoesFoundation/talawa/issues/359

[Doraemon012]

@palisadoes , I would like to work on this issue. Please assign it to me.

[Doraemon012]

@palisadoes @aashimawadhwa @rishav-jha-mech

I had a doubt regarding the instructions provided in the issue. I need a bit of clarification regarding point 4.

In part 4 of the point, it's mentioned that

   4. In the Super Admin screen, all organizations must be visible

In the figma design, the page categorizes organizations as created by the user, joined by the user, etc. When you mention "all organizations," are we supposed to display every single organization regardless of the category? If so,how will we be able to view the different types of organizations (like the organizations joined by user, created by user, etc.)?

Additionally, the part 2 mentions that

   2. The only options should be for changing:

      1. the blocking status
      2. roles

Since these options are organization-specific, should we modify the UI to display these options corresponding to every organization on the page?

This is the UI of the page as per the Figma design:

[palisadoes]

1. When a Super Admin is looking at the organization tab, they should see all available organizations
2. When an Admin is looking at the organization tab, they should only see organizations they are admins for
3. Yes, you should update the card design for blocking and roles. There should be no manage option as there is now

The image you posted is not visible

[Doraemon012]

@palisadoes @aashimawadhwa @rishav-jha-mech

I've prepared A design based on the instructions provided above.

Please review the design and confirm if it aligns correctly with the instructions.

I have a small suggestion though. According to the Figma designs shared, the user flow for a superadmin has a specific page for viewing all organizations. Now, if we're showing all organizations in the organizations tab within the user section, what would be the purpose of it? Wouldn't this be duplicating information?

As this page falls under the user section, shouldn't it display organizations related to the specific user instead?

Based on the current figma designs, here's the user flow for a superadmin:

[palisadoes]

Thanks for the observations.

1. The card design should display the user's role for the organization so that it's immediately known. The information on the number of members and admins isn't necessary.
2. There should be an option to remove the member from the organization's list

Related to the organizations to view:

1. If we only show the user's orgs, then the admin may not have privileges to alter authorization permissions in the other orgs.
2. If we show the orgs the admin has management for, then the admin can add users to other orgs.

Based on this, it's best to focus on the current org in Admin and leave the multi-org options to the Super Admin. This would mean that the tab would be labeled Organization in Admin, but Organizations in Super Admin

[Doraemon012]

@palisadoes @aashimawadhwa @rishav-jha-mech

I have changed the design of the card as per the requirements. Please take a look.

I have created this page design for superadmins:

Whereas for admins, only current organization will be displayed:

Please review the design and confirm if it aligns correctly with the requirements.

[palisadoes]

It may be better to have a standardized dropd own look and feel for this.

1. Role
   1. User
   2. Admin
   3. SuperAdmin
2. Status
   1. Active
   2. Blocked
3. Member
   1. Yes
   2. No

The disadvantages to this approach are:

1. we don't have the impact of colors. Is that possible in a dropdown?
2. We lose some of the organization information. I don't think this is necessary. We don't need the statistics for these screens. It's more relevant in the select organization screen for Admins / Super Admins

Can you think of a better layout?

[pranshugupta54]

Since this issue involves working with People page, we can also add a task:

• Add "Blocked Members" option to Filter on People page (Instead of "Search by Role", can make it "Filter")

[palisadoes]

@Doraemon012

1. Do you need additional guidance?
2. Let's leave the filtering out of scope for now. Though a valid suggestion, it would delay the base implementation

[Doraemon012]

@palisadoes

I've created a design based on the card layout with dropdowns as suggested. Here's the image:

Following the recommendations, I've incorporated three dropdowns:

• Role
• Status
• Member

Additionally, I've used colors to enhance intuitiveness, such as green indicating "yes" and red indicating "no."

As the roles are assigned on an organization basis, I suggest disabling the role dropdown when the user is not a member of the particular organization.

While omitting the search and filter functionality, this would be the overall design of the page:

Please take a look.

[palisadoes]

1. Thanks for the update. This is satisfactory. Please go ahead.
   1. Make sure that long strings for the organization name and address are truncated with elipses (...) with a mouse over just in case.
2. I expect @aashimawadhwa and @rishav-jha-mech to have comments. Hopefully they will be minor

[pranshugupta54]

As the roles are assigned on an organization basis, I suggest disabling the role dropdown when the user is not a member of the particular organization.

It's member detail for that particular user in that specific Organization so we should only show one Org instead of showing all Orgs even when viewer is Non-Admin for other orgs. So where do we get disabled roles?

[palisadoes]

As the roles are assigned on an organization basis, I suggest disabling the role dropdown when the user is not a member of the particular organization.

It's member detail for that particular user in that specific Organization so we should only show one Org instead of showing all Orgs even when viewer is Non-Admin for other orgs. So where do we get disabled roles?

I overlooked that.

@Doraemon012 the logic would mean that we would never see tiles for disabled roles. You'll need to update this in your PR.

[github-actions[bot]]

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.

[Cioppolo14]

Unassigning due to no activity or open PR

[Doraemon012]

@Cioppolo14 @palisadoes I am working on the issue. I have already created and fianilazied the figma designs as visible in the above comments. I have also raised a related PR in talawa-api repository. I will complete this as soon as possible. Please reassign this to me.

[palisadoes]

Are you still working on this?

[Doraemon012]

@palisadoes I apologise for the delay. I was having my end semester exams. The code is almost ready. I'll raise a PR within next two days.

[Doraemon012]

@palisadoes Please take a look at the screen recording below.

Does this functionality align with the requirements of the issue ?

Screencast from 05-11-2024 09:30:08 PM.webm

[palisadoes]

Getting closer.

1. As this is an Admin specific screen, you should only see one organization listed. That would be the organization being edited.
2. You'll need to add translations for the dropdowns.
3. What does "Conflicting Entry" mean in this context? It's not obvious to the user.

[Doraemon012]

1. As this is an Admin specific screen, you should only see one organization listed. That would be the organization being edited.

Sorry for not being clear. The screen shown in the screen recording is the one for a super admin. As discussed, the super admin screen will contain all the organizations, while the admin screen will show only the selected organization.

2. You'll need to add translations for the dropdowns.

Sure, working on it.

3. What does "Conflicting Entry" mean in this context? It's not obvious to the user.

This is due to a bug in my code, I will fix it.

[github-actions[bot]]

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.

[palisadoes]

@Doraemon012 I closed your PR due to inactivity. We really need the output to match the Figma design. Are you willing to give it another try?

[Doraemon012]

@palisadoes I apologize for the inactivity. I was waiting for the reviewer's feedback on the Figma design.

I'll fix the conflicting files first, and then we can either discuss the design or wait for the reviewer's response.

Please reopen my PR.

[palisadoes]

Thanks. Please reproduce the Figma design aesthetic for now.