Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

04 — Information Architecture (Payments)

Screen hierarchy and navigation for the payments module.

1. Placement in app shell (00-shared/05)

  • Phone: Fees tab contains "Payments" sub-destination; also reachable from Invoice detail action menu.
  • Tablet/desktop: Fees → Payments as master-detail branch; receipt preview in right pane.

2. Screen map

Payments (list)                        ─ route /payments
 ├─ Payment detail                     ─ /payments/:id
 │   ├─ Receipt view                   ─ /payments/receipts/:receiptId
 │   ├─ Refund sheet                   (modal)
 │   └─ Reconcile sheet                (modal, PENDING/PROCESSING only)
 ├─ New payment                        ─ /payments/new (full-screen form)
 │   └─ Success + receipt card         (inline result)
 └─ Receipts (list)                    ─ /payments/receipts

3. Navigation rules

  • Lists push detail (phone) / right pane (tablet+).
  • "Record payment" FAB on Payments list; contextual action on invoice detail.
  • Modal hierarchy: snackbar → bottom sheet (refund/reconcile) → dialog (confirm) → full-screen (new payment form).
  • Destructive/irreversible (refund) uses AppDialog confirm with reason field first.
  • Back: list → fees; sheet dismiss = cancel.
  • Global search: payments searchable via global search (planned); local filter client-side.

4. Quick actions & context menus

  • Row overflow menu: View, Receipt, Refund (if COMPLETED), Reconcile (if PENDING/PROCESSING).
  • FAB: New payment (hidden while scrolling down).
  • studylyon://payments/:id → payment detail
  • studylyon://payments/receipts/:id → receipt
  • studylyon://invoice/:invoiceId → invoice detail (payments tab)

6. Empty / edge surfaces

  • Payments list empty: icon + "No payments yet — record the first payment".
  • Receipts empty similarly.
  • List end-of-page indicator (paged, no infinite scroll).