[New] One seamless flow: workforce data to payroll, fully embedded.
Shift Form Reference
Shift Form in the web timesheets
ShiftForm showing shift editing interface
Basic Implementation
iframe
React
React Native
The ShiftForm component is opened automatically in the Timesheet iframe component when a shift is clicked.
State
Component Properties
| Property | Type | Required | Description |
|---|---|---|---|
employeeId | string | Yes | ID of the employee whose shift to edit. |
date | string | Yes | Date of the shift in YYYY-MM-DD format. |
onSave | (data: ShiftData) => void | No | Callback when shift is saved. |
onCancel | () => void | No | Callback when editing is cancelled. |
Theme Elements
| Element Name | Type | Properties | Description |
|---|---|---|---|
shiftsWrapper | Container | gap | Controls spacing between individual shifts. |
shiftSingle | Container | backgroundColor, borderRadius, padding, border | Styles the container for a single shift entry. |
shiftIcon | Icon | color, width, height | Styles the icon displayed for each shift. |
shiftTitle | Text | fontFamily, fontSize, fontWeight, color | Styles the title text of a shift. |
shiftDuration | Text | fontFamily, fontSize, color | Styles the text displaying shift duration. |
shiftChevron | Icon | color | Styles the chevron/arrow icon used in the shift interface. |
shiftAddButton | Button | backgroundColor, color, fontFamily, fontWeight, borderRadius, _hover, _active | Styles the button for adding a new shift. |
shiftSummaryBox | Container | backgroundColor, borderRadius, padding, border | Styles the container showing shift summary information. |
shiftSummaryBoxTitle | Text | fontFamily, fontSize, fontWeight, color | Styles the title of the shift summary box. |
shiftSummaryColumnTitle | Text | fontFamily, fontSize, color | Styles the column titles in the shift summary. |
shiftSummaryColumnValue | Text | fontFamily, fontSize, fontWeight, color | Styles the values in the shift summary columns. |
shiftSaveButton | Button | backgroundColor, color, fontFamily, fontWeight, borderRadius, _hover | Styles the button for saving shift changes. |
shiftDeleteButton | Button | backgroundColor, color, fontFamily, fontWeight, borderRadius, _hover | Styles the button for deleting shifts. |
addBreakButton | Button | backgroundColor, color, fontFamily, borderRadius, _hover | Styles the button for adding breaks to a shift. |
shiftNotesSeparator | Container | height, backgroundColor | Styles the separator line between shift details and notes section. |
shiftNotesTitle | Text | fontFamily, fontSize, fontWeight, color | Styles the title text for the notes section. |
shiftNotesAddNoteButton | Button | backgroundColor, color, fontFamily, borderRadius, _hover | Styles the button for adding notes to a shift. |
shiftNotesInput | Input | fontFamily, borderColor, borderRadius, padding | Styles the input field for entering shift notes. |
shiftNotesSendButton | Button | backgroundColor, color, fontFamily, borderRadius, _hover | Styles the button for sending/saving shift notes. |
Custom Strings
Custom Strings are currently in beta.
| String Key | Default Value | Description |
|---|---|---|
shiftFormClockIn | "Clock In" | Clock in input label. |
shiftFormClockOut | "Clock Out" | Clock out input label. |
shiftFormBreakStart | "Break Start" | Break start input label. |
shiftFormBreakEnd | "Break End" | Break end input label. |
shiftFormBreakType | "Break Type" | Break type selector label. |
shiftFormColumnHoursWorked | "Hours Worked" | Hours column header. |
shiftFormColumnUnpaidBreaks | "Unpaid Breaks" | Breaks column header. |
shiftFormColumnGrossPay | "Gross Pay" | Pay column header. |
shiftFormSave | "Save" | Save button text. |
shiftFormDeleteDay | "Delete Time Card" | Delete button text. |
shiftFormAddTimecardTitle | "Add Time Card" | Add new card title. |
shiftFormAddTimecardDateInputTitle | "Date" | Date input label. |
Modified at 2025-03-30 11:58:21