Lendsqr

This is a test project created for Lenders.

Overview

SCSS
React
TypeScript
Redux Toolkit
Local Storage
Axios
React libraries/packages: react-hook-form,react-paginate, react-router-dom, react-toastify, react-redux, react-thunk

To use this website, follow these steps:

Your login details will be stored in the localStorage and will be removed once you log out.
You won't be able to access the dashboard if you have not logged in.

Once logged in, user details will be fetched from the mockapi.

By default, only 10 details will be fetched. Feel free to change the limit at the bottom using the select option.
You can choose to change the page data by clicking the pagination at the bottom of the page.
Filter is available to filter the user details fetched by clicking on the three horizontal lines filter icon next to each of the table header. This will display a form through which you can enter your preferred filter. None of the fields are required, so filter with one or more fields.
Users can also choose to search user details by submitting a value to the search form in the header (for mobile view, it is available in the toggle menu, to open the menu, click on the hamburger icon in the header).

To update a user's status, click on the 3 vertical dots at the right-hand side of the table. The table is scrollable both horizontally and vertically for responsiveness.
Once this vertical icon is clicked, a component opens which allows the activation and blacklisting of a user. Clicking either of these will bring a notification of the action.
User's status is stored in the local storage and changes based on the button
To view more details of a user, click on View Details link. This will make the site navigate to the user details page

Every other detail of a user will be displayed here
There are two buttons at the top of the page. Both can also be used to update the user status
The Back to Users button will renavigate the site back to the dashboard