68 lines
2.4 KiB
Markdown
68 lines
2.4 KiB
Markdown
# 2026-07-18 — P1-4 modal migration: finance/* complete + new `<Drawer>` component
|
|
|
|
Branch: `feat/p1-4-modals-finance`
|
|
Worktree: `.worktrees/feat-p1-4-modals-finance`
|
|
|
|
## Why
|
|
|
|
Closes the remaining finance/* modals that the prior partial PR
|
|
couldn't reach because they needed either a centered modal or a side
|
|
drawer.
|
|
|
|
## Changes
|
|
|
|
### `client/src/components/ui/Drawer.tsx` (new)
|
|
|
|
Right-side slide-in panel component. Symmetric to `<Modal>`:
|
|
|
|
- `open`, `onClose`, `title`, `icon`, `maxWidth`, `zIndex`, `footer`,
|
|
`children` — same shape as `<Modal>` props.
|
|
- Body uses `<DrawerHeader>` (sticky top) and `<DrawerFooter>`
|
|
(sticky bottom) slots.
|
|
- Default `maxWidth` is `max-w-2xl` (vs Modal's `max-w-xl`).
|
|
- Default `zIndex` is `110` (same as Modal).
|
|
- Backdrop click-outside + Escape-to-close + scroll-lock behaviour
|
|
matches Modal.
|
|
|
|
### `client/src/pages/finance/StudentGroups.tsx` (3 modals migrated)
|
|
|
|
- **Delete group?** (confirm) — red destructive dialog.
|
|
- **New student group / Edit X** — name + description + type +
|
|
colour form.
|
|
- **Add members to X** — mode dropdown (all / by class / by IDs)
|
|
with conditional UID input.
|
|
|
|
### `client/src/pages/finance/StudentGroupDetail.tsx` (1 modal migrated)
|
|
|
|
- **Remove member?** — confirm dialog.
|
|
|
|
### `client/src/pages/finance/Invoices.tsx` (1 drawer migrated)
|
|
|
|
- **Invoice detail** (right-side drawer, max-w-2xl) — replaced the
|
|
inline `fixed inset-0 ... slide-in-from-right` pattern with
|
|
`<Drawer>`.
|
|
|
|
### `client/src/pages/finance/Payslips.tsx` (1 drawer migrated)
|
|
|
|
- **Payslip detail** (right-side drawer, max-w-md) — summary tile +
|
|
Earnings/Deductions rows + "Open full payslip view" footer action.
|
|
|
|
### Housekeeping
|
|
|
|
- Cleaned up an orphan `</div>);}` left over from the previous
|
|
`Discounts.tsx` migration (commit `4f8c33f`) — that dangling
|
|
closure was a pre-existing TS error and is now fixed.
|
|
|
|
## Verification
|
|
|
|
- `node scripts/lint-no-inline-modals.js` → `finance/*`:
|
|
6 → 0 (StudentGroups, StudentGroupDetail, Invoices, Payslips all
|
|
clean).
|
|
- Whole-tree lint: only `Messages.tsx` and other out-of-scope files
|
|
remain (already covered by other PRs).
|
|
- `npx tsc --noEmit` for finance/* is clean except for two
|
|
pre-existing errors that are not introduced by this PR:
|
|
`StudentGroup` is exported from the store via a different path
|
|
(consistency fix, deferred), and `Trips.tsx:118` references
|
|
`Wallet` without importing it (one-line import, deferred).
|