Skip to content

Annual Leave

Paginated list of a worker's annual leave (holiday) requests with filtering by status, approval actions, and grid/list view toggle.

Route

/organisations/:orgId/workers/:id/annual-leave

Layout

Uses the shared ApprovalSectionView component configured for holiday requests.

View Selector

Dropdown with options: Pending, Approved, Rejected (Paid and Overdue views are excluded).

Table Columns (List View)

  • Status
  • Leave type
  • Approvals (approval chain progress)
  • Requested (days requested)
  • Used (days used)
  • Date Submitted
  • Calendar (date range)
  • Note

Grid View

Displays ApprovalCard components with annual leave-specific icons (AnnualLeaveApprovalIcons) and additional content (AnnualLeaveAdditionalContent).

Approval Actions

Clicking an item navigates to its detail view. Approve and Decline buttons open the PendingApproval modal.

Data Loading

Approvals are fetched for RequestType.Holiday only, scoped to the worker's EOR instance.

Behavior notes

  • Grid/list toggle state is persisted in the workersAnnualLeaveListViewSelected store.
  • Uses the WorkerAnnualLeaveTableRow component for list view row rendering.
  • The Leave type column shows the request type via the ApprovalRequestTypeTag component.
  • Each table row includes a checkbox for batch selection.
  • Clicking a row navigates to the approval detail view for that item.
  • The Requested and Used columns show the number of days (requestedDays and usedDays).
  • The Calendar column renders an inline CalendarDisplayPopup showing the date range.
  • The Note column shows a chat icon coloured yellow if a note exists, grey otherwise.
  • Responsive: at widths below 1200px, the Used, Date Submitted, Calendar, and Note columns are hidden. At widths below 450px, the Approvals column is also hidden.
  • The annual leave and absences tabs share the same translation path (workers.detail-view.absences.) and the same WorkerAnnualLeaveTableRow row component.