Implement User Role Functionalities

[Dawaic6]

Description:

Implement the user role functionalities as shown on figure below. This feature will include adding, editing, and deleting user roles, as well as displaying a list of existing roles.

provided design

Tasks

1. Create the User Role Side Bar Item

• Add a new item named "User Role" in the sidebar.
• Ensure it has sub-items: "All Role" and "Add New".

2. Design the User Roles Page

• User Role List

  • Display a table with the following columns: ID, Role Name, and Action.
  • Actions should include Edit and Delete icons.

• Register Role Form

  • Include input fields for Role Name and Role ID.
  • Add a button to submit the new role.

3. Implement the User Role Functionalities

• Add New Role

  • Implement form submission to create a new role.
  • Validate the input fields.

• Edit Role

  • Implement the edit functionality for existing roles.
  • Pre-fill the form with the role's current data.

• Delete Role

  • Implement the delete functionality to remove a role.
  • Add a confirmation dialog before deletion.
    4. Backend Integration

• Connect the frontend with the backend API to fetch, add, edit, and delete roles.

  5. Testing

• Write unit and integration tests to ensure all functionalities work as expected.

  Definition of Done

• A fully functional User Roles : add, edit, and delete functionalities.

• A responsive UI matching the provided design.

• Integration with the backend API for role management.

• Comprehensive unit and integration tests ensuring all functionalities work as expected.

[Dawaic6]

Implementation user functionality

Design the UI

• Use the provided design as a reference to implement the UI.

• Ensure the design is responsive and matches the rest of the application.

  Implement Add, Edit, and Delete Functionalities

• Add the necessary form and table components.

• Implement state management to handle role data.

• Integrate with the backend API for data persistence.

Testing

• Write tests for each functionality.
• Ensure the coverage is comprehensive and includes edge cases.

Schedule of Implementation:

Day 1: 12/07/2024

-Design the UI -Implement Add, Edit, and Delete Functionalities

Day 1: 13/07/2024

-Testing -Fix coming issue