Timesheets Reference

The Timesheet component displays detailed time tracking records for individual employees, showing shifts, breaks, and total hours worked within a selected date range.

Timesheet interface showing daily and weekly views

Timesheet interface showing daily and pay period data

The timesheets component allows either editing or viewing based on the permissions.

Basic Implementation

iframe

React

React Native

Timesheet interface showing daily and weekly views on mobile

Timesheet interface showing daily and pay period data on mobile

Editing an employee's timesheets

Component Properties

Property	Type	Required	Description
`employeeId`	`string`	Yes	ID of the employee whose timesheet to display.
`onBack`	`() => void`	No	Callback when back navigation is triggered.
`start`	`Date`	No	Start date for timesheet range.
`end`	`Date`	No	End date for timesheet range.

Theme Elements

Element Name	Type	Properties	Description
`dateSelectorText`	`Text`		Styles the date range selector text.
`dateSelectorWrapper`	`Container`	`backgroundColor`, `borderRadius`, `padding`	Styles the container around the date selector.
`employeeSelectorName`	`Text`		Styles the employee name in the employee selector.
`employeeSelectorWrapper`	`Container`	`backgroundColor`, `padding`	Styles the container around the employee selector.
`employeeSelectorAvatar`	`Container`	`borderWidth`, `borderColor`, `borderRadius`	Styles the employee avatar in the selector.
`employeeSelectorDropdown`	`Container`	`backgroundColor`, `color`, `borderRadius`	Styles the dropdown menu for employee selection.
`shiftDetailDate`	`Text`		Styles the date text in shift details.
`shiftDetailTime`	`Text`		Styles the time text in shift details.
`shiftDetailType`	`Text`		Styles the shift type label in shift details.
`timecardColumnTitle`	`Text`		Styles the column headers in timecards.
`timecardColumnValue`	`Text`		Styles the values in timecard columns.
`timecardDate`	`Text`		Styles the date display in timecards.
`timecardSingle`	`Container`	`backgroundColor`, `borderWidth`, `borderRadius`	Styles individual timecard entries.
`timecardsList`	`Container`	`gap`, `padding`	Styles the container for all timecard entries.
`timesheetsSummaryButton`	`Button`		Styles buttons in the summary section.
`timesheetsSummaryColumnTitle`	`Text`		Styles column titles in the summary.
`timesheetsSummaryColumnValue`	`Text`		Styles values in the summary section.
`timesheetsSummaryWrapper`	`Container`	`backgroundColor`, `padding`	Styles the container for the summary section.
`header`	`Container`	`backgroundColor`, `padding`	Styles the header section of the timesheet.

For a comprehensive overview of UI customization options and to learn more about theming across all components, please see our UI Customization Introduction article.

Custom Strings

Custom strings allows you to override any of the texts on the component with your own texts.

Custom Strings are currently in beta.

String Key	Default Value	Description
`timecardColumnHoursWorked`	"Hours Worked"	Header for hours worked column.
`timecardColumnUnpaidBreaks`	"Unpaid Breaks"	Header for breaks column.
`timecardColumnGrossPay`	"Gross Pay"	Header for pay column.
`timecardEmpty`	"No time tracking data found"	Empty state message.
`bottomOverlayEditButton`	"Edit"	Edit button text in shift detail.
`bottomOverlayViewButton`	"View"	View button text in shift detail.
`timesheetsSummaryButton`	"Export"	Export button text.

💡

The timesheet component includes built-in date range selection and automatically handles timezone conversions for accurate time display.

Basic Implementation#

Component Properties#

Theme Elements#

Custom Strings#

Basic Implementation

Component Properties

Theme Elements

Custom Strings