Employee Detail Page
Understand the employee detail page layout, profile header, and how to navigate between tabs.
The Employee Detail page is the most comprehensive view of an individual employee in TransportechAI. It consolidates all HR, financial, and operational data for one person into a single page with a tabbed layout. This page is where you go to review, update, and manage everything about an employee.
Route: /employees/detail/:id
How to Access
There are several ways to reach an employee's detail page:
- From the Employee List -- Click on any employee row in the Employee List table.
- Direct URL -- Navigate to
/employees/detail/{employee-id}if you have the employee's ID. - From other modules -- Many modules (such as Payroll, Attendance, and Loans) link back to the employee detail page when you click on an employee's name.
Page Layout
The Employee Detail page is divided into three main sections:
1. Profile Header
At the top of the page, you will see a compact header card that displays the employee's key identifying information at a glance:
| Element | Description |
|---|---|
| Avatar | The employee's profile photo, or their initials if no photo has been uploaded |
| Full Name | The employee's first and last name displayed prominently |
| Role | The employee's assigned system role (e.g., Driver, Dispatcher, Admin) |
| Department | The department the employee belongs to |
| Status Badge | An Active (green) or Inactive (gray) badge showing the employee's current status |
| The employee's email address | |
| Phone | The employee's phone number, if available |
The header remains visible as you switch between tabs, providing persistent context about which employee you are viewing.
2. Action Buttons
Below the header, you will find action buttons that allow you to manage the employee:
| Action | Description |
|---|---|
| Edit Employee | Opens the edit form (/employees/edit/:id) where you can update the employee's basic information, employment details, contact info, and bank details |
| Deactivate / Activate | Toggle the employee's active status. Deactivating an employee prevents them from logging in but preserves all their records |
Deactivating an employee is not the same as deleting them. Deactivation preserves all historical data (payroll, attendance, leave, loans) and can be reversed at any time by reactivating the employee.
3. Tab Navigation
The main content area uses a horizontal tab bar that lets you switch between different categories of employee data. Each tab loads a different view without leaving the page.
The available tabs are:
| Tab | Description |
|---|---|
| About | Personal information, contact details, address, and bank details |
| Allowance | Allowance assignments and amounts |
| Attendance | Attendance history, check-in/check-out records |
| Benefit | Benefits assigned to the employee |
| Group Permission | Role and permission group assignments |
| Leave | Leave balances and leave request history |
| Loan | Active and completed loans |
| Payroll | Payroll run history and payslip records |
| Working Schedule | Assigned shifts and schedule configurations |
The currently active tab is highlighted with a blue underline. Click any tab label to switch to that section.
The tab you are viewing is reflected in the page URL. You can bookmark a specific tab to return directly to it later, or share the link with a colleague.
Navigating Between Employees
When you finish reviewing one employee and need to view another, use one of these approaches:
- Browser back button -- Returns you to the Employee List, preserving your previous search and filter settings.
- Breadcrumb navigation -- Click "Employees" in the breadcrumb trail at the top of the page to return to the list.
Editing Employee Information
To update an employee's core information (name, email, department, role, address, or bank details), click the "Edit Employee" button. This takes you to the Edit Employee form at /employees/edit/:id.
The edit form contains the same fields as the creation form, pre-filled with the employee's current data. After making your changes, click "Save" to update the record.
Some data -- such as attendance records, payroll history, and leave requests -- cannot be edited from the Employee Detail page. These are managed through their respective modules (Attendance, Payroll, Leave) and are displayed here in read-only format for convenience.
Understanding the Tab Data
Each tab on the detail page shows data that is also accessible through its dedicated module. The key advantage of the Employee Detail page is that it filters all data to show only records belonging to this specific employee, saving you from searching or filtering in each individual module.
For example:
- The Payroll tab shows only this employee's payslips, whereas the Payroll module (Finance > Payroll) shows payroll runs for all employees.
- The Leave tab shows only this employee's leave balance and requests, whereas the Leave module shows leave data for the entire organization.
- The Loan tab shows only this employee's loans, whereas the Loan module shows all loans company-wide.
This employee-centric view is especially useful for HR managers conducting reviews, onboarding audits, or responding to employee inquiries.
Next Steps
- Employee Tabs Guide -- Detailed walkthrough of each tab and what information it contains
- Creating an Employee -- Add a new employee to the system
Creating an Employee
Step-by-step guide to adding a new employee to the system, including all required and optional fields.
Employee Tabs Guide
Detailed guide for each tab on the Employee Detail page, covering personal info, allowances, attendance, benefits, permissions, leave, loans, payroll, and working schedules.