Styled Modal - Copy this React, Mui Component to your project
create a user management page. In which the user list is managed in the form of a card, similar to a business card. Below the user card, 3 contents are displayed, including permission settings, passwords, and editing account information, represented by icons. In the permission settings section: - Allows selecting permissions from the list, for each permission there is a table briefly describing the information that the permission allows. In the password section: - Allows users to change their password. The password used must satisfy the condition of being at least 8 characters long, containing letters, numbers, and special characters. - There is an instruction table on the right to remind users of the password setting rules. In the account information editing section, opened when clicking on the edit icon: - There are contents including name, date of birth, email. In which name and email are required. - Email must be filled in the correct format - The name field automatically capitalizes the first letter - On the right is the section to select an image to use as a profile picture. The default will be the first letter in the name. In the account deletion section: - Confirm with the password of the account currently logged in. Display a message that the deleted account will not be able to access the system.
