# 2026-07-17 — P1-4 modal migration: HRManagement.tsx partial (1 of 9)

Branch: `feat/p1-4-modals-hr`
Worktree: `.worktrees/feat-p1-4-modals-hr`

## Why

P1-4 from the readiness audit asks for every inline modal to use the
shared `<Modal>` component. HRManagement.tsx has 9 modals (the most of
any single file in the sweep). This PR lands the Onboard Staff modal
as a proof and updates the lint script to count `backdrop-blur-md`
(which HRManagement and several other files use).

## Changes

### `client/src/pages/admin/HRManagement.tsx`

- Migrated 1 of 9 modals: **Onboard Staff**. The form body is wrapped
  in `<ModalBody>`; the inline `bg-muted/50` header band + close button
  were removed (Modal injects its own header).
- 8 modals remaining: Staff Profile, Staff Documents, Leave Audit
  Intel, New Payroll Run, Create Job Vacancy, Vacancy Details,
  Review Candidate, Register Candidate. Each is structurally similar
  and ready to migrate with the same pattern; left for a follow-up PR
  because the file is 2000+ lines and the 9 modals are scattered
  across the page.

### `scripts/lint-no-inline-modals.js`

Updated the matcher to also count `backdrop-blur-md` and
`backdrop-blur-lg` in addition to `backdrop-blur-sm`. The `bg-[#002147]/80
backdrop-blur-md` pattern is used across HRManagement, Library, and
Inventory, so the previous lint missed most admin modals.

## Out of scope

- 8 remaining modals in HRManagement.tsx.
- 6 remaining modals in `finance/*` (StudentGroups × 3, StudentGroupDetail,
  plus side-drawers in Invoices + Payslips needing a sibling
  `<Drawer>` component).

## Verification

- `node scripts/lint-no-inline-modals.js`:
  - HRManagement.tsx: 9 → 8 (Onboard Staff migrated).