Login and View/Edit Permissions with Protected Routes.

1. Login screen.
2. User list with search facility.
3. Permission and Protected Route.
4. View/Edit Permission
5. Login Admin. This user can see everything after login.

   username: admin, password: Admin@123

6. Login Normal User. This user can not see the about page and Details/Edit button (user list action items)

   username: user, password: User@123

7. Login supervisor. This user can not see the Detail button (user list action item)

   username: supervisor, password: Supervisor@123

8. Install the package to manage the form state/events/values.

   npm install react-hook-form

9. Install the package for model/schema and data valodations.

   npm i yup

10. Install the resolver. It act's as mapper between react-hook-form and yup.

    npm i @hookform/resolvers

11. Some of the example of react-hook-form + yup + resolvers

    https://react-hook-form.com/api/useform/

12. Styled Components (CSS using Libraries)

    Install the package: npm install --save styled-components, For Typescript: npm i --save-dev @types/styled-components

13. Install the bootsrtap for better user interface.

    npm install bootstrap --save npm install --save @types/bootstrap

14. Install the package for routing.

    npm i react-router-dom

15. Install the package for API call.

    npm i axios

Please refer the attached information.txt and APP-DEMO file for more information.