The challenge in front of us

To develop the MVP of a payout system that included a CRM and Web Portal

What Tech stack we used?

Technologies	Types	Description
UI Libraries	React Material-UI + Styled Components (SC)	React Material-UI, used for UI layout and functionality, providing seamlessly customizable components Styled-Components (SC), used for styling, allowing us to save on bundle size
API Integration	SWR in combination with Axios	Implementing the stale-while-revalidate idea
Module Bundling	NextJS	Doing the job of webpack or react-scripts but extra fast
Testing	Jest + React Testing Library	Emphasizing on simplicity
Additional	prettier, eslint, formik, validatorjs, yup	Ensuring quality, security, and stability

---

Web Portal

The first stage visible on the web portal is the onboarding, where the users signs up and provides further setup information so that Enwage can access employee data.

After the import all imported employees are shown under “Imported Employees” in the dashboard. From here, all employees can be invited at once or individually. Once employees have been invited, the employer is ready to use Enwage.

We devised five tabs – Dashboard, Employees, Payouts, Team Members, and Settings.

• The Dashboard tab shpws the following statistics:

Total employees	Current number of employees (imported from the payroll system, should show only employees eligible for Enwage product)
Active Employees	Current number of active employees
Inactive Employees	Current number of inactive employees
Total withdrawals	Total number of withdrawals within time period
Total paid	Total funds withdrawn in time period
Withdrawals chart	Chart shows the withdrawal amount for each day within chosen timeframe

Search in portal (takes employees and payouts into account)
Searched attributes for employees: Employee ID, Employee name, Employee email
Searched attributes for payouts: Payment ID, Amount, Employee ID, Employee name, Employee email

• The Employees tab shows a list of all employees once they have been invited. The attributes displayed for each employee include the following: Employee ID, Name, Email, Job type, Joined on date, Balance, and Status. The list can be sorted according to a specific attribute, filtered by applying status filters, and searched through the attributes (ID, name, email). If a selection of employees has the same status, quick options are possible (Deactive, Reactivate, Reinvite).

• The Payouts tab lists all payouts, which can also be sorted, filtered, and searched. Each payout has the following attributes (name, email, requested on, balance/withdrawal amount, and status).

• The Team members tab has the features to see, edit and add users. The edit function gives the most room for taking actions, where one can remove a team member and/or change their access level (role).

• The Settings tab relates to company settings. The company’s information is fetched from the payroll system.

CRM

The CRM system is used to manage clients’/employers’ accounts.

We devised two tabs for this system – ‘Employers’ tab and ‘Team members’ tab.

• The Employers tab contains the information on all enrolled employers with attributes (ID, Name, Email, Joined on date, and Status). The list can be sorted by attribute, filtered by status, and searched with ID and Name. This view also presents the possibility to add new employers/clients by filling in their name, email, and payroll system, after which the added user can initiate the onboarding process.

• The Team members tab has the features to see, edit and add users. The edit function gives the most room for taking actions, where one can remove a team member and/or change their access level (role).