Skip to content

Transaction Details external window (chrome-less page)

DONE (origin/nightly 2bdfc43d)

  • components/accounting/TransactionDetailsView.tsx — read-only view modeling the BankTransactionsTab drawer: amount header + bordered Descriptions (titles, funds account, payment method, status+GL, reference, payer ref, remarks, source, memo, selected bank details, created date, fee) + merchant/card + linked invoices + tx id. No actions/edit modals. (Skipped the derived journal-entries + interactive attachments panel by design.)
  • app/transaction/[id]/{page,client}.tsx — App-Router page; server gates on requireRbac({pageKey:'accounting'}) then renders the client WITHOUT AppShell (no chrome). Client fetches the tx via /api/accounting/transactions/[id] + bank-accounts map + accounts list (funds/GL names), centered card, defensive date handling.
  • Rewired PeriodsTab.tsx openTransactionInNewTab → window.open('/transaction/{id}') (was /accounting?tab=transactions&txId=). tsc+lint clean, suite 325/325.

Why

Owner wants a standalone external window showing ONLY a transaction's details — no navigation sidebar, no action buttons — modeled after the existing "Transaction Details" modal. First use: clicking a transaction in the Inspect Period modal opens it in that window.

Plan

  • New chrome-less page app/transaction/[id] (App Router; AppShell is applied per-page, so a page that omits it has no nav/chrome). A client component fetches the transaction via /api/accounting/transactions/[id] (+ the bank-accounts map + accounts list, to resolve funds-account and GL names).
  • New READ-ONLY TransactionDetailsView component modeling the BankTransactionsTab "Transaction Details" drawer — the amount header + the bordered Descriptions block (BankTransactionsTab.tsx:2968-3122: Original/Displaying Title, Funds Account, Payment Method, Status + GL, Reference, Payer Ref, Remarks, Source, Memo, Selected Bank Details, Created Date, Fee) + the merchant/card section + a matched summary + the tx id. NO action buttons or edit modals.
  • Rewire PeriodsTab.tsx:792 openTransactionInNewTab from /accounting?tab=transactions&txId= → /transaction/{id}.

Notes

  • No pages/_app.tsx — the app is on the App Router; providers come from app/layout.
  • The current deep-link (?txId=) pops the drawer inside BankTransactionsTab; this replaces that for the Inspect-Period entry point with a dedicated window.

T-062 (contacts work, same session).