Implement the following in Reactjs & MUI:

• Progress steps
• Popup messages
• Announcements
• Sidebar
• File upload dialog

Implement with MUI & Reactjs:

• Button groups
• Buttons
• Checkboxes
• Check icons
• Avatar
• Switch toggle

Implement email templates for the following actions. This requires writing an HTML template with proper wording/sentences.

Signup/sign in related

• When an HRM manager starts the employee activation process
  An email to the employee
• When a new employee/HR manager signs up (welcome email)
  An email to the HRM manager
  An email to the employee
• When employee forgets email
• Activation email

HRM application related

• When an employee changes job description
  An email to the employee
  An email to the HRM manager
  An email to the employee's manager (if exists)
• When an employee leaves the company
  An email to the HRM manager
  An email to the employee's manager (if exists)
• When an employee asks for a leave
  An email to the HRM manager
  An email to the employee's manager (if exists)
• When a time off request is created
  An email to the HRM manager
  An email to the employee
  An email to the employee's manager (if exists)
• When a leave is accepted/denied
  An email to the HRM manager
  An email to the employee
  An email to the employee's manager (if exists)

Create a timeoff API to show how the timeoff works in the application. The API should have the following.

• How the different entities communicate

• How are requests sent

• The reasons for timeoff

• Number of days time off is allowed in a year

Note: You may get those from onboarding app

@malenacaroline @fazlul-01 @ergunesra @sejunpark2002 Please go over the Permissions list to check your code, and make necessary parts of the interface completely invisible/immutable to the manager and/or the employee. If the data is tagged as invisible, it should never be retrieved from the server.

When you are done, click on the task below so @zaidi201 and @olusegunawowole would know this part is finished. This task should be completed before the MVP release.

• Malena is done on her part.
• Fazlul is done on his part.
• Esra is done on her part.
• Sejun is done on his part.

Explanation of the features for the backend tasks:

Terminating an employee

It means ending their employment with a company. There can be various reasons (eg poor performance, company downsizing, or misconduct). When the HR admin wants to terminate an employee, the following steps should be taken:

1. HR Admin goes to the employee's page.

2. Selects "End employment" From the drop down button which is only shown to the HR admin:

3. Fills in the following popup menu, and the employee should be terminated on the backend, not allowing to be able to login anymore.

4. The backend also keeps a list of the terminated employees, together with reason, date and notes.
5. If employee is not terminated immediately, then the system should terminate based on the date selected.

--

Offboarding

It is the process of managing the departure of an employee. Currently it only sends a survey to the employee, expecting the employee to finish it.

Steps taken:

1. HR admin initiates the offboarding process by clicking on the "Send survey" option under the employee's page.

2. The employee gets an email that includes the link to the survey (everyone sees the same survey).

3. Upon finishing, HR admin and manager gets a copy of the email which is crafted using MJML. It includes an opening paragraph and all QAs filled in by the employee.

4. The database stores this information (e.g is_sent_exit_survey). We can use it later, but not now.

After the survey is completed, the employee is not automatically terminated.

For your information as well: @ergunesra @fazlul-01

Schema design:

• Define the schema for the user table, including fields such as username, email, password (hashed), etc.

Registration endpoint:

• Create an endpoint to handle user registration
• Validate incoming user data (e.g., username uniqueness, password strength)
• Hash and store passwords securely in the database

Login endpoint:

• Implement an endpoint for user login
• Verify user credentials against the stored data.
• Generate and return a JWT (JSON Web Token) upon successful authentication.

Logout Endpoint:

• Implement an endpoint for user logout.
• Invalidate or expire the JWT token.

Session management:

• Handle user sessions securely (e.g., token expiration, token refreshing)

Implement the following with Reactjs & MUI:

• Table with search and pagination
• Date picker
• Tabs

The time off requirements are as follows:

1. Any employee can create a time off request, but the approval for the time off request is done by the manager.
2. Time off request can be done for either half day or full day. For a half day time off its 4 hours and for a full day time off it is 8 hours
3. Once a time of request is made, The request is notified to the manager in email and should take the manager to the time off request approval popup. The manager accepts/rejects the time off as needed.
4. Afterwards, a confirmation email is sent back to the employee and the manager about the time off decision from the manager
5. If the employee decides to edit or delete any upcoming time off, then on clicking the delete/edit button, the changes to the time off will again be notified to the manager through an email and afterwards depending on the managers decision the request to the changed time off will be made. But if the employee does not have enough time off time left then she/he cannot edit and increase his time off. At the same time If the employee decides to delete any upcoming time off, then upon the decision of the manager the time off period will be reimbursed.

Implement:

• Drop down with search
• Selectable drop downs

Two candidates:

• One option is Tabler icons and they have the corresponding Figma plugin as well: https://tabler.io/icons
• Another option is Phosphor icons: https://phosphoricons.com/

Both are equally good.

The same email should be sent to HR admin and the manager. Both should include the survey q/a. Please get in touch with @gorkem-bwl once you are done with the simplest version and we'll work on the template, using MJML (mjml.io).

Please check below pages on Figma and implement them as they are designed.

Page: Settings > Offboarding > Survey Questions
Updates: A vertical tab has been added in the page content.

Page: Settings > Offboarding > Documents
Updates: The whole page is newly added.

Thanks!

cc: @zaidi201 @gorkemcetin

Implement the following with Reactjs & MUI:

• Drop down with search
• Selectable drop downs
• Define colors
• Define text used in the app
• Implement menu and menu icons
• Implement popover menu

When I go to People section the width of the table is fixed. It must be stretched all the way to the right.

If the user goes to a link that is either unauthorized or not found, the following page should appear.

Link to the Figma design

The outgoing email contents are written in this issue: #23

