PHEE-379: add Account Mapper and G2P Config modules with functional create forms

[Flashl3opard]

Related

Epic: PHEE-363
Closes: PHEE-378

Summary

Builds the Account Mapper and G2P Payment Config module pages with
typed mock data and functional create forms.

Changes

Account Mapper

• Added AccountMapper.tsx with breadcrumb and 2 tabs (Beneficiaries, Create Beneficiaries)
• Added BeneficiariesTab.tsx with filter chips, DataTable and pagination
• Added CreateBeneficiariesTab.tsx with 6-field form (Full Name, Government Entity, Financial Institution, Functional ID, Financial Address, Payment Modality)
• Added typed mock data in beneficiaries.mock.ts
• Success banner auto-dismisses after 1.5s and switches back to Beneficiaries tab

G2P Payment Config

• Added G2PConfig.tsx with breadcrumb and 2 tabs (G2P Payment, Create)
• Added G2PPaymentTab.tsx with filter chips, DataTable and pagination
• Added CreateG2PTab.tsx with 5-field form (Government Entity, Program, Payer DFSP, Payment Account, Status)
• Added typed mock data in g2pConfigs.mock.ts
• Numeric-only enforcement + 12-digit pattern on Payment Account field

Screenshots

1. Account Mapper Beneficiaries

2. Account Mapper Create form

3. G2P Config list

4. G2P Config Create form

[Copilot]

Pull request overview

Adds two new feature modules—Account Mapper and G2P Payment Config—and wires the existing route pages to render these new module UIs, including list views (mock-backed) and create forms with basic UX (success banner + tab switch).

Changes:

• Replaced placeholder pages with re-exports to newly added module entry components.
• Implemented mock-backed list tabs (tables + pagination) for Beneficiaries and G2P Payment Configs.
• Implemented create-form tabs for both modules, including success banners and tab navigation behavior.

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/pages/G2PConfig.tsx	Re-exports the new G2P Config module page component.
src/pages/AccountMapper.tsx	Re-exports the new Account Mapper module page component.
src/modules/g2p-config/types.ts	Adds the typed G2PConfig model.
src/modules/g2p-config/mocks/g2pConfigs.mock.ts	Adds typed mock data for the G2P list tab.
src/modules/g2p-config/G2PPaymentTab.tsx	Implements the G2P list tab table, status filtering, and pagination.
src/modules/g2p-config/G2PConfig.tsx	Implements the G2P module wrapper (breadcrumb + tabs).
src/modules/g2p-config/CreateG2PTab.tsx	Implements the G2P create form and success UX.
src/modules/account-mapper/types.ts	Adds the typed Beneficiary model.
src/modules/account-mapper/mocks/beneficiaries.mock.ts	Adds typed mock data for the Beneficiaries list tab.
src/modules/account-mapper/CreateBeneficiariesTab.tsx	Implements the Beneficiaries create form and success UX.
src/modules/account-mapper/BeneficiariesTab.tsx	Implements the Beneficiaries list tab table and pagination.
src/modules/account-mapper/AccountMapper.tsx	Implements the Account Mapper module wrapper (breadcrumb + tabs).
src/components/ui/label.tsx	Adds a shared Label UI component.
src/components/ui/input.tsx	Adds a shared Input UI component.
src/components/shared/StatusBadge.tsx	Extends StatusBadge styling/props to support G2P-specific inactive rendering.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Flashl3opard]

All Copilot suggestions addressed and pushed:

• Fixed regex escape: pattern="\d{12}" → pattern="[0-9]{12}" for correct 12-digit account validation
• Fixed type import: React.FormEvent → import('react').FormEvent in both CreateG2PTab.tsx and CreateBeneficiariesTab.tsx
• Fixed invalid Tailwind utility: max-w-125 → max-w-xl in both form files