Skip to main content

Attendant

Description​

A simple management system for mantaining employees attendance and working hours in a workplace.

Mockups​

Tap into the Figma link for a comprehensive view of project mockups and UI design.

Requirements​

Sign In - User​

  • Punch form with fields for inputting Username and PIN code. For initial access, users can authenticate themselves using predefined login credentials. Search mock for Tours List
  • On successful validation:
    • in case of first login, user will be asked to change his/her PIN code and login again Search mock for Tours List
    • in case of wrong credentials Search mock for Tours List

User Dashboard​

  • After successful login user will be routed to the dashboard: - containing an avatar with his/her initials in the top bar - an option to punch in/out - a button for applying for leave (user can avail this option only once at the start of day) - an option for searching and viewing past attendance Search mock for Tours List

Attendance Record​

  • A tabular view of all records.
  • A search field to search the employees on the basis of date and status.
  • Filter on the basis of attribute status. Search mock for Tours List

Sign In - Admin​

  • Input admin ID and PIN code to sign in as an admin. Search mock for Tours List

Admin Dashboard​

  • On successful login, the admin will be routed to the dashboard. The admin dashboard provides a comprehensive overview with two main sections:

    • The top section features three tabs: present, absent and on-leave employees.

    • The bottom section is a searchable, sortable list of all employees containing their total working hours and average working hours, consolidated over a period of 1, 3, 6 or 12 months; user should be able to sort list based on either name or total working hours. User should be able to select time period using a button group or dropdown at the top of the section.

      Search mock for Tours List

    • The admin subheader offers easy navigation with three routes: dashboard, users, and settings, ensuring efficient access to key functionalities. Search mock for Tours List

Manage Users​

  • A list of all the employees: this list enables the admin to view, edit and delete employees. Admin can search an employee on the basis of name, email etc. Moreover employees can also be filtered by their position for easy access. Search mock for Tours List

View User​

  • View user page will show employees name, position, avatar with name initials/profile picture and a list showing the employees past attendance record. It also features a floating button on the top right to edit the employee details. Search mock for Tours List

Edit User​

  • Edit user modal enables the admin to edit employee's first name, last name, designation and email. Search mock for Tours List

Delete User​

  • Delete user modal enables the admin to permanently delete the employee, this action will also update the users list. Search mock for Tours List

Add User​

  • Add user modal enables the admin to add a new employee by adding their first name, last name, designation and email. Search mock for Tours List

Settings​

  • Settings view should contain the following stuff:

    • inputs for changing office hours

    • input for changing minimum working hours

      Search mock for Tours List

Rules & Validations​

  • Employee IDs are generated automatically according to the provided department (e.g SE-122)
  • Employee code should be in range [000 - 999]
  • PIN code should be 4 digits long; default PIN code for a new employee should be 0000
  • Every punch-in should have a corresponding punch-out; in case user doesn't punch out at day end, the last punch-in will be discarded at the start of the next working day
  • Apply logical validations on inputs.

Success metrics​

  • All data should be stored in Github gists. Gists are generally used to store small (or not so small) snippets of code or other information in form of files. Check out API here.
  • A complete UI of the application build using React having good UX.
  • Follow best practices for React and Typescript.
  • Deploy the app on vercel

Coding Guidelines​

  • Integrate eslint with code guidelines from airbnb.
  • Install a code formatter extension for your editor; you can use Prettier if it's available for your editor of choice.

Stretched goals​

  • Add unit tests using RTL.
  • Add integration tests

Tech Stack​

  • React
  • Redux
  • CSS

Due Period​

  • Assignment should be submitted around 5-6 working days.

Submission Guidelines​

  • Must create a separate review branch for implementing suggestions.