Employee portal documentation
The employee portal's aim is to enable each employee, both contractors or permanent, to have access and manage their own data, in a secure way. The employee portal is available as a web application from any device which has a web browser. We recommend using Chrome to access the employee portal.
Here you will learn how to use Punch-in employee portal. In detail, the following topics will be covered:
Dashboard
Overview
This dashboard provides an overview of worked hours, accrued hours, earned amount, and attendance details for the current month. The interface includes a bar chart for visualization and a table for detailed attendance records.
1. Bar Chart
The bar chart displays the hours worked on each day of the current month. It provides a visual representation for quick insights into working patterns.
2. Month's Accrued Hours and Earnings
This section summarizes the total hours worked, accrued earnings, and the calculated pay for the month based on the total worked hours.
Accrued Hours
70.5
Earned Amount
£3525.00
Per worked hours this month
3. Latest Attendance Details
This table provides detailed attendance data, including the date, check-in and check-out times, site location, and total hours worked for each entry.
Date | In | Out | Site | Total |
---|---|---|---|---|
11/04/2024 | 08:30:00 | 17:30:00 | PRU | 9 |
10/04/2024 | 08:30:00 | 17:00:00 | PRU | 8.5 |
Time off
The time off page will show on the top part an overview of the vacation status for the current year (accrued and used vacations as well as days left compared to the total number of days per year)

From here vacation requests can be booked, which will get either approved or rejected by the employee's manager:

Tasks
There are two tasks pages. One is for tasks assigned to the employee, whereas the other one is for tasks that have been created by the employee. The first will show what are the outstanding tasks assigned to the employee. New tasks can be created and assigned as well. Comments can be added to the currently assigned tasks; status change is also done from here.

You can add comments to a task as seen in the image below:

New tasks can be created and assigned as well, by choosing the appropriate fields (due date, assignee, status, description, etc). When creating a new task the following fields are available:
- ETC Estimated completion time, i.e. the expected time to complete the task, in hours
- Assignee The person responsible for the task
- Title Estimated completion time, i.e. the expected time to complete the task
- Description Task description
- Deadline Estimated completion date; it differs from the ETC in two ways: the ETC is expressed in hours and represents the time it takes to fulfill the task, whereas the Deadline is a date, by which the time is expected to be completed. This accounts for multiple tasks that need completing
How to correctly account for tasks and worked hours Ideally your employees will have daily (or multi-daily) tasks that they have to fulfill. By creating tasks and letting employees manage them by recording time and effort on them, you will be ablee to have better visibility on how busy your workforce is, how much tasks are completed on time according to estimates and how many hours has a person spent on each task. This information is all available in the admin as well as the employee dashboards.
Shifts
shiftContent
The employee portal dashboard provides a quick overview of the employee's work and personal information. It includes the following sections:
- Personal Information: Displays the employee's name, job title, and contact information.
- Work Information: Shows the employee's current work status, such as whether they are on a break or on a task.
- Time Off: Displays the employee's available time off and the number of days they have taken off.
- Tasks: Lists the tasks assigned to the employee, including their status and due date.
- Reports: Provides access to various reports, such as time sheets and performance reviews.
The dashboard is designed to provide employees with a quick and easy way to access their work information and stay up-to-date on their tasks and time off.
Reports
The reports will give you a set of data that you can look at to improve your performance, like:
- Average worked hours vs team worked hours
- Average working day start and end hours vs team ones
- Completed tasks vs team completed tasks
- Number of outstanding tasks / overdue tasks
- Number of completed tasks on time vs overdue ones
Time sheets
The timesheets page allows for a job description to be entered so that the approver can see what has been carried out during that time frame. Time sheets can be attributed to projects and tasks.

Personal details
Personal Details Page Documentation
Overview
This page provides a detailed layout of an employee's personal information. It is divided into two sections: the profile section on the left and the details section on the right. The layout is styled using Tailwind CSS for a responsive and modern design.
Profile Section
The left section displays the employee's profile picture, full name, and a button to upload a new picture. The profile picture is styled as a circular image with a shadow, ensuring a clean and professional look.
- Profile picture: Circular image with a shadow.
- Full name: Displayed in a bold and large font.
- Upload button: A blue button with hover effects for better user interaction.
Details Section
The right section contains the employee's personal and professional details, including first name, surname, email, department, employee ID, phone number, and pay rate. These details are presented in a two-column grid layout for optimal readability.
- Each detail is labeled with a small, muted font.
- Values are displayed in a larger, bold font for emphasis.
- The section includes an edit button for updating details, styled as a green button with an icon.
Key Features
- Responsive design ensures compatibility across devices.
- Hover effects on buttons for improved interactivity.
- Clean and structured layout for easy navigation.
- Editable details section for user updates.
