[Due for payment 2026-05-29] [HR Import] Render per-provider cards on the HR page [F06]

[francoisl]

• Part of project Integrate with merge.dev to adopt widespread HR import
• Parent issue (internal)
• Design doc

---

Task

Extend the HR page (built by the Gusto project) to render one MenuItem card per supported HR provider.

Files:

• src/pages/workspace/hr/WorkspaceHRPage.tsx
• src/pages/workspace/hr/utils.tsx → rename to utils.ts (it doesn't contain React components)

Behavior:

• For each connection entry from MERGE_HR_PROVIDERS, render one MenuItem.
• Each card passes the provider's iconUrl as the icon prop with iconType={CONST.ICON_TYPE_AVATAR} (or ICON_TYPE_WORKSPACE — whichever matches the visual treatment Gusto's card uses today). This is the same path the app already uses for user-avatar menu rows: the URI string renders through <Avatar> → <Image>.
• Add a fallback Expensicon (e.g. a generic HR / office icon) for when the icon URL fails to load or is missing — important since we're depending on Merge's CDN at render time.
• Whether a card is in "connected" vs "disconnected" state is driven by policy.connections[connectionName].
• Extend getHRCardState() to handle any HR connection name, not just Gusto.
• Wire the three-dot menu items ("Sync now", "Disconnect") by connection name.

Dependencies: F1, F3, F5.

Issue Owner

Current Issue Owner: @bernhardoj

[twisterdotcom]

I thikn for this, we also want it to respect the "show search after 12 entries" parameter: https://expensify.slack.com/archives/C07HPDRELLD/p1778052463096649?thread_ts=1778015703.635999&cid=C07HPDRELLD

[jmusial]

PR opened