# 员工部分

## 1. 注册

a. 首先,人力资源代表生成注册令牌以及注册页面的链接,并将其发送到新招聘员工的电子邮件地址。这是新员工访问注册页面的唯一方式。(参见人力资源-招聘管理)

b. 用户必须提供密码、唯一用户名和唯一电子邮件地址(不必须是真实的)。

## 2. 登录

a. 员工可以使用其用户名/电子邮件和密码登录,然后被重定向到个人信息页面。

b. 如果他们未登录,将其重定向到登录页面。

## 3. 入职

a. 用户必须在使用注册令牌注册账户后设置用户名和密码。

b. 设置用户名和密码后,用户将被重定向到入职页面。

c. 入职申请表包含以下输入字段(粗体字段为必填,其余为可选)

i. 名字,姓氏,中间名,首选名称

ii. 头像(如果用户不上传,应该有默认图片)

iii. 当前地址

iv. 手机,工作电话

v. 电子邮件(预填写获取注册令牌时使用的电子邮件,不可编辑)

vi. 社会安全号码,出生日期,性别(下拉菜单:男,女,其他,我不愿说)

vii. "您是否为美国公民或永久居民?"

1. 如果是,选择"绿卡"或"公民"

2. 如果否,"您的工作授权是什么?"(下拉菜单:H1-B,L2,F1(CPT/OPT),H4,其他)

a. 如果选择其他,显示用于指定工作授权、开始日期和到期日期的输入框。

b. 否则,显示开始日期和结束日期的输入框。

c. 在这两种情况下,用户都必须上传自己的工作授权副本(如EAD卡或H1B文件...)。

viii. "您有驾驶执照吗?"

1. 如果是,驾驶执照号码,到期日期以及上传驾驶执照副本。

ix. 推荐人(谁推荐您来这里,推荐人只能是一个人,包含以下字段)

1. 名字,姓氏,中间名,电话,地址,电子邮件,关系。

x. 紧急联系人(至少一个)

1. 名字,姓氏,中间名,电话,电子邮件,关系。

d. 用户完成申请表后,应加载文档页面,其中包含所有文档(基本上是DigitalDocument表中的所有文档)。

i. 在用户提交申请之前,应验证所有标记为必需的文档。

ii. 为每个文档提供下载链接,以便用户可以下载文件。

iii. 如果用户点击链接,打开一个带有文档预览的弹出窗口(<object>—它将提供下载链接)

iv. 用户应该能够在完成并签署文档时上传文档。

e. 上传所有必需文档后,用户应该能够提交入职申请。

i. 提交后,用户应该看到一个页面,上面写着"请等待人力资源审核您的申请"

ii. 用户只有在人力资源批准其申请后才能进入其主页。

iii. 如果申请被拒绝,用户应该能够收到一封电子邮件,通知他们的申请被拒绝。用户应该能够登录系统检查哪个字段有误或任何缺失的文档。

## 4. 主页

a. 一旦用户的入职申请被批准,用户应该能够在登录后看到主页。

## 5. 导航栏:用户应该能够使用导航栏进入以下页面:

a. 个人信息

b. 签证状态管理(仅当用户不是公民或绿卡持有者时可用)

i. 当悬停时,应显示OPT STEM管理的链接。

c. 住房

d. 房屋详情

e. 报告设施问题

f. 在主页的正文中,显示欢迎信息

i. (例如"你好Zack,欢迎来到BeaconFire")

ii. 您可以自定义欢迎信息或在正文中添加其他功能(如快速链接)

## 6. 个人信息

a. 用户应该能够查看自己的个人信息,设计如下:

b. 用户应该能够看到以下部分:

i. 姓名部分

1. 姓名 — 法定姓名(全名)

2. 首选名称

3. 头像

4. 出生日期,年龄,性别

5. 社会安全号码(仅显示后四位数字)

ii. 地址部分

1. 主要地址

a. 地址行1,地址行2,城市,州,邮编

2. 次要地址

a. 地址行1,地址行2,城市,州,邮编

iii. 联系信息部分

1. 个人电子邮件,工作电子邮件

2. 手机,工作电话

iv. 就业部分

1. 工作授权

2. 工作授权开始日期

3. 工作授权结束日期

4. 就业开始日期

5. 就业结束日期

6. 职位

