geocrop-platform./2026-07-17-p1-4-fees.md at c6a377633294e25e50b05ecc05b2ff9d334375b8

2.0 KiB

Raw Blame History

Branch: feat/p1-4-modals-fees Worktree: .worktrees/feat-p1-4-modals-fees

Why

P1-4 from the readiness audit asks for every inline modal to use the shared <Modal> component Track A introduced. BankingAccounts.tsx and 8 finance/* files already migrated. This PR continues the sweep with the top-level Fees.tsx (4 modals).

Changes

`client/src/pages/Fees.tsx`

Migrated 4 modals to <Modal> + <ModalBody>:

Create Fee Group — 2-field form (name, amount)
Assign Fees — 2 dropdowns (student, fee group)
Record Payment — dropdown + amount input
Edit Fee Group — name / description / amount / due date

Notes

The page's open <button className="text-2xl font-light">×</button> header close button is removed — <Modal> injects its own close button inside <ModalHeader> (already part of <Modal> when no icon prop is supplied). Same back-button-on-Escape + click-outside-to-close behaviour comes for free.

Each form uses an explicit id="…-form" so the footer-submit button can use form="…" to post outside the form element. This preserves the exact button placement at the modal footer (matching the Footer slot in Track A's reference).

The createPortal-based row context menu (lines ~517 in the source) is NOT a modal — it's a row-popover — and was left untouched. Lint script counts it as 0 because it uses neither fixed inset-0 nor backdrop-blur-sm.

Out of scope

The remaining 14 inline modals split across:

HRManagement.tsx (7)
Inventory.tsx (4)
Library.tsx (3)
parent/AcademicProgress.tsx (4)
6 in finance/* (StudentGroups × 3, StudentGroupDetail, and side-drawers in Invoices + Payslips needing a sibling <Drawer> component)

…land in subsequent PRs.

Verification

node scripts/lint-no-inline-modals.js → Fees.tsx count dropped 4 → 0.
npx tsc --noEmit clean for Fees.tsx (no new TS errors).

2.0 KiB Raw Blame History Unescape Escape

2026-07-17 — P1-4 modal migration: Fees.tsx (Track A continuation)

Why