[FEATURE] Develop Roles and Permissions Page with Toggle Switches for Managing Permissions- Admin Dashboard

[SilverBeing]

Develop a roles and permissions page that displays a list of all created roles. When an admin clicks on a role, it should open a detailed view of the permissions associated with that role. The permissions should be managed through toggle switches, where an active switch indicates the role has that permission enabled. Integrate with backend API endpoints to fetch roles and update permissions.

Purpose Admins should be able to view all created roles and manage the permissions for each role through a collection of toggle switches. This functionality will provide a clear and organized way to manage roles and their respective permissions.

Requirements

• Roles List: Display a list of all created role
• Role Permissions View: Display a detailed view of permissions for each role, managed by toggle switches.
• Toggle Switches: Implement toggle switches to manage permissions. An active switch indicates the permission is enabled.
• API Integration: Integrate with backend API endpoints to fetch roles and update permissions.
• Responsive Design: Ensure the page and its components are responsive and adapt well to different screen sizes.
• Design Match: Ensure the page matches the provided design specifications.

Tasks

• [ ] Develop a component to display a list of all created roles. Ensure the roles list matches the design specifications.
• [ ] Implement toggle functionality to enable or disable permissions.
• [ ] Ensure the toggle state reflects the current permission status.
• [ ] Integrate with the backend API endpoints to fetch roles and their permissions.
• [ ] Implement logic to update permissions through the API when toggles are switched.
• [ ] Ensure the roles list and permissions view are responsive
• [ ] Write unit tests to verify roles list display, toggle switch functionality, and API integration.

Note

• Ensure code quality through proper code structure and comments.
• Provide clear documentation on component usage and integration.
• Ensure smooth integration with existing components on the admin dashboard.

Images and Figma links https://www.figma.com/design/VEItfX6St5NSAqqNHImcxD/HNG-Boilerplate-Designs?node-id=118-44194&m=dev

[CollinXon]

I can't find the design of the figma link anymore. Please what happened