7. 紧急联系人(列表视图)

a. 全名

b. 电话

c. 地址

c. 上述每个部分都应有一个编辑按钮。点击后,用户应该能够编辑该部分中的内容。

i. 如果用户点击"编辑",按钮将被两个按钮替换—"保存"和"取消"

ii. 如果用户点击"取消",应出现弹出窗口或提醒:"您确定要放弃所有更改吗?"

d. 文档部分(列表视图)

i. 用户应该能够查看和下载他们已上传的所有文档

ii. 文档应显示为图标+名称

iii. 当用户点击它时,显示带有预览的弹出窗口(<object>)

iv. 所有文档应按创建日期降序排列。(最近的在顶部)

## 7. 签证状态管理

a. 用户应该能够在此页面管理其工作授权。(我们现在只处理OPT申请流程)

b. 国际学生必须使用OPT/OPT STEM在美国工作。在入职过程中,他们必须提供EAD卡。OPT状态变化如下所示:

i. (下载)I-983(需要为OPT STEM填写)

ii. (上传)I-20(向学校提交I-983后,学生将收到新的I-20)

iii. (上传)OPT STEM收据(已申请OPT STEM,但尚未收到OPT STEM EAD)

iv. (上传)OPT STEM EAD(已收到OPT EAD),并等待人力资源的回复

1. 对于所有上传操作,将向用户的电子邮件发送一封包含下一步信息的确认电子邮件

2. 除了下载I-983的按钮外,用户应该能够找到一个按钮来上传他们的新I-20

3. 如果用户已上传新的I-20,他们应该能够看到下一步为"请上传您的OPT STEM收据"。

a. 在消息之后,用户应该能够看到一个按钮来上传OPT STEM收据。

4. 如果用户已上传OPT STEM收据,他们应该能够看到下一步为"请上传您的OPT STEM EAD"。

a. 在消息之后,用户应该能够看到一个按钮来上传OPT STEM EAD。

c. 用户已上传的文档列表。

i. 用户应该能够查看和下载他们已上传的所有文档

ii. 文档应显示为图标+名称

iii. 当用户点击它时,显示带有预览的弹出窗口(<object>)

iv. 所有文档应按创建日期降序排列。(最近的在顶部)

## 8. 住房

a. 当生成注册令牌时,员工将被分配到一个房屋。员工只能查看关于房屋的详细信息,但不能更改分配给他们的房屋。

b. 房屋详情页面

i. 员工应该能够查看以下房屋详情

1. 地址

2. 住在房屋中的员工列表,包含以下详细信息

a. 名称(首选名称,如果为空,则为名字)

b. 电话

c. 设施报告页面

i. 员工应该能够报告房屋中的设施问题,并查看所有员工或人力资源的评论

1. 设施报告,包含以下详细信息

a. 标题

b. 描述

2. 现有报告列表,包含以下详细信息

a. 标题

b. 描述

c. 创建者(谁报告了此问题)

d. 报告日期

e. 状态(有3种状态:未处理,处理中,已关闭)

i. 当创建报告时,

f. 评论列表,包含以下详细信息

i. 描述

ii. 创建者

iii. 评论日期(如果最后修改日期为空,显示创建日期;否则,显示最后修改日期)

g. 对于每个报告,员工可以添加评论或更新由该员工创建的评论。

# 人力资源部分

## 1. 登录

a. 员工和人力资源应该使用完全相同的登录门户。系统应该能够检查登录用户是人力资源还是员工。

b. 请硬编码至少一个角色为HR的账户

c. 注意:HR也是员工。区别在于HR多了一个叫做HR的角色

## 2. 主页

a. HR登录后,他们应该被重定向到包含以下详细信息的主页:

i. 导航栏(应该在HR的所有页面上显示)

1. 员工资料

2. 签证状态管理

3. 招聘

4. 房屋管理

ii. 申请跟踪表(应该在主页上)

1. 该表作为提醒:如果需要采取任何行动来更新员工签证状态或入职流程,表中应该有一个项目

a. 例如,如果员工申请了STEM OPT并已经上传了他们的新EAD卡,那么就会有一个提醒批准/拒绝此申请

2. 申请跟踪表应该包含以下详细信息

a. 姓名(法定全名)

b. 申请类型

c. 状态

