feat(Dashboard): add Deductions block to the Job and Pay tab

[dmortal]

Summary

Adds a Deductions block to JobAndPayView in the Employee Dashboard. Users can now see all active deductions, add a new one, edit an existing one, and delete with a confirmation dialog — all flowing through the existing Dashboard state machine. Bundles a small earlier fix for the standalone Deductions page's empty-state layout.

Changes

• Deductions block in JobAndPayView: useDeductionsList is consumed directly inside the view (mirroring how usePaymentMethodList is wired) — garnishments prop drilling from Dashboard is gone. Each row has a HamburgerMenu (Edit / Delete). Delete opens a new DeleteDeductionDialog.
• useDeleteDeduction + DeleteDeductionDialog — small parallels of the bank-account counterparts; live in Deductions/shared/.
• dashboardStateMachine: new deductionForm state. From index: EMPLOYEE_DEDUCTION_ADD / EMPLOYEE_DEDUCTION_EDIT → deductionForm; EMPLOYEE_DEDUCTION_DELETED → index with successAlert: 'deductionDeleted'. From deductionForm: EMPLOYEE_DEDUCTION_CREATED / UPDATED → index with the matching alert; CANCEL / EMPLOYEE_DEDUCTION_CANCEL → index.
• DeductionFormContextual mounts the existing DeductionsForm picker (Standard vs Child Support) so both custom deductions and any court-ordered garnishment type are handled from the Dashboard.
• useEmployeeCompensation drops useGarnishmentsListSuspense + garnishmentList — JobAndPayView fetches via the deductions hook directly, and React Query dedupes so there's no extra network call.
• Withheld-column bug fix: the legacy column rendered nothing useful — amount is a string per the API but the branch checked typeof === 'number' (never true) and fell back to ${annualMaximum}% per paycheck (wrong field). Now matches the legacy DeductionsList: currency / percent driven by deductAsPercentage, with the "{value} per paycheck" suffix for recurring rows.
• Error handling: errors from both paymentMethodList and deductionsList are merged with composeErrorHandler, so the existing JobAndPayView BaseLayout surfaces either hook's failure (read or delete).
• Standalone /employee/Deductions layout fix (bundled from earlier work): wraps IncludeDeductions in <BaseLayout> inside the contextual so <Flow>'s outer row-Flex gets a definite width context — un-squashes the empty-state CTA.

Testing

• npx tsc --noEmit — clean
• npm run format + npm run lint — clean (0 errors; only pre-existing warnings in unrelated files)
• npm run test -- --run src/components/Employee/Dashboard src/components/Employee/Deductions — 8 files, 34 tests pass
• Manual validation via Playwright against the dev app:
  • /employee/DashboardFlow → Job and pay tab → Deductions section renders with title + "Add deduction" button + Deduction/Frequency/Withheld/Actions columns.
  • Empty state shows the "No deductions" placeholder.
  • Clicking "Add deduction" fires employee/deductions/add (verified in Events Log) and the state machine mounts the DeductionsForm picker with the minimal header / Back button.
  • /employee/Deductions (standalone) no longer renders the empty-state at ~200px width; full content width restored.

[Copilot]

Pull request overview

Adds deductions management to the Employee Dashboard’s Job and Pay tab and wires it into the existing dashboard flow/state machine.

Changes:

• Adds dashboard deductions listing, add/edit/delete actions, delete confirmation, and success alerts.
• Introduces dashboard state transitions and contextual form mounting for deduction create/edit.
• Updates related i18n strings/types and adjusts the standalone deductions empty-state layout wrapper.

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/types/i18next.d.ts	Adds typed dashboard and deductions translation keys.
src/i18n/en/Employee.Deductions.json	Adds delete dialog copy.
src/i18n/en/Employee.Dashboard.json	Adds dashboard deduction labels and success alerts.
src/components/Employee/Deductions/shared/useDeleteDeduction.ts	Adds pending-delete helper hook.
src/components/Employee/Deductions/shared/index.ts	Exports new shared deduction delete utilities.
src/components/Employee/Deductions/shared/DeleteDeductionDialog.tsx	Adds confirmation dialog for deleting deductions.
src/components/Employee/Deductions/deductionsContextualComponents.tsx	Wraps include step in BaseLayout for layout consistency.
src/components/Employee/Dashboard/JobAndPayView.tsx	Adds deductions fetching, rendering, actions, and delete dialog to Job and Pay.
src/components/Employee/Dashboard/hooks/useEmployeeCompensation.tsx	Removes garnishments from compensation hook data.
src/components/Employee/Dashboard/dashboardStateMachine.ts	Adds deduction form state and dashboard deduction transitions.
src/components/Employee/Dashboard/DashboardComponents.tsx	Adds dashboard deduction form contextual component and alerts.
src/components/Employee/Dashboard/Dashboard.tsx	Wires deduction add/edit handlers into Job and Pay view.

[gusto-fresh-eyes]

⚠️ Fresh Eyes stalled while reviewing b233d1c, will try again on the next commit.

---

Outdated Review:

Fresh Eyes Review

Found 1 issue in this PR.

Info (1)

• pr-size: PR is approximately 565 lines of meaningful change across 18 files. This is slightly above the recommended ~400-line guideline but still within a reviewable range for a cohesive feature addition. The changes are well-organized into logical groupings (state machine, view, shared utilities, tests).

Download findings.json — drag the file into Claude or use /add to propose fixes

---

^{Please 👍🏽 👎🏽 if you found this useful. Generated by Fresh Eyes Reviewer. Get help in #ai-code-reviews}