Skip to main content

Expense Claim List UI

Summary​

ESS renders a general claim list; HR Operations renders a pending approval table for non-employee users and claim cards in its employee-only presentation.

Screen contract​

  • Purpose: show claim status and available actions.
  • Navigation: Self Service > Expenses or Workforce > Expenses.
  • Intended users: employees; HR/approver candidates on the compatibility route.
  • Preconditions: authenticated tenant portal context and a successful downstream response.
  • Main components: request page/table, compatibility data table, employee cards, status badge, summary cards.
  • Fields/columns: ESS category, amount, expense date, status; approval table employee, type, amount, date, bill, status, actions; cards also show description and rejection reason when present.
  • Filters: no interactive filter control. The compatibility administrator view filters to pending statuses in memory.
  • Actions: create on ESS; approve/reject on pending table; edit/delete presentation on pending employee cards.
  • Validation: action-specific validation occurs after selection.
  • Loading: ESS uses a skeleton. HR Operations begins with an empty workspace and later displays an error or data.
  • Empty: ESS request component handles no rows; compatibility views define explicit no-claim/no-pending states.
  • Success: refreshed data after successful mutations.
  • Error: ESS query helper behavior; compatibility page displays a load/action error.
  • Permissions: navigation and route protection are separate from API enforcement.
  • API: ESS gateway list; compatibility workspace.
  • Business rules: only Pending claims appear in the approval table.

Screenshot placeholder: claim list with synthetic values and no identifiers.

Requires confirmation​

Pagination, sorting, employee-name completeness after Expense cutover, interactive filtering, and large-list behavior require confirmation.

Source References​

  • UI/salary-ui/apps/client-hrms-portal/src/ess/EssPages.tsx
  • UI/salary-ui/apps/client-hrms-portal/src/pages/hr/HrOperationsPage.tsx
  • microservices/src/gateway-api/EssEndpoints.cs

See Also​

Keywords​

  • Expense UI
  • Claim List

Revision Information​

  • Status: Draft
  • Last reviewed: 2026-07-16
  • Review cycle: Quarterly