d. 最后修改日期

3. 员工资料

a. HR应该能够查看所有员工资料。

b. HR的资料页面与员工资料页面相同,但有以下附加功能

c. 摘要和搜索栏

i. HR应该能够查看员工摘要,包含以下详细信息

1. 姓名(法定全名)

2. 社会安全号码

3. 开始日期

4. 签证状态

ii. 员工总数

1. 例如,如果公司有100页,当前资料是第10页,那么应该显示为"<10/100>"

2. 您应该使用`user_id`来决定员工的顺序

iii. HR应该能够在搜索栏中使用以下条件搜索员工

1. 姓名(名字或姓氏或首选名称)

2. 注意:由您决定如何显示搜索结果,但确保您的设计涵盖所有可能的情况:找到一条记录,找到多条记录,未找到记录。

4. 签证状态管理

a. 此页面的工作方式几乎与主页上的申请跟踪表相同,但它提供了更多关于用户信息的详细信息,并允许HR用户采取行动。此页面将显示所有签证状态,即使不需要采取任何行动。

b. 当HR进入此页面时,他们应该能够看到如下信息列表。

i. 姓名(法定全名)

ii. 工作授权

iii. 到期日期(所述授权的)

iv. 剩余天数(所述授权的)

v. 活跃的STEAM OPT申请和操作(批准,拒绝或无)

1. 对于正在进行STEM OPT申请且尚未达到最终阶段的员工,HR可以拒绝所述申请。可以为此拒绝提供评论。

2. 对于已上传新EAD卡的STEM OPT申请,HR可以批准或拒绝此申请(即,由于上传了错误的文件而拒绝)。如果拒绝,可以提供评论。

vi. 收到的文档:

1. 提供访问员工提交的所有过去文档的权限。

5. 招聘

a. HR应该能够创建注册令牌并审核入职申请或其他申请,如OPT STEM申请

b. 注册令牌生成

i. 通过输入新员工的电子邮件,HR应该有一个"生成令牌并发送电子邮件"按钮,将令牌发送到提供的电子邮件地址。

1. 默认有效期应通过属性文件设置,值应为3小时。

c. 申请审核

i. HR应该能够审核员工的入职申请

1. 表单申请

a. HR应该能够查看入职申请的相同表单,遵循以下规则:

i. 所有字段都不可编辑

ii. 所有字段都填充了用户输入的数据

iii. HR应该能够为整个申请添加评论

2. 支持文档

a. HR应该能够查看每个上传的文档,并在不下载文档的情况下为每个文档添加评论。

b. 注意:由您决定应该如何显示。

ii. 每位员工只能有一个正在进行的(非完成)申请

iii. 申请状态:未处理,拒绝,完成,以及基于您设计的任何必要状态

iv. HR应该能够批准或拒绝申请

1. 一旦批准,申请状态应更改为完成,用户将被允许开始另一个申请。(例如,STEM OPT申请)

2. 如果拒绝,应该有关于错误的评论。然后员工必须修复这些错误或上传其他文档。

3. 无论批准还是拒绝,员工都应该能够收到关于申请决定的电子邮件。

v. 当HR进入此页面时,他们应该能够查看所有正在进行的入职申请。点击每个申请时,应该显示列出的申请详细信息。

1. 注意:由您决定应该如何显示。

6. 房屋管理

a. HR应该能够查看、添加和删除属于公司的房产。

b. 查看

i. HR应该能够查看目前由公司管理的所有房屋,包含以下详细信息

1. 地址

2. 房屋中的员工数量

3. 房东信息:

a. 法定全名

b. 电话

c. 电子邮件

c. HR应该能够点击每个房屋记录以查看以下详细信息:

i. 基本房屋信息(与上一节相同)

1. 地址

2. 房东,电话,电子邮件

3. 人数

ii. 设施信息

1. 床数量

2. 床垫数量

3. 桌子数量

4. 椅子数量

iii. 设施报告(列表视图)

1. 以(标题+日期+状态)格式在表格或类似结构中显示所有设施报告

2. 每页应该只显示3-5个报告

3. 所有报告按创建日期排序

4. 点击后,显示带有以下所有详细信息的弹出窗口

a. 标题

b. 描述

c. 创建者(谁报告了此问题)

d. 报告日期

