Nahiyan_Optimized permissions management page for mobile displays

[Nahiyan-16]

Description

Optimized permissions management page for all viewports 375px wide and above.

Related PRS (if any):

This frontend PR is related to the dev backend

Main changes explained:

• Redesigned pagination so it fits all viewports.
• Added side-scrolling to the table
• Added responsive font sizes.
• Fixed permission item page as well

How to test:

1. check into current branch
2. do npm install and npm run start:local to run this PR locally
3. Clear site data/cache
4. log as owner user
5. go to dashboard→ Other Links -> Permissions Management
6. verify that this page is functioning with no issues under all viewports 375px and above
7. Click on a permission item
8. verify that this page is functioning with no issues under all viewports 375px and above
9. verify this new feature works in dark mode

Screenshots or videos of changes:

[AnujVakil]

I have tested this PR in light and dark mode. Everything looks fine but for the mobile displays, info section icon for Save and Delete Role button is not visible.

It is visible in normal window view.

[nyelmela]

I have tested this PR, and everything works perfectly well. I checked into the current branch, ran npm install, and npm run start:local to run the PR locally. After clearing the site data and cache, I logged in as the owner user and navigated to the dashboard → Other Links → Permissions Management. I verified that this page functions without any issues under all viewports 375px and above. Additionally, I clicked on a permission item and confirmed that the page continued to function correctly under all viewports 375px and above. Lastly, I ensured that this new feature works seamlessly in dark mode. Everything worked as expected.

[Nahiyan-16]

@AnujVakil You're not on the correct branch. Please retest this.

[angelalalacheng]

Hi Nahiyan-16,

I set the frontend branch as Nahiyan_Optimize-Permissions-Management-Page and backend branch as development. The page is functioning with no issues at viewports 375px in both light and dark mode and permission list works good as well.

[vijay10pk]

All the changes works as expected.

Screen.Recording.2024-07-11.at.7.48.00.PM.mov

[AnujVakil]

I have re-tested this PR on current branch and it is working fine.

[nikhilpittala16]

I have tested the PR and everything works as expected for both light mode and dark mode.

[SaiLavanya1]

I've tested this PR and it is working fine.
https://www.loom.com/share/5cf1fc4ca43947b38165f6d4e8ca683f

[kdaga81]

The changes are working as expected!

[sahithidhulipala9]

Tested this feature, in all the above mentioned steps, feature working as expected.

[rmcgummadi]

I have logged in as the local Admin User and tested Pull Request #2446. It is working as expected. I tested it in both dark mode and light mode with a viewport of 375px wide and above. The functionality is working as expected.

[Vigneshwar-Muriki]

I tested this PR by logging in as an admin and verifying the feature on mobile displays and other viewports. All the buttons align correctly across all viewports. Additionally, when a permission item is clicked, the page functions properly on all viewports and in dark mode.

Frontend.PR.2446.mp4

[beblicarl]

This functionality works as intended and the code is great

[vishavk1992]

I have tested this PR and everything works as expected. Great Work!!!

PR-2446.mp4

[Rishitha1309]

I have tested this PR in both light mode and dark mode, everything works perfectly fine.

[aaryaneil]

Tested the PR for 375px for light and dark mode and the changes work as expected.

[cecilia-uu]

It works as expected!

[KaushikMreddy]

Hi Nahiyan,

The Mobile layout looks good. Most of it works pretty well. I found a minor issue.

1. In 390 px, The user name gets cut out if the drop-down in other links in opened.
   
   This occurs in 430px as well
   

everything else looks good!

[MinSun0814]

Nothing looks overlapping. Nice work!

[Shadhrush5]

Hi, I reviewed PR #2446 by following the steps mentioned.
Checked out the branch "Nahiyan_Optimize-Permissions-Management-Page".
Ran the npm run start:loclal command
Logged in as owner -> Other Links -> Permission management

The page functions without any issues under all viewports 375px and above.

Additionally, I clicked on a permission item and confirmed that the page continued to function correctly under all viewports 375px and above.

Everything works as expected. Thank you for the great work.

[JatinAgrawal94]

At 375PX,
some delete buttons are going out of the viewport, please fix the alignment of the buttons.

pr2446.mp4

[Nahiyan-16]

@KaushikMreddy The header is not solely part of the permission management page. It is its component and there is a PR handling this.

[Chetan0606]

Tested all the functionalities as per the provided steps and everything looks fine.

[SrikanthChowdary495]

I logged in as the local Admin User and tested Pull Request #2446. Everything works as expected in both dark mode and light mode, with a viewport of 375px wide and above.
please find the video for reference.

mobile.display.mp4

[ReinaT5678]

The Permissions Management page works as expected. I was able to test the functionality for both light and dark screens with viewports below and above 375px and both worked well. See screenshots below from when I was testing!

Below are images from exploring the different pages within the permissions management page and testing different popups and buttons.

[pavanswaroopl]

Good work,

Permissions management initial page works on all viewports fine, but not sure whether this is in this PR scope, buttons go out of view when width < 375px. after entering a role.

Screen.Recording.2024-07-20.at.9.00.51.PM.mov

Screen.Recording.2024-07-20.at.9.02.13.PM.mov