This document includes MJML templates for outgoing emails.

There may be more email templates we would prepare, but for now, those are the ones that are required for the MVP to function properly.

@zaidi201 assigning this to you temporarily.

An employee can be terminated. The termination process is initiated by the HRM admin. When the HRM admin goes to the employee's page, there is a dropdown button that has two actions:

• Send offboarding survey
• End employment

When "send offboarding survey" is selected, the employee receives an email that includes the link to the survey and offboarding documents. In 3 steps employee is asked to sign and upload termination documents, and answer offboarding questions (e.g exit survey). This is already being implemented by Fazlul.

Here is the dropdown menu attached to an employee page:

When "End employment" is selected, then the following popup appears. The HR admin must confirm 2nd time that the employment is terminated. An email of termination is sent to HR admin.

Note that an employment can be ended either immediately or at a later (or previous) date.

CC @bolatein @olusegunawowole @zaidi201

Create a timeoff API sequence diagram to show how the timeoff works in the application. The sequence diagram should have the following.

• How the different entities communicate

• How are requests sent

• The reasons for timeoff/ accrual policy

• Maximum amount of time off that can be accrued.

• Number of days time off is allowed in a year

• What are the rules for carrying over unused time off to the next period? (carryover policy)

• Track accrued, used and remaining time offs

There are a few UI fixes that need to be done:

1. The left sidebar should have 100% height. Currently, it cuts off and doesn't reach the bottom.
2. We can get rid of the top sidebar completely.

The page shouldn't be stretched to the bottom more than we need, as in this case it hinders the visibility of the sidebar's Support menu item.

In this example the Support link on the sidebar should be visible:

Please check Settings > Departments action popup windows for any updates:

Please check Settings > Job titles action popup windows for any updates:

Please check Settings > Employee fields action popup windows for any updates:

Thanks!

CC @zaidi201 @bolatein

Check if:

• MUI has a built in option, and if not,
• Olu & Sejun will be working on storing this info on the database.

As per what the issue says.

The profile page of the HRM application has the following tabs:

• Profile: The user can set first name, last name and photo. Email address is immutable. Here the user can also remove the username from the database.

• Password: The user can give the current password and then set a new password. The new password must contain at least 8 characters and must have at least one uppercase letter, one number and one symbol.

• Team: This is only visible to the admin - the first logged-in user. The admin can invite a new user or an admin, change the role or remove other users/admins. The organization name can also be changed here. Initially, the organization name can be a random string, like "Stark Industries", and then can be modified by the admin.

The link to Figma is here.

You can also copy and implement some of the code from the Uptime Manager team, as they have almost completely implemented Profile pages.

Tasks:

• Implement profile tab

  • General layout
  • 3 Text field for names
  • Note that 1 there is one immutable text field for password
  • Update link by clicking on the picture functionality
  • "Delete" button
  • "Update" button
  • "Save" button
  • "Delete account" button

• Implement password tab

  • General layout
  • 3 Text field for password and confirmation
  • Text information what is required at the alert box text location (that is currently showing on Figma)
  • Alert text box when requirements are not met
  • "Save" button

• Team section

  • General layout
  • Organization name edit button (pen icon)
  • "Invite team member" button
  • List of members
  • Role selection: a dropdown menu for setting the member's role
  • Bulk action > Delete action for selected members

When a time off request is generated, it is available on the Time off requests table for each employee. The employee can edit or remove a time off request.

When a time off request is edited, the manager is informed and it requires another approval from the manager. The manager is informed via email. An information email is also sent to the employee.

When a time off request is removed, the manager is informed and it requires approval. If the approval is taken, hours/days in the time off request is granted back to the employee. The employee is informed about the manager's decision.

The time off request edit screen:

The time off request delete screen:

CC @olusegunawowole @shidrath

• Text fields
• Charts
• Popup modal
• Tooltips
• Logos
• Editor design

Also FYI, @olusegunawowole

There are two product logos:

1. The big one is used on the main login screen
2. The small one is used on the dashboard.

Attaching both of them here.

• Implementing workflows for approval processes related to leave requests
• Writing backend logic to handle time off requests

• Implementing logging mechanisms to track HRM system activities and errors for troubleshooting purposes

This implementation needs an API backend as it will be visible from the user interface, for example:

• When a user's department type changes
• When the status of a user changes from onboarding to active
• When a user's salary has changed
• When there is a time off policy requested
• When a time off policy is accepted

The offboarding process UI design should be completed. This issue is only about Reactjs UI components and doesn't include the BE. When complete, @fazlul-01 will talk with @olusegunawowole about implementing the BE side.

All the designs are on Figma. There are a few points @bolatein needs to reconsider as well.

BlueWave HRM is an open-source product. When installed, the HRM admin should be the first person to see the onboarding screen. This onboarding screen should be called once and never be seen again, as all the required company information (name, web page, and logo) is already in the database to be used later.

Now, when the server is installed, the user must go to the URL (http://URL or https://URL depending on whether the admin installed Let's Encrypt (via https://certbot.eff.org/) or not. There, the HR admin needs to see a form with the following inputs:

• Name
• Surname
• Email
• Password
• Password (again)

Upon entering this information, the onboarding screen should show up. As soon as the onboarding begins, the form above should not be reachable, as the HRM admin has already logged in. Instead, our usual login pages should appear.

I am writing this here as it will probably require some backend logic (?) as well as the first login page for the HRM admin as well.

Here's the Figma file for the initial account setup page for the HRM admin:

• Designing the database schema to store user data, employee information and organization structure
• Implementing data models for entities like users, employees, departments, positions, salary details, etc.
• Building RESTful APIs to interact with the frontend and perform CRUD operations on various entities.
• Defining endpoints for functionalities such as user management, employee management, department management and leave management