e. 状态(有3种状态:未处理,处理中,已关闭)

i. 创建此报告的时间

f. 如果适用,评论列表,包含以下详细信息

i. 描述

ii. 创建者

iii. 评论日期(如果最后修改日期为空,显示创建日期;否则,显示最后修改日期)

iv. 对于每个报告,HR可以添加评论或更新由HR创建的评论。

d. 员工信息(列表)

i. 姓名(首选名称,如果为空,则为名字)

ii. 电话

iii. 电子邮件

iv. 如果点击每一行,重定向到员工资料页面并加载所点击的员工信息。

Employee Section

1. Registration

a. Firstly, an HR representative generates a registration token along with a link to the registration page and sends it to the newly recruited employee's email address. This is the only way for new employees to access the registration page. (See HR - Hiring Management)

b. Users must provide a password, unique username, and unique email address (it doesn't necessarily need to be real).

2. Login

a. Employee can log in with their username/email and password and then be redirected to the Personal Information page.

b. If they are not logged in, redirect them to the Login page.

3. Onboarding

a. A user must set up the username and password after the user registers their account by using the registration token.

b. After setting up the username and password, the user will be redirected to the onboarding page.

c. The onboarding application form contains the following input fields (bold fields are required, the rest are optional)

i. First Name, Last Name, Middle Name, Preferred Name

ii. Avatar (should have a default pic for the user in case they don't upload one)

iii. Current Address

iv. Cell Phone, Work Phone

v. Email (Pre-filled with the email used by getting the registration token, Not Editable)

vi. SSN, Date of Birth, Gender(Drop down: Male, Female, Other, I Prefer Not to Say)

vii. "Are you a citizen or permanent resident of the U.S.?"

1. If yes, choose either "Green Card" or "Citizen"

2. If no, "What is your work authorization?"(Dropdown: H1-B, L2, F1(CPT/OPT), H4, Other)

a. If others, show an input box for specifying the work authorization, start date, and expiration date.

b. otherwise, show input boxes for the start date and end date.

c. In both situations, the user has to upload a copy of their own work authorization (such as an EAD card or H1B document…).

viii. "Do you have a driver's license?"

1. If yes, driver's license number, expiration date and upload a copy of driver's license.

ix. Reference(Who recommends you to come here, the reference can only be one person withnfollowing fields)

1. First name, Last name, Middle name, Phone, Address, Email, Relationship.

x. Emergency Contact(at least one)

1. First name, Last name, Middle name, Phone, Email, Relationship.

d. After user completes the application form, the documentation page should be loaded with all documents(Basically all documents in the DigitalDocument Table).

i. All documents marked as required should be validated before the user can submit the application.

ii. For each document, provide a download link so users can download the file.

iii. If user clicks on the link, open a pop-up with a preview of the document(<object> — it will provide a download link)

iv. User should be able to upload the document when they complete and sign on the document.

e. After all required documents have been uploaded, user should be able to submit the onboarding application.

i. Once submitted, user should be presented a page with "Please wait for HR to review your application"

ii. User can go to their home page if and only if the HR approved their application.

iii. If the application is rejected, user should be able to receive an email notifying them that their application is rejected. The user should be able to log into the system to check which field is wrong or any missing document.

4. Home Page

a. Once user's onboarding application has been approved, the user should be able to see the home page after they login.

5. Navigation Bar: User should be able to use the Navigation bar to go to following pages:

a. Personal Information

b. Visa Status Management (Only Available if the user is NOT a citizen or green card holder)

i. When hovering over, a link to OPT STEM Management should be displayed.

c. Housing

d. House Detail

e. Report facility issue

f. In the body of the home page, display a welcome message

i. (e.g. "Hello Zack, Welcome to BeaconFire")

ii. You can customize your welcome message or add additional features(such as Quick Links) in the body

6. Personal Information

a. User should be able to view their own personal information with the following design:

b. User should be able to see the following sections:

i. Name Section

1. Name — Legal Name(Full Name)

2. Preferred Name

3. Avatar

4. Date of Birth, Age, Gender

5. SSN(Only Show Last Four Digits)

ii. Address Section

1. Primary Address

a. Address Line 1, Address Line 2, City, State, Zip

2. Secondary Address

a. Address Line 1, Address Line 2, City, State, Zip

iii. Contact Info Section

1. Personal Email, Work Email

2. Cell Phone, Work phone

iv. Employment Section

1. Work Authorization

2. Work Authorization Start Date

3. Work Authorization End Date

4. Employment Start Date

5. Employment End Date

6. Title

7. Emergency Contact(List View)

a. Full Name

b. Phone

c. Address

c. Each Section mentioned above should have an Edit button. Once clicked, user should be able to edit the content in the section.

i. If user clicks the "Edit" , the button will be replaced by two buttons —"Save" and "Cancel"

ii. If the user clicks "Cancel, " a pop-up or alert should appear: "Are you sure to discard all your changes?"

d. Document Section(List View)

i. User should be able to view and download all documents they have uploaded

ii. The document should be displayed as an icon + name

iii. When user clicks on it, show a pop-up with preview(<object>)

iv. All documents should be ordered by createdDate descending.(With the most recent on the top)

7. Visa Status Management

a. User should be able to manage their work authorization on this page. (We just take care of the OPT application process now)

b. International students have to use OPT/OPT STEM to work in the U.S. During the onboarding process, they must provide the EAD card. The OPT status changes are listed below:

i. (DOWNLOAD) I-983 (Need to be filled for OPT STEM)

ii. (UPLOAD) I-20 (After submitting the I-983 to the school, the student will receive a new I-20)

iii. (UPLOAD) OPT STEM Receipt (Applied for OPT STEM, but don't receive the OPT STEM EAD)

iv. (UPLOAD) OPT STEM EAD (Received the OPT EAD), and wait for HR's response

1. For all the UPLOAD actions, a confirmation email with information on the next step will be sent to the user's email

2. Along with the button for downloading I-983, user should be able to find a button to upload their new I-20

3. If the user has uploaded the new I-20, they should be able to see the next step as "Please upload your OPT STEM Receipt".

a. After the message, the user should be able to see a button to upload the OPT STEM Receipt.

4. If the user has uploaded the OPT STEM Receipt, they should be able to see the next step as "Please upload your OPT STEM EAD".

a. After the message, the user should be able to see a button to upload the OPT STEM EAD.

c. A List of Documents the user has uploaded.

i. User should be able to view and download all documents they have uploaded

ii. The document should be displayed as icon + name

iii. When user clicks on it, show a pop-up with preview(<object>)

iv. All documents should be ordered by createdDate descending. (With the most recent on the top)

8. Housing

a. The employee will be assigned to a house when their registration token has been generated. Employees can only view the details about the house, but can not change the house assigned to them.

b. House Detail Page

i. Employees should be able to view the following house detail

1. Address

2. List of employees who live in the house with the following details

a. Name (Preferred Name, if it is empty, then the First Name)

b. Phone

c. Facility Reporting Page

i. Employees should be able to report a facility issue in the house, and see all comments by employees or HR

1. A Facility Report with the following details

a. Title

b. Description

2. A list of existing reports with the following details

a. Title

b. Description

c. Created By(Who reported this issue)

d. Report Date

e. Status(There are 3 status: Open, In Progress, Closed)

i. When a report is created,

f. A list of comments with the following details

i. Description

ii. Created By

iii. Comment Date(If the last modification date is empty, display the created date; otherwise, display the last modification date)

g. For each report, employees can add comments or update comments which are created by the employee.

HR Section

1. Login

a. Both employee and HR should have exactly the same login portal. The system should be able to check whether the login user is an HR or an employee.

b. Please hard code at least one account with Role as HR

c. Note: An HR is also an employee. The difference is that HR has one more role called HR

2. Home Page

a. After HR login, they should be redirected to the home page with the following details:

i. Navigation Bar(It should be displayed on all pages for HR)

1. Employee Profile

2. Visa Status Management

3. Hire

4. House Management

ii. Application Tracking Table(It should be in the HomePage)

1. The table works as a reminder: if any action needs to be taken to update employee Visa status or On-boarding process, there should be one item in the table

a. e.g., If the employee applied for STEM OPT and has already uploaded their new EAD card, then a reminder to approve/reject this application

2. The application tracking table should have the following details

a. Name (Legal full name)

b. Type of Application

c. Status

d. Last Modification Date

3. Employee Profile

a. HR should be able to view all employee profiles.

b. The profile page for HR is the same as the Employee profile page with the following additional features

c. Summary and Search bar

i. The HR should be able to view the summary of an employee with the following details

1. Name(Legal Full Name)

2. SSN

3. Starting Date

4. Visa Status

ii. The total number of employees

1. e.g., If there are 100 pages in the company and the current profile is the 10th page, then it should be displayed as "<10/100>"

2. You should use the `user_id` to decide the order of employees

iii. The HR should be able to search for the employee in the search bar with the following criteria

1. Name(First Name or Last Name or Preferred Name)

2. Note: It is up to you to decide how to display the search results, but make sure your design covers all possible cases: One Record found, Multiple Records found, No record found.

4. Visa Status Management

a. This page works almost the same as the Application Tracking Table on the Home Page, but it provides more details about user information AND allows actions to be taken by the HR user. This page will display all visa statuses even if no action is needed.

b. When HR goes to this page, they should be able to see a list of information as follows.

i. Name (Full Legal Name)

ii. Work Authorization

iii. Expiration Date (of said authorization)

iv. Days Left (of said authorization)

v. Active STEAM OPT Application and Actions (Approve, Reject, or NONE)

1. For an employee in the process of a STEM OPT application and you have yet to reach its final stage, HR can reject said application. A comment can be provided for this rejection.

2. For a STEM OPT Application that has its new EAD card uploaded, HR can either approve or reject this application (i.e., reject due to uploading a wrong file). A comment can be provided if rejected.

vi. Document Received:

1. Provide access to all past documents submitted by the employee.

5. Hire

a. The HR should be able to create the registration token and review the onboarding application or other applications, such as the OPT STEM application

b. Registration Token Generation

i. By entering the new hire's email, HR should have a button "Generate Token and Send Email" to send the token to the email address provided.

1. The default valid duration should be set through the property file, and the value should be 3 hours.

c. Application Review

i. HR should be able to review employees' onboarding applications

1. Form Application

a. HR should be able to view the same form for the onboarding application with the following rules:

i. All fields are not editable

ii. All fields are populated with user-entered data

iii. HR should be able to add comments for the entire application

2. Supporting Documentation

a. HR should be able to view each uploaded document and add comments for each document without downloading the document.

b. Note: it is up to you to design how it should look like.

ii. Each Employee can only have one ongoing (non-Completed) application

iii. Application Status: Open, Rejected, Completed, and any NECESSARY STATUS based on your design

iv. HR should be able to approve or reject the application

1. Once approved, the application status should be changed to Completed, and the user will be allowed to open another application. (STEM OPT Application, for example)

2. If rejected, there should be comments about what is wrong. Then the employee has to fix those errors or upload other documents.

3. Either approved or rejected, the employee should be able to receive an email about any decision made on the application.

v. When HR go to this page, they should be able to view all ongoing onboard applications. When clicking on each application, it should show the application details listed.

1. Note: it is up to you to design how it should look.

6. House Management

a. HR should be able to view, add, and delete the house property belonging to the company.

b. View

i. HR should be able to view all houses that are currently under management by the company with the following details

1. Address

2. Number of Employees in the house

3. Landlord Information:

a. Legal Full Name

b. Phone

c. Email

c. HR should be able to click on each house record to view the details as follows:

i. Basic House Information (same as the previous section)

1. Address

2. Landlord, Phone, Email

3. Number of People

ii. Facility Information

1. Number of Beds

2. Number of Mattress

3. Number of Tables

4. Number of Chairs

iii. Facility Report(List View)

1. Display all facility reports with (Title + Date + Status) format in a table or similar structure

2. Each page should only display 3 - 5 reports

3. All reports are sorted by the created date

4. Once clicked, display a pop-up with all the following details

a. Title

b. Description

c. Created By(Who reported this issue)

d. Report Date

e. Status(There are 3 status: Open, In Progress, Closed)

i. The time when this report is created

f. If applicable, a list of comments with the following details

i. Description

ii. Created By

iii. Comment Date(If the last modification date is empty, display the created date; otherwise, display the last modification date)

iv. For each report, HR can add comments or update comments which are created by HR.

d. Employee Information(List)

i. Name (Preferred Name, if null, then First Name)

ii. Phone

iii. Email

iv. If clicked on each row, redirect to the Employee profile page and load the clicked employee information.