Skip to content

feat(Payroll): redesign Edit payroll UI as card/table sections#2467

Draft
krisxcrash wants to merge 3 commits into
kw/feat/SDK-1134-timeoff-fieldfrom
kw/feat/SDK-1134
Draft

feat(Payroll): redesign Edit payroll UI as card/table sections#2467
krisxcrash wants to merge 3 commits into
kw/feat/SDK-1134-timeoff-fieldfrom
kw/feat/SDK-1134

Conversation

@krisxcrash

Copy link
Copy Markdown
Contributor

Summary

  • Second of two stacked PRs for SDK-1134. Based on refactor(Payroll): split time-off balance display out of TimeOffField #2466 (merge that one first).
  • Redesigns the Edit payroll screen's sections — Regular and overtime hours, Time off, Additional earnings, Other — as bordered Box cards with DataView tables, matching the design-mode reference (sdk-app/src/design/components/payroll/PayrollEditEmployee/).
  • Overtime and Double overtime rows are hidden behind an "Add overtime" button unless the employee already has non-zero overtime hours (mirrors the design reference's reveal behavior).
  • Splits the combined "Additional earnings" section into "Additional earnings" (Bonus, Commission, Correction payment) and a new "Other" section (Cash tips, Paycheck tips).
  • Reorders sections so Additional earnings renders above Time off (an explicit deviation from the design reference, called out during review) — "Other" and "Reimbursements" keep their existing relative position.
  • UI only. The per-workweek hours/earnings split (Regular Rate of Pay) stays in the design prototype and is tracked as separate follow-up work — no new API fields or split-calculation logic here.

Test plan

  • npm run test -- --run src/components/Payroll/PayrollEditEmployee — 70/70 passing
  • npm run test -- --run (full suite) — 3539/3542 passing (1 pre-existing expected-fail; 2 unrelated CreatePayment.test.tsx failures were full-suite timing flakiness, confirmed passing in isolation)
  • npx tsc --noEmit and npx eslint clean on changed files
  • npm run i18n:generate — new translation keys generated (hoursColumns, addOvertimeCta, otherEarningsTitle, fixedAmountColumns)
  • Manual Storybook pass against the design reference (npm run storybook → Domain/Payroll/PayrollEditEmployee) recommended before merge

🤖 Generated with Claude Code

Renders each Edit payroll section (Regular and overtime hours, Time
off, Additional earnings, Other) as a bordered Box with a DataView
table, matching the design-mode reference. Overtime/Double overtime
rows are hidden behind an "Add overtime" reveal button unless the
employee already has non-zero overtime hours. Splits "Additional
earnings" into "Additional earnings" (Bonus, Commission, Correction
payment) and "Other" (Cash tips, Paycheck tips), and moves Additional
earnings above Time off per design review. UI only — the per-workweek
hours/earnings split (RRoP) is a separate ticket (SDK-1134).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@krisxcrash
krisxcrash requested a review from a team as a code owner July 23, 2026 20:32
@krisxcrash krisxcrash self-assigned this Jul 23, 2026
@krisxcrash
krisxcrash marked this pull request as draft July 23, 2026 20:34
github-actions Bot and others added 2 commits July 23, 2026 20:36
The Edit-payroll card/table redesign gives each hours row's <tr> an
ARIA rowheader-derived accessible name equal to the row label (e.g.
"Regular Hours"), which is the same text as the input's own label.
getByLabelText matches both the row and the input, so it's ambiguous;
getByRole('spinbutton', ...) only matches the actual form control.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant