PROJECT2-SEC-1-XiaoYiLobsterSlayerTeam

⭐⭐⭐⭐

Employees Management 🎮

banner_pic

MEMBER 👨‍👨‍👦‍👦

ID NAME ROLE RESPONSIBILITY %
65130500022 Natsaran Sae-oueng Coder
  • Validate password when user create new account
  • Create/Delete an Employee Card on Home page
  • Checking requirement when adding an new employee card
24%
65130500023 Tinnapop Tienbang QA
  • Statistic page
  • Code optimization
  • Authentication template
28%
65130500041 Papangkorn Kijsakulrat UI and Coder
  • Card component
  • Skeleton loading
  • Page Routing and Overall Detail page
24%
65130500046 Phatcharadol Thangplub Coder
  • Validate and update user input in detail page
  • Local storage and Rememberme checkbox
  • Encoding base algorithm
24%

FEATURE 💡

📍 FEATURE DESCRIPTION
1 Authentication User can either create and login with there own accounts.
2 Authentication Encode Tricky encode algorithm to keep user credential safe.
3 Employees Update User can update there own employees details or keep there old information.
4 Employees Delete User can delete there own employees.
5 Information Graph User can look at a graph view of there own employees.

DIAGRAM 🍭

image


image


image


TUTORIAL ❓

1. Create your account and follow the instructions.

2. Log in using your username and password. If you want to remember your account, check Remember Me.

3. In the navigation bar, you can add a new employee, search for an employee, and go to the statistics page.

4. On the Add Employee page, you can select an employee's mood profile, type the input, and follow the instructions. After you add an employee, the employee data shows up on the home page, followed by the data you add. 

5. You can delete the employee card on the right bottom of the card.

6. In case you want to edit the employee card, you can click on the card, and it'll bring you to the details page of the card.

7. On the Details page, you can edit everything the same as the Add Employee process, such as profile and data. Once you complete clicking the edit button, it's going to update the user data. You can also delete an employee card on this page.

8. On the statistics page, you can display graphs and information on the overall mood of employees based on cards that were added earlier.

9. In case you want to switch accounts, you can log out of the system in the menu.


EMPLOYEE INSIGHT DEMO 🕹️

demo.mp4

GROWTH 📈

Each member's learning in the past 5 weeks

  • Natsaran Sae-oueng 65130500022 - Communication between Vue Components, REST API, Vue Router, Life cycle hook.
  • Tinnapop Tienbang 65130500023 - Basic State management, Fetch API and Basic Vue Components.
  • Papangkorn Kijsakulrat 65130500041 - Basic Vue Components, Vue Router and HTTP Request Method.
  • Phatcharadol Thangplub 65130500046 - Basic Vue Components and HTTP Request Method.